autocomplete: Implement new design for @-mention autocomplete items

Implemented new design for @-mention autocomplete items.
Added new `contextMenuItemLabel` and `contextMenuItemMeta`
color variables to `designVariables` class.

Fixes: #913

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

Author: fombalang

lib/widgets/autocomplete.dart

@@ -11,6 +11,8 @@ import '../model/autocomplete.dart';
 import '../model/compose.dart';
 import '../model/narrow.dart';
 import 'compose_box.dart';
+import 'text.dart';
+import 'theme.dart';
 
 abstract class AutocompleteField<QueryT extends AutocompleteQuery, ResultT extends AutocompleteResult> extends StatefulWidget {
   const AutocompleteField({
@@ -218,6 +220,8 @@ class ComposeAutocomplete extends AutocompleteField<ComposeAutocompleteQuery, Co
 
   @override
   Widget buildItem(BuildContext context, int index, ComposeAutocompleteResult option) {
+    final designVariables = DesignVariables.of(context);
+
     final child = switch (option) {
       MentionAutocompleteResult() => _MentionAutocompleteItem(
         option: option, narrow: narrow),
@@ -227,6 +231,9 @@ class ComposeAutocomplete extends AutocompleteField<ComposeAutocompleteQuery, Co
       onTap: () {
         _onTapOption(context, option);
       },
+      highlightColor: designVariables.editorButtonPressedBg,
+      splashFactory: NoSplash.splashFactory,
+      borderRadius: BorderRadius.circular(5),
       child: child);
   }
 }
@@ -237,14 +244,14 @@ class _MentionAutocompleteItem extends StatelessWidget {
   final MentionAutocompleteResult option;
   final Narrow narrow;
 
-  Widget wildcardLabel(WildcardMentionOption wildcardOption, {
+  String wildcardSublabel(WildcardMentionOption wildcardOption, {
     required BuildContext context,
     required PerAccountStore store,
   }) {
     final isDmNarrow = narrow is DmNarrow;
     final isChannelWildcardAvailable = store.zulipFeatureLevel >= 247; // TODO(server-9)
     final localizations = ZulipLocalizations.of(context);
-    final description = switch (wildcardOption) {
+    return switch (wildcardOption) {
       WildcardMentionOption.all || WildcardMentionOption.everyone => isDmNarrow
         ? localizations.wildcardMentionAllDmDescription
         : isChannelWildcardAvailable
@@ -256,32 +263,61 @@ class _MentionAutocompleteItem extends StatelessWidget {
         : localizations.wildcardMentionStreamDescription,
       WildcardMentionOption.topic => localizations.wildcardMentionTopicDescription,
     };
-    return Text.rich(TextSpan(text: '${wildcardOption.canonicalString} ', children: [
-      TextSpan(text: description, style: TextStyle(fontSize: 12,
-        color: DefaultTextStyle.of(context).style.color?.withValues(alpha: 0.8)))]));
   }
 
   @override
   Widget build(BuildContext context) {
     final store = PerAccountStoreWidget.of(context);
+    final designVariables = DesignVariables.of(context);
+
     Widget avatar;
-    Widget label;
+    String label;
+    String? sublabel;
     switch (option) {
       case UserMentionAutocompleteResult(:var userId):
         final user = store.getUser(userId)!; // must exist because UserMentionAutocompleteResult
-        avatar = Avatar(userId: userId, size: 32, borderRadius: 3); // web uses 21px
-        label = Text(user.fullName);
+        avatar = Avatar(userId: userId, size: 36, borderRadius: 4);
+        label = user.fullName;
+        sublabel = store.userDisplayEmail(user);
       case WildcardMentionAutocompleteResult(:var wildcardOption):
-        avatar = const Icon(ZulipIcons.three_person, size: 29); // web uses 19px
-        label = wildcardLabel(wildcardOption, context: context, store: store);
+        avatar = SizedBox.square(dimension: 36,
+          child: const Icon(ZulipIcons.three_person, size: 24));
+        label = wildcardOption.canonicalString;
+        sublabel = wildcardSublabel(wildcardOption, context: context, store: store);
     }
 
+    final labelWidget = Text(
+      label,
+      style: TextStyle(
+        fontSize: 18,
+        height: 20 / 18,
+        color: designVariables.contextMenuItemLabel,
+      ).merge(weightVariableTextStyle(context,
+          wght: sublabel == null ? 500 : 600)),
+      overflow: TextOverflow.ellipsis,
+      maxLines: 1);
+
+    final sublabelWidget = sublabel == null ? null : Text(
+      sublabel,
+      style: TextStyle(
+        fontSize: 14,
+        height: 16 / 14,
+        color: designVariables.contextMenuItemMeta),
+      overflow: TextOverflow.ellipsis,
+      maxLines: 1);
+
     return Padding(
-      padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),
+      padding: const EdgeInsetsDirectional.fromSTEB(4, 4, 8, 4),
       child: Row(children: [
         avatar,
-        const SizedBox(width: 8),
-        label,
+        const SizedBox(width: 6),
+        Expanded(child: Column(
+          mainAxisSize: MainAxisSize.min,
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            labelWidget,
+            if (sublabelWidget != null) sublabelWidget,
+          ])),
       ]));
   }
 }

lib/widgets/theme.dart

@@ -136,6 +136,8 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
     composeBoxBg: const Color(0xffffffff),
     contextMenuCancelText: const Color(0xff222222),
     contextMenuItemBg: const Color(0xff6159e1),
+    contextMenuItemLabel: const Color(0xff242631),
+    contextMenuItemMeta: const Color(0xff626573),
     contextMenuItemText: const Color(0xff381da7),
     editorButtonPressedBg: Colors.black.withValues(alpha: 0.06),
     foreground: const Color(0xff000000),
@@ -184,6 +186,8 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
     composeBoxBg: const Color(0xff0f0f0f),
     contextMenuCancelText: const Color(0xffffffff).withValues(alpha: 0.75),
     contextMenuItemBg: const Color(0xff7977fe),
+    contextMenuItemLabel: const Color(0xffdfe1e8),
+    contextMenuItemMeta: const Color(0xff9194a3),
     contextMenuItemText: const Color(0xff9398fd),
     editorButtonPressedBg: Colors.white.withValues(alpha: 0.06),
     foreground: const Color(0xffffffff),
@@ -240,6 +244,8 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
     required this.composeBoxBg,
     required this.contextMenuCancelText,
     required this.contextMenuItemBg,
+    required this.contextMenuItemLabel,
+    required this.contextMenuItemMeta,
     required this.contextMenuItemText,
     required this.editorButtonPressedBg,
     required this.foreground,
@@ -297,6 +303,8 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
   final Color composeBoxBg;
   final Color contextMenuCancelText;
   final Color contextMenuItemBg;
+  final Color contextMenuItemLabel;
+  final Color contextMenuItemMeta;
   final Color contextMenuItemText;
   final Color editorButtonPressedBg;
   final Color foreground;
@@ -349,6 +357,8 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
     Color? composeBoxBg,
     Color? contextMenuCancelText,
     Color? contextMenuItemBg,
+    Color? contextMenuItemLabel,
+    Color? contextMenuItemMeta,
     Color? contextMenuItemText,
     Color? editorButtonPressedBg,
     Color? foreground,
@@ -396,6 +406,8 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
       composeBoxBg: composeBoxBg ?? this.composeBoxBg,
       contextMenuCancelText: contextMenuCancelText ?? this.contextMenuCancelText,
       contextMenuItemBg: contextMenuItemBg ?? this.contextMenuItemBg,
+      contextMenuItemLabel: contextMenuItemLabel ?? this.contextMenuItemLabel,
+      contextMenuItemMeta: contextMenuItemMeta ?? this.contextMenuItemMeta,
       contextMenuItemText: contextMenuItemText ?? this.contextMenuItemBg,
       editorButtonPressedBg: editorButtonPressedBg ?? this.editorButtonPressedBg,
       foreground: foreground ?? this.foreground,
@@ -450,6 +462,8 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
       composeBoxBg: Color.lerp(composeBoxBg, other.composeBoxBg, t)!,
       contextMenuCancelText: Color.lerp(contextMenuCancelText, other.contextMenuCancelText, t)!,
       contextMenuItemBg: Color.lerp(contextMenuItemBg, other.contextMenuItemBg, t)!,
+      contextMenuItemLabel: Color.lerp(contextMenuItemLabel, other.contextMenuItemLabel, t)!,
+      contextMenuItemMeta: Color.lerp(contextMenuItemMeta, other.contextMenuItemMeta, t)!,
       contextMenuItemText: Color.lerp(contextMenuItemText, other.contextMenuItemBg, t)!,
       editorButtonPressedBg: Color.lerp(editorButtonPressedBg, other.editorButtonPressedBg, t)!,
       foreground: Color.lerp(foreground, other.foreground, t)!,

test/widgets/autocomplete_test.dart

@@ -14,7 +14,6 @@ import 'package:zulip/model/narrow.dart';
 import 'package:zulip/model/store.dart';
 import 'package:zulip/model/typing_status.dart';
 import 'package:zulip/widgets/compose_box.dart';
-import 'package:zulip/widgets/icons.dart';
 import 'package:zulip/widgets/content.dart';
 import 'package:zulip/widgets/message_list.dart';
 
@@ -201,11 +200,7 @@ void main() {
     });
 
     void checkWildcardShown(WildcardMentionOption wildcard, {required bool expected}) {
-      final richTextFinder = find.textContaining(wildcard.canonicalString, findRichText: true);
-      final iconFinder = find.byIcon(ZulipIcons.three_person);
-      final wildcardItemFinder = find.ancestor(of: richTextFinder,
-        matching: find.ancestor(of: iconFinder, matching: find.byType(Row)));
-      check(wildcardItemFinder).findsExactly(expected ? 1 : 0);
+      check(find.text(wildcard.canonicalString)).findsExactly(expected ? 1 : 0);
     }
 
     testWidgets('wildcard options appear, disappear, and change correctly', (tester) async {
@@ -226,8 +221,7 @@ void main() {
       checkWildcardShown(WildcardMentionOption.stream, expected: false);
 
       // Finishing autocomplete updates compose box; causes options to disappear
-      await tester.tap(find.textContaining(WildcardMentionOption.channel.canonicalString,
-        findRichText: true));
+      await tester.tap(find.text(WildcardMentionOption.channel.canonicalString));
       await tester.pump();
       check(tester.widget<TextField>(composeInputFinder).controller!.text)
         .contains(wildcardMention(WildcardMentionOption.channel, store: store));
@@ -239,6 +233,67 @@ void main() {
 
       debugNetworkImageHttpClientProvider = null;
     });
+
+    group('sublabel', () {
+      Finder findLabelsForItem({required Finder itemFinder}) {
+        final itemColumn = find.ancestor(
+          of: itemFinder,
+          matching: find.byType(Column),
+        ).first;
+        return find.descendant(of: itemColumn, matching: find.byType(Text));
+      }
+
+      testWidgets('no sublabel when delivery email is unavailable', (tester) async {
+        final user = eg.user(fullName: 'User One', deliveryEmail: null);
+        final composeInputFinder = await setupToComposeInput(tester, users: [user]);
+
+        // TODO(#226): Remove this extra edit when this bug is fixed.
+        await tester.enterText(composeInputFinder, 'hello @user ');
+        await tester.enterText(composeInputFinder, 'hello @user o');
+        await tester.pumpAndSettle(); // async computation; options appear
+
+        checkUserShown(user, expected: true);
+        check(find.text(user.email)).findsNothing();
+        check(findLabelsForItem(
+          itemFinder: find.text(user.fullName))).findsOne();
+
+        debugNetworkImageHttpClientProvider = null;
+      });
+
+      testWidgets('show sublabel when delivery email is available', (tester) async {
+        final user = eg.user(fullName: 'User One', deliveryEmail: '[email protected]');
+        final composeInputFinder = await setupToComposeInput(tester, users: [user]);
+
+        // TODO(#226): Remove this extra edit when this bug is fixed.
+        await tester.enterText(composeInputFinder, 'hello @user ');
+        await tester.enterText(composeInputFinder, 'hello @user o');
+        await tester.pumpAndSettle(); // async computation; options appear
+
+        checkUserShown(user, expected: true);
+        check(find.text(user.deliveryEmail!)).findsOne();
+        check(findLabelsForItem(
+          itemFinder: find.text(user.fullName))).findsExactly(2);
+
+        debugNetworkImageHttpClientProvider = null;
+      });
+
+      testWidgets('show sublabel for wildcard mention items', (tester) async {
+        final composeInputFinder = await setupToComposeInput(tester,
+          narrow: const ChannelNarrow(1));
+
+        // TODO(#226): Remove this extra edit when this bug is fixed.
+        await tester.enterText(composeInputFinder, '@chann');
+        await tester.enterText(composeInputFinder, '@channe');
+        await tester.pumpAndSettle(); // async computation; options appear
+
+        checkWildcardShown(WildcardMentionOption.channel, expected: true);
+        check(find.text('Notify channel')).findsOne();
+        check(findLabelsForItem(
+          itemFinder: find.text('channel'))).findsExactly(2);
+
+        debugNetworkImageHttpClientProvider = null;
+      });
+    });
   });
 
   group('emoji', () {