make queue controls follow panel in sidebar (#1492)

src/renderer/features/now-playing/components/sidebar-play-queue.module.css

@@ -88,3 +88,10 @@
 .visualizer-section:hover .panel-reorder-controls {
     opacity: 1;
 }
+
+.draggable-region {
+    flex-shrink: 0;
+    width: 100%;
+    height: 65px;
+    -webkit-app-region: drag;
+}

src/renderer/features/now-playing/components/sidebar-play-queue.tsx

@@ -1,4 +1,5 @@
 import { useQuery } from '@tanstack/react-query';
+import isElectron from 'is-electron';
 import { lazy, Suspense, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 // import { Group, Panel, Separator, useDefaultLayout } from 'react-resizable-panels';
@@ -21,11 +22,12 @@ import {
     useShowLyricsInSidebar,
     useShowVisualizerInSidebar,
     useSidebarPanelOrder,
+    useWindowSettings,
 } from '/@/renderer/store';
 import { ActionIcon, ActionIconGroup } from '/@/shared/components/action-icon/action-icon';
 import { Flex } from '/@/shared/components/flex/flex';
 import { Stack } from '/@/shared/components/stack/stack';
-import { ItemListKey, PlayerType } from '/@/shared/types/types';
+import { ItemListKey, Platform, PlayerType } from '/@/shared/types/types';
 
 type SidebarPanelType = 'lyrics' | 'queue' | 'visualizer';
 
@@ -51,9 +53,12 @@ export const SidebarPlayQueue = () => {
     const showVisualizerInSidebar = useShowVisualizerInSidebar();
     const sidebarPanelOrder = useSidebarPanelOrder();
     const { type, webAudio } = usePlaybackSettings();
+    const { windowBarStyle } = useWindowSettings();
     const showVisualizer = showVisualizerInSidebar && type === PlayerType.WEB && webAudio;
     const showPanel = showLyricsInSidebar || showVisualizer;
 
+    const shouldAddTopMargin = isElectron() && windowBarStyle === Platform.WEB;
+
     useEffect(() => {
         if (isFullScreenPlayerExpanded) {
             // Immediately hide when fullscreen player opens
@@ -102,13 +107,20 @@ export const SidebarPlayQueue = () => {
     const renderPanel = (panelType: SidebarPanelType) => {
         if (panelType === 'queue') {
             return (
-                <div className={styles.playQueueSection}>
+                <Stack gap={0} h="100%" w="100%">
-                    <PlayQueue
+                    <PlayQueueListControls
-                        listKey={ItemListKey.SIDE_QUEUE}
+                        handleSearch={setSearch}
-                        ref={tableRef}
                         searchTerm={search}
+                        type={ItemListKey.SIDE_QUEUE}
                     />
-                </div>
+                    <div className={styles.playQueueSection}>
+                        <PlayQueue
+                            listKey={ItemListKey.SIDE_QUEUE}
+                            ref={tableRef}
+                            searchTerm={search}
+                        />
+                    </div>
+                </Stack>
             );
         }
 
@@ -177,11 +189,7 @@ export const SidebarPlayQueue = () => {
 
     return (
         <Stack gap={0} h="100%" id="sidebar-play-queue-container" pos="relative" w="100%">
-            <PlayQueueListControls
+            {shouldAddTopMargin && <div className={styles.draggableRegion} />}
-                handleSearch={setSearch}
-                searchTerm={search}
-                type={ItemListKey.SIDE_QUEUE}
-            />
             {showPanel ? (
                 <SplitPane
                     direction="vertical"
@@ -202,15 +210,22 @@ export const SidebarPlayQueue = () => {
                     ))}
                 </SplitPane>
             ) : (
-                <Flex direction="column" style={{ flex: 1, minHeight: 0 }}>
+                <Stack gap={0} h="100%" w="100%">
-                    <div className={styles.playQueueSection}>
+                    <PlayQueueListControls
-                        <PlayQueue
+                        handleSearch={setSearch}
-                            listKey={ItemListKey.SIDE_QUEUE}
+                        searchTerm={search}
-                            ref={tableRef}
+                        type={ItemListKey.SIDE_QUEUE}
-                            searchTerm={search}
+                    />
-                        />
+                    <Flex direction="column" style={{ flex: 1, minHeight: 0 }}>
-                    </div>
+                        <div className={styles.playQueueSection}>
-                </Flex>
+                            <PlayQueue
+                                listKey={ItemListKey.SIDE_QUEUE}
+                                ref={tableRef}
+                                searchTerm={search}
+                            />
+                        </div>
+                    </Flex>
+                </Stack>
             )}
         </Stack>
     );