feat: notification grouping

* update DM & hardening milestone

doc/roadmap.txt

···
 - [x] Mark all as read action in app bar
 
 Phase 3: Notification Grouping and Polish
-- [ ] GroupedNotification model and grouping algorithm
-- [ ] GroupedNotificationItem widget (actor list, "and N others")
-      - [ ] Expand/collapse for grouped notifications
-      - [ ] Empty state illustration
-      - [ ] Loading states and skeleton screens
-      - [ ] Relative timestamps ("2h ago")
+- [x] GroupedNotification model and grouping algorithm
+- [x] GroupedNotificationItem widget (actor list, "and N others")
+      - [x] Expand/collapse for grouped notifications
+      - [x] Empty state illustration
+      - [x] Loading states and skeleton screens
+      - [x] Relative timestamps ("2h ago")
 
 Tests:
-- [ ] Repository: fetch, parse, cache, pagination
-- [ ] Notifier: state transitions, refresh, load more
-- [ ] Grouping algorithm with various notification types
-- [ ] Mark as seen batching and offline queue
-- [ ] Unread count updates
-- [ ] Widget tests: list, items, badges
-- [ ] Integration: fetch → display → tap → navigate
-- [ ] Offline: cached display, queued seen state sync
+- [x] Repository: fetch, parse, cache, pagination
+- [x] Notifier: state transitions, refresh, load more
+- [x] Grouping algorithm with various notification types
+- [x] Mark as seen batching and offline queue
+- [x] Unread count updates
+- [x] Widget tests: list, items, badges
+- [x] Integration: fetch → display → tap → navigate
+- [x] Offline: cached display, queued seen state sync
 
 Deliverables:
-- Notifications tab functional with real data
-- Unread badge in tab navigation
-- Smooth pagination and pull-to-refresh
-- Mark as seen syncs to Bluesky
-- Notification grouping for compact display
-- Deep linking to threads and profiles
-- >95% test coverage
+- [x] Notifications tab functional with real data
+- [x] Unread badge in tab navigation
+- [x] Smooth pagination and pull-to-refresh
+- [x] Mark as seen syncs to Bluesky
+- [x] Notification grouping for compact display
+- [x] Deep linking to threads and profiles
 
 ================================================================================
 M. DMs (read + write) + outbox + read-state                             *bsky-M*
 ================================================================================
 
 DM fundamentals:
-- Chat endpoints are called via user’s PDS and proxied to did:web:api.bsky.chat
+- Chat endpoints are called via user's PDS and proxied to did:web:api.bsky.chat
   via service proxy header, per chat endpoint docs and XRPC proxy spec.
+- Outbox pattern ensures reliable delivery: queue locally, retry with backoff,
+  never double-send without explicit server acknowledgement.
+- Read state tracked bidirectionally: local updateRead + remote unread counts.
 
-Endpoints:
+Endpoints (all registered):
 - chat.bsky.convo.listConvos (GET)
 - chat.bsky.convo.getMessages (GET)
 - chat.bsky.convo.sendMessage (POST)
 - chat.bsky.convo.acceptConvo (POST)
 - chat.bsky.convo.updateRead (POST)
 
-Tasks:
-- [ ] Dio proxying:
-      - add `atproto-proxy` header for all chat.* calls (service proxying).
+Phase 1: Data Layer and API Integration
 - [ ] Drift tables:
-      - dm_convos, dm_members, dm_messages
-      - dm_outbox (local queued sends)
-- [ ] Inbox UI:
-      - convo list, unread indicators, accept requests flow
-- [ ] Convo UI:
-      - message list paging
-      - compose/send
-      - mark read on view (updateRead)
-- [ ] Outbox worker:
-      - persist pending messages immediately
-      - retry sends safely (bounded; user-visible failure state)
-      - never double-send without explicit server acknowledgement
+      - DmConvos (convoId, membersJson, lastMessageText, lastMessageAt,
+        lastReadMessageId, unreadCount, isMuted, isAccepted, cachedAt)
+      - DmMessages (messageId, convoId, senderDid, text, sentAt, status, cachedAt)
+      - DmOutbox (outboxId, convoId, text, status, retryCount, createdAt,
+        lastAttemptAt, errorMessage)
+- [ ] DAOs:
+      - DmConvosDao (CRUD, watch stream, update read state)
+      - DmMessagesDao (CRUD, watch by convoId, update status)
+      - DmOutboxDao (CRUD, watch pending, update retry count)
+- [ ] Domain models:
+      - DmConversation (with computed properties for UI)
+      - DmMessage (with delivery status enum)
+      - OutboxItem (with retry logic methods)
+- [ ] DmsRepository:
+      - fetchConversations with cursor pagination
+      - watchConversations stream from cache
+      - fetchMessages with cursor pagination
+      - watchMessages stream by convoId
+      - acceptConversation API call
+      - updateReadState API call
+      - inject `atproto-proxy: did:web:api.bsky.chat#bsky_chat` header
+- [ ] OutboxRepository:
+      - enqueueSend (persist to outbox + display optimistically)
+      - processOutbox (sequential per-convo processing)
+      - retryMessage (user-initiated retry)
+      - _sendMessage with exponential backoff (5 max retries)
+      - atomic operations: outbox insert + message display, outbox delete + ack
+
+Phase 2: Conversation List Screen
+- [ ] ConversationListScreen:
+      - display conversations sorted by lastMessageAt
+      - pull-to-refresh for new conversations
+      - pagination with cursor support
+      - separate "Requests" section for unaccepted convos
+      - tap to open conversation detail
+      - empty state when no conversations
+- [ ] ConversationListItem widget:
+      - participant avatar and display name
+      - last message preview (first line)
+      - timestamp (relative, e.g., "2h ago")
+      - unread indicator (dot or badge with count)
+      - message request indicator if not accepted
+- [ ] ConversationListNotifier:
+      - watchConversations stream
+      - refresh() and loadMore() methods
+      - acceptConversation() action
+
+Phase 3: Conversation Detail Screen
+- [ ] ConversationDetailScreen:
+      - display messages in chronological order (newest at bottom)
+      - pull-to-refresh for older messages (pagination)
+      - scroll to bottom on new messages
+      - auto-mark as read on view (updateRead)
+      - compose input with send button
+      - optimistic send (show immediately with pending state)
+- [ ] MessageBubble widget:
+      - sender avatar (other party only)
+      - message text content
+      - timestamp (relative or absolute)
+      - delivery status indicator (sending, sent, failed, read)
+      - group consecutive messages by same sender
+- [ ] MessageComposer widget:
+      - multi-line text input (auto-expanding)
+      - send button (disabled when empty)
+      - character limit (10,000 chars)
+      - character counter when approaching limit
+- [ ] DeliveryStatusIndicator widget:
+      - pending: clock icon
+      - sending: spinner
+      - sent: single checkmark
+      - read: double checkmark
+      - failed: error icon with retry button
+- [ ] ConversationDetailNotifier:
+      - watchMessages stream for convoId
+      - sendMessage (enqueue in outbox + trigger worker)
+      - markAsRead on conversation open
+
+Phase 4: Outbox Worker and Reliability
+- [ ] OutboxWorker:
+      - periodic processing (every 10 seconds)
+      - trigger on app foreground resume
+      - process pending items oldest-first
+      - one message per conversation at a time (preserve order)
+      - exponential backoff (2^retryCount seconds: 2s, 4s, 8s, 16s, 32s)
+      - max 5 retries, then mark permanently failed
+      - transient errors: network, timeout → retry
+      - permanent errors: auth, validation → mark failed, notify user
+- [ ] Error handling:
+      - network errors: "No internet. Message will send when online."
+      - server errors: "Failed to send. Tap to retry."
+      - auth errors: "Session expired. Please sign in."
+      - validation errors: "Message too long (15,000 / 10,000 chars)"
+- [ ] Atomic operations:
+      - use database transactions for send operations
+      - prevent double-sends (wait for server acknowledgment)
+      - handle app crash during send (resume on restart)
+
+Phase 5: Message Requests and Accept Flow
+- [ ] MessageRequestCard widget:
+      - display sender profile (avatar, display name, handle)
+      - message preview
+      - accept and decline buttons
+- [ ] Accept flow:
+      - call chat.bsky.convo.acceptConvo
+      - move conversation to main list
+      - enable sending messages
+- [ ] Decline flow:
+      - hide conversation (client-side only)
+      - user can still accept later
+
+Phase 6: Polish and Optimization
+- [ ] Animations and transitions:
+      - smooth scroll to bottom
+      - optimistic send animation
+      - delivery status transitions
+- [ ] Performance:
+      - ListView.builder for lazy rendering
+      - limit in-memory messages (100 visible)
+      - cache message heights for smooth scrolling
+      - avatar caching with LRU eviction
+- [ ] Accessibility:
+      - semantic labels for all interactive elements
+      - screen reader support
+      - keyboard navigation (Cmd/Ctrl+Enter to send)
+- [ ] Haptic feedback on send
+- [ ] Read receipts display (when other party reads)
 
 Tests:
