@meith/web 0.16.0

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

@@ -0,0 +1,137 @@
+'use client'
+
+import { useActionState } from 'react'
+
+import { EMPTY_STATE } from '@/server/auth-form-state'
+import { threadToolAction } from '@/server/thread-tool-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'
+
+function ToolButton({
+  threadId,
+  tool,
+  label,
+  destructive,
+}: {
+  threadId: number
+  tool: string
+  label: string
+  destructive?: boolean
+}) {
+  const [state, action] = useActionState(threadToolAction, EMPTY_STATE)
+
+  return (
+    <form action={action} className="inline">
+      <FormError message={state.error} />
+      <input type="hidden" name="threadId" value={threadId} />
+      <input type="hidden" name="tool" value={tool} />
+      <button
+        type="submit"
+        className={
+          destructive === true ? `${BUTTON} border-destructive/40 text-destructive` : BUTTON
+        }
+      >
+        {label}
+      </button>
+    </form>
+  )
+}
+
+export interface MoveOption {
+  readonly id: number
+  readonly title: string
+}
+
+export function ThreadToolsForm({
+  threadId,
+  isLocked,
+  isSticky,
+  rights,
+  moveTargets,
+  heading,
+  copy,
+  children,
+}: {
+  threadId: number
+  isLocked: boolean
+  isSticky: boolean
+  rights: { lock: boolean; stick: boolean; move: boolean; delete: boolean }
+  moveTargets: readonly MoveOption[]
+  heading: string
+  copy: Copy
+  children?: React.ReactNode
+}) {
+  const [moveState, moveAction] = useActionState(threadToolAction, EMPTY_STATE)
+
+  return (
+    <section
+      aria-label={heading}
+      className="flex flex-wrap items-center gap-3 rounded-lg border border-border bg-secondary px-4 py-3"
+    >
+      <span className="text-xs font-medium text-muted-foreground">{heading}</span>
+
+      {rights.lock && (
+        <ToolButton
+          threadId={threadId}
+          tool={isLocked ? 'unlock' : 'lock'}
+          label={
+            isLocked
+              ? fromCopy(copy, 'moderationForm.tool.unlock')
+              : fromCopy(copy, 'moderationForm.tool.lock')
+          }
+        />
+      )}
+      {rights.stick && (
+        <ToolButton
+          threadId={threadId}
+          tool={isSticky ? 'unstick' : 'stick'}
+          label={
+            isSticky
+              ? fromCopy(copy, 'moderationForm.tool.unpin')
+              : fromCopy(copy, 'moderationForm.tool.pin')
+          }
+        />
+      )}
+      {rights.delete && (
+        <ToolButton
+          threadId={threadId}
+          tool="delete"
+          label={fromCopy(copy, 'moderationForm.tool.deleteThread')}
+          destructive
+        />
+      )}
+
+      {rights.move && moveTargets.length > 0 && (
+        <form action={moveAction} className="flex items-center gap-2">
+          <FormError message={moveState.error} />
+          <input type="hidden" name="threadId" value={threadId} />
+          <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>
+          <button type="submit" name="tool" value="copy" className={BUTTON}>
+            {fromCopy(copy, 'moderationForm.tool.copy')}
+          </button>
+        </form>
+      )}
+
+      {children}
+    </section>
+  )
+}

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

