From 18c8719b74b1510ad82b686333071bcc10d68e30 Mon Sep 17 00:00:00 2001
From: Wolfgang Müller
Date: Thu, 20 Feb 2025 16:41:10 +0100
Subject: frontend: Remove "Exclude" expander

The following commit will introduce accelerators for each filter field,
creating the need to have all fields visible (since otherwise the
accelerators cannot be bound right away). Therefore, do away with the
"Exclude" expander and show all filters right away.
---
 frontend/src/lib/components/Expander.svelte        | 21 ---------------------
 frontend/src/lib/filter/ComicFilterForm.svelte     |  2 +-
 frontend/src/lib/filter/TagFilterForm.svelte       |  2 +-
 .../src/lib/filter/components/FilterForm.svelte    | 22 +++++++---------------
 4 files changed, 9 insertions(+), 38 deletions(-)
 delete mode 100644 frontend/src/lib/components/Expander.svelte

diff --git a/frontend/src/lib/components/Expander.svelte b/frontend/src/lib/components/Expander.svelte
deleted file mode 100644
index 8f23042..0000000
--- a/frontend/src/lib/components/Expander.svelte
+++ /dev/null
@@ -1,21 +0,0 @@
-<script lang="ts">
-	interface Props {
-		expanded: boolean;
-		title: string;
-	}
-
-	let { expanded = $bindable(), title }: Props = $props();
-
-	function onclick() {
-		expanded = !expanded;
-	}
-</script>
-
-<button class="flex items-center text-base hover:text-white" type="button" {onclick}>
-	{#if expanded}
-		<span class="icon-base icon-[material-symbols--expand-less]"></span>
-	{:else}
-		<span class="icon-base icon-[material-symbols--expand-more]"></span>
-	{/if}
-	{title}
-</button>
diff --git a/frontend/src/lib/filter/ComicFilterForm.svelte b/frontend/src/lib/filter/ComicFilterForm.svelte
index 277edd1..331d571 100644
--- a/frontend/src/lib/filter/ComicFilterForm.svelte
+++ b/frontend/src/lib/filter/ComicFilterForm.svelte
@@ -23,7 +23,7 @@
 	let worlds = $derived($worldsQuery.data?.worlds.edges);
 </script>
 
-<FilterForm type="grid" apply={filter.apply} expanded={filter.excludes > 0}>
+<FilterForm type="grid" apply={filter.apply}>
 	{#snippet include(type)}
 		<Filter {type} wide title="Tags" options={tags} filter={filter.include.tags} />
 		<Filter {type} title="Artists" options={artists} filter={filter.include.artists} />
diff --git a/frontend/src/lib/filter/TagFilterForm.svelte b/frontend/src/lib/filter/TagFilterForm.svelte
index 280db8a..1ca1a2d 100644
--- a/frontend/src/lib/filter/TagFilterForm.svelte
+++ b/frontend/src/lib/filter/TagFilterForm.svelte
@@ -13,7 +13,7 @@
 	let namespaces = $derived($namespaceQuery.data?.namespaces.edges);
 </script>
 
-<FilterForm apply={filter.apply} expanded={filter.excludes > 0}>
+<FilterForm apply={filter.apply}>
 	{#snippet include(type)}
 		<Filter {type} title="Namespaces" options={namespaces} filter={filter.include.namespaces} />
 	{/snippet}
diff --git a/frontend/src/lib/filter/components/FilterForm.svelte b/frontend/src/lib/filter/components/FilterForm.svelte
index a32faf8..717a56d 100644
--- a/frontend/src/lib/filter/components/FilterForm.svelte
+++ b/frontend/src/lib/filter/components/FilterForm.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
 	import { page } from '$app/state';
-	import Expander from '$lib/components/Expander.svelte';
 	import type { FilterType } from '$lib/Filter.svelte';
 	import type { Snippet } from 'svelte';
 
@@ -8,13 +7,10 @@
 		type?: 'grid' | 'row';
 		include?: Snippet<[FilterType]>;
 		exclude?: Snippet<[FilterType]>;
-		expanded: boolean;
 		apply: (params: URLSearchParams) => void;
 	}
 
-	let { type = 'row', include, exclude, expanded: initialExpanded, apply }: Props = $props();
-
-	let expanded = $state(initialExpanded);
+	let { type = 'row', include, exclude, apply }: Props = $props();
 
 	function onsubmit(event: SubmitEvent) {
 		event.preventDefault();
@@ -22,21 +18,17 @@
 	}
 </script>
 
-<form {onsubmit} class="gap-0">
+<form {onsubmit} class="gap-4">
 	{#if type === 'grid'}
 		<div class="flex flex-col gap-4 px-2 md:grid md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6">
 			{@render include?.('include')}
 		</div>
-		<div class="my-2 flex justify-start">
-			<Expander title="Exclude" bind:expanded />
+
+		<div
+			class="flex flex-col gap-4 bg-rose-950/50 p-2 md:grid md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6"
+		>
+			{@render exclude?.('exclude')}
 		</div>
-		{#if expanded}
-			<div
-				class="flex flex-col gap-4 bg-rose-950/50 p-2 md:grid md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6"
-			>
-				{@render exclude?.('exclude')}
-			</div>
-		{/if}
 	{:else}
 		<div class="flex flex-wrap justify-center gap-2 *:basis-full xl:*:basis-1/3 2xl:*:basis-1/5">
 			<div class="p-2">
-- 
cgit v1.2.3-2-gb3c3