presence: Show presence on avatars throughout the app, and in profile

Fixes: zulip#1607

Author: chrisbobbe

lib/widgets/content.dart

@@ -12,9 +12,11 @@ import '../api/core.dart';
 import '../api/model/model.dart';
 import '../generated/l10n/zulip_localizations.dart';
 import '../model/avatar_url.dart';
+import '../model/binding.dart';
 import '../model/content.dart';
 import '../model/internal_link.dart';
 import '../model/katex.dart';
+import '../model/presence.dart';
 import 'actions.dart';
 import 'code_block.dart';
 import 'dialog.dart';
@@ -1662,17 +1664,23 @@ class Avatar extends StatelessWidget {
     required this.userId,
     required this.size,
     required this.borderRadius,
+    this.backgroundColor,
+    this.omitPresenceStatus = false,
   });
 
   final int userId;
   final double size;
   final double borderRadius;
+  final Color? backgroundColor;
+  final bool omitPresenceStatus;
 
   @override
   Widget build(BuildContext context) {
     return AvatarShape(
       size: size,
       borderRadius: borderRadius,
+      backgroundColor: backgroundColor,
+      userIdForPresence: omitPresenceStatus ? null : userId,
       child: AvatarImage(userId: userId, size: size));
   }
 }
@@ -1722,26 +1730,163 @@ class AvatarImage extends StatelessWidget {
 }
 
 /// A rounded square shape, to wrap an [AvatarImage] or similar.
+///
+/// If [userIdForPresence] is provided, this will paint a [PresenceCircle]
+/// on the shape.
 class AvatarShape extends StatelessWidget {
   const AvatarShape({
     super.key,
     required this.size,
     required this.borderRadius,
+    this.backgroundColor,
+    this.userIdForPresence,
     required this.child,
   });
 
   final double size;
   final double borderRadius;
+  final Color? backgroundColor;
+  final int? userIdForPresence;
   final Widget child;
 
   @override
   Widget build(BuildContext context) {
+    Widget result = child;
+
+    if (userIdForPresence != null) {
+      final presenceCircleSize = size / 4; // TODO(design) is this right?
+      result = Stack(children: [
+        result,
+        Positioned.directional(textDirection: Directionality.of(context),
+          end: 0,
+          bottom: 0,
+          child: PresenceCircle(
+            userId: userIdForPresence!,
+            size: presenceCircleSize,
+            backgroundColor: backgroundColor)),
+      ]);
+    }
+
     return SizedBox.square(
       dimension: size,
       child: ClipRRect(
         borderRadius: BorderRadius.all(Radius.circular(borderRadius)),
         clipBehavior: Clip.antiAlias,
-        child: child));
+        child: result));
+  }
+}
+
+/// The green or orange-gradient circle representing [PresenceStatus].
+///
+/// [backgroundColor] is required and must not be [Colors.transparent].
+/// It exists to match the background on which the avatar image is painted.
+///
+/// By default, nothing paints for a user in the "offline" status
+/// (i.e. a user without a [PresenceStatus]).
+/// Pass true for [explicitOffline] to paint a gray circle.
+class PresenceCircle extends StatefulWidget {
+  const PresenceCircle({
+    super.key,
+    required this.userId,
+    required this.size,
+    this.backgroundColor,
+    this.explicitOffline = false,
+  });
+
+  final int userId;
+  final double size;
+  final Color? backgroundColor;
+  final bool explicitOffline;
+
+  /// Creates a [WidgetSpan] with a [PresenceCircle], for use in rich text
+  /// before a user's name.
+  static InlineSpan asWidgetSpan({
+    required int userId,
+    required double fontSize,
+    required TextScaler textScaler,
+    Color? backgroundColor,
+  }) {
+    final size = textScaler.scale(fontSize) / 2;
+    return WidgetSpan(
+      alignment: PlaceholderAlignment.middle,
+      child: Padding(
+        padding: const EdgeInsetsDirectional.only(end: 4),
+        child: PresenceCircle(
+          userId: userId,
+          size: size,
+          backgroundColor: backgroundColor,
+          explicitOffline: true)));
+  }
+
+  @override
+  State<PresenceCircle> createState() => _PresenceCircleState();
+}
+
+class _PresenceCircleState extends State<PresenceCircle> with PerAccountStoreAwareStateMixin {
+  Presence? model;
+
+  @override
+  void onNewStore() {
+    model?.removeListener(_modelChanged);
+    model = PerAccountStoreWidget.of(context).presence
+      ..addListener(_modelChanged);
+  }
+
+  @override
+  void dispose() {
+    model!.removeListener(_modelChanged);
+    super.dispose();
+  }
+
+  void _modelChanged() {
+    setState(() {
+      // The actual state lives in [model].
+      // This method was called because that just changed.
+    });
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final status = model!.presenceStatusForUser(
+      widget.userId, utcNow: ZulipBinding.instance.utcNow());
+    final designVariables = DesignVariables.of(context);
+    final effectiveBackgroundColor = widget.backgroundColor ?? designVariables.mainBackground;
+    assert(effectiveBackgroundColor != Colors.transparent);
+
+    Color? color;
+    LinearGradient? gradient;
+
+    switch (status) {
+      case null:
+        if (widget.explicitOffline) {
+          // TODO(a11y) this should be an open circle, like on web,
+          //   to differentiate by shape (vs. the "active" status which is also
+          //   a solid circle)
+          color = designVariables.statusAway;
+        } else {
+          return SizedBox.square(dimension: widget.size);
+        }
+      case PresenceStatus.active:
+        color = designVariables.statusOnline;
+      case PresenceStatus.idle:
+        gradient = LinearGradient(
+          begin: AlignmentDirectional.centerStart,
+          end: AlignmentDirectional.centerEnd,
+          colors: [designVariables.statusIdle, effectiveBackgroundColor],
+          stops: [0.05, 1.00],
+        );
+    }
+
+    return SizedBox.square(dimension: widget.size,
+      child: DecoratedBox(
+        decoration: BoxDecoration(
+          border: Border.all(
+            color: effectiveBackgroundColor,
+            width: 2,
+            strokeAlign: BorderSide.strokeAlignOutside),
+          color: color,
+          gradient: gradient,
+          shape: BoxShape.circle)));
   }
 }
 

