add server selector to collapsed sidebar (#1401)

src/renderer/features/lyrics/lyrics-actions.tsx

@@ -36,7 +36,6 @@ export const LyricsActions = ({
     onTranslateLyric,
     onUpdateOffset,
     setIndex,
-    settingsKey = 'default',
 }: LyricsActionsProps) => {
     const { t } = useTranslation();
     const currentSong = usePlayerSong();

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

@@ -10,3 +10,28 @@
 .sidebar-container.linux {
     max-height: calc(100vh - 149px);
 }
+
+.sidebar-container {
+    position: relative;
+}
+
+.server-selector-container {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: var(--theme-spacing-md);
+    cursor: pointer;
+    background: var(--theme-colors-sidebar-background);
+    border-top: 1px solid var(--theme-colors-sidebar-border);
+}
+
+.server-icon {
+    width: 2rem;
+    height: 2rem;
+    object-fit: cover;
+    border-radius: var(--theme-radius-md);
+}

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

@@ -6,16 +6,26 @@ import { NavLink, useNavigate } from 'react-router';
 
 import styles from './collapsed-sidebar.module.css';
 
+import JellyfinLogo from '/@/renderer/features/servers/assets/jellyfin.png';
+import NavidromeLogo from '/@/renderer/features/servers/assets/navidrome.png';
+import OpenSubsonicLogo from '/@/renderer/features/servers/assets/opensubsonic.png';
 import { CollapsedSidebarButton } from '/@/renderer/features/sidebar/components/collapsed-sidebar-button';
 import { CollapsedSidebarItem } from '/@/renderer/features/sidebar/components/collapsed-sidebar-item';
+import { ServerSelectorItems } from '/@/renderer/features/sidebar/components/server-selector-items';
 import { SidebarIcon } from '/@/renderer/features/sidebar/components/sidebar-icon';
 import { AppMenu } from '/@/renderer/features/titlebar/components/app-menu';
-import { SidebarItemType, useGeneralSettings, useWindowSettings } from '/@/renderer/store';
+import {
+    SidebarItemType,
+    useCurrentServer,
+    useGeneralSettings,
+    useWindowSettings,
+} from '/@/renderer/store';
 import { DropdownMenu } from '/@/shared/components/dropdown-menu/dropdown-menu';
 import { Flex } from '/@/shared/components/flex/flex';
 import { Group } from '/@/shared/components/group/group';
 import { Icon } from '/@/shared/components/icon/icon';
 import { ScrollArea } from '/@/shared/components/scroll-area/scroll-area';
+import { ServerType } from '/@/shared/types/domain-types';
 import { Platform } from '/@/shared/types/types';
 
 export const CollapsedSidebar = () => {
@@ -23,6 +33,7 @@ export const CollapsedSidebar = () => {
     const navigate = useNavigate();
     const { windowBarStyle } = useWindowSettings();
     const { sidebarCollapsedNavigation, sidebarItems } = useGeneralSettings();
+    const currentServer = useCurrentServer();
 
     const translatedSidebarItemMap = useMemo(
         () => ({
@@ -109,6 +120,27 @@ export const CollapsedSidebar = () => {
                     />
                 ))}
             </ScrollArea>
+            {currentServer && (
+                <DropdownMenu offset={0} position="right-end" width={240}>
+                    <DropdownMenu.Target>
+                        <div className={styles.serverSelectorContainer}>
+                            <img
+                                className={styles.serverIcon}
+                                src={
+                                    currentServer.type === ServerType.NAVIDROME
+                                        ? NavidromeLogo
+                                        : currentServer.type === ServerType.JELLYFIN
+                                          ? JellyfinLogo
+                                          : OpenSubsonicLogo
+                                }
+                            />
+                        </div>
+                    </DropdownMenu.Target>
+                    <DropdownMenu.Dropdown>
+                        <ServerSelectorItems />
+                    </DropdownMenu.Dropdown>
+                </DropdownMenu>
+            )}
         </motion.div>
     );
 };

src/renderer/router/app-router.tsx

@@ -1,6 +1,7 @@
 import { lazy, Suspense } from 'react';
 import { HashRouter, Route, Routes } from 'react-router';
 
+import { LyricsSettingsContextModal } from '/@/renderer/features/lyrics/components/lyrics-settings-modal';
 import { ShuffleAllContextModal } from '/@/renderer/features/player/components/shuffle-all-modal';
 import { AddToPlaylistContextModal } from '/@/renderer/features/playlists/components/add-to-playlist-context-modal';
 import { SaveAndReplaceContextModal } from '/@/renderer/features/playlists/components/save-and-replace-context-modal';
@@ -8,7 +9,6 @@ import { UpdatePlaylistContextModal } from '/@/renderer/features/playlists/compo
 import { SettingsContextModal } from '/@/renderer/features/settings/components/settings-modal';
 import { RouterErrorBoundary } from '/@/renderer/features/shared/components/router-error-boundary';
 import { ShareItemContextModal } from '/@/renderer/features/sharing/components/share-item-context-modal';
-import { LyricsSettingsContextModal } from '/@/renderer/features/lyrics/components/lyrics-settings-modal';
 import { VisualizerSettingsContextModal } from '/@/renderer/features/visualizer/components/audiomotionanalyzer/visualizer-settings-modal';
 import { AuthenticationOutlet } from '/@/renderer/layouts/authentication-outlet';
 import { ResponsiveLayout } from '/@/renderer/layouts/responsive-layout';
@@ -94,13 +94,13 @@ export const AppRouter = () => {
                 modals={{
                     addToPlaylist: AddToPlaylistContextModal,
                     base: BaseContextModal,
+                    lyricsSettings: LyricsSettingsContextModal,
                     saveAndReplace: SaveAndReplaceContextModal,
                     settings: SettingsContextModal,
                     shareItem: ShareItemContextModal,
                     shuffleAll: ShuffleAllContextModal,
                     updatePlaylist: UpdatePlaylistContextModal,
                     visualizerSettings: VisualizerSettingsContextModal,
-                    lyricsSettings: LyricsSettingsContextModal,
                 }}
             >
                 <RouterErrorBoundary>