From 1e2326b101fdceec25d3112faa800ee2ec1e90ee Mon Sep 17 00:00:00 2001
From: ernstmul <ernst.mulders@gmail.com>
Date: Wed, 2 Apr 2025 13:37:29 +0200
Subject: [PATCH] Fix header

---
 src/lib/layout/cover.svelte                   | 19 ++++++++++++-------
 src/lib/layout/shellStudio.svelte             | 15 +++++++++------
 .../project-[project]/auth/header.svelte      |  4 +++-
 .../project-[project]/builder/+page.svelte    |  4 +---
 .../project-[project]/databases/header.svelte |  4 +++-
 .../project-[project]/functions/header.svelte |  4 +++-
 .../project-[project]/messaging/header.svelte |  4 +++-
 .../project-[project]/overview/header.svelte  |  3 ++-
 .../project-[project]/settings/header.svelte  |  5 +++--
 .../project-[project]/sites/header.svelte     |  4 +++-
 .../project-[project]/storage/header.svelte   |  4 +++-
 11 files changed, 45 insertions(+), 25 deletions(-)

diff --git a/src/lib/layout/cover.svelte b/src/lib/layout/cover.svelte
index 72449a331..b9db2553a 100644
--- a/src/lib/layout/cover.svelte
+++ b/src/lib/layout/cover.svelte
@@ -10,14 +10,19 @@
         : '';
 </script>
 
