From 1abae986f8f91bba93c789336eda4ef90e51c140 Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Sat, 4 Apr 2026 18:25:04 -0700
Subject: [PATCH] move server selector into app menu

---
 .../components/mobile-sidebar.module.css      |  9 ++------
 .../sidebar/components/mobile-sidebar.tsx     |  4 ----
 .../components/server-selector.module.css     | 10 ++++----
 .../sidebar/components/server-selector.tsx    | 20 ++++------------
 .../sidebar/components/sidebar.module.css     |  9 ++------
 .../features/sidebar/components/sidebar.tsx   |  4 ----
 .../titlebar/components/app-menu.module.css   |  4 ++++
 .../features/titlebar/components/app-menu.tsx | 23 +++++++++++++++++++
 8 files changed, 40 insertions(+), 43 deletions(-)
 create mode 100644 src/renderer/features/titlebar/components/app-menu.module.css

diff --git a/src/renderer/features/sidebar/components/mobile-sidebar.module.css b/src/renderer/features/sidebar/components/mobile-sidebar.module.css
index f6c0c3a25..82f0f2280 100644
--- a/src/renderer/features/sidebar/components/mobile-sidebar.module.css
+++ b/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;
-}
diff --git a/src/renderer/features/sidebar/components/mobile-sidebar.tsx b/src/renderer/features/sidebar/components/mobile-sidebar.tsx
index 2d268ea41..b726d3fbf 100644
--- a/src/renderer/features/sidebar/components/mobile-sidebar.tsx
+++ b/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>
     );
 };
diff --git a/src/renderer/features/sidebar/components/server-selector.module.css b/src/renderer/features/sidebar/components/server-selector.module.css
index 45fc2ba5e..444bb94dd 100644
--- a/src/renderer/features/sidebar/components/server-selector.module.css
+++ b/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;
diff --git a/src/renderer/features/sidebar/components/server-selector.tsx b/src/renderer/features/sidebar/components/server-selector.tsx
index 05437d464..286736223 100644
--- a/src/renderer/features/sidebar/components/server-selector.tsx
+++ b/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
-                        className={`${styles.buttonContainer} ${
-                            showImage ? styles.buttonContainerNoBottomPadding : ''
-                        }`}
-                    >
-                        <Group className={styles.buttonGroup} gap="sm" ref={targetRef}>
+                    <Box className={styles.buttonContainer}>
+                        <Group className={styles.buttonGroup} gap="sm">
                             <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>
diff --git a/src/renderer/features/sidebar/components/sidebar.module.css b/src/renderer/features/sidebar/components/sidebar.module.css
index 46a4c8e18..5e60d8b6f 100644
--- a/src/renderer/features/sidebar/components/sidebar.module.css
+++ b/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;
-}
diff --git a/src/renderer/features/sidebar/components/sidebar.tsx b/src/renderer/features/sidebar/components/sidebar.tsx
index 733c7e74a..c1522c7c9 100644
--- a/src/renderer/features/sidebar/components/sidebar.tsx
+++ b/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>
diff --git a/src/renderer/features/titlebar/components/app-menu.module.css b/src/renderer/features/titlebar/components/app-menu.module.css
new file mode 100644
index 000000000..c1e558f84
--- /dev/null
+++ b/src/renderer/features/titlebar/components/app-menu.module.css
@@ -0,0 +1,4 @@
+.server-selector {
+    width: 100%;
+    min-width: 16rem;
+}
diff --git a/src/renderer/features/titlebar/components/app-menu.tsx b/src/renderer/features/titlebar/components/app-menu.tsx
index 562408150..23d756a03 100644
--- a/src/renderer/features/titlebar/components/app-menu.tsx
+++ b/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',