@blogmcp/community 0.1.0 → 0.3.0

package/src/ui/NotificationCentreView.vue

@@ -0,0 +1,193 @@
+<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.
+ *
+ * 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,
+  topicMessageLink,
+  topicPath,
+  notificationItemMessageKey,
+  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)
+}
+
+/** 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 {
+  if (n.decisionId) {
+    const href = statementPath(routes.value.statementPath, n.decisionId)
+    return href ? { href, key: 'sanction.statement' } : null
+  }
+  // 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
+  }
+  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>

package/src/ui/ProfileView.vue

@@ -0,0 +1,102 @@
+<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" … „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 { 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'
+import { failureText } from '../core/outcomes'
+import { createProfile, type ProfileController } from '../core/profile'
+import AuthorAvatar from './AuthorAvatar.vue'
+import { provideText, uid } from './context'
+
+defineOptions({ inheritAttrs: false })
+
+const props = defineProps<{
+  /** The member's handle (`jana_n`, an `@` in front is fine). */
+  handle?: string
+  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-profile')
+
+const siteBase = siteBaseFor(props.siteBase)
+const client = siteBase === null ? null : communityClientFor(props.apiBase, props.transport, siteBase)
+const ctl: ProfileController | null = client ? createProfile({ client }) : null
+const state = ctl?.state ?? null
+
+onMounted(() => void ctl?.load(props.handle ?? ''))
+// A host that reuses the element for another member (client-side navigation) reads that one.
+watch(
+  () => props.handle,
+  (next, before) => {
+    if (next !== before) void ctl?.load(next ?? '')
+  },
+)
+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 ''
+  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)
+}
+</script>
+
+<template>
+  <section v-if="ctl && state" class="bcm bcm-profile" :lang="lang" :aria-labelledby="`${id}-title`">
+    <p v-if="state.phase === 'loading' || state.phase === 'idle'" class="bcm-muted" role="status">{{ t('common.loading') }}</p>
+    <p v-else-if="state.phase === 'notFound'" :id="`${id}-title`" class="bcm-note">{{ t('profile.notFound') }}</p>
+    <div v-else-if="state.phase === 'signIn'" class="bcm-row">
+      <p :id="`${id}-title`">{{ t('profile.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 :id="`${id}-title`">{{ failure }}</span>
+      <button type="button" class="bcm-btn" @click="ctl.load(props.handle ?? '')">{{ t('common.retry') }}</button>
+    </div>
+    <template v-else-if="state.author && state.author.kind === 'member'">
+      <header class="bcm-profile-head">
+        <AuthorAvatar :author="state.author" />
+        <div class="bcm-msg-main">
+          <h2 :id="`${id}-title`">{{ state.author.displayName }}</h2>
+          <span class="bcm-handle">{{ state.author.handle }}</span>
+        </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>
+        <p class="bcm-text">{{ state.bio }}</p>
+      </section>
+    </template>
+  </section>
+</template>

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>