update frontend

src/App.jsx

@@ -6,6 +6,7 @@ import PostList from "./components/Posts/PostList";
 const MapView = React.lazy(() => import("./components/Map/MapView"));
 
 const THEME_KEY = "sociowire:theme";
+const ACTIVE_CHATS_KEY = "sociowire:activeChats";
 
 export default function App() {
   const [theme, setTheme] = useState("blue");
@@ -52,6 +53,29 @@ export default function App() {
     }
   }, [theme]);
 
+  // Chats actifs (s'ajoutent quand on clique sur Contacts)
+  const [activeChats, setActiveChats] = useState([]);
+
+  useEffect(() => {
+    try {
+      const saved = localStorage.getItem(ACTIVE_CHATS_KEY);
+      if (saved) setActiveChats(JSON.parse(saved));
+    } catch {}
+  }, []);
+
+  useEffect(() => {
+    try {
+      localStorage.setItem(ACTIVE_CHATS_KEY, JSON.stringify(activeChats));
+    } catch {}
+  }, [activeChats]);
+
+  // Ouvrir un chat (simulé ici par un clic sur Contacts)
+  const openChat = (name) => {
+    if (!activeChats.includes(name)) {
+      setActiveChats(prev => [...prev, name]);
+    }
+  };
+
   return (
     <div className="app-root">
       <TopBar theme={theme} onChangeTheme={setTheme} />
@@ -81,20 +105,34 @@ export default function App() {
                 onSelectPost={setSelectedPost}
               />
             </div>
-
-            <div className="chat-panel">
-              <div className="chat-header">CHAT</div>
-              <ul className="chat-users">
-                <li>Yan</li>
-                <li>Marc</li>
-                <li>Fiso</li>
-              </ul>
-            </div>
+            {/* CHAT PANEL SUPPRIMÉ */}
           </div>
         </div>
 
         <div style={{ height: 18 }} />
+
+        {/* Barre dynamique transparente : apparaît seulement s’il y a des chats */}
+        {activeChats.length > 0 && (
+          <div className="bottom-bar">
+            <div className="bottom-left">
+              {activeChats.map((name, idx) => (
+                <div key={idx} className="bottom-chat">
+                  <div className="chat-avatar">👤</div>
+                  <span className="chat-name">{name}</span>
+                  <button className="bottom-remove" onClick={() => setActiveChats(prev => prev.filter(n => n !== name))}>✕</button>
+                </div>
+              ))}
+            </div>
+            <div className="bottom-right">
+              <div className="bottom-contact" onClick={() => openChat("Contacts")}>
+                <span className="contact-icon">👥</span>
+                <span className="contact-text">Contacts</span>
+                <span className="contact-online">34/84</span>
+              </div>
+            </div>
+          </div>
+        )}
       </div>
     </div>
   );
-}
+}