add preview thumbnail to metadata inspector and share links.

Reuse queue object URLs in UploadPanelHeader for the selected row.
2026-10-30 18:54:56 +01:00
parent 1298e05010
commit 946cf21110
5 changed files with 77 additions and 10 deletions
@@ -0,0 +1,41 @@
+<template>
+    <header class="border-b border-border px-3 py-2.5 sm:px-4 sm:py-3">
+        <div class="flex items-start gap-3 sm:items-center">
+            <img
+                v-if="thumbnailUrl"
+                :src="thumbnailUrl"
+                class="h-10 w-10 shrink-0 rounded border border-border object-cover"
+                loading="lazy"
+                decoding="async"
+            />
+            <span
+                v-else-if="fileName"
+                class="h-10 w-10 shrink-0 rounded border border-border bg-muted/60"
+                aria-hidden="true"
+            />
+            <div class="min-w-0 flex-1">
+                <h2 class="text-sm font-medium text-card-foreground">{{ title }}</h2>
+                <p v-if="fileName" class="mt-0.5 truncate text-xs text-muted-foreground">{{ fileName }}</p>
+            </div>
+        </div>
+    </header>
+</template>
+
+<script setup lang="ts">
+import { type PropType } from 'vue';
+
+defineProps({
+    title: {
+        type: String,
+        required: true
+    },
+    fileName: {
+        type: String as PropType<string | null>,
+        default: null
+    },
+    thumbnailUrl: {
+        type: String as PropType<string | null>,
+        default: null
+    }
+});
+</script>