@q9labsai/chalk-react-native 4.1.17 → 5.0.1

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

@@ -0,0 +1,182 @@
+import { CHALK_CHAT_ATTACHMENT_MIME_TYPES, type ChatAttachment, type ChatUploadFile } from "@q9labsai/chalk-client";
+import { getDocumentAsync } from "expo-document-picker";
+import { File } from "expo-file-system";
+import { useCallback, useRef, useState } from "react";
+import { ActivityIndicator, Image, Pressable, ScrollView, StyleSheet, View } from "react-native";
+import Animated, { useAnimatedKeyboard, useAnimatedStyle } from "react-native-reanimated";
+import { useSpaceClient } from "../../context/space-client-context";
+import { useDeviceLayout } from "../../frame/device-layout";
+import { Icon } from "../../icons/Icon";
+import { usePressAnimation } from "../../motion/press";
+import { announce } from "../../primitives/announce";
+import { ChalkText } from "../../primitives/ChalkText";
+import { IconButton } from "../../primitives/IconButton";
+import { useToasts } from "../../primitives/toast/ToastStack";
+import { useTheme } from "../../theme/theme";
+import { chatOverlays, fontFamilies } from "../../theme/tokens";
+import { FileBadge } from "./attachments";
+import { fileKind, formatSize, mimeTypeOf, stagingError, type StagedFile } from "./chat-model";
+import { TextField } from "./TextField";
+
+/**
+ * The composer (`.comp`): files waiting to be sent, then the field with Attach and Send. It pads
+ * itself for the home indicator, and only by 8 pt while the keyboard is up, since the sheet then
+ * rides on the keyboard.
+ */
+export function Composer(): React.JSX.Element {
+  const client = useSpaceClient();
+  const toasts = useToasts();
+  const { colors } = useTheme();
+  const layout = useDeviceLayout();
+  const keyboard = useAnimatedKeyboard();
+  const [text, setText] = useState("");
+  const [focused, setFocused] = useState(false);
+  const [staged, setStaged] = useState<readonly StagedFile[]>([]);
+  const nextId = useRef(0);
+
+  const update = useCallback((id: number, change: Partial<StagedFile>) => setStaged((files) => files.map((file) => (file.id === id ? { ...file, ...change } : file))), []);
+
+  const upload = useCallback(
+    (file: StagedFile) => {
+      client.chat.files
+        .upload(file.source)
+        .then((attachment) => update(file.id, { state: "ready", attachment }))
+        .catch((cause: unknown) => update(file.id, { state: "error", error: cause instanceof Error ? cause.message : "Couldn’t upload" }));
+    },
+    [client, update],
+  );
+
+  const attach = useCallback(async () => {
+    const picked = await getDocumentAsync({ multiple: true, copyToCacheDirectory: true, type: [...CHALK_CHAT_ATTACHMENT_MIME_TYPES] });
+    if (picked.canceled) return;
+    let accepted = staged.filter((file) => file.state !== "error").length;
+    const added: StagedFile[] = [];
+    for (const asset of picked.assets) {
+      const mimeType = mimeTypeOf(asset.name, asset.mimeType);
+      const size = asset.size ?? 0;
+      const source: ChatUploadFile = { name: asset.name, type: mimeType, size, arrayBuffer: () => new File(asset.uri).arrayBuffer() };
+      const error = stagingError({ name: asset.name, mimeType, size }, accepted);
+      if (!error) accepted += 1;
+      nextId.current += 1;
+      added.push({ id: nextId.current, name: asset.name, size, mimeType, source, previewUri: fileKind(mimeType) === "image" ? asset.uri : null, state: error ? "error" : "uploading", attachment: null, error });
+    }
+    setStaged((files) => [...files, ...added]);
+    added.filter((file) => file.state === "uploading").forEach(upload);
+    const refused = added.filter((file) => file.state === "error").length;
+    const ok = added.length - refused;
+    announce(`${ok} file${ok === 1 ? "" : "s"} added${refused ? `, ${refused} can’t be sent` : ""}`);
+  }, [staged, upload]);
+
+  const pick = useCallback(() => {
+    attach().catch(() => toasts.show({ kind: "error", dismissible: true, message: "Couldn't open your files." }));
+  }, [attach, toasts]);
+
+  const ready = staged.flatMap((file) => (file.state === "ready" && file.attachment ? [file.attachment] : []));
+  const uploading = staged.some((file) => file.state === "uploading");
+  const message = text.trim();
+  const canSend = !uploading && (message.length > 0 || ready.length > 0);
+
+  const send = useCallback(() => {
+    if (!canSend) return;
+    const attachments: readonly ChatAttachment[] = ready;
+    setText("");
+    setStaged([]);
+    // A send that fails stays in the list as "Couldn’t send" with Retry, so nothing more is needed here.
+    client.chat.send({ text: message, attachments }).catch(() => undefined);
+  }, [canSend, client, message, ready]);
+
+  const padStyle = useAnimatedStyle(() => {
+    "worklet";
+    return { paddingBottom: keyboard.height.value > 0 ? 8 : layout.insets.bottom + 8 };
+  });
+
+  return (
+    <Animated.View style={[styles.composer, padStyle]} testID="chat.composer">
+      {staged.length > 0 ? (
+        <ScrollView accessibilityLabel="Files to send" contentContainerStyle={styles.stagedList} style={styles.staged} testID="chat.staged">
+          {staged.map((file) => (
+            <StagedChip file={file} key={file.id} onRemove={() => setStaged((files) => files.filter((other) => other.id !== file.id))} />
+          ))}
+        </ScrollView>
+      ) : null}
+      <View style={[styles.field, { backgroundColor: colors.raised, borderColor: focused ? colors.text : colors.line }]}>
+        <View style={styles.clip}>
+          <IconButton accessibilityLabel="Attach files" icon="clip" onPress={pick} size={36} testID="chat.attach" tone="ghost" />
+        </View>
+        <TextField
+          accessibilityLabel="Message everyone"
+          blurOnSubmit={false}
+          onBlur={() => setFocused(false)}
+          onChangeText={setText}
+          onFocus={() => setFocused(true)}
+          onSubmitEditing={send}
+          placeholder="Message everyone"
+          returnKeyType="send"
+          submitBehavior="submit"
+          testID="chat.input"
+          value={text}
+        />
+        <SendButton disabled={!canSend} onPress={send} />
+      </View>
+    </Animated.View>
+  );
+}
+
+function SendButton({ disabled, onPress }: { readonly disabled: boolean; readonly onPress: () => void }): React.JSX.Element {
+  const { colors } = useTheme();
+  const press = usePressAnimation("round");
+  return (
+    <Pressable accessibilityLabel="Send message" accessibilityRole="button" accessibilityState={{ disabled }} disabled={disabled} onPress={onPress} onPressIn={press.onPressIn} onPressOut={press.onPressOut} testID="chat.send">
+      <Animated.View style={[styles.send, { backgroundColor: disabled ? colors.hover : colors.text }, disabled ? null : press.scaleStyle]}>
+        <Icon color={disabled ? colors.textMuted : colors.canvas} name="up" size={18} />
+      </Animated.View>
+    </Pressable>
+  );
+}
+
+/** A file waiting to be sent (`.chip`): its preview, name and size or what's wrong, and Remove. */
+function StagedChip({ file, onRemove }: { readonly file: StagedFile; readonly onRemove: () => void }): React.JSX.Element {
+  const { colors } = useTheme();
+  const failed = file.state === "error";
+  const uploading = file.state === "uploading";
+  return (
+    <View accessible={false} style={[styles.chip, { backgroundColor: colors.raised, borderColor: failed ? colors.danger : colors.line }]} testID={`chat.staged.${file.id}`}>
+      <View style={[styles.chipPreview, failed ? styles.faded : null]}>
+        {file.previewUri && !failed ? <Image source={{ uri: file.previewUri }} style={styles.chipImage} /> : <FileBadge mimeType={file.mimeType} size={32} />}
+        {uploading ? (
+          <View style={[StyleSheet.absoluteFill, styles.chipShade]}>
+            <ActivityIndicator color={chatOverlays.ring} size="small" />
+          </View>
+        ) : null}
+      </View>
+      <View style={styles.chipText}>
+        <ChalkText numberOfLines={1} variant="button">
+          {file.name}
+        </ChalkText>
+        <ChalkText color={failed ? colors.dangerText : undefined} style={styles.chipDetail} tone="textMuted" variant="label">
+          {failed ? file.error : uploading ? `Uploading, ${formatSize(file.size)}` : formatSize(file.size)}
+        </ChalkText>
+      </View>
+      <Pressable accessibilityLabel={`Remove ${file.name}`} accessibilityRole="button" hitSlop={8} onPress={onRemove} style={({ pressed }) => [styles.remove, pressed ? { backgroundColor: colors.hover } : null]} testID={`chat.staged.remove.${file.id}`}>
+        <Icon color={colors.textMuted} name="x" size={16} />
+      </Pressable>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  composer: { paddingTop: 8, paddingHorizontal: 12 },
+  staged: { maxHeight: 196 },
+  stagedList: { gap: 4, paddingBottom: 8 },
+  field: { flexDirection: "row", alignItems: "center", height: 44, paddingHorizontal: 4, borderRadius: 999, borderWidth: 1 },
+  clip: { marginRight: 2 },
+  send: { width: 36, height: 36, borderRadius: 18, alignItems: "center", justifyContent: "center" },
+  chip: { minHeight: 44, flexDirection: "row", alignItems: "center", gap: 10, paddingTop: 4, paddingRight: 4, paddingBottom: 4, paddingLeft: 6, borderRadius: 12, borderWidth: 1 },
+  chipPreview: { width: 32, height: 32 },
+  chipImage: { width: 32, height: 32, borderRadius: 7 },
+  chipShade: { borderRadius: 7, backgroundColor: chatOverlays.uploading, alignItems: "center", justifyContent: "center" },
+  faded: { opacity: 0.5 },
+  chipText: { flex: 1, minWidth: 0, gap: 1 },
+  chipDetail: { fontFamily: fontFamilies[400], lineHeight: 15 },
+  remove: { width: 28, height: 28, borderRadius: 14, alignItems: "center", justifyContent: "center" },
+});

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

