@meith/web 0.23.1 → 0.23.3

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/app/(board)/usercp/security/verify/page.tsx

@@ -47,6 +47,9 @@ export default async function VerifySecurityPage({
           codeSubmit: tr.t('credentialProof.codeSubmit'),
           passwordLabel: tr.t('credentialProof.passwordLabel'),
           passwordSubmit: tr.t('credentialProof.passwordSubmit'),
+          recoveryLabel: tr.t('otp.recoveryLabel'),
+          useRecovery: tr.t('otp.useRecovery'),
+          useApp: tr.t('otp.useApp'),
         }}
         hasPassword={account?.passwordHash !== null && account !== null}
         hasSecondFactor={factor.enrolled}

package/app/admin/layout.tsx

@@ -26,7 +26,7 @@ export default async function AdminLayout({ children }: { children: React.ReactN
       <main
         id="board-content"
         tabIndex={-1}
-        className="flex min-h-screen items-center justify-center px-6 py-12"
+        className="flex min-h-screen flex-col items-center justify-center gap-4 px-6 py-12"
       >
         <AdminSignInForm
           next="/admin"
@@ -34,6 +34,9 @@ export default async function AdminLayout({ children }: { children: React.ReactN
           idleMinutes={ADMIN_IDLE_MINUTES}
           copy={adminFormsCopy(await getTranslator())}
         />
+        <a href="/" className="text-sm text-muted-foreground hover:text-foreground">
+          {await tr('adminPanel.cancel')}
+        </a>
       </main>
     )
   }
@@ -64,9 +67,6 @@ export default async function AdminLayout({ children }: { children: React.ReactN
             {await tr('page.control-panel')}
           </a>
           <div className="ml-auto flex shrink-0 items-center gap-3 text-sm whitespace-nowrap sm:gap-4">
-            <a href="/" className="text-muted-foreground hover:text-foreground">
-              {await tr('page.board')}
-            </a>
             <AdminSignOutForm copy={adminFormsCopy(t)} />
           </div>
         </div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@meith/web",
-  "version": "0.23.1",
+  "version": "0.23.3",
   "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.1",
-    "@meith/admin": "0.23.1",
-    "@meith/antispam": "0.23.1",
-    "@meith/api": "0.23.1",
-    "@meith/attachments": "0.23.1",
-    "@meith/authorization": "0.23.1",
-    "@meith/avatars": "0.23.1",
-    "@meith/core": "0.23.1",
-    "@meith/db": "0.23.1",
-    "@meith/demo": "0.23.1",
-    "@meith/drafts": "0.23.1",
-    "@meith/drivers": "0.23.1",
-    "@meith/events": "0.23.1",
-    "@meith/forums": "0.23.1",
-    "@meith/groups": "0.23.1",
-    "@meith/i18n": "0.23.1",
-    "@meith/import": "0.23.1",
-    "@meith/install": "0.23.1",
-    "@meith/mail": "0.23.1",
-    "@meith/markdown": "0.23.1",
-    "@meith/marketplace": "0.23.1",
-    "@meith/messages": "0.23.1",
-    "@meith/moderation": "0.23.1",
-    "@meith/notifications": "0.23.1",
-    "@meith/plugin-calendar": "0.23.1",
-    "@meith/plugin-dues": "0.23.1",
-    "@meith/plugin-kit": "0.23.1",
-    "@meith/polls": "0.23.1",
-    "@meith/posts": "0.23.1",
-    "@meith/profile-fields": "0.23.1",
-    "@meith/relations": "0.23.1",
-    "@meith/reputation": "0.23.1",
-    "@meith/runtime": "0.23.1",
-    "@meith/search": "0.23.1",
-    "@meith/settings": "0.23.1",
-    "@meith/signatures": "0.23.1",
-    "@meith/subscriptions": "0.23.1",
-    "@meith/tasks": "0.23.1",
-    "@meith/theme-clubhouse": "0.23.1",
-    "@meith/theme-default": "0.23.1",
-    "@meith/theme-kit": "0.23.1",
-    "@meith/theme-midnight": "0.23.1",
-    "@meith/theme-phasebook": "0.23.1",
-    "@meith/theme-raidframe": "0.23.1",
-    "@meith/threads": "0.23.1",
-    "@meith/ui": "0.23.1",
-    "@meith/upgrade": "0.23.1"
+    "@meith/accounts": "0.23.3",
+    "@meith/admin": "0.23.3",
+    "@meith/antispam": "0.23.3",
+    "@meith/api": "0.23.3",
+    "@meith/attachments": "0.23.3",
+    "@meith/authorization": "0.23.3",
+    "@meith/avatars": "0.23.3",
+    "@meith/core": "0.23.3",
+    "@meith/db": "0.23.3",
+    "@meith/demo": "0.23.3",
+    "@meith/drafts": "0.23.3",
+    "@meith/drivers": "0.23.3",
+    "@meith/events": "0.23.3",
+    "@meith/forums": "0.23.3",
+    "@meith/groups": "0.23.3",
+    "@meith/i18n": "0.23.3",
+    "@meith/import": "0.23.3",
+    "@meith/install": "0.23.3",
+    "@meith/mail": "0.23.3",
+    "@meith/markdown": "0.23.3",
+    "@meith/marketplace": "0.23.3",
+    "@meith/messages": "0.23.3",
+    "@meith/moderation": "0.23.3",
+    "@meith/notifications": "0.23.3",
+    "@meith/plugin-calendar": "0.23.3",
+    "@meith/plugin-dues": "0.23.3",
+    "@meith/plugin-kit": "0.23.3",
+    "@meith/polls": "0.23.3",
+    "@meith/posts": "0.23.3",
+    "@meith/profile-fields": "0.23.3",
+    "@meith/relations": "0.23.3",
+    "@meith/reputation": "0.23.3",
+    "@meith/runtime": "0.23.3",
+    "@meith/search": "0.23.3",
+    "@meith/settings": "0.23.3",
+    "@meith/signatures": "0.23.3",
+    "@meith/subscriptions": "0.23.3",
+    "@meith/tasks": "0.23.3",
+    "@meith/theme-clubhouse": "0.23.3",
+    "@meith/theme-default": "0.23.3",
+    "@meith/theme-kit": "0.23.3",
+    "@meith/theme-midnight": "0.23.3",
+    "@meith/theme-phasebook": "0.23.3",
+    "@meith/theme-raidframe": "0.23.3",
+    "@meith/threads": "0.23.3",
+    "@meith/ui": "0.23.3",
+    "@meith/upgrade": "0.23.3"
   },
   "scripts": {
     "dev": "next dev",

package/src/components/account/credential-proof-form.tsx

@@ -9,6 +9,7 @@ import { EMPTY_STATE } from '@/server/auth-form-state'
 import { proveCredentialAction } from '@/server/credential-proof-actions'
 
 import { FormError } from '../auth/form-controls'
+import { OtpField } from '../auth/otp-field'
 
 export interface CredentialProofCopy {
   readonly codeConsumed: string
@@ -16,6 +17,9 @@ export interface CredentialProofCopy {
   readonly codeSubmit: string
   readonly passwordLabel: string
   readonly passwordSubmit: string
+  readonly recoveryLabel: string
+  readonly useRecovery: string
+  readonly useApp: string
 }
 
 export function CredentialProofForm({
@@ -59,10 +63,16 @@ export function CredentialProofForm({
         >
           <input type="hidden" name="method" value="code" />
           <input type="hidden" name="next" value={next} />
-          <label className="flex flex-col gap-1 text-sm">
-            <span className="font-medium">{copy.codeLabel}</span>
-            <Input name="code" inputMode="numeric" autoComplete="one-time-code" required />
-          </label>
+          <OtpField
+            label={copy.codeLabel}
+            name="code"
+            recovery={{
+              label: copy.recoveryLabel,
+              toRecovery: copy.useRecovery,
+              toApp: copy.useApp,
+              hint: copy.codeConsumed,
+            }}
+          />
           <p className="text-sm text-muted-foreground">{copy.codeConsumed}</p>
           <div>
             <Button type="submit" variant="primary">

package/src/components/account/two-factor-forms.tsx

@@ -15,6 +15,7 @@ import {
 import { RECOVERY_CODES_FIELD } from '@/view/two-factor'
 
 import { Field, FormError } from '../auth/form-controls'
+import { OtpField, otpRecoveryFromCopy } from '../auth/otp-field'
 import { type Copy, fromCopy } from '../shell/copy'
 
 const CARD = 'flex flex-col gap-4 rounded-lg border border-border bg-card p-5'
@@ -96,10 +97,9 @@ export function TwoFactorSetup({
 
       <form action={action} className="flex flex-col gap-4">
         <FormError message={state.error} />
-        <Field
+        <OtpField
           label={fromCopy(copy, 'accountForm.twoFactor.codeLabel')}
           name="code"
-          autoComplete="one-time-code"
           hint={fromCopy(copy, 'accountForm.twoFactor.codeHint')}
         />
         <div className="flex flex-wrap gap-2">
@@ -166,12 +166,12 @@ export function TwoFactorPanel({
         autoComplete="current-password"
       />
     ) : (
-      <Field
+      <OtpField
         id={`${which}-code`}
         label={fromCopy(copy, 'accountForm.twoFactor.codeProofLabel')}
         name="code"
-        autoComplete="one-time-code"
         hint={fromCopy(copy, 'accountForm.twoFactor.codeProofHint')}
+        recovery={otpRecoveryFromCopy(copy)}
       />
     )
 

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

@@ -6,6 +6,7 @@ import { adminSignInAction, adminSignOutAction } from '@/server/admin-actions'
 import { EMPTY_STATE } from '@/server/auth-form-state'
 
 import { FormError } from '../auth/form-controls'
+import { OtpField, otpRecoveryFromCopy } from '../auth/otp-field'
 import { type Copy, formatFromCopy, fromCopy } from '../shell/copy'
 
 export function AdminSignInForm({
@@ -50,19 +51,13 @@ export function AdminSignInForm({
         />
       </label>
 
-      <label className="flex flex-col gap-1 text-sm">
-        <span className="font-medium">{fromCopy(copy, 'adminPanel.twoFactorCode')}</span>
-        <input
-          type="text"
-          name="code"
-          inputMode="numeric"
-          autoComplete="one-time-code"
-          className="h-10 rounded-md border border-input bg-background px-3 text-sm outline-none focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/40"
-        />
-        <span className="text-xs text-muted-foreground">
-          {fromCopy(copy, 'adminPanel.twoFactorCodeHint')}
-        </span>
-      </label>
+      <OtpField
+        label={fromCopy(copy, 'adminPanel.twoFactorCode')}
+        name="code"
+        required={false}
+        hint={fromCopy(copy, 'adminPanel.twoFactorCodeHint')}
+        recovery={otpRecoveryFromCopy(copy)}
+      />
 
       <button
         type="submit"

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

@@ -10,6 +10,7 @@ import { removeBadgeAction, saveBadgeAction } from '@/server/group-badge-actions
 
 import { FormError, SubmitButton } from '../auth/form-controls'
 import { type Copy, formatFromCopy, fromCopy } from '../shell/copy'
+import { Saved } from './form-bits'
 
 const GHOST =
   'inline-flex h-8 items-center justify-center rounded-md border border-border px-3 text-xs font-medium hover:bg-accent hover:text-accent-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring'
@@ -39,13 +40,11 @@ export function BadgeUploadForm({
       <h3 className="text-sm font-medium">{label}</h3>
 
       <FormError message={saved.error ?? removed.error} />
-      {(saved.notice === 'saved' || removed.notice === 'removed') && (
-        <p role="status" className="rounded-md border border-border bg-muted px-3 py-2 text-sm">
-          {saved.notice === 'saved'
-            ? fromCopy(copy, 'admin.saved')
-            : fromCopy(copy, 'adminPanel.badge.removed')}
-        </p>
-      )}
+      <Saved when={saved.notice === 'saved' || removed.notice === 'removed'}>
+        {saved.notice === 'saved'
+          ? fromCopy(copy, 'admin.saved')
+          : fromCopy(copy, 'adminPanel.badge.removed')}
+      </Saved>
 
       <div
         className={`flex min-h-12 items-center justify-center rounded-md border border-border bg-card p-2 ${

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

@@ -8,6 +8,7 @@ import { removeLogoAction, saveLogoAction } from '@/server/branding-actions'
 
 import { FormError, SubmitButton } from '../auth/form-controls'
 import { type Copy, formatFromCopy, fromCopy } from '../shell/copy'
+import { Saved } from './form-bits'
 
 export interface LogoSlot {
   readonly scheme: 'light' | 'dark'
@@ -41,16 +42,10 @@ export function LogoUploadForm({
       </div>
 
       <FormError message={saved.error ?? removed.error} />
-      {saved.notice === 'saved' && (
-        <p role="status" className="rounded-md border border-border bg-muted px-3 py-2 text-sm">
-          {fromCopy(copy, 'adminPanel.branding.saved')}
-        </p>
-      )}
-      {removed.notice === 'removed' && (
-        <p role="status" className="rounded-md border border-border bg-muted px-3 py-2 text-sm">
-          {fromCopy(copy, 'adminPanel.branding.removed')}
-        </p>
-      )}
+      <Saved when={saved.notice === 'saved'}>{fromCopy(copy, 'adminPanel.branding.saved')}</Saved>
+      <Saved when={removed.notice === 'removed'}>
+        {fromCopy(copy, 'adminPanel.branding.removed')}
+      </Saved>
 
       <div
         className={`flex min-h-16 items-center justify-center rounded-md border border-border bg-card p-3 ${

package/src/components/admin/form-bits.tsx

@@ -1,11 +1,13 @@
+import { Alert, AlertDescription } from '@meith/ui'
+
 export const INPUT =
   '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'
 
-export function Saved({ when, children }: { when: boolean; children: React.ReactNode }) {
+export function Saved({ when = true, children }: { when?: boolean; children: React.ReactNode }) {
   if (!when) return null
   return (
-    <p role="status" className="rounded-md border border-border bg-muted px-3 py-2 text-sm">
-      {children}
-    </p>
+    <Alert tone="success">
+      <AlertDescription>{children}</AlertDescription>
+    </Alert>
   )
 }