migrate database detail pages to use TanStack Query

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

@@ -4,6 +4,11 @@
 	// SvelteKit imports
 	import { goto } from '$app/navigation'
 
+	// TanStack Query
+	import { createQuery } from '@tanstack/svelte-query'
+	import { entityQueries } from '$lib/api/queries/entity.queries'
+	import { withInitialData } from '$lib/query/ssr'
+
 	// Utility functions
 	import { getRarityLabel, getRarityOptions } from '$lib/utils/rarity'
 	import { getElementLabel, getElementOptions } from '$lib/utils/element'
@@ -25,8 +30,14 @@
 
 	let { data }: { data: PageData } = $props()
 
-	// Get character from server data
+	// Use TanStack Query with SSR initial data
-	const character = $derived(data.character)
+	const characterQuery = createQuery(() => ({
+		...entityQueries.character(data.character?.id ?? ''),
+		...withInitialData(data.character)
+	}))
+
+	// Get character from query
+	const character = $derived(characterQuery.data)
 	const userRole = $derived(data.role || 0)
 	const canEdit = $derived(userRole >= 7)
 

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

@@ -2,9 +2,18 @@
 
 <script lang="ts">
 	import { goto } from '$app/navigation'
+
+	// TanStack Query
+	import { createQuery } from '@tanstack/svelte-query'
+	import { entityQueries } from '$lib/api/queries/entity.queries'
+	import { withInitialData } from '$lib/query/ssr'
+
+	// Utilities
 	import { getRarityLabel } from '$lib/utils/rarity'
 	import { getElementLabel, getElementIcon } from '$lib/utils/element'
 	import { getSummonImage } from '$lib/utils/images'
+
+	// Components
 	import UncapIndicator from '$lib/components/uncap/UncapIndicator.svelte'
 	import DetailsContainer from '$lib/components/ui/DetailsContainer.svelte'
 	import DetailItem from '$lib/components/ui/DetailItem.svelte'
@@ -13,8 +22,14 @@
 
 	let { data }: { data: PageData } = $props()
 
-	// Get summon from server data
+	// Use TanStack Query with SSR initial data
-	const summon = $derived(data.summon)
+	const summonQuery = createQuery(() => ({
+		...entityQueries.summon(data.summon?.id ?? ''),
+		...withInitialData(data.summon)
+	}))
+
+	// Get summon from query
+	const summon = $derived(summonQuery.data)
 
 	// Helper function to get summon grid image
 	function getSummonGridImage(summon: any): string {

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

@@ -2,10 +2,19 @@
 
 <script lang="ts">
 	import { goto } from '$app/navigation'
+
+	// TanStack Query
+	import { createQuery } from '@tanstack/svelte-query'
+	import { entityQueries } from '$lib/api/queries/entity.queries'
+	import { withInitialData } from '$lib/query/ssr'
+
+	// Utilities
 	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'
+
+	// Components
 	import UncapIndicator from '$lib/components/uncap/UncapIndicator.svelte'
 	import DetailsContainer from '$lib/components/ui/DetailsContainer.svelte'
 	import DetailItem from '$lib/components/ui/DetailItem.svelte'
@@ -14,8 +23,14 @@
 
 	let { data }: { data: PageData } = $props()
 
-	// Get weapon from server data
+	// Use TanStack Query with SSR initial data
-	const weapon = $derived(data.weapon)
+	const weaponQuery = createQuery(() => ({
+		...entityQueries.weapon(data.weapon?.id ?? ''),
+		...withInitialData(data.weapon)
+	}))
+
+	// Get weapon from query
+	const weapon = $derived(weaponQuery.data)
 
 	// Helper function to get weapon grid image
 	function getWeaponImage(weapon: any): string {