@blogmcp/community 0.1.0 → 0.3.0

package/src/ui/FollowToggle.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+/**
+ * The follow button (m3-contracts.md §3.3, §4.3; B16): a toggle — „Sledovat", or pressed „Sledujete" — over a follow
+ * controller. A follow kb-api refuses as `notFound` (the member may not read the target now) says „not available" once
+ * and offers nothing more; an unfollow never fails on its target. Nothing for a viewer who cannot follow (a visitor), or
+ * while the state is not known.
+ */
+import { ref, watch } from 'vue'
+import type { FollowController } from '../core/follow'
+import { useText } from './context'
+
+const props = defineProps<{ ctl: FollowController }>()
+const { t, text } = useText()
+
+const live = ref('')
+watch(
+  () => props.ctl.state.announceId,
+  () => {
+    live.value = text(props.ctl.state.announcement)
+  },
+)
+</script>
+
+<template>
+  <span class="bcm-follow">
+    <button
+      v-if="ctl.state.phase === 'ready'"
+      type="button"
+      class="bcm-btn bcm-small"
+      :aria-pressed="ctl.state.following"
+      :disabled="ctl.state.busy"
+      @click="ctl.toggle()"
+    >
+      {{ ctl.state.following ? t('follow.following') : t('follow.follow') }}
+    </button>
+    <span v-else-if="ctl.state.phase === 'unavailable'" class="bcm-muted">{{ t('follow.unavailable') }}</span>
+    <span class="bcm-sr" aria-live="polite">{{ live }}</span>
+  </span>
+</template>

package/src/ui/ForumCategoryView.vue