@@ -0,0 +1,125 @@
+'use client'
+
+import { useActionState } from 'react'
+
+import { EMPTY_STATE } from '@/server/auth-form-state'
+import { issueWarningAction, revokeWarningAction } from '@/server/warning-actions'
+
+import { FormError } from '../auth/form-controls'
+import { type Copy, fromCopy } from '../shell/copy'
+
+const FIELD =
+  'w-full rounded-md border border-border bg-background px-3 py-2 text-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring'
+
+const BUTTON =
+  'inline-flex h-9 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'
+
+export interface WarningTypeOption {
+  readonly id: number
+  readonly label: string
+}
+
+export function IssueWarningForm({
+  userId,
+  postId,
+  types,
+  copy,
+}: {
+  userId: number
+  postId: number | null
+  types: readonly WarningTypeOption[]
+  copy: Copy
+}) {
+  const [state, action] = useActionState(issueWarningAction, EMPTY_STATE)
+
+  return (
+    <form
+      action={action}
+      className="flex flex-col gap-4 rounded-lg border border-border bg-card p-5"
+    >
+      <h2 className="text-lg font-semibold tracking-tight">
+        {fromCopy(copy, 'moderationForm.warn.title')}
+      </h2>
+      <FormError message={state.error} />
+
+      <input type="hidden" name="userId" value={userId} />
+      {postId !== null && <input type="hidden" name="postId" value={postId} />}
+
+      <label className="flex flex-col gap-1 text-sm">
+        <span className="font-medium">{fromCopy(copy, 'moderationForm.warn.reason')}</span>
+        <select name="typeId" className={FIELD} defaultValue="">
+          <option value="">{fromCopy(copy, 'moderationForm.warn.somethingElse')}</option>
+          {types.map((type) => (
+            <option key={type.id} value={type.id}>
+              {type.label}
+            </option>
+          ))}
+        </select>
+      </label>
+
+      <div className="grid gap-4 sm:grid-cols-[1fr_8rem]">
+        <label className="flex flex-col gap-1 text-sm">
+          <span className="font-medium">{fromCopy(copy, 'moderationForm.warn.titleLabel')}</span>
+          <input type="text" name="title" maxLength={150} className={FIELD} />
+          <span className="text-xs text-muted-foreground">
+            {fromCopy(copy, 'moderationForm.warn.titleHint')}
+          </span>
+        </label>
+        <label className="flex flex-col gap-1 text-sm">
+          <span className="font-medium">{fromCopy(copy, 'moderationForm.warn.points')}</span>
+          <input type="number" name="points" min={1} max={100} className={FIELD} />
+        </label>
+      </div>
+
+      <label className="flex flex-col gap-1 text-sm">
+        <span className="font-medium">{fromCopy(copy, 'moderationForm.warn.what')}</span>
+        <textarea name="reason" rows={4} maxLength={2000} className={FIELD} required />
+        <span className="text-xs text-muted-foreground">
+          {fromCopy(copy, 'moderationForm.warn.whatHint')}
+        </span>
+      </label>
+
+      <div>
+        <button type="submit" className={BUTTON}>
+          {fromCopy(copy, 'moderationForm.warn.submit')}
+        </button>
+      </div>
+    </form>
+  )
+}
+
+export function RevokeWarningForm({
+  warningId,
+  userId,
+  copy,
+}: {
+  warningId: number
+  userId: number
+  copy: Copy
+}) {
+  const [state, action] = useActionState(revokeWarningAction, EMPTY_STATE)
+
+  return (
+    <form action={action} className="flex flex-wrap items-center gap-2">
+      <FormError message={state.error} />
+      <input type="hidden" name="warningId" value={warningId} />
+      <input type="hidden" name="userId" value={userId} />
+      <label className="flex-1">
+        <span className="sr-only">{fromCopy(copy, 'moderationForm.warn.revokeSr')}</span>
+        <input
+          type="text"
+          name="reason"
+          maxLength={2000}
+          placeholder={fromCopy(copy, 'moderationForm.warn.revokePlaceholder')}
+          className="h-8 w-full 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"
+        className="inline-flex h-8 shrink-0 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.warn.revoke')}
+      </button>
+    </form>
+  )
+}

package/src/components/profile/custom-field.tsx

@@ -0,0 +1,79 @@
+'use client'
+
+export interface CustomFieldInput {
+  readonly key: string
+  readonly label: string
+  readonly description: string | null
+  readonly type: string | null
+  readonly options: readonly string[]
+  readonly value: string
+  readonly maxLength: number
+  readonly required: boolean
+}
+
+export function fieldInputName(key: string): string {
+  return `field:${key}`
+}
+
+export function CustomField({ field, className }: { field: CustomFieldInput; className: string }) {
+  const name = fieldInputName(field.key)
+
+  const control =
+    field.type === 'textarea' ? (
+      <textarea
+        name={name}
+        defaultValue={field.value}
+        className={className}
+        rows={4}
+        maxLength={field.maxLength}
+        required={field.required}
+      />
+    ) : field.type === 'select' ? (
+      <select
+        name={name}
+        defaultValue={field.value}
+        className={className}
+        required={field.required}
+      >
+        {field.required ? null : <option value="">—</option>}
+        {field.options.map((option) => (
+          <option key={option} value={option}>
+            {option}
+          </option>
+        ))}
+      </select>
+    ) : field.type === 'checkbox' ? (
+      <input
+        type="checkbox"
+        name={name}
+        value="yes"
+        defaultChecked={field.value !== ''}
+        className="size-4 rounded border-border"
+        required={field.required}
+      />
+    ) : (
+      <input
+        type="text"
+        name={name}
+        defaultValue={field.value}
+        className={className}
+        maxLength={field.maxLength}
+        required={field.required}
+        inputMode={field.type === 'number' ? 'numeric' : field.type === 'url' ? 'url' : undefined}
+      />
+    )
+
+  return (
+    // biome-ignore lint/a11y/noLabelWithoutControl: the control is built above and inserted as {control}
+    <label className="flex flex-col gap-1 text-sm">
+      <span className="font-medium">
+        {field.label}
+        {field.required ? <span aria-hidden> *</span> : null}
+      </span>
+      {control}
+      {field.description === null ? null : (
+        <span className="text-xs text-muted-foreground">{field.description}</span>
+      )}
+    </label>
+  )
+}

