vanja/feishin
1
0
Fork 0
mirror of https://github.com/jeffvli/feishin.git synced 2026-05-16 21:50:35 +02:00
Code Issues Packages Projects Releases Wiki Activity

[enhancement]: support serach on settings page

Browse Source
This commit is contained in:
Kendall Garner
2024-05-05 13:25:05 -07:00
parent 683bb0222c
commit 645697367d
21 changed files with 439 additions and 385 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/features/settings/components/general/sidebar-settings.tsx
+36 -124
View File
@@ -1,54 +1,16 @@
import { ChangeEvent, useCallback, useMemo, useState } from 'react';
import { Reorder } from 'framer-motion';
import isEqual from 'lodash/isEqual';
import { ChangeEvent } from 'react';
import { useTranslation } from 'react-i18next';
import { Button, Switch } from '/@/renderer/components';
import { Switch } from '/@/renderer/components';
import { useSettingsStoreActions, useGeneralSettings } from '../../../../store/settings.store';
import { SettingsOptions } from '/@/renderer/features/settings/components/settings-option';
import { DraggableItem } from '/@/renderer/features/settings/components/general/draggable-item';
import {
SettingOption,
SettingsSection,
} from '/@/renderer/features/settings/components/settings-section';
export const SidebarSettings = () => {
const { t } = useTranslation();
const settings = useGeneralSettings();
const { setSidebarItems, setSettings } = useSettingsStoreActions();
const [open, setOpen] = useState(false);
const translatedSidebarItemMap = useMemo(
() => ({
Albums: t('page.sidebar.albums', { postProcess: 'titleCase' }),
Artists: t('page.sidebar.artists', { postProcess: 'titleCase' }),
Folders: t('page.sidebar.folders', { postProcess: 'titleCase' }),
Genres: t('page.sidebar.genres', { postProcess: 'titleCase' }),
Home: t('page.sidebar.home', { postProcess: 'titleCase' }),
'Now Playing': t('page.sidebar.nowPlaying', { postProcess: 'titleCase' }),
Playlists: t('page.sidebar.playlists', { postProcess: 'titleCase' }),
Search: t('page.sidebar.search', { postProcess: 'titleCase' }),
Settings: t('page.sidebar.settings', { postProcess: 'titleCase' }),
Tracks: t('page.sidebar.tracks', { postProcess: 'titleCase' }),
}),
[t],
);
const [localSidebarItems, setLocalSidebarItems] = useState(settings.sidebarItems);
const handleSave = () => {
setSidebarItems(localSidebarItems);
};
const handleChangeDisabled = useCallback((id: string, e: boolean) => {
setLocalSidebarItems((items) =>
items.map((item) => {
if (item.id === id) {
return {
...item,
disabled: !e,
};
}
return item;
}),
);
}, []);
const { setSettings } = useSettingsStoreActions();
const handleSetSidebarPlaylistList = (e: ChangeEvent<HTMLInputElement>) => {
setSettings({
@@ -68,84 +30,34 @@ export const SidebarSettings = () => {
});
};
const isSaveButtonDisabled = isEqual(settings.sidebarItems, localSidebarItems);
const options: SettingOption[] = [
{
control: (
<Switch
checked={settings.sidebarPlaylistList}
onChange={handleSetSidebarPlaylistList}
/>
),
description: t('setting.sidebarPlaylistList', {
context: 'description',
postProcess: 'sentenceCase',
}),
title: t('setting.sidebarPlaylistList', { postProcess: 'sentenceCase' }),
},
{
control: (
<Switch
checked={settings.sidebarCollapsedNavigation}
onChange={handleSetSidebarCollapsedNavigation}
/>
),
description: t('setting.sidebarPlaylistList', {
context: 'description',
postProcess: 'sentenceCase',
}),
title: t('setting.sidebarCollapsedNavigation', { postProcess: 'sentenceCase' }),
},
];
return (
<>
<SettingsOptions
control={
<Switch
checked={settings.sidebarPlaylistList}
onChange={handleSetSidebarPlaylistList}
/>
}
description={t('setting.sidebarPlaylistList', {
context: 'description',
postProcess: 'sentenceCase',
})}
title={t('setting.sidebarPlaylistList', { postProcess: 'sentenceCase' })}
/>
<SettingsOptions
control={
<Switch
checked={settings.sidebarCollapsedNavigation}
onChange={handleSetSidebarCollapsedNavigation}
/>
}
description={t('setting.sidebarPlaylistList', {
context: 'description',
postProcess: 'sentenceCase',
})}
title={t('setting.sidebarCollapsedNavigation', { postProcess: 'sentenceCase' })}
/>
<SettingsOptions
control={
<>
{open && (
<Button
compact
disabled={isSaveButtonDisabled}
variant="filled"
onClick={handleSave}
>
{t('common.save', { postProcess: 'titleCase' })}
</Button>
)}
<Button
compact
variant="filled"
onClick={() => setOpen(!open)}
>
{t(open ? 'common.close' : 'common.edit', { postProcess: 'titleCase' })}
</Button>
</>
}
description={t('setting.sidebarCollapsedNavigation', {
context: 'description',
postProcess: 'sentenceCase',
})}
title={t('setting.sidebarConfiguration', { postProcess: 'sentenceCase' })}
/>
{open && (
<Reorder.Group
axis="y"
values={localSidebarItems}
onReorder={setLocalSidebarItems}
>
{localSidebarItems.map((item) => (
<DraggableItem
key={item.id}
handleChangeDisabled={handleChangeDisabled}
item={item}
value={
translatedSidebarItemMap[
item.id as keyof typeof translatedSidebarItemMap
]
}
/>
))}
</Reorder.Group>
)}
</>
);
return <SettingsSection options={options} />;
};