fix: clicking DM entries actually navigates to conversation

ConversationList was only setting activeConversationId in the store
but never navigating. If the Outlet was still showing ChatArea from
a server channel route, DMChat never mounted. Now every click
navigates to /dm/:conversationId so the router mounts DMChat.
This commit is contained in:
2026-07-02 08:43:57 -04:00
parent 3ed66f3d43
commit 3aa1ca3ead
+14 -7
View File
@@ -1,4 +1,5 @@
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";
import { useConversationStore } from "../stores/conversation.ts"; import { useConversationStore } from "../stores/conversation.ts";
import { useAuthStore } from "../stores/auth.ts"; import { useAuthStore } from "../stores/auth.ts";
import { NewConversationModal } from "./NewConversationModal.tsx"; import { NewConversationModal } from "./NewConversationModal.tsx";
@@ -16,30 +17,36 @@ export function ConversationList() {
const conversations = useConversationStore((s) => s.conversations); const conversations = useConversationStore((s) => s.conversations);
const activeId = useConversationStore((s) => s.activeConversationId); const activeId = useConversationStore((s) => s.activeConversationId);
const fetchConversations = useConversationStore((s) => s.fetchConversations); const fetchConversations = useConversationStore((s) => s.fetchConversations);
const setActive = useConversationStore((s) => s.setActiveConversation);
const createConversation = useConversationStore((s) => s.createConversation); const createConversation = useConversationStore((s) => s.createConversation);
const currentUser = useAuthStore((s) => s.user); const currentUser = useAuthStore((s) => s.user);
const navigate = useNavigate();
const [showNew, setShowNew] = useState(false); const [showNew, setShowNew] = useState(false);
const [notesError, setNotesError] = useState<string | null>(null);
useEffect(() => { useEffect(() => {
fetchConversations(); fetchConversations();
}, [fetchConversations]); }, [fetchConversations]);
const [notesError, setNotesError] = useState<string | null>(null); const openConversation = (convId: string) => {
navigate(`/dm/${convId}`);
};
const openNotes = async () => { const openNotes = async () => {
setNotesError(null); setNotesError(null);
// Find existing self-DM or create one // Find existing self-DM or create one
const existing = conversations.find((c) => isSelfDM(c, currentUser?.id || "")); const existing = conversations.find((c) => isSelfDM(c, currentUser?.id || ""));
if (existing) { if (existing) {
setActive(existing.id); navigate(`/dm/${existing.id}`);
return; return;
} }
try { try {
await createConversation([]); const conv = await createConversation([]);
if (conv) {
navigate(`/dm/${conv.id}`);
}
} catch (err) { } catch (err) {
console.error('Failed to create notes:', err); console.error("Failed to create notes:", err);
setNotesError(err instanceof Error ? err.message : 'Failed to create notes'); setNotesError(err instanceof Error ? err.message : "Failed to create notes");
} }
}; };
@@ -78,7 +85,7 @@ export function ConversationList() {
return ( return (
<button <button
key={conv.id} key={conv.id}
onClick={() => setActive(conv.id)} onClick={() => openConversation(conv.id)}
className={`w-full text-left px-2 py-1 rounded-sm flex items-center gap-2 ${ className={`w-full text-left px-2 py-1 rounded-sm flex items-center gap-2 ${
conv.id === activeId conv.id === activeId
? "terminal-active" ? "terminal-active"