@meith/web 0.16.0

package/src/view/messages.ts

@@ -0,0 +1,222 @@
+import type { Translator } from '@meith/i18n'
+import type { FolderCounts, MessageDetail, MessageFolder, MessageListRow } from '@meith/messages'
+import type { LinkModel, TimeModel } from '@meith/theme-kit'
+
+import { formatTime, untranslated } from './time'
+
+export const MESSAGE_FORM_ID = 'message-actions'
+
+export interface FolderTab {
+  readonly folder: MessageFolder
+  readonly label: string
+  readonly href: string
+  readonly count: number
+  readonly isCurrent: boolean
+}
+
+export interface MessageRowView {
+  readonly copyId: number
+  readonly href: string
+  readonly subject: string
+  readonly people: string
+  readonly peopleLabel: string
+  readonly at: TimeModel
+  readonly isUnread: boolean
+}
+
+export interface QuotaView {
+  readonly stored: number
+  readonly quota: number
+  readonly label: string
+  readonly isFull: boolean
+  readonly isNearlyFull: boolean
+}
+
+export interface MessageFolderView {
+  readonly folder: MessageFolder
+  readonly tabs: readonly FolderTab[]
+  readonly rows: readonly MessageRowView[]
+  readonly nextHref: string | null
+  readonly quota: QuotaView
+  readonly composeHref: string
+}
+
+const FOLDER_LABELS: Readonly<Record<MessageFolder, string>> = {
+  inbox: 'Inbox',
+  sent: 'Sent',
+  trash: 'Trash',
+}
+
+export function folderHref(folder: MessageFolder): string {
+  return folder === 'inbox' ? '/messages' : `/messages?folder=${folder}`
+}
+
+export function quotaView(counts: FolderCounts, quota: number): QuotaView {
+  if (quota <= 0) {
+    return {
+      stored: counts.stored,
+      quota: 0,
+      label: `${counts.stored} stored`,
+      isFull: false,
+      isNearlyFull: false,
+    }
+  }
+
+  return {
+    stored: counts.stored,
+    quota,
+    label: `${counts.stored} of ${quota} stored`,
+    isFull: counts.stored >= quota,
+    isNearlyFull: counts.stored >= Math.floor(quota * 0.9),
+  }
+}
+
+export function buildMessageFolderView(input: {
+  readonly folder: MessageFolder
+  readonly rows: readonly MessageListRow[]
+  readonly counts: FolderCounts
+  readonly quota: number
+  readonly nextBefore: number | null
+  readonly now: Date
+  readonly t?: Translator
+}): MessageFolderView {
+  const t = input.t ?? untranslated()
+  const tabs: readonly FolderTab[] = (['inbox', 'sent', 'trash'] as const).map((folder) => ({
+    folder,
+    label: FOLDER_LABELS[folder],
+    href: folderHref(folder),
+    count: folder === 'inbox' ? input.counts.unread : input.counts[folder],
+    isCurrent: folder === input.folder,
+  }))
+
+  return {
+    folder: input.folder,
+    tabs,
+    rows: input.rows.map((row) => ({
+      copyId: row.copyId,
+      href: `/messages/${row.messageId}`,
+      subject: row.subject === '' ? t.t('message.noSubject') : row.subject,
+      people: peopleLabel(row),
+      peopleLabel: row.folder === 'sent' ? 'To' : 'From',
+      at: formatTime(row.sentAt, input.now, input.t),
+      isUnread: row.readAt === null && row.role !== 'author',
+    })),
+    nextHref:
+      input.nextBefore === null
+        ? null
+        : `${folderHref(input.folder)}${input.folder === 'inbox' ? '?' : '&'}before=${input.nextBefore}`,
+    quota: quotaView(input.counts, input.quota),
+    composeHref: '/messages/compose',
+  }
+}
+
+function peopleLabel(row: MessageListRow): string {
+  const names = [...row.counterparties]
+  if (names.length === 0)
+    return row.moreCounterparties > 0 ? `${row.moreCounterparties} people` : '—'
+
+  if (row.moreCounterparties > 0) {
+    return `${names.join(', ')} and ${row.moreCounterparties} ${
+      row.moreCounterparties === 1 ? 'other' : 'others'
+    }`
+  }
+
+  if (names.length === 1) return names[0] as string
+  const last = names.pop() as string
+  return `${names.join(', ')} and ${last}`
+}
+
+export interface ParticipantView {
+  readonly username: string
+  readonly role: 'author' | 'to' | 'bcc'
+  readonly readLabel: string | null
+}
+
+export interface MessageView {
+  readonly id: number
+  readonly subject: string
+  readonly author: string
+  readonly at: TimeModel
+  readonly bodyHtml: string
+  readonly folder: MessageFolder
+  readonly participants: readonly ParticipantView[]
+  readonly tracking: readonly ParticipantView[]
+  readonly actions: readonly LinkModel[]
+  readonly reportHref: string | null
+}
+
+export function buildMessageView(input: {
+  readonly detail: MessageDetail
+  readonly bodyHtml: string
+  readonly viewerUserId: number
+  readonly now: Date
+  readonly t?: Translator
+}): MessageView {
+  const t = input.t ?? untranslated()
+  const { detail } = input
+  const isAuthor = detail.copy.role === 'author'
+
+  const participants: readonly ParticipantView[] = detail.participants.map((participant) => ({
+    username: participant.username,
+    role: participant.role,
+    readLabel:
+      participant.role === 'author'
+        ? null
+        : participant.readAt === null
+          ? t.t('message.notRead')
+          : `Read ${formatTime(participant.readAt, input.now, input.t).label}`,
+  }))
+
+  return {
+    id: detail.message.id,
+    subject: detail.message.subject === '' ? t.t('message.noSubject') : detail.message.subject,
+    author:
+      detail.message.authorUsername === ''
+        ? t.t('message.deletedMember')
+        : detail.message.authorUsername,
+    at: formatTime(detail.message.sentAt, input.now, input.t),
+    bodyHtml: input.bodyHtml,
+    folder: detail.copy.folder,
+    participants,
+    tracking: isAuthor ? participants.filter((p) => p.role !== 'author') : [],
+    actions: [
+      ...(isAuthor
+        ? []
+        : [{ label: 'Reply', href: `/messages/compose?reply=${detail.message.id}` }]),
+      { label: 'Forward', href: `/messages/compose?forward=${detail.message.id}` },
+    ],
+    reportHref: isAuthor ? null : `/report?kind=private_message&id=${detail.message.id}`,
+  }
+}
+
+export function messageNotice(
+  query: {
+    readonly sent?: string | undefined
+    readonly moved?: string | undefined
+    readonly deleted?: string | undefined
+    readonly marked?: string | undefined
+    readonly emptied?: string | undefined
+  },
+  t: Translator = untranslated(),
+): { kind: 'info'; message: string } | null {
+  if (query.sent !== undefined) return { kind: 'info', message: t.t('message.sent') }
+  if (query.moved !== undefined) {
+    return { kind: 'info', message: `${plural(query.moved, 'message')} moved.` }
+  }
+  if (query.deleted !== undefined) {
+    return { kind: 'info', message: `${plural(query.deleted, 'message')} deleted.` }
+  }
+  if (query.marked !== undefined) {
+    return { kind: 'info', message: `${plural(query.marked, 'message')} updated.` }
+  }
+  if (query.emptied !== undefined) {
+    return { kind: 'info', message: `Trash emptied: ${plural(query.emptied, 'message')} deleted.` }
+  }
+  return null
+}
+
+function plural(raw: string, noun: string): string {
+  const n = Number(raw)
+  const count = Number.isFinite(n) && n > 0 ? Math.floor(n) : 0
+  return `${count} ${count === 1 ? noun : `${noun}s`}`
+}

