diff --git a/apps/desktop/src/app/shell/statusbar-controls.tsx b/apps/desktop/src/app/shell/statusbar-controls.tsx index f33099a6f82..ca0fbb5b645 100644 --- a/apps/desktop/src/app/shell/statusbar-controls.tsx +++ b/apps/desktop/src/app/shell/statusbar-controls.tsx @@ -2,7 +2,7 @@ import { type ComponentProps, type ReactNode, useState } from 'react' import { useNavigate } from 'react-router-dom' import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu' -import { Tip } from '@/components/ui/tooltip' +import { Tip, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip' import { cn } from '@/lib/utils' // Shared chrome styling for interactive statusbar items (button / link / menu @@ -100,60 +100,76 @@ function StatusbarItemView({ item, navigate }: { item: StatusbarItem; navigate: ) if (item.variant === 'menu' && (item.menuContent || (item.menuItems && item.menuItems.length > 0))) { - return ( - - - - - - - {item.menuContent - ? typeof item.menuContent === 'function' - ? item.menuContent(() => setMenuOpen(false)) - : item.menuContent - : (item.menuItems ?? []) - .filter(menuItem => !menuItem.hidden) - .map(menuItem => ( - { - if (menuItem.to) { - navigate(menuItem.to) - } + // The `Tip` helper can't wrap a menu: its TooltipTrigger needs a DOM child, + // but DropdownMenu's Root renders no element, so the hover listeners never + // land on the button and the tooltip silently never shows. Compose the two + // trigger Slots directly onto the same + + ) - menuItem.onSelect?.() - }} - > - {menuItem.href ? ( - - {menuItem.icon} - {menuItem.label} - - ) : ( - <> - {menuItem.icon} - {menuItem.label} - - )} - - ))} - - - + return ( + + {item.title ? ( + + + {trigger} + {item.title} + + + ) : ( + trigger + )} + + {item.menuContent + ? typeof item.menuContent === 'function' + ? item.menuContent(() => setMenuOpen(false)) + : item.menuContent + : (item.menuItems ?? []) + .filter(menuItem => !menuItem.hidden) + .map(menuItem => ( + { + if (menuItem.to) { + navigate(menuItem.to) + } + + menuItem.onSelect?.() + }} + > + {menuItem.href ? ( + + {menuItem.icon} + {menuItem.label} + + ) : ( + <> + {menuItem.icon} + {menuItem.label} + + )} + + ))} + + ) }