diff --git a/src/routes/(console)/project-[project]/studio/artifact-[artifact]/+layout.svelte b/src/routes/(console)/project-[project]/studio/artifact-[artifact]/+layout.svelte
index f23995cd3..e7a3146a3 100644
--- a/src/routes/(console)/project-[project]/studio/artifact-[artifact]/+layout.svelte
+++ b/src/routes/(console)/project-[project]/studio/artifact-[artifact]/+layout.svelte
@@ -29,13 +29,28 @@
import { untrack } from 'svelte';
import Debug from './debug.svelte';
import { dev } from '$app/environment';
+ import { goto } from '$app/navigation';
const { children, data } = $props();
- let view: 'preview' | 'editor' = $state('preview');
+ let view: 'preview' | 'editor' = $state(
+ page.url.searchParams.has('code') ? 'editor' : 'preview'
+ );
let debug = $state(false);
+ function changeView(newView: 'preview' | 'editor') {
+ const newUrl = new URL(page.url.href);
+ if (newView === 'editor') {
+ newUrl.searchParams.set('code', '');
+ goto(newUrl.pathname + newUrl.search, { replaceState: true });
+ } else {
+ newUrl.searchParams.delete('code');
+ goto(newUrl.pathname + newUrl.search, { replaceState: true });
+ }
+ view = newView;
+ }
+
$effect(() => {
const { artifact } = page.params;
untrack(() => studio.selectArtifact(artifact));
@@ -51,7 +66,7 @@
let editorHeight = $derived(resizerTopPosition + 1);
let terminalHeight = $derived(
- layoutElement.offsetHeight - resizerTopPosition - terminalTabsHeight
+ layoutElement ? layoutElement.offsetHeight - resizerTopPosition - terminalTabsHeight : 0
);
$effect(() => {
@@ -192,12 +207,12 @@
{
- view = 'preview';
+ changeView('preview');
}}>Preview
{
- view = 'editor';
+ changeView('editor');
}}>Code