feat(frontend): Add app preview (#993)

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

@@ -0,0 +1,66 @@
+<script lang="ts">
+	import { onMount, setContext } from 'svelte'
+
+	import { writable } from 'svelte/store'
+	import { buildWorld, type World } from '../rx'
+	import type {
+		App,
+		AppEditorContext,
+		ConnectingInput,
+		EditorBreakpoint,
+		EditorMode,
+		InputType
+	} from '../types'
+	import GridEditor from './GridEditor.svelte'
+
+	import { classNames } from '$lib/utils'
+
+	export let app: App
+	export let initialMode: EditorMode = 'dnd'
+
+	const appStore = writable<App>(app)
+	const worldStore = writable<World | undefined>(undefined)
+	const staticOutputs = writable<Record<string, string[]>>({})
+	const selectedComponent = writable<string | undefined>(undefined)
+	const mode = writable<EditorMode>(initialMode)
+	const breakpoint = writable<EditorBreakpoint>('lg')
+
+	const connectingInput = writable<ConnectingInput<InputType, any>>({
+		opened: false,
+		input: undefined
+	})
+
+	setContext<AppEditorContext>('AppEditorContext', {
+		worldStore,
+		staticOutputs,
+		app: appStore,
+		selectedComponent,
+		mode,
+		connectingInput,
+		breakpoint
+	})
+
+	function clearSelectionOnPreview() {
+		if ($mode === 'preview') {
+			$selectedComponent = undefined
+		}
+	}
+
+	let mounted = false
+
+	onMount(() => {
+		mounted = true
+	})
+
+	$: mounted && ($worldStore = buildWorld($staticOutputs))
+	$: $mode && $selectedComponent && clearSelectionOnPreview()
+	$: width = $breakpoint === 'sm' ? 'w-[640px]' : 'w-full '
+</script>
+
+<div class="h-full w-full">
+	{#if $appStore.grid}
+		<div class={classNames('mx-auto h-full', width)}>
+			<GridEditor />
+		</div>
+	{/if}
+</div>

frontend/src/routes/apps/get/[...path].svelte

@@ -9,6 +9,7 @@
 <script lang="ts">
 	import { page } from '$app/stores'
 	import AppEditor from '$lib/components/apps/editor/AppEditor.svelte'
+	import AppPreview from '$lib/components/apps/editor/AppPreview.svelte'
 
 	import CenteredPage from '$lib/components/CenteredPage.svelte'
 	import { Skeleton } from '$lib/components/common'
@@ -32,16 +33,16 @@
 
 <CenteredPage>
 	{#if app}
-		<div class="flex justify-between my-2 items-center">
-			<div>{app.value.title}</div>
+		<div class="flex justify-between items-center py-4">
+			<h2>{app.value.title}</h2>
 
 			<Button size="xs" href="/apps/edit/{$page.params.path}" startIcon={{ icon: faPen }}>
 				Edit
 			</Button>
 		</div>
 
-		<div class="h-screen">
-			<AppEditor app={app.value} path={app.path} initialMode="preview" />
+		<div class="border rounded-md p-2">
+			<AppPreview app={app.value} initialMode="preview" />
 		</div>
 	{/if}
 </CenteredPage>