Collapse scanner-card and pagination duplication into shared widgets

Extract ScannerStatusCard<T> and PaginationBar so the ARP/mDNS cards and
the two paginated lists share one implementation each. Also fold the
four UISnackbars methods over a severity enum and fix Notification.toJson
serializing a method tear-off instead of the enum name.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

frontend/lib/devices/device_list.dart

@@ -8,6 +8,7 @@ import '../model/device_type.dart';
 import '../navigation.dart';
 import '../utils/friendly_date_formatter.dart';
 import '../utils/oott_api.dart';
+import '../widgets/pagination_bar.dart';
 import 'device_list_filter.dart';
 import 'device_list_rows.dart';
 import 'device_list_sort.dart';
@@ -300,51 +301,17 @@ class _DeviceListState extends State<DeviceList> with RouteAware {
             },
             separatorBuilder: (_, _) => const Divider(height: 1),
           ),
-          if (_currentPage > 0 || _hasNextPage) _buildPaginationControls(),
+          if (_currentPage > 0 || _hasNextPage)
+            SliverToBoxAdapter(
+              child: PaginationBar(
+                currentPage: _currentPage,
+                hasNextPage: _hasNextPage,
+                isLoading: _isLoading,
+                onPageChanged: _fetchPage,
+              ),
+            ),
         ],
       ),
     );
   }
-
-  Widget _buildPaginationControls() {
-    return SliverToBoxAdapter(
-      child: Padding(
-        padding: const EdgeInsets.symmetric(vertical: 8),
-        child: Row(
-          mainAxisAlignment: MainAxisAlignment.center,
-          children: [
-            IconButton.outlined(
-              onPressed: _currentPage > 0 && !_isLoading
-                  ? () => _fetchPage(0)
-                  : null,
-              icon: const Icon(Icons.first_page),
-              tooltip: 'First page',
-            ),
-            const SizedBox(width: 8),
-            IconButton.outlined(
-              onPressed: _currentPage > 0 && !_isLoading
-                  ? () => _fetchPage(_currentPage - 1)
-                  : null,
-              icon: const Icon(Icons.chevron_left),
-              tooltip: 'Previous page',
-            ),
-            Padding(
-              padding: const EdgeInsets.symmetric(horizontal: 16),
-              child: Text(
-                'Page ${_currentPage + 1}',
-                style: Theme.of(context).textTheme.bodyMedium,
-              ),
-            ),
-            IconButton.outlined(
-              onPressed: _hasNextPage && !_isLoading
-                  ? () => _fetchPage(_currentPage + 1)
-                  : null,
-              icon: const Icon(Icons.chevron_right),
-              tooltip: 'Next page',
-            ),
-          ],
-        ),
-      ),
-    );
-  }
 }

frontend/lib/home/notifications_list.dart

@@ -8,6 +8,7 @@ import '../navigation.dart';
 import '../utils/friendly_date_formatter.dart';
 import '../utils/oott_api.dart';
 import '../utils/ui_snackbars.dart';
+import '../widgets/pagination_bar.dart';
 import 'notification_card.dart';
 
 const _pageSize = 5;
@@ -288,7 +289,15 @@ class _NotificationsListState extends State<NotificationsList>
     }
     return [
       _buildNotificationSliver(),
-      if (_currentPage > 0 || _hasNextPage) _buildPaginationControls(context),
+      if (_currentPage > 0 || _hasNextPage)
+        SliverToBoxAdapter(
+          child: PaginationBar(
+            currentPage: _currentPage,
+            hasNextPage: _hasNextPage,
+            isLoading: _isLoading,
+            onPageChanged: _fetchPage,
+          ),
+        ),
     ];
   }
 
@@ -306,46 +315,4 @@ class _NotificationsListState extends State<NotificationsList>
       },
     );
   }
