fix: put selected repos at the top of the repo selector list. Aslo retain scroll position

This commit is contained in:
bkellam 2025-07-25 09:32:33 -07:00
parent 1cc23818c2
commit 74e37d129c

View file

@ -49,6 +49,9 @@ export const RepoSelector = React.forwardRef<
},
ref
) => {
const scrollContainerRef = React.useRef<HTMLDivElement>(null);
const scrollPosition = React.useRef<number>(0);
const handleInputKeyDown = (
event: React.KeyboardEvent<HTMLInputElement>
) => {
@ -62,6 +65,11 @@ export const RepoSelector = React.forwardRef<
};
const toggleRepo = (repo: string) => {
// Store current scroll position before state update
if (scrollContainerRef.current) {
scrollPosition.current = scrollContainerRef.current.scrollTop;
}
const newSelectedValues = selectedRepos.includes(repo)
? selectedRepos.filter((value) => value !== repo)
: [...selectedRepos, repo];
@ -76,6 +84,26 @@ export const RepoSelector = React.forwardRef<
onOpenChanged(!isOpen);
};
const sortedRepos = React.useMemo(() => {
return repos
.map((repo) => ({
repo,
isSelected: selectedRepos.includes(repo)
}))
.sort((a, b) => {
if (a.isSelected && !b.isSelected) return -1;
if (!a.isSelected && b.isSelected) return 1;
return 0;
})
}, [repos, selectedRepos]);
// Restore scroll position after re-render
React.useEffect(() => {
if (scrollContainerRef.current && scrollPosition.current > 0) {
scrollContainerRef.current.scrollTop = scrollPosition.current;
}
}, [sortedRepos]);
return (
<Popover
open={isOpen}
@ -116,12 +144,10 @@ export const RepoSelector = React.forwardRef<
placeholder="Search repos..."
onKeyDown={handleInputKeyDown}
/>
<CommandList>
<CommandList ref={scrollContainerRef}>
<CommandEmpty>No results found.</CommandEmpty>
<CommandGroup>
{repos.map((repo) => {
const isSelected = selectedRepos.includes(repo);
{sortedRepos.map(({ repo, isSelected }) => {
return (
<CommandItem
key={repo}
@ -143,6 +169,7 @@ export const RepoSelector = React.forwardRef<
);
})}
</CommandGroup>
</CommandList>
{selectedRepos.length > 0 && (
<>
<CommandSeparator />
@ -154,7 +181,6 @@ export const RepoSelector = React.forwardRef<
</CommandItem>
</>
)}
</CommandList>
</Command>
</PopoverContent>
</Popover>