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 zulip#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: zulip#348

Signed-off-by: Zixuan James Li <[email protected]>

lib/widgets/message_list.dart

@@ -313,23 +313,33 @@ 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.
       //   For screenshots of some experiments, see:
       //     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);
@@ -347,14 +357,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);

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);
     });
   });