From d5a2d4e4c8abf09229a21ece65040b8ac2da6845 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Mon, 15 Dec 2025 19:23:04 -0800
Subject: [PATCH] add element tag to related characters section

---
 src/lib/components/tags/CharacterTag.svelte         | 13 ++++++++++---
 .../database/characters/[granblueId]/+page.svelte   |  2 ++
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/lib/components/tags/CharacterTag.svelte b/src/lib/components/tags/CharacterTag.svelte
index c44264e3..be37b69c 100644
--- a/src/lib/components/tags/CharacterTag.svelte
+++ b/src/lib/components/tags/CharacterTag.svelte
@@ -1,16 +1,23 @@
 <svelte:options runes={true} />
 
 <script lang="ts">
-	import type { Character } from '$lib/types/api/entities'
 	import type { CharacterSeriesRef } from '$lib/types/api/characterSeries'
 	import { getElementLabel } from '$lib/utils/element'
 	import { CHARACTER_SEASON_NAMES, CHARACTER_SERIES_NAMES } from '$lib/types/enums'
 
 	type TagType = 'element' | 'season' | 'series'
 
+	/** Minimal character data needed for tag display */
+	interface CharacterForTag {
+		element?: number | null
+		season?: number | null
+		series?: (number | CharacterSeriesRef)[] | null
+		seriesNames?: string[] | null
+	}
+
 	interface Props {
 		/** The character to display the tag for */
-		character: Character
+		character: CharacterForTag
 		/** Which characteristic to display */
 		type: TagType
 		/** Optional specific series index to display (for multi-series characters) */
@@ -44,7 +51,7 @@
 	const displayText = $derived.by(() => {
 		switch (type) {
 			case 'element':
-				return getElementLabel(character.element)
+				return getElementLabel(character.element ?? undefined)
 
 			case 'season':
 				if (character.season === undefined || character.season === null) return null
diff --git a/src/routes/(app)/database/characters/[granblueId]/+page.svelte b/src/routes/(app)/database/characters/[granblueId]/+page.svelte
index de8c3f04..7b5ef017 100644
--- a/src/routes/(app)/database/characters/[granblueId]/+page.svelte
+++ b/src/routes/(app)/database/characters/[granblueId]/+page.svelte
@@ -37,6 +37,7 @@
 		buildKamigameUrl
 	} from '$lib/utils/external-links'
 	import Button from '$lib/components/ui/Button.svelte'
+	import CharacterTag from '$lib/components/tags/CharacterTag.svelte'
 
 	// Types
 	import type { PageData } from './$types'
@@ -324,6 +325,7 @@
 											class="related-image"
 										/>
 										<span class="related-name">{related.name.en}</span>
+										<CharacterTag character={related} type="element" />
 									</a>
 								{/each}
 							</div>