@blogmcp/community 0.0.0-stage → 0.1.0

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>

package/src/ui/MyCommunityView.vue

@@ -0,0 +1,369 @@
+<script setup lang="ts">
+/**
+ * `<blogmcp-my-community>`: the reader's „Moje komunita" (m1-contracts.md §10.4; community.md §5). Three
+ * pages in one element:
+ *   - with `decision-id`: that statement of reasons and its appeal (the host's statement page);
+ *   - with `#t=<receipt>` in the address: that notice's status and appeal — no sign-in needed; the receipt
+ *     is read from this page's own address once and cleared from the address bar (core/receipt.ts);
+ *   - otherwise the panel: profile, notifications, statements, reports, blocks, consents, export, deletion.
+ */
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, useHost, watch } from 'vue'
+import {
+  COMMUNITY_HANDLE_CHANGE_DAYS,
+  signInLink,
+  statementPath,
+  type CommunityMessageKey,
+  type CommunityTransport,
+  type NotificationItem,
+} from '@blogmcp/sdk/community'
+import { AVATAR_PRESETS } from '../core/avatars'
+import { HANDLE_MAX, HANDLE_MIN } from '../core/names'
+import { parseRoutes, routesWithDefaults } from '../core/attrs'
+import { communityClientFor, siteBaseFor } from '../core/client'
+import { exportFileName, saveJson } from '../core/download'
+import { formatDate } from '../core/format'
+import { documentLang, knownKey, pickLang, type Lang } from '../core/i18n'
+import { failureText } from '../core/outcomes'
+import { createPanel, type PanelController } from '../core/panel'
+import { receiptForElement } from '../core/receipt'
+import AuthorAvatar from './AuthorAvatar.vue'
+import ConfirmDialog from './ConfirmDialog.vue'
+import NoticeStatusView from './NoticeStatusView.vue'
+import StatementView from './StatementView.vue'
+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
+  /** Opens this statement (the host's statement page). */
+  decisionId?: string
+  /** JSON (or an object): `statementPath`, `myCommunityPath`, `rulesPath`, `reportPath`, `noticesPath`. */
+  routes?: string | Record<string, unknown>
+  /** The site's sign-in page, for a reader without a session. */
+  signInHref?: string
+  transport?: CommunityTransport
+}>()
+
+const lang = ref<Lang>(pickLang(props.lang, documentLang()))
+const { t, text } = provideText(lang)
+const id = uid('bcm-panel')
+const heading = ref<HTMLElement | null>(null)
+
+const siteBase = siteBaseFor(props.siteBase)
+const client = siteBase === null ? null : communityClientFor(props.apiBase, props.transport, siteBase)
+const ctl: PanelController | null = client ? createPanel({ client, lang: lang.value }) : null
+const state = ctl?.state ?? null
+
+const routes = computed(() => routesWithDefaults(parseRoutes(props.routes), state?.me?.links, siteBase ?? ''))
+const decisionMode = computed(() => !!props.decisionId)
+const noticeMode = ref(false)
+const confirming = ref<'consent' | 'erase' | null>(null)
+
+const host = useHost()
+
+onMounted(() => {
+  if (!ctl) return
+  // Only a receipt this page's own address carried (or this element took before it was moved), never the tab's.
+  const receipt = receiptForElement(host)
+  if (receipt !== undefined) {
+    noticeMode.value = true
+    void ctl.loadNotice(receipt)
+  }
+  if (props.decisionId) void ctl.loadStatement(props.decisionId)
+  else void ctl.loadMember()
+})
+// A host that reuses the element for another statement (client-side navigation) reads that one.
+watch(
+  () => props.decisionId,
+  (id, before) => {
+    if (!ctl || id === before) return
+    if (id) void ctl.loadStatement(id)
+    else if (state?.phase === 'idle') void ctl.loadMember()
+  },
+)
+onBeforeUnmount(() => ctl?.dispose())
+
+const memberFailure = computed(() => {
+  const f = state?.failure
+  if (!f) return ''
+  const r = failureText(f, lang.value)
+  return t(r.key, r.params)
+})
+const statementFailure = computed(() => {
+  const f = state?.statement.failure
+  if (!f) return ''
+  const r = failureText(f, lang.value)
+  return t(r.key, r.params)
+})
+const noticeFailure = computed(() => {
+  const f = state?.notice.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 statementHref = (decisionId: string): string | null => statementPath(routes.value.statementPath, decisionId)
+const notificationKey = (n: NotificationItem): CommunityMessageKey | null => knownKey(`notification.${n.code}`)
+const restrictionKey = (code: string): CommunityMessageKey | null => knownKey(`restriction.${code}`)
+const categoryKey = (code: string): CommunityMessageKey | null => knownKey(`category.${code}`)
+const caseStatusKey = (code: string): CommunityMessageKey | null => knownKey(`caseStatus.${code}`)
+const appealStatusKey = (decisionId: string): CommunityMessageKey | null => {
+  const a = state?.appeals.find((x) => x.decisionId === decisionId)
+  return a ? knownKey(`appealStatus.${a.status}`) : null
+}
+
+const consent = computed(() => state?.me?.acceptances.art9Consent ?? null)
+const member = computed(() => state?.me?.member ?? null)
+const profile = computed(() => state?.me?.profile ?? null)
+
+function exportNow(): void {
+  void ctl?.exportData((data) => saveJson(data, exportFileName(t('panel.exportFileName'))))
+}
+
+async function confirmAction(): Promise<void> {
+  if (!ctl) return
+  if (confirming.value === 'consent') await ctl.withdrawConsent()
+  else if (confirming.value === 'erase') await ctl.erase()
+  confirming.value = null
+}
+
+// One live region for the outcomes (cleared in between, so the same one is announced again).
+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-panel" :lang="lang" :aria-labelledby="`${id}-title`">
+    <h2 :id="`${id}-title`" ref="heading" tabindex="-1">{{ decisionMode ? t('statement.title') : t('panel.title') }}</h2>
+
+    <!-- the notifier's part (#t=) -->
+    <template v-if="noticeMode">
+      <p v-if="state.notice.phase === 'missing'" class="bcm-note" role="alert">{{ t('notice.receiptMissing') }}</p>
+      <p v-else-if="state.notice.phase === 'loading'" class="bcm-muted" role="status">{{ t('common.loading') }}</p>
+      <p v-else-if="state.notice.phase === 'failed'" class="bcm-error" role="alert">{{ noticeFailure }}</p>
+      <NoticeStatusView
+        v-else-if="state.notice.value"
+        :notice="state.notice.value"
+        :appeal="state.notice.appeal"
+        :withdrawing="!!state.busy.noticeWithdraw"
+        @appeal="ctl.fileNoticeAppeal()"
+        @withdraw="ctl.withdrawNoticeAppeal()"
+      />
+    </template>
+
+    <!-- the statement page (decision-id) -->
+    <template v-if="decisionMode">
+      <p v-if="state.statement.phase === 'loading'" class="bcm-muted" role="status">{{ t('common.loading') }}</p>
+      <div v-else-if="state.statement.phase === 'signIn'" class="bcm-row">
+        <p>{{ t('panel.signIn') }}</p>
+        <a v-if="signInHref()" class="bcm-btn bcm-primary" :href="signInHref() ?? undefined">{{ t('common.signIn') }}</a>
+      </div>
+      <p v-else-if="state.statement.phase === 'failed'" class="bcm-error" role="alert">{{ statementFailure }}</p>
+      <StatementView
+        v-else-if="state.statement.value"
+        :statement="state.statement.value"
+        :appeal="state.statement.appeal"
+        :withdrawing="!!state.busy.withdraw"
+        @appeal="ctl.fileAppeal()"
+        @withdraw="ctl.withdrawAppeal()"
+      />
+      <p><a :href="routes.myCommunityPath">{{ t('common.back') }}</a></p>
+    </template>
+
+    <!-- the panel -->
+    <template v-else>
+      <p v-if="state.phase === 'loading'" class="bcm-muted" role="status">{{ t('common.loading') }}</p>
+      <div v-else-if="state.phase === 'signIn' && !noticeMode" class="bcm-row">
+        <p>{{ t('panel.signIn') }}</p>
+        <a v-if="signInHref()" class="bcm-btn bcm-primary" :href="signInHref() ?? undefined">{{ t('common.signIn') }}</a>
+      </div>
+      <p v-else-if="state.phase === 'failed'" class="bcm-error" role="alert">{{ memberFailure }}</p>
+      <template v-else-if="state.phase === 'ready'">
+        <!-- profile -->
+        <section v-if="profile && member" class="bcm-section" :aria-labelledby="`${id}-profile`">
+          <h3 :id="`${id}-profile`">{{ t('panel.profile') }}</h3>
+          <div v-if="!state.profile" class="bcm-msg">
+            <AuthorAvatar :author="{ kind: 'member', memberId: member.memberId, displayName: profile.displayName, avatarPreset: profile.avatarPreset }" />
+            <div class="bcm-msg-main">
+              <span class="bcm-author">{{ profile.displayName }}</span>
+              <span class="bcm-handle">{{ profile.handle }}</span>
+              <div class="bcm-row">
+                <button type="button" class="bcm-btn bcm-small" @click="ctl.editProfile()">{{ t('panel.profileEdit') }}</button>
+              </div>
+            </div>
+          </div>
+          <form v-else class="bcm-form bcm-card" novalidate @submit.prevent="ctl.saveProfile()">
+            <div class="bcm-field">
+              <label :for="`${id}-name`">{{ t('onboarding.displayName') }}</label>
+              <input :id="`${id}-name`" v-model="state.profile.displayName" class="bcm-input" autocomplete="nickname" :aria-invalid="state.profile.fields.includes('displayName')" />
+              <p 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="state.profile.handle" class="bcm-input" autocomplete="username" autocapitalize="none" spellcheck="false" :maxlength="HANDLE_MAX" :aria-invalid="state.profile.fields.includes('handle')" />
+              <p class="bcm-hint">{{ t('onboarding.handleHint', { min: HANDLE_MIN, max: HANDLE_MAX, days: COMMUNITY_HANDLE_CHANGE_DAYS }) }}</p>
+            </div>
+            <fieldset class="bcm-choices">
+              <legend>{{ t('onboarding.avatar') }}</legend>
+              <label class="bcm-choice">
+                <input v-model="state.profile.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="state.profile.avatarPreset" type="radio" :name="`${id}-avatar`" :value="preset.id" />
+                <span>{{ preset.emoji }}</span>
+              </label>
+            </fieldset>
+            <p v-if="state.profile.failure" class="bcm-error" role="alert">{{ text(failureText(state.profile.failure, lang)) }}</p>
+            <div class="bcm-row">
+              <span class="bcm-spacer" />
+              <button type="button" class="bcm-btn" :disabled="state.profile.sending" @click="ctl.cancelProfile()">{{ t('composer.cancel') }}</button>
+              <button type="submit" class="bcm-btn bcm-primary" :disabled="state.profile.sending">{{ state.profile.sending ? t('composer.sending') : t('composer.save') }}</button>
+            </div>
+          </form>
+        </section>
+
+        <!-- notifications -->
+        <section class="bcm-section" :aria-labelledby="`${id}-notifications`">
+          <div class="bcm-row">
+            <h3 :id="`${id}-notifications`">{{ t('panel.notifications') }}</h3>
+            <span v-if="ctl.unreadCount() > 0" class="bcm-badge">{{ t('panel.unread', { count: ctl.unreadCount() }) }}</span>
+            <span class="bcm-spacer" />
+            <button v-if="ctl.unreadCount() > 0" type="button" class="bcm-btn bcm-small" :disabled="!!state.busy.markRead" @click="ctl.markAllRead()">{{ t('panel.markRead') }}</button>
+          </div>
+          <p v-if="state.notifications.length === 0" class="bcm-muted">{{ t('panel.notificationsEmpty') }}</p>
+          <ul v-else class="bcm-list">
+            <li v-for="n in state.notifications" :key="n.id" :class="{ 'bcm-unread': n.readAt === null }">
+              <p v-if="notificationKey(n)">{{ t(notificationKey(n)!) }}</p>
+              <time class="bcm-time" :datetime="n.createdAt">{{ formatDate(lang, n.createdAt) }}</time>
+              <a v-if="n.decisionId && statementHref(n.decisionId)" :href="statementHref(n.decisionId) ?? undefined">{{ t('sanction.statement') }}</a>
+            </li>
+          </ul>
+        </section>
+
+        <!-- statements -->
+        <section class="bcm-section" :aria-labelledby="`${id}-statements`">
+          <h3 :id="`${id}-statements`">{{ t('panel.statements') }}</h3>
+          <p v-if="state.decisions.length === 0" class="bcm-muted">{{ t('panel.statementsEmpty') }}</p>
+          <ul v-else class="bcm-list">
+            <li v-for="d in state.decisions" :key="d.decisionId">
+              <p v-if="restrictionKey(d.restriction)"><strong>{{ t(restrictionKey(d.restriction)!) }}</strong></p>
+              <p v-if="categoryKey(d.category)" class="bcm-muted">{{ t(categoryKey(d.category)!) }}</p>
+              <p class="bcm-muted">{{ t('statement.decidedAt', { date: formatDate(lang, d.decidedAt) }) }}</p>
+              <p v-if="appealStatusKey(d.decisionId)" class="bcm-muted">{{ t(appealStatusKey(d.decisionId)!) }}</p>
+              <p v-else-if="d.canAppeal" class="bcm-muted">{{ t('statement.appealUntil', { date: formatDate(lang, d.appealWindowClosesAt) }) }}</p>
+              <a v-if="statementHref(d.decisionId)" :href="statementHref(d.decisionId) ?? undefined">{{ t('sanction.statement') }}</a>
+            </li>
+          </ul>
+        </section>
+
+        <!-- reports -->
+        <section class="bcm-section" :aria-labelledby="`${id}-reports`">
+          <h3 :id="`${id}-reports`">{{ t('panel.reports') }}</h3>
+          <p v-if="state.reports.length === 0" class="bcm-muted">{{ t('panel.reportsEmpty') }}</p>
+          <ul v-else class="bcm-list">
+            <li v-for="r in state.reports" :key="r.caseId">
+              <p v-if="categoryKey(r.category)"><strong>{{ t(categoryKey(r.category)!) }}</strong></p>
+              <p v-if="caseStatusKey(r.status)">{{ t(caseStatusKey(r.status)!) }}</p>
+              <time class="bcm-time" :datetime="r.reportedAt">{{ formatDate(lang, r.reportedAt) }}</time>
+              <p v-if="r.decidedAt" class="bcm-muted">{{ t('statement.decidedAt', { date: formatDate(lang, r.decidedAt) }) }}</p>
+            </li>
+          </ul>
+        </section>
+
+        <!-- blocks -->
+        <section v-if="member" class="bcm-section" :aria-labelledby="`${id}-blocks`">
+          <h3 :id="`${id}-blocks`">{{ t('panel.blocks') }}</h3>
+          <p v-if="state.blocks.length === 0" class="bcm-muted">{{ t('panel.blocksEmpty') }}</p>
+          <ul v-else class="bcm-list">
+            <li v-for="b in state.blocks" :key="b.memberId" class="bcm-row">
+              <span>{{ b.author.kind === 'member' && 'displayName' in b.author && b.author.displayName ? b.author.displayName : t('author.deleted') }}</span>
+              <span class="bcm-spacer" />
+              <button type="button" class="bcm-btn bcm-small" :disabled="!!state.busy[`block:${b.memberId}`]" @click="ctl.unblock(b.memberId)">{{ t('discussion.unblock') }}</button>
+            </li>
+          </ul>
+        </section>
+
+        <!-- consents -->
+        <section v-if="member && consent !== null" class="bcm-section" :aria-labelledby="`${id}-consents`">
+          <h3 :id="`${id}-consents`">{{ t('panel.consents') }}</h3>
+          <template v-if="consent === 'accepted'">
+            <p>{{ t('panel.art9Given') }}</p>
+            <div class="bcm-row">
+              <button type="button" class="bcm-btn" :disabled="!!state.busy.consent" @click="confirming = 'consent'">{{ t('panel.art9Withdraw') }}</button>
+            </div>
+          </template>
+          <p v-else>{{ t('panel.art9NotGiven') }}</p>
+        </section>
+
+        <!-- export -->
+        <section v-if="member" class="bcm-section" :aria-labelledby="`${id}-export`">
+          <h3 :id="`${id}-export`">{{ t('panel.export') }}</h3>
+          <p class="bcm-hint">{{ t('panel.exportHint') }}</p>
+          <div class="bcm-row">
+            <button type="button" class="bcm-btn" :disabled="state.exporting" @click="exportNow()">{{ state.exporting ? t('panel.exporting') : t('panel.export') }}</button>
+          </div>
+        </section>
+
+        <!-- the profile's deletion -->
+        <section v-if="member" class="bcm-section" :aria-labelledby="`${id}-erase`">
+          <h3 :id="`${id}-erase`">{{ t('panel.erase') }}</h3>
+          <template v-if="ctl.erasing()">
+            <p>{{ state.purgeAfter ? t('panel.eraseScheduled', { date: formatDate(lang, state.purgeAfter) }) : t('notification.erasure_scheduled') }}</p>
+            <div class="bcm-row">
+              <button type="button" class="bcm-btn bcm-primary" :disabled="!!state.busy.erase" @click="ctl.cancelErase()">{{ t('panel.eraseCancel') }}</button>
+            </div>
+          </template>
+          <template v-else>
+            <p class="bcm-hint">{{ t('panel.eraseExplain') }}</p>
+            <div class="bcm-row">
+              <button type="button" class="bcm-btn bcm-danger" :disabled="!!state.busy.erase" @click="confirming = 'erase'">{{ t('panel.erase') }}</button>
+            </div>
+          </template>
+        </section>
+      </template>
+    </template>
+
+    <p class="bcm-sr" aria-live="polite">{{ liveText }}</p>
+
+    <ConfirmDialog
+      v-if="confirming === 'consent'"
+      title="panel.art9WithdrawTitle"
+      explain="panel.art9WithdrawExplain"
+      confirm="panel.art9WithdrawConfirm"
+      cancel="panel.art9WithdrawCancel"
+      :busy="!!state.busy.consent"
+      :fallback-focus="() => heading"
+      @confirm="confirmAction()"
+      @cancel="confirming = null"
+    />
+    <ConfirmDialog
+      v-if="confirming === 'erase'"
+      title="panel.eraseTitle"
+      explain="panel.eraseExplain"
+      confirm="panel.eraseConfirm"
+      cancel="panel.eraseKeep"
+      danger
+      :busy="!!state.busy.erase"
+      :fallback-focus="() => heading"
+      @confirm="confirmAction()"
+      @cancel="confirming = null"
+    />
+  </section>
+</template>