<script lang="ts">
	import { page } from '$app/stores';
	import { ComicFilterContext, cycleBooleanFilter, getFilterContext } from '$lib/Filter';
	import { accelerator } from '$lib/Shortcuts';
	import Bookmark from '$lib/icons/Bookmark.svelte';

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

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

<button
	class:toggled={bookmarked}
	class="btn-slate"
	title="Filter bookmarked"
	on:click={toggle}
	use:accelerator={'b'}
>
	<Bookmark {bookmarked} />
</button>
