refac: model item tag styling

src/lib/components/chat/ModelSelector/ModelItem.svelte

@@ -14,6 +14,8 @@
 	import ModelItemMenu from './ModelItemMenu.svelte';
 	import EllipsisHorizontal from '$lib/components/icons/EllipsisHorizontal.svelte';
 	import { toast } from 'svelte-sonner';
+	import Tag from '$lib/components/icons/Tag.svelte';
+	import Label from '$lib/components/icons/Label.svelte';
 
 	const i18n = getContext('i18n');
 
@@ -55,7 +57,7 @@
 	}}
 >
 	<div class="flex flex-col flex-1 gap-1.5">
-		{#if (item?.model?.tags ?? []).length > 0}
+		<!-- {#if (item?.model?.tags ?? []).length > 0}
 			<div
 				class="flex gap-0.5 self-center items-start h-full w-full translate-y-[0.5px] overflow-x-auto scrollbar-none"
 			>
@@ -69,7 +71,7 @@
 					</Tooltip>
 				{/each}
 			</div>
-		{/if}
+		{/if} -->
 
 		<div class="flex items-center gap-2">
 			<div class="flex items-center min-w-fit">
@@ -136,6 +138,26 @@
 
 				<!-- {JSON.stringify(item.info)} -->
 
+				{#if (item?.model?.tags ?? []).length > 0}
+					{#key item.model.id}
+						<Tooltip elementId="tags-{item.model.id}">
+							<div slot="tooltip" id="tags-{item.model.id}">
+								{#each item.model?.tags.sort((a, b) => a.name.localeCompare(b.name)) as tag}
+									<Tooltip content={tag.name} className="flex-shrink-0">
+										<div class=" text-xs font-semibold rounded-sm uppercase text-white">
+											{tag.name}
+										</div>
+									</Tooltip>
+								{/each}
+							</div>
+
+							<div class="translate-y-[1px]">
+								<Tag />
+							</div>
+						</Tooltip>
+					{/key}
+				{/if}
+
 				{#if item.model?.direct}
 					<Tooltip content={`${$i18n.t('Direct')}`}>
 						<div class="translate-y-[1px]">