feat: preserve Search photo reply drafts (Closes #957)

frontend/dashboard.js

@@ -495,6 +495,45 @@
     qs('#my-work-action-status').textContent = 'Overdue sweep cancelled. No remaining deadline was changed.';
   });
   let searchReplyAttachmentTarget = null;
+  let searchReplyRestoreGeneration = 0;
+  let restoringSearchReplyPhotos = false;
+  const searchReplyDraftStore = 'indexedDB' in window ? createSearchReplyDraftStore({
+    indexedDB:window.indexedDB,
+    getOwnerLogin:() => confirmedOwnerLogin,
+  }) : null;
+  const sameSearchReplyTarget = (left, right) => left && right && left.kind === right.kind &&
+    left.repository === right.repository && Number(left.number) === Number(right.number);
+  async function persistSearchReplyPhotos() {
+    const target = searchReplyAttachmentTarget ? { ...searchReplyAttachmentTarget } : null;
+    if (!target || !searchReplyDraftStore || !searchReplyAttachmentController || restoringSearchReplyPhotos) return;
+    try {
+      const attachments = await searchReplyAttachmentController.serialize();
+      await searchReplyDraftStore.save(target, attachments);
+    } catch (error) {
+      qs('#search-preview-reply-status').textContent = error?.message ||
+        'Photos could not be saved. They remain in this preview; retry before leaving.';
+      throw error;
+    }
+  }
+  async function restoreSearchReplyPhotos(target) {
+    if (!searchReplyDraftStore || !target) return;
+    const generation = ++searchReplyRestoreGeneration;
+    try {
+      const attachments = await searchReplyDraftStore.load(target);
+      if (generation !== searchReplyRestoreGeneration || !sameSearchReplyTarget(target, searchReplyAttachmentTarget)) return;
+      if (attachments?.length) {
+        restoringSearchReplyPhotos = true;
+        try { searchReplyAttachmentController.restore(attachments); }
+        finally { restoringSearchReplyPhotos = false; }
+        updateSearchReplyButtons(searchReplyAttachmentController.state());
+        qs('#search-preview-reply-status').textContent = 'Saved photo evidence restored.';
+      }
+    } catch (error) {
+      if (generation === searchReplyRestoreGeneration) {
+        qs('#search-preview-reply-status').textContent = error?.message || 'Saved photo evidence could not be restored.';
+      }
+    }
+  }
   const updateSearchReplyButtons = state => {
     const enabled = Boolean(state) || Boolean(qs('#search-preview-reply').value.trim());
     qs('#send-search-preview-reply').disabled = !enabled;
@@ -516,7 +555,11 @@
     status: qs('#search-preview-reply-status'),
     readyMessage: 'Photo ready to send with this Search reply.',
     removedMessage: 'Photo removed. Your Search reply is unchanged.',
-    onChange: updateSearchReplyButtons,
+    onChange: state => {
+      updateSearchReplyButtons(state);
+      persistSearchReplyPhotos().catch(() => {});
+    },
+    onCheckpoint:() => persistSearchReplyPhotos(),
     editor: {
       document,
       edit: qs('#edit-search-reply-attachment'),
@@ -5020,6 +5063,8 @@
     renderSearchPreviewReply(state, null, searchPreview, document);
 
     if (state.status === 'loading') {
+      searchReplyAttachmentTarget = { ...state.item };
+      restoreSearchReplyPhotos(searchReplyAttachmentTarget);
       searchVoiceReply.open(searchConversationVoiceTarget(state.item));
       searchPreviewDetail = null;
       qs('#search-preview-key').textContent = state.item.repository + ' #' + state.item.number;
@@ -5093,6 +5138,10 @@
       searchReplyAttachmentTarget = item;
       return searchReplyAttachmentController.prepareComment(item, body);
     },
+    afterReply:item => {
+      if (!searchReplyDraftStore) return null;
+      return searchReplyDraftStore.remove(item);
+    },
     hasAttachments:() => Boolean(searchReplyAttachmentController.state()),
     clearAttachments:() => {
       searchReplyAttachmentTarget = null;

frontend/index.html

@@ -1440,6 +1440,7 @@
 <script src="static/commands.js"></script>
 <script src="static/saved-searches.js"></script>
 <script src="static/search-preview.js"></script>
+<script src="static/search-reply-draft-store.js"></script>
 <script src="static/search-defer.js"></script>
 <script src="static/widgets.js"></script>
 <script src="static/drafts.js"></script>

frontend/issue-attachment.js

@@ -41,6 +41,7 @@
     const maxFiles = options.maxFiles === MAX_FILES ? MAX_FILES : 1;
     const inspectPixels = options.inspectPixels === true;
     const optimizeSelectedImage = options.optimizeImage || optimizeImage;
+    const onCheckpoint = options.onCheckpoint;
     const createOperationId = options.createOperationId || (() => {
       if (typeof globalThis !== 'undefined' && globalThis.crypto?.randomUUID) {
         return globalThis.crypto.randomUUID();
@@ -49,6 +50,13 @@
     });
     let selected = [];
     let selectionGeneration = 0;
+    let restoring = false;
+
+    function changed() {
+      if (!restoring && typeof onCheckpoint === 'function') {
+        Promise.resolve().then(onCheckpoint).catch(() => { /* Caller surfaces durable-storage failures. */ });
+      }
+    }
 
     function commitSelection(file) {
       if (!file || !IMAGE_TYPES.has(file.type) || !Number.isFinite(file.size) ||
@@ -60,6 +68,7 @@
         else throw new Error(MAX_FILES_MESSAGE);
       }
       selected.push({file, note:'', confirmed:null, serialized:null, operationId:createOperationId()});
+      changed();
       return state();
     }
 
@@ -93,6 +102,7 @@
       if (!Number.isInteger(position) || position < 0 || position >= selected.length) return state();
       selectionGeneration += 1;
       selected.splice(position, 1);
+      changed();
       return state();
     }
 
@@ -103,6 +113,7 @@
           from >= selected.length || to < 0 || to >= selected.length || from === to) return state();
       const [item] = selected.splice(from, 1);
       selected.splice(to, 0, item);
+      changed();
       return state();
     }
 
@@ -117,6 +128,7 @@
       selected[position] = {
         ...selected[position], file, confirmed:null, serialized:null, operationId:createOperationId(),
       };
+      changed();
       return state();
     }
 
