feat: add photo evidence to Today progress updates (Closes #1054)

frontend/conversation-reply-draft-store.js

@@ -73,9 +73,10 @@
   }
 
   return function createConversationReplyDraftStore({
-    indexedDB = globalThis.indexedDB, transaction, getOwnerLogin = () => '',
+    indexedDB = globalThis.indexedDB, transaction, getOwnerLogin = () => '', scope = 'conversation',
   } = {}) {
     const transact = transaction || createTransaction(indexedDB);
+    const draftScope = String(scope || 'conversation').trim().slice(0, 64) || 'conversation';
 
     function identity(target) {
       const ownerLogin = String(getOwnerLogin() || '').trim();
@@ -83,26 +84,30 @@
       const normalized = normalizedTarget(target);
       const targetKey = normalized.kind === 'update' ? normalized.notificationId :
         normalized.repository + ':' + normalized.number;
+      const identityParts = draftScope === 'conversation' ? [ownerLogin, normalized.kind, targetKey] :
+        [ownerLogin, draftScope, normalized.kind, targetKey];
       return {
-        ownerLogin, target:normalized,
-        id:[ownerLogin, normalized.kind, targetKey].map(value => encodeURIComponent(String(value))).join(':'),
+        ownerLogin, scope:draftScope, target:normalized,
+        id:identityParts.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 { id, ownerLogin, scope:recordScope, 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 });
+      await transact('put', id, { id, version:1, ownerLogin, scope:recordScope, ...normalized, attachments:list });
       return list;
     }
 
     async function load(target) {
       if (!transact) return null;
-      const { id, ownerLogin, target:normalized } = identity(target);
+      const { id, ownerLogin, scope:recordScope, target:normalized } = identity(target);
       const record = await transact('get', id);
-      const same = record?.version === 1 && record.ownerLogin === ownerLogin &&
+      const scopeMatches = recordScope === 'conversation' ? (!record?.scope || record.scope === recordScope) :
+        record?.scope === recordScope;
+      const same = record?.version === 1 && record.ownerLogin === ownerLogin && scopeMatches &&
         record.kind === normalized.kind && (normalized.kind === 'update' ?
           Number(record.notificationId) === normalized.notificationId :
           record.repository === normalized.repository && Number(record.number) === normalized.number);

frontend/dashboard.css

@@ -276,6 +276,9 @@ textarea { resize: vertical; min-height: 120px; }
 .today-progress-panel h2, .today-progress-panel p { margin-top:0; }
 .today-progress-panel header button, .today-progress-actions button { min-height:44px; }
 .today-progress-panel textarea { box-sizing:border-box; width:100%; min-height:120px; resize:vertical; }
+.today-progress-evidence { display:grid; gap:8px; min-width:0; margin-top:12px; }
+.today-progress-evidence .issue-attachment-preview { width:100%; box-sizing:border-box; }
+.today-progress-evidence .issue-evidence-note textarea { min-height:72px; }
 .today-progress-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:12px; }
 .today-progress-actions button { width:100%; }
 @media(max-width:359px) { .today-progress-actions { grid-template-columns:1fr; } }

frontend/dashboard.js

@@ -833,6 +833,11 @@
       update:photoDraftLane(updateReplyAttachmentController, '#update-reply-status'),
     },
   });
