profile: Show user status

Fixes: #197

Author: sm-sayedi

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));
@@ -69,9 +71,20 @@ class ProfilePage extends StatelessWidget {
           ),
           // TODO write a test where the user is muted; check this and avatar
           TextSpan(text: store.userDisplayName(userId, replaceIfMuted: false)),
+          UserStatusEmoji.asWidgetSpan(
+            userId: userId,
+            size: 20,
+            notoColorEmojiTextSize: 16.6,
+            noAnimation: false,
+          ),
         ]),
         textAlign: TextAlign.center,
         style: nameStyle),
+      if (userStatus.text != null)
+        Text(userStatus.text!,
+          textAlign: TextAlign.center,
+          style: TextStyle(fontSize: 16, color: DesignVariables.of(context).userStatusText)),
+
       if (displayEmail != null)
         Text(displayEmail,
           textAlign: TextAlign.center,

lib/widgets/theme.dart

@@ -203,6 +203,7 @@ 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),
+    userStatusText: const Color(0xff808080),
   );
 
   static final dark = DesignVariables._(
@@ -289,6 +290,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),
+    // TODO(design-dark) unchanged in dark theme?
+    userStatusText: const Color(0xff808080),
   );
 
   DesignVariables._({
@@ -363,6 +366,7 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
     required this.subscriptionListHeaderLine,
     required this.subscriptionListHeaderText,
     required this.unreadCountBadgeTextForChannel,
+    required this.userStatusText,
   });
 
   /// The [DesignVariables] from the context's active theme.
@@ -450,6 +454,7 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
   final Color subscriptionListHeaderLine;
   final Color subscriptionListHeaderText;
   final Color unreadCountBadgeTextForChannel;
+  final Color userStatusText; // In Figma, but unnamed.
 
   @override
   DesignVariables copyWith({
@@ -524,6 +529,7 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
     Color? subscriptionListHeaderLine,
     Color? subscriptionListHeaderText,
     Color? unreadCountBadgeTextForChannel,
+    Color? userStatusText,
   }) {
     return DesignVariables._(
       background: background ?? this.background,
@@ -597,6 +603,7 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
       subscriptionListHeaderLine: subscriptionListHeaderLine ?? this.subscriptionListHeaderLine,
       subscriptionListHeaderText: subscriptionListHeaderText ?? this.subscriptionListHeaderText,
       unreadCountBadgeTextForChannel: unreadCountBadgeTextForChannel ?? this.unreadCountBadgeTextForChannel,
+      userStatusText: userStatusText ?? this.userStatusText,
     );
   }
 
@@ -677,6 +684,7 @@ 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)!,
+      userStatusText: Color.lerp(userStatusText, other.userStatusText, t)!,
     );
   }
 }

test/widgets/profile_test.dart

@@ -5,9 +5,11 @@ import 'package:flutter_test/flutter_test.dart';
 import 'package:url_launcher/url_launcher.dart';
 import 'package:zulip/api/model/initial_snapshot.dart';
 import 'package:zulip/api/model/model.dart';
+import 'package:zulip/basic.dart';
 import 'package:zulip/model/narrow.dart';
 import 'package:zulip/model/store.dart';
 import 'package:zulip/widgets/content.dart';
+import 'package:zulip/widgets/emoji.dart';
 import 'package:zulip/widgets/icons.dart';
 import 'package:zulip/widgets/message_list.dart';
 import 'package:zulip/widgets/page.dart';
@@ -29,6 +31,7 @@ Future<void> setupPage(WidgetTester tester, {
   required int pageUserId,
   List<User>? users,
   List<int>? mutedUserIds,
+  List<(int userId, UserStatusChange change)>? userStatuses,
   List<CustomProfileField>? customProfileFields,
   Map<String, RealmDefaultExternalAccount>? realmDefaultExternalAccounts,
   NavigatorObserver? navigatorObserver,
@@ -48,6 +51,7 @@ Future<void> setupPage(WidgetTester tester, {
   if (mutedUserIds != null) {
     await store.setMutedUsers(mutedUserIds);
   }
+  await store.changeUserStatuses(userStatuses ?? []);
 
   await tester.pumpWidget(TestZulipApp(
     accountId: eg.selfAccount.id,
@@ -84,11 +88,24 @@ void main() {
       final user = eg.user(userId: 1, fullName: 'test user',
         deliveryEmail: '[email protected]');
 
-      await setupPage(tester, users: [user], pageUserId: user.userId);
+      await setupPage(tester, users: [user], pageUserId: user.userId,
+        userStatuses: [
+          (
+            user.userId,
+            UserStatusChange(
+              text: OptionSome('Busy'),
+              emoji: OptionSome(StatusEmoji(emojiName: 'working_on_it',
+                emojiCode: '1f6e0', reactionType: ReactionType.unicodeEmoji)))
+          ),
+        ]);
 
       check(because: 'find user avatar', find.byType(Avatar).evaluate()).length.equals(1);
       check(because: 'find user name', find.text('test user').evaluate()).isNotEmpty();
       check(because: 'find user delivery email', find.text('[email protected]').evaluate()).isNotEmpty();
+      final statusEmojiFinder = find.ancestor(of: find.byType(UnicodeEmojiWidget),
+        matching: find.byType(UserStatusEmoji));
+      check(because: 'find user status emoji', statusEmojiFinder).findsOne();
+      check(because: 'find user status text', find.text('Busy')).findsOne();
     });
 
     testWidgets('page builds; profile page renders with profileData', (tester) async {