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

@@ -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",

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>

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);

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;

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: {

src/components/Map/usePostsEngine.js

@@ -1416,8 +1416,14 @@ export function usePostsEngine({
       const id = getId(normalized);
       const have = new Set((markersRef.current || []).map((x) => x.id));
       if (id != null && !have.has(id)) {
+        // 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]);
     },

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 },