@meith/web 0.16.0

package/app/(board)/moderation/page.tsx

@@ -0,0 +1,111 @@
+import type { Metadata } from 'next'
+import { notFound } from 'next/navigation'
+
+import { ModerationQueue, QUEUE_PAGE_SIZE } from '@meith/moderation'
+import { Card, Empty, EmptyDescription, EmptyTitle } from '@meith/ui'
+
+import { QueueForm } from '@/components/moderation/queue-form'
+import { BoardNotice } from '@/components/shell/board-notice'
+import { PanelPage } from '@/components/shell/panel-page'
+import { PanelPagination } from '@/components/shell/panel-pagination'
+import { getContainer } from '@/server/container'
+import { getActor } from '@/server/context'
+import { getTranslator, tr } from '@/server/i18n'
+import { moderationFormsCopy } from '@/view/moderation-copy'
+import { buildQueueView } from '@/view/moderation-queue'
+import { offsetOf, readPage } from '@/view/pager'
+
+export async function generateMetadata(): Promise<Metadata> {
+  return { title: await tr('page.moderation-queue') }
+}
+
+export default async function ModerationPage({
+  searchParams,
+}: {
+  searchParams: Promise<{
+    after?: string
+    did?: string
+    n?: string
+    refused?: string
+    gone?: string
+  }>
+}) {
+  const query = await searchParams
+  const actor = await getActor()
+  const { authorizer, moderationQueue } = getContainer()
+  if (moderationQueue === null || actor.userId === null) notFound()
+
+  const moderated = await authorizer.moderatedForumIds(actor)
+  const queue = new ModerationQueue({ queue: moderationQueue })
+  const pageNumber = readPage(query)
+  const [page, pending] = await Promise.all([
+    queue.list(moderated, { offset: offsetOf(pageNumber, QUEUE_PAGE_SIZE) }),
+    queue.countPending(moderated),
+  ])
+
+  const translator = await getTranslator()
+
+  const view = buildQueueView({
+    items: page.items,
+    pending,
+    nextCursor: page.nextCursor,
+    moderatesAnything: moderated.length > 0,
+    now: new Date(),
+    t: translator,
+  })
+
+  const parts: string[] = []
+  if (query.did !== undefined && query.n !== undefined) {
+    const verb = query.did === 'approve' ? 'board.moderation.approved' : 'board.moderation.rejected'
+    parts.push(translator.t(verb, { count: Number(query.n) }))
+    if (query.refused !== undefined) {
+      parts.push(translator.t('board.moderation.notModerated', { count: Number(query.refused) }))
+    }
+    if (query.gone !== undefined) {
+      parts.push(translator.t('board.moderation.alreadyHandled', { count: Number(query.gone) }))
+    }
+  }
+  const notice = parts.length === 0 ? null : parts.join(' ')
+
+  return (
+    <PanelPage
+      title={await tr('page.approval-queue')}
+      lede={
+        view.pending === 1
+          ? translator.t('board.moderation.awaiting', { count: 1 })
+          : translator.t('board.moderation.awaiting', { count: view.pending })
+      }
+    >
+      {notice !== null && <BoardNotice kind="info" message={notice} dismissHref="/moderation" />}
+
+      {view.emptyReason !== null && (
+        <Card>
+          <Empty className="py-8">
+            <EmptyTitle>
+              {view.emptyReason === 'nothing-moderated'
+                ? translator.t('board.moderation.nothingModerated')
+                : translator.t('board.moderation.nothingWaiting')}
+            </EmptyTitle>
+            <EmptyDescription>
+              {view.emptyReason === 'nothing-moderated'
+                ? translator.t('board.moderation.nothingModeratedHint')
+                : translator.t('board.moderation.nothingWaitingHint')}
+            </EmptyDescription>
+          </Empty>
+        </Card>
+      )}
+
+      {view.rows.length > 0 && (
+        <QueueForm rows={view.rows} copy={moderationFormsCopy(await getTranslator())} />
+      )}
+
+      <PanelPagination
+        path="/moderation"
+        params={query}
+        page={pageNumber}
+        pageSize={QUEUE_PAGE_SIZE}
+        total={pending}
+      />
+    </PanelPage>
+  )
+}

