beads-ui 0.1.2 → 0.2.0

package/app/router.js

@@ -1,14 +1,31 @@
+import { issueHashFor } from './utils/issue-url.js';
+
 /**
  * Hash-based router for tabs (issues/epics/board) and deep-linked issue ids.
  */
 
 /**
  * Parse an application hash and extract the selected issue id.
+ * Supports canonical form "#/(issues|epics|board)?issue=<id>" and legacy
+ * "#/issue/<id>" which we will rewrite to the canonical form.
  * @param {string} hash
  * @returns {string | null}
  */
 export function parseHash(hash) {
-  const m = /^#\/issue\/([^\s?#]+)/.exec(hash || '');
+  const h = String(hash || '');
+  // Extract the fragment sans leading '#'
+  const frag = h.startsWith('#') ? h.slice(1) : h;
+  const qIndex = frag.indexOf('?');
+  const query = qIndex >= 0 ? frag.slice(qIndex + 1) : '';
+  if (query) {
+    const params = new URLSearchParams(query);
+    const id = params.get('issue');
+    if (id) {
+      return decodeURIComponent(id);
+    }
+  }
+  // Legacy pattern: #/issue/<id>
+  const m = /^\/issue\/([^\s?#]+)/.exec(frag);
   return m && m[1] ? decodeURIComponent(m[1]) : null;
 }
 
@@ -30,18 +47,26 @@ export function parseView(hash) {
 }
 
 /**
- * Create and start the hash router.
  * @param {{ getState: () => any, setState: (patch: any) => void }} store
- * @returns {{ start: () => void, stop: () => void, gotoIssue: (id: string) => void, gotoView: (v: 'issues'|'epics'|'board') => void }}
  */
 export function createHashRouter(store) {
   /** @type {(ev?: HashChangeEvent) => any} */
   const onHashChange = () => {
     const hash = window.location.hash || '';
+    // Rewrite legacy #/issue/<id> to canonical #/issues?issue=<id>
+    const legacyMatch = /^#\/issue\/([^\s?#]+)/.exec(hash);
+    if (legacyMatch && legacyMatch[1]) {
+      const id = decodeURIComponent(legacyMatch[1]);
+      // Update state immediately for consumers expecting sync selection
+      store.setState({ selected_id: id, view: 'issues' });
+      const next = `#/issues?issue=${encodeURIComponent(id)}`;
+      if (window.location.hash !== next) {
+        window.location.hash = next;
+        return; // will trigger handler again
+      }
+    }
     const id = parseHash(hash);
-    // Preserve current view when navigating to a detail route so tabs remain stable
-    const current = store.getState ? store.getState() : { view: 'issues' };
-    const view = id ? current.view || 'issues' : parseView(hash);
+    const view = parseView(hash);
     store.setState({ selected_id: id, view });
   };
 
@@ -53,21 +78,32 @@ export function createHashRouter(store) {
     stop() {
       window.removeEventListener('hashchange', onHashChange);
     },
+    /**
+     * @param {string} id
+     */
     gotoIssue(id) {
-      const next = `#/issue/${encodeURIComponent(id)}`;
+      // Keep current view in hash and append issue param via helper
+      const s = store.getState ? store.getState() : { view: 'issues' };
+      const view = s.view || 'issues';
+      const next = issueHashFor(view, id);
       if (window.location.hash !== next) {
         window.location.hash = next;
       } else {
         // Force state update even if hash is the same
-        store.setState({ selected_id: id, view: 'issues' });
+        store.setState({ selected_id: id, view });
       }
     },
     /**
      * Navigate to a top-level view.
      * @param {'issues'|'epics'|'board'} view
      */
+    /**
+     * @param {'issues'|'epics'|'board'} view
+     */
     gotoView(view) {
-      const next = `#/${view}`;
+      const s = store.getState ? store.getState() : { selected_id: null };
+      const id = s.selected_id;
+      const next = id ? issueHashFor(view, id) : `#/${view}`;
       if (window.location.hash !== next) {
         window.location.hash = next;
       } else {

package/app/state.js

@@ -15,7 +15,15 @@
  */
 
 /**
- * @typedef {{ selected_id: string | null, view: ViewName, filters: Filters }} AppState
+ * @typedef {'today'|'3'|'7'} ClosedFilter
+ */
+
+/**
+ * @typedef {{ closed_filter: ClosedFilter }} BoardState
+ */
+
+/**
+ * @typedef {{ selected_id: string | null, view: ViewName, filters: Filters, board: BoardState }} AppState
  */
 
 /**
@@ -26,15 +34,21 @@
 export function createStore(initial = {}) {
   /** @type {AppState} */
   let state = {
-    selected_id: /** @type {any} */ (initial).selected_id ?? null,
-    view: /** @type {any} */ (initial).view ?? 'issues',
+    selected_id: initial.selected_id ?? null,
+    view: initial.view ?? 'issues',
     filters: {
-      status: /** @type {any} */ (initial).filters?.status ?? 'all',
-      search: /** @type {any} */ (initial).filters?.search ?? '',
+      status: initial.filters?.status ?? 'all',
+      search: initial.filters?.search ?? '',
       type:
-        typeof (/** @type {any} */ (initial).filters?.type) === 'string'
-          ? /** @type {any} */ (initial).filters?.type
-          : ''
+        typeof initial.filters?.type === 'string' ? initial.filters?.type : ''
+    },
+    board: {
+      closed_filter:
+        initial.board?.closed_filter === '3' ||
+        initial.board?.closed_filter === '7' ||
+        initial.board?.closed_filter === 'today'
+          ? initial.board?.closed_filter
+          : 'today'
     }
   };
 
@@ -57,14 +71,15 @@ export function createStore(initial = {}) {
     },
     /**
      * Update state. Nested filters can be partial.
-     * @param {{ selected_id?: string | null, filters?: Partial<Filters> }} patch
+     * @param {{ selected_id?: string | null, filters?: Partial<Filters>, board?: Partial<BoardState> }} patch
      */
     setState(patch) {
       /** @type {AppState} */
       const next = {
         ...state,
         ...patch,
-        filters: { ...state.filters, ...(patch.filters || {}) }
+        filters: { ...state.filters, ...(patch.filters || {}) },
+        board: { ...state.board, ...(patch.board || {}) }
       };
       // Avoid emitting if nothing changed (shallow compare)
       if (
@@ -72,7 +87,8 @@ export function createStore(initial = {}) {
         next.view === state.view &&
         next.filters.status === state.filters.status &&
         next.filters.search === state.filters.search &&
-        next.filters.type === state.filters.type
+        next.filters.type === state.filters.type &&
+        next.board.closed_filter === state.board.closed_filter
       ) {
         return;
       }

package/app/styles.css

@@ -158,6 +158,7 @@ a:focus {
 .header-nav .tab:hover,
 .header-nav .tab:focus {
   color: var(--fg);
+  outline-offset: 0px;
 }
 .header-nav .tab.active {
   color: var(--fg);
@@ -282,7 +283,7 @@ a:focus {
   outline-offset: var(--outline-offset);
 }
 .editable:focus-within {
-  outline: 2px solid #93c5fd;
+  outline: 2px solid color-mix(in srgb, var(--link) 60%, transparent);
   outline-offset: var(--outline-offset);
   cursor: text;
 }
@@ -385,6 +386,19 @@ button {
     border-color 140ms ease,
     transform 60ms ease;
 }
+/* Inline issue ID renderer: looks like plain text */
+button.id-copy {
+  background: transparent;
+  color: inherit;
+  border: none;
+  padding: 0;
+  margin: 0;
+  line-height: inherit;
+  font: inherit;
+}
+button.id-copy:hover {
+  text-decoration: underline;
+}
 button:hover {
   filter: brightness(1.02);
 }
@@ -687,7 +701,7 @@ input.inline-edit {
   outline-offset: var(--outline-offset);
 }
 input.inline-edit:focus {
-  outline: 2px solid #93c5fd;
+  outline: 2px solid color-mix(in srgb, var(--link) 50%, transparent);
   outline-offset: var(--outline-offset);
   box-shadow: none;
 }
@@ -739,7 +753,7 @@ input.inline-edit:focus {
 /* Keyboard focus ring helper */
 :focus-visible {
   outline: 2px solid color-mix(in srgb, var(--link) 60%, transparent);
-  outline-offset: var(--outline-offset);
+  outline-offset: 2px;
 }
 
 /* Subtle scrollbars (WebKit/Blink) */
@@ -779,6 +793,7 @@ input.inline-edit:focus {
 
 /* Spacing for acceptance and notes sections in details */
 #detail-root .acceptance,
+#detail-root .design,
 #detail-root .notes {
   margin-top: 32px;
 }
@@ -791,10 +806,17 @@ input.inline-edit:focus {
   line-height: inherit;
 }
 /* Title input fills available width and stays inline with buttons */
-#detail-root .detail-title input[type='text'] {
-  flex: 1 1 auto;
+#detail-root .detail-title h2 {
+  display: flex;
+  align-items: center;
+}
+#detail-root .detail-title h2 input[type='text'] {
+  flex: 1;
   padding: 0;
   min-width: 10px;
+  font-size: inherit;
+  line-height: inherit;
+  margin-right: 8px;
 }
 /* Remove borders in detail view; rely on global :focus-visible outline */
 #detail-root input[type='text'],
@@ -885,6 +907,15 @@ input.inline-edit:focus {
   gap: 16px;
   padding: 12px;
 }
+
+/* UI-121: stack two board columns vertically in a single grid cell */
+.board-stack-2 {
+  display: grid;
+  grid-template-rows: 1fr 1fr;
+  gap: 16px;
+  min-width: 380px;
+  min-height: 0;
+}
 .board-column {
   display: flex;
   flex-direction: column;
@@ -896,6 +927,10 @@ input.inline-edit:focus {
   background: color-mix(in srgb, var(--panel-bg) 92%, transparent);
 }
 .board-column__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
   position: sticky;
   top: 0;
   z-index: 1;
@@ -905,6 +940,16 @@ input.inline-edit:focus {
   background: inherit;
   backdrop-filter: saturate(140%) blur(4px);
 }
+/* Small, unobtrusive select for closed filter */
+.board-closed-filter {
+  margin: -8px 0;
+}
+.board-closed-filter select {
+  font-size: 13px;
+  border-radius: 999px;
+  border-color: var(--border);
+  padding: 2px 18px 2px 12px;
+}
 .board-column__body {
   padding: 10px;
   overflow: visible;
@@ -936,6 +981,10 @@ input.inline-edit:focus {
     0 2px 8px color-mix(in srgb, #000 16%, transparent),
     0 4px 16px color-mix(in srgb, #000 12%, transparent);
 }
+.board-card:focus {
+  outline: 2px solid color-mix(in srgb, var(--link) 50%, transparent);
+  outline-offset: 0px;
+}
 .board-card__title {
   font-weight: 600;
   margin-bottom: 4px;
@@ -955,6 +1004,16 @@ input.inline-edit:focus {
   }
 }
 
+/* a11y helper */
+.visually-hidden {
+  position: absolute !important;
+  height: 1px;
+  width: 1px;
+  overflow: hidden;
+  clip: rect(1px, 1px, 1px, 1px);
+  white-space: nowrap;
+}
+
 @media (prefers-color-scheme: dark) {
   :root {
     --fg: #e5e7eb;
@@ -1152,7 +1211,7 @@ html[data-theme='dark'] {
 }
 .detail-side {
   position: sticky;
-  top: 70px;
+  top: 18px;
 }
 .detail-main h2 {
   font-size: 28px;
@@ -1220,6 +1279,14 @@ html[data-theme='dark'] {
   padding: 0;
   margin: 0 0 8px;
 }
+.props-card ul li {
+  display: grid;
+  grid-template-columns: auto auto 1fr auto;
+  gap: 6px;
+  align-items: center;
+  padding: 2px 0;
+  cursor: pointer;
+}
 .props-card__title {
   font-weight: 700;
   font-size: 13px;
@@ -1248,6 +1315,103 @@ html[data-theme='dark'] {
   gap: 8px;
 }
 
+/* --- Issue Details Dialog (UI-104) --- */
+#issue-dialog {
+  padding: 0;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: var(--bg);
+  color: var(--fg);
+  width: min(96vw, 1200px);
+  max-height: 96vh;
+  margin: 2vh auto;
+  overflow: hidden;
+}
+#issue-dialog::backdrop {
+  background: color-mix(in srgb, #000 45%, transparent);
+  backdrop-filter: blur(1px);
+}
+.issue-dialog__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--border);
+}
+.issue-dialog__title {
+  font-weight: 700;
+}
+.issue-dialog__close {
+  border-radius: 4px;
+  padding: 4px 8px;
+  min-width: 28px;
+  line-height: 1.2;
+}
+.issue-dialog__body {
+  min-height: 200px;
+  max-height: calc(96vh - 44px);
+  overflow: auto;
+}
+
+.new-issue__body {
+  padding: 12px;
+}
+.new-issue__form {
+  display: grid;
+  grid-template-columns: 120px 1fr;
+  gap: 10px 12px;
+  align-items: center;
+}
+.new-issue__form label {
+  color: var(--muted);
+  font-size: 12px;
+}
+.new-issue__actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  margin-top: 8px;
+}
+.new-issue__error {
+  color: var(--danger, #b00020);
+  font-size: 12px;
+}
+
+/* --- New Issue Dialog (UI-106) --- */
+#new-issue-dialog {
+  padding: 0;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: var(--bg);
+  color: var(--fg);
+  width: min(640px, 96vw);
+  max-height: 96vh;
+  margin: 2vh auto;
+  overflow: hidden;
+}
+#new-issue-dialog::backdrop {
+  background: color-mix(in srgb, #000 45%, transparent);
+  backdrop-filter: blur(1px);
+}
+.new-issue__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--border);
+}
+.new-issue__title {
+  font-weight: 700;
+}
+.new-issue__close {
+  border-radius: 4px;
+  padding: 4px 8px;
+  min-width: 28px;
+  line-height: 1.2;
+}
+
 .prop.labels {
   align-items: start;
 }

package/app/utils/issue-id-renderer.js

@@ -0,0 +1,71 @@
+import { issueDisplayId } from './issue-id.js';
+
+/**
+ * Create a reusable, copy-to-clipboard issue ID renderer.
+ * Looks like the current inline ID (monospace `#123`) but acts as a button
+ * that copies the full, prefixed ID (e.g., `UI-123`) when activated.
+ * Shows transient "Copied" feedback and then restores the ID.
+ * @param {string} id - Full issue id including the prefix (e.g., "UI-123").
+ * @param {{ class_name?: string, duration_ms?: number }} [opts]
+ * @returns {HTMLButtonElement}
+ */
+export function createIssueIdRenderer(id, opts) {
+  /** @type {number} */
+  const duration =
+    typeof opts?.duration_ms === 'number' ? opts.duration_ms : 1200;
+  /** @type {HTMLButtonElement} */
+  const btn = document.createElement('button');
+  // Visual: match inline ID look; keep it neutral and text-like
+  btn.className =
+    (opts?.class_name ? opts.class_name + ' ' : '') + 'mono id-copy';
+  btn.type = 'button';
+  btn.setAttribute('aria-live', 'polite');
+  btn.setAttribute('title', 'Copy issue ID');
+  btn.setAttribute('aria-label', `Copy issue ID ${id}`);
+  const label = issueDisplayId(id);
+  btn.textContent = label;
+
+  /** Copy handler with feedback */
+  async function doCopy() {
+    // Prevent accidental row navigation and parent handlers
+    // (click/key handlers call this inside an event context)
+    try {
+      if (
+        navigator.clipboard &&
+        typeof navigator.clipboard.writeText === 'function'
+      ) {
+        await navigator.clipboard.writeText(String(id));
+      }
+      const prev = btn.textContent || label;
+      btn.textContent = 'Copied';
+      // Keep accessible label consistent with feedback
+      const oldAria = btn.getAttribute('aria-label') || '';
+      btn.setAttribute('aria-label', 'Copied');
+      setTimeout(
+        () => {
+          btn.textContent = prev;
+          btn.setAttribute('aria-label', oldAria);
+        },
+        Math.max(80, duration)
+      );
+    } catch {
+      // On failure, leave text as-is; no throw to avoid disruptive UX
+    }
+  }
+
+  btn.addEventListener('click', (ev) => {
+    ev.preventDefault();
+    ev.stopPropagation();
+    void doCopy();
+  });
+  btn.addEventListener('keydown', (ev) => {
+    // Ensure keyboard activation works even in non-interactive test envs
+    if (ev.key === 'Enter' || ev.key === ' ') {
+      ev.preventDefault();
+      ev.stopPropagation();
+      void doCopy();
+    }
+  });
+
+  return btn;
+}

package/app/utils/issue-url.js

@@ -0,0 +1,9 @@
+/**
+ * Build a canonical issue hash that retains the view.
+ * @param {'issues'|'epics'|'board'} view
+ * @param {string} id
+ */
+export function issueHashFor(view, id) {
+  const v = view === 'epics' || view === 'board' ? view : 'issues';
+  return `#/${v}?issue=${encodeURIComponent(id)}`;
+}

package/app/utils/toast.js

@@ -0,0 +1,35 @@
+/**
+ * Show a transient global toast message anchored to the viewport.
+ * @param {string} text - Message text.
+ * @param {'info'|'success'|'error'} [variant] - Visual variant.
+ * @param {number} [duration_ms] - Auto-dismiss delay in milliseconds.
+ */
+export function showToast(text, variant = 'info', duration_ms = 2800) {
+  /** @type {HTMLDivElement} */
+  const el = document.createElement('div');
+  el.className = 'toast';
+  el.textContent = text;
+  el.style.position = 'fixed';
+  el.style.right = '12px';
+  el.style.bottom = '12px';
+  el.style.zIndex = '1000';
+  el.style.color = '#fff';
+  el.style.padding = '8px 10px';
+  el.style.borderRadius = '4px';
+  el.style.fontSize = '12px';
+  if (variant === 'success') {
+    el.style.background = '#156d36';
+  } else if (variant === 'error') {
+    el.style.background = '#9f2011';
+  } else {
+    el.style.background = 'rgba(0,0,0,0.85)';
+  }
+  (document.body || document.documentElement).appendChild(el);
+  setTimeout(() => {
+    try {
+      el.remove();
+    } catch {
+      /* ignore */
+    }
+  }, duration_ms);
+}