fix(frontend): split early stop + fix highlight code

frontend/src/lib/components/HighlightCode.svelte

@@ -7,8 +7,8 @@
 	export let code: string = ''
 	export let language: 'python3' | 'deno' | 'go' | undefined
 
-	function getLang() {
-		switch (language) {
+	function getLang(lang: string | undefined) {
+		switch (lang) {
 			case 'python3':
 				return python
 			case 'deno':
@@ -19,6 +19,8 @@
 				return python
 		}
 	}
+
+	$: lang = getLang(language)
 </script>
 
-<Highlight language={getLang()} {code} />
+<Highlight language={lang} {code} />

frontend/src/lib/components/flows/content/FlowModule.svelte

@@ -27,7 +27,7 @@
 	import { flowStore } from '$lib/components/flows/flowStore'
 	import SchemaForm from '$lib/components/SchemaForm.svelte'
 
-	import { RawScript, type Flow, type FlowModule } from '$lib/gen'
+	import { RawScript, type FlowModule } from '$lib/gen'
 	import FlowCard from '../common/FlowCard.svelte'
 	import FlowModuleHeader from './FlowModuleHeader.svelte'
 	import { flowStateStore, type FlowModuleState } from '../flowState'
@@ -35,10 +35,11 @@
 	import PropPickerWrapper from '../propPicker/PropPickerWrapper.svelte'
 	import { getContext, setContext } from 'svelte'
 	import type { FlowEditorContext } from '../types'
-	import FlowModuleAdvancedSettings from './FlowModuleAdvancedSettings.svelte'
 	import { loadSchemaFromModule } from '../utils'
 	import { writable, type Writable } from 'svelte/store'
 	import FlowModuleScript from './FlowModuleScript.svelte'
+	import FlowModuleEarlyStop from './FlowModuleEarlyStop.svelte'
+	import FlowModuleSuspend from './FlowModuleSuspend.svelte'
 
 	const { selectedId, select, previewArgs } = getContext<FlowEditorContext>('FlowEditorContext')
 
@@ -111,6 +112,7 @@
 			<FlowModuleHeader
 				bind:module={flowModule}
 				on:delete
+				on:toggleStopAfterIf={() => (selected = 'early-stop')}
 				on:fork={() => apply(fork, flowModule)}
 				on:createScriptFromInlineScript={() => {
 					apply(createScriptFromInlineScript, {
@@ -187,7 +189,8 @@
 							<Tab value="inputs">Inputs</Tab>
 							<Tab value="test">Test</Tab>
 							{#if !$selectedId.includes('failure')}
-								<Tab value="advanced">Advanced</Tab>
+								<Tab value="early-stop">Early Stop</Tab>
+								<Tab value="suspend">Suspend</Tab>
 							{/if}
 
 							<svelte:fragment slot="content">
@@ -213,9 +216,15 @@
 										/>
 									</TabContent>
 
-									<TabContent value="advanced" class="flex flex-col flex-1 h-full">
+									<TabContent value="early-stop" class="flex flex-col flex-1 h-full">
 										<div class="p-4 overflow-y-auto">
-											<FlowModuleAdvancedSettings bind:flowModule />
+											<FlowModuleEarlyStop bind:flowModule />
+										</div>
+									</TabContent>
+
+									<TabContent value="suspended" class="flex flex-col flex-1 h-full">
+										<div class="p-4 overflow-y-auto">
+											<FlowModuleSuspend bind:flowModule />
 										</div>
 									</TabContent>
 								</div>

frontend/src/lib/components/flows/content/FlowModuleEarlyStop.svelte

@@ -17,7 +17,6 @@
 
 	let editor: SimpleEditor | undefined = undefined
 
-	$: isSuspendEnabled = Boolean(flowModule.suspend)
 	$: isStopAfterIfEnabled = Boolean(flowModule.stop_after_if)
 	let pickableProperties: Object = {}
 
@@ -43,27 +42,6 @@
 </script>
 
 <div class="flex flex-col items-start space-y-2">
-	<Toggle
-		checked={isSuspendEnabled}
-		on:change={() => {
-			if (isSuspendEnabled && flowModule.suspend != undefined) {
-				flowModule.suspend = undefined
-			} else {
-				flowModule.suspend = 1
-			}
-		}}
-		options={{
-			right: 'Suspend flow execution until events received enabled'
-		}}
-	/>
-	<span class="text-xs font-bold">Number of events to wait for</span>
-
-	{#if flowModule.suspend}
-		<input bind:value={flowModule.suspend} type="number" min="1" placeholder="1" />
-	{:else}
-		<input type="number" disabled />
-	{/if}
-
 	<Toggle
 		checked={isStopAfterIfEnabled}
 		on:change={() => {
@@ -77,7 +55,7 @@
 			}
 		}}
 		options={{
-			right: 'Early stop if condition met enabled'
+			right: 'Early stop if condition met'
 		}}
 	/>
 

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

@@ -3,9 +3,11 @@
 	import { isEmptyFlowModule } from '$lib/components/flows/flowStateUtils'
 
 	import type { FlowModule } from '$lib/gen'
+	import { classNames } from '$lib/utils'
 
-	import { faCodeBranch, faSave, faTrashAlt } from '@fortawesome/free-solid-svg-icons'
+	import { faCodeBranch, faSave, faStop, faTrashAlt } from '@fortawesome/free-solid-svg-icons'
 	import { createEventDispatcher, getContext } from 'svelte'
+	import Icon from 'svelte-awesome'
 	import type { FlowEditorContext } from '../types'
 	import type { FlowModuleWidthContext } from './FlowModule.svelte'
 	import RemoveStepConfirmationModal from './RemoveStepConfirmationModal.svelte'
@@ -23,6 +25,18 @@
 </script>
 
 <div class="flex flex-row space-x-2">
+	<span
+		class={classNames(
+			'whitespace-nowrap text-sm font-medium mr-2 px-2.5 py-0.5 rounded cursor-pointer flex items-center',
+			module.stop_after_if
+				? 'bg-sky-100 text-sky-800 hover:bg-sky-200'
+				: 'bg-gray-100 text-gray-800 hover:bg-gray-200'
+		)}
+		on:click={() => dispatch('toggleStopAfterIf')}
+	>
+		<Icon data={faStop} class="mr-2" scale={0.8} />
+		{module.stop_after_if ? `Early stop` : 'Early stop'}
+	</span>
 	{#if module.value.type === 'script' && !shouldPick}
 		<Button
 			size="xs"

frontend/src/lib/components/flows/content/FlowModuleSuspend.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+	import Toggle from '$lib/components/Toggle.svelte'
+
+	import type { FlowModule } from '$lib/gen'
+
+	export let flowModule: FlowModule
+
+	$: isSuspendEnabled = Boolean(flowModule.suspend)
+</script>
+
+<Toggle
+	checked={isSuspendEnabled}
+	on:change={() => {
+		if (isSuspendEnabled && flowModule.suspend != undefined) {
+			flowModule.suspend = undefined
+		} else {
+			flowModule.suspend = 1
+		}
+	}}
+	options={{
+		right: 'Suspend flow execution until events received'
+	}}
+/>
+<span class="text-xs font-bold">Number of events to wait for</span>
+
+{#if flowModule.suspend}
+	<input bind:value={flowModule.suspend} type="number" min="1" placeholder="1" />
+{:else}
+	<input type="number" disabled />
+{/if}