From 198bacc762bc00562fc2fa984bbf7e83ae79e353 Mon Sep 17 00:00:00 2001
From: Jin Yi <jin12cc@gmail.com>
Date: Mon, 20 Oct 2025 18:52:56 +0900
Subject: [PATCH] feat: Improve media asset display with file format tags and
 filename truncation
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add file format tags (PNG, JPG, etc.) for input directory assets
- Truncate long filenames in input assets with originalFilename preservation
- Show file format chip independently from duration chip
- Fix conditional display logic for chips in MediaAssetCard
- Apply consistent filename truncation (20 chars) across cloud assets

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 src/components/card/CardTop.vue                  |  2 +-
 .../assets/components/MediaAssetCard.vue         | 16 ++++++++++++++--
 .../assets/components/MediaVideoBottom.vue       |  4 ++--
 .../composables/useMediaAssets/useAssetsApi.ts   | 11 ++++++++++-
 4 files changed, 27 insertions(+), 6 deletions(-)

diff --git a/src/components/card/CardTop.vue b/src/components/card/CardTop.vue
index 6d26d5336..fb3a528b6 100644
--- a/src/components/card/CardTop.vue
+++ b/src/components/card/CardTop.vue
@@ -54,7 +54,7 @@ const {
 }>()
 
 const topStyle = computed(() => {
-  const baseClasses = 'relative p-0'
+  const baseClasses = 'relative p-0 overflow-hidden'
 
   const ratioClasses = {
     square: 'aspect-square',
diff --git a/src/platform/assets/components/MediaAssetCard.vue b/src/platform/assets/components/MediaAssetCard.vue
index 91e546036..d78e29e68 100644
--- a/src/platform/assets/components/MediaAssetCard.vue
+++ b/src/platform/assets/components/MediaAssetCard.vue
@@ -62,13 +62,17 @@
         </template>
 
         <!-- Duration/Format chips (bottom-left) - show on hover even when playing -->
-        <template v-if="showDurationChips" #bottom-left>
+        <template v-if="showDurationChips || showFileFormatChip" #bottom-left>
           <div
             class="flex flex-wrap items-center gap-1"
             @mouseenter="handleOverlayMouseEnter"
             @mouseleave="handleOverlayMouseLeave"
           >
-            <SquareChip variant="light" :label="formattedDuration" />
+            <SquareChip
+              v-if="formattedDuration"
+              variant="light"
+              :label="formattedDuration"
+            />
             <SquareChip v-if="fileFormat" variant="light" :label="fileFormat" />
           </div>
         </template>
@@ -291,6 +295,14 @@ const showDurationChips = computed(
     (!isVideoPlaying.value || isCardOrOverlayHovered.value)
 )
 
+const showFileFormatChip = computed(
+  () =>
+    !loading &&
+    !!asset &&
+    !!fileFormat.value &&
+    (!isVideoPlaying.value || isCardOrOverlayHovered.value)
+)
+
 const showOutputCount = computed(
   () => false // Remove output count for simplified version
 )
diff --git a/src/platform/assets/components/MediaVideoBottom.vue b/src/platform/assets/components/MediaVideoBottom.vue
index 295c5bd6e..8cd354782 100644
--- a/src/platform/assets/components/MediaVideoBottom.vue
+++ b/src/platform/assets/components/MediaVideoBottom.vue
@@ -7,7 +7,7 @@
       {{ fileName }}
     </h3>
     <div class="flex items-center text-xs text-zinc-400">
-      <span>{{ asset.dimensions?.width }}x{{ asset.dimensions?.height }}</span>
+      <span>{{ formatSize(asset.size) }}</span>
     </div>
   </div>
 </template>
@@ -15,7 +15,7 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 
-import { getFilenameDetails } from '@/utils/formatUtil'
+import { formatSize, getFilenameDetails } from '@/utils/formatUtil'
 
 import type { AssetContext, AssetMeta } from '../schemas/mediaAssetSchema'
 
diff --git a/src/platform/assets/composables/useMediaAssets/useAssetsApi.ts b/src/platform/assets/composables/useMediaAssets/useAssetsApi.ts
index cc5c5d4e8..9e3036d03 100644
--- a/src/platform/assets/composables/useMediaAssets/useAssetsApi.ts
+++ b/src/platform/assets/composables/useMediaAssets/useAssetsApi.ts
@@ -5,6 +5,7 @@ import { assetService } from '@/platform/assets/services/assetService'
 import type { HistoryTaskItem } from '@/schemas/apiSchema'
 import { api } from '@/scripts/api'
 import { TaskItemImpl } from '@/stores/queueStore'
+import { truncateFilename } from '@/utils/formatUtil'
 
 import { mapTaskOutputToAssetItem } from './assetMappers'
 
@@ -31,7 +32,15 @@ export function useAssetsApi() {
       // For input directory, just return assets without history
       if (directory === 'input') {
         const assets = await assetService.getAssetsByTag(directory)
-        return assets
+        // Process assets to truncate long filenames for display
+        return assets.map((asset) => ({
+          ...asset,
+          name: truncateFilename(asset.name, 20),
+          user_metadata: {
+            ...asset.user_metadata,
+            originalFilename: asset.name.length > 20 ? asset.name : undefined
+          }
+        }))
       }
 
       // For output directory, fetch history data and convert to AssetItem format