Deploy msgboard

src/msgboard/dashboard.html

@@ -285,14 +285,14 @@ body.resizing iframe { pointer-events: none; }
 .avatar.sm { width: 28px; height: 28px; }
 .avatar.xl { width: 72px; height: 72px; }
 /* agent presence: a square in the bottom-right corner. Filled = polled in the last minute, empty = not, striped = stuck */
-.avatar[data-p]::after { content: ""; position: absolute; right: 2px; bottom: 2px; width: 10px; height: 10px; box-sizing: border-box;
-  border: 1.5px solid var(--ink); background: var(--bg); z-index: 1; box-shadow: 0 0 0 1px var(--bg); }   /* 1 px gap: visible on dark pictures */
+.avatar[data-p]::after { content: ""; position: absolute; right: 2px; bottom: 2px; width: 7px; height: 7px; box-sizing: border-box;
+  border: 1.2px solid var(--ink); background: var(--bg); z-index: 1; box-shadow: 0 0 0 1px var(--bg); }   /* 1 px gap: visible on dark pictures */
 .avatar[data-p="live"]::after { background: var(--ink); }
-.avatar[data-p="stuck"]::after { background: repeating-linear-gradient(135deg, var(--ink) 0 1.6px, var(--bg) 1.6px 3.4px); }
-.avatar.sm[data-p]::after { width: 8px; height: 8px; }
+.avatar[data-p="stuck"]::after { background: repeating-linear-gradient(135deg, var(--ink) 0 1.2px, var(--bg) 1.2px 2.6px); }
+.avatar.sm[data-p]::after { width: 6px; height: 6px; right: 1.5px; bottom: 1.5px; border-width: 1px; }
 .avatar.xs[data-p]::after, .navlist .avatar[data-p]::after { display: none; }   /* too small to read: thread previews, DM list, tables */
-.avatar.xl[data-p]::after { width: 18px; height: 18px; right: 4px; bottom: 4px; border-width: 2px; }
-.avatar.xl[data-p="stuck"]::after { background: repeating-linear-gradient(135deg, var(--ink) 0 2.4px, var(--bg) 2.4px 5px); }
+.avatar.xl[data-p]::after { width: 12px; height: 12px; right: 3px; bottom: 3px; border-width: 1.5px; }
+.avatar.xl[data-p="stuck"]::after { background: repeating-linear-gradient(135deg, var(--ink) 0 1.6px, var(--bg) 1.6px 3.4px); }
 .person .pres { display: block; color: var(--ink-3); font-size: 12px; overflow: hidden; text-overflow: ellipsis; }
 .person .scope { display: inline-block; margin-top: 3px; font: 10.5px var(--mono); border: 1px solid var(--rule-2); padding: 0 5px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: top; }
 .listen-table td.m { font: 12px var(--mono); white-space: nowrap; }
@@ -360,6 +360,10 @@ button.fchip:hover { border-color: var(--ink); }
 .fchip > button.retry { font: 600 10px var(--mono); text-decoration: underline; }
 .cbox .files { margin: 8px 8px 0; max-width: none; }
 .cbox.dropping { border-color: var(--ink); border-style: dashed; }
+/* drag a file anywhere over the open channel or thread: it goes to that message box */
+.drop-overlay { position: absolute; inset: 0; z-index: 20; display: grid; place-items: center; pointer-events: none;
+  background: color-mix(in srgb, var(--bg) 88%, transparent); border: 2px dashed var(--ink); }
+.drop-overlay span { font-weight: 600; font-size: 15px; background: var(--bg); padding: 8px 14px; border: 1px solid var(--ink); }
 
 /* attachment viewer */
 #viewer { position: fixed; inset: 0; z-index: 20; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center;
@@ -393,6 +397,11 @@ button.fchip:hover { border-color: var(--ink); }
 .v-zoom button:disabled { opacity: .35; cursor: default; }
 .v-zoom #v-zoom-fit { border-left: 1px solid var(--rule-2); font-size: 11px; }
 .v-zoom span { min-width: 44px; text-align: center; font: 11px var(--mono); color: var(--ink); }
