From 38a8e09ce4943c8b1db6bd00060bf6754f773f5c 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 | 36 +++++++++++++++++++++---------------
 1 file changed, 21 insertions(+), 15 deletions(-)

diff --git a/lib/widgets/lightbox.dart b/lib/widgets/lightbox.dart
index 7e4141db63..3b3e824089 100644
--- a/lib/widgets/lightbox.dart
+++ b/lib/widgets/lightbox.dart
@@ -172,21 +172,27 @@ class _LightboxPageLayoutState extends State<_LightboxPageLayout> {
         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: 40, borderRadius: 32 / 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;