@q9labsai/chalk-react-native 4.1.17 → 5.0.1

package/src/primitives/TileShell.tsx

@@ -0,0 +1,53 @@
+import { memo, useEffect, type ReactNode } from "react";
+import { StyleSheet, View } from "react-native";
+import Animated, { useAnimatedStyle, useSharedValue, withTiming, type SharedValue } from "react-native-reanimated";
+import { useDeviceLayout } from "../frame/device-layout";
+import { timings } from "../motion/motion";
+import { useTheme } from "../theme/theme";
+import { fixed, radii } from "../theme/tokens";
+
+export type TileShellProps = {
+  readonly children: ReactNode;
+  /** The live ring shows only on a speaking person whose camera is on; a camera-off face reacts instead. */
+  readonly speaking?: boolean;
+  readonly cameraOn?: boolean;
+  /** Speaking level from 0 to 1; the ring's opacity follows it (0.3 + 0.7 × level). */
+  readonly level?: SharedValue<number>;
+  readonly testID?: string;
+};
+
+/**
+ * A stage tile's frame (`.tile`): tile surface, 12 pt radius (14 pt on a phone), clipped
+ * content, and the live ring drawn over the video. The stage fills it with video or an
+ * avatar and a `NameTag`.
+ */
+export const TileShell = memo(function TileShell({ children, speaking = false, cameraOn = false, level, testID }: TileShellProps): React.JSX.Element {
+  const { colors } = useTheme();
+  const { phone } = useDeviceLayout();
+  const radius = phone ? radii.tilePhone : radii.tile;
+  const live = useSharedValue(0);
+  const showRing = speaking && cameraOn;
+  useEffect(() => {
+    live.value = withTiming(showRing ? 1 : 0, timings.scrim);
+  }, [live, showRing]);
+  const ringStyle = useAnimatedStyle(() => {
+    "worklet";
+    return { opacity: live.value * (0.3 + 0.7 * (level ? level.value : 1)) };
+  });
+
+  return (
+    <View style={[styles.tile, { borderRadius: radius, backgroundColor: colors.tile }]} testID={testID}>
+      {children}
+      <Animated.View pointerEvents="none" style={[styles.ring, { borderRadius: radius }, ringStyle]} testID={testID ? `${testID}.ring` : undefined}>
+        <View style={[styles.ringShade, { borderRadius: radius - 3 }]} />
+      </Animated.View>
+    </View>
+  );
+});
+
+const styles = StyleSheet.create({
+  tile: { flex: 1, overflow: "hidden" },
+  // `inset 0 0 0 3px` white and `inset 0 0 0 4px` shade in the mockup: a 3 pt white band with a 1 pt shade inside it.
+  ring: { ...StyleSheet.absoluteFillObject, borderWidth: 3, borderColor: fixed.liveRing, zIndex: 5 },
+  ringShade: { ...StyleSheet.absoluteFillObject, borderWidth: 1, borderColor: fixed.liveRingShade },
+});

package/src/primitives/announce.ts

@@ -0,0 +1,7 @@
+import { AccessibilityInfo, Platform } from "react-native";
+
+/** Speaks a message through VoiceOver or TalkBack, like the mockup's polite live region. Queued on iOS so it doesn't cut off the current utterance. */
+export function announce(message: string): void {
+  if (Platform.OS === "ios") AccessibilityInfo.announceForAccessibilityWithOptions(message, { queue: true });
+  else AccessibilityInfo.announceForAccessibility(message);
+}

package/src/primitives/menu-placement.test.ts

