feat(web): make the sidebar project filter a searchable combobox

[SunkenInTime]

Note

Supersedes #5925, which was closed while this was reworked after #5923 removed the standalone projects settings page. This is an author-initiated adaptation; the earlier claim that a maintainer suggested this combobox direction was unsupported and has been retracted.

What changed

Replaces the sidebar project-scope Menu with the existing Base UI Combobox composition and adds an in-popup search field.

• The trigger keeps the same favicon, scope label, chevron, and dimensions.
• Opening focuses the search field; typing filters project display names with useComboboxFilter().contains.
• Enter selects the highlighted result, Escape closes the popup, and every close path clears the query.
• All projects appears only when a project scope is active and the query is empty, so it acts as a reset without outranking a typed project match.
• No-hit queries render No matching projects.
• Opening a project-settings route closes the popup and clears its query.
• The rebase preserves the current sidebar row padding from fix(web): give sidebar project menu rows the same side padding as other menus #7913.

Scope

• Web: changed and exercised in Chrome.
• Desktop: changed through the shared apps/web renderer; the packaged Electron shell was not run.
• Mobile: unchanged. Its React Native and native project filters do not use this component.
• Server, contracts, providers, and connection modes: unchanged. No request, event, persistence, or remote-transport behavior changed.

Review context

The previous description said this was “the suggested direction” after #5923. There is no maintainer quote or public source supporting that design attribution. The claim was incorrect, so this description now records the feature as the author's follow-up to the removed route.

Before

After, light

After, dark

Interaction

Watch open, type, Enter, Escape, and query reset

Verification

• pnpm exec vp test run apps/web/src/components/Sidebar.logic.test.ts — 114/114 tests passed. Focused cases cover scoped and unscoped reset visibility, hiding the reset while typing, filtering and no-match behavior, close-driven query clearing, and the project-settings close path.
• pnpm exec vp fmt --check apps/web/src/components/Sidebar.tsx apps/web/src/components/Sidebar.logic.ts apps/web/src/components/Sidebar.logic.test.ts — all three files formatted.
• pnpm exec vp lint apps/web/src/components/Sidebar.tsx apps/web/src/components/Sidebar.logic.ts apps/web/src/components/Sidebar.logic.test.ts — passed.
• pnpm --filter @t3tools/web typecheck — passed.
• git diff --check — passed.
• Integrated Chrome pass against an isolated T3 home with three safe fixture projects: open/autofocus, filtering, Enter selection, Escape close, and cleared query on reopen all worked.

Risk and untested paths

Risk is limited to the shared web sidebar interaction. The state transitions and filtering seam have focused tests, and the current-head CI suite is green. A packaged Electron build was not launched, and mobile was not exercised because it does not share this UI path.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 2193c216-0746-4c32-8b9f-97dd9c45a7ba

📥 Commits

Reviewing files that changed from the base of the PR and between f94a0d6 and 84c7347.

📒 Files selected for processing (3)

• apps/web/src/components/Sidebar.logic.test.ts
• apps/web/src/components/Sidebar.logic.ts
• apps/web/src/components/Sidebar.tsx

Included review availability: Your plan provides up to 10 included reviews per hour; 9 remain after this review.

---

📝 Walkthrough

Walkthrough

The sidebar project-scope selector now uses a searchable Combobox. New filtering helpers and a reducer manage query, open, reset, and project-settings behavior. Tests cover filtering and state transitions.

Changes

Project-scope menu

Layer / File(s)	Summary
Scope filtering and menu state apps/web/src/components/Sidebar.logic.ts	Added project-scope filtering helpers and reducer-based open and query state.
Sidebar Combobox integration apps/web/src/components/Sidebar.tsx	Replaced the radio-group menu with a searchable Combobox. Project selection, reset behavior, empty results, and project settings use the new state and filtering flow.
Filtering and state validation apps/web/src/components/Sidebar.logic.test.ts	Added tests for reset-row visibility, case-insensitive matching, empty results, query clearing, and open-state transitions.

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

Merge Risk: ⚪ Minimal · up to 84c73

The sidebar project picker adds local search while preserving the existing selection and settings flows. No actionable merge-blocking risk remains beyond normal checks and review.

Sequence Diagram(s)

sequenceDiagram
  participant User
  participant Sidebar
  participant Combobox
  participant SidebarLogic
  User->>Combobox: Enter project query
  Combobox->>Sidebar: Update query
  Sidebar->>SidebarLogic: reduceSidebarProjectScopeMenuState
  SidebarLogic-->>Sidebar: Return open and query state
  Sidebar->>SidebarLogic: filterSidebarProjectScopeItems
  SidebarLogic-->>Sidebar: Return matching project items
  User->>Combobox: Select project scope
  Combobox->>Sidebar: Set project scope key

Loading

Suggested reviewers: t3dotgg, juliusmarminge, utkarshusername

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 25.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 4 functions across 3 files.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
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.
Title check	✅ Passed	The title clearly identifies the main change: converting the sidebar project filter into a searchable combobox.
Description check	✅ Passed	The description explains the implementation, motivation, UI behavior, scope, verification, risks, screenshots, and interaction video. It does not use the exact Checklist heading, but it provides the r…

