@marktiderman/genesis-chat 0.1.1 → 0.2.1

package/src/native/emoji-picker.tsx

@@ -0,0 +1,229 @@
+/**
+ * @feat:chat
+ * The full emoji picker on genesis-ui-native: a search bar, a row of
+ * category tabs (Recent first once there are any), and a grid of emoji.
+ * Every emoji is bundled (`emoji-data.ts`) and drawn by the system font:
+ * opening it fetches nothing. Recent emoji are kept per person with their
+ * drafts (`modules.drafts`), so signing out clears them.
+ *
+ * `ChatEmojiPicker` is the content, for a sheet of your own (the long-press
+ * sheet's "+" swaps it in); `ChatEmojiPickerSheet` is it in a NativeSheet
+ * (the composer's emoji button).
+ */
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { FlatList, Pressable, View, useWindowDimensions } from "react-native";
+import { NativeEmptyState, NativeIcon, NativeSearchBar, NativeSheet, NativeText } from "@marktiderman/genesis-ui-native/components";
+import { useThemeRoles } from "@marktiderman/genesis-ui-native/hooks";
+import type { ChatNativeCopy } from "./copy";
+import { useChatNative } from "./context";
+import { EMOJI_CATEGORIES, emojiEntry, emojiInCategory, loadRecentEmoji, pushRecentEmoji, saveRecentEmoji, searchEmoji, type EmojiCategoryId, type EmojiEntry } from "./emoji";
+
+export interface ChatEmojiPickerProps {
+  onSelect: (emoji: string) => void;
+  /** The signed-in person, whose recent emoji are kept (with `modules.drafts`). Without it, none are kept. */
+  userId?: string | null;
+  /** Points tall for the grid. Default about 40% of the window. */
+  height?: number;
+  testID?: string;
+}
+
+type Tab = EmojiCategoryId | "recent";
+
+const CATEGORY_COPY: Record<EmojiCategoryId, keyof ChatNativeCopy> = {
+  smileys: "emojiSmileys",
+  people: "emojiPeople",
+  nature: "emojiNature",
+  food: "emojiFood",
+  travel: "emojiTravel",
+  activities: "emojiActivities",
+  objects: "emojiObjects",
+  symbols: "emojiSymbols",
+  flags: "emojiFlags",
+};
+
+const CELL = 44;
+
+// Recents read once per person per launch, then kept here as they change.
+const recentCache = new Map<string, string[]>();
+
+// Whose stored recents were read this launch (and merged into the cache).
+const loaded = new Set<string>();
+
+/** Forgets the recent emoji held in memory (one person's, or everyone's): call it on sign-out, with `clearDrafts`. */
+export function forgetRecentEmoji(userId?: string): void {
+  if (userId) {
+    recentCache.delete(userId);
+    loaded.delete(userId);
+  } else {
+    recentCache.clear();
+    loaded.clear();
+  }
+}
+
+export function ChatEmojiPicker({ onSelect, userId = null, height, testID = "chat-emoji-picker" }: ChatEmojiPickerProps) {
+  const { modules, copy } = useChatNative();
+  const colors = useThemeRoles();
+  const { width: windowWidth, height: windowHeight } = useWindowDimensions();
+  // Its own width once laid out (a sheet's padding), the window's until then.
+  const [width, setWidth] = useState(windowWidth);
+  const [query, setQuery] = useState("");
+  const [recents, setRecents] = useState<string[]>(() => (userId ? (recentCache.get(userId) ?? []) : []));
+  const [tab, setTab] = useState<Tab>(recents.length ? "recent" : "smileys");
+  const storage = modules.drafts;
+
+  useEffect(() => {
+    if (!userId || !storage || loaded.has(userId)) return;
+    loaded.add(userId);
+    let live = true;
+    void loadRecentEmoji(storage, userId).then((stored) => {
+      // Picked while it loaded: those come first, and the merged list is what's kept.
+      const picked = recentCache.get(userId) ?? [];
+      const list = picked.reduceRight((acc, e) => pushRecentEmoji(acc, e), stored);
+      recentCache.set(userId, list);
+      if (picked.length) void saveRecentEmoji(storage, userId, list);
+      if (!live || list.length === 0) return;
+      setRecents(list);
+      setTab((t) => (t === "smileys" ? "recent" : t));
+    });
+    return () => {
+      live = false;
+    };
+  }, [userId, storage]);
+
+  const columns = Math.max(6, Math.floor(width / CELL));
+  const gridHeight = height ?? Math.round(windowHeight * 0.4);
+  const searching = query.trim().length > 0;
+  const data: readonly EmojiEntry[] = useMemo(() => {
+    if (searching) return searchEmoji(query);
+    if (tab === "recent") return recents.map(emojiEntry);
+    return emojiInCategory(tab);
+  }, [searching, query, tab, recents]);
+
+  const listRef = useRef<{ scrollToOffset?: (o: { offset: number; animated: boolean }) => void } | null>(null);
+  const choose = useCallback(
+    (emoji: string) => {
+      onSelect(emoji);
+      if (!userId) return;
+      const next = pushRecentEmoji(recentCache.get(userId) ?? [], emoji);
+      // Kept for next time; the grid on screen doesn't reorder under the finger.
+      recentCache.set(userId, next);
+      if (storage) void saveRecentEmoji(storage, userId, next);
+    },
+    [onSelect, userId, storage],
+  );
+  // The columns share the width, so the grid fills it edge to edge.
+  const cellWidth = Math.floor(width / columns);
+  const renderItem = useCallback(
+    ({ item }: { item: EmojiEntry }) => <EmojiCell entry={item} width={cellWidth} onPress={choose} testID={`${testID}-emoji-${item.emoji}`} />,
+    [choose, testID, cellWidth],
+  );
+
+  const tabs: { id: Tab; label: string; icon: string | null }[] = [
+    ...(recents.length ? [{ id: "recent" as const, label: copy.recentEmoji, icon: null }] : []),
+    ...EMOJI_CATEGORIES.map((c) => ({ id: c.id, label: copy[CATEGORY_COPY[c.id]] as string, icon: c.icon })),
+  ];
+  const heading = searching ? null : (tabs.find((t) => t.id === tab)?.label ?? null);
+
+  return (
+    <View testID={testID} style={{ gap: 8 }} onLayout={(e) => e.nativeEvent.layout.width > 0 && setWidth(e.nativeEvent.layout.width)}>
+      <NativeSearchBar value={query} onChange={setQuery} placeholder={copy.searchEmoji} cancelLabel={copy.cancel} testID={`${testID}-search`} />
+      {searching ? null : (
+        <View accessibilityRole="tablist" testID={`${testID}-tabs`} style={{ flexDirection: "row", justifyContent: "space-between" }}>
+          {tabs.map((t) => {
+            const on = t.id === tab;
+            return (
+              <Pressable
+                key={t.id}
+                testID={`${testID}-tab-${t.id}`}
+                accessibilityRole="tab"
+                accessibilityLabel={t.label}
+                accessibilityState={{ selected: on }}
+                onPress={() => {
+                  setTab(t.id);
+                  listRef.current?.scrollToOffset?.({ offset: 0, animated: false });
+                }}
+                style={{ minWidth: 36, height: 44, flexGrow: 1, alignItems: "center", justifyContent: "center", borderRadius: 10, backgroundColor: on ? colors.fill : undefined }}
+              >
+                {t.icon ? (
+                  <NativeText style={{ fontSize: 20, lineHeight: 26, opacity: on ? 1 : 0.55 }}>{t.icon}</NativeText>
+                ) : (
+                  <NativeIcon name="clock" size={20} color={on ? colors.label : colors.secondaryLabel} />
+                )}
+              </Pressable>
+            );
+          })}
+        </View>
+      )}
+      {heading ? (
+        <NativeText preset="caption" accessibilityRole="header" style={{ color: colors.secondaryLabel, fontWeight: "600", paddingHorizontal: 4 }}>
+          {heading}
+        </NativeText>
+      ) : null}
+      <View style={{ height: gridHeight }}>
+        {data.length === 0 ? (
+          <NativeEmptyState variant="no-results" title={copy.noEmoji} testID={`${testID}-empty`} />
+        ) : (
+          <FlatList
+            ref={listRef as never}
+            key={columns}
+            testID={`${testID}-grid`}
+            data={data as EmojiEntry[]}
+            numColumns={columns}
+            keyExtractor={(e) => e.emoji}
+            renderItem={renderItem}
+            keyboardShouldPersistTaps="handled"
+            keyboardDismissMode="on-drag"
+            initialNumToRender={columns * 8}
+            // With numColumns, FlatList lays out rows: the index here is a row's.
+            getItemLayout={(_d, row) => ({ length: CELL, offset: CELL * row, index: row })}
+          />
+        )}
+      </View>
+    </View>
+  );
+}
+
+const EmojiCell = memo(function EmojiCell({ entry, width, onPress, testID }: { entry: EmojiEntry; width: number; onPress: (emoji: string) => void; testID: string }) {
+  return (
+    <Pressable
+      testID={testID}
+      accessibilityRole="button"
+      accessibilityLabel={entry.label}
+      onPress={() => onPress(entry.emoji)}
+      style={{ width: Math.max(CELL, width), height: CELL, alignItems: "center", justifyContent: "center" }}
+    >
+      {/* A line height of its own: the text preset's is a body line's and clips a 28pt glyph. */}
+      <NativeText style={{ fontSize: 28, lineHeight: 36 }} accessible={false}>
+        {entry.emoji}
+      </NativeText>
+    </Pressable>
+  );
+});
+
+export interface ChatEmojiPickerSheetProps extends Omit<ChatEmojiPickerProps, "onSelect"> {
+  open: boolean;
+  onClose: () => void;
+  /** An emoji was chosen. The sheet stays open, for another. */
+  onSelect: (emoji: string) => void;
+}
+
+/** The picker in a sheet, with a title and Done. */
+export function ChatEmojiPickerSheet({ open, onClose, onSelect, testID = "chat-emoji-sheet", ...rest }: ChatEmojiPickerSheetProps) {
+  const { copy } = useChatNative();
+  const colors = useThemeRoles();
+  return (
+    <NativeSheet open={open} onOpenChange={(o) => (o ? undefined : onClose())} testID={testID}>
+      <View style={{ gap: 4, paddingHorizontal: 16 }}>
+        <View style={{ flexDirection: "row", alignItems: "center", justifyContent: "space-between", minHeight: 44 }}>
+          <NativeText preset="h4" accessibilityRole="header">
+            {copy.emojiPicker}
+          </NativeText>
+          <Pressable testID={`${testID}-done`} accessibilityRole="button" accessibilityLabel={copy.closeViewer} onPress={onClose} style={{ minWidth: 44, minHeight: 44, alignItems: "center", justifyContent: "center" }}>
+            <NativeIcon name="close" size={22} color={colors.secondaryLabel} />
+          </Pressable>
+        </View>
+        {open ? <ChatEmojiPicker onSelect={onSelect} testID={`${testID}-picker`} {...rest} /> : null}
+      </View>
+    </NativeSheet>
+  );
+}

