Make notification mark-as-read reliably update the list

Three intertwined fixes so that marking a notification as read from the
trailing menu, swipe-dismiss, and 'Mark all as read' all consistently
update the UI and surface backend failures.

- Guard the mark-read, mark-new, and mark-all calls with try/catch; on
  failure show a snackbar with the mapped error and leave the list
  untouched.
- Use the State's own `mounted` and `context` after the await instead of
  the per-card BuildContext, so the SliverList rebuild reliably runs
  even when the originating NotificationCard's element has been swapped
  out by the reconciliation. _setRead and _markAllAsRead no longer take
  a BuildContext.
- Replace `Dismissible(key: UniqueKey())` with `ValueKey(item.id)` in
  the notification card. UniqueKey was regenerated on every build,
  forcing the Dismissible/PopupMenuButton subtree to be disposed on any
  parent rebuild; the open menu's `mounted` check would then drop
  `onSelected` silently.
- Add `ValueKey(device.macAddress)` to the device list rows for the
  same reason, anchoring each row's Element (and its PopupMenuButton
  State) to its device identity instead of its list position.

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

frontend/lib/devices/device_list.dart

@@ -286,11 +286,13 @@ class _DeviceListState extends State<DeviceList> with RouteAware {
               final device = _devices[index];
               return isWide
                   ? DeviceRowWide(
+                      key: ValueKey(device.macAddress),
                       device: device,
                       formatter: formatter,
                       onRefresh: () => _fetchPage(_currentPage),
                     )
                   : DeviceRowCompact(
+                      key: ValueKey(device.macAddress),
                       device: device,
                       formatter: formatter,
                       onRefresh: () => _fetchPage(_currentPage),

frontend/lib/home/notification_card.dart

@@ -7,7 +7,7 @@ import '../utils/friendly_date_formatter.dart';
 class NotificationCard extends StatelessWidget {
   final oott_model.Notification item;
   final FriendlyDateFormatter formatter;
-  final Future<bool> Function(BuildContext, bool read) onSetRead;
+  final Future<bool> Function(bool read) onSetRead;
 
   const NotificationCard({
     required this.item,
@@ -22,10 +22,9 @@ class NotificationCard extends StatelessWidget {
     return Card(
       color: item.isNew ? theme.colorScheme.secondaryContainer : null,
       child: Dismissible(
-        key: UniqueKey(),
+        key: ValueKey(item.id),
-        confirmDismiss: (direction) => direction == DismissDirection.startToEnd
+        confirmDismiss: (direction) =>
-            ? onSetRead(context, false)
+            onSetRead(direction != DismissDirection.startToEnd),
-            : onSetRead(context, true),
         background: Container(
           color: theme.colorScheme.tertiaryContainer,
           alignment: Alignment.centerLeft,
@@ -54,14 +53,14 @@ class NotificationCard extends StatelessWidget {
             icon: const Icon(Icons.more_vert),
             onSelected: (value) async {
               if (value == 'view_device') {
-                if (item.isNew) await onSetRead(context, true);
+                if (item.isNew) await onSetRead(true);
                 if (context.mounted) {
                   context.push('/devices/${item.macAddress}');
                 }
               } else if (value == 'mark_read') {
-                await onSetRead(context, true);
+                await onSetRead(true);
               } else if (value == 'mark_new') {
-                await onSetRead(context, false);
+                await onSetRead(false);
               }
             },
             itemBuilder: (context) => [
@@ -84,7 +83,7 @@ class NotificationCard extends StatelessWidget {
           ),
           onTap: item.macAddress != null
               ? () async {
-                  if (item.isNew) await onSetRead(context, true);
+                  if (item.isNew) await onSetRead(true);
                   if (context.mounted) {
                     context.push('/devices/${item.macAddress}');
                   }

frontend/lib/home/notifications_list.dart

@@ -112,32 +112,41 @@ class _NotificationsListState extends State<NotificationsList> with RouteAware {
     }
   }
 
-  Future<void> _markAllAsRead(BuildContext context) async {
+  Future<void> _markAllAsRead() async {
-    await BackendAPI.instance.markAllNotificationsAsRead();
+    try {
-    _fetchPage(_currentPage);
+      await BackendAPI.instance.markAllNotificationsAsRead();
-    if (context.mounted) {
+    } catch (e) {
-      UISnackbars.showSuccess(context, 'All notifications marked as read');
+      if (!mounted) return;
+      UISnackbars.showError(context, dioErrorToUserMessage(e));
+      return;
     }
+    if (!mounted) return;
+    _fetchPage(_currentPage);
+    UISnackbars.showSuccess(context, 'All notifications marked as read');
   }
 
-  Future<bool> _setRead(
+  Future<bool> _setRead(oott_model.Notification item, bool read) async {
-    BuildContext context,
-    oott_model.Notification item,
-    bool read,
-  ) async {
     if (item.isNew == !read) {
-      UISnackbars.showWarning(
+      if (mounted) {
-        context,
+        UISnackbars.showWarning(
-        'Notification was already marked as ${read ? 'read' : 'unread'}',
+          context,
-      );
+          'Notification was already marked as ${read ? 'read' : 'unread'}',
+        );
+      }
       return false;
     }
-    if (read) {
+    try {
-      await BackendAPI.instance.markNotificationAsRead(item.id);
+      if (read) {
-    } else {
+        await BackendAPI.instance.markNotificationAsRead(item.id);
-      await BackendAPI.instance.markNotificationAsNew(item.id);
+      } else {
+        await BackendAPI.instance.markNotificationAsNew(item.id);
+      }
+    } catch (e) {
+      if (!mounted) return false;
+      UISnackbars.showError(context, dioErrorToUserMessage(e));
+      return false;
     }
-    if (!context.mounted) return false;
+    if (!mounted) return false;
     UISnackbars.showSuccess(
       context,
       'Event marked as ${read ? 'read' : 'unread'}',
@@ -185,7 +194,7 @@ class _NotificationsListState extends State<NotificationsList> with RouteAware {
             const Spacer(),
             if (_filter == _NotificationFilter.newOnly && _items.isNotEmpty)
               IconButton(
-                onPressed: () => _markAllAsRead(context),
+                onPressed: _markAllAsRead,
                 icon: const Icon(Icons.done_all),
                 tooltip: 'Mark all as read',
               ),
@@ -266,7 +275,7 @@ class _NotificationsListState extends State<NotificationsList> with RouteAware {
         return NotificationCard(
           item: item,
           formatter: formatter,
-          onSetRead: (ctx, read) => _setRead(ctx, item, read),
+          onSetRead: (read) => _setRead(item, read),
         );
       },
     );