Group inbox replies into conversations

app/app.tsx

@@ -9,9 +9,9 @@ import type { CurrentUser } from "@/features/auth/types";
 import { InboxPage } from "@/features/inbox/inbox-page";
 import { listMailboxes } from "@/features/mailboxes/api";
 import type { Mailbox } from "@/features/mailboxes/types";
-import { listMessages } from "@/features/messages/api";
+import { listConversations, listMessages } from "@/features/messages/api";
 import { mergeIncomingMessageIds } from "@/features/messages/incoming-sound";
-import type { MessageSummary } from "@/features/messages/types";
+import type { ConversationSummary } from "@/features/messages/types";
 import { SettingsPage } from "@/features/settings/settings-page";
 import { getSetupStatus } from "@/features/setup/api";
 import { SetupPage } from "@/features/setup/setup-page";
@@ -33,7 +33,7 @@ export function App(): React.ReactElement {
   const [user, setUser] = React.useState<CurrentUser | null>(null);
   const [mailboxes, setMailboxes] = React.useState<Mailbox[]>([]);
   const [users, setUsers] = React.useState<WorkspaceUser[]>([]);
-  const [messages, setMessages] = React.useState<MessageSummary[]>([]);
+  const [conversations, setConversations] = React.useState<ConversationSummary[]>([]);
   const [mailboxId, setMailboxId] = React.useState("all");
   const [search, setSearch] = React.useState("");
   const [composeOpen, setComposeOpen] = React.useState(false);
@@ -88,30 +88,25 @@ export function App(): React.ReactElement {
     }
   }, [loadWorkspace]);
 
