EventSnap/frontend/src/lib/components/UploadQueue.svelte

<script lang="ts">
	import { queueItems, isProcessing, retryItem, removeItem, clearCompleted, rateLimitRetryAt } from '$lib/upload-queue';
	import type { QueueItem } from '$lib/upload-queue';

	function formatSize(bytes: number): string {
		if (bytes < 1024) return `${bytes} B`;
		if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
		return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
	}

	function statusLabel(status: QueueItem['status']): string {
		switch (status) {
			case 'pending': return 'Wartend';
			case 'uploading': return 'Wird hochgeladen';
			case 'done': return 'Fertig';
			case 'error': return 'Fehler';
		}
	}

	function statusColor(status: QueueItem['status']): string {
		switch (status) {
			case 'pending': return 'text-gray-500 dark:text-gray-400';
			case 'uploading': return 'text-blue-600 dark:text-blue-400';
			case 'done': return 'text-green-600 dark:text-green-400';
			case 'error': return 'text-red-600 dark:text-red-400';
		}
	}

	let items = $derived($queueItems);
	let hasCompleted = $derived(items.some((i) => i.status === 'done'));

	// Countdown for rate-limit banner
	let countdown = $state(0);

	$effect(() => {
		const retryAt = $rateLimitRetryAt;
		if (!retryAt) {
			countdown = 0;
			return;
		}

		countdown = Math.ceil((retryAt - Date.now()) / 1000);
		const interval = setInterval(() => {
			countdown = Math.ceil((retryAt - Date.now()) / 1000);
			if (countdown <= 0) clearInterval(interval);
		}, 1000);

		return () => clearInterval(interval);
	});
</script>

{#if items.length > 0}
	<div class="mt-4 rounded-lg border border-gray-200 bg-white dark:border-gray-800 dark:bg-gray-900">
		<div class="flex items-center justify-between border-b border-gray-100 px-4 py-3 dark:border-gray-800">
			<h3 class="text-sm font-semibold text-gray-900 dark:text-gray-100">
				Upload-Warteschlange
				{#if $isProcessing}
					<span class="ml-2 inline-block h-2 w-2 animate-pulse rounded-full bg-blue-500"></span>
				{/if}
			</h3>
			{#if hasCompleted}
				<button
					onclick={() => clearCompleted()}
					class="inline-flex min-h-11 items-center px-1 text-xs text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
				>
					Fertige entfernen
				</button>
			{/if}
		</div>

		{#if $rateLimitRetryAt && countdown > 0}
			<div class="border-b border-amber-100 bg-amber-50 px-4 py-2 text-sm text-amber-800 dark:border-amber-900/40 dark:bg-amber-950/30 dark:text-amber-300">
				Upload-Limit erreicht. Wird in {countdown} Sek. automatisch fortgesetzt.
			</div>
		{/if}

		<ul class="divide-y divide-gray-100 dark:divide-gray-800">
			{#each items as item (item.id)}
				<li class="px-4 py-3">
					<div class="flex items-center justify-between">
						<div class="min-w-0 flex-1">
							<p class="truncate text-sm font-medium text-gray-900 dark:text-gray-100">{item.fileName}</p>
							<p class="text-xs text-gray-500 dark:text-gray-400">{formatSize(item.fileSize)}</p>
						</div>
						<div class="ml-3 flex items-center gap-2">
							<span class="text-xs font-medium {statusColor(item.status)}">
								{statusLabel(item.status)}
							</span>
							{#if item.status === 'error'}
								<button
									onclick={() => retryItem(item.id)}
									class="inline-flex min-h-11 items-center rounded bg-red-100 px-3 text-xs font-medium text-red-700 hover:bg-red-200 dark:bg-red-950/40 dark:text-red-300 dark:hover:bg-red-950/60"
								>
									Erneut
								</button>
							{/if}
							{#if item.status === 'done' || item.status === 'error'}
								<button
									onclick={() => removeItem(item.id)}
									class="inline-flex h-9 w-9 items-center justify-center text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300"
									aria-label="Entfernen"
								>
									<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
										<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
									</svg>
								</button>
							{/if}
						</div>
					</div>

					{#if item.status === 'uploading'}
						<div class="mt-2 h-1.5 w-full overflow-hidden rounded-full bg-gray-200 dark:bg-gray-700">
							<div
								class="h-full rounded-full bg-blue-500 transition-all duration-300"
								style="width: {item.progress}%"
							></div>
						</div>
						<p class="mt-1 text-right text-xs text-gray-400 dark:text-gray-500">{item.progress}%</p>
					{/if}

					{#if item.error}
						<p class="mt-1 text-xs text-red-500 dark:text-red-400">{item.error}</p>
					{/if}
				</li>
			{/each}
		</ul>
	</div>
{/if}