From 30ab61fbc9d5bb17e4711d02b97e0d5c1755a465 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Wed, 17 Sep 2025 06:43:03 -0700
Subject: [PATCH] Add database cell components for icons and images

---
 .../database/cells/CharacterImageCell.svelte  |  4 +--
 .../database/cells/ElementCell.svelte         | 27 +++++++++++++++++++
 .../database/cells/ProficiencyCell.svelte     | 27 +++++++++++++++++++
 .../database/cells/SummonImageCell.svelte     |  2 +-
 .../database/cells/WeaponImageCell.svelte     |  2 +-
 5 files changed, 58 insertions(+), 4 deletions(-)
 create mode 100644 src/lib/components/database/cells/ElementCell.svelte
 create mode 100644 src/lib/components/database/cells/ProficiencyCell.svelte

diff --git a/src/lib/components/database/cells/CharacterImageCell.svelte b/src/lib/components/database/cells/CharacterImageCell.svelte
index 55c78c42..3d6af61d 100644
--- a/src/lib/components/database/cells/CharacterImageCell.svelte
+++ b/src/lib/components/database/cells/CharacterImageCell.svelte
@@ -26,10 +26,10 @@
 
 	.database-image {
 		max-width: 100%;
-		max-height: 40px;
+		max-height: 60px;
 		width: auto;
 		height: auto;
 		object-fit: contain;
 		border-radius: 4px;
 	}
-</style>
\ No newline at end of file
+</style>
diff --git a/src/lib/components/database/cells/ElementCell.svelte b/src/lib/components/database/cells/ElementCell.svelte
new file mode 100644
index 00000000..d59bddbd
--- /dev/null
+++ b/src/lib/components/database/cells/ElementCell.svelte
@@ -0,0 +1,27 @@
+<svelte:options runes={true} />
+
+<script lang="ts">
+	import type { IRow } from 'wx-svelte-grid'
+	import ElementLabel from '$lib/components/labels/ElementLabel.svelte'
+
+	interface Props {
+		row: IRow
+	}
+
+	const { row }: Props = $props()
+
+	const element = $derived(row.element)
+</script>
+
+<div class="element-cell">
+	<ElementLabel {element} size="small" />
+</div>
+
+<style lang="scss">
+	.element-cell {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		height: 100%;
+	}
+</style>
diff --git a/src/lib/components/database/cells/ProficiencyCell.svelte b/src/lib/components/database/cells/ProficiencyCell.svelte
new file mode 100644
index 00000000..00564b19
--- /dev/null
+++ b/src/lib/components/database/cells/ProficiencyCell.svelte
@@ -0,0 +1,27 @@
+<svelte:options runes={true} />
+
+<script lang="ts">
+	import type { IRow } from 'wx-svelte-grid'
+	import ProficiencyLabel from '$lib/components/labels/ProficiencyLabel.svelte'
+
+	interface Props {
+		row: IRow
+	}
+
+	const { row }: Props = $props()
+
+	const proficiency = $derived(row.proficiency)
+</script>
+
+<div class="proficiency-cell">
+	<ProficiencyLabel {proficiency} size="large" />
+</div>
+
+<style lang="scss">
+	.proficiency-cell {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		height: 100%;
+	}
+</style>
\ No newline at end of file
diff --git a/src/lib/components/database/cells/SummonImageCell.svelte b/src/lib/components/database/cells/SummonImageCell.svelte
index 0baac6e8..aacd8519 100644
--- a/src/lib/components/database/cells/SummonImageCell.svelte
+++ b/src/lib/components/database/cells/SummonImageCell.svelte
@@ -26,7 +26,7 @@
 
 	.database-image {
 		max-width: 100%;
-		max-height: 40px;
+		max-height: 60px;
 		width: auto;
 		height: auto;
 		object-fit: contain;
diff --git a/src/lib/components/database/cells/WeaponImageCell.svelte b/src/lib/components/database/cells/WeaponImageCell.svelte
index 5d15be8f..e21dfe67 100644
--- a/src/lib/components/database/cells/WeaponImageCell.svelte
+++ b/src/lib/components/database/cells/WeaponImageCell.svelte
@@ -26,7 +26,7 @@
 
 	.database-image {
 		max-width: 100%;
-		max-height: 40px;
+		max-height: 60px;
 		width: auto;
 		height: auto;
 		object-fit: contain;