From 2ca9e98b885c0352769ec98059ab715d9ab8f96d Mon Sep 17 00:00:00 2001
From: simonredfern <simon@tesobe.com>
Date: Thu, 15 Oct 2026 11:00:11 +0200
Subject: [PATCH] Overlapping toggle button

---
 src/routes/registry/activities/+page.svelte | 59 ++++++++++++++++-----
 1 file changed, 46 insertions(+), 13 deletions(-)

diff --git a/src/routes/registry/activities/+page.svelte b/src/routes/registry/activities/+page.svelte
index c3ff518..f2f2762 100644
--- a/src/routes/registry/activities/+page.svelte
+++ b/src/routes/registry/activities/+page.svelte
@@ -72,10 +72,10 @@
 		(activity.activity_id && overlaps.get(activity.activity_id)) || [];
 
 	/**
-	 * The filtered activities that have an area to draw, for the map's quick list:
-	 * overlapping ones first, then by name.
+	 * The filtered activities that have an area to draw: overlapping ones first, then by
+	 * name, as the map's quick list shows them.
 	 */
-	const mapped = $derived(
+	const withArea = $derived(
 		filtered
 			.filter((a) => a.activity_id && data.areas[a.activity_id])
 			.sort(
@@ -84,8 +84,22 @@
 					(a.name ?? '').localeCompare(b.name ?? '')
 			)
 	);
-	const overlappingCount = $derived(mapped.filter((a) => overlapsWith(a).length > 0).length);
-	const mappedCount = $derived(mapped.length);
+	const overlappingCount = $derived(withArea.filter((a) => overlapsWith(a).length > 0).length);
+	const mappedCount = $derived(withArea.length);
+
+	/** Map view only: overlaps need the areas, which only the map view loads. */
+	let overlap = $state('all');
+	const overlapItems = [
+		{ value: 'all', label: 'All' },
+		{ value: 'overlapping', label: 'Overlapping' },
+		{ value: 'separate', label: 'Not overlapping' }
+	];
+	/** What the quick list and the map show, after the overlap toggle. */
+	const mapped = $derived(
+		overlap === 'all'
+			? withArea
+			: withArea.filter((a) => overlapsWith(a).length > 0 === (overlap === 'overlapping'))
+	);
 
 	let activitiesMap = $state<ReturnType<typeof RegistryActivitiesMap>>();
 	let focusedId = $state<string | null>(null);
@@ -98,7 +112,11 @@
 	}
 
 	const filtersApplied = $derived(
-		search.trim() !== '' || creditType !== 'all' || country !== 'all' || status !== 'all'
+		search.trim() !== '' ||
+			creditType !== 'all' ||
+			country !== 'all' ||
+			status !== 'all' ||
+			overlap !== 'all'
 	);
 
 	function clearFilters() {
@@ -106,6 +124,7 @@
 		creditType = 'all';
 		country = 'all';
 		status = 'all';
+		overlap = 'all';
 	}
 
 	/**
@@ -249,12 +268,20 @@
 				</Button>
 			{/if}
 		</div>
-		{#if overlappingCount > 0}
-			<p class="ogcr-overlap-note text-body-s mb-2">
-				<Layers class="size-4" aria-hidden="true" />
-				{overlappingCount}
-				{overlappingCount === 1 ? 'activity overlaps' : 'activities overlap'} another activity's area
-			</p>
+		{#if overlappingCount > 0 || overlap !== 'all'}
+			<div class="ogcr-overlap-bar mb-2">
+				<p class="ogcr-overlap-note text-body-s">
+					<Layers class="size-4" aria-hidden="true" />
+					{overlappingCount}
+					{overlappingCount === 1 ? 'activity overlaps' : 'activities overlap'} another activity's area
+				</p>
+				<ToggleGroup
+					items={overlapItems}
+					bind:value={overlap}
+					size="s"
+					aria-label="Show activities by overlap"
+				/>
+			</div>
 		{/if}
 		{#if mapped.length > 0}
 			<!-- A quick way in: each name zooms the map to that parcel, with every other area
@@ -291,7 +318,7 @@
 		{/if}
 		<RegistryActivitiesMap
 			bind:this={activitiesMap}
-			activities={filtered}
+			activities={mapped}
 			areas={data.areas}
 			class="ogcr-map"
 		/>
@@ -468,6 +495,12 @@
 		border-color: var(--border-warning-strong);
 		color: var(--text-warning);
 	}
+	.ogcr-overlap-bar {
+		display: flex;
+		flex-wrap: wrap;
+		align-items: center;
+		gap: var(--space-s);
+	}
 	.ogcr-overlap-note {
 		display: flex;
 		align-items: center;