Files
buzz/mobile/scripts/generate-emoji-data.mjs
85edc0572a feat(mobile): desktop-parity emoji and thread experience (#3485)
Brings the Flutter app's emoji and thread surfaces up to desktop parity.

## Emoji

- **Full emoji-mart dataset** generated from the same `@emoji-mart/data`
set desktop uses (1,870 emoji, 8 categories), committed as an asset — so
shortcodes, names, and keywords are identical across clients. `just
mobile-emoji-data` regenerates it.
- **Rebuilt the tray**: search (a Dart port of desktop's tiered
`emojiSearch` ranking, extended to names and keywords), a
frequently-used section, and one continuous scroll with pinned section
headers. The category rail is a shortcut into that list, not a page
switcher, and spans the full width the search field uses. Custom emoji
share the native glyph size and cell.
- **Reaction pills** match desktop's geometry, and the count shows at 1.
- **Emoji-only messages** render at 36px with 1.45em inline custom
emoji, matching desktop's `emojiOnly` treatment.
- **Positive-emoji burst** ported from desktop's `EmojiBurstProvider`,
suppressed under reduced motion.

## Threads

- **Top-down layout** — head first under the app bar, replies flowing
down, like desktop's thread panel. The old reversed list bottom-anchored
the content and jammed the head against the composer.
- **Tap a channel message to open its thread**; long-press still opens
the action sheet.
- **Live reactions.** The thread's relay query is one-shot and its
`kinds` filter carries only content rows, so a reaction event could not
reach an open thread at all, and `allMessages` was a snapshot frozen
when the route was pushed — a new pill only appeared after leaving and
re-entering, which refetched. The live channel events are now unioned
into the thread's list. The burst is also route-guarded, since the
channel timeline stays mounted underneath and was claiming it first.
- The `+` affordance follows the channel: replies stay bare until they
carry a reaction, and the head keeps a standing `+`.

## Keyboard

A deliberate downward drag past ~48px dismisses the keyboard; short
scrolls leave it alone. Applies to the channel list, the thread list,
and the compose bar (via a raw `Listener`, so it can't steal the field's
tap or selection drags).

True finger-tracking dismissal is out of scope — Flutter only offers
`manual`/`onDrag`, and 1:1 tracking needs a native `UIScrollView` proxy
plus Android's `WindowInsetsAnimationController`.

## Testing

`just mobile-check` and `just mobile-test` pass (965 tests). New
coverage for emoji search ranking, dataset parsing, the emoji-only
predicate, tray scroll/rail behavior, reaction pills and the burst, and
both thread fixes above. `just ci` green.

---------

Signed-off-by: kenny lopez <klopez4212@gmail.com>
Signed-off-by: npub12zsjdqx8dud99s9h47xmk9lq93vryf7zjrae8wdrmma52cg5yglseyulst <50a12680c76f1a52c0b7af8dbb17e02c583227c290fb93b9a3defb456114223f@buzz.block.builderlab.xyz>
Signed-off-by: klopez4212 <klopez4212@gmail.com>
Co-authored-by: npub12zsjdqx8dud99s9h47xmk9lq93vryf7zjrae8wdrmma52cg5yglseyulst <50a12680c76f1a52c0b7af8dbb17e02c583227c290fb93b9a3defb456114223f@buzz.block.builderlab.xyz>
2026-07-30 07:29:40 -07:00

85 lines
3.2 KiB
JavaScript

/**
* Generate the mobile emoji dataset from emoji-mart.
*
* Desktop's emoji picker, autocomplete, and reaction display names all read
* `@emoji-mart/data/sets/15/native.json` (see
* `desktop/src/features/custom-emoji/ui/EmojiPicker.tsx` and
* `desktop/src/shared/lib/emojiName.ts`). Mobile can't consume the npm package,
* so this script projects the same source into a trimmed JSON asset that ships
* with the Flutter app. Same ids, same names, same keywords, same category
* order — so a `:shortcode:` means the same thing on both clients.
*
* The output is committed. Regenerate with `just mobile-emoji-data` after
* bumping the emoji-mart dependency.
*/
import { mkdirSync, readFileSync, writeFileSync } from "node:fs";
import path from "node:path";
import { fileURLToPath } from "node:url";
const __dirname = path.dirname(fileURLToPath(import.meta.url));
const mobileRoot = path.resolve(__dirname, "..");
const repoRoot = path.resolve(mobileRoot, "..");
const DATA_SUBPATH = "@emoji-mart/data/sets/15/native.json";
// `EMOJI_MART_DATA` lets a git worktree (which has no desktop/node_modules of
// its own) point at the main checkout's install instead of paying for a full
// `pnpm install` just to regenerate a committed asset.
const SOURCE =
process.env.EMOJI_MART_DATA ??
path.join(repoRoot, "desktop/node_modules", DATA_SUBPATH);
const OUTPUT = path.join(mobileRoot, "assets/emoji/emoji-data.json");
let raw;
try {
raw = readFileSync(SOURCE, "utf8");
} catch {
console.error(
`Missing emoji-mart data at ${SOURCE}.\n` +
"Run `pnpm install` in desktop/ first — this script projects the same\n" +
"dataset the desktop picker uses so the two clients cannot drift.\n" +
"From a worktree, point EMOJI_MART_DATA at the main checkout's copy:\n" +
` EMOJI_MART_DATA=<main-checkout>/desktop/node_modules/${DATA_SUBPATH}`,
);
process.exit(1);
}
const data = JSON.parse(raw);
// Category order is emoji-mart's own, which is the order desktop's picker
// renders. Preserve it verbatim rather than re-sorting.
const categories = data.categories.map((category) => ({
id: category.id,
emoji: category.emojis.filter((id) => {
const entry = data.emojis[id];
return Boolean(entry?.skins?.some((skin) => skin.native));
}),
}));
// Keys are deliberately short (`n`/`u`/`k`) — the map is ~1.9k entries and the
// asset ships in the app bundle.
const emoji = {};
for (const category of categories) {
for (const id of category.emoji) {
const entry = data.emojis[id];
emoji[id] = {
n: entry.name,
// Keep every skin variation. The app flattens these into selectable
// tiles and maps every glyph back to this desktop-identical shortcode.
u: entry.skins.map((skin) => skin.native).filter(Boolean),
k: entry.keywords ?? [],
};
}
}
const payload = { categories, emoji };
mkdirSync(path.dirname(OUTPUT), { recursive: true });
// Trailing newline keeps the file diff-friendly; no indentation because the
// asset is machine-read only and indentation would roughly double its size.
writeFileSync(OUTPUT, `${JSON.stringify(payload)}\n`, "utf8");
console.log(
`Wrote ${path.relative(repoRoot, OUTPUT)} — ` +
`${categories.length} categories, ${Object.keys(emoji).length} emoji.`,
);