mirror of
https://github.com/block/buzz.git
synced 2026-10-27 04:30:52 +00: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>
215 lines
6.9 KiB
Dart
215 lines
6.9 KiB
Dart
/// Emoji search for the mobile picker and reaction tray.
|
|
///
|
|
/// Ported from `desktop/src/shared/lib/emojiSearch.ts`, which exists because
|
|
/// emoji-mart's own search is token-prefix based and so can't cross the `_` in
|
|
/// a shortcode — `pointup` never finds `point_up`. The tiers keep ordinary
|
|
/// queries ranked the way you'd expect while still surfacing looser matches
|
|
/// last: exact > prefix > substring > subsequence over the shortcode.
|
|
///
|
|
/// Mobile extends the desktop tiers with name/keyword matching, because the
|
|
/// tray replaces emoji-mart's picker (which searched names and keywords) rather
|
|
/// than just its `:shortcode` autocomplete. Shortcode hits still outrank
|
|
/// keyword hits, so typing a shortcode you know never buries it.
|
|
library;
|
|
|
|
import 'emoji_data.dart';
|
|
|
|
// Lower tier = stronger match.
|
|
const _tierExact = 0;
|
|
const _tierShortcodePrefix = 1;
|
|
const _tierKeywordPrefix = 2;
|
|
const _tierShortcodeSubstring = 3;
|
|
const _tierKeywordSubstring = 4;
|
|
const _tierSubsequence = 5;
|
|
|
|
/// Sentinel ranking worse than every real tier.
|
|
const _noMatch = 1 << 20;
|
|
|
|
final _separators = RegExp(r'[:_\s-]');
|
|
final _wordSplit = RegExp(r'[\s_-]+');
|
|
|
|
/// Lowercase and drop separators (`:`, `_`, `-`, whitespace) so matching is
|
|
/// insensitive to shortcode punctuation. `point_up` and `pointup` collapse to
|
|
/// the same normalized form.
|
|
///
|
|
/// Named for what it does rather than desktop's `normalizeShortcode`, because
|
|
/// `custom_emoji.dart` already exports a validating `normalizeShortcode` with
|
|
/// different semantics (it returns null for malformed input).
|
|
String collapseSeparators(String value) {
|
|
return value.toLowerCase().replaceAll(_separators, '');
|
|
}
|
|
|
|
/// A ranked match. [score] is a within-tier tiebreak — lower is better.
|
|
class EmojiMatch {
|
|
final int tier;
|
|
final int score;
|
|
|
|
const EmojiMatch({required this.tier, required this.score});
|
|
}
|
|
|
|
/// If [query] is a subsequence of [target] (all chars in order, gaps allowed),
|
|
/// return the span of the match as a tightness score — smaller is tighter.
|
|
/// Returns null when it isn't a subsequence.
|
|
int? _subsequenceSpan(String query, String target) {
|
|
var first = -1;
|
|
var last = -1;
|
|
var qi = 0;
|
|
for (var ti = 0; ti < target.length && qi < query.length; ti++) {
|
|
if (target[ti] == query[qi]) {
|
|
if (first == -1) first = ti;
|
|
last = ti;
|
|
qi++;
|
|
}
|
|
}
|
|
if (qi < query.length) return null;
|
|
return last - first;
|
|
}
|
|
|
|
/// Score [query] against a single [shortcode]. Returns null when there is no
|
|
/// match at any tier. Both sides are normalized first, so separators are
|
|
/// ignored. This is the desktop-identical half of the ranking.
|
|
EmojiMatch? scoreShortcodeMatch(String query, String shortcode) {
|
|
final q = collapseSeparators(query);
|
|
if (q.isEmpty) return null;
|
|
final target = collapseSeparators(shortcode);
|
|
if (target.isEmpty) return null;
|
|
|
|
if (q == target) return const EmojiMatch(tier: _tierExact, score: 0);
|
|
if (target.startsWith(q)) {
|
|
return const EmojiMatch(tier: _tierShortcodePrefix, score: 0);
|
|
}
|
|
final index = target.indexOf(q);
|
|
if (index != -1) {
|
|
return EmojiMatch(tier: _tierShortcodeSubstring, score: index);
|
|
}
|
|
final span = _subsequenceSpan(q, target);
|
|
if (span != null) return EmojiMatch(tier: _tierSubsequence, score: span);
|
|
return null;
|
|
}
|
|
|
|
/// Score [query] against an entry's name and keywords, word by word. Used to
|
|
/// top up shortcode matching so a query like `smiling` finds emoji whose
|
|
/// shortcode doesn't contain it.
|
|
EmojiMatch? _scoreKeywordMatch(
|
|
String query,
|
|
String name,
|
|
List<String> keywords,
|
|
) {
|
|
final q = query.toLowerCase().trim();
|
|
if (q.isEmpty) return null;
|
|
|
|
var bestTier = _noMatch;
|
|
var bestScore = 0;
|
|
|
|
// Earlier words rank better: the name comes before the keywords, and within
|
|
// each the dataset's own order is meaningful.
|
|
void consider(String candidate, int wordIndex) {
|
|
if (bestTier == _tierKeywordPrefix) return;
|
|
final word = candidate.toLowerCase();
|
|
if (word.isEmpty) return;
|
|
final tier = word.startsWith(q)
|
|
? _tierKeywordPrefix
|
|
: word.contains(q)
|
|
? _tierKeywordSubstring
|
|
: _noMatch;
|
|
if (tier < bestTier) {
|
|
bestTier = tier;
|
|
bestScore = wordIndex;
|
|
}
|
|
}
|
|
|
|
var wordIndex = 0;
|
|
for (final word in name.split(_wordSplit)) {
|
|
consider(word, wordIndex++);
|
|
}
|
|
for (final keyword in keywords) {
|
|
for (final word in keyword.split(_wordSplit)) {
|
|
consider(word, wordIndex++);
|
|
}
|
|
}
|
|
|
|
if (bestTier == _noMatch) return null;
|
|
return EmojiMatch(tier: bestTier, score: bestScore);
|
|
}
|
|
|
|
class _Scored<T> {
|
|
final T item;
|
|
final int tier;
|
|
final int score;
|
|
final String code;
|
|
|
|
const _Scored({
|
|
required this.item,
|
|
required this.tier,
|
|
required this.score,
|
|
required this.code,
|
|
});
|
|
}
|
|
|
|
int _compare<T>(_Scored<T> a, _Scored<T> b) {
|
|
if (a.tier != b.tier) return a.tier - b.tier;
|
|
if (a.score != b.score) return a.score - b.score;
|
|
// Shorter shortcode is the more specific match, then alphabetical for a
|
|
// stable result.
|
|
if (a.code.length != b.code.length) return a.code.length - b.code.length;
|
|
return a.code.compareTo(b.code);
|
|
}
|
|
|
|
/// Rank [items] by how well their shortcode matches [query], best first, capped
|
|
/// at [limit]. Mirrors desktop's `rankByShortcode` — used for the custom-emoji
|
|
/// palette, which has no names or keywords.
|
|
List<T> rankByShortcode<T>(
|
|
String query,
|
|
List<T> items,
|
|
String Function(T item) shortcodeOf, {
|
|
int? limit,
|
|
}) {
|
|
if (limit != null && limit <= 0) return const [];
|
|
final scored = <_Scored<T>>[];
|
|
for (final item in items) {
|
|
final code = shortcodeOf(item);
|
|
final match = scoreShortcodeMatch(query, code);
|
|
if (match == null) continue;
|
|
scored.add(
|
|
_Scored(item: item, tier: match.tier, score: match.score, code: code),
|
|
);
|
|
}
|
|
scored.sort(_compare);
|
|
final ranked = scored.map((entry) => entry.item).toList();
|
|
if (limit == null || ranked.length <= limit) return ranked;
|
|
return ranked.sublist(0, limit);
|
|
}
|
|
|
|
/// Rank standard emoji by shortcode, name, and keywords, best first.
|
|
List<EmojiEntry> searchEmoji(
|
|
String query,
|
|
List<EmojiEntry> entries, {
|
|
int? limit,
|
|
}) {
|
|
if (limit != null && limit <= 0) return const [];
|
|
final scored = <_Scored<EmojiEntry>>[];
|
|
for (final entry in entries) {
|
|
final shortcode = scoreShortcodeMatch(query, entry.id);
|
|
final keyword = _scoreKeywordMatch(query, entry.name, entry.keywords);
|
|
final match = switch ((shortcode, keyword)) {
|
|
(null, null) => null,
|
|
(final EmojiMatch only, null) => only,
|
|
(null, final EmojiMatch only) => only,
|
|
(final EmojiMatch a, final EmojiMatch b) => a.tier <= b.tier ? a : b,
|
|
};
|
|
if (match == null) continue;
|
|
scored.add(
|
|
_Scored(
|
|
item: entry,
|
|
tier: match.tier,
|
|
score: match.score,
|
|
code: entry.id,
|
|
),
|
|
);
|
|
}
|
|
scored.sort(_compare);
|
|
final ranked = scored.map((entry) => entry.item).toList();
|
|
if (limit == null || ranked.length <= limit) return ranked;
|
|
return ranked.sublist(0, limit);
|
|
}
|