package/src/components/shell/appearance-icons.tsx

@@ -0,0 +1,35 @@
+const SHARED = {
+  viewBox: '0 0 16 16',
+  fill: 'none',
+  stroke: 'currentColor',
+  strokeWidth: 1.5,
+  strokeLinecap: 'round',
+  strokeLinejoin: 'round',
+  className: 'size-3.5 shrink-0',
+} as const
+
+export function SunIcon() {
+  return (
+    <svg {...SHARED} aria-hidden="true">
+      <circle cx="8" cy="8" r="3" />
+      <path d="M8 1v1.5M8 13.5V15M15 8h-1.5M2.5 8H1M12.95 3.05l-1.06 1.06M4.11 11.89l-1.06 1.06M12.95 12.95l-1.06-1.06M4.11 4.11L3.05 3.05" />
+    </svg>
+  )
+}
+
+export function MonitorIcon() {
+  return (
+    <svg {...SHARED} aria-hidden="true">
+      <rect x="1.5" y="2.5" width="13" height="9" rx="1.5" />
+      <path d="M5.5 14.5h5M8 11.5v3" />
+    </svg>
+  )
+}
+
+export function MoonIcon() {
+  return (
+    <svg {...SHARED} aria-hidden="true">
+      <path d="M13.5 9.5A6 6 0 0 1 6.5 2.5a6 6 0 1 0 7 7Z" />
+    </svg>
+  )
+}

package/src/components/shell/board-notice.tsx

@@ -0,0 +1,21 @@
+import 'server-only'
+
+import { type NoticeModel, requireSlot, slotCopy } from '@meith/theme-kit'
+
+import { getActor } from '@/server/context'
+import { getTranslator } from '@/server/i18n'
+import { filterView, viewerRef } from '@/server/plugin-view'
+import { currentTheme } from '@/server/theme'
+
+export async function BoardNotice({ kind, message, dismissHref }: NoticeModel) {
+  const theme = await currentTheme()
+  const Notice = requireSlot(theme, 'Notice')
+
+  const model = await filterView(
+    'view.notice',
+    { kind, message, dismissHref },
+    viewerRef(await getActor()),
+  )
+
+  return <Notice {...model} copy={slotCopy(theme, 'Notice', await getTranslator())} />
+}

package/src/components/shell/copy-record.ts

@@ -0,0 +1,20 @@
+import { formatMessage, type MessageArgs } from '@meith/i18n'
+
+export type Copy = Readonly<Record<string, string>>
+
+export function fromCopy(copy: Copy, key: string): string {
+  return copy[key] ?? key
+}
+
+export function formatFromCopy(copy: Copy, key: string, args: MessageArgs): string {
+  const pattern = copy[key]
+  if (pattern === undefined) return key
+
+  const locale = typeof document === 'undefined' ? 'en' : document.documentElement.lang || 'en'
+
+  try {
+    return formatMessage(pattern, args, { locale, timeZone: 'UTC' })
+  } catch {
+    return pattern
+  }
+}

package/src/components/shell/copy.tsx

@@ -0,0 +1,17 @@
+'use client'
+
+import { createContext, useContext } from 'react'
+
+import type { Copy } from './copy-record'
+
+export { type Copy, formatFromCopy, fromCopy } from './copy-record'
+
+const CopyContext = createContext<Copy>({})
+
+export function CopyProvider({ copy, children }: { copy: Copy; children: React.ReactNode }) {
+  return <CopyContext.Provider value={copy}>{children}</CopyContext.Provider>
+}
+
+export function useCopy(): Copy {
+  return useContext(CopyContext)
+}

package/src/components/shell/crash-notice.tsx

