From bcae21a8dee949303749d81052a154be5e7daf01 Mon Sep 17 00:00:00 2001
From: Wolfgang Müller
Date: Wed, 26 Feb 2025 16:47:22 +0100
Subject: 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.
---
 frontend/src/lib/pills/Pill.svelte    | 29 +++++++++++++++++++++++++++--
 frontend/src/lib/pills/TagPill.svelte |  8 ++++++--
 2 files changed, 33 insertions(+), 4 deletions(-)

(limited to 'frontend/src/lib/pills')

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>
-- 
cgit v1.2.3-2-gb3c3