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>
2026-09-03 19:10:31 +01:00
parent 8d0e0165bb
commit 3bf70504cc
3 changed files with 367 additions and 9 deletions
@@ -233,6 +233,188 @@ h1 {
  background: var(--bg);
 }

+/* --- list detail: header, inline title/description, manage menu -------- */
+
+.list-head {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.5rem;
+}
+
+.list-head__title {
+  flex: 1;
+  min-width: 0;
+  margin: 0 0 0.5rem;
+}
+
+.list-head__title input,
+.list-head__desc {
+  width: 100%;
+  font: inherit;
+  color: var(--text);
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: 6px;
+  padding: 0.25rem 0.4rem;
+}
+
+.list-head__title input {
+  font-size: 1.4rem;
+  font-weight: 600;
+}
+
+.list-head__desc {
+  display: block;
+  resize: vertical;
+  min-height: 2.75rem;
+  font-size: 0.95rem;
+  color: var(--muted);
+  margin-bottom: 0.75rem;
+}
+
+.list-head__title input:hover,
+.list-head__desc:hover {
+  border-color: var(--border);
+}
+
+.list-head__title input:focus,
+.list-head__desc:focus {
+  outline: none;
+  color: var(--text);
+  background: var(--bg);
+  border-color: var(--accent);
+}
+
+.menu {
+  position: relative;
+  flex: none;
+}
+
+.menu__toggle {
+  border: 1px solid var(--border);
+  background: var(--bg);
+  color: var(--text);
+  border-radius: 8px;
+  padding: 0.35rem 0.7rem;
+  font: inherit;
+  font-size: 0.9rem;
+  cursor: pointer;
+}
+
+.menu__toggle:hover {
+  border-color: var(--muted);
+}
+
+.menu__backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 10;
+}
+
+.menu__list {
+  position: absolute;
+  right: 0;
+  top: calc(100% + 4px);
+  z-index: 20;
+  min-width: 10rem;
+  margin: 0;
+  padding: 0.25rem;
+  list-style: none;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
+}
+
+.menu__item {
+  display: block;
+  width: 100%;
+  text-align: left;
+  border: none;
+  background: none;
+  color: var(--text);
+  font: inherit;
+  padding: 0.45rem 0.6rem;
+  border-radius: 6px;
+  cursor: pointer;
+}
+
+.menu__item:hover {
+  background: var(--bg);
+}
+
+.menu__item--danger {
+  color: var(--error);
+}
+
+/* --- confirmation modal --------------------------------------------------- */
+
+.modal {
+  position: fixed;
+  inset: 0;
+  z-index: 100;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1rem;
+}
+
+.modal__backdrop {
+  position: absolute;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.45);
+}
+
+.modal__dialog {
+  position: relative;
+  z-index: 1;
+  width: 100%;
+  max-width: 24rem;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  padding: 1.5rem;
+}
+
+.modal__dialog h2 {
+  margin: 0 0 0.5rem;
+  font-size: 1.15rem;
+}
+
+.modal__actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.6rem;
+  margin-top: 1.25rem;
+}
+
+.btn-secondary,
+.btn-danger {
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 0.5rem 0.9rem;
+  font: inherit;
+  font-size: 0.95rem;
+  cursor: pointer;
+}
+
+.btn-secondary {
+  background: var(--bg);
+  color: var(--text);
+}
+
+.btn-danger {
+  background: #b3261e;
+  border-color: #b3261e;
+  color: #fff;
+}
+
+.btn-secondary:disabled,
+.btn-danger:disabled {
+  opacity: 0.6;
+  cursor: default;
+}
+
 .form {
  display: grid;
  gap: 1rem;
@@ -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>