vanja/feishin
1
0
Fork 0
mirror of https://github.com/jeffvli/feishin.git synced 2026-05-07 04:20:12 +02:00
Code Issues Packages Projects Releases Wiki Activity

support vertical play queue layout

Browse Source
This commit is contained in:
jeffvli
2026-03-17 19:00:55 -07:00
parent 8ccd97b574
commit db88a6bc22
14 changed files with 268 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/features/settings/components/general/application-settings.tsx
+41
View File
@@ -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
+8
View File
@@ -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
+75 -1
View File
@@ -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
+17
View File
@@ -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
+72 -23
View File
@@ -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 =
mainContentRef.current.style.getPropertyValue('--right-sidebar-width');
if (currentWidth) {
initialRightWidthRef.current = currentWidth;
if (position === 'top') {
const currentHeight =
mainContentRef.current.style.getPropertyValue('--right-sidebar-height');
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 =
mainContentRef.current.style.getPropertyValue('--right-sidebar-width');
if (finalWidth) {
setSideBar({ rightWidth: finalWidth });
if (sideQueueLayout === 'vertical') {
const finalHeight =
mainContentRef.current.style.getPropertyValue('--right-sidebar-height');
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]);
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);
if (sideQueueLayout === 'vertical') {
const initialHeight = Number(initialRightHeightRef.current.split('px')[0]);
const initialMouseY = initialMouseYRef.current;
const deltaY = mouseMoveEvent.clientY - initialMouseY;
const containerHeight = mainContentRef.current.clientHeight;
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
+5
View File
@@ -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
+10 -5
View File
@@ -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
+9 -2
View File
@@ -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
+7
View File
@@ -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
+14 -1
View File
@@ -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);