@@ -0,0 +1,243 @@
+<script setup lang="ts">
+/**
+ * `<blogmcp-forum-category slug>` (m3-contracts.md §3.2, §3.3, §5.3): a category's page — its name, description and
+ * follow button, its topics in the activity or the newest order (pinned first, archived last; „load more" with the
+ * forum's cursor) and, where the category takes topics from members, the new-topic composer: the title and the opening
+ * post, with the link to the rules every composer carries (B21). A topic waiting for review says so and shows in the
+ * list to its author („čeká na kontrolu"). In „Články" the rows are the article discussions, each with its follow
+ * button. The element dispatches `bcm-topic-created` (`{ conversationId, state }`) when the member opens a topic.
+ */
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, shallowRef, useHost, watch } from 'vue'
+import {
+  followKeyOf,
+  topicPath,
+  type CommunityTransport,
+  type ForumSort,
+  type KnownTopicItem,
+} from '@blogmcp/sdk/community'
+import { parseRoutes, routesWithDefaults } from '../core/attrs'
+import { communityClientFor, siteBaseFor, warnOnce } from '../core/client'
+import { createCategory, type CategoryController } from '../core/forum-category'
+import { createFollow, type FollowController } from '../core/follow'
+import { forumNoticesOf, pausedKey } from '../core/forum-state'
+import { FORUM_WORDS } from '../core/forum-words'
+import { documentLang, pickLang, type Lang } from '../core/i18n'
+import { failureText } from '../core/outcomes'
+import FollowToggle from './FollowToggle.vue'
+import ForumNotices from './ForumNotices.vue'
+import MembersOnly from './MembersOnly.vue'
+import MessageComposer from './MessageComposer.vue'
+import OnboardingSteps from './OnboardingSteps.vue'
+import TopicRow from './TopicRow.vue'
+import { provideText, uid } from './context'
+
+defineOptions({ inheritAttrs: false })
+
+const props = defineProps<{
+  /** The category's slug (`les-a-sber`). */
+  slug?: string
+  apiBase?: string
+  siteBase?: string
+  lang?: string
+  routes?: string | Record<string, unknown>
+  signInHref?: string
+  transport?: CommunityTransport
+}>()
+
+const host = useHost()
+const lang = ref<Lang>(pickLang(props.lang, documentLang()))
+// The new topic's composer reads the forum's words („příspěvek", not „komentář").
+const { t, text } = provideText(lang, FORUM_WORDS)
+const id = uid('bcm-category')
+
+const siteBase = siteBaseFor(props.siteBase)
+const client = siteBase === null ? null : communityClientFor(props.apiBase, props.transport, siteBase)
+
+function create(): CategoryController | null {
+  const slug = props.slug?.trim()
+  if (!slug) {
+    warnOnce('category-slug', '[blogmcp-community] <blogmcp-forum-category> needs a slug')
+    return null
+  }
+  if (!client) return null
+  return createCategory({
+    client,
+    slug,
+    lang: lang.value,
+    onCreated: (topic) =>
+      host?.dispatchEvent(new CustomEvent('bcm-topic-created', { detail: { conversationId: topic.conversationId, state: topic.held ? 'held' : 'visible' }, bubbles: true, composed: true })),
+  })
+}
+
+// A shallow ref: the controller's own refs (its onboarding) stay refs, as the discussion's do.
+const ctl = shallowRef<CategoryController | null>(null)
+const state = computed(() => ctl.value?.state ?? null)
+const routes = computed(() => routesWithDefaults(parseRoutes(props.routes), state.value?.me?.links, siteBase ?? ''))
+
+/** The category's follow button, and one per article discussion of „Články" (by its conversation). */
+const categoryFollow = shallowRef<FollowController | null>(null)
+// Not reactive: a row's button is made while the list renders (its state is reactive by itself).
+const rowFollows = new Map<string, FollowController>()
+
+function disposeFollows(): void {
+  categoryFollow.value?.dispose()
+  categoryFollow.value = null
+  for (const f of rowFollows.values()) f.dispose()
+  rowFollows.clear()
+}
+
+function start(): void {
+  ctl.value?.dispose()
+  disposeFollows()
+  ctl.value = create()
+  void ctl.value?.load()
+}
+
+onMounted(start)
+watch(() => [props.slug, lang.value] as const, start)
+watch(
+  () => props.lang,
+  (v) => {
+    lang.value = pickLang(v, documentLang())
+  },
+)
+onBeforeUnmount(() => {
+  ctl.value?.dispose()
+  disposeFollows()
+})
+
+// The follow buttons follow what the answers say.
+watch(
+  () => state.value?.category,
+  (category) => {
+    if (!category || !client) return
+    if (!categoryFollow.value) categoryFollow.value = createFollow({ client, target: { categoryId: category.id }, lang: lang.value })
+    if (categoryFollow.value.state.phase === 'idle') void categoryFollow.value.load(category.following)
+    else categoryFollow.value.sync(category.following)
+  },
+)
+// An article discussion's button is made when its row arrives (before the list renders: a pre-flush watcher).
+watch(
+  () => state.value?.items,
+  (items) => {
+    if (!items || !client) return
+    for (const item of items) {
+      if (item.kind !== 'article') continue
+      const key = followKeyOf({ conversationId: item.conversationId })
+      if (key === null || rowFollows.has(key)) continue
+      const f = createFollow({ client, target: { conversationId: item.conversationId }, lang: lang.value })
+      rowFollows.set(key, f)
+      void f.load(item.following)
+    }
+  },
+)
+function rowFollow(item: KnownTopicItem): FollowController | null {
+  if (item.kind !== 'article') return null
+  const key = followKeyOf({ conversationId: item.conversationId })
+  return key === null ? null : (rowFollows.get(key) ?? null)
+}
+
+const name = computed(() => state.value?.category?.name ?? state.value?.header?.name ?? '')
+const isArticles = computed(() => (state.value?.category?.kind ?? state.value?.header?.kind) === 'article_discussions')
+const notCreating = computed(() => ctl.value?.notCreating() ?? null)
+/** A pause a refused write named, while me/get names none (ForumNotices says the one me/get knows). */
+const refusedPause = computed(() => (state.value && forumNoticesOf(state.value.me).paused === null ? pausedKey(state.value.brakedBy) : null))
+const createdHref = computed(() => (state.value?.created ? topicPath(routes.value.topicPath, state.value.created.conversationId) : null))
+const failure = computed(() => {
+  const f = state.value?.failure
+  if (!f) return ''
+  const r = failureText(f, lang.value)
+  return t(r.key, r.params)
+})
+
+function onSort(e: Event): void {
+  void ctl.value?.setSort((e.target as HTMLSelectElement).value as ForumSort)
+}
+
+const composerRef = ref<InstanceType<typeof MessageComposer> | null>(null)
+// One live region, present from the start; the same outcome twice is announced twice (cleared in between).
+const liveText = ref('')
+watch(
+  () => state.value?.announceId,
+  () => {
+    liveText.value = ''
+    const next = text(state.value?.announcement)
+    void nextTick(() => {
+      liveText.value = next
+    })
+  },
+)
+</script>
+
+<template>
+  <section v-if="ctl && state && state.phase !== 'hidden'" class="bcm bcm-forum-category" :lang="lang" :aria-labelledby="`${id}-title`">
+    <nav class="bcm-row">
+      <a :href="routes.forumPath">{{ t('forum.back') }}</a>
+    </nav>
+
+    <p v-if="state.phase === 'loading'" :id="`${id}-title`" class="bcm-muted" role="status">{{ t('forum.loading') }}</p>
+    <div v-else-if="state.phase === 'membersOnly' && client" :id="`${id}-title`">
+      <MembersOnly :failure="state.failure" :client="client" :lang="lang" :sign-in-href="signInHref" :rules-href="routes.rulesPath" @joined="ctl.load()" />
+    </div>
+    <p v-else-if="state.phase === 'notFound'" :id="`${id}-title`" class="bcm-note">{{ t('forumCategory.notFound') }}</p>
+    <div v-else-if="state.phase === 'failed'" class="bcm-banner" role="alert">
+      <span :id="`${id}-title`">{{ failure }}</span>
+      <button type="button" class="bcm-btn" @click="ctl.load()">{{ t('common.retry') }}</button>
+    </div>
+
+    <template v-else-if="state.phase === 'ready'">
+      <header class="bcm-head">
+        <h2 :id="`${id}-title`">{{ name }}</h2>
+        <FollowToggle v-if="categoryFollow" :ctl="categoryFollow" />
+      </header>
+      <p v-if="state.category?.description" class="bcm-text">{{ state.category.description }}</p>
+      <ForumNotices :me="state.me" />
+      <p v-if="state.category?.mode === 'pre'" class="bcm-hint">{{ t('forum.modePre') }}</p>
+
+      <div v-if="!isArticles" class="bcm-row">
+        <label :for="`${id}-sort`">{{ t('forumCategory.sort') }}</label>
+        <select :id="`${id}-sort`" class="bcm-input bcm-select" :value="state.sort" :disabled="state.sorting" @change="onSort">
+          <option value="activity">{{ t('forumCategory.sortActivity') }}</option>
+          <option value="new">{{ t('forumCategory.sortNew') }}</option>
+        </select>
+      </div>
+
+      <p v-if="state.items.length === 0" class="bcm-muted">{{ isArticles ? t('forumCategory.articlesEmpty') : t('forumCategory.empty') }}</p>
+      <ul v-else class="bcm-topics" :aria-busy="state.sorting">
+        <TopicRow v-for="item in state.items" :key="item.conversationId" :item="item" :topic-href="routes.topicPath" :article-href="routes.articlePath" :follow="rowFollow(item)" />
+      </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>
+
+      <section v-if="!isArticles" class="bcm-section" :aria-labelledby="`${id}-new`">
+        <!-- No role="status": the element's live region announces it (once). -->
+        <p v-if="state.created" class="bcm-note">
+          {{ state.created.held ? t('topic.createdHeld') : t('topic.created') }}
+          <a v-if="createdHref" :href="createdHref">{{ t('topic.open') }}</a>
+        </p>
+        <!-- An element, not a fragment: the composer is a form, and happy-dom (the specs) answers a form's nextSibling
+             with null, which a fragment's removal walks. -->
+        <div v-if="ctl.canCreate()" class="bcm-new-topic">
+          <h3 :id="`${id}-new`">{{ t('forumCategory.newTopic') }}</h3>
+          <OnboardingSteps v-if="ctl.onboarding.value" :model="ctl.onboarding.value" :rules-href="routes.rulesPath" @cancel="ctl.cancelOnboarding()" />
+          <MessageComposer
+            v-else
+            ref="composerRef"
+            kind="topic"
+            :draft="state.composer"
+            :wait="ctl.waitLeft()"
+            :rules-href="routes.rulesPath"
+            @submit="ctl.create()"
+            @confirm="(code: string, checked: boolean) => ctl && ctl.setConfirmed(code, checked)"
+            @confirmed="ctl.sendConfirmed()"
+          />
+        </div>
+        <p v-else-if="notCreating === 'team'" class="bcm-hint">{{ t('forum.teamTopics') }}</p>
+        <p v-else-if="notCreating === 'paused' && refusedPause" class="bcm-note" role="status">{{ t(refusedPause) }}</p>
+      </section>
+    </template>
+
+    <p class="bcm-sr" aria-live="polite">{{ liveText }}</p>
+  </section>
+</template>

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>