also allow editable flow

frontend/src/lib/components/FlowViewer.svelte

@@ -47,14 +47,14 @@
 {#if tab == 'ui'}
 	<div class="flow-root w-full p-4">
 		<p class="font-black text-lg mb-6 w-full ml-2">
-			<span>{flow.value.modules.length} Steps </span>
+			<span>{flow?.value?.modules?.length} Steps </span>
 			<span class="mt-4" />
 		</p>
 		<ul class="-mb-8 w-full">
-			{#each flow.value.modules ?? [] as mod, i}
+			{#each flow?.value?.modules ?? [] as mod, i}
 				<li class="w-full">
 					<div class="relative pb-8 w-full">
-						{#if i < (flow.value.modules ?? []).length - 1}
+						{#if i < (flow?.value?.modules ?? []).length - 1}
 							<span
 								class="absolute top-4 left-4 -ml-px h-full w-0.5 bg-gray-200"
 								aria-hidden="true"
@@ -70,33 +70,33 @@
 							<div class="min-w-0 flex-1 pt-1.5 flex justify-between space-x-4 w-full">
 								<div class="w-full">
 									<p class="text-sm text-gray-500">
-										{#if mod.value.type == FlowModuleValue.type.SCRIPT}
+										{#if mod?.value?.type == FlowModuleValue.type.SCRIPT}
 											Script at path <a
 												target="_blank"
-												href={scriptPathToHref(mod.value.path ?? '')}
-												class="font-medium text-gray-900">{mod.value.path}</a
+												href={scriptPathToHref(mod?.value?.path ?? '')}
+												class="font-medium text-gray-900">{mod?.value?.path}</a
 											>
-										{:else if mod.value.type == FlowModuleValue.type.RAWSCRIPT}
+										{:else if mod?.value?.type == FlowModuleValue.type.RAWSCRIPT}
 											<button
 												on:click={() => (open[i] = !open[i])}
 												class="mb-2 underline text-black"
 											>
-												Raw {mod.value.language} script {open[i] ? '(-)' : '(+)'}</button
+												Raw {mod?.value?.language} script {open[i] ? '(-)' : '(+)'}</button
 											>
 
 											{#if open[i]}
 												<div transition:slide class="border border-black p-2 bg-gray-50 w-full">
 													<Highlight
-														language={mod.value.language == 'deno' ? typescript : python}
-														code={mod.value.content}
+														language={mod?.value?.language == 'deno' ? typescript : python}
+														code={mod?.value?.content}
 													/>
 												</div>
 											{/if}
-										{:else if mod.value.type == FlowModuleValue.type.FLOW}
-											Flow at path {mod.value.path}
-										{:else if mod.value.type == FlowModuleValue.type.FORLOOPFLOW}
+										{:else if mod?.value?.type == FlowModuleValue.type.FLOW}
+											Flow at path {mod?.value?.path}
+										{:else if mod?.value?.type == FlowModuleValue.type.FORLOOPFLOW}
 											For loop over step {i}'s result':
-											<svelte:self flow={mod.value} embedded={true} />
+											<svelte:self flow={mod?.value} embedded={true} />
 										{/if}
 									</p>
 								</div>

frontend/src/routes/flows.svelte

@@ -118,6 +118,7 @@
 	<Tabs
 		tabs={[
 			['all', 'all'],
+			['hub', 'hub'],
 			['personal', `personal space (${$userStore?.username})`],
 			['groups', 'groups'],
 			['shared', 'shared']

frontend/src/routes/scripts.svelte

@@ -14,7 +14,14 @@
 	import type { Script } from '$lib/gen'
 	import { ScriptService } from '$lib/gen'
 	import { superadmin, userStore, workspaceStore, hubScripts } from '$lib/stores'
-	import { canWrite, getScriptByPath, groupBy, loadHubScripts, sendUserToast, truncateHash } from '$lib/utils'
+	import {
+		canWrite,
+		getScriptByPath,
+		groupBy,
+		loadHubScripts,
+		sendUserToast,
+		truncateHash
+	} from '$lib/utils'
 	import Badge from '$lib/components/Badge.svelte'
 	import CenteredPage from '$lib/components/CenteredPage.svelte'
 	import Dropdown from '$lib/components/Dropdown.svelte'
@@ -140,10 +147,11 @@
 		codeViewerPath = path
 		codeViewer.openModal()
 	}
+	loadHubScripts()
+
 	$: {
 		if ($workspaceStore && ($userStore || $superadmin)) {
 			loadScripts()
-			loadHubScripts()
 		}
 	}
 </script>
@@ -186,11 +194,11 @@
 	<Tabs
 		tabs={[
 			['all', 'all'],
+			['hub', 'hub'],
 			['personal', `personal space (${$userStore?.username})`],
 			['groups', 'groups'],
 			['shared', 'shared'],
-			['examples', 'examples'],
-			['hub', 'hub']
+			['examples', 'examples']
 		]}
 		bind:tab
 		on:update={loadScripts}