feat: add selectable interface and code fonts (10 for each)

Adds separate UI and code font choices in settings
Applies font changes immediately
Lazy-loads selected remote fonts

packages/ui/src/stores/useUIStore.ts

@@ -4,6 +4,7 @@ import type { SidebarSection } from '@/constants/sidebar';
 import { getSafeStorage } from './utils/safeStorage';
 import { SEMANTIC_TYPOGRAPHY, getTypographyVariable, type SemanticTypographyKey } from '@/lib/typography';
 import type { ShortcutCombo } from '@/lib/shortcuts';
+import { DEFAULT_MONO_FONT, DEFAULT_UI_FONT, type MonoFontOption, type UiFontOption } from '@/lib/fontOptions';
 
 export type MainTab = 'chat' | 'plan' | 'git' | 'diff' | 'terminal' | 'files';
 export type RightSidebarTab = 'git' | 'files' | 'context';
@@ -512,6 +513,8 @@ interface UIStore {
   messageLimit: number;
   fontSize: number;
   terminalFontSize: number;
+  uiFont: UiFontOption;
+  monoFont: MonoFontOption;
   padding: number;
   cornerRadius: number;
   inputBarOffset: number;
@@ -633,6 +636,8 @@ interface UIStore {
   setMessageLimit: (value: number) => void;
   setFontSize: (size: number) => void;
   setTerminalFontSize: (size: number) => void;
+  setUiFont: (font: UiFontOption) => void;
+  setMonoFont: (font: MonoFontOption) => void;
   setPadding: (size: number) => void;
   setCornerRadius: (radius: number) => void;
   setInputBarOffset: (offset: number) => void;
@@ -750,6 +755,8 @@ export const useUIStore = create<UIStore>()(
         messageLimit: 200,
         fontSize: 100,
         terminalFontSize: 13,
+        uiFont: DEFAULT_UI_FONT,
+        monoFont: DEFAULT_MONO_FONT,
         padding: 100,
         cornerRadius: 18,
         inputBarOffset: 0,
@@ -1370,6 +1377,14 @@ export const useUIStore = create<UIStore>()(
           set({ terminalFontSize: clamped });
         },
 
+        setUiFont: (font) => {
+          set({ uiFont: font });
+        },
+
+        setMonoFont: (font) => {
+          set({ monoFont: font });
+        },
+
         setPadding: (size) => {
           // Clamp between 50% and 200%
           const clampedSize = Math.max(50, Math.min(200, size));
@@ -1892,6 +1907,8 @@ export const useUIStore = create<UIStore>()(
           messageLimit: state.messageLimit,
           fontSize: state.fontSize,
           terminalFontSize: state.terminalFontSize,
+          uiFont: state.uiFont,
+          monoFont: state.monoFont,
           padding: state.padding,
           cornerRadius: state.cornerRadius,
           favoriteModels: state.favoriteModels,