Cool_Tools/feishin
1
0
Fork 0
mirror of https://github.com/jeffvli/feishin.git synced 2024-11-20 06:27:09 +01:00
Code Issues Actions 3 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
No known key found for this signature in database
GPG Key ID: 18D2767419676C87
21 changed files with 439 additions and 385 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.editorconfig
View File

@ -2,7 +2,7 @@ root = true
[*]
indent_style = space
indent_size = 2
indent_size = 4
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true

126
src/renderer/features/settings/components/general/draggable-items.tsx Normal file
View File

@ -0,0 +1,126 @@
import isEqual from 'lodash/isEqual';
import { useCallback, useMemo, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { SortableItem } from '/@/renderer/store';
import { useSettingSearchContext } from '/@/renderer/features/settings/context/search-context';
import { SettingsOptions } from '/@/renderer/features/settings/components/settings-option';
import { Button } from '/@/renderer/components';
import { Reorder } from 'framer-motion';
import { Divider } from '@mantine/core';
import { DraggableItem } from '/@/renderer/features/settings/components/general/draggable-item';
export type DraggableItemsProps<K, T> = {
description: string;
itemLabels: Array<[K, string]>;
setItems: (items: T[]) => void;
settings: T[];
title: string;
};
export const DraggableItems = <K extends string, T extends SortableItem<K>>({
description,
itemLabels,
settings,
setItems,
title,
}: DraggableItemsProps<K, T>) => {
const { t } = useTranslation();
const keyword = useSettingSearchContext();
const [open, setOpen] = useState(false);
const translatedItemMap = useMemo(
() =>
Object.fromEntries(
itemLabels.map((label) => [label[0], t(label[1], { postProcess: 'sentenceCase' })]),
) as Record<K, string>,
[itemLabels, t],
);
const [localItems, setLocalItems] = useState(settings);
const handleChangeDisabled = useCallback((id: string, e: boolean) => {
setLocalItems((items) =>
items.map((item) => {
if (item.id === id) {
return {
...item,
disabled: !e,
};
}
return item;
}),
);
}, []);
const titleText = t(title, { postProcess: 'sentenceCase' });
const descriptionText = t(description, {
context: 'description',
postProcess: 'sentenceCase',
});
const shouldShow = useMemo(() => {
return (
keyword === '' ||
title.toLocaleLowerCase().includes(keyword) ||
description.toLocaleLowerCase().includes(keyword)
);
}, [description, keyword, title]);
if (!shouldShow) {
return <></>;
}
const isSaveButtonDisabled = isEqual(settings, localItems);
const handleSave = () => {
setItems(localItems);
};
return (
<>
<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={descriptionText}
title={titleText}
/>
{open && (
<Reorder.Group
axis="y"
values={localItems}
onReorder={setLocalItems}
>
{localItems.map((item) => (
<DraggableItem
key={item.id}
handleChangeDisabled={handleChangeDisabled}
item={item}
value={translatedItemMap[item.id]}
/>
))}
</Reorder.Group>
)}
<Divider />
</>
);
};

16
src/renderer/features/settings/components/general/general-tab.tsx
View File

@ -1,4 +1,4 @@
import { Divider, Stack } from '@mantine/core';
import { Stack } from '@mantine/core';
import { ApplicationSettings } from '/@/renderer/features/settings/components/general/application-settings';
import { ControlSettings } from '/@/renderer/features/settings/components/general/control-settings';
import { SidebarSettings } from '/@/renderer/features/settings/components/general/sidebar-settings';
@ -7,26 +7,18 @@ import { RemoteSettings } from '/@/renderer/features/settings/components/general
import { CacheSettings } from '/@/renderer/features/settings/components/window/cache-settngs';
import isElectron from 'is-electron';
import { HomeSettings } from '/@/renderer/features/settings/components/general/home-settings';
import { SidebarReorder } from '/@/renderer/features/settings/components/general/sidebar-reorder';
export const GeneralTab = () => {
return (
<Stack spacing="md">
<ApplicationSettings />
<Divider />
<ThemeSettings />
<Divider />
<ControlSettings />
<Divider />
<HomeSettings />
<Divider />
<SidebarReorder />
<SidebarSettings />
{isElectron() && (
<>
<Divider />
<RemoteSettings />
</>
)}
<Divider />
{isElectron() && <RemoteSettings />}
<CacheSettings />
</Stack>
);

109
src/renderer/features/settings/components/general/home-settings.tsx
View File

@ -1,107 +1,28 @@
import { useCallback, useMemo, useState } from 'react';
import { Reorder } from 'framer-motion';
import isEqual from 'lodash/isEqual';
import { useTranslation } from 'react-i18next';
import { Button } from '/@/renderer/components';
import {
useSettingsStoreActions,
useGeneralSettings,
HomeItem,
} from '../../../../store/settings.store';
import { SettingsOptions } from '/@/renderer/features/settings/components/settings-option';
import { DraggableItem } from '/@/renderer/features/settings/components/general/draggable-item';
import { DraggableItems } from '/@/renderer/features/settings/components/general/draggable-items';
const HOME_ITEMS: Array<[string, string]> = [
[HomeItem.RANDOM, 'page.home.explore'],
[HomeItem.RECENTLY_PLAYED, 'page.home.recentlyPlayed'],
[HomeItem.RECENTLY_ADDED, 'page.home.newlyAdded'],
[HomeItem.MOST_PLAYED, 'page.home.mostPlayed'],
];
export const HomeSettings = () => {
const { t } = useTranslation();
const { homeItems } = useGeneralSettings();
const { setHomeItems } = useSettingsStoreActions();
const [open, setOpen] = useState(false);
const translatedSidebarItemMap = useMemo(
() => ({
[HomeItem.RANDOM]: t('page.home.explore', { postProcess: 'sentenceCase' }),
[HomeItem.RECENTLY_PLAYED]: t('page.home.recentlyPlayed', {
postProcess: 'sentenceCase',
}),
[HomeItem.RECENTLY_ADDED]: t('page.home.newlyAdded', { postProcess: 'sentenceCase' }),
[HomeItem.MOST_PLAYED]: t('page.home.mostPlayed', { postProcess: 'sentenceCase' }),
}),
[t],
);
const [localHomeItems, setLocalHomeItems] = useState(homeItems);
const handleSave = () => {
setHomeItems(localHomeItems);
};
const handleChangeDisabled = useCallback((id: string, e: boolean) => {
setLocalHomeItems((items) =>
items.map((item) => {
if (item.id === id) {
return {
...item,
disabled: !e,
};
}
return item;
}),
);
}, []);
const isSaveButtonDisabled = isEqual(homeItems, localHomeItems);
return (
<>
<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.homeConfiguration', {
context: 'description',
postProcess: 'sentenceCase',
})}
title={t('setting.homeConfiguration', { postProcess: 'sentenceCase' })}
/>
{open && (
<Reorder.Group
axis="y"
values={localHomeItems}
onReorder={setLocalHomeItems}
>
{localHomeItems.map((item) => (
<DraggableItem
key={item.id}
handleChangeDisabled={handleChangeDisabled}
item={item}
value={
translatedSidebarItemMap[
item.id as keyof typeof translatedSidebarItemMap
]
}
/>
))}
</Reorder.Group>
)}
</>
<DraggableItems
description="setting.homeConfiguration"
itemLabels={HOME_ITEMS}
setItems={setHomeItems}
settings={homeItems}
title="setting.homeConfiguration"
/>
);
};

