@meith/web 0.30.1 → 0.32.0

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>

package/src/components/content/progressive-marker.tsx

@@ -0,0 +1,13 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+
+import { PROGRESSIVE_FIELD } from '@/view/progressive-enhancement'
+
+export function ProgressiveMarker() {
+  const [enhanced, setEnhanced] = useState(false)
+
+  useEffect(() => setEnhanced(true), [])
+
+  return enhanced ? <input type="hidden" name={PROGRESSIVE_FIELD} value="1" /> : null
+}

package/src/components/content/recipient-segment.ts

@@ -0,0 +1,39 @@
+export interface RecipientSegment {
+  readonly start: number
+  readonly end: number
+  readonly query: string
+}
+
+const SEPARATORS = new Set([',', ';', '\n'])
+
+const MAX_QUERY_LENGTH = 32
+
+export function activeRecipientSegment(value: string, caret: number): RecipientSegment | null {
+  let start = 0
+  for (let index = caret - 1; index >= 0; index -= 1) {
+    const char = value[index]
+    if (char !== undefined && SEPARATORS.has(char)) {
+      start = index + 1
+      break
+    }
+  }
+
+  const raw = value.slice(start, caret)
+  const query = raw.trim()
+  if (query === '' || query.length > MAX_QUERY_LENGTH || /\s/.test(query)) return null
+
+  return { start, end: caret, query }
+}
+
+export function fillRecipient(
+  value: string,
+  segment: RecipientSegment,
+  username: string,
+): { readonly value: string; readonly caret: number } {
+  const before = value.slice(0, segment.start)
+  const after = value.slice(segment.end).replace(/^[\s,;]+/, '')
+  const lead = before === '' || before.endsWith(' ') ? '' : ' '
+  const insert = `${lead}${username}, `
+
+  return { value: before + insert + after, caret: before.length + insert.length }
+}

package/src/components/content/reply-form.tsx

