topics: Add TopicListButton to channel action sheet

lakshya1goel · PIG208 · PIG208 · commit c002ad7a796e · 2025-05-21T17:31:58.000-04:00
The icon was taken from CZO discussion: https://chat.zulip.org/#narrow/channel/530-mobile-design/topic/Topic.20list.20in.20channel/near/2140324 Fixes: #1158 Co-authored-by: Zixuan James Li <zixuan@zulip.com>
diff --git a/assets/icons/ZulipIcons.ttf b/assets/icons/ZulipIcons.ttf
diff --git a/assets/icons/topics.svg b/assets/icons/topics.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
+  <path fill="#000" d="M2.998 6c0-.55.446-.997.997-.997h11a.998.998 0 0 1 0 1.994h-11A.997.997 0 0 1 2.997 6Zm0 6c0-.55.446-.998.997-.998h9a.998.998 0 0 1 0 1.995h-9A.998.998 0 0 1 2.997 12Zm.997 5.003h11a.998.998 0 0 1 0 1.994h-11a.998.998 0 0 1 0-1.994Zm16-12h.01a.998.998 0 0 1 0 1.994h-.01a.997.997 0 1 1 0-1.994Zm0 5.999h.01a.998.998 0 0 1 0 1.995h-.01a.998.998 0 0 1 0-1.995Zm0 6.001h.01a.998.998 0 0 1 0 1.994h-.01a.998.998 0 0 1 0-1.994Z"/>
+</svg>
diff --git a/assets/l10n/app_en.arb b/assets/l10n/app_en.arb
@@ -84,6 +84,10 @@
   "@actionSheetOptionMarkChannelAsRead": {
     "description": "Label for marking a channel as read."
   },
+  "actionSheetOptionListOfTopics": "List of topics",
+  "@actionSheetOptionListOfTopics": {
+    "description": "Label for navigating to a channel's topic-list page."
+  },
   "actionSheetOptionMuteTopic": "Mute topic",
   "@actionSheetOptionMuteTopic":  {
     "description": "Label for muting a topic on action sheet."
diff --git a/lib/generated/l10n/zulip_localizations.dart b/lib/generated/l10n/zulip_localizations.dart
@@ -239,6 +239,12 @@ abstract class ZulipLocalizations {
   /// **'Mark channel as read'**
   String get actionSheetOptionMarkChannelAsRead;
 
+  /// Label for navigating to a channel's topic-list page.
+  ///
+  /// In en, this message translates to:
+  /// **'List of topics'**
+  String get actionSheetOptionListOfTopics;
+
   /// Label for muting a topic on action sheet.
   ///
   /// In en, this message translates to:
diff --git a/lib/generated/l10n/zulip_localizations_ar.dart b/lib/generated/l10n/zulip_localizations_ar.dart
@@ -76,6 +76,9 @@ class ZulipLocalizationsAr extends ZulipLocalizations {
   @override
   String get actionSheetOptionMarkChannelAsRead => 'Mark channel as read';
 
+  @override
+  String get actionSheetOptionListOfTopics => 'List of topics';
+
   @override
   String get actionSheetOptionMuteTopic => 'Mute topic';
 
diff --git a/lib/generated/l10n/zulip_localizations_de.dart b/lib/generated/l10n/zulip_localizations_de.dart
@@ -76,6 +76,9 @@ class ZulipLocalizationsDe extends ZulipLocalizations {
   @override
   String get actionSheetOptionMarkChannelAsRead => 'Mark channel as read';
 
+  @override
+  String get actionSheetOptionListOfTopics => 'List of topics';
+
   @override
   String get actionSheetOptionMuteTopic => 'Mute topic';
 
diff --git a/lib/generated/l10n/zulip_localizations_en.dart b/lib/generated/l10n/zulip_localizations_en.dart
@@ -76,6 +76,9 @@ class ZulipLocalizationsEn extends ZulipLocalizations {
   @override
   String get actionSheetOptionMarkChannelAsRead => 'Mark channel as read';
 
+  @override
+  String get actionSheetOptionListOfTopics => 'List of topics';
+
   @override
   String get actionSheetOptionMuteTopic => 'Mute topic';
 
diff --git a/lib/generated/l10n/zulip_localizations_ja.dart b/lib/generated/l10n/zulip_localizations_ja.dart
@@ -76,6 +76,9 @@ class ZulipLocalizationsJa extends ZulipLocalizations {
   @override
   String get actionSheetOptionMarkChannelAsRead => 'Mark channel as read';
 
+  @override
+  String get actionSheetOptionListOfTopics => 'List of topics';
+
   @override
   String get actionSheetOptionMuteTopic => 'Mute topic';
 
diff --git a/lib/generated/l10n/zulip_localizations_nb.dart b/lib/generated/l10n/zulip_localizations_nb.dart
@@ -76,6 +76,9 @@ class ZulipLocalizationsNb extends ZulipLocalizations {
   @override
   String get actionSheetOptionMarkChannelAsRead => 'Mark channel as read';
 
+  @override
+  String get actionSheetOptionListOfTopics => 'List of topics';
+
   @override
   String get actionSheetOptionMuteTopic => 'Mute topic';
 
diff --git a/lib/generated/l10n/zulip_localizations_pl.dart b/lib/generated/l10n/zulip_localizations_pl.dart
@@ -78,6 +78,9 @@ class ZulipLocalizationsPl extends ZulipLocalizations {
   String get actionSheetOptionMarkChannelAsRead =>
       'Oznacz kanał jako przeczytany';
 
+  @override
+  String get actionSheetOptionListOfTopics => 'List of topics';
+
   @override
   String get actionSheetOptionMuteTopic => 'Wycisz wątek';
 
diff --git a/lib/generated/l10n/zulip_localizations_ru.dart b/lib/generated/l10n/zulip_localizations_ru.dart
@@ -78,6 +78,9 @@ class ZulipLocalizationsRu extends ZulipLocalizations {
   String get actionSheetOptionMarkChannelAsRead =>
       'Отметить канал как прочитанный';
 
+  @override
+  String get actionSheetOptionListOfTopics => 'List of topics';
+
   @override
   String get actionSheetOptionMuteTopic => 'Отключить тему';
 
diff --git a/lib/generated/l10n/zulip_localizations_sk.dart b/lib/generated/l10n/zulip_localizations_sk.dart
@@ -76,6 +76,9 @@ class ZulipLocalizationsSk extends ZulipLocalizations {
   @override
   String get actionSheetOptionMarkChannelAsRead => 'Mark channel as read';
 
+  @override
+  String get actionSheetOptionListOfTopics => 'List of topics';
+
   @override
   String get actionSheetOptionMuteTopic => 'Stlmiť tému';
 
diff --git a/lib/generated/l10n/zulip_localizations_uk.dart b/lib/generated/l10n/zulip_localizations_uk.dart
@@ -79,6 +79,9 @@ class ZulipLocalizationsUk extends ZulipLocalizations {
   String get actionSheetOptionMarkChannelAsRead =>
       'Позначити канал як прочитаний';
 
+  @override
+  String get actionSheetOptionListOfTopics => 'List of topics';
+
   @override
   String get actionSheetOptionMuteTopic => 'Заглушити тему';
 
diff --git a/lib/widgets/action_sheet.dart b/lib/widgets/action_sheet.dart
@@ -29,6 +29,7 @@ import 'page.dart';
 import 'store.dart';
 import 'text.dart';
 import 'theme.dart';
+import 'topic_list.dart';
 
 void _showActionSheet(
   BuildContext context, {
@@ -175,24 +176,43 @@ void showChannelActionSheet(BuildContext context, {
   final pageContext = PageRoot.contextOf(context);
   final store = PerAccountStoreWidget.of(pageContext);
 
-  final optionButtons = <ActionSheetMenuItemButton>[];
+  final optionButtons = <ActionSheetMenuItemButton>[
+    TopicListButton(pageContext: pageContext, channelId: channelId),
+  ];
+
   final unreadCount = store.unreads.countInChannelNarrow(channelId);
   if (unreadCount > 0) {
     optionButtons.add(
       MarkChannelAsReadButton(pageContext: pageContext, channelId: channelId));
   }
-  if (optionButtons.isEmpty) {
-    // TODO(a11y): This case makes a no-op gesture handler; as a consequence,
-    //   we're presenting some UI (to people who use screen-reader software) as
-    //   though it offers a gesture interaction that it doesn't meaningfully
-    //   offer, which is confusing. The solution here is probably to remove this
-    //   is-empty case by having at least one button that's always present,
-    //   such as "copy link to channel".
-    return;
-  }
+
   _showActionSheet(pageContext, optionButtons: optionButtons);
 }
 
+class TopicListButton extends ActionSheetMenuItemButton {
+  const TopicListButton({
+    super.key,
+    required this.channelId,
+    required super.pageContext,
+  });
+
+  final int channelId;
+
+  @override
+  IconData get icon => ZulipIcons.topics;
+
+  @override
+  String label(ZulipLocalizations zulipLocalizations) {
+    return zulipLocalizations.actionSheetOptionListOfTopics;
+  }
+
+  @override
+  void onPressed() {
+    Navigator.push(pageContext,
+      TopicListPage.buildRoute(context: pageContext, streamId: channelId));
+  }
+}
+
 class MarkChannelAsReadButton extends ActionSheetMenuItemButton {
   const MarkChannelAsReadButton({
     super.key,
diff --git a/lib/widgets/icons.dart b/lib/widgets/icons.dart
@@ -144,11 +144,14 @@ abstract final class ZulipIcons {
   /// The Zulip custom icon "topic".
   static const IconData topic = IconData(0xf128, fontFamily: "Zulip Icons");
 
+  /// The Zulip custom icon "topics".
+  static const IconData topics = IconData(0xf129, fontFamily: "Zulip Icons");
+
   /// The Zulip custom icon "unmute".
-  static const IconData unmute = IconData(0xf129, fontFamily: "Zulip Icons");
+  static const IconData unmute = IconData(0xf12a, fontFamily: "Zulip Icons");
 
   /// The Zulip custom icon "user".
-  static const IconData user = IconData(0xf12a, fontFamily: "Zulip Icons");
+  static const IconData user = IconData(0xf12b, fontFamily: "Zulip Icons");
 
   // END GENERATED ICON DATA
 }
diff --git a/test/widgets/action_sheet_test.dart b/test/widgets/action_sheet_test.dart
@@ -227,6 +227,7 @@ void main() {
       void checkButtons() {
         check(actionSheetFinder).findsOne();
         checkButton('Mark channel as read');
+        checkButton('List of topics');
       }
 
       testWidgets('show from inbox', (tester) async {
@@ -244,7 +245,7 @@ void main() {
       testWidgets('show with no unread messages', (tester) async {
         await prepare(hasUnreadMessages: false);
         await showFromSubscriptionList(tester);
-        check(actionSheetFinder).findsNothing();
+        check(findButtonForLabel('Mark channel as read')).findsNothing();
       });
 
       testWidgets('show from app bar in channel narrow', (tester) async {
@@ -268,6 +269,19 @@ void main() {
       });
     });
 
+    testWidgets('TopicListButton', (tester) async {
+      await prepare();
+      await showFromAppBar(tester,
+        narrow: ChannelNarrow(someChannel.streamId));
+
+      connection.prepare(json: GetStreamTopicsResult(topics: [
+        eg.getStreamTopicsEntry(name: 'some topic foo'),
+      ]).toJson());
+      await tester.tap(findButtonForLabel('List of topics'));
+      await tester.pumpAndSettle();
+      check(find.text('some topic foo')).findsOne();
+    });
+
     group('MarkChannelAsReadButton', () {
       void checkRequest(int channelId) {
         check(connection.takeRequests()).single.isA<http.Request>()
