feat(web): add local typography settings by Danielalnajjar · Pull Request #1337 · pingdotgg/t3code

Danielalnajjar · 2026-03-23T18:56:47Z

Add local typography settings for the app UI so users can tune interface scale, font family, and terminal typography without editing config files. This responds directly to requests for UI font size and custom font support, while keeping the scope local-only and avoiding remote font loading.

Feedback requested

I'd appreciate feedback mainly on product fit and scope:

whether the split between interface font vs. code and terminal font feels right
whether the mono font family should continue to affect existing monospace UI surfaces outside explicit code blocks and the terminal, or whether that scope should be narrowed further
whether live terminal updates are the right behavior, or if the terminal should require a reopen
Interface font size currently scales the rem/inherited UI, but not every existing px-sized surface. If you want broader coverage, I can follow up by converting representative fixed-size UI text to participate in the interface scale.

Suggested review order

apps/web/src/appSettings.ts and apps/web/src/appTypography.ts
apps/web/src/index.css and apps/web/src/routes/__root.tsx
apps/web/src/routes/_chat.settings.tsx
apps/web/src/components/ThreadTerminalDrawer.tsx
the focused tests

What changed

persist four local settings: uiFontSize, terminalFontSize, uiFontFamily, and monoFontFamily
apply typography through root CSS custom properties
keep normal UI inputs and the composer on the interface font
keep inline code, fenced code, the built-in terminal, and existing monospace UI surfaces on the mono font
update xterm in place and re-fit geometry when terminal typography changes

Scope boundaries

This PR intentionally does not add remote font loading, server-side settings sync, or broader theming work. It is meant to stay narrowly focused on local typography preferences.

Verification

I ran:

bun fmt
bun lint
bun typecheck
cd apps/web && bun run test src/appSettings.test.ts src/appTypography.test.ts src/components/ThreadTerminalDrawer.test.ts

I also manually checked the feature locally in the dev app:

typography controls render in Settings
interface and mono font scopes apply to the expected surfaces
terminal typography updates live without recreating the terminal drawer

Test gap

I did not use repo-root bun run test as a PR gate here because the current upstream main checkout already has unrelated red apps/server tests in my environment. The failures reproduce outside this branch and are not in files touched by this PR.

Screenshots

These visuals are meant to show the new Typography settings surface and the visible difference between the default, large, and small interface font sizes.

Settings screen

Before:

After:

Interface font size examples

Small:

Default:

Large:

Video

Video.mp4

Living plan file use for implementation

18-local-typography-settings.md

Adds uiFontSize, terminalFontSize, uiFontFamily, and monoFontFamily fields to AppSettingsSchema, with defaults of md size and empty family overrides.
Introduces useAppTypography hook that writes CSS variables (--app-ui-font-size, --app-terminal-font-size, --app-ui-font-family, --app-mono-font-family) to the document root and keeps them in sync with settings changes.
Updates index.css to drive base font size and family from these CSS variables, including code blocks and terminal textarea.
Adds a Typography section to the Settings route where users can select font sizes and enter optional font family stacks, with a reset button to restore defaults.
Refactors ThreadTerminalDrawer to read font settings from CSS variables on mount and react to style/theme mutations via observers, replacing the resizeEpoch/drawerHeight prop approach.
Behavioral Change: existing persisted settings missing the new keys will receive default values on next decode.

^{Macroscope summarized d388c21.}

Persist local typography preferences in app settings so the UI and terminal can read a stable source of truth. Key files: - apps/web/src/appSettings.ts: adds ui and terminal font size/family settings to persisted app settings - apps/web/src/appSettings.test.ts: covers defaults and decoding for the new typography settings Design decisions: - Store typography alongside existing local app settings so the feature remains device-local. - Keep font family values as trimmed free-form strings so installed system fonts can be referenced directly. Unlocks root typography application and settings UI controls. Generated with OpenAI Codex

Apply persisted typography settings to interface, code, and terminal surfaces through root-level CSS variables. Key files: - apps/web/src/appTypography.ts: maps settings to CSS variables and terminal typography helpers - apps/web/src/appTypography.test.ts: verifies size mappings and font normalization - apps/web/src/routes/__root.tsx: mounts typography application at app startup - apps/web/src/index.css: wires interface and code font variables into global styles Design decisions: - Use CSS custom properties at the root so typography updates propagate without component rewrites. - Keep regular UI inputs on the interface font while reserving the mono stack for code and terminal surfaces. Unlocks settings-driven typography changes across the app and terminal runtime. Generated with OpenAI Codex

Expose typography settings in the Settings screen so users can adjust scale and local font stacks without editing config files. Key files: - apps/web/src/routes/_chat.settings.tsx: adds the Typography card, control wiring, defaults, and helper copy Design decisions: - Group UI scale and font stack controls under a single Typography card for discoverability. - Describe interface and code or terminal scopes separately so users can predict which surfaces each setting affects. Unlocks self-serve configuration for interface and terminal typography. Generated with OpenAI Codex

Update the integrated terminal drawer when typography settings change so users can preview terminal adjustments immediately. Key files: - apps/web/src/components/ThreadTerminalDrawer.tsx: reads terminal typography, updates xterm options, and resyncs geometry - apps/web/src/components/ThreadTerminalDrawer.test.ts: covers appearance updates and backend resize syncing Design decisions: - Update xterm appearance in place instead of recreating terminals to preserve scrollback and session state. - Refit and report terminal geometry after font changes so backend dimensions stay accurate. Unlocks live terminal typography previews from the settings screen. Generated with OpenAI Codex

