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 = () => {
)}
-
-
-
);
};
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(null);
- const widthOfTarget = targetRef.current?.getBoundingClientRect().width;
-
if (!currentServer) {
return null;
}
@@ -69,15 +63,11 @@ export const ServerSelector = () => {
: OpenSubsonicLogo;
return (
-
+
-
-
+
+
@@ -92,7 +82,7 @@ export const ServerSelector = () => {
-
+
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 = () => {
-
-
-
{showImage && }
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: (
+
+
+
+ ),
+ id: 'server-selector',
+ type: 'custom',
+ },
+ {
+ id: 'divider-server',
+ type: 'divider',
+ },
+ ]
+ : [];
+
const menuConfig: MenuItem[] = [
+ ...serverHeaderMenuItems,
{
icon: 'search',
id: 'command-palette',