@blogmcp/community 0.2.0 → 0.3.0

package/src/ui/ForumModerationView.vue

@@ -0,0 +1,309 @@
+<script setup lang="ts">
+/**
+ * `<blogmcp-forum-moderation>` (m3-contracts.md §3.4, §4.2, §4.5, §5.3; D-M3-6): a category moderator's queue — the
+ * cases of category `rules` in their categories (a member's report, the filters' hold, the team's) and the messages
+ * waiting in pre-moderation. A case opens to its package as written (text only: no reporter, no note, no contact) and
+ * the decision through the engine — restore, hide or remove, with the facts and the rule it rests on —, its statement
+ * of reasons previewed first and decided after; an illegal line's matter passes to the team. A pre-moderated message
+ * is published (no statement: nothing was restricted) or refused (a rule and the facts: the statement comes back) —
+ * M3 FX (R3): of the text shown here (kb-api answers it with the queue, rendered as text): an edit by its author
+ * meanwhile shows the new text and asks again (`moderation.textChanged`). M3 FX2 (S12): a package item of an opening
+ * post whose opening post was deleted reads „Smazané téma" (kb-api's `openingState`, topicTitleOf).
+ * Renders nothing for a member who moderates nothing now (and for anyone the forum is not open to).
+ */
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import {
+  ESCALATION_CATEGORIES,
+  MODERATION_RESTRICTIONS,
+  hasCommunityMessage,
+  topicMessageLink,
+  topicTitleOf,
+  type CaseCategory,
+  type CommunityMessageKey,
+  type CommunityTransport,
+  type ModerationCaseItem,
+  type ModerationItem,
+  type ModerationRestriction,
+} from '@blogmcp/sdk/community'
+import { parseRoutes, routesWithDefaults } from '../core/attrs'
+import { communityClientFor, siteBaseFor } from '../core/client'
+import { formatDate } from '../core/format'
+import { documentLang, pickLang, type Lang } from '../core/i18n'
+import { createModeration, type ModerationController } from '../core/moderation'
+import { failureText } from '../core/outcomes'
+import { provideText, uid } from './context'
+
+defineOptions({ inheritAttrs: false })
+
+const props = defineProps<{
+  /** Narrow the queue to one of the moderator's categories (its id). */
+  categoryId?: string
+  apiBase?: string
+  siteBase?: string
+  lang?: string
+  routes?: string | Record<string, unknown>
+  transport?: CommunityTransport
+}>()
+
+const lang = ref<Lang>(pickLang(props.lang, documentLang()))
+const { t, text } = provideText(lang)
+const id = uid('bcm-moderation')
+watch(
+  () => props.lang,
+  (v) => {
+    lang.value = pickLang(v, documentLang())
+  },
+)
+
+const siteBase = siteBaseFor(props.siteBase)
+const client = siteBase === null ? null : communityClientFor(props.apiBase, props.transport, siteBase)
+const ctl: ModerationController | null = client ? createModeration({ client, lang: lang.value, categoryId: props.categoryId ?? null }) : null
+const state = ctl?.state ?? null
+const routes = computed(() => routesWithDefaults(parseRoutes(props.routes), state?.me?.links, siteBase ?? ''))
+
+/** An opening post's package item without its title: „Smazané téma" for a deleted opening post, the withheld wording otherwise (topicTitleOf). */
+function missingTitle(it: ModerationCaseItem): string {
+  const ti = topicTitleOf({ title: it.title ?? null, openingState: it.openingState })
+  return ti.kind === 'shown' ? ti.text : t(ti.kind === 'deleted' ? 'topic.deleted' : 'topic.withheld')
+}
+
+onMounted(() => void ctl?.load())
+onBeforeUnmount(() => ctl?.dispose())
+
+const RESTRICTIONS: readonly ModerationRestriction[] = MODERATION_RESTRICTIONS
+const restrictionKey = (r: ModerationRestriction): CommunityMessageKey => `restriction.${r}`
+const categoryKey = (c: CaseCategory): CommunityMessageKey => `category.${c}`
+const caseCategoryText = (c: string | null): string => {
+  const key = c === null ? null : `category.${c}`
+  return key !== null && hasCommunityMessage(key) ? t(key) : ''
+}
+const sourceText = (item: ModerationItem): string => {
+  const key = item.source === null ? null : `moderation.source.${item.source}`
+  return key !== null && hasCommunityMessage(key) ? t(key) : ''
+}
+const categoryName = (categoryId: string): string => state?.categories.find((c) => c.id.toLowerCase() === categoryId.toLowerCase())?.name ?? ''
+const ruleTitle = (ruleId: string | null): string => (ruleId === null ? '' : (state?.rules?.find((r) => r.id === ruleId)?.title ?? ruleId))
+const itemHref = (item: ModerationItem): string | null => topicMessageLink(routes.value.topicPath, item.conversationId, item.seq)
+const failureOf = (f: { code: Parameters<typeof failureText>[0]['code'] } | null | undefined): string => {
+  if (!f) return ''
+  const r = failureText(f, lang.value)
+  return t(r.key, r.params)
+}
+
+const open = computed(() => state?.open ?? null)
+const review = computed(() => state?.review ?? null)
+/** The rule select shows when the decision needs one chosen: kb-api asked, or the case names none for a restriction. */
+const ruleNeeded = computed(() => {
+  const c = open.value
+  return !!c && c.restriction !== '' && c.restriction !== 'no_action' && (c.needsRule || c.kase?.ruleId === null)
+})
+// A changed decision is a new one: its statement is previewed again before anything is decided.
+watch(
+  () => [open.value?.restriction, open.value?.facts, open.value?.ground] as const,
+  () => {
+    const c = open.value
+    if (c && !c.decided) c.preview = null
+  },
+)
+
+const liveText = ref('')
+watch(
+  () => state?.announceId,
+  () => {
+    liveText.value = ''
+    const next = text(state?.announcement)
+    void nextTick(() => {
+      liveText.value = next
+    })
+  },
+)
+</script>
+
+<template>
+  <section v-if="ctl && state && state.phase !== 'none' && state.phase !== 'hidden' && state.phase !== 'membersOnly'" class="bcm bcm-forum-moderation" :lang="lang" :aria-labelledby="`${id}-title`">
+    <header class="bcm-head">
+      <h2 :id="`${id}-title`">{{ t('moderation.title') }}</h2>
+    </header>
+
+    <p v-if="state.phase === 'loading'" class="bcm-muted" role="status">{{ t('moderation.loading') }}</p>
+    <div v-else-if="state.phase === 'failed'" class="bcm-banner" role="alert">
+      <span>{{ failureOf(state.failure) }}</span>
+      <button type="button" class="bcm-btn" @click="ctl.load()">{{ t('common.retry') }}</button>
+    </div>
+
+    <template v-else>
+      <div v-if="state.categories.length > 1" class="bcm-row">
+        <label :for="`${id}-category`">{{ t('search.category') }}</label>
+        <select :id="`${id}-category`" class="bcm-input bcm-select" :value="state.categoryId" @change="ctl.setCategory(($event.target as HTMLSelectElement).value)">
+          <option value="">{{ t('forum.allCategories') }}</option>
+          <option v-for="c in state.categories" :key="c.id" :value="c.id">{{ c.name }}</option>
+        </select>
+      </div>
+
+      <p v-if="state.items.length === 0" class="bcm-muted">{{ t('moderation.empty') }}</p>
+      <ul v-else class="bcm-list">
+        <li v-for="item in state.items" :key="`${item.kind}:${item.caseId ?? ''}:${item.conversationId}:${item.seq}`">
+          <p class="bcm-row">
+            <span class="bcm-badge">{{ item.kind === 'premod' ? t('moderation.premod') : sourceText(item) }}</span>
+            <strong v-if="item.kind === 'case' && caseCategoryText(item.caseCategory)">{{ caseCategoryText(item.caseCategory) }}</strong>
+            <span v-if="categoryName(item.categoryId)" class="bcm-muted">{{ categoryName(item.categoryId) }}</span>
+          </p>
+          <p v-if="item.caseStatus === 'decided'" class="bcm-hint">{{ t('moderation.heldBySystem') }}</p>
+          <!-- R3: a pre-moderated message's text (and an opening post's title), as written — rendered as text. -->
+          <template v-if="item.kind === 'premod'">
+            <p v-if="item.title" class="bcm-topic-title">{{ item.title }}</p>
+            <p v-if="item.body !== null" class="bcm-text">{{ item.body }}</p>
+          </template>
+          <p v-if="item.ruleId" class="bcm-muted">{{ t('statement.contractualGround') }}: {{ ruleTitle(item.ruleId) }}</p>
+          <p class="bcm-row bcm-muted">
+            <time :datetime="item.createdAt">{{ formatDate(lang, item.createdAt) }}</time>
+            <span v-if="item.deadlineAt">{{ t('moderation.deadline', { date: formatDate(lang, item.deadlineAt) }) }}</span>
+          </p>
+          <div class="bcm-row">
+            <a v-if="itemHref(item)" :href="itemHref(item) ?? undefined">{{ t('moderation.openTopic') }}</a>
+            <span class="bcm-spacer" />
+            <template v-if="item.kind === 'case'">
+              <button type="button" class="bcm-btn bcm-small" @click="ctl.openCase(item)">{{ t('moderation.open') }}</button>
+            </template>
+            <template v-else>
+              <button type="button" class="bcm-btn bcm-small" @click="ctl.openReview(item, 'approve')">{{ t('moderation.approve') }}</button>
+              <button type="button" class="bcm-btn bcm-small bcm-danger" @click="ctl.openReview(item, 'reject')">{{ t('moderation.reject') }}</button>
+            </template>
+          </div>
+        </li>
+      </ul>
+      <div v-if="state.nextCursor !== null" class="bcm-row">
+        <button type="button" class="bcm-btn" :disabled="state.loadingMore" @click="ctl.loadMore()">{{ t('discussion.loadMore') }}</button>
+      </div>
+
+      <!-- A case: its package as written, then the decision through the engine with its statement previewed. -->
+      <section v-if="open" class="bcm-card" :aria-labelledby="`${id}-case`">
+        <h3 :id="`${id}-case`">{{ t('moderation.package') }}</h3>
+        <p v-if="open.loading" class="bcm-muted" role="status">{{ t('common.loading') }}</p>
+        <ol v-else-if="open.kase" class="bcm-list">
+          <li v-for="it in open.kase.items" :key="it.itemNo">
+            <p v-if="it.title" class="bcm-topic-title">{{ it.title }}</p>
+            <!-- An opening post's item whose title kb-api withholds, or cleared with its deleted opening post (M3 FX2, S12: openingState): the title's own words. -->
+            <p v-else-if="it.title === null" class="bcm-topic-title bcm-placeholder">{{ missingTitle(it) }}</p>
+            <p v-if="it.body !== null" class="bcm-text">{{ it.body }}</p>
+            <!-- A message of the package beside the subject that others cannot see now: kb-api leaves its text out. -->
+            <p v-else class="bcm-placeholder">{{ t('moderation.itemWithheld') }}</p>
+            <p v-if="it.authorHandle || it.createdAt" class="bcm-row bcm-muted">
+              <span v-if="it.authorHandle" class="bcm-handle">{{ it.authorHandle }}</span>
+              <time v-if="it.createdAt" :datetime="it.createdAt">{{ formatDate(lang, it.createdAt) }}</time>
+            </p>
+          </li>
+        </ol>
+
+        <form v-if="open.kase && !open.decided" class="bcm-form" novalidate @submit.prevent="open.preview === null ? ctl.preview() : ctl.decide()">
+          <fieldset class="bcm-fieldset">
+            <legend>{{ t('moderation.restriction') }}</legend>
+            <label v-for="r in RESTRICTIONS" :key="r" class="bcm-check">
+              <input v-model="open.restriction" type="radio" :value="r" />
+              <span>{{ t(restrictionKey(r)) }}</span>
+            </label>
+          </fieldset>
+          <div class="bcm-field">
+            <label :for="`${id}-facts`">{{ t('statement.facts') }}</label>
+            <textarea :id="`${id}-facts`" v-model="open.facts" class="bcm-input bcm-textarea" rows="4" :aria-describedby="`${id}-facts-hint`" />
+            <p :id="`${id}-facts-hint`" class="bcm-hint">{{ t('moderation.factsHint') }}</p>
+          </div>
+          <div v-if="ruleNeeded || open.ground !== ''" class="bcm-field">
+            <label :for="`${id}-ground`">{{ t('statement.contractualGround') }}</label>
+            <select :id="`${id}-ground`" v-model="open.ground" class="bcm-input bcm-select" :aria-invalid="open.needsRule && open.ground === ''">
+              <option value="" disabled>{{ t('moderation.ruleRequired') }}</option>
+              <option v-for="r in state.rules ?? []" :key="r.id" :value="r.id">{{ r.title }}</option>
+            </select>
+          </div>
+          <p v-if="open.failure" class="bcm-error" role="alert">{{ open.needsRule ? t('moderation.ruleRequired') : failureOf(open.failure) }}</p>
+          <template v-if="open.preview !== null">
+            <h4>{{ t('moderation.previewTitle') }}</h4>
+            <pre class="bcm-facts">{{ open.preview }}</pre>
+          </template>
+          <div class="bcm-row">
+            <button type="button" class="bcm-btn" @click="ctl.closeCase()">{{ t('common.close') }}</button>
+            <span class="bcm-spacer" />
+            <button v-if="open.preview === null" type="submit" class="bcm-btn" :disabled="!ctl.canPreview()">{{ t('moderation.preview') }}</button>
+            <button v-else type="submit" class="bcm-btn bcm-primary" :disabled="open.deciding">{{ t('moderation.decide') }}</button>
+          </div>
+        </form>
+        <template v-else-if="open.decided">
+          <p>{{ t('moderation.decided') }}</p>
+          <h4>{{ t('statement.title') }}</h4>
+          <pre class="bcm-facts">{{ open.preview }}</pre>
+          <div class="bcm-row">
+            <button type="button" class="bcm-btn" @click="ctl.closeCase()">{{ t('common.close') }}</button>
+          </div>
+        </template>
+
+        <!-- An illegal line's matter: to the team (the moderator sees nothing of it afterwards). -->
+        <div v-if="open.kase && !open.decided" class="bcm-section">
+          <button v-if="!open.escalation" type="button" class="bcm-link" @click="ctl.startEscalation()">{{ t('moderation.escalate') }}</button>
+          <form v-else-if="!open.escalation.done" class="bcm-form" novalidate @submit.prevent="ctl.escalate()">
+            <p>{{ t('moderation.escalateLede') }}</p>
+            <div class="bcm-field">
+              <label :for="`${id}-escalate`">{{ t('moderation.escalateCategory') }}</label>
+              <select :id="`${id}-escalate`" v-model="open.escalation.category" class="bcm-input bcm-select">
+                <option value="" disabled>{{ t('moderation.escalateCategory') }}</option>
+                <option v-for="c in ESCALATION_CATEGORIES" :key="c" :value="c">{{ t(categoryKey(c)) }}</option>
+              </select>
+            </div>
+            <p v-if="open.escalation.failure" class="bcm-error" role="alert">{{ failureOf(open.escalation.failure) }}</p>
+            <div class="bcm-row">
+              <button type="submit" class="bcm-btn" :disabled="open.escalation.category === '' || open.escalation.sending">{{ t('moderation.escalate') }}</button>
+            </div>
+          </form>
+          <p v-else>{{ t('moderation.escalated') }}</p>
+        </div>
+      </section>
+
+      <!-- A pre-moderated message: published without a statement, or refused with one. -->
+      <section v-if="review" class="bcm-card" :aria-labelledby="`${id}-review`">
+        <h3 :id="`${id}-review`">{{ review.outcome === 'approve' ? t('moderation.approve') : t('moderation.reject') }}</h3>
+        <template v-if="review.done">
+          <p>{{ review.done === 'approved' ? t('moderation.approved') : t('moderation.rejected') }}</p>
+          <pre v-if="review.statement" class="bcm-facts">{{ review.statement }}</pre>
+          <div class="bcm-row">
+            <button type="button" class="bcm-btn" @click="ctl.closeReview()">{{ t('common.close') }}</button>
+          </div>
+        </template>
+        <form v-else class="bcm-form" novalidate @submit.prevent="ctl.review()">
+          <!-- R3: the text the decision is about; an edit by its author meanwhile brings the new one. -->
+          <p v-if="review.changed" class="bcm-banner" role="alert">{{ t('moderation.textChanged') }}</p>
+          <p v-if="review.item.title" class="bcm-topic-title">{{ review.item.title }}</p>
+          <p v-if="review.item.body !== null" class="bcm-text">{{ review.item.body }}</p>
+          <template v-if="review.outcome === 'reject'">
+            <div class="bcm-field">
+              <label :for="`${id}-review-rule`">{{ t('statement.contractualGround') }}</label>
+              <select :id="`${id}-review-rule`" v-model="review.ruleId" class="bcm-input bcm-select">
+                <option value="" disabled>{{ t('moderation.ruleRequired') }}</option>
+                <option v-for="r in state.rules ?? []" :key="r.id" :value="r.id">{{ r.title }}</option>
+              </select>
+            </div>
+            <div class="bcm-field">
+              <label :for="`${id}-review-facts`">{{ t('statement.facts') }}</label>
+              <textarea :id="`${id}-review-facts`" v-model="review.facts" class="bcm-input bcm-textarea" rows="4" :aria-describedby="`${id}-review-hint`" />
+              <p :id="`${id}-review-hint`" class="bcm-hint">{{ t('moderation.factsHint') }}</p>
+            </div>
+          </template>
+          <p v-if="review.failure" class="bcm-error" role="alert">{{ failureOf(review.failure) }}</p>
+          <div class="bcm-row">
+            <button type="button" class="bcm-btn" :disabled="review.sending" @click="ctl.closeReview()">{{ t('common.cancel') }}</button>
+            <span class="bcm-spacer" />
+            <button
+              type="submit"
+              class="bcm-btn bcm-primary"
+              :class="{ 'bcm-danger': review.outcome === 'reject' }"
+              :disabled="review.sending || (review.outcome === 'reject' && (review.ruleId === '' || review.facts.trim() === ''))"
+            >
+              {{ review.outcome === 'approve' ? t('moderation.approve') : t('moderation.reject') }}
+            </button>
+          </div>
+        </form>
+      </section>
+    </template>
+
+    <!-- The one live region: a decision, an escalation or a review is announced here once (their lines carry no role). -->
+    <p class="bcm-sr" aria-live="polite">{{ liveText }}</p>
+  </section>
+</template>