@@ -0,0 +1,100 @@
+import { useEffect, type RefObject } from "react";
+import { Pressable, StyleSheet, View } from "react-native";
+import { useSpaceClient } from "../../context/space-client-context";
+import { useChat, useParticipants } from "../../hooks/space-hooks";
+import { BottomSheet, SheetDragRegion } from "../../primitives/BottomSheet";
+import { ChalkText } from "../../primitives/ChalkText";
+import { IconButton } from "../../primitives/IconButton";
+import { useTheme } from "../../theme/theme";
+import { ChatTab } from "./ChatTab";
+import { PeopleTab } from "./PeopleTab";
+
+export type PeopleChatTab = "people" | "chat";
+
+export type PeopleChatSheetProps = {
+  readonly open: boolean;
+  readonly tab: PeopleChatTab;
+  readonly onTabChange: (tab: PeopleChatTab) => void;
+  readonly onClose: () => void;
+  /** Where accessibility focus returns when the sheet closes. */
+  readonly returnFocusRef?: RefObject<View | null>;
+};
+
+/**
+ * People and Chat share one card (`.card`): a 78 % sheet whose tab row switches between who is in
+ * the call and the call's chat. The tab row drags the sheet like the grabber does.
+ */
+export function PeopleChatSheet({ open, tab, onTabChange, onClose, returnFocusRef }: PeopleChatSheetProps): React.JSX.Element {
+  const { colors } = useTheme();
+  const { roster } = useParticipants();
+  const chat = useChat();
+  useMarkChatRead(open && tab === "chat");
+  const unread = chat.unreadCount > 0 && tab !== "chat";
+  return (
+    <BottomSheet accessibilityLabel="People and chat" heightRatio={0.78} onClose={onClose} open={open} returnFocusRef={returnFocusRef} testID="sheet.people" variant="card">
+      <SheetDragRegion>
+        <View accessibilityRole="tablist" style={[styles.tabs, { borderBottomColor: colors.line }]}>
+          <Tab label="People" count={roster.length} onPress={() => onTabChange("people")} selected={tab === "people"} testID="sheet.tab.people" />
+          <Tab label="Chat" onPress={() => onTabChange("chat")} selected={tab === "chat"} testID="sheet.tab.chat" unread={unread} />
+          <View style={styles.close}>
+            <IconButton accessibilityLabel="Close" icon="x" onPress={onClose} size={44} testID="sheet.people.close" tone="ghost" />
+          </View>
+        </View>
+      </SheetDragRegion>
+      {tab === "people" ? <PeopleTab /> : <ChatTab />}
+    </BottomSheet>
+  );
+}
+
+type TabProps = {
+  readonly label: string;
+  readonly selected: boolean;
+  readonly onPress: () => void;
+  readonly count?: number;
+  readonly unread?: boolean;
+  readonly testID: string;
+};
+
+function Tab({ label, selected, onPress, count, unread = false, testID }: TabProps): React.JSX.Element {
+  const { colors } = useTheme();
+  const accessibilityLabel = [count === undefined ? label : `${label}, ${count}`, unread ? "new messages" : null].filter(Boolean).join(", ");
+  return (
+    <Pressable accessibilityLabel={accessibilityLabel} accessibilityRole="tab" accessibilityState={{ selected }} onPress={onPress} style={styles.tab} testID={testID}>
+      <View style={styles.tabLabel}>
+        <ChalkText tone={selected ? "text" : "textMuted"} variant="bodyStrong">
+          {label}
+        </ChalkText>
+        {count === undefined ? null : (
+          <ChalkText style={styles.count} tabular tone="textMuted" variant="bodyMedium">
+            {count}
+          </ChalkText>
+        )}
+      </View>
+      {selected ? <View style={[styles.underline, { backgroundColor: colors.text }]} /> : null}
+      {unread ? <View style={[styles.unread, { backgroundColor: colors.info }]} testID={`${testID}.unread`} /> : null}
+    </Pressable>
+  );
+}
+
+/** While the Chat tab is in view, tells the server you've read up to the newest message. */
+function useMarkChatRead(reading: boolean): void {
+  const client = useSpaceClient();
+  const { messages, unreadCount } = useChat();
+  const last = messages[messages.length - 1]?.messageId;
+  useEffect(() => {
+    if (!reading || !last || unreadCount === 0) return;
+    // A lost read receipt only leaves the unread dot up; the next message marks it again.
+    client.chat.markRead(last).catch(() => undefined);
+  }, [client, last, reading, unreadCount]);
+}
+
+const styles = StyleSheet.create({
+  // `.tabs`: 4 pt above, 8 right, 10 left, a hairline under it.
+  tabs: { flexDirection: "row", alignItems: "center", gap: 4, paddingTop: 4, paddingRight: 8, paddingLeft: 10, borderBottomWidth: 1 },
+  tab: { height: 46, justifyContent: "center", paddingHorizontal: 10 },
+  tabLabel: { flexDirection: "row", alignItems: "center" },
+  count: { marginLeft: 5 },
+  underline: { position: "absolute", left: 10, right: 10, bottom: -1, height: 2, borderRadius: 2 },
+  unread: { position: "absolute", right: 0, top: 13, width: 7, height: 7, borderRadius: 4 },
+  close: { marginLeft: "auto" },
+});

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

