emoji [nfc]: Move "how to show this emoji" logic to EmojiStore

This will apply in other places we show an emoji, too,
such as the emoji picker.

What, you might ask, about the other place we already show emoji,
namely in message content?  We should probably apply this logic
there too, but we'll leave that for later.  Tracking it as issue #966.

Author: gnprice

lib/model/emoji.dart

@@ -1,11 +1,66 @@
 import '../api/model/events.dart';
+import '../api/model/initial_snapshot.dart';
 import '../api/model/model.dart';
 
+/// An emoji, described by how to display it in the UI.
+sealed class EmojiDisplay {
+  /// The emoji's name, as in [Reaction.emojiName].
+  final String emojiName;
+
+  EmojiDisplay({required this.emojiName});
+
+  EmojiDisplay resolve(UserSettings? userSettings) { // TODO(server-5)
+    if (this is TextEmojiDisplay) return this;
+    if (userSettings?.emojiset == Emojiset.text) {
+      return TextEmojiDisplay(emojiName: emojiName);
+    }
+    return this;
+  }
+}
+
+/// An emoji to display as Unicode text, relying on an emoji font.
+class UnicodeEmojiDisplay extends EmojiDisplay {
+  /// The actual Unicode text representing this emoji; for example, "🙂".
+  final String emojiUnicode;
+
+  UnicodeEmojiDisplay({required super.emojiName, required this.emojiUnicode});
+}
+
+/// An emoji to display as an image.
+class ImageEmojiDisplay extends EmojiDisplay {
+  /// An absolute URL for the emoji's image file.
+  final Uri resolvedUrl;
+
+  /// An absolute URL for a still version of the emoji's image file;
+  /// compare [RealmEmojiItem.stillUrl].
+  final Uri? resolvedStillUrl;
+
+  ImageEmojiDisplay({
+    required super.emojiName,
+    required this.resolvedUrl,
+    required this.resolvedStillUrl,
+  });
+}
+
+/// An emoji to display as its name, in plain text.
+///
+/// We do this based on a user preference,
+/// and as a fallback when the Unicode or image approaches fail.
+class TextEmojiDisplay extends EmojiDisplay {
+  TextEmojiDisplay({required super.emojiName});
+}
+
 /// The portion of [PerAccountStore] describing what emoji exist.
 mixin EmojiStore {
   /// The realm's custom emoji (for [ReactionType.realmEmoji],
   /// indexed by [Reaction.emojiCode].
   Map<String, RealmEmojiItem> get realmEmoji;
+
+  EmojiDisplay emojiDisplayFor({
+    required ReactionType emojiType,
+    required String emojiCode,
+    required String emojiName,
+  });
 }
 
 /// The implementation of [EmojiStore] that does the work.
