@starlove/orbit 1.3.5 → 1.4.0

package/public/js/ticket-typeahead.js

@@ -0,0 +1,49 @@
+// Shared ticket typeahead: the styled suggestion dropdown used wherever a
+// ticket is picked by typing (ticket-detail's Related / parent-epic / add-child
+// fields and the New-card flyout's parent-epic field). Rows mirror the topbar
+// search results — bold #number, title, type badge, state badge — and selecting
+// a row fills the input with the canonical "#12 — Title" label so the host
+// form's resolve-on-submit logic keeps working unchanged.
+
+import { escapeHtml, ticketLabel, stateClassFor, typeLabel, canonicalTicketType } from "./format.js";
+import { attachTypeahead } from "./typeahead.js";
+
+// Canonical "#12 — Title" label the resolve-on-submit logic expects.
+export function ticketCanonicalLabel(t) {
+  return `#${t.number} — ${t.title}`;
+}
+
+// A typeahead row for a ticket: bold #number, title, then trailing type and
+// state badges — the same shape as the topbar search results.
+export function renderTicketHitRow(t) {
+  const type = canonicalTicketType(t.type);
+  return `
+    <span class="search-hit-main">
+      <strong>${escapeHtml(ticketLabel(t))}</strong>
+      <span class="search-hit-title">${escapeHtml(t.title)}</span>
+    </span>
+    <span class="search-hit-type type-pill-${escapeHtml(type)}">${escapeHtml(typeLabel(t.type))}</span>
+    <span class="search-hit-state" data-variant="${escapeHtml(stateClassFor(t))}">${escapeHtml(t.state_name || "State")}</span>
+  `;
+}
+
+// Matches a ticket against a query by number ("12", "#12") or title substring.
+export function ticketMatchesQuery(t, query) {
+  const q = query.replace(/^#/, "");
+  return String(t.number).startsWith(q) || t.title.toLowerCase().includes(query);
+}
+
+// Wire the styled typeahead onto a ticket-picker input. `getCandidates` returns
+// the eligible tickets; `onSelect` (optional) fires after the value is filled,
+// e.g. to record the chosen ticket's id in a hidden field.
+export function attachTicketTypeahead(input, getCandidates, { onSelect } = {}) {
+  if (!input) return;
+  attachTypeahead(input, {
+    getItems: getCandidates,
+    match: ticketMatchesQuery,
+    renderItem: renderTicketHitRow,
+    valueOf: ticketCanonicalLabel,
+    onSelect,
+    emptyText: "No matching tickets",
+  });
+}

package/public/js/toast.js

@@ -1,12 +1,14 @@
 // Toast notifications + small UI utilities (downloadJson, debounce).
 
 import { escapeHtml } from "./format.js";
+import { closeIconSvg, trashIconSvg } from "./icons.js";
 
 const toastIcons = {
   info: `<svg viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a.75.75 0 000 1.5h.253a.25.25 0 01.244.304l-.459 2.066A1.75 1.75 0 0010.747 15H11a.75.75 0 000-1.5h-.253a.25.25 0 01-.244-.304l.459-2.066A1.75 1.75 0 009.253 9H9z" clip-rule="evenodd"/></svg>`,
   success: `<svg viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd"/></svg>`,
   warning: `<svg viewBox="0 0 24 24" fill="currentColor"><path fill-rule="evenodd" d="M9.401 3.003c1.155-2 4.043-2 5.197 0l7.355 12.748c1.154 2-.29 4.5-2.599 4.5H4.645c-2.309 0-3.752-2.5-2.598-4.5L9.4 3.003zM12 8.25a.75.75 0 01.75.75v3.75a.75.75 0 01-1.5 0V9a.75.75 0 01.75-.75zm0 8.25a.75.75 0 100-1.5.75.75 0 000 1.5z" clip-rule="evenodd"/></svg>`,
-  error: `<svg viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z" clip-rule="evenodd"/></svg>`
+  error: `<svg viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z" clip-rule="evenodd"/></svg>`,
+  removed: trashIconSvg
 };
 
 let toastContainer = null;
@@ -19,7 +21,7 @@ function ensureToastContainer() {
   return toastContainer;
 }
 
-export function toast(message, type = "info", duration = 4000) {
+export function toast(message, type = "info", duration = 4000, options = {}) {
   const container = ensureToastContainer();
 
   const node = document.createElement("div");
@@ -27,9 +29,21 @@ export function toast(message, type = "info", duration = 4000) {
   node.setAttribute("role", "status");
 
   const icon = toastIcons[type];
-  node.innerHTML = `<span class="toast-icon">${icon}</span><span class="toast-msg">${escapeHtml(message)}</span><button class="toast-close" aria-label="Dismiss">&times;</button>`;
+  node.innerHTML = `<span class="toast-icon">${icon}</span><span class="toast-msg">${escapeHtml(message)}</span><button class="toast-close" aria-label="Dismiss">${closeIconSvg}</button>`;
 
-  node.querySelector(".toast-close").addEventListener("click", () => dismissToast(node));
+  node.querySelector(".toast-close").addEventListener("click", (event) => {
+    event.stopPropagation();
+    dismissToast(node);
+  });
+
+  // Optional whole-toast click action (e.g. "Update available → open Settings").
+  if (typeof options.onClick === "function") {
+    node.classList.add("toast-clickable");
+    node.addEventListener("click", () => {
+      options.onClick();
+      dismissToast(node);
+    });
+  }
 
   container.prepend(node);
   requestAnimationFrame(() => requestAnimationFrame(() => node.classList.add("toast-enter")));
@@ -46,6 +60,7 @@ toast.info = (msg, dur) => toast(msg, "info", dur);
 toast.success = (msg, dur) => toast(msg, "success", dur);
 toast.warning = (msg, dur) => toast(msg, "warning", dur);
 toast.error = (msg, dur) => toast(msg, "error", dur);
+toast.removed = (msg, dur) => toast(msg, "removed", dur);
 
 function dismissToast(node) {
   if (node.classList.contains("toast-exit")) return;

package/public/js/topbar-notes.js

@@ -32,12 +32,12 @@ function renderNotesBody(board) {
   const inner = hasNotes ? renderPreservedText(notes) : escapeHtml(NOTES_PLACEHOLDER);
   return `
     <div
-      class="inline-md-field-body preserved-text-body editable-field brand-focus-notes-edit${placeholderClass}"
+      class="inline-md-field-body preserved-text-body editable-field settings-notes-body brand-focus-notes-edit${placeholderClass}"
       data-edit-field="project_notes"
       tabindex="0"
       title="Click to edit"
       role="button"
-      aria-label="Edit board notes"
+      aria-label="Edit Notes For You"
     >${inner}</div>
   `;
 }
@@ -86,7 +86,7 @@ async function startBoardNotesEdit(sourceEvent) {
     fieldName: "project_notes",
     multiline: true,
     initialValue: lastRenderedBoard.project_notes || "",
-    ariaLabel: "Edit board notes",
+    ariaLabel: "Edit Notes For You",
     sourceEvent,
     rerender: async () => {
       renderTopbarFocus(lastRenderedBoard);

package/public/js/typeahead.js

@@ -0,0 +1,206 @@
+// Custom typeahead dropdown for the ticket-detail drawer inputs (Add label,
+// Set parent epic, Add related ticket). Replaces the native <datalist>, which
+// browsers render in their own un-styleable popup, with a results list that
+// reuses the topbar search styling (bold label + title + state badge). The
+// component only fills the input on selection — the surrounding form's Add/Set
+// button and Enter handler still own the actual mutation, so swapping the
+// datalist for this is a pure presentation change.
+
+const ACTIVE_CLASS = "is-active";
+
+/**
+ * Wire a styled suggestion dropdown onto a text input.
+ *
+ * Options:
+ *   - getItems():        returns the full candidate list (re-read on each keystroke).
+ *   - match(item, q):    whether an item matches the lowercased query string.
+ *   - renderItem(item):  inner HTML for the .search-hit row.
+ *   - valueOf(item):     string written into the input when the item is chosen.
+ *   - onSelect(item):    optional hook fired after the value is filled.
+ *   - emptyText:         message shown when a non-empty query matches nothing.
+ *   - minChars:          minimum query length before the list opens (default 0).
+ *   - maxItems:          cap on rendered rows (default 8).
+ *
+ * Returns a teardown function (rarely needed — the drawer is re-rendered wholesale).
+ */
+export function attachTypeahead(
+  input,
+  {
+    getItems,
+    match,
+    renderItem,
+    valueOf,
+    onSelect,
+    emptyText = "No matches",
+    minChars = 0,
+    maxItems = 8,
+  },
+) {
+  if (!input) return () => {};
+
+  // Appended to <body> (not the input's wrapper) so the ancestor
+  // .settings-card overflow:hidden can't clip it; positioned as fixed from the
+  // input's viewport rect and re-anchored on scroll/resize while open.
+  const list = document.createElement("div");
+  list.className = "search-results typeahead-results";
+  list.hidden = true;
+  list.setAttribute("role", "listbox");
+  list._ownerInput = input;
+  document.body.appendChild(list);
+
+  // The drawer re-renders wholesale, detaching the old inputs but leaving their
+  // body-level dropdowns behind. Sweep those orphans (owner no longer in the
+  // document) whenever a fresh typeahead mounts.
+  for (const el of document.querySelectorAll(".typeahead-results")) {
+    if (el !== list && el._ownerInput && !el._ownerInput.isConnected) {
+      el.remove();
+    }
+  }
+
+  let visible = [];
+  let activeIndex = -1;
+  let blurTimer = 0;
+
+  const position = () => {
+    const r = input.getBoundingClientRect();
+    list.style.left = `${r.left}px`;
+    list.style.width = `${r.width}px`;
+    list.style.top = `${r.bottom + 4}px`;
+  };
+
+  const onReposition = () => {
+    if (list.hidden) return;
+    position();
+  };
+
+  const close = () => {
+    list.hidden = true;
+    list.innerHTML = "";
+    visible = [];
+    activeIndex = -1;
+    window.removeEventListener("scroll", onReposition, true);
+    window.removeEventListener("resize", onReposition);
+  };
+
+  const open = () => {
+    if (!list.hidden) return;
+    list.hidden = false;
+    window.addEventListener("scroll", onReposition, true);
+    window.addEventListener("resize", onReposition);
+  };
+
+  const render = () => {
+    const query = input.value.trim().toLowerCase();
+    if (query.length < minChars) {
+      close();
+      return;
+    }
+    const all = getItems() || [];
+    visible = (query ? all.filter((item) => match(item, query)) : all).slice(
+      0,
+      maxItems,
+    );
+    if (visible.length === 0) {
+      // Only surface the empty state once the user has typed something —
+      // an empty focused field just shows the full (capped) list below.
+      if (query) {
+        open();
+        list.innerHTML = `<div class="search-hit typeahead-empty">${emptyText}</div>`;
+        position();
+      } else {
+        close();
+      }
+      return;
+    }
+    activeIndex = -1;
+    open();
+    list.innerHTML = visible
+      .map(
+        (item, i) =>
+          `<div class="search-hit" role="option" data-index="${i}">${renderItem(item)}</div>`,
+      )
+      .join("");
+    position();
+  };
+
+  const setActive = (next) => {
+    const rows = list.querySelectorAll("[data-index]");
+    if (!rows.length) return;
+    activeIndex = (next + rows.length) % rows.length;
+    rows.forEach((row, i) => {
+      const on = i === activeIndex;
+      row.classList.toggle(ACTIVE_CLASS, on);
+      if (on) row.scrollIntoView({ block: "nearest" });
+    });
+  };
+
+  const choose = (item) => {
+    if (!item) return;
+    input.value = valueOf(item);
+    // Let the host form react (e.g. the clear-button has-value toggle).
+    input.dispatchEvent(new Event("input", { bubbles: true }));
+    close();
+    input.focus();
+    if (onSelect) onSelect(item);
+  };
+
+  const onInput = () => render();
+  const onFocus = () => render();
+
+  const onKeydown = (event) => {
+    if (list.hidden) return;
+    if (event.key === "ArrowDown") {
+      event.preventDefault();
+      setActive(activeIndex + 1);
+    } else if (event.key === "ArrowUp") {
+      event.preventDefault();
+      setActive(activeIndex - 1);
+    } else if (event.key === "Enter") {
+      // Only swallow Enter when a suggestion is highlighted; otherwise let the
+      // form submit the typed value as before.
+      if (activeIndex >= 0 && visible[activeIndex]) {
+        event.preventDefault();
+        // stopImmediatePropagation so a sibling keydown listener on the same
+        // input (e.g. the label field's add-on-Enter) doesn't also fire.
+        event.stopImmediatePropagation();
+        choose(visible[activeIndex]);
+      }
+    } else if (event.key === "Escape") {
+      if (!list.hidden) {
+        event.stopPropagation();
+        close();
+      }
+    }
+  };
+
+  const onBlur = () => {
+    blurTimer = window.setTimeout(close, 120);
+  };
+
+  // mousedown beats the input's blur, so the row click registers before close().
+  const onMouseDown = (event) => {
+    const row = event.target.closest("[data-index]");
+    if (!row) return;
+    event.preventDefault();
+    window.clearTimeout(blurTimer);
+    choose(visible[Number(row.dataset.index)]);
+  };
+
+  input.addEventListener("input", onInput);
+  input.addEventListener("focus", onFocus);
+  input.addEventListener("keydown", onKeydown);
+  input.addEventListener("blur", onBlur);
+  list.addEventListener("mousedown", onMouseDown);
+
+  return () => {
+    window.clearTimeout(blurTimer);
+    window.removeEventListener("scroll", onReposition, true);
+    window.removeEventListener("resize", onReposition);
+    input.removeEventListener("input", onInput);
+    input.removeEventListener("focus", onFocus);
+    input.removeEventListener("keydown", onKeydown);
+    input.removeEventListener("blur", onBlur);
+    list.removeEventListener("mousedown", onMouseDown);
+    list.remove();
+  };
+}

package/public/js/update-check.js

@@ -0,0 +1,58 @@
+// Client-side update awareness. On boot we ask the server (GET /api/version)
+// whether a newer Orbit exists; if so we light a dot on the Settings button and
+// show a one-time toast. The Settings → Data "Version & Updates" card
+// reuses fetchVersionInfo/getUpdateInfo/syncUpdateBadge for "Check now".
+//
+// Only the server-backed "full" edition has /api/version; the preview edition
+// (IndexedDB, no server) and any fetch failure are swallowed silently — same
+// best-effort posture as help-menu.js's version pill.
+
+import { toast } from "./toast.js";
+import { navigate } from "./router.js";
+import { state } from "./state.js";
+import { edition } from "./config.js";
+
+const TOAST_SEEN_KEY = "orbit:updateToastSeen";
+
+let cachedInfo = null;
+
+/** Last /api/version payload (or null if not checked / unavailable). */
+export function getUpdateInfo() {
+  return cachedInfo;
+}
+
+/** Fetch version info. `force` adds ?refresh=1 so the server re-hits GitHub. */
+export async function fetchVersionInfo({ force = false } = {}) {
+  try {
+    const res = await fetch(`./api/version${force ? "?refresh=1" : ""}`, { cache: "no-store" });
+    if (!res.ok) return null;
+    cachedInfo = await res.json();
+    return cachedInfo;
+  } catch {
+    return null;
+  }
+}
+
+/** Toggle the Settings-button dot to match the latest known state. */
+export function syncUpdateBadge() {
+  const show = Boolean(cachedInfo?.updateAvailable);
+  const btn = document.getElementById("settingsBtn");
+  if (!btn) return;
+  btn.classList.toggle("has-update", show);
+  const dot = btn.querySelector(".topbar-update-dot");
+  if (dot) dot.hidden = !show;
+}
+
+/** Run once on boot: check, badge, and toast (deduped per detected version). */
+export async function checkForUpdate() {
+  if (edition !== "full") return;
+  const info = await fetchVersionInfo();
+  syncUpdateBadge();
+  if (!info?.updateAvailable || !info.latest) return;
+
+  if (localStorage.getItem(TOAST_SEEN_KEY) === info.latest) return;
+  localStorage.setItem(TOAST_SEEN_KEY, info.latest);
+  toast(`Orbit v${info.latest} is available →`, "info", 8000, {
+    onClick: () => navigate({ boardId: state.boardId, view: "settings", tab: "data" })
+  });
+}