user-status: Show user status with user display names throughout the app

In the following places, user status is added with display names:
  - message feed
  - recent DMs list page
  - new DM sheet
  - user autocomplete
  - profile page

Fixes: #197

Author: sm-sayedi

lib/widgets/autocomplete.dart

@@ -315,7 +315,19 @@ class _MentionAutocompleteItem extends StatelessWidget {
           mainAxisSize: MainAxisSize.min,
           crossAxisAlignment: CrossAxisAlignment.start,
           children: [
-            labelWidget,
+            Row(
+              children: [
+                Flexible(child: labelWidget),
+                if (option case UserMentionAutocompleteResult(:var userId))
+                  Padding(
+                    padding: const EdgeInsetsDirectional.only(start: 5.0),
+                    child: UserStatusEmoji(
+                      userId: userId,
+                      size: 18,
+                      notoColorEmojiTextSize: 15),
+                  )
+              ],
+            ),
             if (sublabelWidget != null) sublabelWidget,
           ])),
       ]));

lib/widgets/message_list.dart

@@ -1720,6 +1720,12 @@ class _SenderRow extends StatelessWidget {
                         color: designVariables.title,
                       ).merge(weightVariableTextStyle(context, wght: 600)),
                       overflow: TextOverflow.ellipsis)),
+                  if (sender != null)
+                    Padding(
+                      padding: const EdgeInsetsDirectional.only(start: 5.0),
+                      child: UserStatusEmoji(userId: sender.userId,
+                        size: 18, notoColorEmojiTextSize: 15),
+                    ),
                   if (sender?.isBot ?? false) ...[
                     const SizedBox(width: 5),
                     Icon(

lib/widgets/new_dm_sheet.dart

@@ -314,6 +314,8 @@ class _SelectedUserChip extends StatelessWidget {
                   fontSize: 16,
                   height: 16 / 16,
                   color: designVariables.labelMenuButton)))),
+          UserStatusEmoji(userId: userId, size: 16, notoColorEmojiTextSize: 13.3),
+          SizedBox(width: 4),
         ])));
   }
 }
