frontend: Use joinText in TagPill

We basically already had a function that does what we need here, so
there's no need to reimplement it just for TagPill.

2 files changed, 3 insertions, 2 deletions

diff --git a/frontend/src/lib/Utils.ts b/frontend/src/lib/Utils.ts
index c0e5b6c..df7dad8 100644
--- a/frontend/src/lib/Utils.ts
+++ b/frontend/src/lib/Utils.ts
@@ -93,7 +93,7 @@ export function formatListSize(word: string, size: number) {
 	return `${size} ${pluralize(word, size)}`;
 }
 
-export function joinText(items: string[], separator = ', ') {
+export function joinText(items: (string | undefined | null)[], separator = ', ') {
 	return items.filter((i) => i).join(separator);
 }
 
diff --git a/frontend/src/lib/pills/TagPill.svelte b/frontend/src/lib/pills/TagPill.svelte
index c97c722..bbd3c55 100644
--- a/frontend/src/lib/pills/TagPill.svelte
+++ b/frontend/src/lib/pills/TagPill.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import type { ComicTag } from '$gql/graphql';
+	import { joinText } from '$lib/Utils';
 	import Pill from './Pill.svelte';
 
 	interface Props extends Pick<ComicTag, 'name' | 'description'> {
@@ -9,7 +10,7 @@
 	let { name, description, highlight = false }: Props = $props();
 
 	let [namespace, tag] = name.split(':');
-	let tooltip = [name, description].filter((v) => v).join('\n\n');
+	let tooltip = joinText([name, description], '\n\n');
 </script>
 
 <Pill {highlight} name={tag} style={namespace} {tooltip}></Pill>