@svadmin/ui 0.17.0 → 0.18.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@svadmin/ui",
-  "version": "0.17.0",
+  "version": "0.18.0",
   "description": "Pre-built admin UI components — AdminApp, AutoTable, AutoForm, Sidebar, Layout",
   "type": "module",
   "sideEffects": [

package/src/components/AboutSettings.svelte

@@ -0,0 +1,106 @@
+<script lang="ts">
+  import { t } from '@svadmin/core/i18n';
+  import { getResources, getDataProviderNames } from '@svadmin/core';
+  import { getLocale } from '@svadmin/core/i18n';
+  import { getResolvedTheme, getColorTheme } from '@svadmin/core';
+  import * as Card from './ui/card/index.js';
+  import { Badge } from './ui/badge/index.js';
+  import { Info, Database, Globe, Palette, Layers } from 'lucide-svelte';
+
+  const resources = getResources();
+  const providerNames = getDataProviderNames();
+
+  const version = '__SVADMIN_VERSION__'; // replaced at build time or shown as-is
+</script>
+
+<div class="space-y-6">
+  <div>
+    <h2 class="text-xl font-semibold text-foreground">{t('settings.about')}</h2>
+  </div>
+
+  <!-- Version -->
+  <Card.Card>
+    <Card.CardHeader class="pb-3">
+      <Card.CardTitle class="text-base flex items-center gap-2">
+        <Info class="h-4 w-4 text-muted-foreground" />
+        svadmin
+      </Card.CardTitle>
+    </Card.CardHeader>
+    <Card.CardContent>
+      <div class="grid gap-4 text-sm">
+        <div class="flex items-center justify-between">
+          <span class="text-muted-foreground">{t('settings.version')}</span>
+          <Badge variant="secondary" class="font-mono text-xs">{version}</Badge>
+        </div>
+      </div>
+    </Card.CardContent>
+  </Card.Card>
+
+  <!-- Registered Resources -->
+  <Card.Card>
+    <Card.CardHeader class="pb-3">
+      <Card.CardTitle class="text-base flex items-center gap-2">
+        <Layers class="h-4 w-4 text-muted-foreground" />
+        {t('settings.registeredResources')}
+      </Card.CardTitle>
+    </Card.CardHeader>
+    <Card.CardContent>
+      <div class="flex flex-wrap gap-2">
+        {#each resources as resource}
+          <Badge variant="outline" class="font-mono text-xs">{resource.name}</Badge>
+        {/each}
+        {#if resources.length === 0}
+          <p class="text-sm text-muted-foreground">—</p>
+        {/if}
+      </div>
+    </Card.CardContent>
+  </Card.Card>
+
+  <!-- Data Providers -->
+  <Card.Card>
+    <Card.CardHeader class="pb-3">
+      <Card.CardTitle class="text-base flex items-center gap-2">
+        <Database class="h-4 w-4 text-muted-foreground" />
+        {t('settings.dataProvider')}
+      </Card.CardTitle>
+    </Card.CardHeader>
+    <Card.CardContent>
+      <div class="flex flex-wrap gap-2">
+        {#each providerNames as name}
+          <Badge variant="outline" class="font-mono text-xs">{name}</Badge>
+        {/each}
+      </div>
+    </Card.CardContent>
+  </Card.Card>
+
+  <!-- Current Environment -->
+  <Card.Card>
+    <Card.CardHeader class="pb-3">
+      <Card.CardTitle class="text-base flex items-center gap-2">
+        <Globe class="h-4 w-4 text-muted-foreground" />
+        {t('settings.currentEnvironment')}
+      </Card.CardTitle>
+    </Card.CardHeader>
+    <Card.CardContent>
+      <div class="grid gap-3 text-sm">
+        <div class="flex items-center justify-between">
+          <span class="text-muted-foreground">{t('settings.language')}</span>
+          <span class="font-mono text-xs">{getLocale()}</span>
+        </div>
+        <div class="h-px bg-border"></div>
+        <div class="flex items-center justify-between">
+          <span class="text-muted-foreground">{t('settings.themeMode')}</span>
+          <span class="font-mono text-xs">{getResolvedTheme()}</span>
+        </div>
+        <div class="h-px bg-border"></div>
+        <div class="flex items-center justify-between">
+          <span class="text-muted-foreground flex items-center gap-1.5">
+            <Palette class="h-3.5 w-3.5" />
+            {t('settings.colorAccent')}
+          </span>
+          <span class="font-mono text-xs">{getColorTheme()}</span>
+        </div>
+      </div>
+    </Card.CardContent>
+  </Card.Card>
+</div>

package/src/components/AdminApp.svelte

@@ -6,6 +6,7 @@
   import { setDataProvider, setAuthProvider, setResources, setLocale, setTheme, setRouterProvider, getAuthProvider, createHashRouterProvider, configureTheme } from '@svadmin/core';
   import { t } from '@svadmin/core/i18n';
   import { navigate } from '@svadmin/core/router';
+  import { currentPath } from '@svadmin/core/router';
   import { QueryClient, QueryClientProvider } from '@tanstack/svelte-query';
   import { setComponentRegistry, type ComponentRegistry } from '../component-registry.svelte.js';
   import Layout from './Layout.svelte';
@@ -21,6 +22,7 @@
   import DevTools from './DevTools.svelte';
   import Sidebar from './Sidebar.svelte';
   import Header from './Header.svelte';
+  import SettingsPage from './SettingsPage.svelte';
   import { Button } from './ui/button/index.js';
   import { Input } from './ui/input/index.js';
   import { Badge } from './ui/badge/index.js';
@@ -149,7 +151,9 @@
     <Layout {title} {menu}>
       {#key route + (params.resource ?? '') + (params.id ?? '')}
       <div class="svadmin-page-enter">
-      {#if route === '/'}
+      {#if currentPath().startsWith('/settings')}
+        <SettingsPage />
+      {:else if route === '/' || route === ''}
         {#if dashboard}
           {@render dashboard()}
         {:else}

package/src/components/AppearanceSettings.svelte

@@ -0,0 +1,183 @@
+<script lang="ts">
+  import { t } from '@svadmin/core/i18n';
+  import { getTheme, setTheme, getResolvedTheme, colorThemes, getColorTheme, setColorTheme, getColorPresets } from '@svadmin/core';
+  import { getLocale, setLocale, getAvailableLocales } from '@svadmin/core/i18n';
+  import * as Card from './ui/card/index.js';
+  import { Button } from './ui/button/index.js';
+  import { Sun, Moon, Monitor, Check } from 'lucide-svelte';
+
+  // Theme mode
+  const themeOptions = [
+    { value: 'light' as const, icon: Sun, label: 'settings.light' },
+    { value: 'dark' as const, icon: Moon, label: 'settings.dark' },
+    { value: 'system' as const, icon: Monitor, label: 'settings.systemTheme' },
+  ];
+
+  let currentTheme = $derived(getTheme());
+  let currentColor = $derived(getColorTheme());
+  let currentLocale = $derived(getLocale());
+  const availableLocales = getAvailableLocales();
+  const presets = getColorPresets();
+
+  // Sidebar density
+  const DENSITY_KEY = 'svadmin-sidebar-density';
+  let density = $state<'compact' | 'standard'>(
+    (typeof localStorage !== 'undefined' ? localStorage.getItem(DENSITY_KEY) : null) as 'compact' | 'standard' ?? 'standard'
+  );
+
+  function setDensity(d: 'compact' | 'standard') {
+    density = d;
+    if (typeof localStorage !== 'undefined') localStorage.setItem(DENSITY_KEY, d);
+  }
+
+  // Page size
+  const PAGE_SIZE_KEY = 'svadmin-default-page-size';
+  const pageSizeOptions = [10, 20, 50];
+  let pageSize = $state<number>(
+    typeof localStorage !== 'undefined' ? parseInt(localStorage.getItem(PAGE_SIZE_KEY) ?? '10', 10) : 10
+  );
+
+  function setPageSize(size: number) {
+    pageSize = size;
+    if (typeof localStorage !== 'undefined') localStorage.setItem(PAGE_SIZE_KEY, String(size));
+  }
+
+  // Locale display names
+  const localeNames: Record<string, string> = {
+    'zh-CN': '中文（简体）',
+    'en': 'English',
+    'ja': '日本語',
+    'ko': '한국어',
+  };
+</script>
+
+<div class="space-y-6">
+  <div>
+    <h2 class="text-xl font-semibold text-foreground">{t('settings.appearance')}</h2>
+    <p class="text-sm text-muted-foreground mt-1">{t('settings.settingsDescription')}</p>
+  </div>
+
+  <!-- Theme Mode -->
+  <Card.Card>
+    <Card.CardHeader class="pb-3">
+      <Card.CardTitle class="text-base">{t('settings.themeMode')}</Card.CardTitle>
+    </Card.CardHeader>
+    <Card.CardContent>
+      <div class="grid grid-cols-3 gap-3">
+        {#each themeOptions as opt}
+          {@const active = currentTheme === opt.value}
+          <button
+            class="relative flex flex-col items-center gap-2 rounded-xl border-2 p-4 transition-all duration-200
+              {active
+                ? 'border-primary bg-primary/5 shadow-sm'
+                : 'border-border hover:border-muted-foreground/30 hover:bg-accent/50'}"
+            onclick={() => setTheme(opt.value)}
+          >
+            {#if active}
+              <div class="absolute top-2 right-2">
+                <Check class="h-3.5 w-3.5 text-primary" />
+              </div>
+            {/if}
+            <div class="h-10 w-10 rounded-lg flex items-center justify-center
+              {active ? 'bg-primary/10 text-primary' : 'bg-muted text-muted-foreground'}">
+              <opt.icon class="h-5 w-5" />
+            </div>
+            <span class="text-xs font-medium {active ? 'text-primary' : 'text-muted-foreground'}">
+              {t(opt.label)}
+            </span>
+          </button>
+        {/each}
+      </div>
+    </Card.CardContent>
+  </Card.Card>
+
+  <!-- Color Accent -->
+  <Card.Card>
+    <Card.CardHeader class="pb-3">
+      <Card.CardTitle class="text-base">{t('settings.colorAccent')}</Card.CardTitle>
+    </Card.CardHeader>
+    <Card.CardContent>
+      <div class="flex flex-wrap gap-3">
+        {#each presets as preset}
+          {@const active = currentColor === preset.name}
+          <button
+            class="group relative h-9 w-9 rounded-full transition-all duration-200 hover:scale-110
+              {active ? 'ring-2 ring-offset-2 ring-offset-background scale-110' : 'opacity-70 hover:opacity-100'}"
+            style="background-color: {preset.color}; {active ? `--tw-ring-color: ${preset.color}` : ''}"
+            onclick={() => setColorTheme(preset.name as Parameters<typeof setColorTheme>[0])}
+            title={preset.label}
+          >
+            {#if active}
+              <Check class="h-4 w-4 text-white absolute inset-0 m-auto drop-shadow-sm" />
+            {/if}
+          </button>
+        {/each}
+      </div>
+    </Card.CardContent>
+  </Card.Card>
+
+  <!-- Interface -->
+  <Card.Card>
+    <Card.CardHeader class="pb-3">
+      <Card.CardTitle class="text-base">{t('settings.interface')}</Card.CardTitle>
+    </Card.CardHeader>
+    <Card.CardContent class="space-y-5">
+      <!-- Language -->
+      <div class="flex items-center justify-between">
+        <div>
+          <p class="text-sm font-medium text-foreground">{t('settings.language')}</p>
+          <p class="text-xs text-muted-foreground">{localeNames[currentLocale] ?? currentLocale}</p>
+        </div>
+        <select
+          class="h-9 rounded-md border border-input bg-background px-3 text-sm ring-offset-background
+            focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
+          value={currentLocale}
+          onchange={(e) => setLocale((e.target as HTMLSelectElement).value)}
+        >
+          {#each availableLocales as loc}
+            <option value={loc}>{localeNames[loc] ?? loc}</option>
+          {/each}
+        </select>
+      </div>
+
+      <div class="h-px bg-border"></div>
+
+      <!-- Sidebar Density -->
+      <div class="flex items-center justify-between">
+        <div>
+          <p class="text-sm font-medium text-foreground">{t('settings.sidebarDensity')}</p>
+        </div>
+        <div class="flex rounded-lg border border-input overflow-hidden">
+          <button
+            class="px-3 py-1.5 text-xs font-medium transition-colors
+              {density === 'compact' ? 'bg-primary text-primary-foreground' : 'bg-background text-muted-foreground hover:bg-accent'}"
+            onclick={() => setDensity('compact')}
+          >{t('settings.compact')}</button>
+          <button
+            class="px-3 py-1.5 text-xs font-medium transition-colors
+              {density === 'standard' ? 'bg-primary text-primary-foreground' : 'bg-background text-muted-foreground hover:bg-accent'}"
+            onclick={() => setDensity('standard')}
+          >{t('settings.standard')}</button>
+        </div>
+      </div>
+
+      <div class="h-px bg-border"></div>
+
+      <!-- Default Page Size -->
+      <div class="flex items-center justify-between">
+        <div>
+          <p class="text-sm font-medium text-foreground">{t('settings.defaultPageSize')}</p>
+        </div>
+        <div class="flex rounded-lg border border-input overflow-hidden">
+          {#each pageSizeOptions as size}
+            <button
+              class="px-3 py-1.5 text-xs font-mono font-medium transition-colors
+                {pageSize === size ? 'bg-primary text-primary-foreground' : 'bg-background text-muted-foreground hover:bg-accent'}"
+              onclick={() => setPageSize(size)}
+            >{size}</button>
+          {/each}
+        </div>
+      </div>
+    </Card.CardContent>
+  </Card.Card>
+</div>

package/src/components/AutoTable.svelte

@@ -77,7 +77,8 @@
   const urlState = readURLState();
 
   // Snapshot resource values for initial state (untrack to avoid reactive tracking)
-  const initPageSize = untrack(() => resource.pageSize ?? 10);
+  const storedPageSize = typeof localStorage !== 'undefined' ? parseInt(localStorage.getItem('svadmin-default-page-size') ?? '', 10) : NaN;
+  const initPageSize = untrack(() => resource.pageSize ?? (isNaN(storedPageSize) ? 10 : storedPageSize));
   const initDefaultSort = untrack(() => resource.defaultSort);
 
   let pagination = $state<{ current: number; pageSize: number }>(untrack(() => externalPagination ?? {

package/src/components/ProfilePage.svelte

@@ -1,16 +1,72 @@
 <script lang="ts">
-  import { useGetIdentity, useUpdatePassword } from '@svadmin/core';
+  import { useGetIdentity, useUpdatePassword, getAuthProvider } from '@svadmin/core';
   import { t } from '@svadmin/core/i18n';
   import { Button } from './ui/button/index.js';
   import { Label } from './ui/label/index.js';
+  import { Input } from './ui/input/index.js';
   import * as Card from './ui/card/index.js';
   import * as Alert from './ui/alert/index.js';
   import PasswordInput from './PasswordInput.svelte';
-  import { User, Mail, Lock, Loader2, AlertCircle, CheckCircle } from 'lucide-svelte';
+  import { User, Mail, Lock, Loader2, AlertCircle, CheckCircle, Camera } from 'lucide-svelte';
 
   const identity = useGetIdentity();
   const updatePw = useUpdatePassword();
 
+  // Check if auth provider supports updateProfile
+  let authProvider: ReturnType<typeof getAuthProvider> | null = null;
+  try { authProvider = getAuthProvider(); } catch { /* no auth */ }
+  const canUpdateProfile = !!authProvider?.updateProfile;
+
+  // Profile edit state
+  let editingProfile = $state(false);
+  let editName = $state('');
+  let profileSaving = $state(false);
+  let profileSuccess = $state(false);
+  let profileError = $state('');
+
+  function startEditProfile() {
+    editName = identity.data?.name ?? '';
+    editingProfile = true;
+    profileSuccess = false;
+    profileError = '';
+  }
+
+  async function saveProfile() {
+    if (!authProvider?.updateProfile) return;
+    profileSaving = true;
+    profileError = '';
+    try {
+      const result = await authProvider.updateProfile({ name: editName });
+      if (result.success) {
+        profileSuccess = true;
+        editingProfile = false;
+        identity.refetch();
+      } else {
+        profileError = result.error?.message ?? t('common.operationFailed');
+      }
+    } catch (e) {
+      profileError = (e as Error).message;
+    } finally {
+      profileSaving = false;
+    }
+  }
+
+  // Avatar upload
+  let avatarUploading = $state(false);
+  let fileInput = $state<HTMLInputElement>(null!);
+
+  async function handleAvatarChange(e: Event) {
+    const file = (e.target as HTMLInputElement).files?.[0];
+    if (!file || !authProvider?.updateProfile) return;
+    avatarUploading = true;
+    try {
+      const result = await authProvider.updateProfile({ avatar: file });
+      if (result.success) identity.refetch();
+    } finally {
+      avatarUploading = false;
+    }
+  }
+
   // Password change form
   let currentPassword = $state('');
   let newPassword = $state('');
@@ -49,12 +105,16 @@
   );
 </script>
 
-<div class="max-w-2xl mx-auto space-y-6 p-4 sm:p-6">
+<div class="space-y-6">
+  <div>
+    <h2 class="text-xl font-semibold text-foreground">{t('profile.title')}</h2>
+  </div>
+
   <!-- Profile Info -->
   <Card.Card>
     <Card.CardHeader>
-      <Card.CardTitle class="flex items-center gap-2">
-        <User class="h-5 w-5" />
+      <Card.CardTitle class="flex items-center gap-2 text-base">
+        <User class="h-4 w-4 text-muted-foreground" />
         {t('profile.title')}
       </Card.CardTitle>
     </Card.CardHeader>
@@ -65,9 +125,16 @@
           {t('common.loading')}
         </div>
       {:else if identity.data}
+        {#if profileSuccess}
+          <Alert.Root class="border-success/30 bg-success/5 text-success mb-4">
+            <CheckCircle class="h-4 w-4" />
+            <Alert.Description>{t('common.updateSuccess')}</Alert.Description>
+          </Alert.Root>
+        {/if}
+
         <div class="flex items-start gap-6">
           <!-- Avatar -->
-          <div class="shrink-0">
+          <div class="shrink-0 relative group">
             {#if identity.data.avatar}
               <img
                 src={identity.data.avatar}
@@ -79,30 +146,77 @@
                 {initials}
               </div>
             {/if}
+            {#if canUpdateProfile}
+              <button
+                class="absolute inset-0 rounded-lg bg-black/50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity cursor-pointer"
+                onclick={() => fileInput.click()}
+                disabled={avatarUploading}
+              >
+                {#if avatarUploading}
+                  <Loader2 class="h-5 w-5 text-white animate-spin" />
+                {:else}
+                  <Camera class="h-5 w-5 text-white" />
+                {/if}
+              </button>
+              <input
+                bind:this={fileInput}
+                type="file"
+                accept="image/*"
+                class="hidden"
+                onchange={handleAvatarChange}
+              />
+            {/if}
           </div>
 
           <!-- Info -->
           <div class="space-y-3 flex-1 min-w-0">
-            <div>
-              <Label class="text-xs text-muted-foreground">{t('profile.name')}</Label>
-              <p class="text-lg font-semibold truncate">{identity.data.name ?? '—'}</p>
-            </div>
-
-            {#if identity.data.email || identity.data.username}
-              <div class="flex items-center gap-2 text-sm text-muted-foreground">
-                {#if identity.data.email}
-                  <Mail class="h-4 w-4 shrink-0" />
-                {:else}
-                  <User class="h-4 w-4 shrink-0" />
+            {#if editingProfile}
+              <div class="space-y-3 max-w-sm">
+                <div>
+                  <Label for="edit-name" class="text-xs text-muted-foreground">{t('profile.name')}</Label>
+                  <Input id="edit-name" bind:value={editName} class="mt-1" />
+                </div>
+                {#if profileError}
+                  <p class="text-xs text-destructive">{profileError}</p>
                 {/if}
-                <span class="truncate">{identity.data.email || identity.data.username}</span>
+                <div class="flex gap-2">
+                  <Button size="sm" onclick={saveProfile} disabled={profileSaving}>
+                    {#if profileSaving}<Loader2 class="h-3 w-3 animate-spin mr-1" />{/if}
+                    {t('common.save')}
+                  </Button>
+                  <Button size="sm" variant="outline" onclick={() => { editingProfile = false; }}>
+                    {t('common.cancel')}
+                  </Button>
+                </div>
               </div>
-            {/if}
-
-            {#if identity.data.id}
-              <div class="text-xs text-muted-foreground/60 font-mono">
-                ID: {identity.data.id}
+            {:else}
+              <div>
+                <Label class="text-xs text-muted-foreground">{t('profile.name')}</Label>
+                <p class="text-lg font-semibold truncate">{identity.data.name ?? '—'}</p>
               </div>
+
+              {#if identity.data.email || identity.data.username}
+                <div class="flex items-center gap-2 text-sm text-muted-foreground">
+                  {#if identity.data.email}
+                    <Mail class="h-4 w-4 shrink-0" />
+                  {:else}
+                    <User class="h-4 w-4 shrink-0" />
+                  {/if}
+                  <span class="truncate">{identity.data.email || identity.data.username}</span>
+                </div>
+              {/if}
+
+              {#if identity.data.id}
+                <div class="text-xs text-muted-foreground/60 font-mono">
+                  ID: {identity.data.id}
+                </div>
+              {/if}
+
+              {#if canUpdateProfile}
+                <Button size="sm" variant="outline" onclick={startEditProfile}>
+                  {t('common.edit')}
+                </Button>
+              {/if}
             {/if}
           </div>
         </div>
@@ -115,8 +229,8 @@
   <!-- Change Password -->
   <Card.Card>
     <Card.CardHeader>
-      <Card.CardTitle class="flex items-center gap-2">
-        <Lock class="h-5 w-5" />
+      <Card.CardTitle class="flex items-center gap-2 text-base">
+        <Lock class="h-4 w-4 text-muted-foreground" />
         {t('profile.changePassword')}
       </Card.CardTitle>
     </Card.CardHeader>

package/src/components/SettingsPage.svelte

@@ -0,0 +1,103 @@
+<script lang="ts">
+  import { t } from '@svadmin/core/i18n';
+  import { navigate } from '@svadmin/core/router';
+  import { currentPath } from '@svadmin/core/router';
+  import { User, Palette, Info } from 'lucide-svelte';
+  import ProfilePage from './ProfilePage.svelte';
+  import AppearanceSettings from './AppearanceSettings.svelte';
+  import AboutSettings from './AboutSettings.svelte';
+
+  const sections = [
+    {
+      group: 'settings.general',
+      items: [
+        { key: 'profile', path: '/settings/profile', icon: User, label: 'settings.profile' },
+        { key: 'appearance', path: '/settings/appearance', icon: Palette, label: 'settings.appearance' },
+      ],
+    },
+    {
+      group: 'settings.system',
+      items: [
+        { key: 'about', path: '/settings/about', icon: Info, label: 'settings.about' },
+      ],
+    },
+  ];
+
+  let activeKey = $derived.by(() => {
+    const path = currentPath();
+    if (path.includes('/settings/appearance')) return 'appearance';
+    if (path.includes('/settings/about')) return 'about';
+    return 'profile';
+  });
+
+  // Default redirect to profile
+  $effect(() => {
+    const path = currentPath();
+    if (path === '/settings') {
+      navigate('/settings/profile');
+    }
+  });
+</script>
+
+<div class="flex flex-col lg:flex-row gap-0 min-h-full">
+  <!-- Left sidebar navigation -->
+  <nav class="w-full lg:w-56 shrink-0 border-b lg:border-b-0 lg:border-r border-border bg-muted/30">
+    <!-- Mobile: horizontal scroll tabs -->
+    <div class="flex lg:hidden overflow-x-auto px-4 py-2 gap-1">
+      {#each sections as section}
+        {#each section.items as item}
+          {@const active = activeKey === item.key}
+          <button
+            class="flex items-center gap-2 px-3 py-2 text-sm font-medium rounded-md whitespace-nowrap transition-colors
+              {active ? 'bg-background text-foreground shadow-sm' : 'text-muted-foreground hover:text-foreground hover:bg-background/50'}"
+            onclick={() => navigate(item.path)}
+          >
+            <item.icon class="h-4 w-4" />
+            {t(item.label)}
+          </button>
+        {/each}
+      {/each}
+    </div>
+
+    <!-- Desktop: vertical nav with groups -->
+    <div class="hidden lg:block py-6 px-3 space-y-6">
+      <div class="px-3">
+        <h2 class="text-lg font-semibold text-foreground">{t('settings.title')}</h2>
+        <p class="text-xs text-muted-foreground mt-1">{t('settings.settingsDescription')}</p>
+      </div>
+      {#each sections as section}
+        <div>
+          <h3 class="px-3 mb-1 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground/60">
+            {t(section.group)}
+          </h3>
+          <div class="space-y-0.5">
+            {#each section.items as item}
+              {@const active = activeKey === item.key}
+              <button
+                class="flex w-full items-center gap-3 rounded-lg px-3 py-2 text-sm transition-all
+                  {active
+                    ? 'bg-primary/10 text-primary font-medium'
+                    : 'text-muted-foreground hover:bg-accent hover:text-accent-foreground'}"
+                onclick={() => navigate(item.path)}
+              >
+                <item.icon class="h-4 w-4 shrink-0" />
+                {t(item.label)}
+              </button>
+            {/each}
+          </div>
+        </div>
+      {/each}
+    </div>
+  </nav>
+
+  <!-- Right content area -->
+  <div class="flex-1 p-6 lg:p-8 max-w-3xl">
+    {#if activeKey === 'profile'}
+      <ProfilePage />
+    {:else if activeKey === 'appearance'}
+      <AppearanceSettings />
+    {:else if activeKey === 'about'}
+      <AboutSettings />
+    {/if}
+  </div>
+</div>

package/src/components/Sidebar.svelte

@@ -325,6 +325,9 @@
               <Moon class="h-4 w-4" />
             {/if}
           </TooltipButton>
+          <TooltipButton tooltip={t('settings.title')} variant="ghost" size="icon-sm" onclick={() => navigate('/settings')} class="text-sidebar-foreground/60 hover:text-sidebar-foreground">
+            <Settings class="h-4 w-4" />
+          </TooltipButton>
           <TooltipButton tooltip={t('common.logout')} variant="ghost" size="icon-sm" onclick={onLogout} class="text-sidebar-foreground/60 hover:text-destructive">
             <LogOut class="h-4 w-4" />
           </TooltipButton>

package/src/index.ts

@@ -59,6 +59,9 @@ export { default as KeyboardShortcuts } from "./components/KeyboardShortcuts.sve
 export { default as InlineEdit } from "./components/InlineEdit.svelte";
 export { default as VirtualTable } from "./components/VirtualTable.svelte";
 export { default as DraggableHeader } from "./components/DraggableHeader.svelte";
+export { default as SettingsPage } from "./components/SettingsPage.svelte";
+export { default as AppearanceSettings } from "./components/AppearanceSettings.svelte";
+export { default as AboutSettings } from "./components/AboutSettings.svelte";
 
 // Dashboard Charts (zero-dependency SVG)
 export { BarChart, LineChart, PieChart } from './components/charts/index.js';