package/src/ui/ForumNotices.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+/**
+ * The forum's notices from `me/get` (m3-contracts.md §4.8, §4.9; D-M3-9): the team's away mode in one sentence
+ * („Tým je teď nepřítomen; nová témata počkají na kontrolu."), and the pause of the forum's writes — the module's brake
+ * or the forum's own (the article discussions go on under the latter) — or the module's `read_only`. Reading goes on.
+ */
+import { computed } from 'vue'
+import type { MyState } from '@blogmcp/sdk/community'
+import { forumNoticesOf, pausedKey } from '../core/forum-state'
+import { useText } from './context'
+
+const props = defineProps<{ me: MyState | null; now?: number }>()
+const { t } = useText()
+
+const notices = computed(() => forumNoticesOf(props.me, props.now))
+const paused = computed(() => pausedKey(notices.value.paused))
+</script>
+
+<template>
+  <p v-if="paused" class="bcm-note" role="status">{{ t(paused) }}</p>
+  <p v-else-if="notices.readOnly" class="bcm-note" role="status">{{ t('error.readOnly') }}</p>
+  <p v-if="notices.away" class="bcm-note" role="status">{{ t('state.away') }}</p>
+</template>

package/src/ui/ForumSearchView.vue

@@ -0,0 +1,171 @@
+<script setup lang="ts">
+/**
+ * `<blogmcp-forum-search>` (m3-contracts.md §3.2, §4.4, §5.3; D-M3-5): the forum's search for its members — a query of
+ * 2 to 200 characters (said before it goes: kb-api would refuse it and spend the quota), the space (the forum, the
+ * article discussions or both) and a category to narrow by; 20 hits a page, five pages at most. A hit reads as text:
+ * a topic's title or a message's snippet (at most 200 characters, no markup), linked to the topic (a message by its
+ * anchor) — an article discussion's hit to its message on the article (the host's `articlePath` with kb-api's
+ * `articleSlug`, the wave 2 integration; a host without `articlePath` keeps it text); a topic's title reads as on a
+ * category's row (topicTitleOf — M3 FX2, S12: „Smazané téma" for a hit under a deleted opening post, kb-api's
+ * `openingState`; the withheld wording for a title kept from the viewer). The forum's search box brings the query in
+ * the page's fragment (`#q=…`), which never reaches a server; a new `#q=` on the same page searches again.
+ */
+import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import {
+  COMMUNITY_SEARCH_PAGES_MAX,
+  COMMUNITY_SEARCH_QUERY_MAX,
+  COMMUNITY_SEARCH_QUERY_MIN,
+  communityMessageLink,
+  topicMessageLink,
+  topicPath,
+  topicTitleOf,
+  type CommunityTransport,
+  type ForumSearchResult,
+} from '@blogmcp/sdk/community'
+import { parseRoutes, routesWithDefaults } from '../core/attrs'
+import { communityClientFor, siteBaseFor } from '../core/client'
+import { createSearch, queryFromHash, type SearchController } from '../core/forum-search'
+import { formatDate } from '../core/format'
+import { documentLang, pickLang, type Lang } from '../core/i18n'
+import { failureText } from '../core/outcomes'
+import MembersOnly from './MembersOnly.vue'
+import { provideText, uid } from './context'
+
+defineOptions({ inheritAttrs: false })
+
+const props = defineProps<{
+  apiBase?: string
+  siteBase?: string
+  lang?: string
+  routes?: string | Record<string, unknown>
+  signInHref?: string
+  transport?: CommunityTransport
+}>()
+
+const lang = ref<Lang>(pickLang(props.lang, documentLang()))
+const { t } = provideText(lang)
+const id = uid('bcm-search')
+watch(
+  () => props.lang,
+  (v) => {
+    lang.value = pickLang(v, documentLang())
+  },
+)
+
+const siteBase = siteBaseFor(props.siteBase)
+const client = siteBase === null ? null : communityClientFor(props.apiBase, props.transport, siteBase)
+const ctl: SearchController | null = client ? createSearch({ client, query: queryFromHash(typeof location === 'undefined' ? null : location.hash) }) : null
+const state = ctl?.state ?? null
+const routes = computed(() => routesWithDefaults(parseRoutes(props.routes), null, siteBase ?? ''))
+
+// A new `#q=` on the same page (the forum's search box there, the history's back and forward) is a new search.
+function onHashChange(): void {
+  const q = queryFromHash(location.hash)
+  if (!ctl || !state || q === null || q === state.query) return
+  state.query = q
+  void ctl.search()
+}
+onMounted(() => {
+  void ctl?.load()
+  if (typeof window !== 'undefined') window.addEventListener('hashchange', onHashChange)
+})
+onBeforeUnmount(() => {
+  if (typeof window !== 'undefined') window.removeEventListener('hashchange', onHashChange)
+  ctl?.dispose()
+})
+
+/** A hit's link: the topic (a message by its anchor), or an article discussion's message on its article. */
+function hrefOf(r: ForumSearchResult): string | null {
+  if (r.space === 'article') return communityMessageLink(routes.value.articlePath, r.articleSlug, r.seq)
+  if (r.space !== 'forum') return null
+  return r.seq !== null && r.kind === 'message' ? topicMessageLink(routes.value.topicPath, r.conversationId, r.seq) : topicPath(routes.value.topicPath, r.conversationId)
+}
+/** A hit's title: a topic's as topicTitleOf reads it (shown, deleted, withheld); an article discussion's, its article's. */
+function titleOf(r: ForumSearchResult): string {
+  if (r.space === 'forum') {
+    const ti = topicTitleOf(r)
+    return ti.kind === 'shown' ? ti.text : t(ti.kind === 'deleted' ? 'topic.deleted' : 'topic.withheld')
+  }
+  return r.title !== null && r.title.trim() !== '' ? r.title : t('search.inArticle')
+}
+const failure = computed(() => {
+  const f = state?.failure
+  if (!f) return ''
+  const r = failureText(f, lang.value)
+  return t(r.key, r.params)
+})
+const lastPage = computed(() => !!state && state.phase === 'ready' && state.page >= COMMUNITY_SEARCH_PAGES_MAX && state.results.length > 0)
+</script>
+
+<template>
+  <section v-if="ctl && state && state.phase !== 'hidden'" class="bcm bcm-forum-search" :lang="lang" :aria-labelledby="`${id}-title`">
+    <header class="bcm-head">
+      <h2 :id="`${id}-title`">{{ t('search.title') }}</h2>
+    </header>
+
+    <MembersOnly
+      v-if="state.phase === 'membersOnly' && client"
+      :failure="state.failure"
+      :client="client"
+      :lang="lang"
+      :sign-in-href="signInHref"
+      :rules-href="routes.rulesPath"
+      @joined="ctl.load()"
+    />
+
+    <!-- An element, not a fragment: it holds a form (see ForumView). -->
+    <div v-else class="bcm-search-body">
+      <form class="bcm-form" role="search" novalidate @submit.prevent="ctl.search()">
+        <div class="bcm-field">
+          <label :for="`${id}-q`">{{ t('search.label') }}</label>
+          <input :id="`${id}-q`" v-model="state.query" class="bcm-input" type="search" :aria-invalid="state.invalid !== null" :aria-describedby="`${id}-q-error`" />
+          <p v-if="state.invalid" :id="`${id}-q-error`" class="bcm-error" role="alert">
+            {{ state.invalid === 'short' ? t('search.tooShort', { min: COMMUNITY_SEARCH_QUERY_MIN }) : t('search.tooLong', { max: COMMUNITY_SEARCH_QUERY_MAX }) }}
+          </p>
+        </div>
+        <div class="bcm-row">
+          <label :for="`${id}-space`">{{ t('search.space') }}</label>
+          <select :id="`${id}-space`" v-model="state.space" class="bcm-input bcm-select">
+            <option value="">{{ t('search.spaceAll') }}</option>
+            <option value="forum">{{ t('search.spaceForum') }}</option>
+            <option value="article">{{ t('search.spaceArticle') }}</option>
+          </select>
+          <template v-if="state.categories.length > 0 && state.space !== 'article'">
+            <label :for="`${id}-category`">{{ t('search.category') }}</label>
+            <select :id="`${id}-category`" v-model="state.categoryId" class="bcm-input bcm-select">
+              <option value="">{{ t('forum.allCategories') }}</option>
+              <option v-for="c in state.categories" :key="c.id" :value="c.id">{{ c.name }}</option>
+            </select>
+          </template>
+          <button type="submit" class="bcm-btn bcm-primary" :disabled="state.phase === 'searching'">{{ t('search.submit') }}</button>
+        </div>
+      </form>
+
+      <p v-if="state.phase === 'searching'" class="bcm-muted" role="status">{{ t('search.searching') }}</p>
+      <div v-else-if="state.phase === 'failed'" class="bcm-banner" role="alert">
+        <span>{{ failure }}</span>
+      </div>
+      <template v-else-if="state.phase === 'ready'">
+        <p v-if="state.results.length === 0" class="bcm-muted" role="status">{{ t('search.empty') }}</p>
+        <ol v-else class="bcm-list">
+          <li v-for="(r, i) in state.results" :key="`${r.conversationId}:${r.seq ?? 0}:${i}`">
+            <p class="bcm-row bcm-muted">
+              <span class="bcm-badge">{{ r.kind === 'topic' ? t('search.topic') : t('search.message') }}</span>
+              <time :datetime="r.createdAt">{{ formatDate(lang, r.createdAt) }}</time>
+            </p>
+            <p class="bcm-topic-title">
+              <a v-if="hrefOf(r)" :href="hrefOf(r) ?? undefined" :class="{ 'bcm-placeholder': r.title === null }">{{ titleOf(r) }}</a>
+              <span v-else :class="{ 'bcm-placeholder': r.title === null }">{{ titleOf(r) }}</span>
+            </p>
+            <p v-if="r.snippet" class="bcm-text">{{ r.snippet }}</p>
+          </li>
+        </ol>
+        <p v-if="state.failure" class="bcm-error" role="alert">{{ failure }}</p>
+        <div v-if="state.hasMore" class="bcm-row">
+          <button type="button" class="bcm-btn" :disabled="state.loadingMore" @click="ctl.more()">{{ t('search.more') }}</button>
+        </div>
+        <p v-else-if="lastPage" class="bcm-hint">{{ t('search.lastPage') }}</p>
+      </template>
+    </div>
+  </section>
+</template>

