re-add menu button to sidebar

src/renderer/features/player/components/player-config.tsx

@@ -312,7 +312,7 @@ export const PlayerConfig = () => {
     ]);
 
     return (
-        <Popover position="top-end" width={500} withArrow>
+        <Popover position="top" width={500}>
             <Popover.Target>
                 <ActionIcon
                     icon="mediaSettings"

src/renderer/features/sidebar/components/action-bar.tsx

@@ -3,8 +3,10 @@ import { useNavigate } from 'react-router';
 
 import styles from './action-bar.module.css';
 
+import { AppMenu } from '/@/renderer/features/titlebar/components/app-menu';
 import { useCommandPalette } from '/@/renderer/store';
 import { Button } from '/@/shared/components/button/button';
+import { DropdownMenu } from '/@/shared/components/dropdown-menu/dropdown-menu';
 import { Grid } from '/@/shared/components/grid/grid';
 import { Group } from '/@/shared/components/group/group';
 import { Icon } from '/@/shared/components/icon/icon';
@@ -23,7 +25,7 @@ export const ActionBar = () => {
                 style={{ padding: '0 var(--theme-spacing-md)' }}
                 w="100%"
             >
-                <Grid.Col span={8}>
+                <Grid.Col span={7}>
                     <TextInput
                         leftSection={<Icon icon="search" />}
                         onClick={open}
@@ -36,13 +38,23 @@ export const ActionBar = () => {
                         readOnly
                     />
                 </Grid.Col>
-                <Grid.Col span={4}>
+                <Grid.Col span={5}>
                     <Group gap="sm" grow wrap="nowrap">
+                        <DropdownMenu position="bottom-start">
+                            <DropdownMenu.Target>
+                                <Button p="0.5rem">
+                                    <Icon icon="menu" size="lg" />
+                                </Button>
+                            </DropdownMenu.Target>
+                            <DropdownMenu.Dropdown>
+                                <AppMenu />
+                            </DropdownMenu.Dropdown>
+                        </DropdownMenu>
                         <Button onClick={() => navigate(-1)} p="0.5rem">
-                            <Icon icon="arrowLeftS" />
+                            <Icon icon="arrowLeftS" size="lg" />
                         </Button>
                         <Button onClick={() => navigate(1)} p="0.5rem">
-                            <Icon icon="arrowRightS" />
+                            <Icon icon="arrowRightS" size="lg" />
                         </Button>
                     </Group>
                 </Grid.Col>

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

@@ -1,4 +1,5 @@
 import { useQuery } from '@tanstack/react-query';
+import { useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import styles from './server-selector.module.css';
@@ -7,7 +8,7 @@ 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 { sharedQueries } from '/@/renderer/features/shared/api/shared-api';
-import { AppMenu } from '/@/renderer/features/titlebar/components/app-menu';
+import { ServerSelectorItems } from '/@/renderer/features/sidebar/components/server-selector-items';
 import { useCurrentServer } from '/@/renderer/store';
 import { hasFeature } from '/@/shared/api/utils';
 import { Box } from '/@/shared/components/box/box';
@@ -33,6 +34,9 @@ export const ServerSelector = ({ showImage = false }: ServerSelectorProps) => {
             : { enabled: false, queryKey: ['disabled'] },
     );
 
+    const targetRef = useRef<HTMLDivElement | null>(null);
+    const widthOfTarget = targetRef.current?.getBoundingClientRect().width;
+
     if (!currentServer) {
         return null;
     }
@@ -66,7 +70,7 @@ export const ServerSelector = ({ showImage = false }: ServerSelectorProps) => {
               : OpenSubsonicLogo;
 
     return (
-        <DropdownMenu position="right">
+        <DropdownMenu offset={0} position="top">
             <DropdownMenu.Target>
                 <div className={styles.popoverTarget}>
                     <Box
@@ -74,7 +78,7 @@ export const ServerSelector = ({ showImage = false }: ServerSelectorProps) => {
                             showImage ? styles.buttonContainerNoBottomPadding : ''
                         }`}
                     >
-                        <Group className={styles.buttonGroup} gap="sm">
+                        <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>
@@ -89,8 +93,8 @@ export const ServerSelector = ({ showImage = false }: ServerSelectorProps) => {
                     </Box>
                 </div>
             </DropdownMenu.Target>
-            <DropdownMenu.Dropdown>
+            <DropdownMenu.Dropdown style={{ width: `${widthOfTarget}px` }}>
-                <AppMenu />
+                <ServerSelectorItems />
             </DropdownMenu.Dropdown>
         </DropdownMenu>
     );

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

@@ -5,7 +5,6 @@ import { Link, useNavigate } from 'react-router';
 
 import packageJson from '../../../../../package.json';
 
-import { ServerSelectorItems } from '/@/renderer/features/sidebar/components/server-selector-items';
 import { AppRoute } from '/@/renderer/router/routes';
 import { useAppStore, useAppStoreActions, useSidebarStore } from '/@/renderer/store';
 import { DropdownMenu, MenuItemProps } from '/@/shared/components/dropdown-menu/dropdown-menu';
@@ -193,15 +192,6 @@ export const AppMenu = () => {
             id: 'divider-3',
             type: 'divider',
         },
-        {
-            component: <ServerSelectorItems />,
-            id: 'server-selector',
-            type: 'custom',
-        },
-        {
-            id: 'divider-4',
-            type: 'divider',
-        },
         {
             component: 'a',
             href: 'https://github.com/jeffvli/feishin/releases',