From 7a6c052a8d207c8ca93b665df4b81e792441f2aa Mon Sep 17 00:00:00 2001
From: ernstmul <ernst.mulders@gmail.com>
Date: Tue, 8 Apr 2025 12:35:20 +0200
Subject: [PATCH] Fix chat mobile

---
 src/lib/components/chat/chat.svelte           | 92 +++++++++++++------
 src/lib/layout/shellStudio.svelte             |  3 +-
 src/lib/profiles.ts                           | 10 +-
 .../project-[project]/+layout.svelte          | 13 ++-
 .../project-[project]/builder/+page.svelte    | 30 +++++-
 5 files changed, 105 insertions(+), 43 deletions(-)

diff --git a/src/lib/components/chat/chat.svelte b/src/lib/components/chat/chat.svelte
index 8e9c8981b..550732e83 100644
--- a/src/lib/components/chat/chat.svelte
+++ b/src/lib/components/chat/chat.svelte
@@ -18,35 +18,57 @@
     let minimizeChat = $state(false);
 </script>
 
-<section class="chat" style:width={showChat ? `${width}px` : 0} class:is-visible={showChat}>
+<section
+    class="chat"
+    style:width={$isSmallViewport ? 'calc(100vw - 16px)' : showChat ? `${width}px` : 0}
+    class:minimize-chat={minimizeChat}
+    class:is-visible={showChat}>
     <div class="chat-content">
