feat: export tool

src/lib/components/workspace/Tools.svelte

@@ -15,6 +15,8 @@
 		getToolById,
 		getTools
 	} from '$lib/apis/tools';
+	import ArrowDownTray from '../icons/ArrowDownTray.svelte';
+	import Tooltip from '../common/Tooltip.svelte';
 
 	const i18n = getContext('i18n');
 
@@ -107,6 +109,7 @@
 				</a>
 			</div>
 			<div class="flex flex-row space-x-1 self-center">
+				<Tooltip content="Edit">
 					<a
 						class="self-center w-fit text-sm px-2 py-2 dark:text-gray-300 dark:hover:text-white hover:bg-black/5 dark:hover:bg-white/5 rounded-xl"
 						type="button"
@@ -127,7 +130,9 @@
 							/>
 						</svg>
 					</a>
+				</Tooltip>
 
+				<Tooltip content="Clone">
 					<button
 						class="self-center w-fit text-sm px-2 py-2 dark:text-gray-300 dark:hover:text-white hover:bg-black/5 dark:hover:bg-white/5 rounded-xl"
 						type="button"
@@ -164,7 +169,33 @@
 							/>
 						</svg>
 					</button>
+				</Tooltip>
 
+				<Tooltip content="Export">
+					<button
+						class="self-center w-fit text-sm px-2 py-2 dark:text-gray-300 dark:hover:text-white hover:bg-black/5 dark:hover:bg-white/5 rounded-xl"
+						type="button"
+						on:click={async (e) => {
+							e.stopPropagation();
+
+							const _tool = await getToolById(localStorage.token, tool.id).catch((error) => {
+								toast.error(error);
+								return null;
+							});
+
+							if (_tool) {
+								let blob = new Blob([JSON.stringify([_tool])], {
+									type: 'application/json'
+								});
+								saveAs(blob, `tool-${_tool.id}-export-${Date.now()}.json`);
+							}
+						}}
+					>
+						<ArrowDownTray />
+					</button>
+				</Tooltip>
+
+				<Tooltip content="Delete">
 					<button
 						class="self-center w-fit text-sm px-2 py-2 dark:text-gray-300 dark:hover:text-white hover:bg-black/5 dark:hover:bg-white/5 rounded-xl"
 						type="button"
@@ -197,6 +228,7 @@
 							/>
 						</svg>
 					</button>
+				</Tooltip>
 			</div>
 		</button>
 	{/each}