@meith/web 0.16.0

package/src/components/moderation/inline-moderation-form.tsx

@@ -0,0 +1,158 @@
+'use client'
+
+import { useActionState } from 'react'
+
+import { BOARD_MEASURE } from '@/components/shell/measure'
+import { EMPTY_STATE } from '@/server/auth-form-state'
+import { inlineModerateAction } from '@/server/inline-moderation-actions'
+import { splitSelectedAction } from '@/server/surgery-actions'
+
+import { FormError } from '../auth/form-controls'
+import { type Copy, fromCopy } from '../shell/copy'
+
+const BUTTON =
+  'inline-flex h-8 items-center rounded-md border border-border px-3 text-xs font-medium hover:opacity-90 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring'
+
+export interface InlineMoveOption {
+  readonly id: number
+  readonly title: string
+}
+
+export interface InlineToolRights {
+  readonly approve: boolean
+  readonly lock: boolean
+  readonly stick: boolean
+  readonly move: boolean
+  readonly delete: boolean
+  readonly restore: boolean
+}
+
+export function InlineModerationForm({
+  formId,
+  scope,
+  rights,
+  moveTargets,
+  returnTo,
+  splitFrom,
+  copy,
+}: {
+  formId: string
+  scope: 'threads' | 'posts'
+  rights: InlineToolRights
+  moveTargets: readonly InlineMoveOption[]
+  returnTo: string
+  splitFrom?: number | null
+  copy: Copy
+}) {
+  const [state, action] = useActionState(inlineModerateAction, EMPTY_STATE)
+  const [splitState, splitAction] = useActionState(splitSelectedAction, EMPTY_STATE)
+
+  return (
+    <div className={`${BOARD_MEASURE} mb-6`}>
+      <form
+        id={formId}
+        action={action}
+        aria-label={
+          scope === 'threads'
+            ? fromCopy(copy, 'moderationForm.inline.moderateThreads')
+            : fromCopy(copy, 'moderationForm.inline.moderatePosts')
+        }
+        className="flex flex-wrap items-center gap-3 rounded-lg border border-border bg-secondary px-4 py-3"
+      >
+        <FormError message={state.error} />
+        <FormError message={splitState.error} />
+        <input type="hidden" name="returnTo" value={returnTo} />
+
+        <span className="text-xs font-medium text-muted-foreground">
+          {scope === 'threads'
+            ? fromCopy(copy, 'moderationForm.inline.withThreads')
+            : fromCopy(copy, 'moderationForm.inline.withPosts')}
+        </span>
+
+        {rights.approve && (
+          <button type="submit" name="tool" value="approve" className={BUTTON}>
+            {fromCopy(copy, 'moderationForm.inline.approve')}
+          </button>
+        )}
+        {rights.lock && scope === 'threads' && (
+          <>
+            <button type="submit" name="tool" value="lock" className={BUTTON}>
+              {fromCopy(copy, 'moderationForm.tool.lock')}
+            </button>
+            <button type="submit" name="tool" value="unlock" className={BUTTON}>
+              {fromCopy(copy, 'moderationForm.tool.unlock')}
+            </button>
+          </>
+        )}
+        {rights.stick && scope === 'threads' && (
+          <>
+            <button type="submit" name="tool" value="stick" className={BUTTON}>
+              {fromCopy(copy, 'moderationForm.tool.pin')}
+            </button>
+            <button type="submit" name="tool" value="unstick" className={BUTTON}>
+              {fromCopy(copy, 'moderationForm.tool.unpin')}
+            </button>
+          </>
+        )}
+        {rights.restore && (
+          <button type="submit" name="tool" value="restore" className={BUTTON}>
+            {fromCopy(copy, 'moderationForm.inline.restore')}
+          </button>
+        )}
+
+        {rights.move && scope === 'threads' && moveTargets.length > 0 && (
+          <span className="flex items-center gap-2">
+            <label className="flex items-center gap-2 text-xs">
+              <span className="sr-only">{fromCopy(copy, 'moderationForm.moveTo')}</span>
+              <select
+                name="toForumId"
+                className="h-8 rounded-md border border-border bg-background px-2 text-xs focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
+              >
+                {moveTargets.map((forum) => (
+                  <option key={forum.id} value={forum.id}>
+                    {forum.title}
+                  </option>
+                ))}
+              </select>
+            </label>
+            <button type="submit" name="tool" value="move" className={BUTTON}>
+              {fromCopy(copy, 'moderationForm.tool.move')}
+            </button>
+          </span>
+        )}
+
+        {splitFrom != null && scope === 'posts' && (
+          <span className="flex items-center gap-2">
+            <input type="hidden" name="threadId" value={splitFrom} />
+            <label className="flex items-center gap-2 text-xs">
+              <span className="sr-only">
+                {fromCopy(copy, 'moderationForm.inline.splitTitleSr')}
+              </span>
+              <input
+                type="text"
+                name="title"
+                maxLength={150}
+                placeholder={fromCopy(copy, 'moderationForm.newThreadTitle')}
+                className="h-8 w-48 rounded-md border border-border bg-background px-2 text-xs focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
+              />
+            </label>
+            <button type="submit" formAction={splitAction} className={BUTTON}>
+              {fromCopy(copy, 'moderationForm.inline.splitOut')}
+            </button>
+          </span>
+        )}
+
+        {rights.delete && (
+          <button
+            type="submit"
+            name="tool"
+            value="delete"
+            className={`${BUTTON} border-destructive/40 text-destructive`}
+          >
+            {fromCopy(copy, 'moderationForm.inline.delete')}
+          </button>
+        )}
+      </form>
+    </div>
+  )
+}

