From 0ef043dbe468cb7f1fe42e8054105791f9e52077 Mon Sep 17 00:00:00 2001
From: Thibaut <thibaut@betterpic.io>
Date: Wed, 24 Jun 2026 11:58:02 +0100
Subject: [PATCH] asset-validation: add note button to view/edit feedback
 without changing rating
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- ✎ Note button on each tile + in the lightbox (amber when a note exists), plus 'n' shortcut
- opens the existing note pre-filled, no rating toggle (which was wiping the note)
- editing a note saves in place without auto-advancing to the next image
---
 projects/asset-validation/index.html | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/projects/asset-validation/index.html b/projects/asset-validation/index.html
index 0b296fc..e190ca9 100644
--- a/projects/asset-validation/index.html
+++ b/projects/asset-validation/index.html
@@ -1103,6 +1103,8 @@
   .tile-rate button.active.like { background: var(--success); }
   .tile-rate button.active.dislike { background: var(--error); }
   .tile-rate button:hover { background: var(--ink); }
+  .tile-rate button.note.has-note { background: var(--amber); color: var(--ink); }
+  .lb-note.has-note { color: var(--amber); border-color: var(--amber); }
   .tile-pending {
     aspect-ratio: 1;
     background: var(--card);
@@ -1475,6 +1477,7 @@ <h3 style="margin:0 0 6px; font-family:'Outfit',sans-serif; font-weight:700; fon
   <div class="lb-actions">
     <button class="lb-btn lb-dislike" onclick="event.stopPropagation(); rateCurrent('dislike')" title="Dislike (D)">👎 Dislike</button>
     <button class="lb-btn lb-like" onclick="event.stopPropagation(); rateCurrent('like')" title="Like (L)">👍 Like</button>
+    <button class="lb-btn lb-note" onclick="event.stopPropagation(); editNoteCurrent()" title="View / edit your note (N)">✎ Note</button>
   </div>
 </div>
 
@@ -2466,6 +2469,7 @@ <h3 style="margin:0 0 6px; font-family:'Outfit',sans-serif; font-weight:700; fon
       <div class="tile-rate">
         <button class="dislike ${rating === "dislike" ? "active" : ""}" onclick="event.stopPropagation(); rate('${r.id}','dislike')" title="Dislike">👎</button>
         <button class="like ${rating === "like" ? "active" : ""}" onclick="event.stopPropagation(); rate('${r.id}','like')" title="Like">👍</button>
+        <button class="note ${FEEDBACK[r.id] ? "has-note" : ""}" onclick="event.stopPropagation(); editNote('${r.id}')" title="${FEEDBACK[r.id] ? "Edit your note" : "Add a note"}">✎</button>
       </div>
     </div>`;
 }
@@ -2510,6 +2514,7 @@ <h3 style="margin:0 0 6px; font-family:'Outfit',sans-serif; font-weight:700; fon
   renderScoreSummary();
   if (LIGHTBOX_IDX != null) updateLightboxRateButtons();
   // Prompt for free-text feedback on both like and dislike (skippable)
+  FEEDBACK_EDIT = false;
   openFeedbackModal(id, value);
 }
 
@@ -2548,6 +2553,9 @@ <h3 style="margin:0 0 6px; font-family:'Outfit',sans-serif; font-weight:700; fon
 }
 
 let FEEDBACK_TARGET = null;
+let FEEDBACK_EDIT = false; // true when re-opening a note to view/edit (no rating change, no auto-advance)
+function editNote(id) { FEEDBACK_EDIT = true; openFeedbackModal(id, LIKES[id]); }
+function editNoteCurrent() { const r = RESULTS[LIGHTBOX_IDX]; if (r) editNote(r.id); }
 function openFeedbackModal(resultId, rating) {
   FEEDBACK_TARGET = resultId;
   const overlay = document.getElementById("feedbackModal");
@@ -2592,13 +2600,15 @@ <h3 style="margin:0 0 6px; font-family:'Outfit',sans-serif; font-weight:700; fon
   closeFeedbackModal();
   renderResults();
   renderScoreSummary();
-  advanceReview(ratedId);
+  if (!FEEDBACK_EDIT) advanceReview(ratedId);
+  FEEDBACK_EDIT = false;
   maybeOpenConfirmSubmitModal();
 }
 function skipCurrentFeedback() {
   const ratedId = FEEDBACK_TARGET;
   closeFeedbackModal();
-  advanceReview(ratedId);
+  if (!FEEDBACK_EDIT) advanceReview(ratedId);
+  FEEDBACK_EDIT = false;
   maybeOpenConfirmSubmitModal();
 }
 
@@ -2857,6 +2867,8 @@ <h3 style="margin:0 0 6px; font-family:'Outfit',sans-serif; font-weight:700; fon
   const rating = LIKES[r.id] || "";
   document.querySelector(".lb-like").classList.toggle("active", rating === "like");
   document.querySelector(".lb-dislike").classList.toggle("active", rating === "dislike");
+  const nb = document.querySelector(".lb-note");
+  if (nb) nb.classList.toggle("has-note", !!FEEDBACK[r.id]);
 }
 function rateCurrent(value) {
   const r = RESULTS[LIGHTBOX_IDX];
@@ -2876,6 +2888,7 @@ <h3 style="margin:0 0 6px; font-family:'Outfit',sans-serif; font-weight:700; fon
   else if (e.key === "ArrowRight") lightboxNav(1);
   else if (e.key.toLowerCase() === "l") rateCurrent("like");
   else if (e.key.toLowerCase() === "d") rateCurrent("dislike");
+  else if (e.key.toLowerCase() === "n") editNoteCurrent();
 });