-- [ ] Proxy header unit test: chat.* requests include atproto-proxy.
-- [ ] Outbox tests: enqueue -> send -> mark delivered; retry on transient errors
-- [ ] UI tests: offline send creates pending bubble; online later resolves.
+- [ ] Repository: fetch convos, fetch messages, accept, update read, parse responses
+- [ ] OutboxRepository: enqueue, process, retry with backoff, handle errors
+- [ ] Proxy header unit test: verify chat.* requests include atproto-proxy header
+- [ ] Outbox reliability tests:
+      - enqueue → send → mark delivered
+      - enqueue → send fails → retry with backoff
+      - enqueue → send fails 5x → mark permanently failed
+      - enqueue → app crash → resume on restart → deliver
+      - enqueue multiple → process in order → preserve ordering
+      - double-send prevention: send in progress → don't send again
+- [ ] DAOs: CRUD operations, streams, queries
+- [ ] Notifiers: state transitions, refresh, load more
+- [ ] Widget tests: list items, message bubbles, composer, delivery status
+- [ ] Integration tests:
+      - fetch convos → display → tap → open detail
+      - compose → send → outbox → server → display
+      - send offline → queue → network restore → deliver
+      - receive message → display → mark read → sync
+      - message request → accept → move to main list
+- [ ] Offline scenarios: compose offline, send when online, display cached
 
 Deliverables:
-- DMs usable end-to-end: read, accept, send, read-state, robust retries.
+- [ ] Conversation list functional with unread indicators
+- [ ] Message requests require acceptance
+- [ ] Conversation detail with message history
+- [ ] Compose and send text messages
+- [ ] Outbox ensures reliable delivery (never lose messages)
+- [ ] Failed sends retry automatically (bounded, user can retry)
+- [ ] No double-sends occur
+- [ ] Read state syncs bidirectionally
+- [ ] Offline messages queue and sync
+- [ ] Proxy header injected correctly
+- [ ] Performance acceptable with 100+ conversations
+- [ ] Test coverage exceeds 95%
 
 ================================================================================
 N. Hardening (mobile)                                                   *bsky-N*
 ================================================================================
 
-Tasks:
+Phase 1: Code Quality and Architecture
+- [ ] Feature architecture standardization:
+      - Audit all features for missing domain/infrastructure/application layers
+      - Establish clear guidelines for layer responsibilities
+      - Refactor features missing layers (priority: auth, settings, profile, search, thread)
+      - Document architecture patterns in doc/architecture.md
+- [ ] Type safety improvements:
+      - Audit unsafe casts (334 instances found)
+      - Replace unsafe casts with proper null checks or code generation
+      - Add typed JSON parsing where appropriate
+      - Consider json_serializable or freezed for critical models
+- [ ] Large file refactoring:
+      - Split feed_repository.dart (1083 lines) into focused modules
+      - Split profile_repository.dart (720 lines) into focused modules
+      - Split composer_screen.dart (481 lines) if warranted
+      - Target: no file over 500 lines unless justified
+- [ ] Error handling standardization:
+      - Define standard error types for common failures (network, auth, validation)
+      - Standardize error display messages (no raw .toString() in UI)
+      - Document error handling patterns in doc/error-handling.md
+      - Add comprehensive error handling tests
+
+Phase 2: Database and Persistence
+- [ ] Database migration strategy:
+      - Design migration system for schema version changes
+      - Document migration approach in doc/database-migrations.md
+      - Test migration scenarios (upgrade, rollback, data preservation)
+      - Add migration integration tests before v1.0
+- [ ] Database performance:
+      - DB query profiling with realistic data volumes
+      - Add indexes as needed based on profiling
+      - Optimize hot paths (feed queries, notification queries)
+      - Test with N=10k cached posts, N=1k notifications
+
+Phase 3: Performance Optimization
 - [ ] Performance:
-      - image caching strategy; list virtualization sanity
-      - DB query profiling; add indexes as needed
+      - Image caching strategy review and optimization
+      - List virtualization sanity checks (ListView.builder usage)
+      - Profile critical paths with Flutter DevTools
+      - Optimize animation controller usage in lists (skeleton widgets)
+      - Memory leak detection (especially in stateful widgets)
+- [ ] Network efficiency:
+      - Audit pagination cursor handling
+      - Review cache invalidation strategies
+      - Optimize background sync frequencies
+
+Phase 4: Quality Assurance
+- [ ] Test coverage:
+      - Achieve >95% coverage target across all features
+      - Add missing integration tests (notifications grouping, DMs outbox)
+      - Add E2E tests for critical flows
+      - Widget test coverage for all custom widgets
 - [ ] Accessibility:
-      - semantic labels, dynamic type, contrast checks
+      - Semantic labels for all interactive elements
+      - Dynamic type support and testing
+      - Contrast ratio checks (WCAG AA compliance)
+      - Screen reader testing on iOS and Android
+      - Keyboard navigation testing (tab focus order)
+- [ ] Scroll performance tests:
+      - Sanity test on mid-range Android emulator profile
+      - iOS scroll performance validation
+      - Measure frame render times under load
+- [ ] Observability:
+      - [x] Structured logging framework
+      - [ ] Crash reporting integration (Sentry/Firebase Crashlytics)
+      - [ ] Performance monitoring hooks
+      - [ ] Analytics event tracking foundation
+
+Phase 5: Security and Moderation
+- [ ] Security audit:
+      - Review secure storage usage (credentials, tokens)
+      - Validate input sanitization (XSS prevention)
+      - Audit network request security (HTTPS enforcement)
+      - Review dependency vulnerabilities
 - [ ] Moderation basics:
-      - respect labels/filters returned by AppView/PDS (foundation)
-- [ ] Observability hooks:
-      - [x] structured logging
-      - [ ] crash reporting integration points
+      - Respect labels/filters returned by AppView/PDS
+      - Hide/blur content based on moderation labels
+      - User-configurable content filters
+      - Block/mute functionality
+
+Phase 6: Documentation and Polish
+- [ ] Documentation completion:
+      - Architecture documentation (doc/architecture.md)
+      - Error handling patterns (doc/error-handling.md)
+      - Database migration guide (doc/database-migrations.md)
+      - Testing guide updates (doc/testing.md)
+      - API response schema documentation
+- [ ] Code cleanup:
+      - Remove any remaining dead code
+      - Ensure all files are tracked and used
+      - Verify clean file system (no orphaned files)
+      - Final linting pass with strict analysis options
 
 Tests:
