update database pages to use image utils

src/routes/database/characters/[id]/+page.svelte

@@ -18,6 +18,7 @@
 	import DetailItem from '$lib/components/ui/DetailItem.svelte'
 	import DetailsHeader from '$lib/components/ui/DetailsHeader.svelte'
 	import Button from '$lib/components/ui/Button.svelte'
+	import { getCharacterImage } from '$lib/utils/images'
 
 	// Types
 	import type { PageData } from './$types'
@@ -182,9 +183,9 @@
 	}
 
 	// Helper function to get character image
-	function getCharacterImage(character: any): string {
+	// Helper function for character grid image
-		if (!character?.granblueId) return '/images/placeholders/placeholder-character-main.png'
+	function getCharacterGridImage(character: any): string {
-		return `/images/character-grid/${character.granblueId}_01.jpg`
+		return getCharacterImage(character?.granblueId, 'grid', '01')
 	}
 
 	// Calculate uncap properties for the indicator
@@ -208,7 +209,7 @@
 			<DetailsHeader
 				type="character"
 				item={character}
-				image={getCharacterImage(character)}
+				image={getCharacterGridImage(character)}
 				onEdit={toggleEditMode}
 				showEdit={canEdit}
 				{editMode}

src/routes/database/summons/[id]/+page.svelte

@@ -4,6 +4,7 @@
 	import { goto } from '$app/navigation'
 	import { getRarityLabel } from '$lib/utils/rarity'
 	import { getElementLabel, getElementIcon } from '$lib/utils/element'
+	import { getSummonImage } from '$lib/utils/images'
 	import UncapIndicator from '$lib/components/uncap/UncapIndicator.svelte'
 	import DetailsContainer from '$lib/components/ui/DetailsContainer.svelte'
 	import DetailItem from '$lib/components/ui/DetailItem.svelte'
@@ -15,10 +16,9 @@
 	// Get summon from server data
 	const summon = $derived(data.summon)
 
-	// Helper function to get summon image
+	// Helper function to get summon grid image
-	function getSummonImage(summon: any): string {
+	function getSummonGridImage(summon: any): string {
-		if (!summon?.granblueId) return '/images/placeholders/placeholder-summon-main.png'
+		return getSummonImage(summon?.granblueId, 'grid')
-		return `/images/summon-grid/${summon.granblueId}.jpg`
 	}
 
 	// Calculate uncap properties for the indicator
@@ -41,7 +41,7 @@
 <div class="summon-detail">
 	{#if summon}
 		<div class="summon-content">
-			<DetailsHeader type="summon" item={summon} image={getSummonImage(summon)} />
+			<DetailsHeader type="summon" item={summon} image={getSummonGridImage(summon)} />
 
 			<DetailsContainer title="HP Stats">
 				<DetailItem label="Base HP" value={summon.hp?.minHp} />

src/routes/database/weapons/[id]/+page.svelte

@@ -5,6 +5,7 @@
 	import { getRarityLabel } from '$lib/utils/rarity'
 	import { getElementLabel, getElementIcon } from '$lib/utils/element'
 	import { getProficiencyLabel, getProficiencyIcon } from '$lib/utils/proficiency'
+	import { getWeaponGridImage } from '$lib/utils/images'
 	import UncapIndicator from '$lib/components/uncap/UncapIndicator.svelte'
 	import DetailsContainer from '$lib/components/ui/DetailsContainer.svelte'
 	import DetailItem from '$lib/components/ui/DetailItem.svelte'
@@ -16,15 +17,9 @@
 	// Get weapon from server data
 	const weapon = $derived(data.weapon)
 
-	// Helper function to get weapon image
+	// Helper function to get weapon grid image
 	function getWeaponImage(weapon: any): string {
-		if (!weapon?.granblueId) return '/images/placeholders/placeholder-weapon-main.png'
+		return getWeaponGridImage(weapon?.granblueId, weapon?.element, weapon?.instanceElement)
-
-		// Handle element-specific weapons (primal weapons)
-		if (weapon.element === 0 && weapon.instanceElement) {
-			return `/images/weapon-grid/${weapon.granblueId}_${weapon.instanceElement}.jpg`
-		}
-		return `/images/weapon-grid/${weapon.granblueId}.jpg`
 	}
 
 	// Calculate uncap properties for the indicator