feat: model tag support

src/lib/components/common/Banner.svelte

@@ -39,7 +39,7 @@
 {#if !dismissed}
 	{#if mounted}
 		<div
-			class=" top-0 left-0 right-0 p-2 mx-4 px-3 flex justify-center items-center relative rounded-xl border border-gray-100 dark:border-gray-850 text-gray-800 dark:text-gary-100 bg-white dark:bg-gray-900 backdrop-blur-xl z-40"
+			class=" top-0 left-0 right-0 p-2 mx-4 px-3 flex justify-center items-center relative rounded-xl border border-gray-50 dark:border-gray-850 text-gray-800 dark:text-gary-100 bg-white dark:bg-gray-900 backdrop-blur-xl z-40"
 			transition:fade={{ delay: 100, duration: 300 }}
 		>
 			<div class=" flex flex-col md:flex-row md:items-center flex-1 text-sm w-fit gap-1.5">

src/lib/components/common/Dropdown.svelte

@@ -14,6 +14,7 @@
 	onOpenChange={(state) => {
 		dispatch('change', state);
 	}}
+	typeahead={false}
 >
 	<DropdownMenu.Trigger>
 		<slot />

src/lib/components/common/Tags.svelte

@@ -11,7 +11,7 @@
 	export let addTag: Function;
 </script>
 
-<div class="flex flex-row flex-wrap gap-0.5 line-clamp-1">
+<div class="flex flex-row flex-wrap gap-1 line-clamp-1">
 	<TagList
 		{tags}
 		on:delete={(e) => {

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

@@ -22,26 +22,12 @@
 	};
 </script>
 
-<div class="flex space-x-1 pl-1.5">
+<div class="flex {showTagInput ? 'flex-row-reverse' : ''}">
 	{#if showTagInput}
 		<div class="flex items-center">
-			<button type="button" on:click={addTagHandler}>
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					viewBox="0 0 16 16"
-					fill="currentColor"
-					class="w-3 h-3"
-				>
-					<path
-						fill-rule="evenodd"
-						d="M12.416 3.376a.75.75 0 0 1 .208 1.04l-5 7.5a.75.75 0 0 1-1.154.114l-3-3a.75.75 0 0 1 1.06-1.06l2.353 2.353 4.493-6.74a.75.75 0 0 1 1.04-.207Z"
-						clip-rule="evenodd"
-					/>
-				</svg>
-			</button>
 			<input
 				bind:value={tagName}
-				class=" pl-2 cursor-pointer self-center text-xs h-fit bg-transparent outline-none line-clamp-1 w-[5.5rem]"
+				class=" px-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) => {
@@ -55,11 +41,27 @@
 					<option value={tag.name} />
 				{/each}
 			</datalist>
+
+			<button type="button" on:click={addTagHandler}>
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					viewBox="0 0 16 16"
+					fill="currentColor"
+					stroke-width="2"
+					class="w-3 h-3"
+				>
+					<path
+						fill-rule="evenodd"
+						d="M12.416 3.376a.75.75 0 0 1 .208 1.04l-5 7.5a.75.75 0 0 1-1.154.114l-3-3a.75.75 0 0 1 1.06-1.06l2.353 2.353 4.493-6.74a.75.75 0 0 1 1.04-.207Z"
+						clip-rule="evenodd"
+					/>
+				</svg>
+			</button>
 		</div>
 	{/if}
 
 	<button
-		class=" cursor-pointer self-center p-0.5 space-x-1 flex h-fit items-center dark:hover:bg-gray-700 rounded-full transition border dark:border-gray-600 border-dashed"
+		class=" cursor-pointer self-center p-0.5 flex h-fit items-center dark:hover:bg-gray-700 rounded-full transition border dark:border-gray-600 border-dashed"
 		type="button"
 		on:click={() => {
 			showTagInput = !showTagInput;
@@ -80,6 +82,6 @@
 	</button>
 
 	{#if label && !showTagInput}
-		<span class="text-xs pl-1.5 self-center">{label}</span>
+		<span class="text-xs pl-2 self-center">{label}</span>
 	{/if}
 </div>

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

@@ -7,22 +7,23 @@
 
 {#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-800 dark:text-white"
+		class="px-2 py-[0.5px] gap-0.5 flex justify-between 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}
 		</div>
 		<button
-			class=" m-auto self-center cursor-pointer"
+			class="h-full flex self-center cursor-pointer"
 			on:click={() => {
 				dispatch('delete', tag.name);
 			}}
+			type="button"
 		>
 			<svg
 				xmlns="http://www.w3.org/2000/svg"
 				viewBox="0 0 16 16"
 				fill="currentColor"
-				class="w-3 h-3"
+				class="size-3 m-auto self-center translate-y-[0.3px] translate-x-[3px]"
 			>
 				<path
 					d="M5.28 4.22a.75.75 0 0 0-1.06 1.06L6.94 8l-2.72 2.72a.75.75 0 1 0 1.06 1.06L8 9.06l2.72 2.72a.75.75 0 1 0 1.06-1.06L9.06 8l2.72-2.72a.75.75 0 0 0-1.06-1.06L8 6.94 5.28 4.22Z"