@@ -25,6 +80,57 @@ class EmojiStoreImpl with EmojiStore {
   @override
   Map<String, RealmEmojiItem> realmEmoji;
 
+  /// The realm-relative URL of the unique "Zulip extra emoji", :zulip:.
+  static const kZulipEmojiUrl = '/static/generated/emoji/images/emoji/unicode/zulip.png';
+
+  @override
+  EmojiDisplay emojiDisplayFor({
+    required ReactionType emojiType,
+    required String emojiCode,
+    required String emojiName,
+  }) {
+    switch (emojiType) {
+      case ReactionType.unicodeEmoji:
+        final parsed = tryParseEmojiCodeToUnicode(emojiCode);
+        if (parsed == null) break;
+        return UnicodeEmojiDisplay(emojiName: emojiName, emojiUnicode: parsed);
+
+      case ReactionType.realmEmoji:
+        final item = realmEmoji[emojiCode];
+        if (item == null) break;
+        // TODO we don't check emojiName matches the known realm emoji; is that right?
+        return _tryImageEmojiDisplay(
+          sourceUrl: item.sourceUrl, stillUrl: item.stillUrl,
+          emojiName: emojiName);
+
+      case ReactionType.zulipExtraEmoji:
+        return _tryImageEmojiDisplay(
+          sourceUrl: kZulipEmojiUrl, stillUrl: null, emojiName: emojiName);
+    }
+    return TextEmojiDisplay(emojiName: emojiName);
+  }
+
+  EmojiDisplay _tryImageEmojiDisplay({
+    required String sourceUrl,
+    required String? stillUrl,
+    required String emojiName,
+  }) {
+    final source = Uri.tryParse(sourceUrl);
+    if (source == null) return TextEmojiDisplay(emojiName: emojiName);
+
+    Uri? still;
+    if (stillUrl != null) {
+      still = Uri.tryParse(stillUrl);
+      if (still == null) return TextEmojiDisplay(emojiName: emojiName);
+    }
+
+    return ImageEmojiDisplay(
+      emojiName: emojiName,
+      resolvedUrl: realmUrl.resolveUri(source),
+      resolvedStillUrl: still == null ? null : realmUrl.resolveUri(still),
+    );
+  }
+
   void handleRealmEmojiUpdateEvent(RealmEmojiUpdateEvent event) {
     realmEmoji = event.realmEmoji;
   }

lib/model/store.dart

@@ -335,6 +335,16 @@ class PerAccountStore extends ChangeNotifier with EmojiStore, ChannelStore, Mess
   @override
   Map<String, RealmEmojiItem> get realmEmoji => _emoji.realmEmoji;
 
+  @override
+  EmojiDisplay emojiDisplayFor({
+    required ReactionType emojiType,
+    required String emojiCode,
+    required String emojiName
+  }) {
+    return _emoji.emojiDisplayFor(
+      emojiType: emojiType, emojiCode: emojiCode, emojiName: emojiName);
+  }
+
   EmojiStoreImpl _emoji;
 
   ////////////////////////////////

lib/widgets/emoji_reaction.dart

@@ -3,6 +3,7 @@ import 'package:flutter/material.dart';
 
 import '../api/model/model.dart';
 import '../api/route/messages.dart';
+import '../model/emoji.dart';
 import 'content.dart';
 import 'store.dart';
 import 'text.dart';
@@ -148,8 +149,6 @@ class ReactionChip extends StatelessWidget {
     final emojiName = reactionWithVotes.emojiName;
     final userIds = reactionWithVotes.userIds;
 
-    final emojiset = store.userSettings?.emojiset ?? Emojiset.google;
-
     final selfVoted = userIds.contains(store.selfUserId);
     final label = showName
       // TODO(i18n): List formatting, like you can do in JavaScript:
@@ -175,26 +174,20 @@ class ReactionChip extends StatelessWidget {
     );
     final shape = StadiumBorder(side: borderSide);
 
-    final Widget emoji;
-    if (emojiset == Emojiset.text) {
-      emoji = _TextEmoji(emojiName: emojiName, selected: selfVoted);
-    } else {
-      switch (reactionType) {
-        case ReactionType.unicodeEmoji:
-          emoji = _UnicodeEmoji(
-            emojiCode: emojiCode,
-            emojiName: emojiName,
-            selected: selfVoted,
-          );
-        case ReactionType.realmEmoji:
-        case ReactionType.zulipExtraEmoji:
-          emoji = _ImageEmoji(
-            emojiCode: emojiCode,
-            emojiName: emojiName,
-            selected: selfVoted,
-          );
-      }
-    }
+    final emojiDisplay = store.emojiDisplayFor(
+      emojiType: reactionType,
+      emojiCode: emojiCode,
+      emojiName: emojiName,
+    ).resolve(store.userSettings);
+
+    final emoji = switch (emojiDisplay) {
+      UnicodeEmojiDisplay() => _UnicodeEmoji(
+        emojiDisplay: emojiDisplay, selected: selfVoted),
+      ImageEmojiDisplay() => _ImageEmoji(
+        emojiDisplay: emojiDisplay, emojiName: emojiName, selected: selfVoted),
+      TextEmojiDisplay() => _TextEmoji(
+        emojiDisplay: emojiDisplay, selected: selfVoted),
+    };
 
     return Tooltip(
       // TODO(#434): Semantics with eg "Reaction: <emoji name>; you and N others: <names>"
@@ -301,22 +294,15 @@ TextScaler _labelTextScalerClamped(BuildContext context) =>
 
 class _UnicodeEmoji extends StatelessWidget {
   const _UnicodeEmoji({
-    required this.emojiCode,
-    required this.emojiName,
+    required this.emojiDisplay,
     required this.selected,
   });
 
-  final String emojiCode;
-  final String emojiName;
+  final UnicodeEmojiDisplay emojiDisplay;
   final bool selected;
 
   @override
   Widget build(BuildContext context) {
-    final parsed = tryParseEmojiCodeToUnicode(emojiCode);
-    if (parsed == null) { // TODO(log)
-      return _TextEmoji(emojiName: emojiName, selected: selected);
-    }
-
     switch (defaultTargetPlatform) {
       case TargetPlatform.android:
       case TargetPlatform.fuchsia:
@@ -329,7 +315,7 @@ class _UnicodeEmoji extends StatelessWidget {
             fontSize: _notoColorEmojiTextSize,
           ),
           strutStyle: const StrutStyle(fontSize: _notoColorEmojiTextSize, forceStrutHeight: true),
-          parsed);
+          emojiDisplay.emojiUnicode);
       case TargetPlatform.iOS:
       case TargetPlatform.macOS:
         // We expect the font "Apple Color Emoji" to be used. There are some
@@ -355,29 +341,25 @@ class _UnicodeEmoji extends StatelessWidget {
             textScaler: _squareEmojiScalerClamped(context),
             style: const TextStyle(fontSize: _squareEmojiSize),
             strutStyle: const StrutStyle(fontSize: _squareEmojiSize, forceStrutHeight: true),
-            parsed)),
+            emojiDisplay.emojiUnicode)),
         ]);
     }
   }
 }
 
 class _ImageEmoji extends StatelessWidget {
   const _ImageEmoji({
-    required this.emojiCode,
+    required this.emojiDisplay,
     required this.emojiName,
     required this.selected,
   });
 
-  final String emojiCode;
+  final ImageEmojiDisplay emojiDisplay;
   final String emojiName;
   final bool selected;
 
-  Widget get _textFallback => _TextEmoji(emojiName: emojiName, selected: selected);
-
   @override
   Widget build(BuildContext context) {
-    final store = PerAccountStoreWidget.of(context);
-
     // Some people really dislike animated emoji.
     final doNotAnimate =
       // From reading code, this doesn't actually get set on iOS:
@@ -390,43 +372,33 @@ class _ImageEmoji extends StatelessWidget {
         //   See GitHub comment linked above.
         && WidgetsBinding.instance.platformDispatcher.accessibilityFeatures.reduceMotion);
 
-    final String src;
-    switch (emojiCode) {
-      case 'zulip': // the single "zulip extra emoji"
-        src = '/static/generated/emoji/images/emoji/unicode/zulip.png';
-      default:
-        final item = store.realmEmoji[emojiCode];
-        if (item == null) {
-          return _textFallback;
-        }
-        src = doNotAnimate && item.stillUrl != null ? item.stillUrl! : item.sourceUrl;
-    }
-    final parsedSrc = Uri.tryParse(src);
-    if (parsedSrc == null) { // TODO(log)
-      return _textFallback;
-    }
-    final resolved = store.realmUrl.resolveUri(parsedSrc);
+    final resolvedUrl = doNotAnimate
+      ? (emojiDisplay.resolvedStillUrl ?? emojiDisplay.resolvedUrl)
+      : emojiDisplay.resolvedUrl;
 
     // Unicode and text emoji get scaled; it would look weird if image emoji didn't.
     final size = _squareEmojiScalerClamped(context).scale(_squareEmojiSize);
 
     return RealmContentNetworkImage(
-      resolved,
+      resolvedUrl,
       width: size,
       height: size,
-      errorBuilder: (context, _, __) => _textFallback,
+      errorBuilder: (context, _, __) => _TextEmoji(
+        emojiDisplay: TextEmojiDisplay(emojiName: emojiName), selected: selected),
     );
   }
 }
 
 class _TextEmoji extends StatelessWidget {
-  const _TextEmoji({required this.emojiName, required this.selected});
+  const _TextEmoji({required this.emojiDisplay, required this.selected});
 
-  final String emojiName;
+  final TextEmojiDisplay emojiDisplay;
   final bool selected;
 
   @override
   Widget build(BuildContext context) {
+    final emojiName = emojiDisplay.emojiName;
+
     // Encourage line breaks before "_" (common in these), but try not
     // to leave a colon alone on a line. See:
     //   <https://github.com/flutter/flutter/issues/61081#issuecomment-1103330522>