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: #913

Author: fombalang

lib/widgets/autocomplete.dart

@@ -1,11 +1,16 @@
 import 'package:flutter/material.dart';
 
+import '../api/model/initial_snapshot.dart';
+import '../api/model/model.dart';
+import '../model/store.dart';
 import 'content.dart';
 import 'store.dart';
 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({
@@ -193,14 +198,47 @@ class ComposeAutocomplete extends AutocompleteField<MentionAutocompleteQuery, Me
     );
   }
 
+  /// The given user's real email address, if known, for displaying in the UI.
+  ///
+  /// Returns null if self-user isn't able to see [user]'s real email address.
+  String? _getDisplayEmailFor(User user, {required PerAccountStore store}) {
+    if (store.account.zulipFeatureLevel >= 163) { // TODO(server-7)
+      // A non-null value means self-user has access to [user]'s real email,
+      // while a null value means it doesn't have access to the email.
+      // Search for "delivery_email" in https://zulip.com/api/register-queue.
+      return user.deliveryEmail;
+    } else {
+      if (user.deliveryEmail != null) {
+        // A non-null value means self-user has access to [user]'s real email,
+        // while a null value doesn't necessarily mean it doesn't have access
+        // to the email, ....
+        return user.deliveryEmail;
+      } else if (store.emailAddressVisibility == EmailAddressVisibility.everyone) {
+        // ... we have to also check for [PerAccountStore.emailAddressVisibility].
+        // See:
+        //   * https://github.com/zulip/zulip-mobile/pull/5515#discussion_r997731727
+        //   * https://chat.zulip.org/#narrow/stream/378-api-design/topic/email.20address.20visibility/near/1296133
+        return user.email;
+      } else {
+        return null;
+      }
+    }
+  }
+
   @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):
+        final store = PerAccountStoreWidget.of(context);
+        final user = store.users[userId];
         avatar = Avatar(userId: userId, size: 32, borderRadius: 3);
-        label = PerAccountStoreWidget.of(context).users[userId]!.fullName;
+        label = user!.fullName;
+        metaData = _getDisplayEmailFor(user, store: store) ?? '';
     }
     return InkWell(
       onTap: () {
@@ -212,8 +250,16 @@ class ComposeAutocomplete extends AutocompleteField<MentionAutocompleteQuery, Me
           children: [
             avatar,
             const SizedBox(width: 8),
-            Text(label),
-          ])));
+            Column(
+              mainAxisSize: MainAxisSize.min,
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+              Text(label, style: TextStyle(fontSize: 18,  height: 1.1, color: designVariables.contextMenuItemLabel) //Creates a line height equavalent to ~20
+                  .merge(weightVariableTextStyle(context, wght: 600))),
+              Visibility(
+                visible: metaData.isNotEmpty,
+                child: Text(metaData, style: TextStyle(height: 1.14, color: designVariables.contextMenuItemMeta)), //Creates a line height equavalent to ~16
+              )])])));
   }
 }
 

lib/widgets/theme.dart

@@ -131,6 +131,8 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
       subscriptionListHeaderLine: const HSLColor.fromAHSL(0.2, 240, 0.1, 0.5).toColor(),
       subscriptionListHeaderText: const HSLColor.fromAHSL(1.0, 240, 0.1, 0.5).toColor(),
       unreadCountBadgeTextForChannel: Colors.black.withValues(alpha: 0.9),
+      contextMenuItemLabel: const Color(0xff242631),
+      contextMenuItemMeta: const Color(0xff626573)
     );
 
   DesignVariables.dark() :
@@ -167,6 +169,8 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
       // TODO(design-dark) need proper dark-theme color (this is ad hoc)
       subscriptionListHeaderText: const HSLColor.fromAHSL(1.0, 240, 0.1, 0.75).toColor(),
       unreadCountBadgeTextForChannel: Colors.white.withValues(alpha: 0.9),
+      contextMenuItemLabel: const Color(0xffDFE1E8),
+      contextMenuItemMeta: const Color(0xff9194A3)
     );
 
   DesignVariables._({
@@ -195,6 +199,8 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
     required this.subscriptionListHeaderLine,
     required this.subscriptionListHeaderText,
     required this.unreadCountBadgeTextForChannel,
+    required this.contextMenuItemLabel,
+    required this.contextMenuItemMeta,
   });
 
   /// The [DesignVariables] from the context's active theme.
@@ -236,6 +242,8 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
   final Color subscriptionListHeaderLine;
   final Color subscriptionListHeaderText;
   final Color unreadCountBadgeTextForChannel;
+  final Color contextMenuItemLabel;
+  final Color contextMenuItemMeta;
 
   @override
   DesignVariables copyWith({
@@ -264,6 +272,8 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
     Color? subscriptionListHeaderLine,
     Color? subscriptionListHeaderText,
     Color? unreadCountBadgeTextForChannel,
+    Color? contextMenuItemLabel,
+    Color? contextMenuItemMeta,
   }) {
     return DesignVariables._(
       background: background ?? this.background,
@@ -291,6 +301,8 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
       subscriptionListHeaderLine: subscriptionListHeaderLine ?? this.subscriptionListHeaderLine,
       subscriptionListHeaderText: subscriptionListHeaderText ?? this.subscriptionListHeaderText,
       unreadCountBadgeTextForChannel: unreadCountBadgeTextForChannel ?? this.unreadCountBadgeTextForChannel,
+      contextMenuItemLabel: contextMenuItemLabel ?? this.contextMenuItemLabel,
+      contextMenuItemMeta: contextMenuItemMeta ?? this.contextMenuItemMeta,
     );
   }
 
@@ -325,6 +337,8 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
       subscriptionListHeaderLine: Color.lerp(subscriptionListHeaderLine, other.subscriptionListHeaderLine, t)!,
       subscriptionListHeaderText: Color.lerp(subscriptionListHeaderText, other.subscriptionListHeaderText, t)!,
       unreadCountBadgeTextForChannel: Color.lerp(unreadCountBadgeTextForChannel, other.unreadCountBadgeTextForChannel, t)!,
+      contextMenuItemMeta: Color.lerp(contextMenuItemMeta, other.contextMenuItemMeta, t)!,
+      contextMenuItemLabel: Color.lerp(contextMenuItemLabel, other.contextMenuItemLabel, t)!,
     );
   }
 }

test/widgets/autocomplete_test.dart

@@ -117,15 +117,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 =
         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 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);