update frontend

src/App.jsx

@@ -52,8 +52,9 @@ export default function App() {
     }
   }, [theme]);
 
-  // Chats actifs (s'ajoutent quand on clique sur Contacts)
+  // Chats actifs (s'ajoutent quand on clique sur un contact)
   const [activeChats, setActiveChats] = useState([]);
+  const [showContactsList, setShowContactsList] = useState(false);
 
   useEffect(() => {
     try {
@@ -73,8 +74,11 @@ export default function App() {
     if (!activeChats.includes(name)) {
       setActiveChats(prev => [...prev, name]);
     }
+    setShowContactsList(false);
   };
 
+  const contactsList = ["Amely", "Nancy", "Stéphanie"];
+
   return (
     <div className="app-root">
       <TopBar theme={theme} onChangeTheme={setTheme} />
@@ -110,24 +114,33 @@ export default function App() {
 
         <div style={{ height: 18 }} />
 
-        {/* Barre toujours visible, se remplit progressivement */}
-        <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>
+        {/* Bouton Contacts flottant en bas à droite */}
+        <button className="contacts-float-btn" onClick={() => setShowContactsList(!showContactsList)}>
+          <span className="contact-icon">👥</span>
+          Contacts
+        </button>
+
+        {/* Liste des contacts (dropdown) */}
+        {showContactsList && (
+          <div className="contacts-dropdown">
+            {contactsList.map((name, idx) => (
+              <div key={idx} className="contact-item" onClick={() => openChat(name)}>
+                <div className="contact-avatar">👤</div>
+                <span>{name}</span>
               </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>
+        )}
+
+        {/* Bulles de chats actifs flottantes à côté du bouton */}
+        <div className="active-chats-bubbles">
+          {activeChats.map((name, idx) => (
+            <div key={idx} className="chat-bubble">
+              <div className="chat-avatar">👤</div>
+              <span className="chat-name">{name}</span>
+              <button className="bubble-remove" onClick={() => setActiveChats(prev => prev.filter(n => n !== name))}>✕</button>
             </div>
-          </div>
+          ))}
         </div>
       </div>
     </div>