support vertical play queue layout

docs/ENV_SETTINGS.md

@@ -44,6 +44,7 @@ These variables override app settings **on first run** when no persisted setting
 | `general.sidebarPlaylistList` | `true` | `FS_GENERAL_SIDEBAR_PLAYLIST_LIST` | `true` / `false` — Show playlist list in sidebar. |
 | `general.sidebarPlaylistSorting` | `false` | `FS_GENERAL_SIDEBAR_PLAYLIST_SORTING` | `true` / `false` — Enable playlist sorting in sidebar. |
 | `general.sideQueueType` | `sideQueue` | `FS_GENERAL_SIDE_QUEUE_TYPE` | `sideDrawerQueue` / `sideQueue` — Side play queue style. |
+| `general.sideQueueLayout` | `horizontal` | `FS_GENERAL_SIDE_QUEUE_LAYOUT` | `horizontal` / `vertical` — Attached side queue layout orientation. |
 | `general.useThemeAccentColor` | `false` | `FS_GENERAL_USE_THEME_ACCENT_COLOR` | `true` / `false` — Use theme’s accent color instead of custom. |
 | `general.useThemePrimaryShade` | `true` | `FS_GENERAL_USE_THEME_PRIMARY_SHADE` | `true` / `false` — Use theme’s primary shade. |
 | `general.zoomFactor` | `100` | `FS_GENERAL_ZOOM_FACTOR` | UI zoom percentage (number). |

settings.js.template

@@ -39,6 +39,7 @@ window.FS_GENERAL_SIDEBAR_COLLAPSE_SHARED = "${FS_GENERAL_SIDEBAR_COLLAPSE_SHARE
 window.FS_GENERAL_SIDEBAR_PLAYLIST_LIST = "${FS_GENERAL_SIDEBAR_PLAYLIST_LIST}";
 window.FS_GENERAL_SIDEBAR_PLAYLIST_SORTING = "${FS_GENERAL_SIDEBAR_PLAYLIST_SORTING}";
 window.FS_GENERAL_SIDE_QUEUE_TYPE = "${FS_GENERAL_SIDE_QUEUE_TYPE}";
+window.FS_GENERAL_SIDE_QUEUE_LAYOUT = "${FS_GENERAL_SIDE_QUEUE_LAYOUT}";
 window.FS_GENERAL_THEME = "${FS_GENERAL_THEME}";
 window.FS_GENERAL_THEME_DARK = "${FS_GENERAL_THEME_DARK}";
 window.FS_GENERAL_THEME_LIGHT = "${FS_GENERAL_THEME_LIGHT}";

src/i18n/locales/en.json

@@ -1036,6 +1036,10 @@
         "sidePlayQueueStyle_description": "sets the style of the side play queue",
         "sidePlayQueueStyle_optionAttached": "attached",
         "sidePlayQueueStyle_optionDetached": "detached",
+        "sidePlayQueueLayout": "side play queue layout",
+        "sidePlayQueueLayout_description": "sets the layout of the attached side play queue",
+        "sidePlayQueueLayout_optionHorizontal": "horizontal",
+        "sidePlayQueueLayout_optionVertical": "vertical",
         "mediaSession_description": "enables Media Session integration, displaying media controls and metadata in the system volume overlay and lock screen",
         "mediaSession": "enable media session",
         "sidePlayQueueStyle": "side play queue style",

src/renderer/features/settings/components/general/application-settings.tsx

@@ -20,6 +20,7 @@ import {
 } from '/@/renderer/features/settings/components/settings-section';
 import {
     HomeFeatureStyle,
+    SideQueueLayout,
     SideQueueType,
     useFontSettings,
     useGeneralSettings,
@@ -74,6 +75,23 @@ const SIDE_QUEUE_OPTIONS = [
     },
 ];
 
