feat: main notifications screen

doc/roadmap.txt

···
 - [x] NotificationsNotifier:
       - AsyncNotifier with pagination support
       - refresh() and loadMore() methods
-- [ ] NotificationsScreen:
+- [x] NotificationsScreen:
       - list display with pull-to-refresh
       - infinite scroll with cursor-based pagination
       - tap navigation to thread/profile
-- [ ] Widgets:
+- [x] Widgets:
       - NotificationListItem (actor, type icon, content preview, timestamp)
       - NotificationTypeIcon (like, repost, follow, mention, reply, quote)
 

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

···
+import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.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';
 
-/// Notifications screen placeholder for the notifications tab.
-class NotificationsScreen extends StatelessWidget {
+import 'widgets/notification_list_item.dart';
+
+/// Notifications screen displaying the user's notifications.
+///
+/// Features:
+/// - Pull-to-refresh to fetch new notifications
+/// - Infinite scroll with cursor-based pagination
+/// - Loading, error, and empty states
+/// - Tap navigation to thread or profile
+class NotificationsScreen extends ConsumerStatefulWidget {
   const NotificationsScreen({super.key});
 
   @override
+  ConsumerState<NotificationsScreen> createState() => _NotificationsScreenState();
+}
+
+class _NotificationsScreenState extends ConsumerState<NotificationsScreen> {
+  final ScrollController _scrollController = ScrollController();
+  bool _hasTriggeredInitialLoad = false;
+
+  @override
+  void initState() {
+    super.initState();
+    _scrollController.addListener(_onScroll);
+  }
+
+  @override
+  void dispose() {
+    _scrollController.dispose();
+    super.dispose();
+  }
+
+  void _onScroll() {
+    if (_scrollController.position.pixels >= _scrollController.position.maxScrollExtent - 200) {
+      ref.read(notificationsProvider.notifier).loadMore();
+    }
+  }
+
+  @override
   Widget build(BuildContext context) {
+    final authState = ref.watch(authProvider);
+    final isAuthenticated = authState is AuthStateAuthenticated;
+
+    if (!isAuthenticated) {
+      return _buildUnauthenticatedState(context);
+    }
+
+    final notificationsAsync = ref.watch(notificationsProvider);
+
+    if (!_hasTriggeredInitialLoad) {
+      _hasTriggeredInitialLoad = true;
+      Future.microtask(() {
+        if (mounted) {
+          ref.read(notificationsProvider.notifier).refresh();
+        }
+      });
+    }
+
+    return Scaffold(
+      body: AnimatedContentSwitcher(
+        child: notificationsAsync.when(
+          data: (notifications) {
+            if (notifications.isEmpty) {
+              return _buildEmptyState(context);
+            }
+
+            return PullToRefreshWrapper(
+              key: const ValueKey('notifications_list'),
+              onRefresh: () async {
+                await ref.read(notificationsProvider.notifier).refresh();
+              },
+              child: CustomScrollView(
+                controller: _scrollController,
+                physics: const AlwaysScrollableScrollPhysics(),
+                slivers: [
+                  SliverAppBar(
+                    title: const Text('Notifications'),
+                    floating: true,
+                    snap: true,
+                    actions: [
+                      IconButton(
+                        icon: const Icon(Icons.done_all),
+                        tooltip: 'Mark all as read',
+                        onPressed: () {
+                          ref.read(notificationsProvider.notifier).markAllAsRead();
+                        },
+                      ),
+                    ],
+                  ),
+                  SliverList(
+                    delegate: SliverChildBuilderDelegate((context, index) {
+                      return AnimatedItem(
+                        index: index,
+                        child: NotificationListItem(notification: notifications[index]),
+                      );
+                    }, childCount: notifications.length),
+                  ),
+                  const SliverPadding(padding: EdgeInsets.only(bottom: 80)),
+                ],
+              ),
+            );
+          },
+          loading: () => const LoadingView(key: ValueKey('loading')),
+          error: (err, stack) => ErrorView(
+            key: const ValueKey('error'),
+            title: 'Failed to load notifications',
+            message: err.toString(),
+            onRetry: () => ref.read(notificationsProvider.notifier).refresh(),
+          ),
+        ),
+      ),
+    );
+  }
+
+  Widget _buildUnauthenticatedState(BuildContext context) {
     final theme = Theme.of(context);
 
     return Scaffold(
···
         child: Column(
           mainAxisAlignment: MainAxisAlignment.center,
           children: [
-            Icon(Icons.notifications_outlined, size: 64, color: theme.colorScheme.primary),
+            Icon(CupertinoIcons.bell, size: 64, color: theme.colorScheme.primary),
             const SizedBox(height: 16),
             Text('Notifications', style: theme.textTheme.headlineSmall),
             const SizedBox(height: 8),
             Text(
-              'Your notifications will appear here',
+              'Sign in to see your notifications',
               style: theme.textTheme.bodyMedium?.copyWith(
                 color: theme.colorScheme.onSurface.withAlpha(153),
               ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+
+  Widget _buildEmptyState(BuildContext context) {
+    final theme = Theme.of(context);
+
+    return Scaffold(
+      appBar: AppBar(title: const Text('Notifications')),
+      body: Center(
+        child: Column(
+          mainAxisAlignment: MainAxisAlignment.center,
+          children: [
+            Icon(CupertinoIcons.bell, size: 64, color: theme.colorScheme.onSurface.withAlpha(102)),
+            const SizedBox(height: 16),
+            Text(
+              'No notifications yet',
+              style: theme.textTheme.titleMedium?.copyWith(
+                color: theme.colorScheme.onSurface.withAlpha(153),
+              ),
+            ),
+            const SizedBox(height: 8),
+            Text(
+              'When someone interacts with you, it will show up here',
+              style: theme.textTheme.bodyMedium?.copyWith(
+                color: theme.colorScheme.onSurface.withAlpha(102),
+              ),
+              textAlign: TextAlign.center,
             ),
           ],
         ),

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

···
+import 'package:flutter/material.dart';
+import 'package:go_router/go_router.dart';
+
+import '../../../../core/utils/date_formatter.dart';
+import '../../../../core/widgets/avatar.dart';
+import '../../domain/notification.dart';
+import '../../domain/notification_type.dart';
+import 'notification_type_icon.dart';
+
+/// A list item widget for displaying a single notification.
+///
+/// Displays the actor's avatar, display name, notification type, timestamp,
+/// and provides tap navigation to the related content.
+class NotificationListItem extends StatelessWidget {
+  const NotificationListItem({required this.notification, this.onTap, super.key});
+
+  /// The notification to display.
+  final AppNotification notification;
+
+  /// Optional tap callback. If not provided, navigates to thread or profile.
+  final VoidCallback? onTap;
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = Theme.of(context);
+    final colorScheme = theme.colorScheme;
+
+    final backgroundColor = notification.isRead ? null : colorScheme.surfaceContainerHighest;
+
+    return Card(
+      clipBehavior: Clip.antiAlias,
+      margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 4),
+      elevation: 1,
+      color: backgroundColor,
+      child: InkWell(
+        onTap: onTap ?? () => _handleTap(context),
+        child: Padding(
+          padding: const EdgeInsets.all(12),
+          child: Row(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              GestureDetector(
+                onTap: () => _navigateToProfile(context),
+                child: Avatar(imageUrl: notification.actor.avatar, radius: 20),
+              ),
+              const SizedBox(width: 12),
+              Expanded(
+                child: Column(
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  children: [
+                    Row(
+                      children: [
+                        Flexible(
+                          child: Text(
+                            notification.actor.displayName ?? notification.actor.handle,
+                            style: theme.textTheme.bodyMedium?.copyWith(
+                              fontWeight: FontWeight.bold,
+                            ),
+                            overflow: TextOverflow.ellipsis,
+                          ),
+                        ),
+                        const SizedBox(width: 4),
+                        Flexible(
+                          child: Text(
+                            '@${notification.actor.handle}',
+                            style: theme.textTheme.bodySmall?.copyWith(
+                              color: colorScheme.onSurfaceVariant,
+                            ),
+                            overflow: TextOverflow.ellipsis,
+                          ),
+                        ),
+                      ],
+                    ),
+                    const SizedBox(height: 4),
+                    Row(
+                      children: [
+                        NotificationTypeIcon(type: notification.type, size: 16),
+                        const SizedBox(width: 6),
+                        Expanded(
+                          child: Text(
+                            notification.type.displayText,
+                            style: theme.textTheme.bodyMedium?.copyWith(
+                              color: colorScheme.onSurfaceVariant,
+                            ),
+                          ),
+                        ),
+                      ],
+                    ),
+                  ],
+                ),
+              ),
+              const SizedBox(width: 8),
+              Text(
+                DateFormatter.formatRelative(notification.indexedAt),
+                style: theme.textTheme.bodySmall?.copyWith(color: colorScheme.onSurfaceVariant),
+              ),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+
+  void _handleTap(BuildContext context) {
+    if (notification.type == NotificationType.follow) {
+      _navigateToProfile(context);
+      return;
+    }
+
+    if (notification.reasonSubjectUri != null) {
+      final encodedUri = Uri.encodeComponent(notification.reasonSubjectUri!);
+      GoRouter.of(context).push('/home/t/$encodedUri');
+    } else {
+      _navigateToProfile(context);
+    }
+  }
+
+  void _navigateToProfile(BuildContext context) {
+    final encodedDid = Uri.encodeComponent(notification.actor.did);
+    GoRouter.of(context).push('/home/u/$encodedDid');
+  }
+}

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

···
+import 'package:flutter/material.dart';
+
+import '../../domain/notification_type.dart';
+
+/// Widget that displays an icon for a notification type.
+///
+/// Maps each [NotificationType] to a specific Material icon with
+/// an appropriate color to help users quickly identify notification types.
+class NotificationTypeIcon extends StatelessWidget {
+  const NotificationTypeIcon({required this.type, this.size = 20, super.key});
+
+  /// The notification type to display an icon for.
+  final NotificationType type;
+
+  /// The size of the icon.
+  final double size;
+
+  @override
+  Widget build(BuildContext context) {
+    final (icon, color) = _getIconAndColor(context);
+    return Icon(icon, size: size, color: color);
+  }
+
+  (IconData, Color) _getIconAndColor(BuildContext context) {
+    final colorScheme = Theme.of(context).colorScheme;
+
+    switch (type) {
+      case NotificationType.like:
+        return (Icons.favorite, Colors.pink);
+      case NotificationType.repost:
+        return (Icons.repeat, Colors.green);
+      case NotificationType.follow:
+        return (Icons.person_add, colorScheme.primary);
+      case NotificationType.mention:
+        return (Icons.alternate_email, Colors.purple);
+      case NotificationType.reply:
+        return (Icons.reply, colorScheme.onSurfaceVariant);
+      case NotificationType.quote:
+        return (Icons.format_quote, Colors.teal);
+      case NotificationType.starterpackJoined:
+        return (Icons.group_add, Colors.amber);
+    }
+  }
+}

pubspec.lock

···
     source: hosted
     version: "4.10.11"
   webview_flutter_platform_interface:
-    dependency: transitive
+    dependency: "direct dev"
     description:
       name: webview_flutter_platform_interface
       sha256: "63d26ee3aca7256a83ccb576a50272edd7cfc80573a4305caa98985feb493ee0"

pubspec.yaml

···
   fake_async: ^1.3.3
   image_picker_platform_interface: ^2.9.0
   plugin_platform_interface: ^2.1.0
+  webview_flutter_platform_interface: ^2.10.0
 
 flutter:
   uses-material-design: true

test/src/app/router_test.dart

···
 import 'package:lazurite/src/features/feeds/application/feed_content_providers.dart';
 import 'package:lazurite/src/features/feeds/application/feed_providers.dart';
 import 'package:lazurite/src/features/feeds/application/feed_sync_controller.dart';
+import 'package:lazurite/src/features/notifications/application/notifications_providers.dart';
 import 'package:lazurite/src/features/profile/application/profile_providers.dart';
 import 'package:lazurite/src/features/profile/infrastructure/profile_repository.dart';
 import 'package:lazurite/src/features/search/application/search_providers.dart';
···
   late MockProfileRepository mockProfileRepository;
   late MockAppDatabase mockDatabase;
   late MockFeedContentRepository mockFeedContentRepository;
+  late MockNotificationsRepository mockNotificationsRepository;
   late Session testSession;
 
   setUp(() {
···
     mockProfileRepository = MockProfileRepository();
     mockDatabase = MockAppDatabase();
     mockFeedContentRepository = MockFeedContentRepository();
+    mockNotificationsRepository = MockNotificationsRepository();
+    when(
+      () => mockNotificationsRepository.watchNotifications(),
+    ).thenAnswer((_) => Stream.value([]));
+    when(() => mockNotificationsRepository.getCursor()).thenAnswer((_) async => null);
+    when(
+      () => mockNotificationsRepository.fetchNotifications(cursor: any(named: 'cursor')),
+    ).thenAnswer((_) async {});
+    when(() => mockNotificationsRepository.fetchNotifications()).thenAnswer((_) async {});
     testSession = Session(
       did: 'did:web:test',
       handle: 'handle',
···
       activeFeedProvider.overrideWith(() => MockActiveFeed()),
       draftsProvider.overrideWith((ref) => Stream.value([])),
       lazurite_anim.animationControllerProvider.overrideWith(MockAnimationController.new),
+      notificationsRepositoryProvider.overrideWithValue(mockNotificationsRepository),
     ];
   }
 
···
 
       await tester.tap(find.text('Notifications'));
       await tester.pumpAndSettle();
-      expect(find.text('Your notifications will appear here'), findsOneWidget);
+      expect(find.text('No notifications yet'), findsOneWidget);
 
       await tester.tap(find.text('Home'));
       await tester.pumpAndSettle();

test/src/features/auth/presentation/oauth_webview_screen_test.dart

···
+import 'package:flutter/material.dart';
 import 'package:flutter_test/flutter_test.dart';
 import 'package:lazurite/src/features/auth/presentation/oauth_webview_screen.dart';
+import 'package:webview_flutter_platform_interface/webview_flutter_platform_interface.dart';
 
 void main() {
   group('OAuthWebViewScreen', () {
     const testAuthorizeUrl = 'https://bsky.social/oauth/authorize?request_uri=test';
     const testCallbackPrefix = 'http://127.0.0.1:8080/callback';
 
+    setUpAll(() {
+      WebViewPlatform.instance = _FakeWebViewPlatform();
+    });
+
     test('constructs with required parameters', () {
       const screen = OAuthWebViewScreen(
         authorizeUrl: testAuthorizeUrl,
···
       expect(screen.authorizeUrl, testAuthorizeUrl);
       expect(screen.callbackUrlPrefix, testCallbackPrefix);
     });
+
+    testWidgets('renders scaffold with AppBar', (tester) async {
+      await tester.pumpWidget(
+        const MaterialApp(
+          home: OAuthWebViewScreen(
+            authorizeUrl: testAuthorizeUrl,
+            callbackUrlPrefix: testCallbackPrefix,
+          ),
+        ),
+      );
+
+      expect(find.byType(Scaffold), findsOneWidget);
+      expect(find.byType(AppBar), findsOneWidget);
+    });
+
+    testWidgets('AppBar has Sign In title', (tester) async {
+      await tester.pumpWidget(
+        const MaterialApp(
+          home: OAuthWebViewScreen(
+            authorizeUrl: testAuthorizeUrl,
+            callbackUrlPrefix: testCallbackPrefix,
+          ),
+        ),
+      );
+
+      expect(find.text('Sign In'), findsOneWidget);
+    });
+
+    testWidgets('AppBar has close button', (tester) async {
+      await tester.pumpWidget(
+        const MaterialApp(
+          home: OAuthWebViewScreen(
+            authorizeUrl: testAuthorizeUrl,
+            callbackUrlPrefix: testCallbackPrefix,
+          ),
+        ),
+      );
+
+      expect(find.byIcon(Icons.close), findsOneWidget);
+    });
+
+    testWidgets('shows loading indicator initially', (tester) async {
+      await tester.pumpWidget(
+        const MaterialApp(
+          home: OAuthWebViewScreen(
+            authorizeUrl: testAuthorizeUrl,
+            callbackUrlPrefix: testCallbackPrefix,
+          ),
+        ),
+      );
+
+      expect(find.byType(CircularProgressIndicator), findsOneWidget);
+    });
+
+    testWidgets('close button is tappable', (tester) async {
+      await tester.pumpWidget(
+        const MaterialApp(
+          home: OAuthWebViewScreen(
+            authorizeUrl: testAuthorizeUrl,
+            callbackUrlPrefix: testCallbackPrefix,
+          ),
+        ),
+      );
+
+      final closeButton = find.ancestor(
+        of: find.byIcon(Icons.close),
+        matching: find.byType(IconButton),
+      );
+      expect(closeButton, findsOneWidget);
+    });
+
+    testWidgets('body uses Stack layout for overlay', (tester) async {
+      await tester.pumpWidget(
+        const MaterialApp(
+          home: OAuthWebViewScreen(
+            authorizeUrl: testAuthorizeUrl,
+            callbackUrlPrefix: testCallbackPrefix,
+          ),
+        ),
+      );
+
+      final scaffoldFinder = find.byType(Scaffold);
+      final stackFinder = find.descendant(of: scaffoldFinder, matching: find.byType(Stack));
+      expect(stackFinder, findsAtLeastNWidgets(1));
+    });
+
+    testWidgets('creates state correctly', (tester) async {
+      await tester.pumpWidget(
+        const MaterialApp(
+          home: OAuthWebViewScreen(
+            authorizeUrl: testAuthorizeUrl,
+            callbackUrlPrefix: testCallbackPrefix,
+          ),
+        ),
+      );
+
+      final statefulWidget = tester.element(find.byType(OAuthWebViewScreen));
+      expect(statefulWidget, isNotNull);
+    });
+
+    testWidgets('preserves authorizeUrl and callbackUrlPrefix', (tester) async {
+      const customAuthorizeUrl = 'https://example.com/authorize';
+      const customCallbackPrefix = 'http://localhost:3000/callback';
+
+      await tester.pumpWidget(
+        const MaterialApp(
+          home: OAuthWebViewScreen(
+            authorizeUrl: customAuthorizeUrl,
+            callbackUrlPrefix: customCallbackPrefix,
+          ),
+        ),
+      );
+
+      final widget = tester.widget<OAuthWebViewScreen>(find.byType(OAuthWebViewScreen));
+      expect(widget.authorizeUrl, customAuthorizeUrl);
+      expect(widget.callbackUrlPrefix, customCallbackPrefix);
+    });
+
+    testWidgets('close button has close icon', (tester) async {
+      await tester.pumpWidget(
+        const MaterialApp(
+          home: OAuthWebViewScreen(
+            authorizeUrl: testAuthorizeUrl,
+            callbackUrlPrefix: testCallbackPrefix,
+          ),
+        ),
+      );
+
+      final closeButton = find.ancestor(
+        of: find.byIcon(Icons.close),
+        matching: find.byType(IconButton),
+      );
+      expect(closeButton, findsOneWidget);
+    });
+
+    testWidgets('loading indicator is centered', (tester) async {
+      await tester.pumpWidget(
+        const MaterialApp(
+          home: OAuthWebViewScreen(
+            authorizeUrl: testAuthorizeUrl,
+            callbackUrlPrefix: testCallbackPrefix,
+          ),
+        ),
+      );
+
+      final centerFinder = find.ancestor(
+        of: find.byType(CircularProgressIndicator),
+        matching: find.byType(Center),
+      );
+      expect(centerFinder, findsOneWidget);
+    });
   });
 }
+
+/// Fake platform implementation to allow WebViewWidget to render in tests.
+class _FakeWebViewPlatform extends WebViewPlatform {
+  @override
+  PlatformWebViewController createPlatformWebViewController(
+    PlatformWebViewControllerCreationParams params,
+  ) {
+    return _FakePlatformWebViewController(params);
+  }
+
+  @override
+  PlatformWebViewWidget createPlatformWebViewWidget(PlatformWebViewWidgetCreationParams params) {
+    return _FakePlatformWebViewWidget(params);
+  }
+
+  @override
+  PlatformNavigationDelegate createPlatformNavigationDelegate(
+    PlatformNavigationDelegateCreationParams params,
+  ) {
+    return _FakePlatformNavigationDelegate(params);
+  }
+}
+
+class _FakePlatformWebViewController extends PlatformWebViewController {
+  _FakePlatformWebViewController(super.params) : super.implementation();
+
+  @override
+  Future<void> setJavaScriptMode(JavaScriptMode javaScriptMode) async {}
+
+  @override
+  Future<void> setPlatformNavigationDelegate(PlatformNavigationDelegate handler) async {}
+
+  @override
+  Future<void> loadRequest(LoadRequestParams params) async {}
+}
+
+class _FakePlatformWebViewWidget extends PlatformWebViewWidget {
+  _FakePlatformWebViewWidget(super.params) : super.implementation();
+
+  @override
+  Widget build(BuildContext context) {
+    return const SizedBox.expand(key: Key('fake_webview'));
+  }
+}
+
+class _FakePlatformNavigationDelegate extends PlatformNavigationDelegate {
+  _FakePlatformNavigationDelegate(super.params) : super.implementation();
+
+  @override
+  Future<void> setOnPageStarted(PageEventCallback onPageStarted) async {}
+
+  @override
+  Future<void> setOnPageFinished(PageEventCallback onPageFinished) async {}
+
+  @override
+  Future<void> setOnWebResourceError(WebResourceErrorCallback onWebResourceError) async {}
+
+  @override
+  Future<void> setOnNavigationRequest(NavigationRequestCallback onNavigationRequest) async {}
+
+  @override
+  Future<void> setOnProgress(ProgressCallback onProgress) async {}
+
+  @override
+  Future<void> setOnUrlChange(UrlChangeCallback onUrlChange) async {}
+
+  @override
+  Future<void> setOnHttpAuthRequest(HttpAuthRequestCallback onHttpAuthRequest) async {}
+}

test/src/features/notifications/notifications_screen_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/core/auth/session_model.dart';
+import 'package:lazurite/src/core/utils/logger_provider.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_providers.dart';
+import 'package:lazurite/src/features/notifications/domain/notification.dart';
+import 'package:lazurite/src/features/notifications/domain/notification_type.dart';
 import 'package:lazurite/src/features/notifications/presentation/notifications_screen.dart';
+import 'package:lazurite/src/infrastructure/db/app_database.dart';
+import 'package:mocktail/mocktail.dart';
+import 'package:riverpod_annotation/riverpod_annotation.dart';
 
-import '../../../helpers/pump_app.dart';
+import '../../../helpers/mocks.dart';
 
 void main() {
+  late MockNotificationsRepository mockRepository;
+  late MockLogger mockLogger;
+
+  Widget createSubject({
+    List<AppNotification> notifications = const [],
+    bool authenticated = true,
+    bool throwError = false,
+  }) {
+    final overrides = <Override>[
+      notificationsRepositoryProvider.overrideWithValue(mockRepository),
+      loggerProvider('NotificationsNotifier').overrideWithValue(mockLogger),
+      authProvider.overrideWith(() => _FakeAuthNotifier(authenticated: authenticated)),
+    ];
+
+    if (throwError) {
+      when(
+        () => mockRepository.watchNotifications(),
+      ).thenAnswer((_) => Stream.error(Exception('Network error')));
+    } else {
+      when(
+        () => mockRepository.watchNotifications(),
+      ).thenAnswer((_) => Stream.value(notifications));
+    }
+
+    return ProviderScope(
+      overrides: overrides,
+      child: const MaterialApp(home: NotificationsScreen()),
+    );
+  }
+
+  setUp(() {
+    mockRepository = MockNotificationsRepository();
+    mockLogger = MockLogger();
+
+    when(() => mockLogger.debug(any(), any())).thenReturn(null);
+    when(() => mockLogger.info(any(), any())).thenReturn(null);
+    when(() => mockLogger.error(any(), any(), any())).thenReturn(null);
+
+    when(() => mockRepository.watchNotifications()).thenAnswer((_) => Stream.value([]));
+    when(
+      () => mockRepository.fetchNotifications(
+        cursor: any(named: 'cursor'),
+        limit: any(named: 'limit'),
+      ),
+    ).thenAnswer((_) async {});
+    when(() => mockRepository.fetchNotifications()).thenAnswer((_) async {});
+    when(() => mockRepository.getCursor()).thenAnswer((_) async => null);
+    when(() => mockRepository.markAllAsRead()).thenAnswer((_) async {});
+  });
+
   group('NotificationsScreen', () {
-    testWidgets('renders app bar with title', (tester) async {
-      await tester.pumpApp(const NotificationsScreen());
+    testWidgets('shows empty state when no notifications', (tester) async {
+      await tester.pumpWidget(createSubject());
+      await tester.pump();
+      await tester.pump(const Duration(milliseconds: 100));
+      await tester.pump(const Duration(milliseconds: 100));
 
-      expect(find.text('Notifications'), findsWidgets);
+      expect(find.text('No notifications yet'), findsOneWidget);
+      expect(find.text('When someone interacts with you, it will show up here'), findsOneWidget);
     });
 
-    testWidgets('renders notifications icon', (tester) async {
-      await tester.pumpApp(const NotificationsScreen());
+    testWidgets('shows notification list when notifications exist', (tester) async {
+      final notification = AppNotification(
+        uri: 'at://did:plc:user/app.bsky.notification/1',
+        actor: _createProfile('did:plc:actor1', 'alice.bsky'),
+        type: NotificationType.like,
+        indexedAt: DateTime.now(),
+        isRead: false,
+      );
 
-      expect(find.byIcon(Icons.notifications_outlined), findsOneWidget);
+      await tester.pumpWidget(createSubject(notifications: [notification]));
+      await tester.pump();
+      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);
     });
 
-    testWidgets('renders notifications placeholder text', (tester) async {
-      await tester.pumpApp(const NotificationsScreen());
+    testWidgets('shows sign in message when not authenticated', (tester) async {
+      await tester.pumpWidget(createSubject(authenticated: false));
+      await tester.pump();
 
-      expect(find.text('Your notifications will appear here'), findsOneWidget);
+      expect(find.text('Sign in to see your notifications'), findsOneWidget);
+    });
+
+    testWidgets('displays app bar with title', (tester) async {
+      await tester.pumpWidget(createSubject());
+      await tester.pump();
+      await tester.pump(const Duration(milliseconds: 100));
+      await tester.pump(const Duration(milliseconds: 100));
+
+      expect(find.text('Notifications'), findsOneWidget);
+    });
+
+    testWidgets('calls refresh on initial load', (tester) async {
+      await tester.pumpWidget(createSubject());
+      await tester.pump();
+      await tester.pump(const Duration(milliseconds: 100));
+
+      verify(() => mockRepository.fetchNotifications()).called(1);
+    });
+
+    testWidgets('mark all as read button is visible when authenticated', (tester) async {
+      final notification = AppNotification(
+        uri: 'at://did:plc:user/app.bsky.notification/1',
+        actor: _createProfile('did:plc:actor1', 'alice.bsky'),
+        type: NotificationType.like,
+        indexedAt: DateTime.now(),
+        isRead: false,
+      );
+
+      await tester.pumpWidget(createSubject(notifications: [notification]));
+      await tester.pump();
+      await tester.pump(const Duration(milliseconds: 100));
+      await tester.pump(const Duration(milliseconds: 100));
+
+      expect(find.byIcon(Icons.done_all), findsOneWidget);
+    });
+
+    testWidgets('mark all as read calls repository', (tester) async {
+      final notification = AppNotification(
+        uri: 'at://did:plc:user/app.bsky.notification/1',
+        actor: _createProfile('did:plc:actor1', 'alice.bsky'),
+        type: NotificationType.like,
+        indexedAt: DateTime.now(),
+        isRead: false,
+      );
+
+      await tester.pumpWidget(createSubject(notifications: [notification]));
+      await tester.pump();
+      await tester.pump(const Duration(milliseconds: 100));
+      await tester.pump(const Duration(milliseconds: 100));
+
+      await tester.tap(find.byIcon(Icons.done_all));
+      await tester.pump();
+
+      verify(() => mockRepository.markAllAsRead()).called(1);
     });
   });
 }
+
+class _FakeAuthNotifier extends AuthNotifier {
+  _FakeAuthNotifier({required this.authenticated});
+
+  final bool authenticated;
+
+  @override
+  AuthState build() {
+    if (authenticated) {
+      return AuthState.authenticated(
+        Session(
+          did: 'did:plc:test',
+          scope: 'test',
+          handle: 'test.bsky.social',
+          accessJwt: 'access',
+          refreshJwt: 'refresh',
+          pdsUrl: 'https://bsky.social',
+          dpopKey: {'kty': 'OKP'},
+          expiresAt: DateTime.now().add(const Duration(minutes: 30)),
+        ),
+      );
+    }
+
+    return const AuthState.unauthenticated();
+  }
+}
+
+Profile _createProfile(String did, String handle) {
+  return Profile(
+    did: did,
+    handle: handle,
+    displayName: null,
+    description: null,
+    avatar: null,
+    banner: null,
+    indexedAt: null,
+    pronouns: null,
+    website: null,
+    createdAt: null,
+    verificationStatus: null,
+    labels: null,
+    pinnedPostUri: null,
+  );
+}

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

···
+import 'package:flutter/material.dart';
+import 'package:flutter_test/flutter_test.dart';
+import 'package:lazurite/src/features/notifications/domain/notification.dart';
+import 'package:lazurite/src/features/notifications/domain/notification_type.dart';
+import 'package:lazurite/src/features/notifications/presentation/widgets/notification_list_item.dart';
+import 'package:lazurite/src/infrastructure/db/app_database.dart';
+
+import '../../../../../helpers/pump_app.dart';
+
+void main() {
+  group('NotificationListItem', () {
+    late AppNotification notification;
+    late Profile actor;
+
+    setUp(() {
+      actor = const Profile(
+        did: 'did:plc:actor1',
+        handle: 'alice.bsky.social',
+        displayName: 'Alice',
+        description: null,
+        avatar: 'https://example.com/avatar.jpg',
+        banner: null,
+        indexedAt: null,
+        pronouns: null,
+        website: null,
+        createdAt: null,
+        verificationStatus: null,
+        labels: null,
+        pinnedPostUri: null,
+      );
+
+      notification = AppNotification(
+        uri: 'at://did:plc:user/app.bsky.notification/1',
+        actor: actor,
+        type: NotificationType.like,
+        reasonSubjectUri: 'at://did:plc:user/app.bsky.feed.post/1',
+        indexedAt: DateTime.now().subtract(const Duration(hours: 2)),
+        isRead: false,
+      );
+    });
+
+    testWidgets('displays actor display name', (tester) async {
+      await tester.pumpApp(NotificationListItem(notification: notification));
+
+      expect(find.text('Alice'), findsOneWidget);
+    });
+
+    testWidgets('displays actor handle', (tester) async {
+      await tester.pumpApp(NotificationListItem(notification: notification));
+
+      expect(find.text('@alice.bsky.social'), findsOneWidget);
+    });
+
+    testWidgets('displays notification type text', (tester) async {
+      await tester.pumpApp(NotificationListItem(notification: notification));
+
+      expect(find.text('liked your post'), findsOneWidget);
+    });
+
+    testWidgets('displays notification type icon', (tester) async {
+      await tester.pumpApp(NotificationListItem(notification: notification));
+
+      expect(find.byIcon(Icons.favorite), findsOneWidget);
+    });
+
+    testWidgets('displays relative timestamp', (tester) async {
+      await tester.pumpApp(NotificationListItem(notification: notification));
+
+      expect(find.text('2h'), findsOneWidget);
+    });
+
+    testWidgets('unread notification has highlighted background', (tester) async {
+      await tester.pumpApp(NotificationListItem(notification: notification));
+
+      final card = tester.widget<Card>(find.byType(Card));
+      expect(card.color, isNotNull);
+    });
+
+    testWidgets('read notification has no special background', (tester) async {
+      final readNotification = notification.copyWith(isRead: true);
+      await tester.pumpApp(NotificationListItem(notification: readNotification));
+
+      final card = tester.widget<Card>(find.byType(Card));
+      expect(card.color, isNull);
+    });
+
+    testWidgets('calls onTap when tapped', (tester) async {
+      var tapped = false;
+      await tester.pumpApp(
+        NotificationListItem(notification: notification, onTap: () => tapped = true),
+      );
+
+      await tester.tap(find.byType(InkWell));
+      expect(tapped, isTrue);
+    });
+
+    testWidgets('displays handle when displayName is null', (tester) async {
+      const noDisplayNameActor = Profile(
+        did: 'did:plc:actor2',
+        handle: 'bob.bsky.social',
+        displayName: null,
+        description: null,
+        avatar: null,
+        banner: null,
+        indexedAt: null,
+        pronouns: null,
+        website: null,
+        createdAt: null,
+        verificationStatus: null,
+        labels: null,
+        pinnedPostUri: null,
+      );
+      final noDisplayNameNotification = notification.copyWith(actor: noDisplayNameActor);
+      await tester.pumpApp(NotificationListItem(notification: noDisplayNameNotification));
+
+      expect(find.text('bob.bsky.social'), findsOneWidget);
+    });
+
+    testWidgets('shows follow type icon and text for follow notifications', (tester) async {
+      final followNotification = notification.copyWith(
+        type: NotificationType.follow,
+        reasonSubjectUri: null,
+      );
+      await tester.pumpApp(NotificationListItem(notification: followNotification));
+
+      expect(find.byIcon(Icons.person_add), findsOneWidget);
+      expect(find.text('followed you'), findsOneWidget);
+    });
+
+    testWidgets('shows reply type icon and text for reply notifications', (tester) async {
+      final replyNotification = notification.copyWith(type: NotificationType.reply);
+      await tester.pumpApp(NotificationListItem(notification: replyNotification));
+
+      expect(find.byIcon(Icons.reply), findsOneWidget);
+      expect(find.text('replied to your post'), findsOneWidget);
+    });
+  });
+}

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

···
+import 'package:flutter/material.dart';
+import 'package:flutter_test/flutter_test.dart';
+import 'package:lazurite/src/features/notifications/domain/notification_type.dart';
+import 'package:lazurite/src/features/notifications/presentation/widgets/notification_type_icon.dart';
+
+import '../../../../../helpers/pump_app.dart';
+
+void main() {
+  group('NotificationTypeIcon', () {
+    testWidgets('displays heart icon for like', (tester) async {
+      await tester.pumpApp(const NotificationTypeIcon(type: NotificationType.like));
+
+      expect(find.byIcon(Icons.favorite), findsOneWidget);
+    });
+
+    testWidgets('displays repeat icon for repost', (tester) async {
+      await tester.pumpApp(const NotificationTypeIcon(type: NotificationType.repost));
+
+      expect(find.byIcon(Icons.repeat), findsOneWidget);
+    });
+
+    testWidgets('displays person_add icon for follow', (tester) async {
+      await tester.pumpApp(const NotificationTypeIcon(type: NotificationType.follow));
+
+      expect(find.byIcon(Icons.person_add), findsOneWidget);
+    });
+
+    testWidgets('displays alternate_email icon for mention', (tester) async {
+      await tester.pumpApp(const NotificationTypeIcon(type: NotificationType.mention));
+
+      expect(find.byIcon(Icons.alternate_email), findsOneWidget);
+    });
+
+    testWidgets('displays reply icon for reply', (tester) async {
+      await tester.pumpApp(const NotificationTypeIcon(type: NotificationType.reply));
+
+      expect(find.byIcon(Icons.reply), findsOneWidget);
+    });
+
+    testWidgets('displays format_quote icon for quote', (tester) async {
+      await tester.pumpApp(const NotificationTypeIcon(type: NotificationType.quote));
+
+      expect(find.byIcon(Icons.format_quote), findsOneWidget);
+    });
+
+    testWidgets('displays group_add icon for starterpackJoined', (tester) async {
+      await tester.pumpApp(const NotificationTypeIcon(type: NotificationType.starterpackJoined));
+
+      expect(find.byIcon(Icons.group_add), findsOneWidget);
+    });
+
+    testWidgets('respects custom size', (tester) async {
+      await tester.pumpApp(const NotificationTypeIcon(type: NotificationType.like, size: 32));
+
+      final icon = tester.widget<Icon>(find.byIcon(Icons.favorite));
+      expect(icon.size, 32);
+    });
+
+    testWidgets('uses default size of 20', (tester) async {
+      await tester.pumpApp(const NotificationTypeIcon(type: NotificationType.like));
+
+      final icon = tester.widget<Icon>(find.byIcon(Icons.favorite));
+      expect(icon.size, 20);
+    });
+  });
+}

test/src/features/settings/presentation/widgets/color_role_picker_test.dart

···
+import 'package:flutter/material.dart';
+import 'package:flutter_test/flutter_test.dart';
+import 'package:lazurite/src/features/settings/presentation/widgets/color_role_picker.dart';
+
+void main() {
+  group('ColorRolePicker', () {
+    const defaultColor = Color(0xFF0085FF);
+    const overrideColor = Color(0xFFFF7EB6);
+
+    Widget buildTestWidget({
+      required String label,
+      required String description,
+      required Color? currentColor,
+      required Color defaultColor,
+      required ValueChanged<Color?> onColorChanged,
+    }) {
+      return MaterialApp(
+        home: Scaffold(
+          body: ColorRolePicker(
+            label: label,
+            description: description,
+            currentColor: currentColor,
+            defaultColor: defaultColor,
+            onColorChanged: onColorChanged,
+          ),
+        ),
+      );
+    }
+
+    testWidgets('displays label and description', (tester) async {
+      await tester.pumpWidget(
+        buildTestWidget(
+          label: 'Primary',
+          description: 'Main accent color',
+          currentColor: null,
+          defaultColor: defaultColor,
+          onColorChanged: (_) {},
+        ),
+      );
+
+      expect(find.text('Primary'), findsOneWidget);
+      expect(find.text('Main accent color'), findsOneWidget);
+    });
+
+    testWidgets('displays default color when currentColor is null', (tester) async {
+      await tester.pumpWidget(
+        buildTestWidget(
+          label: 'Primary',
+          description: 'Main accent color',
+          currentColor: null,
+          defaultColor: defaultColor,
+          onColorChanged: (_) {},
+        ),
+      );
+
+      final container = tester.widget<Container>(
+        find.descendant(of: find.byType(GestureDetector), matching: find.byType(Container)).first,
+      );
+
+      expect(container.decoration, isA<BoxDecoration>());
+      final decoration = container.decoration as BoxDecoration;
+      expect(decoration.color, defaultColor);
+    });
+
+    testWidgets('displays override color when currentColor is set', (tester) async {
+      await tester.pumpWidget(
+        buildTestWidget(
+          label: 'Primary',
+          description: 'Main accent color',
+          currentColor: overrideColor,
+          defaultColor: defaultColor,
+          onColorChanged: (_) {},
+        ),
+      );
+
+      final container = tester.widget<Container>(
+        find.descendant(of: find.byType(GestureDetector), matching: find.byType(Container)).first,
+      );
+
+      expect(container.decoration, isA<BoxDecoration>());
+      final decoration = container.decoration as BoxDecoration;
+      expect(decoration.color, overrideColor);
+    });
+
+    testWidgets('shows edit icon when color has override', (tester) async {
+      await tester.pumpWidget(
+        buildTestWidget(
+          label: 'Primary',
+          description: 'Main accent color',
+          currentColor: overrideColor,
+          defaultColor: defaultColor,
+          onColorChanged: (_) {},
+        ),
+      );
+
+      expect(find.byIcon(Icons.edit), findsOneWidget);
+    });
+
+    testWidgets('does not show edit icon when using default', (tester) async {
+      await tester.pumpWidget(
+        buildTestWidget(
+          label: 'Primary',
+          description: 'Main accent color',
+          currentColor: null,
+          defaultColor: defaultColor,
+          onColorChanged: (_) {},
+        ),
+      );
+
+      expect(find.byIcon(Icons.edit), findsNothing);
+    });
+
+    testWidgets('shows restore button when color has override', (tester) async {
+      await tester.pumpWidget(
+        buildTestWidget(
+          label: 'Primary',
+          description: 'Main accent color',
+          currentColor: overrideColor,
+          defaultColor: defaultColor,
+          onColorChanged: (_) {},
+        ),
+      );
+
+      expect(find.byIcon(Icons.restore), findsOneWidget);
+    });
+
+    testWidgets('does not show restore button when using default', (tester) async {
+      await tester.pumpWidget(
+        buildTestWidget(
+          label: 'Primary',
+          description: 'Main accent color',
+          currentColor: null,
+          defaultColor: defaultColor,
+          onColorChanged: (_) {},
+        ),
+      );
+
+      expect(find.byIcon(Icons.restore), findsNothing);
+    });
+
+    testWidgets('tapping restore button calls onColorChanged with null', (tester) async {
+      Color? changedColor = overrideColor;
+      await tester.pumpWidget(
+        buildTestWidget(
+          label: 'Primary',
+          description: 'Main accent color',
+          currentColor: overrideColor,
+          defaultColor: defaultColor,
+          onColorChanged: (color) => changedColor = color,
+        ),
+      );
+
+      await tester.tap(find.byIcon(Icons.restore));
+      await tester.pump();
+
+      expect(changedColor, isNull);
+    });
+
+    testWidgets('tapping color box opens color picker dialog', (tester) async {
+      await tester.pumpWidget(
+        buildTestWidget(
+          label: 'Primary',
+          description: 'Main accent color',
+          currentColor: null,
+          defaultColor: defaultColor,
+          onColorChanged: (_) {},
+        ),
+      );
+
+      await tester.tap(find.byType(GestureDetector).first);
+      await tester.pumpAndSettle();
+
+      expect(find.text('Select Color'), findsOneWidget);
+    });
+
+    testWidgets('tapping ListTile opens color picker dialog', (tester) async {
+      await tester.pumpWidget(
+        buildTestWidget(
+          label: 'Primary',
+          description: 'Main accent color',
+          currentColor: null,
+          defaultColor: defaultColor,
+          onColorChanged: (_) {},
+        ),
+      );
+
+      await tester.tap(find.byType(ListTile));
+      await tester.pumpAndSettle();
+
+      expect(find.text('Select Color'), findsOneWidget);
+    });
+
+    testWidgets('color picker dialog shows preset colors', (tester) async {
+      await tester.pumpWidget(
+        buildTestWidget(
+          label: 'Primary',
+          description: 'Main accent color',
+          currentColor: null,
+          defaultColor: defaultColor,
+          onColorChanged: (_) {},
+        ),
+      );
+
+      await tester.tap(find.byType(ListTile));
+      await tester.pumpAndSettle();
+
+      expect(find.byType(Wrap), findsOneWidget);
+    });
+
+    testWidgets('color picker dialog shows hex input', (tester) async {
+      await tester.pumpWidget(
+        buildTestWidget(
+          label: 'Primary',
+          description: 'Main accent color',
+          currentColor: null,
+          defaultColor: defaultColor,
+          onColorChanged: (_) {},
+        ),
+      );
+
+      await tester.tap(find.byType(ListTile));
+      await tester.pumpAndSettle();
+
+      expect(find.widgetWithText(TextField, '0085FF'), findsOneWidget);
+    });
+
+    testWidgets('dialog cancel button closes without callback', (tester) async {
+      bool callbackCalled = false;
+      await tester.pumpWidget(
+        buildTestWidget(
+          label: 'Primary',
+          description: 'Main accent color',
+          currentColor: null,
+          defaultColor: defaultColor,
+          onColorChanged: (_) => callbackCalled = true,
+        ),
+      );
+
+      await tester.tap(find.byType(ListTile));
+      await tester.pumpAndSettle();
+
+      await tester.tap(find.text('Cancel'));
+      await tester.pumpAndSettle();
+
+      expect(find.text('Select Color'), findsNothing);
+      expect(callbackCalled, isFalse);
+    });
+
+    testWidgets('dialog select button calls onColorChanged with selected color', (tester) async {
+      Color? selectedColor;
+      await tester.pumpWidget(
+        buildTestWidget(
+          label: 'Primary',
+          description: 'Main accent color',
+          currentColor: null,
+          defaultColor: defaultColor,
+          onColorChanged: (color) => selectedColor = color,
+        ),
+      );
+
+      await tester.tap(find.byType(ListTile));
+      await tester.pumpAndSettle();
+
+      await tester.tap(find.text('Select'));
+      await tester.pumpAndSettle();
+
+      expect(find.text('Select Color'), findsNothing);
+      expect(selectedColor, isNotNull);
+    });
+
+    testWidgets('typing hex code updates selected color', (tester) async {
+      Color? selectedColor;
+      await tester.pumpWidget(
+        buildTestWidget(
+          label: 'Primary',
+          description: 'Main accent color',
+          currentColor: null,
+          defaultColor: defaultColor,
+          onColorChanged: (color) => selectedColor = color,
+        ),
+      );
+
+      await tester.tap(find.byType(ListTile));
+      await tester.pumpAndSettle();
+
+      final textField = find.byType(TextField);
+      await tester.enterText(textField, 'FF0000');
+      await tester.pump();
+
+      await tester.tap(find.text('Select'));
+      await tester.pumpAndSettle();
+
+      expect(selectedColor, const Color(0xFFFF0000));
+    });
+
+    testWidgets('tapping preset color updates selection', (tester) async {
+      Color? selectedColor;
+      await tester.pumpWidget(
+        buildTestWidget(
+          label: 'Primary',
+          description: 'Main accent color',
+          currentColor: null,
+          defaultColor: defaultColor,
+          onColorChanged: (color) => selectedColor = color,
+        ),
+      );
+
+      await tester.tap(find.byType(ListTile));
+      await tester.pumpAndSettle();
+
+      final presetContainers = find.descendant(
+        of: find.byType(Wrap),
+        matching: find.byType(GestureDetector),
+      );
+      await tester.tap(presetContainers.at(1));
+      await tester.pump();
+
+      await tester.tap(find.text('Select'));
+      await tester.pumpAndSettle();
+
+      expect(selectedColor, isNotNull);
+    });
+
+    testWidgets('displayColor getter returns currentColor when set', (tester) async {
+      final widget = ColorRolePicker(
+        label: 'Primary',
+        description: 'Test',
+        currentColor: overrideColor,
+        defaultColor: defaultColor,
+        onColorChanged: (_) {},
+      );
+
+      expect(widget.displayColor, overrideColor);
+    });
+
+    testWidgets('displayColor getter returns defaultColor when currentColor is null', (
+      tester,
+    ) async {
+      final widget = ColorRolePicker(
+        label: 'Primary',
+        description: 'Test',
+        currentColor: null,
+        defaultColor: defaultColor,
+        onColorChanged: (_) {},
+      );
+
+      expect(widget.displayColor, defaultColor);
+    });
+
+    testWidgets('hasOverride getter returns true when currentColor is set', (tester) async {
+      final widget = ColorRolePicker(
+        label: 'Primary',
+        description: 'Test',
+        currentColor: overrideColor,
+        defaultColor: defaultColor,
+        onColorChanged: (_) {},
+      );
+
+      expect(widget.hasOverride, isTrue);
+    });
+
+    testWidgets('hasOverride getter returns false when currentColor is null', (tester) async {
+      final widget = ColorRolePicker(
+        label: 'Primary',
+        description: 'Test',
+        currentColor: null,
+        defaultColor: defaultColor,
+        onColorChanged: (_) {},
+      );
+
+      expect(widget.hasOverride, isFalse);
+    });
+
+    testWidgets('hex input handles # prefix', (tester) async {
+      Color? selectedColor;
+      await tester.pumpWidget(
+        buildTestWidget(
+          label: 'Primary',
+          description: 'Main accent color',
+          currentColor: null,
+          defaultColor: defaultColor,
+          onColorChanged: (color) => selectedColor = color,
+        ),
+      );
+
+      await tester.tap(find.byType(ListTile));
+      await tester.pumpAndSettle();
+
+      final textField = find.byType(TextField);
+      await tester.enterText(textField, '#00FF00');
+      await tester.pump();
+
+      await tester.tap(find.text('Select'));
+      await tester.pumpAndSettle();
+
+      expect(selectedColor, const Color(0xFF00FF00));
+    });
+  });
+}