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);
@@ -51,6 +52,7 @@ class ProfilePage extends StatelessWidget {
     final nameStyle = _TextStyles.primaryFieldText
       .merge(weightVariableTextStyle(context, wght: 700));
 
+    final userStatus = store.getUserStatus(userId);
     final displayEmail = store.userDisplayEmail(userId);
     final items = [
       Center(
@@ -73,17 +75,27 @@ 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: nameStyle.fontSize!,
+            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,6 +9,7 @@ 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';
@@ -96,9 +97,20 @@ void main() {
       deliveryEmail: '[email protected]');
 
     await setupPage(tester, users: [user], pageUserId: user.userId);
+    await store.changeUserStatus(user.userId, UserStatusChange(
+      text: OptionSome('Busy'),
+      emoji: OptionSome(StatusEmoji(emojiName: 'working_on_it',
+        emojiCode: '1f6e0', reactionType: ReactionType.unicodeEmoji))));
+    await tester.pump();
 
     check(because: 'find user avatar', find.byType(Avatar).evaluate()).length.equals(1);
     check(because: 'find user name', find.text('test user').evaluate()).isNotEmpty();
+    final statusEmojiFinder = find.ancestor(of: find.text('\u{1f6e0}'),
+      matching: find.byType(UserStatusEmoji));
+    check(because: 'find user status emoji', statusEmojiFinder).findsOne();
+    check(tester.widget<UserStatusEmoji>(statusEmojiFinder)
+      .neverAnimate).isFalse();
+    check(because: 'find user status text', find.text('Busy')).findsOne();
     check(because: 'find user delivery email', find.text('[email protected]').evaluate()).isNotEmpty();
   });