From c072d0474cfc2f330d7f3912991a855e4b592226 Mon Sep 17 00:00:00 2001
From: MechaCat02 <fabian@diekaulbachs.de>
Date: Sun, 7 Jun 2026 21:01:15 +0200
Subject: [PATCH] fix(dashboard): F-U-007 ConfirmModal for route deletion
 (replace native confirm/alert)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

scripts/[id]'s removeRoute used window.confirm('Delete this route?')
and surfaced errors via window.alert(). The rest of the dashboard had
adopted ConfirmModal for this exact case — the browser modal was
unstyled, couldn't show route detail, and the alert dead-end made
errors hard to recover from.

Rebuild around ConfirmModal:
- requestRemoveRoute(route) opens the modal carrying the full Route.
- The modal body shows `method path` plus `on host` if host-bound.
- A muted line explains the consequence ("Existing inbound requests
  will 404 on this path immediately").
- Errors surface inline via removeRouteError instead of `alert()`.

AUDIT.md anchor: F-U-007.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../src/routes/scripts/[id]/+page.svelte      | 50 +++++++++++++++++--
 1 file changed, 45 insertions(+), 5 deletions(-)

diff --git a/dashboard/src/routes/scripts/[id]/+page.svelte b/dashboard/src/routes/scripts/[id]/+page.svelte
index 330b261..3b3a5f7 100644
--- a/dashboard/src/routes/scripts/[id]/+page.svelte
+++ b/dashboard/src/routes/scripts/[id]/+page.svelte
@@ -278,13 +278,30 @@
 		}
 	}
 
-	async function removeRoute(routeId: string) {
-		if (!confirm('Delete this route?')) return;
+	// F-U-007: ConfirmModal replaces the native confirm/alert flow so
+	// the route detail is in the body and any error gets an inline
+	// region instead of an unstyled browser modal.
+	let routeToRemove = $state<Route | null>(null);
+	let removingRoute = $state(false);
+	let removeRouteError = $state<string | null>(null);
+
+	function requestRemoveRoute(route: Route) {
+		routeToRemove = route;
+		removeRouteError = null;
+	}
+
+	async function confirmRemoveRoute() {
+		if (!routeToRemove) return;
+		removingRoute = true;
+		removeRouteError = null;
 		try {
-			await api.routes.remove(routeId);
+			await api.routes.remove(routeToRemove.id);
+			routeToRemove = null;
 			await loadRoutes();
 		} catch (e) {
-			alert(e instanceof Error ? e.message : String(e));
+			removeRouteError = e instanceof Error ? e.message : String(e);
+		} finally {
+			removingRoute = false;
 		}
 	}
 
@@ -679,7 +696,7 @@
 									</span>
 									<span class="path">{r.path}</span>
 									{#if canWrite}
-										<button type="button" class="link danger" onclick={() => removeRoute(r.id)}>
+										<button type="button" class="link danger" onclick={() => requestRemoveRoute(r)}>
 											remove
 										</button>
 									{/if}
@@ -841,6 +858,29 @@
 			</section>
 		{/if}
 
+		{#if routeToRemove}
+			<!-- F-U-007: route delete confirm modal, replacing native confirm/alert. -->
+			<ConfirmModal
+				title="Delete route"
+				variant="danger"
+				confirmLabel="Delete route"
+				busyLabel="Deleting…"
+				busy={removingRoute}
+				onConfirm={confirmRemoveRoute}
+				onCancel={() => (routeToRemove = null)}
+			>
+				<p>
+					Delete route
+					<code>{routeToRemove.method ?? 'ANY'} {routeToRemove.path}</code>
+					{#if routeToRemove.host}on <code>{routeToRemove.host}</code>{/if}?
+				</p>
+				<p class="muted">Existing inbound requests will start 404'ing on this path immediately.</p>
+				{#if removeRouteError}
+					<p class="modal-error">{removeRouteError}</p>
+				{/if}
+			</ConfirmModal>
+		{/if}
+
 		{#if confirmingDelete && script}
 			<ConfirmModal
 				title="Delete script “{script.name}”"