@@ -0,0 +1,50 @@
+import { describe, expect, it } from "vitest";
+import { placeMenu } from "./menu-placement";
+
+const iphone = { width: 393, height: 852 };
+const iphoneInsets = { top: 59, bottom: 34, left: 0, right: 0 };
+const menu = { width: 250, height: 200 };
+
+describe("placeMenu", () => {
+  it("opens below a trigger near the top instead of covering the status bar and Dynamic Island", () => {
+    const placement = placeMenu({ x: 337, y: 66, width: 44, height: 44 }, menu, iphone, iphoneInsets);
+    expect(placement.side).toBe("below");
+    expect(placement.y).toBe(66 + 44 + 6);
+    expect(placement.y).toBeGreaterThanOrEqual(iphoneInsets.top + 8);
+  });
+
+  it("flips above only when there is more room above", () => {
+    const placement = placeMenu({ x: 20, y: 700, width: 44, height: 44 }, menu, iphone, iphoneInsets);
+    expect(placement.side).toBe("above");
+    expect(placement.y).toBe(700 - 6 - 200);
+  });
+
+  it("stays below when the menu fits below even if there is more room above", () => {
+    const placement = placeMenu({ x: 20, y: 500, width: 44, height: 44 }, menu, iphone, iphoneInsets);
+    expect(placement.side).toBe("below");
+  });
+
+  it("shifts sideways to stay inside the screen edges", () => {
+    expect(placeMenu({ x: 349, y: 300, width: 44, height: 44 }, menu, iphone, iphoneInsets).x).toBe(393 - 8 - 250);
+    expect(placeMenu({ x: 0, y: 300, width: 44, height: 44 }, menu, iphone, iphoneInsets).x).toBe(8);
+  });
+
+  it("respects landscape side insets", () => {
+    const landscape = { width: 852, height: 393 };
+    const placement = placeMenu({ x: 0, y: 100, width: 44, height: 44 }, menu, landscape, { top: 0, bottom: 21, left: 59, right: 59 });
+    expect(placement.x).toBe(59 + 8);
+  });
+
+  it("never covers the home indicator or the keyboard", () => {
+    const placement = placeMenu({ x: 100, y: 760, width: 44, height: 44 }, { width: 250, height: 120 }, iphone, iphoneInsets);
+    expect(placement.y + 120).toBeLessThanOrEqual(852 - 34 - 8);
+    const withKeyboard = placeMenu({ x: 100, y: 420, width: 44, height: 44 }, { width: 250, height: 120 }, iphone, iphoneInsets, 336);
+    expect(withKeyboard.y + 120).toBeLessThanOrEqual(852 - 336 - 8);
+  });
+
+  it("caps a menu taller than the safe area and lets it scroll", () => {
+    const placement = placeMenu({ x: 100, y: 300, width: 44, height: 44 }, { width: 250, height: 2000 }, iphone, iphoneInsets);
+    expect(placement.maxHeight).toBe(852 - 34 - 8 - (59 + 8));
+    expect(placement.y).toBe(59 + 8);
+  });
+});

package/src/primitives/menu-placement.ts

@@ -0,0 +1,43 @@
+export type Rect = { readonly x: number; readonly y: number; readonly width: number; readonly height: number };
+export type Insets = { readonly top: number; readonly bottom: number; readonly left: number; readonly right: number };
+
+export type MenuPlacement = {
+  readonly x: number;
+  readonly y: number;
+  /** Set when the menu is taller than the room inside the safe area; the menu then scrolls. */
+  readonly maxHeight: number | null;
+  readonly side: "below" | "above";
+};
+
+/** Gap between the trigger and the menu. */
+const GAP = 6;
+/** Distance kept from the safe area's edges. */
+const MARGIN = 8;
+
+/**
+ * Places a menu next to its trigger, as the mockup's `fitBox` does: below the trigger unless
+ * there's more room above, shifted sideways to stay on screen, and always inside the safe area
+ * (clear of the status bar, the Dynamic Island, the home indicator and the keyboard).
+ */
+export function placeMenu(trigger: Rect, menu: { readonly width: number; readonly height: number }, screen: { readonly width: number; readonly height: number }, insets: Insets, keyboardHeight = 0): MenuPlacement {
+  const top = insets.top + MARGIN;
+  const bottom = screen.height - Math.max(insets.bottom, keyboardHeight) - MARGIN;
+  const left = insets.left + MARGIN;
+  const right = screen.width - insets.right - MARGIN;
+  const maxHeight = menu.height > bottom - top ? bottom - top : null;
+  const height = maxHeight ?? menu.height;
+  const roomBelow = bottom - (trigger.y + trigger.height + GAP);
+  const roomAbove = trigger.y - GAP - top;
+  const below = height <= roomBelow || roomBelow >= roomAbove;
+  const y = below ? trigger.y + trigger.height + GAP : trigger.y - GAP - height;
+  return {
+    x: clamp(trigger.x + trigger.width / 2 - menu.width / 2, left, right - menu.width),
+    y: clamp(y, top, bottom - height),
+    maxHeight,
+    side: below ? "below" : "above",
+  };
+}
+
+function clamp(value: number, min: number, max: number): number {
+  return Math.max(min, Math.min(max, value));
+}

