@starlove/orbit 1.0.1

package/public/js/create-card.js

@@ -0,0 +1,153 @@
+// "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, statesForProject, ticketsForProject } from "./state.js";
+import { escapeHtml, ticketLabel } from "./format.js";
+import { api } from "./api.js";
+import { syncUrlFromState } from "./router.js";
+import { closeDrawer } from "./drawer.js";
+import { closeMenuFlyouts } from "./board-menu.js";
+import { load } from "./app.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 = statesForProject();
+  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("");
+  const parentOptions = ticketsForProject()
+    .filter((ticket) => ticket.type === "epic")
+    .map((ticket) => `<option value="${escapeHtml(ticket.id)}">${escapeHtml(ticketLabel(ticket))}</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">×</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="create-flyout-grid">
+        <label>
+          Lane
+          <select id="createTicketState" name="state" class="select-chevron-field" aria-label="Lane">${stateOptions}</select>
+        </label>
+        <label>
+          Type
+          <select id="createTicketType" name="type" class="select-chevron-field" aria-label="Ticket type">
+            <option value="epic">Epic / Story</option>
+            <option value="feature">Feature</option>
+            <option value="task" selected>Task</option>
+            <option value="bug">Bug</option>
+          </select>
+        </label>
+        <label>
+          Priority
+          <select id="createTicketPriority" name="priority" class="select-chevron-field" aria-label="Priority">
+            <option value="0">MAYBE</option>
+            <option value="1">LOW</option>
+            <option value="2" selected>MED</option>
+            <option value="3">HIGH</option>
+            <option value="4">URGENT</option>
+          </select>
+        </label>
+      </div>
+      <label>
+        Parent epic
+        <select id="createTicketParent" name="parent_ticket_id" class="select-chevron-field" aria-label="Parent epic">
+          <option value="">None</option>
+          ${parentOptions}
+        </select>
+      </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;
+  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

@@ -0,0 +1,19 @@
+// 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

@@ -0,0 +1,137 @@
+// 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;
+
+/** 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 eyebrowEl = document.getElementById("drawerEyebrow");
+    const titleEl = document.getElementById("drawerTitle");
+    const subtitleEl = document.getElementById("drawerSubtitle");
+    const tabsEl = document.getElementById("drawerTabs");
+    if (eyebrowEl) { eyebrowEl.textContent = ""; eyebrowEl.hidden = true; }
+    if (titleEl) {
+      for (const attr of Array.from(titleEl.attributes)) {
+        if (attr.name !== "id") titleEl.removeAttribute(attr.name);
+      }
+      titleEl.className = "drawer-title-text";
+      titleEl.textContent = "";
+    }
+    if (subtitleEl) { subtitleEl.innerHTML = ""; subtitleEl.hidden = true; }
+    if (tabsEl) { tabsEl.innerHTML = ""; tabsEl.hidden = true; }
+  };
+
+  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");
+  const eyebrowEl = document.getElementById("drawerEyebrow");
+  const titleEl = document.getElementById("drawerTitle");
+  const subtitleEl = document.getElementById("drawerSubtitle");
+  const tabsEl = document.getElementById("drawerTabs");
+
+  if (eyebrow) {
+    eyebrowEl.textContent = eyebrow;
+    eyebrowEl.hidden = false;
+  } else {
+    eyebrowEl.textContent = "";
+    eyebrowEl.hidden = true;
+  }
+
+  if (subtitleHtml) {
+    subtitleEl.innerHTML = subtitleHtml;
+    subtitleEl.hidden = false;
+  } else {
+    subtitleEl.innerHTML = "";
+    subtitleEl.hidden = true;
+  }
+
+  // Reset prior edit-attrs / classes each render so different modes don't
+  // carry state from one another.
+  for (const attr of Array.from(titleEl.attributes)) {
+    if (attr.name !== "id") titleEl.removeAttribute(attr.name);
+  }
+  titleEl.className = "drawer-title-text";
+  if (titleAttrs) {
+    for (const [key, value] of Object.entries(titleAttrs)) {
+      if (key === "class") titleEl.className = `drawer-title-text ${value}`;
+      else titleEl.setAttribute(key, value);
+    }
+  }
+  titleEl.textContent = title ?? "";
+
+  if (tabs && tabs.length) {
+    tabsEl.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));
+      });
+    }
+  } else {
+    tabsEl.hidden = true;
+    tabsEl.innerHTML = "";
+  }
+
+  const archiveBtn = document.getElementById("drawerArchiveBtn");
+  if (archiveBtn) archiveBtn.hidden = state.detailMode !== "ticket";
+
+  drawerInner.innerHTML = body ?? "";
+}

package/public/js/format.js

@@ -0,0 +1,108 @@
+// Pure string helpers: escape, dates, ticket/type/priority labels.
+// Zero side effects, no imports — safe to import from anywhere.
+
+export function escapeHtml(value) {
+  return String(value ?? "")
+    .replaceAll("&", "&")
+    .replaceAll("<", "&lt;")
+    .replaceAll(">", "&gt;")
+    .replaceAll('"', "&quot;")
+    .replaceAll("'", "&#039;");
+}
+
+export function formatDate(value) {
+  if (!value) return "";
+  return new Intl.DateTimeFormat(undefined, {
+    month: "short",
+    day: "numeric",
+    hour: "numeric",
+    minute: "2-digit"
+  }).format(new Date(value));
+}
+
+/** Richer timestamp for the detail pane “Updated” line (refreshes after every save). */
+export function formatDateDetail(value) {
+  if (!value) return "";
+  return new Intl.DateTimeFormat(undefined, {
+    year: "numeric",
+    month: "short",
+    day: "numeric",
+    hour: "numeric",
+    minute: "2-digit",
+    second: "2-digit"
+  }).format(new Date(value));
+}
+
+export function ticketLabel(ticket) {
+  return `#${ticket.number}`;
+}
+
+export function canonicalTicketType(type) {
+  if (type === "epic" || type === "feature" || type === "bug" || type === "task") return type;
+  return "task";
+}
+
+// Short label for dense surfaces (card pills, child-card pills).
+export function typeLabel(type) {
+  const labels = {
+    epic: "Epic",
+    feature: "Feature",
+    task: "Task",
+    bug: "Bug"
+  };
+  return labels[canonicalTicketType(type)] || "Task";
+}
+
+// Long, hierarchy-aware label for dropdowns where we have the room. Epic/Story
+// pairs older vocabulary so existing terminology still resonates.
+export function typeLabelLong(type) {
+  const labels = {
+    epic: "Epic / Story",
+    feature: "Feature",
+    task: "Task",
+    bug: "Bug"
+  };
+  return labels[canonicalTicketType(type)] || "Task";
+}
+
+export function priorityLabel(priority) {
+  const labels = {
+    0: "MAYBE",
+    1: "LOW",
+    2: "MED",
+    3: "HIGH",
+    4: "URGENT"
+  };
+  return labels[Number(priority)] || "MED";
+}
+
+/** Lowercase key used for CSS class targeting: `priority-maybe`, `priority-urgent`, etc. */
+export function priorityKeyFor(priority) {
+  const keys = ["maybe", "low", "med", "high", "urgent"];
+  const n = Number(priority);
+  return keys[Number.isFinite(n) ? Math.max(0, Math.min(4, n)) : 2];
+}
+
+export function renderLabels(labels = []) {
+  if (!labels.length) return "";
+  return `
+    <div class="labels">
+      ${labels
+        .map(
+          (label) =>
+            `<span class="label" style="--label-color: ${escapeHtml(label.color)}">${escapeHtml(label.name)}</span>`
+        )
+        .join("")}
+    </div>
+  `;
+}
+
+export function repoLabelFromUrl(repoUrl) {
+  const raw = String(repoUrl || "").trim();
+  if (!raw) return "Not set";
+  const githubHttps = raw.match(/github\.com\/([^/\s]+)\/([^/\s]+?)(?:\.git)?$/i);
+  if (githubHttps) return `${githubHttps[1]}/${githubHttps[2]}`;
+  const githubSsh = raw.match(/github\.com[:/]([^/\s]+)\/([^/\s]+?)(?:\.git)?$/i);
+  if (githubSsh) return `${githubSsh[1]}/${githubSsh[2]}`;
+  return raw;
+}