@blogmcp/community 0.0.0-stage → 0.2.0

package/src/ui/NoticeStatusView.vue

@@ -0,0 +1,82 @@
+<script setup lang="ts">
+/**
+ * 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.
+ */
+import { computed } from 'vue'
+import { COMMUNITY_APPEAL_MAX, type NoticeStatus } from '@blogmcp/sdk/community'
+import type { AppealDraft } from '../core/panel'
+import { formatDate, isPast } from '../core/format'
+import { knownKey } from '../core/i18n'
+import { failureText } from '../core/outcomes'
+import { codePointLength, normalizeBody } from '../core/text'
+import { uid, useText } from './context'
+
+const props = defineProps<{ notice: NoticeStatus; appeal: AppealDraft; withdrawing: boolean }>()
+const emit = defineEmits<{ appeal: []; withdraw: [] }>()
+const { t, lang } = useText()
+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}`))
+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))
+const failure = computed(() => {
+  const f = props.appeal.failure
+  if (!f) return ''
+  const r = failureText(f, lang.value)
+  return t(r.key, r.params)
+})
+</script>
+
+<template>
+  <section class="bcm-section" :aria-labelledby="`${id}-title`">
+    <h3 :id="`${id}-title`">{{ t('notice.statusTitle') }}</h3>
+    <dl class="bcm-dl">
+      <template v-if="category">
+        <dt>{{ t('notice.category') }}</dt>
+        <dd>{{ t(category) }}</dd>
+      </template>
+      <template v-if="status">
+        <dt>{{ t('notice.statusTitle') }}</dt>
+        <dd>{{ t(status) }}</dd>
+      </template>
+    </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="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`">
+      <h4 :id="`${id}-appeal`">{{ t('notice.appealTitle') }}</h4>
+      <template v-if="n.appeal.open">
+        <p>{{ t('notice.appealOpen') }}</p>
+        <div class="bcm-row">
+          <button type="button" class="bcm-btn" :disabled="withdrawing" @click="emit('withdraw')">{{ t('notice.appealWithdraw') }}</button>
+        </div>
+      </template>
+      <template v-else-if="n.appeal.canAppeal">
+        <p>{{ t('notice.appealLede') }}</p>
+        <p v-if="n.appeal.closesAt" class="bcm-muted">{{ t('notice.appealUntil', { date: formatDate(lang, n.appeal.closesAt) }) }}</p>
+        <form class="bcm-form" novalidate @submit.prevent="canSend && emit('appeal')">
+          <div class="bcm-field">
+            <label :for="`${id}-body`">{{ t('notice.appealBody') }}</label>
+            <textarea :id="`${id}-body`" v-model="appeal.body" class="bcm-input bcm-textarea" rows="5" :aria-describedby="`${id}-counter`" :aria-invalid="length > COMMUNITY_APPEAL_MAX" />
+            <p :id="`${id}-counter`" class="bcm-counter">{{ t('statement.appealCounter', { length, max: COMMUNITY_APPEAL_MAX }) }}</p>
+          </div>
+          <p v-if="failure" class="bcm-error" role="alert">{{ failure }}</p>
+          <div class="bcm-row">
+            <button type="submit" class="bcm-btn bcm-primary" :disabled="!canSend">{{ appeal.sending ? t('statement.appealSending') : t('notice.appealSubmit') }}</button>
+          </div>
+        </form>
+      </template>
+      <p v-else-if="closed">{{ t('notice.appealClosed') }}</p>
+      <p v-else>{{ t('statement.appealUnavailable') }}</p>
+    </section>
+  </section>
+</template>

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

