@marktiderman/genesis-chat 0.1.0 → 0.2.0

package/src/native/__tests__/composer-mic-lock.test.tsx

@@ -0,0 +1,115 @@
+// @vitest-environment happy-dom
+// @feat:chat
+/**
+ * Slide up to lock, then tap Send. The mic stays one view through the lock: swapping in a new
+ * button while the finger that locked was still down left that touch's responder unmounted on
+ * iOS, and the next tap anywhere did nothing (seen in the simulator: the first Send tap after
+ * locking was lost).
+ */
+import { act, cleanup, render, screen } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { ChatComposer } from "../composer";
+import { ChatNativeProvider } from "../context";
+import type { ChatNativeModules, ExpoAudioLike, RecorderStateLike } from "../modules";
+import { useChatComposer } from "../use-composer";
+
+type Handlers = {
+  onPanResponderGrant: () => void;
+  onPanResponderMove: (e: unknown, g: { dx: number; dy: number }) => void;
+  onPanResponderRelease: () => void;
+};
+// The shared React Native shim's PanResponder does nothing: this one keeps what the mic gave it.
+const pan = vi.hoisted(() => ({ created: [] as Handlers[] }));
+vi.mock("react-native", async (original) => ({
+  ...(await original<object>()),
+  AppState: { addEventListener: () => ({ remove: () => undefined }) },
+  PanResponder: {
+    create: (config: Handlers) => {
+      pan.created.push(config);
+      return { panHandlers: {} };
+    },
+  },
+}));
+
+function fakeAudio() {
+  const status: RecorderStateLike = { isRecording: false, durationMillis: 0, metering: -30, url: null };
+  const recorder = {
+    uri: null as string | null,
+    prepareToRecordAsync: vi.fn(async () => undefined),
+    record: vi.fn(() => {
+      status.isRecording = true;
+    }),
+    stop: vi.fn(async () => {
+      status.isRecording = false;
+      recorder.uri = "file:///rec/voice.m4a";
+    }),
+    getStatus: vi.fn(() => ({ ...status })),
+  };
+  const audio = {
+    useAudioRecorder: vi.fn(() => recorder),
+    useAudioPlayer: vi.fn(),
+    useAudioPlayerStatus: vi.fn(),
+    RecordingPresets: { HIGH_QUALITY: { extension: ".m4a" } },
+    requestRecordingPermissionsAsync: vi.fn(async () => ({ granted: true })),
+    setAudioModeAsync: vi.fn(async () => undefined),
+  } as unknown as ExpoAudioLike;
+  return { audio, recorder, status };
+}
+
+function Harness({ onSend }: { onSend: (s: unknown) => void }) {
+  const composer = useChatComposer("c1", null, "u1");
+  return <ChatComposer composer={composer} canPost disabledReason={null} role="member" onSend={onSend} testID="cmp" />;
+}
+
+describe("ChatComposer mic: slide up to lock, then tap Send", () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+    pan.created.length = 0;
+  });
+  afterEach(() => {
+    cleanup();
+    vi.useRealTimers();
+  });
+
+  it("keeps the same view when it locks, and the first tap on Send sends", async () => {
+    const { audio, recorder, status } = fakeAudio();
+    const onSend = vi.fn();
+    render(
+      <ChatNativeProvider modules={{ audio } as unknown as ChatNativeModules}>
+        <Harness onSend={onSend} />
+      </ChatNativeProvider>,
+    );
+    const mic = screen.getByTestId("cmp-mic");
+    const handlers = pan.created.at(-1)!;
+
+    // Hold, start recording, slide up past the lock, let go.
+    await act(async () => {
+      handlers.onPanResponderGrant();
+      await vi.advanceTimersByTimeAsync(0);
+    });
+    status.durationMillis = 2000;
+    await act(async () => void (await vi.advanceTimersByTimeAsync(200)));
+    act(() => handlers.onPanResponderMove({}, { dx: 0, dy: -100 }));
+    const send = screen.getByTestId("cmp-voice-send");
+    expect(send).toBe(mic);
+    expect(send.getAttribute("aria-label")).toBe("Send voice message");
+    await act(async () => {
+      handlers.onPanResponderRelease();
+      await vi.advanceTimersByTimeAsync(0);
+    });
+    // Letting go of the finger that locked doesn't send: recording goes on hands-free.
+    expect(recorder.stop).not.toHaveBeenCalled();
+    expect(screen.getByTestId("cmp-voice-send")).toBe(mic);
+
+    // One tap on Send.
+    await act(async () => {
+      handlers.onPanResponderGrant();
+      handlers.onPanResponderRelease();
+      await vi.advanceTimersByTimeAsync(0);
+    });
+    expect(recorder.stop).toHaveBeenCalledTimes(1);
+    await act(async () => void (await vi.advanceTimersByTimeAsync(50)));
+    expect(onSend).toHaveBeenCalledTimes(1);
+    expect(screen.getByTestId("cmp-mic")).toBe(mic);
+  });
+});

