Skip to content

Commit 49465df

Browse files
committed
feat: implement DeleteModeDialog component for mode deletion confirmation
1 parent 088ef40 commit 49465df

File tree

2 files changed

+72
-45
lines changed

2 files changed

+72
-45
lines changed
Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
import React from "react"
2+
import { useAppTranslation } from "@src/i18n/TranslationContext"
3+
import {
4+
AlertDialog,
5+
AlertDialogAction,
6+
AlertDialogCancel,
7+
AlertDialogContent,
8+
AlertDialogDescription,
9+
AlertDialogFooter,
10+
AlertDialogHeader,
11+
AlertDialogTitle,
12+
} from "@src/components/ui"
13+
14+
interface DeleteModeDialogProps {
15+
open: boolean
16+
onOpenChange: (open: boolean) => void
17+
modeToDelete: {
18+
slug: string
19+
name: string
20+
source?: string
21+
rulesFolderPath?: string
22+
} | null
23+
onConfirm: () => void
24+
}
25+
26+
export const DeleteModeDialog: React.FC<DeleteModeDialogProps> = ({ open, onOpenChange, modeToDelete, onConfirm }) => {
27+
const { t } = useAppTranslation()
28+
29+
return (
30+
<AlertDialog open={open} onOpenChange={onOpenChange}>
31+
<AlertDialogContent>
32+
<AlertDialogHeader>
33+
<AlertDialogTitle>{t("prompts:deleteMode.title")}</AlertDialogTitle>
34+
<AlertDialogDescription>
35+
{modeToDelete && (
36+
<>
37+
{t("prompts:deleteMode.message", { modeName: modeToDelete.name })}
38+
{modeToDelete.rulesFolderPath && (
39+
<div className="mt-2">
40+
{t("prompts:deleteMode.rulesFolder", {
41+
folderPath: modeToDelete.rulesFolderPath,
42+
})}
43+
</div>
44+
)}
45+
</>
46+
)}
47+
</AlertDialogDescription>
48+
</AlertDialogHeader>
49+
<AlertDialogFooter>
50+
<AlertDialogCancel>{t("prompts:deleteMode.cancel")}</AlertDialogCancel>
51+
<AlertDialogAction onClick={onConfirm}>{t("prompts:deleteMode.confirm")}</AlertDialogAction>
52+
</AlertDialogFooter>
53+
</AlertDialogContent>
54+
</AlertDialog>
55+
)
56+
}

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

Lines changed: 16 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -46,15 +46,8 @@ import {
4646
CommandGroup,
4747
Input,
4848
StandardTooltip,
49-
AlertDialog,
50-
AlertDialogAction,
51-
AlertDialogCancel,
52-
AlertDialogContent,
53-
AlertDialogDescription,
54-
AlertDialogFooter,
55-
AlertDialogHeader,
56-
AlertDialogTitle,
5749
} from "@src/components/ui"
50+
import { DeleteModeDialog } from "@src/components/modes/DeleteModeDialog"
5851

5952
// Get all available groups that should show in prompts view
6053
const availableGroups = (Object.keys(TOOL_GROUPS) as ToolGroup[]).filter((group) => !TOOL_GROUPS[group].alwaysAvailable)
@@ -1577,43 +1570,21 @@ const ModesView = ({ onDone }: ModesViewProps) => {
15771570
)}
15781571

15791572
{/* Delete Mode Confirmation Dialog */}
1580-
<AlertDialog open={showDeleteConfirm} onOpenChange={setShowDeleteConfirm}>
1581-
<AlertDialogContent>
1582-
<AlertDialogHeader>
1583-
<AlertDialogTitle>{t("prompts:deleteMode.title")}</AlertDialogTitle>
1584-
<AlertDialogDescription>
1585-
{modeToDelete && (
1586-
<>
1587-
{t("prompts:deleteMode.message", { modeName: modeToDelete.name })}
1588-
{modeToDelete.rulesFolderPath && (
1589-
<div className="mt-2">
1590-
{t("prompts:deleteMode.rulesFolder", {
1591-
folderPath: modeToDelete.rulesFolderPath,
1592-
})}
1593-
</div>
1594-
)}
1595-
</>
1596-
)}
1597-
</AlertDialogDescription>
1598-
</AlertDialogHeader>
1599-
<AlertDialogFooter>
1600-
<AlertDialogCancel>{t("prompts:deleteMode.cancel")}</AlertDialogCancel>
1601-
<AlertDialogAction
1602-
onClick={() => {
1603-
if (modeToDelete) {
1604-
vscode.postMessage({
1605-
type: "deleteCustomMode",
1606-
slug: modeToDelete.slug,
1607-
})
1608-
setShowDeleteConfirm(false)
1609-
setModeToDelete(null)
1610-
}
1611-
}}>
1612-
{t("prompts:deleteMode.confirm")}
1613-
</AlertDialogAction>
1614-
</AlertDialogFooter>
1615-
</AlertDialogContent>
1616-
</AlertDialog>
1573+
<DeleteModeDialog
1574+
open={showDeleteConfirm}
1575+
onOpenChange={setShowDeleteConfirm}
1576+
modeToDelete={modeToDelete}
1577+
onConfirm={() => {
1578+
if (modeToDelete) {
1579+
vscode.postMessage({
1580+
type: "deleteCustomMode",
1581+
slug: modeToDelete.slug,
1582+
})
1583+
setShowDeleteConfirm(false)
1584+
setModeToDelete(null)
1585+
}
1586+
}}
1587+
/>
16171588
</Tab>
16181589
)
16191590
}

0 commit comments

Comments
 (0)