@meith/web 0.16.0

package/src/components/content/multiquote-selection.tsx

@@ -0,0 +1,105 @@
+'use client'
+
+import { useEffect, useRef, useState } from 'react'
+
+import { buttonVariants, cn } from '@meith/ui'
+
+import { quotePostAction } from '@/server/content-actions'
+
+import { type Copy, fromCopy, useCopy } from '../shell/copy'
+import { composerField, insertQuotes } from './composer-field'
+import {
+  addedNotice,
+  announceMultiquote,
+  clearMultiquote,
+  multiquoteIds,
+  selectionLabel,
+  takeMultiquote,
+  useMultiquote,
+} from './multiquote'
+
+async function addQuotes(
+  threadId: number,
+  ids: readonly number[],
+  reveal: boolean,
+  copy: Copy,
+): Promise<string> {
+  const field = composerField()
+  if (field === null) return ''
+
+  try {
+    const quotes = (await Promise.all(ids.map((id) => quotePostAction(threadId, id)))).filter(
+      (quote): quote is string => quote !== null,
+    )
+    if (quotes.length > 0) {
+      takeMultiquote()
+      insertQuotes(field, quotes, { reveal })
+    }
+    return addedNotice(quotes.length, ids.length, copy)
+  } catch {
+    return addedNotice(0, ids.length, copy)
+  }
+}
+
+export function MultiQuoteSelection({
+  threadId,
+  insertOnMount = false,
+}: {
+  threadId: number
+  insertOnMount?: boolean
+}) {
+  const { ids, notice } = useMultiquote()
+  const copy = useCopy()
+  const [adding, setAdding] = useState(false)
+  const inserted = useRef(false)
+
+  useEffect(() => {
+    if (!insertOnMount || inserted.current) return
+    inserted.current = true
+
+    const held = multiquoteIds()
+    if (held.length === 0) return
+
+    void addQuotes(threadId, held, false, copy).then((message) => {
+      if (message !== '') announceMultiquote(message)
+    })
+  }, [insertOnMount, threadId, copy])
+
+  async function add(): Promise<void> {
+    setAdding(true)
+    const message = await addQuotes(threadId, ids, true, copy)
+    setAdding(false)
+    if (message !== '') announceMultiquote(message)
+  }
+
+  return (
+    <>
+      <p role="status" className="sr-only">
+        {notice}
+      </p>
+
+      {ids.length > 0 && (
+        <div className="flex flex-wrap items-center gap-2 rounded-md border border-border bg-muted/40 px-3 py-2 text-sm">
+          <span className="font-medium">{selectionLabel(ids.length, copy)}</span>
+          <button
+            type="button"
+            onClick={() => void add()}
+            disabled={adding}
+            className={cn(buttonVariants({ variant: 'outline', size: 'sm' }), 'ml-auto')}
+          >
+            {adding
+              ? fromCopy(copy, 'composer.multiquote.adding')
+              : fromCopy(copy, 'composer.multiquote.addToReply')}
+          </button>
+          <button
+            type="button"
+            onClick={() => clearMultiquote(copy)}
+            className={buttonVariants({ variant: 'ghost', size: 'sm' })}
+          >
+            {fromCopy(copy, 'composer.multiquote.clear')}
+          </button>
+        </div>
+      )}
+    </>
+  )
+}

package/src/components/content/multiquote.ts

