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.

Updated autocomplete tests.

[greg: rebased atop _EmojiAutocompleteItem; added TODO items there]

Fixes: zulip#913

Author: fombalang

lib/widgets/autocomplete.dart

@@ -8,6 +8,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({
@@ -210,6 +212,7 @@ 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),
       EmojiAutocompleteResult() => _EmojiAutocompleteItem(option: option),
@@ -218,6 +221,9 @@ class ComposeAutocomplete extends AutocompleteField<ComposeAutocompleteQuery, Co
       onTap: () {
         _onTapOption(context, option);
       },
+      highlightColor: designVariables.editorButtonPressedBg,
+      splashFactory: NoSplash.splashFactory,
+      borderRadius: BorderRadius.circular(5),
       child: child);
   }
 }
@@ -229,20 +235,49 @@ class _MentionAutocompleteItem extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    final designVariables = DesignVariables.of(context);
+
     Widget avatar;
     String label;
+    String? subLabel;
     switch (option) {
       case UserMentionAutocompleteResult(:var userId):
-        avatar = Avatar(userId: userId, size: 32, borderRadius: 3);
-        label = PerAccountStoreWidget.of(context).users[userId]!.fullName;
+        final store = PerAccountStoreWidget.of(context);
+        final user = store.users[userId]!;
+        avatar = Avatar(userId: userId, size: 36, borderRadius: 4);
+        label = user.fullName;
+        subLabel = store.userDisplayEmail(user, store: store);
     }
 
     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),
-        Text(label),
+        const SizedBox(width: 6),
+        Expanded(child: Column(
+          mainAxisSize: MainAxisSize.min,
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            Text(
+              style: TextStyle(
+                fontSize: 18,
+                height: 20 / 18,
+                color: designVariables.contextMenuItemLabel,
+              )
+                .merge(weightVariableTextStyle(context, wght: 600)),
+              overflow: TextOverflow.ellipsis,
+              maxLines: 1,
+              label),
+            if (subLabel != null) Text(
+              style: TextStyle(
+                fontSize: 14,
+                height: 16 / 14,
+                color: designVariables.contextMenuItemMeta,
+              ),
+              overflow: TextOverflow.ellipsis,
+              maxLines: 1,
+              subLabel),
+          ])),
       ]));
   }
 }
@@ -252,6 +287,7 @@ class _EmojiAutocompleteItem extends StatelessWidget {
 
   final EmojiAutocompleteResult option;
 
+  // TODO adjust sizes to match _MentionAutocompleteItem avatar
   static const _size = 32.0;
   static const _notoColorEmojiTextSize = 25.7;
 
@@ -276,12 +312,13 @@ class _EmojiAutocompleteItem extends StatelessWidget {
       : [candidate.emojiName, ...candidate.aliases].join(", "); // TODO(#1080)
 
     return Padding(
-      padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),
+      padding: const EdgeInsetsDirectional.fromSTEB(4, 4, 8, 4),
       child: Row(children: [
         if (glyph != null) ...[
           glyph,
-          const SizedBox(width: 8),
+          const SizedBox(width: 6),
         ],
+        // TODO adjust text style to match _MentionAutocompleteItem
         Expanded(
           child: Text(
             maxLines: 2,

lib/widgets/theme.dart

@@ -121,6 +121,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),
@@ -161,6 +163,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),
@@ -208,6 +212,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,
@@ -256,6 +262,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;
@@ -299,6 +307,8 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
     Color? composeBoxBg,
     Color? contextMenuCancelText,
     Color? contextMenuItemBg,
+    Color? contextMenuItemLabel,
+    Color? contextMenuItemMeta,
     Color? contextMenuItemText,
     Color? editorButtonPressedBg,
     Color? foreground,
@@ -337,6 +347,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,
@@ -382,6 +394,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

@@ -131,16 +131,17 @@ void main() {
     Finder findAvatarImage(int userId) =>
       find.byWidgetPredicate((widget) => widget is AvatarImage && widget.userId == userId);
 
-    void checkUserShown(User user, PerAccountStore store, {required bool expected}) {
+    void checkUserShown(User user, {required bool expected}) {
       check(find.text(user.fullName).evaluate().length).equals(expected ? 1 : 0);
+      check(find.text(user.deliveryEmail!).evaluate().length).equals(expected ? 1 : 0);
       final avatarFinder = findAvatarImage(user.userId);
       check(avatarFinder.evaluate().length).equals(expected ? 1 : 0);
     }
 
     testWidgets('options appear, disappear, and change correctly', (tester) async {
-      final user1 = eg.user(userId: 1, fullName: 'User One', avatarUrl: 'user1.png');
-      final user2 = eg.user(userId: 2, fullName: 'User Two', avatarUrl: 'user2.png');
-      final user3 = eg.user(userId: 3, fullName: 'User Three', avatarUrl: 'user3.png');
+      final user1 = eg.user(userId: 1, fullName: 'User One', avatarUrl: 'user1.png',deliveryEmail: '[email protected]');
+      final user2 = eg.user(userId: 2, fullName: 'User Two', avatarUrl: 'user2.png', deliveryEmail: '[email protected]');
+      final user3 = eg.user(userId: 3, fullName: 'User Three', avatarUrl: 'user3.png', deliveryEmail: '[email protected]');
       final composeInputFinder = await setupToComposeInput(tester, users: [user1, user2, user3]);
       final store = await testBinding.globalStore.perAccount(eg.selfAccount.id);
 
@@ -151,33 +152,33 @@ void main() {
       await tester.pumpAndSettle(); // async computation; options appear
 
       // "User Two" and "User Three" appear, but not "User One"
-      checkUserShown(user1, store, expected: false);
-      checkUserShown(user2, store, expected: true);
-      checkUserShown(user3, store, expected: true);
+      checkUserShown(user1, expected: false);
+      checkUserShown(user2, expected: true);
+      checkUserShown(user3, expected: true);
 
       // Finishing autocomplete updates compose box; causes options to disappear
       await tester.tap(find.text('User Three'));
       await tester.pump();
       check(tester.widget<TextField>(composeInputFinder).controller!.text)
         .contains(mention(user3, users: store.users));
-      checkUserShown(user1, store, expected: false);
-      checkUserShown(user2, store, expected: false);
-      checkUserShown(user3, store, expected: false);
+      checkUserShown(user1, expected: false);
+      checkUserShown(user2, expected: false);
+      checkUserShown(user3, 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, 'hello @user tw');
       await tester.enterText(composeInputFinder, 'hello @user two');
       await tester.pumpAndSettle(); // async computation; options appear
-      checkUserShown(user2, store, expected: true);
+      checkUserShown(user2, 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, '');
       await tester.enterText(composeInputFinder, ' ');
-      checkUserShown(user1, store, expected: false);
-      checkUserShown(user2, store, expected: false);
-      checkUserShown(user3, store, expected: false);
+      checkUserShown(user1, expected: false);
+      checkUserShown(user2, expected: false);
+      checkUserShown(user3, expected: false);
 
       debugNetworkImageHttpClientProvider = null;
     });