From a448ea809db26df1715db447ec102e83f58f7898 Mon Sep 17 00:00:00 2001
From: Jennie Robinson Faber <jennie@jenniefaber.com>
Date: Mon, 13 Apr 2026 21:03:21 +0100
Subject: [PATCH] refactor: merge ecology into /members, redirect old routes

- ecology.vue replaced with redirect to /members?view=ecology
- connections.vue updated to skip the /ecology hop, redirects directly
- Remove Ecology nav entry; Members covers it
---
 app/components/AppNavigation.vue |  67 ++++-
 app/pages/connections.vue        |   2 +-
 app/pages/ecology.vue            | 474 +------------------------------
 3 files changed, 57 insertions(+), 486 deletions(-)

diff --git a/app/components/AppNavigation.vue b/app/components/AppNavigation.vue
index 8955897..fff8152 100644
--- a/app/components/AppNavigation.vue
+++ b/app/components/AppNavigation.vue
@@ -35,7 +35,18 @@
           <div class="sidebar-section">Explore</div>
           <ul class="sidebar-nav">
             <li v-for="item in exploreItems" :key="item.path">
+              <a
+                v-if="item.external"
+                :href="item.path"
+                target="_blank"
+                rel="noopener"
+                @click="handleNavigate"
+              >
+                {{ item.label
+                }}<span class="external-hint" aria-hidden="true">ext</span>
+              </a>
               <NuxtLink
+                v-else
                 :to="item.path"
                 :class="{ active: isActive(item.path) }"
                 @click="handleNavigate"
@@ -50,7 +61,18 @@
           <div class="sidebar-section">Navigate</div>
           <ul class="sidebar-nav">
             <li v-for="item in publicItems" :key="item.path">
+              <a
+                v-if="item.external"
+                :href="item.path"
+                target="_blank"
+                rel="noopener"
+                @click="handleNavigate"
+              >
+                {{ item.label
+                }}<span class="external-hint" aria-hidden="true">ext</span>
+              </a>
               <NuxtLink
+                v-else
                 :to="item.path"
                 :class="{ active: isActive(item.path) }"
                 @click="handleNavigate"
@@ -77,7 +99,18 @@
           <div class="sidebar-section">Navigate</div>
           <ul class="sidebar-nav">
             <li v-for="item in publicItems" :key="item.path">
+              <a
+                v-if="item.external"
+                :href="item.path"
+                target="_blank"
+                rel="noopener"
+                @click="handleNavigate"
+              >
+                {{ item.label
+                }}<span class="external-hint" aria-hidden="true">ext</span>
+              </a>
               <NuxtLink
+                v-else
                 :to="item.path"
                 :class="{ active: isActive(item.path) }"
                 @click="handleNavigate"
@@ -105,12 +138,11 @@
     <div class="sidebar-meta">
       <ClientOnly>
         Part of
-        <a href="https://babyghosts.fund" target="_blank">Baby Ghosts</a><br />
+        <a href="https://babyghosts.org" target="_blank">Baby Ghosts</a><br />
         A Canadian nonprofit
         <template #fallback>
           Part of
-          <a href="https://babyghosts.fund" target="_blank">Baby Ghosts</a
-          ><br />
+          <a href="https://babyghosts.org" target="_blank">Baby Ghosts</a><br />
           A Canadian nonprofit
         </template>
       </ClientOnly>
@@ -136,8 +168,8 @@ const route = useRoute();
 const { isAuthenticated, memberData, logout } = useAuth();
 const isDev = import.meta.dev;
 
-const showOnboardingDot = computed(() =>
-  isAuthenticated.value && !memberData.value?.onboarding?.completedAt
+const showOnboardingDot = computed(
+  () => isAuthenticated.value && !memberData.value?.onboarding?.completedAt,
 );
 
 const handleNavigate = () => {
@@ -162,14 +194,10 @@ const publicItems = [
   { label: "Home", path: "/" },
   { label: "About", path: "/about" },
   { label: "Events", path: "/events" },
-  { label: "Members", path: "/members" },
-  { label: "Wiki", path: "https://wiki.ghostguild.org" },
+  { label: "Wiki", path: "https://wiki.ghostguild.org", external: true },
 ];
 
-const joinItems = [
-  { label: "Become a member", path: "/join" },
-  { label: "Propose an event", path: "/events" },
-];
+const joinItems = [{ label: "Become a member", path: "/join" }];
 
 // Logged-in nav items
 const youItems = [
@@ -182,8 +210,7 @@ const youItems = [
 const exploreItems = [
   { label: "Events", path: "/events" },
   { label: "Members", path: "/members" },
-  { label: "Ecology", path: "/ecology" },
-  { label: "Wiki", path: "https://wiki.ghostguild.org" },
+  { label: "Wiki", path: "https://wiki.ghostguild.org", external: true },
   { label: "About", path: "/about" },
 ];
 </script>
@@ -289,6 +316,20 @@ const exploreItems = [
   color: var(--candle-dim);
 }
 
+.external-hint {
+  font-size: 10px;
+  letter-spacing: 0.05em;
+  margin-left: 4px;
+  position: relative;
+  top: -0.5px;
+}
+.external-hint::before {
+  content: "[";
+}
+.external-hint::after {
+  content: "]";
+}
+
 .onboarding-dot {
   display: inline-block;
   width: 6px;
diff --git a/app/pages/connections.vue b/app/pages/connections.vue
index 0b5f879..4299625 100644
--- a/app/pages/connections.vue
+++ b/app/pages/connections.vue
@@ -1,4 +1,4 @@
 <script setup>
 definePageMeta({ middleware: "auth" });
-await navigateTo("/ecology", { replace: true });
+await navigateTo("/members?view=ecology", { replace: true });
 </script>
diff --git a/app/pages/ecology.vue b/app/pages/ecology.vue
index 6582fde..4299625 100644
--- a/app/pages/ecology.vue
+++ b/app/pages/ecology.vue
@@ -1,474 +1,4 @@
-<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">&middot;</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 { trackGoal, isComplete } = useOnboarding()
-
-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
-  }
-  if (!isComplete.value) {
-    trackGoal('ecologyPageVisited')
-  }
-})
-
-useHead({
-  title: 'Community Ecology - Ghost Guild',
-  meta: [
-    {
-      name: 'description',
-      content:
-        'Find Ghost Guild members who share your cooperative interests and reach out on Slack.',
-    },
-  ],
-})
+definePageMeta({ middleware: "auth" });
+await navigateTo("/members?view=ecology", { replace: true });
 </script>
-
-<style scoped>
-.loading-state {
-  padding: 48px 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: inherit;
-  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='%23b8a880' 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);
-  border-style: solid;
-}
-
-.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;
-  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);
-  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: inherit;
-}
-
-.text-action {
-  font-family: inherit;
-  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: var(--font-display);
-  font-size: 16px;
-  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: 12px 20px;
-  }
-  .connections-section {
-    padding: 16px 20px;
-  }
-  .connection-card {
-    padding: 12px 16px;
-  }
-}
-</style>