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.

Fixes: zulip#913

Author: fombalang

lib/widgets/autocomplete.dart

@@ -1,11 +1,14 @@
 import 'package:flutter/material.dart';
 
-import 'content.dart';
-import 'store.dart';
+import '../api/model/model.dart';
 import '../model/autocomplete.dart';
 import '../model/compose.dart';
 import '../model/narrow.dart';
 import 'compose_box.dart';
+import 'content.dart';
+import 'store.dart';
+import 'text.dart';
+import 'theme.dart';
 
 abstract class AutocompleteField<QueryT extends AutocompleteQuery, ResultT extends AutocompleteResult> extends StatefulWidget {
   const AutocompleteField({
@@ -195,24 +198,56 @@ class ComposeAutocomplete extends AutocompleteField<MentionAutocompleteQuery, Me
 
   @override
   Widget buildItem(BuildContext context, int index, MentionAutocompleteResult option) {
+    final designVariables = DesignVariables.of(context);
     Widget avatar;
     String label;
+    String? metadata;
+
     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;
+        metadata = getDisplayEmailFor(user, store: store);
     }
     return InkWell(
       onTap: () {
         _onTapOption(context, option);
       },
+      highlightColor: designVariables.editorButtonPressedBg,
+      splashFactory: NoSplash.splashFactory,
+      borderRadius: BorderRadius.circular(5),
       child: Padding(
-        padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),
+        padding: const EdgeInsetsDirectional.only(start: 4, end: 8, top: 4, bottom: 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 (metadata != null) Text(
+                  style: TextStyle(
+                    fontSize: 14,
+                    height: 16 / 14,
+                    color: designVariables.contextMenuItemMeta,
+                  ),
+                  overflow: TextOverflow.ellipsis,
+                  maxLines: 1,
+                  metadata),
+              ])),
           ])));
   }
 }

lib/widgets/theme.dart

@@ -120,7 +120,10 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
       borderBar: const Color(0x33000000),
       contextMenuCancelText: const Color(0xff222222),
       contextMenuItemBg: const Color(0xff6159e1),
+      contextMenuItemLabel: const Color(0xff242631),
+      contextMenuItemMeta: const Color(0xff626573),
       contextMenuItemText: const Color(0xff381da7),
+      editorButtonPressedBg: const Color(0xff000000).withValues(alpha: 0.06),
       icon: const Color(0xff666699),
       labelCounterUnread: const Color(0xff222222),
       labelEdited: const HSLColor.fromAHSL(0.35, 0, 0, 0).toColor(),
@@ -156,7 +159,10 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
       borderBar: Colors.black.withValues(alpha: 0.41),
       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: const Color(0xffffffff).withValues(alpha: 0.06),
       icon: const Color(0xff7070c2),
       labelCounterUnread: const Color(0xffffffff).withValues(alpha: 0.7),
       labelEdited: const HSLColor.fromAHSL(0.35, 0, 0, 1).toColor(),
@@ -199,7 +205,10 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
     required this.borderBar,
     required this.contextMenuCancelText,
     required this.contextMenuItemBg,
+    required this.contextMenuItemLabel,
+    required this.contextMenuItemMeta,
     required this.contextMenuItemText,
+    required this.editorButtonPressedBg,
     required this.icon,
     required this.labelCounterUnread,
     required this.labelEdited,
@@ -243,7 +252,10 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
   final Color borderBar;
   final Color contextMenuCancelText;
   final Color contextMenuItemBg;
+  final Color contextMenuItemLabel;
+  final Color contextMenuItemMeta;
   final Color contextMenuItemText;
+  final Color editorButtonPressedBg;
   final Color icon;
   final Color labelCounterUnread;
   final Color labelEdited;
@@ -282,7 +294,10 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
     Color? borderBar,
     Color? contextMenuCancelText,
     Color? contextMenuItemBg,
+    Color? contextMenuItemLabel,
+    Color? contextMenuItemMeta,
     Color? contextMenuItemText,
+    Color? editorButtonPressedBg,
     Color? icon,
     Color? labelCounterUnread,
     Color? labelEdited,
@@ -316,7 +331,10 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
       borderBar: borderBar ?? this.borderBar,
       contextMenuCancelText: contextMenuCancelText ?? this.contextMenuCancelText,
       contextMenuItemBg: contextMenuItemBg ?? this.contextMenuItemBg,
+      contextMenuItemLabel: contextMenuItemLabel ?? this.contextMenuItemLabel,
+      contextMenuItemMeta: contextMenuItemMeta ?? this.contextMenuItemMeta,
       contextMenuItemText: contextMenuItemText ?? this.contextMenuItemBg,
+      editorButtonPressedBg: editorButtonPressedBg ?? this.editorButtonPressedBg,
       icon: icon ?? this.icon,
       labelCounterUnread: labelCounterUnread ?? this.labelCounterUnread,
       labelEdited: labelEdited ?? this.labelEdited,
@@ -357,7 +375,10 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
       borderBar: Color.lerp(borderBar, other.borderBar, 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)!,
       icon: Color.lerp(icon, other.icon, t)!,
       labelCounterUnread: Color.lerp(labelCounterUnread, other.labelCounterUnread, t)!,
       labelEdited: Color.lerp(labelEdited, other.labelEdited, t)!,

test/widgets/autocomplete_test.dart

@@ -114,15 +114,16 @@ void main() {
 
     void checkUserShown(User user, PerAccountStore store, {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);