package/src/primitives/toast/Toast.tsx

@@ -0,0 +1,50 @@
+import { memo } from "react";
+import { StyleSheet, Text, View } from "react-native";
+import { useMeasuredRef } from "../../frame/measurement";
+import { useTheme } from "../../theme/theme";
+import { fontFamilies } from "../../theme/tokens";
+import { ChalkText } from "../ChalkText";
+import { IconButton } from "../IconButton";
+import { PillButton } from "../PillButton";
+import type { Toast as ToastModel } from "./toast-store";
+
+export type ToastProps = {
+  readonly toast: ToastModel;
+  readonly onDismiss: () => void;
+};
+
+/** One event notice (`.toast`). Every notice in the call uses this look. */
+export const Toast = memo(function Toast({ toast, onDismiss }: ToastProps): React.JSX.Element {
+  const { colors, elevation } = useTheme();
+  const parts = typeof toast.message === "string" ? [toast.message] : toast.message;
+  const testID = toast.testID ?? `toast.${toast.id}`;
+  const toastStyle = [styles.toast, { backgroundColor: colors.popover, borderColor: colors.line, boxShadow: elevation.toast }];
+  const ref = useMeasuredRef<View>(testID, toastStyle);
+  return (
+    <View accessibilityLiveRegion={toast.kind === "error" ? "assertive" : "polite"} accessibilityRole={toast.kind === "error" ? "alert" : "summary"} ref={ref} style={toastStyle} testID={testID}>
+      {toast.leading}
+      <ChalkText numberOfLines={toast.wrap ? undefined : 1} style={[styles.message, toast.wrap ? styles.wrapped : null]}>
+        {parts.map((part, index) =>
+          typeof part === "string" ? (
+            part
+          ) : (
+            <Text key={index} style={styles.strong}>
+              {part.strong}
+            </Text>
+          ),
+        )}
+      </ChalkText>
+      {toast.actions?.map((action) => (
+        <PillButton key={action.label} label={action.label} onPress={action.onPress} testID={action.testID} variant={action.variant ?? "secondary"} />
+      ))}
+      {toast.dismissible ? <IconButton accessibilityLabel="Dismiss" icon="x" onPress={onDismiss} size={36} tone="ghost" /> : null}
+    </View>
+  );
+});
+
+const styles = StyleSheet.create({
+  toast: { flexDirection: "row", alignItems: "center", gap: 10, minHeight: 48, paddingVertical: 6, paddingRight: 6, paddingLeft: 14, borderWidth: 1, borderRadius: 12 },
+  message: { flexShrink: 1, marginRight: 4 },
+  wrapped: { lineHeight: 14 * 1.35, paddingVertical: 4 },
+  strong: { fontFamily: fontFamilies[600] },
+});

package/src/primitives/toast/ToastStack.tsx