@@ -0,0 +1,174 @@
+<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 — 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 { onboardingFailureText, type OnboardingModel } from '../core/onboarding'
+import { uid, useText } from './context'
+
+const props = defineProps<{ model: OnboardingModel; rulesHref: string }>()
+const emit = defineEmits<{ cancel: [] }>()
+const { t, lang } = useText()
+
+const s = props.model.state
+const id = uid('bcm-onboarding')
+const heading = ref<HTMLElement | null>(null)
+const step = computed(() => props.model.step())
+const fresh = computed(() => s.steps.includes('profile'))
+
+const failure = computed(() => {
+  const f = s.failure
+  if (!f) return ''
+  const ref = onboardingFailureText(f, lang.value)
+  return t(ref.key, ref.params)
+})
+const ageKey = (band: AgeBand): CommunityMessageKey => `onboarding.age.${band}`
+
+// The focus goes to the step's heading on a new step and on a refusal; not while sending (the button keeps it).
+// Steps read again after a refusal (a new text, a step added) are a new step too, at the same index or not.
+watch(
+  () => [s.index, s.phase, s.steps.join()] as const,
+  ([index, phase, steps], [indexBefore, , stepsBefore]) => {
+    if (index !== indexBefore || steps !== stepsBefore || phase === 'refused' || phase === 'failed') void nextTick(() => heading.value?.focus())
+  },
+)
+onMounted(() => void nextTick(() => heading.value?.focus()))
+</script>
+
+<template>
+  <section class="bcm-card" :aria-labelledby="`${id}-title`">
+    <h3 :id="`${id}-title`" ref="heading" tabindex="-1">{{ t('onboarding.title') }}</h3>
+
+    <p v-if="s.phase === 'loading'" class="bcm-muted" role="status">{{ t('common.loading') }}</p>
+
+    <template v-else-if="s.phase === 'failed'">
+      <p class="bcm-error" role="alert">{{ failure }}</p>
+      <div class="bcm-row">
+        <button type="button" class="bcm-btn" @click="emit('cancel')">{{ t('common.cancel') }}</button>
+        <button type="button" class="bcm-btn bcm-primary" @click="model.load()">{{ t('common.retry') }}</button>
+      </div>
+    </template>
+
+    <template v-else-if="s.phase === 'refused'">
+      <p role="alert">{{ t('onboarding.ageBelow', { min: s.minAge ?? 18 }) }}</p>
+      <div class="bcm-row">
+        <button type="button" class="bcm-btn" @click="emit('cancel')">{{ t('common.close') }}</button>
+      </div>
+    </template>
+
+    <form v-else class="bcm-form" novalidate @submit.prevent="model.next()">
+      <p v-if="s.index === 0 && fresh" class="bcm-hint">{{ t('onboarding.lede') }}</p>
+
+      <fieldset v-if="step === 'age'" class="bcm-choices">
+        <legend>{{ t('onboarding.ageTitle') }}</legend>
+        <label v-for="band in AGE_BANDS" :key="band" class="bcm-choice">
+          <input v-model="s.ageBand" type="radio" :name="`${id}-age`" :value="band" />
+          <span>{{ t(ageKey(band)) }}</span>
+        </label>
+        <p class="bcm-hint bcm-full">{{ t('onboarding.ageHint') }}</p>
+      </fieldset>
+
+      <div v-else-if="step === 'rules'" class="bcm-section">
+        <h4>{{ t('onboarding.rulesTitle') }}</h4>
+        <p>{{ s.reconsent ? t('onboarding.rulesChanged') : t('onboarding.rulesLede') }}</p>
+        <ol v-if="s.rules.length" class="bcm-rules">
+          <li v-for="rule in s.rules" :key="rule.id">
+            <strong>{{ rule.title }}</strong>
+            <span v-if="rule.summary" class="bcm-hint">{{ rule.summary }}</span>
+          </li>
+        </ol>
+        <p><a :href="rulesHref" target="_blank" rel="noopener">{{ t('onboarding.rulesLink') }}</a></p>
+        <label class="bcm-check">
+          <input v-model="s.rulesAccepted" type="checkbox" />
+          <span>{{ t('onboarding.rulesAccept') }}</span>
+        </label>
+      </div>
+
+      <div v-else-if="step === 'art9'" class="bcm-section">
+        <h4>{{ t('onboarding.art9Title') }}</h4>
+        <!-- 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>
+        <!-- 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>
+      </div>
+
+      <div v-else-if="step === 'profile'" class="bcm-section">
+        <h4>{{ t('onboarding.profileTitle') }}</h4>
+        <div class="bcm-field">
+          <label :for="`${id}-name`">{{ t('onboarding.displayName') }}</label>
+          <input
+            :id="`${id}-name`"
+            v-model="s.displayName"
+            class="bcm-input"
+            autocomplete="nickname"
+            :maxlength="COMMUNITY_DISPLAY_NAME_MAX * 2"
+            :aria-invalid="model.hasFieldError('displayName')"
+            :aria-describedby="`${id}-name-hint`"
+          />
+          <p :id="`${id}-name-hint`" class="bcm-hint">{{ t('onboarding.displayNameHint') }}</p>
+        </div>
+        <div class="bcm-field">
+          <label :for="`${id}-handle`">{{ t('onboarding.handle') }}</label>
+          <input
+            :id="`${id}-handle`"
+            v-model="s.handle"
+            class="bcm-input"
+            autocomplete="username"
+            autocapitalize="none"
+            spellcheck="false"
+            :maxlength="HANDLE_MAX"
+            :placeholder="model.suggestedHandle() ?? ''"
+            :aria-invalid="model.hasFieldError('handle')"
+            :aria-describedby="`${id}-handle-hint`"
+          />
+          <p :id="`${id}-handle-hint`" class="bcm-hint">
+            {{ t('onboarding.handleHint', { min: HANDLE_MIN, max: HANDLE_MAX, days: COMMUNITY_HANDLE_CHANGE_DAYS }) }}
+          </p>
+          <p v-if="model.suggestedHandle()" class="bcm-hint">{{ t('onboarding.handleSuggested', { handle: model.suggestedHandle() ?? '' }) }}</p>
+        </div>
+        <fieldset class="bcm-choices">
+          <legend>{{ t('onboarding.avatar') }}</legend>
+          <label class="bcm-choice">
+            <input v-model="s.avatarPreset" type="radio" :name="`${id}-avatar`" :value="null" />
+            <span>{{ t('onboarding.avatarNone') }}</span>
+          </label>
+          <label v-for="preset in AVATAR_PRESETS" :key="preset.id" class="bcm-choice">
+            <input v-model="s.avatarPreset" type="radio" :name="`${id}-avatar`" :value="preset.id" />
+            <span>{{ preset.emoji }}</span>
+          </label>
+        </fieldset>
+      </div>
+
+      <p v-if="failure" class="bcm-error" role="alert">{{ failure }}</p>
+
+      <div class="bcm-row">
+        <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>
+      </div>
+    </form>
+  </section>
+</template>

