Round 4: hidden-msg pagination, iOS audio unlock, iOS long-press callout, draft hardening, pinned-by

Older-messages pagination (couple of chats wouldn't scroll back): the thread query
    returned the latest 40 rows and JS filtered out hidden (delete-for-me) messages
    AFTER the LIMIT, so a chat with a hidden recent message returned <40 → the client
    read that as "no older history." Now excluded in SQL (repos.thread /
    threadByConversation take the viewer id), so a page is always 40 VISIBLE rows.
    Verified locally: hide 3 recent → page still returns 40 (older ones fill in).
#2  iOS in-chat tone was silent: WebAudio context is created suspended and only
    resumes inside a user gesture. Added unlockAudio() on first tap/click (resume +
    0-gain blip), re-armed each gesture so a background→foreground re-suspend recovers.
#9  Long-press "works once then stops" on images was iOS's native touch-callout
    (Save Image / selection magnifier) hijacking the gesture. Disabled
    -webkit-touch-callout/user-select on #msgs bubbles; added a Save action to the
    sheet so image-saving isn't lost.
#13 Pin/unpin WAS being audited (verified: message.pin in /api/audit) — there's just
    no in-app viewer. Surfaced "Pinned by X" in the pinned bar for immediate context.
#14 Hardened draft save: it now runs BEFORE maybeAutocorrect/autoGrow (wrapped) in the
    input handler, so a throw there can't skip persisting the draft.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

server/public/home.html

@@ -710,6 +710,11 @@
   /* Belt-and-suspenders: cap ANY image inside a message bubble so a message can never momentarily balloon
      the thread to thousands of px while a large picture loads at its natural size (the "stretch" glitch). */
   .convo-msgs img,.bubble img{max-height:340px;max-width:100%;height:auto;}
+  /* #9: disable iOS's native touch-callout on message bubbles — the "Save Image"/text-selection magnifier
+     that pops on touch-and-hold was hijacking our long-press action sheet (it worked once, then iOS's callout
+     took over). Actions live in the long-press sheet now (incl. Save for images) and Copy for text. */
+  #msgs .bubble{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;}
+  #msgs .bubble img{-webkit-user-drag:none;}
   .att-file{display:inline-flex;align-items:center;gap:.4rem;background:rgba(0,0,0,.06);border:1px solid var(--line);border-radius:8px;padding:.4rem .6rem;color:inherit;text-decoration:none;font-size:.85rem;margin:.15rem 0;max-width:240px;}
   .att-file span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
   .att-file-native{cursor:pointer;-webkit-user-select:none;user-select:none;}
@@ -2302,6 +2307,7 @@ function msgMenuItems(m){
   if(mine && m.body && !m.poll && !m.deleted) items.push({ic:'edit', label:'Edit', fn:()=>startEdit(m)}); // #14: reachable on mobile too (long-press), not just desktop hover
   if((m.body||m.attachment) && !m.poll) items.push({ic:'arrowRight', label:'Forward', fn:()=>enterSelect(m.id)});
   if(m.body) items.push({ic:'copy', label:'Copy', fn:()=>copyMessageText(m)});
+  if(m.attachment && !m.deleted) items.push({ic:'download', label:'Save', fn:()=>saveAttachment(m)}); // #9: native long-press "Save" is disabled now, so offer Save explicitly
   if(!m.deleted && !m.poll) items.push({ic:(m.pinned?'pinOff':'pin'), label:(m.pinned?'Unpin':'Pin'), fn:()=>pinMessage(m.id, !m.pinned)}); // #13
   items.push({ic:'trash', label:'Delete', danger:true, fn:()=>openDeleteDialog(m)}); // #18: branded dialog offers "for me" / "for everyone"
   return items;
@@ -2328,6 +2334,12 @@ function openMsgActionSheet(m){
     if(ab){ const it=items[+ab.dataset.i]; close(); try{ it.fn(); }catch(_){} return; }
   });
 }
