refac: styling

src/lib/components/chat/ChatControls.svelte

@@ -5,6 +5,7 @@
 	import { onMount } from 'svelte';
 	import { mobile, showCallOverlay } from '$lib/stores';
 	import CallOverlay from './MessageInput/CallOverlay.svelte';
+	import Drawer from '../common/Drawer.svelte';
 
 	export let show = false;
 
@@ -91,8 +92,8 @@
 			/>
 		</div>
 	</div>
-{:else}
+{:else if show}
-	<Modal bind:show>
+	<Drawer bind:show>
 		<div class="  px-6 py-4 h-full">
 			<Controls
 				on:close={() => {
@@ -103,5 +104,5 @@
 				bind:params
 			/>
 		</div>
-	</Modal>
+	</Drawer>
 {/if}

src/lib/components/chat/ModelSelector.svelte

@@ -56,7 +56,7 @@
 
 			{#if selectedModelIdx === 0}
 				<div
-					class="  self-center mr-2 disabled:text-gray-600 disabled:hover:text-gray-600 -translate-y-[0.75px]"
+					class="  self-center mx-1 disabled:text-gray-600 disabled:hover:text-gray-600 -translate-y-[0.5px]"
 				>
 					<Tooltip content={$i18n.t('Add Model')}>
 						<button
@@ -82,7 +82,7 @@
 				</div>
 			{:else}
 				<div
-					class="  self-center disabled:text-gray-600 disabled:hover:text-gray-600 mr-2 -translate-y-[0.75px]"
+					class="  self-center mx-1 disabled:text-gray-600 disabled:hover:text-gray-600 -translate-y-[0.5px]"
 				>
 					<Tooltip content={$i18n.t('Remove Model')}>
 						<button
@@ -99,7 +99,7 @@
 								viewBox="0 0 24 24"
 								stroke-width="2"
 								stroke="currentColor"
-								class="size-3.5"
+								class="size-3"
 							>
 								<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 12h-15" />
 							</svg>

src/lib/components/common/Drawer.svelte

@@ -0,0 +1,92 @@
+<script lang="ts">
+	import { onDestroy, onMount, createEventDispatcher } from 'svelte';
+	import { flyAndScale } from '$lib/utils/transitions';
+
+	export let show = true;
+	export let size = 'md';
+
+	let modalElement = null;
+	let mounted = false;
+
+	const sizeToWidth = (size) => {
+		if (size === 'xs') {
+			return 'w-[16rem]';
+		} else if (size === 'sm') {
+			return 'w-[30rem]';
+		} else if (size === 'md') {
+			return 'w-[48rem]';
+		} else {
+			return 'w-[56rem]';
+		}
+	};
+
+	const handleKeyDown = (event: KeyboardEvent) => {
+		if (event.key === 'Escape' && isTopModal()) {
+			console.log('Escape');
+			show = false;
+		}
+	};
+
+	const isTopModal = () => {
+		const modals = document.getElementsByClassName('modal');
+		return modals.length && modals[modals.length - 1] === modalElement;
+	};
+
+	onMount(() => {
+		mounted = true;
+	});
+
+	$: if (show && modalElement) {
+		document.body.appendChild(modalElement);
+		window.addEventListener('keydown', handleKeyDown);
+		document.body.style.overflow = 'hidden';
+	} else if (modalElement) {
+		window.removeEventListener('keydown', handleKeyDown);
+		document.body.removeChild(modalElement);
+		document.body.style.overflow = 'unset';
+	}
+
+	onDestroy(() => {
+		show = false;
+		if (modalElement) {
+			document.body.removeChild(modalElement);
+		}
+	});
+</script>
+
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<div
+	bind:this={modalElement}
+	class="modal fixed top-0 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
+	on:mousedown={() => {
+		show = false;
+	}}
+>
+	<div
+		class=" m-auto max-w-full w-full bg-gray-50 dark:bg-gray-900 max-h-[100dvh] overflow-y-auto scrollbar-hidden"
+		on:mousedown={(e) => {
+			e.stopPropagation();
+		}}
+	>
+		<slot />
+	</div>
+</div>
+
+<style>
+	.modal-content {
+		animation: scaleUp 0.1s ease-out forwards;
+	}
+
+	@keyframes scaleUp {
+		from {
+			transform: scale(0.985);
+			opacity: 0;
+		}
+		to {
+			transform: scale(1);
+			opacity: 1;
+		}
+	}
+</style>