From 18c5cb8e2b22906fae396be5924bd2124eb5d9c2 Mon Sep 17 00:00:00 2001
From: ernstmul <ernst.mulders@gmail.com>
Date: Wed, 2 Apr 2025 12:47:14 +0200
Subject: [PATCH] Add builder landing page, and remove old routes

---
 .../(console)/project-[project]/+page.ts      |  4 +
 .../project-[project]/builder}/+page.svelte   |  0
 src/routes/(studio)/+layout.svelte            | 80 -------------------
 src/routes/(studio)/+layout.ts                | 70 ----------------
 .../(studio)/org-[organization]/+page.svelte  | 30 -------
 5 files changed, 4 insertions(+), 180 deletions(-)
 rename src/routes/{(studio)/proj-[project] => (console)/project-[project]/builder}/+page.svelte (100%)
 delete mode 100644 src/routes/(studio)/+layout.svelte
 delete mode 100644 src/routes/(studio)/+layout.ts
 delete mode 100644 src/routes/(studio)/org-[organization]/+page.svelte

diff --git a/src/routes/(console)/project-[project]/+page.ts b/src/routes/(console)/project-[project]/+page.ts
index 53c3af2a9..6f43a5707 100644
--- a/src/routes/(console)/project-[project]/+page.ts
+++ b/src/routes/(console)/project-[project]/+page.ts
@@ -2,8 +2,12 @@ import { redirect } from '@sveltejs/kit';
 import { base } from '$app/paths';
 import type { PageLoad } from './$types';
 import { hasOnboardingDismissed } from '$lib/helpers/onboarding';
