@starlove/orbit 1.0.1

package/public/js/toast.js

@@ -0,0 +1,74 @@
+// Toast notifications + small UI utilities (downloadJson, debounce).
+
+import { escapeHtml } from "./format.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>`
+};
+
+let toastContainer = null;
+
+function ensureToastContainer() {
+  if (toastContainer && toastContainer.isConnected) return toastContainer;
+  toastContainer = document.createElement("div");
+  toastContainer.className = "toast-container";
+  document.body.append(toastContainer);
+  return toastContainer;
+}
+
+export function toast(message, type = "info", duration = 4000) {
+  const container = ensureToastContainer();
+
+  const node = document.createElement("div");
+  node.className = `toast toast-${type}`;
+  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.querySelector(".toast-close").addEventListener("click", () => dismissToast(node));
+
+  container.prepend(node);
+  requestAnimationFrame(() => requestAnimationFrame(() => node.classList.add("toast-enter")));
+
+  const timer = setTimeout(() => dismissToast(node), duration);
+  node.addEventListener("mouseenter", () => clearTimeout(timer));
+  node.addEventListener("mouseleave", () => {
+    const t2 = setTimeout(() => dismissToast(node), 1500);
+    node.addEventListener("mouseenter", () => clearTimeout(t2), { once: true });
+  });
+}
+
+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);
+
+function dismissToast(node) {
+  if (node.classList.contains("toast-exit")) return;
+  node.classList.add("toast-exit");
+  node.addEventListener("animationend", () => node.remove(), { once: true });
+}
+
+export function downloadJson(filename, value) {
+  const blob = new Blob([JSON.stringify(value, null, 2)], { type: "application/json" });
+  const url = URL.createObjectURL(blob);
+  const anchor = document.createElement("a");
+  anchor.href = url;
+  anchor.download = filename;
+  document.body.append(anchor);
+  anchor.click();
+  anchor.remove();
+  URL.revokeObjectURL(url);
+}
+
+export function debounce(fn, wait) {
+  let timer = 0;
+  return (...args) => {
+    clearTimeout(timer);
+    timer = setTimeout(() => fn(...args), wait);
+  };
+}

package/public/js/transport.js

@@ -0,0 +1,22 @@
+// Request transport. The full edition talks to the Orbit HTTP server; a
+// preview build will replace this module (or branch on `edition`) to dispatch
+// the same path/body shapes to a local IndexedDB backend. Keep this file
+// I/O-only — UI concerns (toasts, redirects) belong in api.js callers.
+
+export async function request({ method = "GET", path, body, headers }) {
+  const finalHeaders = { "Content-Type": "application/json", ...(headers || {}) };
+  const response = await fetch(path, {
+    method,
+    headers: finalHeaders,
+    body: body !== undefined ? JSON.stringify(body) : undefined
+  });
+  const text = await response.text();
+  const payload = text ? JSON.parse(text) : {};
+  if (!response.ok) {
+    const error = new Error(payload.error || response.statusText);
+    error.payload = payload;
+    error.status = response.status;
+    throw error;
+  }
+  return payload;
+}

package/public/js/unread.js

@@ -0,0 +1,121 @@
+// Per-card "unread updates" tracker. Lives client-side in localStorage so
+// no backend changes are needed. Each entry tracks both:
+//   readAt — ISO timestamp the human last acknowledged this card
+//   count  — number of foreign-actor events received since that ack
+// Render uses a dot for count===1 and a numeric pill for count>=2.
+//
+// Acknowledgement happens on three paths:
+//   - opening the card (renderDetail in ticket-detail.js)
+//   - own action via SSE self-event suppression (sse.js)
+//   - the one-time per-board seed below, so the very first load doesn't
+//     flash badges on every existing card
+
+import { state } from "./state.js";
+
+const READ_KEY = (boardId) => `mab_card_read:${boardId}`;
+const SEEDED_KEY = (boardId) => `mab_card_read_seeded:${boardId}`;
+
+const cache = new Map();
+
+// Normalize a stored value into { readAt, count }. Tolerates the old
+// string-only shape so existing localStorage entries upgrade in place.
+function normalize(raw) {
+  if (!raw) return { readAt: null, count: 0 };
+  if (typeof raw === "string") return { readAt: raw, count: 0 };
+  return { readAt: raw.readAt || null, count: Number(raw.count) || 0 };
+}
+
+function getMap(boardId) {
+  if (!boardId) return new Map();
+  let m = cache.get(boardId);
+  if (m) return m;
+  m = new Map();
+  try {
+    const raw = localStorage.getItem(READ_KEY(boardId));
+    if (raw) {
+      const obj = JSON.parse(raw);
+      for (const [k, v] of Object.entries(obj)) m.set(k, normalize(v));
+    }
+  } catch { /* ignore */ }
+  cache.set(boardId, m);
+  return m;
+}
+
+function persist(boardId) {
+  const m = cache.get(boardId);
+  if (!m) return;
+  try {
+    const obj = {};
+    for (const [k, v] of m) obj[k] = v;
+    localStorage.setItem(READ_KEY(boardId), JSON.stringify(obj));
+  } catch { /* ignore */ }
+}
+
+function entryFor(m, ticketId) {
+  let e = m.get(ticketId);
+  if (!e) {
+    e = { readAt: null, count: 0 };
+    m.set(ticketId, e);
+  }
+  return e;
+}
+
+export function unreadCount(ticket) {
+  const boardId = ticket?.board_id || state.boardId;
+  if (!boardId || !ticket?.id) return 0;
+  const m = getMap(boardId);
+  const e = m.get(ticket.id);
+  if (!e) {
+    // Absence: if seeded, the card appeared post-seed → flag with count 1.
+    // If never seeded, treat as read so first-ever load is quiet.
+    return localStorage.getItem(SEEDED_KEY(boardId)) === "1" ? 1 : 0;
+  }
+  return e.count;
+}
+
+export function isUnread(ticket) {
+  return unreadCount(ticket) > 0;
+}
+
+export function markRead(ticketId, timestamp) {
+  const boardId = state.boardId;
+  if (!boardId || !ticketId) return;
+  const m = getMap(boardId);
+  const e = entryFor(m, ticketId);
+  if (e.count === 0 && e.readAt && timestamp && e.readAt >= timestamp) return;
+  e.count = 0;
+  if (timestamp) e.readAt = timestamp;
+  persist(boardId);
+}
+
+export function bumpUnread(ticketId) {
+  const boardId = state.boardId;
+  if (!boardId || !ticketId) return;
+  const m = getMap(boardId);
+  const e = entryFor(m, ticketId);
+  e.count = (e.count || 0) + 1;
+  persist(boardId);
+}
+
+export function clearUnread(ticketId) {
+  const boardId = state.boardId;
+  if (!boardId || !ticketId) return;
+  const m = getMap(boardId);
+  if (!m.has(ticketId)) return;
+  m.delete(ticketId);
+  persist(boardId);
+}
+
+// One-time per-board seed so existing cards start "read" the first time the
+// user runs this version. Runs again per-board the first time each board is
+// visited.
+export function seedReadIfNeeded(boardId, tickets) {
+  if (!boardId) return;
+  if (localStorage.getItem(SEEDED_KEY(boardId)) === "1") return;
+  const m = getMap(boardId);
+  for (const t of tickets || []) {
+    if (!m.has(t.id) && t.updated_at) m.set(t.id, { readAt: t.updated_at, count: 0 });
+  }
+  persist(boardId);
+  try { localStorage.setItem(SEEDED_KEY(boardId), "1"); } catch { /* ignore */ }
+}