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

Readying for design

Browse source
This commit is contained in:
Jennie Robinson Faber 2026-03-04 18:24:20 +00:00
parent d73256ca2b
commit fadf473dde
50 changed files with 1478 additions and 1259 deletions
Download patch file Download diff file Expand all files Collapse all files

55
app/pages/members.vue
View file

@ -3,7 +3,6 @@
<PageHeader
title="Member Directory"
subtitle="Connect with members of the Ghost Guild community"
theme="purple"
size="medium"
/>
@ -56,8 +55,8 @@
class="px-3 py-1 rounded-full text-sm transition-all border"
:class="
selectedSkills.includes(skill)
? 'bg-purple-100 dark:bg-purple-500/20 text-purple-700 dark:text-purple-300 border-purple-300 dark:border-purple-500/50'
: 'bg-gray-100 dark:bg-guild-800/50 text-gray-700 dark:text-guild-400 border-gray-300 dark:border-guild-700 hover:border-gray-400 dark:hover:border-guild-600'
? 'bg-candlelight-900/20 text-candlelight-500 border-candlelight-500/50'
: 'bg-guild-800/50 text-guild-400 border-guild-700 hover:border-guild-600'
"
@click="toggleSkill(skill)"
>
@ -94,8 +93,8 @@
class="px-3 py-1 rounded-full text-sm transition-all border"
:class="
selectedTopics.includes(topic)
? 'bg-purple-100 dark:bg-purple-500/20 text-purple-700 dark:text-purple-300 border-purple-300 dark:border-purple-500/50'
: 'bg-gray-100 dark:bg-guild-800/50 text-gray-700 dark:text-guild-400 border-gray-300 dark:border-guild-700 hover:border-gray-400 dark:hover:border-guild-600'
? 'bg-candlelight-900/20 text-candlelight-500 border-candlelight-500/50'
: 'bg-guild-800/50 text-guild-400 border-guild-700 hover:border-guild-600'
"
@click="toggleTopic(topic)"
>
@ -129,7 +128,7 @@
<span class="text-guild-400">Active filters:</span>
<span
v-if="selectedCircle && selectedCircle !== 'all'"
class="px-2 py-1 bg-purple-100 dark:bg-purple-500/20 text-purple-700 dark:text-purple-300 rounded-full border border-purple-300 dark:border-purple-500/30 flex items-center gap-1"
class="px-2 py-1 bg-candlelight-900/20 text-candlelight-500 rounded-full border border-candlelight-500/30 flex items-center gap-1"
>
{{ circleLabels[selectedCircle] }}
<button
@ -142,7 +141,7 @@
</span>
<span
v-if="peerSupportFilter && peerSupportFilter !== 'all'"
class="px-2 py-1 bg-purple-100 dark:bg-purple-500/20 text-purple-700 dark:text-purple-300 rounded-full border border-purple-300 dark:border-purple-500/30 flex items-center gap-1"
class="px-2 py-1 bg-candlelight-900/20 text-candlelight-500 rounded-full border border-candlelight-500/30 flex items-center gap-1"
>
Offering Peer Support
<button
@ -171,7 +170,7 @@
>
<div class="text-center">
<div
class="w-8 h-8 border-4 border-purple-500 border-t-transparent rounded-full animate-spin mx-auto mb-4"
class="w-8 h-8 border-4 border-candlelight-500 border-t-transparent rounded-full animate-spin mx-auto mb-4"
></div>
<p class="text-guild-400">Loading members...</p>
</div>
@ -187,7 +186,7 @@
<div
v-for="member in members"
:key="member._id"
class="relative backdrop-blur-sm bg-guild-900/50 border border-guild-700/50 rounded-lg p-6 hover:border-purple-500/50 transition-all group"
class="relative backdrop-blur-sm bg-guild-900/50 border border-guild-700/50 rounded-lg p-6 hover:border-candlelight-500/50 transition-all group"
>
<!-- Peer Support Sticker Badge -->
<PeerSupportBadge
@ -199,7 +198,7 @@
<div class="flex items-start gap-4 mb-4">
<!-- Avatar -->
<div
class="w-16 h-16 rounded-lg bg-guild-800 border border-guild-700 flex items-center justify-center flex-shrink-0 group-hover:border-purple-500/50 transition-colors"
class="w-16 h-16 rounded-lg bg-guild-800 border border-guild-700 flex items-center justify-center flex-shrink-0 group-hover:border-candlelight-500/50 transition-colors"
>
<img
v-if="member.avatar"
@ -223,7 +222,7 @@
<div class="flex items-center gap-2 flex-wrap">
<span
class="px-2 py-0.5 bg-purple-100 dark:bg-purple-500/20 text-purple-700 dark:text-purple-300 rounded text-xs border border-purple-300 dark:border-purple-500/30"
:class="['px-2 py-0.5 rounded text-xs', circleBadgeClass(member.circle)]"
>
{{ circleLabels[member.circle] }}
</span>
@ -250,10 +249,10 @@
<!-- Peer Support Section -->
<div
v-if="member.peerSupport?.enabled"
class="mb-4 p-4 bg-purple-500/10 border border-purple-500/30 rounded-lg"
class="mb-4 p-4 bg-candlelight-900/20 border border-candlelight-500/30 rounded-lg"
>
<div class="mb-3">
<p class="text-purple-300 font-medium text-sm mb-2">
<p class="text-candlelight-500 font-medium text-sm mb-2">
{{ member.name }} offers 1:1 chats on:
</p>
</div>
@ -270,7 +269,7 @@
<span
v-for="topic in member.peerSupport.topics"
:key="topic"
class="px-2 py-0.5 bg-purple-100 dark:bg-purple-500/20 text-purple-700 dark:text-purple-200 rounded text-xs border border-purple-300 dark:border-purple-500/40"
class="px-2 py-0.5 bg-candlelight-900/20 text-candlelight-400 rounded text-xs border border-candlelight-500/40"
>
{{ topic }}
</span>
@ -295,13 +294,13 @@
<!-- Contact Section -->
<div v-if="member.peerSupport.slackUsername" class="space-y-2">
<p class="text-sm text-purple-300 font-medium">
<p class="text-sm text-candlelight-500 font-medium">
Book a Peer Support call now:
</p>
<a
:href="`slack://user?team=T03A96LV4&id=${member.slackUserId}`"
@click.prevent="openSlackDM(member)"
class="inline-block px-3 py-1.5 bg-purple-100 dark:bg-purple-500/20 text-purple-700 dark:text-purple-300 rounded border border-purple-300 dark:border-purple-500/30 hover:bg-purple-200 dark:hover:bg-purple-500/30 transition-colors text-sm font-medium cursor-pointer"
class="inline-block px-3 py-1.5 bg-candlelight-900/20 text-candlelight-500 rounded border border-candlelight-500/30 hover:bg-candlelight-900/30 transition-colors text-sm font-medium cursor-pointer"
>
Message {{ member.peerSupport.slackUsername }} on Slack
</a>
@ -314,14 +313,14 @@
class="space-y-4"
>
<h4
class="text-sm font-semibold text-purple-300 uppercase tracking-wide"
class="text-ui-label text-candlelight-500"
>
Skills Exchange
</h4>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<!-- Offering -->
<div v-if="member.offering" class="space-y-2">
<h5 class="text-xs font-semibold text-purple-400 uppercase">
<h5 class="text-ui-label text-candlelight-400 text-xs">
Can share
</h5>
<p
@ -339,7 +338,7 @@
<span
v-for="tag in member.offering.tags"
:key="tag"
class="px-2 py-0.5 bg-green-100 dark:bg-green-500/20 text-green-700 dark:text-green-300 rounded text-xs border border-green-300 dark:border-green-500/30"
class="px-2 py-0.5 bg-candlelight-900/20 text-candlelight-500 rounded text-xs border border-candlelight-500/30"
>
{{ tag }}
</span>
@ -348,7 +347,7 @@
<!-- Looking For -->
<div v-if="member.lookingFor" class="space-y-2">
<h5 class="text-xs font-semibold text-purple-400 uppercase">
<h5 class="text-ui-label text-candlelight-400 text-xs">
Looking to learn
</h5>
<p
@ -367,7 +366,7 @@
<span
v-for="tag in member.lookingFor.tags"
:key="tag"
class="px-2 py-0.5 bg-blue-100 dark:bg-blue-500/20 text-blue-700 dark:text-blue-300 rounded text-xs border border-blue-300 dark:border-blue-500/30"
class="px-2 py-0.5 bg-guild-800 text-guild-200 rounded text-xs border border-guild-600"
>
{{ tag }}
</span>
@ -410,9 +409,9 @@
<!-- Not Authenticated Notice -->
<div
v-if="!isAuthenticated && members.length > 0"
class="mt-8 backdrop-blur-sm bg-purple-500/10 border border-purple-500/30 rounded-lg p-6 text-center"
class="mt-8 backdrop-blur-sm bg-candlelight-900/20 border border-candlelight-500/30 rounded-lg p-6 text-center"
>
<p class="text-purple-200 mb-4">
<p class="text-guild-200 mb-4">
🔒 Some member information is visible to members only
</p>
<div class="flex gap-3 justify-center">
@ -458,6 +457,16 @@ const circleLabels = {
practitioner: "Practitioner",
};
// Map circle names to badge classes
const circleBadgeClass = (circle) => {
const classes = {
community: 'circle-badge-community',
founder: 'circle-badge-founder',
practitioner: 'circle-badge-practitioner',
};
return classes[circle] || 'circle-badge-community';
};
// Peer support filter options
const peerSupportOptions = [
{ label: "All Members", value: "all" },