topics: Add topic list page

For the topic-list page app bar, we leave out the icon "chveron_down.svg"
since it's related to a new design (#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 #1158.

The topic-list implementation is quite similar to parts of inbox page
and message-list page.  Therefore, we structure the code to make them
look similar to compare for changes side-by-side to help with reviewing
what has changed.

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

Author: PIG208

assets/l10n/app_en.arb

@@ -713,6 +713,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

@@ -1064,6 +1064,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

@@ -584,6 +584,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_en.dart

@@ -584,6 +584,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

@@ -584,6 +584,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

@@ -584,6 +584,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

@@ -593,6 +593,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

@@ -597,6 +597,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

@@ -586,6 +586,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

@@ -596,6 +596,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,40 @@ 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):
+        final designVariables = DesignVariables.of(context);
+        final zulipLocalizations = ZulipLocalizations.of(context);
+        actions.add(GestureDetector(
+          onTap: () {
+            Navigator.of(context).push(TopicListPage.buildRoute(
+              context: context, streamId: streamId));
+          },
+          behavior: HitTestBehavior.opaque,
+          child: Padding(
+            padding: EdgeInsetsDirectional.fromSTEB(4, 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)))))));
+      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)))));
     }
 
     // Insert a PageRoot here, to provide a context that can be used for