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

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

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
+    // Camera pin - square thumbnail with red live dot
-    root.innerHTML = showCameraMarker ? `
+    root.innerHTML = isCamera ? `
-        <div class="sw-camera-pin" style="
+        <div style="position:relative;">
-          position: relative;
+          <div style="
-          width: 48px;
+            width: 44px;
-          height: 36px;
+            height: 32px;
-          border-radius: 6px;
+            border-radius: 4px;
-          background: #1a1a2e;
+            background: #0ea5e9;
-          border: 2px solid rgba(56, 189, 248, 0.9);
+            border: 2px solid #0ea5e9;
-          box-shadow: 0 3px 12px rgba(0,0,0,0.4), 0 0 20px rgba(56, 189, 248, 0.3);
+            box-shadow: 0 2px 8px rgba(0,0,0,0.4);
             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';" />
+            ${cameraThumbnail ? `<img src="${cameraThumbnail}" style="width:100%;height:100%;object-fit:cover;" onerror="this.style.display='none';" />` : ``}
+          </div>
           <div style="
             position: absolute;
-            top: 3px;
+            top: -4px;
-            right: 3px;
+            right: -4px;
-            width: 6px;
+            width: 10px;
-            height: 6px;
+            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>
           <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);
+            border-top: 8px solid #0ea5e9;
-          margin-top: -1px;
+            margin: -2px auto 0;
-          filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
           "></div>
-    ` : isCamera ? `` : `
+        </div>
+    ` : `
         <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};

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

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