From aea78da01d57430b7ad13ca2a3847577a9ebed1a Mon Sep 17 00:00:00 2001
From: Benjamin Lu <benjaminlu1107@gmail.com>
Date: Fri, 23 Jan 2026 13:01:55 -0800
Subject: [PATCH] Add stacked button to list view

---
 .../sidebar/tabs/AssetsSidebarListView.vue    | 15 +++++++++++++
 .../assets/components/AssetsListItem.vue      | 21 +++++++++++++++++++
 2 files changed, 36 insertions(+)

diff --git a/src/components/sidebar/tabs/AssetsSidebarListView.vue b/src/components/sidebar/tabs/AssetsSidebarListView.vue
index b39d982a5..91222adc7 100644
--- a/src/components/sidebar/tabs/AssetsSidebarListView.vue
+++ b/src/components/sidebar/tabs/AssetsSidebarListView.vue
@@ -80,6 +80,8 @@
           "
           :primary-text="getAssetPrimaryText(item.asset)"
           :secondary-text="getAssetSecondaryText(item.asset)"
+          :stack-count="getStackCount(item.asset)"
+          :stack-indicator-label="t('mediaAsset.actions.seeMoreOutputs')"
           @mouseenter="onAssetEnter(item.asset.id)"
           @mouseleave="onAssetLeave(item.asset.id)"
           @contextmenu.prevent.stop="emit('context-menu', $event, item.asset)"
@@ -194,6 +196,19 @@ function getAssetSecondaryText(asset: AssetItem): string {
   return ''
 }
 
+function getStackCount(asset: AssetItem): number | undefined {
+  const metadata = getOutputAssetMetadata(asset.user_metadata)
+  if (typeof metadata?.outputCount === 'number') {
+    return metadata.outputCount
+  }
+
+  if (Array.isArray(metadata?.allOutputs)) {
+    return metadata.allOutputs.length
+  }
+
+  return undefined
+}
+
 function getAssetCardClass(selected: boolean): string {
   return cn(
     'w-full text-text-primary transition-colors hover:bg-secondary-background-hover',
diff --git a/src/platform/assets/components/AssetsListItem.vue b/src/platform/assets/components/AssetsListItem.vue
index 3f04d372f..dd8f1c57f 100644
--- a/src/platform/assets/components/AssetsListItem.vue
+++ b/src/platform/assets/components/AssetsListItem.vue
@@ -71,6 +71,22 @@
       </div>
     </div>
 
+    <div
+      v-if="typeof stackCount === 'number' && stackCount > 1"
+      class="relative z-1 flex shrink-0 items-center"
+    >
+      <Button
+        variant="secondary"
+        size="md"
+        class="gap-1 font-bold"
+        :aria-label="stackIndicatorLabel || undefined"
+      >
+        <i aria-hidden="true" class="icon-[lucide--layers] size-4" />
+        <span class="text-xs leading-none">{{ stackCount }}</span>
+        <i aria-hidden="true" class="icon-[lucide--chevron-down] size-3" />
+      </Button>
+    </div>
+
     <div v-if="$slots.actions" class="relative z-1 flex items-center gap-2">
       <slot name="actions" />
     </div>
@@ -79,6 +95,7 @@
 
 <script setup lang="ts">
 import { useProgressBarBackground } from '@/composables/useProgressBarBackground'
+import Button from '@/components/ui/button/Button.vue'
 import { cn } from '@/utils/tailwindUtil'
 
 const {
@@ -90,6 +107,8 @@ const {
   iconWrapperClass,
   primaryText,
   secondaryText,
+  stackCount,
+  stackIndicatorLabel,
   progressTotalPercent,
   progressCurrentPercent
 } = defineProps<{
@@ -101,6 +120,8 @@ const {
   iconWrapperClass?: string
   primaryText?: string
   secondaryText?: string
+  stackCount?: number
+  stackIndicatorLabel?: string
   progressTotalPercent?: number
   progressCurrentPercent?: number
 }>()