@meith/web 0.31.0 → 0.33.0

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']}

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