fix: keep sidebar room row highlighted while options menu is open

[successbyte]

Proposed changes (including videos or screenshots)

This PR fixes a sidebar UX bug where the room/channel row highlight disappears after opening the options menu and moving the cursor into the menu.

Scope:

• Keep the clicked row highlighted only while its options menu is open.
• Automatically remove highlight when the menu closes (option selected or outside click).
• No behavior changes to menu actions or close behavior.

Video demo of the fix:

row-highlight-when-options-menu-open-fix.webm

Issue(s)

Closes #38792

Steps to test or reproduce

1. Open /home.
2. Hover any room/channel row in the left sidebar.
3. Click the row options (three-dot) button.
4. Move the cursor into the opened menu.
5. Confirm the row stays highlighted while menu is open.
6. Select a menu item or click outside.
7. Confirm menu closes and row highlight returns to normal.

Further comments

This is a minimal, targeted fix for the row highlight state while the options menu is open.

Summary by CodeRabbit

• Refactor
  • Enhanced sidebar menu state management to improve open/close state tracking and visual feedback.
  • Updated menu components to better communicate state changes, enabling more responsive styling for menu interactions.

[dionisio-bot]

Looks like this PR is not ready to merge, because of the following issues:

• This PR is missing the 'stat: QA assured' label
• This PR is missing the required milestone or project

Please fix the issues and try again

If you have any trouble, please check the PR guidelines

[changeset-bot]

⚠️ No Changeset found

Latest commit: f4950db

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[coderabbitai]

Walkthrough

These changes introduce a unified pattern across sidebar item components to track menu open/close state via an onOpenChange callback. The pattern is propagated through the component hierarchy from RoomMenu to sidebar item variants (Condensed, Extended, Medium), enabling synchronized styling between the menu and its parent row element.

Changes

Cohort / File(s)	Summary
Sidebar Item Components apps/meteor/client/sidebar/Item/Condensed.tsx, apps/meteor/client/sidebar/Item/Extended.tsx, apps/meteor/client/sidebar/Item/Medium.tsx	Added MenuProps type with optional onOpenChange callback. Updated menu prop signature from () => ReactNode to (props?: MenuProps) => ReactNode. Added className prop to component interface. Introduced menuOpen state to track menu visibility and applied dynamic is-hovered class to root element. Menu now invoked with { onOpenChange: setMenuOpen } callback.
Menu Integration Layer apps/meteor/client/sidebar/RoomList/SidebarItemTemplateWithData.tsx, apps/meteor/client/sidebar/RoomMenu.tsx	Updated RoomListRowProps.menu signature to accept optional props object with onOpenChange callback. Modified RoomMenu to accept and forward onOpenChange prop to its internal GenericMenu component.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

🐰 A hop through the sidebar so fine,
With menus that open and glow!
The row stays alight when you click,
No more does the highlight slip away—
State flows like carrots in May! 🥕✨

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 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 fix: keeping the sidebar room row highlighted while the options menu is open, which directly addresses the core objective.
Linked Issues check	✅ Passed	The code changes implement the required functionality by introducing onOpenChange callbacks to track menu open/close state and apply dynamic styling to keep rows highlighted during menu visibility.
Out of Scope Changes check	✅ Passed	All changes are tightly scoped to implementing the menu open state tracking and visual highlight persistence feature; no unrelated modifications were introduced.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

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

---

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.}

[cubic-dev-ai]

No issues found across 5 files

[coderabbitai]

🧹 Nitpick comments (1)

apps/meteor/client/sidebar/Item/Extended.tsx (1)

17-19: MenuProps is duplicated across Extended.tsx, Condensed.tsx, and Medium.tsx.

All three files define an identical MenuProps type. Extract it to a shared location (e.g. a types.ts barrel in apps/meteor/client/sidebar/Item/) so the contract is maintained in one place.

♻️ Proposed refactor — shared type

Create apps/meteor/client/sidebar/Item/types.ts:

+export type MenuProps = {
+	onOpenChange?: (isOpen: boolean) => void;
+};

Then in each of the three files:

