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

<script lang="ts">
	import { page } from '$app/stores';
	import { getFilterContext } from '$lib/Filter';
	import { navigate } from '$lib/Navigation';
	import { slideXFast } from '$lib/Transitions';
	import Badge from '$lib/components/Badge.svelte';
	import { slide } from 'svelte/transition';
	import { getToolbarContext } from './Toolbar.svelte';

	const toolbar = getToolbarContext();
	const filter = getFilterContext();
</script>

<div class="rounded-group flex">
	<button
		class:toggled={$toolbar.expand}
		class="btn-slate relative"
		title={`${$toolbar.expand ? 'Hide' : 'Show'} filters`}
		on:click={() => ($toolbar.expand = !$toolbar.expand)}
	>
		{#if $toolbar.expand}
			<span class="icon-base icon-[material-symbols--filter-alt]" />
		{:else}
			<span class="icon-base icon-[material-symbols--filter-alt-outline]" />
		{/if}
		<Badge number={$filter.include.size + $filter.exclude.size} />
	</button>
	{#if $filter.include.size + $filter.exclude.size > 0}
		<button
			class="btn-slate relative hover:bg-rose-700"
			on:click={() => navigate({ filter: {} }, $page.url.searchParams)}
			transition:slide={slideXFast}
			title="Reset filters"
		>
			<div class="flex">
				<span class="icon-base icon-[material-symbols--filter-alt-off]" />
			</div>
		</button>
	{/if}
</div>