package/app/(board)/moderation/reports/page.tsx

@@ -0,0 +1,193 @@
+import type { Metadata } from 'next'
+import { notFound } from 'next/navigation'
+
+import { REPORTS_PAGE_SIZE, ReportService } from '@meith/moderation'
+import { Card, Empty, EmptyDescription, EmptyTitle } from '@meith/ui'
+
+import { AssignReportForm, CloseReportForm } from '@/components/moderation/report-forms'
+import { BoardNotice } from '@/components/shell/board-notice'
+import { PanelPage } from '@/components/shell/panel-page'
+import { PanelPagination } from '@/components/shell/panel-pagination'
+import { getContainer } from '@/server/container'
+import { getActor } from '@/server/context'
+import { getTranslator, tr } from '@/server/i18n'
+import { messageService } from '@/server/messages'
+import { hasReportScope, resolveReportScope } from '@/server/report-scope'
+import { moderationFormsCopy } from '@/view/moderation-copy'
+import { offsetOf, readPage } from '@/view/pager'
+import { postLink } from '@/view/post-link'
+import { formatTime } from '@/view/time'
+
+export async function generateMetadata(): Promise<Metadata> {
+  return { title: await tr('page.reports') }
+}
+
+export default async function ReportsPage({
+  searchParams,
+}: {
+  searchParams: Promise<{ page?: string; closed?: string }>
+}) {
+  const query = await searchParams
+  const actor = await getActor()
+  const { reports } = getContainer()
+  if (reports === null || actor.userId === null) notFound()
+
+  const scope = await resolveReportScope()
+  if (!hasReportScope(scope)) notFound()
+
+  const service = new ReportService({ reports })
+  const pageNumber = readPage(query)
+  const [page, open] = await Promise.all([
+    service.listOpen(scope, { offset: offsetOf(pageNumber, REPORTS_PAGE_SIZE) }),
+    service.countOpen(scope),
+  ])
+
+  const reportedMessages = await reportedPrivateMessages(page.rows)
+
+  const now = new Date()
+  const translator = await getTranslator()
+  const notice =
+    query.closed === 'resolved'
+      ? translator.t('board.reports.resolved')
+      : query.closed === 'rejected'
+        ? translator.t('board.reports.dismissed')
+        : null
+
+  return (
+    <PanelPage
+      title={await tr('page.reports')}
+      lede={translator.t('board.reports.open', { count: open })}
+    >
+      {notice !== null && (
+        <BoardNotice kind="info" message={notice} dismissHref="/moderation/reports" />
+      )}
+
+      {page.rows.length === 0 && (
+        <Card>
+          <Empty className="py-8">
+            <EmptyTitle>{await tr('page.nothing-outstanding')}</EmptyTitle>
+            <EmptyDescription>{await tr('page.every-report-forums-moderate-has')}</EmptyDescription>
+          </Empty>
+        </Card>
+      )}
+
+      {page.rows.length > 0 && (
+        <ul className="flex flex-col gap-3">
+          {page.rows.map((report) => {
+            const posted = formatTime(report.createdAt, now, translator)
+            const message = reportedMessages.get(report.targetId)
+            const href =
+              report.kind === 'user'
+                ? `/member/${report.targetId}`
+                : report.kind === 'thread'
+                  ? `/thread/${report.targetId}`
+                  : report.kind === 'private_message'
+                    ? null
+                    : postLink(`/thread/${report.threadId ?? 0}`, report.targetId)
+
+            return (
+              <li
+                key={report.id}
+                className="rounded-lg border border-border bg-card p-4 text-card-foreground shadow-elevation"
+              >
+                <div className="flex flex-wrap items-baseline gap-2 text-sm">
+                  <span className="font-medium capitalize">
+                    {report.kind === 'private_message'
+                      ? translator.t('board.reports.privateMessage')
+                      : report.kind}
+                  </span>
+                  {href === null ? (
+                    <span className="font-medium">{report.targetLabel}</span>
+                  ) : (
+                    <a
+                      href={href}
+                      className="font-medium text-foreground underline decoration-border underline-offset-2 hover:decoration-foreground"
+                    >
+                      {report.targetLabel}
+                    </a>
+                  )}
+                  <span className="text-xs text-muted-foreground">
+                    {translator.t('board.reports.reportedBy', {
+                      username:
+                        report.reporterUsername ?? translator.t('board.reports.deletedAccount'),
+                    })}{' '}
+                    · <time dateTime={posted.iso}>{posted.label}</time>
+                  </span>
+                </div>
+
+                <p className="mt-2 whitespace-pre-wrap break-words text-sm leading-relaxed">
+                  {report.reason}
+                </p>
+
+                {report.kind === 'private_message' && (
+                  <div className="mt-2 rounded-md border border-border bg-muted/50 p-3">
+                    <p className="text-xs font-medium text-muted-foreground">
+                      {message === undefined
+                        ? translator.t('board.reports.message')
+                        : translator.t('board.reports.messageFrom', {
+                            username:
+                              message.authorUsername === ''
+                                ? translator.t('board.reports.deletedMember')
+                                : message.authorUsername,
+                          })}
+                    </p>
+                    <p className="mt-1 whitespace-pre-wrap break-words text-sm">
+                      {message?.message ?? translator.t('board.reports.messageDeleted')}
+                    </p>
+                  </div>
+                )}
+
+                <div className="mt-2 flex flex-wrap items-center gap-3 text-xs text-muted-foreground">
+                  <span>
+                    {report.assignedToUsername === null
+                      ? translator.t('board.reports.unassigned')
+                      : translator.t('board.reports.assignedTo', {
+                          username: report.assignedToUsername,
+                        })}
+                  </span>
+                  <AssignReportForm
+                    copy={moderationFormsCopy(translator)}
+                    reportId={report.id}
+                    mine={report.assignedToUserId === actor.userId}
+                  />
+                </div>
+
+                <CloseReportForm reportId={report.id} copy={moderationFormsCopy(translator)} />
+              </li>
+            )
+          })}
+        </ul>
+      )}
+
+      <PanelPagination
+        path="/moderation/reports"
+        params={query}
+        page={pageNumber}
+        pageSize={REPORTS_PAGE_SIZE}
+        total={open}
+      />
+    </PanelPage>
+  )
+}
+
+async function reportedPrivateMessages(
+  rows: readonly { kind: string; targetId: number }[],
+): Promise<ReadonlyMap<number, { authorUsername: string; message: string }>> {
+  const ids = rows.filter((row) => row.kind === 'private_message').map((row) => row.targetId)
+  if (ids.length === 0) return new Map()
+
+  const service = messageService()
+  if (service === null) return new Map()
+
+  const found = new Map<number, { authorUsername: string; message: string }>()
+  for (const id of new Set(ids)) {
+    const message = await service.forReport(id).catch(() => null)
+    if (message !== null) {
+      found.set(id, {
+        authorUsername: message.authorUsername,
+        message: message.message,
+      })
+    }
+  }
+  return found
+}

