@blogmcp/community 0.1.0 → 0.2.0

package/src/ui/MemberSettingsView.vue

@@ -0,0 +1,175 @@
+<script setup lang="ts">
+/**
+ * `<blogmcp-member-settings>`: the member's notification settings (m2-contracts.md §3.3, §3.4, §3.10) — the six
+ * switches saved one by one, this browser's push (only while the module offers it: „Zapnout upozornění" on the
+ * member's click, „Vypnout", the sentence about what a notification carries, „Otevřít v prohlížeči" in Facebook's or
+ * Instagram's in-app browser, the install guide on iOS outside the home screen), and the digest's one-click
+ * unsubscribe when the e-mail's link (`#u=`) brought the member here — which works without a session too.
+ */
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, useHost, watch } from 'vue'
+import { signInLink, type CommunityMessageKey, type CommunityTransport } from '@blogmcp/sdk/community'
+import { isSitePath } from '../core/attrs'
+import { communityClientFor, siteBaseFor, warnOnce } from '../core/client'
+import { digestTokenForElement } from '../core/digest-token'
+import { documentLang, pickLang, type Lang } from '../core/i18n'
+import { failureText } from '../core/outcomes'
+import { createMemberSettings, SETTING_KEYS, type MemberSettingsController, type SettingKey } from '../core/settings'
+import { provideText, uid } from './context'
+
+defineOptions({ inheritAttrs: false })
+
+const props = defineProps<{
+  apiBase?: string
+  siteBase?: string
+  lang?: string
+  /** The host's service worker script (default `<site-base>/sw.js`): served from @blogmcp/sdk/community/sw. */
+  swPath?: string
+  routes?: string | Record<string, unknown>
+  signInHref?: string
+  transport?: CommunityTransport
+}>()
+
+const lang = ref<Lang>(pickLang(props.lang, documentLang()))
+const { t, text } = provideText(lang)
+const id = uid('bcm-settings')
+const host = useHost()
+
+const siteBase = siteBaseFor(props.siteBase)
+const client = siteBase === null ? null : communityClientFor(props.apiBase, props.transport, siteBase)
+
+function swPathOf(value: string | undefined): string | null {
+  if (value === undefined || value === '') return `${siteBase ?? ''}/sw.js`
+  if (isSitePath(value)) return value
+  warnOnce('sw-path', '[blogmcp-community] sw-path must be a path on this site (e.g. "/blog/sw.js"): the service worker is the site’s own')
+  return null
+}
+// The digest's token is read and cleared from the address first, whatever follows: a misconfigured element (no
+// client, a refused sw-path) renders nothing, but never leaves the member's capability in the URL or its history.
+const digestToken = digestTokenForElement(host)
+const swPath = swPathOf(props.swPath)
+const ctl: MemberSettingsController | null = client && swPath ? createMemberSettings({ client, swPath, digestToken }) : null
+const state = ctl?.state ?? null
+
+onMounted(() => void ctl?.load())
+onBeforeUnmount(() => ctl?.dispose())
+
+const LABELS: Readonly<Record<SettingKey, CommunityMessageKey>> = Object.freeze({
+  notifyReply: 'settings.notifyReply',
+  notifyMention: 'settings.notifyMention',
+  notifyTopic: 'settings.notifyTopic',
+  pushEnabled: 'settings.pushEnabled',
+  digestEmail: 'settings.digestEmail',
+  quietHours: 'settings.quietHours',
+})
+
+const failure = computed(() => {
+  const f = state?.failure
+  if (!f) return ''
+  const r = failureText(f, lang.value)
+  return t(r.key, r.params)
+})
+const pushFailure = computed(() => {
+  const f = state?.push.failure
+  if (!f) return ''
+  const r = failureText(f, lang.value)
+  return t(r.key, r.params)
+})
+const digestFailure = computed(() => {
+  const f = state?.digest.failure
+  if (!f) return ''
+  const r = failureText(f, lang.value)
+  return t(r.key, r.params)
+})
+const pageUrl = computed(() => (typeof location === 'undefined' ? '' : location.href))
+
+function signInHref(): string | null {
+  return signInLink(props.signInHref, typeof location === 'undefined' ? null : location.pathname)
+}
+
+function onSwitch(key: SettingKey, e: Event): void {
+  void ctl?.toggle(key, (e.target as HTMLInputElement).checked)
+}
+
+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" class="bcm bcm-settings" :lang="lang" :aria-labelledby="`${id}-title`">
+    <h2 :id="`${id}-title`">{{ t('settings.title') }}</h2>
+
+    <!-- the digest's unsubscribe link: offered whoever is signed in (the link is the authorisation) -->
+    <section v-if="state.digest.offered" class="bcm-card" :aria-labelledby="`${id}-digest`">
+      <h3 :id="`${id}-digest`">{{ t('settings.digestEmail') }}</h3>
+      <p v-if="state.digest.outcome === 'unsubscribed'" role="status">{{ t('settings.digest.unsubscribed') }}</p>
+      <p v-else-if="state.digest.outcome === 'staleLink'" class="bcm-note" role="alert">{{ t('settings.digest.staleLink') }}</p>
+      <template v-else>
+        <p>{{ t('settings.digest.prompt') }}</p>
+        <p v-if="digestFailure" class="bcm-error" role="alert">{{ digestFailure }}</p>
+        <div class="bcm-row">
+          <button type="button" class="bcm-btn bcm-primary" :disabled="state.digest.sending" @click="ctl.unsubscribeDigest()">{{ t('settings.digest.confirm') }}</button>
+        </div>
+      </template>
+    </section>
+
+    <p v-if="state.phase === 'loading' || state.phase === 'idle'" class="bcm-muted" role="status">{{ t('common.loading') }}</p>
+    <div v-else-if="state.phase === 'signIn'" class="bcm-row">
+      <p>{{ t('settings.signIn') }}</p>
+      <a v-if="signInHref()" class="bcm-btn bcm-primary" :href="signInHref() ?? undefined">{{ t('common.signIn') }}</a>
+    </div>
+    <div v-else-if="state.phase === 'failed'" class="bcm-banner" role="alert">
+      <span>{{ failure }}</span>
+      <button type="button" class="bcm-btn" @click="ctl.load()">{{ t('common.retry') }}</button>
+    </div>
+    <template v-else-if="state.settings">
+      <ul class="bcm-switches">
+        <li v-for="key in SETTING_KEYS" :key="key">
+          <label class="bcm-check">
+            <input type="checkbox" :name="key" :checked="state.settings[key]" :disabled="!!state.saving[key]" @change="onSwitch(key, $event)" />
+            <span>{{ t(LABELS[key]) }}</span>
+          </label>
+        </li>
+      </ul>
+
+      <!-- this browser's push -->
+      <section v-if="ctl.pushShown()" class="bcm-card" :aria-labelledby="`${id}-push`">
+        <h3 :id="`${id}-push`">{{ t('settings.pushEnabled') }}</h3>
+        <p class="bcm-hint">{{ t('settings.push.carries') }}</p>
+        <template v-if="state.push.support === 'inApp'">
+          <p>{{ t('settings.push.inAppExplain') }}</p>
+          <p><a :href="pageUrl" target="_blank" rel="noopener">{{ t('settings.push.openInBrowser') }}</a></p>
+          <p class="bcm-url">{{ pageUrl }}</p>
+        </template>
+        <p v-else-if="state.push.support === 'iosInstall'">{{ t('settings.push.iosGuide') }}</p>
+        <p v-else-if="state.push.support === 'unsupported'">{{ t('settings.push.unsupported') }}</p>
+        <template v-else>
+          <p v-if="state.push.note === 'reset'" class="bcm-note">{{ t('settings.push.reset') }}</p>
+          <p v-else-if="state.push.note === 'denied'" class="bcm-note" role="alert">{{ t('settings.push.denied') }}</p>
+          <p v-else-if="state.push.note === 'refused'" class="bcm-note" role="alert">{{ t('settings.push.refused') }}</p>
+          <p v-if="pushFailure && state.push.note === null" class="bcm-error" role="alert">{{ pushFailure }}</p>
+          <div class="bcm-row">
+            <button v-if="state.push.status === 'on'" type="button" class="bcm-btn" @click="ctl.disablePush()">{{ t('settings.push.disable') }}</button>
+            <button
+              v-else
+              type="button"
+              class="bcm-btn bcm-primary"
+              :disabled="state.push.status === 'busy' || state.push.status === 'checking'"
+              @click="ctl.enablePush()"
+            >{{ t('settings.push.enable') }}</button>
+          </div>
+        </template>
+      </section>
+    </template>
+
+    <p class="bcm-sr" aria-live="polite">{{ liveText }}</p>
+  </section>
+</template>