@@ -0,0 +1,125 @@
+'use client'
+
+import { useSyncExternalStore } from 'react'
+
+import { type Copy, formatFromCopy, fromCopy } from '../shell/copy'
+
+const KEY = 'multiquote'
+
+export interface MultiQuoteState {
+  readonly ids: readonly number[]
+  readonly notice: string
+}
+
+const EMPTY: MultiQuoteState = { ids: [], notice: '' }
+
+let state: MultiQuoteState = EMPTY
+const listeners = new Set<() => void>()
+
+function read(): readonly number[] {
+  let raw: string | null
+  try {
+    raw = sessionStorage.getItem(KEY)
+  } catch {
+    return state.ids
+  }
+
+  try {
+    const parsed: unknown = JSON.parse(raw ?? '[]')
+    if (!Array.isArray(parsed)) return []
+    return [...new Set(parsed.map(Number).filter((id) => Number.isSafeInteger(id) && id > 0))]
+  } catch {
+    return []
+  }
+}
+
+function write(ids: readonly number[]): void {
+  try {
+    if (ids.length === 0) sessionStorage.removeItem(KEY)
+    else sessionStorage.setItem(KEY, JSON.stringify(ids))
+  } catch {
+    return
+  }
+}
+
+function same(left: readonly number[], right: readonly number[]): boolean {
+  return left.length === right.length && left.every((id, index) => id === right[index])
+}
+
+function publish(ids: readonly number[], notice: string): void {
+  state = { ids, notice }
+  for (const listener of listeners) listener()
+}
+
+export function selectionLabel(count: number, copy: Copy): string {
+  return formatFromCopy(copy, 'composer.multiquote.selectedToQuote', { count })
+}
+
+function selectionNotice(count: number, change: 'added' | 'removed', copy: Copy): string {
+  return formatFromCopy(
+    copy,
+    change === 'added' ? 'composer.multiquote.added' : 'composer.multiquote.removed',
+    { count },
+  )
+}
+
+export function addedNotice(added: number, asked: number, copy: Copy): string {
+  if (added === 0) return fromCopy(copy, 'composer.multiquote.noneQuoted')
+  if (added === asked) return formatFromCopy(copy, 'composer.multiquote.quotesAdded', { added })
+  return formatFromCopy(copy, 'composer.multiquote.quotesPartial', {
+    added,
+    missed: asked - added,
+  })
+}
+
+export function multiquoteState(): MultiQuoteState {
+  const ids = read()
+  if (!same(ids, state.ids)) state = { ids, notice: state.notice }
+  return state
+}
+
+export function serverMultiquoteState(): MultiQuoteState {
+  return EMPTY
+}
+
+export function multiquoteIds(): readonly number[] {
+  return multiquoteState().ids
+}
+
+export function toggleMultiquote(postId: number, copy: Copy): void {
+  const { ids } = multiquoteState()
+  const held = ids.includes(postId)
+  const next = held ? ids.filter((id) => id !== postId) : [...ids, postId]
+
+  write(next)
+  publish(next, selectionNotice(next.length, held ? 'removed' : 'added', copy))
+}
+
+export function clearMultiquote(copy: Copy): void {
+  write([])
+  publish([], fromCopy(copy, 'composer.multiquote.cleared'))
+}
+
+export function takeMultiquote(): readonly number[] {
+  const { ids } = multiquoteState()
+  if (ids.length === 0) return ids
+
+  write([])
+  publish([], '')
+  return ids
+}
+
+export function announceMultiquote(notice: string): void {
+  publish(multiquoteState().ids, notice)
+}
+
+export function subscribeMultiquote(listener: () => void): () => void {
+  listeners.add(listener)
+  return () => {
+    listeners.delete(listener)
+  }
+}
+
+export function useMultiquote(): MultiQuoteState {
+  return useSyncExternalStore(subscribeMultiquote, multiquoteState, serverMultiquoteState)
+}

package/src/components/content/new-thread-form.tsx

