mirror of
https://github.com/sourcebot-dev/sourcebot.git
synced 2025-12-11 20:05:25 +00:00
fix: put selected repos at the top of the repo selector list. Aslo retain scroll position
This commit is contained in:
parent
1cc23818c2
commit
74e37d129c
1 changed files with 41 additions and 15 deletions
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in a new issue