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.
Relaxed avatar finder requirements so
it accepts avatar URLs with size identifiers too.

Fixes: #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({
@@ -193,27 +196,61 @@ 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,
+      splashColor: Colors.transparent,
+      borderRadius: BorderRadius.circular(8),
       child: Padding(
-        padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),
+        padding: const EdgeInsets.only(left: 4, right: 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

@@ -121,6 +121,9 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
       contextMenuCancelText: const Color(0xff222222),
       contextMenuItemBg: const Color(0xff6159e1),
       contextMenuItemText: const Color(0xff381da7),
+      contextMenuItemLabel: const Color(0xff242631),
+      contextMenuItemMeta: const Color(0xff626573),
+      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(),
@@ -157,6 +160,9 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
       contextMenuCancelText: const Color(0xffffffff).withValues(alpha: 0.75),
       contextMenuItemBg: const Color(0xff7977fe),
       contextMenuItemText: const Color(0xff9398fd),
+      contextMenuItemLabel: const Color(0xffdfe1e8),
+      contextMenuItemMeta: const Color(0xff9194a3),
+      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(),
@@ -200,6 +206,9 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
     required this.contextMenuCancelText,
     required this.contextMenuItemBg,
     required this.contextMenuItemText,
+    required this.contextMenuItemLabel,
+    required this.contextMenuItemMeta,
+    required this.editorButtonPressedBg,
     required this.icon,
     required this.labelCounterUnread,
     required this.labelEdited,
@@ -244,6 +253,9 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
   final Color contextMenuCancelText;
   final Color contextMenuItemBg;
   final Color contextMenuItemText;
+  final Color contextMenuItemLabel;
+  final Color contextMenuItemMeta;
+  final Color editorButtonPressedBg;
   final Color icon;
   final Color labelCounterUnread;
   final Color labelEdited;
@@ -283,6 +295,9 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
     Color? contextMenuCancelText,
     Color? contextMenuItemBg,
     Color? contextMenuItemText,
+    Color? contextMenuItemLabel,
+    Color? contextMenuItemMeta,
+    Color? editorButtonPressedBg,
     Color? icon,
     Color? labelCounterUnread,
     Color? labelEdited,
@@ -317,6 +332,9 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
       contextMenuCancelText: contextMenuCancelText ?? this.contextMenuCancelText,
       contextMenuItemBg: contextMenuItemBg ?? this.contextMenuItemBg,
       contextMenuItemText: contextMenuItemText ?? this.contextMenuItemBg,
+      contextMenuItemLabel: contextMenuItemLabel ?? this.contextMenuItemLabel,
+      contextMenuItemMeta: contextMenuItemMeta ?? this.contextMenuItemMeta,
+      editorButtonPressedBg: editorButtonPressedBg ?? this.editorButtonPressedBg,
       icon: icon ?? this.icon,
       labelCounterUnread: labelCounterUnread ?? this.labelCounterUnread,
       labelEdited: labelEdited ?? this.labelEdited,
@@ -358,6 +376,9 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
       contextMenuCancelText: Color.lerp(contextMenuCancelText, other.contextMenuCancelText, t)!,
       contextMenuItemBg: Color.lerp(contextMenuItemBg, other.contextMenuItemBg, t)!,
       contextMenuItemText: Color.lerp(contextMenuItemText, other.contextMenuItemBg, t)!,
+      contextMenuItemMeta: Color.lerp(contextMenuItemMeta, other.contextMenuItemMeta, t)!,
+      contextMenuItemLabel: Color.lerp(contextMenuItemLabel, other.contextMenuItemLabel, 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

@@ -108,37 +108,39 @@ void main() {
   group('ComposeAutocomplete', () {
 
     Finder findNetworkImage(String url) {
+      String trimmedUrl  = url.substring(0, url.length -4); //Remove the extension (.png) from the URL
       return find.byWidgetPredicate((widget) => switch(widget) {
-        Image(image: NetworkImage(url: var imageUrl)) when imageUrl == url
-          => true,
+        Image(image: NetworkImage(url: var imageUrl)) when imageUrl.startsWith(trimmedUrl)
+        => true,
         _ => false,
       });
     }
 
     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 =
         findNetworkImage(store.tryResolveUrl(user.avatarUrl!).toString());
       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 composeInputFinder = await setupToComposeInput(tester, users: [user1, user2, user3]);
-      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, 'hello @user ');
-      await tester.enterText(composeInputFinder, 'hello @user t');
-      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);
+        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);
+
+        // Options are filtered correctly for query
+        // TODO(#226): Remove this extra edit when this bug is fixed.
+        await tester.enterText(composeInputFinder, 'hello @user ');
+        await tester.enterText(composeInputFinder, 'hello @user t');
+        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);
 
       // Finishing autocomplete updates compose box; causes options to disappear
       await tester.tap(find.text('User Three'));