Fix database pages and images

- Update DatabaseProvider to use SearchAdapter instead of direct fetch
- Fix RequestCache error by using cacheTTL instead of cache
- Update image cells to use shared image utilities with correct parameters
- Use only camelCase field names (granblueId) from transformed responses

src/lib/api/adapters/search.adapter.ts

@@ -212,7 +212,7 @@ export class SearchAdapter extends BaseAdapter {
 			body: JSON.stringify(body),
 			credentials: 'omit',
 			// Cache search results for 5 minutes by default
-			cache: params.query ? 300000 : 0 // Don't cache empty searches
+			cacheTTL: params.query ? 300000 : 0 // Don't cache empty searches
 		})
 	}
 
@@ -234,7 +234,7 @@ export class SearchAdapter extends BaseAdapter {
 			method: 'POST',
 			body: JSON.stringify(body),
 			credentials: 'omit',
-			cache: params.query ? 300000 : 0
+			cacheTTL: params.query ? 300000 : 0
 		})
 	}
 
@@ -256,7 +256,7 @@ export class SearchAdapter extends BaseAdapter {
 			method: 'POST',
 			body: JSON.stringify(body),
 			credentials: 'omit',
-			cache: params.query ? 300000 : 0
+			cacheTTL: params.query ? 300000 : 0
 		})
 	}
 
@@ -277,7 +277,7 @@ export class SearchAdapter extends BaseAdapter {
 			method: 'POST',
 			body: JSON.stringify(body),
 			credentials: 'omit',
-			cache: params.query ? 300000 : 0
+			cacheTTL: params.query ? 300000 : 0
 		})
 	}
 

src/lib/components/database/cells/CharacterImageCell.svelte

@@ -2,7 +2,7 @@
 
 <script lang="ts">
 	import type { IRow } from 'wx-svelte-grid'
-	import { getCharacterImageUrl } from '$lib/utils/database'
+	import { getCharacterImage } from '$lib/features/database/detail/image'
 
 	interface Props {
 		row: IRow
@@ -12,7 +12,7 @@
 </script>
 
 <div class="image-cell">
-	<img src={getCharacterImageUrl(row.granblue_id)} alt="" class="database-image" />
+	<img src={getCharacterImage(row.granblueId, '01', 'square')} alt="" class="database-image" />
 </div>
 
 <style lang="scss">

src/lib/components/database/cells/SummonImageCell.svelte

@@ -2,7 +2,7 @@
 
 <script lang="ts">
 	import type { IRow } from 'wx-svelte-grid'
-	import { getSummonImageUrl } from '$lib/utils/database'
+	import { getSummonImage } from '$lib/features/database/detail/image'
 
 	interface Props {
 		row: IRow
@@ -12,7 +12,7 @@
 </script>
 
 <div class="image-cell">
-	<img src={getSummonImageUrl(row.granblue_id)} alt="" class="database-image" />
+	<img src={getSummonImage(row.granblueId, 'square')} alt="" class="database-image" />
 </div>
 
 <style lang="scss">

src/lib/components/database/cells/WeaponImageCell.svelte

@@ -2,7 +2,7 @@
 
 <script lang="ts">
 	import type { IRow } from 'wx-svelte-grid'
-	import { getWeaponImageUrl } from '$lib/utils/database'
+	import { getWeaponImage } from '$lib/features/database/detail/image'
 
 	interface Props {
 		row: IRow
@@ -12,7 +12,7 @@
 </script>
 
 <div class="image-cell">
-	<img src={getWeaponImageUrl(row.granblue_id)} alt="" class="database-image" />
+	<img src={getWeaponImage(row.granblueId, 'square')} alt="" class="database-image" />
 </div>
 
 <style lang="scss">

src/lib/providers/DatabaseProvider.ts

@@ -1,7 +1,6 @@
 import { RestDataProvider } from 'wx-grid-data-provider'
-import { PUBLIC_SIERO_API_URL } from '$env/static/public'
+import { searchAdapter } from '$lib/api/adapters/search.adapter'
-
+import type { SearchParams } from '$lib/api/adapters/search.adapter'
-const API_BASE = PUBLIC_SIERO_API_URL || 'http://localhost:3000'
 
 interface DatabaseProviderOptions {
 	resource: 'weapons' | 'characters' | 'summons'
@@ -19,18 +18,16 @@ interface APIResponse {
 }
 
 export class DatabaseProvider extends RestDataProvider {
-	private resource: string
+	private resource: 'weapons' | 'characters' | 'summons'
 	private pageSize: number
 	private currentPage: number = 1
-	private apiUrl: string
 	private totalCount: number = 0
 	private totalPages: number = 1
 	private searchQuery: string = ''
 
 	constructor(options: DatabaseProviderOptions) {
-		const apiUrl = `${API_BASE}/search/${options.resource}`
+		// Pass a dummy URL to parent since we'll override getData
-
+		super('dummy', (item) => {
-		super(apiUrl, (item) => {
 			// Normalize data if needed
 			if (item.name && typeof item.name === 'object') {
 				// Ensure name is accessible for display
@@ -39,7 +36,6 @@ export class DatabaseProvider extends RestDataProvider {
 			return item
 		})
 
-		this.apiUrl = apiUrl
 		this.resource = options.resource
 		this.pageSize = options.pageSize || 20
 	}
@@ -50,36 +46,37 @@ export class DatabaseProvider extends RestDataProvider {
 		const perPage = params?.per_page || this.pageSize
 
 		try {
-			const response = await fetch(this.apiUrl, {
+			// Prepare search params
-				method: 'POST',
+			const searchParams: SearchParams = {
-				credentials: 'include',
+				page: page,
-				headers: {
+				per: perPage,
-					'Content-Type': 'application/json',
+				...(this.searchQuery && this.searchQuery.length >= 2 && { query: this.searchQuery })
-					'X-Per-Page': perPage.toString()
-				},
-				body: JSON.stringify({
-					search: {
-						page: page,
-						per_page: perPage,
-						...(this.searchQuery && this.searchQuery.length >= 2 && { query: this.searchQuery })
-					}
-				})
-			})
-
-			if (!response.ok) {
-				throw new Error(`API request failed: ${response.statusText}`)
 			}
 
-			const result = await response.json()
+			// Use the appropriate search method based on resource type
+			let result
+			switch (this.resource) {
+				case 'weapons':
+					result = await searchAdapter.searchWeapons(searchParams)
+					break
+				case 'characters':
+					result = await searchAdapter.searchCharacters(searchParams)
+					break
+				case 'summons':
+					result = await searchAdapter.searchSummons(searchParams)
+					break
+				default:
+					throw new Error(`Unknown resource type: ${this.resource}`)
+			}
 
 			// Store metadata for pagination
 			this.currentPage = page
 			if (result.meta) {
 				this.totalCount = result.meta.count || 0
-				this.totalPages = result.meta.total_pages || 1
+				this.totalPages = result.meta.totalPages || 1
 				// Update pageSize if it's different from the response
-				if (result.meta.per_page) {
+				if (result.meta.perPage) {
-					this.pageSize = result.meta.per_page
+					this.pageSize = result.meta.perPage
 				}
 			}