-        <header>
-            <Layout.Stack direction="row" justifyContent="space-between" alignItems="center">
-                <Typography.Text>Chat</Typography.Text>
-                <Button.Button
-                    icon
-                    variant="secondary"
-                    size="s"
-                    on:click={() => {
-                        showChat = false;
-                    }}
-                    ><Icon
-                        icon={IconChevronLeft}
-                        color="--fgcolor-neutral-tertiary" /></Button.Button>
-            </Layout.Stack>
-        </header>
-        <Divider />
+        {#if !minimizeChat}
+            <header>
+                <Layout.Stack direction="row" justifyContent="space-between" alignItems="center">
+                    <Typography.Text>Chat</Typography.Text>
+                    <Button.Button
+                        icon
+                        variant="secondary"
+                        size="s"
+                        on:click={() => {
+                            if ($isSmallViewport) {
+                                minimizeChat = !minimizeChat;
+                            } else {
+                                showChat = false;
+                            }
+                        }}
+                        ><Icon
+                            icon={$isSmallViewport ? IconChevronDown : IconChevronLeft}
+                            color="--fgcolor-neutral-tertiary" /></Button.Button>
+                </Layout.Stack>
+            </header>
+            <Divider />
 
-        <Conversation />
-        <div class="input">
-            <textarea placeholder="Reply..."></textarea>
-            <Layout.Stack direction="row" justifyContent="flex-end">
-                <Button.Button icon variant="secondary" size="s"
-                    ><Icon
-                        icon={IconPaperClip}
-                        color="--fgcolor-neutral-tertiary" /></Button.Button>
-                <Button.Button icon variant="secondary" size="s"
-                    ><Icon icon={IconArrowUp} color="--fgcolor-neutral-tertiary" /></Button.Button>
+            <Conversation />
+        {/if}
+        <div class="input" class:minimize-chat={minimizeChat}>
+            <Layout.Stack
+                direction={minimizeChat ? 'row' : 'column'}
+                alignItems={minimizeChat ? 'center' : 'flex-end'}>
+                <textarea
+                    placeholder="Chat with Imagine..."
+                    on:focus={() => {
+                        minimizeChat = false;
+                    }}></textarea>
+                <div class="options">
+                    <Layout.Stack direction="row" justifyContent="flex-end">
+                        <Button.Button icon variant="secondary" size="s"
+                            ><Icon
+                                icon={IconPaperClip}
+                                color="--fgcolor-neutral-tertiary" /></Button.Button>
+                        <Button.Button icon variant="secondary" size="s"
+                            ><Icon
+                                icon={IconArrowUp}
+                                color="--fgcolor-neutral-tertiary" /></Button.Button>
+                    </Layout.Stack>
+                </div>
             </Layout.Stack>
         </div>
     </div>
@@ -65,9 +87,19 @@
     .chat {
         width: 0;
         position: fixed;
-        top: 48px;
-        height: calc(100vh - 48px);
-        //transition: width 0.1s ease-in-out;
+        top: 56px;
+        height: calc(100vh - 56px);
+        z-index: 2;
+
+        @media (min-width: 768px) {
+            top: 48px;
+            height: calc(100vh - 70px);
+        }
+    }
+    .chat.minimize-chat {
+        top: auto;
+        bottom: var(--space-4);
+        height: 60px;
     }
 
     .chat-placeholder {
diff --git a/src/lib/layout/shellStudio.svelte b/src/lib/layout/shellStudio.svelte
index 21bb6ffa9..eb5c216a4 100644
--- a/src/lib/layout/shellStudio.svelte
+++ b/src/lib/layout/shellStudio.svelte
@@ -255,7 +255,8 @@
     }
 
     .overlay-button {
-        margin-top: calc(-1 * var(--space-6));
+        position: fixed;
+        top: 0;
         @media (min-width: 1024px) {
             display: none;
         }
diff --git a/src/lib/profiles.ts b/src/lib/profiles.ts
index 4fb91b0a9..805bc06eb 100644
--- a/src/lib/profiles.ts
+++ b/src/lib/profiles.ts
@@ -6,6 +6,7 @@ type Profile = {
     hasMessages: boolean;
     hasStorage: boolean;
     hasSites: boolean;
+    hasProjectProgressBars: boolean;
 };
 
 export const ConsoleCloudProfile: Profile = {
@@ -15,7 +16,8 @@ export const ConsoleCloudProfile: Profile = {
     hasFunctions: true,
     hasMessages: true,
     hasStorage: true,
-    hasSites: true
+    hasSites: true,
+    hasProjectProgressBars: true
 };
 
 export const ConsoleSelfhostedProfile: Profile = {
@@ -25,7 +27,8 @@ export const ConsoleSelfhostedProfile: Profile = {
     hasFunctions: true,
     hasMessages: true,
     hasStorage: true,
-    hasSites: true
+    hasSites: true,
+    hasProjectProgressBars: true
 };
 
 export const StudioProfile: Profile = {
@@ -35,5 +38,6 @@ export const StudioProfile: Profile = {
     hasFunctions: false,
     hasMessages: true,
     hasStorage: true,
-    hasSites: true
+    hasSites: true,
+    hasProjectProgressBars: false
 };
diff --git a/src/routes/(console)/project-[project]/+layout.svelte b/src/routes/(console)/project-[project]/+layout.svelte
index 8aa3c635a..0634000fe 100644
--- a/src/routes/(console)/project-[project]/+layout.svelte
+++ b/src/routes/(console)/project-[project]/+layout.svelte
@@ -24,6 +24,7 @@
         canWriteProjects,
         canWriteSites
     } from '$lib/stores/roles';
+    import { consoleProfile } from '$lib/system';
 
     onMount(() => {
         return sdk.forConsole.client.subscribe(['project', 'console'], (response) => {
@@ -113,11 +114,13 @@
 
 <slot />
 
-<div class="layout-level-progress-bars">
-    <UploadBox />
-    <MigrationBox />
-    <BackupRestoreBox />
-</div>
+{#if consoleProfile.hasProjectProgressBars}
+    <div class="layout-level-progress-bars">
+        <UploadBox />
+        <MigrationBox />
+        <BackupRestoreBox />
+    </div>
+{/if}
 
 <style>
     .layout-level-progress-bars {
diff --git a/src/routes/(console)/project-[project]/builder/+page.svelte b/src/routes/(console)/project-[project]/builder/+page.svelte
index 6d1b3752d..9984616d6 100644
--- a/src/routes/(console)/project-[project]/builder/+page.svelte
+++ b/src/routes/(console)/project-[project]/builder/+page.svelte
@@ -4,6 +4,7 @@
     import { page } from '$app/state';
     import { Tab, Tabs, Terminal } from '$lib/components';
     import { base } from '$app/paths';
+    import { isSmallViewport } from '$lib/stores/viewport';
     import {
         IconChevronDoubleUp,
         IconDeviceMobile,
@@ -64,7 +65,10 @@
     }
 </script>
 
-<Layout.Stack direction="column" height="calc(100vh - 120px)" gap="none">
+<Layout.Stack
+    direction="column"
+    height={$isSmallViewport ? 'calc(100vh - 203px)' : 'calc(100vh - 120px)'}
+    gap="none">
     <Layout.Stack direction="column">
         <Tabs>
             {#each tabs as tab}
@@ -110,18 +114,36 @@
 <style>
     aside {
         background-color: var(--bgcolor-neutral-default);
-        width: calc(100% + 2 * var(--space-9));
-        margin-inline-start: calc(-1 * var(--space-9));
+
+        margin-inline-start: -25px;
         margin-block-end: calc(-1 * var(--space-9));
         padding: var(--space-3);
         border-bottom-left-radius: var(--border-radius-m);
         border-bottom-right-radius: var(--border-radius-m);
+
+        border: 1px solid var(--border-neutral);
+        width: calc(100% - var(--space-7));
+
+        position: fixed;
+        bottom: 100px;
+
+        @media (min-width: 768px) {
+            width: calc(100% + 2 * var(--space-9));
+            margin-inline-start: calc(-1 * var(--space-9));
+            position: static;
+            border: 0;
+        }
     }
     summary {
         cursor: pointer;
     }
     .iframe-container {
-        flex-grow: 1;
+        height: calc(100vh - 296px);
+
+        @media (min-width: 768px) {
+            flex-grow: 1;
+            height: auto;
+        }
     }
     iframe {
         border: none;