enh: load tool by url

src/lib/components/workspace/Tools.svelte

@@ -10,6 +10,7 @@
 	import { goto } from '$app/navigation';
 	import {
 		createNewTool,
+		loadToolByUrl,
 		deleteToolById,
 		exportTools,
 		getToolById,
@@ -32,6 +33,8 @@
 	import Spinner from '../common/Spinner.svelte';
 	import { capitalizeFirstLetter } from '$lib/utils';
 	import XMark from '../icons/XMark.svelte';
+	import AddToolMenu from './Tools/AddToolMenu.svelte';
+	import ImportModal from '../ImportModal.svelte';
 
 	const i18n = getContext('i18n');
 
@@ -53,6 +56,8 @@
 	let tools = [];
 	let filteredItems = [];
 
+	let showImportModal = false;
+
 	$: filteredItems = tools.filter((t) => {
 		if (query === '') return true;
 		const lowerQuery = query.toLowerCase();
@@ -173,6 +178,19 @@
 	</title>
 </svelte:head>
 
+<ImportModal
+	bind:show={showImportModal}
+	onImport={(tool) => {
+		sessionStorage.tool = JSON.stringify({
+			...tool
+		});
+		goto('/workspace/tools/create');
+	}}
+	loadUrlHandler={async (url) => {
+		return await loadToolByUrl(localStorage.token, url);
+	}}
+/>
+
 {#if loaded}
 	<div class="flex flex-col gap-1 my-1.5">
 		<div class="flex justify-between items-center">
@@ -210,12 +228,29 @@
 			</div>
 
 			<div>
-				<a
-					class=" px-2 py-2 rounded-xl hover:bg-gray-700/10 dark:hover:bg-gray-100/10 dark:text-gray-300 dark:hover:text-white transition font-medium text-sm flex items-center space-x-1"
-					href="/workspace/tools/create"
-				>
-					<Plus className="size-3.5" />
-				</a>
+				{#if $user?.role === 'admin'}
+					<AddToolMenu
+						createHandler={() => {
+							goto('/workspace/tools/create');
+						}}
+						importFromLinkHandler={() => {
+							showImportModal = true;
+						}}
+					>
+						<div
+							class=" px-2 py-2 rounded-xl hover:bg-gray-700/10 dark:hover:bg-gray-100/10 dark:text-gray-300 dark:hover:text-white transition font-medium text-sm flex items-center space-x-1"
+						>
+							<Plus className="size-3.5" />
+						</div>
+					</AddToolMenu>
+				{:else}
+					<a
+						class=" px-2 py-2 rounded-xl hover:bg-gray-700/10 dark:hover:bg-gray-100/10 dark:text-gray-300 dark:hover:text-white transition font-medium text-sm flex items-center space-x-1"
+						href="/workspace/tools/create"
+					>
+						<Plus className="size-3.5" />
+					</a>
+				{/if}
 			</div>
 		</div>
 	</div>