refac

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,12 +110,17 @@
 		// 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();
+				const res = await formatPythonCodeHandler().catch((error) => {
+					return null;
+				});
+
+				if (res) {
 					dispatch('save');
 				}
+			}
 		};
 
 		document.addEventListener('keydown', handleSave);

src/lib/components/workspace/Tools.svelte

@@ -7,6 +7,8 @@
 
 	let loading = false;
 
+	let name = '';
+
 	let codeEditor;
 
 	const submitHandler = async () => {
@@ -22,10 +24,30 @@
 <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">
+			<div class="">
+				<div class="flex justify-between items-center">
+					<div class=" text-lg font-semibold self-center">{$i18n.t('Tools')}</div>
+				</div>
+			</div>
+
+			<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">
+
+				<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={() => {
@@ -37,4 +59,5 @@
 				</div>
 			</div>
 		</div>
+	</div>
 </div>