coderabbitai · 2026-03-23T18:56:57Z

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: 7953b5b7-bc15-4e1b-8778-aaca9da822a6

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

🔍 Trigger review

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

Copilot

Pull request overview

Adds local-only typography preferences to the web app, letting users adjust interface scale and font stacks (UI + mono/terminal) via Settings and applying them through root CSS variables, including live terminal updates.

Changes:

Persist new settings: uiFontSize, terminalFontSize, uiFontFamily, monoFontFamily (with defaults/backfill on decode).
Apply typography via CSS custom properties and initialize them at app root via useAppTypography.
Update the built-in terminal drawer to react to theme/typography changes and re-sync geometry without recreating the terminal.

Reviewed changes

Copilot reviewed 9 out of 9 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
apps/web/src/appSettings.ts	Adds new typography settings fields/types/defaults to the persisted settings schema.
apps/web/src/appSettings.test.ts	Extends schema default/backfill test coverage for new settings keys.
apps/web/src/appTypography.ts	Introduces typography helpers and `useAppTypography` to drive root CSS variables; adds terminal typography reader.
apps/web/src/appTypography.test.ts	Adds unit tests for font-size mapping and font-family normalization.
apps/web/src/index.css	Defines default typography CSS variables and wires them into `html`/`body` and mono surfaces.
apps/web/src/routes/__root.tsx	Installs `useAppTypography` at the root so CSS variables stay in sync with settings.
apps/web/src/routes/_chat.settings.tsx	Adds a new “Typography” section in Settings for changing font sizes and font-family overrides.
apps/web/src/components/ThreadTerminalDrawer.tsx	Refactors terminal to read typography from CSS vars and live-update appearance/geometry via observers.
apps/web/src/components/ThreadTerminalDrawer.test.ts	Adds focused unit tests for the extracted terminal appearance/geometry helpers.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-03-23T20:58:19Z

apps/web/src/routes/_chat.settings.tsx

                    <p>Binary source</p>
-                    <p className="mt-1 break-all font-mono text-[11px] text-foreground">
+                    <p className="mt-1 break-all text-[11px] text-foreground">
                      {codexBinaryPath || "PATH"}


The "Binary source" path line used to be rendered with font-mono, but this change drops monospace styling. This seems to conflict with the PR description that existing monospace UI surfaces should remain on the mono font family (and it’s inconsistent with the Keybindings path below which is still monospace). Consider restoring font-mono/<code> here, or updating the intended scope/description so path readouts are consistently styled.

Copilot · 2026-03-23T20:58:20Z

apps/web/src/appTypography.ts

+const DEFAULT_MONO_FONT_FAMILY =
+  '"SF Mono", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace';


DEFAULT_MONO_FONT_FAMILY duplicates the default mono stack defined in index.css (--app-mono-font-family). This creates a drift risk where the terminal fallback and the CSS default could diverge over time. Consider reusing a single source of truth (e.g., export the default stack from one place, or fall back to a generic monospace when the CSS variable is missing).

Suggested change

const DEFAULT_MONO_FONT_FAMILY =

'"SF Mono", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace';

const DEFAULT_MONO_FONT_FAMILY = "monospace";

Danielalnajjar added 4 commits March 23, 2026 11:05

github-actions bot added size:XL 500-999 changed lines (additions + deletions). vouch:unvouched PR author is not yet trusted in the VOUCHED list. labels Mar 23, 2026

Danielalnajjar marked this pull request as ready for review March 23, 2026 20:54

Copilot AI review requested due to automatic review settings March 23, 2026 20:54

Copilot started reviewing on behalf of Danielalnajjar March 23, 2026 20:54 View session

Copilot AI reviewed Mar 23, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(web): add local typography settings#1337

feat(web): add local typography settings#1337
Danielalnajjar wants to merge 4 commits intopingdotgg:mainfrom
Danielalnajjar:codex/typography-settings

Danielalnajjar commented Mar 23, 2026 •

edited by macroscopeapp bot

Loading

Uh oh!

coderabbitai bot commented Mar 23, 2026 •

edited

Loading

Review skipped

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Mar 23, 2026

Uh oh!

Copilot AI Mar 23, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

		const DEFAULT_MONO_FONT_FAMILY =
		'"SF Mono", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace';

	const DEFAULT_MONO_FONT_FAMILY =
	'"SF Mono", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace';
	const DEFAULT_MONO_FONT_FAMILY = "monospace";

Conversation

Danielalnajjar commented Mar 23, 2026 • edited by macroscopeapp bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Feedback requested

Suggested review order

What changed

Scope boundaries

Verification

Test gap

Screenshots

Settings screen

Interface font size examples

Video

Living plan file use for implementation

Related

Add local typography settings for UI font size, terminal font size, and font family overrides

Uh oh!

coderabbitai bot commented Mar 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review skipped

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Mar 23, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 23, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Danielalnajjar commented Mar 23, 2026 •

edited by macroscopeapp bot

Loading

coderabbitai bot commented Mar 23, 2026 •

edited

Loading