@blogmcp/community 0.0.0-stage → 0.1.0

package/src/ui/DiscussionView.vue

@@ -0,0 +1,294 @@
+<script lang="ts">
+/**
+ * A refused age band, per element: kb-api keeps nothing of it (§7.4.2), so the element does, for its whole life —
+ * a discussion started again (another language) and the element put back by its host included.
+ */
+const refusedAges = new WeakMap<object, number>()
+</script>
+
+<script setup lang="ts">
+/**
+ * `<blogmcp-discussion>`: the discussion of one article (m1-contracts.md §10.4). Lives in a shadow root; talks
+ * only to the host's relative `api-base` through the SDK client; renders nothing when discussions are off,
+ * and one sentence while the discussion takes no writes yet.
+ */
+import { computed, nextTick, onBeforeUnmount, onMounted, reactive, ref, shallowRef, useHost, watch } from 'vue'
+import { signInLink, statementPath, type CommunityTransport, type DiscussionRestriction } from '@blogmcp/sdk/community'
+import { parseRoutes, routesWithDefaults } from '../core/attrs'
+import { communityClientFor, siteBaseFor, warnOnce } from '../core/client'
+import { createDiscussionController, type DiscussionController } from '../core/discussion'
+import { formatDate } from '../core/format'
+import { documentLang, pickLang, type Lang } from '../core/i18n'
+import { failureText } from '../core/outcomes'
+import ConfirmDialog from './ConfirmDialog.vue'
+import MessageComposer from './MessageComposer.vue'
+import MessageItem from './MessageItem.vue'
+import OnboardingSteps from './OnboardingSteps.vue'
+import ReactionBar from './ReactionBar.vue'
+import ReportDialog from './ReportDialog.vue'
+import { provideText, uid } from './context'
+import { provideDiscussion } from './discussion-context'
+
+defineOptions({ inheritAttrs: false })
+
+const props = defineProps<{
+  articleId?: string
+  /** The host's relative base (default `${siteBase}/api/community`). */
+  apiBase?: string
+  /** The path the site is served under (`/blog` on a managed blog): its proxy and its pages, as the defaults. */
+  siteBase?: string
+  lang?: string
+  /** The site's sign-in page; the current path goes in its fragment. */
+  signInHref?: string
+  /** JSON (or an object): `statementPath`, `myCommunityPath`, `rulesPath`, `reportPath`, `noticesPath`. */
+  routes?: string | Record<string, unknown>
+  /** Head poll interval in ms (default 20 000; 0 = off). */
+  pollMs?: number
+  /** A replacement transport (a property, never an attribute): tests, a signing transport later. */
+  transport?: CommunityTransport
+}>()
+
+const host = useHost()
+const lang = ref<Lang>(pickLang(props.lang, documentLang()))
+const { t, text } = provideText(lang)
+watch(
+  () => props.lang,
+  (v) => {
+    lang.value = pickLang(v, documentLang())
+  },
+)
+
+const headingId = uid('bcm-discussion')
+const heading = ref<HTMLElement | null>(null)
+const generation = ref(0)
+const current = shallowRef<DiscussionController | null>(null)
+const siteBase = computed(() => siteBaseFor(props.siteBase))
+
+function create(): DiscussionController | null {
+  const articleId = props.articleId?.trim()
+  if (!articleId) {
+    warnOnce('article-id', '[blogmcp-community] <blogmcp-discussion> needs an article-id')
+    return null
+  }
+  if (siteBase.value === null) return null
+  const client = communityClientFor(props.apiBase, props.transport, siteBase.value)
+  if (!client) return null
+  return createDiscussionController({
+    client,
+    articleId,
+    lang: lang.value,
+    pollMs: props.pollMs,
+    refusedAge: (host && refusedAges.get(host)) ?? null,
+    onAgeRefused: (minAge) => {
+      if (host) refusedAges.set(host, minAge)
+    },
+    onPosted: (state) => host?.dispatchEvent(new CustomEvent('bcm-posted', { detail: { state }, bubbles: true, composed: true })),
+  })
+}
+
+const opened = reactive(new Set<number>())
+const originals = reactive(new Set<number>())
+const allReplies = reactive(new Set<number>())
+const deleting = ref<number | null>(null)
+
+const parsedRoutes = computed(() => parseRoutes(props.routes))
+const routes = computed(() => routesWithDefaults(parsedRoutes.value, current.value?.state.me?.links, siteBase.value ?? ''))
+
+provideDiscussion({
+  get ctl() {
+    return current.value as DiscussionController
+  },
+  routes,
+  opened,
+  originals,
+  allReplies,
+  focusHeading: () => heading.value,
+  deleteMessage: (seq) => {
+    deleting.value = seq
+  },
+})
+
+let observer: IntersectionObserver | null = null
+
+function start(): void {
+  current.value?.dispose()
+  opened.clear()
+  originals.clear()
+  allReplies.clear()
+  deleting.value = null
+  current.value = create()
+  generation.value += 1
+  void current.value?.start()
+}
+
+onMounted(() => {
+  start()
+  if (host && typeof IntersectionObserver !== 'undefined') {
+    observer = new IntersectionObserver((entries) => {
+      const e = entries[entries.length - 1]
+      if (e) current.value?.setInView(e.isIntersecting)
+    }, { rootMargin: '200px' })
+    observer.observe(host)
+  }
+})
+// Another article, base or language is another discussion (the language picks the translations and the posts' languageCode).
+watch(() => [props.articleId, props.apiBase, siteBase.value, props.transport, props.pollMs, lang.value] as const, () => start())
+onBeforeUnmount(() => {
+  observer?.disconnect()
+  current.value?.dispose()
+  current.value = null
+})
+
+const ctl = computed(() => current.value)
+const state = computed(() => current.value?.state ?? null)
+const mode = computed(() => current.value?.mode() ?? 'pending')
+const composer = ref<InstanceType<typeof MessageComposer> | null>(null)
+// Joined: the reader goes on where the onboarding was, in the composer. A refusal closed: to the discussion's heading
+// (the onboarding's button the focus was on is gone).
+watch(mode, (now, before) => {
+  if (now === 'write' && before === 'onboarding') void nextTick(() => composer.value?.focus())
+  if (now === 'ageRefused' && before === 'onboarding') void nextTick(() => heading.value?.focus())
+})
+const needKey = computed(() => {
+  const n = current.value?.needs()
+  return n?.onboarding ? 'need.onboarding' : n?.rules ? 'need.reconsent_rules' : 'need.art9_consent'
+})
+
+function signInHref(): string | null {
+  return signInLink(props.signInHref, typeof location === 'undefined' ? null : location.pathname)
+}
+
+function sanctionText(r: DiscussionRestriction): string {
+  const date = r.endsAt ? formatDate(lang.value, r.endsAt) : ''
+  if (r.kind === 'ban') return t('sanction.ban')
+  if (r.kind === 'suspension') return date ? t('sanction.suspensionUntil', { date }) : t('sanction.suspension')
+  return date ? t('sanction.restrictionUntil', { date }) : t('sanction.restriction')
+}
+
+const loadFailure = computed(() => {
+  const f = state.value?.failure
+  if (!f) return ''
+  const r = failureText(f, lang.value)
+  return t(r.key, r.params)
+})
+
+// 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
+    })
+  },
+)
+
+async function confirmDelete(): Promise<void> {
+  const seq = deleting.value
+  if (seq === null || !current.value) return
+  await current.value.remove(seq)
+  deleting.value = null
+}
+</script>
+
+<template>
+  <section v-if="ctl && state && state.phase !== 'hidden'" :key="generation" class="bcm bcm-discussion" :lang="lang" :aria-labelledby="headingId">
+    <header class="bcm-head">
+      <h2 :id="headingId" ref="heading" tabindex="-1">{{ t('discussion.title') }}</h2>
+      <span v-if="state.phase === 'ready'" class="bcm-count">{{ t('discussion.count', { count: state.thread.count }) }}</span>
+    </header>
+
+    <p v-if="state.phase === 'loading'" class="bcm-muted" role="status">{{ t('discussion.loading') }}</p>
+
+    <div v-else-if="state.phase === 'failed'" class="bcm-banner" role="alert">
+      <span>{{ loadFailure }}</span>
+      <button type="button" class="bcm-btn" @click="ctl.refresh()">{{ t('common.retry') }}</button>
+    </div>
+
+    <template v-else>
+      <ReactionBar
+        :reaction-set="state.thread.reactionSet"
+        :summary="state.thread.articleReactions"
+        :interactive="ctl.canReact()"
+        :busy="!!state.busy['react:article']"
+        @react="(emoji: string) => ctl && ctl.react({ articleId: state!.thread.articleId ?? articleId ?? '' }, emoji)"
+      />
+
+      <div v-if="state.newMessages" class="bcm-banner" role="status">
+        <span>{{ t('discussion.newMessages') }}</span>
+        <button type="button" class="bcm-btn" :disabled="state.refreshing" @click="ctl.refresh()">{{ t('discussion.refresh') }}</button>
+      </div>
+
+      <p v-if="state.thread.messages.length === 0" class="bcm-muted">{{ t('discussion.empty') }}</p>
+      <ol v-else class="bcm-thread">
+        <MessageItem v-for="m in state.thread.messages" :key="m.id" :message="m" />
+      </ol>
+
+      <div v-if="state.thread.nextCursor !== null" class="bcm-row">
+        <button type="button" class="bcm-btn" :disabled="state.loadingMore" @click="ctl.loadMore()">{{ t('discussion.loadMore') }}</button>
+      </div>
+
+      <div class="bcm-section">
+        <MessageComposer
+          v-if="mode === 'write'"
+          ref="composer"
+          kind="new"
+          :draft="state.composer"
+          :wait="ctl.waitLeft(state.composer)"
+          :rules-href="routes.rulesPath"
+          @submit="ctl.submit()"
+          @confirm="(code: string, checked: boolean) => ctl && ctl.setConfirmed(state!.composer, code, checked)"
+          @confirmed="ctl.sendConfirmed(state.composer)"
+        />
+        <div v-else-if="mode === 'signIn'" class="bcm-row">
+          <p>{{ t('discussion.signInPrompt') }}</p>
+          <a v-if="signInHref()" class="bcm-btn bcm-primary" :href="signInHref() ?? undefined">{{ t('common.signIn') }}</a>
+        </div>
+        <template v-else-if="mode === 'onboarding'">
+          <OnboardingSteps v-if="ctl.onboarding.value" :model="ctl.onboarding.value" :rules-href="routes.rulesPath" @cancel="ctl.cancelOnboarding()" />
+          <div v-else class="bcm-row">
+            <p>{{ t(needKey) }}</p>
+            <button type="button" class="bcm-btn bcm-primary" @click="ctl.beginOnboarding()">{{ t('onboarding.continue') }}</button>
+          </div>
+        </template>
+        <p v-else-if="mode === 'ageRefused'" class="bcm-note">{{ t('onboarding.ageBelow', { min: state.refusedAge ?? 18 }) }}</p>
+        <div v-else-if="mode === 'sanction'" class="bcm-section">
+          <p v-for="r in state.thread.viewer.restrictions" :key="r.decisionId" class="bcm-note">
+            {{ sanctionText(r) }}
+            <a v-if="statementPath(routes.statementPath, r.decisionId)" :href="statementPath(routes.statementPath, r.decisionId) ?? undefined">{{ t('sanction.statement') }}</a>
+          </p>
+        </div>
+        <p v-else-if="mode === 'notMoved'" class="bcm-note">{{ t('error.notMoved') }}</p>
+        <p v-else-if="mode === 'restricted'" class="bcm-note">
+          {{ t('error.restricted') }}
+          <a :href="routes.myCommunityPath">{{ t('panel.title') }}</a>
+        </p>
+      </div>
+    </template>
+
+    <p class="bcm-sr" aria-live="polite">{{ liveText }}</p>
+
+    <ReportDialog
+      v-if="state.report"
+      :report="state.report"
+      :my-community-href="routes.myCommunityPath"
+      :rules-href="routes.rulesPath"
+      :fallback-focus="() => heading"
+      @submit="ctl.submitReport()"
+      @close="ctl.closeReport()"
+    />
+    <ConfirmDialog
+      v-if="deleting !== null"
+      title="discussion.deleteTitle"
+      explain="discussion.deleteExplain"
+      confirm="discussion.deleteConfirm"
+      danger
+      :busy="!!state.busy[`delete:${deleting}`]"
+      :fallback-focus="() => heading"
+      @confirm="confirmDelete()"
+      @cancel="deleting = null"
+    />
+  </section>
+</template>

