mirror of
https://github.com/antebudimir/feishin.git
synced 2026-01-01 02:13:33 +00:00
Lint all files
This commit is contained in:
jeffvli
parent
22af76b4d6
commit
30e52ebb54
334 changed files with 76519 additions and 75932 deletions
|
|
@ -1,87 +1,87 @@
|
|||
import isElectron from 'is-electron';
|
||||
import { NumberInput, Select } from '/@/renderer/components';
|
||||
import {
|
||||
SettingsSection,
|
||||
SettingOption,
|
||||
SettingsSection,
|
||||
SettingOption,
|
||||
} from '/@/renderer/features/settings/components/settings-section';
|
||||
import { useGeneralSettings, useSettingsStoreActions } from '/@/renderer/store/settings.store';
|
||||
|
||||
const localSettings = isElectron() ? window.electron.localSettings : null;
|
||||
|
||||
const FONT_OPTIONS = [
|
||||
{ label: 'Archivo', value: 'Archivo' },
|
||||
{ label: 'Fredoka', value: 'Fredoka' },
|
||||
{ label: 'League Spartan', value: 'League Spartan' },
|
||||
{ label: 'Lexend', value: 'Lexend' },
|
||||
{ label: 'Poppins', value: 'Poppins' },
|
||||
{ label: 'Raleway', value: 'Raleway' },
|
||||
{ label: 'Sora', value: 'Sora' },
|
||||
{ label: 'Work Sans', value: 'Work Sans' },
|
||||
{ label: 'Archivo', value: 'Archivo' },
|
||||
{ label: 'Fredoka', value: 'Fredoka' },
|
||||
{ label: 'League Spartan', value: 'League Spartan' },
|
||||
{ label: 'Lexend', value: 'Lexend' },
|
||||
{ label: 'Poppins', value: 'Poppins' },
|
||||
{ label: 'Raleway', value: 'Raleway' },
|
||||
{ label: 'Sora', value: 'Sora' },
|
||||
{ label: 'Work Sans', value: 'Work Sans' },
|
||||
];
|
||||
|
||||
export const ApplicationSettings = () => {
|
||||
const settings = useGeneralSettings();
|
||||
const { setSettings } = useSettingsStoreActions();
|
||||
const settings = useGeneralSettings();
|
||||
const { setSettings } = useSettingsStoreActions();
|
||||
|
||||
const options: SettingOption[] = [
|
||||
{
|
||||
control: (
|
||||
<Select
|
||||
disabled
|
||||
data={[]}
|
||||
/>
|
||||
),
|
||||
description: 'Sets the application language',
|
||||
isHidden: false,
|
||||
title: 'Language',
|
||||
},
|
||||
{
|
||||
control: (
|
||||
<Select
|
||||
searchable
|
||||
data={FONT_OPTIONS}
|
||||
defaultValue={settings.fontContent}
|
||||
onChange={(e) => {
|
||||
if (!e) return;
|
||||
setSettings({
|
||||
general: {
|
||||
...settings,
|
||||
fontContent: e,
|
||||
},
|
||||
});
|
||||
}}
|
||||
/>
|
||||
),
|
||||
description: 'Sets the application content font',
|
||||
isHidden: false,
|
||||
title: 'Font (Content)',
|
||||
},
|
||||
{
|
||||
control: (
|
||||
<NumberInput
|
||||
max={300}
|
||||
min={50}
|
||||
value={settings.zoomFactor}
|
||||
onBlur={(e) => {
|
||||
if (!e) return;
|
||||
const newVal = e.currentTarget.value
|
||||
? Math.min(Math.max(Number(e.currentTarget.value), 50), 300)
|
||||
: settings.zoomFactor;
|
||||
setSettings({
|
||||
general: {
|
||||
...settings,
|
||||
zoomFactor: newVal,
|
||||
},
|
||||
});
|
||||
localSettings.setZoomFactor(newVal);
|
||||
}}
|
||||
/>
|
||||
),
|
||||
description: 'Sets the application zoom factor in percent',
|
||||
isHidden: !isElectron(),
|
||||
title: 'Zoom factor',
|
||||
},
|
||||
];
|
||||
const options: SettingOption[] = [
|
||||
{
|
||||
control: (
|
||||
<Select
|
||||
disabled
|
||||
data={[]}
|
||||
/>
|
||||
),
|
||||
description: 'Sets the application language',
|
||||
isHidden: false,
|
||||
title: 'Language',
|
||||
},
|
||||
{
|
||||
control: (
|
||||
<Select
|
||||
searchable
|
||||
data={FONT_OPTIONS}
|
||||
defaultValue={settings.fontContent}
|
||||
onChange={(e) => {
|
||||
if (!e) return;
|
||||
setSettings({
|
||||
general: {
|
||||
...settings,
|
||||
fontContent: e,
|
||||
},
|
||||
});
|
||||
}}
|
||||
/>
|
||||
),
|
||||
description: 'Sets the application content font',
|
||||
isHidden: false,
|
||||
title: 'Font (Content)',
|
||||
},
|
||||
{
|
||||
control: (
|
||||
<NumberInput
|
||||
max={300}
|
||||
min={50}
|
||||
value={settings.zoomFactor}
|
||||
onBlur={(e) => {
|
||||
if (!e) return;
|
||||
const newVal = e.currentTarget.value
|
||||
? Math.min(Math.max(Number(e.currentTarget.value), 50), 300)
|
||||
: settings.zoomFactor;
|
||||
setSettings({
|
||||
general: {
|
||||
...settings,
|
||||
zoomFactor: newVal,
|
||||
},
|
||||
});
|
||||
localSettings.setZoomFactor(newVal);
|
||||
}}
|
||||
/>
|
||||
),
|
||||
description: 'Sets the application zoom factor in percent',
|
||||
isHidden: !isElectron(),
|
||||
title: 'Zoom factor',
|
||||
},
|
||||
];
|
||||
|
||||
return <SettingsSection options={options} />;
|
||||
return <SettingsSection options={options} />;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -3,196 +3,199 @@ import { Group } from '@mantine/core';
|
|||
import { Select, Tooltip, NumberInput, Switch, Slider } from '/@/renderer/components';
|
||||
import { SettingsSection } from '/@/renderer/features/settings/components/settings-section';
|
||||
import {
|
||||
SideQueueType,
|
||||
useGeneralSettings,
|
||||
useSettingsStoreActions,
|
||||
SideQueueType,
|
||||
useGeneralSettings,
|
||||
useSettingsStoreActions,
|
||||
} from '/@/renderer/store/settings.store';
|
||||
import { Play } from '/@/renderer/types';
|
||||
|
||||
const localSettings = isElectron() ? window.electron.localSettings : null;
|
||||
|
||||
const SIDE_QUEUE_OPTIONS = [
|
||||
{ label: 'Fixed', value: 'sideQueue' },
|
||||
{ label: 'Floating', value: 'sideDrawerQueue' },
|
||||
{ label: 'Fixed', value: 'sideQueue' },
|
||||
{ label: 'Floating', value: 'sideDrawerQueue' },
|
||||
];
|
||||
|
||||
export const ControlSettings = () => {
|
||||
const settings = useGeneralSettings();
|
||||
const { setSettings } = useSettingsStoreActions();
|
||||
const settings = useGeneralSettings();
|
||||
const { setSettings } = useSettingsStoreActions();
|
||||
|
||||
const controlOptions = [
|
||||
{
|
||||
control: (
|
||||
<Switch
|
||||
aria-label="Toggle skip buttons"
|
||||
defaultChecked={settings.skipButtons?.enabled}
|
||||
onChange={(e) =>
|
||||
setSettings({
|
||||
general: {
|
||||
...settings,
|
||||
skipButtons: {
|
||||
...settings.skipButtons,
|
||||
enabled: e.currentTarget.checked,
|
||||
},
|
||||
},
|
||||
})
|
||||
}
|
||||
/>
|
||||
),
|
||||
description: 'Show or hide the skip buttons on the playerbar',
|
||||
isHidden: false,
|
||||
title: 'Show skip buttons',
|
||||
},
|
||||
{
|
||||
control: (
|
||||
<Group>
|
||||
<Tooltip label="Backward">
|
||||
<NumberInput
|
||||
defaultValue={settings.skipButtons.skipBackwardSeconds}
|
||||
min={0}
|
||||
width={75}
|
||||
onBlur={(e) =>
|
||||
setSettings({
|
||||
general: {
|
||||
...settings,
|
||||
skipButtons: {
|
||||
...settings.skipButtons,
|
||||
skipBackwardSeconds: e.currentTarget.value
|
||||
? Number(e.currentTarget.value)
|
||||
: 0,
|
||||
},
|
||||
},
|
||||
})
|
||||
}
|
||||
/>
|
||||
</Tooltip>
|
||||
<Tooltip label="Forward">
|
||||
<NumberInput
|
||||
defaultValue={settings.skipButtons.skipForwardSeconds}
|
||||
min={0}
|
||||
width={75}
|
||||
onBlur={(e) =>
|
||||
setSettings({
|
||||
general: {
|
||||
...settings,
|
||||
skipButtons: {
|
||||
...settings.skipButtons,
|
||||
skipForwardSeconds: e.currentTarget.value ? Number(e.currentTarget.value) : 0,
|
||||
},
|
||||
},
|
||||
})
|
||||
}
|
||||
/>
|
||||
</Tooltip>
|
||||
</Group>
|
||||
),
|
||||
description:
|
||||
'The number (in seconds) to skip forward or backward when using the skip buttons',
|
||||
isHidden: false,
|
||||
title: 'Skip duration',
|
||||
},
|
||||
{
|
||||
control: (
|
||||
<Select
|
||||
data={[
|
||||
{ label: 'Now', value: Play.NOW },
|
||||
{ label: 'Next', value: Play.NEXT },
|
||||
{ label: 'Last', value: Play.LAST },
|
||||
]}
|
||||
defaultValue={settings.playButtonBehavior}
|
||||
onChange={(e) =>
|
||||
setSettings({
|
||||
general: {
|
||||
...settings,
|
||||
playButtonBehavior: e as Play,
|
||||
},
|
||||
})
|
||||
}
|
||||
/>
|
||||
),
|
||||
description: 'The default behavior of the play button when adding songs to the queue',
|
||||
isHidden: false,
|
||||
title: 'Play button behavior',
|
||||
},
|
||||
{
|
||||
control: (
|
||||
<Select
|
||||
data={SIDE_QUEUE_OPTIONS}
|
||||
defaultValue={settings.sideQueueType}
|
||||
onChange={(e) => {
|
||||
setSettings({
|
||||
general: {
|
||||
...settings,
|
||||
sideQueueType: e as SideQueueType,
|
||||
},
|
||||
});
|
||||
}}
|
||||
/>
|
||||
),
|
||||
description: 'The style of the sidebar play queue',
|
||||
isHidden: false,
|
||||
title: 'Side play queue style',
|
||||
},
|
||||
{
|
||||
control: (
|
||||
<Switch
|
||||
defaultChecked={settings.showQueueDrawerButton}
|
||||
onChange={(e) => {
|
||||
setSettings({
|
||||
general: {
|
||||
...settings,
|
||||
showQueueDrawerButton: e.currentTarget.checked,
|
||||
},
|
||||
});
|
||||
}}
|
||||
/>
|
||||
),
|
||||
description: 'Display a hover icon on the right side of the application view the play queue',
|
||||
isHidden: false,
|
||||
title: 'Show floating queue hover area',
|
||||
},
|
||||
{
|
||||
control: (
|
||||
<Slider
|
||||
defaultValue={settings.volumeWheelStep}
|
||||
max={20}
|
||||
min={1}
|
||||
w={100}
|
||||
onChangeEnd={(e) => {
|
||||
setSettings({
|
||||
general: {
|
||||
...settings,
|
||||
volumeWheelStep: e,
|
||||
},
|
||||
});
|
||||
}}
|
||||
/>
|
||||
),
|
||||
description:
|
||||
'The amount of volume to change when scrolling the mouse wheel on the volume slider',
|
||||
isHidden: false,
|
||||
title: 'Volume wheel step',
|
||||
},
|
||||
{
|
||||
control: (
|
||||
<Switch
|
||||
defaultChecked={settings.resume}
|
||||
onChange={(e) => {
|
||||
localSettings?.set('resume', e.target.checked);
|
||||
setSettings({
|
||||
general: {
|
||||
...settings,
|
||||
resume: e.currentTarget.checked,
|
||||
},
|
||||
});
|
||||
}}
|
||||
/>
|
||||
),
|
||||
description: 'When exiting, save the current play queue and restore it when reopening',
|
||||
isHidden: !isElectron(),
|
||||
title: 'Save play queue',
|
||||
},
|
||||
];
|
||||
const controlOptions = [
|
||||
{
|
||||
control: (
|
||||
<Switch
|
||||
aria-label="Toggle skip buttons"
|
||||
defaultChecked={settings.skipButtons?.enabled}
|
||||
onChange={(e) =>
|
||||
setSettings({
|
||||
general: {
|
||||
...settings,
|
||||
skipButtons: {
|
||||
...settings.skipButtons,
|
||||
enabled: e.currentTarget.checked,
|
||||
},
|
||||
},
|
||||
})
|
||||
}
|
||||
/>
|
||||
),
|
||||
description: 'Show or hide the skip buttons on the playerbar',
|
||||
isHidden: false,
|
||||
title: 'Show skip buttons',
|
||||
},
|
||||
{
|
||||
control: (
|
||||
<Group>
|
||||
<Tooltip label="Backward">
|
||||
<NumberInput
|
||||
defaultValue={settings.skipButtons.skipBackwardSeconds}
|
||||
min={0}
|
||||
width={75}
|
||||
onBlur={(e) =>
|
||||
setSettings({
|
||||
general: {
|
||||
...settings,
|
||||
skipButtons: {
|
||||
...settings.skipButtons,
|
||||
skipBackwardSeconds: e.currentTarget.value
|
||||
? Number(e.currentTarget.value)
|
||||
: 0,
|
||||
},
|
||||
},
|
||||
})
|
||||
}
|
||||
/>
|
||||
</Tooltip>
|
||||
<Tooltip label="Forward">
|
||||
<NumberInput
|
||||
defaultValue={settings.skipButtons.skipForwardSeconds}
|
||||
min={0}
|
||||
width={75}
|
||||
onBlur={(e) =>
|
||||
setSettings({
|
||||
general: {
|
||||
...settings,
|
||||
skipButtons: {
|
||||
...settings.skipButtons,
|
||||
skipForwardSeconds: e.currentTarget.value
|
||||
? Number(e.currentTarget.value)
|
||||
: 0,
|
||||
},
|
||||
},
|
||||
})
|
||||
}
|
||||
/>
|
||||
</Tooltip>
|
||||
</Group>
|
||||
),
|
||||
description:
|
||||
'The number (in seconds) to skip forward or backward when using the skip buttons',
|
||||
isHidden: false,
|
||||
title: 'Skip duration',
|
||||
},
|
||||
{
|
||||
control: (
|
||||
<Select
|
||||
data={[
|
||||
{ label: 'Now', value: Play.NOW },
|
||||
{ label: 'Next', value: Play.NEXT },
|
||||
{ label: 'Last', value: Play.LAST },
|
||||
]}
|
||||
defaultValue={settings.playButtonBehavior}
|
||||
onChange={(e) =>
|
||||
setSettings({
|
||||
general: {
|
||||
...settings,
|
||||
playButtonBehavior: e as Play,
|
||||
},
|
||||
})
|
||||
}
|
||||
/>
|
||||
),
|
||||
description: 'The default behavior of the play button when adding songs to the queue',
|
||||
isHidden: false,
|
||||
title: 'Play button behavior',
|
||||
},
|
||||
{
|
||||
control: (
|
||||
<Select
|
||||
data={SIDE_QUEUE_OPTIONS}
|
||||
defaultValue={settings.sideQueueType}
|
||||
onChange={(e) => {
|
||||
setSettings({
|
||||
general: {
|
||||
...settings,
|
||||
sideQueueType: e as SideQueueType,
|
||||
},
|
||||
});
|
||||
}}
|
||||
/>
|
||||
),
|
||||
description: 'The style of the sidebar play queue',
|
||||
isHidden: false,
|
||||
title: 'Side play queue style',
|
||||
},
|
||||
{
|
||||
control: (
|
||||
<Switch
|
||||
defaultChecked={settings.showQueueDrawerButton}
|
||||
onChange={(e) => {
|
||||
setSettings({
|
||||
general: {
|
||||
...settings,
|
||||
showQueueDrawerButton: e.currentTarget.checked,
|
||||
},
|
||||
});
|
||||
}}
|
||||
/>
|
||||
),
|
||||
description:
|
||||
'Display a hover icon on the right side of the application view the play queue',
|
||||
isHidden: false,
|
||||
title: 'Show floating queue hover area',
|
||||
},
|
||||
{
|
||||
control: (
|
||||
<Slider
|
||||
defaultValue={settings.volumeWheelStep}
|
||||
max={20}
|
||||
min={1}
|
||||
w={100}
|
||||
onChangeEnd={(e) => {
|
||||
setSettings({
|
||||
general: {
|
||||
...settings,
|
||||
volumeWheelStep: e,
|
||||
},
|
||||
});
|
||||
}}
|
||||
/>
|
||||
),
|
||||
description:
|
||||
'The amount of volume to change when scrolling the mouse wheel on the volume slider',
|
||||
isHidden: false,
|
||||
title: 'Volume wheel step',
|
||||
},
|
||||
{
|
||||
control: (
|
||||
<Switch
|
||||
defaultChecked={settings.resume}
|
||||
onChange={(e) => {
|
||||
localSettings?.set('resume', e.target.checked);
|
||||
setSettings({
|
||||
general: {
|
||||
...settings,
|
||||
resume: e.currentTarget.checked,
|
||||
},
|
||||
});
|
||||
}}
|
||||
/>
|
||||
),
|
||||
description: 'When exiting, save the current play queue and restore it when reopening',
|
||||
isHidden: !isElectron(),
|
||||
title: 'Save play queue',
|
||||
},
|
||||
];
|
||||
|
||||
return <SettingsSection options={controlOptions} />;
|
||||
return <SettingsSection options={controlOptions} />;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -5,15 +5,15 @@ import { SidebarSettings } from '/@/renderer/features/settings/components/genera
|
|||
import { ThemeSettings } from '/@/renderer/features/settings/components/general/theme-settings';
|
||||
|
||||
export const GeneralTab = () => {
|
||||
return (
|
||||
<Stack spacing="md">
|
||||
<ApplicationSettings />
|
||||
<Divider />
|
||||
<ThemeSettings />
|
||||
<Divider />
|
||||
<ControlSettings />
|
||||
<Divider />
|
||||
<SidebarSettings />
|
||||
</Stack>
|
||||
);
|
||||
return (
|
||||
<Stack spacing="md">
|
||||
<ApplicationSettings />
|
||||
<Divider />
|
||||
<ThemeSettings />
|
||||
<Divider />
|
||||
<ControlSettings />
|
||||
<Divider />
|
||||
<SidebarSettings />
|
||||
</Stack>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -8,126 +8,126 @@ import { useSettingsStoreActions, useGeneralSettings } from '../../../../store/s
|
|||
import { SettingsOptions } from '/@/renderer/features/settings/components/settings-option';
|
||||
|
||||
const DragHandle = ({ dragControls }: any) => {
|
||||
return (
|
||||
<MdDragIndicator
|
||||
color="white"
|
||||
style={{ cursor: 'grab' }}
|
||||
onPointerDown={(event) => dragControls.start(event)}
|
||||
/>
|
||||
);
|
||||
return (
|
||||
<MdDragIndicator
|
||||
color="white"
|
||||
style={{ cursor: 'grab' }}
|
||||
onPointerDown={(event) => dragControls.start(event)}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
interface SidebarItem {
|
||||
disabled: boolean;
|
||||
id: string;
|
||||
disabled: boolean;
|
||||
id: string;
|
||||
}
|
||||
|
||||
interface DraggableSidebarItemProps {
|
||||
handleChangeDisabled: (id: string, e: boolean) => void;
|
||||
item: SidebarItem;
|
||||
handleChangeDisabled: (id: string, e: boolean) => void;
|
||||
item: SidebarItem;
|
||||
}
|
||||
|
||||
const DraggableSidebarItem = ({ item, handleChangeDisabled }: DraggableSidebarItemProps) => {
|
||||
const dragControls = useDragControls();
|
||||
const dragControls = useDragControls();
|
||||
|
||||
return (
|
||||
<Reorder.Item
|
||||
as="div"
|
||||
dragControls={dragControls}
|
||||
dragListener={false}
|
||||
value={item}
|
||||
>
|
||||
<Group
|
||||
noWrap
|
||||
h="3rem"
|
||||
style={{ boxShadow: '0 1px 3px rgba(0,0,0,.1)' }}
|
||||
>
|
||||
<Checkbox
|
||||
checked={!item.disabled}
|
||||
onChange={(e) => handleChangeDisabled(item.id, e.target.checked)}
|
||||
/>
|
||||
<DragHandle dragControls={dragControls} />
|
||||
{item.id}
|
||||
</Group>
|
||||
</Reorder.Item>
|
||||
);
|
||||
return (
|
||||
<Reorder.Item
|
||||
as="div"
|
||||
dragControls={dragControls}
|
||||
dragListener={false}
|
||||
value={item}
|
||||
>
|
||||
<Group
|
||||
noWrap
|
||||
h="3rem"
|
||||
style={{ boxShadow: '0 1px 3px rgba(0,0,0,.1)' }}
|
||||
>
|
||||
<Checkbox
|
||||
checked={!item.disabled}
|
||||
onChange={(e) => handleChangeDisabled(item.id, e.target.checked)}
|
||||
/>
|
||||
<DragHandle dragControls={dragControls} />
|
||||
{item.id}
|
||||
</Group>
|
||||
</Reorder.Item>
|
||||
);
|
||||
};
|
||||
|
||||
export const SidebarSettings = () => {
|
||||
const settings = useGeneralSettings();
|
||||
const { setSidebarItems, setSettings } = useSettingsStoreActions();
|
||||
const settings = useGeneralSettings();
|
||||
const { setSidebarItems, setSettings } = useSettingsStoreActions();
|
||||
|
||||
const [localSidebarItems, setLocalSidebarItems] = useState(settings.sidebarItems);
|
||||
const [localSidebarItems, setLocalSidebarItems] = useState(settings.sidebarItems);
|
||||
|
||||
const handleSave = () => {
|
||||
setSidebarItems(localSidebarItems);
|
||||
};
|
||||
const handleSave = () => {
|
||||
setSidebarItems(localSidebarItems);
|
||||
};
|
||||
|
||||
const handleChangeDisabled = useCallback((id: string, e: boolean) => {
|
||||
setLocalSidebarItems((items) =>
|
||||
items.map((item) => {
|
||||
if (item.id === id) {
|
||||
return {
|
||||
...item,
|
||||
disabled: !e,
|
||||
};
|
||||
}
|
||||
const handleChangeDisabled = useCallback((id: string, e: boolean) => {
|
||||
setLocalSidebarItems((items) =>
|
||||
items.map((item) => {
|
||||
if (item.id === id) {
|
||||
return {
|
||||
...item,
|
||||
disabled: !e,
|
||||
};
|
||||
}
|
||||
|
||||
return item;
|
||||
}),
|
||||
return item;
|
||||
}),
|
||||
);
|
||||
}, []);
|
||||
|
||||
const handleSetSidebarPlaylistList = (e: ChangeEvent<HTMLInputElement>) => {
|
||||
setSettings({
|
||||
general: {
|
||||
...settings,
|
||||
sidebarPlaylistList: e.target.checked,
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
const isSaveButtonDisabled = isEqual(settings.sidebarItems, localSidebarItems);
|
||||
|
||||
return (
|
||||
<>
|
||||
<SettingsOptions
|
||||
control={
|
||||
<Switch
|
||||
checked={settings.sidebarPlaylistList}
|
||||
onChange={handleSetSidebarPlaylistList}
|
||||
/>
|
||||
}
|
||||
description="Show playlist list in sidebar"
|
||||
title="Sidebar playlist list"
|
||||
/>
|
||||
<SettingsOptions
|
||||
control={
|
||||
<Button
|
||||
compact
|
||||
disabled={isSaveButtonDisabled}
|
||||
variant="filled"
|
||||
onClick={handleSave}
|
||||
>
|
||||
Save sidebar configuration
|
||||
</Button>
|
||||
}
|
||||
description="Select the items and order in which they appear in the sidebar"
|
||||
title="Sidebar configuration"
|
||||
/>
|
||||
<Reorder.Group
|
||||
axis="y"
|
||||
values={localSidebarItems}
|
||||
onReorder={setLocalSidebarItems}
|
||||
>
|
||||
{localSidebarItems.map((item) => (
|
||||
<DraggableSidebarItem
|
||||
key={item.id}
|
||||
handleChangeDisabled={handleChangeDisabled}
|
||||
item={item}
|
||||
/>
|
||||
))}
|
||||
</Reorder.Group>
|
||||
</>
|
||||
);
|
||||
}, []);
|
||||
|
||||
const handleSetSidebarPlaylistList = (e: ChangeEvent<HTMLInputElement>) => {
|
||||
setSettings({
|
||||
general: {
|
||||
...settings,
|
||||
sidebarPlaylistList: e.target.checked,
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
const isSaveButtonDisabled = isEqual(settings.sidebarItems, localSidebarItems);
|
||||
|
||||
return (
|
||||
<>
|
||||
<SettingsOptions
|
||||
control={
|
||||
<Switch
|
||||
checked={settings.sidebarPlaylistList}
|
||||
onChange={handleSetSidebarPlaylistList}
|
||||
/>
|
||||
}
|
||||
description="Show playlist list in sidebar"
|
||||
title="Sidebar playlist list"
|
||||
/>
|
||||
<SettingsOptions
|
||||
control={
|
||||
<Button
|
||||
compact
|
||||
disabled={isSaveButtonDisabled}
|
||||
variant="filled"
|
||||
onClick={handleSave}
|
||||
>
|
||||
Save sidebar configuration
|
||||
</Button>
|
||||
}
|
||||
description="Select the items and order in which they appear in the sidebar"
|
||||
title="Sidebar configuration"
|
||||
/>
|
||||
<Reorder.Group
|
||||
axis="y"
|
||||
values={localSidebarItems}
|
||||
onReorder={setLocalSidebarItems}
|
||||
>
|
||||
{localSidebarItems.map((item) => (
|
||||
<DraggableSidebarItem
|
||||
key={item.id}
|
||||
handleChangeDisabled={handleChangeDisabled}
|
||||
item={item}
|
||||
/>
|
||||
))}
|
||||
</Reorder.Group>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,93 +1,93 @@
|
|||
import { Switch, Select } from '/@/renderer/components';
|
||||
import {
|
||||
SettingsSection,
|
||||
SettingOption,
|
||||
SettingsSection,
|
||||
SettingOption,
|
||||
} from '/@/renderer/features/settings/components/settings-section';
|
||||
import { THEME_DATA } from '/@/renderer/hooks';
|
||||
import { useGeneralSettings, useSettingsStoreActions } from '/@/renderer/store/settings.store';
|
||||
import { AppTheme } from '/@/renderer/themes/types';
|
||||
|
||||
export const ThemeSettings = () => {
|
||||
const settings = useGeneralSettings();
|
||||
const { setSettings } = useSettingsStoreActions();
|
||||
const settings = useGeneralSettings();
|
||||
const { setSettings } = useSettingsStoreActions();
|
||||
|
||||
const themeOptions: SettingOption[] = [
|
||||
{
|
||||
control: (
|
||||
<Switch
|
||||
defaultChecked={settings.followSystemTheme}
|
||||
onChange={(e) => {
|
||||
setSettings({
|
||||
general: {
|
||||
...settings,
|
||||
followSystemTheme: e.currentTarget.checked,
|
||||
},
|
||||
});
|
||||
}}
|
||||
/>
|
||||
),
|
||||
description: 'Follows the system-defined light or dark preference',
|
||||
isHidden: false,
|
||||
title: 'Use system theme',
|
||||
},
|
||||
{
|
||||
control: (
|
||||
<Select
|
||||
data={THEME_DATA}
|
||||
defaultValue={settings.theme}
|
||||
onChange={(e) => {
|
||||
setSettings({
|
||||
general: {
|
||||
...settings,
|
||||
theme: e as AppTheme,
|
||||
},
|
||||
});
|
||||
}}
|
||||
/>
|
||||
),
|
||||
description: 'Sets the default theme',
|
||||
isHidden: settings.followSystemTheme,
|
||||
title: 'Theme',
|
||||
},
|
||||
{
|
||||
control: (
|
||||
<Select
|
||||
data={THEME_DATA}
|
||||
defaultValue={settings.themeDark}
|
||||
onChange={(e) => {
|
||||
setSettings({
|
||||
general: {
|
||||
...settings,
|
||||
themeDark: e as AppTheme,
|
||||
},
|
||||
});
|
||||
}}
|
||||
/>
|
||||
),
|
||||
description: 'Sets the dark theme',
|
||||
isHidden: !settings.followSystemTheme,
|
||||
title: 'Theme (dark)',
|
||||
},
|
||||
{
|
||||
control: (
|
||||
<Select
|
||||
data={THEME_DATA}
|
||||
defaultValue={settings.themeLight}
|
||||
onChange={(e) => {
|
||||
setSettings({
|
||||
general: {
|
||||
...settings,
|
||||
themeLight: e as AppTheme,
|
||||
},
|
||||
});
|
||||
}}
|
||||
/>
|
||||
),
|
||||
description: 'Sets the light theme',
|
||||
isHidden: !settings.followSystemTheme,
|
||||
title: 'Theme (light)',
|
||||
},
|
||||
];
|
||||
const themeOptions: SettingOption[] = [
|
||||
{
|
||||
control: (
|
||||
<Switch
|
||||
defaultChecked={settings.followSystemTheme}
|
||||
onChange={(e) => {
|
||||
setSettings({
|
||||
general: {
|
||||
...settings,
|
||||
followSystemTheme: e.currentTarget.checked,
|
||||
},
|
||||
});
|
||||
}}
|
||||
/>
|
||||
),
|
||||
description: 'Follows the system-defined light or dark preference',
|
||||
isHidden: false,
|
||||
title: 'Use system theme',
|
||||
},
|
||||
{
|
||||
control: (
|
||||
<Select
|
||||
data={THEME_DATA}
|
||||
defaultValue={settings.theme}
|
||||
onChange={(e) => {
|
||||
setSettings({
|
||||
general: {
|
||||
...settings,
|
||||
theme: e as AppTheme,
|
||||
},
|
||||
});
|
||||
}}
|
||||
/>
|
||||
),
|
||||
description: 'Sets the default theme',
|
||||
isHidden: settings.followSystemTheme,
|
||||
title: 'Theme',
|
||||
},
|
||||
{
|
||||
control: (
|
||||
<Select
|
||||
data={THEME_DATA}
|
||||
defaultValue={settings.themeDark}
|
||||
onChange={(e) => {
|
||||
setSettings({
|
||||
general: {
|
||||
...settings,
|
||||
themeDark: e as AppTheme,
|
||||
},
|
||||
});
|
||||
}}
|
||||
/>
|
||||
),
|
||||
description: 'Sets the dark theme',
|
||||
isHidden: !settings.followSystemTheme,
|
||||
title: 'Theme (dark)',
|
||||
},
|
||||
{
|
||||
control: (
|
||||
<Select
|
||||
data={THEME_DATA}
|
||||
defaultValue={settings.themeLight}
|
||||
onChange={(e) => {
|
||||
setSettings({
|
||||
general: {
|
||||
...settings,
|
||||
themeLight: e as AppTheme,
|
||||
},
|
||||
});
|
||||
}}
|
||||
/>
|
||||
),
|
||||
description: 'Sets the light theme',
|
||||
isHidden: !settings.followSystemTheme,
|
||||
title: 'Theme (light)',
|
||||
},
|
||||
];
|
||||
|
||||
return <SettingsSection options={themeOptions} />;
|
||||
return <SettingsSection options={themeOptions} />;
|
||||
};
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue