topics: Add topic list page

For the topic-list page app bar, we leave out the icon "chevron_down.svg"
since it's related to a new design (zulip#1039) we haven't implemented yet.
This also why "TOPICS" is not aligned to the middle part of the app bar
on the message-list page.

We also leave out the new topic button and topic filtering, which are
out-of-scope for zulip#1158.

The topic-list implementation is quite similar to parts of inbox page
and message-list page.  Therefore, we structure the code to make
it easy to maintain in the future. Especially, this helps us
(a) when we're changing one, apply the same change to the other,
where appropriate, and (b) later reconcile the differences they
do have and then refactor to unify them.

Figma design:
  https://www.figma.com/design/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=6819-35869&m=dev

The "TOPICS" icon on message-list page in a topic narrow is a UX
change from the design.  See CZO discussion:
  https://chat.zulip.org/#narrow/channel/48-mobile/topic/Flutter.20beta.3A.20missing.20topic.20list/near/2177505

Author: PIG208

assets/l10n/app_en.arb

@@ -769,6 +769,10 @@
   "@mainMenuMyProfile": {
     "description": "Label for main-menu button leading to the user's own profile."
   },
+  "topicsButtonLabel": "TOPICS",
+  "@topicsButtonLabel": {
+    "description": "Label for message list button leading to topic-list page. (Use ALL CAPS for cased alphabets: Latin, Greek, Cyrillic, etc.)"
+  },
   "channelFeedButtonTooltip": "Channel feed",
   "@channelFeedButtonTooltip": {
     "description": "Tooltip for button to navigate to a given channel's feed"

lib/generated/l10n/zulip_localizations.dart

@@ -1151,6 +1151,12 @@ abstract class ZulipLocalizations {
   /// **'My profile'**
   String get mainMenuMyProfile;
 
+  /// Label for message list button leading to topic-list page. (Use ALL CAPS for cased alphabets: Latin, Greek, Cyrillic, etc.)
+  ///
+  /// In en, this message translates to:
+  /// **'TOPICS'**
+  String get topicsButtonLabel;
+
   /// Tooltip for button to navigate to a given channel's feed
   ///
   /// In en, this message translates to:

lib/generated/l10n/zulip_localizations_ar.dart

@@ -629,6 +629,9 @@ class ZulipLocalizationsAr extends ZulipLocalizations {
   @override
   String get mainMenuMyProfile => 'My profile';
 
+  @override
+  String get topicsButtonLabel => 'TOPICS';
+
   @override
   String get channelFeedButtonTooltip => 'Channel feed';
 

lib/generated/l10n/zulip_localizations_de.dart

@@ -629,6 +629,9 @@ class ZulipLocalizationsDe extends ZulipLocalizations {
   @override
   String get mainMenuMyProfile => 'My profile';
 
+  @override
+  String get topicsButtonLabel => 'TOPICS';
+
   @override
   String get channelFeedButtonTooltip => 'Channel feed';
 

lib/generated/l10n/zulip_localizations_en.dart

@@ -629,6 +629,9 @@ class ZulipLocalizationsEn extends ZulipLocalizations {
   @override
   String get mainMenuMyProfile => 'My profile';
 
+  @override
+  String get topicsButtonLabel => 'TOPICS';
+
   @override
   String get channelFeedButtonTooltip => 'Channel feed';
 

lib/generated/l10n/zulip_localizations_ja.dart

@@ -629,6 +629,9 @@ class ZulipLocalizationsJa extends ZulipLocalizations {
   @override
   String get mainMenuMyProfile => 'My profile';
 
+  @override
+  String get topicsButtonLabel => 'TOPICS';
+
   @override
   String get channelFeedButtonTooltip => 'Channel feed';
 

lib/generated/l10n/zulip_localizations_nb.dart

@@ -629,6 +629,9 @@ class ZulipLocalizationsNb extends ZulipLocalizations {
   @override
   String get mainMenuMyProfile => 'My profile';
 
+  @override
+  String get topicsButtonLabel => 'TOPICS';
+
   @override
   String get channelFeedButtonTooltip => 'Channel feed';
 

lib/generated/l10n/zulip_localizations_pl.dart

@@ -638,6 +638,9 @@ class ZulipLocalizationsPl extends ZulipLocalizations {
   @override
   String get mainMenuMyProfile => 'Mój profil';
 
+  @override
+  String get topicsButtonLabel => 'TOPICS';
+
   @override
   String get channelFeedButtonTooltip => 'Strumień kanału';
 

lib/generated/l10n/zulip_localizations_ru.dart

@@ -642,6 +642,9 @@ class ZulipLocalizationsRu extends ZulipLocalizations {
   @override
   String get mainMenuMyProfile => 'Мой профиль';
 
+  @override
+  String get topicsButtonLabel => 'TOPICS';
+
   @override
   String get channelFeedButtonTooltip => 'Лента канала';
 

lib/generated/l10n/zulip_localizations_sk.dart

@@ -631,6 +631,9 @@ class ZulipLocalizationsSk extends ZulipLocalizations {
   @override
   String get mainMenuMyProfile => 'Môj profil';
 
+  @override
+  String get topicsButtonLabel => 'TOPICS';
+
   @override
   String get channelFeedButtonTooltip => 'Channel feed';
 

lib/generated/l10n/zulip_localizations_uk.dart

@@ -641,6 +641,9 @@ class ZulipLocalizationsUk extends ZulipLocalizations {
   @override
   String get mainMenuMyProfile => 'Мій профіль';
 
+  @override
+  String get topicsButtonLabel => 'TOPICS';
+
   @override
   String get channelFeedButtonTooltip => 'Стрічка каналу';
 

lib/widgets/message_list.dart

@@ -24,6 +24,7 @@ import 'sticky_header.dart';
 import 'store.dart';
 import 'text.dart';
 import 'theme.dart';
+import 'topic_list.dart';
 
 /// Message-list styles that differ between light and dark themes.
 class MessageListTheme extends ThemeExtension<MessageListTheme> {
@@ -220,14 +221,23 @@ class _MessageListPageState extends State<MessageListPage> implements MessageLis
         removeAppBarBottomBorder = true;
     }
 
-    List<Widget>? actions;
-    if (narrow case TopicNarrow(:final streamId)) {
-      (actions ??= []).add(IconButton(
-        icon: const Icon(ZulipIcons.message_feed),
-        tooltip: zulipLocalizations.channelFeedButtonTooltip,
-        onPressed: () => Navigator.push(context,
-          MessageListPage.buildRoute(context: context,
-            narrow: ChannelNarrow(streamId)))));
+    List<Widget> actions = [];
+    switch (narrow) {
+      case CombinedFeedNarrow():
+      case MentionsNarrow():
+      case StarredMessagesNarrow():
+      case DmNarrow():
+        break;
+      case ChannelNarrow(:final streamId):
+        actions.add(_TopicListButton(streamId: streamId));
+      case TopicNarrow(:final streamId):
+        actions.add(IconButton(
+          icon: const Icon(ZulipIcons.message_feed),
+          tooltip: zulipLocalizations.channelFeedButtonTooltip,
+          onPressed: () => Navigator.push(context,
+            MessageListPage.buildRoute(context: context,
+              narrow: ChannelNarrow(streamId)))));
+        actions.add(_TopicListButton(streamId: streamId));
     }
 
     // Insert a PageRoot here, to provide a context that can be used for
@@ -277,6 +287,35 @@ class _MessageListPageState extends State<MessageListPage> implements MessageLis
   }
 }
 
+class _TopicListButton extends StatelessWidget {
+  const _TopicListButton({required this.streamId});
+
+  final int streamId;
+
+  @override
+  Widget build(BuildContext context) {
+    final zulipLocalizations = ZulipLocalizations.of(context);
+    final designVariables = DesignVariables.of(context);
+    return GestureDetector(
+      onTap: () {
+        Navigator.of(context).push(TopicListPage.buildRoute(
+          context: context, streamId: streamId));
+      },
+      behavior: HitTestBehavior.opaque,
+      child: Padding(
+        padding: EdgeInsetsDirectional.fromSTEB(12, 8, 12, 8),
+        child: Center(child: Text(zulipLocalizations.topicsButtonLabel,
+          style: TextStyle(
+            color: designVariables.icon,
+            fontSize: 18,
+            height: 19 / 18,
+            // This is equivalent to css `all-small-caps`, see:
+            //   https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-caps#all-small-caps
+            fontFeatures: const [FontFeature.enable('c2sc'), FontFeature.enable('smcp')],
+          ).merge(weightVariableTextStyle(context, wght: 600))))));
+  }
+}
+
 class MessageListAppBarTitle extends StatelessWidget {
   const MessageListAppBarTitle({
     super.key,