inbox: Add label for archived channels in headers

chimnayajith · chimnayajith · commit 63925aa44c00 · 2025-03-15T08:05:17.000+05:30
Design inspired by the web version. Fixes zulip#800
diff --git a/assets/l10n/app_en.arb b/assets/l10n/app_en.arb
@@ -375,6 +375,10 @@
   "@unknownChannelName": {
     "description": "Replacement name for channel when it cannot be found in the store."
   },
+  "channelArchivedLabel": "(archived)",
+  "@channelArchivedLabel": {
+    "description": "Label shown next to an archived channel's name in headers."
+  },
   "composeBoxTopicHintText": "Topic",
   "@composeBoxTopicHintText":  {
     "description": "Hint text for topic input widget in compose box."
diff --git a/lib/generated/l10n/zulip_localizations.dart b/lib/generated/l10n/zulip_localizations.dart
@@ -603,6 +603,12 @@ abstract class ZulipLocalizations {
   /// **'(unknown channel)'**
   String get unknownChannelName;
 
+  /// Label shown next to an archived channel's name in headers.
+  ///
+  /// In en, this message translates to:
+  /// **'(archived)'**
+  String get channelArchivedLabel;
+
   /// Hint text for topic input widget in compose box.
   ///
   /// In en, this message translates to:
diff --git a/lib/generated/l10n/zulip_localizations_ar.dart b/lib/generated/l10n/zulip_localizations_ar.dart
@@ -295,6 +295,9 @@ class ZulipLocalizationsAr extends ZulipLocalizations {
   @override
   String get unknownChannelName => '(unknown channel)';
 
+  @override
+  String get channelArchivedLabel => '(archived)';
+
   @override
   String get composeBoxTopicHintText => 'Topic';
 
diff --git a/lib/generated/l10n/zulip_localizations_en.dart b/lib/generated/l10n/zulip_localizations_en.dart
@@ -295,6 +295,9 @@ class ZulipLocalizationsEn extends ZulipLocalizations {
   @override
   String get unknownChannelName => '(unknown channel)';
 
+  @override
+  String get channelArchivedLabel => '(archived)';
+
   @override
   String get composeBoxTopicHintText => 'Topic';
 
diff --git a/lib/generated/l10n/zulip_localizations_ja.dart b/lib/generated/l10n/zulip_localizations_ja.dart
@@ -295,6 +295,9 @@ class ZulipLocalizationsJa extends ZulipLocalizations {
   @override
   String get unknownChannelName => '(unknown channel)';
 
+  @override
+  String get channelArchivedLabel => '(archived)';
+
   @override
   String get composeBoxTopicHintText => 'Topic';
 
diff --git a/lib/generated/l10n/zulip_localizations_nb.dart b/lib/generated/l10n/zulip_localizations_nb.dart
@@ -295,6 +295,9 @@ class ZulipLocalizationsNb extends ZulipLocalizations {
   @override
   String get unknownChannelName => '(unknown channel)';
 
+  @override
+  String get channelArchivedLabel => '(archived)';
+
   @override
   String get composeBoxTopicHintText => 'Topic';
 
diff --git a/lib/generated/l10n/zulip_localizations_pl.dart b/lib/generated/l10n/zulip_localizations_pl.dart
@@ -295,6 +295,9 @@ class ZulipLocalizationsPl extends ZulipLocalizations {
   @override
   String get unknownChannelName => '(nieznany kanał)';
 
+  @override
+  String get channelArchivedLabel => '(archived)';
+
   @override
   String get composeBoxTopicHintText => 'Wątek';
 
diff --git a/lib/generated/l10n/zulip_localizations_ru.dart b/lib/generated/l10n/zulip_localizations_ru.dart
@@ -295,6 +295,9 @@ class ZulipLocalizationsRu extends ZulipLocalizations {
   @override
   String get unknownChannelName => '(unknown channel)';
 
+  @override
+  String get channelArchivedLabel => '(archived)';
+
   @override
   String get composeBoxTopicHintText => 'Тема';
 
diff --git a/lib/generated/l10n/zulip_localizations_sk.dart b/lib/generated/l10n/zulip_localizations_sk.dart
@@ -295,6 +295,9 @@ class ZulipLocalizationsSk extends ZulipLocalizations {
   @override
   String get unknownChannelName => '(unknown channel)';
 
+  @override
+  String get channelArchivedLabel => '(archived)';
+
   @override
   String get composeBoxTopicHintText => 'Topic';
 
diff --git a/lib/widgets/action_sheet.dart b/lib/widgets/action_sheet.dart
@@ -228,53 +228,31 @@ void showTopicActionSheet(BuildContext context, {
   final pageContext = PageRoot.contextOf(context);
 
   final store = PerAccountStoreWidget.of(pageContext);
+  final channel = store.streams[channelId];
   final subscription = store.subscriptions[channelId];
 
   final optionButtons = <ActionSheetMenuItemButton>[];
 
-  // TODO(server-7): simplify this condition away
-  final supportsUnmutingTopics = store.zulipFeatureLevel >= 170;
-  // TODO(server-8): simplify this condition away
-  final supportsFollowingTopics = store.zulipFeatureLevel >= 219;
-
-  final visibilityOptions = <UserTopicVisibilityPolicy>[];
-  final visibilityPolicy = store.topicVisibilityPolicy(channelId, topic);
-  if (subscription == null) {
-    // Not subscribed to the channel; there is no user topic change to be made.
-  } else if (!subscription.isMuted) {
-    // Channel is subscribed and not muted.
-    switch (visibilityPolicy) {
-      case UserTopicVisibilityPolicy.muted:
-        visibilityOptions.add(UserTopicVisibilityPolicy.none);
-        if (supportsFollowingTopics) {
-          visibilityOptions.add(UserTopicVisibilityPolicy.followed);
-        }
-      case UserTopicVisibilityPolicy.none:
-      case UserTopicVisibilityPolicy.unmuted:
-        visibilityOptions.add(UserTopicVisibilityPolicy.muted);
-        if (supportsFollowingTopics) {
-          visibilityOptions.add(UserTopicVisibilityPolicy.followed);
-        }
-      case UserTopicVisibilityPolicy.followed:
-        visibilityOptions.add(UserTopicVisibilityPolicy.muted);
-        if (supportsFollowingTopics) {
-          visibilityOptions.add(UserTopicVisibilityPolicy.none);
-        }
-      case UserTopicVisibilityPolicy.unknown:
-        // TODO(#1074): This should be unreachable as we keep `unknown` out of
-        //   our data structures.
-        assert(false);
-    }
-  } else {
-    // Channel is muted.
-    if (supportsUnmutingTopics) {
+  final isChannelArchived = channel?.isArchived == true;
+  if (!isChannelArchived) {
+    // TODO(server-7): simplify this condition away
+    final supportsUnmutingTopics = store.zulipFeatureLevel >= 170;
+    // TODO(server-8): simplify this condition away
+    final supportsFollowingTopics = store.zulipFeatureLevel >= 219;
+
+    final visibilityOptions = <UserTopicVisibilityPolicy>[];
+    final visibilityPolicy = store.topicVisibilityPolicy(channelId, topic);
+    if (subscription == null) {
+      // Not subscribed to the channel; there is no user topic change to be made.
+    } else if (!subscription.isMuted) {
+      // Channel is subscribed and not muted.
       switch (visibilityPolicy) {
-        case UserTopicVisibilityPolicy.none:
         case UserTopicVisibilityPolicy.muted:
-          visibilityOptions.add(UserTopicVisibilityPolicy.unmuted);
+          visibilityOptions.add(UserTopicVisibilityPolicy.none);
           if (supportsFollowingTopics) {
             visibilityOptions.add(UserTopicVisibilityPolicy.followed);
           }
+        case UserTopicVisibilityPolicy.none:
         case UserTopicVisibilityPolicy.unmuted:
           visibilityOptions.add(UserTopicVisibilityPolicy.muted);
           if (supportsFollowingTopics) {
@@ -290,20 +268,46 @@ void showTopicActionSheet(BuildContext context, {
           //   our data structures.
           assert(false);
       }
+    } else {
+      // Channel is muted.
+      if (supportsUnmutingTopics) {
+        switch (visibilityPolicy) {
+          case UserTopicVisibilityPolicy.none:
+          case UserTopicVisibilityPolicy.muted:
+            visibilityOptions.add(UserTopicVisibilityPolicy.unmuted);
+            if (supportsFollowingTopics) {
+              visibilityOptions.add(UserTopicVisibilityPolicy.followed);
+            }
+          case UserTopicVisibilityPolicy.unmuted:
+            visibilityOptions.add(UserTopicVisibilityPolicy.muted);
+            if (supportsFollowingTopics) {
+              visibilityOptions.add(UserTopicVisibilityPolicy.followed);
+            }
+          case UserTopicVisibilityPolicy.followed:
+            visibilityOptions.add(UserTopicVisibilityPolicy.muted);
+            if (supportsFollowingTopics) {
+              visibilityOptions.add(UserTopicVisibilityPolicy.none);
+            }
+          case UserTopicVisibilityPolicy.unknown:
+            // TODO(#1074): This should be unreachable as we keep `unknown` out of
+            //   our data structures.
+            assert(false);
+        }
+      }
+    }
+    optionButtons.addAll(visibilityOptions.map((to) {
+      return UserTopicUpdateButton(
+        currentVisibilityPolicy: visibilityPolicy,
+        newVisibilityPolicy: to,
+        narrow: TopicNarrow(channelId, topic),
+        pageContext: pageContext);
+    }));
+
+    if (someMessageIdInTopic != null) {
+      optionButtons.add(ResolveUnresolveButton(pageContext: pageContext,
+        topic: topic,
+        someMessageIdInTopic: someMessageIdInTopic));
     }
-  }
-  optionButtons.addAll(visibilityOptions.map((to) {
-    return UserTopicUpdateButton(
-      currentVisibilityPolicy: visibilityPolicy,
-      newVisibilityPolicy: to,
-      narrow: TopicNarrow(channelId, topic),
-      pageContext: pageContext);
-  }));
-
-  if (someMessageIdInTopic != null) {
-    optionButtons.add(ResolveUnresolveButton(pageContext: pageContext,
-      topic: topic,
-      someMessageIdInTopic: someMessageIdInTopic));
   }
 
   final unreadCount = store.unreads.countInTopicNarrow(channelId, topic);
@@ -558,14 +562,19 @@ void showMessageActionSheet({required BuildContext context, required Message mes
   final messageListPage = MessageListPage.ancestorOf(pageContext);
   final isComposeBoxOffered = messageListPage.composeBoxController != null;
 
+  bool isInArchivedChannel = false;
+  if (message is StreamMessage) {
+    final channel = store.streams[message.streamId];
+    isInArchivedChannel = channel?.isArchived == true;
+  }
   final isMessageRead = message.flags.contains(MessageFlag.read);
   final markAsUnreadSupported = store.zulipFeatureLevel >= 155; // TODO(server-6)
   final showMarkAsUnreadButton = markAsUnreadSupported && isMessageRead;
 
   final optionButtons = [
     ReactionButtons(message: message, pageContext: pageContext),
     StarButton(message: message, pageContext: pageContext),
-    if (isComposeBoxOffered)
+    if (isComposeBoxOffered && !isInArchivedChannel)
       QuoteAndReplyButton(message: message, pageContext: pageContext),
     if (showMarkAsUnreadButton)
       MarkAsUnreadButton(message: message, pageContext: pageContext),
diff --git a/lib/widgets/inbox.dart b/lib/widgets/inbox.dart
@@ -222,6 +222,7 @@ abstract class _HeaderItem extends StatelessWidget {
   final _InboxPageState pageState;
   final int count;
   final bool hasMention;
+  final bool isArchived;
 
   /// A build context within the [_StreamSection] or [_AllDmsSection].
   ///
@@ -236,6 +237,7 @@ abstract class _HeaderItem extends StatelessWidget {
     required this.count,
     required this.hasMention,
     required this.sectionContext,
+    this.isArchived = false,
   });
 
   String title(ZulipLocalizations zulipLocalizations);
@@ -287,16 +289,33 @@ abstract class _HeaderItem extends StatelessWidget {
           const SizedBox(width: 5),
           Expanded(child: Padding(
             padding: const EdgeInsets.symmetric(vertical: 4),
-            child: Text(
-              style: TextStyle(
-                fontSize: 17,
-                height: (20 / 17),
-                // TODO(design) check if this is the right variable
-                color: designVariables.labelMenuButton,
-              ).merge(weightVariableTextStyle(context, wght: 600)),
+            child: RichText(
               maxLines: 1,
               overflow: TextOverflow.ellipsis,
-              title(zulipLocalizations)))),
+              text: TextSpan(
+                children: [
+                  TextSpan(
+                    text: title(zulipLocalizations),
+                    style: TextStyle(
+                      fontSize: 17,
+                      height: 20 / 17,
+                      // TODO(design) check if this is the right variable
+                      color: designVariables.labelMenuButton,
+                    ).merge(weightVariableTextStyle(context, wght: 600))),
+                  if (isArchived)
+                    // TODO(#1285): Avoid concatenating translated strings
+                    WidgetSpan(
+                      child: Padding(
+                        padding: EdgeInsetsDirectional.only(start: 4),
+                        child: Text(
+                          zulipLocalizations.channelArchivedLabel,
+                          style: TextStyle(
+                            fontSize: 17,
+                            height: 20 / 17,
+                            // TODO(design) check if this is the right variable
+                            color: designVariables.labelMessageHeaderArchived,
+                            fontStyle: FontStyle.italic)))),
+                ])))),
           const SizedBox(width: 12),
           if (hasMention) const _IconMarker(icon: ZulipIcons.at_sign),
           Padding(padding: const EdgeInsetsDirectional.only(end: 16),
@@ -444,6 +463,7 @@ class _StreamHeaderItem extends _HeaderItem with _LongPressable {
     required super.count,
     required super.hasMention,
     required super.sectionContext,
+    required super.isArchived,
   });
 
   @override String title(ZulipLocalizations zulipLocalizations) =>
@@ -495,6 +515,7 @@ class _StreamSection extends StatelessWidget {
       collapsed: collapsed,
       pageState: pageState,
       sectionContext: context,
+      isArchived: subscription.isArchived,
     );
     return StickyHeaderItem(
       header: header,
diff --git a/lib/widgets/message_list.dart b/lib/widgets/message_list.dart
@@ -311,6 +311,7 @@ class MessageListAppBarTitle extends StatelessWidget {
     ZulipStream? stream,
   }) {
     final zulipLocalizations = ZulipLocalizations.of(context);
+    final designVariables = DesignVariables.of(context);
     // A null [Icon.icon] makes a blank space.
     final icon = stream != null ? iconDataForStream(stream) : null;
     return Row(
@@ -324,6 +325,17 @@ class MessageListAppBarTitle extends StatelessWidget {
         const SizedBox(width: 4),
         Flexible(child: Text(
           stream?.name ?? zulipLocalizations.unknownChannelName)),
+        if (stream?.isArchived ?? false)
+          // TODO(#1285): Avoid concatenating translated strings
+          Padding(
+            padding: EdgeInsetsDirectional.fromSTEB(4, 4, 0, 4),
+            child: Text(
+              zulipLocalizations.channelArchivedLabel,
+              style: TextStyle(
+                fontSize: 18,
+                // TODO(design): check if this is the right variable
+                color: designVariables.labelMessageHeaderArchived,
+                fontStyle: FontStyle.italic))),
       ]);
   }
 
@@ -1099,6 +1111,18 @@ class StreamMessageRecipientHeader extends StatelessWidget {
                 style: recipientHeaderTextStyle(context),
                 overflow: TextOverflow.ellipsis),
             ),
+            if (stream?.isArchived ?? false)
+              // TODO(#1285): Avoid concatenating translated strings
+              Padding(
+                padding: const EdgeInsetsDirectional.fromSTEB(4, 4, 0, 4),
+                child: Text(
+                  zulipLocalizations.channelArchivedLabel,
+                  style: recipientHeaderTextStyle(context,
+                    // TODO(design): check if this is the right variable
+                    color: designVariables.labelMessageHeaderArchived,
+                    fontStyle: FontStyle.italic),
+                  overflow: TextOverflow.ellipsis,
+                  maxLines: 1)),
             Padding(
               // Figma has 5px horizontal padding around an 8px wide icon.
               // Icon is 16px wide here so horizontal padding is 1px.
@@ -1217,9 +1241,13 @@ class DmRecipientHeader extends StatelessWidget {
   }
 }
 
-TextStyle recipientHeaderTextStyle(BuildContext context, {FontStyle? fontStyle}) {
+TextStyle recipientHeaderTextStyle(
+  BuildContext context, {
+  Color? color,
+  FontStyle? fontStyle,
+}) {
   return TextStyle(
-    color: DesignVariables.of(context).title,
+    color: color ?? DesignVariables.of(context).title,
     fontSize: 16,
     letterSpacing: proportionalLetterSpacing(context, 0.02, baseFontSize: 16),
     height: (18 / 16),
diff --git a/lib/widgets/theme.dart b/lib/widgets/theme.dart
diff --git a/test/widgets/action_sheet_test.dart b/test/widgets/action_sheet_test.dart
diff --git a/test/widgets/inbox_test.dart b/test/widgets/inbox_test.dart
diff --git a/test/widgets/message_list_test.dart b/test/widgets/message_list_test.dart
