Merge pull request #527 from Chris0Jeky/fix/513-516-ux-small-fixes

fix: delete card confirmation + column Enter key submit (#513 #516)

Author: Chris0Jeky

frontend/taskdeck-web/src/components/board/CardModal.vue

@@ -3,6 +3,7 @@ import { onBeforeUnmount, ref, computed, watch } from 'vue'
 import { useBoardStore } from '../../store/boardStore'
 import { useSessionStore } from '../../store/sessionStore'
 import { useEscapeToClose } from '../../composables/useEscapeToClose'
+import TdDialog from '../ui/TdDialog.vue'
 import type { Card, CardCaptureProvenance, Label } from '../../types/board'
 import type { CardComment } from '../../types/comments'
 import { normalizeProposalStatus } from '../../utils/automation'
@@ -37,6 +38,11 @@ const captureProvenance = ref<CardCaptureProvenance | null>(null)
 const captureProvenanceError = ref<string | null>(null)
 const loadingCaptureProvenance = ref(false)
 const loadedCaptureProvenanceCardId = ref<string | null>(null)
+const showDeleteConfirm = ref(false)
+const isDeleting = ref(false)
+const deleteConfirmDescription = computed(
+  () => `Are you sure you want to delete "${props.card.title}"? This action cannot be undone.`
+)
 
 const comments = computed<CardComment[]>(() => boardStore.getCardComments(props.card.id))
 const topLevelComments = computed(() => comments.value.filter(comment => !comment.parentCommentId))
@@ -158,15 +164,26 @@ async function handleSave() {
   }
 }
 
-async function handleDelete() {
-  if (!confirm(`Are you sure you want to delete "${props.card.title}"?`)) return
+function handleDeleteClick() {
+  showDeleteConfirm.value = true
+}
+
+function handleDeleteCancel() {
+  showDeleteConfirm.value = false
+}
 
+async function handleDeleteConfirm() {
+  if (isDeleting.value) return
+  isDeleting.value = true
   try {
     await boardStore.deleteCard(props.card.boardId, props.card.id)
+    showDeleteConfirm.value = false
     emit('updated')
     emit('close')
   } catch (error) {
     console.error('Failed to delete card:', error)
+  } finally {
+    isDeleting.value = false
   }
 }
 
@@ -593,7 +610,7 @@ onBeforeUnmount(() => {
         <!-- Actions -->
         <div class="mt-6 flex items-center justify-between">
           <button
-            @click="handleDelete"
+            @click="handleDeleteClick"
             type="button"
             class="px-4 py-2 text-sm font-medium text-red-600 hover:text-red-700 hover:bg-red-50 border border-red-300 rounded-md transition-colors"
           >
@@ -620,4 +637,32 @@ onBeforeUnmount(() => {
       </div>
     </div>
   </div>
+
+  <!-- Delete Confirmation Dialog -->
+  <TdDialog
+    :open="showDeleteConfirm"
+    title="Delete Card"
+    :description="deleteConfirmDescription"
+    :close-on-backdrop="!isDeleting"
+    @close="handleDeleteCancel"
+  >
+    <template #footer>
+      <button
+        type="button"
+        :disabled="isDeleting"
+        class="px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 border border-gray-300 rounded-md transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+        @click="handleDeleteCancel"
+      >
+        Cancel
+      </button>
+      <button
+        type="button"
+        :disabled="isDeleting"
+        class="px-4 py-2 text-sm font-medium text-white bg-red-600 hover:bg-red-700 border border-transparent rounded-md transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+        @click="handleDeleteConfirm"
+      >
+        {{ isDeleting ? 'Deleting…' : 'Delete' }}
+      </button>
+    </template>
+  </TdDialog>
 </template>

frontend/taskdeck-web/src/tests/components/CardModal.spec.ts

@@ -290,50 +290,59 @@ describe('CardModal', () => {
     expect((saveButton?.element as HTMLButtonElement).disabled).toBe(true)
   })
 
-  it('should show delete confirmation before deleting', async () => {
-    const confirmSpy = vi.spyOn(window, 'confirm').mockReturnValue(false)
-
+  it('should show delete confirmation dialog before deleting', async () => {
     const wrapper = mount(CardModal, {
       props: {
         card,
         isOpen: true,
         labels,
       },
+      attachTo: document.body,
     })
 
     const deleteButton = wrapper
       .findAll('button')
       .find((btn) => btn.text().includes('Delete Card'))
     await deleteButton?.trigger('click')
+    await wrapper.vm.$nextTick()
 
-    expect(confirmSpy).toHaveBeenCalled()
+    // Dialog should now be open; deleteCard must NOT have been called yet
     expect(mockStore.deleteCard).not.toHaveBeenCalled()
+    // The confirmation dialog should be visible in the DOM
+    expect(document.querySelector('.td-dialog')).not.toBeNull()
 
-    confirmSpy.mockRestore()
+    wrapper.unmount()
   })
 
-  it('should call deleteCard when deletion is confirmed', async () => {
-    const confirmSpy = vi.spyOn(window, 'confirm').mockReturnValue(true)
-
+  it('should call deleteCard when deletion is confirmed in dialog', async () => {
     const wrapper = mount(CardModal, {
       props: {
         card,
         isOpen: true,
         labels,
       },
+      attachTo: document.body,
     })
 
+    // Open the confirmation dialog
     const deleteButton = wrapper
       .findAll('button')
       .find((btn) => btn.text().includes('Delete Card'))
     await deleteButton?.trigger('click')
+    await wrapper.vm.$nextTick()
 
+    // Click the "Delete" confirm button inside the dialog
+    const confirmButton = Array.from(document.querySelectorAll<HTMLButtonElement>('button')).find(
+      (btn) => btn.textContent?.trim() === 'Delete',
+    )
+    confirmButton?.click()
+    await wrapper.vm.$nextTick()
     await wrapper.vm.$nextTick()
 
     expect(mockStore.deleteCard).toHaveBeenCalledWith('board-1', 'card-1')
     expect(wrapper.emitted('close')).toBeTruthy()
 
-    confirmSpy.mockRestore()
+    wrapper.unmount()
   })
 
   it('should handle label selection', async () => {

frontend/taskdeck-web/src/views/BoardView.vue

@@ -317,6 +317,7 @@ useKeyboardShortcuts([
               placeholder="Column name"
               class="td-column-form__input"
               autofocus
+              @keydown.enter.prevent="createColumn"
             />
             <button
               type="submit"