simplify script picker menu for flows

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

@@ -7,7 +7,6 @@
 	import PickHubScript from '../pickers/PickHubScript.svelte'
 	import PickScript from '../pickers/PickScript.svelte'
 
-	export let shouldDisableLoopCreation: boolean = false
 	export let shouldDisableTriggerScripts: boolean = false
 	export let failureModule: boolean
 
@@ -15,9 +14,55 @@
 </script>
 
 <div class="space-y-4 p-4">
-	{#if !shouldDisableTriggerScripts}
-		<div class="text-sm font-bold">Scripts</div>
-	{/if}
+	<div class="text-sm font-bold">Inline script</div>
+	<div class="grid sm:grid-col-2 lg:grid-cols-3 gap-4">
+		<FlowScriptPicker
+			label="Python (3.10)"
+			icon={faCode}
+			iconColor="text-green-500"
+			on:click={() =>
+				dispatch('new', {
+					language: RawScript.language.PYTHON3,
+					kind: 'script',
+					subkind: failureModule ? 'failure' : 'flow'
+				})}
+		/>
+
+		<FlowScriptPicker
+			label="Typescript (Deno)"
+			icon={faCode}
+			iconColor="text-blue-800"
+			on:click={() =>
+				dispatch('new', {
+					language: RawScript.language.DENO,
+					kind: 'script',
+					subkind: failureModule ? 'failure' : 'flow'
+				})}
+		/>
+
+		<FlowScriptPicker
+			label="Go"
+			icon={faCode}
+			iconColor="text-blue-700"
+			on:click={() =>
+				dispatch('new', {
+					language: RawScript.language.GO,
+					kind: 'script',
+					subkind: failureModule ? 'failure' : 'flow'
+				})}
+		/>
+
+		{#if !failureModule}
+			<FlowScriptPicker
+				label={`PostgreSQL`}
+				icon={faCode}
+				iconColor="text-blue-800"
+				on:click={() =>
+					dispatch('new', { language: RawScript.language.DENO, kind: 'script', subkind: 'pgsql' })}
+			/>
+		{/if}
+	</div>
+	<div class="text-sm font-bold">Pre-made script</div>
 
 	<div class="grid sm:grid-col-2 lg:grid-cols-3 gap-4">
 		<PickScript
@@ -30,82 +75,14 @@
 			kind={failureModule ? Script.kind.FAILURE : Script.kind.SCRIPT}
 			on:pick
 		/>
-		{#if !failureModule}
-			<PickScript
-				customText={failureModule ? 'Pick an approval script from your workspace' : undefined}
-				kind={failureModule ? Script.kind.FAILURE : Script.kind.APPROVAL}
-				on:pick
-			/>
-			<PickHubScript
-				customText={'Pick an approval script from the Hub'}
-				kind={Script.kind.APPROVAL}
-				on:pick
-			/>
-		{/if}
-
-		{#if !shouldDisableLoopCreation}
-			<FlowScriptPicker
-				label={`Create a for-loop here`}
-				disabled={shouldDisableLoopCreation}
-				icon={faRepeat}
-				iconColor="text-blue-500"
-				on:click={() => dispatch('loop')}
-			/>
-		{/if}
-
-		{#if !failureModule}
-			<FlowScriptPicker
-				label={`New PostgreSQL query`}
-				icon={faCode}
-				iconColor="text-blue-800"
-				on:click={() =>
-					dispatch('new', { language: RawScript.language.DENO, kind: 'script', subkind: 'pgsql' })}
-			/>
-		{/if}
-
-		<FlowScriptPicker
-			label="New Python script (3.10)"
-			icon={faCode}
-			iconColor="text-green-500"
-			on:click={() =>
-				dispatch('new', {
-					language: RawScript.language.PYTHON3,
-					kind: 'script',
-					subkind: failureModule ? 'failure' : 'flow'
-				})}
-		/>
-
-		<FlowScriptPicker
-			label="New Typescript script (Deno)"
-			icon={faCode}
-			iconColor="text-blue-800"
-			on:click={() =>
-				dispatch('new', {
-					language: RawScript.language.DENO,
-					kind: 'script',
-					subkind: failureModule ? 'failure' : 'flow'
-				})}
-		/>
-
-		<FlowScriptPicker
-			label="New Go script"
-			icon={faCode}
-			iconColor="text-blue-700"
-			on:click={() =>
-				dispatch('new', {
-					language: RawScript.language.GO,
-					kind: 'script',
-					subkind: failureModule ? 'failure' : 'flow'
-				})}
-		/>
 	</div>
 
 	{#if !shouldDisableTriggerScripts}
-		<div class="text-sm font-bold">Trigger scripts</div>
+		<div class="text-sm font-bold">Trigger script</div>
 
 		<div class="grid sm:grid-col-1 md:grid-col-2 lg:grid-cols-3 gap-4">
-			<PickScript kind={Script.kind.TRIGGER} on:pick />
-			<PickHubScript kind={Script.kind.TRIGGER} on:pick />
+			<PickScript customText="Trigger script from workspace" kind={Script.kind.TRIGGER} on:pick />
+			<PickHubScript customText="Trigger script from Hub" kind={Script.kind.TRIGGER} on:pick />
 			<FlowScriptPicker
 				label="New Typescript script (Deno)"
 				icon={faCode}
@@ -114,4 +91,27 @@
 			/>
 		</div>
 	{/if}
+
+	{#if !failureModule}
+		<div class="text-sm font-bold">Approval step</div>
+		<div class="grid sm:grid-col-1 md:grid-col-2 lg:grid-cols-3 gap-4">
+			<PickScript customText="Approval step from workspace" kind={Script.kind.APPROVAL} on:pick />
+			<PickHubScript
+				customText={'Approval step from the Hub'}
+				kind={Script.kind.APPROVAL}
+				on:pick
+			/>
+		</div>
+
+		<div class="text-sm font-bold">Flow primitive</div>
+
+		<div class="grid sm:grid-col-1 md:grid-col-2 lg:grid-cols-3 gap-4">
+			<FlowScriptPicker
+				label={`Create a for-loop`}
+				icon={faRepeat}
+				iconColor="text-blue-500"
+				on:click={() => dispatch('loop')}
+			/>
+		</div>
+	{/if}
 </div>

frontend/src/lib/components/flows/pickers/PickHubScript.svelte

@@ -32,7 +32,7 @@
 />
 
 <FlowScriptPicker
-	label={customText ?? `Pick a ${kind == Script.kind.SCRIPT ? '' : kind} script from the Hub`}
+	label={customText ?? `${kind == Script.kind.SCRIPT ? 'Script' : `${kind} script`} from the Hub`}
 	icon={faUserGroup}
 	iconColor="text-blue-500"
 	on:click={() => itemPicker.openModal()}

frontend/src/lib/components/flows/pickers/PickScript.svelte

@@ -2,7 +2,7 @@
 	import ItemPicker from '$lib/components/ItemPicker.svelte'
 	import { faUserGroup } from '@fortawesome/free-solid-svg-icons'
 
-	import { ScriptService } from '$lib/gen'
+	import { Script, ScriptService } from '$lib/gen'
 	import { workspaceStore } from '$lib/stores'
 	import { createEventDispatcher } from 'svelte'
 	import FlowScriptPicker from './FlowScriptPicker.svelte'
@@ -32,7 +32,7 @@
 />
 
 <FlowScriptPicker
-	label={customText ?? `Pick a ${kind == 'script' ? '' : kind} script from your workspace`}
+	label={customText ?? `${kind == Script.kind.SCRIPT ? 'Script' : `${kind} script`} from workspace`}
 	icon={faUserGroup}
 	iconColor="text-blue-500"
 	on:click={() => itemPicker.openModal()}

frontend/src/lib/components/landing/FlowGettingStarted.svelte

@@ -42,6 +42,7 @@
 			variant="border"
 			size="xs"
 			startIcon={{ icon: faExternalLink }}
+			target="_blank"
 		>
 			Explore community flows on WindmillHub
 		</Button>

frontend/src/lib/components/landing/ScriptGettingStarted.svelte

@@ -40,6 +40,7 @@
 			variant="border"
 			size="xs"
 			startIcon={{ icon: faExternalLink }}
+			target="_blank"
 		>
 			Explore community scripts on WindmillHub
 		</Button>