Mail: faster open/delete (instant delete and archive, separate background IMAP connection, one-fetch message read, bodies saved on device with prefetch); Lyrics: no sweep across line-synced lines

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

public/mail.js

@@ -16,7 +16,8 @@ function mcPut(k, v) {
     localStorage.setItem(ix, JSON.stringify(list));
   } catch { /* storage full or blocked: go without */ }
 }
-function mcClear() { try { for (const k of Object.keys(localStorage)) if (k.startsWith('mc:' + (ME ? ME.id : '') + ':')) localStorage.removeItem(k); } catch {} }
+function mcClear() { if (typeof mbClear === 'function') mbClear();
+  try { for (const k of Object.keys(localStorage)) if (k.startsWith('mc:' + (ME ? ME.id : '') + ':')) localStorage.removeItem(k); } catch {} }
 const mailFrom = f => (f && (f.name || f.address)) || '';
 const mailWhen = iso => {
   const d = new Date(iso), now = new Date(); if (isNaN(d)) return '';
@@ -234,7 +235,7 @@ async function mailLoadList(reset) {
     if (!$('#mrows') || mail.folder !== folder) return;
     mail.items = showing ? mailApplyMine(r.items) : mail.items.concat(mailApplyMine(r.items)); mail.more = r.more; mail.next = r.next;
     if (first) mcPut('l:' + folder, { items: r.items, more: r.more, next: r.next });
-    mailDrawList();
+    mailDrawList(); mailPrefetch();
   } catch (e) { if (showing) return; const el = $('#mrows'); if (el) el.innerHTML = `<p class="err" style="padding:12px">${esc(e.message)}</p>`; if (/Connect again/.test(e.message)) { mail.st = null; mcClear(); setTimeout(route, 1200); } }
 }
 function mailMarkSel(id) { document.querySelectorAll('a.mrow').forEach(a => a.classList.toggle('sel', !!id && decodeURIComponent(a.getAttribute('href').slice(9)) === id)); }
@@ -248,8 +249,34 @@ function mailDrawList() {
   if ($('#mmb')) $('#mmb').onclick = () => mailLoadList(false);
 }
 
+// Opened messages are also kept on this device (IndexedDB, the newest 80), so one you have read opens at once, even offline. A message's text never
+// changes, so only its read/flagged state is taken fresh (from the list). Cleared with the rest of the saved mail when you disconnect or sign out.
+const mbDB = () => mbDB.p || (mbDB.p = new Promise(ok => { try { const r = indexedDB.open('hub-mail', 1); r.onupgradeneeded = () => r.result.createObjectStore('b'); r.onsuccess = () => ok(r.result); r.onerror = () => ok(null); } catch { ok(null); } }));
+const mbKey = id => (ME ? ME.id : '') + ':' + id;
+async function mbGet(id) { const db = await mbDB(); if (!db) return null; return new Promise(ok => { try { const r = db.transaction('b').objectStore('b').get(mbKey(id)); r.onsuccess = () => ok(r.result && r.result.m || null); r.onerror = () => ok(null); } catch { ok(null); } }); }
+async function mbPut(id, m) {
+  const db = await mbDB(); if (!db || JSON.stringify(m).length > 1.5e6) return;
+  try {
+    const st = db.transaction('b', 'readwrite').objectStore('b'); st.put({ t: Date.now(), m }, mbKey(id));
+    const all = st.getAll(), keys = st.getAllKeys();
+    keys.onsuccess = () => { const rows = keys.result.map((k, i) => [k, all.result[i].t]).sort((x, y) => y[1] - x[1]); for (const [k] of rows.slice(80)) st.delete(k); }; // (all was asked first, so it is done when keys is)
+  } catch {}
+}
+async function mbClear() { const db = await mbDB(); if (db) try { db.transaction('b', 'readwrite').objectStore('b').clear(); } catch {} }
 const mailCache = new Map(); // message id -> { t, p: promise }: a message you point at or tap is fetched once and kept for a minute
