@blogmcp/community 0.1.0 → 0.3.0

package/src/ui/ForumSearchView.vue

@@ -0,0 +1,171 @@
+<script setup lang="ts">
+/**
+ * `<blogmcp-forum-search>` (m3-contracts.md §3.2, §4.4, §5.3; D-M3-5): the forum's search for its members — a query of
+ * 2 to 200 characters (said before it goes: kb-api would refuse it and spend the quota), the space (the forum, the
+ * article discussions or both) and a category to narrow by; 20 hits a page, five pages at most. A hit reads as text:
+ * a topic's title or a message's snippet (at most 200 characters, no markup), linked to the topic (a message by its
+ * anchor) — an article discussion's hit to its message on the article (the host's `articlePath` with kb-api's
+ * `articleSlug`, the wave 2 integration; a host without `articlePath` keeps it text); a topic's title reads as on a
+ * category's row (topicTitleOf — M3 FX2, S12: „Smazané téma" for a hit under a deleted opening post, kb-api's
+ * `openingState`; the withheld wording for a title kept from the viewer). The forum's search box brings the query in
+ * the page's fragment (`#q=…`), which never reaches a server; a new `#q=` on the same page searches again.
+ */
+import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import {
+  COMMUNITY_SEARCH_PAGES_MAX,
+  COMMUNITY_SEARCH_QUERY_MAX,
+  COMMUNITY_SEARCH_QUERY_MIN,
+  communityMessageLink,
+  topicMessageLink,
+  topicPath,
+  topicTitleOf,
+  type CommunityTransport,
+  type ForumSearchResult,
+} from '@blogmcp/sdk/community'
+import { parseRoutes, routesWithDefaults } from '../core/attrs'
+import { communityClientFor, siteBaseFor } from '../core/client'
+import { createSearch, queryFromHash, type SearchController } from '../core/forum-search'
+import { formatDate } from '../core/format'
+import { documentLang, pickLang, type Lang } from '../core/i18n'
+import { failureText } from '../core/outcomes'
+import MembersOnly from './MembersOnly.vue'
+import { provideText, uid } from './context'
+
+defineOptions({ inheritAttrs: false })
+
+const props = defineProps<{
+  apiBase?: string
+  siteBase?: string
+  lang?: string
+  routes?: string | Record<string, unknown>
+  signInHref?: string
+  transport?: CommunityTransport
+}>()
+
+const lang = ref<Lang>(pickLang(props.lang, documentLang()))
+const { t } = provideText(lang)
+const id = uid('bcm-search')
+watch(
+  () => props.lang,
+  (v) => {
+    lang.value = pickLang(v, documentLang())
+  },
+)
+
+const siteBase = siteBaseFor(props.siteBase)
+const client = siteBase === null ? null : communityClientFor(props.apiBase, props.transport, siteBase)
+const ctl: SearchController | null = client ? createSearch({ client, query: queryFromHash(typeof location === 'undefined' ? null : location.hash) }) : null
+const state = ctl?.state ?? null
+const routes = computed(() => routesWithDefaults(parseRoutes(props.routes), null, siteBase ?? ''))
+
+// A new `#q=` on the same page (the forum's search box there, the history's back and forward) is a new search.
+function onHashChange(): void {
+  const q = queryFromHash(location.hash)
+  if (!ctl || !state || q === null || q === state.query) return
+  state.query = q
+  void ctl.search()
+}
+onMounted(() => {
+  void ctl?.load()
+  if (typeof window !== 'undefined') window.addEventListener('hashchange', onHashChange)
+})
+onBeforeUnmount(() => {
+  if (typeof window !== 'undefined') window.removeEventListener('hashchange', onHashChange)
+  ctl?.dispose()
+})
+
+/** A hit's link: the topic (a message by its anchor), or an article discussion's message on its article. */
+function hrefOf(r: ForumSearchResult): string | null {
+  if (r.space === 'article') return communityMessageLink(routes.value.articlePath, r.articleSlug, r.seq)
+  if (r.space !== 'forum') return null
+  return r.seq !== null && r.kind === 'message' ? topicMessageLink(routes.value.topicPath, r.conversationId, r.seq) : topicPath(routes.value.topicPath, r.conversationId)
+}
+/** A hit's title: a topic's as topicTitleOf reads it (shown, deleted, withheld); an article discussion's, its article's. */
+function titleOf(r: ForumSearchResult): string {
+  if (r.space === 'forum') {
+    const ti = topicTitleOf(r)
+    return ti.kind === 'shown' ? ti.text : t(ti.kind === 'deleted' ? 'topic.deleted' : 'topic.withheld')
+  }
+  return r.title !== null && r.title.trim() !== '' ? r.title : t('search.inArticle')
+}
+const failure = computed(() => {
+  const f = state?.failure
+  if (!f) return ''
+  const r = failureText(f, lang.value)
+  return t(r.key, r.params)
+})
+const lastPage = computed(() => !!state && state.phase === 'ready' && state.page >= COMMUNITY_SEARCH_PAGES_MAX && state.results.length > 0)
+</script>
+
+<template>
+  <section v-if="ctl && state && state.phase !== 'hidden'" class="bcm bcm-forum-search" :lang="lang" :aria-labelledby="`${id}-title`">
+    <header class="bcm-head">
+      <h2 :id="`${id}-title`">{{ t('search.title') }}</h2>
+    </header>
+
+    <MembersOnly
+      v-if="state.phase === 'membersOnly' && client"
+      :failure="state.failure"
+      :client="client"
+      :lang="lang"
+      :sign-in-href="signInHref"
+      :rules-href="routes.rulesPath"
+      @joined="ctl.load()"
+    />
+
+    <!-- An element, not a fragment: it holds a form (see ForumView). -->
+    <div v-else class="bcm-search-body">
+      <form class="bcm-form" role="search" novalidate @submit.prevent="ctl.search()">
+        <div class="bcm-field">
+          <label :for="`${id}-q`">{{ t('search.label') }}</label>
+          <input :id="`${id}-q`" v-model="state.query" class="bcm-input" type="search" :aria-invalid="state.invalid !== null" :aria-describedby="`${id}-q-error`" />
+          <p v-if="state.invalid" :id="`${id}-q-error`" class="bcm-error" role="alert">
+            {{ state.invalid === 'short' ? t('search.tooShort', { min: COMMUNITY_SEARCH_QUERY_MIN }) : t('search.tooLong', { max: COMMUNITY_SEARCH_QUERY_MAX }) }}
+          </p>
+        </div>
+        <div class="bcm-row">
+          <label :for="`${id}-space`">{{ t('search.space') }}</label>
+          <select :id="`${id}-space`" v-model="state.space" class="bcm-input bcm-select">
+            <option value="">{{ t('search.spaceAll') }}</option>
+            <option value="forum">{{ t('search.spaceForum') }}</option>
+            <option value="article">{{ t('search.spaceArticle') }}</option>
+          </select>
+          <template v-if="state.categories.length > 0 && state.space !== 'article'">
+            <label :for="`${id}-category`">{{ t('search.category') }}</label>
+            <select :id="`${id}-category`" v-model="state.categoryId" class="bcm-input bcm-select">
+              <option value="">{{ t('forum.allCategories') }}</option>
+              <option v-for="c in state.categories" :key="c.id" :value="c.id">{{ c.name }}</option>
+            </select>
+          </template>
+          <button type="submit" class="bcm-btn bcm-primary" :disabled="state.phase === 'searching'">{{ t('search.submit') }}</button>
+        </div>
+      </form>
+
+      <p v-if="state.phase === 'searching'" class="bcm-muted" role="status">{{ t('search.searching') }}</p>
+      <div v-else-if="state.phase === 'failed'" class="bcm-banner" role="alert">
+        <span>{{ failure }}</span>
+      </div>
+      <template v-else-if="state.phase === 'ready'">
+        <p v-if="state.results.length === 0" class="bcm-muted" role="status">{{ t('search.empty') }}</p>
+        <ol v-else class="bcm-list">
+          <li v-for="(r, i) in state.results" :key="`${r.conversationId}:${r.seq ?? 0}:${i}`">
+            <p class="bcm-row bcm-muted">
+              <span class="bcm-badge">{{ r.kind === 'topic' ? t('search.topic') : t('search.message') }}</span>
+              <time :datetime="r.createdAt">{{ formatDate(lang, r.createdAt) }}</time>
+            </p>
+            <p class="bcm-topic-title">
+              <a v-if="hrefOf(r)" :href="hrefOf(r) ?? undefined" :class="{ 'bcm-placeholder': r.title === null }">{{ titleOf(r) }}</a>
+              <span v-else :class="{ 'bcm-placeholder': r.title === null }">{{ titleOf(r) }}</span>
+            </p>
+            <p v-if="r.snippet" class="bcm-text">{{ r.snippet }}</p>
+          </li>
+        </ol>
+        <p v-if="state.failure" class="bcm-error" role="alert">{{ failure }}</p>
+        <div v-if="state.hasMore" class="bcm-row">
+          <button type="button" class="bcm-btn" :disabled="state.loadingMore" @click="ctl.more()">{{ t('search.more') }}</button>
+        </div>
+        <p v-else-if="lastPage" class="bcm-hint">{{ t('search.lastPage') }}</p>
+      </template>
+    </div>
+  </section>
+</template>

