clay-server 5.0.0-beta.2 → 5.0.0-beta.3

package/lib/public/modules/session-folder-dialogs.js

@@ -0,0 +1,173 @@
+// Custom modal dialogs for session folders (rename entry and the folder picker). Built on the existing confirm-dialog look; no browser-native
+// prompt, confirm or alert. The open dialog is tracked in the store
+// (sessionFolderModal); this module only owns the functions.
+
+import { store } from './store.js';
+import { escapeHtml } from './utils.js';
+import { iconHtml, refreshIcons } from './icons.js';
+import { UNFILED_ID } from './session-folder-layout.js';
+
+var FOCUSABLE = "button:not([disabled]), input, [tabindex]:not([tabindex='-1'])";
+
+function modalState() {
+  return store.get('sessionFolderModal');
+}
+
+export function closeFolderModal() {
+  var modal = modalState();
+  if (!modal) return;
+  store.set({ sessionFolderModal: null, sessionFolderDelete: null });
+  document.removeEventListener("keydown", onModalKey, true);
+  modal.root.remove();
+  if (modal.restoreFocus && document.body.contains(modal.restoreFocus)) modal.restoreFocus.focus();
+}
+
+export function isFolderModalOpen() {
+  return !!modalState();
+}
+
+// Dismissal by the user (Escape, backdrop) can be vetoed by the dialog, for
+// example while a server request it started is still in flight.
+function requestClose() {
+  var modal = modalState();
+  if (modal && typeof modal.canClose === "function" && !modal.canClose()) return;
+  closeFolderModal();
+}
+
+function onModalKey(event) {
+  var modal = modalState();
+  if (!modal) return;
+  if (event.key === "Escape") {
+    event.preventDefault();
+    event.stopPropagation();
+    requestClose();
+    return;
+  }
+  if (event.key !== "Tab") return;
+  var focusable = modal.root.querySelectorAll(FOCUSABLE);
+  if (!focusable.length) return;
+  var first = focusable[0];
+  var last = focusable[focusable.length - 1];
+  var active = document.activeElement;
+  if (!modal.root.contains(active)) { event.preventDefault(); first.focus(); }
+  else if (event.shiftKey && active === first) { event.preventDefault(); last.focus(); }
+  else if (!event.shiftKey && active === last) { event.preventDefault(); first.focus(); }
+}
+
+export function createModal(kind, title, bodyEl, actions, canClose) {
+  closeFolderModal();
+  var restoreFocus = document.activeElement;
+  var root = document.createElement("div");
+  root.className = "session-folder-modal";
+  root.dataset.modalKind = kind;
+  var backdrop = document.createElement("div");
+  backdrop.className = "confirm-backdrop";
+  backdrop.addEventListener("click", requestClose);
+  var dialog = document.createElement("div");
+  dialog.className = "confirm-dialog session-folder-dialog";
+  dialog.setAttribute("role", "dialog");
+  dialog.setAttribute("aria-modal", "true");
+  dialog.setAttribute("aria-label", title);
+  var heading = document.createElement("div");
+  heading.className = "session-folder-dialog-title";
+  heading.textContent = title;
+  dialog.appendChild(heading);
+  dialog.appendChild(bodyEl);
+  var bar = document.createElement("div");
+  bar.className = "confirm-actions";
+  for (var i = 0; i < actions.length; i++) bar.appendChild(actions[i]);
+  dialog.appendChild(bar);
+  root.appendChild(backdrop);
+  root.appendChild(dialog);
+  store.set({ sessionFolderModal: { root: root, kind: kind, restoreFocus: restoreFocus, canClose: canClose || null } });
+  document.addEventListener("keydown", onModalKey, true);
+  document.body.appendChild(root);
+  refreshIcons();
+  return dialog;
+}
+
+export function button(label, className, onClick) {
+  var el = document.createElement("button");
+  el.type = "button";
+  el.className = "confirm-btn " + className;
+  el.textContent = label;
+  el.addEventListener("click", onClick);
+  return el;
+}
+
+export function openFolderNameDialog(options) {
+  var body = document.createElement("div");
+  body.className = "session-folder-dialog-body";
+  var input = document.createElement("input");
+  input.type = "text";
+  input.className = "session-folder-input";
+  input.maxLength = 60;
+  input.value = options.initial || "";
+  input.setAttribute("aria-label", "Folder name");
+  input.placeholder = "Folder name";
+  var hint = document.createElement("div");
+  hint.className = "session-folder-input-hint";
+  hint.setAttribute("role", "alert");
+  body.appendChild(input);
+  body.appendChild(hint);
+  function submit() {
+    var name = input.value.replace(/\s+/g, " ").trim();
+    if (!name) { hint.textContent = "Enter a folder name."; input.focus(); return; }
+    var lower = name.toLowerCase();
+    if (lower === "favorites" || lower === "unfiled") { hint.textContent = "That name is reserved."; input.focus(); return; }
+    var taken = options.existing || [];
+    for (var i = 0; i < taken.length; i++) {
+      if (taken[i].id !== options.selfId && taken[i].name.toLowerCase() === lower) { hint.textContent = "A folder with that name already exists."; input.focus(); return; }
+    }
+    closeFolderModal();
+    options.onSubmit(name);
+  }
+  input.addEventListener("keydown", function (event) {
+    if (event.key === "Enter") { event.preventDefault(); submit(); }
+  });
+  createModal("name", options.title, body, [
+    button("Cancel", "confirm-cancel", closeFolderModal),
+    button(options.submitLabel || "Save", "confirm-ok", submit),
+  ]);
+  input.focus();
+  input.select();
+}
+
+// Lists every custom folder and Unfiled (real destinations only; Favorites is a tag); the current one is marked.
+// "New folder" hands off to the caller, which creates and then moves.
+export function openFolderPicker(options) {
+  var body = document.createElement("div");
+  body.className = "session-folder-picker";
+  body.setAttribute("role", "listbox");
+  body.setAttribute("aria-label", "Folders");
+  var choices = [];
+  for (var i = 0; i < options.folders.length; i++) choices.push({ id: options.folders[i].id, label: options.folders[i].name, icon: "folder" });
+  choices.push({ id: UNFILED_ID, label: "Unfiled", icon: "inbox" });
+  choices.forEach(function (choice) {
+    var row = document.createElement("button");
+    row.type = "button";
+    row.className = "session-folder-choice" + (choice.id === options.current ? " current" : "");
+    row.setAttribute("role", "option");
+    row.setAttribute("aria-selected", String(choice.id === options.current));
+    row.innerHTML = iconHtml(choice.icon) + '<span class="session-folder-choice-label">' + escapeHtml(choice.label) + "</span>" + (choice.id === options.current ? iconHtml("check") : "");
+    row.addEventListener("click", function () {
+      closeFolderModal();
+      if (choice.id !== options.current) options.onPick(choice.id === UNFILED_ID ? null : choice.id);
+    });
+    body.appendChild(row);
+  });
+  if (options.onNewFolder) {
+    var add = document.createElement("button");
+    add.type = "button";
+    add.className = "session-folder-choice session-folder-choice-new";
+    add.innerHTML = iconHtml("folder-plus") + '<span class="session-folder-choice-label">New folder</span>';
+    add.addEventListener("click", function () {
+      closeFolderModal();
+      options.onNewFolder();
+    });
+    body.appendChild(add);
+  }
+  createModal("picker", options.title, body, [button("Cancel", "confirm-cancel", closeFolderModal)]);
+  var current = body.querySelector(".current") || body.firstChild;
+  if (current) current.focus();
+}

