feat: implement batch mode updates and delete confirmation dialog in ModeEnableDisableDialog

Author: mechanicmuthu

src/core/webview/webviewMessageHandler.ts

@@ -2640,39 +2640,38 @@ export const webviewMessageHandler = async (
 			// Handle bulk mode enable/disable updates
 			if (message.updates && typeof message.updates === "object") {
 				try {
-					const { ModeManager } = await import("../../services/ModeManager")
-					const modeManager = new ModeManager(provider.context, provider.customModesManager)
-
-					// Process each mode update
+					// Convert updates object into array for batch processing
+					const updatesArray: Array<{ slug: string; disabled: boolean }> = []
 					for (const [slug, disabled] of Object.entries(message.updates)) {
 						if (typeof disabled === "boolean") {
-							await modeManager.setModeDisabled(slug, disabled)
+							updatesArray.push({ slug, disabled })
 						}
 					}
 
-					// Update global state after all changes
+					if (updatesArray.length > 0) {
+						// Use CustomModesManager batch API which groups updates by file and
+						// performs each file write in a single queued operation.
+						await provider.customModesManager.setMultipleModesDisabled(updatesArray)
+					}
+
+					// Refresh state and notify webview
 					const customModes = await provider.customModesManager.getCustomModes()
 					await updateGlobalState("customModes", customModes)
 					await provider.postStateToWebview()
 
-					// Send success response
-					await provider.postMessageToWebview({
-						type: "modeDisabledStatesUpdated",
-						success: true,
-					})
+					await provider.postMessageToWebview({ type: "modeDisabledStatesUpdated", success: true })
 
-					vscode.window.showInformationMessage("Mode settings updated successfully")
+					vscode.window.showInformationMessage(t("common:info.modes_updated"))
 				} catch (error) {
 					provider.log(`Error updating mode disabled states: ${error}`)
 
-					// Send error response
 					await provider.postMessageToWebview({
 						type: "modeDisabledStatesUpdated",
 						success: false,
 						error: error instanceof Error ? error.message : String(error),
 					})
 
-					vscode.window.showErrorMessage("Failed to update mode settings")
+					vscode.window.showErrorMessage(t("common:errors.update_modes_failed"))
 				}
 			}
 			break

webview-ui/src/App.tsx

@@ -307,12 +307,23 @@ const App = () => {
 				onOpenChange={(open: boolean) => setModeDialogOpen(open)}
 				modes={modeDialogModes}
 				onSave={(updatedModes: any[]) => {
-					// Build updates map slug -> disabled
+					// Only send updates for modes whose disabled state actually changed.
 					const updates: Record<string, boolean> = {}
+					const previousModesBySlug: Record<string, any> = {}
+					for (const m of modeDialogModes) {
+						previousModesBySlug[m.slug] = m
+					}
 					for (const m of updatedModes) {
-						updates[m.slug] = !!m.disabled
+						const prev = previousModesBySlug[m.slug]
+						const prevDisabled = !!(prev && prev.disabled)
+						const newDisabled = !!m.disabled
+						if (prevDisabled !== newDisabled) {
+							updates[m.slug] = newDisabled
+						}
+					}
+					if (Object.keys(updates).length > 0) {
+						vscode.postMessage({ type: "updateModeDisabledStates", updates })
 					}
-					vscode.postMessage({ type: "updateModeDisabledStates", updates })
 					// Optimistically update local dialog modes
 					setModeDialogModes(updatedModes)
 				}}

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

@@ -12,9 +12,18 @@ import {
 	Badge,
 	Separator,
 	StandardTooltip,
+	AlertDialog,
+	AlertDialogContent,
+	AlertDialogHeader,
+	AlertDialogTitle,
+	AlertDialogDescription,
+	AlertDialogFooter,
+	AlertDialogCancel,
+	AlertDialogAction,
 } from "@src/components/ui"
 import { cn } from "@/lib/utils"
 import type { ModeConfig } from "@roo-code/types"
+import { useAppTranslation } from "@src/i18n/TranslationContext"
 
 const SOURCE_INFO = {
 	builtin: {
@@ -51,6 +60,11 @@ interface ModeEnableDisableDialogProps {
 	onSave: (updatedModes: ModeWithSource[]) => void
 }
 
+interface DeleteState {
+	open: boolean
+	tMode?: { slug: string; name: string; source?: string; rulesFolderPath?: string } | null
+}
+
 interface GroupedModes {
 	builtin: ModeWithSource[]
 	global: ModeWithSource[]
@@ -87,6 +101,10 @@ export const ModeEnableDisableDialog: React.FC<ModeEnableDisableDialogProps> = (
 	const [localModes, setLocalModes] = useState<ModeWithSource[]>(modes)
 	const [hasChanges, setHasChanges] = useState(false)
 
+	const { t } = useAppTranslation()
+
+	const [deleteState, setDeleteState] = useState<DeleteState>({ open: false, tMode: null })
+
 	// Update local state when props change
 	useEffect(() => {
 		setLocalModes(modes)
@@ -184,10 +202,55 @@ export const ModeEnableDisableDialog: React.FC<ModeEnableDisableDialogProps> = (
 			</div>
 			<div className="status-indicator flex items-center gap-1 flex-shrink-0">
 				{mode.disabled ? <EyeOff className="size-4 disabled" /> : <Eye className="size-4 enabled" />}
+				{/* Show delete for global custom modes (they override built-in or are user-created) */}
+				{mode.source === "global" && (
+					<Button
+						variant="ghost"
+						size="icon"
+						onClick={() => {
+							// Ask the extension to check for rules folder and return path via message
+							setDeleteState({
+								open: false,
+								tMode: { slug: mode.slug, name: mode.name, source: mode.source },
+							})
+							// Request checkOnly first
+							window.parent.postMessage(
+								{ type: "deleteCustomMode", slug: mode.slug, checkOnly: true },
+								"*",
+							)
+						}}>
+						<span className="codicon codicon-trash"></span>
+					</Button>
+				)}
 			</div>
 		</div>
 	)
 
+	// Listen for delete check responses from extension
+	useEffect(() => {
+		const handler = (e: MessageEvent) => {
+			const message = e.data
+			if (message.type === "deleteCustomModeCheck") {
+				if (message.slug && deleteState.tMode && deleteState.tMode.slug === message.slug) {
+					setDeleteState({
+						open: true,
+						tMode: { ...deleteState.tMode, rulesFolderPath: message.rulesFolderPath },
+					})
+				}
+			}
+		}
+		window.addEventListener("message", handler)
+		return () => window.removeEventListener("message", handler)
+	}, [deleteState.tMode])
+
+	const confirmDelete = () => {
+		if (!deleteState.tMode) return
+		window.parent.postMessage({ type: "deleteCustomMode", slug: deleteState.tMode.slug }, "*")
+		setDeleteState({ open: false, tMode: null })
+		// Close dialog after request; backend will refresh state
+		onOpenChange(false)
+	}
+
 	// Source group component
 	const SourceGroup: React.FC<{ source: ModeSource; modes: ModeWithSource[] }> = ({ source, modes }) => {
 		const sourceInfo = SOURCE_INFO[source]
@@ -317,6 +380,39 @@ export const ModeEnableDisableDialog: React.FC<ModeEnableDisableDialogProps> = (
 						</Button>
 					</div>
 				</DialogFooter>
+
+				{/* Delete confirmation dialog for global custom modes */}
+				<AlertDialog open={!!deleteState.open} onOpenChange={(open) => setDeleteState((s) => ({ ...s, open }))}>
+					<AlertDialogContent>
+						<AlertDialogHeader>
+							<AlertDialogTitle>{t ? t("prompts:deleteMode.title") : "Delete mode"}</AlertDialogTitle>
+							<AlertDialogDescription>
+								{deleteState.tMode && (
+									<>
+										{t
+											? t("prompts:deleteMode.message", { modeName: deleteState.tMode.name })
+											: `Delete ${deleteState.tMode.name}?`}
+										{deleteState.tMode.rulesFolderPath && (
+											<div className="mt-2">
+												{t
+													? t("prompts:deleteMode.rulesFolder", {
+															folderPath: deleteState.tMode.rulesFolderPath,
+														})
+													: deleteState.tMode.rulesFolderPath}
+											</div>
+										)}
+									</>
+								)}
+							</AlertDialogDescription>
+						</AlertDialogHeader>
+						<AlertDialogFooter>
+							<AlertDialogCancel>{t ? t("prompts:deleteMode.cancel") : "Cancel"}</AlertDialogCancel>
+							<AlertDialogAction onClick={confirmDelete}>
+								{t ? t("prompts:deleteMode.confirm") : "Delete"}
+							</AlertDialogAction>
+						</AlertDialogFooter>
+					</AlertDialogContent>
+				</AlertDialog>
 			</DialogContent>
 		</Dialog>
 	)