Files: sturdier Seafile pass-through (timeouts, retries, stop on disconnect), in-place sign-in, saved folder lists, upload name clashes, undo and recycle bin, library search, zip downloads, share link options, text viewer and editor

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

public/files.js

@@ -71,7 +71,8 @@ async function loadLibs(active) {
 // ---- Files: browse, select, move/copy/delete, rename, upload (drag in from the computer, drag a file out to download)
 let fv = null, libsP = Promise.resolve(), libNames = {}, libPerm = {};
 const SORTS = [['name', 'Name'], ['mtime', 'Date modified'], ['size', 'Size'], ['type', 'Kind']];
-const nameCmp = (a, b) => a.name.localeCompare(b.name, undefined, { numeric: true, sensitivity: 'base' });
+const collator = new Intl.Collator(undefined, { numeric: true, sensitivity: 'base' }); // (one collator is much faster than localeCompare in a big folder)
+const nameCmp = (a, b) => collator.compare(a.name, b.name);
 function sortItems(items, s) {
   const by = { name: nameCmp, mtime: (a, b) => a.mtime - b.mtime, size: (a, b) => (a.size || 0) - (b.size || 0), type: (a, b) => ext(a.name).localeCompare(ext(b.name)) }[s.k] || nameCmp;
   return [...items].sort((a, b) => a.type !== b.type ? (a.type === 'dir' ? -1 : 1) // folders stay on top
@@ -97,8 +98,7 @@ function deleteItems(repo, dir, items) {
   const one = items.length === 1;
   confirmSheet(one ? (items[0].type === 'dir' ? 'Delete folder?' : 'Delete file?') : `Delete ${items.length} items?`,
     one ? items[0].name + (items[0].type === 'dir' ? ' and everything in it' : '') : 'Folders are deleted with everything inside them', 'Delete', async () => {
-      try { await removeItems(repo, dir, items); toast(one ? 'Deleted' : items.length + ' items deleted'); } catch (e) { toast(e.message); }
-      afterChange(repo, dir);
+      try { await removeItems(repo, dir, items); afterChange(repo, dir); if (!(await offerUndo(repo, dir, items, () => afterChange(repo, dir)))) toast(one ? 'Deleted' : items.length + ' items deleted'); } catch (e) { toast(e.message); afterChange(repo, dir); }
     });
 }
 async function transferItems(mode, repo, dir, names, dst) {
@@ -130,9 +130,11 @@ async function downloadItem(repo, path) {
 // ---- Uploads: a queue that survives leaving the folder, with progress, retries and a way to cancel
 const uq = { items: [], running: 0 };
 const upActive = () => uq.items.some(x => x.state === 'wait' || x.state === 'up');
-function enqueueUploads(repo, dir, entries) {
+async function enqueueUploads(repo, dir, entries) {
   if (!entries.length) return;
-  for (const e of entries) uq.items.push({ repo, dir, file: e.file, rel: e.rel || '', pct: 0, state: 'wait', tries: 0 });
+  entries = await resolveUploadConflicts(repo, dir, entries); // a name that is already there: replace, keep both, or skip
+  if (!entries.length) return;
+  for (const e of entries) uq.items.push({ repo, dir, file: e.file, rel: e.rel || '', replace: !!e.replace, pct: 0, state: 'wait', tries: 0 });
   drawUpBar(); pumpUploads();
 }
 function pumpUploads() {
@@ -151,7 +153,7 @@ async function sendUpload(it) {
       const link = await sf.req(`/api2/repos/${enc(it.repo)}/upload-link/?p=${enc(it.dir)}`); // a fresh link each time, so an expired one never blocks a retry
       await new Promise((ok, no) => {
         const x = it.xhr = new XMLHttpRequest(), fd = new FormData();
-        fd.append('parent_dir', it.dir); fd.append('replace', '0'); if (it.rel) fd.append('relative_path', it.rel); fd.append('file', it.file, it.file.name);
+        fd.append('parent_dir', it.dir); fd.append('replace', it.replace ? '1' : '0'); if (it.rel) fd.append('relative_path', it.rel); fd.append('file', it.file, it.file.name);
         x.open('POST', '/sf' + new URL(link, cfg.seafile).pathname + '?ret-json=1');
         x.upload.onprogress = e => { if (e.lengthComputable) { it.pct = e.loaded / e.total; drawUpBar(); } };
         x.onload = () => x.status >= 200 && x.status < 300 ? ok() : no(Object.assign(new Error(x.status === 413 ? 'Too large for the server' : x.status === 403 ? 'Not allowed (or out of space)' : 'Upload failed (' + x.status + ')'), { fatal: x.status >= 400 && x.status < 500 }));
@@ -162,8 +164,10 @@ async function sendUpload(it) {
       return;
     } catch (e) {
       if (it.cancelled) throw e;
-      if (e.fatal || !sf.token() || it.tries >= 3) throw new Error(it.file.name + ': ' + e.message);
-      await sleep(1500 * it.tries);
+      if (e.fatal || !sf.token()) throw new Error(it.file.name + ': ' + e.message);
+      if (!navigator.onLine) { it.waiting = true; drawUpBar(); await waitOnline(); it.waiting = false; it.tries = Math.max(0, it.tries - 1); } // no connection: wait for it instead of failing
+      else if (it.tries >= 5) throw new Error(it.file.name + ': ' + e.message);
+      else await sleep(Math.min(15000, 1500 * 2 ** (it.tries - 1)));
     }
   }
 }
@@ -181,7 +185,7 @@ function drawUpBar() {
   if (live.length) {
     const total = uq.items.length, doneN = uq.items.filter(x => x.state === 'done').length, cur = live.find(x => x.state === 'up') || live[0];
     const pct = Math.round(((doneN + live.reduce((a, x) => a + (x.state === 'up' ? x.pct : 0), 0)) / total) * 100);
-    b.innerHTML = `<div class="upm"><b>Uploading ${esc(live.length === 1 ? cur.file.name : live.length + ' files')}</b><small>${pct}%</small><i style="width:${pct}%"></i></div><button class="btn ghost" id="upx">Cancel</button>`;
+    b.innerHTML = `<div class="upm"><b>${live.some(x => x.waiting) ? 'Waiting for a connection…' : 'Uploading ' + esc(live.length === 1 ? cur.file.name : live.length + ' files')}</b><small>${pct}%${cur.tries > 1 && !cur.waiting ? ' · retrying' : ''}</small><i style="width:${pct}%"></i></div><button class="btn ghost" id="upx">Cancel</button>`;
     $('#upx').onclick = () => { uq.items.forEach(x => { if (x.state === 'wait') x.state = 'cancel'; if (x.state === 'up') { x.cancelled = true; x.xhr && x.xhr.abort(); } }); uq.items = uq.items.filter(x => x.state === 'fail'); drawUpBar(); };
   } else {
     b.innerHTML = `<div class="upm"><b>${bad.length} ${bad.length === 1 ? 'upload' : 'uploads'} failed</b><small>${esc(bad[0].err || '')}</small></div><button class="btn" id="upr">Retry</button><button class="btn ghost" id="upd">Dismiss</button>`;
@@ -221,7 +225,7 @@ async function loadDir(repo, dir) {
   const hash = p => '#/files/' + enc(repo) + p.split('/').filter(Boolean).map(s => '/' + enc(s)).join('');
   const segs = dir.split('/').filter(Boolean);
   const crumbs = `<button data-go="/">${esc(libNames[repo] || 'Library')}</button>` + segs.map((s, i) => `<span>/</span><button data-go="/${esc(segs.slice(0, i + 1).join('/'))}">${esc(s)}</button>`).join('');
-  const v = fv = { root: main, repo, dir, items: [], sel: new Set(), selecting: false, last: null, filter: '', tok: null };
+  const v = fv = { root: main, repo, dir, items: [], sel: new Set(), selecting: false, last: null, filter: '', tok: null, limit: 300, stale: false };
   const sortCfg = () => store.get('files_sort', { k: 'name', d: 1 });
   const byName = n => v.items.find(x => x.name === n);
   const selItems = () => v.items.filter(x => v.sel.has(x.name));
@@ -239,12 +243,12 @@ async function loadDir(repo, dir) {
           <div class="bar">${ro ? '' : `<button class="btn ghost" data-a="move" ${n ? '' : 'disabled'}>${icon('files')}Move</button>`}
           <button class="btn ghost" data-a="copy" ${n ? '' : 'disabled'}>${icon('copy')}Copy</button>
           ${ro ? '' : `<button class="btn ghost" data-a="del" ${n ? '' : 'disabled'} style="color:var(--danger)">${icon('trash')}Delete</button>`}
-          <button class="btn ghost" data-a="more" aria-label="More" ${one ? '' : 'disabled'}>${icon('more')}</button></div></div>`
+          <button class="btn ghost" data-a="zip" ${n ? '' : 'disabled'}>${icon('dl')}Zip</button><button class="btn ghost" data-a="more" aria-label="More" ${one ? '' : 'disabled'}>${icon('more')}</button></div></div>`
       : `<div class="bar"><a class="btn ghost backbtn" href="#/files">${icon('back')}Libraries</a>
           ${ro ? '' : `<button class="btn ghost" data-a="up">${icon('up')}Upload</button><button class="btn ghost" data-a="new">${icon('newdir')}New…</button>`}
           <button class="btn ghost" data-a="sel">${icon('check')}Select</button>
           <button class="btn ghost" data-a="sort" aria-label="Sort">${icon('sort')}</button>
-          <button class="btn ghost" data-a="refresh" aria-label="Refresh">${icon('refresh')}</button>
+          <button class="btn ghost" data-a="refresh" aria-label="Refresh">${icon('refresh')}</button><button class="btn ghost" data-a="lib" aria-label="More for this folder">${icon('more')}</button>
           <input id="upf" type="file" multiple hidden><input id="upd2" type="file" webkitdirectory hidden></div>`;
   };
   const drawItems = () => {
@@ -256,8 +260,9 @@ async function loadDir(repo, dir) {
         <button class="rmain" aria-label="${d ? 'Open folder ' : 'Open '}${esc(it.name)}"><span class="ic" style="background:${d ? '#e0a82b' : OFFICE_EXT.has(ext(it.name)) ? '#e0742b' : '#6a7280'}">${icon(d ? 'files' : 'file')}</span>
         <span class="grow"><b>${esc(it.name)}</b><small>${d ? fmtDate(it.mtime) : fmtSize(it.size) + ' · ' + fmtDate(it.mtime)}</small></span></button>
         ${v.selecting ? '' : `<button class="ibtn" data-more aria-label="Actions for ${esc(it.name)}">${icon('more')}</button>`}</div>`; };
-    box.innerHTML = list.length ? `<div class="list">${list.map(row).join('')}</div>`
-      : `<p class="empty">${v.items.length ? 'Nothing matches “' + esc(v.filter) + '”' : ro ? 'This folder is empty' : 'This folder is empty. Drop files here or tap Upload.'}</p>`;
+    box.innerHTML = (v.stale ? `<p class="sub" style="margin:0 0 8px" role="status">${v.stale === 'old' ? 'Showing the last saved list. ' : ''}${esc(v.staleWhy || '')}</p>` : '') + (list.length ? `<div class="list">${list.slice(0, v.limit).map(row).join('')}</div>${list.length > v.limit ? `<div class="bar" style="justify-content:center"><button class="btn ghost" id="fmore">Show ${Math.min(300, list.length - v.limit)} more (${list.length - v.limit} not shown)</button></div>` : ''}`
+      : `<p class="empty">${v.items.length ? 'Nothing matches “' + esc(v.filter) + '”' : ro ? 'This folder is empty' : 'This folder is empty. Drop files here or tap Upload.'}</p>`);
+    const fm = $('#fmore'); if (fm) fm.onclick = () => { v.limit += 300; drawItems(); };
     const dirs = v.items.filter(x => x.type === 'dir').length, files = v.items.length - dirs, size = v.items.reduce((a, x) => a + (x.size || 0), 0);
     $('#fsum').textContent = v.items.length ? [dirs && dirs + (dirs === 1 ? ' folder' : ' folders'), files && files + (files === 1 ? ' file' : ' files'), size && fmtSize(size)].filter(Boolean).join(' · ') : '';
   };
@@ -275,6 +280,7 @@ async function loadDir(repo, dir) {
     const p = joinP(dir, it.name), d = it.type === 'dir', a = [{ label: 'Share link', icon: 'copy', run: () => shareLink(repo, p, d) }];
     if (!ro) a.push({ label: 'Rename', icon: 'edit', run: () => renameItem(repo, p, it.name, dir, d) });
     if (!d) a.push({ label: 'Download', icon: 'dl', run: () => downloadItem(repo, p) });
+    if (d) a.push({ label: 'Download as zip', icon: 'dl', run: () => zipDownload(repo, dir, [it.name]) });
     if (!d) a.push({ label: 'Version history', icon: 'refresh', run: () => fileHistory(repo, p, it.name, ro) });
     return a;
   };
@@ -292,6 +298,13 @@ async function loadDir(repo, dir) {
     done: () => { v.selecting = false; v.sel.clear(); redraw(); },
     sel: () => { v.selecting = true; redraw(); },
     refresh: () => v.reload(),
+    zip: () => v.sel.size && zipDownload(repo, dir, [...v.sel]),
+    lib: () => actionSheet(dir === '/' ? (libNames[repo] || 'Library') : dir.split('/').pop(), 'This folder', [
+      { label: 'Search this library', icon: 'refresh', run: () => libSearch(repo) },
+      { label: 'Recycle bin', icon: 'trash', run: () => recycleBin(repo, dir) },
+      ...(dir === '/' ? [] : [{ label: 'Download this folder as zip', icon: 'dl', run: () => zipDownload(repo, dir.replace(/\/[^/]*$/, '') || '/', [dir.split('/').pop()]) }]),
+      ...(v.items.length ? [{ label: 'Download everything here as zip', icon: 'dl', run: () => zipDownload(repo, dir, v.items.map(x => x.name)) }] : []),
+    ]),
     sort: () => { const c = sortCfg(); actionSheet('Sort by', 'Folders stay on top', SORTS.map(([k, l]) => ({ label: l + (c.k === k ? (c.d > 0 ? '  ↑' : '  ↓') : ''), icon: 'sort',
       run: () => { store.set('files_sort', { k, d: c.k === k ? -c.d : 1 }); drawItems(); } }))); },
     up: () => actionSheet('Upload', '', [{ label: 'Files', icon: 'up', run: () => $('#upf').click() }, { label: 'A folder', icon: 'newdir', run: () => $('#upd2').click() }]),
@@ -368,15 +381,27 @@ async function loadDir(repo, dir) {
   };
 
   v.reload = async quiet => {
-    const tok = v.tok = Symbol(); if (!quiet) $('#items').innerHTML = '<p class="empty">Loading…</p>';
+    const tok = v.tok = Symbol(), saved = dcGet(repo, dir);
+    const restore = () => { if (v.scrolled) return; v.scrolled = true; const y = fScroll.get(location.hash); if (y) requestAnimationFrame(() => { const view = $('#view'); if (view) view.scrollTop = y; }); };
+    if (!quiet) {
+      if (!v.items.length && saved) { v.items = saved.items; v.stale = 'old'; v.staleWhy = 'Updating…'; redraw(); restore(); } // the saved list at once, the real one right behind it
+      else $('#items').innerHTML = '<p class="empty">Loading…</p>';
+    }
     try {
       const items = await sf.req(`/api2/repos/${enc(repo)}/dir/?p=${enc(dir)}`);
       if (v.tok !== tok || !document.contains(main)) return;
-      v.items = items; for (const n of [...v.sel]) if (!byName(n)) v.sel.delete(n);
-      redraw();
+      v.items = items; v.stale = false; for (const n of [...v.sel]) if (!byName(n)) v.sel.delete(n);
+      dcPut(repo, dir, items);
+      redraw(); restore();
     } catch (e) {
       if (v.tok !== tok || !document.contains(main)) return;
       if (!sf.token()) return route();
+      const why = navigator.onLine ? e.message : 'You are offline.';
+      if (saved && v.items.length) { // keep showing the saved list instead of an error
+        v.stale = 'old'; v.staleWhy = why + ' Saved ' + fmtDate(saved.t / 1000) + '. '; redraw(); restore();
+        const n = $('#items .sub'); if (n) { n.insertAdjacentHTML('beforeend', '<a href="#" id="fretry2" style="color:var(--accent)">Try again</a>'); $('#fretry2').onclick = ev => { ev.preventDefault(); v.reload(); }; }
+        return;
+      }
       $('#items').innerHTML = `<p class="err">${esc(navigator.onLine ? e.message : 'You are offline. ' + e.message)}</p><div class="bar"><button class="btn ghost" id="fretry">Try again</button></div>`;
       $('#fretry').onclick = () => v.reload();
     }