package/src/components/moderation/modcp-nav.tsx

@@ -0,0 +1,15 @@
+import { PanelNavRegion } from '@/components/shell/panel-nav'
+import { MODCP_OVERVIEW } from '@/view/modcp-nav'
+import type { PanelCounts, PanelNav as PanelNavTree } from '@/view/panel-nav'
+
+export function ModCpNav({
+  nav,
+  counts,
+}: {
+  readonly nav: PanelNavTree
+  readonly counts: PanelCounts
+}) {
+  return (
+    <PanelNavRegion panel="modcp" nav={nav} overviewHref={MODCP_OVERVIEW.href} counts={counts} />
+  )
+}

package/src/components/moderation/modcp-shell.tsx

@@ -0,0 +1,41 @@
+import { notFound } from 'next/navigation'
+
+import { ModCpNav } from '@/components/moderation/modcp-nav'
+import { PanelShell } from '@/components/shell/panel-shell'
+import { getActor } from '@/server/context'
+import { getTranslator } from '@/server/i18n'
+import { modCpCounts, resolveModCpAccess } from '@/server/modcp'
+import { modCpNav } from '@/view/modcp-nav'
+import { buildPanelLinks } from '@/view/shell'
+
+export async function ModCpShell({ children }: { children: React.ReactNode }) {
+  const access = await resolveModCpAccess()
+  if (access === null) notFound()
+
+  const counts = await modCpCounts()
+
+  const actor = await getActor()
+  const links = buildPanelLinks({
+    t: await getTranslator(),
+    current: 'modcp',
+    canAccessAdminCp: actor.global.canAccessAdminCp === true,
+  })
+
+  return (
+    <PanelShell
+      panel="modcp"
+      nav={
+        <ModCpNav
+          nav={modCpNav(access)}
+          counts={{
+            '/moderation': counts.pending,
+            '/moderation/reports': counts.openReports,
+          }}
+        />
+      }
+      links={links}
+    >
+      {children}
+    </PanelShell>
+  )
+}

package/src/components/moderation/queue-form.tsx