package/src/view/metadata.ts

@@ -0,0 +1,75 @@
+import { type CompiledWordFilter, summarise } from '@meith/markdown'
+
+import { filterWords } from './word-filter'
+
+export interface CanonicalInput {
+  readonly path: string
+  readonly page: number
+}
+
+export function canonicalPath(input: CanonicalInput): string {
+  return input.page <= 1 ? input.path : `${input.path}?page=${input.page}`
+}
+
+export interface PageLinks {
+  readonly canonical: string
+  readonly previous: string | null
+  readonly next: string | null
+}
+
+export function pageLinks(input: CanonicalInput & { readonly hasNext: boolean }): PageLinks {
+  return {
+    canonical: canonicalPath(input),
+    previous: input.page <= 1 ? null : canonicalPath({ path: input.path, page: input.page - 1 }),
+    next: input.hasNext ? canonicalPath({ path: input.path, page: input.page + 1 }) : null,
+  }
+}
+
+export function cardDescription(
+  source: string | null,
+  fallback: string,
+  wordFilter?: CompiledWordFilter | undefined,
+): string {
+  if (source === null) return fallback
+  const flat = filterWords(summarise(source, 200), wordFilter)
+  return flat === '' ? fallback : flat
+}
+
+export interface ThreadJsonLd {
+  readonly title: string
+  readonly url: string
+  readonly author: string
+  readonly published: Date
+  readonly modified: Date
+  readonly replyCount: number
+  readonly forumTitle: string
+  readonly description: string
+}
+
+export function jsonLdScript(record: Record<string, unknown>): string {
+  return JSON.stringify(record)
+    .replace(/</g, '\\u003c')
+    .replace(/>/g, '\\u003e')
+    .replace(/&/g, '\\u0026')
+    .replace(/\u2028/g, '\\u2028')
+    .replace(/\u2029/g, '\\u2029')
+}
+
+export function threadJsonLd(input: ThreadJsonLd): Record<string, unknown> {
+  return {
+    '@context': 'https://schema.org',
+    '@type': 'DiscussionForumPosting',
+    headline: input.title,
+    url: input.url,
+    datePublished: input.published.toISOString(),
+    dateModified: input.modified.toISOString(),
+    author: { '@type': 'Person', name: input.author },
+    articleSection: input.forumTitle,
+    description: input.description,
+    interactionStatistic: {
+      '@type': 'InteractionCounter',
+      interactionType: 'https://schema.org/CommentAction',
+      userInteractionCount: input.replyCount,
+    },
+  }
+}

