profile: Show user status

Fixes: #197

Author: sm-sayedi

lib/widgets/profile.dart

@@ -16,6 +16,7 @@ import 'page.dart';
 import 'remote_settings.dart';
 import 'store.dart';
 import 'text.dart';
+import 'theme.dart';
 
 class _TextStyles {
   static const primaryFieldText = TextStyle(fontSize: 20);
@@ -47,6 +48,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));
@@ -73,17 +75,28 @@ 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,
+            fontSize: 20,
+            textScaler: MediaQuery.textScalerOf(context),
+            neverAnimate: false,
+          ),
         ]),
         textAlign: TextAlign.center,
         style: nameStyle),
+      if (userStatus.text != null)
+        Text(userStatus.text!,
+          textAlign: TextAlign.center,
+          style: TextStyle(fontSize: 18, height: 22 / 18,
+            color: DesignVariables.of(context).userStatusText)),
+
       if (displayEmail != null)
         Text(displayEmail,
           textAlign: TextAlign.center,
           style: _TextStyles.primaryFieldText),
       Text(roleToLabel(user.role, zulipLocalizations),
         textAlign: TextAlign.center,
         style: _TextStyles.primaryFieldText),
-      // TODO(#197) render user status
       // TODO(#196) render active status
       // TODO(#292) render user local time
 

lib/widgets/theme.dart

@@ -213,6 +213,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._(
@@ -309,6 +310,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._({
@@ -388,6 +391,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.
@@ -480,6 +484,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({
@@ -559,6 +564,7 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
     Color? subscriptionListHeaderLine,
     Color? subscriptionListHeaderText,
     Color? unreadCountBadgeTextForChannel,
+    Color? userStatusText,
   }) {
     return DesignVariables._(
       background: background ?? this.background,
@@ -637,6 +643,7 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
       subscriptionListHeaderLine: subscriptionListHeaderLine ?? this.subscriptionListHeaderLine,
       subscriptionListHeaderText: subscriptionListHeaderText ?? this.subscriptionListHeaderText,
       unreadCountBadgeTextForChannel: unreadCountBadgeTextForChannel ?? this.unreadCountBadgeTextForChannel,
+      userStatusText: userStatusText ?? this.userStatusText,
     );
   }
 
@@ -722,6 +729,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

@@ -9,10 +9,12 @@ import 'package:url_launcher/url_launcher.dart';
 import 'package:zulip/api/model/events.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/button.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';
@@ -27,6 +29,7 @@ import '../stdlib_checks.dart';
 import '../test_images.dart';
 import '../test_navigation.dart';
 import 'message_list_checks.dart';
+import 'message_list_test.dart';
 import 'page_checks.dart';
 import 'profile_page_checks.dart';
 import 'test_app.dart';
@@ -38,6 +41,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,
   bool realmPresenceDisabled = false,
@@ -60,6 +64,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,
@@ -95,12 +100,25 @@ void main() {
     final user = eg.user(userId: 1, fullName: 'test user',
       deliveryEmail: '[email protected]');
 
-    await setupPage(tester, users: [user], pageUserId: user.userId);
-
-    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();
-  });
+    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 = findStatusEmoji(UnicodeEmojiWidget);
+      checkUserStatusEmoji(statusEmojiFinder, isAnimated: true);
+      check(because: 'find user status emoji', statusEmojiFinder).findsOne();
+      check(because: 'find user status text', find.text('Busy')).findsOne();
+    });
 
   testWidgets('page builds; error page shows up if data is missing', (tester) async {
     await setupPage(tester, pageUserId: eg.selfUser.userId + 1989);