Skip to content

fix(code): Limit combobox items to 50 in branch and repo pickers #1800

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
VojtechBartos merged 1 commit into from
Apr 22, 2026
Merged

fix(code): Limit combobox items to 50 in branch and repo pickers #1800

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 15 additions & 1 deletion apps/code/src/renderer/features/folder-picker/components/GitHubRepoPicker.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,9 @@ import {
ComboboxList,
ComboboxTrigger,
} from "@posthog/quill";
import { type RefObject, useEffect, useRef } from "react";
import { type RefObject, useEffect, useRef, useState } from "react";

const COMBOBOX_LIMIT = 50;

interface GitHubRepoPickerProps {
value: string | null;
Expand All @@ -36,6 +38,7 @@ export function GitHubRepoPicker({
showSearchInput = true,
}: GitHubRepoPickerProps) {
const triggerRef = useRef<HTMLButtonElement>(null);
const [searchQuery, setSearchQuery] = useState("");
const onlyRepo = repositories.length === 1 ? repositories[0] : null;

useEffect(() => {
Expand Down Expand Up @@ -85,10 +88,13 @@ export function GitHubRepoPicker({
return (
<Combobox
items={repositories}
limit={COMBOBOX_LIMIT}
value={value}
onValueChange={(v) => {
if (v) onChange(v as string);
}}
inputValue={searchQuery}
onInputValueChange={setSearchQuery}
disabled={disabled}
>
<ComboboxTrigger
Expand Down Expand Up @@ -122,6 +128,14 @@ export function GitHubRepoPicker({
</ComboboxItem>
)}
</ComboboxList>

{repositories.length > COMBOBOX_LIMIT && (
<div className="px-2 py-1.5 text-center text-muted-foreground text-xs">
{searchQuery
? `Showing up to ${COMBOBOX_LIMIT} matches — refine your search`
: `Showing ${COMBOBOX_LIMIT} of ${repositories.length} — type to filter`}
</div>
)}
</ComboboxContent>
</Combobox>
);
Expand Down
78 changes: 44 additions & 34 deletions apps/code/src/renderer/features/git-interaction/components/BranchSelector.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,14 +10,15 @@ import {
ComboboxInput,
ComboboxItem,
ComboboxList,
ComboboxListFooter,
ComboboxTrigger,
} from "@posthog/quill";
import { useTRPC } from "@renderer/trpc";
import { toast } from "@renderer/utils/toast";
import { useMutation, useQuery } from "@tanstack/react-query";
import { type RefObject, useEffect, useRef, useState } from "react";

const COMBOBOX_LIMIT = 50;
Copy link
Copy Markdown
Contributor

@greptile-apps greptile-apps Bot Apr 22, 2026

Choose a reason for hiding this comment

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

P2 Duplicated constant — violates OnceAndOnlyOnce

COMBOBOX_LIMIT = 50 is defined identically in both BranchSelector.tsx and GitHubRepoPicker.tsx. It should live in a single shared location (e.g. a constants.ts file under the renderer) so a future change only needs to happen in one place.

Prompt To Fix With AI 
This is a comment left during a code review.
Path: apps/code/src/renderer/features/git-interaction/components/BranchSelector.tsx
Line: 21

Comment:
**Duplicated constant — violates OnceAndOnlyOnce**

`COMBOBOX_LIMIT = 50` is defined identically in both `BranchSelector.tsx` and `GitHubRepoPicker.tsx`. It should live in a single shared location (e.g. a `constants.ts` file under the renderer) so a future change only needs to happen in one place.

How can I resolve this? If you propose a fix, please make it concise.


interface BranchSelectorProps {
repoPath: string | null;
currentBranch: string | null;
Expand Down Expand Up @@ -55,6 +56,7 @@ export function BranchSelector({
anchor,
}: BranchSelectorProps) {
const [open, setOpen] = useState(false);
const [searchQuery, setSearchQuery] = useState("");
const localAnchorRef = useRef<HTMLButtonElement>(null);
const trpc = useTRPC();
const { actions } = useGitInteractionStore();
Expand All @@ -77,8 +79,6 @@ export function BranchSelector({
);

const branches = isCloudMode ? (cloudBranches ?? []) : localBranches;
const CREATE_BRANCH_ACTION = "__create_branch__";
const allItems = isCloudMode ? branches : [...branches, CREATE_BRANCH_ACTION];
const effectiveLoading = loading || (isCloudMode && cloudBranchesLoading);
const cloudStillLoading =
isCloudMode && cloudBranchesLoading && branches.length === 0;
Expand All @@ -99,7 +99,7 @@ export function BranchSelector({
);

const handleBranchChange = (value: string | null) => {
if (!value || value === CREATE_BRANCH_ACTION) return;
if (!value) return;
if (isSelectionOnly) {
onBranchSelect?.(value || null);
} else if (value && value !== currentBranch) {
Expand Down Expand Up @@ -132,9 +132,12 @@ export function BranchSelector({

return (
<Combobox
items={allItems}
items={branches}
limit={COMBOBOX_LIMIT}
value={displayedBranch}
onValueChange={(v) => handleBranchChange(v as string | null)}
inputValue={searchQuery}
onInputValueChange={setSearchQuery}
open={open}
onOpenChange={(nextOpen) => handleOpenChange(nextOpen)}
disabled={isDisabled}
Expand Down Expand Up @@ -181,36 +184,43 @@ export function BranchSelector({
<ComboboxEmpty>No branches found.</ComboboxEmpty>

<ComboboxList className="max-h-[min(14rem,calc(var(--available-height,14rem)-5rem))] pe-2">
{(item: string) =>
item === CREATE_BRANCH_ACTION ? (
<ComboboxListFooter key="footer">
<ComboboxItem
value={CREATE_BRANCH_ACTION}
onClick={() => {
setOpen(false);
actions.openBranch(
taskId
? getSuggestedBranchName(taskId, repoPath ?? undefined)
: undefined,
);
}}
>
<Plus size={11} weight="bold" />
Create new branch
</ComboboxItem>
</ComboboxListFooter>
) : (
<ComboboxItem
key={item}
value={item}
title={item}
className="relative"
>
{item}
</ComboboxItem>
)
}
{(item: string) => (
<ComboboxItem
key={item}
value={item}
title={item}
className="relative"
>
{item}
</ComboboxItem>
)}
</ComboboxList>

{!isCloudMode && (
<button
type="button"
className="flex w-full items-center gap-2 border-t px-2 py-1.5 text-accent-foreground text-xs hover:bg-accent/10"
onClick={() => {
setOpen(false);
actions.openBranch(
taskId
? getSuggestedBranchName(taskId, repoPath ?? undefined)
: undefined,
);
}}
>
<Plus size={11} weight="bold" />
Create new branch
</button>
)}

{branches.length > COMBOBOX_LIMIT && (
<div className="px-2 py-1.5 text-center text-muted-foreground text-xs">
{searchQuery
? `Showing up to ${COMBOBOX_LIMIT} matches — refine your search`
: `Showing ${COMBOBOX_LIMIT} of ${branches.length} — type to filter`}
</div>
)}
</ComboboxContent>
</Combobox>
);
Expand Down
Loading