From 33d27c5d9e63eaec8ce2321dcbe6797ece0f470b Mon Sep 17 00:00:00 2001
From: Jennie Robinson Faber <jennie@jenniefaber.com>
Date: Tue, 14 Apr 2026 17:06:25 +0100
Subject: [PATCH] feat(board): BoardPostCard, BoardPostForm, simplify
 CooperativeTagSelector

---
 app/components/BoardPostCard.vue          | 245 ++++++++++++++++++++++
 app/components/BoardPostForm.vue          | 231 ++++++++++++++++++++
 app/components/CooperativeTagSelector.vue | 116 +++-------
 3 files changed, 507 insertions(+), 85 deletions(-)
 create mode 100644 app/components/BoardPostCard.vue
 create mode 100644 app/components/BoardPostForm.vue

diff --git a/app/components/BoardPostCard.vue b/app/components/BoardPostCard.vue
new file mode 100644
index 0000000..2af1d55
--- /dev/null
+++ b/app/components/BoardPostCard.vue
@@ -0,0 +1,245 @@
+<template>
+  <article class="board-post">
+    <header class="post-header">
+      <span class="type-indicator" :class="typeClass">{{ typeLabel }}</span>
+      <div v-if="editable" class="post-actions">
+        <button type="button" class="action-btn" @click="$emit('edit', post)">Edit</button>
+        <button type="button" class="action-btn danger" @click="$emit('delete', post)">Delete</button>
+      </div>
+    </header>
+
+    <h3 class="post-title">{{ post.title }}</h3>
+
+    <div v-if="post.seeking" class="post-block">
+      <div class="block-label">Seeking</div>
+      <p class="block-text">{{ post.seeking }}</p>
+    </div>
+
+    <div v-if="post.offering" class="post-block">
+      <div class="block-label">Offering</div>
+      <p class="block-text">{{ post.offering }}</p>
+    </div>
+
+    <p v-if="post.note" class="post-note">{{ post.note }}</p>
+
+    <div v-if="post.tags && post.tags.length" class="post-tags">
+      <span v-for="tag in post.tags" :key="tag" class="tag-pill">{{ tag }}</span>
+    </div>
+
+    <footer class="post-footer">
+      <div class="author">
+        <img
+          v-if="post.author && post.author.avatar"
+          :src="post.author.avatar"
+          :alt="post.author.name"
+          class="author-avatar"
+        >
+        <span v-else class="author-avatar avatar-placeholder" />
+        <span class="author-name">{{ post.author ? post.author.name : 'Unknown' }}</span>
+        <CircleBadge
+          v-if="post.author && post.author.circle"
+          :circle="post.author.circle"
+        />
+      </div>
+      <a
+        v-if="slackLink"
+        :href="slackLink"
+        target="_blank"
+        rel="noopener"
+        class="slack-link"
+      >Discuss on Slack &rarr;</a>
+    </footer>
+  </article>
+</template>
+
+<script setup>
+const props = defineProps({
+  post: { type: Object, required: true },
+  channels: { type: Array, default: () => [] },
+  editable: { type: Boolean, default: false },
+})
+
+defineEmits(['edit', 'delete'])
+
+const { resolveTagChannel, slackUrl } = useBoardChannels()
+
+const hasSeeking = computed(() => !!(props.post.seeking && props.post.seeking.trim()))
+const hasOffering = computed(() => !!(props.post.offering && props.post.offering.trim()))
+
+const typeLabel = computed(() => {
+  if (hasSeeking.value && hasOffering.value) return 'SEEKING + OFFERING'
+  if (hasSeeking.value) return 'SEEKING'
+  if (hasOffering.value) return 'OFFERING'
+  return ''
+})
+
+const typeClass = computed(() => {
+  if (hasSeeking.value && hasOffering.value) return 'type-both'
+  if (hasSeeking.value) return 'type-seeking'
+  if (hasOffering.value) return 'type-offering'
+  return ''
+})
+
+const slackLink = computed(() => {
+  const channel = resolveTagChannel(props.post.tags || [])
+  if (!channel) return null
+  return slackUrl(channel.slackChannelId)
+})
+</script>
+
+<style scoped>
+.board-post {
+  border: 1px dashed var(--border);
+  padding: 18px 22px;
+  transition: background 0.15s, border-color 0.15s;
+}
+.board-post:hover {
+  background: var(--surface);
+  border-color: var(--border-d);
+}
+
+.post-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 10px;
+}
+
+.type-indicator {
+  display: inline-block;
+  font-size: 10px;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  padding: 2px 8px;
+  border: 1px dashed;
+  font-family: "Commit Mono", monospace;
+}
+.type-indicator.type-seeking {
+  color: var(--candle);
+  border-color: var(--candle-faint);
+}
+.type-indicator.type-offering {
+  color: var(--green);
+  border-color: var(--green);
+}
+.type-indicator.type-both {
+  color: var(--ember);
+  border-color: var(--ember);
+}
+
+.post-actions {
+  display: flex;
+  gap: 6px;
+}
+.action-btn {
+  font-family: "Commit Mono", monospace;
+  font-size: 10px;
+  letter-spacing: 0.04em;
+  padding: 3px 9px;
+  border: 1px dashed var(--border);
+  background: transparent;
+  color: var(--text-dim);
+  cursor: pointer;
+  transition: all 0.12s;
+}
+.action-btn:hover {
+  color: var(--text-bright);
+  border-color: var(--border-d);
+}
+.action-btn.danger:hover {
+  color: var(--ember);
+  border-color: var(--ember);
+}
+
+.post-title {
+  font-family: "Brygada 1918", serif;
+  font-size: 20px;
+  font-weight: 500;
+  color: var(--text-bright);
+  margin-bottom: 10px;
+  line-height: 1.25;
+}
+
+.post-block {
+  margin-bottom: 10px;
+}
+.block-label {
+  font-size: 10px;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--text-faint);
+  margin-bottom: 2px;
+}
+.block-text {
+  font-size: 13px;
+  color: var(--text);
+  white-space: pre-wrap;
+}
+
+.post-note {
+  font-size: 11px;
+  color: var(--text-faint);
+  font-style: italic;
+  margin: 8px 0;
+  white-space: pre-wrap;
+}
+
+.post-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  margin: 10px 0;
+}
+.tag-pill {
+  display: inline-block;
+  font-size: 10px;
+  font-family: "Commit Mono", monospace;
+  color: var(--text-dim);
+  padding: 2px 8px;
+  border: 1px dashed var(--border);
+}
+
+.post-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 12px;
+  margin-top: 14px;
+  padding-top: 10px;
+  border-top: 1px dashed var(--border);
+}
+
+.author {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.author-avatar {
+  width: 20px;
+  height: 20px;
+  object-fit: cover;
+  border: 1px dashed var(--border);
+}
+.avatar-placeholder {
+  background: var(--surface);
+}
+.author-name {
+  font-size: 11px;
+  color: var(--text-dim);
+  font-family: "Commit Mono", monospace;
+}
+
+.slack-link {
+  font-size: 11px;
+  font-family: "Commit Mono", monospace;
+  color: var(--candle);
+  text-decoration: none;
+  border-bottom: 1px dashed var(--candle-faint);
+}
+.slack-link:hover {
+  color: var(--candle-dim);
+  text-decoration: none;
+  border-bottom-style: solid;
+}
+</style>
diff --git a/app/components/BoardPostForm.vue b/app/components/BoardPostForm.vue
new file mode 100644
index 0000000..2228572
--- /dev/null
+++ b/app/components/BoardPostForm.vue
@@ -0,0 +1,231 @@
+<template>
+  <form class="post-form" @submit.prevent="handleSubmit">
+    <div class="form-header">
+      <h3 class="form-title">{{ isEdit ? 'Edit post' : 'New post' }}</h3>
+    </div>
+
+    <div class="field">
+      <label for="post-title">Title</label>
+      <input
+        id="post-title"
+        v-model="form.title"
+        type="text"
+        maxlength="120"
+        placeholder="Short summary"
+      >
+      <div class="char-count">{{ form.title.length }}/120</div>
+    </div>
+
+    <div class="field">
+      <label for="post-seeking">Seeking</label>
+      <textarea
+        id="post-seeking"
+        v-model="form.seeking"
+        rows="3"
+        maxlength="500"
+        placeholder="What are you looking for?"
+      />
+      <div class="char-count">{{ form.seeking.length }}/500</div>
+    </div>
+
+    <div class="field">
+      <label for="post-offering">Offering</label>
+      <textarea
+        id="post-offering"
+        v-model="form.offering"
+        rows="3"
+        maxlength="500"
+        placeholder="What can you offer?"
+      />
+      <div class="char-count">{{ form.offering.length }}/500</div>
+    </div>
+
+    <div class="field">
+      <label for="post-note">Note (optional)</label>
+      <textarea
+        id="post-note"
+        v-model="form.note"
+        rows="2"
+        maxlength="300"
+        placeholder="Anything else to add?"
+      />
+      <div class="char-count">{{ form.note.length }}/300</div>
+    </div>
+
+    <div v-if="tags.length" class="field">
+      <label>Tags</label>
+      <div class="pill-grid">
+        <button
+          v-for="tag in tags"
+          :key="tag.slug"
+          type="button"
+          class="pill"
+          :class="{ selected: form.tags.includes(tag.slug) }"
+          @click="toggleTag(tag.slug)"
+        >{{ tag.label || tag.name || tag.slug }}</button>
+      </div>
+    </div>
+
+    <p v-if="error" class="form-error">{{ error }}</p>
+
+    <div class="form-actions">
+      <button type="button" class="btn" @click="$emit('cancel')">Cancel</button>
+      <button type="submit" class="btn btn-primary">
+        {{ isEdit ? 'Save changes' : 'Post' }}
+      </button>
+    </div>
+  </form>
+</template>
+
+<script setup>
+const props = defineProps({
+  post: { type: Object, default: null },
+  tags: { type: Array, default: () => [] },
+})
+
+const emit = defineEmits(['submit', 'cancel'])
+
+const isEdit = computed(() => !!props.post)
+
+const form = reactive({
+  title: props.post?.title || '',
+  seeking: props.post?.seeking || '',
+  offering: props.post?.offering || '',
+  note: props.post?.note || '',
+  tags: Array.isArray(props.post?.tags) ? [...props.post.tags] : [],
+})
+
+const error = ref('')
+
+function toggleTag(slug) {
+  const idx = form.tags.indexOf(slug)
+  if (idx === -1) form.tags.push(slug)
+  else form.tags.splice(idx, 1)
+}
+
+function handleSubmit() {
+  error.value = ''
+  const title = form.title.trim()
+  const seeking = form.seeking.trim()
+  const offering = form.offering.trim()
+
+  if (!title) {
+    error.value = 'Title is required.'
+    return
+  }
+  if (!seeking && !offering) {
+    error.value = 'Add at least one of Seeking or Offering.'
+    return
+  }
+
+  emit('submit', {
+    title,
+    seeking,
+    offering,
+    note: form.note.trim(),
+    tags: [...form.tags],
+  })
+}
+</script>
+
+<style scoped>
+.post-form {
+  border: 1px dashed var(--border);
+  padding: 20px 24px;
+  background: var(--bg);
+}
+
+.form-header {
+  margin-bottom: 14px;
+}
+.form-title {
+  font-family: "Brygada 1918", serif;
+  font-size: 18px;
+  font-weight: 500;
+  color: var(--text-bright);
+}
+
+.field {
+  margin-bottom: 12px;
+}
+.field label {
+  display: block;
+  font-size: 10px;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--text-faint);
+  margin-bottom: 3px;
+}
+.field input,
+.field textarea {
+  width: 100%;
+  padding: 5px 8px;
+  font-family: "Commit Mono", monospace;
+  font-size: 13px;
+  color: var(--text-bright);
+  background: var(--input-bg);
+  border: 1px solid var(--border);
+  outline: none;
+  resize: vertical;
+}
+.field input:focus,
+.field textarea:focus {
+  border-color: var(--candle);
+}
+
+.char-count {
+  font-size: 9px;
+  font-family: "Commit Mono", monospace;
+  color: var(--text-faint);
+  text-align: right;
+  margin-top: 2px;
+}
+
+.pill-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+.pill {
+  display: inline-flex;
+  align-items: center;
+  padding: 2px 9px;
+  border: 1px dashed var(--border);
+  background: transparent;
+  color: var(--text-faint);
+  font-size: 11px;
+  font-family: "Commit Mono", monospace;
+  cursor: pointer;
+  user-select: none;
+  transition: all 0.12s;
+  white-space: nowrap;
+}
+.pill:hover {
+  color: var(--text-dim);
+  border-color: var(--border-d);
+}
+.pill.selected {
+  background: var(--surface);
+  color: var(--text-bright);
+  border-color: var(--candle);
+  border-style: solid;
+}
+
+.form-error {
+  font-size: 11px;
+  color: var(--ember);
+  margin: 8px 0;
+  padding: 6px 10px;
+  border: 1px dashed var(--ember);
+  background: var(--ember-bg);
+}
+
+.form-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  margin-top: 14px;
+  padding-top: 12px;
+  border-top: 1px dashed var(--border);
+}
+</style>
diff --git a/app/components/CooperativeTagSelector.vue b/app/components/CooperativeTagSelector.vue
index 1772c9c..a182183 100644
--- a/app/components/CooperativeTagSelector.vue
+++ b/app/components/CooperativeTagSelector.vue
@@ -1,20 +1,14 @@
 <template>
   <div class="coop-tag-selector">
