@starlove/orbit 1.0.1

package/public/js/main.js

@@ -0,0 +1,142 @@
+// Application entry point. Imports `starscape.js` for its side effects
+// (canvas + theme toggle init), wires the topbar buttons and global
+// keyboard/click listeners, and kicks off the bootstrap → router activation
+// sequence. The reusable `load` / `render` helpers live in app.js so feature
+// modules can import them without creating cycles back through this entry.
+
+import "./starscape.js";
+
+import {
+  $,
+  boardMenuBtn,
+  boardFlyout,
+  drawer,
+  drawerBackdrop,
+  createFlyoutBackdrop,
+  searchInput
+} from "./dom.js";
+import { state } from "./state.js";
+import { api, withBoardQuery } from "./api.js";
+import { toast, debounce } from "./toast.js";
+import { navigate, applyRoute, syncUrlFromState, setRouterReady } from "./router.js";
+import {
+  openBoardFlyout,
+  closeBoardFlyout,
+  closeMenuFlyouts
+} from "./board-menu.js";
+import {
+  openCreateFlyout,
+  closeCreateFlyout,
+  isCreateFlyoutOpen
+} from "./create-card.js";
+import { enableKanbanDragScroll } from "./kanban.js";
+import { runSearch, hideSearch } from "./search.js";
+import { load } from "./app.js";
+import { edition } from "./config.js";
+import { openModal, wireModal } from "./modal.js";
+
+async function init() {
+  const welcomeDialog = document.getElementById("welcomeDialog");
+  wireModal(welcomeDialog);
+  if (edition === "preview") {
+    openModal(welcomeDialog);
+  }
+
+  $("#settingsBtn").addEventListener("click", async () => {
+    closeCreateFlyout();
+    closeMenuFlyouts();
+    navigate({
+      boardId: state.boardId,
+      view: "settings",
+      tab: state.settingsTab || "lanes"
+    });
+  });
+
+  boardMenuBtn?.addEventListener("click", (event) => {
+    event.stopPropagation();
+    if (!boardFlyout.hidden) {
+      closeBoardFlyout();
+      return;
+    }
+    openBoardFlyout();
+  });
+
+  $("#newTicketBtn").addEventListener("click", () => {
+    if (isCreateFlyoutOpen()) {
+      closeCreateFlyout();
+      return;
+    }
+    openCreateFlyout("");
+  });
+
+  createFlyoutBackdrop.addEventListener("click", () => {
+    closeCreateFlyout();
+  });
+
+  $("#drawerCloseBtn").addEventListener("click", () => {
+    navigate({
+      boardId: state.boardId,
+      view: "board"
+    });
+  });
+
+  $("#drawerArchiveBtn").addEventListener("click", async () => {
+    const ticketId = state.selectedTicketId;
+    if (!ticketId || state.detailMode !== "ticket") return;
+    const ticket = state.data?.tickets?.find((t) => t.id === ticketId);
+    const titleForToast = ticket?.title || "card";
+    await api(withBoardQuery(`/api/tickets/${encodeURIComponent(ticketId)}/archive`), { method: "POST" });
+    toast.error(`Archived: ${titleForToast}`);
+    await load();
+    navigate({ boardId: state.boardId, view: "board" });
+  });
+
+  drawerBackdrop.addEventListener("click", () => {
+    navigate({
+      boardId: state.boardId,
+      view: "board"
+    });
+  });
+
+  document.addEventListener("keydown", (event) => {
+    if (event.key !== "Escape") return;
+    if (!boardFlyout.hidden) {
+      closeMenuFlyouts();
+      return;
+    }
+    if (isCreateFlyoutOpen()) {
+      closeCreateFlyout();
+      return;
+    }
+    if (!drawer.classList.contains("is-open")) return;
+    const el = document.activeElement;
+    if (el?.classList?.contains("inline-title-editor") || el?.classList?.contains("inline-desc-editor")) return;
+    navigate({
+      boardId: state.boardId,
+      view: "board"
+    });
+  });
+
+  searchInput.addEventListener("input", debounce(runSearch, 220));
+  document.addEventListener("click", (event) => {
+    if (!event.target.closest("#topbarSearch")) hideSearch();
+    if (!event.target.closest(".topbar-menu")) closeMenuFlyouts();
+  });
+
+  enableKanbanDragScroll();
+
+  await load();
+
+  // Activate the router. If the page was loaded with a hash, restore that
+  // view; otherwise canonicalize the URL to reflect the current state so the
+  // back button has a starting point.
+  setRouterReady(true);
+  const initialHash = location.hash;
+  if (initialHash && initialHash !== "#" && initialHash !== "#/") {
+    await applyRoute();
+  } else {
+    syncUrlFromState({ replace: true });
+  }
+}
+
+init();

