`public/groups.html`

35 lines
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>BubbesBlock — Groups</title><link rel="stylesheet" href="/styles.css" />
</head><body>
<div id="hdr"></div>
<div class="wrap"><div id="left"></div><main class="col-center" id="main"></main><div id="right"></div></div>
<script>window.__bbAutoInit = false;</script>
<script src="/chrome.js"></script><script src="/app.js"></script>
<script>
function tile(g){
  return `<div class="tile" data-grp="${g.slug}">
    <span class="lg" style="background:${g.color||'#3a7d5d'}">${g.emoji||'👥'}</span>
    <div class="main"><b>${g.name}</b><div class="meta2"><span class="mem">${g.members}</span> members</div>
      <div class="meta2" style="margin-top:4px">${g.blurb||''}</div></div>
    <div class="act"><button class="${g.youJoined?'on':''}" data-join="${g.slug}">${g.youJoined?'Joined ✓':'Join'}</button></div>
  </div>`;
}
Promise.all([fetch('/api/me',{credentials:'same-origin'}).then(r=>r.json()), fetch('/api/groups',{credentials:'same-origin'}).then(r=>r.json())]).then(([m,d])=>{
  document.getElementById('hdr').innerHTML=topbar(m.me);
  document.getElementById('left').innerHTML=leftRail(m.me);
  document.getElementById('right').innerHTML=rightRail(m.me);
  document.getElementById('main').innerHTML='<div class="listhd">👥 Your Block · Groups</div>'+(d.groups||[]).map(tile).join('');
  BB.init();
});
document.addEventListener('click', async e=>{
  const b=e.target.closest('[data-join]'); if(!b) return;
  if(!(await BB.ensureAuth())) return;
  try{ const r=await BB.api.post(`/api/groups/${b.dataset.join}/join`,{});
    b.classList.toggle('on',r.joined); b.textContent=r.joined?'Joined ✓':'Join';
    const m=b.closest('.tile').querySelector('.mem'); if(m) m.textContent=r.members;
  }catch{ BB.toast('Try again'); }
});
</script></body></html>