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

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

@ -8,7 +8,9 @@
<p>Manage members, contributions, and access</p>
</div>
<div class="header-actions">
<button class="btn" @click="showImportModal = true">Import CSV</button>
<button class="btn" @click="showImportModal = true">
Import CSV
</button>
<button
class="btn"
:disabled="selectedMemberIds.length === 0"
@ -16,20 +18,19 @@
>
Send Invites ({{ selectedMemberIds.length }})
</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>
<!-- Search / Filter -->
<div class="filter-bar">
<div class="field" style="margin-bottom: 0; flex: 1;">
<input
v-model="searchQuery"
placeholder="Search members..."
/>
<div class="field" style="margin-bottom: 0; flex: 1">
<input v-model="searchQuery" placeholder="Search members..." />
</div>
<div class="field" style="margin-bottom: 0;">
<div class="field" style="margin-bottom: 0">
<select v-model="circleFilter">
<option value="">All Circles</option>
<option value="community">Community</option>
@ -55,7 +56,13 @@
<tr>
<th class="col-check">
<UCheckbox
:model-value="allVisibleSelected ? true : (someVisibleSelected ? 'indeterminate' : false)"
:model-value="
allVisibleSelected
? true
: someVisibleSelected
? 'indeterminate'
: false
"
@update:model-value="toggleSelectAll"
/>
</th>
@ -79,21 +86,34 @@
</td>
<td class="col-name">{{ member.name }}</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>
<span :class="member.inviteEmailSent ? 'status-ok' : 'status-dim'">
{{ member.inviteEmailSent ? 'Sent' : 'Not sent' }}
<span
:class="member.inviteEmailSent ? 'status-ok' : 'status-dim'"
>
{{ member.inviteEmailSent ? "Sent" : "Not sent" }}
</span>
</td>
<td>
<span :class="member.slackInvited ? 'status-ok' : 'status-dim'">
{{ member.slackInvited ? 'Invited' : 'Pending' }}
{{ member.slackInvited ? "Invited" : "Pending" }}
</span>
</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">
<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>
</td>
</tr>
@ -106,11 +126,17 @@
</div>
<!-- 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-header">
<h2>Add New Member</h2>
<button class="modal-close" @click="showCreateModal = false">&times;</button>
<button class="modal-close" @click="showCreateModal = false">
&times;
</button>
</div>
<form @submit.prevent="createMember" class="modal-body">
@ -120,7 +146,12 @@
</div>
<div class="field">
<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 class="field">
<label>Circle</label>
@ -141,9 +172,11 @@
</select>
</div>
<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">
{{ creating ? 'Creating...' : 'Create Member' }}
{{ creating ? "Creating..." : "Create Member" }}
</button>
</div>
</form>
@ -151,7 +184,11 @@
</div>
<!-- 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-header">
<h2>Import Members from CSV</h2>
@ -161,10 +198,12 @@
<div class="modal-body">
<div v-if="!csvRows.length">
<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 class="help-text" style="margin-bottom: 12px;">
Valid circles: community, founder, practitioner. Valid tiers: 0, 5, 15, 30, 50.
<p class="help-text" style="margin-bottom: 12px">
Valid circles: community, founder, practitioner. Valid tiers: 0,
5, 15, 30, 50.
</p>
<input
ref="csvFileInput"
@ -181,11 +220,21 @@
<div v-if="csvRows.length">
<div class="csv-summary">
<span>{{ csvRows.length }} row{{ csvRows.length !== 1 ? 's' : '' }} parsed.</span>
<span v-if="csvValidRows.length !== csvRows.length" class="csv-errors">
<span
>{{ 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.
</span>
<button @click="resetCsvImport" class="link-btn">Choose different file</button>
<button @click="resetCsvImport" class="link-btn">
Choose different file
</button>
</div>
<div class="csv-table-wrap">
@ -200,9 +249,15 @@
</tr>
</thead>
<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>
<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>
</td>
<td>{{ row.name }}</td>
@ -217,13 +272,17 @@
<div v-if="importResults" class="results-box">
<strong>Import complete</strong>
<p class="status-ok">{{ importResults.created }} created</p>
<p v-if="importResults.failed" class="status-error">{{ importResults.failed }} failed</p>
<div v-if="importResults.results?.some(r => !r.success)">
<p v-if="importResults.failed" class="status-error">
{{ importResults.failed }} failed
</p>
<div v-if="importResults.results?.some((r) => !r.success)">
<p
v-for="fail in importResults.results.filter(r => !r.success)"
v-for="fail in importResults.results.filter(
(r) => !r.success,
)"
:key="fail.email"
class="status-error"
style="font-size: 11px;"
style="font-size: 11px"
>
{{ fail.email }}: {{ fail.error }}
</p>
@ -234,7 +293,7 @@
<div class="modal-actions">
<button @click="closeImportModal" class="btn">
{{ importResults ? 'Done' : 'Cancel' }}
{{ importResults ? "Done" : "Cancel" }}
</button>
<button
v-if="csvValidRows.length && !importResults"
@ -242,18 +301,28 @@
@click="submitImport"
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>
</div>
</div>
</div>
<!-- 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-header">
<h2>Edit Member</h2>
<button class="modal-close" @click="showEditModal = false">&times;</button>
<button class="modal-close" @click="showEditModal = false">
&times;
</button>
</div>
<form @submit.prevent="submitEditMember" class="modal-body">
@ -293,9 +362,11 @@
</select>
</div>
<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">
{{ saving ? 'Saving...' : 'Save Changes' }}
{{ saving ? "Saving..." : "Save Changes" }}
</button>
</div>
</form>
@ -303,28 +374,32 @@
</div>
<!-- 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-header">
<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 class="modal-body">
<p class="help-text">
Sending to <strong>{{ selectedMemberIds.length }}</strong>
member{{ selectedMemberIds.length !== 1 ? 's' : '' }}.
Each receives a unique magic login link valid for 48 hours.
Sending to <strong>{{ selectedMemberIds.length }}</strong> member{{
selectedMemberIds.length !== 1 ? "s" : ""
}}. Each receives a unique magic login link valid for 48 hours.
</p>
<div class="field">
<label>Email Template</label>
<textarea
v-model="inviteTemplate"
rows="12"
></textarea>
<p class="help-text" style="margin-top: 4px;">
Tokens: <code>{name}</code>, <code>{loginLink}</code>, <code>{circle}</code>
<textarea v-model="inviteTemplate" rows="12"></textarea>
<p class="help-text" style="margin-top: 4px">
Tokens: <code>{name}</code>, <code>{loginLink}</code>,
<code>{circle}</code>
</p>
</div>
@ -336,13 +411,15 @@
<div v-if="inviteResults" class="results-box">
<strong>Invites sent</strong>
<p class="status-ok">{{ inviteResults.sent }} sent</p>
<p v-if="inviteResults.failed" class="status-error">{{ inviteResults.failed }} failed</p>
<div v-if="inviteResults.results?.some(r => !r.success)">
<p v-if="inviteResults.failed" class="status-error">
{{ inviteResults.failed }} failed
</p>
<div v-if="inviteResults.results?.some((r) => !r.success)">
<p
v-for="fail in inviteResults.results.filter(r => !r.success)"
v-for="fail in inviteResults.results.filter((r) => !r.success)"
:key="fail.email"
class="status-error"
style="font-size: 11px;"
style="font-size: 11px"
>
{{ fail.email }}: {{ fail.error }}
</p>
@ -352,7 +429,7 @@
<div class="modal-actions">
<button @click="showInviteModal = false" class="btn">
{{ inviteResults ? 'Done' : 'Cancel' }}
{{ inviteResults ? "Done" : "Cancel" }}
</button>
<button
v-if="!inviteResults"
@ -360,7 +437,11 @@
@click="submitInvites"
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>
</div>
</div>
@ -370,39 +451,39 @@
<script setup>
definePageMeta({
layout: 'admin',
middleware: 'admin',
})
layout: "admin",
middleware: "admin",
});
const toast = useToast()
const toast = useToast();
const {
data: members,
pending,
error,
refresh,
} = await useFetch('/api/admin/members')
} = await useFetch("/api/admin/members");
const searchQuery = ref('')
const circleFilter = ref('')
const showCreateModal = ref(false)
const creating = ref(false)
const searchQuery = ref("");
const circleFilter = ref("");
const showCreateModal = ref(false);
const creating = ref(false);
// Selection
const selectedMemberIds = ref([])
const selectedMemberIds = ref([]);
// CSV import
const showImportModal = ref(false)
const csvFileInput = ref(null)
const csvRows = ref([])
const csvParseError = ref('')
const importing = ref(false)
const importResults = ref(null)
const showImportModal = ref(false);
const csvFileInput = ref(null);
const csvRows = ref([]);
const csvParseError = ref("");
const importing = ref(false);
const importResults = ref(null);
// Invite
const showInviteModal = ref(false)
const sendingInvites = ref(false)
const inviteResults = ref(null)
const showInviteModal = ref(false);
const sendingInvites = ref(false);
const inviteResults = ref(null);
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.
See you inside.`
See you inside.`;
const inviteTemplate = ref(DEFAULT_INVITE_TEMPLATE)
const inviteTemplate = ref(DEFAULT_INVITE_TEMPLATE);
const newMember = reactive({
name: '',
email: '',
circle: 'community',
contributionTier: '0',
})
name: "",
email: "",
circle: "community",
contributionTier: "0",
});
const filteredMembers = computed(() => {
if (!members.value) return []
if (!members.value) return [];
return members.value.filter((member) => {
const matchesSearch =
!searchQuery.value ||
member.name.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
member.email.toLowerCase().includes(searchQuery.value.toLowerCase())
member.email.toLowerCase().includes(searchQuery.value.toLowerCase());
const matchesCircle =
!circleFilter.value || member.circle === circleFilter.value
!circleFilter.value || member.circle === circleFilter.value;
return matchesSearch && matchesCircle
})
})
return matchesSearch && matchesCircle;
});
});
// Selection helpers
const allVisibleSelected = computed(() => {
if (!filteredMembers.value.length) return false
if (!filteredMembers.value.length) return false;
return filteredMembers.value.every((m) =>
selectedMemberIds.value.includes(m._id)
)
})
selectedMemberIds.value.includes(m._id),
);
});
const someVisibleSelected = computed(() => {
return filteredMembers.value.some((m) =>
selectedMemberIds.value.includes(m._id)
)
})
selectedMemberIds.value.includes(m._id),
);
});
const toggleSelectAll = () => {
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(
(id) => !visibleIds.has(id)
)
(id) => !visibleIds.has(id),
);
} else {
const currentSet = new Set(selectedMemberIds.value)
const currentSet = new Set(selectedMemberIds.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 idx = selectedMemberIds.value.indexOf(id)
const idx = selectedMemberIds.value.indexOf(id);
if (idx >= 0) {
selectedMemberIds.value.splice(idx, 1)
selectedMemberIds.value.splice(idx, 1);
} else {
selectedMemberIds.value.push(id)
selectedMemberIds.value.push(id);
}
}
};
// Invite preview
const invitePreviewMember = computed(() => {
if (!selectedMemberIds.value.length || !members.value) return null
return members.value.find((m) => m._id === selectedMemberIds.value[0])
})
if (!selectedMemberIds.value.length || !members.value) return null;
return members.value.find((m) => m._id === selectedMemberIds.value[0]);
});
const invitePreviewText = computed(() => {
if (!invitePreviewMember.value) return ''
if (!invitePreviewMember.value) return "";
return inviteTemplate.value
.replace(/\{name\}/g, invitePreviewMember.value.name)
.replace(/\{loginLink\}/g, 'https://ghostguild.org/api/auth/verify?token=...')
.replace(/\{circle\}/g, invitePreviewMember.value.circle)
})
.replace(
/\{loginLink\}/g,
"https://ghostguild.org/api/auth/verify?token=...",
)
.replace(/\{circle\}/g, invitePreviewMember.value.circle);
});
const formatDate = (dateString) => {
return new Date(dateString).toLocaleDateString()
}
return new Date(dateString).toLocaleDateString();
};
// --- Create Member ---
const createMember = async () => {
creating.value = true
creating.value = true;
try {
await $fetch('/api/admin/members', {
method: 'POST',
await $fetch("/api/admin/members", {
method: "POST",
body: newMember,
})
});
showCreateModal.value = false
showCreateModal.value = false;
Object.assign(newMember, {
name: '',
email: '',
circle: 'community',
contributionTier: '0',
})
name: "",
email: "",
circle: "community",
contributionTier: "0",
});
await refresh()
toast.add({ title: 'Member created', color: 'green' })
await refresh();
toast.add({ title: "Member created", color: "green" });
} catch (err) {
console.error('Failed to create member:', err)
console.error("Failed to create member:", err);
toast.add({
title: 'Failed to create member',
title: "Failed to create member",
description: err.data?.statusMessage || err.message,
color: 'red',
})
color: "red",
});
} finally {
creating.value = false
creating.value = false;
}
}
};
// --- CSV Import ---
const VALID_CIRCLES = ['community', 'founder', 'practitioner']
const VALID_TIERS = ['0', '5', '15', '30', '50']
const VALID_CIRCLES = ["community", "founder", "practitioner"];
const VALID_TIERS = ["0", "5", "15", "30", "50"];
const handleCsvFile = (event) => {
const file = event.target.files[0]
if (!file) return
const file = event.target.files[0];
if (!file) return;
csvParseError.value = ''
csvRows.value = []
csvParseError.value = "";
csvRows.value = [];
const reader = new FileReader()
const reader = new FileReader();
reader.onload = (e) => {
const text = e.target.result
parseCsv(text)
}
reader.readAsText(file)
}
const text = e.target.result;
parseCsv(text);
};
reader.readAsText(file);
};
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) {
csvParseError.value = 'CSV must have a header row and at least one data row.'
return
csvParseError.value =
"CSV must have a header row and at least one data row.";
return;
}
const header = lines[0].split(',').map((h) => h.trim().toLowerCase())
const nameIdx = header.indexOf('name')
const emailIdx = header.indexOf('email')
const circleIdx = header.indexOf('circle')
const tierIdx = header.indexOf('contributiontier')
const header = lines[0].split(",").map((h) => h.trim().toLowerCase());
const nameIdx = header.indexOf("name");
const emailIdx = header.indexOf("email");
const circleIdx = header.indexOf("circle");
const tierIdx = header.indexOf("contributiontier");
if (nameIdx === -1 || emailIdx === -1 || circleIdx === -1 || tierIdx === -1) {
csvParseError.value = `Missing required columns. Found: ${header.join(', ')}. Need: name, email, circle, contributionTier`
return
csvParseError.value = `Missing required columns. Found: ${header.join(", ")}. Need: name, email, circle, contributionTier`;
return;
}
const seenEmails = new Set()
const rows = []
const seenEmails = new Set();
const rows = [];
for (let i = 1; i < lines.length; i++) {
const cols = lines[i].split(',').map((c) => c.trim())
const name = cols[nameIdx] || ''
const email = (cols[emailIdx] || '').toLowerCase()
const circle = (cols[circleIdx] || '').toLowerCase()
const contributionTier = cols[tierIdx] || ''
const cols = lines[i].split(",").map((c) => c.trim());
const name = cols[nameIdx] || "";
const email = (cols[emailIdx] || "").toLowerCase();
const circle = (cols[circleIdx] || "").toLowerCase();
const contributionTier = cols[tierIdx] || "";
let error = null
if (!name) error = 'Missing name'
else if (!email || !email.includes('@')) error = 'Invalid email'
else if (!VALID_CIRCLES.includes(circle)) error = `Invalid circle: ${circle}`
else if (!VALID_TIERS.includes(contributionTier)) error = `Invalid tier: ${contributionTier}`
else if (seenEmails.has(email)) error = 'Duplicate email in CSV'
let error = null;
if (!name) error = "Missing name";
else if (!email || !email.includes("@")) error = "Invalid email";
else if (!VALID_CIRCLES.includes(circle))
error = `Invalid circle: ${circle}`;
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 = () => {
csvRows.value = []
csvParseError.value = ''
importResults.value = null
if (csvFileInput.value) csvFileInput.value.value = ''
}
csvRows.value = [];
csvParseError.value = "";
importResults.value = null;
if (csvFileInput.value) csvFileInput.value.value = "";
};
const closeImportModal = () => {
showImportModal.value = false
showImportModal.value = false;
if (importResults.value) {
resetCsvImport()
refresh()
resetCsvImport();
refresh();
}
}
};
const submitImport = async () => {
importing.value = true
importing.value = true;
try {
const payload = csvValidRows.value.map(({ name, email, circle, contributionTier }) => ({
name,
email,
circle,
contributionTier,
}))
const payload = csvValidRows.value.map(
({ name, email, circle, contributionTier }) => ({
name,
email,
circle,
contributionTier,
}),
);
const result = await $fetch('/api/admin/members/import', {
method: 'POST',
const result = await $fetch("/api/admin/members/import", {
method: "POST",
body: { members: payload },
})
});
importResults.value = result
importResults.value = result;
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,
color: result.failed ? 'orange' : 'green',
})
color: result.failed ? "orange" : "green",
});
} catch (err) {
console.error('Import failed:', err)
console.error("Import failed:", err);
toast.add({
title: 'Import failed',
title: "Import failed",
description: err.data?.statusMessage || err.message,
color: 'red',
})
color: "red",
});
} finally {
importing.value = false
importing.value = false;
}
}
};
// --- Send Invites ---
const openInviteModal = () => {
inviteResults.value = null
inviteTemplate.value = DEFAULT_INVITE_TEMPLATE
showInviteModal.value = true
}
inviteResults.value = null;
inviteTemplate.value = DEFAULT_INVITE_TEMPLATE;
showInviteModal.value = true;
};
const submitInvites = async () => {
sendingInvites.value = true
sendingInvites.value = true;
try {
const result = await $fetch('/api/admin/members/invite', {
method: 'POST',
const result = await $fetch("/api/admin/members/invite", {
method: "POST",
body: {
memberIds: selectedMemberIds.value,
emailTemplate: inviteTemplate.value,
},
})
});
inviteResults.value = result
await refresh()
selectedMemberIds.value = []
inviteResults.value = result;
await refresh();
selectedMemberIds.value = [];
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,
color: result.failed ? 'orange' : 'green',
})
color: result.failed ? "orange" : "green",
});
} catch (err) {
console.error('Failed to send invites:', err)
console.error("Failed to send invites:", err);
toast.add({
title: 'Failed to send invites',
title: "Failed to send invites",
description: err.data?.statusMessage || err.message,
color: 'red',
})
color: "red",
});
} finally {
sendingInvites.value = false
sendingInvites.value = false;
}
}
};
// --- Existing actions ---
const sendSlackInvite = (member) => {
console.log('Send Slack invite to:', member.email)
}
console.log("Send Slack invite to:", member.email);
};
// --- Edit Member ---
const showEditModal = ref(false)
const saving = ref(false)
const editingMemberId = ref(null)
const showEditModal = ref(false);
const saving = ref(false);
const editingMemberId = ref(null);
const editingMember = reactive({
name: '',
email: '',
circle: 'community',
contributionTier: '0',
status: 'pending_payment',
})
name: "",
email: "",
circle: "community",
contributionTier: "0",
status: "pending_payment",
});
const editMember = (member) => {
editingMemberId.value = member._id
editingMemberId.value = member._id;
Object.assign(editingMember, {
name: member.name,
email: member.email,
circle: member.circle,
contributionTier: String(member.contributionTier),
status: member.status || 'pending_payment',
})
showEditModal.value = true
}
status: member.status || "pending_payment",
});
showEditModal.value = true;
};
const submitEditMember = async () => {
saving.value = true
saving.value = true;
try {
await $fetch(`/api/admin/members/${editingMemberId.value}`, {
method: 'PUT',
method: "PUT",
body: {
name: editingMember.name,
email: editingMember.email,
@ -719,20 +808,20 @@ const submitEditMember = async () => {
contributionTier: editingMember.contributionTier,
status: editingMember.status,
},
})
showEditModal.value = false
await refresh()
toast.add({ title: 'Member updated', color: 'green' })
});
showEditModal.value = false;
await refresh();
toast.add({ title: "Member updated", color: "green" });
} catch (err) {
toast.add({
title: 'Failed to update member',
title: "Failed to update member",
description: err.data?.statusMessage || err.message,
color: 'red',
})
color: "red",
});
} finally {
saving.value = false
saving.value = false;
}
}
};
</script>
<style scoped>
@ -756,7 +845,7 @@ const submitEditMember = async () => {
}
.page-header h1 {
font-family: 'Brygada 1918', serif;
font-family: "Brygada 1918", serif;
font-size: 24px;
font-weight: 500;
color: var(--text-bright);
@ -855,7 +944,7 @@ tbody td {
border: none;
color: var(--candle);
cursor: pointer;
font-family: 'Commit Mono', monospace;
font-family: "Commit Mono", monospace;
font-size: 11px;
padding: 2px 6px;
}
@ -915,7 +1004,7 @@ tbody td {
}
.modal-header h2 {
font-family: 'Brygada 1918', serif;
font-family: "Brygada 1918", serif;
font-size: 18px;
font-weight: 500;
color: var(--text-bright);
@ -1025,7 +1114,7 @@ tbody td {
/* ---- PREVIEW BOX ---- */
.preview-box {
font-family: 'Commit Mono', monospace;
font-family: "Commit Mono", monospace;
font-size: 11px;
color: var(--text-dim);
background: var(--surface);
@ -1070,7 +1159,9 @@ tbody td {
}
@keyframes spin {
to { transform: rotate(360deg); }
to {
transform: rotate(360deg);
}
}
/* ---- 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) -->
<div class="hero">
<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>
<!-- FILTER BAR -->
<FilterBar v-model="activeFilter" :filters="filterOptions">
<label class="filter-toggle">
<input type="checkbox" v-model="includePastEvents"> Show past events
<input type="checkbox" v-model="includePastEvents" /> Show past events
</label>
</FilterBar>
@ -19,13 +22,31 @@
v-for="event in filteredEvents"
:key="event._id"
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-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 v-if="event.eventType" class="event-type">{{ event.eventType }}</div>
</div>
<span class="event-capacity">
<template v-if="event.maxAttendees">
@ -35,8 +56,11 @@
</template>
<template v-else>Open</template>
</span>
<CircleBadge v-if="event.circle" :circle="event.circle" />
<span v-else class="badge all">All</span>
<div class="event-badges">
<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 v-if="!filteredEvents?.length" class="empty">No events found</div>
</div>
@ -54,68 +78,111 @@
<h3>{{ series.title }}</h3>
<p class="series-desc">{{ series.description }}</p>
<div class="series-meta">
<span>{{ series.eventCount || series.events?.length || 0 }} sessions</span>
<span v-if="series.startDate">{{ formatDate(series.startDate) }} &ndash; {{ formatDate(series.endDate) }}</span>
<span
>{{
series.eventCount || series.events?.length || 0
}}
sessions</span
>
<span v-if="series.startDate"
>{{ formatDate(series.startDate) }} &ndash;
{{ formatDate(series.endDate) }}</span
>
</div>
</NuxtLink>
</div>
</div>
<!-- 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="section-label">Have an idea?</div>
<DashedBox>
<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>
<NuxtLink to="/events" class="cta">Propose an event &rarr;</NuxtLink>
<p>
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>
</div>
</div>
</template>
<script setup>
const activeFilter = ref('all')
const includePastEvents = ref(false)
const activeFilter = ref("all");
const includePastEvents = ref(false);
const filterOptions = [
{ label: 'All', value: 'all' },
{ label: 'Workshops', value: 'workshop' },
{ label: 'Community', value: 'community' },
{ label: 'Social', value: 'social' },
{ label: 'Showcase', value: 'showcase' },
]
{ label: "All", value: "all" },
{ label: "Workshops", value: "workshop" },
{ label: "Community", value: "community" },
{ label: "Social", value: "social" },
{ label: "Showcase", value: "showcase" },
];
const { data: eventsData } = await useFetch('/api/events')
const { data: seriesData } = await useFetch('/api/series')
const { data: eventsData } = await useFetch("/api/events");
const { data: seriesData } = await useFetch("/api/series");
const now = new Date()
const now = new Date();
const filteredEvents = computed(() => {
if (!eventsData.value) return []
if (!eventsData.value) return [];
return eventsData.value.filter((event) => {
if (!includePastEvents.value && new Date(event.startDate) < now) return false
if (activeFilter.value !== 'all' && event.eventType !== activeFilter.value) return false
return true
})
})
if (!includePastEvents.value && new Date(event.startDate) < now)
return false;
if (activeFilter.value !== "all" && event.eventType !== activeFilter.value)
return false;
return true;
});
});
const activeSeries = computed(() => {
if (!seriesData.value) return []
if (!seriesData.value) return [];
return seriesData.value.filter(
(s) => s.status === 'active' || s.isOngoing || s.isUpcoming,
)
})
(s) => s.status === "active" || s.isOngoing || s.isUpcoming,
);
});
const formatDate = (dateStr) => {
if (!dateStr) return ''
const d = new Date(dateStr)
return d.toLocaleDateString('en-US', { month: 'short', day: 'numeric' })
}
if (!dateStr) return "";
const d = new Date(dateStr);
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) => {
if (!event.maxAttendees) return false
return (event.registeredCount || 0) / event.maxAttendees > 0.8
}
if (!event.maxAttendees) return false;
return (event.registeredCount || 0) / event.maxAttendees > 0.8;
};
</script>
<style scoped>
@ -124,7 +191,7 @@ const isAlmostFull = (event) => {
border-bottom: 1px dashed var(--border);
}
.hero h1 {
font-family: 'Brygada 1918', serif;
font-family: "Brygada 1918", serif;
font-size: 28px;
font-weight: 600;
color: var(--text-bright);
@ -143,26 +210,131 @@ const isAlmostFull = (event) => {
padding: 0 32px;
border-bottom: 1px dashed var(--border);
}
.event-row {
display: grid;
grid-template-columns: 80px 1fr auto auto;
grid-template-columns: 90px 1fr auto auto;
gap: 16px;
align-items: baseline;
padding: 12px 0;
align-items: start;
padding: 14px 0;
border-bottom: 1px dashed var(--border);
transition: padding-left 0.2s;
}
.event-row:first-child { padding-top: 16px; }
.event-row:last-child { border-bottom: none; padding-bottom: 16px; }
.event-row:hover { padding-left: 4px; }
.event-date { color: var(--text-faint); font-size: 12px; white-space: nowrap; }
.event-info { min-width: 0; }
.event-title { color: var(--text); font-size: 13px; }
.event-title a { color: var(--text); text-decoration: none; }
.event-title a:hover { color: var(--candle); }
.event-type { font-size: 10px; color: var(--text-faint); margin-top: 1px; }
.event-capacity { font-size: 11px; color: var(--text-faint); white-space: nowrap; }
.seats-warn { color: var(--ember); }
.event-row:first-child {
padding-top: 18px;
}
.event-row:last-child {
border-bottom: none;
padding-bottom: 18px;
}
.event-row:hover {
padding-left: 4px;
}
.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 {
@ -183,10 +355,14 @@ const isAlmostFull = (event) => {
text-decoration: none;
transition: background 0.15s;
}
.series-box:last-child { border-right: none; }
.series-box:hover { background: var(--surface-hover); }
.series-box:last-child {
border-right: none;
}
.series-box:hover {
background: var(--surface-hover);
}
.series-box h3 {
font-family: 'Brygada 1918', serif;
font-family: "Brygada 1918", serif;
font-size: 16px;
font-weight: 500;
color: var(--text-bright);
@ -208,7 +384,7 @@ const isAlmostFull = (event) => {
/* ---- PROPOSE ---- */
.full-section h3 {
font-family: 'Brygada 1918', serif;
font-family: "Brygada 1918", serif;
font-size: 16px;
font-weight: 500;
color: var(--text-bright);
@ -226,6 +402,15 @@ const isAlmostFull = (event) => {
font-size: 12px;
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 {
display: flex;
@ -248,12 +433,22 @@ const isAlmostFull = (event) => {
@media (max-width: 768px) {
.event-row {
grid-template-columns: 60px 1fr;
grid-template-columns: 70px 1fr;
gap: 8px;
}
.event-capacity { display: 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; }
.event-capacity,
.event-badges {
display: 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>

2
app/pages/index.vue
View file

@ -49,7 +49,7 @@
<div class="block-inset event-item-inner">
<span class="event-date">{{ formatDate(event.startDate) }}</span>
<span class="event-title">
<NuxtLink :to="`/events/${event._id}`">{{
<NuxtLink :to="`/events/${event.slug || event._id}`">{{
event.title
}}</NuxtLink>
</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 member = computed(() => data.value?.member || null);
const pageBreadcrumbTitle = useState("pageBreadcrumbTitle", () => "");
watch(
member,
(val) => {
pageBreadcrumbTitle.value = val?.name || "";
},
{ immediate: true },
);
onUnmounted(() => {
pageBreadcrumbTitle.value = "";
});
// Page head
useHead({
title: computed(() =>