@meith/web 0.16.0

package/src/components/board/live-region.tsx

@@ -0,0 +1,74 @@
+'use client'
+
+import { type ReactNode, useEffect, useRef, useState } from 'react'
+
+export interface LiveRegionProps {
+  readonly children: ReactNode
+  readonly refresh: () => Promise<ReactNode>
+  readonly seconds: number
+  readonly label: string
+}
+
+export function LiveRegion({ children, refresh, seconds, label }: LiveRegionProps) {
+  const region = useRef<HTMLDivElement>(null)
+  const [fresh, setFresh] = useState<ReactNode>(null)
+  const [enhanced, setEnhanced] = useState(false)
+  const [paused, setPaused] = useState(false)
+
+  const action = useRef(refresh)
+  action.current = refresh
+
+  useEffect(() => setEnhanced(true), [])
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: children is the reset trigger — a new server render clears the stale client copy
+  useEffect(() => setFresh(null), [children])
+
+  useEffect(() => {
+    if (paused) return
+
+    let live = true
+
+    const poll = (): void => {
+      if (document.hidden) return
+      if (region.current?.contains(document.activeElement)) return
+
+      void action
+        .current()
+        .then((node) => {
+          if (live) setFresh(node)
+        })
+        .catch(() => {})
+    }
+
+    const timer = window.setInterval(poll, seconds * 1000)
+    const onVisibility = (): void => poll()
+    document.addEventListener('visibilitychange', onVisibility)
+
+    return () => {
+      live = false
+      window.clearInterval(timer)
+      document.removeEventListener('visibilitychange', onVisibility)
+    }
+  }, [paused, seconds])
+
+  return (
+    <>
+      <div ref={region} className="contents">
+        {fresh ?? children}
+      </div>
+
+      {enhanced && (
+        <p className="flex flex-wrap items-baseline justify-between gap-x-3 gap-y-1 px-1 text-xs text-muted-foreground">
+          <span>{paused ? `${label} paused` : `${label} updates every ${seconds} seconds`}</span>
+          <button
+            type="button"
+            onClick={() => setPaused((was) => !was)}
+            className="font-medium text-foreground underline decoration-border underline-offset-2 hover:decoration-foreground"
+          >
+            {paused ? 'Resume' : 'Pause'}
+          </button>
+        </p>
+      )}
+    </>
+  )
+}

package/src/components/board/search-off-notice.tsx

@@ -0,0 +1,18 @@
+import { Card, CardContent } from '@meith/ui'
+
+export function SearchOffNotice({ title, message }: { title: string; message: string }) {
+  return (
+    <main
+      id="board-content"
+      tabIndex={-1}
+      className="mx-auto flex w-full max-w-3xl flex-col gap-6 px-6 py-8 flex-1"
+    >
+      <h1 className="font-heading text-2xl font-semibold">{title}</h1>
+      <Card>
+        <CardContent className="p-6">
+          <p className="text-sm text-muted-foreground">{message}</p>
+        </CardContent>
+      </Card>
+    </main>
+  )
+}

package/src/components/board/section-page.tsx

