`public/inbox.html`

42 lines
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>BubbesBlock — Inbox</title><link rel="stylesheet" href="/styles.css" />
<style>
.thread{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:14px;margin-top:12px}
.msg{max-width:75%;padding:9px 13px;border-radius:16px;margin:6px 0;font-size:14.5px;line-height:1.4}
.msg.them{background:#f0f2f4}
.msg.me{background:var(--green);color:#fff;margin-left:auto}
.threadbox{display:flex;gap:8px;margin-top:10px}
.threadbox input{flex:1;border:1px solid var(--line);border-radius:22px;padding:10px 15px;outline:none}
.threadbox button{background:var(--green);color:#fff;font-weight:700;padding:0 18px;border-radius:22px}
</style>
</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>
let convId=null;
async function openThread(id, peer){
  convId=id;
  const r=await BB.api.get('/api/inbox/'+id);
  document.getElementById('thread').innerHTML=`<b>${peer}</b>`+r.messages.map(m=>`<div class="msg ${m.from_me?'me':'them'}">${m.body}</div>`).join('')+
    `<div class="threadbox"><input id="bb-msg" placeholder="Message…" /><button id="bb-msend">Send</button></div>`;
  const inp=document.getElementById('bb-msg'); const send=async()=>{ const b=inp.value.trim(); if(!b) return; await BB.api.post(`/api/inbox/${id}/messages`,{body:b}); openThread(id,peer); };
  document.getElementById('bb-msend').onclick=send; inp.addEventListener('keydown',e=>{if(e.key==='Enter')send();});
}
Promise.all([fetch('/api/me',{credentials:'same-origin'}).then(r=>r.json()), fetch('/api/inbox',{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>✉️ Messages</h1><p>Sign in to see your inbox.</p><button class="bb-btn" style="max-width:220px" onclick="BB.ensureAuth().then(()=>location.reload())">Sign in</button></div>'; }
  else if(!d.conversations.length){ body='<div class="prose"><h1>✉️ Messages</h1><p>Your inbox is empty. Respond to an Opportunity Alert to start a conversation.</p></div>'; }
  else { body='<div class="listhd">✉️ Messages</div>'+d.conversations.map(c=>`<div class="tile" data-conv="${c.id}" data-peer="${c.peer}"><span class="ava ${c.peer_color||'a3'}" style="width:48px;height:48px;font-size:17px">${c.peer_initials||'?'}</span><div class="main"><b>${c.peer}</b><div class="meta2">${(c.last||'').slice(0,60)}</div></div></div><div id="thread-${c.id}"></div>`).join('')+'<div class="thread" id="thread" style="display:none"></div>'; }
  document.getElementById('main').innerHTML=body;
  BB.init();
});
document.addEventListener('click', e=>{ const t=e.target.closest('[data-conv]'); if(!t) return; const th=document.getElementById('thread'); th.style.display='block'; openThread(t.dataset.conv, t.dataset.peer); th.scrollIntoView({behavior:'smooth'}); });
</script></body></html>