From e8c629a2e28236bb47dc66c6c4886dc92b6613ab Mon Sep 17 00:00:00 2001
From: "Timothy J. Baek" <timothyjrbeck@gmail.com>
Date: Sat, 19 Oct 2024 23:17:47 -0700
Subject: [PATCH] refac: styling

---
 .../admin/Settings/Documents.svelte           |  5 +--
 .../admin/Settings/Interface.svelte           | 13 ++-----
 src/lib/components/common/Textarea.svelte     | 37 +++++++++++++++++++
 3 files changed, 43 insertions(+), 12 deletions(-)
 create mode 100644 src/lib/components/common/Textarea.svelte

diff --git a/src/lib/components/admin/Settings/Documents.svelte b/src/lib/components/admin/Settings/Documents.svelte
index abde51e4f..98841c643 100644
--- a/src/lib/components/admin/Settings/Documents.svelte
+++ b/src/lib/components/admin/Settings/Documents.svelte
@@ -28,6 +28,7 @@
 	import Tooltip from '$lib/components/common/Tooltip.svelte';
 	import Switch from '$lib/components/common/Switch.svelte';
 	import { text } from '@sveltejs/kit';
+	import Textarea from '$lib/components/common/Textarea.svelte';
 
 	const i18n = getContext('i18n');
 
@@ -629,11 +630,9 @@
 					content={$i18n.t('Leave empty to use the default prompt, or enter a custom prompt')}
 					placement="top-start"
 				>
-					<textarea
+					<Textarea
 						bind:value={querySettings.template}
 						placeholder={$i18n.t('Leave empty to use the default prompt, or enter a custom prompt')}
-						class="w-full rounded-lg px-4 py-3 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-none resize-none"
-						rows="4"
 					/>
 				</Tooltip>
 			</div>
diff --git a/src/lib/components/admin/Settings/Interface.svelte b/src/lib/components/admin/Settings/Interface.svelte
index 393ddb166..c5fad0696 100644
--- a/src/lib/components/admin/Settings/Interface.svelte
+++ b/src/lib/components/admin/Settings/Interface.svelte
@@ -14,6 +14,7 @@
 
 	import Tooltip from '$lib/components/common/Tooltip.svelte';
 	import Switch from '$lib/components/common/Switch.svelte';
+	import Textarea from '$lib/components/common/Textarea.svelte';
 
 	const dispatch = createEventDispatcher();
 
@@ -125,10 +126,8 @@
 					content={$i18n.t('Leave empty to use the default prompt, or enter a custom prompt')}
 					placement="top-start"
 				>
-					<textarea
+					<Textarea
 						bind:value={taskConfig.TITLE_GENERATION_PROMPT_TEMPLATE}
-						class="w-full rounded-lg py-3 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-none resize"
-						rows="1"
 						placeholder={$i18n.t('Leave empty to use the default prompt, or enter a custom prompt')}
 					/>
 				</Tooltip>
@@ -141,10 +140,8 @@
 					content={$i18n.t('Leave empty to use the default prompt, or enter a custom prompt')}
 					placement="top-start"
 				>
-					<textarea
+					<Textarea
 						bind:value={taskConfig.TAG_GENERATION_PROMPT_TEMPLATE}
-						class="w-full rounded-lg py-3 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-none resize"
-						rows="1"
 						placeholder={$i18n.t('Leave empty to use the default prompt, or enter a custom prompt')}
 					/>
 				</Tooltip>
@@ -168,10 +165,8 @@
 						content={$i18n.t('Leave empty to use the default prompt, or enter a custom prompt')}
 						placement="top-start"
 					>
-						<textarea
+						<Textarea
 							bind:value={taskConfig.SEARCH_QUERY_GENERATION_PROMPT_TEMPLATE}
-							class="w-full rounded-lg py-3 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-none"
-							rows="1"
 							placeholder={$i18n.t(
 								'Leave empty to use the default prompt, or enter a custom prompt'
 							)}
diff --git a/src/lib/components/common/Textarea.svelte b/src/lib/components/common/Textarea.svelte
new file mode 100644
index 000000000..78f07450a
--- /dev/null
+++ b/src/lib/components/common/Textarea.svelte
@@ -0,0 +1,37 @@
+<script lang="ts">
+	import { onMount, tick } from 'svelte';
+
+	export let value = '';
+	export let placeholder = '';
+
+	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';
+
+	let textareaElement;
+
+	onMount(async () => {
+		await tick();
+		if (textareaElement) {
+			setInterval(adjustHeight, 0);
+		}
+	});
+
+	const adjustHeight = () => {
+		if (textareaElement) {
+			textareaElement.style.height = '';
+			textareaElement.style.height = `${textareaElement.scrollHeight}px`;
+		}
+	};
+</script>
+
+<textarea
+	bind:this={textareaElement}
+	bind:value
+	{placeholder}
+	class={className}
+	on:input={(e) => {
+		e.target.style.height = '';
+		e.target.style.height = `${e.target.scrollHeight}px`;
+	}}
+	rows="1"
+/>