feat: preserve capture-first screenshots in Drafts (Closes #615)

frontend/background-issue-sync.js

@@ -55,6 +55,20 @@ function createIndexedDbTransaction(indexedDB, dbName = 'stackchain-background-o
   return transact;
 }
 
+function createUnfiledAttachmentStore(indexedDB = globalThis.indexedDB) {
+  const transact = createIndexedDbTransaction(indexedDB, 'stackchain-unfiled-captures-v1');
+  return {
+    put: (id, value) => transact(records => records.put({id, ...value})),
+    get: id => transact(async records => {
+      const value = await records.get(id);
+      if (!value) return null;
+      const {id: _id, ...attachment} = value;
+      return attachment;
+    }),
+    delete: id => transact(records => records.delete(id)),
+  };
+}
+
 function createIssueSyncStore({
   transaction, indexedDB = globalThis.indexedDB, now = () => Date.now(), claimMs = 30000,
   createToken = () => globalThis.crypto?.randomUUID?.() ||
@@ -798,4 +812,5 @@ if (typeof module !== 'undefined' && module.exports) module.exports = createBack
 if (typeof globalThis !== 'undefined') {
   globalThis.createBackgroundIssueSync = createBackgroundIssueSync;
   globalThis.createIssueSyncStore = createIssueSyncStore;
+  globalThis.createUnfiledAttachmentStore = createUnfiledAttachmentStore;
 }

frontend/dashboard.js

@@ -400,11 +400,14 @@
     loadMilestones: item => issueController.loadMilestones(item),
   });
   let issueCapture = null;
+  const unfiledAttachmentStore = 'indexedDB' in window ? createUnfiledAttachmentStore() : null;
   const unfiledCaptures = createUnfiledCaptures({
     storage: localStorage,
+    attachmentStore: unfiledAttachmentStore,
     getCaptureLogin: () => String(lastContextSnapshot?.user?.login || '').trim(),
     getCurrentLogin: () => activeFlushLogin,
   });
+  let resumedUnfiledCaptureId = '';
   let backgroundIssueSync = null;
   if ('indexedDB' in window) {
     const backgroundIssueStore = createIssueSyncStore();
@@ -1940,7 +1943,8 @@
   function listDrafts() {
     const unfiled = unfiledCaptures.list().map(item => ({
       id:'unfiled:' + item.id, capture_id:item.id, kind:'unfiled-issue', label:'Needs filing',
-      title:item.title, preview:item.body, copy_text:[item.title, item.body].filter(Boolean).join('\n\n'),
+      title:item.title, preview:item.body + (item.hasAttachment ? ' · Screenshot attached' : ''),
+      hasAttachment:item.hasAttachment, copy_text:[item.title, item.body].filter(Boolean).join('\n\n'),
       updated_at:item.savedAt, quarantined:item.quarantined,
       ownership:item.quarantined ? 'Saved by ' + item.ownerLogin +
         (activeFlushLogin ? ' — current account is ' + activeFlushLogin : ' — reconnect to confirm this account') : '',
@@ -2107,15 +2111,16 @@
       qs('#my-work-action-status').textContent = 'Waiting deliveries retried. Items needing attention were skipped.';
     });
     list.querySelectorAll('.draft-resume').forEach(button => {
-      button.addEventListener('click', () => {
+      button.addEventListener('click', async () => {
         const item = lastDrafts[Number(button.dataset.draftIndex)];
         if (!item) return;
         if (item.kind === 'unfiled-issue') {
           try {
-            const resumed = unfiledCaptures.resume(item.capture_id, activeFlushLogin);
+            const resumed = await unfiledCaptures.resume(item.capture_id, activeFlushLogin);
             issueCapture.saveDraft(resumed);
-            refreshMyWorkView();
-            openCreateIssueSheet();
+            resumedUnfiledCaptureId = item.capture_id;
+            await openCreateIssueSheet();
+            if (resumed.attachment) createIssueAttachmentController.restore(resumed.attachment);
             qs('#create-issue-status').textContent = 'Capture restored. Choose a repository to file it.';
           } catch (error) { qs('#my-work-action-status').textContent = error.message; }
         } else if (item.kind === 'new-issue') openCreateIssueSheet();
@@ -2191,10 +2196,10 @@
       });
     });
     list.querySelectorAll('.draft-discard').forEach(button => {
-      button.addEventListener('click', () => {
+      button.addEventListener('click', async () => {
         if (!window.confirm('Discard this unfinished draft?')) return;
         const item = lastDrafts[Number(button.dataset.draftIndex)];
-        if (item?.kind === 'unfiled-issue') unfiledCaptures.discard(item.capture_id);
+        if (item?.kind === 'unfiled-issue') await unfiledCaptures.discard(item.capture_id);
         else if (item?.kind === 'issue-outbox') issueOutbox.discard(item.outbox_id);
         else if (item?.kind === 'authored-outbox') authoredOutbox.discard(item.outbox_id);
         else if (item) draftInbox.discard(item.id);
@@ -4057,16 +4062,22 @@
     qs('#create-issue-capture-status').textContent = '';
     qs('#create-issue-repository-search').focus();
   });
-  qs('#save-unfiled-issue').addEventListener('click', () => {
-    const captureDraft = {
-      title: qs('#create-issue-title').value.trim(),
-      body: qs('#create-issue-body').value.trim(),
-    };
+  qs('#save-unfiled-issue').addEventListener('click', async () => {
     try {
-      unfiledCaptures.save(captureDraft);
+      const captureDraft = {
+        title: qs('#create-issue-title').value.trim(),
+        body: qs('#create-issue-body').value.trim(),
+        attachment: await createIssueAttachmentController.serialize(),
+      };
+      await unfiledCaptures.save(captureDraft);
+      if (resumedUnfiledCaptureId) {
+        await unfiledCaptures.completeResume(resumedUnfiledCaptureId);
+        resumedUnfiledCaptureId = '';
+      }
       issueCapture.clearDraft();
       qs('#create-issue-title').value = '';
       qs('#create-issue-body').value = '';
+      createIssueAttachmentController.clear();
       closeCreateIssueSheet(true, false);
       refreshMyWorkView();
       qs('#my-work-action-status').textContent = 'Saved in Drafts · choose a repository after reconnecting.';
@@ -4200,6 +4211,10 @@
       const admission = editingOutboxId ? await issueOutbox.updateDurably(editingOutboxId, durableDraft) :
         await issueOutbox.enqueueDurably(durableDraft);
       const queued = admission.item;
+      if (resumedUnfiledCaptureId && (!durableDraft.attachment || admission.background)) {
+        await unfiledCaptures.completeResume(resumedUnfiledCaptureId);
+        resumedUnfiledCaptureId = '';
+      }
       if (!admission.background) {
         editingOutboxId = queued.id;
         refreshMyWorkView();

frontend/index.html

@@ -536,18 +536,6 @@
         <button id="save-unfiled-issue" type="button">Save to Drafts</button>
         <button id="file-new-issue" type="button">File now</button>
       </div>
-      <section class="create-issue-filing" id="create-issue-filing" hidden>
-      <div class="create-issue-repository-picker">
-        <label for="create-issue-repository-search">Repository search
-          <input id="create-issue-repository-search" type="search" maxlength="80" placeholder="Search accessible repositories" autocomplete="off" />
-        </label>
-        <div id="create-issue-repository-results" role="listbox" aria-label="Repository search results" hidden></div>
-        <label for="create-issue-repository">Selected repository
-          <select id="create-issue-repository" required><option value="">Choose repository</option></select>
-        </label>
-      </div>
-      <button class="create-issue-repository-more" id="load-more-issue-repositories" type="button" hidden>Load more repositories</button>
-      <div id="create-issue-repository-status" class="small" aria-live="polite"></div>
       <section class="create-issue-attachment" aria-labelledby="create-issue-attachment-label">
         <strong id="create-issue-attachment-label">Screenshot <span class="small">Optional · PNG, JPEG, or WebP · 2 MB max</span></strong>
         <div class="issue-attachment-controls">
@@ -561,6 +549,18 @@
         </div>
         <div class="small" id="create-issue-attachment-status" aria-live="polite"></div>
       </section>
+      <section class="create-issue-filing" id="create-issue-filing" hidden>
+      <div class="create-issue-repository-picker">
+        <label for="create-issue-repository-search">Repository search
+          <input id="create-issue-repository-search" type="search" maxlength="80" placeholder="Search accessible repositories" autocomplete="off" />
+        </label>
+        <div id="create-issue-repository-results" role="listbox" aria-label="Repository search results" hidden></div>
+        <label for="create-issue-repository">Selected repository
+          <select id="create-issue-repository" required><option value="">Choose repository</option></select>
+        </label>
+      </div>
+      <button class="create-issue-repository-more" id="load-more-issue-repositories" type="button" hidden>Load more repositories</button>
+      <div id="create-issue-repository-status" class="small" aria-live="polite"></div>
       <label for="create-issue-milestone">Milestone <span class="small">Optional</span>
         <select id="create-issue-milestone" aria-describedby="create-issue-milestone-status">
           <option value="">No milestone</option>

frontend/unfiled-captures.js

@@ -1,5 +1,6 @@
 function createUnfiledCaptures({
   storage,
+  attachmentStore = null,
   getCaptureLogin = () => '',
   getCurrentLogin = () => '',
   createId = () => globalThis.crypto?.randomUUID?.() || String(Date.now()) + '-' + Math.random().toString(16).slice(2),
@@ -35,10 +36,39 @@ function createUnfiledCaptures({
     if (!title) throw new Error('Add a title before saving.');
     const ownerLogin = String(getCaptureLogin() || '').trim();
     if (!ownerLogin) throw new Error('Offline identity is unavailable. Reconnect once before saving private work.');
-    const item = {id:String(createId()), ownerLogin, title, body, savedAt:Number(now())};
-    const items = [item, ...read().filter(existing => existing.id !== item.id)].slice(0, maxItems);
-    write(items);
-    return item;
+    const attachment = note?.attachment;
+    const hasAttachment = Boolean(attachment?.blob && attachment?.filename &&
+      ['image/png', 'image/jpeg', 'image/webp'].includes(String(attachment?.contentType || '')));
+    if (attachment && !hasAttachment) throw new Error('The screenshot is unavailable. Choose it again before saving.');
+    if (hasAttachment && !attachmentStore) {
+      throw new Error('Screenshot storage is unavailable. Your capture is still open; retry after reloading.');
+    }
+    const item = {
+      id:String(createId()), ownerLogin, title, body, savedAt:Number(now()),
+      ...(hasAttachment ? {hasAttachment:true} : {}),
+    };
+    const existing = read().filter(candidate => candidate.id !== item.id);
+    const items = [item, ...existing].slice(0, maxItems);
+    const pruned = existing.filter(candidate => !items.some(retained => retained.id === candidate.id));
+    if (!hasAttachment) {
+      write(items);
+      pruned.filter(candidate => candidate.hasAttachment).forEach(candidate =>
+        Promise.resolve(attachmentStore?.delete(candidate.id)).catch(() => {}));
+      return item;
+    }
+    return Promise.resolve(attachmentStore.put(item.id, {
+      filename:String(attachment.filename).slice(0, 255),
+      contentType:String(attachment.contentType), blob:attachment.blob,
+    })).then(() => {
+      try { write(items); }
+      catch (error) {
+        Promise.resolve(attachmentStore.delete(item.id)).catch(() => {});
+        throw error;
+      }
+      pruned.filter(candidate => candidate.hasAttachment).forEach(candidate =>
+        Promise.resolve(attachmentStore.delete(candidate.id)).catch(() => {}));
+      return item;
+    });
   }
 
   function discard(id) {
@@ -46,7 +76,9 @@ function createUnfiledCaptures({
     const remaining = items.filter(item => item.id !== id);
     if (remaining.length === items.length) return false;
     write(remaining);
-    return true;
+    const removed = items.find(item => item.id === id);
+    if (!removed?.hasAttachment) return true;
+    return Promise.resolve(attachmentStore?.delete(id)).then(() => true);
   }
 
   function resume(id, confirmedLogin) {
@@ -55,11 +87,20 @@ function createUnfiledCaptures({
     if (!confirmedLogin || String(confirmedLogin).trim() !== item.ownerLogin) {
       throw new Error('Reconnect with the account that saved this capture.');
     }
-    discard(id);
-    return {repository:'', title:item.title, body:item.body, labelIds:[]};
+    const draft = {repository:'', title:item.title, body:item.body, labelIds:[]};
+    if (!item.hasAttachment) return draft;
+    if (!attachmentStore) throw new Error('The saved screenshot is unavailable. Retry after reloading.');
+    return Promise.resolve(attachmentStore.get(id)).then(attachment => {
+      if (!attachment?.blob || !attachment?.filename || !attachment?.contentType) {
+        throw new Error('The saved screenshot is unavailable. Keep this Draft and retry.');
+      }
+      return {...draft, attachment};
+    });
   }
 
-  return {list, save, discard, resume};
+  function completeResume(id) { return discard(id); }
+
+  return {list, save, discard, resume, completeResume};
 }
 
 if (typeof module !== 'undefined' && module.exports) module.exports = createUnfiledCaptures;