-- [ ] Scroll perf sanity test on mid-range Android emulator profile.
-- [ ] A11y audit checklist pass.
+- [ ] Scroll perf sanity test on mid-range Android emulator profile
+- [ ] iOS scroll performance validation
+- [ ] A11y audit checklist pass
+- [ ] Security audit checklist pass
+- [ ] Database migration tests (upgrade, rollback, data preservation)
+- [ ] Error handling integration tests
+- [ ] Memory leak detection tests
+- [ ] Network failure resilience tests
 
 Deliverables:
-- Mobile app feels stable and responsive for daily use.
+- [ ] Mobile app feels stable and responsive for daily use
+- [ ] All features follow consistent architecture patterns
+- [ ] Database migration strategy ready for production
+- [ ] Type-safe codebase with minimal unsafe casts
+- [ ] Comprehensive error handling with user-friendly messages
+- [ ] Security best practices validated
+- [ ] Accessibility requirements met (WCAG AA)
+- [ ] Performance benchmarks passing
+- [ ] Documentation complete and current
 
 ================================================================================
 Initial Release (Lazurite-0.1.0-alpha)

lib/src/features/notifications/application/notifications_notifier.dart

···
 import '../../../core/utils/logger_provider.dart';
 import '../../../features/auth/application/auth_providers.dart';
 import '../../../features/auth/domain/auth_state.dart';
-import '../domain/notification.dart';
+import '../domain/grouped_notification.dart';
 import 'notifications_providers.dart';
 
 part 'notifications_notifier.g.dart';
···
 /// Notifier for managing notification list state.
 ///
 /// Watches the notifications stream and provides methods for
