From 0e92b9baf56c69643e8eeeba7d45451c15eacd83 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Wed, 17 Sep 2025 22:15:01 -0700
Subject: [PATCH] small changes and fixes to character datagrid

---
 src/routes/database/characters/+page.svelte | 35 ++++++---------------
 1 file changed, 10 insertions(+), 25 deletions(-)

diff --git a/src/routes/database/characters/+page.svelte b/src/routes/database/characters/+page.svelte
index bf842f39..93aaf74f 100644
--- a/src/routes/database/characters/+page.svelte
+++ b/src/routes/database/characters/+page.svelte
@@ -1,16 +1,17 @@
 <svelte:options runes={true} />
 
 <script lang="ts">
-	import DatabaseGridWithProvider from '$lib/components/database/DatabaseGridWithProvider.svelte'
-	import type { IColumn } from 'wx-svelte-grid'
+	// Svelte components
 	import CharacterImageCell from '$lib/components/database/cells/CharacterImageCell.svelte'
-	import ElementCell from '$lib/components/database/cells/ElementCell.svelte'
 	import CharacterUncapCell from '$lib/components/database/cells/CharacterUncapCell.svelte'
+	import DatabaseGridWithProvider from '$lib/components/database/DatabaseGridWithProvider.svelte'
+	import ElementCell from '$lib/components/database/cells/ElementCell.svelte'
 	import LastUpdatedCell from '$lib/components/database/cells/LastUpdatedCell.svelte'
+
+	// Utilities
 	import { getRarityLabel } from '$lib/utils/rarity'
 
-	// Column configuration for characters
-	const columns: IColumn[] = [
+	const columns = [
 		{
 			id: 'granblue_id',
 			header: 'Image',
@@ -22,8 +23,7 @@
 			header: 'Name',
 			flexgrow: 1,
 			sort: true,
-			template: (nameObj) => {
-				// nameObj is the name property itself, not the full item
+			template: (nameObj: { en: any; ja: any }) => {
 				if (!nameObj) return '—'
 				if (typeof nameObj === 'string') return nameObj
 				// Handle {en: "...", ja: "..."} structure
@@ -35,7 +35,7 @@
 			header: 'Rarity',
 			width: 80,
 			sort: true,
-			template: (rarity) => getRarityLabel(rarity)
+			template: (rarity: number) => getRarityLabel(rarity)
 		},
 		{
 			id: 'element',
@@ -60,7 +60,7 @@
 	]
 </script>
 
-<div class="database-page">
+<div class="page">
 	<DatabaseGridWithProvider resource="characters" {columns} pageSize={20} />
 </div>
 
@@ -69,24 +69,9 @@
 	@use '$src/themes/spacing' as spacing;
 	@use '$src/themes/typography' as typography;
 
-	.database-page {
+	.page {
 		padding: spacing.$unit-2x 0;
 		max-width: 1400px;
 		margin: 0 auto;
 	}
-
-	.page-header {
-		margin-bottom: spacing.$unit-2x;
-
-		h1 {
-			font-size: typography.$font-xxlarge;
-			font-weight: typography.$bold;
-			margin-bottom: spacing.$unit-half;
-		}
-
-		.subtitle {
-			font-size: typography.$font-regular;
-			color: colors.$grey-50;
-		}
-	}
 </style>