From 7707068f360c42dcc85c9d117aad6284499b1728 Mon Sep 17 00:00:00 2001
From: Jennie Robinson Faber <jennie@jenniefaber.com>
Date: Tue, 14 Apr 2026 17:27:06 +0100
Subject: [PATCH] feat(board): admin page for managing board channels

---
 app/layouts/admin.vue              |  17 +
 app/pages/admin/board-channels.vue | 540 +++++++++++++++++++++++++++++
 2 files changed, 557 insertions(+)
 create mode 100644 app/pages/admin/board-channels.vue

diff --git a/app/layouts/admin.vue b/app/layouts/admin.vue
index 0802815..8542106 100644
--- a/app/layouts/admin.vue
+++ b/app/layouts/admin.vue
@@ -58,6 +58,14 @@
               Wiki
             </NuxtLink>
           </li>
+          <li>
+            <NuxtLink
+              to="/admin/board-channels"
+              :class="{ active: route.path.startsWith('/admin/board-channels') }"
+            >
+              Board Channels
+            </NuxtLink>
+          </li>
         </ul>
 
         <div class="sidebar-section">Site</div>
@@ -153,6 +161,15 @@
                   Wiki
                 </NuxtLink>
               </li>
+              <li>
+                <NuxtLink
+                  to="/admin/board-channels"
+                  :class="{ active: route.path.startsWith('/admin/board-channels') }"
+                  @click="isMobileMenuOpen = false"
+                >
+                  Board Channels
+                </NuxtLink>
+              </li>
             </ul>
 
             <div class="sidebar-section">Site</div>
