includio-cms 0.1.4 → 0.5.0

package/dist/admin/components/media/file/file-details.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
 	import { useInterfaceLanguage } from '../../../state/interface-language.svelte.js';
 	import Button from '../../../../components/ui/button/button.svelte';
-	import Label from '../../../../components/ui/label/label.svelte';
 	import { getRemotes } from '../../../../sveltekit/index.js';
 	import type { InterfaceLanguage } from '../../../../types/languages.js';
 	import type { MediaFile, MediaTag } from '../../../../types/media.js';
@@ -10,38 +9,47 @@
 	import TagCombobox from '../tag-combobox.svelte';
 	import FileMiniature from './file-miniature.svelte';
 	import MediaSelector from '../media-selector.svelte';
-	import * as InputGroup from '../../../../components/ui/input-group/index.js';
 	import * as Dialog from '../../../../components/ui/dialog/index.js';
+	import * as AlertDialog from '../../../../components/ui/alert-dialog/index.js';
 	import Check from '@tabler/icons-svelte/icons/check';
 	import Copy from '@tabler/icons-svelte/icons/copy';
-	import Upload from '@tabler/icons-svelte/icons/upload';
 	import Replace from '@tabler/icons-svelte/icons/replace';
 	import CircleCheck from '@tabler/icons-svelte/icons/circle-check';
 	import AlertTriangle from '@tabler/icons-svelte/icons/alert-triangle';
+	import Music from '@tabler/icons-svelte/icons/music';
+	import Upload from '@tabler/icons-svelte/icons/upload';
+	import Trash from '@tabler/icons-svelte/icons/trash';
+	import VideoOff from '@tabler/icons-svelte/icons/video-off';
+	import Download from '@tabler/icons-svelte/icons/download';
 	import { UseClipboard } from '../../../../components/hooks/use-clipboard.svelte.js';
 	import { page } from '$app/state';
 	import FileNameInput from './file-name-input.svelte';
 
 	let lightboxOpen = $state(false);
