@marktiderman/genesis-chat 0.1.0 → 0.2.0

package/src/native/__tests__/organise-screens.test.tsx

@@ -0,0 +1,344 @@
+// @vitest-environment happy-dom
+// @feat:chat
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { act, cleanup, fireEvent, render, screen, waitFor, within } from "@testing-library/react";
+import type { ReactNode } from "react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { NativeToastProvider } from "@marktiderman/genesis-ui-native/components";
+import { ChatProvider } from "../../react/index";
+import { createMemoryChatClient, type MemoryChatClient, type MemoryConversationSeed } from "../../web/memory-client";
+import { ChatAvailabilityScreen } from "../availability";
+import { ChatBroadcastSheet } from "../broadcast-sheet";
+import { ChatNativeProvider } from "../context";
+import { ChatScheduledList, ChatScheduleSheet } from "../schedule-sheet";
+import { ChatSearchScreen } from "../search-screen";
+import { ChatThreadScreen } from "../thread-screen";
+
+vi.mock("react-native", async (original) => ({ ...(await original<object>()), useWindowDimensions: () => ({ width: 390, height: 844, scale: 3, fontScale: 1 }) }));
+
+afterEach(cleanup);
+
+const ME = "11111111-1111-4111-8111-111111111111";
+const SAM = "22222222-2222-4222-8222-222222222222";
+const LEE = "33333333-3333-4333-8333-333333333333";
+const NAMES: Record<string, string> = { [ME]: "Me", [SAM]: "Sam", [LEE]: "Lee" };
+const getPerson = (id: string) => (NAMES[id] ? { name: NAMES[id]! } : undefined);
+
+function wrap(client: MemoryChatClient, children: ReactNode) {
+  const qc = new QueryClient({ defaultOptions: { queries: { retry: false } } });
+  return (
+    <QueryClientProvider client={qc}>
+      <ChatProvider client={client} userId={ME}>
+        <NativeToastProvider>
+          <ChatNativeProvider getPerson={getPerson}>{children}</ChatNativeProvider>
+        </NativeToastProvider>
+      </ChatProvider>
+    </QueryClientProvider>
+  );
+}
+
+function memory(conversations: MemoryConversationSeed[], extra: Partial<Parameters<typeof createMemoryChatClient>[0]> = {}) {
+  return createMemoryChatClient({ me: ME, conversations, ...extra });
+}
+
+const called = (client: MemoryChatClient, method: string) => client.calls.filter((c) => c.method === method);
+
+describe("ChatThreadScreen topics", () => {
+  const seed = (myRole: "owner" | "member", closed = false): MemoryConversationSeed => ({
+    id: "cohort",
+    kind: "cohort",
+    title: "Cohort",
+    members: [{ userId: ME, role: myRole }, { userId: SAM }, { userId: LEE }],
+    topics: [{ topic: "week-1", title: "Week 1" }, { topic: "week-2", title: "Week 2", closed }],
+    messages: [
+      { id: "a", senderId: SAM, body: "general hello" },
+      { id: "b", senderId: SAM, body: "habits talk", topic: "week-1" },
+      { id: "c", senderId: LEE, body: "week two talk", topic: "week-2" },
+    ],
+  });
+
+  it("shows the topics as chips and lists only the topic chosen, with its name in the field", async () => {
+    const client = memory([seed("member")]);
+    render(wrap(client, <ChatThreadScreen conversationId="cohort" testID="t" />));
+    await waitFor(() => expect(screen.getByTestId("t-topics-week-1")).toBeTruthy());
+    expect(screen.getByTestId("t-topics-all").getAttribute("aria-selected")).toBe("true");
+    await waitFor(() => expect(screen.getByTestId("t-message-a")).toBeTruthy());
+    expect(screen.queryByTestId("t-topics-menu")).toBeNull(); // members don't manage topics
+
+    fireEvent.click(screen.getByTestId("t-topics-week-1"));
+    await screen.findByTestId("t-message-b");
+    expect(screen.queryByTestId("t-message-a")).toBeNull();
+    expect(screen.queryByTestId("t-message-c")).toBeNull();
+    expect(called(client, "messages").some((c) => (c.args[1] as { topic?: string }).topic === "week-1")).toBe(true);
+    expect((screen.getByTestId("t-composer-input") as HTMLInputElement).placeholder).toBe("Message #Week 1");
+  });
+
+  it("a closed topic takes no posts from a member, and says so", async () => {
+    const client = memory([seed("member", true)]);
+    render(wrap(client, <ChatThreadScreen conversationId="cohort" testID="t" />));
+    await waitFor(() => expect(screen.getByTestId("t-topics-week-2")).toBeTruthy());
+    fireEvent.click(screen.getByTestId("t-topics-week-2"));
+    await waitFor(() => expect(screen.getByTestId("t-composer-disabled").textContent).toBe("This topic is closed."));
+  });
+
+  it("lets an owner add a topic, which is then shown", async () => {
+    const client = memory([seed("owner")]);
+    render(wrap(client, <ChatThreadScreen conversationId="cohort" testID="t" />));
+    await waitFor(() => expect(screen.getByTestId("t-topics-menu")).toBeTruthy());
+    fireEvent.click(screen.getByTestId("t-topics-menu"));
+    fireEvent.click(await screen.findByTestId("t-topics-new"));
+    const name = await screen.findByTestId("t-topics-name");
+    fireEvent.change(name, { target: { value: "Week 3: Sleep" } });
+    fireEvent.click(screen.getByTestId("t-topics-save"));
+    await waitFor(() => expect(called(client, "setTopic")[0]?.args).toEqual(["cohort", "week-3-sleep", { title: "Week 3: Sleep", position: 2 }]));
+    await waitFor(() => expect(screen.getByTestId("t-topics-week-3-sleep").getAttribute("aria-selected")).toBe("true"));
+  });
+
+  it("lets an owner close the topic shown", async () => {
+    const client = memory([seed("owner")]);
+    render(wrap(client, <ChatThreadScreen conversationId="cohort" testID="t" />));
+    fireEvent.click(await screen.findByTestId("t-topics-week-1"));
+    fireEvent.click(screen.getByTestId("t-topics-menu"));
+    fireEvent.click(await screen.findByTestId("t-topics-close"));
+    await waitFor(() => expect(called(client, "setTopic")[0]?.args).toEqual(["cohort", "week-1", { closed: true }]));
+  });
+});
+
+describe("ChatThreadScreen topics across conversations", () => {
+  it("starts another conversation in All, not in the last one's topic", async () => {
+    const client = memory([
+      { id: "one", kind: "cohort", members: [{ userId: ME }, { userId: SAM }, { userId: LEE }], topics: [{ topic: "week-1", title: "Week 1" }], messages: [{ id: "a", senderId: SAM, body: "x", topic: "week-1" }] },
+      { id: "two", kind: "cohort", members: [{ userId: ME }, { userId: SAM }, { userId: LEE }], messages: [{ id: "b", senderId: SAM, body: "y" }] },
+    ]);
+    const view = render(wrap(client, <ChatThreadScreen conversationId="one" testID="t" />));
+    fireEvent.click(await screen.findByTestId("t-topics-week-1"));
+    await waitFor(() => expect(screen.getByTestId("t-topics-week-1").getAttribute("aria-selected")).toBe("true"));
+    view.rerender(wrap(client, <ChatThreadScreen conversationId="two" testID="t" />));
+    await screen.findByTestId("t-message-b");
+    const last = called(client, "messages").filter((c) => c.args[0] === "two").at(-1)!;
+    expect((last.args[1] as { topic?: string }).topic).toBeUndefined();
+  });
+});
+
+describe("ChatThreadScreen scheduled send", () => {
+  const direct: MemoryConversationSeed = { id: "dm", members: [{ userId: ME }, { userId: SAM }], messages: [{ id: "a", senderId: SAM, body: "hi" }] };
+
+  it("schedules what's written when Send is held, empties the field, and lists it with Cancel", async () => {
+    const client = memory([direct]);
+    render(wrap(client, <ChatThreadScreen conversationId="dm" testID="t" />));
+    const input = await screen.findByTestId("t-composer-input");
+    await waitFor(() => expect(input.hasAttribute("disabled")).toBe(false));
+    fireEvent.change(input, { target: { value: "see you tomorrow" } });
+    const send = screen.getByTestId("t-composer-send");
+    expect(send.getAttribute("data-a11y-actions")).toBe("longpress"); // VoiceOver's way to it
+    fireEvent.contextMenu(send);
+    fireEvent.click(await screen.findByTestId("t-schedule-pick-0"));
+    await waitFor(() => expect(called(client, "schedule")).toHaveLength(1));
+    expect(called(client, "schedule")[0]!.args[0]).toMatchObject({ conversationId: "dm", body: "see you tomorrow", topic: null });
+    await waitFor(() => expect((screen.getByTestId("t-composer-input") as HTMLInputElement).value).toBe(""));
+    expect(called(client, "send")).toHaveLength(0);
+
+    fireEvent.click(await screen.findByTestId("t-scheduled"));
+    expect(screen.getByTestId("t-scheduled").getAttribute("aria-label")).toBe("1 scheduled message");
+    const list = await screen.findByTestId("t-scheduled-sheet");
+    const cancel = within(list).getByText("Cancel");
+    fireEvent.click(cancel.closest("button")!);
+    await waitFor(() => expect(called(client, "cancelScheduled")).toHaveLength(1));
+    await waitFor(() => expect(screen.queryByTestId("t-scheduled")).toBeNull());
+  });
+
+  it("picks a custom time in the sheet, refusing one too soon", async () => {
+    const client = memory([direct]);
+    render(wrap(client, <ChatThreadScreen conversationId="dm" testID="t" />));
+    const input = await screen.findByTestId("t-composer-input");
+    await waitFor(() => expect(input.hasAttribute("disabled")).toBe(false));
+    fireEvent.change(input, { target: { value: "later" } });
+    fireEvent.contextMenu(screen.getByTestId("t-composer-send"));
+    fireEvent.click(await screen.findByTestId("t-schedule-pick-custom"));
+    expect(screen.getByTestId("t-schedule-custom")).toBeTruthy();
+    // An hour ahead by default: schedulable.
+    expect(screen.getByTestId("t-schedule-confirm").getAttribute("aria-disabled")).not.toBe("true");
+    fireEvent.click(screen.getByTestId("t-schedule-confirm"));
+    await waitFor(() => expect(called(client, "schedule")).toHaveLength(1));
+    const at = new Date((called(client, "schedule")[0]!.args[0] as { sendAt: Date }).sendAt);
+    expect(at.getTime()).toBeGreaterThan(Date.now() + 50 * 60_000);
+  });
+});
+
+describe("ChatScheduleSheet and ChatScheduledList", () => {
+  it("starts again at the quick picks each time it opens", async () => {
+    const client = memory([]);
+    const view = render(wrap(client, <ChatScheduleSheet open onOpenChange={vi.fn()} onSchedule={vi.fn()} testID="s" />));
+    fireEvent.click(await screen.findByTestId("s-pick-custom"));
+    expect(screen.getByTestId("s-custom")).toBeTruthy();
+    view.rerender(wrap(client, <ChatScheduleSheet open={false} onOpenChange={vi.fn()} onSchedule={vi.fn()} testID="s" />));
+    view.rerender(wrap(client, <ChatScheduleSheet open onOpenChange={vi.fn()} onSchedule={vi.fn()} testID="s" />));
+    expect(await screen.findByTestId("s-pick-0")).toBeTruthy();
+    expect(screen.queryByTestId("s-custom")).toBeNull();
+  });
+
+  it("offers Remove on one that couldn't be sent", async () => {
+    const client = memory([{ id: "dm", members: [{ userId: ME }, { userId: SAM }] }]);
+    await client.schedule({ conversationId: "dm", clientId: "c1", body: "later", sendAt: new Date(Date.now() + 3600_000) });
+    client.failNextSends(1);
+    await client.sendDue(new Date(Date.now() + 2 * 3600_000));
+    render(wrap(client, <ChatScheduledList conversationId="dm" testID="l" />));
+    const remove = await screen.findByText("Remove");
+    expect(screen.getByText("Couldn't send")).toBeTruthy();
+    fireEvent.click(remove.closest("button")!);
+    await waitFor(() => expect(called(client, "cancelScheduled")).toHaveLength(1));
+  });
+});
+
+describe("ChatThreadScreen availability and moderation", () => {
+  it("shows the other person's away line under the header", async () => {
+    const client = memory([{ id: "dm", members: [{ userId: ME }, { userId: SAM }] }], { availability: { [SAM]: { awayMessage: "On a retreat" } } });
+    render(wrap(client, <ChatThreadScreen conversationId="dm" testID="t" />));
+    await waitFor(() => expect(screen.getByTestId("t-away").getAttribute("aria-label")).toBe("Sam is away: On a retreat"));
+  });
+
+  it("shows nothing when they're around", async () => {
+    const client = memory([{ id: "dm", members: [{ userId: ME }, { userId: SAM }] }], { availability: { [SAM]: {} } });
+    render(wrap(client, <ChatThreadScreen conversationId="dm" testID="t" />));
+    await waitFor(() => expect(called(client, "availabilityFor")).toHaveLength(1));
+    expect(screen.queryByTestId("t-away")).toBeNull();
+  });
+
+  it("tells the sender a hidden message is theirs alone, and marks flagged ones for observers", async () => {
+    const client = memory([
+      { id: "dm", members: [{ userId: ME }, { userId: SAM }], messages: [{ id: "h", senderId: ME, body: "oops", moderation: "hidden" }, { id: "f", senderId: SAM, body: "hmm", moderation: "flagged" }] },
+    ]);
+    render(wrap(client, <ChatThreadScreen conversationId="dm" testID="t" />));
+    await waitFor(() => expect(screen.getByTestId("t-message-h-moderation").textContent).toBe("Hidden by moderation. Only you can see it."));
+    expect(screen.queryByTestId("t-message-f-moderation")).toBeNull();
+
+    cleanup();
+    const observed = memory([
+      { id: "g", members: [{ userId: SAM }, { userId: LEE }], myRole: "observer", messages: [{ id: "h", senderId: SAM, body: "oops", moderation: "hidden" }, { id: "f", senderId: LEE, body: "hmm", moderation: "flagged" }] },
+    ]);
+    render(wrap(observed, <ChatThreadScreen conversationId="g" testID="t" />));
+    await waitFor(() => expect(screen.getByTestId("t-message-h-moderation").textContent).toBe("Hidden by moderation"));
+    expect(screen.getByTestId("t-message-f-moderation").textContent).toBe("Flagged");
+    expect(screen.getByTestId("t-message-f-bubble").getAttribute("aria-label")).toContain("Flagged");
+  });
+});
+
+describe("ChatThreadScreen jumpTo", () => {
+  it("loads earlier pages until the message is held, then highlights it", async () => {
+    const messages = Array.from({ length: 120 }, (_, i) => ({ id: `m${i + 1}`, senderId: i % 2 ? SAM : ME, body: `message ${i + 1}` }));
+    const client = memory([{ id: "dm", members: [{ userId: ME }, { userId: SAM }], messages }]);
+    render(wrap(client, <ChatThreadScreen conversationId="dm" jumpTo={{ messageId: "m3", seq: 3 }} testID="t" />));
+    await waitFor(() => expect(screen.getByTestId("t-message-m3")).toBeTruthy());
+    expect(called(client, "messages").some((c) => (c.args[1] as { beforeSeq?: number }).beforeSeq !== undefined)).toBe(true);
+    await waitFor(() => expect(JSON.parse(screen.getByTestId("t-message-m3").dataset.style!).backgroundColor).toBeTruthy());
+    expect(JSON.parse(screen.getByTestId("t-message-m4").dataset.style!).backgroundColor).toBeUndefined();
+  });
+
+  it("says so when the message isn't there any more", async () => {
+    const client = memory([{ id: "dm", members: [{ userId: ME }, { userId: SAM }], messages: [{ id: "a", senderId: SAM, body: "hi" }] }]);
+    render(wrap(client, <ChatThreadScreen conversationId="dm" jumpTo={{ messageId: "gone" }} testID="t" />));
+    await waitFor(() => expect(screen.getByText("That message isn't here any more")).toBeTruthy());
+  });
+});
+
+describe("ChatSearchScreen", () => {
+  it("finds messages across conversations with the match highlighted and transcripts marked, and opens one", async () => {
+    const client = memory([
+      { id: "dm", members: [{ userId: ME }, { userId: SAM }], messages: [{ id: "a", senderId: SAM, body: "the habit tracker works" }] },
+      {
+        id: "dm2",
+        members: [{ userId: ME }, { userId: LEE }],
+        messages: [{ id: "v", senderId: LEE, body: "", attachments: [{ kind: "voice", transcript: "my habit this week" }] }],
+      },
+    ]);
+    const onOpen = vi.fn();
+    render(wrap(client, <ChatSearchScreen onOpen={onOpen} debounceMs={0} testID="s" />));
+    expect(screen.getByTestId("s-hint")).toBeTruthy();
+    fireEvent.change(screen.getByTestId("s-field-input"), { target: { value: "habit" } });
+    await waitFor(() => expect(screen.getByTestId("s-hit-a")).toBeTruthy());
+    const hit = screen.getByTestId("s-hit-a");
+    expect(hit.getAttribute("aria-label")).toMatch(/^Sam, in Sam, .*the habit tracker works$/);
+    expect(within(hit).getByText("habit")).toBeTruthy();
+    expect(screen.getByTestId("s-transcript-v")).toBeTruthy();
+    expect(screen.getByTestId("s-hit-v").getAttribute("aria-label")).toContain("Transcript");
+    fireEvent.click(hit);
+    expect(onOpen).toHaveBeenCalledWith(expect.objectContaining({ messageId: "a", conversationId: "dm", seq: 1 }));
+  });
+
+  it("searches one conversation, and says when nothing matches", async () => {
+    const client = memory([{ id: "dm", members: [{ userId: ME }, { userId: SAM }], messages: [{ id: "a", senderId: SAM, body: "hello" }] }]);
+    render(wrap(client, <ChatSearchScreen conversationId="dm" onOpen={vi.fn()} debounceMs={0} testID="s" />));
+    expect((screen.getByTestId("s-field-input") as HTMLInputElement).placeholder).toBe("Search this conversation");
+    fireEvent.change(screen.getByTestId("s-field-input"), { target: { value: "zebra" } });
+    await waitFor(() => expect(screen.getByTestId("s-empty")).toBeTruthy());
+    expect(called(client, "search").at(-1)!.args).toEqual(["zebra", "dm"]);
+  });
+});
+
+describe("ChatBroadcastSheet", () => {
+  it("sends one message into each conversation picked", async () => {
+    const client = memory([
+      { id: "dm1", members: [{ userId: ME }, { userId: SAM }] },
+      { id: "dm2", members: [{ userId: ME }, { userId: LEE }] },
+      { id: "dm3", members: [{ userId: ME }, { userId: "44444444-4444-4444-8444-444444444444" }], canPost: false },
+    ]);
+    const onSent = vi.fn();
+    const onOpenChange = vi.fn();
+    render(wrap(client, <ChatBroadcastSheet open onOpenChange={onOpenChange} kind="direct" onSent={onSent} testID="b" />));
+    await waitFor(() => expect(screen.getByTestId("b-row-dm1")).toBeTruthy());
+    expect(screen.getByTestId("b-send").getAttribute("aria-disabled")).toBe("true");
+    fireEvent.change(screen.getByTestId("b-text"), { target: { value: "Group call moved to 6" } });
+    fireEvent.click(screen.getByTestId("b-all"));
+    expect(screen.getByTestId("b-row-dm1").getAttribute("aria-checked")).toBe("true");
+    expect(screen.getByTestId("b-count").textContent).toBe("3 conversations");
+    fireEvent.click(screen.getByTestId("b-send"));
+    await waitFor(() => expect(onSent).toHaveBeenCalledWith(2, 3));
+    expect(called(client, "broadcast")[0]!.args.slice(0, 1)).toEqual([expect.arrayContaining(["dm1", "dm2", "dm3"])]);
+    expect(called(client, "broadcast")[0]!.args[2]).toBe("Group call moved to 6");
+    await waitFor(() => expect(screen.getByText("Sent to 2 of 3. You can't post in the others.")).toBeTruthy());
+    expect(onOpenChange).toHaveBeenCalledWith(false);
+  });
+
+  it("filters the list by name", async () => {
+    const client = memory([
+      { id: "dm1", members: [{ userId: ME }, { userId: SAM }] },
+      { id: "dm2", members: [{ userId: ME }, { userId: LEE }] },
+    ]);
+    render(wrap(client, <ChatBroadcastSheet open onOpenChange={vi.fn()} testID="b" />));
+    await waitFor(() => expect(screen.getByTestId("b-row-dm2")).toBeTruthy());
+    fireEvent.change(screen.getByTestId("b-filter-input"), { target: { value: "sa" } });
+    expect(screen.queryByTestId("b-row-dm2")).toBeNull();
+    fireEvent.click(screen.getByTestId("b-row-dm1"));
+    expect(screen.getByTestId("b-count").textContent).toBe("1 conversation");
+  });
+});
+
+describe("ChatAvailabilityScreen", () => {
+  it("loads what's saved, and saves an away message with working hours", async () => {
+    const client = memory([], { availability: { [ME]: { awayMessage: "Back soon", timeZone: "Europe/London" } } });
+    const onSaved = vi.fn();
+    render(wrap(client, <ChatAvailabilityScreen onSaved={onSaved} testID="a" />));
+    await waitFor(() => expect((screen.getByTestId("a-message") as HTMLTextAreaElement).value).toBe("Back soon"));
+    fireEvent.click(screen.getByTestId("a-hours-on"));
+    await waitFor(() => expect(screen.getByTestId("a-day-mon")).toBeTruthy());
+    // Mondays off.
+    fireEvent.click(within(screen.getByTestId("a-day-mon")).getByRole("switch"));
+    fireEvent.click(screen.getByTestId("a-save"));
+    await waitFor(() => expect(onSaved).toHaveBeenCalled());
+    const saved = called(client, "setAvailability")[0]!.args[0] as { awayMessage: string; timeZone: string; hours: Record<string, unknown> };
+    expect(saved.awayMessage).toBe("Back soon");
+    expect(saved.timeZone).toBe("Europe/London");
+    expect(Object.keys(saved.hours)).toEqual(["tue", "wed", "thu", "fri"]);
+  });
+
+  it("clears the away message with I'm back", async () => {
+    const client = memory([], { availability: { [ME]: { awayMessage: "Away", timeZone: "UTC" } } });
+    render(wrap(client, <ChatAvailabilityScreen testID="a" />));
+    await waitFor(() => expect(screen.getByTestId("a-back")).toBeTruthy());
+    act(() => {
+      fireEvent.click(screen.getByTestId("a-back"));
+    });
+    fireEvent.click(screen.getByTestId("a-save"));
+    await waitFor(() => expect(called(client, "setAvailability")[0]!.args[0]).toMatchObject({ awayMessage: null, awayUntil: null, hours: null }));
+  });
+});

