BuzzbeeSCD/openchamber
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
Adds separate UI and code font choices in settings
Applies font changes immediately
Lazy-loads selected remote fonts
This commit is contained in:
Bohdan Triapitsyn
2026-04-26 18:48:43 +03:00
parent a3b300f7a9
commit 799998c5f8
15 changed files with 356 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/src/App.tsx
+3
View File
@@ -43,6 +43,7 @@ import { useSync } from '@/sync/use-sync';
import { setOptimisticRefs } from '@/sync/session-actions';
import { useFontPreferences } from '@/hooks/useFontPreferences';
import { CODE_FONT_OPTION_MAP, DEFAULT_MONO_FONT, DEFAULT_UI_FONT, UI_FONT_OPTION_MAP } from '@/lib/fontOptions';
import { loadMonoFont, loadUiFont } from '@/lib/fontLoader';
import { ConfigUpdateOverlay } from '@/components/ui/ConfigUpdateOverlay';
import { AboutDialog } from '@/components/ui/AboutDialog';
import { RuntimeAPIProvider } from '@/contexts/RuntimeAPIProvider';
@@ -269,6 +270,8 @@ function App({ apis }: AppProps) {
const root = document.documentElement;
const uiStack = UI_FONT_OPTION_MAP[uiFont]?.stack ?? UI_FONT_OPTION_MAP[DEFAULT_UI_FONT].stack;
const monoStack = CODE_FONT_OPTION_MAP[monoFont]?.stack ?? CODE_FONT_OPTION_MAP[DEFAULT_MONO_FONT].stack;
void loadUiFont(uiFont);
void loadMonoFont(monoFont);
root.style.setProperty('--font-sans', uiStack);
root.style.setProperty('--font-heading', uiStack);
packages/ui/src/components/sections/openchamber/OpenChamberVisualSettings.tsx
+71
View File
@@ -23,6 +23,7 @@ import { isDesktopShell, isVSCodeRuntime, isWebRuntime } from '@/lib/desktop';
import { useDeviceInfo } from '@/lib/device';
import { usePwaDetection } from '@/hooks/usePwaDetection';
import { updateDesktopSettings } from '@/lib/persistence';
import { CODE_FONT_OPTIONS, DEFAULT_MONO_FONT, DEFAULT_UI_FONT, UI_FONT_OPTIONS, type MonoFontOption, type UiFontOption } from '@/lib/fontOptions';
import { useI18n, type Locale } from '@/lib/i18n';
import { useConfigStore } from '@/stores/useConfigStore';
import {
@@ -249,6 +250,10 @@ export const OpenChamberVisualSettings: React.FC<OpenChamberVisualSettingsProps>
const setFontSize = useUIStore(state => state.setFontSize);
const terminalFontSize = useUIStore(state => state.terminalFontSize);
const setTerminalFontSize = useUIStore(state => state.setTerminalFontSize);
const uiFont = useUIStore(state => state.uiFont);
const setUiFont = useUIStore(state => state.setUiFont);
const monoFont = useUIStore(state => state.monoFont);
const setMonoFont = useUIStore(state => state.setMonoFont);
const padding = useUIStore(state => state.padding);
const setPadding = useUIStore(state => state.setPadding);
const inputBarOffset = useUIStore(state => state.inputBarOffset);
@@ -847,6 +852,72 @@ export const OpenChamberVisualSettings: React.FC<OpenChamberVisualSettingsProps>
<h4 className="typography-ui-header font-medium text-foreground">{t('settings.openchamber.visual.section.spacingAndLayout')}</h4>
<div className="pl-2">
{shouldShow('fontSize') && !isMobile && (
<div className="flex items-center gap-8 py-1">
<div className="flex min-w-0 flex-col w-56 shrink-0">
<span className="typography-ui-label text-foreground">{t('settings.openchamber.visual.field.interfaceFont')}</span>
</div>
<div className="flex items-center gap-2 w-fit">
<Select value={uiFont} onValueChange={(value) => setUiFont(value as UiFontOption)}>
<SelectTrigger aria-label={t('settings.openchamber.visual.field.selectInterfaceFontAria')} className="w-[13rem]">
<SelectValue>{UI_FONT_OPTIONS.find((option) => option.id === uiFont)?.label}</SelectValue>
</SelectTrigger>
<SelectContent>
{UI_FONT_OPTIONS.map((option) => (
<SelectItem key={option.id} value={option.id}>
<span style={{ fontFamily: option.stack }}>{option.label}</span>
</SelectItem>
))}
</SelectContent>
</Select>
<Button size="sm"
type="button"
variant="ghost"
onClick={() => setUiFont(DEFAULT_UI_FONT)}
disabled={uiFont === DEFAULT_UI_FONT}
className="h-7 w-7 px-0 text-muted-foreground hover:text-foreground"
aria-label={t('settings.openchamber.visual.actions.resetInterfaceFontAria')}
title={t('settings.common.actions.reset')}
>
<RiRestartLine className="h-3.5 w-3.5" />
</Button>
</div>
</div>
)}
{shouldShow('terminalFontSize') && (
<div className={cn("py-1", isMobile ? "flex flex-col gap-3" : "flex items-center gap-8")}>
<div className={cn("flex min-w-0 flex-col", isMobile ? "w-full" : "w-56 shrink-0")}>
<span className="typography-ui-label text-foreground">{t('settings.openchamber.visual.field.codeFont')}</span>
</div>
<div className={cn("flex items-center gap-2", isMobile ? "w-full" : "w-fit")}>
<Select value={monoFont} onValueChange={(value) => setMonoFont(value as MonoFontOption)}>
<SelectTrigger aria-label={t('settings.openchamber.visual.field.selectCodeFontAria')} className="w-[13rem]">
<SelectValue>{CODE_FONT_OPTIONS.find((option) => option.id === monoFont)?.label}</SelectValue>
</SelectTrigger>
<SelectContent>
{CODE_FONT_OPTIONS.map((option) => (
<SelectItem key={option.id} value={option.id}>
<span style={{ fontFamily: option.stack }}>{option.label}</span>
</SelectItem>
))}
</SelectContent>
</Select>
<Button size="sm"
type="button"
variant="ghost"
onClick={() => setMonoFont(DEFAULT_MONO_FONT)}
disabled={monoFont === DEFAULT_MONO_FONT}
className="h-7 w-7 px-0 text-muted-foreground hover:text-foreground"
aria-label={t('settings.openchamber.visual.actions.resetCodeFontAria')}
title={t('settings.common.actions.reset')}
>
<RiRestartLine className="h-3.5 w-3.5" />
</Button>
</div>
</div>
)}
{shouldShow('fontSize') && !isMobile && (
<div className="flex items-center gap-8 py-1">
<div className="flex min-w-0 flex-col w-56 shrink-0">
packages/ui/src/hooks/useFontPreferences.ts
+6 -2
View File
@@ -1,4 +1,5 @@
import type { MonoFontOption, UiFontOption } from '@/lib/fontOptions';
import { useUIStore } from '@/stores/useUIStore';
interface FontPreferences {
uiFont: UiFontOption;
@@ -6,8 +7,11 @@ interface FontPreferences {
}
export const useFontPreferences = (): FontPreferences => {
const uiFont = useUIStore(state => state.uiFont);
const monoFont = useUIStore(state => state.monoFont);
return {
uiFont: 'ibm-plex-sans',
monoFont: 'ibm-plex-mono',
uiFont,
monoFont,
};
};
packages/ui/src/lib/api/types.ts
+2
View File
@@ -574,6 +574,8 @@ export interface SettingsPayload {
mermaidRenderingMode?: 'svg' | 'ascii';
fontSize?: number;
terminalFontSize?: number;
uiFont?: string;
monoFont?: string;
padding?: number;
cornerRadius?: number;
inputBarOffset?: number;
packages/ui/src/lib/appearanceAutoSave.ts
+13
View File
@@ -1,6 +1,7 @@
import { useUIStore } from '@/stores/useUIStore';
import { updateDesktopSettings } from '@/lib/persistence';
import type { DesktopSettings } from '@/lib/desktop';
import type { MonoFontOption, UiFontOption } from '@/lib/fontOptions';
type AppearanceSlice = {
showReasoningTraces: boolean;
@@ -26,6 +27,8 @@ type AppearanceSlice = {
sessionRetentionAction: 'archive' | 'delete';
fontSize: number;
terminalFontSize: number;
uiFont: UiFontOption;
monoFont: MonoFontOption;
padding: number;
cornerRadius: number;
inputBarOffset: number;
@@ -62,6 +65,8 @@ export const startAppearanceAutoSave = (): void => {
sessionRetentionAction: useUIStore.getState().sessionRetentionAction,
fontSize: useUIStore.getState().fontSize,
terminalFontSize: useUIStore.getState().terminalFontSize,
uiFont: useUIStore.getState().uiFont,
monoFont: useUIStore.getState().monoFont,
padding: useUIStore.getState().padding,
cornerRadius: useUIStore.getState().cornerRadius,
inputBarOffset: useUIStore.getState().inputBarOffset,
@@ -110,6 +115,8 @@ export const startAppearanceAutoSave = (): void => {
sessionRetentionAction: state.sessionRetentionAction,
fontSize: state.fontSize,
terminalFontSize: state.terminalFontSize,
uiFont: state.uiFont,
monoFont: state.monoFont,
padding: state.padding,
cornerRadius: state.cornerRadius,
inputBarOffset: state.inputBarOffset,
@@ -174,6 +181,12 @@ export const startAppearanceAutoSave = (): void => {
if (current.terminalFontSize !== previous.terminalFontSize) {
diff.terminalFontSize = current.terminalFontSize;
}
if (current.uiFont !== previous.uiFont) {
diff.uiFont = current.uiFont;
}
if (current.monoFont !== previous.monoFont) {
diff.monoFont = current.monoFont;
}
if (current.padding !== previous.padding) {
diff.padding = current.padding;
}
packages/ui/src/lib/desktop.ts
+2
View File
@@ -135,6 +135,8 @@ export type DesktopSettings = {
stickyUserHeader?: boolean;
fontSize?: number;
terminalFontSize?: number;
uiFont?: string;
monoFont?: string;
padding?: number;
cornerRadius?: number;
inputBarOffset?: number;
packages/ui/src/lib/fontLoader.ts
+59
View File
@@ -0,0 +1,59 @@
import { CODE_FONT_OPTION_MAP, UI_FONT_OPTION_MAP, type FontFaceSource, type MonoFontOption, type UiFontOption } from '@/lib/fontOptions';
const loadedFaces = new Set<string>();
const pendingFaces = new Map<string, Promise<void>>();
const buildFontUrl = (source: FontFaceSource, weight: number) => {
const packageName = encodeURIComponent(source.packageName).replace('%40', '@').replace('%2F', '/');
return `https://cdn.jsdelivr.net/npm/${packageName}/files/${source.filePrefix}-latin-${weight}-normal.woff2`;
};
const loadFace = (source: FontFaceSource, weight: number) => {
const key = `${source.family}:${weight}`;
if (loadedFaces.has(key)) {
return Promise.resolve();
}
const pending = pendingFaces.get(key);
if (pending) {
return pending;
}
if (typeof document === 'undefined' || typeof FontFace === 'undefined' || !document.fonts) {
return Promise.resolve();
}
const face = new FontFace(source.family, `url(${buildFontUrl(source, weight)}) format('woff2')`, {
style: 'normal',
weight: String(weight),
display: 'swap',
});
document.fonts.add(face);
const promise = face.load()
.then(() => {
loadedFaces.add(key);
})
.catch((error) => {
document.fonts.delete(face);
console.warn(`Failed to load font: ${source.family} ${weight}`, error);
})
.finally(() => {
pendingFaces.delete(key);
});
pendingFaces.set(key, promise);
return promise;
};
const loadSource = (source: FontFaceSource | undefined) => {
if (!source) {
return Promise.resolve();
}
return Promise.all(source.weights.map((weight) => loadFace(source, weight))).then(() => undefined);
};
export const loadUiFont = (font: UiFontOption) => loadSource(UI_FONT_OPTION_MAP[font]?.source);
export const loadMonoFont = (font: MonoFontOption) => loadSource(CODE_FONT_OPTION_MAP[font]?.source);
packages/ui/src/lib/fontOptions.ts
+140 -2
View File
@@ -1,6 +1,13 @@
export type UiFontOption = 'ibm-plex-sans';
export type UiFontOption = 'ibm-plex-sans' | 'inter' | 'geist-sans' | 'atkinson-hyperlegible' | 'source-sans-3' | 'roboto' | 'noto-sans' | 'dm-sans' | 'manrope' | 'system';
export type MonoFontOption = 'ibm-plex-mono';
export type MonoFontOption = 'ibm-plex-mono' | 'jetbrains-mono' | 'fira-code' | 'geist-mono' | 'commit-mono' | 'source-code-pro' | 'cascadia-code' | 'roboto-mono' | 'iosevka' | 'system-mono';
export interface FontFaceSource {
family: string;
packageName: string;
filePrefix: string;
weights: number[];
}
export interface FontOptionDefinition<T extends string> {
id: T;
@@ -8,6 +15,7 @@ export interface FontOptionDefinition<T extends string> {
description: string;
stack: string;
notes?: string;
source?: FontFaceSource;
}
export const UI_FONT_OPTIONS: FontOptionDefinition<UiFontOption>[] = [
@@ -16,6 +24,68 @@ export const UI_FONT_OPTIONS: FontOptionDefinition<UiFontOption>[] = [
label: 'IBM Plex Sans',
description: 'Humanist sans-serif for optimal readability in the interface.',
stack: '"IBM Plex Sans", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif'
},
{
id: 'inter',
label: 'Inter',
description: 'Modern UI sans with excellent readability at small sizes.',
stack: '"Inter", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
source: { family: 'Inter', packageName: '@fontsource/inter', filePrefix: 'inter', weights: [400, 500, 600] }
},
{
id: 'geist-sans',
label: 'Geist Sans',
description: 'Crisp sans-serif with a technical interface feel.',
stack: '"Geist Sans", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
source: { family: 'Geist Sans', packageName: '@fontsource/geist-sans', filePrefix: 'geist-sans', weights: [400, 500, 600] }
},
{
id: 'atkinson-hyperlegible',
label: 'Atkinson Hyperlegible',
description: 'Accessibility-focused sans-serif optimized for character distinction.',
stack: '"Atkinson Hyperlegible", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
source: { family: 'Atkinson Hyperlegible', packageName: '@fontsource/atkinson-hyperlegible', filePrefix: 'atkinson-hyperlegible', weights: [400, 700] }
},
{
id: 'source-sans-3',
label: 'Source Sans 3',
description: 'Adobe sans-serif tuned for clean, readable interfaces.',
stack: '"Source Sans 3", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
source: { family: 'Source Sans 3', packageName: '@fontsource/source-sans-3', filePrefix: 'source-sans-3', weights: [400, 500, 600] }
},
{
id: 'roboto',
label: 'Roboto',
description: 'Familiar Material-style sans-serif with broad UI usage.',
stack: '"Roboto", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
source: { family: 'Roboto', packageName: '@fontsource/roboto', filePrefix: 'roboto', weights: [400, 500, 600] }
},
{
id: 'noto-sans',
label: 'Noto Sans',
description: 'Readable sans-serif with strong international coverage.',
stack: '"Noto Sans", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
source: { family: 'Noto Sans', packageName: '@fontsource/noto-sans', filePrefix: 'noto-sans', weights: [400, 500, 600] }
},
{
id: 'dm-sans',
label: 'DM Sans',
description: 'Modern product UI sans-serif with friendly proportions.',
stack: '"DM Sans", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
source: { family: 'DM Sans', packageName: '@fontsource/dm-sans', filePrefix: 'dm-sans', weights: [400, 500, 600] }
},
{
id: 'manrope',
label: 'Manrope',
description: 'Polished geometric sans-serif for modern app interfaces.',
stack: '"Manrope", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
source: { family: 'Manrope', packageName: '@fontsource/manrope', filePrefix: 'manrope', weights: [400, 500, 600] }
},
{
id: 'system',
label: 'System',
description: 'Native operating system interface font.',
stack: '"SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif'
}
];
@@ -25,6 +95,68 @@ export const CODE_FONT_OPTIONS: FontOptionDefinition<MonoFontOption>[] = [
label: 'IBM Plex Mono',
description: 'Balanced monospace for code blocks and technical content.',
stack: '"IBM Plex Mono", "SFMono-Regular", "Menlo", monospace'
},
{
id: 'jetbrains-mono',
label: 'JetBrains Mono',
description: 'Developer-focused monospace with strong punctuation clarity.',
stack: '"JetBrains Mono", "SFMono-Regular", "Menlo", monospace',
source: { family: 'JetBrains Mono', packageName: '@fontsource/jetbrains-mono', filePrefix: 'jetbrains-mono', weights: [400, 500, 600] }
},
{
id: 'fira-code',
label: 'Fira Code',
description: 'Readable coding font with ligature support.',
stack: '"Fira Code", "SFMono-Regular", "Menlo", monospace',
source: { family: 'Fira Code', packageName: '@fontsource/fira-code', filePrefix: 'fira-code', weights: [400, 500, 600] }
},
{
id: 'geist-mono',
label: 'Geist Mono',
description: 'Sharp monospace pair for Geist Sans.',
stack: '"Geist Mono", "SFMono-Regular", "Menlo", monospace',
source: { family: 'Geist Mono', packageName: '@fontsource/geist-mono', filePrefix: 'geist-mono', weights: [400, 500, 600] }
},
{
id: 'commit-mono',
label: 'Commit Mono',
description: 'Code-oriented monospace with polished editor ergonomics.',
stack: '"Commit Mono", "SFMono-Regular", "Menlo", monospace',
source: { family: 'Commit Mono', packageName: '@fontsource/commit-mono', filePrefix: 'commit-mono', weights: [400, 500, 600] }
},
{
id: 'source-code-pro',
label: 'Source Code Pro',
description: 'Adobe monospace designed for source code readability.',
stack: '"Source Code Pro", "SFMono-Regular", "Menlo", monospace',
source: { family: 'Source Code Pro', packageName: '@fontsource/source-code-pro', filePrefix: 'source-code-pro', weights: [400, 500, 600] }
},
{
id: 'cascadia-code',
label: 'Cascadia Code',
description: 'Microsoft coding font popular in terminals and editors.',
stack: '"Cascadia Code", "SFMono-Regular", "Menlo", monospace',
source: { family: 'Cascadia Code', packageName: '@fontsource/cascadia-code', filePrefix: 'cascadia-code', weights: [400, 500, 600] }
},
{
id: 'roboto-mono',
label: 'Roboto Mono',
description: 'Neutral monospace companion to Roboto.',
stack: '"Roboto Mono", "SFMono-Regular", "Menlo", monospace',
source: { family: 'Roboto Mono', packageName: '@fontsource/roboto-mono', filePrefix: 'roboto-mono', weights: [400, 500, 600] }
},
{
id: 'iosevka',
label: 'Iosevka',
description: 'Compact monospace for dense code and terminal layouts.',
stack: '"Iosevka", "SFMono-Regular", "Menlo", monospace',
source: { family: 'Iosevka', packageName: '@fontsource/iosevka', filePrefix: 'iosevka', weights: [400, 500, 600] }
},
{
id: 'system-mono',
label: 'System Mono',
description: 'Native operating system monospace font.',
stack: 'ui-monospace, "SFMono-Regular", "Menlo", "Cascadia Mono", "Segoe UI Mono", monospace'
}
];
@@ -36,3 +168,9 @@ export const CODE_FONT_OPTION_MAP = buildFontMap(CODE_FONT_OPTIONS);
export const DEFAULT_UI_FONT: UiFontOption = 'ibm-plex-sans';
export const DEFAULT_MONO_FONT: MonoFontOption = 'ibm-plex-mono';
export const isUiFontOption = (value: unknown): value is UiFontOption =>
typeof value === 'string' && value in UI_FONT_OPTION_MAP;
export const isMonoFontOption = (value: unknown): value is MonoFontOption =>
typeof value === 'string' && value in CODE_FONT_OPTION_MAP;
packages/ui/src/lib/i18n/messages/en.settings.ts
+6
View File
@@ -1363,9 +1363,15 @@ export const settingsDict = {
'settings.openchamber.visual.field.selectOrientationPlaceholder': 'Select orientation',
'settings.openchamber.visual.actions.resetInstallOrientationAria': 'Reset install orientation',
'settings.openchamber.visual.field.interfaceFontSize': 'Interface Font Size',
'settings.openchamber.visual.field.interfaceFont': 'Interface Font',
'settings.openchamber.visual.field.selectInterfaceFontAria': 'Select interface font',
'settings.openchamber.visual.actions.resetInterfaceFontAria': 'Reset interface font',
'settings.openchamber.visual.field.fontSizePercentageAria': 'Font size percentage',
'settings.openchamber.visual.actions.resetFontSizeAria': 'Reset font size',
'settings.openchamber.visual.field.terminalFontSize': 'Terminal Font Size',
'settings.openchamber.visual.field.codeFont': 'Code Font',
'settings.openchamber.visual.field.selectCodeFontAria': 'Select code font',
'settings.openchamber.visual.actions.resetCodeFontAria': 'Reset code font',
'settings.openchamber.visual.actions.resetTerminalFontSizeAria': 'Reset terminal font size',
'settings.openchamber.visual.field.spacingDensity': 'Spacing Density',
'settings.openchamber.visual.actions.resetSpacingAria': 'Reset spacing',
packages/ui/src/lib/i18n/messages/es.settings.ts
+6
View File
@@ -1363,9 +1363,15 @@ export const settingsDict = {
"settings.openchamber.visual.field.selectOrientationPlaceholder": "Seleccionar orientación",
"settings.openchamber.visual.actions.resetInstallOrientationAria": "Restablecer orientación de instalación",
"settings.openchamber.visual.field.interfaceFontSize": "Tamaño de fuente de la interfaz",
"settings.openchamber.visual.field.interfaceFont": "Fuente de la interfaz",
"settings.openchamber.visual.field.selectInterfaceFontAria": "Seleccionar fuente de interfaz",
"settings.openchamber.visual.actions.resetInterfaceFontAria": "Restablecer fuente de interfaz",
"settings.openchamber.visual.field.fontSizePercentageAria": "Porcentaje de tamaño de fuente",
"settings.openchamber.visual.actions.resetFontSizeAria": "Restablecer tamaño de fuente",
"settings.openchamber.visual.field.terminalFontSize": "Tamaño de fuente del terminal",
"settings.openchamber.visual.field.codeFont": "Fuente de código",
"settings.openchamber.visual.field.selectCodeFontAria": "Seleccionar fuente de código",
"settings.openchamber.visual.actions.resetCodeFontAria": "Restablecer fuente de código",
"settings.openchamber.visual.actions.resetTerminalFontSizeAria": "Restablecer tamaño de fuente del terminal",
"settings.openchamber.visual.field.spacingDensity": "Densidad de espaciado",
"settings.openchamber.visual.actions.resetSpacingAria": "Restablecer espaciado",
packages/ui/src/lib/i18n/messages/pt-BR.settings.ts
+6
View File
@@ -1363,9 +1363,15 @@ export const settingsDict = {
"settings.openchamber.visual.field.selectOrientationPlaceholder": "Selecionar orientação",
"settings.openchamber.visual.actions.resetInstallOrientationAria": "Redefinir orientação de instalação",
"settings.openchamber.visual.field.interfaceFontSize": "Tamanho base da interface",
"settings.openchamber.visual.field.interfaceFont": "Fonte da interface",
"settings.openchamber.visual.field.selectInterfaceFontAria": "Selecionar fonte da interface",
"settings.openchamber.visual.actions.resetInterfaceFontAria": "Redefinir fonte da interface",
"settings.openchamber.visual.field.fontSizePercentageAria": "Porcentagem do tamanho base",
"settings.openchamber.visual.actions.resetFontSizeAria": "Redefinir tamanho base",
"settings.openchamber.visual.field.terminalFontSize": "Tamanho base do terminal",
"settings.openchamber.visual.field.codeFont": "Fonte do código",
"settings.openchamber.visual.field.selectCodeFontAria": "Selecionar fonte do código",
"settings.openchamber.visual.actions.resetCodeFontAria": "Redefinir fonte do código",
"settings.openchamber.visual.actions.resetTerminalFontSizeAria": "Redefinir tamanho base do terminal",
"settings.openchamber.visual.field.spacingDensity": "Densidade de espaçamento",
"settings.openchamber.visual.actions.resetSpacingAria": "Redefinir espaçamento",
packages/ui/src/lib/i18n/messages/uk.settings.ts
+6
View File
@@ -1363,9 +1363,15 @@ export const settingsDict = {
"settings.openchamber.visual.field.selectOrientationPlaceholder": "Вибрати орієнтацію",
"settings.openchamber.visual.actions.resetInstallOrientationAria": "Скинути орієнтацію встановлення",
"settings.openchamber.visual.field.interfaceFontSize": "Розмір шрифту інтерфейсу",
"settings.openchamber.visual.field.interfaceFont": "Шрифт інтерфейсу",
"settings.openchamber.visual.field.selectInterfaceFontAria": "Вибрати шрифт інтерфейсу",
"settings.openchamber.visual.actions.resetInterfaceFontAria": "Скинути шрифт інтерфейсу",
"settings.openchamber.visual.field.fontSizePercentageAria": "Розмір шрифту у відсотках",
"settings.openchamber.visual.actions.resetFontSizeAria": "Скинути розмір шрифту",
"settings.openchamber.visual.field.terminalFontSize": "Розмір шрифту терміналу",
"settings.openchamber.visual.field.codeFont": "Шрифт коду",
"settings.openchamber.visual.field.selectCodeFontAria": "Вибрати шрифт коду",
"settings.openchamber.visual.actions.resetCodeFontAria": "Скинути шрифт коду",
"settings.openchamber.visual.actions.resetTerminalFontSizeAria": "Скинути розмір шрифту терміналу",
"settings.openchamber.visual.field.spacingDensity": "Щільність інтервалу",
"settings.openchamber.visual.actions.resetSpacingAria": "Скинути інтервал",
packages/ui/src/lib/i18n/messages/zh-CN.settings.ts
+6
View File
@@ -1363,9 +1363,15 @@ export const settingsDict = {
'settings.openchamber.visual.field.selectOrientationPlaceholder': '选择方向',
'settings.openchamber.visual.actions.resetInstallOrientationAria': '重置安装方向',
'settings.openchamber.visual.field.interfaceFontSize': '界面字体大小',
'settings.openchamber.visual.field.interfaceFont': '界面字体',
'settings.openchamber.visual.field.selectInterfaceFontAria': '选择界面字体',
'settings.openchamber.visual.actions.resetInterfaceFontAria': '重置界面字体',
'settings.openchamber.visual.field.fontSizePercentageAria': '字体大小百分比',
'settings.openchamber.visual.actions.resetFontSizeAria': '重置字体大小',
'settings.openchamber.visual.field.terminalFontSize': '终端字体大小',
'settings.openchamber.visual.field.codeFont': '代码字体',
'settings.openchamber.visual.field.selectCodeFontAria': '选择代码字体',
'settings.openchamber.visual.actions.resetCodeFontAria': '重置代码字体',
'settings.openchamber.visual.actions.resetTerminalFontSizeAria': '重置终端字体大小',
'settings.openchamber.visual.field.spacingDensity': '间距密度',
'settings.openchamber.visual.actions.resetSpacingAria': '重置间距',
packages/ui/src/lib/persistence.ts
+13
View File
@@ -1,6 +1,7 @@
import type { DesktopSettings } from '@/lib/desktop';
import { createProjectIdFromPath } from '@/lib/projectId';
import { useUIStore } from '@/stores/useUIStore';
import { isMonoFontOption, isUiFontOption } from '@/lib/fontOptions';
import { useMessageQueueStore } from '@/stores/messageQueueStore';
import { setDirectoryShowHidden } from '@/lib/directoryShowHidden';
import { setFilesViewShowGitignored } from '@/lib/filesViewShowGitignored';
@@ -439,6 +440,12 @@ const applyDesktopUiPreferences = (settings: DesktopSettings) => {
if (typeof settings.terminalFontSize === 'number' && Number.isFinite(settings.terminalFontSize) && settings.terminalFontSize !== store.terminalFontSize) {
store.setTerminalFontSize(settings.terminalFontSize);
}
if (isUiFontOption(settings.uiFont) && settings.uiFont !== store.uiFont) {
store.setUiFont(settings.uiFont);
}
if (isMonoFontOption(settings.monoFont) && settings.monoFont !== store.monoFont) {
store.setMonoFont(settings.monoFont);
}
if (typeof settings.padding === 'number' && Number.isFinite(settings.padding) && settings.padding !== store.padding) {
store.setPadding(settings.padding);
}
@@ -852,6 +859,12 @@ const sanitizeWebSettings = (payload: unknown): DesktopSettings | null => {
if (typeof candidate.terminalFontSize === 'number' && Number.isFinite(candidate.terminalFontSize)) {
result.terminalFontSize = candidate.terminalFontSize;
}
if (isUiFontOption(candidate.uiFont)) {
result.uiFont = candidate.uiFont;
}
if (isMonoFontOption(candidate.monoFont)) {
result.monoFont = candidate.monoFont;
}
if (typeof candidate.padding === 'number' && Number.isFinite(candidate.padding)) {
result.padding = candidate.padding;
}
packages/ui/src/stores/useUIStore.ts
+17
View File
@@ -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,