Skip to content

Polish branch picker trigger, scroll fade, and list layout - #3024

Merged
juliusmarminge merged 5 commits into
mainfrom
ui/branch-picker
Jun 10, 2026
Merged

juliusmarminge merged 5 commits into
mainfrom
ui/branch-picker

Conversation

@juliusmarminge

@juliusmarminge juliusmarminge commented Jun 9, 2026 •

Copy link
Copy Markdown
Member

Ports the branch-picker part of #2451 by @sandersonstabo, rebased onto current main.

  • Branch selector trigger gets a properly-sized leading GitBranchIcon (matching the workspace selector next to it) and a consistent chevron
  • Popup restructured with a stable scroll region; virtualized branch lists get a bottom gradient scroll hint driven by scroll position, and infinite loading now triggers from the virtualized list's own scroll events
  • Rows use a flush truncate/right-edge layout (pe-2 items, list edge paddings)

Deviations per review feedback on #2451: the kind labels (current/remote/worktree/default) stay as plain muted text (Theo found the badge treatment too loud), and the separator between search and list is kept ("I liked the separator…").

Part of splitting #2451 into reviewable frontend-only pieces.

🤖 Generated with Claude Code


Note

Low Risk
Frontend-only combobox layout and scroll UX in one component; branch checkout/create behavior is unchanged aside from list plumbing.

Overview
Polishes the branch/ref picker in BranchToolbarBranchSelector: trigger styling, popup layout, and how the ref list scrolls and loads more pages.

The trigger adds a leading GitBranchIcon and a smaller chevron so it aligns with nearby workspace UI. The popup is a fixed flex column with a search row (leading SearchIcon, bottom border separator, unstyled input) above a dedicated scroll region.

The ref list always uses virtualization (Combobox virtualized + LegendList); the old non-virtualized ComboboxList path and the >40 item threshold are removed. Top/bottom scroll fade masks toggle from scroll position via LegendList onScroll / onLayout (same mask pattern as ModelPickerContent). Infinite load uses the list’s scroll node (getScrollableNode) and onEndReached, with maybeFetchNextBranchPage also on scroll/layout and when refs.length changes. Opening or changing the deferred search query scrolls the list to top; fades reset when the menu closes.

Row layout tweaks: tighter right padding on items and truncate-friendly ref name + muted kind labels (current/remote/worktree/default) unchanged in style per review.

Reviewed by Cursor Bugbot for commit a9cfbec. Bugbot is set up for automated code reviews on this repo. Configure here.

Note

Polish branch picker trigger, scroll fades, and list layout in BranchToolbarBranchSelector

  • The branch list is now always virtualized via LegendList, removing the conditional shouldVirtualizeBranchList path.
  • Top/bottom CSS mask fades are applied to the list container and updated on scroll, open, and query change; scroll position resets to top on open or query change.
  • Infinite-scroll page fetches (maybeFetchNextBranchPage) are now triggered on list layout and scroll events in addition to onEndReached.
  • The trigger button adds a GitBranchIcon and updates chevron size/opacity; the popup header gets a SearchIcon with unstyled ComboboxInput.

Macroscope summarized a9cfbec.

@coderabbitai

coderabbitai Bot commented Jun 9, 2026 •

Copy link
Copy Markdown
Contributor

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: 79d02643-07f7-4f11-94c0-b752155da648

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

  • 🔍 Trigger review
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch ui/branch-picker

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

@github-actions github-actions Bot added vouch:trusted Author is trusted by repo permissions or the VOUCHED list. size:M 30-99 changed lines (additions + deletions). labels Jun 9, 2026
@github-actions

github-actions Bot commented Jun 9, 2026 •

Copy link
Copy Markdown
Contributor

🚀 Expo continuous deployment is ready!

  • Project → t3-code
  • Platforms → android, ios
  • Scheme → t3code-preview
  🤖 Android 🍎 iOS
Fingerprint ae17d94b35f91f9c608a63dadbc3ddd9f4ba056e 313e506a7f15a9c3f15b01d787d68a12382432bf
Build Details Build Permalink
DetailsDistribution: INTERNAL
Build profile: preview:dev
Runtime version: ae17d94b35f91f9c608a63dadbc3ddd9f4ba056e
App version: 0.1.0
Git commit: 9974c500658ec2d2a2e1b45ff7c28fc73607d7d1
Build Permalink
DetailsDistribution: INTERNAL
Build profile: preview:dev
Runtime version: 313e506a7f15a9c3f15b01d787d68a12382432bf
App version: 0.1.0
Git commit: 9974c500658ec2d2a2e1b45ff7c28fc73607d7d1
Update Details Update Permalink
DetailsBranch: pr-3024
Runtime version: ae17d94b35f91f9c608a63dadbc3ddd9f4ba056e
Git commit: 9974c500658ec2d2a2e1b45ff7c28fc73607d7d1
Update Permalink
DetailsBranch: pr-3024
Runtime version: 313e506a7f15a9c3f15b01d787d68a12382432bf
Git commit: 9974c500658ec2d2a2e1b45ff7c28fc73607d7d1
Update QR

