From b4b0c6cedda54d2f56cd092563b61d1ceb18cc57 Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Sat, 17 Jan 2026 02:43:11 -0800
Subject: [PATCH] fix Toggle Queue hotkey when using detached queue (#1522)

---
 .../components/popover-play-queue.tsx         | 25 ++++++++++++++++---
 .../player/components/right-controls.tsx      | 20 +++++++++++++--
 2 files changed, 39 insertions(+), 6 deletions(-)

diff --git a/src/renderer/features/now-playing/components/popover-play-queue.tsx b/src/renderer/features/now-playing/components/popover-play-queue.tsx
index e8b531b48..872d6713e 100644
--- a/src/renderer/features/now-playing/components/popover-play-queue.tsx
+++ b/src/renderer/features/now-playing/components/popover-play-queue.tsx
@@ -10,19 +10,36 @@ import { Stack } from '/@/shared/components/stack/stack';
 import { useDisclosure } from '/@/shared/hooks/use-disclosure';
 import { ItemListKey } from '/@/shared/types/types';
 
-export const PopoverPlayQueue = () => {
+interface PopoverPlayQueueProps {
+    onClose?: () => void;
+    onToggle?: () => void;
+    opened?: boolean;
+}
+
+export const PopoverPlayQueue = ({
+    onClose,
+    onToggle,
+    opened: controlledOpened,
+}: PopoverPlayQueueProps = {}) => {
     const queueRef = useRef<ItemListHandle | null>(null);
     const [search, setSearch] = useState<string | undefined>(undefined);
 
-    const [opened, handlers] = useDisclosure(false);
+    const [internalOpened, internalHandlers] = useDisclosure(false);
+
+    const opened = controlledOpened !== undefined ? controlledOpened : internalOpened;
+    const handleClose = onClose ? onClose : internalHandlers.close;
+    const handleToggle = onToggle ? onToggle : internalHandlers.toggle;
 
     return (
         <Popover
             arrowSize={24}
             offset={12}
-            onClose={() => handlers.close()}
+            onClose={handleClose}
             opened={opened}
             position="top"
+            transitionProps={{
+                transition: 'fade',
+            }}
             withArrow
         >
             <Popover.Target>
@@ -31,7 +48,7 @@ export const PopoverPlayQueue = () => {
                     iconProps={{
                         size: 'lg',
                     }}
-                    onClick={() => handlers.toggle()}
+                    onClick={handleToggle}
                     size="sm"
                     tooltip={{
                         label: t('player.viewQueue', { postProcess: 'titleCase' }),
diff --git a/src/renderer/features/player/components/right-controls.tsx b/src/renderer/features/player/components/right-controls.tsx
index 3b8a9a6e4..379f13d5d 100644
--- a/src/renderer/features/player/components/right-controls.tsx
+++ b/src/renderer/features/player/components/right-controls.tsx
@@ -119,8 +119,18 @@ const QueueButton = () => {
 
     const { bindings } = useHotkeySettings();
 
+    const [popoverOpened, setPopoverOpened] = useState(false);
+
     const handleToggleQueue = () => {
-        setSideBar({ rightExpanded: !isSidebarRightExpanded });
+        if (sideQueueType === 'sideQueue') {
+            setSideBar({ rightExpanded: !isSidebarRightExpanded });
+        } else {
+            setPopoverOpened((prev) => !prev);
+        }
+    };
+
+    const handlePopoverClose = () => {
+        setPopoverOpened(false);
     };
 
     useHotkeys([
@@ -153,7 +163,13 @@ const QueueButton = () => {
         );
     }
 
-    return <PopoverPlayQueue />;
+    return (
+        <PopoverPlayQueue
+            onClose={handlePopoverClose}
+            onToggle={handleToggleQueue}
+            opened={popoverOpened}
+        />
+    );
 };
 
 const LyricsButton = () => {