@@ -0,0 +1,114 @@
+import 'server-only'
+
+import { currentRequestId } from '@meith/core/logger'
+import type { ForumListingRow } from '@meith/forums'
+import { requireSlot, slotCopy } from '@meith/theme-kit'
+
+import { getActor } from '@/server/context'
+import { identitiesFor } from '@/server/group-identity'
+import { getTranslator } from '@/server/i18n'
+import { filterView, viewerRef } from '@/server/plugin-view'
+import { currentTheme } from '@/server/theme'
+import { getViewerPreferences } from '@/server/viewer-preferences'
+import { buildSectionView } from '@/view/board-index'
+import { buildBreadcrumb } from '@/view/breadcrumb'
+import { distinctUserIds } from '@/view/member-identity'
+
+export async function SectionPage({
+  category,
+  rows,
+  visibleForumIds,
+  ownThreadsOnlyForumIds,
+  unreadForumIds,
+  homeLabel,
+}: {
+  category: ForumListingRow
+  rows: readonly ForumListingRow[]
+  visibleForumIds: ReadonlySet<number>
+  ownThreadsOnlyForumIds?: ReadonlySet<number>
+  unreadForumIds?: ReadonlySet<number>
+  homeLabel?: string
+}) {
+  const actor = await getActor()
+  const _preferences = await getViewerPreferences()
+  const identities = await identitiesFor(
+    distinctUserIds(rows.map((row) => row.lastPost?.userId ?? null)),
+  )
+
+  const section = buildSectionView({
+    rows,
+    visibleForumIds,
+    ...(ownThreadsOnlyForumIds === undefined ? {} : { ownThreadsOnlyForumIds }),
+    ...(unreadForumIds === undefined ? {} : { unreadForumIds }),
+    categoryId: category.id,
+    now: new Date(),
+    t: await getTranslator(),
+    identities,
+  })
+
+  const pluginContext = viewerRef(actor)
+  const forums = await Promise.all(
+    (section?.forums ?? []).map((forum) => filterView('view.forum-row', { forum }, pluginContext)),
+  )
+
+  const theme = await currentTheme()
+  const Navigation = requireSlot(theme, 'Navigation')
+  const BoardIndex = requireSlot(theme, 'BoardIndex')
+  const CategoryBlock = requireSlot(theme, 'CategoryBlock')
+  const ForumRow = requireSlot(theme, 'ForumRow')
+  const translator = await getTranslator()
+
+  const trail = buildBreadcrumb({
+    forums: rows,
+    forumId: category.id,
+    visibleForumIds,
+    ...(homeLabel === undefined ? {} : { homeLabel }),
+  })
+
+  const block =
+    section === null
+      ? null
+      : await filterView('view.category-block', { category: section.block.category }, pluginContext)
+
+  const index = await filterView(
+    'view.board-index',
+    {
+      markAllReadAction: null,
+      regions: {
+        categories:
+          block === null ? null : (
+            <CategoryBlock {...block} copy={slotCopy(theme, 'CategoryBlock', translator)}>
+              {forums.map((row) => (
+                <ForumRow
+                  key={row.forum.id}
+                  {...row}
+                  copy={slotCopy(theme, 'ForumRow', translator)}
+                />
+              ))}
+            </CategoryBlock>
+          ),
+        stats: null,
+        online: null,
+      },
+    },
+    pluginContext,
+  )
+
+  const navigation = await filterView(
+    'view.navigation',
+    { items: trail },
+    {
+      ...pluginContext,
+      requestId: currentRequestId() ?? null,
+    },
+  )
+
+  return (
+    <>
+      <Navigation {...navigation} copy={slotCopy(theme, 'Navigation', translator)} />
+      <main id="board-content" tabIndex={-1} className="flex-1">
+        <BoardIndex {...index} copy={slotCopy(theme, 'BoardIndex', translator)} />
+      </main>
+    </>
+  )
+}

package/src/components/content/attachment-field.tsx

@@ -0,0 +1,51 @@
+'use client'
+
+import { useRef } from 'react'
+
+import { maxBytesFor, maxPerPostFor, type UploadLimits } from '@meith/attachments/limits'
+import { ACCEPTED_EXTENSIONS, ATTACHMENT_FIELD } from '@meith/attachments/types'
+
+import { formatBytes } from '@/view/attachments'
+
+import { formatFromCopy, fromCopy, useCopy } from '../shell/copy'
+
+export function AttachmentField({ limits }: { limits: UploadLimits }) {
+  const input = useRef<HTMLInputElement>(null)
+  const copy = useCopy()
+  const perPost = maxPerPostFor(limits)
+  const maxBytes = maxBytesFor(limits)
+
+  return (
+    <div
+      className="flex flex-col gap-1 text-sm"
+      onDragOver={(event) => event.preventDefault()}
+      onDrop={(event) => {
+        event.preventDefault()
+        if (input.current === null) return
+        const files = new DataTransfer()
+        for (const file of event.dataTransfer.files) files.items.add(file)
+        input.current.files = files.files
+      }}
+    >
+      <label htmlFor={ATTACHMENT_FIELD} className="font-medium">
+        {fromCopy(copy, 'composer.attachments.label')}
+      </label>
+      <input
+        ref={input}
+        id={ATTACHMENT_FIELD}
+        type="file"
+        name={ATTACHMENT_FIELD}
+        multiple
+        aria-describedby={`${ATTACHMENT_FIELD}-limits`}
+        accept={ACCEPTED_EXTENSIONS.map((extension) => `.${extension}`).join(',')}
+        className="rounded-md border border-input bg-card px-3 py-1.5 text-sm file:mr-3 file:rounded file:border-0 file:bg-muted file:px-3 file:py-1 file:text-sm"
+      />
+      <p id={`${ATTACHMENT_FIELD}-limits`} className="text-xs text-muted-foreground">
+        {formatFromCopy(copy, 'composer.attachments.hint', {
+          count: perPost,
+          size: formatBytes(maxBytes),
+        })}
+      </p>
+    </div>
+  )
+}