@@ -412,7 +414,14 @@ class _NewDmUserListItem extends StatelessWidget {
             Avatar(userId: userId, size: 32, borderRadius: 3),
             SizedBox(width: 8),
             Expanded(
-              child: Text(store.userDisplayName(userId),
+              child: Text.rich(
+                TextSpan(
+                  children: [
+                    TextSpan(text: store.userDisplayName(userId)),
+                    UserStatusEmoji.asWidgetSpan(userId: userId, size: 17,
+                      notoColorEmojiTextSize: 14),
+                  ]
+                ),
                 style: TextStyle(
                   fontSize: 17,
                   height: 19 / 17,

lib/widgets/profile.dart

@@ -12,6 +12,7 @@ import 'message_list.dart';
 import 'page.dart';
 import 'store.dart';
 import 'text.dart';
+import 'theme.dart';
 
 class _TextStyles {
   static const primaryFieldText = TextStyle(fontSize: 20);
@@ -43,6 +44,7 @@ class ProfilePage extends StatelessWidget {
     if (user == null) {
       return const _ProfileErrorPage();
     }
+    final userStatus = store.getUserStatus(userId);
 
     final nameStyle = _TextStyles.primaryFieldText
       .merge(weightVariableTextStyle(context, wght: 700));
@@ -66,9 +68,20 @@ class ProfilePage extends StatelessWidget {
             textScaler: MediaQuery.textScalerOf(context),
           ),
           TextSpan(text: user.fullName),
+          UserStatusEmoji.asWidgetSpan(
+            userId: userId,
+            size: 20,
+            notoColorEmojiTextSize: 16.6,
+            noAnimation: false,
+          ),
         ]),
         textAlign: TextAlign.center,
         style: nameStyle),
+      if (userStatus != null && userStatus.statusText != null)
+        Text(userStatus.statusText!,
+          textAlign: TextAlign.center,
+          style: TextStyle(fontSize: 16, color: DesignVariables.of(context).statusText)),
+
       if (displayEmail != null)
         Text(displayEmail,
           textAlign: TextAlign.center,

lib/widgets/recent_dm_conversations.dart

@@ -146,16 +146,27 @@ class RecentDmConversationsItem extends StatelessWidget {
             const SizedBox(width: 8),
             Expanded(child: Padding(
               padding: const EdgeInsets.symmetric(vertical: 4),
-              child: Text(
+              child: Text.rich(
+                TextSpan(
+                  children: [
+                    TextSpan(text: title),
+                    if (narrow.otherRecipientIds.length <= 1)
+                      if (narrow.otherRecipientIds case [var otherUserId])
+                        UserStatusEmoji.asWidgetSpan(userId: otherUserId,
+                          size: 17, notoColorEmojiTextSize: 14.1)
+                      else
+                        UserStatusEmoji.asWidgetSpan(userId: store.selfUserId,
+                          size: 17, notoColorEmojiTextSize: 14.1),
+                  ]
+                ),
                 style: TextStyle(
                   fontSize: 17,
                   height: (20 / 17),
                   // TODO(design) check if this is the right variable
                   color: designVariables.labelMenuButton,
                 ),
                 maxLines: 2,
-                overflow: TextOverflow.ellipsis,
-                title))),
+                overflow: TextOverflow.ellipsis))),
             const SizedBox(width: 12),
             unreadCount > 0
               ? Padding(padding: const EdgeInsetsDirectional.only(end: 16),

lib/widgets/theme.dart

@@ -198,6 +198,7 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
     navigationButtonBg: Colors.black.withValues(alpha: 0.05),
     sectionCollapseIcon: const Color(0x7f1e2e48),
     star: const HSLColor.fromAHSL(0.5, 47, 1, 0.41).toColor(),
+    statusText: const Color(0xff808080),
     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),
@@ -280,6 +281,8 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
     sectionCollapseIcon: const Color(0x7fb6c8e2),
     // TODO(design-dark) unchanged in dark theme?
     star: const HSLColor.fromAHSL(0.5, 47, 1, 0.41).toColor(),
+    // TODO(design-dark) unchanged in dark theme?
+    statusText: const Color(0xff808080),
     // TODO(design-dark) need proper dark-theme color (this is ad hoc)
     subscriptionListHeaderLine: const HSLColor.fromAHSL(0.4, 240, 0.1, 0.75).toColor(),
     // TODO(design-dark) need proper dark-theme color (this is ad hoc)
@@ -354,6 +357,7 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
     required this.navigationButtonBg,
     required this.sectionCollapseIcon,
     required this.star,
+    required this.statusText,
     required this.subscriptionListHeaderLine,
     required this.subscriptionListHeaderText,
     required this.unreadCountBadgeTextForChannel,
@@ -439,6 +443,7 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
   final Color navigationButtonBg;
   final Color sectionCollapseIcon;
   final Color star;
+  final Color statusText; // In Figma, but unnamed.
   final Color subscriptionListHeaderLine;
   final Color subscriptionListHeaderText;
   final Color unreadCountBadgeTextForChannel;
@@ -511,6 +516,7 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
     Color? navigationButtonBg,
     Color? sectionCollapseIcon,
     Color? star,
+    Color? statusText,
     Color? subscriptionListHeaderLine,
     Color? subscriptionListHeaderText,
     Color? unreadCountBadgeTextForChannel,
@@ -582,6 +588,7 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
       navigationButtonBg: navigationButtonBg ?? this.navigationButtonBg,
       sectionCollapseIcon: sectionCollapseIcon ?? this.sectionCollapseIcon,
       star: star ?? this.star,
+      statusText: statusText ?? this.statusText,
       subscriptionListHeaderLine: subscriptionListHeaderLine ?? this.subscriptionListHeaderLine,
       subscriptionListHeaderText: subscriptionListHeaderText ?? this.subscriptionListHeaderText,
       unreadCountBadgeTextForChannel: unreadCountBadgeTextForChannel ?? this.unreadCountBadgeTextForChannel,
@@ -660,6 +667,7 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
       navigationButtonBg: Color.lerp(navigationButtonBg, other.navigationButtonBg, t)!,
       sectionCollapseIcon: Color.lerp(sectionCollapseIcon, other.sectionCollapseIcon, t)!,
       star: Color.lerp(star, other.star, t)!,
+      statusText: Color.lerp(statusText, other.statusText, t)!,
       subscriptionListHeaderLine: Color.lerp(subscriptionListHeaderLine, other.subscriptionListHeaderLine, t)!,
       subscriptionListHeaderText: Color.lerp(subscriptionListHeaderText, other.subscriptionListHeaderText, t)!,
       unreadCountBadgeTextForChannel: Color.lerp(unreadCountBadgeTextForChannel, other.unreadCountBadgeTextForChannel, t)!,