package/src/ui/ForumView.vue

@@ -0,0 +1,128 @@
+<script setup lang="ts">
+/**
+ * `<blogmcp-forum>` (m3-contracts.md §5.3): the forum's index — the listed categories in the team's order, each with its
+ * description, how many topics (in „Články": article discussions) another member sees there, its last activity and its
+ * latest topics, and the search box (it opens the search page with the query in the fragment: `#q=…` never reaches a
+ * server). The forum is for its members: anyone else reads one sentence and the way in; a forum switched off renders
+ * nothing. Away mode and the forum's pause read one sentence each.
+ */
+import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import { COMMUNITY_SEARCH_QUERY_MIN, categoryPath, type CommunityTransport, type ForumCategory } from '@blogmcp/sdk/community'
+import { parseRoutes, routesWithDefaults } from '../core/attrs'
+import { communityClientFor, siteBaseFor } from '../core/client'
+import { createForum, type ForumController } from '../core/forum'
+import { searchLink } from '../core/forum-search'
+import { formatDate } from '../core/format'
+import { documentLang, pickLang, type Lang } from '../core/i18n'
+import { failureText } from '../core/outcomes'
+import ForumNotices from './ForumNotices.vue'
+import MembersOnly from './MembersOnly.vue'
+import TopicRow from './TopicRow.vue'
+import { provideText, uid } from './context'
+
+defineOptions({ inheritAttrs: false })
+
+const props = defineProps<{
+  apiBase?: string
+  siteBase?: string
+  lang?: string
+  /** JSON (or an object): the host's pages — `forumPath`, `categoryPath`, `topicPath`, `searchPath`, `rulesPath`, … */
+  routes?: string | Record<string, unknown>
+  signInHref?: string
+  transport?: CommunityTransport
+}>()
+
+const lang = ref<Lang>(pickLang(props.lang, documentLang()))
+const { t } = provideText(lang)
+const id = uid('bcm-forum')
+
+const siteBase = siteBaseFor(props.siteBase)
+const client = siteBase === null ? null : communityClientFor(props.apiBase, props.transport, siteBase)
+const ctl: ForumController | null = client ? createForum({ client }) : null
+const state = ctl?.state ?? null
+const routes = computed(() => routesWithDefaults(parseRoutes(props.routes), state?.me?.links, siteBase ?? ''))
+
+onMounted(() => void ctl?.load())
+onBeforeUnmount(() => ctl?.dispose())
+watch(
+  () => props.lang,
+  (v) => {
+    lang.value = pickLang(v, documentLang())
+  },
+)
+
+const query = ref('')
+const queryShort = ref(false)
+function search(): void {
+  const href = searchLink(routes.value.searchPath, query.value)
+  queryShort.value = href === null
+  if (href !== null && typeof location !== 'undefined') location.assign(href)
+}
+
+const failure = computed(() => {
+  const f = state?.failure
+  if (!f) return ''
+  const r = failureText(f, lang.value)
+  return t(r.key, r.params)
+})
+const countText = (c: ForumCategory): string =>
+  c.kind === 'article_discussions' ? t('forum.discussionCount', { count: c.topicCount }) : t('forum.topicCount', { count: c.topicCount })
+</script>
+
+<template>
+  <section v-if="ctl && state && state.phase !== 'hidden'" class="bcm bcm-forum" :lang="lang" :aria-labelledby="`${id}-title`">
+    <header class="bcm-head">
+      <h2 :id="`${id}-title`">{{ t('forum.title') }}</h2>
+    </header>
+
+    <p v-if="state.phase === 'loading'" class="bcm-muted" role="status">{{ t('forum.loading') }}</p>
+    <MembersOnly
+      v-else-if="state.phase === 'membersOnly' && client"
+      :failure="state.failure"
+      :client="client"
+      :lang="lang"
+      :sign-in-href="signInHref"
+      :rules-href="routes.rulesPath"
+      @joined="ctl.load()"
+    />
+    <div v-else-if="state.phase === 'failed'" class="bcm-banner" role="alert">
+      <span>{{ failure }}</span>
+      <button type="button" class="bcm-btn" @click="ctl.load()">{{ t('common.retry') }}</button>
+    </div>
+
+    <!-- An element, not a fragment: it holds a form, and happy-dom (the specs) answers a form's nextSibling with null,
+         which a fragment's removal walks. -->
+    <div v-else-if="state.phase === 'ready'" class="bcm-forum-body">
+      <ForumNotices :me="state.me" />
+
+      <form class="bcm-row" role="search" @submit.prevent="search">
+        <label :for="`${id}-q`" class="bcm-sr">{{ t('forum.search') }}</label>
+        <input :id="`${id}-q`" v-model="query" class="bcm-input bcm-grow" type="search" :placeholder="t('forum.search')" />
+        <button type="submit" class="bcm-btn">{{ t('forum.searchSubmit') }}</button>
+        <p v-if="queryShort" class="bcm-error bcm-full" role="alert">{{ t('search.tooShort', { min: COMMUNITY_SEARCH_QUERY_MIN }) }}</p>
+      </form>
+
+      <p v-if="state.categories.length === 0" class="bcm-muted">{{ t('forum.empty') }}</p>
+      <ul v-else class="bcm-list">
+        <li v-for="c in state.categories" :key="c.id" class="bcm-category">
+          <h3>
+            <a v-if="categoryPath(routes.categoryPath, c.slug)" :href="categoryPath(routes.categoryPath, c.slug) ?? undefined">{{ c.name }}</a>
+            <template v-else>{{ c.name }}</template>
+          </h3>
+          <p v-if="c.description" class="bcm-text">{{ c.description }}</p>
+          <p class="bcm-row bcm-muted">
+            <span>{{ countText(c) }}</span>
+            <time v-if="c.lastActivityAt" :datetime="c.lastActivityAt">{{ t('forum.lastActivity', { date: formatDate(lang, c.lastActivityAt) }) }}</time>
+          </p>
+          <p v-if="c.mode === 'pre'" class="bcm-hint">{{ t('forum.modePre') }}</p>
+          <ul v-if="state.latest[c.id]?.length" class="bcm-topics" :aria-label="t('forum.latest')">
+            <TopicRow v-for="item in state.latest[c.id]" :key="item.conversationId" :item="item" :topic-href="routes.topicPath" :article-href="routes.articlePath" />
+          </ul>
+          <p v-if="categoryPath(routes.categoryPath, c.slug)">
+            <a :href="categoryPath(routes.categoryPath, c.slug) ?? undefined">{{ t('forum.allTopics') }}</a>
+          </p>
+        </li>
+      </ul>
+    </div>
+  </section>
+</template>