From 4a4795e5f0f0083e16de64b86b499d8cca718b52 Mon Sep 17 00:00:00 2001
From: Naufal Putra <67492436+naufalw@users.noreply.github.com>
Date: Mon, 30 Mar 2026 12:33:47 +1100
Subject: [PATCH] Scroll active item into view in composer menu (#1557)

Co-authored-by: Julius Marminge <julius0216@outlook.com>
---
 .../components/chat/ComposerCommandMenu.tsx   | 20 ++++++++++++++++---
 1 file changed, 17 insertions(+), 3 deletions(-)

diff --git a/apps/web/src/components/chat/ComposerCommandMenu.tsx b/apps/web/src/components/chat/ComposerCommandMenu.tsx
index cc48e9ae2119208300580ce2b97df125af524213..fc7ea27c29f407078d8be2f8263548df3c2226b9 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
       autoHighlight={false}
@@ -51,7 +61,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
@@ -88,8 +101,9 @@ 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 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={() => {
-- 
2.54.0