frontend: Migrate to Tailwind 4.0

3 files changed, 10 insertions, 37 deletions

diff --git a/frontend/src/lib/filter/ComicFilterForm.svelte b/frontend/src/lib/filter/ComicFilterForm.svelte
index 7f0058d..8bf7af3 100644
--- a/frontend/src/lib/filter/ComicFilterForm.svelte
+++ b/frontend/src/lib/filter/ComicFilterForm.svelte
@@ -25,13 +25,7 @@
 
 <FilterForm type="grid" apply={filter.apply} expanded={filter.excludes > 0}>
 	{#snippet include(type)}
-		<Filter
-			{type}
-			title="Tags"
-			options={tags}
-			filter={filter.include.tags}
-			--grid-column="span 2"
-		/>
+		<Filter {type} wide title="Tags" options={tags} filter={filter.include.tags} />
 		<Filter {type} title="Artists" options={artists} filter={filter.include.artists} />
 		<Filter {type} title="Circles" options={circles} filter={filter.include.circles} />
 		<Filter {type} title="Characters" options={characters} filter={filter.include.characters} />
@@ -42,13 +36,7 @@
 		<Filter {type} title="Languages" options={languages} filter={filter.include.languages} />
 	{/snippet}
 	{#snippet exclude(type)}
-		<Filter
-			{type}
-			title="Tags"
-			options={tags}
-			filter={filter.exclude.tags}
-			--grid-column="span 2"
-		/>
+		<Filter {type} wide title="Tags" options={tags} filter={filter.exclude.tags} />
 		<Filter {type} title="Artists" options={artists} filter={filter.exclude.artists} />
 		<Filter {type} title="Circles" options={circles} filter={filter.exclude.circles} />
 		<Filter {type} title="Characters" options={characters} filter={filter.exclude.characters} />
diff --git a/frontend/src/lib/filter/components/Filter.svelte b/frontend/src/lib/filter/components/Filter.svelte
index c164cbb..4b39589 100644
--- a/frontend/src/lib/filter/components/Filter.svelte
+++ b/frontend/src/lib/filter/components/Filter.svelte
@@ -8,15 +8,16 @@
 		type: FilterType;
 		options: ListItem[] | undefined;
 		filter: Association<string> | Enum<string>;
+		wide?: boolean;
 	}
 
-	let { title, type, options, filter }: Props = $props();
+	let { title, type, options, filter, wide = false }: Props = $props();
 	let exclude = $derived(type === 'exclude');
 
 	const id = `${type}-${title.toLowerCase()}`;
 </script>
 
-<div class:exclude class="filter-container">
+<div class:exclude class:wide class="filter-container [&.wide]:col-span-2">
 	<div class="flex gap-2">
 		<label for={id}>{title}</label>
 		<div class="ml-auto flex items-center gap-1 self-center text-xs">
@@ -25,7 +26,7 @@
 					type="button"
 					title="matches all"
 					class:active={filter.mode === 'all'}
-					class="btn btn-xs"
+					class="btn-xs hover:bg-slate-700 [&.active]:bg-indigo-800"
 					onclick={() => (filter.mode = 'all')}
 				>
 					&forall;
@@ -34,7 +35,7 @@
 					type="button"
 					title="matches any of"
 					class:active={filter.mode === 'any'}
-					class="btn btn-xs"
+					class="btn-xs hover:bg-slate-700 [&.active]:bg-indigo-800"
 					onclick={() => (filter.mode = 'any')}
 				>
 					&exist;
@@ -43,7 +44,7 @@
 					type="button"
 					title="matches exactly"
 					class:active={filter.mode === 'exact'}
-					class="btn btn-xs"
+					class="btn-xs hover:bg-slate-700 [&.active]:bg-indigo-800"
 					onclick={() => (filter.mode = 'exact')}
 				>
 					&equals;
@@ -54,7 +55,7 @@
 				type="button"
 				title="empty"
 				class:active={filter.empty}
-				class="btn btn-xs"
+				class="btn-xs hover:bg-slate-700 [&.active]:bg-indigo-800"
 				onclick={() => (filter.empty = !filter.empty)}
 			>
 				&empty;
@@ -63,17 +64,3 @@
 	</div>
 	<Select multi clearable {options} {id} bind:value={filter.values} />
 </div>
-
-<style lang="postcss">
-	button:hover {
-		@apply bg-slate-700;
-	}
-
-	button.active {
-		@apply bg-indigo-800;
-	}
-
-	.filter-container {
-		grid-column: var(--grid-column);
-	}
-</style>
diff --git a/frontend/src/lib/filter/components/FilterForm.svelte b/frontend/src/lib/filter/components/FilterForm.svelte
index ed58ed9..a32faf8 100644
--- a/frontend/src/lib/filter/components/FilterForm.svelte
+++ b/frontend/src/lib/filter/components/FilterForm.svelte
@@ -38,9 +38,7 @@
 			</div>
 		{/if}
 	{:else}
-		<div
-			class="flex flex-wrap justify-center gap-2 [&>*]:basis-full xl:[&>*]:basis-1/3 2xl:[&>*]:basis-1/5"
-		>
+		<div class="flex flex-wrap justify-center gap-2 *:basis-full xl:*:basis-1/3 2xl:*:basis-1/5">
 			<div class="p-2">
 				{@render include?.('include')}
 			</div>