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

move settings page to modal instead of route

Browse Source
This commit is contained in:
jeffvli
2025-11-23 00:49:39 -08:00
parent 6d0f80f06a
commit 54a8c8c3a4
6 changed files with 85 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/features/settings/components/settings-content.tsx
+47 -44
View File
@@ -2,6 +2,7 @@ import isElectron from 'is-electron';
import { lazy } from 'react';
import { useTranslation } from 'react-i18next';
import { LibraryContainer } from '/@/renderer/features/shared/components/library-container';
import { useSettingsStore, useSettingsStoreActions } from '/@/renderer/store/settings.store';
import { Tabs } from '/@/shared/components/tabs/tabs';
@@ -41,51 +42,53 @@ export const SettingsContent = () => {
const { setSettings } = useSettingsStoreActions();
return (
<div style={{ height: '100%', overflow: 'scroll', padding: '1rem', width: '100%' }}>
<Tabs
keepMounted={false}
onChange={(e) => e && setSettings({ tab: e })}
orientation="horizontal"
value={currentTab}
variant="default"
>
<Tabs.List>
<Tabs.Tab value="general">
{t('page.setting.generalTab', { postProcess: 'sentenceCase' })}
</Tabs.Tab>
<Tabs.Tab value="playback">
{t('page.setting.playbackTab', { postProcess: 'sentenceCase' })}
</Tabs.Tab>
<Tabs.Tab value="hotkeys">
{t('page.setting.hotkeysTab', { postProcess: 'sentenceCase' })}
</Tabs.Tab>
{isElectron() && (
<Tabs.Tab value="window">
{t('page.setting.windowTab', { postProcess: 'sentenceCase' })}
<LibraryContainer>
<div style={{ height: '100%', overflow: 'scroll', padding: '1rem', width: '100%' }}>
<Tabs
keepMounted={false}
onChange={(e) => e && setSettings({ tab: e })}
orientation="horizontal"
value={currentTab}
variant="default"
>
<Tabs.List>
<Tabs.Tab value="general">
{t('page.setting.generalTab', { postProcess: 'sentenceCase' })}
</Tabs.Tab>
)}
<Tabs.Tab value="advanced">
{t('page.setting.advanced', { postProcess: 'sentenceCase' })}
</Tabs.Tab>
</Tabs.List>
<Tabs.Panel value="general">
<GeneralTab />
</Tabs.Panel>
<Tabs.Panel value="playback">
<PlaybackTab />
</Tabs.Panel>
<Tabs.Panel value="hotkeys">
<HotkeysTab />
</Tabs.Panel>
{isElectron() && (
<Tabs.Panel value="window">
<ApplicationTab />
<Tabs.Tab value="playback">
{t('page.setting.playbackTab', { postProcess: 'sentenceCase' })}
</Tabs.Tab>
<Tabs.Tab value="hotkeys">
{t('page.setting.hotkeysTab', { postProcess: 'sentenceCase' })}
</Tabs.Tab>
{isElectron() && (
<Tabs.Tab value="window">
{t('page.setting.windowTab', { postProcess: 'sentenceCase' })}
</Tabs.Tab>
)}
<Tabs.Tab value="advanced">
{t('page.setting.advanced', { postProcess: 'sentenceCase' })}
</Tabs.Tab>
</Tabs.List>
<Tabs.Panel value="general">
<GeneralTab />
</Tabs.Panel>
)}
<Tabs.Panel value="advanced">
<AdvancedTab />
</Tabs.Panel>
</Tabs>
</div>
<Tabs.Panel value="playback">
<PlaybackTab />
</Tabs.Panel>
<Tabs.Panel value="hotkeys">
<HotkeysTab />
</Tabs.Panel>
{isElectron() && (
<Tabs.Panel value="window">
<ApplicationTab />
</Tabs.Panel>
)}
<Tabs.Panel value="advanced">
<AdvancedTab />
</Tabs.Panel>
</Tabs>
</div>
</LibraryContainer>
);
};
src/renderer/features/settings/components/settings-modal.tsx
+16
View File
@@ -0,0 +1,16 @@
import { useState } from 'react';
import { SettingsContent } from '/@/renderer/features/settings/components/settings-content';
import { SettingsHeader } from '/@/renderer/features/settings/components/settings-header';
import { SettingSearchContext } from '/@/renderer/features/settings/context/search-context';
export const SettingsModal = () => {
const [search, setSearch] = useState('');
return (
<SettingSearchContext.Provider value={search}>
<SettingsHeader setSearch={setSearch} />
<SettingsContent />
</SettingSearchContext.Provider>
);
};
src/renderer/features/settings/utils/open-settings-modal.ts
+9
View File
@@ -0,0 +1,9 @@
import { openContextModal } from '@mantine/modals';
export const openSettingsModal = () => {
openContextModal({
fullScreen: true,
innerProps: {},
modalKey: 'settings',
});
};