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

@@ -185,6 +185,69 @@ String wildcardMention(WildcardMentionOption wildcardOption, {
 String userGroupMention(String userGroupName, {bool silent = false}) =>
   '@${silent ? '_' : ''}*$userGroupName*';
 
+// Corresponds to `topic_link_util.escape_invalid_stream_topic_characters`
+// in Zulip web:
+//   https://github.com/zulip/zulip/blob/b42d3e77e/web/src/topic_link_util.ts#L15-L34
+const _channelTopicFaultyCharsReplacements = {
+  '`': '`',
+  '>': '>',
+  '*': '*',
+  '&': '&',
+  '[': '[',
+  ']': ']',
+  r'$$': '$$',
+};
+
+final _channelTopicFaultyCharsRegex = RegExp(r'[`>*&[\]]|(?:\$\$)');
+
+/// Markdown link for channel, topic, or message when the channel or topic name
+/// includes characters that will break normal markdown rendering.
+///
+/// Refer to [_channelTopicFaultyCharsReplacements] for a complete list of
+/// these characters.
+// Corresponds to `topic_link_util.get_fallback_markdown_link` in Zulip web;
+//   https://github.com/zulip/zulip/blob/b42d3e77e/web/src/topic_link_util.ts#L96-L108
+String fallbackMarkdownLink({
+  required PerAccountStore store,
+  required ZulipStream channel,
+  TopicName? topic,
+  int? nearMessageId,
+}) {
+  assert(nearMessageId == null || topic != null);
+
+  String replaceFaultyChars(String str) {
+    return str.replaceAllMapped(_channelTopicFaultyCharsRegex,
+      (match) => _channelTopicFaultyCharsReplacements[match[0]]!);
+  }
+
+  final text = StringBuffer(replaceFaultyChars(channel.name));
+  if (topic != null) {
+    text.write(' > ${replaceFaultyChars(topic.displayName ?? store.realmEmptyTopicDisplayName)}');
+  }
+  if (nearMessageId != null) {
+    text.write(' @ 💬');
+  }
+
+  final narrow = topic == null
+    ? ChannelNarrow(channel.streamId) : TopicNarrow(channel.streamId, topic);
+  final linkFragment = narrowLinkFragment(store, narrow, nearMessageId: nearMessageId);
+
+  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 channelLinkSyntax(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 = '${channelLinkSyntax(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,52 @@ 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,
+        color: designVariables.contextMenuItemLabel,
+      ).merge(weightVariableTextStyle(context, wght: 600)));
+
+    return Padding(
+      padding: EdgeInsetsDirectional.fromSTEB(12, 4, 10, 4),
+      child: Row(spacing: 10, children: [
+        SizedBox.square(dimension: 24,
+          child: Icon(size: 18, color: iconColor, icon)),
+        // TODO(#1945): show channel description
+        Expanded(child: labelWidget),
+      ]));
+  }
+}
+
 class _EmojiAutocompleteItem extends StatelessWidget {
   const _EmojiAutocompleteItem({required this.option});
 

test/model/compose_test.dart

@@ -1,6 +1,7 @@
 import 'package:checks/checks.dart';
 import 'package:test/scaffolding.dart';
 import 'package:zulip/api/model/events.dart';
+import 'package:zulip/api/model/model.dart';
 import 'package:zulip/model/compose.dart';
 import 'package:zulip/model/localizations.dart';
 import 'package:zulip/model/store.dart';
@@ -334,6 +335,80 @@ hello
     });
   });
 
+  test('fallbackMarkdownLink', () 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(fallbackMarkdownLink(store: store,
+        channel: channels[1 - 1]))
+      .equals('[`code`](#narrow/channel/1-.60code.60)');
+    check(fallbackMarkdownLink(store: store,
+        channel: channels[2 - 1], topic: TopicName('topic')))
+      .equals('[score > 90 > topic](#narrow/channel/2-score-.3E-90/topic/topic)');
+    check(fallbackMarkdownLink(store: store,
+        channel: channels[3 - 1], topic: TopicName('R&D')))
+      .equals('[A* > R&D](#narrow/channel/3-A*/topic/R.26D)');
+    check(fallbackMarkdownLink(store: store,
+        channel: channels[4 - 1], topic: TopicName('topic'), nearMessageId: 10))
+      .equals('[R&D > topic @ 💬](#narrow/channel/4-R.26D/topic/topic/near/10)');
+    check(fallbackMarkdownLink(store: store,
+        channel: channels[5 - 1], topic: TopicName(r'Save $$'), nearMessageId: 10))
+      .equals('[UI [v2] > Save $$ @ 💬](#narrow/channel/5-UI-.5Bv2.5D/topic/Save.20.24.24/near/10)');
+    check(() => fallbackMarkdownLink(store: store,
+        channel: channels[6 - 1], nearMessageId: 10))
+      .throws<AssertionError>();
+  });
+
+  group('channel link syntax', () {
+    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(channelLinkSyntax(channels[0], store: store)).equals('#**mobile**');
+      check(channelLinkSyntax(channels[1], store: store)).equals('#**dev-ops**');
+      check(channelLinkSyntax(channels[2], store: store)).equals('#**ui/ux**');
+      check(channelLinkSyntax(channels[3], store: store)).equals('#**api_v3**');
+      check(channelLinkSyntax(channels[4], store: store)).equals('#**build+test**');
+      check(channelLinkSyntax(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(channelLinkSyntax(channels[1 - 1], store: store)).equals('[&#96;code&#96;](#narrow/channel/1-.60code.60)');
+      check(channelLinkSyntax(channels[2 - 1], store: store)).equals('[score &gt; 90](#narrow/channel/2-score-.3E-90)');
+      check(channelLinkSyntax(channels[3 - 1], store: store)).equals('[A&#42;](#narrow/channel/3-A*)');
+      check(channelLinkSyntax(channels[4 - 1], store: store)).equals('[R&amp;D](#narrow/channel/4-R.26D)');
+      check(channelLinkSyntax(channels[5 - 1], store: store)).equals('[UI &#91;v2&#93;](#narrow/channel/5-UI-.5Bv2.5D)');
+      check(channelLinkSyntax(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/message_list.dart';
 import 'package:zulip/widgets/user.dart';
 
@@ -354,6 +355,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(channelLinkSyntax(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 one of these edits 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;