From ed856946c63e51861a8153d264856db0dbb677a4 Mon Sep 17 00:00:00 2001
From: Julius Marminge <julius0216@outlook.com>
Date: Tue, 22 Sep 2026 12:22:11 -0700
Subject: [PATCH] refactor(web): add an active prop to CommandItem (#13023)

Co-authored-by: Claude Fable 5 <noreply@anthropic.com>
---
 apps/web/src/components/CommandPaletteResults.tsx   |  7 ++-----
 .../web/src/components/chat/ComposerCommandMenu.tsx |  6 ++----
 apps/web/src/components/ui/command.tsx              | 13 ++++++++++++-
 scripts/lint-restyle-ceiling.ts                     |  2 +-
 4 files changed, 17 insertions(+), 11 deletions(-)

diff --git a/apps/web/src/components/CommandPaletteResults.tsx b/apps/web/src/components/CommandPaletteResults.tsx
index c66ab9a1cf2b142f499d2150545a9fa85586df5b..b9cb0c6269c8142a97d1a32a17fe773dd15d1e6f 100644
--- a/apps/web/src/components/CommandPaletteResults.tsx
+++ b/apps/web/src/components/CommandPaletteResults.tsx
@@ -15,7 +15,6 @@ import {
   CommandShortcut,
 } from "./ui/command";
 import { ThreadSearchMatchExcerpt } from "./ThreadSearchMatch";
-import { cn } from "~/lib/utils";
 
 interface CommandPaletteResultsProps {
   emptyStateMessage?: string;
@@ -109,10 +108,8 @@ function CommandPaletteResultRow(props: {
   return (
     <CommandItem
       value={props.item.value}
-      className={cn(
-        "cursor-pointer gap-2 hover:bg-transparent hover:text-inherit data-highlighted:bg-transparent data-highlighted:text-inherit data-selected:bg-transparent data-selected:text-inherit [&[data-highlighted][data-selected]]:bg-transparent [&[data-highlighted][data-selected]]:text-inherit",
-        props.isActive && "bg-accent! text-accent-foreground!",
-      )}
+      active={props.isActive}
+      className="gap-2"
       onMouseDown={(event) => {
         event.preventDefault();
       }}
diff --git a/apps/web/src/components/chat/ComposerCommandMenu.tsx b/apps/web/src/components/chat/ComposerCommandMenu.tsx
index 9cdfc37a329f45e1d7616a4897dbb1eb62ba0137..7c23a6059d3dd7296d22d17631b9eb4a355e04c1 100644
--- a/apps/web/src/components/chat/ComposerCommandMenu.tsx
+++ b/apps/web/src/components/chat/ComposerCommandMenu.tsx
@@ -161,10 +161,8 @@ const ComposerCommandMenuItem = memo(function ComposerCommandMenuItem(props: {
     <CommandItem
       value={props.item.id}
       data-composer-item-id={props.item.id}
-      className={cn(
-        "cursor-pointer select-none gap-3 rounded-lg px-3 py-2! hover:bg-transparent hover:text-inherit data-highlighted:bg-transparent data-highlighted:text-inherit",
-        props.isActive && "bg-accent! text-accent-foreground!",
-      )}
+      active={props.isActive}
+      className="gap-3 rounded-lg px-3 py-2!"
       onMouseMove={() => {
         if (!props.isActive) props.onHighlight(props.item.id);
       }}
diff --git a/apps/web/src/components/ui/command.tsx b/apps/web/src/components/ui/command.tsx
index f8e9b72b1b4cf34f6eaac8f0a05eb7d7efa2ec21..83398a7f8fb9a7b193b50f934d3f142f4ff28383 100644
--- a/apps/web/src/components/ui/command.tsx
+++ b/apps/web/src/components/ui/command.tsx
@@ -160,13 +160,24 @@ function CommandCollection({ ...props }: React.ComponentProps<typeof Autocomplet
   return <AutocompleteCollection data-slot="command-collection" {...props} />;
 }
 
-function CommandItem({ className, ...props }: React.ComponentProps<typeof AutocompleteItem>) {
+// Pass `active` when the palette tracks the highlighted row itself; the
+// primitive's hover and keyboard highlight are then ignored so the two never
+// disagree, and the row shows the active surface instead.
+function CommandItem({
+  className,
+  active,
+  ...props
+}: React.ComponentProps<typeof AutocompleteItem> & { active?: boolean }) {
   return (
     <AutocompleteItem
       className={cn(
         "py-1.5 data-selected:bg-foreground/[0.06] data-highlighted:bg-foreground/[0.09] data-highlighted:text-foreground [&[data-highlighted][data-selected]]:bg-foreground/[0.09] [&[data-highlighted][data-selected]]:text-foreground",
+        active !== undefined &&
+          "cursor-pointer hover:bg-transparent hover:text-inherit data-highlighted:bg-transparent data-highlighted:text-inherit data-selected:bg-transparent data-selected:text-inherit [&[data-highlighted][data-selected]]:bg-transparent [&[data-highlighted][data-selected]]:text-inherit",
+        active && "bg-accent! text-accent-foreground!",
         className,
       )}
+      data-active={active || undefined}
       data-slot="command-item"
       {...props}
     />
diff --git a/scripts/lint-restyle-ceiling.ts b/scripts/lint-restyle-ceiling.ts
index 78babaf7405f1d803d72e9fa399dadc4103343da..353481ac6477406645707940b74392ee63cb32ca 100644
--- a/scripts/lint-restyle-ceiling.ts
+++ b/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 = 1159;
+export const RESTYLE_CEILING = 1143;
 
 const RULE = "shadcn(no-restyle)";
 
-- 
2.54.0