refactor(desktop): extract AppearanceSettings into section components by Kitenite · Pull Request #1431 · superset-sh/superset

Kitenite · 2026-02-12T07:41:45Z

Summary

Breaks the monolithic 432-line AppearanceSettings into focused section components following the established TerminalSettings pattern
Deduplicates ~120 lines of nearly identical editor/terminal font code into a single reusable FontSettingSection component parameterized by variant
Uses SectionList for automatic border separators, replacing fragile conditional className logic

Builds on top of #1336 by @uinafdev

Test plan

Open Settings > Appearance and verify all sections render correctly
Verify theme selection, markdown style dropdown, editor font, terminal font, and custom themes sections all work
Verify border separators appear correctly between visible sections
Verify font preview updates live while typing
Verify Reset button works for both editor and terminal fonts

Summary by CodeRabbit

Release Notes

New Features
• Customize font family and size independently for editor and terminal with live preview of changes
• Font settings searchable and accessible from the appearance settings panel
• Reset fonts to system defaults instantly when desired
• Supported font size range: 10-24pt for optimal readability and usability
• Support for Nerd Fonts in terminal configuration

Add configurable font family and font size settings for both terminal panels and editor/diff views in the Appearance settings page. - Add terminal_font_family, terminal_font_size, editor_font_family, editor_font_size columns to local-db settings table - Add getFontSettings/setFontSettings tRPC procedures - Add Editor Font and Terminal Font sections to Appearance settings with text input for font family, number input for size (10-24), and reset to default button - Wire up Terminal to apply custom fonts via xterm options with live updates - Wire up Monaco editor/diff views via useMonacoEditorOptions hook - Add settings search entries for font customization

…ts and live preview

…ption

- Move Zod schema and transform logic to font-settings.utils.ts (single source of truth) and import in both the router and test file - Add .max(500) length limit on font family strings for safety - Add no-op guard to skip DB write when no fields are provided - Remove ineffective defaults test that only asserted its own literals Addresses remaining CodeRabbit review feedback on PR #1336. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

- Add draft state for font size inputs (editor & terminal) so mutations only fire on blur instead of every keystroke, matching the existing font family draft pattern - Replace fake snapshot UUID in migration 0021 with a real UUID v4

…ings # Conflicts: # packages/local-db/drizzle/meta/0021_snapshot.json # packages/local-db/drizzle/meta/_journal.json

…ings # Conflicts: # packages/local-db/src/schema/schema.ts

Break the monolithic 432-line AppearanceSettings into focused section components following the established TerminalSettings pattern: - FontPreview: extracted inline preview component - FontSettingSection: reusable editor/terminal font section (deduplicates ~120 lines) - ThemeSection: owns theme store hooks and grid rendering - MarkdownStyleSection: owns markdown store hooks and select dropdown - CustomThemesSection: placeholder for upcoming feature Use SectionList for automatic border separators, replacing fragile conditional className logic.

coderabbitai · 2026-02-12T07:42:30Z

Caution

Review failed

The pull request is closed.

📝 Walkthrough

Walkthrough

This pull request introduces a complete font settings feature enabling users to customize terminal and editor fonts independently. It adds backend validation and storage, database schema extensions, new UI components for font customization, and integrations with Monaco editor and terminal rendering to dynamically apply user-selected fonts.

Changes

