@stacksjs/defaults 0.70.229 → 0.70.231

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

@@ -1,899 +1,7 @@
 @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'
+@title('Dashboard - Kanban Board')
 
-  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>
+<KanbanBoardDashboard />
 @endsection