feat: Change the card description to the filename (#8348)

## Summary

No longer duplicates the badge info for the Model type.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-8348-feat-Change-the-card-description-to-the-filename-2f66d73d3650818d99e1de479d1f8486)
by [Unito](https://www.unito.io)

---------

Co-authored-by: GitHub Action <action@github.com>
Co-authored-by: Amp <amp@ampcode.com>

src/platform/assets/components/AssetCard.stories.ts

@@ -10,7 +10,7 @@ const createAssetData = (
   overrides: Partial<AssetDisplayItem> = {}
 ): AssetDisplayItem => ({
   ...baseAsset,
-  description:
+  secondaryText:
     'High-quality realistic images with perfect detail and natural lighting effects for professional photography',
   badges: [
     { label: 'checkpoints', type: 'type' },
@@ -131,20 +131,21 @@ export const EdgeCases: Story = {
         // Default case for comparison
         createAssetData({
           name: 'Complete Data',
-          description: 'Asset with all data present for comparison'
+          secondaryText: 'Asset with all data present for comparison'
         }),
         // No badges
         createAssetData({
           id: 'no-badges',
           name: 'No Badges',
-          description: 'Testing graceful handling when badges are not provided',
+          secondaryText:
+            'Testing graceful handling when badges are not provided',
           badges: []
         }),
         // No stars
         createAssetData({
           id: 'no-stars',
           name: 'No Stars',
-          description: 'Testing missing stars data gracefully',
+          secondaryText: 'Testing missing stars data gracefully',
           stats: {
             downloadCount: '1.8k',
             formattedDate: '3/15/25'
@@ -154,7 +155,7 @@ export const EdgeCases: Story = {
         createAssetData({
           id: 'no-downloads',
           name: 'No Downloads',
-          description: 'Testing missing downloads data gracefully',
+          secondaryText: 'Testing missing downloads data gracefully',
           stats: {
             stars: '4.2k',
             formattedDate: '3/15/25'
@@ -164,7 +165,7 @@ export const EdgeCases: Story = {
         createAssetData({
           id: 'no-date',
           name: 'No Date',
-          description: 'Testing missing date data gracefully',
+          secondaryText: 'Testing missing date data gracefully',
           stats: {
             stars: '4.2k',
             downloadCount: '1.8k'
@@ -174,21 +175,21 @@ export const EdgeCases: Story = {
         createAssetData({
           id: 'no-stats',
           name: 'No Stats',
-          description: 'Testing when all stats are missing',
+          secondaryText: 'Testing when all stats are missing',
           stats: {}
         }),
-        // Long description
+        // Long secondaryText
         createAssetData({
           id: 'long-desc',
           name: 'Long Description',
-          description:
+          secondaryText:
             'This is a very long description that should demonstrate how the component handles text overflow and truncation with ellipsis. The description continues with even more content to ensure we test the 2-line clamp behavior properly and see how it renders when there is significantly more text than can fit in the allocated space.'
         }),
         // Minimal data
         createAssetData({
           id: 'minimal',
           name: 'Minimal',
-          description: 'Basic model',
+          secondaryText: 'Basic model',
           tags: ['models'],
           badges: [],
           stats: {}

src/platform/assets/components/AssetCard.vue

@@ -82,14 +82,14 @@
       </h3>
       <p
         :id="descId"
-        v-tooltip.top="{ value: asset.description, showDelay: tooltipDelay }"
+        v-tooltip.top="{ value: asset.secondaryText, showDelay: tooltipDelay }"
         :class="
           cn(
             'm-0 text-sm line-clamp-2 [-webkit-box-orient:vertical] [-webkit-line-clamp:2] [display:-webkit-box] text-muted-foreground'
           )
         "
       >
-        {{ asset.description }}
+        {{ asset.secondaryText }}
       </p>
       <div class="flex items-center justify-between gap-2 mt-auto">
         <div class="flex gap-3 text-xs text-muted-foreground">

src/platform/assets/components/modelInfo/ModelInfoPanel.test.ts

@@ -34,7 +34,7 @@ describe('ModelInfoPanel', () => {
     created_at: '2024-01-01T00:00:00Z',
     updated_at: '2024-01-01T00:00:00Z',
     last_access_time: '2024-01-01T00:00:00Z',
-    description: 'A test model description',
+    secondaryText: 'A test model description',
     badges: [],
     stats: {},
     ...overrides

src/platform/assets/composables/useAssetBrowser.test.ts

@@ -84,14 +84,14 @@ describe('useAssetBrowser', () => {
       expect(result.name).toBe(apiAsset.name)
 
       // Adds display properties
-      expect(result.description).toBe('Test model')
+      expect(result.secondaryText).toBe('test-asset.safetensors')
       expect(result.badges).toContainEqual({
         label: 'checkpoints',
         type: 'type'
       })
     })
 
-    it('creates fallback description from tags when metadata missing', () => {
+    it('creates secondaryText from filename when metadata missing', () => {
       const apiAsset = createApiAsset({
         tags: ['models', 'loras'],
         user_metadata: undefined
@@ -100,7 +100,7 @@ describe('useAssetBrowser', () => {
       const { filteredAssets } = useAssetBrowser(ref([apiAsset]))
       const result = filteredAssets.value[0]
 
-      expect(result.description).toBe('loras model')
+      expect(result.secondaryText).toBe('test-asset.safetensors')
     })
 
     it('removes category prefix from badge labels', () => {

src/platform/assets/composables/useAssetBrowser.ts

@@ -9,8 +9,8 @@ import type { FilterState } from '@/platform/assets/components/AssetFilterBar.vu
 import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
 import {
   getAssetBaseModels,
-  getAssetDescription,
-  getAssetDisplayName
+  getAssetDisplayName,
+  getAssetFilename
 } from '@/platform/assets/utils/assetMetadataUtils'
 import { useAssetDownloadStore } from '@/stores/assetDownloadStore'
 import type { NavGroupData, NavItemData } from '@/types/navTypes'
@@ -70,7 +70,7 @@ type AssetBadge = {
 
 // Display properties for transformed assets
 export interface AssetDisplayItem extends AssetItem {
-  description: string
+  secondaryText: string
   badges: AssetBadge[]
   stats: {
     formattedDate?: string
@@ -116,15 +116,11 @@ export function useAssetBrowser(
 
   // 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 =
-      getAssetDescription(asset) ||
-      `${typeTag || t('assetBrowser.unknown')} model`
+    const secondaryText = getAssetFilename(asset)
 
-    // Create badges from tags and metadata
     const badges: AssetBadge[] = []
 
+    const typeTag = asset.tags.find((tag) => tag !== 'models')
     // Type badge from non-root tag
     if (typeTag) {
       // Remove category prefix from badge label (e.g. "checkpoint/model" → "model")
@@ -152,7 +148,7 @@ export function useAssetBrowser(
 
     return {
       ...asset,
-      description,
+      secondaryText,
       badges,
       stats
     }