update frontend

src/App.jsx

@@ -7,7 +7,7 @@ const THEME_KEY = "sociowire:theme";
 export default function App() {
   const [theme, setTheme] = useState("dark");
 
-  // charge le thème depuis le localStorage au démarrage
+  // charge le thème au démarrage
   useEffect(() => {
     if (typeof window === "undefined") return;
     try {
@@ -23,7 +23,7 @@ export default function App() {
     }
   }, []);
 
-  // applique le thème + sauvegarde
+  // applique / sauvegarde le thème
   useEffect(() => {
     if (typeof window === "undefined") return;
     try {
@@ -39,7 +39,8 @@ export default function App() {
       <TopBar theme={theme} onChangeTheme={setTheme} />
       <div className="main-shell">
         <div className="map-shell">
-          <MapView />
+          {/* on passe le thème à la carte */}
+          <MapView theme={theme} />
         </div>
       </div>
     </div>

src/components/Map/MapView.jsx

@@ -15,7 +15,7 @@ import { useUserPosition } from "./useUserPosition";
 import { usePostsEngine } from "./usePostsEngine";
 import PostList from "../Posts/PostList";
 
-export default function MapView() {
+export default function MapView({ theme = "dark" }) {
   const {
     containerRef,
     mapRef,
@@ -23,7 +23,7 @@ export default function MapView() {
     expandedElRef,
     viewParams,
     hasLastView,
-  } = useMapCore();
+  } = useMapCore(theme);
 
   const [mainFilter, setMainFilter] = useState("All");
   const [timeFilter, setTimeFilter] = useState("RECENT");
@@ -88,7 +88,9 @@ export default function MapView() {
         if (msg.type === "new_post" && msg.post) {
           handleIncomingPost(msg.post);
         }
-      } catch {}
+      } catch {
+        // ignore
+      }
     };
     return () => ws && ws.close();
   }, [handleIncomingPost]);
@@ -99,13 +101,6 @@ export default function MapView() {
     map.flyTo({ center: userPosition, zoom: 9, speed: 1.2 });
   };
 
-  const handlePickCenter = () => {
-    const map = mapRef.current;
-    if (!map) return;
-    const center = map.getCenter();
-    setDraftCoords([center.lng, center.lat]);
-  };
-
   const handleOpenCreate = () => {
     setIsCreating(true);
     setDraftTitle("");
@@ -157,7 +152,9 @@ export default function MapView() {
     if (!map) return;
     const lng = post.lon ?? post.lng;
     const lat = post.lat ?? post.latitude;
-    if (lng && lat) map.flyTo({ center: [lng, lat], zoom: 8, speed: 1.4 });
+    if (typeof lng === "number" && typeof lat === "number") {
+      map.flyTo({ center: [lng, lat], zoom: 8, speed: 1.4 });
+    }
   };
 
   return (
@@ -165,7 +162,7 @@ export default function MapView() {
       <div ref={containerRef} className="map-container" />
       {status && <div className="map-status">{status}</div>}
 
-      {/* TOP BAR SIMPLIFIÉE */}
+      {/* TOP */}
       <div className="map-overlay map-overlay-top">
         <button className="chip-pill" onClick={handleSearchClick}>
           Look at…
@@ -241,7 +238,10 @@ export default function MapView() {
         <div className="map-overlay create-post-panel">
           <div className="create-post-header">
             <span>Create wire</span>
-            <button className="create-close" onClick={() => setIsCreating(false)}>
+            <button
+              className="create-close"
+              onClick={() => setIsCreating(false)}
+            >
               ✕
             </button>
           </div>
@@ -288,14 +288,18 @@ export default function MapView() {
           />
           {saveError && <div className="create-error">{saveError}</div>}
           <div className="create-actions">
-            <button className="chip-pill" onClick={handleSubmitPost} disabled={isSaving}>
+            <button
+              className="chip-pill"
+              onClick={handleSubmitPost}
+              disabled={isSaving}
+            >
               {isSaving ? "Posting..." : "Post as tommy"}
             </button>
           </div>
         </div>
       )}
 
-      {/* SOCIOWALL FIXE + CHAT */}
+      {/* SOCIOWALL + CHAT */}
       <div className="map-overlay map-overlay-wall">
         <div className="sociowall-panel">
           <div className="sociowall-header">Sociowall</div>

src/components/Map/useMapCore.js

@@ -4,7 +4,48 @@ import { LAST_VIEW_KEY } from "./mapConfig";
 import { getViewFromMap } from "./mapGeo";
 import { clearAllMarkers } from "./markerManager";
 
-export function useMapCore() {
+// renvoie le style MapLibre en fonction du thème
+function getBaseStyle(theme) {
+  const t = theme || "dark";
+  let tiles;
+
+  switch (t) {
+    case "light":
+      // fond clair
+      tiles = ["https://a.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png"];
+      break;
+    case "blue":
+      // style plus coloré
+      tiles = ["https://a.basemaps.cartocdn.com/voyager/{z}/{x}/{y}.png"];
+      break;
+    case "dark":
+    default:
+      // fond sombre (comme avant)
+      tiles = ["https://a.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png"];
+      break;
+  }
+
+  return {
+    version: 8,
+    sources: {
+      "carto-base": {
+        type: "raster",
+        tiles,
+        tileSize: 256,
+        attribution: "© OpenStreetMap contributors © CARTO",
+      },
+    },
+    layers: [
+      {
+        id: "carto-base-layer",
+        type: "raster",
+        source: "carto-base",
+      },
+    ],
+  };
+}
+
+export function useMapCore(theme) {
   const containerRef = useRef(null);
   const mapRef = useRef(null);
 
@@ -18,31 +59,13 @@ export function useMapCore() {
   });
   const [hasLastView, setHasLastView] = useState(false);
 
+  // création de la map
   useEffect(() => {
     if (!containerRef.current) return;
 
     const map = new maplibregl.Map({
       container: containerRef.current,
-      style: {
+      style: getBaseStyle(theme || "dark"),
-        version: 8,
-        sources: {
-          "carto-dark": {
-            type: "raster",
-            tiles: [
-              "https://a.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png",
-            ],
-            tileSize: 256,
-            attribution: "© OpenStreetMap contributors © CARTO",
-          },
-        },
-        layers: [
-          {
-            id: "carto-dark-layer",
-            type: "raster",
-            source: "carto-dark",
-          },
-        ],
-      },
       center: [-95, 40],
       zoom: 3.5,
       pitch: 0,
@@ -102,8 +125,17 @@ export function useMapCore() {
       map.remove();
       mapRef.current = null;
     };
+    // on ne met PAS theme ici, sinon la map serait recréée
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  // quand le thème change → on change juste le style de la map
+  useEffect(() => {
+    const map = mapRef.current;
+    if (!map) return;
+    map.setStyle(getBaseStyle(theme || "dark"));
+  }, [theme]);
+
   return {
     containerRef,
     mapRef,