feat(ui): add system settings to sidebar and unhide frontend theme switcher

- Add System Settings entry to Admin sidebar group with Settings icon
- Register /system-settings URL mapping in sidebar config
- Remove 3-click hidden unlock from Frontend Theme setting, making it
  directly visible in System Information section

web/default/src/features/system-settings/general/system-info-section.tsx

@@ -3,7 +3,6 @@ import type { Resolver } from 'react-hook-form'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { RotateCcw } from 'lucide-react'
 import { useTranslation } from 'react-i18next'
-import { useHiddenClickUnlock } from '@/hooks/use-hidden-click-unlock'
 import { Button } from '@/components/ui/button'
 import {
   Form,
@@ -60,7 +59,6 @@ function normalizeValue(value: unknown): string {
 export function SystemInfoSection({ defaultValues }: SystemInfoSectionProps) {
   const { t } = useTranslation()
   const updateOption = useUpdateOption()
-  const frontendThemeUnlock = useHiddenClickUnlock({ requiredClicks: 3 })
 
   const normalizedDefaults: SystemInfoFormValues = {
     theme: {
@@ -127,47 +125,41 @@ export function SystemInfoSection({ defaultValues }: SystemInfoSectionProps) {
 
       <SettingsSection
         title={t('System Information')}
-        titleProps={{
-          className: 'cursor-pointer select-none',
-          onClick: frontendThemeUnlock.handleClick,
-        }}
         description={t('Configure basic system information and branding')}
       >
         <Form {...form}>
           <form onSubmit={handleSubmit} className='space-y-6'>
             <FormDirtyIndicator isDirty={isDirty} />
-            {frontendThemeUnlock.unlocked && (
-              <FormField
-                control={form.control}
-                name='theme.frontend'
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>{t('Frontend Theme')}</FormLabel>
-                    <Select onValueChange={field.onChange} value={field.value}>
-                      <FormControl>
-                        <SelectTrigger className='w-full'>
-                          <SelectValue />
-                        </SelectTrigger>
-                      </FormControl>
-                      <SelectContent>
-                        <SelectItem value='default'>
-                          {t('Default (New Frontend)')}
-                        </SelectItem>
-                        <SelectItem value='classic'>
-                          {t('Classic (Legacy Frontend)')}
-                        </SelectItem>
-                      </SelectContent>
-                    </Select>
-                    <FormDescription>
-                      {t(
-                        'Switch between the new frontend and the classic frontend. Changes take effect after page reload.'
-                      )}
-                    </FormDescription>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-            )}
+            <FormField
+              control={form.control}
+              name='theme.frontend'
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>{t('Frontend Theme')}</FormLabel>
+                  <Select onValueChange={field.onChange} value={field.value}>
+                    <FormControl>
+                      <SelectTrigger className='w-full'>
+                        <SelectValue />
+                      </SelectTrigger>
+                    </FormControl>
+                    <SelectContent>
+                      <SelectItem value='default'>
+                        {t('Default (New Frontend)')}
+                      </SelectItem>
+                      <SelectItem value='classic'>
+                        {t('Classic (Legacy Frontend)')}
+                      </SelectItem>
+                    </SelectContent>
+                  </Select>
+                  <FormDescription>
+                    {t(
+                      'Switch between the new frontend and the classic frontend. Changes take effect after page reload.'
+                    )}
+                  </FormDescription>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
 
             <FormField
               control={form.control}

web/default/src/hooks/use-sidebar-config.ts

@@ -70,6 +70,8 @@ const URL_TO_CONFIG_MAP: Record<string, { section: string; module: string }> = {
   '/users': { section: 'admin', module: 'user' },
   '/redemption-codes': { section: 'admin', module: 'redemption' },
   '/subscriptions': { section: 'admin', module: 'subscription' },
+  '/system-settings': { section: 'admin', module: 'setting' },
+  '/system-settings/general': { section: 'admin', module: 'setting' },
 }
 
 /**

web/default/src/hooks/use-sidebar-data.ts

@@ -14,6 +14,7 @@ import {
   MessageSquare,
   CreditCard,
   ListTodo,
+  Settings,
 } from 'lucide-react'
 import { useTranslation } from 'react-i18next'
 import { WORKSPACE_IDS } from '@/components/layout/lib/workspace-registry'
@@ -120,6 +121,12 @@ export function useSidebarData(): SidebarData {
             url: '/subscriptions',
             icon: CreditCard,
           },
+          {
+            title: t('System Settings'),
+            url: '/system-settings/general',
+            activeUrls: ['/system-settings'],
+            icon: Settings,
+          },
         ],
       },
     ],