feat: recover mobile drafts from My Work (#211)

frontend/index.html

@@ -65,6 +65,10 @@ textarea { resize: vertical; min-height: 120px; }
 .milestone-lane { display:flex; align-items:center; gap:8px; min-width:min(100%,260px); }
 .work-milestone-filter { min-width:180px; flex:1; padding:8px; border-radius:8px; border:1px solid #1f3a5f; background:#0b1526; color:var(--text); }
 .my-work-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:10px; }
+.draft-card { display:flex; flex-direction:column; gap:8px; min-width:0; }
+.draft-preview { color:var(--muted); overflow-wrap:anywhere; }
+.draft-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
+.draft-actions button { min-height:44px; width:100%; }
 .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; }
@@ -276,6 +280,7 @@ textarea { resize: vertical; min-height: 120px; }
         <button class="work-filter" data-work-filter="pull" aria-pressed="false">PRs <span data-work-count="pull">0</span></button>
         <button class="work-filter" data-work-filter="review" aria-pressed="false">Reviews <span data-work-count="review">0</span></button>
         <button class="work-filter" data-work-filter="update" aria-pressed="false">Updates <span data-work-count="update">0</span></button>
+        <button class="work-filter" data-work-filter="draft" aria-pressed="false">Drafts <span data-work-count="draft">0</span></button>
       </div>
       <label class="milestone-lane" for="work-milestone-filter"><span class="small">Release lane</span>
         <select class="work-milestone-filter" id="work-milestone-filter">
@@ -660,6 +665,7 @@ textarea { resize: vertical; min-height: 120px; }
 <script src="static/commands.js"></script>
 <script src="static/search-preview.js"></script>
 <script src="static/widgets.js"></script>
+<script src="static/drafts.js"></script>
 <script src="static/my-work.js"></script>
 <script src="static/pick-work.js"></script>
 <script src="static/conversation.js"></script>
@@ -701,13 +707,14 @@ textarea { resize: vertical; min-height: 120px; }
   let selectedWorkMilestone = 'all';
   try {
     const savedFilter = sessionStorage.getItem(WORK_FILTER_KEY);
-    if (['all', 'issue', 'pull', 'review', 'update'].includes(savedFilter)) selectedWorkFilter = savedFilter;
+    if (['all', 'issue', 'pull', 'review', 'update', 'draft'].includes(savedFilter)) selectedWorkFilter = savedFilter;
     const savedMilestone = sessionStorage.getItem(WORK_MILESTONE_KEY);
     if (savedMilestone) selectedWorkMilestone = savedMilestone;
   } catch (e) {
     console.warn('Could not restore My Work filter', e);
   }
   let lastMyWork = [];
+  let lastDrafts = [];
   let lastNotifications = [];
   let lastContextSnapshot = null;
   let notificationPagination = { page: 1, total: 0, has_more: false };
@@ -759,6 +766,7 @@ textarea { resize: vertical; min-height: 120px; }
   const issueController = createIssueSheet({ fetchJson: fetchReviewJson, storage: localStorage });
   const issueCapture = createIssueCapture({ fetchJson: fetchReviewJson, storage: localStorage });
   const pullController = createPullSheet({ fetchJson: fetchReviewJson, storage: localStorage });
