@meith/web 0.30.1 → 0.32.0

package/src/components/content/markdown-editor.tsx

@@ -13,15 +13,13 @@ import {
   uploadInlineAttachmentAction,
 } from '@/server/attachment-upload-actions'
 import { type PreviewScope, renderPreviewAction } from '@/server/content-actions'
-import { searchMentionCandidatesAction } from '@/server/mention-actions'
 
 import { type Copy, formatFromCopy, fromCopy, useCopy } from '../shell/copy'
 import { attachmentFieldId, MESSAGE_TEXTAREA_ID } from './composer-ids'
 import { listContinuation, pasteAsLink } from './markdown-syntax'
+import { useMentionCombobox } from './mention-combobox'
 import { activeMentionToken, type MentionToken } from './mention-token'
 
-const MENTION_DEBOUNCE_MS = 150
-
 interface Tool {
   readonly tag: EditorTag
   readonly labelKey: string
@@ -52,6 +50,12 @@ const TOOLS: readonly Tool[] = [
     placeholderKey: 'composer.placeholder.struck',
   },
   { tag: 'link', labelKey: 'composer.tool.link', glyph: 'Link', shortcut: 'k' },
+  {
+    tag: 'image',
+    labelKey: 'composer.tool.image',
+    glyph: 'Image',
+    placeholderKey: 'composer.placeholder.image',
+  },
   { tag: 'quote', labelKey: 'composer.tool.quote', glyph: '“”' },
   { tag: 'code', labelKey: 'composer.tool.code', glyph: '</>' },
   {
@@ -62,7 +66,14 @@ const TOOLS: readonly Tool[] = [
   },
   { tag: 'bulletedList', labelKey: 'composer.tool.bulletedList', glyph: '•' },
   { tag: 'numberedList', labelKey: 'composer.tool.numberedList', glyph: '1.' },
+  { tag: 'taskList', labelKey: 'composer.tool.taskList', glyph: '☑' },
   { tag: 'heading', labelKey: 'composer.tool.heading', glyph: 'H' },
+  {
+    tag: 'table',
+    labelKey: 'composer.tool.table',
+    glyph: 'Table',
+    placeholderKey: 'composer.placeholder.table',
+  },
 ]
 
 function runTool(field: HTMLTextAreaElement, tool: Tool, copy: Copy): void {
@@ -122,10 +133,14 @@ export function MarkdownEditor({
 
   const mentions = scope === 'post'
   const [mentionToken, setMentionToken] = useState<MentionToken | null>(null)
-  const [mentionMatches, setMentionMatches] = useState<readonly MemberSuggestion[]>([])
-  const [mentionActive, setMentionActive] = useState(0)
-  const latestMentionToken = useRef(mentionToken)
-  latestMentionToken.current = mentionToken
+
+  const combobox = useMentionCombobox({
+    query: mentionToken?.query ?? null,
+    onChoose: (candidate) => {
+      if (field.current !== null) applyMention(field.current, candidate)
+    },
+    onDismiss: () => setMentionToken(null),
+  })
 
   const fit = useCallback(() => {
     const element = field.current
@@ -159,23 +174,6 @@ export function MarkdownEditor({
     }
   }
 
-  useEffect(() => {
-    if (mentionToken === null) {
-      setMentionMatches([])
-      return
-    }
-
-    const handle = setTimeout(() => {
-      void searchMentionCandidatesAction(mentionToken.query).then((matches) => {
-        if (latestMentionToken.current !== mentionToken) return
-        setMentionMatches(matches)
-        setMentionActive(0)
-      })
-    }, MENTION_DEBOUNCE_MS)
-
-    return () => clearTimeout(handle)
-  }, [mentionToken])
-
   function syncMentionToken(element: HTMLTextAreaElement): void {
     if (!mentions) return
     const found =
@@ -243,28 +241,7 @@ export function MarkdownEditor({
   function onKeyDown(event: React.KeyboardEvent<HTMLTextAreaElement>): void {
     const element = event.currentTarget
 
-    if (mentionToken !== null && mentionMatches.length > 0) {
-      if (event.key === 'ArrowDown') {
-        event.preventDefault()
-        setMentionActive((index) => (index + 1) % mentionMatches.length)
-        return
-      }
-      if (event.key === 'ArrowUp') {
-        event.preventDefault()
-        setMentionActive((index) => (index - 1 + mentionMatches.length) % mentionMatches.length)
-        return
-      }
-      if (event.key === 'Escape') {
-        event.preventDefault()
-        setMentionToken(null)
-        return
-      }
-      if ((event.key === 'Enter' || event.key === 'Tab') && !event.metaKey && !event.ctrlKey) {
-        event.preventDefault()
-        applyMention(element, mentionMatches[mentionActive]!)
-        return
-      }
-    }
+    if (combobox.handleKeyDown(event)) return
 
     if (event.key === 'Enter' && (event.metaKey || event.ctrlKey)) {
       element.form?.requestSubmit()
@@ -449,52 +426,15 @@ export function MarkdownEditor({
             }}
             onSelect={(event) => syncMentionToken(event.currentTarget)}
             onBlur={() => setMentionToken(null)}
-            {...(enhanced && mentionToken !== null && mentionMatches.length > 0
-              ? {
-                  role: 'combobox',
-                  'aria-expanded': true,
-                  'aria-controls': `${panelId}-mentions`,
-                  'aria-activedescendant': `${panelId}-mention-${mentionActive}`,
-                  'aria-autocomplete': 'list' as const,
-                }
-              : {})}
+            {...(enhanced ? combobox.anchorProps : {})}
             className={cn(
               'w-full rounded-md border border-input bg-card px-3 py-2 font-normal text-sm leading-relaxed focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring',
               onWriteTab && 'rounded-t-none border-t-0',
             )}
           />
 
-          {enhanced && mentionToken !== null && mentionMatches.length > 0 && (
-            <div
-              id={`${panelId}-mentions`}
-              role="listbox"
-              aria-label={fromCopy(copy, 'composer.mention.suggestions')}
-              className="absolute inset-x-0 top-full z-10 mt-1 max-h-48 overflow-y-auto rounded-md border border-border bg-card py-1 text-sm shadow-lg"
-            >
-              {mentionMatches.map((candidate, index) => (
-                <button
-                  key={candidate.id}
-                  type="button"
-                  id={`${panelId}-mention-${index}`}
-                  role="option"
-                  aria-selected={index === mentionActive}
-                  onMouseDown={(event) => event.preventDefault()}
-                  onClick={() => {
-                    if (field.current !== null) applyMention(field.current, candidate)
-                  }}
-                  onMouseEnter={() => setMentionActive(index)}
-                  className={cn(
-                    'block w-full px-3 py-1.5 text-start',
-                    index === mentionActive
-                      ? 'bg-muted text-foreground'
-                      : 'text-foreground hover:bg-muted',
-                  )}
-                >
-                  @{candidate.username}
-                </button>
-              ))}
-            </div>
-          )}
+          {enhanced && combobox.listbox}
+          {enhanced && combobox.liveRegion}
         </div>
       </div>
 
@@ -577,8 +517,11 @@ function FormattingHelp({ scope }: { scope: PreviewScope }) {
     ['```', 'composer.help.codeBlock'],
     ['> quoted', 'composer.help.quote'],
     ['- item', 'composer.help.list'],
+    ['- [ ] task', 'composer.help.taskList'],
     ['## Heading', 'composer.help.heading'],
+    ['| a | b |', 'composer.help.table'],
     [':::spoiler', 'composer.help.spoiler'],
+    ['![alt](url)', 'composer.help.image'],
     ['@name', 'composer.help.mention'],
     ['[attachment=id]', 'composer.help.attachment'],
   ]

package/src/components/content/mention-combobox.tsx

@@ -0,0 +1,137 @@
+'use client'
+
+import {
+  type AriaAttributes,
+  type AriaRole,
+  type KeyboardEvent,
+  type ReactNode,
+  useEffect,
+  useId,
+  useRef,
+  useState,
+} from 'react'
+
+import type { MemberSuggestion } from '@meith/accounts'
+import { cn } from '@meith/ui'
+
+import { searchMentionCandidatesAction } from '@/server/mention-actions'
+
+import { formatFromCopy, fromCopy, useCopy } from '../shell/copy'
+import { comboboxKeyAction } from './combobox-keys'
+
+const SEARCH_DEBOUNCE_MS = 150
+
+export type AnchorProps = AriaAttributes & { readonly role?: AriaRole }
+
+export interface MentionCombobox {
+  readonly open: boolean
+  readonly anchorProps: AnchorProps
+  readonly handleKeyDown: (event: KeyboardEvent) => boolean
+  readonly listbox: ReactNode
+  readonly liveRegion: ReactNode
+}
+
+export interface MentionComboboxOptions {
+  readonly query: string | null
+  readonly onChoose: (candidate: MemberSuggestion) => void
+  readonly onDismiss: () => void
+  readonly label?: (candidate: MemberSuggestion) => string
+  readonly listboxLabel?: string
+}
+
+export function useMentionCombobox({
+  query,
+  onChoose,
+  onDismiss,
+  label,
+  listboxLabel,
+}: MentionComboboxOptions): MentionCombobox {
+  const copy = useCopy()
+  const listboxId = useId()
+
+  const [matches, setMatches] = useState<readonly MemberSuggestion[]>([])
+  const [active, setActive] = useState(0)
+
+  const latestQuery = useRef(query)
+  latestQuery.current = query
+
+  useEffect(() => {
+    if (query === null) {
+      setMatches([])
+      return
+    }
+
+    const handle = setTimeout(() => {
+      void searchMentionCandidatesAction(query).then((found) => {
+        if (latestQuery.current !== query) return
+        setMatches(found)
+        setActive(0)
+      })
+    }, SEARCH_DEBOUNCE_MS)
+
+    return () => clearTimeout(handle)
+  }, [query])
+
+  const open = query !== null && matches.length > 0
+  const optionId = (index: number): string => `${listboxId}-option-${index}`
+  const render = label ?? ((candidate: MemberSuggestion): string => `@${candidate.username}`)
+
+  function handleKeyDown(event: KeyboardEvent): boolean {
+    if (!open) return false
+
+    const action = comboboxKeyAction(event, { count: matches.length, active })
+    if (action === null) return false
+
+    event.preventDefault()
+    if (action.type === 'move') setActive(action.active)
+    else if (action.type === 'dismiss') onDismiss()
+    else onChoose(matches[action.index]!)
+    return true
+  }
+
+  const anchorProps: AnchorProps = open
+    ? {
+        role: 'combobox',
+        'aria-expanded': true,
+        'aria-controls': listboxId,
+        'aria-activedescendant': optionId(active),
+        'aria-autocomplete': 'list',
+      }
+    : {}
+
+  const listbox = open ? (
+    <div
+      id={listboxId}
+      role="listbox"
+      aria-label={listboxLabel ?? fromCopy(copy, 'composer.mention.suggestions')}
+      className="absolute inset-x-0 top-full z-10 mt-1 max-h-48 overflow-y-auto rounded-md border border-border bg-card py-1 text-sm shadow-lg"
+    >
+      {matches.map((candidate, index) => (
+        <button
+          key={candidate.id}
+          type="button"
+          id={optionId(index)}
+          role="option"
+          aria-selected={index === active}
+          onMouseDown={(event) => event.preventDefault()}
+          onClick={() => onChoose(candidate)}
+          onMouseEnter={() => setActive(index)}
+          className={cn(
+            'block w-full px-3 py-1.5 text-start',
+            index === active ? 'bg-muted text-foreground' : 'text-foreground hover:bg-muted',
+          )}
+        >
+          {render(candidate)}
+        </button>
+      ))}
+    </div>
+  ) : null
+
+  const liveRegion = (
+    <p role="status" aria-live="polite" className="sr-only">
+      {open ? formatFromCopy(copy, 'composer.mention.available', { count: matches.length }) : ''}
+    </p>
+  )
+
+  return { open, anchorProps, handleKeyDown, listbox, liveRegion }
+}

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

@@ -3,6 +3,7 @@
 import { useEffect, useState } from 'react'
 
 import { buttonVariants, cn } from '@meith/ui'
+import { Tooltip } from '@meith/ui/tooltip'
 
 import { fromCopy, useCopy } from '../shell/copy'
 import { toggleMultiquote, useMultiquote } from './multiquote'
@@ -16,17 +17,19 @@ export function MultiQuoteButton({ postId }: { postId: number }) {
   if (!enhanced) return null
 
   return (
-    <button
-      type="button"
-      aria-pressed={held}
-      onClick={() => toggleMultiquote(postId, copy)}
-      className={cn(
-        buttonVariants({ variant: held ? 'secondary' : 'ghost', size: 'sm' }),
-        held && 'text-foreground',
-      )}
-    >
-      <span aria-hidden="true">{held ? '✓' : '+'}</span>
-      {fromCopy(copy, 'composer.multiquote.button')}
-    </button>
+    <Tooltip label={fromCopy(copy, 'composer.multiquote.tooltip')}>
+      <button
+        type="button"
+        aria-pressed={held}
+        onClick={() => toggleMultiquote(postId, copy)}
+        className={cn(
+          buttonVariants({ variant: held ? 'secondary' : 'ghost', size: 'sm' }),
+          held && 'text-foreground',
+        )}
+      >
+        <span aria-hidden="true">{held ? '✓' : '+'}</span>
+        {fromCopy(copy, 'composer.multiquote.button')}
+      </button>
+    </Tooltip>
   )
 }

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

@@ -1,16 +1,18 @@
 'use client'
 
 import type { ReactNode } from 'react'
-import { useActionState } from 'react'
+import { useActionState, useEffect, useState } from 'react'
 
 import type { UploadLimits } from '@meith/attachments/limits'
 import type { Draft } from '@meith/drafts'
-import { Disclosure } from '@meith/ui'
+import { POLL_OPTION_MAX } from '@meith/polls/limits'
+import { buttonVariants, Disclosure } from '@meith/ui'
 
+import type { PollDraftValues } from '@/server/auth-form-state'
 import { EMPTY_STATE } from '@/server/auth-form-state'
 import { createThreadAction } from '@/server/content-actions'
 
-import { Field, FormError, SubmitButton } from '../auth/form-controls'
+import { Field, FormError, PendingButton, SubmitButton } from '../auth/form-controls'
 import { type Copy, formatFromCopy, fromCopy } from '../shell/copy'
 import { AttachmentField } from './attachment-field'
 import { ComposerIntents } from './composer-intents'
@@ -22,11 +24,61 @@ export interface PrefixOption {
   readonly label: string
 }
 
+const POLL_OPTION_STARTING_SLOTS = 4
+const POLL_OPTION_ADD_STEP = 4
+
+function PollOptionFields({
+  pollDraft,
+  copy,
+}: {
+  pollDraft: PollDraftValues | undefined
+  copy: Copy
+}) {
+  const [slots, setSlots] = useState(() =>
+    Math.max(pollDraft?.options.length ?? 0, POLL_OPTION_STARTING_SLOTS),
+  )
+
+  useEffect(() => {
+    setSlots(Math.max(pollDraft?.options.length ?? 0, POLL_OPTION_STARTING_SLOTS))
+  }, [pollDraft])
+
+  const atMax = slots >= POLL_OPTION_MAX
+
+  return (
+    <>
+      {Array.from({ length: slots }, (_, index) => (
+        <Field
+          // biome-ignore lint/suspicious/noArrayIndexKey: slots are appended only, in stable order — the index is the slot number
+          key={index}
+          id={`field-pollOption-${index + 1}`}
+          label={formatFromCopy(copy, 'composer.newThread.option', { number: index + 1 })}
+          name="pollOption"
+          maxLength={200}
+          defaultValue={pollDraft?.options[index]}
+        />
+      ))}
+      <PendingButton
+        name="intent"
+        value="more_options"
+        disabled={atMax}
+        onClick={(event) => {
+          event.preventDefault()
+          setSlots((current) => Math.min(current + POLL_OPTION_ADD_STEP, POLL_OPTION_MAX))
+        }}
+        className={buttonVariants({ variant: 'outline', size: 'sm', className: 'w-auto' })}
+      >
+        {fromCopy(copy, 'composer.newThread.morePollOptions')}
+      </PendingButton>
+    </>
+  )
+}
+
 export function NewThreadForm({
   forumId,
   prefixes,
   requiresPrefix,
   canSubscribe,
+  subscribeDefault = false,
   canPostPoll,
   attachmentLimits,
   draft,
@@ -37,6 +89,7 @@ export function NewThreadForm({
   prefixes: readonly PrefixOption[]
   requiresPrefix: boolean
   canSubscribe: boolean
+  subscribeDefault?: boolean
   canPostPoll: boolean
   attachmentLimits: UploadLimits | null
   draft: Draft | null
@@ -44,9 +97,11 @@ export function NewThreadForm({
   copy: Copy
 }) {
   const [state, action] = useActionState(createThreadAction, EMPTY_STATE)
+  const pollDraft = state.poll
 
   const hasPollDraft =
-    (state.values?.pollQuestion ?? '') !== '' || (state.values?.pollOption ?? '') !== ''
+    (pollDraft?.question ?? '') !== '' ||
+    (pollDraft?.options.some((option) => option.trim() !== '') ?? false)
 
   return (
     <form action={action} className="flex flex-col gap-4" noValidate>
@@ -117,16 +172,9 @@ export function NewThreadForm({
             label={fromCopy(copy, 'composer.newThread.question')}
             name="pollQuestion"
             maxLength={250}
+            defaultValue={pollDraft?.question}
           />
-          {[1, 2, 3, 4].map((number) => (
-            <Field
-              key={number}
-              id={`field-pollOption-${number}`}
-              label={formatFromCopy(copy, 'composer.newThread.option', { number })}
-              name="pollOption"
-              maxLength={200}
-            />
-          ))}
+          <PollOptionFields pollDraft={pollDraft} copy={copy} />
           <label className="flex flex-col gap-1 text-sm">
             <span className="font-medium">{fromCopy(copy, 'composer.newThread.pollChoices')}</span>
             <input
@@ -134,7 +182,7 @@ export function NewThreadForm({
               name="pollMaxOptions"
               min={0}
               step={1}
-              defaultValue="1"
+              defaultValue={pollDraft?.maxOptions ?? '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">
@@ -142,19 +190,49 @@ export function NewThreadForm({
             </span>
           </label>
           <label className="flex items-center gap-2 text-sm">
-            <input type="checkbox" name="pollAllowRevote" value="1" className="size-4" />
+            <input
+              type="checkbox"
+              name="pollAllowRevote"
+              value="1"
+              defaultChecked={pollDraft?.allowRevote ?? false}
+              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" />
+            <input
+              type="checkbox"
+              name="pollPublicVotes"
+              value="1"
+              defaultChecked={pollDraft?.publicVotes ?? false}
+              className="size-4"
+            />
             <span>{fromCopy(copy, 'composer.newThread.pollPublic')}</span>
           </label>
+          <label className="flex flex-col gap-1 text-sm">
+            <span className="font-medium">{fromCopy(copy, 'pollEdit.closesAt')}</span>
+            <input
+              type="datetime-local"
+              name="pollClosesAt"
+              defaultValue={pollDraft?.closesAt ?? ''}
+              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, 'pollEdit.closesAtHint')}
+            </span>
+          </label>
         </Disclosure>
       )}
 
       {canSubscribe && (
         <label className="flex items-center gap-2 text-sm">
-          <input type="checkbox" name="subscribe" value="1" className="size-4" />
+          <input
+            type="checkbox"
+            name="subscribe"
+            value="1"
+            defaultChecked={subscribeDefault}
+            className="size-4"
+          />
           <span>{fromCopy(copy, 'composer.notifyReplies')}</span>
         </label>
       )}

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

@@ -1,4 +1,7 @@
+import { Fragment } from 'react'
+
 import { POLL_OPTION_LENGTH_MAX, POLL_QUESTION_MAX, type Poll } from '@meith/polls'
+import { Field, Input } from '@meith/ui'
 
 import { getTranslator } from '@/server/i18n'
 import { editPollAction } from '@/server/poll-actions'
@@ -20,56 +23,75 @@ export async function PollEditForm({ poll, threadId }: { poll: Poll; threadId: n
       <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>
+      <Field label={t.t('pollEdit.question')} name="question">
+        {(control) => (
+          <Input
+            {...control}
+            type="text"
+            required
+            maxLength={POLL_QUESTION_MAX}
+            defaultValue={poll.question}
+          />
+        )}
+      </Field>
 
       {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>
+        <Fragment key={option.id}>
           <input type="hidden" name="optionRef" value={option.id} />
-          <input
-            type="text"
+          <Field
+            id={`field-optionLabel-${option.id}`}
+            label={t.t('pollEdit.option', { number: index + 1 })}
             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>
+            description={
+              option.votes > 0
+                ? t.t('pollEdit.optionVoted', { count: option.votes })
+                : t.t('pollEdit.optionEmpty')
+            }
+          >
+            {(control) => (
+              <Input
+                {...control}
+                type="text"
+                maxLength={POLL_OPTION_LENGTH_MAX}
+                defaultValue={option.label}
+              />
+            )}
+          </Field>
+        </Fragment>
       ))}
 
       {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>
+        <Fragment key={slot}>
           <input type="hidden" name="optionRef" value="" />
-          <input type="text" name="optionLabel" maxLength={POLL_OPTION_LENGTH_MAX} />
-        </label>
+          <Field
+            id={`field-optionLabel-${slot}`}
+            label={t.t('pollEdit.option', { number: poll.options.length + index + 1 })}
+            name="optionLabel"
+          >
+            {(control) => <Input {...control} type="text" maxLength={POLL_OPTION_LENGTH_MAX} />}
+          </Field>
+        </Fragment>
       ))}
 
-      <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>
+      <Field
+        label={t.t('pollEdit.maxOptions')}
+        name="maxOptions"
+        description={t.t('pollEdit.maxOptionsHint')}
+      >
+        {(control) => (
+          <Input {...control} type="number" min={0} step={1} defaultValue={poll.maxOptions} />
+        )}
+      </Field>
 
-      <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>
+      <Field
+        label={t.t('pollEdit.closesAt')}
+        name="closesAt"
+        description={t.t('pollEdit.closesAtHint')}
+      >
+        {(control) => (
+          <Input {...control} type="datetime-local" defaultValue={inputValue(poll.closesAt)} />
+        )}
+      </Field>
 
       <label className="flex items-center gap-2 text-sm">
         <input type="checkbox" name="allowRevote" value="1" defaultChecked={poll.allowRevote} />