@@ -125,6 +137,7 @@
       if (!Number.isInteger(position) || position < 0 || position >= selected.length) return state();
       selected[position].note = normalizeNote(value);
       selected[position].serialized = null;
+      changed();
       return state();
     }
 
@@ -134,15 +147,18 @@
     }
 
     function restore(value) {
-      if (Array.isArray(value)) {
+      restoring = true;
+      try {
+        if (Array.isArray(value)) {
+          clear();
+          if (value.length > maxFiles) throw new Error(MAX_FILES_MESSAGE);
+          value.forEach(attachment => restoreOne(attachment));
+          return state();
+        }
         clear();
-        if (value.length > maxFiles) throw new Error(MAX_FILES_MESSAGE);
-        value.forEach(attachment => restoreOne(attachment));
+        restoreOne(value);
         return state();
-      }
-      clear();
-      restoreOne(value);
-      return state();
+      } finally { restoring = false; }
     }
 
     function restoreOne(value) {
@@ -162,6 +178,10 @@
         ...(blob ? { filename, contentType, blob } : { filename, contentType, data }),
         ...(item.note ? {note:item.note} : {}),
       };
+      const operationId = String(value?.operationId || '').slice(0, 128);
+      if (operationId) item.operationId = operationId;
+      const markdown = String(value?.confirmed?.markdown || '');
+      if (markdown) item.confirmed = { markdown };
     }
 
     function state() {
@@ -178,7 +198,11 @@
         filename:item.file.name, contentType:item.file.type, blob:item.file.blob || item.file,
         ...(item.note ? {note:item.note} : {}),
       };
