@meith/web 0.23.1 → 0.23.3

package/src/components/content/composer-recovery.tsx

@@ -90,12 +90,13 @@ export function ComposerRecovery({
   const latest = useRef('')
   const saved = useRef('')
   const submitting = useRef(false)
+  const held = useRef(false)
   const [recovery, setRecovery] = useState<Backup | null>(null)
   const [saveState, setSaveState] = useState<SaveState>('idle')
 
   const persist = useCallback(async () => {
     const form = root.current?.closest('form')
-    if (form === null || form === undefined) return
+    if (form === null || form === undefined || held.current) return
     const payload = readPayload(form, { ...scope, title: '', message: '', prefixId: null })
     const next = signature(payload)
     latest.current = next
@@ -134,6 +135,8 @@ export function ComposerRecovery({
 
     let timer: ReturnType<typeof setTimeout> | undefined
     const onInput = () => {
+      submitting.current = false
+      held.current = false
       const payload = readPayload(form, { ...scope, title: '', message: '', prefixId: null })
       latest.current = signature(payload)
       try {
@@ -146,6 +149,12 @@ export function ComposerRecovery({
       timer = setTimeout(() => void persist(), AUTOSAVE_DELAY_MS)
     }
     const onBlur = () => void persist()
+    const onPointerDown = (event: Event) => {
+      const target = event.target
+      if (target instanceof Element && target.closest('button[type="submit"]') !== null) {
+        held.current = true
+      }
+    }
     const onSubmit = (event: SubmitEvent) => {
       const submitter = event.submitter
       submitting.current =
@@ -163,6 +172,7 @@ export function ComposerRecovery({
 
     form.addEventListener('input', onInput)
     form.addEventListener('blur', onBlur, true)
+    form.addEventListener('pointerdown', onPointerDown, true)
     form.addEventListener('submit', onSubmit)
     window.addEventListener('pagehide', onPageHide)
     window.addEventListener('beforeunload', onBeforeUnload)
@@ -170,12 +180,20 @@ export function ComposerRecovery({
       clearTimeout(timer)
       form.removeEventListener('input', onInput)
       form.removeEventListener('blur', onBlur, true)
+      form.removeEventListener('pointerdown', onPointerDown, true)
       form.removeEventListener('submit', onSubmit)
       window.removeEventListener('pagehide', onPageHide)
       window.removeEventListener('beforeunload', onBeforeUnload)
     }
   }, [persist, scope, serverUpdatedAt, storageKey])
 
+  useEffect(
+    () => () => {
+      if (submitting.current) localStorage.removeItem(storageKey)
+    },
+    [storageKey],
+  )
+
   function restore(): void {
     const form = root.current?.closest('form')
     if (form === null || form === undefined || recovery === null) return

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

@@ -1,5 +1,6 @@
 'use client'
 
+import type { ReactNode } from 'react'
 import { useActionState } from 'react'
 
 import { EMPTY_STATE } from '@/server/auth-form-state'
@@ -14,14 +15,14 @@ export function EditPostForm({
   postId,
   message,
   reason,
-  toolbar = 'inline',
+  toolbar,
   copy,
 }: {
   threadId: number
   postId: number
   message: string
   reason: string | null
-  toolbar?: 'inline' | 'external'
+  toolbar?: ReactNode
   copy: Copy
 }) {
   const [state, action] = useActionState(editPostAction, EMPTY_STATE)

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

@@ -1,5 +1,6 @@
 'use client'
 
+import type { ReactNode } from 'react'
 import { useCallback, useEffect, useId, useRef, useState } from 'react'
 
 import type { MemberSuggestion } from '@meith/accounts'
@@ -84,7 +85,7 @@ export interface MarkdownEditorProps {
   readonly hint?: React.ReactNode
   readonly scope?: PreviewScope
   readonly attachTo?: AttachmentTarget | undefined
-  readonly toolbar?: 'inline' | 'external' | undefined
+  readonly toolbar?: ReactNode
 }
 
 export function MarkdownEditor({
@@ -99,7 +100,7 @@ export function MarkdownEditor({
   hint,
   scope = 'post',
   attachTo,
-  toolbar = 'inline',
+  toolbar,
 }: MarkdownEditorProps) {
   const field = useRef<HTMLTextAreaElement>(null)
   const attachmentInput = useRef<HTMLInputElement>(null)
@@ -308,6 +309,9 @@ export function MarkdownEditor({
   }
 
   const writing = !enhanced || tab === 'write'
+  const onWriteTab = enhanced && tab === 'write'
+  const showThemedToolbar = toolbar != null && onWriteTab
+  const showBuiltInToolbar = toolbar == null && onWriteTab
 
   const tabClass = (active: boolean): string =>
     cn(
@@ -359,121 +363,136 @@ export function MarkdownEditor({
         )}
       </div>
 
-      {toolbar === 'inline' && enhanced && tab === 'write' && (
-        <div
-          role="group"
-          aria-label={fromCopy(copy, 'composer.formatting')}
-          aria-controls={id}
-          className="flex flex-wrap gap-0.5 rounded-md border border-border bg-muted/40 p-1"
-        >
-          {TOOLS.map((tool) => (
-            <button
-              key={tool.labelKey}
-              type="button"
-              onMouseDown={(event) => event.preventDefault()}
-              onClick={() => {
-                if (field.current !== null) runTool(field.current, tool, copy)
-              }}
-              title={
-                tool.shortcut === undefined
-                  ? fromCopy(copy, tool.labelKey)
-                  : formatFromCopy(copy, 'composer.toolShortcut', {
-                      label: fromCopy(copy, tool.labelKey),
-                      key: tool.shortcut.toUpperCase(),
-                    })
-              }
-              aria-label={fromCopy(copy, tool.labelKey)}
-              {...(tool.shortcut === undefined
-                ? {}
-                : { 'aria-keyshortcuts': `Control+${tool.shortcut}` })}
-              className="min-w-8 rounded px-2 py-1 text-xs font-medium text-muted-foreground hover:bg-background hover:text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
-            >
-              <span aria-hidden="true">{tool.glyph}</span>
-            </button>
-          ))}
-
-          {attachTo !== undefined && (
-            <button
-              type="button"
-              disabled={attachmentUpload === 'uploading'}
-              onMouseDown={(event) => event.preventDefault()}
-              onClick={() => attachmentInput.current?.click()}
-              title={fromCopy(copy, 'composer.tool.attachment')}
-              aria-label={fromCopy(copy, 'composer.tool.attachment')}
-              className="min-w-8 rounded px-2 py-1 text-xs font-medium text-muted-foreground hover:bg-background hover:text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring disabled:opacity-50"
-            >
-              <span aria-hidden="true">Attach</span>
-            </button>
-          )}
-        </div>
-      )}
-
-      <div
-        {...(enhanced
-          ? { role: 'tabpanel', id: `${panelId}-write`, 'aria-labelledby': `${panelId}-write-tab` }
-          : {})}
-        hidden={!writing}
-        className="relative"
-      >
-        <textarea
-          ref={field}
-          id={id}
-          name={name}
-          rows={rows}
-          required={required === true && writing}
-          defaultValue={defaultValue}
-          {...(maxLength === undefined ? {} : { maxLength })}
-          onKeyDown={onKeyDown}
-          onPaste={onPaste}
-          onInput={(event) => {
-            fit()
-            syncMentionToken(event.currentTarget)
-          }}
-          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,
-              }
-            : {})}
-          className="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"
-        />
+      <div className="flex flex-col">
+        {showThemedToolbar && (
+          <div className="overflow-hidden rounded-t-md border border-b-0 border-input">
+            {toolbar}
+          </div>
+        )}
 
-        {enhanced && mentionToken !== null && mentionMatches.length > 0 && (
+        {showBuiltInToolbar && (
           <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"
+            role="group"
+            aria-label={fromCopy(copy, 'composer.formatting')}
+            aria-controls={id}
+            className="flex flex-wrap gap-0.5 rounded-t-md border border-b-0 border-input bg-muted/40 p-1"
           >
-            {mentionMatches.map((candidate, index) => (
+            {TOOLS.map((tool) => (
               <button
-                key={candidate.id}
+                key={tool.labelKey}
                 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)
+                  if (field.current !== null) runTool(field.current, tool, copy)
                 }}
-                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',
-                )}
+                title={
+                  tool.shortcut === undefined
+                    ? fromCopy(copy, tool.labelKey)
+                    : formatFromCopy(copy, 'composer.toolShortcut', {
+                        label: fromCopy(copy, tool.labelKey),
+                        key: tool.shortcut.toUpperCase(),
+                      })
+                }
+                aria-label={fromCopy(copy, tool.labelKey)}
+                {...(tool.shortcut === undefined
+                  ? {}
+                  : { 'aria-keyshortcuts': `Control+${tool.shortcut}` })}
+                className="min-w-8 rounded px-2 py-1 text-xs font-medium text-muted-foreground hover:bg-background hover:text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
               >
-                @{candidate.username}
+                <span aria-hidden="true">{tool.glyph}</span>
               </button>
             ))}
+
+            {attachTo !== undefined && (
+              <button
+                type="button"
+                disabled={attachmentUpload === 'uploading'}
+                onMouseDown={(event) => event.preventDefault()}
+                onClick={() => attachmentInput.current?.click()}
+                title={fromCopy(copy, 'composer.tool.attachment')}
+                aria-label={fromCopy(copy, 'composer.tool.attachment')}
+                className="min-w-8 rounded px-2 py-1 text-xs font-medium text-muted-foreground hover:bg-background hover:text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring disabled:opacity-50"
+              >
+                <span aria-hidden="true">Attach</span>
+              </button>
+            )}
           </div>
         )}
+
+        <div
+          {...(enhanced
+            ? {
+                role: 'tabpanel',
+                id: `${panelId}-write`,
+                'aria-labelledby': `${panelId}-write-tab`,
+              }
+            : {})}
+          hidden={!writing}
+          className="relative"
+        >
+          <textarea
+            ref={field}
+            id={id}
+            name={name}
+            rows={rows}
+            required={required === true && writing}
+            defaultValue={defaultValue}
+            {...(maxLength === undefined ? {} : { maxLength })}
+            onKeyDown={onKeyDown}
+            onPaste={onPaste}
+            onInput={(event) => {
+              fit()
+              syncMentionToken(event.currentTarget)
+            }}
+            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,
+                }
+              : {})}
+            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>
+          )}
+        </div>
       </div>
 
       {attachTo !== undefined && (

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

@@ -1,5 +1,6 @@
 'use client'
 
+import type { ReactNode } from 'react'
 import { useActionState } from 'react'
 
 import type { UploadLimits } from '@meith/attachments/limits'
@@ -29,7 +30,7 @@ export function NewThreadForm({
   canPostPoll,
   attachmentLimits,
   draft,
-  toolbar = 'inline',
+  toolbar,
   copy,
 }: {
   forumId: number
@@ -39,7 +40,7 @@ export function NewThreadForm({
   canPostPoll: boolean
   attachmentLimits: UploadLimits | null
   draft: Draft | null
-  toolbar?: 'inline' | 'external'
+  toolbar?: ReactNode
   copy: Copy
 }) {
   const [state, action] = useActionState(createThreadAction, EMPTY_STATE)

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

@@ -1,5 +1,6 @@
 'use client'
 
+import type { ReactNode } from 'react'
 import { useActionState } from 'react'
 
 import type { UploadLimits } from '@meith/attachments/limits'
@@ -24,7 +25,7 @@ export function ReplyForm({
   attachmentLimits,
   draft,
   collapsible = false,
-  toolbar = 'inline',
+  toolbar,
   copy,
 }: {
   threadId: number
@@ -34,7 +35,7 @@ export function ReplyForm({
   attachmentLimits: UploadLimits | null
   draft: Draft | null
   collapsible?: boolean
-  toolbar?: 'inline' | 'external'
+  toolbar?: ReactNode
   copy: Copy
 }) {
   const [state, action] = useActionState(createReplyAction, EMPTY_STATE)

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

@@ -36,59 +36,63 @@ export function ThreadSurgeryForm({
   return (
     <>
       {rights.split && splitPoints.length > 0 && (
-        <form action={splitAction} className="flex flex-wrap items-center gap-2">
+        <form action={splitAction} className="flex flex-col gap-2">
+          <div className="flex flex-wrap items-center gap-2">
+            <input type="hidden" name="threadId" value={threadId} />
+            <label className="flex items-center gap-2 text-xs">
+              <span className="sr-only">{fromCopy(copy, 'moderationForm.surgery.fromSr')}</span>
+              <select name="fromPostId" className={FIELD}>
+                {splitPoints.map((point) => (
+                  <option key={point.id} value={point.id}>
+                    {formatFromCopy(copy, 'moderationForm.surgery.splitPoint', {
+                      number: point.number,
+                      author: point.author,
+                    })}
+                  </option>
+                ))}
+              </select>
+            </label>
+            <label className="flex items-center gap-2 text-xs">
+              <span className="sr-only">{fromCopy(copy, 'moderationForm.surgery.titleSr')}</span>
+              <input
+                type="text"
+                name="title"
+                required
+                minLength={3}
+                maxLength={150}
+                placeholder={fromCopy(copy, 'moderationForm.newThreadTitle')}
+                className={`${FIELD} w-48`}
+              />
+            </label>
+            <button type="submit" className={BUTTON}>
+              {fromCopy(copy, 'moderationForm.surgery.split')}
+            </button>
+          </div>
           <FormError message={splitState.error} />
-          <input type="hidden" name="threadId" value={threadId} />
-          <label className="flex items-center gap-2 text-xs">
-            <span className="sr-only">{fromCopy(copy, 'moderationForm.surgery.fromSr')}</span>
-            <select name="fromPostId" className={FIELD}>
-              {splitPoints.map((point) => (
-                <option key={point.id} value={point.id}>
-                  {formatFromCopy(copy, 'moderationForm.surgery.splitPoint', {
-                    number: point.number,
-                    author: point.author,
-                  })}
-                </option>
-              ))}
-            </select>
-          </label>
-          <label className="flex items-center gap-2 text-xs">
-            <span className="sr-only">{fromCopy(copy, 'moderationForm.surgery.titleSr')}</span>
-            <input
-              type="text"
-              name="title"
-              required
-              minLength={3}
-              maxLength={150}
-              placeholder={fromCopy(copy, 'moderationForm.newThreadTitle')}
-              className={`${FIELD} w-48`}
-            />
-          </label>
-          <button type="submit" className={BUTTON}>
-            {fromCopy(copy, 'moderationForm.surgery.split')}
-          </button>
         </form>
       )}
 
       {rights.merge && (
-        <form action={mergeAction} className="flex flex-wrap items-center gap-2">
+        <form action={mergeAction} className="flex flex-col gap-2">
+          <div className="flex flex-wrap items-center gap-2">
+            <input type="hidden" name="threadId" value={threadId} />
+            <label className="flex items-center gap-2 text-xs">
+              <span className="sr-only">{fromCopy(copy, 'moderationForm.surgery.mergeSr')}</span>
+              <input
+                type="number"
+                name="targetThreadId"
+                required
+                min={1}
+                step={1}
+                placeholder={fromCopy(copy, 'moderationForm.surgery.mergePlaceholder')}
+                className={`${FIELD} w-40`}
+              />
+            </label>
+            <button type="submit" className={`${BUTTON} border-destructive/40 text-destructive`}>
+              {fromCopy(copy, 'moderationForm.surgery.merge')}
+            </button>
+          </div>
           <FormError message={mergeState.error} />
-          <input type="hidden" name="threadId" value={threadId} />
-          <label className="flex items-center gap-2 text-xs">
-            <span className="sr-only">{fromCopy(copy, 'moderationForm.surgery.mergeSr')}</span>
-            <input
-              type="number"
-              name="targetThreadId"
-              required
-              min={1}
-              step={1}
-              placeholder={fromCopy(copy, 'moderationForm.surgery.mergePlaceholder')}
-              className={`${FIELD} w-40`}
-            />
-          </label>
-          <button type="submit" className={`${BUTTON} border-destructive/40 text-destructive`}>
-            {fromCopy(copy, 'moderationForm.surgery.merge')}
-          </button>
         </form>
       )}
     </>