From ed33cbb9e715609e868c7e93e20cd1b20925a3e2 Mon Sep 17 00:00:00 2001
From: Jennie Robinson Faber <jennie@jenniefaber.com>
Date: Sun, 5 Apr 2026 16:56:40 +0100
Subject: [PATCH] feat: add connections page, composable, nav badge, and
 peer-support redirect

- useConnections composable wrapping all /api/connections endpoints
- Connections page with suggestions, filters, and connection management
- Pending connection count badge in sidebar navigation
- peer-support.vue now redirects to /connections
---
 app/components/AppNavigation.vue  |  36 +-
 app/composables/useConnections.js |  32 ++
 app/pages/connections.vue         | 834 ++++++++++++++++++++++++++++++
 app/pages/peer-support.vue        |   4 +-
 4 files changed, 903 insertions(+), 3 deletions(-)
 create mode 100644 app/composables/useConnections.js
 create mode 100644 app/pages/connections.vue

diff --git a/app/components/AppNavigation.vue b/app/components/AppNavigation.vue
index 24c7da8..3095f8b 100644
--- a/app/components/AppNavigation.vue
+++ b/app/components/AppNavigation.vue
@@ -34,8 +34,13 @@
                 :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>
@@ -129,7 +134,21 @@ 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) {
@@ -279,4 +298,19 @@ 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>
diff --git a/app/composables/useConnections.js b/app/composables/useConnections.js
new file mode 100644
index 0000000..6bf3833
--- /dev/null
+++ b/app/composables/useConnections.js
@@ -0,0 +1,32 @@
+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,
+  }
+}
diff --git a/app/pages/connections.vue b/app/pages/connections.vue
new file mode 100644
index 0000000..833c324
--- /dev/null
+++ b/app/pages/connections.vue
@@ -0,0 +1,834 @@
+<template>
+  <div class="connections-page">
+    <PageHeader
+      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 || stateOptions.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">&middot;</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>
+  </div>
+</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 stateOptions = 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
+}
+
+// Build tag options from the current member's cooperative topics
+const buildTagOptions = () => {
+  const topics = memberData.value?.communityConnections?.topics || []
+  tagOptions.value = topics.map(t => ({
+    slug: t.tagSlug,
+    label: cooperativeTagLabel(t.tagSlug),
+  }))
+}
+
+// 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
+    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 () => {
+  // Reload suggestions — the API excludes hidden by default
+  // When showing hidden, we'd need an endpoint param; for now just reload
+  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.',
+    },
+  ],
+})
+</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>
diff --git a/app/pages/peer-support.vue b/app/pages/peer-support.vue
index 682319d..1e26164 100644
--- a/app/pages/peer-support.vue
+++ b/app/pages/peer-support.vue
@@ -3,10 +3,10 @@
 </template>
 
 <script setup>
-// Redirect to members directory with peer support filter
+// Redirect to connections page
 definePageMeta({
   middleware: defineNuxtRouteMiddleware(() => {
-    return navigateTo("/members?peerSupport=true");
+    return navigateTo("/connections");
   }),
 });
 </script>