Virtualize branch picker list and forward ComboboxList ref

[juliusmarminge]

• Add virtualized rendering and filtered item handling in BranchToolbar
• Memoize branch-derived data and sync highlight scrolling for large branch sets
• Convert ComboboxList to forwardRef to support virtualizer scroll targeting

---

Note

Medium Risk
Moderate UI behavior change in a frequently used branch-selection control; virtualization/filtering and highlighted-index scrolling could introduce selection or keyboard-navigation edge cases, but no auth/data-path changes.

Overview
Improves performance of the BranchToolbar branch picker for large repos by virtualizing the dropdown list via TanStack useVirtualizer and rendering rows with absolute positioning.

Adds case-insensitive filtering via a new filteredItems list passed to Combobox, syncs highlighted-item scrolling (onItemHighlighted), and memoizes branch-derived collections (branches, branchNames, branchByName, picker items) to reduce recomputation. Also removes the unused thread error wiring.

^{Written by Cursor Bugbot for commit 6105e44. This will update automatically on new commits. Configure here.}

Note

Virtualize the BranchToolbar combobox list and forward the ComboboxList ref to support 28px row height with overscan 12 in BranchToolbar.tsx

Add list virtualization and ref forwarding to the branch picker, pre-filter items case-insensitively, and auto-scroll the highlighted index in BranchToolbar.tsx.

📍Where to Start

Start with the combobox rendering and virtualization setup in BranchToolbar within BranchToolbar.tsx.

^{Macroscope summarized 6105e44.}

[coderabbitai]

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.

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
• Post copyable unit tests in a comment
• Commit unit tests in branch feature/web/virtualize-branch-combobox

---

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

[cursor]

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

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

• ✅ Fixed: Virtualizer scroll element relies on fragile DOM traversal
  • Forwarded the ref from ComboboxList to ScrollAreaPrimitive.Viewport via a new viewportRef prop on ScrollArea, so branchListRef.current directly references the scroll container without relying on .parentElement DOM traversal.

Or push these changes by commenting:

@cursor push 36603514fc

Preview (36603514fc)

diff --git a/apps/web/src/components/BranchToolbar.tsx b/apps/web/src/components/BranchToolbar.tsx
--- a/apps/web/src/components/BranchToolbar.tsx
+++ b/apps/web/src/components/BranchToolbar.tsx
@@ -124,7 +124,7 @@
   const branchListVirtualizer = useVirtualizer({
     count: filteredBranchPickerItems.length,
     estimateSize: () => 28,
-    getScrollElement: () => branchListRef.current?.parentElement ?? null,
+    getScrollElement: () => branchListRef.current ?? null,
     overscan: 12,
     enabled: isBranchMenuOpen,
   });

diff --git a/apps/web/src/components/ui/combobox.tsx b/apps/web/src/components/ui/combobox.tsx
--- a/apps/web/src/components/ui/combobox.tsx
+++ b/apps/web/src/components/ui/combobox.tsx
@@ -260,9 +260,13 @@
   return <ComboboxPrimitive.Value data-slot="combobox-value" {...props} />;
 }
 
-function ComboboxList({ className, ...props }: ComboboxPrimitive.List.Props) {
+function ComboboxList({
+  className,
+  ref,
+  ...props
+}: ComboboxPrimitive.List.Props & { ref?: React.Ref<HTMLDivElement> }) {
   return (
-    <ScrollArea scrollbarGutter scrollFade>
+    <ScrollArea scrollbarGutter scrollFade viewportRef={ref}>
       <ComboboxPrimitive.List
         className={cn(
           "not-empty:scroll-py-1 not-empty:px-1 not-empty:py-1 in-data-has-overflow-y:pe-3",

diff --git a/apps/web/src/components/ui/scroll-area.tsx b/apps/web/src/components/ui/scroll-area.tsx
--- a/apps/web/src/components/ui/scroll-area.tsx
+++ b/apps/web/src/components/ui/scroll-area.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { ScrollArea as ScrollAreaPrimitive } from "@base-ui/react/scroll-area";
+import * as React from "react";
 
 import { cn } from "~/lib/utils";
 
@@ -9,14 +10,17 @@
   children,
   scrollFade = false,
   scrollbarGutter = false,
+  viewportRef,
   ...props
 }: ScrollAreaPrimitive.Root.Props & {
   scrollFade?: boolean;
   scrollbarGutter?: boolean;
+  viewportRef?: React.Ref<HTMLDivElement> | undefined;
 }) {
   return (
     <ScrollAreaPrimitive.Root className={cn("size-full min-h-0", className)} {...props}>
       <ScrollAreaPrimitive.Viewport
+        ref={viewportRef}
         className={cn(
           "h-full overscroll-contain rounded-[inherit] outline-none transition-shadows focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background data-has-overflow-x:overscroll-x-contain",
           scrollFade &&

[cursor]

Virtualizer scroll element relies on fragile DOM traversal

Medium Severity

getScrollElement returns branchListRef.current?.parentElement rather than branchListRef.current itself. Because ComboboxList in combobox.tsx doesn't explicitly forward the ref to the ScrollAreaPrimitive.Viewport, the ref ends up on ComboboxPrimitive.List (the inner list element) via React 19's props-spreading behavior. The code then uses .parentElement to reach the actual scroll container. This only works because base-ui currently places {children} as a direct child of ScrollAreaPrimitive.Viewport with no intermediate wrapper. If base-ui adds a content-wrapper div inside the Viewport (a common scroll-area pattern), .parentElement will return the wrong element, silently breaking all virtualized scrolling.