+	let deleteDialogOpen = $state(false);
+	let videoError = $state(false);
+
+	$effect(() => {
+		file.url;
+		videoError = false;
+	});
 
 	const lang: Record<
 		InterfaceLanguage,
 		{
-			fileDeletedToast: string;
-			allTabs: string;
 			fileDeleteLabel: string;
+			deleteConfirmTitle: string;
+			deleteConfirmDesc: string;
+			deleteCancel: string;
 			fileNameLabel: string;
 			fileUrlLabel: string;
 			fileAltLabel: string;
-			currentFilePlaceholder: string;
+			fileAltHint: string;
 			createdAtLabel: string;
 			mimeTypeLabel: string;
 			sizeLabel: string;
 			dimensionsLabel: string;
-			selectedInfo: string;
-			selectionResetLabel: string;
 			durationLabel: string;
-			minutes: string;
 			transcriptLabel: string;
 			audioDescriptionLabel: string;
 			posterLabel: string;
@@ -51,25 +59,28 @@
 			changePoster: string;
 			removeFile: string;
 			replaceFileLabel: string;
+			tagsLabel: string;
+			metadataLabel: string;
+			focalPointLabel: string;
+			videoUnsupported: string;
+			downloadFile: string;
 		}
 	> = {
 		pl: {
-			fileDeleteLabel: 'Usuń plik',
+			fileDeleteLabel: 'Usuń',
+			deleteConfirmTitle: 'Usunąć plik?',
+			deleteConfirmDesc: 'Plik zostanie trwale usunięty.',
+			deleteCancel: 'Anuluj',
 			replaceFileLabel: 'Zamień plik',
-			fileNameLabel: 'Nazwa',
+			fileNameLabel: 'Nazwa pliku',
 			fileUrlLabel: 'URL',
 			fileAltLabel: 'Tekst alternatywny',
-			fileDeletedToast: 'Plik został usunięty',
-			allTabs: 'Wszystkie',
-			currentFilePlaceholder: 'Wybierz plik, aby zobaczyć szczegóły',
-			createdAtLabel: 'Utworzono:',
-			selectedInfo: 'Wybrane pliki:',
-			selectionResetLabel: 'Resetuj wybór',
-			mimeTypeLabel: 'Typ MIME:',
-			sizeLabel: 'Rozmiar:',
-			dimensionsLabel: 'Wymiary:',
-			durationLabel: 'Czas trwania:',
-			minutes: 'minuty',
+			fileAltHint: 'Dodaj opis, żeby każdy mógł zrozumieć treść obrazu',
+			createdAtLabel: 'Utworzono',
+			mimeTypeLabel: 'Typ',
+			sizeLabel: 'Rozmiar',
+			dimensionsLabel: 'Wymiary',
+			durationLabel: 'Czas',
 			transcriptLabel: 'Transkrypcja',
 			audioDescriptionLabel: 'Audiodeskrypcja',
 			posterLabel: 'Poster',
@@ -77,24 +88,27 @@
 			uploadTranscript: 'Dodaj transkrypcję',
 			uploadAudioDescription: 'Dodaj audiodeskrypcję',
 			changePoster: 'Zmień poster',
-			removeFile: 'Usuń'
+			removeFile: 'Usuń',
+			tagsLabel: 'Tagi',
+			metadataLabel: 'Metadane',
+			focalPointLabel: 'Punkt ogniskowy',
+			videoUnsupported: 'Ten format wideo nie jest obsługiwany w przeglądarce',
+			downloadFile: 'Pobierz'
 		},
 		en: {
-			fileDeleteLabel: 'Delete file',
-			fileNameLabel: 'Name',
+			fileDeleteLabel: 'Delete',
+			deleteConfirmTitle: 'Delete file?',
+			deleteConfirmDesc: 'The file will be permanently deleted.',
+			deleteCancel: 'Cancel',
+			fileNameLabel: 'File name',
 			fileUrlLabel: 'URL',
 			fileAltLabel: 'Alt text',
-			fileDeletedToast: 'File has been deleted',
-			allTabs: 'All',
-			currentFilePlaceholder: 'Select a file to see details',
-			createdAtLabel: 'Created at:',
-			selectedInfo: 'Selected files:',
-			selectionResetLabel: 'Reset selection',
-			mimeTypeLabel: 'MIME type:',
-			sizeLabel: 'Size:',
-			dimensionsLabel: 'Dimensions:',
-			durationLabel: 'Duration:',
-			minutes: 'minutes',
+			fileAltHint: 'Add a description so everyone can understand the image',
+			createdAtLabel: 'Created',
+			mimeTypeLabel: 'Type',
+			sizeLabel: 'Size',
+			dimensionsLabel: 'Dimensions',
+			durationLabel: 'Duration',
 			transcriptLabel: 'Transcript',
 			audioDescriptionLabel: 'Audio description',
 			posterLabel: 'Poster',
@@ -103,7 +117,12 @@
 			uploadAudioDescription: 'Add audio description',
 			changePoster: 'Change poster',
 			removeFile: 'Remove',
-			replaceFileLabel: 'Replace file'
+			replaceFileLabel: 'Replace file',
+			tagsLabel: 'Tags',
+			metadataLabel: 'Metadata',
+			focalPointLabel: 'Focal point',
+			videoUnsupported: 'This video format is not supported in the browser',
+			downloadFile: 'Download'
 		}
 	};
 
@@ -126,9 +145,7 @@
 		onDelete: () => void;
 		onReplace: (updated: MediaFile) => void;
 		onNameUpdate: (newName: string) => Promise<
-			| {
-					success: true;
-			  }
+			| { success: true }
 			| { success: false; error: 'name-already-exists' }
 		>;
 		onTagUpdate: (tagIds: string[]) => void;
@@ -163,7 +180,6 @@
 
 	let fileUrl = $derived(file.url.startsWith('/') ? page.url.origin + file.url : file.url);
 
