@geminilight/mindos 0.6.38 → 0.6.40

package/_standalone/components/settings/AiTab.tsx

@@ -1,10 +1,12 @@
 'use client';
 
-import { useState, useRef, useCallback, useEffect } from 'react';
-import { AlertCircle, ChevronDown, Loader2, Sparkles, Bot, Monitor } from 'lucide-react';
+import { useState, useRef, useCallback, useEffect, useMemo } from 'react';
+import { AlertCircle, ChevronDown, Loader2, Sparkles, Bot, Monitor, ExternalLink } from 'lucide-react';
 import type { AiSettings, AgentSettings, ProviderConfig, SettingsData, AiTabProps } from './types';
 import { Field, Select, Input, EnvBadge, ApiKeyInput, Toggle, SettingCard, SettingRow } from './Primitives';
-import { useLocale } from '@/lib/LocaleContext';
+import { useLocale } from '@/lib/stores/locale-store';
+import { type ProviderId, PROVIDER_PRESETS, isProviderId, getApiKeyEnvVar, getDefaultBaseUrl } from '@/lib/agent/providers';
+import ProviderSelect from '@/components/shared/ProviderSelect';
 
 type TestState = 'idle' | 'testing' | 'ok' | 'error';
 type ErrorCode = 'auth_error' | 'model_not_found' | 'rate_limited' | 'network_error' | 'unknown';
