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

feat(settings): add terminal font size controls (#294)

Browse Source 
* feat(settings): add terminal font size configuration

* chore(desktop): drop terminal font size setting
This commit is contained in:
shekohex
2026-02-04 16:32:25 +02:00
committed by GitHub
parent ea0deec14d
commit def6257985
9 changed files with 106 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/src/components/sections/openchamber/OpenChamberPage.tsx
+1 -1
View File
@@ -83,7 +83,7 @@ export const OpenChamberPage: React.FC<OpenChamberPageProps> = ({ section }) =>
// Visual section: Theme Mode, Font Size, Spacing, Corner Radius, Input Bar Offset (mobile)
const VisualSectionContent: React.FC = () => {
return <OpenChamberVisualSettings visibleSettings={['theme', 'fontSize', 'spacing', 'cornerRadius', 'inputBarOffset', 'terminalQuickKeys']} />;
return <OpenChamberVisualSettings visibleSettings={['theme', 'fontSize', 'terminalFontSize', 'spacing', 'cornerRadius', 'inputBarOffset', 'terminalQuickKeys']} />;
};
// Chat section: Default Tool Output, Diff layout, Show reasoning traces, Queue mode
packages/ui/src/components/sections/openchamber/OpenChamberVisualSettings.tsx
+75 -1
View File
@@ -82,7 +82,7 @@ const DIFF_VIEW_MODE_OPTIONS: Option<'single' | 'stacked'>[] = [
},
];
export type VisibleSetting = 'theme' | 'fontSize' | 'spacing' | 'cornerRadius' | 'inputBarOffset' | 'toolOutput' | 'diffLayout' | 'dotfiles' | 'reasoning' | 'queueMode' | 'textJustificationActivity' | 'terminalQuickKeys';
export type VisibleSetting = 'theme' | 'fontSize' | 'terminalFontSize' | 'spacing' | 'cornerRadius' | 'inputBarOffset' | 'toolOutput' | 'diffLayout' | 'dotfiles' | 'reasoning' | 'queueMode' | 'textJustificationActivity' | 'terminalQuickKeys';
interface OpenChamberVisualSettingsProps {
/** Which settings to show. If undefined, shows all. */
@@ -100,6 +100,8 @@ export const OpenChamberVisualSettings: React.FC<OpenChamberVisualSettingsProps>
const setToolCallExpansion = useUIStore(state => state.setToolCallExpansion);
const fontSize = useUIStore(state => state.fontSize);
const setFontSize = useUIStore(state => state.setFontSize);
const terminalFontSize = useUIStore(state => state.terminalFontSize);
const setTerminalFontSize = useUIStore(state => state.setTerminalFontSize);
const padding = useUIStore(state => state.padding);
const setPadding = useUIStore(state => state.setPadding);
const cornerRadius = useUIStore(state => state.cornerRadius);
@@ -284,6 +286,78 @@ export const OpenChamberVisualSettings: React.FC<OpenChamberVisualSettingsProps>
</div>
)}
{shouldShow('terminalFontSize') && (
<div className="space-y-4">
<div className="space-y-1">
<h3 className="typography-ui-header font-semibold text-foreground">
Terminal Font Size
</h3>
</div>
{isMobile ? (
<div className="flex items-center gap-2 w-full">
<input
type="range"
min="9"
max="52"
step="1"
value={terminalFontSize}
onChange={(e) => setTerminalFontSize(Number(e.target.value))}
className="flex-1 min-w-0 h-3 bg-muted rounded-full appearance-none cursor-pointer [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-5 [&::-webkit-slider-thumb]:h-5 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-primary [&::-moz-range-thumb]:w-5 [&::-moz-range-thumb]:h-5 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:bg-primary [&::-moz-range-thumb]:border-0"
aria-label="Terminal font size"
/>
<span className="typography-ui-label font-medium text-foreground tabular-nums rounded-md border border-border bg-background px-2 py-1.5 min-w-[3.75rem] text-center">
{terminalFontSize}px
</span>
<ButtonSmall
type="button"
variant="ghost"
onClick={() => setTerminalFontSize(13)}
disabled={terminalFontSize === 13}
className="h-8 w-8 px-0 border border-border bg-background hover:bg-interactive-hover disabled:opacity-100 disabled:bg-background"
aria-label="Reset terminal font size"
title="Reset"
>
<RiRestartLine className="h-3.5 w-3.5" />
</ButtonSmall>
</div>
) : (
<div className="flex items-center gap-3 w-full max-w-md">
<input
type="range"
min="9"
max="52"
step="1"
value={terminalFontSize}
onChange={(e) => setTerminalFontSize(Number(e.target.value))}
className="flex-1 min-w-0 h-2 bg-muted rounded-lg appearance-none cursor-pointer [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:h-4 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-primary [&::-moz-range-thumb]:w-4 [&::-moz-range-thumb]:h-4 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:bg-primary [&::-moz-range-thumb]:border-0"
/>
<NumberInput
value={terminalFontSize}
onValueChange={setTerminalFontSize}
min={9}
max={52}
step={1}
aria-label="Terminal font size"
/>
<ButtonSmall
type="button"
variant="ghost"
onClick={() => setTerminalFontSize(13)}
disabled={terminalFontSize === 13}
className="h-8 w-8 px-0 border border-border bg-background hover:bg-interactive-hover disabled:opacity-100 disabled:bg-background"
aria-label="Reset terminal font size"
title="Reset"
>
<RiRestartLine className="h-3.5 w-3.5" />
</ButtonSmall>
</div>
)}
</div>
)}
{shouldShow('spacing') && (
<div className="space-y-4">
<div className="space-y-1">
packages/ui/src/components/views/TerminalView.tsx
+3 -4
View File
@@ -19,8 +19,6 @@ import { useDeviceInfo } from '@/lib/device';
import { useRuntimeAPIs } from '@/hooks/useRuntimeAPIs';
import { isDesktopRuntime, isWebRuntime } from '@/lib/desktop';
const TERMINAL_FONT_SIZE = 13;
type Modifier = 'ctrl' | 'cmd';
type MobileKey =
| 'esc'
@@ -79,6 +77,7 @@ export const TerminalView: React.FC = () => {
const { terminal } = useRuntimeAPIs();
const { currentTheme } = useThemeSystem();
const { monoFont } = useFontPreferences();
const terminalFontSize = useUIStore(state => state.terminalFontSize);
const { isMobile, hasTouchInput } = useDeviceInfo();
const enableTabs = !isMobile && (isWebRuntime() || isDesktopRuntime());
const showTerminalQuickKeysOnDesktop = useUIStore((state) => state.showTerminalQuickKeysOnDesktop);
@@ -973,7 +972,7 @@ export const TerminalView: React.FC = () => {
onResize={handleViewportResize}
theme={xtermTheme}
fontFamily={resolvedFontStack}
fontSize={TERMINAL_FONT_SIZE}
fontSize={terminalFontSize}
enableTouchScroll={hasTouchInput}
/>
) : (
@@ -989,7 +988,7 @@ export const TerminalView: React.FC = () => {
onResize={handleViewportResize}
theme={xtermTheme}
fontFamily={resolvedFontStack}
fontSize={TERMINAL_FONT_SIZE}
fontSize={terminalFontSize}
enableTouchScroll={hasTouchInput}
/>
</ScrollableOverlay>
packages/ui/src/lib/api/types.ts
+1
View File
@@ -403,6 +403,7 @@ export interface SettingsPayload {
gitmojiEnabled?: boolean;
toolCallExpansion?: 'collapsed' | 'activity' | 'detailed';
fontSize?: number;
terminalFontSize?: number;
padding?: number;
cornerRadius?: number;
inputBarOffset?: number;
packages/ui/src/lib/appearanceAutoSave.ts
+6
View File
@@ -12,6 +12,7 @@ type AppearanceSlice = {
autoDeleteAfterDays: number;
toolCallExpansion: 'collapsed' | 'activity' | 'detailed';
fontSize: number;
terminalFontSize: number;
padding: number;
cornerRadius: number;
inputBarOffset: number;
@@ -38,6 +39,7 @@ export const startAppearanceAutoSave = (): void => {
autoDeleteAfterDays: useUIStore.getState().autoDeleteAfterDays,
toolCallExpansion: useUIStore.getState().toolCallExpansion,
fontSize: useUIStore.getState().fontSize,
terminalFontSize: useUIStore.getState().terminalFontSize,
padding: useUIStore.getState().padding,
cornerRadius: useUIStore.getState().cornerRadius,
inputBarOffset: useUIStore.getState().inputBarOffset,
@@ -76,6 +78,7 @@ export const startAppearanceAutoSave = (): void => {
autoDeleteAfterDays: state.autoDeleteAfterDays,
toolCallExpansion: state.toolCallExpansion,
fontSize: state.fontSize,
terminalFontSize: state.terminalFontSize,
padding: state.padding,
cornerRadius: state.cornerRadius,
inputBarOffset: state.inputBarOffset,
@@ -112,6 +115,9 @@ export const startAppearanceAutoSave = (): void => {
if (current.fontSize !== previous.fontSize) {
diff.fontSize = current.fontSize;
}
if (current.terminalFontSize !== previous.terminalFontSize) {
diff.terminalFontSize = current.terminalFontSize;
}
if (current.padding !== previous.padding) {
diff.padding = current.padding;
}
packages/ui/src/lib/desktop.ts
+1
View File
@@ -70,6 +70,7 @@ export type DesktopSettings = {
gitmojiEnabled?: boolean;
toolCallExpansion?: 'collapsed' | 'activity' | 'detailed';
fontSize?: number;
terminalFontSize?: number;
padding?: number;
cornerRadius?: number;
inputBarOffset?: number;
packages/ui/src/lib/persistence.ts
+6
View File
@@ -228,6 +228,9 @@ const applyDesktopUiPreferences = (settings: DesktopSettings) => {
if (typeof settings.fontSize === 'number' && Number.isFinite(settings.fontSize) && settings.fontSize !== store.fontSize) {
store.setFontSize(settings.fontSize);
}
if (typeof settings.terminalFontSize === 'number' && Number.isFinite(settings.terminalFontSize) && settings.terminalFontSize !== store.terminalFontSize) {
store.setTerminalFontSize(settings.terminalFontSize);
}
if (typeof settings.padding === 'number' && Number.isFinite(settings.padding) && settings.padding !== store.padding) {
store.setPadding(settings.padding);
}
@@ -376,6 +379,9 @@ const sanitizeWebSettings = (payload: unknown): DesktopSettings | null => {
if (typeof candidate.fontSize === 'number' && Number.isFinite(candidate.fontSize)) {
result.fontSize = candidate.fontSize;
}
if (typeof candidate.terminalFontSize === 'number' && Number.isFinite(candidate.terminalFontSize)) {
result.terminalFontSize = candidate.terminalFontSize;
}
if (typeof candidate.padding === 'number' && Number.isFinite(candidate.padding)) {
result.padding = candidate.padding;
}
packages/ui/src/stores/useUIStore.ts
+10
View File
@@ -51,6 +51,7 @@ interface UIStore {
toolCallExpansion: 'collapsed' | 'activity' | 'detailed';
fontSize: number;
terminalFontSize: number;
padding: number;
cornerRadius: number;
inputBarOffset: number;
@@ -104,6 +105,7 @@ interface UIStore {
setMemoryLimitActiveSession: (value: number) => void;
setToolCallExpansion: (value: 'collapsed' | 'activity' | 'detailed') => void;
setFontSize: (size: number) => void;
setTerminalFontSize: (size: number) => void;
setPadding: (size: number) => void;
setCornerRadius: (radius: number) => void;
setInputBarOffset: (offset: number) => void;
@@ -168,6 +170,7 @@ export const useUIStore = create<UIStore>()(
memoryLimitActiveSession: 180,
toolCallExpansion: 'collapsed',
fontSize: 100,
terminalFontSize: 13,
padding: 100,
cornerRadius: 12,
inputBarOffset: 0,
@@ -403,6 +406,12 @@ export const useUIStore = create<UIStore>()(
get().applyTypography();
},
setTerminalFontSize: (size) => {
const rounded = Math.round(size);
const clamped = Math.max(9, Math.min(52, rounded));
set({ terminalFontSize: clamped });
},
setPadding: (size) => {
// Clamp between 50% and 200%
const clampedSize = Math.max(50, Math.min(200, size));
@@ -680,6 +689,7 @@ export const useUIStore = create<UIStore>()(
memoryLimitActiveSession: state.memoryLimitActiveSession,
toolCallExpansion: state.toolCallExpansion,
fontSize: state.fontSize,
terminalFontSize: state.terminalFontSize,
padding: state.padding,
cornerRadius: state.cornerRadius,
favoriteModels: state.favoriteModels,
packages/web/server/index.js
+3
View File
@@ -1034,6 +1034,9 @@ const sanitizeSettingsUpdate = (payload) => {
if (typeof candidate.fontSize === 'number' && Number.isFinite(candidate.fontSize)) {
result.fontSize = Math.max(50, Math.min(200, Math.round(candidate.fontSize)));
}
if (typeof candidate.terminalFontSize === 'number' && Number.isFinite(candidate.terminalFontSize)) {
result.terminalFontSize = Math.max(9, Math.min(52, Math.round(candidate.terminalFontSize)));
}
if (typeof candidate.padding === 'number' && Number.isFinite(candidate.padding)) {
result.padding = Math.max(50, Math.min(200, Math.round(candidate.padding)));
}