package/public/js/modal.js

@@ -0,0 +1,31 @@
+// Generic <dialog> modal utility.
+//
+// Usage:
+//   wireModal(el)         — wire backdrop-click + [data-modal-close] buttons.
+//   openModal(el)         — show the dialog as a modal (focus-trapped overlay).
+//   closeModal(el)        — close it programmatically.
+//
+// Escape key is handled natively by the browser; no extra wiring needed.
+
+export function openModal(dialogEl) {
+  dialogEl?.showModal();
+}
+
+export function closeModal(dialogEl) {
+  if (dialogEl?.open) dialogEl.close();
+}
+
+export function wireModal(dialogEl) {
+  if (!dialogEl) return;
+
+  // Close when the user clicks the backdrop (the dialog element itself,
+  // outside its inner content box).
+  dialogEl.addEventListener("click", (event) => {
+    if (event.target === dialogEl) closeModal(dialogEl);
+  });
+
+  // Close buttons: any element inside the dialog with [data-modal-close].
+  dialogEl.querySelectorAll("[data-modal-close]").forEach((btn) => {
+    btn.addEventListener("click", () => closeModal(dialogEl));
+  });
+}

package/public/js/router.js

@@ -0,0 +1,114 @@
+// Hash-based router. The URL hash is the source of truth for which view is
+// shown. `navigate()` writes to it; the popstate listener replays it. The
+// in-memory `state` object is still used for rendering — applyRoute() just
+// mirrors the parsed hash into `state` before calling render().
+
+import { state } from "./state.js";
+import { SETTINGS_TAB_IDS, normalizeSettingsTab } from "./settings-tabs.js";
+import { closeMenuFlyouts } from "./board-menu.js";
+import { closeCreateFlyout } from "./create-card.js";
+
+const Route = {
+  parse(hash) {
+    const cleaned = String(hash || "").replace(/^#/, "").replace(/^\/+/, "");
+    const parts = cleaned ? cleaned.split("/") : [];
+    const out = { boardId: "", view: "board", ticketId: "", tab: "" };
+    let i = 0;
+    if (parts[i] === "b" && parts[i + 1]) { out.boardId = decodeURIComponent(parts[i + 1]); i += 2; }
+    if (parts[i] === "t" && parts[i + 1]) {
+      out.view = "ticket";
+      out.ticketId = decodeURIComponent(parts[i + 1]);
+    } else if (parts[i] === "settings") {
+      out.view = "settings";
+      const t = parts[i + 1];
+      if (t && SETTINGS_TAB_IDS.has(t)) out.tab = t;
+    }
+    return out;
+  },
+  build({ boardId = "", view = "board", ticketId = "", tab = "" } = {}) {
+    const segs = [];
+    if (boardId) segs.push("b", encodeURIComponent(boardId));
+    if (view === "ticket" && ticketId) segs.push("t", encodeURIComponent(ticketId));
+    else if (view === "settings") {
+      segs.push("settings");
+      if (tab && SETTINGS_TAB_IDS.has(tab)) segs.push(tab);
+    }
+    return "#/" + segs.join("/");
+  },
+  fromState() {
+    let view = "board";
+    if (state.detailMode === "ticket" && state.selectedTicketId) view = "ticket";
+    else if (state.detailMode === "settings") view = "settings";
+    return {
+      boardId: state.boardId,
+      view,
+      ticketId: state.selectedTicketId,
+      tab: view === "settings" ? normalizeSettingsTab(state.settingsTab) : ""
+    };
+  }
+};
+
+let routerReady = false;
+
+export function setRouterReady(value) {
+  routerReady = value;
+}
+
+export async function navigate(routeObj, { replace = false } = {}) {
+  const hash = Route.build(routeObj);
+  if (location.hash === hash) {
+    if (routerReady) await applyRoute();
+    return;
+  }
+  if (replace) history.replaceState(null, "", hash);
+  else history.pushState(null, "", hash);
+  if (routerReady) await applyRoute();
+}
+
+// Push or replace the URL to match the current `state` without re-rendering.
+// Used after flows that already mutated state and called load()/render()
+// (e.g. ticket/board creation).
+export function syncUrlFromState({ replace = false } = {}) {
+  const hash = Route.build(Route.fromState());
+  if (location.hash === hash) return;
+  if (replace) history.replaceState(null, "", hash);
+  else history.pushState(null, "", hash);
+}
+
+export async function applyRoute() {
+  const { load, render } = await import("./app.js");
+  const r = Route.parse(location.hash);
+  const prevBoardId = state.boardId;
+  if (r.boardId) state.boardId = r.boardId;
+
+  if (r.view === "ticket") {
+    state.selectedTicketId = r.ticketId || "";
+    state.detailMode = r.ticketId ? "ticket" : "empty";
+  } else if (r.view === "settings") {
+    state.selectedTicketId = "";
+    state.detailMode = "settings";
+    if (r.tab) {
+      state.settingsTab = r.tab;
+      try {
+        localStorage.setItem("mab_settings_tab", r.tab);
+      } catch {
+        /* ignore */
+      }
+    }
+  } else {
+    state.selectedTicketId = "";
+    state.detailMode = "empty";
+  }
+
+  closeMenuFlyouts();
+  closeCreateFlyout();
+
+  if (r.boardId && r.boardId !== prevBoardId) {
+    await load();
+  }
+  await render();
+}
+
+window.addEventListener("popstate", () => {
+  if (routerReady) void applyRoute();
+});

package/public/js/search.js

@@ -0,0 +1,53 @@
+// Topbar search. Debounced via the input handler in main.js; queries the
+// /api/search endpoint and renders a small results dropdown that navigates
+// to the chosen ticket on click.
+
+import { searchInput, searchResults } from "./dom.js";
+import { state, currentBoard } from "./state.js";
+import { api } from "./api.js";
+import { navigate } from "./router.js";
+import { escapeHtml, ticketLabel } from "./format.js";
+import { closeCreateFlyout } from "./create-card.js";
+
+export async function runSearch() {
+  const query = searchInput.value.trim();
+  if (query.length < 2) {
+    hideSearch();
+    return;
+  }
+  const board = currentBoard();
+  if (!board) return;
+  const result = await api(`/api/search?q=${encodeURIComponent(query)}&board=${encodeURIComponent(board.slug)}`);
+  if (result.results.length === 0) {
+    searchResults.hidden = false;
+    searchResults.innerHTML = `<div class="search-hit">No results</div>`;
+    return;
+  }
+  searchResults.hidden = false;
+  searchResults.innerHTML = result.results
+    .map(
+      (ticket) => `
+        <div class="search-hit" data-ticket-id="${ticket.id}">
+          <strong>${escapeHtml(ticketLabel(ticket))}</strong>
+          ${escapeHtml(ticket.title)}
+        </div>
+      `
+    )
+    .join("");
+  searchResults.querySelectorAll("[data-ticket-id]").forEach((hit) => {
+    hit.addEventListener("click", async () => {
+      closeCreateFlyout();
+      hideSearch();
+      navigate({
+        boardId: state.boardId,
+        view: "ticket",
+        ticketId: hit.dataset.ticketId
+      });
+    });
+  });
+}
+
+export function hideSearch() {
+  searchResults.hidden = true;
+  searchResults.innerHTML = "";
+}

package/public/js/settings-tabs.js

@@ -0,0 +1,7 @@
+/** Settings drawer tab ids — must match URL segments `#/b/…/settings/:tab` and `settings.js` tab config. */
+export const SETTINGS_TAB_IDS = new Set(["lanes", "ai", "notes", "journal", "repository", "archive"]);
+
+export function normalizeSettingsTab(raw) {
+  if (!raw || !SETTINGS_TAB_IDS.has(raw)) return "lanes";
+  return raw;
+}