@meith/web 0.31.0 → 0.32.0

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

@@ -2,10 +2,11 @@
 
 import { useActionState } from 'react'
 
-import { Card, CardContent, Field, Textarea } from '@meith/ui'
+import { Card, CardContent, Field, Textarea, textLinkVariants } from '@meith/ui'
 
 import { EMPTY_STATE } from '@/server/auth-form-state'
 import { assignReportAction, closeReportAction, fileReportAction } from '@/server/report-actions'
+import { REPORT_CATEGORY_LABEL_KEYS, REPORT_CATEGORY_ORDER } from '@/view/moderation-copy'
 
 import { FormError, PendingButton, SubmitButton } from '../auth/form-controls'
 import { type Copy, fromCopy } from '../shell/copy'
@@ -29,14 +30,32 @@ export function ReportForm({
           <input type="hidden" name="kind" value={kind} />
           <input type="hidden" name="targetId" value={targetId} />
 
+          <fieldset className="flex flex-col gap-2">
+            <legend className="mb-1 text-sm font-medium leading-none text-foreground">
+              {fromCopy(copy, 'moderationForm.report.categoryLegend')}
+            </legend>
+            <div className="flex flex-col gap-1.5">
+              {REPORT_CATEGORY_ORDER.map((category) => (
+                <label key={category} className="flex items-center gap-2 text-sm">
+                  <input
+                    type="radio"
+                    name="category"
+                    value={category}
+                    defaultChecked={state.values?.category === category}
+                    className="size-4 accent-primary"
+                  />
+                  {fromCopy(copy, REPORT_CATEGORY_LABEL_KEYS[category])}
+                </label>
+              ))}
+            </div>
+          </fieldset>
+
           <Field
             name="reason"
             label={fromCopy(copy, 'moderationForm.report.label')}
             description={fromCopy(copy, 'moderationForm.report.hint')}
           >
-            {(control) => (
-              <Textarea {...control} required defaultValue={state.values?.reason ?? ''} />
-            )}
+            {(control) => <Textarea {...control} defaultValue={state.values?.reason ?? ''} />}
           </Field>
 
           <div>
@@ -68,7 +87,7 @@ export function AssignReportForm({
       <input type="hidden" name="take" value={mine ? '0' : '1'} />
       <PendingButton
         showWorking
-        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"
+        className={`${textLinkVariants({ size: 'xs' })} focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring`}
       >
         {mine
           ? fromCopy(copy, 'moderationForm.report.putBack')

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

@@ -6,6 +6,7 @@ import { EMPTY_STATE } from '@/server/auth-form-state'
 import { threadToolAction } from '@/server/thread-tool-actions'
 
 import { FormError, PendingButton } from '../auth/form-controls'
+import { ConfirmDialog } from '../shell/confirm-dialog'
 import { type Copy, fromCopy } from '../shell/copy'
 
 const BUTTON =
@@ -101,6 +102,7 @@ export function ThreadToolsForm({
       </div>
 
       <FormError message={state.error} />
+      <ConfirmDialog confirm={state.confirm} action={action} />
     </section>
   )
 }

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

@@ -7,7 +7,9 @@ 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) {
+import { NoticeToast } from './notice-toast'
+
+async function NoticeBanner({ kind, message, dismissHref }: NoticeModel) {
   const theme = await currentTheme()
   const Notice = requireSlot(theme, 'Notice')
 
@@ -19,3 +21,22 @@ export async function BoardNotice({ kind, message, dismissHref }: NoticeModel) {
 
   return <Notice {...model} copy={slotCopy(theme, 'Notice', await getTranslator())} />
 }
+
+export async function BoardNotice({ kind, message, dismissHref }: NoticeModel) {
+  return (
+    <>
+      <noscript
+        dangerouslySetInnerHTML={{
+          __html:
+            '<style>[data-notice="toast"]{display:none!important}[data-notice="banner"]{display:block!important}</style>',
+        }}
+      />
+
+      <NoticeToast kind={kind} message={message} dismissHref={dismissHref} />
+
+      <div data-notice="banner" className="hidden">
+        <NoticeBanner kind={kind} message={message} dismissHref={dismissHref} />
+      </div>
+    </>
+  )
+}

package/src/components/shell/confirm-dialog.tsx

@@ -0,0 +1,93 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+
+import { AlertDialog } from '@meith/ui/dialog'
+
+import type { ConfirmRequest } from '@/server/auth-form-state'
+
+import { PendingButton } from '../auth/form-controls'
+import { fromCopy, useCopy } from './copy'
+
+const CONFIRM_BUTTON =
+  'inline-flex h-9 items-center justify-center rounded-md border border-destructive/30 bg-destructive/10 px-3 text-sm font-medium text-destructive transition-colors hover:bg-destructive/20 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring disabled:cursor-not-allowed disabled:opacity-60'
+
+const CANCEL_BUTTON =
+  'inline-flex h-9 items-center justify-center rounded-md border border-border px-3 text-sm font-medium transition-colors hover:bg-muted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring'
+
+export function ConfirmDialog({
+  confirm,
+  action,
+}: {
+  confirm: ConfirmRequest | undefined
+  action: (formData: FormData) => void
+}) {
+  const copy = useCopy()
+  const [open, setOpen] = useState(false)
+
+  useEffect(() => {
+    if (confirm !== undefined) setOpen(true)
+  }, [confirm])
+
+  if (confirm === undefined) return null
+
+  const hidden = confirm.fields.map((field, index) => {
+    const fieldKey = `${index}:${field.name}`
+    return <input key={fieldKey} type="hidden" name={field.name} value={field.value} />
+  })
+
+  const confirmLabel = fromCopy(copy, 'confirm.confirm')
+
+  return (
+    <>
+      <noscript
+        dangerouslySetInnerHTML={{
+          __html:
+            '<style>[data-confirm="dialog"]{display:none}[data-confirm="plain"]{display:flex!important}</style>',
+        }}
+      />
+
+      <span data-confirm="dialog">
+        <AlertDialog.Root open={open} onOpenChange={setOpen}>
+          <AlertDialog.Portal>
+            <AlertDialog.Backdrop className="fixed inset-0 z-50 bg-foreground/40 transition-opacity duration-100 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0" />
+            <AlertDialog.Popup className="fixed left-1/2 top-1/2 z-50 flex w-[min(28rem,calc(100vw-2rem))] -translate-x-1/2 -translate-y-1/2 flex-col gap-4 rounded-lg border border-border bg-card p-5 text-card-foreground shadow-lg transition-[opacity,transform] duration-100 ease-out data-[ending-style]:scale-95 data-[ending-style]:opacity-0 data-[starting-style]:scale-95 data-[starting-style]:opacity-0">
+              <AlertDialog.Title className="text-base font-semibold">
+                {fromCopy(copy, 'confirm.heading')}
+              </AlertDialog.Title>
+              <AlertDialog.Description className="text-sm text-muted-foreground">
+                {confirm.message}
+              </AlertDialog.Description>
+              <div className="flex justify-end gap-2">
+                <AlertDialog.Close className={CANCEL_BUTTON}>
+                  {fromCopy(copy, 'confirm.cancel')}
+                </AlertDialog.Close>
+                <form action={action}>
+                  {hidden}
+                  <input type="hidden" name="confirmed" value="1" />
+                  <PendingButton showWorking className={CONFIRM_BUTTON}>
+                    {confirmLabel}
+                  </PendingButton>
+                </form>
+              </div>
+            </AlertDialog.Popup>
+          </AlertDialog.Portal>
+        </AlertDialog.Root>
+      </span>
+
+      <div
+        data-confirm="plain"
+        className="hidden flex-col gap-3 rounded-md border border-destructive/40 bg-destructive/5 p-4"
+      >
+        <p className="text-sm text-card-foreground">{confirm.message}</p>
+        <form action={action}>
+          {hidden}
+          <input type="hidden" name="confirmed" value="1" />
+          <PendingButton showWorking className={CONFIRM_BUTTON}>
+            {confirmLabel}
+          </PendingButton>
+        </form>
+      </div>
+    </>
+  )
+}

package/src/components/shell/nav-disclosure-enhancer.tsx

@@ -0,0 +1,36 @@
+'use client'
+
+import { useEffect } from 'react'
+
+const OPEN_DISCLOSURES = '[data-nav-disclosure][open]'
+
+export function NavDisclosureEnhancer() {
+  useEffect(() => {
+    function onPointerDown(event: PointerEvent) {
+      const target = event.target
+      if (!(target instanceof Node)) return
+
+      for (const details of document.querySelectorAll<HTMLDetailsElement>(OPEN_DISCLOSURES)) {
+        if (!details.contains(target)) details.open = false
+      }
+    }
+
+    function onKeyDown(event: KeyboardEvent) {
+      if (event.key !== 'Escape') return
+
+      for (const details of document.querySelectorAll<HTMLDetailsElement>(OPEN_DISCLOSURES)) {
+        details.open = false
+      }
+    }
+
+    document.addEventListener('pointerdown', onPointerDown)
+    document.addEventListener('keydown', onKeyDown)
+
+    return () => {
+      document.removeEventListener('pointerdown', onPointerDown)
+      document.removeEventListener('keydown', onKeyDown)
+    }
+  }, [])
+
+  return null
+}

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

@@ -0,0 +1,40 @@
+'use client'
+
+import { useCallback, useEffect, useState } from 'react'
+
+import { Toast, type ToastTone } from '@meith/ui/toast'
+
+import { fromCopy, useCopy } from './copy'
+
+export function NoticeToast({
+  kind,
+  message,
+  dismissHref,
+}: {
+  kind: ToastTone
+  message: string
+  dismissHref: string | null
+}) {
+  const copy = useCopy()
+  const [mounted, setMounted] = useState(false)
+
+  useEffect(() => setMounted(true), [])
+
+  const clearNotice = useCallback(() => {
+    if (dismissHref === null || typeof window === 'undefined') return
+    window.history.replaceState(window.history.state, '', dismissHref)
+  }, [dismissHref])
+
+  if (!mounted) return null
+
+  return (
+    <div
+      data-notice="toast"
+      className="pointer-events-none fixed inset-x-0 bottom-4 z-50 flex justify-center px-4"
+    >
+      <Toast tone={kind} dismissLabel={fromCopy(copy, 'notice.dismiss')} onDismiss={clearNotice}>
+        {message}
+      </Toast>
+    </div>
+  )
+}

package/src/components/shell/notification-menu.tsx

@@ -2,6 +2,7 @@
 
 import { useActionState } from 'react'
 
+import { TextLink } from '@meith/ui'
 import { Popover } from '@meith/ui/popover'
 import { Tabs } from '@meith/ui/tabs'
 
@@ -223,12 +224,13 @@ function Panel({ tab, copy }: { tab: NotificationMenuTab; copy: Copy }) {
       )}
 
       <div className="flex items-center justify-between gap-2 border-t border-border px-2 pt-2">
-        <a
+        <TextLink
           href={tab.allHref}
-          className="rounded-md px-2 py-1 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"
+          size="xs"
+          className="rounded-md px-2 py-1 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
         >
           {fromCopy(copy, 'board.notificationMenu.viewAll')}
-        </a>
+        </TextLink>
 
         {unreadRows.length > 0 && (
           <SeenForm

package/src/components/shell/page-shell.tsx

@@ -4,6 +4,7 @@ import { requireSlot, slotCopy } from '@meith/theme-kit'
 
 import { LogoutForm } from '@/components/account/logout-form'
 import { InstallBanner } from '@/components/shell/install-banner'
+import { NavDisclosureEnhancer } from '@/components/shell/nav-disclosure-enhancer'
 import { NotificationMenu } from '@/components/shell/notification-menu'
 import { OnboardingBanner } from '@/components/shell/onboarding-banner'
 import { ThemeSwitcher } from '@/components/shell/theme-switcher'
@@ -152,6 +153,8 @@ export async function PageShell({ actor, children }: { actor: Actor; children: R
         </UserPanel>
       </Header>
 
+      <NavDisclosureEnhancer />
+
       {await boardRegion('header.notice', actor)}
 
       {install !== null && <InstallBanner {...install} />}

package/src/components/shell/scheme-toggle.tsx

@@ -0,0 +1,72 @@
+'use client'
+
+import { useActionState } from 'react'
+
+import { setSchemeAction } from '@/server/appearance-actions'
+import {
+  COLOUR_SCHEMES,
+  type ColourSchemePreference,
+  colorSchemeProperty,
+  schemeClass,
+} from '@/view/theme-preference'
+
+import { PendingButton } from '../auth/form-controls'
+import { ProgressiveMarker } from '../content/progressive-marker'
+
+const EMPTY: { scheme?: ColourSchemePreference } = {}
+
+function applySchemeImmediately(scheme: ColourSchemePreference): void {
+  const root = document.documentElement
+  root.classList.remove('light', 'dark')
+  const applied = schemeClass(scheme)
+  if (applied !== '') root.classList.add(applied)
+  root.style.colorScheme = colorSchemeProperty(scheme)
+}
+
+export function SchemeToggle({
+  scheme,
+  groupLabel,
+  labels,
+  icons,
+}: {
+  scheme: ColourSchemePreference
+  groupLabel: string
+  labels: Readonly<Record<ColourSchemePreference, string>>
+  icons: Readonly<Record<ColourSchemePreference, React.ReactNode>>
+}) {
+  const [state, action] = useActionState(setSchemeAction, EMPTY)
+  const current = state.scheme ?? scheme
+
+  return (
+    <form action={action}>
+      <ProgressiveMarker />
+      <span
+        role="group"
+        aria-label={groupLabel}
+        className="inline-flex items-center overflow-hidden rounded-md border border-border text-muted-foreground"
+      >
+        {COLOUR_SCHEMES.map((option) => {
+          const selected = current === option
+          return (
+            <PendingButton
+              key={option}
+              name="scheme"
+              value={option}
+              title={labels[option]}
+              aria-pressed={selected}
+              onClick={() => applySchemeImmediately(option)}
+              className={`inline-flex h-8 items-center justify-center border-border px-2.5 transition-colors [&:not(:first-child)]:border-l focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring ${
+                selected
+                  ? 'bg-primary text-primary-foreground'
+                  : 'bg-background hover:bg-accent hover:text-accent-foreground'
+              }`}
+            >
+              {icons[option]}
+              <span className="sr-only">{labels[option]}</span>
+            </PendingButton>
+          )
+        })}
+      </span>
+    </form>
+  )
+}

package/src/components/shell/theme-switcher.tsx

@@ -1,17 +1,12 @@
 import { PendingButton } from '@/components/auth/form-controls'
 import { MonitorIcon, MoonIcon, SunIcon } from '@/components/shell/appearance-icons'
+import { SchemeToggle } from '@/components/shell/scheme-toggle'
 import { setAppearanceAction } from '@/server/appearance-actions'
 import { getTranslator } from '@/server/i18n'
 import { currentColourScheme, currentThemeKey } from '@/server/theme'
 import { getBoardThemeStyle } from '@/server/theme-runtime'
 import { COLOUR_SCHEMES, type ColourSchemePreference } from '@/view/theme-preference'
 
-const SCHEME_ICON: Record<ColourSchemePreference, () => React.ReactNode> = {
-  light: SunIcon,
-  system: MonitorIcon,
-  dark: MoonIcon,
-}
-
 const SCHEME_LABEL_KEY: Record<ColourSchemePreference, string> = {
   system: 'appearance.scheme.system',
   light: 'appearance.scheme.light',
@@ -29,6 +24,15 @@ export async function ThemeSwitcher() {
     getTranslator(),
   ])
 
+  const icons: Record<ColourSchemePreference, React.ReactNode> = {
+    light: <SunIcon />,
+    system: <MonitorIcon />,
+    dark: <MoonIcon />,
+  }
+  const labels = Object.fromEntries(
+    COLOUR_SCHEMES.map((option) => [option, t.t(SCHEME_LABEL_KEY[option])]),
+  ) as Record<ColourSchemePreference, string>
+
   return (
     <section
       aria-label={t.t('appearance.section')}
@@ -55,36 +59,12 @@ export async function ThemeSwitcher() {
         </form>
       )}
 
-      <form action={setAppearanceAction}>
-        <span
-          role="group"
-          aria-label={t.t('appearance.schemeGroup')}
-          className="inline-flex items-center overflow-hidden rounded-md border border-border text-muted-foreground"
-        >
-          {COLOUR_SCHEMES.map((option) => {
-            const Icon = SCHEME_ICON[option]
-            const label = t.t(SCHEME_LABEL_KEY[option])
-            const selected = scheme === option
-            return (
-              <PendingButton
-                key={option}
-                name="scheme"
-                value={option}
-                title={label}
-                aria-pressed={selected}
-                className={`inline-flex h-8 items-center justify-center border-border px-2.5 transition-colors [&:not(:first-child)]:border-l focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring ${
-                  selected
-                    ? 'bg-primary text-primary-foreground'
-                    : 'bg-background hover:bg-accent hover:text-accent-foreground'
-                }`}
-              >
-                <Icon />
-                <span className="sr-only">{label}</span>
-              </PendingButton>
-            )
-          })}
-        </span>
-      </form>
+      <SchemeToggle
+        scheme={scheme}
+        groupLabel={t.t('appearance.schemeGroup')}
+        labels={labels}
+        icons={icons}
+      />
     </section>
   )
 }

package/src/server/admin-settings-actions.ts

@@ -18,6 +18,7 @@ import { recordAdminAction, requireAdmin } from './admin'
 import type { FormState } from './auth-form-state'
 import { tr } from './i18n'
 import { emitEvent } from './plugin-view'
+import { searchProvider } from './search'
 import { getSettings } from './settings'
 
 function submittedKeys(form: FormData): readonly SettingDefinition[] {
@@ -59,6 +60,10 @@ export async function saveAdminSettingsAction(
       await getSettings(),
     )
 
+    if (result.changed.includes('search.language')) {
+      await searchProvider()?.markForReindex()
+    }
+
     if (result.changed.length > 0) {
       const tags = [CacheTags.settings(), ...result.invalidates]
       await drivers().cache.invalidateTags(tags)

package/src/server/api/search.ts

@@ -13,7 +13,13 @@ import {
 
 import { filterWords } from '../../view/word-filter'
 import { activeWordFilter } from '../content-admin'
-import { requireSearch, requireSearchEnabled, searchMinWordLength, searchScopeFor } from '../search'
+import {
+  requireSearch,
+  requireSearchEnabled,
+  searchLanguage,
+  searchMinWordLength,
+  searchScopeFor,
+} from '../search'
 import {
   type ApiResult,
   type ApiRoutes,
@@ -55,7 +61,7 @@ export const SEARCH_HANDLERS: ApiRoutes = [
       const forumIds = ids('forum')
       const authorUserIds = ids('by')
 
-      const results = await requireSearch().search(
+      const results = await requireSearch(await searchLanguage()).search(
         searchQueryFrom(
           parsed.terms,
           {

package/src/server/api-token-actions.ts

@@ -8,6 +8,7 @@ import { msg } from '@meith/i18n'
 import { recordAdminAction, requireAdmin, requireFreshAdmin } from './admin'
 import { apiTokenStore, issueApiToken } from './api-tokens-admin'
 import type { FormState } from './auth-form-state'
+import { requireConfirmation } from './confirm'
 import { getMessageResolver, tr } from './i18n'
 
 function field(form: FormData, name: string): string {
@@ -69,6 +70,9 @@ export async function revokeApiTokenAction(_prev: FormState, form: FormData): Pr
     const id = Number(field(form, 'tokenId'))
     if (!Number.isSafeInteger(id) || id <= 0) return { error: await tr('notice.app.such-token') }
 
+    const confirm = requireConfirmation(form, await tr('adminPanel.token.confirmRevoke'))
+    if (confirm !== null) return confirm
+
     const store = apiTokenStore()
     if (store === null) return { error: await tr('notice.app.board-database-api') }
 

package/src/server/appearance-actions.ts

@@ -2,7 +2,9 @@
 
 import { cookies } from 'next/headers'
 
+import { isEnhancedSubmit } from '@/view/progressive-enhancement'
 import {
+  type ColourSchemePreference,
   isColourScheme,
   PREFERENCE_COOKIE_MAX_AGE,
   SCHEME_COOKIE,
@@ -37,3 +39,22 @@ export async function setAppearanceAction(form: FormData): Promise<void> {
 
   await redirectToCurrentPath()
 }
+
+export interface SchemeState {
+  readonly scheme?: ColourSchemePreference | undefined
+}
+
+export async function setSchemeAction(_prev: SchemeState, form: FormData): Promise<SchemeState> {
+  const raw = form.get('scheme')
+  const scheme = typeof raw === 'string' && isColourScheme(raw) ? raw : null
+
+  if (scheme !== null) {
+    const jar = await cookies()
+    jar.set(SCHEME_COOKIE, scheme, COOKIE_OPTIONS)
+  }
+
+  if (isEnhancedSubmit(form)) return { scheme: scheme ?? undefined }
+
+  await redirectToCurrentPath()
+  return {}
+}

package/src/server/attachments.ts

@@ -129,6 +129,41 @@ export async function stageAttachments(
   return service.stage(accepted)
 }
 
+export async function resolveEditAttachmentScope(
+  actor: Actor,
+  forumId: number,
+): Promise<AttachmentScope> {
+  const { authorizer, threadWrites } = getContainer()
+  const rules = threadWrites === null ? null : await threadWrites.postingRules(forumId)
+
+  return {
+    forumId,
+    forum: await authorizer.forumMatrix(actor, forumId),
+    allowsAttachments: rules?.allowAttachments === true,
+  }
+}
+
+export async function removeAttachmentsFromPost(
+  ids: readonly number[],
+  post: { readonly postId: number; readonly userId: number },
+): Promise<readonly AttachmentRecord[]> {
+  const service = attachmentService()
+  if (service === null || ids.length === 0) return []
+
+  const removed: AttachmentRecord[] = []
+  for (const id of ids) {
+    const record = await service.removeFromPost(id, post.postId)
+    if (record === null) continue
+    removed.push(record)
+    await emitEvent(
+      'attachment.deleted',
+      { attachmentId: record.id },
+      { userId: post.userId, isGuest: false },
+    )
+  }
+  return removed
+}
+
 export async function attachStaged(
   staged: readonly StagedUpload[],
   post: { readonly postId: number; readonly forumId: number; readonly userId: number },

package/src/server/auth-actions.ts

@@ -20,6 +20,7 @@ import { recordAuthEvent } from './auth-events'
 import type { FormState } from './auth-form-state'
 import { sendPasswordResetEmail, sendVerificationEmail } from './auth-mail'
 import { configuredIdentity, configuredSessions, getContainer } from './container'
+import { revokeFeedToken } from './feed-token'
 import { formStateReporter } from './form-state-reporter'
 import { getTranslator, tr } from './i18n'
 import { termsAcceptance } from './legal'
@@ -477,6 +478,7 @@ export async function confirmResetAction(_prev: FormState, form: FormData): Prom
   const identity = await configuredIdentity()
   try {
     const { userId } = await identity.redeemPasswordReset(token, password)
+    await revokeFeedToken(userId)
     await recordAuthEvent({ userId, kind: 'password_reset' })
   } catch (err) {
     return toFormState(err, { token })

package/src/server/auth-form-state.ts

@@ -3,12 +3,40 @@ export interface UndoState {
   readonly expiresAt: string
 }
 
+export interface ConfirmField {
+  readonly name: string
+  readonly value: string
+}
+
+export interface ConfirmRequest {
+  readonly message: string
+  readonly fields: readonly ConfirmField[]
+}
+
+export interface PollDraftValues {
+  readonly question: string
+  readonly options: readonly string[]
+  readonly closesAt: string
+  readonly maxOptions: string
+  readonly allowRevote: boolean
+  readonly publicVotes: boolean
+}
+
+export interface ThanksResult {
+  readonly thanked: boolean
+  readonly count: number
+}
+
 export interface FormState {
   readonly error?: string | undefined
   readonly notice?: string | undefined
   readonly values?: Record<string, string> | undefined
+  readonly poll?: PollDraftValues | undefined
   readonly preview?: string | undefined
   readonly undo?: UndoState | undefined
+  readonly confirm?: ConfirmRequest | undefined
+  readonly thanks?: ThanksResult | undefined
+  readonly subscribed?: boolean | undefined
 }
 
 export const EMPTY_STATE: FormState = {}