granblue.team/hensei-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

update crew pages with tabs navigation

Browse source
This commit is contained in:
Justin Edmund 2025-12-20 04:16:21 -08:00
parent 37bb40293d
commit 02939927ce
3 changed files with 27 additions and 99 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
src/lib/components/crew/CrewHeader.svelte
View file

@ -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 {

78
src/routes/(app)/crew/+page.svelte
View file

@ -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;

45
src/routes/(app)/crew/members/+page.svelte
View file

@ -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 {