@starlove/orbit 1.4.0 → 2.0.0

package/public/js/create-card.js

@@ -1,190 +0,0 @@
-// "New card" flyout (top-right panel, separate from the main ticket
-// drawer). Handles open/close transitions, form rendering, and submission.
-
-import {
-  $,
-  createFlyout,
-  createFlyoutInner,
-  createFlyoutBackdrop
-} from "./dom.js";
-import { state, visibleStatesForProject, ticketsForProject } from "./state.js";
-import { escapeHtml } from "./format.js";
-import { api } from "./api.js";
-import { syncUrlFromState } from "./router.js";
-import { handleTextareaIndentationKeydown } from "./text-editing.js";
-import { closeDrawer } from "./drawer.js";
-import { closeMenuFlyouts } from "./board-menu.js";
-import { load } from "./app.js";
-import { closeIconSvg } from "./icons.js";
-import { attachTicketTypeahead, ticketCanonicalLabel } from "./ticket-typeahead.js";
-
-/** Clears any pending hide timeout when reopening the create flyout quickly. */
-let createFlyoutHideTimer = 0;
-
-export function isCreateFlyoutOpen() {
-  return createFlyout?.classList.contains("is-open");
-}
-
-/** Compact top-right panel for creating a card (separate from the main ticket drawer). */
-export function openCreateFlyout(preselectedLaneId) {
-  clearTimeout(createFlyoutHideTimer);
-  closeMenuFlyouts();
-  closeDrawer();
-  createFlyoutInner.innerHTML = renderCreateForm(preselectedLaneId || "");
-  wireCreateForm();
-  $("#createFlyoutClose")?.addEventListener("click", () => closeCreateFlyout());
-  createFlyout.hidden = false;
-  createFlyoutBackdrop.hidden = false;
-  requestAnimationFrame(() => {
-    createFlyout.classList.add("is-open");
-    createFlyoutBackdrop.classList.add("is-visible");
-  });
-  requestAnimationFrame(() => {
-    $("#createTicketTitle")?.focus();
-  });
-}
-
-export function closeCreateFlyout() {
-  clearTimeout(createFlyoutHideTimer);
-  createFlyout.classList.remove("is-open");
-  createFlyoutBackdrop.classList.remove("is-visible");
-  createFlyoutHideTimer = setTimeout(() => {
-    createFlyout.hidden = true;
-    createFlyoutBackdrop.hidden = true;
-    createFlyoutInner.innerHTML = "";
-  }, 220);
-}
-
-/** HTML for the “New” flyout: lane + type + priority on one row, then parent and labels. */
-function renderCreateForm(preselectedLaneId) {
-  const states = visibleStatesForProject();
-  const defaultState = states.find((item) => item.is_default) || states[0];
-  const effectiveStateId =
-    preselectedLaneId && states.some((s) => s.id === preselectedLaneId)
-      ? preselectedLaneId
-      : defaultState?.id || "";
-  const stateOptions = states
-    .map(
-      (item) =>
-        `<option value="${escapeHtml(item.id)}" ${item.id === effectiveStateId ? "selected" : ""}>${escapeHtml(item.name)}</option>`
-    )
-    .join("");
-  return `
-    <div class="create-flyout-head">
-      <h2>New card</h2>
-      <button type="button" class="create-flyout-close ghost" id="createFlyoutClose" aria-label="Close">${closeIconSvg}</button>
-    </div>
-    <form id="createTicketForm" class="create-flyout-form">
-      <input id="createTicketTitle" name="title" type="text" placeholder="Title — what is this card?" autocomplete="off" required />
-      <textarea id="createTicketDescription" name="description" placeholder="Description (optional)"></textarea>
-      <div class="control-grid">
-        <label class="control-field">
-          <span class="control-field-label">LANE</span>
-          <select id="createTicketState" name="state" class="select-chevron-field" aria-label="Lane">${stateOptions}</select>
-        </label>
-        <label class="control-field">
-          <span class="control-field-label">TYPE</span>
-          <select id="createTicketType" name="type" class="select-chevron-field" aria-label="Ticket type">
-            <option value="epic">Epic</option>
-            <option value="feature">Feature</option>
-            <option value="task" selected>Task</option>
-            <option value="bug">Bug</option>
-          </select>
-        </label>
-        <label class="control-field">
-          <span class="control-field-label">PRIORITY</span>
-          <select id="createTicketPriority" name="priority" class="select-chevron-field" aria-label="Priority">
-            <option value="4">URGENT</option>
-            <option value="3">HIGH</option>
-            <option value="2" selected>MED</option>
-            <option value="1">LOW</option>
-            <option value="0">MAYBE</option>
-          </select>
-        </label>
-      </div>
-      <label class="control-field" id="createTicketParentField">
-        <span class="control-field-label">Parent epic</span>
-        <input id="createTicketParent" name="parent_target" type="text" placeholder="Search epic… (optional)" autocomplete="off" aria-label="Parent epic" />
-        <input type="hidden" name="parent_ticket_id" id="createTicketParentId" value="" />
-      </label>
-      <input id="createTicketLabels" name="labels" type="text" placeholder="Labels (comma-separated)" />
-      <button type="submit">Create card</button>
-    </form>
-  `;
-}
-
-function wireCreateForm() {
-  const form = $("#createTicketForm");
-  if (!form) return;
-  const description = form.querySelector("#createTicketDescription");
-  description?.addEventListener("keydown", (event) => {
-    handleTextareaIndentationKeydown(event, description);
-  });
-
-  // Parent epic is chosen via the shared styled typeahead. The visible field
-  // holds the "#12 — Title" label; the resolved epic id lives in a hidden input
-  // that the submit reads. Typing (or clearing) drops a stale id so only an
-  // explicit pick is submitted.
-  const parentInput = form.querySelector("#createTicketParent");
-  const parentId = form.querySelector("#createTicketParentId");
-  parentInput.addEventListener("input", () => {
-    parentId.value = "";
-  });
-  attachTicketTypeahead(
-    parentInput,
-    () => ticketsForProject().filter((ticket) => ticket.type === "epic"),
-    {
-      onSelect: (ticket) => {
-        parentId.value = ticket.id;
-        parentInput.value = ticketCanonicalLabel(ticket);
-      },
-    },
-  );
-
-  // Epics cannot have a parent (server rejects with `epic_cannot_have_parent`),
-  // so hide the Parent epic field whenever Type is Epic.
-  const typeSelect = form.querySelector("#createTicketType");
-  const parentField = form.querySelector("#createTicketParentField");
-  const syncParentVisibility = () => {
-    const isEpic = typeSelect.value === "epic";
-    parentField.hidden = isEpic;
-    if (isEpic) {
-      parentInput.value = "";
-      parentId.value = "";
-    }
-  };
-  typeSelect.addEventListener("change", syncParentVisibility);
-  syncParentVisibility();
-
-  form.addEventListener("submit", createTicketFromDrawer);
-}
-
-async function createTicketFromDrawer(event) {
-  event.preventDefault();
-  const form = event.currentTarget;
-  const data = new FormData(form);
-  const labels = String(data.get("labels") || "")
-    .split(",")
-    .map((item) => item.trim())
-    .filter(Boolean);
-
-  const created = await api("/api/tickets", {
-    method: "POST",
-    body: {
-      board_id: state.boardId,
-      title: data.get("title"),
-      description: data.get("description"),
-      type: data.get("type"),
-      parent_ticket_id: data.get("parent_ticket_id") || null,
-      state_id: data.get("state"),
-      priority: Number(data.get("priority")),
-      labels
-    }
-  });
-
-  closeCreateFlyout();
-  state.selectedTicketId = created.id;
-  state.detailMode = "ticket";
-  await load();
-  syncUrlFromState();
-}