package/src/view/modcp-nav.ts

@@ -0,0 +1,76 @@
+import {
+  currentProps,
+  deepestHrefIn,
+  isUnder,
+  type PanelNav,
+  type PanelSection,
+  sectionHrefIn,
+} from './panel-nav'
+
+export { currentProps, isUnder }
+
+export interface ModCpNavAccess {
+  readonly canWarn: boolean
+  readonly canLookUpIp: boolean
+}
+
+export const MODCP_OVERVIEW: PanelSection = {
+  href: '/modcp',
+  titleKey: 'modCpNav.modcp.title',
+  icon: 'overview',
+  blurbKey: 'modCpNav.modcp.blurb',
+}
+
+export function modCpSections(access: ModCpNavAccess): PanelNav {
+  return [
+    {
+      href: '/moderation',
+      titleKey: 'modCpNav.moderation.title',
+      icon: 'queue',
+      blurbKey: 'modCpNav.moderation.blurb',
+      children: access.canWarn
+        ? [{ href: '/moderation/warn', titleKey: 'modCpNav.moderation-warn.title', record: true }]
+        : [],
+    },
+    {
+      href: '/moderation/reports',
+      titleKey: 'modCpNav.moderation-reports.title',
+      icon: 'reports',
+      blurbKey: 'modCpNav.moderation-reports.blurb',
+    },
+    {
+      href: '/modcp/forums',
+      titleKey: 'modCpNav.modcp-forums.title',
+      icon: 'forums',
+      blurbKey: 'modCpNav.modcp-forums.blurb',
+    },
+    {
+      href: '/modcp/log',
+      titleKey: 'modCpNav.modcp-log.title',
+      icon: 'log',
+      blurbKey: 'modCpNav.modcp-log.blurb',
+    },
+    ...(access.canLookUpIp
+      ? ([
+          {
+            href: '/modcp/ip',
+            titleKey: 'modCpNav.modcp-ip.title',
+            icon: 'ip',
+            blurbKey: 'modCpNav.modcp-ip.blurb',
+          },
+        ] satisfies PanelNav)
+      : []),
+  ]
+}
+
+export function modCpNav(access: ModCpNavAccess): PanelNav {
+  return [MODCP_OVERVIEW, ...modCpSections(access)]
+}
+
+export function activeSectionHref(access: ModCpNavAccess, pathname: string): string | null {
+  return sectionHrefIn(modCpNav(access), pathname)
+}
+
+export function deepestNavHref(access: ModCpNavAccess, pathname: string): string | null {
+  return deepestHrefIn(modCpNav(access), pathname)
+}

package/src/view/moderation-copy.ts

