@blogmcp/community 0.2.0 → 0.3.0

package/src/ui/MembersOnly.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+/**
+ * The forum's answer to anyone it is not open to (m3-contracts.md §1.2, §3.1 step 3; D-M3-3): one sentence, and the
+ * way in — the sign-in link for a visitor (or a session the tenant does not admit as a member), the onboarding inline
+ * for a member session that has not finished joining (`needs` `onboarding` / `reconsent_rules`). The onboarding asked
+ * here is the one reading the forum needs: the art. 9 consent waits for the first write.
+ */
+import { computed, onBeforeUnmount, shallowRef } from 'vue'
+import { signInLink, type CommunityClient, type CommunityFailure } from '@blogmcp/sdk/community'
+import { membersOnlyAsk } from '../core/forum-state'
+import type { Lang } from '../core/i18n'
+import { createOnboarding, type OnboardingModel } from '../core/onboarding'
+import OnboardingSteps from './OnboardingSteps.vue'
+import { useText } from './context'
+
+const props = defineProps<{ failure: CommunityFailure | null; client: CommunityClient; lang: Lang; signInHref?: string; rulesHref: string }>()
+const emit = defineEmits<{ joined: [] }>()
+const { t } = useText()
+
+const ask = computed(() => membersOnlyAsk(props.failure))
+const model = shallowRef<OnboardingModel | null>(null)
+const abort = new AbortController()
+onBeforeUnmount(() => abort.abort())
+
+function signInHref(): string | null {
+  return signInLink(props.signInHref, typeof location === 'undefined' ? null : location.pathname)
+}
+
+function join(): void {
+  if (model.value) return
+  const m = createOnboarding({
+    client: props.client,
+    lang: props.lang,
+    signal: abort.signal,
+    onDone: () => {
+      model.value = null
+      emit('joined')
+    },
+    onSignIn: () => {
+      model.value = null
+    },
+  })
+  model.value = m
+  void m.load()
+}
+</script>
+
+<template>
+  <div class="bcm-section">
+    <p class="bcm-note">{{ t('error.membersOnly') }}</p>
+    <OnboardingSteps v-if="model" :model="model" :rules-href="rulesHref" @cancel="model = null" />
+    <div v-else-if="ask === 'join'" class="bcm-row">
+      <button type="button" class="bcm-btn bcm-primary" @click="join">{{ t('forum.join') }}</button>
+    </div>
+    <div v-else-if="signInHref()" class="bcm-row">
+      <a class="bcm-btn bcm-primary" :href="signInHref() ?? undefined">{{ t('common.signIn') }}</a>
+    </div>
+  </div>
+</template>

package/src/ui/MessageComposer.vue

