@meith/web 0.16.0

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

@@ -0,0 +1,179 @@
+import type { Metadata } from 'next'
+import { notFound } from 'next/navigation'
+
+import { MESSAGES_PAGE_SIZE, parseFolder } from '@meith/messages'
+
+import { MessageActionBar } from '@/components/messages/message-forms'
+import { BoardNotice } from '@/components/shell/board-notice'
+import { PanelPage } from '@/components/shell/panel-page'
+import { PanelPagination } from '@/components/shell/panel-pagination'
+import { ViewTabs } from '@/components/shell/view-tabs'
+import { getContainer } from '@/server/container'
+import { getActor } from '@/server/context'
+import { getTranslator, tr } from '@/server/i18n'
+import { messageService } from '@/server/messages'
+import { getViewerPreferences } from '@/server/viewer-preferences'
+import { messageFormsCopy } from '@/view/content-copy'
+import { buildMessageFolderView, MESSAGE_FORM_ID, messageNotice } from '@/view/messages'
+import { offsetOf, readPage } from '@/view/pager'
+
+export async function generateMetadata(): Promise<Metadata> {
+  return { title: await tr('page.private-messages') }
+}
+
+export default async function MessagesPage({
+  searchParams,
+}: {
+  searchParams: Promise<{
+    folder?: string
+    before?: string
+    sent?: string
+    moved?: string
+    deleted?: string
+    marked?: string
+    emptied?: string
+  }>
+}) {
+  const query = await searchParams
+  const actor = await getActor()
+  const translator = await getTranslator()
+  const { authorizer } = getContainer()
+  const service = messageService()
+
+  if (actor.userId === null || service === null) notFound()
+  if (!authorizer.can(actor, 'pm.use')) notFound()
+
+  const folder = parseFolder(query.folder ?? 'inbox') ?? 'inbox'
+  const pageNumber = readPage(query)
+
+  const _preferences = await getViewerPreferences()
+  const [page, counts] = await Promise.all([
+    service.list({
+      userId: actor.userId,
+      folder,
+      offset: offsetOf(pageNumber, MESSAGES_PAGE_SIZE),
+    }),
+    service.counts(actor.userId),
+  ])
+
+  const view = buildMessageFolderView({
+    folder,
+    rows: page.rows,
+    counts,
+    quota: authorizer.globalLimit(actor, 'privateMessageQuota'),
+    nextBefore: page.nextBefore,
+    now: new Date(),
+    t: await getTranslator(),
+  })
+
+  const notice = messageNotice(query, await getTranslator())
+
+  return (
+    <PanelPage
+      title={await tr('page.private-messages')}
+      actions={
+        <a
+          href={view.composeHref}
+          className="text-sm font-medium text-foreground underline decoration-border underline-offset-2 hover:decoration-foreground"
+        >
+          {await tr('page.write-message')}
+        </a>
+      }
+    >
+      {notice !== null && (
+        <BoardNotice
+          kind={notice.kind}
+          message={notice.message}
+          dismissHref={view.tabs[0]?.href ?? '/messages'}
+        />
+      )}
+
+      <ViewTabs
+        label={translator.t('board.messages.folders')}
+        tabs={view.tabs.map((tab) => ({
+          href: tab.href,
+          label: tab.label,
+          isCurrent: tab.isCurrent,
+          count: tab.count,
+        }))}
+        aside={view.quota.label}
+      />
+
+      {view.quota.isFull ? (
+        <p className="rounded-md border border-destructive/40 bg-destructive/10 px-3 py-2 text-sm text-destructive">
+          {translator.t('board.messages.full')}
+        </p>
+      ) : view.quota.isNearlyFull ? (
+        <p className="rounded-md border border-border bg-muted px-3 py-2 text-sm text-muted-foreground">
+          {await tr('page.message-store-nearly-full-deleting')}
+        </p>
+      ) : null}
+
+      {view.rows.length === 0 ? (
+        <p className="text-sm text-muted-foreground">
+          {folder === 'inbox'
+            ? translator.t('board.messages.emptyInbox')
+            : folder === 'sent'
+              ? translator.t('board.messages.emptySent')
+              : translator.t('board.messages.emptyTrash')}
+        </p>
+      ) : (
+        <>
+          <MessageActionBar
+            formId={MESSAGE_FORM_ID}
+            folder={folder}
+            copy={messageFormsCopy(await getTranslator())}
+          />
+
+          <ul className="flex flex-col divide-y divide-border rounded-lg border border-border">
+            {view.rows.map((row) => (
+              <li key={row.copyId} className="flex items-start gap-3 px-4 py-3">
+                <input
+                  type="checkbox"
+                  form={MESSAGE_FORM_ID}
+                  name="copyId"
+                  value={row.copyId}
+                  aria-label={translator.t('board.messages.select', { subject: row.subject })}
+                  className="mt-1 size-4 rounded border-border"
+                />
+
+                <div className="flex min-w-0 flex-1 flex-col gap-0.5">
+                  <a
+                    href={row.href}
+                    className={
+                      row.isUnread
+                        ? 'truncate text-sm font-semibold text-foreground hover:underline underline-offset-2'
+                        : 'truncate text-sm text-foreground hover:underline underline-offset-2'
+                    }
+                  >
+                    {row.isUnread && (
+                      <span className="mr-2 text-xs font-semibold uppercase text-forum-unread">
+                        {translator.t('board.messages.new')}
+                      </span>
+                    )}
+                    {row.subject}
+                  </a>
+                  <span className="truncate text-xs text-muted-foreground">
+                    {row.peopleLabel}: {row.people}
+                  </span>
+                </div>
+
+                <time dateTime={row.at.iso} className="shrink-0 text-xs text-muted-foreground">
+                  {row.at.label}
+                </time>
+              </li>
+            ))}
+          </ul>
+        </>
+      )}
+
+      <PanelPagination
+        path="/messages"
+        params={query}
+        page={pageNumber}
+        pageSize={MESSAGES_PAGE_SIZE}
+        total={counts[folder === 'sent' ? 'sent' : folder === 'trash' ? 'trash' : 'inbox']}
+      />
+    </PanelPage>
+  )
+}