package/src/native/__tests__/composer-state.test.ts

@@ -0,0 +1,188 @@
+// @feat:chat
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { CHAT_LIMITS } from "../../core/media";
+import {
+  base64ToBytes,
+  canSend,
+  composerDisabledReason,
+  composerReducer,
+  createDraftSaver,
+  draftKey,
+  clearDrafts,
+  emptyComposer,
+  fileFromDataUri,
+  filesFromAssets,
+  loadDraft,
+  memoryDraftStorage,
+  toSend,
+  type ComposerAttachment,
+} from "../composer-state";
+import { chatNativeCopy as copy } from "../copy";
+
+const file = (key: string): ComposerAttachment => ({ key, file: { data: `file:///${key}.jpg`, name: `${key}.jpg`, contentType: "image/jpeg" } });
+
+describe("composerReducer", () => {
+  it("types, attaches, removes, replies and empties on send", () => {
+    let s = composerReducer(emptyComposer, { type: "text", text: "hi " });
+    s = composerReducer(s, { type: "add", attachments: [file("a"), file("b")] });
+    s = composerReducer(s, { type: "remove", key: "a" });
+    s = composerReducer(s, { type: "reply", to: { messageId: "m1", name: "Sam", preview: "yo" } });
+    expect(s.attachments.map((a) => a.key)).toEqual(["b"]);
+    expect(s.replyTo?.messageId).toBe("m1");
+    expect(composerReducer(s, { type: "sent" })).toEqual(emptyComposer);
+  });
+
+  it("keeps at most the per-message limit of files, and says so", () => {
+    const many = Array.from({ length: CHAT_LIMITS.attachmentsPerMessage + 3 }, (_, i) => file(`f${i}`));
+    const s = composerReducer(emptyComposer, { type: "add", attachments: many, tooMany: "Too many" });
+    expect(s.attachments).toHaveLength(CHAT_LIMITS.attachmentsPerMessage);
+    expect(s.notice).toBe("Too many");
+  });
+
+  it("caps the text at the body limit", () => {
+    const s = composerReducer(emptyComposer, { type: "text", text: "x".repeat(CHAT_LIMITS.bodyChars + 10) });
+    expect(s.text).toHaveLength(CHAT_LIMITS.bodyChars);
+  });
+
+  it("restores a draft only into an empty composer", () => {
+    const draft = { text: "draft", replyTo: { messageId: "m", name: "Lee", preview: "p" } };
+    expect(composerReducer(emptyComposer, { type: "restore", draft }).text).toBe("draft");
+    const typing = composerReducer(emptyComposer, { type: "text", text: "new" });
+    expect(composerReducer(typing, { type: "restore", draft }).text).toBe("new");
+  });
+});
+
+describe("canSend and the disabled reason", () => {
+  it("needs text that isn't blank, or a file, and permission", () => {
+    expect(canSend({ ...emptyComposer, text: "   " }, true)).toBe(false);
+    expect(canSend({ ...emptyComposer, text: "a" }, true)).toBe(true);
+    expect(canSend({ ...emptyComposer, attachments: [file("a")] }, true)).toBe(true);
+    expect(canSend({ ...emptyComposer, text: "a" }, false)).toBe(false);
+  });
+
+  it("explains why: closed, admins only, or not allowed; nothing while loading or allowed", () => {
+    const conv = { settings: {}, status: null, archivedAt: null };
+    expect(composerDisabledReason(null, conv, null, copy)).toBeNull();
+    expect(composerDisabledReason(true, conv, "member", copy)).toBeNull();
+    expect(composerDisabledReason(false, { ...conv, status: "closed" as const }, "member", copy)).toBe(copy.cantPostClosed);
+    expect(composerDisabledReason(false, { ...conv, settings: { who_posts: "admins" as const } }, "member", copy)).toBe(copy.cantPostAdmins);
+    expect(composerDisabledReason(false, conv, "observer", copy)).toBe(copy.cantPost);
+  });
+});
+
+describe("toSend", () => {
+  it("trims the body, carries the reply and the mentions, and the files", () => {
+    const id = "0b5f3c3e-7f53-4a5e-9f43-6a8d2c1e9b10";
+    const s = { ...emptyComposer, text: `  hi @[Sam](user:${id}) `, attachments: [file("a")], replyTo: { messageId: "m1", name: "Sam", preview: "" } };
+    const { input, files } = toSend(s);
+    expect(input).toEqual({ body: `hi @[Sam](user:${id})`, replyToId: "m1", mentions: [id] });
+    expect(files).toHaveLength(1);
+  });
+});
+
+describe("filesFromAssets", () => {
+  it("makes photos and videos into files with their size and kind", () => {
+    const { attachments, notice } = filesFromAssets(
+      [
+        { uri: "file:///p/IMG_1.HEIC", fileName: "IMG_1.HEIC", mimeType: "image/heic", width: 4032, height: 3024, fileSize: 2_000_000, type: "image" },
+        { uri: "file:///p/v.mov", fileName: "v.mov", mimeType: "video/quicktime", duration: 4200, type: "video" },
+      ],
+      copy,
+    );
+    expect(notice).toBeNull();
+    expect(attachments[0]!.file).toMatchObject({ data: "file:///p/IMG_1.HEIC", contentType: "image/heic", meta: { kind: "image", width: 4032, height: 3024, bytes: 2_000_000 } });
+    expect(attachments[1]!.file.meta).toMatchObject({ kind: "video", durationMs: 4200 });
+  });
+
+  it("refuses a type the bucket won't take, and a file over the limit", () => {
+    const { attachments, notice } = filesFromAssets([{ uri: "file:///x.svg", fileName: "x.svg", mimeType: "image/svg+xml" }], copy);
+    expect(attachments).toHaveLength(0);
+    expect(notice).toBe("x.svg can't be sent.");
+    const big = filesFromAssets([{ uri: "file:///b.jpg", fileName: "b.jpg", mimeType: "image/jpeg", fileSize: CHAT_LIMITS.fileBytes + 1 }], copy);
+    expect(big.notice).toBe("b.jpg is too large to send.");
+  });
+});
+
+describe("pasting a picture", () => {
+  it("decodes a data URI into bytes", () => {
+    expect([...base64ToBytes("aGk=")]).toEqual([104, 105]);
+    expect([...base64ToBytes("aGVsbG8=")]).toEqual([...new TextEncoder().encode("hello")]);
+    const a = fileFromDataUri("data:image/png;base64,aGVsbG8=", { width: 2, height: 3 })!;
+    expect(a.file).toMatchObject({ name: "pasted.png", contentType: "image/png", meta: { kind: "image", width: 2, height: 3, bytes: 5 } });
+    expect(a.file.data).toBeInstanceOf(ArrayBuffer);
+  });
+
+  it("ignores what isn't a picture", () => {
+    expect(fileFromDataUri("data:text/html;base64,PGI+")).toBeNull();
+    expect(fileFromDataUri("nope")).toBeNull();
+  });
+});
+
+describe("drafts", () => {
+  afterEach(() => vi.useRealTimers());
+
+  it("has one key per person, conversation and thread", () => {
+    expect(draftKey("u1", "c1")).toBe("genesis-chat:drafts:u1:c1");
+    expect(draftKey("u1", "c1", "r1")).toBe("genesis-chat:drafts:u1:c1:r1");
+    expect(draftKey("u2", "c1")).not.toBe(draftKey("u1", "c1"));
+  });
+
+  it("clears one person's drafts on sign-out and leaves everything else", async () => {
+    const storage = memoryDraftStorage();
+    await storage.setItem(draftKey("u1", "c1"), "{}");
+    await storage.setItem(draftKey("u1", "c2", "r1"), "{}");
+    await storage.setItem(draftKey("u10", "c1"), "{}");
+    await storage.setItem("other-app-key", "x");
+    // Saved before drafts were per person: no one's, so it goes too.
+    await storage.setItem("genesis-chat:draft:c9", "{}");
+    expect(await clearDrafts(storage, "u1")).toBe(3);
+    expect(await storage.getItem("genesis-chat:draft:c9")).toBeNull();
+    expect(await storage.getItem(draftKey("u1", "c1"))).toBeNull();
+    expect(await storage.getItem(draftKey("u1", "c2", "r1"))).toBeNull();
+    expect(await storage.getItem(draftKey("u10", "c1"))).toBe("{}");
+    expect(await storage.getItem("other-app-key")).toBe("x");
+  });
+
+  it("on sign-in clears everyone's drafts but the person's own (a session that ended while the app was closed)", async () => {
+    const storage = memoryDraftStorage();
+    await storage.setItem(draftKey("u1", "c1"), "{}");
+    await storage.setItem(draftKey("u2", "c1"), "{}");
+    await storage.setItem("genesis-chat:draft:c9", "{}");
+    await storage.setItem("other-app-key", "x");
+    expect(await clearDrafts(storage, { except: "u2" })).toBe(2);
+    expect(await storage.getItem(draftKey("u2", "c1"))).toBe("{}");
+    expect(await storage.getItem("other-app-key")).toBe("x");
+  });
+
+  it("says so, and clears nothing, when the storage can't list its keys", async () => {
+    const onError = vi.fn();
+    const { getAllKeys: _, ...noList } = memoryDraftStorage();
+    expect(await clearDrafts(noList, "u1", onError)).toBe(0);
+    expect(onError).toHaveBeenCalledWith(expect.any(Error));
+  });
+
+  it("saves after typing stops, flushes at once, removes when empty", async () => {
+    vi.useFakeTimers();
+    const storage = memoryDraftStorage();
+    const saver = createDraftSaver(storage, "k", 400);
+    saver.save({ text: "h" });
+    saver.save({ text: "hello" });
+    expect(await storage.getItem("k")).toBeNull();
+    await vi.advanceTimersByTimeAsync(400);
+    expect(await loadDraft(storage, "k")).toEqual({ text: "hello" });
+    saver.save({ text: "  " });
+    saver.flush();
+    await Promise.resolve();
+    expect(await storage.getItem("k")).toBeNull();
+    saver.save({ text: "again" });
+    saver.clear();
+    await vi.advanceTimersByTimeAsync(1000);
+    expect(await storage.getItem("k")).toBeNull();
+  });
+
+  it("reads a broken draft as none", async () => {
+    const storage = memoryDraftStorage();
+    await storage.setItem("k", "{oops");
+    expect(await loadDraft(storage, "k")).toBeNull();
+  });
+});