Full details: Description check

Explanation

The description explains the implementation, motivation, UI behavior, scope, verification, risks, screenshots, and interaction video. It does not use the exact Checklist heading, but it provides the required information and is sufficiently complete.

• Fix all pre-merge checks with AI

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

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

[macroscopeapp]

Approvability

Verdict: Not approved

Macroscope's review found this PR not approvable — This PR replaces the existing project-scope menu with a searchable combobox and introduces new stateful filtering behavior on the production sidebar. The implementation is localized and has focused logic tests, but the new user-facing capability changes the default interaction for all users.

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

[SunkenInTime]

bugbot run

[cursor]

✅ Bugbot reviewed your changes and found no new issues!

Comment @cursor review or bugbot run to trigger another review on this PR

^{Reviewed by Cursor Bugbot for commit 7aa5152. Configure here.}

[SunkenInTime]

Addressed the size regression pointed out on Discord: the combobox trigger was rendering 26px tall vs the old menu trigger's 32px (the height class was landing on the input's wrapper span instead of the native input), which also nudged the popup down, and a stray max-h-72 on the list clipped the popup 8px shorter than the menu. Fixed in 1f5581d — measured DOM geometry now matches the old menu exactly (trigger x8/y96/w203/h32, popup x8/y132/w203/h298, rows h32). Screenshots in the description are regenerated from the fixed build.

Dismissing prior approval to re-evaluate 70bc1d9

[SunkenInTime]

