feat: studio template route

Author: TorstenDittmann

src/routes/(console)/(redirects)/members/+page.ts

@@ -1,5 +1,5 @@
 import { redirect } from '@sveltejs/kit';
-import { base } from '$app/paths';
+import { resolve } from '$app/paths';
 import type { PageLoad } from './$types';
 import { resolvedProfile } from '$lib/profiles/index.svelte';
 
@@ -9,7 +9,12 @@ export const load: PageLoad = async ({ parent }) => {
     const teamId =
         account.prefs[resolvedProfile.organizationPrefKey] ?? organizations.teams[0]?.$id;
     if (teamId) {
-        redirect(303, `${base}/organization-${teamId}/members`);
+        redirect(
+            303,
+            resolve('/(console)/organization-[organization]/members', {
+                organization: teamId
+            })
+        );
     }
-    redirect(303, base);
+    redirect(303, resolve('/'));
 };

src/routes/(console)/(redirects)/template/[region]-[template]/+page.ts

@@ -0,0 +1,25 @@
+import { redirect } from '@sveltejs/kit';
+import { resolve } from '$app/paths';
+import type { PageLoad } from './$types';
+import { resolvedProfile } from '$lib/profiles/index.svelte';
+
+export const load: PageLoad = async ({ parent, params }) => {
+    const { organizations, account } = await parent();
+
+    const teamId =
+        account.prefs[resolvedProfile.organizationPrefKey] ?? organizations.teams[0]?.$id;
+    if (teamId) {
+        redirect(
+            303,
+            resolve(
+                '/(console)/organization-[organization]/(studio)/template-[region]-[template]',
+                {
+                    organization: teamId,
+                    template: params.template,
+                    region: params.region
+                }
+            )
+        );
+    }
+    redirect(303, resolve('/'));
+};

src/routes/(console)/organization-[organization]/(studio)/template-[region]-[template]/+page.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+    import { onDestroy, onMount, tick } from 'svelte';
+    import {
+        attachStudioTo,
+        ensureStudioComponent,
+        hideStudio,
+        navigateToRoute
+    } from '$lib/studio/studio-widget';
+    import { resolvedProfile } from '$lib/profiles/index.svelte';
+
+    let { params } = $props();
+    let anchor: HTMLElement = $state();
+
+    function positionStudio() {
+        if (!anchor) return;
+        attachStudioTo(anchor, { offsetX: 0, offsetY: 0 });
+    }
+
+    onMount(async () => {
+        ensureStudioComponent();
+        await tick();
+        positionStudio();
+        navigateToRoute({
+            id: 'view',
+            props: {
+                projectId: params.template,
+                region: params.region
+            }
+        });
+    });
+
+    onDestroy(() => {
+        hideStudio();
+    });
+
+    $effect(() => {
+        positionStudio();
+    });
+</script>
+
+<svelte:head>
+    <title>Template - {resolvedProfile.platform}</title>
+</svelte:head>
+
+<div class="studio-page" bind:this={anchor}></div>
+
+<style>
+    .studio-page {
+        position: relative;
+        width: 100%;
+        background: var(--bgcolor-neutral-primary);
+    }
+</style>

src/routes/(console)/project-[region]-[project]/(studio)/studio/+page.svelte

@@ -6,10 +6,11 @@
         hideStudio,
         navigateToRoute
     } from '$lib/studio/studio-widget';
-    import { page } from '$app/state';
     import { getPageTitle } from '../../store';
     import { resolvedProfile } from '$lib/profiles/index.svelte';
+    import type { PageProps } from './$types';
 
+    let { params, data }: PageProps = $props();
     let anchor: HTMLElement = $state();
 
     function positionStudio() {
@@ -24,8 +25,8 @@
         navigateToRoute({
             id: 'project',
             props: {
-                projectId: page.params.project,
-                region: page.params.region
+                projectId: params.project,
+                region: params.region
             }
         });
     });
@@ -40,7 +41,7 @@
 </script>
 
 <svelte:head>
-    <title>{getPageTitle(page.data?.project?.name, 'Studio', resolvedProfile.platform)}</title>
+    <title>{getPageTitle(data.project.name, 'Studio', resolvedProfile.platform)}</title>
 </svelte:head>
 
 <div class="studio-page" bind:this={anchor}></div>