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/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>