-type MenuProps = {
-	onOpenChange?: (isOpen: boolean) => void;
-};
+import type { MenuProps } from './types';

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@apps/meteor/client/sidebar/Item/Extended.tsx` around lines 17 - 19, MenuProps
is duplicated across Extended.tsx, Condensed.tsx, and Medium.tsx; extract it to
a shared type file and import it from each component. Create
apps/meteor/client/sidebar/Item/types.ts exporting type MenuProps = {
onOpenChange?: (isOpen: boolean) => void }; then remove the local MenuProps
declarations and update Extended.tsx, Condensed.tsx, and Medium.tsx to import {
MenuProps } from './types'; ensure the imported symbol name matches usages
(props and component typings) so builds and type checking continue to work.

📜 Review details

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between c5c2aa7 and f4950db.

📒 Files selected for processing (5)

• apps/meteor/client/sidebar/Item/Condensed.tsx
• apps/meteor/client/sidebar/Item/Extended.tsx
• apps/meteor/client/sidebar/Item/Medium.tsx
• apps/meteor/client/sidebar/RoomList/SidebarItemTemplateWithData.tsx
• apps/meteor/client/sidebar/RoomMenu.tsx

🧰 Additional context used

📓 Path-based instructions (1)

**/*.{ts,tsx,js}

📄 CodeRabbit inference engine (.cursor/rules/playwright.mdc)

**/*.{ts,tsx,js}: Write concise, technical TypeScript/JavaScript with accurate typing in Playwright tests
Avoid code comments in the implementation

Files:

• apps/meteor/client/sidebar/RoomMenu.tsx
• apps/meteor/client/sidebar/Item/Extended.tsx
• apps/meteor/client/sidebar/Item/Condensed.tsx
• apps/meteor/client/sidebar/RoomList/SidebarItemTemplateWithData.tsx
• apps/meteor/client/sidebar/Item/Medium.tsx

🔇 Additional comments (2)

apps/meteor/client/sidebar/RoomList/SidebarItemTemplateWithData.tsx (1)

30-30: LGTM — forwarding pattern is well-structured.

The = {} default on the menu function parameter correctly handles zero-argument calls (the IconButton placeholder path), and onOpenChange flows cleanly through to RoomMenu. The ReactElement return annotation is narrower than the declared ReactNode but is assignable; no type issue.

Also applies to: 124-141

apps/meteor/client/sidebar/Item/Extended.tsx (1)

64-71: Verify is-hovered CSS class is supported by SidebarV2Item in fuselage.

The is-hovered class cannot be found in any local stylesheets and is only applied in Extended.tsx, Medium.tsx, and Condensed.tsx. Since SidebarV2Item is imported from the external @rocket.chat/fuselage package, the class must be defined there. If fuselage does not support this class name or uses a prop-based API instead (e.g., hovered={menuOpen}), the highlight functionality will silently fail with no visual effect.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Duplicate comments:
In `@apps/meteor/client/sidebar/Item/Condensed.tsx`:
- Around line 5-7: The MenuProps type is duplicated between Condensed.tsx and
Extended.tsx; remove the duplicate by extracting MenuProps into a single shared
export (e.g., a sidebar/types or Item/types module) and import that shared type
into both Condensed.tsx and Extended.tsx, ensuring the exported symbol is named
MenuProps and the import sites update to reference it rather than redefining the
type.
- Around line 32-37: The component toggles an 'is-hovered' CSS class using
menuOpen, which mirrors the same incorrect dependency noted in Extended.tsx;
update the className logic to use the actual hover state/prop used by this
component (e.g., isHovered or the state updated by
handlePointerEnter/handleFocus) instead of menuOpen, and ensure the same fix is
applied to the second occurrence; locate SidebarV2Item and adjust the className
expression and any related state/prop names so the toggle relies on the correct
hover boolean that handlePointerEnter/handleFocus control.

In `@apps/meteor/client/sidebar/Item/Medium.tsx`:
- Around line 5-7: MenuProps is duplicated here; remove the local type in
Medium.tsx and import/reuse the single source of truth (the exported MenuProps)
used in Extended.tsx (or create a shared types module and export MenuProps from
there), then update Medium.tsx to reference the imported MenuProps instead of
redeclaring it so both Medium and Extended use the same type symbol.
- Around line 31-36: The component is conditionally adding the 'is-hovered' CSS
class using a loose truthy check; update the className assembly on SidebarV2Item
in Medium.tsx to only append 'is-hovered' when menuOpen is strictly true
(menuOpen === true) and ensure the existing className prop is normalized (handle
undefined) before joining; apply the same strict-check change to the other
occurrence referenced (line ~44) so both places consistently use the strict
boolean guard.

---

Nitpick comments:
In `@apps/meteor/client/sidebar/Item/Extended.tsx`:
- Around line 17-19: MenuProps is duplicated across Extended.tsx, Condensed.tsx,
and Medium.tsx; extract it to a shared type file and import it from each
component. Create apps/meteor/client/sidebar/Item/types.ts exporting type
MenuProps = { onOpenChange?: (isOpen: boolean) => void }; then remove the local
MenuProps declarations and update Extended.tsx, Condensed.tsx, and Medium.tsx to
import { MenuProps } from './types'; ensure the imported symbol name matches
usages (props and component typings) so builds and type checking continue to
work.