30
src/renderer/features/settings/components/general/sidebar-reorder.tsx Normal file
View File

@ -0,0 +1,30 @@
import { DraggableItems } from '/@/renderer/features/settings/components/general/draggable-items';
import { useGeneralSettings, useSettingsStoreActions } from '/@/renderer/store';
const SIDEBAR_ITEMS: Array<[string, string]> = [
['Albums', 'page.sidebar.albums'],
['Artists', 'page.sidebar.artists'],
['Folders', 'page.sidebar.folders'],
['Genres', 'page.sidebar.genres'],
['Home', 'page.sidebar.home'],
['Now Playing', 'page.sidebar.nowPlaying'],
['Playlists', 'page.sidebar.playlists'],
['Search', 'page.sidebar.search'],
['Settings', 'page.sidebar.settings'],
['Tracks', 'page.sidebar.tracks'],
];
export const SidebarReorder = () => {
const { sidebarItems } = useGeneralSettings();
const { setSidebarItems } = useSettingsStoreActions();
return (
<DraggableItems
description="setting.sidebarCollapsedNavigation"
itemLabels={SIDEBAR_ITEMS}
setItems={setSidebarItems}
settings={sidebarItems}
title="setting.sidebarConfiguration"
/>
);
};

160
src/renderer/features/settings/components/general/sidebar-settings.tsx
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} />;
};

147
src/renderer/features/settings/components/hotkeys/hotkey-manager-settings.tsx
View File

