refac: banners

src/lib/components/admin/Settings/Interface.svelte

@@ -389,8 +389,8 @@
 				<hr class=" border-gray-100 dark:border-gray-850 my-2" />
 
 				<div class="mb-2.5">
-					<div class="flex w-full justify-between">
-						<div class=" self-center text-sm">
+					<div class="flex w-full justify-between mb-2">
+						<div class=" self-center text-xs">
 							{$i18n.t('Banners')}
 						</div>
 
@@ -432,7 +432,7 @@
 				{#if $user?.role === 'admin'}
 					<div class=" space-y-3">
 						<div class="flex w-full justify-between mb-2">
-							<div class=" self-center text-sm">
+							<div class=" self-center text-xs">
 								{$i18n.t('Default Prompt Suggestions')}
 							</div>
 

src/lib/components/admin/Settings/Interface/Banners.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import Switch from '$lib/components/common/Switch.svelte';
+	import Textarea from '$lib/components/common/Textarea.svelte';
 	import Tooltip from '$lib/components/common/Tooltip.svelte';
 	import EllipsisVertical from '$lib/components/icons/EllipsisVertical.svelte';
 	import XMark from '$lib/components/icons/XMark.svelte';
@@ -24,6 +25,13 @@
 		});
 	};
 
+	const classNames: Record<string, string> = {
+		info: 'bg-blue-500/20 text-blue-700 dark:text-blue-200 ',
+		success: 'bg-green-500/20 text-green-700 dark:text-green-200',
+		warning: 'bg-yellow-500/20 text-yellow-700 dark:text-yellow-200',
+		error: 'bg-red-500/20 text-red-700 dark:text-red-200'
+	};
+
 	$: if (banners) {
 		init();
 	}
@@ -45,14 +53,14 @@
 	};
 </script>
 
-<div class=" flex flex-col space-y-0.5" bind:this={bannerListElement}>
+<div class=" flex flex-col gap-3" bind:this={bannerListElement}>
 	{#each banners as banner, bannerIdx (banner.id)}
-		<div class=" flex justify-between items-center -ml-1" id="banner-item-{banner.id}">
+		<div class=" flex justify-between items-start -ml-1" id="banner-item-{banner.id}">
 			<EllipsisVertical className="size-4 cursor-move item-handle" />
 
-			<div class="flex flex-row flex-1 gap-2 items-center">
+			<div class="flex flex-row flex-1 gap-2 items-start">
 				<select
-					class="w-fit capitalize rounded-xl text-xs bg-transparent outline-hidden text-left pl-1 pr-2"
+					class="w-fit capitalize rounded-xl text-xs bg-transparent outline-hidden pl-1 pr-5"
 					bind:value={banner.type}
 					required
 				>
@@ -65,10 +73,11 @@
 					<option value="success" class="text-gray-900">{$i18n.t('Success')}</option>
 				</select>
 
-				<input
-					class="pr-5 py-1.5 text-xs w-full bg-transparent outline-hidden"
+				<Textarea
+					className="mr-2 text-xs w-full bg-transparent outline-hidden resize-none"
 					placeholder={$i18n.t('Content')}
 					bind:value={banner.content}
+					maxSize={100}
 				/>
 
 				<div class="relative -left-2">

src/lib/components/common/Textarea.svelte

@@ -5,6 +5,7 @@
 	export let placeholder = '';
 	export let rows = 1;
 	export let minSize = null;
+	export let maxSize = null;
 	export let required = false;
 	export let className =
 		'w-full rounded-lg px-3.5 py-2 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-hidden  h-full';
@@ -30,9 +31,16 @@
 	const resize = () => {
 		if (textareaElement) {
 			textareaElement.style.height = '';
-			textareaElement.style.height = minSize
-				? `${Math.max(textareaElement.scrollHeight, minSize)}px`
-				: `${textareaElement.scrollHeight}px`;
+
+			let height = textareaElement.scrollHeight;
+			if (maxSize && height > maxSize) {
+				height = maxSize;
+			}
+			if (minSize && height < minSize) {
+				height = minSize;
+			}
+
+			textareaElement.style.height = `${height}px`;
 		}
 	};
 </script>