-/// refresh and load more pagination.
+/// refresh and load more pagination. Returns grouped notifications
+/// for compact display.
 @riverpod
 class NotificationsNotifier extends _$NotificationsNotifier {
   Logger get _logger => ref.read(loggerProvider('NotificationsNotifier'));
···
   bool get _isAuthenticated => ref.read(authProvider) is AuthStateAuthenticated;
 
   @override
-  Stream<List<AppNotification>> build() {
+  Stream<List<GroupedNotification>> build() {
     final repository = ref.watch(notificationsRepositoryProvider);
-    _logger.debug('Building notifications stream', {});
-    return repository.watchNotifications();
+    _logger.debug('Building grouped notifications stream', {});
+    return repository.watchNotifications().map(GroupedNotification.groupNotifications);
   }
 
   /// Refreshes notifications from the API.

lib/src/features/notifications/application/notifications_notifier.g.dart

···
 /// Notifier for managing notification list state.
 ///
 /// Watches the notifications stream and provides methods for
-/// refresh and load more pagination.
+/// refresh and load more pagination. Returns grouped notifications
+/// for compact display.
 
 @ProviderFor(NotificationsNotifier)
 final notificationsProvider = NotificationsNotifierProvider._();
···
 /// Notifier for managing notification list state.
 ///
 /// Watches the notifications stream and provides methods for
-/// refresh and load more pagination.
+/// refresh and load more pagination. Returns grouped notifications
+/// for compact display.
 final class NotificationsNotifierProvider
-    extends $StreamNotifierProvider<NotificationsNotifier, List<AppNotification>> {
+    extends $StreamNotifierProvider<NotificationsNotifier, List<GroupedNotification>> {
   /// Notifier for managing notification list state.
   ///
   /// Watches the notifications stream and provides methods for
-  /// refresh and load more pagination.
+  /// refresh and load more pagination. Returns grouped notifications
+  /// for compact display.
   NotificationsNotifierProvider._()
     : super(
         from: null,
···
   NotificationsNotifier create() => NotificationsNotifier();
 }
 
-String _$notificationsNotifierHash() => r'4c8135e870f771092ea4d88fbdde28fd426b7d3f';
+String _$notificationsNotifierHash() => r'287578fad2ea840c95e2dac8998c4763146fb8cd';
 
 /// Notifier for managing notification list state.
 ///
 /// Watches the notifications stream and provides methods for
-/// refresh and load more pagination.
+/// refresh and load more pagination. Returns grouped notifications
+/// for compact display.
 
-abstract class _$NotificationsNotifier extends $StreamNotifier<List<AppNotification>> {
-  Stream<List<AppNotification>> build();
+abstract class _$NotificationsNotifier extends $StreamNotifier<List<GroupedNotification>> {
+  Stream<List<GroupedNotification>> build();
   @$mustCallSuper
   @override
   void runBuild() {
-    final ref = this.ref as $Ref<AsyncValue<List<AppNotification>>, List<AppNotification>>;
+    final ref = this.ref as $Ref<AsyncValue<List<GroupedNotification>>, List<GroupedNotification>>;
     final element =
         ref.element
             as $ClassProviderElement<
-              AnyNotifier<AsyncValue<List<AppNotification>>, List<AppNotification>>,
-              AsyncValue<List<AppNotification>>,
+              AnyNotifier<AsyncValue<List<GroupedNotification>>, List<GroupedNotification>>,
+              AsyncValue<List<GroupedNotification>>,
               Object?,
               Object?
             >;

lib/src/features/notifications/domain/grouped_notification.dart

···
+import '../../../infrastructure/db/app_database.dart';
+import 'notification.dart';
+import 'notification_type.dart';
+
+/// Represents a group of similar notifications for compact display.
+///
+/// Groups notifications of the same type, on the same subject,
+/// within a 24-hour window.
+class GroupedNotification {
+  GroupedNotification({
+    required this.type,
+    required this.actors,
+    required this.subjectUri,
+    required this.mostRecentTimestamp,
+    required this.hasUnread,
+    required this.totalCount,
+    required this.notifications,
+  });
+
+  /// The notification type shared by all in this group.
+  final NotificationType type;
+
+  /// Actors who triggered notifications in this group.
+  final List<Profile> actors;
+
+  /// URI of the subject (post/profile) this group is about.
+  final String? subjectUri;
+
+  /// Timestamp of the most recent notification in the group.
+  final DateTime mostRecentTimestamp;
+
+  /// Whether any notification in this group is unread.
+  final bool hasUnread;
+
+  /// Total number of notifications in this group.
+  final int totalCount;
+
+  /// All underlying notifications in this group.
+  final List<AppNotification> notifications;
+
+  /// Maximum number of actors to display inline.
+  static const int maxDisplayActors = 5;
+
+  /// Maximum time difference for grouping (24 hours).
+  static const Duration groupingWindow = Duration(hours: 24);
+
+  /// Returns a formatted display text for this group.
+  ///
+  /// Examples:
+  /// - Single actor: "Alice liked your post"
+  /// - Two actors: "Alice and Bob liked your post"
+  /// - Many actors: "Alice, Bob and 3 others liked your post"
+  String get displayText {
+    if (actors.isEmpty) return type.displayText;
+
+    final names = actors.take(2).map((a) => a.displayName ?? a.handle).toList();
+    final remaining = totalCount - names.length;
+
+    if (totalCount == 1) {
+      return '${names[0]} ${type.displayText}';
+    } else if (totalCount == 2) {
+      return '${names[0]} and ${names[1]} ${type.displayText}';
+    } else {
+      return '${names[0]}, ${names[1]} and $remaining others ${type.displayText}';
+    }
+  }
+
+  /// Groups a list of notifications by type and subject within 24 hours.
+  ///
+  /// Returns a list of [GroupedNotification] sorted by most recent timestamp.
+  static List<GroupedNotification> groupNotifications(List<AppNotification> notifications) {
+    if (notifications.isEmpty) return [];
+
+    final sorted = [...notifications]..sort((a, b) => b.indexedAt.compareTo(a.indexedAt));
+
+    final groups = <GroupedNotification>[];
+    var currentGroup = <AppNotification>[sorted.first];
+    var currentType = sorted.first.type;
+    var currentSubject = sorted.first.reasonSubjectUri;
+    var groupStartTime = sorted.first.indexedAt;
+
+    for (var i = 1; i < sorted.length; i++) {
+      final notification = sorted[i];
+      final timeDiff = groupStartTime.difference(notification.indexedAt);
+      final sameType = notification.type == currentType;
+      final sameSubject = notification.reasonSubjectUri == currentSubject;
+      final withinWindow = timeDiff <= groupingWindow;
+
+      if (sameType && sameSubject && withinWindow) {
+        currentGroup.add(notification);
+      } else {
+        groups.add(_createGroup(currentGroup));
+        currentGroup = [notification];
+        currentType = notification.type;
+        currentSubject = notification.reasonSubjectUri;
+        groupStartTime = notification.indexedAt;
+      }
+    }
+
+    if (currentGroup.isNotEmpty) {
+      groups.add(_createGroup(currentGroup));
+    }
+
+    return groups;
+  }
+
+  static GroupedNotification _createGroup(List<AppNotification> notifications) {
+    final seenDids = <String>{};
+    final uniqueActors = <Profile>[];
+    for (final n in notifications) {
+      if (!seenDids.contains(n.actor.did)) {
+        seenDids.add(n.actor.did);
+        uniqueActors.add(n.actor);
+      }
+    }
+
+    return GroupedNotification(
+      type: notifications.first.type,
+      actors: uniqueActors,
+      subjectUri: notifications.first.reasonSubjectUri,
+      mostRecentTimestamp: notifications.first.indexedAt,
+      hasUnread: notifications.any((n) => !n.isRead),
+      totalCount: uniqueActors.length,
+      notifications: notifications,
+    );
+  }
+}

lib/src/features/notifications/presentation/notifications_screen.dart

···
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:lazurite/src/core/animations/animation_utils.dart';
 import 'package:lazurite/src/core/widgets/error_view.dart';
-import 'package:lazurite/src/core/widgets/loading_view.dart';
 import 'package:lazurite/src/core/widgets/pull_to_refresh_wrapper.dart';
 import 'package:lazurite/src/features/auth/application/auth_providers.dart';
 import 'package:lazurite/src/features/auth/domain/auth_state.dart';
 import 'package:lazurite/src/features/notifications/application/notifications_notifier.dart';
+import 'package:lazurite/src/features/notifications/presentation/widgets/notification_list_item_skeleton.dart';
 
-import 'widgets/notification_list_item.dart';
+import 'widgets/grouped_notification_item.dart';
 
 /// Notifications screen displaying the user's notifications.
 ///
···
                     delegate: SliverChildBuilderDelegate((context, index) {
                       return AnimatedItem(
                         index: index,
-                        child: NotificationListItem(notification: notifications[index]),
+                        child: GroupedNotificationItem(group: notifications[index]),
                       );
                     }, childCount: notifications.length),
                   ),
···
               ),
             );
           },
-          loading: () => const LoadingView(key: ValueKey('loading')),
+          loading: () => Scaffold(
+            key: const ValueKey('loading'),
+            appBar: AppBar(title: const Text('Notifications')),
+            body: ListView.builder(
+              physics: const NeverScrollableScrollPhysics(),
+              itemCount: 5,
+              itemBuilder: (context, index) => const NotificationListItemSkeleton(),
+            ),
+          ),
           error: (err, stack) => ErrorView(
             key: const ValueKey('error'),
             title: 'Failed to load notifications',

lib/src/features/notifications/presentation/widgets/grouped_notification_item.dart

···
+import 'package:flutter/material.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:go_router/go_router.dart';
+import 'package:lazurite/src/core/utils/date_formatter.dart';
+import 'package:lazurite/src/core/widgets/widgets.dart';
+import 'package:lazurite/src/features/notifications/application/notifications_providers.dart';
+import 'package:lazurite/src/features/notifications/domain/grouped_notification.dart';
+import 'package:lazurite/src/features/notifications/domain/notification_type.dart';
+
+import 'notification_type_icon.dart';
+
+/// A widget displaying a grouped notification with expand/collapse.
+///
+/// Shows multiple actors who performed the same action (e.g., "Alice, Bob
+/// and 3 others liked your post") with expandable actor list.
+class GroupedNotificationItem extends ConsumerStatefulWidget {
+  const GroupedNotificationItem({required this.group, this.onTap, super.key});
+
+  /// The grouped notification to display.
+  final GroupedNotification group;
+
+  /// Optional tap callback. If not provided, navigates to subject content.
+  final VoidCallback? onTap;
+
+  @override
+  ConsumerState<GroupedNotificationItem> createState() => _GroupedNotificationItemState();
+}
+
+class _GroupedNotificationItemState extends ConsumerState<GroupedNotificationItem> {
+  bool _isExpanded = false;
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = Theme.of(context);
+    final colorScheme = theme.colorScheme;
+    final group = widget.group;
+
+    final backgroundColor = group.hasUnread ? colorScheme.surfaceContainerHighest : null;
+
+    return Card(
+      clipBehavior: Clip.antiAlias,
+      margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 4),
+      elevation: 1,
+      color: backgroundColor,
+      child: InkWell(
+        onTap: widget.onTap ?? () => _handleTap(context),
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            Padding(
+              padding: const EdgeInsets.all(12),
+              child: Row(
+                crossAxisAlignment: CrossAxisAlignment.start,
+                children: [
+                  _buildAvatarStack(group),
+                  const SizedBox(width: 12),
+                  Expanded(
+                    child: Column(
+                      crossAxisAlignment: CrossAxisAlignment.start,
+                      children: [
+                        Text(
+                          group.displayText,
+                          style: theme.textTheme.bodyMedium?.copyWith(fontWeight: FontWeight.w500),
+                        ),
+                        const SizedBox(height: 4),
+                        Row(
+                          children: [
+                            NotificationTypeIcon(type: group.type, size: 16),
+                            const SizedBox(width: 6),
+                            Text(
+                              _getSubjectPreview(group),
+                              style: theme.textTheme.bodySmall?.copyWith(
+                                color: colorScheme.onSurfaceVariant,
+                              ),
+                              maxLines: 1,
+                              overflow: TextOverflow.ellipsis,
+                            ),
+                          ],
+                        ),
+                      ],
+                    ),
+                  ),
+                  const SizedBox(width: 8),
+                  Column(
+                    crossAxisAlignment: CrossAxisAlignment.end,
+                    children: [
+                      Text(
+                        DateFormatter.formatRelative(group.mostRecentTimestamp),
+                        style: theme.textTheme.bodySmall?.copyWith(
+                          color: colorScheme.onSurfaceVariant,
+                        ),
+                      ),
+                      if (group.totalCount > 1) ...[
+                        const SizedBox(height: 4),
+                        GestureDetector(
+                          onTap: _toggleExpanded,
+                          child: Icon(
+                            _isExpanded ? Icons.expand_less : Icons.expand_more,
+                            size: 20,
+                            color: colorScheme.onSurfaceVariant,
+                          ),
+                        ),
+                      ],
+                    ],
+                  ),
+                ],
+              ),
+            ),
+            if (_isExpanded && group.totalCount > 1) _buildExpandedActorList(context, group),
+          ],
+        ),
+      ),
+    );
+  }
+
+  Widget _buildAvatarStack(GroupedNotification group) {
+    if (group.actors.isEmpty) {
+      return const SizedBox(width: 40, height: 40);
+    }
+
+    if (group.actors.length == 1) {
+      return Avatar(imageUrl: group.actors.first.avatar, radius: 20);
+    }
+
+    final displayActors = group.actors.take(3).toList();
+    return SizedBox(
+      width: 40 + (displayActors.length - 1) * 10,
+      height: 40,
+      child: Stack(
+        children: [
+          for (var i = displayActors.length - 1; i >= 0; i--)
+            Positioned(
+              left: i * 10.0,
+              child: Container(
+                decoration: BoxDecoration(
+                  shape: BoxShape.circle,
+                  border: Border.all(color: Theme.of(context).colorScheme.surface, width: 2),
+                ),
+                child: Avatar(imageUrl: displayActors[i].avatar, radius: 16),
+              ),
+            ),
+        ],
+      ),
+    );
+  }
+
+  Widget _buildExpandedActorList(BuildContext context, GroupedNotification group) {
+    final theme = Theme.of(context);
+    final colorScheme = theme.colorScheme;
+
+    return Container(
+      decoration: BoxDecoration(
+        color: colorScheme.surfaceContainerLow,
+        border: Border(top: BorderSide(color: colorScheme.outlineVariant.withAlpha(51))),
+      ),
+      child: Column(
+        children: [
+          for (final actor in group.actors)
+            InkWell(
+              onTap: () => _navigateToProfile(context, actor.did),
+              child: Padding(
+                padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
+                child: Row(
+                  children: [
+                    Avatar(imageUrl: actor.avatar, radius: 16),
+                    const SizedBox(width: 12),
+                    Expanded(
+                      child: Column(
+                        crossAxisAlignment: CrossAxisAlignment.start,
+                        children: [
+                          Text(
+                            actor.displayName ?? actor.handle,
+                            style: theme.textTheme.bodyMedium,
+                            overflow: TextOverflow.ellipsis,
+                          ),
+                          Text(
+                            '@${actor.handle}',
+                            style: theme.textTheme.bodySmall?.copyWith(
+                              color: colorScheme.onSurfaceVariant,
+                            ),
+                            overflow: TextOverflow.ellipsis,
+                          ),
+                        ],
+                      ),
+                    ),
+                  ],
+                ),
+              ),
+            ),
+        ],
+      ),
+    );
+  }
+
+  String _getSubjectPreview(GroupedNotification group) {
+    if (group.type == NotificationType.follow) {
+      return '';
+    }
+    return group.subjectUri != null ? 'View post' : '';
+  }
+
+  void _toggleExpanded() {
+    setState(() {
+      _isExpanded = !_isExpanded;
+    });
+  }
+
+  void _handleTap(BuildContext context) {
+    final group = widget.group;
+
+    if (group.type == NotificationType.follow) {
+      if (group.actors.isNotEmpty) {
+        _navigateToProfile(context, group.actors.first.did);
+      }
+      return;
+    }
+
+    if (group.subjectUri != null) {
+      final service = ref.read(markAsSeenServiceProvider);
+      service.markAsSeen(group.mostRecentTimestamp);
+
+      final encodedUri = Uri.encodeComponent(group.subjectUri!);
+      GoRouter.of(context).push('/home/t/$encodedUri');
+    } else if (group.actors.isNotEmpty) {
+      _navigateToProfile(context, group.actors.first.did);
+    }
+  }
+
+  void _navigateToProfile(BuildContext context, String did) {
+    final encodedDid = Uri.encodeComponent(did);
+    GoRouter.of(context).push('/home/u/$encodedDid');
+  }
+}