@@ -0,0 +1,169 @@
+'use client'
+
+import { useActionState } from 'react'
+
+import type { UploadLimits } from '@meith/attachments/limits'
+import type { Draft } from '@meith/drafts'
+import { Disclosure } from '@meith/ui'
+
+import { EMPTY_STATE } from '@/server/auth-form-state'
+import { createThreadAction } from '@/server/content-actions'
+
+import { Field, FormError, SubmitButton } from '../auth/form-controls'
+import { type Copy, formatFromCopy, fromCopy } from '../shell/copy'
+import { AttachmentField } from './attachment-field'
+import { ComposerIntents } from './composer-intents'
+import { ComposerRecovery } from './composer-recovery'
+import { MarkdownEditor } from './markdown-editor'
+
+export interface PrefixOption {
+  readonly id: number
+  readonly label: string
+}
+
+export function NewThreadForm({
+  forumId,
+  prefixes,
+  requiresPrefix,
+  canSubscribe,
+  canPostPoll,
+  attachmentLimits,
+  draft,
+  toolbar = 'inline',
+  copy,
+}: {
+  forumId: number
+  prefixes: readonly PrefixOption[]
+  requiresPrefix: boolean
+  canSubscribe: boolean
+  canPostPoll: boolean
+  attachmentLimits: UploadLimits | null
+  draft: Draft | null
+  toolbar?: 'inline' | 'external'
+  copy: Copy
+}) {
+  const [state, action] = useActionState(createThreadAction, EMPTY_STATE)
+
+  const hasPollDraft =
+    (state.values?.pollQuestion ?? '') !== '' || (state.values?.pollOption ?? '') !== ''
+
+  return (
+    <form action={action} className="flex flex-col gap-4" noValidate>
+      <FormError message={state.error} />
+      {state.notice === 'saved' && <p role="status">{fromCopy(copy, 'composer.draftSaved')}</p>}
+      <input type="hidden" name="forumId" value={forumId} />
+
+      <Field
+        label={fromCopy(copy, 'composer.newThread.subject')}
+        name="title"
+        required
+        minLength={3}
+        maxLength={120}
+        defaultValue={state.values?.title ?? draft?.title}
+      />
+
+      {prefixes.length > 0 && (
+        <label className="flex flex-col gap-1 text-sm">
+          <span className="font-medium">
+            {requiresPrefix
+              ? fromCopy(copy, 'composer.newThread.prefix')
+              : fromCopy(copy, 'composer.newThread.prefixOptional')}
+          </span>
+          <select
+            name="prefixId"
+            defaultValue={state.values?.prefixId ?? draft?.prefixId?.toString() ?? ''}
+            className="h-10 rounded-md border border-border bg-background px-3 text-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
+          >
+            <option value="">
+              {requiresPrefix
+                ? fromCopy(copy, 'composer.newThread.choosePrefix')
+                : fromCopy(copy, 'composer.newThread.noPrefix')}
+            </option>
+            {prefixes.map((prefix) => (
+              <option key={prefix.id} value={prefix.id}>
+                {prefix.label}
+              </option>
+            ))}
+          </select>
+        </label>
+      )}
+
+      <ComposerRecovery
+        storageKey={`meith:composer:new-thread:${forumId}`}
+        scope={{ forumId }}
+        serverUpdatedAt={draft?.updatedAt?.getTime() ?? 0}
+        copy={copy}
+      />
+
+      <MarkdownEditor
+        required
+        defaultValue={state.values?.message ?? draft?.message}
+        preview={state.notice === 'preview' ? (state.preview ?? '') : undefined}
+        toolbar={toolbar}
+        {...(attachmentLimits !== null ? { attachTo: { kind: 'forum', forumId } } : {})}
+      />
+
+      {attachmentLimits !== null && <AttachmentField limits={attachmentLimits} />}
+
+      {canPostPoll && (
+        <Disclosure
+          summary={fromCopy(copy, 'composer.newThread.addPoll')}
+          aside={fromCopy(copy, 'composer.newThread.optional')}
+          contentClassName="flex flex-col gap-2"
+          {...(hasPollDraft ? { open: true } : {})}
+        >
+          <Field
+            label={fromCopy(copy, 'composer.newThread.question')}
+            name="pollQuestion"
+            maxLength={250}
+          />
+          {[1, 2, 3, 4].map((number) => (
+            <Field
+              key={number}
+              id={`field-pollOption-${number}`}
+              label={formatFromCopy(copy, 'composer.newThread.option', { number })}
+              name="pollOption"
+              maxLength={200}
+            />
+          ))}
+          <label className="flex flex-col gap-1 text-sm">
+            <span className="font-medium">{fromCopy(copy, 'composer.newThread.pollChoices')}</span>
+            <input
+              type="number"
+              name="pollMaxOptions"
+              min={0}
+              step={1}
+              defaultValue="1"
+              className="h-10 rounded-md border border-border bg-background px-3 text-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
+            />
+            <span className="text-xs text-muted-foreground">
+              {fromCopy(copy, 'composer.newThread.pollChoicesHint')}
+            </span>
+          </label>
+          <label className="flex items-center gap-2 text-sm">
+            <input type="checkbox" name="pollAllowRevote" value="1" className="size-4" />
+            <span>{fromCopy(copy, 'composer.newThread.pollRevote')}</span>
+          </label>
+          <label className="flex items-center gap-2 text-sm">
+            <input type="checkbox" name="pollPublicVotes" value="1" className="size-4" />
+            <span>{fromCopy(copy, 'composer.newThread.pollPublic')}</span>
+          </label>
+        </Disclosure>
+      )}
+
+      {canSubscribe && (
+        <label className="flex items-center gap-2 text-sm">
+          <input type="checkbox" name="subscribe" value="1" className="size-4" />
+          <span>{fromCopy(copy, 'composer.notifyReplies')}</span>
+        </label>
+      )}
+
+      <div className="flex flex-wrap items-center gap-2">
+        <SubmitButton className="w-auto">
+          {fromCopy(copy, 'composer.newThread.submit')}
+        </SubmitButton>
+        <ComposerIntents />
+      </div>
+    </form>
+  )
+}

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

