Release 0.5.1

src/routes/fundus/+page.svelte

@@ -1,9 +1,48 @@
 <script lang="ts">
+	import { goto, replaceState } from '$app/navigation';
 	import { resolve } from '$app/paths';
+	import { page } from '$app/state';
+	import { onMount, untrack } from 'svelte';
+	import PieceUsageHistory from '#lib/components/PieceUsageHistory.svelte';
 	import { formatClock } from '#lib/format.js';
 	import type { PageProps } from './$types';
 
 	let { data, form }: PageProps = $props();
+	let showUsedPieces = $state(untrack(() => data.filters.includeUsed));
+	let showPlannedPieces = $state(untrack(() => data.filters.includePlanned));
+	let visiblePieces = $derived(
+		data.pieces.filter(
+			(piece) =>
+				(showUsedPieces || piece.sentHistory.length === 0) &&
+				(showPlannedPieces || !piece.isPlannedInActiveShow)
+		)
+	);
+	onMount(() => {
+		const syncFiltersFromHistory = () => {
+			const search = new URL(window.location.href).searchParams;
+			showUsedPieces = search.get('includeUsed') === '1';
+			showPlannedPieces = search.get('includePlanned') === '1';
+		};
+		window.addEventListener('popstate', syncFiltersFromHistory);
+		return () => window.removeEventListener('popstate', syncFiltersFromHistory);
+	});
+
+	function setSourceFilter(name: 'includeUsed' | 'includePlanned', checked: boolean) {
+		if (name === 'includeUsed') showUsedPieces = checked;
+		else showPlannedPieces = checked;
+		const url = new URL(page.url.href);
+		if (checked) url.searchParams.set(name, '1');
+		else url.searchParams.delete(name);
+		// This URL is cloned from the current page; only same-route filter parameters change.
+		// eslint-disable-next-line svelte/no-navigation-without-resolve
+		replaceState(url, page.state);
+	}
+
+	async function resetFilters() {
+		await goto(resolve('/fundus'), { invalidateAll: true });
+		showUsedPieces = false;
+		showPlannedPieces = false;
+	}
 	const statusLabel = {
 		ready: 'Sendefertig',
 		preparing: 'In Vorbereitung',
@@ -20,8 +59,8 @@
 			<h1>Fundus</h1>
 			<p class="page-intro">Vorbereitete Inhalte für kommende Sendungen.</p>
 		</div>
-		<div class="heading-stat" aria-label={`${data.pieces.length} gefundene Inhalte`}>
-			<strong>{data.pieces.length}</strong><span>Inhalte</span>
+		<div class="heading-stat" aria-label={`${visiblePieces.length} gefundene Inhalte`}>
+			<strong>{visiblePieces.length}</strong><span>Inhalte</span>
 		</div>
 	</header>
 	{#if form?.error}<div class="form-message error" role="alert">{form.error}</div>{/if}
@@ -41,7 +80,12 @@
 		</div>
 	</details>
 
-	<form class="library-filters" method="GET" aria-label="Fundus durchsuchen und filtern">
+	<form
+		id="library-filters"
+		class="library-filters"
+		method="GET"
+		aria-label="Fundus durchsuchen und filtern"
+	>
 		<label class="search-field"
 			><span aria-hidden="true">⌕</span><span class="sr-only">Fundus durchsuchen</span><input
 				name="q"
@@ -84,12 +128,36 @@
 			></label
 		>
 		<button class="secondary-button" type="submit">Anwenden</button>
-		<a class="text-link" href={resolve('/fundus')}>Zurücksetzen</a>
+		<button class="text-button" type="button" onclick={resetFilters}>Zurücksetzen</button>
 	</form>
+	<div class="library-filter-options" aria-label="Fundusauswahl erweitern">
+		<label class="filter-checkbox">
+			<input
+				type="checkbox"
+				name="includeUsed"
+				value="1"
+				form="library-filters"
+				checked={showUsedPieces}
+				onchange={(event) => setSourceFilter('includeUsed', event.currentTarget.checked)}
+			/>
+			<span>Auch verwendete Inhalte zeigen</span>
+		</label>
+		<label class="filter-checkbox">
+			<input
+				type="checkbox"
+				name="includePlanned"
+				value="1"
+				form="library-filters"
+				checked={showPlannedPieces}
+				onchange={(event) => setSourceFilter('includePlanned', event.currentTarget.checked)}
+			/>
+			<span>Auch eingeplante Inhalte zeigen</span>
+		</label>
+	</div>
 
-	{#if data.pieces.length}
+	{#if visiblePieces.length}
 		<div class="piece-grid">
-			{#each data.pieces as piece (piece.id)}
+			{#each visiblePieces as piece (piece.id)}
 				<article
 					class="piece-card"
 					style={`--category: ${piece.categories[0]?.color ?? '#8b8f98'}`}
@@ -104,6 +172,7 @@
 					<div class="piece-primary">
 						<h2><a href={resolve('/fundus/[id]', { id: piece.id })}>{piece.title}</a></h2>
 						<p>{piece.summary || 'Noch keine Kurzbeschreibung.'}</p>
+						<PieceUsageHistory history={piece.sentHistory} />
 					</div>
 					<div class="piece-classification">
 						<span class="category-label"