-	// Accessibility state for video files
 	let transcriptDialogOpen = $state(false);
 	let audioDescDialogOpen = $state(false);
 	let posterDialogOpen = $state(false);
@@ -172,7 +188,7 @@
 	let posterSelected = $state<string>('');
 
 	$effect(() => {
-		if (transcriptSelected && file.type === 'video') {
+		if (transcriptSelected && (file.type === 'video' || file.type === 'audio')) {
 			remotes.updateMediaAccessibility({
 				fileId: file.id,
 				transcriptFileId: transcriptSelected
@@ -184,7 +200,7 @@
 	});
 
 	$effect(() => {
-		if (audioDescSelected && file.type === 'video') {
+		if (audioDescSelected && (file.type === 'video' || file.type === 'audio')) {
 			remotes.updateMediaAccessibility({
 				fileId: file.id,
 				audioDescriptionFileId: audioDescSelected
@@ -212,192 +228,270 @@
 	});
 </script>
 
-<!-- Header z przyciskami -->
-<div class="flex items-center justify-end gap-2 border-b border-white/10 px-4 py-3">
-	<input type="file" class="hidden" bind:this={replaceInputEl} onchange={handleReplace} />
-	<Button type="button" size="sm" variant="outline" disabled={replacing} onclick={() => replaceInputEl.click()}>
-		<Replace class="h-3.5 w-3.5 mr-1" />
-		{lang[interfaceLanguage.current].replaceFileLabel}
-	</Button>
-	<Button type="button" size="sm" variant="destructive" onclick={onDelete}>
-		{lang[interfaceLanguage.current].fileDeleteLabel}
-	</Button>
-</div>
-
-<!-- Główna zawartość -->
-<div class="space-y-5 p-5">
-	<!-- Preview -->
-	<div>
-		{#if file.type === 'video'}
-			<div class="w-full overflow-hidden rounded-xl shadow-md">
-				<video controls poster={file.posterUrl || file.thumbnailUrl || undefined} class="w-full max-h-48 object-contain bg-black rounded-xl">
-					<source src={file.url} type={file.mimeType || undefined} />
-				</video>
-			</div>
-		{:else}
+<div class="flex h-full flex-col overflow-hidden">
+	<!-- Scrollable content -->
+	<div class="flex-1 overflow-y-auto p-5 scrollbar-thin space-y-4">
+		<!-- Header: title + action buttons -->
+		<div class="flex items-center gap-2 flex-wrap">
+			<h2 class="flex-1 min-w-0 truncate text-base font-bold text-foreground">{file.name}</h2>
+			<input type="file" class="hidden" bind:this={replaceInputEl} onchange={handleReplace} />
 			<button
 				type="button"
-				class="aspect-square w-28 shrink-0 overflow-hidden rounded-xl shadow-md cursor-zoom-in hover:ring-2 hover:ring-primary/50 transition-all"
-				onclick={() => file.type === 'image' && (lightboxOpen = true)}
+				class="inline-flex items-center gap-1 rounded-md border border-border px-2.5 py-1 text-xs font-medium text-muted-foreground transition-colors hover:bg-lavender-lighter hover:border-lavender hover:text-primary"
+				disabled={replacing}
+				onclick={() => replaceInputEl.click()}
 			>
-				<FileMiniature {file} />
+				<Replace class="h-3.5 w-3.5" />
+				{lang[interfaceLanguage.current].replaceFileLabel}
 			</button>
-		{/if}
-	</div>
+			<button
+				type="button"
+				class="inline-flex items-center gap-1 rounded-md border border-destructive/30 px-2.5 py-1 text-xs font-medium text-destructive transition-colors hover:bg-error-bg hover:border-destructive/50"
+				onclick={() => (deleteDialogOpen = true)}
+			>
+				<Trash class="h-3.5 w-3.5" />
+				{lang[interfaceLanguage.current].fileDeleteLabel}
+			</button>
+		</div>
 
-	<!-- Tags -->
-	<TagCombobox
-		tags={allTags}
-		selectedTagIds={file.tags.map((t) => t.id)}
-		onchange={onTagUpdate}
-	/>
-
-	<!-- Nazwa pliku -->
-	<FileNameInput name={file.name} onUpdate={onNameUpdate} />
-
-	<!-- URL -->
-	<div class="space-y-1.5">
-		<Label class="text-xs">{lang[interfaceLanguage.current].fileUrlLabel}</Label>
-		<InputGroup.Root>
-			<InputGroup.Input placeholder={fileUrl} readonly class="text-xs" />
-			<InputGroup.Addon align="inline-end">
-				<InputGroup.Button
-					aria-label="Copy"
-					title="Copy"
-					size="icon-xs"
-					onclick={() => clipboard.copy(fileUrl)}
+		<!-- Preview -->
+		<div>
+			{#if file.type === 'video'}
+				{#if videoError}
+					<div class="w-full aspect-video flex flex-col items-center justify-center gap-3 rounded-lg bg-muted">
+						<VideoOff class="h-12 w-12 text-text-light" />
+						<p class="text-sm text-muted-foreground text-center px-4">{lang[interfaceLanguage.current].videoUnsupported}</p>
+						<a
+							href={file.url}
+							download
+							class="inline-flex items-center gap-1.5 rounded-md bg-primary px-3 py-1.5 text-xs font-medium text-primary-foreground transition-colors hover:bg-primary/90"
+						>
+							<Download class="h-3.5 w-3.5" />
+							{lang[interfaceLanguage.current].downloadFile}
+						</a>
+					</div>
+				{:else}
+					<div class="w-full overflow-hidden rounded-lg shadow-sm">
+						<video
+							controls
+							poster={file.posterUrl || file.thumbnailUrl || undefined}
+							class="w-full aspect-video object-contain bg-black rounded-lg"
+							onerror={() => (videoError = true)}
+						>
+							<source src={file.url} />
+						</video>
+					</div>
+				{/if}
+			{:else if file.type === 'image'}
+				<button
+					type="button"
+					class="relative w-full aspect-video overflow-hidden rounded-lg ml-checkered-bg cursor-zoom-in hover:ring-2 hover:ring-primary/50 transition-all"
+					onclick={() => (lightboxOpen = true)}
 				>
-					{#if clipboard.copied}
-						<Check class="h-3 w-3" />
-					{:else}
-						<Copy class="h-3 w-3" />
-					{/if}
-				</InputGroup.Button>
-			</InputGroup.Addon>
-		</InputGroup.Root>
-	</div>
+					<img src={file.url} alt={file.alt || file.name} class="w-full h-full object-contain" />
+				</button>
+			{:else if file.type === 'audio'}
+				<div class="w-full overflow-hidden rounded-lg">
+					<div class="flex flex-col items-center justify-center gap-3 bg-muted py-8 rounded-t-lg">
+						<Music class="h-12 w-12 text-text-light" />
+					</div>
+					<audio controls class="w-full rounded-b-lg">
+						<source src={file.url} />
+					</audio>
+				</div>
+			{:else}
+				<div class="relative w-full aspect-video overflow-hidden rounded-lg">
+					<FileMiniature {file} mode="thumb" />
+				</div>
+			{/if}
+		</div>
 
-	<!-- Alt text + focal point for images -->
-	{#if file.type === 'image'}
+		<!-- Tags -->
 		<div class="space-y-1.5">
-			<Label class="text-xs">{lang[interfaceLanguage.current].fileAltLabel}</Label>
-			<AltInput alt={file.alt} fileId={file.id} />
+			<div class="text-[11px] font-bold uppercase tracking-wide text-text-light">{lang[interfaceLanguage.current].tagsLabel}</div>
+			<TagCombobox
+				tags={allTags}
+				selectedTagIds={file.tags.map((t) => t.id)}
+				onchange={onTagUpdate}
+				showLabel={false}
+			/>
 		</div>
-		<FocalPointInput {file} />
-	{/if}
-
-	<!-- Accessibility section for video -->
-	{#if file.type === 'video'}
-		<div class="space-y-3">
-			<Label class="text-xs font-semibold">{lang[interfaceLanguage.current].accessibilityLabel}</Label>
-
-			<!-- Transcript -->
-			<div class="flex items-center justify-between gap-2 rounded-lg border p-2">
-				<div class="flex items-center gap-2 text-xs">
-					{#if file.transcriptFileId}
-						<CircleCheck class="h-4 w-4 text-green-500" />
-						<span>{lang[interfaceLanguage.current].transcriptLabel}</span>
-					{:else}
-						<AlertTriangle class="h-4 w-4 text-yellow-500" />
-						<span class="text-muted-foreground">{lang[interfaceLanguage.current].transcriptLabel}</span>
-					{/if}
-				</div>
-				<div class="flex gap-1">
-					{#if file.transcriptFileId}
-						<Button size="sm" variant="ghost" class="h-6 text-xs" onclick={() => {
-							remotes.updateMediaAccessibility({ fileId: file.id, transcriptFileId: null });
-							file.transcriptFileId = null;
-						}}>
-							{lang[interfaceLanguage.current].removeFile}
-						</Button>
-					{/if}
-					<Button size="sm" variant="outline" class="h-6 text-xs" onclick={() => (transcriptDialogOpen = true)}>
-						<Upload class="h-3 w-3 mr-1" />
-						{lang[interfaceLanguage.current].uploadTranscript}
-					</Button>
-				</div>
-			</div>
 
-			<!-- Audio Description -->
-			<div class="flex items-center justify-between gap-2 rounded-lg border p-2">
-				<div class="flex items-center gap-2 text-xs">
-					{#if file.audioDescriptionFileId}
-						<CircleCheck class="h-4 w-4 text-green-500" />
-						<span>{lang[interfaceLanguage.current].audioDescriptionLabel}</span>
-					{:else}
-						<AlertTriangle class="h-4 w-4 text-yellow-500" />
-						<span class="text-muted-foreground">{lang[interfaceLanguage.current].audioDescriptionLabel}</span>
-					{/if}
-				</div>
-				<div class="flex gap-1">
-					{#if file.audioDescriptionFileId}
-						<Button size="sm" variant="ghost" class="h-6 text-xs" onclick={() => {
-							remotes.updateMediaAccessibility({ fileId: file.id, audioDescriptionFileId: null });
-							file.audioDescriptionFileId = null;
-						}}>
-							{lang[interfaceLanguage.current].removeFile}
-						</Button>
-					{/if}
-					<Button size="sm" variant="outline" class="h-6 text-xs" onclick={() => (audioDescDialogOpen = true)}>
-						<Upload class="h-3 w-3 mr-1" />
-						{lang[interfaceLanguage.current].uploadAudioDescription}
-					</Button>
-				</div>
-			</div>
+		<!-- Filename -->
+		<div class="space-y-1.5">
+			<div class="text-[11px] font-bold uppercase tracking-wide text-text-light">{lang[interfaceLanguage.current].fileNameLabel}</div>
+			<FileNameInput name={file.name} onUpdate={onNameUpdate} />
+		</div>
 
-			<!-- Poster override -->
-			<div class="flex items-center justify-between gap-2 rounded-lg border p-2">
-				<div class="flex items-center gap-2 text-xs">
-					{#if file.posterUrl}
-						<CircleCheck class="h-4 w-4 text-green-500" />
+		<!-- URL -->
+		<div class="space-y-1.5">
+			<div class="text-[11px] font-bold uppercase tracking-wide text-text-light">{lang[interfaceLanguage.current].fileUrlLabel}</div>
+			<div class="flex items-stretch">
+				<input
+					readonly
+					value={fileUrl}
+					class="flex-1 min-w-0 rounded-l-lg bg-muted/60 border border-transparent px-2.5 py-1.5 font-mono text-xs text-foreground outline-none focus:border-primary focus:ring-2 focus:ring-primary/10 focus:bg-card"
+				/>
+				<button
+					type="button"
+					class="flex items-center justify-center w-9 rounded-r-lg bg-muted/60 border border-l-0 border-transparent text-text-light transition-colors hover:bg-lavender-lighter hover:text-primary"
+					onclick={() => clipboard.copy(fileUrl)}
+					aria-label="Kopiuj URL"
+				>
+					{#if clipboard.copied}
+						<Check class="h-3.5 w-3.5" />
 					{:else}
-						<AlertTriangle class="h-4 w-4 text-yellow-500" />
+						<Copy class="h-3.5 w-3.5" />
 					{/if}
-					<span class={file.posterUrl ? '' : 'text-muted-foreground'}>{lang[interfaceLanguage.current].posterLabel}</span>
-				</div>
-				<Button size="sm" variant="outline" class="h-6 text-xs" onclick={() => (posterDialogOpen = true)}>
-					{lang[interfaceLanguage.current].changePoster}
-				</Button>
+				</button>
 			</div>
 		</div>
-	{/if}
-</div>
 
-<!-- Metadane -->
-<div class="border-t border-white/10 bg-muted/20 px-5 py-4">
-	<div class="grid grid-cols-2 gap-x-4 gap-y-1.5 text-xs">
-		{#if file.mimeType}
-			<span class="text-muted-foreground">{lang[interfaceLanguage.current].mimeTypeLabel}</span>
-			<span class="font-medium">{file.mimeType}</span>
+		<!-- Alt text + focal point for images -->
+		{#if file.type === 'image'}
+			<div class="space-y-1.5">
+				<div class="text-[11px] font-bold uppercase tracking-wide text-text-light">{lang[interfaceLanguage.current].fileAltLabel}</div>
+				<AltInput alt={file.alt} fileId={file.id} />
+				<p class="text-[11px] text-text-light leading-relaxed">{lang[interfaceLanguage.current].fileAltHint}</p>
+			</div>
+			<div class="space-y-1.5">
+				<div class="text-[11px] font-bold uppercase tracking-wide text-text-light">{lang[interfaceLanguage.current].focalPointLabel}</div>
+				<FocalPointInput {file} />
+			</div>
 		{/if}
 
-		{#if file.width && file.height}
-			<span class="text-muted-foreground">{lang[interfaceLanguage.current].dimensionsLabel}</span>
-			<span class="font-medium">{file.width} × {file.height} px</span>
-		{/if}
+		<!-- Accessibility section for video/audio -->
+		{#if file.type === 'video' || file.type === 'audio'}
+			<div class="space-y-3">
+				<div class="text-[11px] font-bold uppercase tracking-wide text-text-light">{lang[interfaceLanguage.current].accessibilityLabel}</div>
+
+				<div class="flex items-center justify-between gap-2 rounded-lg border p-2">
+					<div class="flex items-center gap-2 text-xs">
+						{#if file.transcriptFileId}
+							<CircleCheck class="h-4 w-4 text-success" />
+							<span>{lang[interfaceLanguage.current].transcriptLabel}</span>
+						{:else}
+							<AlertTriangle class="h-4 w-4 text-warning" />
+							<span class="text-muted-foreground">{lang[interfaceLanguage.current].transcriptLabel}</span>
+						{/if}
+					</div>
+					<div class="flex gap-1">
+						{#if file.transcriptFileId}
+							<Button size="sm" variant="ghost" class="h-6 text-xs" onclick={() => {
+								remotes.updateMediaAccessibility({ fileId: file.id, transcriptFileId: null });
+								file.transcriptFileId = null;
+							}}>
+								{lang[interfaceLanguage.current].removeFile}
+							</Button>
+						{/if}
+						<Button size="sm" variant="outline" class="h-6 text-xs" onclick={() => (transcriptDialogOpen = true)}>
+							<Upload class="h-3 w-3 mr-1" />
+							{lang[interfaceLanguage.current].uploadTranscript}
+						</Button>
+					</div>
+				</div>
 
-		{#if file.duration}
-			<span class="text-muted-foreground">{lang[interfaceLanguage.current].durationLabel}</span>
-			<span class="font-medium">
-				{Math.floor(file.duration / 60)}:{String(Math.floor(file.duration % 60)).padStart(2, '0')}
-			</span>
-		{/if}
+				{#if file.type === 'video'}
+				<div class="flex items-center justify-between gap-2 rounded-lg border p-2">
+					<div class="flex items-center gap-2 text-xs">
+						{#if file.audioDescriptionFileId}
+							<CircleCheck class="h-4 w-4 text-success" />
+							<span>{lang[interfaceLanguage.current].audioDescriptionLabel}</span>
+						{:else}
+							<AlertTriangle class="h-4 w-4 text-warning" />
+							<span class="text-muted-foreground">{lang[interfaceLanguage.current].audioDescriptionLabel}</span>
+						{/if}
+					</div>
+					<div class="flex gap-1">
+						{#if file.audioDescriptionFileId}
+							<Button size="sm" variant="ghost" class="h-6 text-xs" onclick={() => {
+								remotes.updateMediaAccessibility({ fileId: file.id, audioDescriptionFileId: null });
+								file.audioDescriptionFileId = null;
+							}}>
+								{lang[interfaceLanguage.current].removeFile}
+							</Button>
+						{/if}
+						<Button size="sm" variant="outline" class="h-6 text-xs" onclick={() => (audioDescDialogOpen = true)}>
+							<Upload class="h-3 w-3 mr-1" />
+							{lang[interfaceLanguage.current].uploadAudioDescription}
+						</Button>
+					</div>
+				</div>
 
-		{#if file.size}
-			<span class="text-muted-foreground">{lang[interfaceLanguage.current].sizeLabel}</span>
-			<span class="font-medium">{formatFileSize(file.size)}</span>
+				<div class="flex items-center justify-between gap-2 rounded-lg border p-2">
+					<div class="flex items-center gap-2 text-xs">
+						{#if file.posterUrl}
+							<CircleCheck class="h-4 w-4 text-success" />
+						{:else}
+							<AlertTriangle class="h-4 w-4 text-warning" />
+						{/if}
+						<span class={file.posterUrl ? '' : 'text-muted-foreground'}>{lang[interfaceLanguage.current].posterLabel}</span>
+					</div>
+					<Button size="sm" variant="outline" class="h-6 text-xs" onclick={() => (posterDialogOpen = true)}>
+						{lang[interfaceLanguage.current].changePoster}
+					</Button>
+				</div>
+			{/if}
+			</div>
 		{/if}
+	</div>
 
-		<span class="text-muted-foreground">{lang[interfaceLanguage.current].createdAtLabel}</span>
-		<span class="font-medium">{new Date(file.createdAt).toLocaleDateString()}</span>
+	<!-- Metadata footer -->
+	<div class="shrink-0 border-t bg-muted/20 px-5 py-4">
+		<div class="text-[11px] font-bold uppercase tracking-wide text-text-light mb-2">{lang[interfaceLanguage.current].metadataLabel}</div>
+		<div class="grid grid-cols-[auto_1fr] gap-x-3 gap-y-1 text-[13px]">
+			{#if file.mimeType}
+				<span class="text-text-light font-medium whitespace-nowrap">{lang[interfaceLanguage.current].mimeTypeLabel}</span>
+				<span class="font-medium text-foreground">{file.mimeType}</span>
+			{/if}
+
+			{#if file.width && file.height}
+				<span class="text-text-light font-medium whitespace-nowrap">{lang[interfaceLanguage.current].dimensionsLabel}</span>
+				<span class="font-medium text-foreground">{file.width} × {file.height} px</span>
+			{/if}
+
+			{#if file.duration}
+				<span class="text-text-light font-medium whitespace-nowrap">{lang[interfaceLanguage.current].durationLabel}</span>
+				<span class="font-medium text-foreground">
+					{Math.floor(file.duration / 60)}:{String(Math.floor(file.duration % 60)).padStart(2, '0')}
+				</span>
+			{/if}
+
+			{#if file.size}
+				<span class="text-text-light font-medium whitespace-nowrap">{lang[interfaceLanguage.current].sizeLabel}</span>
+				<span class="font-medium text-foreground">{formatFileSize(file.size)}</span>
+			{/if}
+
+			<span class="text-text-light font-medium whitespace-nowrap">{lang[interfaceLanguage.current].createdAtLabel}</span>
+			<span class="font-medium text-foreground">{new Date(file.createdAt).toLocaleDateString()}</span>
+		</div>
 	</div>
 </div>
 
+<!-- Delete confirmation -->
+<AlertDialog.Root bind:open={deleteDialogOpen}>
+	<AlertDialog.Content>
+		<AlertDialog.Title>{lang[interfaceLanguage.current].deleteConfirmTitle}</AlertDialog.Title>
+		<AlertDialog.Description>{lang[interfaceLanguage.current].deleteConfirmDesc}</AlertDialog.Description>
+		<AlertDialog.Footer>
+			<AlertDialog.Cancel>{lang[interfaceLanguage.current].deleteCancel}</AlertDialog.Cancel>
+			<AlertDialog.Action
+				onclick={() => {
+					onDelete();
+					deleteDialogOpen = false;
+				}}
+			>
+				{lang[interfaceLanguage.current].fileDeleteLabel}
+			</AlertDialog.Action>
+		</AlertDialog.Footer>
+	</AlertDialog.Content>
+</AlertDialog.Root>
+
 <!-- Lightbox -->
 {#if file.type === 'image'}
 	<Dialog.Root bind:open={lightboxOpen}>
 		<Dialog.Content class="max-w-[90vw] max-h-[90vh] p-2 bg-black/95 border-none">
-			<div class="checkered-lightbox flex items-center justify-center">
+			<div class="flex items-center justify-center rounded-lg overflow-hidden" style="background: repeating-conic-gradient(#2a2a2a 0% 25%, #1a1a1a 0% 50%) 50% / 20px 20px; padding: 8px;">
 				<img
 					src={file.url}
 					alt={file.alt || file.name}
@@ -408,8 +502,8 @@
 	</Dialog.Root>
 {/if}
 
-<!-- Accessibility dialogs for video -->
-{#if file.type === 'video'}
+<!-- Transcript dialog (video + audio) -->
+{#if file.type === 'video' || file.type === 'audio'}
 	<Dialog.Root bind:open={transcriptDialogOpen}>
 		<Dialog.Content class="max-w-5xl! sm:max-w-5xl!">
 			<Dialog.Header>
@@ -418,7 +512,10 @@
 			<MediaSelector bind:selected={transcriptSelected} />
 		</Dialog.Content>
 	</Dialog.Root>
+{/if}
 
+<!-- Audio description + poster dialogs (video only) -->
+{#if file.type === 'video'}
 	<Dialog.Root bind:open={audioDescDialogOpen}>
 		<Dialog.Content class="max-w-5xl! sm:max-w-5xl!">
 			<Dialog.Header>
@@ -437,18 +534,3 @@
 		</Dialog.Content>
 	</Dialog.Root>
 {/if}
-
-<style>
-	.checkered-lightbox {
-		background-color: #1a1a1a;
-		background-image:
-			linear-gradient(45deg, #2a2a2a 25%, transparent 25%),
-			linear-gradient(-45deg, #2a2a2a 25%, transparent 25%),
-			linear-gradient(45deg, transparent 75%, #2a2a2a 75%),
-			linear-gradient(-45deg, transparent 75%, #2a2a2a 75%);
-		background-size: 20px 20px;
-		background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
-		border-radius: 8px;
-		padding: 8px;
-	}
-</style>