macroscopeapp[bot]
macroscopeapp Bot previously approved these changes Jun 9, 2026
@macroscopeapp

macroscopeapp Bot commented Jun 9, 2026 •

Copy link
Copy Markdown
Contributor

Approvability

Verdict: Needs human review

An unresolved review comment identifies a medium-severity pagination bug where branch loading may get stuck after removing the initial scroll check. This functional concern warrants human review despite the otherwise straightforward UI polish nature of the changes.

You can customize Macroscope's approvability policy. Learn more.

- Add search icon and unstyled input styling
- Tighten popup spacing for virtualized and standard lists
@macroscopeapp
macroscopeapp Bot dismissed their stale review June 10, 2026 06:45

Dismissing prior approval to re-evaluate e23b876

@github-actions github-actions Bot added size:L 100-499 changed lines (additions + deletions). and removed size:M 30-99 changed lines (additions + deletions). labels Jun 10, 2026

@cursor cursor Bot left a comment •

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cursor Bugbot has reviewed your changes and found 1 potential issue.

Autofix Details

Bugbot Autofix prepared a fix for the issue found in the latest run.

  • ✅ Fixed: Stale scroll fade after reset
    • Added a requestAnimationFrame callback after the programmatic scrollToOffset reset to call syncBranchListScrollChrome, ensuring the bottom fade gradient is recalculated after the scroll position changes.

Create PR

Or push these changes by commenting:

@cursor push ed2bfad791
Preview (ed2bfad791)
diff --git a/apps/web/src/components/BranchToolbarBranchSelector.tsx b/apps/web/src/components/BranchToolbarBranchSelector.tsx
--- a/apps/web/src/components/BranchToolbarBranchSelector.tsx
+++ b/apps/web/src/components/BranchToolbarBranchSelector.tsx
@@ -511,8 +511,18 @@
     } else {
       branchListScrollElementRef.current?.scrollTo({ top: 0 });
     }
-  }, [deferredTrimmedBranchQuery, isBranchMenuOpen, shouldVirtualizeBranchList]);
 
+    const frame = requestAnimationFrame(() => {
+      syncBranchListScrollChrome(branchListScrollElementRef.current);
+    });
+    return () => cancelAnimationFrame(frame);
+  }, [
+    deferredTrimmedBranchQuery,
+    isBranchMenuOpen,
+    shouldVirtualizeBranchList,
+    syncBranchListScrollChrome,
+  ]);
+
   useEffect(() => {
     const scrollElement = branchListScrollElementRef.current;
     if (!scrollElement || !isBranchMenuOpen || shouldVirtualizeBranchList) {

You can send follow-ups to the cloud agent here.

macroscopeapp[bot]
macroscopeapp Bot previously approved these changes Jun 10, 2026
- Always render the virtualized branch list
- Update scroll fade handling and paging behavior
@macroscopeapp
macroscopeapp Bot dismissed their stale review June 10, 2026 07:03

Dismissing prior approval to re-evaluate 5a9bcd2

@cursor cursor Bot left a comment •

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cursor Bugbot has reviewed your changes and found 2 potential issues.

Fix All in Cursor

Bugbot Autofix prepared fixes for both issues found in the latest run.

  • ✅ Fixed: Pagination stuck without initial check
    • Added maybeFetchNextBranchPage() call in the LegendList onLayout handler so that when the list first renders with items that don't fill the viewport, pagination is triggered even if onEndReached doesn't fire.
  • ✅ Fixed: Scroll fade stale after search
    • Added deferredTrimmedBranchQuery to the useLayoutEffect dependency array so scroll fades are remeasured whenever the search query changes, even when the filtered item count stays the same.

Create PR

Or push these changes by commenting:

@cursor push 984fc7e65f
Preview (984fc7e65f)
diff --git a/apps/web/src/components/BranchToolbarBranchSelector.tsx b/apps/web/src/components/BranchToolbarBranchSelector.tsx
--- a/apps/web/src/components/BranchToolbarBranchSelector.tsx
+++ b/apps/web/src/components/BranchToolbarBranchSelector.tsx
@@ -489,7 +489,12 @@
       cancelAnimationFrame(frame);
       cancelAnimationFrame(nestedFrame);
     };
-  }, [filteredBranchPickerItems.length, isBranchMenuOpen, updateBranchListScrollFades]);
+  }, [
+    deferredTrimmedBranchQuery,
+    filteredBranchPickerItems.length,
+    isBranchMenuOpen,
+    updateBranchListScrollFades,
+  ]);
 
   useEffect(() => {
     if (!isBranchMenuOpen) {
@@ -649,7 +654,10 @@
                     fetchNextBranchPage();
                   }
                 }}
