From f54c5f012e521449d788aa664e975ec3c59930c2 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Wed, 3 Dec 2025 10:50:36 -0800
Subject: [PATCH] improve collection row layouts

- wrap thumbnail + name in core-info container
- use layout tokens for border radius
- add proficiency column to weapon rows
- wider thumbnails, consistent sizing
---
 .../collection/CollectionCharacterRow.svelte  | 97 ++++++++++---------
 .../collection/CollectionSummonRow.svelte     | 82 +++++++++-------
 .../collection/CollectionWeaponRow.svelte     | 88 ++++++++++-------
 3 files changed, 152 insertions(+), 115 deletions(-)

diff --git a/src/lib/components/collection/CollectionCharacterRow.svelte b/src/lib/components/collection/CollectionCharacterRow.svelte
index 7bb5c4a8..150acb6f 100644
--- a/src/lib/components/collection/CollectionCharacterRow.svelte
+++ b/src/lib/components/collection/CollectionCharacterRow.svelte
@@ -50,20 +50,21 @@
 </script>
 
 <button type="button" class="character-row" onclick={onClick}>
-	<div class="thumbnail">
-		<img src={imageUrl} alt={displayName} loading="lazy" />
-	</div>
-
-	<div class="name-cell">
-		<span class="name">{displayName}</span>
-		{#if character.perpetuity}
-			<img
-				class="perpetuity-badge"
-				src={perpetuityFilled}
-				alt="Perpetuity Ring"
-				title="Perpetuity Ring"
-			/>
-		{/if}
+	<div class="core-info">
+		<div class="thumbnail">
+			<img src={imageUrl} alt={displayName} loading="lazy" />
+		</div>
+		<div class="name-cell">
+			<span class="name">{displayName}</span>
+			{#if character.perpetuity}
+				<img
+					class="perpetuity-badge"
+					src={perpetuityFilled}
+					alt="Perpetuity Ring"
+					title="Perpetuity Ring"
+				/>
+			{/if}
+		</div>
 	</div>
 
 	<div class="element-cell">
@@ -92,20 +93,21 @@
 </button>
 
 <style lang="scss">
+	@use '$src/themes/layout' as *;
 	@use '$src/themes/spacing' as *;
 	@use '$src/themes/typography' as *;
 
 	.character-row {
 		display: flex;
 		align-items: center;
-		gap: $unit-2x;
+		gap: $unit-4x;
 		padding: $unit $unit-2x $unit $unit;
 		border: none;
 		background: var(--list-cell-bg);
 		cursor: pointer;
 		width: 100%;
 		text-align: left;
-		border-radius: 12px;
+		border-radius: $card-corner;
 		transition:
 			background 0.15s,
 			box-shadow 0.15s;
@@ -121,36 +123,43 @@
 		}
 	}
 
-	.thumbnail {
-		width: 100px;
-		aspect-ratio: 280 / 160;
-		border-radius: 6px;
-		overflow: hidden;
-		background: var(--card-bg, #f5f5f5);
-		flex-shrink: 0;
-
-		img {
-			width: 100%;
-			height: 100%;
-			object-fit: cover;
-		}
-	}
-
-	.name-cell {
-		flex: 1;
-		min-width: 0;
+	.core-info {
 		display: flex;
 		align-items: center;
-		gap: $unit;
-	}
+		gap: $unit-2x;
+		flex-grow: 1;
 
-	.name {
-		font-size: $font-regular;
-		font-weight: $medium;
-		color: var(--text-primary);
-		white-space: nowrap;
-		overflow: hidden;
-		text-overflow: ellipsis;
+		.thumbnail {
+			width: 100px;
+			aspect-ratio: 280 / 160;
+			border-radius: $item-corner;
+			overflow: hidden;
+			background: var(--card-bg, #f5f5f5);
+			flex-shrink: 0;
+
+			img {
+				width: 100%;
+				height: 100%;
+				object-fit: cover;
+			}
+		}
+
+		.name-cell {
+			flex: 1;
+			min-width: 0;
+			display: flex;
+			align-items: center;
+			gap: $unit;
+
+			.name {
+				font-size: $font-regular;
+				font-weight: $medium;
+				color: var(--text-primary);
+				white-space: nowrap;
+				overflow: hidden;
+				text-overflow: ellipsis;
+			}
+		}
 	}
 
 	.perpetuity-badge {
@@ -162,7 +171,7 @@
 	.uncap-cell {
 		width: 100px;
 		display: flex;
-		justify-content: center;
+		justify-content: flex-start;
 		flex-shrink: 0;
 	}
 
diff --git a/src/lib/components/collection/CollectionSummonRow.svelte b/src/lib/components/collection/CollectionSummonRow.svelte
index e845fc14..1be349f1 100644
--- a/src/lib/components/collection/CollectionSummonRow.svelte
+++ b/src/lib/components/collection/CollectionSummonRow.svelte
@@ -14,7 +14,7 @@
 	// Get transformation suffix for transcendence
 	const transformation = $derived(summon.transcendenceStep > 0 ? '02' : undefined)
 
-	const imageUrl = $derived(getSummonImage(summon.summon?.granblueId, 'grid', transformation))
+	const imageUrl = $derived(getSummonImage(summon.summon?.granblueId, 'wide', transformation))
 
 	const displayName = $derived.by(() => {
 		const name = summon.summon?.name
@@ -28,12 +28,14 @@
 </script>
 
 <button type="button" class="summon-row" onclick={onClick}>
-	<div class="thumbnail">
-		<img src={imageUrl} alt={displayName} loading="lazy" />
-	</div>
+	<div class="core-info">
+		<div class="thumbnail">
+			<img src={imageUrl} alt={displayName} loading="lazy" />
+		</div>
 
-	<div class="name-cell">
-		<span class="name">{displayName}</span>
+		<div class="name-cell">
+			<span class="name">{displayName}</span>
+		</div>
 	</div>
 
 	<div class="element-cell">
@@ -57,20 +59,21 @@
 </button>
 
 <style lang="scss">
+	@use '$src/themes/layout' as *;
 	@use '$src/themes/spacing' as *;
 	@use '$src/themes/typography' as *;
 
 	.summon-row {
 		display: flex;
 		align-items: center;
-		gap: $unit-2x;
+		gap: $unit-4x;
 		padding: $unit $unit-2x $unit $unit;
 		border: none;
 		background: var(--list-cell-bg);
 		cursor: pointer;
 		width: 100%;
 		text-align: left;
-		border-radius: 12px;
+		border-radius: $card-corner;
 		transition:
 			background 0.15s,
 			box-shadow 0.15s;
@@ -86,36 +89,43 @@
 		}
 	}
 
-	.thumbnail {
-		width: 80px;
-		aspect-ratio: 1 / 1;
-		border-radius: 6px;
-		overflow: hidden;
-		background: var(--card-bg, #f5f5f5);
-		flex-shrink: 0;
-
-		img {
-			width: 100%;
-			height: 100%;
-			object-fit: contain;
-		}
-	}
-
-	.name-cell {
-		flex: 1;
-		min-width: 0;
+	.core-info {
 		display: flex;
 		align-items: center;
-		gap: $unit;
-	}
+		gap: $unit-2x;
+		flex-grow: 1;
 
-	.name {
-		font-size: $font-regular;
-		font-weight: $medium;
-		color: var(--text-primary);
-		white-space: nowrap;
-		overflow: hidden;
-		text-overflow: ellipsis;
+		.thumbnail {
+			width: 100px;
+			aspect-ratio: 280 / 160;
+			border-radius: $item-corner;
+			overflow: hidden;
+			background: var(--card-bg, #f5f5f5);
+			flex-shrink: 0;
+
+			img {
+				width: 100%;
+				height: 100%;
+				object-fit: cover;
+			}
+		}
+
+		.name-cell {
+			flex: 1;
+			min-width: 0;
+			display: flex;
+			align-items: center;
+			gap: $unit;
+
+			.name {
+				font-size: $font-regular;
+				font-weight: $medium;
+				color: var(--text-primary);
+				white-space: nowrap;
+				overflow: hidden;
+				text-overflow: ellipsis;
+			}
+		}
 	}
 
 	.element-cell {
@@ -125,7 +135,7 @@
 	.uncap-cell {
 		width: 100px;
 		display: flex;
-		justify-content: center;
+		justify-content: flex-start;
 		flex-shrink: 0;
 	}
 
diff --git a/src/lib/components/collection/CollectionWeaponRow.svelte b/src/lib/components/collection/CollectionWeaponRow.svelte
index cd4db69e..6362f9dd 100644
--- a/src/lib/components/collection/CollectionWeaponRow.svelte
+++ b/src/lib/components/collection/CollectionWeaponRow.svelte
@@ -3,6 +3,7 @@
 	import { getWeaponImage } from '$lib/utils/images'
 	import UncapIndicator from '$lib/components/uncap/UncapIndicator.svelte'
 	import ElementLabel from '$lib/components/labels/ElementLabel.svelte'
+	import ProficiencyLabel from '../labels/ProficiencyLabel.svelte'
 
 	interface Props {
 		weapon: CollectionWeapon
@@ -31,6 +32,9 @@
 	// Show instance element for element-changeable, otherwise show weapon's base element
 	const element = $derived(weapon.weapon?.element === 0 ? weapon.element : weapon.weapon?.element)
 
+	// Weapon proficiency
+	const proficiency = $derived(weapon.weapon?.proficiency)
+
 	// Awakening display
 	const awakeningDisplay = $derived.by(() => {
 		if (!weapon.awakening) return null
@@ -52,18 +56,24 @@
 </script>
 
 <button type="button" class="weapon-row" onclick={onClick}>
-	<div class="thumbnail">
-		<img src={imageUrl} alt={displayName} loading="lazy" />
-	</div>
+	<div class="core-info">
+		<div class="thumbnail">
+			<img src={imageUrl} alt={displayName} loading="lazy" />
+		</div>
 
-	<div class="name-cell">
-		<span class="name">{displayName}</span>
+		<div class="name-cell">
+			<span class="name">{displayName}</span>
+		</div>
 	</div>
 
 	<div class="element-cell">
 		<ElementLabel {element} size="medium" />
 	</div>
 
+	<div class="proficiency-cell">
+		<ProficiencyLabel {proficiency} size="medium" />
+	</div>
+
 	<div class="uncap-cell">
 		<UncapIndicator
 			type="weapon"
@@ -87,20 +97,21 @@
 </button>
 
 <style lang="scss">
+	@use '$src/themes/layout' as *;
 	@use '$src/themes/spacing' as *;
 	@use '$src/themes/typography' as *;
 
 	.weapon-row {
 		display: flex;
 		align-items: center;
-		gap: $unit-2x;
+		gap: $unit-4x;
 		padding: $unit $unit-2x $unit $unit;
 		border: none;
 		background: var(--list-cell-bg);
 		cursor: pointer;
 		width: 100%;
 		text-align: left;
-		border-radius: 12px;
+		border-radius: $card-corner;
 		transition:
 			background 0.15s,
 			box-shadow 0.15s;
@@ -116,36 +127,43 @@
 		}
 	}
 
-	.thumbnail {
-		width: 80px;
-		aspect-ratio: 1 / 1;
-		border-radius: 6px;
-		overflow: hidden;
-		background: var(--card-bg, #f5f5f5);
-		flex-shrink: 0;
-
-		img {
-			width: 100%;
-			height: 100%;
-			object-fit: contain;
-		}
-	}
-
-	.name-cell {
-		flex: 1;
-		min-width: 0;
+	.core-info {
 		display: flex;
 		align-items: center;
-		gap: $unit;
-	}
+		gap: $unit-2x;
+		flex-grow: 1;
 
-	.name {
-		font-size: $font-regular;
-		font-weight: $medium;
-		color: var(--text-primary);
-		white-space: nowrap;
-		overflow: hidden;
-		text-overflow: ellipsis;
+		.thumbnail {
+			width: 100px;
+			aspect-ratio: 280 / 160;
+			border-radius: $item-corner;
+			overflow: hidden;
+			background: var(--card-bg, #f5f5f5);
+			flex-shrink: 0;
+
+			img {
+				width: 100%;
+				height: 100%;
+				object-fit: cover;
+			}
+		}
+
+		.name-cell {
+			flex: 1;
+			min-width: 0;
+			display: flex;
+			align-items: center;
+			gap: $unit;
+
+			.name {
+				font-size: $font-regular;
+				font-weight: $medium;
+				color: var(--text-primary);
+				white-space: nowrap;
+				overflow: hidden;
+				text-overflow: ellipsis;
+			}
+		}
 	}
 
 	.element-cell {
@@ -155,7 +173,7 @@
 	.uncap-cell {
 		width: 100px;
 		display: flex;
-		justify-content: center;
+		justify-content: flex-start;
 		flex-shrink: 0;
 	}