fix: project picker dropdown highlights first item instead of current project #225
Conversation
Summary of ChangesHello @illia1f, I'm Gemini Code Assist1! 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 addresses an issue where the project picker dropdown would incorrectly highlight the first item by default, rather than the currently selected project. The changes ensure that when the dropdown is opened, the active project is automatically highlighted, significantly improving the user experience and navigation within the project selection interface. Highlights
🧠 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 AssistThe 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
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 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
|
WalkthroughPasses the currently selected project into the project-picker hook; the hook uses it to find and set the selected index within filtered results when the picker opens, and continues to reset search and selection when the picker closes. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related issues
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
📜 Recent review detailsConfiguration used: defaults Review profile: CHILL Plan: Pro 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
⏰ 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)
Comment |
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request fixes an issue where the project picker dropdown didn't highlight the currently selected project upon opening. The changes correctly pass the currentProject to the useProjectPicker hook and add logic to find and set the selected index when the dropdown is opened. My review includes a suggestion to refactor two related useEffect hooks into a single, more maintainable hook to simplify state management.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: defaults
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
apps/ui/src/components/layout/sidebar/components/project-selector-with-options.tsxapps/ui/src/components/layout/sidebar/hooks/use-project-picker.ts
🧰 Additional context used
🧬 Code graph analysis (1)
apps/ui/src/components/layout/sidebar/hooks/use-project-picker.ts (1)
apps/ui/src/components/layout/sidebar/hooks/index.ts (1)
useProjectPicker(6-6)
⏰ 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 (2)
apps/ui/src/components/layout/sidebar/hooks/use-project-picker.ts (1)
4-18: LGTM! Interface and parameters correctly updated.The addition of
currentProjectto the interface and hook parameters is well-typed and properly integrated.apps/ui/src/components/layout/sidebar/components/project-selector-with-options.tsx (1)
64-76: LGTM! Hook call correctly updated.The
currentProjectparameter is properly passed touseProjectPicker, matching the updated hook signature.
apps/ui/src/components/layout/sidebar/hooks/use-project-picker.ts
Outdated
Show resolved
Hide resolved
|
Now, when the dropdown opens, it finds the currently selected project in the list and highlights that item. |
… without side effects
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (1)
apps/ui/src/components/layout/sidebar/hooks/use-project-picker.ts (1)
32-34: Remove unnecessaryuseCallbackwrapper.The
getCurrentProjectIndexfunction is a simple operation that's only called inside effects (not passed as a prop or returned). UsinguseCallbackhere:
- Adds unnecessary overhead
- Creates dependency management issues with the effects that use it
- Will trigger ESLint exhaustive-deps warnings
🔎 Proposed refactor
- const getCurrentProjectIndex = useCallback(() => { + const getCurrentProjectIndex = () => { return currentProject ? filteredProjects.findIndex((p) => p.id === currentProject.id) : -1; - }, [currentProject, filteredProjects]); + };
📜 Review details
Configuration used: defaults
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
apps/ui/src/components/layout/sidebar/hooks/use-project-picker.ts
🧰 Additional context used
🧬 Code graph analysis (1)
apps/ui/src/components/layout/sidebar/hooks/use-project-picker.ts (1)
apps/ui/src/components/layout/sidebar/hooks/index.ts (1)
useProjectPicker(6-6)
⏰ 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 (2)
apps/ui/src/components/layout/sidebar/hooks/use-project-picker.ts (2)
4-10: LGTM: Props and parameters updated correctly.The addition of
currentProjectto the props and parameters is the necessary foundation for fixing the highlight behavior. The nullable type correctly handles the case where no project is selected.Also applies to: 12-18
1-123: Overall: Excellent fix that achieves the PR objectives.The implementation correctly addresses issue #224 by ensuring the dropdown highlights the currently selected project when opened. The core logic flows are sound:
- ✅ Dropdown opens → highlights current project
- ✅ User searches → resets to first filtered item
- ✅ Search cleared → returns to current project
- ✅ Dropdown closes → resets state
The refactoring suggestions above are about improving code quality and following React best practices, but the current implementation will work correctly for the documented test cases.
apps/ui/src/components/layout/sidebar/hooks/use-project-picker.ts
Outdated
Show resolved
Hide resolved
apps/ui/src/components/layout/sidebar/hooks/use-project-picker.ts
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
Actionable comments posted: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
apps/ui/src/components/layout/sidebar/hooks/use-project-picker.ts (1)
50-67: Edge case: highlight won't update ifcurrentProjectchanges while dropdown is open.The current dependency array
[isProjectPickerOpen]is intentionally minimal to prevent the effect from re-running on every keystroke (which would happen iffilteredProjectswere included). However, this creates a minor edge case:Scenario: If
currentProjectchanges externally (e.g., via sync) while the dropdown is open and there's no active search, the highlight won't update to reflect the new current project until the dropdown is closed and reopened.Trade-off analysis:
- ✅ Current approach: Prevents unwanted re-runs during search
⚠️ Edge case: Stale highlight if current project changes while dropdown is open- Severity: Minor UX inconsistency in a rare scenario
Note: The ESLint exhaustive-deps rule will warn about
getCurrentProjectIndexnot being in dependencies. This is safe because the function is recreated each render with the latest closure values, so when the effect runs (onisProjectPickerOpenchange), it always uses current values.🔎 Options to address
Option 1: Accept the trade-off and document it (recommended for "Chill" review mode)
Add an ESLint disable comment with explanation:
+ // Note: getCurrentProjectIndex uses currentProject and filteredProjects but they're intentionally + // not in dependencies to avoid re-running on every keystroke. The effect correctly uses current + // values when isProjectPickerOpen changes. + // eslint-disable-next-line react-hooks/exhaustive-deps }, [isProjectPickerOpen]);Option 2: Handle the edge case with a separate effect (if real-time sync is important)
Add after this effect:
// Update highlight if current project changes while dropdown is open (no search) useEffect(() => { if (isProjectPickerOpen && !projectSearchQuery.trim()) { const currentIndex = getCurrentProjectIndex(); if (currentIndex !== -1) { setSelectedProjectIndex(currentIndex); } } // eslint-disable-next-line react-hooks/exhaustive-deps }, [isProjectPickerOpen, currentProject]);
🧹 Nitpick comments (1)
apps/ui/src/components/layout/sidebar/hooks/use-project-picker.ts (1)
32-34: Consider memoizing withuseCallbackfor consistency.While the current implementation works correctly, wrapping
getCurrentProjectIndexinuseCallbackwould:
- Satisfy React's exhaustive-deps lint rule without false warnings
- Make the dependency relationships explicit
- Avoid recreating the function on every render
🔎 Proposed refactor
- const getCurrentProjectIndex = () => { + const getCurrentProjectIndex = useCallback(() => { return currentProject ? filteredProjects.findIndex((p) => p.id === currentProject.id) : -1; - }; + }, [currentProject, filteredProjects]);
📜 Review details
Configuration used: defaults
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
apps/ui/src/components/layout/sidebar/hooks/use-project-picker.ts
🧰 Additional context used
🧬 Code graph analysis (1)
apps/ui/src/components/layout/sidebar/hooks/use-project-picker.ts (1)
apps/ui/src/components/layout/sidebar/hooks/index.ts (1)
useProjectPicker(6-6)
⏰ 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
apps/ui/src/components/layout/sidebar/hooks/use-project-picker.ts
Outdated
Show resolved
Hide resolved
… project picker is opened
2 participants
Description
Fix project picker highlight to match current selection. Resolves issue #224.
How it works
When the dropdown opens (isProjectPickerOpen becomes true), we search filteredProjects for the project matching currentProject.id and set selectedProjectIndex to that position. If not found (e.g., filtered out by search), we keep the default index.
Test plan
Summary by CodeRabbit
✏️ Tip: You can customize this high-level summary in your review settings.