+  const todayProgressPhotos = createTodayProgressPhotos({
+    qs, document, issueAttachment, fetchJson:fetchReviewJson,
+    createStore:createConversationReplyDraftStore, createDrafts:createConversationPhotoDrafts,
+    getLogin:() => confirmedOwnerLogin,
+  });
   const voiceTranscriptStore = createVoiceTranscriptStore();
   function mountConversationVoice(kind, draftSelector) {
     return createVoiceConversationCapture({
@@ -1970,7 +1975,7 @@
     };
   }
   const todayProgressView = createTodayProgressView({
-    progress:todayProgress, currentTarget:currentTodayProgressTarget, qs,
+    progress:todayProgress, currentTarget:currentTodayProgressTarget, qs, photos:todayProgressPhotos,
     announce:message => { qs('#my-work-action-status').textContent = message; },
     onAdmitted:() => refreshMyWorkView(),
   });

frontend/index.html

@@ -1546,6 +1546,30 @@
     <p id="today-progress-target" class="small"></p>
     <label for="today-progress-body">Update</label>
     <textarea id="today-progress-body" rows="5" maxlength="2000" placeholder="What changed, what you learned, or what comes next"></textarea>
+    <section class="today-progress-evidence" aria-labelledby="today-progress-evidence-label">
+      <strong id="today-progress-evidence-label">Photo evidence <span class="small">Optional · Up to 5</span></strong>
+      <div class="issue-attachment-controls conversation-photo-actions">
+        <label class="issue-attachment-trigger" for="take-today-progress-photo">Take photo</label>
+        <input class="visually-hidden" id="take-today-progress-photo" type="file" accept="image/*" capture="environment" />
+        <label class="issue-attachment-trigger" for="today-progress-attachment">Choose existing</label>
+        <input class="visually-hidden" id="today-progress-attachment" type="file" accept="image/png,image/jpeg,image/webp" multiple />
+      </div>
+      <div class="issue-attachment-preview conversation-evidence-review" id="today-progress-attachment-preview" hidden>
+        <img id="today-progress-attachment-image" alt="Selected progress photo preview" />
+        <span class="small" id="today-progress-attachment-meta"></span>
+        <div class="issue-evidence-tray" id="today-progress-attachment-tray" role="toolbar" aria-label="Progress photos" hidden></div>
+        <label class="issue-evidence-note" for="today-progress-attachment-note">
+          <span id="today-progress-attachment-note-label">Photo caption (optional)</span>
+          <textarea id="today-progress-attachment-note" maxlength="240" rows="2" disabled placeholder="What does this photo show?"></textarea>
+        </label>
+        <div class="issue-evidence-review-actions" aria-label="Reorder selected photo">
+          <button id="move-today-progress-attachment-earlier" type="button">Move earlier</button>
+          <button id="edit-today-progress-attachment" type="button">Edit photo</button>
+          <button id="remove-today-progress-attachment" type="button">Remove selected</button>
+          <button id="move-today-progress-attachment-later" type="button">Move later</button>
+        </div>
+      </div>
+    </section>
     <p class="small muted">Save privately on this device, or post to the exact Gitea item. Today keeps running either way.</p>
     <p id="today-progress-status" class="small" role="status" aria-live="polite"></p>
     <div class="today-progress-actions">

frontend/today-progress.js

@@ -5,7 +5,7 @@ maxLength = 2000, maxItems = 20 }) {
   const login = () => String(getLogin() || '').trim().toLowerCase();
   const storageKey = () => login() ? prefix + encodeURIComponent(login()) : '';
   const validIdentity = identity => typeof identity === 'string' && identity.length > 0 && identity.length <= 500;
-  const validRecord = record => record && typeof record.body === 'string' && record.body.length > 0 &&
+  const validRecord = record => record && typeof record.body === 'string' && (record.body.length > 0 || record.has_attachments === true) &&
     record.body.length <= maxLength && typeof record.operation_id === 'string' && record.operation_id.length > 0 &&
     record.operation_id.length <= 128;
 
@@ -42,12 +42,12 @@ maxLength = 2000, maxItems = 20 }) {
     return read()[identity]?.body || '';
   }
 
-  function save(identity, value) {
+  function save(identity, value, hasAttachments = false) {
     if (!validIdentity(identity) || !storageKey()) return false;
     const body = String(value || '').trim();
     if (body.length > maxLength) return false;
     const drafts = read();
-    if (!body) {
+    if (!body && !hasAttachments) {
       delete drafts[identity];
       return write(drafts);
     }
@@ -56,6 +56,7 @@ maxLength = 2000, maxItems = 20 }) {
     drafts[identity] = {
       body,
       operation_id: previous?.body === body ? previous.operation_id : String(makeId()).slice(0, 128),
+      ...(hasAttachments ? {has_attachments:true} : {}),
     };
     return write(drafts);
   }
@@ -66,16 +67,21 @@ maxLength = 2000, maxItems = 20 }) {
       Number.isInteger(target.number) && target.number > 0;
   }
 
