frontend: Migrate to Tailwind 4.0

25 files changed, 53 insertions, 106 deletions

diff --git a/frontend/src/lib/components/Badge.svelte b/frontend/src/lib/components/Badge.svelte
index 60cf727..8de5e34 100644
--- a/frontend/src/lib/components/Badge.svelte
+++ b/frontend/src/lib/components/Badge.svelte
@@ -7,7 +7,7 @@
 
 {#if number > 0}
 	<span
-		class="absolute -right-[3px] -top-[6px] z-[1] rounded-sm bg-teal-600 px-1 text-xs font-semibold drop-shadow"
+		class="absolute -top-1.5 -right-1 z-1 rounded-xs bg-teal-600 px-1 text-xs font-semibold drop-shadow-sm"
 		transition:fade={fadeDefault}
 	>
 		{number}
diff --git a/frontend/src/lib/components/Card.svelte b/frontend/src/lib/components/Card.svelte
index 45e1662..8066b42 100644
--- a/frontend/src/lib/components/Card.svelte
+++ b/frontend/src/lib/components/Card.svelte
@@ -49,7 +49,7 @@
 
 <a
 	{href}
-	class="grid-card-v sm:grid-card-h focus-thick focus-blue relative grid overflow-hidden rounded bg-slate-900 shadow-md shadow-slate-950/30"
+	class="grid-card-v sm:grid-card-h focus-thick focus-blue relative grid overflow-hidden rounded-sm bg-slate-900 shadow-md shadow-slate-950/30"
 	class:compact
 	class:grid-card-cover-only={coverOnly}
 	{onclick}
diff --git a/frontend/src/lib/components/Cardlet.svelte b/frontend/src/lib/components/Cardlet.svelte
index d0c0509..cfbbd58 100644
--- a/frontend/src/lib/components/Cardlet.svelte
+++ b/frontend/src/lib/components/Cardlet.svelte
@@ -14,7 +14,7 @@
 
 <button
 	type="button"
-	class="relative flex overflow-hidden rounded bg-slate-900 text-left shadow-md shadow-slate-950/20"
+	class="relative flex overflow-hidden rounded-sm bg-slate-900 text-left shadow-md shadow-slate-950/20"
 	{title}
 	{onclick}
 	{onauxclick}
diff --git a/frontend/src/lib/components/Dropdown.svelte b/frontend/src/lib/components/Dropdown.svelte
index ddd20a0..e2979e6 100644
--- a/frontend/src/lib/components/Dropdown.svelte
+++ b/frontend/src/lib/components/Dropdown.svelte
@@ -28,7 +28,7 @@
 	{@render button(() => (visible = !visible))}
 	{#if visible}
 		<div
-			class="absolute z-[1] mt-1 w-max rounded bg-slate-700 p-1 shadow-sm shadow-slate-900"
+			class="absolute z-1 mt-1 w-max rounded-sm bg-slate-700 p-1 shadow-xs shadow-slate-900"
 			transition:fade={fadeFast}
 		>
 			{@render children?.()}
diff --git a/frontend/src/lib/components/Spinner.svelte b/frontend/src/lib/components/Spinner.svelte
index 1a471a7..d85c4f4 100644
--- a/frontend/src/lib/components/Spinner.svelte
+++ b/frontend/src/lib/components/Spinner.svelte
@@ -9,28 +9,7 @@
 
 {#if show}
 	<div class="flex h-full w-full items-center justify-center">
-		<span class="spinner"></span>
+		<span class="h-16 w-16 animate-spin rounded-full border-4 border-white/80 border-b-transparent"
+		></span>
 	</div>
 {/if}
-
-<style lang="postcss">
-	.spinner {
-		width: 64px;
-		height: 64px;
-		border: 5px solid theme(colors.gray.200);
-		border-bottom-color: transparent;
-		border-radius: 50%;
-		display: inline-block;
-		box-sizing: border-box;
-		animation: rotation 1s linear infinite;
-	}
-
-	@keyframes rotation {
-		0% {
-			transform: rotate(0deg);
-		}
-		100% {
-			transform: rotate(360deg);
-		}
-	}
-</style>
diff --git a/frontend/src/lib/containers/Cardlets.svelte b/frontend/src/lib/containers/Cardlets.svelte
index 5997a69..107ebee 100644
--- a/frontend/src/lib/containers/Cardlets.svelte
+++ b/frontend/src/lib/containers/Cardlets.svelte
@@ -6,7 +6,7 @@
 </script>
 
 <div
-	class="grid gap-4 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 min-[1600px]:grid-cols-8 min-[1920px]:grid-cols-10"
+	class="3xl:grid-cols-10 grid gap-4 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 2xl:grid-cols-8"
 	in:fade={fadeDefault}
 >
 	{@render children?.()}
diff --git a/frontend/src/lib/containers/Cards.svelte b/frontend/src/lib/containers/Cards.svelte
index 36a4b86..ab1f0fb 100644
--- a/frontend/src/lib/containers/Cards.svelte
+++ b/frontend/src/lib/containers/Cards.svelte
@@ -5,6 +5,6 @@
 	let { children } = $props();
 </script>
 
-<div class="grid gap-4 xl:grid-cols-2 min-[1920px]:grid-cols-3" in:fade|global={fadeDefault}>
+<div class="3xl:grid-cols-3 grid gap-4 xl:grid-cols-2" in:fade|global={fadeDefault}>
 	{@render children?.()}
 </div>
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>
diff --git a/frontend/src/lib/gallery/GalleryPage.svelte b/frontend/src/lib/gallery/GalleryPage.svelte
index 3169d6d..f8a81a6 100644
--- a/frontend/src/lib/gallery/GalleryPage.svelte
+++ b/frontend/src/lib/gallery/GalleryPage.svelte
@@ -56,7 +56,7 @@
 	class:dim
 	role="button"
 	tabindex="0"
-	class="{span} focus-thick focus-blue relative overflow-hidden rounded"
+	class="{span} focus-thick focus-blue relative overflow-hidden rounded-sm"
 	onclick={press}
 	onkeydown={press}
 >
diff --git a/frontend/src/lib/icons/Artist.svelte b/frontend/src/lib/icons/Artist.svelte
new file mode 100644
index 0000000..04886ce
--- /dev/null
+++ b/frontend/src/lib/icons/Artist.svelte
@@ -0,0 +1 @@
+<span class="icon-xs icon-[material-symbols--person] -mx-px"></span>
diff --git a/frontend/src/lib/icons/Character.svelte b/frontend/src/lib/icons/Character.svelte
new file mode 100644
index 0000000..fbb3ecc
--- /dev/null
+++ b/frontend/src/lib/icons/Character.svelte
@@ -0,0 +1 @@
+<span class="icon-xs icon-[material-symbols--face]"></span>
diff --git a/frontend/src/lib/icons/Circle.svelte b/frontend/src/lib/icons/Circle.svelte
new file mode 100644
index 0000000..b54135c
--- /dev/null
+++ b/frontend/src/lib/icons/Circle.svelte
@@ -0,0 +1 @@
+<span class="icon-xs icon-[material-symbols--group] mx-px"></span>
diff --git a/frontend/src/lib/icons/World.svelte b/frontend/src/lib/icons/World.svelte
new file mode 100644
index 0000000..2d0320f
--- /dev/null
+++ b/frontend/src/lib/icons/World.svelte
@@ -0,0 +1 @@
+<span class="icon-xs icon-[material-symbols--public]"></span>
diff --git a/frontend/src/lib/pagination/Target.svelte b/frontend/src/lib/pagination/Target.svelte
index 6cbacbb..76e0d9e 100644
--- a/frontend/src/lib/pagination/Target.svelte
+++ b/frontend/src/lib/pagination/Target.svelte
@@ -19,9 +19,8 @@
 
 <button
 	{onclick}
-	class:bg-slate-700={active}
-	class:bg-slate-800={!active}
-	class="flex h-8 w-8 items-center justify-center rounded-sm p-0 text-base hover:text-white disabled:text-slate-600"
+	class:active
+	class="flex h-8 w-8 items-center justify-center rounded-sm p-0 text-base font-medium hover:bg-slate-700/50 hover:text-white disabled:text-slate-600 disabled:hover:bg-inherit [&.active]:bg-slate-700 [&:not(active)]:bg-slate-800"
 	{disabled}
 >
 	{@render children?.()}
diff --git a/frontend/src/lib/pills/AssociationPill.svelte b/frontend/src/lib/pills/AssociationPill.svelte
index ffbc8c4..fec59b8 100644
--- a/frontend/src/lib/pills/AssociationPill.svelte
+++ b/frontend/src/lib/pills/AssociationPill.svelte
@@ -1,31 +1,27 @@
 <script lang="ts">
+	import Artist from '$lib/icons/Artist.svelte';
+	import Character from '$lib/icons/Character.svelte';
+	import Circle from '$lib/icons/Circle.svelte';
+	import World from '$lib/icons/World.svelte';
+	import type { Component } from 'svelte';
 	import Pill from './Pill.svelte';
 
 	type Association = 'artist' | 'circle' | 'world' | 'character';
 
 	let { name, type }: { name: string; type: Association } = $props();
+
+	const icons: Record<Association, Component> = {
+		artist: Artist,
+		character: Character,
+		circle: Circle,
+		world: World
+	};
+
+	const Icon = icons[type];
 </script>
 
 <Pill {name}>
 	{#snippet icon()}
-		<span class={`${type} icon-xs`}></span>
+		<Icon />
 	{/snippet}
 </Pill>
-
-<style lang="postcss">
-	.artist {
-		@apply icon-[material-symbols--person] -mx-px;
-	}
-
-	.character {
-		@apply icon-[material-symbols--face];
-	}
-
-	.circle {
-		@apply icon-[material-symbols--group] mx-px;
-	}
-
-	.world {
-		@apply icon-[material-symbols--public];
-	}
-</style>
diff --git a/frontend/src/lib/pills/Pill.svelte b/frontend/src/lib/pills/Pill.svelte
index 24d617d..5d5b5a8 100644
--- a/frontend/src/lib/pills/Pill.svelte
+++ b/frontend/src/lib/pills/Pill.svelte
@@ -15,12 +15,14 @@
 	let { name, tooltip, colour = 'zinc', icon }: Props = $props();
 </script>
 
-<div class="flex items-center rounded border p-0.5 {colour}" title={tooltip}>
+<div class="flex items-center rounded-sm border p-0.5 {colour}" title={tooltip}>
 	{@render icon?.()}
 	<span>{name}</span>
 </div>
 
 <style lang="postcss">
+	@reference "tailwindcss/theme"
+
 	.pink {
 		@apply border-pink-800 bg-pink-800/20 text-pink-200;
 	}
diff --git a/frontend/src/lib/reader/components/PageIndicator.svelte b/frontend/src/lib/reader/components/PageIndicator.svelte
index 35190b3..3b11389 100644
--- a/frontend/src/lib/reader/components/PageIndicator.svelte
+++ b/frontend/src/lib/reader/components/PageIndicator.svelte
@@ -4,6 +4,6 @@
 	const reader = getReaderContext();
 </script>
 
-<div class="floating !p-2">
+<div class="floating p-2!">
 	{reader.page + 1}/{reader.pages.length}
 </div>
diff --git a/frontend/src/lib/scraper/components/SelectorButton.svelte b/frontend/src/lib/scraper/components/SelectorButton.svelte
index e976f91..48b2d66 100644
--- a/frontend/src/lib/scraper/components/SelectorButton.svelte
+++ b/frontend/src/lib/scraper/components/SelectorButton.svelte
@@ -6,7 +6,7 @@
 
 <button
 	type="button"
-	class="ml-1 flex rounded-sm border-slate-700 bg-slate-900 hover:brightness-110"
+	class="ml-1 flex rounded-xs border-slate-700 bg-slate-900 hover:brightness-110"
 	onclick={selector.toggle}
 >
 	<div class="flex self-center pl-1">
diff --git a/frontend/src/lib/selection/SelectionOverlay.svelte b/frontend/src/lib/selection/SelectionOverlay.svelte
index 97421b0..e172e16 100644
--- a/frontend/src/lib/selection/SelectionOverlay.svelte
+++ b/frontend/src/lib/selection/SelectionOverlay.svelte
@@ -11,9 +11,9 @@
 {#if selected}
 	<div
 		class:items-center={centered}
-		class="{position} pointer-events-none absolute z-[1] flex bg-emerald-700/95"
+		class="{position} pointer-events-none absolute z-1 flex bg-emerald-700/95"
 	>
-		<span class="icon-base icon-[material-symbols--check] text-[2rem]"></span>
+		<span class="icon-[material-symbols--check] text-[2rem]"></span>
 	</div>
 {/if}
 
diff --git a/frontend/src/lib/statistics/StatGroup.svelte b/frontend/src/lib/statistics/StatGroup.svelte
index e84c555..91f8d3d 100644
--- a/frontend/src/lib/statistics/StatGroup.svelte
+++ b/frontend/src/lib/statistics/StatGroup.svelte
@@ -5,7 +5,7 @@
 </script>
 
 <section
-	class="flex flex-col gap-2 rounded bg-slate-900 p-2 font-medium shadow-md shadow-slate-950/30"
+	class="flex flex-col gap-2 rounded-sm bg-slate-900 p-2 font-medium shadow-md shadow-slate-950/30"
 >
 	<h2 class="text-2xl">{title}</h2>
 	<div class="flex flex-row flex-wrap gap-10">
diff --git a/frontend/src/lib/tabs/AddOverlay.svelte b/frontend/src/lib/tabs/AddOverlay.svelte
index 329b259..4d5ec49 100644
--- a/frontend/src/lib/tabs/AddOverlay.svelte
+++ b/frontend/src/lib/tabs/AddOverlay.svelte
@@ -28,7 +28,7 @@
 	<div class="absolute left-1 top-1" transition:fade={fadeDefault}>
 		<button
 			type="button"
-			class="btn-blue rounded-full shadow-sm shadow-black"
+			class="btn-blue rounded-full shadow-xs shadow-black"
 			title="Add to this comic"
 			aria-label="Add to this comic"
 			{onclick}
diff --git a/frontend/src/lib/tabs/Tabs.svelte b/frontend/src/lib/tabs/Tabs.svelte
index 1ae7c32..3c5611e 100644
--- a/frontend/src/lib/tabs/Tabs.svelte
+++ b/frontend/src/lib/tabs/Tabs.svelte
@@ -30,18 +30,18 @@
 
 <div class="flex h-full max-h-full flex-col">
 	<nav>
-		<ul class="me-3 ms-1 flex border-b-2 border-slate-700 text-sm">
+		<ul class="ms-1 me-3 flex border-b-2 border-slate-700 text-sm">
 			{#each Object.entries(context.tabs) as [id, { title }]}
 				<li class="-mb-0.5">
 					<button
 						type="button"
 						class:active={context.current === id}
-						class="focus-background relative flex gap-1 p-1 px-3 hover:border-b-2 hover:border-slate-200"
+						class="relative flex gap-1 p-1 px-3 hover:border-b-2 hover:border-slate-200 [&.active]:border-b-2 [&.active]:border-indigo-500"
 						onclick={() => (context.current = id)}
 					>
 						{#if badges[id]}
 							<div
-								class="absolute right-0 top-1 h-2 w-2 rounded-full bg-emerald-400"
+								class="absolute top-1 right-0 h-2 w-2 rounded-full bg-emerald-400"
 								title="There are pending changes"
 								transition:fade={fadeFast}
 							></div>
@@ -54,9 +54,3 @@
 	</nav>
 	{@render children?.()}
 </div>
-
-<style lang="postcss">
-	button.active {
-		@apply border-b-2 border-indigo-500;
-	}
-</style>
diff --git a/frontend/src/lib/toolbar/MarkSelection.svelte b/frontend/src/lib/toolbar/MarkSelection.svelte
index 1af36ca..8985369 100644
--- a/frontend/src/lib/toolbar/MarkSelection.svelte
+++ b/frontend/src/lib/toolbar/MarkSelection.svelte
@@ -9,7 +9,7 @@
 	{#snippet button(onclick)}
 		<button
 			type="button"
-			class="btn-slate rounded-inherit relative hover:bg-blue-700 [&:not(:only-child)]:bg-blue-700"
+			class="btn-slate rounded-inherit relative not-only:bg-blue-700 hover:bg-blue-700"
 			title="Set flag..."
 			aria-label="Set flag..."
 			{onclick}