Switched back to the popup-search composition (button trigger, search field at the top of the popup — same as the branch selector's "Search refs..." picker) in 70bc1d9, keeping the fixes from the earlier iterations: the "All projects" reset row still hides while filtering, and the trigger keeps exact size parity with the old menu. Screenshots in the description are regenerated.

[SunkenInTime]

bugbot run

Dismissing prior approval to re-evaluate 13de94d

[cursor]

✅ Bugbot reviewed your changes and found no new issues!

Comment @cursor review or bugbot run to trigger another review on this PR

^{Reviewed by Cursor Bugbot for commit 13de94d. Configure here.}

[SunkenInTime]

Follow-up per feedback: the "All projects" row no longer shows when you're already unscoped — it only appears (at the top, query empty) while a project scope is active, since that's the only time there's anything to reset. Verified all transitions live: unscoped list has no reset row, scoping via search+Enter brings it back on the next open, typing hides it, and selecting it resets scope and removes itself again. Screenshots updated (546664b).

Dismissing prior approval to re-evaluate df0534a

[SunkenInTime]

Styling follow-up (df0534a): the popup search field is now a filled rounded box using the bg-secondary token instead of the underline treatment. Checked in both light and dark themes, and re-verified the behavior suite (filtering, conditional "All projects" reset row, Enter/Escape, empty state). Screenshots updated.

[SunkenInTime]

Reverted the filled-background experiment (f564fdb) — back to the underline search treatment that matches the branch selector and font picker. Behavior re-verified; screenshots updated.

[t3-code]

reviewed the current head and merge result against main. no blocking code issues found. the searchable combobox follows the existing controlled-query pattern, handles the reset row and stale query paths, and merges cleanly. verified web typecheck, lint, format, and all 2,200 web unit tests pass.

[saphid]

Thanks for the careful iteration here. I reviewed head cee150802cd against current main at 4c51b4c9b6a and the vouched-contribution handoff standard.

The core implementation looks sound. It reuses the existing combobox primitives, the body explains the state transitions, maintainer edits are enabled, all four image URLs resolve at full size, and the current code checks are green. I do not think it is ready for a human maintainer pass yet, for four concrete reasons:

1. Rebase onto current main. GitHub reports the branch as conflicting, and git merge-tree confirms a content conflict in apps/web/src/components/Sidebar.tsx. The project-scope block has changed since the last push. Preserve current behavior when resolving it, including the row-padding change from fix(web): give sidebar project menu rows the same side padding as other menus #7913, then rerun the affected checks and bot review on the new head. The existing t3-code approval says this head merges cleanly, so that approval is now stale.

2. Add focused behavior tests. The new filtering and reset-row rules live inline and have no focused coverage. Sidebar.logic.ts and Sidebar.logic.test.ts are the existing seam for this kind of pure sidebar behavior. Please cover the scoped and unscoped reset row, hiding the reset while typing, filtering and no-match behavior, and the close paths that clear the query, including the project-settings path.

3. Complete the UI evidence. The current body puts before and after in a side-by-side table and shows one appearance. Please give before and after separate full-size headings, add both light and dark captures, and include a short video showing open, type, Enter, and Escape. This is an interaction change, so the repository template asks for video.

4. Make the handoff self-contained. Name the affected clients and exclusions. This appears to be web and desktop only, with the React Native and SwiftUI project filters intentionally unchanged. Add exact test commands and results, known risks or untested paths, and a public record of the maintainer direction behind “per the suggestion there.” I could not find that direction in the public comments, reviews, or inline threads on Move project settings to contextual project routes #5923. If it came from Discord, quoting the relevant direction in the PR body is enough.

The current approvals are from automation, not a human maintainer. Once the rebased head has the tests and evidence above, please request a fresh human review.

Dismissing prior approval to re-evaluate 84c7347

[SunkenInTime]

Rebased onto current main and added focused project-scope behavior coverage in 84c734762.

bugbot run

@coderabbitai review

[coderabbitai]

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
set -euo pipefail

echo '=== PR metadata ==='
gh pr view 5931 --repo pingdotgg/t3code --json baseRefName,headRefName,mergeStateStatus,commits,files \
  --jq '{baseRefName,headRefName,mergeStateStatus, commits: [.commits[].oid], files: [.files[].path]}'

echo '=== Changed-file summary ==='
git diff --stat HEAD^..HEAD
git diff --name-status HEAD^..HEAD

echo '=== Changed implementation and tests ==='
fd -a '^Sidebar(\.logic(\.test)?|)\.tsx?$' apps/web 2>/dev/null || true
git diff --find-renames --find-copies HEAD^..HEAD -- apps/web/src/components/Sidebar.tsx apps/web/src/components/Sidebar.logic.ts apps/web/src/components/Sidebar.logic.test.ts

echo '=== File outlines ==='
for f in apps/web/src/components/Sidebar.tsx apps/web/src/components/Sidebar.logic.ts apps/web/src/components/Sidebar.logic.test.ts; do
  if [ -f "$f" ]; then
    echo "--- $f ---"
    ast-grep outline "$f" --items all || true
  fi
done

Length of output: 23347

---

🏁 Script executed:

#!/bin/bash
set -euo pipefail

base="$(git merge-base HEAD origin/main 2>/dev/null || git merge-base HEAD main)"
echo "=== Merge base ==="
git rev-parse "$base"
echo "=== Full PR changed files ==="
git diff --name-status "$base"...HEAD
echo "=== Full PR diff ==="
git diff --find-renames --find-copies "$base"...HEAD -- \
  apps/web/src/components/Sidebar.tsx \
  apps/web/src/components/Sidebar.logic.ts \
  apps/web/src/components/Sidebar.logic.test.ts

echo "=== Current project-scope state and UI ==="
sed -n '1925,2085p' apps/web/src/components/Sidebar.tsx
sed -n '3500,3650p' apps/web/src/components/Sidebar.tsx

echo "=== Combobox imports and comparable popup-search compositions ==="
sed -n '35,85p' apps/web/src/components/Sidebar.tsx
rg -n -C 4 'showTrigger=\{false\}|useComboboxFilter\(\)|autoHighlight' apps/web/src -g '*.tsx' \
  -g '!apps/web/src/components/Sidebar.tsx' | head -350

echo "=== Merge-tree conflict check ==="
git merge-tree "$(git rev-parse origin/main)" HEAD | sed -n '1,220p'

Length of output: 45458

---

🏁 Script executed:

#!/bin/bash
set -euo pipefail

combobox_file="$(fd -a '^combobox\.tsx$' apps/web/src/components/ui | head -1)"
echo "=== Combobox file ==="
printf '%s\n' "$combobox_file"
ast-grep outline "$combobox_file" --items all
sed -n '1,360p' "$combobox_file"

echo "=== Branch selector controlled-state and popup composition ==="
sed -n '670,835p' apps/web/src/components/BranchToolbarBranchSelector.tsx

echo "=== Font picker controlled-state and popup composition ==="
sed -n '150,275p' apps/web/src/components/settings/FontFamilyPicker.tsx

echo "=== Current mergeability detail ==="
gh pr view 5931 --repo pingdotgg/t3code --json mergeable,mergeStateStatus,isDraft,statusCheckRollup \
  --jq '{mergeable, mergeStateStatus, isDraft, checks: [.statusCheckRollup[] | {name, status, conclusion}]}'

Length of output: 30038

---

@SunkenInTime Reviewed 84c734762.

I found no blocking issue in the sidebar project-scope Combobox change.

The focused tests cover the reset-row rules, filtering, no-match results, and query clearing on both close paths. The Combobox wiring follows the existing popup-search pattern. The local merge simulation against current origin/main is clean.

GitHub reports the branch as mergeable. Some checks are still in progress or queued.

✅ Action performed

Review finished.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

[SunkenInTime]

@saphid The four requested handoff items are complete on 84c734762: rebased onto current main with #7913 padding preserved, focused reducer/filter coverage added, separate full-size before/light/dark evidence plus an interaction clip published, and the description now records exact client scope, commands/results, risks, untested paths, and retracts the unsupported maintainer-attribution claim. Current-head CI is green; CodeRabbit and Cursor Bugbot found no issues; Macroscope correctness and UI consistency are clear. Ready for a fresh human review.