fix Toggle Queue hotkey when using detached queue (#1522)

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' }),

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 = () => {