@@ -0,0 +1,86 @@
+'use client'
+
+import { Component, createContext, type ReactNode, useContext } from 'react'
+
+import { CRASH_NOTICE_STATUS, type CrashNoticeCopy } from '@/view/error-notice'
+
+interface CrashNoticeValue {
+  readonly notice: ReactNode
+  readonly requestId: string | null
+  readonly copy: CrashNoticeCopy
+}
+
+const CrashNoticeContext = createContext<CrashNoticeValue>({
+  notice: null,
+  requestId: null,
+  copy: { title: '', message: '', homeLabel: '' },
+})
+
+export function CrashNoticeProvider({
+  notice,
+  requestId,
+  copy,
+  children,
+}: CrashNoticeValue & { readonly children: ReactNode }) {
+  return (
+    <CrashNoticeContext.Provider value={{ notice, requestId, copy }}>
+      {children}
+    </CrashNoticeContext.Provider>
+  )
+}
+
+export function CrashNotice() {
+  const { notice, requestId, copy } = useContext(CrashNoticeContext)
+  const plain = <PlainNotice requestId={requestId} copy={copy} />
+
+  if (notice === null || notice === undefined) return plain
+
+  return <ThemeGuard fallback={plain}>{notice}</ThemeGuard>
+}
+
+class ThemeGuard extends Component<
+  { readonly fallback: ReactNode; readonly children: ReactNode },
+  { readonly failed: boolean }
+> {
+  override state = { failed: false }
+
+  static getDerivedStateFromError(): { failed: boolean } {
+    return { failed: true }
+  }
+
+  override render(): ReactNode {
+    return this.state.failed ? this.props.fallback : this.props.children
+  }
+}
+
+function PlainNotice({
+  requestId,
+  copy,
+}: {
+  readonly requestId: string | null
+  readonly copy: CrashNoticeCopy
+}) {
+  return (
+    <section className="w-full max-w-lg rounded-lg border border-border bg-card p-6 text-card-foreground">
+      <p className="text-xs font-medium tracking-wide text-destructive uppercase">
+        Error {CRASH_NOTICE_STATUS}
+      </p>
+      <h1 className="mt-1 text-2xl font-semibold tracking-tight">{copy.title}</h1>
+      <p className="mt-2 text-sm text-muted-foreground">{copy.message}</p>
+
+      <a
+        href="/"
+        className="mt-5 inline-block rounded-md border border-border px-3 py-2 text-sm hover:bg-secondary"
+      >
+        {copy.homeLabel}
+      </a>
+
+      {requestId !== null && (
+        <p className="mt-4 text-xs text-muted-foreground">
+          Quote this if you report it:{' '}
+          <code className="font-mono text-foreground select-all">{requestId}</code>
+        </p>
+      )}
+    </section>
+  )
+}

package/src/components/shell/demo-banner.tsx

@@ -0,0 +1,49 @@
+import { demoBannerModel } from '@/server/demo'
+import { getTranslator } from '@/server/i18n'
+import { splitAround } from '@/view/copy'
+
+/**
+ * The strip at the top of a demo board.
+ *
+ * Rendered from the root layout rather than through a theme slot, on purpose:
+ * the slot contract is frozen, and a visiting administrator can switch themes.
+ * A banner a theme could decline to render is a banner that stops telling the
+ * next visitor how to log in, on the first theme that has not heard of it.
+ */
+export async function DemoBanner() {
+  const banner = await demoBannerModel()
+  if (banner === null) return null
+
+  const t = await getTranslator()
+  const [loginLead, loginTail] = splitAround(t, 'demo.loginAs', 'logins')
+
+  return (
+    <aside
+      className="border-b border-border bg-muted px-4 py-2 text-sm text-muted-foreground"
+      aria-label={t.t('demo.aria')}
+    >
+      <div className="mx-auto flex max-w-6xl flex-wrap items-baseline gap-x-4 gap-y-1">
+        <strong className="font-semibold text-foreground">{t.t('demo.title')}</strong>
+
+        <span>
+          {loginLead}
+          {banner.logins.map((login, index) => (
+            <span key={login.username}>
+              {index > 0 && ', '}
+              <code className="rounded bg-background px-1 py-0.5 font-mono text-foreground">
+                {login.username} / {login.password}
+              </code>
+            </span>
+          ))}
+          {loginTail}
+        </span>
+
+        <span>
+          {banner.resetsIn === null
+            ? t.t('demo.wiped')
+            : t.t('demo.wipedIn', { when: banner.resetsIn })}
+        </span>
+      </div>
+    </aside>
+  )
+}

package/src/components/shell/group-name-style.tsx

@@ -0,0 +1,6 @@
+import { getGroupStyle } from '@/server/group-identity'
+
+export async function GroupNameStyle() {
+  const css = await getGroupStyle()
+  return css === '' ? null : <style id="forum-group-names">{css}</style>
+}

package/src/components/shell/measure.ts

@@ -0,0 +1 @@
+export const BOARD_MEASURE = 'mx-auto w-full max-w-6xl px-4 sm:px-6'