Merge pull request #245 from illia1f/feature/project-picker-scroll

feat(ProjectSelector): add auto-scroll and improved UX for project picker

apps/ui/src/components/layout/sidebar/components/project-selector-with-options.tsx

@@ -64,6 +64,7 @@ export function ProjectSelectorWithOptions({
     setProjectSearchQuery,
     selectedProjectIndex,
     projectSearchInputRef,
+    scrollContainerRef,
     filteredProjects,
   } = useProjectPicker({
     projects,
@@ -171,7 +172,10 @@ export function ProjectSelectorWithOptions({
                 items={filteredProjects.map((p) => p.id)}
                 strategy={verticalListSortingStrategy}
               >
-                <div className="space-y-0.5 max-h-64 overflow-y-auto overflow-x-hidden">
+                <div
+                  ref={scrollContainerRef}
+                  className="space-y-0.5 max-h-64 overflow-y-auto overflow-x-hidden scroll-smooth scrollbar-styled"
+                >
                   {filteredProjects.map((project, index) => (
                     <SortableProjectItem
                       key={project.id}

apps/ui/src/components/layout/sidebar/components/sortable-project-item.tsx

@@ -31,6 +31,7 @@ export function SortableProjectItem({
         isHighlighted && 'bg-brand-500/10 text-foreground ring-1 ring-brand-500/20'
       )}
       data-testid={`project-option-${project.id}`}
+      onClick={() => onSelect(project)}
     >
       {/* Drag Handle */}
       <button
@@ -43,8 +44,8 @@ export function SortableProjectItem({
         <GripVertical className="h-3.5 w-3.5 text-muted-foreground/60" />
       </button>
 
-      {/* Project content - clickable area */}
-      <div className="flex items-center gap-2.5 flex-1 min-w-0" onClick={() => onSelect(project)}>
+      {/* Project content */}
+      <div className="flex items-center gap-2.5 flex-1 min-w-0">
         <Folder
           className={cn(
             'h-4 w-4 shrink-0',

apps/ui/src/components/layout/sidebar/hooks/use-project-picker.ts

@@ -19,6 +19,7 @@ export function useProjectPicker({
   const [projectSearchQuery, setProjectSearchQuery] = useState('');
   const [selectedProjectIndex, setSelectedProjectIndex] = useState(0);
   const projectSearchInputRef = useRef<HTMLInputElement>(null);
+  const scrollContainerRef = useRef<HTMLDivElement>(null);
 
   // Filtered projects based on search query
   const filteredProjects = useMemo(() => {
@@ -29,38 +30,66 @@ export function useProjectPicker({
     return projects.filter((project) => project.name.toLowerCase().includes(query));
   }, [projects, projectSearchQuery]);
 
-  // Reset selection when filtered results change and project picker is open
+  // Helper function to scroll to a specific project
+  const scrollToProject = useCallback((projectId: string) => {
+    if (!scrollContainerRef.current) return;
+
+    const element = scrollContainerRef.current.querySelector(
+      `[data-testid="project-option-${projectId}"]`
+    );
+
+    if (element) {
+      element.scrollIntoView({
+        behavior: 'smooth',
+        block: 'nearest',
+      });
+    }
+  }, []);
+
+  // On open/close, handle search query reset and focus
+  useEffect(() => {
+    if (isProjectPickerOpen) {
+      // Focus search input after DOM renders
+      requestAnimationFrame(() => {
+        projectSearchInputRef.current?.focus();
+      });
+    } else {
+      // Reset search when closing
+      setProjectSearchQuery('');
+    }
+  }, [isProjectPickerOpen]);
+
+  // Update selection when search query changes (while picker is open)
   useEffect(() => {
     if (!isProjectPickerOpen) {
+      setSelectedProjectIndex(0);
       return;
     }
 
-    if (!projectSearchQuery.trim()) {
+    if (projectSearchQuery.trim()) {
+      // When searching, reset to first result
+      setSelectedProjectIndex(0);
+    } else {
+      // When not searching (e.g., on open or search cleared), find and select the current project
       const currentIndex = currentProject
         ? filteredProjects.findIndex((p) => p.id === currentProject.id)
         : -1;
-      if (currentIndex !== -1) {
-        setSelectedProjectIndex(currentIndex);
-        return;
-      }
+      setSelectedProjectIndex(currentIndex !== -1 ? currentIndex : 0);
     }
+  }, [isProjectPickerOpen, projectSearchQuery, filteredProjects, currentProject]);
 
-    setSelectedProjectIndex(0);
-  }, [isProjectPickerOpen, filteredProjects.length, projectSearchQuery, currentProject]);
-
-  // Reset search query when dropdown closes, set to current project index when it opens
+  // Scroll to highlighted item when selection changes
   useEffect(() => {
-    if (!isProjectPickerOpen) {
-      setProjectSearchQuery('');
-      setSelectedProjectIndex(0);
-    } else {
-      // Focus the search input when dropdown opens
-      // Small delay to ensure the dropdown is rendered
-      setTimeout(() => {
-        projectSearchInputRef.current?.focus();
-      }, 0);
+    if (!isProjectPickerOpen) return;
+
+    const targetProject = filteredProjects[selectedProjectIndex];
+    if (targetProject) {
+      // Use requestAnimationFrame to ensure DOM is rendered before scrolling
+      requestAnimationFrame(() => {
+        scrollToProject(targetProject.id);
+      });
     }
-  }, [isProjectPickerOpen]);
+  }, [selectedProjectIndex, isProjectPickerOpen, filteredProjects, scrollToProject]);
 
   // Handle selecting the currently highlighted project
   const selectHighlightedProject = useCallback(() => {
@@ -111,6 +140,7 @@ export function useProjectPicker({
     selectedProjectIndex,
     setSelectedProjectIndex,
     projectSearchInputRef,
+    scrollContainerRef,
     filteredProjects,
     selectHighlightedProject,
   };