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/App.vue

@@ -1,18 +1,18 @@
 <script setup lang="ts">
 import { RouterLink, RouterView, useRouter } from 'vue-router'
 import { useAuthStore } from './stores/auth'
-import { useItemsStore } from './stores/items'
-import { useListsStore } from './stores/lists'
+import { useCardsStore } from './stores/cards'
+import { useProjectsStore } from './stores/projects'
 
 const auth = useAuthStore()
-const lists = useListsStore()
-const items = useItemsStore()
+const projects = useProjectsStore()
+const cards = useCardsStore()
 const router = useRouter()
 
 async function onLogout() {
   auth.logout()
-  lists.reset()
-  items.reset()
+  projects.reset()
+  cards.reset()
   await router.push({ name: 'login' })
 }
 </script>
@@ -20,7 +20,7 @@ async function onLogout() {
 <template>
   <div class="app">
     <header class="app__bar">
-      <span class="app__brand">Todo List</span>
+      <span class="app__brand">Projects</span>
 
       <div v-if="auth.isAuthenticated" class="app__account">
         <RouterLink v-if="!auth.emailVerified" to="/profile" class="badge badge--warn">

web/src/components/CardRow.vue

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import type { Card } from '../types'
+
+const props = defineProps<{ card: Card }>()
+const emit = defineEmits<{
+  toggle: [complete: boolean]
+  'save-text': [text: string]
+  delete: []
+}>()
+
+const text = ref(props.card.text)
+watch(
+  () => props.card.text,
+  (value) => {
+    text.value = value
+  },
+)
+
+function commit() {
+  const next = text.value.trim()
+  if (next === '') {
+    text.value = props.card.text // the API requires a non-empty text
+    return
+  }
+  if (next !== props.card.text) emit('save-text', next)
+}
+</script>
+
+<template>
+  <li class="card-row" :class="{ 'card-row--done': card.complete }">
+    <span class="card-row__handle" aria-hidden="true" title="Drag to reorder">⠿</span>
+
+    <input
+      class="card-row__check"
+      type="checkbox"
+      :checked="card.complete"
+      :aria-label="card.complete ? 'Mark as not done' : 'Mark as done'"
+      @change="emit('toggle', ($event.target as HTMLInputElement).checked)"
+    />
+
+    <input
+      v-model="text"
+      class="card-row__text"
+      type="text"
+      maxlength="1000"
+      aria-label="Card text"
+      @blur="commit"
+      @keyup.enter="($event.target as HTMLInputElement).blur()"
+    />
+
+    <button type="button" class="card-row__delete" aria-label="Delete card" @click="emit('delete')">
+      ✕
+    </button>
+  </li>
+</template>

web/src/components/TodoItemRow.vue

@@ -1,56 +0,0 @@
-<script setup lang="ts">
-import { ref, watch } from 'vue'
-import type { TodoItem } from '../types'
-
-const props = defineProps<{ item: TodoItem }>()
-const emit = defineEmits<{
-  toggle: [complete: boolean]
-  'save-text': [text: string]
-  delete: []
-}>()
-
-const text = ref(props.item.text)
-watch(
-  () => props.item.text,
-  (value) => {
-    text.value = value
-  },
-)
-
-function commit() {
-  const next = text.value.trim()
-  if (next === '') {
-    text.value = props.item.text // the API requires a non-empty text
-    return
-  }
-  if (next !== props.item.text) emit('save-text', next)
-}
-</script>
-
-<template>
-  <li class="item" :class="{ 'item--done': item.complete }">
-    <span class="item__handle" aria-hidden="true" title="Drag to reorder">⠿</span>
-
-    <input
-      class="item__check"
-      type="checkbox"
-      :checked="item.complete"
-      :aria-label="item.complete ? 'Mark as not done' : 'Mark as done'"
-      @change="emit('toggle', ($event.target as HTMLInputElement).checked)"
-    />
-
-    <input
-      v-model="text"
-      class="item__text"
-      type="text"
-      maxlength="1000"
-      aria-label="Item text"
-      @blur="commit"
-      @keyup.enter="($event.target as HTMLInputElement).blur()"
-    />
-
-    <button type="button" class="item__delete" aria-label="Delete item" @click="emit('delete')">
-      ✕
-    </button>
-  </li>
-</template>

web/src/router/index.ts

@@ -11,9 +11,9 @@ const router = createRouter({
       meta: { requiresAuth: true },
     },
     {
-      path: '/lists/:id(\\d+)',
-      name: 'list',
-      component: () => import('../views/ListView.vue'),
+      path: '/projects/:id(\\d+)',
+      name: 'project',
+      component: () => import('../views/ProjectView.vue'),
       meta: { requiresAuth: true },
     },
     {

web/src/stores/cards.ts

@@ -0,0 +1,88 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+import { apiRequest } from '../lib/api'
+import type { Card } from '../types'
+
+type CardPatch = Partial<Pick<Card, 'text' | 'complete' | 'position'>>
+
+export const useCardsStore = defineStore('cards', () => {
+  // Held in project order (by position); mutated in place by drag-and-drop.
+  const cards = ref<Card[]>([])
+  const projectId = ref<number | null>(null)
+  const loading = ref(false)
+  const loaded = ref(false)
+
+  const completedCount = () => cards.value.filter((c) => c.complete).length
+
+  async function load(id: number): Promise<void> {
+    projectId.value = id
+    loaded.value = false
+    loading.value = true
+    try {
+      const { cards: fetched } = await apiRequest<{ cards: Card[] }>(`/projects/${id}/cards`, {
+        auth: true,
+      })
+      cards.value = fetched
+      loaded.value = true
+    } finally {
+      loading.value = false
+    }
+  }
+
+  async function add(text: string): Promise<void> {
+    const { card } = await apiRequest<{ card: Card }>(`/projects/${projectId.value}/cards`, {
+      method: 'POST',
+      auth: true,
+      body: { text },
+    })
+    // The API appends the card, so the end of the array is its correct place.
+    cards.value.push(card)
+  }
+
+  async function patch(card: Card, fields: CardPatch): Promise<void> {
+    const { card: updated } = await apiRequest<{ card: Card }>(
+      `/projects/${projectId.value}/cards/${card.id}`,
+      { method: 'PATCH', auth: true, body: fields },
+    )
+    const i = cards.value.findIndex((x) => x.id === updated.id)
+    if (i !== -1) cards.value[i] = updated
+  }
+
+  const setComplete = (card: Card, complete: boolean) => patch(card, { complete })
+  const setText = (card: Card, text: string) => patch(card, { text })
+
+  async function remove(card: Card): Promise<void> {
+    await apiRequest(`/projects/${projectId.value}/cards/${card.id}`, { method: 'DELETE', auth: true })
+    cards.value = cards.value.filter((c) => c.id !== card.id)
+  }
+
+  /** Persist the current array order (call after a drag ends). */
+  async function persistOrder(): Promise<void> {
+    const { cards: fresh } = await apiRequest<{ cards: Card[] }>(
+      `/projects/${projectId.value}/cards/order`,
+      { method: 'PUT', auth: true, body: { card_ids: cards.value.map((c) => c.id) } },
+    )
+    cards.value = fresh
+  }
+
+  function reset(): void {
+    cards.value = []
+    projectId.value = null
+    loaded.value = false
+  }
+
+  return {
+    cards,
+    projectId,
+    loading,
+    loaded,
+    completedCount,
+    load,
+    add,
+    setComplete,
+    setText,
+    remove,
+    persistOrder,
+    reset,
+  }
+})

web/src/stores/items.ts

@@ -1,88 +0,0 @@
-import { defineStore } from 'pinia'
-import { ref } from 'vue'
-import { apiRequest } from '../lib/api'
-import type { TodoItem } from '../types'
-
-type ItemPatch = Partial<Pick<TodoItem, 'text' | 'complete' | 'position'>>
-
-export const useItemsStore = defineStore('items', () => {
-  // Held in list order (by position); mutated in place by drag-and-drop.
-  const items = ref<TodoItem[]>([])
-  const listId = ref<number | null>(null)
-  const loading = ref(false)
-  const loaded = ref(false)
-
-  const completedCount = () => items.value.filter((i) => i.complete).length
-
-  async function load(id: number): Promise<void> {
-    listId.value = id
-    loaded.value = false
-    loading.value = true
-    try {
-      const { items: fetched } = await apiRequest<{ items: TodoItem[] }>(`/lists/${id}/items`, {
-        auth: true,
-      })
-      items.value = fetched
-      loaded.value = true
-    } finally {
-      loading.value = false
-    }
-  }
-
-  async function add(text: string): Promise<void> {
-    const { item } = await apiRequest<{ item: TodoItem }>(`/lists/${listId.value}/items`, {
-      method: 'POST',
-      auth: true,
-      body: { text },
-    })
-    // The API appends the item, so the end of the array is its correct place.
-    items.value.push(item)
-  }
-
-  async function patch(item: TodoItem, fields: ItemPatch): Promise<void> {
-    const { item: updated } = await apiRequest<{ item: TodoItem }>(
-      `/lists/${listId.value}/items/${item.id}`,
-      { method: 'PATCH', auth: true, body: fields },
-    )
-    const i = items.value.findIndex((x) => x.id === updated.id)
-    if (i !== -1) items.value[i] = updated
-  }
-
-  const setComplete = (item: TodoItem, complete: boolean) => patch(item, { complete })
-  const setText = (item: TodoItem, text: string) => patch(item, { text })
-
-  async function remove(item: TodoItem): Promise<void> {
-    await apiRequest(`/lists/${listId.value}/items/${item.id}`, { method: 'DELETE', auth: true })
-    items.value = items.value.filter((i) => i.id !== item.id)
-  }
-
-  /** Persist the current array order (call after a drag ends). */
-  async function persistOrder(): Promise<void> {
-    const { items: fresh } = await apiRequest<{ items: TodoItem[] }>(
-      `/lists/${listId.value}/items/order`,
-      { method: 'PUT', auth: true, body: { item_ids: items.value.map((i) => i.id) } },
-    )
-    items.value = fresh
-  }
-
-  function reset(): void {
-    items.value = []
-    listId.value = null
-    loaded.value = false
-  }
-
-  return {
-    items,
-    listId,
-    loading,
-    loaded,
-    completedCount,
-    load,
-    add,
-    setComplete,
-    setText,
-    remove,
-    persistOrder,
-    reset,
-  }
-})

web/src/stores/lists.ts

@@ -1,44 +0,0 @@
-import { defineStore } from 'pinia'
-import { ref } from 'vue'
-import { apiRequest } from '../lib/api'
-import type { TodoList } from '../types'
-
-/** Matches MAX_LISTS_PER_OWNER on the API. */
-export const MAX_LISTS = 100
-
-export const useListsStore = defineStore('lists', () => {
-  // Kept in the order the API returns them (alphabetical by title).
-  const lists = ref<TodoList[]>([])
-  const loaded = ref(false)
-  const loading = ref(false)
-
-  async function fetchLists(): Promise<void> {
-    loading.value = true
-    try {
-      const { lists: fetched } = await apiRequest<{ lists: TodoList[] }>('/lists', { auth: true })
-      lists.value = fetched
-      loaded.value = true
-    } finally {
-      loading.value = false
-    }
-  }
-
-  async function createList(title: string): Promise<TodoList> {
-    const { list } = await apiRequest<{ list: TodoList }>('/lists', {
-      method: 'POST',
-      auth: true,
-      body: { title },
-    })
-
-    // Re-fetch so the new list lands in its correct alphabetical position.
-    await fetchLists()
-    return list
-  }
-
-  function reset(): void {
-    lists.value = []
-    loaded.value = false
-  }
-
-  return { lists, loaded, loading, fetchLists, createList, reset }
-})

web/src/stores/projects.ts

@@ -0,0 +1,44 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+import { apiRequest } from '../lib/api'
+import type { Project } from '../types'
+
+/** Matches MAX_PROJECTS_PER_OWNER on the API. */
+export const MAX_PROJECTS = 100
+
+export const useProjectsStore = defineStore('projects', () => {
+  // Kept in the order the API returns them (alphabetical by title).
+  const projects = ref<Project[]>([])
+  const loaded = ref(false)
+  const loading = ref(false)
+
+  async function fetchProjects(): Promise<void> {
+    loading.value = true
+    try {
+      const { projects: fetched } = await apiRequest<{ projects: Project[] }>('/projects', { auth: true })
+      projects.value = fetched
+      loaded.value = true
+    } finally {
+      loading.value = false
+    }
+  }
+
+  async function createProject(title: string): Promise<Project> {
+    const { project } = await apiRequest<{ project: Project }>('/projects', {
+      method: 'POST',
+      auth: true,
+      body: { title },
+    })
+
+    // Re-fetch so the new project lands in its correct alphabetical position.
+    await fetchProjects()
+    return project
+  }
+
+  function reset(): void {
+    projects.value = []
+    loaded.value = false
+  }
+
+  return { projects, loaded, loading, fetchProjects, createProject, reset }
+})

web/src/style.css

@@ -117,7 +117,7 @@ h1 {
   color: inherit;
 }
 
-.lists {
+.projects {
   list-style: none;
   margin: 1.5rem 0 0;
   padding: 0;
@@ -125,12 +125,12 @@ h1 {
   gap: 0.75rem;
 }
 
-.lists__item {
+.projects__item {
   border: 1px solid var(--border);
   border-radius: 8px;
 }
 
-.lists__link {
+.projects__link {
   display: block;
   padding: 0.75rem 0.9rem;
   color: inherit;
@@ -138,25 +138,25 @@ h1 {
   border-radius: 8px;
 }
 
-.lists__link:hover {
+.projects__link:hover {
   background: var(--bg);
 }
 
-.lists__head {
+.projects__head {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 0.75rem;
 }
 
-.lists__title {
+.projects__title {
   font-weight: 600;
   word-break: break-word;
 }
 
-/* --- list detail: items ------------------------------------------------- */
+/* --- project detail: cards ------------------------------------------ */
 
-.items {
+.cards {
   list-style: none;
   margin: 1rem 0 0;
   padding: 0;
@@ -164,7 +164,7 @@ h1 {
   gap: 0.4rem;
 }
 
-.item {
+.card-row {
   display: flex;
   align-items: center;
   gap: 0.5rem;
@@ -174,11 +174,11 @@ h1 {
   background: var(--surface);
 }
 
-.item--ghost {
+.card-row--ghost {
   opacity: 0.5;
 }
 
-.item__handle {
+.card-row__handle {
   cursor: grab;
   color: var(--muted);
   user-select: none;
@@ -186,13 +186,13 @@ h1 {
   line-height: 1;
 }
 
-.item__check {
+.card-row__check {
   flex: none;
   width: 1.1rem;
   height: 1.1rem;
 }
 
-.item__text {
+.card-row__text {
   flex: 1;
   min-width: 0;
   border: 1px solid transparent;
@@ -203,22 +203,22 @@ h1 {
   padding: 0.3rem 0.4rem;
 }
 
-.item__text:hover {
+.card-row__text:hover {
   border-color: var(--border);
 }
 
-.item__text:focus {
+.card-row__text:focus {
   outline: none;
   border-color: var(--accent);
   background: var(--bg);
 }
 
-.item--done .item__text {
+.card-row--done .card-row__text {
   text-decoration: line-through;
   color: var(--muted);
 }
 
-.item__delete {
+.card-row__delete {
   flex: none;
   border: none;
   background: none;
@@ -229,27 +229,27 @@ h1 {
   border-radius: 6px;
 }
 
-.item__delete:hover {
+.card-row__delete:hover {
   color: var(--error);
   background: var(--bg);
 }
 
-/* --- list detail: header, inline title/description, manage menu -------- */
+/* --- project detail: header, inline title/description, manage menu - */
 
-.list-head {
+.project-head {
   display: flex;
   align-items: flex-start;
   gap: 0.5rem;
 }
 
-.list-head__title {
+.project-head__title {
   flex: 1;
   min-width: 0;
   margin: 0 0 0.5rem;
 }
 
-.list-head__title input,
-.list-head__desc {
+.project-head__title input,
+.project-head__desc {
   width: 100%;
   font: inherit;
   color: var(--text);
@@ -259,12 +259,12 @@ h1 {
   padding: 0.25rem 0.4rem;
 }
 
-.list-head__title input {
+.project-head__title input {
   font-size: 1.4rem;
   font-weight: 600;
 }
 
-.list-head__desc {
+.project-head__desc {
   display: block;
   resize: vertical;
   min-height: 2.75rem;
@@ -273,13 +273,13 @@ h1 {
   margin-bottom: 0.75rem;
 }
 
-.list-head__title input:hover,
-.list-head__desc:hover {
+.project-head__title input:hover,
+.project-head__desc:hover {
   border-color: var(--border);
 }
 
-.list-head__title input:focus,
-.list-head__desc:focus {
+.project-head__title input:focus,
+.project-head__desc:focus {
   outline: none;
   color: var(--text);
   background: var(--bg);
@@ -422,7 +422,8 @@ h1 {
   margin: 1.25rem 0;
 }
 
-.form--new-list {
+.form--new-project,
+.form--new-card {
   margin-top: 1.5rem;
   padding-top: 1.25rem;
   border-top: 1px solid var(--border);

web/src/types.ts

@@ -14,20 +14,20 @@ export interface AuthResponse {
   expires_at: string
 }
 
-export interface TodoList {
+export interface Project {
   id: number
   title: string
   description: string
   owner_id: number
-  item_count: number
+  card_count: number
   completed_count: number
   created_at: string
   updated_at: string
 }
 
-export interface TodoItem {
+export interface Card {
   id: number
-  list_id: number
+  project_id: number
   text: string
   complete: boolean
   position: number

web/src/views/HomeView.vue

@@ -2,10 +2,10 @@
 import { computed, onMounted, ref } from 'vue'
 import { ApiError } from '../lib/api'
 import { useAuthStore } from '../stores/auth'
-import { MAX_LISTS, useListsStore } from '../stores/lists'
+import { MAX_PROJECTS, useProjectsStore } from '../stores/projects'
 
 const auth = useAuthStore()
-const lists = useListsStore()
+const projects = useProjectsStore()
 
 const loadError = ref<string | null>(null)
 
@@ -13,10 +13,10 @@ const title = ref('')
 const createError = ref<ApiError | null>(null)
 const submitting = ref(false)
 
-const atLimit = computed(() => lists.lists.length >= MAX_LISTS)
+const atLimit = computed(() => projects.projects.length >= MAX_PROJECTS)
 const summary = computed(() => {
-  const n = lists.lists.length
-  return `You have ${n} ${n === 1 ? 'list' : 'lists'}.`
+  const n = projects.projects.length
+  return `You have ${n} ${n === 1 ? 'project' : 'projects'}.`
 })
 
 onMounted(load)
@@ -24,9 +24,9 @@ onMounted(load)
 async function load() {
   loadError.value = null
   try {
-    await lists.fetchLists()
+    await projects.fetchProjects()
   } catch (e) {
-    loadError.value = e instanceof ApiError ? e.message : 'Could not load your lists.'
+    loadError.value = e instanceof ApiError ? e.message : 'Could not load your projects.'
   }
 }
 
@@ -34,10 +34,10 @@ async function onCreate() {
   submitting.value = true
   createError.value = null
   try {
-    await lists.createList(title.value)
+    await projects.createProject(title.value)
     title.value = ''
   } catch (e) {
-    createError.value = e instanceof ApiError ? e : new ApiError('Could not create the list.', 0)
+    createError.value = e instanceof ApiError ? e : new ApiError('Could not create the project.', 0)
   } finally {
     submitting.value = false
   }
@@ -46,7 +46,7 @@ async function onCreate() {
 
 <template>
   <section class="card">
-    <h1>Your lists</h1>
+    <h1>Your projects</h1>
 
     <div v-if="!auth.emailVerified" class="notice">
       Your email address <strong>{{ auth.user?.email }}</strong> has not been
@@ -54,29 +54,29 @@ async function onCreate() {
     </div>
 
     <p v-if="loadError" class="form-error">{{ loadError }}</p>
-    <p v-else-if="lists.loading && !lists.loaded" class="muted">Loading…</p>
+    <p v-else-if="projects.loading && !projects.loaded" class="muted">Loading…</p>
 
     <template v-else>
       <p class="muted">{{ summary }}</p>
 
-      <p v-if="lists.lists.length === 0" class="muted">
-        No lists yet — create your first one below.
+      <p v-if="projects.projects.length === 0" class="muted">
+        No projects yet — create your first one below.
       </p>
 
-      <ul v-else class="lists">
-        <li v-for="list in lists.lists" :key="list.id" class="lists__item">
-          <RouterLink :to="{ name: 'list', params: { id: list.id } }" class="lists__link">
-            <div class="lists__head">
-              <span class="lists__title">{{ list.title }}</span>
-              <span class="badge">{{ list.completed_count }} / {{ list.item_count }} done</span>
+      <ul v-else class="projects">
+        <li v-for="project in projects.projects" :key="project.id" class="projects__item">
+          <RouterLink :to="{ name: 'project', params: { id: project.id } }" class="projects__link">
+            <div class="projects__head">
+              <span class="projects__title">{{ project.title }}</span>
+              <span class="badge">{{ project.completed_count }} / {{ project.card_count }} done</span>
             </div>
           </RouterLink>
         </li>
       </ul>
 
-      <form class="form form--new-list" @submit.prevent="onCreate">
+      <form class="form form--new-project" @submit.prevent="onCreate">
         <label>
-          <span>New list title</span>
+          <span>New project title</span>
           <input v-model="title" type="text" maxlength="255" required :disabled="atLimit" />
           <small v-if="createError?.fieldError('title')" class="field-error">
             {{ createError.fieldError('title') }}
@@ -88,11 +88,11 @@ async function onCreate() {
         </p>
 
         <button type="submit" :disabled="submitting || atLimit">
-          {{ submitting ? 'Creating…' : 'Create list' }}
+          {{ submitting ? 'Creating…' : 'Create project' }}
         </button>
 
         <p v-if="atLimit" class="hint">
-          You have reached the maximum of {{ MAX_LISTS }} lists.
+          You have reached the maximum of {{ MAX_PROJECTS }} projects.
         </p>
       </form>
     </template>

web/src/views/ProjectView.vue

@@ -2,19 +2,19 @@
 import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import draggable from 'vuedraggable'
-import TodoItemRow from '../components/TodoItemRow.vue'
+import CardRow from '../components/CardRow.vue'
 import { ApiError, apiRequest } from '../lib/api'
-import { useItemsStore } from '../stores/items'
-import { useListsStore } from '../stores/lists'
-import type { TodoItem, TodoList } from '../types'
+import { useCardsStore } from '../stores/cards'
+import { useProjectsStore } from '../stores/projects'
+import type { Card, Project } from '../types'
 
 const route = useRoute()
 const router = useRouter()
-const items = useItemsStore()
-const lists = useListsStore()
+const cards = useCardsStore()
+const projects = useProjectsStore()
 
-const listId = Number(route.params.id)
-const list = ref<TodoList | null>(null)
+const projectId = Number(route.params.id)
+const project = ref<Project | null>(null)
 const loadError = ref<string | null>(null)
 const actionError = ref<string | null>(null)
 
@@ -31,12 +31,12 @@ const newText = ref('')
 const submitting = ref(false)
 
 const summary = computed(() => {
-  const total = items.items.length
-  if (total === 0) return 'No items yet.'
-  return `${items.completedCount()} of ${total} done.`
+  const total = cards.cards.length
+  if (total === 0) return 'No cards yet.'
+  return `${cards.completedCount()} of ${total} done.`
 })
 
-watch(list, (value) => {
+watch(project, (value) => {
   if (value) {
     titleDraft.value = value.title
     descriptionDraft.value = value.description
@@ -65,52 +65,52 @@ function onKeydown(event: KeyboardEvent) {
 async function load() {
   loadError.value = null
   try {
-    const [{ list: fetched }] = await Promise.all([
-      apiRequest<{ list: TodoList }>(`/lists/${listId}`, { auth: true }),
-      items.load(listId),
+    const [{ project: fetched }] = await Promise.all([
+      apiRequest<{ project: Project }>(`/projects/${projectId}`, { auth: true }),
+      cards.load(projectId),
     ])
-    list.value = fetched
+    project.value = fetched
   } catch (e) {
     if (e instanceof ApiError && e.status === 404) {
-      loadError.value = 'That list does not exist.'
+      loadError.value = 'That project does not exist.'
     } else {
-      loadError.value = e instanceof ApiError ? e.message : 'Could not load the list.'
+      loadError.value = e instanceof ApiError ? e.message : 'Could not load the project.'
     }
   }
 }
 
-async function patchList(fields: { title?: string; description?: string }) {
+async function patchProject(fields: { title?: string; description?: string }) {
   actionError.value = null
   try {
-    const { list: updated } = await apiRequest<{ list: TodoList }>(`/lists/${listId}`, {
+    const { project: updated } = await apiRequest<{ project: Project }>(`/projects/${projectId}`, {
       method: 'PATCH',
       auth: true,
       body: fields,
     })
-    list.value = updated
+    project.value = updated
   } catch (e) {
     actionError.value = e instanceof ApiError ? e.message : 'Could not save the change.'
-    if (list.value) {
-      titleDraft.value = list.value.title
-      descriptionDraft.value = list.value.description
+    if (project.value) {
+      titleDraft.value = project.value.title
+      descriptionDraft.value = project.value.description
     }
   }
 }
 
 function saveTitle() {
-  if (!list.value) return
+  if (!project.value) return
   const next = titleDraft.value.trim()
   if (next === '') {
-    titleDraft.value = list.value.title // title is required
+    titleDraft.value = project.value.title // title is required
     return
   }
-  if (next !== list.value.title) void patchList({ title: next })
+  if (next !== project.value.title) void patchProject({ title: next })
 }
 
 function saveDescription() {
-  if (!list.value) return
+  if (!project.value) return
   const next = descriptionDraft.value.trim()
-  if (next !== list.value.description) void patchList({ description: next })
+  if (next !== project.value.description) void patchProject({ description: next })
 }
 
 function askDelete() {
@@ -123,12 +123,12 @@ async function confirmDelete() {
   deleting.value = true
   deleteError.value = null
   try {
-    await apiRequest(`/lists/${listId}`, { method: 'DELETE', auth: true })
-    lists.reset()
-    items.reset()
+    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 list.'
+    deleteError.value = e instanceof ApiError ? e.message : 'Could not delete the project.'
     deleting.value = false
   }
 }
@@ -140,23 +140,23 @@ async function run(op: Promise<unknown>) {
     await op
   } catch (e) {
     actionError.value = e instanceof ApiError ? e.message : 'Something went wrong.'
-    await items.load(listId)
+    await cards.load(projectId)
   }
 }
 
 function onReorder(event: { oldIndex?: number; newIndex?: number }) {
   if (event.oldIndex === event.newIndex) return
-  void run(items.persistOrder())
+  void run(cards.persistOrder())
 }
 
 async function onCreate() {
   submitting.value = true
   actionError.value = null
   try {
-    await items.add(newText.value)
+    await cards.add(newText.value)
     newText.value = ''
   } catch (e) {
-    actionError.value = e instanceof ApiError ? e.message : 'Could not add the item.'
+    actionError.value = e instanceof ApiError ? e.message : 'Could not add the card.'
   } finally {
     submitting.value = false
   }
@@ -165,18 +165,18 @@ async function onCreate() {
 
 <template>
   <section class="card">
-    <p><RouterLink to="/">&larr; All lists</RouterLink></p>
+    <p><RouterLink to="/">&larr; All projects</RouterLink></p>
 
     <p v-if="loadError" class="form-error">{{ loadError }}</p>
 
-    <template v-else-if="list">
-      <div class="list-head">
-        <h1 class="list-head__title">
+    <template v-else-if="project">
+      <div class="project-head">
+        <h1 class="project-head__title">
           <input
             v-model="titleDraft"
             type="text"
             maxlength="255"
-            aria-label="List title"
+            aria-label="Project title"
             @blur="saveTitle"
             @keyup.enter="($event.target as HTMLInputElement).blur()"
           />
@@ -203,7 +203,7 @@ async function onCreate() {
                   class="menu__item menu__item--danger"
                   @click="askDelete"
                 >
-                  Delete list
+                  Delete project
                 </button>
               </li>
             </ul>
@@ -213,47 +213,47 @@ async function onCreate() {
 
       <textarea
         v-model="descriptionDraft"
-        class="list-head__desc"
+        class="project-head__desc"
         rows="2"
         maxlength="2000"
         placeholder="Add a description"
-        aria-label="List description"
+        aria-label="Project description"
         @blur="saveDescription"
       />
 
       <p class="muted">{{ summary }}</p>
       <p v-if="actionError" class="form-error">{{ actionError }}</p>
 
-      <p v-if="items.loading && !items.loaded" class="muted">Loading…</p>
+      <p v-if="cards.loading && !cards.loaded" class="muted">Loading…</p>
 
       <draggable
-        v-else-if="items.items.length"
-        :list="items.items"
+        v-else-if="cards.cards.length"
+        :list="cards.cards"
         item-key="id"
         tag="ul"
-        class="items"
-        handle=".item__handle"
-        ghost-class="item--ghost"
+        class="cards"
+        handle=".card-row__handle"
+        ghost-class="card-row--ghost"
         :animation="150"
         @end="onReorder"
       >
-        <template #item="{ element }: { element: TodoItem }">
-          <TodoItemRow
-            :item="element"
-            @toggle="(v) => run(items.setComplete(element, v))"
-            @save-text="(v) => run(items.setText(element, v))"
-            @delete="run(items.remove(element))"
+        <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-list" @submit.prevent="onCreate">
+      <form class="form form--new-card" @submit.prevent="onCreate">
         <label>
-          <span>New item</span>
+          <span>New card</span>
           <input v-model="newText" type="text" maxlength="1000" required />
         </label>
         <button type="submit" :disabled="submitting">
-          {{ submitting ? 'Adding…' : 'Add item' }}
+          {{ submitting ? 'Adding…' : 'Add card' }}
         </button>
       </form>
     </template>
@@ -268,10 +268,10 @@ async function onCreate() {
   >
     <div class="modal__backdrop" @click="confirmingDelete = false" />
     <div class="modal__dialog">
-      <h2 id="confirm-delete-title">Delete this list?</h2>
+      <h2 id="confirm-delete-title">Delete this project?</h2>
       <p class="muted">
-        &ldquo;{{ list?.title }}&rdquo; and its {{ items.items.length }}
-        item{{ items.items.length === 1 ? '' : 's' }} will be permanently deleted.
+        &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">
@@ -285,7 +285,7 @@ async function onCreate() {
           Cancel
         </button>
         <button type="button" class="btn-danger" :disabled="deleting" @click="confirmDelete">
-          {{ deleting ? 'Deleting…' : 'Delete list' }}
+          {{ deleting ? 'Deleting…' : 'Delete project' }}
         </button>
       </div>
     </div>