[QPOv2] Add list view to assets sidepanel (#7737)

This adds the list view to the media assets sidepanel, while also adding
the active jobs to be displayed right now.

The design for this is actually changing, which is why it is in draft
right now. There are technical limitations of the virtual grid that
doesn't make it easy for both the active jobs and generated assets to
exist on the same container. Currently WIP right now.


Part of the QPO v2 iteration, figma design can be found
[here](https://www.figma.com/design/LVilZgHGk5RwWOkVN6yCEK/Queue-Progress-Modal?node-id=3330-37286&m=dev).
This will be implemented in a series of stacked PRs that can be reviewed
and merged individually.

main <-- #7737, #7743, #7745

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7737-QPOv2-Add-list-view-to-assets-sidepanel-2d26d73d365081858e22c48902bd56e2)
by [Unito](https://www.unito.io)

---------

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

src/platform/assets/components/AssetsListItem.vue

@@ -0,0 +1,116 @@
+<template>
+  <div
+    class="relative flex items-center gap-2 overflow-hidden rounded-lg p-2 select-none"
+  >
+    <div
+      v-if="hasAnyProgressPercent(progressTotalPercent, progressCurrentPercent)"
+      :class="progressBarContainerClass"
+    >
+      <div
+        v-if="hasProgressPercent(progressTotalPercent)"
+        :class="progressBarPrimaryClass"
+        :style="progressPercentStyle(progressTotalPercent)"
+      />
+      <div
+        v-if="hasProgressPercent(progressCurrentPercent)"
+        :class="progressBarSecondaryClass"
+        :style="progressPercentStyle(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"
+    >
+      <slot
+        name="icon"
+        :preview-url="previewUrl"
+        :preview-alt="previewAlt"
+        :icon-name="iconName"
+        :icon-class="iconClass"
+        :icon-aria-label="iconAriaLabel"
+      >
+        <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>
+      </slot>
+    </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 { useProgressBarBackground } from '@/composables/useProgressBarBackground'
+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
+}>()
+
+const {
+  progressBarContainerClass,
+  progressBarPrimaryClass,
+  progressBarSecondaryClass,
+  hasProgressPercent,
+  hasAnyProgressPercent,
+  progressPercentStyle
+} = useProgressBarBackground()
+</script>