From 3e5cedb1a66e292987b7a04004a541bef4733ae2 Mon Sep 17 00:00:00 2001
From: Jennie Robinson Faber <jennie@jenniefaber.com>
Date: Tue, 14 Apr 2026 12:11:47 +0100
Subject: [PATCH] refactor(board): rename ecology-prefixed vars to
 board-prefixed, remove duplicate count div
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Renamed ecologyTagOptions, ecologyFilterTags, ecologyTagLabel → board* throughout refs, computed, helpers, and template
- Removed .filter-bar div (duplicate count display)
- Updated pageSubtitle to use filteredSuggestions.length so subtitle reflects active tag filtering
---
 app/pages/board.vue | 63 ++++++++++++++-------------------------------
 1 file changed, 19 insertions(+), 44 deletions(-)

diff --git a/app/pages/board.vue b/app/pages/board.vue
index bace328..6dd5222 100644
--- a/app/pages/board.vue
+++ b/app/pages/board.vue
@@ -1,20 +1,15 @@
 <template>
   <PageShell title="Board" :subtitle="pageSubtitle">
-    <!-- Filter Bar -->
-    <div class="filter-bar">
-      <span class="filter-count">{{ filteredSuggestions.length }} connection{{ filteredSuggestions.length === 1 ? '' : 's' }}</span>
-    </div>
-
     <!-- Tags Drawer Toggle -->
-    <div v-if="ecologyTagOptions.length > 0" class="tags-drawer-toggle">
+    <div v-if="boardTagOptions.length > 0" class="tags-drawer-toggle">
       <button type="button" class="drawer-btn" @click="showTagsDrawer = !showTagsDrawer">
         Tags...
-        <span v-if="ecologyFilterTags.length > 0" class="tag-count-badge">{{ ecologyFilterTags.length }}</span>
+        <span v-if="boardFilterTags.length > 0" class="tag-count-badge">{{ boardFilterTags.length }}</span>
       </button>
     </div>
 
     <!-- Tags Drawer -->
-    <div v-if="showTagsDrawer && ecologyTagOptions.length > 0" class="tags-drawer">
+    <div v-if="showTagsDrawer && boardTagOptions.length > 0" class="tags-drawer">
       <div class="skills-bar">
         <span class="tag-label">Topics:</span>
         <button
@@ -22,18 +17,18 @@
           :key="tag.slug"
           type="button"
           class="skill-tag"
-          :class="{ active: ecologyFilterTags.includes(tag.slug) }"
+          :class="{ active: boardFilterTags.includes(tag.slug) }"
           @click="toggleTag(tag.slug)"
         >
           {{ tag.label }}
         </button>
         <button
-          v-if="ecologyTagOptions.length > 10"
+          v-if="boardTagOptions.length > 10"
           type="button"
           class="more-btn"
           @click="showAllTags = !showAllTags"
         >
-          {{ showAllTags ? 'Show less' : `+${ecologyTagOptions.length - 10} more` }}
+          {{ showAllTags ? 'Show less' : `+${boardTagOptions.length - 10} more` }}
         </button>
       </div>
     </div>
@@ -97,7 +92,7 @@
                 :key="match.tagSlug"
                 class="match-row"
               >
-                <span class="match-tag">{{ ecologyTagLabel(match.tagSlug) }}</span>
+                <span class="match-tag">{{ boardTagLabel(match.tagSlug) }}</span>
                 <span class="match-states">
                   <span class="match-you">You: {{ stateLabel(match.yourState) }}</span>
                   <span class="match-sep">&middot;</span>
@@ -149,8 +144,8 @@ const { trackGoal, isComplete } = useOnboarding()
 // ---- State ----
 const suggestions = ref([])
 const loading = ref(false)
-const ecologyTagOptions = ref([])
-const ecologyFilterTags = ref([])
+const boardTagOptions = ref([])
+const boardFilterTags = ref([])
 const copiedHandle = ref(null)
 const showAllTags = ref(false)
 const showTagsDrawer = ref(false)
@@ -170,8 +165,8 @@ const craftTagLabel = (slug) => {
   return found ? found.label : slug
 }
 
-const ecologyTagLabel = (slug) => {
-  const found = ecologyTagOptions.value.find((t) => t.slug === slug)
+const boardTagLabel = (slug) => {
+  const found = boardTagOptions.value.find((t) => t.slug === slug)
   if (found) return found.label
   const fallback = cooperativeTagOptions.value.find((t) => t.slug === slug)
   return fallback ? fallback.label : slug
@@ -197,7 +192,7 @@ const capitalize = (str) => {
 
 // ---- Computed ----
 const visibleTagOptions = computed(() =>
-  showAllTags.value ? ecologyTagOptions.value : ecologyTagOptions.value.slice(0, 10)
+  showAllTags.value ? boardTagOptions.value : boardTagOptions.value.slice(0, 10)
 )
 
 const hasNoTopics = computed(() => {
@@ -207,24 +202,24 @@ const hasNoTopics = computed(() => {
 })
 
 const filteredSuggestions = computed(() => {
-  if (ecologyFilterTags.value.length === 0) return suggestions.value
+  if (boardFilterTags.value.length === 0) return suggestions.value
   return suggestions.value.filter((s) =>
-    s.matchingTags.some((m) => ecologyFilterTags.value.includes(m.tagSlug))
+    s.matchingTags.some((m) => boardFilterTags.value.includes(m.tagSlug))
   )
 })
 
 const pageSubtitle = computed(() => {
-  const count = suggestions.value.length
+  const count = filteredSuggestions.value.length
   return `${count} connection${count === 1 ? '' : 's'}`
 })
 
 // ---- Tag toggle ----
 const toggleTag = (slug) => {
-  const idx = ecologyFilterTags.value.indexOf(slug)
+  const idx = boardFilterTags.value.indexOf(slug)
   if (idx > -1) {
-    ecologyFilterTags.value.splice(idx, 1)
+    boardFilterTags.value.splice(idx, 1)
   } else {
-    ecologyFilterTags.value.push(slug)
+    boardFilterTags.value.push(slug)
   }
 }
 
@@ -254,7 +249,7 @@ const loadBoard = async () => {
     // Build ecology tag options from user's own topics
     const allCoopTags = cooperativeTagOptions.value
     const myTopicSlugs = (memberData.value?.board?.topics || []).map((t) => t.tagSlug)
-    ecologyTagOptions.value = myTopicSlugs.length
+    boardTagOptions.value = myTopicSlugs.length
       ? allCoopTags.filter((t) => myTopicSlugs.includes(t.slug))
       : allCoopTags
   } catch (error) {
@@ -307,21 +302,6 @@ onMounted(async () => {
 </script>
 
 <style scoped>
-/* ---- FILTER BAR ---- */
-.filter-bar {
-  padding: 16px 24px;
-  border-bottom: 1px dashed var(--border);
-  display: flex;
-  gap: 12px;
-  align-items: center;
-  flex-wrap: wrap;
-}
-
-.filter-count {
-  font-size: 11px;
-  color: var(--text-faint);
-}
-
 /* ---- TAGS DRAWER ---- */
 .tags-drawer-toggle {
   padding: 8px 24px;
@@ -610,11 +590,6 @@ onMounted(async () => {
 }
 
 @media (max-width: 768px) {
-  .filter-bar {
-    flex-direction: column;
-    align-items: stretch;
-    padding: 14px 20px;
-  }
   .skills-bar {
     padding: 10px 20px;
   }