refactor(web): the command palette's theme items live in their own file#22679

merged1
main
refactor/command-palette-theme-items
opened4d agobyJJulius Marminge
View on GitHubTwo-way sync enabledPR last imported 4d ago

CommandPalette.tsx is ~3,400 lines: one 2,600-line dialog component builds every item, runs every add-project flow, and renders the results. Layer 1 of a stack that splits it into focused files so each piece reads on its own and the React Compiler caches each piece on its own inputs.

Moves the theme, appearance and theme-editor items, plus the appearance options and save-failure toast the global shortcuts share, into CommandPaletteThemeItems.tsx. useCommandPaletteThemeItems reads useTheme and the theme cards itself, so the dialog no longer holds seven theme values only those items use.

beforeafter
CommandPalette.tsx lines33883249
Renders, open palette + type 10 chars (median of 3)26722684

Measured with the fiber render counter, same browser session and seeded dev DB, swapping only the palette files between this layer and the one below it. Behavior is unchanged.

Tests: vp test run src/reactCompilerCoverage.test.ts -t CommandPalette (0 bailouts, new files included), vp test run src/components/CommandPalette.logic.test.ts, tsc --noEmit for apps/web, vp lint on changed files.

🤖 Generated with Claude Code

Checks

All checks passed

Added 1 commit

  • refactor(web): the command palette's theme items live in their own file159fdb5
Synced from GitHub

Approvability

Verdict: Approved at 159fdb5

Macroscope's review found this PR approvable — This PR moves existing command-palette theme and appearance item construction into a focused hook/module while preserving the prior callbacks and shortcut behavior. It does not change product defaults or add static-analysis suppressions, and its runtime impact is limited to code organization.

You can add or adjust custom eligibility rules. Learn more.

Synced from GitHub

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: e382c13d-d385-4b90-9bec-17d226a24338
📥 Commits

Reviewing files that changed from the base of the PR and between 6a6c84f9906cbdfa7f533fecfc39ce18c2f4c273 and 159fdb5320101963dad5015646ea3eb98b5b82c2.

📒 Files selected for processing: 2
  • apps/web/src/components/CommandPalette.tsx
  • apps/web/src/components/CommandPaletteThemeItems.tsx

Limit details: You’ve used all 10 included reviews currently available.

📝 Walkthrough

Theme and appearance command-item definitions moved from CommandPalette.tsx to CommandPaletteThemeItems.tsx. The palette now uses a hook from that module to add theme selection, appearance selection, and theme-editor actions.

Changes: Theme controls

Layer / File(s)Summary
Build theme and appearance items
apps/web/src/components/CommandPaletteThemeItems.tsx
The module defines appearance options and builds deduplicated theme cards. It creates theme, appearance, and theme-editor command items, with error notifications when saves fail.
Use theme items in the palette
apps/web/src/components/CommandPalette.tsx
The palette uses the new hook and adds its returned items to the command menu. Local theme-card construction and theme-item logic were removed.

Priority: ⬇️ Low

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

Change: Refactor

Suggested reviewers: maria-rcks

Merge Risk: ⚪ Minimal · up to 159fd

The theme controls retain their existing behavior, and no issue remains that should block merging.

Pre-merge checks: Passed 3 · Failed 1

Failed Failed checks: 1 warning

Check nameStatusExplanationResolution
Description checkWarningThe description explains the refactor and includes focused verification results, but it omits the required Scope and approval section and does not provide the required issue, approval, or exemption ra…Add a Scope and approval section. Link the triaged issue or maintainer approval with the approval comment, or explain why this focused refactor qualifies for an exemption. Retain the existing change and verification details, and organize th…
Passed Passed checks: 3 passed
Check nameStatusExplanation
Title checkPassedThe title clearly and concisely describes the main refactor: moving command-palette theme items into a separate file.
Linked Issues checkPassedCheck skipped because no linked issues were found for this pull request.
Out of Scope Changes checkPassedCheck skipped because no linked issues were found for this pull request.
Full details: Description check

Explanation

The description explains the refactor and includes focused verification results, but it omits the required Scope and approval section and does not provide the required issue, approval, or exemption rationale.

Resolution

Add a Scope and approval section. Link the triaged issue or maintainer approval with the approval comment, or explain why this focused refactor qualifies for an exemption. Retain the existing change and verification details, and organize them under Problem, Change, Scope and approval, and Verification headings.

✨ 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

Usage-based review receipt

Note

This review was completed with usage-based billing: files reviewed beyond your plan's included limits are billed at $0.25/file. View usage-based billing.

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