-    <div
-      v-for="tag in tags"
-      :key="tag.slug"
-      class="coop-row"
-    >
-      <span class="tag-label">{{ tag.label }}</span>
-      <div class="segmented">
-        <span
-          v-for="opt in options"
-          :key="opt.value"
-          class="seg-option"
-          :class="{ on: getState(tag.slug) === opt.value }"
-          @click="toggleState(tag.slug, opt.value)"
-        >{{ opt.label }}</span>
-      </div>
+    <div class="pill-grid">
+      <button
+        v-for="tag in tags"
+        :key="tag.slug"
+        type="button"
+        class="pill"
+        :class="{ selected: modelValue.includes(tag.slug) }"
+        @click="toggle(tag.slug)"
+      >{{ tag.label || tag.name || tag.slug }}</button>
     </div>
     <div class="suggest-link">
       <span @click="$emit('suggest')">Don't see what you're looking for?</span>
@@ -30,32 +24,15 @@ const props = defineProps({
 
 const emit = defineEmits(["update:modelValue", "suggest"]);
 
-const options = [
-  { label: "Can help", value: "help" },
-  { label: "Interested", value: "interested" },
-  { label: "Need help", value: "seeking" },
-];
-
-function getState(slug) {
-  const entry = props.modelValue.find((e) => e.tagSlug === slug);
-  return entry ? entry.state : null;
-}
-
-function toggleState(slug, value) {
+function toggle(slug) {
   const current = [...props.modelValue];
-  const idx = current.findIndex((e) => e.tagSlug === slug);
-  const existingState = idx !== -1 ? current[idx].state : null;
-
-  if (existingState === value) {
-    // clicking active state deselects it
-    if (idx !== -1) current.splice(idx, 1);
-  } else if (idx !== -1) {
-    current[idx] = { tagSlug: slug, state: value };
+  const idx = current.indexOf(slug);
+  if (idx === -1) {
+    emit("update:modelValue", [...current, slug]);
   } else {
-    current.push({ tagSlug: slug, state: value });
+    current.splice(idx, 1);
+    emit("update:modelValue", current);
   }
-
-  emit("update:modelValue", current);
 }
 </script>
 
@@ -63,78 +40,47 @@ function toggleState(slug, value) {
 .coop-tag-selector {
   display: flex;
   flex-direction: column;
-  gap: 0;
-}
-
-.coop-row {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
   gap: 8px;
-  padding: 4px 0;
-  border-bottom: 1px dashed var(--border);
 }
 
-.coop-row:first-child {
-  border-top: 1px dashed var(--border);
+.pill-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
 }
 
-.tag-label {
+.pill {
+  display: inline-flex;
+  align-items: center;
+  padding: 2px 9px;
+  border: 1px dashed var(--border);
+  background: transparent;
+  color: var(--text-faint);
   font-size: 11px;
   font-family: "Commit Mono", monospace;
-  color: var(--text-dim);
-  flex: 1;
-  min-width: 0;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.segmented {
-  display: inline-flex;
-  gap: 0;
-  flex-shrink: 0;
-}
-
-.seg-option {
-  padding: 2px 7px;
-  height: 18px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border: 1px dashed var(--border);
-  color: var(--text-faint);
-  font-size: 9px;
-  font-family: "Commit Mono", monospace;
-  letter-spacing: 0.02em;
   cursor: pointer;
-  transition: all 0.12s;
   user-select: none;
+  transition: all 0.12s;
   white-space: nowrap;
-  position: relative;
 }
 
-.seg-option + .seg-option {
-  margin-left: -1px;
-}
-
-.seg-option:hover {
+.pill:hover {
   color: var(--text-dim);
+  border-color: var(--border-d);
 }
 
-.seg-option.on {
+.pill.selected {
   background: var(--surface);
   color: var(--text-bright);
   border-color: var(--candle);
   border-style: solid;
-  z-index: 1;
 }
 
 .suggest-link {
   font-size: 10px;
   font-family: "Commit Mono", monospace;
   color: var(--text-faint);
-  margin-top: 8px;
+  margin-top: 2px;
 }
 
 .suggest-link span {