-  const reloadMessages = React.useCallback(async () => {
+  const reloadConversations = React.useCallback(async () => {
     if (!user || activeFolder === "settings") return;
-    const folder = activeFolder === "starred" ? undefined : activeFolder;
-    const nextMessages = await listMessages({
-      folder,
+    const nextConversations = await listConversations({
+      folder: activeFolder,
       mailboxId: mailboxId === "all" ? undefined : mailboxId,
       search: search || undefined
     });
-    const filtered =
-      activeFolder === "starred"
-        ? nextMessages.filter((message) => message.starredAt)
-        : nextMessages;
-    setMessages(filtered);
+    setConversations(nextConversations);
   }, [activeFolder, mailboxId, search, user]);
 
   React.useEffect(() => {
     void reload();
   }, [reload]);
 
   React.useEffect(() => {
-    void reloadMessages().catch((error) => {
-      toast.error(error instanceof Error ? error.message : "Messages failed to load.");
+    void reloadConversations().catch((error) => {
+      toast.error(error instanceof Error ? error.message : "Conversations failed to load.");
     });
-  }, [reloadMessages]);
+  }, [reloadConversations]);
 
   React.useEffect(() => {
     if (!user || (user.role !== "owner" && user.role !== "admin")) return;
@@ -164,13 +159,13 @@ export function App(): React.ReactElement {
     if (!user || activeFolder === "settings") return;
 
     const interval = window.setInterval(() => {
-      void reloadMessages().catch(() => {
+      void reloadConversations().catch(() => {
         // Keep background refresh failures quiet; the next interval will retry.
       });
     }, 10_000);
 
     return () => window.clearInterval(interval);
-  }, [activeFolder, reloadMessages, user]);
+  }, [activeFolder, reloadConversations, user]);
 
   React.useEffect(() => {
     if (!user || isLoading || route.kind !== "settings") return;
@@ -230,7 +225,7 @@ export function App(): React.ReactElement {
         onSearchChange={setSearch}
         onSignedOut={() => {
           setUser(null);
-          setMessages([]);
+          setConversations([]);
         }}
       >
         <div className="flex h-full flex-col">
@@ -249,10 +244,10 @@ export function App(): React.ReactElement {
             ) : (
               <InboxPage
                 activeFolder={activeFolder as MailFolderId}
+                conversations={conversations}
                 mailboxes={contentMailboxes}
-                messages={messages}
                 selectedId={selectedId}
-                onRefresh={() => void reloadMessages()}
+                onRefresh={() => void reloadConversations()}
                 onMessageRouteChange={(folder, messageId) =>
                   navigate({ kind: "mail", folder, messageId })
                 }
@@ -271,7 +266,7 @@ export function App(): React.ReactElement {
             mode="new"
             open={composeOpen}
             onOpenChange={setComposeOpen}
-            onSent={() => void reloadMessages()}
+            onSent={() => void reloadConversations()}
           />
         </React.Suspense>
       ) : null}

app/features/inbox/inbox-page.tsx

@@ -1,18 +1,21 @@
 import * as React from "react";
 
 import type { Mailbox } from "@/features/mailboxes/types";
-import { getMessageThread, runMessageAction } from "@/features/messages/api";
+import { getMessageThread, runConversationAction } from "@/features/messages/api";
 import { MessageDetail } from "@/features/messages/message-detail";
 import { MessageList } from "@/features/messages/message-list";
-import type { MessageDetail as MessageDetailType, MessageSummary } from "@/features/messages/types";
+import type {
+  ConversationSummary,
+  MessageDetail as MessageDetailType
+} from "@/features/messages/types";
 import { cn } from "@/lib/cn";
 import type { MailFolderId } from "@/lib/routes";
 import { mailFolders } from "@/lib/routes";
 
 type InboxPageProps = {
   activeFolder: MailFolderId;
+  conversations: ConversationSummary[];
   mailboxes: Mailbox[];
-  messages: MessageSummary[];
   selectedId: string | null;
   onRefresh: () => void;
   onMessageRouteChange: (folder: MailFolderId, messageId: string | null) => void;
@@ -21,8 +24,8 @@ type InboxPageProps = {
 
 export function InboxPage({
   activeFolder,
+  conversations,
   mailboxes,
-  messages,
   selectedId,
   onRefresh,
   onMessageRouteChange,
@@ -57,16 +60,21 @@ export function InboxPage({
       .then((messages) => {
         if (cancelled) return;
         setThread(messages);
-        const selected = messages.find((message) => message.id === selectedId);
-        if (selected?.readAt === null) {
-          void runMessageAction(selectedId, "read")
+        if (
+          messages.some((message) => message.direction === "inbound" && message.readAt === null)
+        ) {
+          void runConversationAction(selectedId, "read", activeFolder)
             .then((updated) => {
               if (cancelled) return;
-              setThread((current) =>
-                current.map((message) =>
-                  message.id === updated.id ? { ...message, readAt: updated.readAt } : message
-                )
-              );
+              if (updated.affected > 0) {
+                setThread((current) =>
+                  current.map((message) =>
+                    message.direction === "inbound"
+                      ? { ...message, readAt: new Date().toISOString() }
+                      : message
+                  )
+                );
+              }
               onRefreshRef.current();
             })
             .catch(() => undefined);
@@ -83,20 +91,41 @@ export function InboxPage({
     return () => {
       cancelled = true;
     };
-  }, [selectedId]);
+  }, [activeFolder, selectedId]);
 
-  async function handleAction(action: Parameters<typeof runMessageAction>[1]) {
+  const selectedThreadId =
+    thread[0]?.threadId ??
+    conversations.find((conversation) => conversation.id === selectedId)?.threadId ??
+    null;
+  const selectedConversation = conversations.find(
+    (conversation) => conversation.threadId === selectedThreadId
+  );
+  const readerSelectedId = selectedConversation?.id ?? selectedId;
+
+  React.useEffect(() => {
+    if (
+      !selectedId ||
+      !selectedConversation ||
+      thread.some((message) => message.id === selectedConversation.id)
+    ) {
+      return;
+    }
+    void loadThread(selectedConversation.id);
+  }, [loadThread, selectedConversation, selectedId, thread]);
+
+  async function handleAction(action: Parameters<typeof runConversationAction>[1]) {
     if (!selectedId) return;
-    const updated = await runMessageAction(selectedId, action);
+    await runConversationAction(selectedId, action, activeFolder);
     onRefresh();
-    await loadThread(selectedId);
     if (
       action === "archive" ||
       action === "trash" ||
       (activeFolder === "starred" && action === "unstar")
     ) {
-      onMessageRouteChange(updated.folder, updated.id);
+      onMessageRouteChange(activeFolder, null);
+      return;
     }
+    await loadThread(selectedId);
   }
 
   return (
@@ -111,15 +140,17 @@ export function InboxPage({
         <div className="flex h-12 shrink-0 items-center justify-between border-b px-4">
           <h1 className="text-sm font-medium">
             <span className="md:hidden">{activeLabel}</span>
-            <span className="hidden md:inline">Messages</span>
+            <span className="hidden md:inline">Conversations</span>
           </h1>
-          <span className="font-mono text-[11px] text-muted-foreground">{messages.length}</span>
+          <span className="font-mono text-[11px] text-muted-foreground">
+            {conversations.length}
+          </span>
         </div>
         <MessageList
           activeFolder={activeFolder}
-          messages={messages}
-          selectedId={selectedId}
-          onSelect={(message) => onSelect(message.id)}
+          conversations={conversations}
+          selectedThreadId={selectedThreadId}
+          onSelect={(conversation) => onSelect(conversation.id)}
         />
       </section>
       <section
@@ -132,7 +163,7 @@ export function InboxPage({
           key={selectedId ?? "empty"}
           mailboxes={mailboxes}
           messages={thread}
-          selectedId={selectedId}
+          selectedId={readerSelectedId}
           onAction={(action) => void handleAction(action)}
           onBack={() => onMessageRouteChange(activeFolder, null)}
           onSent={() => {

app/features/messages/api.ts

@@ -1,5 +1,6 @@
 import { apiGet, apiPost } from "@/lib/api-client";
-import type { MessageDetail, MessageHtml, MessageSummary } from "./types";
+import type { MailFolderId } from "@/lib/routes";
+import type { ConversationSummary, MessageDetail, MessageHtml, MessageSummary } from "./types";
 
 export type MessageListParams = {
   folder?: string | undefined;
@@ -16,6 +17,15 @@ export async function listMessages(params: MessageListParams): Promise<MessageSu
   return apiGet<MessageSummary[]>(`/api/messages${suffix}`);
 }
 
+export async function listConversations(
+  params: MessageListParams & { folder: MailFolderId }
+): Promise<ConversationSummary[]> {
+  const query = new URLSearchParams({ folder: params.folder });
+  if (params.mailboxId) query.set("mailboxId", params.mailboxId);
+  if (params.search) query.set("search", params.search);
+  return apiGet<ConversationSummary[]>(`/api/conversations?${query.toString()}`);
+}
+
 export async function getMessage(id: string): Promise<MessageDetail> {
   return apiGet<MessageDetail>(`/api/messages/${id}`);
 }
@@ -39,3 +49,11 @@ export async function runMessageAction(
 ): Promise<MessageSummary> {
   return apiPost<MessageSummary>(`/api/messages/${id}/${action}`);
 }
+
+export async function runConversationAction(
+  id: string,
+  action: "read" | "unread" | "star" | "unstar" | "archive" | "trash",
+  folder: MailFolderId
+): Promise<{ affected: number; threadId: string }> {
+  return apiPost(`/api/conversations/${id}/${action}`, { folder });
+}

app/features/messages/message-detail.tsx

@@ -54,6 +54,10 @@ export function MessageDetail({
       ? selected
       : ([...messages].reverse().find((message) => message.direction === "inbound") ?? selected);
   const composeTarget = composeMode === "reply" ? replyTarget : selected;
+  const isUnread = messages.some(
+    (message) => message.direction === "inbound" && message.readAt === null
+  );
+  const isStarred = messages.some((message) => message.starredAt !== null);
 
   return (
     <article className="flex h-full flex-col bg-background">
@@ -74,21 +78,21 @@ export function MessageDetail({
           </h1>
           <div className="flex shrink-0 flex-wrap gap-0.5 rounded-md border bg-card p-0.5">
             <IconButton
-              label={selected.readAt ? "Mark unread" : "Mark read"}
-              onClick={() => onAction(selected.readAt ? "unread" : "read")}
+              label={isUnread ? "Mark conversation read" : "Mark conversation unread"}
+              onClick={() => onAction(isUnread ? "read" : "unread")}
             >
               <MailOpen />
             </IconButton>
             <IconButton
-              label={selected.starredAt ? "Unstar" : "Star"}
-              onClick={() => onAction(selected.starredAt ? "unstar" : "star")}
+              label={isStarred ? "Unstar conversation" : "Star conversation"}
+              onClick={() => onAction(isStarred ? "unstar" : "star")}
             >
               <Star />
             </IconButton>
-            <IconButton label="Archive" onClick={() => onAction("archive")}>
+            <IconButton label="Archive conversation" onClick={() => onAction("archive")}>
               <Archive />
             </IconButton>
-            <IconButton label="Trash" onClick={() => onAction("trash")}>
+            <IconButton label="Trash conversation" onClick={() => onAction("trash")}>
               <Trash2 />
             </IconButton>
           </div>