@@ -0,0 +1,96 @@
+import { POLL_OPTION_LENGTH_MAX, POLL_QUESTION_MAX, type Poll } from '@meith/polls'
+
+import { getTranslator } from '@/server/i18n'
+import { editPollAction } from '@/server/poll-actions'
+
+const NEW_OPTION_SLOTS = ['first', 'second', 'third'] as const
+
+function inputValue(at: Date | null): string {
+  return at === null ? '' : at.toISOString().slice(0, 16)
+}
+
+export async function PollEditForm({ poll, threadId }: { poll: Poll; threadId: number }) {
+  const t = await getTranslator()
+  const voted = poll.options.some((option) => option.votes > 0)
+
+  return (
+    <form action={editPollAction} className="flex flex-col gap-4">
+      <input type="hidden" name="threadId" value={threadId} />
+      <input type="hidden" name="pollId" value={poll.id} />
+
+      <label className="flex flex-col gap-1 text-sm">
+        <span className="font-medium">{t.t('pollEdit.question')}</span>
+        <input
+          type="text"
+          name="question"
+          required
+          maxLength={POLL_QUESTION_MAX}
+          defaultValue={poll.question}
+        />
+      </label>
+
+      {poll.options.map((option, index) => (
+        <label key={option.id} className="flex flex-col gap-1 text-sm">
+          <span className="font-medium">{t.t('pollEdit.option', { number: index + 1 })}</span>
+          <input type="hidden" name="optionRef" value={option.id} />
+          <input
+            type="text"
+            name="optionLabel"
+            maxLength={POLL_OPTION_LENGTH_MAX}
+            defaultValue={option.label}
+          />
+          <span className="text-xs text-muted-foreground">
+            {option.votes > 0
+              ? t.t('pollEdit.optionVoted', { count: option.votes })
+              : t.t('pollEdit.optionEmpty')}
+          </span>
+        </label>
+      ))}
+
+      {NEW_OPTION_SLOTS.map((slot, index) => (
+        <label key={slot} className="flex flex-col gap-1 text-sm">
+          <span className="font-medium">
+            {t.t('pollEdit.option', { number: poll.options.length + index + 1 })}
+          </span>
+          <input type="hidden" name="optionRef" value="" />
+          <input type="text" name="optionLabel" maxLength={POLL_OPTION_LENGTH_MAX} />
+        </label>
+      ))}
+
+      <label className="flex flex-col gap-1 text-sm">
+        <span className="font-medium">{t.t('pollEdit.maxOptions')}</span>
+        <input type="number" name="maxOptions" min={0} step={1} defaultValue={poll.maxOptions} />
+        <span className="text-xs text-muted-foreground">{t.t('pollEdit.maxOptionsHint')}</span>
+      </label>
+
+      <label className="flex flex-col gap-1 text-sm">
+        <span className="font-medium">{t.t('pollEdit.closesAt')}</span>
+        <input type="datetime-local" name="closesAt" defaultValue={inputValue(poll.closesAt)} />
+        <span className="text-xs text-muted-foreground">{t.t('pollEdit.closesAtHint')}</span>
+      </label>
+
+      <label className="flex items-center gap-2 text-sm">
+        <input type="checkbox" name="allowRevote" value="1" defaultChecked={poll.allowRevote} />
+        <span>{t.t('pollEdit.allowRevote')}</span>
+      </label>
+
+      <label className="flex flex-col gap-1 text-sm">
+        <span className="flex items-center gap-2">
+          <input
+            type="checkbox"
+            name="publicVotes"
+            value="1"
+            defaultChecked={poll.publicVotes}
+            disabled={voted && !poll.publicVotes}
+          />
+          <span>{t.t('pollEdit.publicVotes')}</span>
+        </span>
+        <span className="text-xs text-muted-foreground">{t.t('pollEdit.publicVotesHint')}</span>
+      </label>
+
+      <div>
+        <button type="submit">{t.t('pollEdit.save')}</button>
+      </div>
+    </form>
+  )
+}

package/src/components/content/poll.tsx

