add server selector to collapsed sidebar (#1401)

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>
     );
 };