fix(gallery): proper auth-gated voting with persistence, undo, and change

Replaces the broken counter-bump RPC with a per-user share_votes table
(PK share_id+user_id, RLS-enforced ownership). One vote per user per
card, change direction or undo any time. Auth required for write;
read is public. share_cards.upvotes/downvotes/score stay in sync via
recalc trigger. New endpoints: POST /api/vote (auth-gated), GET
/api/vote-state/:id (auth-aware).

src/gallery.el

@@ -1,7 +1,7 @@
 // components/gallery.el - "Things Neuron Said" gallery page.
-// Uses the full site nav and styles — consistent with the rest of the site.
+// Per-card auth-gated voting via supabase-js + /api/vote.
 
-fn gallery_page(cards_json: String) -> String {
+fn gallery_page(cards_json: String, supabase_url: String, supabase_anon_key: String) -> String {
     let i: Int = 0
     let cards_html: String = ""
     let n: Int = json_array_len(cards_json)
@@ -16,16 +16,20 @@ fn gallery_page(cards_json: String) -> String {
         let a_html: String = str_replace(str_replace(str_replace(ca, "&", "&amp;"), "<", "&lt;"), ">", "&gt;")
         let ts_raw: String = json_get(card, "created_at")
         let ts_short: String = str_slice(ts_raw, 0, 10)
-        let votes_label: String = if str_eq(score, "1") { "1 vote" } else { score + " votes" }
-        let card_open: String = "<a href=\"/share/" + cid + "\" class=\"gal-card\" data-score=\"" + score + "\" data-ts=\"" + cid + "\">"
-        let card_html: String = card_open + "
-  <div class=\"gal-q\">" + q_html + "</div>
-  <div class=\"gal-a\">" + a_html + "</div>
+        let card_html: String = "<div class=\"gal-card\" data-share-id=\"" + cid + "\" data-score=\"" + score + "\" data-ts=\"" + cid + "\">
+  <a href=\"/share/" + cid + "\" class=\"gal-link\">
+    <div class=\"gal-q\">" + q_html + "</div>
+    <div class=\"gal-a\">" + a_html + "</div>
+  </a>
   <div class=\"gal-meta\">
-    <span>" + votes_label + "</span>
-    <span>" + ts_short + " &#183; Read &#8599;</span>
+    <div class=\"vote-controls\" data-share-id=\"" + cid + "\">
+      <button type=\"button\" class=\"vote-btn vote-up\" aria-label=\"Upvote\" data-direction=\"up\" disabled>&#9650;</button>
+      <span class=\"vote-score\" data-score=\"" + score + "\">" + score + "</span>
+      <button type=\"button\" class=\"vote-btn vote-down\" aria-label=\"Downvote\" data-direction=\"down\" disabled>&#9660;</button>
+    </div>
+    <span class=\"gal-date\">" + ts_short + " &#183; Read &#8599;</span>
   </div>
-</a>"
+</div>"
         let cards_html = cards_html + card_html
         let i = i + 1
     }
@@ -51,6 +55,7 @@ fn gallery_page(cards_json: String) -> String {
   --navy: #0052A0; --navy-65: rgba(0,82,160,.65); --navy-85: rgba(0,82,160,.85);
   --t1: #0D0D14; --t2: #3A3A4A; --t3: #6B6B7E;
   --border: rgba(0,0,0,.07); --border2: rgba(0,0,0,.13);
+  --up: #2E7D32; --down: #C62828;
   --head: 'Playfair Display', Georgia, serif;
   --body: 'IBM Plex Sans', system-ui, sans-serif;
 }
@@ -104,11 +109,23 @@ body::before {
 .gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
 @media (max-width: 900px) { .gallery-grid { grid-template-columns: 1fr 1fr; } }
 @media (max-width: 600px) { .gallery-grid { grid-template-columns: 1fr; } }
-.gal-card { background: var(--card); border: 1px solid var(--border); padding: 1.5rem; display: flex; flex-direction: column; gap: .875rem; text-decoration: none; transition: border-color .15s, box-shadow .15s; }
+.gal-card { background: var(--card); border: 1px solid var(--border); padding: 1.5rem; display: flex; flex-direction: column; gap: .875rem; transition: border-color .15s, box-shadow .15s; }
 .gal-card:hover { border-color: rgba(0,82,160,.25); box-shadow: 0 4px 20px rgba(0,82,160,.07); }
+.gal-link { text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: .875rem; flex: 1; }
 .gal-q { font-family: var(--body); font-weight: 500; font-size: .875rem; color: var(--navy); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
 .gal-a { font-family: var(--body); font-weight: 300; font-size: .8125rem; color: var(--t2); line-height: 1.7; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; flex: 1; }
 .gal-meta { display: flex; justify-content: space-between; align-items: center; font-family: var(--body); font-size: .65rem; font-weight: 400; letter-spacing: .1em; text-transform: uppercase; color: var(--t3); margin-top: auto; padding-top: .75rem; border-top: 1px solid var(--border); }
+.gal-date { font-size: .65rem; color: var(--t3); }
+/* Vote controls */
+.vote-controls { display: inline-flex; align-items: center; gap: .35rem; }
+.vote-btn { background: transparent; border: 1px solid var(--border2); color: var(--t3); cursor: pointer; padding: .2rem .45rem; font-size: .7rem; line-height: 1; transition: all .15s; -webkit-tap-highlight-color: transparent; }
+.vote-btn:hover:not(:disabled) { color: var(--navy); border-color: rgba(0,82,160,.35); background: rgba(0,82,160,.04); }
+.vote-btn:focus-visible { outline: 2px solid var(--navy); outline-offset: 1px; }
+.vote-btn:disabled { opacity: .55; cursor: not-allowed; }
+.vote-btn.is-active.vote-up { background: rgba(46,125,50,.10); color: var(--up); border-color: rgba(46,125,50,.45); }
+.vote-btn.is-active.vote-down { background: rgba(198,40,40,.10); color: var(--down); border-color: rgba(198,40,40,.45); }
+.vote-btn.is-loading { opacity: .55; cursor: wait; }
+.vote-score { font-size: .8rem; font-weight: 500; color: var(--t1); min-width: 1.5rem; text-align: center; font-variant-numeric: tabular-nums; }
 .gallery-controls { display: flex; align-items: center; gap: 1rem; margin-bottom: 2rem; flex-wrap: wrap; }
 .gallery-search { flex: 1; min-width: 200px; font-family: var(--body); font-size: .875rem; font-weight: 300; color: var(--t1); background: #fff; border: 1px solid var(--border2); padding: .625rem 1rem; outline: none; transition: border-color .2s; }
 .gallery-search:focus { border-color: var(--navy); }
@@ -117,6 +134,19 @@ body::before {
 .sort-btn:hover, .sort-btn.active { color: var(--navy); border-color: rgba(0,82,160,.3); background: rgba(0,82,160,.03); }
 .gallery-empty { grid-column: 1/-1; padding: 4rem 0; text-align: center; }
 .gal-card.hidden { display: none; }
+/* Sign-in modal */
+.signin-modal { position: fixed; inset: 0; background: rgba(13,13,20,.55); display: none; align-items: center; justify-content: center; z-index: 1000; padding: 1rem; }
+.signin-modal.open { display: flex; }
+.signin-modal-card { background: #fff; border: 1px solid var(--border2); padding: 2rem; max-width: 22rem; width: 100%; box-shadow: 0 16px 48px rgba(0,0,0,.18); }
+.signin-modal h2 { font-family: var(--head); font-size: 1.4rem; font-weight: 600; color: var(--t1); margin-bottom: .5rem; }
+.signin-modal p { font-family: var(--body); font-size: .85rem; font-weight: 300; color: var(--t2); line-height: 1.6; margin-bottom: 1.25rem; }
+.signin-modal input { width: 100%; box-sizing: border-box; font-family: var(--body); font-size: .875rem; font-weight: 300; color: var(--t1); background: #fff; border: 1px solid var(--border2); padding: .75rem 1rem; outline: none; transition: border-color .2s; margin-bottom: .75rem; }
+.signin-modal input:focus { border-color: var(--navy); }
+.signin-modal-actions { display: flex; gap: .5rem; justify-content: space-between; align-items: center; }
+.signin-modal-msg { font-size: .8rem; color: var(--t2); margin-top: .75rem; min-height: 1rem; }
+.signin-modal .btn-primary { padding: .7rem 1.25rem; font-size: .7rem; }
+.signin-modal-cancel { background: none; border: none; color: var(--t3); cursor: pointer; font-family: var(--body); font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; padding: .7rem .5rem; }
+.signin-modal-cancel:hover { color: var(--t1); }
 </style>
 </head>
 <body>
@@ -185,6 +215,27 @@ body::before {
   </div>
 </div>
 
+<!-- Magic-link sign-in modal -->
+<div class=\"signin-modal\" id=\"signin-modal\" role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"signin-title\">
+  <div class=\"signin-modal-card\">
+    <h2 id=\"signin-title\">Sign in to vote</h2>
+    <p>We will email you a sign-in link. No password needed.</p>
+    <input type=\"email\" id=\"signin-email\" placeholder=\"your@email.com\" autocomplete=\"email\">
+    <div class=\"signin-modal-actions\">
+      <button type=\"button\" class=\"signin-modal-cancel\" id=\"signin-cancel\">Cancel</button>
+      <button type=\"button\" class=\"btn-primary\" id=\"signin-send\">Send link</button>
+    </div>
+    <p class=\"signin-modal-msg\" id=\"signin-msg\"></p>
+  </div>
+</div>
+
+<script src=\"https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2/dist/umd/supabase.min.js\"></script>
+<script>
+window.NEURON_CFG=window.NEURON_CFG||{};
+window.NEURON_CFG.supabase_url=\"" + supabase_url + "\";
+window.NEURON_CFG.supabase_anon_key=\"" + supabase_anon_key + "\";
+</script>
+<script src=\"/assets/js/d8251f5e5aa1.js\" defer></script>
 <script src=\"/assets/js/cd30551e3c3b.js\" defer></script>
 </body>
 </html>"