package/src/native/emoji.ts

@@ -0,0 +1,118 @@
+/**
+ * @feat:chat
+ * The emoji picker's logic, without React: the bundled emoji by category
+ * (`emoji-data.ts`, generated, never fetched), search over their labels and
+ * tags, and the person's recent emoji, kept with their drafts (so signing out
+ * clears them with the drafts, through `clearDrafts`).
+ */
+import { draftKey } from "./composer-state";
+import { EMOJI_GROUP_DATA } from "./emoji-data";
+import type { DraftStorageLike } from "./modules";
+
+export type EmojiCategoryId = keyof typeof EMOJI_GROUP_DATA;
+
+export interface EmojiEntry {
+  emoji: string;
+  label: string;
+  /** Search words beyond the label. */
+  tags: string;
+}
+
+/** The categories in the order the picker shows them, each with the emoji its tab shows. */
+export const EMOJI_CATEGORIES: readonly { id: EmojiCategoryId; icon: string }[] = [
+  { id: "smileys", icon: "😀" },
+  { id: "people", icon: "👋" },
+  { id: "nature", icon: "🐻" },
+  { id: "food", icon: "🍔" },
+  { id: "travel", icon: "🚗" },
+  { id: "activities", icon: "⚽" },
+  { id: "objects", icon: "💡" },
+  { id: "symbols", icon: "❤️" },
+  { id: "flags", icon: "🏳️" },
+];
+
+const parsed = new Map<EmojiCategoryId, EmojiEntry[]>();
+
+/** One category's emoji, parsed the first time it's asked for. */
+export function emojiInCategory(id: EmojiCategoryId): readonly EmojiEntry[] {
+  let list = parsed.get(id);
+  if (!list) {
+    list = EMOJI_GROUP_DATA[id].split("\n").map((line) => {
+      const [emoji = "", label = "", tags = ""] = line.split("\t");
+      return { emoji, label, tags };
+    });
+    parsed.set(id, list);
+  }
+  return list;
+}
+
+let index: Map<string, EmojiEntry> | null = null;
+function byEmoji(): Map<string, EmojiEntry> {
+  if (!index) {
+    index = new Map();
+    for (const c of EMOJI_CATEGORIES) for (const e of emojiInCategory(c.id)) index.set(e.emoji, e);
+  }
+  return index;
+}
+
+/** An emoji's entry (its label for screen readers), or a bare one for an emoji the data doesn't have. */
+export function emojiEntry(emoji: string): EmojiEntry {
+  return byEmoji().get(emoji) ?? { emoji, label: emoji, tags: "" };
+}
+
+/**
+ * Emoji whose label or tags have a word starting with every word of the query, those whose
+ * label starts with the query first. "thumbs up" finds 👍, "heart" every heart, "gri" 😀.
+ */
+export function searchEmoji(query: string, limit = 120): EmojiEntry[] {
+  const words = query.toLowerCase().trim().split(/\s+/).filter(Boolean);
+  if (words.length === 0) return [];
+  const whole = words.join(" ");
+  const first: EmojiEntry[] = [];
+  const rest: EmojiEntry[] = [];
+  for (const e of byEmoji().values()) {
+    const label = e.label.toLowerCase();
+    const hay = `${label} ${e.tags.toLowerCase()}`.split(/[^\p{L}\p{N}]+/u);
+    if (!words.every((w) => hay.some((h) => h.startsWith(w)))) continue;
+    (label.startsWith(whole) ? first : rest).push(e);
+  }
+  return [...first, ...rest].slice(0, limit);
+}
+
+/** How many recent emoji the picker keeps. */
+export const RECENT_EMOJI_MAX = 24;
+
+/** `emoji` first, once, the oldest dropped past `max`. */
+export function pushRecentEmoji(recents: readonly string[], emoji: string, max = RECENT_EMOJI_MAX): string[] {
+  return [emoji, ...recents.filter((e) => e !== emoji)].slice(0, max);
+}
+
+/** Where a person's recent emoji are kept: under their drafts' prefix, so `clearDrafts` removes them too. */
+export function recentEmojiKey(userId: string): string {
+  return draftKey(userId, "~recent-emoji");
+}
+
+export async function loadRecentEmoji(storage: DraftStorageLike, userId: string): Promise<string[]> {
+  try {
+    const raw = await storage.getItem(recentEmojiKey(userId));
+    const list: unknown = raw ? JSON.parse(raw) : [];
+    return Array.isArray(list) ? list.filter((e): e is string => typeof e === "string" && e.length > 0).slice(0, RECENT_EMOJI_MAX) : [];
+  } catch {
+    return [];
+  }
+}
+
+export async function saveRecentEmoji(storage: DraftStorageLike, userId: string, recents: readonly string[]): Promise<void> {
+  try {
+    await storage.setItem(recentEmojiKey(userId), JSON.stringify(recents.slice(0, RECENT_EMOJI_MAX)));
+  } catch {
+    // Recents are a convenience: losing them is not worth an error.
+  }
+}
+
+/** Puts `insert` in place of the selected text (or at the cursor), and where the cursor goes after it. */
+export function insertAtSelection(text: string, selection: { start: number; end: number } | null, insert: string): { text: string; cursor: number } {
+  const start = Math.max(0, Math.min(selection?.start ?? text.length, text.length));
+  const end = Math.max(start, Math.min(selection?.end ?? start, text.length));
+  return { text: text.slice(0, start) + insert + text.slice(end), cursor: start + insert.length };
+}

