Add stage 5: list detail page with items UI and drag reorder

API: new PUT /api/lists/{id}/items/order takes the full ordered id set and
rewrites positions 0..n-1 in a transaction (422 unless the set matches the
list exactly). TodoItemRepository gains idsForList() and reorder().

Frontend: lists on the home page are now links to /lists/:id (ListView).
ListView shows the list title, a "M of N done" summary, and each item as a
drag handle + checkbox + inline-editable text (saved on blur) + delete
button, with a create-item form at the bottom. Drag-and-drop uses
vuedraggable; on drop the whole order is persisted via the new endpoint and
the response replaces local state, with a resync-on-error fallback. New
items store; items store is also reset on logout.

Tests: reorder happy path, incomplete-set rejection, owner scoping. Backend
suite: 23 passing.

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

web/src/App.vue

@@ -1,15 +1,18 @@
 <script setup lang="ts">
 import { RouterView, useRouter } from 'vue-router'
 import { useAuthStore } from './stores/auth'
+import { useItemsStore } from './stores/items'
 import { useListsStore } from './stores/lists'
 
 const auth = useAuthStore()
 const lists = useListsStore()
+const items = useItemsStore()
 const router = useRouter()
 
 async function onLogout() {
   auth.logout()
   lists.reset()
+  items.reset()
   await router.push({ name: 'login' })
 }
 </script>

web/src/components/TodoItemRow.vue

@@ -0,0 +1,56 @@
+<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