+import { isStudio } from '$lib/system';
 
 export const load: PageLoad = async ({ params }) => {
+    if (isStudio) {
+        redirect(302, `${base}/project-${params.project}/builder`);
+    }
     if (hasOnboardingDismissed(params.project)) {
         redirect(302, `${base}/project-${params.project}/overview`);
     }
diff --git a/src/routes/(studio)/proj-[project]/+page.svelte b/src/routes/(console)/project-[project]/builder/+page.svelte
similarity index 100%
rename from src/routes/(studio)/proj-[project]/+page.svelte
rename to src/routes/(console)/project-[project]/builder/+page.svelte
diff --git a/src/routes/(studio)/+layout.svelte b/src/routes/(studio)/+layout.svelte
deleted file mode 100644
index da755c82b..000000000
--- a/src/routes/(studio)/+layout.svelte
+++ /dev/null
@@ -1,80 +0,0 @@
-<script lang="ts">
-    import { Avatar, Layout } from '@appwrite.io/pink-svelte';
-    import { AvatarInitials, Breadcrumbs } from '$lib/components';
-    import { page } from '$app/stores';
-    import { BillingPlan } from '$lib/constants';
-    import { isCloud } from '$lib/system';
-    import { tierToPlan } from '$lib/stores/billing';
-    import { organization, organizationList } from '$lib/stores/organization';
-    import { user } from '$lib/stores/user';
-    import SidebarOrganization from '$lib/components/studio/sidebarOrganization.svelte';
-    import SidebarProject from '$lib/components/studio/sidebarProject.svelte';
-
-    $: hasProjectSidebar = $page.url.pathname.startsWith('/studio/proj');
-
-    $: loadedProjects = $page.data.projects.map((project) => {
-        return {
-            name: project?.name,
-            $id: project.$id,
-            isSelected: $page.data.currentProjectId === project.$id,
-            platformCount: project.platforms.length,
-            pingCount: project.pingCount
-        };
-    });
-
-    $: organizations = $organizationList.teams.map((org) => {
-        const billingPlan = org['billingPlan'];
-        return {
-            name: org.name,
-            $id: org.$id,
-            showUpgrade: billingPlan === BillingPlan.FREE,
-            tierName: isCloud ? (tierToPlan(billingPlan)?.name ?? '') : null,
-            isSelected: $page.data.currentOrganization?.$id === org.$id,
-            projects: loadedProjects
-        };
-    });
-</script>
-
-<main>
-    <Layout.Stack>
-        <header>
-            <Layout.Stack direction="row" justifyContent="space-between" alignItems="center">
-                <Breadcrumbs {organizations} />
-                <AvatarInitials name={$user?.name ?? ''} size="s" />
-            </Layout.Stack>
-        </header>
-        <div class="studio-content" class:project-sidebar={hasProjectSidebar}><slot /></div>
-        {#if hasProjectSidebar}
-            <SidebarProject />
-        {:else}
-            <SidebarOrganization organization={$page.data.currentOrganization} />
-        {/if}
-    </Layout.Stack>
-</main>
-
-<style lang="scss">
-    main {
-        min-height: 100vh;
-        background-color: var(--bgcolor-neutral-default);
-    }
-
-    header {
-        position: fixed;
-        top: 0;
-        width: 100%;
-        padding: var(--space-4);
-    }
-
-    .studio-content {
-        min-height: calc(100vh - 48px);
-        margin-top: 48px;
-        width: calc(100vw - 200px);
-        margin-left: 200px;
-        padding-right: var(--space-4);
-
-        &.project-sidebar {
-            width: calc(100vw - 52px);
-            margin-left: 52px;
-        }
-    }
-</style>
diff --git a/src/routes/(studio)/+layout.ts b/src/routes/(studio)/+layout.ts
deleted file mode 100644
index d51edd31e..000000000
--- a/src/routes/(studio)/+layout.ts
+++ /dev/null
@@ -1,70 +0,0 @@
-import { Dependencies } from '$lib/constants';
-import type { Plan } from '$lib/sdk/billing';
-import type { Tier } from '$lib/stores/billing';
-import { sdk } from '$lib/stores/sdk';
-import { isCloud } from '$lib/system';
-import type { LayoutLoad } from './$types';
-import { Query } from '@appwrite.io/console';
-
-export const load: LayoutLoad = async ({ params, fetch, depends, parent }) => {
-    await parent();
-    depends(Dependencies.RUNTIMES);
-    depends(Dependencies.CONSOLE_VARIABLES);
-    depends(Dependencies.ORGANIZATION);
-
-    const prefs = await sdk.forConsole.account.getPrefs();
-
-    const { endpoint, project } = sdk.forConsole.client.config;
-    const versionPromise = fetch(`${endpoint}/health/version`, {
-        headers: {
-            'X-Appwrite-Project': project
-        }
-    }).then((response) => response.json() as { version?: string });
-
-    const variablesPromise = sdk.forConsole.console.variables();
-
-    const [data, variables] = await Promise.all([versionPromise, variablesPromise]);
-
-    let plansInfo = new Map<Tier, Plan>();
-    if (isCloud) {
-        const plansArray = await sdk.forConsole.billing.getPlansInfo();
-        plansInfo = plansArray.plans.reduce((map, plan) => {
-            map.set(plan.$id as Tier, plan);
-            return map;
-        }, new Map<Tier, Plan>());
-    }
-
-    const organizations = !isCloud
-        ? await sdk.forConsole.teams.list()
-        : await sdk.forConsole.billing.listOrganization();
-
-    let projects = [];
-    let currentOrgId = params.organization ? params.organization : prefs.organization;
-
-    if (!currentOrgId && organizations.teams.length > 0) {
-        currentOrgId = organizations.teams[0].$id;
-    }
-    if (currentOrgId) {
-        const orgProjects = await sdk.forConsole.projects.list([
-            Query.equal('teamId', currentOrgId),
-            Query.limit(100),
-            Query.orderDesc('$updatedAt')
-        ]);
-        projects = orgProjects.projects.length > 0 ? orgProjects.projects : [];
-    }
-
-    const selectedOrganizationId =
-        params && params.organization ? params.organization : prefs.organization;
-
-    return {
-        consoleVariables: variables,
-        version: data?.version ?? null,
-        plansInfo,
-        roles: [],
-        scopes: [],
-        projects: projects,
-        currentProjectId: params.project ?? '',
-        organizations: organizations,
-        currentOrganization: organizations.teams.find((org) => org.$id === selectedOrganizationId)
-    };
-};
diff --git a/src/routes/(studio)/org-[organization]/+page.svelte b/src/routes/(studio)/org-[organization]/+page.svelte
deleted file mode 100644
index b97b46e7c..000000000
--- a/src/routes/(studio)/org-[organization]/+page.svelte
+++ /dev/null
@@ -1,30 +0,0 @@
-<script lang="ts">
-    import { Card, Typography, Layout, Divider, Button } from '@appwrite.io/pink-svelte';
-    import { base } from '$app/paths';
-
-    export let data;
-</script>
-
-<Card.Base>
-    <Layout.Stack>
-        <Layout.Stack direction="row" justifyContent="space-between" alignItems="center">
-            <Typography.Text variant="m-500" color="--fgcolor-neutral-secondary"
-                >Projects</Typography.Text>
-            <Button.Button size="s">Create project</Button.Button>
-        </Layout.Stack>
-
-        <Divider />
-
-        <Layout.Grid gap="l" columnsS={3} columns={4} columnsL={4} columnsXL={5}>
-            {#each data.projects as project}
-                <a href={`${base}/proj-${project.$id}`}
-                    ><Card.Media
-                        src="https://picsum.photos/260/150"
-                        alt=""
-                        description={project.description}
-                        title={project.name}></Card.Media
-                    ></a>
-            {/each}
-        </Layout.Grid>
-    </Layout.Stack>
-</Card.Base>