-                onLayout={updateBranchListScrollFades}
+                onLayout={() => {
+                  updateBranchListScrollFades();
+                  maybeFetchNextBranchPage();
+                }}
                 onScroll={() => {
                   updateBranchListScrollFades();
                   maybeFetchNextBranchPage();

You can send follow-ups to the cloud agent here.

Reviewed by Cursor Bugbot for commit 5a9bcd2. Configure here.

@juliusmarminge

Copy link
Copy Markdown
Member Author

@cursor push 984fc7e65f

…des after search

- Add maybeFetchNextBranchPage() call in onLayout handler so pagination
  is checked when the list first renders and items don't fill the viewport
- Add deferredTrimmedBranchQuery to useLayoutEffect dependency array so
  scroll fades are remeasured when search changes items without changing count

Applied via @cursor push command
@juliusmarminge
juliusmarminge enabled auto-merge (squash) June 10, 2026 07:12
@juliusmarminge
juliusmarminge merged commit c5f7cd4 into main Jun 10, 2026
16 checks passed
@juliusmarminge
juliusmarminge deleted the ui/branch-picker branch June 10, 2026 07:13
aaditagrawal added a commit to aaditagrawal/t3code that referenced this pull request Jun 10, 2026
…MIT ONLY, DO NOT SQUASH (#100)

* fix: maintain reasoning selections for multiple providers (pingdotgg#2760)

* [codex] Bump Effect to beta.73 and migrate compatibility APIs (pingdotgg#2840)

Co-authored-by: codex <[email protected]>

* Add Claude Opus 4.8 support (pingdotgg#2849)

* Migrate TypeScript checks to Effect TSGo (pingdotgg#2851)

* Extract collection performance refactors from mobile stack (pingdotgg#2854)

Co-authored-by: codex <[email protected]>

* Extract independent web cleanup from mobile stack (pingdotgg#2855)

Co-authored-by: Julius Marminge <[email protected]>
Co-authored-by: codex <[email protected]>

* Ensure Electron runtime is installed in release workflow (pingdotgg#2861)

* T3 Code Mobile [WIP] (pingdotgg#2013)

Co-authored-by: codex <[email protected]>
Co-authored-by: Julius Marminge <[email protected]>
Co-authored-by: Yash Singh <[email protected]>

* chore: add vendored reference repo subtree sync tooling (pingdotgg#2902)

Co-authored-by: codex <[email protected]>

* Use HttpApi for Environment APIs & standardize authn/authz (pingdotgg#2858)

Co-authored-by: codex <[email protected]>

* chore: add Alchemy reference repo subtree (pingdotgg#2918)

Co-authored-by: codex <[email protected]>

* fix(desktop): Include standard Linux AppImage icons for Niri/Noctalia (pingdotgg#2915)

* Probe Cursor models via list_available_models (pingdotgg#2428)

Co-authored-by: codex <[email protected]>
Co-authored-by: Julius Marminge <[email protected]>

* Migrate workspace to Vite+ and pnpm (pingdotgg#2899)

Co-authored-by: Julius Marminge <[email protected]>
Co-authored-by: Cursor Agent <[email protected]>

* test(web): CI stability - prebundle react-dom client for browser tests (pingdotgg#2928)

* fix(ssh): Surface redacted stdout for failed commands (pingdotgg#2920)

* fix(desktop): Preserve SSH HTTP auth status (pingdotgg#2923)

Co-authored-by: Julius Marminge <[email protected]>

* fix: build web before desktop release packaging (pingdotgg#2934)

Co-authored-by: Julius Marminge <[email protected]>

* ci: let setup-vp install dependencies (pingdotgg#2936)

Co-authored-by: Julius Marminge <[email protected]>

* fix(release): surface desktop packaging subprocess output (pingdotgg#2937)

Co-authored-by: Julius Marminge <[email protected]>

* chore: setup eas ci (pingdotgg#2911)

Co-authored-by: Julius Marminge <[email protected]>

* fix(release): use workspace electron-builder for desktop packaging (pingdotgg#2938)

Co-authored-by: Julius Marminge <[email protected]>

* [codex] remove duplicated pnpm root config (pingdotgg#2939)

Co-authored-by: Julius Marminge <[email protected]>

* fix(release): install dependency closures in partial jobs (pingdotgg#2941)

Co-authored-by: Julius Marminge <[email protected]>

* [codex] split ci workflow jobs (pingdotgg#2940)

Co-authored-by: Julius Marminge <[email protected]>

* [codex] fix mobile native static analysis source discovery (pingdotgg#2942)

Co-authored-by: Julius Marminge <[email protected]>

* fix(release): preserve desktop artifact arch (pingdotgg#2943)

Co-authored-by: Julius Marminge <[email protected]>

* [codex] Fix desktop packaging patched dependencies (pingdotgg#2944)

Co-authored-by: codex <[email protected]>

* [codex] Filter staged desktop patched dependencies (pingdotgg#2945)

Co-authored-by: codex <[email protected]>

* fix(release): install hosted web workspace closure (pingdotgg#2949)

* fix(cli): bundle patched diff parser dependency (pingdotgg#2957)

Co-authored-by: Julius Marminge <[email protected]>

* Prevent settings layout shifts with scrollbar gutters (pingdotgg#2960)

* [codex] fix release finalize install (pingdotgg#2961)

Co-authored-by: Julius Marminge <[email protected]>

* fix(source-control): handle self-hosted GitLab, multi-account GitHub auth & azure devops web url (pingdotgg#2480)

Co-authored-by: Julius Marminge <[email protected]>

* [codex] Avoid shell for Node executable spawns (pingdotgg#2952)

Co-authored-by: Julius Marminge <[email protected]>

* [codex] Avoid shell for Windows environment probe (pingdotgg#2951)

Co-authored-by: Julius Marminge <[email protected]>

* fix(composer): support spaces in file mentions (pingdotgg#2625)

* [codex] Avoid shell for system executables (pingdotgg#2950)

Co-authored-by: Julius Marminge <[email protected]>

* feat(relay): Add managed relay tunnels and APN service (pingdotgg#2837)

Co-authored-by: codex <[email protected]>

* Restructure documentation into topical folders (pingdotgg#2963)

* move

* dont fail if env-file is unspecified

* fallback to None when RELAY_DOMAIN is unset

* implicit install from vp

* forward args directly

* bump alchemy to fix absolute drizzle schema out

* bump alchemy to fix drizzle schema out attempt 2

* Migrate tests to vite-plus test APIs (pingdotgg#2964)

* remove `vp staged`

* publish deploy status on relay deploy workflow

* Use pnpm for server publish workflow (pingdotgg#2966)

* Rename function for publishing arguments to vp pm (pingdotgg#2967)

* Remove duplicate 'publish' argument in CLI script

* Refactor recoverable Effect fallbacks to orElseSucceed (pingdotgg#2968)

* document vp instead of mise

* link

* cleanup

* tip

* we support cursor, duhhh

* include @latest

* fix(cloud): use Electron fetch for proxying Clerk IPC requests (pingdotgg#2973)

* fix: handle Claude Agent SDK 0.3.x system messages to stop runtime-warning flood (pingdotgg#2872)

Co-authored-by: Julius Marminge <[email protected]>

* "claude system message" instead of "runtime warning" when using 4.8 from claude code (pingdotgg#2972)

* fix(desktop): stop looping macOS TCC permission prompts (pingdotgg#2745)

Co-authored-by: Julius Marminge <[email protected]>
Co-authored-by: Julius Marminge <[email protected]>

* Annotate relay error spans with schema fields (pingdotgg#2976)

* [codex] Enrich relay authorization diagnostics (pingdotgg#2977)

Co-authored-by: codex <[email protected]>

* [codex] Extract infrastructure, telemetry, and test tooling (pingdotgg#2994)

Co-authored-by: codex <[email protected]>

* feat(grok): add Grok CLI provider via ACP (pingdotgg#2809)

Co-authored-by: Julius Marminge <[email protected]>

* [codex] Fix main CI Effect test runtimes (pingdotgg#3008)

Co-authored-by: codex <[email protected]>

* Add Claude Fable 5 model (pingdotgg#3009)

Co-authored-by: codex <[email protected]>

* chore(release): prepare v0.0.26

* [codex] Rebrand T3 Cloud as T3 Connect (pingdotgg#3011)

Co-authored-by: codex <[email protected]>

* Fix Clerk browser test mock (pingdotgg#3013)

Co-authored-by: codex <[email protected]>

* chore(release): prepare v0.0.27

* Bundle DM Sans and JetBrains Mono fonts instead of Google Fonts (pingdotgg#3014)

Co-authored-by: ss <[email protected]>
Co-authored-by: Claude Opus 4.8 <[email protected]>

* Mute icons in labeled controls and suppress popup focus rings (pingdotgg#3015)

Co-authored-by: ss <[email protected]>
Co-authored-by: Claude Opus 4.8 <[email protected]>

* Polish dialog/alert surfaces and unauthenticated provider banner (pingdotgg#3016)

Co-authored-by: ss <[email protected]>
Co-authored-by: Claude Opus 4.8 <[email protected]>

* fix(marketing) : marketing showing wrong icons on linux (pingdotgg#2696)

Co-authored-by: Julius Marminge <[email protected]>

* Misc markdown styling improvements (pingdotgg#3017)

Co-authored-by: ss <[email protected]>
Co-authored-by: Claude Opus 4.8 <[email protected]>
Co-authored-by: codex <[email protected]>
Co-authored-by: Cursor Agent <[email protected]>
Co-authored-by: cursor[bot] <206951365+cursor[bot]@users.noreply.github.com>

* Model picker UI Improvements, Virtualize Model List (pingdotgg#3021)

Co-authored-by: ss <[email protected]>
Co-authored-by: Claude Opus 4.8 <[email protected]>

* Provider env vars table and reworked accent color picker (pingdotgg#3026)

Co-authored-by: ss <[email protected]>
Co-authored-by: Claude Opus 4.8 <[email protected]>

* Polish branch picker trigger, scroll fade, and list layout (pingdotgg#3024)

Co-authored-by: ss <[email protected]>
Co-authored-by: Claude Opus 4.8 <[email protected]>
Co-authored-by: Cursor Agent <[email protected]>

* Polish web context menu fallback and sidebar icon actions (pingdotgg#3025)

Co-authored-by: ss <[email protected]>
Co-authored-by: Claude Opus 4.8 <[email protected]>

* Composer polish: focus ring, send/stop buttons, command menu, context meter, answer panel (pingdotgg#3018)

Co-authored-by: ss <[email protected]>
Co-authored-by: Claude Opus 4.8 <[email protected]>
Co-authored-by: codex <[email protected]>

* Extract changed files card with compact aligned diff stats (pingdotgg#3023)

Co-authored-by: ss <[email protected]>
Co-authored-by: Claude Opus 4.8 <[email protected]>
Co-authored-by: codex <[email protected]>

* ci: fix vp test invocation (-r and --filter are mutually exclusive)

---------

Co-authored-by: Adam Buchweitz <[email protected]>
Co-authored-by: Julius Marminge <[email protected]>
Co-authored-by: codex <[email protected]>
Co-authored-by: Ibrahim Elkamali <[email protected]>
Co-authored-by: Theo Browne <[email protected]>
Co-authored-by: Julius Marminge <[email protected]>
Co-authored-by: Yash Singh <[email protected]>
Co-authored-by: Mike Olson <[email protected]>
Co-authored-by: Julius Marminge <[email protected]>
Co-authored-by: Cursor Agent <[email protected]>
Co-authored-by: Julius Marminge <[email protected]>
Co-authored-by: Guilherme Vieira <[email protected]>
Co-authored-by: Abdul Azeez <[email protected]>
Co-authored-by: Peter Hozák <[email protected]>
Co-authored-by: Ishan <[email protected]>
Co-authored-by: Milosz Jankiewicz <[email protected]>
Co-authored-by: t3-code[bot] <269035359+t3-code[bot]@users.noreply.github.com>
Co-authored-by: ss <[email protected]>
Co-authored-by: Claude Opus 4.8 <[email protected]>
Co-authored-by: Ruzbyte <[email protected]>
Co-authored-by: cursor[bot] <206951365+cursor[bot]@users.noreply.github.com>
Co-authored-by: aaditagrawal <[email protected]>
Morphexe pushed a commit to Morphexe/t3code that referenced this pull request Jul 30, 2026
NeilTheFisher pushed a commit to NeilTheFisher/t3code that referenced this pull request Aug 18, 2026
darjss pushed a commit to darjss/t3code that referenced this pull request Aug 26, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

size:L 100-499 changed lines (additions + deletions). vouch:trusted Author is trusted by repo permissions or the VOUCHED list.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants