refac: styling

src/lib/components/common/Textarea.svelte

@@ -4,6 +4,9 @@
 	export let value = '';
 	export let placeholder = '';
 
+	export let rows = 1;
+	export let required = false;
+
 	export let className =
 		'w-full rounded-lg px-3 py-2 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-none resize-none h-full';
 
@@ -12,7 +15,7 @@
 	onMount(async () => {
 		await tick();
 		if (textareaElement) {
-			setInterval(adjustHeight, 0);
+			setTimeout(adjustHeight, 0);
 		}
 	});
 
@@ -28,10 +31,8 @@
 	bind:this={textareaElement}
 	bind:value
 	{placeholder}
+	on:input={adjustHeight}
 	class={className}
-	on:input={(e) => {
-		e.target.style.height = '';
-		e.target.style.height = `${e.target.scrollHeight}px`;
-	}}
-	rows="1"
+	{rows}
+	{required}
 />

src/routes/(app)/workspace/prompts/create/+page.svelte

@@ -6,6 +6,7 @@
 	import { onMount, tick, getContext } from 'svelte';
 
 	import { createNewPrompt, getPrompts } from '$lib/apis/prompts';
+	import Textarea from '$lib/components/common/Textarea.svelte';
 
 	const i18n = getContext('i18n');
 
@@ -114,7 +115,7 @@
 	</button>
 
 	<form
-		class="flex flex-col max-w-2xl mx-auto mt-4 mb-10"
+		class="flex flex-col max-w-2xl mx-auto mt-4 mb-10 pb-10"
 		on:submit|preventDefault={() => {
 			submitHandler();
 		}}
@@ -170,11 +171,11 @@
 
 			<div class="mt-2">
 				<div>
-					<textarea
-						class="px-3 py-1.5 text-sm w-full bg-transparent border dark:border-gray-600 outline-none rounded-lg"
+					<Textarea
+						className="px-3 py-1.5 text-sm w-full bg-transparent border dark:border-gray-600 outline-none overflow-y-hidden rounded-lg resize-none"
 						placeholder={$i18n.t('Write a summary in 50 words that summarizes [topic or keyword].')}
-						rows="6"
 						bind:value={content}
+						rows={6}
 						required
 					/>
 				</div>

src/routes/(app)/workspace/prompts/edit/+page.svelte

@@ -9,6 +9,7 @@
 
 	import { getPrompts, updatePromptByCommand } from '$lib/apis/prompts';
 	import { page } from '$app/stores';
+	import Textarea from '$lib/components/common/Textarea.svelte';
 
 	let loading = false;
 
@@ -100,7 +101,7 @@
 	</button>
 
 	<form
-		class="flex flex-col max-w-2xl mx-auto mt-4 mb-10"
+		class="flex flex-col max-w-2xl mx-auto mt-4 mb-10 pb-10"
 		on:submit|preventDefault={() => {
 			updateHandler();
 		}}
@@ -157,10 +158,10 @@
 
 			<div class="mt-2">
 				<div>
-					<textarea
-						class="px-3 py-1.5 text-sm w-full bg-transparent border dark:border-gray-600 outline-none rounded-lg"
+					<Textarea
+						className="px-3 py-1.5 text-sm w-full bg-transparent border dark:border-gray-600 outline-none overflow-y-hidden rounded-lg resize-none"
 						placeholder={$i18n.t(`Write a summary in 50 words that summarizes [topic or keyword].`)}
-						rows="6"
+						rows={6}
 						bind:value={content}
 						required
 					/>