Rename lists -> projects and items -> cards throughout

Project scope shifts from a todo list to a project-management app. This is a
straight terminology rename across code, comments, migrations, tests, and
docs — no behaviour change.

- DB: table todo_lists -> projects, todo_items -> cards, column
  todo_items.list_id -> cards.project_id, indexes renamed. Migrations 003/004
  rewritten in place (destructive; recreate the volume with `down -v`).
- API: /api/lists -> /api/projects, nested /items -> /cards, reorder body
  item_ids -> card_ids, JSON keys list/lists/item/items -> project/projects/
  card/cards, item_count -> card_count, list_id -> project_id, and the
  matching error messages.
- PHP: TodoList/TodoItem Repository + Controller -> Project/Card; shared SQL
  aliases l/i -> p/c.
- Frontend: stores lists.ts/items.ts -> projects.ts/cards.ts (useProjectsStore
  / useCardsStore, MAX_PROJECTS), ListView -> ProjectView, TodoItemRow ->
  CardRow, route /lists/:id -> /projects/:id (name "project"), types TodoList/
  TodoItem -> Project/Card, and all UI copy. CSS .lists*/.list-head* ->
  .projects*/.project-head*, .item* -> .card-row* (kept the generic .card
  panel class), .items -> .cards.
- Product name in the header, PWA manifest, index.html title and package
  descriptions -> "Project Manager" / "Projects".

Backend suite: 37 passing.

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

web/src/views/ProjectView.vue

@@ -0,0 +1,293 @@
+<script setup lang="ts">
+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 { ApiError, apiRequest } from '../lib/api'
+import { useCardsStore } from '../stores/cards'
+import { useProjectsStore } from '../stores/projects'
+import type { Card, Project } from '../types'
+
+const route = useRoute()
+const router = useRouter()
+const cards = useCardsStore()
+const projects = useProjectsStore()
+
+const projectId = Number(route.params.id)
+const project = ref<Project | null>(null)
+const loadError = ref<string | null>(null)
+const actionError = ref<string | null>(null)
+
+const titleDraft = ref('')
+const descriptionDraft = ref('')
+
+const menuOpen = ref(false)
+const confirmingDelete = ref(false)
+const deleting = ref(false)
+const deleteError = ref<string | null>(null)
+const cancelButton = ref<HTMLButtonElement>()
+
+const newText = ref('')
+const submitting = ref(false)
+
+const summary = computed(() => {
+  const total = cards.cards.length
+  if (total === 0) return 'No cards yet.'
+  return `${cards.completedCount()} of ${total} done.`
+})
+
+watch(project, (value) => {
+  if (value) {
+    titleDraft.value = value.title
+    descriptionDraft.value = value.description
+  }
+})
+
+watch(confirmingDelete, async (open) => {
+  if (open) {
+    await nextTick()
+    cancelButton.value?.focus()
+  }
+})
+
+onMounted(() => {
+  void load()
+  window.addEventListener('keydown', onKeydown)
+})
+onBeforeUnmount(() => window.removeEventListener('keydown', onKeydown))
+
+function onKeydown(event: KeyboardEvent) {
+  if (event.key !== 'Escape') return
+  if (confirmingDelete.value) confirmingDelete.value = false
+  else if (menuOpen.value) menuOpen.value = false
+}
+
+async function load() {
+  loadError.value = null
+  try {
+    const [{ project: fetched }] = await Promise.all([
+      apiRequest<{ project: Project }>(`/projects/${projectId}`, { auth: true }),
+      cards.load(projectId),
+    ])
+    project.value = fetched
+  } catch (e) {
+    if (e instanceof ApiError && e.status === 404) {
+      loadError.value = 'That project does not exist.'
+    } else {
+      loadError.value = e instanceof ApiError ? e.message : 'Could not load the project.'
+    }
+  }
+}
+
+async function patchProject(fields: { title?: string; description?: string }) {
+  actionError.value = null
+  try {
+    const { project: updated } = await apiRequest<{ project: Project }>(`/projects/${projectId}`, {
+      method: 'PATCH',
+      auth: true,
+      body: fields,
+    })
+    project.value = updated
+  } catch (e) {
+    actionError.value = e instanceof ApiError ? e.message : 'Could not save the change.'
+    if (project.value) {
+      titleDraft.value = project.value.title
+      descriptionDraft.value = project.value.description
+    }
+  }
+}
+
+function saveTitle() {
+  if (!project.value) return
+  const next = titleDraft.value.trim()
+  if (next === '') {
+    titleDraft.value = project.value.title // title is required
+    return
+  }
+  if (next !== project.value.title) void patchProject({ title: next })
+}
+
+function saveDescription() {
+  if (!project.value) return
+  const next = descriptionDraft.value.trim()
+  if (next !== project.value.description) void patchProject({ description: next })
+}
+
+function askDelete() {
+  menuOpen.value = false
+  deleteError.value = null
+  confirmingDelete.value = true
+}
+
+async function confirmDelete() {
+  deleting.value = true
+  deleteError.value = null
+  try {
+    await apiRequest(`/projects/${projectId}`, { method: 'DELETE', auth: true })
+    projects.reset()
+    cards.reset()
+    await router.push('/')
+  } catch (e) {
+    deleteError.value = e instanceof ApiError ? e.message : 'Could not delete the project.'
+    deleting.value = false
+  }
+}
+
+/** Run a store mutation, surfacing failures and resyncing from the server. */
+async function run(op: Promise<unknown>) {
+  actionError.value = null
+  try {
+    await op
+  } catch (e) {
+    actionError.value = e instanceof ApiError ? e.message : 'Something went wrong.'
+    await cards.load(projectId)
+  }
+}
+
+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
+  try {
+    await cards.add(newText.value)
+    newText.value = ''
+  } catch (e) {
+    actionError.value = e instanceof ApiError ? e.message : 'Could not add the card.'
+  } finally {
+    submitting.value = false
+  }
+}
+</script>
+
+<template>
+  <section class="card">
+    <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="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>
+        </div>
+      </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' }}
+        </button>
+      </form>
+    </template>
+  </section>
+
+  <div
+    v-if="confirmingDelete"
+    class="modal"
+    role="dialog"
+    aria-modal="true"
+    aria-labelledby="confirm-delete-title"
+  >
+    <div class="modal__backdrop" @click="confirmingDelete = false" />
+    <div class="modal__dialog">
+      <h2 id="confirm-delete-title">Delete this project?</h2>
+      <p class="muted">
+        &ldquo;{{ project?.title }}&rdquo; and its {{ cards.cards.length }}
+        card{{ cards.cards.length === 1 ? '' : 's' }} will be permanently deleted.
+      </p>
+      <p v-if="deleteError" class="form-error">{{ deleteError }}</p>
+      <div class="modal__actions">
+        <button
+          ref="cancelButton"
+          type="button"
+          class="btn-secondary"
+          :disabled="deleting"
+          @click="confirmingDelete = false"
+        >
+          Cancel
+        </button>
+        <button type="button" class="btn-danger" :disabled="deleting" @click="confirmDelete">
+          {{ deleting ? 'Deleting…' : 'Delete project' }}
+        </button>
+      </div>
+    </div>
+  </div>
+</template>