inbox: Add label for archived channels in headers

chimnayajith · chimnayajith · commit 5390571eb01c · 2025-04-11T16:42:49.000+05:30
Design inspired by the web version. Fixes #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
@@ -230,19 +230,22 @@ 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>[];
 
+  final isChannelArchived = channel?.isArchived == false;
   // 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.
+  if (subscription == null || !isChannelArchived) {
+    // Not subscribed to the channel or the channel is archived;
+    // there is no user topic change to be made.
   } else if (!subscription.isMuted) {
     // Channel is subscribed and not muted.
     switch (visibilityPolicy) {
@@ -306,7 +309,8 @@ void showTopicActionSheet(BuildContext context, {
   //   limit for editing topics).
   if (someMessageIdInTopic != null
       // ignore: unnecessary_null_comparison // null topic names soon to be enabled
-      && topic.displayName != null) {
+      && topic.displayName != null
+      && isChannelArchived) {
     optionButtons.add(ResolveUnresolveButton(pageContext: pageContext,
       topic: topic,
       someMessageIdInTopic: someMessageIdInTopic));
@@ -564,14 +568,18 @@ 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
@@ -240,6 +240,7 @@ abstract class _HeaderItem extends StatelessWidget {
 
   String title(ZulipLocalizations zulipLocalizations);
   IconData get icon;
+  InlineSpan? buildTrailing(BuildContext context) => null;
   Color collapsedIconColor(BuildContext context);
   Color uncollapsedIconColor(BuildContext context);
   Color uncollapsedBackgroundColor(BuildContext context);
@@ -285,18 +286,24 @@ abstract class _HeaderItem extends StatelessWidget {
               : uncollapsedIconColor(context),
             icon),
           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)),
-              maxLines: 1,
-              overflow: TextOverflow.ellipsis,
-              title(zulipLocalizations)))),
+          Expanded(
+            child: Padding(
+              padding: const EdgeInsets.symmetric(vertical: 4),
+              child: RichText(
+                maxLines: 1,
+                overflow: TextOverflow.ellipsis,
+                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))),
+                    buildTrailing(context) ?? const TextSpan(),
+                  ])))),
           const SizedBox(width: 12),
           if (hasMention) const _IconMarker(icon: ZulipIcons.at_sign),
           Padding(padding: const EdgeInsetsDirectional.only(end: 16),
@@ -436,9 +443,11 @@ mixin _LongPressable on _HeaderItem {
 
 class _StreamHeaderItem extends _HeaderItem with _LongPressable {
   final Subscription subscription;
+  final bool isArchived;
 
   const _StreamHeaderItem({
     required this.subscription,
+    required this.isArchived,
     required super.collapsed,
     required super.pageState,
     required super.count,
@@ -449,6 +458,23 @@ class _StreamHeaderItem extends _HeaderItem with _LongPressable {
   @override String title(ZulipLocalizations zulipLocalizations) =>
     subscription.name;
   @override IconData get icon => iconDataForStream(subscription);
+  @override InlineSpan? buildTrailing(BuildContext context) {
+    if (!isArchived) return null;
+
+    final designVariables = DesignVariables.of(context);
+    final zulipLocalizations = ZulipLocalizations.of(context);
+
+    return WidgetSpan(
+      child: Padding(
+        padding: const EdgeInsetsDirectional.only(start: 4),
+        child: Text(
+          zulipLocalizations.channelArchivedLabel,
+          style: TextStyle(
+            fontSize: 17,
+            height: 20 / 17,
+            color: designVariables.labelMessageHeaderArchived,
+            fontStyle: FontStyle.italic))));
+  }
   @override Color collapsedIconColor(context) =>
     colorSwatchFor(context, subscription).iconOnPlainBackground;
   @override Color uncollapsedIconColor(context) =>
@@ -495,6 +521,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
@@ -313,6 +313,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(
@@ -326,6 +327,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))),
       ]);
   }
 
@@ -1102,6 +1114,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.
@@ -1220,9 +1244,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
@@ -172,6 +172,7 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
     groupDmConversationIcon: Colors.black.withValues(alpha: 0.5),
     groupDmConversationIconBg: const Color(0x33808080),
     inboxItemIconMarker: const HSLColor.fromAHSL(0.5, 0, 0, 0.2).toColor(),
+    labelMessageHeaderArchived: const HSLColor.fromAHSL(0.5, 0, 0, 0.5).toColor(),
     loginOrDivider: const Color(0xffdedede),
     loginOrDividerText: const Color(0xff575757),
     modalBarrierColor: const Color(0xff000000).withValues(alpha: 0.3),
@@ -232,6 +233,7 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
     // TODO(design-dark) need proper dark-theme color (this is ad hoc)
     groupDmConversationIconBg: const Color(0x33cccccc),
     inboxItemIconMarker: const HSLColor.fromAHSL(0.4, 0, 0, 1).toColor(),
+    labelMessageHeaderArchived: const HSLColor.fromAHSL(0.5, 0, 0, 0.5).toColor(),
     loginOrDivider: const Color(0xff424242),
     loginOrDividerText: const Color(0xffa8a8a8),
     modalBarrierColor: const Color(0xff000000).withValues(alpha: 0.5),
@@ -294,6 +296,7 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
     required this.groupDmConversationIcon,
     required this.groupDmConversationIconBg,
     required this.inboxItemIconMarker,
+    required this.labelMessageHeaderArchived,
     required this.loginOrDivider,
     required this.loginOrDividerText,
     required this.modalBarrierColor,
@@ -364,6 +367,7 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
   final Color groupDmConversationIcon;
   final Color groupDmConversationIconBg;
   final Color inboxItemIconMarker;
+  final Color labelMessageHeaderArchived;
   final Color loginOrDivider; // TODO(design-dark) need proper dark-theme color (this is ad hoc)
   final Color loginOrDividerText; // TODO(design-dark) need proper dark-theme color (this is ad hoc)
   final Color modalBarrierColor;
@@ -421,6 +425,7 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
     Color? groupDmConversationIcon,
     Color? groupDmConversationIconBg,
     Color? inboxItemIconMarker,
+    Color? labelMessageHeaderArchived,
     Color? loginOrDivider,
     Color? loginOrDividerText,
     Color? modalBarrierColor,
@@ -477,6 +482,7 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
       groupDmConversationIcon: groupDmConversationIcon ?? this.groupDmConversationIcon,
       groupDmConversationIconBg: groupDmConversationIconBg ?? this.groupDmConversationIconBg,
       inboxItemIconMarker: inboxItemIconMarker ?? this.inboxItemIconMarker,
+      labelMessageHeaderArchived: labelMessageHeaderArchived ?? this.labelMessageHeaderArchived,
       loginOrDivider: loginOrDivider ?? this.loginOrDivider,
       loginOrDividerText: loginOrDividerText ?? this.loginOrDividerText,
       modalBarrierColor: modalBarrierColor ?? this.modalBarrierColor,
@@ -540,6 +546,7 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
       groupDmConversationIcon: Color.lerp(groupDmConversationIcon, other.groupDmConversationIcon, t)!,
       groupDmConversationIconBg: Color.lerp(groupDmConversationIconBg, other.groupDmConversationIconBg, t)!,
       inboxItemIconMarker: Color.lerp(inboxItemIconMarker, other.inboxItemIconMarker, t)!,
+      labelMessageHeaderArchived: Color.lerp(labelMessageHeaderArchived, other.labelMessageHeaderArchived, t)!,
       loginOrDivider: Color.lerp(loginOrDivider, other.loginOrDivider, t)!,
       loginOrDividerText: Color.lerp(loginOrDividerText, other.loginOrDividerText, t)!,
       modalBarrierColor: Color.lerp(modalBarrierColor, other.modalBarrierColor, t)!,
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
