rigs completed

frontend/src/components/Menubar.tsx

@@ -31,12 +31,27 @@ export function Menubar({ menus, onAction }: Props) {
           key={menu.name}
           open={openMenu === menu.name}
           onOpenChange={(o) => setOpenMenu(o ? menu.name : null)}
+          modal={false}
         >
           <DropdownMenuTrigger
             onMouseEnter={() => {
               // Only switch on hover if a menu is already open.
               if (openMenu !== null && openMenu !== menu.name) setOpenMenu(menu.name);
             }}
+            onPointerDown={(e) => {
+              // Desktop-menubar behaviour: when another menu is already
+              // open, a click on a different trigger should switch to it
+              // in one click. Without this Radix consumes the click to
+              // close the current menu first, requiring a second click
+              // to open the new one. We pre-empt by setting open state
+              // synchronously and stopping the event from reaching the
+              // default Radix toggle.
+              if (openMenu !== null && openMenu !== menu.name) {
+                e.preventDefault();
+                e.stopPropagation();
+                setOpenMenu(menu.name);
+              }
+            }}
             className={cn(
               'px-3 text-sm rounded-md text-muted-foreground hover:bg-muted hover:text-foreground transition-colors outline-none focus-visible:ring-2 focus-visible:ring-ring',
               openMenu === menu.name && 'bg-muted text-primary',
@@ -44,7 +59,17 @@ export function Menubar({ menus, onAction }: Props) {
           >
             {menu.label}
           </DropdownMenuTrigger>
-          <DropdownMenuContent align="start" sideOffset={4} className="min-w-[240px]">
+          <DropdownMenuContent
+            align="start" sideOffset={4} className="min-w-[240px]"
+            onCloseAutoFocus={(e) => {
+              // Radix re-focuses the trigger after close. Combined with our
+              // focus-visible:ring style this leaves an orange outline around
+              // the previously-clicked menu — looks like a stuck "selected"
+              // state. We swallow the auto-focus and let the next interaction
+              // decide where focus belongs.
+              e.preventDefault();
+            }}
+          >
             {menu.items.map((item, i) =>
               item.type === 'separator' ? (
                 <DropdownMenuSeparator key={i} />