feat: defer from mobile detail sheets (#256)

frontend/detail-defer.js

@@ -0,0 +1,25 @@
+function createDetailDefer({
+  laterWork,
+  session,
+  close,
+  refresh,
+  focus,
+  announce,
+  formatTime = value => new Date(value).toLocaleString(),
+}) {
+  return {
+    defer(item, preset) {
+      if (!item) return false;
+      const until = laterWork.presetUntil(preset);
+      if (!laterWork.defer(item, until)) return false;
+      const inSession = session.active();
+      if (!inSession) close();
+      refresh();
+      announce('Deferred until ' + formatTime(until) + '. It stays unread and unchanged in Gitea.');
+      if (!inSession) focus();
+      return true;
+    },
+  };
+}
+
+if (typeof module !== 'undefined' && module.exports) module.exports = createDetailDefer;

frontend/index.html

@@ -84,6 +84,11 @@ textarea { resize: vertical; min-height: 120px; }
 .my-work-card-title { display:block; margin:5px 0; font-weight:650; }
 .later-actions { display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:8px; }
 .later-actions button { min-height:44px; width:100%; }
+.detail-defer { grid-column:1/-1; max-width:100%; }
+.detail-defer summary, .detail-defer button { min-height:44px; display:flex; align-items:center; justify-content:center; }
+.detail-defer summary { cursor:pointer; border:1px solid #60a5fa; border-radius:10px; font-weight:700; }
+.detail-defer-options { display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:8px; margin-top:8px; }
+.review-sheet-actions { position:sticky; bottom:0; z-index:3; padding:10px 4px; padding-bottom:calc(10px + env(safe-area-inset-bottom)); background:rgba(11,21,38,.98); border-top:1px solid #2a496e; }
 .mark-update-read { min-height:44px; width:100%; }
 .read-update { min-height:44px; width:100%; display:flex; align-items:center; justify-content:center; }
 .load-more-notifications { min-height:44px; width:100%; margin-top:10px; }
@@ -514,6 +519,7 @@ textarea { resize: vertical; min-height: 120px; }
       <button id="release-issue" type="button">Release assignment</button>
       <button id="close-issue" type="button">Close issue</button>
       <a id="open-issue-gitea" href="#" target="_blank" rel="noopener noreferrer">Open in Gitea</a>
+      <details class="detail-defer"><summary>Defer</summary><div class="detail-defer-options"><button type="button" data-detail-defer-preset="today">Later today</button><button type="button" data-detail-defer-preset="tomorrow">Tomorrow</button><button type="button" data-detail-defer-cancel>Cancel</button></div></details>
     </div>
     <nav class="work-session-nav" aria-label="Work session" hidden>
       <span class="small" aria-live="polite" data-work-session-progress></span>
@@ -617,6 +623,7 @@ textarea { resize: vertical; min-height: 120px; }
       <button class="share-work-route" type="button">Share</button>
       <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>
+      <details class="detail-defer"><summary>Defer</summary><div class="detail-defer-options"><button type="button" data-detail-defer-preset="today">Later today</button><button type="button" data-detail-defer-preset="tomorrow">Tomorrow</button><button type="button" data-detail-defer-cancel>Cancel</button></div></details>
     </div>
     <nav class="work-session-nav" aria-label="Work session" hidden>
       <span class="small" aria-live="polite" data-work-session-progress></span>
@@ -656,6 +663,7 @@ textarea { resize: vertical; min-height: 120px; }
     <div class="pull-sheet-actions">
       <button class="share-work-route" type="button">Share</button>
       <a id="open-pull-gitea" href="#" target="_blank" rel="noopener noreferrer">Open in Gitea</a>
+      <details class="detail-defer"><summary>Defer</summary><div class="detail-defer-options"><button type="button" data-detail-defer-preset="today">Later today</button><button type="button" data-detail-defer-preset="tomorrow">Tomorrow</button><button type="button" data-detail-defer-cancel>Cancel</button></div></details>
     </div>
     <nav class="work-session-nav" aria-label="Work session" hidden>
       <span class="small" aria-live="polite" data-work-session-progress></span>
@@ -720,6 +728,7 @@ textarea { resize: vertical; min-height: 120px; }
     </section>
     <h2>Review history</h2>
     <div id="review-history" class="muted"></div>
+    <div class="review-sheet-actions"><details class="detail-defer"><summary>Defer</summary><div class="detail-defer-options"><button type="button" data-detail-defer-preset="today">Later today</button><button type="button" data-detail-defer-preset="tomorrow">Tomorrow</button><button type="button" data-detail-defer-cancel>Cancel</button></div></details></div>
     <nav class="work-session-nav" aria-label="Work session" hidden>
       <span class="small" aria-live="polite" data-work-session-progress></span>
       <button type="button" data-work-session-previous>Previous</button>
@@ -750,6 +759,7 @@ textarea { resize: vertical; min-height: 120px; }
 <script src="static/offline-work.js"></script>
 <script src="static/my-work.js"></script>
 <script src="static/later-work.js"></script>
+<script src="static/detail-defer.js"></script>
 <script src="static/pick-work.js"></script>
 <script src="static/conversation.js"></script>
 <script src="static/issue-sheet.js"></script>
@@ -1255,6 +1265,30 @@ textarea { resize: vertical; min-height: 120px; }
     },
   });
 
+  const detailDefer = createDetailDefer({
+    laterWork,
+    session: workSession,
+    close: () => workRoute.close(),
+    refresh: refreshMyWorkView,
+    focus: () => qs('[data-work-filter="' + selectedWorkFilter + '"]')?.focus(),
+    announce: message => { qs('#my-work-action-status').textContent = message; },
+    formatTime: fmt,
+  });
+  document.querySelectorAll('[data-detail-defer-preset]').forEach(button => {
+    button.addEventListener('click', () => {
+      const item = selectedUpdate || selectedReview || selectedIssue || selectedPull;
+      button.closest('.detail-defer').open = false;
+      detailDefer.defer(item, button.dataset.detailDeferPreset);
+    });
+  });
+  document.querySelectorAll('[data-detail-defer-cancel]').forEach(button => {
+    button.addEventListener('click', () => {
+      const chooser = button.closest('.detail-defer');
+      chooser.open = false;
+      chooser.querySelector('summary')?.focus();
+    });
+  });
+
   function renderContextSnapshot(data) {
     liveMode = true;
     hasContextSnapshot = true;

frontend/service-worker.js

@@ -1,6 +1,6 @@
 const BASE = new URL('./', self.location.href).pathname;
 importScripts(BASE + 'static/background-issue-sync.js');
-const CACHE = 'stackchain-dashboard-shell-v14';
+const CACHE = 'stackchain-dashboard-shell-v15';
 const OUTAGE_STATUSES = new Set([500, 502, 503, 504]);
 const SHELL = [
   BASE,
@@ -18,6 +18,7 @@ const SHELL = [
   BASE + 'static/offline-work.js',
   BASE + 'static/my-work.js',
   BASE + 'static/later-work.js',
+  BASE + 'static/detail-defer.js',
   BASE + 'static/pick-work.js',
   BASE + 'static/conversation.js',
   BASE + 'static/issue-sheet.js',