package/src/ui/LinkedText.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+/**
+ * A member's text, as text: runs of text nodes, and the web addresses in it as links that went through
+ * sanitizeUrl (core/text.ts) — `rel="nofollow ugc noopener noreferrer"`, a new tab. Never HTML.
+ */
+import { computed } from 'vue'
+import { linkify, UGC_LINK_REL } from '../core/text'
+
+const props = defineProps<{ text: string | null }>()
+const segments = computed(() => linkify(props.text ?? ''))
+</script>
+
+<template>
+  <template v-for="(s, i) in segments" :key="i">
+    <a v-if="s.kind === 'link'" :href="s.href" :rel="UGC_LINK_REL" target="_blank">{{ s.text }}</a>
+    <template v-else>{{ s.text }}</template>
+  </template>
+</template>

package/src/ui/MessageComposer.vue

@@ -0,0 +1,130 @@
+<script setup lang="ts">
+/**
+ * The composer of a new message, a reply or an edit: 4 000 characters with a counter (announced near the
+ * end), the links note, a link to the rules (community.md §4.5: by every composer; a new tab, so the text
+ * stays), Cmd/Ctrl+Enter, the cooldown after TOO_FAST or a quota, and the Russmedia confirmation when kb-api
+ * asks for one (the same text goes again with `confirmations`).
+ */
+import { computed, onBeforeUnmount, ref, watch } from 'vue'
+import { COMMUNITY_MESSAGE_LINKS_MAX, COMMUNITY_MESSAGE_MAX, confirmMessageKey } from '@blogmcp/sdk/community'
+import type { Draft } from '../core/discussion'
+import { COUNTDOWN_MAX_S, failureText } from '../core/outcomes'
+import { codePointLength, normalizeBody } from '../core/text'
+import { uid, useText } from './context'
+
+const props = defineProps<{
+  draft: Draft
+  kind: 'new' | 'reply' | 'edit'
+  /** Seconds the draft still waits (the controller's clock). */
+  wait: number
+  replyingTo?: string | null
+  /** The host's rules page. */
+  rulesHref?: string
+}>()
+const emit = defineEmits<{ submit: []; cancel: []; confirmed: []; confirm: [code: string, checked: boolean] }>()
+const { t, lang } = useText()
+
+const id = uid('bcm-composer')
+const input = ref<HTMLTextAreaElement | null>(null)
+const length = computed(() => codePointLength(normalizeBody(props.draft.body)))
+const over = computed(() => length.value > COMMUNITY_MESSAGE_MAX)
+const canSend = computed(() => !props.draft.sending && length.value > 0 && !over.value && props.wait === 0 && props.draft.confirm === null)
+const allConfirmed = computed(() => {
+  const c = props.draft.confirm
+  return c !== null && c.codes.every((code) => c.checked.includes(code))
+})
+const label = computed(() => t(props.kind === 'reply' ? 'composer.replyLabel' : props.kind === 'edit' ? 'composer.editLabel' : 'composer.label'))
+const keys = typeof navigator !== 'undefined' && /Mac|iPhone|iPad/i.test(navigator.platform || navigator.userAgent) ? '⌘ + Enter' : 'Ctrl + Enter'
+const failure = computed(() => {
+  const f = props.draft.failure
+  // The confirmation box says what CONFIRMATION_REQUIRED meant; any later refusal (the confirmed send's) shows.
+  if (!f || (props.draft.confirm && f.code === 'confirm')) return ''
+  // A short wait reads as the countdown instead.
+  if ((f.code === 'fast' || f.code === 'quota') && props.wait > 0 && props.wait <= COUNTDOWN_MAX_S) return ''
+  const ref = failureText(f, lang.value)
+  return t(ref.key, ref.params)
+})
+
+// The counter is read on focus (aria-describedby); near the limit it is also announced, once typing pauses.
+const counterLive = ref('')
+let liveTimer: ReturnType<typeof setTimeout> | null = null
+watch(length, (n) => {
+  if (liveTimer) clearTimeout(liveTimer)
+  liveTimer = setTimeout(() => {
+    counterLive.value = n >= COMMUNITY_MESSAGE_MAX * 0.9 ? t('composer.counter', { length: n, max: COMMUNITY_MESSAGE_MAX }) : ''
+  }, 700)
+})
+onBeforeUnmount(() => {
+  if (liveTimer) clearTimeout(liveTimer)
+})
+
+// A changed text is a new attempt: the old refusal and the confirmation it asked for no longer apply
+// (a cooldown still does).
+watch(
+  () => props.draft.body,
+  () => {
+    const d = props.draft
+    if (d.confirm) d.confirm = null
+    if (d.failure && d.failure.code !== 'fast' && d.failure.code !== 'quota') d.failure = null
+  },
+)
+
+function onKey(e: KeyboardEvent): void {
+  if (e.key !== 'Enter' || !(e.metaKey || e.ctrlKey)) return
+  e.preventDefault()
+  if (canSend.value) emit('submit')
+}
+
+function onSubmit(): void {
+  if (canSend.value) emit('submit')
+}
+
+defineExpose({ focus: () => input.value?.focus() })
+</script>
+
+<template>
+  <form class="bcm-composer" @submit.prevent="onSubmit">
+    <label :for="id" class="bcm-label">{{ label }}</label>
+    <p v-if="replyingTo" class="bcm-hint">{{ t('composer.replyingTo', { name: replyingTo }) }}</p>
+    <textarea
+      :id="id"
+      ref="input"
+      v-model="draft.body"
+      class="bcm-input bcm-textarea"
+      rows="4"
+      :placeholder="t('composer.placeholder')"
+      :aria-describedby="`${id}-counter ${id}-hints`"
+      :aria-invalid="over"
+      :readonly="draft.sending"
+      @keydown="onKey"
+    />
+    <div class="bcm-composer-foot">
+      <span :id="`${id}-counter`" class="bcm-counter" :class="{ 'bcm-counter-over': over }">{{ t('composer.counter', { length, max: COMMUNITY_MESSAGE_MAX }) }}</span>
+      <span class="bcm-sr" aria-live="polite">{{ counterLive }}</span>
+      <span class="bcm-spacer" />
+      <button v-if="kind !== 'new'" type="button" class="bcm-btn" :disabled="draft.sending" @click="emit('cancel')">{{ t('composer.cancel') }}</button>
+      <button type="submit" class="bcm-btn bcm-primary" :disabled="!canSend">
+        {{ draft.sending ? t('composer.sending') : kind === 'edit' ? t('composer.save') : t('composer.submit') }}
+      </button>
+    </div>
+    <div :id="`${id}-hints`" class="bcm-hint">
+      <p>{{ t('composer.linksNote', { count: COMMUNITY_MESSAGE_LINKS_MAX }) }}</p>
+      <p>{{ t('composer.shortcut', { keys }) }}</p>
+      <p v-if="rulesHref"><a :href="rulesHref" target="_blank" rel="noopener">{{ t('onboarding.rulesTitle') }}</a></p>
+    </div>
+    <p v-if="over" class="bcm-error">{{ t('composer.tooLong', { max: COMMUNITY_MESSAGE_MAX }) }}</p>
+    <p v-if="wait > 0 && wait <= COUNTDOWN_MAX_S" class="bcm-warning" role="status">{{ t('composer.cooldown', { count: wait }) }}</p>
+    <p v-if="failure" class="bcm-error" role="alert">{{ failure }}</p>
+    <fieldset v-if="draft.confirm" class="bcm-confirm">
+      <legend class="bcm-label">{{ t('confirm.title') }}</legend>
+      <p>{{ t('error.confirm') }}</p>
+      <label v-for="code in draft.confirm.codes" :key="code" class="bcm-check">
+        <input type="checkbox" :checked="draft.confirm.checked.includes(code)" @change="emit('confirm', code, ($event.target as HTMLInputElement).checked)" />
+        <span>{{ t(confirmMessageKey(code)) }}</span>
+      </label>
+      <div class="bcm-row">
+        <button type="button" class="bcm-btn bcm-primary" :disabled="!allConfirmed || draft.sending || wait > 0" @click="emit('confirmed')">{{ t('confirm.submit') }}</button>
+      </div>
+    </fieldset>
+  </form>
+</template>