@@ -10,6 +10,12 @@ const router = createRouter({
       component: () => import('../views/HomeView.vue'),
       meta: { requiresAuth: true },
     },
+    {
+      path: '/lists/:id(\\d+)',
+      name: 'list',
+      component: () => import('../views/ListView.vue'),
+      meta: { requiresAuth: true },
+    },
     {
       path: '/login',
       name: 'login',

web/src/stores/items.ts

@@ -0,0 +1,88 @@
+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/style.css

@@ -123,7 +123,18 @@ h1 {
 .lists__item {
   border: 1px solid var(--border);
   border-radius: 8px;
+}
+
+.lists__link {
+  display: block;
   padding: 0.75rem 0.9rem;
+  color: inherit;
+  text-decoration: none;
+  border-radius: 8px;
+}
+
+.lists__link:hover {
+  background: var(--bg);
 }
 
 .lists__head {
@@ -138,10 +149,90 @@ h1 {
   word-break: break-word;
 }
 
-.lists__item .muted {
+.lists__link .muted {
   margin: 0.35rem 0 0;
 }
 
+/* --- list detail: items ------------------------------------------------- */
+
+.items {
+  list-style: none;
+  margin: 1rem 0 0;
+  padding: 0;
+  display: grid;
+  gap: 0.4rem;
+}
+
+.item {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 0.4rem 0.55rem;
+  background: var(--surface);
+}
+
+.item--ghost {
+  opacity: 0.5;
+}
+
+.item__handle {
+  cursor: grab;
+  color: var(--muted);
+  user-select: none;
+  padding: 0 0.15rem;
+  line-height: 1;
+}
+
+.item__check {
+  flex: none;
+  width: 1.1rem;
+  height: 1.1rem;
+}
+
+.item__text {
+  flex: 1;
+  min-width: 0;
+  border: 1px solid transparent;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--text);
+  font-size: 1rem;
+  padding: 0.3rem 0.4rem;
+}
+
+.item__text:hover {
+  border-color: var(--border);
+}
+
+.item__text:focus {
+  outline: none;
+  border-color: var(--accent);
+  background: var(--bg);
+}
+
+.item--done .item__text {
+  text-decoration: line-through;
+  color: var(--muted);
+}
+
+.item__delete {
+  flex: none;
+  border: none;
+  background: none;
+  color: var(--muted);
+  cursor: pointer;
+  font-size: 1rem;
+  padding: 0.2rem 0.4rem;
+  border-radius: 6px;
+}
+
+.item__delete:hover {
+  color: var(--error);
+  background: var(--bg);
+}
+
 .form {
   display: grid;
   gap: 1rem;

web/src/types.ts

@@ -23,6 +23,16 @@ export interface TodoList {
   updated_at: string
 }
 
+export interface TodoItem {
+  id: number
+  list_id: number
+  text: string
+  complete: boolean
+  position: number
+  created_at: string
+  updated_at: string
+}
+
 /** Shape of every error body returned by the API. */
 export interface ApiErrorBody {
   error: {

web/src/views/HomeView.vue

@@ -65,11 +65,13 @@ async function onCreate() {
 
       <ul v-else class="lists">
         <li v-for="list in lists.lists" :key="list.id" class="lists__item">
-          <div class="lists__head">
-            <span class="lists__title">{{ list.title }}</span>
-            <span class="badge">{{ list.completed_count }} / {{ list.item_count }} done</span>
-          </div>
-          <p v-if="list.description" class="muted">{{ list.description }}</p>
+          <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>
+            </div>
+            <p v-if="list.description" class="muted">{{ list.description }}</p>
+          </RouterLink>
         </li>
       </ul>
 

web/src/views/ListView.vue

@@ -0,0 +1,125 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue'
+import { useRoute } from 'vue-router'
+import draggable from 'vuedraggable'
+import TodoItemRow from '../components/TodoItemRow.vue'
+import { ApiError, apiRequest } from '../lib/api'
+import { useItemsStore } from '../stores/items'
+import type { TodoItem, TodoList } from '../types'
+
+const route = useRoute()
+const items = useItemsStore()
+
+const listId = Number(route.params.id)
+const list = ref<TodoList | null>(null)
+const loadError = ref<string | null>(null)
+const actionError = ref<string | null>(null)
+
+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.`
+})
+
+onMounted(load)
+
+async function load() {
+  loadError.value = null
+  try {
+    const [{ list: fetched }] = await Promise.all([
+      apiRequest<{ list: TodoList }>(`/lists/${listId}`, { auth: true }),
+      items.load(listId),
+    ])
+    list.value = fetched
+  } catch (e) {
+    if (e instanceof ApiError && e.status === 404) {
+      loadError.value = 'That list does not exist.'
+    } else {
+      loadError.value = e instanceof ApiError ? e.message : 'Could not load the list.'
+    }
+  }
+}
+
+/** 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 items.load(listId)
+  }
+}
+
+function onReorder(event: { oldIndex?: number; newIndex?: number }) {
+  if (event.oldIndex === event.newIndex) return
+  void run(items.persistOrder())
+}
+
+async function onCreate() {
+  submitting.value = true
+  actionError.value = null
+  try {
+    await items.add(newText.value)
+    newText.value = ''
+  } catch (e) {
+    actionError.value = e instanceof ApiError ? e.message : 'Could not add the item.'
+  } finally {
+    submitting.value = false
+  }
+}
+</script>
+
+<template>
+  <section class="card">
+    <p><RouterLink to="/">&larr; All lists</RouterLink></p>
+
+    <p v-if="loadError" class="form-error">{{ loadError }}</p>
+
+    <template v-else-if="list">
+      <h1>{{ list.title }}</h1>
+      <p v-if="list.description" class="muted">{{ list.description }}</p>
+
+      <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>
+
+      <draggable
+        v-else-if="items.items.length"
+        :list="items.items"
+        item-key="id"
+        tag="ul"
+        class="items"
+        handle=".item__handle"
+        ghost-class="item--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>
+      </draggable>
+
+      <p v-else class="muted">No items yet &mdash; add one below.</p>
+
+      <form class="form form--new-list" @submit.prevent="onCreate">
+        <label>
+          <span>New item</span>
+          <input v-model="newText" type="text" maxlength="1000" required />
+        </label>
+        <button type="submit" :disabled="submitting">
+          {{ submitting ? 'Adding…' : 'Add item' }}
+        </button>
+      </form>
+    </template>
+  </section>
+</template>