@blogmcp/community 0.0.0-stage → 0.2.0

package/src/ui/MessageComposer.vue

@@ -0,0 +1,141 @@
+<script setup lang="ts">
+/**
+ * The composer of a new message, a reply or an edit: 4 000 characters with a counter (announced near the
+ * end), the links note, a link to the rules (community.md §4.5: by every composer; a new tab, so the text
+ * stays), Cmd/Ctrl+Enter, the cooldown after TOO_FAST or a quota, and the Russmedia confirmation when kb-api
+ * asks for one (the same text goes again with `confirmations`). M2 T10: with the member's mention cap
+ * (`mentionsMax`, me/get's `caps.mentionsPerMessage`), a draft that mentions more distinct `@handle`s says so as it
+ * is typed (`error.mentionLimit`) and is not sent; kb-api's MENTION_LIMIT stays the rule.
+ */
+import { computed, onBeforeUnmount, ref, watch } from 'vue'
+import { COMMUNITY_MESSAGE_LINKS_MAX, COMMUNITY_MESSAGE_MAX, communityMentionHandles, confirmMessageKey } from '@blogmcp/sdk/community'
+import type { Draft } from '../core/discussion'
+import { COUNTDOWN_MAX_S, failureText } from '../core/outcomes'
+import { codePointLength, normalizeBody } from '../core/text'
+import { uid, useText } from './context'
+
+const props = defineProps<{
+  draft: Draft
+  kind: 'new' | 'reply' | 'edit'
+  /** Seconds the draft still waits (the controller's clock). */
+  wait: number
+  replyingTo?: string | null
+  /** The host's rules page. */
+  rulesHref?: string
+  /** M2 T10: the distinct mentions one message may carry; null or absent: no limit known here. */
+  mentionsMax?: number | null
+}>()
+const emit = defineEmits<{ submit: []; cancel: []; confirmed: []; confirm: [code: string, checked: boolean] }>()
+const { t, lang } = useText()
+
+const id = uid('bcm-composer')
+const input = ref<HTMLTextAreaElement | null>(null)
+const length = computed(() => codePointLength(normalizeBody(props.draft.body)))
+const over = computed(() => length.value > COMMUNITY_MESSAGE_MAX)
+const mentionsOver = computed(() => {
+  const max = props.mentionsMax
+  return typeof max === 'number' && max >= 0 && communityMentionHandles(normalizeBody(props.draft.body)).length > max
+})
+const canSend = computed(() => !props.draft.sending && length.value > 0 && !over.value && !mentionsOver.value && props.wait === 0 && props.draft.confirm === null)
+const allConfirmed = computed(() => {
+  const c = props.draft.confirm
+  return c !== null && c.codes.every((code) => c.checked.includes(code))
+})
+const label = computed(() => t(props.kind === 'reply' ? 'composer.replyLabel' : props.kind === 'edit' ? 'composer.editLabel' : 'composer.label'))
+const keys = typeof navigator !== 'undefined' && /Mac|iPhone|iPad/i.test(navigator.platform || navigator.userAgent) ? '⌘ + Enter' : 'Ctrl + Enter'
+const failure = computed(() => {
+  const f = props.draft.failure
+  // The confirmation box says what CONFIRMATION_REQUIRED meant; any later refusal (the confirmed send's) shows.
+  if (!f || (props.draft.confirm && f.code === 'confirm')) return ''
+  // The mention warning below says it already, as long as the draft is over the cap.
+  if (f.code === 'mentionLimit' && mentionsOver.value) return ''
+  // A short wait reads as the countdown instead.
+  if ((f.code === 'fast' || f.code === 'quota') && props.wait > 0 && props.wait <= COUNTDOWN_MAX_S) return ''
+  const ref = failureText(f, lang.value)
+  return t(ref.key, ref.params)
+})
+
+// The counter is read on focus (aria-describedby); near the limit it is also announced, once typing pauses.
+const counterLive = ref('')
+let liveTimer: ReturnType<typeof setTimeout> | null = null
+watch(length, (n) => {
+  if (liveTimer) clearTimeout(liveTimer)
+  liveTimer = setTimeout(() => {
+    counterLive.value = n >= COMMUNITY_MESSAGE_MAX * 0.9 ? t('composer.counter', { length: n, max: COMMUNITY_MESSAGE_MAX }) : ''
+  }, 700)
+})
+onBeforeUnmount(() => {
+  if (liveTimer) clearTimeout(liveTimer)
+})
+
+// A changed text is a new attempt: the old refusal and the confirmation it asked for no longer apply
+// (a cooldown still does).
+watch(
+  () => props.draft.body,
+  () => {
+    const d = props.draft
+    if (d.confirm) d.confirm = null
+    if (d.failure && d.failure.code !== 'fast' && d.failure.code !== 'quota') d.failure = null
+  },
+)
+
+function onKey(e: KeyboardEvent): void {
+  if (e.key !== 'Enter' || !(e.metaKey || e.ctrlKey)) return
+  e.preventDefault()
+  if (canSend.value) emit('submit')
+}
+
+function onSubmit(): void {
+  if (canSend.value) emit('submit')
+}
+
+defineExpose({ focus: () => input.value?.focus() })
+</script>
+
+<template>
+  <form class="bcm-composer" @submit.prevent="onSubmit">
+    <label :for="id" class="bcm-label">{{ label }}</label>
+    <p v-if="replyingTo" class="bcm-hint">{{ t('composer.replyingTo', { name: replyingTo }) }}</p>
+    <textarea
+      :id="id"
+      ref="input"
+      v-model="draft.body"
+      class="bcm-input bcm-textarea"
+      rows="4"
+      :placeholder="t('composer.placeholder')"
+      :aria-describedby="`${id}-counter ${id}-hints`"
+      :aria-invalid="over || mentionsOver"
+      :readonly="draft.sending"
+      @keydown="onKey"
+    />
+    <div class="bcm-composer-foot">
+      <span :id="`${id}-counter`" class="bcm-counter" :class="{ 'bcm-counter-over': over }">{{ t('composer.counter', { length, max: COMMUNITY_MESSAGE_MAX }) }}</span>
+      <span class="bcm-sr" aria-live="polite">{{ counterLive }}</span>
+      <span class="bcm-spacer" />
+      <button v-if="kind !== 'new'" type="button" class="bcm-btn" :disabled="draft.sending" @click="emit('cancel')">{{ t('composer.cancel') }}</button>
+      <button type="submit" class="bcm-btn bcm-primary" :disabled="!canSend">
+        {{ draft.sending ? t('composer.sending') : kind === 'edit' ? t('composer.save') : t('composer.submit') }}
+      </button>
+    </div>
+    <div :id="`${id}-hints`" class="bcm-hint">
+      <p>{{ t('composer.linksNote', { count: COMMUNITY_MESSAGE_LINKS_MAX }) }}</p>
+      <p>{{ t('composer.shortcut', { keys }) }}</p>
+      <p v-if="rulesHref"><a :href="rulesHref" target="_blank" rel="noopener">{{ t('onboarding.rulesTitle') }}</a></p>
+    </div>
+    <p v-if="over" class="bcm-error">{{ t('composer.tooLong', { max: COMMUNITY_MESSAGE_MAX }) }}</p>
+    <p v-if="mentionsOver" class="bcm-error" role="alert">{{ t('error.mentionLimit') }}</p>
+    <p v-if="wait > 0 && wait <= COUNTDOWN_MAX_S" class="bcm-warning" role="status">{{ t('composer.cooldown', { count: wait }) }}</p>
+    <p v-if="failure" class="bcm-error" role="alert">{{ failure }}</p>
+    <fieldset v-if="draft.confirm" class="bcm-confirm">
+      <legend class="bcm-label">{{ t('confirm.title') }}</legend>
+      <p>{{ t('error.confirm') }}</p>
+      <label v-for="code in draft.confirm.codes" :key="code" class="bcm-check">
+        <input type="checkbox" :checked="draft.confirm.checked.includes(code)" @change="emit('confirm', code, ($event.target as HTMLInputElement).checked)" />
+        <span>{{ t(confirmMessageKey(code)) }}</span>
+      </label>
+      <div class="bcm-row">
+        <button type="button" class="bcm-btn bcm-primary" :disabled="!allConfirmed || draft.sending || wait > 0" @click="emit('confirmed')">{{ t('confirm.submit') }}</button>
+      </div>
+    </fieldset>
+  </form>
+</template>

