Add inline title/description editing and list delete to the list view

ListView: the title and description are now inline-editable fields saved on
blur via PATCH /api/lists/:id; an empty description shows an "Add a
description" placeholder. A "Manage" menu in the top right (click-outside and
Esc to close) holds a "Delete list" action that opens a confirmation modal;
confirming calls DELETE and routes back to the all-lists view. No backend
change — the existing PATCH/DELETE endpoints cover it.

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

web/src/views/ListView.vue

@@ -1,20 +1,32 @@
 <script setup lang="ts">
-import { computed, onMounted, ref } from 'vue'
-import { useRoute } from 'vue-router'
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
 import draggable from 'vuedraggable'
 import TodoItemRow from '../components/TodoItemRow.vue'
 import { ApiError, apiRequest } from '../lib/api'
 import { useItemsStore } from '../stores/items'
+import { useListsStore } from '../stores/lists'
 import type { TodoItem, TodoList } from '../types'
 
 const route = useRoute()
+const router = useRouter()
 const items = useItemsStore()
+const lists = useListsStore()
 
 const listId = Number(route.params.id)
 const list = ref<TodoList | null>(null)
 const loadError = ref<string | null>(null)
 const actionError = ref<string | null>(null)
 
+const titleDraft = ref('')
+const descriptionDraft = ref('')
+
+const menuOpen = ref(false)
+const confirmingDelete = ref(false)
+const deleting = ref(false)
+const deleteError = ref<string | null>(null)
+const cancelButton = ref<HTMLButtonElement>()
+
 const newText = ref('')
 const submitting = ref(false)
 
@@ -24,7 +36,31 @@ const summary = computed(() => {
   return `${items.completedCount()} of ${total} done.`
 })
 
-onMounted(load)
+watch(list, (value) => {
+  if (value) {
+    titleDraft.value = value.title
+    descriptionDraft.value = value.description
+  }
+})
+
+watch(confirmingDelete, async (open) => {
+  if (open) {
+    await nextTick()
+    cancelButton.value?.focus()
+  }
+})
+
+onMounted(() => {
+  void load()
+  window.addEventListener('keydown', onKeydown)
+})
+onBeforeUnmount(() => window.removeEventListener('keydown', onKeydown))
+
+function onKeydown(event: KeyboardEvent) {
+  if (event.key !== 'Escape') return
+  if (confirmingDelete.value) confirmingDelete.value = false
+  else if (menuOpen.value) menuOpen.value = false
+}
 
 async function load() {
   loadError.value = null
@@ -43,6 +79,60 @@ async function load() {
   }
 }
 
+async function patchList(fields: { title?: string; description?: string }) {
+  actionError.value = null
+  try {
+    const { list: updated } = await apiRequest<{ list: TodoList }>(`/lists/${listId}`, {
+      method: 'PATCH',
+      auth: true,
+      body: fields,
+    })
+    list.value = updated
+  } catch (e) {
+    actionError.value = e instanceof ApiError ? e.message : 'Could not save the change.'
+    if (list.value) {
+      titleDraft.value = list.value.title
+      descriptionDraft.value = list.value.description
+    }
+  }
+}
+
+function saveTitle() {
+  if (!list.value) return
+  const next = titleDraft.value.trim()
+  if (next === '') {
+    titleDraft.value = list.value.title // title is required
+    return
+  }
+  if (next !== list.value.title) void patchList({ title: next })
+}
+
+function saveDescription() {
+  if (!list.value) return
+  const next = descriptionDraft.value.trim()
+  if (next !== list.value.description) void patchList({ description: next })
+}
+
+function askDelete() {
+  menuOpen.value = false
+  deleteError.value = null
+  confirmingDelete.value = true
+}
+
+async function confirmDelete() {
+  deleting.value = true
+  deleteError.value = null
+  try {
+    await apiRequest(`/lists/${listId}`, { method: 'DELETE', auth: true })
+    lists.reset()
+    items.reset()
+    await router.push('/')
+  } catch (e) {
+    deleteError.value = e instanceof ApiError ? e.message : 'Could not delete the list.'
+    deleting.value = false
+  }
+}
+
 /** Run a store mutation, surfacing failures and resyncing from the server. */
 async function run(op: Promise<unknown>) {
   actionError.value = null
@@ -80,8 +170,56 @@ async function onCreate() {
     <p v-if="loadError" class="form-error">{{ loadError }}</p>
 
     <template v-else-if="list">
-      <h1>{{ list.title }}</h1>
-      <p v-if="list.description" class="muted">{{ list.description }}</p>
+      <div class="list-head">
+        <h1 class="list-head__title">
+          <input
+            v-model="titleDraft"
+            type="text"
+            maxlength="255"
+            aria-label="List title"
+            @blur="saveTitle"
+            @keyup.enter="($event.target as HTMLInputElement).blur()"
+          />
+        </h1>
+
+        <div class="menu">
+          <button
+            type="button"
+            class="menu__toggle"
+            aria-haspopup="true"
+            :aria-expanded="menuOpen"
+            @click="menuOpen = !menuOpen"
+          >
+            Manage &#9662;
+          </button>
+
+          <template v-if="menuOpen">
+            <div class="menu__backdrop" @click="menuOpen = false" />
+            <ul class="menu__list" role="menu">
+              <li role="none">
+                <button
+                  type="button"
+                  role="menuitem"
+                  class="menu__item menu__item--danger"
+                  @click="askDelete"
+                >
+                  Delete list
+                </button>
+              </li>
+            </ul>
+          </template>
+        </div>
+      </div>
+
+      <textarea
+        v-model="descriptionDraft"
+        class="list-head__desc"
+        rows="2"
+        maxlength="2000"
+        placeholder="Add a description"
+        aria-label="List description"
+        @blur="saveDescription"
+      />
 
       <p class="muted">{{ summary }}</p>
       <p v-if="actionError" class="form-error">{{ actionError }}</p>
@@ -120,4 +258,36 @@ async function onCreate() {
       </form>
     </template>
   </section>
+
+  <div
+    v-if="confirmingDelete"
+    class="modal"
+    role="dialog"
+    aria-modal="true"
+    aria-labelledby="confirm-delete-title"
+  >
+    <div class="modal__backdrop" @click="confirmingDelete = false" />
+    <div class="modal__dialog">
+      <h2 id="confirm-delete-title">Delete this list?</h2>
+      <p class="muted">
+        &ldquo;{{ list?.title }}&rdquo; and its {{ items.items.length }}
+        item{{ items.items.length === 1 ? '' : 's' }} will be permanently deleted.
+      </p>
+      <p v-if="deleteError" class="form-error">{{ deleteError }}</p>
+      <div class="modal__actions">
+        <button
+          ref="cancelButton"
+          type="button"
+          class="btn-secondary"
+          :disabled="deleting"
+          @click="confirmingDelete = false"
+        >
+          Cancel
+        </button>
+        <button type="button" class="btn-danger" :disabled="deleting" @click="confirmDelete">
+          {{ deleting ? 'Deleting…' : 'Delete list' }}
+        </button>
+      </div>
+    </div>
+  </div>
 </template>