add batch import button to database index pages

src/lib/components/database/DatabaseGridWithProvider.svelte

@@ -11,13 +11,16 @@
 	import { onMount, onDestroy } from 'svelte'
 	import { goto } from '$app/navigation'
 
+	import type { Snippet } from 'svelte'
+
 	interface Props {
 		resource: 'weapons' | 'characters' | 'summons'
 		columns: IColumn[]
 		pageSize?: number
+		headerActions?: Snippet
 	}
 
-	const { resource, columns, pageSize: initialPageSize = 20 }: Props = $props()
+	const { resource, columns, pageSize: initialPageSize = 20, headerActions }: Props = $props()
 
 	// State
 	let data = $state<any[]>([])
@@ -159,14 +162,20 @@
 	<div class="controls">
 		<input type="text" placeholder="Search..." bind:value={searchTerm} />
 
-		<div class="page-size-selector">
-			<label for="page-size">Show:</label>
-			<select id="page-size" value={pageSize} onchange={handlePageSizeChange}>
-				<option value={10}>10</option>
-				<option value={20}>20</option>
-				<option value={50}>50</option>
-				<option value={100}>100</option>
-			</select>
+		<div class="controls-right">
+			{#if headerActions}
+				{@render headerActions()}
+			{/if}
+
+			<div class="page-size-selector">
+				<label for="page-size">Show:</label>
+				<select id="page-size" value={pageSize} onchange={handlePageSizeChange}>
+					<option value={10}>10</option>
+					<option value={20}>20</option>
+					<option value={50}>50</option>
+					<option value={100}>100</option>
+				</select>
+			</div>
 		</div>
 	</div>
 
@@ -249,6 +258,12 @@
 				}
 			}
 
+			.controls-right {
+				display: flex;
+				align-items: center;
+				gap: spacing.$unit;
+			}
+
 			.page-size-selector {
 				display: flex;
 				align-items: center;

src/routes/(app)/database/characters/+page.svelte

@@ -7,9 +7,11 @@
 	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'
+	import Button from '$lib/components/ui/Button.svelte'
 
 	// Utilities
 	import { getRarityLabel } from '$lib/utils/rarity'
+	import { goto } from '$app/navigation'
 
 	const columns = [
 		{
@@ -61,7 +63,13 @@
 </script>
 
 <div class="page">
-	<DatabaseGridWithProvider resource="characters" {columns} pageSize={20} />
+	<DatabaseGridWithProvider resource="characters" {columns} pageSize={20}>
+		{#snippet headerActions()}
+			<Button variant="secondary" size="small" onclick={() => goto('/database/characters/import')}>
+				Batch Import
+			</Button>
+		{/snippet}
+	</DatabaseGridWithProvider>
 </div>
 
 <style lang="scss">

src/routes/(app)/database/summons/+page.svelte

@@ -7,7 +7,9 @@
 	import ElementCell from '$lib/components/database/cells/ElementCell.svelte'
 	import SummonUncapCell from '$lib/components/database/cells/SummonUncapCell.svelte'
 	import LastUpdatedCell from '$lib/components/database/cells/LastUpdatedCell.svelte'
+	import Button from '$lib/components/ui/Button.svelte'
 	import { getRarityLabel } from '$lib/utils/rarity'
+	import { goto } from '$app/navigation'
 
 	// Column configuration for summons
 	const columns: IColumn[] = [
@@ -61,7 +63,13 @@
 </script>
 
 <div class="database-page">
-	<DatabaseGridWithProvider resource="summons" {columns} pageSize={20} />
+	<DatabaseGridWithProvider resource="summons" {columns} pageSize={20}>
+		{#snippet headerActions()}
+			<Button variant="secondary" size="small" onclick={() => goto('/database/summons/import')}>
+				Batch Import
+			</Button>
+		{/snippet}
+	</DatabaseGridWithProvider>
 </div>
 
 <style lang="scss">

src/routes/(app)/database/weapons/+page.svelte

@@ -8,7 +8,9 @@
 	import ProficiencyCell from '$lib/components/database/cells/ProficiencyCell.svelte'
 	import WeaponUncapCell from '$lib/components/database/cells/WeaponUncapCell.svelte'
 	import LastUpdatedCell from '$lib/components/database/cells/LastUpdatedCell.svelte'
+	import Button from '$lib/components/ui/Button.svelte'
 	import { getRarityLabel } from '$lib/utils/rarity'
+	import { goto } from '$app/navigation'
 
 	// Column configuration for weapons
 	const columns: IColumn[] = [
@@ -69,7 +71,13 @@
 </script>
 
 <div class="database-page">
-	<DatabaseGridWithProvider resource="weapons" {columns} pageSize={20} />
+	<DatabaseGridWithProvider resource="weapons" {columns} pageSize={20}>
+		{#snippet headerActions()}
+			<Button variant="secondary" size="small" onclick={() => goto('/database/weapons/import')}>
+				Batch Import
+			</Button>
+		{/snippet}
+	</DatabaseGridWithProvider>
 </div>
 
 <style lang="scss">