@stacksjs/defaults 0.70.207 → 0.70.208

package/views/dashboard/kanban/[id].stx

@@ -0,0 +1,899 @@
+@extends('layouts/default')
+
+@section('content')
+<script client>
+  // Kanban board view (stacksjs/stacks#1846 Phase 2).
+  //
+  // Drag-and-drop via Pragmatic Drag and Drop (Atlassian). Loaded from
+  // esm.sh so we don't need a bundler step — the dashboard's
+  // <script client> blocks run as inline modules and ESM imports
+  // resolve at fetch time. The library is ~5kb gzipped so the
+  // round-trip cost is negligible.
+  //
+  // Optimistic-update pattern:
+  //   1. The DnD handler mutates the store immediately (so the card
+  //      visually settles in its new position before the network
+  //      round-trip).
+  //   2. The store fires the reorder API call.
+  //   3. On failure, the store restores its snapshot and surfaces an
+  //      error message; the UI re-renders from the restored state.
+  //
+  // Both column reorder (drag the column header) and card reorder
+  // (drag the card body) share the same /cards/reorder + /columns/reorder
+  // mutations on the store.
+  import { useStore } from '@stacksjs/stx'
+  import { useNavigation } from '../composables/useNavigation'
+  import { useRole } from '../composables/useRole'
+  import {
+    draggable,
+    dropTargetForElements,
+    monitorForElements,
+  } from 'https://esm.sh/@atlaskit/pragmatic-drag-and-drop@1/element/adapter'
+  import {
+    attachClosestEdge,
+    extractClosestEdge,
+  } from 'https://esm.sh/@atlaskit/pragmatic-drag-and-drop-hitbox@1/closest-edge'
+
+  const kanban = useStore('kanban')
+  const { isDev } = useRole()
+  const canView = derived(() => isDev())
+
+  const loading = derived(() => kanban.loadingBoard())
+  const error = derived(() => kanban.errorBoard())
+  const board = derived(() => kanban.currentBoard())
+  const columns = derived(() => kanban.currentColumns())
+  const allLabels = derived(() => kanban.currentLabels())
+
+  // Card detail modal state — read straight from the store. The
+  // modal itself lives at the bottom of this file.
+  const openCard = derived(() => kanban.openCard())
+  const loadingCard = derived(() => kanban.loadingCard())
+  const errorCard = derived(() => kanban.errorCard())
+
+  // Inline composer state. Each column has its own (independent) "add
+  // card" composer; the boolean tracks whether the input is open.
+  const composingCardForColumnId = state(null)
+  const draftCardTitle = state('')
+  const composingNewColumn = state(false)
+  const draftColumnName = state('')
+
+  // Modal-local edit drafts. Title + description debounce-on-blur,
+  // due-date commits on change. Labels + assignees commit instantly
+  // via the sync endpoints (one round-trip per toggle).
+  const titleDraft = state('')
+  const descDraft = state('')
+  const commentDraft = state('')
+  const showLabelPicker = state(false)
+  const showAssigneePicker = state(false)
+  const showNewLabelComposer = state(false)
+  const newLabelName = state('')
+  const newLabelColor = state('slate')
+
+  function syncDraftsFromCard() {
+    const c = openCard()
+    titleDraft.set(c ? c.title : '')
+    descDraft.set(c ? (c.description || '') : '')
+    commentDraft.set('')
+  }
+  // Sync drafts when the open card changes (open / close / refetch).
+  effect(() => { openCard(); Promise.resolve().then(syncDraftsFromCard) })
+
+  async function commitTitle() {
+    const c = openCard()
+    if (!c) return
+    const next = titleDraft().trim()
+    if (!next || next === c.title) return
+    await kanban.updateCard({ title: next })
+  }
+
+  async function commitDescription() {
+    const c = openCard()
+    if (!c) return
+    const next = descDraft()
+    if (next === (c.description || '')) return
+    await kanban.updateCard({ description: next || null })
+  }
+
+  async function commitDueDate(value) {
+    await kanban.updateCard({ dueDate: value || null })
+  }
+
+  async function toggleLabel(labelId) {
+    const c = openCard()
+    if (!c) return
+    const has = c.labels.some(l => l.id === labelId)
+    const next = has
+      ? c.labels.filter(l => l.id !== labelId).map(l => l.id)
+      : [...c.labels.map(l => l.id), labelId]
+    await kanban.syncCardLabels(c.id, next)
+  }
+
+  async function toggleAssignee(userId) {
+    const c = openCard()
+    if (!c) return
+    const has = c.assignees.some(a => a.userId === userId)
+    const next = has
+      ? c.assignees.filter(a => a.userId !== userId).map(a => a.userId)
+      : [...c.assignees.map(a => a.userId), userId]
+    await kanban.syncCardAssignees(c.id, next)
+  }
+
+  async function submitComment() {
+    const text = commentDraft().trim()
+    if (!text) return
+    const ok = await kanban.addComment(text)
+    if (ok) commentDraft.set('')
+  }
+
+  async function deleteCommentClicked(commentId) {
+    if (!window.confirm('Delete this comment?')) return
+    await kanban.deleteComment(commentId)
+  }
+
+  async function submitNewLabel() {
+    const name = newLabelName().trim()
+    if (!name) return
+    const c = openCard()
+    const boardId = c ? c.boardId : (board() ? board().id : null)
+    if (!boardId) return
+    const created = await kanban.createLabel({ boardId, name, color: newLabelColor() })
+    if (created && c)
+      await kanban.syncCardLabels(c.id, [...c.labels.map(l => l.id), created.id])
+    newLabelName.set('')
+    showNewLabelComposer.set(false)
+  }
+
+  async function deleteLabelClicked(labelId) {
+    if (!window.confirm('Delete this label everywhere it\'s used?')) return
+    await kanban.deleteLabel(labelId)
+  }
+
+  const labelColors = ['slate', 'red', 'amber', 'emerald', 'blue', 'violet', 'rose']
+
+  function totalCards() {
+    const cols = columns()
+    let n = 0
+    for (const col of cols) n += (col.cards ? col.cards.length : 0)
+    return n
+  }
+
+  // Column color → header accent class. Free-form string in the
+  // model, mapped here so a new hue without an explicit mapping
+  // falls back to slate.
+  function columnAccentClass(color) {
+    return ({
+      slate: 'bg-slate-100 dark:bg-slate-800',
+      amber: 'bg-amber-100 dark:bg-amber-900/40',
+      blue: 'bg-blue-100 dark:bg-blue-900/40',
+      emerald: 'bg-emerald-100 dark:bg-emerald-900/40',
+      red: 'bg-red-100 dark:bg-red-900/40',
+      violet: 'bg-violet-100 dark:bg-violet-900/40',
+    })[color] || 'bg-slate-100 dark:bg-slate-800'
+  }
+
+  // Pull the id from the URL via the composable instead of window.location
+  // (stacksjs/stacks#1838 — no vanilla DOM in dashboard pages).
+  const id = useNavigation().urlIdParam()
+  if (id !== null)
+    kanban.loadBoard(id)
+
+  // ─── Composer handlers ────────────────────────────────────────────
+
+  function openCardComposer(columnId) {
+    composingCardForColumnId.set(columnId)
+    draftCardTitle.set('')
+  }
+  function closeCardComposer() {
+    composingCardForColumnId.set(null)
+    draftCardTitle.set('')
+  }
+  async function submitCard(columnId) {
+    const title = draftCardTitle().trim()
+    if (!title) {
+      closeCardComposer()
+      return
+    }
+    await kanban.createCard({ columnId, title })
+    closeCardComposer()
+  }
+  function isComposingFor(columnId) {
+    return composingCardForColumnId() === columnId
+  }
+
+  function openColumnComposer() {
+    composingNewColumn.set(true)
+    draftColumnName.set('')
+  }
+  function closeColumnComposer() {
+    composingNewColumn.set(false)
+    draftColumnName.set('')
+  }
+  async function submitColumn() {
+    const name = draftColumnName().trim()
+    if (!name) {
+      closeColumnComposer()
+      return
+    }
+    if (!board()) return
+    await kanban.createColumn({ boardId: board().id, name })
+    closeColumnComposer()
+  }
+
+  async function deleteCardClicked(cardId) {
+    if (!window.confirm('Delete this card?')) return
+    await kanban.deleteCard(cardId)
+  }
+  async function deleteColumnClicked(columnId, hasCards) {
+    const warning = hasCards
+      ? 'Delete this column AND its cards? This cannot be undone.'
+      : 'Delete this empty column?'
+    if (!window.confirm(warning)) return
+    await kanban.deleteColumn(columnId)
+  }
+
+  // ─── Card detail modal handlers ───────────────────────────────────
+
+  function openDetail(cardId) {
+    kanban.loadUsers() // background-fetch for assignee picker
+    kanban.openCardDetail(cardId)
+  }
+  function closeDetail() { kanban.closeCardDetail() }
+
+  // Label color → tailwind hue. Mirrors the column-accent map but
+  // returns a more saturated chip class.
+  function labelChipClass(color) {
+    return ({
+      slate:   'bg-slate-100   text-slate-700   dark:bg-slate-800/60  dark:text-slate-200',
+      amber:   'bg-amber-100   text-amber-700   dark:bg-amber-900/40  dark:text-amber-200',
+      blue:    'bg-blue-100    text-blue-700    dark:bg-blue-900/40   dark:text-blue-200',
+      emerald: 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/40 dark:text-emerald-200',
+      red:     'bg-red-100     text-red-700     dark:bg-red-900/40    dark:text-red-200',
+      violet:  'bg-violet-100  text-violet-700  dark:bg-violet-900/40 dark:text-violet-200',
+      rose:    'bg-rose-100    text-rose-700    dark:bg-rose-900/40   dark:text-rose-200',
+    })[color] || 'bg-slate-100 text-slate-700 dark:bg-slate-800/60 dark:text-slate-200'
+  }
+
+  function initialsOf(name, email) {
+    const source = (name || email || '?').trim()
+    const parts = source.split(/\s+/).filter(Boolean)
+    if (parts.length === 0) return '?'
+    if (parts.length === 1) return parts[0].slice(0, 2).toUpperCase()
+    return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase()
+  }
+
+  function formatDueDate(iso) {
+    if (!iso) return ''
+    const d = new Date(iso)
+    if (Number.isNaN(d.getTime())) return ''
+    return d.toLocaleDateString(undefined, { month: 'short', day: 'numeric' })
+  }
+
+  function formatTimestamp(iso) {
+    if (!iso) return ''
+    const d = new Date(iso)
+    if (Number.isNaN(d.getTime())) return ''
+    return d.toLocaleString(undefined, { dateStyle: 'medium', timeStyle: 'short' })
+  }
+
+  // ─── DnD wiring ────────────────────────────────────────────────────
+  //
+  // The cleanest pattern with Pragmatic DnD + a reactive UI: wire the
+  // drop targets + draggables in an `onMount`-style effect that
+  // re-runs when the columns list changes. The library's `cleanup()`
+  // functions handle deregistering listeners as DOM nodes go away.
+  //
+  // We mark every card element with `data-card-id` and every column
+  // with `data-column-id` so the monitor can extract the move
+  // semantics from the dragged element + drop target.
+
+  const dndCleanups = []
+
+  function teardownDnd() {
+    while (dndCleanups.length) {
+      const fn = dndCleanups.pop()
+      try { fn() } catch { /* ignore */ }
+    }
+  }
+
+  function setupDnd() {
+    teardownDnd()
+    const root = document.querySelector('[data-kanban-root]')
+    if (!root) return
+
+    // Card draggables + per-card drop targets (for drop-between
+    // hitbox detection via Pragmatic DnD's closestEdge utility).
+    // Per-card drop targets give us a "drop above / below this card"
+    // signal; the column-level drop target is the fallback for
+    // empty-column drops.
+    for (const cardEl of root.querySelectorAll('[data-card-id]')) {
+      dndCleanups.push(draggable({
+        element: cardEl,
+        getInitialData: () => ({
+          kind: 'card',
+          cardId: Number(cardEl.getAttribute('data-card-id')),
+          fromColumnId: Number(cardEl.getAttribute('data-card-column-id')),
+        }),
+      }))
+      dndCleanups.push(dropTargetForElements({
+        element: cardEl,
+        canDrop: ({ source }) => source.data?.kind === 'card',
+        getData: ({ input, element }) => attachClosestEdge(
+          {
+            kind: 'card-drop',
+            overCardId: Number(cardEl.getAttribute('data-card-id')),
+            overColumnId: Number(cardEl.getAttribute('data-card-column-id')),
+          },
+          { input, element, allowedEdges: ['top', 'bottom'] },
+        ),
+      }))
+    }
+    for (const colEl of root.querySelectorAll('[data-column-id]')) {
+      dndCleanups.push(dropTargetForElements({
+        element: colEl,
+        canDrop: ({ source }) => source.data?.kind === 'card',
+        getData: () => ({
+          kind: 'column-drop',
+          columnId: Number(colEl.getAttribute('data-column-id')),
+        }),
+      }))
+    }
+
+    // Single monitor handles the actual move semantics — fires once
+    // per drop, reads source + nearest drop target (a card if the
+    // pointer is over one, the column otherwise), computes the new
+    // per-column order honouring drop position, hands it to the store.
+    dndCleanups.push(monitorForElements({
+      canMonitor: ({ source }) => source.data?.kind === 'card',
+      onDrop: ({ source, location }) => {
+        // The nearest drop target wins. If we landed over a card,
+        // its `closestEdge` (top/bottom) tells us whether the drop
+        // is before or after that card; if we landed over the
+        // column shell, it's an append-to-column drop.
+        const dropTargets = location.current.dropTargets ?? []
+        if (dropTargets.length === 0) return
+
+        const cardId = Number(source.data.cardId)
+        const fromColumnId = Number(source.data.fromColumnId)
+        if (!cardId || !fromColumnId) return
+
+        // Card-over-card target takes priority over the column-level
+        // target (Pragmatic DnD's `dropTargets` array is innermost-
+        // first, so a card target appears before its parent column).
+        const cardTarget = dropTargets.find(t => t.data?.kind === 'card-drop')
+        const columnTarget = dropTargets.find(t => t.data?.kind === 'column-drop')
+
+        let toColumnId
+        let dropBeforeCardId = null
+        if (cardTarget) {
+          toColumnId = Number(cardTarget.data.overColumnId)
+          const overCardId = Number(cardTarget.data.overCardId)
+          const edge = extractClosestEdge(cardTarget.data)
+          // edge === 'top' → insert before the overCard
+          // edge === 'bottom' → insert after = before the NEXT card
+          dropBeforeCardId = edge === 'top' ? overCardId : null
+          if (edge === 'bottom') {
+            // Find the next card in the column; null means "append".
+            const cols = columns()
+            const tcol = cols.find(c => c.id === toColumnId)
+            if (tcol) {
+              const idx = tcol.cards.findIndex(c => c.id === overCardId)
+              const next = idx >= 0 ? tcol.cards[idx + 1] : null
+              dropBeforeCardId = next ? next.id : null
+            }
+          }
+        }
+        else if (columnTarget) {
+          toColumnId = Number(columnTarget.data.columnId)
+          dropBeforeCardId = null // append
+        }
+        else {
+          return
+        }
+        if (!toColumnId) return
+
+        // No-op: dragging a card onto itself.
+        if (cardId === dropBeforeCardId) return
+
+        const cols = columns()
+        const fromCol = cols.find(c => c.id === fromColumnId)
+        const toCol = cols.find(c => c.id === toColumnId)
+        if (!fromCol || !toCol) return
+
+        // Build the new per-column orders.
+        const fromOrderRaw = fromCol.cards.map(c => c.id).filter(idd => idd !== cardId)
+
+        // Start the target column's order from the existing one,
+        // minus the moving card (in case of same-column rearrange),
+        // then insert at the computed position.
+        const toOrderRaw = toCol.cards.map(c => c.id).filter(idd => idd !== cardId)
+        let insertAt = toOrderRaw.length
+        if (dropBeforeCardId !== null) {
+          const idx = toOrderRaw.indexOf(dropBeforeCardId)
+          if (idx >= 0) insertAt = idx
+        }
+        const toOrder = [
+          ...toOrderRaw.slice(0, insertAt),
+          cardId,
+          ...toOrderRaw.slice(insertAt),
+        ]
+
+        const payload = fromColumnId === toColumnId
+          ? [{ columnId: toColumnId, order: toOrder }]
+          : [
+              { columnId: fromColumnId, order: fromOrderRaw },
+              { columnId: toColumnId, order: toOrder },
+            ]
+        kanban.reorderCards(payload)
+      },
+    }))
+  }
+
+  // Re-wire DnD whenever columns mutate (new card, deleted card,
+  // post-drop reorder, etc.). `effect` runs after every state change
+  // that touches `columns()`, with a microtask delay so the DOM has
+  // re-rendered first.
+  effect(() => {
+    columns()
+    Promise.resolve().then(setupDnd)
+  })
+
+  onUnmount(() => {
+    teardownDnd()
+  })
+</script>
+
+<div class="mx-auto px-6 py-6 max-w-full">
+  <div :if="!canView" class="mx-auto px-5 py-8 max-w-2xl text-center bg-zinc-50 dark:bg-zinc-900 border border-zinc-200 rounded-lg dark:border-zinc-800">
+    <p class="text-sm text-zinc-600 dark:text-zinc-400">Kanban boards require the dev role.</p>
+  </div>
+
+  <div :if="canView">
+    <a href="/kanban" class="inline-flex gap-1 items-center mb-4 no-underline text-xs text-zinc-500 hover:text-zinc-700 dark:hover:text-zinc-300" data-mpa="true">
+      <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6" /></svg>
+      All boards
+    </a>
+
+    <!-- Loading -->
+    <div :if="loading" class="flex items-center justify-center" style="min-height: 40vh">
+      <svg class="text-violet-500 animate-spin" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <path d="M21 12a9 9 0 1 1-6.219-8.56" />
+      </svg>
+    </div>
+
+    <!-- Error -->
+    <div :if="error && !loading" class="px-5 py-4 bg-red-50 dark:bg-red-950/30 border border-red-200 rounded-lg dark:border-red-900/40">
+      <p class="font-medium text-red-700 text-sm dark:text-red-300">Board operation failed</p>
+      <p class="mt-1 text-red-600 text-xs dark:text-red-400" :text="error"></p>
+    </div>
+
+    <!-- Loaded -->
+    <div :if="board && !loading">
+      <header class="flex items-start justify-between mb-6">
+        <div>
+          <h1 class="font-semibold text-2xl text-zinc-900 dark:text-zinc-100" :text="board.name"></h1>
+          <p :if="board.description" class="mt-1 text-sm text-zinc-500" :text="board.description"></p>
+          <p class="mt-2 text-xs text-zinc-400">
+            <span :text="columns.length + ' columns'"></span>
+            <span> · </span>
+            <span :text="totalCards() + ' cards'"></span>
+          </p>
+        </div>
+      </header>
+
+      <!-- The board itself. Horizontal scroll for wide boards;
+          each column is a vertical card stack. -->
+      <div data-kanban-root class="flex overflow-x-auto gap-3 pb-4" style="min-height: 60vh">
+        <div
+          :for="col in columns"
+          :data-column-id="col.id"
+          class="flex flex-col flex-shrink-0 w-72 bg-white dark:bg-zinc-950 border border-zinc-200 rounded-lg dark:border-zinc-800"
+          style="max-height: calc(100vh - 220px)"
+        >
+          <!-- Column header -->
+          <div :class="`px-3 py-2 border-b border-zinc-100 dark:border-zinc-900 ${columnAccentClass(col.color)}`">
+            <div class="flex gap-2 items-center justify-between">
+              <p class="font-medium text-sm text-zinc-700 truncate dark:text-zinc-200" :text="col.name"></p>
+              <div class="flex gap-1 items-center">
+                <span class="font-mono text-xs text-zinc-500" :text="col.cards.length"></span>
+                <button
+                  @click="deleteColumnClicked(col.id, col.cards.length > 0)"
+                  class="-m-1 p-1 text-zinc-400 hover:text-red-500"
+                  title="Delete column"
+                >
+                  <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                    <polyline points="3 6 5 6 21 6" />
+                    <path d="M19 6l-2 14a2 2 0 01-2 2H9a2 2 0 01-2-2L5 6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2" />
+                  </svg>
+                </button>
+              </div>
+            </div>
+          </div>
+
+          <!-- Cards (scrollable) -->
+          <div class="overflow-y-auto flex-1 p-2 space-y-1" style="min-height: 40px">
+            <div
+              :for="card in col.cards"
+              :data-card-id="card.id"
+              :data-card-column-id="col.id"
+              @click="openDetail(card.id)"
+              class="px-3 py-2 bg-zinc-50 dark:bg-zinc-900 border border-zinc-200 rounded dark:border-zinc-800 hover:border-violet-300 dark:hover:border-violet-700 transition-colors cursor-grab group"
+            >
+              <!-- Label chips strip -->
+              <div :if="card.labels && card.labels.length > 0" class="flex flex-wrap gap-1 mb-1">
+                <span
+                  :for="lbl in card.labels"
+                  :class="`px-1.5 py-0.5 text-[10px] font-medium rounded ${labelChipClass(lbl.color)}`"
+                  :text="lbl.name"
+                ></span>
+              </div>
+
+              <div class="flex gap-2 items-start justify-between">
+                <p class="flex-1 leading-snug text-xs text-zinc-800 dark:text-zinc-200" :text="card.title"></p>
+                <button
+                  @click.stop="deleteCardClicked(card.id)"
+                  class="text-zinc-400 hover:text-red-500 opacity-0 group-hover:opacity-100 transition-opacity"
+                  title="Delete card"
+                >
+                  <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                    <line x1="18" y1="6" x2="6" y2="18" />
+                    <line x1="6" y1="6" x2="18" y2="18" />
+                  </svg>
+                </button>
+              </div>
+
+              <!-- Footer: due date + assignee avatars -->
+              <div :if="card.dueDate || (card.assignees && card.assignees.length > 0)" class="flex gap-2 items-center justify-between mt-1.5 pt-1.5 border-t border-zinc-200/50 dark:border-zinc-800/50">
+                <div :if="card.dueDate" class="flex gap-1 items-center text-[10px] text-zinc-500">
+                  <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                    <rect x="3" y="4" width="18" height="18" rx="2" /><line x1="16" y1="2" x2="16" y2="6" /><line x1="8" y1="2" x2="8" y2="6" /><line x1="3" y1="10" x2="21" y2="10" />
+                  </svg>
+                  <span :text="formatDueDate(card.dueDate)"></span>
+                </div>
+                <div :if="!card.dueDate"></div>
+                <div :if="card.assignees && card.assignees.length > 0" class="flex -space-x-1">
+                  <span
+                    :for="asg in card.assignees"
+                    class="inline-flex items-center justify-center h-5 w-5 font-medium text-[9px] text-white bg-violet-500 ring-1 ring-white rounded-full dark:ring-zinc-950"
+                    :title="asg.name || asg.email || 'Assignee'"
+                    :text="initialsOf(asg.name, asg.email)"
+                  ></span>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Add card composer -->
+          <div class="p-2 border-t border-zinc-100 dark:border-zinc-900">
+            <div :if="isComposingFor(col.id)" class="space-y-2">
+              <textarea
+                :value="draftCardTitle()"
+                @input="(e) => draftCardTitle.set(e.target.value)"
+                @keydown.enter.prevent="submitCard(col.id)"
+                @keydown.escape="closeCardComposer()"
+                placeholder="Card title…"
+                rows="2"
+                class="px-2 py-1 w-full text-xs text-zinc-800 dark:text-zinc-100 bg-white dark:bg-zinc-900 border border-zinc-300 rounded dark:border-zinc-700 focus:border-violet-500 focus:outline-none resize-none"
+              ></textarea>
+              <div class="flex gap-1">
+                <button
+                  @click="submitCard(col.id)"
+                  class="px-2 py-1 text-white text-xs bg-violet-600 hover:bg-violet-700 rounded"
+                >
+                  Add
+                </button>
+                <button
+                  @click="closeCardComposer()"
+                  class="px-2 py-1 text-xs text-zinc-500 hover:text-zinc-700 dark:hover:text-zinc-300 rounded"
+                >
+                  Cancel
+                </button>
+              </div>
+            </div>
+            <button
+              :if="!isComposingFor(col.id)"
+              @click="openCardComposer(col.id)"
+              class="px-2 py-1 w-full text-left text-xs text-zinc-500 hover:text-zinc-700 dark:hover:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-900 rounded"
+            >
+              + Add card
+            </button>
+          </div>
+        </div>
+
+        <!-- Add column trailing slot -->
+        <div class="flex-shrink-0 w-72">
+          <div :if="composingNewColumn()" class="p-3 space-y-2 bg-white dark:bg-zinc-950 border border-zinc-300 rounded-lg dark:border-zinc-700">
+            <input
+              :value="draftColumnName()"
+              @input="(e) => draftColumnName.set(e.target.value)"
+              @keydown.enter="submitColumn()"
+              @keydown.escape="closeColumnComposer()"
+              placeholder="Column name…"
+              class="px-2 py-1 w-full text-sm text-zinc-800 dark:text-zinc-100 bg-white dark:bg-zinc-900 border border-zinc-300 rounded dark:border-zinc-700 focus:border-violet-500 focus:outline-none"
+              autofocus
+            />
+            <div class="flex gap-1">
+              <button
+                @click="submitColumn()"
+                class="px-2 py-1 text-white text-xs bg-violet-600 hover:bg-violet-700 rounded"
+              >
+                Add column
+              </button>
+              <button
+                @click="closeColumnComposer()"
+                class="px-2 py-1 text-xs text-zinc-500 hover:text-zinc-700 dark:hover:text-zinc-300 rounded"
+              >
+                Cancel
+              </button>
+            </div>
+          </div>
+          <button
+            :if="!composingNewColumn()"
+            @click="openColumnComposer()"
+            class="h-12 w-full text-sm text-zinc-500 hover:text-zinc-700 dark:hover:text-zinc-300 border border-dashed border-zinc-300 rounded-lg dark:border-zinc-700 hover:border-zinc-400 dark:hover:border-zinc-600"
+          >
+            + Add column
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- ───────────── Card detail modal (Phase 3) ───────────── -->
+  <!-- Opens on card click. Fixed positioned with a backdrop; closes
+      on backdrop click + Escape. Sections (top → bottom):
+        · Title (inline-editable, blurs to commit)
+        · Description (textarea, blurs to commit)
+        · Sidebar: labels picker, assignees picker, due date, archive
+        · Comments thread + composer
+      All mutations route through the store, which fires optimistic
+      updates with rollback on failure. -->
+  <div
+    :if="openCard()"
+    class="flex fixed inset-0 overflow-y-auto z-50 items-start justify-center px-4 py-8 bg-black/50"
+    @click="closeDetail()"
+    @keydown.escape.window="closeDetail()"
+  >
+    <div
+      @click.stop
+      class="my-8 max-w-3xl w-full bg-white dark:bg-zinc-900 border border-zinc-200 rounded-lg dark:border-zinc-800 shadow-xl"
+    >
+      <!-- Header: title + close -->
+      <div class="flex gap-3 items-start px-6 py-4 border-b border-zinc-200 dark:border-zinc-800">
+        <input
+          :value="titleDraft()"
+          @input="(e) => titleDraft.set(e.target.value)"
+          @blur="commitTitle()"
+          @keydown.enter.prevent="(e) => e.target.blur()"
+          class="flex-1 -mx-2 -my-1 px-2 py-1 font-semibold text-lg text-zinc-900 dark:text-zinc-100 bg-transparent focus:bg-zinc-50 dark:focus:bg-zinc-800 rounded focus:outline-none"
+        />
+        <button
+          @click="closeDetail()"
+          class="text-zinc-400 hover:text-zinc-600 dark:hover:text-zinc-300"
+          title="Close"
+        >
+          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" />
+          </svg>
+        </button>
+      </div>
+
+      <div :if="loadingCard() && (!openCard() || openCard().comments.length === 0)" class="px-6 py-8 text-center text-sm text-zinc-500">
+        Loading…
+      </div>
+
+      <div :if="errorCard()" class="px-6 py-3 bg-red-50 dark:bg-red-950/30 border-b border-red-200 dark:border-red-900/40">
+        <p class="text-red-700 text-xs dark:text-red-300" :text="errorCard()"></p>
+      </div>
+
+      <div class="grid gap-6 grid-cols-1 md:grid-cols-3 px-6 py-5">
+        <!-- Main column: description + comments -->
+        <div class="md:col-span-2 space-y-6">
+          <!-- Description -->
+          <section>
+            <h4 class="mb-2 font-medium text-xs text-zinc-500 tracking-wide uppercase">Description</h4>
+            <textarea
+              :value="descDraft()"
+              @input="(e) => descDraft.set(e.target.value)"
+              @blur="commitDescription()"
+              rows="4"
+              placeholder="Add a more detailed description…"
+              class="px-3 py-2 w-full text-sm text-zinc-800 dark:text-zinc-200 bg-white dark:bg-zinc-950 border border-zinc-200 rounded dark:border-zinc-800 focus:border-violet-400 focus:outline-none dark:focus:border-violet-600 resize-y"
+            ></textarea>
+          </section>
+
+          <!-- Comments -->
+          <section>
+            <h4 class="mb-2 font-medium text-xs text-zinc-500 tracking-wide uppercase">Activity</h4>
+
+            <!-- Composer -->
+            <div class="mb-4">
+              <textarea
+                :value="commentDraft()"
+                @input="(e) => commentDraft.set(e.target.value)"
+                @keydown.metaCmd.enter.prevent="submitComment()"
+                rows="2"
+                placeholder="Add a comment… (⌘+Enter to send)"
+                class="px-3 py-2 w-full text-sm text-zinc-800 dark:text-zinc-200 bg-white dark:bg-zinc-950 border border-zinc-200 rounded dark:border-zinc-800 focus:border-violet-400 focus:outline-none dark:focus:border-violet-600 resize-none"
+              ></textarea>
+              <div class="flex justify-end mt-2">
+                <button
+                  @click="submitComment()"
+                  :disabled="!commentDraft().trim()"
+                  class="px-3 py-1 text-white text-xs bg-violet-600 hover:bg-violet-700 rounded disabled:opacity-40 disabled:cursor-not-allowed"
+                >
+                  Comment
+                </button>
+              </div>
+            </div>
+
+            <!-- Thread -->
+            <div :if="openCard().comments.length === 0 && !loadingCard()" class="italic text-xs text-zinc-400">
+              No comments yet.
+            </div>
+            <ul class="space-y-3">
+              <li
+                :for="cm in openCard.comments"
+                class="flex gap-3"
+              >
+                <span class="inline-flex flex-shrink-0 items-center justify-center h-7 w-7 font-medium text-[10px] text-white bg-violet-500 rounded-full" :text="initialsOf(cm.authorName, cm.authorEmail)"></span>
+                <div class="flex-1 min-w-0">
+                  <div class="flex gap-2 items-baseline">
+                    <span class="font-medium text-xs text-zinc-700 dark:text-zinc-200" :text="cm.authorName || cm.authorEmail || 'Unknown'"></span>
+                    <span class="text-[10px] text-zinc-400" :text="formatTimestamp(cm.createdAt)"></span>
+                    <button
+                      @click="deleteCommentClicked(cm.id)"
+                      class="ml-auto text-[10px] text-zinc-400 hover:text-red-500"
+                    >Delete</button>
+                  </div>
+                  <p class="mt-0.5 text-xs text-zinc-700 whitespace-pre-wrap dark:text-zinc-300" :text="cm.body"></p>
+                </div>
+              </li>
+            </ul>
+          </section>
+        </div>
+
+        <!-- Sidebar: labels, assignees, due date, archive -->
+        <aside class="space-y-5">
+          <!-- Labels -->
+          <section>
+            <div class="flex items-center justify-between mb-2">
+              <h4 class="font-medium text-xs text-zinc-500 tracking-wide uppercase">Labels</h4>
+              <button
+                @click="showLabelPicker.set(!showLabelPicker())"
+                class="text-violet-600 text-xs dark:text-violet-400 hover:underline"
+              >
+                <span :if="!showLabelPicker()">Edit</span>
+                <span :if="showLabelPicker()">Done</span>
+              </button>
+            </div>
+
+            <!-- Selected labels -->
+            <div :if="!showLabelPicker()" class="flex flex-wrap gap-1">
+              <span
+                :for="lbl in openCard.labels"
+                :class="`px-2 py-0.5 text-xs font-medium rounded ${labelChipClass(lbl.color)}`"
+                :text="lbl.name"
+              ></span>
+              <span :if="openCard().labels.length === 0" class="italic text-xs text-zinc-400">None</span>
+            </div>
+
+            <!-- Picker -->
+            <div :if="showLabelPicker()" class="space-y-2">
+              <button
+                :for="lbl in allLabels"
+                @click="toggleLabel(lbl.id)"
+                :class="`w-full flex items-center justify-between px-2 py-1 rounded text-xs ${labelChipClass(lbl.color)} hover:opacity-90`"
+              >
+                <span :text="lbl.name"></span>
+                <span class="flex gap-1 items-center">
+                  <svg :if="openCard().labels.some(l => l.id === lbl.id)" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
+                    <polyline points="20 6 9 17 4 12" />
+                  </svg>
+                  <span
+                    @click.stop="deleteLabelClicked(lbl.id)"
+                    class="text-zinc-500 hover:text-red-500"
+                    title="Delete label"
+                  >
+                    ✕
+                  </span>
+                </span>
+              </button>
+
+              <!-- New label composer -->
+              <div :if="showNewLabelComposer()" class="pt-2 space-y-2 border-t border-zinc-200 dark:border-zinc-800">
+                <input
+                  :value="newLabelName()"
+                  @input="(e) => newLabelName.set(e.target.value)"
+                  @keydown.enter.prevent="submitNewLabel()"
+                  placeholder="Label name"
+                  class="px-2 py-1 w-full text-xs bg-white dark:bg-zinc-950 border border-zinc-300 rounded dark:border-zinc-700 focus:border-violet-500 focus:outline-none"
+                />
+                <div class="flex gap-1 items-center">
+                  <button
+                    :for="c in labelColors"
+                    @click="newLabelColor.set(c)"
+                    :class="`w-5 h-5 rounded ${labelChipClass(c)} ${newLabelColor() === c ? 'ring-2 ring-offset-1 ring-violet-500 dark:ring-offset-zinc-900' : ''}`"
+                    :title="c"
+                  ></button>
+                </div>
+                <div class="flex gap-1">
+                  <button @click="submitNewLabel()" class="px-2 py-0.5 text-white text-xs bg-violet-600 hover:bg-violet-700 rounded">Create</button>
+                  <button @click="showNewLabelComposer.set(false)" class="px-2 py-0.5 text-xs text-zinc-500 hover:text-zinc-700">Cancel</button>
+                </div>
+              </div>
+              <button
+                :if="!showNewLabelComposer()"
+                @click="showNewLabelComposer.set(true)"
+                class="px-2 py-1 w-full text-xs text-zinc-500 hover:text-zinc-700 dark:hover:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-800 border border-dashed border-zinc-300 rounded dark:border-zinc-700"
+              >
+                + New label
+              </button>
+            </div>
+          </section>
+
+          <!-- Assignees -->
+          <section>
+            <div class="flex items-center justify-between mb-2">
+              <h4 class="font-medium text-xs text-zinc-500 tracking-wide uppercase">Assignees</h4>
+              <button
+                @click="showAssigneePicker.set(!showAssigneePicker())"
+                class="text-violet-600 text-xs dark:text-violet-400 hover:underline"
+              >
+                <span :if="!showAssigneePicker()">Edit</span>
+                <span :if="showAssigneePicker()">Done</span>
+              </button>
+            </div>
+
+            <div :if="!showAssigneePicker()" class="flex flex-wrap gap-2">
+              <div
+                :for="asg in openCard.assignees"
+                class="flex gap-1.5 items-center text-xs text-zinc-700 dark:text-zinc-200"
+              >
+                <span class="inline-flex items-center justify-center h-6 w-6 font-medium text-[10px] text-white bg-violet-500 rounded-full" :text="initialsOf(asg.name, asg.email)"></span>
+                <span :text="asg.name || asg.email || 'Unknown'"></span>
+              </div>
+              <span :if="openCard().assignees.length === 0" class="italic text-xs text-zinc-400">Unassigned</span>
+            </div>
+
+            <div :if="showAssigneePicker()" class="overflow-y-auto space-y-1 max-h-48">
+              <p :if="kanban.users().length === 0" class="italic text-xs text-zinc-400">No users to assign.</p>
+              <button
+                :for="u in kanban.users"
+                @click="toggleAssignee(u.id)"
+                class="flex gap-2 items-center px-2 py-1.5 w-full text-left text-xs hover:bg-zinc-100 dark:hover:bg-zinc-800 rounded"
+              >
+                <span class="inline-flex flex-shrink-0 items-center justify-center h-6 w-6 font-medium text-[10px] text-white bg-violet-500 rounded-full" :text="initialsOf(u.name, u.email)"></span>
+                <span class="flex-1 text-zinc-700 truncate dark:text-zinc-200" :text="u.name || u.email"></span>
+                <svg :if="openCard().assignees.some(a => a.userId === u.id)" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="text-violet-500">
+                  <polyline points="20 6 9 17 4 12" />
+                </svg>
+              </button>
+            </div>
+          </section>
+
+          <!-- Due date -->
+          <section>
+            <h4 class="mb-2 font-medium text-xs text-zinc-500 tracking-wide uppercase">Due date</h4>
+            <input
+              type="date"
+              :value="openCard().dueDate ? openCard().dueDate.slice(0, 10) : ''"
+              @change="(e) => commitDueDate(e.target.value)"
+              class="px-2 py-1 w-full text-xs text-zinc-800 dark:text-zinc-200 bg-white dark:bg-zinc-950 border border-zinc-200 rounded dark:border-zinc-800 focus:border-violet-400 focus:outline-none"
+            />
+          </section>
+
+          <!-- Meta -->
+          <section class="pt-3 border-t border-zinc-200 dark:border-zinc-800">
+            <p class="text-[10px] text-zinc-400">
+              Created <span :text="formatTimestamp(openCard().createdAt)"></span>
+            </p>
+            <p :if="openCard().updatedAt && openCard().updatedAt !== openCard().createdAt" class="text-[10px] text-zinc-400">
+              Updated <span :text="formatTimestamp(openCard().updatedAt)"></span>
+            </p>
+          </section>
+        </aside>
+      </div>
+    </div>
+  </div>
+</div>
+@endsection