From f305ce7a39faa5f0ee9185f5fd38109a596aa2b8 Mon Sep 17 00:00:00 2001
From: nobswebdev <nobswebdev@noreply.git.nobswebdev.com>
Date: Sun, 25 Oct 2026 22:00:15 +0100
Subject: [PATCH] Refactor metadata inspector with shared tab list and output
 panel.

Reuse InlineTabList for original/stripped tabs and a single pre block component to match patterns used elsewhere on the upload page.
---
 frontend/src/components/InlineTabList.vue     | 36 +++++++++++
 .../components/upload/MetadataInspector.vue   | 60 ++++---------------
 .../components/upload/MetadataOutputPanel.vue |  5 ++
 frontend/src/types/ui/InlineTabOption.ts      |  4 ++
 4 files changed, 58 insertions(+), 47 deletions(-)
 create mode 100644 frontend/src/components/InlineTabList.vue
 create mode 100644 frontend/src/components/upload/MetadataOutputPanel.vue
 create mode 100644 frontend/src/types/ui/InlineTabOption.ts

diff --git a/frontend/src/components/InlineTabList.vue b/frontend/src/components/InlineTabList.vue
new file mode 100644
index 0000000..25944fd
--- /dev/null
+++ b/frontend/src/components/InlineTabList.vue
@@ -0,0 +1,36 @@
+<template>
+    <div class="inline-flex w-fit rounded-md border border-border p-0.5">
+        <button
+            v-for="option in options"
+            :key="option.value"
+            type="button"
+            class="rounded px-3 py-1.5 text-xs font-medium transition-colors"
+            :class="
+                modelValue === option.value
+                    ? 'bg-muted text-foreground'
+                    : 'text-muted-foreground hover:text-foreground'
+            "
+            @click="select(option.value)"
+        >
+            {{ option.label }}
+        </button>
+    </div>
+</template>
+
+<script setup lang="ts" generic="T extends string">
+import { type PropType } from 'vue';
+import type { InlineTabOption } from '@/types/ui/InlineTabOption';
+
+const modelValue = defineModel<T>({ required: true });
+
+defineProps({
+    options: {
+        type: Array as PropType<InlineTabOption<T>[]>,
+        required: true
+    }
+});
+
+const select = (value: T): void => {
+    modelValue.value = value;
+};
+</script>
diff --git a/frontend/src/components/upload/MetadataInspector.vue b/frontend/src/components/upload/MetadataInspector.vue
index e66f9b5..8e6a862 100644
--- a/frontend/src/components/upload/MetadataInspector.vue
+++ b/frontend/src/components/upload/MetadataInspector.vue
@@ -1,5 +1,5 @@
 <template>
-    <section class="flex min-h-48 flex-col rounded-lg border border-border bg-card" aria-live="polite">
+    <section class="flex min-h-48 flex-col rounded-lg border border-border bg-card">
         <header class="border-b border-border px-4 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>
@@ -10,56 +10,16 @@
 
             <template v-else-if="entry.status === 'error'">
                 <p class="text-sm text-destructive">{{ entry.message }}</p>
-                <template v-if="entry.output">
-                    <p class="text-xs font-medium text-foreground">Original</p>
-                    <pre
-                        class="max-h-96 min-h-32 flex-1 overflow-auto rounded-md bg-muted p-3 text-xs leading-relaxed whitespace-pre-wrap text-foreground"
-                        >{{ entry.output }}</pre
-                    >
-                </template>
+                <p v-if="entry.output" class="text-xs font-medium text-foreground">Original</p>
+                <MetadataOutputPanel v-if="entry.output">{{ entry.output }}</MetadataOutputPanel>
             </template>
 
             <template v-else-if="entry.status === 'ready'">
-                <div
-                    class="inline-flex w-fit rounded-md border border-border p-0.5"
-                    role="tablist"
-                    aria-label="Metadata view"
-                >
-                    <button
-                        type="button"
-                        role="tab"
-                        class="rounded px-3 py-1.5 text-xs font-medium transition-colors"
-                        :class="
-                            activeTab === 'original'
-                                ? 'bg-muted text-foreground'
-                                : 'text-muted-foreground hover:text-foreground'
-                        "
-                        :aria-selected="activeTab === 'original'"
-                        @click="activeTab = 'original'"
-                    >
-                        Original
-                    </button>
-                    <button
-                        type="button"
-                        role="tab"
-                        class="rounded px-3 py-1.5 text-xs font-medium transition-colors"
-                        :class="
-                            activeTab === 'stripped'
-                                ? 'bg-muted text-foreground'
-                                : 'text-muted-foreground hover:text-foreground'
-                        "
-                        :aria-selected="activeTab === 'stripped'"
-                        @click="activeTab = 'stripped'"
-                    >
-                        Stripped
-                    </button>
-                </div>
+                <InlineTabList v-model="activeTab" :options="metadataTabOptions" />
 
-                <pre
-                    role="tabpanel"
-                    class="max-h-96 min-h-32 flex-1 overflow-auto rounded-md bg-muted p-3 text-xs leading-relaxed whitespace-pre-wrap text-foreground"
-                    >{{ activeTab === 'original' ? entry.output : entry.afterStripOutput }}</pre
-                >
+                <MetadataOutputPanel>
+                    {{ activeTab === 'original' ? entry.output : entry.afterStripOutput }}
+                </MetadataOutputPanel>
             </template>
 
             <p v-else class="text-sm text-muted-foreground">{{ entry.message }}</p>
@@ -71,6 +31,12 @@
 import { ref, watch, type PropType } from 'vue';
 import type { MetadataPreviewEntry } from '@/types/metadata/MetadataPreview';
 import type { MetadataTab } from '@/types/metadata/MetadataTab';
+import type { InlineTabOption } from '@/types/ui/InlineTabOption';
+
+const metadataTabOptions: InlineTabOption<MetadataTab>[] = [
+    { value: 'original', label: 'Original' },
+    { value: 'stripped', label: 'Stripped' }
+];
 
 const props = defineProps({
     fileName: {
diff --git a/frontend/src/components/upload/MetadataOutputPanel.vue b/frontend/src/components/upload/MetadataOutputPanel.vue
new file mode 100644
index 0000000..0485ddb
--- /dev/null
+++ b/frontend/src/components/upload/MetadataOutputPanel.vue
@@ -0,0 +1,5 @@
+<template>
+    <pre
+        class="max-h-96 min-h-32 flex-1 overflow-auto rounded-md bg-muted p-3 text-xs leading-relaxed whitespace-pre-wrap text-foreground"
+    ><slot /></pre>
+</template>
diff --git a/frontend/src/types/ui/InlineTabOption.ts b/frontend/src/types/ui/InlineTabOption.ts
new file mode 100644
index 0000000..866fbab
--- /dev/null
+++ b/frontend/src/types/ui/InlineTabOption.ts
@@ -0,0 +1,4 @@
+export type InlineTabOption<T extends string = string> = {
+    value: T;
+    label: string;
+};