update frontend

src/components/Posts/WallPage.jsx

@@ -0,0 +1,68 @@
+import React, { useEffect, useMemo, useState } from "react";
+import { fetchPosts } from "../../api/client";
+
+function useHashParams() {
+  const [hash, setHash] = useState(window.location.hash || "");
+  useEffect(() => {
+    const onHash = () => setHash(window.location.hash || "");
+    window.addEventListener("hashchange", onHash);
+    return () => window.removeEventListener("hashchange", onHash);
+  }, []);
+  const q = new URLSearchParams(hash.replace(/^#wall\??/, ""));
+  return { hash, params: q };
+}
+
+export default function WallPage() {
+  const { params } = useHashParams();
+  const [posts, setPosts] = useState([]);
+  const [loading, setLoading] = useState(true);
+
+  const filters = useMemo(() => {
+    const f = {};
+    if (params.get("category")) f.category = params.get("category");
+    if (params.get("sub")) f.subCategory = params.get("sub");
+    if (params.get("time")) f.time = params.get("time");
+    if (params.get("lat")) f.lat = Number(params.get("lat"));
+    if (params.get("lon")) f.lon = Number(params.get("lon"));
+    if (params.get("r")) f.radiusKm = Number(params.get("r"));
+    return f;
+  }, [params]);
+
+  useEffect(() => {
+    let off = false;
+    (async () => {
+      try {
+        setLoading(true);
+        const data = await fetchPosts(filters);
+        if (!off) setPosts(Array.isArray(data) ? data : []);
+      } finally {
+        if (!off) setLoading(false);
+      }
+    })();
+    return () => {
+      off = true;
+    };
+  }, [filters]);
+
+  return (
+    <section className="wall-page">
+      <div className="wall-header">
+        <button className="wall-back" onClick={() => (window.location.hash = "")}>
+          ← Back to map
+        </button>
+        <div className="wall-title">SOCIOWALL — full view</div>
+      </div>
+
+      <div className="wall-content">
+        {loading && <div>Loading…</div>}
+        {!loading && posts.length === 0 && <div>No posts with these filters.</div>}
+        {posts.map((p) => (
+          <article key={p.id ?? p._id} className="wall-post">
+            <h3>{p.title || "Post"}</h3>
+            <p>{p.snippet || p.body || p.text || ""}</p>
+          </article>
+        ))}
+      </div>
+    </section>
+  );
+}

src/styles/overlays.css

@@ -1,7 +1,6 @@
 /* ==========================================
-   SOCIOWIRE — OVERLAYS AUTOUR DE LA MAP
+   SOCIOWIRE — OVERLAYS (TOP / LEFT / RIGHT /
-   (TOP / LEFT / RIGHT / BOTTOM / MY SPOT /
+   BOTTOM / MY SPOT / CREATE PANEL)
-   CREATE PANEL)
    ========================================== */
 
 .map-overlay {
@@ -14,7 +13,7 @@
   pointer-events: auto;
 }
 
-/* --------- TOP : "Look at..." + "Place your wire" --------- */
+/* --------- TOP --------- */
 
 .map-overlay-top {
   top: 0.7rem;
@@ -25,25 +24,18 @@
   align-items: center;
 }
 
-.chip-pill {
+.lookat-box {
-  background: radial-gradient(circle at 30% 30%, #0f172a, #020617);
+  font-size: 0.75rem;
-  border: 1px solid rgba(148, 163, 184, 0.9);
+  color: #93c5fd;
-  color: #e5e7eb;
-  padding: 0.45rem 1.1rem;
-  font-size: 0.8rem;
-  border-radius: 999px;
-  cursor: pointer;
-  box-shadow:
-    0 6px 16px rgba(0, 0, 0, 0.85),
-    0 0 16px rgba(56, 189, 248, 0.4);
 }
 
-.chip-pill:first-child {
+.wire-title {
-  /* "Look at..." un peu plus large, façon bannière */
+  font-size: 0.75rem;
-  padding-inline: 1.4rem;
+  opacity: 0.9;
+  color: #93c5fd;
 }
 
-/* --------- LEFT : filtres temps (Now / Today / Recently / Past) --------- */
+/* --------- LEFT --------- */
 
 .map-overlay-left {
   left: 0.7rem;
@@ -51,23 +43,10 @@
   transform: translateY(-50%);
   display: flex;
   flex-direction: column;
-  gap: 0.55rem;
+  gap: 0.5rem;
 }
 
-.chip-round {
+/* --------- RIGHT --------- */
-  background: radial-gradient(circle at 30% 30%, #020617, #020617);
-  border-radius: 999px;
-  border: 1px solid rgba(148, 163, 184, 0.9);
-  color: #e5e7eb;
-  padding: 0.5rem 1rem;
-  font-size: 0.78rem;
-  cursor: pointer;
-  box-shadow:
-    0 5px 14px rgba(0, 0, 0, 0.8),
-    0 0 14px rgba(56, 189, 248, 0.35);
-}
-
-/* --------- RIGHT : filtres principaux (All / News / Friends / Events / Market) --------- */
 
 .map-overlay-right {
   right: 0.7rem;
@@ -75,19 +54,17 @@
   transform: translateY(-50%);
   display: flex;
   flex-direction: column;
-  gap: 0.55rem;
+  gap: 0.5rem;
 }
 
-/* Quand un bouton est sélectionné (temps ou catégorie) */
+/* Bouton principal sélectionné */
 .chip-selected {
-  background: linear-gradient(135deg, #1d4ed8, #0ea5e9);
+  background: linear-gradient(135deg, #2563eb, #0ea5e9);
   border-color: #7dd3fc;
-  box-shadow:
+  box-shadow: 0 0 20px rgba(56, 189, 248, 0.55);
-    0 0 20px rgba(56, 189, 248, 0.55),
-    0 8px 22px rgba(0, 0, 0, 0.9);
 }
 
-/* --------- BOTTOM : sous-catégories en arc --------- */
+/* --------- BOTTOM — ARC AUTOUR DU GLOBE --------- */
 
 .map-overlay-bottom {
   bottom: 3.2rem;
@@ -97,51 +74,31 @@
   gap: 0.4rem;
 }
 
-.chip-egg {
+/* courbure inversée : centre plus bas, côtés plus hauts */
-  background: rgba(0, 10, 30, 0.95);
-  border-radius: 999px;
-  border: 1px solid rgba(56, 189, 248, 0.55);
-  color: #e5e7eb;
-  padding: 0.4rem 0.9rem;
-  font-size: 0.78rem;
-  cursor: pointer;
-  box-shadow:
-    0 5px 14px rgba(0, 0, 0, 0.8),
-    0 0 14px rgba(56, 189, 248, 0.4);
-}
-
-/* effet de courbe autour du bas de la carte
-   (5 premiers œufs, les autres restent droits) */
 .map-overlay-bottom .chip-egg:nth-child(1) {
-  transform: translateY(-10px) rotate(-14deg);
+  transform: translateY(-8px) rotate(-12deg);
 }
 .map-overlay-bottom .chip-egg:nth-child(2) {
-  transform: translateY(-6px) rotate(-7deg);
+  transform: translateY(-4px) rotate(-6deg);
 }
 .map-overlay-bottom .chip-egg:nth-child(3) {
-  transform: translateY(-2px) rotate(0deg);
+  transform: translateY(0px) rotate(0deg);
 }
 .map-overlay-bottom .chip-egg:nth-child(4) {
-  transform: translateY(-6px) rotate(7deg);
+  transform: translateY(-4px) rotate(6deg);
 }
 .map-overlay-bottom .chip-egg:nth-child(5) {
-  transform: translateY(-10px) rotate(14deg);
+  transform: translateY(-8px) rotate(12deg);
-}
-
-/* œuf sélectionné */
-.chip-egg-active {
-  background: linear-gradient(135deg, #1d4ed8, #0ea5e9);
-  border-color: #7dd3fc;
 }
 
 /* --------- BOUTON "MY SPOT" --------- */
 
 .map-overlay-myloc {
   right: 0.7rem;
-  bottom: 6.2rem;
+  bottom: 6rem;
 }
 
-/* --------- CROSSHAIR (si tu le remets plus tard) --------- */
+/* --------- CROSSHAIR SUR LA MAP --------- */
 
 .map-crosshair {
   left: 50%;
@@ -178,7 +135,7 @@
   height: 70%;
 }
 
-/* --------- CREATE POST PANEL (fenêtre 1/5 du bas) --------- */
+/* --------- CREATE POST PANEL --------- */
 
 .create-post-panel {
   left: 50%;
@@ -215,16 +172,16 @@
   cursor: pointer;
 }
 
-.crosshair-label {
-  font-size: 0.75rem;
-  color: #cbd5f5;
-}
-
 .create-row {
   display: flex;
   align-items: center;
   gap: 0.5rem;
-  margin: 0.35rem 0;
+  margin-bottom: 0.4rem;
+}
+
+.crosshair-label {
+  font-size: 0.75rem;
+  color: #cbd5f5;
 }
 
 .create-row select {
@@ -270,3 +227,35 @@
   display: flex;
   justify-content: flex-end;
 }
+
+/* --------- STYLES DES CHIPS --------- */
+
+.chip-round,
+.chip-pill,
+.chip-egg,
+.chip-hex {
+  background: rgba(15, 23, 42, 0.96);
+  border: 1px solid rgba(148, 163, 184, 0.85);
+  color: #e5e7eb;
+  padding: 0.45rem 0.9rem;
+  font-size: 0.78rem;
+  border-radius: 999px;
+  cursor: pointer;
+  box-shadow:
+    0 5px 12px rgba(0, 0, 0, 0.7),
+    0 0 12px rgba(56, 189, 248, 0.35);
+}
+
+.chip-egg {
+  background: rgba(0, 10, 30, 0.9);
+  border: 1px solid rgba(56, 189, 248, 0.55);
+}
+
+.chip-egg-active {
+  background: linear-gradient(135deg, #1d4ed8, #0ea5e9);
+  border-color: #7dd3fc;
+}
+
+.chip-hex {
+  border-radius: 0.65rem;
+}

src/styles/posts.css

@@ -11,7 +11,7 @@
   gap: 0.6rem;
   align-items: stretch;
   pointer-events: none;
-  z-index: 10; /* un peu plus bas que les autres overlays */
+  z-index: 10;
 }
 
 .map-overlay-wall * {
@@ -22,8 +22,8 @@
 
 .sociowall-panel {
   flex: 1.5;
-  min-height: 90px;
+  min-height: 110px;
-  max-height: 150px;   /* HAUTEUR FIXE → n’envahit pas la map */
+  max-height: 260px;   /* PLUS GRAND → plus de posts avant scroll */
   background: rgba(15, 23, 42, 0.96);
   border-radius: 14px;
   border: 1px solid rgba(148, 163, 184, 0.9);
@@ -48,7 +48,7 @@
 
 .post-list {
   flex: 1;
-  overflow-y: auto;     /* c’est ICI que ça scrolle */
+  overflow-y: auto;
   padding-right: 0.15rem;
 }
 
@@ -142,7 +142,7 @@
 .chat-panel {
   width: 150px;
   min-width: 130px;
-  max-height: 150px;
+  max-height: 260px;
   background: rgba(15, 23, 42, 0.96);
   border-radius: 14px;
   border: 1px solid rgba(148, 163, 184, 0.9);

src/styles/wall.css

@@ -0,0 +1,61 @@
+/* ===== PAGE SOCIOWALL (plein écran, sous la map) ===== */
+
+.wall-page {
+  min-height: 100vh;
+  background: #060b1a;
+  color: #e5e7eb;
+  display: flex;
+  flex-direction: column;
+}
+
+.wall-header {
+  position: sticky;
+  top: 0;
+  z-index: 5;
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  padding: 0.6rem 0.8rem;
+  background: #0b1020;
+  border-bottom: 1px solid #1f2937;
+}
+
+.wall-title {
+  font-weight: 700;
+  font-size: 0.95rem;
+  letter-spacing: .02em;
+}
+
+.wall-back {
+  padding: 0.35rem 0.8rem;
+  font-size: 0.8rem;
+  border-radius: 999px;
+  border: 1px solid #60a5fa;
+  background: #1e293b;
+  color: #dbeafe;
+  cursor: pointer;
+}
+
+.wall-content {
+  padding: 0.8rem;
+  display: grid;
+  gap: 0.45rem;
+}
+
+/* réutilise l’esthétique du mini Sociowall mais à l’aise */
+.wall-post {
+  border-radius: 12px;
+  border: 1px solid rgba(55,65,81,.9);
+  background: rgba(15,23,42,.92);
+  padding: 0.55rem 0.7rem;
+  font-size: .9rem;
+}
+.wall-post h3 {
+  margin: 0 0 .2rem 0;
+  font-size: 1rem;
+}
+.wall-post p {
+  margin: 0;
+  font-size: .85rem;
+  opacity: .95;
+}