@@ -0,0 +1,96 @@
+'use client'
+
+import { useActionState } from 'react'
+
+import { EMPTY_STATE } from '@/server/auth-form-state'
+import { moderateQueueAction } from '@/server/moderation-actions'
+
+import { FormError } from '../auth/form-controls'
+import { type Copy, formatFromCopy, fromCopy } from '../shell/copy'
+
+export interface QueueFormRow {
+  readonly value: string
+  readonly kindLabel: string
+  readonly forumTitle: string
+  readonly threadTitle: string
+  readonly href: string
+  readonly authorUsername: string
+  readonly authorHref: string | null
+  readonly excerpt: string
+  readonly postedAt: { readonly iso: string; readonly label: string }
+}
+
+export function QueueForm({ rows, copy }: { rows: readonly QueueFormRow[]; copy: Copy }) {
+  const [state, action] = useActionState(moderateQueueAction, EMPTY_STATE)
+
+  return (
+    <form action={action} className="flex flex-col gap-4">
+      <FormError message={state.error} />
+
+      <ul className="flex flex-col gap-3">
+        {rows.map((row) => (
+          <li key={row.value} className="rounded-lg border border-border bg-card p-4">
+            <label className="flex items-start gap-3">
+              <input
+                type="checkbox"
+                name="item"
+                value={row.value}
+                className="mt-1 size-4 shrink-0"
+              />
+              <span className="flex min-w-0 flex-col gap-1">
+                <span className="flex flex-wrap items-baseline gap-2 text-sm">
+                  <span className="font-medium">{row.kindLabel}</span>
+                  <span className="text-muted-foreground">
+                    {formatFromCopy(copy, 'moderationForm.queue.inForum', {
+                      forum: row.forumTitle,
+                    })}
+                  </span>
+                  <a
+                    href={row.href}
+                    className="font-medium text-foreground underline decoration-border underline-offset-2 hover:decoration-foreground"
+                  >
+                    {row.threadTitle}
+                  </a>
+                </span>
+                <span className="text-xs text-muted-foreground">
+                  {copy['moderationForm.queue.byLead']}
+                  {row.authorHref === null ? (
+                    row.authorUsername
+                  ) : (
+                    <a href={row.authorHref} className="hover:text-foreground">
+                      {row.authorUsername}
+                    </a>
+                  )}
+                  {copy['moderationForm.queue.byTail']} ·{' '}
+                  <time dateTime={row.postedAt.iso}>{row.postedAt.label}</time>
+                </span>
+                <span className="whitespace-pre-wrap break-words text-sm leading-relaxed">
+                  {row.excerpt}
+                </span>
+              </span>
+            </label>
+          </li>
+        ))}
+      </ul>
+
+      <div className="flex flex-wrap gap-3">
+        <button
+          type="submit"
+          name="decision"
+          value="approve"
+          className="inline-flex h-10 items-center justify-center rounded-md bg-primary px-4 text-sm font-medium text-primary-foreground transition-opacity hover:opacity-90 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
+        >
+          {fromCopy(copy, 'moderationForm.queue.approve')}
+        </button>
+        <button
+          type="submit"
+          name="decision"
+          value="reject"
+          className="inline-flex h-10 items-center justify-center rounded-md border border-destructive/40 px-4 text-sm font-medium text-destructive transition-opacity hover:opacity-90 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
+        >
+          {fromCopy(copy, 'moderationForm.queue.reject')}
+        </button>
+      </div>
+    </form>
+  )
+}

package/src/components/moderation/report-forms.tsx

