Jaymr/new-api
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

✨ refactor: system settings UI for consistent, compact layouts

Browse Source 
Redesign the system settings interface to align with the rest of the console experience by using fixed header actions, removing redundant subtitles, respecting global content width, and standardizing responsive form layouts.

Introduce reusable settings layout primitives for forms, switch rows, grouped controls, nested control sections, title status indicators, and page action portals. Replace duplicated card-style switch markup with explicit compact components, improve nested switch readability, and reduce visual noise across authentication, billing, content, integrations, maintenance, models, and request-limit settings.

Also complete missing i18n translations, remove obsolete subtitle translation keys, refine i18n sync reporting, fix sidebar truncation for long labels, and verify the frontend with type checking and lint diagnostics.
This commit is contained in:
t0ng7u
2026-05-25 00:34:26 +08:00
parent 92a0959448
commit b08febaa3c
97 changed files with 2420 additions and 3032 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/default/src/features/system-settings/maintenance/header-navigation-section.tsx
Vendored
+48 -51
View File
@@ -21,17 +21,23 @@ import * as z from 'zod'
import { useForm } from 'react-hook-form'
import { zodResolver } from '@hookform/resolvers/zod'
import { useTranslation } from 'react-i18next'
import { Button } from '@/components/ui/button'
import {
Form,
FormControl,
FormDescription,
FormField,
FormItem,
FormLabel,
FormMessage,
} from '@/components/ui/form'
import { Switch } from '@/components/ui/switch'
import {
SettingsControlChildren,
SettingsForm,
SettingsSwitchContent,
SettingsControlGroup,
SettingsSwitchItem,
} from '../components/settings-form-layout'
import { SettingsPageFormActions } from '../components/settings-page-context'
import { SettingsSection } from '../components/settings-section'
import { useUpdateOption } from '../hooks/use-update-option'
import {
@@ -201,12 +207,16 @@ export function HeaderNavigationSection({
]
return (
<SettingsSection
title={t('Header navigation')}
description={t('Enable or disable top navigation modules globally.')}
>
<SettingsSection title={t('Header navigation')}>
<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)} className='space-y-6'>
<SettingsForm onSubmit={form.handleSubmit(onSubmit)}>
<SettingsPageFormActions
onSave={form.handleSubmit(onSubmit)}
onReset={resetToDefault}
isSaving={updateOption.isPending}
resetLabel='Reset to default'
saveLabel='Save navigation'
/>
<div className='grid gap-4 md:grid-cols-2'>
{simpleModules.map((module) => (
<FormField
@@ -214,13 +224,11 @@ export function HeaderNavigationSection({
control={form.control}
name={module.key}
render={({ field }) => (
<FormItem className='flex flex-row items-start justify-between rounded-lg border p-4'>
<div className='space-y-0.5 pe-4'>
<FormLabel className='text-base'>
{module.title}
</FormLabel>
<SettingsSwitchItem>
<SettingsSwitchContent>
<FormLabel>{module.title}</FormLabel>
<FormDescription>{module.description}</FormDescription>
</div>
</SettingsSwitchContent>
<FormControl>
<Switch
checked={field.value}
@@ -228,7 +236,7 @@ export function HeaderNavigationSection({
/>
</FormControl>
<FormMessage />
</FormItem>
</SettingsSwitchItem>
)}
/>
))}
@@ -236,18 +244,16 @@ export function HeaderNavigationSection({
<div className='grid gap-4 lg:grid-cols-2'>
{accessModules.map((module) => (
<div key={module.enabledKey} className='rounded-lg border p-4'>
<SettingsControlGroup key={module.enabledKey}>
<FormField
control={form.control}
name={module.enabledKey}
render={({ field }) => (
<FormItem className='flex flex-row items-start justify-between rounded-lg border p-4'>
<div className='space-y-0.5 pe-4'>
<FormLabel className='text-base'>
{module.title}
</FormLabel>
<SettingsSwitchItem>
<SettingsSwitchContent>
<FormLabel>{module.title}</FormLabel>
<FormDescription>{module.description}</FormDescription>
</div>
</SettingsSwitchContent>
<FormControl>
<Switch
checked={field.value}
@@ -255,7 +261,7 @@ export function HeaderNavigationSection({
/>
</FormControl>
<FormMessage />
</FormItem>
</SettingsSwitchItem>
)}
/>
@@ -263,39 +269,30 @@ export function HeaderNavigationSection({
control={form.control}
name={module.requireAuthKey}
render={({ field }) => (
<FormItem className='mt-4 flex flex-row items-start justify-between rounded-lg border border-dashed p-4'>
<div className='space-y-0.5 pe-4'>
<FormLabel className='text-base'>
{module.requireAuthTitle}
</FormLabel>
<FormDescription>
{module.requireAuthDescription}
</FormDescription>
</div>
<FormControl>
<Switch
checked={field.value}
onCheckedChange={field.onChange}
disabled={!form.watch(module.requireAuthDependsOn)}
/>
</FormControl>
<FormMessage />
</FormItem>
<SettingsControlChildren>
<SettingsSwitchItem className='border-b-0 py-2'>
<SettingsSwitchContent>
<FormLabel>{module.requireAuthTitle}</FormLabel>
<FormDescription>
{module.requireAuthDescription}
</FormDescription>
</SettingsSwitchContent>
<FormControl>
<Switch
checked={field.value}
onCheckedChange={field.onChange}
disabled={!form.watch(module.requireAuthDependsOn)}
/>
</FormControl>
<FormMessage />
</SettingsSwitchItem>
</SettingsControlChildren>
)}
/>
</div>
</SettingsControlGroup>
))}
</div>
<div className='flex flex-wrap gap-3'>
<Button type='button' variant='outline' onClick={resetToDefault}>
{t('Reset to default')}
</Button>
<Button type='submit' disabled={updateOption.isPending}>
{updateOption.isPending ? t('Saving...') : t('Save navigation')}
</Button>
</div>
</form>
</SettingsForm>
</Form>
</SettingsSection>
)
web/default/src/features/system-settings/maintenance/log-settings-section.tsx
Vendored
+22 -20
View File
@@ -39,13 +39,19 @@ import {
FormControl,
FormDescription,
FormField,
FormItem,
FormLabel,
FormMessage,
} from '@/components/ui/form'
import { Switch } from '@/components/ui/switch'
import { DateTimePicker } from '@/components/datetime-picker'
import { deleteLogsBefore } from '../api'
import {
SettingsControlGroup,
SettingsForm,
SettingsSwitchContent,
SettingsSwitchItem,
} from '../components/settings-form-layout'
import { SettingsPageFormActions } from '../components/settings-page-context'
import { SettingsSection } from '../components/settings-section'
import { useUpdateOption } from '../hooks/use-update-option'
@@ -161,27 +167,27 @@ export function LogSettingsSection({
}
return (
<SettingsSection
title={t('Log Maintenance')}
description={t('Control log retention and clean historical data.')}
>
<SettingsSection title={t('Log Maintenance')}>
<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)} className='space-y-6'>
<SettingsForm onSubmit={form.handleSubmit(onSubmit)}>
<SettingsPageFormActions
onSave={form.handleSubmit(onSubmit)}
isSaving={updateOption.isPending}
saveLabel='Save log settings'
/>
<FormField
control={form.control}
name='LogConsumeEnabled'
render={({ field }) => (
<FormItem className='flex flex-row items-start justify-between rounded-lg border p-4'>
<div className='space-y-0.5 pe-4'>
<FormLabel className='text-base'>
{t('Record quota usage')}
</FormLabel>
<SettingsSwitchItem>
<SettingsSwitchContent>
<FormLabel>{t('Record quota usage')}</FormLabel>
<FormDescription>
{t(
'Track per-request consumption to power usage analytics. Keeping this on increases database writes.'
)}
</FormDescription>
</div>
</SettingsSwitchContent>
<FormControl>
<Switch
checked={field.value}
@@ -189,11 +195,11 @@ export function LogSettingsSection({
/>
</FormControl>
<FormMessage />
</FormItem>
</SettingsSwitchItem>
)}
/>
<div className='space-y-4 rounded-lg border p-4'>
<SettingsControlGroup className='space-y-3'>
<div>
<h4 className='text-sm font-medium'>{t('Clean history logs')}</h4>
<p className='text-muted-foreground text-sm'>
@@ -223,12 +229,8 @@ export function LogSettingsSection({
{isCleaning ? t('Cleaning...') : t('Clean logs')}
</Button>
</div>
</div>
<Button type='submit' disabled={updateOption.isPending}>
{updateOption.isPending ? t('Saving...') : t('Save log settings')}
</Button>
</form>
</SettingsControlGroup>
</SettingsForm>
</Form>
<AlertDialog open={showConfirmDialog} onOpenChange={setShowConfirmDialog}>
<AlertDialogContent>
web/default/src/features/system-settings/maintenance/notice-section.tsx
Vendored
+10 -13
View File
@@ -21,7 +21,6 @@ import * as z from 'zod'
import { useForm } from 'react-hook-form'
import { zodResolver } from '@hookform/resolvers/zod'
import { useTranslation } from 'react-i18next'
import { Button } from '@/components/ui/button'
import {
Form,
FormControl,
@@ -31,6 +30,8 @@ import {
FormMessage,
} from '@/components/ui/form'
import { Textarea } from '@/components/ui/textarea'
import { SettingsForm } from '../components/settings-form-layout'
import { SettingsPageFormActions } from '../components/settings-page-context'
import { SettingsSection } from '../components/settings-section'
import { useUpdateOption } from '../hooks/use-update-option'
@@ -70,14 +71,14 @@ export function NoticeSection({ defaultValue }: NoticeSectionProps) {
}
return (
<SettingsSection
title={t('System Notice')}
description={t(
'Broadcast a global banner to users. Markdown is supported.'
)}
>
<SettingsSection title={t('System Notice')}>
<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)} className='space-y-6'>
<SettingsForm onSubmit={form.handleSubmit(onSubmit)}>
<SettingsPageFormActions
onSave={form.handleSubmit(onSubmit)}
isSaving={updateOption.isPending}
saveLabel='Save notice'
/>
<FormField
control={form.control}
name='Notice'
@@ -97,11 +98,7 @@ export function NoticeSection({ defaultValue }: NoticeSectionProps) {
</FormItem>
)}
/>
<Button type='submit' disabled={updateOption.isPending}>
{updateOption.isPending ? t('Saving...') : t('Save notice')}
</Button>
</form>
</SettingsForm>
</Form>
</SettingsSection>
)
web/default/src/features/system-settings/maintenance/performance-section.tsx
Vendored
+30 -21
View File
@@ -59,6 +59,12 @@ import {
import { Separator } from '@/components/ui/separator'
import { Switch } from '@/components/ui/switch'
import { StatusBadge } from '@/components/status-badge'
import {
SettingsForm,
SettingsSwitchContent,
SettingsSwitchItem,
} from '../components/settings-form-layout'
import { SettingsPageFormActions } from '../components/settings-page-context'
import { SettingsSection } from '../components/settings-section'
import { useResetForm } from '../hooks/use-reset-form'
import { useUpdateOption } from '../hooks/use-update-option'
@@ -294,14 +300,13 @@ export function PerformanceSection(props: Props) {
: 0
return (
<SettingsSection
title={t('Performance Settings')}
description={t(
'Disk cache, system performance monitoring, and operation statistics'
)}
>
<SettingsSection title={t('Performance Settings')}>
<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)} className='space-y-6'>
<SettingsForm onSubmit={form.handleSubmit(onSubmit)}>
<SettingsPageFormActions
onSave={form.handleSubmit(onSubmit)}
isSaving={updateOption.isPending}
/>
{/* Disk Cache Settings */}
<div>
<h4 className='font-medium'>{t('Disk Cache Settings')}</h4>
@@ -317,15 +322,17 @@ export function PerformanceSection(props: Props) {
control={form.control}
name='performance_setting.disk_cache_enabled'
render={({ field }) => (
<FormItem className='flex items-center gap-2'>
<SettingsSwitchItem>
<SettingsSwitchContent>
<FormLabel>{t('Enable Disk Cache')}</FormLabel>
</SettingsSwitchContent>
<FormControl>
<Switch
checked={field.value}
onCheckedChange={field.onChange}
/>
</FormControl>
<FormLabel>{t('Enable Disk Cache')}</FormLabel>
</FormItem>
</SettingsSwitchItem>
)}
/>
<FormField
@@ -415,15 +422,17 @@ export function PerformanceSection(props: Props) {
control={form.control}
name='performance_setting.monitor_enabled'
render={({ field }) => (
<FormItem className='flex items-center gap-2'>
<SettingsSwitchItem>
<SettingsSwitchContent>
<FormLabel>{t('Enable Performance Monitoring')}</FormLabel>
</SettingsSwitchContent>
<FormControl>
<Switch
checked={field.value}
onCheckedChange={field.onChange}
/>
</FormControl>
<FormLabel>{t('Enable Performance Monitoring')}</FormLabel>
</FormItem>
</SettingsSwitchItem>
)}
/>
<FormField
@@ -492,15 +501,19 @@ export function PerformanceSection(props: Props) {
control={form.control}
name='perf_metrics_setting.enabled'
render={({ field }) => (
<FormItem className='flex items-center gap-2'>
<SettingsSwitchItem>
<SettingsSwitchContent>
<FormLabel>
{t('Enable model performance metrics')}
</FormLabel>
</SettingsSwitchContent>
<FormControl>
<Switch
checked={field.value}
onCheckedChange={field.onChange}
/>
</FormControl>
<FormLabel>{t('Enable model performance metrics')}</FormLabel>
</FormItem>
</SettingsSwitchItem>
)}
/>
<FormField
@@ -573,11 +586,7 @@ export function PerformanceSection(props: Props) {
)}
/>
</div>
<Button type='submit' disabled={updateOption.isPending}>
{updateOption.isPending ? t('Saving...') : t('Save Changes')}
</Button>
</form>
</SettingsForm>
</Form>
<Separator />
web/default/src/features/system-settings/maintenance/sidebar-modules-section.tsx
Vendored
+32 -39
View File
@@ -19,16 +19,22 @@ For commercial licensing, please contact support@quantumnous.com
import { useEffect, useMemo } from 'react'
import { useForm } from 'react-hook-form'
import { useTranslation } from 'react-i18next'
import { Button } from '@/components/ui/button'
import {
Form,
FormControl,
FormDescription,
FormField,
FormItem,
FormLabel,
} from '@/components/ui/form'
import { Switch } from '@/components/ui/switch'
import {
SettingsControlChildren,
SettingsForm,
SettingsSwitchContent,
SettingsControlGroup,
SettingsSwitchItem,
} from '../components/settings-form-layout'
import { SettingsPageFormActions } from '../components/settings-page-context'
import { SettingsSection } from '../components/settings-section'
import { useUpdateOption } from '../hooks/use-update-option'
import {
@@ -175,14 +181,16 @@ export function SidebarModulesSection({
const sections = Object.entries(config)
return (
<SettingsSection
title={t('Sidebar modules')}
description={t(
'Control which sidebar areas and modules are available to all users.'
)}
>
<SettingsSection title={t('Sidebar modules')}>
<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)} className='space-y-6'>
<SettingsForm onSubmit={form.handleSubmit(onSubmit)}>
<SettingsPageFormActions
onSave={form.handleSubmit(onSubmit)}
onReset={resetToDefault}
isSaving={updateOption.isPending}
resetLabel='Reset to default'
saveLabel='Save sidebar modules'
/>
{sections.map(([sectionKey, sectionConfig]) => {
const sectionInfo = sectionMeta[sectionKey] ?? {
title: toTitleCase(sectionKey),
@@ -193,32 +201,30 @@ export function SidebarModulesSection({
)
return (
<div key={sectionKey} className='rounded-lg border p-4'>
<SettingsControlGroup key={sectionKey}>
<FormField
control={form.control}
// eslint-disable-next-line @typescript-eslint/no-explicit-any
name={`${sectionKey}.enabled` as any}
render={({ field }) => (
<FormItem className='flex flex-row items-start justify-between rounded-lg border p-4'>
<div className='space-y-0.5 pe-4'>
<FormLabel className='text-base'>
{sectionInfo.title}
</FormLabel>
<SettingsSwitchItem>
<SettingsSwitchContent>
<FormLabel>{sectionInfo.title}</FormLabel>
<FormDescription>
{sectionInfo.description}
</FormDescription>
</div>
</SettingsSwitchContent>
<FormControl>
<Switch
checked={Boolean(field.value)}
onCheckedChange={field.onChange}
/>
</FormControl>
</FormItem>
</SettingsSwitchItem>
)}
/>
<div className='mt-4 grid gap-4 md:grid-cols-2'>
<SettingsControlChildren className='grid gap-3 md:grid-cols-2'>
{modules.map(([moduleKey]) => {
const moduleInfo = moduleMeta[sectionKey]?.[moduleKey] ?? {
title: toTitleCase(moduleKey),
@@ -231,15 +237,13 @@ export function SidebarModulesSection({
// eslint-disable-next-line @typescript-eslint/no-explicit-any
name={`${sectionKey}.${moduleKey}` as any}
render={({ field }) => (
<FormItem className='flex flex-row items-start justify-between rounded-lg border p-4'>
<div className='space-y-0.5 pe-4'>
<FormLabel className='text-base'>
{moduleInfo.title}
</FormLabel>
<SettingsSwitchItem className='border-b-0 py-2'>
<SettingsSwitchContent>
<FormLabel>{moduleInfo.title}</FormLabel>
<FormDescription>
{moduleInfo.description}
</FormDescription>
</div>
</SettingsSwitchContent>
<FormControl>
<Switch
checked={Boolean(field.value)}
@@ -250,27 +254,16 @@ export function SidebarModulesSection({
}
/>
</FormControl>
</FormItem>
</SettingsSwitchItem>
)}
/>
)
})}
</div>
</div>
</SettingsControlChildren>
</SettingsControlGroup>
)
})}
<div className='flex flex-wrap gap-3'>
<Button type='button' variant='outline' onClick={resetToDefault}>
{t('Reset to default')}
</Button>
<Button type='submit' disabled={updateOption.isPending}>
{updateOption.isPending
? t('Saving...')
: t('Save sidebar modules')}
</Button>
</div>
</form>
</SettingsForm>
</Form>
</SettingsSection>
)
web/default/src/features/system-settings/maintenance/update-checker-section.tsx
Vendored
+1 -4
View File
@@ -110,10 +110,7 @@ export function UpdateCheckerSection({
return (
<>
<SettingsSection
title={t('System maintenance')}
description={t('Review current version and fetch release notes.')}
>
<SettingsSection title={t('System maintenance')}>
<div className='space-y-6'>
<div className='grid gap-4 md:grid-cols-2'>
<div className='rounded-lg border p-4'>