move server selector into app menu

src/renderer/features/sidebar/components/mobile-sidebar.module.css

@@ -22,7 +22,8 @@
 }
 
 .accordion-control {
-    height: 2.5rem;
+    height: auto;
+    min-height: 2.5rem;
     border-radius: var(--theme-radius-md);
 
     &:hover {
@@ -38,9 +39,3 @@
 .accordion-content:last-child {
     padding-bottom: var(--theme-spacing-md);
 }
-
-.server-selector-wrapper {
-    position: relative;
-    z-index: 1;
-    flex-shrink: 0;
-}

src/renderer/features/sidebar/components/mobile-sidebar.tsx

@@ -4,7 +4,6 @@ import { useTranslation } from 'react-i18next';
 import styles from './mobile-sidebar.module.css';
 
 import { ActionBar } from '/@/renderer/features/sidebar/components/action-bar';
-import { ServerSelector } from '/@/renderer/features/sidebar/components/server-selector';
 import { SidebarIcon } from '/@/renderer/features/sidebar/components/sidebar-icon';
 import { SidebarItem } from '/@/renderer/features/sidebar/components/sidebar-item';
 import {
@@ -104,9 +103,6 @@ export const MobileSidebar = () => {
                     )}
                 </Accordion>
             </ScrollArea>
-            <div className={styles.serverSelectorWrapper}>
-                <ServerSelector />
-            </div>
         </div>
     );
 };

src/renderer/features/sidebar/components/server-selector.module.css

@@ -1,20 +1,18 @@
 .button-container {
     align-items: center;
     width: 100%;
-    padding: var(--theme-spacing-md);
     cursor: pointer;
 }
 
-.button-container-no-bottom-padding {
-    padding-bottom: 0;
-}
-
 .button-group {
     padding: var(--theme-spacing-sm);
-    background: var(--theme-colors-surface);
     border-radius: var(--theme-radius-md);
 }
 
