refactor(board): rename ecology-prefixed vars to board-prefixed, remove duplicate count div

- 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
This commit is contained in:
Jennie Robinson Faber 2026-04-14 12:11:47 +01:00
parent f43fff0ba0
commit 3e5cedb1a6

View file

@ -1,20 +1,15 @@
<template> <template>
<PageShell title="Board" :subtitle="pageSubtitle"> <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 --> <!-- 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"> <button type="button" class="drawer-btn" @click="showTagsDrawer = !showTagsDrawer">
Tags... 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> </button>
</div> </div>
<!-- Tags Drawer --> <!-- 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"> <div class="skills-bar">
<span class="tag-label">Topics:</span> <span class="tag-label">Topics:</span>
<button <button
@ -22,18 +17,18 @@
:key="tag.slug" :key="tag.slug"
type="button" type="button"
class="skill-tag" class="skill-tag"
:class="{ active: ecologyFilterTags.includes(tag.slug) }" :class="{ active: boardFilterTags.includes(tag.slug) }"
@click="toggleTag(tag.slug)" @click="toggleTag(tag.slug)"
> >
{{ tag.label }} {{ tag.label }}
</button> </button>
<button <button
v-if="ecologyTagOptions.length > 10" v-if="boardTagOptions.length > 10"
type="button" type="button"
class="more-btn" class="more-btn"
@click="showAllTags = !showAllTags" @click="showAllTags = !showAllTags"
> >
{{ showAllTags ? 'Show less' : `+${ecologyTagOptions.length - 10} more` }} {{ showAllTags ? 'Show less' : `+${boardTagOptions.length - 10} more` }}
</button> </button>
</div> </div>
</div> </div>
@ -97,7 +92,7 @@
:key="match.tagSlug" :key="match.tagSlug"
class="match-row" 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-states">
<span class="match-you">You: {{ stateLabel(match.yourState) }}</span> <span class="match-you">You: {{ stateLabel(match.yourState) }}</span>
<span class="match-sep">&middot;</span> <span class="match-sep">&middot;</span>
@ -149,8 +144,8 @@ const { trackGoal, isComplete } = useOnboarding()
// ---- State ---- // ---- State ----
const suggestions = ref([]) const suggestions = ref([])
const loading = ref(false) const loading = ref(false)
const ecologyTagOptions = ref([]) const boardTagOptions = ref([])
const ecologyFilterTags = ref([]) const boardFilterTags = ref([])
const copiedHandle = ref(null) const copiedHandle = ref(null)
const showAllTags = ref(false) const showAllTags = ref(false)
const showTagsDrawer = ref(false) const showTagsDrawer = ref(false)
@ -170,8 +165,8 @@ const craftTagLabel = (slug) => {
return found ? found.label : slug return found ? found.label : slug
} }
const ecologyTagLabel = (slug) => { const boardTagLabel = (slug) => {
const found = ecologyTagOptions.value.find((t) => t.slug === slug) const found = boardTagOptions.value.find((t) => t.slug === slug)
if (found) return found.label if (found) return found.label
const fallback = cooperativeTagOptions.value.find((t) => t.slug === slug) const fallback = cooperativeTagOptions.value.find((t) => t.slug === slug)
return fallback ? fallback.label : slug return fallback ? fallback.label : slug
@ -197,7 +192,7 @@ const capitalize = (str) => {
// ---- Computed ---- // ---- Computed ----
const visibleTagOptions = 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(() => { const hasNoTopics = computed(() => {
@ -207,24 +202,24 @@ const hasNoTopics = computed(() => {
}) })
const filteredSuggestions = 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) => 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 pageSubtitle = computed(() => {
const count = suggestions.value.length const count = filteredSuggestions.value.length
return `${count} connection${count === 1 ? '' : 's'}` return `${count} connection${count === 1 ? '' : 's'}`
}) })
// ---- Tag toggle ---- // ---- Tag toggle ----
const toggleTag = (slug) => { const toggleTag = (slug) => {
const idx = ecologyFilterTags.value.indexOf(slug) const idx = boardFilterTags.value.indexOf(slug)
if (idx > -1) { if (idx > -1) {
ecologyFilterTags.value.splice(idx, 1) boardFilterTags.value.splice(idx, 1)
} else { } 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 // Build ecology tag options from user's own topics
const allCoopTags = cooperativeTagOptions.value const allCoopTags = cooperativeTagOptions.value
const myTopicSlugs = (memberData.value?.board?.topics || []).map((t) => t.tagSlug) 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.filter((t) => myTopicSlugs.includes(t.slug))
: allCoopTags : allCoopTags
} catch (error) { } catch (error) {
@ -307,21 +302,6 @@ onMounted(async () => {
</script> </script>
<style scoped> <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 ---- */
.tags-drawer-toggle { .tags-drawer-toggle {
padding: 8px 24px; padding: 8px 24px;
@ -610,11 +590,6 @@ onMounted(async () => {
} }
@media (max-width: 768px) { @media (max-width: 768px) {
.filter-bar {
flex-direction: column;
align-items: stretch;
padding: 14px 20px;
}
.skills-bar { .skills-bar {
padding: 10px 20px; padding: 10px 20px;
} }