package/src/components/content/composer-field.ts

@@ -0,0 +1,31 @@
+'use client'
+
+export function composerField(): HTMLTextAreaElement | null {
+  const field = document.getElementById('post-message')
+  return field instanceof HTMLTextAreaElement ? field : null
+}
+
+export function insertQuotes(
+  field: HTMLTextAreaElement,
+  quotes: readonly string[],
+  { reveal }: { reveal: boolean },
+): void {
+  if (quotes.length === 0) return
+
+  const existing = field.value.replace(/\s+$/, '')
+  field.value = `${existing === '' ? '' : `${existing}\n\n`}${quotes.join('\n\n')}\n\n`
+
+  if (reveal) {
+    const panel = field.closest('details')
+    if (panel !== null) panel.open = true
+  }
+
+  field.setSelectionRange(field.value.length, field.value.length)
+
+  if (reveal) {
+    field.focus()
+    field.scrollIntoView({ block: 'center', behavior: 'smooth' })
+  }
+
+  field.dispatchEvent(new Event('input', { bubbles: true }))
+}

package/src/components/content/composer-ids.ts

@@ -0,0 +1,6 @@
+/** The default `id` a page's `EditorToolbar` and the composer's textarea agree on. */
+export const MESSAGE_TEXTAREA_ID = 'post-message'
+
+export function attachmentFieldId(textareaId: string): string {
+  return `${textareaId}-attachment`
+}

package/src/components/content/composer-intents.tsx

@@ -0,0 +1,27 @@
+import { buttonVariants } from '@meith/ui'
+
+import { fromCopy, useCopy } from '../shell/copy'
+
+export function ComposerIntents() {
+  const copy = useCopy()
+  return (
+    <>
+      <button
+        type="submit"
+        name="intent"
+        value="preview"
+        className={buttonVariants({ variant: 'outline' })}
+      >
+        {fromCopy(copy, 'composer.preview')}
+      </button>
+      <button
+        type="submit"
+        name="intent"
+        value="save_draft"
+        className={buttonVariants({ variant: 'ghost' })}
+      >
+        {fromCopy(copy, 'composer.saveDraft')}
+      </button>
+    </>
+  )
+}

package/src/components/content/composer-recovery.tsx

