Show relative timestamps in notification center (#87)

* Initial plan

* Show timestamps in notifications

Agent-Logs-Url: https://github.com/jhass/insporation/sessions/a32c0ff4-62f3-47cd-ba7d-2babf83f6a50

Co-authored-by: jhass <141294+jhass@users.noreply.github.com>

* Fix notification timestamp test setup

Agent-Logs-Url: https://github.com/jhass/insporation/sessions/a32c0ff4-62f3-47cd-ba7d-2babf83f6a50

Co-authored-by: jhass <141294+jhass@users.noreply.github.com>

* improve fallback avatar

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: jhass <141294+jhass@users.noreply.github.com>
Co-authored-by: Jonne Haß <me@jhass.eu>

Author: Copilot

lib/notifications_page.dart

@@ -5,6 +5,7 @@ import 'src/client.dart';
 import 'src/item_stream.dart';
 import 'src/localizations.dart';
 import 'src/navigation.dart';
+import 'src/timeago.dart';
 import 'src/utils.dart';
 import 'src/widgets.dart';
 import 'src/colors.dart' as colors;
@@ -74,6 +75,14 @@ class _NotificationListItemState extends State<_NotificationListItem> with State
           child: ListTile(
             leading: AvatarStack(people: widget.notification.eventCreators),
             title: Text(_title),
+            subtitle: Timeago(
+              widget.notification.createdAt,
+              textStyle: TextStyle(
+                fontStyle: FontStyle.italic,
+                color: theme.hintColor,
+                fontSize: 12,
+              ),
+            ),
           ),
         ),
       ),

lib/src/widgets.dart

@@ -108,17 +108,35 @@ class Avatar extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    final hasUrl = url != null && url!.trim().isNotEmpty;
     return Container(
       width: size,
       height: size,
-      child: url != null ? ClipRRect(
+      child: hasUrl ? ClipRRect(
         borderRadius: BorderRadius.circular(5),
         child: RemoteImage(
           url!,
-          fallback: Icon(Icons.person),
+          fallback: _AvatarFallback(size: size),
           fit: BoxFit.cover,
         )
-      ) : Icon(Icons.person),
+      ) : _AvatarFallback(size: size),
+    );
+  }
+}
+
+class _AvatarFallback extends StatelessWidget {
+  const _AvatarFallback({required this.size});
+
+  final double size;
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      width: size,
+      height: size,
+      color: Theme.of(context).colorScheme.surface,
+      alignment: Alignment.center,
+      child: Icon(Icons.person, size: size * 0.6),
     );
   }
 }
@@ -130,34 +148,42 @@ class AvatarStack extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    final people = this.people.where((person) => person.avatar != null).toList(),
-      displayCount = min(3, people.length);
+    final displayCount = min(3, people.length);
 
     return SizedBox.fromSize(
       size: Size.square(54),
       child: displayCount > 0 ? Stack(
-        children: List.generate(min(3, people.length), (index) =>
+        children: List.generate(displayCount, (index) =>
           Positioned(
             top: 4.0 * (displayCount - index - 1),
             left: 4.0 * (displayCount - index - 1),
             child: ClipRRect(
               borderRadius: BorderRadius.circular(5),
               child: Container(
                 color: Theme.of(context).colorScheme.surface,
-                child: RemoteImage(
-                  people[displayCount - index -1].avatar!,
-                  width: 46,
-                  height: 46,
-                  fallback: SizedBox.shrink(),
-                  fit: BoxFit.cover
-                ),
+                child: _stackedAvatar(people[displayCount - index - 1], context),
               )
             )
           )
         ),
       ) : Center(child: Icon(Icons.person, size: 46))
     );
   }
+
+  Widget _stackedAvatar(Person person, BuildContext context) {
+    final avatar = person.avatar;
+    if (avatar == null || avatar.trim().isEmpty) {
+      return const _AvatarFallback(size: 46);
+    }
+
+    return RemoteImage(
+      avatar,
+      width: 46,
+      height: 46,
+      fallback: const _AvatarFallback(size: 46),
+      fit: BoxFit.cover,
+    );
+  }
 }
 
 class UnreadItemsIndicatorIcon<T extends ItemCountNotifier> extends StatefulWidget {

test/notifications_page_test.dart

@@ -0,0 +1,66 @@
+import 'package:flutter/material.dart' hide Notification;
+import 'package:flutter_test/flutter_test.dart';
+import 'package:insporation/l10n/app_localizations.dart';
+import 'package:insporation/notifications_page.dart';
+import 'package:insporation/src/client.dart';
+import 'package:insporation/src/localizations.dart';
+import 'package:insporation/src/navigation.dart';
+import 'package:insporation/src/timeago.dart';
+import 'package:provider/provider.dart';
+import 'package:timeago/timeago.dart' as timeago;
+
+void main() {
+  testWidgets('notifications page shows relative timestamps', (tester) async {
+    final createdAt = DateTime.now().subtract(const Duration(hours: 2));
+    Timeago.loadLocale(const Locale('en'));
+    final notification = Notification(
+      guid: 'notification-1',
+      type: NotificationType.liked,
+      read: true,
+      targetGuid: 'post-1',
+      targetAuthor: null,
+      eventCreators: [
+        Person(
+          guid: 'person-1',
+          diasporaId: 'alice@example.org',
+          name: 'Alice',
+          avatar: null,
+        ),
+      ],
+      createdAt: createdAt,
+    );
+
+    await tester.pumpWidget(
+      MultiProvider(
+        providers: [
+          Provider<Client>.value(value: TestClient([notification])),
+          ChangeNotifierProvider(create: (_) => CurrentNavigationItemReselectedEvents()),
+          ChangeNotifierProvider(create: (_) => UnreadNotificationsCount()),
+          ChangeNotifierProvider(create: (_) => UnreadConversationsCount()),
+        ],
+        child: MaterialApp(
+          localizationsDelegates: AppLocalizations.localizationsDelegates,
+          supportedLocales: supportedLocales,
+          home: NotificationsPage(),
+        ),
+      ),
+    );
+
+    await tester.pump();
+    await tester.pumpAndSettle();
+
+    expect(find.textContaining('Alice'), findsOneWidget);
+    expect(find.text(timeago.format(createdAt, locale: 'en')), findsOneWidget);
+    expect(find.byType(Timeago), findsOneWidget);
+  });
+}
+
+class TestClient extends Client {
+  TestClient(this.notifications);
+
+  final List<Notification> notifications;
+
+  @override
+  Future<Page<Notification>> fetchNotifications({bool onlyUnread = false, String? page, int? perPage}) async =>
+      Page(content: notifications);
+}