action_sheet: Show channel name in channel action sheet

This excludes the channel description for now; that's #1896.

Fixes-partly: #1533

Author: chrisbobbe

lib/widgets/action_sheet.dart

@@ -502,7 +502,21 @@ void showChannelActionSheet(BuildContext context, {
       [UnsubscribeButton(pageContext: pageContext, channelId: channelId)],
   ];
 
-  _showActionSheet(pageContext, buttonSections: buttonSections);
+  final header = BottomSheetHeader(
+    buildTitle: (baseStyle) => Text.rich(
+      style: baseStyle,
+      channelTopicLabelSpan(
+        context: context,
+        channelId: channelId,
+        fontSize: baseStyle.fontSize!,
+        color: baseStyle.color!)),
+    // TODO(#1896) show channel description
+  );
+
+  _showActionSheet(pageContext,
+    header: header,
+    headerScrollable: false,
+    buttonSections: buttonSections);
 }
 
 class SubscribeButton extends ActionSheetMenuItemButton {

lib/widgets/text.dart

@@ -4,6 +4,9 @@ import 'package:flutter/foundation.dart';
 import 'package:flutter/gestures.dart';
 import 'package:flutter/material.dart';
 
+import '../generated/l10n/zulip_localizations.dart';
+import 'icons.dart';
+import 'store.dart';
 import 'theme.dart';
 
 /// An app-wide [Typography] for Zulip, customized from the Material default.
@@ -533,3 +536,139 @@ class _TextWithLinkState extends State<TextWithLink> {
       span);
   }
 }
+
+/// Data to size and position a square icon in a span of text.
+class InlineIconGeometryData {
+  /// What size the icon should be,
+  /// as a fraction of the surrounding text's font size.
+  final double sizeFactor;
+
+  /// Where to assign the icon's baseline, as a fraction of the icon's size,
+  /// when the span is rendered with [TextBaseline.alphabetic].
+  ///
+  /// This is ignored when the span is rendered with [TextBaseline.ideographic];
+  /// zero is used instead.
+  final double alphabeticBaselineFactor;
+
+  /// How much horizontal padding should separate the icon from surrounding text,
+  /// as a fraction of the icon's size.
+  final double paddingFactor;
+
+  const InlineIconGeometryData._({
+    required this.sizeFactor,
+    required this.alphabeticBaselineFactor,
+    required this.paddingFactor,
+  });
+
+  factory InlineIconGeometryData.forIcon(IconData icon) {
+    final result = _inlineIconGeometries[icon];
+    assert(result != null);
+    return result ?? _defaultGeometry;
+  }
+
+  // Values are ad hoc unless otherwise specified.
+  static final Map<IconData, InlineIconGeometryData> _inlineIconGeometries = {
+    ZulipIcons.globe: InlineIconGeometryData._(
+      sizeFactor: 0.8,
+      alphabeticBaselineFactor: 1 / 8,
+      paddingFactor: 1 / 4),
+
+    ZulipIcons.hash_sign: InlineIconGeometryData._(
+      sizeFactor: 0.8,
+      alphabeticBaselineFactor: 1 / 16,
+      paddingFactor: 1 / 4),
+
+    ZulipIcons.lock: InlineIconGeometryData._(
+      sizeFactor: 0.8,
+      alphabeticBaselineFactor: 1 / 16,
+      paddingFactor: 1 / 4),
+ };
+
+  static final _defaultGeometry = InlineIconGeometryData._(
+    sizeFactor: 0.8,
+    alphabeticBaselineFactor: 1 / 16,
+    paddingFactor: 1 / 4,
+  );
+}
+
+/// An icon, sized and aligned for use in a span of text.
+WidgetSpan iconWidgetSpan({
+  required IconData icon,
+  required double fontSize,
+  required TextBaseline baselineType,
+  required Color? color,
+  bool padBefore = false,
+  bool padAfter = false,
+}) {
+  final InlineIconGeometryData(
+    :sizeFactor,
+    :alphabeticBaselineFactor,
+    :paddingFactor,
+  ) = InlineIconGeometryData.forIcon(icon);
+
+  final size = sizeFactor * fontSize;
+
+  final effectiveBaselineOffset = switch (baselineType) {
+    TextBaseline.alphabetic => alphabeticBaselineFactor * size,
+    TextBaseline.ideographic => 0.0,
+  };
+
+  Widget child = Icon(size: size, color: color, icon);
+
+  if (effectiveBaselineOffset != 0) {
+    child = Transform.translate(
+      offset: Offset(0, effectiveBaselineOffset),
+      child: child);
+  }
+
+  if (padBefore || padAfter) {
+    final padding = paddingFactor * size;
+    child = Padding(
+      padding: EdgeInsetsDirectional.only(
+        start: padBefore ? padding : 0,
+        end: padAfter ? padding : 0,
+      ),
+      child: child);
+  }
+
+  return WidgetSpan(
+    alignment: PlaceholderAlignment.baseline,
+    baseline: baselineType,
+    child: child);
+}
+
+/// An [InlineSpan] with a channel privacy icon and channel name.
+///
+/// Pass this to [Text.rich], which can be styled arbitrarily.
+/// Pass the [fontSize] of surrounding text
+/// so that the icon is sized appropriately.
+InlineSpan channelTopicLabelSpan({
+  required BuildContext context,
+  required int channelId,
+  required double fontSize,
+  required Color color,
+}) {
+  final zulipLocalizations = ZulipLocalizations.of(context);
+  final store = PerAccountStoreWidget.of(context);
+  final channel = store.streams[channelId];
+  final subscription = store.subscriptions[channelId];
+  final swatch = colorSwatchFor(context, subscription);
+  final channelIcon = channel != null ? iconDataForStream(channel) : null;
+  final baselineType = localizedTextBaseline(context);
+
+  return TextSpan(children: [
+    if (channelIcon != null)
+      iconWidgetSpan(
+        icon: channelIcon,
+        fontSize: fontSize,
+        baselineType: baselineType,
+        color: swatch.iconOnPlainBackground,
+        padAfter: true),
+    if (channel != null)
+      TextSpan(text: channel.name)
+    else
+      TextSpan(
+        style: TextStyle(fontStyle: FontStyle.italic),
+        text: zulipLocalizations.unknownChannelName),
+  ]);
+}

