feat(stickers): "recently used" row in the sticker picker

The emoji and GIF pickers both have a "Recent" row, but the sticker tab of the
shared EmojiBoard did not — you had to hunt through packs to re-send a sticker.
Add recent stickers, mirroring recentGifs:

- New state/recentStickers.ts (localStorage cinny_recent_stickers_v1, deduped by
  url, capped 16) + pure addRecentSticker with 4 unit tests.
- EmojiBoard: a "Recent" group in stickerGroupItems and a RecentClock sidebar
  icon in StickerSidebar, shown only when recents exist. Entries are rebuilt into
  minimal PackImageReaders (StickerItem needs only url/shortcode/body) so they
  render + re-send like pack stickers.
- Recorded on select in the shared delegated click handler, covering both the
  grouped and search paths.

Blast radius is the sticker tab only (reactions/status use the emoji tab).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

src/app/state/recentStickers.test.ts

@@ -0,0 +1,47 @@
+import { test } from 'node:test';
+import assert from 'node:assert/strict';
+
+// The module evaluates atomWithStorage(..., { getOnInit: true }), which reads
+// localStorage at load time. node has none, so install a no-op mock, then import
+// dynamically (a static import would hoist above the mock and evaluate too early).
+(globalThis as { localStorage?: unknown }).localStorage = {
+  getItem: () => null,
+  setItem: () => undefined,
+  removeItem: () => undefined,
+};
+
+const { addRecentSticker } = await import('./recentStickers');
+
+const st = (url: string, shortcode = url, body = url) => ({ url, shortcode, body });
+
+test('addRecentSticker prepends a new sticker', () => {
+  const out = addRecentSticker([st('a'), st('b')], st('c'));
+  assert.deepEqual(
+    out.map((s) => s.url),
+    ['c', 'a', 'b']
+  );
+});
+
+test('addRecentSticker de-dupes by url, moving the existing one to the front', () => {
+  const out = addRecentSticker([st('a'), st('b'), st('c')], st('c'));
+  assert.deepEqual(
+    out.map((s) => s.url),
+    ['c', 'a', 'b']
+  );
+  assert.equal(out.length, 3);
+});
+
+test('addRecentSticker caps the list at max (newest kept)', () => {
+  const start = [st('a'), st('b'), st('c')];
+  const out = addRecentSticker(start, st('d'), 3);
+  assert.deepEqual(
+    out.map((s) => s.url),
+    ['d', 'a', 'b']
+  );
+});
+
+test('addRecentSticker ignores an empty url', () => {
+  const start = [st('a')];
+  const out = addRecentSticker(start, st(''));
+  assert.equal(out, start); // returns the same array unchanged
+});

src/app/state/recentStickers.ts

@@ -0,0 +1,50 @@
+import { atom } from 'jotai';
+import { atomWithStorage, createJSONStorage } from 'jotai/utils';
+
+export type RecentSticker = {
+  /** mxc:// url of the sticker image. */
+  url: string;
+  shortcode: string;
+  body?: string;
+};
+
+const STORAGE_KEY = 'cinny_recent_stickers_v1';
+const MAX_RECENT_STICKERS = 16;
+
+// getOnInit reads localStorage synchronously so the Recent group is present on the
+// first render of the sticker picker (no flash of the empty default).
+const internalAtom = atomWithStorage<RecentSticker[]>(
+  STORAGE_KEY,
+  [],
+  createJSONStorage(() => localStorage),
+  { getOnInit: true },
+);
+
+/**
+ * Global atom: the most recently sent stickers, newest first, deduped by url,
+ * capped at MAX_RECENT_STICKERS. Backed by localStorage (device-local
+ * convenience), mirroring `recentGifsAtom`.
+ */
+export const recentStickersAtom = atom(
+  (get): RecentSticker[] => get(internalAtom),
+  (_get, set, updater: RecentSticker[] | ((prev: RecentSticker[]) => RecentSticker[])) => {
+    set(internalAtom, (prev) => {
+      const prevList = Array.isArray(prev) ? prev : [];
+      return typeof updater === 'function' ? updater(prevList) : updater;
+    });
+  }
+);
+
+/**
+ * Prepend a sticker: ignores an empty url, de-dupes by url (moving an existing
+ * entry to the front), and caps the list at `max`. Pure — returns a new array.
+ */
+export const addRecentSticker = (
+  prev: RecentSticker[],
+  sticker: RecentSticker,
+  max = MAX_RECENT_STICKERS
+): RecentSticker[] => {
+  if (!sticker.url) return prev;
+  const withoutDupe = prev.filter((s) => s.url !== sticker.url);
+  return [sticker, ...withoutDupe].slice(0, max);
+};