Skip to content

feat(review): custom code font support#855

Open
backnotprop wants to merge 1 commit into
mainfrom
feat/custom-diff-fonts
Open

feat(review): custom code font support#855
backnotprop wants to merge 1 commit into
mainfrom
feat/custom-diff-fonts

Conversation

@backnotprop
Copy link
Copy Markdown
Owner

Closes #851

What

Adds custom font support to the code review diff viewer. Settings → Display → Code Font gains a Custom… option that reveals a text input — type the family name of any font installed on your machine (e.g. an Iosevka variant, Berkeley Mono) and the diff renders in it.

How it works

The rendering pipeline already accepted arbitrary family names (diffOptions.fontFamily is a free string end-to-end); the dropdown was the only gate. This PR is UI + hardening:

  • packages/ui/utils/fontDetect.ts — "✓ Found on this machine / Not found" hint via canvas width measurement against all three generic fallbacks. Deterministic per machine, no permissions, works in every browser. Deliberately avoids document.fonts.check(), whose spec answers "would this need a font load?" — browsers disagree on unregistered families.
  • Settings.tsx — progressive disclosure: select → Custom… → input (rendered in the font as you type) + status hint. Saves debounced 400 ms (each save = cookie write + POST /api/config); pending saves are flushed on unmount and cancelled if a built-in is re-picked, so no lost or stale writes.
  • packages/review-editor/utils/pierreFontCss.ts — the shadow-DOM font CSS block previously duplicated in usePierreTheme and DiffHunkPreview now lives in one place, and escapes quotes/backslashes since the family name is free text.

Notes

  • No server changes — diffOptions already round-trips opaquely through /api/config / config.json.
  • Font resolves on the browser machine, so over SSH it's the reviewer's local fonts that apply (the desirable behavior).
  • Webfont-by-URL and font-file upload were considered and deferred; see Add custom font support for code diffs #851 discussion for the tiered design.

Testing

  • packages/ui typecheck clean, apps/review build clean
  • Manual: built-ins unchanged; custom name renders in input/preview/diff; not-found names fall back to monospace with warning hint; re-picking a built-in mid-debounce keeps the built-in

Adds a "Custom…" option to Settings → Display → Code Font that reveals a
text input for any font installed on the user's machine. The rendering
pipeline already accepted arbitrary family names; this exposes it in the UI.

- fontDetect.ts: installed-font check via canvas width measurement against
  all three generic fallbacks — deterministic, no permissions, no
  document.fonts.check() (spec answers "needs load?", not "installed?")
- Settings: progressive disclosure with found/not-found hint, debounced
  saves (flushed on unmount, cancelled when a built-in is re-picked)
- pierreFontCss.ts: single home for the shadow-DOM font CSS block shared
  by usePierreTheme and DiffHunkPreview; escapes quotes/backslashes now
  that the family name is free text
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add custom font support for code diffs

1 participant