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.

3 files changed, 34 insertions, 84 deletions

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>