Move task delete to config modal, remove bulk selection

Replace bulk selection UI on /tasks view with delete button in the task
config modal (opened via settings icon on task cards). Delete confirmation
includes checkbox to optionally preserve the linked worktree.

Author: knowsuchagency

src/components/kanban/selection-context.tsx

@@ -7,8 +7,6 @@ import { pointerOutsideOfPreview } from '@atlaskit/pragmatic-drag-and-drop/eleme
 import { attachClosestEdge, extractClosestEdge, type Edge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge'
 import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine'
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
-import { Checkbox } from '@/components/ui/checkbox'
-import { useSelection } from './selection-context'
 import { useDrag } from './drag-context'
 import type { Task } from '@/types'
 import { cn } from '@/lib/utils'
@@ -22,9 +20,7 @@ interface TaskCardProps {
 }
 
 export function TaskCard({ task, isDragPreview }: TaskCardProps) {
-  const { selectMode, isSelected, toggle } = useSelection()
   const { setActiveTask } = useDrag()
-  const selected = isSelected(task.id)
   const navigate = useNavigate()
 
   const ref = useRef<HTMLDivElement>(null)
@@ -38,7 +34,7 @@ export function TaskCard({ task, isDragPreview }: TaskCardProps) {
 
   useEffect(() => {
     const el = ref.current
-    if (!el || selectMode || isDragPreview) return
+    if (!el || isDragPreview) return
 
     return combine(
       draggable({
@@ -102,19 +98,13 @@ export function TaskCard({ task, isDragPreview }: TaskCardProps) {
         },
       })
     )
-  }, [task, selectMode, isDragPreview, setActiveTask])
+  }, [task, isDragPreview, setActiveTask])
 
   const handlePointerDown = () => {
     hasDragged.current = false
   }
 
-  const handleClick = (e: React.MouseEvent) => {
-    if (selectMode) {
-      e.preventDefault()
-      toggle(task.id)
-      return
-    }
-
+  const handleClick = () => {
     // Only navigate if we didn't drag
     if (!hasDragged.current) {
       navigate({ to: '/tasks/$taskId', params: { taskId: task.id } })
@@ -128,10 +118,8 @@ export function TaskCard({ task, isDragPreview }: TaskCardProps) {
       onPointerDown={handlePointerDown}
       onClick={handleClick}
       className={cn(
-        'transition-shadow hover:shadow-md relative',
-        selectMode ? 'cursor-pointer' : 'cursor-grab active:cursor-grabbing',
-        isDragging && 'opacity-50',
-        selected && 'ring-2 ring-primary'
+        'transition-shadow hover:shadow-md relative cursor-grab active:cursor-grabbing',
+        isDragging && 'opacity-50'
       )}
     >
       {/* Drop indicator line */}
@@ -145,24 +133,11 @@ export function TaskCard({ task, isDragPreview }: TaskCardProps) {
         />
       )}
 
-      {/* Checkbox in top-right - only in select mode */}
-      {selectMode && (
-        <div
-          className="absolute right-2 top-2 z-10 cursor-pointer"
-          onClick={(e) => {
-            e.stopPropagation()
-            toggle(task.id)
-          }}
-        >
-          <Checkbox checked={selected} className="cursor-pointer pointer-events-none" />
-        </div>
-      )}
-
-      <CardHeader className={cn('p-3 pb-1 flex flex-row items-start justify-between gap-2', selectMode && 'pr-8')}>
+      <CardHeader className="p-3 pb-1 flex flex-row items-start justify-between gap-2">
         <CardTitle className="text-sm font-medium leading-tight flex-1">
           {task.title}
         </CardTitle>
-        {!selectMode && !isDragPreview && (
+        {!isDragPreview && (
           <button
             type="button"
             className="shrink-0 p-0.5 -m-0.5 rounded hover:bg-muted transition-colors cursor-pointer"

src/components/kanban/task-card.tsx

@@ -1,10 +1,22 @@
 import { useState, useEffect } from 'react'
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '@/components/ui/dialog'
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from '@/components/ui/alert-dialog'
 import { Field, FieldGroup, FieldLabel } from '@/components/ui/field'
 import { Input } from '@/components/ui/input'
 import { DescriptionTextarea } from '@/components/ui/description-textarea'
+import { Checkbox } from '@/components/ui/checkbox'
 import { Button } from '@/components/ui/button'
-import { useUpdateTask } from '@/hooks/use-tasks'
+import { useUpdateTask, useDeleteTask } from '@/hooks/use-tasks'
 import type { Task } from '@/types'
 
 interface TaskConfigModalProps {
@@ -20,8 +32,10 @@ function parseLinearUrl(url: string): string | null {
 
 export function TaskConfigModal({ task, open, onOpenChange }: TaskConfigModalProps) {
   const updateTask = useUpdateTask()
+  const deleteTask = useDeleteTask()
 
   const [title, setTitle] = useState(task.title)
+  const [deleteLinkedWorktree, setDeleteLinkedWorktree] = useState(true)
   const [description, setDescription] = useState(task.description || '')
   const [prUrl, setPrUrl] = useState(task.prUrl || '')
   const [linearUrl, setLinearUrl] = useState(task.linearTicketUrl || '')
@@ -33,6 +47,7 @@ export function TaskConfigModal({ task, open, onOpenChange }: TaskConfigModalPro
       setDescription(task.description || '')
       setPrUrl(task.prUrl || '')
       setLinearUrl(task.linearTicketUrl || '')
+      setDeleteLinkedWorktree(true)
     }
   }, [open, task])
 
@@ -76,6 +91,17 @@ export function TaskConfigModal({ task, open, onOpenChange }: TaskConfigModalPro
     }
   }
 
+  const handleDelete = () => {
+    deleteTask.mutate(
+      { taskId: task.id, deleteLinkedWorktree },
+      {
+        onSuccess: () => {
+          onOpenChange(false)
+        },
+      }
+    )
+  }
+
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent className="sm:max-w-md" onKeyDown={handleKeyDown}>
@@ -120,13 +146,50 @@ export function TaskConfigModal({ task, open, onOpenChange }: TaskConfigModalPro
             />
           </Field>
         </FieldGroup>
-        <DialogFooter className="mt-4">
-          <Button variant="outline" onClick={() => onOpenChange(false)}>
-            Cancel
-          </Button>
-          <Button onClick={handleSave} disabled={!title.trim()}>
-            Save
-          </Button>
+        <DialogFooter className="mt-4 flex-row justify-between sm:justify-between">
+          <AlertDialog>
+            <AlertDialogTrigger
+              render={<Button variant="ghost" className="text-destructive hover:text-destructive hover:bg-destructive/10" disabled={deleteTask.isPending} />}
+            >
+              {deleteTask.isPending ? 'Deleting...' : 'Delete Task'}
+            </AlertDialogTrigger>
+            <AlertDialogContent>
+              <AlertDialogHeader>
+                <AlertDialogTitle>Delete Task</AlertDialogTitle>
+                <AlertDialogDescription>
+                  This will permanently delete this task. This action cannot be undone.
+                </AlertDialogDescription>
+              </AlertDialogHeader>
+              <div className="flex items-center gap-2 py-2">
+                <Checkbox
+                  id="delete-worktree"
+                  checked={deleteLinkedWorktree}
+                  onCheckedChange={(checked) => setDeleteLinkedWorktree(checked === true)}
+                />
+                <label htmlFor="delete-worktree" className="text-sm cursor-pointer">
+                  Also delete linked worktree
+                </label>
+              </div>
+              <AlertDialogFooter>
+                <AlertDialogCancel>Cancel</AlertDialogCancel>
+                <AlertDialogAction
+                  onClick={handleDelete}
+                  variant="destructive"
+                  disabled={deleteTask.isPending}
+                >
+                  {deleteTask.isPending ? 'Deleting...' : 'Delete'}
+                </AlertDialogAction>
+              </AlertDialogFooter>
+            </AlertDialogContent>
+          </AlertDialog>
+          <div className="flex gap-2">
+            <Button variant="outline" onClick={() => onOpenChange(false)}>
+              Cancel
+            </Button>
+            <Button onClick={handleSave} disabled={!title.trim()}>
+              Save
+            </Button>
+          </div>
         </DialogFooter>
       </DialogContent>
     </Dialog>