Cohort / File(s)	Summary
Backend Font Settings API `apps/desktop/src/lib/trpc/routers/settings/font-settings.utils.ts`, `font-settings.test.ts`, `index.ts`	Introduces Zod schema for font settings validation (family: max 500 chars, size: 10–24), exposes SetFontSettingsInput type, implements transformFontSettings utility to sanitize inputs (trim strings, convert empty to null), and adds getFontSettings/setFontSettings router endpoints with upsert-like persistence.
Database Schema `packages/local-db/src/schema/schema.ts`	Extends settings table with four new columns: terminalFontFamily, terminalFontSize, editorFontFamily, editorFontSize (text and integer types).
Frontend Font UI Components `apps/desktop/src/renderer/routes/_authenticated/settings/appearance/components/AppearanceSettings/*`	Refactors AppearanceSettings to use reusable SectionList wrapper; introduces FontPreview (styled preview box with variant-based theming), FontSettingSection (dual editor/terminal controls with live preview, optimistic updates, and reset button), ThemeSection, MarkdownStyleSection, and CustomThemesSection as isolated, composable section components.
Settings Search Integration `apps/desktop/src/renderer/routes/_authenticated/settings/utils/settings-search/settings-search.ts`, `settings-search.test.ts`	Adds APPEARANCE_EDITOR_FONT and APPEARANCE_TERMINAL_FONT identifiers to SETTING_ITEM_ID, creates searchable items with keywords (monospace, typography, nerd fonts), and validates search behavior via test suite.
Monaco Editor Integration `apps/desktop/src/renderer/providers/MonacoProvider/MonacoProvider.tsx`, `index.ts`, `apps/desktop/src/renderer/screens/main/components/WorkspaceView/ContentView/TabsContent/TabView/FileViewerPane/components/FileViewerContent/FileViewerContent.tsx`, `...DiffViewer/DiffViewer.tsx`	Introduces useMonacoEditorOptions hook that fetches font settings via electronTrpc and merges fontFamily/fontSize into base MONACO_EDITOR_OPTIONS; replaces static MONACO_EDITOR_OPTIONS usage in DiffViewer and FileViewerContent with dynamic hook-based approach.
Terminal Font Integration `apps/desktop/src/renderer/screens/main/components/WorkspaceView/ContentView/TabsContent/Terminal/Terminal.tsx`, `config.ts`	Exports DEFAULT_TERMINAL_FONT_FAMILY and DEFAULT_TERMINAL_FONT_SIZE from config; adds effect in Terminal.tsx that fetches font settings and applies fontFamily/fontSize to xterm instance with fallbacks to defaults.

Sequence Diagram

sequenceDiagram
    actor User
    participant UI as FontSettingSection<br/>(React Component)
    participant TrpcApi as electronTrpc API<br/>(Settings Router)
    participant Db as Database
    participant Monaco as Monaco Editor<br/>(via Hook)
    participant Terminal as Terminal<br/>(xterm)

    User->>UI: Opens Font Settings
    UI->>TrpcApi: getFontSettings.useQuery()
    TrpcApi->>Db: Query current font settings
    Db-->>TrpcApi: Returns fontFamily, fontSize
    TrpcApi-->>UI: Populate preview with current fonts
    
    User->>UI: Changes font family/size (draft)
    UI->>UI: Update local draft state<br/>(optimistic UI)
    
    User->>UI: Blur / Commit changes
    UI->>TrpcApi: setFontSettings(input)
    TrpcApi->>TrpcApi: Validate via schema<br/>Transform (trim, sanitize)
    TrpcApi->>Db: Upsert settings record
    Db-->>TrpcApi: Confirm update
    TrpcApi-->>UI: Return success
    
    TrpcApi->>Monaco: invalidateQueries (cache refresh)
    TrpcApi->>Terminal: invalidateQueries (cache refresh)
    
    Monaco->>TrpcApi: useMonacoEditorOptions hook fetches fonts
    TrpcApi-->>Monaco: Return merged options<br/>(fontFamily, fontSize)
    Monaco->>Monaco: Apply options to editor instances
    
    Terminal->>TrpcApi: getFontSettings.useQuery()
    TrpcApi-->>Terminal: Return terminal font settings
    Terminal->>Terminal: Apply fontFamily/fontSize<br/>to xterm, call fit()
    
    Monaco-->>User: ✓ Editor displays custom font
    Terminal-->>User: ✓ Terminal displays custom font

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~28 minutes

Possibly related PRs

