rehlert/bea-edit
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

adds shadcn, removes skeleton, implements button after styleguide

Browse Source
This commit is contained in:
rehlert committed 2026-06-16 18:07:58 +02:00
1 parent 9785973e8b
commit 0b032b2cd8
23 files changed
+3573 -397
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/routes/+page.svelte
+44 -25
View File
@@ -1,11 +1,16 @@
<script lang="ts">
import {onMount} from "svelte";
import Card from "$lib/components/Card.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 {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";
const THUMBNAIL_WIDTH_STORAGE_KEY = 'thumbnailWidth';
let selectedZipFiles: File[] = $state([]);
let processedZipFiles: ProcessedZipArchive[] = $state([]);
@@ -45,13 +50,13 @@
};
const downloadPdfBytes = (bytes: Uint8Array, fileName: string) => {
const pdfBlob = new Blob([toArrayBuffer(bytes)], {type: "application/pdf"});
const pdfBlob = new Blob([toArrayBuffer(bytes)], {type: 'application/pdf'});
const objectUrl = URL.createObjectURL(pdfBlob);
const downloadLink = document.createElement("a");
const downloadLink = document.createElement('a');
downloadLink.href = objectUrl;
downloadLink.download = fileName.toLowerCase().endsWith(".pdf") ? fileName : `${fileName}.pdf`;
downloadLink.rel = "noopener";
downloadLink.download = fileName.toLowerCase().endsWith('.pdf') ? fileName : `${fileName}.pdf`;
downloadLink.rel = 'noopener';
downloadLink.click();
window.setTimeout(() => URL.revokeObjectURL(objectUrl), 1000);
};
@@ -86,7 +91,7 @@
const updateProcessedZipFile = (index: number, archive: ProcessedZipArchive) => {
processedZipFiles = processedZipFiles.map((existingArchive, existingIndex) =>
existingIndex === index ? archive : existingArchive,
existingIndex === index ? archive : existingArchive
);
};
@@ -111,39 +116,49 @@
{#snippet content()}
{#if selectedZipFiles.length === 0}
<ZipDropzone onFilesSelected={handleFilesSelected}/>
<Card.Root>
<Card.Content>
<ZipDropzone onFilesSelected={handleFilesSelected}/>
</Card.Content>
</Card.Root>
{:else}
<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">
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>
<div class="absolute bottom-14 right-0 w-72 rounded-xl border border-primary-100 bg-white p-4 shadow-lg">
<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 rounded-container bg-primary-900 px-3 py-2 text-[13px] font-bold leading-5 text-white shadow-sm transition hover:bg-primary-800 disabled:cursor-not-allowed disabled:bg-primary-300"
<Button
class="flex-1"
type="button"
disabled={processedZipFiles.length === 0}
onclick={exportAllZipArchivesAsPdf}
>
Alle ZIP-Archive als PDF exportieren
</button>
</Button>
<button
class="flex-1 rounded-container bg-red-600 px-3 py-2 text-[13px] font-bold leading-5 text-white shadow-sm transition hover:bg-red-500 disabled:cursor-not-allowed disabled:bg-red-300"
<Button
class="flex-1"
type="button"
disabled={selectedZipFiles.length === 0}
variant="secondary"
onclick={deleteAllZipArchives}
>
Alle ZIP-Archive löschen
</button>
</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">
<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>
@@ -160,11 +175,15 @@
</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="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
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}
@@ -188,5 +207,5 @@
<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>
<Card {content} class="h-full"/>
{@render content()}
</section>