Merge branch 'features/shadcn' into develop

# Conflicts: # .idea/workspace.xml # agents.md
2026-07-22 22:18:59 +02:00
parent 47ed80bd24 44ca534cfa
commit a450c6f5dd
43 changed files with 6196 additions and 752 deletions
@@ -1,35 +1,211 @@
 <script lang="ts">
-    import Card from "$lib/components/Card.svelte";
-    import ZipDropzone from "$lib/components/ZipDropzone.svelte";
+    import {onMount} from 'svelte';
+    import Button from '$lib/components/ui/button.svelte';
+    import ProcessedZipArchiveEditor from '$lib/components/ProcessedZipArchiveEditor.svelte';
+    import ZipDropzone from '$lib/components/ZipDropzone.svelte';
+    import {
+        extractZipArchives,
+        mergeProcessedZipArchive,
+        type ProcessedZipArchive
+    } from '$lib/zip-processing';
+    import * as Card from "$lib/components/ui/card/index";
+
+    const THUMBNAIL_WIDTH_STORAGE_KEY = 'thumbnailWidth';

    let selectedZipFiles: File[] = $state([]);
+    let processedZipFiles: ProcessedZipArchive[] = $state([]);
+    let pendingZipCount = $state(0);
+    let thumbnailWidth = $state(200);
+    let thumbnailWidthHydrated = $state(false);
+    let archiveGeneration = 0;
+
+    const clampThumbnailWidth = (value: number) => Math.min(400, Math.max(100, value));
+
+    onMount(() => {
+        const storedValue = localStorage.getItem(THUMBNAIL_WIDTH_STORAGE_KEY);
+
+        if (storedValue !== null) {
+            const parsedValue = Number(storedValue);
+
+            if (Number.isFinite(parsedValue)) {
+                thumbnailWidth = clampThumbnailWidth(parsedValue);
+            }
+        }
+
+        thumbnailWidthHydrated = true;
+    });
+
+    $effect(() => {
+        if (!thumbnailWidthHydrated) {
+            return;
+        }
+
+        localStorage.setItem(THUMBNAIL_WIDTH_STORAGE_KEY, String(thumbnailWidth));
+    });
+
+    const toArrayBuffer = (bytes: Uint8Array) => {
+        const copy = new Uint8Array(bytes.byteLength);
+        copy.set(bytes);
+        return copy.buffer;
+    };
+
+    const downloadPdfBytes = (bytes: Uint8Array, fileName: string) => {
+        const pdfBlob = new Blob([toArrayBuffer(bytes)], {type: 'application/pdf'});
+        const objectUrl = URL.createObjectURL(pdfBlob);
+        const downloadLink = document.createElement('a');
+
+        downloadLink.href = objectUrl;
+        downloadLink.download = fileName.toLowerCase().endsWith('.pdf') ? fileName : `${fileName}.pdf`;
+        downloadLink.rel = 'noopener';
+        downloadLink.click();
+        window.setTimeout(() => URL.revokeObjectURL(objectUrl), 1000);
+    };

    const handleFilesSelected = (files: File[]) => {
        selectedZipFiles = [...selectedZipFiles, ...files];
+
+        for (const file of files) {
+            void processZipFile(file, archiveGeneration);
+        }
+    };
+
+    const processZipFile = async (file: File, generation: number) => {
+        pendingZipCount += 1;
+
+        try {
+            const processedZipArchives = await extractZipArchives(file);
+
+            if (generation !== archiveGeneration) {
+                return;
+            }
+
+            processedZipFiles = [...processedZipFiles, ...processedZipArchives];
+        } catch (error) {
+            console.error(`Failed to process ${file.name}`, error);
+        } finally {
+            if (generation === archiveGeneration) {
+                pendingZipCount -= 1;
+            }
+        }
+    };
+
+    const updateProcessedZipFile = (index: number, archive: ProcessedZipArchive) => {
+        processedZipFiles = processedZipFiles.map((existingArchive, existingIndex) =>
+            existingIndex === index ? archive : existingArchive
+        );
+    };
+
+    const exportAllZipArchivesAsPdf = async () => {
+        for (const archive of processedZipFiles) {
+            try {
+                const mergedBytes = await mergeProcessedZipArchive(archive);
+                downloadPdfBytes(mergedBytes, archive.name);
+            } catch (error) {
+                console.error(`Failed to export archive ${archive.name}`, error);
+            }
+        }
+    };
+
+    const deleteAllZipArchives = () => {
+        archiveGeneration += 1;
+        selectedZipFiles = [];
+        processedZipFiles = [];
+        pendingZipCount = 0;
    };
 </script>

 {#snippet content()}
    {#if selectedZipFiles.length === 0}
-        <ZipDropzone onFilesSelected={handleFilesSelected} />
+        <Card.Root>
+            <Card.Content>
+                <ZipDropzone onFilesSelected={handleFilesSelected}/>
+            </Card.Content>
+        </Card.Root>
    {:else}
-        <div class="flex min-h-[calc(-180px+100vh)] w-full grow flex-col justify-center gap-4 px-4 py-6">
-            <div class="flex flex-row items-baseline justify-center gap-2">
-                <h2 class="h1 text-[20px] font-bold text-primary-900">ZIP-Dateien geladen</h2>
-            </div>
+        <details class="fixed bottom-4 right-4 z-20">
+            <summary
+                    class="flex h-12 w-12 cursor-pointer list-none items-center justify-center rounded-full border border-primary-200 bg-white text-lg font-semibold text-primary-800 shadow-lg transition hover:border-primary-300 hover:bg-primary-50"
+            >
+                <span class="sr-only">Settings</span>
+                <span>⚙️</span>
+            </summary>

-            <ul class="mx-auto w-full max-w-3xl space-y-2">
-                {#each selectedZipFiles as file}
-                    <li class="rounded-container bg-primary-50 px-4 py-3 text-[14px] font-medium text-primary-900">
-                        {file.name}
-                    </li>
-                {/each}
-            </ul>
+            <div
+                    class="absolute bottom-14 right-0 w-72 rounded-xl border border-primary-100 bg-white p-4 shadow-lg"
+            >
+                <div class="flex flex-col gap-3">
+                    <div class="flex gap-2">
+                        <Button
+                                class="flex-1"
+                                type="button"
+                                disabled={processedZipFiles.length === 0}
+                                onclick={exportAllZipArchivesAsPdf}
+                        >
+                            Alle ZIP-Archive als PDF exportieren
+                        </Button>
+
+                        <Button
+                                class="flex-1"
+                                type="button"
+                                disabled={selectedZipFiles.length === 0}
+                                variant="secondary"
+                                onclick={deleteAllZipArchives}
+                        >
+                            Alle ZIP-Archive löschen
+                        </Button>
+                    </div>
+
+                    <label class="flex flex-col gap-2">
+                        <div
+                                class="flex items-center justify-between gap-3 text-sm font-medium text-primary-900"
+                        >
+                            <span>Thumbnail Breite</span>
+                            <span class="tabular-nums text-primary-700">{thumbnailWidth}px</span>
+                        </div>
+
+                        <input
+                                class="w-full accent-primary-700"
+                                type="range"
+                                min="100"
+                                max="400"
+                                step="1"
+                                bind:value={thumbnailWidth}
+                        />
+                    </label>
+                </div>
+            </div>
+        </details>
+        <div
+                class="flex min-h-[calc(-180px+100vh)] w-full grow flex-col justify-center gap-4 px-4 py-6"
+        >
+            <div class="mx-auto flex w-full flex-col gap-3">
+                {#if pendingZipCount > 0}
+                    <div
+                            class="rounded-container bg-primary-50 px-4 py-3 text-[14px] font-medium text-primary-900"
+                    >
+                        Noch {pendingZipCount} ZIP-Datei{pendingZipCount === 1 ? '' : 'en'} in Bearbeitung.
+                    </div>
+                {/if}
+
+                {#if processedZipFiles.length > 0}
+                    <div class="flex flex-col gap-4">
+                        {#each processedZipFiles as file, index}
+                            <ProcessedZipArchiveEditor
+                                    archive={file}
+                                    {thumbnailWidth}
+                                    onArchiveChange={(updatedArchive) => updateProcessedZipFile(index, updatedArchive)}
+                            />
+                        {/each}
+                    </div>
+                {/if}
+            </div>
        </div>
    {/if}
 {/snippet}

 <section class="px-4">
-    <h1 class="h1 text-[20px] font-bold py-6 text-primary-900">beA-Edit</h1>
-    <Card {content} class="h-full"/>
+    <div class="flex flex-wrap items-center justify-between gap-3 py-6">
+        <h1 class="h1 text-[20px] font-bold text-primary-900">beA-Edit</h1>
+    </div>
+    {@render content()}
 </section>
@@ -1,16 +1,161 @@
@import 'tailwindcss';
-@import '@skeletonlabs/skeleton/themes/cerberus';
-@import '@skeletonlabs/skeleton';
-@import '@skeletonlabs/skeleton-svelte';
-@import '../lib/nom-theme.css';
+/*@import '../globals.css';*/
+@import "tw-animate-css";
+@import "shadcn-svelte/tailwind.css";
+@import "@fontsource-variable/geist";
+
+@custom-variant dark (&:is(.dark *));

@plugin '@tailwindcss/forms';
@plugin '@tailwindcss/typography';

+@font-face {
+	font-family: 'Nunito';
+	font-style: normal;
+	font-weight: 100 900;
+	src: url('$lib/assets/Nunito-VariableFont_wght.ttf') format('truetype');
+}

-@font-face{
-    font-family: 'Nunito';
-    font-style: normal;
-    font-weight: 100 900;
-    src: url('$lib/assets/Nunito-VariableFont_wght.ttf') format("truetype");
-}
+:root {
+	--background: #EEF4F6;
+	--foreground: #122F62;
+	--card: oklch(1 0 0);
+	--card-foreground: oklch(0.145 0 0);
+	--popover: oklch(1 0 0);
+	--popover-foreground: oklch(0.145 0 0);
+	--primary: #122f62;
+	--primary-foreground: oklch(0.985 0 0);
+	--secondary: #EA544B;
+	--secondary-end: #FF6F6D;
+	--secondary-foreground: oklch(0.205 0 0);
+	--muted: oklch(0.97 0 0);
+	--muted-foreground: oklch(0.556 0 0);
+	--accent: #d6dce5;
+	--accent-foreground: oklch(0.205 0 0);
+	--destructive: #ff0027;
+	--border: oklch(0.922 0 0);
+	--input: oklch(0.922 0 0);
+	--ring: oklch(0.708 0 0);
+	--chart-1: oklch(0.87 0 0);
+	--chart-2: oklch(0.556 0 0);
+	--chart-3: oklch(0.439 0 0);
+	--chart-4: oklch(0.371 0 0);
+	--chart-5: oklch(0.269 0 0);
+	--radius: 16px;
+	--sidebar: oklch(0.985 0 0);
+	--sidebar-foreground: oklch(0.145 0 0);
+	--sidebar-primary: oklch(0.205 0 0);
+	--sidebar-primary-foreground: oklch(0.985 0 0);
+	--sidebar-accent: oklch(0.97 0 0);
+	--sidebar-accent-foreground: oklch(0.205 0 0);
+	--sidebar-border: oklch(0.922 0 0);
+	--sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+	--background: #212121;
+	--foreground: #FFFFFF;
+	--card: oklch(0.205 0 0);
+	--card-foreground: oklch(0.985 0 0);
+	--popover: oklch(0.205 0 0);
+	--popover-foreground: oklch(0.985 0 0);
+	--primary: #92b2eb;
+	--primary-foreground: oklch(0.205 0 0);
+	--secondary: linear-gradient(90deg, #EA544B 0%, #FF6F6D 100%);
+	--secondary-foreground: oklch(0.985 0 0);
+	--muted: oklch(0.269 0 0);
+	--muted-foreground: oklch(0.708 0 0);
+	--accent: oklch(0.269 0 0);
+	--accent-foreground: oklch(0.985 0 0);
+	--destructive: #ff0027;
+	--border: oklch(1 0 0 / 10%);
+	--input: oklch(1 0 0 / 15%);
+	--ring: oklch(0.556 0 0);
+	--chart-1: oklch(0.87 0 0);
+	--chart-2: oklch(0.556 0 0);
+	--chart-3: oklch(0.439 0 0);
+	--chart-4: oklch(0.371 0 0);
+	--chart-5: oklch(0.269 0 0);
+	--sidebar: oklch(0.205 0 0);
+	--sidebar-foreground: oklch(0.985 0 0);
+	--sidebar-primary: oklch(0.488 0.243 264.376);
+	--sidebar-primary-foreground: oklch(0.985 0 0);
+	--sidebar-accent: oklch(0.269 0 0);
+	--sidebar-accent-foreground: oklch(0.985 0 0);
+	--sidebar-border: oklch(1 0 0 / 10%);
+	--sidebar-ring: oklch(0.556 0 0);
+}
+
+@theme inline {
+	--font-sans: 'Nunito', sans-serif;
+	--color-sidebar-ring: var(--sidebar-ring);
+	--color-sidebar-border: var(--sidebar-border);
+	--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+	--color-sidebar-accent: var(--sidebar-accent);
+	--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+	--color-sidebar-primary: var(--sidebar-primary);
+	--color-sidebar-foreground: var(--sidebar-foreground);
+	--color-sidebar: var(--sidebar);
+	--color-chart-5: var(--chart-5);
+	--color-chart-4: var(--chart-4);
+	--color-chart-3: var(--chart-3);
+	--color-chart-2: var(--chart-2);
+	--color-chart-1: var(--chart-1);
+	--color-ring: var(--ring);
+	--color-input: var(--input);
+	--color-border: var(--border);
+	--color-destructive: var(--destructive);
+	--color-accent-foreground: var(--accent-foreground);
+	--color-accent: var(--accent);
+	--color-muted-foreground: var(--muted-foreground);
+	--color-muted: var(--muted);
+	--color-secondary-foreground: var(--secondary-foreground);
+	--color-secondary: var(--secondary);
+	--color-primary-foreground: var(--primary-foreground);
+	--color-primary: var(--primary);
+	--color-popover-foreground: var(--popover-foreground);
+	--color-popover: var(--popover);
+	--color-card-foreground: var(--card-foreground);
+	--color-card: var(--card);
+	--color-foreground: var(--foreground);
+	--color-background: var(--background);
+	--radius-sm: calc(var(--radius) * 0.6);
+	--radius-md: calc(var(--radius) * 0.8);
+	--radius-lg: var(--radius);
+	--radius-xl: calc(var(--radius) * 1.4);
+	--radius-2xl: calc(var(--radius) * 1.8);
+	--radius-3xl: calc(var(--radius) * 2.2);
+	--radius-4xl: calc(var(--radius) * 2.6);
+}
+
+@layer base {
+	* {
+		@apply border-border outline-ring/50;
+	}
+	body {
+		@apply bg-background text-foreground;
+	}
+	html {
+		@apply font-sans;
+	}
+}
+
+
+/* ripple */
+
+@keyframes ripple {
+	from {
+		transform: scale(0);
+		opacity: 0.8;
+	}
+
+	to {
+		transform: scale(4);
+		opacity: 0;
+	}
+}
+
+.animate-ripple {
+	animation: ripple 600ms ease-out;
+}
+