@meith/web 0.23.0 → 0.23.2

package/app/(board)/[slug]/new/page.tsx

@@ -70,6 +70,11 @@ export default async function NewThreadPage({ params }: { params: Promise<{ slug
         viewerRef(actor),
       )
 
+  const editorToolbar =
+    toolbarModel === null ? undefined : (
+      <EditorToolbar {...toolbarModel} copy={slotCopy(theme, 'EditorToolbar', translator)} />
+    )
+
   const formModel = await filterView(
     'view.post-form',
     {
@@ -89,13 +94,10 @@ export default async function NewThreadPage({ params }: { params: Promise<{ slug
                 ? null
                 : await drafts.find(actor.userId, id, null)
             }
-            toolbar="external"
+            toolbar={editorToolbar}
           />
         ) : null,
-        toolbar:
-          toolbarModel === null ? null : (
-            <EditorToolbar {...toolbarModel} copy={slotCopy(theme, 'EditorToolbar', translator)} />
-          ),
+        toolbar: null,
       },
     },
     viewerRef(actor),

package/app/(board)/thread/[slug]/edit/page.tsx

@@ -68,6 +68,11 @@ export default async function EditPostPage({
         viewerRef(await getActor()),
       )
 
+  const editorToolbar =
+    toolbarModel === null ? undefined : (
+      <EditorToolbar {...toolbarModel} copy={slotCopy(theme, 'EditorToolbar', translator)} />
+    )
+
   const formModel = await filterView(
     'view.post-form',
     {
@@ -84,16 +89,13 @@ export default async function EditPostPage({
                 postId={post}
                 message={scope.target.post.message}
                 reason={null}
-                toolbar="external"
+                toolbar={editorToolbar}
               />
             )}
             {scope.mayDelete && <DeletePostForm copy={formCopy} threadId={thread} postId={post} />}
           </>
         ),
-        toolbar:
-          toolbarModel === null ? null : (
-            <EditorToolbar {...toolbarModel} copy={slotCopy(theme, 'EditorToolbar', translator)} />
-          ),
+        toolbar: null,
       },
     },
     viewerRef(await getActor()),

package/app/(board)/thread/[slug]/page.tsx

@@ -41,6 +41,7 @@ import { followFormCopy } from '@/view/account-copy'
 import { attachmentsByPost } from '@/view/attachments'
 import { buildBreadcrumb } from '@/view/breadcrumb'
 import { replyFormCopy, threadRatingCopy } from '@/view/content-copy'
+import { buildEditorToolbarModel } from '@/view/editor-toolbar'
 import {
   anyInlineTool,
   INLINE_FORM_ID,
@@ -402,6 +403,7 @@ export default async function ThreadPage({
   const PostActions = requireSlot(theme, 'PostActions')
   const Pagination = requireSlot(theme, 'Pagination')
   const QuickReply = requireSlot(theme, 'QuickReply')
+  const EditorToolbar = requireSlot(theme, 'EditorToolbar')
   const translator = await getTranslator()
   const toolNotice = query.tool === undefined ? undefined : TOOL_NOTICE_KEYS[query.tool]
 
@@ -528,6 +530,14 @@ export default async function ThreadPage({
     forum: matrix,
     allowsAttachments: replyRules?.allowAttachments === true,
   }
+  const quickReplyAttachable = canAttach(actor, replyTarget)
+  const quickReplyToolbar = !canReply
+    ? null
+    : await filterView(
+        'view.editor-toolbar',
+        buildEditorToolbarModel({ attachments: quickReplyAttachable, t: translator }),
+        viewerRef(actor),
+      )
   const quickReplyForm = !canReply ? null : (
     <>
       <QuoteInPlace threadId={thread.id} />
@@ -538,12 +548,20 @@ export default async function ThreadPage({
         seenLastPostId={thread.lastPost?.postId ?? null}
         prefill=""
         canSubscribe={authorizer.can(actor, 'forum.subscribe', replyTarget)}
-        attachmentLimits={canAttach(actor, replyTarget) ? attachmentLimits(replyTarget) : null}
+        attachmentLimits={quickReplyAttachable ? attachmentLimits(replyTarget) : null}
         draft={
           actor.userId === null || drafts === null
             ? null
             : await drafts.find(actor.userId, forum.id, thread.id)
         }
+        toolbar={
+          quickReplyToolbar === null ? undefined : (
+            <EditorToolbar
+              {...quickReplyToolbar}
+              copy={slotCopy(theme, 'EditorToolbar', translator)}
+            />
+          )
+        }
         collapsible
       />
     </>

package/app/(board)/thread/[slug]/reply/page.tsx

@@ -94,6 +94,11 @@ export default async function ReplyPage({
         viewerRef(actor),
       )
 
+  const editorToolbar =
+    toolbarModel === null ? undefined : (
+      <EditorToolbar {...toolbarModel} copy={slotCopy(theme, 'EditorToolbar', translator)} />
+    )
+
   const formModel = await filterView(
     'view.post-form',
     {
@@ -114,14 +119,11 @@ export default async function ReplyPage({
                   ? null
                   : await drafts.find(actor.userId, target.forum.id, target.threadId)
               }
-              toolbar="external"
+              toolbar={editorToolbar}
             />
           </>
         ),
-        toolbar:
-          toolbarModel === null ? null : (
-            <EditorToolbar {...toolbarModel} copy={slotCopy(theme, 'EditorToolbar', translator)} />
-          ),
+        toolbar: null,
       },
     },
     viewerRef(actor),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@meith/web",
-  "version": "0.23.0",
+  "version": "0.23.2",
   "description": "The board itself: the Next.js app, and the forum-web bin that materializes it into an external board workspace.",
   "license": "MIT",
   "repository": {
@@ -43,53 +43,53 @@
     "react-dom": "19.2.8",
     "tailwindcss": "^4.3.3",
     "typescript": "7.0.2",
-    "@meith/accounts": "0.23.0",
-    "@meith/admin": "0.23.0",
-    "@meith/antispam": "0.23.0",
-    "@meith/api": "0.23.0",
-    "@meith/attachments": "0.23.0",
-    "@meith/authorization": "0.23.0",
-    "@meith/avatars": "0.23.0",
-    "@meith/core": "0.23.0",
-    "@meith/db": "0.23.0",
-    "@meith/demo": "0.23.0",
-    "@meith/drafts": "0.23.0",
-    "@meith/drivers": "0.23.0",
-    "@meith/events": "0.23.0",
-    "@meith/forums": "0.23.0",
-    "@meith/groups": "0.23.0",
-    "@meith/i18n": "0.23.0",
-    "@meith/import": "0.23.0",
-    "@meith/install": "0.23.0",
-    "@meith/mail": "0.23.0",
-    "@meith/markdown": "0.23.0",
-    "@meith/marketplace": "0.23.0",
-    "@meith/messages": "0.23.0",
-    "@meith/moderation": "0.23.0",
-    "@meith/notifications": "0.23.0",
-    "@meith/plugin-calendar": "0.23.0",
-    "@meith/plugin-dues": "0.23.0",
-    "@meith/plugin-kit": "0.23.0",
-    "@meith/polls": "0.23.0",
-    "@meith/posts": "0.23.0",
-    "@meith/profile-fields": "0.23.0",
-    "@meith/relations": "0.23.0",
-    "@meith/reputation": "0.23.0",
-    "@meith/search": "0.23.0",
-    "@meith/runtime": "0.23.0",
-    "@meith/settings": "0.23.0",
-    "@meith/signatures": "0.23.0",
-    "@meith/subscriptions": "0.23.0",
-    "@meith/tasks": "0.23.0",
-    "@meith/theme-clubhouse": "0.23.0",
-    "@meith/theme-default": "0.23.0",
-    "@meith/theme-kit": "0.23.0",
-    "@meith/theme-midnight": "0.23.0",
-    "@meith/theme-phasebook": "0.23.0",
-    "@meith/theme-raidframe": "0.23.0",
-    "@meith/threads": "0.23.0",
-    "@meith/ui": "0.23.0",
-    "@meith/upgrade": "0.23.0"
+    "@meith/accounts": "0.23.2",
+    "@meith/admin": "0.23.2",
+    "@meith/antispam": "0.23.2",
+    "@meith/api": "0.23.2",
+    "@meith/attachments": "0.23.2",
+    "@meith/authorization": "0.23.2",
+    "@meith/avatars": "0.23.2",
+    "@meith/core": "0.23.2",
+    "@meith/db": "0.23.2",
+    "@meith/demo": "0.23.2",
+    "@meith/drafts": "0.23.2",
+    "@meith/drivers": "0.23.2",
+    "@meith/events": "0.23.2",
+    "@meith/forums": "0.23.2",
+    "@meith/groups": "0.23.2",
+    "@meith/i18n": "0.23.2",
+    "@meith/import": "0.23.2",
+    "@meith/install": "0.23.2",
+    "@meith/mail": "0.23.2",
+    "@meith/markdown": "0.23.2",
+    "@meith/marketplace": "0.23.2",
+    "@meith/messages": "0.23.2",
+    "@meith/moderation": "0.23.2",
+    "@meith/notifications": "0.23.2",
+    "@meith/plugin-calendar": "0.23.2",
+    "@meith/plugin-dues": "0.23.2",
+    "@meith/plugin-kit": "0.23.2",
+    "@meith/polls": "0.23.2",
+    "@meith/posts": "0.23.2",
+    "@meith/profile-fields": "0.23.2",
+    "@meith/relations": "0.23.2",
+    "@meith/reputation": "0.23.2",
+    "@meith/runtime": "0.23.2",
+    "@meith/settings": "0.23.2",
+    "@meith/search": "0.23.2",
+    "@meith/signatures": "0.23.2",
+    "@meith/subscriptions": "0.23.2",
+    "@meith/tasks": "0.23.2",
+    "@meith/theme-clubhouse": "0.23.2",
+    "@meith/theme-kit": "0.23.2",
+    "@meith/theme-default": "0.23.2",
+    "@meith/theme-midnight": "0.23.2",
+    "@meith/theme-phasebook": "0.23.2",
+    "@meith/theme-raidframe": "0.23.2",
+    "@meith/threads": "0.23.2",
+    "@meith/ui": "0.23.2",
+    "@meith/upgrade": "0.23.2"
   },
   "scripts": {
     "dev": "next dev",

package/src/components/admin/forum-forms.tsx

@@ -3,6 +3,7 @@
 import { useActionState } from 'react'
 
 import type { MatrixCell, MatrixRow } from '@meith/authorization'
+import { cn, Disclosure } from '@meith/ui'
 
 import { PANEL_CARD, PANEL_LIST, PANEL_ROW } from '@/components/shell/panel-list'
 import { EMPTY_STATE } from '@/server/auth-form-state'
@@ -153,38 +154,145 @@ function effectiveLabel(
   })
 }
 
-function CellControl({ cell, copy }: { cell: MatrixCell; copy: Copy }) {
-  if (cell.kind === 'numeric') {
-    return (
-      <input
-        type="number"
-        name={cell.key}
-        min={0}
-        placeholder={fromCopy(copy, 'adminForum.perm.inherit')}
-        defaultValue={cell.control}
-        className={INPUT}
-      />
-    )
-  }
+const PERM_GROUPS: readonly { readonly labelKey: string; readonly fields: readonly string[] }[] = [
+  {
+    labelKey: 'adminForum.permGroup.viewing',
+    fields: ['canView', 'canViewThreads', 'canViewOthersThreads', 'canSearch'],
+  },
+  {
+    labelKey: 'adminForum.permGroup.posting',
+    fields: [
+      'canPostThreads',
+      'canPostReplies',
+      'canPostPolls',
+      'canVotePolls',
+      'canRateThreads',
+      'canSubscribe',
+    ],
+  },
+  {
+    labelKey: 'adminForum.permGroup.ownContent',
+    fields: ['canEditOwnPosts', 'canDeleteOwnPosts', 'canDeleteOwnThreads', 'editTimeLimitMinutes'],
+  },
+  {
+    labelKey: 'adminForum.permGroup.moderation',
+    fields: [
+      'canEditOthersPosts',
+      'canSoftDeletePosts',
+      'canViewUnapproved',
+      'canViewDeleted',
+      'canApproveContent',
+    ],
+  },
+  {
+    labelKey: 'adminForum.permGroup.attachments',
+    fields: [
+      'canUploadAttachments',
+      'canDownloadAttachments',
+      'maxAttachmentsPerPost',
+      'maxAttachmentSizeKb',
+    ],
+  },
+  {
+    labelKey: 'adminForum.permGroup.approvals',
+    fields: ['requiresThreadApproval', 'requiresPostApproval', 'requiresApprovalOnEdit'],
+  },
+]
+
+function firstSentence(text: string): string {
+  const at = text.indexOf('. ')
+  return at === -1 ? text : text.slice(0, at + 1)
+}
+
+function groupCells(
+  cells: readonly MatrixCell[],
+): readonly { readonly labelKey: string; readonly cells: readonly MatrixCell[] }[] {
+  const byKey = new Map(cells.map((cell) => [cell.key, cell]))
+  const taken = new Set<string>()
+  const sections = PERM_GROUPS.map((group) => {
+    const found = group.fields.flatMap((key) => {
+      const cell = byKey.get(key)
+      if (cell === undefined) return []
+      taken.add(key)
+      return [cell]
+    })
+    return { labelKey: group.labelKey, cells: found }
+  }).filter((section) => section.cells.length > 0)
+
+  const leftover = cells.filter((cell) => !taken.has(cell.key))
+  return leftover.length === 0
+    ? sections
+    : [...sections, { labelKey: 'adminForum.permGroup.other', cells: leftover }]
+}
+
+const SEGMENT =
+  'flex-1 cursor-pointer px-2.5 py-1 text-center text-xs font-medium text-muted-foreground transition-colors hover:text-foreground has-[:checked]:font-semibold has-[:focus-visible]:outline-2 has-[:focus-visible]:-outline-offset-2 has-[:focus-visible]:outline-ring'
 
+function TriState({ cell, copy }: { cell: MatrixCell; copy: Copy }) {
   const negative = cell.kind === 'negative'
+  const options = [
+    {
+      value: 'inherit',
+      label: fromCopy(copy, 'adminForum.perm.inherit'),
+      on: 'has-[:checked]:bg-secondary has-[:checked]:text-secondary-foreground',
+    },
+    {
+      value: 'grant',
+      label: negative
+        ? fromCopy(copy, 'adminForum.perm.requiredOption')
+        : fromCopy(copy, 'adminForum.perm.grant'),
+      on: 'has-[:checked]:bg-primary has-[:checked]:text-primary-foreground',
+    },
+    {
+      value: 'deny',
+      label: negative
+        ? fromCopy(copy, 'adminForum.perm.notRequiredOption')
+        : fromCopy(copy, 'adminForum.perm.deny'),
+      on: 'has-[:checked]:bg-destructive has-[:checked]:text-destructive-foreground',
+    },
+  ]
+
   return (
-    <select name={cell.key} defaultValue={cell.control} className={INPUT}>
-      <option value="inherit">{fromCopy(copy, 'adminForum.perm.inherit')}</option>
-      <option value="grant">
-        {negative
-          ? fromCopy(copy, 'adminForum.perm.requiredOption')
-          : fromCopy(copy, 'adminForum.perm.grant')}
-      </option>
-      <option value="deny">
-        {negative
-          ? fromCopy(copy, 'adminForum.perm.notRequiredOption')
-          : fromCopy(copy, 'adminForum.perm.deny')}
-      </option>
-    </select>
+    <fieldset className="flex w-full shrink-0 divide-x divide-border overflow-hidden rounded-md border border-border sm:w-56">
+      <legend className="sr-only">{firstSentence(cell.description)}</legend>
+      {options.map((option) => (
+        <label key={option.value} className={cn(SEGMENT, option.on)}>
+          <input
+            type="radio"
+            name={cell.key}
+            value={option.value}
+            defaultChecked={cell.control === option.value}
+            className="sr-only"
+          />
+          {option.label}
+        </label>
+      ))}
+    </fieldset>
   )
 }
 
+function CellControl({ cell, copy }: { cell: MatrixCell; copy: Copy }) {
+  if (cell.kind !== 'numeric') return <TriState cell={cell} copy={copy} />
+
+  return (
+    <input
+      type="number"
+      name={cell.key}
+      min={0}
+      placeholder={fromCopy(copy, 'adminForum.perm.inherit')}
+      defaultValue={cell.control}
+      className={cn(INPUT, 'w-full shrink-0 sm:w-56')}
+    />
+  )
+}
+
+function overridesAside(row: MatrixRow, copy: Copy): string {
+  const count = row.cells.filter((cell) => cell.stored !== null).length
+  return count === 0
+    ? fromCopy(copy, 'adminForum.inheritsAll')
+    : formatFromCopy(copy, 'adminForum.overridesSet', { count })
+}
+
 export function ForumPermissionRowForm({
   forumId,
   row,
@@ -199,36 +307,46 @@ export function ForumPermissionRowForm({
   const [state, action] = useActionState(saveForumPermissionsAction, EMPTY_STATE)
 
   return (
-    <form action={action} className={PANEL_CARD}>
-      <FormError message={state.error} />
-      <div className="flex items-center justify-between gap-3">
-        <h3 className="text-base font-semibold tracking-tight">{row.groupTitle}</h3>
-        {state.notice === 'saved' && (
-          <span className="text-xs text-muted-foreground">{fromCopy(copy, 'admin.saved')}</span>
-        )}
-      </div>
-
-      <input type="hidden" name="forumId" value={forumId} />
-      <input type="hidden" name="groupId" value={row.groupId} />
-
-      <div className="grid gap-3 sm:grid-cols-2">
-        {row.cells.map((cell) => (
-          <label key={cell.key} className="flex flex-col gap-1 text-sm">
-            <span className="font-medium">{cell.description}</span>
-            <CellControl cell={cell} copy={copy} />
-            <span className="text-xs text-muted-foreground">
-              {effectiveLabel(cell, forumTitles, copy)}
-            </span>
-          </label>
+    <Disclosure summary={row.groupTitle} aside={overridesAside(row, copy)}>
+      <form action={action} className="flex flex-col gap-5">
+        <FormError message={state.error} />
+        <input type="hidden" name="forumId" value={forumId} />
+        <input type="hidden" name="groupId" value={row.groupId} />
+
+        {groupCells(row.cells).map((section) => (
+          <section key={section.labelKey} className="flex flex-col gap-2.5">
+            <h4 className="text-xs font-semibold tracking-wide text-muted-foreground uppercase">
+              {fromCopy(copy, section.labelKey)}
+            </h4>
+            {section.cells.map((cell) => (
+              <div
+                key={cell.key}
+                className="flex flex-col gap-1.5 border-b border-border/60 pb-2.5 last:border-b-0 last:pb-0 sm:flex-row sm:items-start sm:justify-between sm:gap-4"
+              >
+                <div className="min-w-0">
+                  <p className="text-sm font-medium" title={cell.description}>
+                    {firstSentence(cell.description)}
+                  </p>
+                  <p className="mt-0.5 text-xs text-muted-foreground">
+                    {effectiveLabel(cell, forumTitles, copy)}
+                  </p>
+                </div>
+                <CellControl cell={cell} copy={copy} />
+              </div>
+            ))}
+          </section>
         ))}
-      </div>
 
-      <div>
-        <SubmitButton>
-          {formatFromCopy(copy, 'adminForum.saveGroup', { group: row.groupTitle })}
-        </SubmitButton>
-      </div>
-    </form>
+        <div className="flex items-center gap-3">
+          <SubmitButton>
+            {formatFromCopy(copy, 'adminForum.saveGroup', { group: row.groupTitle })}
+          </SubmitButton>
+          {state.notice === 'saved' && (
+            <span className="text-xs text-muted-foreground">{fromCopy(copy, 'admin.saved')}</span>
+          )}
+        </div>
+      </form>
+    </Disclosure>
   )
 }
 

package/src/components/admin/marketplace-listing.tsx

@@ -70,7 +70,7 @@ export function MarketplaceListingCard({
           <ol className="flex flex-col gap-1">
             {listing.installSteps.map((step) => (
               <li key={step} className="text-xs">
-                {step.startsWith('pnpm ') || step.startsWith('community ') ? (
+                {step.startsWith('npm ') || step.startsWith('community ') ? (
                   <code className="rounded bg-muted px-1.5 py-0.5">{step}</code>
                 ) : (
                   <span className="text-muted-foreground">{step}</span>

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)