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

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

@@ -0,0 +1,133 @@
+// Pure projection of sidebar units into folder sections. No DOM, no store.
+//
+// A unit is one organizable root: a standalone session or a Driver with all of
+// its Workers. { key, title, createdAt, lastActivity, item }. Units whose key
+// is null (loop runs, split groups, orphan Workers) cannot be filed, so they
+// always live with the ordinary, unfiled sessions.
+
+export var FAVORITES_ID = "favorites";
+export var UNFILED_ID = "unfiled";
+
+export function defaultFolderState() {
+  return { folders: [], assignments: {}, favorites: [], orders: {}, collapsed: {}, view: { sort: "activity", direction: "desc" } };
+}
+
+export function sortUnits(units, view, order) {
+  var position = {};
+  var list = order || [];
+  for (var i = 0; i < list.length; i++) position[list[i]] = i;
+  var sort = view.sort;
+  var sign = view.direction === "asc" ? 1 : -1;
+  return units.slice().sort(function (a, b) {
+    var result = 0;
+    if (sort === "manual") {
+      var ap = a.key !== null && position[a.key] !== undefined ? position[a.key] : Number.MAX_SAFE_INTEGER;
+      var bp = b.key !== null && position[b.key] !== undefined ? position[b.key] : Number.MAX_SAFE_INTEGER;
+      result = ap - bp;
+    } else if (sort === "title") {
+      result = String(a.title || "").toLowerCase().localeCompare(String(b.title || "").toLowerCase()) * (view.direction === "desc" ? -1 : 1);
+    } else if (sort === "created") {
+      result = ((a.createdAt || 0) - (b.createdAt || 0)) * sign;
+    } else {
+      result = ((a.lastActivity || 0) - (b.lastActivity || 0)) * sign;
+    }
+    if (result !== 0) return result;
+    return (b.lastActivity || 0) - (a.lastActivity || 0);
+  });
+}
+
+// Favorites are a tag curated by hand, so they always keep their own order
+// whatever the view sort is. A favorite also stays in its real folder.
+function favoriteOrder(units, order) {
+  return sortUnits(units, { sort: "manual", direction: "desc" }, order);
+}
+
+export function isFavorite(state, key) {
+  return key !== null && key !== undefined && (state.favorites || []).indexOf(key) !== -1;
+}
+
+export function containerOf(state, unit) {
+  if (unit.key === null) return UNFILED_ID;
+  var id = state.assignments[unit.key];
+  for (var i = 0; i < state.folders.length; i++) if (state.folders[i].id === id) return id;
+  return UNFILED_ID;
+}
+
+// Returns { favorites: [units], sections }. Folders are the only layout; the
+// view sort and direction order sessions inside each folder, never the folders
+// themselves. Sections: { id, type, label,
+// units, collapsed, folderId }. While a search is active every section is
+// expanded and empty ones disappear so matches are never hidden.
+export function buildLayout(units, state, options) {
+  var opts = options || {};
+  var view = state.view;
+  var searching = opts.searching === true;
+  var favorites = [];
+  var ordinary = [];
+  for (var i = 0; i < units.length; i++) {
+    // The same unit may appear twice: once as a favorite, once in its folder.
+    if (isFavorite(state, units[i].key)) favorites.push(units[i]);
+    ordinary.push(units[i]);
+  }
+  var result = {
+    favorites: favoriteOrder(favorites, state.favorites),
+    favoritesCollapsed: !searching && state.collapsed[FAVORITES_ID] === true,
+    searching: searching,
+    sections: [],
+  };
+
+  var byContainer = {};
+  for (var u = 0; u < ordinary.length; u++) {
+    var id = containerOf(state, ordinary[u]);
+    if (!byContainer[id]) byContainer[id] = [];
+    byContainer[id].push(ordinary[u]);
+  }
+  for (var f = 0; f < state.folders.length; f++) {
+    var folder = state.folders[f];
+    var members = sortUnits(byContainer[folder.id] || [], view, state.orders[folder.id]);
+    if (searching && members.length === 0) continue;
+    result.sections.push({ id: folder.id, type: "folder", label: folder.name, units: members, collapsed: !searching && state.collapsed[folder.id] === true, folderId: folder.id });
+  }
+  var unfiled = sortUnits(byContainer[UNFILED_ID] || [], view, state.orders[UNFILED_ID]);
+  if (!searching || unfiled.length) {
+    result.sections.push({ id: UNFILED_ID, type: "unfiled", label: "Unfiled", units: unfiled, collapsed: !searching && state.collapsed[UNFILED_ID] === true, folderId: null });
+  }
+  return result;
+}
+
+// New order for one container after dropping `movingKey` next to `targetKey`
+// (or at the end when targetKey is null). `currentKeys` is the container's
+// displayed order, which already reflects the active sort.
+export function orderAfterMove(currentKeys, movingKey, targetKey, insertBefore) {
+  var rest = currentKeys.filter(function (k) { return k !== movingKey; });
+  var at = targetKey === null ? -1 : rest.indexOf(targetKey);
+  if (at === -1) rest.push(movingKey);
+  else rest.splice(insertBefore === false ? at + 1 : at, 0, movingKey);
+  return rest;
+}
+
+// The keys a container shows right now, in order. Used both to build the
+// move payload and to decide whether a drop is allowed.
+export function containerKeys(layout, containerId) {
+  var list;
+  if (containerId === FAVORITES_ID) list = layout.favorites;
+  else {
+    list = [];
+    for (var i = 0; i < layout.sections.length; i++) {
+      if (layout.sections[i].id === containerId) list = layout.sections[i].units;
+    }
+  }
+  return list.filter(function (u) { return u.key !== null; }).map(function (u) { return u.key; });
+}
+
+export var SORT_OPTIONS = [
+  { sort: "activity", label: "Last activity", directions: { desc: "Recent", asc: "Oldest" } },
+  { sort: "created", label: "Date created", directions: { desc: "Newest", asc: "Oldest" } },
+  { sort: "title", label: "Title", directions: { asc: "A to Z", desc: "Z to A" } },
+  { sort: "manual", label: "Manual order", directions: null },
+];
+
+// Switching sort starts at that sort's natural direction.
+export function defaultDirectionFor(sort) {
+  return sort === "title" ? "asc" : "desc";
+}

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

