From 946cf2111039bb0de2ad40b634b5ce098fde9c5d Mon Sep 17 00:00:00 2001
From: nobswebdev <nobswebdev@noreply.git.nobswebdev.com>
Date: Fri, 30 Oct 2026 18:54:56 +0100
Subject: [PATCH] add preview thumbnail to metadata inspector and share links.

Reuse queue object URLs in UploadPanelHeader for the selected row.
---
 frontend/src/components.d.ts                  |  1 +
 .../components/upload/MetadataInspector.vue   | 13 ++++--
 .../components/upload/UploadPanelHeader.vue   | 41 +++++++++++++++++++
 .../components/upload/UploadShareResults.vue  |  9 ++--
 frontend/src/views/UploadView.vue             | 23 ++++++++++-
 5 files changed, 77 insertions(+), 10 deletions(-)
 create mode 100644 frontend/src/components/upload/UploadPanelHeader.vue

diff --git a/frontend/src/components.d.ts b/frontend/src/components.d.ts
index dc7426c..3893ad8 100644
--- a/frontend/src/components.d.ts
+++ b/frontend/src/components.d.ts
@@ -24,6 +24,7 @@ declare module 'vue' {
     ShareLinkField: typeof import('./components/upload/ShareLinkField.vue')['default']
     UploadConfigureModal: typeof import('./components/upload/UploadConfigureModal.vue')['default']
     UploadIntakeControls: typeof import('./components/upload/UploadIntakeControls.vue')['default']
+    UploadPanelHeader: typeof import('./components/upload/UploadPanelHeader.vue')['default']
     UploadQueueList: typeof import('./components/upload/UploadQueueList.vue')['default']
     UploadSettingsPanel: typeof import('./components/upload/UploadSettingsPanel.vue')['default']
     UploadShareResults: typeof import('./components/upload/UploadShareResults.vue')['default']
diff --git a/frontend/src/components/upload/MetadataInspector.vue b/frontend/src/components/upload/MetadataInspector.vue
index 194f190..7cf160e 100644
--- a/frontend/src/components/upload/MetadataInspector.vue
+++ b/frontend/src/components/upload/MetadataInspector.vue
@@ -1,9 +1,10 @@
 <template>
     <section class="flex min-h-48 flex-col rounded-lg border border-border bg-card">
-        <header class="border-b border-border px-3 py-2.5 sm:px-4 sm:py-3">
-            <h2 class="text-sm font-medium text-card-foreground">Metadata Inspector</h2>
-            <p v-if="fileName" class="mt-0.5 truncate text-xs text-muted-foreground">{{ fileName }}</p>
-        </header>
+        <UploadPanelHeader
+            title="Metadata Inspector"
+            :file-name="fileName"
+            :thumbnail-url="thumbnailUrl"
+        />
 
         <div class="flex flex-1 flex-col gap-3 p-4">
             <p v-if="!fileName" class="text-sm text-muted-foreground">Select an image to view its metadata.</p>
@@ -45,6 +46,10 @@ const props = defineProps({
     entry: {
         type: Object as PropType<MetadataPreviewEntry>,
         required: true
+    },
+    thumbnailUrl: {
+        type: String as PropType<string | null>,
+        default: null
     }
 });
 
diff --git a/frontend/src/components/upload/UploadPanelHeader.vue b/frontend/src/components/upload/UploadPanelHeader.vue
new file mode 100644
index 0000000..aa424e3
--- /dev/null
+++ b/frontend/src/components/upload/UploadPanelHeader.vue
@@ -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>
diff --git a/frontend/src/components/upload/UploadShareResults.vue b/frontend/src/components/upload/UploadShareResults.vue
index 1c8b288..eba27b4 100644
--- a/frontend/src/components/upload/UploadShareResults.vue
+++ b/frontend/src/components/upload/UploadShareResults.vue
@@ -1,9 +1,6 @@
 <template>
     <section class="flex min-h-48 flex-col rounded-lg border border-border bg-card">
-        <header class="border-b border-border px-3 py-2.5 sm:px-4 sm:py-3">
-            <h2 class="text-sm font-medium text-card-foreground">Share links</h2>
-            <p v-if="fileName" class="mt-0.5 truncate text-xs text-muted-foreground">{{ fileName }}</p>
-        </header>
+        <UploadPanelHeader title="Share links" :file-name="fileName" :thumbnail-url="thumbnailUrl" />
 
         <div class="flex flex-1 flex-col gap-3 p-4">
             <p v-if="!fileName" class="text-sm text-muted-foreground">Select an image to view share links.</p>
@@ -60,6 +57,10 @@ const props = defineProps({
     upload: {
         type: Object as PropType<UploadQueueEntry>,
         required: true
+    },
+    thumbnailUrl: {
+        type: String as PropType<string | null>,
+        default: null
     }
 });
 
diff --git a/frontend/src/views/UploadView.vue b/frontend/src/views/UploadView.vue
index d654314..d497c80 100644
--- a/frontend/src/views/UploadView.vue
+++ b/frontend/src/views/UploadView.vue
@@ -21,9 +21,18 @@
 
         <UploadQueueList :rows="queueRows" :selected-file="selectedFile" @select="selectedFile = $event" />
 
-        <UploadShareResults v-if="showShareLinks" :file-name="selectedFile?.name ?? null" :upload="selectedUpload" />
+        <UploadShareResults
+            v-if="showShareLinks"
+            :file-name="selectedFile?.name ?? null"
+            :upload="selectedUpload"
+            :thumbnail-url="selectedThumbnailUrl"
+        />
 
-        <MetadataInspector :file-name="selectedFile?.name ?? null" :entry="selectedPreview" />
+        <MetadataInspector
+            :file-name="selectedFile?.name ?? null"
+            :entry="selectedPreview"
+            :thumbnail-url="selectedThumbnailUrl"
+        />
     </main>
 </template>
 
@@ -101,6 +110,16 @@ const queueRows = computed(() =>
 
 const selectedPreview = computed(() => metadataStore.getPreview(selectedFile.value));
 
+const selectedThumbnailUrl = computed((): string | null => {
+    if (!selectedFile.value) {
+        return null;
+    }
+
+    const key = makeKeyFromFile(selectedFile.value);
+
+    return thumbnailUrlsByKey.value[key] ?? null;
+});
+
 const selectedUpload = computed(() => uploadStore.getUpload(selectedFile.value));
 
 const metadataErrorCount = computed(