+  const draftInbox = createDraftInbox({ storage: localStorage });
   const findWorkController = createFindWork({
     fetchJson: fetchReviewJson,
     onItems: renderAvailableIssues,
@@ -1115,7 +1123,9 @@ textarea { resize: vertical; min-height: 120px; }
   }
 
   function refreshMyWorkView() {
+    lastDrafts = draftInbox.list();
     const counts = countMyWork(lastMyWork);
+    counts.draft = lastDrafts.length;
     Object.entries(counts).forEach(([filter, count]) => {
       const element = qs('[data-work-count="' + filter + '"]');
       if (element) element.textContent = count;
@@ -1150,6 +1160,38 @@ textarea { resize: vertical; min-height: 120px; }
     return [];
   }
 
+  function renderDrafts() {
+    const list = qs('#my-work-list');
+    list.innerHTML = lastDrafts.length ? lastDrafts.map((item, index) =>
+      '<article class="my-work-card draft-card">' +
+      '<span class="small">' + escapeHtml(item.label) + (item.repository ? ' · ' + escapeHtml(item.repository) : '') + '</span>' +
+      '<span class="my-work-card-title">' + escapeHtml(item.title) + '</span>' +
+      '<span class="draft-preview">' + escapeHtml(item.preview || 'Unfinished draft') + '</span>' +
+      '<span class="small">Saved ' + escapeHtml(fmt(item.updated_at)) + '</span>' +
+      '<div class="draft-actions"><button class="draft-resume" data-draft-index="' + index + '" type="button">Resume draft</button>' +
+      '<button class="draft-discard" data-draft-id="' + escAttr(item.id) + '" type="button">Discard draft</button></div></article>'
+    ).join('') : '<div class="muted">No unfinished drafts.</div>';
+    list.querySelectorAll('.draft-resume').forEach(button => {
+      button.addEventListener('click', () => {
+        const item = lastDrafts[Number(button.dataset.draftIndex)];
+        if (!item) return;
+        if (item.kind === 'new-issue') openCreateIssueSheet();
+        else if (item.route) workRoute.open(item.route);
+      });
+    });
+    list.querySelectorAll('.draft-discard').forEach(button => {
+      button.addEventListener('click', () => {
+        if (!window.confirm('Discard this unfinished draft?')) return;
+        draftInbox.discard(button.dataset.draftId);
+        lastDrafts = draftInbox.list();
+        const count = qs('[data-work-count="draft"]');
+        if (count) count.textContent = lastDrafts.length;
+        renderDrafts();
+        qs('#my-work-action-status').textContent = 'Draft discarded.';
+      });
+    });
+  }
+
   function updateWorkPaginationControls() {
     const labels = { issue: 'issues', pull: 'pull requests', review: 'review requests' };
     const streams = activeWorkStreams();
@@ -1166,6 +1208,15 @@ textarea { resize: vertical; min-height: 120px; }
   }
 
   function renderMyWork() {
+    lastDrafts = draftInbox.list();
+    const draftCount = qs('[data-work-count="draft"]');
+    if (draftCount) draftCount.textContent = lastDrafts.length;
+    if (selectedWorkFilter === 'draft') {
+      renderDrafts();
+      qs('#bulk-mark-read-bar').hidden = true;
+      qs('#load-more-notifications').hidden = true;
+      return;
+    }
     const visible = filterMyWork(lastMyWork, selectedWorkFilter, selectedWorkMilestone);
     const incomplete = activeWorkStreams().some(stream => workPagination[stream]?.has_more);
     qs('#my-work-list').innerHTML = visible.length ? visible.map(item => {
@@ -1663,13 +1714,14 @@ textarea { resize: vertical; min-height: 120px; }
 
   function openCreateIssueSheet() {
     const captureDraft = issueCapture.loadDraft();
-    const repositories = lastContextSnapshot?.repos || [];
-    qs('#create-issue-repository').innerHTML = repositories.map(repository =>
-      '<option value="' + escAttr(repository.full_name) + '">' + escapeHtml(repository.full_name) + '</option>'
-    ).join('');
-    if (repositories.some(repository => repository.full_name === captureDraft.repository)) {
-      qs('#create-issue-repository').value = captureDraft.repository;
+    const repositories = (lastContextSnapshot?.repos || []).map(repository => repository.full_name).filter(Boolean);
+    if (captureDraft.repository && !repositories.includes(captureDraft.repository)) {
+      repositories.unshift(captureDraft.repository);
     }
+    qs('#create-issue-repository').innerHTML = repositories.map(repository =>
+      '<option value="' + escAttr(repository) + '">' + escapeHtml(repository) + '</option>'
+    ).join('');
+    if (captureDraft.repository) qs('#create-issue-repository').value = captureDraft.repository;
     qs('#create-issue-title').value = captureDraft.title;
     qs('#create-issue-body').value = captureDraft.body;
     loadIssueLabels(qs('#create-issue-repository').value, captureDraft.labelIds);