path: root/frontend/src/lib/toolbar/FilterOrphaned.svelte

<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>