aneurinandClaude Sonnet 5
b506b83b1e
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>
Todo List — web
Vue 3 + TypeScript + Vite PWA. Talks to the REST API in the parent directory.
Develop on the host
npm install
npm run dev # http://localhost:5173
The dev server proxies /api to http://localhost:8080 (the Dockerised API —
run docker compose up -d in the parent directory first). Override the target
with VITE_PROXY_TARGET, or point the app at a different API entirely with
VITE_API_BASE_URL (see .env.example).
Develop in Docker
From the parent directory:
docker compose --profile frontend up -d
Runs this dev server alongside the API. /api is proxied to the app container.
After changing package.json, rebuild: docker compose build web.
Build
npm run build # type-checks, then emits dist/
npm run preview
Layout
src/main.ts App bootstrap; resolves the stored session before mount
src/router/index.ts Routes + guard (redirects to /login when unauthenticated)
src/stores/auth.ts Pinia store: token in localStorage, register/login/fetchMe
src/stores/lists.ts Pinia store: the user's lists (fetch + create)
src/stores/items.ts Pinia store: one list's items (CRUD + drag reorder)
src/lib/api.ts fetch wrapper, bearer token, typed ApiError
src/components/TodoItemRow.vue checkbox + editable text + delete, one item
src/views/ HomeView (lists), ListView (items), LoginView, RegisterView
List detail
/lists/:id shows one list's items. Each row is a checkbox, an inline-editable
text field (saved on blur), a delete button, and a drag handle. Reordering uses
vuedraggable; on drop the whole new order is persisted via
PUT /api/lists/:id/items/order, and the server response replaces local state.
Auth flow
- The token from
POST /api/auth/registeror/loginis kept inlocalStorageand sent asAuthorization: Bearer …. - On load,
fetchMe()validates the stored token viaGET /api/me; a failure clears it. - Routes with
meta.requiresAuthredirect to/login(preserving the intended path) when there is no authenticated user. - Registration signs the user in immediately; the new account's email is
unverified (
user.email_verified === false), surfaced in the header and on the home page.