package/src/ui/MessageComposer.vue

@@ -3,10 +3,12 @@
  * 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`).
+ * 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.
  */
 import { computed, onBeforeUnmount, ref, watch } from 'vue'
-import { COMMUNITY_MESSAGE_LINKS_MAX, COMMUNITY_MESSAGE_MAX, confirmMessageKey } from '@blogmcp/sdk/community'
+import { COMMUNITY_MESSAGE_LINKS_MAX, COMMUNITY_MESSAGE_MAX, communityMentionHandles, 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'
@@ -20,6 +22,8 @@ const props = defineProps<{
   replyingTo?: string | null
   /** The host's rules page. */
   rulesHref?: string
+  /** M2 T10: the distinct mentions one message may carry; null or absent: no limit known here. */
+  mentionsMax?: number | null
 }>()
 const emit = defineEmits<{ submit: []; cancel: []; confirmed: []; confirm: [code: string, checked: boolean] }>()
 const { t, lang } = useText()
@@ -28,7 +32,11 @@ 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 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)
 const allConfirmed = computed(() => {
   const c = props.draft.confirm
   return c !== null && c.codes.every((code) => c.checked.includes(code))
@@ -39,6 +47,8 @@ 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 ''
+  // The mention warning below says it already, as long as the draft is over the cap.
+  if (f.code === 'mentionLimit' && mentionsOver.value) 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)
@@ -94,7 +104,7 @@ defineExpose({ focus: () => input.value?.focus() })
       rows="4"
       :placeholder="t('composer.placeholder')"
       :aria-describedby="`${id}-counter ${id}-hints`"
-      :aria-invalid="over"
+      :aria-invalid="over || mentionsOver"
       :readonly="draft.sending"
       @keydown="onKey"
     />
@@ -113,6 +123,7 @@ defineExpose({ focus: () => input.value?.focus() })
       <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="mentionsOver" class="bcm-error" role="alert">{{ t('error.mentionLimit') }}</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">

package/src/ui/MessageItem.vue

@@ -13,7 +13,7 @@
  * the plain placeholder.
  */
 import { computed } from 'vue'
-import { hasCommunityMessage, noteMessageKey, warningMessageKey, type CommunityMessageKey, type DiscussionMessage } from '@blogmcp/sdk/community'
+import { communityMessageAnchor, 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'
@@ -40,9 +40,18 @@ 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. */
+/**
+ * The consent step can be opened from here: the discussion asks this member for it, or the member refused it where the
+ * tenant leaves the public discussion open (`acceptances.art9Refused`, M2 T9: needs name no consent then, yet the post
+ * stays hidden from others until it is given) — and the onboarding is not open yet.
+ */
+const refusedConsent = computed(() => ctl.state.me?.acceptances.art9Refused === true)
 const canGiveConsent = computed(
-  () => untilConsent.value && ctl.mode() === 'onboarding' && ctl.needs().art9 && !ctl.onboarding.value && ctl.state.refusedAge === null,
+  () =>
+    untilConsent.value &&
+    !ctl.onboarding.value &&
+    ctl.state.refusedAge === null &&
+    ((ctl.mode() === 'onboarding' && ctl.needs().art9) || refusedConsent.value),
 )
 
 const authorName = computed(() => {
@@ -62,6 +71,8 @@ const badge = computed(() => {
 const placeholderKey = computed<CommunityMessageKey>(() =>
   m.value.state === 'held' ? 'discussion.placeholderHeld' : m.value.state === 'removed' ? 'discussion.placeholderRemoved' : 'discussion.placeholderDeleted',
 )
+/** M2 T10: the row's anchor (`bcm-msg-<seq>`), the fragment the notification centre's links carry; none while pending. */
+const anchorId = computed(() => (m.value.pending ? undefined : (communityMessageAnchor(m.value.seq) ?? undefined)))
 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)
@@ -78,6 +89,11 @@ const shownReplies = computed(() => (allReplies.has(m.value.seq) ? m.value.repli
 const moreReplies = computed(() => m.value.replies.length - shownReplies.value.length)
 
 const target = computed(() => ({ conversationId: m.value.conversationId, seq: m.value.seq }))
+/**
+ * A mention links to the member's profile for a viewer who may see profiles (a signed-in host session, m2-contracts.md
+ * §3.3: "never a hyperlink to a profile for a member who cannot see it"); an anonymous reader reads it as text.
+ */
+const mentionProfiles = computed(() => (ctl.needs().signIn ? null : routes.value.profilePath))
 
 const menu = computed<MenuItem[]>(() => {
   const items: MenuItem[] = []
@@ -112,7 +128,7 @@ function toggle(set: Set<number>): void {
 </script>
 
 <template>
-  <li class="bcm-msg-item">
+  <li :id="anchorId" 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">
@@ -134,7 +150,7 @@ function toggle(set: Set<number>): void {
           <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>
+            <button v-if="canGiveConsent" type="button" class="bcm-link" @click="ctl.beginOnboarding(refusedConsent ? { offerArt9: true } : {})">{{ 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>
@@ -147,12 +163,13 @@ function toggle(set: Set<number>): void {
             :draft="ctl.state.inline"
             :wait="ctl.waitLeft(ctl.state.inline)"
             :rules-href="routes.rulesPath"
+            :mentions-max="ctl.mentionCap()"
             @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-else class="bcm-text"><LinkedText :text="text" :profile-path="mentionProfiles" /></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>
@@ -192,6 +209,7 @@ function toggle(set: Set<number>): void {
             :draft="ctl.state.inline"
             :wait="ctl.waitLeft(ctl.state.inline)"
             :rules-href="routes.rulesPath"
+            :mentions-max="ctl.mentionCap()"
             :replying-to="ctl.state.inline.replyingTo"
             @submit="ctl.submitInline()"
             @cancel="ctl.closeInline()"

package/src/ui/MyCommunityView.vue

@@ -29,6 +29,7 @@ import { receiptForElement } from '../core/receipt'
 import AuthorAvatar from './AuthorAvatar.vue'
 import ConfirmDialog from './ConfirmDialog.vue'
 import NoticeStatusView from './NoticeStatusView.vue'
+import OnboardingSteps from './OnboardingSteps.vue'
 import StatementView from './StatementView.vue'
 import { provideText, uid } from './context'
 
@@ -120,6 +121,7 @@ const appealStatusKey = (decisionId: string): CommunityMessageKey | null => {
 }
 
 const consent = computed(() => state?.me?.acceptances.art9Consent ?? null)
+const consentRefused = computed(() => state?.me?.acceptances.art9Refused === true)
 const member = computed(() => state?.me?.member ?? null)
 const profile = computed(() => state?.me?.profile ?? null)
 
@@ -309,6 +311,13 @@ watch(
               <button type="button" class="bcm-btn" :disabled="!!state.busy.consent" @click="confirming = 'consent'">{{ t('panel.art9Withdraw') }}</button>
             </div>
           </template>
+          <template v-else-if="consentRefused">
+            <p>{{ t('panel.art9Refused') }}</p>
+            <OnboardingSteps v-if="ctl.consent.value" :model="ctl.consent.value" :rules-href="routes.rulesPath" @cancel="ctl.closeConsent()" />
+            <div v-else class="bcm-row">
+              <button type="button" class="bcm-btn bcm-primary" @click="ctl.giveConsent()">{{ t('discussion.giveConsent') }}</button>
+            </div>
+          </template>
           <p v-else>{{ t('panel.art9NotGiven') }}</p>
         </section>
 

package/src/ui/NotificationCentreView.vue

@@ -0,0 +1,159 @@
+<script setup lang="ts">
+/**
+ * `<blogmcp-notification-centre>`: the member's notifications (m2-contracts.md §3.3, §3.10) — newest first, older
+ * ones a page at a time, „Jen nepřečtené", one marked read or all, and the link to the settings page. Each row is the
+ * catalogue's sentence of its code (never anything a member wrote) and, where the host has a page for it, its
+ * subject's link: a decision's statement, the settings (push reset), „Moje komunita" (the module's and the account's
+ * 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.
+ */
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import {
+  communityMessageLink,
+  notificationMessageKey,
+  signInLink,
+  statementPath,
+  type CommunityMessageKey,
+  type CommunityTransport,
+  type NotificationItem,
+} from '@blogmcp/sdk/community'
+import { parseRoutes, routesWithDefaults } from '../core/attrs'
+import { createNotificationCentre, type NotificationCentreController } from '../core/centre'
+import { communityClientFor, siteBaseFor } from '../core/client'
+import { formatDate } from '../core/format'
+import { documentLang, pickLang, type Lang } from '../core/i18n'
+import { failureText } from '../core/outcomes'
+import { provideText, uid } from './context'
+
+defineOptions({ inheritAttrs: false })
+
+const props = defineProps<{
+  apiBase?: string
+  siteBase?: string
+  lang?: string
+  /** JSON (or an object): `statementPath`, `myCommunityPath`, `settingsPath`, `articlePath`, … */
+  routes?: string | Record<string, unknown>
+  signInHref?: string
+  transport?: CommunityTransport
+}>()
+
+const lang = ref<Lang>(pickLang(props.lang, documentLang()))
+const { t, text } = provideText(lang)
+const id = uid('bcm-centre')
+
+const siteBase = siteBaseFor(props.siteBase)
+const client = siteBase === null ? null : communityClientFor(props.apiBase, props.transport, siteBase)
+const ctl: NotificationCentreController | null = client ? createNotificationCentre({ client }) : null
+const state = ctl?.state ?? null
+const routes = computed(() => routesWithDefaults(parseRoutes(props.routes), null, siteBase ?? ''))
+
+onMounted(() => void ctl?.load())
+onBeforeUnmount(() => ctl?.dispose())
+
+const failure = computed(() => {
+  const f = state?.failure
+  if (!f) return ''
+  const r = failureText(f, lang.value)
+  return t(r.key, r.params)
+})
+
+function signInHref(): string | null {
+  return signInLink(props.signInHref, typeof location === 'undefined' ? null : location.pathname)
+}
+
+const sentence = (n: NotificationItem): CommunityMessageKey | null => notificationMessageKey(n.code)
+
+/** 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 {
+  if (n.decisionId) {
+    const href = statementPath(routes.value.statementPath, n.decisionId)
+    return href ? { href, key: 'sanction.statement' } : null
+  }
+  if (n.code === 'reply' || n.code === 'mention') {
+    const href = communityMessageLink(routes.value.articlePath, n.articleSlug, n.seq)
+    return href ? { href, key: 'centre.openMessage' } : null
+  }
+  if (n.code === 'module_push_reset') return { href: routes.value.settingsPath, key: 'centre.settings' }
+  if (n.code === 'module_read_only' || n.code === 'module_braked' || n.code === 'age_limit_changed' || n.code === 'erasure_scheduled' || n.code === 'inactivity_warning') {
+    return { href: routes.value.myCommunityPath, key: 'panel.title' }
+  }
+  return null
+}
+
+function onUnreadOnly(e: Event): void {
+  void ctl?.setUnreadOnly((e.target as HTMLInputElement).checked)
+}
+
+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" class="bcm bcm-centre" :lang="lang" :aria-labelledby="`${id}-title`">
+    <div class="bcm-row">
+      <h2 :id="`${id}-title`">{{ t('centre.title') }}</h2>
+      <span v-if="state.phase === 'ready' && ctl.unread() > 0" class="bcm-badge">{{ t('panel.unread', { count: ctl.unread() }) }}</span>
+    </div>
+
+    <p v-if="state.phase === 'loading' || state.phase === 'idle'" class="bcm-muted" role="status">{{ t('common.loading') }}</p>
+    <div v-else-if="state.phase === 'signIn'" class="bcm-row">
+      <p>{{ t('centre.signIn') }}</p>
+      <a v-if="signInHref()" class="bcm-btn bcm-primary" :href="signInHref() ?? undefined">{{ t('common.signIn') }}</a>
+    </div>
+    <div v-else-if="state.phase === 'failed'" class="bcm-banner" role="alert">
+      <span>{{ failure }}</span>
+      <button type="button" class="bcm-btn" @click="ctl.load()">{{ t('common.retry') }}</button>
+    </div>
+    <template v-else>
+      <div class="bcm-row">
+        <label class="bcm-check">
+          <input type="checkbox" :checked="state.unreadOnly" @change="onUnreadOnly" />
+          <span>{{ t('centre.unreadOnly') }}</span>
+        </label>
+        <span class="bcm-spacer" />
+        <!-- Also while older pages are not loaded yet: their unread rows are marked by { all: true } too. -->
+        <button v-if="ctl.unread() > 0 || state.nextCursor !== null" type="button" class="bcm-btn bcm-small" :disabled="!!state.busy.all" @click="ctl.markAllRead()">{{ t('centre.markAllRead') }}</button>
+      </div>
+
+      <p v-if="state.items.length === 0" class="bcm-muted">{{ t('centre.empty') }}</p>
+      <ul v-else class="bcm-list">
+        <li v-for="n in state.items" :key="n.id" :class="{ 'bcm-unread': n.readAt === null }">
+          <p v-if="sentence(n)" :id="`${id}-s-${n.id}`">{{ t(sentence(n)!) }}</p>
+          <time :id="`${id}-t-${n.id}`" class="bcm-time" :datetime="n.createdAt">{{ formatDate(lang, n.createdAt) }}</time>
+          <div class="bcm-row">
+            <a v-if="subjectOf(n)" :href="subjectOf(n)!.href">{{ t(subjectOf(n)!.key) }}</a>
+            <span class="bcm-spacer" />
+            <!-- Every row's button reads the same: its row's sentence and time tell a screen reader which one it is. -->
+            <button
+              v-if="n.readAt === null"
+              type="button"
+              class="bcm-btn bcm-small"
+              :aria-describedby="sentence(n) ? `${id}-s-${n.id} ${id}-t-${n.id}` : `${id}-t-${n.id}`"
+              :disabled="!!state.busy[`read:${n.id}`]"
+              @click="ctl.markRead(n.id)"
+            >
+              {{ t('panel.markRead') }}
+            </button>
+          </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('centre.loadMore') }}</button>
+      </div>
+      <p><a :href="routes.settingsPath">{{ t('centre.settings') }}</a></p>
+    </template>
+
+    <p class="bcm-sr" aria-live="polite">{{ liveText }}</p>
+  </section>
+</template>

package/src/ui/OnboardingSteps.vue

@@ -1,14 +1,15 @@
 <script setup lang="ts">
 /**
  * The inline onboarding (core/onboarding.ts): one step at a time, the focus moved to each step's heading,
- * the rules as text with a link to the full page, the art. 9 text as text paragraphs.
+ * the rules as text with a link to the full page, the art. 9 text as text paragraphs — shown once, with one consent
+ * under `joint` and one per controller under `split` (each labelled with its controller, all required), and
+ * „Nesouhlasím" where the tenant's refusal leaves the public discussion open (m2-contracts.md §3.8).
  */
 import { computed, nextTick, onMounted, ref, watch } from 'vue'
 import { AGE_BANDS, COMMUNITY_DISPLAY_NAME_MAX, COMMUNITY_HANDLE_CHANGE_DAYS, type AgeBand, type CommunityMessageKey } from '@blogmcp/sdk/community'
 import { AVATAR_PRESETS } from '../core/avatars'
 import { HANDLE_MAX, HANDLE_MIN } from '../core/names'
-import type { OnboardingModel } from '../core/onboarding'
-import { failureText } from '../core/outcomes'
+import { onboardingFailureText, type OnboardingModel } from '../core/onboarding'
 import { uid, useText } from './context'
 
 const props = defineProps<{ model: OnboardingModel; rulesHref: string }>()
@@ -24,7 +25,7 @@ const fresh = computed(() => s.steps.includes('profile'))
 const failure = computed(() => {
   const f = s.failure
   if (!f) return ''
-  const ref = failureText(f, lang.value)
+  const ref = onboardingFailureText(f, lang.value)
   return t(ref.key, ref.params)
 })
 const ageKey = (band: AgeBand): CommunityMessageKey => `onboarding.age.${band}`
@@ -91,11 +92,20 @@ onMounted(() => void nextTick(() => heading.value?.focus()))
 
       <div v-else-if="step === 'art9'" class="bcm-section">
         <h4>{{ t('onboarding.art9Title') }}</h4>
-        <p>{{ t('onboarding.art9Lede') }}</p>
+        <!-- Where a refusal leaves the public discussion open, the lede does not make writing depend on the consent. -->
+        <p>{{ model.refusalOffered() ? t('onboarding.art9LedeOptional') : t('onboarding.art9Lede') }}</p>
         <div class="bcm-consent" tabindex="0" role="document" :aria-label="t('onboarding.art9Title')">
           <p v-for="(paragraph, i) in s.art9Paragraphs" :key="i" class="bcm-text">{{ paragraph }}</p>
         </div>
-        <label class="bcm-check">
+        <!-- split: one consent per controller, grouped, each one required (the form is novalidate: `required` is announced). -->
+        <fieldset v-if="s.art9Controllers.length > 1" class="bcm-fieldset">
+          <legend class="bcm-sr">{{ t('onboarding.art9Title') }}</legend>
+          <label v-for="c in s.art9Controllers" :key="c.entity" class="bcm-check">
+            <input v-model="c.accepted" type="checkbox" required />
+            <span>{{ t('onboarding.art9Controller', { label: c.label }) }}</span>
+          </label>
+        </fieldset>
+        <label v-else class="bcm-check">
           <input v-model="s.art9Accepted" type="checkbox" />
           <span>{{ t('onboarding.art9Accept') }}</span>
         </label>
@@ -154,6 +164,7 @@ onMounted(() => void nextTick(() => heading.value?.focus()))
         <button v-if="s.index > 0" type="button" class="bcm-btn" :disabled="s.phase === 'sending'" @click="model.back()">{{ t('onboarding.back') }}</button>
         <button type="button" class="bcm-btn" :disabled="s.phase === 'sending'" @click="emit('cancel')">{{ t('common.cancel') }}</button>
         <span class="bcm-spacer" />
+        <button v-if="model.canRefuse()" type="button" class="bcm-btn" @click="model.refuse()">{{ t('onboarding.art9Refuse') }}</button>
         <button type="submit" class="bcm-btn bcm-primary" :disabled="!model.canContinue()">
           {{ s.phase === 'sending' ? t('composer.sending') : model.isLast() ? t('onboarding.submit') : t('onboarding.continue') }}
         </button>