package/lib/public/modules/session-folder-dnd.js

@@ -0,0 +1,214 @@
+// Live-preview drag and drop for reordering custom folders (desktop pointer).
+//
+// While a folder block is dragged, its neighbours slide aside (CSS transforms,
+// expanded contents included) into the proposed order and the dragged block
+// shows as a dashed placeholder in its proposed slot. Nothing is sent until a
+// valid drop; cancel, Escape, outside drops, rerenders, project/DM changes and
+// disconnects all restore the original order. Favorites and Unfiled are not
+// part of the movable set, so they can neither move nor be displaced.
+//
+// Hit testing uses each block's ORIGINAL layout position (measured once at drag
+// start, parent-relative), never its transformed position, so moving blocks
+// cannot shift their own hitboxes and cause flicker. The drag lives in the store
+// (sessionFolderDrag); this module only owns the functions.
+
+import { store } from './store.js';
+import { sendFolderOp } from './session-folders.js';
+
+var SETTLE_FALLBACK_MS = 1500;
+var WATCHDOG_MS = 500;
+var STALE_MS = 1500;
+
+function drag() {
+  var current = store.get('sessionFolderDrag');
+  return current && current.type === "folder" ? current : null;
+}
+
+function blockFor(id) {
+  return document.querySelector('.session-folder-folder[data-folder-id="' + id + '"]');
+}
+
+function allBlocks() {
+  return document.querySelectorAll(".session-folder-folder.folder-dnd");
+}
+
+function sameOrder(a, b) {
+  if (a.length !== b.length) return false;
+  for (var i = 0; i < a.length; i++) if (a[i] !== b[i]) return false;
+  return true;
+}
+
+function findEntry(layout, id) {
+  for (var i = 0; i < layout.length; i++) if (layout[i].id === id) return layout[i];
+  return null;
+}
+
+// Pure: where the dragged folder would land for a pointer at `y` (parent-relative).
+export function proposeOrder(layout, id, y) {
+  var others = layout.filter(function (entry) { return entry.id !== id; });
+  var index = 0;
+  for (var i = 0; i < others.length; i++) {
+    if (others[i].top + others[i].height / 2 < y) index += 1;
+  }
+  var order = others.map(function (entry) { return entry.id; });
+  order.splice(index, 0, id);
+  return order;
+}
+
+// Pure: translateY for each folder so the stack matches `order`.
+export function displacements(layout, gap, order) {
+  var start = layout[0].top;
+  for (var s = 1; s < layout.length; s++) if (layout[s].top < start) start = layout[s].top;
+  var result = {};
+  var cursor = start;
+  for (var i = 0; i < order.length; i++) {
+    var entry = findEntry(layout, order[i]);
+    result[order[i]] = Math.round((cursor - entry.top) * 100) / 100;
+    cursor += entry.height + gap;
+  }
+  return result;
+}
+
+function paint(state) {
+  var blocks = allBlocks();
+  var shifts = displacements(state.layout, state.gap, state.proposed);
+  for (var i = 0; i < blocks.length; i++) {
+    var id = blocks[i].dataset.folderId;
+    var shift = shifts[id] || 0;
+    blocks[i].style.transform = shift ? "translateY(" + shift + "px)" : "";
+    blocks[i].classList.toggle("folder-dnd-source", id === state.id);
+  }
+}
+
+function mark(state) {
+  var movable = document.querySelectorAll(".session-folder-folder");
+  for (var i = 0; i < movable.length; i++) movable[i].classList.add("folder-dnd");
+  paint(state);
+}
+
+function unmark() {
+  var blocks = allBlocks();
+  for (var i = 0; i < blocks.length; i++) {
+    blocks[i].style.transform = "";
+    blocks[i].classList.remove("folder-dnd", "folder-dnd-source");
+  }
+}
+
+function removeListeners() {
+  document.removeEventListener("dragover", onDragOver, true);
+  document.removeEventListener("drop", onDrop, true);
+  document.removeEventListener("dragend", onDragEnd, true);
+  document.removeEventListener("keydown", onKey, true);
+}
+
+export function cancelFolderDrag() {
+  var state = drag();
+  if (!state) return;
+  removeListeners();
+  unmark();
+  store.set({ sessionFolderDrag: null });
+}
+
+function onDragOver(event) {
+  var state = drag();
+  if (!state || state.settling) return;
+  var root = blockFor(state.id);
+  var parent = root && root.parentElement;
+  if (!parent) return;
+  var rect = parent.getBoundingClientRect();
+  var inside = event.clientX >= rect.left && event.clientX <= rect.right && event.clientY >= rect.top && event.clientY <= rect.bottom;
+  var next = inside ? proposeOrder(state.layout, state.id, event.clientY - rect.top) : state.original;
+  var now = Date.now();
+  if (!sameOrder(next, state.proposed) || now - state.seen > 250 || state.inside !== inside) {
+    var updated = Object.assign({}, state, { proposed: next, seen: now, inside: inside });
+    store.set({ sessionFolderDrag: updated });
+    if (!sameOrder(next, state.proposed)) paint(updated);
+  }
+  if (inside) {
+    event.preventDefault();
+    if (event.dataTransfer) event.dataTransfer.dropEffect = "move";
+  } else if (event.dataTransfer) {
+    event.dataTransfer.dropEffect = "none";
+  }
+}
+
+function onDrop(event) {
+  var state = drag();
+  if (!state || state.settling) return;
+  if (!state.inside || sameOrder(state.proposed, state.original)) { cancelFolderDrag(); return; }
+  event.preventDefault();
+  var at = state.proposed.indexOf(state.id);
+  var beforeId = at < state.proposed.length - 1 ? state.proposed[at + 1] : null;
+  var targetId = beforeId || state.proposed[at - 1];
+  // Keep the previewed order on screen until the server's snapshot rerenders it.
+  store.set({ sessionFolderDrag: Object.assign({}, state, { settling: true, baseState: store.get('sessionFolders') }) });
+  sendFolderOp({ op: "reorder_folder", folderId: state.id, targetId: targetId, insertBefore: !!beforeId });
+  var token = state.id;
+  setTimeout(function () {
+    var current = drag();
+    if (current && current.settling && current.id === token) cancelFolderDrag();
+  }, SETTLE_FALLBACK_MS);
+}
+
+function onDragEnd() {
+  var state = drag();
+  if (state && !state.settling) cancelFolderDrag();
+}
+
+function onKey(event) {
+  if (event.key === "Escape" && drag()) cancelFolderDrag();
+}
+
+function watchdog() {
+  var state = drag();
+  if (!state || state.settling) return;
+  if (Date.now() - state.seen > STALE_MS) { cancelFolderDrag(); return; }
+  setTimeout(watchdog, WATCHDOG_MS);
+}
+
+// Called after a list rerender replaced the DOM: the preview is re-applied to the
+// fresh blocks, or dropped once the server snapshot it was waiting for arrived.
+export function reapplyFolderDragPreview() {
+  var state = drag();
+  if (!state) return;
+  if (state.settling && store.get('sessionFolders') !== state.baseState) { cancelFolderDrag(); return; }
+  if (!blockFor(state.id)) { cancelFolderDrag(); return; }
+  mark(state);
+}
+
+function ghostFor(label) {
+  var ghost = document.createElement("div");
+  ghost.className = "session-folder-drag-ghost";
+  ghost.textContent = label;
+  document.body.appendChild(ghost);
+  setTimeout(function () { ghost.remove(); }, 0);
+  return ghost;
+}
+
+export function wireFolderDrag(header, folderId, label) {
+  header.setAttribute("draggable", "true");
+  header.addEventListener("dragstart", function (event) {
+    var root = header.closest(".session-folder-folder");
+    var parent = root && root.parentElement;
+    if (!parent) return;
+    var parentRect = parent.getBoundingClientRect();
+    var blocks = Array.prototype.filter.call(parent.children, function (child) { return child.classList.contains("session-folder-folder"); });
+    var layout = blocks.map(function (block) {
+      var rect = block.getBoundingClientRect();
+      return { id: block.dataset.folderId, top: rect.top - parentRect.top, height: rect.height };
+    });
+    var gap = layout.length > 1 ? Math.max(0, layout[1].top - (layout[0].top + layout[0].height)) : 2;
+    var original = layout.map(function (entry) { return entry.id; });
+    var state = { type: "folder", id: folderId, original: original, proposed: original.slice(), layout: layout, gap: gap, seen: Date.now(), inside: true, settling: false };
+    store.set({ sessionFolderDrag: state });
+    event.dataTransfer.effectAllowed = "move";
+    event.dataTransfer.setData("text/plain", folderId);
+    if (event.dataTransfer.setDragImage) event.dataTransfer.setDragImage(ghostFor(label), 14, 14);
+    document.addEventListener("dragover", onDragOver, true);
+    document.addEventListener("drop", onDrop, true);
+    document.addEventListener("dragend", onDragEnd, true);
+    document.addEventListener("keydown", onKey, true);
+    setTimeout(function () { var live = drag(); if (live) mark(live); }, 0);
+    setTimeout(watchdog, WATCHDOG_MS);
+  });
+}

