Merge pull request 'Major improvements, like deleting lists and list items' (#3) from dev into main

src/api/__tests__/lists.spec.ts

@@ -9,6 +9,8 @@ import {
   setListItemCompletedApi,
   addUserToListApi,
   removeUserFromListApi,
+  deleteListApi,
+  deleteListItemApi,
 } from '../lists'
 import { useAuthStore } from '@/stores/auth'
 import { API_BASE_URL } from '@/api/auth'
@@ -157,7 +159,7 @@ describe('lists API', () => {
     } as unknown as Response)
     global.fetch = fetchMock
 
-    await addUserToListApi({ list_id: 'list-1', user_id: 'user-1' })
+    await addUserToListApi({ list_id: 'list-1', email: 'user@example.com' })
 
     expect(fetchMock).toHaveBeenCalledWith(
       `${API_BASE_URL}/lists/user`,
@@ -172,11 +174,59 @@ describe('lists API', () => {
     } as unknown as Response)
     global.fetch = fetchMock
 
-    await removeUserFromListApi({ list_id: 'list-1', user_id: 'user-1' })
+    await removeUserFromListApi({ list_id: 'list-1', email: 'user@example.com' })
 
     expect(fetchMock).toHaveBeenCalledWith(
       `${API_BASE_URL}/lists/user`,
       expect.objectContaining({ method: 'DELETE' }),
     )
   })
+
+  it('deleteListApi sends DELETE to /lists/{id}', async () => {
+    const fetchMock = vi.fn<typeof fetch>().mockResolvedValueOnce({
+      ok: true,
+      status: 204,
+    } as unknown as Response)
+    global.fetch = fetchMock
+
+    await deleteListApi('list-1')
+
+    expect(fetchMock).toHaveBeenCalledWith(
+      `${API_BASE_URL}/lists/list-1`,
+      expect.objectContaining({ method: 'DELETE' }),
+    )
+  })
+
+  it('deleteListApi throws on failure', async () => {
+    global.fetch = vi.fn<typeof fetch>().mockResolvedValueOnce({
+      ok: false,
+      json: async () => ({ message: 'List not found' }),
+    } as unknown as Response)
+
+    await expect(deleteListApi('list-1')).rejects.toThrow('List not found')
+  })
+
+  it('deleteListItemApi sends DELETE to /lists/item/{id}', async () => {
+    const fetchMock = vi.fn<typeof fetch>().mockResolvedValueOnce({
+      ok: true,
+      status: 204,
+    } as unknown as Response)
+    global.fetch = fetchMock
+
+    await deleteListItemApi('item-1')
+
+    expect(fetchMock).toHaveBeenCalledWith(
+      `${API_BASE_URL}/lists/item/item-1`,
+      expect.objectContaining({ method: 'DELETE' }),
+    )
+  })
+
+  it('deleteListItemApi throws on failure', async () => {
+    global.fetch = vi.fn<typeof fetch>().mockResolvedValueOnce({
+      ok: false,
+      json: async () => ({ message: 'Item not found' }),
+    } as unknown as Response)
+
+    await expect(deleteListItemApi('item-1')).rejects.toThrow('Item not found')
+  })
 })

src/api/lists.ts

@@ -83,3 +83,17 @@ export async function removeUserFromListApi(payload: RemoveUserFromListPayload):
     throw new Error(await extractErrorMessage(response, 'Failed to remove user from list'))
   }
 }
+
+export async function deleteListApi(listId: string): Promise<void> {
+  const response = await apiClient.delete(`/lists/${listId}`)
+  if (!response.ok) {
+    throw new Error(await extractErrorMessage(response, 'Failed to delete list'))
+  }
+}
+
+export async function deleteListItemApi(itemId: string): Promise<void> {
+  const response = await apiClient.delete(`/lists/item/${itemId}`)
+  if (!response.ok) {
+    throw new Error(await extractErrorMessage(response, 'Failed to delete list item'))
+  }
+}

src/components/DeleteListModal.vue

