Add database cell components for icons and images

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>
+</style>

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>

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>

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;

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;