Initial commit

routes/images/ImageHistoryModal.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+	import * as Dialog from '$lib/components/ui/dialog';
+	import { Button } from '$lib/components/ui/button';
+	import { Layers } from 'lucide-svelte';
+	import ImageLayersView from './ImageLayersView.svelte';
+
+	interface Props {
+		open: boolean;
+		imageId: string;
+		imageName?: string;
+	}
+
+	let { open = $bindable(), imageId, imageName }: Props = $props();
+</script>
+
+<Dialog.Root bind:open>
+	<Dialog.Content class="max-w-5xl max-h-[90vh] flex flex-col min-h-[400px] !animate-none">
+		<Dialog.Header>
+			<Dialog.Title class="flex items-center gap-2">
+				<Layers class="w-5 h-5" />
+				Image layers: <span class="text-muted-foreground font-normal">{imageName || imageId.slice(7, 19)}</span>
+			</Dialog.Title>
+		</Dialog.Header>
+
+		<div class="flex-1 overflow-auto space-y-4">
+			<ImageLayersView
+				imageId={imageId}
+				imageName={imageName}
+				visible={open}
+			/>
+		</div>
+
+		<Dialog.Footer>
+			<Button variant="outline" onclick={() => (open = false)}>Close</Button>
+		</Dialog.Footer>
+	</Dialog.Content>
+</Dialog.Root>