@@ -0,0 +1,185 @@
+// The folders toolbar: New folder, View and a magnifier. Search replaces the
+// controls in the same footprint (same row, same height) with a full-width input
+// and an explicit close button; closing restores the controls and focus. State
+// lives in the store (sessionSearch, sessionFolderCreate, sessionFolderViewMenu).
+
+import { store } from './store.js';
+import { iconHtml } from './icons.js';
+import { openFolderCreate } from './session-folders.js';
+import { toggleViewMenu, positionViewMenu } from './session-folder-view-menu.js';
+import { captureCreateFocus } from './session-create-form.js';
+import { captureFolderDraft, folderDraftNeedsRender, focusFolderDraft } from './session-folder-draft.js';
+import {
+  openListSearch, closeListSearch, clearListSearchText, setListSearchQuery, rememberListSearchCaret,
+  getListSearchQuery, getListSearchMatchIds, listSearchNeedsRender
+} from './session-list-search.js';
+
+// Visible one wins: the desktop list and the mobile sheet can both be in the DOM.
+function visible(selector) {
+  var nodes = document.querySelectorAll(selector);
+  for (var i = 0; i < nodes.length; i++) {
+    if (nodes[i] === document.activeElement || nodes[i].getClientRects().length) return nodes[i];
+  }
+  return null;
+}
+
+function focusMagnifier() {
+  queueMicrotask(function () {
+    var button = visible("[data-search-button]");
+    if (button) button.focus();
+  });
+}
+
+// Called right before a list rerender discards the toolbar and the draft row.
+export function captureFolderInputs() {
+  captureFolderDraft();
+  captureCreateFocus();
+  var state = store.get('sessionSearch');
+  var input = visible(".session-search-input");
+  if (!state || !state.open || !input || input.dataset.focusPending === "1") return;
+  rememberListSearchCaret(document.activeElement === input, input.selectionStart, input.selectionEnd);
+}
+
+export function folderToolbarNeedsRender(state, previous) {
+  return folderDraftNeedsRender(state, previous) || listSearchNeedsRender(state, previous);
+}
+
+function renderSearchBar(bar, surface) {
+  var state = store.get('sessionSearch');
+  var query = getListSearchQuery();
+  var matches = getListSearchMatchIds();
+  bar.classList.add("is-searching");
+
+  var close = document.createElement("button");
+  close.type = "button";
+  close.className = "session-folder-tool session-search-close";
+  close.setAttribute("aria-label", "Close search");
+  close.title = "Close search (Esc)";
+  close.innerHTML = iconHtml("arrow-left");
+  close.addEventListener("click", function () { closeListSearch(); focusMagnifier(); });
+
+  var field = document.createElement("div");
+  field.className = "session-search-field";
+  var input = document.createElement("input");
+  input.type = "text";
+  input.className = "session-search-input";
+  input.dataset.surface = surface;
+  input.placeholder = "Search sessions";
+  input.value = query;
+  input.autocomplete = "off";
+  input.spellcheck = false;
+  input.setAttribute("aria-label", "Search sessions");
+  if (state.focus) input.dataset.focusPending = "1";
+  var remember = function () { rememberListSearchCaret(true, input.selectionStart, input.selectionEnd); };
+  input.addEventListener("input", function () {
+    setListSearchQuery(input.value);
+    remember();
+    syncClear();
+  });
+  input.addEventListener("keyup", remember);
+  input.addEventListener("mouseup", remember);
+  input.addEventListener("keydown", function (event) {
+    if (event.isComposing || event.keyCode === 229) return;
+    if (event.key === "Escape") { event.preventDefault(); event.stopPropagation(); closeListSearch(); focusMagnifier(); }
+  });
+  input.addEventListener("blur", function () {
+    // Leaving an empty search closes it, as before; a rebuilt toolbar is not "leaving".
+    setTimeout(function () {
+      if (!document.contains(input) || getListSearchQuery()) return;
+      var active = document.activeElement;
+      if (active && active.closest && active.closest(".session-folder-toolbar")) return;
+      closeListSearch();
+    }, 0);
+  });
+
+  var count = document.createElement("span");
+  count.className = "session-search-count";
+  if (query && matches !== null) count.textContent = String(matches.size);
+  var clear = document.createElement("button");
+  clear.type = "button";
+  clear.className = "session-search-clear";
+  clear.setAttribute("aria-label", "Clear search text");
+  clear.title = "Clear text";
+  clear.innerHTML = iconHtml("x");
+  clear.hidden = !query;
+  clear.addEventListener("click", function () {
+    clearListSearchText();
+    input.value = "";
+    clear.hidden = true;
+    input.focus();
+  });
+  function syncClear() { clear.hidden = !input.value; }
+
+  field.appendChild(input);
+  field.appendChild(count);
+  field.appendChild(clear);
+  bar.appendChild(close);
+  bar.appendChild(field);
+
+  queueMicrotask(function () {
+    input.removeAttribute("data-focus-pending");
+    var latest = store.get('sessionSearch');
+    if (!latest || !latest.open || !latest.focus) return;
+    var live = visible(".session-search-input");
+    if (!live) return;
+    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);
+  });
+}
+
+export function renderFolderToolbar(surface) {
+  var create = store.get('sessionFolderCreate');
+  var search = store.get('sessionSearch');
+  var wrap = document.createElement("div");
+  wrap.className = "session-folder-tools" + (surface === "mobile" ? " is-mobile" : "");
+  var bar = document.createElement("div");
+  bar.className = "session-folder-toolbar" + (surface === "mobile" ? " is-mobile" : "");
+  wrap.appendChild(bar);
+
+  if (search && search.open) {
+    renderSearchBar(bar, surface);
+    return wrap;
+  }
+
+  var add = document.createElement("button");
+  add.type = "button";
+  add.className = "session-folder-tool";
+  add.dataset.newFolderButton = surface;
+  add.setAttribute("aria-expanded", String(!!create));
+  add.innerHTML = iconHtml("folder-plus") + "<span>New folder</span>";
+  add.addEventListener("click", function () {
+    if (store.get('sessionFolderCreate')) {
+      focusFolderDraft();
+      return;
+    }
+    openFolderCreate();
+  });
+
+  var view = document.createElement("button");
+  view.type = "button";
+  view.className = "session-folder-tool";
+  view.dataset.viewButton = surface;
+  view.setAttribute("aria-haspopup", "true");
+  var viewState = store.get('sessionFolderViewMenu');
+  view.setAttribute("aria-expanded", String(!!(viewState && viewState.surface === surface)));
+  view.innerHTML = iconHtml("sliders-horizontal") + "<span>View</span>";
+  view.addEventListener("click", function () { toggleViewMenu(surface); });
+
+  var magnifier = document.createElement("button");
+  magnifier.type = "button";
+  magnifier.className = "session-folder-tool session-folder-tool-icon";
+  magnifier.dataset.searchButton = surface;
+  magnifier.setAttribute("aria-label", "Search sessions");
+  magnifier.title = "Search sessions";
+  magnifier.innerHTML = iconHtml("search");
+  magnifier.addEventListener("click", function () { openListSearch(); });
+
+  bar.appendChild(add);
+  bar.appendChild(view);
+  bar.appendChild(magnifier);
+  if (viewState && viewState.surface === surface) queueMicrotask(positionViewMenu);
+  return wrap;
+}