package/src/ui/ProfileView.vue

@@ -0,0 +1,91 @@
+<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).
+ */
+import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import { signInLink, type CommunityTransport } from '@blogmcp/sdk/community'
+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 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="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/ReactionBar.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+/**
+ * Reactions from the tenant's set, counts only (who reacted is never shown in a public space). The viewer's
+ * own is a pressed button — a thicker border, a bold count and a spoken „Vaše reakce", not colour alone.
+ * A reader who cannot react sees the counts that are not zero.
+ */
+import { computed } from 'vue'
+import type { ReactionSummary } from '@blogmcp/sdk/community'
+import { useText } from './context'
+
+const props = defineProps<{
+  reactionSet: readonly string[]
+  summary: ReactionSummary
+  interactive: boolean
+  busy: boolean
+}>()
+const emit = defineEmits<{ react: [emoji: string] }>()
+const { t } = useText()
+
+const shown = computed(() => (props.interactive ? props.reactionSet : props.reactionSet.filter((e) => (props.summary.counts[e] ?? 0) > 0)))
+</script>
+
+<template>
+  <div v-if="shown.length" class="bcm-reactions" role="group" :aria-label="t('discussion.reactions')">
+    <template v-for="emoji in shown" :key="emoji">
+      <button
+        v-if="interactive"
+        type="button"
+        class="bcm-react"
+        :aria-pressed="summary.mine === emoji"
+        :disabled="busy"
+        :title="summary.mine === emoji ? t('discussion.reactionRemove') : t('discussion.reactionAdd')"
+        @click="emit('react', emoji)"
+      >
+        <span>{{ t('discussion.reactionCount', { emoji, count: summary.counts[emoji] ?? 0 }) }}</span>
+        <span v-if="summary.mine === emoji" class="bcm-sr">{{ t('discussion.reactionMine') }}</span>
+      </button>
+      <span v-else class="bcm-react">{{ t('discussion.reactionCount', { emoji, count: summary.counts[emoji] ?? 0 }) }}</span>
+    </template>
+  </div>
+</template>

package/src/ui/ReportDialog.vue

