vanja/feishin
1
0
Fork 0
mirror of https://github.com/jeffvli/feishin.git synced 2026-05-08 21:10: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 => {