add delete task button

web/src/components/button/DeleteButton.tsx

@@ -0,0 +1,20 @@
+import Button from './Button'
+import { type ButtonProps } from './Button'
+import type { PropsWithChildren } from 'react'
+import { TrashIcon } from '@heroicons/react/20/solid'
+
+export default function DeleteButton({ className = '', confirm, ...props }: PropsWithChildren<ButtonProps>) {
+  const _confirm = confirm || (
+    <>
+      <TrashIcon />
+      <span>Really delete?</span>
+    </>
+  )
+
+  return (
+    <Button className={`delete negative ${className}`} confirm={_confirm} {...props}>
+      <TrashIcon />
+      {props.children ? props.children : <span>Delete</span>}
+    </Button>
+  )
+}

web/src/views/HerdView.tsx

@@ -24,6 +24,7 @@ import { SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable'
 import { useCallback, useEffect, useState } from 'react'
 import { useConnection, useRouteSearch, useSession } from '@/hooks'
 import { useNavigate, useParams } from 'react-router-dom'
+import DeleteButton from '@/components/button/DeleteButton'
 
 interface HerdUpdateFormData extends Pick<api.Herd, 'name'> {}
 
@@ -100,6 +101,23 @@ export default function HerdView() {
     }
   }
 
+  async function deleteTask(task: api.WithId<api.Task>) {
+    if (busy) return
+
+    try {
+      setBusy(true)
+      setError(undefined)
+      await api.deleteTask(options, task._id)
+      // Reload current page
+      const taskRes = await api.searchTasks(options, id, searchParams)
+      setTaskData(taskRes)
+    } catch(err) {
+      setError(err as Error)
+    } finally {
+      setBusy(false)
+    }
+  }
+
   async function moveTask({ active, over }: DragEndEvent) {
     if (busy || !taskData || !over || active.id === over.id) return
 
@@ -247,6 +265,7 @@ export default function HerdView() {
                         <span>Not done</span>
                       </Button>
                     )}
+                    <DeleteButton className="mini" onClick={() => deleteTask(task)} />
                   </ButtonSet>
                 </SortableRow>
               ))}