feat: edit tool spinner

src/lib/components/workspace/Tools.svelte

@@ -77,9 +77,12 @@
 			class=" flex space-x-4 cursor-pointer w-full px-3 py-2 dark:hover:bg-white/5 hover:bg-black/5 rounded-xl"
 		>
 			<div class=" flex flex-1 space-x-4 cursor-pointer w-full">
-				<a href={`/workspace/tools/edit?id=${encodeURIComponent(tool.id)}`}>
+				<a
+					href={`/workspace/tools/edit?id=${encodeURIComponent(tool.id)}`}
+					class="flex items-center"
+				>
 					<div class=" flex-1 self-center pl-5">
-						<div class=" font-bold flex items-center gap-1.5">
+						<div class=" font-semibold flex items-center gap-1.5">
 							<div>
 								{tool.name}
 							</div>

src/lib/components/workspace/Tools/ToolkitEditor.svelte

@@ -21,7 +21,7 @@
 	};
 	export let content = '';
 
-	$: if (name) {
+	$: if (name && !edit) {
 		id = name.replace(/\s+/g, '_').toLowerCase();
 	}
 
@@ -96,7 +96,7 @@
 						/>
 
 						<input
-							class="w-full px-3 py-2 text-sm font-medium bg-gray-50 dark:bg-gray-850 dark:text-gray-200 rounded-lg outline-none"
+							class="w-full px-3 py-2 text-sm font-medium disabled:text-gray-300 dark:disabled:text-gray-700 bg-gray-50 dark:bg-gray-850 dark:text-gray-200 rounded-lg outline-none"
 							type="text"
 							placeholder="Toolkit ID (e.g. my_toolkit)"
 							bind:value={id}

src/routes/(app)/workspace/tools/edit/+page.svelte

@@ -2,6 +2,7 @@
 	import { goto } from '$app/navigation';
 	import { page } from '$app/stores';
 	import { getToolById, getTools, updateToolById } from '$lib/apis/tools';
+	import Spinner from '$lib/components/common/Spinner.svelte';
 	import ToolkitEditor from '$lib/components/workspace/Tools/ToolkitEditor.svelte';
 	import { tools } from '$lib/stores';
 	import { onMount } from 'svelte';
@@ -54,4 +55,10 @@
 			saveHandler(e.detail);
 		}}
 	/>
+{:else}
+	<div class="flex items-center justify-center h-full">
+		<div class=" pb-16">
+			<Spinner />
+		</div>
+	</div>
 {/if}