From 2b041f0a6d86ef6f0f4c2360d904b3242f4886d6 Mon Sep 17 00:00:00 2001
From: naufalw <naufalwiwitputra@outlook.com>
Date: Mon, 30 Mar 2026 08:36:46 +1100
Subject: [PATCH 1/2] Scroll active item into view in composer menu

- Scroll the active menu item into view when the active item changes.

- Attach a ref to the list container and query the item by its data-
  attribute to call scrollIntoView.

- Add data-composer-item-id on items to support the lookup.
---
 .../components/chat/ComposerCommandMenu.tsx    | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/apps/web/src/components/chat/ComposerCommandMenu.tsx b/apps/web/src/components/chat/ComposerCommandMenu.tsx
index 7af4e6da43..65f26e4c98 100644
--- a/apps/web/src/components/chat/ComposerCommandMenu.tsx
+++ b/apps/web/src/components/chat/ComposerCommandMenu.tsx
@@ -1,5 +1,5 @@
 import { type ProjectEntry, type ProviderKind } from "@t3tools/contracts";
-import { memo } from "react";
+import { memo, useLayoutEffect, useRef } from "react";
 import { type ComposerSlashCommand, type ComposerTriggerKind } from "../../composer-logic";
 import { BotIcon } from "lucide-react";
 import { cn } from "~/lib/utils";
@@ -41,6 +41,16 @@ export const ComposerCommandMenu = memo(function ComposerCommandMenu(props: {
   onHighlightedItemChange: (itemId: string | null) => void;
   onSelect: (item: ComposerCommandItem) => void;
 }) {
+  const listRef = useRef<HTMLDivElement>(null);
+
+  useLayoutEffect(() => {
+    if (!props.activeItemId || !listRef.current) return;
+    const el = listRef.current.querySelector<HTMLElement>(
+      `[data-composer-item-id="${CSS.escape(props.activeItemId)}"]`,
+    );
+    el?.scrollIntoView({ block: "nearest" });
+  }, [props.activeItemId]);
+
   return (
     <Command
       mode="none"
@@ -50,7 +60,10 @@ export const ComposerCommandMenu = memo(function ComposerCommandMenu(props: {
         );
       }}
     >
-      <div className="relative overflow-hidden rounded-xl border border-border/80 bg-popover/96 shadow-lg/8 backdrop-blur-xs">
+      <div
+        ref={listRef}
+        className="relative overflow-hidden rounded-xl border border-border/80 bg-popover/96 shadow-lg/8 backdrop-blur-xs"
+      >
         <CommandList className="max-h-64">
           {props.items.map((item) => (
             <ComposerCommandMenuItem
@@ -85,6 +98,7 @@ const ComposerCommandMenuItem = memo(function ComposerCommandMenuItem(props: {
   return (
     <CommandItem
       value={props.item.id}
+      data-composer-item-id={props.item.id}
       className={cn(
         "cursor-pointer select-none gap-2",
         props.isActive && "bg-accent text-accent-foreground",

From 4db73ec1cf837a14c18e75fd3b8f3d29df1ce48d Mon Sep 17 00:00:00 2001
From: Julius Marminge <julius0216@outlook.com>
Date: Sun, 29 Mar 2026 18:31:07 -0700
Subject: [PATCH 2/2] Restore hover styling for composer command items

- Keep highlighted menu items visually stable on hover
- Preserve active item accent styling
---
 apps/web/src/components/chat/ComposerCommandMenu.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/web/src/components/chat/ComposerCommandMenu.tsx b/apps/web/src/components/chat/ComposerCommandMenu.tsx
index 5bc492f7fd..fc7ea27c29 100644
--- a/apps/web/src/components/chat/ComposerCommandMenu.tsx
+++ b/apps/web/src/components/chat/ComposerCommandMenu.tsx
@@ -103,7 +103,7 @@ const ComposerCommandMenuItem = memo(function ComposerCommandMenuItem(props: {
       value={props.item.id}
       data-composer-item-id={props.item.id}
       className={cn(
-        "cursor-pointer select-none gap-2 data-highlighted:bg-transparent data-highlighted:text-inherit",
+        "cursor-pointer select-none gap-2 hover:bg-transparent hover:text-inherit data-highlighted:bg-transparent data-highlighted:text-inherit",
         props.isActive && "bg-accent! text-accent-foreground!",
       )}
       onMouseMove={() => {