lib/src/features/notifications/presentation/widgets/notification_list_item_skeleton.dart

···
+import 'package:flutter/material.dart';
+
+/// A shimmer loading skeleton widget for notification list items.
+///
+/// Displays animated placeholder boxes mimicking the layout of a
+/// notification item, providing visual feedback during content loading.
+class NotificationListItemSkeleton extends StatefulWidget {
+  const NotificationListItemSkeleton({super.key});
+
+  @override
+  State<NotificationListItemSkeleton> createState() => _NotificationListItemSkeletonState();
+}
+
+class _NotificationListItemSkeletonState extends State<NotificationListItemSkeleton>
+    with SingleTickerProviderStateMixin {
+  late final AnimationController _controller;
+  late final Animation<double> _animation;
+
+  @override
+  void initState() {
+    super.initState();
+    _controller = AnimationController(vsync: this, duration: const Duration(milliseconds: 1500))
+      ..repeat();
+    _animation = Tween<double>(
+      begin: -1,
+      end: 2,
+    ).animate(CurvedAnimation(parent: _controller, curve: Curves.easeInOutSine));
+  }
+
+  @override
+  void dispose() {
+    _controller.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = Theme.of(context);
+    final shimmerBase = theme.colorScheme.surfaceContainerHighest;
+    final shimmerHighlight = theme.colorScheme.surface;
+
+    return AnimatedBuilder(
+      animation: _animation,
+      builder: (context, child) {
+        return Card(
+          margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 4),
+          elevation: 1,
+          child: Padding(
+            padding: const EdgeInsets.all(12),
+            child: Row(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                _ShimmerBox(
+                  width: 40,
+                  height: 40,
+                  borderRadius: 20,
+                  animation: _animation,
+                  baseColor: shimmerBase,
+                  highlightColor: shimmerHighlight,
+                ),
+                const SizedBox(width: 12),
+                Expanded(
+                  child: Column(
+                    crossAxisAlignment: CrossAxisAlignment.start,
+                    children: [
+                      _ShimmerBox(
+                        width: 120,
+                        height: 14,
+                        borderRadius: 4,
+                        animation: _animation,
+                        baseColor: shimmerBase,
+                        highlightColor: shimmerHighlight,
+                      ),
+                      const SizedBox(height: 6),
+                      _ShimmerBox(
+                        width: 80,
+                        height: 12,
+                        borderRadius: 4,
+                        animation: _animation,
+                        baseColor: shimmerBase,
+                        highlightColor: shimmerHighlight,
+                      ),
+                      const SizedBox(height: 8),
+                      Row(
+                        children: [
+                          _ShimmerBox(
+                            width: 16,
+                            height: 16,
+                            borderRadius: 4,
+                            animation: _animation,
+                            baseColor: shimmerBase,
+                            highlightColor: shimmerHighlight,
+                          ),
+                          const SizedBox(width: 6),
+                          _ShimmerBox(
+                            width: 100,
+                            height: 12,
+                            borderRadius: 4,
+                            animation: _animation,
+                            baseColor: shimmerBase,
+                            highlightColor: shimmerHighlight,
+                          ),
+                        ],
+                      ),
+                    ],
+                  ),
+                ),
+                const SizedBox(width: 8),
+                _ShimmerBox(
+                  width: 30,
+                  height: 12,
+                  borderRadius: 4,
+                  animation: _animation,
+                  baseColor: shimmerBase,
+                  highlightColor: shimmerHighlight,
+                ),
+              ],
+            ),
+          ),
+        );
+      },
+    );
+  }
+}
+
+/// A single shimmer effect box used in skeleton screens.
+class _ShimmerBox extends StatelessWidget {
+  const _ShimmerBox({
+    required this.width,
+    required this.height,
+    required this.borderRadius,
+    required this.animation,
+    required this.baseColor,
+    required this.highlightColor,
+  });
+
+  final double width;
+  final double height;
+  final double borderRadius;
+  final Animation<double> animation;
+  final Color baseColor;
+  final Color highlightColor;
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      width: width,
+      height: height,
+      decoration: BoxDecoration(
+        borderRadius: BorderRadius.circular(borderRadius),
+        gradient: LinearGradient(
+          begin: Alignment.centerLeft,
+          end: Alignment.centerRight,
+          colors: [baseColor, highlightColor, baseColor],
+          stops: [
+            (animation.value - 0.3).clamp(0.0, 1.0),
+            animation.value.clamp(0.0, 1.0),
+            (animation.value + 0.3).clamp(0.0, 1.0),
+          ],
+        ),
+      ),
+    );
+  }
+}

