frontend: Allow Pills to be highlighted when hovered

This gives better visual feedback, especially in the ComicDetails tab
where clicking on a Pill is a separate action.

3 files changed, 38 insertions, 9 deletions

diff --git a/frontend/src/lib/pills/Pill.svelte b/frontend/src/lib/pills/Pill.svelte
index 494cbe4..98d9b5a 100644
--- a/frontend/src/lib/pills/Pill.svelte
+++ b/frontend/src/lib/pills/Pill.svelte
@@ -3,12 +3,13 @@
 		name: string;
 		tooltip?: string | null;
 		style: string;
+		highlight?: boolean;
 	}
 
-	let { name, tooltip, style }: Props = $props();
+	let { name, tooltip, style, highlight = false }: Props = $props();
 </script>
 
-<div class="flex items-center rounded-sm border p-0.5 {style}" title={tooltip}>
+<div class:highlight 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'}
@@ -36,23 +37,47 @@
 		@apply border-zinc-700 bg-zinc-700/20 text-zinc-300;
 	}
 
+	div.highlight {
+		@apply transition-colors hover:border-zinc-600 hover:bg-zinc-500/20 hover:text-zinc-200;
+	}
+
 	.female {
 		@apply border-pink-800 bg-pink-800/20 text-pink-200;
 	}
 
+	.female.highlight {
+		@apply hover:border-pink-700 hover:bg-pink-600/20 hover:text-pink-100;
+	}
+
 	.male {
 		@apply border-blue-800 bg-blue-800/20 text-blue-200;
 	}
 
+	.male.highlight {
+		@apply hover:border-blue-700 hover:bg-blue-600/20 hover:text-blue-100;
+	}
+
 	.trans {
 		@apply border-violet-800 bg-violet-800/20 text-violet-200;
 	}
 
+	.trans.highlight {
+		@apply hover:border-violet-600 hover:bg-violet-600/20 hover:text-violet-100;
+	}
+
 	.mixed {
 		@apply border-amber-800 bg-amber-800/20 text-amber-200;
 	}
 
+	.mixed.highlight {
+		@apply hover:border-amber-700 hover:bg-amber-600/20 hover:text-amber-100;
+	}
+
 	.location {
 		@apply border-sky-800 bg-sky-800/20 text-sky-200;
 	}
+
+	.location.highlight {
+		@apply hover:border-sky-700 hover:bg-sky-600/20 hover:text-sky-100;
+	}
 </style>
diff --git a/frontend/src/lib/pills/TagPill.svelte b/frontend/src/lib/pills/TagPill.svelte
index 17e4b25..c97c722 100644
--- a/frontend/src/lib/pills/TagPill.svelte
+++ b/frontend/src/lib/pills/TagPill.svelte
@@ -2,10 +2,14 @@
 	import type { ComicTag } from '$gql/graphql';
 	import Pill from './Pill.svelte';
 
-	let { name, description }: Pick<ComicTag, 'name' | 'description'> = $props();
+	interface Props extends Pick<ComicTag, 'name' | 'description'> {
+		highlight?: boolean;
+	}
+
+	let { name, description, highlight = false }: Props = $props();
 
 	let [namespace, tag] = name.split(':');
 	let tooltip = [name, description].filter((v) => v).join('\n\n');
 </script>
 
-<Pill name={tag} style={namespace} {tooltip}></Pill>
+<Pill {highlight} name={tag} style={namespace} {tooltip}></Pill>
diff --git a/frontend/src/lib/tabs/ComicDetails.svelte b/frontend/src/lib/tabs/ComicDetails.svelte
index 9992c82..3f9090e 100644
--- a/frontend/src/lib/tabs/ComicDetails.svelte
+++ b/frontend/src/lib/tabs/ComicDetails.svelte
@@ -87,7 +87,7 @@
 		<Section title="Artists">
 			{#each comic.artists as { id, name } (id)}
 				<a href={filterFor('artists', id)}>
-					<Pill {name} style="artist" />
+					<Pill highlight {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)}>
-					<Pill {name} style="circle" />
+					<Pill highlight {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)}>
-					<Pill {name} style="character" />
+					<Pill highlight {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)}>
-					<Pill {name} style="world" />
+					<Pill highlight {name} style="world" />
 				</a>
 			{/each}
 		</Section>
@@ -123,7 +123,7 @@
 		<Section title="Tags">
 			{#each comic.tags as { id, name, description } (id)}
 				<a href={filterFor('tags', id)}>
-					<TagPill {name} {description} />
+					<TagPill highlight {name} {description} />
 				</a>
 			{/each}
 		</Section>