canastack-admin
/
sw-fe
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update frontend

This commit is contained in:
Your Name 2025-12-22 02:16:28 -05:00
parent d25bbf21a2
commit 57580e418e
1 changed files with 28 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
src/App.jsx
View File

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