From e32b8a531a707281441457a68cadf5b741def8e7 Mon Sep 17 00:00:00 2001
From: Sociowire Dev <dev@sociowire.com>
Date: Tue, 13 Jan 2026 09:08:59 +0000
Subject: [PATCH] Fix live filter to include cameras and update pin styling

- Live filter sends live,camera content types to API
- Camera pin border and pointer changed to sky blue (#0ea5e9)
- Camera pin background is sky blue when no thumbnail

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 src/App.jsx                          |  2 +-
 src/components/Map/markerManager.js  | 61 ++++++++++++++--------------
 src/components/Map/usePostsEngine.js |  2 +-
 src/styles/map.css                   |  2 +-
 4 files changed, 33 insertions(+), 34 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index efe3cda..8d9d9fa 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.0018</div>
+          <div className="sw-footer-brand">© Sociowire v0.0019</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 0052552..bbd5d96 100644
--- a/src/components/Map/markerManager.js
+++ b/src/components/Map/markerManager.js
@@ -2466,46 +2466,45 @@ export function createSimpleMarkerForPost(post, mapRef, markersRef, expandedElRe
     // Weather city name for label
     const weatherCity = isWeather ? (activePost?.city || (activePost?.title || '').split(':')[0].replace(/^[^\w\s]+/, '').trim()) : '';
 
-    // Camera thumbnail URL - only show camera marker if thumbnail available
+    // Camera thumbnail URL
     const cameraThumbnail = isCamera ? (activePost?.thumbnail_url || activePost?.image_small || '') : '';
-    const showCameraMarker = isCamera && cameraThumbnail;
 
-    // Marqueur pin avec image en haut et pointe en bas
-    root.innerHTML = showCameraMarker ? `
-        <div class="sw-camera-pin" style="
-          position: relative;
-          width: 48px;
-          height: 36px;
-          border-radius: 6px;
-          background: #1a1a2e;
-          border: 2px solid rgba(56, 189, 248, 0.9);
-          box-shadow: 0 3px 12px rgba(0,0,0,0.4), 0 0 20px rgba(56, 189, 248, 0.3);
-          overflow: hidden;
-          transition: transform 0.2s ease, box-shadow 0.2s ease;
-        ">
-          <img src="${cameraThumbnail}" alt="" style="width:100%;height:100%;object-fit:cover;" onerror="this.parentElement.parentElement.style.display='none';" />
+    // Camera pin - square thumbnail with red live dot
+    root.innerHTML = isCamera ? `
+        <div style="position:relative;">
+          <div style="
+            width: 44px;
+            height: 32px;
+            border-radius: 4px;
+            background: #0ea5e9;
+            border: 2px solid #0ea5e9;
+            box-shadow: 0 2px 8px rgba(0,0,0,0.4);
+            overflow: hidden;
+          ">
+            ${cameraThumbnail ? `<img src="${cameraThumbnail}" style="width:100%;height:100%;object-fit:cover;" onerror="this.style.display='none';" />` : ``}
+          </div>
           <div style="
             position: absolute;
-            top: 3px;
-            right: 3px;
-            width: 6px;
-            height: 6px;
+            top: -4px;
+            right: -4px;
+            width: 10px;
+            height: 10px;
             border-radius: 50%;
             background: #ef4444;
-            box-shadow: 0 0 4px rgba(239, 68, 68, 0.8);
+            border: 2px solid #fff;
+            box-shadow: 0 0 6px #ef4444;
             animation: pulse 1.5s infinite;
           "></div>
+          <div style="
+            width: 0;
+            height: 0;
+            border-left: 6px solid transparent;
+            border-right: 6px solid transparent;
+            border-top: 8px solid #0ea5e9;
+            margin: -2px auto 0;
+          "></div>
         </div>
-        <div style="
-          width: 0;
-          height: 0;
-          border-left: 6px solid transparent;
-          border-right: 6px solid transparent;
-          border-top: 10px solid rgba(56, 189, 248, 0.9);
-          margin-top: -1px;
-          filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
-        "></div>
-    ` : isCamera ? `` : `
+    ` : `
         <div class="sw-simple-marker ${isLive ? 'sw-live-marker' : ''} ${isWeather ? 'sw-weather-marker' : ''}" style="
           ${isWeather ? 'width: auto; height: auto; padding: 4px 8px; border-radius: 12px;' : 'width: 32px; height: 32px; border-radius: 50%;'}
           background: ${isWeather ? 'rgba(14, 165, 233, 0.75)' : color};
diff --git a/src/components/Map/usePostsEngine.js b/src/components/Map/usePostsEngine.js
index 87c0c83..f483dbe 100644
--- a/src/components/Map/usePostsEngine.js
+++ b/src/components/Map/usePostsEngine.js
@@ -1113,7 +1113,7 @@ export function usePostsEngine({
         // Map contentFilter to content_type for API
         let contentTypeParam = undefined;
         if (contentFilter && contentFilter !== "all") {
-          if (contentFilter === "live") contentTypeParam = "camera";
+          if (contentFilter === "live") contentTypeParam = "live,camera";
           else if (contentFilter === "video") contentTypeParam = "video,camera";
           else if (contentFilter === "image") contentTypeParam = "image";
           else if (contentFilter === "text") contentTypeParam = "post";
diff --git a/src/styles/map.css b/src/styles/map.css
index a2c0a65..b6d60f4 100644
--- a/src/styles/map.css
+++ b/src/styles/map.css
@@ -144,7 +144,7 @@
 .below-stage{
   margin-top: calc(var(--sw-below-overlap) * -1);
   position:relative;
-  z-index:25;
+  z-index:250;
   padding: 0.5rem 1rem 1.5rem;
   transition: opacity 320ms ease, filter 320ms ease;
 }