refactor(ProjectSelector): improve project selection logic and UI/UX

[illia1f]

Summary

• Memoize project selection callback to prevent unnecessary re-renders
• Highlight folder icon for the selected project in the project picker dropdown
• Reduce dropdown jumps/jitter when interacting with the picker

Changes

Performance

• Added useCallback hook to memoize the handleProjectSelect function in project-selector-with-options.tsx, preventing new function references on each render

UI Enhancement

• Updated sortable-project-item.tsx to conditionally style the folder icon with text-brand-500 when the project is selected, matching the checkmark styling for visual consistency

Summary by CodeRabbit

• Bug Fixes

  • Fixed horizontal scrolling in the project dropdown list.
  • Improved theme preview behavior by clearing previews when leaving the theme submenu.

• Style

  • Updated keyboard hint display to symbols (↑↓ / ↵).
  • Refined search input size and reduced focus ring.
  • Added visual feedback for selected projects via icon highlighting.
  • Removed hover/scale transform on the project selector trigger.

_{✏️ 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

Removed/comments and minor UI/styling adjustments in the project selector; search input size and focus ring reduced; dropdown overflow-x hidden; keyboard hints changed to symbols; added submenu pointer-leave logic to clear theme preview; sortable project item now highlights Folder icon when selected.

Changes

Cohort / File(s)	Summary
Project selector UI & behavior apps/ui/src/components/layout/sidebar/components/project-selector-with-options.tsx	Removed/cleaned inline comments, adjusted search input visuals (h-9 → h-8), reduced focus ring (ring-2 → ring-1), added overflow-x-hidden to dropdown container, changed keyboard hint text to symbols (↑↓/↵), added onPointerLeave handlers in Project Theme submenu to clear preview theme, and simplified option menu comments/structure. Verify theme preview clear on submenu exit and dropdown overflow behavior.
Sortable project item visual state apps/ui/src/components/layout/sidebar/components/sortable-project-item.tsx	Folder icon color now conditional: text-brand-500 when item.id === currentProjectId, otherwise text-muted-foreground. Check selection visual consistency across list and click handlers.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Possibly related PRs

• fix: project picker dropdown highlights first item instead of current project #225: Modifies the same project selector component and relates to project selection/current project highlighting.

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 summarizes the main changes: refactoring the ProjectSelector component to improve both selection logic (memoization, conditional styling) and UI/UX (reduced focus rings, keyboard hint symbols, theme submenu interaction, folder icon highlighting).

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

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

---

📜 Recent review details

Configuration used: defaults

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 5a51658 and ee9cb4d.

📒 Files selected for processing (1)

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

🚧 Files skipped from review as they are similar to previous changes (1)

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

⏰ 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

---

_{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 refactors the project selection logic and user interface to provide a smoother and more intuitive experience. It focuses on optimizing component rendering, enhancing visual feedback for selected projects, and refining interaction animations to reduce visual distractions.

Highlights

• Performance Optimization: The handleProjectSelect callback in ProjectSelectorWithOptions is now memoized using useCallback to prevent unnecessary re-renders, improving component performance.
• UI/UX Enhancement: The folder icon for the currently selected project in the project picker dropdown now visually highlights with text-brand-500, matching the checkmark styling for better consistency.
• Reduced Jitter: Removed hover and active scale animations from the project selector and options buttons to eliminate visual jitter when interacting with the picker.

🧠 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. ↩

[gemini-code-assist]

Code Review

This pull request introduces some nice performance and UI/UX improvements. The project selection callback is now memoized with useCallback to prevent unnecessary re-renders, and the UI for the project picker has been polished by highlighting the selected project's folder icon and reducing jitter on interactions. My main feedback is to suggest wrapping the SortableProjectItem component in React.memo to ensure the useCallback optimization for the onSelect prop is effective. Otherwise, the changes look good.