From 158ccbbd069205963edfb378badd725013c2f0c3 Mon Sep 17 00:00:00 2001
From: oppiliappan <me@oppi.li>
Date: Fri, 2 Oct 2026 22:07:06 +0100
Subject: [PATCH] web/ui: add a destructive button and use it on final deletes

bright red for big no-nos

Signed-off-by: oppiliappan <me@oppi.li>
---
 web/src/lib/components/repo/pulls/PullActions.svelte |  8 +++++++-
 web/src/lib/components/settings/AvatarForm.svelte    |  2 +-
 .../lib/components/settings/RepoGeneralForm.svelte   |  2 +-
 .../lib/components/settings/tabs/EmailsTab.svelte    |  2 +-
 web/src/lib/components/settings/tabs/KnotsTab.svelte |  2 +-
 .../lib/components/settings/tabs/SpindlesTab.svelte  |  2 +-
 web/src/lib/components/strings/StringHeader.svelte   |  2 +-
 web/src/lib/components/ui/Button.stories.svelte      | 12 +++++++++++-
 web/src/lib/components/ui/Button.svelte              |  6 ++++++
 web/src/lib/components/ui/ConfirmModal.svelte        |  2 +-
 web/src/lib/components/welcome/KeysStep.svelte       |  2 +-
 .../[handle]/[repo]/settings/access/+page.svelte     |  1 +
 .../[handle]/[repo]/settings/hooks/+page.svelte      |  2 +-
 .../[handle]/[repo]/settings/pipelines/+page.svelte  |  2 +-
 web/src/routes/settings/profile/delete/+page.svelte  |  2 +-
 15 files changed, 36 insertions(+), 13 deletions(-)