@@ -0,0 +1,84 @@
+import type { Translator } from '@meith/i18n'
+
+import { copyFor, patternCopy, splitAround } from './copy'
+import { untranslated } from './time'
+
+export function moderationFormsCopy(
+  t: Translator = untranslated(),
+): Readonly<Record<string, string>> {
+  const [byLead, byTail] = splitAround(t, 'moderationForm.queue.by', 'author')
+  return {
+    ...copyFor(
+      [
+        'moderationForm.queue.approve',
+        'moderationForm.queue.reject',
+        'moderationForm.report.label',
+        'moderationForm.report.hint',
+        'moderationForm.report.submit',
+        'moderationForm.report.putBack',
+        'moderationForm.report.take',
+        'moderationForm.report.note',
+        'moderationForm.report.resolve',
+        'moderationForm.report.dismiss',
+        'moderationForm.inline.withThreads',
+        'moderationForm.inline.withPosts',
+        'moderationForm.inline.moderateThreads',
+        'moderationForm.inline.moderatePosts',
+        'moderationForm.inline.approve',
+        'moderationForm.inline.restore',
+        'moderationForm.inline.splitTitleSr',
+        'moderationForm.inline.splitOut',
+        'moderationForm.inline.delete',
+        'moderationForm.newThreadTitle',
+        'moderationForm.moveTo',
+        'moderationForm.tool.lock',
+        'moderationForm.tool.unlock',
+        'moderationForm.tool.pin',
+        'moderationForm.tool.unpin',
+        'moderationForm.tool.move',
+        'moderationForm.tool.copy',
+        'moderationForm.tool.deleteThread',
+        'moderationForm.lock.why',
+        'moderationForm.lock.signature',
+        'moderationForm.lock.unlockSignature',
+        'moderationForm.lock.avatar',
+        'moderationForm.lock.unlockAvatar',
+        'moderationForm.surgery.fromSr',
+        'moderationForm.surgery.titleSr',
+        'moderationForm.surgery.split',
+        'moderationForm.surgery.mergeSr',
+        'moderationForm.surgery.mergePlaceholder',
+        'moderationForm.surgery.merge',
+        'moderationForm.warn.revokeSr',
+        'moderationForm.warn.revokePlaceholder',
+        'moderationForm.warn.revoke',
+      ],
+      t,
+    ),
+    ...patternCopy(['moderationForm.queue.inForum', 'moderationForm.surgery.splitPoint'], t),
+    'moderationForm.queue.byLead': byLead,
+    'moderationForm.queue.byTail': byTail,
+  }
+}
+
+export function issueWarningFormCopy(
+  username: string,
+  t: Translator = untranslated(),
+): Readonly<Record<string, string>> {
+  return {
+    ...copyFor(
+      [
+        'moderationForm.warn.reason',
+        'moderationForm.warn.somethingElse',
+        'moderationForm.warn.titleLabel',
+        'moderationForm.warn.titleHint',
+        'moderationForm.warn.points',
+        'moderationForm.warn.what',
+        'moderationForm.warn.submit',
+      ],
+      t,
+    ),
+    'moderationForm.warn.title': t.t('moderationForm.warn.title', { username }),
+    'moderationForm.warn.whatHint': t.t('moderationForm.warn.whatHint', { username }),
+  }
+}

package/src/view/moderation-queue.ts

@@ -0,0 +1,67 @@
+import type { Translator } from '@meith/i18n'
+import type { QueueItem } from '@meith/moderation'
+import type { TimeModel } from '@meith/theme-kit'
+
+import { postLink } from './post-link'
+import { formatTime, untranslated } from './time'
+
+export interface QueueRowModel {
+  readonly value: string
+  readonly kind: 'thread' | 'post'
+  readonly kindLabel: string
+  readonly forumTitle: string
+  readonly threadTitle: string
+  readonly href: string
+  readonly authorUsername: string
+  readonly authorHref: string | null
+  readonly excerpt: string
+  readonly postedAt: TimeModel
+}
+
+export interface QueueViewModel {
+  readonly rows: readonly QueueRowModel[]
+  readonly pending: number
+  readonly nextHref: string | null
+  readonly emptyReason: 'nothing-moderated' | 'queue-empty' | null
+}
+
+export interface QueueViewInput {
+  readonly items: readonly QueueItem[]
+  readonly pending: number
+  readonly nextCursor?: string | undefined
+  readonly moderatesAnything: boolean
+  readonly now: Date
+  readonly t?: Translator
+}
+
+function row(item: QueueItem, now: Date, t: Translator | undefined): QueueRowModel {
+  const thread = `/thread/${item.threadId}-${item.threadSlug}`
+  return {
+    value: `${item.kind}:${item.id}`,
+    kind: item.kind,
+    kindLabel: (t ?? untranslated()).t(item.kind === 'thread' ? 'queue.newThread' : 'queue.reply'),
+    forumTitle: item.forumTitle,
+    threadTitle: item.threadTitle,
+    href: item.kind === 'thread' ? `/${item.forumId}` : postLink(thread, item.id),
+    authorUsername: item.authorUsername,
+    authorHref: item.authorUserId === null ? null : `/member/${item.authorUserId}`,
+    excerpt: item.excerpt,
+    postedAt: formatTime(item.createdAt, now, t),
+  }
+}
+
+export function buildQueueView(input: QueueViewInput): QueueViewModel {
+  return {
+    rows: input.items.map((item) => row(item, input.now, input.t)),
+    pending: input.pending,
+    nextHref:
+      input.nextCursor === undefined
+        ? null
+        : `/moderation?after=${encodeURIComponent(input.nextCursor)}`,
+    emptyReason: !input.moderatesAnything
+      ? 'nothing-moderated'
+      : input.items.length === 0
+        ? 'queue-empty'
+        : null,
+  }
+}