@@ -0,0 +1,158 @@
+<script setup lang="ts">
+import { onMounted, onUnmounted } from 'vue'
+import type { LocalList } from '@/database/db'
+
+defineProps<{
+  list: LocalList
+}>()
+
+const emit = defineEmits<{
+  (e: 'close'): void
+  (e: 'confirm'): void
+}>()
+
+onMounted(() => {
+  document.addEventListener('keydown', handleKeydown)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('keydown', handleKeydown)
+})
+
+function handleKeydown(event: KeyboardEvent) {
+  if (event.key === 'Escape') {
+    handleClose()
+  }
+}
+
+function handleClose() {
+  emit('close')
+}
+
+function handleConfirm() {
+  emit('confirm')
+}
+</script>
+
+<template>
+  <div class="modal-overlay" @click.self="handleClose">
+    <div
+      class="modal-card card"
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="delete-modal-title"
+    >
+      <div class="modal-header">
+        <h3 id="delete-modal-title">Delete "{{ list.name }}"?</h3>
+        <button type="button" class="close-btn" aria-label="Close modal" @click="handleClose">
+          ✕
+        </button>
+      </div>
+
+      <p class="modal-description">
+        Are you sure you want to delete this list? This action cannot be undone and all items in this list will be deleted.
+      </p>
+
+      <div class="modal-footer">
+        <button type="button" class="btn btn-secondary cancel-btn" @click="handleClose">
+          Cancel
+        </button>
+        <button type="button" class="btn btn-danger confirm-delete-btn" @click="handleConfirm">
+          Delete list
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.modal-overlay {
+  position: fixed;
+  inset: 0;
+  background-color: rgba(0, 0, 0, 0.65);
+  backdrop-filter: blur(4px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1rem;
+  z-index: 100;
+  animation: fadeIn 0.15s ease-out;
+}
+
+.modal-card {
+  width: 100%;
+  max-width: 440px;
+  background-color: var(--c-bg-soft);
+  border: 1px solid var(--c-border-hover);
+  border-radius: var(--radius-lg);
+  padding: 1.25rem 1.4rem;
+  box-shadow: var(--shadow-md);
+  animation: slideUp 0.15s ease-out;
+}
+
+.modal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 0.5rem;
+}
+
+.modal-header h3 {
+  font-size: 1.1rem;
+  margin: 0;
+}
+
+.close-btn {
+  background: none;
+  border: none;
+  color: var(--c-text-soft);
+  font-size: 1.1rem;
+  cursor: pointer;
+  padding: 0.2rem 0.4rem;
+  border-radius: var(--radius-sm);
+  line-height: 1;
+}
+
+.close-btn:hover {
+  color: var(--c-heading);
+}
+
+.modal-description {
+  font-size: 0.85rem;
+  color: var(--c-text-soft);
+  margin-bottom: 1.25rem;
+  line-height: 1.4;
+}
+
+.modal-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.6rem;
+  margin-top: 1rem;
+}
+
+.modal-footer .btn {
+  width: auto;
+  padding: 0.5rem 1.2rem;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes slideUp {
+  from {
+    opacity: 0;
+    transform: translateY(8px) scale(0.98);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+</style>

src/components/ListCard.vue

@@ -7,14 +7,22 @@ import { useListsStore } from '@/stores/lists'
 const props = defineProps<{ list: LocalList }>()
 const emit = defineEmits<{
   (e: 'share', list: LocalList): void
+  (e: 'delete', list: LocalList): void
 }>()
 
 const listsStore = useListsStore()
 const isMenuOpen = ref(false)
 const menuContainerRef = ref<HTMLElement | null>(null)
 
+// The server now reports total_items/completed_items directly on the list,
+// so the overview can show progress without having to load every item of
+// every list. Fall back to counting locally cached items for lists that
+// haven't synced to the server yet (e.g. just created while offline).
 const items = computed(() => listsStore.itemsForList(props.list.id))
-const completedCount = computed(() => items.value.filter((item) => item.is_completed).length)
+const totalCount = computed(() => props.list.total_items ?? items.value.length)
+const completedCount = computed(
+  () => props.list.completed_items ?? items.value.filter((item) => item.is_completed).length,
+)
 
 function toggleMenu(event: Event) {
   event.preventDefault()
@@ -29,6 +37,13 @@ function handleShare(event: Event) {
   emit('share', props.list)
 }
 
+function handleDelete(event: Event) {
+  event.preventDefault()
+  event.stopPropagation()
+  isMenuOpen.value = false
+  emit('delete', props.list)
+}
+
 function handleClickOutside(event: MouseEvent) {
   if (menuContainerRef.value && !menuContainerRef.value.contains(event.target as Node)) {
     isMenuOpen.value = false
@@ -58,7 +73,7 @@ onUnmounted(() => {
       <div class="list-card-main">
         <h3>{{ list.name }}</h3>
         <p class="meta">
-          {{ completedCount }}/{{ items.length }} done
+          {{ completedCount }}/{{ totalCount }} done
           <span v-if="list.pendingSync" class="pending-tag">syncing…</span>
         </p>
       </div>
@@ -101,6 +116,28 @@ onUnmounted(() => {
           </svg>
           <span>Share list</span>
         </button>
+        <button
+          type="button"
+          class="submenu-item submenu-item-danger"
+          role="menuitem"
+          @click="handleDelete"
+        >
+          <svg
+            class="submenu-icon"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <polyline points="3 6 5 6 21 6" />
+            <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
+            <line x1="10" y1="11" x2="10" y2="17" />
+            <line x1="14" y1="11" x2="14" y2="17" />
+          </svg>
+          <span>Delete list</span>
+        </button>
       </div>
     </div>
   </div>
@@ -243,6 +280,15 @@ onUnmounted(() => {
   color: var(--c-accent-strong);
 }
 
+.submenu-item-danger {
+  color: var(--c-danger);
+}
+
+.submenu-item-danger:hover {
+  background-color: var(--c-danger-bg);
+  color: var(--c-danger);
+}
+
 .submenu-icon {
   width: 15px;
   height: 15px;

src/components/ListItemRow.vue

@@ -1,13 +1,18 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, onMounted, onUnmounted } from 'vue'
 import type { LocalListItem } from '@/database/db'
 import { useListsStore } from '@/stores/lists'
 
 const props = defineProps<{ item: LocalListItem }>()
+const emit = defineEmits<{
+  (e: 'delete', item: LocalListItem): void
+}>()
 
 const listsStore = useListsStore()
 const isEditing = ref(false)
 const editedTitle = ref(props.item.title)
+const isMenuOpen = ref(false)
+const menuContainerRef = ref<HTMLElement | null>(null)
 
 function toggleCompleted() {
   listsStore.setListItemCompleted(props.item.id, !props.item.is_completed)
@@ -25,6 +30,42 @@ function saveTitle() {
   }
   isEditing.value = false
 }
+
+function toggleMenu(event: Event) {
+  event.preventDefault()
+  event.stopPropagation()
+  isMenuOpen.value = !isMenuOpen.value
+}
+
+function handleDelete(event: Event) {
+  event.preventDefault()
+  event.stopPropagation()
+  isMenuOpen.value = false
+  emit('delete', props.item)
+  listsStore.deleteListItem(props.item.id)
+}
+
+function handleClickOutside(event: MouseEvent) {
+  if (menuContainerRef.value && !menuContainerRef.value.contains(event.target as Node)) {
+    isMenuOpen.value = false
+  }
+}
+
+function handleKeydown(event: KeyboardEvent) {
+  if (event.key === 'Escape' && isMenuOpen.value) {
+    isMenuOpen.value = false
+  }
+}
+
+onMounted(() => {
+  document.addEventListener('click', handleClickOutside)
+  document.addEventListener('keydown', handleKeydown)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('click', handleClickOutside)
+  document.removeEventListener('keydown', handleKeydown)
+})
 </script>
 
 <template>
@@ -50,6 +91,49 @@ function saveTitle() {
     <span v-else class="title" @click="startEditing">{{ item.title }}</span>
 
     <span v-if="item.pendingSync" class="pending-dot" title="Not yet synced"></span>
+
+    <div ref="menuContainerRef" class="menu-container">
+      <button
+        type="button"
+        class="menu-trigger-btn"
+        aria-label="Item options"
+        aria-haspopup="true"
+        :aria-expanded="isMenuOpen"
+        title="More options"
+        @click="toggleMenu"
+      >
+        <svg class="dots-icon" viewBox="0 0 24 24" width="18" height="18" fill="currentColor">
+          <circle cx="5" cy="12" r="2" />
+          <circle cx="12" cy="12" r="2" />
+          <circle cx="19" cy="12" r="2" />
+        </svg>
+      </button>
+
+      <div v-if="isMenuOpen" class="submenu-dropdown card" role="menu">
+        <button
+          type="button"
+          class="submenu-item submenu-item-danger"
+          role="menuitem"
+          @click="handleDelete"
+        >
+          <svg
+            class="submenu-icon"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <polyline points="3 6 5 6 21 6" />
+            <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
+            <line x1="10" y1="11" x2="10" y2="17" />
+            <line x1="14" y1="11" x2="14" y2="17" />
+          </svg>
+          <span>Delete item</span>
+        </button>
+      </div>
+    </div>
   </li>
 </template>
 
@@ -116,4 +200,103 @@ function saveTitle() {
   background-color: var(--c-warning);
   flex-shrink: 0;
 }
+
+.menu-container {
+  position: relative;
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+.menu-trigger-btn {
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: var(--radius-sm);
+  color: var(--c-text-soft);
+  cursor: pointer;
+  width: 28px;
+  height: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  transition:
+    background-color 0.15s ease-in-out,
+    color 0.15s ease-in-out,
+    border-color 0.15s ease-in-out;
+}
+
+.menu-trigger-btn:hover,
+.menu-trigger-btn[aria-expanded='true'] {
+  background-color: var(--c-bg-mute);
+  color: var(--c-heading);
+  border-color: var(--c-border);
+}
+
+.dots-icon {
+  display: block;
+}
+
+.submenu-dropdown {
+  position: absolute;
+  top: calc(100% + 6px);
+  right: 0;
+  z-index: 30;
+  min-width: 140px;
+  background-color: var(--c-bg-elevated);
+  border: 1px solid var(--c-border-hover);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-md);
+  padding: 0.35rem;
+  animation: dropdownIn 0.12s ease-out;
+}
+
+.submenu-item {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  width: 100%;
+  padding: 0.5rem 0.65rem;
+  background: transparent;
+  border: none;
+  border-radius: var(--radius-sm);
+  color: var(--c-heading);
+  font-size: 0.85rem;
+  cursor: pointer;
+  text-align: left;
+  transition:
+    background-color 0.15s ease-in-out,
+    color 0.15s ease-in-out;
+}
+
+.submenu-item:hover {
+  background-color: var(--c-bg-mute);
+  color: var(--c-accent-strong);
+}
+
+.submenu-item-danger {
+  color: var(--c-danger);
+}
+
+.submenu-item-danger:hover {
+  background-color: var(--c-danger-bg);
+  color: var(--c-danger);
+}
+
+.submenu-icon {
+  width: 15px;
+  height: 15px;
+  flex-shrink: 0;
+}
+
+@keyframes dropdownIn {
+  from {
+    opacity: 0;
+    transform: translateY(-4px) scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
 </style>

src/components/ShareListModal.vue

@@ -0,0 +1,224 @@
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, nextTick } from 'vue'
+import type { LocalList } from '@/database/db'
+import { useListsStore } from '@/stores/lists'
+
+const props = defineProps<{
+  list: LocalList
+}>()
+
+const emit = defineEmits<{
+  (e: 'close'): void
+}>()
+
+const listsStore = useListsStore()
+
+const emailInput = ref<HTMLInputElement | null>(null)
+const newEmail = ref('')
+const isSubmitting = ref(false)
+const error = ref('')
+const successMessage = ref('')
+
+onMounted(() => {
+  document.addEventListener('keydown', handleKeydown)
+  nextTick(() => {
+    emailInput.value?.focus()
+  })
+})
+
+onUnmounted(() => {
+  document.removeEventListener('keydown', handleKeydown)
+})
+
+function handleKeydown(event: KeyboardEvent) {
+  if (event.key === 'Escape') {
+    handleClose()
+  }
+}
+
+function handleClose() {
+  emit('close')
+}
+
+async function handleAddUser() {
+  const email = newEmail.value.trim()
+  if (!email) return
+
+  error.value = ''
+  successMessage.value = ''
+  isSubmitting.value = true
+
+  try {
+    await listsStore.addUserToList(props.list.id, email)
+    newEmail.value = ''
+    successMessage.value = `Shared with "${email}"!`
+  } catch (err) {
+    error.value = err instanceof Error ? err.message : 'Failed to share list'
+  } finally {
+    isSubmitting.value = false
+  }
+}
+</script>
+
+<template>
+  <div class="modal-overlay" @click.self="handleClose">
+    <div
+      class="modal-card card"
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="share-modal-title"
+    >
+      <div class="modal-header">
+        <h3 id="share-modal-title">Share "{{ list.name }}"</h3>
+        <button type="button" class="close-btn" aria-label="Close modal" @click="handleClose">
+          ✕
+        </button>
+      </div>
+
+      <p class="modal-description">Enter an email to invite them to collaborate on this list.</p>
+
+      <form class="share-form" @submit.prevent="handleAddUser">
+        <div class="field">
+          <input
+            ref="emailInput"
+            v-model="newEmail"
+            type="email"
+            placeholder="Email"
+            :disabled="isSubmitting"
+          />
+        </div>
+        <button
+          type="submit"
+          class="btn btn-primary share-btn"
+          :disabled="isSubmitting || !newEmail.trim()"
+        >
+          Add
+        </button>
+      </form>
+
+      <p v-if="error" class="banner banner-error">{{ error }}</p>
+      <p v-if="successMessage" class="banner banner-success">{{ successMessage }}</p>
+
+      <div class="modal-footer">
+        <button type="button" class="btn btn-secondary" @click="handleClose">Done</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.modal-overlay {
+  position: fixed;
+  inset: 0;
+  background-color: rgba(0, 0, 0, 0.65);
+  backdrop-filter: blur(4px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1rem;
+  z-index: 100;
+  animation: fadeIn 0.15s ease-out;
+}
+
+.modal-card {
+  width: 100%;
+  max-width: 440px;
+  background-color: var(--c-bg-soft);
+  border: 1px solid var(--c-border-hover);
+  border-radius: var(--radius-lg);
+  padding: 1.25rem 1.4rem;
+  box-shadow: var(--shadow-md);
+  animation: slideUp 0.15s ease-out;
+}
+
+.modal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 0.5rem;
+}
+
+.modal-header h3 {
+  font-size: 1.1rem;
+  margin: 0;
+}
+
+.close-btn {
+  background: none;
+  border: none;
+  color: var(--c-text-soft);
+  font-size: 1.1rem;
+  cursor: pointer;
+  padding: 0.2rem 0.4rem;
+  border-radius: var(--radius-sm);
+  line-height: 1;
+}
+
+.close-btn:hover {
+  color: var(--c-heading);
+}
+
+.modal-description {
+  font-size: 0.85rem;
+  color: var(--c-text-soft);
+  margin-bottom: 1rem;
+}
+
+.share-form {
+  display: flex;
+  gap: 0.6rem;
+  margin-bottom: 1rem;
+}
+
+.share-form .field {
+  flex: 1;
+}
+
+.share-btn {
+  width: auto;
+  flex-shrink: 0;
+  padding: 0.65rem 1.2rem;
+}
+
+.modal-footer {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 1rem;
+}
+
+.modal-footer .btn {
+  width: auto;
+  padding: 0.5rem 1.2rem;
+}
+
+.banner-success {
+  background-color: rgba(52, 211, 153, 0.12);
+  border: 1px solid rgba(52, 211, 153, 0.4);
+  color: var(--c-success);
+  margin-top: 0.75rem;
+}
+
+.banner-error {
+  margin-top: 0.75rem;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes slideUp {
+  from {
+    opacity: 0;
+    transform: translateY(8px) scale(0.98);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+</style>

src/components/__tests__/DeleteListModal.spec.ts

@@ -0,0 +1,70 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import DeleteListModal from '../DeleteListModal.vue'
+import type { LocalList } from '@/database/db'
+
+describe('DeleteListModal', () => {
+  const sampleList: LocalList = {
+    id: 'list-123',
+    name: 'Groceries',
+    created_at: '2026-08-21T00:00:00.000Z',
+    modified_at: '2026-08-21T00:00:00.000Z',
+  }
+
+  it('renders modal with list name and confirmation prompt', () => {
+    const wrapper = mount(DeleteListModal, {
+      props: {
+        list: sampleList,
+      },
+    })
+
+    expect(wrapper.text()).toContain('Delete "Groceries"?')
+    expect(wrapper.text()).toContain('Are you sure you want to delete this list?')
+    expect(wrapper.find('.confirm-delete-btn').text()).toBe('Delete list')
+    expect(wrapper.find('.cancel-btn').text()).toBe('Cancel')
+  })
+
+  it('emits confirm event when Delete button is clicked', async () => {
+    const wrapper = mount(DeleteListModal, {
+      props: {
+        list: sampleList,
+      },
+    })
+
+    await wrapper.find('.confirm-delete-btn').trigger('click')
+    expect(wrapper.emitted('confirm')).toBeTruthy()
+  })
+
+  it('emits close event when Cancel button is clicked', async () => {
+    const wrapper = mount(DeleteListModal, {
+      props: {
+        list: sampleList,
+      },
+    })
+
+    await wrapper.find('.cancel-btn').trigger('click')
+    expect(wrapper.emitted('close')).toBeTruthy()
+  })
+
+  it('emits close event when close icon button is clicked', async () => {
+    const wrapper = mount(DeleteListModal, {
+      props: {
+        list: sampleList,
+      },
+    })
+
+    await wrapper.find('.close-btn').trigger('click')
+    expect(wrapper.emitted('close')).toBeTruthy()
+  })
+
+  it('emits close event when clicking overlay background', async () => {
+    const wrapper = mount(DeleteListModal, {
+      props: {
+        list: sampleList,
+      },
+    })
+
+    await wrapper.find('.modal-overlay').trigger('click')
+    expect(wrapper.emitted('close')).toBeTruthy()
+  })
+})

src/components/__tests__/ListCard.spec.ts

@@ -0,0 +1,112 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { createPinia, setActivePinia } from 'pinia'
+import ListCard from '../ListCard.vue'
+import type { LocalList } from '@/database/db'
+
+describe('ListCard', () => {
+  const sampleList: LocalList = {
+    id: 'list-123',
+    name: 'Groceries',
+    created_at: '2026-08-21T00:00:00.000Z',
+    modified_at: '2026-08-21T00:00:00.000Z',
+  }
+
+  beforeEach(() => {
+    setActivePinia(createPinia())
+    vi.restoreAllMocks()
+  })
+
+  it('renders list name and options button', () => {
+    const wrapper = mount(ListCard, {
+      props: {
+        list: sampleList,
+      },
+      global: {
+        stubs: {
+          RouterLink: {
+            template: '<a :href="to"><slot /></a>',
+            props: ['to'],
+          },
+        },
+      },
+    })
+
+    expect(wrapper.text()).toContain('Groceries')
+    expect(wrapper.find('.menu-trigger-btn').exists()).toBe(true)
+    expect(wrapper.find('.submenu-dropdown').exists()).toBe(false)
+  })
+
+  it('toggles dropdown submenu when options button is clicked', async () => {
+    const wrapper = mount(ListCard, {
+      props: {
+        list: sampleList,
+      },
+      global: {
+        stubs: {
+          RouterLink: {
+            template: '<a :href="to"><slot /></a>',
+            props: ['to'],
+          },
+        },
+      },
+    })
+
+    await wrapper.find('.menu-trigger-btn').trigger('click')
+    expect(wrapper.find('.submenu-dropdown').exists()).toBe(true)
+    expect(wrapper.find('.submenu-item').text()).toContain('Share list')
+
+    await wrapper.find('.menu-trigger-btn').trigger('click')
+    expect(wrapper.find('.submenu-dropdown').exists()).toBe(false)
+  })
+
+  it('emits share event when Share list is clicked in submenu', async () => {
+    const wrapper = mount(ListCard, {
+      props: {
+        list: sampleList,
+      },
+      global: {
+        stubs: {
+          RouterLink: {
+            template: '<a :href="to"><slot /></a>',
+            props: ['to'],
+          },
+        },
+      },
+    })
+
+    await wrapper.find('.menu-trigger-btn').trigger('click')
+    await wrapper.find('.submenu-item').trigger('click')
+
+    expect(wrapper.emitted('share')).toBeTruthy()
+    expect(wrapper.emitted('share')?.[0]).toEqual([sampleList])
+    expect(wrapper.find('.submenu-dropdown').exists()).toBe(false)
+  })
+
+  it('emits delete event when Delete list is clicked in submenu', async () => {
+    const wrapper = mount(ListCard, {
+      props: {
+        list: sampleList,
+      },
+      global: {
+        stubs: {
+          RouterLink: {
+            template: '<a :href="to"><slot /></a>',
+            props: ['to'],
+          },
+        },
+      },
+    })
+
+    await wrapper.find('.menu-trigger-btn').trigger('click')
+    const deleteBtn = wrapper.find('.submenu-item-danger')
+    expect(deleteBtn.exists()).toBe(true)
+    expect(deleteBtn.text()).toContain('Delete list')
+
+    await deleteBtn.trigger('click')
+
+    expect(wrapper.emitted('delete')).toBeTruthy()
+    expect(wrapper.emitted('delete')?.[0]).toEqual([sampleList])
+    expect(wrapper.find('.submenu-dropdown').exists()).toBe(false)
+  })
+})

src/components/__tests__/ListItemRow.spec.ts

@@ -0,0 +1,72 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { createPinia, setActivePinia } from 'pinia'
+import ListItemRow from '../ListItemRow.vue'
+import { useListsStore } from '@/stores/lists'
+import type { LocalListItem } from '@/database/db'
+
+describe('ListItemRow', () => {
+  const sampleItem: LocalListItem = {
+    id: 'item-1',
+    list_id: 'list-1',
+    title: 'Apples',
+    is_completed: false,
+    created_at: '2026-08-21T00:00:00.000Z',
+    modified_at: '2026-08-21T00:00:00.000Z',
+  }
+
+  beforeEach(() => {
+    setActivePinia(createPinia())
+    vi.restoreAllMocks()
+  })
+
+  it('renders item title and options menu button', () => {
+    const wrapper = mount(ListItemRow, {
+      props: {
+        item: sampleItem,
+      },
+    })
+
+    expect(wrapper.text()).toContain('Apples')
+    expect(wrapper.find('.menu-trigger-btn').exists()).toBe(true)
+    expect(wrapper.find('.submenu-dropdown').exists()).toBe(false)
+  })
+
+  it('toggles dropdown when menu button is clicked', async () => {
+    const wrapper = mount(ListItemRow, {
+      props: {
+        item: sampleItem,
+      },
+    })
+
+    await wrapper.find('.menu-trigger-btn').trigger('click')
+    expect(wrapper.find('.submenu-dropdown').exists()).toBe(true)
+    expect(wrapper.find('.submenu-item-danger').text()).toContain('Delete item')
+
+    await wrapper.find('.menu-trigger-btn').trigger('click')
+    expect(wrapper.find('.submenu-dropdown').exists()).toBe(false)
+  })
+
+  it('deletes item when Delete item is clicked in submenu', async () => {
+    const wrapper = mount(ListItemRow, {
+      props: {
+        item: sampleItem,
+      },
+    })
+
+    const listsStore = useListsStore()
+    const deleteSpy = vi.spyOn(listsStore, 'deleteListItem').mockResolvedValue()
+
+    // 1st click: open menu
+    await wrapper.find('.menu-trigger-btn').trigger('click')
+    expect(wrapper.find('.submenu-dropdown').exists()).toBe(true)
+
+    // 2nd click: delete item
+    await wrapper.find('.submenu-item-danger').trigger('click')
+
+    expect(deleteSpy).toHaveBeenCalledWith('item-1')
+    expect(wrapper.emitted('delete')).toBeTruthy()
+    expect(wrapper.emitted('delete')?.[0]).toEqual([sampleItem])
+    expect(wrapper.find('.submenu-dropdown').exists()).toBe(false)
+  })
+})

src/components/__tests__/ShareListModal.spec.ts

@@ -0,0 +1,87 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { createPinia, setActivePinia } from 'pinia'
+import ShareListModal from '../ShareListModal.vue'
+import { useListsStore } from '@/stores/lists'
+import type { LocalList } from '@/database/db'
+
+describe('ShareListModal', () => {
+  const sampleList: LocalList = {
+    id: 'list-123',
+    name: 'Groceries',
+    created_at: '2026-08-21T00:00:00.000Z',
+    modified_at: '2026-08-21T00:00:00.000Z',
+  }
+
+  beforeEach(() => {
+    setActivePinia(createPinia())
+    vi.restoreAllMocks()
+  })
+
+  it('renders modal with list name and user input', () => {
+    const wrapper = mount(ShareListModal, {
+      props: {
+        list: sampleList,
+      },
+    })
+
+    expect(wrapper.text()).toContain('Share "Groceries"')
+    expect(wrapper.find('input[placeholder="Email"]').exists()).toBe(true)
+    expect(wrapper.find('button[type="submit"]').text()).toBe('Add')
+  })
+
+  it('submits form to share list with an email', async () => {
+    const listsStore = useListsStore()
+    const addSpy = vi.spyOn(listsStore, 'addUserToList').mockResolvedValueOnce()
+
+    const wrapper = mount(ShareListModal, {
+      props: {
+        list: sampleList,
+      },
+    })
+
+    await wrapper.find('input').setValue('user@example.com')
+    await wrapper.find('form').trigger('submit.prevent')
+
+    expect(addSpy).toHaveBeenCalledWith('list-123', 'user@example.com')
+    expect(wrapper.find('.banner-success').text()).toContain('Shared with "user@example.com"!')
+  })
+
+  it('displays error banner when sharing fails', async () => {
+    const listsStore = useListsStore()
+    vi.spyOn(listsStore, 'addUserToList').mockRejectedValueOnce(new Error('User not found'))
+
+    const wrapper = mount(ShareListModal, {
+      props: {
+        list: sampleList,
+      },
+    })
+
+    await wrapper.find('input').setValue('bad@example.com')
+    await wrapper.find('form').trigger('submit.prevent')
+
+    expect(wrapper.find('.banner-error').text()).toContain('User not found')
+  })
+
+  it('emits close event when close button is clicked', async () => {
+    const wrapper = mount(ShareListModal, {
+      props: {
+        list: sampleList,
+      },
+    })
+
+    await wrapper.find('.close-btn').trigger('click')
+    expect(wrapper.emitted('close')).toBeTruthy()
+  })
+
+  it('emits close event when Done button is clicked', async () => {
+    const wrapper = mount(ShareListModal, {
+      props: {
+        list: sampleList,
+      },
+    })
+
+    await wrapper.find('.modal-footer .btn').trigger('click')
+    expect(wrapper.emitted('close')).toBeTruthy()
+  })
+})

src/database/db.ts

@@ -16,6 +16,8 @@ export type SyncOperationType =
   | 'setListItemCompleted'
   | 'addUserToList'
   | 'removeUserFromList'
+  | 'deleteList'
+  | 'deleteListItem'
 
 export interface SyncQueueEntry {
   id?: number

src/stores/__tests__/lists.spec.ts

@@ -92,6 +92,8 @@ const listsApiMocks = vi.hoisted(() => ({
   setListItemCompletedApi: vi.fn<() => Promise<unknown>>(),
   addUserToListApi: vi.fn<() => Promise<unknown>>(),
   removeUserFromListApi: vi.fn<() => Promise<unknown>>(),
+  deleteListApi: vi.fn<() => Promise<unknown>>(),
+  deleteListItemApi: vi.fn<() => Promise<unknown>>(),
 }))
 
 vi.mock('@/api/lists', () => listsApiMocks)
@@ -235,16 +237,30 @@ describe('useListsStore', () => {
     expect(updated?.pendingSync).toBe(false)
   })
 
-  it('pulls lists and items from the server and merges them locally', async () => {
-    listsApiMocks.getListsApi.mockResolvedValueOnce([{ id: 'server-list-1', name: 'Groceries' }])
-    listsApiMocks.getListItemsApi.mockResolvedValueOnce([
-      { id: 'server-item-1', list_id: 'server-list-1', title: 'Milk', is_completed: false },
+  it('pulls lists from the server, including total/completed item counts, without fetching every item', async () => {
+    listsApiMocks.getListsApi.mockResolvedValueOnce([
+      { id: 'server-list-1', name: 'Groceries', total_items: 3, completed_items: 1 },
     ])
 
     const store = useListsStore()
     await store.pullFromServer()
 
-    expect(store.lists.find((list) => list.id === 'server-list-1')).toBeDefined()
+    const pulledList = store.lists.find((list) => list.id === 'server-list-1')
+    expect(pulledList).toBeDefined()
+    expect(pulledList?.total_items).toBe(3)
+    expect(pulledList?.completed_items).toBe(1)
+    expect(listsApiMocks.getListItemsApi).not.toHaveBeenCalled()
+  })
+
+  it('pulls the items of a single list on demand via pullListItems', async () => {
+    listsApiMocks.getListItemsApi.mockResolvedValueOnce([
+      { id: 'server-item-1', list_id: 'server-list-1', title: 'Milk', is_completed: false },
+    ])
+
+    const store = useListsStore()
+    await store.pullListItems('server-list-1')
+
+    expect(listsApiMocks.getListItemsApi).toHaveBeenCalledWith('server-list-1')
     expect(store.listItems.find((item) => item.id === 'server-item-1')).toBeDefined()
   })
 
@@ -262,4 +278,45 @@ describe('useListsStore', () => {
     expect(stillLocal?.name).toBe('Local only')
     expect(stillLocal?.pendingSync).toBe(true)
   })
+
+  it('deletes a list locally and syncs deletion to the server', async () => {
+    listsApiMocks.deleteListApi.mockResolvedValueOnce(undefined)
+
+    const store = useListsStore()
+    await fakeDb.lists.put({ id: 'list-to-delete', name: 'Delete Me' })
+    await fakeDb.listItems.put({ id: 'item-in-list', list_id: 'list-to-delete', title: 'Item' })
+    await store.refresh()
+
+    expect(store.lists.find((l) => l.id === 'list-to-delete')).toBeDefined()
+    expect(store.listItems.find((i) => i.id === 'item-in-list')).toBeDefined()
+
+    await store.deleteList('list-to-delete')
+
+    expect(store.lists.find((l) => l.id === 'list-to-delete')).toBeUndefined()
+    expect(store.listItems.find((i) => i.id === 'item-in-list')).toBeUndefined()
+
+    await store.sync()
+
+    expect(listsApiMocks.deleteListApi).toHaveBeenCalledWith('list-to-delete')
+    expect(store.pendingCount).toBe(0)
+  })
+
+  it('deletes a list item locally and syncs deletion to the server', async () => {
+    listsApiMocks.deleteListItemApi.mockResolvedValueOnce(undefined)
+
+    const store = useListsStore()
+    await fakeDb.listItems.put({ id: 'item-to-delete', list_id: 'list-1', title: 'Delete Me' })
+    await store.refresh()
+
+    expect(store.listItems.find((i) => i.id === 'item-to-delete')).toBeDefined()
+
+    await store.deleteListItem('item-to-delete')
+
+    expect(store.listItems.find((i) => i.id === 'item-to-delete')).toBeUndefined()
+
+    await store.sync()
+
+    expect(listsApiMocks.deleteListItemApi).toHaveBeenCalledWith('item-to-delete')
+    expect(store.pendingCount).toBe(0)
+  })
 })

src/stores/lists.ts

@@ -10,6 +10,8 @@ import {
   setListItemCompletedApi,
   addUserToListApi,
   removeUserFromListApi,
+  deleteListApi,
+  deleteListItemApi,
 } from '@/api/lists'
 
 function generateId(): string {
@@ -142,26 +144,52 @@ export const useListsStore = defineStore('lists', () => {
     void sync()
   }
 
-  async function addUserToList(listId: string, userId: string) {
+  async function addUserToList(listId: string, email: string) {
     await enqueue({
       type: 'addUserToList',
-      payload: { list_id: listId, user_id: userId },
+      payload: { list_id: listId, email },
       localListId: listId,
     })
     await refresh()
     void sync()
   }
 
-  async function removeUserFromList(listId: string, userId: string) {
+  async function removeUserFromList(listId: string, email: string) {
     await enqueue({
       type: 'removeUserFromList',
-      payload: { list_id: listId, user_id: userId },
+      payload: { list_id: listId, email },
       localListId: listId,
     })
     await refresh()
     void sync()
   }
 
+  async function deleteList(listId: string) {
+    await db.lists.delete(listId)
+    const affectedItems = await db.listItems.where('list_id').equals(listId).toArray()
+    for (const item of affectedItems) {
+      await db.listItems.delete(item.id)
+    }
+    await enqueue({
+      type: 'deleteList',
+      payload: { id: listId },
+      localListId: listId,
+    })
+    await refresh()
+    void sync()
+  }
+
+  async function deleteListItem(itemId: string) {
+    await db.listItems.delete(itemId)
+    await enqueue({
+      type: 'deleteListItem',
+      payload: { id: itemId },
+      localListItemId: itemId,
+    })
+    await refresh()
+    void sync()
+  }
+
   // Remaps a client-generated temporary list id to the id assigned by the
   // server once the "createList" sync operation succeeds. This keeps any
   // items or queued operations referencing the temporary id consistent.
@@ -183,10 +211,14 @@ export const useListsStore = defineStore('lists', () => {
       .filter((entry) => entry.localListId === oldId)
       .toArray()
     for (const entry of affectedQueueEntries) {
-      const payload = entry.payload as { list_id?: string }
+      const payload = entry.payload as { list_id?: string; id?: string }
       await db.syncQueue.update(entry.id!, {
         localListId: newId,
-        payload: payload?.list_id ? { ...payload, list_id: newId } : entry.payload,
+        payload: payload?.list_id
+          ? { ...payload, list_id: newId }
+          : payload?.id
+            ? { ...payload, id: newId }
+            : entry.payload,
       })
     }
   }
@@ -208,10 +240,14 @@ export const useListsStore = defineStore('lists', () => {
       .filter((queueEntry) => queueEntry.localListItemId === oldId)
       .toArray()
     for (const queueEntry of affectedQueueEntries) {
-      const payload = queueEntry.payload as { list_item_id?: string }
+      const payload = queueEntry.payload as { list_item_id?: string; id?: string }
       await db.syncQueue.update(queueEntry.id!, {
         localListItemId: newId,
-        payload: payload?.list_item_id ? { ...payload, list_item_id: newId } : queueEntry.payload,
+        payload: payload?.list_item_id
+          ? { ...payload, list_item_id: newId }
+          : payload?.id
+            ? { ...payload, id: newId }
+            : queueEntry.payload,
       })
     }
   }
@@ -255,11 +291,21 @@ export const useListsStore = defineStore('lists', () => {
         break
       }
       case 'addUserToList': {
-        await addUserToListApi(entry.payload as { list_id: string; user_id: string })
+        await addUserToListApi(entry.payload as { list_id: string; email: string })
         break
       }
       case 'removeUserFromList': {
-        await removeUserFromListApi(entry.payload as { list_id: string; user_id: string })
+        await removeUserFromListApi(entry.payload as { list_id: string; email: string })
+        break
+      }
+      case 'deleteList': {
+        const payload = entry.payload as { id: string }
+        await deleteListApi(payload.id)
+        break
+      }
+      case 'deleteListItem': {
+        const payload = entry.payload as { id: string }
+        await deleteListItemApi(payload.id)
         break
       }
     }
@@ -317,9 +363,14 @@ export const useListsStore = defineStore('lists', () => {
     }
   }
 
-  // Pulls the authoritative lists/items from the server and merges them into
-  // local storage. Entries that still have local unsynced changes
-  // (pendingSync) are left untouched so we never clobber pending edits.
+  // Pulls the authoritative lists from the server and merges them into local
+  // storage. Entries that still have local unsynced changes (pendingSync)
+  // are left untouched so we never clobber pending edits.
+  //
+  // This no longer eagerly fetches every item of every list: the server now
+  // reports total_items/completed_items directly on each list, which is all
+  // the overview page needs. Items for a specific list are only pulled on
+  // demand via pullListItems (e.g. when opening its detail view).
   async function pullFromServer(): Promise<void> {
     if (typeof navigator !== 'undefined' && !navigator.onLine) return
 
@@ -331,18 +382,6 @@ export const useListsStore = defineStore('lists', () => {
         if (!existingList || !existingList.pendingSync) {
           await db.lists.put({ ...serverList, pendingSync: false })
         }
-
-        try {
-          const serverItems = await getListItemsApi(serverList.id)
-          for (const serverItem of serverItems) {
-            const existingItem = await db.listItems.get(serverItem.id)
-            if (!existingItem || !existingItem.pendingSync) {
-              await db.listItems.put({ ...serverItem, pendingSync: false })
-            }
-          }
-        } catch {
-          // Ignore per-list failures so one broken list doesn't block the rest.
-        }
       }
     } catch (err) {
       error.value = err instanceof Error ? err.message : 'Failed to load lists from server'
@@ -351,6 +390,34 @@ export const useListsStore = defineStore('lists', () => {
     }
   }
 
+  // Pulls the authoritative items of a single list from the server and
+  // merges them into local storage. Used by the list detail view, which is
+  // the only place that needs the full item set for a list.
+  async function pullListItems(listId: string): Promise<void> {
+    if (typeof navigator !== 'undefined' && !navigator.onLine) return
+
+    try {
+      const serverItems = await getListItemsApi(listId)
+      for (const serverItem of serverItems) {
+        const existingItem = await db.listItems.get(serverItem.id)
+        if (!existingItem || !existingItem.pendingSync) {
+          await db.listItems.put({ ...serverItem, pendingSync: false })
+        }
+      }
+    } catch (err) {
+      error.value = err instanceof Error ? err.message : 'Failed to load list items from server'
+    } finally {
+      await refresh()
+    }
+  }
+
+  async function loadListItems(listId: string) {
+    if (!isLoaded.value) {
+      await refresh()
+    }
+    void pullListItems(listId)
+  }
+
   return {
     lists,
     listItems,
@@ -361,6 +428,7 @@ export const useListsStore = defineStore('lists', () => {
     error,
     itemsForList,
     loadLists,
+    loadListItems,
     refresh,
     createList,
     createListItem,
@@ -368,7 +436,10 @@ export const useListsStore = defineStore('lists', () => {
     setListItemCompleted,
     addUserToList,
     removeUserFromList,
+    deleteList,
+    deleteListItem,
     sync,
     pullFromServer,
+    pullListItems,
   }
 })

src/types/list.ts

@@ -3,6 +3,8 @@ export interface List {
   name: string
   created_at?: string
   modified_at?: string
+  total_items?: number
+  completed_items?: number
 }
 
 export interface ListItem {
@@ -36,10 +38,10 @@ export interface SetListItemCompletedPayload {
 
 export interface AddUserToListPayload {
   list_id: string
-  user_id: string
+  email: string
 }
 
 export interface RemoveUserFromListPayload {
   list_id: string
-  user_id: string
+  email: string
 }

src/views/ListDetailView.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
-import { ref, computed, onMounted } from 'vue'
+import { ref, computed, onMounted, onUnmounted } from 'vue'
 import { useRouter } from 'vue-router'
 import { useListsStore } from '@/stores/lists'
 import ListItemRow from '@/components/ListItemRow.vue'
+import DeleteListModal from '@/components/DeleteListModal.vue'
 
 const props = defineProps<{ id: string }>()
 
@@ -12,9 +13,32 @@ const listsStore = useListsStore()
 const newItemTitle = ref('')
 const isAddingItem = ref(false)
 const itemError = ref('')
+const isMenuOpen = ref(false)
+const showDeleteModal = ref(false)
+const menuContainerRef = ref<HTMLElement | null>(null)
+
+function handleClickOutside(event: MouseEvent) {
+  if (menuContainerRef.value && !menuContainerRef.value.contains(event.target as Node)) {
+    isMenuOpen.value = false
+  }
+}
+
+function handleKeydown(event: KeyboardEvent) {
+  if (event.key === 'Escape' && isMenuOpen.value) {
+    isMenuOpen.value = false
+  }
+}
 
 onMounted(() => {
   listsStore.loadLists()
+  listsStore.loadListItems(props.id)
+  document.addEventListener('click', handleClickOutside)
+  document.addEventListener('keydown', handleKeydown)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('click', handleClickOutside)
+  document.removeEventListener('keydown', handleKeydown)
 })
 
 const list = computed(() => listsStore.lists.find((entry) => entry.id === props.id))
@@ -22,6 +46,32 @@ const items = computed(() => listsStore.itemsForList(props.id))
 const pendingItems = computed(() => items.value.filter((item) => !item.is_completed))
 const completedItems = computed(() => items.value.filter((item) => item.is_completed))
 
+function toggleMenu(event: Event) {
+  event.preventDefault()
+  event.stopPropagation()
+  isMenuOpen.value = !isMenuOpen.value
+}
+
+function handleOpenDelete() {
+  isMenuOpen.value = false
+  showDeleteModal.value = true
+}
+
+function handleCloseDelete() {
+  showDeleteModal.value = false
+}
+
+async function handleConfirmDelete() {
+  if (!list.value) return
+  showDeleteModal.value = false
+  try {
+    await listsStore.deleteList(list.value.id)
+    router.push('/')
+  } catch (err) {
+    itemError.value = err instanceof Error ? err.message : 'Failed to delete list'
+  }
+}
+
 async function handleAddItem() {
   const title = newItemTitle.value.trim()
   if (!title) return
@@ -44,7 +94,52 @@ async function handleAddItem() {
     <button type="button" class="back-link" @click="router.push('/')">‹ Lists</button>
 
     <template v-if="list">
+      <div class="list-header">
         <h1>{{ list.name }}</h1>
+
+        <div ref="menuContainerRef" class="menu-container">
+          <button
+            type="button"
+            class="menu-trigger-btn"
+            aria-label="List options"
+            aria-haspopup="true"
+            :aria-expanded="isMenuOpen"
+            title="More options"
+            @click="toggleMenu"
+          >
+            <svg class="dots-icon" viewBox="0 0 24 24" width="18" height="18" fill="currentColor">
+              <circle cx="5" cy="12" r="2" />
+              <circle cx="12" cy="12" r="2" />
+              <circle cx="19" cy="12" r="2" />
+            </svg>
+          </button>
+
+          <div v-if="isMenuOpen" class="submenu-dropdown card" role="menu">
+            <button
+              type="button"
+              class="submenu-item submenu-item-danger"
+              role="menuitem"
+              @click="handleOpenDelete"
+            >
+              <svg
+                class="submenu-icon"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              >
+                <polyline points="3 6 5 6 21 6" />
+                <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
+                <line x1="10" y1="11" x2="10" y2="17" />
+                <line x1="14" y1="11" x2="14" y2="17" />
+              </svg>
+              <span>Delete list</span>
+            </button>
+          </div>
+        </div>
+      </div>
       <p v-if="list.pendingSync" class="pending-note">This list hasn't synced to the server yet.</p>
 
       <form class="new-item-form" @submit.prevent="handleAddItem">
@@ -81,6 +176,13 @@ async function handleAddItem() {
       </section>
 
       <p v-if="items.length === 0" class="empty-hint">No items yet — add your first one above.</p>
+
+      <DeleteListModal
+        v-if="showDeleteModal && list"
+        :list="list"
+        @close="handleCloseDelete"
+        @confirm="handleConfirmDelete"
+      />
     </template>
 
     <p v-else class="empty-hint">List not found on this device.</p>
@@ -98,11 +200,22 @@ async function handleAddItem() {
   cursor: pointer;
 }
 
-h1 {
-  font-size: 1.35rem;
+.list-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
   margin-bottom: 0.5rem;
 }
 
+.list-header h1 {
+  font-size: 1.35rem;
+  margin: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .pending-note {
   font-size: 0.8rem;
   color: var(--c-warning);
@@ -149,4 +262,102 @@ h1 {
   text-align: center;
   padding: 1.5rem 0;
 }
+
+.menu-container {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.menu-trigger-btn {
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: var(--radius-sm);
+  color: var(--c-text-soft);
+  cursor: pointer;
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  transition:
+    background-color 0.15s ease-in-out,
+    color 0.15s ease-in-out,
+    border-color 0.15s ease-in-out;
+}
+
+.menu-trigger-btn:hover,
+.menu-trigger-btn[aria-expanded='true'] {
+  background-color: var(--c-bg-mute);
+  color: var(--c-heading);
+  border-color: var(--c-border);
+}
+
+.dots-icon {
+  display: block;
+}
+
+.submenu-dropdown {
+  position: absolute;
+  top: calc(100% + 6px);
+  right: 0;
+  z-index: 30;
+  min-width: 140px;
+  background-color: var(--c-bg-elevated);
+  border: 1px solid var(--c-border-hover);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-md);
+  padding: 0.35rem;
+  animation: dropdownIn 0.12s ease-out;
+}
+
+.submenu-item {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  width: 100%;
+  padding: 0.5rem 0.65rem;
+  background: transparent;
+  border: none;
+  border-radius: var(--radius-sm);
+  color: var(--c-heading);
+  font-size: 0.85rem;
+  cursor: pointer;
+  text-align: left;
+  transition:
+    background-color 0.15s ease-in-out,
+    color 0.15s ease-in-out;
+}
+
+.submenu-item:hover {
+  background-color: var(--c-bg-mute);
+  color: var(--c-accent-strong);
+}
+
+.submenu-item-danger {
+  color: var(--c-danger);
+}
+
+.submenu-item-danger:hover {
+  background-color: var(--c-danger-bg);
+  color: var(--c-danger);
+}
+
+.submenu-icon {
+  width: 15px;
+  height: 15px;
+  flex-shrink: 0;
+}
+
+@keyframes dropdownIn {
+  from {
+    opacity: 0;
+    transform: translateY(-4px) scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
 </style>

src/views/ListsView.vue

@@ -4,6 +4,7 @@ import { useListsStore } from '@/stores/lists'
 import type { LocalList } from '@/database/db'
 import ListCard from '@/components/ListCard.vue'
 import ShareListModal from '@/components/ShareListModal.vue'
+import DeleteListModal from '@/components/DeleteListModal.vue'
 
 const listsStore = useListsStore()
 
@@ -11,6 +12,7 @@ const newListName = ref('')
 const isCreating = ref(false)
 const createError = ref('')
 const sharingList = ref<LocalList | null>(null)
+const deletingList = ref<LocalList | null>(null)
 
 onMounted(() => {
   listsStore.loadLists()
@@ -24,6 +26,25 @@ function handleCloseShare() {
   sharingList.value = null
 }
 
+function handleOpenDelete(list: LocalList) {
+  deletingList.value = list
+}
+
+function handleCloseDelete() {
+  deletingList.value = null
+}
+
+async function handleConfirmDelete() {
+  if (!deletingList.value) return
+  const listId = deletingList.value.id
+  deletingList.value = null
+  try {
+    await listsStore.deleteList(listId)
+  } catch (err) {
+    createError.value = err instanceof Error ? err.message : 'Failed to delete list'
+  }
+}
+
 async function handleCreateList() {
   const name = newListName.value.trim()
   if (!name) return
@@ -67,7 +88,11 @@ async function handleCreateList() {
 
     <ul v-if="listsStore.sortedLists.length > 0" class="lists">
       <li v-for="list in listsStore.sortedLists" :key="list.id">
-        <ListCard :list="list" @share="handleOpenShare(list)" />
+        <ListCard
+          :list="list"
+          @share="handleOpenShare(list)"
+          @delete="handleOpenDelete(list)"
+        />
       </li>
     </ul>
 
@@ -77,6 +102,12 @@ async function handleCreateList() {
     </div>
 
     <ShareListModal v-if="sharingList" :list="sharingList" @close="handleCloseShare" />
+    <DeleteListModal
+      v-if="deletingList"
+      :list="deletingList"
+      @close="handleCloseDelete"
+      @confirm="handleConfirmDelete"
+    />
   </main>
 </template>
 

src/views/__tests__/ListDetailView.spec.ts

@@ -0,0 +1,160 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { createPinia, setActivePinia } from 'pinia'
+import ListDetailView from '../ListDetailView.vue'
+import { useListsStore } from '@/stores/lists'
+import type { LocalList } from '@/database/db'
+
+const pushMock = vi.fn<(to: string) => void>()
+
+vi.mock('vue-router', () => ({
+  useRouter: () => ({
+    push: pushMock,
+  }),
+}))
+
+describe('ListDetailView', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia())
+    vi.restoreAllMocks()
+    pushMock.mockClear()
+    const listsStore = useListsStore()
+    vi.spyOn(listsStore, 'loadLists').mockImplementation(async () => {})
+    vi.spyOn(listsStore, 'loadListItems').mockImplementation(async () => {})
+  })
+
+  it('renders list items without the share card', () => {
+    const listsStore = useListsStore()
+    const sampleList: LocalList = {
+      id: 'list-1',
+      name: 'Groceries',
+      created_at: '2026-08-21T00:00:00.000Z',
+      modified_at: '2026-08-21T00:00:00.000Z',
+    }
+    listsStore.lists = [sampleList]
+
+    const wrapper = mount(ListDetailView, {
+      props: {
+        id: 'list-1',
+      },
+    })
+
+    expect(wrapper.text()).toContain('Groceries')
+    expect(wrapper.text()).not.toContain('Share this list')
+    expect(wrapper.find('.share-card').exists()).toBe(false)
+  })
+
+  it('opens confirmation modal and deletes list upon confirmation, then redirects to /', async () => {
+    const listsStore = useListsStore()
+    const deleteSpy = vi.spyOn(listsStore, 'deleteList').mockResolvedValue()
+    const sampleList: LocalList = {
+      id: 'list-1',
+      name: 'Groceries',
+      created_at: '2026-08-21T00:00:00.000Z',
+      modified_at: '2026-08-21T00:00:00.000Z',
+    }
+    listsStore.lists = [sampleList]
+
+    const wrapper = mount(ListDetailView, {
+      props: {
+        id: 'list-1',
+      },
+    })
+
+    const headerMenuBtn = wrapper.find('.list-header .menu-trigger-btn')
+    expect(headerMenuBtn.exists()).toBe(true)
+
+    // 1st click: open list options menu
+    await headerMenuBtn.trigger('click')
+    const deleteBtn = wrapper.find('.list-header .submenu-item-danger')
+    expect(deleteBtn.exists()).toBe(true)
+    expect(deleteBtn.text()).toContain('Delete list')
+
+    // 2nd click: opens confirmation modal
+    await deleteBtn.trigger('click')
+
+    const modal = wrapper.findComponent({ name: 'DeleteListModal' })
+    expect(modal.exists()).toBe(true)
+    expect(modal.text()).toContain('Delete "Groceries"?')
+    expect(deleteSpy).not.toHaveBeenCalled()
+    expect(pushMock).not.toHaveBeenCalled()
+
+    // Confirm deletion in modal
+    await modal.find('.confirm-delete-btn').trigger('click')
+
+    expect(deleteSpy).toHaveBeenCalledWith('list-1')
+    expect(pushMock).toHaveBeenCalledWith('/')
+  })
+
+  it('cancels list deletion when cancel is clicked in confirmation modal', async () => {
+    const listsStore = useListsStore()
+    const deleteSpy = vi.spyOn(listsStore, 'deleteList').mockResolvedValue()
+    const sampleList: LocalList = {
+      id: 'list-1',
+      name: 'Groceries',
+      created_at: '2026-08-21T00:00:00.000Z',
+      modified_at: '2026-08-21T00:00:00.000Z',
+    }
+    listsStore.lists = [sampleList]
+
+    const wrapper = mount(ListDetailView, {
+      props: {
+        id: 'list-1',
+      },
+    })
+
+    const headerMenuBtn = wrapper.find('.list-header .menu-trigger-btn')
+    await headerMenuBtn.trigger('click')
+    await wrapper.find('.list-header .submenu-item-danger').trigger('click')
+
+    const modal = wrapper.findComponent({ name: 'DeleteListModal' })
+    expect(modal.exists()).toBe(true)
+
+    await modal.find('.cancel-btn').trigger('click')
+
+    expect(deleteSpy).not.toHaveBeenCalled()
+    expect(pushMock).not.toHaveBeenCalled()
+    expect(wrapper.findComponent({ name: 'DeleteListModal' }).exists()).toBe(false)
+  })
+
+  it('allows deleting list items via two clicks on item row menu', async () => {
+    const listsStore = useListsStore()
+    const deleteItemSpy = vi.spyOn(listsStore, 'deleteListItem').mockResolvedValue()
+    const sampleList: LocalList = {
+      id: 'list-1',
+      name: 'Groceries',
+      created_at: '2026-08-21T00:00:00.000Z',
+      modified_at: '2026-08-21T00:00:00.000Z',
+    }
+    listsStore.lists = [sampleList]
+    listsStore.listItems = [
+      {
+        id: 'item-1',
+        list_id: 'list-1',
+        title: 'Apples',
+        is_completed: false,
+        created_at: '2026-08-21T00:00:00.000Z',
+        modified_at: '2026-08-21T00:00:00.000Z',
+      },
+    ]
+
+    const wrapper = mount(ListDetailView, {
+      props: {
+        id: 'list-1',
+      },
+    })
+
+    const itemRow = wrapper.findComponent({ name: 'ListItemRow' })
+    expect(itemRow.exists()).toBe(true)
+
+    // 1st click: open item menu
+    await itemRow.find('.menu-trigger-btn').trigger('click')
+    const deleteItemBtn = itemRow.find('.submenu-item-danger')
+    expect(deleteItemBtn.exists()).toBe(true)
+
+    // 2nd click: delete item
+    await deleteItemBtn.trigger('click')
+
+    expect(deleteItemSpy).toHaveBeenCalledWith('item-1')
+  })
+})

src/views/__tests__/ListsView.spec.ts

@@ -0,0 +1,126 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { createPinia, setActivePinia } from 'pinia'
+import ListsView from '../ListsView.vue'
+import { useListsStore } from '@/stores/lists'
+import type { LocalList } from '@/database/db'
+
+describe('ListsView', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia())
+    vi.restoreAllMocks()
+    const listsStore = useListsStore()
+    vi.spyOn(listsStore, 'loadLists').mockImplementation(async () => {})
+  })
+
+  it('renders lists and opens share modal when list card emits share', async () => {
+    const listsStore = useListsStore()
+    const sampleList: LocalList = {
+      id: 'list-1',
+      name: 'Shopping',
+      created_at: '2026-08-21T00:00:00.000Z',
+      modified_at: '2026-08-21T00:00:00.000Z',
+    }
+    listsStore.lists = [sampleList]
+
+    const wrapper = mount(ListsView, {
+      global: {
+        stubs: {
+          RouterLink: {
+            template: '<a :href="to"><slot /></a>',
+            props: ['to'],
+          },
+        },
+      },
+    })
+
+    expect(wrapper.text()).toContain('Shopping')
+    expect(wrapper.findComponent({ name: 'ShareListModal' }).exists()).toBe(false)
+
+    // Trigger share from ListCard
+    await wrapper.find('.menu-trigger-btn').trigger('click')
+    await wrapper.find('.submenu-item').trigger('click')
+
+    expect(wrapper.findComponent({ name: 'ShareListModal' }).exists()).toBe(true)
+    expect(wrapper.find('#share-modal-title').text()).toBe('Share "Shopping"')
+  })
+
+  it('opens confirmation modal and deletes list upon confirmation', async () => {
+    const listsStore = useListsStore()
+    const deleteSpy = vi.spyOn(listsStore, 'deleteList').mockResolvedValue()
+    const sampleList: LocalList = {
+      id: 'list-1',
+      name: 'Shopping',
+      created_at: '2026-08-21T00:00:00.000Z',
+      modified_at: '2026-08-21T00:00:00.000Z',
+    }
+    listsStore.lists = [sampleList]
+
+    const wrapper = mount(ListsView, {
+      global: {
+        stubs: {
+          RouterLink: {
+            template: '<a :href="to"><slot /></a>',
+            props: ['to'],
+          },
+        },
+      },
+    })
+
+    expect(wrapper.findComponent({ name: 'DeleteListModal' }).exists()).toBe(false)
+
+    // Click 1: open menu
+    await wrapper.find('.menu-trigger-btn').trigger('click')
+    // Click 2: click delete list option in menu
+    await wrapper.find('.submenu-item-danger').trigger('click')
+
+    // Modal should now be open
+    const modal = wrapper.findComponent({ name: 'DeleteListModal' })
+    expect(modal.exists()).toBe(true)
+    expect(modal.text()).toContain('Delete "Shopping"?')
+    expect(deleteSpy).not.toHaveBeenCalled()
+
+    // Confirm deletion in modal
+    await modal.find('.confirm-delete-btn').trigger('click')
+
+    expect(deleteSpy).toHaveBeenCalledWith('list-1')
+    expect(wrapper.findComponent({ name: 'DeleteListModal' }).exists()).toBe(false)
+  })
+
+  it('cancels list deletion when cancel is clicked in confirmation modal', async () => {
+    const listsStore = useListsStore()
+    const deleteSpy = vi.spyOn(listsStore, 'deleteList').mockResolvedValue()
+    const sampleList: LocalList = {
+      id: 'list-1',
+      name: 'Shopping',
+      created_at: '2026-08-21T00:00:00.000Z',
+      modified_at: '2026-08-21T00:00:00.000Z',
+    }
+    listsStore.lists = [sampleList]
+
+    const wrapper = mount(ListsView, {
+      global: {
+        stubs: {
+          RouterLink: {
+            template: '<a :href="to"><slot /></a>',
+            props: ['to'],
+          },
+        },
+      },
+    })
+
+    // Click 1: open menu
+    await wrapper.find('.menu-trigger-btn').trigger('click')
+    // Click 2: click delete list option in menu
+    await wrapper.find('.submenu-item-danger').trigger('click')
+
+    const modal = wrapper.findComponent({ name: 'DeleteListModal' })
+    expect(modal.exists()).toBe(true)
+
+    // Cancel in modal
+    await modal.find('.cancel-btn').trigger('click')
+
+    expect(deleteSpy).not.toHaveBeenCalled()
+    expect(wrapper.findComponent({ name: 'DeleteListModal' }).exists()).toBe(false)
+  })
+})