reorganize and redesign settings

This commit is contained in:
jeffvli
2025-11-23 18:15:38 -08:00
parent 7cc5ccd2c5
commit a2926ef47e
26 changed files with 629 additions and 540 deletions
@@ -1,14 +1,26 @@
import { Fragment } from 'react/jsx-runtime';
import { ExportImportSettings } from '/@/renderer/features/settings/components/advanced/export-import-settings';
import { StylesSettings } from '/@/renderer/features/settings/components/advanced/styles-settings';
import { CacheSettings } from '/@/renderer/features/settings/components/window/cache-settngs';
import { UpdateSettings } from '/@/renderer/features/settings/components/window/update-settings';
import { Divider } from '/@/shared/components/divider/divider';
import { Stack } from '/@/shared/components/stack/stack';
const sections = [
{ component: UpdateSettings, key: 'update' },
{ component: ExportImportSettings, key: 'export-import' },
{ component: CacheSettings, key: 'cache' },
];
export const AdvancedTab = () => {
return (
<Stack gap="md">
<UpdateSettings />
<StylesSettings />
<ExportImportSettings />
{sections.map(({ component: Section, key }, index) => (
<Fragment key={key}>
<Section />
{index < sections.length - 1 && <Divider />}
</Fragment>
))}
</Stack>
);
};
@@ -3,7 +3,10 @@ import { t } from 'i18next';
import { useCallback } from 'react';
import { ExportImportSettingsModal } from '/@/renderer/components/export-import-settings-modal/export-import-settings-modal';
import { SettingsOptions } from '/@/renderer/features/settings/components/settings-option';
import {
SettingOption,
SettingsSection,
} from '/@/renderer/features/settings/components/settings-section';
import { useSettingsForExport } from '/@/renderer/store';
import { Button } from '/@/shared/components/button/button';
@@ -28,26 +31,41 @@ export const ExportImportSettings = () => {
openModal({
children: <ExportImportSettingsModal />,
size: 'lg',
title: t('setting.exportImportSettings_importModalTitle').toString(),
title: t('setting.exportImportSettings_importModalTitle', {
postProcess: 'sentenceCase',
}),
});
};
const options: SettingOption[] = [
{
control: (
<>
<Button onClick={onExportSettings} size="compact-sm">
{t('setting.exportImportSettings_control_exportText', {
postProcess: 'sentenceCase',
})}
</Button>
<Button onClick={openImportModal} size="compact-sm">
{t('setting.exportImportSettings_control_importText', {
postProcess: 'sentenceCase',
})}
</Button>
</>
),
description: t('setting.exportImportSettings_control_description', {
postProcess: 'sentenceCase',
}),
title: t('setting.exportImportSettings_control_title', {
postProcess: 'sentenceCase',
}),
},
];
return (
<>
<SettingsOptions
control={
<>
<Button onClick={onExportSettings}>
{t('setting.exportImportSettings_control_exportText').toString()}
</Button>
<Button onClick={openImportModal}>
{t('setting.exportImportSettings_control_importText').toString()}
</Button>
</>
}
description={t('setting.exportImportSettings_control_description').toString()}
title={t('setting.exportImportSettings_control_title').toString()}
/>
</>
<SettingsSection
options={options}
title={t('page.setting.exportImport', { postProcess: 'sentenceCase' })}
/>
);
};