+.button-group:hover {
+    background: var(--theme-colors-surface);
+}
+
 .logo {
     flex-shrink: 0;
     width: 2.5rem;

src/renderer/features/sidebar/components/server-selector.tsx

@@ -1,5 +1,4 @@
 import { useQuery } from '@tanstack/react-query';
-import { useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import styles from './server-selector.module.css';
@@ -9,7 +8,7 @@ import NavidromeLogo from '/@/renderer/features/servers/assets/navidrome.png';
 import OpenSubsonicLogo from '/@/renderer/features/servers/assets/opensubsonic.png';
 import { sharedQueries } from '/@/renderer/features/shared/api/shared-api';
 import { ServerSelectorItems } from '/@/renderer/features/sidebar/components/server-selector-items';
-import { useAppStore, useCurrentServer } from '/@/renderer/store';
+import { useCurrentServer } from '/@/renderer/store';
 import { hasFeature } from '/@/shared/api/utils';
 import { Box } from '/@/shared/components/box/box';
 import { DropdownMenu } from '/@/shared/components/dropdown-menu/dropdown-menu';
@@ -24,8 +23,6 @@ import { ServerFeature } from '/@/shared/types/features-types';
 export const ServerSelector = () => {
     const { t } = useTranslation();
     const currentServer = useCurrentServer();
-    const sidebarImageEnabled = useAppStore((state) => state.sidebar.image);
-    const showImage = sidebarImageEnabled;
 
     const { data: musicFolders } = useQuery(
         currentServer
@@ -33,9 +30,6 @@ export const ServerSelector = () => {
             : { enabled: false, queryKey: ['disabled'] },
     );
 
-    const targetRef = useRef<HTMLDivElement | null>(null);
-    const widthOfTarget = targetRef.current?.getBoundingClientRect().width;
-
     if (!currentServer) {
         return null;
     }
@@ -69,15 +63,11 @@ export const ServerSelector = () => {
               : OpenSubsonicLogo;
 
     return (
-        <DropdownMenu offset={0} position="right">
+        <DropdownMenu offset={0} position="right-start" withinPortal={false}>
             <DropdownMenu.Target>
                 <div className={styles.popoverTarget}>
-                    <Box
+                    <Box className={styles.buttonContainer}>
-                        className={`${styles.buttonContainer} ${
+                        <Group className={styles.buttonGroup} gap="sm">
-                            showImage ? styles.buttonContainerNoBottomPadding : ''
-                        }`}
-                    >
-                        <Group className={styles.buttonGroup} gap="sm" ref={targetRef}>
                             <img className={styles.logo} src={logo} />
                             <Stack className={styles.buttonStack} gap={2}>
                                 <Text fw={600} size="sm" truncate>
@@ -92,7 +82,7 @@ export const ServerSelector = () => {
                     </Box>
                 </div>
             </DropdownMenu.Target>
-            <DropdownMenu.Dropdown style={{ width: `${widthOfTarget}px` }}>
+            <DropdownMenu.Dropdown miw="16rem">
                 <ScrollArea className={styles.scrollArea}>
                     <ServerSelectorItems />
                 </ScrollArea>

src/renderer/features/sidebar/components/sidebar.module.css

@@ -66,7 +66,8 @@
 }
 
 .accordion-control {
-    height: 2.5rem;
+    height: auto;
+    min-height: 2.5rem;
     border-radius: var(--theme-radius-md);
 
     &:hover {
@@ -82,9 +83,3 @@
 .accordion-content:last-child {
     padding-bottom: var(--theme-spacing-md);
 }
-
-.server-selector-wrapper {
-    position: relative;
-    z-index: 1;
-    flex-shrink: 0;
-}

src/renderer/features/sidebar/components/sidebar.tsx

@@ -12,7 +12,6 @@ import {
     useRadioPlayer,
 } from '/@/renderer/features/radio/hooks/use-radio-player';
 import { ActionBar } from '/@/renderer/features/sidebar/components/action-bar';
-import { ServerSelector } from '/@/renderer/features/sidebar/components/server-selector';
 import { SidebarCollectionList } from '/@/renderer/features/sidebar/components/sidebar-collection-list';
 import { SidebarIcon } from '/@/renderer/features/sidebar/components/sidebar-icon';
 import { SidebarItem } from '/@/renderer/features/sidebar/components/sidebar-item';
@@ -152,9 +151,6 @@ export const Sidebar = () => {
                 </Accordion>
             </ScrollArea>
             <AnimatePresence initial={false} mode="popLayout">
-                <motion.div className={styles.serverSelectorWrapper} key="server-selector" layout>
-                    <ServerSelector />
-                </motion.div>
                 {showImage && <SidebarImage />}
             </AnimatePresence>
         </div>

src/renderer/features/titlebar/components/app-menu.module.css

@@ -0,0 +1,4 @@
+.server-selector {
+    width: 100%;
+    min-width: 16rem;
+}

src/renderer/features/titlebar/components/app-menu.tsx

@@ -5,15 +5,18 @@ import { useTranslation } from 'react-i18next';
 import { Link, useNavigate } from 'react-router';
 
 import packageJson from '../../../../../package.json';
+import styles from './app-menu.module.css';
 
 import { isServerLock } from '/@/renderer/features/action-required/utils/window-properties';
 import { ServerList } from '/@/renderer/features/servers/components/server-list';
 import { openSettingsModal } from '/@/renderer/features/settings/utils/open-settings-modal';
+import { ServerSelector } from '/@/renderer/features/sidebar/components/server-selector';
 import { openReleaseNotesModal } from '/@/renderer/release-notes-modal';
 import {
     useAppStore,
     useAppStoreActions,
     useCommandPalette,
+    useCurrentServer,
     useGeneralSettings,
     useSettingsStoreActions,
 } from '/@/renderer/store';
@@ -84,6 +87,7 @@ export const AppMenu = () => {
     const { setPrivateMode, setSideBar } = useAppStoreActions();
     const { setSettings } = useSettingsStoreActions();
     const settings = useGeneralSettings();
+    const currentServer = useCurrentServer();
     const { open: openCommandPalette } = useCommandPalette();
 
     const handleBrowserDevTools = () => {
@@ -134,7 +138,26 @@ export const AppMenu = () => {
         });
     };
 
+    const serverHeaderMenuItems: MenuItem[] = currentServer
+        ? [
+              {
+                  component: (
+                      <div className={styles.serverSelector}>
+                          <ServerSelector />
+                      </div>
+                  ),
+                  id: 'server-selector',
+                  type: 'custom',
+              },
+              {
+                  id: 'divider-server',
+                  type: 'divider',
+              },
+          ]
+        : [];
+
     const menuConfig: MenuItem[] = [
+        ...serverHeaderMenuItems,
         {
             icon: 'search',
             id: 'command-palette',