diff --git a/app/pages/admin/board-channels.vue b/app/pages/admin/board-channels.vue
new file mode 100644
index 0000000..e186f4f
--- /dev/null
+++ b/app/pages/admin/board-channels.vue
@@ -0,0 +1,540 @@
+<template>
+  <div class="admin-board-channels">
+    <!-- Page Header -->
+    <div class="page-header">
+      <div class="header-row">
+        <div>
+          <h1>Board Channels</h1>
+          <p>Map cooperative tags to Slack channels for board cross-posting</p>
+        </div>
+        <div class="header-actions">
+          <button class="btn btn-primary" @click="openCreateModal">+ New Channel</button>
+        </div>
+      </div>
+    </div>
+
+    <!-- Unmapped Tags Indicator -->
+    <div v-if="unmappedTags.length > 0" class="unmapped-block">
+      <div class="section-label">Unmapped Cooperative Tags</div>
+      <p class="unmapped-hint">These cooperative tags are not yet mapped to any board channel:</p>
+      <div class="tag-pills">
+        <span v-for="tag in unmappedTags" :key="tag.slug" class="tag-pill tag-pill-warning">
+          {{ tag.label }}
+        </span>
+      </div>
+    </div>
+
+    <!-- Channels List -->
+    <div class="channels-list">
+      <div v-if="!channels.length" class="empty-state">
+        <p>No board channels configured yet.</p>
+        <p class="empty-hint">Click "+ New Channel" to map your first tag to a Slack channel.</p>
+      </div>
+
+      <table v-else class="channels-table">
+        <thead>
+          <tr>
+            <th>Name</th>
+            <th>Slack Channel ID</th>
+            <th>Mapped Tags</th>
+            <th class="actions-col">Actions</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="channel in channels" :key="channel._id">
+            <td class="name-cell">{{ channel.name }}</td>
+            <td class="mono">{{ channel.slackChannelId }}</td>
+            <td>
+              <div class="tag-pills">
+                <span
+                  v-for="slug in channel.tagSlugs || []"
+                  :key="slug"
+                  class="tag-pill"
+                >
+                  {{ tagLabel(slug) }}
+                </span>
+                <span v-if="!(channel.tagSlugs || []).length" class="tag-empty">—</span>
+              </div>
+            </td>
+            <td class="actions-cell">
+              <button class="link-btn" @click="openEditModal(channel)">Edit</button>
+              <button class="link-btn link-btn-danger" @click="deleteChannel(channel)">Delete</button>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <!-- Create / Edit Modal -->
+    <div v-if="showModal" class="modal-overlay" @click.self="closeModal">
+      <div class="modal">
+        <div class="modal-header">
+          <h2>{{ editingId ? 'Edit Channel' : 'New Channel' }}</h2>
+          <button class="modal-close" @click="closeModal">&times;</button>
+        </div>
+        <div class="modal-body">
+          <div class="field">
+            <label>Name</label>
+            <input v-model="formData.name" type="text" placeholder="e.g., #coop-formation" />
+          </div>
+          <div class="field">
+            <label>Slack Channel ID</label>
+            <input v-model="formData.slackChannelId" type="text" placeholder="C0123456789" />
+            <p class="help-text">The Slack channel ID (starts with C). Find it in channel settings.</p>
+          </div>
+          <div class="field">
+            <label>Mapped Tags</label>
+            <p class="help-text">Cooperative tags that route posts to this channel.</p>
+            <div class="tag-select">
+              <label
+                v-for="tag in cooperativeTags"
+                :key="tag.slug"
+                class="tag-checkbox"
+              >
+                <input
+                  type="checkbox"
+                  :value="tag.slug"
+                  :checked="formData.tagSlugs.includes(tag.slug)"
+                  @change="toggleTag(tag.slug)"
+                />
+                <span>{{ tag.label }}</span>
+              </label>
+              <p v-if="!cooperativeTags.length" class="help-text">No cooperative tags available.</p>
+            </div>
+          </div>
+        </div>
+        <div class="modal-actions">
+          <button class="btn" @click="closeModal">Cancel</button>
+          <button class="btn btn-primary" :disabled="saving" @click="saveChannel">
+            {{ saving ? 'Saving...' : (editingId ? 'Save Changes' : 'Create Channel') }}
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+definePageMeta({
+  layout: 'admin',
+  middleware: 'admin',
+})
+
+const toast = useToast()
+
+const { channels, fetchChannels } = useBoardChannels()
+
+const { data: tagsData } = await useFetch('/api/tags')
+
+const cooperativeTags = computed(() =>
+  (tagsData.value?.tags || []).filter((t) => t.pool === 'cooperative'),
+)
+
+const tagLabelMap = computed(() => {
+  const map = {}
+  for (const tag of tagsData.value?.tags || []) {
+    map[tag.slug] = tag.label
+  }
+  return map
+})
+
+const tagLabel = (slug) => tagLabelMap.value[slug] || slug
+
+const mappedSlugs = computed(() => {
+  const set = new Set()
+  for (const ch of channels.value) {
+    for (const slug of ch.tagSlugs || []) set.add(slug)
+  }
+  return set
+})
+
+const unmappedTags = computed(() =>
+  cooperativeTags.value.filter((t) => !mappedSlugs.value.has(t.slug)),
+)
+
+// ---- Modal State ----
+const showModal = ref(false)
+const editingId = ref(null)
+const saving = ref(false)
+const formData = reactive({
+  name: '',
+  slackChannelId: '',
+  tagSlugs: [],
+})
+
+const resetForm = () => {
+  formData.name = ''
+  formData.slackChannelId = ''
+  formData.tagSlugs = []
+}
+
+const openCreateModal = () => {
+  editingId.value = null
+  resetForm()
+  showModal.value = true
+}
+
+const openEditModal = (channel) => {
+  editingId.value = channel._id
+  formData.name = channel.name || ''
+  formData.slackChannelId = channel.slackChannelId || ''
+  formData.tagSlugs = [...(channel.tagSlugs || [])]
+  showModal.value = true
+}
+
+const closeModal = () => {
+  showModal.value = false
+  editingId.value = null
+  resetForm()
+}
+
+const toggleTag = (slug) => {
+  const idx = formData.tagSlugs.indexOf(slug)
+  if (idx === -1) formData.tagSlugs.push(slug)
+  else formData.tagSlugs.splice(idx, 1)
+}
+
+const saveChannel = async () => {
+  if (!formData.name.trim() || !formData.slackChannelId.trim()) {
+    toast.add({
+      title: 'Missing fields',
+      description: 'Name and Slack channel ID are required.',
+      color: 'red',
+    })
+    return
+  }
+
+  saving.value = true
+  try {
+    const body = {
+      name: formData.name.trim(),
+      slackChannelId: formData.slackChannelId.trim(),
+      tagSlugs: formData.tagSlugs,
+    }
+    if (editingId.value) {
+      await $fetch(`/api/admin/board-channels/${editingId.value}`, {
+        method: 'PATCH',
+        body,
+      })
+      toast.add({ title: 'Channel updated', color: 'green' })
+    } else {
+      await $fetch('/api/admin/board-channels', {
+        method: 'POST',
+        body,
+      })
+      toast.add({ title: 'Channel created', color: 'green' })
+    }
+    await fetchChannels()
+    closeModal()
+  } catch (err) {
+    toast.add({
+      title: 'Save failed',
+      description: err.data?.statusMessage || err.message,
+      color: 'red',
+    })
+  } finally {
+    saving.value = false
+  }
+}
+
+const deleteChannel = async (channel) => {
+  if (!window.confirm(`Delete channel "${channel.name}"? This cannot be undone.`)) return
+  try {
+    await $fetch(`/api/admin/board-channels/${channel._id}`, { method: 'DELETE' })
+    toast.add({ title: 'Channel deleted', color: 'green' })
+    await fetchChannels()
+  } catch (err) {
+    toast.add({
+      title: 'Delete failed',
+      description: err.data?.statusMessage || err.message,
+      color: 'red',
+    })
+  }
+}
+
+onMounted(() => {
+  fetchChannels()
+})
+</script>
+
+<style scoped>
+.admin-board-channels {
+  padding: 24px;
+  max-width: 1100px;
+}
+
+.page-header {
+  margin-bottom: 24px;
+  padding-bottom: 16px;
+  border-bottom: 1px dashed var(--border);
+}
+
+.header-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 16px;
+}
+
+.page-header h1 {
+  font-family: 'Brygada 1918', serif;
+  font-size: 28px;
+  margin-bottom: 4px;
+}
+
+.page-header p {
+  color: var(--text-dim);
+  font-size: 13px;
+}
+
+.header-actions {
+  display: flex;
+  gap: 8px;
+}
+
+/* ---- Unmapped Indicator ---- */
+.unmapped-block {
+  border: 1px dashed var(--border);
+  padding: 16px;
+  margin-bottom: 24px;
+  background: var(--surface);
+}
+
+.unmapped-hint {
+  font-size: 12px;
+  color: var(--text-dim);
+  margin: 4px 0 12px;
+}
+
+.section-label {
+  font-size: 10px;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--text-faint);
+  margin-bottom: 8px;
+}
+
+/* ---- Tag Pills ---- */
+.tag-pills {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.tag-pill {
+  display: inline-block;
+  padding: 2px 8px;
+  font-size: 11px;
+  background: var(--bg);
+  border: 1px solid var(--border);
+  color: var(--text);
+}
+
+.tag-pill-warning {
+  border-color: var(--ember);
+  color: var(--ember);
+}
+
+.tag-empty {
+  color: var(--text-faint);
+  font-size: 12px;
+}
+
+/* ---- Table ---- */
+.channels-list {
+  border: 1px dashed var(--border);
+  background: var(--bg);
+}
+
+.channels-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 13px;
+}
+
+.channels-table th,
+.channels-table td {
+  padding: 10px 14px;
+  text-align: left;
+  border-bottom: 1px dashed var(--border);
+  vertical-align: top;
+}
+
+.channels-table thead th {
+  font-size: 10px;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--text-faint);
+  font-weight: normal;
+  background: var(--surface);
+}
+
+.channels-table tbody tr:last-child td {
+  border-bottom: none;
+}
+
+.name-cell {
+  font-weight: 600;
+}
+
+.mono {
+  font-family: 'Commit Mono', monospace;
+  font-size: 12px;
+  color: var(--text-dim);
+}
+
+.actions-col {
+  width: 160px;
+}
+
+.actions-cell {
+  white-space: nowrap;
+}
+
+.link-btn {
+  background: none;
+  border: none;
+  color: var(--candle-dim);
+  font-size: 12px;
+  cursor: pointer;
+  padding: 2px 6px;
+  text-decoration: underline;
+}
+
+.link-btn:hover {
+  color: var(--candle);
+}
+
+.link-btn-danger {
+  color: var(--ember);
+}
+
+.link-btn-danger:hover {
+  color: var(--ember);
+}
+
+.empty-state {
+  padding: 40px 20px;
+  text-align: center;
+  color: var(--text-dim);
+}
+
+.empty-hint {
+  font-size: 12px;
+  color: var(--text-faint);
+  margin-top: 4px;
+}
+
+/* ---- Modal ---- */
+.modal-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 100;
+  padding: 20px;
+}
+
+.modal {
+  background: var(--bg);
+  border: 1px dashed var(--border);
+  width: 100%;
+  max-width: 520px;
+  max-height: 90vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.modal-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px 20px;
+  border-bottom: 1px dashed var(--border);
+}
+
+.modal-header h2 {
+  font-family: 'Brygada 1918', serif;
+  font-size: 20px;
+  margin: 0;
+}
+
+.modal-close {
+  background: none;
+  border: none;
+  font-size: 24px;
+  cursor: pointer;
+  color: var(--text-dim);
+  line-height: 1;
+}
+
+.modal-body {
+  padding: 20px;
+  overflow-y: auto;
+}
+
+.modal-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  padding: 16px 20px;
+  border-top: 1px dashed var(--border);
+}
+
+.field {
+  margin-bottom: 16px;
+}
+
+.field label {
+  display: block;
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--text-dim);
+  margin-bottom: 6px;
+}
+
+.field input {
+  width: 100%;
+  padding: 8px 10px;
+  background: var(--input-bg);
+  border: 1px solid var(--border);
+  font-family: inherit;
+  font-size: 13px;
+  color: var(--text);
+}
+
+.field input:focus {
+  outline: none;
+  border-color: var(--candle);
+}
+
+.help-text {
+  font-size: 11px;
+  color: var(--text-faint);
+  margin-top: 4px;
+}
+
+.tag-select {
+  border: 1px dashed var(--border);
+  padding: 10px;
+  max-height: 200px;
+  overflow-y: auto;
+  background: var(--input-bg);
+}
+
+.tag-checkbox {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 4px 0;
+  font-size: 13px;
+  cursor: pointer;
+}
+
+.tag-checkbox input {
+  margin: 0;
+}
+</style>