@@ -0,0 +1,89 @@
+import { createContext, useContext, useMemo, useState, useSyncExternalStore, type ReactNode } from "react";
+import { StyleSheet, View } from "react-native";
+import Animated, { useReducedMotion, withTiming, type EntryExitAnimationFunction } from "react-native-reanimated";
+import { useDeviceLayout } from "../../frame/device-layout";
+import { usePortalCount } from "../../frame/portal";
+import { timings } from "../../motion/motion";
+import { Toast } from "./Toast";
+import { createToastStore, type ToastStore } from "./toast-store";
+
+const ToastContext = createContext<ToastStore | null>(null);
+
+/** `bottom` is the height the stack keeps above the safe area; null means the call dock's clearance. */
+type ToastClearance = { readonly bottom: number | null; readonly setBottom: (bottom: number | null) => void };
+const ToastClearanceContext = createContext<ToastClearance | null>(null);
+
+export function ToastProvider({ children }: { readonly children: ReactNode }): React.JSX.Element {
+  const [store] = useState(createToastStore);
+  const [bottom, setBottom] = useState<number | null>(null);
+  const clearance = useMemo<ToastClearance>(() => ({ bottom, setBottom }), [bottom]);
+  return (
+    <ToastContext.Provider value={store}>
+      <ToastClearanceContext.Provider value={clearance}>{children}</ToastClearanceContext.Provider>
+    </ToastContext.Provider>
+  );
+}
+
+/** Shows and dismisses event notices: `const toasts = useToasts(); toasts.show({ message: [{ strong: "Nora" }, " joined"] })`. */
+export function useToasts(): Pick<ToastStore, "show" | "dismiss" | "clear"> {
+  const store = useContext(ToastContext);
+  if (!store) throw new Error("useToasts must be used inside <Chalk>.");
+  return store;
+}
+
+/**
+ * Lifts the notices above a screen's own bottom controls, such as Home's buttons, which are taller
+ * than the call dock. Call it with null when the screen unmounts.
+ */
+export function useToastClearance(): (bottom: number | null) => void {
+  const clearance = useContext(ToastClearanceContext);
+  if (!clearance) throw new Error("useToastClearance must be used inside <Chalk>.");
+  return clearance.setBottom;
+}
+
+/**
+ * The stack of notices, centred above the dock. While a phone sheet is up, the stack moves to
+ * the top of the screen with the newest notice nearest the top edge, as in the mockup.
+ */
+export function ToastStack(): React.JSX.Element {
+  const store = useContext(ToastContext);
+  const clearance = useContext(ToastClearanceContext);
+  if (!store || !clearance) throw new Error("ToastStack must be inside <Chalk>.");
+  const toasts = useSyncExternalStore(store.subscribe, store.getSnapshot, store.getSnapshot);
+  const layout = useDeviceLayout();
+  const sheetUp = usePortalCount("sheets") > 0;
+  const reduceMotion = useReducedMotion();
+  const atTop = layout.phone && sheetUp;
+  const offset = layout.arrangement === "pad" ? 88 : layout.arrangement === "landscape" ? 70 : 76;
+  const position = atTop ? { top: layout.insets.top + 8, flexDirection: "column-reverse" as const } : { bottom: layout.insets.bottom + (clearance.bottom ?? offset) };
+
+  return (
+    <View pointerEvents="box-none" style={[styles.stack, position]} testID="frame.toasts">
+      {toasts.map((toast) => (
+        <Animated.View entering={reduceMotion ? undefined : toastEntering} exiting={reduceMotion ? undefined : toastExiting} key={toast.id} style={{ maxWidth: layout.width - 32 }}>
+          <Toast onDismiss={() => store.dismiss(toast.id)} toast={toast} />
+        </Animated.View>
+      ))}
+    </View>
+  );
+}
+
+const toastEntering: EntryExitAnimationFunction = () => {
+  "worklet";
+  return {
+    initialValues: { opacity: 0, transform: [{ translateY: 8 }] },
+    animations: { opacity: withTiming(1, timings.toastIn), transform: [{ translateY: withTiming(0, timings.toastIn) }] },
+  };
+};
+
+const toastExiting: EntryExitAnimationFunction = () => {
+  "worklet";
+  return {
+    initialValues: { opacity: 1, transform: [{ translateY: 0 }] },
+    animations: { opacity: withTiming(0, timings.toastOut), transform: [{ translateY: withTiming(4, timings.toastOut) }] },
+  };
+};
+
+const styles = StyleSheet.create({
+  stack: { position: "absolute", left: 0, right: 0, alignItems: "center", gap: 8 },
+});

