add icon image column to raids list

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

@@ -0,0 +1,51 @@
+<svelte:options runes={true} />
+
+<script lang="ts">
+	import type { Raid } from '$lib/types/api/entities'
+
+	const ICON_BASE_URL = 'https://prd-game-a-granbluefantasy.akamaized.net/assets_en/img/sp/assets/enemy/m'
+
+	interface Props {
+		raid: Raid
+	}
+
+	const { raid }: Props = $props()
+
+	function getIconUrl(enemyId: number): string {
+		return `${ICON_BASE_URL}/${enemyId}.png`
+	}
+</script>
+
+<div class="image-cell">
+	{#if raid.enemy_id}
+		<img src={getIconUrl(raid.enemy_id)} alt="" class="database-image" />
+	{:else}
+		<div class="no-image"></div>
+	{/if}
+</div>
+
+<style lang="scss">
+	.image-cell {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		height: 100%;
+		padding: 4px;
+	}
+
+	.database-image {
+		max-width: 100%;
+		max-height: 48px;
+		width: auto;
+		height: auto;
+		object-fit: contain;
+		border-radius: 4px;
+	}
+
+	.no-image {
+		width: 48px;
+		height: 48px;
+		background: #f0f0f0;
+		border-radius: 4px;
+	}
+</style>

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

@@ -17,6 +17,7 @@
 	import Segment from '$lib/components/ui/segmented-control/Segment.svelte'
 	import RaidGroupNameCell from '$lib/components/database/cells/RaidGroupNameCell.svelte'
 	import RaidGroupFlagsCell from '$lib/components/database/cells/RaidGroupFlagsCell.svelte'
+	import RaidImageCell from '$lib/components/database/cells/RaidImageCell.svelte'
 	import type { Raid, RaidGroup } from '$lib/types/api/entities'
 	import type { RaidGroupFull } from '$lib/types/api/raid'
 	import { getRaidSectionLabel } from '$lib/utils/raidSection'
@@ -364,6 +365,7 @@
 				<table class="raids-table">
 					<thead>
 						<tr>
+							<th class="col-image"></th>
 							<th class="col-name">Name</th>
 							<th class="col-level">Level</th>
 							<th class="col-element">Element</th>
@@ -374,7 +376,7 @@
 					<tbody>
 						{#if filteredRaids.length === 0 && !raidsQuery.isLoading}
 							<tr>
-								<td colspan="5" class="empty-state">
+								<td colspan="6" class="empty-state">
 									{searchTerm || hasActiveFilters
 										? 'No raids match your filters'
 										: 'No raids yet'}
@@ -383,6 +385,9 @@
 						{:else}
 							{#each filteredRaids as raid}
 								<tr onclick={() => handleRaidClick(raid)} class="clickable">
+									<td class="col-image">
+										<RaidImageCell {raid} />
+									</td>
 									<td class="col-name">
 										<span class="raid-name">{displayName(raid)}</span>
 									</td>
@@ -574,6 +579,11 @@
 			}
 		}
 
+		.col-image {
+			width: 64px;
+			padding: 4px !important;
+		}
+
 		.col-name {
 			min-width: 200px;
 		}