dangerous delete

src/app.css

@@ -72,7 +72,7 @@
 	--muted-foreground: oklch(0.794 0.0372 307.1032);
 	--accent: oklch(0.3649 0.0508 308.4911);
 	--accent-foreground: oklch(0.9647 0.0091 341.8035);
-	--destructive: oklch(0.2258 0.0524 12.6119);
+	--destructive: oklch(0.5248 0.1368 20.8317);
 	--destructive-foreground: oklch(1 0 0);
 	--border: oklch(0.3286 0.0154 343.4461);
 	--input: oklch(0.3387 0.0195 332.8347);

src/routes/account/customization/+page.svelte

@@ -92,7 +92,7 @@
 					<Input id="name" name="name" placeholder="My Rule" required />
 				</div>
 				<div class="flex flex-col gap-2">
-					<Label for="attach">Attach</Label>
+					<Label for="attach">Rule Type</Label>
 					<select
 						id="attach"
 						name="attach"

src/routes/account/customization/rule.svelte

@@ -9,6 +9,7 @@
 	import { session } from '$lib/state/session.svelte';
 	import { LocalToasts } from '$lib/builders/local-toasts.svelte';
 	import { ResultAsync } from 'neverthrow';
+	import TrashIcon from '~icons/lucide/trash';
 
 	type Props = {
 		rule: Doc<'user_rules'>;
@@ -21,6 +22,7 @@
 	const client = useConvexClient();
 
 	let updating = $state(false);
+	let deleting = $state(false);
 
 	const toasts = new LocalToasts({ id });
 
@@ -53,15 +55,31 @@
 
 		updating = false;
 	}
+
+	async function deleteRule() {
+		deleting = true;
+
+		await client.mutation(api.user_rules.remove, {
+			ruleId: rule._id,
+			sessionToken: session.current?.session.token ?? '',
+		});
+
+		deleting = false;
+	}
 </script>
 
 <Card.Root>
 	<Card.Header>
+		<div class="flex items-center justify-between">
 			<Card.Title>{rule.name}</Card.Title>
+			<Button variant="destructive" size="icon" onclick={deleteRule} disabled={deleting}>
+				<TrashIcon class="size-4" />
+			</Button>
+		</div>
 	</Card.Header>
 	<Card.Content tag="form" onsubmit={updateRule}>
 		<div class="flex flex-col gap-2">
-			<Label for="attach">Attach</Label>
+			<Label for="attach">Rule Type</Label>
 			<select
 				id="attach"
 				name="attach"