package/src/primitives/toast/toast-store.ts

@@ -0,0 +1,86 @@
+import type { ReactNode } from "react";
+import { durations } from "../../theme/tokens";
+import { announce } from "../announce";
+
+/** `info` leaves on its own after 5 s; `error` and `knock` stay until acted on or dismissed. */
+export type ToastKind = "info" | "error" | "knock";
+
+/** A message is plain text with optional bold runs, such as a person's name. */
+export type MessagePart = string | { readonly strong: string };
+
+export type ToastAction = {
+  readonly label: string;
+  readonly onPress: () => void;
+  readonly variant?: "primary" | "secondary";
+  readonly testID?: string;
+};
+
+export type ToastInput = {
+  readonly kind?: ToastKind;
+  /** An icon or a small avatar in front of the message. */
+  readonly leading?: ReactNode;
+  readonly message: string | readonly MessagePart[];
+  readonly actions?: readonly ToastAction[];
+  /** Adds the close button; errors usually have one. */
+  readonly dismissible?: boolean;
+  /** Lets a long message wrap instead of trimming it to one line. */
+  readonly wrap?: boolean;
+  readonly testID?: string;
+};
+
+export type Toast = ToastInput & { readonly id: number; readonly kind: ToastKind };
+
+export type ToastStore = {
+  readonly show: (input: ToastInput) => number;
+  readonly dismiss: (id: number) => void;
+  readonly clear: () => void;
+  readonly subscribe: (listener: () => void) => () => void;
+  readonly getSnapshot: () => readonly Toast[];
+};
+
+/** At most three notices show at once; a fourth pushes out the oldest. */
+const MAX_VISIBLE = 3;
+
+export function messageText(message: ToastInput["message"]): string {
+  return typeof message === "string" ? message : message.map((part) => (typeof part === "string" ? part : part.strong)).join("");
+}
+
+export function createToastStore(): ToastStore {
+  let toasts: readonly Toast[] = [];
+  let nextId = 0;
+  const timers = new Map<number, ReturnType<typeof setTimeout>>();
+  const listeners = new Set<() => void>();
+  const publish = (next: readonly Toast[]) => {
+    toasts = next;
+    for (const listener of listeners) listener();
+  };
+  const dismiss = (id: number) => {
+    clearTimeout(timers.get(id));
+    timers.delete(id);
+    if (toasts.some((toast) => toast.id === id)) publish(toasts.filter((toast) => toast.id !== id));
+  };
+  return {
+    show(input) {
+      const toast: Toast = { ...input, id: ++nextId, kind: input.kind ?? "info" };
+      const kept = toasts.slice(Math.max(0, toasts.length - (MAX_VISIBLE - 1)));
+      for (const dropped of toasts.slice(0, toasts.length - kept.length)) dismiss(dropped.id);
+      publish([...kept, toast]);
+      if (toast.kind === "info")
+        timers.set(
+          toast.id,
+          setTimeout(() => dismiss(toast.id), durations.toastInfo),
+        );
+      announce(messageText(toast.message));
+      return toast.id;
+    },
+    dismiss,
+    clear() {
+      for (const toast of toasts) dismiss(toast.id);
+    },
+    subscribe(listener) {
+      listeners.add(listener);
+      return () => listeners.delete(listener);
+    },
+    getSnapshot: () => toasts,
+  };
+}

package/src/sheets/people-chat/ChatNotices.tsx