@ -9,6 +9,7 @@ import { Button, TextInput, Checkbox } from '/@/renderer/components';
import { BindingActions, useHotkeySettings, useSettingsStoreActions } from '/@/renderer/store';
import { SettingsOptions } from '/@/renderer/features/settings/components/settings-option';
import i18n from '/@/i18n/i18n';
import { useSettingSearchContext } from '/@/renderer/features/settings/context/search-context';
const ipc = isElectron() ? window.electron.ipc : null;
@ -107,6 +108,7 @@ export const HotkeyManagerSettings = () => {
const { bindings, globalMediaHotkeys } = useHotkeySettings();
const { setSettings } = useSettingsStoreActions();
const [selected, setSelected] = useState<BindingActions | null>(null);
const keyword = useSettingSearchContext();
const debouncedSetHotkey = debounce(
(binding: BindingActions, e: KeyboardEvent<HTMLInputElement>) => {
@ -216,6 +218,21 @@ export const HotkeyManagerSettings = () => {
return duplicateKeys;
}, [bindings]);
const filteredBindings = useMemo(() => {
const base = Object.keys(bindings);
if (keyword === '') {
return base.filter((binding) => BINDINGS_MAP[binding as keyof typeof BINDINGS_MAP]);
}
return base.filter((binding) => {
const item = BINDINGS_MAP[binding as keyof typeof BINDINGS_MAP];
if (!item) return false;
return item.toLocaleLowerCase().includes(keyword);
});
}, [bindings, keyword]);
return (
<>
<SettingsOptions
@ -227,76 +244,72 @@ export const HotkeyManagerSettings = () => {
title={t('setting.applicationHotkeys', { postProcess: 'sentenceCase' })}
/>
<HotkeysContainer>
{Object.keys(bindings)
.filter((binding) => BINDINGS_MAP[binding as keyof typeof BINDINGS_MAP])
.map((binding) => (
<Group
key={`hotkey-${binding}`}
noWrap
>
<TextInput
readOnly
style={{ userSelect: 'none' }}
value={BINDINGS_MAP[binding as keyof typeof BINDINGS_MAP]}
/>
<TextInput
readOnly
icon={<RiKeyboardBoxLine />}
id={`hotkey-${binding}`}
{filteredBindings.map((binding) => (
<Group
key={`hotkey-${binding}`}
noWrap
>
<TextInput
readOnly
style={{ userSelect: 'none' }}
value={BINDINGS_MAP[binding as keyof typeof BINDINGS_MAP]}
/>
<TextInput
readOnly
icon={<RiKeyboardBoxLine />}
id={`hotkey-${binding}`}
style={{
opacity: selected === (binding as BindingActions) ? 0.8 : 1,
outline: duplicateHotkeyMap.includes(
bindings[binding as keyof typeof BINDINGS_MAP].hotkey!,
)
? '1px dashed red'
: undefined,
}}
value={bindings[binding as keyof typeof BINDINGS_MAP].hotkey}
onBlur={() => setSelected(null)}
onChange={() => {}}
onKeyDownCapture={(e) => {
if (selected !== (binding as BindingActions)) return;
handleSetHotkey(binding as BindingActions, e);
}}
/>
{isElectron() && (
<Checkbox
checked={bindings[binding as keyof typeof BINDINGS_MAP].isGlobal}
disabled={
bindings[binding as keyof typeof BINDINGS_MAP].hotkey === ''
}
size="xl"
style={{
opacity: selected === (binding as BindingActions) ? 0.8 : 1,
outline: duplicateHotkeyMap.includes(
bindings[binding as keyof typeof BINDINGS_MAP].hotkey!,
)
? '1px dashed red'
: undefined,
}}
value={bindings[binding as keyof typeof BINDINGS_MAP].hotkey}
onBlur={() => setSelected(null)}
onChange={() => {}}
onKeyDownCapture={(e) => {
if (selected !== (binding as BindingActions)) return;
handleSetHotkey(binding as BindingActions, e);
opacity: bindings[binding as keyof typeof BINDINGS_MAP]
.allowGlobal
? 1
: 0,
}}
onChange={(e) =>
handleSetGlobalHotkey(binding as BindingActions, e)
}
/>
{isElectron() && (
<Checkbox
checked={
bindings[binding as keyof typeof BINDINGS_MAP].isGlobal
}
disabled={
bindings[binding as keyof typeof BINDINGS_MAP].hotkey === ''
}
size="xl"
style={{
opacity: bindings[binding as keyof typeof BINDINGS_MAP]
.allowGlobal
? 1
: 0,
}}
onChange={(e) =>
handleSetGlobalHotkey(binding as BindingActions, e)
}
/>
)}
<Button
variant="default"
w={100}
onClick={() => {
setSelected(binding as BindingActions);
document.getElementById(`hotkey-${binding}`)?.focus();
}}
>
<RiEditLine />
</Button>
<Button
variant="default"
onClick={() => handleClearHotkey(binding as BindingActions)}
>
<RiDeleteBinLine />
</Button>
</Group>
))}
)}
<Button
variant="default"
w={100}
onClick={() => {
setSelected(binding as BindingActions);
document.getElementById(`hotkey-${binding}`)?.focus();
}}
>
<RiEditLine />
</Button>
<Button
variant="default"
onClick={() => handleClearHotkey(binding as BindingActions)}
>
<RiDeleteBinLine />
</Button>
</Group>
))}
</HotkeysContainer>
</>
);

9
src/renderer/features/settings/components/hotkeys/hotkeys-tab.tsx
View File

@ -1,4 +1,4 @@
import { Divider, Stack } from '@mantine/core';
import { Stack } from '@mantine/core';
import isElectron from 'is-electron';
import { WindowHotkeySettings } from './window-hotkey-settings';
import { HotkeyManagerSettings } from '/@/renderer/features/settings/components/hotkeys/hotkey-manager-settings';
@ -6,12 +6,7 @@ import { HotkeyManagerSettings } from '/@/renderer/features/settings/components/
export const HotkeysTab = () => {
return (
<Stack spacing="md">
{isElectron() && (
<>
<WindowHotkeySettings />
<Divider />
</>
)}
{isElectron() && <WindowHotkeySettings />}
<HotkeyManagerSettings />
</Stack>
);

9
src/renderer/features/settings/components/playback/audio-settings.tsx
View File

@ -18,7 +18,7 @@ const getAudioDevice = async () => {
return (devices || []).filter((dev: MediaDeviceInfo) => dev.kind === 'audiooutput');
};
export const AudioSettings = () => {
export const AudioSettings = ({ hasFancyAudio }: { hasFancyAudio: boolean }) => {
const { t } = useTranslation();
const settings = usePlaybackSettings();
const { setSettings } = useSettingsStoreActions();
@ -201,5 +201,10 @@ export const AudioSettings = () => {
},
];
return <SettingsSection options={audioOptions} />;
return (
<SettingsSection
divider={!hasFancyAudio}
options={audioOptions}
/>
);
};

7
src/renderer/features/settings/components/playback/lyric-settings.tsx
View File

@ -118,5 +118,10 @@ export const LyricSettings = () => {
},
];
return <SettingsSection options={lyricOptions} />;
return (
<SettingsSection
divider={false}
options={lyricOptions}
/>
);
};

4
src/renderer/features/settings/components/playback/mpv-settings.tsx
View File

@ -1,5 +1,5 @@
import { useEffect, useState } from 'react';
import { Divider, Group, Stack } from '@mantine/core';
import { Group, Stack } from '@mantine/core';
import isElectron from 'is-electron';
import {
FileInput,
@ -414,9 +414,7 @@ export const MpvSettings = () => {
return (
<>
<SettingsSection options={options} />
<Divider />
<SettingsSection options={generalOptions} />
<Divider />
<SettingsSection options={replayGainOptions} />
</>
);

7
src/renderer/features/settings/components/playback/playback-tab.tsx
View File

@ -1,5 +1,5 @@
import { lazy, Suspense, useMemo } from 'react';
import { Divider, Stack } from '@mantine/core';
import { Stack } from '@mantine/core';
import { AudioSettings } from '/@/renderer/features/settings/components/playback/audio-settings';
import { ScrobbleSettings } from '/@/renderer/features/settings/components/playback/scrobble-settings';
import isElectron from 'is-electron';
@ -15,13 +15,12 @@ export const PlaybackTab = () => {
const hasFancyAudio = useMemo(() => {
return isElectron() || 'AudioContext' in window;
}, []);
return (
<Stack spacing="md">
<AudioSettings />
<AudioSettings hasFancyAudio={hasFancyAudio} />
<Suspense fallback={<></>}>{hasFancyAudio && <MpvSettings />}</Suspense>
<Divider />
<ScrobbleSettings />
<Divider />
<LyricSettings />
</Stack>
);

39
src/renderer/features/settings/components/settings-header.tsx
View File

@ -2,13 +2,23 @@ import { Flex, Group } from '@mantine/core';
import { closeAllModals, openModal } from '@mantine/modals';
import { useTranslation } from 'react-i18next';
import { RiSettings2Fill } from 'react-icons/ri';
import { Button, ConfirmModal, PageHeader } from '/@/renderer/components';
import { Button, ConfirmModal, PageHeader, SearchInput } from '/@/renderer/components';
import { LibraryHeaderBar } from '/@/renderer/features/shared';
import { useSettingsStoreActions } from '../../../store/settings.store';
import { useSettingSearchContext } from '/@/renderer/features/settings/context/search-context';
import { useContainerQuery } from '/@/renderer/hooks';
export const SettingsHeader = () => {
export type SettingsHeaderProps = {
setSearch: (search: string) => void;
};
export const SettingsHeader = ({ setSearch }: SettingsHeaderProps) => {
const { t } = useTranslation();
const { reset } = useSettingsStoreActions();
const search = useSettingSearchContext();
const cq = useContainerQuery();
console.log(cq);
const handleResetToDefault = () => {
reset();
@ -27,7 +37,7 @@ export const SettingsHeader = () => {
};
return (
<Flex>
<Flex ref={cq.ref}>
<PageHeader>
<LibraryHeaderBar>
<Flex
@ -41,13 +51,22 @@ export const SettingsHeader = () => {
{t('common.setting', { count: 2, postProcess: 'titleCase' })}
</LibraryHeaderBar.Title>
</Group>
<Button
compact
variant="default"
onClick={openResetConfirmModal}
>
{t('common.resetToDefault', { postProcess: 'sentenceCase' })}
</Button>
<Group>
<SearchInput
defaultValue={search}
openedWidth={cq.isMd ? 250 : cq.isSm ? 200 : 150}
onChange={(event) =>
setSearch(event.target.value.toLocaleLowerCase())
}
/>
<Button
compact
variant="default"
onClick={openResetConfirmModal}
>
{t('common.resetToDefault', { postProcess: 'sentenceCase' })}
</Button>
</Group>
</Flex>
</LibraryHeaderBar>
</PageHeader>

27
src/renderer/features/settings/components/settings-section.tsx
View File

@ -1,5 +1,7 @@
import { ReactNode } from 'react';
import { SettingsOptions } from '/@/renderer/features/settings/components/settings-option';
import { useSettingSearchContext } from '/@/renderer/features/settings/context/search-context';
import { Divider } from '@mantine/core';
export type SettingOption = {
control: ReactNode;
@ -10,20 +12,27 @@ export type SettingOption = {
};
interface SettingsSectionProps {
divider?: boolean;
options: SettingOption[];
}
export const SettingsSection = ({ options }: SettingsSectionProps) => {
export const SettingsSection = ({ divider, options }: SettingsSectionProps) => {
const keyword = useSettingSearchContext();
const hasKeyword = keyword !== '';
const values = options.filter(
(o) => !o.isHidden && (!hasKeyword || o.title.toLocaleLowerCase().includes(keyword)),
);
return (
<>
{options
.filter((o) => !o.isHidden)
.map((option) => (
<SettingsOptions
key={`option-${option.title}`}
{...option}
/>
))}
{values.map((option) => (
<SettingsOptions
key={`option-${option.title}`}
{...option}
/>
))}
{divider !== false && values.length > 0 && <Divider />}
</>
);
};

81
src/renderer/features/settings/components/window/cache-settngs.tsx
View File

@ -3,8 +3,11 @@ import { useQueryClient } from '@tanstack/react-query';
import isElectron from 'is-electron';
import { useTranslation } from 'react-i18next';
import { Button, ConfirmModal, toast } from '/@/renderer/components';
import { SettingsOptions } from '/@/renderer/features/settings/components/settings-option';
import { useCallback, useState } from 'react';
import {
SettingOption,
SettingsSection,
} from '/@/renderer/features/settings/components/settings-section';
const browser = isElectron() ? window.electron.browser : null;
@ -50,42 +53,46 @@ export const CacheSettings = () => {
});
};
const options: SettingOption[] = [
{
control: (
<Button
compact
disabled={isClearing}
variant="filled"
onClick={() => openResetConfirmModal(false)}
>
{t('common.clear', { postProcess: 'sentenceCase' })}
</Button>
),
description: t('setting.clearQueryCache', {
context: 'description',
}),
title: t('setting.clearQueryCache'),
},
{
control: (
<Button
compact
disabled={isClearing}
variant="filled"
onClick={() => openResetConfirmModal(true)}
>
{t('common.clear', { postProcess: 'sentenceCase' })}
</Button>
),
description: t('setting.clearCache', {
context: 'description',
}),
isHidden: !browser,
title: t('setting.clearCache'),
},
];
return (
<>
<SettingsOptions
control={
<Button
compact
disabled={isClearing}
variant="filled"
onClick={() => openResetConfirmModal(false)}
>
{t('common.clear', { postProcess: 'sentenceCase' })}
</Button>
}
description={t('setting.clearQueryCache', {
context: 'description',
})}
title={t('setting.clearQueryCache')}
/>
{browser && (
<SettingsOptions
control={
<Button
compact
disabled={isClearing}
variant="filled"
onClick={() => openResetConfirmModal(true)}
>
{t('common.clear', { postProcess: 'sentenceCase' })}
</Button>
}
description={t('setting.clearCache', {
context: 'description',
})}
title={t('setting.clearCache')}
/>
)}
</>
<SettingsSection
divider={false}
options={options}
/>
);
};

7
src/renderer/features/settings/components/window/password-settings.tsx
View File

@ -52,5 +52,10 @@ export const PasswordSettings = () => {
},
];
return <SettingsSection options={updateOptions} />;
return (
<SettingsSection
divider={false}
options={updateOptions}
/>
);
};

8
src/renderer/features/settings/components/window/update-settings.tsx
View File

@ -8,6 +8,7 @@ import {
import { Switch } from '/@/renderer/components';
const localSettings = isElectron() ? window.electron.localSettings : null;
const utils = isElectron() ? window.electron.utils : null;
export const UpdateSettings = () => {
const { t } = useTranslation();
@ -42,5 +43,10 @@ export const UpdateSettings = () => {
},
];
return <SettingsSection options={updateOptions} />;
return (
<SettingsSection
divider={utils?.isLinux()}
options={updateOptions}
/>
);
};

5
src/renderer/features/settings/components/window/window-tab.tsx
View File

@ -1,4 +1,4 @@
import { Divider, Stack } from '@mantine/core';
import { Stack } from '@mantine/core';
import { UpdateSettings } from '/@/renderer/features/settings/components/window/update-settings';
import { WindowSettings } from '/@/renderer/features/settings/components/window/window-settings';
import { DiscordSettings } from '/@/renderer/features/settings/components/window/discord-settings';
@ -11,13 +11,10 @@ export const WindowTab = () => {
return (
<Stack spacing="md">
<WindowSettings />
<Divider />
<DiscordSettings />
<Divider />
<UpdateSettings />
{utils?.isLinux() && (
<>
<Divider />
<PasswordSettings />
</>
)}

8
src/renderer/features/settings/context/search-context.tsx Normal file
View File

@ -0,0 +1,8 @@
import { createContext, useContext } from 'react';
export const SettingSearchContext = createContext<string>('');
export const useSettingSearchContext = () => {
const ctxValue = useContext(SettingSearchContext);
return ctxValue;
};

22
src/renderer/features/settings/routes/settings-route.tsx
View File

@ -2,18 +2,24 @@ import { Flex } from '@mantine/core';
import { SettingsContent } from '/@/renderer/features/settings/components/settings-content';
import { SettingsHeader } from '/@/renderer/features/settings/components/settings-header';
import { AnimatedPage } from '/@/renderer/features/shared';
import { SettingSearchContext } from '/@/renderer/features/settings/context/search-context';
import { useState } from 'react';
const SettingsRoute = () => {
const [search, setSearch] = useState('');
return (
<AnimatedPage>
<Flex
direction="column"
h="100%"
w="100%"
>
<SettingsHeader />
<SettingsContent />
</Flex>
<SettingSearchContext.Provider value={search}>
<Flex
direction="column"
h="100%"
w="100%"
>
<SettingsHeader setSearch={setSearch} />
<SettingsContent />
</Flex>
</SettingSearchContext.Provider>
</AnimatedPage>
);
};

1
src/renderer/store/settings.store.ts
View File

@ -282,6 +282,7 @@ export interface SettingsSlice extends SettingsState {
actions: {
reset: () => void;
resetSampleRate: () => void;
setGenreBehavior: (target: GenreTarget) => void;
setHomeItems: (item: SortableItem<HomeItem>[]) => void;
setSettings: (data: Partial<SettingsState>) => void;
setSidebarItems: (items: SidebarItemType[]) => void;