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

packages/web/src/features/chat/components/chatBox/repoSelector.tsx

@@ -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>
-
+                                {sortedRepos.map(({ repo, isSelected }) => {
-                                {repos.map((repo) => {
-                                    const isSelected = selectedRepos.includes(repo);
                                     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>