From 5b0d41a02028a82ea53e934f818a8627522ab52b Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Mon, 1 Dec 2025 04:27:42 -0800
Subject: [PATCH] move teams/[id] route into [[tab=tab]] optional segment

---
 src/lib/components/ui/DetailItem.svelte       | 20 ++++++++++++++++++-
 .../sections/CharacterImagesSection.svelte    | 14 +++++--------
 .../database/characters/[id]/+page.svelte     |  2 +-
 .../[id]/{ => [[tab=tab]]}/+page.server.ts    |  0
 .../teams/[id]/{ => [[tab=tab]]}/+page.svelte |  0
 5 files changed, 25 insertions(+), 11 deletions(-)
 rename src/routes/(app)/teams/[id]/{ => [[tab=tab]]}/+page.server.ts (100%)
 rename src/routes/(app)/teams/[id]/{ => [[tab=tab]]}/+page.svelte (100%)

diff --git a/src/lib/components/ui/DetailItem.svelte b/src/lib/components/ui/DetailItem.svelte
index 6ee41cd7..8d9366ea 100644
--- a/src/lib/components/ui/DetailItem.svelte
+++ b/src/lib/components/ui/DetailItem.svelte
@@ -110,11 +110,29 @@
 		justify-content: space-between;
 		align-items: center;
 		padding: spacing.$unit 0;
-		background: colors.$grey-90;
 		border-radius: layout.$item-corner;
 		font-size: typography.$font-regular;
 		min-height: calc(spacing.$unit * 5);
 
+		&:not(.editable) {
+			padding: spacing.$unit;
+			margin: 0 calc(spacing.$unit * -1);
+		}
+
+		&:hover:not(.editable):not(.hasChildren) {
+			background: colors.$grey-90;
+		}
+
+		&.editable:focus-within,
+		&.hasChildren:focus-within {
+			background: var(--input-bg-hover);
+		}
+
+		&.editable,
+		&.hasChildren {
+			background: var(--input-bg);
+		}
+
 		.label-container {
 			display: flex;
 			flex-direction: column;
diff --git a/src/lib/features/database/characters/sections/CharacterImagesSection.svelte b/src/lib/features/database/characters/sections/CharacterImagesSection.svelte
index 366f1ec2..1b02e568 100644
--- a/src/lib/features/database/characters/sections/CharacterImagesSection.svelte
+++ b/src/lib/features/database/characters/sections/CharacterImagesSection.svelte
@@ -89,9 +89,7 @@
 {#if canEdit}
 	<DetailsContainer title="Image Management">
 		<div class="images-section">
-			<p class="description">
-				Download character images from the game server to your storage.
-			</p>
+			<p class="description">Download character images from the game server to your storage.</p>
 
 			<div class="actions">
 				<Button
@@ -119,13 +117,11 @@
 				<div class="status" class:success={isComplete} class:error={isFailed}>
 					{#if isInProgress}
 						<div class="progress-bar">
-							<div
-								class="progress-fill"
-								style="width: {downloadStatus.progress ?? 0}%"
-							></div>
+							<div class="progress-fill" style="width: {downloadStatus.progress ?? 0}%"></div>
 						</div>
 						<span class="progress-text">
-							{downloadStatus.progress ?? 0}% - {downloadStatus.imagesDownloaded ?? 0}/{downloadStatus.imagesTotal ?? '?'} images
+							{downloadStatus.progress ?? 0}% - {downloadStatus.imagesDownloaded ??
+								0}/{downloadStatus.imagesTotal ?? '?'} images
 						</span>
 					{:else if isComplete}
 						<span>Download complete - {downloadStatus.imagesDownloaded} images downloaded</span>
@@ -151,7 +147,7 @@
 		display: flex;
 		flex-direction: column;
 		gap: spacing.$unit-2x;
-		padding: spacing.$unit-2x;
+		padding: spacing.$unit-2x 0;
 	}
 
 	.description {
diff --git a/src/routes/(app)/database/characters/[id]/+page.svelte b/src/routes/(app)/database/characters/[id]/+page.svelte
index fddef1eb..71f8381d 100644
--- a/src/routes/(app)/database/characters/[id]/+page.svelte
+++ b/src/routes/(app)/database/characters/[id]/+page.svelte
@@ -292,7 +292,7 @@
 		display: flex;
 		flex-wrap: wrap;
 		gap: spacing.$unit-2x;
-		padding: spacing.$unit-2x;
+		padding: spacing.$unit-2x 0;
 	}
 
 	.related-unit {
diff --git a/src/routes/(app)/teams/[id]/+page.server.ts b/src/routes/(app)/teams/[id]/[[tab=tab]]/+page.server.ts
similarity index 100%
rename from src/routes/(app)/teams/[id]/+page.server.ts
rename to src/routes/(app)/teams/[id]/[[tab=tab]]/+page.server.ts
diff --git a/src/routes/(app)/teams/[id]/+page.svelte b/src/routes/(app)/teams/[id]/[[tab=tab]]/+page.svelte
similarity index 100%
rename from src/routes/(app)/teams/[id]/+page.svelte
rename to src/routes/(app)/teams/[id]/[[tab=tab]]/+page.svelte