From a944337cb202d0549e25faf588cc3dcb0337bf01 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] wip; msglist: Show channel name and topic name on two rows

This mostly follows the legacy mobile app. Notably, this changes the
title text to use normal font weight (wght=400), and breaks the text
into two rows for topic narrow.  This will eventually be superseded
by #1039, so we should keep the implementation as simple as possible for
now.

There are some differences from the old design:

The legacy mobile uses different colors for the title text, depending on
the color of the channel, to make the text more visible.  We currently
don't do that, so the text just uses the ambient color.

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

Fixes: #348

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

diff --git a/lib/widgets/message_list.dart b/lib/widgets/message_list.dart
index ead672df53..aaac124940 100644
--- a/lib/widgets/message_list.dart
+++ b/lib/widgets/message_list.dart
@@ -314,10 +314,8 @@ 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;
+    final icon = (stream == null) ? ZulipIcons.hash_sign : iconDataForStream(stream);
     return Row(
       mainAxisSize: MainAxisSize.min,
       // TODO(design): The vertical alignment of the stream privacy icon is a bit ad hoc.
@@ -325,12 +323,24 @@ class MessageListAppBarTitle extends StatelessWidget {
       //     https://github.com/zulip/zulip-flutter/pull/219#discussion_r1281024746
       crossAxisAlignment: CrossAxisAlignment.center,
       children: [
-        Icon(size: 16, icon),
-        const SizedBox(width: 4),
-        Flexible(child: Text(text)),
+        Padding(padding: const EdgeInsetsDirectional.only(end: 8.0),
+          child: Icon(size: 20, icon)),
+        Flexible(child: Text(stream?.name ?? '(unknown stream)',
+          style: const TextStyle(
+            fontSize: 20,
+          ).merge(weightVariableTextStyle(context)))),
       ]);
   }
 
+  Widget _buildTopicRow(BuildContext context, {
+    required ZulipStream? stream,
+    required String topic,
+  }) {
+    return Flexible(child: Text(topic, style: const TextStyle(
+      fontSize: 13,
+    ).merge(weightVariableTextStyle(context))));
+  }
+
   @override
   Widget build(BuildContext context) {
     final zulipLocalizations = ZulipLocalizations.of(context);
@@ -348,14 +358,17 @@ 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(
+          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);
     });
   });