-<div class="top-cover-console" class:no-padding={isStudio} style:block-size={blocksize}>
-    <div class="cover-container" {style}>
-        <Layout.Stack direction="row" alignItems="center">
-            <slot name="header" />
-        </Layout.Stack>
-        <slot />
+{#if isStudio}
+    <slot name="header" />
+    <slot />
+{:else}
+    <div class="top-cover-console" class:no-padding={isStudio} style:block-size={blocksize}>
+        <div class="cover-container" {style}>
+            <Layout.Stack direction="row" alignItems="center">
+                <slot name="header" />
+            </Layout.Stack>
+            <slot />
+        </div>
     </div>
-</div>
+{/if}
 
 <style lang="scss">
     .top-cover-console {
diff --git a/src/lib/layout/shellStudio.svelte b/src/lib/layout/shellStudio.svelte
index 86293968c..e8d1865f9 100644
--- a/src/lib/layout/shellStudio.svelte
+++ b/src/lib/layout/shellStudio.svelte
@@ -60,12 +60,15 @@
                         </Card.Base>
                     </section>
                 {/if}
-                <Layout.Stack>
-                    {#if $page.data?.header}
-                        <svelte:component this={$page.data.header} />
-                    {/if}
-                    <slot />
-                </Layout.Stack>
+
+                <Card.Base>
+                    <Layout.Stack>
+                        {#if $page.data?.header}
+                            <svelte:component this={$page.data.header} />
+                        {/if}
+                        <slot />
+                    </Layout.Stack>
+                </Card.Base>
             </Layout.Stack>
         </div>
         {#if hasProjectSidebar}
diff --git a/src/routes/(console)/project-[project]/auth/header.svelte b/src/routes/(console)/project-[project]/auth/header.svelte
index 32d580bf4..84933c4ec 100644
--- a/src/routes/(console)/project-[project]/auth/header.svelte
+++ b/src/routes/(console)/project-[project]/auth/header.svelte
@@ -6,6 +6,7 @@
     import { Cover } from '$lib/layout';
     import { canWriteProjects } from '$lib/stores/roles';
     import { Typography } from '@appwrite.io/pink-svelte';
+    import { isStudio } from '$lib/system';
 
     const projectId = page.params.project;
     const path = `${base}/project-${projectId}/auth`;
@@ -52,7 +53,8 @@
 
 <Cover>
     <svelte:fragment slot="header">
-        <Typography.Title color="--fgcolor-neutral-primary" size="xl">Auth</Typography.Title>
+        <Typography.Title color="--fgcolor-neutral-primary" size={isStudio ? 's' : 'xl'}
+            >Auth</Typography.Title>
     </svelte:fragment>
     <Tabs>
         {#each tabs as tab}
diff --git a/src/routes/(console)/project-[project]/builder/+page.svelte b/src/routes/(console)/project-[project]/builder/+page.svelte
index 07b908944..9214bdda7 100644
--- a/src/routes/(console)/project-[project]/builder/+page.svelte
+++ b/src/routes/(console)/project-[project]/builder/+page.svelte
@@ -2,6 +2,4 @@
     import { Layout, Card, Typography, Divider } from '@appwrite.io/pink-svelte';
 </script>
 
-<Layout.Stack direction="row">
-    <Card.Base>Iframe</Card.Base>
-</Layout.Stack>
+<Layout.Stack direction="row">Iframe</Layout.Stack>
diff --git a/src/routes/(console)/project-[project]/databases/header.svelte b/src/routes/(console)/project-[project]/databases/header.svelte
index 8025334bb..ca6f5a2fd 100644
--- a/src/routes/(console)/project-[project]/databases/header.svelte
+++ b/src/routes/(console)/project-[project]/databases/header.svelte
@@ -5,6 +5,7 @@
     import { isTabSelected } from '$lib/helpers/load';
     import { Cover } from '$lib/layout';
     import { Typography } from '@appwrite.io/pink-svelte';
+    import { isStudio } from '$lib/system';
 
     const projectId = page.params.project;
     const path = `${base}/project-${projectId}/databases`;
@@ -26,7 +27,8 @@
 
 <Cover>
     <svelte:fragment slot="header">
-        <Typography.Title color="--fgcolor-neutral-primary" size="xl">Databases</Typography.Title>
+        <Typography.Title color="--fgcolor-neutral-primary" size={isStudio ? 's' : 'xl'}
+            >Databases</Typography.Title>
     </svelte:fragment>
     <Tabs>
         {#each tabs as tab}
diff --git a/src/routes/(console)/project-[project]/functions/header.svelte b/src/routes/(console)/project-[project]/functions/header.svelte
index 49eb53b34..ea3bab77c 100644
--- a/src/routes/(console)/project-[project]/functions/header.svelte
+++ b/src/routes/(console)/project-[project]/functions/header.svelte
@@ -5,6 +5,7 @@
     import { isTabSelected } from '$lib/helpers/load';
     import { Cover } from '$lib/layout';
     import { Typography } from '@appwrite.io/pink-svelte';
+    import { isStudio } from '$lib/system';
 
     $: projectId = page.params.project;
     $: path = `${base}/project-${projectId}/functions`;
@@ -30,7 +31,8 @@
 
 <Cover>
     <svelte:fragment slot="header">
-        <Typography.Title color="--fgcolor-neutral-primary" size="xl">Functions</Typography.Title>
+        <Typography.Title color="--fgcolor-neutral-primary" size={isStudio ? 's' : 'xl'}
+            >Functions</Typography.Title>
     </svelte:fragment>
 
     <Tabs>
diff --git a/src/routes/(console)/project-[project]/messaging/header.svelte b/src/routes/(console)/project-[project]/messaging/header.svelte
index 1eac44d3d..d289b21cc 100644
--- a/src/routes/(console)/project-[project]/messaging/header.svelte
+++ b/src/routes/(console)/project-[project]/messaging/header.svelte
@@ -5,6 +5,7 @@
     import { isTabSelected } from '$lib/helpers/load';
     import { Cover } from '$lib/layout';
     import { Typography } from '@appwrite.io/pink-svelte';
+    import { isStudio } from '$lib/system';
 
     const projectId = page.params.project;
     const path = `${base}/project-${projectId}/messaging`;
@@ -31,7 +32,8 @@
 
 <Cover>
     <svelte:fragment slot="header">
-        <Typography.Title color="--fgcolor-neutral-primary" size="xl">Messaging</Typography.Title>
+        <Typography.Title color="--fgcolor-neutral-primary" size={isStudio ? 's' : 'xl'}
+            >Messaging</Typography.Title>
     </svelte:fragment>
     <Tabs>
         {#each tabs as tab}
diff --git a/src/routes/(console)/project-[project]/overview/header.svelte b/src/routes/(console)/project-[project]/overview/header.svelte
index afbd45a70..773d04736 100644
--- a/src/routes/(console)/project-[project]/overview/header.svelte
+++ b/src/routes/(console)/project-[project]/overview/header.svelte
@@ -11,12 +11,13 @@
     import { isSmallViewport } from '$lib/stores/viewport';
     import { Dependencies } from '$lib/constants';
     import { trackEvent } from '$lib/actions/analytics';
+    import { isStudio } from '$lib/system';
 </script>
 
 {#if !page.url.pathname.includes('get-started')}
     <Cover>
         <svelte:fragment slot="header">
-            <Typography.Title color="--fgcolor-neutral-primary" size="xl">
+            <Typography.Title color="--fgcolor-neutral-primary" size={isStudio ? 's' : 'xl'}>
                 {$project?.name}
             </Typography.Title>
             <Id value={$project.$id}>{$project.$id}</Id>
diff --git a/src/routes/(console)/project-[project]/settings/header.svelte b/src/routes/(console)/project-[project]/settings/header.svelte
index 47bc0c210..92569ce37 100644
--- a/src/routes/(console)/project-[project]/settings/header.svelte
+++ b/src/routes/(console)/project-[project]/settings/header.svelte
@@ -6,7 +6,7 @@
     import type { TabElement } from '$lib/helpers/load';
     import { Cover } from '$lib/layout';
     import { canWriteProjects } from '$lib/stores/roles';
-    import { isCloud } from '$lib/system';
+    import { isCloud, isStudio } from '$lib/system';
     import { Typography } from '@appwrite.io/pink-svelte';
 
     const projectId = page.params.project;
@@ -51,7 +51,8 @@
 
 <Cover>
     <svelte:fragment slot="header">
-        <Typography.Title color="--fgcolor-neutral-primary" size="xl">Settings</Typography.Title>
+        <Typography.Title color="--fgcolor-neutral-primary" size={isStudio ? 's' : 'xl'}
+            >Settings</Typography.Title>
     </svelte:fragment>
 
     <Tabs>
diff --git a/src/routes/(console)/project-[project]/sites/header.svelte b/src/routes/(console)/project-[project]/sites/header.svelte
index 317486cef..ba8f41e1d 100644
--- a/src/routes/(console)/project-[project]/sites/header.svelte
+++ b/src/routes/(console)/project-[project]/sites/header.svelte
@@ -5,6 +5,7 @@
     import { isTabSelected } from '$lib/helpers/load';
     import { Cover } from '$lib/layout';
     import { Typography } from '@appwrite.io/pink-svelte';
+    import { isStudio } from '$lib/system';
 
     $: projectId = page.params.project;
     $: path = `${base}/project-${projectId}/sites`;
@@ -25,7 +26,8 @@
 
 <Cover>
     <svelte:fragment slot="header">
-        <Typography.Title color="--fgcolor-neutral-primary" size="xl">Sites</Typography.Title>
+        <Typography.Title color="--fgcolor-neutral-primary" size={isStudio ? 's' : 'xl'}
+            >Sites</Typography.Title>
     </svelte:fragment>
 
     <Tabs variant="primary" let:root>
diff --git a/src/routes/(console)/project-[project]/storage/header.svelte b/src/routes/(console)/project-[project]/storage/header.svelte
index 4d1740030..de16106d2 100644
--- a/src/routes/(console)/project-[project]/storage/header.svelte
+++ b/src/routes/(console)/project-[project]/storage/header.svelte
@@ -5,6 +5,7 @@
     import { isTabSelected } from '$lib/helpers/load';
     import { Cover } from '$lib/layout';
     import { Typography } from '@appwrite.io/pink-svelte';
+    import { isStudio } from '$lib/system';
 
     const projectId = page.params.project;
     const path = `${base}/project-${projectId}/storage`;
@@ -26,7 +27,8 @@
 
 <Cover>
     <svelte:fragment slot="header">
-        <Typography.Title color="--fgcolor-neutral-primary" size="xl">Storage</Typography.Title>
+        <Typography.Title color="--fgcolor-neutral-primary" size={isStudio ? 's' : 'xl'}
+            >Storage</Typography.Title>
     </svelte:fragment>
     <Tabs>
         {#each tabs as tab}