# refactor\(web\): the command palette's add-project views are components · PR \#22707 · pingdotgg/t3code

[View on GitCafe](https://git.cafe/pingdotgg/t3code/pull/22707)

Repository: [pingdotgg/t3code](https://git.cafe/pingdotgg/t3code)

Visibility: public

State: merged

Source repository: pingdotgg/t3code

Source branch: refactor/command-palette-add-project-views

Target branch: refactor/command-palette-project-items

Head commit: 6e79cfb6e523741013cfb58b0fcf457927146306

[Discussion and reviews](https://git.cafe/pingdotgg/t3code/pull/22707)

[Commits](https://git.cafe/pingdotgg/t3code/pull/22707/commits?format=markdown)

[Files changed](https://git.cafe/pingdotgg/t3code/pull/22707/diffs?format=markdown)

## Description

---

`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 4 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 add-project UI into `CommandPaletteAddProject.tsx`: the new-project and repository summaries, one `CommandPaletteSubmitButton` replacing three copies of the tooltip, button and shortcut markup, and `NewProjectPublishHostPicker`. The picker now owns its open state, so opening it re-renders the picker instead of the whole dialog.

| | before | after |
|---|---|---|
| `CommandPalette.tsx` lines | 2876 | 2742 |
| Renders, open palette + type 10 chars (median of 3) | 2352 | 2352 |

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](https://claude.com/claude-code)