Fix org page, make chat into separate component and make it hide able

src/lib/components/chat.svelte

@@ -0,0 +1,56 @@
+<script>
+    import { Divider, Card, Typography, Layout, Button, Icon } from '@appwrite.io/pink-svelte';
+    import { IconChevronLeft } from '@appwrite.io/pink-icons-svelte';
+
+    export let showChat;
+</script>
+
+<section class="chat" class:is-visible={showChat}>
+    <Card.Base>
+        <div class="chat-content">
+            <Layout.Stack height="calc(100vh - 120px)">
+                <Layout.Stack direction="row" justifyContent="space-between" alignItems="center">
+                    <Typography.Text>Chat</Typography.Text>
+                    <button
+                        on:click={() => {
+                            showChat = false;
+                        }}>
+                        <Icon icon={IconChevronLeft} />
+                    </button>
+                </Layout.Stack>
+
+                <Divider />
+                <Typography.Text>
+                    Phasellus a ultricies nulla. Proin tristique aliquam dui. Phasellus porta
+                    sodales justo, et feugiat ligula pulvinar sed. Morbi et nulla hendrerit,
+                    pellentesque est sodales, euismod magna. Suspendisse vel massa arcu. Nulla
+                    ultrices sit amet metus ac euismod. Curabitur ultrices aliquet libero, a
+                    pharetra orci tristique in. Etiam egestas fermentum justo ut semper. Sed
+                    vulputate eros erat, ac sollicitudin nulla condimentum volutpat. Sed vulputate
+                    est ante.
+                </Typography.Text>
+            </Layout.Stack>
+        </div>
+    </Card.Base>
+</section>
+
+<style lang="scss">
+    .chat {
+        width: 0;
+        overflow: hidden;
+        transition: width 0.3s ease-in-out;
+
+        &.is-visible {
+            width: 600px;
+        }
+    }
+
+    .chat-content {
+        opacity: 0;
+    }
+
+    .is-visible .chat-content {
+        transition: opacity 0.3s ease-in-out 0.2s;
+        opacity: 1;
+    }
+</style>

src/lib/components/index.ts

@@ -81,3 +81,4 @@ export { default as Sidebar } from './sidebar.svelte';
 export { default as BottomSheet } from './bottom-sheet/index';
 export { default as Confirm } from './confirm.svelte';
 export { default as UsageCard } from './usageCard.svelte';
+export { default as Chat } from './chat.svelte';

src/lib/layout/shellStudio.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { AvatarInitials, Breadcrumbs } from '$lib/components/index.js';
+    import { AvatarInitials, Breadcrumbs, Chat } from '$lib/components/index.js';
     import { Avatar, Divider, Layout, Card, Typography } from '@appwrite.io/pink-svelte';
     import { page } from '$app/stores';
     import { organization, organizationList } from '$lib/stores/organization';
@@ -40,25 +40,8 @@
         </header>
         <div class="studio-content" class:project-sidebar={hasProjectSidebar}>
             <Layout.Stack direction="row">
-                {#if showChat}
-                    <section class="chat">
-                        <Card.Base>
-                            <Layout.Stack height="calc(100vh - 120px)">
-                                <Typography.Text>Chat</Typography.Text>
-                                <Divider />
-                                <Typography.Text>
-                                    Phasellus a ultricies nulla. Proin tristique aliquam dui.
-                                    Phasellus porta sodales justo, et feugiat ligula pulvinar sed.
-                                    Morbi et nulla hendrerit, pellentesque est sodales, euismod
-                                    magna. Suspendisse vel massa arcu. Nulla ultrices sit amet metus
-                                    ac euismod. Curabitur ultrices aliquet libero, a pharetra orci
-                                    tristique in. Etiam egestas fermentum justo ut semper. Sed
-                                    vulputate eros erat, ac sollicitudin nulla condimentum volutpat.
-                                    Sed vulputate est ante.
-                                </Typography.Text>
-                            </Layout.Stack>
-                        </Card.Base>
-                    </section>
+                {#if hasProjectSidebar}
+                    <Chat bind:showChat />
                 {/if}
 
                 <Card.Base>
@@ -104,8 +87,4 @@
             margin-left: 52px;
         }
     }
-
-    .chat {
-        width: 600px;
-    }
 </style>

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

@@ -144,30 +144,28 @@
 </script>
 
 {#if isStudio}
-    <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 size="s">Create project</Button>
-            </Layout.Stack>
-
-            <Divider />
-
-            <Layout.Grid gap="l" columnsS={3} columns={4} columnsL={4} columnsXL={5}>
-                <!-- TODO: this now maps over projects, but probably will be more like artifacts (and location might be different-->
-                {#each data.projects.projects as project}
-                    <a href={`${base}/project-${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>
+        <Layout.Stack direction="row" justifyContent="space-between" alignItems="center">
+            <Typography.Text variant="m-500" color="--fgcolor-neutral-secondary"
+                >Projects</Typography.Text>
+            <Button size="s">Create project</Button>
         </Layout.Stack>
-    </Card.Base>
+
+        <Divider />
+
+        <Layout.Grid gap="l" columnsS={3} columns={4} columnsL={4} columnsXL={5}>
+            <!-- TODO: this now maps over projects, but probably will be more like artifacts (and location might be different-->
+            {#each data.projects.projects as project}
+                <a href={`${base}/project-${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>
 {:else}
     <Container>
         <div class="u-flex u-gap-12 common-section u-main-space-between">

src/routes/(console)/organization-[organization]/header.svelte

@@ -16,7 +16,7 @@
         isBilling,
         isOwner
     } from '$lib/stores/roles';
-    import { GRACE_PERIOD_OVERRIDE, isCloud } from '$lib/system';
+    import { GRACE_PERIOD_OVERRIDE, isCloud, isStudio } from '$lib/system';
     import { IconGithub, IconPlus } from '@appwrite.io/pink-icons-svelte';
     import { Icon, Tooltip, Typography, Layout, Badge } from '@appwrite.io/pink-svelte';
 
@@ -76,7 +76,7 @@
     ].filter((tab) => !tab.disabled);
 </script>
 
-{#if $organization?.$id}
+{#if $organization?.$id && !isStudio}
     <Cover>
         <svelte:fragment slot="header">
             <span class="u-flex u-cross-center u-gap-8 u-min-width-0">