@@ -0,0 +1,326 @@
+import type { AdmissionRequest, Participant } from "@q9labsai/chalk-client";
+import { memo, useCallback, useMemo, useRef, useState, type RefObject } from "react";
+import { FlatList, Pressable, StyleSheet, View, type ListRenderItemInfo } from "react-native";
+import Animated from "react-native-reanimated";
+import { FaceAvatar } from "../../avatar/FaceAvatar";
+import { useSpaceClient } from "../../context/space-client-context";
+import { Icon } from "../../icons/Icon";
+import { usePressAnimation } from "../../motion/press";
+import { useCan, useParticipants, useSelf } from "../../hooks/space-hooks";
+import { ChalkText } from "../../primitives/ChalkText";
+import { IconButton } from "../../primitives/IconButton";
+import { Menu, MenuItem } from "../../primitives/Menu";
+import { PillButton } from "../../primitives/PillButton";
+import { useToasts } from "../../primitives/toast/ToastStack";
+import { useTheme } from "../../theme/theme";
+import { fixed } from "../../theme/tokens";
+import { nextHandOrder, peopleRows, type PeopleRow } from "./people-model";
+import { TextField } from "./TextField";
+
+/** Past this many people the list gets a search field. */
+const SEARCH_FROM = 9;
+
+/** The People tab: who is waiting, raised hands, and everyone in the call, with the host's actions. */
+export function PeopleTab(): React.JSX.Element {
+  const client = useSpaceClient();
+  const toasts = useToasts();
+  const { colors } = useTheme();
+  const { roster, admissionQueue } = useParticipants();
+  const self = useSelf();
+  const canAdmit = useCan("manageAdmission");
+  const canMute = useCan("muteOthers");
+  const canRemove = useCan("removeParticipant");
+  const canRename = useCan("renameSelf");
+  const [query, setQuery] = useState("");
+  const [confirmMuteAll, setConfirmMuteAll] = useState(false);
+  const muteAllRef = useRef<View>(null);
+
+  const handOrder = useRef<readonly string[]>([]);
+  handOrder.current = useMemo(() => nextHandOrder(handOrder.current, roster), [roster]);
+  const waiting = canAdmit ? admissionQueue : NONE;
+  const rows = useMemo(() => peopleRows({ roster, waiting, handOrder: handOrder.current, query }), [roster, waiting, query]);
+
+  const failed = useCallback(
+    (what: string) => () => {
+      toasts.show({ kind: "error", dismissible: true, message: `Couldn't ${what}.` });
+    },
+    [toasts],
+  );
+  const admit = useCallback((request: AdmissionRequest) => client.participants.admit(request.requestId).catch(failed(`let ${request.displayName} in`)), [client, failed]);
+  const deny = useCallback((request: AdmissionRequest) => client.participants.deny(request.requestId).catch(failed(`deny ${request.displayName}`)), [client, failed]);
+  const mute = useCallback((participant: Participant) => client.participants.mute(participant.participantId).catch(failed(`mute ${participant.displayName}`)), [client, failed]);
+  const remove = useCallback((participant: Participant) => client.participants.remove(participant.participantId).catch(failed(`remove ${participant.displayName}`)), [client, failed]);
+  const rename = useCallback((name: string) => client.participants.renameSelf(name).catch(failed("change your name")), [client, failed]);
+
+  const loud = useMemo(() => roster.filter((participant) => participant.participantId !== self.participantId && participant.media.microphone === "active"), [roster, self.participantId]);
+  const muteAll = useCallback(() => {
+    setConfirmMuteAll(false);
+    Promise.all(loud.map((participant) => client.participants.mute(participant.participantId))).catch(failed("mute everyone"));
+  }, [client, failed, loud]);
+
+  const renderItem = useCallback(
+    ({ item }: ListRenderItemInfo<PeopleRow>) => {
+      switch (item.kind) {
+        case "section":
+          return <SectionLabel label={item.label} />;
+        case "waiting":
+          return <WaitingRow onAdmit={admit} onDeny={deny} request={item.request} />;
+        case "hand":
+          return <HandRow isSelf={item.participant.participantId === self.participantId} order={item.order} participant={item.participant} />;
+        case "none":
+          return (
+            <ChalkText style={styles.none} tone="textMuted" variant="meta">
+              {item.query ? `No one in the call matches “${item.query}”.` : "No one else is in the call."}
+            </ChalkText>
+          );
+        case "person": {
+          const isSelf = item.participant.participantId === self.participantId;
+          return <PersonRow canMute={canMute && !isSelf} canRemove={canRemove && !isSelf} canRename={canRename && isSelf} handNumber={item.handNumber} isSelf={isSelf} onMute={mute} onRemove={remove} onRename={rename} participant={item.participant} />;
+        }
+      }
+    },
+    [admit, canMute, canRemove, canRename, deny, mute, remove, rename, self.participantId],
+  );
+
+  const header = (
+    <View>
+      {canMute ? (
+        <View style={styles.controls}>
+          <HostChip disabled={loud.length === 0} expanded={confirmMuteAll} buttonRef={muteAllRef} onPress={() => setConfirmMuteAll(true)} />
+        </View>
+      ) : null}
+      {roster.length >= SEARCH_FROM ? (
+        <View style={[styles.search, { backgroundColor: colors.raised }]}>
+          <Icon color={colors.textMuted} name="search" size={16} />
+          <TextField accessibilityLabel="Search people" autoCapitalize="none" autoCorrect={false} onChangeText={setQuery} placeholder="Search people" returnKeyType="search" testID="people.search" value={query} />
+        </View>
+      ) : null}
+    </View>
+  );
+
+  return (
+    <>
+      <FlatList contentContainerStyle={styles.content} data={rows} initialNumToRender={12} keyboardShouldPersistTaps="handled" keyExtractor={(row) => row.key} ListHeaderComponent={header} maxToRenderPerBatch={12} renderItem={renderItem} style={styles.list} testID="people.list" windowSize={7} />
+      <Menu accessibilityLabel="Mute everyone" anchorRef={muteAllRef} minWidth={280} onClose={() => setConfirmMuteAll(false)} open={confirmMuteAll} testID="people.mute-all.confirm">
+        <View style={styles.confirm}>
+          <ChalkText variant="cardTitle">Mute everyone?</ChalkText>
+          <ChalkText style={styles.confirmText} tone="textSoft" variant="meta">
+            {`${loud.length} ${loud.length === 1 ? "person" : "people"} will be muted. They can unmute themselves.`}
+          </ChalkText>
+          <View style={styles.confirmButtons}>
+            <PillButton label="Cancel" onPress={() => setConfirmMuteAll(false)} size="sm" testID="people.mute-all.cancel" />
+            <PillButton label="Mute everyone" onPress={muteAll} size="sm" testID="people.mute-all.confirm-button" variant="primary" />
+          </View>
+        </View>
+      </Menu>
+    </>
+  );
+}
+
+const NONE: readonly AdmissionRequest[] = [];
+
+type HostChipProps = { readonly disabled: boolean; readonly expanded: boolean; readonly onPress: () => void; readonly buttonRef: RefObject<View | null> };
+
+/** `.hcb`: Mute everyone, dimmed once everyone else is muted. */
+function HostChip({ disabled, expanded, onPress, buttonRef }: HostChipProps): React.JSX.Element {
+  const { colors } = useTheme();
+  const press = usePressAnimation("pill");
+  return (
+    <Pressable accessibilityHint="Asks you to confirm" accessibilityLabel="Mute everyone" accessibilityRole="button" accessibilityState={{ disabled, expanded }} disabled={disabled} onPress={onPress} onPressIn={press.onPressIn} onPressOut={press.onPressOut} ref={buttonRef} testID="people.mute-all">
+      {({ pressed }) => (
+        <Animated.View style={[styles.chip, { backgroundColor: pressed || expanded ? colors.hover : colors.raised }, disabled ? styles.disabled : press.scaleStyle]}>
+          <Icon color={colors.textMuted} name="micOff" size={16} />
+          <ChalkText variant="button">Mute everyone</ChalkText>
+        </Animated.View>
+      )}
+    </Pressable>
+  );
+}
+
+const SectionLabel = memo(function SectionLabel({ label }: { readonly label: string }): React.JSX.Element {
+  return (
+    <View accessibilityRole="header" accessible style={styles.section}>
+      <ChalkText tone="textMuted" variant="section">
+        {label}
+      </ChalkText>
+    </View>
+  );
+});
+
+function Face({ name }: { readonly name: string }): React.JSX.Element {
+  return (
+    <View accessibilityElementsHidden importantForAccessibility="no-hide-descendants">
+      <FaceAvatar name={name} size={32} />
+    </View>
+  );
+}
+
+const WaitingRow = memo(function WaitingRow({ request, onAdmit, onDeny }: { readonly request: AdmissionRequest; readonly onAdmit: (request: AdmissionRequest) => void; readonly onDeny: (request: AdmissionRequest) => void }): React.JSX.Element {
+  return (
+    <View style={styles.row} testID={`people.waiting.${request.participantId}`}>
+      <Face name={request.displayName} />
+      <ChalkText numberOfLines={1} style={styles.name} variant="bodyMedium">
+        {request.displayName}
+      </ChalkText>
+      <PillButton accessibilityLabel={`Deny ${request.displayName}`} label="Deny" onPress={() => onDeny(request)} size="sm" testID={`people.deny.${request.participantId}`} />
+      <PillButton accessibilityLabel={`Let ${request.displayName} in`} label="Let in" onPress={() => onAdmit(request)} size="sm" testID={`people.admit.${request.participantId}`} variant="primary" />
+    </View>
+  );
+});
+
+const HandRow = memo(function HandRow({ participant, order, isSelf }: { readonly participant: Participant; readonly order: number; readonly isSelf: boolean }): React.JSX.Element {
+  return (
+    <View accessible accessibilityLabel={`${participant.displayName}${isSelf ? " (You)" : ""}, hand raised, number ${order}`} style={[styles.row, styles.handRow]} testID={`people.hand.${participant.participantId}`}>
+      <View style={styles.handNumber}>
+        <ChalkText color={fixed.handText} variant="section">
+          {order}
+        </ChalkText>
+      </View>
+      <Face name={participant.displayName} />
+      <ChalkText numberOfLines={1} style={styles.name} variant="bodyMedium">
+        {participant.displayName}
+        {isSelf ? (
+          <ChalkText tone="textMuted" variant="meta">
+            {"  (You)"}
+          </ChalkText>
+        ) : null}
+      </ChalkText>
+    </View>
+  );
+});
+
+type PersonRowProps = {
+  readonly participant: Participant;
+  readonly isSelf: boolean;
+  readonly handNumber: number | null;
+  readonly canMute: boolean;
+  readonly canRemove: boolean;
+  readonly canRename: boolean;
+  readonly onMute: (participant: Participant) => void;
+  readonly onRemove: (participant: Participant) => void;
+  readonly onRename: (name: string) => void;
+};
+
+const PersonRow = memo(function PersonRow({ participant, isSelf, handNumber, canMute, canRemove, canRename, onMute, onRemove, onRename }: PersonRowProps): React.JSX.Element {
+  const { colors } = useTheme();
+  const [menuOpen, setMenuOpen] = useState(false);
+  const [renaming, setRenaming] = useState(false);
+  const [draft, setDraft] = useState(participant.displayName);
+  const optionsRef = useRef<View>(null);
+  const host = participant.capabilities.includes("endEpisode");
+  const micOff = participant.media.microphone === "inactive";
+  const canMuteNow = canMute && participant.media.microphone === "active";
+  const hasOptions = canRename || canMuteNow || canRemove;
+
+  const save = () => {
+    const name = draft.trim();
+    setRenaming(false);
+    if (name && name !== participant.displayName) onRename(name);
+  };
+
+  if (renaming) {
+    return (
+      <View style={styles.row} testID="people.rename">
+        <Face name={participant.displayName} />
+        <View style={[styles.rename, { backgroundColor: colors.raised, boxShadow: `0px 0px 0px 2px ${colors.text}` }]}>
+          <TextField accessibilityLabel="Your name" autoFocus maxLength={40} onChangeText={setDraft} onSubmitEditing={save} returnKeyType="done" selectTextOnFocus testID="people.rename.input" value={draft} />
+        </View>
+        <PillButton label="Save" onPress={save} size="sm" testID="people.rename.save" variant="primary" />
+      </View>
+    );
+  }
+
+  const status = [isSelf ? "You" : null, host ? "Host" : null, participant.handRaised ? `hand raised${handNumber ? `, number ${handNumber}` : ""}` : null, micOff ? "microphone off" : null].filter(Boolean).join(", ");
+  return (
+    <View style={styles.row} testID={`people.row.${participant.participantId}`}>
+      <Face name={participant.displayName} />
+      <ChalkText accessibilityLabel={status ? `${participant.displayName}, ${status}` : participant.displayName} numberOfLines={1} style={styles.name} variant="bodyMedium">
+        {participant.displayName}
+        {isSelf ? (
+          <ChalkText tone="textMuted" variant="meta">
+            {"  (You)"}
+          </ChalkText>
+        ) : null}
+        {host ? (
+          <ChalkText tone="textMuted" variant="meta">
+            {"  Host"}
+          </ChalkText>
+        ) : null}
+      </ChalkText>
+      {participant.handRaised ? (
+        <View accessibilityElementsHidden importantForAccessibility="no-hide-descendants" style={styles.status}>
+          <Icon color={colors.warning} name="hand" size={16} />
+          {handNumber ? (
+            <ChalkText color={colors.warning} style={styles.statusNumber} variant="caption">
+              {handNumber}
+            </ChalkText>
+          ) : null}
+        </View>
+      ) : null}
+      {micOff ? (
+        <View accessibilityElementsHidden importantForAccessibility="no-hide-descendants" style={styles.status}>
+          <Icon color={colors.dangerText} name="micOff" size={16} />
+        </View>
+      ) : null}
+      {hasOptions ? <IconButton accessibilityLabel={`Options for ${participant.displayName}`} expanded={menuOpen} icon="more" onPress={() => setMenuOpen(true)} ref={optionsRef} size={36} testID={`people.options.${participant.participantId}`} tone="ghost" /> : null}
+      <Menu accessibilityLabel="Person options" anchorRef={optionsRef} onClose={() => setMenuOpen(false)} open={menuOpen} testID="people.menu">
+        {canRename ? (
+          <MenuItem
+            icon="edit"
+            label="Edit name"
+            onPress={() => {
+              setMenuOpen(false);
+              setDraft(participant.displayName);
+              setRenaming(true);
+            }}
+            testID="people.menu.rename"
+          />
+        ) : null}
+        {canMuteNow ? (
+          <MenuItem
+            icon="micOff"
+            label="Mute"
+            onPress={() => {
+              setMenuOpen(false);
+              onMute(participant);
+            }}
+            testID="people.menu.mute"
+          />
+        ) : null}
+        {canRemove ? (
+          <MenuItem
+            danger
+            icon="x"
+            label="Remove from call"
+            onPress={() => {
+              setMenuOpen(false);
+              onRemove(participant);
+            }}
+            testID="people.menu.remove"
+          />
+        ) : null}
+      </Menu>
+    </View>
+  );
+});
+
+const styles = StyleSheet.create({
+  list: { flex: 1 },
+  content: { padding: 8, paddingBottom: 16 },
+  controls: { flexDirection: "row", flexWrap: "wrap", gap: 6, marginHorizontal: 2, marginTop: 2, marginBottom: 8 },
+  chip: { flexDirection: "row", alignItems: "center", gap: 6, height: 36, paddingLeft: 10, paddingRight: 12, borderRadius: 999 },
+  disabled: { opacity: 0.45 },
+  search: { flexDirection: "row", alignItems: "center", gap: 8, height: 40, marginHorizontal: 2, marginTop: 2, marginBottom: 8, paddingHorizontal: 14, borderRadius: 999 },
+  section: { paddingTop: 10, paddingHorizontal: 8, paddingBottom: 6 },
+  none: { paddingVertical: 16, paddingHorizontal: 8 },
+  row: { flexDirection: "row", alignItems: "center", gap: 10, minHeight: 52, paddingLeft: 8, paddingRight: 4, borderRadius: 12 },
+  handRow: { gap: 8 },
+  name: { flex: 1 },
+  handNumber: { width: 20, height: 20, borderRadius: 10, alignItems: "center", justifyContent: "center", backgroundColor: fixed.hand },
+  status: { flexDirection: "row", alignItems: "center", justifyContent: "center" },
+  statusNumber: { marginLeft: 1, fontWeight: "700" },
+  rename: { flex: 1, flexDirection: "row", alignItems: "center", height: 36, paddingHorizontal: 12, borderRadius: 999 },
+  confirm: { paddingTop: 8, paddingHorizontal: 8, paddingBottom: 4 },
+  confirmText: { marginTop: 4, marginBottom: 10 },
+  confirmButtons: { flexDirection: "row", justifyContent: "flex-end", gap: 8, marginTop: 4, marginHorizontal: 6 },
+});