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:
parent
9336250f1c
commit
76ca5fb1dd
@ -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}
|
||||
|
||||
@ -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}
|
||||
>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user