`public/notifications.html`

24 lines
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>BubbesBlock — Notifications</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>
Promise.all([fetch('/api/me',{credentials:'same-origin'}).then(r=>r.json()), fetch('/api/notifications',{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);
  let body;
  if(!m.you){ body='<div class="prose"><h1>🔔 Notifications</h1><p>Sign in to see your notifications.</p><button class="bb-btn" style="max-width:220px" onclick="BB.ensureAuth().then(()=>location.reload())">Sign in</button></div>'; }
  else if(!d.items.length){ body='<div class="prose"><h1>🔔 Notifications</h1><p>Nothing new yet — check back after the next block party.</p></div>'; }
  else { const su=u=>(typeof u==='string'&&/^(\/|https:\/\/)/.test(u))?u:'#'; body='<div class="listhd">🔔 Notifications</div>'+d.items.map(n=>`<a class="tile ${n.read?'':'unread'}" href="${su(n.link)}" style="${n.read?'':'background:var(--green-tint)'}"><span class="lg" style="background:var(--plum)">${({react:'❤️',comment:'💬',opportunity:'💼',event:'📅'})[n.type]||'🔔'}</span><div class="main"><b>${n.actor}</b> <span class="meta2" style="display:inline">${n.text}</span></div></a>`).join(''); }
  document.getElementById('main').innerHTML=body;
  BB.init();
  if(m.you && d.items.length) BB.api.post('/api/notifications/read',{}).then(()=>BB.updateBadges());
});
</script></body></html>