adds features

src/lib/components/PdfPageGrid.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+	import type { PdfThumbnail } from '$lib/pdf-thumbnails';
+	import { cn } from '$lib/utils';
+
+	type Props = {
+		thumbnails: PdfThumbnail[];
+		selectedPages?: Set<number>;
+		onPageClick?: (pageNumber: number) => void;
+		thumbnailWidth?: number;
+		class?: string;
+	};
+
+	let {
+		thumbnails,
+		selectedPages = new Set<number>(),
+		onPageClick,
+		thumbnailWidth = 120,
+		class: className = ''
+	}: Props = $props();
+</script>
+
+<div
+	class={cn('grid gap-3', className)}
+	style="grid-template-columns: repeat(auto-fill, minmax({thumbnailWidth}px, 1fr));"
+>
+	{#each thumbnails as thumb}
+		{@const isSelected = selectedPages.has(thumb.pageNumber)}
+		<button
+			type="button"
+			class={cn(
+				'group relative flex flex-col items-center gap-2 rounded-xl border-2 p-2 transition focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-400',
+				isSelected
+					? 'border-primary bg-primary/5'
+					: 'border-transparent hover:border-primary-200 hover:bg-primary-50/50'
+			)}
+			onclick={() => onPageClick?.(thumb.pageNumber)}
+		>
+			<img
+				src={thumb.imageUrl}
+				alt="Seite {thumb.pageNumber}"
+				class="w-full rounded border border-primary-100 bg-white object-contain"
+				style="aspect-ratio: {thumb.width} / {thumb.height};"
+			/>
+			<span class="text-[12px] font-medium text-primary-700">Seite {thumb.pageNumber}</span>
+			{#if isSelected}
+				<div
+					class="absolute top-1 right-1 flex h-5 w-5 items-center justify-center rounded-full bg-primary text-[10px] font-bold text-white"
+				>
+					✓
+				</div>
+			{/if}
+		</button>
+	{/each}
+</div>