Add per-project card statuses and a kanban board

Statuses
- Migration 006: card_statuses table (project-scoped) and cards.status_id, a
  nullable FK with ON DELETE SET NULL. Every new project is seeded with
  "To do" / "Doing" / "Done"; GET /api/projects/{id}/statuses lists them.
- New cards have no status -- they sit in an "inbox" until moved.

Project view
- Full-width and tabbed: "All tasks" (a flat list, sorted by name
  case-insensitively) and "Kanban" (Inbox plus one column per status).
- Drag a card within or between columns to reorder / restatus; the Inbox
  column has its own name + Add form.

Ordering
- Migration 007: `position` is now a dense 0..n-1 rank within a
  (project_id, status_id) column, not a project-wide order. New composite
  index idx_cards_project_status_position; existing rows re-ranked.
- PUT /api/projects/{id}/cards/order takes { status_id, card_ids } and sets one
  column's contents and order, re-parenting moved-in cards and re-packing their
  source column in a single transaction. PATCH status_id appends the card to the
  end of the destination column.

58 phpunit tests pass; the frontend type-checks and builds.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

web/src/views/ProjectView.vue

@@ -3,10 +3,11 @@ import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import draggable from 'vuedraggable'
 import CardRow from '../components/CardRow.vue'
+import KanbanCard from '../components/KanbanCard.vue'
 import { ApiError, apiRequest } from '../lib/api'
 import { useCardsStore } from '../stores/cards'
 import { useProjectsStore } from '../stores/projects'
-import type { Card, Project } from '../types'
+import type { Card, CardStatus, Project } from '../types'
 
 const route = useRoute()
 const router = useRouter()
@@ -15,9 +16,16 @@ const projects = useProjectsStore()
 
 const projectId = Number(route.params.id)
 const project = ref<Project | null>(null)
+const statuses = ref<CardStatus[]>([])
 const loadError = ref<string | null>(null)
 const actionError = ref<string | null>(null)
 
+const tabs = [
+  { key: 'all', label: 'All tasks' },
+  { key: 'kanban', label: 'Kanban' },
+] as const
+const activeTab = ref<(typeof tabs)[number]['key']>('all')
+
 const titleDraft = ref('')
 const descriptionDraft = ref('')
 
@@ -30,12 +38,63 @@ const cancelButton = ref<HTMLButtonElement>()
 const newText = ref('')
 const submitting = ref(false)
 
+const newInboxText = ref('')
+const addingToInbox = ref(false)
+
 const summary = computed(() => {
   const total = cards.cards.length
   if (total === 0) return 'No cards yet.'
-  return `${cards.completedCount()} of ${total} done.`
+  return `${total} card${total === 1 ? '' : 's'}.`
 })
 
