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

[illia1f]

Summary

• Add auto-scroll to current project when opening the project picker dropdown
• Add visible scrollbar styling for better navigation
• Expand clickable area on project items for easier selection

Features

Auto-scroll to current project

• When opening the project picker, the list now automatically scrolls to show the currently selected project (essential for users with many projects where the current selection may be out of view)
• Keyboard navigation (↑↓ arrow keys) keeps the highlighted item in view
• Smooth scroll animation for polished feel

Visible scrollbar

• Added styled scrollbar that's always visible when content overflows
• Theme-aware colors that match the UI
• Thin, unobtrusive design

Improved click targets

• Entire project row is now clickable for selection
• Drag handle remains separate for reordering
• Better UX especially on smaller screens

Screenshots

Summary by CodeRabbit

• New Features
  • Project picker now includes smooth scrolling animations and automatically scrolls to display the currently selected project, improving visibility and navigation
  • Project selection interface improved: the entire project row is now clickable and fully interactive, replacing the previous content-area-only interaction with full-row response capability for better usability

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Note

Other AI code review bot(s) detected

CodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review.

Walkthrough

The changes enhance the project picker UI by adding scroll-to-project functionality via a new ref-based scrolling system in the hook, moving click handling from inner content to outer container in project items, and wiring the scroll reference through the project selector component.

Changes

Cohort / File(s)	Summary
Project Picker Hook apps/ui/src/components/layout/sidebar/hooks/use-project-picker.ts	Introduces scrollContainerRef for scroll management, adds scrollToProject(projectId) helper function, integrates search input focus on picker open and query reset on close, updates selection logic to reset to first result on search input, and scrolls highlighted project into view on selection changes.
Project Selector Component apps/ui/src/components/layout/sidebar/components/project-selector-with-options.tsx	Attaches scrollContainerRef to the project list dropdown scroll container div and applies smooth scrolling CSS class (scroll-smooth project-picker-scroll).
Sortable Project Item apps/ui/src/components/layout/sidebar/components/sortable-project-item.tsx	Moves click handler from inner project content div to outer container div, expanding the clickable area to the full row while preserving drag handle propagation prevention.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~15 minutes

Possibly related PRs

• refactor(ProjectSelector): improve project selection logic and UI/UX #239: Modifies the same project picker components (project-selector-with-options.tsx and sortable-project-item.tsx) affecting project selection UI logic.
• fix: project picker dropdown highlights first item instead of current project #225: Modifies the useProjectPicker hook and project selector to update selection logic based on current project alignment during picker open/filter operations.

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately reflects the main changes: auto-scroll functionality and improved UX for the project picker component across three files.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[gemini-code-assist]

Summary of Changes

Hello @illia1f, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request significantly enhances the user experience of the project picker component. It introduces an auto-scroll feature that centers the currently selected project upon opening, adds a visually distinct and theme-aware scrollbar for improved navigation, and expands the clickable area of project items for easier selection. These changes aim to make project selection more intuitive and efficient, particularly for users managing a large number of projects.

Highlights

• Auto-scroll to current project: The project picker now automatically scrolls to display the currently selected project when opened, improving visibility for users with many projects. Keyboard navigation also keeps the highlighted item in view with a smooth scroll animation.
• Visible scrollbar styling: A custom-styled scrollbar has been added to the project picker, which is always visible when content overflows. It features a thin, unobtrusive design with theme-aware colors for better navigation.
• Expanded clickable area: The clickable area for project items has been expanded to the entire row, making it easier to select projects, especially on smaller screens, while keeping the drag handle separate.

🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[coderabbitai]

Actionable comments posted: 1

📜 Review details

Configuration used: defaults

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between e95912f and 190f18e.

📒 Files selected for processing (4)

• apps/ui/src/components/layout/sidebar/components/project-selector-with-options.tsx
• apps/ui/src/components/layout/sidebar/components/sortable-project-item.tsx
• apps/ui/src/components/layout/sidebar/hooks/use-project-picker.ts
• apps/ui/src/styles/global.css

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

• GitHub Check: e2e

🔇 Additional comments (9)

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

33-47: LGTM!

