minor UI fixes

frontend/src/lib/components/FlowEditor.svelte

@@ -11,6 +11,7 @@
 	import RadioButtonV2 from './RadioButtonV2.svelte'
 	import SchemaEditor from './SchemaEditor.svelte'
 	import Required from './Required.svelte'
+	import { pathIsEmpty } from '$lib/utils'
 
 	export let pathError = ''
 	export let initialPath: string = ''
@@ -120,6 +121,7 @@
 			<li class="relative m-20 ">
 				<div class="relative flex justify-center">
 					<button
+						disabled={pathIsEmpty($flowStore.path)}
 						class="default-button h-10 w-10 shadow-blue-600/40  border-blue-600 shadow"
 						on:click={() => {
 							addModule()
@@ -127,7 +129,7 @@
 						}}
 					>
 						<Icon class="text-white mb-1" data={faPlus} />
-						Add step
+						Add step {pathIsEmpty($flowStore.path) ? '(pick a path!)' : ''}
 					</button>
 				</div>
 			</li>

frontend/src/lib/components/ModuleStep.svelte

@@ -72,7 +72,7 @@
 								deno={mod.value.language === FlowModuleValue.language.DENO}
 							/>
 						</div>
-						<button class="default-button w-full p-1 mt-4" on:click={() => loadSchema(i)}>
+						<button class="default-button w-full p-1 mt-4 mb-4" on:click={() => loadSchema(i)}>
 							Infer schema
 						</button>
 					{/if}

frontend/src/lib/components/SchemaForm.svelte

@@ -35,7 +35,7 @@ previous_result.${key}`
 	{#if Object.keys(schema?.properties ?? {}).length > 0}
 		{#each Object.keys(schema?.properties ?? {}) as argName}
 			{#if inputTransform && args[argName] != undefined}
-				<div class="mt-10" />
+				<div class="mt-4" />
 				<FieldHeader
 					label={argName}
 					format={schema.properties[argName].format}

frontend/src/lib/components/flows/FlowModuleHeader.svelte

@@ -7,7 +7,7 @@
 	import github from 'svelte-highlight/styles/github'
 	import Modal from '../Modal.svelte'
 	import { createScriptFromInlineScript, fork, removeModule } from './flowStore'
-	import { getScriptByPath } from './utils'
+	import { getScriptByPath, scrollIntoView } from './utils'
 
 	export let open: number
 	export let i: number
@@ -25,16 +25,9 @@
 		modalViewer.openModal()
 	}
 
-	function scrollIntoView({ target }) {
+	function scrollTo({ target }) {
 		const el = document.querySelector(target.getAttribute('href'))
-		console.log(el)
-
-		if (!el) return
-		el.scrollIntoView({
-			behavior: 'smooth',
-			block: 'start',
-			inline: 'nearest'
-		})
+		scrollIntoView(el)
 	}
 </script>
 
@@ -44,11 +37,8 @@
 
 <div class="flex flex-row w-full space-x-2">
 	<slot />
-	<a
-		href="#module-{i}"
-		class="grow"
-		on:click={() => (open = i)}
-		on:click|preventDefault={scrollIntoView}><div class="w-full" /></a
+	<a href="#module-{i}" class="grow" on:click={() => (open = i)} on:click|preventDefault={scrollTo}
+		><div class="w-full" /></a
 	>
 
 	<div class="flex flex-row space-x-2">

frontend/src/lib/components/flows/flowStore.ts

@@ -3,7 +3,7 @@ import { FlowModuleValue, ScriptService, type Flow, type FlowModule } from '$lib
 import { initialCode } from '$lib/script_helpers'
 import { userStore, workspaceStore } from '$lib/stores'
 import { derived, get, writable } from 'svelte/store'
-import { createInlineScriptModuleFromPath, getFirstStepSchema, loadSchemaFromModule } from './utils'
+import { createInlineScriptModuleFromPath, getFirstStepSchema, loadSchemaFromModule, scrollIntoView } from './utils'
 
 export type FlowMode = 'push' | 'pull'
 
@@ -37,9 +37,14 @@ export function addModule(i?: number) {
 		input_transform: {}
 	}
 
+
 	flowStore.update((flow: Flow) => {
-		flow.value.modules.splice(i ?? flow.value.modules.length, 0, newModule)
+		const insertAt = i ?? flow.value.modules.length
+
+		flow.value.modules.splice(insertAt, 0, newModule)
 		flow.value.modules = flow.value.modules
+		setTimeout(() => scrollIntoView(document.querySelector(`#module-${insertAt}`)), 100)
+
 		return flow
 	})
 }

frontend/src/lib/components/flows/utils.ts

@@ -153,6 +153,15 @@ export async function createInlineScriptModuleFromPath(path: string): Promise<Fl
 	}
 }
 
+export function scrollIntoView(el: any) {
+	if (!el) return
+
+	el.scrollIntoView({
+		behavior: 'smooth',
+		block: 'start',
+		inline: 'nearest'
+	})
+}
 export async function loadSchemaFromModule(module: FlowModule): Promise<{
 	input_transform: Record<string, InputTransform>
 	schema: Schema

frontend/src/routes/flows/add.svelte

@@ -23,7 +23,6 @@
 			  }
 
 	initFlow(flow)
-	addModule()
 </script>
 
 <FlowBuilder />