package/app/(board)/modcp/forums/page.tsx

@@ -0,0 +1,59 @@
+import type { Metadata } from 'next'
+import { notFound } from 'next/navigation'
+
+import { Badge, Card, CardRows, Empty, EmptyDescription, EmptyTitle } from '@meith/ui'
+
+import { PanelPage } from '@/components/shell/panel-page'
+import { getTranslator, tr } from '@/server/i18n'
+import { moderatedForumRights, resolveModCpAccess } from '@/server/modcp'
+
+export async function generateMetadata(): Promise<Metadata> {
+  return { title: await tr('page.my-forums') }
+}
+
+export default async function ModCpForumsPage() {
+  const t = await getTranslator()
+  const access = await resolveModCpAccess()
+  if (access === null) notFound()
+
+  const forums = await moderatedForumRights(access, t)
+
+  return (
+    <PanelPage title={t.t('page.my-forums')} lede={t.t('page.where-appointed-exactly-what-may')}>
+      <Card>
+        {forums.length === 0 ? (
+          <Empty className="py-8">
+            <EmptyTitle>{t.t('page.no-forum-appointments')}</EmptyTitle>
+            <EmptyDescription>{t.t('board.modcp.noAppointmentsHint')}</EmptyDescription>
+          </Empty>
+        ) : (
+          <CardRows>
+            {forums.map((forum) => (
+              <li key={forum.forumId} className="flex flex-col gap-2 px-4 py-3">
+                <a
+                  href={`/${forum.forumId}-${forum.slug}`}
+                  className="font-medium text-foreground underline-offset-2 hover:underline"
+                >
+                  {forum.title}
+                </a>
+                {forum.rights.length === 0 ? (
+                  <p className="text-xs text-muted-foreground">
+                    {t.t('page.no-granular-rights-here-group')}
+                  </p>
+                ) : (
+                  <ul className="flex flex-wrap gap-1.5">
+                    {forum.rights.map((right) => (
+                      <li key={right}>
+                        <Badge tone="outline">{right}</Badge>
+                      </li>
+                    ))}
+                  </ul>
+                )}
+              </li>
+            ))}
+          </CardRows>
+        )}
+      </Card>
+    </PanelPage>
+  )
+}

package/app/(board)/modcp/ip/page.tsx

