From 8fc5587876f97b8014b66971a0774f83419ed13b Mon Sep 17 00:00:00 2001
From: Sanju Sivalingam <spikeysanju98@gmail.com>
Date: Tue, 17 Feb 2026 14:43:46 +0530
Subject: [PATCH] fix: use schema-based deleteKey and reactive key list refresh

- Add deleteKeySchema for proper FormData validation
- Return { deleted: true } from deleteKey for change tracking
- Use $state for keysPromise to refresh list after create/delete

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 web/src/lib/api/api-keys.remote.ts             |  7 +++----
 web/src/lib/schema/api-keys.ts                 |  4 ++++
 web/src/routes/dashboard/api-keys/+page.svelte | 10 +++++++++-
 3 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/web/src/lib/api/api-keys.remote.ts b/web/src/lib/api/api-keys.remote.ts
index 65be17e..1bc90f8 100644
--- a/web/src/lib/api/api-keys.remote.ts
+++ b/web/src/lib/api/api-keys.remote.ts
@@ -1,6 +1,6 @@
 import { form, getRequestEvent, query } from '$app/server';
 import { auth } from '$lib/server/auth';
-import { createKeySchema } from '$lib/schema/api-keys';
+import { createKeySchema, deleteKeySchema } from '$lib/schema/api-keys';
 
 export const listKeys = query(async () => {
 	const { request } = getRequestEvent();
@@ -16,12 +16,11 @@ export const createKey = form(createKeySchema, async ({ name }) => {
 	return result;
 });
 
-export const deleteKey = form(async () => {
+export const deleteKey = form(deleteKeySchema, async ({ keyId }) => {
 	const { request } = getRequestEvent();
-	const formData = await request.clone().formData();
-	const keyId = formData.get('keyId') as string;
 	await auth.api.deleteApiKey({
 		body: { keyId },
 		headers: request.headers
 	});
+	return { deleted: true };
 });
diff --git a/web/src/lib/schema/api-keys.ts b/web/src/lib/schema/api-keys.ts
index aeca962..71f87db 100644
--- a/web/src/lib/schema/api-keys.ts
+++ b/web/src/lib/schema/api-keys.ts
@@ -3,3 +3,7 @@ import { object, string, pipe, minLength } from 'valibot';
 export const createKeySchema = object({
 	name: pipe(string(), minLength(1))
 });
+
+export const deleteKeySchema = object({
+	keyId: pipe(string(), minLength(1))
+});
diff --git a/web/src/routes/dashboard/api-keys/+page.svelte b/web/src/routes/dashboard/api-keys/+page.svelte
index 389577c..c07bb88 100644
--- a/web/src/routes/dashboard/api-keys/+page.svelte
+++ b/web/src/routes/dashboard/api-keys/+page.svelte
@@ -2,10 +2,18 @@
 	import { listKeys, createKey, deleteKey } from '$lib/api/api-keys.remote';
 
 	let newKeyValue = $state<string | null>(null);
+	let keysPromise = $state(listKeys());
 
 	$effect(() => {
 		if (createKey.result?.key) {
 			newKeyValue = createKey.result.key;
+			keysPromise = listKeys();
+		}
+	});
+
+	$effect(() => {
+		if (deleteKey.result?.deleted) {
+			keysPromise = listKeys();
 		}
 	});
 </script>
@@ -71,7 +79,7 @@
 		<h3 class="font-semibold">Your Keys</h3>
 	</div>
 
-	{#await listKeys()}
+	{#await keysPromise}
 		<div class="px-6 py-8 text-center text-sm text-neutral-500">Loading keys...</div>
 	{:then keys}
 		{#if keys && keys.length > 0}