From 5e761d4a434c55ceb729e5ca82a9a1622253c8fc Mon Sep 17 00:00:00 2001
From: Arjan Singh <arjan@comfy.org>
Date: Tue, 16 Sep 2025 13:16:48 -0700
Subject: [PATCH] [fix] add AssetBadge type

---
 .../assets/components/AssetBadgeGroup.vue     |  8 +++----
 .../assets/composables/useAssetBrowser.ts     | 23 ++++++++++---------
 2 files changed, 16 insertions(+), 15 deletions(-)

diff --git a/src/platform/assets/components/AssetBadgeGroup.vue b/src/platform/assets/components/AssetBadgeGroup.vue
index c8d1e8427..bb27153c2 100644
--- a/src/platform/assets/components/AssetBadgeGroup.vue
+++ b/src/platform/assets/components/AssetBadgeGroup.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="absolute bottom-2 right-2 flex flex-col-reverse items-end gap-1">
+  <div class="absolute bottom-2 right-2 flex flex-wrap justify-end gap-1">
     <span
       v-for="badge in badges"
       :key="badge.label"
@@ -18,16 +18,16 @@
 <script setup lang="ts">
 import { cn } from '@/utils/tailwindUtil'
 
-interface Badge {
+type AssetBadge = {
   label: string
   type: 'type' | 'base' | 'size'
 }
 
 defineProps<{
-  badges: Badge[]
+  badges: AssetBadge[]
 }>()
 
-function getBadgeColor(type: Badge['type']): string {
+function getBadgeColor(type: AssetBadge['type']): string {
   switch (type) {
     case 'type':
       return 'bg-blue-100/90 dark-theme:bg-blue-100/80'
diff --git a/src/platform/assets/composables/useAssetBrowser.ts b/src/platform/assets/composables/useAssetBrowser.ts
index 8e3c3b76a..31668aa2f 100644
--- a/src/platform/assets/composables/useAssetBrowser.ts
+++ b/src/platform/assets/composables/useAssetBrowser.ts
@@ -3,14 +3,16 @@ import { computed, ref } from 'vue'
 import type { UUID } from '@/lib/litegraph/src/utils/uuid'
 import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
 
+type AssetBadge = {
+  label: string
+  type: 'type' | 'base' | 'size'
+}
+
 // Display properties for transformed assets
 export interface AssetDisplayItem extends AssetItem {
   description: string
   formattedSize: string
-  badges: Array<{
-    label: string
-    type: 'type' | 'base' | 'size'
-  }>
+  badges: AssetBadge[]
   stats: {
     formattedDate?: string
     downloadCount?: string
@@ -31,32 +33,31 @@ export function useAssetBrowser(assets: AssetItem[] = []) {
   // Transform API asset to display asset
   function transformAssetForDisplay(asset: AssetItem): AssetDisplayItem {
     // Extract description from metadata or create from tags
+    const typeTag = asset.tags.find((tag) => tag !== 'models')
     const description =
-      asset.user_metadata?.description ||
-      `${asset.tags.find((tag) => tag !== 'models') || 'Unknown'} model`
+      asset.user_metadata?.description || `${typeTag || 'Unknown'} model`
 
     // Format file size
     const formattedSize = formatFileSize(asset.size)
 
     // Create badges from tags and metadata
-    const badges = []
+    const badges: AssetBadge[] = []
 
     // Type badge from non-root tag
-    const typeTag = asset.tags.find((tag) => tag !== 'models')
     if (typeTag) {
-      badges.push({ label: typeTag, type: 'type' as const })
+      badges.push({ label: typeTag, type: 'type' })
     }
 
     // Base model badge from metadata
     if (asset.user_metadata?.base_model) {
       badges.push({
         label: asset.user_metadata.base_model,
-        type: 'base' as const
+        type: 'base'
       })
     }
 
     // Size badge
-    badges.push({ label: formattedSize, type: 'size' as const })
+    badges.push({ label: formattedSize, type: 'size' })
 
     // Create display stats from API data
     const stats = {