From 02939927cec12f4e7ffcfdbf3d1f6da746cb8e97 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Sat, 20 Dec 2025 04:16:21 -0800
Subject: [PATCH] update crew pages with tabs navigation

---
 src/lib/components/crew/CrewHeader.svelte  |  3 +-
 src/routes/(app)/crew/+page.svelte         | 78 +---------------------
 src/routes/(app)/crew/members/+page.svelte | 45 +++++++------
 3 files changed, 27 insertions(+), 99 deletions(-)

diff --git a/src/lib/components/crew/CrewHeader.svelte b/src/lib/components/crew/CrewHeader.svelte
index 9517d442..575d1ad2 100644
--- a/src/lib/components/crew/CrewHeader.svelte
+++ b/src/lib/components/crew/CrewHeader.svelte
@@ -60,7 +60,6 @@
 		flex-direction: column;
 		gap: spacing.$unit;
 		padding: spacing.$unit-2x;
-		border-bottom: 1px solid rgba(0, 0, 0, 0.08);
 	}
 
 	.header-top-row {
@@ -73,7 +72,7 @@
 	.header-info {
 		display: flex;
 		flex-direction: column;
-		gap: spacing.$unit;
+		gap: 0;
 	}
 
 	.header-below {
diff --git a/src/routes/(app)/crew/+page.svelte b/src/routes/(app)/crew/+page.svelte
index abb6cb2f..cbbfc0a9 100644
--- a/src/routes/(app)/crew/+page.svelte
+++ b/src/routes/(app)/crew/+page.svelte
@@ -14,6 +14,7 @@
 	import ModalFooter from '$lib/components/ui/ModalFooter.svelte'
 	import Input from '$lib/components/ui/Input.svelte'
 	import CrewHeader from '$lib/components/crew/CrewHeader.svelte'
+	import CrewTabs from '$lib/components/crew/CrewTabs.svelte'
 	import { formatDateJST } from '$lib/utils/date'
 	import { formatScore, toCrewHistoryChartData } from '$lib/utils/gw'
 	import ElementBadge from '$lib/components/ui/ElementBadge.svelte'
@@ -226,28 +227,7 @@
 					{/snippet}
 				</CrewHeader>
 
-				<div class="stats-row">
-					<a href="/crew/members" class="stat stat-link">
-						<span class="stat-value">{crewStore.crew?.memberCount ?? 0}</span>
-						<span class="stat-label">Members</span>
-					</a>
-					<div class="stat">
-						<span
-							class="stat-value role"
-							class:captain={crewStore.isCaptain}
-							class:officer={crewStore.isViceCaptain}
-						>
-							{#if crewStore.isCaptain}
-								Captain
-							{:else if crewStore.isViceCaptain}
-								Vice Captain
-							{:else}
-								Member
-							{/if}
-						</span>
-						<span class="stat-label">Your Role</span>
-					</div>
-				</div>
+				<CrewTabs userElement={data.currentUser?.element} />
 
 				<!-- GW Events Section -->
 				<div class="section-header">
@@ -432,10 +412,6 @@
 		border-radius: layout.$page-corner;
 		box-shadow: effects.$page-elevation;
 		overflow: hidden;
-
-		:global(.header-info) {
-			gap: 0;
-		}
 	}
 
 	.loading-state {
@@ -506,56 +482,6 @@
 		}
 	}
 
-	.stats-row {
-		display: flex;
-	}
-
-	.stat {
-		flex: 1;
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		padding: spacing.$unit-2x;
-		border-right: 1px solid rgba(0, 0, 0, 0.08);
-
-		&:last-child {
-			border-right: none;
-		}
-
-		&.stat-link {
-			text-decoration: none;
-			color: inherit;
-			transition: background-color 0.15s;
-
-			&:hover {
-				background: rgba(0, 0, 0, 0.02);
-			}
-		}
-	}
-
-	.stat-value {
-		font-size: typography.$font-medium;
-		font-weight: typography.$medium;
-		margin-bottom: 2px;
-
-		&.role {
-			font-size: typography.$font-small;
-
-			&.captain {
-				color: var(--color-gold, #b8860b);
-			}
-
-			&.officer {
-				color: var(--color-blue, #3b82f6);
-			}
-		}
-	}
-
-	.stat-label {
-		font-size: typography.$font-small;
-		color: var(--text-secondary);
-	}
-
 	// Section header
 	.section-header {
 		display: flex;
diff --git a/src/routes/(app)/crew/members/+page.svelte b/src/routes/(app)/crew/members/+page.svelte
index c75bd0f9..a0ddad6d 100644
--- a/src/routes/(app)/crew/members/+page.svelte
+++ b/src/routes/(app)/crew/members/+page.svelte
@@ -24,6 +24,7 @@
 	import SettingsRow from '$lib/components/ui/SettingsRow.svelte'
 	import Switch from '$lib/components/ui/switch/Switch.svelte'
 	import CrewHeader from '$lib/components/crew/CrewHeader.svelte'
+	import CrewTabs from '$lib/components/crew/CrewTabs.svelte'
 	import MemberRow from '$lib/components/crew/MemberRow.svelte'
 	import PhantomRow from '$lib/components/crew/PhantomRow.svelte'
 	import ScoutUserModal from '$lib/components/crew/ScoutUserModal.svelte'
@@ -384,23 +385,11 @@
 
 <div class="page">
 	<div class="card">
-		<CrewHeader title="Members" backHref="/crew">
-			{#snippet belowTitle()}
-				<div class="filter-tabs">
-					{#each filterOptions as option}
-						<button
-							class="filter-tab"
-							class:active={filter === option.value}
-							onclick={() => handleFilterChange(option.value)}
-						>
-							{option.label}
-							{#if option.value === 'pending' && (pendingInvitationsCount > 0 || pendingClaimPhantoms.length > 0)}
-								<span class="tab-badge">{pendingInvitationsCount + pendingClaimPhantoms.length}</span>
-							{/if}
-						</button>
-					{/each}
-				</div>
-			{/snippet}
+		<CrewHeader
+			title={crewStore.crew?.name ?? ''}
+			subtitle={crewStore.crew?.gamertag ?? undefined}
+			description={crewStore.crew?.description ?? undefined}
+		>
 			{#snippet actions()}
 				{#if crewStore.isOfficer}
 					<Button
@@ -428,6 +417,23 @@
 			{/snippet}
 		</CrewHeader>
 
+		<CrewTabs userElement={data.currentUser?.element} />
+
+		<div class="filter-tabs">
+			{#each filterOptions as option}
+				<button
+					class="filter-tab"
+					class:active={filter === option.value}
+					onclick={() => handleFilterChange(option.value)}
+				>
+					{option.label}
+					{#if option.value === 'pending' && (pendingInvitationsCount > 0 || pendingClaimPhantoms.length > 0)}
+						<span class="tab-badge">{pendingInvitationsCount + pendingClaimPhantoms.length}</span>
+					{/if}
+				</button>
+			{/each}
+		</div>
+
 		<!-- Pending tab (invitations and claims) -->
 		{#if filter === 'pending'}
 			{#if invitationsQuery.isLoading || phantomsQuery.isLoading}
@@ -756,15 +762,12 @@
 		border-radius: layout.$page-corner;
 		box-shadow: effects.$page-elevation;
 		overflow: hidden;
-
-		:global(.header-info) {
-			gap: spacing.$unit-2x;
-		}
 	}
 
 	.filter-tabs {
 		display: flex;
 		gap: spacing.$unit-half;
+		padding: spacing.$unit-2x spacing.$unit-2x spacing.$unit;
 	}
 
 	.filter-tab {