+// The "all tasks" list has no manual order — sort by name, case-insensitively.
+const sortedCards = computed(() =>
+  [...cards.cards].sort((a, b) => a.text.localeCompare(b.text, undefined, { sensitivity: 'base' })),
+)
+
+// --- Kanban board --------------------------------------------------------
+interface Column {
+  key: string
+  title: string
+  statusId: number | null
+  cards: Card[]
+}
+type ColumnChange = {
+  added?: { element: Card; newIndex: number }
+  removed?: { element: Card; oldIndex: number }
+  moved?: { element: Card; oldIndex: number; newIndex: number }
+}
+
+const board = ref<Column[]>([])
+
+function buildColumns(): Column[] {
+  const defs: Omit<Column, 'cards'>[] = [
+    { key: 'inbox', title: 'Inbox', statusId: null },
+    ...statuses.value.map((s) => ({ key: `status-${s.id}`, title: s.name, statusId: s.id })),
+  ]
+  return defs.map((def) => ({
+    ...def,
+    cards: cards.cards.filter((card) => card.status_id === def.statusId),
+  }))
+}
+
+function rebuildBoard() {
+  board.value = buildColumns()
+}
+
+// Re-derive the columns whenever the underlying cards or the status set change
+// (e.g. after a move is persisted, or a failed move is rolled back).
+watch([() => cards.cards, statuses], rebuildBoard, { deep: true })
+
+function onColumnChange(change: ColumnChange, column: Column) {
+  // `added` (card dragged in from another column) or `moved` (reordered within
+  // this one): persist this column's new id order. The source column, if any,
+  // is re-packed server-side. `removed` needs no action here.
+  if (change.added || change.moved) {
+    void run(cards.reorderColumn(column.statusId, column.cards.map((c) => c.id)))
+  }
+}
+
 watch(project, (value) => {
   if (value) {
     titleDraft.value = value.title
@@ -65,11 +124,14 @@ function onKeydown(event: KeyboardEvent) {
 async function load() {
   loadError.value = null
   try {
-    const [{ project: fetched }] = await Promise.all([
+    const [{ project: fetched }, { statuses: fetchedStatuses }] = await Promise.all([
       apiRequest<{ project: Project }>(`/projects/${projectId}`, { auth: true }),
+      apiRequest<{ statuses: CardStatus[] }>(`/projects/${projectId}/statuses`, { auth: true }),
       cards.load(projectId),
     ])
     project.value = fetched
+    statuses.value = fetchedStatuses
+    rebuildBoard()
   } catch (e) {
     if (e instanceof ApiError && e.status === 404) {
       loadError.value = 'That project does not exist.'
@@ -144,11 +206,6 @@ async function run(op: Promise<unknown>) {
   }
 }
 
-function onReorder(event: { oldIndex?: number; newIndex?: number }) {
-  if (event.oldIndex === event.newIndex) return
-  void run(cards.persistOrder())
-}
-
 async function onCreate() {
   submitting.value = true
   actionError.value = null
@@ -161,101 +218,170 @@ async function onCreate() {
     submitting.value = false
   }
 }
+
+// New cards always land in the inbox (no status), so this just adds one.
+async function onCreateInbox() {
+  if (!newInboxText.value.trim()) return
+  addingToInbox.value = true
+  actionError.value = null
+  try {
+    await cards.add(newInboxText.value)
+    newInboxText.value = ''
+  } catch (e) {
+    actionError.value = e instanceof ApiError ? e.message : 'Could not add the card.'
+  } finally {
+    addingToInbox.value = false
+  }
+}
 </script>
 
 <template>
-  <section class="card">
+  <section class="card project">
     <p><RouterLink to="/">&larr; All projects</RouterLink></p>
 
     <p v-if="loadError" class="form-error">{{ loadError }}</p>
 
     <template v-else-if="project">
-      <div class="project-head">
-        <h1 class="project-head__title">
-          <input
-            v-model="titleDraft"
-            type="text"
-            maxlength="255"
-            aria-label="Project title"
-            @blur="saveTitle"
-            @keyup.enter="($event.target as HTMLInputElement).blur()"
-          />
-        </h1>
+      <div class="project__chrome">
+        <div class="project-head">
+          <h1 class="project-head__title">
+            <input
+              v-model="titleDraft"
+              type="text"
+              maxlength="255"
+              aria-label="Project title"
+              @blur="saveTitle"
+              @keyup.enter="($event.target as HTMLInputElement).blur()"
+            />
+          </h1>
 
-        <div class="menu">
-          <button
-            type="button"
-            class="menu__toggle"
-            aria-haspopup="true"
-            :aria-expanded="menuOpen"
-            @click="menuOpen = !menuOpen"
-          >
-            Manage &#9662;
-          </button>
+          <div class="menu">
+            <button
+              type="button"
+              class="menu__toggle"
+              aria-haspopup="true"
+              :aria-expanded="menuOpen"
+              @click="menuOpen = !menuOpen"
+            >
+              Manage &#9662;
+            </button>
 
-          <template v-if="menuOpen">
-            <div class="menu__backdrop" @click="menuOpen = false" />
-            <ul class="menu__list" role="menu">
-              <li role="none">
-                <button
-                  type="button"
-                  role="menuitem"
-                  class="menu__item menu__item--danger"
-                  @click="askDelete"
-                >
-                  Delete project
-                </button>
-              </li>
-            </ul>
-          </template>
+            <template v-if="menuOpen">
+              <div class="menu__backdrop" @click="menuOpen = false" />
+              <ul class="menu__list" role="menu">
+                <li role="none">
+                  <button
+                    type="button"
+                    role="menuitem"
+                    class="menu__item menu__item--danger"
+                    @click="askDelete"
+                  >
+                    Delete project
+                  </button>
+                </li>
+              </ul>
+            </template>
+          </div>
         </div>
+
+        <textarea
+          v-model="descriptionDraft"
+          class="project-head__desc"
+          rows="2"
+          maxlength="2000"
+          placeholder="Add a description"
+          aria-label="Project description"
+          @blur="saveDescription"
+        />
       </div>
 
-      <textarea
-        v-model="descriptionDraft"
-        class="project-head__desc"
-        rows="2"
-        maxlength="2000"
-        placeholder="Add a description"
-        aria-label="Project description"
-        @blur="saveDescription"
-      />
-
-      <p class="muted">{{ summary }}</p>
       <p v-if="actionError" class="form-error">{{ actionError }}</p>
 
-      <p v-if="cards.loading && !cards.loaded" class="muted">Loading…</p>
-
-      <draggable
-        v-else-if="cards.cards.length"
-        :list="cards.cards"
-        item-key="id"
-        tag="ul"
-        class="cards"
-        handle=".card-row__handle"
-        ghost-class="card-row--ghost"
-        :animation="150"
-        @end="onReorder"
-      >
-        <template #item="{ element }: { element: Card }">
-          <CardRow
-            :card="element"
-            @toggle="(v) => run(cards.setComplete(element, v))"
-            @save-text="(v) => run(cards.setText(element, v))"
-            @delete="run(cards.remove(element))"
-          />
-        </template>
-      </draggable>
-
-      <form class="form form--new-card" @submit.prevent="onCreate">
-        <label>
-          <span>New card</span>
-          <input v-model="newText" type="text" maxlength="1000" required />
-        </label>
-        <button type="submit" :disabled="submitting">
-          {{ submitting ? 'Adding…' : 'Add card' }}
+      <div class="tabs" role="tablist">
+        <button
+          v-for="tab in tabs"
+          :key="tab.key"
+          type="button"
+          role="tab"
+          :aria-selected="activeTab === tab.key"
+          class="tabs__tab"
+          :class="{ 'tabs__tab--active': activeTab === tab.key }"
+          @click="activeTab = tab.key"
+        >
+          {{ tab.label }}
         </button>
-      </form>
+      </div>
+
+      <!-- Tab: All tasks -->
+      <div v-show="activeTab === 'all'" class="tabs__panel tabs__panel--narrow" role="tabpanel">
+        <p class="muted">{{ summary }}</p>
+
+        <p v-if="cards.loading && !cards.loaded" class="muted">Loading…</p>
+
+        <ul v-else-if="sortedCards.length" class="cards">
+          <CardRow
+            v-for="card in sortedCards"
+            :key="card.id"
+            :card="card"
+            @save-text="(v) => run(cards.setText(card, v))"
+            @delete="run(cards.remove(card))"
+          />
+        </ul>
+
+        <form class="form form--new-card" @submit.prevent="onCreate">
+          <label>
+            <span>New card</span>
+            <input v-model="newText" type="text" maxlength="1000" required />
+          </label>
+          <button type="submit" :disabled="submitting">
+            {{ submitting ? 'Adding…' : 'Add card' }}
+          </button>
+        </form>
+      </div>
+
+      <!-- Tab: Kanban -->
+      <div v-show="activeTab === 'kanban'" class="tabs__panel" role="tabpanel">
+        <p v-if="cards.loading && !cards.loaded" class="muted">Loading…</p>
+
+        <div v-else class="kanban">
+          <section v-for="column in board" :key="column.key" class="kanban__col">
+            <header class="kanban__head">
+              <span class="kanban__title">{{ column.title }}</span>
+              <span class="kanban__count">{{ column.cards.length }}</span>
+            </header>
+
+            <draggable
+              :list="column.cards"
+              :group="{ name: 'kanban' }"
+              item-key="id"
+              class="kanban__cards"
+              ghost-class="kanban-card--ghost"
+              :animation="150"
+              @change="(e: ColumnChange) => onColumnChange(e, column)"
+            >
+              <template #item="{ element }: { element: Card }">
+                <KanbanCard :card="element" />
+              </template>
+            </draggable>
+
+            <form
+              v-if="column.statusId === null"
+              class="kanban__new"
+              @submit.prevent="onCreateInbox"
+            >
+              <input
+                v-model="newInboxText"
+                type="text"
+                maxlength="1000"
+                required
+                placeholder="New card"
+                aria-label="New card"
+              />
+              <button type="submit" :disabled="addingToInbox">Add</button>
+            </form>
+          </section>
+        </div>
+      </div>
     </template>
   </section>