package/src/native/__tests__/photo-viewer.test.tsx

@@ -0,0 +1,226 @@
+// @vitest-environment happy-dom
+// @feat:chat
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { act, cleanup, fireEvent, render, screen, waitFor } from "@testing-library/react";
+import type { ReactNode } from "react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { NativeToastProvider } from "@marktiderman/genesis-ui-native/components";
+import type { ChatClient } from "../../core/client";
+import type { ChatAttachment, ChatMessage } from "../../core/types";
+import { ChatProvider } from "../../react/index";
+import { ChatNativeProvider } from "../context";
+import type { ChatNativeModules } from "../modules";
+import { ChatMediaViewer, ChatPhotoViewer, DISMISS_DISTANCE, DOUBLE_TAP_MS, galleryFor, isLocalUri, panLimit, pinchScale, shouldDismiss } from "../photo-viewer";
+import { ChatThreadScreen } from "../thread-screen";
+
+vi.mock("react-native", async (original) => ({ ...(await original<object>()), useWindowDimensions: () => ({ width: 390, height: 844, scale: 3, fontScale: 1 }) }));
+
+afterEach(cleanup);
+
+const ME = "11111111-1111-4111-8111-111111111111";
+const SAM = "22222222-2222-4222-8222-222222222222";
+const CONV = "33333333-3333-4333-8333-333333333333";
+
+function image(id: string, name: string): ChatAttachment {
+  return {
+    id, messageId: "m1", position: 0, kind: "image", ref: {}, provider: "storage", path: `${CONV}/${SAM}/${name}`, providerId: null, playbackId: null,
+    url: null, status: "ready", name, mime: "image/jpeg", bytes: 10, width: 800, height: 600, durationMs: null, waveform: null, posterPath: null,
+    thumbhash: null, transcript: null, transcriptStatus: null,
+  };
+}
+
+function photoMessage(id: string, attachments: ChatAttachment[]): ChatMessage {
+  return {
+    id, conversationId: CONV, seq: 1, clientId: `c-${id}`, senderId: SAM, senderRole: "member", kind: "text", body: "",
+    mentions: [], replyToId: null, threadRootId: null, threadCount: 0, threadLastAt: null, topic: null, visibility: "everyone",
+    silent: false, meta: {}, createdAt: "2026-10-25T10:00:00Z", editedAt: null, deletedAt: null, attachments, reactions: [],
+  } as ChatMessage;
+}
+
+const signed = (path: string) => `https://storage.example.test/${path}`;
+
+describe("galleryFor", () => {
+  it("is the tapped photo's message's photos, opened at the one tapped", () => {
+    const m = photoMessage("m1", [image("a", "a.jpg"), image("b", "b.jpg"), image("c", "c.jpg")]);
+    const other = photoMessage("m2", [image("d", "d.jpg")]);
+    const urls = Object.fromEntries([...m.attachments, ...other.attachments].map((a) => [a.path!, signed(a.path!)]));
+    const g = galleryFor([other, m], urls, signed(`${CONV}/${SAM}/b.jpg`), "Photo", (a) => `Photo, ${a.name}`);
+    expect(g.photos.map((p) => p.alt)).toEqual(["Photo, a.jpg", "Photo, b.jpg", "Photo, c.jpg"]);
+    expect(g.index).toBe(1);
+  });
+
+  it("opens a photo in no message (still sending) alone", () => {
+    expect(galleryFor([], {}, "file:///tmp/x.jpg", "Photo", () => "")).toEqual({ photos: [{ key: "file:///tmp/x.jpg", uri: "file:///tmp/x.jpg", alt: "Photo" }], index: 0 });
+  });
+});
+
+describe("the viewer's gestures", () => {
+  it("close on a long enough pull down or a quick flick, not a nudge", () => {
+    expect(shouldDismiss(DISMISS_DISTANCE + 1, 0)).toBe(true);
+    expect(shouldDismiss(40, 2)).toBe(true);
+    expect(shouldDismiss(40, 0.2)).toBe(false);
+    expect(shouldDismiss(10, 3)).toBe(false);
+    expect(shouldDismiss(-200, 0)).toBe(false);
+  });
+
+  it("pinch between 0.8 and 4 times, and pan only as far as the zoomed photo reaches", () => {
+    expect(pinchScale(1, 100, 200)).toBe(2);
+    expect(pinchScale(2, 100, 1000)).toBe(4);
+    expect(pinchScale(1, 100, 10)).toBe(0.8);
+    expect(pinchScale(1.5, 0, 50)).toBe(1.5);
+    expect(panLimit(1, 390)).toBe(0);
+    expect(panLimit(2, 390)).toBe(195);
+  });
+
+  it("count two taps 330ms apart as a double tap: that's how far apart a quick one's onPress events land on iOS", () => {
+    expect(DOUBLE_TAP_MS).toBeGreaterThan(330);
+  });
+
+  it("know a file on the phone from a link", () => {
+    expect(isLocalUri("file:///a.jpg")).toBe(true);
+    expect(isLocalUri("https://x.test/a.jpg")).toBe(false);
+  });
+});
+
+function viewer(modules: ChatNativeModules, photos = [{ key: "a", uri: "https://x.test/a.jpg", alt: "Photo, a.jpg" }, { key: "b", uri: "https://x.test/b.jpg", alt: "Photo, b.jpg" }], onClose = vi.fn()) {
+  render(
+    <ChatNativeProvider modules={modules}>
+      <ChatPhotoViewer photos={photos} initialIndex={1} onClose={onClose} testID="v" />
+    </ChatNativeProvider>,
+  );
+  return onClose;
+}
+
+describe("ChatPhotoViewer", () => {
+  it("is full screen and dark, not a page sheet, and says which photo of how many", () => {
+    viewer({});
+    const modal = screen.getByTestId("v");
+    expect(modal.getAttribute("data-presentation-style")).toBe("overFullScreen");
+    expect(modal.getAttribute("data-presentation-style")).not.toBe("pageSheet");
+    expect(screen.getByTestId("v-counter").textContent).toBe("Photo 2 of 2");
+    const pager = screen.getByTestId("v-pager");
+    expect(pager.getAttribute("aria-label")).toBe("Photo, b.jpg");
+    expect(screen.getByTestId("v-photo-0")).toBeTruthy();
+    expect(screen.getByTestId("v-photo-1")).toBeTruthy();
+  });
+
+  it("closes from its Close button", () => {
+    const onClose = viewer({});
+    fireEvent.click(screen.getByTestId("v-close"));
+    expect(onClose).toHaveBeenCalled();
+  });
+
+  it("offers Share and Save only when the app passed expo-sharing and expo-media-library", () => {
+    viewer({});
+    expect(screen.queryByTestId("v-share")).toBeNull();
+    expect(screen.queryByTestId("v-save")).toBeNull();
+    cleanup();
+    // A link with no way to copy it to the phone can't be shared either.
+    viewer({ sharing: { isAvailableAsync: async () => true, shareAsync: vi.fn() } });
+    expect(screen.queryByTestId("v-share")).toBeNull();
+  });
+
+  it("shares the photo on screen, copied to the phone first", async () => {
+    const shareAsync = vi.fn(async () => undefined);
+    const downloadFile = vi.fn(async (url: string) => `file:///cache/${url.split("/").pop()}`);
+    viewer({ sharing: { isAvailableAsync: async () => true, shareAsync }, downloadFile });
+    await act(async () => fireEvent.click(screen.getByTestId("v-share")));
+    expect(downloadFile).toHaveBeenCalledWith("https://x.test/b.jpg");
+    expect(shareAsync).toHaveBeenCalledWith("file:///cache/b.jpg", { dialogTitle: "Share photo" });
+  });
+
+  it("saves to Photos after asking for add-only access, and says so", async () => {
+    const saveToLibraryAsync = vi.fn(async () => undefined);
+    const requestPermissionsAsync = vi.fn(async () => ({ granted: true }));
+    viewer({ mediaLibrary: { requestPermissionsAsync, saveToLibraryAsync }, downloadFile: async () => "file:///cache/b.jpg" });
+    await act(async () => fireEvent.click(screen.getByTestId("v-save")));
+    expect(requestPermissionsAsync).toHaveBeenCalledWith(true);
+    expect(saveToLibraryAsync).toHaveBeenCalledWith("file:///cache/b.jpg");
+    expect(screen.getByTestId("v-notice").textContent).toBe("Saved to Photos");
+  });
+
+  it("says how to allow saving when Photos access is refused, and saves nothing", async () => {
+    const saveToLibraryAsync = vi.fn(async () => undefined);
+    viewer({ mediaLibrary: { requestPermissionsAsync: async () => ({ granted: false }), saveToLibraryAsync }, downloadFile: async () => "file:///x.jpg" });
+    await act(async () => fireEvent.click(screen.getByTestId("v-save")));
+    expect(saveToLibraryAsync).not.toHaveBeenCalled();
+    expect(screen.getByTestId("v-notice").textContent).toMatch(/Settings/);
+  });
+
+  it("ChatMediaViewer, for one picture, is the same full-screen viewer", () => {
+    render(
+      <ChatNativeProvider>
+        <ChatMediaViewer image={{ uri: "https://x.test/a.jpg", alt: "Photo" }} onClose={vi.fn()} testID="one" />
+      </ChatNativeProvider>,
+    );
+    expect(screen.getByTestId("one").getAttribute("data-presentation-style")).toBe("overFullScreen");
+    expect(screen.queryByTestId("one-counter")).toBeNull();
+  });
+});
+
+function fakeClient(messages: ChatMessage[], access: { myRole: () => Promise<string | null> }): ChatClient {
+  const sub = { unsubscribe: vi.fn(), typing: vi.fn(), recording: vi.fn(), send: vi.fn() };
+  return {
+    conversation: vi.fn(async () => ({ id: CONV, kind: "direct", title: null, settings: {}, status: "open", archivedAt: null })),
+    members: vi.fn(async () => [
+      { conversationId: CONV, userId: ME, role: "member", lastReadSeq: 1, joinedAt: "2026-10-01T00:00:00Z" },
+      { conversationId: CONV, userId: SAM, role: "member", lastReadSeq: 1, joinedAt: "2026-10-01T00:00:00Z" },
+    ]),
+    kind: vi.fn(async () => ({ kind: "direct", label: "Direct", maxMembers: 2 })),
+    myRole: vi.fn(access.myRole),
+    canPost: vi.fn(async () => true),
+    messages: vi.fn(async () => ({ messages, hasEarlier: false })),
+    message: vi.fn(async () => null),
+    subscribeConversation: vi.fn(() => sub),
+    subscribeInbox: vi.fn(() => ({ unsubscribe: vi.fn() })),
+    markRead: vi.fn(async () => 0),
+    pins: vi.fn(async () => []),
+    fileUrls: vi.fn(async (paths: string[]) => Object.fromEntries(paths.map((p) => [p, signed(p)]))),
+  } as unknown as ChatClient;
+}
+
+function wrap(client: ChatClient, children: ReactNode) {
+  const qc = new QueryClient({ defaultOptions: { queries: { retry: false } } });
+  return (
+    <QueryClientProvider client={qc}>
+      <ChatProvider client={client} userId={ME}>
+        <NativeToastProvider>
+          <ChatNativeProvider>{children}</ChatNativeProvider>
+        </NativeToastProvider>
+      </ChatProvider>
+    </QueryClientProvider>
+  );
+}
+
+describe("ChatThreadScreen", () => {
+  it("opens a tapped photo in the full-screen viewer with the rest of its message's photos", async () => {
+    const m = photoMessage("m1", [image("a", "a.jpg"), image("b", "b.jpg"), image("c", "c.jpg")]);
+    render(wrap(fakeClient([m], { myRole: async () => "member" }), <ChatThreadScreen conversationId={CONV} testID="t" />));
+    const second = await screen.findByLabelText("Photo, b.jpg");
+    await waitFor(() => expect(second.getAttribute("aria-disabled")).not.toBe("true"));
+    fireEvent.click(second);
+    const modal = await screen.findByTestId("t-viewer");
+    expect(modal.getAttribute("data-presentation-style")).toBe("overFullScreen");
+    expect(screen.getByTestId("t-viewer-counter").textContent).toBe("Photo 2 of 3");
+    fireEvent.click(screen.getByTestId("t-viewer-close"));
+    await waitFor(() => expect(screen.queryByTestId("t-viewer")).toBeNull());
+  });
+
+  it("offers Retry in the composer's place when your role couldn't be read, and recovers", async () => {
+    let fail = true;
+    const client = fakeClient([], {
+      myRole: async () => {
+        if (fail) throw new Error("offline");
+        return "member";
+      },
+    });
+    render(wrap(client, <ChatThreadScreen conversationId={CONV} testID="t" />));
+    const retry = await screen.findByTestId("t-access-error-retry");
+    expect(screen.getByTestId("t-access-error-alert").textContent).toMatch(/couldn't be loaded/);
+    expect(screen.queryByTestId("t-composer-disabled")).toBeNull();
+    fail = false;
+    await act(async () => fireEvent.click(retry));
+    await screen.findByTestId("t-composer-input");
+    expect(screen.queryByTestId("t-access-error")).toBeNull();
+  });
+});

package/src/native/__tests__/push-payload.test.ts

@@ -0,0 +1,66 @@
+// @feat:chat
+import { describe, expect, it } from "vitest";
+import { chatPushPayload, conversationIdFromData } from "../push";
+
+const CONV = "6F1D2C3B-4A59-4E8F-9A7B-1C2D3E4F5A6B";
+const conv = CONV.toLowerCase();
+const sender = { id: "user-1", name: "Ana Lima", avatarUrl: "https://cdn.example.com/a.jpg" };
+
+describe("chatPushPayload", () => {
+  it("is a messages push the service extension runs on, with the sender, group and photo", () => {
+    const p = chatPushPayload({ conversationId: CONV, messageId: "m1", seq: 7, sender, groupName: "Cohort 3", imageUrl: "https://cdn.example.com/p.png" });
+    expect(p).toEqual({
+      categoryId: "messages",
+      threadId: conv,
+      mutableContent: true,
+      data: {
+        url: `/messages/${conv}`,
+        conversationId: conv,
+        messageId: "m1",
+        seq: 7,
+        senderId: "user-1",
+        senderName: "Ana Lima",
+        senderAvatar: "https://cdn.example.com/a.jpg",
+        groupName: "Cohort 3",
+        image: "https://cdn.example.com/p.png",
+      },
+    });
+    // The tap still routes to the thread.
+    expect(conversationIdFromData(p.data)).toBe(conv);
+  });
+
+  it("a direct conversation has no group name", () => {
+    const p = chatPushPayload({ conversationId: CONV, messageId: "m1", sender });
+    expect(p.data).not.toHaveProperty("groupName");
+    expect(p.data).not.toHaveProperty("seq");
+  });
+
+  it("hidden previews carry the link and ids only, and the extension doesn't run", () => {
+    const p = chatPushPayload({ conversationId: CONV, messageId: "m1", seq: 2, sender, groupName: "Cohort 3", imageUrl: "https://cdn.example.com/p.png", hidePreviews: true });
+    expect(p).toEqual({ categoryId: "messages", threadId: conv, mutableContent: false, data: { url: `/messages/${conv}`, conversationId: conv, messageId: "m1", seq: 2 } });
+  });
+
+  it.each(["http://cdn.example.com/a.jpg", "file:///etc/passwd", "https://user:pw@cdn.example.com/a.jpg", "not a url", `https://cdn.example.com/${"a".repeat(1010)}`])(
+    "leaves out an image that isn't a plain https URL: %s",
+    (url) => {
+      const p = chatPushPayload({ conversationId: CONV, messageId: "m1", sender: { ...sender, avatarUrl: url }, imageUrl: url });
+      expect(p.data).not.toHaveProperty("senderAvatar");
+      expect(p.data).not.toHaveProperty("image");
+      expect(p.data.senderName).toBe("Ana Lima");
+    },
+  );
+
+  it("leaves the sender out without both an id and a name", () => {
+    expect(chatPushPayload({ conversationId: CONV, messageId: "m1", sender: { id: "u", name: "  " } }).data).not.toHaveProperty("senderId");
+    expect(chatPushPayload({ conversationId: CONV, messageId: "m1", sender: { id: "", name: "Ana" } }).data).not.toHaveProperty("senderName");
+  });
+
+  it("data is flat strings and numbers (what genesis-notifications' PushMessage.data takes)", () => {
+    const p = chatPushPayload({ conversationId: CONV, messageId: "m1", seq: 1, sender, groupName: "G", imageUrl: "https://x.example/i.jpg" });
+    expect(Object.values(p.data).every((v) => typeof v === "string" || typeof v === "number")).toBe(true);
+  });
+
+  it("refuses a conversation id that isn't a uuid", () => {
+    expect(() => chatPushPayload({ conversationId: "../etc", messageId: "m1" })).toThrow(/uuid/);
+  });
+});