fix: List item UI improvements

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)
   })
 })