@@ -0,0 +1,120 @@
+'use client'
+
+import { useActionState } from 'react'
+
+import { Card, CardContent, Field, Textarea } from '@meith/ui'
+
+import { EMPTY_STATE } from '@/server/auth-form-state'
+import { assignReportAction, closeReportAction, fileReportAction } from '@/server/report-actions'
+
+import { FormError, SubmitButton } from '../auth/form-controls'
+import { type Copy, fromCopy } from '../shell/copy'
+
+export function ReportForm({
+  kind,
+  targetId,
+  copy,
+}: {
+  kind: string
+  targetId: number
+  copy: Copy
+}) {
+  const [state, action] = useActionState(fileReportAction, EMPTY_STATE)
+
+  return (
+    <Card>
+      <CardContent>
+        <form action={action} className="flex flex-col gap-4" noValidate>
+          <FormError message={state.error} />
+          <input type="hidden" name="kind" value={kind} />
+          <input type="hidden" name="targetId" value={targetId} />
+
+          <Field
+            name="reason"
+            label={fromCopy(copy, 'moderationForm.report.label')}
+            description={fromCopy(copy, 'moderationForm.report.hint')}
+          >
+            {(control) => (
+              <Textarea {...control} required defaultValue={state.values?.reason ?? ''} />
+            )}
+          </Field>
+
+          <div>
+            <SubmitButton className="w-full sm:w-auto sm:px-8">
+              {fromCopy(copy, 'moderationForm.report.submit')}
+            </SubmitButton>
+          </div>
+        </form>
+      </CardContent>
+    </Card>
+  )
+}
+
+export function AssignReportForm({
+  reportId,
+  mine,
+  copy,
+}: {
+  reportId: number
+  mine: boolean
+  copy: Copy
+}) {
+  const [state, action] = useActionState(assignReportAction, EMPTY_STATE)
+
+  return (
+    <form action={action} className="inline">
+      <FormError message={state.error} />
+      <input type="hidden" name="reportId" value={reportId} />
+      <input type="hidden" name="take" value={mine ? '0' : '1'} />
+      <button
+        type="submit"
+        className="text-xs font-medium text-foreground underline decoration-border underline-offset-2 hover:decoration-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
+      >
+        {mine
+          ? fromCopy(copy, 'moderationForm.report.putBack')
+          : fromCopy(copy, 'moderationForm.report.take')}
+      </button>
+    </form>
+  )
+}
+
+export function CloseReportForm({ reportId, copy }: { reportId: number; copy: Copy }) {
+  const [state, action] = useActionState(closeReportAction, EMPTY_STATE)
+
+  return (
+    <form action={action} className="mt-3 flex flex-col gap-2 border-t border-border pt-3">
+      <FormError message={state.error} />
+      <input type="hidden" name="reportId" value={reportId} />
+      <label className="flex flex-col gap-1 text-xs">
+        <span className="font-medium text-muted-foreground">
+          {fromCopy(copy, 'moderationForm.report.note')}
+        </span>
+        <input
+          type="text"
+          name="note"
+          maxLength={1000}
+          defaultValue={state.values?.note ?? ''}
+          className="rounded-md border border-border bg-background px-2 py-1 text-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
+        />
+      </label>
+      <div className="flex flex-wrap gap-2">
+        <button
+          type="submit"
+          name="status"
+          value="resolved"
+          className="inline-flex h-8 items-center rounded-md bg-primary px-3 text-xs font-medium text-primary-foreground hover:opacity-90 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
+        >
+          {fromCopy(copy, 'moderationForm.report.resolve')}
+        </button>
+        <button
+          type="submit"
+          name="status"
+          value="rejected"
+          className="inline-flex h-8 items-center rounded-md border border-border px-3 text-xs font-medium hover:opacity-90 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
+        >
+          {fromCopy(copy, 'moderationForm.report.dismiss')}
+        </button>
+      </div>
+    </form>
+  )
+}

package/src/components/moderation/signature-lock-form.tsx

@@ -0,0 +1,83 @@
+'use client'
+
+import { useActionState } from 'react'
+
+import { EMPTY_STATE } from '@/server/auth-form-state'
+import { setAvatarLockAction, setSignatureLockAction } from '@/server/moderation-actions'
+
+import { FormError } from '../auth/form-controls'
+import { type Copy, fromCopy } from '../shell/copy'
+
+const REASON_INPUT = 'h-8 rounded-md border border-border bg-background px-2 text-xs'
+const LOCK_BUTTON =
+  'text-xs text-muted-foreground hover:text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring'
+
+export function SignatureLockForm({
+  userId,
+  locked,
+  copy,
+}: {
+  userId: number
+  locked: boolean
+  copy: Copy
+}) {
+  const [state, action] = useActionState(setSignatureLockAction, EMPTY_STATE)
+
+  return (
+    <form action={action} className="flex flex-wrap items-center gap-2">
+      <FormError message={state.error} />
+      <input type="hidden" name="userId" value={userId} />
+      <input type="hidden" name="locked" value={locked ? '0' : '1'} />
+
+      {locked ? null : (
+        <input
+          name="reason"
+          placeholder={fromCopy(copy, 'moderationForm.lock.why')}
+          className={REASON_INPUT}
+          required
+        />
+      )}
+
+      <button type="submit" className={LOCK_BUTTON}>
+        {locked
+          ? fromCopy(copy, 'moderationForm.lock.unlockSignature')
+          : fromCopy(copy, 'moderationForm.lock.signature')}
+      </button>
+    </form>
+  )
+}
+
+export function AvatarLockForm({
+  userId,
+  locked,
+  copy,
+}: {
+  userId: number
+  locked: boolean
+  copy: Copy
+}) {
+  const [state, action] = useActionState(setAvatarLockAction, EMPTY_STATE)
+
+  return (
+    <form action={action} className="flex flex-wrap items-center gap-2">
+      <FormError message={state.error} />
+      <input type="hidden" name="userId" value={userId} />
+      <input type="hidden" name="locked" value={locked ? '0' : '1'} />
+
+      {locked ? null : (
+        <input
+          name="reason"
+          placeholder={fromCopy(copy, 'moderationForm.lock.why')}
+          className={REASON_INPUT}
+          required
+        />
+      )}
+
+      <button type="submit" className={LOCK_BUTTON}>
+        {locked
+          ? fromCopy(copy, 'moderationForm.lock.unlockAvatar')
+          : fromCopy(copy, 'moderationForm.lock.avatar')}
+      </button>
+    </form>
+  )
+}