@@ -0,0 +1,89 @@
+import { POLL_CHOICES_UNLIMITED, type Poll } from '@meith/polls'
+
+import { getTranslator } from '@/server/i18n'
+import { votePollAction } from '@/server/poll-actions'
+
+export async function PollForm({
+  poll,
+  threadId,
+  canVote,
+  editHref,
+}: {
+  poll: Poll
+  threadId: number
+  canVote: boolean
+  editHref?: string | null
+}) {
+  const total = poll.options.reduce((sum, option) => sum + option.votes, 0)
+  const t = await getTranslator()
+
+  const closed = poll.closesAt !== null && poll.closesAt <= new Date()
+  const hasVoted = poll.votedOptionIds.length > 0
+  const mayCast = canVote && !closed && (!hasVoted || poll.allowRevote)
+  const multiple = poll.maxOptions !== 1
+
+  return (
+    <section
+      aria-label={t.t('pollForm.label')}
+      className="mt-4 rounded-md border border-border p-4"
+    >
+      <h2 className="font-medium">{poll.question}</h2>
+
+      {multiple && (
+        <p className="mt-1 text-sm text-muted-foreground">
+          {poll.maxOptions === POLL_CHOICES_UNLIMITED
+            ? t.t('pollForm.chooseAny')
+            : t.t('pollForm.chooseUpTo', { max: poll.maxOptions })}
+        </p>
+      )}
+      {poll.publicVotes && (
+        <p className="mt-1 text-sm text-muted-foreground">{t.t('pollForm.publicNotice')}</p>
+      )}
+
+      <form action={votePollAction} className="mt-3 flex flex-col gap-2">
+        <input type="hidden" name="threadId" value={threadId} />
+        <input type="hidden" name="pollId" value={poll.id} />
+        {poll.options.map((option) => (
+          <div key={option.id} className="flex flex-col gap-1">
+            <label className="flex items-center gap-2 text-sm">
+              <input
+                type={multiple ? 'checkbox' : 'radio'}
+                name="optionId"
+                value={option.id}
+                defaultChecked={poll.votedOptionIds.includes(option.id)}
+                disabled={!mayCast}
+              />
+              <span>
+                {option.label} ({option.votes})
+              </span>
+            </label>
+            {poll.publicVotes && option.voters.length > 0 && (
+              <p className="pl-6 text-sm text-muted-foreground">
+                {t.t('pollForm.votedBy', {
+                  names: option.voters.map((voter) => voter.username).join(', '),
+                })}
+                {option.votes > option.voters.length &&
+                  ` ${t.t('pollForm.moreVoters', { count: option.votes - option.voters.length })}`}
+              </p>
+            )}
+          </div>
+        ))}
+        {mayCast ? (
+          <button type="submit">
+            {hasVoted ? t.t('pollForm.changeVote') : t.t('pollForm.vote')}
+          </button>
+        ) : (
+          <p className="text-sm text-muted-foreground">
+            {closed ? t.t('pollForm.closed') : t.t('pollForm.votes', { count: total })}
+          </p>
+        )}
+      </form>
+
+      {typeof editHref === 'string' && (
+        <p className="mt-3 text-sm">
+          <a href={editHref}>{t.t('pollForm.edit')}</a>
+        </p>
+      )}
+    </section>
+  )
+}

package/src/components/content/quote-in-place.tsx

@@ -0,0 +1,51 @@
+'use client'
+
+import { useEffect } from 'react'
+
+import { quotePostAction } from '@/server/content-actions'
+
+import { composerField, insertQuotes } from './composer-field'
+
+function quotedPostId(href: string): number | null {
+  const match = /[?&]quote=(\d+)(?:&|$)/.exec(href)
+  if (match === null) return null
+  const id = Number(match[1])
+  return Number.isSafeInteger(id) && id > 0 ? id : null
+}
+
+export function QuoteInPlace({ threadId }: { threadId: number }) {
+  useEffect(() => {
+    async function onClick(event: MouseEvent): Promise<void> {
+      if (event.defaultPrevented || event.button !== 0) return
+      if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return
+
+      const link = (event.target as Element | null)?.closest?.('a[href]')
+      if (!(link instanceof HTMLAnchorElement)) return
+
+      const postId = quotedPostId(link.getAttribute('href') ?? '')
+      if (postId === null) return
+
+      const field = composerField()
+      if (field === null) return
+
+      event.preventDefault()
+
+      try {
+        const quote = await quotePostAction(threadId, postId)
+        if (quote === null) {
+          window.location.assign(link.href)
+          return
+        }
+        insertQuotes(field, [quote], { reveal: true })
+      } catch {
+        window.location.assign(link.href)
+      }
+    }
+
+    const handler = (event: MouseEvent): void => void onClick(event)
+    document.addEventListener('click', handler)
+    return () => document.removeEventListener('click', handler)
+  }, [threadId])
+
+  return null
+}