+// Save/download a message's attachment. Builds a transient <a download> and clicks it — the same path the
+// lightbox/download uses, so on native the Capacitor a[download] interceptor saves it to Files/Photos.
+function saveAttachment(m){
+  if(!m||!m.attachment) return;
+  try{ const a=document.createElement('a'); a.href='/files/'+m.attachment.id; a.download=m.attachment.name||'file'; if(m.attachment.mime) a.setAttribute('data-mime', m.attachment.mime); document.body.appendChild(a); a.click(); setTimeout(()=>{ try{ a.remove(); }catch(_){} },0); }catch(_){}
+}
 function openMsgMore(msgId, anchor){
   document.querySelectorAll('.msg-more-menu').forEach(x=>x.remove());
   if(anchor && anchor._open){ anchor._open=false; return; }             // clicking ⋮ again closes it
@@ -2731,8 +2743,9 @@ function renderPinnedBar(){
   const prev = m.deleted ? 'Message deleted' : (isGifUrl(m.body)?'🎞️ GIF':(m.body ? (m.body.length>90?m.body.slice(0,90)+'…':m.body) : (m.attachment?('📎 '+(m.attachment.name||'Attachment')):'Message')));
   // #13: when more than one message is pinned, a ‹ 1 of n › pager on the right walks through them all.
   const pager = n>1 ? ('<div class="pb-pager"><button class="pb-prev" title="Previous pin">'+ic('chevronLeft',15)+'</button><span class="pb-count">'+(PIN_IX+1)+' of '+n+'</span><button class="pb-next" title="Next pin">'+ic('chevronRight',15)+'</button></div>') : '';
+  const pinHdr = m.pinnedBy ? ('Pinned by '+pEsc(m.pinnedBy)) : 'Pinned'; // #13: show WHO pinned it (accountability)
   el.innerHTML='<span class="pb-ic">'+ic('pin',15)+'</span>'
-    +'<div class="pb-body"><div class="pb-h">Pinned'+(m.fromName?(' · '+pEsc(m.fromName)):'')+'</div><div class="pb-txt">'+pEsc(prev)+'</div></div>'
+    +'<div class="pb-body"><div class="pb-h">'+pinHdr+'</div><div class="pb-txt">'+pEsc(prev)+'</div></div>'
     +pager
     +'<button class="pb-unpin" title="Unpin">'+ic('x',15)+'</button>';
   el.style.display='flex';
@@ -3476,7 +3489,7 @@ async function openConvo(kind,id){
   if(inpEl){
     const _d=getDraft(kind,id); if(_d){ inpEl.value=_d; autoGrow(inpEl); } // restore unsent draft
     inpEl.addEventListener('paste', onPaste);
-    inpEl.addEventListener('input', ()=>{ maybeAutocorrect(inpEl); autoGrow(inpEl); if(!editTarget) setDraft(kind,id,inpEl.value); noteTyping(); }); // auto-correct common typos, keep the draft in sync (#14: not while editing) + emit "typing…"
+    inpEl.addEventListener('input', ()=>{ if(!editTarget) setDraft(kind,id,inpEl.value); try{ maybeAutocorrect(inpEl); }catch(_){} autoGrow(inpEl); noteTyping(); }); // #14: SAVE THE DRAFT FIRST — if maybeAutocorrect/autoGrow ever throws, the draft still persists. Skips only while editing.
     inpEl.addEventListener('blur', ()=>{ stopTyping(); setTimeout(()=>{ const a=document.activeElement; const stillTyping=a&&(a.tagName==='TEXTAREA'||a.tagName==='INPUT'); if(!stillTyping && window.__bzResetKb) window.__bzResetKb(); }, 120); }); // #1: composer lost focus → keyboard is closing → drop the --kb lift so no empty gap remains
     inpEl.addEventListener('keydown', (e)=>{ if(e.key==='Enter' && !e.shiftKey && !isMobileUA()){ if(mentionItems && mentionItems.length) return; e.preventDefault(); sendMessage(); } }); // Desktop: Enter sends, Shift+Enter = newline. Mobile: the Return key inserts a newline (default) — you send with the send button, like every native chat app.
     // Desktop: LEFT-click a red-squiggled word → native spelling suggestions right there (the shell
@@ -4367,7 +4380,20 @@ function notify(title, body, kind, id, opts){
     setTimeout(()=>{ try{ n.close(); }catch(_){} }, 8000);
   }catch(_){}
 }
-let _audioCtx=null;
+let _audioCtx=null, _audioUnlocked=false;
+// iOS/Safari create the AudioContext SUSPENDED and only let resume() succeed from INSIDE a real user
+// gesture; a later programmatic resume() (e.g. when a message arrives with no tap) silently stays suspended,
+// so playMsgTone/playPing produce nothing on iOS. Unlock it once on the first tap/click by resuming + playing
+// a 0-gain blip within the gesture; keep the listeners so a background→foreground (which re-suspends the
+// context on iOS) re-resumes it on the next touch. This is what makes #2's in-chat tone audible on iOS.
+function unlockAudio(){
+  try{
+    _audioCtx=_audioCtx||new (window.AudioContext||window.webkitAudioContext)();
+    if(_audioCtx.state==='suspended') _audioCtx.resume();
+    if(!_audioUnlocked){ const o=_audioCtx.createOscillator(), g=_audioCtx.createGain(); g.gain.value=0.00001; o.connect(g); g.connect(_audioCtx.destination); o.start(); o.stop(_audioCtx.currentTime+0.02); _audioUnlocked=true; }
+  }catch(_){}
+}
+['touchend','pointerdown','click','keydown'].forEach(ev=>window.addEventListener(ev, unlockAudio, {passive:true}));
 // Message chime: a crisp, recognizable rising two-note ("ti-doo") — louder + brighter than the
 // old single beep so it's catchy and noticed.
 function playPing(){