package/src/ui/MessageItem.vue

@@ -0,0 +1,223 @@
+<script setup lang="ts">
+/**
+ * One message of the thread, and on a top-level message its replies (two levels). What it shows depends on
+ * its state, by community.md §5 (no shadow bans): the author sees a held or removed message WITH its state
+ * („Čeká na kontrolu", and for a removed one the way to the statement in „Moje komunita"); others see a
+ * placeholder, which kb-api sends only while replies hang on it; a blocked author's message is collapsed
+ * until the reader opens it.
+ *
+ * The author's own message the tenant's art. 9 policy keeps from others until they consent (`hiddenUntilConsent`
+ * on a `held` message, m1-contracts.md §7.14 P-RV3) is not awaiting review: it says so („Čeká na váš souhlas"),
+ * and while the discussion asks this member for the consent it offers the onboarding's consent step in place
+ * (`beginOnboarding`, the composer's own). kb-api sends the flag on the author's read only, so another reader sees
+ * the plain placeholder.
+ */
+import { computed } from 'vue'
+import { communityMessageAnchor, hasCommunityMessage, noteMessageKey, warningMessageKey, type CommunityMessageKey, type DiscussionMessage } from '@blogmcp/sdk/community'
+import { reportLink } from '../core/attrs'
+import { formatDate } from '../core/format'
+import AuthorAvatar from './AuthorAvatar.vue'
+import LinkedText from './LinkedText.vue'
+import MessageComposer from './MessageComposer.vue'
+import MessageMenu from './MessageMenu.vue'
+import ReactionBar from './ReactionBar.vue'
+import { useText } from './context'
+import { useDiscussion } from './discussion-context'
+import type { MenuItem } from './types'
+
+defineOptions({ name: 'MessageItem' })
+
+const props = defineProps<{ message: DiscussionMessage }>()
+const { t, lang } = useText()
+const { ctl, routes, opened, originals, allReplies, deleteMessage } = useDiscussion()
+
+/** Replies shown before „Zobrazit další odpovědi". */
+const REPLIES_SHOWN = 3
+
+const m = computed(() => props.message)
+const isReply = computed(() => m.value.replyToSeq !== null)
+const own = computed(() => ctl.isOwn(m.value))
+const placeholder = computed(() => m.value.body === null)
+/** The author's own message held back from others until their art. 9 consent (P-RV3) — not one awaiting review. */
+const untilConsent = computed(() => own.value && m.value.state === 'held' && m.value.hiddenUntilConsent === true)
+/**
+ * The consent step can be opened from here: the discussion asks this member for it, or the member refused it where the
+ * tenant leaves the public discussion open (`acceptances.art9Refused`, M2 T9: needs name no consent then, yet the post
+ * stays hidden from others until it is given) — and the onboarding is not open yet.
+ */
+const refusedConsent = computed(() => ctl.state.me?.acceptances.art9Refused === true)
+const canGiveConsent = computed(
+  () =>
+    untilConsent.value &&
+    !ctl.onboarding.value &&
+    ctl.state.refusedAge === null &&
+    ((ctl.mode() === 'onboarding' && ctl.needs().art9) || refusedConsent.value),
+)
+
+const authorName = computed(() => {
+  const a = m.value.author
+  if (a.kind === 'system') return t('author.system')
+  if (a.kind === 'staff') return a.displayName
+  return a.displayName ?? t('author.deleted')
+})
+const handle = computed(() => (m.value.author.kind === 'member' ? m.value.author.handle : null))
+const badge = computed(() => {
+  const a = m.value.author
+  if (a.kind !== 'staff') return null
+  const key = `author.badge.${a.badge}`
+  return hasCommunityMessage(key) ? t(key) : null
+})
+
+const placeholderKey = computed<CommunityMessageKey>(() =>
+  m.value.state === 'held' ? 'discussion.placeholderHeld' : m.value.state === 'removed' ? 'discussion.placeholderRemoved' : 'discussion.placeholderDeleted',
+)
+/** M2 T10: the row's anchor (`bcm-msg-<seq>`), the fragment the notification centre's links carry; none while pending. */
+const anchorId = computed(() => (m.value.pending ? undefined : (communityMessageAnchor(m.value.seq) ?? undefined)))
+const hiddenByBlock = computed(() => m.value.collapsed && !opened.has(m.value.seq))
+const showOriginal = computed(() => originals.has(m.value.seq))
+const text = computed(() => (m.value.isTranslated && !showOriginal.value ? m.value.displayBody : m.value.body) ?? m.value.displayBody)
+
+const notes = computed(() =>
+  (own.value ? (m.value.notes ?? []) : []).map((code) => noteMessageKey(code)).filter((k): k is CommunityMessageKey => k !== null),
+)
+const warnings = computed(() => (own.value ? [...new Set((m.value.warnings ?? []).map((code) => warningMessageKey(code)))] : []))
+
+const editing = computed(() => ctl.state.inline?.kind === 'edit' && ctl.state.inline.seq === m.value.seq)
+const replying = computed(() => !isReply.value && ctl.state.inline?.kind === 'reply' && ctl.state.inline.seq === m.value.seq)
+
+const shownReplies = computed(() => (allReplies.has(m.value.seq) ? m.value.replies : m.value.replies.slice(0, REPLIES_SHOWN)))
+const moreReplies = computed(() => m.value.replies.length - shownReplies.value.length)
+
+const target = computed(() => ({ conversationId: m.value.conversationId, seq: m.value.seq }))
+/**
+ * A mention links to the member's profile for a viewer who may see profiles (a signed-in host session, m2-contracts.md
+ * §3.3: "never a hyperlink to a profile for a member who cannot see it"); an anonymous reader reads it as text.
+ */
+const mentionProfiles = computed(() => (ctl.needs().signIn ? null : routes.value.profilePath))
+
+const menu = computed<MenuItem[]>(() => {
+  const items: MenuItem[] = []
+  const msg = m.value
+  if (ctl.canEdit(msg)) items.push({ id: 'edit', label: t('discussion.edit') })
+  if (ctl.canDelete(msg)) items.push({ id: 'delete', label: t('discussion.delete'), danger: true })
+  if (ctl.canReport(msg)) items.push({ id: 'report', label: t('discussion.report') })
+  else if (ctl.canReportAsNotifier(msg)) {
+    const href = reportLink(routes.value.reportPath, target.value)
+    if (href) items.push({ id: 'report', label: t('discussion.report'), href })
+  }
+  if (ctl.canBlock(msg)) items.push({ id: msg.collapsed ? 'unblock' : 'block', label: msg.collapsed ? t('discussion.unblock') : t('discussion.block') })
+  return items
+})
+
+function onMenu(id: string): void {
+  const msg = m.value
+  if (id === 'edit') ctl.openEdit(msg.seq)
+  else if (id === 'delete') deleteMessage(msg.seq)
+  else if (id === 'report') ctl.openReport(msg)
+  else if ((id === 'block' || id === 'unblock') && msg.author.kind === 'member' && msg.author.memberId) void ctl.setBlocked(msg.author.memberId, id === 'block')
+}
+
+function reply(): void {
+  ctl.openReply(m.value.seq, isReply.value ? authorName.value : null)
+}
+
+function toggle(set: Set<number>): void {
+  if (set.has(m.value.seq)) set.delete(m.value.seq)
+  else set.add(m.value.seq)
+}
+</script>
+
+<template>
+  <li :id="anchorId" class="bcm-msg-item">
+    <article class="bcm-msg" :class="{ 'bcm-msg-pending': !!m.pending }" :aria-busy="!!m.pending">
+      <AuthorAvatar :author="m.author" />
+      <div class="bcm-msg-main">
+        <header class="bcm-meta">
+          <span class="bcm-author">{{ authorName }}</span>
+          <span v-if="badge" class="bcm-badge bcm-badge-team">{{ badge }}</span>
+          <span v-if="handle" class="bcm-handle">{{ handle }}</span>
+          <time v-if="m.createdAt" class="bcm-time" :datetime="m.createdAt">{{ formatDate(lang, m.createdAt) }}</time>
+          <span v-if="m.isEdited && !placeholder" class="bcm-muted">{{ t('discussion.edited') }}</span>
+          <span v-if="m.pending" class="bcm-muted" role="status">{{ t('discussion.pending') }}</span>
+        </header>
+
+        <p v-if="placeholder" class="bcm-placeholder">{{ t(placeholderKey) }}</p>
+        <p v-else-if="hiddenByBlock" class="bcm-muted">
+          {{ t('discussion.collapsed') }}
+          <button type="button" class="bcm-link" @click="toggle(opened)">{{ t('discussion.show') }}</button>
+        </p>
+        <template v-else>
+          <div v-if="untilConsent" class="bcm-own-state bcm-own-consent">
+            <span class="bcm-badge">{{ t('state.hiddenUntilConsent') }}</span>
+            <p class="bcm-hint">{{ t('discussion.hiddenUntilConsentNote') }}</p>
+            <button v-if="canGiveConsent" type="button" class="bcm-link" @click="ctl.beginOnboarding(refusedConsent ? { offerArt9: true } : {})">{{ t('discussion.giveConsent') }}</button>
+          </div>
+          <div v-else-if="own && (m.state === 'held' || m.state === 'removed')" class="bcm-own-state">
+            <span class="bcm-badge">{{ m.state === 'held' ? t('state.held') : t('state.removed') }}</span>
+            <p class="bcm-hint">{{ m.state === 'held' ? t('discussion.heldNote') : t('discussion.removedNote') }}</p>
+            <a v-if="m.state === 'removed'" :href="routes.myCommunityPath">{{ t('discussion.why') }}</a>
+          </div>
+          <MessageComposer
+            v-if="editing && ctl.state.inline"
+            kind="edit"
+            :draft="ctl.state.inline"
+            :wait="ctl.waitLeft(ctl.state.inline)"
+            :rules-href="routes.rulesPath"
+            :mentions-max="ctl.mentionCap()"
+            @submit="ctl.submitInline()"
+            @cancel="ctl.closeInline()"
+            @confirm="(code: string, checked: boolean) => ctl.state.inline && ctl.setConfirmed(ctl.state.inline, code, checked)"
+            @confirmed="ctl.state.inline && ctl.sendConfirmed(ctl.state.inline)"
+          />
+          <p v-else class="bcm-text"><LinkedText :text="text" :profile-path="mentionProfiles" /></p>
+          <p v-if="m.isTranslated && !editing" class="bcm-hint">
+            {{ t('discussion.translated') }}
+            <button type="button" class="bcm-link" @click="toggle(originals)">{{ showOriginal ? t('discussion.showTranslation') : t('discussion.showOriginal') }}</button>
+          </p>
+          <button v-if="m.collapsed" type="button" class="bcm-link" @click="toggle(opened)">{{ t('discussion.hide') }}</button>
+          <p v-for="key in notes" :key="key" class="bcm-note">
+            <!-- The adverse-event note leads to the site's consultation page when the site names one (§7.6). -->
+            <a v-if="key === 'note.report_to_manufacturer' && routes.consultationPath" :href="routes.consultationPath">{{ t(key) }}</a>
+            <template v-else>{{ t(key) }}</template>
+          </p>
+          <p v-for="key in warnings" :key="key" class="bcm-warning">{{ t(key) }}</p>
+        </template>
+
+        <div v-if="!placeholder && !hiddenByBlock && !editing" class="bcm-actions">
+          <ReactionBar
+            :reaction-set="ctl.state.thread.reactionSet"
+            :summary="m.reactions"
+            :interactive="ctl.canReact() && !m.pending && m.seq > 0 && m.state === 'visible'"
+            :busy="!!ctl.state.busy[`react:${m.seq}`]"
+            @react="(emoji: string) => ctl.react(target, emoji)"
+          />
+          <button v-if="ctl.canReply(m)" type="button" class="bcm-quiet" @click="reply">{{ t('discussion.reply') }}</button>
+          <MessageMenu :items="menu" @select="onMenu" />
+        </div>
+
+        <template v-if="!isReply">
+          <ol v-if="m.replies.length" class="bcm-replies">
+            <MessageItem v-for="r in shownReplies" :key="r.id" :message="r" />
+          </ol>
+          <button v-if="moreReplies > 0" type="button" class="bcm-link" @click="allReplies.add(m.seq)">
+            {{ t('discussion.showReplies', { count: moreReplies }) }}
+          </button>
+          <p v-if="m.repliesTruncated" class="bcm-hint">{{ t('discussion.repliesTruncated') }}</p>
+          <MessageComposer
+            v-if="replying && ctl.state.inline"
+            kind="reply"
+            :draft="ctl.state.inline"
+            :wait="ctl.waitLeft(ctl.state.inline)"
+            :rules-href="routes.rulesPath"
+            :mentions-max="ctl.mentionCap()"
+            :replying-to="ctl.state.inline.replyingTo"
+            @submit="ctl.submitInline()"
+            @cancel="ctl.closeInline()"
+            @confirm="(code: string, checked: boolean) => ctl.state.inline && ctl.setConfirmed(ctl.state.inline, code, checked)"
+            @confirmed="ctl.state.inline && ctl.sendConfirmed(ctl.state.inline)"
+          />
+        </template>
+      </div>
+    </article>
+  </li>
+</template>

