✨ refactor: system settings UI for consistent, compact layouts

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.

web/default/src/features/system-settings/general/channel-affinity/index.tsx

@@ -31,7 +31,6 @@ import {
 import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
 import { Separator } from '@/components/ui/separator'
-import { Switch } from '@/components/ui/switch'
 import {
   Table,
   TableBody,
@@ -43,6 +42,8 @@ import {
 import { Textarea } from '@/components/ui/textarea'
 import { ConfirmDialog } from '@/components/confirm-dialog'
 import { StatusBadge } from '@/components/status-badge'
+import { SettingsSwitchField } from '../../components/settings-form-layout'
+import { SettingsPageActionsPortal } from '../../components/settings-page-context'
 import { SettingsSection } from '../../components/settings-section'
 import { useUpdateOption } from '../../hooks/use-update-option'
 import { getCacheStats, clearAllCache, clearRuleCache } from './api'
@@ -333,12 +334,7 @@ export function ChannelAffinitySection(props: Props) {
 
   return (
     <>
-      <SettingsSection
-        title={t('Channel Affinity')}
-        description={t(
-          'Prioritize reusing the last successful channel based on keys extracted from request context (sticky routing)'
-        )}
-      >
+      <SettingsSection title={t('Channel Affinity')}>
         <Alert>
           <AlertDescription className='text-xs'>
             {t(
@@ -349,10 +345,12 @@ export function ChannelAffinitySection(props: Props) {
 
         {/* Basic Settings */}
         <div className='grid grid-cols-1 gap-4 md:grid-cols-3'>
-          <div className='flex items-center gap-2'>
-            <Switch checked={enabled} onCheckedChange={setEnabled} />
-            <Label>{t('Enable')}</Label>
-          </div>
+          <SettingsSwitchField
+            checked={enabled}
+            onCheckedChange={setEnabled}
+            label={t('Enable')}
+            className='border-b-0 py-0'
+          />
           <div className='grid gap-1.5'>
             <Label>{t('Max Entries')}</Label>
             <Input
@@ -373,23 +371,18 @@ export function ChannelAffinitySection(props: Props) {
           </div>
         </div>
 
-        <div className='flex items-center gap-2'>
-          <Switch
-            checked={switchOnSuccess}
-            onCheckedChange={setSwitchOnSuccess}
-          />
-          <Label>{t('Switch affinity on success')}</Label>
-          <span className='text-muted-foreground text-xs'>
-            {t(
-              'If the affinity channel fails and retry succeeds on another channel, update affinity to the successful channel.'
-            )}
-          </span>
-        </div>
+        <SettingsSwitchField
+          checked={switchOnSuccess}
+          onCheckedChange={setSwitchOnSuccess}
+          label={t('Switch affinity on success')}
+          description={t(
+            'If the affinity channel fails and retry succeeds on another channel, update affinity to the successful channel.'
+          )}
+        />
 
         <Separator />
 
-        {/* Toolbar */}
-        <div className='flex flex-wrap items-center gap-2'>
+        <SettingsPageActionsPortal>
           <Button
             variant={editMode === 'visual' ? 'default' : 'outline'}
             size='sm'
@@ -472,7 +465,7 @@ export function ChannelAffinitySection(props: Props) {
               {cacheStats.cache_capacity}
             </span>
           )}
-        </div>
+        </SettingsPageActionsPortal>
 
         {/* Rules Table or JSON Editor */}
         {editMode === 'visual' ? (

web/default/src/features/system-settings/general/channel-affinity/rule-editor-dialog.tsx

@@ -45,8 +45,8 @@ import {
   SelectValue,
 } from '@/components/ui/select'
 import { Separator } from '@/components/ui/separator'
-import { Switch } from '@/components/ui/switch'
 import { Textarea } from '@/components/ui/textarea'
+import { SettingsSwitchField } from '../../components/settings-form-layout'
 import { RULE_TEMPLATES } from './constants'
 import type { AffinityRule, KeySource } from './types'
 
@@ -264,13 +264,11 @@ export function RuleEditorDialog(props: Props) {
             </div>
           </div>
 
-          <div className='flex items-center gap-2'>
-            <Switch
-              checked={form.watch('skip_retry_on_failure')}
-              onCheckedChange={(v) => form.setValue('skip_retry_on_failure', v)}
-            />
-            <Label>{t('Skip retry on failure')}</Label>
-          </div>
+          <SettingsSwitchField
+            checked={form.watch('skip_retry_on_failure')}
+            onCheckedChange={(v) => form.setValue('skip_retry_on_failure', v)}
+            label={t('Skip retry on failure')}
+          />
 
           <Separator />
 
@@ -415,34 +413,29 @@ export function RuleEditorDialog(props: Props) {
                 />
               </div>
 
-              <div className='grid grid-cols-3 gap-3'>
-                <div className='flex items-center gap-2'>
-                  <Switch
-                    checked={form.watch('include_using_group')}
-                    onCheckedChange={(v) =>
-                      form.setValue('include_using_group', v)
-                    }
-                  />
-                  <Label className='text-xs'>{t('Include Group')}</Label>
-                </div>
-                <div className='flex items-center gap-2'>
-                  <Switch
-                    checked={form.watch('include_model_name')}
-                    onCheckedChange={(v) =>
-                      form.setValue('include_model_name', v)
-                    }
-                  />
-                  <Label className='text-xs'>{t('Include Model')}</Label>
-                </div>
-                <div className='flex items-center gap-2'>
-                  <Switch
-                    checked={form.watch('include_rule_name')}
-                    onCheckedChange={(v) =>
-                      form.setValue('include_rule_name', v)
-                    }
-                  />
-                  <Label className='text-xs'>{t('Include Rule Name')}</Label>
-                </div>
+              <div className='grid gap-3 sm:grid-cols-3'>
+                <SettingsSwitchField
+                  checked={form.watch('include_using_group')}
+                  onCheckedChange={(v) =>
+                    form.setValue('include_using_group', v)
+                  }
+                  label={t('Include Group')}
+                  className='border-b-0 py-0'
+                />
+                <SettingsSwitchField
+                  checked={form.watch('include_model_name')}
+                  onCheckedChange={(v) =>
+                    form.setValue('include_model_name', v)
+                  }
+                  label={t('Include Model')}
+                  className='border-b-0 py-0'
+                />
+                <SettingsSwitchField
+                  checked={form.watch('include_rule_name')}
+                  onCheckedChange={(v) => form.setValue('include_rule_name', v)}
+                  label={t('Include Rule Name')}
+                  className='border-b-0 py-0'
+                />
               </div>
             </CollapsibleContent>
           </Collapsible>