refactor(web): the typography settings section lives in its own file #22667 · pingdotgg/t3code

File	Before	After
SettingsPanels.tsx	3339	2836
TypographySettings.tsx	-	522

MmacroscopeappBotapproved these changes3d ago

Approvability

Verdict: Approved at 63fccba

Macroscope's review found this PR approvable — This is a focused refactor that moves the existing typography settings implementation into its own module without changing defaults, behavior, or persistence. The parent component now imports the same component, and no sensitive or static-analysis configuration is affected.

^{You can add or adjust custom eligibility rules. Learn more.}

CcoderabbitaiBot3d ago

Review in Change Stack →

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.config.ts
Review profile: CHILL
Plan: Team
Run ID: 1a7d0922-f224-4b63-8c47-3a0ba04e823e

📥 Commits

Reviewing files that changed from the base of the PR and between 1e2c33f055c612c9f46f43847a66196ae7c35778 and 63fccbaa87630349d22f3ec16e8d61771041bcdb.

📒 Files selected for processing: 2

apps/web/src/components/settings/SettingsPanels.tsx
apps/web/src/components/settings/TypographySettings.tsx

Included review availability: This review used your included allowance. Your plan provides up to 10 included reviews per hour; 7 remain after this review.

📝 Walkthrough

Typography controls move from SettingsPanels.tsx into TypographySettings.tsx. The new module provides font-family and size controls, previews, word-wrap and font-smoothing settings, and simple and advanced layouts.

Changes: Typography settings

Layer / File(s)	Summary
Font-family editing `apps/web/src/components/settings/TypographySettings.tsx`	A reusable font-family editor validates installed fonts, requires monospace fonts where applicable, and allows blank values. It debounces commits, flushes on blur or Enter, cancels on Escape, and rejects stale updates.
Typography controls `apps/web/src/components/settings/TypographySettings.tsx`	Font rows bind family and size settings, apply defaults and reset actions, and render previews. Word wrapping and macOS font smoothing have separate controls.
Settings composition and integration `apps/web/src/components/settings/TypographySettings.tsx`, `apps/web/src/components/settings/SettingsPanels.tsx`	Simple mode groups code and terminal presentation under shared monospace controls; advanced mode provides separate rows. `TypographySection` persists advanced-mode selection and expands for matching search targets. `SettingsPanels.tsx` imports the section and removes the former in-file typography implementation and related imports.

Priority: ⬇️ Low

Estimated code review effort: 3 (Moderate) | ~25 minutes

Change: Refactor

Suggested reviewers: maria-rcks

Merge Risk: ⚪ Minimal · up to 63fcc

This refactor moves the typography settings into their own file without changing behavior. No merge-blocking risk was identified.

Pre-merge checks: ^Passed 3 · ^Failed 1

^Failed Failed checks: 1 warning

Check name	Status	Explanation	Resolution
Description check	Warning	The description explains the file move and lists verification commands, but it omits the required Problem and Scope and approval sections. It also does not provide the required before/after screenshot…	Add a Problem section with expected behavior and context. Add a Scope and approval section with the linked issue or maintainer approval, or explain why the focused refactor qualifies for an exemption. Add before/after screenshots, and inclu…

^Passed Passed checks: 3 passed

Check name	Status	Explanation
Title check	Passed	The title clearly and concisely describes the primary change: moving the typography settings section into its own file.
Linked Issues check	Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	Passed	Check skipped because no linked issues were found for this pull request.

Full details: Description check

Explanation

The description explains the file move and lists verification commands, but it omits the required Problem and Scope and approval sections. It also does not provide the required before/after screenshots for a UI change.

Resolution

Add a Problem section with expected behavior and context. Add a Scope and approval section with the linked issue or maintainer approval, or explain why the focused refactor qualifies for an exemption. Add before/after screenshots, and include a Verification heading with the observed results and any checks that were not possible.

✨ Finishing Touches

📝 Generate docstrings

Commit to this branch
Create a new PR

🧪 Generate unit tests (beta)

Commit to this branch
Create a new PR

Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

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

refactor(web): the typography settings section lives in its own file#22667

Checks

Approvability