package/app/(board)/moderation/warn/page.tsx

@@ -0,0 +1,158 @@
+import type { Metadata } from 'next'
+import { notFound } from 'next/navigation'
+
+import { WarningService } from '@meith/moderation'
+import { Card, Empty, EmptyDescription, EmptyTitle } from '@meith/ui'
+
+import { IssueWarningForm, RevokeWarningForm } from '@/components/moderation/warning-forms'
+import { BoardNotice } from '@/components/shell/board-notice'
+import { PanelPage, PanelSection } from '@/components/shell/panel-page'
+import { getContainer } from '@/server/container'
+import { getActor } from '@/server/context'
+import { getTranslator, tr } from '@/server/i18n'
+import { issueWarningFormCopy, moderationFormsCopy } from '@/view/moderation-copy'
+import { buildWarningView, warningNotice } from '@/view/warnings'
+
+export async function generateMetadata(): Promise<Metadata> {
+  return { title: await tr('page.warn-member') }
+}
+
+function positiveInt(value: string | undefined): number | null {
+  if (value === undefined || !/^[1-9]\d*$/.test(value)) return null
+  const n = Number(value)
+  return Number.isSafeInteger(n) ? n : null
+}
+
+export default async function WarnPage({
+  searchParams,
+}: {
+  searchParams: Promise<{
+    user?: string
+    post?: string
+    after?: string
+    warned?: string
+    level?: string
+    revoked?: string
+  }>
+}) {
+  const query = await searchParams
+  const userId = positiveInt(query.user)
+  if (userId === null) notFound()
+
+  const actor = await getActor()
+  const { authorizer, warnings, warningBans } = getContainer()
+  if (warnings === null || actor.userId === null || !authorizer.can(actor, 'user.warn')) {
+    notFound()
+  }
+
+  const service = new WarningService({ warnings, bans: warningBans })
+  const member = await warnings.findWarnable(userId)
+  if (member === null) notFound()
+
+  const [standing, types, history] = await Promise.all([
+    service.standingFor(userId),
+    service.listTypes(),
+    service.history(userId, query.after === undefined ? {} : { after: query.after }),
+  ])
+
+  const citedPost = positiveInt(query.post)
+  const postId =
+    citedPost !== null && (await warnings.findPostAuthor(citedPost)) === userId ? citedPost : null
+
+  const translator = await getTranslator()
+
+  const view = buildWarningView({
+    member: { userId: member.id, username: member.username },
+    standing,
+    types,
+    history: history.rows,
+    ...(history.nextCursor === undefined ? {} : { nextCursor: history.nextCursor }),
+    now: new Date(),
+    t: translator,
+  })
+
+  const notice = warningNotice(query, translator)
+
+  return (
+    <PanelPage
+      title={translator.t('board.warnings.title', { username: view.member.username })}
+      back={{ href: view.member.href, label: view.member.username }}
+      lede={translator.t('board.warnings.standing', {
+        points: view.standing.points,
+        threshold: view.standing.levelLabel ?? 'none',
+        thresholdPoints: view.standing.levelPoints ?? 0,
+      })}
+    >
+      {notice !== null && (
+        <BoardNotice
+          kind="info"
+          message={notice}
+          dismissHref={`/moderation/warn?user=${view.member.userId}`}
+        />
+      )}
+
+      <IssueWarningForm
+        copy={issueWarningFormCopy(view.member.username, translator)}
+        userId={view.member.userId}
+        postId={postId}
+        types={view.types}
+      />
+
+      <PanelSection id="history-heading" title={await tr('page.history')}>
+        {view.history.length === 0 ? (
+          <Card>
+            <Empty className="py-8">
+              <EmptyTitle>{await tr('page.never-warned')}</EmptyTitle>
+              <EmptyDescription>{await tr('page.this-member-has-no-warning')}</EmptyDescription>
+            </Empty>
+          </Card>
+        ) : (
+          <ul className="flex flex-col gap-3">
+            {view.history.map((row) => (
+              <li
+                key={row.id}
+                className="rounded-lg border border-border bg-card p-4 text-card-foreground shadow-elevation"
+              >
+                <div className="flex flex-wrap items-baseline justify-between gap-2">
+                  <span className="text-sm font-medium">
+                    {translator.t('board.warnings.item', { title: row.title, count: row.points })}
+                  </span>
+                  <span className="text-xs text-muted-foreground">
+                    {translator.t('board.warnings.by', { username: row.issuedBy })} ·{' '}
+                    <time dateTime={row.issuedAt.iso}>{row.issuedAt.label}</time>
+                  </span>
+                </div>
+                <p className="mt-2 whitespace-pre-wrap break-words text-sm">{row.reason}</p>
+                {row.postId !== null && (
+                  <p className="mt-1 text-xs text-muted-foreground">
+                    {translator.t('board.warnings.aboutPost', { id: row.postId })}
+                  </p>
+                )}
+                {row.lapsed === null ? (
+                  <div className="mt-3">
+                    <RevokeWarningForm
+                      warningId={row.id}
+                      userId={view.member.userId}
+                      copy={moderationFormsCopy(translator)}
+                    />
+                  </div>
+                ) : (
+                  <p className="mt-2 text-xs italic text-muted-foreground">{row.lapsed}</p>
+                )}
+              </li>
+            ))}
+          </ul>
+        )}
+
+        {view.nextHref !== null && (
+          <a
+            href={view.nextHref}
+            className="text-sm font-medium text-foreground underline decoration-border underline-offset-2 hover:decoration-foreground"
+          >
+            {await tr('page.older-warnings')}
+          </a>
+        )}
+      </PanelSection>
+    </PanelPage>
+  )
+}

