Menu setuping

src/lib/components/studio/sidebarOrganization.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+    import { ActionMenu, Layout, Typography } from '@appwrite.io/pink-svelte';
+    import { base } from '$app/paths';
+    import type { Organization } from '$lib/stores/organization';
+
+    export let organization: Organization;
+</script>
+
+<nav>
+    <Layout.Stack>
+        <Typography.Text color="--fgcolor-neutral-tertiary">{organization.name}</Typography.Text>
+
+        <Layout.Stack gap="xs">
+            <ActionMenu.Item.Anchor href={`${base}/org-${organization.$id}`}
+                >Projects</ActionMenu.Item.Anchor>
+            <ActionMenu.Item.Anchor href={`${base}/org-${organization.$id}/members`}
+                >Members</ActionMenu.Item.Anchor>
+            <ActionMenu.Item.Anchor href={`${base}/org-${organization.$id}/usage`}
+                >Usage</ActionMenu.Item.Anchor>
+            <ActionMenu.Item.Anchor href={`${base}/org-${organization.$id}/billing`}
+                >Billing</ActionMenu.Item.Anchor>
+            <ActionMenu.Item.Anchor href={`${base}/org-${organization.$id}/settings`}
+                >Settings</ActionMenu.Item.Anchor>
+        </Layout.Stack>
+    </Layout.Stack>
+</nav>
+
+<style>
+    nav {
+        position: fixed;
+        left: 0;
+        top: 48px;
+        width: 200px;
+        height: calc(100vh - 48px);
+        padding: var(--space-4) var(--space-8) var(--space-8) var(--space-8);
+    }
+</style>

src/routes/(studio)/+layout.svelte

@@ -0,0 +1,74 @@
+<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';
+
+    const 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: $organization?.$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>
+        <SidebarOrganization organization={$page.data.currentOrganization} />
+    </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);
+
+        &.hasProjectSidebar {
+            background-color: red;
+        }
+    }
+</style>

src/routes/(studio)/+layout.ts

@@ -0,0 +1,70 @@
+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)
+    };
+};

src/routes/(studio)/org-[organization]/+page.svelte

@@ -1 +1,5 @@
-Hey studio!
+<script lang="ts">
+    import { Card } from '@appwrite.io/pink-svelte';
+</script>
+
+<Card.Base>dus</Card.Base>