@@ -0,0 +1,69 @@
+import { useEffect, useRef } from "react";
+import { FaceAvatar } from "../../avatar/FaceAvatar";
+import { usePreferences } from "../../frame/preferences";
+import { useChat, useSelf } from "../../hooks/space-hooks";
+import { announce } from "../../primitives/announce";
+import { useToasts } from "../../primitives/toast/ToastStack";
+import { playSound } from "../../sounds/sounds";
+import { messageSummary } from "./chat-model";
+
+export type ChatNoticesProps = {
+  /** True while the Chat tab is in view; new messages then only sound and are announced. */
+  readonly chatVisible: boolean;
+  /** True while the People and Chat sheet is open on either tab; the Chat tab's dot shows instead of a toast. */
+  readonly sheetOpen: boolean;
+  readonly onOpenChat: () => void;
+};
+
+/**
+ * New messages from others (F4): the message sound and an announcement, and while the sheet is
+ * closed a notice with the sender's first name, the message and Reply. Messages already in the
+ * history when the call opens stay quiet.
+ */
+export function ChatNotices({ chatVisible, sheetOpen, onOpenChat }: ChatNoticesProps): null {
+  const { messages, status } = useChat();
+  const self = useSelf();
+  const toasts = useToasts();
+  const { soundsEnabled } = usePreferences();
+  const seen = useRef<ReadonlySet<string> | null>(null);
+  const latest = useRef({ chatVisible, sheetOpen, onOpenChat, soundsEnabled });
+  latest.current = { chatVisible, sheetOpen, onOpenChat, soundsEnabled };
+
+  useEffect(() => {
+    if (status !== "ready") return;
+    const previous = seen.current;
+    seen.current = new Set(messages.map((message) => message.messageId));
+    if (!previous) return;
+    const fresh = messages.filter((message) => !previous.has(message.messageId) && message.participantId !== self.participantId);
+    const now = latest.current;
+    for (const message of fresh) {
+      const text = messageSummary(message.text, message.attachments);
+      playSound("message", now.soundsEnabled);
+      if (now.chatVisible || now.sheetOpen) {
+        announce(`New message from ${message.displayName}: ${text}`);
+        continue;
+      }
+      // The notice announces itself.
+      const id = toasts.show({
+        leading: <FaceAvatar name={message.displayName} size={28} />,
+        message: [{ strong: firstName(message.displayName) }, ` ${text}`],
+        actions: [
+          {
+            label: "Reply",
+            onPress: () => {
+              toasts.dismiss(id);
+              latest.current.onOpenChat();
+            },
+            testID: "toast.chat.reply",
+          },
+        ],
+        testID: "toast.chat",
+      });
+    }
+  }, [messages, self.participantId, status, toasts]);
+  return null;
+}
+
+function firstName(name: string): string {
+  return name.trim().split(/\s+/)[0] ?? name;
+}

package/src/sheets/people-chat/ChatTab.tsx

