- {composeMode ? (
+ {composeState ? (
@@ -112,15 +118,16 @@ export function MessageDetail({
}
>
}
{...(onDraftsChange ? { onDraftsChange } : {})}
onOpenChange={(nextOpen) => {
- if (!nextOpen) setComposeMode(null);
+ if (!nextOpen) setComposeState(null);
}}
onSent={onSent}
/>
@@ -132,7 +139,7 @@ export function MessageDetail({
size="lg"
type="button"
variant="outline"
- onClick={() => setComposeMode("reply")}
+ onClick={() => setComposeState({ message: replyTarget, mode: "reply" })}
>
Reply
@@ -142,7 +149,7 @@ export function MessageDetail({
size="lg"
type="button"
variant="outline"
- onClick={() => setComposeMode("forward")}
+ onClick={() => setComposeState({ message: selected, mode: "forward" })}
>
Forward
diff --git a/package.json b/package.json
index 131b697..35c6ed1 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "hqbase",
- "version": "0.1.27",
+ "version": "0.1.28",
"private": true,
"type": "module",
"packageManager": "pnpm@11.7.0",
diff --git a/test/unit/app/messages/conversation-message-actions.test.tsx b/test/unit/app/messages/conversation-message-actions.test.tsx
new file mode 100644
index 0000000..1b68562
--- /dev/null
+++ b/test/unit/app/messages/conversation-message-actions.test.tsx
@@ -0,0 +1,102 @@
+// @vitest-environment happy-dom
+import { describe, expect, it, vi } from "vitest";
+
+import { ConversationMessages } from "@/features/messages/conversation-messages";
+import type { MessageDetail } from "@/features/messages/types";
+import { flushHookEffects, renderComponent } from "../render-hook";
+
+const firstMessage: MessageDetail = {
+ id: "msg_1",
+ threadId: "thr_1",
+ mailboxId: "mbx_1",
+ direction: "inbound",
+ folder: "inbox",
+ fromAddress: "customer@example.com",
+ to: ["support@example.com"],
+ cc: [],
+ bcc: [],
+ deliveredToAddress: "support@example.com",
+ subject: "Account access",
+ snippet: "I cannot sign in",
+ textBody: "I cannot sign in.",
+ htmlAvailable: false,
+ messageId: "",
+ inReplyTo: null,
+ references: [],
+ attachments: [],
+ receivedAt: "2026-07-27T14:00:00.000Z",
+ sentAt: null,
+ readAt: null,
+ starredAt: null,
+ hasAttachments: false,
+ createdAt: "2026-07-27T14:00:00.000Z"
+};
+
+const secondMessage: MessageDetail = {
+ ...firstMessage,
+ id: "msg_2",
+ direction: "outbound",
+ folder: "sent",
+ fromAddress: "support@example.com",
+ to: ["customer@example.com"],
+ textBody: "We can help.",
+ snippet: "We can help",
+ messageId: "",
+ inReplyTo: "",
+ references: [""],
+ receivedAt: null,
+ sentAt: "2026-07-27T14:05:00.000Z",
+ readAt: "2026-07-27T14:05:00.000Z",
+ createdAt: "2026-07-27T14:05:00.000Z"
+};
+
+describe("conversation message actions", () => {
+ it("targets the exact message selected for Reply or Forward", async () => {
+ const onCompose = vi.fn();
+ const view = await renderComponent(
+
+ );
+
+ const firstReply = view.container.querySelector(
+ '[data-compose-action="reply"][data-compose-message-id="msg_1"]'
+ );
+ const secondForward = view.container.querySelector(
+ '[data-compose-action="forward"][data-compose-message-id="msg_2"]'
+ );
+ await flushHookEffects(() => firstReply?.click());
+ await flushHookEffects(() => secondForward?.click());
+
+ expect(onCompose).toHaveBeenNthCalledWith(1, firstMessage, "reply");
+ expect(onCompose).toHaveBeenNthCalledWith(2, secondMessage, "forward");
+
+ await view.unmount();
+ });
+
+ it("switches the counted thread control between outward and inward arrows", async () => {
+ const messages = Array.from({ length: 4 }, (_, index) => ({
+ ...firstMessage,
+ id: `msg_${index + 1}`,
+ textBody: `Message body ${index + 1}`
+ }));
+ const view = await renderComponent();
+ const control = view.container.querySelector(
+ "[data-thread-disclosure-state]"
+ );
+
+ expect(control?.getAttribute("aria-label")).toBe("Expand 2 earlier messages");
+ expect(control?.querySelector('[data-thread-arrow="top-outward"]')).not.toBeNull();
+ expect(control?.querySelector('[data-thread-arrow="bottom-outward"]')).not.toBeNull();
+ expect(view.container.textContent).not.toContain("Message body 2");
+
+ await flushHookEffects(() => control?.click());
+
+ expect(control?.getAttribute("aria-label")).toBe("Collapse 2 earlier messages");
+ expect(control?.getAttribute("data-thread-disclosure-state")).toBe("expanded");
+ expect(control?.querySelector('[data-thread-arrow="top-inward"]')).not.toBeNull();
+ expect(control?.querySelector('[data-thread-arrow="bottom-inward"]')).not.toBeNull();
+ expect(view.container.textContent).toContain("Message body 2");
+ expect(view.container.textContent).toContain("Message body 3");
+
+ await view.unmount();
+ });
+});
diff --git a/test/unit/app/messages/conversation-reader.test.tsx b/test/unit/app/messages/conversation-reader.test.tsx
index 10796dd..d8acf9b 100644
--- a/test/unit/app/messages/conversation-reader.test.tsx
+++ b/test/unit/app/messages/conversation-reader.test.tsx
@@ -64,7 +64,7 @@ const conversation: ConversationSummary = {
};
describe("conversation reader", () => {
- it("renders the complete thread and keeps Reply and Forward at the bottom", () => {
+ it("renders Reply and Forward for every message and keeps the large final actions", () => {
const html = renderToStaticMarkup(
{
expect(html.indexOf("I cannot sign in.")).toBeLessThan(html.indexOf("We can help."));
expect(html.indexOf("We can help.")).toBeLessThan(html.lastIndexOf(">Reply<"));
- expect(html).toContain(">Forward<");
+ expect(html.match(/>ReplyForward {
expect(html).not.toContain("Message body 4");
expect(html).not.toContain("Message body 5");
expect(html).toContain("Message body 6");
- expect(html).toContain("4 earlier messages");
+ expect(html).toContain('aria-label="Expand 4 earlier messages"');
expect(html).toContain('aria-expanded="false"');
+ expect(html).toContain('data-thread-disclosure-state="collapsed"');
+ expect(html).toContain('data-thread-arrow="top-outward"');
+ expect(html).toContain('data-thread-arrow="bottom-outward"');
});
});
diff --git a/test/unit/app/render-hook.tsx b/test/unit/app/render-hook.tsx
index 04927bc..b925868 100644
--- a/test/unit/app/render-hook.tsx
+++ b/test/unit/app/render-hook.tsx
@@ -31,6 +31,19 @@ export async function renderHook(
};
}
+export async function renderComponent(content: ReactNode): Promise<{
+ container: HTMLDivElement;
+ unmount: () => Promise;
+}> {
+ const container = document.createElement("div");
+ const root = ReactDOM.createRoot(container);
+ await render(root, content);
+ return {
+ container,
+ unmount: () => render(root, null)
+ };
+}
+
async function render(root: Root, content: ReactNode): Promise {
await act(async () => {
root.render(content);
diff --git a/test/unit/worker/features/updates/service.test.ts b/test/unit/worker/features/updates/service.test.ts
index 110b3d0..e6aa781 100644
--- a/test/unit/worker/features/updates/service.test.ts
+++ b/test/unit/worker/features/updates/service.test.ts
@@ -43,9 +43,10 @@ describe("HQBase updates", () => {
expect(compareVersions("0.2.0", "0.1.9")).toBeGreaterThan(0);
});
it("rejects a tampered manifest", async () => {
+ const replacement = envelope.signature.startsWith("A") ? "B" : "A";
await expect(
getUpdateStatus({ HQBASE_RELEASE_PUBLIC_KEY: publicKeyBase64 } as WorkerEnv, async () =>
- Response.json({ ...envelope, signature: `A${envelope.signature.slice(1)}` })
+ Response.json({ ...envelope, signature: `${replacement}${envelope.signature.slice(1)}` })
)
).rejects.toThrow("signature");
});