refactor(community): rename Community Connections → Community Ecology
Simplify the feature to pure discovery (filter by topic, see matching members, copy Slack handle). Drop the connection request/confirm flow entirely — Connection model, 7 API endpoints, useConnections composable, and TagInput component deleted. - Rename communityConnections → communityEcology in schema, API, pages - Delete legacy fields: offering, lookingFor, peerSupport - New /ecology page, /api/ecology/suggestions, community-ecology.patch - Nav: "Connections" → "Ecology", remove pending-count badge - Fix auth/member.get.js missing craftTags + communityEcology - Add community_ecology_updated activity log type - Expose slackHandle conditionally when offerPeerSupport is true - Add migration script at scripts/migrate-to-ecology.js (run before deploy)
This commit is contained in:
parent
9577929e0d
commit
0b3896d984
33 changed files with 1002 additions and 2635 deletions
|
|
@ -34,13 +34,8 @@
|
|||
:to="item.path"
|
||||
:class="{ active: isActive(item.path) }"
|
||||
@click="handleNavigate"
|
||||
>{{ item.label }}</NuxtLink
|
||||
>
|
||||
{{ item.label }}
|
||||
<span
|
||||
v-if="item.path === '/connections' && pendingCount > 0"
|
||||
class="nav-badge"
|
||||
>{{ pendingCount }}</span>
|
||||
</NuxtLink>
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
|
|
@ -134,21 +129,7 @@ const emit = defineEmits(["navigate"]);
|
|||
|
||||
const route = useRoute();
|
||||
const { isAuthenticated, logout } = useAuth();
|
||||
const { getPendingCount } = useConnections();
|
||||
const isDev = import.meta.dev;
|
||||
const pendingCount = ref(0);
|
||||
|
||||
// Fetch pending connection count for authenticated users
|
||||
onMounted(async () => {
|
||||
if (isAuthenticated.value) {
|
||||
try {
|
||||
const data = await getPendingCount();
|
||||
pendingCount.value = data.count || 0;
|
||||
} catch {
|
||||
// Silently ignore — badge is non-critical
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
const handleNavigate = () => {
|
||||
if (props.isMobile) {
|
||||
|
|
@ -192,7 +173,7 @@ const youItems = [
|
|||
const exploreItems = [
|
||||
{ label: "Events", path: "/events" },
|
||||
{ label: "Members", path: "/members" },
|
||||
{ label: "Connections", path: "/connections" },
|
||||
{ label: "Ecology", path: "/ecology" },
|
||||
{ label: "Wiki", path: "https://wiki.ghostguild.org" },
|
||||
{ label: "About", path: "/about" },
|
||||
];
|
||||
|
|
@ -298,19 +279,4 @@ const exploreItems = [
|
|||
.sidebar-meta a {
|
||||
color: var(--candle-dim);
|
||||
}
|
||||
|
||||
.nav-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 16px;
|
||||
height: 16px;
|
||||
padding: 0 4px;
|
||||
margin-left: 6px;
|
||||
font-size: 10px;
|
||||
line-height: 1;
|
||||
color: var(--bg);
|
||||
background: var(--candle);
|
||||
border-radius: 0;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,104 +0,0 @@
|
|||
<template>
|
||||
<div class="tags" @click="focusInput">
|
||||
<span v-for="(tag, i) in modelValue" :key="tag" class="tag">
|
||||
{{ tag }}
|
||||
<span class="rm" @click.stop="removeTag(i)">×</span>
|
||||
</span>
|
||||
<input
|
||||
ref="input"
|
||||
v-model="newTag"
|
||||
@keydown.enter.prevent="addTag"
|
||||
@keydown.backspace="handleBackspace"
|
||||
:placeholder="modelValue?.length ? '' : placeholder"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const props = defineProps({
|
||||
modelValue: { type: Array, default: () => [] },
|
||||
placeholder: { type: String, default: "Add tag..." },
|
||||
});
|
||||
|
||||
const emit = defineEmits(["update:modelValue"]);
|
||||
|
||||
const input = ref(null);
|
||||
const newTag = ref("");
|
||||
|
||||
const focusInput = () => {
|
||||
input.value?.focus();
|
||||
};
|
||||
|
||||
const addTag = () => {
|
||||
const tag = newTag.value.trim();
|
||||
if (tag && !props.modelValue.includes(tag)) {
|
||||
emit("update:modelValue", [...props.modelValue, tag]);
|
||||
}
|
||||
newTag.value = "";
|
||||
};
|
||||
|
||||
const removeTag = (index) => {
|
||||
const tags = [...props.modelValue];
|
||||
tags.splice(index, 1);
|
||||
emit("update:modelValue", tags);
|
||||
};
|
||||
|
||||
const handleBackspace = () => {
|
||||
if (!newTag.value && props.modelValue.length) {
|
||||
removeTag(props.modelValue.length - 1);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.tags {
|
||||
border: 1px dashed var(--border);
|
||||
padding: 3px 5px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 3px;
|
||||
background: var(--input-bg);
|
||||
min-height: 30px;
|
||||
align-items: center;
|
||||
cursor: text;
|
||||
}
|
||||
|
||||
.tags:focus-within {
|
||||
border-color: var(--candle);
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
.tag {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 3px;
|
||||
padding: 1px 6px;
|
||||
border: 1px dashed var(--border-d);
|
||||
font-size: 11px;
|
||||
color: var(--text);
|
||||
background: var(--surface);
|
||||
}
|
||||
|
||||
.rm {
|
||||
color: var(--text-faint);
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.rm:hover {
|
||||
color: var(--ember);
|
||||
}
|
||||
|
||||
.tags input {
|
||||
border: none;
|
||||
background: transparent;
|
||||
padding: 1px 4px;
|
||||
font-size: 11px;
|
||||
font-family: "Commit Mono", monospace;
|
||||
color: var(--text);
|
||||
flex: 1;
|
||||
min-width: 80px;
|
||||
outline: none;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,32 +0,0 @@
|
|||
export const useConnections = () => {
|
||||
const getSuggestions = (params = {}) =>
|
||||
$fetch('/api/connections/suggestions', { params })
|
||||
|
||||
const getMyConnections = () =>
|
||||
$fetch('/api/connections')
|
||||
|
||||
const requestConnection = (recipientId) =>
|
||||
$fetch('/api/connections', { method: 'POST', body: { recipientId } })
|
||||
|
||||
const confirmConnection = (id) =>
|
||||
$fetch(`/api/connections/${id}/confirm`, { method: 'POST' })
|
||||
|
||||
const hideConnection = (id) =>
|
||||
$fetch(`/api/connections/${id}/hide`, { method: 'POST' })
|
||||
|
||||
const withdrawConnection = (id) =>
|
||||
$fetch(`/api/connections/${id}/withdraw`, { method: 'POST' })
|
||||
|
||||
const getPendingCount = () =>
|
||||
$fetch('/api/connections/pending-count')
|
||||
|
||||
return {
|
||||
getSuggestions,
|
||||
getMyConnections,
|
||||
requestConnection,
|
||||
confirmConnection,
|
||||
hideConnection,
|
||||
withdrawConnection,
|
||||
getPendingCount,
|
||||
}
|
||||
}
|
||||
6
app/composables/useEcology.js
Normal file
6
app/composables/useEcology.js
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
export const useEcology = () => {
|
||||
const getSuggestions = (params = {}) =>
|
||||
$fetch('/api/ecology/suggestions', { params })
|
||||
|
||||
return { getSuggestions }
|
||||
}
|
||||
|
|
@ -143,12 +143,6 @@
|
|||
{{ member.notifications?.updates !== false ? "On" : "Off" }}
|
||||
</dd>
|
||||
</div>
|
||||
<div class="meta-row">
|
||||
<dt>Peer support requests</dt>
|
||||
<dd :class="member.notifications?.peerRequests !== false ? 'status-ok' : 'status-dim'">
|
||||
{{ member.notifications?.peerRequests !== false ? "On" : "Off" }}
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</section>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,821 +1,4 @@
|
|||
<template>
|
||||
<PageShell
|
||||
title="Connections"
|
||||
subtitle="Find members who share your cooperative interests"
|
||||
>
|
||||
<ClientOnly>
|
||||
<!-- Loading State -->
|
||||
<div v-if="loading" class="loading-state">
|
||||
<p>Loading connections...</p>
|
||||
</div>
|
||||
|
||||
<template v-else>
|
||||
<!-- Filter Bar -->
|
||||
<div v-if="tagOptions.length > 0" class="filter-bar">
|
||||
<select
|
||||
v-model="filterTag"
|
||||
class="filter-select"
|
||||
@change="loadSuggestions"
|
||||
>
|
||||
<option value="">All topics</option>
|
||||
<option v-for="tag in tagOptions" :key="tag.slug" :value="tag.slug">
|
||||
{{ tag.label }}
|
||||
</option>
|
||||
</select>
|
||||
<select
|
||||
v-model="filterState"
|
||||
class="filter-select"
|
||||
@change="loadSuggestions"
|
||||
>
|
||||
<option value="">All states</option>
|
||||
<option value="help">Can help</option>
|
||||
<option value="interested">Interested</option>
|
||||
<option value="seeking">Need help</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Suggested Connections -->
|
||||
<div class="connections-section">
|
||||
<div class="section-label">Suggested Connections</div>
|
||||
|
||||
<div v-if="suggestions.length > 0" class="connection-grid">
|
||||
<div
|
||||
v-for="suggestion in suggestions"
|
||||
:key="suggestion.member._id"
|
||||
class="connection-card"
|
||||
>
|
||||
<div class="cc-head">
|
||||
<div class="cc-avatar">
|
||||
<img
|
||||
v-if="suggestion.member.avatar"
|
||||
:src="`/ghosties/Ghost-${capitalize(suggestion.member.avatar)}.png`"
|
||||
:alt="suggestion.member.name"
|
||||
class="cc-avatar-img"
|
||||
/>
|
||||
<span v-else>{{ getInitials(suggestion.member.name) }}</span>
|
||||
</div>
|
||||
<div class="cc-info">
|
||||
<div class="cc-name">
|
||||
<NuxtLink :to="`/members/${suggestion.member._id}`">
|
||||
{{ suggestion.member.name }}
|
||||
</NuxtLink>
|
||||
</div>
|
||||
<div class="cc-meta">
|
||||
<CircleBadge :circle="suggestion.member.circle || 'community'" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Craft tags -->
|
||||
<div
|
||||
v-if="suggestion.member.craftTags?.length"
|
||||
class="cc-craft-tags"
|
||||
>
|
||||
<span
|
||||
v-for="tag in suggestion.member.craftTags.slice(0, 5)"
|
||||
:key="tag"
|
||||
class="craft-pill"
|
||||
>{{ craftTagLabel(tag) }}</span>
|
||||
</div>
|
||||
|
||||
<!-- Matching topics with state labels -->
|
||||
<div class="cc-matches">
|
||||
<div
|
||||
v-for="match in suggestion.matchingTags"
|
||||
:key="match.tagSlug"
|
||||
class="match-row"
|
||||
>
|
||||
<span class="match-tag">{{ cooperativeTagLabel(match.tagSlug) }}</span>
|
||||
<span class="match-states">
|
||||
<span class="match-you">You: {{ stateLabel(match.yourState) }}</span>
|
||||
<span class="match-sep">·</span>
|
||||
<span class="match-them">They: {{ stateLabel(match.theirState) }}</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Actions -->
|
||||
<div class="cc-actions">
|
||||
<button
|
||||
class="btn btn-primary btn-sm"
|
||||
:disabled="actionLoading === suggestion.member._id"
|
||||
@click="handleConnect(suggestion.member._id)"
|
||||
>
|
||||
Mark as connected
|
||||
</button>
|
||||
<button
|
||||
class="text-action"
|
||||
:disabled="actionLoading === suggestion.member._id"
|
||||
@click="handleHide(suggestion.member._id)"
|
||||
>
|
||||
Hide
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else class="empty-state">
|
||||
<p class="empty-title">No suggestions right now</p>
|
||||
<p class="empty-sub">
|
||||
Add cooperative topics to your
|
||||
<NuxtLink to="/member/profile">profile</NuxtLink>
|
||||
to find members with shared interests
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Your Connections -->
|
||||
<div class="connections-section">
|
||||
<div class="section-label">Your Connections</div>
|
||||
|
||||
<!-- Pending Incoming -->
|
||||
<template v-if="pendingIncoming.length > 0">
|
||||
<div class="subsection-label">Pending Incoming</div>
|
||||
<div class="connection-grid">
|
||||
<div
|
||||
v-for="conn in pendingIncoming"
|
||||
:key="conn._id"
|
||||
class="connection-card"
|
||||
>
|
||||
<div class="cc-head">
|
||||
<div class="cc-avatar">
|
||||
<img
|
||||
v-if="getOtherMember(conn).avatar"
|
||||
:src="`/ghosties/Ghost-${capitalize(getOtherMember(conn).avatar)}.png`"
|
||||
:alt="getOtherMember(conn).name"
|
||||
class="cc-avatar-img"
|
||||
/>
|
||||
<span v-else>{{ getInitials(getOtherMember(conn).name) }}</span>
|
||||
</div>
|
||||
<div class="cc-info">
|
||||
<div class="cc-name">
|
||||
<NuxtLink :to="`/members/${getOtherMember(conn)._id}`">
|
||||
{{ getOtherMember(conn).name }}
|
||||
</NuxtLink>
|
||||
</div>
|
||||
<div class="cc-meta">
|
||||
<CircleBadge :circle="getOtherMember(conn).circle || 'community'" />
|
||||
<span class="pending-label">Wants to connect</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="conn.matchingTags?.length" class="cc-tags-inline">
|
||||
<span
|
||||
v-for="mt in conn.matchingTags"
|
||||
:key="mt.tagSlug"
|
||||
class="craft-pill"
|
||||
>{{ cooperativeTagLabel(mt.tagSlug) }}</span>
|
||||
</div>
|
||||
|
||||
<div class="cc-actions">
|
||||
<button
|
||||
class="btn btn-primary btn-sm"
|
||||
:disabled="actionLoading === conn._id"
|
||||
@click="handleConfirm(conn._id)"
|
||||
>
|
||||
Confirm
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- Pending Outgoing -->
|
||||
<template v-if="pendingOutgoing.length > 0">
|
||||
<div class="subsection-label">Pending Outgoing</div>
|
||||
<div class="connection-grid">
|
||||
<div
|
||||
v-for="conn in pendingOutgoing"
|
||||
:key="conn._id"
|
||||
class="connection-card"
|
||||
>
|
||||
<div class="cc-head">
|
||||
<div class="cc-avatar">
|
||||
<img
|
||||
v-if="getOtherMember(conn).avatar"
|
||||
:src="`/ghosties/Ghost-${capitalize(getOtherMember(conn).avatar)}.png`"
|
||||
:alt="getOtherMember(conn).name"
|
||||
class="cc-avatar-img"
|
||||
/>
|
||||
<span v-else>{{ getInitials(getOtherMember(conn).name) }}</span>
|
||||
</div>
|
||||
<div class="cc-info">
|
||||
<div class="cc-name">
|
||||
<NuxtLink :to="`/members/${getOtherMember(conn)._id}`">
|
||||
{{ getOtherMember(conn).name }}
|
||||
</NuxtLink>
|
||||
</div>
|
||||
<div class="cc-meta">
|
||||
<CircleBadge :circle="getOtherMember(conn).circle || 'community'" />
|
||||
<span class="pending-label">Pending</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="conn.matchingTags?.length" class="cc-tags-inline">
|
||||
<span
|
||||
v-for="mt in conn.matchingTags"
|
||||
:key="mt.tagSlug"
|
||||
class="craft-pill"
|
||||
>{{ cooperativeTagLabel(mt.tagSlug) }}</span>
|
||||
</div>
|
||||
|
||||
<div class="cc-actions">
|
||||
<button
|
||||
class="text-action"
|
||||
:disabled="actionLoading === conn._id"
|
||||
@click="handleWithdraw(conn._id)"
|
||||
>
|
||||
Withdraw
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- Confirmed -->
|
||||
<template v-if="confirmed.length > 0">
|
||||
<div class="subsection-label">Connected</div>
|
||||
<div class="connection-grid">
|
||||
<div
|
||||
v-for="conn in confirmed"
|
||||
:key="conn._id"
|
||||
class="connection-card"
|
||||
>
|
||||
<div class="cc-head">
|
||||
<div class="cc-avatar">
|
||||
<img
|
||||
v-if="getOtherMember(conn).avatar"
|
||||
:src="`/ghosties/Ghost-${capitalize(getOtherMember(conn).avatar)}.png`"
|
||||
:alt="getOtherMember(conn).name"
|
||||
class="cc-avatar-img"
|
||||
/>
|
||||
<span v-else>{{ getInitials(getOtherMember(conn).name) }}</span>
|
||||
</div>
|
||||
<div class="cc-info">
|
||||
<div class="cc-name">
|
||||
<NuxtLink :to="`/members/${getOtherMember(conn)._id}`">
|
||||
{{ getOtherMember(conn).name }}
|
||||
</NuxtLink>
|
||||
</div>
|
||||
<div class="cc-meta">
|
||||
<CircleBadge :circle="getOtherMember(conn).circle || 'community'" />
|
||||
<span
|
||||
v-if="getSlackHandle(conn)"
|
||||
class="cc-slack"
|
||||
>@{{ getSlackHandle(conn) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="conn.matchingTags?.length" class="cc-tags-inline">
|
||||
<span
|
||||
v-for="mt in conn.matchingTags"
|
||||
:key="mt.tagSlug"
|
||||
class="craft-pill"
|
||||
>{{ cooperativeTagLabel(mt.tagSlug) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- No connections at all -->
|
||||
<div
|
||||
v-if="!confirmed.length && !pendingIncoming.length && !pendingOutgoing.length && !showHidden"
|
||||
class="empty-state"
|
||||
>
|
||||
<p class="empty-sub">
|
||||
You don't have any connections yet. Use the suggestions above to get started.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Show hidden toggle -->
|
||||
<div v-if="hiddenCount > 0" class="hidden-toggle">
|
||||
<label class="filter-toggle">
|
||||
<input
|
||||
type="checkbox"
|
||||
v-model="showHidden"
|
||||
@change="handleShowHiddenToggle"
|
||||
/>
|
||||
Show {{ hiddenCount }} hidden suggestion{{ hiddenCount === 1 ? '' : 's' }}
|
||||
</label>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #fallback>
|
||||
<div class="loading-state">
|
||||
<p>Loading connections...</p>
|
||||
</div>
|
||||
</template>
|
||||
</ClientOnly>
|
||||
</PageShell>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
definePageMeta({ middleware: 'auth' })
|
||||
|
||||
const { memberData } = useAuth()
|
||||
const {
|
||||
getSuggestions,
|
||||
getMyConnections,
|
||||
requestConnection,
|
||||
confirmConnection,
|
||||
hideConnection,
|
||||
withdrawConnection,
|
||||
} = useConnections()
|
||||
|
||||
// State
|
||||
const loading = ref(true)
|
||||
const actionLoading = ref(null)
|
||||
const suggestions = ref([])
|
||||
const confirmed = ref([])
|
||||
const pendingIncoming = ref([])
|
||||
const pendingOutgoing = ref([])
|
||||
const filterTag = ref('')
|
||||
const filterState = ref('')
|
||||
const showHidden = ref(false)
|
||||
const hiddenCount = ref(0)
|
||||
const tagOptions = ref([])
|
||||
const craftTagOptions = ref([])
|
||||
|
||||
// State display text
|
||||
const stateLabels = {
|
||||
help: 'Can help',
|
||||
interested: 'Interested',
|
||||
seeking: 'Need help',
|
||||
}
|
||||
const stateLabel = (state) => stateLabels[state] || state || ''
|
||||
|
||||
// Tag label lookups
|
||||
const cooperativeTagLabel = (slug) => {
|
||||
const found = tagOptions.value.find(t => t.slug === slug)
|
||||
return found ? found.label : slug
|
||||
}
|
||||
const craftTagLabel = (slug) => {
|
||||
const found = craftTagOptions.value.find(t => t.slug === slug)
|
||||
return found ? found.label : slug
|
||||
}
|
||||
|
||||
// Helpers
|
||||
const getInitials = (name) => {
|
||||
if (!name) return '?'
|
||||
return name.split(' ').map(w => w[0]).join('').toUpperCase().slice(0, 2)
|
||||
}
|
||||
|
||||
const capitalize = (str) => {
|
||||
if (!str) return ''
|
||||
return str.split('-')
|
||||
.map(w => w.charAt(0).toUpperCase() + w.slice(1).toLowerCase())
|
||||
.join('-')
|
||||
}
|
||||
|
||||
const getOtherMember = (conn) => {
|
||||
const myId = memberData.value?._id || memberData.value?.id
|
||||
if (conn.initiator?._id === myId || conn.initiator?.id === myId) {
|
||||
return conn.recipient || {}
|
||||
}
|
||||
return conn.initiator || {}
|
||||
}
|
||||
|
||||
const getSlackHandle = (conn) => {
|
||||
const other = getOtherMember(conn)
|
||||
return other.communityConnections?.slackHandle || null
|
||||
}
|
||||
|
||||
// Data loading
|
||||
const loadSuggestions = async () => {
|
||||
try {
|
||||
const params = {}
|
||||
if (filterTag.value) params.tag = filterTag.value
|
||||
if (filterState.value) params.state = filterState.value
|
||||
if (showHidden.value) params.showHidden = 'true'
|
||||
const data = await getSuggestions(params)
|
||||
suggestions.value = data.suggestions || []
|
||||
} catch (error) {
|
||||
console.error('Failed to load suggestions:', error)
|
||||
suggestions.value = []
|
||||
}
|
||||
}
|
||||
|
||||
const loadConnections = async () => {
|
||||
try {
|
||||
const data = await getMyConnections()
|
||||
confirmed.value = data.confirmed || []
|
||||
pendingOutgoing.value = data.pendingOutgoing || []
|
||||
pendingIncoming.value = data.pendingIncoming || []
|
||||
} catch (error) {
|
||||
console.error('Failed to load connections:', error)
|
||||
}
|
||||
}
|
||||
|
||||
const loadTags = async () => {
|
||||
try {
|
||||
const data = await $fetch('/api/tags')
|
||||
const tags = data.tags || []
|
||||
const cooperativeTags = tags
|
||||
.filter(t => t.pool === 'cooperative')
|
||||
.map(t => ({ slug: t.slug, label: t.label }))
|
||||
tagOptions.value = cooperativeTags
|
||||
craftTagOptions.value = tags
|
||||
.filter(t => t.pool === 'craft')
|
||||
.map(t => ({ slug: t.slug, label: t.label }))
|
||||
|
||||
// Filter tag options to only member's selected topics
|
||||
const myTopicSlugs = (memberData.value?.communityConnections?.topics || [])
|
||||
.map(t => t.tagSlug)
|
||||
if (myTopicSlugs.length > 0) {
|
||||
tagOptions.value = cooperativeTags.filter(t => myTopicSlugs.includes(t.slug))
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to load tags:', error)
|
||||
}
|
||||
}
|
||||
|
||||
// Count hidden suggestions (for the toggle label)
|
||||
const countHidden = async () => {
|
||||
// We don't have a dedicated hidden-count endpoint, so we track locally
|
||||
// Hidden count increments when user hides, decrements on show
|
||||
// This is approximate; it resets on page load
|
||||
hiddenCount.value = 0
|
||||
}
|
||||
|
||||
// Actions
|
||||
const handleConnect = async (memberId) => {
|
||||
actionLoading.value = memberId
|
||||
try {
|
||||
await requestConnection(memberId)
|
||||
// Remove from suggestions, refresh connections
|
||||
suggestions.value = suggestions.value.filter(s => s.member._id !== memberId)
|
||||
await loadConnections()
|
||||
} catch (error) {
|
||||
console.error('Failed to create connection:', error)
|
||||
} finally {
|
||||
actionLoading.value = null
|
||||
}
|
||||
}
|
||||
|
||||
const handleHide = async (memberId) => {
|
||||
actionLoading.value = memberId
|
||||
try {
|
||||
// The hide endpoint requires a connection ID. For suggestions (no connection yet),
|
||||
// we create a pending connection first, then immediately hide it.
|
||||
const result = await requestConnection(memberId)
|
||||
const connId = result?.connection?._id
|
||||
if (connId) {
|
||||
await hideConnection(connId)
|
||||
}
|
||||
suggestions.value = suggestions.value.filter(s => s.member._id !== memberId)
|
||||
hiddenCount.value++
|
||||
} catch (error) {
|
||||
console.error('Failed to hide suggestion:', error)
|
||||
} finally {
|
||||
actionLoading.value = null
|
||||
}
|
||||
}
|
||||
|
||||
const handleConfirm = async (connectionId) => {
|
||||
actionLoading.value = connectionId
|
||||
try {
|
||||
await confirmConnection(connectionId)
|
||||
await loadConnections()
|
||||
} catch (error) {
|
||||
console.error('Failed to confirm connection:', error)
|
||||
} finally {
|
||||
actionLoading.value = null
|
||||
}
|
||||
}
|
||||
|
||||
const handleWithdraw = async (connectionId) => {
|
||||
actionLoading.value = connectionId
|
||||
try {
|
||||
await withdrawConnection(connectionId)
|
||||
await loadConnections()
|
||||
await loadSuggestions()
|
||||
} catch (error) {
|
||||
console.error('Failed to withdraw connection:', error)
|
||||
} finally {
|
||||
actionLoading.value = null
|
||||
}
|
||||
}
|
||||
|
||||
const handleShowHiddenToggle = async () => {
|
||||
await loadSuggestions()
|
||||
}
|
||||
|
||||
// Init
|
||||
onMounted(async () => {
|
||||
loading.value = true
|
||||
try {
|
||||
await loadTags()
|
||||
await Promise.all([
|
||||
loadSuggestions(),
|
||||
loadConnections(),
|
||||
])
|
||||
countHidden()
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
})
|
||||
|
||||
useHead({
|
||||
title: 'Connections - Ghost Guild',
|
||||
meta: [
|
||||
{
|
||||
name: 'description',
|
||||
content: 'Find and connect with Ghost Guild members who share your cooperative interests.',
|
||||
},
|
||||
],
|
||||
})
|
||||
definePageMeta({ middleware: "auth" });
|
||||
await navigateTo("/ecology", { replace: true });
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* ---- LOADING ---- */
|
||||
.loading-state {
|
||||
padding: 60px 24px;
|
||||
text-align: center;
|
||||
color: var(--text-faint);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
/* ---- FILTER BAR ---- */
|
||||
.filter-bar {
|
||||
padding: 16px 24px;
|
||||
border-bottom: 1px dashed var(--border);
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
|
||||
/* ---- SECTIONS ---- */
|
||||
.connections-section {
|
||||
padding: 20px 24px;
|
||||
border-bottom: 1px dashed var(--border);
|
||||
}
|
||||
|
||||
.subsection-label {
|
||||
font-size: 11px;
|
||||
color: var(--text-dim);
|
||||
margin: 16px 0 8px;
|
||||
}
|
||||
.subsection-label:first-of-type {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
/* ---- CONNECTION GRID ---- */
|
||||
.connection-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.connection-card {
|
||||
padding: 16px 20px;
|
||||
border: 1px dashed var(--border);
|
||||
margin: -1px 0 0 -1px;
|
||||
transition: background 0.15s;
|
||||
}
|
||||
.connection-card:hover {
|
||||
background: var(--surface);
|
||||
}
|
||||
|
||||
/* ---- CARD HEADER ---- */
|
||||
.cc-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.cc-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;
|
||||
}
|
||||
|
||||
.cc-avatar-img {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.cc-info {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.cc-name {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: var(--text-bright);
|
||||
}
|
||||
.cc-name a {
|
||||
color: var(--text-bright);
|
||||
text-decoration: none;
|
||||
}
|
||||
.cc-name a:hover {
|
||||
color: var(--candle);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.cc-meta {
|
||||
font-size: 11px;
|
||||
color: var(--text-dim);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 1px;
|
||||
}
|
||||
|
||||
.cc-slack {
|
||||
font-size: 11px;
|
||||
color: var(--candle-dim);
|
||||
}
|
||||
|
||||
.pending-label {
|
||||
font-size: 10px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
color: var(--candle-dim);
|
||||
}
|
||||
|
||||
/* ---- CRAFT TAGS (small pills) ---- */
|
||||
.cc-craft-tags {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
flex-wrap: wrap;
|
||||
margin: 6px 0;
|
||||
}
|
||||
|
||||
.craft-pill {
|
||||
font-size: 10px;
|
||||
color: var(--text-dim);
|
||||
padding: 1px 6px;
|
||||
border: 1px dashed var(--border);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* ---- INLINE TAGS (for confirmed/pending) ---- */
|
||||
.cc-tags-inline {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
flex-wrap: wrap;
|
||||
margin: 6px 0;
|
||||
}
|
||||
|
||||
/* ---- MATCH ROWS (suggestion cards) ---- */
|
||||
.cc-matches {
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
.match-row {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 8px;
|
||||
padding: 3px 0;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.match-tag {
|
||||
color: var(--text);
|
||||
font-weight: 600;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.match-states {
|
||||
color: var(--text-faint);
|
||||
font-size: 10px;
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
align-items: baseline;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.match-sep {
|
||||
color: var(--border);
|
||||
}
|
||||
|
||||
.match-you,
|
||||
.match-them {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* ---- ACTIONS ---- */
|
||||
.cc-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.btn-sm {
|
||||
padding: 4px 12px;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.text-action {
|
||||
font-family: "Commit Mono", monospace;
|
||||
font-size: 11px;
|
||||
color: var(--text-faint);
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
}
|
||||
.text-action:hover {
|
||||
color: var(--text);
|
||||
text-decoration: underline;
|
||||
}
|
||||
.text-action:disabled {
|
||||
opacity: 0.4;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* ---- EMPTY STATE ---- */
|
||||
.empty-state {
|
||||
padding: 32px 0;
|
||||
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);
|
||||
}
|
||||
.empty-sub a {
|
||||
color: var(--candle);
|
||||
}
|
||||
|
||||
/* ---- HIDDEN TOGGLE ---- */
|
||||
.hidden-toggle {
|
||||
padding: 16px 24px;
|
||||
border-bottom: 1px dashed var(--border);
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
|
||||
/* ---- RESPONSIVE ---- */
|
||||
@media (max-width: 1024px) {
|
||||
.connection-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.filter-bar {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
padding: 14px 20px;
|
||||
}
|
||||
.connections-section {
|
||||
padding: 16px 20px;
|
||||
}
|
||||
.connection-card {
|
||||
padding: 14px 16px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
471
app/pages/ecology.vue
Normal file
471
app/pages/ecology.vue
Normal file
|
|
@ -0,0 +1,471 @@
|
|||
<template>
|
||||
<PageShell
|
||||
title="Community Ecology"
|
||||
subtitle="Find members who share your cooperative interests"
|
||||
>
|
||||
<ClientOnly>
|
||||
<div v-if="loading" class="loading-state">
|
||||
<p>Loading ecology...</p>
|
||||
</div>
|
||||
|
||||
<template v-else>
|
||||
<div v-if="tagOptions.length > 0" class="filter-bar">
|
||||
<select
|
||||
v-model="filterTag"
|
||||
class="filter-select"
|
||||
@change="loadSuggestions"
|
||||
>
|
||||
<option value="">All topics</option>
|
||||
<option v-for="tag in tagOptions" :key="tag.slug" :value="tag.slug">
|
||||
{{ tag.label }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="connections-section">
|
||||
<div class="section-label">Suggested Matches</div>
|
||||
|
||||
<div v-if="suggestions.length > 0" class="connection-grid">
|
||||
<div
|
||||
v-for="suggestion in suggestions"
|
||||
:key="suggestion.member._id"
|
||||
class="connection-card"
|
||||
>
|
||||
<div class="cc-head">
|
||||
<div class="cc-avatar">
|
||||
<img
|
||||
v-if="suggestion.member.avatar"
|
||||
:src="`/ghosties/Ghost-${capitalize(suggestion.member.avatar)}.png`"
|
||||
:alt="suggestion.member.name"
|
||||
class="cc-avatar-img"
|
||||
/>
|
||||
<span v-else>{{ getInitials(suggestion.member.name) }}</span>
|
||||
</div>
|
||||
<div class="cc-info">
|
||||
<div class="cc-name">
|
||||
<NuxtLink :to="`/members/${suggestion.member._id}`">
|
||||
{{ suggestion.member.name }}
|
||||
</NuxtLink>
|
||||
</div>
|
||||
<div class="cc-meta">
|
||||
<CircleBadge :circle="suggestion.member.circle || 'community'" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="suggestion.member.craftTags?.length"
|
||||
class="cc-craft-tags"
|
||||
>
|
||||
<span
|
||||
v-for="tag in suggestion.member.craftTags.slice(0, 5)"
|
||||
:key="tag"
|
||||
class="craft-pill"
|
||||
>{{ craftTagLabel(tag) }}</span>
|
||||
</div>
|
||||
|
||||
<div class="cc-matches">
|
||||
<div
|
||||
v-for="match in suggestion.matchingTags"
|
||||
:key="match.tagSlug"
|
||||
class="match-row"
|
||||
>
|
||||
<span class="match-tag">{{ cooperativeTagLabel(match.tagSlug) }}</span>
|
||||
<span class="match-states">
|
||||
<span class="match-you">You: {{ stateLabel(match.yourState) }}</span>
|
||||
<span class="match-sep">·</span>
|
||||
<span class="match-them">They: {{ stateLabel(match.theirState) }}</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="suggestion.member.slackHandle" class="cc-contact">
|
||||
<span class="cc-slack">@{{ suggestion.member.slackHandle }}</span>
|
||||
<button
|
||||
type="button"
|
||||
class="text-action"
|
||||
@click="copyHandle(suggestion.member.slackHandle)"
|
||||
>
|
||||
{{ copiedHandle === suggestion.member.slackHandle ? 'Copied!' : 'Copy' }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else class="empty-state">
|
||||
<p class="empty-title">No matches yet</p>
|
||||
<p class="empty-sub">
|
||||
Add cooperative topics to your
|
||||
<NuxtLink to="/member/profile">profile</NuxtLink>
|
||||
to find members with shared interests.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #fallback>
|
||||
<div class="loading-state">
|
||||
<p>Loading ecology...</p>
|
||||
</div>
|
||||
</template>
|
||||
</ClientOnly>
|
||||
</PageShell>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
definePageMeta({ middleware: 'auth' })
|
||||
|
||||
const { getSuggestions } = useEcology()
|
||||
|
||||
const loading = ref(true)
|
||||
const suggestions = ref([])
|
||||
const filterTag = ref('')
|
||||
const tagOptions = ref([])
|
||||
const craftTagOptions = ref([])
|
||||
const copiedHandle = ref(null)
|
||||
|
||||
const stateLabels = {
|
||||
help: 'Can help',
|
||||
interested: 'Interested',
|
||||
seeking: 'Need help',
|
||||
}
|
||||
const stateLabel = (state) => stateLabels[state] || state || ''
|
||||
|
||||
const cooperativeTagLabel = (slug) => {
|
||||
const found = tagOptions.value.find((t) => t.slug === slug)
|
||||
return found ? found.label : slug
|
||||
}
|
||||
const craftTagLabel = (slug) => {
|
||||
const found = craftTagOptions.value.find((t) => t.slug === slug)
|
||||
return found ? found.label : slug
|
||||
}
|
||||
|
||||
const getInitials = (name) => {
|
||||
if (!name) return '?'
|
||||
return name
|
||||
.split(' ')
|
||||
.map((w) => w[0])
|
||||
.join('')
|
||||
.toUpperCase()
|
||||
.slice(0, 2)
|
||||
}
|
||||
|
||||
const capitalize = (str) => {
|
||||
if (!str) return ''
|
||||
return str
|
||||
.split('-')
|
||||
.map((w) => w.charAt(0).toUpperCase() + w.slice(1).toLowerCase())
|
||||
.join('-')
|
||||
}
|
||||
|
||||
const loadSuggestions = async () => {
|
||||
try {
|
||||
const params = {}
|
||||
if (filterTag.value) params.tag = filterTag.value
|
||||
const data = await getSuggestions(params)
|
||||
suggestions.value = data.suggestions || []
|
||||
} catch (error) {
|
||||
console.error('Failed to load suggestions:', error)
|
||||
suggestions.value = []
|
||||
}
|
||||
}
|
||||
|
||||
const { memberData } = useAuth()
|
||||
|
||||
const loadTags = async () => {
|
||||
try {
|
||||
const data = await $fetch('/api/tags')
|
||||
const tags = data.tags || []
|
||||
const cooperativeTags = tags
|
||||
.filter((t) => t.pool === 'cooperative')
|
||||
.map((t) => ({ slug: t.slug, label: t.label }))
|
||||
craftTagOptions.value = tags
|
||||
.filter((t) => t.pool === 'craft')
|
||||
.map((t) => ({ slug: t.slug, label: t.label }))
|
||||
|
||||
const myTopicSlugs = (memberData.value?.communityEcology?.topics || []).map(
|
||||
(t) => t.tagSlug,
|
||||
)
|
||||
tagOptions.value = myTopicSlugs.length
|
||||
? cooperativeTags.filter((t) => myTopicSlugs.includes(t.slug))
|
||||
: cooperativeTags
|
||||
} catch (error) {
|
||||
console.error('Failed to load tags:', error)
|
||||
}
|
||||
}
|
||||
|
||||
let copyTimer = null
|
||||
const copyHandle = async (handle) => {
|
||||
try {
|
||||
await navigator.clipboard.writeText(`@${handle}`)
|
||||
copiedHandle.value = handle
|
||||
if (copyTimer) clearTimeout(copyTimer)
|
||||
copyTimer = setTimeout(() => {
|
||||
copiedHandle.value = null
|
||||
copyTimer = null
|
||||
}, 1500)
|
||||
} catch (error) {
|
||||
console.error('Clipboard write failed:', error)
|
||||
}
|
||||
}
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
if (copyTimer) clearTimeout(copyTimer)
|
||||
})
|
||||
|
||||
onMounted(async () => {
|
||||
loading.value = true
|
||||
try {
|
||||
await Promise.all([loadTags(), loadSuggestions()])
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
})
|
||||
|
||||
useHead({
|
||||
title: 'Community Ecology - Ghost Guild',
|
||||
meta: [
|
||||
{
|
||||
name: 'description',
|
||||
content:
|
||||
'Find Ghost Guild members who share your cooperative interests and reach out on Slack.',
|
||||
},
|
||||
],
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.loading-state {
|
||||
padding: 60px 24px;
|
||||
text-align: center;
|
||||
color: var(--text-faint);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.filter-bar {
|
||||
padding: 16px 24px;
|
||||
border-bottom: 1px dashed var(--border);
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
|
||||
.connections-section {
|
||||
padding: 20px 24px;
|
||||
border-bottom: 1px dashed var(--border);
|
||||
}
|
||||
|
||||
.connection-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.connection-card {
|
||||
padding: 16px 20px;
|
||||
border: 1px dashed var(--border);
|
||||
margin: -1px 0 0 -1px;
|
||||
transition: background 0.15s;
|
||||
}
|
||||
.connection-card:hover {
|
||||
background: var(--surface);
|
||||
}
|
||||
|
||||
.cc-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.cc-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;
|
||||
}
|
||||
|
||||
.cc-avatar-img {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.cc-info {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.cc-name {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: var(--text-bright);
|
||||
}
|
||||
.cc-name a {
|
||||
color: var(--text-bright);
|
||||
text-decoration: none;
|
||||
}
|
||||
.cc-name a:hover {
|
||||
color: var(--candle);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.cc-meta {
|
||||
font-size: 11px;
|
||||
color: var(--text-dim);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 1px;
|
||||
}
|
||||
|
||||
.cc-craft-tags {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
flex-wrap: wrap;
|
||||
margin: 6px 0;
|
||||
}
|
||||
|
||||
.craft-pill {
|
||||
font-size: 10px;
|
||||
color: var(--text-dim);
|
||||
padding: 1px 6px;
|
||||
border: 1px dashed var(--border);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.cc-matches {
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
.match-row {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 8px;
|
||||
padding: 3px 0;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.match-tag {
|
||||
color: var(--text);
|
||||
font-weight: 600;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.match-states {
|
||||
color: var(--text-faint);
|
||||
font-size: 10px;
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
align-items: baseline;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.match-sep {
|
||||
color: var(--border);
|
||||
}
|
||||
|
||||
.match-you,
|
||||
.match-them {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.cc-contact {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-top: 10px;
|
||||
padding-top: 10px;
|
||||
border-top: 1px dashed var(--border);
|
||||
}
|
||||
|
||||
.cc-slack {
|
||||
font-size: 11px;
|
||||
color: var(--candle-dim);
|
||||
font-family: "Commit Mono", monospace;
|
||||
}
|
||||
|
||||
.text-action {
|
||||
font-family: "Commit Mono", monospace;
|
||||
font-size: 11px;
|
||||
color: var(--text-faint);
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
}
|
||||
.text-action:hover {
|
||||
color: var(--text);
|
||||
text-decoration: underline;
|
||||
}
|
||||
.text-action:disabled {
|
||||
opacity: 0.4;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
padding: 32px 0;
|
||||
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);
|
||||
}
|
||||
.empty-sub a {
|
||||
color: var(--candle);
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.connection-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.filter-bar {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
padding: 14px 20px;
|
||||
}
|
||||
.connections-section {
|
||||
padding: 16px 20px;
|
||||
}
|
||||
.connection-card {
|
||||
padding: 14px 16px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,12 +1,10 @@
|
|||
<template>
|
||||
<PageShell as="form" @submit.prevent="handleSubmit">
|
||||
<ClientOnly>
|
||||
<!-- Loading State -->
|
||||
<div v-if="loading" class="loading-state">
|
||||
<p style="color: var(--text-faint)">Loading your profile...</p>
|
||||
</div>
|
||||
|
||||
<!-- Unauthenticated State -->
|
||||
<div v-else-if="!memberData" class="loading-state">
|
||||
<p style="color: var(--text-faint); margin-bottom: 12px">
|
||||
Please sign in to access your profile settings.
|
||||
|
|
@ -32,263 +30,227 @@
|
|||
subtitle="How you appear to other members"
|
||||
>
|
||||
<NuxtLink
|
||||
v-if="
|
||||
(memberData?._id || memberData?.id) &&
|
||||
memberData?.status === 'active' &&
|
||||
formData.showInDirectory
|
||||
"
|
||||
:to="`/members/${memberData?._id || memberData?.id}`"
|
||||
v-if="memberId && memberData?.status === MEMBER_STATUSES.ACTIVE && formData.showInDirectory"
|
||||
:to="`/members/${memberId}`"
|
||||
class="view-profile-link"
|
||||
>
|
||||
View my public profile →
|
||||
</NuxtLink>
|
||||
</PageHeader>
|
||||
|
||||
<!-- TWO-COLUMN FORM BODY -->
|
||||
<ColumnsLayout cols="2">
|
||||
<!-- ======== LEFT COLUMN ======== -->
|
||||
<template #left>
|
||||
<PageSection>
|
||||
<div class="section-label">Basics</div>
|
||||
|
||||
<div class="field">
|
||||
<label>Name</label>
|
||||
<input
|
||||
v-model="formData.name"
|
||||
type="text"
|
||||
placeholder="Your name"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>Name</label>
|
||||
<input
|
||||
v-model="formData.name"
|
||||
type="text"
|
||||
placeholder="Your name"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="row-2">
|
||||
<div class="field">
|
||||
<label>Pronouns</label>
|
||||
<input
|
||||
v-model="formData.pronouns"
|
||||
type="text"
|
||||
placeholder="e.g., she/her, they/them"
|
||||
/>
|
||||
<PrivacyToggle v-model="formData.pronounsPrivacy" />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>Timezone</label>
|
||||
<input
|
||||
v-model="formData.timeZone"
|
||||
type="text"
|
||||
placeholder="e.g., America/Toronto"
|
||||
/>
|
||||
<PrivacyToggle v-model="formData.timeZonePrivacy" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row-2">
|
||||
<div class="field">
|
||||
<label>Pronouns</label>
|
||||
<input
|
||||
v-model="formData.pronouns"
|
||||
type="text"
|
||||
placeholder="e.g., she/her, they/them"
|
||||
/>
|
||||
<PrivacyToggle v-model="formData.pronounsPrivacy" />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>Timezone</label>
|
||||
<input
|
||||
v-model="formData.timeZone"
|
||||
type="text"
|
||||
placeholder="e.g., America/Toronto"
|
||||
/>
|
||||
<PrivacyToggle v-model="formData.timeZonePrivacy" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label>Avatar</label>
|
||||
<div class="avatar-row">
|
||||
<button
|
||||
v-for="ghost in availableGhosts"
|
||||
:key="ghost.value"
|
||||
type="button"
|
||||
class="avatar-option"
|
||||
:class="{ selected: formData.avatar === ghost.value }"
|
||||
:title="ghost.label"
|
||||
@click="formData.avatar = ghost.value"
|
||||
>
|
||||
<img :src="ghost.image" :alt="ghost.label" />
|
||||
</button>
|
||||
</div>
|
||||
<PrivacyToggle v-model="formData.avatarPrivacy" />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>Avatar</label>
|
||||
<div class="avatar-row">
|
||||
<button
|
||||
v-for="ghost in availableGhosts"
|
||||
:key="ghost.value"
|
||||
type="button"
|
||||
class="avatar-option"
|
||||
:class="{ selected: formData.avatar === ghost.value }"
|
||||
:title="ghost.label"
|
||||
@click="formData.avatar = ghost.value"
|
||||
>
|
||||
<img :src="ghost.image" :alt="ghost.label" />
|
||||
</button>
|
||||
</div>
|
||||
<PrivacyToggle v-model="formData.avatarPrivacy" />
|
||||
</div>
|
||||
</PageSection>
|
||||
|
||||
<!-- About You -->
|
||||
<PageSection divider="top">
|
||||
<div class="section-label">About You</div>
|
||||
|
||||
<div class="row-2">
|
||||
<div class="field">
|
||||
<label>Studio / Organization</label>
|
||||
<input
|
||||
v-model="formData.studio"
|
||||
type="text"
|
||||
placeholder="Studio name"
|
||||
/>
|
||||
<PrivacyToggle v-model="formData.studioPrivacy" />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>Location</label>
|
||||
<input
|
||||
v-model="formData.location"
|
||||
type="text"
|
||||
placeholder="Toronto, ON"
|
||||
/>
|
||||
<PrivacyToggle v-model="formData.locationPrivacy" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row-2">
|
||||
<div class="field">
|
||||
<label>Studio / Organization</label>
|
||||
<input
|
||||
v-model="formData.studio"
|
||||
type="text"
|
||||
placeholder="Studio name"
|
||||
/>
|
||||
<PrivacyToggle v-model="formData.studioPrivacy" />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>Location</label>
|
||||
<input
|
||||
v-model="formData.location"
|
||||
type="text"
|
||||
placeholder="Toronto, ON"
|
||||
/>
|
||||
<PrivacyToggle v-model="formData.locationPrivacy" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label>Bio</label>
|
||||
<textarea
|
||||
v-model="formData.bio"
|
||||
rows="4"
|
||||
placeholder="Share your background, interests, and experience..."
|
||||
maxlength="300"
|
||||
></textarea>
|
||||
<div class="char-count">
|
||||
{{ formData.bio?.length || 0 }} / 300
|
||||
</div>
|
||||
<PrivacyToggle v-model="formData.bioPrivacy" />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>Bio</label>
|
||||
<textarea
|
||||
v-model="formData.bio"
|
||||
rows="4"
|
||||
placeholder="Share your background, interests, and experience..."
|
||||
maxlength="300"
|
||||
></textarea>
|
||||
<div class="char-count">
|
||||
{{ formData.bio?.length || 0 }} / 300
|
||||
</div>
|
||||
<PrivacyToggle v-model="formData.bioPrivacy" />
|
||||
</div>
|
||||
|
||||
<!-- What I Do (craft tags) -->
|
||||
<div class="field">
|
||||
<label>What I Do</label>
|
||||
<CraftTagSelector
|
||||
v-model="formData.craftTags"
|
||||
:tags="craftTags"
|
||||
@suggest="tagSuggestPool = 'craft'; showTagSuggestModal = true"
|
||||
/>
|
||||
<PrivacyToggle v-model="formData.craftTagsPrivacy" />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>What I Do</label>
|
||||
<CraftTagSelector
|
||||
v-model="formData.craftTags"
|
||||
:tags="craftTags"
|
||||
@suggest="openTagSuggest('craft')"
|
||||
/>
|
||||
<PrivacyToggle v-model="formData.craftTagsPrivacy" />
|
||||
</div>
|
||||
</PageSection>
|
||||
|
||||
<!-- Visibility -->
|
||||
<PageSection divider="top">
|
||||
<div class="section-label">Visibility</div>
|
||||
|
||||
<div class="toggle-field">
|
||||
<USwitch
|
||||
v-model="formData.showInDirectory"
|
||||
aria-label="Show in Member Directory"
|
||||
/>
|
||||
<div class="toggle-label">
|
||||
Show in Member Directory
|
||||
<span class="toggle-sub"
|
||||
>Your profile will appear in the public member
|
||||
listing</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="toggle-field">
|
||||
<USwitch
|
||||
v-model="formData.showInDirectory"
|
||||
aria-label="Show in Member Directory"
|
||||
/>
|
||||
<div class="toggle-label">
|
||||
Show in Member Directory
|
||||
<span class="toggle-sub"
|
||||
>Your profile will appear in the public member listing</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</PageSection>
|
||||
</template>
|
||||
|
||||
<!-- ======== RIGHT COLUMN ======== -->
|
||||
<template #right>
|
||||
<PageSection>
|
||||
<div class="section-label">Community Connections</div>
|
||||
<div class="section-label">Community Ecology</div>
|
||||
|
||||
<div class="field">
|
||||
<label>Topics</label>
|
||||
<CooperativeTagSelector
|
||||
v-model="formData.communityConnectionsTopics"
|
||||
:tags="cooperativeTags"
|
||||
@suggest="tagSuggestPool = 'cooperative'; showTagSuggestModal = true"
|
||||
/>
|
||||
<PrivacyToggle v-model="formData.communityConnectionsPrivacy" />
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label>Details</label>
|
||||
<textarea
|
||||
v-model="formData.communityConnectionsDetails"
|
||||
rows="3"
|
||||
placeholder="What are you hoping to connect about?"
|
||||
maxlength="300"
|
||||
></textarea>
|
||||
<div class="char-count">
|
||||
{{ formData.communityConnectionsDetails?.length || 0 }} / 300
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="toggle-field">
|
||||
<USwitch
|
||||
v-model="formData.communityConnectionsOfferPeerSupport"
|
||||
aria-label="Offer Peer Support"
|
||||
/>
|
||||
<div class="toggle-label">
|
||||
Offer Peer Support
|
||||
<span class="toggle-sub"
|
||||
>Let other members request 1:1 time with you</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="formData.communityConnectionsOfferPeerSupport" class="connections-panel">
|
||||
<div class="field">
|
||||
<label>Availability</label>
|
||||
<textarea
|
||||
v-model="formData.communityConnectionsAvailability"
|
||||
rows="3"
|
||||
placeholder="e.g. Weekday afternoons ET"
|
||||
></textarea>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label>Slack Handle</label>
|
||||
<input
|
||||
v-model="formData.communityConnectionsSlackHandle"
|
||||
type="text"
|
||||
placeholder="@yourslackname"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label>Personal Message</label>
|
||||
<textarea
|
||||
v-model="formData.communityConnectionsPersonalMessage"
|
||||
rows="3"
|
||||
maxlength="200"
|
||||
placeholder="Brief note shown to people requesting time with you"
|
||||
></textarea>
|
||||
<div class="char-count">
|
||||
{{ formData.communityConnectionsPersonalMessage?.length || 0 }} / 200
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>Topics</label>
|
||||
<CooperativeTagSelector
|
||||
v-model="formData.communityEcologyTopics"
|
||||
:tags="cooperativeTags"
|
||||
@suggest="openTagSuggest('cooperative')"
|
||||
/>
|
||||
<PrivacyToggle v-model="formData.communityEcologyPrivacy" />
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label>Details</label>
|
||||
<textarea
|
||||
v-model="formData.communityEcologyDetails"
|
||||
rows="3"
|
||||
placeholder="What are you hoping to connect about?"
|
||||
maxlength="300"
|
||||
></textarea>
|
||||
<div class="char-count">
|
||||
{{ formData.communityEcologyDetails?.length || 0 }} / 300
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="toggle-field">
|
||||
<USwitch
|
||||
v-model="formData.communityEcologyOfferPeerSupport"
|
||||
aria-label="Offer Peer Support"
|
||||
/>
|
||||
<div class="toggle-label">
|
||||
Offer Peer Support
|
||||
<span class="toggle-sub"
|
||||
>Share your Slack handle so other members can reach out</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="formData.communityEcologyOfferPeerSupport" class="connections-panel">
|
||||
<div class="field">
|
||||
<label>Availability</label>
|
||||
<textarea
|
||||
v-model="formData.communityEcologyAvailability"
|
||||
rows="3"
|
||||
placeholder="e.g. Weekday afternoons ET"
|
||||
></textarea>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label>Slack Handle</label>
|
||||
<input
|
||||
v-model="formData.communityEcologySlackHandle"
|
||||
type="text"
|
||||
placeholder="@yourslackname"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label>Personal Message</label>
|
||||
<textarea
|
||||
v-model="formData.communityEcologyPersonalMessage"
|
||||
rows="3"
|
||||
maxlength="200"
|
||||
placeholder="Brief note shown alongside your Slack handle"
|
||||
></textarea>
|
||||
<div class="char-count">
|
||||
{{ formData.communityEcologyPersonalMessage?.length || 0 }} / 200
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</PageSection>
|
||||
|
||||
<!-- Notifications -->
|
||||
<PageSection divider="top">
|
||||
<div class="section-label">Notifications</div>
|
||||
|
||||
<div class="toggle-field">
|
||||
<USwitch
|
||||
v-model="formData.notifyEvents"
|
||||
aria-label="Event reminders"
|
||||
/>
|
||||
<div class="toggle-label">
|
||||
Event reminders
|
||||
<span class="toggle-sub"
|
||||
>Get notified about upcoming events</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="toggle-field">
|
||||
<USwitch
|
||||
v-model="formData.notifyUpdates"
|
||||
aria-label="Community updates"
|
||||
/>
|
||||
<div class="toggle-label">
|
||||
Community updates
|
||||
<span class="toggle-sub"
|
||||
>New posts from members you follow</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="toggle-field">
|
||||
<USwitch
|
||||
v-model="formData.notifyConnectionRequests"
|
||||
aria-label="Connection requests"
|
||||
/>
|
||||
<div class="toggle-label">
|
||||
Connection requests
|
||||
<span class="toggle-sub"
|
||||
>When someone wants to connect</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-for="toggle in notificationToggles"
|
||||
:key="toggle.key"
|
||||
class="toggle-field"
|
||||
>
|
||||
<USwitch
|
||||
v-model="formData.notifications[toggle.key]"
|
||||
:aria-label="toggle.label"
|
||||
/>
|
||||
<div class="toggle-label">
|
||||
{{ toggle.label }}
|
||||
<span class="toggle-sub">{{ toggle.sub }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</PageSection>
|
||||
</template>
|
||||
</ColumnsLayout>
|
||||
|
|
@ -313,14 +275,21 @@
|
|||
}}</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #fallback>
|
||||
<div class="loading-state">
|
||||
<p style="color: var(--text-faint)">Loading your profile...</p>
|
||||
</div>
|
||||
</template>
|
||||
</ClientOnly>
|
||||
|
||||
<!-- Tag Suggest Modal -->
|
||||
<TagSuggestModal v-model:open="showTagSuggestModal" :pool="tagSuggestPool" />
|
||||
</PageShell>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { MEMBER_STATUSES } from "~/composables/useMemberStatus";
|
||||
|
||||
definePageMeta({
|
||||
middleware: 'auth',
|
||||
});
|
||||
|
|
@ -328,29 +297,20 @@ definePageMeta({
|
|||
const { memberData, checkMemberStatus } = useAuth();
|
||||
const { openLoginModal } = useLoginModal();
|
||||
|
||||
// Available ghost avatars
|
||||
const availableGhosts = [
|
||||
{
|
||||
value: "disbelieving",
|
||||
label: "Disbelieving",
|
||||
image: "/ghosties/Ghost-Disbelieving.png",
|
||||
},
|
||||
{
|
||||
value: "double-take",
|
||||
label: "Double Take",
|
||||
image: "/ghosties/Ghost-Double-Take.png",
|
||||
},
|
||||
{
|
||||
value: "exasperated",
|
||||
label: "Exasperated",
|
||||
image: "/ghosties/Ghost-Exasperated.png",
|
||||
},
|
||||
{ value: "disbelieving", label: "Disbelieving", image: "/ghosties/Ghost-Disbelieving.png" },
|
||||
{ value: "double-take", label: "Double Take", image: "/ghosties/Ghost-Double-Take.png" },
|
||||
{ value: "exasperated", label: "Exasperated", image: "/ghosties/Ghost-Exasperated.png" },
|
||||
{ value: "mild", label: "Mild", image: "/ghosties/Ghost-Mild.png" },
|
||||
{ value: "sweet", label: "Sweet", image: "/ghosties/Ghost-Sweet.png" },
|
||||
{ value: "wtf", label: "WTF", image: "/ghosties/Ghost-WTF.png" },
|
||||
];
|
||||
|
||||
// Fetch tags and split into pools
|
||||
const notificationToggles = [
|
||||
{ key: "events", label: "Event reminders", sub: "Get notified about upcoming events" },
|
||||
{ key: "updates", label: "Community updates", sub: "New posts from members you follow" },
|
||||
];
|
||||
|
||||
const { data: tagsData } = await useFetch("/api/tags");
|
||||
|
||||
const craftTags = computed(() =>
|
||||
|
|
@ -360,11 +320,14 @@ const cooperativeTags = computed(() =>
|
|||
(tagsData.value?.tags || []).filter((t) => t.pool === "cooperative"),
|
||||
);
|
||||
|
||||
// Tag suggest modal state
|
||||
const showTagSuggestModal = ref(false);
|
||||
const tagSuggestPool = ref("");
|
||||
|
||||
// Form state
|
||||
const openTagSuggest = (pool) => {
|
||||
tagSuggestPool.value = pool;
|
||||
showTagSuggestModal.value = true;
|
||||
};
|
||||
|
||||
const formData = reactive({
|
||||
name: "",
|
||||
pronouns: "",
|
||||
|
|
@ -374,28 +337,25 @@ const formData = reactive({
|
|||
bio: "",
|
||||
location: "",
|
||||
showInDirectory: true,
|
||||
// Craft tags
|
||||
craftTags: [],
|
||||
craftTagsPrivacy: "members",
|
||||
// Community connections
|
||||
communityConnectionsTopics: [],
|
||||
communityConnectionsPrivacy: "members",
|
||||
communityConnectionsDetails: "",
|
||||
communityConnectionsOfferPeerSupport: false,
|
||||
communityConnectionsAvailability: "",
|
||||
communityConnectionsSlackHandle: "",
|
||||
communityConnectionsPersonalMessage: "",
|
||||
// Privacy
|
||||
communityEcologyTopics: [],
|
||||
communityEcologyPrivacy: "members",
|
||||
communityEcologyDetails: "",
|
||||
communityEcologyOfferPeerSupport: false,
|
||||
communityEcologyAvailability: "",
|
||||
communityEcologySlackHandle: "",
|
||||
communityEcologyPersonalMessage: "",
|
||||
pronounsPrivacy: "members",
|
||||
timeZonePrivacy: "members",
|
||||
avatarPrivacy: "members",
|
||||
studioPrivacy: "members",
|
||||
bioPrivacy: "members",
|
||||
locationPrivacy: "members",
|
||||
// Notifications
|
||||
notifyEvents: true,
|
||||
notifyUpdates: true,
|
||||
notifyConnectionRequests: true,
|
||||
notifications: {
|
||||
events: true,
|
||||
updates: true,
|
||||
},
|
||||
});
|
||||
|
||||
const loading = ref(false);
|
||||
|
|
@ -403,103 +363,88 @@ const saving = ref(false);
|
|||
const saveSuccess = ref(false);
|
||||
const saveError = ref(null);
|
||||
const initialData = ref(null);
|
||||
let saveSuccessTimer = null;
|
||||
|
||||
const memberId = computed(() => memberData.value?._id || memberData.value?.id);
|
||||
|
||||
// Computed
|
||||
const hasChanges = computed(() => {
|
||||
return JSON.stringify(formData) !== JSON.stringify(initialData.value);
|
||||
});
|
||||
|
||||
// Load member data into form
|
||||
const loadProfile = () => {
|
||||
if (memberData.value) {
|
||||
formData.name = memberData.value.name || "";
|
||||
formData.pronouns = memberData.value.pronouns || "";
|
||||
formData.timeZone = memberData.value.timeZone || "";
|
||||
formData.avatar = memberData.value.avatar || "";
|
||||
formData.studio = memberData.value.studio || "";
|
||||
formData.bio = memberData.value.bio || "";
|
||||
formData.location = memberData.value.location || "";
|
||||
if (!memberData.value) return;
|
||||
|
||||
formData.showInDirectory = memberData.value.showInDirectory ?? true;
|
||||
formData.name = memberData.value.name || "";
|
||||
formData.pronouns = memberData.value.pronouns || "";
|
||||
formData.timeZone = memberData.value.timeZone || "";
|
||||
formData.avatar = memberData.value.avatar || "";
|
||||
formData.studio = memberData.value.studio || "";
|
||||
formData.bio = memberData.value.bio || "";
|
||||
formData.location = memberData.value.location || "";
|
||||
formData.showInDirectory = memberData.value.showInDirectory ?? true;
|
||||
|
||||
// Load craft tags
|
||||
formData.craftTags = Array.isArray(memberData.value.craftTags)
|
||||
? [...memberData.value.craftTags]
|
||||
: [];
|
||||
formData.craftTags = Array.isArray(memberData.value.craftTags)
|
||||
? [...memberData.value.craftTags]
|
||||
: [];
|
||||
|
||||
// Load community connections (with fallback to old peerSupport fields)
|
||||
const cc = memberData.value.communityConnections || {};
|
||||
formData.communityConnectionsTopics = Array.isArray(cc.topics) ? [...cc.topics] : [];
|
||||
formData.communityConnectionsOfferPeerSupport = cc.offerPeerSupport ?? memberData.value.peerSupport?.enabled ?? false;
|
||||
formData.communityConnectionsAvailability = cc.availability || memberData.value.peerSupport?.availability || "";
|
||||
formData.communityConnectionsSlackHandle = cc.slackHandle || memberData.value.peerSupport?.slackUsername || "";
|
||||
formData.communityConnectionsPersonalMessage = cc.personalMessage || memberData.value.peerSupport?.personalMessage || "";
|
||||
formData.communityConnectionsDetails = cc.details || "";
|
||||
const ecology = memberData.value.communityEcology || {};
|
||||
formData.communityEcologyTopics = Array.isArray(ecology.topics) ? [...ecology.topics] : [];
|
||||
formData.communityEcologyOfferPeerSupport = ecology.offerPeerSupport ?? false;
|
||||
formData.communityEcologyAvailability = ecology.availability || "";
|
||||
formData.communityEcologySlackHandle = ecology.slackHandle || "";
|
||||
formData.communityEcologyPersonalMessage = ecology.personalMessage || "";
|
||||
formData.communityEcologyDetails = ecology.details || "";
|
||||
|
||||
// Load privacy settings (with defaults)
|
||||
const privacy = memberData.value.privacy || {};
|
||||
formData.pronounsPrivacy = privacy.pronouns || "members";
|
||||
formData.timeZonePrivacy = privacy.timeZone || "members";
|
||||
formData.avatarPrivacy = privacy.avatar || "members";
|
||||
formData.studioPrivacy = privacy.studio || "members";
|
||||
formData.bioPrivacy = privacy.bio || "members";
|
||||
formData.locationPrivacy = privacy.location || "members";
|
||||
formData.craftTagsPrivacy = privacy.craftTags || "members";
|
||||
formData.communityConnectionsPrivacy = privacy.communityConnections || "members";
|
||||
const privacy = memberData.value.privacy || {};
|
||||
formData.pronounsPrivacy = privacy.pronouns || "members";
|
||||
formData.timeZonePrivacy = privacy.timeZone || "members";
|
||||
formData.avatarPrivacy = privacy.avatar || "members";
|
||||
formData.studioPrivacy = privacy.studio || "members";
|
||||
formData.bioPrivacy = privacy.bio || "members";
|
||||
formData.locationPrivacy = privacy.location || "members";
|
||||
formData.craftTagsPrivacy = privacy.craftTags || "members";
|
||||
formData.communityEcologyPrivacy = privacy.communityEcology || "members";
|
||||
|
||||
// Load notification prefs
|
||||
const notifs = memberData.value.notifications || {};
|
||||
formData.notifyEvents = notifs.events ?? true;
|
||||
formData.notifyUpdates = notifs.updates ?? true;
|
||||
formData.notifyConnectionRequests = notifs.connectionRequests ?? notifs.peerRequests ?? true;
|
||||
const notifs = memberData.value.notifications || {};
|
||||
formData.notifications.events = notifs.events ?? true;
|
||||
formData.notifications.updates = notifs.updates ?? true;
|
||||
|
||||
// Store initial state for change detection
|
||||
initialData.value = JSON.parse(JSON.stringify(formData));
|
||||
}
|
||||
initialData.value = JSON.parse(JSON.stringify(formData));
|
||||
};
|
||||
|
||||
// Handle form submission
|
||||
const handleSubmit = async () => {
|
||||
saving.value = true;
|
||||
saveSuccess.value = false;
|
||||
saveError.value = null;
|
||||
|
||||
try {
|
||||
// Save profile data (includes craft tags + privacy + notifications)
|
||||
await $fetch("/api/members/profile", {
|
||||
method: "PATCH",
|
||||
body: {
|
||||
...formData,
|
||||
craftTags: formData.craftTags,
|
||||
notifications: {
|
||||
events: formData.notifyEvents,
|
||||
updates: formData.notifyUpdates,
|
||||
connectionRequests: formData.notifyConnectionRequests,
|
||||
await Promise.all([
|
||||
$fetch("/api/members/profile", {
|
||||
method: "PATCH",
|
||||
body: { ...formData },
|
||||
}),
|
||||
$fetch("/api/members/me/community-ecology", {
|
||||
method: "PATCH",
|
||||
body: {
|
||||
topics: formData.communityEcologyTopics,
|
||||
offerPeerSupport: formData.communityEcologyOfferPeerSupport,
|
||||
availability: formData.communityEcologyAvailability,
|
||||
slackHandle: formData.communityEcologySlackHandle,
|
||||
personalMessage: formData.communityEcologyPersonalMessage,
|
||||
details: formData.communityEcologyDetails,
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
// Save community connections data
|
||||
await $fetch("/api/members/me/community-connections", {
|
||||
method: "PATCH",
|
||||
body: {
|
||||
topics: formData.communityConnectionsTopics,
|
||||
offerPeerSupport: formData.communityConnectionsOfferPeerSupport,
|
||||
availability: formData.communityConnectionsAvailability,
|
||||
slackHandle: formData.communityConnectionsSlackHandle,
|
||||
personalMessage: formData.communityConnectionsPersonalMessage,
|
||||
details: formData.communityConnectionsDetails,
|
||||
},
|
||||
});
|
||||
}),
|
||||
]);
|
||||
|
||||
saveSuccess.value = true;
|
||||
|
||||
// Refresh member data
|
||||
await checkMemberStatus();
|
||||
loadProfile();
|
||||
|
||||
setTimeout(() => {
|
||||
if (saveSuccessTimer) clearTimeout(saveSuccessTimer);
|
||||
saveSuccessTimer = setTimeout(() => {
|
||||
saveSuccess.value = false;
|
||||
saveSuccessTimer = null;
|
||||
}, 3000);
|
||||
} catch (error) {
|
||||
console.error("Profile save error:", error);
|
||||
|
|
@ -510,14 +455,12 @@ const handleSubmit = async () => {
|
|||
}
|
||||
};
|
||||
|
||||
// Reset form to initial state
|
||||
const resetForm = () => {
|
||||
loadProfile();
|
||||
saveSuccess.value = false;
|
||||
saveError.value = null;
|
||||
};
|
||||
|
||||
// Initialize on mount
|
||||
onMounted(async () => {
|
||||
if (!memberData.value) {
|
||||
loading.value = true;
|
||||
|
|
@ -536,6 +479,10 @@ onMounted(async () => {
|
|||
loadProfile();
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
if (saveSuccessTimer) clearTimeout(saveSuccessTimer);
|
||||
});
|
||||
|
||||
useHead({
|
||||
title: "Edit Profile - Ghost Guild",
|
||||
});
|
||||
|
|
|
|||
|
|
@ -108,9 +108,9 @@
|
|||
<div class="profile-bio" v-html="renderMarkdown(member.bio)"></div>
|
||||
</div>
|
||||
|
||||
<!-- Two-column: Craft Tags + Community Connections -->
|
||||
<!-- Two-column: Craft Tags + Community Ecology -->
|
||||
<div
|
||||
v-if="craftTagsDisplay.length > 0 || member.offering?.text || connectionTopicsDisplay.length > 0 || member.lookingFor?.text || member.communityConnections?.details"
|
||||
v-if="craftTagsDisplay.length > 0 || ecologyTopics.length > 0 || member.communityEcology?.details"
|
||||
class="profile-two-col"
|
||||
>
|
||||
<!-- Left: What I Do -->
|
||||
|
|
@ -123,59 +123,39 @@
|
|||
class="tag-pill"
|
||||
>{{ tagLabel('craft', tag) }}</span>
|
||||
</div>
|
||||
<p v-if="member.offering?.text" class="profile-detail offering-text">
|
||||
{{ member.offering.text }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Right: Community Connections -->
|
||||
<!-- Right: Community Ecology -->
|
||||
<div class="profile-section">
|
||||
<div class="section-label">Community Connections</div>
|
||||
<div v-if="connectionTopicsDisplay.length > 0" class="tag-list">
|
||||
<div class="section-label">Community Ecology</div>
|
||||
<div v-if="ecologyTopics.length > 0" class="tag-list">
|
||||
<span
|
||||
v-for="topic in connectionTopicsDisplay"
|
||||
:key="topic.tagSlug || topic"
|
||||
v-for="topic in ecologyTopics"
|
||||
:key="topic.tagSlug"
|
||||
class="tag-pill connection-pill"
|
||||
>
|
||||
<span v-if="topic.state" class="connection-state">{{ stateLabel(topic.state) }}</span>
|
||||
{{ tagLabel('cooperative', topic.tagSlug || topic) }}
|
||||
{{ tagLabel('cooperative', topic.tagSlug) }}
|
||||
</span>
|
||||
</div>
|
||||
<p v-if="member.communityConnections?.details" class="profile-detail connection-details">
|
||||
{{ member.communityConnections.details }}
|
||||
</p>
|
||||
<p v-else-if="member.lookingFor?.text" class="profile-detail looking-text">
|
||||
{{ member.lookingFor.text }}
|
||||
<p v-if="member.communityEcology?.details" class="profile-detail connection-details">
|
||||
{{ member.communityEcology.details }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Peer Support -->
|
||||
<div v-if="showPeerSupport" class="profile-section">
|
||||
<div v-if="member.communityEcology?.offerPeerSupport" class="profile-section">
|
||||
<div class="section-label">Peer Support</div>
|
||||
<div class="dashed-box no-hover">
|
||||
<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="peerAvailability" class="profile-detail peer-availability">
|
||||
{{ peerAvailability }}
|
||||
<p v-if="member.communityEcology?.personalMessage" class="profile-detail">
|
||||
{{ member.communityEcology.personalMessage }}
|
||||
</p>
|
||||
<p v-if="member.communityEcology?.availability" class="profile-detail peer-availability">
|
||||
{{ member.communityEcology.availability }}
|
||||
</p>
|
||||
<p v-if="member.communityEcology?.slackHandle" class="profile-detail peer-availability">
|
||||
Reach out on Slack: <span class="slack-handle">@{{ member.communityEcology.slackHandle }}</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -290,48 +270,11 @@ const tagLabel = (pool, slug) => {
|
|||
return found ? found.label : slug;
|
||||
};
|
||||
|
||||
// Craft tags display: new field, falling back to offering.tags
|
||||
const craftTagsDisplay = computed(() => {
|
||||
if (!member.value) return [];
|
||||
if (member.value.craftTags && member.value.craftTags.length > 0) {
|
||||
return member.value.craftTags;
|
||||
}
|
||||
return member.value.offering?.tags || [];
|
||||
});
|
||||
const craftTagsDisplay = computed(() => member.value?.craftTags || []);
|
||||
|
||||
// Connection topics display: new field, falling back to lookingFor.tags
|
||||
const connectionTopicsDisplay = computed(() => {
|
||||
if (!member.value) return [];
|
||||
if (
|
||||
member.value.communityConnections?.topics &&
|
||||
member.value.communityConnections.topics.length > 0
|
||||
) {
|
||||
return member.value.communityConnections.topics;
|
||||
}
|
||||
if (member.value.lookingFor?.tags && member.value.lookingFor.tags.length > 0) {
|
||||
return member.value.lookingFor.tags.map((tag) => ({ tagSlug: tag, state: null }));
|
||||
}
|
||||
return [];
|
||||
});
|
||||
|
||||
// Peer support: check both new communityConnections and old peerSupport
|
||||
const showPeerSupport = computed(() => {
|
||||
if (!member.value) return false;
|
||||
return (
|
||||
member.value.communityConnections?.offerPeerSupport ||
|
||||
member.value.peerSupport?.enabled
|
||||
);
|
||||
});
|
||||
|
||||
// Peer availability: prefer new field, fall back to old
|
||||
const peerAvailability = computed(() => {
|
||||
if (!member.value) return "";
|
||||
return (
|
||||
member.value.communityConnections?.availability ||
|
||||
member.value.peerSupport?.availability ||
|
||||
""
|
||||
);
|
||||
});
|
||||
const ecologyTopics = computed(
|
||||
() => member.value?.communityEcology?.topics || [],
|
||||
);
|
||||
|
||||
// Whether the member has any social links (for hero layout)
|
||||
const hasSocialLinks = computed(() =>
|
||||
|
|
@ -587,8 +530,6 @@ useHead({
|
|||
line-height: 1.6;
|
||||
margin: 0;
|
||||
}
|
||||
.offering-text,
|
||||
.looking-text,
|
||||
.connection-details {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
|
@ -623,26 +564,15 @@ useHead({
|
|||
PEER SUPPORT
|
||||
==================================================== */
|
||||
|
||||
.peer-group {
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
.peer-group:last-of-type {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.peer-label {
|
||||
font-family: "Commit Mono", monospace;
|
||||
font-size: 10px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
color: var(--text-faint);
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.peer-availability {
|
||||
margin-top: 12px;
|
||||
padding-top: 12px;
|
||||
border-top: 1px dashed var(--border);
|
||||
}
|
||||
.slack-handle {
|
||||
font-family: "Commit Mono", monospace;
|
||||
color: var(--candle-dim);
|
||||
}
|
||||
|
||||
/* ====================================================
|
||||
ACTIVITY TIMELINE
|
||||
|
|
|
|||
|
|
@ -183,32 +183,30 @@
|
|||
}}
|
||||
</div>
|
||||
|
||||
<!-- Craft tags (fall back to offering.tags) -->
|
||||
<div
|
||||
v-if="getMemberCraftTags(member).length > 0"
|
||||
v-if="member.craftTags?.length > 0"
|
||||
class="mc-tags"
|
||||
>
|
||||
<span class="tag-label">Craft:</span>
|
||||
<span
|
||||
v-for="tag in getMemberCraftTags(member)"
|
||||
v-for="tag in member.craftTags"
|
||||
:key="tag"
|
||||
class="skill-tag"
|
||||
>{{ craftTagLabel(tag) }}</span
|
||||
>
|
||||
</div>
|
||||
|
||||
<!-- Community connections topics (fall back to lookingFor.tags) -->
|
||||
<div
|
||||
v-if="getMemberConnectionTopics(member).length > 0"
|
||||
v-if="member.communityEcology?.topics?.length > 0"
|
||||
class="mc-looking"
|
||||
>
|
||||
<span
|
||||
v-for="topic in getMemberConnectionTopics(member)"
|
||||
:key="topic.tagSlug || topic"
|
||||
v-for="topic in member.communityEcology.topics"
|
||||
:key="topic.tagSlug"
|
||||
class="connection-topic"
|
||||
>
|
||||
<span class="connection-state">{{ stateLabel(topic.state) }}</span>
|
||||
{{ connectionTagLabel(topic.tagSlug || topic) }}
|
||||
{{ connectionTagLabel(topic.tagSlug) }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
|
|
@ -319,36 +317,8 @@ const connectionTagLabel = (slug) => {
|
|||
return found ? found.label : slug;
|
||||
};
|
||||
|
||||
// Get craft tags for a member (new field, falling back to offering.tags)
|
||||
const getMemberCraftTags = (member) => {
|
||||
if (member.craftTags && member.craftTags.length > 0) {
|
||||
return member.craftTags;
|
||||
}
|
||||
return member.offering?.tags || [];
|
||||
};
|
||||
|
||||
// Get connection topics for a member (new field, falling back to lookingFor.tags)
|
||||
const getMemberConnectionTopics = (member) => {
|
||||
if (
|
||||
member.communityConnections?.topics &&
|
||||
member.communityConnections.topics.length > 0
|
||||
) {
|
||||
return member.communityConnections.topics;
|
||||
}
|
||||
// Fallback: wrap old lookingFor.tags as plain strings
|
||||
if (member.lookingFor?.tags && member.lookingFor.tags.length > 0) {
|
||||
return member.lookingFor.tags.map((tag) => ({ tagSlug: tag, state: null }));
|
||||
}
|
||||
return [];
|
||||
};
|
||||
|
||||
// Show peer support link (check both old and new fields)
|
||||
const showPeerSupport = (member) => {
|
||||
if (member.communityConnections?.offerPeerSupport) return true;
|
||||
if (member.peerSupport?.enabled && member.peerSupport?.slackUsername)
|
||||
return true;
|
||||
return false;
|
||||
};
|
||||
const showPeerSupport = (member) =>
|
||||
!!member.communityEcology?.offerPeerSupport;
|
||||
|
||||
// Computed: has active filters
|
||||
const hasActiveFilters = computed(() => {
|
||||
|
|
@ -486,10 +456,7 @@ const clearAllFilters = () => {
|
|||
|
||||
// Slack DM functionality
|
||||
const openSlackDM = async (member) => {
|
||||
const username =
|
||||
member.communityConnections?.slackHandle ||
|
||||
member.peerSupport?.slackUsername ||
|
||||
member.name;
|
||||
const username = member.communityEcology?.slackHandle || member.name;
|
||||
|
||||
try {
|
||||
await navigator.clipboard.writeText(username);
|
||||
|
|
|
|||
|
|
@ -76,6 +76,10 @@ const formatters = {
|
|||
text: 'Updated community connections',
|
||||
icon: 'i-lucide-users'
|
||||
}),
|
||||
community_ecology_updated: () => ({
|
||||
text: 'Updated community ecology',
|
||||
icon: 'i-lucide-users'
|
||||
}),
|
||||
connection_requested: (m) => ({
|
||||
text: `Sent connection request to ${m.memberName || 'a member'}`,
|
||||
icon: 'i-lucide-user-plus'
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue