[refactor] Move ActiveJobCard to platform/assets and add ActiveMediaAssetCard story (#8242)

src/components/sidebar/tabs/AssetsSidebarGridView.vue

@@ -6,7 +6,11 @@
       class="grid max-h-[50%] scrollbar-custom overflow-y-auto"
       :style="gridStyle"
     >
-      <ActiveJobCard v-for="job in activeJobItems" :key="job.id" :job="job" />
+      <ActiveMediaAssetCard
+        v-for="job in activeJobItems"
+        :key="job.id"
+        :job="job"
+      />
     </div>
 
     <!-- Assets Header -->
@@ -55,7 +59,7 @@ import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import VirtualGrid from '@/components/common/VirtualGrid.vue'
-import ActiveJobCard from '@/components/sidebar/tabs/assets/ActiveJobCard.vue'
+import ActiveMediaAssetCard from '@/platform/assets/components/ActiveMediaAssetCard.vue'
 import { useJobList } from '@/composables/queue/useJobList'
 import MediaAssetCard from '@/platform/assets/components/MediaAssetCard.vue'
 import type { AssetItem } from '@/platform/assets/schemas/assetSchema'

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

@@ -0,0 +1,143 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+
+import type { JobListItem } from '@/composables/queue/useJobList'
+
+import ActiveMediaAssetCard from './ActiveMediaAssetCard.vue'
+
+const meta: Meta<typeof ActiveMediaAssetCard> = {
+  title: 'Platform/Assets/ActiveMediaAssetCard',
+  component: ActiveMediaAssetCard
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const SAMPLE_PREVIEW =
+  'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/images/BigBuckBunny.jpg'
+
+function createJob(overrides: Partial<JobListItem> = {}): JobListItem {
+  return {
+    id: 'job-1',
+    title: 'Running...',
+    meta: 'Step 5/10',
+    state: 'running',
+    progressTotalPercent: 50,
+    progressCurrentPercent: 75,
+    ...overrides
+  }
+}
+
+export const Running: Story = {
+  decorators: [
+    () => ({
+      template: '<div style="max-width: 220px;"><story /></div>'
+    })
+  ],
+  args: {
+    job: createJob({
+      state: 'running',
+      progressTotalPercent: 65,
+      iconImageUrl: SAMPLE_PREVIEW
+    })
+  }
+}
+
+export const RunningWithoutPreview: Story = {
+  decorators: [
+    () => ({
+      template: '<div style="max-width: 220px;"><story /></div>'
+    })
+  ],
+  args: {
+    job: createJob({
+      state: 'running',
+      progressTotalPercent: 30
+    })
+  }
+}
+
+export const Pending: Story = {
+  decorators: [
+    () => ({
+      template: '<div style="max-width: 220px;"><story /></div>'
+    })
+  ],
+  args: {
+    job: createJob({
+      state: 'pending',
+      title: 'In queue...',
+      progressTotalPercent: undefined
+    })
+  }
+}
+
+export const Initialization: Story = {
+  decorators: [
+    () => ({
+      template: '<div style="max-width: 220px;"><story /></div>'
+    })
+  ],
+  args: {
+    job: createJob({
+      state: 'initialization',
+      title: 'Initializing...',
+      progressTotalPercent: undefined
+    })
+  }
+}
+
+export const Failed: Story = {
+  decorators: [
+    () => ({
+      template: '<div style="max-width: 220px;"><story /></div>'
+    })
+  ],
+  args: {
+    job: createJob({
+      state: 'failed',
+      title: 'Failed'
+    })
+  }
+}
+
+export const GridLayout: Story = {
+  render: () => ({
+    components: { ActiveMediaAssetCard },
+    setup() {
+      const jobs: JobListItem[] = [
+        createJob({
+          id: 'job-1',
+          state: 'running',
+          progressTotalPercent: 75,
+          iconImageUrl: SAMPLE_PREVIEW
+        }),
+        createJob({
+          id: 'job-2',
+          state: 'running',
+          progressTotalPercent: 45
+        }),
+        createJob({
+          id: 'job-3',
+          state: 'pending',
+          title: 'In queue...',
+          progressTotalPercent: undefined
+        }),
+        createJob({
+          id: 'job-4',
+          state: 'failed',
+          title: 'Failed'
+        })
+      ]
+      return { jobs }
+    },
+    template: `
+      <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; padding: 8px;">
+        <ActiveMediaAssetCard
+          v-for="job in jobs"
+          :key="job.id"
+          :job="job"
+        />
+      </div>
+    `
+  })
+}

src/platform/assets/components/ActiveMediaAssetCard.test.ts

@@ -2,7 +2,7 @@ import { mount } from '@vue/test-utils'
 import { describe, expect, it, vi } from 'vitest'
 import { createI18n } from 'vue-i18n'
 
-import ActiveJobCard from './ActiveJobCard.vue'
+import ActiveJobCard from './ActiveMediaAssetCard.vue'
 
 import type { JobListItem } from '@/composables/queue/useJobList'