+const SIDE_QUEUE_LAYOUT_OPTIONS = [
+    {
+        label: t('setting.sidePlayQueueLayout', {
+            context: 'optionHorizontal',
+            postProcess: 'sentenceCase',
+        }),
+        value: 'horizontal',
+    },
+    {
+        label: t('setting.sidePlayQueueLayout', {
+            context: 'optionVertical',
+            postProcess: 'sentenceCase',
+        }),
+        value: 'vertical',
+    },
+];
+
 const FONT_TYPES: Font[] = [
     {
         label: i18n.t('setting.fontType', {
@@ -539,6 +557,29 @@ export const ApplicationSettings = memo(() => {
             isHidden: false,
             title: t('setting.sidePlayQueueStyle', { postProcess: 'sentenceCase' }),
         },
+        {
+            control: (
+                <SegmentedControl
+                    aria-label={t('setting.sidePlayQueueLayout', { postProcess: 'sentenceCase' })}
+                    data={SIDE_QUEUE_LAYOUT_OPTIONS}
+                    defaultValue={settings.sideQueueLayout}
+                    onChange={(e) =>
+                        setSettings({
+                            general: {
+                                ...settings,
+                                sideQueueLayout: e as SideQueueLayout,
+                            },
+                        })
+                    }
+                />
+            ),
+            description: t('setting.sidePlayQueueLayout', {
+                context: 'description',
+                postProcess: 'sentenceCase',
+            }),
+            isHidden: settings.sideQueueType !== 'sideQueue',
+            title: t('setting.sidePlayQueueLayout', { postProcess: 'sentenceCase' }),
+        },
         {
             control: (
                 <Switch

src/renderer/features/shared/components/resize-handle.module.css

@@ -21,6 +21,10 @@
 
 .handle-top {
     top: 0;
+    left: 0;
+    width: 100%;
+    height: 4px;
+    cursor: ns-resize;
 }
 
 .handle-right {
@@ -29,6 +33,10 @@
 
 .handle-bottom {
     bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 4px;
+    cursor: ns-resize;
 }
 
 .handle-left {

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 => {

src/renderer/layouts/default-layout/main-content.module.css

@@ -28,6 +28,23 @@
     grid-template-columns: 80px 1fr var(--right-sidebar-width);
 }
 
+.main-content-container.vertical-layout {
+    grid-template-areas:
+        'sidebar .'
+        'sidebar right-sidebar';
+    grid-template-rows: minmax(0, 1fr) var(--right-sidebar-height);
+    grid-template-columns: var(--sidebar-width) 1fr;
+}
+
+.main-content-container.sidebar-collapsed.vertical-layout {
+    grid-template-columns: 80px 1fr;
+}
+
+.main-content-container.vertical-layout #sidebar-queue {
+    border-top: 1px solid alpha(var(--theme-colors-border), 0.5);
+    border-left: 0;
+}
+
 .main-content-body {
     display: flex;
     flex: 1;

src/renderer/layouts/default-layout/main-content.tsx

@@ -16,6 +16,7 @@ import {
     useAppStore,
     useAppStoreActions,
     useGlobalExpanded,
+    useSideQueueLayout,
     useSideQueueType,
 } from '/@/renderer/store';
 import { constrainRightSidebarWidth, constrainSidebarWidth } from '/@/renderer/utils';
@@ -24,56 +25,77 @@ import { Spinner } from '/@/shared/components/spinner/spinner';
 const MINIMUM_SIDEBAR_WIDTH = 260;
 
 export const MainContent = ({ shell }: { shell?: boolean }) => {
-    const { collapsed, leftWidth, rightExpanded, rightWidth } = useAppStore(
+    const { collapsed, leftWidth, rightExpanded, rightHeight, rightWidth } = useAppStore(
         (state) => ({
             collapsed: state.sidebar.collapsed,
             leftWidth: state.sidebar.leftWidth,
             rightExpanded: state.sidebar.rightExpanded,
+            rightHeight: state.sidebar.rightHeight,
             rightWidth: state.sidebar.rightWidth,
         }),
         shallow,
     );
     const { setSideBar } = useAppStoreActions();
     const sideQueueType = useSideQueueType();
+    const sideQueueLayout = useSideQueueLayout();
     const [isResizing, setIsResizing] = useState(false);
     const [isResizingRight, setIsResizingRight] = useState(false);
 
     const rightSidebarRef = useRef<HTMLDivElement | null>(null);
     const mainContentRef = useRef<HTMLDivElement | null>(null);
     const initialRightWidthRef = useRef<string>(rightWidth);
+    const initialRightHeightRef = useRef<string>(rightHeight);
     const initialMouseXRef = useRef<number>(0);
+    const initialMouseYRef = useRef<number>(0);
     const wasCollapsedDuringDragRef = useRef<boolean>(false);
 
     useEffect(() => {
         if (mainContentRef.current && !isResizing && !isResizingRight) {
             mainContentRef.current.style.setProperty('--sidebar-width', leftWidth);
             mainContentRef.current.style.setProperty('--right-sidebar-width', rightWidth);
+            mainContentRef.current.style.setProperty('--right-sidebar-height', rightHeight);
             initialRightWidthRef.current = rightWidth;
+            initialRightHeightRef.current = rightHeight;
         }
-    }, [leftWidth, rightWidth, isResizing, isResizingRight]);
+    }, [leftWidth, rightWidth, rightHeight, isResizing, isResizingRight]);
 
     const startResizing = useCallback(
-        (position: 'left' | 'right', mouseEvent?: MouseEvent) => {
+        (position: 'left' | 'right' | 'top', mouseEvent?: MouseEvent) => {
             if (position === 'left') {
                 setIsResizing(true);
                 wasCollapsedDuringDragRef.current = false;
             } else {
                 setIsResizingRight(true);
                 if (mainContentRef.current && rightSidebarRef.current && mouseEvent) {
-                    const currentWidth =
+                    if (position === 'top') {
-                        mainContentRef.current.style.getPropertyValue('--right-sidebar-width');
+                        const currentHeight =
-                    if (currentWidth) {
+                            mainContentRef.current.style.getPropertyValue('--right-sidebar-height');
-                        initialRightWidthRef.current = currentWidth;
+                        if (currentHeight) {
+                            initialRightHeightRef.current = currentHeight;
+                        } else {
+                            initialRightHeightRef.current = rightHeight;
+                        }
+                        initialMouseYRef.current = mouseEvent.clientY;
+                    } else {
+                        const currentWidth =
+                            mainContentRef.current.style.getPropertyValue('--right-sidebar-width');
+                        if (currentWidth) {
+                            initialRightWidthRef.current = currentWidth;
+                        } else {
+                            initialRightWidthRef.current = rightWidth;
+                        }
+                        initialMouseXRef.current = mouseEvent.clientX;
+                    }
+                } else {
+                    if (position === 'top') {
+                        initialRightHeightRef.current = rightHeight;
                     } else {
                         initialRightWidthRef.current = rightWidth;
                     }
-                    initialMouseXRef.current = mouseEvent.clientX;
-                } else {
-                    initialRightWidthRef.current = rightWidth;
                 }
             }
         },
-        [rightWidth],
+        [rightHeight, rightWidth],
     );
 
     const stopResizing = useCallback(() => {
@@ -87,14 +109,22 @@ export const MainContent = ({ shell }: { shell?: boolean }) => {
             setIsResizing(false);
             wasCollapsedDuringDragRef.current = false;
         } else if (isResizingRight && mainContentRef.current) {
-            const finalWidth =
+            if (sideQueueLayout === 'vertical') {
-                mainContentRef.current.style.getPropertyValue('--right-sidebar-width');
+                const finalHeight =
-            if (finalWidth) {
+                    mainContentRef.current.style.getPropertyValue('--right-sidebar-height');
-                setSideBar({ rightWidth: finalWidth });
+                if (finalHeight) {
+                    setSideBar({ rightHeight: finalHeight });
+                }
+            } else {
+                const finalWidth =
+                    mainContentRef.current.style.getPropertyValue('--right-sidebar-width');
+                if (finalWidth) {
+                    setSideBar({ rightWidth: finalWidth });
+                }
             }
             setIsResizingRight(false);
         }
-    }, [isResizing, isResizingRight, setSideBar]);
+    }, [isResizing, isResizingRight, setSideBar, sideQueueLayout]);
 
     const resize = useCallback(
         (mouseMoveEvent: any) => {
@@ -118,15 +148,30 @@ export const MainContent = ({ shell }: { shell?: boolean }) => {
                     mainContentRef.current.style.setProperty('--sidebar-width', constrainedWidth);
                 }
             } else if (isResizingRight) {
-                const initialWidth = Number(initialRightWidthRef.current.split('px')[0]);
+                if (sideQueueLayout === 'vertical') {
-                const initialMouseX = initialMouseXRef.current;
+                    const initialHeight = Number(initialRightHeightRef.current.split('px')[0]);
-                const deltaX = mouseMoveEvent.clientX - initialMouseX;
+                    const initialMouseY = initialMouseYRef.current;
-                const newWidth = initialWidth - deltaX;
+                    const deltaY = mouseMoveEvent.clientY - initialMouseY;
-                const width = `${constrainRightSidebarWidth(newWidth)}px`;
+                    const containerHeight = mainContentRef.current.clientHeight;
-                mainContentRef.current.style.setProperty('--right-sidebar-width', width);
+                    const minHeight = 220;
+                    const maxHeight = Math.max(minHeight, containerHeight - 200);
+                    const newHeight = initialHeight - deltaY;
+                    const clampedHeight = Math.min(Math.max(newHeight, minHeight), maxHeight);
+                    mainContentRef.current.style.setProperty(
+                        '--right-sidebar-height',
+                        `${clampedHeight}px`,
+                    );
+                } else {
+                    const initialWidth = Number(initialRightWidthRef.current.split('px')[0]);
+                    const initialMouseX = initialMouseXRef.current;
+                    const deltaX = mouseMoveEvent.clientX - initialMouseX;
+                    const newWidth = initialWidth - deltaX;
+                    const width = `${constrainRightSidebarWidth(newWidth)}px`;
+                    mainContentRef.current.style.setProperty('--right-sidebar-width', width);
+                }
             }
         },
-        [isResizing, isResizingRight, setSideBar],
+        [isResizing, isResizingRight, setSideBar, sideQueueLayout],
     );
 
     useEffect(() => {
@@ -145,6 +190,10 @@ export const MainContent = ({ shell }: { shell?: boolean }) => {
                 [styles.shell]: shell,
                 [styles.sidebarCollapsed]: collapsed,
                 [styles.sidebarExpanded]: !collapsed,
+                [styles.verticalLayout]:
+                    rightExpanded &&
+                    sideQueueType === 'sideQueue' &&
+                    sideQueueLayout === 'vertical',
             })}
             id="main-content"
             ref={mainContentRef}

src/renderer/layouts/default-layout/right-sidebar.module.css

@@ -14,6 +14,11 @@
     }
 }
 
+.right-sidebar-container.vertical-layout {
+    border-top: 1px solid alpha(var(--theme-colors-border), 0.5);
+    border-left: 0;
+}
+
 .queue-drawer {
     border-radius: var(--theme-radius-lg);
 }

src/renderer/layouts/default-layout/right-sidebar.tsx

@@ -1,10 +1,11 @@
+import clsx from 'clsx';
 import { forwardRef, Ref } from 'react';
 
 import styles from './right-sidebar.module.css';
 
 import { SidebarPlayQueue } from '/@/renderer/features/now-playing/components/sidebar-play-queue';
 import { ResizeHandle } from '/@/renderer/features/shared/components/resize-handle';
-import { useAppStore, useSideQueueType } from '/@/renderer/store';
+import { useAppStore, useSideQueueLayout, useSideQueueType } from '/@/renderer/store';
 
 // const queueDrawerVariants: Variants = {
 //     closed: (windowBarStyle) => ({
@@ -46,7 +47,7 @@ import { useAppStore, useSideQueueType } from '/@/renderer/store';
 
 interface RightSidebarProps {
     isResizing: boolean;
-    startResizing: (direction: 'left' | 'right', mouseEvent?: MouseEvent) => void;
+    startResizing: (direction: 'left' | 'right' | 'top', mouseEvent?: MouseEvent) => void;
 }
 
 export const RightSidebar = forwardRef(
@@ -56,12 +57,16 @@ export const RightSidebar = forwardRef(
     ) => {
         const rightExpanded = useAppStore((state) => state.sidebar.rightExpanded);
         const sideQueueType = useSideQueueType();
+        const sideQueueLayout = useSideQueueLayout();
+        const isVerticalLayout = sideQueueLayout === 'vertical';
 
         return (
             <>
                 {rightExpanded && sideQueueType === 'sideQueue' && (
                     <aside
-                        className={styles.rightSidebarContainer}
+                        className={clsx(styles.rightSidebarContainer, {
+                            [styles.verticalLayout]: isVerticalLayout,
+                        })}
                         id="sidebar-queue"
                         key="queue-sidebar"
                     >
@@ -69,9 +74,9 @@ export const RightSidebar = forwardRef(
                             isResizing={isResizingRight}
                             onMouseDown={(e) => {
                                 e.preventDefault();
-                                startResizing('right', e.nativeEvent);
+                                startResizing(isVerticalLayout ? 'top' : 'right', e.nativeEvent);
                             }}
-                            placement="left"
+                            placement={isVerticalLayout ? 'top' : 'left'}
                             ref={ref}
                         />
                         <SidebarPlayQueue />

src/renderer/store/app.store.ts

@@ -75,6 +75,7 @@ type SidebarProps = {
     image: boolean;
     leftWidth: string;
     rightExpanded: boolean;
+    rightHeight: string;
     rightWidth: string;
 };
 
@@ -222,6 +223,7 @@ export const useAppStore = createWithEqualityFn<AppSlice>()(
                     image: false,
                     leftWidth: '400px',
                     rightExpanded: false,
+                    rightHeight: '320px',
                     rightWidth: '600px',
                 },
                 titlebar: {
@@ -240,7 +242,12 @@ export const useAppStore = createWithEqualityFn<AppSlice>()(
                     return {} as AppState;
                 }
 
-                return persistedState;
+                const state = persistedState as AppState;
+                if (version <= 4 && !state.sidebar.rightHeight) {
+                    state.sidebar.rightHeight = '320px';
+                }
+
+                return state;
             },
             name: 'store_app',
             partialize: (state) => {
@@ -248,7 +255,7 @@ export const useAppStore = createWithEqualityFn<AppSlice>()(
                 const { globalExpanded: _, ...rest } = state;
                 return rest;
             },
-            version: 4,
+            version: 5,
         },
     ),
 );

src/renderer/store/env-settings-overrides.ts

@@ -40,6 +40,7 @@ const LYRICS_ALIGNMENTS = new Set(['center', 'left', 'right']);
 const FONT_TYPES = new Set(['builtIn', 'custom', 'system']);
 const HOME_FEATURE_STYLES = new Set(['multiple', 'single']);
 const SIDE_QUEUE_TYPES = new Set(['sideDrawerQueue', 'sideQueue']);
+const SIDE_QUEUE_LAYOUTS = new Set(['horizontal', 'vertical']);
 
 export type EnvSettingsOverrides = DeepPartial<
     Pick<SettingsState, 'autoDJ' | 'css' | 'discord' | 'font' | 'general' | 'lyrics' | 'playback'>
@@ -200,6 +201,12 @@ const ENV_SETTING_SPECS: EnvSettingSpec[] = [
         path: ['general', 'sideQueueType'],
         type: 'enum',
     },
+    {
+        enumSet: SIDE_QUEUE_LAYOUTS,
+        key: 'FS_GENERAL_SIDE_QUEUE_LAYOUT',
+        path: ['general', 'sideQueueLayout'],
+        type: 'enum',
+    },
     { key: 'FS_GENERAL_RESUME', path: ['general', 'resume'], type: 'bool' },
     {
         key: 'FS_GENERAL_USE_THEME_ACCENT_COLOR',

src/renderer/store/settings.store.ts

@@ -171,6 +171,7 @@ const GenreTargetSchema = z.enum(['album', 'track']);
 const PlaylistTargetSchema = z.enum(['album', 'track']);
 
 const SideQueueTypeSchema = z.enum(['sideDrawerQueue', 'sideQueue']);
+const SideQueueLayoutSchema = z.enum(['horizontal', 'vertical']);
 
 const SidebarPanelTypeSchema = z.enum(['queue', 'lyrics', 'visualizer']);
 
@@ -498,6 +499,7 @@ export const GeneralSettingsSchema = z.object({
     sidebarPlaylistList: z.boolean(),
     sidebarPlaylistListFilterRegex: z.string(),
     sidebarPlaylistSorting: z.boolean(),
+    sideQueueLayout: SideQueueLayoutSchema,
     sideQueueType: SideQueueTypeSchema,
     skipButtons: SkipButtonsSchema,
     spotify: z.boolean(),
@@ -893,6 +895,7 @@ export interface SettingsSlice extends z.infer<typeof SettingsStateSchema> {
 export interface SettingsState extends z.infer<typeof SettingsStateSchema> {}
 export type SidebarItemType = z.infer<typeof SidebarItemTypeSchema>;
 
+export type SideQueueLayout = z.infer<typeof SideQueueLayoutSchema>;
 export type SideQueueType = z.infer<typeof SideQueueTypeSchema>;
 
 export type SortableItem<T extends string> = {
@@ -1158,6 +1161,7 @@ const initialState: SettingsState = {
         sidebarPlaylistList: true,
         sidebarPlaylistListFilterRegex: '',
         sidebarPlaylistSorting: false,
+        sideQueueLayout: 'horizontal',
         sideQueueType: 'sideQueue',
         skipButtons: {
             enabled: false,
@@ -2381,10 +2385,16 @@ export const useSettingsStore = createWithEqualityFn<SettingsSlice>()(
                     });
                 }
 
+                if (version <= 27) {
+                    if (!state.general.sideQueueLayout) {
+                        state.general.sideQueueLayout = initialState.general.sideQueueLayout;
+                    }
+                }
+
                 return persistedState;
             },
             name: 'store_settings',
-            version: 26,
+            version: 27,
         },
     ),
 );
@@ -2492,6 +2502,9 @@ export const useThemeSettings = () =>
 export const useSideQueueType = () =>
     useSettingsStore((state) => state.general.sideQueueType, shallow);
 
+export const useSideQueueLayout = () =>
+    useSettingsStore((state) => state.general.sideQueueLayout, shallow);
+
 export const useVolumeWheelStep = () =>
     useSettingsStore((state) => state.general.volumeWheelStep, shallow);
 

src/shared/components/icon/icon.tsx

@@ -79,6 +79,8 @@ import {
     LuMusic,
     LuMusic2,
     LuPackage2,
+    LuPanelBottom,
+    LuPanelRight,
     LuPanelRightClose,
     LuPanelRightOpen,
     LuPause,
@@ -198,6 +200,8 @@ export const AppIcon = {
     layoutDetail: LuLayoutList,
     layoutGrid: LuLayoutGrid,
     layoutList: LuList,
+    layoutPanelBottom: LuPanelBottom,
+    layoutPanelRight: LuPanelRight,
     layoutTable: LuTable,
     library: LuLibrary,
     list: LuList,