package/src/native/__tests__/composer.test.tsx

@@ -0,0 +1,133 @@
+// @vitest-environment happy-dom
+// @feat:chat
+import { act, cleanup, fireEvent, render, renderHook, screen, waitFor } from "@testing-library/react";
+import type { ReactNode } from "react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { ChatComposer } from "../composer";
+import { ChatNativeProvider } from "../context";
+import type { ChatNativeModules } from "../modules";
+import { useChatComposer } from "../use-composer";
+import { memoryDraftStorage, draftKey } from "../composer-state";
+
+afterEach(cleanup);
+
+function Harness({ canPost = true, onSend = vi.fn(), reason = null as string | null }) {
+  const composer = useChatComposer("c1", null, "u1");
+  return <ChatComposer composer={composer} canPost={canPost} disabledReason={reason} role="member" onSend={onSend} testID="cmp" />;
+}
+
+describe("ChatComposer", () => {
+  it("says why when the person can't post, instead of taking input", () => {
+    render(
+      <ChatNativeProvider>
+        <Harness canPost={false} reason="Only admins can post here." />
+      </ChatNativeProvider>,
+    );
+    expect(screen.getByTestId("cmp-disabled").textContent).toBe("Only admins can post here.");
+    expect(screen.queryByTestId("cmp-input")).toBeNull();
+  });
+
+  it("sends what was typed, with a haptic, and empties", async () => {
+    const onSend = vi.fn();
+    const haptics = { impactAsync: vi.fn(async () => undefined), selectionAsync: vi.fn(), notificationAsync: vi.fn(), ImpactFeedbackStyle: { Light: "l", Medium: "m" }, NotificationFeedbackType: { Success: 1, Warning: 2, Error: 3 } };
+    render(
+      <ChatNativeProvider modules={{ haptics } as unknown as ChatNativeModules}>
+        <Harness onSend={onSend} />
+      </ChatNativeProvider>,
+    );
+    expect(screen.getByTestId("cmp-send").getAttribute("aria-disabled")).toBe("true");
+    fireEvent.change(screen.getByTestId("cmp-input"), { target: { value: "hello" } });
+    // Two quick taps send once.
+    fireEvent.click(screen.getByTestId("cmp-send"));
+    fireEvent.click(screen.getByTestId("cmp-send"));
+    expect(onSend).toHaveBeenCalledTimes(1);
+    expect(onSend).toHaveBeenCalledWith({ input: { body: "hello", replyToId: null, mentions: [] }, files: [] });
+    expect(haptics.impactAsync).toHaveBeenCalledWith("l");
+    await waitFor(() => expect((screen.getByTestId("cmp-input") as HTMLInputElement).value).toBe(""));
+  });
+
+  it("restores the thread's draft", async () => {
+    const drafts = memoryDraftStorage();
+    await drafts.setItem(draftKey("u1", "c1"), JSON.stringify({ text: "half written" }));
+    render(
+      <ChatNativeProvider modules={{ drafts }}>
+        <Harness />
+      </ChatNativeProvider>,
+    );
+    await waitFor(() => expect((screen.getByTestId("cmp-input") as HTMLInputElement).value).toBe("half written"));
+  });
+
+  it("attaches photos from the library as thumbnails (straight to the picker when it is the only source)", async () => {
+    const imagePicker = {
+      launchImageLibraryAsync: vi.fn(async () => ({ canceled: false, assets: [{ uri: "file:///a.jpg", fileName: "a.jpg", mimeType: "image/jpeg", width: 10, height: 10 }] })),
+    };
+    const onSend = vi.fn();
+    render(
+      <ChatNativeProvider modules={{ imagePicker }}>
+        <Harness onSend={onSend} />
+      </ChatNativeProvider>,
+    );
+    // The library is the only source: the picker opens with no sheet in between.
+    fireEvent.click(screen.getByTestId("cmp-attach"));
+    await waitFor(() => expect(screen.getByTestId("cmp-attachments")).toBeTruthy());
+    expect(imagePicker.launchImageLibraryAsync).toHaveBeenCalledWith(expect.objectContaining({ mediaTypes: ["images", "videos"], allowsMultipleSelection: true }));
+    fireEvent.click(screen.getByTestId("cmp-send"));
+    expect(onSend.mock.calls[0]![0].files[0]).toMatchObject({ data: "file:///a.jpg", contentType: "image/jpeg" });
+  });
+
+  it("shows the mic (with its VoiceOver hint) only when expo-audio is given", () => {
+    const audio = {
+      useAudioRecorder: () => ({ prepareToRecordAsync: vi.fn(), record: vi.fn(), stop: vi.fn(), getStatus: vi.fn(), uri: null }),
+      useAudioPlayer: vi.fn(),
+      useAudioPlayerStatus: vi.fn(),
+      RecordingPresets: { HIGH_QUALITY: {} },
+      requestRecordingPermissionsAsync: vi.fn(),
+      setAudioModeAsync: vi.fn(),
+    };
+    const { unmount } = render(
+      <ChatNativeProvider>
+        <Harness />
+      </ChatNativeProvider>,
+    );
+    expect(screen.queryByTestId("cmp-mic")).toBeNull();
+    unmount();
+    render(
+      <ChatNativeProvider modules={{ audio } as unknown as ChatNativeModules}>
+        <Harness />
+      </ChatNativeProvider>,
+    );
+    expect(screen.getByTestId("cmp-mic").getAttribute("aria-label")).toBe("Record a voice message");
+  });
+});
+
+describe("useChatComposer across conversations", () => {
+  const wrapper = (drafts: ReturnType<typeof memoryDraftStorage>) =>
+    function Wrapper({ children }: { children: ReactNode }) {
+      return <ChatNativeProvider modules={{ drafts }}>{children}</ChatNativeProvider>;
+    };
+
+  it("starts the next conversation empty, keeps the first one's draft, and restores the next one's", async () => {
+    const drafts = memoryDraftStorage();
+    await drafts.setItem(draftKey("u1", "c2"), JSON.stringify({ text: "for c2" }));
+    const hook = renderHook(({ id }) => useChatComposer(id, null, "u1"), { initialProps: { id: "c1" }, wrapper: wrapper(drafts) });
+    await act(async () => undefined);
+    act(() => hook.result.current.dispatch({ type: "text", text: "for c1" }));
+    act(() => hook.result.current.setReply({ messageId: "m1", name: "Sam", preview: "hi" }));
+    hook.rerender({ id: "c2" });
+    // Never c1's text or reply in c2, not even for one render.
+    expect(hook.result.current.state.text).not.toBe("for c1");
+    expect(hook.result.current.state.replyTo).toBeNull();
+    await waitFor(() => expect(hook.result.current.state.text).toBe("for c2"));
+    expect(JSON.parse((await drafts.getItem(draftKey("u1", "c1")))!)).toMatchObject({ text: "for c1", replyTo: { messageId: "m1" } });
+    // c1's text was never saved under c2.
+    expect(JSON.parse((await drafts.getItem(draftKey("u1", "c2")))!)).toEqual({ text: "for c2" });
+  });
+
+  it("keeps each signed-in person's drafts apart", async () => {
+    const drafts = memoryDraftStorage();
+    await drafts.setItem(draftKey("u1", "c1"), JSON.stringify({ text: "u1's words" }));
+    const hook = renderHook(() => useChatComposer("c1", null, "u2"), { wrapper: wrapper(drafts) });
+    await act(async () => undefined);
+    expect(hook.result.current.state.text).toBe("");
+  });
+});

