channel: Finish channel link autocomplete for compose box

Figma design:
  https://www.figma.com/design/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=7952-30060&t=YfdW2W1p4ROsq9db-0

Fixes-partly: #124

Author: sm-sayedi

lib/model/compose.dart

@@ -235,6 +235,17 @@ String fallbackMarkdownLink({
   return inlineLink(text.toString(), '#$linkFragment');
 }
 
+/// A #channel link syntax of a channel, like #**announce**.
+///
+/// [fallbackMarkdownLink] will be used if the channel name includes some faulty
+/// characters that will break normal #**channel** rendering.
+String channelLink(ZulipStream channel, {required PerAccountStore store}) {
+  if (_channelTopicFaultyCharsRegex.hasMatch(channel.name)) {
+    return fallbackMarkdownLink(store: store, channel: channel);
+  }
+  return '#**${channel.name}**';
+}
+
 /// https://spec.commonmark.org/0.30/#inline-link
 ///
 /// The "link text" is made by enclosing [visibleText] in square brackets.

lib/widgets/autocomplete.dart

@@ -45,8 +45,7 @@ class _AutocompleteFieldState<QueryT extends AutocompleteQuery, ResultT extends
   }
 
   void _handleControllerChange() {
-    var newQuery = widget.autocompleteIntent()?.query;
-    if (newQuery is ChannelLinkAutocompleteQuery) newQuery = null; // TODO(#124)
+    final newQuery = widget.autocompleteIntent()?.query;
     // First, tear down the old view-model if necessary.
     if (_viewModel != null
         && (newQuery == null
@@ -227,8 +226,17 @@ class ComposeAutocomplete extends AutocompleteField<ComposeAutocompleteQuery, Co
         // TODO(#1805) language-appropriate space character; check active keyboard?
         //   (maybe handle centrally in `controller`)
         replacementString = '${userGroupMention(userGroup.name, silent: query.silent)} ';
-      case ChannelLinkAutocompleteResult():
-        throw UnimplementedError(); // TODO(#124)
+      case ChannelLinkAutocompleteResult(:final channelId):
+        if (query is! ChannelLinkAutocompleteQuery) {
+          return; // Shrug; similar to `intent == null` case above.
+        }
+        final channel = store.streams[channelId];
+        if (channel == null) {
+          // Don't crash on theoretical race between async results-filtering
+          // and losing data for the channel.
+          return;
+        }
+        replacementString = '${channelLink(channel, store: store)} ';
     }
 
     controller.value = intent.textEditingValue.replaced(
@@ -246,7 +254,7 @@ class ComposeAutocomplete extends AutocompleteField<ComposeAutocompleteQuery, Co
     final child = switch (option) {
       MentionAutocompleteResult() => MentionAutocompleteItem(
         option: option, narrow: narrow),
-      ChannelLinkAutocompleteResult() => throw UnimplementedError(), // TODO(#124)
+      ChannelLinkAutocompleteResult() => _ChannelLinkAutocompleteItem(option: option),
       EmojiAutocompleteResult() => _EmojiAutocompleteItem(option: option),
     };
     return InkWell(
@@ -361,6 +369,51 @@ class MentionAutocompleteItem extends StatelessWidget {
   }
 }
 
+class _ChannelLinkAutocompleteItem extends StatelessWidget {
+  const _ChannelLinkAutocompleteItem({required this.option});
+
+  final ChannelLinkAutocompleteResult option;
+
+  @override
+  Widget build(BuildContext context) {
+    final store = PerAccountStoreWidget.of(context);
+    final zulipLocalizations = ZulipLocalizations.of(context);
+    final designVariables = DesignVariables.of(context);
+
+    final channel = store.streams[option.channelId];
+
+    // A null [Icon.icon] makes a blank space.
+    IconData? icon;
+    Color? iconColor;
+    String label;
+    if (channel != null) {
+      icon = iconDataForStream(channel);
+      iconColor = colorSwatchFor(context, store.subscriptions[channel.streamId])
+        .iconOnPlainBackground;
+      label = channel.name;
+    } else {
+      icon = null;
+      iconColor = null;
+      label = zulipLocalizations.unknownChannelName;
+    }
+
+    final labelWidget = Text(label,
+      overflow: TextOverflow.ellipsis,
+      style: TextStyle(
+        fontSize: 18, height: 20 / 18,
+        fontStyle: channel == null ? FontStyle.italic : FontStyle.normal,
+        color: designVariables.contextMenuItemLabel,
+      ).merge(weightVariableTextStyle(context, wght: 600)));
+
+    return Padding(
+      padding: EdgeInsetsDirectional.fromSTEB(4, 4, 8, 4),
+      child: Row(spacing: 6, children: [
+        SizedBox.square(dimension: 36, child: Icon(size: 18, color: iconColor, icon)),
+        Expanded(child: labelWidget), // TODO(#1945): show channel description
+      ]));
+  }
+}
+
 class _EmojiAutocompleteItem extends StatelessWidget {
   const _EmojiAutocompleteItem({required this.option});
 

test/model/compose_test.dart

@@ -367,6 +367,48 @@ hello
       .throws<AssertionError>();
   });
 
+  group('channel link', () {
+    test('channels with normal names', () async {
+      final store = eg.store();
+      final channels = [
+        eg.stream(name: 'mobile'),
+        eg.stream(name: 'dev-ops'),
+        eg.stream(name: 'ui/ux'),
+        eg.stream(name: 'api_v3'),
+        eg.stream(name: 'build+test'),
+        eg.stream(name: 'init()'),
+      ];
+      await store.addStreams(channels);
+
+      check(channelLink(channels[0], store: store)).equals('#**mobile**');
+      check(channelLink(channels[1], store: store)).equals('#**dev-ops**');
+      check(channelLink(channels[2], store: store)).equals('#**ui/ux**');
+      check(channelLink(channels[3], store: store)).equals('#**api_v3**');
+      check(channelLink(channels[4], store: store)).equals('#**build+test**');
+      check(channelLink(channels[5], store: store)).equals('#**init()**');
+    });
+
+    test('channels with names containing faulty characters', () async {
+      final store = eg.store();
+      final channels = [
+        eg.stream(streamId: 1, name: '`code`'),
+        eg.stream(streamId: 2, name: 'score > 90'),
+        eg.stream(streamId: 3, name: 'A*'),
+        eg.stream(streamId: 4, name: 'R&D'),
+        eg.stream(streamId: 5, name: 'UI [v2]'),
+        eg.stream(streamId: 6, name: r'Save $$'),
+      ];
+      await store.addStreams(channels);
+
+      check(channelLink(channels[1 - 1], store: store)).equals('[&#96;code&#96;](#narrow/channel/1-.60code.60)');
+      check(channelLink(channels[2 - 1], store: store)).equals('[score &gt; 90](#narrow/channel/2-score-.3E-90)');
+      check(channelLink(channels[3 - 1], store: store)).equals('[A&#42;](#narrow/channel/3-A*)');
+      check(channelLink(channels[4 - 1], store: store)).equals('[R&amp;D](#narrow/channel/4-R.26D)');
+      check(channelLink(channels[5 - 1], store: store)).equals('[UI &#91;v2&#93;](#narrow/channel/5-UI-.5Bv2.5D)');
+      check(channelLink(channels[6 - 1], store: store)).equals('[Save &#36;&#36;](#narrow/channel/6-Save-.24.24)');
+    });
+  });
+
   test('inlineLink', () {
     check(inlineLink('CZO', 'https://chat.zulip.org/')).equals('[CZO](https://chat.zulip.org/)');
     check(inlineLink('Uploading file.txt…', '')).equals('[Uploading file.txt…]()');

test/widgets/autocomplete_test.dart

@@ -16,6 +16,7 @@ import 'package:zulip/model/store.dart';
 import 'package:zulip/model/typing_status.dart';
 import 'package:zulip/widgets/autocomplete.dart';
 import 'package:zulip/widgets/compose_box.dart';
+import 'package:zulip/widgets/icons.dart';
 import 'package:zulip/widgets/image.dart';
 import 'package:zulip/widgets/message_list.dart';
 import 'package:zulip/widgets/user.dart';
@@ -355,6 +356,58 @@ void main() {
     });
   });
 
+  group('#channel link', () {
+    void checkChannelShown(ZulipStream channel, {required bool expected}) {
+      check(find.byIcon(iconDataForStream(channel))).findsAtLeast(expected ? 1 : 0);
+      check(find.text(channel.name)).findsExactly(expected ? 1 : 0);
+    }
+
+    testWidgets('user options appear, disappear, and change correctly', (tester) async {
+      final channel1 = eg.stream(name: 'mobile');
+      final channel2 = eg.stream(name: 'mobile design');
+      final channel3 = eg.stream(name: 'mobile dev help');
+      final composeInputFinder = await setupToComposeInput(tester,
+        channels: [channel1, channel2, channel3]);
+      final store = await testBinding.globalStore.perAccount(eg.selfAccount.id);
+
+      // Options are filtered correctly for query.
+      // TODO(#226): Remove this extra edit when this bug is fixed.
+      await tester.enterText(composeInputFinder, 'check #mobile ');
+      await tester.enterText(composeInputFinder, 'check #mobile de');
+      await tester.pumpAndSettle(); // async computation; options appear
+
+      checkChannelShown(channel1, expected: false);
+      checkChannelShown(channel2, expected: true);
+      checkChannelShown(channel3, expected: true);
+
+      // Finishing autocomplete updates compose box; causes options to disappear.
+      await tester.tap(find.text('mobile design'));
+      await tester.pump();
+      check(tester.widget<TextField>(composeInputFinder).controller!.text)
+        .contains(channelLink(channel2, store: store));
+      checkChannelShown(channel1, expected: false);
+      checkChannelShown(channel2, expected: false);
+      checkChannelShown(channel3, expected: false);
+
+      // Then a new autocomplete intent brings up options again.
+      // TODO(#226): Remove this extra edit when this bug is fixed.
+      await tester.enterText(composeInputFinder, 'check #mobile de');
+      await tester.enterText(composeInputFinder, 'check #mobile dev');
+      await tester.pumpAndSettle(); // async computation; options appear
+      checkChannelShown(channel3, expected: true);
+
+      // Removing autocomplete intent causes options to disappear.
+      // TODO(#226): Remove this extra edit when this bug is fixed.
+      await tester.enterText(composeInputFinder, 'check ');
+      await tester.enterText(composeInputFinder, 'check');
+      checkChannelShown(channel1, expected: false);
+      checkChannelShown(channel2, expected: false);
+      checkChannelShown(channel3, expected: false);
+
+      debugNetworkImageHttpClientProvider = null;
+    });
+  });
+
   group('emoji', () {
     void checkEmojiShown(ExpectedEmoji option, {required bool expected}) {
       final (label, display) = option;