From f8bc5502baa2100bda6edbaf7a7e055d9888fe35 Mon Sep 17 00:00:00 2001
From: Jennie Robinson Faber <jennie@jenniefaber.com>
Date: Tue, 14 Apr 2026 17:22:04 +0100
Subject: [PATCH] feat(board): replace board/peer support with posts list on
 member profile

---
 app/pages/members/[id].vue | 185 ++++++++++++++++---------------------
 1 file changed, 78 insertions(+), 107 deletions(-)

diff --git a/app/pages/members/[id].vue b/app/pages/members/[id].vue
index 2f29438..4bd8263 100644
--- a/app/pages/members/[id].vue
+++ b/app/pages/members/[id].vue
@@ -108,56 +108,39 @@
           <div class="profile-bio" v-html="renderMarkdown(member.bio)"></div>
         </div>
 
-        <!-- Two-column: Craft Tags + Board -->
-        <div
-          v-if="craftTagsDisplay.length > 0 || boardTopics.length > 0 || member.board?.details"
-          class="profile-two-col"
-        >
-          <!-- Left: What I Do -->
-          <div class="profile-section">
-            <div class="section-label">What I Do</div>
-            <div v-if="craftTagsDisplay.length > 0" class="tag-list">
-              <span
-                v-for="tag in craftTagsDisplay"
-                :key="tag"
-                class="tag-pill"
-              >{{ tagLabel('craft', tag) }}</span>
-            </div>
-          </div>
-
-          <!-- Right: Board -->
-          <div class="profile-section">
-            <div class="section-label">Board</div>
-            <div v-if="boardTopics.length > 0" class="tag-list">
-              <span
-                v-for="topic in boardTopics"
-                :key="topic.tagSlug"
-                class="tag-pill connection-pill"
-              >
-                <span v-if="topic.state" class="connection-state">{{ stateLabel(topic.state) }}</span>
-                {{ tagLabel('cooperative', topic.tagSlug) }}
-              </span>
-            </div>
-            <p v-if="member.board?.details" class="profile-detail connection-details">
-              {{ member.board.details }}
-            </p>
+        <!-- Craft Tags -->
+        <div v-if="craftTagsDisplay.length > 0" class="profile-section">
+          <div class="section-label">What I Do</div>
+          <div class="tag-list">
+            <span
+              v-for="tag in craftTagsDisplay"
+              :key="tag"
+              class="tag-pill"
+            >{{ tagLabel('craft', tag) }}</span>
           </div>
         </div>
 
-        <!-- Peer Support -->
-        <div v-if="member.board?.offerPeerSupport" class="profile-section">
-          <div class="section-label">Peer Support</div>
-          <div class="dashed-box no-hover">
-            <p v-if="member.board?.personalMessage" class="profile-detail">
-              {{ member.board.personalMessage }}
-            </p>
-            <p v-if="member.board?.availability" class="profile-detail peer-availability">
-              {{ member.board.availability }}
-            </p>
-            <p v-if="member.board?.slackHandle" class="profile-detail peer-availability">
-              Reach out on Slack: <span class="slack-handle">@{{ member.board.slackHandle }}</span>
-            </p>
-          </div>
+        <!-- Board Posts -->
+        <div class="profile-section">
+          <div class="section-label">Board Posts</div>
+          <p v-if="memberPosts.length === 0" class="profile-detail posts-empty">
+            No posts yet.
+          </p>
+          <ul v-else class="posts-list">
+            <li v-for="post in memberPosts" :key="post._id" class="post-item">
+              <NuxtLink to="/board" class="post-link">
+                <div class="post-title">{{ post.title }}</div>
+                <div class="post-excerpt">{{ postExcerpt(post) }}</div>
+                <div v-if="post.tags && post.tags.length" class="tag-list post-tags">
+                  <span
+                    v-for="tag in post.tags"
+                    :key="tag"
+                    class="tag-pill"
+                  >{{ tagLabel('cooperative', tag) }}</span>
+                </div>
+              </NuxtLink>
+            </li>
+          </ul>
         </div>
 
         <!-- Recent Activity -->
@@ -217,15 +200,6 @@ 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
@@ -274,9 +248,19 @@ const tagLabel = (pool, slug) => {
 
 const craftTagsDisplay = computed(() => member.value?.craftTags || []);
 
-const boardTopics = computed(
-  () => member.value?.board?.topics || [],
-);
+// Board posts authored by this member
+const memberPosts = ref([]);
+onMounted(async () => {
+  const { fetchPosts } = useBoardPosts();
+  const result = await fetchPosts({ author: id });
+  memberPosts.value = result || [];
+});
+
+const postExcerpt = (post) => {
+  const text = post.seeking || post.offering || "";
+  if (text.length <= 80) return text;
+  return text.slice(0, 80).trimEnd() + "...";
+};
 
 // Whether the member has any social links (for hero layout)
 const hasSocialLinks = computed(() =>
@@ -507,22 +491,6 @@ useHead({
   color: var(--ember);
 }
 
-/* ====================================================
-   TWO-COLUMN: Craft Tags + Board
-   ==================================================== */
-
-.profile-two-col {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  border-bottom: 1px dashed var(--border);
-}
-.profile-two-col .profile-section {
-  border-bottom: none;
-}
-.profile-two-col .profile-section:first-child {
-  border-right: 1px dashed var(--border);
-}
-
 /* ====================================================
    SHARED SECTION ELEMENTS
    ==================================================== */
@@ -533,9 +501,6 @@ useHead({
   line-height: 1.6;
   margin: 0;
 }
-.connection-details {
-  margin-top: 10px;
-}
 
 /* Tags */
 .tag-list {
@@ -551,30 +516,47 @@ useHead({
   border: 1px dashed var(--border);
   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);
-}
 
 /* ====================================================
-   PEER SUPPORT
+   BOARD POSTS
    ==================================================== */
 
-.peer-availability {
-  margin-top: 12px;
-  padding-top: 12px;
+.posts-empty {
+  color: var(--text-faint);
+}
+.posts-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.post-item {
   border-top: 1px dashed var(--border);
 }
-.slack-handle {
-  font-family: "Commit Mono", monospace;
-  color: var(--candle-dim);
+.post-item:last-child {
+  border-bottom: 1px dashed var(--border);
+}
+.post-link {
+  display: block;
+  padding: 10px 0;
+  text-decoration: none;
+  color: inherit;
+}
+.post-link:hover .post-title {
+  color: var(--candle);
+}
+.post-title {
+  font-size: 13px;
+  color: var(--text);
+  margin-bottom: 2px;
+  transition: color 0.15s;
+}
+.post-excerpt {
+  font-size: 11px;
+  color: var(--text-faint);
+  line-height: 1.4;
+}
+.post-tags {
+  margin-top: 6px;
 }
 
 /* ====================================================
@@ -666,17 +648,6 @@ useHead({
    RESPONSIVE
    ==================================================== */
 
-@media (max-width: 1024px) {
-  /* ColumnsLayout events-sidebar hides itself at ≤1024px */
-  .profile-two-col {
-    grid-template-columns: 1fr;
-  }
-  .profile-two-col .profile-section:first-child {
-    border-right: none;
-    border-bottom: 1px dashed var(--border);
-  }
-}
-
 @media (max-width: 768px) {
   .profile-hero,
   .profile-hero--with-links {