fix: enhance project context menu with theme submenu improvements

[Shironex]

• Added handlers for theme submenu to manage mouse enter/leave events with a delay, preventing premature closure.
• Implemented dynamic positioning for the submenu to avoid viewport overflow, ensuring better visibility.
• Updated styles to accommodate new positioning logic and added scroll functionality for theme selection.

These changes improve user experience by making the theme selection process more intuitive and visually accessible.

Summary by CodeRabbit

• New Features
  • Two-column, scrollable theme submenu with dynamic positioning and hover preview for light/dark theme options
• Improvements
  • Better submenu positioning to avoid viewport overflow and respect z‑index order
  • Improved hover interactions and timeout handling for smoother theme previews
  • Integrated confirm dialogs for edit/remove actions in project menu

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

Walkthrough

Adds a hover-activated, viewport-aware theme submenu to project context and sidebar components, including memoized theme item components, dynamic positioning/maxHeight calculations, debounced hover close behavior, scrollable two-column layout, and new shared layout constants.

Changes

Cohort / File(s)	Summary
Project context menu apps/ui/src/components/layout/project-switcher/components/project-context-menu.tsx	Added useMemo import; introduced theme submenu state (open, preview), closeTimeoutRef, hover handlers (handleThemeMenuEnter/Leave), dynamic submenuPosition calculation using THEME_SUBMENU_CONSTANTS, cleanup effect, memoized ThemeButton and ThemeColumn components, and submenu rendering with dynamic top/z-index and scrollable content.
Sidebar project selector apps/ui/src/components/layout/sidebar/components/project-selector-with-options.tsx	Imported THEME_SUBMENU_CONSTANTS; extended component props (isProjectPickerOpen, setIsProjectPickerOpen, setShowDeleteProjectDialog); applied collisionPadding and converted theme columns into a scrollable container with max height/overflow handling.
Shared constants apps/ui/src/components/layout/sidebar/constants.ts	Added exported THEME_SUBMENU_CONSTANTS (ESTIMATED_SUBMENU_HEIGHT, COLLISION_PADDING, THEME_BUTTON_OFFSET, SUBMENU_HEADER_HEIGHT) for viewport-aware submenu positioning and layout.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• fix: "Remove Project" button not working on right click of the project #505 — Overlapping edits to theme submenu rendering and constants usage in ProjectContextMenu and sidebar components.
• refactor(ProjectSelector): improve project selection logic and UI/UX #239 — Related changes to ProjectSelectorWithOptions affecting hover/preview behavior and submenu layout.
• refactor: sidebar #210 — Introduces/uses THEME_SUBMENU_CONSTANTS and adjusts theme submenu behavior across the sidebar components.

Suggested labels

Bug, Ready-To-Merge

Poem

🐇 I hopped through code to set the view just right,
A submenu that floats and never clips in flight,
I delayed the leave so hovers feel kind,
Two columns that scroll, no theme left behind,
— Signed, the rabbit dev, nibbling at midnight 🥕✨

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main change: enhancing the project context menu with theme submenu improvements, which aligns with the PR's focus on handlers, dynamic positioning, and scroll functionality.
Docstring Coverage	✅ Passed	Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

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

[gemini-code-assist]

Summary of Changes

Hello @Shironex, 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 refines the user experience for theme selection within project context menus. By introducing intelligent hover delays, dynamic positioning that adapts to screen boundaries, and scrollable content, the changes ensure that the theme submenu is more robust, accessible, and intuitive to interact with, ultimately making theme management smoother for users.

Highlights

• Improved Theme Submenu Interaction: Implemented delayed mouse enter/leave handlers for the theme submenu, preventing premature closure and enhancing user experience when navigating between the trigger and the submenu.
• Dynamic Submenu Positioning: Added logic to dynamically calculate and adjust the theme submenu's position to prevent it from overflowing the viewport, ensuring it remains fully visible regardless of its placement on the screen.
• Scrollable Theme Selection: Introduced scroll functionality and dynamic maximum height to the theme selection area within the submenu, allowing users to access all available themes even when the submenu is constrained by screen size.

🧠 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 enhances the project context menu's theme selection by adding a delay to the submenu's closing behavior and implementing dynamic positioning to prevent it from overflowing the viewport. The implementation is solid and improves the user experience. My review includes a few suggestions to improve code maintainability by replacing hardcoded 'magic numbers' with named constants, which will make the layout calculations clearer and easier to manage in the future.

[coderabbitai]

Actionable comments posted: 1

🤖 Fix all issues with AI agents

In
`@apps/ui/src/components/layout/project-switcher/components/project-context-menu.tsx`:
- Around line 456-460: The computed inline maxHeight for the submenu can become
negative when the viewport is very small; update the calculation in the
project-context-menu component where submenuPosition.maxHeight is used (the div
with className "flex gap-2 overflow-y-auto scrollbar-styled") to clamp the value
to a minimum of 0 (e.g., use Math.max(0, submenuPosition.maxHeight -
THEME_SUBMENU_CONSTANTS.SUBMENU_HEADER_HEIGHT)) so the scroll area never
collapses to a negative height.

[coderabbitai]

⚠️ Potential issue | 🟡 Minor

Clamp scroll maxHeight to avoid negative values in tiny viewports.
If the window height becomes smaller than the header + padding budget, this expression can go negative and collapse the scroll area. Consider clamping to 0 to keep layout stable.

🔧 Suggested fix

-                      style={{
-                        maxHeight: `${submenuPosition.maxHeight - THEME_SUBMENU_CONSTANTS.SUBMENU_HEADER_HEIGHT}px`,
-                      }}
+                      style={{
+                        maxHeight: `${Math.max(
+                          0,
+                          submenuPosition.maxHeight - THEME_SUBMENU_CONSTANTS.SUBMENU_HEADER_HEIGHT
+                        )}px`,
+                      }}

🤖 Prompt for AI Agents

In
`@apps/ui/src/components/layout/project-switcher/components/project-context-menu.tsx`
around lines 456 - 460, The computed inline maxHeight for the submenu can become
negative when the viewport is very small; update the calculation in the
project-context-menu component where submenuPosition.maxHeight is used (the div
with className "flex gap-2 overflow-y-auto scrollbar-styled") to clamp the value
to a minimum of 0 (e.g., use Math.max(0, submenuPosition.maxHeight -
THEME_SUBMENU_CONSTANTS.SUBMENU_HEADER_HEIGHT)) so the scroll area never
collapses to a negative height.