refac

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

@@ -460,25 +460,27 @@
 						<div class="grid lg:grid-cols-2 flex-col gap-1.5">
 							{#each promptSuggestions as prompt, promptIdx}
 								<div
-									class=" flex border border-gray-100 dark:border-none dark:bg-gray-850 rounded-xl py-1.5"
+									class=" flex border rounded-xl border-gray-50 dark:border-none dark:bg-gray-850 py-1.5"
 								>
 									<div class="flex flex-col flex-1 pl-1">
-										<div class="flex border-b border-gray-100 dark:border-gray-850 w-full">
+										<div class="py-1 gap-1">
 											<input
-												class="px-3 py-1.5 text-xs w-full bg-transparent outline-hidden border-r border-gray-100 dark:border-gray-850"
+												class="px-3 text-sm font-medium w-full bg-transparent outline-hidden"
 												placeholder={$i18n.t('Title (e.g. Tell me a fun fact)')}
 												bind:value={prompt.title[0]}
 											/>
 
 											<input
-												class="px-3 py-1.5 text-xs w-full bg-transparent outline-hidden border-r border-gray-100 dark:border-gray-850"
+												class="px-3 text-xs w-full bg-transparent outline-hidden text-gray-600 dark:text-gray-400"
 												placeholder={$i18n.t('Subtitle (e.g. about the Roman Empire)')}
 												bind:value={prompt.title[1]}
 											/>
 										</div>
 
+										<hr class="border-gray-50 dark:border-gray-850 my-1" />
+
 										<textarea
-											class="px-3 py-1.5 text-xs w-full bg-transparent outline-hidden border-r border-gray-100 dark:border-gray-850 resize-none"
+											class="px-3 py-1.5 text-xs w-full bg-transparent outline-hidden resize-none"
 											placeholder={$i18n.t(
 												'Prompt (e.g. Tell me a fun fact about the Roman Empire)'
 											)}
@@ -487,25 +489,27 @@
 										/>
 									</div>
 
-									<button
-										class="px-3"
-										type="button"
-										on:click={() => {
-											promptSuggestions.splice(promptIdx, 1);
-											promptSuggestions = promptSuggestions;
-										}}
-									>
-										<svg
-											xmlns="http://www.w3.org/2000/svg"
-											viewBox="0 0 20 20"
-											fill="currentColor"
-											class="w-4 h-4"
+									<div class="">
+										<button
+											class="p-3"
+											type="button"
+											on:click={() => {
+												promptSuggestions.splice(promptIdx, 1);
+												promptSuggestions = promptSuggestions;
+											}}
 										>
-											<path
-												d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z"
-											/>
-										</svg>
-									</button>
+											<svg
+												xmlns="http://www.w3.org/2000/svg"
+												viewBox="0 0 20 20"
+												fill="currentColor"
+												class="w-4 h-4"
+											>
+												<path
+													d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z"
+												/>
+											</svg>
+										</button>
+									</div>
 								</div>
 							{/each}
 						</div>

src/lib/components/common/Switch.svelte

@@ -1,26 +1,34 @@
 <script lang="ts">
-	import { createEventDispatcher, tick } from 'svelte';
+	import { createEventDispatcher, tick, getContext } from 'svelte';
 	import { Switch } from 'bits-ui';
 	import { settings } from '$lib/stores';
+	import Tooltip from './Tooltip.svelte';
 	export let state = true;
 	export let id = '';
+	export let tooltip = false;
 
+	const i18n = getContext('i18n');
 	const dispatch = createEventDispatcher();
 
 	$: dispatch('change', state);
 </script>
 
-<Switch.Root
-	bind:checked={state}
-	{id}
-	class="flex h-5 min-h-5 w-9 shrink-0 cursor-pointer items-center rounded-full px-[3px] mx-[1px] transition  {($settings?.highContrastMode ??
-	false)
-		? 'focus:outline focus:outline-2 focus:outline-gray-800 focus:dark:outline-gray-200'
-		: 'outline outline-1 outline-gray-100 dark:outline-gray-800'} {state
-		? ' bg-emerald-600'
-		: 'bg-gray-200 dark:bg-transparent'}"
+<Tooltip
+	content={tooltip ? (state ? $i18n.t('Enabled') : $i18n.t('Disabled')) : ''}
+	placement="top"
 >
-	<Switch.Thumb
-		class="pointer-events-none block size-4 shrink-0 rounded-full bg-white transition-transform data-[state=checked]:translate-x-3.5 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:shadow-mini "
-	/>
-</Switch.Root>
+	<Switch.Root
+		bind:checked={state}
+		{id}
+		class="flex h-5 min-h-5 w-9 shrink-0 cursor-pointer items-center rounded-full px-[3px] mx-[1px] transition  {($settings?.highContrastMode ??
+		false)
+			? 'focus:outline focus:outline-2 focus:outline-gray-800 focus:dark:outline-gray-200'
+			: 'outline outline-1 outline-gray-100 dark:outline-gray-800'} {state
+			? ' bg-emerald-600'
+			: 'bg-gray-200 dark:bg-transparent'}"
+	>
+		<Switch.Thumb
+			class="pointer-events-none block size-4 shrink-0 rounded-full bg-white transition-transform data-[state=checked]:translate-x-3.5 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:shadow-mini "
+		/>
+	</Switch.Root>
+</Tooltip>