summaryrefslogtreecommitdiffstatshomepage
path: root/frontend/src/lib/toolbar/FilterOrganized.svelte
blob: 754e6632b681a72f38259048f82519301a916b7a (plain) (blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<script lang="ts">
	import { page } from '$app/stores';
	import {
		ArchiveFilterContext,
		ComicFilterContext,
		cycleBooleanFilter,
		getFilterContext
	} from '$lib/Filter';
	import { accelerator } from '$lib/Shortcuts';
	import Organized from '$lib/icons/Organized.svelte';

	const filter = getFilterContext<ArchiveFilterContext | ComicFilterContext>();
	$: organized = $filter.include.controls.organized.value;

	const toggle = () => {
		$filter.include.controls.organized.value = cycleBooleanFilter(organized);
		$filter.apply($page.url.searchParams);
	};
</script>

<button
	type="button"
	class:toggled={organized !== undefined}
	class="btn-slate"
	title="Filter organized"
	on:click={toggle}
	use:accelerator={'o'}
>
	<Organized tristate {organized} />
</button>