From 36af9dd1d2235e7f7106cf6c1775348e245fde9e Mon Sep 17 00:00:00 2001
From: Hibryda <hibryda@protonmail.com>
Date: Sat, 7 Mar 2026 23:23:33 +0100
Subject: [PATCH] feat(v3): redesign SettingsTab global settings with split
 font controls

Split single font setting into separate UI font (sans-serif options)
and Terminal font (monospace options), each with custom themed dropdown
and size stepper (8-24px). Single-column layout with Appearance and
Defaults subsections. All native <select> replaced with custom themed
dropdowns. Font previews render in their own typeface. New CSS vars:
--term-font-family, --term-font-size. Setting keys changed from
font_family/font_size to ui_font_family/ui_font_size +
term_font_family/term_font_size.
---
 .../components/Workspace/SettingsTab.svelte   | 562 +++++++++++-------
 v2/src/lib/stores/theme.svelte.ts             |  19 +-
 v2/src/lib/styles/catppuccin.css              |   2 +
 3 files changed, 360 insertions(+), 223 deletions(-)

diff --git a/v2/src/lib/components/Workspace/SettingsTab.svelte b/v2/src/lib/components/Workspace/SettingsTab.svelte
index 1c13cba..7f17857 100644
--- a/v2/src/lib/components/Workspace/SettingsTab.svelte
+++ b/v2/src/lib/components/Workspace/SettingsTab.svelte
@@ -29,21 +29,40 @@
   // Global settings
   let defaultShell = $state('');
   let defaultCwd = $state('');
-  let fontFamily = $state('');
-  let fontSize = $state('');
+  let uiFont = $state('');
+  let uiFontSize = $state('');
+  let termFont = $state('');
+  let termFontSize = $state('');
   let selectedTheme = $state<ThemeId>(getCurrentTheme());
-  let themeDropdownOpen = $state(false);
 
-  const FONT_OPTIONS = [
-    'JetBrains Mono',
-    'Fira Code',
-    'Cascadia Code',
-    'Source Code Pro',
-    'IBM Plex Mono',
-    'Hack',
-    'Inconsolata',
-    'Ubuntu Mono',
-    'monospace',
+  // Dropdown open states
+  let themeDropdownOpen = $state(false);
+  let uiFontDropdownOpen = $state(false);
+  let termFontDropdownOpen = $state(false);
+
+  const UI_FONTS = [
+    { value: '', label: 'System Default' },
+    { value: 'Inter', label: 'Inter' },
+    { value: 'IBM Plex Sans', label: 'IBM Plex Sans' },
+    { value: 'Noto Sans', label: 'Noto Sans' },
+    { value: 'Roboto', label: 'Roboto' },
+    { value: 'Source Sans 3', label: 'Source Sans 3' },
+    { value: 'Ubuntu', label: 'Ubuntu' },
+    { value: 'JetBrains Mono', label: 'JetBrains Mono' },
+    { value: 'Fira Code', label: 'Fira Code' },
+  ];
+
+  const TERM_FONTS = [
+    { value: '', label: 'Default (JetBrains Mono)' },
+    { value: 'JetBrains Mono', label: 'JetBrains Mono' },
+    { value: 'Fira Code', label: 'Fira Code' },
+    { value: 'Cascadia Code', label: 'Cascadia Code' },
+    { value: 'Source Code Pro', label: 'Source Code Pro' },
+    { value: 'IBM Plex Mono', label: 'IBM Plex Mono' },
+    { value: 'Hack', label: 'Hack' },
+    { value: 'Inconsolata', label: 'Inconsolata' },
+    { value: 'Ubuntu Mono', label: 'Ubuntu Mono' },
+    { value: 'monospace', label: 'monospace' },
   ];
 
   // Group themes by category
@@ -60,25 +79,33 @@
     THEME_LIST.find(t => t.id === selectedTheme)?.label ?? selectedTheme,
   );
 
