From a4c4cf728ddedb609188bdf37745cb0d81c76929 Mon Sep 17 00:00:00 2001
From: Shivansh Sharma <shivansh.sharma706@gmail.com>
Date: Sun, 1 Dec 2024 12:29:23 +0530
Subject: [PATCH] Lightbox: Added user's avatar in the lightbox app bar

This change updates the lightbox to display the message author's avatar
alongside their name and the date in the app bar. The avatar is
positioned in the "start" direction (left for LTR layouts, right for
RTL layouts) to align with the behavior in the React Native app.

Fixes: #41
---
 lib/widgets/lightbox.dart       | 38 +++++++++++++++++++--------------
 test/widgets/lightbox_test.dart | 11 +++++++---
 2 files changed, 30 insertions(+), 19 deletions(-)

diff --git a/lib/widgets/lightbox.dart b/lib/widgets/lightbox.dart
index 7e4141db63..a1fcd71326 100644
--- a/lib/widgets/lightbox.dart
+++ b/lib/widgets/lightbox.dart
@@ -171,22 +171,28 @@ class _LightboxPageLayoutState extends State<_LightboxPageLayout> {
         backgroundColor: appBarBackgroundColor,
         shape: const Border(), // Remove bottom border from [AppBarTheme]
         elevation: appBarElevation,
-
-        // TODO(#41): Show message author's avatar
-        title: RichText(
-          text: TextSpan(children: [
-            TextSpan(
-              text: '${widget.message.senderFullName}\n',
-
-              // Restate default
-              style: themeData.textTheme.titleLarge!.copyWith(color: appBarForegroundColor)),
-            TextSpan(
-              text: timestampText,
-
-              // Make smaller, like a subtitle
-              style: themeData.textTheme.titleSmall!.copyWith(color: appBarForegroundColor)),
-          ])),
-        bottom: widget.buildAppBarBottom(context));
+        title: Row(children: [
+          Avatar(size: 36, borderRadius: 36 / 8, userId: widget.message.senderId),
+          const SizedBox(width: 8),
+          Expanded(
+            child: RichText(
+              text: TextSpan(
+                children: [
+                  TextSpan(
+                    text: '${widget.message.senderFullName}\n',
+                    // Restate default
+                    style: themeData.textTheme.titleLarge!.copyWith(color: appBarForegroundColor)),
+                  TextSpan(
+                    text: timestampText,
+                    // Make smaller, like a subtitle
+                    style: themeData.textTheme.titleSmall!.copyWith(color: appBarForegroundColor)),
+                ])
+              ),
+            ),
+          ],
+        ),
+        bottom: widget.buildAppBarBottom(context)
+      );
     }
 
     Widget? bottomAppBar;
diff --git a/test/widgets/lightbox_test.dart b/test/widgets/lightbox_test.dart
index 4a84f79b27..7658a51912 100644
--- a/test/widgets/lightbox_test.dart
+++ b/test/widgets/lightbox_test.dart
@@ -236,14 +236,19 @@ void main() {
       debugNetworkImageHttpClientProvider = null;
     });
 
-    testWidgets('app bar shows sender name and date', (tester) async {
+    testWidgets('app bar shows sender avatar, name and date', (tester) async {
       prepareBoringImageHttpClient();
       final timestamp = DateTime.parse("2024-07-23 23:12:24").millisecondsSinceEpoch ~/ 1000;
       final message = eg.streamMessage(sender: eg.otherUser, timestamp: timestamp);
       await setupPage(tester, message: message, thumbnailUrl: null);
 
-      // We're looking for a RichText, in the app bar, with both the
-      // sender's name and the timestamp.
+      // Check Avatar properties
+      final avatar = tester.widget<Avatar>(find.byType(Avatar));
+      check(avatar.size).equals(36);
+      check(avatar.borderRadius).equals(36 / 8);
+      check(avatar.userId).equals(message.senderId);
+
+      // Check sender name and timestamp
       final labelTextWidget = tester.widget<RichText>(
         find.descendant(of: find.byType(AppBar).last,
           matching: find.textContaining(findRichText: true,