+
-
+
-
- {{ member.peerSupport.availability }}
+
+ {{ peerAvailability }}
@@ -233,6 +235,15 @@ const circleLabels = {
practitioner: "Practitioner",
};
+// State display text mapping
+const stateLabels = {
+ help: "Can help",
+ interested: "Interested",
+ seeking: "Need help",
+};
+
+const stateLabel = (state) => stateLabels[state] || state || "";
+
const getInitials = (name) => {
if (!name) return "?";
return name
@@ -246,6 +257,11 @@ const getInitials = (name) => {
// Fetch member data — no await so the component renders immediately (no Suspense)
const { data, pending, error: fetchError } = useFetch(`/api/members/${id}`);
+// Fetch tags for slug-to-label lookup
+const { data: tagsData } = useFetch("/api/tags", {
+ default: () => ({ tags: [] }),
+});
+
// Fetch public activity
const { data: activityData } = useFetch(`/api/members/${id}/activity`, {
params: { limit: 5 },
@@ -267,6 +283,56 @@ const formatRelativeDate = (date) => {
}
const member = computed(() => data.value?.member || null);
+// Tag label lookup
+const tagLabel = (pool, slug) => {
+ const tags = tagsData.value?.tags || [];
+ const found = tags.find((t) => t.slug === slug && t.pool === pool);
+ 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 || [];
+});
+
+// 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 pageBreadcrumbTitle = useState("pageBreadcrumbTitle", () => "");
watch(
member,
@@ -442,7 +508,8 @@ useHead({
}
.offering-text,
-.looking-text {
+.looking-text,
+.connection-details {
margin-top: 8px;
}
@@ -462,6 +529,19 @@ useHead({
white-space: nowrap;
}
+.connection-pill {
+ display: inline-flex;
+ align-items: center;
+ gap: 4px;
+}
+
+.connection-state {
+ font-size: 9px;
+ text-transform: uppercase;
+ letter-spacing: 0.04em;
+ color: var(--text-faint);
+}
+
/* ---- SOCIAL LINKS ---- */
.social-links {
display: flex;
diff --git a/app/pages/members/index.vue b/app/pages/members/index.vue
index a7d4658..dcf0cfd 100644
--- a/app/pages/members/index.vue
+++ b/app/pages/members/index.vue
@@ -41,64 +41,64 @@
>