From 47492aa6372ade59203c19f39ccac6ae25917845 Mon Sep 17 00:00:00 2001 From: Hibryda Date: Sat, 7 Mar 2026 23:02:55 +0100 Subject: [PATCH] feat(v3): add global font controls to SettingsTab Add font family select (9 monospace fonts) and font size +/- stepper (8-24px) to SettingsTab global settings. Both controls apply live preview via CSS custom properties (--ui-font-family, --ui-font-size) and persist to SQLite. Restructure global settings from inline rows to 2-column grid with labels above controls. initTheme() now restores saved font settings on startup. --- v2/src/app.css | 4 +- .../components/Workspace/SettingsTab.svelte | 189 +++++++++++++++--- v2/src/lib/stores/theme.svelte.ts | 16 ++ v2/src/lib/styles/catppuccin.css | 4 + 4 files changed, 184 insertions(+), 29 deletions(-) diff --git a/v2/src/app.css b/v2/src/app.css index 136f43a..7599d0c 100644 --- a/v2/src/app.css +++ b/v2/src/app.css @@ -14,8 +14,8 @@ html, body { overflow: hidden; background: var(--bg-primary); color: var(--text-primary); - font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace; - font-size: 13px; + font-family: var(--ui-font-family); + font-size: var(--ui-font-size); line-height: 1.4; -webkit-font-smoothing: antialiased; } diff --git a/v2/src/lib/components/Workspace/SettingsTab.svelte b/v2/src/lib/components/Workspace/SettingsTab.svelte index 1a4cc3d..1c13cba 100644 --- a/v2/src/lib/components/Workspace/SettingsTab.svelte +++ b/v2/src/lib/components/Workspace/SettingsTab.svelte @@ -29,9 +29,23 @@ // Global settings let defaultShell = $state(''); let defaultCwd = $state(''); + let fontFamily = $state(''); + let fontSize = $state(''); let selectedTheme = $state(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', + ]; + // Group themes by category const themeGroups = $derived(() => { const map = new Map(); @@ -47,15 +61,27 @@ ); onMount(async () => { - const [shell, cwd] = await Promise.all([ + const [shell, cwd, font, size] = await Promise.all([ getSetting('default_shell'), getSetting('default_cwd'), + getSetting('font_family'), + getSetting('font_size'), ]); defaultShell = shell ?? ''; defaultCwd = cwd ?? ''; + fontFamily = font ?? ''; + fontSize = size ?? ''; 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) { + document.documentElement.style.setProperty(prop, value); + } + async function saveGlobalSetting(key: string, value: string) { try { await setSetting(key, value); @@ -64,6 +90,20 @@ } } + 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 handleFontSizeChange(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); + } + async function handleThemeChange(themeId: ThemeId) { selectedTheme = themeId; themeDropdownOpen = false; @@ -120,8 +160,8 @@

Global

-
-
+
+
Theme
-
+ +
+ + +
+ +
+ +
+ + handleFontSizeChange((e.target as HTMLInputElement).value)} + /> + px + +
+
+ +
{ defaultShell = (e.target as HTMLInputElement).value; saveGlobalSetting('default_shell', defaultShell); }} />
-
+ +
{ if (currentTheme !== 'mocha') { applyCssVariables(currentTheme); } + + // Apply saved font settings + try { + const [fontFamily, fontSize] = await Promise.all([ + getSetting('font_family'), + getSetting('font_size'), + ]); + if (fontFamily) { + document.documentElement.style.setProperty('--ui-font-family', `'${fontFamily}', monospace`); + } + if (fontSize) { + document.documentElement.style.setProperty('--ui-font-size', `${fontSize}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 3875d3f..0ae1903 100644 --- a/v2/src/lib/styles/catppuccin.css +++ b/v2/src/lib/styles/catppuccin.css @@ -43,6 +43,10 @@ --warning: var(--ctp-yellow); --error: var(--ctp-red); + /* Typography */ + --ui-font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace; + --ui-font-size: 13px; + /* Layout */ --sidebar-width: 260px; --right-panel-width: 380px;