feat: implement DeleteModeDialog component for mode deletion confirmation

Author: daniel-lxs

webview-ui/src/components/modes/DeleteModeDialog.tsx

@@ -0,0 +1,56 @@
+import React from "react"
+import { useAppTranslation } from "@src/i18n/TranslationContext"
+import {
+	AlertDialog,
+	AlertDialogAction,
+	AlertDialogCancel,
+	AlertDialogContent,
+	AlertDialogDescription,
+	AlertDialogFooter,
+	AlertDialogHeader,
+	AlertDialogTitle,
+} from "@src/components/ui"
+
+interface DeleteModeDialogProps {
+	open: boolean
+	onOpenChange: (open: boolean) => void
+	modeToDelete: {
+		slug: string
+		name: string
+		source?: string
+		rulesFolderPath?: string
+	} | null
+	onConfirm: () => void
+}
+
+export const DeleteModeDialog: React.FC<DeleteModeDialogProps> = ({ open, onOpenChange, modeToDelete, onConfirm }) => {
+	const { t } = useAppTranslation()
+
+	return (
+		<AlertDialog open={open} onOpenChange={onOpenChange}>
+			<AlertDialogContent>
+				<AlertDialogHeader>
+					<AlertDialogTitle>{t("prompts:deleteMode.title")}</AlertDialogTitle>
+					<AlertDialogDescription>
+						{modeToDelete && (
+							<>
+								{t("prompts:deleteMode.message", { modeName: modeToDelete.name })}
+								{modeToDelete.rulesFolderPath && (
+									<div className="mt-2">
+										{t("prompts:deleteMode.rulesFolder", {
+											folderPath: modeToDelete.rulesFolderPath,
+										})}
+									</div>
+								)}
+							</>
+						)}
+					</AlertDialogDescription>
+				</AlertDialogHeader>
+				<AlertDialogFooter>
+					<AlertDialogCancel>{t("prompts:deleteMode.cancel")}</AlertDialogCancel>
+					<AlertDialogAction onClick={onConfirm}>{t("prompts:deleteMode.confirm")}</AlertDialogAction>
+				</AlertDialogFooter>
+			</AlertDialogContent>
+		</AlertDialog>
+	)
+}

webview-ui/src/components/modes/ModesView.tsx

@@ -46,15 +46,8 @@ import {
 	CommandGroup,
 	Input,
 	StandardTooltip,
-	AlertDialog,
-	AlertDialogAction,
-	AlertDialogCancel,
-	AlertDialogContent,
-	AlertDialogDescription,
-	AlertDialogFooter,
-	AlertDialogHeader,
-	AlertDialogTitle,
 } from "@src/components/ui"
+import { DeleteModeDialog } from "@src/components/modes/DeleteModeDialog"
 
 // Get all available groups that should show in prompts view
 const availableGroups = (Object.keys(TOOL_GROUPS) as ToolGroup[]).filter((group) => !TOOL_GROUPS[group].alwaysAvailable)
@@ -1430,43 +1423,21 @@ const ModesView = ({ onDone }: ModesViewProps) => {
 			)}
 
 			{/* Delete Mode Confirmation Dialog */}
-			<AlertDialog open={showDeleteConfirm} onOpenChange={setShowDeleteConfirm}>
-				<AlertDialogContent>
-					<AlertDialogHeader>
-						<AlertDialogTitle>{t("prompts:deleteMode.title")}</AlertDialogTitle>
-						<AlertDialogDescription>
-							{modeToDelete && (
-								<>
-									{t("prompts:deleteMode.message", { modeName: modeToDelete.name })}
-									{modeToDelete.rulesFolderPath && (
-										<div className="mt-2">
-											{t("prompts:deleteMode.rulesFolder", {
-												folderPath: modeToDelete.rulesFolderPath,
-											})}
-										</div>
-									)}
-								</>
-							)}
-						</AlertDialogDescription>
-					</AlertDialogHeader>
-					<AlertDialogFooter>
-						<AlertDialogCancel>{t("prompts:deleteMode.cancel")}</AlertDialogCancel>
-						<AlertDialogAction
-							onClick={() => {
-								if (modeToDelete) {
-									vscode.postMessage({
-										type: "deleteCustomMode",
-										slug: modeToDelete.slug,
-									})
-									setShowDeleteConfirm(false)
-									setModeToDelete(null)
-								}
-							}}>
-							{t("prompts:deleteMode.confirm")}
-						</AlertDialogAction>
-					</AlertDialogFooter>
-				</AlertDialogContent>
-			</AlertDialog>
+			<DeleteModeDialog
+				open={showDeleteConfirm}
+				onOpenChange={setShowDeleteConfirm}
+				modeToDelete={modeToDelete}
+				onConfirm={() => {
+					if (modeToDelete) {
+						vscode.postMessage({
+							type: "deleteCustomMode",
+							slug: modeToDelete.slug,
+						})
+						setShowDeleteConfirm(false)
+						setModeToDelete(null)
+					}
+				}}
+			/>
 		</Tab>
 	)
 }