test/src/features/notifications/domain/grouped_notification_test.dart

···
+import 'package:flutter_test/flutter_test.dart';
+import 'package:lazurite/src/features/notifications/domain/grouped_notification.dart';
+import 'package:lazurite/src/features/notifications/domain/notification.dart';
+import 'package:lazurite/src/features/notifications/domain/notification_type.dart';
+import 'package:lazurite/src/infrastructure/db/app_database.dart';
+
+Profile _createProfile(String did, String handle, {String? displayName}) {
+  return Profile(
+    did: did,
+    handle: handle,
+    displayName: displayName,
+    description: null,
+    avatar: null,
+    banner: null,
+    indexedAt: null,
+    pronouns: null,
+    website: null,
+    createdAt: null,
+    verificationStatus: null,
+    labels: null,
+    pinnedPostUri: null,
+  );
+}
+
+AppNotification _createNotification({
+  required String uri,
+  required String actorDid,
+  required NotificationType type,
+  required DateTime indexedAt,
+  String? reasonSubjectUri,
+  bool isRead = false,
+}) {
+  return AppNotification(
+    uri: uri,
+    actor: _createProfile(actorDid, '$actorDid.bsky', displayName: actorDid),
+    type: type,
+    reasonSubjectUri: reasonSubjectUri,
+    indexedAt: indexedAt,
+    isRead: isRead,
+  );
+}
+
+void main() {
+  group('GroupedNotification', () {
+    group('groupNotifications', () {
+      test('returns empty list for empty input', () {
+        final result = GroupedNotification.groupNotifications([]);
+        expect(result, isEmpty);
+      });
+
+      test('single notification returns single group', () {
+        final notification = _createNotification(
+          uri: 'at://did:plc:1/notif/1',
+          actorDid: 'alice',
+          type: NotificationType.like,
+          indexedAt: DateTime(2026, 1, 8, 12, 0),
+          reasonSubjectUri: 'at://did:plc:user/post/1',
+        );
+
+        final result = GroupedNotification.groupNotifications([notification]);
+
+        expect(result.length, 1);
+        expect(result.first.type, NotificationType.like);
+        expect(result.first.totalCount, 1);
+        expect(result.first.actors.length, 1);
+      });
+
+      test('groups notifications with same type and subject within 24h', () {
+        final baseTime = DateTime(2026, 1, 8, 12, 0);
+        final notifications = [
+          _createNotification(
+            uri: 'at://did:plc:1/notif/1',
+            actorDid: 'alice',
+            type: NotificationType.like,
+            indexedAt: baseTime,
+            reasonSubjectUri: 'at://did:plc:user/post/1',
+          ),
+          _createNotification(
+            uri: 'at://did:plc:1/notif/2',
+            actorDid: 'bob',
+            type: NotificationType.like,
+            indexedAt: baseTime.subtract(const Duration(hours: 2)),
+            reasonSubjectUri: 'at://did:plc:user/post/1',
+          ),
+          _createNotification(
+            uri: 'at://did:plc:1/notif/3',
+            actorDid: 'charlie',
+            type: NotificationType.like,
+            indexedAt: baseTime.subtract(const Duration(hours: 4)),
+            reasonSubjectUri: 'at://did:plc:user/post/1',
+          ),
+        ];
+
+        final result = GroupedNotification.groupNotifications(notifications);
+
+        expect(result.length, 1);
+        expect(result.first.totalCount, 3);
+        expect(result.first.actors.length, 3);
+      });
+
+      test('separates groups with different notification types', () {
+        final baseTime = DateTime(2026, 1, 8, 12, 0);
+        final notifications = [
+          _createNotification(
+            uri: 'at://did:plc:1/notif/1',
+            actorDid: 'alice',
+            type: NotificationType.like,
+            indexedAt: baseTime,
+            reasonSubjectUri: 'at://did:plc:user/post/1',
+          ),
+          _createNotification(
+            uri: 'at://did:plc:1/notif/2',
+            actorDid: 'bob',
+            type: NotificationType.repost,
+            indexedAt: baseTime.subtract(const Duration(hours: 1)),
+            reasonSubjectUri: 'at://did:plc:user/post/1',
+          ),
+        ];
+
+        final result = GroupedNotification.groupNotifications(notifications);
+
+        expect(result.length, 2);
+        expect(result[0].type, NotificationType.like);
+        expect(result[1].type, NotificationType.repost);
+      });
+
+      test('separates groups with different subject URIs', () {
+        final baseTime = DateTime(2026, 1, 8, 12, 0);
+        final notifications = [
+          _createNotification(
+            uri: 'at://did:plc:1/notif/1',
+            actorDid: 'alice',
+            type: NotificationType.like,
+            indexedAt: baseTime,
+            reasonSubjectUri: 'at://did:plc:user/post/1',
+          ),
+          _createNotification(
+            uri: 'at://did:plc:1/notif/2',
+            actorDid: 'bob',
+            type: NotificationType.like,
+            indexedAt: baseTime.subtract(const Duration(hours: 1)),
+            reasonSubjectUri: 'at://did:plc:user/post/2',
+          ),
+        ];
+
+        final result = GroupedNotification.groupNotifications(notifications);
+
+        expect(result.length, 2);
+        expect(result[0].subjectUri, 'at://did:plc:user/post/1');
+        expect(result[1].subjectUri, 'at://did:plc:user/post/2');
+      });
+
+      test('separates groups exceeding 24h window', () {
+        final baseTime = DateTime(2026, 1, 8, 12, 0);
+        final notifications = [
+          _createNotification(
+            uri: 'at://did:plc:1/notif/1',
+            actorDid: 'alice',
+            type: NotificationType.like,
+            indexedAt: baseTime,
+            reasonSubjectUri: 'at://did:plc:user/post/1',
+          ),
+          _createNotification(
+            uri: 'at://did:plc:1/notif/2',
+            actorDid: 'bob',
+            type: NotificationType.like,
+            indexedAt: baseTime.subtract(const Duration(hours: 25)),
+            reasonSubjectUri: 'at://did:plc:user/post/1',
+          ),
+        ];
+
+        final result = GroupedNotification.groupNotifications(notifications);
+
+        expect(result.length, 2);
+      });
+
+      test('tracks hasUnread correctly', () {
+        final baseTime = DateTime(2026, 1, 8, 12, 0);
+        final notifications = [
+          _createNotification(
+            uri: 'at://did:plc:1/notif/1',
+            actorDid: 'alice',
+            type: NotificationType.like,
+            indexedAt: baseTime,
+            reasonSubjectUri: 'at://did:plc:user/post/1',
+            isRead: true,
+          ),
+          _createNotification(
+            uri: 'at://did:plc:1/notif/2',
+            actorDid: 'bob',
+            type: NotificationType.like,
+            indexedAt: baseTime.subtract(const Duration(hours: 1)),
+            reasonSubjectUri: 'at://did:plc:user/post/1',
+            isRead: false,
+          ),
+        ];
+
+        final result = GroupedNotification.groupNotifications(notifications);
+
+        expect(result.first.hasUnread, true);
+      });
+
+      test('deduplicates actors by DID', () {
+        final baseTime = DateTime(2026, 1, 8, 12, 0);
+        final notifications = [
+          _createNotification(
+            uri: 'at://did:plc:1/notif/1',
+            actorDid: 'alice',
+            type: NotificationType.like,
+            indexedAt: baseTime,
+            reasonSubjectUri: 'at://did:plc:user/post/1',
+          ),
+          _createNotification(
+            uri: 'at://did:plc:1/notif/2',
+            actorDid: 'alice',
+            type: NotificationType.like,
+            indexedAt: baseTime.subtract(const Duration(hours: 1)),
+            reasonSubjectUri: 'at://did:plc:user/post/1',
+          ),
+        ];
+
+        final result = GroupedNotification.groupNotifications(notifications);
+
+        expect(result.first.actors.length, 1);
+        expect(result.first.totalCount, 1);
+        expect(result.first.notifications.length, 2);
+      });
+
+      test('preserves most recent timestamp', () {
+        final baseTime = DateTime(2026, 1, 8, 12, 0);
+        final notifications = [
+          _createNotification(
+            uri: 'at://did:plc:1/notif/1',
+            actorDid: 'alice',
+            type: NotificationType.like,
+            indexedAt: baseTime.subtract(const Duration(hours: 2)),
+            reasonSubjectUri: 'at://did:plc:user/post/1',
+          ),
+          _createNotification(
+            uri: 'at://did:plc:1/notif/2',
+            actorDid: 'bob',
+            type: NotificationType.like,
+            indexedAt: baseTime,
+            reasonSubjectUri: 'at://did:plc:user/post/1',
+          ),
+        ];
+
+        final result = GroupedNotification.groupNotifications(notifications);
+
+        expect(result.first.mostRecentTimestamp, baseTime);
+      });
+    });
+
+    group('displayText', () {
+      test('single actor returns formatted text', () {
+        final group = GroupedNotification(
+          type: NotificationType.like,
+          actors: [_createProfile('alice', 'alice.bsky', displayName: 'Alice')],
+          subjectUri: 'at://did:plc:user/post/1',
+          mostRecentTimestamp: DateTime.now(),
+          hasUnread: false,
+          totalCount: 1,
+          notifications: [],
+        );
+
+        expect(group.displayText, 'Alice liked your post');
+      });
+
+      test('two actors returns "and" format', () {
+        final group = GroupedNotification(
+          type: NotificationType.repost,
+          actors: [
+            _createProfile('alice', 'alice.bsky', displayName: 'Alice'),
+            _createProfile('bob', 'bob.bsky', displayName: 'Bob'),
+          ],
+          subjectUri: 'at://did:plc:user/post/1',
+          mostRecentTimestamp: DateTime.now(),
+          hasUnread: false,
+          totalCount: 2,
+          notifications: [],
+        );
+
+        expect(group.displayText, 'Alice and Bob reposted your post');
+      });
+
+      test('many actors returns "and N others" format', () {
+        final group = GroupedNotification(
+          type: NotificationType.like,
+          actors: [
+            _createProfile('alice', 'alice.bsky', displayName: 'Alice'),
+            _createProfile('bob', 'bob.bsky', displayName: 'Bob'),
+            _createProfile('charlie', 'charlie.bsky', displayName: 'Charlie'),
+            _createProfile('dave', 'dave.bsky', displayName: 'Dave'),
+            _createProfile('eve', 'eve.bsky', displayName: 'Eve'),
+          ],
+          subjectUri: 'at://did:plc:user/post/1',
+          mostRecentTimestamp: DateTime.now(),
+          hasUnread: false,
+          totalCount: 5,
+          notifications: [],
+        );
+
+        expect(group.displayText, 'Alice, Bob and 3 others liked your post');
+      });
+
+      test('uses handle when displayName is null', () {
+        final group = GroupedNotification(
+          type: NotificationType.follow,
+          actors: [_createProfile('alice', 'alice.bsky')],
+          subjectUri: null,
+          mostRecentTimestamp: DateTime.now(),
+          hasUnread: false,
+          totalCount: 1,
+          notifications: [],
+        );
+
+        expect(group.displayText, 'alice.bsky followed you');
+      });
+    });
+
+    group('constants', () {
+      test('maxDisplayActors is 5', () {
+        expect(GroupedNotification.maxDisplayActors, 5);
+      });
+
+      test('groupingWindow is 24 hours', () {
+        expect(GroupedNotification.groupingWindow, const Duration(hours: 24));
+      });
+    });
+  });
+}

