frontend: Allow filtering for orphaned associations

With the association count filters in place we may now also allow the
user to filter for associations that do not have a matching counterparts
(artists without a comic, for example).

1 files changed, 24 insertions, 0 deletions

diff --git a/frontend/src/lib/toolbar/FilterOrphaned.svelte b/frontend/src/lib/toolbar/FilterOrphaned.svelte
new file mode 100644
index 0000000..7e79be1
--- /dev/null
+++ b/frontend/src/lib/toolbar/FilterOrphaned.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+	import { page } from '$app/state';
+	import { BasicFilterContext, NamespaceFilterContext } from '$lib/Filter.svelte';
+	import { accelerator } from '$lib/Shortcuts';
+	import Orphan from '$lib/icons/Orphan.svelte';
+
+	let { filter }: { filter: BasicFilterContext | NamespaceFilterContext } = $props();
+	let orphaned = $derived(filter.include.orphan.value);
+
+	const toggle = () => {
+		filter.include.orphan.value = !orphaned;
+		filter.apply(page.url.searchParams);
+	};
+</script>
+
+<button
+	class:toggled={orphaned}
+	class="btn-slate"
+	title="Filter orphaned"
+	onclick={toggle}
+	use:accelerator={'r'}
+>
+	<Orphan {orphaned} />
+</button>