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(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( find.descendant(of: find.byType(AppBar).last, matching: find.textContaining(findRichText: true,