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

UX/UI improvements.

Browse source
This commit is contained in:
Jennie Robinson Faber 2026-04-05 13:26:51 +01:00
parent 418d3cc402
commit 4e6f5d36b8
14 changed files with 1964 additions and 924 deletions
Download patch file Download diff file Expand all files Collapse all files

8
app/components/EventsMiniSidebar.vue
View file

@ -7,9 +7,11 @@
<div v-for="event in events" :key="event._id" class="em-item"> <div v-for="event in events" :key="event._id" class="em-item">
<div class="em-inset em-item-body"> <div class="em-inset em-item-body">
<span class="em-date">{{ formatDate(event.startDate) }}</span> <span class="em-date">{{ formatDate(event.startDate) }}</span>
<NuxtLink :to="`/events/${event._id}`" class="em-title">{{ <NuxtLink
event.title :to="`/events/${event.slug || event._id}`"
}}</NuxtLink> class="em-title"
>{{ event.title }}</NuxtLink
>
<span <span
v-if="event.circle" v-if="event.circle"
class="em-circle" class="em-circle"

16
app/components/TopStrip.vue
View file

@ -6,9 +6,13 @@
<NuxtLink to="/" class="breadcrumb-link">ghostguild.org</NuxtLink> <NuxtLink to="/" class="breadcrumb-link">ghostguild.org</NuxtLink>
<template v-for="(crumb, i) in breadcrumbs" :key="i"> <template v-for="(crumb, i) in breadcrumbs" :key="i">
<span class="breadcrumb-sep"> / </span> <span class="breadcrumb-sep"> / </span>
<NuxtLink :to="crumb.path" class="breadcrumb-link">{{ <NuxtLink
crumb.label v-if="i < breadcrumbs.length - 1"
}}</NuxtLink> :to="crumb.path"
class="breadcrumb-link"
>{{ crumb.label }}</NuxtLink
>
<span v-else class="breadcrumb-current">{{ crumb.label }}</span>
</template> </template>
</span> </span>
</slot> </slot>
@ -79,7 +83,8 @@ const breadcrumbs = computed(() => {
let path = ""; let path = "";
return segments.map((segment) => { return segments.map((segment) => {
path += "/" + segment.replace(/\s+/g, "-"); path += "/" + segment.replace(/\s+/g, "-");
return { label: segment, path }; const label = segment.charAt(0).toUpperCase() + segment.slice(1);
return { label, path };
}); });
}); });
</script> </script>
@ -130,4 +135,7 @@ const breadcrumbs = computed(() => {
.breadcrumb-sep { .breadcrumb-sep {
color: var(--text-faint); color: var(--text-faint);
} }
.breadcrumb-current {
color: var(--text-dim);
}
</style> </style>

104
app/layouts/admin.vue
View file

@ -1,6 +1,10 @@
<template> <template>
<div class="site"> <div class="site">
<a href="#main-content" class="sr-only focus:not-sr-only focus:absolute focus:z-[100] focus:p-3 focus:bg-[var(--bg)] focus:text-[var(--text)]">Skip to content</a> <a
href="#main-content"
class="sr-only focus:not-sr-only focus:absolute focus:z-[100] focus:p-3 focus:bg-[var(--bg)] focus:text-[var(--text)]"
>Skip to content</a
>
<!-- Desktop Sidebar --> <!-- Desktop Sidebar -->
<aside class="sidebar sidebar-desktop"> <aside class="sidebar sidebar-desktop">
<NuxtLink to="/" class="sidebar-brand">Ghost Guild</NuxtLink> <NuxtLink to="/" class="sidebar-brand">Ghost Guild</NuxtLink>
@ -14,17 +18,26 @@
</NuxtLink> </NuxtLink>
</li> </li>
<li> <li>
<NuxtLink to="/admin/members" :class="{ active: route.path.startsWith('/admin/members') }"> <NuxtLink
to="/admin/members"
:class="{ active: route.path.startsWith('/admin/members') }"
>
Members Members
</NuxtLink> </NuxtLink>
</li> </li>
<li> <li>
<NuxtLink to="/admin/events" :class="{ active: route.path.startsWith('/admin/events') }"> <NuxtLink
to="/admin/events"
:class="{ active: route.path.startsWith('/admin/events') }"
>
Events Events
</NuxtLink> </NuxtLink>
</li> </li>
<li> <li>
<NuxtLink to="/admin/series-management" :class="{ active: route.path.includes('/admin/series') }"> <NuxtLink
to="/admin/series-management"
:class="{ active: route.path.includes('/admin/series') }"
>
Series Series
</NuxtLink> </NuxtLink>
</li> </li>
@ -38,7 +51,7 @@
</div> </div>
<div class="sidebar-meta"> <div class="sidebar-meta">
<span class="admin-tag">admin</span><br> <span class="admin-tag">admin</span><br />
<a href="#" @click.prevent="logout">Sign out</a> <a href="#" @click.prevent="logout">Sign out</a>
</div> </div>
</aside> </aside>
@ -59,28 +72,49 @@
<USlideover v-model:open="isMobileMenuOpen" side="left"> <USlideover v-model:open="isMobileMenuOpen" side="left">
<template #body> <template #body>
<aside class="sidebar sidebar-mobile"> <aside class="sidebar sidebar-mobile">
<NuxtLink to="/" class="sidebar-brand" @click="isMobileMenuOpen = false">Ghost Guild</NuxtLink> <NuxtLink
to="/"
class="sidebar-brand"
@click="isMobileMenuOpen = false"
>Ghost Guild</NuxtLink
>
<div class="sidebar-body"> <div class="sidebar-body">
<div class="sidebar-section">Admin</div> <div class="sidebar-section">Admin</div>
<ul class="sidebar-nav"> <ul class="sidebar-nav">
<li> <li>
<NuxtLink to="/admin" :class="{ active: route.path === '/admin' }" @click="isMobileMenuOpen = false"> <NuxtLink
to="/admin"
:class="{ active: route.path === '/admin' }"
@click="isMobileMenuOpen = false"
>
Dashboard Dashboard
</NuxtLink> </NuxtLink>
</li> </li>
<li> <li>
<NuxtLink to="/admin/members" :class="{ active: route.path.startsWith('/admin/members') }" @click="isMobileMenuOpen = false"> <NuxtLink
to="/admin/members"
:class="{ active: route.path.startsWith('/admin/members') }"
@click="isMobileMenuOpen = false"
>
Members Members
</NuxtLink> </NuxtLink>
</li> </li>
<li> <li>
<NuxtLink to="/admin/events" :class="{ active: route.path.startsWith('/admin/events') }" @click="isMobileMenuOpen = false"> <NuxtLink
to="/admin/events"
:class="{ active: route.path.startsWith('/admin/events') }"
@click="isMobileMenuOpen = false"
>
Events Events
</NuxtLink> </NuxtLink>
</li> </li>
<li> <li>
<NuxtLink to="/admin/series-management" :class="{ active: route.path.includes('/admin/series') }" @click="isMobileMenuOpen = false"> <NuxtLink
to="/admin/series-management"
:class="{ active: route.path.includes('/admin/series') }"
@click="isMobileMenuOpen = false"
>
Series Series
</NuxtLink> </NuxtLink>
</li> </li>
@ -88,13 +122,23 @@
<div class="sidebar-section">Site</div> <div class="sidebar-section">Site</div>
<ul class="sidebar-nav"> <ul class="sidebar-nav">
<li><NuxtLink to="/member/dashboard" @click="isMobileMenuOpen = false">Your Dashboard</NuxtLink></li> <li>
<li><NuxtLink to="/" @click="isMobileMenuOpen = false">Public Site</NuxtLink></li> <NuxtLink
to="/member/dashboard"
@click="isMobileMenuOpen = false"
>Your Dashboard</NuxtLink
>
</li>
<li>
<NuxtLink to="/" @click="isMobileMenuOpen = false"
>Public Site</NuxtLink
>
</li>
</ul> </ul>
</div> </div>
<div class="sidebar-meta"> <div class="sidebar-meta">
<span class="admin-tag">admin</span><br> <span class="admin-tag">admin</span><br />
<a href="#" @click.prevent="logout">Sign out</a> <a href="#" @click.prevent="logout">Sign out</a>
</div> </div>
</aside> </aside>
@ -104,23 +148,29 @@
</template> </template>
<script setup> <script setup>
const route = useRoute() const route = useRoute();
const isMobileMenuOpen = ref(false) const isMobileMenuOpen = ref(false);
const pageBreadcrumbTitle = useState("pageBreadcrumbTitle", () => "");
const currentPageName = computed(() => { const currentPageName = computed(() => {
const path = route.path const path = route.path;
if (path === '/admin') return 'admin' if (path === "/admin") return "admin";
return path.slice(1).replace(/\//g, ' / ') const segments = path.slice(1).split("/");
}) if (pageBreadcrumbTitle.value && segments.length > 1) {
return [...segments.slice(0, -1), pageBreadcrumbTitle.value].join(" / ");
}
return segments.join(" / ");
});
const logout = async () => { const logout = async () => {
try { try {
await $fetch('/api/auth/logout', { method: 'POST' }) await $fetch("/api/auth/logout", { method: "POST" });
await navigateTo('/') await navigateTo("/");
} catch (error) { } catch (error) {
console.error('Logout failed:', error) console.error("Logout failed:", error);
} }
} };
</script> </script>
<style scoped> <style scoped>
@ -155,7 +205,7 @@ const logout = async () => {
.sidebar-brand { .sidebar-brand {
display: block; display: block;
font-family: 'Brygada 1918', serif; font-family: "Brygada 1918", serif;
font-size: 16px; font-size: 16px;
font-weight: 600; font-weight: 600;
color: var(--candle); color: var(--candle);
@ -163,7 +213,9 @@ const logout = async () => {
border-bottom: 1px dashed var(--border); border-bottom: 1px dashed var(--border);
text-decoration: none; text-decoration: none;
} }
.sidebar-brand:hover { text-decoration: none; } .sidebar-brand:hover {
text-decoration: none;
}
.sidebar-body { .sidebar-body {
flex: 1; flex: 1;
@ -239,7 +291,7 @@ const logout = async () => {
} }
.brand { .brand {
font-family: 'Brygada 1918', serif; font-family: "Brygada 1918", serif;
font-size: 16px; font-size: 16px;
font-weight: 600; font-weight: 600;
color: var(--candle); color: var(--candle);

28
app/layouts/default.vue
View file

@ -1,6 +1,10 @@
<template> <template>
<div class="site"> <div class="site">
<a href="#main-content" class="sr-only focus:not-sr-only focus:absolute focus:z-[100] focus:p-3 focus:bg-[var(--bg)] focus:text-[var(--text)]">Skip to content</a> <a
href="#main-content"
class="sr-only focus:not-sr-only focus:absolute focus:z-[100] focus:p-3 focus:bg-[var(--bg)] focus:text-[var(--text)]"
>Skip to content</a
>
<!-- Desktop Sidebar --> <!-- Desktop Sidebar -->
<AppNavigation class="sidebar-desktop" /> <AppNavigation class="sidebar-desktop" />
@ -24,20 +28,24 @@
<AppNavigation :is-mobile="true" @navigate="isMobileMenuOpen = false" /> <AppNavigation :is-mobile="true" @navigate="isMobileMenuOpen = false" />
</template> </template>
</USlideover> </USlideover>
</div> </div>
</template> </template>
<script setup> <script setup>
const isMobileMenuOpen = ref(false) const isMobileMenuOpen = ref(false);
const route = useRoute() const route = useRoute();
const pageBreadcrumbTitle = useState("pageBreadcrumbTitle", () => "");
const currentPageName = computed(() => { const currentPageName = computed(() => {
const path = route.path const path = route.path;
if (path === '/') return '' if (path === "/") return "";
// Convert /member/dashboard → member / dashboard const segments = path.slice(1).split("/");
return path.slice(1).replace(/\//g, ' / ') if (pageBreadcrumbTitle.value && segments.length > 1) {
}) return [...segments.slice(0, -1), pageBreadcrumbTitle.value].join(" / ");
}
return segments.join(" / ");
});
</script> </script>
<style scoped> <style scoped>
@ -71,7 +79,7 @@ const currentPageName = computed(() => {
} }
.brand { .brand {
font-family: 'Brygada 1918', serif; font-family: "Brygada 1918", serif;
font-size: 16px; font-size: 16px;
font-weight: 600; font-weight: 600;
color: var(--candle); color: var(--candle);

599
app/pages/admin/members.vue
View file

@ -8,7 +8,9 @@
<p>Manage members, contributions, and access</p> <p>Manage members, contributions, and access</p>
</div> </div>
<div class="header-actions"> <div class="header-actions">
<button class="btn" @click="showImportModal = true">Import CSV</button> <button class="btn" @click="showImportModal = true">
Import CSV
</button>
<button <button
class="btn" class="btn"
:disabled="selectedMemberIds.length === 0" :disabled="selectedMemberIds.length === 0"
@ -16,20 +18,19 @@
> >
Send Invites ({{ selectedMemberIds.length }}) Send Invites ({{ selectedMemberIds.length }})
</button> </button>
<button class="btn btn-primary" @click="showCreateModal = true">Add Member</button> <button class="btn btn-primary" @click="showCreateModal = true">
Add Member
</button>
</div> </div>
</div> </div>
</div> </div>
<!-- Search / Filter --> <!-- Search / Filter -->
<div class="filter-bar"> <div class="filter-bar">
<div class="field" style="margin-bottom: 0; flex: 1;"> <div class="field" style="margin-bottom: 0; flex: 1">
<input <input v-model="searchQuery" placeholder="Search members..." />
v-model="searchQuery"
placeholder="Search members..."
/>
</div> </div>
<div class="field" style="margin-bottom: 0;"> <div class="field" style="margin-bottom: 0">
<select v-model="circleFilter"> <select v-model="circleFilter">
<option value="">All Circles</option> <option value="">All Circles</option>
<option value="community">Community</option> <option value="community">Community</option>
@ -55,7 +56,13 @@
<tr> <tr>
<th class="col-check"> <th class="col-check">
<UCheckbox <UCheckbox
:model-value="allVisibleSelected ? true : (someVisibleSelected ? 'indeterminate' : false)" :model-value="
allVisibleSelected
? true
: someVisibleSelected
? 'indeterminate'
: false
"
@update:model-value="toggleSelectAll" @update:model-value="toggleSelectAll"
/> />
</th> </th>
@ -79,21 +86,34 @@
</td> </td>
<td class="col-name">{{ member.name }}</td> <td class="col-name">{{ member.name }}</td>
<td class="col-email">{{ member.email }}</td> <td class="col-email">{{ member.email }}</td>
<td><span class="badge" :class="member.circle">{{ member.circle }}</span></td> <td>
<span class="badge" :class="member.circle">{{
member.circle
}}</span>
</td>
<td class="col-mono">${{ member.contributionTier }}/mo</td> <td class="col-mono">${{ member.contributionTier }}/mo</td>
<td> <td>
<span :class="member.inviteEmailSent ? 'status-ok' : 'status-dim'"> <span
{{ member.inviteEmailSent ? 'Sent' : 'Not sent' }} :class="member.inviteEmailSent ? 'status-ok' : 'status-dim'"
>
{{ member.inviteEmailSent ? "Sent" : "Not sent" }}
</span> </span>
</td> </td>
<td> <td>
<span :class="member.slackInvited ? 'status-ok' : 'status-dim'"> <span :class="member.slackInvited ? 'status-ok' : 'status-dim'">
{{ member.slackInvited ? 'Invited' : 'Pending' }} {{ member.slackInvited ? "Invited" : "Pending" }}
</span> </span>
</td> </td>
<td class="col-mono col-date">{{ formatDate(member.createdAt) }}</td> <td class="col-mono col-date">
{{ formatDate(member.createdAt) }}
</td>
<td class="col-actions"> <td class="col-actions">
<button @click="sendSlackInvite(member)" class="link-btn">Slack</button> <NuxtLink :to="`/admin/members/${member._id}`" class="link-btn"
>View</NuxtLink
>
<button @click="sendSlackInvite(member)" class="link-btn">
Slack
</button>
<button @click="editMember(member)" class="link-btn">Edit</button> <button @click="editMember(member)" class="link-btn">Edit</button>
</td> </td>
</tr> </tr>
@ -106,11 +126,17 @@
</div> </div>
<!-- Create Member Modal --> <!-- Create Member Modal -->
<div v-if="showCreateModal" class="modal-overlay" @click.self="showCreateModal = false"> <div
v-if="showCreateModal"
class="modal-overlay"
@click.self="showCreateModal = false"
>
<div class="modal"> <div class="modal">
<div class="modal-header"> <div class="modal-header">
<h2>Add New Member</h2> <h2>Add New Member</h2>
<button class="modal-close" @click="showCreateModal = false">&times;</button> <button class="modal-close" @click="showCreateModal = false">
&times;
</button>
</div> </div>
<form @submit.prevent="createMember" class="modal-body"> <form @submit.prevent="createMember" class="modal-body">
@ -120,7 +146,12 @@
</div> </div>
<div class="field"> <div class="field">
<label>Email</label> <label>Email</label>
<input v-model="newMember.email" type="email" placeholder="email@example.com" required /> <input
v-model="newMember.email"
type="email"
placeholder="email@example.com"
required
/>
</div> </div>
<div class="field"> <div class="field">
<label>Circle</label> <label>Circle</label>
@ -141,9 +172,11 @@
</select> </select>
</div> </div>
<div class="modal-actions"> <div class="modal-actions">
<button type="button" class="btn" @click="showCreateModal = false">Cancel</button> <button type="button" class="btn" @click="showCreateModal = false">
Cancel
</button>
<button type="submit" class="btn btn-primary" :disabled="creating"> <button type="submit" class="btn btn-primary" :disabled="creating">
{{ creating ? 'Creating...' : 'Create Member' }} {{ creating ? "Creating..." : "Create Member" }}
</button> </button>
</div> </div>
</form> </form>
@ -151,7 +184,11 @@
</div> </div>
<!-- CSV Import Modal --> <!-- CSV Import Modal -->
<div v-if="showImportModal" class="modal-overlay" @click.self="closeImportModal"> <div
v-if="showImportModal"
class="modal-overlay"
@click.self="closeImportModal"
>
<div class="modal modal-wide"> <div class="modal modal-wide">
<div class="modal-header"> <div class="modal-header">
<h2>Import Members from CSV</h2> <h2>Import Members from CSV</h2>
@ -161,10 +198,12 @@
<div class="modal-body"> <div class="modal-body">
<div v-if="!csvRows.length"> <div v-if="!csvRows.length">
<p class="help-text"> <p class="help-text">
Upload a CSV with columns: <code>name,email,circle,contributionTier</code> Upload a CSV with columns:
<code>name,email,circle,contributionTier</code>
</p> </p>
<p class="help-text" style="margin-bottom: 12px;"> <p class="help-text" style="margin-bottom: 12px">
Valid circles: community, founder, practitioner. Valid tiers: 0, 5, 15, 30, 50. Valid circles: community, founder, practitioner. Valid tiers: 0,
5, 15, 30, 50.
</p> </p>
<input <input
ref="csvFileInput" ref="csvFileInput"
@ -181,11 +220,21 @@
<div v-if="csvRows.length"> <div v-if="csvRows.length">
<div class="csv-summary"> <div class="csv-summary">
<span>{{ csvRows.length }} row{{ csvRows.length !== 1 ? 's' : '' }} parsed.</span> <span
<span v-if="csvValidRows.length !== csvRows.length" class="csv-errors"> >{{ csvRows.length }} row{{
csvRows.length !== 1 ? "s" : ""
}}
parsed.</span
>
<span
v-if="csvValidRows.length !== csvRows.length"
class="csv-errors"
>
{{ csvRows.length - csvValidRows.length }} with errors. {{ csvRows.length - csvValidRows.length }} with errors.
</span> </span>
<button @click="resetCsvImport" class="link-btn">Choose different file</button> <button @click="resetCsvImport" class="link-btn">
Choose different file
</button>
</div> </div>
<div class="csv-table-wrap"> <div class="csv-table-wrap">
@ -200,9 +249,15 @@
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr v-for="(row, i) in csvRows" :key="i" :class="{ 'row-error': row.error }"> <tr
v-for="(row, i) in csvRows"
:key="i"
:class="{ 'row-error': row.error }"
>
<td> <td>
<span v-if="row.error" class="status-error">{{ row.error }}</span> <span v-if="row.error" class="status-error">{{
row.error
}}</span>
<span v-else class="status-ok">OK</span> <span v-else class="status-ok">OK</span>
</td> </td>
<td>{{ row.name }}</td> <td>{{ row.name }}</td>
@ -217,13 +272,17 @@
<div v-if="importResults" class="results-box"> <div v-if="importResults" class="results-box">
<strong>Import complete</strong> <strong>Import complete</strong>
<p class="status-ok">{{ importResults.created }} created</p> <p class="status-ok">{{ importResults.created }} created</p>
<p v-if="importResults.failed" class="status-error">{{ importResults.failed }} failed</p> <p v-if="importResults.failed" class="status-error">
<div v-if="importResults.results?.some(r => !r.success)"> {{ importResults.failed }} failed
</p>
<div v-if="importResults.results?.some((r) => !r.success)">
<p <p
v-for="fail in importResults.results.filter(r => !r.success)" v-for="fail in importResults.results.filter(
(r) => !r.success,
)"
:key="fail.email" :key="fail.email"
class="status-error" class="status-error"
style="font-size: 11px;" style="font-size: 11px"
> >
{{ fail.email }}: {{ fail.error }} {{ fail.email }}: {{ fail.error }}
</p> </p>
@ -234,7 +293,7 @@
<div class="modal-actions"> <div class="modal-actions">
<button @click="closeImportModal" class="btn"> <button @click="closeImportModal" class="btn">
{{ importResults ? 'Done' : 'Cancel' }} {{ importResults ? "Done" : "Cancel" }}
</button> </button>
<button <button
v-if="csvValidRows.length && !importResults" v-if="csvValidRows.length && !importResults"
@ -242,18 +301,28 @@
@click="submitImport" @click="submitImport"
class="btn btn-primary" class="btn btn-primary"
> >
{{ importing ? 'Importing...' : `Import ${csvValidRows.length} member${csvValidRows.length !== 1 ? 's' : ''}` }} {{
importing
? "Importing..."
: `Import ${csvValidRows.length} member${csvValidRows.length !== 1 ? "s" : ""}`
}}
</button> </button>
</div> </div>
</div> </div>
</div> </div>
<!-- Edit Member Modal --> <!-- Edit Member Modal -->
<div v-if="showEditModal" class="modal-overlay" @click.self="showEditModal = false"> <div
v-if="showEditModal"
class="modal-overlay"
@click.self="showEditModal = false"
>
<div class="modal"> <div class="modal">
<div class="modal-header"> <div class="modal-header">
<h2>Edit Member</h2> <h2>Edit Member</h2>
<button class="modal-close" @click="showEditModal = false">&times;</button> <button class="modal-close" @click="showEditModal = false">
&times;
</button>
</div> </div>
<form @submit.prevent="submitEditMember" class="modal-body"> <form @submit.prevent="submitEditMember" class="modal-body">
@ -293,9 +362,11 @@
</select> </select>
</div> </div>
<div class="modal-actions"> <div class="modal-actions">
<button type="button" class="btn" @click="showEditModal = false">Cancel</button> <button type="button" class="btn" @click="showEditModal = false">
Cancel
</button>
<button type="submit" class="btn btn-primary" :disabled="saving"> <button type="submit" class="btn btn-primary" :disabled="saving">
{{ saving ? 'Saving...' : 'Save Changes' }} {{ saving ? "Saving..." : "Save Changes" }}
</button> </button>
</div> </div>
</form> </form>
@ -303,28 +374,32 @@
</div> </div>
<!-- Send Invites Modal --> <!-- Send Invites Modal -->
<div v-if="showInviteModal" class="modal-overlay" @click.self="showInviteModal = false"> <div
v-if="showInviteModal"
class="modal-overlay"
@click.self="showInviteModal = false"
>
<div class="modal modal-wide"> <div class="modal modal-wide">
<div class="modal-header"> <div class="modal-header">
<h2>Send Invite Emails</h2> <h2>Send Invite Emails</h2>
<button class="modal-close" @click="showInviteModal = false">&times;</button> <button class="modal-close" @click="showInviteModal = false">
&times;
</button>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<p class="help-text"> <p class="help-text">
Sending to <strong>{{ selectedMemberIds.length }}</strong> Sending to <strong>{{ selectedMemberIds.length }}</strong> member{{
member{{ selectedMemberIds.length !== 1 ? 's' : '' }}. selectedMemberIds.length !== 1 ? "s" : ""
Each receives a unique magic login link valid for 48 hours. }}. Each receives a unique magic login link valid for 48 hours.
</p> </p>
<div class="field"> <div class="field">
<label>Email Template</label> <label>Email Template</label>
<textarea <textarea v-model="inviteTemplate" rows="12"></textarea>
v-model="inviteTemplate" <p class="help-text" style="margin-top: 4px">
rows="12" Tokens: <code>{name}</code>, <code>{loginLink}</code>,
></textarea> <code>{circle}</code>
<p class="help-text" style="margin-top: 4px;">
Tokens: <code>{name}</code>, <code>{loginLink}</code>, <code>{circle}</code>
</p> </p>
</div> </div>
@ -336,13 +411,15 @@
<div v-if="inviteResults" class="results-box"> <div v-if="inviteResults" class="results-box">
<strong>Invites sent</strong> <strong>Invites sent</strong>
<p class="status-ok">{{ inviteResults.sent }} sent</p> <p class="status-ok">{{ inviteResults.sent }} sent</p>
<p v-if="inviteResults.failed" class="status-error">{{ inviteResults.failed }} failed</p> <p v-if="inviteResults.failed" class="status-error">
<div v-if="inviteResults.results?.some(r => !r.success)"> {{ inviteResults.failed }} failed
</p>
<div v-if="inviteResults.results?.some((r) => !r.success)">
<p <p
v-for="fail in inviteResults.results.filter(r => !r.success)" v-for="fail in inviteResults.results.filter((r) => !r.success)"
:key="fail.email" :key="fail.email"
class="status-error" class="status-error"
style="font-size: 11px;" style="font-size: 11px"
> >
{{ fail.email }}: {{ fail.error }} {{ fail.email }}: {{ fail.error }}
</p> </p>
@ -352,7 +429,7 @@
<div class="modal-actions"> <div class="modal-actions">
<button @click="showInviteModal = false" class="btn"> <button @click="showInviteModal = false" class="btn">
{{ inviteResults ? 'Done' : 'Cancel' }} {{ inviteResults ? "Done" : "Cancel" }}
</button> </button>
<button <button
v-if="!inviteResults" v-if="!inviteResults"
@ -360,7 +437,11 @@
@click="submitInvites" @click="submitInvites"
class="btn btn-primary" class="btn btn-primary"
> >
{{ sendingInvites ? 'Sending...' : `Send ${selectedMemberIds.length} invite${selectedMemberIds.length !== 1 ? 's' : ''}` }} {{
sendingInvites
? "Sending..."
: `Send ${selectedMemberIds.length} invite${selectedMemberIds.length !== 1 ? "s" : ""}`
}}
</button> </button>
</div> </div>
</div> </div>
@ -370,39 +451,39 @@
<script setup> <script setup>
definePageMeta({ definePageMeta({
layout: 'admin', layout: "admin",
middleware: 'admin', middleware: "admin",
}) });
const toast = useToast() const toast = useToast();
const { const {
data: members, data: members,
pending, pending,
error, error,
refresh, refresh,
} = await useFetch('/api/admin/members') } = await useFetch("/api/admin/members");
const searchQuery = ref('') const searchQuery = ref("");
const circleFilter = ref('') const circleFilter = ref("");
const showCreateModal = ref(false) const showCreateModal = ref(false);
const creating = ref(false) const creating = ref(false);
// Selection // Selection
const selectedMemberIds = ref([]) const selectedMemberIds = ref([]);
// CSV import // CSV import
const showImportModal = ref(false) const showImportModal = ref(false);
const csvFileInput = ref(null) const csvFileInput = ref(null);
const csvRows = ref([]) const csvRows = ref([]);
const csvParseError = ref('') const csvParseError = ref("");
const importing = ref(false) const importing = ref(false);
const importResults = ref(null) const importResults = ref(null);
// Invite // Invite
const showInviteModal = ref(false) const showInviteModal = ref(false);
const sendingInvites = ref(false) const sendingInvites = ref(false);
const inviteResults = ref(null) const inviteResults = ref(null);
const DEFAULT_INVITE_TEMPLATE = `Hi {name}, const DEFAULT_INVITE_TEMPLATE = `Hi {name},
@ -413,305 +494,313 @@ Sign in here to get started:
This link expires in 48 hours. After that, you can always request a new login link at https://ghostguild.org/login. This link expires in 48 hours. After that, you can always request a new login link at https://ghostguild.org/login.
See you inside.` See you inside.`;
const inviteTemplate = ref(DEFAULT_INVITE_TEMPLATE) const inviteTemplate = ref(DEFAULT_INVITE_TEMPLATE);
const newMember = reactive({ const newMember = reactive({
name: '', name: "",
email: '', email: "",
circle: 'community', circle: "community",
contributionTier: '0', contributionTier: "0",
}) });
const filteredMembers = computed(() => { const filteredMembers = computed(() => {
if (!members.value) return [] if (!members.value) return [];
return members.value.filter((member) => { return members.value.filter((member) => {
const matchesSearch = const matchesSearch =
!searchQuery.value || !searchQuery.value ||
member.name.toLowerCase().includes(searchQuery.value.toLowerCase()) || member.name.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
member.email.toLowerCase().includes(searchQuery.value.toLowerCase()) member.email.toLowerCase().includes(searchQuery.value.toLowerCase());
const matchesCircle = const matchesCircle =
!circleFilter.value || member.circle === circleFilter.value !circleFilter.value || member.circle === circleFilter.value;
return matchesSearch && matchesCircle return matchesSearch && matchesCircle;
}) });
}) });
// Selection helpers // Selection helpers
const allVisibleSelected = computed(() => { const allVisibleSelected = computed(() => {
if (!filteredMembers.value.length) return false if (!filteredMembers.value.length) return false;
return filteredMembers.value.every((m) => return filteredMembers.value.every((m) =>
selectedMemberIds.value.includes(m._id) selectedMemberIds.value.includes(m._id),
) );
}) });
const someVisibleSelected = computed(() => { const someVisibleSelected = computed(() => {
return filteredMembers.value.some((m) => return filteredMembers.value.some((m) =>
selectedMemberIds.value.includes(m._id) selectedMemberIds.value.includes(m._id),
) );
}) });
const toggleSelectAll = () => { const toggleSelectAll = () => {
if (allVisibleSelected.value) { if (allVisibleSelected.value) {
const visibleIds = new Set(filteredMembers.value.map((m) => m._id)) const visibleIds = new Set(filteredMembers.value.map((m) => m._id));
selectedMemberIds.value = selectedMemberIds.value.filter( selectedMemberIds.value = selectedMemberIds.value.filter(
(id) => !visibleIds.has(id) (id) => !visibleIds.has(id),
) );
} else { } else {
const currentSet = new Set(selectedMemberIds.value) const currentSet = new Set(selectedMemberIds.value);
for (const m of filteredMembers.value) { for (const m of filteredMembers.value) {
currentSet.add(m._id) currentSet.add(m._id);
} }
selectedMemberIds.value = [...currentSet] selectedMemberIds.value = [...currentSet];
} }
} };
const toggleSelect = (id) => { const toggleSelect = (id) => {
const idx = selectedMemberIds.value.indexOf(id) const idx = selectedMemberIds.value.indexOf(id);
if (idx >= 0) { if (idx >= 0) {
selectedMemberIds.value.splice(idx, 1) selectedMemberIds.value.splice(idx, 1);
} else { } else {
selectedMemberIds.value.push(id) selectedMemberIds.value.push(id);
} }
} };
// Invite preview // Invite preview
const invitePreviewMember = computed(() => { const invitePreviewMember = computed(() => {
if (!selectedMemberIds.value.length || !members.value) return null if (!selectedMemberIds.value.length || !members.value) return null;
return members.value.find((m) => m._id === selectedMemberIds.value[0]) return members.value.find((m) => m._id === selectedMemberIds.value[0]);
}) });
const invitePreviewText = computed(() => { const invitePreviewText = computed(() => {
if (!invitePreviewMember.value) return '' if (!invitePreviewMember.value) return "";
return inviteTemplate.value return inviteTemplate.value
.replace(/\{name\}/g, invitePreviewMember.value.name) .replace(/\{name\}/g, invitePreviewMember.value.name)
.replace(/\{loginLink\}/g, 'https://ghostguild.org/api/auth/verify?token=...') .replace(
.replace(/\{circle\}/g, invitePreviewMember.value.circle) /\{loginLink\}/g,
}) "https://ghostguild.org/api/auth/verify?token=...",
)
.replace(/\{circle\}/g, invitePreviewMember.value.circle);
});
const formatDate = (dateString) => { const formatDate = (dateString) => {
return new Date(dateString).toLocaleDateString() return new Date(dateString).toLocaleDateString();
} };
// --- Create Member --- // --- Create Member ---
const createMember = async () => { const createMember = async () => {
creating.value = true creating.value = true;
try { try {
await $fetch('/api/admin/members', { await $fetch("/api/admin/members", {
method: 'POST', method: "POST",
body: newMember, body: newMember,
}) });
showCreateModal.value = false showCreateModal.value = false;
Object.assign(newMember, { Object.assign(newMember, {
name: '', name: "",
email: '', email: "",
circle: 'community', circle: "community",
contributionTier: '0', contributionTier: "0",
}) });
await refresh() await refresh();
toast.add({ title: 'Member created', color: 'green' }) toast.add({ title: "Member created", color: "green" });
} catch (err) { } catch (err) {
console.error('Failed to create member:', err) console.error("Failed to create member:", err);
toast.add({ toast.add({
title: 'Failed to create member', title: "Failed to create member",
description: err.data?.statusMessage || err.message, description: err.data?.statusMessage || err.message,
color: 'red', color: "red",
}) });
} finally { } finally {
creating.value = false creating.value = false;
} }
} };
// --- CSV Import --- // --- CSV Import ---
const VALID_CIRCLES = ['community', 'founder', 'practitioner'] const VALID_CIRCLES = ["community", "founder", "practitioner"];
const VALID_TIERS = ['0', '5', '15', '30', '50'] const VALID_TIERS = ["0", "5", "15", "30", "50"];
const handleCsvFile = (event) => { const handleCsvFile = (event) => {
const file = event.target.files[0] const file = event.target.files[0];
if (!file) return if (!file) return;
csvParseError.value = '' csvParseError.value = "";
csvRows.value = [] csvRows.value = [];
const reader = new FileReader() const reader = new FileReader();
reader.onload = (e) => { reader.onload = (e) => {
const text = e.target.result const text = e.target.result;
parseCsv(text) parseCsv(text);
} };
reader.readAsText(file) reader.readAsText(file);
} };
const parseCsv = (text) => { const parseCsv = (text) => {
const lines = text.split(/\r?\n/).filter((l) => l.trim()) const lines = text.split(/\r?\n/).filter((l) => l.trim());
if (lines.length < 2) { if (lines.length < 2) {
csvParseError.value = 'CSV must have a header row and at least one data row.' csvParseError.value =
return "CSV must have a header row and at least one data row.";
return;
} }
const header = lines[0].split(',').map((h) => h.trim().toLowerCase()) const header = lines[0].split(",").map((h) => h.trim().toLowerCase());
const nameIdx = header.indexOf('name') const nameIdx = header.indexOf("name");
const emailIdx = header.indexOf('email') const emailIdx = header.indexOf("email");
const circleIdx = header.indexOf('circle') const circleIdx = header.indexOf("circle");
const tierIdx = header.indexOf('contributiontier') const tierIdx = header.indexOf("contributiontier");
if (nameIdx === -1 || emailIdx === -1 || circleIdx === -1 || tierIdx === -1) { if (nameIdx === -1 || emailIdx === -1 || circleIdx === -1 || tierIdx === -1) {
csvParseError.value = `Missing required columns. Found: ${header.join(', ')}. Need: name, email, circle, contributionTier` csvParseError.value = `Missing required columns. Found: ${header.join(", ")}. Need: name, email, circle, contributionTier`;
return return;
} }
const seenEmails = new Set() const seenEmails = new Set();
const rows = [] const rows = [];
for (let i = 1; i < lines.length; i++) { for (let i = 1; i < lines.length; i++) {
const cols = lines[i].split(',').map((c) => c.trim()) const cols = lines[i].split(",").map((c) => c.trim());
const name = cols[nameIdx] || '' const name = cols[nameIdx] || "";
const email = (cols[emailIdx] || '').toLowerCase() const email = (cols[emailIdx] || "").toLowerCase();
const circle = (cols[circleIdx] || '').toLowerCase() const circle = (cols[circleIdx] || "").toLowerCase();
const contributionTier = cols[tierIdx] || '' const contributionTier = cols[tierIdx] || "";
let error = null let error = null;
if (!name) error = 'Missing name' if (!name) error = "Missing name";
else if (!email || !email.includes('@')) error = 'Invalid email' else if (!email || !email.includes("@")) error = "Invalid email";
else if (!VALID_CIRCLES.includes(circle)) error = `Invalid circle: ${circle}` else if (!VALID_CIRCLES.includes(circle))
else if (!VALID_TIERS.includes(contributionTier)) error = `Invalid tier: ${contributionTier}` error = `Invalid circle: ${circle}`;
else if (seenEmails.has(email)) error = 'Duplicate email in CSV' else if (!VALID_TIERS.includes(contributionTier))
error = `Invalid tier: ${contributionTier}`;
else if (seenEmails.has(email)) error = "Duplicate email in CSV";
if (!error) seenEmails.add(email) if (!error) seenEmails.add(email);
rows.push({ name, email, circle, contributionTier, error }) rows.push({ name, email, circle, contributionTier, error });
} }
csvRows.value = rows csvRows.value = rows;
} };
const csvValidRows = computed(() => csvRows.value.filter((r) => !r.error)) const csvValidRows = computed(() => csvRows.value.filter((r) => !r.error));
const resetCsvImport = () => { const resetCsvImport = () => {
csvRows.value = [] csvRows.value = [];
csvParseError.value = '' csvParseError.value = "";
importResults.value = null importResults.value = null;
if (csvFileInput.value) csvFileInput.value.value = '' if (csvFileInput.value) csvFileInput.value.value = "";
} };
const closeImportModal = () => { const closeImportModal = () => {
showImportModal.value = false showImportModal.value = false;
if (importResults.value) { if (importResults.value) {
resetCsvImport() resetCsvImport();
refresh() refresh();
} }
} };
const submitImport = async () => { const submitImport = async () => {
importing.value = true importing.value = true;
try { try {
const payload = csvValidRows.value.map(({ name, email, circle, contributionTier }) => ({ const payload = csvValidRows.value.map(
name, ({ name, email, circle, contributionTier }) => ({
email, name,
circle, email,
contributionTier, circle,
})) contributionTier,
}),
);
const result = await $fetch('/api/admin/members/import', { const result = await $fetch("/api/admin/members/import", {
method: 'POST', method: "POST",
body: { members: payload }, body: { members: payload },
}) });
importResults.value = result importResults.value = result;
toast.add({ toast.add({
title: `Imported ${result.created} member${result.created !== 1 ? 's' : ''}`, title: `Imported ${result.created} member${result.created !== 1 ? "s" : ""}`,
description: result.failed ? `${result.failed} failed` : undefined, description: result.failed ? `${result.failed} failed` : undefined,
color: result.failed ? 'orange' : 'green', color: result.failed ? "orange" : "green",
}) });
} catch (err) { } catch (err) {
console.error('Import failed:', err) console.error("Import failed:", err);
toast.add({ toast.add({
title: 'Import failed', title: "Import failed",
description: err.data?.statusMessage || err.message, description: err.data?.statusMessage || err.message,
color: 'red', color: "red",
}) });
} finally { } finally {
importing.value = false importing.value = false;
} }
} };
// --- Send Invites --- // --- Send Invites ---
const openInviteModal = () => { const openInviteModal = () => {
inviteResults.value = null inviteResults.value = null;
inviteTemplate.value = DEFAULT_INVITE_TEMPLATE inviteTemplate.value = DEFAULT_INVITE_TEMPLATE;
showInviteModal.value = true showInviteModal.value = true;
} };
const submitInvites = async () => { const submitInvites = async () => {
sendingInvites.value = true sendingInvites.value = true;
try { try {
const result = await $fetch('/api/admin/members/invite', { const result = await $fetch("/api/admin/members/invite", {
method: 'POST', method: "POST",
body: { body: {
memberIds: selectedMemberIds.value, memberIds: selectedMemberIds.value,
emailTemplate: inviteTemplate.value, emailTemplate: inviteTemplate.value,
}, },
}) });
inviteResults.value = result inviteResults.value = result;
await refresh() await refresh();
selectedMemberIds.value = [] selectedMemberIds.value = [];
toast.add({ toast.add({
title: `Sent ${result.sent} invite${result.sent !== 1 ? 's' : ''}`, title: `Sent ${result.sent} invite${result.sent !== 1 ? "s" : ""}`,
description: result.failed ? `${result.failed} failed` : undefined, description: result.failed ? `${result.failed} failed` : undefined,
color: result.failed ? 'orange' : 'green', color: result.failed ? "orange" : "green",
}) });
} catch (err) { } catch (err) {
console.error('Failed to send invites:', err) console.error("Failed to send invites:", err);
toast.add({ toast.add({
title: 'Failed to send invites', title: "Failed to send invites",
description: err.data?.statusMessage || err.message, description: err.data?.statusMessage || err.message,
color: 'red', color: "red",
}) });
} finally { } finally {
sendingInvites.value = false sendingInvites.value = false;
} }
} };
// --- Existing actions --- // --- Existing actions ---
const sendSlackInvite = (member) => { const sendSlackInvite = (member) => {
console.log('Send Slack invite to:', member.email) console.log("Send Slack invite to:", member.email);
} };
// --- Edit Member --- // --- Edit Member ---
const showEditModal = ref(false) const showEditModal = ref(false);
const saving = ref(false) const saving = ref(false);
const editingMemberId = ref(null) const editingMemberId = ref(null);
const editingMember = reactive({ const editingMember = reactive({
name: '', name: "",
email: '', email: "",
circle: 'community', circle: "community",
contributionTier: '0', contributionTier: "0",
status: 'pending_payment', status: "pending_payment",
}) });
const editMember = (member) => { const editMember = (member) => {
editingMemberId.value = member._id editingMemberId.value = member._id;
Object.assign(editingMember, { Object.assign(editingMember, {
name: member.name, name: member.name,
email: member.email, email: member.email,
circle: member.circle, circle: member.circle,
contributionTier: String(member.contributionTier), contributionTier: String(member.contributionTier),
status: member.status || 'pending_payment', status: member.status || "pending_payment",
}) });
showEditModal.value = true showEditModal.value = true;
} };
const submitEditMember = async () => { const submitEditMember = async () => {
saving.value = true saving.value = true;
try { try {
await $fetch(`/api/admin/members/${editingMemberId.value}`, { await $fetch(`/api/admin/members/${editingMemberId.value}`, {
method: 'PUT', method: "PUT",
body: { body: {
name: editingMember.name, name: editingMember.name,
email: editingMember.email, email: editingMember.email,
@ -719,20 +808,20 @@ const submitEditMember = async () => {
contributionTier: editingMember.contributionTier, contributionTier: editingMember.contributionTier,
status: editingMember.status, status: editingMember.status,
}, },
}) });
showEditModal.value = false showEditModal.value = false;
await refresh() await refresh();
toast.add({ title: 'Member updated', color: 'green' }) toast.add({ title: "Member updated", color: "green" });
} catch (err) { } catch (err) {
toast.add({ toast.add({
title: 'Failed to update member', title: "Failed to update member",
description: err.data?.statusMessage || err.message, description: err.data?.statusMessage || err.message,
color: 'red', color: "red",
}) });
} finally { } finally {
saving.value = false saving.value = false;
} }
} };
</script> </script>
<style scoped> <style scoped>
@ -756,7 +845,7 @@ const submitEditMember = async () => {
} }
.page-header h1 { .page-header h1 {
font-family: 'Brygada 1918', serif; font-family: "Brygada 1918", serif;
font-size: 24px; font-size: 24px;
font-weight: 500; font-weight: 500;
color: var(--text-bright); color: var(--text-bright);
@ -855,7 +944,7 @@ tbody td {
border: none; border: none;
color: var(--candle); color: var(--candle);
cursor: pointer; cursor: pointer;
font-family: 'Commit Mono', monospace; font-family: "Commit Mono", monospace;
font-size: 11px; font-size: 11px;
padding: 2px 6px; padding: 2px 6px;
} }
@ -915,7 +1004,7 @@ tbody td {
} }
.modal-header h2 { .modal-header h2 {
font-family: 'Brygada 1918', serif; font-family: "Brygada 1918", serif;
font-size: 18px; font-size: 18px;
font-weight: 500; font-weight: 500;
color: var(--text-bright); color: var(--text-bright);
@ -1025,7 +1114,7 @@ tbody td {
/* ---- PREVIEW BOX ---- */ /* ---- PREVIEW BOX ---- */
.preview-box { .preview-box {
font-family: 'Commit Mono', monospace; font-family: "Commit Mono", monospace;
font-size: 11px; font-size: 11px;
color: var(--text-dim); color: var(--text-dim);
background: var(--surface); background: var(--surface);
@ -1070,7 +1159,9 @@ tbody td {
} }
@keyframes spin { @keyframes spin {
to { transform: rotate(360deg); } to {
transform: rotate(360deg);
}
} }
/* ---- RESPONSIVE ---- */ /* ---- RESPONSIVE ---- */

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

@ -0,0 +1,402 @@
<template>
<div class="admin-member-detail">
<div class="page-header">
<div class="header-row">
<div>
<NuxtLink to="/admin/members" class="back-link">← Members</NuxtLink>
<h1 v-if="member">{{ member.name }}</h1>
<h1 v-else-if="pending">Loading…</h1>
<h1 v-else>Member not found</h1>
<p v-if="member" class="member-email">{{ member.email }}</p>
</div>
<div v-if="member" class="header-actions">
<span class="badge" :class="member.circle">{{ member.circle }}</span>
<span :class="statusClass(member.status)" class="status-badge">{{
member.status
}}</span>
</div>
</div>
</div>
<div v-if="pending" class="loading-state">
<div class="spinner" />
Loading member…
</div>
<div v-else-if="fetchError" class="error-state">Failed to load member.</div>
<template v-else-if="member">
<!-- Edit form -->
<section class="detail-section">
<div class="section-label">Member details</div>
<form class="edit-form" @submit.prevent="submitEdit">
<div class="field">
<label>Name</label>
<input v-model="form.name" type="text" required />
</div>
<div class="field">
<label>Email</label>
<input v-model="form.email" type="email" required />
</div>
<div class="field">
<label>Circle</label>
<select v-model="form.circle">
<option value="community">Community</option>
<option value="founder">Founder</option>
<option value="practitioner">Practitioner</option>
</select>
</div>
<div class="field">
<label>Contribution tier ($/mo)</label>
<select v-model="form.contributionTier">
<option value="0">$0</option>
<option value="5">$5</option>
<option value="15">$15</option>
<option value="30">$30</option>
<option value="50">$50</option>
</select>
</div>
<div class="field">
<label>Status</label>
<select v-model="form.status">
<option value="pending_payment">pending_payment</option>
<option value="active">active</option>
<option value="suspended">suspended</option>
<option value="cancelled">cancelled</option>
</select>
</div>
<div class="field">
<label>Role</label>
<select v-model="form.role">
<option value="member">member</option>
<option value="admin">admin</option>
</select>
</div>
<div class="form-actions">
<button type="submit" class="btn btn-primary" :disabled="saving">
{{ saving ? "Saving…" : "Save changes" }}
</button>
<button type="button" class="btn" @click="resetForm">Reset</button>
</div>
</form>
</section>
<!-- Metadata -->
<section class="detail-section">
<div class="section-label">Account info</div>
<dl class="meta-list">
<div class="meta-row">
<dt>Member ID</dt>
<dd class="mono">{{ member._id }}</dd>
</div>
<div class="meta-row">
<dt>Joined</dt>
<dd>{{ formatDate(member.createdAt) }}</dd>
</div>
<div class="meta-row">
<dt>Invite email</dt>
<dd :class="member.inviteEmailSent ? 'status-ok' : 'status-dim'">
{{ member.inviteEmailSent ? "Sent" : "Not sent" }}
</dd>
</div>
<div class="meta-row">
<dt>Slack invite</dt>
<dd :class="member.slackInvited ? 'status-ok' : 'status-dim'">
{{ member.slackInvited ? "Invited" : "Pending" }}
</dd>
</div>
<div v-if="member.helcimCustomerId" class="meta-row">
<dt>Helcim customer</dt>
<dd class="mono">{{ member.helcimCustomerId }}</dd>
</div>
<div v-if="member.helcimSubscriptionId" class="meta-row">
<dt>Helcim subscription</dt>
<dd class="mono">{{ member.helcimSubscriptionId }}</dd>
</div>
</dl>
</section>
</template>
</div>
</template>
<script setup>
definePageMeta({
layout: "admin",
middleware: "admin",
});
const route = useRoute();
const toast = useToast();
const {
data: member,
pending,
error: fetchError,
} = await useFetch(`/api/admin/members/${route.params.id}`);
const pageBreadcrumbTitle = useState("pageBreadcrumbTitle", () => "");
pageBreadcrumbTitle.value = member.value?.name || "";
watch(member, (val) => {
pageBreadcrumbTitle.value = val?.name || "";
});
onUnmounted(() => {
pageBreadcrumbTitle.value = "";
});
const form = reactive({
name: "",
email: "",
circle: "",
contributionTier: "",
status: "",
role: "",
});
const saving = ref(false);
function populateForm(m) {
if (!m) return;
form.name = m.name;
form.email = m.email;
form.circle = m.circle;
form.contributionTier = String(m.contributionTier);
form.status = m.status || "pending_payment";
form.role = m.role || "member";
}
// Populate once data is ready
if (member.value) populateForm(member.value);
watch(member, populateForm, { immediate: false });
function resetForm() {
populateForm(member.value);
}
async function submitEdit() {
saving.value = true;
try {
const updated = await $fetch(`/api/admin/members/${route.params.id}`, {
method: "PUT",
body: {
name: form.name,
email: form.email,
circle: form.circle,
contributionTier: form.contributionTier,
status: form.status,
},
});
// Update role separately if it changed
if (form.role !== member.value?.role) {
await $fetch(`/api/admin/members/${route.params.id}/role`, {
method: "PATCH",
body: { role: form.role },
});
}
// Reflect changes locally
if (member.value) {
member.value = { ...member.value, ...updated, role: form.role };
pageBreadcrumbTitle.value = form.name;
}
toast.add({ title: "Member updated", color: "green" });
} catch (err) {
toast.add({
title: "Failed to update member",
description: err.data?.statusMessage || err.message,
color: "red",
});
} finally {
saving.value = false;
}
}
function formatDate(val) {
if (!val) return "—";
return new Date(val).toLocaleDateString("en-US", {
year: "numeric",
month: "short",
day: "numeric",
});
}
function statusClass(status) {
if (status === "active") return "status-ok";
if (status === "cancelled" || status === "suspended") return "status-error";
return "status-dim";
}
</script>
<style scoped>
.admin-member-detail {
max-width: 640px;
padding: 32px 40px 60px;
}
.page-header {
margin-bottom: 32px;
}
.header-row {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
}
.back-link {
display: inline-block;
font-size: 11px;
color: var(--text-faint);
text-decoration: none;
margin-bottom: 8px;
letter-spacing: 0.02em;
}
.back-link:hover {
color: var(--candle);
}
.page-header h1 {
font-family: "Brygada 1918", serif;
font-size: 24px;
font-weight: 600;
color: var(--text-bright);
margin: 0 0 4px;
}
.member-email {
font-size: 12px;
color: var(--text-faint);
margin: 0;
}
.header-actions {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
padding-top: 6px;
}
.status-badge {
font-size: 11px;
font-family: "Commit Mono", monospace;
padding: 2px 8px;
border: 1px dashed var(--border);
}
.detail-section {
margin-bottom: 40px;
}
.edit-form {
display: flex;
flex-direction: column;
gap: 16px;
margin-top: 12px;
}
.form-actions {
display: flex;
gap: 8px;
margin-top: 8px;
}
.meta-list {
display: flex;
flex-direction: column;
gap: 0;
border: 1px dashed var(--border);
margin-top: 12px;
}
.meta-row {
display: flex;
gap: 24px;
padding: 10px 14px;
border-bottom: 1px dashed var(--border);
}
.meta-row:last-child {
border-bottom: none;
}
.meta-row dt {
font-size: 11px;
color: var(--text-faint);
letter-spacing: 0.02em;
min-width: 140px;
flex-shrink: 0;
padding-top: 1px;
}
.meta-row dd {
font-size: 12px;
color: var(--text);
margin: 0;
}
.mono {
font-family: "Commit Mono", monospace;
font-size: 11px;
}
.status-ok {
color: var(--c-founder);
}
.status-dim {
color: var(--text-faint);
}
.status-error {
color: var(--ember);
}
.loading-state,
.error-state {
display: flex;
align-items: center;
gap: 12px;
color: var(--text-dim);
font-size: 13px;
padding: 40px 0;
}
.spinner {
width: 16px;
height: 16px;
border: 2px solid var(--border);
border-top-color: var(--candle);
border-radius: 50%;
animation: spin 0.7s linear infinite;
flex-shrink: 0;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
@media (max-width: 768px) {
.admin-member-detail {
padding: 20px 16px 40px;
}
.header-row {
flex-direction: column;
}
.meta-row {
flex-direction: column;
gap: 4px;
}
.meta-row dt {
min-width: unset;
}
}
</style>

511
app/pages/events/[id].vue
View file

@ -1,511 +0,0 @@
<template>
<div v-if="pending" class="loading">Loading event details...</div>
<div v-else-if="error" class="loading">
<h2>Event Not Found</h2>
<p>The event you're looking for doesn't exist.</p>
<NuxtLink to="/events">&larr; Back to Events</NuxtLink>
</div>
<div v-else>
<!-- BACK LINK -->
<div class="back-link">
<NuxtLink to="/events">&larr; Back to Events</NuxtLink>
</div>
<!-- EVENT HEADER -->
<div class="event-header">
<h1>{{ event.title }}</h1>
<div class="event-meta-row">
<div class="event-meta-item">
<span class="meta-label">Date</span>
{{ formatDate(event.startDate) }}
</div>
<div class="event-meta-item">
<span class="meta-label">Time</span>
{{ formatTime(event.startDate, event.endDate) }}
</div>
<div class="event-meta-item">
<span class="meta-label">Location</span>
{{ event.location }}
</div>
<div v-if="event.circle" class="event-meta-item">
<CircleBadge :circle="event.circle" />
</div>
<div v-if="event.maxAttendees" class="event-meta-item">
<span class="meta-label">Capacity</span>
{{ event.registeredCount || 0 }}/{{ event.maxAttendees }} seats
</div>
</div>
</div>
<!-- CANCELLED NOTICE -->
<div v-if="event.isCancelled" class="cancelled-notice">
<strong>Event Cancelled</strong>
<p v-if="event.cancellationMessage">{{ event.cancellationMessage }}</p>
<p v-else>This event has been cancelled. We apologize for any inconvenience.</p>
</div>
<!-- TWO-COLUMN BODY -->
<div class="event-body">
<!-- LEFT: MAIN CONTENT -->
<div class="event-main">
<!-- Series Badge -->
<div v-if="event.series?.isSeriesEvent" class="section">
<div class="series-note">
<span class="section-label">Part of Series</span>
<NuxtLink :to="`/series/${event.series.id}`">{{ event.series.title }}</NuxtLink>
&mdash; Event {{ event.series.position }} of {{ event.series.totalEvents }}
</div>
</div>
<!-- Target Circles -->
<div v-if="event.targetCircles?.length" class="section">
<span class="section-label">Recommended for</span>
<div class="circle-badges">
<CircleBadge v-for="circle in event.targetCircles" :key="circle" :circle="circle" />
</div>
</div>
<!-- Description -->
<div class="section">
<h2>About This Event</h2>
<p>{{ event.description }}</p>
</div>
<!-- Series Description -->
<div v-if="event.series?.isSeriesEvent && event.series.description" class="section">
<h2>About the {{ event.series.title }} Series</h2>
<p>{{ event.series.description }}</p>
</div>
<!-- Agenda -->
<div v-if="event.agenda?.length" class="section">
<h2>Agenda</h2>
<ol class="agenda-list">
<li v-for="(item, index) in event.agenda" :key="index">{{ item }}</li>
</ol>
</div>
<!-- Speakers -->
<div v-if="event.speakers?.length" class="section">
<h2>Speakers</h2>
<div v-for="speaker in event.speakers" :key="speaker.name" class="speaker">
<div class="speaker-name">{{ speaker.name }}</div>
<div v-if="speaker.role" class="speaker-role">{{ speaker.role }}</div>
<div v-if="speaker.bio" class="speaker-bio">{{ speaker.bio }}</div>
</div>
</div>
</div>
<!-- RIGHT: SIDEBAR PANELS -->
<div v-if="!event.isCancelled" class="event-aside">
<!-- Ticket System -->
<EventTicketPurchase
v-if="event.tickets?.enabled"
:event-id="event._id || event.id"
:event-start-date="event.startDate"
:event-title="event.title"
:user-email="memberData?.email"
@success="handleTicketSuccess"
@error="handleTicketError"
/>
<!-- Legacy Registration -->
<template v-else>
<!-- Already Registered -->
<div v-if="registrationStatus === 'registered'" class="dashed-box">
<div class="box-title">Registration</div>
<p class="reg-status" style="color: var(--green);">You're registered!</p>
<p class="reg-price">Confirmation sent to your email</p>
<button class="btn btn-danger" @click="handleCancelRegistration" :disabled="isCancelling">
{{ isCancelling ? 'Cancelling...' : 'Cancel Registration' }}
</button>
</div>
<!-- Member Status Issues -->
<div v-else-if="memberData && !canRSVP" class="dashed-box">
<div class="box-title">Registration</div>
<p class="reg-status" style="color: var(--ember);">{{ statusConfig.label }}</p>
<p class="reg-price">{{ getRSVPMessage() }}</p>
<NuxtLink v-if="isPendingPayment" to="#" @click.prevent="completePayment">
<button class="btn btn-primary" :disabled="isProcessingPayment">
{{ isProcessingPayment ? 'Processing...' : 'Complete Payment' }}
</button>
</NuxtLink>
</div>
<!-- Members-Only Gate -->
<div v-else-if="event.membersOnly && memberData && !isMember" class="dashed-box">
<div class="box-title">Registration</div>
<p class="reg-status" style="color: var(--ember);">Membership Required</p>
<p class="reg-price">This event is exclusive to members.</p>
<NuxtLink to="/join"><button class="btn btn-primary">Become a Member</button></NuxtLink>
</div>
<!-- Can Register (logged in) -->
<div v-else-if="memberData && (!event.membersOnly || isMember)" class="dashed-box">
<div class="box-title">Registration</div>
<div v-if="event.maxAttendees" class="reg-status">
{{ event.maxAttendees - (event.registeredCount || 0) }} spots remaining
</div>
<div class="reg-price">Free for members</div>
<button class="btn btn-primary" @click="handleRegistration" :disabled="isRegistering">
{{ isRegistering ? 'Registering...' : 'Register for this event' }}
</button>
<a :href="`/api/events/${route.params.id}/calendar`" download class="cal-link">Add to calendar</a>
</div>
<!-- Not Logged In -->
<div v-else class="dashed-box">
<div class="box-title">Registration</div>
<form @submit.prevent="handleRegistration">
<div class="field">
<label>Name</label>
<input v-model="registrationForm.name" type="text" required />
</div>
<div class="field">
<label>Email</label>
<input v-model="registrationForm.email" type="email" required />
</div>
<button type="submit" class="btn btn-primary" :disabled="isRegistering">
{{ isRegistering ? 'Registering...' : 'Register for Event' }}
</button>
</form>
</div>
<!-- Waitlist -->
<div v-if="event.tickets?.waitlist?.enabled && isEventFull" class="dashed-box">
<div class="box-title">Waitlist</div>
<div v-if="isOnWaitlist">
<p class="reg-status">You're on the waitlist (#{{ waitlistPosition }})</p>
<button class="btn" @click="handleLeaveWaitlist" :disabled="isJoiningWaitlist">Leave Waitlist</button>
</div>
<div v-else>
<p class="reg-status" style="color: var(--ember);">This event is full</p>
<form @submit.prevent="handleJoinWaitlist">
<div v-if="!memberData" class="field">
<label>Email</label>
<input v-model="waitlistForm.email" type="email" required />
</div>
<button type="submit" class="btn" :disabled="isJoiningWaitlist">
{{ isJoiningWaitlist ? 'Joining...' : 'Join Waitlist' }}
</button>
</form>
</div>
</div>
</template>
<!-- Event Details Box -->
<div class="dashed-box">
<div class="box-title">Event Details</div>
<div v-if="event.eventType" class="detail-row">
<span class="detail-key">Type</span>
<span class="detail-val">{{ event.eventType }}</span>
</div>
<div v-if="event.membersOnly" class="detail-row">
<span class="detail-key">Members only</span>
<span class="detail-val">Yes</span>
</div>
</div>
<!-- Questions -->
<div class="dashed-box">
<div class="box-title">Questions?</div>
<p style="font-size: 12px; color: var(--text-dim); margin-bottom: 4px;">Drop us a line.</p>
<a href="mailto:events@ghostguild.org" style="font-size: 12px;">events@ghostguild.org</a>
</div>
</div>
</div>
</div>
</template>
<script setup>
const route = useRoute()
const toast = useToast()
const { data: event, pending, error } = await useFetch(`/api/events/${route.params.id}`)
if (error.value?.statusCode === 404) {
throw createError({ statusCode: 404, statusMessage: 'Event not found' })
}
const { isMember, memberData, checkMemberStatus } = useAuth()
const { isPendingPayment, isSuspended, isCancelled, canRSVP, statusConfig, getRSVPMessage } = useMemberStatus()
const { completePayment, isProcessingPayment } = useMemberPayment()
onMounted(async () => {
await checkMemberStatus()
if (memberData.value) {
registrationForm.value.name = memberData.value.name
registrationForm.value.email = memberData.value.email
registrationForm.value.membershipLevel = memberData.value.membershipLevel || 'non-member'
await checkRegistrationStatus()
checkWaitlistStatus()
}
})
const checkRegistrationStatus = async () => {
if (!memberData.value?.email) return
try {
const response = await $fetch(`/api/events/${route.params.id}/check-registration`, {
method: 'POST',
body: { email: memberData.value.email },
})
if (response.isRegistered) registrationStatus.value = 'registered'
} catch (err) {
console.error('Failed to check registration status:', err)
}
}
const registrationForm = ref({ name: '', email: '', membershipLevel: 'non-member' })
const isRegistering = ref(false)
const isCancelling = ref(false)
const registrationStatus = ref('not-registered')
const isJoiningWaitlist = ref(false)
const isOnWaitlist = ref(false)
const waitlistPosition = ref(0)
const waitlistForm = ref({ email: '' })
const isEventFull = computed(() => {
if (!event.value?.maxAttendees) return false
return (event.value.registeredCount || 0) >= event.value.maxAttendees
})
const checkWaitlistStatus = () => {
const email = memberData.value?.email || waitlistForm.value.email
if (!email || !event.value?.tickets?.waitlist?.enabled) return
const entries = event.value.tickets.waitlist.entries || []
const idx = entries.findIndex((e) => e.email.toLowerCase() === email.toLowerCase())
if (idx !== -1) { isOnWaitlist.value = true; waitlistPosition.value = idx + 1 }
}
const handleJoinWaitlist = async () => {
isJoiningWaitlist.value = true
try {
const email = memberData.value?.email || waitlistForm.value.email
const name = memberData.value?.name || 'Guest'
const response = await $fetch(`/api/events/${route.params.id}/waitlist`, { method: 'POST', body: { email, name } })
isOnWaitlist.value = true
waitlistPosition.value = response.position
toast.add({ title: 'Added to Waitlist', description: `You're #${response.position} on the waitlist.`, color: 'orange' })
} catch (err) {
toast.add({ title: "Couldn't Join Waitlist", description: err.data?.statusMessage || 'Please try again.', color: 'red' })
} finally { isJoiningWaitlist.value = false }
}
const handleLeaveWaitlist = async () => {
isJoiningWaitlist.value = true
try {
const email = memberData.value?.email || waitlistForm.value.email
await $fetch(`/api/events/${route.params.id}/waitlist`, { method: 'DELETE', body: { email } })
isOnWaitlist.value = false
waitlistPosition.value = 0
toast.add({ title: 'Removed from Waitlist', color: 'blue' })
} catch (err) {
toast.add({ title: 'Error', description: 'Failed to leave waitlist.', color: 'red' })
} finally { isJoiningWaitlist.value = false }
}
const formatDate = (dateStr) => {
const d = new Date(dateStr)
return new Intl.DateTimeFormat('en-US', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }).format(d)
}
const formatTime = (start, end) => {
const fmt = new Intl.DateTimeFormat('en-US', { hour: 'numeric', minute: '2-digit', timeZoneName: 'short' })
return `${fmt.format(new Date(start))} – ${fmt.format(new Date(end))}`
}
const handleRegistration = async () => {
isRegistering.value = true
try {
await $fetch(`/api/events/${route.params.id}/register`, { method: 'POST', body: registrationForm.value })
registrationStatus.value = 'registered'
toast.add({ title: 'Registered!', description: `You're registered for ${event.value.title}.`, color: 'green' })
if (event.value.registeredCount !== undefined) event.value.registeredCount++
} catch (err) {
toast.add({ title: 'Registration Failed', description: err.data?.statusMessage || 'Please try again.', color: 'red' })
} finally { isRegistering.value = false }
}
const handleCancelRegistration = async () => {
isCancelling.value = true
try {
await $fetch(`/api/events/${route.params.id}/cancel-registration`, {
method: 'POST',
body: { email: registrationForm.value.email || memberData.value?.email },
})
registrationStatus.value = 'not-registered'
toast.add({ title: 'Registration Cancelled', color: 'blue' })
if (event.value.registeredCount !== undefined) event.value.registeredCount--
} catch (err) {
toast.add({ title: 'Cancellation Failed', description: err.data?.statusMessage || 'Please try again.', color: 'red' })
} finally { isCancelling.value = false }
}
const handleTicketSuccess = () => { if (event.value.registeredCount !== undefined) event.value.registeredCount++ }
const handleTicketError = (err) => { console.error('Ticket purchase failed:', err) }
useHead(() => ({
title: event.value ? `${event.value.title} - Ghost Guild Events` : 'Event - Ghost Guild',
meta: [{ name: 'description', content: event.value?.description || 'View event details and register' }],
}))
</script>
<style scoped>
.loading {
padding: 48px 32px;
color: var(--text-dim);
}
.loading h2 {
font-family: 'Brygada 1918', serif;
font-size: 22px;
color: var(--text-bright);
margin-bottom: 8px;
}
.back-link {
padding: 12px 32px;
border-bottom: 1px dashed var(--border);
font-size: 12px;
}
.back-link a { color: var(--candle); text-decoration: none; }
.event-header {
padding: 28px 32px;
border-bottom: 1px dashed var(--border);
}
.event-header h1 {
font-family: 'Brygada 1918', serif;
font-size: 28px;
font-weight: 600;
color: var(--text-bright);
line-height: 1.15;
margin-bottom: 16px;
}
.event-meta-row {
display: flex;
flex-wrap: wrap;
gap: 24px;
font-size: 12px;
color: var(--text-dim);
}
.meta-label {
font-size: 10px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-faint);
display: block;
margin-bottom: 2px;
}
.cancelled-notice {
padding: 20px 32px;
border-bottom: 1px dashed var(--border);
color: var(--ember);
font-size: 12px;
}
.cancelled-notice strong {
display: block;
margin-bottom: 4px;
}
/* ---- TWO-COLUMN BODY ---- */
.event-body {
display: grid;
grid-template-columns: 1fr 280px;
}
.event-main {
min-width: 0;
}
.event-aside {
border-left: 1px dashed var(--border);
padding: 0;
}
.event-aside .dashed-box {
margin: 0;
border: none;
border-bottom: 1px dashed var(--border);
padding: 20px 24px;
}
.event-aside .dashed-box:hover { border-color: var(--border); }
.section {
padding: 24px 32px;
border-bottom: 1px dashed var(--border);
}
.section h2 {
font-family: 'Brygada 1918', serif;
font-size: 18px;
font-weight: 500;
color: var(--text-bright);
margin-bottom: 8px;
}
.section p {
font-size: 12px;
color: var(--text-dim);
line-height: 1.7;
max-width: 560px;
}
.circle-badges {
display: flex;
gap: 6px;
margin-top: 4px;
}
.series-note {
font-size: 12px;
color: var(--text-dim);
}
.agenda-list {
padding-left: 20px;
font-size: 12px;
color: var(--text-dim);
line-height: 2;
}
.speaker {
padding: 8px 0;
border-bottom: 1px dashed var(--border);
}
.speaker:last-child { border-bottom: none; }
.speaker-name { font-size: 13px; color: var(--text-bright); font-weight: 500; }
.speaker-role { font-size: 11px; color: var(--text-dim); }
.speaker-bio { font-size: 11px; color: var(--text-faint); margin-top: 2px; }
.box-title {
font-size: 10px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--text-faint);
margin-bottom: 8px;
}
.reg-status { font-size: 13px; color: var(--text); margin-bottom: 4px; }
.reg-price { font-size: 11px; color: var(--text-faint); margin-bottom: 10px; }
.cal-link {
display: block;
margin-top: 8px;
font-size: 11px;
color: var(--candle);
}
.detail-row {
display: flex;
justify-content: space-between;
padding: 4px 0;
font-size: 12px;
border-bottom: 1px dashed var(--border);
}
.detail-row:last-child { border-bottom: none; }
.detail-key { color: var(--text-faint); }
.detail-val { color: var(--text); }
@media (max-width: 768px) {
.event-body { grid-template-columns: 1fr; }
.event-aside { border-left: none; border-top: 1px dashed var(--border); }
.event-meta-row { flex-direction: column; gap: 8px; }
}
</style>

725
app/pages/events/[slug].vue Normal file
View file

@ -0,0 +1,725 @@
<template>
<div v-if="pending" class="loading">Loading event details...</div>
<div v-else-if="error" class="loading">
<h2>Event Not Found</h2>
<p>The event you're looking for doesn't exist.</p>
<NuxtLink to="/events">&larr; Back to Events</NuxtLink>
</div>
<div v-else>
<!-- EVENT HEADER -->
<div class="event-header">
<h1>{{ event.title }}</h1>
<div class="event-meta-row">
<div class="event-meta-item">
<span class="meta-label">Date</span>
{{ formatDate(event.startDate) }}
</div>
<div class="event-meta-item">
<span class="meta-label">Time</span>
{{ formatTime(event.startDate, event.endDate) }}
</div>
<div class="event-meta-item">
<span class="meta-label">Location</span>
{{ event.location }}
</div>
<div v-if="event.circle" class="event-meta-item">
<CircleBadge :circle="event.circle" />
</div>
<div v-if="event.maxAttendees" class="event-meta-item">
<span class="meta-label">Capacity</span>
{{ event.registeredCount || 0 }}/{{ event.maxAttendees }} seats
</div>
</div>
</div>
<!-- CANCELLED NOTICE -->
<div v-if="event.isCancelled" class="cancelled-notice">
<strong>Event Cancelled</strong>
<p v-if="event.cancellationMessage">{{ event.cancellationMessage }}</p>
<p v-else>
This event has been cancelled. We apologize for any inconvenience.
</p>
</div>
<!-- FEATURE IMAGE -->
<div v-if="event.featureImage?.url" class="event-feature-image">
<img
:src="event.featureImage.url"
:alt="event.featureImage.alt || event.title"
/>
</div>
<!-- TWO-COLUMN BODY -->
<div class="event-body">
<!-- LEFT: MAIN CONTENT -->
<div class="event-main">
<!-- Series Badge -->
<div v-if="event.series?.isSeriesEvent" class="section">
<div class="series-note">
<span class="section-label">Part of Series</span>
<NuxtLink :to="`/series/${event.series.id}`">{{
event.series.title
}}</NuxtLink>
&mdash; Event {{ event.series.position }} of
{{ event.series.totalEvents }}
</div>
</div>
<!-- Target Circles -->
<div v-if="event.targetCircles?.length" class="section">
<span class="section-label">Recommended for</span>
<div class="circle-badges">
<CircleBadge
v-for="circle in event.targetCircles"
:key="circle"
:circle="circle"
/>
</div>
</div>
<!-- Description -->
<div class="section">
<h2>About This Event</h2>
<p>{{ event.description }}</p>
</div>
<!-- Series Description -->
<div
v-if="event.series?.isSeriesEvent && event.series.description"
class="section"
>
<h2>About the {{ event.series.title }} Series</h2>
<p>{{ event.series.description }}</p>
</div>
<!-- Agenda -->
<div v-if="event.agenda?.length" class="section">
<h2>Agenda</h2>
<ol class="agenda-list">
<li v-for="(item, index) in event.agenda" :key="index">
{{ item }}
</li>
</ol>
</div>
<!-- Speakers -->
<div v-if="event.speakers?.length" class="section">
<h2>Speakers</h2>
<div
v-for="speaker in event.speakers"
:key="speaker.name"
class="speaker"
>
<div class="speaker-name">{{ speaker.name }}</div>
<div v-if="speaker.role" class="speaker-role">
{{ speaker.role }}
</div>
<div v-if="speaker.bio" class="speaker-bio">{{ speaker.bio }}</div>
</div>
</div>
</div>
<!-- RIGHT: SIDEBAR PANELS -->
<div v-if="!event.isCancelled" class="event-aside">
<!-- Ticket System -->
<EventTicketPurchase
v-if="event.tickets?.enabled"
:event-id="event._id || event.id"
:event-start-date="event.startDate"
:event-title="event.title"
:user-email="memberData?.email"
@success="handleTicketSuccess"
@error="handleTicketError"
/>
<!-- Legacy Registration -->
<template v-else>
<!-- Already Registered -->
<div v-if="registrationStatus === 'registered'" class="dashed-box">
<div class="box-title">Registration</div>
<p class="reg-status" style="color: var(--green)">
You're registered!
</p>
<p class="reg-price">Confirmation sent to your email</p>
<button
class="btn btn-danger"
:disabled="isCancelling"
@click="handleCancelRegistration"
>
{{ isCancelling ? "Cancelling..." : "Cancel Registration" }}
</button>
</div>
<!-- Member Status Issues -->
<div v-else-if="memberData && !canRSVP" class="dashed-box">
<div class="box-title">Registration</div>
<p class="reg-status" style="color: var(--ember)">
{{ statusConfig.label }}
</p>
<p class="reg-price">{{ getRSVPMessage() }}</p>
<NuxtLink
v-if="isPendingPayment"
to="#"
@click.prevent="completePayment"
>
<button class="btn btn-primary" :disabled="isProcessingPayment">
{{ isProcessingPayment ? "Processing..." : "Complete Payment" }}
</button>
</NuxtLink>
</div>
<!-- Members-Only Gate -->
<div
v-else-if="event.membersOnly && memberData && !isMember"
class="dashed-box"
>
<div class="box-title">Registration</div>
<p class="reg-status" style="color: var(--ember)">
Membership Required
</p>
<p class="reg-price">This event is exclusive to members.</p>
<NuxtLink to="/join"
><button class="btn btn-primary">
Become a Member
</button></NuxtLink
>
</div>
<!-- Can Register (logged in) -->
<div
v-else-if="memberData && (!event.membersOnly || isMember)"
class="dashed-box"
>
<div class="box-title">Registration</div>
<div v-if="event.maxAttendees" class="reg-status">
{{ event.maxAttendees - (event.registeredCount || 0) }} spots
remaining
</div>
<div class="reg-price">Free for members</div>
<button
class="btn btn-primary"
:disabled="isRegistering"
@click="handleRegistration"
>
{{ isRegistering ? "Registering..." : "Register for this event" }}
</button>
<a
:href="`/api/events/${route.params.slug}/calendar`"
download
class="cal-link"
>Add to calendar</a
>
</div>
<!-- Not Logged In -->
<div v-else class="dashed-box">
<div class="box-title">Registration</div>
<form @submit.prevent="handleRegistration">
<div class="field">
<label>Name</label>
<input v-model="registrationForm.name" type="text" required />
</div>
<div class="field">
<label>Email</label>
<input v-model="registrationForm.email" type="email" required />
</div>
<button
type="submit"
class="btn btn-primary"
:disabled="isRegistering"
>
{{ isRegistering ? "Registering..." : "Register for Event" }}
</button>
</form>
</div>
<!-- Waitlist -->
<div
v-if="event.tickets?.waitlist?.enabled && isEventFull"
class="dashed-box"
>
<div class="box-title">Waitlist</div>
<div v-if="isOnWaitlist">
<p class="reg-status">
You're on the waitlist (#{{ waitlistPosition }})
</p>
<button
class="btn"
@click="handleLeaveWaitlist"
:disabled="isJoiningWaitlist"
>
Leave Waitlist
</button>
</div>
<div v-else>
<p class="reg-status" style="color: var(--ember)">
This event is full
</p>
<form @submit.prevent="handleJoinWaitlist">
<div v-if="!memberData" class="field">
<label>Email</label>
<input v-model="waitlistForm.email" type="email" required />
</div>
<button type="submit" class="btn" :disabled="isJoiningWaitlist">
{{ isJoiningWaitlist ? "Joining..." : "Join Waitlist" }}
</button>
</form>
</div>
</div>
</template>
<!-- Event Details Box -->
<div class="dashed-box">
<div class="box-title">Event Details</div>
<div v-if="event.eventType" class="detail-row">
<span class="detail-key">Type</span>
<span class="detail-val">{{ event.eventType }}</span>
</div>
<div v-if="event.membersOnly" class="detail-row">
<span class="detail-key">Members only</span>
<span class="detail-val">Yes</span>
</div>
</div>
<!-- Questions -->
<div class="dashed-box">
<div class="box-title">Questions?</div>
<p
style="font-size: 12px; color: var(--text-dim); margin-bottom: 4px"
>
Drop us a line.
</p>
<a href="mailto:events@ghostguild.org" style="font-size: 12px"
>events@ghostguild.org</a
>
</div>
</div>
</div>
</div>
</template>
<script setup>
const route = useRoute();
const toast = useToast();
const {
data: event,
pending,
error,
} = await useFetch(`/api/events/${route.params.slug}`);
const pageBreadcrumbTitle = useState("pageBreadcrumbTitle", () => "");
pageBreadcrumbTitle.value = event.value?.title || "";
onUnmounted(() => {
pageBreadcrumbTitle.value = "";
});
if (error.value?.statusCode === 404) {
throw createError({ statusCode: 404, statusMessage: "Event not found" });
}
const { isMember, memberData, checkMemberStatus } = useAuth();
const {
isPendingPayment,
isSuspended,
isCancelled,
canRSVP,
statusConfig,
getRSVPMessage,
} = useMemberStatus();
const { completePayment, isProcessingPayment } = useMemberPayment();
onMounted(async () => {
await checkMemberStatus();
if (memberData.value) {
registrationForm.value.name = memberData.value.name;
registrationForm.value.email = memberData.value.email;
registrationForm.value.membershipLevel =
memberData.value.membershipLevel || "non-member";
await checkRegistrationStatus();
checkWaitlistStatus();
}
});
const checkRegistrationStatus = async () => {
if (!memberData.value?.email) return;
try {
const response = await $fetch(
`/api/events/${route.params.slug}/check-registration`,
{
method: "POST",
body: { email: memberData.value.email },
},
);
if (response.isRegistered) registrationStatus.value = "registered";
} catch (err) {
console.error("Failed to check registration status:", err);
}
};
const registrationForm = ref({
name: "",
email: "",
membershipLevel: "non-member",
});
const isRegistering = ref(false);
const isCancelling = ref(false);
const registrationStatus = ref("not-registered");
const isJoiningWaitlist = ref(false);
const isOnWaitlist = ref(false);
const waitlistPosition = ref(0);
const waitlistForm = ref({ email: "" });
const isEventFull = computed(() => {
if (!event.value?.maxAttendees) return false;
return (event.value.registeredCount || 0) >= event.value.maxAttendees;
});
const checkWaitlistStatus = () => {
const email = memberData.value?.email || waitlistForm.value.email;
if (!email || !event.value?.tickets?.waitlist?.enabled) return;
const entries = event.value.tickets.waitlist.entries || [];
const idx = entries.findIndex(
(e) => e.email.toLowerCase() === email.toLowerCase(),
);
if (idx !== -1) {
isOnWaitlist.value = true;
waitlistPosition.value = idx + 1;
}
};
const handleJoinWaitlist = async () => {
isJoiningWaitlist.value = true;
try {
const email = memberData.value?.email || waitlistForm.value.email;
const name = memberData.value?.name || "Guest";
const response = await $fetch(`/api/events/${route.params.slug}/waitlist`, {
method: "POST",
body: { email, name },
});
isOnWaitlist.value = true;
waitlistPosition.value = response.position;
toast.add({
title: "Added to Waitlist",
description: `You're #${response.position} on the waitlist.`,
color: "orange",
});
} catch (err) {
toast.add({
title: "Couldn't Join Waitlist",
description: err.data?.statusMessage || "Please try again.",
color: "red",
});
} finally {
isJoiningWaitlist.value = false;
}
};
const handleLeaveWaitlist = async () => {
isJoiningWaitlist.value = true;
try {
const email = memberData.value?.email || waitlistForm.value.email;
await $fetch(`/api/events/${route.params.slug}/waitlist`, {
method: "DELETE",
body: { email },
});
isOnWaitlist.value = false;
waitlistPosition.value = 0;
toast.add({ title: "Removed from Waitlist", color: "blue" });
} catch (err) {
toast.add({
title: "Error",
description: "Failed to leave waitlist.",
color: "red",
});
} finally {
isJoiningWaitlist.value = false;
}
};
const formatDate = (dateStr) => {
const d = new Date(dateStr);
return new Intl.DateTimeFormat("en-US", {
weekday: "long",
year: "numeric",
month: "long",
day: "numeric",
}).format(d);
};
const formatTime = (start, end) => {
const fmt = new Intl.DateTimeFormat("en-US", {
hour: "numeric",
minute: "2-digit",
timeZoneName: "short",
});
return `${fmt.format(new Date(start))} – ${fmt.format(new Date(end))}`;
};
const handleRegistration = async () => {
isRegistering.value = true;
try {
await $fetch(`/api/events/${route.params.slug}/register`, {
method: "POST",
body: registrationForm.value,
});
registrationStatus.value = "registered";
toast.add({
title: "Registered!",
description: `You're registered for ${event.value.title}.`,
color: "green",
});
if (event.value.registeredCount !== undefined)
event.value.registeredCount++;
} catch (err) {
toast.add({
title: "Registration Failed",
description: err.data?.statusMessage || "Please try again.",
color: "red",
});
} finally {
isRegistering.value = false;
}
};
const handleCancelRegistration = async () => {
isCancelling.value = true;
try {
await $fetch(`/api/events/${route.params.slug}/cancel-registration`, {
method: "POST",
body: { email: registrationForm.value.email || memberData.value?.email },
});
registrationStatus.value = "not-registered";
toast.add({ title: "Registration Cancelled", color: "blue" });
if (event.value.registeredCount !== undefined)
event.value.registeredCount--;
} catch (err) {
toast.add({
title: "Cancellation Failed",
description: err.data?.statusMessage || "Please try again.",
color: "red",
});
} finally {
isCancelling.value = false;
}
};
const handleTicketSuccess = () => {
if (event.value.registeredCount !== undefined) event.value.registeredCount++;
};
const handleTicketError = (err) => {
console.error("Ticket purchase failed:", err);
};
useHead(() => ({
title: event.value
? `${event.value.title} - Ghost Guild Events`
: "Event - Ghost Guild",
meta: [
{
name: "description",
content: event.value?.description || "View event details and register",
},
],
}));
</script>
<style scoped>
.loading {
padding: 48px 32px;
color: var(--text-dim);
}
.loading h2 {
font-family: "Brygada 1918", serif;
font-size: 22px;
color: var(--text-bright);
margin-bottom: 8px;
}
.event-feature-image {
border-bottom: 1px dashed var(--border);
}
.event-feature-image img {
display: block;
width: 100%;
max-height: 400px;
object-fit: cover;
}
.event-header {
padding: 28px 32px;
border-bottom: 1px dashed var(--border);
}
.event-header h1 {
font-family: "Brygada 1918", serif;
font-size: 28px;
font-weight: 600;
color: var(--text-bright);
line-height: 1.15;
margin-bottom: 16px;
}
.event-meta-row {
display: flex;
flex-wrap: wrap;
gap: 24px;
font-size: 12px;
color: var(--text-dim);
}
.meta-label {
font-size: 10px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-faint);
display: block;
margin-bottom: 2px;
}
.cancelled-notice {
padding: 20px 32px;
border-bottom: 1px dashed var(--border);
color: var(--ember);
font-size: 12px;
}
.cancelled-notice strong {
display: block;
margin-bottom: 4px;
}
/* ---- TWO-COLUMN BODY ---- */
.event-body {
display: grid;
grid-template-columns: 1fr 280px;
}
.event-main {
min-width: 0;
}
.event-aside {
border-left: 1px dashed var(--border);
padding: 0;
}
.event-aside .dashed-box {
margin: 0;
border: none;
border-bottom: 1px dashed var(--border);
padding: 20px 24px;
}
.event-aside .dashed-box:hover {
border-color: var(--border);
}
.section {
padding: 24px 32px;
border-bottom: 1px dashed var(--border);
}
.section h2 {
font-family: "Brygada 1918", serif;
font-size: 18px;
font-weight: 500;
color: var(--text-bright);
margin-bottom: 8px;
}
.section p {
font-size: 12px;
color: var(--text-dim);
line-height: 1.7;
max-width: 560px;
}
.circle-badges {
display: flex;
gap: 6px;
margin-top: 4px;
}
.series-note {
font-size: 12px;
color: var(--text-dim);
}
.agenda-list {
padding-left: 20px;
font-size: 12px;
color: var(--text-dim);
line-height: 2;
}
.speaker {
padding: 8px 0;
border-bottom: 1px dashed var(--border);
}
.speaker:last-child {
border-bottom: none;
}
.speaker-name {
font-size: 13px;
color: var(--text-bright);
font-weight: 500;
}
.speaker-role {
font-size: 11px;
color: var(--text-dim);
}
.speaker-bio {
font-size: 11px;
color: var(--text-faint);
margin-top: 2px;
}
.box-title {
font-size: 10px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--text-faint);
margin-bottom: 8px;
}
.reg-status {
font-size: 13px;
color: var(--text);
margin-bottom: 4px;
}
.reg-price {
font-size: 11px;
color: var(--text-faint);
margin-bottom: 10px;
}
.cal-link {
display: block;
margin-top: 8px;
font-size: 11px;
color: var(--candle);
}
.detail-row {
display: flex;
justify-content: space-between;
padding: 4px 0;
font-size: 12px;
border-bottom: 1px dashed var(--border);
}
.detail-row:last-child {
border-bottom: none;
}
.detail-key {
color: var(--text-faint);
}
.detail-val {
color: var(--text);
}
@media (max-width: 768px) {
.event-body {
grid-template-columns: 1fr;
}
.event-aside {
border-left: none;
border-top: 1px dashed var(--border);
}
.event-meta-row {
flex-direction: column;
gap: 8px;
}
}
</style>

321
app/pages/events/index.vue
View file

@ -3,13 +3,16 @@
<!-- HERO (compact) --> <!-- HERO (compact) -->
<div class="hero"> <div class="hero">
<h1>Events</h1> <h1>Events</h1>
<p>Workshops, meetups, and gatherings for game developers practicing cooperative models.</p> <p>
Workshops, meetups, and gatherings for game developers practicing
cooperative models.
</p>
</div> </div>
<!-- FILTER BAR --> <!-- FILTER BAR -->
<FilterBar v-model="activeFilter" :filters="filterOptions"> <FilterBar v-model="activeFilter" :filters="filterOptions">
<label class="filter-toggle"> <label class="filter-toggle">
<input type="checkbox" v-model="includePastEvents"> Show past events <input type="checkbox" v-model="includePastEvents" /> Show past events
</label> </label>
</FilterBar> </FilterBar>
@ -19,13 +22,31 @@
v-for="event in filteredEvents" v-for="event in filteredEvents"
:key="event._id" :key="event._id"
class="event-row" class="event-row"
:class="{ 'is-cancelled': event.isCancelled }"
> >
<span class="event-date">{{ formatDate(event.startDate) }}</span> <div class="event-date-col">
<span class="event-date">{{ formatDate(event.startDate) }}</span>
<span class="event-time">{{ formatTime(event.startDate) }}</span>
</div>
<div class="event-info"> <div class="event-info">
<div class="event-title"> <div class="event-title">
<NuxtLink :to="`/events/${event._id}`">{{ event.title }}</NuxtLink> <NuxtLink :to="`/events/${event.slug || event._id}`">{{
event.title
}}</NuxtLink>
<span v-if="event.isCancelled" class="cancelled-tag"
>cancelled</span
>
</div>
<div v-if="event.tagline" class="event-tagline">
{{ event.tagline }}
</div>
<div class="event-sub">
<span v-if="event.eventType" class="event-type-tag">{{
event.eventType
}}</span>
<span v-if="event.eventType" class="sep">·</span>
<span class="event-location">{{ formatLocation(event) }}</span>
</div> </div>
<div v-if="event.eventType" class="event-type">{{ event.eventType }}</div>
</div> </div>
<span class="event-capacity"> <span class="event-capacity">
<template v-if="event.maxAttendees"> <template v-if="event.maxAttendees">
@ -35,8 +56,11 @@
</template> </template>
<template v-else>Open</template> <template v-else>Open</template>
</span> </span>
<CircleBadge v-if="event.circle" :circle="event.circle" /> <div class="event-badges">
<span v-else class="badge all">All</span> <span v-if="event.membersOnly" class="members-badge">Members</span>
<CircleBadge v-if="event.circle" :circle="event.circle" />
<span v-else class="badge all">All</span>
</div>
</div> </div>
<div v-if="!filteredEvents?.length" class="empty">No events found</div> <div v-if="!filteredEvents?.length" class="empty">No events found</div>
</div> </div>
@ -54,68 +78,111 @@
<h3>{{ series.title }}</h3> <h3>{{ series.title }}</h3>
<p class="series-desc">{{ series.description }}</p> <p class="series-desc">{{ series.description }}</p>
<div class="series-meta"> <div class="series-meta">
<span>{{ series.eventCount || series.events?.length || 0 }} sessions</span> <span
<span v-if="series.startDate">{{ formatDate(series.startDate) }} &ndash; {{ formatDate(series.endDate) }}</span> >{{
series.eventCount || series.events?.length || 0
}}
sessions</span
>
<span v-if="series.startDate"
>{{ formatDate(series.startDate) }} &ndash;
{{ formatDate(series.endDate) }}</span
>
</div> </div>
</NuxtLink> </NuxtLink>
</div> </div>
</div> </div>
<!-- PROPOSE AN EVENT --> <!-- PROPOSE AN EVENT -->
<!-- TODO: Build /events/propose page + form for members to submit event ideas.
Think through before building:
- Who can propose? Members only, or any circle?
- Required fields: title, description, proposed date/time, target circle,
format (workshop/social/talk/etc.), estimated attendance
- Approval workflow: does an admin review and publish, or does it auto-post
as a draft?
- Interest threshold mechanic: can other members +1 a proposal to signal
demand before it gets formally scheduled?
- Notifications: proposer gets notified when approved/declined
See CLAUDE.md product spec for additional context. -->
<div class="full-section"> <div class="full-section">
<div class="section-label">Have an idea?</div> <div class="section-label">Have an idea?</div>
<DashedBox> <DashedBox>
<h3>Propose an Event</h3> <h3>Propose an Event</h3>
<p>Members can propose events for any circle. Workshops, social hangs, talks, or anything else that serves the community.</p> <p>
<NuxtLink to="/events" class="cta">Propose an event &rarr;</NuxtLink> Members can propose events for any circle. Workshops, social hangs,
talks, or anything else that serves the community.
</p>
<span class="cta cta-soon"
>Propose an event &rarr; <em>coming soon</em></span
>
</DashedBox> </DashedBox>
</div> </div>
</div> </div>
</template> </template>
<script setup> <script setup>
const activeFilter = ref('all') const activeFilter = ref("all");
const includePastEvents = ref(false) const includePastEvents = ref(false);
const filterOptions = [ const filterOptions = [
{ label: 'All', value: 'all' }, { label: "All", value: "all" },
{ label: 'Workshops', value: 'workshop' }, { label: "Workshops", value: "workshop" },
{ label: 'Community', value: 'community' }, { label: "Community", value: "community" },
{ label: 'Social', value: 'social' }, { label: "Social", value: "social" },
{ label: 'Showcase', value: 'showcase' }, { label: "Showcase", value: "showcase" },
] ];
const { data: eventsData } = await useFetch('/api/events') const { data: eventsData } = await useFetch("/api/events");
const { data: seriesData } = await useFetch('/api/series') const { data: seriesData } = await useFetch("/api/series");
const now = new Date() const now = new Date();
const filteredEvents = computed(() => { const filteredEvents = computed(() => {
if (!eventsData.value) return [] if (!eventsData.value) return [];
return eventsData.value.filter((event) => { return eventsData.value.filter((event) => {
if (!includePastEvents.value && new Date(event.startDate) < now) return false if (!includePastEvents.value && new Date(event.startDate) < now)
if (activeFilter.value !== 'all' && event.eventType !== activeFilter.value) return false return false;
return true if (activeFilter.value !== "all" && event.eventType !== activeFilter.value)
}) return false;
}) return true;
});
});
const activeSeries = computed(() => { const activeSeries = computed(() => {
if (!seriesData.value) return [] if (!seriesData.value) return [];
return seriesData.value.filter( return seriesData.value.filter(
(s) => s.status === 'active' || s.isOngoing || s.isUpcoming, (s) => s.status === "active" || s.isOngoing || s.isUpcoming,
) );
}) });
const formatDate = (dateStr) => { const formatDate = (dateStr) => {
if (!dateStr) return '' if (!dateStr) return "";
const d = new Date(dateStr) const d = new Date(dateStr);
return d.toLocaleDateString('en-US', { month: 'short', day: 'numeric' }) const opts = { month: "short", day: "numeric" };
} if (d.getFullYear() !== new Date().getFullYear()) opts.year = "numeric";
return d.toLocaleDateString("en-US", opts);
};
const formatTime = (dateStr) => {
if (!dateStr) return "";
const d = new Date(dateStr);
return d.toLocaleTimeString("en-US", { hour: "numeric", minute: "2-digit" });
};
const formatLocation = (event) => {
if (event.isOnline) return "Online";
if (!event.location) return "";
if (event.location.startsWith("#")) return event.location;
// Treat any URL as an online link
if (event.location.startsWith("http")) return "Online";
return event.location;
};
const isAlmostFull = (event) => { const isAlmostFull = (event) => {
if (!event.maxAttendees) return false if (!event.maxAttendees) return false;
return (event.registeredCount || 0) / event.maxAttendees > 0.8 return (event.registeredCount || 0) / event.maxAttendees > 0.8;
} };
</script> </script>
<style scoped> <style scoped>
@ -124,7 +191,7 @@ const isAlmostFull = (event) => {
border-bottom: 1px dashed var(--border); border-bottom: 1px dashed var(--border);
} }
.hero h1 { .hero h1 {
font-family: 'Brygada 1918', serif; font-family: "Brygada 1918", serif;
font-size: 28px; font-size: 28px;
font-weight: 600; font-weight: 600;
color: var(--text-bright); color: var(--text-bright);
@ -143,26 +210,131 @@ const isAlmostFull = (event) => {
padding: 0 32px; padding: 0 32px;
border-bottom: 1px dashed var(--border); border-bottom: 1px dashed var(--border);
} }
.event-row { .event-row {
display: grid; display: grid;
grid-template-columns: 80px 1fr auto auto; grid-template-columns: 90px 1fr auto auto;
gap: 16px; gap: 16px;
align-items: baseline; align-items: start;
padding: 12px 0; padding: 14px 0;
border-bottom: 1px dashed var(--border); border-bottom: 1px dashed var(--border);
transition: padding-left 0.2s; transition: padding-left 0.2s;
} }
.event-row:first-child { padding-top: 16px; } .event-row:first-child {
.event-row:last-child { border-bottom: none; padding-bottom: 16px; } padding-top: 18px;
.event-row:hover { padding-left: 4px; } }
.event-date { color: var(--text-faint); font-size: 12px; white-space: nowrap; } .event-row:last-child {
.event-info { min-width: 0; } border-bottom: none;
.event-title { color: var(--text); font-size: 13px; } padding-bottom: 18px;
.event-title a { color: var(--text); text-decoration: none; } }
.event-title a:hover { color: var(--candle); } .event-row:hover {
.event-type { font-size: 10px; color: var(--text-faint); margin-top: 1px; } padding-left: 4px;
.event-capacity { font-size: 11px; color: var(--text-faint); white-space: nowrap; } }
.seats-warn { color: var(--ember); } .event-row.is-cancelled {
opacity: 0.5;
}
.event-date-col {
display: flex;
flex-direction: column;
gap: 3px;
padding-top: 1px;
}
.event-date {
color: var(--text-faint);
font-size: 12px;
white-space: nowrap;
}
.event-time {
color: var(--text-faint);
font-size: 11px;
white-space: nowrap;
}
.event-info {
min-width: 0;
}
.event-title {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
font-size: 13px;
color: var(--text);
}
.event-title a {
color: var(--text);
text-decoration: none;
}
.event-title a:hover {
color: var(--candle);
}
.cancelled-tag {
font-size: 9px;
letter-spacing: 0.07em;
text-transform: uppercase;
color: var(--ember);
border: 1px solid currentColor;
padding: 1px 5px;
line-height: 1.5;
flex-shrink: 0;
}
.event-tagline {
font-size: 11px;
color: var(--text-dim);
line-height: 1.55;
margin-top: 3px;
}
.event-sub {
display: flex;
align-items: center;
gap: 5px;
margin-top: 3px;
}
.event-type-tag {
font-size: 10px;
color: var(--text-faint);
text-transform: capitalize;
}
.sep {
font-size: 10px;
color: var(--text-faint);
}
.event-location {
font-size: 10px;
color: var(--text-faint);
}
.event-capacity {
font-size: 11px;
color: var(--text-faint);
white-space: nowrap;
padding-top: 2px;
}
.seats-warn {
color: var(--ember);
}
.event-badges {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 4px;
}
.members-badge {
font-size: 9px;
letter-spacing: 0.07em;
text-transform: uppercase;
color: var(--text-faint);
border: 1px dashed var(--border);
padding: 1px 5px;
white-space: nowrap;
line-height: 1.5;
}
/* ---- FULL SECTION ---- */ /* ---- FULL SECTION ---- */
.full-section { .full-section {
@ -183,10 +355,14 @@ const isAlmostFull = (event) => {
text-decoration: none; text-decoration: none;
transition: background 0.15s; transition: background 0.15s;
} }
.series-box:last-child { border-right: none; } .series-box:last-child {
.series-box:hover { background: var(--surface-hover); } border-right: none;
}
.series-box:hover {
background: var(--surface-hover);
}
.series-box h3 { .series-box h3 {
font-family: 'Brygada 1918', serif; font-family: "Brygada 1918", serif;
font-size: 16px; font-size: 16px;
font-weight: 500; font-weight: 500;
color: var(--text-bright); color: var(--text-bright);
@ -208,7 +384,7 @@ const isAlmostFull = (event) => {
/* ---- PROPOSE ---- */ /* ---- PROPOSE ---- */
.full-section h3 { .full-section h3 {
font-family: 'Brygada 1918', serif; font-family: "Brygada 1918", serif;
font-size: 16px; font-size: 16px;
font-weight: 500; font-weight: 500;
color: var(--text-bright); color: var(--text-bright);
@ -226,6 +402,15 @@ const isAlmostFull = (event) => {
font-size: 12px; font-size: 12px;
color: var(--candle); color: var(--candle);
} }
.cta-soon {
color: var(--text-faint);
cursor: default;
}
.cta-soon em {
font-style: normal;
font-size: 10px;
opacity: 0.65;
}
.filter-toggle { .filter-toggle {
display: flex; display: flex;
@ -248,12 +433,22 @@ const isAlmostFull = (event) => {
@media (max-width: 768px) { @media (max-width: 768px) {
.event-row { .event-row {
grid-template-columns: 60px 1fr; grid-template-columns: 70px 1fr;
gap: 8px; gap: 8px;
} }
.event-capacity { display: none; } .event-capacity,
.series-grid { grid-template-columns: 1fr; } .event-badges {
.series-box { border-right: none; border-bottom: 1px dashed var(--border); } display: none;
.series-box:last-child { border-bottom: none; } }
.series-grid {
grid-template-columns: 1fr;
}
.series-box {
border-right: none;
border-bottom: 1px dashed var(--border);
}
.series-box:last-child {
border-bottom: none;
}
} }
</style> </style>

2
app/pages/index.vue
View file

@ -49,7 +49,7 @@
<div class="block-inset event-item-inner"> <div class="block-inset event-item-inner">
<span class="event-date">{{ formatDate(event.startDate) }}</span> <span class="event-date">{{ formatDate(event.startDate) }}</span>
<span class="event-title"> <span class="event-title">
<NuxtLink :to="`/events/${event._id}`">{{ <NuxtLink :to="`/events/${event.slug || event._id}`">{{
event.title event.title
}}</NuxtLink> }}</NuxtLink>
</span> </span>

12
app/pages/members/[id].vue
View file

@ -233,6 +233,18 @@ const getInitials = (name) => {
const { data, pending, error: fetchError } = useFetch(`/api/members/${id}`); const { data, pending, error: fetchError } = useFetch(`/api/members/${id}`);
const member = computed(() => data.value?.member || null); const member = computed(() => data.value?.member || null);
const pageBreadcrumbTitle = useState("pageBreadcrumbTitle", () => "");
watch(
member,
(val) => {
pageBreadcrumbTitle.value = val?.name || "";
},
{ immediate: true },
);
onUnmounted(() => {
pageBreadcrumbTitle.value = "";
});
// Page head // Page head
useHead({ useHead({
title: computed(() => title: computed(() =>

116
scripts/migrate-event-slugs.js
View file

@ -1,66 +1,90 @@
import mongoose from 'mongoose' import mongoose from "mongoose";
import Event from '../server/models/event.js' import dotenv from "dotenv";
import { connectDB } from '../server/utils/mongoose.js' import { connectDB } from "../server/utils/mongoose.js";
import Event from "../server/models/event.js";
// Generate slug from title dotenv.config();
function generateSlug(title) {
return title function generateSlug(title, startDate) {
const titleSlug = title
.toLowerCase() .toLowerCase()
.replace(/[^a-z0-9]+/g, '-') .replace(/[^a-z0-9]+/g, "-")
.replace(/^-+|-+$/g, '') .replace(/^-+|-+$/g, "");
if (startDate) {
const d = new Date(startDate);
const year = d.getUTCFullYear();
const month = String(d.getUTCMonth() + 1).padStart(2, "0");
const day = String(d.getUTCDate()).padStart(2, "0");
return `${year}-${month}-${day}-${titleSlug}`;
}
return titleSlug;
} }
async function migrateEventSlugs() { async function migrateEventSlugs() {
try { try {
// Connect to database await connectDB();
await connectDB() console.log("Connected to database\n");
console.log('Connected to database')
// Find all events without slugs const events = await Event.find({}).sort({ startDate: 1 }).lean();
const eventsWithoutSlugs = await Event.find({ console.log(`Found ${events.length} event(s) to process\n`);
$or: [
{ slug: { $exists: false } },
{ slug: null },
{ slug: '' }
]
})
console.log(`Found ${eventsWithoutSlugs.length} events without slugs`) if (events.length === 0) {
console.log("No events found.");
if (eventsWithoutSlugs.length === 0) { return;
console.log('All events already have slugs!')
return
} }
// Generate and assign unique slugs // Build new slugs first so uniqueness checks don't conflict with slugs
for (const event of eventsWithoutSlugs) { // we're about to replace in the same run.
let baseSlug = generateSlug(event.title) const updates = [];
let slug = baseSlug const usedSlugs = new Set();
let counter = 1
// Ensure slug is unique for (const event of events) {
while (await Event.findOne({ slug, _id: { $ne: event._id } })) { let baseSlug = generateSlug(event.title, event.startDate);
slug = `${baseSlug}-${counter}` let slug = baseSlug;
counter++ let counter = 1;
// Ensure slug is unique within this batch and across the DB
// (excluding the current event's own existing slug)
while (
usedSlugs.has(slug) ||
(await Event.findOne({ slug, _id: { $ne: event._id } }).lean())
) {
slug = `${baseSlug}-${counter}`;
counter++;
} }
event.slug = slug usedSlugs.add(slug);
await event.save({ validateBeforeSave: false }) // Skip validation to avoid pre-save hook updates.push({ event, oldSlug: event.slug, newSlug: slug });
console.log(`✓ Generated slug "${slug}" for event "${event.title}"`)
} }
console.log(`Successfully migrated ${eventsWithoutSlugs.length} events!`) // Apply updates
let changed = 0;
let skipped = 0;
for (const { event, oldSlug, newSlug } of updates) {
if (oldSlug === newSlug) {
console.log(` — ${event.title}`);
console.log(` slug unchanged: ${newSlug}`);
skipped++;
} else {
// Use updateOne to bypass the pre-save hook (avoids re-triggering slug generation)
await Event.updateOne({ _id: event._id }, { $set: { slug: newSlug } });
console.log(` ✓ ${event.title}`);
console.log(` ${oldSlug || "(none)"} → ${newSlug}`);
changed++;
}
}
console.log(`\nDone. ${changed} updated, ${skipped} already correct.`);
} catch (error) { } catch (error) {
console.error('Error migrating event slugs:', error) console.error("\nMigration failed:", error);
process.exit(1);
} finally { } finally {
await mongoose.connection.close() await mongoose.connection.close();
console.log('Database connection closed') console.log("Database connection closed.");
} }
} }
// Run migration if called directly migrateEventSlugs();
if (import.meta.url === `file://${process.argv[1]}`) {
migrateEventSlugs()
}
export default migrateEventSlugs

17
server/api/admin/members/[id].get.js Normal file
View file

@ -0,0 +1,17 @@
import Member from '../../../models/member.js'
import { connectDB } from '../../../utils/mongoose.js'
export default defineEventHandler(async (event) => {
await requireAdmin(event)
const memberId = getRouterParam(event, 'id')
await connectDB()
const member = await Member.findById(memberId).lean()
if (!member) {
throw createError({ statusCode: 404, statusMessage: 'Member not found' })
}
return member
})

27
server/models/event.js
View file

@ -187,20 +187,35 @@ const eventSchema = new mongoose.Schema({
updatedAt: { type: Date, default: Date.now }, updatedAt: { type: Date, default: Date.now },
}); });
// Generate slug from title // Generate slug from title and startDate
function generateSlug(title) { function generateSlug(title, startDate) {
return title const titleSlug = title
.toLowerCase() .toLowerCase()
.replace(/[^a-z0-9]+/g, "-") .replace(/[^a-z0-9]+/g, "-")
.replace(/^-+|-+$/g, ""); .replace(/^-+|-+$/g, "");
if (startDate) {
const d = new Date(startDate);
const year = d.getUTCFullYear();
const month = String(d.getUTCMonth() + 1).padStart(2, "0");
const day = String(d.getUTCDate()).padStart(2, "0");
return `${year}-${month}-${day}-${titleSlug}`;
}
return titleSlug;
} }
// Pre-save hook to generate slug // Pre-save hook to generate slug
eventSchema.pre("save", async function (next) { eventSchema.pre("save", async function (next) {
try { try {
// Always generate slug if it doesn't exist or if title has changed // Always generate slug if it doesn't exist or if title/startDate has changed
if (!this.slug || this.isNew || this.isModified("title")) { if (
let baseSlug = generateSlug(this.title); !this.slug ||
this.isNew ||
this.isModified("title") ||
this.isModified("startDate")
) {
let baseSlug = generateSlug(this.title, this.startDate);
let slug = baseSlug; let slug = baseSlug;
let counter = 1; let counter = 1;