From 5b1456896bb922a988ceb6dac9075a98a58e9111 Mon Sep 17 00:00:00 2001
From: Benjamin Lu <benjaminlu1107@gmail.com>
Date: Mon, 22 Dec 2025 14:37:25 -0800
Subject: [PATCH] Add AssetsListCard base template

---
 .../assets/components/AssetsListCard.vue      | 102 ++++++++++++++++++
 1 file changed, 102 insertions(+)
 create mode 100644 src/platform/assets/components/AssetsListCard.vue

diff --git a/src/platform/assets/components/AssetsListCard.vue b/src/platform/assets/components/AssetsListCard.vue
new file mode 100644
index 0000000000..66537ac6d4
--- /dev/null
+++ b/src/platform/assets/components/AssetsListCard.vue
@@ -0,0 +1,102 @@
+<template>
+  <div class="relative flex items-center gap-2 overflow-hidden rounded-lg p-2">
+    <div
+      v-if="
+        progressTotalPercent !== undefined ||
+        progressCurrentPercent !== undefined
+      "
+      class="absolute inset-0"
+    >
+      <div
+        v-if="progressTotalPercent !== undefined"
+        class="pointer-events-none absolute inset-y-0 left-0 h-full bg-interface-panel-job-progress-primary transition-[width]"
+        :style="{ width: `${clampPercent(progressTotalPercent)}%` }"
+      />
+      <div
+        v-if="progressCurrentPercent !== undefined"
+        class="pointer-events-none absolute inset-y-0 left-0 h-full bg-interface-panel-job-progress-secondary transition-[width]"
+        :style="{ width: `${clampPercent(progressCurrentPercent)}%` }"
+      />
+    </div>
+
+    <div
+      :class="
+        cn(
+          'relative z-1 flex size-8 shrink-0 items-center justify-center overflow-hidden rounded-sm bg-secondary-background',
+          iconWrapperClass
+        )
+      "
+      :aria-label="iconAriaLabel || undefined"
+    >
+      <img
+        v-if="previewUrl"
+        :src="previewUrl"
+        :alt="previewAlt"
+        class="size-full object-cover"
+      />
+      <div v-else class="flex size-full items-center justify-center">
+        <i
+          aria-hidden="true"
+          :class="
+            cn(
+              iconName ?? 'icon-[lucide--image]',
+              'size-4 text-text-secondary',
+              iconClass
+            )
+          "
+        />
+      </div>
+    </div>
+
+    <div class="relative z-1 flex min-w-0 flex-1 flex-col gap-1">
+      <div
+        v-if="$slots.primary || primaryText"
+        class="text-xs leading-none text-text-primary"
+      >
+        <slot name="primary">{{ primaryText }}</slot>
+      </div>
+      <div
+        v-if="$slots.secondary || secondaryText"
+        class="text-xs leading-none text-text-secondary"
+      >
+        <slot name="secondary">{{ secondaryText }}</slot>
+      </div>
+    </div>
+
+    <div v-if="$slots.actions" class="relative z-1 flex items-center gap-2">
+      <slot name="actions" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { cn } from '@/utils/tailwindUtil'
+
+const {
+  previewUrl,
+  previewAlt = '',
+  iconName,
+  iconAriaLabel,
+  iconClass,
+  iconWrapperClass,
+  primaryText,
+  secondaryText,
+  progressTotalPercent,
+  progressCurrentPercent
+} = defineProps<{
+  previewUrl?: string
+  previewAlt?: string
+  iconName?: string
+  iconAriaLabel?: string
+  iconClass?: string
+  iconWrapperClass?: string
+  primaryText?: string
+  secondaryText?: string
+  progressTotalPercent?: number
+  progressCurrentPercent?: number
+}>()
+
+function clampPercent(value: number) {
+  return Math.min(100, Math.max(0, value))
+}
+</script>