Merge branch 'dev' into feat/trusted-email-header

src/lib/components/common/Tags.svelte

@@ -8,7 +8,7 @@
 	export let addTag: Function;
 </script>
 
-<div class="flex flex-row space-x-0.5 line-clamp-1">
+<div class="flex flex-row flex-wrap gap-0.5 line-clamp-1">
 	<TagList
 		{tags}
 		on:delete={(e) => {
@@ -17,6 +17,7 @@
 	/>
 
 	<TagInput
+		label={tags.length == 0 ? 'Add Tags' : ''}
 		on:add={(e) => {
 			addTag(e.detail);
 		}}

src/lib/components/common/Tags/TagInput.svelte

@@ -1,24 +1,31 @@
 <script lang="ts">
 	import { createEventDispatcher, getContext } from 'svelte';
+	import { tags } from '$lib/stores';
+	import { toast } from 'svelte-sonner';
 	const dispatch = createEventDispatcher();
 
 	const i18n = getContext('i18n');
 
+	export let label = '';
 	let showTagInput = false;
 	let tagName = '';
+
+	const addTagHandler = async () => {
+		tagName = tagName.trim();
+		if (tagName !== '') {
+			dispatch('add', tagName);
+			tagName = '';
+			showTagInput = false;
+		} else {
+			toast.error('Invalid Tag');
+		}
+	};
 </script>
 
 <div class="flex space-x-1 pl-1.5">
 	{#if showTagInput}
 		<div class="flex items-center">
-			<button
-				type="button"
-				on:click={() => {
-					dispatch('add', tagName);
-					tagName = '';
-					showTagInput = false;
-				}}
-			>
+			<button type="button" on:click={addTagHandler}>
 				<svg
 					xmlns="http://www.w3.org/2000/svg"
 					viewBox="0 0 16 16"
@@ -34,12 +41,21 @@
 			</button>
 			<input
 				bind:value={tagName}
-				class=" pl-2 cursor-pointer self-center text-xs h-fit bg-transparent outline-none line-clamp-1 w-[8rem]"
+				class=" pl-2 cursor-pointer self-center text-xs h-fit bg-transparent outline-none line-clamp-1 w-[5.5rem]"
 				placeholder={$i18n.t('Add a tag')}
+				list="tagOptions"
+				on:keydown={(event) => {
+					if (event.key === 'Enter') {
+						addTagHandler();
+					}
+				}}
 			/>
+			<datalist id="tagOptions">
+				{#each $tags as tag}
+					<option value={tag.name} />
+				{/each}
+			</datalist>
 		</div>
-
-		<!-- TODO: Tag Suggestions -->
 	{/if}
 
 	<button
@@ -62,4 +78,8 @@
 			</svg>
 		</div>
 	</button>
+
+	{#if label && !showTagInput}
+		<span class="text-xs pl-1.5 self-center">{label}</span>
+	{/if}
 </div>

src/lib/components/common/Tags/TagList.svelte

@@ -7,7 +7,7 @@
 
 {#each tags as tag}
 	<div
-		class="px-2 py-0.5 space-x-1 flex h-fit items-center rounded-full transition border dark:border-gray-600 dark:text-white"
+		class="px-2 py-0.5 space-x-1 flex h-fit items-center rounded-full transition border dark:border-gray-800 dark:text-white"
 	>
 		<div class=" text-[0.7rem] font-medium self-center line-clamp-1">
 			{tag.name}

src/lib/components/common/Tooltip.svelte

@@ -29,6 +29,6 @@
 	});
 </script>
 
-<div bind:this={tooltipElement} aria-label={content}>
+<div bind:this={tooltipElement} aria-label={content} class="flex">
 	<slot />
 </div>