From c5ed3452d2e035c7e79879b7a25c38ac4f14c800 Mon Sep 17 00:00:00 2001
From: "Timothy J. Baek" <timothyjrbeck@gmail.com>
Date: Mon, 10 Jun 2024 17:52:12 -0700
Subject: [PATCH] refac

---
 src/lib/components/common/CodeEditor.svelte | 12 ++++--
 src/lib/components/workspace/Tools.svelte   | 45 ++++++++++++++++-----
 2 files changed, 42 insertions(+), 15 deletions(-)

diff --git a/src/lib/components/common/CodeEditor.svelte b/src/lib/components/common/CodeEditor.svelte
index d505b16a1..4d2bfcd5a 100644
--- a/src/lib/components/common/CodeEditor.svelte
+++ b/src/lib/components/common/CodeEditor.svelte
@@ -26,7 +26,6 @@
 
 	export const formatPythonCodeHandler = async () => {
 		if (codeEditor) {
-			console.log('formatPythonCodeHandler');
 			const res = await formatPythonCode(value).catch((error) => {
 				toast.error(error);
 				return null;
@@ -111,11 +110,16 @@
 		// Add a keyboard shortcut to format the code when Ctrl/Cmd + S is pressed
 		// Override the default browser save functionality
 
-		const handleSave = (e) => {
+		const handleSave = async (e) => {
 			if ((e.ctrlKey || e.metaKey) && e.key === 's') {
 				e.preventDefault();
-				formatPythonCodeHandler();
-				dispatch('save');
+				const res = await formatPythonCodeHandler().catch((error) => {
+					return null;
+				});
+
+				if (res) {
+					dispatch('save');
+				}
 			}
 		};
 
diff --git a/src/lib/components/workspace/Tools.svelte b/src/lib/components/workspace/Tools.svelte
index 82f402203..faa05d7e7 100644
--- a/src/lib/components/workspace/Tools.svelte
+++ b/src/lib/components/workspace/Tools.svelte
@@ -7,6 +7,8 @@
 
 	let loading = false;
 
+	let name = '';
+
 	let codeEditor;
 
 	const submitHandler = async () => {
@@ -22,18 +24,39 @@
 <div class=" flex flex-col justify-between w-full overflow-y-auto h-full">
 	<div class="mx-auto w-full md:px-0 h-full">
 		<div class=" flex flex-col max-h-[100dvh] h-full">
-			<div class="mb-2.5 flex-1 overflow-auto h-0 rounded-lg">
-				<CodeEditor bind:this={codeEditor} />
+			<div class="">
+				<div class="flex justify-between items-center">
+					<div class=" text-lg font-semibold self-center">{$i18n.t('Tools')}</div>
+				</div>
 			</div>
-			<div class="pb-3">
-				<button
-					class="px-3 py-1.5 text-sm font-medium bg-emerald-600 hover:bg-emerald-700 text-gray-50 transition rounded-lg"
-					on:click={() => {
-						submitHandler();
-					}}
-				>
-					{$i18n.t('Save')}
-				</button>
+
+			<hr class="  dark:border-gray-850 my-2" />
+
+			<div class="flex flex-col flex-1 overflow-auto h-0 rounded-lg">
+				<div class="w-full mb-2">
+					<!-- Toolkit Name Input -->
+					<input
+						class="w-full px-3 py-2 text-sm font-medium bg-gray-100 dark:bg-gray-850 dark:text-gray-200 rounded-lg outline-none"
+						type="text"
+						placeholder="Toolkit Name (e.g. my_toolkit)"
+						bind:value={name}
+					/>
+				</div>
+
+				<div class="mb-2 flex-1 overflow-auto h-0 rounded-lg">
+					<CodeEditor bind:this={codeEditor} />
+				</div>
+
+				<div class="pb-3 flex justify-end">
+					<button
+						class="px-3 py-1.5 text-sm font-medium bg-emerald-600 hover:bg-emerald-700 text-gray-50 transition rounded-lg"
+						on:click={() => {
+							submitHandler();
+						}}
+					>
+						{$i18n.t('Save')}
+					</button>
+				</div>
 			</div>
 		</div>
 	</div>