package/lib/public/modules/session-folder-draft.js

@@ -0,0 +1,184 @@
+// The temporary "new folder" draft: a folder header row in the continuous folder
+// list (after the custom folders, before Unfiled) with an editable name. It is not
+// a folder until the server acknowledges the creation, so it is never part of
+// drag-and-drop, ordering or counts. The draft lives in the store
+// (sessionFolderCreate) and survives list rerenders and server updates.
+
+import { store } from './store.js';
+import { iconHtml } from './icons.js';
+import { currentFolderState, cancelFolderCreate, updateFolderCreateDraft, submitFolderCreate } from './session-folders.js';
+
+// The desktop list and the mobile sheet can both be in the DOM, but only the
+// visible one is the user's; a hidden copy must never be captured or focused.
+function findDraftInput() {
+  var inputs = document.querySelectorAll(".session-folder-create-input");
+  for (var i = 0; i < inputs.length; i++) {
+    if (inputs[i] === document.activeElement || inputs[i].getClientRects().length) return inputs[i];
+  }
+  return null;
+}
+
+// Called right before a list rerender discards the row: remembers the draft,
+// the caret and whether the input had focus, so the rebuilt row can restore them.
+export function captureFolderDraft() {
+  var create = store.get('sessionFolderCreate');
+  var input = findDraftInput();
+  if (!create || !input) return;
+  // A row built moments ago still has its focus restore queued; it says nothing yet.
+  if (input.dataset.focusPending === "1") return;
+  var focused = document.activeElement === input;
+  if (create.draft === input.value && create.focus === focused && create.selStart === input.selectionStart && create.selEnd === input.selectionEnd) return;
+  store.set({ sessionFolderCreate: Object.assign({}, create, { draft: input.value, focus: focused, selStart: input.selectionStart, selEnd: input.selectionEnd }) });
+}
+
+// Only changes the user can see need a rebuild; typing, caret, focus and scroll do not.
+export function folderDraftNeedsRender(state, previous) {
+  var a = state.sessionFolderCreate;
+  var b = previous.sessionFolderCreate;
+  if (!a !== !b) return true;
+  return !!(a && b && (a.pendingId !== b.pendingId || a.error !== b.error || a.sessionId !== b.sessionId));
+}
+
+export function focusFolderDraft() {
+  var input = findDraftInput();
+  if (input) {
+    input.focus();
+    if (input.scrollIntoView) input.scrollIntoView({ block: "nearest" });
+  }
+}
+
+function validate(name) {
+  if (!name) return "Enter a folder name.";
+  var lower = name.toLowerCase();
+  if (lower === "favorites" || lower === "unfiled") return "That name is reserved.";
+  var folders = currentFolderState().folders;
+  for (var i = 0; i < folders.length; i++) {
+    if (folders[i].name.toLowerCase() === lower) return "A folder with that name already exists.";
+  }
+  return "";
+}
+
+function submit(input) {
+  var create = store.get('sessionFolderCreate');
+  if (!create || create.pendingId) return;
+  var name = input.value.replace(/\s+/g, " ").trim();
+  var problem = validate(name);
+  if (problem) {
+    updateFolderCreateDraft({ draft: input.value, error: problem, focus: true, selStart: input.selectionStart, selEnd: input.selectionEnd });
+    return;
+  }
+  updateFolderCreateDraft({ draft: input.value, selStart: input.selectionStart, selEnd: input.selectionEnd });
+  submitFolderCreate(name);
+}
+
+function cancel(surface) {
+  cancelFolderCreate();
+  queueMicrotask(function () {
+    var button = document.querySelector('[data-new-folder-button="' + surface + '"]');
+    if (button && button.getClientRects().length) button.focus();
+  });
+}
+
+function iconButton(label, icon, primary, onClick, disabled) {
+  var btn = document.createElement("button");
+  btn.type = "button";
+  btn.className = "session-folder-create-btn" + (primary ? " primary" : "");
+  btn.setAttribute("aria-label", label);
+  btn.title = label;
+  btn.disabled = disabled;
+  btn.innerHTML = iconHtml(icon);
+  btn.addEventListener("click", onClick);
+  return btn;
+}
+
+export function renderFolderDraft(surface) {
+  var create = store.get('sessionFolderCreate');
+  if (!create) return null;
+  var busy = !!create.pendingId;
+  var root = document.createElement("section");
+  root.className = "session-folder session-folder-draft" + (surface === "mobile" ? " is-mobile" : "");
+  root.setAttribute("role", "group");
+  root.setAttribute("aria-label", "New folder");
+  root.setAttribute("aria-busy", String(busy));
+
+  var header = document.createElement("div");
+  header.className = "session-folder-header";
+  var main = document.createElement("div");
+  main.className = "session-folder-draft-main";
+  var spacer = document.createElement("span");
+  spacer.className = "session-folder-chevron session-folder-draft-spacer";
+  var icon = document.createElement("span");
+  icon.className = "session-folder-icon";
+  icon.innerHTML = iconHtml("folder");
+
+  var input = document.createElement("input");
+  input.type = "text";
+  input.className = "session-folder-create-input";
+  input.maxLength = 60;
+  input.value = create.draft;
+  input.readOnly = busy;
+  input.placeholder = "New folder";
+  input.autocomplete = "off";
+  input.spellcheck = false;
+  input.setAttribute("aria-label", "Folder name");
+  input.setAttribute("aria-invalid", String(!!create.error));
+  var errorId = "session-folder-create-error-" + surface;
+  input.setAttribute("aria-describedby", errorId);
+  if (create.focus) input.dataset.focusPending = "1";
+  var remember = function () {
+    updateFolderCreateDraft({ draft: input.value, selStart: input.selectionStart, selEnd: input.selectionEnd });
+  };
+  input.addEventListener("input", function () {
+    updateFolderCreateDraft({ draft: input.value, error: "", selStart: input.selectionStart, selEnd: input.selectionEnd });
+  });
+  input.addEventListener("keyup", remember);
+  input.addEventListener("mouseup", remember);
+  input.addEventListener("keydown", function (event) {
+    // Enter and Escape belong to the input method while it is composing (Korean,
+    // Japanese, Chinese); keyCode 229 covers browsers that omit isComposing.
+    if (event.isComposing || event.keyCode === 229) return;
+    if (event.key === "Enter") { event.preventDefault(); submit(input); }
+    else if (event.key === "Escape") { event.preventDefault(); event.stopPropagation(); cancel(surface); }
+  });
+
+  main.appendChild(spacer);
+  main.appendChild(icon);
+  main.appendChild(input);
+  header.appendChild(main);
+  var actions = document.createElement("div");
+  actions.className = "session-folder-create-actions";
+  actions.appendChild(iconButton("Create folder", "check", true, function () { submit(input); }, busy));
+  actions.appendChild(iconButton("Cancel new folder", "x", false, function () { cancel(surface); }, false));
+  header.appendChild(actions);
+  root.appendChild(header);
+
+  var error = document.createElement("div");
+  error.id = errorId;
+  error.className = "session-folder-create-error";
+  error.setAttribute("role", "alert");
+  error.textContent = create.error || "";
+  root.appendChild(error);
+
+  // The row is attached by the caller; restore focus, caret and (once) scroll afterwards.
+  queueMicrotask(function () {
+    input.removeAttribute("data-focus-pending");
+    var latest = store.get('sessionFolderCreate');
+    if (!latest) return;
+    if (latest.focus) {
+      var live = findDraftInput();
+      if (live) {
+        // Restoring focus after a rerender must not scroll; opening scrolls once, below.
+        live.focus({ preventScroll: true });
+        var end = live.value.length;
+        var start = typeof latest.selStart === "number" ? Math.min(latest.selStart, end) : end;
+        var stop = typeof latest.selEnd === "number" ? Math.min(latest.selEnd, end) : end;
+        live.setSelectionRange(start, stop);
+      }
+    }
+    if (latest.scroll) {
+      if (root.scrollIntoView && root.getClientRects().length) root.scrollIntoView({ block: "nearest" });
+      store.set({ sessionFolderCreate: Object.assign({}, latest, { scroll: false }) });
+    }
+  });
+  return root;
+}