nobswebdev
b4cc26a632
Metadata error confirm, success styling, upload-confirmed hiding of configure, and remove stale PR plan doc.
95 lines
3.7 KiB
Vue
95 lines
3.7 KiB
Vue
<template>
|
|
<section class="flex min-h-48 flex-col rounded-lg border border-border bg-card" aria-live="polite">
|
|
<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>
|
|
</header>
|
|
|
|
<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>
|
|
|
|
<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>
|
|
</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>
|
|
|
|
<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
|
|
>
|
|
</template>
|
|
|
|
<p v-else class="text-sm text-muted-foreground">{{ entry.message }}</p>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, watch, type PropType } from 'vue';
|
|
import type { MetadataPreviewEntry } from '@/types/metadata/MetadataPreview';
|
|
import type { MetadataTab } from '@/types/metadata/MetadataTab';
|
|
|
|
const props = defineProps({
|
|
fileName: {
|
|
type: String as PropType<string | null>,
|
|
default: null
|
|
},
|
|
entry: {
|
|
type: Object as PropType<MetadataPreviewEntry>,
|
|
required: true
|
|
}
|
|
});
|
|
|
|
const activeTab = ref<MetadataTab>('original');
|
|
|
|
watch(
|
|
() => props.fileName,
|
|
() => {
|
|
activeTab.value = 'original';
|
|
}
|
|
);
|
|
</script>
|