feat(charts): manage investigation charts in a scrolling workspace

src/features/workbench/components/workbench-top-bar-menus.tsx

@@ -20,6 +20,8 @@ import { useEffect, useRef, useState, type ReactNode } from "react";
 import { AnimatePresence, motion, useReducedMotion } from "motion/react";
 import { ProjectSwitchDialog } from "./project-switch-dialog";
 import {
+  mapOptionInteractionVariants,
+  MAP_ACTION_ROW_INTERACTION_CLASS_NAME,
   MAP_COMPACT_RADIUS_CLASS_NAME,
   MAP_ICON_CELL_RADIUS_CLASS_NAME,
   MAP_MAJOR_PANEL_RADIUS_CLASS_NAME,
@@ -53,11 +55,12 @@ const menuSurfaceClassName = cn(
   MAP_MAJOR_PANEL_RADIUS_CLASS_NAME,
   "acrylic-panel border p-2 text-slate-900"
 );
-const menuReadableRowClassName =
+const alertReadableRowClassName =
   "surface-well focus:bg-[var(--action-soft)] focus:text-slate-950";
 const alertActionClassName = cn(
   MAP_COMPACT_RADIUS_CLASS_NAME,
-  "h-10 w-10 shrink-0 justify-center border border-transparent bg-transparent p-0 text-[var(--ink-muted)] transition-colors hover:border-[var(--action-blue)] hover:bg-[var(--action-blue)] hover:text-white focus:border-[var(--action-blue)] focus:bg-[var(--action-blue)] focus:text-white data-[highlighted]:border-[var(--action-blue)] data-[highlighted]:bg-[var(--action-blue)] data-[highlighted]:text-white active:scale-95"
+  "h-10 w-10 shrink-0 justify-center border border-transparent bg-transparent p-0 text-[var(--ink-muted)] focus:bg-[var(--surface-reading)] focus:text-[var(--action-blue-hover)]",
+  mapOptionInteractionVariants()
 );
 
 export function AnalysisViewMenu({
@@ -243,7 +246,7 @@ export function AlertMenu({
                     tone === "warning" ? "status-tone-warning" : "status-tone-danger",
                     "relative my-1 min-h-[76px] border border-transparent px-3 py-2 transition-colors hover:border-[var(--action-border-hover)] hover:bg-[var(--action-selection-soft)] focus-within:border-[var(--action-border-hover)] focus-within:bg-[var(--action-selection-soft)]",
                     MAP_COMPACT_RADIUS_CLASS_NAME,
-                    menuReadableRowClassName
+                    alertReadableRowClassName
                   )}
                 >
                   <DropdownMenuItem
@@ -397,8 +400,8 @@ export function UserMenu({
           onSelect={onLogout ? () => void onLogout() : undefined}
           className={cn(
             "px-2 py-2",
-            !onLogout && "text-[var(--ink-muted)]",
-            MAP_COMPACT_RADIUS_CLASS_NAME
+            MAP_ACTION_ROW_INTERACTION_CLASS_NAME,
+            !onLogout && "text-[var(--ink-muted)]"
           )}
         >
           <LogOut size={15} aria-hidden="true" />
@@ -482,7 +485,7 @@ function MenuPlainButton({
         MAP_COMPACT_RADIUS_CLASS_NAME,
         disabled
           ? "border-[var(--surface-divider)] bg-[var(--surface-reading)] text-[var(--ink-muted)]"
-          : "border-[var(--surface-divider)] bg-[var(--surface-reading)] text-slate-800 hover:border-[var(--surface-border)] hover:bg-[var(--action-soft)]/55 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-[var(--action-focus-ring)]"
+          : cn(MAP_ACTION_ROW_INTERACTION_CLASS_NAME, "focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-[var(--action-focus-ring)]")
       )}
     >
       <span className="truncate text-xs font-semibold leading-4">{label}</span>
@@ -512,7 +515,7 @@ function MenuPrimaryButton({
         MAP_COMPACT_RADIUS_CLASS_NAME,
         disabled
           ? "border-[var(--surface-divider)] bg-[var(--surface-reading)] text-[var(--ink-muted)]"
-          : "border-[var(--surface-border)] bg-[var(--action-blue)] text-white shadow-lg shadow-[color:var(--action-blue)]/20 hover:bg-[var(--action-blue-hover)] focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-[var(--action-focus-ring)]"
+          : cn("border-[var(--surface-border)] bg-[var(--action-blue)] text-white shadow-lg shadow-[color:var(--action-blue)]/20", mapOptionInteractionVariants({ state: "primary" }))
       )}
     >
       <Icon size={14} aria-hidden="true" />
@@ -570,9 +573,8 @@ function MenuAction({
   return (
     <DropdownMenuItem
       className={cn(
-        "my-0.5 items-center border border-transparent px-2 py-2 transition",
-        MAP_COMPACT_RADIUS_CLASS_NAME,
-        menuReadableRowClassName
+        "my-0.5 items-center px-2 py-2 transition-colors",
+        MAP_ACTION_ROW_INTERACTION_CLASS_NAME
       )}
       onSelect={onSelect}
     >
@@ -582,13 +584,13 @@ function MenuAction({
           MAP_ICON_CELL_RADIUS_CLASS_NAME,
           tone === "primary" && "border-[var(--surface-border)] bg-[var(--action-soft)] text-[var(--action-blue-hover)]",
           tone === "warning" && "status-icon status-tone-warning",
-          tone === "default" && "border-[var(--surface-divider)] bg-[var(--surface-reading)] text-slate-600"
+          tone === "default" && "border-[var(--surface-divider)] bg-[var(--surface-reading)]"
         )}
       >
         <Icon size={15} aria-hidden="true" />
       </span>
       <span className="min-w-0">
-        <span className="block text-sm font-semibold leading-5 text-slate-900">{label}</span>
+        <span className="block text-sm font-semibold leading-5">{label}</span>
         <span className="mt-0.5 block truncate text-xs text-[var(--ink-muted)]">{description}</span>
       </span>
     </DropdownMenuItem>