support vertical play queue layout

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

@@ -10,8 +10,16 @@ import { isServerLock } from '/@/renderer/features/action-required/utils/window-
 import { ServerList } from '/@/renderer/features/servers/components/server-list';
 import { openSettingsModal } from '/@/renderer/features/settings/utils/open-settings-modal';
 import { openReleaseNotesModal } from '/@/renderer/release-notes-modal';
-import { useAppStore, useAppStoreActions, useCommandPalette } from '/@/renderer/store';
+import {
+    useAppStore,
+    useAppStoreActions,
+    useCommandPalette,
+    useGeneralSettings,
+    useSettingsStoreActions,
+} from '/@/renderer/store';
+import { ActionIcon } from '/@/shared/components/action-icon/action-icon';
 import { DropdownMenu, MenuItemProps } from '/@/shared/components/dropdown-menu/dropdown-menu';
+import { Group } from '/@/shared/components/group/group';
 import { Icon } from '/@/shared/components/icon/icon';
 import { toast } from '/@/shared/components/toast/toast';
 
@@ -74,6 +82,8 @@ export const AppMenu = () => {
     const collapsed = useAppStore((state) => state.sidebar.collapsed);
     const privateMode = useAppStore((state) => state.privateMode);
     const { setPrivateMode, setSideBar } = useAppStoreActions();
+    const { setSettings } = useSettingsStoreActions();
+    const settings = useGeneralSettings();
     const { open: openCommandPalette } = useCommandPalette();
 
     const handleBrowserDevTools = () => {
@@ -115,6 +125,15 @@ export const AppMenu = () => {
         browser?.quit();
     };
 
+    const handleSetSideQueueLayout = (sideQueueLayout: 'horizontal' | 'vertical') => {
+        setSettings({
+            general: {
+                ...settings,
+                sideQueueLayout,
+            },
+        });
+    };
+
     const menuConfig: MenuItem[] = [
         {
             icon: 'search',
@@ -265,6 +284,61 @@ export const AppMenu = () => {
             },
             type: 'conditional-item',
         },
+        {
+            id: 'divider-5',
+            type: 'divider',
+        },
+        {
+            condition: settings.sideQueueType === 'sideQueue',
+            id: 'layout-toggle-group',
+            items: [
+                {
+                    component: (
+                        <Group gap="xs" grow w="100%">
+                            <ActionIcon
+                                icon="layoutPanelRight"
+                                iconProps={{
+                                    size: 'xl',
+                                }}
+                                onClick={() => handleSetSideQueueLayout('horizontal')}
+                                tooltip={{
+                                    label: t('setting.sidePlayQueueLayout', {
+                                        context: 'optionHorizontal',
+                                        postProcess: 'sentenceCase',
+                                    }),
+                                    openDelay: 0,
+                                    position: 'bottom',
+                                }}
+                                variant={
+                                    settings.sideQueueLayout === 'horizontal' ? 'light' : 'default'
+                                }
+                            />
+                            <ActionIcon
+                                icon="layoutPanelBottom"
+                                iconProps={{
+                                    size: 'xl',
+                                }}
+                                onClick={() => handleSetSideQueueLayout('vertical')}
+                                tooltip={{
+                                    label: t('setting.sidePlayQueueLayout', {
+                                        context: 'optionVertical',
+                                        postProcess: 'sentenceCase',
+                                    }),
+                                    openDelay: 0,
+                                    position: 'bottom',
+                                }}
+                                variant={
+                                    settings.sideQueueLayout === 'vertical' ? 'light' : 'default'
+                                }
+                            />
+                        </Group>
+                    ),
+                    id: 'layout-toggle',
+                    type: 'custom',
+                },
+            ],
+            type: 'conditional-group',
+        },
     ];
 
     const renderMenuItem = (item: MenuItem): ReactNode => {