feat: reply to unread updates in My Work (#153)

frontend/index.html

@@ -107,7 +107,11 @@ textarea { resize: vertical; min-height: 120px; }
 .update-sheet.open { display:flex; }
 .update-sheet-panel { width:min(560px,100%); height:100%; overflow:auto; padding:18px; background:#0b1526; border-left:1px solid #2a496e; }
 .update-sheet-header { display:flex; align-items:center; justify-content:space-between; gap:10px; }
+.update-sheet-header button { min-height:44px; }
 .update-sheet-content { overflow-wrap:anywhere; white-space:pre-wrap; }
+.update-reply { display:grid; gap:8px; margin-top:16px; }
+.update-reply textarea { width:100%; min-height:112px; resize:vertical; }
+.update-reply button { min-height:44px; width:100%; }
 .update-sheet-actions { position:sticky; bottom:0; z-index:3; display:grid; gap:8px; margin-top:14px; padding:10px 4px; padding-bottom:calc(10px + env(safe-area-inset-bottom)); background:rgba(11,21,38,.98); border-top:1px solid #2a496e; }
 .update-sheet-actions button, .update-sheet-actions a { min-height:44px; display:flex; align-items:center; justify-content:center; }
 .update-sheet-actions a { border:1px solid #60a5fa; border-radius:10px; font-weight:700; }
@@ -268,6 +272,13 @@ textarea { resize: vertical; min-height: 120px; }
       <summary><h2>Subject context</h2></summary>
       <p class="update-sheet-content muted" id="update-subject-body"></p>
     </details>
+    <section class="update-reply" aria-labelledby="update-reply-title">
+      <h2 id="update-reply-title">Reply</h2>
+      <label for="update-reply" class="small">Continue this issue or pull-request conversation</label>
+      <textarea id="update-reply" maxlength="10000" placeholder="Write a reply"></textarea>
+      <button id="send-update-reply" type="button">Send reply</button>
+      <div id="update-reply-status" class="small" aria-live="assertive"></div>
+    </section>
     <div class="update-sheet-actions">
       <button id="mark-update-read-next" type="button">Mark read &amp; next</button>
       <a id="open-update-gitea" href="#" target="_blank" rel="noopener noreferrer">Open in Gitea</a>
@@ -433,6 +444,17 @@ textarea { resize: vertical; min-height: 120px; }
     return payload;
   }
 
+  async function postNotificationReply(notificationId, body) {
+    const response = await fetch('api/v1/notifications/' + encodeURIComponent(notificationId) + '/reply', {
+      method: 'POST',
+      headers: { Accept: 'application/json', 'Content-Type': 'application/json' },
+      body: JSON.stringify({ body }),
+    });
+    const payload = await response.json().catch(() => ({}));
+    if (!response.ok) throw new Error(payload.error || 'Posting the reply failed.');
+    return payload;
+  }
+
   const notificationAcknowledger = createNotificationAcknowledger({
     markRead: markNotificationRead,
     onItems: items => {
@@ -468,6 +490,11 @@ textarea { resize: vertical; min-height: 120px; }
     },
     onStatus: message => { qs('#my-work-action-status').textContent = message; },
   });
+  const notificationReplier = createNotificationReplier({
+    post: postNotificationReply,
+    storage: localStorage,
+    onStatus: message => { qs('#update-reply-status').textContent = message; },
+  });
   const notificationReader = createNotificationReader({
     load: fetchNotificationDetail,
     markRead: markNotificationRead,
@@ -482,6 +509,9 @@ textarea { resize: vertical; min-height: 120px; }
       qs('#update-subject-type').textContent = item.subject_type || 'Update';
       qs('#update-subject-state').textContent = item.state || '';
       qs('#open-update-gitea').href = item.url || '#';
+      qs('#update-reply').value = notificationReplier.loadDraft(item);
+      qs('#update-reply-status').textContent = '';
+      qs('#send-update-reply').disabled = false;
       qs('#retry-update-load').hidden = true;
       qs('#keep-update-unread').focus();
     },
@@ -910,6 +940,27 @@ textarea { resize: vertical; min-height: 120px; }
   qs('#retry-update-load').addEventListener('click', () => {
     if (selectedUpdate) notificationReader.open(selectedUpdate, lastMyWork);
   });
+  qs('#update-reply').addEventListener('input', event => {
+    if (selectedUpdate) notificationReplier.saveDraft(selectedUpdate, event.target.value);
+  });
+  qs('#send-update-reply').addEventListener('click', async () => {
+    if (!selectedUpdate) return;
+    const body = qs('#update-reply').value.trim();
+    if (!body) {
+      qs('#update-reply-status').textContent = 'Write a reply before sending.';
+      qs('#update-reply').focus();
+      return;
+    }
+    qs('#send-update-reply').disabled = true;
+    const result = await notificationReplier.submit(selectedUpdate, body);
+    qs('#send-update-reply').disabled = false;
+    if (result) {
+      qs('#update-reply').value = '';
+      qs('#mark-update-read-next').focus();
+    } else {
+      qs('#update-reply').focus();
+    }
+  });
   qs('#mark-update-read-next').addEventListener('click', async () => {
     qs('#mark-update-read-next').disabled = true;
     try {

frontend/my-work.js

@@ -226,6 +226,39 @@ function createNotificationReader({ load, markRead, onOpen, onDetail, onItems, o
   };
 }
 
+function createNotificationReplier({ post, storage, onStatus }) {
+  let pending = false;
+  const keyFor = item => 'stackchain.update-reply.v1.' + item.notification_id;
+  return {
+    loadDraft(item) {
+      try { return storage.getItem(keyFor(item)) || ''; }
+      catch (_error) { return ''; }
+    },
+    saveDraft(item, body) {
+      try { storage.setItem(keyFor(item), body); }
+      catch (_error) { /* Keep the editable textarea as the fallback. */ }
+    },
+    async submit(item, body) {
+      if (pending) return false;
+      pending = true;
+      this.saveDraft(item, body);
+      onStatus('Sending reply…');
+      try {
+        const result = await post(item.notification_id, body);
+        try { storage.removeItem(keyFor(item)); }
+        catch (_error) { /* The posted reply is still authoritative. */ }
+        onStatus('Reply posted. You can mark this update read when ready.');
+        return result;
+      } catch (_error) {
+        onStatus('Could not send reply. Your draft is safe; retry.');
+        return false;
+      } finally {
+        pending = false;
+      }
+    },
+  };
+}
+
 function filterMyWork(items, selectedFilter) {
   if (selectedFilter === 'all') return items;
   if (selectedFilter === 'review') return items.filter((item) => item.is_review);
@@ -263,5 +296,6 @@ if (typeof module !== 'undefined' && module.exports) {
   buildMyWork.createBulkNotificationAcknowledger = createBulkNotificationAcknowledger;
   buildMyWork.createNotificationPager = createNotificationPager;
   buildMyWork.createNotificationReader = createNotificationReader;
+  buildMyWork.createNotificationReplier = createNotificationReplier;
   module.exports = buildMyWork;
 }