Add stage 4: frontend lists view + enforce 100-list cap

API: GET /api/lists is now ordered alphabetically (COLLATE NOCASE) by title
with no other option, and TodoListController rejects a create past 100 lists
per owner with 409. New TodoListRepository::countForOwner.

Frontend: HomeView replaces the placeholder with the user's lists (rendered in
API order) and a create form (title + optional description). New Pinia lists
store fetches and creates, re-fetching after a create so the new list sorts
into place; it is reset on logout. Form disables and explains at 100 lists;
create errors surface inline. Neutral .badge with a .badge--warn variant;
dropped the unused .facts styles.

Tests: alphabetical ordering and the 100-list cap. Suite: 17 passing.

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

web/src/App.vue

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

web/src/stores/lists.ts

@@ -0,0 +1,44 @@
+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, description: string): Promise<TodoList> {
+    const { list } = await apiRequest<{ list: TodoList }>('/lists', {
+      method: 'POST',
+      auth: true,
+      body: { title, description },
+    })
+
+    // 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/style.css

@@ -100,32 +100,46 @@ h1 {
   padding: 0.1rem 0.45rem;
   border-radius: 999px;
   font-size: 0.75rem;
-  border: 1px solid var(--warn-border);
-  background: var(--warn-bg);
+  white-space: nowrap;
+  border: 1px solid var(--border);
+  background: var(--bg);
+  color: var(--muted);
 }
 
-.facts {
-  margin: 1.25rem 0 0;
+.badge--warn {
+  border-color: var(--warn-border);
+  background: var(--warn-bg);
+  color: inherit;
+}
+
+.lists {
+  list-style: none;
+  margin: 1.5rem 0 0;
+  padding: 0;
   display: grid;
   gap: 0.75rem;
 }
 
-.facts div {
+.lists__item {
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 0.75rem 0.9rem;
+}
+
+.lists__head {
   display: flex;
+  align-items: center;
   justify-content: space-between;
-  gap: 1rem;
-  border-top: 1px solid var(--border);
-  padding-top: 0.6rem;
+  gap: 0.75rem;
 }
 
-.facts dt {
-  color: var(--muted);
+.lists__title {
+  font-weight: 600;
+  word-break: break-word;
 }
 
-.facts dd {
-  margin: 0;
-  text-align: right;
-  word-break: break-all;
+.lists__item .muted {
+  margin: 0.35rem 0 0;
 }
 
 .form {

web/src/types.ts

@@ -12,6 +12,17 @@ export interface AuthResponse {
   expires_at: string
 }
 
+export interface TodoList {
+  id: number
+  title: string
+  description: string
+  owner_id: number
+  item_count: number
+  completed_count: 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

@@ -1,35 +1,95 @@
 <script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import { ApiError } from '../lib/api'
 import { useAuthStore } from '../stores/auth'
+import { MAX_LISTS, useListsStore } from '../stores/lists'
 
 const auth = useAuthStore()
+const lists = useListsStore()
+
+const loadError = ref<string | null>(null)
+
+const title = ref('')
+const description = ref('')
+const createError = ref<ApiError | null>(null)
+const submitting = ref(false)
+
+onMounted(load)
+
+async function load() {
+  loadError.value = null
+  try {
+    await lists.fetchLists()
+  } catch (e) {
+    loadError.value = e instanceof ApiError ? e.message : 'Could not load your lists.'
+  }
+}
+
+async function onCreate() {
+  submitting.value = true
+  createError.value = null
+  try {
+    await lists.createList(title.value, description.value)
+    title.value = ''
+    description.value = ''
+  } catch (e) {
+    createError.value = e instanceof ApiError ? e : new ApiError('Could not create the list.', 0)
+  } finally {
+    submitting.value = false
+  }
+}
 </script>
 
 <template>
   <section class="card">
-    <h1>Your todo list</h1>
-    <p class="muted">
-      Placeholder page. The list and its items arrive in the next stage — for now
-      this screen just proves you are authenticated against the REST API.
-    </p>
+    <h1>Your lists</h1>
 
     <div v-if="!auth.emailVerified" class="notice">
       Your email address <strong>{{ auth.user?.email }}</strong> has not been
-      verified yet. Verification will be added in a later stage.
+      verified yet.
     </div>
 
-    <dl class="facts">
-      <div>
-        <dt>Signed in as</dt>
-        <dd>{{ auth.user?.email }}</dd>
-      </div>
-      <div>
-        <dt>Account created</dt>
-        <dd>{{ auth.user?.created_at ?? '—' }}</dd>
-      </div>
-      <div>
-        <dt>Email verified</dt>
-        <dd>{{ auth.emailVerified ? 'yes' : 'no' }}</dd>
-      </div>
-    </dl>
+    <form class="form" @submit.prevent="onCreate">
+      <label>
+        <span>New list title</span>
+        <input v-model="title" type="text" maxlength="255" required :disabled="lists.lists.length >= MAX_LISTS" />
+        <small v-if="createError?.fieldError('title')" class="field-error">
+          {{ createError.fieldError('title') }}
+        </small>
+      </label>
+
+      <label>
+        <span>Description <span class="hint">(optional)</span></span>
+        <input v-model="description" type="text" maxlength="2000" :disabled="lists.lists.length >= MAX_LISTS" />
+      </label>
+
+      <p v-if="createError && Object.keys(createError.details).length === 0" class="form-error">
+        {{ createError.message }}
+      </p>
+
+      <button type="submit" :disabled="submitting || lists.lists.length >= MAX_LISTS">
+        {{ submitting ? 'Creating…' : 'Create list' }}
+      </button>
+
+      <p v-if="lists.lists.length >= MAX_LISTS" class="hint">
+        You have reached the maximum of {{ MAX_LISTS }} lists.
+      </p>
+    </form>
+
+    <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="lists.lists.length === 0" class="muted">
+      No lists yet — create your first one above.
+    </p>
+
+    <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>
+      </li>
+    </ul>
   </section>
 </template>