+  let uiFontLabel = $derived(
+    UI_FONTS.find(f => f.value === uiFont)?.label ?? 'System Default',
+  );
+
+  let termFontLabel = $derived(
+    TERM_FONTS.find(f => f.value === termFont)?.label ?? 'Default (JetBrains Mono)',
+  );
+
   onMount(async () => {
-    const [shell, cwd, font, size] = await Promise.all([
+    const [shell, cwd, font, size, tfont, tsize] = await Promise.all([
       getSetting('default_shell'),
       getSetting('default_cwd'),
-      getSetting('font_family'),
-      getSetting('font_size'),
+      getSetting('ui_font_family'),
+      getSetting('ui_font_size'),
+      getSetting('term_font_family'),
+      getSetting('term_font_size'),
     ]);
     defaultShell = shell ?? '';
     defaultCwd = cwd ?? '';
-    fontFamily = font ?? '';
-    fontSize = size ?? '';
+    uiFont = font ?? '';
+    uiFontSize = size ?? '';
+    termFont = tfont ?? '';
+    termFontSize = tsize ?? '';
     selectedTheme = getCurrentTheme();
-
-    // Apply saved font settings
-    if (font) applyFont('--ui-font-family', `'${font}', monospace`);
-    if (size) applyFont('--ui-font-size', `${size}px`);
   });
 
-  function applyFont(prop: string, value: string) {
+  function applyCssProp(prop: string, value: string) {
     document.documentElement.style.setProperty(prop, value);
   }
 
@@ -90,18 +117,40 @@
     }
   }
 
-  async function handleFontFamilyChange(family: string) {
-    fontFamily = family;
-    applyFont('--ui-font-family', family ? `'${family}', monospace` : "'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace");
-    await saveGlobalSetting('font_family', family);
+  async function handleUiFontChange(family: string) {
+    uiFont = family;
+    uiFontDropdownOpen = false;
+    const val = family
+      ? `'${family}', sans-serif`
+      : "'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace";
+    applyCssProp('--ui-font-family', val);
+    await saveGlobalSetting('ui_font_family', family);
   }
 
-  async function handleFontSizeChange(size: string) {
+  async function handleUiFontSizeChange(size: string) {
     const num = parseInt(size, 10);
     if (isNaN(num) || num < 8 || num > 24) return;
-    fontSize = size;
-    applyFont('--ui-font-size', `${num}px`);
-    await saveGlobalSetting('font_size', size);
+    uiFontSize = size;
+    applyCssProp('--ui-font-size', `${num}px`);
+    await saveGlobalSetting('ui_font_size', size);
+  }
+
+  async function handleTermFontChange(family: string) {
+    termFont = family;
+    termFontDropdownOpen = false;
+    const val = family
+      ? `'${family}', monospace`
+      : "'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace";
+    applyCssProp('--term-font-family', val);
+    await saveGlobalSetting('term_font_family', family);
+  }
+
+  async function handleTermFontSizeChange(size: string) {
+    const num = parseInt(size, 10);
+    if (isNaN(num) || num < 8 || num > 24) return;
+    termFontSize = size;
+    applyCssProp('--term-font-size', `${num}px`);
+    await saveGlobalSetting('term_font_size', size);
   }
 
   async function handleThemeChange(themeId: ThemeId) {
@@ -110,16 +159,20 @@
     await setTheme(themeId);
   }
 
-  function handleDropdownKeydown(e: KeyboardEvent) {
-    if (e.key === 'Escape') {
+  function handleClickOutside(e: MouseEvent) {
+    const target = e.target as HTMLElement;
+    if (!target.closest('.custom-dropdown')) {
       themeDropdownOpen = false;
+      uiFontDropdownOpen = false;
+      termFontDropdownOpen = false;
     }
   }
 
-  function handleClickOutside(e: MouseEvent) {
-    const target = e.target as HTMLElement;
-    if (!target.closest('.theme-dropdown')) {
+  function handleKeydown(e: KeyboardEvent) {
+    if (e.key === 'Escape') {
       themeDropdownOpen = false;
+      uiFontDropdownOpen = false;
+      termFontDropdownOpen = false;
     }
   }
 
@@ -157,16 +210,16 @@
 
 <!-- svelte-ignore a11y_click_events_have_key_events -->
 <!-- svelte-ignore a11y_no_static_element_interactions -->
-<div class="settings-tab" onclick={handleClickOutside}>
+<div class="settings-tab" onclick={handleClickOutside} onkeydown={handleKeydown}>
   <section class="settings-section">
-    <h2>Global</h2>
-    <div class="global-grid">
+    <h2>Appearance</h2>
+    <div class="settings-list">
       <div class="setting-field">
         <span class="setting-label">Theme</span>
-        <div class="theme-dropdown" onkeydown={handleDropdownKeydown}>
+        <div class="custom-dropdown">
           <button
-            class="theme-trigger"
-            onclick={() => (themeDropdownOpen = !themeDropdownOpen)}
+            class="dropdown-trigger"
+            onclick={() => { themeDropdownOpen = !themeDropdownOpen; uiFontDropdownOpen = false; termFontDropdownOpen = false; }}
             aria-haspopup="listbox"
             aria-expanded={themeDropdownOpen}
           >
@@ -174,16 +227,16 @@
               class="theme-swatch"
               style="background: {getPalette(selectedTheme).base}; border-color: {getPalette(selectedTheme).surface1};"
             ></span>
-            <span class="theme-trigger-label">{selectedThemeLabel}</span>
-            <span class="theme-arrow">{themeDropdownOpen ? '\u25B4' : '\u25BE'}</span>
+            <span class="dropdown-label">{selectedThemeLabel}</span>
+            <span class="dropdown-arrow">{themeDropdownOpen ? '\u25B4' : '\u25BE'}</span>
           </button>
           {#if themeDropdownOpen}
-            <div class="theme-menu" role="listbox">
+            <div class="dropdown-menu" role="listbox">
               {#each themeGroups() as [groupName, themes]}
-                <div class="theme-group-label">{groupName}</div>
+                <div class="dropdown-group-label">{groupName}</div>
                 {#each themes as t}
                   <button
-                    class="theme-option"
+                    class="dropdown-option"
                     class:active={t.id === selectedTheme}
                     role="option"
                     aria-selected={t.id === selectedTheme}
@@ -193,7 +246,7 @@
                       class="theme-swatch"
                       style="background: {getPalette(t.id).base}; border-color: {getPalette(t.id).surface1};"
                     ></span>
-                    <span class="theme-option-label">{t.label}</span>
+                    <span class="dropdown-option-label">{t.label}</span>
                     <span class="theme-colors">
                       <span class="color-dot" style="background: {getPalette(t.id).red};"></span>
                       <span class="color-dot" style="background: {getPalette(t.id).green};"></span>
@@ -209,47 +262,120 @@
       </div>
 
       <div class="setting-field">
-        <label for="font-family" class="setting-label">Font family</label>
-        <select
-          id="font-family"
-          class="setting-select"
-          onchange={e => handleFontFamilyChange((e.target as HTMLSelectElement).value)}
-        >
-          <option value="" selected={!fontFamily}>Default (JetBrains Mono)</option>
-          {#each FONT_OPTIONS as font}
-            <option value={font} selected={fontFamily === font}>{font}</option>
-          {/each}
-        </select>
-      </div>
-
-      <div class="setting-field">
-        <label for="font-size" class="setting-label">Font size</label>
-        <div class="size-control">
-          <button
-            class="size-btn"
-            onclick={() => handleFontSizeChange(String((parseInt(fontSize, 10) || 13) - 1))}
-            disabled={parseInt(fontSize, 10) <= 8}
-          >−</button>
-          <input
-            id="font-size"
-            type="number"
-            min="8"
-            max="24"
-            value={fontSize || '13'}
-            class="size-input"
-            onchange={e => handleFontSizeChange((e.target as HTMLInputElement).value)}
-          />
-          <span class="size-unit">px</span>
-          <button
-            class="size-btn"
-            onclick={() => handleFontSizeChange(String((parseInt(fontSize, 10) || 13) + 1))}
-            disabled={parseInt(fontSize, 10) >= 24}
-          >+</button>
+        <span class="setting-label">UI Font</span>
+        <div class="setting-row">
+          <div class="custom-dropdown dropdown-grow">
+            <button
+              class="dropdown-trigger"
+              onclick={() => { uiFontDropdownOpen = !uiFontDropdownOpen; themeDropdownOpen = false; termFontDropdownOpen = false; }}
+              aria-haspopup="listbox"
+              aria-expanded={uiFontDropdownOpen}
+            >
+              <span class="dropdown-label" style={uiFont ? `font-family: '${uiFont}', sans-serif` : ''}>{uiFontLabel}</span>
+              <span class="dropdown-arrow">{uiFontDropdownOpen ? '\u25B4' : '\u25BE'}</span>
+            </button>
+            {#if uiFontDropdownOpen}
+              <div class="dropdown-menu" role="listbox">
+                {#each UI_FONTS as f}
+                  <button
+                    class="dropdown-option"
+                    class:active={f.value === uiFont}
+                    role="option"
+                    aria-selected={f.value === uiFont}
+                    style={f.value ? `font-family: '${f.value}', sans-serif` : ''}
+                    onclick={() => handleUiFontChange(f.value)}
+                  >
+                    <span class="dropdown-option-label">{f.label}</span>
+                  </button>
+                {/each}
+              </div>
+            {/if}
+          </div>
+          <div class="size-control">
+            <button
+              class="size-btn"
+              onclick={() => handleUiFontSizeChange(String((parseInt(uiFontSize, 10) || 13) - 1))}
+              disabled={(parseInt(uiFontSize, 10) || 13) <= 8}
+            >&minus;</button>
+            <input
+              type="number"
+              min="8"
+              max="24"
+              value={uiFontSize || '13'}
+              class="size-input"
+              onchange={e => handleUiFontSizeChange((e.target as HTMLInputElement).value)}
+            />
+            <span class="size-unit">px</span>
+            <button
+              class="size-btn"
+              onclick={() => handleUiFontSizeChange(String((parseInt(uiFontSize, 10) || 13) + 1))}
+              disabled={(parseInt(uiFontSize, 10) || 13) >= 24}
+            >+</button>
+          </div>
         </div>
       </div>
 
       <div class="setting-field">
-        <label for="default-shell" class="setting-label">Default shell</label>
+        <span class="setting-label">Terminal Font</span>
+        <div class="setting-row">
+          <div class="custom-dropdown dropdown-grow">
+            <button
+              class="dropdown-trigger"
+              onclick={() => { termFontDropdownOpen = !termFontDropdownOpen; themeDropdownOpen = false; uiFontDropdownOpen = false; }}
+              aria-haspopup="listbox"
+              aria-expanded={termFontDropdownOpen}
+            >
+              <span class="dropdown-label" style={termFont ? `font-family: '${termFont}', monospace` : ''}>{termFontLabel}</span>
+              <span class="dropdown-arrow">{termFontDropdownOpen ? '\u25B4' : '\u25BE'}</span>
+            </button>
+            {#if termFontDropdownOpen}
+              <div class="dropdown-menu" role="listbox">
+                {#each TERM_FONTS as f}
+                  <button
+                    class="dropdown-option"
+                    class:active={f.value === termFont}
+                    role="option"
+                    aria-selected={f.value === termFont}
+                    style={f.value ? `font-family: '${f.value}', monospace` : ''}
+                    onclick={() => handleTermFontChange(f.value)}
+                  >
+                    <span class="dropdown-option-label">{f.label}</span>
+                  </button>
+                {/each}
+              </div>
+            {/if}
+          </div>
+          <div class="size-control">
+            <button
+              class="size-btn"
+              onclick={() => handleTermFontSizeChange(String((parseInt(termFontSize, 10) || 13) - 1))}
+              disabled={(parseInt(termFontSize, 10) || 13) <= 8}
+            >&minus;</button>
+            <input
+              type="number"
+              min="8"
+              max="24"
+              value={termFontSize || '13'}
+              class="size-input"
+              onchange={e => handleTermFontSizeChange((e.target as HTMLInputElement).value)}
+            />
+            <span class="size-unit">px</span>
+            <button
+              class="size-btn"
+              onclick={() => handleTermFontSizeChange(String((parseInt(termFontSize, 10) || 13) + 1))}
+              disabled={(parseInt(termFontSize, 10) || 13) >= 24}
+            >+</button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <section class="settings-section">
+    <h2>Defaults</h2>
+    <div class="settings-list">
+      <div class="setting-field">
+        <label for="default-shell" class="setting-label">Shell</label>
         <input
           id="default-shell"
           value={defaultShell}
@@ -257,9 +383,8 @@
           onchange={e => { defaultShell = (e.target as HTMLInputElement).value; saveGlobalSetting('default_shell', defaultShell); }}
         />
       </div>
-
       <div class="setting-field">
-        <label for="default-cwd" class="setting-label">Default CWD</label>
+        <label for="default-cwd" class="setting-label">Working directory</label>
         <input
           id="default-cwd"
           value={defaultCwd}
@@ -356,24 +481,26 @@
     padding: 16px 24px;
     overflow-y: auto;
     height: 100%;
-    max-width: 900px;
+    max-width: 560px;
   }
 
   h2 {
-    font-size: 1rem;
+    font-size: 0.85rem;
     font-weight: 600;
     color: var(--ctp-text);
-    margin: 0 0 12px;
+    margin: 0 0 10px;
+    padding-bottom: 6px;
+    border-bottom: 1px solid var(--ctp-surface0);
   }
 
   .settings-section {
-    margin-bottom: 24px;
+    margin-bottom: 20px;
   }
 
-  .global-grid {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 12px;
+  .settings-list {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
   }
 
   .setting-field {
@@ -389,7 +516,7 @@
     letter-spacing: 0.03em;
   }
 
-  .setting-field input:not([type="number"]) {
+  .setting-field > input {
     padding: 6px 10px;
     background: var(--ctp-surface0);
     border: 1px solid var(--ctp-surface1);
@@ -398,7 +525,27 @@
     font-size: 0.8rem;
   }
 
-  .setting-select {
+  .setting-row {
+    display: flex;
+    gap: 8px;
+    align-items: stretch;
+  }
+
+  /* Reusable custom dropdown */
+  .custom-dropdown {
+    position: relative;
+  }
+
+  .dropdown-grow {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .dropdown-trigger {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    width: 100%;
     padding: 6px 10px;
     background: var(--ctp-surface0);
     border: 1px solid var(--ctp-surface1);
@@ -406,12 +553,112 @@
     color: var(--ctp-text);
     font-size: 0.8rem;
     cursor: pointer;
+    text-align: left;
+    height: 100%;
   }
 
+  .dropdown-trigger:hover {
+    border-color: var(--ctp-surface2);
+  }
+
+  .dropdown-label {
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .dropdown-arrow {
+    color: var(--ctp-overlay0);
+    font-size: 0.7rem;
+    flex-shrink: 0;
+  }
+
+  .dropdown-menu {
+    position: absolute;
+    top: calc(100% + 4px);
+    left: 0;
+    min-width: 100%;
+    width: max-content;
+    max-height: 360px;
+    overflow-y: auto;
+    background: var(--ctp-mantle);
+    border: 1px solid var(--ctp-surface1);
+    border-radius: 4px;
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
+    z-index: 100;
+    padding: 4px 0;
+  }
+
+  .dropdown-group-label {
+    padding: 6px 10px 2px;
+    font-size: 0.65rem;
+    font-weight: 700;
+    color: var(--ctp-overlay0);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+  }
+
+  .dropdown-option {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    width: 100%;
+    padding: 5px 10px;
+    background: transparent;
+    border: none;
+    color: var(--ctp-subtext1);
+    font-size: 0.8rem;
+    cursor: pointer;
+    text-align: left;
+    white-space: nowrap;
+  }
+
+  .dropdown-option:hover {
+    background: var(--ctp-surface0);
+    color: var(--ctp-text);
+  }
+
+  .dropdown-option.active {
+    background: var(--ctp-surface0);
+    color: var(--ctp-text);
+    font-weight: 600;
+  }
+
+  .dropdown-option-label {
+    flex: 1;
+  }
+
+  /* Theme-specific dropdown extras */
+  .theme-swatch {
+    display: inline-block;
+    width: 14px;
+    height: 14px;
+    border-radius: 3px;
+    border: 1px solid;
+    flex-shrink: 0;
+  }
+
+  .theme-colors {
+    display: flex;
+    gap: 3px;
+    flex-shrink: 0;
+  }
+
+  .color-dot {
+    display: inline-block;
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+  }
+
+  /* Size control (shared by UI and Terminal font) */
   .size-control {
     display: flex;
     align-items: center;
-    gap: 4px;
+    gap: 2px;
+    flex-shrink: 0;
   }
 
   .size-btn {
@@ -438,8 +685,8 @@
   }
 
   .size-input {
-    width: 48px;
-    padding: 4px 6px;
+    width: 40px;
+    padding: 4px 2px;
     background: var(--ctp-surface0);
     border: 1px solid var(--ctp-surface1);
     border-radius: 4px;
@@ -455,122 +702,9 @@
   }
 
   .size-unit {
-    font-size: 0.75rem;
-    color: var(--ctp-overlay0);
-  }
-
-  /* Custom theme dropdown */
-  .theme-dropdown {
-    position: relative;
-  }
-
-  .theme-trigger {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    width: 100%;
-    padding: 4px 8px;
-    background: var(--ctp-base);
-    border: 1px solid var(--ctp-surface1);
-    border-radius: 3px;
-    color: var(--ctp-text);
-    font-size: 0.8rem;
-    cursor: pointer;
-    text-align: left;
-  }
-
-  .theme-trigger:hover {
-    border-color: var(--ctp-surface2);
-  }
-
-  .theme-trigger-label {
-    flex: 1;
-    min-width: 0;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  .theme-arrow {
-    color: var(--ctp-overlay0);
     font-size: 0.7rem;
-    flex-shrink: 0;
-  }
-
-  .theme-swatch {
-    display: inline-block;
-    width: 14px;
-    height: 14px;
-    border-radius: 3px;
-    border: 1px solid;
-    flex-shrink: 0;
-  }
-
-  .theme-menu {
-    position: absolute;
-    top: calc(100% + 4px);
-    left: 0;
-    min-width: 280px;
-    max-height: 400px;
-    overflow-y: auto;
-    background: var(--ctp-mantle);
-    border: 1px solid var(--ctp-surface1);
-    border-radius: 4px;
-    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
-    z-index: 100;
-    padding: 4px 0;
-  }
-
-  .theme-group-label {
-    padding: 6px 10px 2px;
-    font-size: 0.65rem;
-    font-weight: 700;
     color: var(--ctp-overlay0);
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-  }
-
-  .theme-option {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    width: 100%;
-    padding: 5px 10px;
-    background: transparent;
-    border: none;
-    color: var(--ctp-subtext1);
-    font-size: 0.8rem;
-    cursor: pointer;
-    text-align: left;
-  }
-
-  .theme-option:hover {
-    background: var(--ctp-surface0);
-    color: var(--ctp-text);
-  }
-
-  .theme-option.active {
-    background: var(--ctp-surface0);
-    color: var(--ctp-text);
-    font-weight: 600;
-  }
-
-  .theme-option-label {
-    flex: 1;
-    white-space: nowrap;
-  }
-
-  .theme-colors {
-    display: flex;
-    gap: 3px;
-    flex-shrink: 0;
-  }
-
-  .color-dot {
-    display: inline-block;
-    width: 8px;
-    height: 8px;
-    border-radius: 50%;
+    margin-right: 2px;
   }
 
   /* Groups & Projects */
diff --git a/v2/src/lib/stores/theme.svelte.ts b/v2/src/lib/stores/theme.svelte.ts
index c6f603c..8c32966 100644
--- a/v2/src/lib/stores/theme.svelte.ts
+++ b/v2/src/lib/stores/theme.svelte.ts
@@ -81,16 +81,17 @@ export async function initTheme(): Promise<void> {
 
   // Apply saved font settings
   try {
-    const [fontFamily, fontSize] = await Promise.all([
-      getSetting('font_family'),
-      getSetting('font_size'),
+    const [uiFont, uiSize, termFont, termSize] = await Promise.all([
+      getSetting('ui_font_family'),
+      getSetting('ui_font_size'),
+      getSetting('term_font_family'),
+      getSetting('term_font_size'),
     ]);
-    if (fontFamily) {
-      document.documentElement.style.setProperty('--ui-font-family', `'${fontFamily}', monospace`);
-    }
-    if (fontSize) {
-      document.documentElement.style.setProperty('--ui-font-size', `${fontSize}px`);
-    }
+    const root = document.documentElement.style;
+    if (uiFont) root.setProperty('--ui-font-family', `'${uiFont}', sans-serif`);
+    if (uiSize) root.setProperty('--ui-font-size', `${uiSize}px`);
+    if (termFont) root.setProperty('--term-font-family', `'${termFont}', monospace`);
+    if (termSize) root.setProperty('--term-font-size', `${termSize}px`);
   } catch {
     // Font settings are optional — defaults from catppuccin.css apply
   }
diff --git a/v2/src/lib/styles/catppuccin.css b/v2/src/lib/styles/catppuccin.css
index 0ae1903..d353a29 100644
--- a/v2/src/lib/styles/catppuccin.css
+++ b/v2/src/lib/styles/catppuccin.css
@@ -46,6 +46,8 @@
   /* Typography */
   --ui-font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
   --ui-font-size: 13px;
+  --term-font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
+  --term-font-size: 13px;
 
   /* Layout */
   --sidebar-width: 260px;