mirror of
https://github.com/block/buzz.git
synced 2026-08-18 06:50:31 +02:00
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>
85 lines
3.2 KiB
JavaScript
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.`,
|
|
);
|