This commit replaces the VSCode native dialog with a Radix AlertDialog component for task deletion confirmation. The change provides a more consistent user experience by using the same design system as the rest of the application.

Changes:

Add new DeleteTaskDialog component using Radix UIs AlertDialog
Update HistoryView to manage dialog state and task deletion flow
Remove VSCode native dialog from ClineProvider.ts

Author: emshvac

src/core/webview/ClineProvider.ts

@@ -2309,16 +2309,6 @@ export class ClineProvider implements vscode.WebviewViewProvider {
 	}
 
 	async deleteTaskWithId(id: string) {
-		const answer = await vscode.window.showInformationMessage(
-			"Are you sure you want to delete this task? This action cannot be undone.",
-			{ modal: true },
-			"Delete",
-		)
-
-		if (answer !== "Delete") {
-			return
-		}
-
 		if (id === this.cline?.taskId) {
 			await this.clearTask()
 		}

webview-ui/src/components/history/DeleteTaskDialog.tsx

@@ -0,0 +1,49 @@
+import React from "react"
+import {
+	AlertDialog,
+	AlertDialogAction,
+	AlertDialogCancel,
+	AlertDialogContent,
+	AlertDialogDescription,
+	AlertDialogFooter,
+	AlertDialogHeader,
+	AlertDialogTitle,
+} from "@/components/ui/alert-dialog"
+import { Button } from "@/components/ui"
+import { vscode } from "@/utils/vscode"
+
+interface DeleteTaskDialogProps {
+	taskId: string
+	open: boolean
+	onOpenChange: (open: boolean) => void
+}
+
+export const DeleteTaskDialog = ({ taskId, open, onOpenChange }: DeleteTaskDialogProps) => {
+	const handleDelete = () => {
+		vscode.postMessage({ type: "deleteTaskWithId", text: taskId })
+		onOpenChange(false)
+	}
+
+	return (
+		<AlertDialog open={open} onOpenChange={onOpenChange}>
+			<AlertDialogContent>
+				<AlertDialogHeader>
+					<AlertDialogTitle>Delete Task</AlertDialogTitle>
+					<AlertDialogDescription>
+						Are you sure you want to delete this task? This action cannot be undone.
+					</AlertDialogDescription>
+				</AlertDialogHeader>
+				<AlertDialogFooter>
+					<AlertDialogCancel asChild>
+						<Button variant="secondary">Cancel</Button>
+					</AlertDialogCancel>
+					<AlertDialogAction asChild>
+						<Button variant="destructive" onClick={handleDelete}>
+							Delete
+						</Button>
+					</AlertDialogAction>
+				</AlertDialogFooter>
+			</AlertDialogContent>
+		</AlertDialog>
+	)
+}

webview-ui/src/components/history/HistoryView.tsx

@@ -1,4 +1,5 @@
 import React, { memo, useMemo, useState, useEffect } from "react"
+import { DeleteTaskDialog } from "./DeleteTaskDialog"
 import { Fzf } from "fzf"
 import prettyBytes from "pretty-bytes"
 import { Virtuoso } from "react-virtuoso"
@@ -37,8 +38,12 @@ const HistoryView = ({ onDone }: HistoryViewProps) => {
 		vscode.postMessage({ type: "showTaskWithId", text: id })
 	}
 
+	const [deleteDialogOpen, setDeleteDialogOpen] = useState(false)
+	const [taskToDelete, setTaskToDelete] = useState<string | null>(null)
+
 	const handleDeleteHistoryItem = (id: string) => {
-		vscode.postMessage({ type: "deleteTaskWithId", text: id })
+		setTaskToDelete(id)
+		setDeleteDialogOpen(true)
 	}
 
 	const formatDate = (timestamp: number) => {
@@ -398,6 +403,18 @@ const HistoryView = ({ onDone }: HistoryViewProps) => {
 					)}
 				/>
 			</div>
+			{taskToDelete && (
+				<DeleteTaskDialog
+					taskId={taskToDelete}
+					open={deleteDialogOpen}
+					onOpenChange={(open) => {
+						setDeleteDialogOpen(open)
+						if (!open) {
+							setTaskToDelete(null)
+						}
+					}}
+				/>
+			)}
 		</div>
 	)
 }