From 9f28a99bc03a1908c928943d3b4fdd7820dd9ee7 Mon Sep 17 00:00:00 2001
From: Zixuan James Li <zixuan@zulip.com>
Date: Mon, 25 Nov 2024 14:00:09 -0500
Subject: [PATCH] msglist: Show channel name and topic name on two rows

This will eventually be superseded by #1039, so we should keep the
implementation as simple as possible for now.

The two-line app bar idea comes from the legacy mobile app.  This gives
us a place to show the topic visibility policy on the app bar.

References:
  https://github.com/zulip/zulip-mobile/blob/a115df1f71c9dc31e9b41060a8d57b51c017d786/src/title/TitleStream.js#L113-L141
  https://github.com/zulip/zulip-mobile/blob/a115df1f71c9dc31e9b41060a8d57b51c017d786/src/styles/navStyles.js#L5-L18

Signed-off-by: Zixuan James Li <zixuan@zulip.com>
---
 lib/widgets/message_list.dart       | 25 +++++++++++++++++++------
 test/widgets/message_list_test.dart |  2 +-
 2 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/lib/widgets/message_list.dart b/lib/widgets/message_list.dart
index f9e62f01ce..b6c15666a5 100644
--- a/lib/widgets/message_list.dart
+++ b/lib/widgets/message_list.dart
@@ -314,7 +314,6 @@ class MessageListAppBarTitle extends StatelessWidget {
 
   Widget _buildStreamRow(BuildContext context, {
     ZulipStream? stream,
-    required String text,
   }) {
     // A null [Icon.icon] makes a blank space.
     final icon = (stream != null) ? iconDataForStream(stream) : null;
@@ -327,10 +326,19 @@ class MessageListAppBarTitle extends StatelessWidget {
       children: [
         Icon(size: 16, icon),
         const SizedBox(width: 4),
-        Flexible(child: Text(text)),
+        Flexible(child: Text(stream?.name ?? '(unknown stream)')),
       ]);
   }
 
+  Widget _buildTopicRow(BuildContext context, {
+    required ZulipStream? stream,
+    required String topic,
+  }) {
+    return Text(topic, style: const TextStyle(
+      fontSize: 13,
+    ).merge(weightVariableTextStyle(context)));
+  }
+
   @override
   Widget build(BuildContext context) {
     final zulipLocalizations = ZulipLocalizations.of(context);
@@ -348,14 +356,19 @@ class MessageListAppBarTitle extends StatelessWidget {
       case ChannelNarrow(:var streamId):
         final store = PerAccountStoreWidget.of(context);
         final stream = store.streams[streamId];
-        final streamName = stream?.name ?? '(unknown channel)';
-        return _buildStreamRow(context, stream: stream, text: streamName);
+        return _buildStreamRow(context, stream: stream);
 
       case TopicNarrow(:var streamId, :var topic):
         final store = PerAccountStoreWidget.of(context);
         final stream = store.streams[streamId];
-        final streamName = stream?.name ?? '(unknown channel)';
-        return _buildStreamRow(context, stream: stream, text: "$streamName > $topic");
+        return Column(
+          // TODO(design): Determine if we want to use platform specific
+          //   alignment, i.e. centered on iOS, left aligned on Android.
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            _buildStreamRow(context, stream: stream),
+            _buildTopicRow(context, stream: stream, topic: topic),
+          ]);
 
       case DmNarrow(:var otherRecipientIds):
         final store = PerAccountStoreWidget.of(context);
diff --git a/test/widgets/message_list_test.dart b/test/widgets/message_list_test.dart
index 1bd7f798cf..3c8ba12213 100644
--- a/test/widgets/message_list_test.dart
+++ b/test/widgets/message_list_test.dart
@@ -725,7 +725,7 @@ void main() {
       ).length.equals(1);
       check(find.descendant(
         of: find.byType(MessageListAppBarTitle),
-        matching: find.text('${channel.name} > new topic')).evaluate()
+        matching: find.text('new topic')).evaluate()
       ).length.equals(1);
     });
   });