@@ -0,0 +1,158 @@
+import type { Metadata } from 'next'
+import { notFound } from 'next/navigation'
+
+import { ModeratorPanel } from '@meith/moderation'
+import {
+  Alert,
+  AlertDescription,
+  buttonVariants,
+  Card,
+  CardContent,
+  CardRows,
+  Empty,
+  EmptyDescription,
+  EmptyTitle,
+  Field,
+  Input,
+} from '@meith/ui'
+
+import { PanelPage, PanelSection } from '@/components/shell/panel-page'
+import { getContainer } from '@/server/container'
+import { getTranslator, tr } from '@/server/i18n'
+import { resolveModCpAccess } from '@/server/modcp'
+import { memberHref } from '@/view/member-profile'
+import { formatTime } from '@/view/time'
+
+export async function generateMetadata(): Promise<Metadata> {
+  return { title: await tr('page.address-lookup') }
+}
+
+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
+}
+
+const MATCH_LABEL_KEYS: Readonly<Record<string, string>> = {
+  registration: 'board.ip.registration',
+  last_visit: 'board.ip.lastVisit',
+  both: 'board.ip.both',
+}
+
+export default async function IpLookupPage({
+  searchParams,
+}: {
+  searchParams: Promise<{ user?: string }>
+}) {
+  const access = await resolveModCpAccess()
+  if (access === null || !access.canLookUpIp) notFound()
+
+  const { modcp, warnings } = getContainer()
+  if (modcp === null) notFound()
+
+  const subjectId = positiveInt((await searchParams).user)
+  const subject =
+    subjectId === null || warnings === null ? null : await warnings.findWarnable(subjectId)
+
+  const result =
+    subject === null
+      ? null
+      : await new ModeratorPanel({ modcp }).lookUpIp({
+          subjectUserId: subject.id,
+          actorUserId: access.userId,
+          rights: { access: true, ipLookup: access.canLookUpIp },
+        })
+
+  const now = new Date()
+  const translator = await getTranslator()
+
+  return (
+    <PanelPage title={await tr('page.address-lookup')} lede={translator.t('board.ip.hint')}>
+      <Card>
+        <CardContent>
+          <form method="get" className="flex flex-wrap items-end gap-3">
+            <Field name="user" label={translator.t('board.ip.memberId')} className="w-40">
+              {(control) => (
+                <Input {...control} type="number" min={1} defaultValue={subjectId ?? ''} />
+              )}
+            </Field>
+            <button type="submit" className={buttonVariants()}>
+              {await tr('page.look-up')}
+            </button>
+          </form>
+        </CardContent>
+      </Card>
+
+      {subjectId !== null && subject === null && (
+        <Alert tone="warning">
+          <AlertDescription>{await tr('page.no-such-member')}</AlertDescription>
+        </Alert>
+      )}
+
+      {subject !== null && result !== null && (
+        <PanelSection
+          id="matches-heading"
+          title={translator.t('board.ip.matches', { username: subject.username })}
+          description={
+            <>
+              <a
+                href={memberHref(subject.id)}
+                className="underline decoration-border underline-offset-2 hover:decoration-foreground"
+              >
+                {subject.username}
+              </a>
+              . {translator.t('board.ip.ranges')} {translator.t('board.ip.registration')}{' '}
+              <code className="font-mono">
+                {result.prefixes.registration ?? translator.t('board.ip.none')}
+              </code>
+              ,{translator.t('board.ip.lastVisit')}{' '}
+              <code className="font-mono">
+                {result.prefixes.lastVisit ?? translator.t('board.ip.none')}
+              </code>
+              .
+            </>
+          }
+        >
+          <Card>
+            {result.matches.length === 0 ? (
+              <Empty className="py-8">
+                <EmptyTitle>{await tr('page.no-shared-range')}</EmptyTitle>
+                <EmptyDescription>
+                  {await tr('page.no-other-account-shares-recorded')}
+                </EmptyDescription>
+              </Empty>
+            ) : (
+              <CardRows>
+                {result.matches.map((match) => (
+                  <li
+                    key={match.userId}
+                    className="flex flex-wrap items-baseline justify-between gap-x-4 gap-y-1 px-4 py-3 text-sm"
+                  >
+                    <a
+                      href={memberHref(match.userId)}
+                      className="font-medium text-foreground underline-offset-2 hover:underline"
+                    >
+                      {match.username}
+                    </a>
+                    <span className="text-xs text-muted-foreground">
+                      {translator.t(MATCH_LABEL_KEYS[match.matchedOn] ?? 'board.ip.unknown')}
+                      {match.lastActiveAt !== null && (
+                        <>
+                          {' '}
+                          · {translator.t('board.ip.lastSeen')}{' '}
+                          <time dateTime={formatTime(match.lastActiveAt, now, translator).iso}>
+                            {formatTime(match.lastActiveAt, now, translator).label}
+                          </time>
+                        </>
+                      )}
+                    </span>
+                  </li>
+                ))}
+              </CardRows>
+            )}
+          </Card>
+        </PanelSection>
+      )}
+    </PanelPage>
+  )
+}

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

