@stacksjs/defaults 0.70.207 → 0.70.208

package/views/dashboard/kanban/index.stx

@@ -0,0 +1,260 @@
+@extends('layouts/default')
+
+@section('content')
+<script client>
+  // Kanban — Boards index (stacksjs/stacks#1846, Phase 1).
+  //
+  // Lists every non-archived board with a card-count badge. Clicking a
+  // board navigates to `/kanban/[id]` — Phase 2 ships the actual
+  // drag-and-drop board view at that URL.
+  //
+  // Follows #1838 conventions: no <script server>, no vanilla DOM
+  // reads, all state via the store. Role gate via useRole() — the
+  // surface is dev-mode-only (admins + devs see it, clients don't).
+  import { useStore } from '@stacksjs/stx'
+  import { useRole } from '../composables/useRole'
+
+  const kanban = useStore('kanban')
+  const { isDev } = useRole()
+  const canView = derived(() => isDev())
+
+  const loading = derived(() => kanban.loading())
+  const error = derived(() => kanban.error())
+  const boards = derived(() => kanban.boards())
+  const hasBoards = derived(() => kanban.hasBoards())
+
+  // ─── New-board modal (Phase 2) ────────────────────────────────────
+  //
+  // Inline modal so the page stays single-file. Phase 3 may extract
+  // this into a reusable component if/when a third caller appears
+  // (board rename, column rename, label edit — same shape).
+  const isCreating = state(false)
+  const draftName = state('')
+  const draftDescription = state('')
+  const draftColor = state('violet')
+  const submitting = state(false)
+  const submitError = state('')
+
+  const colorChoices = ['violet', 'blue', 'emerald', 'amber', 'rose', 'slate']
+
+  function openCreate() {
+    isCreating.set(true)
+    draftName.set('')
+    draftDescription.set('')
+    draftColor.set('violet')
+    submitError.set('')
+  }
+  function closeCreate() {
+    isCreating.set(false)
+    submitError.set('')
+  }
+  async function submitCreate() {
+    const name = draftName().trim()
+    if (!name) {
+      submitError.set('Name is required.')
+      return
+    }
+    submitting.set(true)
+    submitError.set('')
+    const result = await kanban.createBoard({
+      name,
+      description: draftDescription().trim() || undefined,
+      color: draftColor(),
+    })
+    submitting.set(false)
+    if (result)
+      closeCreate()
+    else
+      submitError.set(kanban.error() || 'Failed to create board.')
+  }
+
+  function colorSwatchClass(c) {
+    return ({
+      violet: 'bg-violet-500',
+      blue: 'bg-blue-500',
+      emerald: 'bg-emerald-500',
+      amber: 'bg-amber-500',
+      rose: 'bg-rose-500',
+      slate: 'bg-slate-500',
+    })[c] || 'bg-violet-500'
+  }
+
+  function colorButtonClass(c) {
+    const base = `w-6 h-6 rounded-full ${colorSwatchClass(c)} cursor-pointer transition-all `
+    return draftColor() === c
+      ? base + 'ring-2 ring-offset-2 ring-violet-500 dark:ring-offset-zinc-950'
+      : base + 'opacity-60 hover:opacity-100'
+  }
+
+  // Color → tailwind class. Free-form string in the model, mapped here
+  // so the UI stays stable when a new hue is added without an explicit
+  // mapping (falls back to violet).
+  function accentClass(color) {
+    return ({
+      violet: 'bg-violet-500',
+      blue: 'bg-blue-500',
+      emerald: 'bg-emerald-500',
+      amber: 'bg-amber-500',
+      rose: 'bg-rose-500',
+      slate: 'bg-slate-500',
+    })[color] || 'bg-violet-500'
+  }
+
+  function cardCountText(n) {
+    if (n === 0) return 'No cards'
+    if (n === 1) return '1 card'
+    return n + ' cards'
+  }
+
+  kanban.loadBoards()
+</script>
+
+<div class="mx-auto px-6 py-8 max-w-7xl">
+  <!-- Role gate. The full RBAC check via useRole(); unauthenticated
+      dev-dashboard viewers see the surface as if they were a dev per
+      the permissive default. -->
+  <div :if="!canView" class="px-5 py-8 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">
+    <header class="flex items-center justify-between mb-6">
+      <div>
+        <h1 class="font-semibold text-2xl text-zinc-900 dark:text-zinc-100">Boards</h1>
+        <p class="mt-1 text-sm text-zinc-500">Internal project-management boards. Drag-and-drop kanban view lands in Phase 2.</p>
+      </div>
+      <button
+        @click="openCreate()"
+        class="px-3 py-1.5 text-sm text-white bg-violet-600 hover:bg-violet-700 rounded-md"
+      >
+        New board
+      </button>
+    </header>
+
+    <!-- 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">Couldn't load boards</p>
+      <p class="mt-1 text-red-600 text-xs dark:text-red-400" :text="error"></p>
+      <p class="mt-2 text-xs text-zinc-500">Most common: migrations haven't run yet. Try <code>./buddy migrate</code>.</p>
+    </div>
+
+    <!-- Empty state — DB reachable but no boards yet -->
+    <div :if="!loading && !error && !hasBoards" class="px-6 py-12 text-center border border-dashed border-zinc-300 rounded-lg dark:border-zinc-700">
+      <svg class="mb-3 mx-auto text-zinc-400" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+        <rect x="3" y="4" width="6" height="16" rx="1" />
+        <rect x="11" y="4" width="6" height="10" rx="1" />
+        <rect x="19" y="4" width="2" height="6" rx="1" />
+      </svg>
+      <p class="font-medium text-sm text-zinc-700 dark:text-zinc-300">No boards yet</p>
+      <p class="mt-1 text-xs text-zinc-500">Click "New board" to create one.</p>
+    </div>
+
+    <!-- Boards grid -->
+    <div :if="!loading && !error && hasBoards" class="grid gap-4" style="grid-template-columns: repeat(auto-fill, minmax(280px, 1fr))">
+      <a
+        :for="board in boards"
+        :href="`/kanban/${board.id}`"
+        class="block overflow-hidden no-underline bg-white dark:bg-zinc-900 border border-zinc-200 rounded-lg dark:border-zinc-800 hover:border-zinc-300 dark:hover:border-zinc-700 transition-colors group"
+        data-mpa="true"
+      >
+        <div :class="`h-2 ${accentClass(board.color)}`"></div>
+        <div class="px-4 py-3">
+          <div class="flex gap-2 items-start">
+            <h2 class="flex-1 font-medium text-sm text-zinc-900 truncate dark:text-zinc-100 group-hover:text-violet-600 dark:group-hover:text-violet-400" :text="board.name"></h2>
+          </div>
+          <p
+            :if="board.description"
+            class="mt-1 line-clamp-2 text-xs text-zinc-500"
+            :text="board.description"
+          ></p>
+          <p class="mt-3 text-xs text-zinc-400" :text="cardCountText(board.cardCount)"></p>
+        </div>
+      </a>
+    </div>
+  </div>
+
+  <!-- Create-board modal. Fixed positioned with a backdrop; closes on
+      backdrop click + Escape key. Optimistic insert: kanban.createBoard
+      updates the boards list immediately on success and rolls back on
+      failure (with the error surfaced inline below the form). -->
+  <div
+    :if="isCreating()"
+    class="flex fixed inset-0 z-50 items-center justify-center px-4 bg-black/50"
+    @click="closeCreate()"
+    @keydown.escape.window="closeCreate()"
+  >
+    <div
+      @click.stop
+      class="max-w-md w-full bg-white dark:bg-zinc-900 border border-zinc-200 rounded-lg dark:border-zinc-800 shadow-xl"
+    >
+      <div class="px-5 py-4 border-b border-zinc-200 dark:border-zinc-800">
+        <h3 class="font-semibold text-base text-zinc-900 dark:text-zinc-100">New board</h3>
+      </div>
+      <div class="px-5 py-4 space-y-4">
+        <div>
+          <label class="block mb-1 font-medium text-xs text-zinc-700 dark:text-zinc-300">Name</label>
+          <input
+            :value="draftName()"
+            @input="(e) => draftName.set(e.target.value)"
+            @keydown.enter="submitCreate()"
+            placeholder="e.g. Q3 Roadmap"
+            class="px-3 py-2 w-full text-sm text-zinc-900 dark:text-zinc-100 bg-white dark:bg-zinc-950 border border-zinc-300 rounded dark:border-zinc-700 focus:border-violet-500 focus:outline-none"
+            autofocus
+          />
+        </div>
+
+        <div>
+          <label class="block mb-1 font-medium text-xs text-zinc-700 dark:text-zinc-300">Description <span class="text-zinc-400">(optional)</span></label>
+          <textarea
+            :value="draftDescription()"
+            @input="(e) => draftDescription.set(e.target.value)"
+            rows="3"
+            placeholder="A short description of what this board tracks."
+            class="px-3 py-2 w-full text-sm text-zinc-900 dark:text-zinc-100 bg-white dark:bg-zinc-950 border border-zinc-300 rounded dark:border-zinc-700 focus:border-violet-500 focus:outline-none resize-none"
+          ></textarea>
+        </div>
+
+        <div>
+          <label class="block mb-2 font-medium text-xs text-zinc-700 dark:text-zinc-300">Accent color</label>
+          <div class="flex gap-2 items-center">
+            <button
+              :for="c in colorChoices"
+              @click="draftColor.set(c)"
+              :class="colorButtonClass(c)"
+              :title="c"
+              type="button"
+            ></button>
+          </div>
+        </div>
+
+        <p :if="submitError()" class="text-red-600 text-xs dark:text-red-400" :text="submitError()"></p>
+      </div>
+
+      <div class="flex gap-2 justify-end px-5 py-3 border-t border-zinc-200 dark:border-zinc-800">
+        <button
+          @click="closeCreate()"
+          class="px-3 py-1.5 text-sm text-zinc-600 dark:text-zinc-400 hover:text-zinc-800 dark:hover:text-zinc-200 rounded-md"
+          :disabled="submitting()"
+        >
+          Cancel
+        </button>
+        <button
+          @click="submitCreate()"
+          class="px-3 py-1.5 text-sm text-white bg-violet-600 hover:bg-violet-700 rounded-md"
+          :disabled="submitting()"
+        >
+          <span :if="!submitting()">Create</span>
+          <span :if="submitting()">Creating…</span>
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
+@endsection