test/api/model/model_checks.dart

@@ -54,6 +54,9 @@ extension SavedSnippetChecks on Subject<SavedSnippet> {
 
 extension ZulipStreamChecks on Subject<ZulipStream> {
   Subject<int> get streamId => has((x) => x.streamId, 'streamId');
+
+  Subject<bool> get inviteOnly => has((x) => x.inviteOnly, 'inviteOnly');
+  Subject<bool> get isWebPublic => has((x) => x.isWebPublic, 'isWebPublic');
 }
 
 extension ChannelFolderChecks on Subject<ChannelFolder> {

test/widgets/action_sheet_test.dart

@@ -38,6 +38,7 @@ import 'package:zulip/widgets/topic_list.dart';
 import 'package:zulip/widgets/user.dart';
 import '../api/fake_api.dart';
 
+import '../api/model/model_checks.dart';
 import '../example_data.dart' as eg;
 import '../flutter_checks.dart';
 import '../model/binding.dart';
@@ -292,6 +293,61 @@ void main() {
         checkButton('Copy link to channel');
       }
 
+      group('header', () {
+        final findHeader = find.descendant(
+          of: actionSheetFinder,
+          matching: find.byType(BottomSheetHeader));
+
+        Finder findInHeader(Finder finder) =>
+          find.descendant(of: findHeader, matching: finder);
+
+        testWidgets('public channel', (tester) async {
+          await prepare();
+          check(store.streams[someChannel.streamId]).isNotNull()
+            ..inviteOnly.isFalse()..isWebPublic.isFalse();
+          await showFromInbox(tester);
+          check(findInHeader(find.byIcon(ZulipIcons.hash_sign))).findsOne();
+          check(findInHeader(find.textContaining(someChannel.name))).findsOne();
+        });
+
+        testWidgets('web-public channel', (tester) async {
+          await prepare();
+          await store.handleEvent(ChannelUpdateEvent(id: 1,
+            streamId: someChannel.streamId,
+            name: someChannel.name,
+            property: null, value: null,
+            // (Ideally we'd use `property` and `value` but I'm not sure if
+            // modern servers actually do that or if they still use this
+            // separate field.)
+            isWebPublic: true));
+          check(store.streams[someChannel.streamId]).isNotNull()
+            ..inviteOnly.isFalse()..isWebPublic.isTrue();
+          await showFromInbox(tester);
+          check(findInHeader(find.byIcon(ZulipIcons.globe))).findsOne();
+          check(findInHeader(find.textContaining(someChannel.name))).findsOne();
+        });
+
+        testWidgets('private channel', (tester) async {
+          await prepare();
+          await store.handleEvent(eg.channelUpdateEvent(someChannel,
+            property: ChannelPropertyName.inviteOnly, value: true));
+          check(store.streams[someChannel.streamId]).isNotNull()
+            ..inviteOnly.isTrue()..isWebPublic.isFalse();
+          await showFromInbox(tester);
+          check(findInHeader(find.byIcon(ZulipIcons.lock))).findsOne();
+          check(findInHeader(find.textContaining(someChannel.name))).findsOne();
+        });
+
+        testWidgets('unknown channel', (tester) async {
+          await prepare();
+          await store.handleEvent(ChannelDeleteEvent(id: 1, streams: [someChannel]));
+          check(store.streams[someChannel.streamId]).isNull();
+          await showFromTopicListAppBar(tester);
+          check(findInHeader(find.byType(Icon))).findsNothing();
+          check(findInHeader(find.textContaining('(unknown channel)'))).findsOne();
+        });
+      });
+
       testWidgets('show from inbox', (tester) async {
         await prepare();
         await showFromInbox(tester);