-
-  Widget _buildPaginationControls(BuildContext context) {
-    return SliverToBoxAdapter(
-      child: Padding(
-        padding: const EdgeInsets.symmetric(vertical: 8),
-        child: Row(
-          mainAxisAlignment: MainAxisAlignment.center,
-          children: [
-            IconButton.outlined(
-              onPressed: _currentPage > 0 && !_isLoading
-                  ? () => _fetchPage(0)
-                  : null,
-              icon: const Icon(Icons.first_page),
-              tooltip: 'First page',
-            ),
-            const SizedBox(width: 8),
-            IconButton.outlined(
-              onPressed: _currentPage > 0 && !_isLoading
-                  ? () => _fetchPage(_currentPage - 1)
-                  : null,
-              icon: const Icon(Icons.chevron_left),
-              tooltip: 'Previous page',
-            ),
-            Padding(
-              padding: const EdgeInsets.symmetric(horizontal: 16),
-              child: Text(
-                'Page ${_currentPage + 1}',
-                style: Theme.of(context).textTheme.bodyMedium,
-              ),
-            ),
-            IconButton.outlined(
-              onPressed: _hasNextPage && !_isLoading
-                  ? () => _fetchPage(_currentPage + 1)
-                  : null,
-              icon: const Icon(Icons.chevron_right),
-              tooltip: 'Next page',
-            ),
-          ],
-        ),
-      ),
-    );
-  }
 }

frontend/lib/model/notification.dart