-      return { ...item.serialized };
+      return {
+        ...item.serialized,
+        operationId:item.operationId,
+        ...(item.confirmed?.markdown ? { confirmed:{ markdown:item.confirmed.markdown } } : {}),
+      };
     }
 
     async function serialize() {
@@ -206,6 +230,7 @@
             evidence.confirmed = null;
             throw new Error('The server did not confirm the screenshot upload.');
           }
+          await onCheckpoint?.();
         }
         if (evidence.note) {
           markdown.push('**Screenshot ' + (markdown.length + 1) + ' — ' + escapeMarkdown(evidence.note) + '**\n\n' +

frontend/private-data-registry.js

@@ -4,6 +4,7 @@
     'stackchain-offline-work-v2',
     'stackchain-unfiled-captures-v1',
     'stackchain-voice-transcripts-v1',
+    'stackchain-search-reply-drafts-v1',
   ]);
   if (typeof module !== 'undefined' && module.exports) module.exports = databases;
   else root.stackchainPrivateDatabases = databases;

frontend/search-preview.js

@@ -91,7 +91,7 @@
     };
   }
 })(typeof globalThis !== 'undefined' ? globalThis : this, function () {
-  return function createSearchPreview({ fetchJson, fetchConversation, mutate, share, postReply, prepareReply, hasAttachments, clearAttachments, storage, createOperationId, session, getSession, loadMore, onNavigate, navigationRoot, onState }) {
+  return function createSearchPreview({ fetchJson, fetchConversation, mutate, share, postReply, prepareReply, afterReply, hasAttachments, clearAttachments, storage, createOperationId, session, getSession, loadMore, onNavigate, navigationRoot, onState }) {
     if (Array.isArray(session)) {
       getSession = session[0];
       loadMore = () => session[1].loadMore();
@@ -305,7 +305,8 @@
         ).then(preparedBody => {
           if (!String(preparedBody || '').trim()) throw new Error('Write a reply or add a photo first.');
           return postReply(item, preparedBody, operationId);
-        }).then(comment => {
+        }).then(async comment => {
+          await afterReply?.(item);
           const comments = [...(conversation?.comments || [])];
           if (!comments.some(candidate => candidate?.id === comment?.id)) comments.push(comment);
           conversation = { status:'ready', comments, olderPage:conversation?.olderPage ?? null };

frontend/search-reply-draft-store.js

@@ -0,0 +1,121 @@
+(function (root, factory) {
+  const createSearchReplyDraftStore = factory();
+  if (typeof module === 'object' && module.exports) module.exports = createSearchReplyDraftStore;
+  else root.createSearchReplyDraftStore = createSearchReplyDraftStore;
+})(typeof globalThis !== 'undefined' ? globalThis : this, function () {
+  'use strict';
+
+  const dbName = 'stackchain-search-reply-drafts-v1';
+  const storeName = 'drafts';
+
+  function requestResult(request) {
+    return new Promise((resolve, reject) => {
+      request.onsuccess = () => resolve(request.result ?? null);
+      request.onerror = () => reject(request.error || new Error('Search reply draft storage failed.'));
+    });
+  }
+
+  function createTransaction(indexedDB) {
+    if (!indexedDB) return null;
+    let databasePromise;
+    function database() {
+      if (!databasePromise) databasePromise = new Promise((resolve, reject) => {
+        const request = indexedDB.open(dbName, 1);
+        request.onupgradeneeded = () => {
+          if (!request.result.objectStoreNames.contains(storeName)) {
+            request.result.createObjectStore(storeName, { keyPath:'id' });
+          }
+        };
+        request.onsuccess = () => resolve(request.result);
+        request.onerror = () => reject(request.error || new Error('Search reply draft storage is unavailable.'));
+      });
+      return databasePromise;
+    }
+    return async (operation, key, value) => {
+      const db = await database();
+      const transaction = db.transaction(storeName, operation === 'get' ? 'readonly' : 'readwrite');
+      const records = transaction.objectStore(storeName);
+      if (operation === 'put') return requestResult(records.put(value));
+      if (operation === 'delete') return requestResult(records.delete(key));
+      return requestResult(records.get(key));
+    };
+  }
+
+  function normalizedTarget(target) {
+    const kind = String(target?.kind || '');
+    const repository = String(target?.repository || '');
+    const number = Number(target?.number || 0);
+    if (!['issue', 'pull'].includes(kind) || !repository || !Number.isInteger(number) || number < 1) {
+      throw new Error('Choose a Search result before saving photo evidence.');
+    }
+    return { kind, repository, number };
+  }
+
+  function attachment(value) {
+    const blob = value?.blob;
+    const data = String(value?.data || '');
+    if (!blob && !data) throw new Error('A saved Search photo is unavailable.');
+    const note = String(value?.note || '').replace(/\s+/g, ' ').trim().slice(0, 240);
+    const operationId = String(value?.operationId || '').slice(0, 128);
+    const markdown = String(value?.confirmed?.markdown || '');
+    return {
+      filename:String(value?.filename || ''),
+      contentType:String(value?.contentType || ''),
+      ...(blob ? { blob } : { data }),
+      ...(note ? { note } : {}),
+      ...(operationId ? { operationId } : {}),
+      ...(markdown ? { confirmed:{ markdown } } : {}),
+    };
+  }
+
+  return function createSearchReplyDraftStore({
+    indexedDB = globalThis.indexedDB,
+    transaction,
+    getOwnerLogin = () => '',
+  } = {}) {
+    const transact = transaction || createTransaction(indexedDB);
+
+    function identity(target) {
+      const ownerLogin = String(getOwnerLogin() || '').trim();
+      if (!ownerLogin) throw new Error('Confirm your Gitea account before saving Search photos.');
+      const normalized = normalizedTarget(target);
+      return {
+        ownerLogin,
+        target:normalized,
+        id:[ownerLogin, normalized.kind, normalized.repository, normalized.number]
+          .map(value => encodeURIComponent(String(value))).join(':'),
+      };
+    }
+
+    async function save(target, values) {
+      if (!transact) throw new Error('Photo draft storage needs IndexedDB. Your current photos are still here.');
+      const { id, ownerLogin, target:normalized } = identity(target);
+      const list = (Array.isArray(values) ? values : [values]).filter(Boolean).slice(0, 5).map(attachment);
+      if (!list.length) {
+        await transact('delete', id);
+        return null;
+      }
+      await transact('put', id, { id, version:1, ownerLogin, ...normalized, attachments:list });
+      return list;
+    }
+
+    async function load(target) {
+      if (!transact) return null;
+      const { id, ownerLogin, target:normalized } = identity(target);
+      const record = await transact('get', id);
+      if (record?.version !== 1 || record.ownerLogin !== ownerLogin || record.kind !== normalized.kind ||
+          record.repository !== normalized.repository || Number(record.number) !== normalized.number ||
+          !Array.isArray(record.attachments) || !record.attachments.length) return null;
+      return record.attachments.slice(0, 5).map(attachment);
+    }
+
+    async function remove(target) {
+      if (!transact) return false;
+      const { id } = identity(target);
+      await transact('delete', id);
+      return true;
+    }
+
+    return { save, load, remove };
+  };
+});

frontend/service-worker.js

@@ -1,7 +1,7 @@
 const BASE = new URL('./', self.location.href).pathname;
 importScripts(BASE + 'static/private-data-registry.js');
 importScripts(BASE + 'static/background-issue-sync.js');
-const CACHE = 'stackchain-dashboard-shell-v112';
+const CACHE = 'stackchain-dashboard-shell-v113';
 const OFFLINE_LEASE_URL = new URL(BASE + '__offline-session-lease', self.location.origin).href;
 const OUTAGE_STATUSES = new Set([500, 502, 503, 504]);
 const NAVIGATION_TIMEOUT_MS = self.__STACKCHAIN_NAVIGATION_TIMEOUT_MS || 4000;
@@ -22,6 +22,7 @@ const SHELL = [
   BASE + 'static/commands.js',
   BASE + 'static/saved-searches.js',
   BASE + 'static/search-preview.js',
+  BASE + 'static/search-reply-draft-store.js',
   BASE + 'static/search-defer.js',
   BASE + 'static/widgets.js',
   BASE + 'static/drafts.js',