From 7cde30a4278abcbc2c5d1ad704e16cb37c1b571c Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Sun, 21 Dec 2025 11:32:11 -0800
Subject: [PATCH] add level and element to raid tile

---
 src/lib/components/party/info/RaidTile.svelte | 36 ++++++++++++++-----
 1 file changed, 27 insertions(+), 9 deletions(-)

diff --git a/src/lib/components/party/info/RaidTile.svelte b/src/lib/components/party/info/RaidTile.svelte
index 18640cb8..4ec0f662 100644
--- a/src/lib/components/party/info/RaidTile.svelte
+++ b/src/lib/components/party/info/RaidTile.svelte
@@ -1,6 +1,8 @@
 <script lang="ts">
 	import InfoTile from './InfoTile.svelte'
 	import type { Raid } from '$lib/types/api/entities'
+	import { getRaidImage } from '$lib/utils/images'
+	import { getElementLabel } from '$lib/utils/element'
 
 	interface Props {
 		raid?: Raid
@@ -13,15 +15,18 @@
 		if (typeof raid.name === 'string') return raid.name
 		return raid.name?.en || raid.name?.ja || 'Unknown Raid'
 	})
+
+	const elementLabel = $derived(raid ? getElementLabel(raid.element) : null)
 </script>
 
 <InfoTile label="Raid" class="raid-tile">
 	{#if raid}
 		<div class="raid-info">
-			<span class="raid-name">{raidName()}</span>
-			{#if raid.group?.difficulty}
-				<span class="raid-difficulty">Lv. {raid.group.difficulty}</span>
-			{/if}
+			<img src={getRaidImage(raid.slug)} alt="" class="raid-image" />
+			<div class="raid-details">
+				<span class="raid-name">{raidName()}</span>
+				<span class="raid-meta">Lv. {raid.level} · {elementLabel}</span>
+			</div>
 		</div>
 	{:else}
 		<span class="empty-state">No raid selected</span>
@@ -31,22 +36,35 @@
 <style lang="scss">
 	@use '$src/themes/spacing' as *;
 	@use '$src/themes/typography' as *;
+	@use '$src/themes/layout' as *;
 
 	.raid-info {
+		display: flex;
+		align-items: center;
+		gap: $unit;
+	}
+
+	.raid-image {
+		height: 48px;
+		width: auto;
+		border-radius: $item-corner;
+	}
+
+	.raid-details {
 		display: flex;
 		flex-direction: column;
-		gap: $unit-half;
+		gap: 2px;
 	}
 
 	.raid-name {
-		font-size: $font-medium;
+		font-size: $font-small;
 		font-weight: $bold;
 		color: var(--text-primary);
 	}
 
-	.raid-difficulty {
-		font-size: $font-regular;
-		color: var(--text-secondary);
+	.raid-meta {
+		font-size: $font-small;
+		color: var(--text-tertiary);
 	}
 
 	.empty-state {