From 76ca5fb1ddf85280aa0c6da4be27d1bd4f7b6df9 Mon Sep 17 00:00:00 2001
From: ZhenYi <434836402@qq.com>
Date: Sat, 18 Apr 2026 21:13:03 +0800
Subject: [PATCH] fix(frontend): wire up message search button in
 DiscordChatPanel

- Add showSearch state and RoomMessageSearch panel (420px slide-in)
- Search button now toggles panel and highlights when active
- Clicking a search result scrolls to the message and closes panel
- Add msg-{id} anchors on message containers for scroll-into-view
---
 src/components/room/DiscordChatPanel.tsx    | 27 ++++++++++++++++++++-
 src/components/room/message/MessageList.tsx |  1 +
 2 files changed, 27 insertions(+), 1 deletion(-)

diff --git a/src/components/room/DiscordChatPanel.tsx b/src/components/room/DiscordChatPanel.tsx
index 786b190..ffd11b9 100644
--- a/src/components/room/DiscordChatPanel.tsx
+++ b/src/components/room/DiscordChatPanel.tsx
@@ -28,6 +28,7 @@ import { RoomMentionPanel } from './RoomMentionPanel';
 import { RoomThreadPanel } from './RoomThreadPanel';
 import { RoomSettingsPanel } from './RoomSettingsPanel';
 import { DiscordMemberList } from './DiscordMemberList';
+import { RoomMessageSearch } from './RoomMessageSearch';
 import { useRoom } from '@/contexts';
 
 // ─── Main Panel ──────────────────────────────────────────────────────────
@@ -67,6 +68,7 @@ export function DiscordChatPanel({ room, isAdmin, onClose, onDelete }: DiscordCh
   const [showSettings, setShowSettings] = useState(false);
   const [showMentions, setShowMentions] = useState(false);
   const [showMemberList, setShowMemberList] = useState(true);
+  const [showSearch, setShowSearch] = useState(false);
   const [activeThread, setActiveThread] = useState<{ thread: RoomThreadResponse; parentMessage: MessageWithMeta } | null>(null);
   const [isUpdatingRoom, setIsUpdatingRoom] = useState(false);
 
@@ -157,6 +159,7 @@ export function DiscordChatPanel({ room, isAdmin, onClose, onDelete }: DiscordCh
     setEditDialogOpen(false);
     setShowSettings(false);
     setShowMentions(false);
+    setShowSearch(false);
     setActiveThread(null);
   }, [room.id]);
 
@@ -201,7 +204,11 @@ export function DiscordChatPanel({ room, isAdmin, onClose, onDelete }: DiscordCh
 
           <button
             className="flex h-8 w-8 items-center justify-center rounded-md transition-colors"
-            style={{ color: 'var(--room-text-muted)' }}
+            style={{
+              color: showSearch ? 'var(--room-accent)' : 'var(--room-text-muted)',
+              background: showSearch ? 'var(--room-channel-active)' : 'transparent',
+            }}
+            onClick={() => { setShowSearch(v => !v); setShowSettings(false); }}
             title="Search messages"
           >
             <Search className="h-4 w-4" />
@@ -343,6 +350,24 @@ export function DiscordChatPanel({ room, isAdmin, onClose, onDelete }: DiscordCh
         </aside>
       )}
 
+      {showSearch && (
+        <aside
+          className="absolute right-0 top-12 bottom-0 w-[420px] border-l z-20 flex flex-col animate-in slide-in-from-right duration-200"
+          style={{ borderColor: 'var(--room-border)', background: 'var(--room-bg)' }}
+        >
+          <RoomMessageSearch
+            roomId={room.id}
+            onSelectMessage={(message) => {
+              // Scroll to the selected message and close search
+              const el = document.getElementById(`msg-${message.id}`);
+              if (el) el.scrollIntoView({ behavior: 'smooth', block: 'center' });
+              setShowSearch(false);
+            }}
+            onClose={() => setShowSearch(false)}
+          />
+        </aside>
+      )}
+
       {activeThread && (
         <RoomThreadPanel
           roomId={room.id}
diff --git a/src/components/room/message/MessageList.tsx b/src/components/room/message/MessageList.tsx
index f55ac94..157e17e 100644
--- a/src/components/room/message/MessageList.tsx
+++ b/src/components/room/message/MessageList.tsx
@@ -320,6 +320,7 @@ export const MessageList = memo(function MessageList({
                   ref={(el) => {
                     if (el) virtualizer.measureElement(el);
                   }}
+                  id={row.message ? `msg-${row.message.id}` : undefined}
                   data-index={virtualRow.index}
                   data-message-id={row.message?.id}
                 >