@@ -0,0 +1,88 @@
+<script setup lang="ts">
+/**
+ * A member's report of a message (`messages/report`): the category (community.md §5's list), the rule of
+ * the tenant's rules text when the category is the rules, and the one free text — a note only the team
+ * reads; a link to the full rules (community.md §4.5, in a new tab: the dialog stays). The outcome comes back
+ * in „Moje komunita".
+ */
+import { computed, ref } from 'vue'
+import { CASE_CATEGORIES, COMMUNITY_REPORT_NOTE_MAX, type CaseCategory, type CommunityMessageKey } from '@blogmcp/sdk/community'
+import type { ReportDraft } from '../core/discussion'
+import { failureText } from '../core/outcomes'
+import { codePointLength, normalizeBody } from '../core/text'
+import { uid, useModal, useText } from './context'
+
+const props = defineProps<{ report: ReportDraft; myCommunityHref: string; rulesHref?: string; fallbackFocus?: () => HTMLElement | null }>()
+const emit = defineEmits<{ submit: []; close: [] }>()
+const { t, lang } = useText()
+
+const dialog = ref<HTMLDialogElement | null>(null)
+const id = uid('bcm-report')
+useModal(dialog, () => emit('close'), props.fallbackFocus)
+
+const categoryKey = (c: CaseCategory): CommunityMessageKey => `category.${c}`
+const noteLength = computed(() => codePointLength(normalizeBody(props.report.note)))
+const canSend = computed(
+  () =>
+    !props.report.sending &&
+    props.report.category !== '' &&
+    (props.report.category !== 'rules' || props.report.ruleId !== '') &&
+    noteLength.value <= COMMUNITY_REPORT_NOTE_MAX,
+)
+const failure = computed(() => {
+  const f = props.report.failure
+  if (!f) return ''
+  const ref = failureText(f, lang.value)
+  return t(ref.key, ref.params)
+})
+</script>
+
+<template>
+  <dialog ref="dialog" class="bcm-dialog" :aria-labelledby="`${id}-title`">
+    <form class="bcm-dialog-body" novalidate @submit.prevent="canSend && emit('submit')">
+      <h3 :id="`${id}-title`">{{ t('report.title') }}</h3>
+      <template v-if="!report.done">
+        <p class="bcm-hint">{{ t('report.lede') }}</p>
+        <p v-if="rulesHref"><a :href="rulesHref" target="_blank" rel="noopener">{{ t('onboarding.rulesTitle') }}</a></p>
+        <fieldset class="bcm-choices">
+          <legend>{{ t('report.category') }}</legend>
+          <label v-for="c in CASE_CATEGORIES" :key="c" class="bcm-choice">
+            <input v-model="report.category" type="radio" :name="`${id}-category`" :value="c" />
+            <span>{{ t(categoryKey(c)) }}</span>
+          </label>
+        </fieldset>
+        <div v-if="report.category === 'rules'" class="bcm-field">
+          <label :for="`${id}-rule`">{{ t('report.rule') }}</label>
+          <p v-if="report.rulesFailed" class="bcm-error">{{ t('error.unavailable') }}</p>
+          <p v-else-if="report.rules === null" class="bcm-muted" role="status">{{ t('common.loading') }}</p>
+          <select v-else :id="`${id}-rule`" v-model="report.ruleId" class="bcm-input" required>
+            <option value="" disabled />
+            <option v-for="rule in report.rules" :key="rule.id" :value="rule.id">{{ rule.title }}</option>
+          </select>
+        </div>
+        <div class="bcm-field">
+          <label :for="`${id}-note`">{{ t('report.note') }}</label>
+          <textarea :id="`${id}-note`" v-model="report.note" class="bcm-input bcm-textarea" rows="3" :aria-describedby="`${id}-note-hint`" :aria-invalid="noteLength > COMMUNITY_REPORT_NOTE_MAX" />
+          <p :id="`${id}-note-hint`" class="bcm-hint">
+            {{ t('report.noteHint') }}
+            {{ t('report.counter', { length: noteLength, max: COMMUNITY_REPORT_NOTE_MAX }) }}
+          </p>
+        </div>
+        <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="report.sending" @click="emit('close')">{{ t('report.cancel') }}</button>
+          <button type="submit" class="bcm-btn bcm-primary" :disabled="!canSend">{{ report.sending ? t('report.sending') : t('report.submit') }}</button>
+        </div>
+      </template>
+      <template v-else>
+        <p role="status">{{ t('report.done') }}</p>
+        <p><a :href="myCommunityHref">{{ t('panel.title') }}</a></p>
+        <div class="bcm-row">
+          <span class="bcm-spacer" />
+          <button type="button" class="bcm-btn bcm-primary" @click="emit('close')">{{ t('common.close') }}</button>
+        </div>
+      </template>
+    </form>
+  </dialog>
+</template>