frontend: Simplify Pill handling

Where before we handled the styling of pills (such as their icons and
colours) in multiple different places, instead centralize all of this in
the base Pill component.

13 files changed, 44 insertions, 102 deletions

diff --git a/frontend/src/lib/components/ComicCard.svelte b/frontend/src/lib/components/ComicCard.svelte
index cb73e97..1a648b2 100644
--- a/frontend/src/lib/components/ComicCard.svelte
+++ b/frontend/src/lib/components/ComicCard.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { ComicFragment } from '$gql/graphql';
-	import AssociationPill from '$lib/pills/AssociationPill.svelte';
 	import FooterPill from '$lib/pills/FooterPill.svelte';
+	import Pill from '$lib/pills/Pill.svelte';
 	import TagPill from '$lib/pills/TagPill.svelte';
 	import { type Snippet } from 'svelte';
 	import Card from './Card.svelte';
@@ -30,20 +30,20 @@
 		{#if comic.artists.length || comic.circles.length}
 			<div class="flex flex-wrap gap-1">
 				{#each comic.artists as { name } (name)}
-					<AssociationPill {name} type="artist" />
+					<Pill {name} style="artist" />
 				{/each}
 				{#each comic.circles as { name } (name)}
-					<AssociationPill {name} type="circle" />
+					<Pill {name} style="circle" />
 				{/each}
 			</div>
 		{/if}
 		{#if comic.characters.length || comic.worlds.length}
 			<div class="flex flex-wrap gap-1">
 				{#each comic.worlds as { name } (name)}
-					<AssociationPill {name} type="world" />
+					<Pill {name} style="world" />
 				{/each}
 				{#each comic.characters as { name } (name)}
-					<AssociationPill {name} type="character" />
+					<Pill {name} style="character" />
 				{/each}
 			</div>
 		{/if}
diff --git a/frontend/src/lib/icons/Artist.svelte b/frontend/src/lib/icons/Artist.svelte
deleted file mode 100644
index 04886ce..0000000
--- a/frontend/src/lib/icons/Artist.svelte
+++ /dev/null
@@ -1 +0,0 @@
-<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
deleted file mode 100644
index fbb3ecc..0000000
--- a/frontend/src/lib/icons/Character.svelte
+++ /dev/null
@@ -1 +0,0 @@
-<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
deleted file mode 100644
index b54135c..0000000
--- a/frontend/src/lib/icons/Circle.svelte
+++ /dev/null
@@ -1 +0,0 @@
-<span class="icon-xs icon-[material-symbols--group] mx-px"></span>
diff --git a/frontend/src/lib/icons/Female.svelte b/frontend/src/lib/icons/Female.svelte
deleted file mode 100644
index 7bc422b..0000000
--- a/frontend/src/lib/icons/Female.svelte
+++ /dev/null
@@ -1 +0,0 @@
-<span class="icon-xs icon-[material-symbols--female] -mx-[3px]"></span>
diff --git a/frontend/src/lib/icons/Location.svelte b/frontend/src/lib/icons/Location.svelte
deleted file mode 100644
index d785832..0000000
--- a/frontend/src/lib/icons/Location.svelte
+++ /dev/null
@@ -1 +0,0 @@
-<span class="icon-xs icon-[material-symbols--location-on-outline]"></span>
diff --git a/frontend/src/lib/icons/Male.svelte b/frontend/src/lib/icons/Male.svelte
deleted file mode 100644
index 8c72c47..0000000
--- a/frontend/src/lib/icons/Male.svelte
+++ /dev/null
@@ -1 +0,0 @@
-<span class="icon-xs icon-[material-symbols--male] -mx-px"></span>
diff --git a/frontend/src/lib/icons/Transgender.svelte b/frontend/src/lib/icons/Transgender.svelte
deleted file mode 100644
index fa7d38b..0000000
--- a/frontend/src/lib/icons/Transgender.svelte
+++ /dev/null
@@ -1 +0,0 @@
-<span class="icon-xs icon-[material-symbols--transgender]"></span>
diff --git a/frontend/src/lib/icons/World.svelte b/frontend/src/lib/icons/World.svelte
deleted file mode 100644
index 2d0320f..0000000
--- a/frontend/src/lib/icons/World.svelte
+++ /dev/null
@@ -1 +0,0 @@
-<span class="icon-xs icon-[material-symbols--public]"></span>
diff --git a/frontend/src/lib/pills/AssociationPill.svelte b/frontend/src/lib/pills/AssociationPill.svelte
deleted file mode 100644
index fec59b8..0000000
--- a/frontend/src/lib/pills/AssociationPill.svelte
+++ /dev/null
@@ -1,27 +0,0 @@
-<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()}
-		<Icon />
-	{/snippet}
-</Pill>
diff --git a/frontend/src/lib/pills/Pill.svelte b/frontend/src/lib/pills/Pill.svelte
index e7c6a8f..494cbe4 100644
--- a/frontend/src/lib/pills/Pill.svelte
+++ b/frontend/src/lib/pills/Pill.svelte
@@ -1,49 +1,58 @@
-<script lang="ts" module>
-	export type PillColour = 'pink' | 'blue' | 'violet' | 'amber' | 'zinc' | 'sky';
-</script>
-
 <script lang="ts">
-	import type { Snippet } from 'svelte';
-
 	interface Props {
 		name: string;
 		tooltip?: string | null;
-		colour?: PillColour;
-		icon?: Snippet;
+		style: string;
 	}
 
-	let { name, tooltip, colour = 'zinc', icon }: Props = $props();
+	let { name, tooltip, style }: Props = $props();
 </script>
 
-<div class="flex items-center rounded-sm border p-0.5 {colour}" title={tooltip}>
-	{@render icon?.()}
+<div class="flex items-center rounded-sm border p-0.5 {style}" title={tooltip}>
+	{#if style === 'female'}
+		<span class="icon-xs icon-[material-symbols--female] -mx-[3px]"></span>
+	{:else if style === 'male'}
+		<span class="icon-xs icon-[material-symbols--male] -mx-px"></span>
+	{:else if style === 'trans'}
+		<span class="icon-xs icon-[material-symbols--transgender]"></span>
+	{:else if style === 'location'}
+		<span class="icon-xs icon-[material-symbols--location-on-outline]"></span>
+	{:else if style === 'artist'}
+		<span class="icon-xs icon-[material-symbols--person] -mx-px"></span>
+	{:else if style === 'character'}
+		<span class="icon-xs icon-[material-symbols--face]"></span>
+	{:else if style === 'circle'}
+		<span class="icon-xs icon-[material-symbols--group] mx-px"></span>
+	{:else if style === 'world'}
+		<span class="icon-xs icon-[material-symbols--public]"></span>
+	{/if}
 	<span>{name}</span>
 </div>
 
 <style lang="postcss">
 	@reference "tailwindcss/theme";
 
-	.pink {
+	div {
+		@apply border-zinc-700 bg-zinc-700/20 text-zinc-300;
+	}
+
+	.female {
 		@apply border-pink-800 bg-pink-800/20 text-pink-200;
 	}
 
-	.blue {
+	.male {
 		@apply border-blue-800 bg-blue-800/20 text-blue-200;
 	}
 
-	.violet {
+	.trans {
 		@apply border-violet-800 bg-violet-800/20 text-violet-200;
 	}
 
-	.amber {
+	.mixed {
 		@apply border-amber-800 bg-amber-800/20 text-amber-200;
 	}
 
-	.sky {
+	.location {
 		@apply border-sky-800 bg-sky-800/20 text-sky-200;
 	}
-
-	.zinc {
-		@apply border-zinc-700 bg-zinc-700/20 text-zinc-300;
-	}
 </style>
diff --git a/frontend/src/lib/pills/TagPill.svelte b/frontend/src/lib/pills/TagPill.svelte
index 92d2a0b..17e4b25 100644
--- a/frontend/src/lib/pills/TagPill.svelte
+++ b/frontend/src/lib/pills/TagPill.svelte
@@ -1,43 +1,11 @@
 <script lang="ts">
-	import Female from '$lib/icons/Female.svelte';
-	import Location from '$lib/icons/Location.svelte';
-	import Male from '$lib/icons/Male.svelte';
-	import Transgender from '$lib/icons/Transgender.svelte';
-	import type { Component } from 'svelte';
-	import Pill, { type PillColour } from './Pill.svelte';
+	import type { ComicTag } from '$gql/graphql';
+	import Pill from './Pill.svelte';
 
-	let { name, description }: { name: string; description?: string | null } = $props();
+	let { name, description }: Pick<ComicTag, 'name' | 'description'> = $props();
 
 	let [namespace, tag] = name.split(':');
-
-	const styles: Record<string, PillColour> = {
-		female: 'pink',
-		male: 'blue',
-		trans: 'violet',
-		mixed: 'amber',
-		location: 'sky',
-		rest: 'zinc'
-	};
-
-	const icons: Record<string, Component> = {
-		female: Female,
-		male: Male,
-		trans: Transgender,
-		location: Location
-	};
-
-	const colour = styles[namespace] ?? styles.rest;
-	const Icon = icons[namespace];
-
-	function formatTooltip() {
-		return [name, description].filter((v) => v).join('\n\n');
-	}
+	let tooltip = [name, description].filter((v) => v).join('\n\n');
 </script>
 
-<Pill name={tag} tooltip={formatTooltip()} {colour}>
-	{#snippet icon()}
-		{#if Icon}
-			<Icon />
-		{/if}
-	{/snippet}
-</Pill>
+<Pill name={tag} style={namespace} {tooltip}></Pill>
diff --git a/frontend/src/lib/tabs/ComicDetails.svelte b/frontend/src/lib/tabs/ComicDetails.svelte
index 89eb053..9992c82 100644
--- a/frontend/src/lib/tabs/ComicDetails.svelte
+++ b/frontend/src/lib/tabs/ComicDetails.svelte
@@ -3,7 +3,7 @@
 	import { CategoryLabel, CensorshipLabel, LanguageLabel, RatingLabel } from '$lib/Enums';
 	import { href } from '$lib/Navigation';
 	import { formatListSize, joinText } from '$lib/Utils';
-	import AssociationPill from '$lib/pills/AssociationPill.svelte';
+	import Pill from '$lib/pills/Pill.svelte';
 	import TagPill from '$lib/pills/TagPill.svelte';
 	import { formatDistance, formatISO9075 } from 'date-fns';
 	import Header from './DetailsHeader.svelte';
@@ -87,7 +87,7 @@
 		<Section title="Artists">
 			{#each comic.artists as { id, name } (id)}
 				<a href={filterFor('artists', id)}>
-					<AssociationPill {name} type="artist" />
+					<Pill {name} style="artist" />
 				</a>
 			{/each}
 		</Section>
@@ -96,7 +96,7 @@
 		<Section title="Circles">
 			{#each comic.circles as { id, name } (id)}
 				<a href={filterFor('circles', id)}>
-					<AssociationPill {name} type="circle" />
+					<Pill {name} style="circle" />
 				</a>
 			{/each}
 		</Section>
@@ -105,7 +105,7 @@
 		<Section title="Characters">
 			{#each comic.characters as { id, name } (id)}
 				<a href={filterFor('characters', id)}>
-					<AssociationPill {name} type="character" />
+					<Pill {name} style="character" />
 				</a>
 			{/each}
 		</Section>
@@ -114,7 +114,7 @@
 		<Section title="Worlds">
 			{#each comic.worlds as { id, name } (id)}
 				<a href={filterFor('worlds', id)}>
-					<AssociationPill {name} type="world" />
+					<Pill {name} style="world" />
 				</a>
 			{/each}
 		</Section>