package/src/ui/MessageMenu.vue

@@ -0,0 +1,67 @@
+<script setup lang="ts">
+/**
+ * A message's „Další akce": a disclosure of real buttons (and the notice page's link for a reader without a
+ * session). Esc or a click elsewhere closes it; the focus goes back to its toggle before an action runs,
+ * so a dialog the action opens returns it there.
+ */
+import { nextTick, onBeforeUnmount, ref } from 'vue'
+import { uid, useText } from './context'
+import type { MenuItem } from './types'
+
+defineProps<{ items: MenuItem[] }>()
+const emit = defineEmits<{ select: [id: string] }>()
+const { t } = useText()
+
+const open = ref(false)
+const toggle = ref<HTMLButtonElement | null>(null)
+const root = ref<HTMLElement | null>(null)
+const listId = uid('bcm-menu')
+
+function onOutside(e: Event): void {
+  if (!root.value || e.composedPath().includes(root.value)) return
+  close(false)
+}
+
+function setOpen(next: boolean): void {
+  open.value = next
+  if (next) {
+    document.addEventListener('pointerdown', onOutside, true)
+    void nextTick(() => root.value?.querySelector<HTMLElement>('.bcm-menu-list button, .bcm-menu-list a')?.focus())
+  } else {
+    document.removeEventListener('pointerdown', onOutside, true)
+  }
+}
+
+function close(focusToggle = true): void {
+  setOpen(false)
+  if (focusToggle) toggle.value?.focus()
+}
+
+function pick(id: string): void {
+  close(true)
+  emit('select', id)
+}
+
+onBeforeUnmount(() => document.removeEventListener('pointerdown', onOutside, true))
+</script>
+
+<template>
+  <div v-if="items.length" ref="root" class="bcm-menu" @keydown.esc.stop="close(true)">
+    <button
+      ref="toggle"
+      type="button"
+      class="bcm-quiet"
+      :aria-expanded="open"
+      :aria-controls="listId"
+      @click="setOpen(!open)"
+    >
+      {{ t('discussion.menu') }}
+    </button>
+    <div v-if="open" :id="listId" class="bcm-menu-list">
+      <template v-for="item in items" :key="item.id">
+        <a v-if="item.href" :href="item.href" :class="{ 'bcm-danger': item.danger }" @click="close(false)">{{ item.label }}</a>
+        <button v-else type="button" :class="{ 'bcm-danger': item.danger }" @click="pick(item.id)">{{ item.label }}</button>
+      </template>
+    </div>
+  </div>
+</template>