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/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,
+  }
+})