package/src/components/moderation/thread-surgery-form.tsx

@@ -0,0 +1,96 @@
+'use client'
+
+import { useActionState } from 'react'
+
+import { EMPTY_STATE } from '@/server/auth-form-state'
+import { mergeThreadAction, splitThreadAction } from '@/server/surgery-actions'
+
+import { FormError } from '../auth/form-controls'
+import { type Copy, formatFromCopy, fromCopy } from '../shell/copy'
+
+const BUTTON =
+  'inline-flex h-8 items-center rounded-md border border-border px-3 text-xs font-medium hover:opacity-90 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring'
+const FIELD =
+  'h-8 rounded-md border border-border bg-background px-2 text-xs focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring'
+
+export interface SplitPoint {
+  readonly id: number
+  readonly number: number
+  readonly author: string
+}
+
+export function ThreadSurgeryForm({
+  threadId,
+  rights,
+  splitPoints,
+  copy,
+}: {
+  threadId: number
+  rights: { merge: boolean; split: boolean }
+  splitPoints: readonly SplitPoint[]
+  copy: Copy
+}) {
+  const [splitState, splitAction] = useActionState(splitThreadAction, EMPTY_STATE)
+  const [mergeState, mergeAction] = useActionState(mergeThreadAction, EMPTY_STATE)
+
+  return (
+    <>
+      {rights.split && splitPoints.length > 0 && (
+        <form action={splitAction} className="flex flex-wrap items-center gap-2">
+          <FormError message={splitState.error} />
+          <input type="hidden" name="threadId" value={threadId} />
+          <label className="flex items-center gap-2 text-xs">
+            <span className="sr-only">{fromCopy(copy, 'moderationForm.surgery.fromSr')}</span>
+            <select name="fromPostId" className={FIELD}>
+              {splitPoints.map((point) => (
+                <option key={point.id} value={point.id}>
+                  {formatFromCopy(copy, 'moderationForm.surgery.splitPoint', {
+                    number: point.number,
+                    author: point.author,
+                  })}
+                </option>
+              ))}
+            </select>
+          </label>
+          <label className="flex items-center gap-2 text-xs">
+            <span className="sr-only">{fromCopy(copy, 'moderationForm.surgery.titleSr')}</span>
+            <input
+              type="text"
+              name="title"
+              required
+              minLength={3}
+              maxLength={150}
+              placeholder={fromCopy(copy, 'moderationForm.newThreadTitle')}
+              className={`${FIELD} w-48`}
+            />
+          </label>
+          <button type="submit" className={BUTTON}>
+            {fromCopy(copy, 'moderationForm.surgery.split')}
+          </button>
+        </form>
+      )}
+
+      {rights.merge && (
+        <form action={mergeAction} className="flex flex-wrap items-center gap-2">
+          <FormError message={mergeState.error} />
+          <input type="hidden" name="threadId" value={threadId} />
+          <label className="flex items-center gap-2 text-xs">
+            <span className="sr-only">{fromCopy(copy, 'moderationForm.surgery.mergeSr')}</span>
+            <input
+              type="number"
+              name="targetThreadId"
+              required
+              min={1}
+              step={1}
+              placeholder={fromCopy(copy, 'moderationForm.surgery.mergePlaceholder')}
+              className={`${FIELD} w-40`}
+            />
+          </label>
+          <button type="submit" className={`${BUTTON} border-destructive/40 text-destructive`}>
+            {fromCopy(copy, 'moderationForm.surgery.merge')}
+          </button>
+        </form>
+      )}
+    </>
+  )
+}