From b06c43385ed978e322f2b48319c8db4b40b892e0 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Sun, 21 Dec 2025 11:35:34 -0800
Subject: [PATCH] update grid layout, hide video tile when empty

---
 .../party/info/PartyInfoGrid.svelte           | 60 +++++--------------
 1 file changed, 16 insertions(+), 44 deletions(-)

diff --git a/src/lib/components/party/info/PartyInfoGrid.svelte b/src/lib/components/party/info/PartyInfoGrid.svelte
index 09701e9e..5ff5d4a3 100644
--- a/src/lib/components/party/info/PartyInfoGrid.svelte
+++ b/src/lib/components/party/info/PartyInfoGrid.svelte
@@ -2,8 +2,7 @@
 	import type { Party } from '$lib/types/api/party'
 	import DescriptionTile from './DescriptionTile.svelte'
 	import RaidTile from './RaidTile.svelte'
-	import PerformanceTile from './PerformanceTile.svelte'
-	import SettingsTile from './SettingsTile.svelte'
+	import BattleTile from './BattleTile.svelte'
 	import VideoTile from './VideoTile.svelte'
 
 	interface Props {
@@ -18,58 +17,45 @@
 	// Check if data exists for each tile
 	const hasDescription = $derived(!!party.description)
 	const hasRaid = $derived(!!party.raid)
-	const hasPerformanceData = $derived(
-		party.clearTime != null ||
-			party.buttonCount != null ||
-			party.chainCount != null ||
-			party.summonCount != null
-	)
 	const hasVideo = $derived(!!party.videoUrl)
 
 	// Show tile if: has data OR (is owner's team and can prompt to fill)
 	const showDescription = $derived(hasDescription || canEdit)
 	const showRaid = $derived(hasRaid || canEdit)
-	const showPerformance = $derived(hasPerformanceData || canEdit)
-	const showVideo = $derived(hasVideo || canEdit)
-	// Settings always shown - they have default values
+	// Video tile only shown when there's a video (no empty placeholder)
+	const showVideo = $derived(hasVideo)
+	// Battle tile always shown - settings have default values
 </script>
 
 <div class="party-info-grid">
-	<!-- Row 1: Description + Raid -->
+	<!-- Row 1: Description + Video -->
 	<div class="row row-1">
 		{#if showDescription}
 			<DescriptionTile description={party.description} onOpen={onOpenDescription} />
 		{/if}
 
-		{#if showRaid}
-			<RaidTile raid={party.raid} />
+		{#if showVideo}
+			<VideoTile videoUrl={party.videoUrl} />
 		{/if}
 	</div>
 
-	<!-- Row 2: Performance, Settings, Video -->
+	<!-- Row 2: Battle + Raid -->
 	<div class="row row-2">
-		{#if showPerformance}
-			<PerformanceTile
-				clearTime={party.clearTime}
-				buttonCount={party.buttonCount}
-				chainCount={party.chainCount}
-				summonCount={party.summonCount}
-				clickable={canEdit}
-				onclick={onOpenEdit}
-			/>
-		{/if}
-
-		<SettingsTile
+		<BattleTile
 			fullAuto={party.fullAuto}
 			autoGuard={party.autoGuard}
 			autoSummon={party.autoSummon}
 			chargeAttack={party.chargeAttack}
+			clearTime={party.clearTime}
+			buttonCount={party.buttonCount}
+			chainCount={party.chainCount}
+			summonCount={party.summonCount}
 			clickable={canEdit}
 			onclick={onOpenEdit}
 		/>
 
-		{#if showVideo}
-			<VideoTile videoUrl={party.videoUrl} />
+		{#if showRaid}
+			<RaidTile raid={party.raid} />
 		{/if}
 	</div>
 </div>
@@ -98,12 +84,7 @@
 	}
 
 	.row-2 {
-		grid-template-columns: repeat(3, 1fr);
-
-		// Adjust columns based on number of children
-		&:has(> :nth-child(2):last-child) {
-			grid-template-columns: repeat(2, 1fr);
-		}
+		grid-template-columns: repeat(2, 1fr);
 
 		&:has(> :only-child) {
 			grid-template-columns: 1fr;
@@ -118,15 +99,6 @@
 
 		.row-2 {
 			grid-template-columns: repeat(2, 1fr);
-
-			&:has(> :nth-child(3)) {
-				grid-template-columns: repeat(2, 1fr);
-
-				// Third item spans full width
-				> :nth-child(3) {
-					grid-column: 1 / -1;
-				}
-			}
 		}
 	}