style(desktop): style Monaco DiffEditor to match LightDiffViewer #1326 — Both modify Monaco editor configuration and dynamic option provisioning via useMonacoEditorOptions hook and its usage in DiffViewer/FileViewerContent.
implement more font and xterm rendering improvements #324 — Both extend Terminal.tsx font handling and refactor Terminal config constants (DEFAULT_TERMINAL_FONT_FAMILY/SIZE).
feat(desktop): Add Tufte-style markdown rendering #523 — Both modify appearance settings UI and introduce MarkdownStyleSection and ThemeSection components in the same AppearanceSettings refactor.

Poem

🐰✨ Fonts flow freely now, from editor pane to terminal shell,
Each character dressed in families of choice, a typographic spell!
Trim the whitespace, validate the range, let Monaco and xterm dance,
For in this PR, dear user, your perfect font found its chance! 🎨

✨ Finishing touches

📝 Generate docstrings

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment
Commit unit tests in branch feat/custom-font-settings

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

github-actions · 2026-02-12T07:44:54Z

🚀 Preview Deployment

🔗 Preview Links

Service	Status	Link
Database (Neon)	✅	View Branch
Electric (Fly.io)	✅	View App
Streams (Fly.io)	✅	View App
API (Vercel)	✅	Open Preview
Web (Vercel)	✅	Open Preview
Marketing (Vercel)	✅	Open Preview
Admin (Vercel)	✅	Open Preview
Docs (Vercel)	✅	Open Preview

Preview updates automatically with new commits

glitch418x and others added 13 commits February 11, 2026 00:47

feat(appearance): improve font settings layout with side-by-side inpu…

ef571c8

…ts and live preview

feat(appearance): make Nerd Fonts a hyperlink in terminal font descri…

b83d278

…ption

chore: remove claude task prompt

7063d5b

test(desktop): add tests for custom font settings

c6f1584

fix(appearance): address CodeRabbit review feedback on font settings

0114b20

Merge remote-tracking branch 'origin/main' into feat/custom-font-sett…

1e9215f

…ings # Conflicts: # packages/local-db/drizzle/meta/0021_snapshot.json # packages/local-db/drizzle/meta/_journal.json

fix: regenerate font settings migration after merge with main

5b5f8a1

chore: remove font settings migration for regeneration

842d3ba

Merge remote-tracking branch 'origin/main' into feat/custom-font-sett…

3dc5dc1

…ings # Conflicts: # packages/local-db/src/schema/schema.ts

Kitenite mentioned this pull request Feb 12, 2026

feat(desktop): custom font settings for terminal and editor #1336

Closed

Kitenite temporarily deployed to preview February 12, 2026 07:43 — with GitHub Actions Inactive

Kitenite merged commit df0510e into main Feb 12, 2026
13 of 14 checks passed

Kitenite deleted the feat/custom-font-settings branch February 12, 2026 07:44

coderabbitai Bot mentioned this pull request Mar 13, 2026

feat(desktop): replace font text input with searchable dropdown, fix broken font loading #2458

Merged

13 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

refactor(desktop): extract AppearanceSettings into section components#1431

refactor(desktop): extract AppearanceSettings into section components#1431
Kitenite merged 13 commits intomainfrom
feat/custom-font-settings

Kitenite commented Feb 12, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

coderabbitai Bot commented Feb 12, 2026 •

edited

Loading

Review failed

Walkthrough

Changes

Sequence Diagram

Estimated code review effort

Possibly related PRs

Poem

Uh oh!

Uh oh!

github-actions Bot commented Feb 12, 2026 •

edited

Loading

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

Kitenite commented Feb 12, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Test plan

Summary by CodeRabbit

Release Notes

Uh oh!

coderabbitai Bot commented Feb 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review failed

Walkthrough

Changes

Sequence Diagram

Estimated code review effort

Possibly related PRs

Poem

Uh oh!

Uh oh!

github-actions Bot commented Feb 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🚀 Preview Deployment

🔗 Preview Links

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Kitenite commented Feb 12, 2026 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented Feb 12, 2026 •

edited

Loading

github-actions Bot commented Feb 12, 2026 •

edited

Loading