package/public/js/dom.js

@@ -1,19 +0,0 @@
-// Cached DOM references queried once at module-load time. Importing this
-// module assumes the body has been parsed (the script tag is at the bottom
-// of <body> and uses type="module", so this holds).
-
-export const $ = (selector) => document.querySelector(selector);
-
-export const boardMenuBtn = $("#boardMenuBtn");
-export const boardFlyout = $("#boardFlyout");
-export const kanban = $("#kanban");
-export const drawer = $("#drawer");
-export const drawerInner = $("#drawerInner");
-export const drawerBackdrop = $("#drawerBackdrop");
-export const createFlyout = $("#createFlyout");
-export const createFlyoutInner = $("#createFlyoutInner");
-export const createFlyoutBackdrop = $("#createFlyoutBackdrop");
-export const searchInput = $("#searchInput");
-export const searchResults = $("#searchResults");
-export const themeToggle = $("#themeToggle");
-export const themeIcon = $("#themeIcon");

package/public/js/drawer.js

@@ -1,273 +0,0 @@
-// Right-side overlay drawer used for ticket detail and project settings.
-// Owns the open/close transition state and the shared header layout
-// (eyebrow, title, subtitle, tabs, archive/close buttons). Bodies are
-// rendered by the feature modules that call `renderDrawerShell`.
-
-import { drawer, drawerInner, drawerBackdrop } from "./dom.js";
-import { state } from "./state.js";
-import { escapeHtml } from "./format.js";
-
-/** Bumps on each open/close so a stale `transitionend` from an old close cannot clear a newly opened drawer. */
-let drawerToken = 0;
-
-/** Aborts scroll/resize observers when tabs are re-rendered or the drawer closes. */
-let drawerTabsScrollAbort = null;
-
-/** Toggle edge-fade classes on the tab shell when the strip can scroll further left/right. */
-function syncDrawerTabsScrollState(tabsEl) {
-  const shellEl = document.getElementById("drawerTabsShell");
-  if (!tabsEl || !shellEl) return;
-
-  const maxScroll = tabsEl.scrollWidth - tabsEl.clientWidth;
-  if (maxScroll <= 1) {
-    shellEl.classList.remove("can-scroll-left", "can-scroll-right");
-    return;
-  }
-
-  shellEl.classList.toggle("can-scroll-left", tabsEl.scrollLeft > 1);
-  shellEl.classList.toggle("can-scroll-right", tabsEl.scrollLeft < maxScroll - 1);
-}
-
-/** Keep the active settings tab visible when the strip overflows horizontally. */
-function scrollActiveDrawerTabIntoView(tabsEl) {
-  tabsEl
-    ?.querySelector(".drawer-tab.is-active")
-    ?.scrollIntoView({ block: "nearest", inline: "nearest" });
-}
-
-function teardownDrawerTabsScroll() {
-  drawerTabsScrollAbort?.abort();
-  drawerTabsScrollAbort = null;
-  const shellEl = document.getElementById("drawerTabsShell");
-  const tabsEl = document.getElementById("drawerTabs");
-  shellEl?.classList.remove("can-scroll-left", "can-scroll-right");
-  tabsEl?.classList.remove("is-grabbing");
-}
-
-function bindDrawerTabsScroll(tabsEl) {
-  teardownDrawerTabsScroll();
-  if (!tabsEl) return;
-
-  const controller = new AbortController();
-  drawerTabsScrollAbort = controller;
-  const { signal } = controller;
-
-  const onScrollChange = () => syncDrawerTabsScrollState(tabsEl);
-  tabsEl.addEventListener("scroll", onScrollChange, { passive: true, signal });
-
-  if (typeof ResizeObserver !== "undefined") {
-    const observer = new ResizeObserver(onScrollChange);
-    observer.observe(tabsEl);
-    signal.addEventListener("abort", () => observer.disconnect(), { once: true });
-  }
-
-  // Vertical wheel over the tab strip pans horizontally (no Shift required).
-  const LINE_SCROLL_PX = 16;
-  const wheelPixels = (value, mode) => {
-    if (mode === WheelEvent.DOM_DELTA_LINE) return value * LINE_SCROLL_PX;
-    if (mode === WheelEvent.DOM_DELTA_PAGE) return value * Math.max(tabsEl.clientWidth, 1);
-    return value;
-  };
-
-  tabsEl.addEventListener(
-    "wheel",
-    (event) => {
-      if (event.defaultPrevented || event.ctrlKey) return;
-      if (tabsEl.scrollWidth <= tabsEl.clientWidth) return;
-
-      const horizontalDelta = event.deltaX || event.deltaY;
-      if (!horizontalDelta) return;
-
-      event.preventDefault();
-      tabsEl.scrollLeft += wheelPixels(horizontalDelta, event.deltaMode);
-    },
-    { passive: false, signal }
-  );
-
-  // Click-and-drag horizontal panning; threshold keeps tab clicks intact.
-  const DRAG_THRESHOLD = 4;
-  let dragActive = false;
-  let dragged = false;
-  let startX = 0;
-  let startScroll = 0;
-  let pointerId = 0;
-
-  tabsEl.addEventListener(
-    "pointerdown",
-    (event) => {
-      if (event.button !== 0) return;
-      if (tabsEl.scrollWidth <= tabsEl.clientWidth) return;
-      dragged = false;
-      dragActive = true;
-      pointerId = event.pointerId;
-      startX = event.clientX;
-      startScroll = tabsEl.scrollLeft;
-    },
-    { signal }
-  );
-
-  tabsEl.addEventListener(
-    "pointermove",
-    (event) => {
-      if (!dragActive || event.pointerId !== pointerId) return;
-      const delta = event.clientX - startX;
-      if (!dragged && Math.abs(delta) > DRAG_THRESHOLD) {
-        dragged = true;
-        try {
-          tabsEl.setPointerCapture(pointerId);
-        } catch {
-          /* no-op: some browsers can't capture here */
-        }
-        tabsEl.classList.add("is-grabbing");
-      }
-      if (dragged) {
-        event.preventDefault();
-        tabsEl.scrollLeft = startScroll - delta;
-      }
-    },
-    { signal }
-  );
-
-  const endDrag = (event) => {
-    if (!dragActive || (event && event.pointerId !== pointerId)) return;
-    dragActive = false;
-    tabsEl.classList.remove("is-grabbing");
-    try {
-      tabsEl.releasePointerCapture(pointerId);
-    } catch {
-      /* no-op */
-    }
-  };
-
-  tabsEl.addEventListener("pointerup", endDrag, { signal });
-  tabsEl.addEventListener("pointercancel", endDrag, { signal });
-  tabsEl.addEventListener("pointerleave", endDrag, { signal });
-
-  tabsEl.addEventListener(
-    "click",
-    (event) => {
-      if (dragged) {
-        event.stopPropagation();
-        event.preventDefault();
-        dragged = false;
-      }
-    },
-    { capture: true, signal }
-  );
-
-  requestAnimationFrame(() => {
-    if (signal.aborted) return;
-    onScrollChange();
-    scrollActiveDrawerTabIntoView(tabsEl);
-  });
-}
-
-/** Slide the right drawer in (ticket detail, project settings, or create form). */
-export function openDrawer() {
-  drawerToken += 1;
-  drawer.hidden = false;
-  drawerBackdrop.hidden = false;
-  requestAnimationFrame(() => {
-    drawer.classList.add("is-open");
-    drawerBackdrop.classList.add("is-visible");
-  });
-}
-
-/**
- * Close the drawer overlay. Uses transitionend with a timeout fallback for `hidden`.
- * `drawerToken` invalidates pending finish callbacks if the user opens the drawer again mid-animation.
- */
-export function closeDrawer() {
-  const finishToken = ++drawerToken;
-  const wasOpen = drawer.classList.contains("is-open");
-  drawer.classList.remove("is-open");
-  drawerBackdrop.classList.remove("is-visible");
-
-  const finish = () => {
-    if (drawerToken !== finishToken) return;
-    drawer.hidden = true;
-    drawerBackdrop.hidden = true;
-    drawerInner.innerHTML = "";
-    const titleBlockEl = document.getElementById("drawerTitleBlock");
-    const tabsEl = document.getElementById("drawerTabs");
-    const tabsShellEl = document.getElementById("drawerTabsShell");
-    if (titleBlockEl) titleBlockEl.innerHTML = "";
-    if (tabsEl) tabsEl.innerHTML = "";
-    if (tabsShellEl) tabsShellEl.hidden = true;
-    teardownDrawerTabsScroll();
-    drawer.classList.remove("is-wide");
-  };
-
-  if (!wasOpen) {
-    finish();
-    return;
-  }
-
-  let ended = false;
-  const end = () => {
-    if (ended) return;
-    ended = true;
-    finish();
-  };
-
-  drawer.addEventListener("transitionend", end, { once: true });
-  setTimeout(end, 360);
-}
-
-/**
- * Fill the drawer's header + body slots. All drawer modes (ticket, project,
- * create) should route through this so the header/title/close/tabs stay
- * structurally consistent. `body` is an HTML string assigned to drawerInner.
- */
-export function renderDrawerShell({ eyebrow, title, titleAttrs, subtitleHtml, tabs, activeTab, onTabSelect, body, mode }) {
-  drawer.classList.toggle("is-settings", mode === "settings");
-  drawer.classList.toggle("is-wide", mode === "ticket" || mode === "settings");
-  const titleBlockEl = document.getElementById("drawerTitleBlock");
-  const tabsEl = document.getElementById("drawerTabs");
-  const tabsShellEl = document.getElementById("drawerTabsShell");
-
-  // Rebuild the eyebrow / title / subtitle wholesale each render. Like
-  // drawerInner.innerHTML below, this means any listeners the caller attached
-  // last render (e.g. the inline title editor's click handler) die with the
-  // old nodes, instead of stacking on persistent shell elements.
-  const extraTitleClass = titleAttrs?.class ? ` ${titleAttrs.class}` : "";
-  let titleAttrHtml = ` class="drawer-title drawer-title-text${extraTitleClass}"`;
-  for (const [key, value] of Object.entries(titleAttrs || {})) {
-    if (key === "class") continue;
-    titleAttrHtml += ` ${key}="${escapeHtml(String(value))}"`;
-  }
-  const segments = [];
-  if (eyebrow) segments.push(`<span class="drawer-eyebrow">${escapeHtml(eyebrow)}</span>`);
-  if (title != null && String(title).trim() !== "") {
-    segments.push(`<h2${titleAttrHtml}>${escapeHtml(title)}</h2>`);
-  }
-  if (subtitleHtml) segments.push(`<div class="drawer-subtitle">${subtitleHtml}</div>`);
-  titleBlockEl.innerHTML = segments.join("");
-
-  if (tabs && tabs.length) {
-    if (tabsShellEl) tabsShellEl.hidden = false;
-    tabsEl.innerHTML = tabs
-      .map(
-        (t) =>
-          `<button type="button" role="tab" class="drawer-tab ${
-            t.id === activeTab ? "is-active" : ""
-          }" data-drawer-tab="${escapeHtml(t.id)}" aria-selected="${t.id === activeTab}">${escapeHtml(t.label)}</button>`
-      )
-      .join("");
-    if (typeof onTabSelect === "function") {
-      tabsEl.querySelectorAll(".drawer-tab").forEach((btn) => {
-        btn.addEventListener("click", () => onTabSelect(btn.dataset.drawerTab));
-      });
-    }
-    bindDrawerTabsScroll(tabsEl);
-  } else {
-    if (tabsShellEl) tabsShellEl.hidden = true;
-    tabsEl.innerHTML = "";
-    teardownDrawerTabsScroll();
-  }
-
-  const archiveBtn = document.getElementById("drawerArchiveBtn");
-  if (archiveBtn) archiveBtn.hidden = state.detailMode !== "ticket";
-
-  drawerInner.innerHTML = body ?? "";
-}