fix(mobile): projects without a favicon show a monogram, like desktop#22481

@@ -0,0 +1,142 @@
+import type { ProjectIconColor } from "@t3tools/contracts";
+import * as Effect from "effect/Effect";
+import { Atom } from "effect/reactivity";
+import { useSyncExternalStore } from "react";
+import { Platform, View } from "react-native";
+import Svg, { Rect, Text } from "react-native-svg";
+import { useResolveClassNames } from "uniwind";
+
+import { countGlyphs, projectIconColorClassNames, type ProjectIconGlyph } from "../lib/projectIcon";
+
+const TILE_SIZE = 48;
+
+interface PendingTile {
+  readonly key: string;
+  readonly glyph: ProjectIconGlyph;
+  readonly promise: Promise<string>;
+  readonly resolve: (uri: string) => void;
+  readonly reject: () => void;
+}
+
+const tiles = new Map<string, PendingTile>();
+let pendingTiles: ReadonlyArray<PendingTile> = [];
+const listeners = new Set<() => void>();
+
+export function projectGlyphKey(glyph: ProjectIconGlyph): string {
+  return JSON.stringify(
+    glyph.kind === "emoji" ? ["emoji", glyph.emoji] : ["monogram", glyph.text, glyph.color],
+  );
+}
+
+function decodeGlyphKey(key: string): ProjectIconGlyph {
+  const [kind, text, color] = JSON.parse(key) as [string, string, ProjectIconColor];
+  return kind === "emoji" ? { kind: "emoji", emoji: text } : { kind: "monogram", text, color };
+}
+
+function rasterize(key: string): Promise<string> {
+  const existing = tiles.get(key);
+  if (existing) return existing.promise;
+  let resolve!: (uri: string) => void;
+  let reject!: () => void;
+  const promise = new Promise<string>((done, fail) => {
+    resolve = done;
+    reject = fail;
+  });
+  const tile = { key, glyph: decodeGlyphKey(key), promise, resolve, reject };
+  tiles.set(key, tile);
+  pendingTiles = [...pendingTiles, tile];
+  queueMicrotask(notify);
+  return promise;
+}
+
+function finish(tile: PendingTile, base64: string | undefined) {
+  if (base64) {
+    tile.resolve(`data:image/png;base64,${base64.replace(/\s/g, "")}`);
+  } else {
+    tile.reject();
+  }
+  pendingTiles = pendingTiles.filter((pending) => pending !== tile);
+  notify();
+}
+
+function notify() {
+  for (const listener of listeners) listener();
+}
+
+function subscribe(listener: () => void) {
+  listeners.add(listener);
+  return () => listeners.delete(listener);
+}
+
+export const projectGlyphImageAtom = Atom.family((key: string) =>
+  Atom.make(Effect.tryPromise(() => rasterize(key))).pipe(
+    Atom.keepAlive,
+    Atom.withLabel(`mobile-project-glyph-image:${key}`),
+  ),
+);
+
+export function ProjectChipIconRasterizer() {
+  const pending = useSyncExternalStore(subscribe, () => pendingTiles);
+  return pending.map((tile) => <GlyphCapture key={tile.key} tile={tile} />);
+}
+
+function GlyphCapture(props: { readonly tile: PendingTile }) {
+  const capture = (svg: Svg | null) => {
+    if (!svg) return;
+    requestAnimationFrame(() =>
+      svg.toDataURL(
+        (base64?: string) => finish(props.tile, base64),
+        Platform.OS === "ios" ? { width: TILE_SIZE, height: TILE_SIZE } : undefined,
+      ),
+    );
+  };