fix: polish typography settings and storage helpers

2026-03-04 11:45:28 +08:00
parent 989b74f48a
commit 87bdaaee37
9 changed files with 232 additions and 175 deletions
--- a/src/components/SettingsModal.tsx
+++ b/src/components/SettingsModal.tsx
@@ -5,6 +5,7 @@ import { useSendShortcut } from '../hooks/useSendShortcut';
 import { useT, useLocale } from '../hooks/useLocale';
 import { setLocale, supportedLocales, localeLabels } from '../lib/i18n';
 import type { ThemeName, AccentColor, UiFont, MonoFont } from '../contexts/ThemeContextDef';
+import { uiFontStacks, monoFontStacks } from '../contexts/ThemeContextDef';
 import type { TranslationKey } from '../lib/i18n';

 const themeOptions: { value: ThemeName; icon: typeof Sun; labelKey: TranslationKey }[] = [
@@ -91,20 +92,6 @@ export function SettingsModal({ open, onClose, soundEnabled, onToggleSound }: Pr
    return base;
  }, [onToggleSound, t]);

-  const uiFontStacks: Record<UiFont, string> = {
-    system: "-apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif",
-    inter: "'Inter', 'Segoe UI', system-ui, sans-serif",
-    segoe: "'Segoe UI Variable Text', 'Segoe UI', system-ui, sans-serif",
-    sf: "'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif",
-  };
-
-  const monoFontStacks: Record<MonoFont, string> = {
-    jetbrains: "'JetBrains Mono', 'Cascadia Code', 'Fira Code', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace",
-    fira: "'Fira Code', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace",
-    cascadia: "'Cascadia Code', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace",
-    'system-mono': "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace",
-  };
-
  const uiFontOptions: { value: UiFont; label: string; sample: string }[] = [
    { value: 'system', label: 'System', sample: 'Segoe/UI' },
    { value: 'inter', label: 'Inter', sample: 'Inter' },
@@ -146,7 +133,7 @@ export function SettingsModal({ open, onClose, soundEnabled, onToggleSound }: Pr

      {/* Modal */}
      <div
-        className="relative w-full max-w-md mx-4 rounded-3xl border border-pc-border bg-[var(--pc-bg-base)]/95 backdrop-blur-xl shadow-2xl animate-fade-in"
+        className="relative w-full max-w-xl mx-4 rounded-3xl border border-pc-border bg-[var(--pc-bg-base)]/95 backdrop-blur-xl shadow-2xl animate-fade-in"
        onClick={(e) => e.stopPropagation()}
      >
        {/* Header */}
@@ -308,6 +295,8 @@ export function SettingsModal({ open, onClose, soundEnabled, onToggleSound }: Pr
                </div>
              </div>

+              <div className="text-[11px] text-pc-text-faint mb-4 text-center">{t('settings.fontNote')}</div>
+
              <div className="mb-4">
                <div className="text-xs text-pc-text-secondary mb-2">{t('settings.fontSize')}</div>
                <div className="flex gap-1.5 flex-wrap">
@@ -351,11 +340,12 @@ export function SettingsModal({ open, onClose, soundEnabled, onToggleSound }: Pr
              <div className="rounded-2xl border border-pc-border bg-[var(--pc-bg-surface)]/70 p-3">
                <div className="text-[11px] uppercase tracking-wide text-pc-text-faint mb-2">{t('settings.preview')}</div>
                <div className="text-sm text-pc-text mb-2" style={{ fontFamily: 'var(--pc-font-ui)', fontSize: 'var(--pc-font-size)' }}>
-                  The quick brown fox jumps over the lazy dog — 1234567890
+                  {t('settings.previewText')}
                </div>
                <div className="rounded-xl border border-dashed border-pc-border p-2 bg-[var(--pc-bg-code)] text-[13px]" style={{ fontFamily: 'var(--pc-font-mono)', fontSize: 'var(--pc-font-size-mono)' }}>
                  const hello = 'PinchChat'; // typography preview
                </div>
+                <div className="text-[11px] text-pc-text-faint mt-2 text-center">{t('settings.fontNote')}</div>
              </div>
            </>
          )}
--- a/src/contexts/ThemeContext.tsx
+++ b/src/contexts/ThemeContext.tsx
@@ -1,19 +1,9 @@
 import { useState, useEffect, useCallback, type ReactNode } from 'react';
-import { ThemeContext, type ThemeName, type AccentColor, type UiFont, type MonoFont } from './ThemeContextDef';
+import { ThemeContext, type ThemeName, type AccentColor, type UiFont, type MonoFont, uiFontStacks, monoFontStacks } from './ThemeContextDef';
+import { loadStored, STORAGE_KEY } from './themeStorage';

 export type { ThemeName, AccentColor } from './ThemeContextDef';

-const STORAGE_KEY = 'pinchchat-theme';
-
-interface StoredTheme {
-  theme: ThemeName;
-  accent: AccentColor;
-  uiFont: UiFont;
-  monoFont: MonoFont;
-  uiFontSize: number;
-  monoFontSize: number;
-}
-
 type ConcreteTheme = 'dark' | 'light' | 'oled';
 const themes: Record<ConcreteTheme, Record<string, string>> = {
  dark: {
@@ -123,20 +113,6 @@ const accents: Record<AccentColor, Record<string, string>> = {
  },
 };

-const uiFonts: Record<UiFont, string> = {
-  system: "-apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif",
-  inter: "'Inter', 'Segoe UI', system-ui, sans-serif",
-  segoe: "'Segoe UI Variable Text', 'Segoe UI', system-ui, sans-serif",
-  sf: "'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif",
-};
-
-const monoFonts: Record<MonoFont, string> = {
-  jetbrains: "'JetBrains Mono', 'Cascadia Code', 'Fira Code', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace",
-  fira: "'Fira Code', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace",
-  cascadia: "'Cascadia Code', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace",
-  'system-mono': "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace",
-};
-
 function applyVars(vars: Record<string, string>) {
  const root = document.documentElement;
  for (const [k, v] of Object.entries(vars)) {
@@ -152,36 +128,19 @@ function resolveTheme(name: ThemeName): 'dark' | 'light' | 'oled' {
  return name;
 }

-function loadStored(): StoredTheme {
-  try {
-    const raw = localStorage.getItem(STORAGE_KEY);
-    if (raw) {
-      const parsed = JSON.parse(raw);
-      const themeValid = parsed.theme in themes || parsed.theme === 'system';
-      const accentValid = parsed.accent in accents;
-      const uiFont: UiFont = uiFonts[parsed.uiFont as UiFont] ? parsed.uiFont : 'system';
-      const monoFont: MonoFont = monoFonts[parsed.monoFont as MonoFont] ? parsed.monoFont : 'jetbrains';
-      const uiFontSize = Number.isFinite(parsed.uiFontSize) ? Math.min(20, Math.max(12, Number(parsed.uiFontSize))) : 15;
-      const monoFontSize = Number.isFinite(parsed.monoFontSize) ? Math.min(20, Math.max(12, Number(parsed.monoFontSize))) : 14;
-      if (themeValid && accentValid) {
-        return {
-          theme: parsed.theme,
-          accent: parsed.accent,
-          uiFont,
-          monoFont,
-          uiFontSize,
-          monoFontSize,
-        };
-      }
-    }
-  } catch { /* ignore invalid stored JSON */ }
-  return { theme: 'dark', accent: 'cyan', uiFont: 'system', monoFont: 'jetbrains', uiFontSize: 15, monoFontSize: 14 };
+interface ThemeSettings {
+  theme: ThemeName;
+  accent: AccentColor;
+  uiFont: UiFont;
+  monoFont: MonoFont;
+  uiFontSize: number;
+  monoFontSize: number;
 }

 function fontVars(uiFont: UiFont, monoFont: MonoFont, uiFontSize: number, monoFontSize: number) {
  return {
-    '--pc-font-ui': uiFonts[uiFont],
-    '--pc-font-mono': monoFonts[monoFont],
+    '--pc-font-ui': uiFontStacks[uiFont],
+    '--pc-font-mono': monoFontStacks[monoFont],
    '--pc-font-size': `${uiFontSize}px`,
    '--pc-font-size-mono': `${monoFontSize}px`,
  };
@@ -196,73 +155,79 @@ export function ThemeProvider({ children }: { children: ReactNode }) {
  const [uiFontSize, setUiFontSizeState] = useState<number>(stored.uiFontSize);
  const [monoFontSize, setMonoFontSizeState] = useState<number>(stored.monoFontSize);

-  const persist = useCallback((t: ThemeName, a: AccentColor, ui: UiFont, mono: MonoFont, uiSize: number, monoSize: number) => {
+  const persist = useCallback((s: ThemeSettings) => {
    localStorage.setItem(STORAGE_KEY, JSON.stringify({
-      theme: t,
-      accent: a,
-      uiFont: ui,
-      monoFont: mono,
-      uiFontSize: uiSize,
-      monoFontSize: monoSize,
+      theme: s.theme,
+      accent: s.accent,
+      uiFont: s.uiFont,
+      monoFont: s.monoFont,
+      uiFontSize: s.uiFontSize,
+      monoFontSize: s.monoFontSize,
    }));
  }, []);

-  const applyAll = useCallback((nextTheme: ThemeName, nextAccent: AccentColor, nextUiFont: UiFont, nextMonoFont: MonoFont, nextUiSize: number, nextMonoSize: number) => {
+  const applyAll = useCallback((s: ThemeSettings) => {
    applyVars({
-      ...themes[resolveTheme(nextTheme)],
-      ...accents[nextAccent],
-      ...fontVars(nextUiFont, nextMonoFont, nextUiSize, nextMonoSize),
+      ...themes[resolveTheme(s.theme)],
+      ...accents[s.accent],
+      ...fontVars(s.uiFont, s.monoFont, s.uiFontSize, s.monoFontSize),
    });
  }, []);

  const setTheme = useCallback((t: ThemeName) => {
    setThemeState(t);
-    applyAll(t, accent, uiFont, monoFont, uiFontSize, monoFontSize);
-    persist(t, accent, uiFont, monoFont, uiFontSize, monoFontSize);
+    const next: ThemeSettings = { theme: t, accent, uiFont, monoFont, uiFontSize, monoFontSize };
+    applyAll(next);
+    persist(next);
  }, [accent, applyAll, persist, uiFont, monoFont, uiFontSize, monoFontSize]);

  const setAccent = useCallback((a: AccentColor) => {
    setAccentState(a);
-    applyAll(theme, a, uiFont, monoFont, uiFontSize, monoFontSize);
-    persist(theme, a, uiFont, monoFont, uiFontSize, monoFontSize);
+    const next: ThemeSettings = { theme, accent: a, uiFont, monoFont, uiFontSize, monoFontSize };
+    applyAll(next);
+    persist(next);
  }, [theme, applyAll, persist, uiFont, monoFont, uiFontSize, monoFontSize]);

  const setUiFont = useCallback((f: UiFont) => {
    setUiFontState(f);
-    applyAll(theme, accent, f, monoFont, uiFontSize, monoFontSize);
-    persist(theme, accent, f, monoFont, uiFontSize, monoFontSize);
+    const next: ThemeSettings = { theme, accent, uiFont: f, monoFont, uiFontSize, monoFontSize };
+    applyAll(next);
+    persist(next);
  }, [accent, theme, applyAll, persist, monoFont, uiFontSize, monoFontSize]);

  const setMonoFont = useCallback((f: MonoFont) => {
    setMonoFontState(f);
-    applyAll(theme, accent, uiFont, f, uiFontSize, monoFontSize);
-    persist(theme, accent, uiFont, f, uiFontSize, monoFontSize);
+    const next: ThemeSettings = { theme, accent, uiFont, monoFont: f, uiFontSize, monoFontSize };
+    applyAll(next);
+    persist(next);
  }, [accent, theme, applyAll, persist, uiFont, uiFontSize, monoFontSize]);

  const setUiFontSize = useCallback((size: number) => {
    const clamped = Math.min(20, Math.max(12, size));
    setUiFontSizeState(clamped);
-    applyAll(theme, accent, uiFont, monoFont, clamped, monoFontSize);
-    persist(theme, accent, uiFont, monoFont, clamped, monoFontSize);
+    const next: ThemeSettings = { theme, accent, uiFont, monoFont, uiFontSize: clamped, monoFontSize };
+    applyAll(next);
+    persist(next);
  }, [accent, theme, applyAll, persist, uiFont, monoFont, monoFontSize]);

  const setMonoFontSize = useCallback((size: number) => {
    const clamped = Math.min(20, Math.max(12, size));
    setMonoFontSizeState(clamped);
-    applyAll(theme, accent, uiFont, monoFont, uiFontSize, clamped);
-    persist(theme, accent, uiFont, monoFont, uiFontSize, clamped);
+    const next: ThemeSettings = { theme, accent, uiFont, monoFont, uiFontSize, monoFontSize: clamped };
+    applyAll(next);
+    persist(next);
  }, [accent, theme, applyAll, persist, uiFont, monoFont, uiFontSize]);

  // Apply on mount
  useEffect(() => {
-    applyAll(theme, accent, uiFont, monoFont, uiFontSize, monoFontSize);
+    applyAll({ theme, accent, uiFont, monoFont, uiFontSize, monoFontSize });
  }, []); // eslint-disable-line react-hooks/exhaustive-deps

  // Listen to OS color scheme changes when theme is 'system'
  useEffect(() => {
    if (theme !== 'system') return;
    const mq = window.matchMedia('(prefers-color-scheme: light)');
-    const handler = () => applyAll(mq.matches ? 'light' : 'dark', accent, uiFont, monoFont, uiFontSize, monoFontSize);
+    const handler = () => applyAll({ theme: mq.matches ? 'light' : 'dark', accent, uiFont, monoFont, uiFontSize, monoFontSize });
    mq.addEventListener('change', handler);
    return () => mq.removeEventListener('change', handler);
  }, [theme, accent, applyAll, uiFont, monoFont, uiFontSize, monoFontSize]);
--- a/src/contexts/ThemeContextDef.ts
+++ b/src/contexts/ThemeContextDef.ts
@@ -5,6 +5,20 @@ export type AccentColor = 'cyan' | 'violet' | 'emerald' | 'amber' | 'rose' | 'bl
 export type UiFont = 'system' | 'inter' | 'segoe' | 'sf';
 export type MonoFont = 'jetbrains' | 'fira' | 'cascadia' | 'system-mono';

+export const uiFontStacks: Record<UiFont, string> = {
+  system: "-apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif",
+  inter: "'Inter', 'Segoe UI', system-ui, sans-serif",
+  segoe: "'Segoe UI Variable Text', 'Segoe UI', system-ui, sans-serif",
+  sf: "'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif",
+};
+
+export const monoFontStacks: Record<MonoFont, string> = {
+  jetbrains: "'JetBrains Mono', 'Cascadia Code', 'Fira Code', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace",
+  fira: "'Fira Code', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace",
+  cascadia: "'Cascadia Code', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace",
+  'system-mono': "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace",
+};
+
 export interface ThemeContextValue {
  theme: ThemeName;
  accent: AccentColor;
--- a/src/contexts/tests/ThemeContext.test.ts
+++ b/src/contexts/tests/ThemeContext.test.ts
@@ -0,0 +1,55 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { loadStored, STORAGE_KEY } from '../themeStorage';
+
+const STORAGE_KEY = 'pinchchat-theme';
+
+describe('ThemeContext loadStoredForTest', () => {
+  beforeEach(() => {
+    localStorage.clear();
+  });
+
+  it('returns defaults when storage is empty', () => {
+    expect(loadStored()).toEqual({
+      theme: 'dark',
+      accent: 'cyan',
+      uiFont: 'system',
+      monoFont: 'jetbrains',
+      uiFontSize: 15,
+      monoFontSize: 14,
+    });
+  });
+
+  it('reads valid stored values and clamps sizes', () => {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify({
+      theme: 'light',
+      accent: 'rose',
+      uiFont: 'inter',
+      monoFont: 'fira',
+      uiFontSize: 25,          // should clamp to 20
+      monoFontSize: 10,        // should clamp to 12
+    }));
+
+    expect(loadStored()).toEqual({
+      theme: 'light',
+      accent: 'rose',
+      uiFont: 'inter',
+      monoFont: 'fira',
+      uiFontSize: 20,
+      monoFontSize: 12,
+    });
+  });
+
+  it('falls back to defaults on invalid font keys', () => {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify({
+      theme: 'dark',
+      accent: 'cyan',
+      uiFont: 'nonexistent',
+      monoFont: 'nope',
+      uiFontSize: 16,
+      monoFontSize: 16,
+    }));
+
+    expect(loadStored().uiFont).toBe('system');
+    expect(loadStored().monoFont).toBe('jetbrains');
+  });
+});
--- a/src/contexts/themeStorage.ts
+++ b/src/contexts/themeStorage.ts
@@ -0,0 +1,44 @@
+import type { ThemeName, AccentColor, UiFont, MonoFont } from './ThemeContextDef';
+import { uiFontStacks, monoFontStacks } from './ThemeContextDef';
+
+export const STORAGE_KEY = 'pinchchat-theme';
+
+export interface StoredTheme {
+  theme: ThemeName;
+  accent: AccentColor;
+  uiFont: UiFont;
+  monoFont: MonoFont;
+  uiFontSize: number;
+  monoFontSize: number;
+}
+
+const DEFAULTS: StoredTheme = {
+  theme: 'dark',
+  accent: 'cyan',
+  uiFont: 'system',
+  monoFont: 'jetbrains',
+  uiFontSize: 15,
+  monoFontSize: 14,
+};
+
+const validThemes: ThemeName[] = ['dark', 'light', 'oled', 'system'];
+const validAccents: AccentColor[] = ['cyan', 'violet', 'emerald', 'amber', 'rose', 'blue'];
+
+export function loadStored(): StoredTheme {
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY);
+    if (raw) {
+      const parsed = JSON.parse(raw);
+      const themeValid = validThemes.includes(parsed.theme);
+      const accentValid = validAccents.includes(parsed.accent);
+      const uiFont: UiFont = uiFontStacks[parsed.uiFont as UiFont] ? parsed.uiFont : DEFAULTS.uiFont;
+      const monoFont: MonoFont = monoFontStacks[parsed.monoFont as MonoFont] ? parsed.monoFont : DEFAULTS.monoFont;
+      const uiFontSize = Number.isFinite(parsed.uiFontSize) ? Math.min(20, Math.max(12, Number(parsed.uiFontSize))) : DEFAULTS.uiFontSize;
+      const monoFontSize = Number.isFinite(parsed.monoFontSize) ? Math.min(20, Math.max(12, Number(parsed.monoFontSize))) : DEFAULTS.monoFontSize;
+      if (themeValid && accentValid) {
+        return { theme: parsed.theme, accent: parsed.accent, uiFont, monoFont, uiFontSize, monoFontSize };
+      }
+    }
+  } catch { /* ignore malformed storage */ }
+  return DEFAULTS;
+}
--- a/src/index.css
+++ b/src/index.css
@@ -1,3 +1,4 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;600&family=Fira+Code:wght@400;600&display=swap');
@import "tailwindcss";
@import "highlight.js/styles/base16/material-palenight.min.css";

--- a/src/lib/i18n.ts
+++ b/src/lib/i18n.ts
@@ -183,6 +183,8 @@ const en = {
  'settings.fontSize': 'UI font size',
  'settings.fontMonoSize': 'Code font size',
  'settings.preview': 'Preview',
+  'settings.previewText': 'The quick brown fox jumps over the lazy dog — 1234567890',
+  'settings.fontNote': 'Inter / JetBrains / Fira load automatically; Cascadia and SF use your system if installed.',

  // Bookmarks
  'message.bookmark': 'Bookmark message',
@@ -364,6 +366,8 @@ const fr: Record<keyof typeof en, string> = {
  'settings.fontSize': 'Taille police UI',
  'settings.fontMonoSize': 'Taille police code',
  'settings.preview': 'Aperçu',
+  'settings.previewText': 'Le vif renard brun saute par-dessus le chien paresseux — 1234567890',
+  'settings.fontNote': 'Inter / JetBrains / Fira se chargent automatiquement ; Cascadia et SF dépendent des polices installées.',

  'message.bookmark': 'Marquer le message',
  'message.removeBookmark': 'Retirer le marque-page',
@@ -544,6 +548,8 @@ const es: Record<keyof typeof en, string> = {
  'settings.fontSize': 'Tamaño fuente UI',
  'settings.fontMonoSize': 'Tamaño fuente código',
  'settings.preview': 'Vista previa',
+  'settings.previewText': 'El veloz zorro marrón salta sobre el perro perezoso — 1234567890',
+  'settings.fontNote': 'Inter / JetBrains / Fira se cargan automáticamente; Cascadia y SF dependen de que estén instaladas.',

  'message.bookmark': 'Marcar mensaje',
  'message.removeBookmark': 'Quitar marcador',
@@ -726,6 +732,8 @@ const de: Record<keyof typeof en, string> = {
  'settings.fontSize': 'UI-Schriftgröße',
  'settings.fontMonoSize': 'Code-Schriftgröße',
  'settings.preview': 'Vorschau',
+  'settings.previewText': 'Falsches Üben von Xylophonmusik quält jeden größeren Zwerg — 1234567890',
+  'settings.fontNote': 'Inter / JetBrains / Fira werden automatisch geladen; Cascadia und SF erfordern Systeminstallation.',

  'message.bookmark': 'Nachricht markieren',
  'message.reply': 'Antworten',
@@ -906,6 +914,8 @@ const ja: Record<keyof typeof en, string> = {
  'settings.fontSize': 'UIフォントサイズ',
  'settings.fontMonoSize': 'コードフォントサイズ',
  'settings.preview': 'プレビュー',
+  'settings.previewText': '素早い茶色の狐はのんびり犬を飛び越える — 1234567890',
+  'settings.fontNote': 'Inter / JetBrains / Fira は自動読み込み。Cascadia と SF はシステムにある場合のみ使用。',

  'message.bookmark': 'メッセージをブックマーク',
  'message.reply': '返信',
@@ -1086,6 +1096,8 @@ const pt: Record<keyof typeof en, string> = {
  'settings.fontSize': 'Tamanho da fonte UI',
  'settings.fontMonoSize': 'Tamanho da fonte de código',
  'settings.preview': 'Pré-visualização',
+  'settings.previewText': 'A rápida raposa marrom pula sobre o cão preguiçoso — 1234567890',
+  'settings.fontNote': 'Inter / JetBrains / Fira carregam automaticamente; Cascadia e SF dependem de estarem instaladas.',

  'message.bookmark': 'Marcar mensagem',
  'message.reply': 'Responder',
@@ -1266,6 +1278,8 @@ const zh: Record<keyof typeof en, string> = {
  'settings.fontSize': '界面字号',
  'settings.fontMonoSize': '代码字号',
  'settings.preview': '预览',
+  'settings.previewText': '敏捷的棕狐跳过懒狗 — 1234567890',
+  'settings.fontNote': 'Inter / JetBrains / Fira 自动加载；Cascadia 和 SF 依赖系统已安装字体。',

  'message.bookmark': '收藏消息',
  'message.reply': '回复',
@@ -1446,6 +1460,8 @@ const it: Record<keyof typeof en, string> = {
  'settings.fontSize': 'Dimensione font UI',
  'settings.fontMonoSize': 'Dimensione font codice',
  'settings.preview': 'Anteprima',
+  'settings.previewText': 'Quel vitello jazz fonde sciolto whiskey e cioccolato — 1234567890',
+  'settings.fontNote': 'Inter / JetBrains / Fira si caricano automaticamente; Cascadia e SF richiedono font di sistema.',

  'message.bookmark': 'Aggiungi ai segnalibri',
  'message.reply': 'Rispondi',