feat: Appearance settings

[excpt0]

The app lacked user-facing controls for visual customization. Font size was fixed, and UI elements like the mode.

Added: Font Size Scaling

• Pure data module defining four font sizes (small 14px, default 16px, large 18px, extra-large 20px), validation helpers, and localStorage read/write with SSR guards
• React context provider that initializes instantly from localStorage, then reconciles with the API on mount (API wins on conflict). Exposes a setFontSize callback that updates state, localStorage, DOM, and API in one call
• Thin context hook for components to consume the appearance context
• Font size selector UI with live preview added to the dedicated Appearance settings tab
• Anti-FOUC inline script in the root layout that reads localStorage and sets document.documentElement.style.fontSize before React hydrates — px map is generated from the source-of-truth constant, no hardcoded values
• 6 unit tests covering localStorage helpers (read, write, fallback on missing/invalid values) and anti-FOUC map consistency

Changed: px → rem Conversion

• All hardcoded text-[Npx] Tailwind classes converted to rem equivalents so UI text scales with the root font-size set by the provider. All UI elements scale proportionally via rem-based sizing. All fixed px font sizes (e.g. text-[11px], text-[13px]) were converted to rem equivalents (text-[0.6875rem], text-xs) so they scale proportionally when the user changes the base font size in Appearance settings. Since AppearanceProvider sets font-size on , only rem-based values respond to that change — px values would stay fixed and break visual consistency.

Restructured: Settings Tabs

• Moved appearance section out of the General tab into its own dedicated Appearance tab with a PaintBrush icon
• Added appearance_font_size to the API settings whitelist
• Added i18n keys for font size labels and appearance tab in both languages

[op7418]

Good feature PR with solid implementation. A few items to address before merging:

Positives

• Clean architecture: AppearanceProvider context + useAppearance hook + appearance.ts utilities — well-separated concerns
• Unit tests for the appearance constants and validation helpers
• i18n properly handled (both en.ts and zh.ts updated)
• Settings persistence via /api/settings/app with proper ALLOWED_KEYS registration
• The settings-changed CustomEvent pattern for cross-component sync is reasonable

Issues to address

1. Inter font import is added but never used

Inter is imported in layout.tsx and the --font-inter CSS variable is set, but no component references font-inter. This adds unnecessary font loading weight. Either use it or remove it.

2. Blue submit / Red stop button styling may conflict with theme

The hardcoded bg-blue-500 and bg-red-500 classes override the theme system. If the app supports custom themes in the future, these won't adapt. Consider using semantic classes like bg-primary for submit and bg-destructive for stop. Not blocking, but worth noting.

3. showModeSelector / showImageAgent state in MessageInput duplicates settings fetch

MessageInput fetches /api/settings/app on mount independently from AppearanceSection. When both components are mounted simultaneously (e.g., settings panel open while chat is visible), this causes duplicate API calls. Consider moving these settings into the AppearanceProvider context to centralize the state.

4. ChatListPanel px-to-rem conversions

The text-[11px] → text-[0.6875rem] conversions are correct mathematically (11/16 = 0.6875), but these will now scale with the font size setting. At "Extra Large" (20px base), 0.6875rem = 13.75px which is fine. At "Small" (14px base), 0.6875rem = 9.625px which may be too small to read. Please verify the smallest size looks acceptable.

5. Missing cleanup of superseded flag

In the MessageInput effect for loading settings, the superseded flag is set to true when a settings-changed event fires, but the abort controller is only for the initial fetch. If the component unmounts during the fetch, there's a potential state update on unmounted component. The controller.abort() in the cleanup handles this, but the superseded flag is redundant — consider removing it for clarity.

Verdict

The core feature is well-built. Please address items 1 (unused Inter font) and 4 (verify small sizes) before merge. The rest are suggestions.

[excpt0]

@op7418 cleanup has been completed and rewritten to use a hook

[op7418]

PR #146 Review: Appearance settings

总体评价

功能完整、结构清晰的外观设置实现。字号控制、模式选择器/Image Agent 的显示切换都是合理的用户自定义选项。有单元测试，i18n 也完整。

需要改进的地方

1. 提交按钮颜色变更超出 PR 范围

className={cn(
  "rounded-full",
  isStreaming
    ? "bg-red-500 text-white hover:bg-red-600"
    : "bg-blue-500 text-white hover:bg-blue-600"
)}

