feat: acknowledge unread updates from My Work (#135)

frontend/index.html

@@ -60,10 +60,12 @@ textarea { resize: vertical; min-height: 120px; }
 .work-filter { min-height: 44px; }
 .work-filter[aria-pressed="true"] { border-color:var(--accent); background:#1d4f7a; }
 .my-work-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:10px; }
-.my-work-card { min-height: 44px; display:block; padding:12px; border:1px solid #1f3a5f; border-radius:12px; background:#0f1d33; color:var(--text); }
-.my-work-card.review-trigger { width:100%; text-align:left; font:inherit; }
+.my-work-card { min-height: 44px; display:grid; gap:8px; padding:12px; border:1px solid #1f3a5f; border-radius:12px; background:#0f1d33; color:var(--text); }
+.my-work-card-main { display:block; width:100%; color:var(--text); text-align:left; font:inherit; background:transparent; border:0; padding:0; }
+.my-work-card-main.review-trigger { width:100%; text-align:left; font:inherit; }
 .my-work-card:hover { border-color:var(--accent); }
 .my-work-card-title { display:block; margin:5px 0; font-weight:650; }
+.mark-update-read { min-height:44px; width:100%; }
 .my-work[data-stale="true"] { border-color:#fcd34d; }
 .review-sheet { position:fixed; inset:0; z-index:50; display:none; justify-content:flex-end; background:rgba(5,12,21,.72); backdrop-filter:blur(4px); }
 .review-sheet.open { display:flex; }
@@ -135,6 +137,7 @@ textarea { resize: vertical; min-height: 120px; }
       </div>
     </div>
     <div class="my-work-list" id="my-work-list"></div>
+    <div class="small" id="my-work-action-status" aria-live="assertive"></div>
   </section>
   <aside class="sidebar">
     <details class="panel stack" data-panel-key="context" open>
@@ -332,6 +335,25 @@ textarea { resize: vertical; min-height: 120px; }
     return res.json();
   }
 
+  async function markNotificationRead(notificationId) {
+    const response = await fetch('api/v1/notifications/' + encodeURIComponent(notificationId) + '/read', {
+      method: 'PATCH',
+      headers: { Accept: 'application/json' },
+    });
+    const payload = await response.json().catch(() => ({}));
+    if (!response.ok) throw new Error(payload.error || 'Mark read failed.');
+    return payload;
+  }
+
+  const notificationAcknowledger = createNotificationAcknowledger({
+    markRead: markNotificationRead,
+    onItems: items => {
+      lastMyWork = items;
+      refreshMyWorkView();
+    },
+    onStatus: message => { qs('#my-work-action-status').textContent = message; },
+  });
+
   function renderContextSnapshot(data) {
     liveMode = true;
     hasContextSnapshot = true;
@@ -376,6 +398,10 @@ textarea { resize: vertical; min-height: 120px; }
 
   function paintMyWork(data) {
     lastMyWork = buildMyWork(data);
+    refreshMyWorkView();
+  }
+
+  function refreshMyWorkView() {
     const counts = countMyWork(lastMyWork);
     Object.entries(counts).forEach(([filter, count]) => {
       const element = qs('[data-work-count="' + filter + '"]');
@@ -394,16 +420,32 @@ textarea { resize: vertical; min-height: 120px; }
       '<span class="small">' + escapeHtml(item.key) + ' · ' + escapeHtml(item.kind === 'pull' ? 'PR' : (item.kind === 'update' ? 'Update' : 'Issue')) + '</span>' +
       '<span class="my-work-card-title">' + escapeHtml(item.title) + '</span>' +
       '<span class="pill">' + escapeHtml(item.reason) + '</span>' +
+      (item.has_update ? ' <span class="pill">Unread update</span>' : '') +
       (item.updated_at ? '<span class="small"> · Updated ' + escapeHtml(fmt(item.updated_at)) + '</span>' : '');
+      const markRead = item.has_update && Number.isInteger(item.notification_id) ?
+        '<button class="mark-update-read" data-notification-id="' + item.notification_id + '">Mark read</button>' : '';
       if (item.is_review) {
         const index = lastMyWork.findIndex(candidate => candidate.key === item.key && candidate.kind === item.kind);
-        return '<button class="my-work-card review-trigger" data-review-index="' + index + '">' + contents + '</button>';
+        return '<article class="my-work-card"><button class="my-work-card-main review-trigger" data-review-index="' + index + '">' + contents + '</button>' + markRead + '</article>';
       }
-      return '<a class="my-work-card" href="' + escAttr(item.url) + '" target="_blank" rel="noopener noreferrer">' + contents + '</a>';
+      return '<article class="my-work-card"><a class="my-work-card-main" href="' + escAttr(item.url) + '" target="_blank" rel="noopener noreferrer">' + contents + '</a>' + markRead + '</article>';
     }).join('') : '<div class="muted">No ' + (selectedWorkFilter === 'review' ? 'reviews' : (selectedWorkFilter === 'update' ? 'unread updates' : (selectedWorkFilter === 'all' ? 'work' : selectedWorkFilter + ' items'))) + '.</div>';
     document.querySelectorAll('[data-review-index]').forEach(button => {
       button.addEventListener('click', () => openReviewSheet(lastMyWork[Number(button.dataset.reviewIndex)], button));
     });
+    document.querySelectorAll('[data-notification-id]').forEach(button => {
+      button.addEventListener('click', async () => {
+        const notificationId = Number(button.dataset.notificationId);
+        button.disabled = true;
+        const acknowledged = await notificationAcknowledger.acknowledge(lastMyWork, notificationId);
+        if (acknowledged) {
+          lastNotifications = lastNotifications.filter(item => item.id !== notificationId);
+          (document.querySelector('[data-notification-id]') || qs('[data-work-filter="update"]'))?.focus();
+        } else {
+          document.querySelector('[data-notification-id="' + notificationId + '"]')?.focus();
+        }
+      });
+    });
   }
 
   function reviewFileElement(filename) {

frontend/my-work.js

@@ -30,6 +30,7 @@ function buildMyWork(data) {
     const existing = byKey.get(subjectKind + ':' + key);
     if (existing) {
       existing.has_update = true;
+      existing.notification_id = update.id;
       existing.url = update.url || existing.url;
       existing.updated_at = update.updated_at || existing.updated_at;
       existing._priority = Math.min(existing._priority, 1);
@@ -43,6 +44,7 @@ function buildMyWork(data) {
       is_review: false,
       is_assigned: false,
       has_update: true,
+      notification_id: update.id,
       reason: 'Unread update',
       _priority: 1,
     };
@@ -57,6 +59,38 @@ function buildMyWork(data) {
   ).map(({ _priority, ...item }) => item);
 }
 
+function acknowledgeNotification(items, notificationId) {
+  return items.flatMap((item) => {
+    if (item.notification_id !== notificationId) return [item];
+    if (item.kind === 'update') return [];
+    const { notification_id, ...acknowledged } = item;
+    return [{ ...acknowledged, has_update: false }];
+  });
+}
+
+function createNotificationAcknowledger({ markRead, onItems, onStatus }) {
+  const pending = new Set();
+  return {
+    async acknowledge(items, notificationId) {
+      if (pending.has(notificationId)) return false;
+      pending.add(notificationId);
+      onItems(acknowledgeNotification(items, notificationId));
+      onStatus('Marking update read…');
+      try {
+        await markRead(notificationId);
+        onStatus('Update marked read.');
+        return true;
+      } catch (_error) {
+        onItems(items);
+        onStatus('Could not mark update read. Retry.');
+        return false;
+      } finally {
+        pending.delete(notificationId);
+      }
+    },
+  };
+}
+
 function filterMyWork(items, selectedFilter) {
   if (selectedFilter === 'all') return items;
   if (selectedFilter === 'review') return items.filter((item) => item.is_review);
@@ -88,5 +122,7 @@ if (typeof module !== 'undefined' && module.exports) {
   buildMyWork.filterMyWork = filterMyWork;
   buildMyWork.summarizeMyWork = summarizeMyWork;
   buildMyWork.countMyWork = countMyWork;
+  buildMyWork.acknowledgeNotification = acknowledgeNotification;
+  buildMyWork.createNotificationAcknowledger = createNotificationAcknowledger;
   module.exports = buildMyWork;
 }