@@ -0,0 +1,215 @@
+'use client'
+
+import { useCallback, useEffect, useRef, useState } from 'react'
+
+import { Alert, AlertDescription } from '@meith/ui'
+
+import { autosaveComposerAction, type ComposerAutosaveInput } from '@/server/content-actions'
+
+import { type Copy, fromCopy } from '../shell/copy'
+
+const BACKUP_VERSION = 1
+const AUTOSAVE_DELAY_MS = 1_500
+
+interface Backup extends ComposerAutosaveInput {
+  readonly version: typeof BACKUP_VERSION
+  readonly savedAt: number
+}
+
+type SaveState = 'idle' | 'saving' | 'saved' | 'failed'
+
+function readPayload(form: HTMLFormElement, scope: ComposerAutosaveInput): ComposerAutosaveInput {
+  const data = new FormData(form)
+  const prefix = data.get('prefixId')
+  return {
+    ...scope,
+    title: typeof data.get('title') === 'string' ? String(data.get('title')) : '',
+    message: typeof data.get('message') === 'string' ? String(data.get('message')) : '',
+    prefixId:
+      typeof prefix === 'string' && prefix !== '' && Number.isSafeInteger(Number(prefix))
+        ? Number(prefix)
+        : null,
+  }
+}
+
+function signature(payload: ComposerAutosaveInput): string {
+  return JSON.stringify({
+    forumId: payload.forumId,
+    threadId: payload.threadId,
+    title: payload.title,
+    message: payload.message,
+    prefixId: payload.prefixId,
+  })
+}
+
+function storedBackup(key: string): Backup | null {
+  try {
+    const parsed = JSON.parse(localStorage.getItem(key) ?? 'null') as Partial<Backup> | null
+    if (
+      parsed === null ||
+      parsed.version !== BACKUP_VERSION ||
+      typeof parsed.savedAt !== 'number' ||
+      typeof parsed.title !== 'string' ||
+      typeof parsed.message !== 'string'
+    ) {
+      return null
+    }
+    return parsed as Backup
+  } catch {
+    return null
+  }
+}
+
+function setField(form: HTMLFormElement, name: string, value: string): void {
+  const control = form.elements.namedItem(name)
+  if (
+    !(
+      control instanceof HTMLInputElement ||
+      control instanceof HTMLTextAreaElement ||
+      control instanceof HTMLSelectElement
+    )
+  )
+    return
+  control.value = value
+  control.dispatchEvent(new Event('input', { bubbles: true }))
+  control.dispatchEvent(new Event('change', { bubbles: true }))
+}
+
+export function ComposerRecovery({
+  storageKey,
+  scope,
+  serverUpdatedAt,
+  copy,
+}: {
+  storageKey: string
+  scope: Pick<ComposerAutosaveInput, 'forumId' | 'threadId'>
+  serverUpdatedAt: number
+  copy: Copy
+}) {
+  const root = useRef<HTMLDivElement>(null)
+  const latest = useRef('')
+  const saved = useRef('')
+  const submitting = useRef(false)
+  const [recovery, setRecovery] = useState<Backup | null>(null)
+  const [saveState, setSaveState] = useState<SaveState>('idle')
+
+  const persist = useCallback(async () => {
+    const form = root.current?.closest('form')
+    if (form === null || form === undefined) return
+    const payload = readPayload(form, { ...scope, title: '', message: '', prefixId: null })
+    const next = signature(payload)
+    latest.current = next
+    if (next === saved.current || (payload.title.trim() === '' && payload.message.trim() === ''))
+      return
+
+    setSaveState('saving')
+    try {
+      const result = await autosaveComposerAction(payload)
+      saved.current = next
+      setSaveState('saved')
+      localStorage.setItem(
+        storageKey,
+        JSON.stringify({ ...payload, version: BACKUP_VERSION, savedAt: result.savedAt }),
+      )
+    } catch {
+      setSaveState('failed')
+    }
+  }, [scope, storageKey])
+
+  useEffect(() => {
+    const form = root.current?.closest('form')
+    if (form === null || form === undefined) return
+
+    const initial = readPayload(form, { ...scope, title: '', message: '', prefixId: null })
+    latest.current = signature(initial)
+    saved.current = latest.current
+    const backup = storedBackup(storageKey)
+    if (
+      backup !== null &&
+      backup.savedAt > serverUpdatedAt &&
+      signature(backup) !== latest.current
+    ) {
+      setRecovery(backup)
+    }
+
+    let timer: ReturnType<typeof setTimeout> | undefined
+    const onInput = () => {
+      const payload = readPayload(form, { ...scope, title: '', message: '', prefixId: null })
+      latest.current = signature(payload)
+      try {
+        localStorage.setItem(
+          storageKey,
+          JSON.stringify({ ...payload, version: BACKUP_VERSION, savedAt: Date.now() }),
+        )
+      } catch {}
+      clearTimeout(timer)
+      timer = setTimeout(() => void persist(), AUTOSAVE_DELAY_MS)
+    }
+    const onBlur = () => void persist()
+    const onSubmit = (event: SubmitEvent) => {
+      const submitter = event.submitter
+      submitting.current =
+        !(submitter instanceof HTMLButtonElement) ||
+        (submitter.name !== 'intent' && submitter.value !== 'preview')
+    }
+    const onPageHide = () => {
+      if (submitting.current) localStorage.removeItem(storageKey)
+    }
+    const onBeforeUnload = (event: BeforeUnloadEvent) => {
+      if (latest.current === saved.current) return
+      event.preventDefault()
+      event.returnValue = ''
+    }
+
+    form.addEventListener('input', onInput)
+    form.addEventListener('blur', onBlur, true)
+    form.addEventListener('submit', onSubmit)
+    window.addEventListener('pagehide', onPageHide)
+    window.addEventListener('beforeunload', onBeforeUnload)
+    return () => {
+      clearTimeout(timer)
+      form.removeEventListener('input', onInput)
+      form.removeEventListener('blur', onBlur, true)
+      form.removeEventListener('submit', onSubmit)
+      window.removeEventListener('pagehide', onPageHide)
+      window.removeEventListener('beforeunload', onBeforeUnload)
+    }
+  }, [persist, scope, serverUpdatedAt, storageKey])
+
+  function restore(): void {
+    const form = root.current?.closest('form')
+    if (form === null || form === undefined || recovery === null) return
+    setField(form, 'title', recovery.title)
+    setField(form, 'message', recovery.message)
+    setField(form, 'prefixId', recovery.prefixId?.toString() ?? '')
+    setRecovery(null)
+  }
+
+  function discard(): void {
+    localStorage.removeItem(storageKey)
+    setRecovery(null)
+  }
+
+  return (
+    <div ref={root} className="flex flex-col gap-2" aria-live="polite">
+      {recovery !== null && (
+        <Alert>
+          <AlertDescription className="flex flex-wrap items-center gap-2">
+            <span>{fromCopy(copy, 'composer.recovery.available')}</span>
+            <button type="button" className="font-medium underline" onClick={restore}>
+              {fromCopy(copy, 'composer.recovery.restore')}
+            </button>
+            <button type="button" className="font-medium underline" onClick={discard}>
+              {fromCopy(copy, 'composer.recovery.discard')}
+            </button>
+          </AlertDescription>
+        </Alert>
+      )}
+      <p className="text-xs text-muted-foreground">
+        {saveState === 'saving' && fromCopy(copy, 'composer.autosave.saving')}
+        {saveState === 'saved' && fromCopy(copy, 'composer.autosave.saved')}
+        {saveState === 'failed' && fromCopy(copy, 'composer.autosave.failed')}
+      </p>
+    </div>
+  )
+}

