@blogmcp/community 0.2.0 → 0.3.0

package/src/mount.ts

@@ -7,23 +7,35 @@
  */
 import type { CommunityTransport } from '@blogmcp/sdk/community'
 import type { CommunityRoutes } from './core/attrs'
-import type { DiscussionRealtime } from './core/realtime'
+import type { DiscussionRealtime, TopicRealtime } from './core/realtime'
 import {
   BADGE_ELEMENT_TAG,
   DISCUSSION_ELEMENT_TAG,
+  FOLLOW_BUTTON_ELEMENT_TAG,
+  FORUM_CATEGORY_ELEMENT_TAG,
+  FORUM_ELEMENT_TAG,
+  FORUM_MODERATION_ELEMENT_TAG,
+  FORUM_SEARCH_ELEMENT_TAG,
   MEMBER_SETTINGS_ELEMENT_TAG,
   MY_COMMUNITY_ELEMENT_TAG,
   NOTICE_FORM_ELEMENT_TAG,
   NOTIFICATION_CENTRE_ELEMENT_TAG,
   PROFILE_ELEMENT_TAG,
+  TOPIC_ELEMENT_TAG,
   WELCOME_ELEMENT_TAG,
   defineBadgeElement,
   defineDiscussionElement,
+  defineFollowButtonElement,
+  defineForumCategoryElement,
+  defineForumElement,
+  defineForumModerationElement,
+  defineForumSearchElement,
   defineMemberSettingsElement,
   defineMyCommunityElement,
   defineNoticeFormElement,
   defineNotificationCentreElement,
   defineProfileElement,
+  defineTopicElement,
   defineWelcomeElement,
 } from './element'
 
@@ -105,7 +117,50 @@ export interface MountWelcomeOptions extends CommonMountOptions {
   signInHref?: string
 }
 
