inbox [nfc]: Generalize _AtMentionMarker to take different icons

This is helpful for adding marker of topic visibility.

Signed-off-by: Zixuan James Li <[email protected]>

Author: PIG208

lib/widgets/inbox.dart

@@ -291,7 +291,7 @@ abstract class _HeaderItem extends StatelessWidget {
               overflow: TextOverflow.ellipsis,
               title))),
           const SizedBox(width: 12),
-          if (hasMention) const _AtMentionMarker(),
+          if (hasMention) const _IconMarker(icon: ZulipIcons.at_sign),
           Padding(padding: const EdgeInsetsDirectional.only(end: 16),
             child: UnreadCountBadge(
               backgroundColor: unreadCountBadgeBackgroundColor(context),
@@ -414,7 +414,7 @@ class _DmItem extends StatelessWidget {
                 overflow: TextOverflow.ellipsis,
                 title))),
             const SizedBox(width: 12),
-            if (hasMention) const  _AtMentionMarker(),
+            if (hasMention) const  _IconMarker(icon: ZulipIcons.at_sign),
             Padding(padding: const EdgeInsetsDirectional.only(end: 16),
               child: UnreadCountBadge(backgroundColor: null,
                 count: count)),
@@ -539,7 +539,7 @@ class _TopicItem extends StatelessWidget {
                 overflow: TextOverflow.ellipsis,
                 topic))),
             const SizedBox(width: 12),
-            if (hasMention) const _AtMentionMarker(),
+            if (hasMention) const _IconMarker(icon: ZulipIcons.at_sign),
             Padding(padding: const EdgeInsetsDirectional.only(end: 16),
               child: UnreadCountBadge(
                 backgroundColor: colorSwatchFor(context, subscription),
@@ -548,16 +548,20 @@ class _TopicItem extends StatelessWidget {
   }
 }
 
-class _AtMentionMarker extends StatelessWidget {
-  const _AtMentionMarker();
+class _IconMarker extends StatelessWidget {
+  const _IconMarker({required this.icon});
+
+  final IconData icon;
 
   @override
   Widget build(BuildContext context) {
     final designVariables = DesignVariables.of(context);
-    // Design for at-mention marker based on Figma screen:
+    // Design for icon markers based on Figma screen:
     //   https://www.figma.com/file/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?type=design&node-id=224-16386&mode=design&t=JsNndFQ8fKFH0SjS-0
     return Padding(
       padding: const EdgeInsetsDirectional.only(end: 4),
-      child: Icon(ZulipIcons.at_sign, size: 14, color: designVariables.atMentionMarker));
+      // This color comes from the Figma screen for the "@" marker, but not
+      // the topic visibility markers.
+      child: Icon(icon, size: 14, color: designVariables.inboxItemIconMarker));
   }
 }

lib/widgets/theme.dart

@@ -135,7 +135,7 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
       textInput: const Color(0xff000000),
       title: const Color(0xff1a1a1a),
       channelColorSwatches: ChannelColorSwatches.light,
-      atMentionMarker: const HSLColor.fromAHSL(0.5, 0, 0, 0.2).toColor(),
+      inboxItemIconMarker: const HSLColor.fromAHSL(0.5, 0, 0, 0.2).toColor(),
       colorMessageHeaderIconInteractive: Colors.black.withValues(alpha: 0.2),
       contextMenuCancelBg: const Color(0xff797986).withValues(alpha: 0.15),
       contextMenuCancelPressedBg: const Color(0xff797986).withValues(alpha: 0.20),
@@ -180,7 +180,7 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
       contextMenuCancelBg: const Color(0xff797986).withValues(alpha: 0.15), // the same as the light mode in Figma
       contextMenuCancelPressedBg: const Color(0xff797986).withValues(alpha: 0.20), // the same as the light mode in Figma
       // TODO(design-dark) need proper dark-theme color (this is ad hoc)
-      atMentionMarker: const HSLColor.fromAHSL(0.4, 0, 0, 1).toColor(),
+      inboxItemIconMarker: const HSLColor.fromAHSL(0.4, 0, 0, 1).toColor(),
       colorMessageHeaderIconInteractive: Colors.white.withValues(alpha: 0.2),
       dmHeaderBg: const HSLColor.fromAHSL(1, 46, 0.15, 0.2).toColor(),
       // TODO(design-dark) need proper dark-theme color (this is ad hoc)
@@ -226,7 +226,7 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
     required this.textInput,
     required this.title,
     required this.channelColorSwatches,
-    required this.atMentionMarker,
+    required this.inboxItemIconMarker,
     required this.colorMessageHeaderIconInteractive,
     required this.contextMenuCancelBg,
     required this.contextMenuCancelPressedBg,
@@ -280,7 +280,7 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
   final ChannelColorSwatches channelColorSwatches;
 
   // Not named variables in Figma; taken from older Figma drafts, or elsewhere.
-  final Color atMentionMarker;
+  final Color inboxItemIconMarker;
   final Color colorMessageHeaderIconInteractive;
   final Color contextMenuCancelBg; // In Figma, but unnamed.
   final Color contextMenuCancelPressedBg; // In Figma, but unnamed.
@@ -361,7 +361,7 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
       textInput: textInput ?? this.textInput,
       title: title ?? this.title,
       channelColorSwatches: channelColorSwatches ?? this.channelColorSwatches,
-      atMentionMarker: atMentionMarker ?? this.atMentionMarker,
+      inboxItemIconMarker: atMentionMarker ?? this.inboxItemIconMarker,
       colorMessageHeaderIconInteractive: colorMessageHeaderIconInteractive ?? this.colorMessageHeaderIconInteractive,
       contextMenuCancelBg: contextMenuCancelBg ?? this.contextMenuCancelBg,
       contextMenuCancelPressedBg: contextMenuCancelPressedBg ?? this.contextMenuCancelPressedBg,
@@ -408,7 +408,7 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
       textInput: Color.lerp(textInput, other.textInput, t)!,
       title: Color.lerp(title, other.title, t)!,
       channelColorSwatches: ChannelColorSwatches.lerp(channelColorSwatches, other.channelColorSwatches, t),
-      atMentionMarker: Color.lerp(atMentionMarker, other.atMentionMarker, t)!,
+      inboxItemIconMarker: Color.lerp(inboxItemIconMarker, other.inboxItemIconMarker, t)!,
       colorMessageHeaderIconInteractive: Color.lerp(colorMessageHeaderIconInteractive, other.colorMessageHeaderIconInteractive, t)!,
       contextMenuCancelBg: Color.lerp(contextMenuCancelBg, other.contextMenuCancelBg, t)!,
       contextMenuCancelPressedBg: Color.lerp(contextMenuCancelPressedBg, other.contextMenuCancelPressedBg, t)!,