refactor(web): menu triggers and items stop restyling ui/menu

apps/web/src/components/BranchToolbar.tsx

@@ -41,7 +41,7 @@ import {
 } from "./BranchToolbarBranchSelector";
 import { BranchToolbarEnvironmentSelector } from "./BranchToolbarEnvironmentSelector";
 import { BranchToolbarEnvModeSelector } from "./BranchToolbarEnvModeSelector";
-import { Button } from "./ui/button";
+import { ComposerControl } from "./chat/ComposerControl";
 import {
   Menu,
   MenuGroup,
@@ -206,8 +206,8 @@ const MobileRunContextSelector = memo(function MobileRunContextSelector({
   return (
     <Menu>
       <MenuTrigger
-        render={<Button variant="ghost" size="xs" />}
-        className="min-w-0 max-w-[48%] flex-initial justify-start font-normal text-muted-foreground/70 text-xs! hover:text-foreground/80"
+        render={<ComposerControl size="xs" />}
+        className="min-w-0 max-w-[48%] flex-initial justify-start"
         data-composer-context-control
         data-composer-shortcut={[
           showEnvironmentPicker && !envLocked ? "composer.host" : "",

apps/web/src/components/LegacySidebar.tsx

@@ -2732,9 +2732,7 @@ function ProjectSortMenu({
     <Menu>
       <Tooltip>
         <TooltipTrigger
-          render={
-            <MenuTrigger className="inline-flex h-6 min-w-6 cursor-pointer items-center justify-center rounded-md px-[calc(--spacing(1)-1px)] text-icon-muted transition-colors hover:bg-accent hover:text-foreground" />
-          }
+          render={<MenuTrigger render={<Button size="icon-xs" variant="ghost-muted" />} />}
         >
           <ArrowUpDownIcon className="size-3.5" />
         </TooltipTrigger>

apps/web/src/components/ProjectScriptsControl.tsx

@@ -101,8 +101,6 @@ export default function ProjectScriptsControl({
       ),
     [fileScripts, scripts],
   );
-  const dropdownItemClassName =
-    "data-highlighted:bg-transparent data-highlighted:text-foreground hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground data-highlighted:hover:bg-accent data-highlighted:hover:text-accent-foreground data-highlighted:focus-visible:bg-accent data-highlighted:focus-visible:text-accent-foreground";
 
   const openAddDialog = () => {
     setEditorRequest({ scriptId: null, initial: EMPTY_PROJECT_SCRIPT_INPUT });
@@ -153,7 +151,6 @@ export default function ProjectScriptsControl({
           <MenuItem
             density={presentation === "menu" ? "touch" : "default"}
             key={`${fileScript.name} ${fileScript.command}`}
-            className={dropdownItemClassName}
             onClick={() => void importFileScript(fileScript)}
           >
             <ScriptIcon icon={fileScript.icon ?? "play"} className="size-4" />
@@ -178,25 +175,23 @@ export default function ProjectScriptsControl({
           <MenuItem
             density={presentation === "menu" ? "touch" : "default"}
             key={script.id}
-            className={`group ${dropdownItemClassName}`}
+            className="group"
             onClick={() => onRunScript(script)}
           >
             <ScriptIcon icon={script.icon} className="size-4" />
             <MenuItemLabel>
               {script.runOnWorktreeCreate ? `${script.name} (setup)` : script.name}
             </MenuItemLabel>
             <span className="relative ms-auto flex h-6 min-w-6 items-center justify-end">
-              {shortcutLabel && (
-                <MenuShortcut
-                  className={
-                    presentation === "menu"
-                      ? "ms-0 mr-7"
-                      : "ms-0 transition-opacity group-hover:opacity-0 group-focus-visible:opacity-0"
-                  }
-                >
-                  {shortcutLabel}
-                </MenuShortcut>
-              )}
+              {shortcutLabel &&
+                (presentation === "menu" ? (
+                  <MenuShortcut className="ms-0 mr-7">{shortcutLabel}</MenuShortcut>
+                ) : (
+                  // The shortcut yields its slot to the edit button on hover.
+                  <span className="transition-opacity group-hover:opacity-0 group-focus-visible:opacity-0">
+                    <MenuShortcut className="ms-0">{shortcutLabel}</MenuShortcut>
+                  </span>
+                ))}
               <Button
                 type="button"
                 variant="ghost"
@@ -220,11 +215,7 @@ export default function ProjectScriptsControl({
         );
       })}
       {importMenuItems}
-      <MenuItem
-        density={presentation === "menu" ? "touch" : "default"}
-        className={dropdownItemClassName}
-        onClick={openAddDialog}
-      >
+      <MenuItem density={presentation === "menu" ? "touch" : "default"} onClick={openAddDialog}>
         <PlusIcon className="size-4" />
         <MenuItemLabel>Add action</MenuItemLabel>
       </MenuItem>
@@ -296,7 +287,6 @@ export default function ProjectScriptsControl({
           </Tooltip>
           <GroupSeparator className="hidden @3xl/header-actions:block" />
           <Menu
-            highlightItemOnHover={false}
             open={actionsMenuOpen.scripts}
             onOpenChange={(open) =>
               setActionsMenuOpen({ presentation, scripts: open, imports: false })
@@ -312,7 +302,6 @@ export default function ProjectScriptsControl({
         </Group>
       ) : importableScripts.length > 0 ? (
         <Menu
-          highlightItemOnHover={false}
           open={actionsMenuOpen.imports}
           onOpenChange={(open) =>
             setActionsMenuOpen({ presentation, scripts: false, imports: open })
@@ -327,7 +316,7 @@ export default function ProjectScriptsControl({
           </MenuTrigger>
           <MenuPopup align="end">
             {importMenuItems}
-            <MenuItem className={dropdownItemClassName} onClick={openAddDialog}>
+            <MenuItem onClick={openAddDialog}>
               <PlusIcon className="size-4" />
               Add action
             </MenuItem>

apps/web/src/components/chat/DraftHeroHeadline.tsx

@@ -29,6 +29,7 @@ import {
   MenuTrigger,
 } from "../ui/menu";
 import { Tooltip, TooltipPopup, TooltipTrigger } from "../ui/tooltip";
+import { InlineButton } from "../ui/button";
 import { resolveProjectSettings } from "@t3tools/shared/projectSettings";
 
 interface DraftHeroHeadlineProps {
@@ -140,10 +141,13 @@ export function DraftHeroHeadline({
             // project title) so the hero sentence reads naturally: an
             // aria-label here would replace the title with an action phrase
             // mid-sentence and baffle screen-reader users.
-            <MenuTrigger className="pointer-events-auto inline-block max-w-64 truncate border-foreground/60 border-b border-dotted align-baseline text-foreground transition-colors hover:border-foreground/80 focus-visible:rounded-sm focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring" />
+            <MenuTrigger
+              render={<InlineButton tone="picker" />}
+              className="pointer-events-auto max-w-64 align-baseline"
+            />
           }
         >
-          {activeProjectDisplayName ?? "Choose a project"}
+          <span className="min-w-0 truncate">{activeProjectDisplayName ?? "Choose a project"}</span>
         </TooltipTrigger>
         {activeProjectDisplayName ? (
           <TooltipPopup side="top">{activeProjectDisplayName}</TooltipPopup>
@@ -189,26 +193,23 @@ export function DraftHeroHeadline({
         >
           {projectPickerEntries.map(({ group }) => {
             return (
-              <MenuRadioItem
-                key={group.projectKey}
-                value={group.projectKey}
-                closeOnClick
-                className="[&>span:last-child]:flex [&>span:last-child]:min-w-0 [&>span:last-child]:items-center [&>span:last-child]:gap-2"
-              >
-                <ProjectFavicon project={group} className="size-4 shrink-0" />
-                <Tooltip>
-                  <TooltipTrigger render={<span className="block min-w-0 truncate" />}>
-                    {group.displayName}
-                  </TooltipTrigger>
-                  <TooltipPopup side="top">{group.displayName}</TooltipPopup>
-                </Tooltip>
-                {showProjectEnvironments ? (
-                  <ProjectEnvironmentBadge
-                    group={group}
-                    primaryEnvironmentId={primaryEnvironmentId}
-                    machineByEnvironmentId={environmentMachineById}
-                  />
-                ) : null}
+              <MenuRadioItem key={group.projectKey} value={group.projectKey} closeOnClick>
+                <span className="flex min-w-0 items-center gap-2">
+                  <ProjectFavicon project={group} className="size-4 shrink-0" />
+                  <Tooltip>
+                    <TooltipTrigger render={<span className="block min-w-0 truncate" />}>
+                      {group.displayName}
+                    </TooltipTrigger>
+                    <TooltipPopup side="top">{group.displayName}</TooltipPopup>
+                  </Tooltip>
+                  {showProjectEnvironments ? (
+                    <ProjectEnvironmentBadge
+                      group={group}
+                      primaryEnvironmentId={primaryEnvironmentId}
+                      machineByEnvironmentId={environmentMachineById}
+                    />
+                  ) : null}
+                </span>
               </MenuRadioItem>
             );
           })}

apps/web/src/components/files/FileBreadcrumbs.tsx

@@ -155,7 +155,16 @@ function BreadcrumbMenuContent(props: {
                 <>
                   <PierreEntryIcon pathValue={entry.path} kind={entry.kind} theme={resolvedTheme} />
                   <Tooltip>
-                    <TooltipTrigger render={<span className="min-w-0 flex-1 truncate" />}>
+                    <TooltipTrigger
+                      render={
+                        <span
+                          className={cn(
+                            "min-w-0 flex-1 truncate",
+                            entry.ignored && "text-muted-foreground",
+                          )}
+                        />
+                      }
+                    >
                       {entry.label}
                     </TooltipTrigger>
                     <TooltipPopup side="right">{entry.path}</TooltipPopup>
@@ -166,7 +175,6 @@ function BreadcrumbMenuContent(props: {
                 <MenuItem
                   key={entry.path}
                   closeOnClick={false}
-                  className={entry.ignored ? "text-muted-foreground" : undefined}
                   onClick={() => props.onDirectoryChange(entry.path)}
                 >
                   {row}
@@ -178,7 +186,6 @@ function BreadcrumbMenuContent(props: {
                   value={entry.path}
                   closeOnClick
                   aria-current={isCurrentFile ? "page" : undefined}
-                  className={entry.ignored ? "text-muted-foreground" : undefined}
                 >
                   <span className="flex min-w-0 items-center gap-2">{row}</span>
                 </MenuRadioItem>

apps/web/src/components/preview/PreviewMoreMenu.tsx

@@ -206,10 +206,11 @@ export function PreviewMoreMenu({
             each one drove the popup far past its width.
           */}
           {profileName ? (
-            // Truncation sits on the label itself: it renders a block box, so
-            // `text-overflow` on an inline child inside it never applies and a
-            // long name would push the popup past its width instead.
-            <MenuGroupLabel className="max-w-64 truncate">Profile: {profileName}</MenuGroupLabel>
+            // Truncation needs a block box: `text-overflow` on an inline child
+            // never applies and a long name would push the popup past its width.
+            <MenuGroupLabel className="max-w-64">
+              <span className="block truncate">Profile: {profileName}</span>
+            </MenuGroupLabel>
           ) : null}
           <MenuItem
             onClick={() =>

apps/web/src/components/pullRequest/PullRequestStackHeader.tsx

@@ -11,16 +11,18 @@ export function PullRequestStackHeader({
   stale?: boolean;
 }) {
   return (
-    <MenuGroupLabel className="flex items-center justify-between gap-2">
-      <span>Stack #{number}</span>
-      {notice ? (
-        <Tooltip>
-          <TooltipTrigger render={<span role="status" className="text-xs font-normal" />}>
-            {stale ? "May be stale" : "Refreshing…"}
-          </TooltipTrigger>
-          <TooltipPopup>{notice}</TooltipPopup>
-        </Tooltip>
-      ) : null}
+    <MenuGroupLabel>
+      <div className="flex items-center justify-between gap-2">
+        <span>Stack #{number}</span>
+        {notice ? (
+          <Tooltip>
+            <TooltipTrigger render={<span role="status" className="text-xs font-normal" />}>
+              {stale ? "May be stale" : "Refreshing…"}
+            </TooltipTrigger>
+            <TooltipPopup>{notice}</TooltipPopup>
+          </Tooltip>
+        ) : null}
+      </div>
     </MenuGroupLabel>
   );
 }

apps/web/src/components/settings/EnvironmentIconPicker.tsx

@@ -102,7 +102,7 @@ export function EnvironmentIconMenu({
       <MenuSubPopup>
         {lock !== null ? (
           <>
-            <MenuItem disabled className="whitespace-normal text-xs">
+            <MenuItem disabled className="whitespace-normal">
               {lock}
             </MenuItem>
             <MenuSeparator />

apps/web/src/components/settings/SnapShotSettings.tsx

@@ -54,10 +54,7 @@ import {
   type CaptureSetupStep,
 } from "./SnapShotSetupDialog.logic";
 
-const soundOptionRowClassName =
-  "grid grid-cols-[1fr_auto] rounded-sm has-data-checked:bg-foreground/[0.08]";
-const soundOptionItemClassName = "data-checked:bg-transparent";
-const soundPreviewClassName = "min-h-7 w-7 justify-center px-0";
+const soundOptionRowClassName = "grid grid-cols-[1fr_auto]";
 
 function captureSettingsError(title: string, error: unknown) {
   return { title, message: error instanceof Error ? error.message : "Try again." };
@@ -520,33 +517,23 @@ export function SnapShotSettings() {
                           Off
                         </MenuRadioItem>
                         <div className={soundOptionRowClassName}>
-                          <MenuRadioItem
-                            className={soundOptionItemClassName}
-                            closeOnClick
-                            value="soft-pop"
-                          >
+                          <MenuRadioItem closeOnClick value="soft-pop">
                             Whoosh <span className="text-muted-foreground">(Default)</span>
                           </MenuRadioItem>
                           <MenuItem
                             aria-label="Play Whoosh"
-                            className={soundPreviewClassName}
                             closeOnClick={false}
                             onClick={() => playSnapShotSound("soft-pop")}
                           >
                             <PlayIcon />
                           </MenuItem>
                         </div>
                         <div className={soundOptionRowClassName}>
-                          <MenuRadioItem
-                            className={soundOptionItemClassName}
-                            closeOnClick
-                            value="camera-shutter"
-                          >
+                          <MenuRadioItem closeOnClick value="camera-shutter">
                             Click
                           </MenuRadioItem>
                           <MenuItem
                             aria-label="Play Click"
-                            className={soundPreviewClassName}
                             closeOnClick={false}
                             onClick={() => playSnapShotSound("camera-shutter")}
                           >

apps/web/src/components/usage/UsagePage.tsx

@@ -738,7 +738,7 @@ function UsageEnvironmentFilter({
       <Menu>
         <MenuTrigger
           render={<InlineButton />}
-          className="group/usage-environment min-w-0 max-w-full gap-1"
+          className="group/usage-environment min-w-0 max-w-full"
         >
           <span className="min-w-0 truncate">{label}</span>
           <span className="flex size-3.5 shrink-0 items-center justify-center text-muted-foreground">

apps/web/src/routes/_chat.pull-requests.tsx

@@ -2234,16 +2234,13 @@ function CompactFilterMenu<Value extends string>({
         aria-label={triggerLabel || iconOnly ? `${label}: ${current.label}` : label}
         title={iconOnly ? `${label}: ${current.label}` : undefined}
         render={
-          outlined ? <Button variant="outline" size={iconOnly ? "icon" : "default"} /> : undefined
-        }
-        className={
-          outlined
-            ? className
-            : cn(
-                "inline-flex h-7 min-w-0 items-center gap-1 rounded-md px-1.5 text-sm font-medium text-muted-foreground hover:bg-accent hover:text-foreground",
-                className,
-              )
+          outlined ? (
+            <Button variant="outline" size={iconOnly ? "icon" : "default"} />
+          ) : (
+            <Button variant="ghost-muted" size="sm" />
+          )
         }
+        className={cn("min-w-0", className)}
       >
         {iconOnly ? (
           <current.Icon aria-hidden className="size-4" />

scripts/lint-restyle-ceiling.ts

@@ -8,7 +8,7 @@ import * as NodeURL from "node:url";
 // components/ui exports are migrated to variants (see vite.config.ts). This gate keeps the
 // count from growing: CI fails when findings exceed the ceiling. Lower the ceiling when you
 // migrate a file, and delete this script when the rule becomes an error.
-export const RESTYLE_CEILING = 582;
+export const RESTYLE_CEILING = 499;
 
 const RULE = "shadcn(no-restyle)";