The scrollToProject helper is correctly implemented with scrollIntoView and block: 'nearest' for minimal scroll distance.

---

77-83: LGTM!

Resetting the selection index to 0 when the search query changes is appropriate UX behavior.

---

85-93: LGTM!

This effect correctly ensures the highlighted project stays visible during keyboard navigation.

---

22-22: LGTM!

The scrollContainerRef is properly typed and will be attached to the scroll container in the consuming component.

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

34-34: LGTM!

Moving the click handler to the outer container expands the clickable area, improving UX especially on smaller screens. The stopPropagation on the drag handle correctly prevents accidental selections during drag operations.

---

47-57: LGTM!

The inner content div is now correctly presentational-only, delegating click handling to the parent container.

apps/ui/src/styles/global.css (1)

873-897: LGTM!

The scrollbar styling is consistent with existing patterns in this file (e.g., scrollbar-styled) and properly uses theme-aware CSS variables.

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

67-67: LGTM!

The scrollContainerRef is properly destructured from the hook.

---

175-178: LGTM!

The scroll container is properly configured with the ref attachment and appropriate CSS classes for smooth scrolling and styled scrollbar.

[gemini-code-assist]

Code Review

This pull request introduces several nice user experience improvements to the project picker, including auto-scrolling to the current project, a visible scrollbar, and larger click targets. The implementation is solid overall. My feedback includes a critical fix for the useProjectPicker hook to prevent stale state and handle all cases correctly, a minor cleanup for a type assertion, and a suggestion to refactor duplicated CSS for scrollbar styling to improve maintainability.

[webdevcody]

@illia1f if you can address those comments from coderabbit about the stale closure and see if they are real issues or not, I will merge after

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (1)

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

62-79: Great fix! Stale closure issue resolved.

This effect now correctly includes filteredProjects in the dependency array, addressing the critical concern from previous reviews. The logic cleanly separates search and non-search cases.

Optional refinement for better precision

Since the effect only uses currentProject?.id, you could optimize the dependency to be more precise:

-  }, [isProjectPickerOpen, projectSearchQuery, filteredProjects, currentProject]);
+  }, [isProjectPickerOpen, projectSearchQuery, filteredProjects, currentProject?.id]);

This would prevent unnecessary re-runs when currentProject object reference changes but the id remains the same. However, the current implementation is correct and this is purely an optimization.

📜 Review details

Configuration used: defaults

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 190f18e and 4898a13.

📒 Files selected for processing (2)

• apps/ui/src/components/layout/sidebar/components/project-selector-with-options.tsx
• apps/ui/src/components/layout/sidebar/hooks/use-project-picker.ts

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)

• GitHub Check: e2e
• GitHub Check: build

🔇 Additional comments (7)

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

22-22: LGTM! Ref initialization is correct.

The scrollContainerRef is properly typed as HTMLDivElement and initialized with null.

---

49-60: Excellent separation of concerns!

This effect cleanly handles the open/close lifecycle by focusing the search input when opening and resetting the query when closing. The use of requestAnimationFrame ensures the DOM is ready before focusing.

---

81-92: Excellent! All dependencies correctly declared.

This effect now properly includes scrollToProject and filteredProjects in the dependency array, resolving the stale closure concerns from previous reviews. The requestAnimationFrame ensures the DOM is rendered before scrolling.

---

143-143: LGTM! Ref correctly exposed in public API.

The scrollContainerRef is properly returned for use in consuming components.

---

33-47: Implementation is correct. The scrollToProject function is properly memoized and the data-testid attribute is correctly set on project items in SortableProjectItem (line 33 of sortable-project-item.tsx), matching the selector pattern used in the scroll function.

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

67-67: LGTM! Ref correctly destructured from hook.

The scrollContainerRef is properly extracted from the useProjectPicker hook return value.

---

175-178: Integration is correct — scrollbar-styled class is properly defined.

The scrollContainerRef is correctly attached to the scrolling container. The scroll-smooth class provides smooth scrolling behavior, and scrollbar-styled is defined in apps/ui/src/styles/global.css (lines 499–519) with theme-specific overrides in the theme CSS files. The implementation matches existing usage patterns in other components.

[illia1f]

@webdevcody Refactored and ready for review ;)