jennie/ghostguild-org
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

UI/UX tweaks and improvements.

Browse source
This commit is contained in:
Jennie Robinson Faber 2026-04-05 12:28:41 +01:00
parent 4daec9b624
commit 418d3cc402
32 changed files with 2725 additions and 1201 deletions
Download patch file Download diff file Expand all files Collapse all files

404
app/pages/member/dashboard.vue
View file

@ -1,171 +1,227 @@
<template>
<div class="dashboard">
<ClientOnly>
<!-- Loading State -->
<div v-if="authPending" class="loading-state">
<div class="spinner" />
<p>Loading your dashboard...</p>
</div>
<!-- Unauthenticated State -->
<div v-else-if="!memberData" class="unauth-state">
<h2>Sign in required</h2>
<p>Please sign in to access your member dashboard.</p>
<button
class="btn btn-primary"
@click="openLoginModal({ title: 'Sign in to your dashboard', description: 'Enter your email to access your member dashboard' })"
>
Sign In
</button>
</div>
<!-- Dashboard Content -->
<template v-else>
<div class="dashboard-body">
<!-- Member Status Banner -->
<MemberStatusBanner :dismissible="true" />
<!-- Welcome Header -->
<div class="welcome">
<h1>Welcome back, {{ memberData?.name }}</h1>
<div class="meta">
<CircleBadge :circle="memberData?.circle || 'community'" />
<span>${{ memberData?.contributionTier }} CAD/mo</span>
</div>
</div>
<!-- Upcoming Events + Quick Actions -->
<div class="content-row">
<div class="content-block">
<div class="section-label">Your Upcoming Events</div>
<div v-if="loadingEvents" class="loading-inline">
<div class="spinner spinner-sm" />
</div>
<div v-else-if="registeredEvents.length" class="event-list">
<NuxtLink
v-for="evt in registeredEvents"
:key="evt._id"
:to="`/events/${evt.slug || evt._id}`"
class="event-item"
>
<span class="event-date">{{ formatEventDate(evt.startDate) }}</span>
<span class="event-title">{{ evt.title }}</span>
<CircleBadge v-if="evt.circle" :circle="evt.circle" />
</NuxtLink>
<!-- Calendar subscription -->
<button class="calendar-btn" @click="copyCalendarLink">
{{ calendarLinkCopied ? 'Link copied!' : 'Subscribe to calendar' }}
</button>
</div>
<div v-else class="empty-state">
<p>You haven't registered for any upcoming events</p>
</div>
<NuxtLink to="/events" class="section-link">Browse all events &rarr;</NuxtLink>
<!-- Calendar subscription instructions -->
<div v-if="registeredEvents.length > 0 && showCalendarInstructions" class="calendar-instructions">
<div class="ci-header">
<strong>How to Subscribe to Your Calendar</strong>
<button @click="showCalendarInstructions = false" class="ci-close">&times;</button>
</div>
<ul>
<li><strong>Google Calendar:</strong> Click "+" then "From URL" then paste the link</li>
<li><strong>Apple Calendar:</strong> File then New Calendar Subscription then paste the link</li>
<li><strong>Outlook:</strong> Add Calendar then Subscribe from web then paste the link</li>
</ul>
<p class="ci-note">Your calendar will automatically update when you register or unregister from events.</p>
</div>
</div>
<div class="content-block">
<div class="section-label">Quick Actions</div>
<NuxtLink
to="/members?peerSupport=true"
class="quick-action"
:class="{ disabled: !canPeerSupport }"
:title="!canPeerSupport ? 'Complete your membership to book peer sessions' : ''"
>
Book a peer session<span class="arrow">&rarr;</span>
</NuxtLink>
<NuxtLink to="/member/profile" class="quick-action">
Update your profile<span class="arrow">&rarr;</span>
</NuxtLink>
<a href="https://wiki.ghostguild.org" target="_blank" class="quick-action">
Browse the wiki<span class="arrow">&rarr;</span>
</a>
<NuxtLink to="/members" class="quick-action">
Browse members<span class="arrow">&rarr;</span>
</NuxtLink>
<NuxtLink to="/member/profile#account" class="quick-action">
Manage account<span class="arrow">&rarr;</span>
</NuxtLink>
</div>
</div>
<!-- Membership Summary + Peer Support -->
<div class="content-row">
<div class="content-block">
<div class="section-label">Your Membership</div>
<div class="membership-row">
<span class="key">Circle</span>
<span class="val" :style="{ color: `var(--c-${memberData?.circle || 'community'})` }">
{{ memberData?.circle }}
</span>
</div>
<div class="membership-row">
<span class="key">Contribution</span>
<span class="val">${{ memberData?.contributionTier }} CAD/month</span>
</div>
<div class="membership-row">
<span class="key">Status</span>
<span class="val">
<span :class="isActive ? 'status-active' : ''">
{{ isActive ? 'Active' : statusConfig.label }}
</span>
</span>
</div>
<div v-if="memberData?.createdAt" class="membership-row">
<span class="key">Member since</span>
<span class="val">{{ formatMemberSince(memberData.createdAt) }}</span>
</div>
<NuxtLink to="/member/profile#account" class="section-link">
Change circle or contribution &rarr;
</NuxtLink>
</div>
<div class="content-block">
<div class="section-label">Peer Support</div>
<DashedBox>
<p class="peer-text">
Interested in offering peer support? Set up your profile to connect with other members who share your interests and experience.
</p>
<NuxtLink to="/member/profile" class="section-link">
Set up peer support &rarr;
</NuxtLink>
</DashedBox>
</div>
</div>
</div>
</template>
<template #fallback>
<div class="loading-state">
<!-- Loading State -->
<div v-if="authPending" class="loading-state">
<div class="spinner" />
<p>Loading your dashboard...</p>
</div>
</template>
<!-- Unauthenticated State -->
<div v-else-if="!memberData" class="unauth-state">
<h2>Sign in required</h2>
<p>Please sign in to access your member dashboard.</p>
<button
class="btn btn-primary"
@click="
openLoginModal({
title: 'Sign in to your dashboard',
description: 'Enter your email to access your member dashboard',
})
"
>
Sign In
</button>
</div>
<!-- Dashboard Content -->
<template v-else>
<div class="dashboard-with-sidebar">
<div class="dashboard-body">
<!-- Member Status Banner -->
<MemberStatusBanner />
<!-- Welcome Header -->
<div class="welcome">
<h1>Welcome back, {{ memberData?.name }}</h1>
<div class="meta">
<CircleBadge :circle="memberData?.circle || 'community'" />
<span>${{ memberData?.contributionTier }} CAD/mo</span>
</div>
</div>
<!-- Upcoming Events + Quick Actions -->
<div class="content-row">
<div class="content-block">
<div class="section-label">Your Upcoming Events</div>
<div v-if="loadingEvents" class="loading-inline">
<div class="spinner spinner-sm" />
</div>
<div v-else-if="registeredEvents.length" class="event-list">
<NuxtLink
v-for="evt in registeredEvents"
:key="evt._id"
:to="`/events/${evt.slug || evt._id}`"
class="event-item"
>
<span class="event-date">{{
formatEventDate(evt.startDate)
}}</span>
<span class="event-title">{{ evt.title }}</span>
<CircleBadge v-if="evt.circle" :circle="evt.circle" />
</NuxtLink>
<!-- Calendar subscription -->
<button class="calendar-btn" @click="copyCalendarLink">
{{
calendarLinkCopied
? "Link copied!"
: "Subscribe to calendar"
}}
</button>
</div>
<div v-else class="empty-state">
<p>You haven't registered for any upcoming events</p>
</div>
<NuxtLink to="/events" class="section-link"
>Browse all events &rarr;</NuxtLink
>
<!-- Calendar subscription instructions -->
<div
v-if="registeredEvents.length > 0 && showCalendarInstructions"
class="calendar-instructions"
>
<div class="ci-header">
<strong>How to Subscribe to Your Calendar</strong>
<button
@click="showCalendarInstructions = false"
class="ci-close"
>
&times;
</button>
</div>
<ul>
<li>
<strong>Google Calendar:</strong> Click "+" then "From
URL" then paste the link
</li>
<li>
<strong>Apple Calendar:</strong> File then New Calendar
Subscription then paste the link
</li>
<li>
<strong>Outlook:</strong> Add Calendar then Subscribe from
web then paste the link
</li>
</ul>
<p class="ci-note">
Your calendar will automatically update when you register or
unregister from events.
</p>
</div>
</div>
<div class="content-block">
<div class="section-label">Quick Actions</div>
<NuxtLink
to="/members?peerSupport=true"
class="quick-action"
:class="{ disabled: !canPeerSupport }"
:title="
!canPeerSupport
? 'Complete your membership to book peer sessions'
: ''
"
>
Book a peer session<span class="arrow">&rarr;</span>
</NuxtLink>
<NuxtLink to="/member/profile" class="quick-action">
Update your profile<span class="arrow">&rarr;</span>
</NuxtLink>
<a
href="https://wiki.ghostguild.org"
target="_blank"
class="quick-action"
>
Browse the wiki<span class="arrow">&rarr;</span>
</a>
<NuxtLink to="/members" class="quick-action">
Browse members<span class="arrow">&rarr;</span>
</NuxtLink>
<NuxtLink to="/member/profile#account" class="quick-action">
Manage account<span class="arrow">&rarr;</span>
</NuxtLink>
</div>
</div>
<!-- Membership Summary + Peer Support -->
<div class="content-row">
<div class="content-block">
<div class="section-label">Your Membership</div>
<div class="membership-row">
<span class="key">Circle</span>
<span
class="val"
:style="{
color: `var(--c-${memberData?.circle || 'community'})`,
}"
>
{{ memberData?.circle }}
</span>
</div>
<div class="membership-row">
<span class="key">Contribution</span>
<span class="val"
>${{ memberData?.contributionTier }} CAD/month</span
>
</div>
<div class="membership-row">
<span class="key">Status</span>
<span class="val">
<span :class="isActive ? 'status-active' : ''">
{{ isActive ? "Active" : statusConfig.label }}
</span>
</span>
</div>
<div v-if="memberData?.createdAt" class="membership-row">
<span class="key">Member since</span>
<span class="val">{{
formatMemberSince(memberData.createdAt)
}}</span>
</div>
<NuxtLink to="/member/profile#account" class="section-link">
Change circle or contribution &rarr;
</NuxtLink>
</div>
<div class="content-block">
<div class="section-label">Peer Support</div>
<DashedBox>
<p class="peer-text">
Interested in offering peer support? Set up your profile to
connect with other members who share your interests and
experience.
</p>
<NuxtLink to="/member/profile" class="section-link">
Set up peer support &rarr;
</NuxtLink>
</DashedBox>
</div>
</div>
</div>
<EventsMiniSidebar :events="upcomingEvents" />
</div>
</template>
<template #fallback>
<div class="loading-state">
<div class="spinner" />
<p>Loading your dashboard...</p>
</div>
</template>
</ClientOnly>
</div>
</template>
<script setup>
const { memberData, checkMemberStatus } = useAuth();
const { isActive, statusConfig, isPendingPayment, canPeerSupport } = useMemberStatus();
const { isActive, statusConfig, isPendingPayment, canPeerSupport } =
useMemberStatus();
const { completePayment, isProcessingPayment } = useMemberPayment();
const registeredEvents = ref([]);
@ -173,6 +229,11 @@ const loadingEvents = ref(false);
const calendarLinkCopied = ref(false);
const showCalendarInstructions = ref(false);
const { data: upcomingEvents } = await useFetch("/api/events", {
query: { limit: 5, upcoming: true },
default: () => [],
});
// Calendar subscription URL
const calendarUrl = computed(() => {
const memberId = memberData.value?._id || memberData.value?.id;
@ -358,7 +419,9 @@ useHead({
}
@keyframes spin {
to { transform: rotate(360deg); }
to {
transform: rotate(360deg);
}
}
.loading-inline {
@ -381,7 +444,7 @@ useHead({
}
.unauth-state h2 {
font-family: 'Brygada 1918', serif;
font-family: "Brygada 1918", serif;
font-size: 20px;
font-weight: 500;
color: var(--text-bright);
@ -405,7 +468,7 @@ useHead({
}
.welcome h1 {
font-family: 'Brygada 1918', serif;
font-family: "Brygada 1918", serif;
font-size: 24px;
font-weight: 500;
color: var(--text-bright);
@ -421,12 +484,19 @@ useHead({
}
/* ---- CONTENT GRID ---- */
.dashboard-with-sidebar {
flex: 1;
display: grid;
grid-template-columns: 1fr 200px;
align-items: stretch;
min-height: 0;
}
.dashboard-body {
flex: 1;
display: flex;
flex-direction: column;
min-height: 0;
width: 100%;
}
.content-row {
@ -490,7 +560,7 @@ useHead({
/* ---- CALENDAR BUTTON ---- */
.calendar-btn {
font-family: 'Commit Mono', monospace;
font-family: "Commit Mono", monospace;
font-size: 11px;
color: var(--candle-dim);
background: none;
@ -636,7 +706,7 @@ useHead({
}
.status-active::before {
content: '';
content: "";
display: inline-block;
width: 6px;
height: 6px;
@ -652,7 +722,17 @@ useHead({
}
/* ---- RESPONSIVE ---- */
@media (max-width: 1024px) {
.dashboard-with-sidebar {
grid-template-columns: 1fr;
}
}
@media (max-width: 768px) {
.dashboard-with-sidebar {
grid-template-columns: 1fr;
}
.content-row {
grid-template-columns: 1fr;
}