feat(frontend): add hash to ctx in apps

frontend/src/lib/components/apps/components/inputs/AppDateInput.svelte

@@ -16,7 +16,7 @@
 	export let customCss: ComponentCustomCSS<'input'> | undefined = undefined
 	export let render: boolean
 
-	const { app, worldStore } = getContext<AppEditorContext>('AppEditorContext')
+	const { app, worldStore, selectedComponent } = getContext<AppEditorContext>('AppEditorContext')
 	let labelValue: string = 'Title'
 	let minValue: string = ''
 	let maxValue: string = ''
@@ -46,6 +46,7 @@
 <AlignWrapper {render} {verticalAlignment}>
 	{#if inputType === 'date'}
 		<input
+			on:focus={() => ($selectedComponent = id)}
 			on:pointerdown|stopPropagation
 			type="date"
 			bind:value

frontend/src/lib/components/apps/components/inputs/AppNumberInput.svelte

@@ -15,7 +15,7 @@
 	export let customCss: ComponentCustomCSS<'input'> | undefined = undefined
 	export let render: boolean
 
-	const { app, worldStore } = getContext<AppEditorContext>('AppEditorContext')
+	const { app, worldStore, selectedComponent } = getContext<AppEditorContext>('AppEditorContext')
 
 	let defaultValue: number | undefined = undefined
 	let placeholder: string | undefined = undefined
@@ -49,6 +49,7 @@
 <AlignWrapper {render} {verticalAlignment}>
 	<input
 		on:pointerdown|stopPropagation
+		on:focus={() => ($selectedComponent = id)}
 		class={twMerge(
 			'windmillapp w-full py-1.5 text-sm focus:ring-indigo-100 px-2 mx-0.5',
 			css?.input?.class ?? ''

frontend/src/lib/components/apps/components/inputs/AppTextInput.svelte

@@ -14,11 +14,11 @@
 	export let verticalAlignment: 'top' | 'center' | 'bottom' | undefined = undefined
 	export const staticOutputs: string[] = ['result']
 	export let customCss: ComponentCustomCSS<'input'> | undefined = undefined
-	export let appCssKey: 'textinputcomponent' | 'passwordinputcomponent' | 'emailcomponent' =
+	export let appCssKey: 'textinputcomponent' | 'passwordinputcomponent' | 'emailinputcomponent' =
 		'textinputcomponent'
 	export let render: boolean
 
-	const { app, worldStore } = getContext<AppEditorContext>('AppEditorContext')
+	const { app, worldStore, selectedComponent } = getContext<AppEditorContext>('AppEditorContext')
 
 	let placeholder: string | undefined = undefined
 	let defaultValue: string | undefined = undefined
@@ -51,6 +51,7 @@
 			)}
 			style={css?.input?.style ?? ''}
 			on:pointerdown|stopPropagation
+			on:focus={() => ($selectedComponent = id)}
 			type="password"
 			bind:value
 			{placeholder}
@@ -63,6 +64,7 @@
 			)}
 			style={css?.input?.style ?? ''}
 			on:pointerdown|stopPropagation
+			on:focus={() => ($selectedComponent = id)}
 			type="text"
 			bind:value
 			{placeholder}
@@ -75,6 +77,7 @@
 			)}
 			style={css?.input?.style ?? ''}
 			on:pointerdown|stopPropagation
+			on:focus={() => ($selectedComponent = id)}
 			type="email"
 			bind:value
 			{placeholder}

frontend/src/lib/components/apps/editor/AppEditor.svelte

@@ -33,7 +33,6 @@
 	import SettingsPanel from './SettingsPanel.svelte'
 	import { fly } from 'svelte/transition'
 	import type { Policy } from '$lib/gen'
-	import UnsavedConfirmationModal from '$lib/components/common/confirmationModal/UnsavedConfirmationModal.svelte'
 	import { page } from '$app/stores'
 	import CssSettings from './componentsPanel/CssSettings.svelte'
 	import { initHistory } from '$lib/history'
@@ -45,7 +44,6 @@
 	export let summary: string
 	export let fromHub: boolean = false
 
-	console.log('app', app)
 	const appStore = writable<App>(app)
 	const worldStore = writable<World | undefined>(undefined)
 	const staticOutputs = writable<Record<string, string[]>>({})