-  async function post(target, value) {
+  async function post(target, value, attachments = [], completeEvidence) {
     if (!validTarget(target)) throw new Error('An active Today issue or pull request is required.');
-    if (value !== undefined && !save(target.identity, value)) throw new Error('Progress update could not be saved on this device.');
+    const evidence = (Array.isArray(attachments) ? attachments : [attachments]).filter(Boolean).slice(0, 5);
+    if ((value !== undefined || evidence.length) && !save(target.identity, value ?? load(target.identity), evidence.length > 0)) {
+      throw new Error('Progress update could not be saved on this device.');
+    }
     const record = read()[target.identity];
     if (!record) throw new Error('Write a progress update before posting.');
     if (typeof admit !== 'function') throw new Error('Progress update delivery is unavailable.');
     const admission = await admit({
       kind:target.kind + '-comment', repository:target.repository, number:target.number,
       body:record.body, operationId:record.operation_id,
+      ...(evidence.length ? {attachments:evidence} : {}),
     });
+    if (typeof completeEvidence === 'function') await completeEvidence();
     const drafts = read();
     if (drafts[target.identity]?.operation_id === record.operation_id) {
       delete drafts[target.identity];
@@ -87,7 +93,7 @@ maxLength = 2000, maxItems = 20 }) {
   return { load, save, discard:identity => save(identity, ''), post };
 }
 
-function createTodayProgressView({ progress, currentTarget, qs, announce = () => {}, onAdmitted = () => {} }) {
+function createTodayProgressView({ progress, currentTarget, qs, photos, announce = () => {}, onAdmitted = () => {} }) {
   const sheet = qs('#today-progress-sheet');
   const body = qs('#today-progress-body');
   const status = qs('#today-progress-status');
@@ -95,9 +101,12 @@ function createTodayProgressView({ progress, currentTarget, qs, announce = () =>
   let openedTarget = null;
 
   const update = () => { launcher.hidden = !currentTarget(); };
-  const checkpoint = () => {
+  const checkpoint = async () => {
     if (!openedTarget) return false;
-    if (progress.save(openedTarget.identity, body.value)) return true;
+    if (progress.save(openedTarget.identity, body.value, photos?.has?.())) {
+      try { await photos?.checkpoint?.(); return true; }
+      catch (error) { status.textContent = error.message + ' Your photos remain here; retry.'; return false; }
+    }
     status.textContent = 'Update must be 2,000 characters or fewer and device storage must be available.';
     return false;
   };
@@ -106,25 +115,27 @@ function createTodayProgressView({ progress, currentTarget, qs, announce = () =>
     openedTarget = null;
   };
 
-  launcher.addEventListener('click', () => {
+  launcher.addEventListener('click', async () => {
     const target = currentTarget();
     if (!target) return;
     openedTarget = target;
     qs('#today-progress-target').textContent = target.label + (target.title ? ' · ' + target.title : '');
     body.value = progress.load(target.identity);
-    status.textContent = '';
+    status.textContent = 'Restoring saved photo evidence…';
     sheet.showModal();
+    try { await photos?.open?.(target); status.textContent = ''; }
+    catch (error) { status.textContent = error.message + ' You can retry by reopening this update.'; }
     body.focus();
   });
-  qs('#cancel-today-progress').addEventListener('click', () => {
-    if (checkpoint()) close();
+  qs('#cancel-today-progress').addEventListener('click', async () => {
+    if (await checkpoint()) close();
   });
-  sheet.addEventListener('cancel', event => {
+  sheet.addEventListener('cancel', async event => {
     event.preventDefault();
-    if (checkpoint()) close();
+    if (await checkpoint()) close();
   });
-  qs('#save-today-progress').addEventListener('click', () => {
-    if (!checkpoint()) return;
+  qs('#save-today-progress').addEventListener('click', async () => {
+    if (!await checkpoint()) return;
     announce('Progress update saved privately to this Today item.');
     close();
   });
@@ -138,7 +149,9 @@ function createTodayProgressView({ progress, currentTarget, qs, announce = () =>
     button.disabled = true;
     status.textContent = 'Saving for delivery…';
     try {
-      const admission = await progress.post(target, body.value);
+      await photos?.checkpoint?.();
+      const attachments = await photos?.serialize?.() || [];
+      const admission = await progress.post(target, body.value, attachments, () => photos?.complete?.());
       onAdmitted(admission);
       announce(admission.background ?
         'Progress update queued for delivery. Today is still on the same item.' :
@@ -155,7 +168,62 @@ function createTodayProgressView({ progress, currentTarget, qs, announce = () =>
   return { update };
 }
 
+function createTodayProgressPhotos({ qs, document, issueAttachment, fetchJson, createStore, createDrafts, getLogin }) {
+  let target = null;
+  let drafts = null;
+  const controller = issueAttachment.mount({
+    maxFiles:5, input:qs('#today-progress-attachment'),
+    inputs:[qs('#take-today-progress-photo'), qs('#today-progress-attachment')],
+    preview:qs('#today-progress-attachment-preview'), image:qs('#today-progress-attachment-image'),
+    meta:qs('#today-progress-attachment-meta'), remove:qs('#remove-today-progress-attachment'),
+    tray:qs('#today-progress-attachment-tray'), earlier:qs('#move-today-progress-attachment-earlier'),
+    later:qs('#move-today-progress-attachment-later'), note:qs('#today-progress-attachment-note'),
+    noteLabel:qs('#today-progress-attachment-note-label'), status:qs('#today-progress-status'),
+    onChange:() => drafts?.checkpoint('today').catch(() => {}),
+    onCheckpoint:() => drafts.checkpoint('today'),
+    readyMessage:'Photo ready to post with this Today update.',
+    removedMessage:'Photo removed. Your progress text is unchanged.',
+    editor:{
+      document, edit:qs('#edit-today-progress-attachment'), dialog:qs('#issue-evidence-editor'),
+      canvas:qs('#issue-evidence-editor-canvas'), exportCanvas:qs('#issue-evidence-editor-export'),
+      crop:qs('#crop-issue-evidence'), redact:qs('#redact-issue-evidence'),
+      highlight:qs('#highlight-issue-evidence'), arrow:qs('#arrow-issue-evidence'),
+      undo:qs('#undo-issue-evidence-edit'), reset:qs('#reset-issue-evidence-edit'),
+      cancel:qs('#cancel-issue-evidence-edit'), apply:qs('#apply-issue-evidence-edit'),
+      status:qs('#issue-evidence-editor-status'), appliedMessage:'Edited photo ready for this Today update.',
+    },
+    createObjectURL:file => URL.createObjectURL(file), revokeObjectURL:url => URL.revokeObjectURL(url),
+    upload:payload => {
+      if (!target || target.repository !== payload.repository || Number(target.number) !== Number(payload.number)) {
+        return Promise.reject(new Error('The active Today item changed. Reopen its update before posting.'));
+      }
+      const repository = payload.repository.split('/').map(encodeURIComponent).join('/');
+      const resource = target.kind === 'pull' ? 'pulls' : 'issues';
+      return fetchJson('api/v1/repos/' + repository + '/' + resource + '/' +
+        encodeURIComponent(payload.number) + '/attachments', {
+        method:'POST', headers:{Accept:'application/json','Idempotency-Key':payload.operation_id},
+        body:issueAttachment.multipart(payload),
+      });
+    },
+  });
+  const store = createStore({ indexedDB:globalThis.indexedDB, getOwnerLogin:getLogin, scope:'today-progress' });
+  drafts = createDrafts({ store, lanes:{ today:{ controller, onError:error => {
+    qs('#today-progress-status').textContent = error.message + ' Your photos remain here; retry.';
+  } } } });
+  return {
+    has:() => Boolean(controller.state()), serialize:() => controller.serialize(),
+    checkpoint:() => drafts.checkpoint('today'),
+    open:async value => {
+      if (drafts.hasTarget('today')) await drafts.switchTo('today', value);
+      else await drafts.open('today', value);
+      target = { ...value };
+    },
+    complete:async () => { await drafts.complete('today'); target = null; },
+  };
+}
+
 if (typeof module !== 'undefined' && module.exports) {
   module.exports = createTodayProgress;
   module.exports.createView = createTodayProgressView;
+  module.exports.createPhotos = createTodayProgressPhotos;
 }