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 { 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}
|
||||||
|
|||||||
@ -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}
|
||||||
>
|
>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user