From 0e741329cbfdc0b563a0d6e373dc4a875e2cad8b Mon Sep 17 00:00:00 2001
From: Sociowire Dev <dev@sociowire.com>
Date: Wed, 14 Jan 2026 21:49:10 +0000
Subject: [PATCH] v0.0.21: Fix camera pins, carousel gallery, polaroid text

- Camera posts now use small blue pins with red flashing dot
- Fixed carousel gallery arrows for posts with multiple images
- Added title and source text to polaroid mini cards
- Bumped version to 0.0.21

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 package.json                         |  2 +-
 src/App.jsx                          |  2 +-
 src/components/Map/markerManager.js  | 27 +++++++++++++++++++++++++--
 src/components/Map/postPriority.js   |  7 +++++++
 src/components/Map/templateSpecs.js  |  5 +++--
 src/components/Map/usePostsEngine.js |  8 +++++++-
 src/theme/cardTokens.js              |  6 ++++++
 7 files changed, 50 insertions(+), 7 deletions(-)

diff --git a/package.json b/package.json
index 76f3093..67783f7 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "sociowire-frontend",
   "private": true,
-  "version": "0.0.0",
+  "version": "0.0.21",
   "type": "module",
   "scripts": {
     "dev": "vite --host 0.0.0.0",
diff --git a/src/App.jsx b/src/App.jsx
index 8d9d9fa..bc07508 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -251,7 +251,7 @@ export default function App() {
       <footer className="sw-footer">
         <div className="sw-footer-inner">
           <div className="sw-footer-brand">SOCIOWIRE</div>
-          <div className="sw-footer-brand">© Sociowire v0.0019</div>
+          <div className="sw-footer-brand">© Sociowire v0.0.21</div>
           <div id="sw-weather-debug" style={{color: '#0ea5e9', fontSize: '10px'}}></div>
           <nav className="sw-footer-nav" aria-label="Site">
             <a href="/">{t('nav.home')}</a>
diff --git a/src/components/Map/markerManager.js b/src/components/Map/markerManager.js
index bbd5d96..9bd88a2 100644
--- a/src/components/Map/markerManager.js
+++ b/src/components/Map/markerManager.js
@@ -286,6 +286,23 @@ function applyPostDetails(modalWrap, post) {
       const indicatorHtml = heroHasGallery
         ? `<div class="sw-modal-gallery-indicator" aria-live="polite"><span class="sw-modal-gallery-current">1</span><span class="sw-modal-gallery-separator">/</span><span class="sw-modal-gallery-total">${heroGallery.length}</span></div>`
         : "";
+      // DEBUG v0.0.21 - send debug to server
+      try {
+        fetch('/api/debug-log', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({
+            event: 'modal_gallery',
+            post_id: post?.id,
+            media_urls_raw: post?.media_urls,
+            media_urls_count: Array.isArray(post?.media_urls) ? post.media_urls.length : 0,
+            gallery_count: heroGallery.length,
+            gallery_items: heroGallery,
+            has_gallery: heroHasGallery,
+            content_type: post?.content_type
+          })
+        }).catch(() => {});
+      } catch {}
       target.innerHTML = `${heroImageHtml}${arrowHtml}${indicatorHtml}`;
       bindHeroLightbox(modalWrap);
       if (heroHasGallery) {
@@ -1192,7 +1209,10 @@ export function openCenteredOverlay({ map, post, theme, fullScreen = false }) {
   const sub = (postData?.sub_category || postData?.subCategory || "").toString().trim();
   const metaLeft = author ? `by ${author}` : "";
   const metaRight = sub ? sub : "";
-  const img = heroImageForPost(postData);
+  const heroGallery = collectGalleryImages(postData);
+  const img = heroGallery[0] || heroImageForPost(postData);
+  const heroFullSrc = heroGallery[0] || fullImageForPost(postData);
+  const heroHasGallery = heroGallery.length > 1;
   const truth = truthScore(postData);
   const url = data?.url || "";
   const postID = postData?.id || postData?.ID || postData?.post_id || 0;
@@ -1389,7 +1409,7 @@ export function openCenteredOverlay({ map, post, theme, fullScreen = false }) {
                 </div>
               </div>
             ` : img
-                ? `<img src="${escapeHtml(img)}" data-fullsrc="${escapeHtml(fullImageForPost(postData))}" alt="" loading="lazy" />`
+                ? `<img src="${escapeHtml(img)}" data-fullsrc="${escapeHtml(heroFullSrc)}" alt="" loading="lazy" data-gallery-index="0" />${heroHasGallery ? `<button class="sw-modal-hero-arrow left" type="button" aria-label="Previous image"><i class="fa-solid fa-chevron-left"></i></button><button class="sw-modal-hero-arrow right" type="button" aria-label="Next image"><i class="fa-solid fa-chevron-right"></i></button><div class="sw-modal-gallery-indicator" aria-live="polite"><span class="sw-modal-gallery-current">1</span><span class="sw-modal-gallery-separator">/</span><span class="sw-modal-gallery-total">${heroGallery.length}</span></div>` : ''}`
                 : `<div class="sw-modal-hero-fallback"><div class="sw-modal-hero-fallback-inner"><i class="${categoryIconClass(postData)}"></i><span>${escapeHtml(normCatLabel(postData))}</span></div></div>`
             }
           </div>
@@ -1492,6 +1512,9 @@ export function openCenteredOverlay({ map, post, theme, fullScreen = false }) {
   }
 
   bindHeroLightbox(modalWrap);
+  if (heroHasGallery) {
+    initModalGallery(modalWrap, heroGallery);
+  }
 
   backdrop.appendChild(modalWrap);
   document.body.appendChild(backdrop);
diff --git a/src/components/Map/postPriority.js b/src/components/Map/postPriority.js
index ff99e3f..492e835 100644
--- a/src/components/Map/postPriority.js
+++ b/src/components/Map/postPriority.js
@@ -131,12 +131,19 @@ export function prioritizePosts(posts, viewCenter, options = {}) {
   let hasTiers = false;
   for (const post of posts) {
     const tier = (post?.tier || '').toLowerCase();
+    const contentType = (post?.content_type || '').toLowerCase();
 
     // DEBUG: Log tier values
     if (posts.indexOf(post) < 5) {
       console.log('[prioritizePosts] post:', post.id, 'tier:', post.tier, 'content_type:', post.content_type);
     }
 
+    // Camera posts ALWAYS use simple markers (small blue pin with red dot)
+    if (contentType === 'camera') {
+      simpleMarkerPosts.push(post);
+      continue;
+    }
+
     if (tier === 'premium') {
       fullCardPosts.push(post);
       hasTiers = true;
diff --git a/src/components/Map/templateSpecs.js b/src/components/Map/templateSpecs.js
index 44c8c3f..30f0523 100644
--- a/src/components/Map/templateSpecs.js
+++ b/src/components/Map/templateSpecs.js
@@ -11,12 +11,13 @@
 export const TEMPLATE_SPECS = {
   polaroid: {
     mini_spec: {
-      size: { w: 180, h: 210 },
+      size: { w: 180, h: 230 },
       background: { type: "solid", value: "#ffffff" },
       radius: 8,
       layers: [
         { id: "image", type: "image", x: 10, y: 10, w: 160, h: 160, bind: "data.image", radius: 4 },
-        { id: "author", type: "text", x: 10, y: 178, w: 160, h: 24, bind: "data.source", style: "text.polaroidCaption", maxLines: 1 },
+        { id: "title", type: "text", x: 10, y: 176, w: 160, h: 28, bind: "data.headline", style: "text.polaroidTitle", maxLines: 2 },
+        { id: "author", type: "text", x: 10, y: 206, w: 160, h: 18, bind: "data.source", style: "text.polaroidCaption", maxLines: 1 },
       ],
     },
     full_spec: {
diff --git a/src/components/Map/usePostsEngine.js b/src/components/Map/usePostsEngine.js
index 5283545..982d8cc 100644
--- a/src/components/Map/usePostsEngine.js
+++ b/src/components/Map/usePostsEngine.js
@@ -1416,7 +1416,13 @@ export function usePostsEngine({
       const id = getId(normalized);
       const have = new Set((markersRef.current || []).map((x) => x.id));
       if (id != null && !have.has(id)) {
-        createMarkerForPost(normalized, mapRef, markersRef, expandedElRef, theme);
+        // Camera posts always use simple markers (small blue pin with red dot)
+        const ct = (normalized?.content_type || '').toLowerCase();
+        if (ct === 'camera') {
+          createSimpleMarkerForPost(normalized, mapRef, markersRef, expandedElRef, theme);
+        } else {
+          createMarkerForPost(normalized, mapRef, markersRef, expandedElRef, theme);
+        }
       }
 
       setVisiblePosts((current) => [normalized, ...current]);
diff --git a/src/theme/cardTokens.js b/src/theme/cardTokens.js
index 0de6645..cc638f7 100644
--- a/src/theme/cardTokens.js
+++ b/src/theme/cardTokens.js
@@ -23,6 +23,8 @@ export const cardTokens = {
       h1: { color: "#E9EEF8", fontSize: 22, fontWeight: 900, lineHeight: "26px" },
       body: { color: "#D7DEED", fontSize: 14, fontWeight: 600, lineHeight: "18px" },
       icon: { color: "rgba(255,255,255,0.3)", fontSize: 48, fontFamily: "Font Awesome 6 Free", display: "flex", alignItems: "center", justifyContent: "center", fontWeight: 900 },
+      polaroidTitle: { color: "#1a1a1a", fontSize: 11, fontWeight: 700, lineHeight: "13px" },
+      polaroidCaption: { color: "#666666", fontSize: 10, fontWeight: 500, lineHeight: "12px" },
     },
     chip: {
       news: { background: "rgba(78,161,255,0.18)", color: "#CFE6FF", fontWeight: 800, fontSize: 12, borderRadius: 999 },
@@ -57,6 +59,8 @@ export const cardTokens = {
       h1: { color: "#F0F7FF", fontSize: 22, fontWeight: 900, lineHeight: "26px" },
       body: { color: "#D7E9FF", fontSize: 14, fontWeight: 700, lineHeight: "18px" },
       icon: { color: "rgba(255,255,255,0.3)", fontSize: 48, fontFamily: "Font Awesome 6 Free", display: "flex", alignItems: "center", justifyContent: "center", fontWeight: 900 },
+      polaroidTitle: { color: "#1a1a1a", fontSize: 11, fontWeight: 700, lineHeight: "13px" },
+      polaroidCaption: { color: "#666666", fontSize: 10, fontWeight: 500, lineHeight: "12px" },
     },
     chip: {
       news: { background: "rgba(56,189,248,0.18)", color: "#D7F3FF", fontWeight: 900, fontSize: 12, borderRadius: 999 },
@@ -91,6 +95,8 @@ export const cardTokens = {
       h1: { color: "#0B1220", fontSize: 22, fontWeight: 900, lineHeight: "26px" },
       body: { color: "#1A2740", fontSize: 14, fontWeight: 600, lineHeight: "18px" },
       icon: { color: "rgba(0,0,0,0.15)", fontSize: 48, fontFamily: "Font Awesome 6 Free", display: "flex", alignItems: "center", justifyContent: "center", fontWeight: 900 },
+      polaroidTitle: { color: "#1a1a1a", fontSize: 11, fontWeight: 700, lineHeight: "13px" },
+      polaroidCaption: { color: "#666666", fontSize: 10, fontWeight: 500, lineHeight: "12px" },
     },
     chip: {
       news: { background: "rgba(30,107,255,0.12)", color: "#0B1220", fontWeight: 900, fontSize: 12, borderRadius: 999 },