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]">

src/lib/components/common/Tooltip.svelte

@@ -5,6 +5,8 @@
 
 	import tippy from 'tippy.js';
 
+	export let elementId = '';
+
 	export let placement = 'top';
 	export let content = `I'm a tooltip!`;
 	export let touch = true;
@@ -17,20 +19,30 @@
 	let tooltipElement;
 	let tooltipInstance;
 
-	$: if (tooltipElement && content) {
+	$: if (tooltipElement && (content || elementId)) {
+		let tooltipContent = null;
+
+		if (elementId) {
+			tooltipContent = document.getElementById(`${elementId}`);
+		} else {
+			tooltipContent = DOMPurify.sanitize(content);
+		}
+
 		if (tooltipInstance) {
-			tooltipInstance.setContent(DOMPurify.sanitize(content));
+			tooltipInstance.setContent(tooltipContent);
 		} else {
-			tooltipInstance = tippy(tooltipElement, {
-				content: DOMPurify.sanitize(content),
-				placement: placement,
-				allowHTML: allowHTML,
-				touch: touch,
-				...(theme !== '' ? { theme } : { theme: 'dark' }),
-				arrow: false,
-				offset: offset,
-				...tippyOptions
-			});
+			if (content) {
+				tooltipInstance = tippy(tooltipElement, {
+					content: tooltipContent,
+					placement: placement,
+					allowHTML: allowHTML,
+					touch: touch,
+					...(theme !== '' ? { theme } : { theme: 'dark' }),
+					arrow: false,
+					offset: offset,
+					...tippyOptions
+				});
+			}
 		}
 	} else if (tooltipInstance && content === '') {
 		if (tooltipInstance) {
@@ -48,3 +60,5 @@
 <div bind:this={tooltipElement} class={className}>
 	<slot />
 </div>
+
+<slot name="tooltip"></slot>

src/lib/components/icons/Label.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	export let className = 'size-4';
+	export let strokeWidth = '1.5';
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	fill="none"
+	viewBox="0 0 24 24"
+	stroke-width={strokeWidth}
+	stroke="currentColor"
+	class={className}
+	><path
+		d="M3 17.4V6.6C3 6.26863 3.26863 6 3.6 6H16.6789C16.8795 6 17.0668 6.10026 17.1781 6.26718L20.7781 11.6672C20.9125 11.8687 20.9125 12.1313 20.7781 12.3328L17.1781 17.7328C17.0668 17.8997 16.8795 18 16.6789 18H3.6C3.26863 18 3 17.7314 3 17.4Z"
+	></path></svg
+>

src/lib/components/icons/Tag.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	export let className = 'size-4';
+	export let strokeWidth = '1.8';
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	fill="none"
+	viewBox="0 0 24 24"
+	stroke-width={strokeWidth}
+	stroke="currentColor"
+	class={className}
+>
+	<!-- Tag body with pointed end -->
+	<path d="M4 12 L8 7 H21 V17 H8 L4 12 Z" stroke="currentColor" fill="none" />
+
+	<!-- Tag hole -->
+	<circle cx="10" cy="12" r="0.75" fill="currentColor" stroke="currentColor" />
+</svg>