@@ -0,0 +1,186 @@
+import type { ChatAttachment } from "@q9labsai/chalk-client";
+import { memo, useCallback, useMemo, useState } from "react";
+import { FlatList, Pressable, StyleSheet, View, type ListRenderItemInfo } from "react-native";
+import { FaceAvatar } from "../../avatar/FaceAvatar";
+import { useSpaceClient } from "../../context/space-client-context";
+import { useChat, useSelf } from "../../hooks/space-hooks";
+import { Icon } from "../../icons/Icon";
+import { ChalkText } from "../../primitives/ChalkText";
+import { useTheme } from "../../theme/theme";
+import { fontFamilies } from "../../theme/tokens";
+import { FileCard, Thumbnails } from "./attachments";
+import { fileKind, groupMessages, messageSummary, type ChatEntry, type MessageGroup } from "./chat-model";
+import { Composer } from "./Composer";
+import { PhotoViewer, type ViewedPhotos } from "./PhotoViewer";
+
+/**
+ * The Chat tab: the call's messages, newest at the bottom, and the composer under them. The list
+ * is inverted, so it opens at the newest message and stays there as new ones arrive.
+ */
+export function ChatTab(): React.JSX.Element {
+  const client = useSpaceClient();
+  const chat = useChat();
+  const self = useSelf();
+  const [retried, setRetried] = useState<ReadonlySet<string>>(() => new Set());
+  const [viewing, setViewing] = useState<ViewedPhotos | null>(null);
+  const groups = useMemo(() => groupMessages(chat.messages, chat.pendingSends, self, retried).slice().reverse(), [chat.messages, chat.pendingSends, retried, self]);
+
+  const retry = useCallback(
+    (entry: ChatEntry) => {
+      const id = entry.clientMessageId;
+      if (!id) return;
+      setRetried((previous) => new Set(previous).add(id));
+      // The new attempt shows up as its own pending send, failed again if it fails.
+      client.chat.send({ text: entry.text, attachments: entry.attachments }).catch(() => undefined);
+    },
+    [client],
+  );
+  const loadOlder = useCallback(() => {
+    if (!chat.pagination.hasOlder || chat.status !== "ready") return;
+    // Older history is a nicety; failing to load it leaves the list as it is.
+    client.chat.loadOlder().catch(() => undefined);
+  }, [chat.pagination.hasOlder, chat.status, client]);
+
+  const renderItem = useCallback(({ item }: ListRenderItemInfo<MessageGroup>) => <GroupRow group={item} onOpenPhotos={setViewing} onRetry={retry} />, [retry]);
+
+  return (
+    <>
+      {groups.length === 0 ? (
+        <View style={styles.empty} testID="chat.empty">
+          <ChalkText variant="bodyStrong">No messages yet</ChalkText>
+          <ChalkText tone="textMuted" variant="meta">
+            Messages are seen by everyone in the call.
+          </ChalkText>
+        </View>
+      ) : (
+        <FlatList
+          contentContainerStyle={styles.content}
+          data={groups}
+          initialNumToRender={10}
+          inverted
+          keyboardDismissMode="interactive"
+          keyboardShouldPersistTaps="handled"
+          keyExtractor={(group) => group.key}
+          maxToRenderPerBatch={10}
+          onEndReached={loadOlder}
+          onEndReachedThreshold={0.5}
+          renderItem={renderItem}
+          style={styles.list}
+          testID="chat.list"
+          windowSize={9}
+        />
+      )}
+      <Composer />
+      {viewing ? <PhotoViewer onChange={(index) => setViewing({ ...viewing, index })} onClose={() => setViewing(null)} viewing={viewing} /> : null}
+    </>
+  );
+}
+
+type GroupRowProps = {
+  readonly group: MessageGroup;
+  readonly onRetry: (entry: ChatEntry) => void;
+  readonly onOpenPhotos: (viewing: ViewedPhotos) => void;
+};
+
+/** One person's run of messages (`.mg`): their face, name and time once, then each message. Yours sit on the right without a face. */
+const GroupRow = memo(function GroupRow({ group, onRetry, onOpenPhotos }: GroupRowProps): React.JSX.Element {
+  const { mine } = group;
+  return (
+    <View style={[styles.group, mine ? styles.groupMine : null]} testID={`chat.group.${group.key}`}>
+      {mine ? null : (
+        <View accessibilityElementsHidden importantForAccessibility="no-hide-descendants">
+          <FaceAvatar name={group.displayName} size={28} />
+        </View>
+      )}
+      <View style={[styles.column, mine ? styles.columnMine : null]}>
+        <View accessibilityElementsHidden importantForAccessibility="no-hide-descendants" style={styles.header}>
+          {mine ? null : (
+            <ChalkText numberOfLines={1} style={styles.name} variant="label">
+              {group.displayName}
+            </ChalkText>
+          )}
+          <ChalkText style={styles.time} tabular tone="textMuted" variant="label">
+            {group.time}
+          </ChalkText>
+        </View>
+        {group.entries.map((entry) => (
+          <Message entry={entry} from={mine ? "You" : group.displayName} key={entry.key} mine={mine} onOpenPhotos={(photos, index) => onOpenPhotos({ photos, index, from: `${mine ? "You" : group.displayName}, ${group.time}` })} onRetry={onRetry} />
+        ))}
+      </View>
+    </View>
+  );
+});
+
+type MessageProps = {
+  readonly entry: ChatEntry;
+  readonly from: string;
+  readonly mine: boolean;
+  readonly onRetry: (entry: ChatEntry) => void;
+  readonly onOpenPhotos: (photos: readonly ChatAttachment[], index: number) => void;
+};
+
+function Message({ entry, from, mine, onRetry, onOpenPhotos }: MessageProps): React.JSX.Element {
+  const { colors } = useTheme();
+  const photos = entry.attachments.filter((attachment) => fileKind(attachment.mimeType) === "image");
+  const files = entry.attachments.filter((attachment) => fileKind(attachment.mimeType) !== "image");
+  const sent = entry.state === "sent";
+  const summary = messageSummary(entry.text, entry.attachments);
+  const stateLabel = entry.state === "failed" ? ", couldn't send" : sent ? "" : ", sending";
+  return (
+    <View style={[styles.message, mine ? styles.messageMine : null]} testID={`chat.message.${entry.key}`}>
+      <View accessibilityLabel={`${from}: ${summary}${stateLabel}`} accessible={photos.length === 0 && files.length === 0} style={[styles.body, mine ? styles.messageMine : null, sent ? null : styles.pending]}>
+        {entry.text ? (
+          <View style={[styles.bubble, { backgroundColor: colors.raised }]}>
+            <ChalkText variant="body">{entry.text}</ChalkText>
+          </View>
+        ) : null}
+        {photos.length > 0 ? <Thumbnails disabled={!sent} onOpen={(index) => onOpenPhotos(photos, index)} photos={photos} /> : null}
+        {files.map((file) => (
+          <FileCard attachment={file} key={file.attachmentId} sent={sent} />
+        ))}
+      </View>
+      {entry.state === "queued" || entry.state === "sending" ? (
+        <ChalkText style={styles.status} tone="textMuted" variant="caption">
+          Sending…
+        </ChalkText>
+      ) : null}
+      {entry.state === "failed" ? (
+        <View style={styles.failed}>
+          <Icon color={colors.dangerText} name="alert" size={14} />
+          <ChalkText color={colors.dangerText} style={styles.failedText} variant="label">
+            Couldn’t send.
+          </ChalkText>
+          <Pressable accessibilityLabel="Retry sending" accessibilityRole="button" hitSlop={12} onPress={() => onRetry(entry)} testID={`chat.retry.${entry.key}`}>
+            <ChalkText style={styles.retry} variant="label">
+              Retry
+            </ChalkText>
+          </Pressable>
+        </View>
+      ) : null}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  list: { flex: 1 },
+  // `.cbody`: 8 pt around the messages.
+  content: { padding: 8 },
+  empty: { flex: 1, alignItems: "center", justifyContent: "center", gap: 4, padding: 24 },
+  group: { flexDirection: "row", alignItems: "flex-start", gap: 8, marginTop: 12, marginHorizontal: 4 },
+  groupMine: { flexDirection: "row-reverse" },
+  column: { flexShrink: 1, minWidth: 0, maxWidth: 240, alignItems: "flex-start", gap: 3 },
+  columnMine: { alignItems: "flex-end" },
+  header: { flexDirection: "row", alignItems: "baseline", marginHorizontal: 4, marginBottom: 1 },
+  name: { fontFamily: fontFamilies[600], marginRight: 6, flexShrink: 1 },
+  time: { fontFamily: fontFamilies[400] },
+  message: { maxWidth: "100%", alignItems: "flex-start", gap: 4 },
+  messageMine: { alignItems: "flex-end" },
+  body: { maxWidth: "100%", alignItems: "flex-start", gap: 4 },
+  pending: { opacity: 0.55 },
+  bubble: { borderRadius: 18, paddingVertical: 8, paddingHorizontal: 12 },
+  status: { fontFamily: fontFamilies[400], marginHorizontal: 6 },
+  failed: { flexDirection: "row", alignItems: "center", gap: 4, marginHorizontal: 6 },
+  failedText: { fontFamily: fontFamilies[400] },
+  // `.lnk`: the text colour, underlined, 2 pt by 4 pt of padding.
+  retry: { fontFamily: fontFamilies[600], textDecorationLine: "underline", paddingVertical: 2, paddingHorizontal: 4 },
+});