@@ -0,0 +1,5 @@
+import { ModCpShell } from '@/components/moderation/modcp-shell'
+
+export default function ModCpLayout({ children }: { children: React.ReactNode }) {
+  return <ModCpShell>{children}</ModCpShell>
+}

package/app/(board)/modcp/log/page.tsx

@@ -0,0 +1,98 @@
+import type { Metadata } from 'next'
+import { notFound } from 'next/navigation'
+
+import { MOD_LOG_LABEL_KEYS, ModeratorPanel } from '@meith/moderation'
+import { Card, CardFooter, CardRows, Empty, EmptyDescription, EmptyTitle } from '@meith/ui'
+
+import { PanelPage } from '@/components/shell/panel-page'
+import { PanelPagination } from '@/components/shell/panel-pagination'
+import { getContainer } from '@/server/container'
+import { getTranslator, tr } from '@/server/i18n'
+import { resolveModCpAccess } from '@/server/modcp'
+import { formatTime } from '@/view/time'
+
+export async function generateMetadata(): Promise<Metadata> {
+  return { title: await tr('page.moderator-log') }
+}
+
+export default async function ModLogPage({
+  searchParams,
+}: {
+  searchParams: Promise<{ after?: string }>
+}) {
+  const query = await searchParams
+  const access = await resolveModCpAccess()
+  if (access === null) notFound()
+
+  const { modcp } = getContainer()
+  if (modcp === null) notFound()
+
+  const page = await new ModeratorPanel({ modcp }).log({
+    forumIds: access.forumIds,
+    actorUserId: access.userId,
+    ...(query.after === undefined ? {} : { after: query.after }),
+  })
+  const now = new Date()
+  const translator = await getTranslator()
+
+  return (
+    <PanelPage
+      title={await tr('page.moderator-log')}
+      lede={await tr('page.scoped-forums-moderate-plus-own')}
+    >
+      <Card>
+        {page.entries.length === 0 ? (
+          <Empty className="py-8">
+            <EmptyTitle>{await tr('page.nothing-has-been-logged-yet')}</EmptyTitle>
+            <EmptyDescription>
+              {await tr('page.approvals-locks-moves-deletions-forums')}
+            </EmptyDescription>
+          </Empty>
+        ) : (
+          <CardRows>
+            {page.entries.map((entry) => {
+              const at = formatTime(entry.at, now, translator)
+              return (
+                <li key={entry.id} className="px-4 py-3">
+                  <div className="flex flex-wrap items-baseline justify-between gap-2 text-sm">
+                    <span className="font-medium">
+                      {translator.t(MOD_LOG_LABEL_KEYS[entry.action] ?? entry.action)}
+                    </span>
+                    <span className="text-xs text-muted-foreground">
+                      {entry.actorUsername ?? 'a former moderator'}
+                      {entry.forumTitle !== null && <> in {entry.forumTitle}</>} ·{' '}
+                      <time dateTime={at.iso}>{at.label}</time>
+                    </span>
+                  </div>
+                  {entry.detail.length > 0 && (
+                    <dl className="mt-1 flex flex-wrap gap-x-4 gap-y-1 text-xs text-muted-foreground">
+                      {entry.detail.map((item) => (
+                        <div key={item.label} className="flex gap-1">
+                          <dt>{item.label}:</dt>
+                          <dd className="break-all">{item.value}</dd>
+                        </div>
+                      ))}
+                    </dl>
+                  )}
+                </li>
+              )
+            })}
+          </CardRows>
+        )}
+
+        <CardFooter>
+          <PanelPagination
+            path="/modcp/log"
+            params={query}
+            cursorParams={['after']}
+            nextCursor={
+              page.nextCursor === undefined || page.nextCursor === null
+                ? null
+                : { after: String(page.nextCursor) }
+            }
+          />
+        </CardFooter>
+      </Card>
+    </PanelPage>
+  )
+}

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

