From 3030bb798178303625d272ae89f5adac4fccb197 Mon Sep 17 00:00:00 2001
From: xintaofei <itpkcn@gmail.com>
Date: Wed, 22 Apr 2026 23:18:34 +0800
Subject: [PATCH] feat(conversation-detail): auto-scroll active tile into view
 and theme its highlight

---
 .../conversation-detail-panel.tsx             | 25 +++++++++++++++++--
 1 file changed, 23 insertions(+), 2 deletions(-)

diff --git a/src/components/conversations/conversation-detail-panel.tsx b/src/components/conversations/conversation-detail-panel.tsx
index 83080c9..69404db 100644
--- a/src/components/conversations/conversation-detail-panel.tsx
+++ b/src/components/conversations/conversation-detail-panel.tsx
@@ -1390,6 +1390,19 @@ export function ConversationDetailPanel() {
 
   const canTile = isTileMode && tabs.length > 1
 
+  const tileTabRefs = useRef<Map<string, HTMLDivElement | null>>(new Map())
+
+  useEffect(() => {
+    if (!canTile || !activeTabId) return
+    const el = tileTabRefs.current.get(activeTabId)
+    if (!el) return
+    el.scrollIntoView({
+      behavior: "smooth",
+      inline: "center",
+      block: "nearest",
+    })
+  }, [canTile, activeTabId])
+
   if (hasNoTabs) {
     return null
   }
@@ -1399,12 +1412,20 @@ export function ConversationDetailPanel() {
     return (
       <div
         key={tab.id}
+        ref={(el) => {
+          if (el) {
+            tileTabRefs.current.set(tab.id, el)
+          } else {
+            tileTabRefs.current.delete(tab.id)
+          }
+        }}
         className={cn(
           canTile
             ? cn(
-                "relative h-full min-w-[420px] flex-1 overflow-hidden",
+                "relative h-full min-w-96 flex-1 overflow-hidden",
                 index > 0 && "border-l border-border",
-                active && "bg-gradient-to-b from-muted/50 to-transparent"
+                active &&
+                  "bg-gradient-to-b from-sidebar-primary/[0.03] to-transparent"
               )
             : active
               ? "h-full"