这个改动把提交按钮从默认样式改成了蓝色/红色，属于 UI 风格变更，与 "Appearance settings" 功能无直接关联。建议拆分为单独的 PR，或至少在 PR 描述中说明理由。

2. ChatListPanel 中 text-[11px] → text-[0.6875rem] 的批量替换需要说明
大量将 text-[11px] 改为 text-[0.6875rem]、text-[13px] 改为 text-xs、text-[10px] 改为 text-[0.625rem]。这些变更的目的是配合 font-size 设置让所有文本按比例缩放（rem 单位会跟随根字号）。逻辑正确，但建议在 PR 描述中明确说明这个 px → rem 的转换动机。

3. useAppSettings hook 的 API 设计有隐患

const { showModeSelector, showImageAgent } = useAppSettings(
  (show) => { if (!show && modeRef.current !== 'code') onModeChangeRef.current?.('code'); },
);

这个回调参数的语义不清楚——它在 showModeSelector 变为 false 时被调用来重置模式。但 hook 内部的实现没有在 diff 中看到，无法确认回调的触发时机和参数含义。建议在 hook 定义中添加 JSDoc 说明。

4. AppearanceProvider 在 ThemeProvider 之内但在 I18nProvider 之外

<ThemeProvider>
  <AppearanceProvider>
    <I18nProvider>

如果 AppearanceProvider 的设置加载依赖 i18n（比如错误提示需要翻译），当前的嵌套顺序会导致 AppearanceProvider 无法使用 useTranslation。当前实现中 AppearanceProvider 没有用到 i18n，所以暂时没问题，但需要注意未来扩展。

5. applyToDocument 直接修改 document.documentElement.style.fontSize
这会覆盖浏览器的默认字号设置和用户的辅助功能偏好。对于桌面 Electron 应用这通常可以接受，但建议添加注释说明这个决策。

6. 字号预览不受字号设置影响
Preview 区域使用了固定的 text-sm 和 text-xs，这些是相对于根字号的，所以实际上会跟随变化。但 Preview 的目的是让用户看到效果差异，如果所有文本都同步变化，Preview 区域没有参照对比。考虑添加一个固定大小的参考文本。

优点

• 有单元测试覆盖字号常量和验证逻辑
• i18n 双语支持完整
• isValidFontSize 类型守卫设计好
• settings API 路由的 ALLOWED_KEYS 白名单更新正确
• 设置持久化到后端 API 而非仅 localStorage，确保跨设备一致

[excpt0]

@op7418 check updates

[vercel]

Someone is attempting to deploy a commit to the op7418's projects Team on Vercel.

A member of the Team first needs to authorize it.

[excpt0]

@op7418 PR updated

Added: Font Size Scaling

• Pure data module defining four font sizes (small 14px, default 16px, large 18px, extra-large 20px), validation helpers, and localStorage read/write with SSR guards
• React context provider that initializes instantly from localStorage, then reconciles with the API on mount (API wins on conflict). Exposes a setFontSize callback that updates state, localStorage, DOM, and API in one call
• Thin context hook for components to consume the appearance context
• Font size selector UI with live preview added to the dedicated Appearance settings tab
• Anti-FOUC inline script in the root layout that reads localStorage and sets document.documentElement.style.fontSize before React hydrates — px map is generated from the source-of-truth constant, no hardcoded values
• 6 unit tests covering localStorage helpers (read, write, fallback on missing/invalid values) and anti-FOUC map consistency

Changed: px → rem Conversion

• All hardcoded text-[Npx] Tailwind classes converted to rem equivalents so UI text scales with the root font-size set by the provider. All UI elements scale proportionally via rem-based sizing. All fixed px font sizes (e.g. text-[11px], text-[13px]) were converted to rem equivalents (text-[0.6875rem], text-xs) so they scale proportionally when the user changes the base font size in Appearance settings. Since AppearanceProvider sets font-size on , only rem-based values respond to that change — px values would stay fixed and break visual consistency.

Restructured: Settings Tabs

• Moved appearance section out of the General tab into its own dedicated Appearance tab with a PaintBrush icon
• Added appearance_font_size to the API settings whitelist
• Added i18n keys for font size labels and appearance tab in both languages