@meith/web 0.31.0 → 0.33.0

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} />

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

@@ -0,0 +1,91 @@
+'use client'
+
+import { useActionState } from 'react'
+
+import { votePollAction } from '@/server/poll-actions'
+import type { PollVoteView } from '@/view/poll-vote'
+
+import { PendingButton } from '../auth/form-controls'
+import { type Copy, formatFromCopy } from '../shell/copy'
+import { ProgressiveMarker } from './progressive-marker'
+
+export function PollVoteForm({
+  threadId,
+  pollId,
+  initial,
+  copy,
+}: {
+  threadId: number
+  pollId: number
+  initial: PollVoteView
+  copy: Copy
+}) {
+  const [state, action] = useActionState(votePollAction, initial)
+  const view = state ?? initial
+
+  return (
+    <form action={action} className="mt-3 flex flex-col gap-2">
+      <input type="hidden" name="threadId" value={threadId} />
+      <input type="hidden" name="pollId" value={pollId} />
+      <ProgressiveMarker />
+
+      {view.options.map((option) => (
+        <div key={option.id} className="flex flex-col gap-1">
+          {view.mayCast ? (
+            <label className="flex items-center gap-2 text-sm">
+              <input
+                type={view.multiple ? 'checkbox' : 'radio'}
+                name="optionId"
+                value={option.id}
+                defaultChecked={option.checked}
+              />
+              <span>
+                {option.label} ({option.votes})
+              </span>
+            </label>
+          ) : (
+            <p className="text-sm">
+              {option.label} ({option.votes})
+            </p>
+          )}
+          <div className="flex items-center gap-2 pl-6">
+            <div aria-hidden="true" className="h-2 flex-1 overflow-hidden rounded-full bg-muted">
+              <div
+                className="h-full rounded-full bg-primary"
+                style={{ width: `${option.share}%` }}
+              />
+            </div>
+            <span className="w-9 shrink-0 text-right text-xs text-muted-foreground">
+              {option.share}%
+            </span>
+          </div>
+          {view.publicVotes && option.voterNames.length > 0 && (
+            <p className="pl-6 text-sm text-muted-foreground">
+              {formatFromCopy(copy, 'pollForm.votedBy', { names: option.voterNames.join(', ') })}
+              {option.moreVoters > 0 &&
+                ` ${formatFromCopy(copy, 'pollForm.moreVoters', { count: option.moreVoters })}`}
+            </p>
+          )}
+        </div>
+      ))}
+
+      <p className="text-sm text-muted-foreground">
+        {formatFromCopy(copy, 'pollForm.votes', { count: view.total })}
+      </p>
+
+      {view.mayCast ? (
+        <PendingButton showWorking>
+          {view.hasVoted
+            ? formatFromCopy(copy, 'pollForm.changeVote', {})
+            : formatFromCopy(copy, 'pollForm.vote', {})}
+        </PendingButton>
+      ) : (
+        view.closed && (
+          <p className="text-sm text-muted-foreground">
+            {formatFromCopy(copy, 'pollForm.closed', {})}
+          </p>
+        )
+      )}
+    </form>
+  )
+}

package/src/components/content/poll.tsx

@@ -1,9 +1,14 @@
 import { POLL_CHOICES_UNLIMITED, type Poll } from '@meith/polls'
+import { TextLink } from '@meith/ui'
 
 import { getTranslator } from '@/server/i18n'
-import { votePollAction } from '@/server/poll-actions'
+import { patternCopy } from '@/view/copy'
+import { pollVoteView } from '@/view/poll-vote'
 
-import { PendingButton } from '../auth/form-controls'
+import { PollVoteForm } from './poll-vote-form'
+
+const POLL_VOTE_KEYS = ['pollForm.vote', 'pollForm.changeVote', 'pollForm.closed'] as const
+const POLL_PATTERN_KEYS = ['pollForm.votes', 'pollForm.votedBy', 'pollForm.moreVoters'] as const
 
 export async function PollForm({
   poll,
@@ -16,13 +21,9 @@ export async function PollForm({
   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
+  const initial = pollVoteView(poll, canVote, new Date())
+  const copy = patternCopy([...POLL_VOTE_KEYS, ...POLL_PATTERN_KEYS], t)
 
   return (
     <section
@@ -31,7 +32,7 @@ export async function PollForm({
     >
       <h2 className="font-medium">{poll.question}</h2>
 
-      {multiple && (
+      {initial.multiple && (
         <p className="mt-1 text-sm text-muted-foreground">
           {poll.maxOptions === POLL_CHOICES_UNLIMITED
             ? t.t('pollForm.chooseAny')
@@ -42,48 +43,11 @@ export async function PollForm({
         <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 ? (
-          <PendingButton showWorking>
-            {hasVoted ? t.t('pollForm.changeVote') : t.t('pollForm.vote')}
-          </PendingButton>
-        ) : (
-          <p className="text-sm text-muted-foreground">
-            {closed ? t.t('pollForm.closed') : t.t('pollForm.votes', { count: total })}
-          </p>
-        )}
-      </form>
+      <PollVoteForm threadId={threadId} pollId={poll.id} initial={initial} copy={copy} />
 
       {typeof editHref === 'string' && (
         <p className="mt-3 text-sm">
-          <a href={editHref}>{t.t('pollForm.edit')}</a>
+          <TextLink href={editHref}>{t.t('pollForm.edit')}</TextLink>
         </p>
       )}
     </section>