-const mailFetch = id => { const c = mailCache.get(id); if (c && Date.now() - c.t < 60e3) return c.p; const p = jfetch('/api/mail/message?id=' + encodeURIComponent(id)); mailCache.set(id, { t: Date.now(), p }); p.catch(() => mailCache.delete(id)); if (mailCache.size > 30) mailCache.delete(mailCache.keys().next().value); return p; };
+const mailFetch = id => {
+  const c = mailCache.get(id); if (c && Date.now() - c.t < 60e3) return c.p;
+  const p = mbGet(id).then(saved => {
+    if (saved) { const it = mail.items.find(x => x.id === id); return it ? { ...saved, read: it.read, flagged: it.flagged } : saved; } // (opens at once)
+    return jfetch('/api/mail/message?id=' + encodeURIComponent(id)).then(m => { mbPut(id, m); return m; });
+  });
+  mailCache.set(id, { t: Date.now(), p }); p.catch(() => mailCache.delete(id)); if (mailCache.size > 30) mailCache.delete(mailCache.keys().next().value); return p;
+};
+let mailPre = 0; // fetches the newest unread-or-recent messages of the open list one at a time, so they are already here when tapped
+async function mailPrefetch() {
+  const run = ++mailPre, ids = mail.items.slice(0, 10).map(x => x.id);
+  for (const id of ids) { if (run !== mailPre || !location.hash.startsWith('#/mail')) return; try { if (!(await mbGet(id))) await mailFetch(id); } catch {} }
+}
 document.addEventListener('pointerover', e => { const a = e.target.closest && e.target.closest('a.mrow'); if (a && a.getAttribute('href').startsWith('#/mail/m/')) mailFetch(decodeURIComponent(a.getAttribute('href').slice(9))).catch(() => {}); }, { passive: true });
 document.addEventListener('touchstart', e => { const a = e.target.closest && e.target.closest('a.mrow'); if (a && a.getAttribute('href').startsWith('#/mail/m/')) mailFetch(decodeURIComponent(a.getAttribute('href').slice(9))).catch(() => {}); }, { passive: true });
 // What this device has just done to a message (read, unread), kept for a minute: a list that was already on its way from the server
@@ -307,15 +334,23 @@ function mailDrawReader() {
 async function mailAction(a) {
   const m = mail.msg; if (!m) return;
   const post = (p, body) => jfetch('/api/mail/' + p, { method: 'POST', body: JSON.stringify({ id: m.id, ...body }) });
-  const back = keep => { if (!keep) { mail.items = mail.items.filter(x => x.id !== m.id); const sv = mcGet('l:' + mail.folder); if (sv && sv.items) mcPut('l:' + mail.folder, { items: sv.items.filter(x => x.id !== m.id), more: sv.more, next: sv.next }); } mail.msg = null; location.hash = '#/mail/f/' + encodeURIComponent(mail.folder); mailPoll(); jfetch('/api/mail/folders?acct=' + encodeURIComponent(mail.acct)).then(f => { mail.folders = f; }).catch(() => {}); };
+  const refresh = () => { mailPoll(); jfetch('/api/mail/folders?acct=' + encodeURIComponent(mail.acct)).then(f => { mail.folders = f; mailRefreshFolders(); }).catch(() => {}); };
+  const gone = () => { mail.items = mail.items.filter(x => x.id !== m.id); const sv = mcGet('l:' + mail.folder); if (sv && sv.items) mcPut('l:' + mail.folder, { items: sv.items.filter(x => x.id !== m.id), more: sv.more, next: sv.next }); };
+  const back = keep => { if (!keep) gone(); mail.msg = null; location.hash = '#/mail/f/' + encodeURIComponent(mail.folder); refresh(); };
+  // Archive and delete leave at once and finish in the background; if the server refuses, the message comes back
+  const away = (p, body, said) => {
+    const had = mail.items.find(x => x.id === m.id), at = mail.items.findIndex(x => x.id === m.id);
+    toast(said); back();
+    post(p, body).catch(e => { toast(e.message); if (had) { mail.items.splice(Math.min(at < 0 ? 0 : at, mail.items.length), 0, had); mailDrawList(); } refresh(); });
+  };
   try {
     if (a === 'reply' || a === 'replyAll' || a === 'forward') return mailCompose({ mode: a, msg: m });
-    if (a === 'archive') { await post('move', { to: 'archive' }); toast('Archived'); return back(); }
+    if (a === 'archive') return away('move', { to: 'archive' }, 'Archived');
     if (a === 'unread') { await post('update', { read: false }); m.read = false; mailSetRead(m.id, false); toast('Marked unread'); if (mailInInbox()) { mailUnread++; renderNav(); } return back(true); }
     if (a === 'flag') { await post('update', { flagged: !m.flagged }); m.flagged = !m.flagged; const it = mail.items.find(x => x.id === m.id); if (it) it.flagged = m.flagged; mailDrawReader(); return mailDrawList(); }
     if (a === 'delete') {
-      if (/(^|~)deleteditems$/.test(mail.folder)) return confirmSheet('Delete for good?', m.subject, 'Delete', async () => { try { await post('delete', { permanent: true }); toast('Deleted'); back(); } catch (e) { toast(e.message); } });
-      await post('delete', {}); toast('Moved to Deleted'); return back();
+      if (/(^|~)deleteditems$/.test(mail.folder)) return confirmSheet('Delete for good?', m.subject, 'Delete', () => away('delete', { permanent: true }, 'Deleted'));
+      return away('delete', {}, 'Moved to Deleted');
     }
   } catch (e) { toast(e.message); }
 }