UI/UX tweaks and improvements.
This commit is contained in:
parent
4daec9b624
commit
418d3cc402
32 changed files with 2725 additions and 1201 deletions
514
app/pages/members/[id].vue
Normal file
514
app/pages/members/[id].vue
Normal file
|
|
@ -0,0 +1,514 @@
|
|||
<template>
|
||||
<div class="profile-page">
|
||||
<!-- Loading State -->
|
||||
<div v-if="pending" class="loading-state">
|
||||
<p>Loading profile...</p>
|
||||
</div>
|
||||
|
||||
<!-- Error / 404 State -->
|
||||
<div v-else-if="fetchError || !member" class="error-state">
|
||||
<p class="error-title">Member not found</p>
|
||||
<p class="error-sub">This profile doesn't exist or isn't public.</p>
|
||||
<NuxtLink to="/members" class="btn">← Back to Members</NuxtLink>
|
||||
</div>
|
||||
|
||||
<!-- Profile Content -->
|
||||
<div v-else class="profile-content">
|
||||
<!-- Header Area -->
|
||||
<div class="profile-header">
|
||||
<div class="profile-avatar">
|
||||
<img
|
||||
v-if="member.avatar"
|
||||
:src="`/ghosties/Ghost-${member.avatar.charAt(0).toUpperCase() + member.avatar.slice(1)}.png`"
|
||||
:alt="member.name"
|
||||
class="profile-avatar-img"
|
||||
/>
|
||||
<span v-else class="profile-initials">{{
|
||||
getInitials(member.name)
|
||||
}}</span>
|
||||
</div>
|
||||
<div class="profile-identity">
|
||||
<h1 class="profile-name">
|
||||
{{ member.name }}
|
||||
<span v-if="member.pronouns" class="profile-pronouns">{{
|
||||
member.pronouns
|
||||
}}</span>
|
||||
</h1>
|
||||
<div class="profile-meta">
|
||||
<span v-if="member.circle" class="badge" :class="member.circle">{{
|
||||
circleLabels[member.circle]
|
||||
}}</span>
|
||||
<template v-if="member.studio">
|
||||
<span class="meta-sep">·</span>
|
||||
<span class="profile-studio">{{ member.studio }}</span>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Bio Section -->
|
||||
<div v-if="member.bio" class="profile-section">
|
||||
<div class="section-label">About</div>
|
||||
<div class="profile-bio" v-html="renderMarkdown(member.bio)"></div>
|
||||
</div>
|
||||
|
||||
<!-- Location & Timezone -->
|
||||
<div v-if="member.location || member.timeZone" class="profile-section">
|
||||
<div class="section-label">Location</div>
|
||||
<p class="profile-detail">
|
||||
{{ [member.location, member.timeZone].filter(Boolean).join(" · ") }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Offering Section -->
|
||||
<div
|
||||
v-if="member.offering?.tags?.length || member.offering?.text"
|
||||
class="profile-section"
|
||||
>
|
||||
<div class="section-label">Offering</div>
|
||||
<div v-if="member.offering.tags?.length" class="tag-list">
|
||||
<span
|
||||
v-for="tag in member.offering.tags"
|
||||
:key="tag"
|
||||
class="tag-pill"
|
||||
>{{ tag }}</span
|
||||
>
|
||||
</div>
|
||||
<p v-if="member.offering.text" class="profile-detail offering-text">
|
||||
{{ member.offering.text }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Looking For Section -->
|
||||
<div
|
||||
v-if="member.lookingFor?.tags?.length || member.lookingFor?.text"
|
||||
class="profile-section"
|
||||
>
|
||||
<div class="section-label">Looking for</div>
|
||||
<div v-if="member.lookingFor.tags?.length" class="tag-list">
|
||||
<span
|
||||
v-for="tag in member.lookingFor.tags"
|
||||
:key="tag"
|
||||
class="tag-pill"
|
||||
>{{ tag }}</span
|
||||
>
|
||||
</div>
|
||||
<p v-if="member.lookingFor.text" class="profile-detail looking-text">
|
||||
{{ member.lookingFor.text }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Social Links -->
|
||||
<div
|
||||
v-if="
|
||||
member.socialLinks && Object.values(member.socialLinks).some(Boolean)
|
||||
"
|
||||
class="profile-section"
|
||||
>
|
||||
<div class="section-label">Links</div>
|
||||
<div class="social-links">
|
||||
<a
|
||||
v-if="member.socialLinks.website"
|
||||
:href="member.socialLinks.website"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="social-link"
|
||||
>Website</a
|
||||
>
|
||||
<a
|
||||
v-if="member.socialLinks.itch"
|
||||
:href="member.socialLinks.itch"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="social-link"
|
||||
>itch.io</a
|
||||
>
|
||||
<a
|
||||
v-if="member.socialLinks.mastodon"
|
||||
:href="member.socialLinks.mastodon"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="social-link"
|
||||
>Mastodon</a
|
||||
>
|
||||
<a
|
||||
v-if="member.socialLinks.bluesky"
|
||||
:href="member.socialLinks.bluesky"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="social-link"
|
||||
>Bluesky</a
|
||||
>
|
||||
<a
|
||||
v-if="member.socialLinks.linkedin"
|
||||
:href="member.socialLinks.linkedin"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="social-link"
|
||||
>LinkedIn</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Peer Support Section -->
|
||||
<div v-if="member.peerSupport?.enabled" class="profile-section">
|
||||
<div class="section-label">Peer Support</div>
|
||||
<div v-if="member.peerSupport.skillTopics?.length" class="peer-group">
|
||||
<span class="peer-label">Skills:</span>
|
||||
<div class="tag-list">
|
||||
<span
|
||||
v-for="topic in member.peerSupport.skillTopics"
|
||||
:key="topic"
|
||||
class="tag-pill"
|
||||
>{{ topic }}</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="member.peerSupport.supportTopics?.length" class="peer-group">
|
||||
<span class="peer-label">Topics:</span>
|
||||
<div class="tag-list">
|
||||
<span
|
||||
v-for="topic in member.peerSupport.supportTopics"
|
||||
:key="topic"
|
||||
class="tag-pill"
|
||||
>{{ topic }}</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<p v-if="member.peerSupport.availability" class="profile-detail">
|
||||
{{ member.peerSupport.availability }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Auth Notice -->
|
||||
<div v-if="!isAuthenticated" class="auth-notice">
|
||||
<p>Sign in to see full profile details</p>
|
||||
<button
|
||||
type="button"
|
||||
class="btn"
|
||||
@click="
|
||||
openLoginModal({
|
||||
title: 'Sign in to see more',
|
||||
description: 'Log in to view full member profiles',
|
||||
})
|
||||
"
|
||||
>
|
||||
Log In
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Back Link -->
|
||||
<div class="profile-back">
|
||||
<NuxtLink to="/members" class="back-link">← Back to Members</NuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const route = useRoute();
|
||||
const { isAuthenticated } = useAuth();
|
||||
const { openLoginModal } = useLoginModal();
|
||||
const { render: renderMarkdown } = useMarkdown();
|
||||
|
||||
const id = route.params.id;
|
||||
|
||||
const circleLabels = {
|
||||
community: "Community",
|
||||
founder: "Founder",
|
||||
practitioner: "Practitioner",
|
||||
};
|
||||
|
||||
const getInitials = (name) => {
|
||||
if (!name) return "?";
|
||||
return name
|
||||
.split(" ")
|
||||
.map((w) => w[0])
|
||||
.join("")
|
||||
.toUpperCase()
|
||||
.slice(0, 2);
|
||||
};
|
||||
|
||||
// Fetch member data — no await so the component renders immediately (no Suspense)
|
||||
const { data, pending, error: fetchError } = useFetch(`/api/members/${id}`);
|
||||
const member = computed(() => data.value?.member || null);
|
||||
|
||||
// Page head
|
||||
useHead({
|
||||
title: computed(() =>
|
||||
member.value
|
||||
? `${member.value.name} — Ghost Guild`
|
||||
: "Member Profile — Ghost Guild",
|
||||
),
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.profile-page {
|
||||
max-width: 720px;
|
||||
margin: 0 auto;
|
||||
padding: 0 24px 60px;
|
||||
}
|
||||
|
||||
/* ---- LOADING ---- */
|
||||
.loading-state {
|
||||
padding: 80px 24px;
|
||||
text-align: center;
|
||||
color: var(--text-faint);
|
||||
font-size: 12px;
|
||||
font-family: "Commit Mono", monospace;
|
||||
}
|
||||
|
||||
/* ---- ERROR / 404 ---- */
|
||||
.error-state {
|
||||
padding: 80px 24px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.error-title {
|
||||
font-family: "Brygada 1918", serif;
|
||||
font-size: 20px;
|
||||
color: var(--text-dim);
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.error-sub {
|
||||
font-size: 12px;
|
||||
color: var(--text-faint);
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
/* ---- HEADER ---- */
|
||||
.profile-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
padding: 28px 0 24px;
|
||||
border-bottom: 1px dashed var(--border);
|
||||
}
|
||||
|
||||
.profile-avatar {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
background: var(--surface);
|
||||
border: 1px dashed var(--border);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.profile-avatar-img {
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.profile-initials {
|
||||
font-family: "Commit Mono", monospace;
|
||||
font-size: 14px;
|
||||
color: var(--text-faint);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.profile-identity {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.profile-name {
|
||||
font-family: "Brygada 1918", serif;
|
||||
font-size: 22px;
|
||||
font-weight: 600;
|
||||
color: var(--text-bright);
|
||||
margin: 0;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.profile-pronouns {
|
||||
font-family: "Commit Mono", monospace;
|
||||
font-size: 12px;
|
||||
color: var(--text-faint);
|
||||
font-weight: 400;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.profile-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-top: 4px;
|
||||
font-size: 12px;
|
||||
color: var(--text-dim);
|
||||
}
|
||||
|
||||
.meta-sep {
|
||||
color: var(--border);
|
||||
}
|
||||
|
||||
.profile-studio {
|
||||
font-family: "Commit Mono", monospace;
|
||||
}
|
||||
|
||||
/* ---- SECTIONS ---- */
|
||||
.profile-section {
|
||||
padding: 20px 0;
|
||||
border-bottom: 1px dashed var(--border);
|
||||
}
|
||||
|
||||
.section-label {
|
||||
font-family: "Commit Mono", monospace;
|
||||
font-size: 10px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
color: var(--text-faint);
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.profile-bio {
|
||||
font-size: 13px;
|
||||
color: var(--text-dim);
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.profile-bio :deep(p) {
|
||||
margin: 0 0 8px;
|
||||
}
|
||||
|
||||
.profile-bio :deep(p:last-child) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.profile-bio :deep(a) {
|
||||
color: var(--candle);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.profile-bio :deep(a:hover) {
|
||||
color: var(--ember);
|
||||
}
|
||||
|
||||
.profile-detail {
|
||||
font-size: 13px;
|
||||
color: var(--text-dim);
|
||||
line-height: 1.6;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.offering-text,
|
||||
.looking-text {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
/* ---- TAGS ---- */
|
||||
.tag-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.tag-pill {
|
||||
font-family: "Commit Mono", monospace;
|
||||
font-size: 10px;
|
||||
color: var(--text-dim);
|
||||
padding: 2px 8px;
|
||||
border: 1px dashed var(--border);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* ---- SOCIAL LINKS ---- */
|
||||
.social-links {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.social-link {
|
||||
font-family: "Commit Mono", monospace;
|
||||
font-size: 11px;
|
||||
color: var(--candle);
|
||||
text-decoration: none;
|
||||
padding: 3px 10px;
|
||||
border: 1px dashed var(--border);
|
||||
transition: all 0.15s;
|
||||
}
|
||||
|
||||
.social-link:hover {
|
||||
border-color: var(--candle);
|
||||
color: var(--text-bright);
|
||||
}
|
||||
|
||||
/* ---- PEER SUPPORT ---- */
|
||||
.peer-group {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.peer-group:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.peer-label {
|
||||
font-family: "Commit Mono", monospace;
|
||||
font-size: 11px;
|
||||
color: var(--text-faint);
|
||||
display: block;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
/* ---- AUTH NOTICE ---- */
|
||||
.auth-notice {
|
||||
padding: 20px;
|
||||
margin-top: 24px;
|
||||
border: 1px dashed var(--candle-faint, var(--border));
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.auth-notice p {
|
||||
font-size: 12px;
|
||||
color: var(--text-dim);
|
||||
margin: 0 0 12px;
|
||||
}
|
||||
|
||||
/* ---- BACK LINK ---- */
|
||||
.profile-back {
|
||||
padding: 24px 0;
|
||||
}
|
||||
|
||||
.back-link {
|
||||
font-family: "Commit Mono", monospace;
|
||||
font-size: 12px;
|
||||
color: var(--text-faint);
|
||||
text-decoration: none;
|
||||
transition: color 0.15s;
|
||||
}
|
||||
|
||||
.back-link:hover {
|
||||
color: var(--candle);
|
||||
}
|
||||
|
||||
/* ---- RESPONSIVE ---- */
|
||||
@media (max-width: 768px) {
|
||||
.profile-page {
|
||||
padding: 0 16px 40px;
|
||||
}
|
||||
|
||||
.profile-header {
|
||||
padding: 20px 0 18px;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.profile-name {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.profile-pronouns {
|
||||
display: block;
|
||||
margin-left: 0;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.profile-section {
|
||||
padding: 16px 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
864
app/pages/members/index.vue
Normal file
864
app/pages/members/index.vue
Normal file
|
|
@ -0,0 +1,864 @@
|
|||
<template>
|
||||
<div class="members-page">
|
||||
<!-- Page Header -->
|
||||
<PageHeader
|
||||
title="Members"
|
||||
:subtitle="`${totalCount} member${totalCount === 1 ? '' : 's'} across 3 circles`"
|
||||
/>
|
||||
|
||||
<!-- Filter Bar -->
|
||||
<div class="filter-bar">
|
||||
<input
|
||||
v-model="searchQuery"
|
||||
type="text"
|
||||
class="filter-search"
|
||||
placeholder="Search members..."
|
||||
@input="debouncedSearch"
|
||||
/>
|
||||
<select
|
||||
v-model="selectedCircle"
|
||||
class="filter-select"
|
||||
@change="loadMembers"
|
||||
>
|
||||
<option
|
||||
v-for="opt in circleOptions"
|
||||
:key="opt.value"
|
||||
:value="opt.value"
|
||||
>
|
||||
{{ opt.label }}
|
||||
</option>
|
||||
</select>
|
||||
<label class="filter-toggle">
|
||||
<input
|
||||
type="checkbox"
|
||||
:checked="peerSupportFilter === 'true'"
|
||||
@change="togglePeerSupport"
|
||||
/>
|
||||
Offering support
|
||||
</label>
|
||||
<span class="filter-count"
|
||||
>Showing {{ totalCount }} member{{ totalCount === 1 ? "" : "s" }}</span
|
||||
>
|
||||
</div>
|
||||
|
||||
<!-- Skills Filter -->
|
||||
<div
|
||||
v-if="availableSkills && availableSkills.length > 0"
|
||||
class="skills-bar"
|
||||
>
|
||||
<span class="tag-label">Skills:</span>
|
||||
<button
|
||||
v-for="skill in (availableSkills || []).slice(
|
||||
0,
|
||||
showAllSkills ? undefined : 10,
|
||||
)"
|
||||
:key="skill"
|
||||
type="button"
|
||||
class="skill-tag"
|
||||
:class="{ active: selectedSkills.includes(skill) }"
|
||||
@click="toggleSkill(skill)"
|
||||
>
|
||||
{{ skill }}
|
||||
</button>
|
||||
<button
|
||||
v-if="availableSkills && availableSkills.length > 10"
|
||||
type="button"
|
||||
class="more-btn"
|
||||
@click="showAllSkills = !showAllSkills"
|
||||
>
|
||||
{{
|
||||
showAllSkills ? "Show less" : `+${availableSkills.length - 10} more`
|
||||
}}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Topics Filter -->
|
||||
<div
|
||||
v-if="availableTopics && availableTopics.length > 0"
|
||||
class="skills-bar"
|
||||
>
|
||||
<span class="tag-label">Topics:</span>
|
||||
<button
|
||||
v-for="topic in (availableTopics || []).slice(
|
||||
0,
|
||||
showAllTopics ? undefined : 10,
|
||||
)"
|
||||
:key="topic"
|
||||
type="button"
|
||||
class="skill-tag"
|
||||
:class="{ active: selectedTopics.includes(topic) }"
|
||||
@click="toggleTopic(topic)"
|
||||
>
|
||||
{{ topic }}
|
||||
</button>
|
||||
<button
|
||||
v-if="availableTopics && availableTopics.length > 10"
|
||||
type="button"
|
||||
class="more-btn"
|
||||
@click="showAllTopics = !showAllTopics"
|
||||
>
|
||||
{{
|
||||
showAllTopics ? "Show less" : `+${availableTopics.length - 10} more`
|
||||
}}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Active Filters -->
|
||||
<div v-if="hasActiveFilters" class="active-filters">
|
||||
<span class="af-label">Active filters:</span>
|
||||
<span v-if="selectedCircle && selectedCircle !== 'all'" class="af-tag">
|
||||
{{ circleLabels[selectedCircle] }}
|
||||
<button type="button" @click="clearCircleFilter">×</button>
|
||||
</span>
|
||||
<span
|
||||
v-if="peerSupportFilter && peerSupportFilter !== 'all'"
|
||||
class="af-tag"
|
||||
>
|
||||
Offering Peer Support
|
||||
<button type="button" @click="clearPeerSupportFilter">×</button>
|
||||
</span>
|
||||
<span v-for="skill in selectedSkills" :key="'s-' + skill" class="af-tag">
|
||||
{{ skill }}
|
||||
<button type="button" @click="toggleSkill(skill)">×</button>
|
||||
</span>
|
||||
<span v-for="topic in selectedTopics" :key="'t-' + topic" class="af-tag">
|
||||
{{ topic }}
|
||||
<button type="button" @click="toggleTopic(topic)">×</button>
|
||||
</span>
|
||||
<button
|
||||
v-if="selectedSkills.length > 0 || selectedTopics.length > 0"
|
||||
type="button"
|
||||
class="clear-all-btn"
|
||||
@click="clearAllFilters"
|
||||
>
|
||||
Clear all
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Loading State -->
|
||||
<div v-if="loading && !members.length" class="loading-state">
|
||||
<p>Loading members...</p>
|
||||
</div>
|
||||
|
||||
<!-- Member Grid -->
|
||||
<div v-else-if="members.length > 0" class="member-grid">
|
||||
<div v-for="member in members" :key="member._id" class="member-card">
|
||||
<div class="mc-head">
|
||||
<div class="mc-avatar">
|
||||
<img
|
||||
v-if="member.avatar"
|
||||
:src="`/ghosties/Ghost-${member.avatar.charAt(0).toUpperCase() + member.avatar.slice(1)}.png`"
|
||||
:alt="member.name"
|
||||
class="mc-avatar-img"
|
||||
/>
|
||||
<span v-else>{{ getInitials(member.name) }}</span>
|
||||
</div>
|
||||
<div class="mc-info">
|
||||
<div class="mc-name">
|
||||
<NuxtLink :to="`/members/${member._id}`">{{
|
||||
member.name
|
||||
}}</NuxtLink>
|
||||
<span v-if="member.pronouns" class="mc-pronouns">{{
|
||||
member.pronouns
|
||||
}}</span>
|
||||
</div>
|
||||
<div class="mc-meta">
|
||||
<span class="badge" :class="member.circle">{{
|
||||
circleLabels[member.circle]
|
||||
}}</span>
|
||||
<template v-if="member.studio">
|
||||
<span class="sep">·</span>
|
||||
{{ member.studio }}
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="member.bio"
|
||||
class="mc-bio"
|
||||
v-html="renderMarkdown(member.bio)"
|
||||
></div>
|
||||
|
||||
<div v-if="member.location || member.timeZone" class="mc-location">
|
||||
{{
|
||||
[member.location, member.timeZone].filter(Boolean).join(" \u00b7 ")
|
||||
}}
|
||||
</div>
|
||||
|
||||
<!-- Skills tags -->
|
||||
<div
|
||||
v-if="member.offering?.tags && member.offering.tags.length > 0"
|
||||
class="mc-tags"
|
||||
>
|
||||
<span class="tag-label">Skills:</span>
|
||||
<span
|
||||
v-for="tag in member.offering.tags"
|
||||
:key="tag"
|
||||
class="skill-tag"
|
||||
>{{ tag }}</span
|
||||
>
|
||||
</div>
|
||||
|
||||
<!-- Looking for -->
|
||||
<div
|
||||
v-if="member.lookingFor?.tags && member.lookingFor.tags.length > 0"
|
||||
class="mc-looking"
|
||||
>
|
||||
Looking for: {{ member.lookingFor.tags.join(", ") }}
|
||||
</div>
|
||||
|
||||
<!-- Peer support session link -->
|
||||
<a
|
||||
v-if="
|
||||
member.peerSupport?.enabled && member.peerSupport?.slackUsername
|
||||
"
|
||||
href="#"
|
||||
class="mc-session"
|
||||
@click.prevent="openSlackDM(member)"
|
||||
>
|
||||
Book session
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Empty State -->
|
||||
<div v-else class="empty-state">
|
||||
<p class="empty-title">No members found</p>
|
||||
<p class="empty-sub">Try adjusting your search or filters</p>
|
||||
<button type="button" class="btn" @click="clearAllFilters">
|
||||
Clear Filters
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Load more / count -->
|
||||
<div v-if="members.length > 0" class="load-more">
|
||||
<span
|
||||
>Showing {{ members.length }} of {{ totalCount }} member{{
|
||||
totalCount === 1 ? "" : "s"
|
||||
}}</span
|
||||
>
|
||||
</div>
|
||||
|
||||
<!-- Not Authenticated Notice -->
|
||||
<div v-if="!isAuthenticated && members.length > 0" class="auth-notice">
|
||||
<p>Some member information is visible to members only.</p>
|
||||
<div class="auth-actions">
|
||||
<button
|
||||
type="button"
|
||||
class="btn"
|
||||
@click="
|
||||
openLoginModal({
|
||||
title: 'Sign in to see more',
|
||||
description: 'Log in to view full member profiles',
|
||||
})
|
||||
"
|
||||
>
|
||||
Log In
|
||||
</button>
|
||||
<NuxtLink to="/join" class="btn btn-primary">Join Ghost Guild</NuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const { isAuthenticated } = useAuth();
|
||||
const { openLoginModal } = useLoginModal();
|
||||
const { render: renderMarkdown } = useMarkdown();
|
||||
|
||||
// State
|
||||
const members = ref([]);
|
||||
const totalCount = ref(0);
|
||||
const availableSkills = ref([]);
|
||||
const availableTopics = ref([]);
|
||||
const loading = ref(true);
|
||||
const searchQuery = ref("");
|
||||
const selectedCircle = ref("all");
|
||||
const peerSupportFilter = ref("all");
|
||||
const selectedSkills = ref([]);
|
||||
const selectedTopics = ref([]);
|
||||
const showAllSkills = ref(false);
|
||||
const showAllTopics = ref(false);
|
||||
|
||||
// Circle options
|
||||
const circleOptions = [
|
||||
{ label: "All Circles", value: "all" },
|
||||
{ label: "Community", value: "community" },
|
||||
{ label: "Founder", value: "founder" },
|
||||
{ label: "Practitioner", value: "practitioner" },
|
||||
];
|
||||
|
||||
const circleLabels = {
|
||||
community: "Community",
|
||||
founder: "Founder",
|
||||
practitioner: "Practitioner",
|
||||
};
|
||||
|
||||
// Peer support filter options
|
||||
const peerSupportOptions = [
|
||||
{ label: "All Members", value: "all" },
|
||||
{ label: "Offering Peer Support", value: "true" },
|
||||
];
|
||||
|
||||
// Computed: has active filters
|
||||
const hasActiveFilters = computed(() => {
|
||||
return (
|
||||
(selectedCircle.value && selectedCircle.value !== "all") ||
|
||||
(peerSupportFilter.value && peerSupportFilter.value !== "all") ||
|
||||
selectedSkills.value.length > 0 ||
|
||||
selectedTopics.value.length > 0
|
||||
);
|
||||
});
|
||||
|
||||
// Get initials from name
|
||||
const getInitials = (name) => {
|
||||
if (!name) return "?";
|
||||
return name
|
||||
.split(" ")
|
||||
.map((w) => w[0])
|
||||
.join("")
|
||||
.toUpperCase()
|
||||
.slice(0, 2);
|
||||
};
|
||||
|
||||
// Load members
|
||||
const loadMembers = async () => {
|
||||
loading.value = true;
|
||||
|
||||
try {
|
||||
const params = {};
|
||||
if (searchQuery.value) params.search = searchQuery.value;
|
||||
if (selectedCircle.value && selectedCircle.value !== "all")
|
||||
params.circle = selectedCircle.value;
|
||||
if (peerSupportFilter.value && peerSupportFilter.value !== "all")
|
||||
params.peerSupport = peerSupportFilter.value;
|
||||
if (selectedSkills.value.length > 0)
|
||||
params.skills = selectedSkills.value.join(",");
|
||||
if (selectedTopics.value.length > 0)
|
||||
params.topics = selectedTopics.value.join(",");
|
||||
|
||||
const data = await $fetch("/api/members/directory", { params });
|
||||
|
||||
members.value = data.members || [];
|
||||
totalCount.value = data.totalCount || 0;
|
||||
availableSkills.value = data.filters?.availableSkills || [];
|
||||
availableTopics.value = data.filters?.availableTopics || [];
|
||||
} catch (error) {
|
||||
console.error("Failed to load members:", error);
|
||||
members.value = [];
|
||||
totalCount.value = 0;
|
||||
availableSkills.value = [];
|
||||
availableTopics.value = [];
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
// Toggle peer support checkbox
|
||||
const togglePeerSupport = (e) => {
|
||||
peerSupportFilter.value = e.target.checked ? "true" : "all";
|
||||
loadMembers();
|
||||
};
|
||||
|
||||
// Debounced search
|
||||
let searchTimeout;
|
||||
const debouncedSearch = () => {
|
||||
clearTimeout(searchTimeout);
|
||||
searchTimeout = setTimeout(() => {
|
||||
loadMembers();
|
||||
}, 300);
|
||||
};
|
||||
|
||||
// Toggle skill filter
|
||||
const toggleSkill = (skill) => {
|
||||
const index = selectedSkills.value.indexOf(skill);
|
||||
if (index > -1) {
|
||||
selectedSkills.value.splice(index, 1);
|
||||
} else {
|
||||
selectedSkills.value.push(skill);
|
||||
}
|
||||
loadMembers();
|
||||
};
|
||||
|
||||
// Toggle topic filter
|
||||
const toggleTopic = (topic) => {
|
||||
const index = selectedTopics.value.indexOf(topic);
|
||||
if (index > -1) {
|
||||
selectedTopics.value.splice(index, 1);
|
||||
} else {
|
||||
selectedTopics.value.push(topic);
|
||||
}
|
||||
loadMembers();
|
||||
};
|
||||
|
||||
// Clear filters
|
||||
const clearCircleFilter = () => {
|
||||
selectedCircle.value = "all";
|
||||
loadMembers();
|
||||
};
|
||||
|
||||
const clearPeerSupportFilter = () => {
|
||||
peerSupportFilter.value = "all";
|
||||
loadMembers();
|
||||
};
|
||||
|
||||
const clearAllFilters = () => {
|
||||
searchQuery.value = "";
|
||||
selectedCircle.value = "all";
|
||||
peerSupportFilter.value = "all";
|
||||
selectedSkills.value = [];
|
||||
selectedTopics.value = [];
|
||||
loadMembers();
|
||||
};
|
||||
|
||||
// Slack DM functionality
|
||||
const openSlackDM = async (member) => {
|
||||
const username = member.peerSupport?.slackUsername || member.name;
|
||||
|
||||
try {
|
||||
await navigator.clipboard.writeText(username);
|
||||
} catch (err) {
|
||||
console.log("Could not copy to clipboard:", err);
|
||||
}
|
||||
|
||||
alert(
|
||||
`Opening Slack...\n\nSearch for: ${username}\n\n(Username copied to clipboard)`,
|
||||
);
|
||||
window.open("https://gammaspace.slack.com", "_blank");
|
||||
};
|
||||
|
||||
// Load on mount and handle query params
|
||||
onMounted(() => {
|
||||
const route = useRoute();
|
||||
if (route.query.peerSupport === "true") {
|
||||
peerSupportFilter.value = "true";
|
||||
}
|
||||
|
||||
loadMembers();
|
||||
});
|
||||
|
||||
useHead({
|
||||
title: "Member Directory - Ghost Guild",
|
||||
meta: [
|
||||
{
|
||||
name: "description",
|
||||
content:
|
||||
"Connect with members of the Ghost Guild community - game developers, founders, and practitioners building solidarity economy studios.",
|
||||
},
|
||||
],
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* ---- FILTER BAR ---- */
|
||||
.filter-bar {
|
||||
padding: 16px 24px;
|
||||
border-bottom: 1px dashed var(--border);
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.filter-search {
|
||||
font-family: "Commit Mono", monospace;
|
||||
font-size: 12px;
|
||||
padding: 5px 12px;
|
||||
border: 1px dashed var(--border);
|
||||
background: transparent;
|
||||
color: var(--text);
|
||||
outline: none;
|
||||
min-width: 180px;
|
||||
transition: border-color 0.15s;
|
||||
}
|
||||
.filter-search::placeholder {
|
||||
color: var(--text-faint);
|
||||
}
|
||||
.filter-search:focus {
|
||||
border-color: var(--candle-faint);
|
||||
}
|
||||
|
||||
.filter-select {
|
||||
font-family: "Commit Mono", monospace;
|
||||
font-size: 11px;
|
||||
padding: 5px 10px;
|
||||
border: 1px dashed var(--border);
|
||||
background: transparent;
|
||||
color: var(--text-dim);
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%238a7e6a' stroke-width='1.2'/%3E%3C/svg%3E");
|
||||
background-repeat: no-repeat;
|
||||
background-position: right 8px center;
|
||||
padding-right: 26px;
|
||||
}
|
||||
.filter-select:focus {
|
||||
border-color: var(--candle-faint);
|
||||
}
|
||||
|
||||
.filter-toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 11px;
|
||||
color: var(--text-dim);
|
||||
cursor: pointer;
|
||||
}
|
||||
.filter-toggle input {
|
||||
accent-color: var(--candle-dim);
|
||||
}
|
||||
|
||||
.filter-count {
|
||||
margin-left: auto;
|
||||
font-size: 11px;
|
||||
color: var(--text-faint);
|
||||
}
|
||||
|
||||
/* ---- SKILLS / TOPICS BAR ---- */
|
||||
.skills-bar {
|
||||
padding: 12px 24px;
|
||||
border-bottom: 1px dashed var(--border);
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.skills-bar .tag-label {
|
||||
font-size: 10px;
|
||||
color: var(--text-faint);
|
||||
margin-right: 4px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
}
|
||||
|
||||
.skills-bar .skill-tag {
|
||||
font-family: "Commit Mono", monospace;
|
||||
font-size: 10px;
|
||||
color: var(--text-dim);
|
||||
padding: 2px 8px;
|
||||
border: 1px dashed var(--border);
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
.skills-bar .skill-tag:hover {
|
||||
border-color: var(--candle-faint);
|
||||
color: var(--text);
|
||||
}
|
||||
.skills-bar .skill-tag.active {
|
||||
border-color: var(--candle-dim);
|
||||
border-style: solid;
|
||||
color: var(--candle);
|
||||
background: rgba(154, 116, 32, 0.08);
|
||||
}
|
||||
|
||||
.more-btn {
|
||||
font-family: "Commit Mono", monospace;
|
||||
font-size: 10px;
|
||||
color: var(--candle);
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
padding: 2px 4px;
|
||||
}
|
||||
.more-btn:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* ---- ACTIVE FILTERS ---- */
|
||||
.active-filters {
|
||||
padding: 10px 24px;
|
||||
border-bottom: 1px dashed var(--border);
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.af-label {
|
||||
color: var(--text-faint);
|
||||
}
|
||||
|
||||
.af-tag {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 2px 8px;
|
||||
border: 1px dashed var(--candle-faint);
|
||||
color: var(--candle);
|
||||
font-size: 10px;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
.af-tag button {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--candle);
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
line-height: 1;
|
||||
padding: 0 0 0 2px;
|
||||
}
|
||||
.af-tag button:hover {
|
||||
color: var(--ember);
|
||||
}
|
||||
|
||||
.clear-all-btn {
|
||||
font-family: "Commit Mono", monospace;
|
||||
font-size: 10px;
|
||||
color: var(--candle);
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
}
|
||||
.clear-all-btn:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* ---- LOADING ---- */
|
||||
.loading-state {
|
||||
padding: 60px 24px;
|
||||
text-align: center;
|
||||
color: var(--text-faint);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
/* ---- MEMBER GRID ---- */
|
||||
.member-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.member-card {
|
||||
padding: 16px 20px;
|
||||
border-bottom: 1px dashed var(--border);
|
||||
border-right: 1px dashed var(--border);
|
||||
transition: background 0.15s;
|
||||
}
|
||||
.member-card:hover {
|
||||
background: var(--surface);
|
||||
}
|
||||
.member-card:nth-child(2n) {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.mc-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.mc-avatar {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
background: var(--surface);
|
||||
border: 1px dashed var(--border);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 11px;
|
||||
color: var(--text-faint);
|
||||
flex-shrink: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.mc-avatar-img {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.mc-info {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.mc-name {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: var(--text-bright);
|
||||
}
|
||||
.mc-name a {
|
||||
color: var(--text-bright);
|
||||
text-decoration: none;
|
||||
}
|
||||
.mc-name a:hover {
|
||||
color: var(--candle);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.mc-pronouns {
|
||||
font-size: 11px;
|
||||
color: var(--text-faint);
|
||||
margin-left: 4px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.mc-meta {
|
||||
font-size: 11px;
|
||||
color: var(--text-dim);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 1px;
|
||||
}
|
||||
.mc-meta .sep {
|
||||
color: var(--border);
|
||||
}
|
||||
|
||||
.mc-bio {
|
||||
font-size: 12px;
|
||||
color: var(--text-dim);
|
||||
line-height: 1.6;
|
||||
margin: 8px 0;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
.mc-bio :deep(p) {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.mc-location {
|
||||
font-size: 11px;
|
||||
color: var(--text-dim);
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.mc-tags {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
margin-top: 6px;
|
||||
}
|
||||
.mc-tags .tag-label {
|
||||
font-size: 10px;
|
||||
color: var(--text-faint);
|
||||
margin-right: 2px;
|
||||
}
|
||||
|
||||
.mc-tags .skill-tag {
|
||||
font-size: 10px;
|
||||
color: var(--text-dim);
|
||||
padding: 1px 6px;
|
||||
border: 1px dashed var(--border);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.mc-looking {
|
||||
font-size: 11px;
|
||||
color: var(--text-faint);
|
||||
font-style: italic;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.mc-session {
|
||||
display: inline-block;
|
||||
margin-top: 6px;
|
||||
font-family: "Commit Mono", monospace;
|
||||
font-size: 10px;
|
||||
letter-spacing: 0.04em;
|
||||
text-transform: uppercase;
|
||||
padding: 3px 10px;
|
||||
border: 1px dashed var(--candle-faint);
|
||||
color: var(--candle);
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
background: transparent;
|
||||
text-decoration: none;
|
||||
}
|
||||
.mc-session:hover {
|
||||
border-color: var(--candle);
|
||||
background: rgba(122, 90, 16, 0.06);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* ---- LOAD MORE ---- */
|
||||
.load-more {
|
||||
padding: 20px 24px;
|
||||
border-bottom: 1px dashed var(--border);
|
||||
font-size: 12px;
|
||||
color: var(--text-faint);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* ---- EMPTY STATE ---- */
|
||||
.empty-state {
|
||||
padding: 60px 24px;
|
||||
text-align: center;
|
||||
}
|
||||
.empty-title {
|
||||
font-family: "Brygada 1918", serif;
|
||||
font-size: 18px;
|
||||
color: var(--text-dim);
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.empty-sub {
|
||||
font-size: 12px;
|
||||
color: var(--text-faint);
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
/* ---- AUTH NOTICE ---- */
|
||||
.auth-notice {
|
||||
padding: 24px;
|
||||
margin: 20px 24px;
|
||||
border: 1px dashed var(--candle-faint);
|
||||
text-align: center;
|
||||
}
|
||||
.auth-notice p {
|
||||
font-size: 12px;
|
||||
color: var(--text-dim);
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.auth-actions {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* ---- RESPONSIVE ---- */
|
||||
@media (max-width: 1024px) {
|
||||
.member-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.member-card {
|
||||
border-right: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.filter-bar {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
padding: 14px 20px;
|
||||
}
|
||||
.filter-count {
|
||||
margin-left: 0;
|
||||
}
|
||||
.skills-bar {
|
||||
padding: 10px 20px;
|
||||
}
|
||||
.active-filters {
|
||||
padding: 8px 20px;
|
||||
}
|
||||
.member-card {
|
||||
padding: 14px 16px;
|
||||
}
|
||||
.auth-notice {
|
||||
margin: 16px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Add table
Add a link
Reference in a new issue