Office: ready-made templates, the file-type badge no longer overlaps the date, and a Full editor and Edit elsewhere option for phones

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

public/files.js

@@ -6,13 +6,23 @@ async function viewEdit([repo, ...rawParts], opts = {}) {
   const back = opts.fromOffice ? '#/office' : '#/files/' + encodeURIComponent(repo) + parts.slice(0, -1).map(s => '/' + encodeURIComponent(s)).join('');
   document.body.classList.toggle('inedit', !!opts.fromOffice); // Office tab keeps the navigation visible around the editor
   const v = $('#view');
-  v.innerHTML = `<div class="edbar"><a class="btn ghost" href="${back}">${icon('back')}${opts.fromOffice ? 'Office' : 'Close'}</a><b>${esc(name)}</b></div>
+  // On a phone the editor normally uses OnlyOffice's phone layout, which on some OnlyOffice editions only lets you read. "Full editor" asks for the desktop layout instead (scaled to fit the screen),
+  // and "Edit elsewhere" downloads a copy to edit in another app and uploads it back over this file.
+  const phone = innerWidth < 768, full = phone && store.get('oo_layout', 'auto') === 'full';
+  v.innerHTML = `<div class="edbar"><a class="btn ghost" href="${back}">${icon('back')}${opts.fromOffice ? 'Office' : 'Close'}</a><b>${esc(name)}</b>${phone ? `<button class="btn ghost" id="edfull" title="${full ? 'Back to the phone layout' : 'Use the full desktop editor (small, but it can edit)'}">${full ? 'Phone view' : 'Full editor'}</button><button class="ibtn" id="edmore" aria-label="Edit elsewhere" title="Edit in another app">${icon('more')}</button>` : ''}</div>
     <div class="edwrap"><div id="oo"></div><p class="empty" id="oomsg">Opening…</p></div>`;
+  if (phone) {
+    $('#edfull').onclick = () => { store.set('oo_layout', full ? 'auto' : 'full'); viewEdit([repo, ...rawParts], opts); };
+    $('#edmore').onclick = () => actionSheet(name, 'Edit in another app', [
+      { label: 'Download a copy', icon: 'dl', run: () => downloadItem(repo, path) },
+      { label: 'Replace with an edited copy…', icon: 'up', run: () => { const f = document.createElement('input'); f.type = 'file'; f.accept = '.' + name.split('.').pop(); f.onchange = async () => { const file = f.files[0]; if (!file) return; try { const dir = path.slice(0, path.lastIndexOf('/')) || '/', link = await sf.req(`/api2/repos/${encodeURIComponent(repo)}/update-link/?p=${encodeURIComponent(dir)}`), fd = new FormData(); fd.append('target_file', path); fd.append('parent_dir', dir); fd.append('file', file, name); const up = await fetch('/sf' + new URL(link, cfg.seafile).pathname, { method: 'POST', body: fd }); if (!up.ok) throw new Error('Could not replace it (' + up.status + ')'); toast('Replaced with your edited copy'); viewEdit([repo, ...rawParts], opts); } catch (e) { toast(e.message); } }; f.click(); } },
+    ]);
+  }
   if (!sf.token()) return (location.hash = '#/files');
   const fail = m => { const e = $('#oomsg'); if (e) { e.className = 'err'; e.textContent = m; } };
   try {
     const r = await fetch('/api/oo/config', { method: 'POST', headers: { Authorization: 'Token ' + sf.token() },
-      body: JSON.stringify({ repo, path, mobile: innerWidth < 768 }) });
+      body: JSON.stringify({ repo, path, mobile: phone && !full }) });
     const conf = await r.json();
     if (!r.ok) return fail(conf.error || 'Could not open document');
     if (!window.DocsAPI) await new Promise((ok, no) => {
@@ -22,6 +32,7 @@ async function viewEdit([repo, ...rawParts], opts = {}) {
     if (!/^#\/(edit|office\/doc)\//.test(location.hash)) return;
     $('#oomsg').remove();
     conf.events = { onError: e => toast('Editor error: ' + (e.data?.errorDescription || e.data?.errorCode || '')) };
+    if (full) { const wrap = $('.edwrap'), W = 1000, k = Math.min(1, wrap.clientWidth / W), box = $('#oo'); wrap.style.overflow = 'hidden'; box.style.cssText = `width:${W}px;height:${Math.round(wrap.clientHeight / k)}px;transform:scale(${k});transform-origin:0 0`; } // (the desktop editor is laid out wide, then shrunk to fit the phone)
     editor = new DocsAPI.DocEditor('oo', conf);
   } catch (e) { fail(e.message); }
 }

public/office.js

@@ -20,16 +20,26 @@ function ofOpen(repo, path, name) {
 }
 function ofIcon(name) { const k = OFFICE_KINDS[ofKind(name)]; return `<span class="ic ofic" style="background:${k.color}">${icon('doc')}<em>${esc(ext(name).slice(0, 4).toUpperCase())}</em></span>`; }
 
+/** Ready-made starting points (files in public/templates): the person gets their own copy to fill in. */
+const OFFICE_TEMPLATES = [
+  ['letter.docx', 'Letter', 'A formal or friendly letter, laid out', 'docx'], ['resume.docx', 'Resume', 'Summary, experience, education and skills', 'docx'], ['meeting-notes.docx', 'Meeting notes', 'Agenda, notes and action items', 'docx'],
+  ['family-newsletter.docx', 'Family newsletter', 'News, who did what and what is coming up', 'docx'], ['recipe-card.docx', 'Recipe card', 'Ingredients, steps and notes', 'docx'],
+  ['monthly-budget.xlsx', 'Monthly budget', 'Planned against actual, with the math done', 'xlsx'], ['expense-tracker.xlsx', 'Expense tracker', 'One line per purchase, totals by category', 'xlsx'],
+  ['chore-chart.xlsx', 'Chore chart', 'A week of chores with a count for each', 'xlsx'], ['meal-planner.xlsx', 'Weekly meal planner', 'Breakfast, lunch, dinner and a shopping list', 'xlsx'],
+  ['simple-presentation.pptx', 'Simple presentation', 'Title, agenda, key points and a thank-you', 'pptx'],
+];
 function viewOffice(args = []) {
   if (args[0] === 'doc') return viewEdit(args.slice(1), { fromOffice: true });
   const signed = !!sf.token();
   $('#view').innerHTML = `<div class="wrap" id="ofwrap"><div class="ptop"><h1>Office</h1><span class="pspace"></span>${signed ? `<button class="btn ghost" id="ofup">${icon('up')}Upload</button><input type="file" id="ofupf" multiple hidden accept=".docx,.doc,.odt,.rtf,.xlsx,.xls,.ods,.csv,.pptx,.ppt,.odp">` : ''}<a class="btn ghost" href="#/files">${icon('files')}All files</a></div>
     <div class="ocreate">${Object.entries(OFFICE_KINDS).map(([k, o]) => `<button class="octile" data-k="${k}" style="--c:${o.color}"><span class="ic" style="background:${o.color}">${icon('plus')}</span><span><b>New ${o.one.toLowerCase()}</b><small>${o.exts[0].toUpperCase()}</small></span></button>`).join('')}</div>
+    <details class="otplbox" id="otpl"><summary><b>Start from a template</b> <small>${OFFICE_TEMPLATES.length} ready-made documents, spreadsheets and slides</small></summary><div class="otpl">${OFFICE_TEMPLATES.map((t, i) => `<button type="button" class="octile otc" data-t="${i}" style="--c:${OFFICE_KINDS[ofKind('x.' + t[3])].color}">${ofIcon('x.' + t[3])}<span><b>${esc(t[1])}</b><small>${esc(t[2])}</small></span></button>`).join('')}</div></details>
     ${cfg.editor ? '' : '<p class="sub" style="margin:8px 0 0">Editing inside the app is switched off on this server, so documents open in Seafile instead.</p>'}
     <p class="sub" id="olib" style="margin:12px 0 0">${signed ? 'Loading…' : 'Sign in to Files to create and open documents.'}</p>
     <div id="oflt" class="ofilters" hidden><input type="search" id="oq" placeholder="Search documents" autocomplete="off" aria-label="Search documents" value="${esc(ofState.q)}"><div class="sgrp" id="okinds" role="tablist" aria-label="Kind"></div><select id="osort" class="psel" aria-label="Sort"><option value="mtime">Newest first</option><option value="name">Name</option><option value="size">Largest first</option></select></div>
     <div id="odocs"></div>${signed ? '' : '<div class="bar"><a class="btn" href="#/files">Sign in</a></div>'}</div>`;
   $('#view').querySelectorAll('.octile').forEach(t => t.onclick = () => newOfficeDoc(OFFICE_KINDS[t.dataset.k].exts[0], OFFICE_KINDS[t.dataset.k].one.toLowerCase()));
+  $('#view').querySelectorAll('.otc').forEach(b => b.onclick = () => { const t = OFFICE_TEMPLATES[+b.dataset.t]; newOfficeDoc(t[3], t[1], t[0], t[1]); });
   if (!signed) return;
   $('#ofup').onclick = () => $('#ofupf').click();
   $('#ofupf').onchange = e => { const files = [...e.target.files]; e.target.value = ''; if (files.length) ofUpload(files.map(file => ({ file, rel: '' }))); };

public/style.css

@@ -689,7 +689,7 @@ body.nav-mini .ngrp span { display: none; }
 .ofilters { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 12px 0 0; }
 .ofilters input[type=search] { flex: 1; min-width: 180px; margin: 0; }
 .orecent { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
-.octile.rc { padding: 10px 12px; }
+.octile.rc { padding: 10px 12px; } .octile .ic.ofic { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; color: #fff; flex: none; } .octile .ic.ofic svg { width: 20px; height: 20px; margin-top: -5px; } .octile .ic.ofic em { bottom: 3px; }
 .orow .rmain { min-width: 0; }
 #ofwrap.dropt { outline: 2px dashed var(--accent); outline-offset: -6px; border-radius: 14px; }
 
@@ -1109,3 +1109,5 @@ html.hc #view a:not(.btn):not(.row):not(.vcard):not(.seg a):not(.sgrp a) { text-
 .paTiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; margin: 8px 0 16px; } .paTile { min-height: 84px; padding: 12px; border-radius: 16px; border: 1px solid var(--line); background: var(--panel); text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 17px; } .paTile small { color: var(--muted); font-size: 14px; } .paTile:active { transform: scale(.97); } .paTile.low { border-color: var(--danger); } .paTile.out { opacity: .45; }
 .gifgrid { columns: 3 110px; column-gap: 6px; margin: 8px 0; } .gifc { display: block; width: 100%; margin: 0 0 6px; padding: 0; border: 0; border-radius: 10px; overflow: hidden; background: var(--panel2); break-inside: avoid; min-height: 0; cursor: pointer; } .gifc img { display: block; width: 100%; height: auto; } .gifc:focus-visible { outline: 3px solid var(--accent); }
 .srcbadge { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: var(--panel2); color: var(--muted); font-size: 11px; vertical-align: middle; }
+.otplbox { margin: 12px 0 0; } .otplbox summary { cursor: pointer; padding: 10px 2px; list-style: none; } .otplbox summary::-webkit-details-marker { display: none; } .otplbox summary::before { content: '▸ '; color: var(--accent); } .otplbox[open] summary::before { content: '▾ '; } .otplbox summary small { color: var(--muted); margin-left: 6px; }
+.otpl { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; } .octile.otc small { white-space: normal; }

public/sw.js

@@ -1,5 +1,5 @@
 // App-shell cache only; Seafile/API traffic always goes to the network.
-const CACHE = 'hub-v130';
+const CACHE = 'hub-v132';
 const KEEP = /^hub-(offline|share|who|data-)/; // caches that outlive a new version
 const SHARE = 'hub-share'; // files shared into the app from other apps, held until the person picks a folder
 const SHELL = ['/icon.svg', '/manifest.webmanifest', '/icons/icon-192.png', '/icons/apple-touch-icon.png'];

public/tasks.js

@@ -193,26 +193,26 @@ function chooseFolder(title, start, opts = {}) {
 }
 
 // Blank Office files come from valid templates (an empty 0-byte .docx/.xlsx/.pptx often will not open in the editor).
-async function createFromTemplate(repo, dir, name, x) {
+async function createFromTemplate(repo, dir, name, x, tpl) {
   const enc = encodeURIComponent;
   if (!['docx', 'xlsx', 'pptx'].includes(x)) {
     await sf.req(`/api2/repos/${enc(repo)}/file/?p=${enc(joinP(dir, name))}`, { method: 'POST', headers: FORM, body: new URLSearchParams({ operation: 'create' }) });
     return name;
   }
-  const tpl = await fetch('/templates/blank.' + x); if (!tpl.ok) throw new Error('Template missing');
+  const tplRes = await fetch('/templates/' + (tpl || 'blank.' + x)); if (!tplRes.ok) throw new Error('Template missing');
   const link = await sf.req(`/api2/repos/${enc(repo)}/upload-link/?p=${enc(dir)}`);
-  const fd = new FormData(); fd.append('parent_dir', dir); fd.append('file', await tpl.blob(), name);
+  const fd = new FormData(); fd.append('parent_dir', dir); fd.append('file', await tplRes.blob(), name);
   const r = await fetch('/sf' + new URL(link, cfg.seafile).pathname + '?ret-json=1', { method: 'POST', body: fd });
   if (!r.ok) throw new Error('Could not create ' + name);
   return ((await r.json())[0] || {}).name || name; // Seafile renames if the name is taken
 }
 
-async function newOfficeDoc(x, label) {
+async function newOfficeDoc(x, label, tpl, defName) {
   if (!sf.token()) { toast('Sign in to Files first'); location.hash = '#/files'; return; }
   let loc;
   try { loc = await officeLocation(true); } catch (e) { return toast(e.message); }
   if (!loc) return;
-  const el = openSheet('New ' + label, '', `<form><label for="nn">File name</label><input type="text" id="nn" value="Untitled" autocomplete="off" autocapitalize="off" required>
+  const el = openSheet(tpl ? 'New from template' : 'New ' + label, tpl ? label : '', `<form><label for="nn">File name</label><input type="text" id="nn" value="${esc(defName || 'Untitled')}" autocomplete="off" autocapitalize="off" required>
     <label>Saved in</label><button type="button" class="row" id="nl" style="background:var(--panel2);border-radius:12px;border:0"><span class="grow"><b id="nlt"></b></span><small style="color:var(--accent)">Change</small></button>
     <div class="bar"><button class="btn ghost" type="button" id="sx" style="flex:1;justify-content:center">Cancel</button><button class="btn" style="flex:1;justify-content:center">Create</button></div><div class="err" id="ne"></div></form>`);
   const showLoc = () => { el.querySelector('#nlt').textContent = locLabel(loc); };
@@ -221,7 +221,7 @@ async function newOfficeDoc(x, label) {
   el.querySelector('#nl').onclick = async () => {
     // Sheets don't stack, so close this one, choose, then reopen with the new location.
     const picked = await chooseFolder('Save in…', loc);
-    if (picked) { store.set('office_loc', picked); } newOfficeDoc(x, label);
+    if (picked) { store.set('office_loc', picked); } newOfficeDoc(x, label, tpl, defName);
   };
   setTimeout(() => { const t = el.querySelector('#nn'); t.focus(); t.select(); }, 50);
   el.querySelector('form').onsubmit = async e => {
@@ -230,7 +230,7 @@ async function newOfficeDoc(x, label) {
     const want = n.toLowerCase().endsWith('.' + x) ? n : n + '.' + x;
     const btn = el.querySelector('form .btn:not(.ghost)'); btn.disabled = true;
     try {
-      const name = await createFromTemplate(loc.repo, loc.dir, want, x), path = joinP(loc.dir, name);
+      const name = await createFromTemplate(loc.repo, loc.dir, want, x, tpl), path = joinP(loc.dir, name);
       addRecent(loc.repo, path, name); closeSheet();
       if (cfg.editor) location.hash = officeHash(loc.repo, path);
       else window.open(`${cfg.seafile}/lib/${encodeURIComponent(loc.repo)}/file${encP(path)}`, '_blank', 'noopener');