@@ -6,17 +6,31 @@
  * asks for one (the same text goes again with `confirmations`). M2 T10: with the member's mention cap
  * (`mentionsMax`, me/get's `caps.mentionsPerMessage`), a draft that mentions more distinct `@handle`s says so as it
  * is typed (`error.mentionLimit`) and is not sent; kb-api's MENTION_LIMIT stays the rule.
+ *
+ * M3 (m3-contracts.md §3.3, §5.3; B21): a draft with a `title` (a string) asks for a topic's title too — a new topic
+ * (`kind` `topic`, its body the opening post) or its author's edit of the opening post — 1 to 200 UTF-16 units, as
+ * kb-api counts them (forumTopicTitleOf); the link to the rules stays, as on every composer.
  */
 import { computed, onBeforeUnmount, ref, watch } from 'vue'
-import { COMMUNITY_MESSAGE_LINKS_MAX, COMMUNITY_MESSAGE_MAX, communityMentionHandles, confirmMessageKey } from '@blogmcp/sdk/community'
+import {
+  COMMUNITY_MESSAGE_LINKS_MAX,
+  COMMUNITY_MESSAGE_MAX,
+  COMMUNITY_TOPIC_TITLE_MAX,
+  communityMentionHandles,
+  confirmMessageKey,
+  forumTopicTitleOf,
+  topicTitleLength,
+} 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'
+  /** M3: `title` (a string) asks for a topic's title too; null or absent: no title. */
+  draft: Draft & { title?: string | null }
+  /** M3: `topic` — a new topic (the title and its opening post). */
+  kind: 'new' | 'reply' | 'edit' | 'topic'
   /** Seconds the draft still waits (the controller's clock). */
   wait: number
   replyingTo?: string | null
@@ -36,12 +50,23 @@ const mentionsOver = computed(() => {
   const max = props.mentionsMax
   return typeof max === 'number' && max >= 0 && communityMentionHandles(normalizeBody(props.draft.body)).length > max
 })
-const canSend = computed(() => !props.draft.sending && length.value > 0 && !over.value && !mentionsOver.value && props.wait === 0 && props.draft.confirm === null)
+/** M3: the draft asks for a topic's title. */
+const titled = computed(() => typeof props.draft.title === 'string')
+const titleLength = computed(() => topicTitleLength(props.draft.title))
+const titleOver = computed(() => titled.value && titleLength.value > COMMUNITY_TOPIC_TITLE_MAX)
+const titleOk = computed(() => !titled.value || forumTopicTitleOf(props.draft.title) !== null)
+/** The post is written and the title is still blank: said where the title goes (the button waits for it). */
+const titleMissing = computed(() => titled.value && !titleOver.value && !titleOk.value && length.value > 0)
+const canSend = computed(
+  () => !props.draft.sending && length.value > 0 && !over.value && !mentionsOver.value && titleOk.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 label = computed(() =>
+  t(props.kind === 'reply' ? 'composer.replyLabel' : props.kind === 'edit' ? 'composer.editLabel' : props.kind === 'topic' ? 'topic.bodyLabel' : '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
@@ -69,9 +94,9 @@ onBeforeUnmount(() => {
 })
 
 // A changed text is a new attempt: the old refusal and the confirmation it asked for no longer apply
-// (a cooldown still does).
+// (a cooldown still does). M3: the title is part of the text.
 watch(
-  () => props.draft.body,
+  () => [props.draft.body, props.draft.title] as const,
   () => {
     const d = props.draft
     if (d.confirm) d.confirm = null
@@ -94,6 +119,23 @@ defineExpose({ focus: () => input.value?.focus() })
 
 <template>
   <form class="bcm-composer" @submit.prevent="onSubmit">
+    <template v-if="titled">
+      <label :for="`${id}-title`" class="bcm-label">{{ t('topic.titleLabel') }}</label>
+      <input
+        :id="`${id}-title`"
+        v-model="draft.title"
+        class="bcm-input"
+        type="text"
+        autocomplete="off"
+        :aria-describedby="`${id}-title-counter`"
+        :aria-invalid="titleOver"
+        :readonly="draft.sending"
+        @keydown="onKey"
+      />
+      <span :id="`${id}-title-counter`" class="bcm-counter" :class="{ 'bcm-counter-over': titleOver }">{{ t('composer.counter', { length: titleLength, max: COMMUNITY_TOPIC_TITLE_MAX }) }}</span>
+      <p v-if="titleOver" class="bcm-error">{{ t('topic.titleTooLong', { max: COMMUNITY_TOPIC_TITLE_MAX }) }}</p>
+      <p v-else-if="titleMissing" class="bcm-hint">{{ t('topic.titleMissing') }}</p>
+    </template>
     <label :for="id" class="bcm-label">{{ label }}</label>
     <p v-if="replyingTo" class="bcm-hint">{{ t('composer.replyingTo', { name: replyingTo }) }}</p>
     <textarea
@@ -112,9 +154,9 @@ defineExpose({ focus: () => input.value?.focus() })
       <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 v-if="kind !== 'new' && kind !== 'topic'" 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') }}
+        {{ draft.sending ? t('composer.sending') : kind === 'edit' ? t('composer.save') : kind === 'topic' ? t('topic.create') : t('composer.submit') }}
       </button>
     </div>
     <div :id="`${id}-hints`" class="bcm-hint">

package/src/ui/MessageItem.vue

@@ -11,6 +11,11 @@
  * 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.
+ *
+ * M3 (m3-contracts.md §3.5, §4.5, §5.3): under a topic — „Moderátor" beside a member's message in a category the member
+ * moderates now (`author.moderator`, the only place the label shows), the topic's title in its author's edit of the
+ * opening post, and a category moderator's items in the menu (the topic's context provides them). A message waiting in
+ * pre-moderation reads „Čeká na kontrolu" to its author, as any held one.
  */
 import { computed } from 'vue'
 import { communityMessageAnchor, hasCommunityMessage, noteMessageKey, warningMessageKey, type CommunityMessageKey, type DiscussionMessage } from '@blogmcp/sdk/community'
@@ -29,7 +34,7 @@ defineOptions({ name: 'MessageItem' })
 
 const props = defineProps<{ message: DiscussionMessage }>()
 const { t, lang } = useText()
-const { ctl, routes, opened, originals, allReplies, deleteMessage } = useDiscussion()
+const { ctl, routes, opened, originals, allReplies, deleteMessage, extraMenu, onExtraMenu } = useDiscussion()
 
 /** Replies shown before „Zobrazit další odpovědi". */
 const REPLIES_SHOWN = 3
@@ -61,6 +66,8 @@ const authorName = computed(() => {
   return a.displayName ?? t('author.deleted')
 })
 const handle = computed(() => (m.value.author.kind === 'member' ? m.value.author.handle : null))
+/** M3 (D-M3-7, §4.5): an appointment acting now, in this topic's category — never a trust level. */
+const moderatorLabel = computed(() => m.value.author.kind === 'member' && 'moderator' in m.value.author && m.value.author.moderator === true)
 const badge = computed(() => {
   const a = m.value.author
   if (a.kind !== 'staff') return null
@@ -106,6 +113,8 @@ const menu = computed<MenuItem[]>(() => {
     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') })
+  // M3: a category moderator's items (the topic's context names them; none elsewhere).
+  if (extraMenu) items.push(...extraMenu(msg))
   return items
 })
 
@@ -115,6 +124,7 @@ function onMenu(id: string): void {
   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')
+  else onExtraMenu?.(id, msg)
 }
 
 function reply(): void {
@@ -135,6 +145,7 @@ function toggle(set: Set<number>): void {
         <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="moderatorLabel" class="bcm-badge bcm-badge-team">{{ t('role.moderator') }}</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>

package/src/ui/MessageMenu.vue

@@ -8,7 +8,8 @@ import { nextTick, onBeforeUnmount, ref } from 'vue'
 import { uid, useText } from './context'
 import type { MenuItem } from './types'
 
-defineProps<{ items: MenuItem[] }>()
+/** M3: the toggle's own text (a topic's moderator menu); absent: „Další akce". */
+defineProps<{ items: MenuItem[]; label?: string }>()
 const emit = defineEmits<{ select: [id: string] }>()
 const { t } = useText()
 
@@ -55,7 +56,7 @@ onBeforeUnmount(() => document.removeEventListener('pointerdown', onOutside, tru
       :aria-controls="listId"
       @click="setOpen(!open)"
     >
-      {{ t('discussion.menu') }}
+      {{ label ?? t('discussion.menu') }}
     </button>
     <div v-if="open" :id="listId" class="bcm-menu-list">
       <template v-for="item in items" :key="item.id">

package/src/ui/ModeratorDialog.vue

@@ -0,0 +1,102 @@
+<script setup lang="ts">
+/**
+ * A category moderator's dialog in a topic (m3-contracts.md §3.4, §4.5; D-M3-6): remove a message — the rule of the
+ * tenant's rules text it breaks and the facts, as the statement of reasons will state them; the statement comes back
+ * and is shown —, pass a message to the team (an illegal line's matter: the moderator sees nothing of it afterwards), or
+ * move the topic into another category they moderate. A native modal dialog; the focus returns where it was.
+ */
+import { computed, ref } from 'vue'
+import { ESCALATION_CATEGORIES, type CaseCategory, type CommunityMessageKey } from '@blogmcp/sdk/community'
+import type { TopicController } from '../core/topic'
+import { failureText } from '../core/outcomes'
+import { codePointLength, normalizeBody } from '../core/text'
+import { uid, useModal, useText } from './context'
+
+const props = defineProps<{ ctl: TopicController; fallbackFocus?: () => HTMLElement | null }>()
+const emit = defineEmits<{ close: [] }>()
+const { t, lang } = useText()
+
+const dialog = ref<HTMLDialogElement | null>(null)
+const id = uid('bcm-moderator')
+useModal(dialog, () => emit('close'), props.fallbackFocus)
+
+const d = computed(() => props.ctl.extras.dialog)
+const titleKey = computed<CommunityMessageKey>(() => (d.value?.kind === 'remove' ? 'moderation.remove' : d.value?.kind === 'escalate' ? 'moderation.escalate' : 'moderation.move'))
+const categoryKey = (c: CaseCategory): CommunityMessageKey => `category.${c}`
+const failure = computed(() => {
+  const f = d.value?.failure
+  if (!f) return ''
+  const r = failureText(f, lang.value)
+  return t(r.key, r.params)
+})
+const canSend = computed(() => {
+  const x = d.value
+  if (!x || x.sending || x.done) return false
+  if (x.kind === 'move') return x.categoryId !== ''
+  if (x.kind === 'escalate') return x.category !== ''
+  const facts = normalizeBody(x.facts)
+  return x.ruleId !== '' && facts !== '' && codePointLength(facts) <= 4000
+})
+</script>
+
+<template>
+  <dialog ref="dialog" class="bcm-dialog" :aria-labelledby="`${id}-title`">
+    <form v-if="d" class="bcm-dialog-body bcm-form" novalidate @submit.prevent="canSend && ctl.submitDialog()">
+      <h3 :id="`${id}-title`">{{ t(titleKey) }}</h3>
+
+      <template v-if="d.kind === 'remove'">
+        <template v-if="!d.done">
+          <p>{{ t('moderation.removeLede') }}</p>
+          <div class="bcm-field">
+            <label :for="`${id}-rule`">{{ t('statement.contractualGround') }}</label>
+            <select :id="`${id}-rule`" v-model="d.ruleId" class="bcm-input bcm-select" required>
+              <option value="" disabled>{{ t('moderation.ruleRequired') }}</option>
+              <option v-for="r in ctl.extras.rules ?? []" :key="r.id" :value="r.id">{{ r.title }}</option>
+            </select>
+          </div>
+          <div class="bcm-field">
+            <label :for="`${id}-facts`">{{ t('statement.facts') }}</label>
+            <textarea :id="`${id}-facts`" v-model="d.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>
+        </template>
+        <template v-else>
+          <p role="status">{{ t('moderation.removed') }}</p>
+          <h4>{{ t('statement.title') }}</h4>
+          <pre class="bcm-facts">{{ d.statement }}</pre>
+        </template>
+      </template>
+
+      <template v-else-if="d.kind === 'escalate'">
+        <template v-if="!d.done">
+          <p>{{ t('moderation.escalateLede') }}</p>
+          <div class="bcm-field">
+            <label :for="`${id}-category`">{{ t('moderation.escalateCategory') }}</label>
+            <select :id="`${id}-category`" v-model="d.category" class="bcm-input bcm-select" required>
+              <option value="" disabled>{{ t('moderation.escalateCategory') }}</option>
+              <option v-for="c in ESCALATION_CATEGORIES" :key="c" :value="c">{{ t(categoryKey(c)) }}</option>
+            </select>
+          </div>
+        </template>
+        <p v-else role="status">{{ t('moderation.escalated') }}</p>
+      </template>
+
+      <template v-else>
+        <div class="bcm-field">
+          <label :for="`${id}-target`">{{ t('moderation.moveTo') }}</label>
+          <select :id="`${id}-target`" v-model="d.categoryId" class="bcm-input bcm-select" required>
+            <option value="" disabled>{{ t('moderation.moveTo') }}</option>
+            <option v-for="c in ctl.extras.moveTargets ?? []" :key="c.id" :value="c.id">{{ c.name }}</option>
+          </select>
+        </div>
+      </template>
+
+      <p v-if="failure" class="bcm-error" role="alert">{{ failure }}</p>
+      <div class="bcm-row">
+        <span class="bcm-spacer" />
+        <button type="button" class="bcm-btn" :disabled="d.sending" @click="emit('close')">{{ d.done ? t('common.close') : t('common.cancel') }}</button>
+        <button v-if="!d.done" type="submit" class="bcm-btn bcm-primary" :class="{ 'bcm-danger': d.kind === 'remove' }" :disabled="!canSend">{{ t(titleKey) }}</button>
+      </div>
+    </form>
+  </dialog>
+</template>

package/src/ui/MyCommunityView.vue

@@ -10,6 +10,7 @@
 import { computed, nextTick, onBeforeUnmount, onMounted, ref, useHost, watch } from 'vue'
 import {
   COMMUNITY_HANDLE_CHANGE_DAYS,
+  adverseOutcomeMessageKey,
   signInLink,
   statementPath,
   type CommunityMessageKey,
@@ -283,6 +284,8 @@ watch(
             <li v-for="r in state.reports" :key="r.caseId">
               <p v-if="categoryKey(r.category)"><strong>{{ t(categoryKey(r.category)!) }}</strong></p>
               <p v-if="caseStatusKey(r.status)">{{ t(caseStatusKey(r.status)!) }}</p>
+              <!-- M3 (§3.5, §4.7): an adverse-event case's outcome, where M1 shows a decision. -->
+              <p v-if="adverseOutcomeMessageKey(r.outcome)">{{ t(adverseOutcomeMessageKey(r.outcome)!) }}</p>
               <time class="bcm-time" :datetime="r.reportedAt">{{ formatDate(lang, r.reportedAt) }}</time>
               <p v-if="r.decidedAt" class="bcm-muted">{{ t('statement.decidedAt', { date: formatDate(lang, r.decidedAt) }) }}</p>
             </li>

package/src/ui/NoticeStatusView.vue

@@ -3,9 +3,13 @@
  * A notifier's view of their notice (DSA art. 16(5), 17; m1-contracts.md §7.7 `notices/status`): its status,
  * the statement once decided — never the case's package —, and the appeal while its window is open. The
  * receipt that opened it came in the address's fragment and is gone from the address bar already.
+ *
+ * M3 (m3-contracts.md §3.5, §4.7): an adverse-event notice the team closed with its outcome reads the outcome in plain
+ * words and the redress line (a court or an out-of-court settlement), as the `notice_closed` e-mail does — a case
+ * closed by its outcome alone has no decision, so no statement and no appeal; a decided case keeps both.
  */
 import { computed } from 'vue'
-import { COMMUNITY_APPEAL_MAX, type NoticeStatus } from '@blogmcp/sdk/community'
+import { COMMUNITY_APPEAL_MAX, adverseOutcomeMessageKey, type NoticeStatus } from '@blogmcp/sdk/community'
 import type { AppealDraft } from '../core/panel'
 import { formatDate, isPast } from '../core/format'
 import { knownKey } from '../core/i18n'
@@ -21,6 +25,10 @@ const id = uid('bcm-notice-status')
 const n = computed(() => props.notice)
 const category = computed(() => knownKey(`category.${n.value.category}`))
 const status = computed(() => knownKey(`caseStatus.${n.value.status}`))
+/** M3: the adverse-event outcome's words (null: none, or one this SDK has no words for). */
+const outcome = computed(() => adverseOutcomeMessageKey(n.value.outcome))
+/** Closed by its outcome alone: no decision — nothing to appeal; the redress line says what is left. */
+const outcomeOnly = computed(() => outcome.value !== null && n.value.statement === null && !n.value.appeal.canAppeal && !n.value.appeal.open)
 const length = computed(() => codePointLength(normalizeBody(props.appeal.body)))
 const canSend = computed(() => !props.appeal.sending && length.value > 0 && length.value <= COMMUNITY_APPEAL_MAX)
 const closed = computed(() => (n.value.appeal.closesAt ? isPast(n.value.appeal.closesAt) : false))
@@ -47,12 +55,17 @@ const failure = computed(() => {
     </dl>
     <p class="bcm-muted">{{ t('notice.submittedAt', { date: formatDate(lang, n.submittedAt) }) }}</p>
     <p v-if="n.decidedAt" class="bcm-muted">{{ t('notice.decidedAt', { date: formatDate(lang, n.decidedAt) }) }}</p>
+    <template v-if="outcome">
+      <h4>{{ t('notice.outcome') }}</h4>
+      <p>{{ t(outcome) }}</p>
+      <p v-if="outcomeOnly">{{ t('notice.redress') }}</p>
+    </template>
     <template v-if="n.statement">
       <h4>{{ t('notice.statement') }}</h4>
       <pre class="bcm-facts">{{ n.statement }}</pre>
     </template>
 
-    <section v-if="n.decidedAt" class="bcm-card" :aria-labelledby="`${id}-appeal`">
+    <section v-if="n.decidedAt && !outcomeOnly" class="bcm-card" :aria-labelledby="`${id}-appeal`">
       <h4 :id="`${id}-appeal`">{{ t('notice.appealTitle') }}</h4>
       <template v-if="n.appeal.open">
         <p>{{ t('notice.appealOpen') }}</p>

package/src/ui/NotificationCentreView.vue

@@ -7,11 +7,23 @@
  * notices), and (M2 T10) a reply's or a mention's message on its article — the host's `articlePath` with the slug
  * and the message's anchor (`#bcm-msg-<seq>`); a host without `articlePath`, or a row without a slug or seq (an
  * article no longer live, an older kb-api), keeps the sentence unlinked. A visitor gets the sign-in sentence.
+ *
+ * M3 (m3-contracts.md §4.3): `topic_update` (a followed conversation's new message) links like a reply; `category_topic`
+ * (a followed category's new topic) links the topic's page (`topicPath`, the forum's default under the site base) —
+ * and, of the „Články" category, the new discussion's message on its article (kb-api names the article there; its own
+ * sentence, notificationItemMessageKey).
+ *
+ * M3 FX (the review of wave 1, R20): kb-api names each row's conversation kind (`conversationKind`). A topic's `reply`,
+ * `mention` and `topic_update` link their message on the topic's page (topicMessageLink); an article's link it on the
+ * article while kb-api names the article — and a row of an article no longer readable stays an article's row: unlinked,
+ * never a topic's link, and a „Články" `category_topic` keeps its sentence of a discussion under an article.
  */
 import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import {
   communityMessageLink,
-  notificationMessageKey,
+  topicMessageLink,
+  topicPath,
+  notificationItemMessageKey,
   signInLink,
   statementPath,
   type CommunityMessageKey,
@@ -62,7 +74,9 @@ function signInHref(): string | null {
   return signInLink(props.signInHref, typeof location === 'undefined' ? null : location.pathname)
 }
 
-const sentence = (n: NotificationItem): CommunityMessageKey | null => notificationMessageKey(n.code)
+/** The row's sentence; a „Články" row whose article is no longer readable is still a discussion under an article (R20). */
+const sentence = (n: NotificationItem): CommunityMessageKey | null =>
+  n.code === 'category_topic' && n.conversationKind === 'article' ? 'notification.category_topic.article' : notificationItemMessageKey(n)
 
 /** The page a notification's subject is on, with its link text; null when the host has none for it. */
 function subjectOf(n: NotificationItem): { href: string; key: CommunityMessageKey } | null {
@@ -70,7 +84,27 @@ function subjectOf(n: NotificationItem): { href: string; key: CommunityMessageKe
     const href = statementPath(routes.value.statementPath, n.decisionId)
     return href ? { href, key: 'sanction.statement' } : null
   }
-  if (n.code === 'reply' || n.code === 'mention') {
+  // M3 (§4.3): `category_topic` is a followed category's new topic — its page — or, of the „Články" category, a
+  // discussion new to its listing: kb-api names the article then, and the row links its message there (the wave 2
+  // integration; a row whose article is no longer readable names none and reads as a topic's).
+  if (n.code === 'category_topic') {
+    // An article's row (kb-api names its kind; an older kb-api only its article): its message on the article while the
+    // article is readable — else unlinked, never a topic's page.
+    if (n.articleId || n.conversationKind === 'article') {
+      const href = communityMessageLink(routes.value.articlePath, n.articleSlug, n.seq)
+      return href ? { href, key: 'centre.openMessage' } : null
+    }
+    const href = typeof n.conversationId === 'string' ? topicPath(routes.value.topicPath, n.conversationId) : null
+    return href ? { href, key: 'topic.open' } : null
+  }
+  // A reply, a mention or (M3) a followed conversation's new message: a topic's links its message on the topic's page
+  // (R20: kb-api names the kind), an article's its message on the article while kb-api names the article (M2 T10) — an
+  // article no longer readable names none, and its row stays unlinked.
+  if (n.code === 'reply' || n.code === 'mention' || n.code === 'topic_update') {
+    if (n.conversationKind === 'topic') {
+      const href = typeof n.conversationId === 'string' && typeof n.seq === 'number' ? topicMessageLink(routes.value.topicPath, n.conversationId, n.seq) : null
+      return href ? { href, key: 'centre.openMessage' } : null
+    }
     const href = communityMessageLink(routes.value.articlePath, n.articleSlug, n.seq)
     return href ? { href, key: 'centre.openMessage' } : null
   }

package/src/ui/ProfileView.vue

@@ -1,12 +1,14 @@
 <script setup lang="ts">
 /**
  * `<blogmcp-profile handle>`: a member's public profile (m2-contracts.md §3.2, §3.10) — the name and avatar, since
- * when they are a member (a month), the bio as text, and the trust level as its label („Nový člen" … „Moderátor"),
- * never its number. An unknown handle reads one line; a visitor gets the sign-in sentence (profiles are for signed-in
- * readers, kb-api's rule).
+ * when they are a member (a month), the bio as text, and the trust level as its label („Nový člen" … „Důvěryhodný
+ * člen", M3 D-M3-7), never its number. M3 (m3-contracts.md §3.5, §4.5): „Moderátor" with the categories the member
+ * moderates now — an appointment, shown to forum members only (kb-api sends `moderates` to them alone). An unknown
+ * handle reads one line; a visitor gets the sign-in sentence (profiles are for signed-in readers, kb-api's rule).
  */
 import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
-import { signInLink, type CommunityTransport } from '@blogmcp/sdk/community'
+import { categoryPath, signInLink, type CommunityTransport } from '@blogmcp/sdk/community'
+import { parseRoutes, routesWithDefaults } from '../core/attrs'
 import { communityClientFor, siteBaseFor } from '../core/client'
 import { formatMonth } from '../core/format'
 import { documentLang, pickLang, type Lang } from '../core/i18n'
@@ -48,6 +50,7 @@ watch(
 onBeforeUnmount(() => ctl?.dispose())
 
 const since = computed(() => (state?.memberSince ? formatMonth(lang.value, state.memberSince) : ''))
+const routes = computed(() => routesWithDefaults(parseRoutes(props.routes), null, siteBase ?? ''))
 const failure = computed(() => {
   const f = state?.failure
   if (!f) return ''
@@ -81,6 +84,14 @@ function signInHref(): string | null {
         </div>
       </header>
       <p v-if="state.trustKey"><span class="bcm-badge">{{ t(state.trustKey) }}</span></p>
+      <p v-if="state.moderates.length > 0" class="bcm-row">
+        <span class="bcm-badge bcm-badge-team">{{ t('role.moderator') }}</span>
+        <span>{{ t('profile.moderates') }}</span>
+        <template v-for="c in state.moderates" :key="c.slug">
+          <a v-if="categoryPath(routes.categoryPath, c.slug)" :href="categoryPath(routes.categoryPath, c.slug) ?? undefined">{{ c.name }}</a>
+          <span v-else>{{ c.name }}</span>
+        </template>
+      </p>
       <p v-if="since" class="bcm-muted">{{ t('profile.memberSince', { date: since }) }}</p>
       <section v-if="state.bio" class="bcm-section" :aria-labelledby="`${id}-bio`">
         <h3 :id="`${id}-bio`">{{ t('profile.bio') }}</h3>

package/src/ui/TopicRow.vue

@@ -0,0 +1,70 @@
+<script setup lang="ts">
+/**
+ * One row of a category's list (m3-contracts.md §3.2): a topic — its title (a link to the topic's page; a missing title
+ * reads „Smazané téma" only for a deleted opening post, the withheld wording otherwise), pinned, closed or archived,
+ * „čeká na kontrolu" on the viewer's own topic waiting for review, its author, the messages everyone is shown and its
+ * last activity — or in „Články" an article's discussion: the article's title — M3 FX (R20): a link to the article's
+ * page (the host's `articlePath` with kb-api's `articleSlug`; text where the host gives no article template) — with
+ * its follow button.
+ */
+import { computed } from 'vue'
+import { communityArticleLink, topicPath, topicTitleOf, type CommunityMessageKey, type KnownTopicItem } from '@blogmcp/sdk/community'
+import type { FollowController } from '../core/follow'
+import { formatDate } from '../core/format'
+import FollowToggle from './FollowToggle.vue'
+import { useText } from './context'
+
+const props = defineProps<{ item: KnownTopicItem; topicHref: string; articleHref?: string | null; follow?: FollowController | null }>()
+const { t, lang } = useText()
+
+const title = computed(() => (props.item.kind === 'topic' ? topicTitleOf(props.item) : null))
+const titleText = computed(() => {
+  const ti = title.value
+  if (!ti) return ''
+  return ti.kind === 'shown' ? ti.text : t(ti.kind === 'deleted' ? 'topic.deleted' : 'topic.withheld')
+})
+const href = computed(() => (props.item.kind === 'topic' ? topicPath(props.topicHref, props.item.conversationId) : null))
+/** R20: a „Články" row's article page (null without the host's article template, or for an older kb-api's row without a slug). */
+const articleLink = computed(() => (props.item.kind === 'article' ? communityArticleLink(props.articleHref, props.item.articleSlug) : null))
+const stateKey = computed<CommunityMessageKey | null>(() => {
+  if (props.item.kind !== 'topic') return null
+  return props.item.state === 'locked' ? 'topic.locked' : props.item.state === 'archived' ? 'topic.archived' : null
+})
+const authorName = computed(() => {
+  if (props.item.kind !== 'topic') return null
+  const a = props.item.author
+  if (a.kind === 'member') return 'displayName' in a && a.displayName ? a.displayName : t('author.deleted')
+  if (a.kind === 'staff' && 'displayName' in a) return a.displayName
+  return null
+})
+</script>
+
+<template>
+  <li class="bcm-topic-row">
+    <template v-if="item.kind === 'topic'">
+      <p class="bcm-topic-title">
+        <a v-if="href" :href="href" :class="{ 'bcm-placeholder': title?.kind !== 'shown' }">{{ titleText }}</a>
+        <span v-else :class="{ 'bcm-placeholder': title?.kind !== 'shown' }">{{ titleText }}</span>
+      </p>
+      <p class="bcm-row bcm-muted">
+        <span v-if="item.pinned" class="bcm-badge">{{ t('topic.pinned') }}</span>
+        <span v-if="stateKey" class="bcm-badge">{{ t(stateKey) }}</span>
+        <span v-if="item.openingState === 'held' && title?.kind === 'shown'" class="bcm-badge">{{ t('state.held') }}</span>
+        <span v-if="authorName">{{ authorName }}</span>
+        <span>{{ t('topic.count', { count: item.count }) }}</span>
+        <time :datetime="item.lastActivityAt">{{ t('forum.lastActivity', { date: formatDate(lang, item.lastActivityAt) }) }}</time>
+      </p>
+    </template>
+    <template v-else>
+      <p class="bcm-topic-title">
+        <a v-if="articleLink" :href="articleLink">{{ item.articleTitle ?? t('search.inArticle') }}</a>
+        <span v-else>{{ item.articleTitle ?? t('search.inArticle') }}</span>
+      </p>
+      <p class="bcm-row bcm-muted">
+        <span>{{ t('discussion.count', { count: item.count }) }}</span>
+        <time :datetime="item.lastActivityAt">{{ t('forum.lastActivity', { date: formatDate(lang, item.lastActivityAt) }) }}</time>
+        <FollowToggle v-if="follow" :ctl="follow" />
+      </p>
+    </template>
+  </li>
+</template>