feat: undo accidental update acknowledgements (Closes #649)

frontend/dashboard.css

@@ -10,6 +10,9 @@ header { position: sticky; top: 0; z-index: 20; padding: 12px 16px; display:flex
 .app-menu > summary { display:none; }
 .app-menu-panel { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
 button { background: linear-gradient(180deg,#1f3a5f,#15324d); border:1px solid #2a496e; color:#e5e7eb; padding:8px 12px; border-radius:10px; cursor:pointer; }
+.notification-undo { position:fixed; z-index:110; left:50%; bottom:calc(88px + env(safe-area-inset-bottom)); transform:translateX(-50%); box-sizing:border-box; width:min(520px,calc(100vw - 24px)); display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 12px; border:1px solid #60a5fa; border-radius:12px; background:#10233d; box-shadow:0 12px 36px rgba(0,0,0,.5); overflow-wrap:anywhere; }
+.notification-undo[hidden] { display:none; }
+.notification-undo button { min-height:44px; min-width:64px; flex:none; }
 .draft-capacity-sheet { position:fixed; inset:0; z-index:96; display:flex; align-items:flex-end; justify-content:center; background:rgba(5,12,21,.82); backdrop-filter:blur(4px); }
 .draft-capacity-sheet[hidden] { display:none; }
 .draft-capacity-panel { box-sizing:border-box; width:min(620px,100%); max-height:100dvh; overflow:auto; overflow-x:hidden; padding:18px; padding-bottom:calc(18px + env(safe-area-inset-bottom)); border:1px solid #b45309; border-radius:18px 18px 0 0; background:#0b1526; }

frontend/dashboard.js

@@ -786,6 +786,15 @@
       if (state.message) qs('#update-sheet-status').textContent = state.message;
     },
   });
+  const notificationUndo = createDashboardNotificationUndo({
+    restore: requestNotificationUnread,
+    getItems: () => lastMyWork,
+    setItems: items => { lastMyWork = items; },
+    getNotifications: () => lastNotifications,
+    setNotifications: items => { lastNotifications = items; },
+    refresh: refreshMyWorkView,
+    select: qs,
+  });
   const notificationReader = createNotificationReader({
     load: fetchNotificationDetail,
     loadConversation: fetchNotificationConversation,
@@ -5034,6 +5043,9 @@
       if (result?.accepted) qs('#my-work-action-status').textContent =
         result.delivery === 'posted' ? 'Reply posted and update marked read.' :
           'Reply and read acknowledgement queued for sync.';
+      if (result?.delivery === 'posted' && result?.next) {
+        notificationUndo.offer(item, result.next.items);
+      }
     } catch (error) {
       qs('#update-reply-status').textContent = error.message + ' Your draft is safe; retry.';
       qs('#update-reply').focus();
@@ -5046,7 +5058,8 @@
   qs('#mark-update-read-next').addEventListener('click', async () => {
     qs('#mark-update-read-next').disabled = true;
     try {
-      await notificationReader.markReadAndNext(lastMyWork);
+      const result = await notificationReader.markReadAndNext(lastMyWork);
+      if (result) notificationUndo.offer(result.item, result.items);
     } finally {
       qs('#mark-update-read-next').disabled = false;
     }
@@ -5056,11 +5069,17 @@
     button.disabled = true;
     try {
       const result = await notificationReader.acknowledgeAndNext(lastMyWork);
-      if (result) qs('#my-work-action-status').textContent = 'Update acknowledged with 👍.';
+      if (result) notificationUndo.offer(result.item, result.items);
     } finally {
       button.disabled = offlineWorkMode;
     }
   });
+  qs('#undo-notification').addEventListener('click', async () => {
+    const button = qs('#undo-notification');
+    button.disabled = true;
+    const restored = await notificationUndo.run();
+    button.disabled = restored;
+  });
   qs('#close-review-sheet').addEventListener('click', closeReviewSheet);
   qs('#retry-review-load').addEventListener('click', () => {
     if (selectedReview) openReviewSheet(selectedReview, reviewTrigger);

frontend/index.html

@@ -688,6 +688,11 @@
   </section>
 </div>
 
+<div class="notification-undo" id="notification-undo" role="status" aria-live="assertive" hidden>
+  <span id="notification-undo-status"></span>
+  <button id="undo-notification" type="button" aria-label="Undo marking update read">Undo</button>
+</div>
+
 <div class="pull-sheet" id="pull-sheet" role="dialog" aria-modal="true" aria-labelledby="pull-sheet-title">
   <section class="pull-sheet-panel">
     <div class="pull-sheet-header">
@@ -899,6 +904,7 @@
 <script src="static/offline-work.js"></script>
 <script src="static/offline-today.js"></script>
 <script src="static/my-work.js"></script>
+<script src="static/notification-undo.js"></script>
 <script src="static/card-planning.js"></script>
 <script src="static/today-work.js"></script>
 <script src="static/today-timer.js"></script>

frontend/my-work.js

@@ -362,7 +362,7 @@ function createNotificationReader({
       onClose();
       onStatus('Inbox cleared.');
     }
-    return { items: updated, next: next || null };
+    return { items: updated, item: current, next: next || null };
   }
 
   async function open(item, savedDetail = null) {

frontend/notification-undo.js

@@ -0,0 +1,85 @@
+function createNotificationUndo({ restore, onItems, onStatus, onOffer = () => {}, onClear = () => {} }) {
+  let offered = null;
+  let pending = false;
+
+  return {
+    offer(item, items) {
+      if (!item || !Number.isInteger(item.notification_id)) return false;
+      offered = { item, items: Array.isArray(items) ? [...items] : [] };
+      const label = item.key || 'Update';
+      onStatus(label + ' marked read. Undo?');
+      onOffer(item);
+      return true;
+    },
+    async run() {
+      if (!offered || pending) return false;
+      const current = offered;
+      const label = current.item.key || 'Update';
+      pending = true;
+      onStatus('Restoring ' + label + '…');
+      try {
+        await restore(current.item.notification_id);
+        if (offered !== current) return false;
+        const restored = [current.item].concat(current.items.filter(
+          item => item?.notification_id !== current.item.notification_id
+        ));
+        offered = null;
+        onItems(restored, current.item);
+        onStatus(label + ' is unread again.');
+        onClear();
+        return true;
+      } catch (_error) {
+        onStatus('Could not restore ' + label + '. Retry Undo.');
+        return false;
+      } finally {
+        pending = false;
+      }
+    },
+    clear() {
+      offered = null;
+      onClear();
+    },
+  };
+}
+
+async function requestNotificationUnread(notificationId) {
+  const response = await fetch('api/v1/notifications/' + encodeURIComponent(notificationId) + '/unread', {
+    method: 'PATCH', headers: { Accept: 'application/json' },
+  });
+  const payload = await response.json().catch(() => ({}));
+  if (!response.ok) throw new Error(payload.error || 'Restore unread failed.');
+  return payload;
+}
+
+function createDashboardNotificationUndo({ restore, getItems, setItems, getNotifications, setNotifications, refresh, select }) {
+  let timer = null;
+  const controller = createNotificationUndo({
+    restore,
+    onItems: (items, restored) => {
+      setItems(items);
+      const notifications = getNotifications();
+      if (!notifications.some(item => item.id === restored.notification_id)) {
+        setNotifications([{ id:restored.notification_id }].concat(notifications));
+      }
+      refresh();
+    },
+    onStatus: message => {
+      select('#notification-undo-status').textContent = message;
+      select('#my-work-action-status').textContent = message;
+    },
+    onOffer: item => {
+      clearTimeout(timer);
+      select('#notification-undo').hidden = false;
+      select('#undo-notification').disabled = false;
+      select('#undo-notification').setAttribute('aria-label', 'Undo marking ' + (item.key || 'update') + ' read');
+      timer = setTimeout(() => controller.clear(), 10000);
+    },
+    onClear: () => { select('#notification-undo').hidden = true; },
+  });
+  return controller;
+}
+
+if (typeof module !== 'undefined' && module.exports) {
+  module.exports = createNotificationUndo;
+  module.exports.createDashboardNotificationUndo = createDashboardNotificationUndo;
+}

frontend/service-worker.js

@@ -32,6 +32,7 @@ const SHELL = [
   BASE + 'static/offline-work.js',
   BASE + 'static/offline-today.js',
   BASE + 'static/my-work.js',
+  BASE + 'static/notification-undo.js',
   BASE + 'static/card-planning.js',
   BASE + 'static/today-work.js',
   BASE + 'static/today-timer.js',