@@ -27,16 +29,16 @@ function errorMessage(t: AiTabProps['t'], code?: ErrorCode): string {
 }
 
 export function AiTab({ data, updateAi, updateAgent, t }: AiTabProps) {
+  const { locale } = useLocale();
   const env = data.envOverrides ?? {};
   const envVal = data.envValues ?? {};
   const provider = data.ai.provider;
+  const preset = isProviderId(provider) ? PROVIDER_PRESETS[provider] : null;
 
-  // --- Test key state ---
   const [testResult, setTestResult] = useState<Record<string, TestResult>>({});
   const okTimerRef = useRef<ReturnType<typeof setTimeout>>(undefined);
   const prevProviderRef = useRef(provider);
 
-  // Reset test result when provider changes
   useEffect(() => {
     if (prevProviderRef.current !== provider) {
       prevProviderRef.current = provider;
@@ -45,16 +47,14 @@ export function AiTab({ data, updateAi, updateAgent, t }: AiTabProps) {
     }
   }, [provider]);
 
-  // Cleanup ok timer
   useEffect(() => () => { if (okTimerRef.current) clearTimeout(okTimerRef.current); }, []);
 
-  // Sync reconnectRetries to localStorage so AskContent can read it without fetching settings
   useEffect(() => {
     const v = data.agent?.reconnectRetries ?? 3;
     try { localStorage.setItem('mindos-reconnect-retries', String(v)); } catch (err) { console.warn("[AiTab] localStorage setItem reconnectRetries failed:", err); }
   }, [data.agent?.reconnectRetries]);
 
-  const handleTestKey = useCallback(async (providerName: 'anthropic' | 'openai') => {
+  const handleTestKey = useCallback(async (providerName: ProviderId) => {
     const prov = data.ai.providers?.[providerName] ?? {} as ProviderConfig;
     setTestResult(prev => ({ ...prev, [providerName]: { state: 'testing' } }));
 
@@ -62,7 +62,7 @@ export function AiTab({ data, updateAi, updateAgent, t }: AiTabProps) {
       const body: Record<string, string> = { provider: providerName };
       if (prov.apiKey) body.apiKey = prov.apiKey;
       if (prov.model) body.model = prov.model;
-      if (providerName === 'openai' && prov.baseUrl) body.baseUrl = prov.baseUrl;
+      if (prov.baseUrl) body.baseUrl = prov.baseUrl;
 
       const res = await fetch('/api/settings/test-key', {
         method: 'POST',
@@ -91,8 +91,7 @@ export function AiTab({ data, updateAi, updateAgent, t }: AiTabProps) {
     }
   }, [data.ai.providers]);
 
-  // Reset test result when key changes
-  const patchProviderWithReset = useCallback((name: 'anthropic' | 'openai', patch: Partial<ProviderConfig>) => {
+  const patchProvider = useCallback((name: ProviderId, patch: Partial<ProviderConfig>) => {
     if ('apiKey' in patch) {
       setTestResult(prev => ({ ...prev, [name]: { state: 'idle' } }));
     }
@@ -104,21 +103,23 @@ export function AiTab({ data, updateAi, updateAgent, t }: AiTabProps) {
     });
   }, [data.ai.providers, updateAi]);
 
-  function patchProvider(name: 'anthropic' | 'openai', patch: Partial<ProviderConfig>) {
-    patchProviderWithReset(name, patch);
-  }
-
-  const anthropic = data.ai.providers?.anthropic ?? { apiKey: '', model: '' };
-  const openai    = data.ai.providers?.openai    ?? { apiKey: '', model: '', baseUrl: '' };
-
-  const activeApiKey = provider === 'anthropic' ? anthropic.apiKey : openai.apiKey;
-  const activeEnvKey = provider === 'anthropic' ? env.ANTHROPIC_API_KEY : env.OPENAI_API_KEY;
-  const missingApiKey = !activeApiKey && !activeEnvKey;
+  const currentConfig = data.ai.providers?.[provider] ?? { apiKey: '', model: '', baseUrl: '' };
+  const envKeyName = preset ? getApiKeyEnvVar(provider) : undefined;
+  const activeApiKey = currentConfig.apiKey;
+  const activeEnvKey = envKeyName ? env[envKeyName] : false;
+  const hasFallbackKey = !!preset?.apiKeyFallback;
+  const missingApiKey = !activeApiKey && !activeEnvKey && !hasFallbackKey;
+
+  const configuredProviders = new Set(
+    Object.entries(data.ai.providers ?? {})
+      .filter(([id, cfg]) => (cfg && cfg.apiKey) || PROVIDER_PRESETS[id as ProviderId]?.apiKeyFallback)
+      .map(([id]) => id as ProviderId),
+  );
 
-  // Test button helper
-  const renderTestButton = (providerName: 'anthropic' | 'openai', hasKey: boolean, hasEnv: boolean) => {
+  const renderTestButton = (providerName: ProviderId, hasKey: boolean, hasEnv: boolean) => {
     const result = testResult[providerName] ?? { state: 'idle' as TestState };
-    const disabled = result.state === 'testing' || (!hasKey && !hasEnv);
+    const hasFallback = !!PROVIDER_PRESETS[providerName]?.apiKeyFallback;
+    const disabled = result.state === 'testing' || (!hasKey && !hasEnv && !hasFallback);
 
     return (
       <div className="flex items-center gap-2 mt-1.5">
@@ -150,95 +151,83 @@ export function AiTab({ data, updateAi, updateAgent, t }: AiTabProps) {
     );
   };
 
+  const displayName = preset ? (locale === 'zh' ? preset.nameZh : preset.name) : provider;
+
   return (
     <div className="space-y-4">
       {/* ── Card 1: AI Provider ── */}
       <SettingCard
         icon={<Sparkles size={15} />}
         title={t.settings.ai.provider}
-        description={provider === 'anthropic' ? 'Anthropic Claude' : 'OpenAI / compatible'}
+        description={displayName}
       >
-        {/* Provider toggle — two clickable mini-cards */}
-        <div className="flex gap-2">
-          {(['anthropic', 'openai'] as const).map(p => (
-            <button
-              key={p}
-              type="button"
-              onClick={() => updateAi({ provider: p })}
-              className={`flex-1 flex items-center gap-2.5 px-3.5 py-2.5 rounded-lg border transition-all ${
-                provider === p
-                  ? 'border-[var(--amber)] bg-[var(--amber-subtle)] shadow-sm'
-                  : 'border-border/50 hover:border-border hover:bg-muted/30'
-              }`}
-            >
-              <span className={`text-sm font-medium ${provider === p ? 'text-foreground' : 'text-muted-foreground'}`}>
-                {p === 'anthropic' ? 'Anthropic' : 'OpenAI'}
-              </span>
-              <EnvBadge overridden={env.AI_PROVIDER} />
-            </button>
-          ))}
-        </div>
+        <ProviderSelect
+          value={provider}
+          onChange={id => { if (id !== 'skip') updateAi({ provider: id }); }}
+          compact
+          configuredProviders={configuredProviders}
+        />
 
-        {/* Model + API Key */}
-        {provider === 'anthropic' ? (
-          <>
-            <Field label={<>{t.settings.ai.model} <EnvBadge overridden={env.ANTHROPIC_MODEL} /></>}>
-              <ModelInput
-                value={anthropic.model}
-                onChange={v => patchProvider('anthropic', { model: v })}
-                placeholder={envVal.ANTHROPIC_MODEL || 'claude-sonnet-4-6'}
-                provider="anthropic"
-                apiKey={anthropic.apiKey}
-                envKey={env.ANTHROPIC_API_KEY}
-                t={t}
-              />
-            </Field>
+        {/* Provider configuration fields */}
+        {preset && (
+          <div className="space-y-3 pt-3" style={{ borderTop: '1px solid var(--border)' }}>
+            {/* 1. API Key — most essential, enter first */}
             <Field
-              label={<>{t.settings.ai.apiKey} <EnvBadge overridden={env.ANTHROPIC_API_KEY} /></>}
-              hint={env.ANTHROPIC_API_KEY ? t.settings.ai.envFieldNote('ANTHROPIC_API_KEY') : t.settings.ai.keyHint}
+              label={<>{t.settings.ai.apiKey} {envKeyName && <EnvBadge overridden={env[envKeyName]} />}</>}
+              hint={activeEnvKey ? t.settings.ai.envFieldNote(envKeyName!) : hasFallbackKey ? t.settings.ai.keyOptionalHint : t.settings.ai.keyHint}
             >
               <ApiKeyInput
-                value={anthropic.apiKey}
-                onChange={v => patchProvider('anthropic', { apiKey: v })}
+                value={currentConfig.apiKey}
+                onChange={v => patchProvider(provider, { apiKey: v })}
               />
-              {renderTestButton('anthropic', !!anthropic.apiKey, !!env.ANTHROPIC_API_KEY)}
+              {preset.signupUrl && !currentConfig.apiKey && !activeEnvKey && (
+                <a
+                  href={preset.signupUrl}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="inline-flex items-center gap-1 text-xs mt-1.5 hover:underline"
+                  style={{ color: 'var(--amber)' }}
+                >
+                  <ExternalLink size={10} />
+                  {hasFallbackKey
+                    ? (locale === 'zh' ? `下载 ${preset.nameZh}` : `Download ${preset.name}`)
+                    : (locale === 'zh' ? `获取 ${preset.nameZh} API Key` : `Get ${preset.name} API Key`)}
+                </a>
+              )}
             </Field>
-          </>
-        ) : (
-          <>
-            <Field label={<>{t.settings.ai.model} <EnvBadge overridden={env.OPENAI_MODEL} /></>}>
+
+            {/* 2. Base URL — before Model so "List Models" uses the correct endpoint */}
+            {preset.supportsBaseUrl && (
+              <Field
+                label={t.settings.ai.baseUrl}
+                hint={t.settings.ai.baseUrlHint}
+              >
+                <Input
+                  value={currentConfig.baseUrl ?? ''}
+                  onChange={e => patchProvider(provider, { baseUrl: e.target.value })}
+                  placeholder={preset.fixedBaseUrl || getDefaultBaseUrl(provider) || 'https://api.openai.com/v1'}
+                />
+              </Field>
+            )}
+
+            {/* 3. Model — after Base URL so "List Models" queries the right endpoint */}
+            <Field label={t.settings.ai.model}>
               <ModelInput
-                value={openai.model}
-                onChange={v => patchProvider('openai', { model: v })}
-                placeholder={envVal.OPENAI_MODEL || 'gpt-5.4'}
-                provider="openai"
-                apiKey={openai.apiKey}
-                envKey={env.OPENAI_API_KEY}
-                baseUrl={openai.baseUrl}
+                value={currentConfig.model}
+                onChange={v => patchProvider(provider, { model: v })}
+                placeholder={preset.defaultModel}
+                provider={provider}
+                apiKey={currentConfig.apiKey}
+                envKey={!!activeEnvKey}
+                baseUrl={currentConfig.baseUrl}
+                supportsListModels={preset.supportsListModels}
                 t={t}
               />
             </Field>
-            <Field
-              label={<>{t.settings.ai.apiKey} <EnvBadge overridden={env.OPENAI_API_KEY} /></>}
-              hint={env.OPENAI_API_KEY ? t.settings.ai.envFieldNote('OPENAI_API_KEY') : t.settings.ai.keyHint}
-            >
-              <ApiKeyInput
-                value={openai.apiKey}
-                onChange={v => patchProvider('openai', { apiKey: v })}
-              />
-              {renderTestButton('openai', !!openai.apiKey, !!env.OPENAI_API_KEY)}
-            </Field>
-            <Field
-              label={<>{t.settings.ai.baseUrl} <EnvBadge overridden={env.OPENAI_BASE_URL} /></>}
-              hint={t.settings.ai.baseUrlHint}
-            >
-              <Input
-                value={openai.baseUrl ?? ''}
-                onChange={e => patchProvider('openai', { baseUrl: e.target.value })}
-                placeholder={envVal.OPENAI_BASE_URL || 'https://api.openai.com/v1'}
-              />
-            </Field>
-          </>
+
+            {/* 4. Test — after all fields, tests the complete configuration */}
+            {renderTestButton(provider, !!currentConfig.apiKey, !!activeEnvKey)}
+          </div>
         )}
 
         {/* Inline warnings */}
@@ -307,7 +296,8 @@ export function AiTab({ data, updateAi, updateAgent, t }: AiTabProps) {
           </Select>
         </SettingRow>
 
-        {provider === 'anthropic' && (
+        {/* Thinking — show for providers that support it */}
+        {preset?.supportsThinking && (
           <>
             <SettingRow label={t.settings.agent.thinking} hint={t.settings.agent.thinkingHint}>
               <Toggle checked={data.agent?.enableThinking ?? false} onChange={() => updateAgent({ enableThinking: !(data.agent?.enableThinking ?? false) })} />
@@ -341,29 +331,45 @@ export function AiTab({ data, updateAi, updateAgent, t }: AiTabProps) {
 /* ── Model Input with "List models" picker ── */
 
 function ModelInput({
-  value, onChange, placeholder, provider, apiKey, envKey, baseUrl, t,
+  value, onChange, placeholder, provider, apiKey, envKey, baseUrl, supportsListModels, t,
 }: {
   value: string;
   onChange: (v: string) => void;
   placeholder: string;
-  provider: 'anthropic' | 'openai';
+  provider: ProviderId;
   apiKey: string;
   envKey?: boolean;
   baseUrl?: string;
+  supportsListModels: boolean;
   t: AiTabProps['t'];
 }) {
   const [models, setModels] = useState<string[] | null>(null);
   const [loading, setLoading] = useState(false);
   const [open, setOpen] = useState(false);
   const [error, setError] = useState('');
+  const [focused, setFocused] = useState(false);
+  const [highlightIdx, setHighlightIdx] = useState(-1);
   const containerRef = useRef<HTMLDivElement>(null);
+  const listRef = useRef<HTMLDivElement>(null);
+  const fetchedRef = useRef(false);
+  const fetchVersionRef = useRef(0);
+  const loadingRef = useRef(false);
 
-  const hasKey = !!apiKey || !!envKey;
+  const hasKey = !!apiKey || !!envKey || !!PROVIDER_PRESETS[provider]?.apiKeyFallback;
 
-  const fetchModels = useCallback(async () => {
-    if (loading) return;
+  // Reset fetched cache when provider/key/baseUrl changes
+  useEffect(() => {
+    fetchedRef.current = false;
+    fetchVersionRef.current++;
+    setModels(null);
+  }, [provider, apiKey, baseUrl]);
+
+  const fetchModels = useCallback(async (silent = false) => {
+    if (loadingRef.current) return;
+    loadingRef.current = true;
     setLoading(true);
-    setError('');
+    if (!silent) setError('');
+    const version = fetchVersionRef.current;
     try {
       const body: Record<string, string> = { provider };
       if (apiKey) body.apiKey = apiKey;
@@ -374,67 +380,133 @@ function ModelInput({
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify(body),
       });
+      if (version !== fetchVersionRef.current) return;
       const json = await res.json();
+      if (version !== fetchVersionRef.current) return;
       if (json.ok && Array.isArray(json.models)) {
         setModels(json.models);
-        setOpen(true);
-      } else {
+        fetchedRef.current = true;
+        if (!silent) setOpen(true);
+      } else if (!silent) {
         setError(json.error || 'Failed to fetch models');
       }
     } catch {
-      setError('Network error');
+      if (version !== fetchVersionRef.current) return;
+      if (!silent) setError('Network error');
     } finally {
+      loadingRef.current = false;
       setLoading(false);
     }
-  }, [provider, apiKey, baseUrl, loading]);
+  }, [provider, apiKey, baseUrl]);
+
+  const handleFocus = useCallback(() => {
+    setFocused(true);
+    if (!fetchedRef.current && supportsListModels && hasKey && !loadingRef.current) {
+      fetchModels(true);
+    }
+  }, [supportsListModels, hasKey, fetchModels]);
 
+  // Filtered models for typeahead
+  const filtered = useMemo(() => {
+    if (!models || !value.trim()) return models ?? [];
+    const q = value.toLowerCase();
+    return models.filter(m => m.toLowerCase().includes(q));
+  }, [models, value]);
+
+  // Show typeahead when focused + models loaded + user is typing (or Browse was clicked)
+  const showDropdown = open || (focused && models !== null && value.trim().length > 0 && filtered.length > 0);
+
+  // Reset highlight when filtered list changes
+  useEffect(() => { setHighlightIdx(-1); }, [filtered]);
+
+  // Scroll highlighted item into view
   useEffect(() => {
-    if (!open) return;
+    if (highlightIdx < 0 || !listRef.current) return;
+    const items = listRef.current.querySelectorAll('[data-model-item]');
+    items[highlightIdx]?.scrollIntoView({ block: 'nearest' });
+  }, [highlightIdx]);
+
+  const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
+    const items = showDropdown ? filtered : [];
+    if (!items.length) return;
+
+    if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      setHighlightIdx(i => (i + 1) % items.length);
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault();
+      setHighlightIdx(i => (i - 1 + items.length) % items.length);
+    } else if (e.key === 'Enter' && highlightIdx >= 0 && highlightIdx < items.length) {
+      e.preventDefault();
+      onChange(items[highlightIdx]);
+      setOpen(false);
+      setFocused(false);
+    } else if (e.key === 'Escape') {
+      setOpen(false);
+      setFocused(false);
+    }
+  }, [showDropdown, filtered, highlightIdx, onChange]);
+
+  useEffect(() => {
+    if (!showDropdown) return;
     function handleClickOutside(e: MouseEvent) {
       if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
         setOpen(false);
+        setFocused(false);
       }
     }
     document.addEventListener('mousedown', handleClickOutside);
     return () => document.removeEventListener('mousedown', handleClickOutside);
-  }, [open]);
+  }, [showDropdown]);
+
+  const displayList = filtered;
 
   return (
     <div ref={containerRef} className="relative">
       <div className="flex gap-1.5">
         <Input
           value={value}
-          onChange={e => onChange(e.target.value)}
+          onChange={e => { onChange(e.target.value); if (!open) setFocused(true); }}
+          onFocus={handleFocus}
+          onKeyDown={handleKeyDown}
           placeholder={placeholder}
           className="flex-1"
+          autoComplete="off"
         />
-        <button
-          type="button"
-          disabled={!hasKey || loading}
-          onClick={fetchModels}
-          title={t.settings.ai.listModels}
-          className="inline-flex items-center gap-1.5 px-3 py-1.5 text-sm rounded-lg border border-border text-muted-foreground hover:text-foreground hover:border-foreground/20 transition-colors disabled:opacity-40 disabled:cursor-not-allowed shrink-0"
-        >
-          {loading ? <Loader2 size={12} className="animate-spin" /> : <ChevronDown size={12} />}
-          {t.settings.ai.listModels}
-        </button>
+        {supportsListModels && (
+          <button
+            type="button"
+            disabled={!hasKey || loading}
+            onClick={() => fetchModels(false)}
+            title={t.settings.ai.listModels}
+            className="inline-flex items-center gap-1.5 px-3 py-1.5 text-sm rounded-lg border border-border text-muted-foreground hover:text-foreground hover:border-foreground/20 transition-colors disabled:opacity-40 disabled:cursor-not-allowed shrink-0"
+          >
+            {loading ? <Loader2 size={12} className="animate-spin" /> : <ChevronDown size={12} />}
+            {t.settings.ai.listModels}
+          </button>
+        )}
       </div>
       {error && <p className="text-xs text-error mt-1">{error}</p>}
-      {open && models && models.length > 0 && (
-        <div className="absolute z-50 mt-1 w-full max-h-48 overflow-y-auto rounded-lg border border-border bg-popover shadow-lg">
-          {models.map(m => (
+      {showDropdown && displayList.length > 0 && (
+        <div ref={listRef} className="absolute z-50 mt-1 w-full max-h-48 overflow-y-auto rounded-lg border border-border bg-popover shadow-lg">
+          {displayList.map((m, i) => (
             <button
               key={m}
               type="button"
-              className={`w-full text-left px-3 py-1.5 text-sm hover:bg-accent transition-colors ${m === value ? 'bg-accent/60 font-medium' : ''}`}
-              onClick={() => { onChange(m); setOpen(false); }}
+              data-model-item
+              className={`w-full text-left px-3 py-1.5 text-sm transition-colors ${
+                m === value ? 'bg-accent/60 font-medium'
+                : i === highlightIdx ? 'bg-accent'
+                : 'hover:bg-accent'
+              }`}
+              onClick={() => { onChange(m); setOpen(false); setFocused(false); }}
             >
               {m}
             </button>
           ))}
         </div>
       )}
-      {open && models && models.length === 0 && (
+      {open && displayList.length === 0 && (
         <div className="absolute z-50 mt-1 w-full rounded-lg border border-border bg-popover shadow-lg px-3 py-2 text-xs text-muted-foreground">
           {t.settings.ai.noModelsFound}
         </div>
@@ -460,7 +532,6 @@ function AskDisplayMode() {
     const next = value as 'panel' | 'popup';
     setMode(next);
     try { localStorage.setItem('ask-mode', next); } catch (err) { console.warn("[AiTab] localStorage setItem ask-mode failed:", err); }
-    // Notify SidebarLayout to pick up the change
     window.dispatchEvent(new StorageEvent('storage', { key: 'ask-mode', newValue: next }));
   };
 

package/_standalone/components/settings/AppearanceTab.tsx

@@ -59,10 +59,55 @@ export function AppearanceTab({ font, setFont, fontSize, setFontSize, contentWid
   return (
     <div className="space-y-4">
 
-      {/* ── Card 1: Reading — font, size, width ── */}
-      <SettingCard icon={<BookOpen size={15} />} title={a.readingTitle ?? 'Reading'} description={a.readingDesc ?? 'Customize how your notes look'}>
+      {/* ── Card 1: Preferences — theme, language ── */}
+      <SettingCard icon={<Palette size={15} />} title={a.preferencesTitle ?? 'Preferences'}>
+
+      {/* ── Theme — amber pills ── */}
+      <SettingGroup icon={<Sun size={14} />} label={a.colorTheme}>
+        <PillSelector
+          options={[
+            { value: 'system', label: a.system, icon: <Monitor size={14} /> },
+            { value: 'dark', label: a.dark, icon: <Moon size={14} /> },
+            { value: 'light', label: a.light, icon: <Sun size={14} /> },
+          ]}
+          value={themePref}
+          onChange={v => {
+            setThemePref(v);
+            localStorage.setItem('theme', v);
+            const isDark = v === 'system'
+              ? window.matchMedia('(prefers-color-scheme: dark)').matches
+              : v === 'dark';
+            setDark(isDark);
+            document.documentElement.classList.toggle('dark', isDark);
+          }}
+        />
+      </SettingGroup>
 
-      {/* ── Font — each font previews itself ── */}
+      {/* ── Language — amber pills ── */}
+      <SettingGroup icon={<Globe size={14} />} label={a.language}>
+        <PillSelector
+          options={[
+            { value: 'system', label: a.system, icon: <Monitor size={14} /> },
+            { value: 'en', label: 'EN' },
+            { value: 'zh', label: '中文' },
+          ]}
+          value={localePref}
+          onChange={v => {
+            setLocalePref(v);
+            localStorage.setItem('locale', v);
+            const resolved: Locale = v === 'system'
+              ? (navigator.language.startsWith('zh') ? 'zh' : 'en')
+              : v as Locale;
+            setLocale(resolved);
+            document.cookie = `locale=${resolved};path=/;max-age=31536000;SameSite=Lax`;
+          }}
+        />
+      </SettingGroup>
+
+      </SettingCard>
+
+      {/* ── Card 2: Reading — font, size, width ── */}
+      <SettingCard icon={<BookOpen size={15} />} title={a.readingTitle ?? 'Reading'} description={a.readingDesc ?? 'Customize how your notes look'}>
       <SettingGroup icon={<Type size={14} />} label={a.readingFont}>
         <div className="space-y-0.5">
           {FONTS.map(f => {
@@ -191,53 +236,6 @@ export function AppearanceTab({ font, setFont, fontSize, setFontSize, contentWid
 
       </SettingCard>
 
-      {/* ── Card 2: Preferences — theme, language ── */}
-      <SettingCard icon={<Palette size={15} />} title={a.preferencesTitle ?? 'Preferences'}>
-
-      {/* ── Theme — amber pills ── */}
-      <SettingGroup icon={<Sun size={14} />} label={a.colorTheme}>
-        <PillSelector
-          options={[
-            { value: 'system', label: a.system, icon: <Monitor size={14} /> },
-            { value: 'dark', label: a.dark, icon: <Moon size={14} /> },
-            { value: 'light', label: a.light, icon: <Sun size={14} /> },
-          ]}
-          value={themePref}
-          onChange={v => {
-            setThemePref(v);
-            localStorage.setItem('theme', v);
-            const isDark = v === 'system'
-              ? window.matchMedia('(prefers-color-scheme: dark)').matches
-              : v === 'dark';
-            setDark(isDark);
-            document.documentElement.classList.toggle('dark', isDark);
-          }}
-        />
-      </SettingGroup>
-
-      {/* ── Language — amber pills ── */}
-      <SettingGroup icon={<Globe size={14} />} label={a.language}>
-        <PillSelector
-          options={[
-            { value: 'system', label: a.system, icon: <Monitor size={14} /> },
-            { value: 'en', label: 'EN' },
-            { value: 'zh', label: '中文' },
-          ]}
-          value={localePref}
-          onChange={v => {
-            setLocalePref(v);
-            localStorage.setItem('locale', v);
-            const resolved: Locale = v === 'system'
-              ? (navigator.language.startsWith('zh') ? 'zh' : 'en')
-              : v as Locale;
-            setLocale(resolved);
-            document.cookie = `locale=${resolved};path=/;max-age=31536000;SameSite=Lax`;
-          }}
-        />
-      </SettingGroup>
-
-      </SettingCard>
-
       <p className="text-xs text-muted-foreground/40 px-0.5">{a.browserNote}</p>
 
       {/* ── Keyboard Shortcuts ── */}