From deabe74593afdfc5354f564dd15e883751caa3bf Mon Sep 17 00:00:00 2001
From: Barely Removable <user@users-MacBook-Air.local>
Date: Sun, 23 Aug 2026 11:55:29 -0700
Subject: [PATCH] Replace History-row authenticity dot with a visible badge

A 8px dot next to the card name only rewards someone who already suspects
a card and goes looking for it -- the badge needs to be the thing that
catches your eye scanning the home-screen list itself. Same red/amber
tiers as the detail-view banner, using the existing .pill shape so it sits
naturally next to the photo-count meta line rather than needing new
layout.
---
 static/app.js    | 15 ++++++++-------
 static/style.css | 24 +++++++++++++++++-------
 2 files changed, 25 insertions(+), 14 deletions(-)

diff --git a/static/app.js b/static/app.js
index 522d18e..0d8c7e1 100644
--- a/static/app.js
+++ b/static/app.js
@@ -409,11 +409,12 @@ function renderHistory() {
   $('#history-empty').hidden = rows.length > 0;
   $('#history-body').innerHTML = rows.map((g) => {
     const auth = g.authenticity;
-    // A dot rather than repeating the full banner text — the row is
-    // already tight, and opening the card gives the real explanation.
-    const authDot = (auth && auth.flag !== 'none')
-      ? `<span class="authenticity-dot authenticity-${auth.flag === 'likely_not_genuine' ? 'high' : 'check'}"
-                title="${esc(auth.flag === 'likely_not_genuine' ? 'Possibly not a genuine card' : 'Worth double-checking')}"></span>`
+    // A real badge, not just a dot — this is the thing that has to catch
+    // the eye scanning the home-screen list, not something you only notice
+    // once you already suspect a card and go looking for it.
+    const authBadge = (auth && auth.flag !== 'none')
+      ? `<span class="pill authenticity-pill authenticity-${auth.flag === 'likely_not_genuine' ? 'high' : 'check'}">${
+          esc(auth.flag === 'likely_not_genuine' ? 'Possibly fake' : 'Verify')}</span>`
       : '';
     return `
     <tr data-history-row="${g.id}">
@@ -421,8 +422,8 @@ function renderHistory() {
         <div class="cardcell">
           ${g.thumbnail ? `<img src="${g.thumbnail}" alt="">` : '<span class="thumb-blank"></span>'}
           <div>
-            <div class="cardcell-name">${authDot}${esc(g.label || g.card_note || 'Untitled card')}</div>
-            <div class="cardcell-meta">${g.card_type ? `${esc(TYPE_LABEL[g.card_type] || 'Card')} · ` : ''}${g.image_count || 1} photo(s)</div>
+            <div class="cardcell-name">${esc(g.label || g.card_note || 'Untitled card')}</div>
+            <div class="cardcell-meta">${g.card_type ? `${esc(TYPE_LABEL[g.card_type] || 'Card')} · ` : ''}${g.image_count || 1} photo(s)${authBadge ? ' ' + authBadge : ''}</div>
           </div>
         </div>
       </td>
diff --git a/static/style.css b/static/style.css
index a472f91..9fcb2b3 100644
--- a/static/style.css
+++ b/static/style.css
@@ -450,14 +450,24 @@ textarea { resize: vertical; min-height: 64px; }
   font-size: 12.5px; color: var(--ink-2); margin-top: 3px; line-height: 1.5;
 }
 
-/* History-row version: a plain dot, since the row has no room for the full
-   banner text and opening the card gives the real explanation. */
-.authenticity-dot {
-  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
-  margin-right: 6px; vertical-align: middle;
-  background: var(--critical);
+/* History-row badge: a real pill, not just a dot — needs to catch the eye
+   scanning the home-screen list itself, not only reward someone who
+   already suspects a card and opens it to check. Same colour-mix technique
+   as .pill-critical/.pill-marginal elsewhere, just spelled out explicitly
+   since neither of those set the text colour this needs. */
+.authenticity-pill {
+  margin-left: 2px;
+}
+.authenticity-pill.authenticity-high {
+  border-color: color-mix(in srgb, var(--critical) 55%, transparent);
+  color: var(--critical);
+  background: color-mix(in srgb, var(--critical) 15%, transparent);
+}
+.authenticity-pill.authenticity-check {
+  border-color: color-mix(in srgb, var(--warning) 55%, transparent);
+  color: var(--warning);
+  background: color-mix(in srgb, var(--warning) 15%, transparent);
 }
-.authenticity-dot.authenticity-check { background: var(--warning); }
 
 /* -------------------------------------------------------------- banner */