From dd2ab5b7d330ea1ea45115db0fa36f7c1aeefd5b Mon Sep 17 00:00:00 2001
From: Aneurin Barker Snook <aneurin@aneur.in>
Date: Thu, 3 Sep 2026 18:48:48 +0100
Subject: [PATCH] Rework the lists view: form below list, drop description, add
 count

HomeView now shows a "You have N lists." summary above the list, moves the
new-list form beneath the list, and drops the description input (title only).
lists store createList() loses its description parameter.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 web/src/stores/lists.ts    |  4 +-
 web/src/style.css          |  6 +++
 web/src/views/HomeView.vue | 90 ++++++++++++++++++++------------------
 3 files changed, 55 insertions(+), 45 deletions(-)

diff --git a/web/src/stores/lists.ts b/web/src/stores/lists.ts
index d3f0907..c5d8f3a 100644
--- a/web/src/stores/lists.ts
+++ b/web/src/stores/lists.ts
@@ -23,11 +23,11 @@ export const useListsStore = defineStore('lists', () => {
     }
   }
 
-  async function createList(title: string, description: string): Promise<TodoList> {
+  async function createList(title: string): Promise<TodoList> {
     const { list } = await apiRequest<{ list: TodoList }>('/lists', {
       method: 'POST',
       auth: true,
-      body: { title, description },
+      body: { title },
     })
 
     // Re-fetch so the new list lands in its correct alphabetical position.
diff --git a/web/src/style.css b/web/src/style.css
index 2e0afe8..b581856 100644
--- a/web/src/style.css
+++ b/web/src/style.css
@@ -148,6 +148,12 @@ h1 {
   margin: 1.25rem 0;
 }
 
+.form--new-list {
+  margin-top: 1.5rem;
+  padding-top: 1.25rem;
+  border-top: 1px solid var(--border);
+}
+
 .form label {
   display: grid;
   gap: 0.3rem;
diff --git a/web/src/views/HomeView.vue b/web/src/views/HomeView.vue
index 5e61ec7..ff0beee 100644
--- a/web/src/views/HomeView.vue
+++ b/web/src/views/HomeView.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, ref } from 'vue'
+import { computed, onMounted, ref } from 'vue'
 import { ApiError } from '../lib/api'
 import { useAuthStore } from '../stores/auth'
 import { MAX_LISTS, useListsStore } from '../stores/lists'
@@ -10,10 +10,15 @@ 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)
 
+const atLimit = computed(() => lists.lists.length >= MAX_LISTS)
+const summary = computed(() => {
+  const n = lists.lists.length
+  return `You have ${n} ${n === 1 ? 'list' : 'lists'}.`
+})
+
 onMounted(load)
 
 async function load() {
@@ -29,9 +34,8 @@ async function onCreate() {
   submitting.value = true
   createError.value = null
   try {
-    await lists.createList(title.value, description.value)
+    await lists.createList(title.value)
     title.value = ''
-    description.value = ''
   } catch (e) {
     createError.value = e instanceof ApiError ? e : new ApiError('Could not create the list.', 0)
   } finally {
@@ -49,47 +53,47 @@ async function onCreate() {
       verified yet.
     </div>
 
-    <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>
+    <template v-else>
+      <p class="muted">{{ summary }}</p>
+
+      <p v-if="lists.lists.length === 0" class="muted">
+        No lists yet — create your first one below.
+      </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>
+
+      <form class="form form--new-list" @submit.prevent="onCreate">
+        <label>
+          <span>New list title</span>
+          <input v-model="title" type="text" maxlength="255" required :disabled="atLimit" />
+          <small v-if="createError?.fieldError('title')" class="field-error">
+            {{ createError.fieldError('title') }}
+          </small>
+        </label>
+
+        <p v-if="createError && Object.keys(createError.details).length === 0" class="form-error">
+          {{ createError.message }}
+        </p>
+
+        <button type="submit" :disabled="submitting || atLimit">
+          {{ submitting ? 'Creating…' : 'Create list' }}
+        </button>
+
+        <p v-if="atLimit" class="hint">
+          You have reached the maximum of {{ MAX_LISTS }} lists.
+        </p>
+      </form>
+    </template>
   </section>
 </template>