diff --git a/web/src/lib/components/repo/pulls/PullActions.svelte b/web/src/lib/components/repo/pulls/PullActions.svelte
index cdd3bfcd7..67b31ff8c 100644
--- a/web/src/lib/components/repo/pulls/PullActions.svelte
+++ b/web/src/lib/components/repo/pulls/PullActions.svelte
@@ -91,7 +91,13 @@
 			</Button>
 		{/if}
 		{#if canDeleteBranch}
-			<Button class="flex-1" icon={Trash2} {loading} onclick={onDeleteBranch}>
+			<Button
+				variant="destructive"
+				class="flex-1"
+				icon={Trash2}
+				{loading}
+				onclick={onDeleteBranch}
+			>
 				Delete Branch
 			</Button>
 		{/if}
diff --git a/web/src/lib/components/settings/AvatarForm.svelte b/web/src/lib/components/settings/AvatarForm.svelte
index d24f4246a..12561898a 100644
--- a/web/src/lib/components/settings/AvatarForm.svelte
+++ b/web/src/lib/components/settings/AvatarForm.svelte
@@ -73,7 +73,7 @@
 	<FormActions>
 		{#snippet start()}
 			<Button
-				variant="danger"
+				variant="destructive"
 				icon={Trash}
 				disabled={!hasAvatar || save.loading}
 				loading={removing}
diff --git a/web/src/lib/components/settings/RepoGeneralForm.svelte b/web/src/lib/components/settings/RepoGeneralForm.svelte
index 1b1b68090..47b057bc4 100644
--- a/web/src/lib/components/settings/RepoGeneralForm.svelte
+++ b/web/src/lib/components/settings/RepoGeneralForm.svelte
@@ -262,7 +262,7 @@
 	{#snippet footer()}
 		<Button icon={X} onclick={() => (confirmDelete = false)}>Cancel</Button>
 		<Button
-			variant="danger"
+			variant="destructive"
 			icon={Trash}
 			disabled={confirmName.trim() !== repo.name}
 			loading={destroy.loading}
diff --git a/web/src/lib/components/settings/tabs/EmailsTab.svelte b/web/src/lib/components/settings/tabs/EmailsTab.svelte
index 42d762c89..2514aa671 100644
--- a/web/src/lib/components/settings/tabs/EmailsTab.svelte
+++ b/web/src/lib/components/settings/tabs/EmailsTab.svelte
@@ -269,7 +269,7 @@
 					{/if}
 					{#if !email.primary}
 						<Button
-							variant="danger"
+							variant="destructive"
 							icon={Trash}
 							disabled={deleteOne.loading}
 							onclick={() => deleteOne.run(email.address)}
diff --git a/web/src/lib/components/settings/tabs/KnotsTab.svelte b/web/src/lib/components/settings/tabs/KnotsTab.svelte
index a508f6918..ae2143dc9 100644
--- a/web/src/lib/components/settings/tabs/KnotsTab.svelte
+++ b/web/src/lib/components/settings/tabs/KnotsTab.svelte
@@ -64,7 +64,7 @@
 			{#each loaded.data as knot (knot)}
 				<SettingsRow icon={Server} title={knot} stack>
 					<Button
-						variant="danger"
+						variant="destructive"
 						icon={Trash}
 						loading={remove.loading && remove.args?.[0] === knot}
 						onclick={() => remove.run(knot)}
diff --git a/web/src/lib/components/settings/tabs/SpindlesTab.svelte b/web/src/lib/components/settings/tabs/SpindlesTab.svelte
index 13be9edfa..1fbeedc47 100644
--- a/web/src/lib/components/settings/tabs/SpindlesTab.svelte
+++ b/web/src/lib/components/settings/tabs/SpindlesTab.svelte
@@ -64,7 +64,7 @@
 			{#each loaded.data as spindle (spindle)}
 				<SettingsRow icon={Spool} title={spindle} stack>
 					<Button
-						variant="danger"
+						variant="destructive"
 						icon={Trash}
 						loading={remove.loading && remove.args?.[0] === spindle}
 						onclick={() => remove.run(spindle)}
diff --git a/web/src/lib/components/strings/StringHeader.svelte b/web/src/lib/components/strings/StringHeader.svelte
index d39f9af15..818745e7f 100644
--- a/web/src/lib/components/strings/StringHeader.svelte
+++ b/web/src/lib/components/strings/StringHeader.svelte
@@ -80,7 +80,7 @@
 				Edit
 			</Button>
 			<Button
-				variant="danger"
+				variant="destructive"
 				size="small"
 				icon={Trash2}
 				onclick={ondelete}
diff --git a/web/src/lib/components/ui/Button.stories.svelte b/web/src/lib/components/ui/Button.stories.svelte
index 901f6b221..ab8d7fe64 100644
--- a/web/src/lib/components/ui/Button.stories.svelte
+++ b/web/src/lib/components/ui/Button.stories.svelte
@@ -13,7 +13,15 @@
 		argTypes: {
 			variant: {
 				control: { type: "select" },
-				options: ["default", "primary", "ghost", "danger", "success", "warning"]
+				options: [
+					"default",
+					"primary",
+					"ghost",
+					"danger",
+					"destructive",
+					"success",
+					"warning"
+				]
 			},
 			size: {
 				control: { type: "inline-radio" },
@@ -44,6 +52,8 @@
 <Story name="Primary" args={{ variant: "primary" }}>Save</Story>
 <Story name="Ghost" args={{ variant: "ghost" }}>Cancel</Story>
 <Story name="Danger" args={{ variant: "danger" }}>Delete</Story>
+<Story name="Destructive" args={{ variant: "destructive" }}>Delete</Story>
+<Story name="Destructive hold" args={{ variant: "destructive", holdToConfirm: true }}>Delete</Story>
 <Story name="Success" args={{ variant: "success" }}>Confirm</Story>
 <Story name="Warning" args={{ variant: "warning" }}>Careful</Story>
 <Story name="Loading" args={{ variant: "primary", loading: true }}>Saving</Story>
diff --git a/web/src/lib/components/ui/Button.svelte b/web/src/lib/components/ui/Button.svelte
index f272c1efb..313b2815a 100644
--- a/web/src/lib/components/ui/Button.svelte
+++ b/web/src/lib/components/ui/Button.svelte
@@ -28,6 +28,7 @@
 					"aria-disabled:border-transparent aria-disabled:bg-background-subtle aria-disabled:text-foreground-subtle"
 				],
 				primary: ["[--btn-brand:var(--color-background-info-emphasis)]", ...emphasis],
+				destructive: ["[--btn-brand:oklch(50.5%_0.213_27.518)]", ...emphasis],
 				ghost: [
 					"border border-transparent bg-transparent",
 					"hover:bg-background-inset aria-expanded:bg-background-inset",
@@ -473,6 +474,11 @@
 		color: var(--color-foreground-on-emphasis);
 	}
 
+	.hold-button[data-variant="destructive"] .hold-fill {
+		background: color-mix(in oklch, var(--btn-brand), black 25%);
+		color: white;
+	}
+
 	.hold-button[data-variant="primary"] .hold-fill {
 		background: var(--color-background-success-emphasis-hover);
 		color: var(--color-foreground-on-emphasis);
diff --git a/web/src/lib/components/ui/ConfirmModal.svelte b/web/src/lib/components/ui/ConfirmModal.svelte
index 69752bbd3..eaf50604c 100644
--- a/web/src/lib/components/ui/ConfirmModal.svelte
+++ b/web/src/lib/components/ui/ConfirmModal.svelte
@@ -18,7 +18,7 @@
 		title,
 		description,
 		confirmLabel,
-		variant = "danger",
+		variant = "destructive",
 		cancelLabel = "Cancel",
 		loading = false,
 		onconfirm
diff --git a/web/src/lib/components/welcome/KeysStep.svelte b/web/src/lib/components/welcome/KeysStep.svelte
index f5f64d314..f2ec3096e 100644
--- a/web/src/lib/components/welcome/KeysStep.svelte
+++ b/web/src/lib/components/welcome/KeysStep.svelte
@@ -158,7 +158,7 @@
 			Cancel
 		</Button>
 		<Button
-			variant="danger"
+			variant="destructive"
 			icon={Trash}
 			class="flex-1"
 			loading={!!deleting}
diff --git a/web/src/routes/[handle]/[repo]/settings/access/+page.svelte b/web/src/routes/[handle]/[repo]/settings/access/+page.svelte
index 002a0efa5..108d701e0 100644
--- a/web/src/routes/[handle]/[repo]/settings/access/+page.svelte
+++ b/web/src/routes/[handle]/[repo]/settings/access/+page.svelte
@@ -84,6 +84,7 @@
 					{/snippet}
 					{#if person.standing !== "owner"}
 						<Button
+							variant="destructive"
 							icon={UserRoundMinus}
 							loading={remove.loading && remove.args?.[0] === person.did}
 							onclick={() => remove.run(person.did)}
diff --git a/web/src/routes/[handle]/[repo]/settings/hooks/+page.svelte b/web/src/routes/[handle]/[repo]/settings/hooks/+page.svelte
index 2b59d9fba..d8ff276f7 100644
--- a/web/src/routes/[handle]/[repo]/settings/hooks/+page.svelte
+++ b/web/src/routes/[handle]/[repo]/settings/hooks/+page.svelte
@@ -129,7 +129,7 @@
 									>Edit</Button
 								>
 								<Button
-									variant="danger"
+									variant="destructive"
 									icon={Trash}
 									loading={remove.loading && remove.args?.[0] === hook.id}
 									onclick={() => confirmDelete(hook)}>Delete</Button
diff --git a/web/src/routes/[handle]/[repo]/settings/pipelines/+page.svelte b/web/src/routes/[handle]/[repo]/settings/pipelines/+page.svelte
index 45b19e84d..2390f8dc7 100644
--- a/web/src/routes/[handle]/[repo]/settings/pipelines/+page.svelte
+++ b/web/src/routes/[handle]/[repo]/settings/pipelines/+page.svelte
@@ -183,7 +183,7 @@
 							</span>
 						{/snippet}
 						<Button
-							variant="danger"
+							variant="destructive"
 							icon={Trash}
 							loading={drop.loading && drop.args?.[0] === secret.key}
 							onclick={() => drop.run(secret.key)}>Delete</Button
diff --git a/web/src/routes/settings/profile/delete/+page.svelte b/web/src/routes/settings/profile/delete/+page.svelte
index 280b16847..8ce1f37e2 100644
--- a/web/src/routes/settings/profile/delete/+page.svelte
+++ b/web/src/routes/settings/profile/delete/+page.svelte
@@ -31,6 +31,6 @@
 	<FormActions>
 		<Button href="/settings" icon={X}>Cancel</Button>
 		<!-- mocked — account lifecycle is backed by G4 -->
-		<Button variant="danger" icon={Mail} disabled={!valid}>Send deletion code</Button>
+		<Button variant="destructive" icon={Mail} disabled={!valid}>Send deletion code</Button>
 	</FormActions>
 </DrillDown>
-- 
2.51.2