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.
This commit is contained in:
Hibryda 2026-03-07 23:23:33 +01:00
parent fa7d0bd915
commit 36af9dd1d2
3 changed files with 360 additions and 223 deletions

View file

@ -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
}