@@ -22,6 +22,7 @@ export function ReplyForm({
   seenLastPostId,
   prefill,
   canSubscribe,
+  subscribeDefault = false,
   attachmentLimits,
   draft,
   collapsible = false,
@@ -32,6 +33,7 @@ export function ReplyForm({
   seenLastPostId: number | null
   prefill: string
   canSubscribe: boolean
+  subscribeDefault?: boolean
   attachmentLimits: UploadLimits | null
   draft: Draft | null
   collapsible?: boolean
@@ -79,7 +81,13 @@ export function ReplyForm({
 
       {canSubscribe && (
         <label className="flex items-center gap-2 text-sm">
-          <input type="checkbox" name="subscribe" value="1" className="size-4 accent-primary" />
+          <input
+            type="checkbox"
+            name="subscribe"
+            value="1"
+            defaultChecked={subscribeDefault}
+            className="size-4 accent-primary"
+          />
           <span>{fromCopy(copy, 'composer.notifyReplies')}</span>
         </label>
       )}

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

@@ -9,6 +9,7 @@ import { thankForPostAction } from '@/server/reputation-actions'
 
 import { PendingButton } from '../auth/form-controls'
 import { formatFromCopy, fromCopy, useCopy } from '../shell/copy'
+import { ProgressiveMarker } from './progressive-marker'
 
 export function ThanksButton({
   postId,
@@ -26,32 +27,36 @@ export function ThanksButton({
   const [state, action] = useActionState(thankForPostAction, EMPTY_STATE)
   const copy = useCopy()
 
+  const displayThanked = state.thanks?.thanked ?? thanked
+  const displayCount = state.thanks?.count ?? count
+
   return (
     <form action={action} className="inline-flex items-center">
       <input type="hidden" name="postId" value={postId} />
       <input type="hidden" name="userId" value={authorUserId} />
       <input type="hidden" name="returnTo" value={returnTo} />
+      <ProgressiveMarker />
 
       <PendingButton
-        aria-pressed={thanked}
+        aria-pressed={displayThanked}
         className={cn(
           'inline-flex h-8 items-center gap-1.5 rounded-md px-2.5 text-sm font-medium transition-colors',
           'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring',
-          thanked
+          displayThanked
             ? 'bg-moderation-approved/10 text-moderation-approved hover:bg-moderation-approved/20'
             : 'text-muted-foreground hover:bg-muted hover:text-foreground',
         )}
       >
-        <span aria-hidden="true">{thanked ? '★' : '☆'}</span>
-        {thanked
+        <span aria-hidden="true">{displayThanked ? '★' : '☆'}</span>
+        {displayThanked
           ? fromCopy(copy, 'composer.thanks.thanked')
           : fromCopy(copy, 'composer.thanks.thanks')}
-        {count > 0 && (
+        {displayCount > 0 && (
           <span className="tabular-nums opacity-70">
-            {count}
+            {displayCount}
             <span className="sr-only">
               {' '}
-              {formatFromCopy(copy, 'composer.thanks.count', { count })}
+              {formatFromCopy(copy, 'composer.thanks.count', { count: displayCount })}
             </span>
           </span>
         )}

package/src/components/messages/message-forms.tsx

@@ -7,7 +7,9 @@ import { messageBulkAction, sendMessageAction } from '@/server/message-actions'
 
 import { FormError, PendingButton } from '../auth/form-controls'
 import { MarkdownEditor } from '../content/markdown-editor'
+import { ConfirmDialog } from '../shell/confirm-dialog'
 import { type Copy, fromCopy } from '../shell/copy'
+import { RecipientField } from './recipient-field'
 
 const FIELD =
   'w-full rounded-md border border-border bg-background px-3 py-2 text-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring'
@@ -42,13 +44,13 @@ export function ComposeForm({
       <FormError message={state.error} />
       {replyToId === null ? null : <input type="hidden" name="replyTo" value={replyToId} />}
 
-      <label className="flex flex-col gap-1 text-sm">
+      <label htmlFor="message-to" className="flex flex-col gap-1 text-sm">
         <span className="font-medium">{fromCopy(copy, 'messageForm.to')}</span>
-        <input
+        <RecipientField
+          id="message-to"
           name="to"
           defaultValue={values.to ?? to}
           className={FIELD}
-          autoComplete="off"
           required
         />
         <span className="text-xs text-muted-foreground">
@@ -56,9 +58,14 @@ export function ComposeForm({
         </span>
       </label>
 
-      <label className="flex flex-col gap-1 text-sm">
+      <label htmlFor="message-bcc" className="flex flex-col gap-1 text-sm">
         <span className="font-medium">{fromCopy(copy, 'messageForm.bcc')}</span>
-        <input name="bcc" defaultValue={values.bcc ?? ''} className={FIELD} autoComplete="off" />
+        <RecipientField
+          id="message-bcc"
+          name="bcc"
+          defaultValue={values.bcc ?? ''}
+          className={FIELD}
+        />
         <span className="text-xs text-muted-foreground">
           {fromCopy(copy, 'messageForm.bccHint')}
         </span>
@@ -109,44 +116,47 @@ export function MessageActionBar({
   const [state, action] = useActionState(messageBulkAction, EMPTY_STATE)
 
   return (
-    <form id={formId} action={action} className="flex flex-col gap-2">
-      <FormError message={state.error} />
-      <input type="hidden" name="folder" value={folder} />
-
-      <div className="flex flex-wrap items-center gap-2">
-        <span className="text-xs text-muted-foreground">
-          {fromCopy(copy, 'messageForm.withSelected')}
-        </span>
-
-        {folder === 'inbox' && (
-          <>
-            <PendingButton name="command" value="read" className={SECONDARY}>
-              {fromCopy(copy, 'messageForm.markRead')}
-            </PendingButton>
-            <PendingButton name="command" value="unread" className={SECONDARY}>
-              {fromCopy(copy, 'messageForm.markUnread')}
-            </PendingButton>
-          </>
-        )}
-
-        {folder === 'trash' ? (
-          <>
-            <PendingButton name="command" value="restore" className={SECONDARY}>
-              {fromCopy(copy, 'messageForm.restore')}
+    <>
+      <form id={formId} action={action} className="flex flex-col gap-2">
+        <FormError message={state.error} />
+        <input type="hidden" name="folder" value={folder} />
+
+        <div className="flex flex-wrap items-center gap-2">
+          <span className="text-xs text-muted-foreground">
+            {fromCopy(copy, 'messageForm.withSelected')}
+          </span>
+
+          {folder === 'inbox' && (
+            <>
+              <PendingButton name="command" value="read" className={SECONDARY}>
+                {fromCopy(copy, 'messageForm.markRead')}
+              </PendingButton>
+              <PendingButton name="command" value="unread" className={SECONDARY}>
+                {fromCopy(copy, 'messageForm.markUnread')}
+              </PendingButton>
+            </>
+          )}
+
+          {folder === 'trash' ? (
+            <>
+              <PendingButton name="command" value="restore" className={SECONDARY}>
+                {fromCopy(copy, 'messageForm.restore')}
+              </PendingButton>
+              <PendingButton name="command" value="delete" className={SECONDARY}>
+                {fromCopy(copy, 'messageForm.deleteForever')}
+              </PendingButton>
+              <PendingButton name="command" value="empty" className={SECONDARY}>
+                {fromCopy(copy, 'messageForm.emptyTrash')}
+              </PendingButton>
+            </>
+          ) : (
+            <PendingButton name="command" value="trash" className={SECONDARY}>
+              {fromCopy(copy, 'messageForm.moveToTrash')}
             </PendingButton>
-            <PendingButton name="command" value="delete" className={SECONDARY}>
-              {fromCopy(copy, 'messageForm.deleteForever')}
-            </PendingButton>
-            <PendingButton name="command" value="empty" className={SECONDARY}>
-              {fromCopy(copy, 'messageForm.emptyTrash')}
-            </PendingButton>
-          </>
-        ) : (
-          <PendingButton name="command" value="trash" className={SECONDARY}>
-            {fromCopy(copy, 'messageForm.moveToTrash')}
-          </PendingButton>
-        )}
-      </div>
-    </form>
+          )}
+        </div>
+      </form>
+      <ConfirmDialog confirm={state.confirm} action={action} />
+    </>
   )
 }

package/src/components/messages/recipient-field.tsx

@@ -0,0 +1,88 @@
+'use client'
+
+import { useRef, useState } from 'react'
+
+import type { MemberSuggestion } from '@meith/accounts'
+
+import { useMentionCombobox } from '../content/mention-combobox'
+import {
+  activeRecipientSegment,
+  fillRecipient,
+  type RecipientSegment,
+} from '../content/recipient-segment'
+import { fromCopy, useCopy } from '../shell/copy'
+
+export function RecipientField({
+  id,
+  name,
+  defaultValue,
+  className,
+  required = false,
+}: {
+  readonly id: string
+  readonly name: string
+  readonly defaultValue: string
+  readonly className?: string
+  readonly required?: boolean
+}) {
+  const input = useRef<HTMLInputElement>(null)
+  const segment = useRef<RecipientSegment | null>(null)
+  const [query, setQuery] = useState<string | null>(null)
+  const copy = useCopy()
+
+  function sync(element: HTMLInputElement): void {
+    const caret = element.selectionStart
+    const found =
+      caret !== null && caret === element.selectionEnd
+        ? activeRecipientSegment(element.value, caret)
+        : null
+    segment.current = found
+    setQuery(found?.query ?? null)
+  }
+
+  function close(): void {
+    segment.current = null
+    setQuery(null)
+  }
+
+  function choose(candidate: MemberSuggestion): void {
+    const element = input.current
+    const active = segment.current
+    if (element === null || active === null) return
+
+    const next = fillRecipient(element.value, active, candidate.username)
+    element.value = next.value
+    element.setSelectionRange(next.caret, next.caret)
+    element.focus()
+    close()
+  }
+
+  const combobox = useMentionCombobox({
+    query,
+    onChoose: choose,
+    onDismiss: close,
+    label: (candidate) => candidate.username,
+    listboxLabel: fromCopy(copy, 'composer.recipient.suggestions'),
+  })
+
+  return (
+    <div className="relative">
+      <input
+        ref={input}
+        id={id}
+        name={name}
+        defaultValue={defaultValue}
+        className={className}
+        required={required}
+        autoComplete="off"
+        onKeyDown={combobox.handleKeyDown}
+        onInput={(event) => sync(event.currentTarget)}
+        onSelect={(event) => sync(event.currentTarget)}
+        onBlur={close}
+        {...combobox.anchorProps}
+      />
+      {combobox.listbox}
+      {combobox.liveRegion}
+    </div>
+  )
+}

package/src/components/moderation/inline-moderation-form.tsx

@@ -8,6 +8,7 @@ import { inlineModerateAction } from '@/server/inline-moderation-actions'
 import { splitSelectedAction } from '@/server/surgery-actions'
 
 import { FormError, PendingButton } from '../auth/form-controls'
+import { ConfirmDialog } from '../shell/confirm-dialog'
 import { type Copy, fromCopy } from '../shell/copy'
 
 const BUTTON =
@@ -152,6 +153,7 @@ export function InlineModerationForm({
           </PendingButton>
         )}
       </form>
+      <ConfirmDialog confirm={state.confirm} action={action} />
     </div>
   )
 }

package/src/components/moderation/modcp-shell.tsx

@@ -3,20 +3,34 @@ import { notFound } from 'next/navigation'
 import { ModCpNav } from '@/components/moderation/modcp-nav'
 import { PanelShell } from '@/components/shell/panel-shell'
 import { getActor } from '@/server/context'
+import { currentLocation } from '@/server/current-location'
 import { getTranslator } from '@/server/i18n'
 import { modCpCounts, resolveModCpAccess } from '@/server/modcp'
-import { modCpNav } from '@/view/modcp-nav'
+import { pluginStaffPanelSection } from '@/server/plugin-panel'
+import { modCpNavWithPlugin, pluginKeyAtModCp } from '@/view/modcp-nav'
+import { pluginNavChildren } from '@/view/plugin-panel'
 import { buildPanelLinks } from '@/view/shell'
 
 export async function ModCpShell({ children }: { children: React.ReactNode }) {
   const access = await resolveModCpAccess()
   if (access === null) notFound()
 
+  const t = await getTranslator()
   const counts = await modCpCounts()
 
+  const pluginKey = pluginKeyAtModCp(await currentLocation())
+  const plugin = pluginKey === null ? null : await pluginStaffPanelSection(pluginKey, t)
+  const nav = modCpNavWithPlugin(
+    access,
+    plugin === null
+      ? null
+      : { key: plugin.key, name: plugin.name, pages: pluginNavChildren(plugin.pages) },
+    t,
+  )
+
   const actor = await getActor()
   const links = buildPanelLinks({
-    t: await getTranslator(),
+    t,
     current: 'modcp',
     canAccessAdminCp: actor.global.canAccessAdminCp === true,
   })
@@ -26,7 +40,7 @@ export async function ModCpShell({ children }: { children: React.ReactNode }) {
       panel="modcp"
       nav={
         <ModCpNav
-          nav={modCpNav(access)}
+          nav={nav}
           counts={{
             '/moderation': counts.pending,
             '/moderation/reports': counts.openReports,

package/src/components/moderation/queue-form.tsx

@@ -2,6 +2,8 @@
 
 import { useActionState } from 'react'
 
+import { TextLink } from '@meith/ui'
+
 import { EMPTY_STATE } from '@/server/auth-form-state'
 import { moderateQueueAction } from '@/server/moderation-actions'
 
@@ -45,12 +47,7 @@ export function QueueForm({ rows, copy }: { rows: readonly QueueFormRow[]; copy:
                       forum: row.forumTitle,
                     })}
                   </span>
-                  <a
-                    href={row.href}
-                    className="font-medium text-foreground underline decoration-border underline-offset-2 hover:decoration-foreground"
-                  >
-                    {row.threadTitle}
-                  </a>
+                  <TextLink href={row.href}>{row.threadTitle}</TextLink>
                 </span>
                 <span className="text-xs text-muted-foreground">
                   {copy['moderationForm.queue.byLead']}