lightbox: Add user's avatar on 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

Author: shivanshsharma13

lib/widgets/lightbox.dart

@@ -171,21 +171,24 @@ 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)),
-          ])),
+        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));
     }
 

test/widgets/lightbox_test.dart

@@ -254,6 +254,17 @@ void main() {
       debugNetworkImageHttpClientProvider = null;
     });
 
+    testWidgets('app bar shows sender avatar', (tester) async {
+      prepareBoringImageHttpClient();
+      final message = eg.streamMessage(sender: eg.otherUser);
+      await setupPage(tester, message: message, thumbnailUrl: null);
+
+      final avatar = tester.widget<Avatar>(find.byType(Avatar));
+      check(avatar.userId).equals(message.senderId);
+
+      debugNetworkImageHttpClientProvider = null;
+    });
+
     testWidgets('header and footer hidden and shown by tapping image', (tester) async {
       prepareBoringImageHttpClient();
       final message = eg.streamMessage(sender: eg.otherUser);