refac

src/lib/components/chat/ChatControls.svelte

@@ -44,65 +44,60 @@
 	});
 </script>
 
-{#if largeScreen}
+{#if !largeScreen}
 	{#if show}
-		<div class=" absolute bottom-0 right-0 z-20 h-full pointer-events-none">
-			<div class="pr-4 pt-14 pb-8 w-[24rem] h-full" in:slide={{ duration: 200, axis: 'x' }}>
-				<div
-					class="w-full h-full px-5 py-4 bg-white dark:shadow-lg dark:bg-gray-850 border border-gray-50 dark:border-gray-800 rounded-xl z-50 pointer-events-auto overflow-y-auto scrollbar-hidden"
-				>
-					{#if $showCallOverlay}
-						<CallOverlay
-							bind:files
-							{submitPrompt}
-							{stopResponse}
-							{modelId}
-							{chatId}
-							{eventTarget}
-						/>
-					{:else}
-						<Controls
-							on:close={() => {
-								show = false;
-							}}
-							{models}
-							bind:chatFiles
-							bind:params
-						/>
-					{/if}
-				</div>
+		<Drawer bind:show>
+			<div class="  px-6 py-4 h-full">
+				<Controls
+					on:close={() => {
+						show = false;
+					}}
+					{models}
+					bind:chatFiles
+					bind:params
+				/>
 			</div>
-		</div>
+		</Drawer>
 	{/if}
-{:else if $showCallOverlay}
-	<div class=" absolute w-full h-screen max-h-[100dvh] flex z-[999] overflow-hidden">
-		<div
-			class="absolute w-full h-screen max-h-[100dvh] bg-white text-gray-700 dark:bg-black dark:text-gray-300 flex justify-center"
-		>
-			<CallOverlay
-				bind:files
-				{submitPrompt}
-				{stopResponse}
-				{modelId}
-				{chatId}
-				{eventTarget}
-				on:close={() => {
-					show = false;
-				}}
-			/>
+
+	{#if $showCallOverlay}
+		<div class=" absolute w-full h-screen max-h-[100dvh] flex z-[999] overflow-hidden">
+			<div
+				class="absolute w-full h-screen max-h-[100dvh] bg-white text-gray-700 dark:bg-black dark:text-gray-300 flex justify-center"
+			>
+				<CallOverlay
+					bind:files
+					{submitPrompt}
+					{stopResponse}
+					{modelId}
+					{chatId}
+					{eventTarget}
+					on:close={() => {
+						show = false;
+					}}
+				/>
+			</div>
 		</div>
-	</div>
+	{/if}
 {:else if show}
-	<Drawer bind:show>
-		<div class="  px-6 py-4 h-full">
-			<Controls
-				on:close={() => {
-					show = false;
-				}}
-				{models}
-				bind:chatFiles
-				bind:params
-			/>
+	<div class=" absolute bottom-0 right-0 z-20 h-full pointer-events-none">
+		<div class="pr-4 pt-14 pb-8 w-[24rem] h-full" in:slide={{ duration: 200, axis: 'x' }}>
+			<div
+				class="w-full h-full px-5 py-4 bg-white dark:shadow-lg dark:bg-gray-850 border border-gray-50 dark:border-gray-800 rounded-xl z-50 pointer-events-auto overflow-y-auto scrollbar-hidden"
+			>
+				{#if $showCallOverlay}
+					<CallOverlay bind:files {submitPrompt} {stopResponse} {modelId} {chatId} {eventTarget} />
+				{:else}
+					<Controls
+						on:close={() => {
+							show = false;
+						}}
+						{models}
+						bind:chatFiles
+						bind:params
+					/>
+				{/if}
+			</div>
 		</div>
-	</Drawer>
+	</div>
 {/if}

src/lib/components/common/Drawer.svelte

@@ -1,8 +1,9 @@
 <script lang="ts">
 	import { onDestroy, onMount, createEventDispatcher } from 'svelte';
 	import { flyAndScale } from '$lib/utils/transitions';
+	import { fade, fly, slide } from 'svelte/transition';
 
-	export let show = true;
+	export let show = false;
 	export let size = 'md';
 
 	let modalElement = null;
@@ -56,10 +57,11 @@
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <!-- svelte-ignore a11y-no-static-element-interactions -->
+
 <div
 	bind:this={modalElement}
 	class="modal fixed right-0 left-0 bottom-0 bg-black/60 w-full min-h-screen h-screen flex justify-center z-[9999] overflow-hidden overscroll-contain"
-	in:flyAndScale
+	in:fly={{ y: 100, duration: 100 }}
 	on:mousedown={() => {
 		show = false;
 	}}

src/lib/components/layout/Sidebar.svelte

@@ -261,7 +261,7 @@
 	id="sidebar"
 	class="h-screen max-h-[100dvh] min-h-screen select-none {$showSidebar
 		? 'md:relative w-[260px]'
-		: '-translate-x-[260px] w-[0px]'} bg-gray-50 text-gray-900 dark:bg-gray-950 dark:text-gray-200 text-sm transition fixed z-50 top-0 left-0 rounded-r-2xl
+		: '-translate-x-[260px] w-[0px]'} bg-gray-50 text-gray-900 dark:bg-gray-950 dark:text-gray-200 text-sm transition fixed z-50 top-0 left-0
         "
 	data-state={$showSidebar}
 >
@@ -273,7 +273,7 @@
 		<div class="px-2.5 flex justify-between space-x-1 text-gray-600 dark:text-gray-400">
 			<a
 				id="sidebar-new-chat-button"
-				class="flex flex-1 justify-between rounded-xl px-2 py-2 hover:bg-gray-100 dark:hover:bg-gray-900 transition"
+				class="flex flex-1 justify-between rounded-xl px-2 h-full hover:bg-gray-100 dark:hover:bg-gray-900 transition"
 				href="/"
 				draggable="false"
 				on:click={async () => {