@@ -0,0 +1,112 @@
+import type { Metadata } from 'next'
+import { notFound } from 'next/navigation'
+
+import { ModeratorPanel } from '@meith/moderation'
+import { Card, CardRows, Empty, EmptyDescription, EmptyTitle } from '@meith/ui'
+
+import {
+  PanelSectionGrid,
+  PanelWaitingList,
+  type WaitingItem,
+} from '@/components/shell/panel-overview'
+import { PanelPage, PanelSection } from '@/components/shell/panel-page'
+import { getContainer } from '@/server/container'
+import { getTranslator, tr } from '@/server/i18n'
+import { modCpCounts, moderatedForumRights, resolveModCpAccess } from '@/server/modcp'
+import { modCpSections } from '@/view/modcp-nav'
+import { panelSectionCopy } from '@/view/panel-nav'
+
+export async function generateMetadata(): Promise<Metadata> {
+  return { title: await tr('page.moderator-control-panel') }
+}
+
+export default async function ModCpPage() {
+  const access = await resolveModCpAccess()
+  if (access === null) notFound()
+
+  const { modcp } = getContainer()
+  if (modcp === null) notFound()
+
+  const forums = await moderatedForumRights(access)
+  const [dashboard, counts] = await Promise.all([
+    new ModeratorPanel({ modcp }).dashboard({ forums }),
+    modCpCounts(),
+  ])
+  const translator = await getTranslator()
+
+  const waiting: readonly WaitingItem[] = [
+    {
+      count: counts.pending,
+      one: translator.t('board.modcp.pending', { count: 1 }),
+      many: translator.t('board.modcp.pending', { count: 2 }),
+      href: '/moderation',
+      action: translator.t('board.modcp.review'),
+    },
+    {
+      count: counts.openReports,
+      one: translator.t('board.modcp.report', { count: 1 }),
+      many: translator.t('board.modcp.report', { count: 2 }),
+      href: '/moderation/reports',
+      action: translator.t('board.modcp.open'),
+    },
+  ]
+
+  return (
+    <PanelPage
+      title={await tr('page.moderator-control-panel')}
+      lede={await tr('page.forums-responsible-for-what-they')}
+      gap="loose"
+    >
+      <PanelSection id="waiting-heading" title={await tr('page.waiting-for')}>
+        <PanelWaitingList
+          items={waiting}
+          emptyTitle={translator.t('board.modcp.nothingWaiting')}
+          emptyDescription={translator.t('board.modcp.nothingWaitingHint')}
+        />
+      </PanelSection>
+
+      <PanelSection
+        id="forums-heading"
+        title={await tr('page.forums-2')}
+        description={translator.t('board.modcp.forumsHint')}
+      >
+        <Card>
+          {dashboard.length === 0 ? (
+            <Empty className="py-8">
+              <EmptyTitle>{await tr('page.no-forum-appointments')}</EmptyTitle>
+              <EmptyDescription>{translator.t('board.modcp.noAppointmentsHint')}</EmptyDescription>
+            </Empty>
+          ) : (
+            <CardRows>
+              {dashboard.map((forum) => (
+                <li
+                  key={forum.forumId}
+                  className="flex flex-wrap items-baseline justify-between gap-x-4 gap-y-1 px-4 py-3"
+                >
+                  <a
+                    href={`/${forum.forumId}-${forum.slug}`}
+                    className="font-medium text-foreground underline-offset-2 hover:underline"
+                  >
+                    {forum.title}
+                  </a>
+                  <span className="flex gap-3 text-xs text-muted-foreground">
+                    <a href="/moderation" className="hover:text-foreground">
+                      {translator.t('board.modcp.waiting', { count: forum.pending })}
+                    </a>
+                    <a href="/moderation/reports" className="hover:text-foreground">
+                      {translator.t('board.modcp.openReports', { count: forum.openReports })}
+                    </a>
+                  </span>
+                </li>
+              ))}
+            </CardRows>
+          )}
+        </Card>
+      </PanelSection>
+
+      <PanelSection id="sections-heading" title={await tr('page.sections')}>
+        <PanelSectionGrid sections={panelSectionCopy(modCpSections(access), translator)} />
+      </PanelSection>
+    </PanelPage>
+  )
+}

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

@@ -0,0 +1,5 @@
+import { ModCpShell } from '@/components/moderation/modcp-shell'
+
+export default function ModerationLayout({ children }: { children: React.ReactNode }) {
+  return <ModCpShell>{children}</ModCpShell>
+}