package/src/native/__tests__/emoji.test.tsx

@@ -0,0 +1,238 @@
+// @vitest-environment happy-dom
+// @feat:chat
+/// <reference types="vite/client" />
+import pickerSource from "../emoji-picker.tsx?raw";
+import dataSource from "../emoji-data.ts?raw";
+import emojiSource from "../emoji.ts?raw";
+import { act, cleanup, fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import type { ChatMessage } from "../../core/types";
+import { ChatComposer } from "../composer";
+import { clearDrafts, memoryDraftStorage } from "../composer-state";
+import { ChatNativeProvider } from "../context";
+import { ChatEmojiPicker } from "../emoji-picker";
+import { EMOJI_CATEGORIES, emojiEntry, emojiInCategory, insertAtSelection, loadRecentEmoji, pushRecentEmoji, recentEmojiKey, RECENT_EMOJI_MAX, saveRecentEmoji, searchEmoji } from "../emoji";
+import { QUICK_REACTIONS } from "../actions";
+import { MessageActionsSheet } from "../message-actions-sheet";
+import { useChatComposer } from "../use-composer";
+
+// The grids' FlatList props, as the picker gave them.
+const lists = vi.hoisted(() => [] as Record<string, unknown>[]);
+vi.mock("react-native", async (original) => {
+  const rn = await original<Record<string, unknown> & { FlatList: (p: Record<string, unknown>) => unknown }>();
+  return {
+    ...rn,
+    useWindowDimensions: () => ({ width: 390, height: 844, scale: 3, fontScale: 1 }),
+    FlatList: (props: Record<string, unknown>) => {
+      lists.push(props);
+      return rn.FlatList(props);
+    },
+  };
+});
+
+afterEach(cleanup);
+
+describe("the bundled emoji", () => {
+  it("ship in the app: nothing in the picker or its data fetches or names a URL", () => {
+    for (const src of [pickerSource, emojiSource, dataSource.split("\n").slice(9).join("\n")]) {
+      expect(src).not.toMatch(/https?:\/\//);
+      expect(src).not.toMatch(/\bfetch\(|emojibaseUrl|jsdelivr|frimousse/);
+    }
+  });
+
+  it("are every category's base emoji, kept modest", () => {
+    const all = EMOJI_CATEGORIES.flatMap((c) => emojiInCategory(c.id));
+    expect(all.length).toBeGreaterThan(1500);
+    expect(all.length).toBeLessThan(2200);
+    expect(dataSource.length).toBeLessThan(100_000);
+    expect(new Set(all.map((e) => e.emoji)).size).toBe(all.length);
+    expect(emojiInCategory("smileys")[0]).toMatchObject({ emoji: "😀", label: "grinning face" });
+    // No skin-tone variants: those are the base emoji's, chosen elsewhere.
+    expect(all.some((e) => /\u{1F3FB}|\u{1F3FF}/u.test(e.emoji))).toBe(false);
+  });
+
+  it("are found by words of their label or tags", () => {
+    expect(searchEmoji("thumbs up")[0]?.emoji).toBe("👍");
+    expect(searchEmoji("gri").map((e) => e.emoji)).toContain("😀");
+    expect(searchEmoji("red heart").map((e) => e.emoji)).toContain("❤️");
+    expect(searchEmoji("   ")).toEqual([]);
+    expect(searchEmoji("zzzqqq")).toEqual([]);
+    expect(emojiEntry("👍").label).toBe("thumbs up");
+  });
+
+  it("are written as keyboards type them, so a picked reaction counts with the same quick one", () => {
+    for (const quick of QUICK_REACTIONS) expect(emojiEntry(quick).label, quick).not.toBe(quick);
+    const all = EMOJI_CATEGORIES.flatMap((c) => emojiInCategory(c.id));
+    expect(all.some((e) => /\p{Emoji_Presentation}\uFE0F/u.test(e.emoji))).toBe(false);
+    expect(all.map((e) => e.emoji)).toContain("❤️");
+  });
+});
+
+describe("recent emoji", () => {
+  it("put the newest first, once, and keep at most the limit", () => {
+    expect(pushRecentEmoji(["😀", "👍"], "👍")).toEqual(["👍", "😀"]);
+    const many = Array.from({ length: RECENT_EMOJI_MAX }, (_, i) => String(i));
+    expect(pushRecentEmoji(many, "x")).toHaveLength(RECENT_EMOJI_MAX);
+    expect(pushRecentEmoji(many, "x")[0]).toBe("x");
+  });
+
+  it("are kept per person with their drafts, so signing out clears them", async () => {
+    const storage = memoryDraftStorage();
+    await saveRecentEmoji(storage, "u1", ["🎉"]);
+    await saveRecentEmoji(storage, "u2", ["🙂"]);
+    expect(await loadRecentEmoji(storage, "u1")).toEqual(["🎉"]);
+    await clearDrafts(storage, "u1");
+    expect(await storage.getItem(recentEmojiKey("u1"))).toBeNull();
+    expect(await loadRecentEmoji(storage, "u2")).toEqual(["🙂"]);
+  });
+
+  it("survive a corrupt entry as none", async () => {
+    const storage = memoryDraftStorage();
+    await storage.setItem(recentEmojiKey("u1"), "{not json");
+    expect(await loadRecentEmoji(storage, "u1")).toEqual([]);
+  });
+});
+
+describe("insertAtSelection", () => {
+  it("types at the cursor, over a selection, or at the end", () => {
+    expect(insertAtSelection("hello world", { start: 5, end: 5 }, "🙂")).toEqual({ text: "hello🙂 world", cursor: 7 });
+    expect(insertAtSelection("hello world", { start: 6, end: 11 }, "🌍")).toEqual({ text: "hello 🌍", cursor: 8 });
+    expect(insertAtSelection("hi", null, "👋")).toEqual({ text: "hi👋", cursor: 4 });
+    expect(insertAtSelection("hi", { start: 40, end: 50 }, "!")).toEqual({ text: "hi!", cursor: 3 });
+  });
+});
+
+const ME = "u1";
+function textMessage(): ChatMessage {
+  return {
+    id: "m1", conversationId: "c1", seq: 1, clientId: "c", senderId: "u2", senderRole: "member", kind: "text", body: "hi",
+    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;
+}
+
+describe("the long-press sheet's +", () => {
+  const context = { me: ME, role: "member" as const, canPost: true, pinned: false, canPin: false, canCopy: false };
+
+  it("opens every emoji, searchable, and reacts with the one picked", async () => {
+    const onReact = vi.fn();
+    const onClose = vi.fn();
+    const drafts = memoryDraftStorage();
+    render(
+      <ChatNativeProvider modules={{ drafts }}>
+        <MessageActionsSheet message={textMessage()} context={context} onClose={onClose} onReact={onReact} onAction={vi.fn()} testID="acts" />
+      </ChatNativeProvider>,
+    );
+    const more = await screen.findByTestId("acts-react-more");
+    expect(more.getAttribute("aria-label")).toBe("More reactions");
+    fireEvent.click(more);
+    expect(screen.getByTestId("acts-picker")).toBeTruthy();
+    // Categories are tabs, each named for screen readers.
+    expect(screen.getByTestId("acts-picker-tab-food").getAttribute("aria-label")).toBe("Food and drink");
+    fireEvent.change(screen.getByTestId("acts-picker-search").querySelector("input")!, { target: { value: "party popper" } });
+    const party = await screen.findByTestId("acts-picker-emoji-🎉");
+    expect(party.getAttribute("aria-label")).toBe("party popper");
+    fireEvent.click(party);
+    expect(onReact).toHaveBeenCalledWith(expect.objectContaining({ id: "m1" }), "🎉", true);
+    expect(onClose).toHaveBeenCalled();
+    // Kept as a recent one for this person.
+    await waitFor(async () => expect(await loadRecentEmoji(drafts, ME)).toEqual(["🎉"]));
+  });
+
+  it("shows the person's recent emoji first, under Recent", async () => {
+    const drafts = memoryDraftStorage();
+    await saveRecentEmoji(drafts, "u-recent", ["🦄"]);
+    render(
+      <ChatNativeProvider modules={{ drafts }}>
+        <MessageActionsSheet message={textMessage()} context={{ ...context, me: "u-recent" }} onClose={vi.fn()} onReact={vi.fn()} onAction={vi.fn()} testID="acts" />
+      </ChatNativeProvider>,
+    );
+    fireEvent.click(await screen.findByTestId("acts-react-more"));
+    await screen.findByTestId("acts-picker-tab-recent");
+    expect(screen.getByTestId("acts-picker-tab-recent").getAttribute("aria-selected")).toBe("true");
+    expect(screen.getByTestId("acts-picker-emoji-🦄")).toBeTruthy();
+  });
+});
+
+function ComposerHarness() {
+  const composer = useChatComposer("c1", null, ME);
+  return <ChatComposer composer={composer} canPost disabledReason={null} role="member" onSend={vi.fn()} userId="u-composer" testID="cmp" />;
+}
+
+describe("the composer's emoji button", () => {
+  it("opens the picker, which types at the cursor", async () => {
+    render(
+      <ChatNativeProvider>
+        <ComposerHarness />
+      </ChatNativeProvider>,
+    );
+    const input = screen.getByTestId("cmp-input") as HTMLInputElement;
+    fireEvent.change(input, { target: { value: "see you" } });
+    const button = screen.getByTestId("cmp-emoji");
+    expect(button.getAttribute("aria-label")).toBe("Add emoji");
+    await act(async () => fireEvent.click(button));
+    fireEvent.click(await screen.findByTestId("cmp-emoji-sheet-picker-emoji-😀"));
+    await waitFor(() => expect(input.value).toBe("see you😀"));
+    fireEvent.click(screen.getByTestId("cmp-emoji-sheet-done"));
+    await waitFor(() => expect(screen.queryByTestId("cmp-emoji-sheet-picker")).toBeNull());
+  });
+});
+
+describe("the picker's grid", () => {
+  it("lays out rows by row index (FlatList with numColumns asks per row), so every row scrolls into place", () => {
+    lists.length = 0;
+    render(
+      <ChatNativeProvider>
+        <ChatEmojiPicker onSelect={vi.fn()} testID="pk" />
+      </ChatNativeProvider>,
+    );
+    const grid = lists.find((p) => p.testID === "pk-grid")!;
+    const columns = grid.numColumns as number;
+    expect(columns).toBe(8);
+    const layout = grid.getItemLayout as (d: unknown, i: number) => { length: number; offset: number };
+    expect(layout(null, 5)).toEqual({ length: 44, offset: 5 * 44, index: 5 });
+    const rows = Math.ceil((grid.data as unknown[]).length / columns);
+    expect(layout(null, rows - 1).offset).toBe((rows - 1) * 44);
+  });
+
+  it("keeps an emoji picked while the stored recents were still loading", async () => {
+    const drafts = memoryDraftStorage();
+    await saveRecentEmoji(drafts, "u-race", ["🍕", "🎸"]);
+    let release!: () => void;
+    const gate = new Promise<void>((r) => (release = r));
+    // Read when asked, answered late: as AsyncStorage does with a write queued behind the read.
+    const slow = {
+      ...drafts,
+      getItem: async (k: string) => {
+        const value = await drafts.getItem(k);
+        await gate;
+        return value;
+      },
+    };
+    render(
+      <ChatNativeProvider modules={{ drafts: slow }}>
+        <ChatEmojiPicker onSelect={vi.fn()} userId="u-race" testID="pk" />
+      </ChatNativeProvider>,
+    );
+    fireEvent.click(screen.getByTestId("pk-emoji-😀"));
+    await act(async () => release());
+    await waitFor(async () => expect(await loadRecentEmoji(drafts, "u-race")).toEqual(["😀", "🍕", "🎸"]));
+  });
+});
+
+describe("the composer's emoji button, picked twice quickly", () => {
+  it("types both", async () => {
+    render(
+      <ChatNativeProvider modules={{ drafts: memoryDraftStorage() }}>
+        <ComposerHarness />
+      </ChatNativeProvider>,
+    );
+    await act(async () => fireEvent.click(screen.getByTestId("cmp-emoji")));
+    const smile = await screen.findByTestId("cmp-emoji-sheet-picker-emoji-😀");
+    act(() => {
+      fireEvent.click(smile);
+      fireEvent.click(smile);
+    });
+    await waitFor(() => expect((screen.getByTestId("cmp-input") as HTMLInputElement).value).toBe("😀😀"));
+  });
+});