package/src/ui/MessageItem.vue

@@ -0,0 +1,205 @@
+<script setup lang="ts">
+/**
+ * One message of the thread, and on a top-level message its replies (two levels). What it shows depends on
+ * its state, by community.md §5 (no shadow bans): the author sees a held or removed message WITH its state
+ * („Čeká na kontrolu", and for a removed one the way to the statement in „Moje komunita"); others see a
+ * placeholder, which kb-api sends only while replies hang on it; a blocked author's message is collapsed
+ * until the reader opens it.
+ *
+ * The author's own message the tenant's art. 9 policy keeps from others until they consent (`hiddenUntilConsent`
+ * on a `held` message, m1-contracts.md §7.14 P-RV3) is not awaiting review: it says so („Čeká na váš souhlas"),
+ * and while the discussion asks this member for the consent it offers the onboarding's consent step in place
+ * (`beginOnboarding`, the composer's own). kb-api sends the flag on the author's read only, so another reader sees
+ * the plain placeholder.
+ */
+import { computed } from 'vue'
+import { hasCommunityMessage, noteMessageKey, warningMessageKey, type CommunityMessageKey, type DiscussionMessage } from '@blogmcp/sdk/community'
+import { reportLink } from '../core/attrs'
+import { formatDate } from '../core/format'
+import AuthorAvatar from './AuthorAvatar.vue'
+import LinkedText from './LinkedText.vue'
+import MessageComposer from './MessageComposer.vue'
+import MessageMenu from './MessageMenu.vue'
+import ReactionBar from './ReactionBar.vue'
+import { useText } from './context'
+import { useDiscussion } from './discussion-context'
+import type { MenuItem } from './types'
+
+defineOptions({ name: 'MessageItem' })
+
+const props = defineProps<{ message: DiscussionMessage }>()
+const { t, lang } = useText()
+const { ctl, routes, opened, originals, allReplies, deleteMessage } = useDiscussion()
+
+/** Replies shown before „Zobrazit další odpovědi". */
+const REPLIES_SHOWN = 3
+
+const m = computed(() => props.message)
+const isReply = computed(() => m.value.replyToSeq !== null)
+const own = computed(() => ctl.isOwn(m.value))
+const placeholder = computed(() => m.value.body === null)
+/** The author's own message held back from others until their art. 9 consent (P-RV3) — not one awaiting review. */
+const untilConsent = computed(() => own.value && m.value.state === 'held' && m.value.hiddenUntilConsent === true)
+/** The consent step can be opened from here: the discussion asks this member for it, and the onboarding is not open yet. */
+const canGiveConsent = computed(
+  () => untilConsent.value && ctl.mode() === 'onboarding' && ctl.needs().art9 && !ctl.onboarding.value && ctl.state.refusedAge === null,
+)
+
+const authorName = computed(() => {
+  const a = m.value.author
+  if (a.kind === 'system') return t('author.system')
+  if (a.kind === 'staff') return a.displayName
+  return a.displayName ?? t('author.deleted')
+})
+const handle = computed(() => (m.value.author.kind === 'member' ? m.value.author.handle : null))
+const badge = computed(() => {
+  const a = m.value.author
+  if (a.kind !== 'staff') return null
+  const key = `author.badge.${a.badge}`
+  return hasCommunityMessage(key) ? t(key) : null
+})
+
+const placeholderKey = computed<CommunityMessageKey>(() =>
+  m.value.state === 'held' ? 'discussion.placeholderHeld' : m.value.state === 'removed' ? 'discussion.placeholderRemoved' : 'discussion.placeholderDeleted',
+)
+const hiddenByBlock = computed(() => m.value.collapsed && !opened.has(m.value.seq))
+const showOriginal = computed(() => originals.has(m.value.seq))
+const text = computed(() => (m.value.isTranslated && !showOriginal.value ? m.value.displayBody : m.value.body) ?? m.value.displayBody)
+
+const notes = computed(() =>
+  (own.value ? (m.value.notes ?? []) : []).map((code) => noteMessageKey(code)).filter((k): k is CommunityMessageKey => k !== null),
+)
+const warnings = computed(() => (own.value ? [...new Set((m.value.warnings ?? []).map((code) => warningMessageKey(code)))] : []))
+
+const editing = computed(() => ctl.state.inline?.kind === 'edit' && ctl.state.inline.seq === m.value.seq)
+const replying = computed(() => !isReply.value && ctl.state.inline?.kind === 'reply' && ctl.state.inline.seq === m.value.seq)
+
+const shownReplies = computed(() => (allReplies.has(m.value.seq) ? m.value.replies : m.value.replies.slice(0, REPLIES_SHOWN)))
+const moreReplies = computed(() => m.value.replies.length - shownReplies.value.length)
+
+const target = computed(() => ({ conversationId: m.value.conversationId, seq: m.value.seq }))
+
+const menu = computed<MenuItem[]>(() => {
+  const items: MenuItem[] = []
+  const msg = m.value
+  if (ctl.canEdit(msg)) items.push({ id: 'edit', label: t('discussion.edit') })
+  if (ctl.canDelete(msg)) items.push({ id: 'delete', label: t('discussion.delete'), danger: true })
+  if (ctl.canReport(msg)) items.push({ id: 'report', label: t('discussion.report') })
+  else if (ctl.canReportAsNotifier(msg)) {
+    const href = reportLink(routes.value.reportPath, target.value)
+    if (href) items.push({ id: 'report', label: t('discussion.report'), href })
+  }
+  if (ctl.canBlock(msg)) items.push({ id: msg.collapsed ? 'unblock' : 'block', label: msg.collapsed ? t('discussion.unblock') : t('discussion.block') })
+  return items
+})
+
+function onMenu(id: string): void {
+  const msg = m.value
+  if (id === 'edit') ctl.openEdit(msg.seq)
+  else if (id === 'delete') deleteMessage(msg.seq)
+  else if (id === 'report') ctl.openReport(msg)
+  else if ((id === 'block' || id === 'unblock') && msg.author.kind === 'member' && msg.author.memberId) void ctl.setBlocked(msg.author.memberId, id === 'block')
+}
+
+function reply(): void {
+  ctl.openReply(m.value.seq, isReply.value ? authorName.value : null)
+}
+
+function toggle(set: Set<number>): void {
+  if (set.has(m.value.seq)) set.delete(m.value.seq)
+  else set.add(m.value.seq)
+}
+</script>
+
+<template>
+  <li class="bcm-msg-item">
+    <article class="bcm-msg" :class="{ 'bcm-msg-pending': !!m.pending }" :aria-busy="!!m.pending">
+      <AuthorAvatar :author="m.author" />
+      <div class="bcm-msg-main">
+        <header class="bcm-meta">
+          <span class="bcm-author">{{ authorName }}</span>
+          <span v-if="badge" class="bcm-badge bcm-badge-team">{{ badge }}</span>
+          <span v-if="handle" class="bcm-handle">{{ handle }}</span>
+          <time v-if="m.createdAt" class="bcm-time" :datetime="m.createdAt">{{ formatDate(lang, m.createdAt) }}</time>
+          <span v-if="m.isEdited && !placeholder" class="bcm-muted">{{ t('discussion.edited') }}</span>
+          <span v-if="m.pending" class="bcm-muted" role="status">{{ t('discussion.pending') }}</span>
+        </header>
+
+        <p v-if="placeholder" class="bcm-placeholder">{{ t(placeholderKey) }}</p>
+        <p v-else-if="hiddenByBlock" class="bcm-muted">
+          {{ t('discussion.collapsed') }}
+          <button type="button" class="bcm-link" @click="toggle(opened)">{{ t('discussion.show') }}</button>
+        </p>
+        <template v-else>
+          <div v-if="untilConsent" class="bcm-own-state bcm-own-consent">
+            <span class="bcm-badge">{{ t('state.hiddenUntilConsent') }}</span>
+            <p class="bcm-hint">{{ t('discussion.hiddenUntilConsentNote') }}</p>
+            <button v-if="canGiveConsent" type="button" class="bcm-link" @click="ctl.beginOnboarding()">{{ t('discussion.giveConsent') }}</button>
+          </div>
+          <div v-else-if="own && (m.state === 'held' || m.state === 'removed')" class="bcm-own-state">
+            <span class="bcm-badge">{{ m.state === 'held' ? t('state.held') : t('state.removed') }}</span>
+            <p class="bcm-hint">{{ m.state === 'held' ? t('discussion.heldNote') : t('discussion.removedNote') }}</p>
+            <a v-if="m.state === 'removed'" :href="routes.myCommunityPath">{{ t('discussion.why') }}</a>
+          </div>
+          <MessageComposer
+            v-if="editing && ctl.state.inline"
+            kind="edit"
+            :draft="ctl.state.inline"
+            :wait="ctl.waitLeft(ctl.state.inline)"
+            :rules-href="routes.rulesPath"
+            @submit="ctl.submitInline()"
+            @cancel="ctl.closeInline()"
+            @confirm="(code: string, checked: boolean) => ctl.state.inline && ctl.setConfirmed(ctl.state.inline, code, checked)"
+            @confirmed="ctl.state.inline && ctl.sendConfirmed(ctl.state.inline)"
+          />
+          <p v-else class="bcm-text"><LinkedText :text="text" /></p>
+          <p v-if="m.isTranslated && !editing" class="bcm-hint">
+            {{ t('discussion.translated') }}
+            <button type="button" class="bcm-link" @click="toggle(originals)">{{ showOriginal ? t('discussion.showTranslation') : t('discussion.showOriginal') }}</button>
+          </p>
+          <button v-if="m.collapsed" type="button" class="bcm-link" @click="toggle(opened)">{{ t('discussion.hide') }}</button>
+          <p v-for="key in notes" :key="key" class="bcm-note">
+            <!-- The adverse-event note leads to the site's consultation page when the site names one (§7.6). -->
+            <a v-if="key === 'note.report_to_manufacturer' && routes.consultationPath" :href="routes.consultationPath">{{ t(key) }}</a>
+            <template v-else>{{ t(key) }}</template>
+          </p>
+          <p v-for="key in warnings" :key="key" class="bcm-warning">{{ t(key) }}</p>
+        </template>
+
+        <div v-if="!placeholder && !hiddenByBlock && !editing" class="bcm-actions">
+          <ReactionBar
+            :reaction-set="ctl.state.thread.reactionSet"
+            :summary="m.reactions"
+            :interactive="ctl.canReact() && !m.pending && m.seq > 0 && m.state === 'visible'"
+            :busy="!!ctl.state.busy[`react:${m.seq}`]"
+            @react="(emoji: string) => ctl.react(target, emoji)"
+          />
+          <button v-if="ctl.canReply(m)" type="button" class="bcm-quiet" @click="reply">{{ t('discussion.reply') }}</button>
+          <MessageMenu :items="menu" @select="onMenu" />
+        </div>
+
+        <template v-if="!isReply">
+          <ol v-if="m.replies.length" class="bcm-replies">
+            <MessageItem v-for="r in shownReplies" :key="r.id" :message="r" />
+          </ol>
+          <button v-if="moreReplies > 0" type="button" class="bcm-link" @click="allReplies.add(m.seq)">
+            {{ t('discussion.showReplies', { count: moreReplies }) }}
+          </button>
+          <p v-if="m.repliesTruncated" class="bcm-hint">{{ t('discussion.repliesTruncated') }}</p>
+          <MessageComposer
+            v-if="replying && ctl.state.inline"
+            kind="reply"
+            :draft="ctl.state.inline"
+            :wait="ctl.waitLeft(ctl.state.inline)"
+            :rules-href="routes.rulesPath"
+            :replying-to="ctl.state.inline.replyingTo"
+            @submit="ctl.submitInline()"
+            @cancel="ctl.closeInline()"
+            @confirm="(code: string, checked: boolean) => ctl.state.inline && ctl.setConfirmed(ctl.state.inline, code, checked)"
+            @confirmed="ctl.state.inline && ctl.sendConfirmed(ctl.state.inline)"
+          />
+        </template>
+      </div>
+    </article>
+  </li>
+</template>