package/src/native/icon-button.tsx

@@ -0,0 +1,40 @@
+/**
+ * @feat:chat
+ * A 44-point icon button (a header's Search, the topic bar's options): genesis-ui-native's
+ * NativeIcon in a Pressable with its label, for VoiceOver and TalkBack.
+ */
+import { Pressable } from "react-native";
+import { NativeIcon, type NativeIconName } from "@marktiderman/genesis-ui-native/components";
+import { useThemeRoles } from "@marktiderman/genesis-ui-native/hooks";
+
+export interface ChatIconButtonProps {
+  icon: NativeIconName;
+  /** Read by screen readers (the button has no text). */
+  label: string;
+  onPress: () => void;
+  onLongPress?: () => void;
+  disabled?: boolean;
+  /** The theme's tint by default. */
+  color?: unknown;
+  size?: number;
+  testID?: string;
+}
+
+export function ChatIconButton({ icon, label, onPress, onLongPress, disabled = false, color, size = 22, testID }: ChatIconButtonProps) {
+  const colors = useThemeRoles();
+  return (
+    <Pressable
+      testID={testID}
+      accessibilityRole="button"
+      accessibilityLabel={label}
+      accessibilityState={{ disabled }}
+      disabled={disabled}
+      onPress={onPress}
+      onLongPress={onLongPress}
+      hitSlop={4}
+      style={{ minWidth: 44, minHeight: 44, alignItems: "center", justifyContent: "center", opacity: disabled ? 0.4 : 1 }}
+    >
+      <NativeIcon name={icon} size={size} color={(color ?? colors.tint) as string} />
+    </Pressable>
+  );
+}