@@ -43,7 +43,7 @@ class Notification {
   Map<String, dynamic> toJson() => {
     'id': id,
     'created_on': createdOn.toUtc().toIso8601String(),
-    'notification_type': notificationType.toString,
+    'notification_type': notificationType.name,
     'title': title,
     'body': body,
     'is_new': isNew,

frontend/lib/utils/ui_snackbars.dart

@@ -1,33 +1,31 @@
 import 'package:flutter/material.dart';
 import '../theme/app_colors.dart';
 
+enum _Severity { error, success, warning, info }
+
 class UISnackbars {
-  static void showError(BuildContext context, String message) {
+  static void showError(BuildContext context, String message) =>
-    final colorScheme = Theme.of(context).colorScheme;
+      _show(context, message, _Severity.error);
-    _show(context, message, colorScheme.error, colorScheme.onError);
-  }
 
-  static void showSuccess(BuildContext context, String message) {
+  static void showSuccess(BuildContext context, String message) =>
-    final appColors = Theme.of(context).extension<AppColorExtension>()!;
+      _show(context, message, _Severity.success);
-    _show(context, message, appColors.success, appColors.onSuccess);
-  }
 
-  static void showWarning(BuildContext context, String message) {
+  static void showWarning(BuildContext context, String message) =>
-    final appColors = Theme.of(context).extension<AppColorExtension>()!;
+      _show(context, message, _Severity.warning);
-    _show(context, message, appColors.warning, appColors.onWarning);
-  }
 
-  static void showInfo(BuildContext context, String message) {
+  static void showInfo(BuildContext context, String message) =>
-    final appColors = Theme.of(context).extension<AppColorExtension>()!;
+      _show(context, message, _Severity.info);
-    _show(context, message, appColors.info, appColors.onInfo);
+
-  }
+  static void _show(BuildContext context, String message, _Severity severity) {
+    final theme = Theme.of(context);
+    final colors = theme.extension<AppColorExtension>()!;
+    final (background, foreground) = switch (severity) {
+      _Severity.error => (theme.colorScheme.error, theme.colorScheme.onError),
+      _Severity.success => (colors.success, colors.onSuccess),
+      _Severity.warning => (colors.warning, colors.onWarning),
+      _Severity.info => (colors.info, colors.onInfo),
+    };
 
-  static void _show(
-    BuildContext context,
-    String message,
-    Color background,
-    Color foreground,
-  ) {
     final messenger = ScaffoldMessenger.of(context);
     messenger.clearSnackBars();
     messenger.showSnackBar(

frontend/lib/widgets/arp_scanner_card.dart

@@ -1,140 +1,29 @@
-import 'dart:async';
-
 import 'package:flutter/material.dart';
-import 'package:go_router/go_router.dart';
 
 import '../model/arp_scanner_status.dart';
-import '../utils/backend_reachability.dart';
 import '../utils/duration_formatter.dart';
 import '../utils/oott_api.dart';
-import '../utils/polled_value.dart';
+import 'scanner_status_card.dart';
-import 'polled_stale_indicator.dart';
 
-class ArpScannerCard extends StatefulWidget {
+class ArpScannerCard extends StatelessWidget {
   const ArpScannerCard({super.key});
 
   @override
-  State<ArpScannerCard> createState() => _ArpScannerCardState();
+  Widget build(BuildContext context) {
-}
+    return ScannerStatusCard<ArpScannerStatus>(
-
+      title: 'ARP Scanner',
-class _ArpScannerCardState extends State<ArpScannerCard> {
-  late final PolledValue<ArpScannerStatus> _polled;
-  Timer? _tickTimer;
-
-  @override
-  void initState() {
-    super.initState();
-    _polled = PolledValue<ArpScannerStatus>(
       fetch: ({cancelToken}) =>
           BackendAPI.instance.getArpScannerStatus(cancelToken: cancelToken),
-      pollInterval: const Duration(seconds: 5),
+      resolver: _resolve,
-      staleErrorAfter: const Duration(seconds: 30),
-    );
-    _tickTimer = Timer.periodic(const Duration(seconds: 1), (_) {
-      if (mounted) setState(() {});
-    });
-  }
-
-  @override
-  void dispose() {
-    _tickTimer?.cancel();
-    _polled.dispose();
-    super.dispose();
-  }
-
-  @override
-  Widget build(BuildContext context) {
-    return ListenableBuilder(
-      listenable: Listenable.merge([_polled, BackendReachability.instance]),
-      builder: (context, _) {
-        final freshness = effectiveFreshness(_polled);
-        if (freshness == PolledFreshness.initialLoading) {
-          return const Card(
-            child: Padding(
-              padding: EdgeInsets.all(16),
-              child: Center(child: CircularProgressIndicator()),
-            ),
-          );
-        }
-
-        final (color, label, sublabel) = _resolveState(freshness);
-        final isStale = freshness == PolledFreshness.stale;
-
-        return Card(
-          clipBehavior: Clip.antiAlias,
-          child: InkWell(
-            onTap: () => context.go('/status'),
-            child: Padding(
-              padding: const EdgeInsets.all(16),
-              child: Row(
-                children: [
-                  Icon(Icons.circle, color: color, size: 14),
-                  const SizedBox(width: 12),
-                  Expanded(
-                    child: Column(
-                      crossAxisAlignment: CrossAxisAlignment.start,
-                      children: [
-                        Row(
-                          children: [
-                            Text(
-                              'ARP Scanner',
-                              style: Theme.of(context).textTheme.titleMedium,
-                            ),
-                            if (isStale) ...[
-                              const SizedBox(width: 6),
-                              PolledStaleIndicator(polled: _polled),
-                            ],
-                          ],
-                        ),
-                        const SizedBox(height: 2),
-                        Text(
-                          label,
-                          style: Theme.of(context).textTheme.bodyMedium,
-                        ),
-                        if (sublabel != null) ...[
-                          const SizedBox(height: 2),
-                          Text(
-                            sublabel,
-                            style: Theme.of(context).textTheme.bodySmall
-                                ?.copyWith(
-                                  color: Theme.of(context).colorScheme.outline,
-                                ),
-                          ),
-                        ],
-                      ],
-                    ),
-                  ),
-                ],
-              ),
-            ),
-          ),
-        );
-      },
     );
   }
 
-  (Color, String, String?) _resolveState(PolledFreshness freshness) {
+  static ScannerStatus _resolve(ArpScannerStatus status, double elapsed) {
-    if (freshness == PolledFreshness.error) {
-      return (
-        Colors.red,
-        'Error',
-        _polled.lastErrorMessage ??
-            'Unable to reach the server. Check the logs for details.',
-      );
-    }
-
-    final status = _polled.value!;
-    final lastSuccessAt = _polled.lastSuccessAt!;
-    final elapsed = DateTime.now()
-        .difference(lastSuccessAt)
-        .inSeconds
-        .toDouble();
-
     if (status.isRunning) {
       final sub = status.runningForSeconds != null
-          ? 'Running for ${formatSeconds(status.runningForSeconds! + elapsed)}'
+          ? ['Running for ${formatSeconds(status.runningForSeconds! + elapsed)}']
-          : null;
+          : <String>[];
-      return (Colors.green, 'Running', sub);
+      return (color: Colors.green, label: 'Running', sublabels: sub);
     }
     if (status.nextRunInSeconds != null) {
       final remaining = (status.nextRunInSeconds! - elapsed).clamp(
@@ -142,11 +31,11 @@ class _ArpScannerCardState extends State<ArpScannerCard> {
         double.infinity,
       );
       return (
-        Colors.amber,
+        color: Colors.amber,
-        'Waiting for next run',
+        label: 'Waiting for next run',
-        'Next run in ${formatSeconds(remaining)}',
+        sublabels: ['Next run in ${formatSeconds(remaining)}'],
       );
     }
-    return (Colors.grey, 'Not yet started', null);
+    return (color: Colors.grey, label: 'Not yet started', sublabels: []);
   }
 }

frontend/lib/widgets/mdns_scanner_card.dart

@@ -1,154 +1,34 @@
-import 'dart:async';
-
 import 'package:flutter/material.dart';
-import 'package:go_router/go_router.dart';
 
 import '../model/mdns_scanner_status.dart';
-import '../utils/backend_reachability.dart';
 import '../utils/duration_formatter.dart';
 import '../utils/oott_api.dart';
-import '../utils/polled_value.dart';
+import 'scanner_status_card.dart';
-import 'polled_stale_indicator.dart';
 
-class MdnsScannerCard extends StatefulWidget {
+class MdnsScannerCard extends StatelessWidget {
   const MdnsScannerCard({super.key});
 
   @override
-  State<MdnsScannerCard> createState() => _MdnsScannerCardState();
+  Widget build(BuildContext context) {
-}
+    return ScannerStatusCard<MdnsScannerStatus>(
-
+      title: 'mDNS Scanner',
-class _MdnsScannerCardState extends State<MdnsScannerCard> {
-  late final PolledValue<MdnsScannerStatus> _polled;
-  Timer? _tickTimer;
-
-  @override
-  void initState() {
-    super.initState();
-    _polled = PolledValue<MdnsScannerStatus>(
       fetch: ({cancelToken}) =>
           BackendAPI.instance.getMdnsScannerStatus(cancelToken: cancelToken),
-      pollInterval: const Duration(seconds: 5),
+      resolver: _resolve,
-      staleErrorAfter: const Duration(seconds: 30),
-    );
-    _tickTimer = Timer.periodic(const Duration(seconds: 1), (_) {
-      if (mounted) setState(() {});
-    });
-  }
-
-  @override
-  void dispose() {
-    _tickTimer?.cancel();
-    _polled.dispose();
-    super.dispose();
-  }
-
-  @override
-  Widget build(BuildContext context) {
-    return ListenableBuilder(
-      listenable: Listenable.merge([_polled, BackendReachability.instance]),
-      builder: (context, _) {
-        final freshness = effectiveFreshness(_polled);
-        if (freshness == PolledFreshness.initialLoading) {
-          return const Card(
-            child: Padding(
-              padding: EdgeInsets.all(16),
-              child: Center(child: CircularProgressIndicator()),
-            ),
-          );
-        }
-
-        final (color, label, sublabels) = _resolveState(freshness);
-        final isStale = freshness == PolledFreshness.stale;
-
-        return Card(
-          clipBehavior: Clip.antiAlias,
-          child: InkWell(
-            onTap: () => context.go('/status'),
-            child: Padding(
-              padding: const EdgeInsets.all(16),
-              child: Row(
-                children: [
-                  Icon(Icons.circle, color: color, size: 14),
-                  const SizedBox(width: 12),
-                  Expanded(
-                    child: Column(
-                      crossAxisAlignment: CrossAxisAlignment.start,
-                      children: [
-                        Row(
-                          children: [
-                            Text(
-                              'mDNS Scanner',
-                              style: Theme.of(context).textTheme.titleMedium,
-                            ),
-                            if (isStale) ...[
-                              const SizedBox(width: 6),
-                              PolledStaleIndicator(polled: _polled),
-                            ],
-                          ],
-                        ),
-                        const SizedBox(height: 2),
-                        Text(
-                          label,
-                          style: Theme.of(context).textTheme.bodyMedium,
-                        ),
-                        for (final sublabel in sublabels) ...[
-                          const SizedBox(height: 2),
-                          Text(
-                            sublabel,
-                            style: Theme.of(context).textTheme.bodySmall
-                                ?.copyWith(
-                                  color: Theme.of(context).colorScheme.outline,
-                                ),
-                          ),
-                        ],
-                      ],
-                    ),
-                  ),
-                ],
-              ),
-            ),
-          ),
-        );
-      },
     );
   }
 
-  (Color, String, List<String>) _resolveState(PolledFreshness freshness) {
+  static ScannerStatus _resolve(MdnsScannerStatus status, double elapsed) {
-    if (freshness == PolledFreshness.error) {
+    if (!status.isListening) {
-      return (
+      return (color: Colors.grey, label: 'Not yet started', sublabels: []);
-        Colors.red,
-        'Error',
-        [
-          _polled.lastErrorMessage ??
-              'Unable to reach the server. Check the logs for details.',
-        ],
-      );
     }
-
+    final sublabels = <String>[
-    final status = _polled.value!;
+      status.listeningForSeconds != null
-    final lastSuccessAt = _polled.lastSuccessAt!;
+          ? 'Listening for ${formatSeconds(status.listeningForSeconds! + elapsed)} · ${status.devicesSeen} devices seen'
-    final elapsed = DateTime.now()
+          : '${status.devicesSeen} devices seen',
-        .difference(lastSuccessAt)
+      if (status.lastDeviceSeenSecondsAgo != null)
-        .inSeconds
+        'Last device ${formatSeconds(status.lastDeviceSeenSecondsAgo! + elapsed)} ago',
-        .toDouble();
+    ];
-
+    return (color: Colors.green, label: 'Listening', sublabels: sublabels);
-    if (status.isListening) {
-      final sublabels = <String>[];
-      if (status.listeningForSeconds != null) {
-        sublabels.add(
-          'Listening for ${formatSeconds(status.listeningForSeconds! + elapsed)} · ${status.devicesSeen} devices seen',
-        );
-      } else {
-        sublabels.add('${status.devicesSeen} devices seen');
-      }
-      if (status.lastDeviceSeenSecondsAgo != null) {
-        sublabels.add(
-          'Last device ${formatSeconds(status.lastDeviceSeenSecondsAgo! + elapsed)} ago',
-        );
-      }
-      return (Colors.green, 'Listening', sublabels);
-    }
-
-    return (Colors.grey, 'Not yet started', <String>[]);
   }
 }

frontend/lib/widgets/pagination_bar.dart

@@ -0,0 +1,55 @@
+import 'package:flutter/material.dart';
+
+class PaginationBar extends StatelessWidget {
+  const PaginationBar({
+    super.key,
+    required this.currentPage,
+    required this.hasNextPage,
+    required this.isLoading,
+    required this.onPageChanged,
+  });
+
+  final int currentPage;
+  final bool hasNextPage;
+  final bool isLoading;
+  final ValueChanged<int> onPageChanged;
+
+  @override
+  Widget build(BuildContext context) {
+    final canGoBack = currentPage > 0 && !isLoading;
+    final canGoForward = hasNextPage && !isLoading;
+    return Padding(
+      padding: const EdgeInsets.symmetric(vertical: 8),
+      child: Row(
+        mainAxisAlignment: MainAxisAlignment.center,
+        children: [
+          IconButton.outlined(
+            onPressed: canGoBack ? () => onPageChanged(0) : null,
+            icon: const Icon(Icons.first_page),
+            tooltip: 'First page',
+          ),
+          const SizedBox(width: 8),
+          IconButton.outlined(
+            onPressed: canGoBack ? () => onPageChanged(currentPage - 1) : null,
+            icon: const Icon(Icons.chevron_left),
+            tooltip: 'Previous page',
+          ),
+          Padding(
+            padding: const EdgeInsets.symmetric(horizontal: 16),
+            child: Text(
+              'Page ${currentPage + 1}',
+              style: Theme.of(context).textTheme.bodyMedium,
+            ),
+          ),
+          IconButton.outlined(
+            onPressed: canGoForward
+                ? () => onPageChanged(currentPage + 1)
+                : null,
+            icon: const Icon(Icons.chevron_right),
+            tooltip: 'Next page',
+          ),
+        ],
+      ),
+    );
+  }
+}

frontend/lib/widgets/scanner_status_card.dart

@@ -0,0 +1,144 @@
+import 'dart:async';
+
+import 'package:dio/dio.dart';
+import 'package:flutter/material.dart';
+import 'package:go_router/go_router.dart';
+
+import '../utils/backend_reachability.dart';
+import '../utils/polled_value.dart';
+import 'polled_stale_indicator.dart';
+
+typedef ScannerStatus = ({Color color, String label, List<String> sublabels});
+
+typedef ScannerStatusResolver<T> =
+    ScannerStatus Function(T value, double elapsedSeconds);
+
+/// Generic card that polls a scanner status endpoint and renders the result
+/// using the provided [resolver]. The two scanner cards (ARP, mDNS) are thin
+/// wrappers over this widget.
+class ScannerStatusCard<T> extends StatefulWidget {
+  const ScannerStatusCard({
+    super.key,
+    required this.title,
+    required this.fetch,
+    required this.resolver,
+  });
+
+  final String title;
+  final Future<T> Function({CancelToken? cancelToken}) fetch;
+  final ScannerStatusResolver<T> resolver;
+
+  @override
+  State<ScannerStatusCard<T>> createState() => _ScannerStatusCardState<T>();
+}
+
+class _ScannerStatusCardState<T> extends State<ScannerStatusCard<T>> {
+  late final PolledValue<T> _polled;
+  Timer? _tickTimer;
+
+  @override
+  void initState() {
+    super.initState();
+    _polled = PolledValue<T>(
+      fetch: widget.fetch,
+      pollInterval: const Duration(seconds: 5),
+      staleErrorAfter: const Duration(seconds: 30),
+    );
+    _tickTimer = Timer.periodic(const Duration(seconds: 1), (_) {
+      if (mounted) setState(() {});
+    });
+  }
+
+  @override
+  void dispose() {
+    _tickTimer?.cancel();
+    _polled.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return ListenableBuilder(
+      listenable: Listenable.merge([_polled, BackendReachability.instance]),
+      builder: (context, _) {
+        final freshness = effectiveFreshness(_polled);
+        if (freshness == PolledFreshness.initialLoading) {
+          return const Card(
+            child: Padding(
+              padding: EdgeInsets.all(16),
+              child: Center(child: CircularProgressIndicator()),
+            ),
+          );
+        }
+
+        final status = _resolveStatus(freshness);
+        final isStale = freshness == PolledFreshness.stale;
+        final theme = Theme.of(context);
+
+        return Card(
+          clipBehavior: Clip.antiAlias,
+          child: InkWell(
+            onTap: () => context.go('/status'),
+            child: Padding(
+              padding: const EdgeInsets.all(16),
+              child: Row(
+                children: [
+                  Icon(Icons.circle, color: status.color, size: 14),
+                  const SizedBox(width: 12),
+                  Expanded(
+                    child: Column(
+                      crossAxisAlignment: CrossAxisAlignment.start,
+                      children: [
+                        Row(
+                          children: [
+                            Text(
+                              widget.title,
+                              style: theme.textTheme.titleMedium,
+                            ),
+                            if (isStale) ...[
+                              const SizedBox(width: 6),
+                              PolledStaleIndicator(polled: _polled),
+                            ],
+                          ],
+                        ),
+                        const SizedBox(height: 2),
+                        Text(status.label, style: theme.textTheme.bodyMedium),
+                        for (final sublabel in status.sublabels) ...[
+                          const SizedBox(height: 2),
+                          Text(
+                            sublabel,
+                            style: theme.textTheme.bodySmall?.copyWith(
+                              color: theme.colorScheme.outline,
+                            ),
+                          ),
+                        ],
+                      ],
+                    ),
+                  ),
+                ],
+              ),
+            ),
+          ),
+        );
+      },
+    );
+  }
+
+  ScannerStatus _resolveStatus(PolledFreshness freshness) {
+    if (freshness == PolledFreshness.error) {
+      return (
+        color: Colors.red,
+        label: 'Error',
+        sublabels: [
+          _polled.lastErrorMessage ??
+              'Unable to reach the server. Check the logs for details.',
+        ],
+      );
+    }
+    final elapsed = DateTime.now()
+        .difference(_polled.lastSuccessAt!)
+        .inSeconds
+        .toDouble();
+    return widget.resolver(_polled.value as T, elapsed);
+  }
+}