icon for paths

frontend/src/lib/components/FlowStatusViewer.svelte

@@ -9,6 +9,7 @@
 	import { workspaceStore } from '$lib/stores'
 	import FlowJobResult from './FlowJobResult.svelte'
 	import JobStatus from './JobStatus.svelte'
+	import IconedPath from './IconedPath.svelte'
 
 	export let job: QueuedJob | CompletedJob
 	export let jobs: (Job | Job[] | undefined)[] = []
@@ -159,8 +160,10 @@
 										Script at path <a
 											target="_blank"
 											href={scriptPathToHref(mod.value.path ?? '')}
-											class="font-medium text-gray-900">{mod.value.path}</a
+											class="font-medium text-gray-900"
 										>
+											<IconedPath path={mod.value.path} />
+										</a>
 									{/if}
 								</p>
 							</div>

frontend/src/lib/components/FlowViewer.svelte

@@ -13,6 +13,7 @@
 	import FieldHeader from './FieldHeader.svelte'
 	import InputTransformsViewer from './InputTransformsViewer.svelte'
 	import SvelteMarkdown from 'svelte-markdown'
+	import IconedPath from './IconedPath.svelte'
 
 	export let flow: {
 		summary: string
@@ -114,8 +115,10 @@
 											Script at path <a
 												target="_blank"
 												href={scriptPathToHref(mod?.value?.path ?? '')}
-												class="font-medium text-gray-900">{mod?.value?.path}</a
+												class="font-medium text-gray-900"
 											>
+												<IconedPath path={mod?.value?.path ?? ''} />
+											</a>
 											{#if mod?.value?.path?.startsWith('hub/')}
 												<div>
 													<button

frontend/src/lib/components/IconedPath.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+	import IconedResourceType from './IconedResourceType.svelte'
+
+	export let path: string
+</script>
+
+{#if path.startsWith('hub/')}
+	<span class="inline-flex flex-row gap-x-2 items-center">
+		<IconedResourceType name={path.split('/')[2]} silent={true} />
+		<span>{path}</span>
+	</span>
+{:else}
+	path
+{/if}

frontend/src/lib/components/ModuleStep.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Job, RawScript, type Flow, type FlowModule } from '$lib/gen'
-	import { faArrowDown, faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons'
+	import { faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons'
 	import Icon from 'svelte-awesome'
 	import Editor from './Editor.svelte'
 	import EditorBar from './EditorBar.svelte'
@@ -24,7 +24,6 @@
 	import { flowStateStore, type FlowModuleSchema, type FlowState } from './flows/flowState'
 	import { stepOpened } from './flows/stepOpenedStore'
 	import { buildExtraLib, objectToTsType, schemaToObject, schemaToTsType } from '$lib/utils'
-	import { rotateRight } from 'svelte-awesome/icons'
 
 	export let indexes: number[]
 	export let mod: FlowModule
@@ -56,7 +55,7 @@
 	}
 
 	function getPickableProperties(flow: Flow, flowState: FlowState): PickableProperties {
-		const flowInputAsObject = schemaToObject(flow.schema, args)
+		const flowInputAsObject = schemaToObject(flow?.schema, args)
 
 		if (indexes.length > 1) {
 			const [parentIndex] = indexes

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

@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { emptySchema } from '$lib/utils'
+
 	import SchemaEditor from '../SchemaEditor.svelte'
 	import { flowStore } from './../flows/flowStore'
 	import CopyFirstStepSchema from './CopyFirstStepSchema.svelte'
@@ -15,7 +17,7 @@
 				on:change={() => {
 					$flowStore = $flowStore
 				}}
-				schema={$flowStore.schema}
+				schema={$flowStore?.schema ?? emptySchema()}
 			/>
 		</div>
 	</div>

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

@@ -15,6 +15,7 @@
 	import { Highlight } from 'svelte-highlight'
 	import python from 'svelte-highlight/languages/python'
 	import typescript from 'svelte-highlight/languages/typescript'
+	import IconedPath from '../IconedPath.svelte'
 	import IconedResourceType from '../IconedResourceType.svelte'
 	import Modal from '../Modal.svelte'
 	import { isEmptyFlowModule } from './flowStateUtils'
@@ -47,12 +48,7 @@
 <div on:click={() => stepOpened.update(() => String(indexes.join('-')))}>
 	<h3 class="text-sm font-bold text-gray-900">
 		{#if 'path' in mod.value && mod.value.path}
-			{#if mod.value.path.startsWith('hub/')}
-				<IconedResourceType name={mod.value.path.split('/')[2]} silent={true} />&nbsp;{mod.value
-					.path}
-			{:else}
-				{mod.value.path}
-			{/if}
+			<IconedPath path={mod.value.path} />
 		{:else if 'language' in mod.value && mod.value.language}
 			Inline {mod.value.language}
 		{:else}

frontend/src/lib/utils.ts

@@ -41,9 +41,8 @@ export function displayDate(dateString: string | undefined): string {
 	if (date.toString() === 'Invalid Date') {
 		return ''
 	} else {
-		return `${date.getFullYear()}/${
-			date.getMonth() + 1
-		}/${date.getDate()} at ${date.toLocaleTimeString()}`
+		return `${date.getFullYear()}/${date.getMonth() + 1
+			}/${date.getDate()} at ${date.toLocaleTimeString()}`
 	}
 }
 
@@ -487,7 +486,7 @@ export async function loadHubScripts() {
 	const scripts = (await ScriptService.listHubScripts()).asks ?? []
 	const processed = scripts
 		.map((x) => ({
-			path: `hub/${x.id}/${x.summary.toLowerCase().replaceAll(/\s+/g, '_')}`,
+			path: `hub/${x.id}/${x.app}/${x.summary.toLowerCase().replaceAll(/\s+/g, '_')}`,
 			summary: `${x.summary} (${x.app}) ${x.views} uses`,
 			approved: x.approved,
 			is_trigger: x.is_trigger,