package/src/native/inbox-screen.tsx

@@ -0,0 +1,122 @@
+/**
+ * @feat:chat
+ * Your conversations on genesis-ui-native's InboxPage: each with its avatar,
+ * unread count, last message and time; pull to refresh; an empty state that
+ * offers to start a conversation; Mark read, Pin and Archive on swipe, long
+ * press and as accessibility actions. Under the navigator's large title
+ * (`getInboxPageStackOptions`).
+ */
+import { useCallback, useMemo, useState } from "react";
+import { NativeAvatar } from "@marktiderman/genesis-ui-native/components";
+import { InboxPage, type InboxItem, type InboxPageProps } from "@marktiderman/genesis-ui-native/layouts";
+import type { ChatInboxItem } from "../core/types";
+import { chatKeys, useChat, useInbox, usePeople, type ChatAttachmentKind } from "../react/index";
+import { attachmentPreview } from "./attachment-cards";
+import { useQueryClient } from "@tanstack/react-query";
+import type { ChatNativeCopy } from "./copy";
+import { initials, useChatNative, type ChatPerson } from "./context";
+import { displayBody } from "./message-bubble";
+
+export interface ChatInboxScreenProps {
+  /** Opens a conversation (`router.push(chatPath(id))`). */
+  onOpen: (conversationId: string) => void;
+  /** Starts one (opens your people picker, or `ChatStartSheet`). Shows the empty state's button. */
+  onStart?: () => void;
+  /** One kind only. */
+  kind?: string;
+  /** Only these kinds. */
+  kinds?: string[];
+  /** Every kind but these (`["support"]` keeps support tickets out of a messages inbox). */
+  excludeKinds?: string[];
+  archived?: boolean;
+  /** Passed to InboxPage (a header, a section title, slots). */
+  pageProps?: Partial<Omit<InboxPageProps, "items">>;
+  testID?: string;
+}
+
+/** An inbox row from a conversation. Exported for apps that build their own list. */
+export function inboxRow(
+  item: ChatInboxItem,
+  ctx: {
+    me: string;
+    copy: ChatNativeCopy;
+    person: (id: string | null) => ChatPerson | undefined;
+    /** The app's attachment kinds: a last message that is a card reads as its title ("Check-in"). */
+    kinds?: Record<string, ChatAttachmentKind>;
+  },
+): Omit<InboxItem, "onPress" | "swipeActions"> {
+  const other = item.otherUserId ? ctx.person(item.otherUserId) : undefined;
+  const title = item.title ?? other?.name ?? ctx.copy.untitled;
+  const last = item.lastMessage;
+  const text = last ? attachmentPreview(displayBody(last.body), last.attachment, ctx.kinds, last.deleted) : "";
+  const preview = last && text && last.senderId === ctx.me && last.kind !== "system" ? `${ctx.copy.youPrefix}${text}` : text;
+  return {
+    id: item.conversationId,
+    title,
+    preview: preview || undefined,
+    timestamp: item.lastMessageAt ?? undefined,
+    unread: item.unread > 0,
+    unreadCount: item.unread,
+    meta: item.mentioned ? ctx.copy.mentionedYou : undefined,
+    avatar: <NativeAvatar size={40} src={other?.avatarUrl ?? null} fallback={initials(title)} alt={title} recyclingKey={item.conversationId} />,
+  };
+}
+
+export function ChatInboxScreen({ onOpen, onStart, kind, kinds, excludeKinds, archived, pageProps, testID = "chat-inbox" }: ChatInboxScreenProps) {
+  const { client, userId, attachmentKinds } = useChat();
+  const queryClient = useQueryClient();
+  const { copy, person: known } = useChatNative();
+  const inbox = useInbox({ kind, kinds, excludeKinds, archived });
+  // The other person in each direct conversation, fetched in one batch (ChatProvider loadPeople).
+  const others = useMemo(() => inbox.items.map((i) => i.otherUserId), [inbox.items]);
+  const people = usePeople(others);
+  const person = useCallback((id: string | null | undefined) => known(id) ?? (id ? people[id] : undefined), [known, people]);
+  const [refreshing, setRefreshing] = useState(false);
+
+  const refresh = useCallback(async () => {
+    setRefreshing(true);
+    try {
+      await inbox.refetch();
+    } finally {
+      setRefreshing(false);
+    }
+  }, [inbox]);
+
+  const settle = useCallback(() => {
+    void queryClient.invalidateQueries({ queryKey: ["genesis-chat", "inbox"] });
+    void queryClient.invalidateQueries({ queryKey: chatKeys.unread() });
+  }, [queryClient]);
+
+  const items: InboxItem[] = inbox.items.map((item) => ({
+    ...inboxRow(item, { me: userId, copy, person, kinds: attachmentKinds }),
+    onPress: () => onOpen(item.conversationId),
+    swipeActions: [
+      ...(item.unread > 0 ? [{ id: "read", label: copy.markRead, onPress: () => void client.markRead(item.conversationId).then(settle, settle) }] : []),
+      {
+        id: "pin",
+        label: item.pinned ? copy.unpin : copy.pin,
+        onPress: () => void client.setMySettings(item.conversationId, { pinned: !item.pinned }).then(settle, settle),
+      },
+      ...(item.archived
+        ? []
+        : [{ id: "archive", label: copy.archive, onPress: () => void client.setMySettings(item.conversationId, { archived: true }).then(settle, settle) }]),
+    ],
+  }));
+
+  return (
+    <InboxPage
+      testID={testID}
+      items={items}
+      loading={inbox.isLoading}
+      error={Boolean(inbox.error)}
+      errorTitle={copy.inboxErrorTitle}
+      refreshing={refreshing}
+      onRefresh={refresh}
+      emptyTitle={copy.inboxEmptyTitle}
+      emptyBody={copy.inboxEmptyBody}
+      emptyActionLabel={onStart ? copy.startConversation : undefined}
+      onEmptyAction={onStart}
+      {...pageProps}
+    />
+  );
+}