package/app/(board)/notifications/layout.tsx

@@ -0,0 +1,5 @@
+import { UserCpShell } from '@/components/account/usercp-shell'
+
+export default function NotificationsLayout({ children }: { children: React.ReactNode }) {
+  return <UserCpShell>{children}</UserCpShell>
+}

package/app/(board)/notifications/page.tsx

@@ -0,0 +1,144 @@
+import type { Metadata } from 'next'
+import { notFound } from 'next/navigation'
+
+import { NOTIFICATIONS_PAGE_SIZE } from '@meith/notifications'
+
+import {
+  MarkAllNotificationsReadForm,
+  MarkNotificationReadForm,
+} from '@/components/account/notification-forms'
+import { BoardNotice } from '@/components/shell/board-notice'
+import { PanelPage } from '@/components/shell/panel-page'
+import { PanelPagination } from '@/components/shell/panel-pagination'
+import { getActor } from '@/server/context'
+import { getTranslator, tr } from '@/server/i18n'
+import { notificationService } from '@/server/notifications'
+import { notificationFormsCopy } from '@/view/account-copy'
+import { buildNotificationCentreView, notificationNotice } from '@/view/notifications'
+import { offsetOf, readPage } from '@/view/pager'
+
+export async function generateMetadata(): Promise<Metadata> {
+  return { title: await tr('page.notifications') }
+}
+
+export default async function NotificationsPage({
+  searchParams,
+}: {
+  searchParams: Promise<{ after?: string; read?: string }>
+}) {
+  const query = await searchParams
+  const actor = await getActor()
+  const service = notificationService()
+
+  if (actor.userId === null || service === null) notFound()
+
+  const pageNumber = readPage(query)
+  const translator = await getTranslator()
+  const [page, unread, total] = await Promise.all([
+    service.list(
+      actor.userId,
+      { offset: offsetOf(pageNumber, NOTIFICATIONS_PAGE_SIZE) },
+      translator,
+    ),
+    service.unreadCount(actor.userId),
+    service.count(actor.userId),
+  ])
+
+  const view = buildNotificationCentreView({
+    rows: page.rows,
+    unread,
+    ...(page.nextCursor === undefined ? {} : { nextCursor: page.nextCursor }),
+    now: new Date(),
+    t: translator,
+  })
+
+  const notice = notificationNotice(query, await getTranslator())
+
+  return (
+    <PanelPage
+      title={await tr('page.notifications')}
+      lede={
+        <>
+          {translator.t('board.notifications.unread', { count: view.unread })}{' '}
+          <a
+            href={view.preferencesHref}
+            className="font-medium text-foreground underline decoration-border underline-offset-2 hover:decoration-foreground"
+          >
+            {await tr('page.choose-which-these-receive-by')}
+          </a>
+          .
+        </>
+      }
+      actions={
+        <MarkAllNotificationsReadForm
+          unread={view.unread}
+          copy={notificationFormsCopy(translator)}
+        />
+      }
+    >
+      {notice !== null && <BoardNotice kind="info" message={notice} dismissHref="/notifications" />}
+
+      {view.rows.length === 0 ? (
+        <p className="text-sm text-muted-foreground">{translator.t('board.notifications.empty')}</p>
+      ) : (
+        <ul className="flex flex-col gap-3">
+          {view.rows.map((row) => (
+            <li
+              key={row.id}
+              className={`rounded-lg border p-4 ${
+                row.isRead ? 'border-border bg-card' : 'border-primary bg-card'
+              }`}
+            >
+              <div className="flex flex-wrap items-baseline justify-between gap-2">
+                <span className="text-sm font-medium">
+                  {row.isRead ? null : (
+                    <span className="mr-2 text-xs font-semibold uppercase text-forum-unread">
+                      {translator.t('board.notifications.new')}
+                    </span>
+                  )}
+                  {row.subject}
+                </span>
+                <span className="text-xs text-muted-foreground">
+                  <time dateTime={row.at.iso}>{row.at.label}</time>
+                </span>
+              </div>
+
+              {row.body !== '' && (
+                <p className="mt-2 whitespace-pre-wrap break-words text-sm">{row.body}</p>
+              )}
+
+              {row.repeated !== null && (
+                <p className="mt-1 text-xs text-muted-foreground">{row.repeated}</p>
+              )}
+
+              <div className="mt-3 flex items-center gap-4">
+                {row.href !== null && (
+                  <a
+                    href={row.href}
+                    className="text-sm font-medium text-foreground underline decoration-border underline-offset-2 hover:decoration-foreground"
+                  >
+                    {translator.t('board.notifications.view')}
+                  </a>
+                )}
+                {!row.isRead && (
+                  <MarkNotificationReadForm
+                    notificationId={row.id}
+                    copy={notificationFormsCopy(translator)}
+                  />
+                )}
+              </div>
+            </li>
+          ))}
+        </ul>
+      )}
+
+      <PanelPagination
+        path="/notifications"
+        params={query}
+        page={pageNumber}
+        pageSize={NOTIFICATIONS_PAGE_SIZE}
+        total={total}
+      />
+    </PanelPage>
+  )
+}

