@blogmcp/community 0.0.0-stage → 0.1.0

package/src/ui/NoticeFormView.vue

@@ -0,0 +1,244 @@
+<script setup lang="ts">
+/**
+ * `<blogmcp-notice-form>`: the DSA notice form for anyone (m1-contracts.md §7.7, §10.4; community.md §5).
+ * The target comes from `target` (JSON), else `article-id`, else the discussion's report link (`#c=…&s=…`).
+ * Without one — the notice page opened directly, or a fragment that names nothing — the element says where a report
+ * starts (at the content itself) and links to the rules, instead of a form with nothing to report.
+ * The Turnstile widget renders into this element's light DOM (projected through the `turnstile` slot), its
+ * script loaded by this form only.
+ */
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, shallowRef, useHost, watch } from 'vue'
+import {
+  CASE_CATEGORIES,
+  COMMUNITY_NOTICE_DESCRIPTION_MAX,
+  COMMUNITY_NOTIFIER_NAME_MAX,
+  type CaseCategory,
+  type CommunityMessageKey,
+  type CommunityTransport,
+  type NoticeTarget,
+} from '@blogmcp/sdk/community'
+import { parseRoutes, parseTarget, routesWithDefaults, targetFromHash, targetKind } from '../core/attrs'
+import { communityClientFor, siteBaseFor, warnOnce } from '../core/client'
+import { documentLang, pickLang, type Lang } from '../core/i18n'
+import { createNoticeForm, type NoticeFormController } from '../core/notice'
+import { failureText } from '../core/outcomes'
+import { renderTurnstile, type TurnstileWidget } from '../core/turnstile'
+import { provideText, uid } from './context'
+
+defineOptions({ inheritAttrs: false })
+
+const props = defineProps<{
+  apiBase?: string
+  /** The path the site is served under (`/blog`): its proxy and its pages, as the defaults. */
+  siteBase?: string
+  lang?: string
+  turnstileSiteKey?: string
+  /** JSON (or an object): `{ conversationId, seq }`, `{ memberId }`, `{ handle }` or `{ articleId }`. */
+  target?: string | Record<string, unknown>
+  articleId?: string
+  /** JSON (or an object): `noticesPath` (the status page), `rulesPath`. */
+  routes?: string | Record<string, unknown>
+  transport?: CommunityTransport
+}>()
+
+const host = useHost()
+const lang = ref<Lang>(pickLang(props.lang, documentLang()))
+const { t } = provideText(lang)
+const id = uid('bcm-notice')
+const heading = ref<HTMLElement | null>(null)
+const done = ref<HTMLElement | null>(null)
+
+function resolveTarget(): NoticeTarget | null {
+  const fromAttr = parseTarget(props.target)
+  if (fromAttr) return fromAttr
+  if (props.articleId) return parseTarget({ articleId: props.articleId })
+  return typeof location === 'undefined' ? null : targetFromHash(location.hash)
+}
+
+const siteBase = siteBaseFor(props.siteBase)
+const routes = computed(() => routesWithDefaults(parseRoutes(props.routes), null, siteBase ?? ''))
+const ctl = shallowRef<NoticeFormController | null>(null)
+
+const client = siteBase === null ? null : communityClientFor(props.apiBase, props.transport, siteBase)
+const target = resolveTarget()
+/** Nothing to report (and a usable base): the explanation instead of the form. */
+const untargeted = !!client && !target
+if (untargeted) {
+  warnOnce(
+    'notice-target',
+    '[blogmcp-community] <blogmcp-notice-form> has no target (a target, an article-id or the report link’s #c=…&s= fragment): it shows where a report starts instead of the form',
+  )
+}
+if (client && target) {
+  ctl.value = createNoticeForm({
+    client,
+    lang: lang.value,
+    target,
+    captcha: !!props.turnstileSiteKey,
+    noticesPath: routes.value.noticesPath,
+    onSubmitted: (answer) => host?.dispatchEvent(new CustomEvent('bcm-notice-submitted', { detail: answer, bubbles: true, composed: true })),
+  })
+}
+
+const state = computed(() => ctl.value?.state ?? null)
+const kind = computed(() => (state.value?.target ? targetKind(state.value.target) : null))
+const targetText = computed(() => (kind.value === 'message' ? t('notice.targetMessage') : kind.value === 'article' ? t('notice.targetArticle') : t('notice.targetProfile')))
+const categoryKey = (c: CaseCategory): CommunityMessageKey => `category.${c}`
+const failure = computed(() => {
+  const f = state.value?.failure
+  if (!f) return ''
+  const r = failureText(f, lang.value)
+  return t(r.key, r.params)
+})
+const absoluteStatusLink = computed(() => {
+  const link = state.value?.statusLink
+  return link && typeof location !== 'undefined' ? `${location.origin}${link}` : (link ?? '')
+})
+
+// ── Turnstile, in the light DOM ──
+let widget: TurnstileWidget | null = null
+let slotted: HTMLElement | null = null
+let gone = false
+
+onMounted(async () => {
+  const c = ctl.value
+  if (!c || !props.turnstileSiteKey || !host) return
+  slotted = document.createElement('div')
+  slotted.slot = 'turnstile'
+  host.appendChild(slotted)
+  try {
+    const nonce = (host as HTMLElement & { nonce?: string }).nonce || host.getAttribute('nonce') || undefined
+    const w = await renderTurnstile(slotted, { siteKey: props.turnstileSiteKey, language: lang.value, onToken: (token) => c.setToken(token), nonce })
+    if (gone) {
+      w.remove()
+      return
+    }
+    widget = w
+    c.setCaptcha('ready')
+  } catch {
+    c.setCaptcha('unavailable')
+  }
+})
+watch(
+  () => state.value?.resetSignal,
+  (n, before) => {
+    if (n !== undefined && before !== undefined && n !== before) widget?.reset()
+  },
+)
+watch(
+  () => state.value?.receipt,
+  (receipt) => {
+    if (!receipt) return
+    widget?.remove()
+    widget = null
+    void nextTick(() => done.value?.focus())
+  },
+)
+onBeforeUnmount(() => {
+  gone = true
+  widget?.remove()
+  widget = null
+  slotted?.remove()
+  slotted = null
+  ctl.value?.dispose()
+})
+</script>
+
+<template>
+  <section v-if="ctl && state" class="bcm bcm-notice" :lang="lang" :aria-labelledby="`${id}-title`">
+    <h2 :id="`${id}-title`" ref="heading" tabindex="-1">{{ t('notice.title') }}</h2>
+
+    <div v-if="state.receipt" ref="done" class="bcm-receipt" role="status" tabindex="-1">
+      <p>{{ t('notice.done') }}</p>
+      <p>{{ t('notice.receiptLede') }}</p>
+      <p v-if="state.statusLink"><a :href="state.statusLink">{{ t('notice.statusLink') }}</a></p>
+      <input v-if="absoluteStatusLink" class="bcm-input" readonly :value="absoluteStatusLink" :aria-label="t('notice.statusLink')" @focus="($event.target as HTMLInputElement).select()" />
+      <p v-if="!state.receipt.contactKept" class="bcm-note">{{ t('notice.noContactKept') }}</p>
+    </div>
+
+    <form v-else class="bcm-form" novalidate @submit.prevent="ctl.submit()">
+      <p>{{ t('notice.lede') }}</p>
+
+      <div class="bcm-field">
+        <span class="bcm-label">{{ t('notice.target') }}</span>
+        <span>{{ targetText }}</span>
+      </div>
+
+      <fieldset class="bcm-choices">
+        <legend>{{ t('notice.category') }}</legend>
+        <label v-for="c in CASE_CATEGORIES" :key="c" class="bcm-choice">
+          <input type="radio" :name="`${id}-category`" :value="c" :checked="state.category === c" @change="ctl.setCategory(c)" />
+          <span>{{ t(categoryKey(c)) }}</span>
+        </label>
+      </fieldset>
+
+      <div v-if="state.category === 'rules' && state.rules && state.rules.length" class="bcm-field">
+        <label :for="`${id}-rule`">{{ t('notice.rule') }}</label>
+        <select :id="`${id}-rule`" v-model="state.ruleId" class="bcm-input">
+          <option value="" />
+          <option v-for="rule in state.rules" :key="rule.id" :value="rule.id">{{ rule.title }}</option>
+        </select>
+      </div>
+
+      <div class="bcm-field">
+        <label :for="`${id}-description`">{{ t('notice.description') }}</label>
+        <textarea
+          :id="`${id}-description`"
+          v-model="state.description"
+          class="bcm-input bcm-textarea"
+          rows="5"
+          :aria-describedby="`${id}-description-hint`"
+          :aria-invalid="ctl.descriptionLength() > COMMUNITY_NOTICE_DESCRIPTION_MAX"
+        />
+        <p :id="`${id}-description-hint`" class="bcm-hint">
+          {{ t('notice.descriptionHint') }}
+          {{ t('notice.counter', { length: ctl.descriptionLength(), max: COMMUNITY_NOTICE_DESCRIPTION_MAX }) }}
+        </p>
+      </div>
+
+      <fieldset v-if="ctl.contactAllowed()" class="bcm-fieldset">
+        <legend>{{ t('notice.contactTitle') }}</legend>
+        <p class="bcm-hint">{{ t('notice.contactHint') }}</p>
+        <div class="bcm-field">
+          <label :for="`${id}-name`">{{ t('notice.name') }}</label>
+          <input :id="`${id}-name`" v-model="state.name" class="bcm-input" autocomplete="name" :maxlength="COMMUNITY_NOTIFIER_NAME_MAX" />
+        </div>
+        <div class="bcm-field">
+          <label :for="`${id}-email`">{{ t('notice.email') }}</label>
+          <input
+            :id="`${id}-email`"
+            v-model="state.email"
+            class="bcm-input"
+            type="email"
+            autocomplete="email"
+            :aria-invalid="!!state.failure?.fields?.includes('notifier.email')"
+          />
+        </div>
+      </fieldset>
+      <p v-else class="bcm-note">{{ t('notice.childAtRisk') }}</p>
+
+      <div v-if="state.captcha !== 'off'" class="bcm-turnstile">
+        <slot name="turnstile" />
+        <p v-if="state.captcha === 'unavailable'" class="bcm-error" role="alert">{{ t('notice.captchaUnavailable') }}</p>
+      </div>
+
+      <label class="bcm-check">
+        <input v-model="state.goodFaith" type="checkbox" />
+        <span>{{ t('confirm.good_faith') }}</span>
+      </label>
+
+      <p v-if="failure" class="bcm-error" role="alert">{{ failure }}</p>
+
+      <div class="bcm-row">
+        <span class="bcm-spacer" />
+        <button type="submit" class="bcm-btn bcm-primary" :disabled="!ctl.canSubmit()">{{ state.sending ? t('notice.sending') : t('notice.submit') }}</button>
+      </div>
+    </form>
+  </section>
+
+  <section v-else-if="untargeted" class="bcm bcm-notice" :lang="lang" :aria-labelledby="`${id}-title`">
+    <h2 :id="`${id}-title`">{{ t('notice.title') }}</h2>
+    <p>{{ t('notice.noTarget') }}</p>
+    <p><a :href="routes.rulesPath">{{ t('onboarding.rulesTitle') }}</a></p>
+  </section>
+</template>

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/OnboardingSteps.vue

@@ -0,0 +1,163 @@
+<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.
+ */
+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 { 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 = failureText(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>
+        <p>{{ 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">
+          <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 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/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>