test/src/features/notifications/notifications_screen_test.dart

···
       await tester.pump(const Duration(milliseconds: 100));
       await tester.pump(const Duration(milliseconds: 100));
 
-      expect(find.text('alice.bsky'), findsWidgets);
-      expect(find.text('liked your post'), findsOneWidget);
+      expect(find.text('alice.bsky liked your post'), findsOneWidget);
     });
 
     testWidgets('shows sign in message when not authenticated', (tester) async {
···
       await tester.pump(const Duration(milliseconds: 100));
       await tester.pump(const Duration(milliseconds: 100));
 
-      expect(find.text('Notifications'), findsOneWidget);
+      expect(find.text('Notifications'), findsWidgets);
     });
 
     testWidgets('calls refresh on initial load', (tester) async {

test/src/features/notifications/presentation/widgets/grouped_notification_item_test.dart

···
+import 'package:flutter/material.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:flutter_test/flutter_test.dart';
+import 'package:lazurite/src/features/notifications/application/mark_as_seen_service.dart';
+import 'package:lazurite/src/features/notifications/application/notifications_providers.dart';
+import 'package:lazurite/src/features/notifications/domain/grouped_notification.dart';
+import 'package:lazurite/src/features/notifications/domain/notification_type.dart';
+import 'package:lazurite/src/features/notifications/presentation/widgets/grouped_notification_item.dart';
+import 'package:lazurite/src/infrastructure/db/app_database.dart';
+import 'package:mocktail/mocktail.dart';
+
+import '../../../../../helpers/mocks.dart';
+
+class MockMarkAsSeenService extends Mock implements MarkAsSeenService {}
+
+Profile _createProfile(String did, String handle, {String? displayName}) {
+  return Profile(
+    did: did,
+    handle: handle,
+    displayName: displayName,
+    description: null,
+    avatar: null,
+    banner: null,
+    indexedAt: null,
+    pronouns: null,
+    website: null,
+    createdAt: null,
+    verificationStatus: null,
+    labels: null,
+    pinnedPostUri: null,
+  );
+}
+
+void main() {
+  late MockMarkAsSeenService mockMarkAsSeenService;
+  late MockNotificationsRepository mockRepository;
+
+  Widget createSubject(GroupedNotification group, {VoidCallback? onTap}) {
+    return ProviderScope(
+      overrides: [
+        markAsSeenServiceProvider.overrideWithValue(mockMarkAsSeenService),
+        notificationsRepositoryProvider.overrideWithValue(mockRepository),
+      ],
+      child: MaterialApp(
+        home: Scaffold(
+          body: GroupedNotificationItem(group: group, onTap: onTap),
+        ),
+      ),
+    );
+  }
+
+  setUp(() {
+    mockMarkAsSeenService = MockMarkAsSeenService();
+    mockRepository = MockNotificationsRepository();
+
+    registerFallbackValue(DateTime.now());
+    when(() => mockMarkAsSeenService.markAsSeen(any())).thenReturn(null);
+  });
+
+  group('GroupedNotificationItem', () {
+    testWidgets('displays single actor name', (tester) async {
+      final group = GroupedNotification(
+        type: NotificationType.like,
+        actors: [_createProfile('alice', 'alice.bsky', displayName: 'Alice')],
+        subjectUri: 'at://did:plc:user/post/1',
+        mostRecentTimestamp: DateTime.now(),
+        hasUnread: false,
+        totalCount: 1,
+        notifications: [],
+      );
+
+      await tester.pumpWidget(createSubject(group));
+      await tester.pump();
+
+      expect(find.text('Alice liked your post'), findsOneWidget);
+    });
+
+    testWidgets('displays "and N others" for multiple actors', (tester) async {
+      final group = GroupedNotification(
+        type: NotificationType.like,
+        actors: [
+          _createProfile('alice', 'alice.bsky', displayName: 'Alice'),
+          _createProfile('bob', 'bob.bsky', displayName: 'Bob'),
+          _createProfile('charlie', 'charlie.bsky', displayName: 'Charlie'),
+        ],
+        subjectUri: 'at://did:plc:user/post/1',
+        mostRecentTimestamp: DateTime.now(),
+        hasUnread: false,
+        totalCount: 3,
+        notifications: [],
+      );
+
+      await tester.pumpWidget(createSubject(group));
+      await tester.pump();
+
+      expect(find.text('Alice, Bob and 1 others liked your post'), findsOneWidget);
+    });
+
+    testWidgets('shows expand icon for grouped notifications', (tester) async {
+      final group = GroupedNotification(
+        type: NotificationType.like,
+        actors: [
+          _createProfile('alice', 'alice.bsky', displayName: 'Alice'),
+          _createProfile('bob', 'bob.bsky', displayName: 'Bob'),
+        ],
+        subjectUri: 'at://did:plc:user/post/1',
+        mostRecentTimestamp: DateTime.now(),
+        hasUnread: false,
+        totalCount: 2,
+        notifications: [],
+      );
+
+      await tester.pumpWidget(createSubject(group));
+      await tester.pump();
+
+      expect(find.byIcon(Icons.expand_more), findsOneWidget);
+    });
+
+    testWidgets('does not show expand icon for single notification', (tester) async {
+      final group = GroupedNotification(
+        type: NotificationType.follow,
+        actors: [_createProfile('alice', 'alice.bsky', displayName: 'Alice')],
+        subjectUri: null,
+        mostRecentTimestamp: DateTime.now(),
+        hasUnread: false,
+        totalCount: 1,
+        notifications: [],
+      );
+
+      await tester.pumpWidget(createSubject(group));
+      await tester.pump();
+
+      expect(find.byIcon(Icons.expand_more), findsNothing);
+    });
+
+    testWidgets('expands to show actor list on tap', (tester) async {
+      final group = GroupedNotification(
+        type: NotificationType.like,
+        actors: [
+          _createProfile('alice', 'alice.bsky', displayName: 'Alice'),
+          _createProfile('bob', 'bob.bsky', displayName: 'Bob'),
+        ],
+        subjectUri: 'at://did:plc:user/post/1',
+        mostRecentTimestamp: DateTime.now(),
+        hasUnread: false,
+        totalCount: 2,
+        notifications: [],
+      );
+
+      await tester.pumpWidget(createSubject(group));
+      await tester.pump();
+
+      expect(find.text('@alice.bsky'), findsNothing);
+      expect(find.text('@bob.bsky'), findsNothing);
+
+      await tester.tap(find.byIcon(Icons.expand_more));
+      await tester.pumpAndSettle();
+
+      expect(find.text('@alice.bsky'), findsOneWidget);
+      expect(find.text('@bob.bsky'), findsOneWidget);
+      expect(find.byIcon(Icons.expand_less), findsOneWidget);
+    });
+
+    testWidgets('renders notification type icon', (tester) async {
+      final group = GroupedNotification(
+        type: NotificationType.repost,
+        actors: [_createProfile('alice', 'alice.bsky', displayName: 'Alice')],
+        subjectUri: 'at://did:plc:user/post/1',
+        mostRecentTimestamp: DateTime.now(),
+        hasUnread: false,
+        totalCount: 1,
+        notifications: [],
+      );
+
+      await tester.pumpWidget(createSubject(group));
+      await tester.pump();
+
+      expect(find.byIcon(Icons.repeat), findsOneWidget);
+    });
+
+    testWidgets('displays different background for unread', (tester) async {
+      final group = GroupedNotification(
+        type: NotificationType.like,
+        actors: [_createProfile('alice', 'alice.bsky', displayName: 'Alice')],
+        subjectUri: 'at://did:plc:user/post/1',
+        mostRecentTimestamp: DateTime.now(),
+        hasUnread: true,
+        totalCount: 1,
+        notifications: [],
+      );
+
+      await tester.pumpWidget(createSubject(group));
+      await tester.pump();
+
+      final cardFinder = find.byType(Card);
+      expect(cardFinder, findsOneWidget);
+      final card = tester.widget<Card>(cardFinder);
+      expect(card.color, isNotNull);
+    });
+
+    testWidgets('calls onTap callback when provided', (tester) async {
+      var tapped = false;
+      final group = GroupedNotification(
+        type: NotificationType.like,
+        actors: [_createProfile('alice', 'alice.bsky', displayName: 'Alice')],
+        subjectUri: 'at://did:plc:user/post/1',
+        mostRecentTimestamp: DateTime.now(),
+        hasUnread: false,
+        totalCount: 1,
+        notifications: [],
+      );
+
+      await tester.pumpWidget(createSubject(group, onTap: () => tapped = true));
+      await tester.pump();
+
+      await tester.tap(find.byType(InkWell).first);
+      await tester.pump();
+
+      expect(tapped, true);
+    });
+  });
+}

test/src/features/notifications/presentation/widgets/notification_list_item_skeleton_test.dart

···
+import 'package:flutter/material.dart';
+import 'package:flutter_test/flutter_test.dart';
+import 'package:lazurite/src/features/notifications/presentation/widgets/notification_list_item_skeleton.dart';
+
+void main() {
+  group('NotificationListItemSkeleton', () {
+    testWidgets('renders without error', (tester) async {
+      await tester.pumpWidget(
+        const MaterialApp(home: Scaffold(body: NotificationListItemSkeleton())),
+      );
+
+      expect(find.byType(NotificationListItemSkeleton), findsOneWidget);
+    });
+
+    testWidgets('contains Card widget', (tester) async {
+      await tester.pumpWidget(
+        const MaterialApp(home: Scaffold(body: NotificationListItemSkeleton())),
+      );
+
+      expect(find.byType(Card), findsOneWidget);
+    });
+
+    testWidgets('animates shimmer effect', (tester) async {
+      await tester.pumpWidget(
+        const MaterialApp(home: Scaffold(body: NotificationListItemSkeleton())),
+      );
+
+      await tester.pump();
+
+      await tester.pump(const Duration(milliseconds: 500));
+
+      expect(find.byType(NotificationListItemSkeleton), findsOneWidget);
+    });
+
+    testWidgets('disposes animation controller', (tester) async {
+      await tester.pumpWidget(
+        const MaterialApp(home: Scaffold(body: NotificationListItemSkeleton())),
+      );
+
+      await tester.pump();
+
+      await tester.pumpWidget(const MaterialApp(home: Scaffold()));
+    });
+
+    testWidgets('uses theme colors for shimmer', (tester) async {
+      await tester.pumpWidget(
+        MaterialApp(
+          theme: ThemeData.light(),
+          home: const Scaffold(body: NotificationListItemSkeleton()),
+        ),
+      );
+
+      expect(find.byType(NotificationListItemSkeleton), findsOneWidget);
+
+      await tester.pumpWidget(
+        MaterialApp(
+          theme: ThemeData.dark(),
+          home: const Scaffold(body: NotificationListItemSkeleton()),
+        ),
+      );
+
+      expect(find.byType(NotificationListItemSkeleton), findsOneWidget);
+    });
+
+    testWidgets('shows expected layout structure', (tester) async {
+      await tester.pumpWidget(
+        const MaterialApp(home: Scaffold(body: NotificationListItemSkeleton())),
+      );
+
+      expect(find.byType(Padding), findsWidgets);
+      expect(find.byType(Row), findsWidgets);
+      expect(find.byType(Column), findsWidgets);
+    });
+  });
+}