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
This commit is contained in:
ZhenYi 2026-04-18 21:13:03 +08:00
parent 9336250f1c
commit 76ca5fb1dd
2 changed files with 27 additions and 1 deletions

View File

@ -28,6 +28,7 @@ import { RoomMentionPanel } from './RoomMentionPanel';
import { RoomThreadPanel } from './RoomThreadPanel'; import { RoomThreadPanel } from './RoomThreadPanel';
import { RoomSettingsPanel } from './RoomSettingsPanel'; import { RoomSettingsPanel } from './RoomSettingsPanel';
import { DiscordMemberList } from './DiscordMemberList'; import { DiscordMemberList } from './DiscordMemberList';
import { RoomMessageSearch } from './RoomMessageSearch';
import { useRoom } from '@/contexts'; import { useRoom } from '@/contexts';
// ─── Main Panel ────────────────────────────────────────────────────────── // ─── Main Panel ──────────────────────────────────────────────────────────
@ -67,6 +68,7 @@ export function DiscordChatPanel({ room, isAdmin, onClose, onDelete }: DiscordCh
const [showSettings, setShowSettings] = useState(false); const [showSettings, setShowSettings] = useState(false);
const [showMentions, setShowMentions] = useState(false); const [showMentions, setShowMentions] = useState(false);
const [showMemberList, setShowMemberList] = useState(true); const [showMemberList, setShowMemberList] = useState(true);
const [showSearch, setShowSearch] = useState(false);
const [activeThread, setActiveThread] = useState<{ thread: RoomThreadResponse; parentMessage: MessageWithMeta } | null>(null); const [activeThread, setActiveThread] = useState<{ thread: RoomThreadResponse; parentMessage: MessageWithMeta } | null>(null);
const [isUpdatingRoom, setIsUpdatingRoom] = useState(false); const [isUpdatingRoom, setIsUpdatingRoom] = useState(false);
@ -157,6 +159,7 @@ export function DiscordChatPanel({ room, isAdmin, onClose, onDelete }: DiscordCh
setEditDialogOpen(false); setEditDialogOpen(false);
setShowSettings(false); setShowSettings(false);
setShowMentions(false); setShowMentions(false);
setShowSearch(false);
setActiveThread(null); setActiveThread(null);
}, [room.id]); }, [room.id]);
@ -201,7 +204,11 @@ export function DiscordChatPanel({ room, isAdmin, onClose, onDelete }: DiscordCh
<button <button
className="flex h-8 w-8 items-center justify-center rounded-md transition-colors" 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" title="Search messages"
> >
<Search className="h-4 w-4" /> <Search className="h-4 w-4" />
@ -343,6 +350,24 @@ export function DiscordChatPanel({ room, isAdmin, onClose, onDelete }: DiscordCh
</aside> </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 && ( {activeThread && (
<RoomThreadPanel <RoomThreadPanel
roomId={room.id} roomId={room.id}

View File

@ -320,6 +320,7 @@ export const MessageList = memo(function MessageList({
ref={(el) => { ref={(el) => {
if (el) virtualizer.measureElement(el); if (el) virtualizer.measureElement(el);
}} }}
id={row.message ? `msg-${row.message.id}` : undefined}
data-index={virtualRow.index} data-index={virtualRow.index}
data-message-id={row.message?.id} data-message-id={row.message?.id}
> >