package/app/(board)/notifications/preferences/page.tsx

@@ -0,0 +1,65 @@
+import type { Metadata } from 'next'
+import { notFound } from 'next/navigation'
+
+import { NotificationPreferencesForm } from '@/components/account/notification-forms'
+import { PushDeviceForm } from '@/components/account/push-device-form'
+import { BoardNotice } from '@/components/shell/board-notice'
+import { PanelPage } from '@/components/shell/panel-page'
+import { getActor } from '@/server/context'
+import { getTranslator, tr } from '@/server/i18n'
+import { audiencesForActor } from '@/server/notification-audience'
+import { notificationService } from '@/server/notifications'
+import { pushAvailability } from '@/server/push'
+import { notificationFormsCopy } from '@/view/account-copy'
+import { buildPreferencesView, notificationNotice } from '@/view/notifications'
+
+export async function generateMetadata(): Promise<Metadata> {
+  return { title: await tr('page.notification-preferences') }
+}
+
+export default async function NotificationPreferencesPage({
+  searchParams,
+}: {
+  searchParams: Promise<{ saved?: string }>
+}) {
+  const query = await searchParams
+  const actor = await getActor()
+  const service = notificationService()
+
+  if (actor.userId === null || service === null) notFound()
+  const userId = actor.userId
+
+  const audiences = await audiencesForActor()
+  const rows = (
+    await Promise.all(audiences.map((audience) => service.preferences(userId, audience)))
+  ).flat()
+
+  const push = await pushAvailability()
+  const view = buildPreferencesView(rows, await getTranslator())
+  const notice = notificationNotice(query, await getTranslator())
+
+  return (
+    <PanelPage
+      back={{ href: view.backHref, label: 'Notifications' }}
+      title={await tr('page.notification-preferences')}
+      lede={await tr('page.which-board-s-notifications-also')}
+    >
+      {notice !== null && (
+        <BoardNotice kind="info" message={notice} dismissHref="/notifications/preferences" />
+      )}
+
+      {push.enabled && (
+        <PushDeviceForm
+          publicKey={push.publicKey}
+          copy={notificationFormsCopy(await getTranslator())}
+        />
+      )}
+
+      <NotificationPreferencesForm
+        rows={view.rows}
+        push={push.enabled}
+        copy={notificationFormsCopy(await getTranslator())}
+      />
+    </PanelPage>
+  )
+}