From 23e2da33184ab051646c9d23e903df9a67698534 Mon Sep 17 00:00:00 2001 From: ernstmul Date: Wed, 7 May 2025 11:58:07 +0200 Subject: [PATCH 1/8] WIP new studio layout for chat / preview --- src/lib/components/chat/chat.svelte | 5 +- src/lib/layout/shellStudio.svelte | 50 +++++++++---------- .../studio/artifact-[artifact]/+layout.svelte | 6 +-- 3 files changed, 29 insertions(+), 32 deletions(-) diff --git a/src/lib/components/chat/chat.svelte b/src/lib/components/chat/chat.svelte index 6a5d4d9d7..c69088920 100644 --- a/src/lib/components/chat/chat.svelte +++ b/src/lib/components/chat/chat.svelte @@ -207,10 +207,7 @@ '.' '.'; height: calc(100% - var(--space-4)); - background-color: var(--bgcolor-neutral-primary); width: 100%; - border: 1px solid var(--border-neutral); - border-radius: var(--border-radius-m); @media (min-width: 768px) { height: 100%; @@ -220,7 +217,7 @@ header { display: grid; gap: 1rem; - padding: 1rem; + padding: var(--base-16); } .is-visible .chat-content { diff --git a/src/lib/layout/shellStudio.svelte b/src/lib/layout/shellStudio.svelte index d97b4cfbc..9287273f5 100644 --- a/src/lib/layout/shellStudio.svelte +++ b/src/lib/layout/shellStudio.svelte @@ -113,7 +113,7 @@ let resizerLeftPosition = $state( page.data?.subNavigation ? getChatWidthFromPrefs() + 24 : getChatWidthFromPrefs() ); - let resizerLeftOffset = $state(page.data?.subNavigation ? 52 : 52); + let resizerLeftOffset = $state(page.data?.subNavigation ? 52 : 76); let chatWidth = $derived(resizerLeftPosition - resizerLeftOffset); $effect(() => { @@ -336,22 +336,22 @@ {:else} - - {#if hasProjectSidebar} - - {#if $showChat} - + + + {#if hasProjectSidebar} + + {#if $showChat} + + {/if} {/if} - {/if} - {@const Header = page.data.header} {#if page.data.subNavigation} {@const SubNavigation = page.data.subNavigation} @@ -372,8 +372,8 @@ {@render children()} {/if} - - + + {/if} {#if hasProjectSidebar} @@ -497,9 +497,8 @@ cursor: col-resize; margin-inline: 10px; position: absolute; - height: calc(100vh - 82px); - margin-block-start: 6px; - + height: calc(100vh - 72px); + margin-block-start: calc(-1 * var(--space-9)); margin-inline-start: 0px; &::after { @@ -507,16 +506,17 @@ cursor: col-resize; position: absolute; height: 100%; - width: 2px; + width: 1px; margin-left: -1px; left: 8px; - background-color: var(--border-neutral-strong); - opacity: 0; - transition: opacity 0.3s ease-in-out; + background-color: var(--border-neutral); + opacity: 1; + transition: all 0.3s ease-in-out; } &:hover::after { - opacity: 1; + width: 2px; + background-color: var(--border-neutral-strong); } } diff --git a/src/routes/(console)/project-[project]/studio/artifact-[artifact]/+layout.svelte b/src/routes/(console)/project-[project]/studio/artifact-[artifact]/+layout.svelte index bf0f99417..0fed14751 100644 --- a/src/routes/(console)/project-[project]/studio/artifact-[artifact]/+layout.svelte +++ b/src/routes/(console)/project-[project]/studio/artifact-[artifact]/+layout.svelte @@ -100,7 +100,7 @@ direction="column" height={$isSmallViewport ? 'calc(100vh - 218px)' : 'calc(100vh - 120px)'} gap="none"> - + {#each tabs as tab} Date: Wed, 7 May 2025 14:30:45 +0200 Subject: [PATCH 2/8] Layout fixes --- src/lib/components/chat/chat.svelte | 14 +++++++++++--- src/lib/helpers/studioLayout.ts | 1 - src/lib/layout/shellStudio.svelte | 8 ++++---- .../studio/artifact-[artifact]/+layout.svelte | 19 +++++++++++++------ .../studio/artifact-[artifact]/+page.svelte | 4 ++-- 5 files changed, 30 insertions(+), 16 deletions(-) diff --git a/src/lib/components/chat/chat.svelte b/src/lib/components/chat/chat.svelte index c69088920..04470d7a4 100644 --- a/src/lib/components/chat/chat.svelte +++ b/src/lib/components/chat/chat.svelte @@ -112,7 +112,9 @@ color="--fgcolor-neutral-tertiary" /> - +
+ +
{/if} @@ -217,7 +219,12 @@ header { display: grid; gap: 1rem; - padding: var(--base-16); + padding: var(--base-8); + } + + .divider-wrapper { + margin-inline-start: calc(-1 * var(--base-24)); + width: calc(100% + 30px); } .is-visible .chat-content { @@ -226,8 +233,9 @@ } .input { - border-top: 1px solid var(--border-neutral); + border: 1px solid var(--border-neutral); border-radius: var(--border-radius-m); + margin-block-end: var(--space-4); padding: var(--space-6); textarea { diff --git a/src/lib/helpers/studioLayout.ts b/src/lib/helpers/studioLayout.ts index 5b53e744d..5ec8e7d5c 100644 --- a/src/lib/helpers/studioLayout.ts +++ b/src/lib/helpers/studioLayout.ts @@ -23,7 +23,6 @@ export function getChatWidthFromPrefs(): number { } export function saveChatWidthToPrefs(position: number) { const currentPrefs = userPreferences(); - const newPrefs = { ...currentPrefs, studioChatWidth: position diff --git a/src/lib/layout/shellStudio.svelte b/src/lib/layout/shellStudio.svelte index 9287273f5..281002673 100644 --- a/src/lib/layout/shellStudio.svelte +++ b/src/lib/layout/shellStudio.svelte @@ -113,7 +113,7 @@ let resizerLeftPosition = $state( page.data?.subNavigation ? getChatWidthFromPrefs() + 24 : getChatWidthFromPrefs() ); - let resizerLeftOffset = $state(page.data?.subNavigation ? 52 : 76); + let resizerLeftOffset = $state(page.data?.subNavigation ? 52 : 60); let chatWidth = $derived(resizerLeftPosition - resizerLeftOffset); $effect(() => { @@ -336,7 +336,7 @@ {:else} - + {#if hasProjectSidebar} @@ -498,8 +498,8 @@ margin-inline: 10px; position: absolute; height: calc(100vh - 72px); - margin-block-start: calc(-1 * var(--space-9)); - margin-inline-start: 0px; + margin-block-start: calc(-1 * var(--base-8)); + margin-inline-start: 0; &::after { content: ''; diff --git a/src/routes/(console)/project-[project]/studio/artifact-[artifact]/+layout.svelte b/src/routes/(console)/project-[project]/studio/artifact-[artifact]/+layout.svelte index 0fed14751..80d97f9c1 100644 --- a/src/routes/(console)/project-[project]/studio/artifact-[artifact]/+layout.svelte +++ b/src/routes/(console)/project-[project]/studio/artifact-[artifact]/+layout.svelte @@ -98,9 +98,9 @@ - + {#each tabs as tab} {/each} - +
+ +
{@render children()}