@@ -110,10 +108,16 @@
 		mounted = true
 	})
 
-	$: context = {
+	let context = {
 		email: $userStore?.email,
 		username: $userStore?.username,
-		query: Object.fromEntries($page.url.searchParams.entries())
+		query: Object.fromEntries($page.url.searchParams.entries()),
+		hash: $page.url.hash
+	}
+
+	function hashchange(e: HashChangeEvent) {
+		context.hash = e.newURL.split('#')[1]
+		context = context
 	}
 
 	$: mounted && ($worldStore = buildWorld($staticOutputs, $worldStore, context))
@@ -128,6 +132,8 @@
 	}
 </script>
 
+<svelte:window on:hashchange={hashchange} />
+
 {#if $connectingInput.opened}
 	<div
 		class="absolute w-full h-screen bg-black border-2 bg-opacity-25 z-20 flex justify-center items-center"

frontend/src/lib/components/apps/editor/AppPreview.svelte

@@ -1,7 +1,5 @@
 <script lang="ts">
 	import { onMount, setContext } from 'svelte'
-	import { fade } from 'svelte/transition'
-	import { cubicOut } from 'svelte/easing'
 	import { writable, type Writable } from 'svelte/store'
 	import { buildWorld, type World } from '../rx'
 	import type {
@@ -73,11 +71,20 @@
 		mounted = true
 	})
 
-	$: mounted && ($worldStore = buildWorld($staticOutputs, $worldStore, context))
+	let ncontext = context
+
+	function hashchange(e: HashChangeEvent) {
+		ncontext.hash = e.newURL.split('#')[1]
+		ncontext = ncontext
+	}
+
+	$: mounted && ($worldStore = buildWorld($staticOutputs, $worldStore, ncontext))
 	$: width = $breakpoint === 'sm' ? 'max-w-[640px]' : 'w-full '
 	$: lockedClasses = isLocked ? '!max-h-[400px] overflow-hidden pointer-events-none' : ''
 </script>
 
+<svelte:window on:hashchange={hashchange} />
+
 <div id="app-editor-top-level-drawer" />
 
 <div class="relative">

frontend/src/lib/components/apps/editor/contextPanel/ContextPanel.svelte

@@ -42,7 +42,7 @@
 			return 'Table action'
 		}
 	}
-	$: panels = [['ctx', ['email', 'username', 'query']] as [string, string[]]].concat(
+	$: panels = [['ctx', ['email', 'username', 'query', 'hash']] as [string, string[]]].concat(
 		Object.entries($staticOutputs)
 	)
 

frontend/src/routes/(root)/(logged)/+page.svelte

@@ -12,7 +12,7 @@
 	import PickHubFlow from '$lib/components/flows/pickers/PickHubFlow.svelte'
 	import FlowViewer from '$lib/components/FlowViewer.svelte'
 	import HighlightCode from '$lib/components/HighlightCode.svelte'
-	import { Building, ExternalLink, Globe2 } from 'lucide-svelte'
+	import { Building, Globe2 } from 'lucide-svelte'
 
 	import ItemsList from '$lib/components/home/ItemsList.svelte'
 	import CreateActionsApp from '$lib/components/flows/CreateActionsApp.svelte'

frontend/src/routes/(root)/(logged)/apps/get/[...path]/+page.svelte

@@ -37,7 +37,8 @@
 			context={{
 				email: $userStore?.email,
 				username: $userStore?.username,
-				query: Object.fromEntries($page.url.searchParams.entries())
+				query: Object.fromEntries($page.url.searchParams.entries()),
+				hash: $page.url.hash
 			}}
 			workspace={$workspaceStore ?? ''}
 			summary={app.summary}

frontend/src/routes/public/[workspace]/[...secret]/+page.svelte

@@ -80,7 +80,8 @@
 			context={{
 				email: $userStore?.email,
 				username: $userStore?.username,
-				query: Object.fromEntries($page.url.searchParams.entries())
+				query: Object.fromEntries($page.url.searchParams.entries()),
+				hash: $page.url.hash
 			}}
 			workspace={$page.params.workspace}
 			summary={app.summary}