lib/widgets/profile.dart

@@ -44,15 +44,31 @@ class ProfilePage extends StatelessWidget {
       return const _ProfileErrorPage();
     }
 
+    final nameStyle = _TextStyles.primaryFieldText
+      .merge(weightVariableTextStyle(context, wght: 700));
+
     final displayEmail = store.userDisplayEmail(user);
     final items = [
       Center(
-        child: Avatar(userId: userId, size: 200, borderRadius: 200 / 8)),
+        child: Avatar(
+          userId: userId,
+          size: 200,
+          borderRadius: 200 / 8,
+          // Would look odd with this large image;
+          // we'll show it by the user's name instead.
+          omitPresenceStatus: true)),
       const SizedBox(height: 16),
-      Text(user.fullName,
+      Text.rich(
+        TextSpan(children: [
+          PresenceCircle.asWidgetSpan(
+            userId: userId,
+            fontSize: nameStyle.fontSize!,
+            textScaler: MediaQuery.textScalerOf(context),
+          ),
+          TextSpan(text: user.fullName),
+        ]),
         textAlign: TextAlign.center,
-        style: _TextStyles.primaryFieldText
-          .merge(weightVariableTextStyle(context, wght: 700))),
+        style: nameStyle),
       if (displayEmail != null)
         Text(displayEmail,
           textAlign: TextAlign.center,

lib/widgets/recent_dm_conversations.dart

@@ -101,6 +101,7 @@ class RecentDmConversationsItem extends StatelessWidget {
 
     final String title;
     final Widget avatar;
+    int? userIdForPresence;
     switch (narrow.otherRecipientIds) { // TODO dedupe with DM items in [InboxPage]
       case []:
         title = store.selfUser.fullName;
@@ -111,6 +112,7 @@ class RecentDmConversationsItem extends StatelessWidget {
         //   1:1 DM conversations from muted users?)
         title = store.userDisplayName(otherUserId);
         avatar = AvatarImage(userId: otherUserId, size: _avatarSize);
+        userIdForPresence = otherUserId;
       default:
         // TODO(i18n): List formatting, like you can do in JavaScript:
         //   new Intl.ListFormat('ja').format(['Chris', 'Greg', 'Alya'])
@@ -123,8 +125,10 @@ class RecentDmConversationsItem extends StatelessWidget {
               ZulipIcons.group_dm)));
     }
 
+    // TODO(design) check if this is the right variable
+    final backgroundColor = designVariables.background;
     return Material(
-      color: designVariables.background, // TODO(design) check if this is the right variable
+      color: backgroundColor,
       child: InkWell(
         onTap: () {
           Navigator.push(context,
@@ -133,7 +137,12 @@ class RecentDmConversationsItem extends StatelessWidget {
         child: ConstrainedBox(constraints: const BoxConstraints(minHeight: 48),
           child: Row(crossAxisAlignment: CrossAxisAlignment.center, children: [
             Padding(padding: const EdgeInsetsDirectional.fromSTEB(12, 8, 0, 8),
-              child: AvatarShape(size: _avatarSize, borderRadius: 3, child: avatar)),
+              child: AvatarShape(
+                size: _avatarSize,
+                borderRadius: 3,
+                backgroundColor: backgroundColor,
+                userIdForPresence: userIdForPresence,
+                child: avatar)),
             const SizedBox(width: 8),
             Expanded(child: Padding(
               padding: const EdgeInsets.symmetric(vertical: 4),

lib/widgets/theme.dart

@@ -173,6 +173,13 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
     mainBackground: const Color(0xfff0f0f0),
     radioBorder: Color(0xffbbbdc8),
     radioFillSelected: Color(0xff4370f0),
+    statusAway: Color(0xff73788c).withValues(alpha: 0.25),
+
+    // Following Web because it uses a gradient, to distinguish it by shape from
+    // the "active" dot, and the Figma doesn't; Figma just has solid #d5bb6c.
+    statusIdle: Color(0xfff5b266),
+
+    statusOnline: Color(0xff46aa62),
     textInput: const Color(0xff000000),
     title: const Color(0xff1a1a1a),
     bgSearchInput: const Color(0xffe3e3e3),
@@ -242,6 +249,13 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
     mainBackground: const Color(0xff1d1d1d),
     radioBorder: Color(0xff626573),
     radioFillSelected: Color(0xff4e7cfa),
+    statusAway: Color(0xffabaeba).withValues(alpha: 0.30),
+
+    // Following Web because it uses a gradient, to distinguish it by shape from
+    // the "active" dot, and the Figma doesn't; Figma just has solid #8c853b.
+    statusIdle: Color(0xffae640a),
+
+    statusOnline: Color(0xff44bb66),
     textInput: const Color(0xffffffff).withValues(alpha: 0.9),
     title: const Color(0xffffffff).withValues(alpha: 0.9),
     bgSearchInput: const Color(0xff313131),
@@ -319,6 +333,9 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
     required this.mainBackground,
     required this.radioBorder,
     required this.radioFillSelected,
+    required this.statusAway,
+    required this.statusIdle,
+    required this.statusOnline,
     required this.textInput,
     required this.title,
     required this.bgSearchInput,
@@ -397,6 +414,9 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
   final Color mainBackground;
   final Color radioBorder;
   final Color radioFillSelected;
+  final Color statusAway;
+  final Color statusIdle;
+  final Color statusOnline;
   final Color textInput;
   final Color title;
   final Color bgSearchInput;
@@ -470,6 +490,9 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
     Color? mainBackground,
     Color? radioBorder,
     Color? radioFillSelected,
+    Color? statusAway,
+    Color? statusIdle,
+    Color? statusOnline,
     Color? textInput,
     Color? title,
     Color? bgSearchInput,
@@ -538,6 +561,9 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
       mainBackground: mainBackground ?? this.mainBackground,
       radioBorder: radioBorder ?? this.radioBorder,
       radioFillSelected: radioFillSelected ?? this.radioFillSelected,
+      statusAway: statusAway ?? this.statusAway,
+      statusIdle: statusIdle ?? this.statusIdle,
+      statusOnline: statusOnline ?? this.statusOnline,
       textInput: textInput ?? this.textInput,
       title: title ?? this.title,
       bgSearchInput: bgSearchInput ?? this.bgSearchInput,
@@ -613,6 +639,9 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
       mainBackground: Color.lerp(mainBackground, other.mainBackground, t)!,
       radioBorder: Color.lerp(radioBorder, other.radioBorder, t)!,
       radioFillSelected: Color.lerp(radioFillSelected, other.radioFillSelected, t)!,
+      statusAway: Color.lerp(statusAway, other.statusAway, t)!,
+      statusIdle: Color.lerp(statusIdle, other.statusIdle, t)!,
+      statusOnline: Color.lerp(statusOnline, other.statusOnline, t)!,
       textInput: Color.lerp(textInput, other.textInput, t)!,
       title: Color.lerp(title, other.title, t)!,
       bgSearchInput: Color.lerp(bgSearchInput, other.bgSearchInput, t)!,