-type Settable = HTMLElement & { transport?: CommunityTransport; realtime?: DiscussionRealtime }
+/** M3 (m3-contracts.md §5.3): the forum's index — its categories, their latest topics, the search box. */
+export interface MountForumOptions extends CommonMountOptions {
+  /** The site's sign-in page (the members-only sentence's link for a visitor). */
+  signInHref?: string
+}
+
+/** M3: one category's page — its topics, its follow button, the new-topic composer. */
+export interface MountForumCategoryOptions extends CommonMountOptions {
+  /** The category's slug. */
+  slug: string
+  signInHref?: string
+}
+
+/** M3: one topic's page — the discussion's view over the topic, with its header. */
+export interface MountTopicOptions extends CommonMountOptions {
+  /** The topic's conversation id. */
+  conversationId: string
+  signInHref?: string
+  /** Head poll interval in ms (default 20 000; 0 = off). */
+  pollMs?: number
+  /** Live updates — `createRealtimeSession` of `@blogmcp/sdk/community/realtime` (the host imports it). Absent: the head poll. */
+  realtime?: TopicRealtime
+}
+
+/** M3: the forum's search. */
+export interface MountForumSearchOptions extends CommonMountOptions {
+  signInHref?: string
+}
+
+/** M3: a follow button — a topic or an article discussion (`conversation`) or a category, by its id. */
+export interface MountFollowButtonOptions extends CommonMountOptions {
+  targetKind: 'conversation' | 'category'
+  targetId: string
+  /** Whether the member follows it, when the host knows (absent: the member's follows are read). */
+  following?: boolean
+}
+
+/** M3: a category moderator's queue (renders nothing for a member who moderates nothing). */
+export interface MountForumModerationOptions extends CommonMountOptions {
+  /** Narrow the queue to one of the moderator's categories. */
+  categoryId?: string
+}
+
+type Settable = HTMLElement & { transport?: CommunityTransport; realtime?: DiscussionRealtime | TopicRealtime }
 
 function attrs(el: HTMLElement, values: Record<string, string | number | undefined | null>): void {
   for (const [name, value] of Object.entries(values)) if (value !== undefined && value !== null && value !== '') el.setAttribute(name, String(value))
@@ -232,3 +287,90 @@ export function mountWelcome(o: MountWelcomeOptions = {}): () => void {
   attrs(el, { 'api-base': o.apiBase, 'site-base': o.siteBase, lang: o.lang, routes: o.routes ? JSON.stringify(o.routes) : undefined, 'sign-in-href': o.signInHref, nonce: o.nonce })
   return place(el, o)
 }
+
+/** M3: mount `<blogmcp-forum>`; returns the function that removes it. */
+export function mountForum(o: MountForumOptions = {}): () => void {
+  if (typeof document === 'undefined') return () => {}
+  defineForumElement({ nonce: o.nonce })
+  const el = document.createElement(FORUM_ELEMENT_TAG) as Settable
+  attrs(el, { 'api-base': o.apiBase, 'site-base': o.siteBase, lang: o.lang, routes: o.routes ? JSON.stringify(o.routes) : undefined, 'sign-in-href': o.signInHref, nonce: o.nonce })
+  return place(el, o)
+}
+
+/** M3: mount `<blogmcp-forum-category>`; returns the function that removes it. */
+export function mountForumCategory(o: MountForumCategoryOptions): () => void {
+  if (typeof document === 'undefined') return () => {}
+  defineForumCategoryElement({ nonce: o.nonce })
+  const el = document.createElement(FORUM_CATEGORY_ELEMENT_TAG) as Settable
+  attrs(el, {
+    slug: o.slug,
+    'api-base': o.apiBase,
+    'site-base': o.siteBase,
+    lang: o.lang,
+    routes: o.routes ? JSON.stringify(o.routes) : undefined,
+    'sign-in-href': o.signInHref,
+    nonce: o.nonce,
+  })
+  return place(el, o)
+}
+
+/** M3: mount `<blogmcp-topic>`; returns the function that removes it. */
+export function mountTopic(o: MountTopicOptions): () => void {
+  if (typeof document === 'undefined') return () => {}
+  defineTopicElement({ nonce: o.nonce })
+  const el = document.createElement(TOPIC_ELEMENT_TAG) as Settable
+  attrs(el, {
+    'conversation-id': o.conversationId,
+    'api-base': o.apiBase,
+    'site-base': o.siteBase,
+    lang: o.lang,
+    routes: o.routes ? JSON.stringify(o.routes) : undefined,
+    'sign-in-href': o.signInHref,
+    'poll-ms': o.pollMs,
+    nonce: o.nonce,
+  })
+  if (o.realtime) el.realtime = o.realtime
+  return place(el, o)
+}
+
+/** M3: mount `<blogmcp-forum-search>`; returns the function that removes it. */
+export function mountForumSearch(o: MountForumSearchOptions = {}): () => void {
+  if (typeof document === 'undefined') return () => {}
+  defineForumSearchElement({ nonce: o.nonce })
+  const el = document.createElement(FORUM_SEARCH_ELEMENT_TAG) as Settable
+  attrs(el, { 'api-base': o.apiBase, 'site-base': o.siteBase, lang: o.lang, routes: o.routes ? JSON.stringify(o.routes) : undefined, 'sign-in-href': o.signInHref, nonce: o.nonce })
+  return place(el, o)
+}
+
+/** M3: mount `<blogmcp-follow-button>`; returns the function that removes it. */
+export function mountFollowButton(o: MountFollowButtonOptions): () => void {
+  if (typeof document === 'undefined') return () => {}
+  defineFollowButtonElement({ nonce: o.nonce })
+  const el = document.createElement(FOLLOW_BUTTON_ELEMENT_TAG) as Settable
+  attrs(el, {
+    'target-kind': o.targetKind,
+    'target-id': o.targetId,
+    following: typeof o.following === 'boolean' ? String(o.following) : undefined,
+    'api-base': o.apiBase,
+    'site-base': o.siteBase,
+    lang: o.lang,
+    nonce: o.nonce,
+  })
+  return place(el, o)
+}
+
+/** M3: mount `<blogmcp-forum-moderation>`; returns the function that removes it. */
+export function mountForumModeration(o: MountForumModerationOptions = {}): () => void {
+  if (typeof document === 'undefined') return () => {}
+  defineForumModerationElement({ nonce: o.nonce })
+  const el = document.createElement(FORUM_MODERATION_ELEMENT_TAG) as Settable
+  attrs(el, {
+    'category-id': o.categoryId,
+    'api-base': o.apiBase,
+    'site-base': o.siteBase,
+    lang: o.lang,
+    routes: o.routes ? JSON.stringify(o.routes) : undefined,
+    nonce: o.nonce,
+  })
+  return place(el, o)
+}

package/src/react.ts

@@ -1,6 +1,7 @@
 /**
- * `<KbDiscussion>`, `<KbNoticeForm>`, `<KbMyCommunity>` and (M2) `<KbNotificationCentre>`, `<KbBadge>`,
- * `<KbMemberSettings>`, `<KbProfile>`, `<KbWelcome>` for React (18 and 19, Next.js App Router included — this
+ * `<KbDiscussion>`, `<KbNoticeForm>`, `<KbMyCommunity>`, (M2) `<KbNotificationCentre>`, `<KbBadge>`,
+ * `<KbMemberSettings>`, `<KbProfile>`, `<KbWelcome>` and (M3) `<KbForum>`, `<KbForumCategory>`, `<KbTopic>`,
+ * `<KbForumSearch>`, `<KbFollowButton>`, `<KbForumModeration>` for React (18 and 19, Next.js App Router included — this
  * module is a client component): each mounts its element after hydration and removes it on unmount. Each
  * renders one empty `<div>` as the mount point — nothing else, on the server or the client — so the element
  * sits where the component does and the page's markup is otherwise the site's alone.
@@ -11,11 +12,17 @@ import { createElement, useEffect, useRef, type ReactElement } from 'react'
 import type {
   MountBadgeOptions,
   MountDiscussionOptions,
+  MountFollowButtonOptions,
+  MountForumCategoryOptions,
+  MountForumModerationOptions,
+  MountForumOptions,
+  MountForumSearchOptions,
   MountMemberSettingsOptions,
   MountMyCommunityOptions,
   MountNoticeFormOptions,
   MountNotificationCentreOptions,
   MountProfileOptions,
+  MountTopicOptions,
   MountWelcomeOptions,
 } from './mount'
 
@@ -27,6 +34,12 @@ export type KbBadgeProps = Omit<MountBadgeOptions, 'container'>
 export type KbMemberSettingsProps = Omit<MountMemberSettingsOptions, 'container'>
 export type KbProfileProps = Omit<MountProfileOptions, 'container'>
 export type KbWelcomeProps = Omit<MountWelcomeOptions, 'container'>
+export type KbForumProps = Omit<MountForumOptions, 'container'>
+export type KbForumCategoryProps = Omit<MountForumCategoryOptions, 'container'>
+export type KbTopicProps = Omit<MountTopicOptions, 'container'>
+export type KbForumSearchProps = Omit<MountForumSearchOptions, 'container'>
+export type KbFollowButtonProps = Omit<MountFollowButtonOptions, 'container'>
+export type KbForumModerationProps = Omit<MountForumModerationOptions, 'container'>
 
 /** The options that, changed, mount the element anew (functions by identity are left out). */
 const keyOf = (props: object): string => JSON.stringify(props, (_k, v: unknown) => (typeof v === 'function' ? '[fn]' : v))
@@ -85,6 +98,30 @@ export function KbWelcome(props: KbWelcomeProps): ReactElement {
   return useMounted('welcome', props, async () => (await import('./mount')).mountWelcome)
 }
 
+export function KbForum(props: KbForumProps): ReactElement {
+  return useMounted('forum', props, async () => (await import('./mount')).mountForum)
+}
+
+export function KbForumCategory(props: KbForumCategoryProps): ReactElement {
+  return useMounted('forum-category', props, async () => (await import('./mount')).mountForumCategory)
+}
+
+export function KbTopic(props: KbTopicProps): ReactElement {
+  return useMounted('topic', props, async () => (await import('./mount')).mountTopic)
+}
+
+export function KbForumSearch(props: KbForumSearchProps): ReactElement {
+  return useMounted('forum-search', props, async () => (await import('./mount')).mountForumSearch)
+}
+
+export function KbFollowButton(props: KbFollowButtonProps): ReactElement {
+  return useMounted('follow-button', props, async () => (await import('./mount')).mountFollowButton)
+}
+
+export function KbForumModeration(props: KbForumModerationProps): ReactElement {
+  return useMounted('forum-moderation', props, async () => (await import('./mount')).mountForumModeration)
+}
+
 export type {
   MountDiscussionOptions,
   MountNoticeFormOptions,
@@ -94,4 +131,10 @@ export type {
   MountMemberSettingsOptions,
   MountProfileOptions,
   MountWelcomeOptions,
+  MountForumOptions,
+  MountForumCategoryOptions,
+  MountTopicOptions,
+  MountForumSearchOptions,
+  MountFollowButtonOptions,
+  MountForumModerationOptions,
 }

package/src/ui/FollowButtonView.vue

@@ -0,0 +1,85 @@
+<script setup lang="ts">
+/**
+ * `<blogmcp-follow-button target-kind target-id>` (m3-contracts.md §3.3, §4.3, §5.3; D-M3-4): follow a topic or an
+ * article discussion (`target-kind="conversation"`, its conversation id) or a category (`category`, its id) — its new
+ * messages, or its new topics, come as notifications. The state starts from the host's `following` attribute when it
+ * knows it, else from the member's follows. A follow kb-api refuses as `notFound` reads „not available"; an unfollow
+ * never fails on its target. Renders nothing for a viewer who cannot follow (a visitor) and for a target that is none.
+ */
+import { onBeforeUnmount, onMounted, ref, shallowRef, watch } from 'vue'
+import { followTargetOf, type CommunityTransport } from '@blogmcp/sdk/community'
+import { communityClientFor, siteBaseFor, warnOnce } from '../core/client'
+import { createFollow, type FollowController } from '../core/follow'
+import { documentLang, pickLang, type Lang } from '../core/i18n'
+import FollowToggle from './FollowToggle.vue'
+import { provideText } from './context'
+
+defineOptions({ inheritAttrs: false })
+
+const props = withDefaults(
+  defineProps<{
+    /** `conversation` (a topic, an article discussion) or `category`. */
+    targetKind?: string
+    /** The conversation's or the category's id. */
+    targetId?: string
+    /** `true` / `false` when the host knows whether the member follows it (absent: the member's follows are read). */
+    following?: string | boolean
+    apiBase?: string
+    siteBase?: string
+    lang?: string
+    transport?: CommunityTransport
+  }>(),
+  // An explicit default: without one Vue casts an absent boolean prop to `false`, and „absent" means „not known".
+  { following: undefined },
+)
+
+const lang = ref<Lang>(pickLang(props.lang, documentLang()))
+provideText(lang)
+
+const ctl = shallowRef<FollowController | null>(null)
+
+function known(): boolean | null {
+  const f = props.following
+  if (f === true || f === 'true' || f === '') return true
+  if (f === false || f === 'false') return false
+  return null
+}
+
+function start(): void {
+  ctl.value?.dispose()
+  ctl.value = null
+  const target = followTargetOf(props.targetKind, props.targetId)
+  if (target === null) {
+    warnOnce('follow-target', '[blogmcp-community] <blogmcp-follow-button> needs target-kind ("conversation" or "category") and a target-id')
+    return
+  }
+  const siteBase = siteBaseFor(props.siteBase)
+  const client = siteBase === null ? null : communityClientFor(props.apiBase, props.transport, siteBase)
+  if (!client) return
+  ctl.value = createFollow({ client, target, lang: lang.value })
+  void ctl.value.load(known())
+}
+
+onMounted(start)
+watch(() => [props.targetKind, props.targetId, props.apiBase, props.siteBase, props.transport] as const, start)
+watch(
+  () => props.following,
+  () => {
+    const k = known()
+    if (k !== null) ctl.value?.sync(k)
+  },
+)
+watch(
+  () => props.lang,
+  (v) => {
+    lang.value = pickLang(v, documentLang())
+  },
+)
+onBeforeUnmount(() => ctl.value?.dispose())
+</script>
+
+<template>
+  <div v-if="ctl && (ctl.state.phase === 'ready' || ctl.state.phase === 'unavailable')" class="bcm-follow-host" :lang="lang">
+    <FollowToggle :ctl="ctl" />
+  </div>
+</template>

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>