theseus/extensions/docx-editor/panel.html

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Word editor</title>
<link rel="icon" href="icon.svg">
<style>
:root { color-scheme: light dark;
        --bg:#0e131c; --panel:#141a24; --panel2:#191f2b; --line:rgba(255,255,255,.09);
        --ink:#e7eaf1; --mut:#8b98a9; --dim:#5e6678; --acid:#d6ff3d; --danger:#ff5b5b; }
@media (prefers-color-scheme: light) {
  :root { --bg:#f8faff; --panel:#ffffff; --panel2:#eff3fb; --line:rgba(0,0,0,.10);
          --ink:#1a1f2b; --mut:#5c6577; --dim:#8a93a5; --acid:#0AC18E; }
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--bg); color: var(--ink);
       font: 13px/1.5 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
       display: flex; flex-direction: column; }
h1 { font-size: 13px; font-weight: 600; margin: 0; }
.head { display: flex; align-items: center; gap: 8px; padding: 10px 12px;
        border-bottom: 1px solid var(--line); background: var(--panel); }
.head .ico { width: 18px; height: 18px; display: block; }
.body { flex: 1; overflow: auto; padding: 12px; }
.lede { color: var(--mut); font-size: 12px; margin: 0 0 12px; }
.btn { border: 1px solid var(--line); background: var(--panel2); color: var(--ink);
       border-radius: 7px; cursor: pointer; padding: 8px 10px; font: inherit;
       display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; }
.btn:hover { border-color: rgb(from var(--acid) r g b / .55); }
.btn.primary { background: var(--acid); color: #101418; border-color: transparent; font-weight: 600; }
.btn.primary:hover { filter: brightness(1.06); }
.btn + .btn { margin-top: 8px; }
.btn .sub { display: block; font-size: 11px; color: var(--dim); font-weight: 400; }
.btn.primary .sub { color: rgba(16,20,24,.7); }
.drop { border: 1.5px dashed var(--line); border-radius: 8px; padding: 18px 12px;
        text-align: center; color: var(--dim); font-size: 12px; margin: 12px 0; }
.drop.over { border-color: var(--acid); color: var(--ink); }
h2 { font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
     color: var(--dim); margin: 18px 0 8px; font-weight: 600; }
.doc { display: flex; align-items: center; gap: 8px; padding: 7px 8px;
       border: 1px solid var(--line); border-radius: 7px; background: var(--panel);
       margin-bottom: 6px; cursor: pointer; }
.doc:hover { border-color: rgb(from var(--acid) r g b / .5); }
.doc .meta { flex: 1; min-width: 0; }
.doc .name { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc .when { font-size: 10.5px; color: var(--dim); }
.doc .x { border: 0; background: transparent; color: var(--dim); cursor: pointer;
          font: inherit; padding: 2px 5px; border-radius: 5px; }
.doc .x:hover { color: var(--danger); background: var(--panel2); }
.tag { font-size: 9.5px; padding: 1px 5px; border-radius: 99px; border: 1px solid var(--line); color: var(--dim); }
.empty { color: var(--dim); font-size: 12px; padding: 6px 0; }
.foot { border-top: 1px solid var(--line); padding: 8px 12px; background: var(--panel);
        font-size: 11px; color: var(--dim); display: flex; gap: 8px; align-items: center; }
.foot button { border: 1px solid var(--line); background: var(--panel2); color: var(--ink);
               border-radius: 5px; cursor: pointer; padding: 3px 7px; font: inherit; font-size: 11px; }
.foot button:hover { border-color: rgb(from var(--acid) r g b / .55); }
.msg { min-height: 16px; font-size: 11.5px; color: var(--mut); margin-top: 8px; }
.msg.err { color: var(--danger); }
</style>
</head>
<body>

<div class="head"><span class="ico" aria-hidden="true"><svg width="20" height="20" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M6 2h8l6 6v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2z" fill="#2563eb"/><path d="M14 2v6h6z" fill="#1e40af"/><text x="12" y="17" text-anchor="middle" font-family="system-ui,-apple-system,sans-serif" font-size="5.5" font-weight="800" fill="#fff">DOC</text></svg></span><h1>Word editor</h1></div>

<div class="body">
  <p class="lede">Open a .docx in a full tab. Headers, footers, footnotes, page setup and
  the document's own styles survive a save; a few Word features don't, and the editor says
  which before you start.</p>

  <button class="btn primary" id="new">
    <span>📄</span><span>New document<span class="sub">A blank page</span></span>
  </button>
  <button class="btn" id="open">
    <span>📂</span><span>Open a .docx…<span class="sub">From this computer</span></span>
  </button>

  <div class="drop" id="drop">or drop a .docx here</div>

  <h2>Recent</h2>
  <div id="recent"><div class="empty">Nothing yet.</div></div>

  <div class="msg" id="msg"></div>
</div>

<div class="foot">
  <span style="flex:1">Documents are kept in a scratch folder.</span>
  <button id="folder">Folder</button>
  <button id="clear">Clear</button>
</div>

<input type="file" id="file" accept=".docx,application/vnd.openxmlformats-officedocument.wordprocessingml.document" hidden>

<script>
const $ = (id) => document.getElementById(id);
const SM = () => window.silentmode;

function say(text, err) {
  const el = $("msg");
  el.textContent = text || "";
  el.classList.toggle("err", !!err);
  clearTimeout(say._t);
  if (text) say._t = setTimeout(() => { el.textContent = ""; el.classList.remove("err"); }, 6000);
}

function ago(ts) {
  const s = Math.max(0, Math.round((Date.now() - ts) / 1000));
  if (s < 60) return "just now";
  if (s < 3600) return `${Math.round(s / 60)} min ago`;
  if (s < 86400) return `${Math.round(s / 3600)} h ago`;
  return new Date(ts).toLocaleDateString();
}

function bytesLabel(n) {
  return n > 1048576 ? `${(n / 1048576).toFixed(1)} MB` : `${Math.max(1, Math.round(n / 1024))} KB`;
}

async function toBase64(file) {
  const buf = new Uint8Array(await file.arrayBuffer());
  let s = "";
  for (let i = 0; i < buf.length; i += 0x8000) {
    s += String.fromCharCode.apply(null, buf.subarray(i, i + 0x8000));
  }
  return btoa(s);
}

async function refresh() {
  let list = [];
  try { list = await SM().invoke("listRecent", {}); }
  catch (e) { say("Couldn't read the recent list.", true); return; }
  const host = $("recent");
  host.innerHTML = "";
  if (!list.length) {
    host.innerHTML = '<div class="empty">Nothing yet.</div>';
    return;
  }
  for (const d of list) {
    const row = document.createElement("div");
    row.className = "doc";
    row.title = "Open in the editor";
    const meta = document.createElement("div");
    meta.className = "meta";
    const name = document.createElement("div");
    name.className = "name";
    name.textContent = d.name;
    const when = document.createElement("div");
    when.className = "when";
    when.textContent = `${ago(d.at)} · ${bytesLabel(d.bytes)}`;
    if (d.kind === "saved") {
      const tag = document.createElement("span");
      tag.className = "tag";
      tag.textContent = "autosaved";
      when.append(" ", tag);
    }
    meta.append(name, when);
    const x = document.createElement("button");
    x.className = "x";
    x.textContent = "✕";
    x.title = "Forget this document";
    x.addEventListener("click", async (e) => {
      e.stopPropagation();
      try { await SM().invoke("clearRecent", { id: d.id }); await refresh(); }
      catch (err) { say("Couldn't remove it.", true); }
    });
    const thumb = document.createElement("img");
    thumb.src = "icon.svg"; thumb.width = 16; thumb.height = 16; thumb.alt = "";
    row.append(thumb, meta, x);
    row.addEventListener("click", () => openEditor(d.id));
    host.append(row);
  }
}

async function openEditor(id) {
  try { await SM().invoke("openEditor", id ? { id } : {}); }
  catch (e) { say("Couldn't open the editor: " + (e && e.message || e), true); }
}

async function handleFile(file) {
  if (!/\.docx$/i.test(file.name)) { say("That isn't a .docx file.", true); return; }
  say("Opening…");
  try {
    const res = await SM().invoke("stash", { name: file.name, base64: await toBase64(file), kind: "opened" });
    await openEditor(res.id);
    await refresh();
    say("");
  } catch (e) {
    say((e && e.message || e).toString(), true);
  }
}

$("new").addEventListener("click", () => openEditor(""));
$("open").addEventListener("click", () => $("file").click());
$("file").addEventListener("change", async (e) => {
  const f = e.target.files && e.target.files[0];
  e.target.value = "";
  if (f) await handleFile(f);
});
$("folder").addEventListener("click", async () => {
  try { await SM().invoke("openFolder", {}); } catch (e) { say("Couldn't open the folder.", true); }
});
$("clear").addEventListener("click", async () => {
  try { await SM().invoke("clearRecent", {}); await refresh(); say("Cleared."); }
  catch (e) { say("Couldn't clear the list.", true); }
});

const drop = $("drop");
for (const type of ["dragenter", "dragover"]) {
  drop.addEventListener(type, (e) => { e.preventDefault(); drop.classList.add("over"); });
}
for (const type of ["dragleave", "drop"]) {
  drop.addEventListener(type, () => drop.classList.remove("over"));
}
drop.addEventListener("drop", async (e) => {
  e.preventDefault();
  const f = Array.from(e.dataTransfer?.files || [])[0];
  if (f) await handleFile(f);
});
window.addEventListener("dragover", (e) => e.preventDefault());
window.addEventListener("drop", (e) => e.preventDefault());

document.addEventListener("visibilitychange", () => { if (!document.hidden) refresh(); });
refresh();
</script>
</body>
</html>