fix: List item UI improvements

src/api/__tests__/lists.spec.ts

@@ -5,7 +5,7 @@ import {
   createListApi,
   getListItemsApi,
   createListItemApi,
-  updateListItemApi,
+  updateListItemTitleApi,
   setListItemCompletedApi,
   addUserToListApi,
   removeUserFromListApi,
@@ -77,7 +77,7 @@ describe('lists API', () => {
     expect(result).toEqual(mockItems)
   })
 
-  it('setListItemCompletedApi sends POST to /lists/items/{id}', async () => {
+  it('setListItemCompletedApi sends POST to /lists/items/{id}/complete', async () => {
     const fetchMock = vi.fn<typeof fetch>().mockResolvedValueOnce({
       ok: true,
       status: 204,
@@ -87,7 +87,7 @@ describe('lists API', () => {
     await setListItemCompletedApi('item-1', { is_completed: true })
 
     expect(fetchMock).toHaveBeenCalledWith(
-      `${API_BASE_URL}/lists/items/item-1`,
+      `${API_BASE_URL}/lists/items/item-1/complete`,
       expect.objectContaining({ method: 'POST' }),
     )
   })
@@ -137,18 +137,18 @@ describe('lists API', () => {
     expect(result).toEqual(mockItem)
   })
 
-  it('updateListItemApi sends PUT to /lists/items', async () => {
+  it('updateListItemTitleApi sends POST to /lists/items/{id}/title', async () => {
     const fetchMock = vi.fn<typeof fetch>().mockResolvedValueOnce({
       ok: true,
       status: 204,
     } as unknown as Response)
     global.fetch = fetchMock
 
-    await updateListItemApi({ list_item_id: 'item-1', is_completed: true })
+    await updateListItemTitleApi('item-1', { title: 'Free-range eggs' })
 
     expect(fetchMock).toHaveBeenCalledWith(
-      `${API_BASE_URL}/lists/items`,
+      `${API_BASE_URL}/lists/items/item-1/title`,
-      expect.objectContaining({ method: 'PUT' }),
+      expect.objectContaining({ method: 'POST' }),
     )
   })
 

src/api/lists.ts

@@ -5,8 +5,8 @@ import type {
   ListItem,
   CreateListPayload,
   CreateListItemPayload,
-  UpdateListItemPayload,
   SetListItemCompletedPayload,
+  SetListItemTitlePayload,
   AddUserToListPayload,
   RemoveUserFromListPayload,
 } from '@/types/list'
@@ -43,23 +43,26 @@ export async function createListItemApi(payload: CreateListItemPayload): Promise
   return response.json()
 }
 
-export async function updateListItemApi(payload: UpdateListItemPayload): Promise<void> {
-  const response = await apiClient.put('/lists/items', payload)
-  if (!response.ok) {
-    throw new Error(await extractErrorMessage(response, 'Failed to update list item'))
-  }
-}
-
 export async function setListItemCompletedApi(
   itemId: string,
   payload: SetListItemCompletedPayload,
 ): Promise<void> {
-  const response = await apiClient.post(`/lists/items/${itemId}`, payload)
+  const response = await apiClient.post(`/lists/items/${itemId}/complete`, payload)
   if (!response.ok) {
     throw new Error(await extractErrorMessage(response, 'Failed to update list item status'))
   }
 }
 
+export async function updateListItemTitleApi(
+  itemId: string,
+  payload: SetListItemTitlePayload,
+): Promise<void> {
+  const response = await apiClient.post(`/lists/items/${itemId}/title`, payload)
+  if (!response.ok) {
+    throw new Error(await extractErrorMessage(response, 'Failed to update list item title'))
+  }
+}
+
 export async function addUserToListApi(payload: AddUserToListPayload): Promise<void> {
   const response = await apiClient.post('/lists/user', payload)
   if (!response.ok) {

src/components/ConfirmDeleteModal.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import BaseModal from '@/components/BaseModal.vue'
+
+withDefaults(
+  defineProps<{
+    title: string
+    description: string
+    confirmLabel?: string
+  }>(),
+  {
+    confirmLabel: 'Delete',
+  },
+)
+
+const emit = defineEmits<{
+  close: []
+  confirm: []
+}>()
+
+function handleClose() {
+  emit('close')
+}
+
+function handleConfirm() {
+  emit('confirm')
+}
+</script>
+
+<template>
+  <BaseModal :title="title" title-id="confirm-delete-modal-title" @close="handleClose">
+    <p class="modal-description">{{ description }}</p>
+
+    <template #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">
+        {{ confirmLabel }}
+      </button>
+    </template>
+  </BaseModal>
+</template>
+
+<style scoped>
+.modal-description {
+  font-size: 0.85rem;
+  color: var(--c-text-soft);
+  margin-bottom: 1.25rem;
+  line-height: 1.4;
+}
+</style>

src/components/DeleteListItemModal.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import type { LocalListItem } from '@/database/db'
+import ConfirmDeleteModal from '@/components/ConfirmDeleteModal.vue'
+
+const props = defineProps<{
+  item: LocalListItem
+}>()
+
+const emit = defineEmits<{
+  close: []
+  confirm: []
+}>()
+
+function handleClose() {
+  emit('close')
+}
+
+function handleConfirm() {
+  emit('confirm')
+}
+</script>
+
+<template>
+  <ConfirmDeleteModal
+    :title="`Delete &quot;${props.item.title}&quot;?`"
+    description="Are you sure you want to delete this item? This action cannot be undone."
+    confirm-label="Delete item"
+    @close="handleClose"
+    @confirm="handleConfirm"
+  />
+</template>

src/components/DeleteListModal.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import type { LocalList } from '@/database/db'
-import BaseModal from '@/components/BaseModal.vue'
+import ConfirmDeleteModal from '@/components/ConfirmDeleteModal.vue'
 
-defineProps<{
+const props = defineProps<{
   list: LocalList
 }>()
 
@@ -21,32 +21,11 @@ function handleConfirm() {
 </script>
 
 <template>
-  <BaseModal
+  <ConfirmDeleteModal
-    :title="`Delete &quot;${list.name}&quot;?`"
+    :title="`Delete &quot;${props.list.name}&quot;?`"
-    title-id="delete-modal-title"
+    description="Are you sure you want to delete this list? This action cannot be undone and all items in this list will be deleted."
+    confirm-label="Delete list"
     @close="handleClose"
-  >
+    @confirm="handleConfirm"
-    <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>
-
-    <template #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>
-    </template>
-  </BaseModal>
 </template>
-
-<style scoped>
-.modal-description {
-  font-size: 0.85rem;
-  color: var(--c-text-soft);
-  margin-bottom: 1.25rem;
-  line-height: 1.4;
-}
-</style>

src/components/ListItemRow.vue

@@ -3,6 +3,7 @@ import { ref } from 'vue'
 import type { LocalListItem } from '@/database/db'
 import { useListsStore } from '@/stores/lists'
 import { useDismissableMenu } from '@/composables/useDismissableMenu'
+import DeleteListItemModal from '@/components/DeleteListItemModal.vue'
 
 const props = defineProps<{ item: LocalListItem }>()
 
@@ -16,6 +17,7 @@ const editedTitle = ref(props.item.title)
 // diffing against the live (possibly just-changed) prop and overwriting the
 // remote edit with the untouched original text.
 const originalTitle = ref(props.item.title)
+const showDeleteModal = ref(false)
 const {
   isOpen: isMenuOpen,
   containerRef: menuContainerRef,
@@ -27,6 +29,7 @@ function toggleCompleted() {
 }
 
 function startEditing() {
+  isMenuOpen.value = false
   editedTitle.value = props.item.title
   originalTitle.value = props.item.title
   isEditing.value = true
@@ -35,15 +38,22 @@ function startEditing() {
 function saveTitle() {
   const title = editedTitle.value.trim()
   if (title && title !== originalTitle.value) {
-    listsStore.updateListItem(props.item.id, { title })
+    listsStore.updateListItemTitle(props.item.id, title)
   }
   isEditing.value = false
 }
 
-function handleDelete(event: Event) {
+function handleOpenDelete() {
-  event.preventDefault()
-  event.stopPropagation()
   isMenuOpen.value = false
+  showDeleteModal.value = true
+}
+
+function handleCloseDelete() {
+  showDeleteModal.value = false
+}
+
+function handleConfirmDelete() {
+  showDeleteModal.value = false
   listsStore.deleteListItem(props.item.id)
 }
 </script>
@@ -68,7 +78,7 @@ function handleDelete(event: Event) {
       @keyup.escape="isEditing = false"
       @blur="saveTitle"
     />
-    <span v-else class="title" @click="startEditing">{{ item.title }}</span>
+    <span v-else class="title" @click="toggleCompleted">{{ item.title }}</span>
 
     <span v-if="item.pendingSync" class="pending-dot" title="Not yet synced"></span>
 
@@ -90,11 +100,25 @@ function handleDelete(event: Event) {
       </button>
 
       <div v-if="isMenuOpen" class="submenu-dropdown card" role="menu">
+        <button type="button" class="submenu-item" role="menuitem" @click="startEditing">
+          <svg
+            class="submenu-icon"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <path d="M17 3a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L17 3z" />
+          </svg>
+          <span>Edit title</span>
+        </button>
         <button
           type="button"
           class="submenu-item submenu-item-danger"
           role="menuitem"
-          @click="handleDelete"
+          @click="handleOpenDelete"
         >
           <svg
             class="submenu-icon"
@@ -116,6 +140,13 @@ function handleDelete(event: Event) {
         </button>
       </div>
     </div>
+
+    <DeleteListItemModal
+      v-if="showDeleteModal"
+      :item="item"
+      @close="handleCloseDelete"
+      @confirm="handleConfirmDelete"
+    />
   </li>
 </template>
 

src/components/__tests__/ConfirmDeleteModal.spec.ts

@@ -0,0 +1,79 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import ConfirmDeleteModal from '../ConfirmDeleteModal.vue'
+
+describe('ConfirmDeleteModal', () => {
+  it('renders title, description, and default confirm label', () => {
+    const wrapper = mount(ConfirmDeleteModal, {
+      props: {
+        title: 'Delete "Groceries"?',
+        description: 'Are you sure?',
+      },
+    })
+
+    expect(wrapper.text()).toContain('Delete "Groceries"?')
+    expect(wrapper.text()).toContain('Are you sure?')
+    expect(wrapper.find('.confirm-delete-btn').text()).toBe('Delete')
+    expect(wrapper.find('.cancel-btn').text()).toBe('Cancel')
+  })
+
+  it('renders a custom confirm label', () => {
+    const wrapper = mount(ConfirmDeleteModal, {
+      props: {
+        title: 'Delete "Apples"?',
+        description: 'Are you sure?',
+        confirmLabel: 'Delete item',
+      },
+    })
+
+    expect(wrapper.find('.confirm-delete-btn').text()).toBe('Delete item')
+  })
+
+  it('emits confirm event when Delete button is clicked', async () => {
+    const wrapper = mount(ConfirmDeleteModal, {
+      props: {
+        title: 'Delete "Groceries"?',
+        description: 'Are you sure?',
+      },
+    })
+
+    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(ConfirmDeleteModal, {
+      props: {
+        title: 'Delete "Groceries"?',
+        description: 'Are you sure?',
+      },
+    })
+
+    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(ConfirmDeleteModal, {
+      props: {
+        title: 'Delete "Groceries"?',
+        description: 'Are you sure?',
+      },
+    })
+
+    await wrapper.find('.close-btn').trigger('click')
+    expect(wrapper.emitted('close')).toBeTruthy()
+  })
+
+  it('emits close event when clicking overlay background', async () => {
+    const wrapper = mount(ConfirmDeleteModal, {
+      props: {
+        title: 'Delete "Groceries"?',
+        description: 'Are you sure?',
+      },
+    })
+
+    await wrapper.find('.modal-overlay').trigger('click')
+    expect(wrapper.emitted('close')).toBeTruthy()
+  })
+})

src/components/__tests__/DeleteListItemModal.spec.ts

@@ -0,0 +1,50 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import DeleteListItemModal from '../DeleteListItemModal.vue'
+import type { LocalListItem } from '@/database/db'
+
+describe('DeleteListItemModal', () => {
+  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',
+  }
+
+  it('renders modal with item title and confirmation prompt', () => {
+    const wrapper = mount(DeleteListItemModal, {
+      props: {
+        item: sampleItem,
+      },
+    })
+
+    expect(wrapper.text()).toContain('Delete "Apples"?')
+    expect(wrapper.text()).toContain('Are you sure you want to delete this item?')
+    expect(wrapper.find('.confirm-delete-btn').text()).toBe('Delete item')
+    expect(wrapper.find('.cancel-btn').text()).toBe('Cancel')
+  })
+
+  it('emits confirm event when Delete button is clicked', async () => {
+    const wrapper = mount(DeleteListItemModal, {
+      props: {
+        item: sampleItem,
+      },
+    })
+
+    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(DeleteListItemModal, {
+      props: {
+        item: sampleItem,
+      },
+    })
+
+    await wrapper.find('.cancel-btn').trigger('click')
+    expect(wrapper.emitted('close')).toBeTruthy()
+  })
+})

src/components/__tests__/ListItemRow.spec.ts

@@ -47,7 +47,39 @@ describe('ListItemRow', () => {
     expect(wrapper.find('.submenu-dropdown').exists()).toBe(false)
   })
 
-  it('deletes item when Delete item is clicked in submenu', async () => {
+  it('toggles completed state when the title text is clicked', async () => {
+    const wrapper = mount(ListItemRow, {
+      props: {
+        item: sampleItem,
+      },
+    })
+
+    const listsStore = useListsStore()
+    const toggleSpy = vi.spyOn(listsStore, 'setListItemCompleted').mockResolvedValue()
+
+    await wrapper.find('.title').trigger('click')
+
+    expect(toggleSpy).toHaveBeenCalledWith('item-1', true)
+  })
+
+  it('opens the title editor via the Edit title submenu item', async () => {
+    const wrapper = mount(ListItemRow, {
+      props: {
+        item: sampleItem,
+      },
+    })
+
+    await wrapper.find('.menu-trigger-btn').trigger('click')
+    const editBtn = wrapper.find('.submenu-item:not(.submenu-item-danger)')
+    expect(editBtn.text()).toContain('Edit title')
+
+    await editBtn.trigger('click')
+
+    expect(wrapper.find('.title-input').exists()).toBe(true)
+    expect(wrapper.find('.submenu-dropdown').exists()).toBe(false)
+  })
+
+  it('opens a confirmation modal when Delete item is clicked in submenu', async () => {
     const wrapper = mount(ListItemRow, {
       props: {
         item: sampleItem,
@@ -61,10 +93,42 @@ describe('ListItemRow', () => {
     await wrapper.find('.menu-trigger-btn').trigger('click')
     expect(wrapper.find('.submenu-dropdown').exists()).toBe(true)
 
-    // 2nd click: delete item
+    // 2nd click: opens confirmation modal, doesn't delete yet
     await wrapper.find('.submenu-item-danger').trigger('click')
 
-    expect(deleteSpy).toHaveBeenCalledWith('item-1')
     expect(wrapper.find('.submenu-dropdown').exists()).toBe(false)
+    expect(deleteSpy).not.toHaveBeenCalled()
+
+    const modal = wrapper.findComponent({ name: 'DeleteListItemModal' })
+    expect(modal.exists()).toBe(true)
+    expect(modal.text()).toContain('Delete "Apples"?')
+
+    // Confirm deletion in modal
+    await modal.find('.confirm-delete-btn').trigger('click')
+
+    expect(deleteSpy).toHaveBeenCalledWith('item-1')
+    expect(wrapper.findComponent({ name: 'DeleteListItemModal' }).exists()).toBe(false)
+  })
+
+  it('cancels item deletion when cancel is clicked in confirmation modal', async () => {
+    const wrapper = mount(ListItemRow, {
+      props: {
+        item: sampleItem,
+      },
+    })
+
+    const listsStore = useListsStore()
+    const deleteSpy = vi.spyOn(listsStore, 'deleteListItem').mockResolvedValue()
+
+    await wrapper.find('.menu-trigger-btn').trigger('click')
+    await wrapper.find('.submenu-item-danger').trigger('click')
+
+    const modal = wrapper.findComponent({ name: 'DeleteListItemModal' })
+    expect(modal.exists()).toBe(true)
+
+    await modal.find('.cancel-btn').trigger('click')
+
+    expect(deleteSpy).not.toHaveBeenCalled()
+    expect(wrapper.findComponent({ name: 'DeleteListItemModal' }).exists()).toBe(false)
   })
 })

src/database/db.ts

@@ -4,8 +4,8 @@ import type {
   ListItem,
   CreateListPayload,
   CreateListItemPayload,
-  UpdateListItemPayload,
   SetListItemCompletedPayload,
+  SetListItemTitlePayload,
 } from '@/types/list'
 
 export interface LocalList extends List {
@@ -36,7 +36,7 @@ interface SyncQueueEntryBase {
 type SyncOperationPayloads = {
   createList: CreateListPayload
   createListItem: CreateListItemPayload
-  updateListItem: UpdateListItemPayload
+  updateListItemTitle: SetListItemTitlePayload
   setListItemCompleted: SetListItemCompletedPayload
   deleteList: DeleteListPayload
   deleteListItem: DeleteListItemPayload

src/stores/__tests__/lists.spec.ts

@@ -109,7 +109,7 @@ const listsApiMocks = vi.hoisted(() => ({
   createListApi: vi.fn<() => Promise<unknown>>(),
   getListItemsApi: vi.fn<() => Promise<unknown>>(),
   createListItemApi: vi.fn<() => Promise<unknown>>(),
-  updateListItemApi: vi.fn<() => Promise<unknown>>(),
+  updateListItemTitleApi: vi.fn<() => Promise<unknown>>(),
   setListItemCompletedApi: vi.fn<() => Promise<unknown>>(),
   addUserToListApi: vi.fn<() => Promise<unknown>>(),
   removeUserFromListApi: vi.fn<() => Promise<unknown>>(),
@@ -211,29 +211,28 @@ describe('useListsStore', () => {
     expect(store.error).toBe('Network error')
   })
 
-  it('updates a list item locally and pushes the change to the server', async () => {
+  it('updates a list item title locally and pushes the change via the dedicated endpoint', async () => {
     listsApiMocks.createListItemApi.mockResolvedValueOnce({
       id: 'server-item-2',
       list_id: '',
       title: 'Eggs',
       is_completed: false,
     })
-    listsApiMocks.updateListItemApi.mockResolvedValueOnce(undefined)
+    listsApiMocks.updateListItemTitleApi.mockResolvedValueOnce(undefined)
 
     const store = useListsStore()
     await store.createListItem('list-1', 'Eggs')
     await store.sync()
     const created = store.listItems.find((entry) => entry.title === 'Eggs')!
 
-    await store.updateListItem(created.id, { is_completed: true })
+    await store.updateListItemTitle(created.id, 'Free-range eggs')
     await store.sync()
 
-    expect(listsApiMocks.updateListItemApi).toHaveBeenCalledWith({
+    expect(listsApiMocks.updateListItemTitleApi).toHaveBeenCalledWith(created.id, {
-      list_item_id: created.id,
+      title: 'Free-range eggs',
-      is_completed: true,
     })
     const updated = store.listItems.find((entry) => entry.id === created.id)
-    expect(updated?.is_completed).toBe(true)
+    expect(updated?.title).toBe('Free-range eggs')
     expect(updated?.pendingSync).toBe(false)
   })
 

src/stores/lists.ts

@@ -13,7 +13,7 @@ import {
   createListApi,
   getListItemsApi,
   createListItemApi,
-  updateListItemApi,
+  updateListItemTitleApi,
   setListItemCompletedApi,
   addUserToListApi,
   removeUserFromListApi,
@@ -180,12 +180,9 @@ export const useListsStore = defineStore('lists', () => {
     return localItem
   }
 
-  async function updateListItem(
+  async function updateListItemTitle(itemId: string, title: string) {
-    itemId: string,
-    changes: { title?: string; is_completed?: boolean },
-  ) {
     const patch = {
-      ...changes,
+      title,
       modified_at: new Date().toISOString(),
       pendingSync: true,
     }
@@ -193,8 +190,8 @@ export const useListsStore = defineStore('lists', () => {
     const existingItem = listItems.value.find((entry) => entry.id === itemId)
     if (existingItem) Object.assign(existingItem, patch)
     await enqueue({
-      type: 'updateListItem',
+      type: 'updateListItemTitle',
-      payload: { list_item_id: itemId, ...changes },
+      payload: { title },
       localListItemId: itemId,
     })
     scheduleSync()
@@ -357,11 +354,10 @@ export const useListsStore = defineStore('lists', () => {
         }
         break
       }
-      case 'updateListItem': {
+      case 'updateListItemTitle': {
-        await updateListItemApi(entry.payload)
+        if (!entry.localListItemId) break
-        if (entry.localListItemId) {
+        await updateListItemTitleApi(entry.localListItemId, entry.payload)
-          await markListItemSynced(entry.localListItemId)
+        await markListItemSynced(entry.localListItemId)
-        }
         break
       }
       case 'setListItemCompleted': {
@@ -570,7 +566,7 @@ export const useListsStore = defineStore('lists', () => {
     refresh,
     createList,
     createListItem,
-    updateListItem,
+    updateListItemTitle,
     setListItemCompleted,
     addUserToList,
     removeUserFromList,

src/types/list.ts

@@ -25,16 +25,14 @@ export interface CreateListItemPayload {
   title: string
 }
 
-export interface UpdateListItemPayload {
-  list_item_id: string
-  title?: string
-  is_completed?: boolean
-}
-
 export interface SetListItemCompletedPayload {
   is_completed: boolean
 }
 
+export interface SetListItemTitlePayload {
+  title: string
+}
+
 export interface AddUserToListPayload {
   list_id: string
   email: string

src/views/__tests__/ListDetailView.spec.ts

@@ -121,7 +121,7 @@ describe('ListDetailView', () => {
     expect(wrapper.findComponent({ name: 'DeleteListModal' }).exists()).toBe(false)
   })
 
-  it('allows deleting list items via two clicks on item row menu', async () => {
+  it('allows deleting list items via menu and confirmation modal', async () => {
     const listsStore = useListsStore()
     const deleteItemSpy = vi.spyOn(listsStore, 'deleteListItem').mockResolvedValue()
     const sampleList: LocalList = {
@@ -156,9 +156,16 @@ describe('ListDetailView', () => {
     const deleteItemBtn = itemRow.find('.submenu-item-danger')
     expect(deleteItemBtn.exists()).toBe(true)
 
-    // 2nd click: delete item
+    // 2nd click: opens confirmation modal
     await deleteItemBtn.trigger('click')
 
+    const modal = itemRow.findComponent({ name: 'DeleteListItemModal' })
+    expect(modal.exists()).toBe(true)
+    expect(deleteItemSpy).not.toHaveBeenCalled()
+
+    // Confirm deletion in modal
+    await modal.find('.confirm-delete-btn').trigger('click')
+
     expect(deleteItemSpy).toHaveBeenCalledWith('item-1')
   })
 })