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

158
app/pages/about.vue
View file

@ -4,67 +4,115 @@
<div class="about-hero">
<div class="about-hero-left">
<h1>About Ghost Guild</h1>
<p>A membership community for game developers exploring cooperative business models.</p>
<p>
A membership community for game developers exploring cooperative
business models.
</p>
</div>
<div class="about-hero-right">
<div class="section-label">Our Story</div>
<p>Ghost Guild grew out of Baby Ghosts, a Canadian nonprofit that's been supporting indie game developers since 2018. We noticed a gap: game developers interested in cooperative models had nowhere to learn, practice, and connect with others doing the same work.</p>
<p>Ghost Guild is the response &mdash; a membership program where developers at every stage of cooperative practice can find resources, events, mentorship, and community.</p>
<p>We don't prescribe a single model. We're a place to explore the options, learn from people who've tried them, and build something that works for your team.</p>
<p>
Ghost Guild grew out of Baby Ghosts, a Canadian nonprofit that's been
supporting indie game developers since 2018. We noticed a gap: game
developers interested in cooperative models had nowhere to learn,
practice, and connect with others doing the same work.
</p>
<p>
Ghost Guild is the response &mdash; a membership program where
developers at every stage of cooperative practice can find resources,
events, mentorship, and community.
</p>
<p>
We don't prescribe a single model. We're a place to explore the
options, learn from people who've tried them, and build something that
works for your team.
</p>
</div>
</div>
<!-- CONTENT AREA WITH EVENTS SIDEBAR -->
<div class="content-area">
<div class="content-main">
<!-- THE CIRCLES -->
<div class="about-section" id="circles">
<div class="section-label">The Circles</div>
<div class="circles-grid">
<div id="community" class="circle-cell">
<h3 style="color: var(--c-community);">Community</h3>
<h3 style="color: var(--c-community)">Community</h3>
<div class="circle-subtitle">"The open hall"</div>
<p>For anyone exploring cooperative models. Wiki access, public events, Slack community, monthly meetings.</p>
<p>
For anyone exploring cooperative models. Wiki access, public
events, Slack community, monthly meetings.
</p>
</div>
<div id="founder" class="circle-cell">
<h3 style="color: var(--c-founder);">Founder</h3>
<h3 style="color: var(--c-founder)">Founder</h3>
<div class="circle-subtitle">"The workshop"</div>
<p>For people actively building cooperatives. Peer accelerator, mentorship, governance templates.</p>
<p>
For people actively building cooperatives. Peer accelerator,
mentorship, governance templates.
</p>
</div>
<div id="practitioner" class="circle-cell">
<h3 style="color: var(--c-practitioner);">Practitioner</h3>
<h3 style="color: var(--c-practitioner)">Practitioner</h3>
<div class="circle-subtitle">"The alcove"</div>
<p>For experienced practitioners. Mentoring, teaching, shaping the program direction.</p>
<p>
For experienced practitioners. Mentoring, teaching, shaping the
program direction.
</p>
</div>
</div>
</div>
<!-- HOW CONTRIBUTION WORKS -->
<div class="about-section">
<div class="section-label">How Contribution Works</div>
<p>Membership is $0&ndash;50/month, pay what you can. Nobody is excluded for lack of funds. Your contribution supports infrastructure, events, and community resources.</p>
<ul class="tier-list">
<li><span class="tier-amt">$0</span> I need support right now</li>
<li><span class="tier-amt">$5</span> I can contribute</li>
<li><span class="tier-amt">$15</span> I can sustain the community</li>
<li><span class="tier-amt">$30</span> I can support others too</li>
<li><span class="tier-amt">$50</span> I want to sponsor multiple members</li>
</ul>
</div>
<!-- COMMUNITY -->
<div class="about-section">
<div class="section-label">Community</div>
<p>We gather in Slack, at monthly meetings, and through peer support sessions. The wiki is our shared knowledge base &mdash; growing as members contribute. Events range from workshops to social hangs to deep-dive series.</p>
<NuxtLink to="/join" class="cta">Join the Guild &rarr;</NuxtLink>
<!-- TWO-COL: CONTRIBUTION + COMMUNITY -->
<div class="two-col-row">
<div class="about-section">
<div class="section-label">How Contribution Works</div>
<p>
Membership is $0&ndash;50/month, pay what you can. Nobody is
excluded for lack of funds. Your contribution supports
infrastructure, events, and community resources.
</p>
<ul class="tier-list">
<li><span class="tier-amt">$0</span> I need support right now</li>
<li><span class="tier-amt">$5</span> I can contribute</li>
<li>
<span class="tier-amt">$15</span> I can sustain the community
</li>
<li>
<span class="tier-amt">$30</span> I can support others too
</li>
<li>
<span class="tier-amt">$50</span> I want to sponsor multiple
members
</li>
</ul>
</div>
<div class="about-section">
<div class="section-label">Community</div>
<p>
We gather in Slack, at monthly meetings, and through peer support
sessions. The wiki is our shared knowledge base &mdash; growing as
members contribute. Events range from workshops to social hangs to
deep-dive series.
</p>
<NuxtLink to="/join" class="cta">Join the Guild &rarr;</NuxtLink>
</div>
</div>
<!-- ABOUT BABY GHOSTS -->
<div class="about-section">
<div class="section-label">About Baby Ghosts</div>
<p>Ghost Guild is a program of Baby Ghosts, a Canadian nonprofit advancing cooperative models in game development. No tracking. No ads. No venture capital.</p>
<p><a href="https://babyghosts.fund" target="_blank">babyghosts.fund &rarr;</a></p>
<p>
Ghost Guild is a program of Baby Ghosts, a Canadian nonprofit
advancing cooperative models in game development. No tracking. No
ads. No venture capital.
</p>
<p>
<a href="https://babyghosts.fund" target="_blank"
>babyghosts.fund &rarr;</a
>
</p>
</div>
</div>
@ -75,10 +123,10 @@
</template>
<script setup>
const { data: upcomingEvents } = await useFetch('/api/events', {
const { data: upcomingEvents } = await useFetch("/api/events", {
query: { limit: 3, upcoming: true },
default: () => [],
})
});
</script>
<style scoped>
@ -104,7 +152,7 @@ const { data: upcomingEvents } = await useFetch('/api/events', {
align-self: stretch;
}
.about-hero-left h1 {
font-family: 'Brygada 1918', serif;
font-family: "Brygada 1918", serif;
font-size: 28px;
font-weight: 600;
color: var(--text-bright);
@ -176,9 +224,11 @@ const { data: upcomingEvents } = await useFetch('/api/events', {
padding: 20px;
border-right: 1px dashed var(--border);
}
.circle-cell:last-child { border-right: none; }
.circle-cell:last-child {
border-right: none;
}
.circle-cell h3 {
font-family: 'Brygada 1918', serif;
font-family: "Brygada 1918", serif;
font-size: 18px;
font-weight: 500;
line-height: 1.2;
@ -196,6 +246,19 @@ const { data: upcomingEvents } = await useFetch('/api/events', {
line-height: 1.65;
}
/* ---- TWO-COL ROW ---- */
.two-col-row {
display: grid;
grid-template-columns: 1fr 1fr;
border-bottom: 1px dashed var(--border);
}
.two-col-row .about-section {
border-bottom: none;
}
.two-col-row .about-section:first-child {
border-right: 1px dashed var(--border);
}
/* ---- TIER LIST ---- */
.tier-list {
list-style: none;
@ -209,7 +272,9 @@ const { data: upcomingEvents } = await useFetch('/api/events', {
display: flex;
gap: 12px;
}
.tier-list li:last-child { border-bottom: none; }
.tier-list li:last-child {
border-bottom: none;
}
.tier-amt {
color: var(--text-bright);
font-weight: 600;
@ -218,13 +283,26 @@ const { data: upcomingEvents } = await useFetch('/api/events', {
/* ---- RESPONSIVE ---- */
@media (max-width: 1024px) {
.content-area { grid-template-columns: 1fr; }
.circles-grid { grid-template-columns: 1fr; }
.content-area {
grid-template-columns: 1fr;
}
.circles-grid {
grid-template-columns: 1fr;
}
.circle-cell {
border-right: none;
border-bottom: 1px dashed var(--border);
}
.circle-cell:last-child { border-bottom: none; }
.circle-cell:last-child {
border-bottom: none;
}
.two-col-row {
grid-template-columns: 1fr;
}
.two-col-row .about-section:first-child {
border-right: none;
border-bottom: 1px dashed var(--border);
}
}
@media (max-width: 768px) {
.about-hero {

147
app/pages/index.vue
View file

@ -2,10 +2,18 @@
<div>
<!-- HERO -->
<div class="hero">
<h1>Ghost Guild is where game developers practice cooperative business models.</h1>
<p>Resources, events, and a community of people figuring it out. Three circles, no hierarchy. $0–50/mo, pay what you can.</p>
<h1>
Ghost Guild is where game developers practice cooperative business
models.
</h1>
<p>
Resources, events, and a community of people figuring it out. Three
circles, no hierarchy. $0–50/mo, pay what you can.
</p>
<div class="hero-links">
<NuxtLink to="/join" class="hero-link primary">Become a member</NuxtLink>
<NuxtLink to="/join" class="hero-link primary"
>Become a member</NuxtLink
>
<NuxtLink to="/wiki" class="hero-link">Read the wiki</NuxtLink>
<NuxtLink to="/about" class="hero-link">What is this?</NuxtLink>
</div>
@ -13,8 +21,14 @@
<!-- THREE CIRCLES -->
<div class="content-row">
<div v-for="circle in circleData" :key="circle.value" class="content-block">
<div class="label" :style="{ color: `var(--c-${circle.value})` }">{{ circle.label }}</div>
<div
v-for="circle in circleData"
:key="circle.value"
class="content-block"
>
<div class="label" :style="{ color: `var(--c-${circle.value})` }">
{{ circle.label }}
</div>
<h2>{{ circle.metaphor }}</h2>
<p>{{ circle.blurb }}</p>
<details>
@ -33,9 +47,11 @@
<div v-if="events?.length" class="event-list">
<div v-for="event in events" :key="event._id" class="event-item">
<div class="block-inset event-item-inner">
<span class="event-date">{{ formatDate(event.date) }}</span>
<span class="event-date">{{ formatDate(event.startDate) }}</span>
<span class="event-title">
<NuxtLink :to="`/events/${event._id}`">{{ event.title }}</NuxtLink>
<NuxtLink :to="`/events/${event._id}`">{{
event.title
}}</NuxtLink>
</span>
<CircleBadge v-if="event.circle" :circle="event.circle" />
</div>
@ -76,10 +92,23 @@
<!-- PARCHMENT INSET -->
<ParchmentInset>
<div class="label" style="color: var(--candle-faint); opacity: 0.6; margin-bottom: 12px;">From the Wiki</div>
<div
class="label"
style="color: var(--parch-text-dim); margin-bottom: 12px"
>
From the Wiki
</div>
<h2>What is a cooperative studio?</h2>
<p>A cooperative studio is a game development company owned and governed by the people who work there. Decisions are made collectively. Profits are shared according to contribution, not ownership stake.</p>
<p>The games industry is full of stories about crunch, layoffs, and studios that extract value from workers. Cooperatives are one alternative — not the only one, but one worth <a href="/wiki">practicing together</a>.</p>
<p>
A cooperative studio is a game development company owned and governed by
the people who work there. Decisions are made collectively. Profits are
shared according to contribution, not ownership stake.
</p>
<p>
The games industry is full of stories about crunch, layoffs, and studios
that extract value from workers. Cooperatives are one alternative — not
the only one, but one worth <a href="/wiki">practicing together</a>.
</p>
<p><a href="/wiki">Read more in the wiki &rarr;</a></p>
</ParchmentInset>
</div>
@ -88,42 +117,48 @@
<script setup>
definePageMeta({
layout: "default",
})
});
const { data: events } = await useFetch('/api/events', {
const { data: events } = await useFetch("/api/events", {
query: { limit: 4, upcoming: true },
default: () => [],
})
});
const circleData = [
{
value: 'community',
label: 'Community',
metaphor: 'The open hall',
blurb: 'Arrival, curiosity, orientation. For anyone exploring cooperative models in game development. Access the wiki, public events, and Slack.',
included: 'Wiki access, public events, Slack community, monthly guild meetings. Free or pay-what-you-can.',
value: "community",
label: "Community",
metaphor: "The open hall",
blurb:
"Arrival, curiosity, orientation. For anyone exploring cooperative models in game development. Access the wiki, public events, and Slack.",
included:
"Wiki access, public events, Slack community, monthly guild meetings. Free or pay-what-you-can.",
},
{
value: 'founder',
label: 'Founder',
metaphor: 'The workshop',
blurb: 'For people actively building cooperatives. Structured practice, peer support, templates, and hands-on resources.',
included: 'Everything in Community plus the peer accelerator, 1:1 mentorship matching, and Founder-only workshops.',
value: "founder",
label: "Founder",
metaphor: "The workshop",
blurb:
"For people actively building cooperatives. Structured practice, peer support, templates, and hands-on resources.",
included:
"Everything in Community plus the peer accelerator, 1:1 mentorship matching, and Founder-only workshops.",
},
{
value: 'practitioner',
label: 'Practitioner',
metaphor: 'The alcove',
blurb: 'Where experience is shared and knowledge given back. Teaching, advising, shaping the program itself.',
included: 'Everything in Founder plus the ability to mentor, propose events, contribute to the wiki, and help govern the Guild.',
value: "practitioner",
label: "Practitioner",
metaphor: "The alcove",
blurb:
"Where experience is shared and knowledge given back. Teaching, advising, shaping the program itself.",
included:
"Everything in Founder plus the ability to mentor, propose events, contribute to the wiki, and help govern the Guild.",
},
]
];
const formatDate = (dateStr) => {
if (!dateStr) return ''
const d = new Date(dateStr)
return d.toLocaleDateString('en-US', { month: 'short', day: 'numeric' })
}
if (!dateStr) return "";
const d = new Date(dateStr);
return d.toLocaleDateString("en-US", { month: "short", day: "numeric" });
};
</script>
<style scoped>
@ -133,7 +168,7 @@ const formatDate = (dateStr) => {
border-bottom: 1px dashed var(--border);
}
.hero h1 {
font-family: 'Brygada 1918', serif;
font-family: "Brygada 1918", serif;
font-size: 36px;
font-weight: 600;
color: var(--text-bright);
@ -200,9 +235,11 @@ const formatDate = (dateStr) => {
padding-left: 28px;
padding-right: 28px;
}
.content-block:last-child { border-right: none; }
.content-block:last-child {
border-right: none;
}
.content-block h2 {
font-family: 'Brygada 1918', serif;
font-family: "Brygada 1918", serif;
font-size: 18px;
font-weight: 500;
color: var(--text-bright);
@ -232,10 +269,10 @@ details summary {
list-style: none;
}
details summary::before {
content: '+ ';
content: "+ ";
}
details[open] summary::before {
content: '− ';
content: "− ";
}
details p {
margin-top: 8px;
@ -250,7 +287,7 @@ details p {
}
.event-item-inner {
display: grid;
grid-template-columns: 80px 1fr auto;
grid-template-columns: 60px 1fr auto;
gap: 16px;
align-items: baseline;
padding-top: 10px;
@ -260,10 +297,21 @@ details p {
.content-row.two-col .event-item:hover .event-item-inner {
padding-left: calc(28px + 4px);
}
.event-date { color: var(--text-faint); font-size: 12px; }
.event-title { color: var(--text); font-size: 13px; }
.event-title a { color: var(--text); text-decoration: none; }
.event-title a:hover { color: var(--candle); }
.event-date {
color: var(--text-faint);
font-size: 12px;
}
.event-title {
color: var(--text);
font-size: 13px;
}
.event-title a {
color: var(--text);
text-decoration: none;
}
.event-title a:hover {
color: var(--candle);
}
/* ---- WIKI LIST ---- */
.wiki-item {
@ -277,8 +325,13 @@ details p {
padding-top: 8px;
padding-bottom: 8px;
}
.wiki-item a { color: var(--text); text-decoration: none; }
.wiki-item a:hover { color: var(--candle); }
.wiki-item a {
color: var(--text);
text-decoration: none;
}
.wiki-item a:hover {
color: var(--candle);
}
.empty {
color: var(--text-faint);
@ -295,7 +348,9 @@ details p {
border-right: none;
border-bottom: 1px dashed var(--border);
}
.content-block:last-child { border-bottom: none; }
.content-block:last-child {
border-bottom: none;
}
.hero-links {
flex-direction: column;
gap: 8px;

437
app/pages/member/account.vue
View file

@ -3,18 +3,25 @@
<!-- Unauthenticated -->
<div v-if="!memberData" class="loading">
<p>Please sign in to access your account settings.</p>
<button class="btn btn-primary" @click="openLoginModal({ title: 'Sign in to manage your account' })">Sign In</button>
<button
class="btn btn-primary"
@click="openLoginModal({ title: 'Sign in to manage your account' })"
>
Sign In
</button>
</div>
<div v-else class="account-authenticated">
<!-- PAGE HEADER -->
<PageHeader title="Account Settings" subtitle="Manage your membership and billing" />
<PageHeader
title="Account Settings"
subtitle="Manage your membership and billing"
/>
<!-- CONTENT AREA WITH EVENTS SIDEBAR -->
<div class="content-area">
<div class="page-content">
<div class="account-columns">
<!-- LEFT COLUMN: Membership Status & Email -->
<div class="account-col-left">
<section class="account-section">
@ -24,24 +31,42 @@
<div class="membership-card">
<div class="membership-row">
<span class="membership-k">Status</span>
<span class="membership-v">
<span class="status-dot" :class="memberData.status || 'active'"></span>
{{ memberData.status || 'Active' }}
<span class="membership-v status-v">
<span
class="status-dot"
:class="memberData.status || 'active'"
></span>
<span>{{
formatStatus(memberData.status || "active")
}}</span>
</span>
</div>
<div class="membership-row">
<span class="membership-k">Circle</span>
<span class="membership-v" :style="{ color: `var(--c-${memberData.circle || 'community'})` }">
{{ memberData.circle || 'Community' }}
<span
class="membership-v"
:style="{
color: `var(--c-${memberData.circle || 'community'})`,
}"
>
{{
memberData.circle
? capitalise(memberData.circle)
: "Community"
}}
</span>
</div>
<div class="membership-row">
<span class="membership-k">Contribution</span>
<span class="membership-v">${{ memberData.contributionTier || 0 }} / month</span>
<span class="membership-v"
>${{ memberData.contributionTier || 0 }} / month</span
>
</div>
<div class="membership-row">
<span class="membership-k">Member since</span>
<span class="membership-v">{{ formatMemberSince(memberData.createdAt) }}</span>
<span class="membership-v">{{
formatMemberSince(memberData.createdAt)
}}</span>
</div>
</div>
</div>
@ -50,10 +75,50 @@
<section class="account-section">
<div class="account-col-inset">
<div class="section-label">Email</div>
<div class="email-display">
<div v-if="!showEmailEdit" class="email-display">
<span class="email-value">{{ memberData.email }}</span>
<button
class="btn btn-inline"
@click="showEmailEdit = true"
>
Change
</button>
</div>
<div v-else class="email-edit">
<div class="field">
<label>New email address</label>
<input
type="email"
v-model="newEmail"
placeholder="you@example.com"
@keydown.enter="handleUpdateEmail"
@keydown.escape="cancelEmailEdit"
autofocus
/>
</div>
<div class="email-edit-actions">
<button
class="btn btn-primary"
@click="handleUpdateEmail"
:disabled="isUpdatingEmail || !newEmail.trim()"
>
{{ isUpdatingEmail ? "Saving…" : "Save" }}
</button>
<button
class="btn"
@click="cancelEmailEdit"
:disabled="isUpdatingEmail"
>
Cancel
</button>
</div>
</div>
<div class="email-hint">
Used for login magic links and notifications
</div>
<div class="email-hint">Used for login magic links and notifications</div>
</div>
</section>
@ -61,17 +126,34 @@
<div class="account-col-inset">
<div class="section-label danger">Danger Zone</div>
<div class="danger-zone">
<p>Cancelling your membership will immediately revoke access to member-only resources, events, and the Slack workspace. <strong>This action cannot be easily undone.</strong></p>
<p>
Cancelling your membership will immediately revoke access
to member-only resources, events, and the Slack workspace.
<strong>This action cannot be easily undone.</strong>
</p>
<div v-if="showCancelConfirm" class="cancel-confirm">
<p class="cancel-confirm-prompt">Are you sure? This cannot be easily undone.</p>
<p class="cancel-confirm-prompt">
Are you sure? This cannot be easily undone.
</p>
<div class="cancel-confirm-actions">
<button class="btn btn-danger" @click="confirmCancelMembership" :disabled="isCancelling">
{{ isCancelling ? 'Cancelling...' : 'Yes, Cancel' }}
<button
class="btn btn-danger"
@click="confirmCancelMembership"
:disabled="isCancelling"
>
{{ isCancelling ? "Cancelling…" : "Yes, Cancel" }}
</button>
<button class="btn" @click="showCancelConfirm = false">
Nevermind
</button>
<button class="btn" @click="showCancelConfirm = false">Nevermind</button>
</div>
</div>
<button v-else class="btn btn-danger" @click="handleCancelMembership" :disabled="isCancelling">
<button
v-else
class="btn btn-danger"
@click="handleCancelMembership"
:disabled="isCancelling"
>
Cancel Membership
</button>
</div>
@ -86,13 +168,18 @@
<div class="section-label">Change Contribution</div>
<TierPicker v-model="selectedTier" :tiers="tiers" />
<div class="tier-hint">Changes take effect on your next billing cycle</div>
<div class="tier-hint">
Changes take effect on your next billing cycle
</div>
<button
class="btn btn-primary btn-section"
@click="handleUpdateTier"
:disabled="selectedTier === Number(memberData.contributionTier || 0) || isUpdating"
:disabled="
selectedTier ===
Number(memberData.contributionTier || 0) || isUpdating
"
>
{{ isUpdating ? 'Updating...' : 'Update Contribution' }}
{{ isUpdating ? "Updating…" : "Update Contribution" }}
</button>
</div>
</section>
@ -101,13 +188,18 @@
<div class="account-col-inset">
<div class="section-label">Change Circle</div>
<CirclePicker v-model="selectedCircle" :circles="circleOptions" />
<CirclePicker
v-model="selectedCircle"
:circles="circleOptions"
/>
<button
class="btn btn-primary btn-section"
@click="handleUpdateCircle"
:disabled="selectedCircle === memberData.circle || isUpdating"
:disabled="
selectedCircle === memberData.circle || isUpdating
"
>
{{ isUpdating ? 'Updating...' : 'Update Circle' }}
{{ isUpdating ? "Updating…" : "Update Circle" }}
</button>
</div>
</section>
@ -124,107 +216,187 @@
<script setup>
definePageMeta({
middleware: 'auth',
})
middleware: "auth",
});
const { memberData, checkMemberStatus } = useAuth()
const { openLoginModal } = useLoginModal()
const toast = useToast()
const { memberData, checkMemberStatus } = useAuth();
const { openLoginModal } = useLoginModal();
const toast = useToast();
const selectedTier = ref(0)
const selectedCircle = ref('')
const isUpdating = ref(false)
const isCancelling = ref(false)
const selectedTier = ref(0);
const selectedCircle = ref("");
const isUpdating = ref(false);
const isCancelling = ref(false);
// Email edit state
const showEmailEdit = ref(false);
const newEmail = ref("");
const isUpdatingEmail = ref(false);
const tiers = [
{ amount: 0, display: '$0', label: 'Solidarity' },
{ amount: 5, display: '$5', label: 'Supporter' },
{ amount: 15, display: '$15', label: 'Sustainer' },
{ amount: 30, display: '$30', label: 'Builder' },
{ amount: 50, display: '$50', label: 'Champion' },
]
{ amount: 0, display: "$0", label: "Solidarity" },
{ amount: 5, display: "$5", label: "Supporter" },
{ amount: 15, display: "$15", label: "Sustainer" },
{ amount: 30, display: "$30", label: "Builder" },
{ amount: 50, display: "$50", label: "Champion" },
];
const circleOptions = [
{ value: 'community', label: 'Community', description: 'For anyone interested in cooperative game dev. Access discussions, events, and resources.' },
{ value: 'founder', label: 'Founder', description: 'For those actively building or running a cooperative studio. Peer support and deep dives.' },
{ value: 'practitioner', label: 'Practitioner', description: 'For professionals advising co-ops: lawyers, accountants, facilitators, consultants.' },
]
{
value: "community",
label: "Community",
description:
"For anyone interested in cooperative game dev. Access discussions, events, and resources.",
},
{
value: "founder",
label: "Founder",
description:
"For those actively building or running a cooperative studio. Peer support and deep dives.",
},
{
value: "practitioner",
label: "Practitioner",
description:
"For professionals advising co-ops: lawyers, accountants, facilitators, consultants.",
},
];
const STATUS_LABELS = {
active: "Active",
pending_payment: "Pending",
suspended: "Suspended",
cancelled: "Cancelled",
};
const formatStatus = (s) => STATUS_LABELS[s] || s;
const capitalise = (s) => (s ? s.charAt(0).toUpperCase() + s.slice(1) : s);
// Initialize from member data
watchEffect(() => {
if (memberData.value) {
selectedTier.value = Number(memberData.value.contributionTier || 0)
selectedCircle.value = memberData.value.circle || 'community'
selectedTier.value = Number(memberData.value.contributionTier || 0);
selectedCircle.value = memberData.value.circle || "community";
}
})
});
const { data: upcomingEvents } = await useFetch('/api/events', {
const { data: upcomingEvents } = await useFetch("/api/events", {
query: { limit: 3, upcoming: true },
default: () => [],
})
});
const formatMemberSince = (dateStr) => {
if (!dateStr) return ''
return new Date(dateStr).toLocaleDateString('en-US', { month: 'long', year: 'numeric' })
}
if (!dateStr) return "";
return new Date(dateStr).toLocaleDateString("en-US", {
month: "long",
year: "numeric",
});
};
const handleUpdateTier = async () => {
isUpdating.value = true
isUpdating.value = true;
try {
await $fetch('/api/members/update-contribution', {
method: 'POST',
await $fetch("/api/members/update-contribution", {
method: "POST",
body: { contributionTier: String(selectedTier.value) },
})
await checkMemberStatus()
toast.add({ title: 'Contribution updated', color: 'green' })
});
await checkMemberStatus();
toast.add({ title: "Contribution updated", color: "green" });
} catch (err) {
selectedTier.value = Number(memberData.value?.contributionTier || 0)
toast.add({ title: 'Update failed', description: err.data?.statusMessage || 'Please try again.', color: 'red' })
selectedTier.value = Number(memberData.value?.contributionTier || 0);
toast.add({
title: "Update failed",
description: err.data?.statusMessage || "Please try again.",
color: "red",
});
} finally {
isUpdating.value = false
isUpdating.value = false;
}
}
};
const handleUpdateCircle = async () => {
isUpdating.value = true
isUpdating.value = true;
try {
await $fetch('/api/members/update-circle', {
method: 'POST',
await $fetch("/api/members/update-circle", {
method: "POST",
body: { circle: selectedCircle.value },
})
await checkMemberStatus()
toast.add({ title: 'Circle updated', color: 'green' })
});
await checkMemberStatus();
toast.add({ title: "Circle updated", color: "green" });
} catch (err) {
selectedCircle.value = memberData.value?.circle || 'community'
toast.add({ title: 'Update failed', description: err.data?.statusMessage || 'Please try again.', color: 'red' })
selectedCircle.value = memberData.value?.circle || "community";
toast.add({
title: "Update failed",
description: err.data?.statusMessage || "Please try again.",
color: "red",
});
} finally {
isUpdating.value = false
isUpdating.value = false;
}
}
};
const showCancelConfirm = ref(false)
const cancelEmailEdit = () => {
showEmailEdit.value = false;
newEmail.value = "";
};
const handleUpdateEmail = async () => {
const trimmed = newEmail.value.trim();
if (!trimmed) return;
isUpdatingEmail.value = true;
try {
await $fetch("/api/members/update-email", {
method: "POST",
body: { email: trimmed },
});
await checkMemberStatus();
cancelEmailEdit();
toast.add({ title: "Email updated", color: "green" });
} catch (err) {
toast.add({
title: "Update failed",
description: err.data?.statusMessage || "Please try again.",
color: "red",
});
} finally {
isUpdatingEmail.value = false;
}
};
const showCancelConfirm = ref(false);
const handleCancelMembership = () => {
showCancelConfirm.value = true
}
showCancelConfirm.value = true;
};
const confirmCancelMembership = async () => {
showCancelConfirm.value = false
isCancelling.value = true
showCancelConfirm.value = false;
isCancelling.value = true;
try {
const result = await $fetch('/api/members/cancel-subscription', { method: 'POST' })
await checkMemberStatus()
if (result.message === 'No active subscription to cancel') {
toast.add({ title: 'No active subscription', description: 'You are on the free tier — nothing to cancel.', color: 'neutral' })
const result = await $fetch("/api/members/cancel-subscription", {
method: "POST",
});
await checkMemberStatus();
if (result.message === "No active subscription to cancel") {
toast.add({
title: "No active subscription",
description: "You are on the free tier — nothing to cancel.",
color: "neutral",
});
} else {
toast.add({ title: 'Membership cancelled', color: 'orange' })
toast.add({ title: "Membership cancelled", color: "orange" });
}
} catch (err) {
toast.add({ title: 'Cancellation failed', description: err.data?.statusMessage || 'Please try again.', color: 'red' })
toast.add({
title: "Cancellation failed",
description: err.data?.statusMessage || "Please try again.",
color: "red",
});
} finally {
isCancelling.value = false
isCancelling.value = false;
}
}
};
</script>
<style scoped>
@ -286,18 +458,19 @@ const confirmCancelMembership = async () => {
border-right: 1px dashed var(--border);
}
/* Full-column rules: border on block-level section (no hr / flex quirks) */
/* Full-column rules: border on block-level section */
.account-section {
width: 100%;
min-width: 0;
}
.account-section + .account-section {
margin-top: 20px;
margin-top: 24px;
border-top: 1px dashed var(--border);
padding-top: 14px;
padding-top: 20px;
}
.account-section + .account-section.account-section--danger {
border-top-color: var(--ember);
margin-top: 24px;
padding-top: 20px;
}
.account-col-left > .account-section:first-child .account-col-inset,
@ -330,7 +503,7 @@ const confirmCancelMembership = async () => {
display: grid;
grid-template-columns: 120px 1fr;
gap: 0 12px;
align-items: baseline;
align-items: center;
padding: 10px 20px;
font-size: 12px;
border-bottom: 1px dashed var(--border);
@ -345,42 +518,97 @@ const confirmCancelMembership = async () => {
color: var(--text);
}
/* Status dot — flex row so gap is exact, no whitespace-node gap */
.status-v {
display: inline-flex;
align-items: center;
gap: 5px;
}
.status-dot {
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
margin-right: 4px;
vertical-align: middle;
flex-shrink: 0;
}
.status-dot.active {
background: var(--green);
}
.status-dot.suspended {
background: var(--ember);
}
.status-dot.cancelled {
background: var(--text-faint);
}
.status-dot.pending_payment {
background: var(--candle);
}
.status-dot.active { background: var(--green); }
.status-dot.suspended { background: var(--ember); }
.status-dot.cancelled { background: var(--text-faint); }
.status-dot.pending_payment { background: var(--candle); }
/* ---- EMAIL ---- */
.email-display {
display: flex;
align-items: baseline;
gap: 12px;
gap: 10px;
font-size: 13px;
margin-bottom: 6px;
}
.email-value {
color: var(--text);
}
.btn-inline {
font-size: 10px;
letter-spacing: 0.06em;
padding: 2px 8px;
border-style: dashed;
line-height: 1.6;
}
.email-edit {
margin-bottom: 6px;
}
.email-edit .field {
margin-bottom: 8px;
}
.email-edit .field label {
font-size: 10px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-faint);
margin-bottom: 3px;
display: block;
}
.email-edit .field input {
width: 100%;
padding: 5px 8px;
font-family: "Commit Mono", monospace;
font-size: 13px;
background: var(--input-bg);
border: 1px solid var(--border);
color: var(--text);
outline: none;
}
.email-edit .field input:focus {
border-color: var(--candle);
}
.email-edit-actions {
display: flex;
gap: 8px;
}
.email-hint {
font-size: 11px;
color: var(--text-faint);
margin-top: 6px;
}
/* ---- DANGER ZONE ---- */
.section-label.danger {
.account-section--danger {
background: var(--ember-bg);
}
.account-section--danger .section-label.danger {
color: var(--ember);
}
.danger-zone p {
font-size: 12px;
.account-section--danger .danger-zone p {
color: var(--text-dim);
font-size: 12px;
line-height: 1.7;
margin-bottom: 12px;
max-width: 400px;
@ -390,6 +618,7 @@ const confirmCancelMembership = async () => {
.cancel-confirm {
border: 1px dashed var(--ember);
padding: 14px 16px;
margin-bottom: 0;
}
.cancel-confirm-prompt {
font-size: 12px;
@ -415,8 +644,12 @@ const confirmCancelMembership = async () => {
/* ---- RESPONSIVE ---- */
@media (max-width: 1024px) {
.content-area { grid-template-columns: 1fr; }
.account-columns { grid-template-columns: 1fr; }
.content-area {
grid-template-columns: 1fr;
}
.account-columns {
grid-template-columns: 1fr;
}
.account-col-left {
border-right: none;
border-bottom: 1px dashed var(--border);

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

3
app/pages/member/index.vue Normal file
View file

@ -0,0 +1,3 @@
<script setup>
await navigateTo('/members', { redirectCode: 301 })
</script>

886
app/pages/member/profile.vue
View file

File diff suppressed because it is too large Load diff

514
app/pages/members/[id].vue Normal file
View file

@ -0,0 +1,514 @@
<template>
<div class="profile-page">
<!-- Loading State -->
<div v-if="pending" class="loading-state">
<p>Loading profile...</p>
</div>
<!-- Error / 404 State -->
<div v-else-if="fetchError || !member" class="error-state">
<p class="error-title">Member not found</p>
<p class="error-sub">This profile doesn't exist or isn't public.</p>
<NuxtLink to="/members" class="btn">← Back to Members</NuxtLink>
</div>
<!-- Profile Content -->
<div v-else class="profile-content">
<!-- Header Area -->
<div class="profile-header">
<div class="profile-avatar">
<img
v-if="member.avatar"
:src="`/ghosties/Ghost-${member.avatar.charAt(0).toUpperCase() + member.avatar.slice(1)}.png`"
:alt="member.name"
class="profile-avatar-img"
/>
<span v-else class="profile-initials">{{
getInitials(member.name)
}}</span>
</div>
<div class="profile-identity">
<h1 class="profile-name">
{{ member.name }}
<span v-if="member.pronouns" class="profile-pronouns">{{
member.pronouns
}}</span>
</h1>
<div class="profile-meta">
<span v-if="member.circle" class="badge" :class="member.circle">{{
circleLabels[member.circle]
}}</span>
<template v-if="member.studio">
<span class="meta-sep">&middot;</span>
<span class="profile-studio">{{ member.studio }}</span>
</template>
</div>
</div>
</div>
<!-- Bio Section -->
<div v-if="member.bio" class="profile-section">
<div class="section-label">About</div>
<div class="profile-bio" v-html="renderMarkdown(member.bio)"></div>
</div>
<!-- Location & Timezone -->
<div v-if="member.location || member.timeZone" class="profile-section">
<div class="section-label">Location</div>
<p class="profile-detail">
{{ [member.location, member.timeZone].filter(Boolean).join(" · ") }}
</p>
</div>
<!-- Offering Section -->
<div
v-if="member.offering?.tags?.length || member.offering?.text"
class="profile-section"
>
<div class="section-label">Offering</div>
<div v-if="member.offering.tags?.length" class="tag-list">
<span
v-for="tag in member.offering.tags"
:key="tag"
class="tag-pill"
>{{ tag }}</span
>
</div>
<p v-if="member.offering.text" class="profile-detail offering-text">
{{ member.offering.text }}
</p>
</div>
<!-- Looking For Section -->
<div
v-if="member.lookingFor?.tags?.length || member.lookingFor?.text"
class="profile-section"
>
<div class="section-label">Looking for</div>
<div v-if="member.lookingFor.tags?.length" class="tag-list">
<span
v-for="tag in member.lookingFor.tags"
:key="tag"
class="tag-pill"
>{{ tag }}</span
>
</div>
<p v-if="member.lookingFor.text" class="profile-detail looking-text">
{{ member.lookingFor.text }}
</p>
</div>
<!-- Social Links -->
<div
v-if="
member.socialLinks && Object.values(member.socialLinks).some(Boolean)
"
class="profile-section"
>
<div class="section-label">Links</div>
<div class="social-links">
<a
v-if="member.socialLinks.website"
:href="member.socialLinks.website"
target="_blank"
rel="noopener noreferrer"
class="social-link"
>Website</a
>
<a
v-if="member.socialLinks.itch"
:href="member.socialLinks.itch"
target="_blank"
rel="noopener noreferrer"
class="social-link"
>itch.io</a
>
<a
v-if="member.socialLinks.mastodon"
:href="member.socialLinks.mastodon"
target="_blank"
rel="noopener noreferrer"
class="social-link"
>Mastodon</a
>
<a
v-if="member.socialLinks.bluesky"
:href="member.socialLinks.bluesky"
target="_blank"
rel="noopener noreferrer"
class="social-link"
>Bluesky</a
>
<a
v-if="member.socialLinks.linkedin"
:href="member.socialLinks.linkedin"
target="_blank"
rel="noopener noreferrer"
class="social-link"
>LinkedIn</a
>
</div>
</div>
<!-- Peer Support Section -->
<div v-if="member.peerSupport?.enabled" class="profile-section">
<div class="section-label">Peer Support</div>
<div v-if="member.peerSupport.skillTopics?.length" class="peer-group">
<span class="peer-label">Skills:</span>
<div class="tag-list">
<span
v-for="topic in member.peerSupport.skillTopics"
:key="topic"
class="tag-pill"
>{{ topic }}</span
>
</div>
</div>
<div v-if="member.peerSupport.supportTopics?.length" class="peer-group">
<span class="peer-label">Topics:</span>
<div class="tag-list">
<span
v-for="topic in member.peerSupport.supportTopics"
:key="topic"
class="tag-pill"
>{{ topic }}</span
>
</div>
</div>
<p v-if="member.peerSupport.availability" class="profile-detail">
{{ member.peerSupport.availability }}
</p>
</div>
<!-- Auth Notice -->
<div v-if="!isAuthenticated" class="auth-notice">
<p>Sign in to see full profile details</p>
<button
type="button"
class="btn"
@click="
openLoginModal({
title: 'Sign in to see more',
description: 'Log in to view full member profiles',
})
"
>
Log In
</button>
</div>
<!-- Back Link -->
<div class="profile-back">
<NuxtLink to="/members" class="back-link">← Back to Members</NuxtLink>
</div>
</div>
</div>
</template>
<script setup>
const route = useRoute();
const { isAuthenticated } = useAuth();
const { openLoginModal } = useLoginModal();
const { render: renderMarkdown } = useMarkdown();
const id = route.params.id;
const circleLabels = {
community: "Community",
founder: "Founder",
practitioner: "Practitioner",
};
const getInitials = (name) => {
if (!name) return "?";
return name
.split(" ")
.map((w) => w[0])
.join("")
.toUpperCase()
.slice(0, 2);
};
// Fetch member data — no await so the component renders immediately (no Suspense)
const { data, pending, error: fetchError } = useFetch(`/api/members/${id}`);
const member = computed(() => data.value?.member || null);
// Page head
useHead({
title: computed(() =>
member.value
? `${member.value.name} — Ghost Guild`
: "Member Profile — Ghost Guild",
),
});
</script>
<style scoped>
.profile-page {
max-width: 720px;
margin: 0 auto;
padding: 0 24px 60px;
}
/* ---- LOADING ---- */
.loading-state {
padding: 80px 24px;
text-align: center;
color: var(--text-faint);
font-size: 12px;
font-family: "Commit Mono", monospace;
}
/* ---- ERROR / 404 ---- */
.error-state {
padding: 80px 24px;
text-align: center;
}
.error-title {
font-family: "Brygada 1918", serif;
font-size: 20px;
color: var(--text-dim);
margin-bottom: 6px;
}
.error-sub {
font-size: 12px;
color: var(--text-faint);
margin-bottom: 20px;
}
/* ---- HEADER ---- */
.profile-header {
display: flex;
align-items: center;
gap: 16px;
padding: 28px 0 24px;
border-bottom: 1px dashed var(--border);
}
.profile-avatar {
width: 48px;
height: 48px;
background: var(--surface);
border: 1px dashed var(--border);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
overflow: hidden;
}
.profile-avatar-img {
width: 42px;
height: 42px;
object-fit: contain;
}
.profile-initials {
font-family: "Commit Mono", monospace;
font-size: 14px;
color: var(--text-faint);
font-weight: 600;
}
.profile-identity {
min-width: 0;
}
.profile-name {
font-family: "Brygada 1918", serif;
font-size: 22px;
font-weight: 600;
color: var(--text-bright);
margin: 0;
line-height: 1.3;
}
.profile-pronouns {
font-family: "Commit Mono", monospace;
font-size: 12px;
color: var(--text-faint);
font-weight: 400;
margin-left: 8px;
}
.profile-meta {
display: flex;
align-items: center;
gap: 8px;
margin-top: 4px;
font-size: 12px;
color: var(--text-dim);
}
.meta-sep {
color: var(--border);
}
.profile-studio {
font-family: "Commit Mono", monospace;
}
/* ---- SECTIONS ---- */
.profile-section {
padding: 20px 0;
border-bottom: 1px dashed var(--border);
}
.section-label {
font-family: "Commit Mono", monospace;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text-faint);
margin-bottom: 10px;
}
.profile-bio {
font-size: 13px;
color: var(--text-dim);
line-height: 1.7;
}
.profile-bio :deep(p) {
margin: 0 0 8px;
}
.profile-bio :deep(p:last-child) {
margin-bottom: 0;
}
.profile-bio :deep(a) {
color: var(--candle);
text-decoration: underline;
}
.profile-bio :deep(a:hover) {
color: var(--ember);
}
.profile-detail {
font-size: 13px;
color: var(--text-dim);
line-height: 1.6;
margin: 0;
}
.offering-text,
.looking-text {
margin-top: 8px;
}
/* ---- TAGS ---- */
.tag-list {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.tag-pill {
font-family: "Commit Mono", monospace;
font-size: 10px;
color: var(--text-dim);
padding: 2px 8px;
border: 1px dashed var(--border);
white-space: nowrap;
}
/* ---- SOCIAL LINKS ---- */
.social-links {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.social-link {
font-family: "Commit Mono", monospace;
font-size: 11px;
color: var(--candle);
text-decoration: none;
padding: 3px 10px;
border: 1px dashed var(--border);
transition: all 0.15s;
}
.social-link:hover {
border-color: var(--candle);
color: var(--text-bright);
}
/* ---- PEER SUPPORT ---- */
.peer-group {
margin-bottom: 10px;
}
.peer-group:last-child {
margin-bottom: 0;
}
.peer-label {
font-family: "Commit Mono", monospace;
font-size: 11px;
color: var(--text-faint);
display: block;
margin-bottom: 6px;
}
/* ---- AUTH NOTICE ---- */
.auth-notice {
padding: 20px;
margin-top: 24px;
border: 1px dashed var(--candle-faint, var(--border));
text-align: center;
}
.auth-notice p {
font-size: 12px;
color: var(--text-dim);
margin: 0 0 12px;
}
/* ---- BACK LINK ---- */
.profile-back {
padding: 24px 0;
}
.back-link {
font-family: "Commit Mono", monospace;
font-size: 12px;
color: var(--text-faint);
text-decoration: none;
transition: color 0.15s;
}
.back-link:hover {
color: var(--candle);
}
/* ---- RESPONSIVE ---- */
@media (max-width: 768px) {
.profile-page {
padding: 0 16px 40px;
}
.profile-header {
padding: 20px 0 18px;
gap: 12px;
}
.profile-name {
font-size: 18px;
}
.profile-pronouns {
display: block;
margin-left: 0;
margin-top: 2px;
}
.profile-section {
padding: 16px 0;
}
}
</style>

146
app/pages/members.vue → app/pages/members/index.vue
View file

@ -14,13 +14,17 @@
class="filter-search"
placeholder="Search members..."
@input="debouncedSearch"
>
/>
<select
v-model="selectedCircle"
class="filter-select"
@change="loadMembers"
>
<option v-for="opt in circleOptions" :key="opt.value" :value="opt.value">
<option
v-for="opt in circleOptions"
:key="opt.value"
:value="opt.value"
>
{{ opt.label }}
</option>
</select>
@ -29,17 +33,25 @@
type="checkbox"
:checked="peerSupportFilter === 'true'"
@change="togglePeerSupport"
>
/>
Offering support
</label>
<span class="filter-count">Showing {{ totalCount }} member{{ totalCount === 1 ? '' : 's' }}</span>
<span class="filter-count"
>Showing {{ totalCount }} member{{ totalCount === 1 ? "" : "s" }}</span
>
</div>
<!-- Skills Filter -->
<div v-if="availableSkills && availableSkills.length > 0" class="skills-bar">
<div
v-if="availableSkills && availableSkills.length > 0"
class="skills-bar"
>
<span class="tag-label">Skills:</span>
<button
v-for="skill in (availableSkills || []).slice(0, showAllSkills ? undefined : 10)"
v-for="skill in (availableSkills || []).slice(
0,
showAllSkills ? undefined : 10,
)"
:key="skill"
type="button"
class="skill-tag"
@ -54,15 +66,23 @@
class="more-btn"
@click="showAllSkills = !showAllSkills"
>
{{ showAllSkills ? 'Show less' : `+${availableSkills.length - 10} more` }}
{{
showAllSkills ? "Show less" : `+${availableSkills.length - 10} more`
}}
</button>
</div>
<!-- Topics Filter -->
<div v-if="availableTopics && availableTopics.length > 0" class="skills-bar">
<div
v-if="availableTopics && availableTopics.length > 0"
class="skills-bar"
>
<span class="tag-label">Topics:</span>
<button
v-for="topic in (availableTopics || []).slice(0, showAllTopics ? undefined : 10)"
v-for="topic in (availableTopics || []).slice(
0,
showAllTopics ? undefined : 10,
)"
:key="topic"
type="button"
class="skill-tag"
@ -77,20 +97,16 @@
class="more-btn"
@click="showAllTopics = !showAllTopics"
>
{{ showAllTopics ? 'Show less' : `+${availableTopics.length - 10} more` }}
{{
showAllTopics ? "Show less" : `+${availableTopics.length - 10} more`
}}
</button>
</div>
<!-- Active Filters -->
<div
v-if="hasActiveFilters"
class="active-filters"
>
<div v-if="hasActiveFilters" class="active-filters">
<span class="af-label">Active filters:</span>
<span
v-if="selectedCircle && selectedCircle !== 'all'"
class="af-tag"
>
<span v-if="selectedCircle && selectedCircle !== 'all'" class="af-tag">
{{ circleLabels[selectedCircle] }}
<button type="button" @click="clearCircleFilter">&times;</button>
</span>
@ -101,19 +117,11 @@
Offering Peer Support
<button type="button" @click="clearPeerSupportFilter">&times;</button>
</span>
<span
v-for="skill in selectedSkills"
:key="'s-' + skill"
class="af-tag"
>
<span v-for="skill in selectedSkills" :key="'s-' + skill" class="af-tag">
{{ skill }}
<button type="button" @click="toggleSkill(skill)">&times;</button>
</span>
<span
v-for="topic in selectedTopics"
:key="'t-' + topic"
class="af-tag"
>
<span v-for="topic in selectedTopics" :key="'t-' + topic" class="af-tag">
{{ topic }}
<button type="button" @click="toggleTopic(topic)">&times;</button>
</span>
@ -134,11 +142,7 @@
<!-- Member Grid -->
<div v-else-if="members.length > 0" class="member-grid">
<div
v-for="member in members"
:key="member._id"
class="member-card"
>
<div v-for="member in members" :key="member._id" class="member-card">
<div class="mc-head">
<div class="mc-avatar">
<img
@ -146,17 +150,22 @@
:src="`/ghosties/Ghost-${member.avatar.charAt(0).toUpperCase() + member.avatar.slice(1)}.png`"
:alt="member.name"
class="mc-avatar-img"
>
/>
<span v-else>{{ getInitials(member.name) }}</span>
</div>
<div class="mc-info">
<div class="mc-name">
<NuxtLink v-if="isAuthenticated" :to="`/members/${member._id}`">{{ member.name }}</NuxtLink>
<span v-else>{{ member.name }}</span>
<span v-if="member.pronouns" class="mc-pronouns">{{ member.pronouns }}</span>
<NuxtLink :to="`/members/${member._id}`">{{
member.name
}}</NuxtLink>
<span v-if="member.pronouns" class="mc-pronouns">{{
member.pronouns
}}</span>
</div>
<div class="mc-meta">
<span class="badge" :class="member.circle">{{ circleLabels[member.circle] }}</span>
<span class="badge" :class="member.circle">{{
circleLabels[member.circle]
}}</span>
<template v-if="member.studio">
<span class="sep">&middot;</span>
{{ member.studio }}
@ -172,7 +181,9 @@
></div>
<div v-if="member.location || member.timeZone" class="mc-location">
{{ [member.location, member.timeZone].filter(Boolean).join(' \u00b7 ') }}
{{
[member.location, member.timeZone].filter(Boolean).join(" \u00b7 ")
}}
</div>
<!-- Skills tags -->
@ -185,7 +196,8 @@
v-for="tag in member.offering.tags"
:key="tag"
class="skill-tag"
>{{ tag }}</span>
>{{ tag }}</span
>
</div>
<!-- Looking for -->
@ -193,12 +205,14 @@
v-if="member.lookingFor?.tags && member.lookingFor.tags.length > 0"
class="mc-looking"
>
Looking for: {{ member.lookingFor.tags.join(', ') }}
Looking for: {{ member.lookingFor.tags.join(", ") }}
</div>
<!-- Peer support session link -->
<a
v-if="member.peerSupport?.enabled && member.peerSupport?.slackUsername"
v-if="
member.peerSupport?.enabled && member.peerSupport?.slackUsername
"
href="#"
class="mc-session"
@click.prevent="openSlackDM(member)"
@ -212,25 +226,33 @@
<div v-else class="empty-state">
<p class="empty-title">No members found</p>
<p class="empty-sub">Try adjusting your search or filters</p>
<button type="button" class="btn" @click="clearAllFilters">Clear Filters</button>
<button type="button" class="btn" @click="clearAllFilters">
Clear Filters
</button>
</div>
<!-- Load more / count -->
<div v-if="members.length > 0" class="load-more">
<span>Showing {{ members.length }} of {{ totalCount }} member{{ totalCount === 1 ? '' : 's' }}</span>
<span
>Showing {{ members.length }} of {{ totalCount }} member{{
totalCount === 1 ? "" : "s"
}}</span
>
</div>
<!-- Not Authenticated Notice -->
<div
v-if="!isAuthenticated && members.length > 0"
class="auth-notice"
>
<div v-if="!isAuthenticated && members.length > 0" class="auth-notice">
<p>Some member information is visible to members only.</p>
<div class="auth-actions">
<button
type="button"
class="btn"
@click="openLoginModal({ title: 'Sign in to see more', description: 'Log in to view full member profiles' })"
@click="
openLoginModal({
title: 'Sign in to see more',
description: 'Log in to view full member profiles',
})
"
>
Log In
</button>
@ -282,8 +304,8 @@ const peerSupportOptions = [
// Computed: has active filters
const hasActiveFilters = computed(() => {
return (
(selectedCircle.value && selectedCircle.value !== 'all') ||
(peerSupportFilter.value && peerSupportFilter.value !== 'all') ||
(selectedCircle.value && selectedCircle.value !== "all") ||
(peerSupportFilter.value && peerSupportFilter.value !== "all") ||
selectedSkills.value.length > 0 ||
selectedTopics.value.length > 0
);
@ -291,11 +313,11 @@ const hasActiveFilters = computed(() => {
// Get initials from name
const getInitials = (name) => {
if (!name) return '?';
if (!name) return "?";
return name
.split(' ')
.split(" ")
.map((w) => w[0])
.join('')
.join("")
.toUpperCase()
.slice(0, 2);
};
@ -335,7 +357,7 @@ const loadMembers = async () => {
// Toggle peer support checkbox
const togglePeerSupport = (e) => {
peerSupportFilter.value = e.target.checked ? 'true' : 'all';
peerSupportFilter.value = e.target.checked ? "true" : "all";
loadMembers();
};
@ -440,7 +462,7 @@ useHead({
}
.filter-search {
font-family: 'Commit Mono', monospace;
font-family: "Commit Mono", monospace;
font-size: 12px;
padding: 5px 12px;
border: 1px dashed var(--border);
@ -458,7 +480,7 @@ useHead({
}
.filter-select {
font-family: 'Commit Mono', monospace;
font-family: "Commit Mono", monospace;
font-size: 11px;
padding: 5px 10px;
border: 1px dashed var(--border);
@ -514,7 +536,7 @@ useHead({
}
.skills-bar .skill-tag {
font-family: 'Commit Mono', monospace;
font-family: "Commit Mono", monospace;
font-size: 10px;
color: var(--text-dim);
padding: 2px 8px;
@ -536,7 +558,7 @@ useHead({
}
.more-btn {
font-family: 'Commit Mono', monospace;
font-family: "Commit Mono", monospace;
font-size: 10px;
color: var(--candle);
background: none;
@ -587,7 +609,7 @@ useHead({
}
.clear-all-btn {
font-family: 'Commit Mono', monospace;
font-family: "Commit Mono", monospace;
font-size: 10px;
color: var(--candle);
background: none;
@ -743,7 +765,7 @@ useHead({
.mc-session {
display: inline-block;
margin-top: 6px;
font-family: 'Commit Mono', monospace;
font-family: "Commit Mono", monospace;
font-size: 10px;
letter-spacing: 0.04em;
text-transform: uppercase;
@ -778,7 +800,7 @@ useHead({
text-align: center;
}
.empty-title {
font-family: 'Brygada 1918', serif;
font-family: "Brygada 1918", serif;
font-size: 18px;
color: var(--text-dim);
margin-bottom: 6px;