nio-cat 0.9.7 → 0.9.9

package/web/app/notes.js

@@ -15,6 +15,7 @@ const I = {
   tag: '<path d="M4 4h7.500l8.500 8.500-7.500 7.500L4 11.500z"/><circle cx="8.500" cy="8.500" r="1.200"/>',
   spark: '<path d="M12 3.500l1.800 5.200 5.200 1.800-5.200 1.800L12 17.500l-1.800-5.200L5 10.500l5.200-1.800zM18.500 16l.7 2 2 .7-2 .7-.7 2-.7-2-2-.7 2-.7z"/>',
   close: '<path d="M6 6l12 12M18 6L6 18"/>',
+  back: '<path d="m10 5-7 7 7 7M3 12h18"/>',
   plus: '<path d="M12 5v14M5 12h14"/>',
   search: '<circle cx="11" cy="11" r="6.500"/><path d="M16 16l4 4"/>',
   grid: '<rect x="4" y="4" width="7" height="7" rx="1.500"/><rect x="13" y="4" width="7" height="7" rx="1.500"/><rect x="4" y="13" width="7" height="7" rx="1.500"/><rect x="13" y="13" width="7" height="7" rx="1.500"/>',
@@ -23,6 +24,7 @@ const I = {
   pause: '<path d="M8 5.500v13M16 5.500v13"/>',
   phone: '<rect x="7" y="3" width="10" height="18" rx="2.500"/><path d="M11 18h2"/>',
   check: '<path d="M5 12.500l4.500 4.500L19 7.500"/>',
+  more: '<circle cx="6" cy="12" r="1.5"/><circle cx="12" cy="12" r="1.5"/><circle cx="18" cy="12" r="1.5"/>',
 };
 const COLORS = [['', 'Sense color'], ['lemon', 'Llimona'], ['peach', 'Préssec'], ['moss', 'Molsa'], ['sky', 'Cel'], ['lilac', 'Lila'], ['rose', 'Rosa'], ['sand', 'Sorra']];
 const ACTIONS = [
@@ -46,6 +48,15 @@ export function createNotes(ctx) {
   let root = null, notes = new Map(), loaded = false, loading = false, engines = null;
   let view = 'notes', q = '', layout = LSget('nio.notes.layout', 'grid');
   let ed = null, aborter = null;
+  const historyNotes = new Map();
+  const pendingSaves = new Set();
+  let loadError = '';
+  const machineKey = () => ctx.machine()?.id || ctx.machine()?.url;
+  let notesMachine = machineKey();
+  addEventListener('beforeunload', (event) => {
+    if (!pendingSaves.size && !ed?.rec) return;
+    event.preventDefault(); event.returnValue = '';
+  });
 
   // ---------------------------------------------------------------- dades
   const all = () => [...notes.values()];
@@ -65,8 +76,19 @@ export function createNotes(ctx) {
   }
   async function load() {
     if (loading) return; loading = true;
-    try { const r = await api('/api/notes'); notes = new Map(r.notes.map((n) => [n.id, n])); loaded = true; }
-    catch (e) { if (root) root.querySelector('#ntGrid').innerHTML = `<p class="nt-empty">${esc(e.message)}</p>`; }
+    const requestedMachine = machineKey();
+    loadError = '';
+    try {
+      const r = await api('/api/notes');
+      if (requestedMachine !== machineKey()) { loading = false; if (root) load(); return; }
+      notes = new Map(r.notes.map((n) => [n.id, n])); loaded = true;
+      for (const entry of pendingSaves) if (entry.id && entry.machineKey === machineKey()) notes.set(entry.id, entry.n);
+      if (ed?.id) notes.set(ed.id, ed.n);
+    }
+    catch (e) {
+      if (requestedMachine !== machineKey()) { loading = false; if (root) load(); return; }
+      loadError = e.message;
+    }
     loading = false; drawAll();
   }
   const upsert = (n) => { const old = notes.get(n.id); notes.set(n.id, n); return old; };
@@ -74,35 +96,52 @@ export function createNotes(ctx) {
   // ---------------------------------------------------------------- pàgina
   function mount(el) {
     root = el; aborter?.abort(); aborter = new AbortController();
+    if (notesMachine !== machineKey()) { notesMachine = machineKey(); notes.clear(); loaded = false; engines = null; q = ''; view = 'notes'; }
+    if (history.state?.nioNote) { const { nioNote, ...rest } = history.state; history.replaceState(rest, '', location.href); }
     root.innerHTML = `<div class="nt">
       <div class="nt-top">
         <div class="nt-title"><h1>Notes</h1><p>Escriu, grava i deixa que un model ho ordeni. Es desa a l’ordinador.</p></div>
-        <div class="nt-tools"><button class="btn" type="button" data-nt="phone">${svg(I.phone)}<span>Mòbil com a micròfon</span></button></div>
+        ${ctx.isPhone() ? '' : `<div class="nt-tools"><button class="btn" type="button" data-nt="phone">${svg(I.phone)}<span>Mòbil com a micròfon</span></button></div>`}
       </div>
       <div class="nt-bar">
         <label class="nt-search">${svg(I.search)}<input type="search" id="ntQ" placeholder="Busca a les notes" autocomplete="off" aria-label="Busca a les notes"></label>
         <button class="icon-btn" type="button" data-nt="layout" aria-label="Canvia la vista" id="ntLayout"></button>
       </div>
-      <div class="nt-new" id="ntNew" role="button" tabindex="0" data-nt="new"><span>Escriu una nota…</span>
+      <div class="nt-new" id="ntNew"><button class="nt-write" type="button" data-nt="new">${svg(I.plus)}<span>Escriu una nota…</span></button>
         <span class="nt-new-b"><button type="button" data-nt="newlist" aria-label="Nova llista" title="Nova llista">${svg(I.list)}</button><button type="button" data-nt="newmic" aria-label="Grava una nota" title="Grava una nota">${svg(I.mic)}</button></span></div>
       <nav class="nt-filters" id="ntFilters" aria-label="Filtres"></nav>
+      <div id="ntPending" aria-live="polite"></div>
+      <p class="nt-results" id="ntResults" aria-live="polite"></p>
       <div id="ntGrid" class="nt-body"></div>
     </div>`;
     const sig = { signal: aborter.signal };
+    $('#ntQ', root).value = q;
     $('#ntQ', root).addEventListener('input', (e) => { q = e.target.value; drawGrid(); }, sig);
     root.addEventListener('click', onClick, sig);
-    root.addEventListener('keydown', (e) => { if ((e.key === 'Enter' || e.key === ' ') && e.target.matches?.('.nt-card, #ntNew')) { e.preventDefault(); e.target.click(); } }, sig);
+    bindSwipe($('#ntGrid', root), sig);
+    root.addEventListener('keydown', (e) => { if ((e.key === 'Enter' || e.key === ' ') && e.target.matches?.('.nt-card')) { e.preventDefault(); e.target.click(); } }, sig);
+    addEventListener('popstate', () => {
+      if (ed && !history.state?.nioNote) closeEditor(false, true);
+      else if (!ed && history.state?.nioNote && location.hash.startsWith('#/notes')) {
+        const entry = history.state.nioNote;
+        openEditor(historyNotes.get(entry.key) || entry.id, null, { fromHistory: true, historyKey: entry.key });
+      }
+    }, sig);
     drawAll();
-    load();
-    if (/[?&]mic=1/.test(location.hash)) setTimeout(() => openEditor(null, $('#ntNew', root), { mic: true }), 250);
+    load().then(schedule);
+    if (/[?&]mic=1/.test(location.hash)) {
+      history.replaceState(history.state, '', location.hash.replace(/([?&])mic=1(&?)/, (_, sep, next) => next ? sep : ''));
+      toast('Per gravar una nota, prem el botó del micròfon.');
+    }
   }
-  function unmount() { aborter?.abort(); closeEditor(true); root = null; }
+  function unmount() { aborter?.abort(); clearTimeout(set.t); clearTimeout(pollT); closeEditor(true); root = null; }
   const drawAll = () => { if (!root) return; drawLayout(); drawFilters(); drawGrid(); };
   function drawLayout() { const b = $('#ntLayout', root); if (b) b.innerHTML = svg(layout === 'grid' ? I.rows : I.grid); root.querySelector('.nt').dataset.layout = layout; }
   function drawFilters() {
+    if (!root) return;
     const labs = labelsOf(), nTrash = all().filter((n) => n.trashed).length;
     const chip = (v, label, extra = '') => `<button type="button" class="nt-chip" data-nt="view" data-v="${esc(v)}" ${view === v ? 'aria-current="true"' : ''}>${extra}${esc(label)}</button>`;
-    $('#ntFilters', root).innerHTML = chip('notes', 'Notes') + labs.map((l) => chip(`l:${l}`, l, svg(I.tag))).join('') + chip('archive', 'Arxivades', svg(I.archive)) + chip('trash', nTrash ? `Paperera · ${nTrash}` : 'Paperera', svg(I.trash));
+    $('#ntFilters', root).innerHTML = `<div class="nt-filter-views">${chip('notes', 'Notes')}${chip('archive', 'Arxivades', svg(I.archive))}${chip('trash', nTrash ? `Paperera · ${nTrash}` : 'Paperera', svg(I.trash))}</div>${labs.length ? `<div class="nt-filter-labels"><span>Etiquetes</span>${labs.map((l) => chip(`l:${l}`, l, svg(I.tag))).join('')}</div>` : ''}`;
   }
   function cardHtml(n) {
     const items = n.items || [];
@@ -123,9 +162,14 @@ export function createNotes(ctx) {
     </article>`;
   }
   function drawGrid() {
+    if (!root) return;
+    if (swipe?.card) { swipe.redraw = true; return; } // no es toca la llista amb una targeta sota el dit
     const g = $('#ntGrid', root); if (!g) return;
+    $('#ntPending', root).innerHTML = [...pendingSaves].some((entry) => entry.error && entry.machineKey === machineKey()) ? '<div class="nt-warning"><span>Hi ha canvis pendents de desar. Mantén aquesta pàgina oberta.</span><button class="btn sm" type="button" data-nt="retry-save">Torna a desar</button></div>' : '';
+    if (loadError) { g.innerHTML = `<div class="nt-empty" role="alert"><p>${esc(loadError)}</p><button class="btn" type="button" data-nt="reload">Torna-ho a provar</button></div>`; return; }
     if (!loaded) { g.innerHTML = '<div class="nt-grid"><i class="nt-skel"></i><i class="nt-skel tall"></i><i class="nt-skel"></i></div>'; return; }
     const list = visible();
+    $('#ntResults', root).textContent = `${list.length} ${list.length === 1 ? 'nota' : 'notes'}${q ? ` per a «${q}»` : ''}`;
     if (!list.length) {
       g.innerHTML = `<p class="nt-empty">${q ? 'Cap nota coincideix amb la cerca.' : view === 'trash' ? 'La paperera és buida. Les notes s’hi esborren soles als 30 dies.' : view === 'archive' ? 'No hi ha notes arxivades.' : view.startsWith('l:') ? 'Cap nota amb aquesta etiqueta.' : 'Encara no hi ha cap nota. Escriu-ne una o grava-la amb la veu.'}</p>`;
       return;
@@ -138,8 +182,15 @@ export function createNotes(ctx) {
 
   // ---------------------------------------------------------------- clics de la pàgina
   async function onClick(e) {
+    if (Date.now() - swipedAt < 400) { e.preventDefault(); e.stopPropagation(); return; }
     const t = e.target.closest('[data-nt]'), card = e.target.closest('.nt-card');
     const act = t?.dataset.nt, n = card ? notes.get(card.dataset.id) : null;
+    if (act === 'reload') return load();
+    if (act === 'retry-save') {
+      t.disabled = true;
+      await Promise.all([...pendingSaves].filter((entry) => entry.machineKey === machineKey()).map((entry) => flush(entry)));
+      drawGrid(); return;
+    }
     if (act === 'view') { view = t.dataset.v; drawFilters(); drawGrid(); return; }
     if (act === 'layout') { layout = layout === 'grid' ? 'list' : 'grid'; LSset('nio.notes.layout', layout); drawLayout(); return; }
     if (act === 'phone') return phoneSheet();
@@ -158,6 +209,55 @@ export function createNotes(ctx) {
     }
     if (card && n) return openEditor(n.id, card);
   }
+  // Lliscar una targeta cap a qualsevol costat l'arxiva (o la desarxiva a «Arxivades»), com a Keep.
+  // Segueix el dit 1:1; si passa d'un terç de l'amplada o es llença ràpid, marxa; si no, torna al lloc.
+  let swipe = null, swipedAt = 0;
+  function bindSwipe(grid, sig) {
+    const reset = (card) => { card.style.transition = ''; card.style.transform = ''; card.style.opacity = ''; card.classList.remove('swiping'); };
+    grid.addEventListener('pointerdown', (e) => {
+      const card = e.target.closest('.nt-card');
+      if (!card || e.pointerType === 'mouse' || !e.isPrimary || view === 'trash' || swipe) return;
+      swipe = { card, id: card.dataset.id, x0: e.clientX, y0: e.clientY, dx: 0, lock: null, pid: e.pointerId, pts: [[e.timeStamp, e.clientX]] };
+    }, sig);
+    grid.addEventListener('pointermove', (e) => {
+      const g = swipe; if (!g || e.pointerId !== g.pid) return;
+      const dx = e.clientX - g.x0, dy = e.clientY - g.y0;
+      if (!g.lock) {
+        if (Math.abs(dx) < 8 && Math.abs(dy) < 8) return;
+        if (Math.abs(dx) > Math.abs(dy) * 1.2) { g.lock = 'x'; g.card.setPointerCapture?.(e.pointerId); g.card.classList.add('swiping'); g.card.style.transition = 'none'; g.w = g.card.offsetWidth; }
+        else { swipe = null; return; }
+      }
+      g.dx = dx; g.pts.push([e.timeStamp, e.clientX]); if (g.pts.length > 5) g.pts.shift();
+      g.card.style.transform = `translateX(${dx}px) rotate(${dx / g.w * 3}deg)`;
+      g.card.style.opacity = String(Math.max(0.15, 1 - Math.abs(dx) / (g.w * 1.1)));
+    }, sig);
+    const end = (e) => {
+      const g = swipe; if (!g || e.pointerId !== g.pid) return;
+      swipe = null;
+      if (g.lock !== 'x') return;
+      swipedAt = Date.now();
+      const [t0, x0] = g.pts[0], [t1, x1] = g.pts[g.pts.length - 1], v = (x1 - x0) / Math.max(1, t1 - t0);
+      const n = notes.get(g.id), dir = Math.sign(Math.abs(v) > 0.45 ? v : g.dx);
+      const go = n && e.type === 'pointerup' && (Math.abs(g.dx) > g.w * 0.33 || (Math.abs(v) > 0.45 && Math.sign(v) === Math.sign(g.dx) && Math.abs(g.dx) > 24));
+      if (!go) {
+        g.card.style.transition = 'transform .32s cubic-bezier(.22,1,.36,1), opacity .2s';
+        g.card.style.transform = ''; g.card.style.opacity = '';
+        setTimeout(() => { reset(g.card); if (g.redraw) drawGrid(); }, 330);
+        return;
+      }
+      navigator.vibrate?.(8);
+      const was = { archived: n.archived, pinned: n.pinned };
+      const fly = reduce ? 0 : 200;
+      g.card.style.transition = `transform ${fly}ms cubic-bezier(.4,0,1,1), opacity ${fly}ms`;
+      g.card.style.transform = `translateX(${dir * (g.w + 60)}px) rotate(${dir * 6}deg)`; g.card.style.opacity = '0';
+      setTimeout(() => {
+        patch(n, { archived: !was.archived, pinned: false });
+        toastUndo(was.archived ? 'Desarxivada' : 'Arxivada', () => patch(n, was));
+      }, fly);
+    };
+    grid.addEventListener('pointerup', end, sig);
+    grid.addEventListener('pointercancel', end, sig);
+  }
   // La targeta s'esvaeix abans de marxar de la llista; el toast permet desfer-ho.
   function leave(card, fn, msg, undo) {
     if (!reduce) { card.style.transition = 'opacity .16s, transform .16s'; card.style.opacity = '0'; card.style.transform = 'scale(.96)'; }
@@ -171,9 +271,11 @@ export function createNotes(ctx) {
     b.onclick = (ev) => { ev.stopPropagation(); undo(); t.remove(); };
     t.append(' ', b);
   }
+  let inflight = 0;
   async function patch(n, fields) {
     Object.assign(n, fields); notes.set(n.id, n); drawAll();
-    try { upsert(await api(`/api/notes/${n.id}`, { method: 'PATCH', body: fields })); } catch (e) { toast(e.message, 4200); load(); }
+    inflight++;
+    try { upsert(await api(`/api/notes/${n.id}`, { method: 'PATCH', body: fields })); } catch (e) { toast(e.message, 4200); load(); } finally { inflight--; }
   }
 
   // ---------------------------------------------------------------- esdeveniments en directe (del flux d'nio)
@@ -182,30 +284,69 @@ export function createNotes(ctx) {
     const n = msg.note, old = upsert(n); void old;
     if (ed && ed.id === n.id) {
       // Del servidor només entra el que no estem editant ara mateix: l'àudio, la transcripció i els canvis d'altres dispositius.
-      const keep = new Set(Object.keys(ed.dirty));
+      const keep = new Set([...Object.keys(ed.dirty), ...Object.keys(ed.savingFields)]);
       const mine = ed.n; for (const k of Object.keys(n)) if (!keep.has(k)) mine[k] = n[k];
       ed.n = mine; notes.set(n.id, mine); syncEditor();
     }
     if (root) { drawFilters(); drawGrid(); }
+    if (n.audio?.some((a) => a.state === 'transcribing')) schedule();
   }
   const reload = () => { if (root || loaded) load(); };
 
+  // Per si el flux en directe s'ha perdut (mòbil en segon pla, túnel que talla): es consulta l'ordinador
+  // cada poc mentre hi ha àudio transcrivint-se i, si no, de tant en tant. Només s'aplica el que ha canviat.
+  let pollT = 0, polling = false;
+  const busy = () => all().some((n) => n.audio.some((a) => a.state === 'transcribing')) || !!ed?.uploading;
+  async function refresh() {
+    if (polling || inflight || loading || !loaded || ctx.isDemo?.()) return; polling = true;
+    const mk = machineKey();
+    try {
+      const r = await api('/api/notes');
+      if (mk !== machineKey()) return;
+      const seen = new Set();
+      for (const n of r.notes) {
+        seen.add(n.id); const old = notes.get(n.id);
+        if (!old || old.updated !== n.updated || JSON.stringify(old.audio) !== JSON.stringify(n.audio)) onEvent({ type: 'note', note: n });
+      }
+      for (const id of [...notes.keys()]) if (!seen.has(id) && !(ed?.id === id && pendingSaves.has(ed))) onEvent({ type: 'note-gone', id });
+    } catch { /* ja es tornarà a provar */ } finally { polling = false; }
+  }
+  function schedule() {
+    clearTimeout(pollT);
+    if (!root && !ed) return;
+    pollT = setTimeout(async () => { if (!document.hidden) await refresh(); schedule(); }, busy() ? 1500 : 10000);
+  }
+  document.addEventListener('visibilitychange', () => { if (!document.hidden && (root || ed)) { refresh(); schedule(); } });
+  addEventListener('online', () => { if (root || ed) refresh(); });
+
   // ---------------------------------------------------------------- editor
   function openEditor(id, src, opts = {}) {
     if (ed) return;
     const n = id ? notes.get(id) : { id: null, title: '', text: '', items: opts.list ? [] : null, color: '', pinned: false, archived: false, trashed: 0, labels: [], audio: [] };
     if (!n) return;
-    ed = { id, n, dirty: {}, timer: 0, chain: Promise.resolve(), rec: null, ai: null, src, pop: null };
+    ed = { id, n: structuredClone(n), machineKey: machineKey(), historyKey: opts.historyKey || uid(), dirty: {}, savingFields: {}, timer: 0, chain: Promise.resolve(true), rec: null, ai: null, src, pop: null };
+    if (!opts.fromHistory) history.pushState({ ...history.state, nioNote: { id, key: ed.historyKey } }, '', location.href);
     const ov = document.createElement('div');
     ov.className = 'nt-ov'; ov.innerHTML = `<div class="nt-ed" role="dialog" aria-modal="true" aria-label="Edita la nota" data-color="${n.color}"></div>`;
     document.body.append(ov); ed.ov = ov; ed.card = ov.firstElementChild;
     buildEditor();
     ov.addEventListener('mousedown', (e) => { if (e.target === ov) closeEditor(); });
-    ov.addEventListener('keydown', (e) => { if (e.key === 'Escape') { if (ed.pop) closePop(); else closeEditor(); } else if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) closeEditor(); });
+    ov.addEventListener('keydown', (e) => {
+      if (!ed) return;
+      if (e.key === 'Escape') { if (ed.pop) closePop(); else closeEditor(); }
+      else if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) closeEditor();
+      else if (e.key === 'Tab') {
+        const controls = [...ov.querySelectorAll('button, input, textarea, select, [tabindex="0"]')].filter((el) => !el.disabled && el.getClientRects().length);
+        const first = controls[0], last = controls.at(-1);
+        if (e.shiftKey && document.activeElement === first) { e.preventDefault(); last?.focus(); }
+        else if (!e.shiftKey && document.activeElement === last) { e.preventDefault(); first?.focus(); }
+      }
+    });
+    $('[data-e="done"]', ed.card).focus({ preventScroll: true });
     animateOpen(ed.card, src);
-    if (!n.title && !n.text && !n.items?.length && !opts.mic) setTimeout(() => ($('.nt-ed-title', ed.card) || {}).focus?.(), 60);
+    if (!n.title && !n.text && !n.items?.length && !opts.mic && !ctx.isPhone()) setTimeout(() => ed && $('.nt-ed-title', ed.card)?.focus(), 60);
     if (opts.list) addItem(null);
-    if (opts.mic) setTimeout(() => toggleRec(), 220);
+    if (opts.mic) toggleRec();
   }
   function animateOpen(card, src) {
     if (reduce) return;
@@ -217,8 +358,21 @@ export function createNotes(ctx) {
     card.animate([{ transform: `translate(${dx}px,${dy}px) scale(${sx},${sy})`, opacity: .6 }, { transform: 'none', opacity: 1 }], { duration: 300, easing: 'cubic-bezier(.22,1,.36,1)' });
     ed.ov.animate([{ background: 'rgba(39,34,36,0)' }, { background: 'rgba(39,34,36,.32)' }], { duration: 300, easing: 'ease-out' });
   }
-  async function closeEditor(instant) {
+  async function closeEditor(instant, fromHistory = false) {
     const e = ed; if (!e) return;
+    if (!instant && !fromHistory && history.state?.nioNote) { history.back(); return; }
+    if (instant && history.state?.nioNote) { const { nioNote, ...rest } = history.state; history.replaceState(rest, '', location.href); }
+    if (!instant) {
+      if (e.closing) return;
+      e.closing = true;
+      const saved = await flush(e);
+      e.closing = false;
+      if (ed !== e) return;
+      if (!saved) {
+        if (fromHistory && root && location.hash.startsWith('#/notes')) history.pushState({ ...history.state, nioNote: { id: e.id, key: e.historyKey } }, '', location.href);
+        return;
+      }
+    }
     ed = null; clearTimeout(e.timer); e.rec?.cancel?.(); e.audioEl?.pause();
     const done = () => e.ov.remove();
     if (instant || reduce) done(); else {
@@ -232,36 +386,61 @@ export function createNotes(ctx) {
     await flush(e);
     if (e.id && empty(e.n)) { notes.delete(e.id); api(`/api/notes/${e.id}?forever=1`, { method: 'DELETE' }).catch(() => {}); }
     if (root) drawAll();
+    if (root) (e.src?.isConnected ? e.src.querySelector('button') || e.src : root.querySelector('[data-nt="new"]'))?.focus({ preventScroll: true });
   }
 
   // Desat: s'envia només el que ha canviat, en cua, mig segon després de l'última tecla.
   function set(fields) {
     Object.assign(ed.n, fields); Object.assign(ed.dirty, fields);
+    pendingSaves.add(ed); saveStatus(ed, 'Canvis pendents…');
     ed.card.dataset.color = ed.n.color;
     clearTimeout(ed.timer); ed.timer = setTimeout(flush, 450);
     if (ed.id) notes.set(ed.id, ed.n);
     if (root) { clearTimeout(set.t); set.t = setTimeout(() => { drawFilters(); drawGrid(); }, 200); }
   }
   function flush(e = ed, force = false) {
-    if (!e) return Promise.resolve();
+    if (!e) return Promise.resolve(true);
     clearTimeout(e.timer);
     e.chain = e.chain.then(async () => {
-      const fields = e.dirty; e.dirty = {};
+      if (e.machineKey !== machineKey()) {
+        if ((!e.id && empty(e.n)) || (e.id && !Object.keys(e.dirty).length && !e.error)) return true;
+        e.error = true; pendingSaves.add(e); return false;
+      }
+      const fields = e.dirty; e.dirty = {}; e.savingFields = fields;
+      if (e.id && !Object.keys(fields).length) return !e.error;
+      saveStatus(e, 'Desant…');
       try {
         if (!e.id) {
-          if (!force && empty(e.n)) { e.dirty = { ...fields, ...e.dirty }; return; } // una nota buida no es desa
+          if (!force && empty(e.n)) { pendingSaves.delete(e); e.savingFields = {}; saveStatus(e, 'Nota buida'); return true; }
           const { audio, id, ...body } = e.n; void audio; void id;
           const r = await api('/api/notes', { method: 'POST', body }); e.id = r.id; Object.assign(e.n, { id: r.id, audio: r.audio, created: r.created, updated: r.updated }); notes.set(r.id, e.n);
-        } else if (Object.keys(fields).length) { const r = await api(`/api/notes/${e.id}`, { method: 'PATCH', body: fields }); void r; }
-      } catch (er) { Object.assign(fields, e.dirty); e.dirty = fields; toast(`No s’ha pogut desar: ${er.message}`, 4500); }
+          historyNotes.set(e.historyKey, r.id);
+          if (ed === e && history.state?.nioNote) history.replaceState({ ...history.state, nioNote: { id: r.id, key: e.historyKey } }, '', location.href);
+        } else if (Object.keys(fields).length) { const r = await api(`/api/notes/${e.id}`, { method: 'PATCH', body: fields }); e.n.updated = r.updated; }
+        e.error = false; e.savingFields = {};
+        if (!Object.keys(e.dirty).length) pendingSaves.delete(e);
+        saveStatus(e, Object.keys(e.dirty).length ? 'Canvis pendents…' : 'Desat');
+        return true;
+      } catch (er) {
+        e.dirty = { ...fields, ...e.dirty }; e.savingFields = {}; e.error = true; pendingSaves.add(e);
+        saveStatus(e, 'No s’ha pogut desar', true);
+        toast(`No s’ha pogut desar: ${er.message}`, 4500);
+        return false;
+      }
     });
     return e.chain;
   }
+  function saveStatus(entry, text, error = false) {
+    const status = entry.card?.querySelector('#edSaveStatus'), retry = entry.card?.querySelector('[data-e="retry-save"]');
+    if (status) { status.textContent = text; status.classList.toggle('err', error); }
+    if (retry) retry.hidden = !error;
+  }
   const ensureId = async () => { if (!ed.id) await flush(ed, true); return ed.id; };
 
   function buildEditor() {
     const n = ed.n, c = ed.card;
     c.innerHTML = `
+      <div class="nt-ed-nav"><button class="nt-ib nt-back" type="button" data-e="done">${svg(I.back)}<span>Notes</span></button><div class="nt-save"><span id="edSaveStatus" role="status">Es desa automàticament</span><button type="button" class="nt-ib" data-e="retry-save" hidden>Torna a desar</button></div></div>
       <div class="nt-ed-head"><input class="nt-ed-title" type="text" placeholder="Títol" value="${esc(n.title)}" aria-label="Títol" maxlength="200" autocomplete="off">
         <button class="nt-ib ${n.pinned ? 'on' : ''}" type="button" data-e="pin" aria-label="Fixa la nota" aria-pressed="${n.pinned}">${svg(I.pin)}</button></div>
       <div class="nt-ed-body" id="edBody"></div>
@@ -269,17 +448,25 @@ export function createNotes(ctx) {
       <div class="nt-labels nt-ed-labels" id="edLabels"></div>
       <div class="nt-ai" id="edAi" hidden></div>
       <div class="nt-rec" id="edRec" hidden></div>
+      <div class="nt-more-scrim" id="edScrim" hidden></div>
+      <div class="nt-more-sheet" id="edMore" role="dialog" aria-label="Més opcions" hidden>
+        <div class="nt-more-grab" aria-hidden="true"></div>
+        <button type="button" data-e="archive">${n.archived ? 'Desarxiva' : 'Arxiva'}</button>
+        <button type="button" data-e="trash" class="danger">Envia a la paperera</button>
+        <button type="button" data-e="more-close" class="muted">Tanca</button>
+      </div>
       <div class="nt-ed-foot" id="edFoot">
-        <div class="nt-tb">
+        <div class="nt-tb"><div class="nt-edit-tools">
           <button class="nt-ib" type="button" data-e="mic" aria-label="Grava amb el micròfon" title="Grava (Whisper, a l’ordinador)">${svg(I.mic)}</button>
           <button class="nt-ib" type="button" data-e="mode" id="edMode" title="Llista o text"></button>
           <button class="nt-ib" type="button" data-e="color" aria-label="Color" title="Color">${svg(I.palette)}</button>
           <button class="nt-ib" type="button" data-e="label" aria-label="Etiquetes" title="Etiquetes">${svg(I.tag)}</button>
           <button class="nt-ib nt-ai-b" type="button" data-e="ai" aria-label="Assistent" title="Resumeix i organitza amb un model">${svg(I.spark)}<span>Assistent</span></button>
-          <span class="nt-sp"></span>
+          <button class="nt-ib nt-more-btn" type="button" data-e="more" aria-label="Més">${svg(I.more)}</button>
+          </div><div class="nt-note-tools">
           <button class="nt-ib" type="button" data-e="archive" aria-label="Arxiva" title="Arxiva">${svg(I.archive)}</button>
           <button class="nt-ib" type="button" data-e="trash" aria-label="Paperera" title="Paperera">${svg(I.trash)}</button>
-          <button class="btn ink nt-done" type="button" data-e="done">Fet</button>
+          <button class="btn ink nt-done" type="button" data-e="done">Fet</button></div>
         </div>
       </div>`;
     const title = $('.nt-ed-title', c);
@@ -287,6 +474,31 @@ export function createNotes(ctx) {
     title.addEventListener('keydown', (e) => { if (e.key === 'Enter') { e.preventDefault(); ($('.nt-ed-text', c) || $('.nt-item input[type=text]', c))?.focus(); } });
     c.addEventListener('click', onEditorClick);
     drawBody(); drawAudio(); drawLabels(); drawMode();
+    bindMoreDrag($('#edMore', c), $('#edScrim', c));
+  }
+  // El panell «Més» segueix el dit cap avall i es tanca si baixa prou o es llença; si no, torna a pujar.
+  let moreDraggedAt = 0;
+  function bindMoreDrag(sheet, scrim) {
+    let g = null;
+    sheet.addEventListener('pointerdown', (e) => { if (e.pointerType === 'mouse') return; g = { y0: e.clientY, dy: 0, pid: e.pointerId, pts: [[e.timeStamp, e.clientY]], moved: false }; }, { passive: true });
+    sheet.addEventListener('pointermove', (e) => {
+      if (!g || e.pointerId !== g.pid) return;
+      const dy = e.clientY - g.y0;
+      if (!g.moved) { if (Math.abs(dy) < 6) return; g.moved = true; sheet.setPointerCapture?.(e.pointerId); sheet.style.transition = 'none'; scrim.style.transition = 'none'; }
+      g.dy = dy > 0 ? dy : dy / 4; // cap amunt, amb resistència
+      g.pts.push([e.timeStamp, e.clientY]); if (g.pts.length > 5) g.pts.shift();
+      sheet.style.transform = `translateY(${g.dy}px)`;
+      scrim.style.opacity = String(Math.max(0, 1 - Math.max(0, g.dy) / sheet.offsetHeight));
+    });
+    const end = (e) => {
+      if (!g || e.pointerId !== g.pid) return;
+      const d = g; g = null; if (!d.moved) return;
+      moreDraggedAt = Date.now();
+      const [t0, y0] = d.pts[0], [t1, y1] = d.pts[d.pts.length - 1], v = (y1 - y0) / Math.max(1, t1 - t0);
+      if (d.dy > sheet.offsetHeight * 0.3 || (v > 0.4 && d.dy > 12)) closeMore(true);
+      else { sheet.style.transition = ''; scrim.style.transition = ''; sheet.style.transform = ''; scrim.style.opacity = ''; }
+    };
+    sheet.addEventListener('pointerup', end); sheet.addEventListener('pointercancel', end);
   }
   function drawMode() { const b = $('#edMode', ed.card); if (b) { b.innerHTML = svg(ed.n.items ? I.text : I.list); b.setAttribute('aria-label', ed.n.items ? 'Passa a text' : 'Passa a llista'); } }
   function drawBody() {
@@ -317,10 +529,12 @@ export function createNotes(ctx) {
   }
   function removeItem(id) { set({ items: ed.n.items.filter((x) => x.id !== id) }); drawBody(); }
   function drawLabels() { const box = $('#edLabels', ed.card); box.innerHTML = ed.n.labels.map((l) => `<span class="nt-label">${esc(l)}<button type="button" data-e="unlabel" data-l="${esc(l)}" aria-label="Treu l’etiqueta ${esc(l)}">${svg(I.close)}</button></span>`).join(''); box.hidden = !ed.n.labels.length; }
+  // L'àudio acabat de pujar també surt a la llista (targeta «Transcrivint…»), sense esperar el flux.
+  function upsertAudio(note) { const cur = notes.get(note.id); if (cur && cur !== ed?.n) cur.audio = note.audio; if (root) drawGrid(); }
   function drawAudio() {
     const box = $('#edAudio', ed.card), list = ed.n.audio;
-    box.hidden = !list.length;
-    box.innerHTML = list.map((a) => `<div class="nt-au" data-a="${a.id}" data-st="${a.state}">
+    box.hidden = !list.length && !ed.uploading;
+    box.innerHTML = (ed.uploading ? '<div class="nt-au" data-st="transcribing"><span class="nt-au-s"><i class="nt-spin"></i>Enviant l’àudio a l’ordinador…</span></div>' : '') + list.map((a) => `<div class="nt-au" data-a="${a.id}" data-st="${a.state}">
       <button type="button" class="nt-ib sm" data-e="play" aria-label="Escolta">${svg(I.play)}</button>
       <span class="nt-au-d">${a.dur ? fmtDur(a.dur) : 'Àudio'}</span>
       <span class="nt-au-s">${a.state === 'transcribing' ? '<i class="nt-spin"></i>Transcrivint amb Whisper…' : a.state === 'ok' ? `${svg(I.check)}Transcripció afegida` : `${esc(a.error || 'No s’ha pogut transcriure')}`}</span>
@@ -330,16 +544,24 @@ export function createNotes(ctx) {
   function syncEditor() {
     const n = ed.n, c = ed.card;
     drawAudio(); drawLabels(); drawMode(); c.dataset.color = n.color;
-    const ta = $('.nt-ed-text', c); if (ta && document.activeElement !== ta && ta.value !== n.text) { ta.value = n.text; grow(ta); }
-    const ti = $('.nt-ed-title', c); if (document.activeElement !== ti && ti.value !== n.title) ti.value = n.title;
-    if (n.items && !c.contains(document.activeElement?.closest?.('.nt-item'))) drawBody();
+    // El text que arriba (transcripció, un altre dispositiu) entra encara que el camp tingui el cursor,
+    // sempre que ara mateix no s'hi estigui escrivint; el cursor es queda on era.
+    const mine = (k) => k in ed.dirty || k in ed.savingFields;
+    const put = (el, v) => { const at = el.selectionStart, end = el.selectionEnd, foc = document.activeElement === el; el.value = v; if (foc) try { el.setSelectionRange(at, end); } catch { /* res */ } };
+    const ta = $('.nt-ed-text', c); if (ta && !mine('text') && ta.value !== n.text) { put(ta, n.text); grow(ta); }
+    const ti = $('.nt-ed-title', c); if (!mine('title') && ti.value !== n.title) put(ti, n.title);
+    if (n.items && !mine('items') && !c.contains(document.activeElement?.closest?.('.nt-item'))) drawBody();
     if (!n.items && !ta) drawBody();
     $('[data-e="pin"]', c).classList.toggle('on', n.pinned);
   }
 
   async function onEditorClick(ev) {
-    const b = ev.target.closest('[data-e]'), c = ed?.card; if (!b || !ed) { if (ed?.pop && !ev.target.closest('.nt-pop')) closePop(); return; }
+    const b = ev.target.closest('[data-e]'), c = ed?.card; if (!b || !ed) { if (ed?.pop && !ev.target.closest('.nt-pop')) closePop(); if (ed && !ev.target.closest('.nt-more-sheet')) closeMore(true); return; }
     const a = b.dataset.e;
+    if (ev.target.closest('.nt-more-sheet') && Date.now() - moreDraggedAt < 350) return; // era un arrossegament, no un toc
+    if (a === 'more-close') return closeMore(true);
+    if (a !== 'more' && !ev.target.closest('.nt-more-sheet')) closeMore(true);
+    if (a === 'retry-save') { b.disabled = true; await flush(ed); b.disabled = false; return; }
     if (!['color', 'label', 'ai', 'aiengine'].includes(a) && !ev.target.closest('.nt-pop')) closePop();
     if (a === 'done') return closeEditor();
     if (a === 'pin') { set({ pinned: !ed.n.pinned }); b.classList.toggle('on', ed.n.pinned); b.setAttribute('aria-pressed', ed.n.pinned); return; }
@@ -358,6 +580,7 @@ export function createNotes(ctx) {
     if (a === 'color') return popColor(b);
     if (a === 'label') return popLabel(b);
     if (a === 'ai') return popAi(b);
+    if (a === 'more') return openMore();
     if (a === 'mic') return toggleRec();
     if (a === 'play') return play(b.closest('.nt-au').dataset.a, b);
     if (a === 'voice') return ctx.voiceSheet();
@@ -366,12 +589,31 @@ export function createNotes(ctx) {
   }
 
   // ---------------------------------------------------------------- finestretes (color, etiquetes, assistent)
+  function openMore() {
+    if (!ed) return; closePop();
+    const s = $('#edMore', ed.card), sc = $('#edScrim', ed.card);
+    // Puja amb una transició (no una animació CSS) perquè el dit el pugui agafar mentre encara puja.
+    s.hidden = sc.hidden = false;
+    if (!reduce) { s.style.transition = sc.style.transition = 'none'; s.style.transform = 'translateY(100%)'; sc.style.opacity = '0'; void s.offsetHeight; }
+    s.style.transition = sc.style.transition = s.style.transform = sc.style.opacity = '';
+    $('button', s)?.focus({ preventScroll: true });
+  }
+  function closeMore(animated) {
+    const s = ed?.card?.querySelector('#edMore'), sc = ed?.card?.querySelector('#edScrim');
+    if (!s || s.hidden) return;
+    const hide = () => { s.hidden = sc.hidden = true; s.style.transition = sc.style.transition = s.style.transform = sc.style.opacity = ''; };
+    if (!animated || reduce) return hide();
+    s.style.transition = 'transform .22s cubic-bezier(.4,0,1,1)'; sc.style.transition = 'opacity .22s';
+    s.style.transform = 'translateY(105%)'; sc.style.opacity = '0';
+    setTimeout(hide, 220);
+  }
   function closePop() { ed?.pop?.remove(); if (ed) ed.pop = null; }
   function pop(anchor, html) {
     closePop();
     const p = document.createElement('div'); p.className = 'nt-pop'; p.innerHTML = html;
     ed.card.append(p); ed.pop = p;
     const a = anchor.getBoundingClientRect(), r = ed.card.getBoundingClientRect(), w = p.offsetWidth;
+    p.style.maxHeight = `${Math.max(80, a.top - Math.max(r.top, window.visualViewport?.offsetTop || 0) - 16)}px`;
     p.style.left = `${Math.max(8, Math.min(a.left - r.left, r.width - w - 8))}px`; p.style.bottom = `${r.bottom - a.top + 8}px`;
     return p;
   }
@@ -413,10 +655,11 @@ export function createNotes(ctx) {
       if (!ed) return;
       try {
         if (blob.size < 1500) throw new Error('No he sentit res. Prova-ho una altra vegada.');
+        ed.uploading = true; drawAudio();
         const id = await ensureId(); if (!id) throw new Error('No s’ha pogut crear la nota');
         const res = await ctx.nodeAudio(`/api/notes/${id}/audio?dur=${Math.round(dur)}`, { headers: { 'content-type': blob.type || 'audio/webm' }, body: blob });
-        const note = await res.json(); if (ed) { const mine = ed.n; mine.audio = note.audio; drawAudio(); }
-      } catch (e) { toast(e.message, 4500); }
+        const note = await res.json(); if (ed) { ed.uploading = false; ed.n.audio = note.audio; upsertAudio(note); drawAudio(); schedule(); }
+      } catch (e) { if (ed) { ed.uploading = false; drawAudio(); } toast(e.message, 4500); }
     };
     ed.rec = { stop: () => rec.stop(), cancel: () => { send = false; try { rec.stop(); } catch { cleanup(); } } };
     rec.start(1000);

package/web/app/style.css

@@ -191,6 +191,11 @@ button.chip:hover { border-color: var(--fg); }
 .session-card .last.err { color: var(--red); }
 .session-card .last { color: var(--fg-muted); font-size: 14px; margin-top: 4px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
 .session-card .meta { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; font-size: 12px; color: var(--fg-muted); }
+#termSessions:not(:empty) { margin-bottom: 16px; }
+.old-sessions { margin-top: 8px; }
+.old-sessions > summary { cursor: pointer; padding: 8px 0; list-style: none; }
+.old-sessions > summary::-webkit-details-marker { display: none; }
+.old-sessions > .list { margin-top: 8px; }
 .fab { position: fixed; right: 24px; bottom: calc(24px + var(--safe-b)); z-index: 15; display: inline-flex; align-items: center; gap: 8px; height: 50px; padding: 0 20px 0 16px; border: 0; border-radius: 16px; background: var(--fg); color: var(--bg); font-weight: 600; box-shadow: 0 14px 30px -14px color-mix(in srgb, var(--fg) 70%, transparent); transition: transform .15s; }
 .fab:active { transform: scale(.97); }
 
@@ -744,3 +749,55 @@ body.chat-mode .demo-bar, body.board-mode .demo-bar { display: none; }
 }
 /* Referència per mesurar els missatges (offsetTop) dins la conversa. */
 .feed { position: relative; }
+
+/* Totes les seccions, amb controls còmodes de tocar. */
+.more-sections { display: grid; gap: 22px; margin-top: 20px; }
+.more-sections h3 { margin: 0 0 6px; font-size: 12px; font-weight: 600; color: var(--fg-muted); }
+.more-sections section > div { display: grid; }
+.more-link { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 10px 12px; border-radius: 10px; text-decoration: none; }
+.more-link > span:first-of-type { flex: 1; }
+.more-link > .ico:last-child { width: 14px; color: var(--fg-muted); }
+.more-link:hover, .more-link[aria-current="page"] { background: var(--bg-2); }
+.voice-extras { border: 1px solid var(--border); border-radius: 12px; padding: 0 14px; }
+.voice-extras summary { min-height: 48px; padding-block: 13px; cursor: pointer; font-weight: 600; }
+.voice-extras > div { padding: 6px 0 16px; }
+@media (max-width: 820px) { .tabbar > * { min-height: 48px; } .side nav a { min-height: 46px; } }
+
+/* Llistes i formularis també han d’encaixar amb text llarg o el teclat obert. */
+.side nav { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
+.side > .brand, .side > .foot { flex-shrink: 0; }
+:where(.panel, .card, .stack, .stack-lg, .grid-2, .grid-2 > *, label.f) { min-width: 0; }
+:where(.top, .panel .body, .mem-list, .job, .sheet-in h2, .conn span) { overflow-wrap: anywhere; }
+.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+.conn span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
+:where(button, a, input, textarea, select, summary):focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; }
+@media (max-width: 820px) {
+  dialog.sheet { max-height: min(92dvh, calc(var(--vvh, 100dvh) - 8px)); }
+  .btn, .btn.sm, .icon-btn, .seg button { min-height: 44px; }
+  input[type="text"], input[type="password"], input[type="url"], input[type="search"], select, textarea.field { font-size: 16px; }
+  .sheet-foot { bottom: calc(-22px - var(--safe-b)); }
+}
+@media (max-width: 520px) { .grid-2 { grid-template-columns: minmax(0, 1fr); } }
+.sheet-in { position: relative; }
+.sheet-close { position: absolute; top: 14px; right: 14px; z-index: 1; }
+.sheet-in > h2 { padding-right: 42px; }
+.form-error { color: var(--red); font-size: 13px; overflow-wrap: anywhere; }
+dialog.sheet:has(#memForm) { width: min(780px, calc(100% - 32px)); }
+@media (max-width: 820px) {
+  .sheet-close { top: 16px; right: 10px; }
+  dialog.sheet:has(#memForm) { width: 100%; }
+}
+@media (max-width: 520px) {
+  #jobWhen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px; }
+  #jobWhen button { white-space: normal; padding: 6px 8px; }
+}
+@media (max-width: 820px) {
+  dialog.sheet { top: auto; bottom: var(--kb, 0px); margin: 0; }
+}
+
+/* Sessions obertes al terminal de l'ordinador */
+.term-sessions { margin-bottom: 22px; }
+.term-sessions h2.sec { margin: 0 0 8px; }
+.term-card { width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer; border-style: dashed; }
+.term-card:disabled { opacity: .6; cursor: progress; }
+.term-go { margin-left: auto; display: inline-flex; align-items: center; gap: 2px; font-weight: 600; color: var(--fg); }

package/web/sw.js

@@ -1,6 +1,6 @@
 // nio · service worker: obre l'app encara que no hi hagi connexió i mostra els avisos.
-const SHELL = 'nio-shell-v45';
-const FILES = ['/app', '/app/style.css', '/app/notes.css', '/app/app.js', '/app/notes.js', '/app/demo.js', '/bot.css', '/bot.js', '/board.css', '/board.js', '/favicon.svg', '/manifest.webmanifest'];
+const SHELL = 'nio-shell-v50';
+const FILES = ['/app', '/app/style.css', '/app/notes.css', '/app/call.css', '/app/app.js', '/app/notes.js', '/app/call.js', '/app/demo.js', '/bot.css', '/bot.js', '/board.css', '/board.js', '/favicon.svg', '/manifest.webmanifest'];
 
 self.addEventListener('install', (e) => {
   e.waitUntil(caches.open(SHELL).then((c) => c.addAll(FILES)).catch(() => {}));