package/lib/public/modules/session-folder-view-menu.js

@@ -0,0 +1,187 @@
+// Compact, non-modal View dropdown for the session folders toolbar. It floats
+// below its button with no backdrop and no focus trap; sort and direction
+// apply immediately while the list stays visible. Open state lives in the store (sessionFolderViewMenu); the menu's contents are repainted in place
+// so keyboard focus survives server updates.
+
+import { store } from './store.js';
+import { escapeHtml } from './utils.js';
+import { currentFolderState, sendFolderOp } from './session-folders.js';
+import { SORT_OPTIONS, defaultDirectionFor } from './session-folder-layout.js';
+
+var MENU_SELECTOR = ".session-folder-viewmenu";
+
+function menuEl() {
+  return document.querySelector(MENU_SELECTOR);
+}
+
+function buttonFor(surface) {
+  return document.querySelector('[data-view-button="' + surface + '"]');
+}
+
+function sendViewPatch(patch) {
+  var op = Object.assign({ op: "set_view" }, patch);
+  if (patch.sort) op.direction = defaultDirectionFor(patch.sort);
+  sendFolderOp(op);
+}
+
+function radioGroup(name, legend, entries, selected, onPick, segmented) {
+  var set = document.createElement("div");
+  set.className = "session-folder-radio-group" + (segmented ? " segmented" : "");
+  set.setAttribute("role", "radiogroup");
+  set.setAttribute("aria-label", legend);
+  if (!segmented) {
+    var label = document.createElement("div");
+    label.className = "session-folder-radio-legend";
+    label.textContent = legend;
+    set.appendChild(label);
+  }
+  var rows = [];
+  entries.forEach(function (entry, index) {
+    var row = document.createElement("button");
+    row.type = "button";
+    row.className = "session-folder-radio" + (entry.value === selected ? " selected" : "");
+    row.dataset.focusKey = name + ":" + entry.value;
+    row.setAttribute("role", "radio");
+    row.setAttribute("aria-checked", String(entry.value === selected));
+    row.innerHTML = (segmented ? "" : '<span class="session-folder-radio-dot" aria-hidden="true"></span>') + "<span>" + escapeHtml(entry.label) + "</span>";
+    row.addEventListener("click", function () { onPick(entry.value); });
+    row.addEventListener("keydown", function (event) {
+      var step = event.key === "ArrowDown" || event.key === "ArrowRight" ? 1 : (event.key === "ArrowUp" || event.key === "ArrowLeft" ? -1 : 0);
+      if (!step) return;
+      event.preventDefault();
+      var next = (index + step + entries.length) % entries.length;
+      rows[next].focus();
+      onPick(entries[next].value);
+    });
+    rows.push(row);
+    set.appendChild(row);
+  });
+  return set;
+}
+
+// Rebuilds the menu body from the current view and puts focus back on the same
+// control (found by key) so a repaint never drops the keyboard user's place.
+export function paintViewMenu() {
+  var menu = menuEl();
+  if (!menu) return;
+  var active = document.activeElement;
+  var focusKey = active && menu.contains(active) ? active.dataset.focusKey : null;
+  var view = currentFolderState().view;
+  var sortEntry = SORT_OPTIONS.filter(function (o) { return o.sort === view.sort; })[0];
+  menu.innerHTML = "";
+  menu.appendChild(radioGroup("sort", "Sort by", SORT_OPTIONS.map(function (o) { return { value: o.sort, label: o.label }; }), view.sort, function (v) { sendViewPatch({ sort: v }); }));
+  if (sortEntry && sortEntry.directions) {
+    menu.appendChild(radioGroup("direction", "Direction", Object.keys(sortEntry.directions).map(function (d) { return { value: d, label: sortEntry.directions[d] }; }), view.direction, function (v) { sendViewPatch({ direction: v }); }, true));
+  } else {
+    var note = document.createElement("div");
+    note.className = "session-folder-view-note";
+    note.textContent = "Drag sessions to arrange them. Favorites keep their own order.";
+    menu.appendChild(note);
+  }
+  if (focusKey) {
+    var target = menu.querySelector('[data-focus-key="' + focusKey + '"]') || menu.querySelector(".session-folder-radio.selected");
+    if (target) target.focus();
+  }
+  positionViewMenu();
+}
+
+// Anchored below the button and clamped to the visible viewport, so it never
+// runs off a phone screen; very tall content scrolls inside the menu.
+export function positionViewMenu() {
+  var state = store.get('sessionFolderViewMenu');
+  var menu = menuEl();
+  if (!state || !menu) return;
+  var button = buttonFor(state.surface);
+  if (!button) return;
+  var rect = button.getBoundingClientRect();
+  var margin = 8;
+  var width = Math.min(state.surface === "mobile" ? 244 : 216, window.innerWidth - margin * 2);
+  menu.style.width = width + "px";
+  var left = Math.min(Math.max(margin, rect.left), window.innerWidth - width - margin);
+  var top = rect.bottom + 4;
+  menu.style.left = left + "px";
+  menu.style.top = top + "px";
+  menu.style.maxHeight = Math.max(120, window.innerHeight - top - margin) + "px";
+}
+
+// Any press that starts outside the menu and the View button dismisses it.
+// pointerdown is the primary signal: surfaces that call preventDefault() on
+// pointerdown (the shared-browser canvas, dock divider, note drag handles) make
+// the browser skip the compatibility mousedown/touchstart, so listening only
+// for those left the menu open. mousedown and touchstart stay as fallbacks for
+// engines and synthetic input without pointer events. The press itself is never
+// cancelled and focus is left where the clicked control puts it.
+function onOutside(event) {
+  var state = store.get('sessionFolderViewMenu');
+  if (!state) return;
+  var menu = menuEl();
+  var button = buttonFor(state.surface);
+  var target = event.target;
+  if (target && target.nodeType === 1 && ((menu && menu.contains(target)) || (button && button.contains(target)))) return;
+  closeViewMenu(false);
+}
+
+// Focus moving into an iframe or another window never reaches this document's
+// pointer events; losing window focus is treated as leaving the menu.
+function onWindowBlur() {
+  if (store.get('sessionFolderViewMenu')) closeViewMenu(false);
+}
+
+function onKey(event) {
+  if (event.key !== "Escape" || !store.get('sessionFolderViewMenu')) return;
+  event.preventDefault();
+  event.stopPropagation();
+  closeViewMenu(true);
+}
+
+function onResize() {
+  positionViewMenu();
+}
+
+export function closeViewMenu(restoreFocus) {
+  var state = store.get('sessionFolderViewMenu');
+  if (!state) return;
+  store.set({ sessionFolderViewMenu: null });
+  document.removeEventListener("pointerdown", onOutside, true);
+  document.removeEventListener("mousedown", onOutside, true);
+  document.removeEventListener("touchstart", onOutside, true);
+  document.removeEventListener("keydown", onKey, true);
+  window.removeEventListener("resize", onResize);
+  window.removeEventListener("blur", onWindowBlur);
+  var menu = menuEl();
+  if (menu) menu.remove();
+  var button = buttonFor(state.surface);
+  if (button) {
+    button.setAttribute("aria-expanded", "false");
+    if (restoreFocus) button.focus();
+  }
+}
+
+export function toggleViewMenu(surface) {
+  if (store.get('sessionFolderViewMenu')) {
+    closeViewMenu(true);
+    return;
+  }
+  var button = buttonFor(surface);
+  if (!button) return;
+  var menu = document.createElement("div");
+  menu.className = "session-folder-viewmenu" + (surface === "mobile" ? " is-mobile" : "");
+  menu.setAttribute("role", "group");
+  menu.setAttribute("aria-label", "View options");
+  document.body.appendChild(menu);
+  store.set({ sessionFolderViewMenu: { surface: surface } });
+  button.setAttribute("aria-expanded", "true");
+  paintViewMenu();
+  document.addEventListener("pointerdown", onOutside, true);
+  document.addEventListener("mousedown", onOutside, true);
+  document.addEventListener("touchstart", onOutside, true);
+  document.addEventListener("keydown", onKey, true);
+  window.addEventListener("resize", onResize);
+  window.addEventListener("blur", onWindowBlur);
+  var first = menu.querySelector(".session-folder-radio.selected") || menu.querySelector("button");
+  if (first) first.focus();
+}
+
+store.subscribe(function (state, previous) {
+  if (state.sessionFolders !== previous.sessionFolders) paintViewMenu();
+});