package/src/components/content/edit-post-form.tsx

@@ -0,0 +1,121 @@
+'use client'
+
+import { useActionState } from 'react'
+
+import { EMPTY_STATE } from '@/server/auth-form-state'
+import { deletePostAction, editPostAction, restorePostAction } from '@/server/content-actions'
+
+import { FormError, SubmitButton } from '../auth/form-controls'
+import { type Copy, fromCopy } from '../shell/copy'
+import { MarkdownEditor } from './markdown-editor'
+
+export function EditPostForm({
+  threadId,
+  postId,
+  message,
+  reason,
+  toolbar = 'inline',
+  copy,
+}: {
+  threadId: number
+  postId: number
+  message: string
+  reason: string | null
+  toolbar?: 'inline' | 'external'
+  copy: Copy
+}) {
+  const [state, action] = useActionState(editPostAction, EMPTY_STATE)
+
+  return (
+    <form action={action} className="flex flex-col gap-4" noValidate>
+      <FormError message={state.error} />
+      <input type="hidden" name="threadId" value={threadId} />
+      <input type="hidden" name="postId" value={postId} />
+
+      <MarkdownEditor
+        required
+        defaultValue={state.values?.message ?? message}
+        preview={state.notice === 'preview' ? (state.preview ?? '') : undefined}
+        toolbar={toolbar}
+      />
+
+      <label className="flex flex-col gap-1 text-sm">
+        <span className="font-medium">{fromCopy(copy, 'composer.edit.reason')}</span>
+        <input
+          type="text"
+          name="reason"
+          maxLength={200}
+          defaultValue={state.values?.reason ?? reason ?? ''}
+          className="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"
+        />
+      </label>
+
+      <div className="flex flex-wrap gap-3">
+        <SubmitButton>{fromCopy(copy, 'composer.edit.submit')}</SubmitButton>
+        <button
+          type="submit"
+          name="intent"
+          value="preview"
+          className="inline-flex h-10 items-center justify-center rounded-md border border-border px-4 text-sm font-medium transition-opacity hover:opacity-90 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
+        >
+          {fromCopy(copy, 'composer.preview')}
+        </button>
+      </div>
+    </form>
+  )
+}
+
+export function DeletePostForm({
+  threadId,
+  postId,
+  copy,
+}: {
+  threadId: number
+  postId: number
+  copy: Copy
+}) {
+  const [state, action] = useActionState(deletePostAction, EMPTY_STATE)
+
+  return (
+    <form action={action} className="mt-6 flex flex-col gap-3 border-t border-border pt-5">
+      <FormError message={state.error} />
+      <input type="hidden" name="threadId" value={threadId} />
+      <input type="hidden" name="postId" value={postId} />
+      <p className="text-sm text-muted-foreground">{fromCopy(copy, 'composer.edit.deleteBlurb')}</p>
+      <div>
+        <button
+          type="submit"
+          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, 'composer.edit.delete')}
+        </button>
+      </div>
+    </form>
+  )
+}
+
+export function RestorePostForm({
+  threadId,
+  postId,
+  copy,
+}: {
+  threadId: number
+  postId: number
+  copy: Copy
+}) {
+  const [state, action] = useActionState(restorePostAction, EMPTY_STATE)
+
+  return (
+    <form action={action} className="flex flex-col gap-3">
+      <FormError message={state.error} />
+      <input type="hidden" name="threadId" value={threadId} />
+      <input type="hidden" name="postId" value={postId} />
+      <p className="text-sm text-muted-foreground">
+        {fromCopy(copy, 'composer.edit.restoreBlurb')}
+      </p>
+      <div>
+        <SubmitButton>{fromCopy(copy, 'composer.edit.restore')}</SubmitButton>
+      </div>
+    </form>
+  )
+}