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

Add peer support functionality and UI

Browse source
This commit is contained in:
Jennie Robinson Faber 2025-10-06 11:29:47 +01:00
parent 2b55ca4104
commit 1b8dacf92a
11 changed files with 1159 additions and 35 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -456,6 +456,114 @@
</div>
</template>
<template #peer-support>
<div class="space-y-8 mt-8 max-w-4xl">
<div
class="backdrop-blur-sm bg-purple-500/10 border border-purple-500/30 rounded-lg p-6"
>
<h3 class="text-lg font-semibold text-purple-200 mb-2">
About Peer Support
</h3>
<p class="text-stone-300 text-sm leading-relaxed mb-4">
Peer support allows you to offer guidance to fellow members
or find peers who can help you. Enable peer support to
appear in the directory, or browse available supporters.
</p>
<div class="flex gap-3 flex-wrap">
<UButton to="/member/settings/peer-support">
Configure Peer Support
</UButton>
<UButton to="/peer-support" variant="outline">
Browse Peer Supporters
</UButton>
</div>
</div>
<!-- Current Status -->
<div>
<h2
class="text-2xl font-semibold mb-6 text-stone-100 ethereal-text"
>
Your Peer Support Status
</h2>
<div
class="backdrop-blur-sm bg-stone-800/50 border border-stone-700 rounded-lg p-6"
>
<div class="space-y-4">
<div>
<p class="text-sm text-stone-400">Status</p>
<p class="text-lg font-medium">
<span
v-if="memberData.peerSupport?.enabled"
class="text-green-400"
>
✓ Active - You're offering peer support
</span>
<span v-else class="text-stone-400">
Not currently offering peer support
</span>
</p>
</div>
<div v-if="memberData.peerSupport?.enabled">
<div
v-if="memberData.peerSupport.topics?.length"
class="mb-4"
>
<p class="text-sm text-stone-400 mb-2">
Topics you help with:
</p>
<div class="flex flex-wrap gap-2">
<span
v-for="topic in memberData.peerSupport.topics"
:key="topic"
class="px-3 py-1 bg-purple-500/20 text-purple-300 rounded-full text-sm border border-purple-500/30"
>
{{ topic }}
</span>
</div>
</div>
<div v-if="memberData.peerSupport.availability">
<p class="text-sm text-stone-400 mb-1">
Your availability:
</p>
<p class="text-stone-200">
{{ memberData.peerSupport.availability }}
</p>
</div>
<div
v-if="memberData.peerSupport.personalMessage"
class="mt-4"
>
<p class="text-sm text-stone-400 mb-1">
Your personal message:
</p>
<p class="text-stone-200 italic">
"{{ memberData.peerSupport.personalMessage }}"
</p>
</div>
<div
v-if="memberData.peerSupport.slackUsername"
class="mt-4"
>
<p class="text-sm text-stone-400 mb-1">
Slack username:
</p>
<p class="text-stone-200">
{{ memberData.peerSupport.slackUsername }}
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<template #account>
<div class="space-y-8 mt-8">
<!-- Current Membership -->
@ -713,6 +821,11 @@ const tabItems = [
slot: "updates",
value: "updates",
},
{
label: "Peer Support",
slot: "peer-support",
value: "peer-support",
},
{
label: "Account",
slot: "account",