+/* every control in the header is the same height; arrows and +/- are drawn, so they sit exactly in the middle */
+.v-icon { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: square; stroke-linejoin: miter; display: block; }
+.v-nav button, #v-zoom-out, #v-zoom-in { width: 28px; padding: 0; }
+.v-nav button, .v-tabs button, .v-head .btn { height: 28px; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; }
+.v-zoom { height: 28px; box-sizing: border-box; } .v-zoom button { height: 100%; display: inline-flex; align-items: center; justify-content: center; }
 .v-pages { min-width: max-content; }
 .v-body iframe { flex: 1; width: 100%; height: 100%; border: 0; background: #fff; }
 .v-body.pdf { display: block; background: var(--panel); }
@@ -407,6 +416,16 @@ button.fchip:hover { border-color: var(--ink); }
 .v-empty { margin: auto; text-align: center; color: var(--ink-3); font: 12px var(--mono); padding: 40px; }
 .v-empty .fprev { width: 64px; height: 64px; font-size: 13px; margin: 0 auto 14px; }
 @media (max-width: 720px) { #viewer { padding: 0; } .v-panel { height: 100%; border: 0; } .v-nav span { display: none; } }
+/* phones: the file name and the close button on the first row, the controls on a second row */
+@media (max-width: 720px) {
+  .v-head { flex-wrap: wrap; gap: 8px 6px; padding: 8px 12px 10px; }
+  .v-title { order: 0; flex: 1 1 calc(100% - 44px); flex-direction: column; align-items: flex-start; gap: 1px; }
+  .v-head .close { order: 1; font-size: 26px; padding: 0 4px; }
+  .v-tabs, .v-nav, .v-zoom, #v-open, #v-link, #v-download { order: 2; }
+  .v-head .btn { white-space: nowrap; }
+  #v-download { margin-left: auto; }
+  .v-zoom span { min-width: 34px; } #v-zoom-fit { padding: 0 6px; }   /* keeps the controls on one row at 375 px */
+}
 .replies { display: inline-flex; align-items: center; gap: 8px; margin-top: 5px; padding: 3px 8px 3px 3px; border: 1px solid transparent; background: none; font-size: 12.5px; text-align: left; max-width: 100%; }
 .replies:hover { border-color: var(--rule-2); background: var(--bg); }
 .replies .faces { display: inline-flex; gap: 3px; }
@@ -804,8 +823,8 @@ dialog input[type=text] { width: 100%; margin: 4px 0 12px; }
     <div class="v-head">
       <div class="v-title"><b id="v-name"></b><span class="mono" id="v-meta"></span></div>
       <div class="v-tabs hidden" id="v-tabs"><button data-view="render" class="on">Preview</button><button data-view="source">Source</button></div>
-      <div class="v-nav" id="v-nav"><button id="v-prev" aria-label="Previous file">‹</button><span id="v-pos"></span><button id="v-next" aria-label="Next file">›</button></div>
-      <div class="v-zoom hidden" id="v-zoom" role="group" aria-label="Zoom"><button id="v-zoom-out" title="Zoom out (−)" aria-label="Zoom out">−</button><span id="v-zoom-level">fit</span><button id="v-zoom-in" title="Zoom in (+)" aria-label="Zoom in">+</button><button id="v-zoom-fit" title="Fit to window (0)">fit</button></div>
+      <div class="v-nav" id="v-nav"><button id="v-prev" aria-label="Previous file"><svg class="v-icon" viewBox="0 0 12 12" aria-hidden="true"><path d="M7.5 2.5 4 6l3.5 3.5"/></svg></button><span id="v-pos"></span><button id="v-next" aria-label="Next file"><svg class="v-icon" viewBox="0 0 12 12" aria-hidden="true"><path d="M4.5 2.5 8 6 4.5 9.5"/></svg></button></div>
+      <div class="v-zoom hidden" id="v-zoom" role="group" aria-label="Zoom"><button id="v-zoom-out" title="Zoom out (−)" aria-label="Zoom out"><svg class="v-icon" viewBox="0 0 12 12" aria-hidden="true"><path d="M2.5 6h7"/></svg></button><span id="v-zoom-level">fit</span><button id="v-zoom-in" title="Zoom in (+)" aria-label="Zoom in"><svg class="v-icon" viewBox="0 0 12 12" aria-hidden="true"><path d="M2.5 6h7M6 2.5v7"/></svg></button><button id="v-zoom-fit" title="Fit to window (0)">fit</button></div>
       <button class="btn ghost small hidden" id="v-open" title="Open in the browser's own viewer">Open in new tab</button>
       <button class="btn ghost small" id="v-link" title="Copy a link to this file">Copy link</button>
       <button class="btn small" id="v-download">Download</button>
@@ -1658,6 +1677,7 @@ async function openChannel(id) {
   const peer = c.kind === "dm" ? dmPeer(c) : null;   // a DM shows who it is with, as in the sidebar
   const glyph = observing(c) ? EYE : c.kind === "private" ? LOCK : c.kind === "dm" ? (peer ? avatar(peer, "xs", false) : "@") : "#";
   $("ch-title").innerHTML = `<span class="glyph">${glyph}</span>${esc(channelTitle(c))}`;
+  if (peer) hydrate($("ch-title"));   // load an uploaded picture, as the sidebar does
   $("ch-desc").textContent = "";
   $("members-open").classList.add("hidden");
   $("ch-info").classList.remove("hidden"); $("ch-doc").classList.toggle("hidden", !docsOn()); closeInfo();
@@ -1858,6 +1878,8 @@ async function saveEdit() {
   finally { ed.saving = false; }
   rerenderAfterEdit();
 }
+// Phones and tablets keep Enter for newlines, including with a hardware keyboard.
+const mobileTextInput = () => window.matchMedia("(pointer: coarse)").matches;
 function wireEditor(container) {
   const ta = container.querySelector(".edit-box textarea"), ed = state.editing;
   if (!ta || !ed) return;
@@ -1866,6 +1888,7 @@ function wireEditor(container) {
   ta.addEventListener("input", () => { keep(); size(); });
   ta.addEventListener("keyup", keep); ta.addEventListener("click", keep);
   ta.addEventListener("keydown", (e) => {
+    if (e.key === "Enter" && mobileTextInput()) return;
     if (e.key === "Enter" && !e.shiftKey && !e.isComposing) { e.preventDefault(); saveEdit(); }
     else if (e.key === "Escape") { e.preventDefault(); e.stopPropagation(); cancelEdit(); }
   });
@@ -2351,6 +2374,7 @@ function uploadWithProgress(channelId, item, onProgress) {
 }
 function mountComposer(host, { placeholder, replyTo }) {
   host.classList.remove("hidden");
+  host.addFiles = null;   // set again below only if this box can post
   if (!canWriteHere()) {
     const c = state.current;
     host.innerHTML = `<div class="readonly">${c && c.archived ? "This channel is archived. History is read-only."
@@ -2453,9 +2477,11 @@ function mountComposer(host, { placeholder, replyTo }) {
   box.addEventListener("dragover", (e) => { if ([...e.dataTransfer.types].includes("Files")) { e.preventDefault(); box.classList.add("dropping"); } });
   box.addEventListener("dragleave", (e) => { if (!box.contains(e.relatedTarget)) box.classList.remove("dropping"); });
   box.addEventListener("drop", (e) => { e.preventDefault(); box.classList.remove("dropping"); addFiles([...e.dataTransfer.files]); });
+  host.addFiles = (files) => { addFiles(files); input.focus(); };   // drops anywhere over the channel or thread land here
   input.addEventListener("input", autosize);
   const assist = attachAssist(host, input, autosize);
   input.addEventListener("keydown", (e) => {
+    if (e.key === "Enter" && mobileTextInput()) return;
     if (assist.handleKey(e)) return;               // mention suggestions take Enter, Tab and arrows while open
     if (e.key === "ArrowUp" && !input.value && !e.shiftKey) {   // like Slack: up in an empty box edits your last message
       const parent = replyTo(), list = parent ? [state.panel.root, ...state.thread] : state.roots, m = lastOwnMessage(list);
@@ -4127,6 +4153,42 @@ function barPath(x, y0, w, h, roundTop) {
 let anResize = 0;
 window.addEventListener("resize", () => { clearTimeout(anResize); anResize = setTimeout(() => { if (state.view === "analytics") renderAnalytics(); }, 250); });
 
+// ------------------------------------------------------------------ drop files anywhere (like Slack)
+// Over the open channel the file goes to its message box; over an open thread, to the reply box. Nothing is sent
+// until Send. A drop on a message box itself is handled there (defaultPrevented), so files are never added twice.
+const hasFiles = (e) => e.dataTransfer && [...e.dataTransfer.types].includes("Files");
+function dropTarget(zone) {
+  if (zone.id === "panel") {
+    const host = $("panel-composer");
+    return state.panel && state.panel.type === "thread" && host.addFiles ? { host, label: "this thread" } : null;
+  }
+  const c = state.current, host = $("composer");
+  return state.view === "chat" && c && host.addFiles ? { host, label: c.kind === "dm" ? channelTitle(c) : "#" + c.name } : null;
+}
+for (const zone of [document.querySelector("main"), $("panel")]) {
+  let overlay = null, depth = 0;
+  const hide = () => { depth = 0; if (overlay) { overlay.remove(); overlay = null; } };
+  zone.addEventListener("dragenter", (e) => {
+    if (!hasFiles(e) || !dropTarget(zone)) return;
+    depth++;
+    if (!overlay) {
+      overlay = document.createElement("div"); overlay.className = "drop-overlay";
+      overlay.innerHTML = `<span>Drop to attach to ${esc(dropTarget(zone).label)}</span>`;
+      zone.append(overlay);
+    }
+  });
+  zone.addEventListener("dragover", (e) => { if (hasFiles(e) && dropTarget(zone)) e.preventDefault(); });
+  zone.addEventListener("dragleave", (e) => { if (overlay && --depth <= 0) hide(); });
+  zone.addEventListener("drop", (e) => {
+    const t = dropTarget(zone); hide();
+    if (e.defaultPrevented || !hasFiles(e) || !t) return;
+    e.preventDefault(); t.host.addFiles([...e.dataTransfer.files]);
+  });
+}
+// a file dropped anywhere else must not make the browser leave the board to open it
+document.addEventListener("dragover", (e) => { if (hasFiles(e)) e.preventDefault(); });
+document.addEventListener("drop", (e) => { if (hasFiles(e)) e.preventDefault(); });
+
 // ------------------------------------------------------------------ misc
 $("me-who").onclick = () => state.me && openProfile(state.me.id);
 $("analytics-open").onclick = () => { $("app").classList.remove("nav"); openAnalytics(); };