fix(inbox): reload mail content when switching items (+ filter refetch)

The appshell SDK useQuery only re-runs when the action changes, not the
variables — so switching mail items (same crm.mail.history action, new
threadId) never refetched and the reader kept the first thread's content
(only the subject, a direct prop, updated). Key MailReader by threadId to
remount it on switch (same pattern Messenger already uses for ThreadView).
Also force a refetch of crm.inbox.list when the filter changes, which hit
the same stale-variables bug.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
2026-07-18 19:08:47 +05:30
parent efd31d9293
commit 7bcd1a2a2d
2 changed files with 9 additions and 2 deletions
+3 -1
View File
@@ -135,8 +135,10 @@ function Detail({ it, onError, onDone, onSnooze, onArchive }: {
{it.threadId ? (
// A message/mail item → open the conversation to read + reply.
// key by threadId: the SDK's useQuery only refetches when the ACTION changes, not the
// variables — so switching items must remount MailReader to load the new thread's history.
<div style={{ flex: 1, minHeight: 0 }}>
<MailReader threadId={it.threadId} subject={it.title} onError={onError} />
<MailReader key={it.threadId} threadId={it.threadId} subject={it.title} onError={onError} />
</div>
) : (
// A non-threaded item (e.g. a system alert) → show its detail.
+6 -1
View File
@@ -8,7 +8,7 @@
// query crm.inbox.list { state? } -> InboxItem[]
// cmd crm.inbox.transition { id, state, reason? } -> InboxItem
import { useCallback, useMemo, useState } from "react";
import { useCallback, useEffect, useMemo, useState } from "react";
import { useAppShell, useQuery } from "@abe-kap/appshell-sdk/react";
import { isShellConfigured } from "./appshell";
import type { MailThread } from "./mail-api";
@@ -40,6 +40,11 @@ function useLiveInbox(state?: InboxState): InboxData {
const showMail = !state || state === "OPEN";
const mq = useQuery<MailThread[]>("crm.mail.list", {});
// The SDK's useQuery only refetches when the ACTION changes, not the variables — so a filter
// change (same action, new { state }) wouldn't reload. Force a refetch when the filter changes.
const refetchInbox = q.refetch;
useEffect(() => { refetchInbox(); }, [state, refetchInbox]);
const items = useMemo<UiInboxItem[]>(() => {
const inboxItems = q.data ?? [];
const mailItems: UiInboxItem[] = showMail