bea settings

src/routes/tools/bea/+page.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
-	import Button from '$lib/components/ui/button.svelte';
+	import BeaWorkspaceControls from '$lib/components/BeaWorkspaceControls.svelte';
 	import ProcessedZipArchiveEditor from '$lib/components/ProcessedZipArchiveEditor.svelte';
 	import ZipDropzone from '$lib/components/ZipDropzone.svelte';
 	import BeaArchiveProcessing, {
@@ -131,12 +131,19 @@
 		}
 	};
 
-	const deleteAllZipArchives = () => {
+	const resetWorkspace = () => {
 		archiveGeneration += 1;
 		selectedZipFiles = [];
 		processedZipFiles = [];
 		zipJobs = [];
 	};
+
+	const replaceWithZipFiles = (files: File[]) => {
+		resetWorkspace();
+		// handleFilesSelected captures the incremented archiveGeneration, so results
+		// from the previous workspace can no longer append.
+		handleFilesSelected(files);
+	};
 </script>
 
 {#snippet content()}
@@ -146,63 +153,19 @@
 				<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"
-			>
-				<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="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"
-		>
+	{:else if zipJobs.length > 0}
+		<div class="flex w-full grow flex-col gap-4 px-4 py-6">
+			<BeaWorkspaceControls
+				selectedZipCount={selectedZipFiles.length}
+				processedArchiveCount={processedZipFiles.length}
+				{pendingZipCount}
+				{thumbnailWidth}
+				onThumbnailWidthChange={(value) => (thumbnailWidth = value)}
+				onRequestReplacement={replaceWithZipFiles}
+				onAppendFiles={handleFilesSelected}
+				onExportAll={exportAllZipArchivesAsPdf}
+				onClear={resetWorkspace}
+			/>
 			<div class="mx-auto flex w-full flex-col gap-3">
 				{#if processedZipFiles.length === 0}
 					<BeaArchiveProcessing jobs={zipJobs} onRetry={retryZipFile} onRemove={removeZipFile} />