package/src/ui/ForumView.vue

@@ -0,0 +1,128 @@
+<script setup lang="ts">
+/**
+ * `<blogmcp-forum>` (m3-contracts.md §5.3): the forum's index — the listed categories in the team's order, each with its
+ * description, how many topics (in „Články": article discussions) another member sees there, its last activity and its
+ * latest topics, and the search box (it opens the search page with the query in the fragment: `#q=…` never reaches a
+ * server). The forum is for its members: anyone else reads one sentence and the way in; a forum switched off renders
+ * nothing. Away mode and the forum's pause read one sentence each.
+ */
+import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import { COMMUNITY_SEARCH_QUERY_MIN, categoryPath, type CommunityTransport, type ForumCategory } from '@blogmcp/sdk/community'
+import { parseRoutes, routesWithDefaults } from '../core/attrs'
+import { communityClientFor, siteBaseFor } from '../core/client'
+import { createForum, type ForumController } from '../core/forum'
+import { searchLink } from '../core/forum-search'
+import { formatDate } from '../core/format'
+import { documentLang, pickLang, type Lang } from '../core/i18n'
+import { failureText } from '../core/outcomes'
+import ForumNotices from './ForumNotices.vue'
+import MembersOnly from './MembersOnly.vue'
+import TopicRow from './TopicRow.vue'
+import { provideText, uid } from './context'
+
+defineOptions({ inheritAttrs: false })
+
+const props = defineProps<{
+  apiBase?: string
+  siteBase?: string
+  lang?: string
+  /** JSON (or an object): the host's pages — `forumPath`, `categoryPath`, `topicPath`, `searchPath`, `rulesPath`, … */
+  routes?: string | Record<string, unknown>
+  signInHref?: string
+  transport?: CommunityTransport
+}>()
+
+const lang = ref<Lang>(pickLang(props.lang, documentLang()))
+const { t } = provideText(lang)
+const id = uid('bcm-forum')
+
+const siteBase = siteBaseFor(props.siteBase)
+const client = siteBase === null ? null : communityClientFor(props.apiBase, props.transport, siteBase)
+const ctl: ForumController | null = client ? createForum({ client }) : null
+const state = ctl?.state ?? null
+const routes = computed(() => routesWithDefaults(parseRoutes(props.routes), state?.me?.links, siteBase ?? ''))
+
+onMounted(() => void ctl?.load())
+onBeforeUnmount(() => ctl?.dispose())
+watch(
+  () => props.lang,
+  (v) => {
+    lang.value = pickLang(v, documentLang())
+  },
+)
+
+const query = ref('')
+const queryShort = ref(false)
+function search(): void {
+  const href = searchLink(routes.value.searchPath, query.value)
+  queryShort.value = href === null
+  if (href !== null && typeof location !== 'undefined') location.assign(href)
+}
+
+const failure = computed(() => {
+  const f = state?.failure
+  if (!f) return ''
+  const r = failureText(f, lang.value)
+  return t(r.key, r.params)
+})
+const countText = (c: ForumCategory): string =>
+  c.kind === 'article_discussions' ? t('forum.discussionCount', { count: c.topicCount }) : t('forum.topicCount', { count: c.topicCount })
+</script>
+
+<template>
+  <section v-if="ctl && state && state.phase !== 'hidden'" class="bcm bcm-forum" :lang="lang" :aria-labelledby="`${id}-title`">
+    <header class="bcm-head">
+      <h2 :id="`${id}-title`">{{ t('forum.title') }}</h2>
+    </header>
+
+    <p v-if="state.phase === 'loading'" class="bcm-muted" role="status">{{ t('forum.loading') }}</p>
+    <MembersOnly
+      v-else-if="state.phase === 'membersOnly' && client"
+      :failure="state.failure"
+      :client="client"
+      :lang="lang"
+      :sign-in-href="signInHref"
+      :rules-href="routes.rulesPath"
+      @joined="ctl.load()"
+    />
+    <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>
+
+    <!-- An element, not a fragment: it holds a form, and happy-dom (the specs) answers a form's nextSibling with null,
+         which a fragment's removal walks. -->
+    <div v-else-if="state.phase === 'ready'" class="bcm-forum-body">
+      <ForumNotices :me="state.me" />
+
+      <form class="bcm-row" role="search" @submit.prevent="search">
+        <label :for="`${id}-q`" class="bcm-sr">{{ t('forum.search') }}</label>
+        <input :id="`${id}-q`" v-model="query" class="bcm-input bcm-grow" type="search" :placeholder="t('forum.search')" />
+        <button type="submit" class="bcm-btn">{{ t('forum.searchSubmit') }}</button>
+        <p v-if="queryShort" class="bcm-error bcm-full" role="alert">{{ t('search.tooShort', { min: COMMUNITY_SEARCH_QUERY_MIN }) }}</p>
+      </form>
+
+      <p v-if="state.categories.length === 0" class="bcm-muted">{{ t('forum.empty') }}</p>
+      <ul v-else class="bcm-list">
+        <li v-for="c in state.categories" :key="c.id" class="bcm-category">
+          <h3>
+            <a v-if="categoryPath(routes.categoryPath, c.slug)" :href="categoryPath(routes.categoryPath, c.slug) ?? undefined">{{ c.name }}</a>
+            <template v-else>{{ c.name }}</template>
+          </h3>
+          <p v-if="c.description" class="bcm-text">{{ c.description }}</p>
+          <p class="bcm-row bcm-muted">
+            <span>{{ countText(c) }}</span>
+            <time v-if="c.lastActivityAt" :datetime="c.lastActivityAt">{{ t('forum.lastActivity', { date: formatDate(lang, c.lastActivityAt) }) }}</time>
+          </p>
+          <p v-if="c.mode === 'pre'" class="bcm-hint">{{ t('forum.modePre') }}</p>
+          <ul v-if="state.latest[c.id]?.length" class="bcm-topics" :aria-label="t('forum.latest')">
+            <TopicRow v-for="item in state.latest[c.id]" :key="item.conversationId" :item="item" :topic-href="routes.topicPath" :article-href="routes.articlePath" />
+          </ul>
+          <p v-if="categoryPath(routes.categoryPath, c.slug)">
+            <a :href="categoryPath(routes.categoryPath, c.slug) ?? undefined">{{ t('forum.allTopics') }}</a>
+          </p>
+        </li>
+      </ul>
+    </div>
+  </section>
+</template>

package/src/ui/LinkedText.vue

@@ -1,18 +1,24 @@
 <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.
+ * A member's text, as text: runs of text nodes, the web addresses in it as links that went through sanitizeUrl
+ * (core/text.ts) — `rel="nofollow ugc noopener noreferrer"`, a new tab — and, with `profilePath` (M2), each `@handle`
+ * as a link to that member's profile page on this site. Never HTML.
  */
 import { computed } from 'vue'
-import { linkify, UGC_LINK_REL } from '../core/text'
+import { profilePath as profilePathOf } from '@blogmcp/sdk/community'
+import { linkifyWithMentions, UGC_LINK_REL } from '../core/text'
 
-const props = defineProps<{ text: string | null }>()
-const segments = computed(() => linkify(props.text ?? ''))
+const props = defineProps<{ text: string | null; profilePath?: string | null }>()
+const segments = computed(() => {
+  const template = props.profilePath
+  return linkifyWithMentions(props.text ?? '', template ? (handle: string) => profilePathOf(template, handle) : null)
+})
 </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>
+    <a v-else-if="s.kind === 'mention'" class="bcm-mention" :href="s.href">{{ s.text }}</a>
     <template v-else>{{ s.text }}</template>
   </template>
 </template>

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/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>