msglist: Show channel name and topic name on two rows

This will eventually be superseded by zulip#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 <[email protected]>
PIG208 · Dec 10, 2024 · 9f28a99 · 9f28a99
1 parent 6db70db
commit 9f28a99
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 7 deletions.
diff --git 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
@@ -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);
     });
   });