package/lib/public/modules/session-folders.js

@@ -0,0 +1,95 @@
+// Client state and server round trips for sidebar session folders. The
+// server owns the data (per user and project); this module mirrors the latest
+// snapshot into the store and sends operations the server validates again.
+// Snapshots and requests are both tagged with the project so a stale one can
+// never be applied to, or mutate, another project.
+
+import { store } from './store.js';
+import { getWs } from './ws-ref.js';
+import { showToast } from './utils.js';
+import { defaultFolderState } from './session-folder-layout.js';
+
+export function handleSessionFoldersState(msg) {
+  var slug = store.get('currentSlug');
+  if (msg.slug && slug && msg.slug !== slug) return;
+  var create = store.get('sessionFolderCreate');
+  if (msg.state) store.set({ sessionFolders: msg.state, sessionFoldersSlug: msg.slug || slug || null });
+  var correlated = !!(create && create.pendingId && msg.requestId === create.pendingId);
+  // A folder deletion in progress shows its own error inside its dialog.
+  var deleting = store.get('sessionFolderDelete');
+  var deleteCorrelated = !!(deleting && msg.requestId && msg.requestId === deleting.requestId);
+  if (msg.error && !correlated && !deleteCorrelated) showToast(msg.error, "warn");
+  if (!correlated) return;
+  if (msg.error) {
+    // The creation was refused: keep the row open with the server's reason.
+    store.set({ sessionFolderCreate: Object.assign({}, create, { pendingId: null, error: msg.error, focus: true }) });
+    return;
+  }
+  store.set({ sessionFolderCreate: null });
+  if (create.sessionId !== null && msg.folderId) sendFolderOp({ op: "place_session", sessionId: create.sessionId, folderId: msg.folderId });
+}
+
+export function currentFolderState() {
+  var state = store.get('sessionFolders');
+  if (!state || store.get('sessionFoldersSlug') !== store.get('currentSlug')) return defaultFolderState();
+  return state;
+}
+
+export function sendFolderOp(op, requestId) {
+  var ws = getWs();
+  if (!ws || !store.get('connected')) return false;
+  var payload = { type: "session_folders_op", slug: store.get('currentSlug'), op: op };
+  if (requestId) payload.requestId = requestId;
+  ws.send(JSON.stringify(payload));
+  return true;
+}
+
+// --- Inline folder creation (the row itself lives in session-folder-toolbar.js) ---
+// A creation is closed only by the server's acknowledgement; when it was started
+// from a session's Move picker, that session is filed after a successful ack.
+
+export function openFolderCreate(sessionId) {
+  var current = store.get('sessionFolderCreate');
+  if (current) {
+    store.set({ sessionFolderCreate: Object.assign({}, current, { focus: true, scroll: true, sessionId: sessionId === undefined ? current.sessionId : sessionId }) });
+    return;
+  }
+  store.set({ sessionFolderCreate: { draft: "", error: "", pendingId: null, sessionId: sessionId === undefined ? null : sessionId, focus: true, scroll: true, selStart: 0, selEnd: 0 } });
+}
+
+export function cancelFolderCreate() {
+  if (store.get('sessionFolderCreate')) store.set({ sessionFolderCreate: null });
+}
+
+export function updateFolderCreateDraft(patch) {
+  var current = store.get('sessionFolderCreate');
+  if (current) store.set({ sessionFolderCreate: Object.assign({}, current, patch) });
+}
+
+export function submitFolderCreate(name) {
+  var current = store.get('sessionFolderCreate');
+  if (!current || current.pendingId) return false;
+  var requestId = "folder-" + Date.now().toString(36) + "-" + Math.random().toString(36).slice(2, 8);
+  store.set({ sessionFolderCreate: Object.assign({}, current, { pendingId: requestId, error: "", focus: true }) });
+  if (!sendFolderOp({ op: "create_folder", name: name }, requestId)) {
+    store.set({ sessionFolderCreate: Object.assign({}, current, { pendingId: null, error: "Not connected. Try again.", focus: true }) });
+    return false;
+  }
+  return true;
+}
+
+store.subscribe(function (state, previous) {
+  var create = state.sessionFolderCreate;
+  if (create && create.pendingId && previous.connected && !state.connected) {
+    store.set({ sessionFolderCreate: Object.assign({}, create, { pendingId: null, error: "Connection lost. Try again." }) });
+  }
+});
+
+export function resetSessionFolders() {
+  store.set({ sessionFolders: null, sessionFoldersSlug: null });
+}
+
+export function requestFolderState() {
+  var ws = getWs();
+  if (ws && store.get('connected')) ws.send(JSON.stringify({ type: "session_folders_get" }));
+}