@meith/web 0.23.1 → 0.23.3

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'
@@ -18,7 +19,7 @@ import {
 
 import { FormError, SubmitButton } from '../auth/form-controls'
 import { type Copy, formatFromCopy, fromCopy } from '../shell/copy'
-import { INPUT } from './form-bits'
+import { INPUT, Saved } from './form-bits'
 
 const TOGGLES = [
   { name: 'isOpen', labelKey: 'adminForum.toggle.isOpen' },
@@ -48,11 +49,7 @@ export function ForumOptionsForm({ forum, copy }: { forum: ForumOptionsValues; c
   return (
     <form action={action} className="flex flex-col gap-4" noValidate>
       <FormError message={state.error} />
-      {state.notice === 'saved' && (
-        <p className="rounded-md border border-border bg-muted px-3 py-2 text-sm">
-          {fromCopy(copy, 'admin.saved')}
-        </p>
-      )}
+      <Saved when={state.notice === 'saved'}>{fromCopy(copy, 'admin.saved')}</Saved>
       <input type="hidden" name="forumId" value={forum.id} />
 
       <label className="flex flex-col gap-1 text-sm">
@@ -153,38 +150,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 +303,48 @@ 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 font-medium text-moderation-approved">
+              {fromCopy(copy, 'admin.saved')}
+            </span>
+          )}
+        </div>
+      </form>
+    </Disclosure>
   )
 }
 
@@ -248,11 +364,7 @@ export function CopyPermissionsForm({
   return (
     <form action={action} className="flex flex-col gap-3">
       <FormError message={state.error} />
-      {state.notice === 'copied' && (
-        <p className="rounded-md border border-border bg-muted px-3 py-2 text-sm">
-          {fromCopy(copy, 'adminForum.copied')}
-        </p>
-      )}
+      <Saved when={state.notice === 'copied'}>{fromCopy(copy, 'adminForum.copied')}</Saved>
       <input type="hidden" name="forumId" value={forumId} />
       <div>
         <SubmitButton>
@@ -300,11 +412,7 @@ export function CreateForumForm({
   return (
     <form action={action} className="flex flex-col gap-3" noValidate>
       <FormError message={state.error} />
-      {state.notice === 'created' && (
-        <p className="rounded-md border border-border bg-muted px-3 py-2 text-sm">
-          {fromCopy(copy, 'admin.created')}
-        </p>
-      )}
+      <Saved when={state.notice === 'created'}>{fromCopy(copy, 'admin.created')}</Saved>
 
       <div className="grid gap-3 sm:grid-cols-2">
         <label className="flex flex-col gap-1 text-sm">
@@ -368,11 +476,7 @@ export function MoveForumForm({
   return (
     <form action={action} className="flex flex-col gap-3" noValidate>
       <FormError message={state.error} />
-      {state.notice === 'moved' && (
-        <p className="rounded-md border border-border bg-muted px-3 py-2 text-sm">
-          {fromCopy(copy, 'adminForum.moved')}
-        </p>
-      )}
+      <Saved when={state.notice === 'moved'}>{fromCopy(copy, 'adminForum.moved')}</Saved>
       <input type="hidden" name="forumId" value={forumId} />
 
       <label className="flex flex-col gap-1 text-sm">
@@ -471,9 +575,7 @@ export function ModeratorsPanel({
 
       <form action={appoint} className={PANEL_CARD}>
         <FormError message={appointState.error} />
-        {appointState.notice === 'saved' && (
-          <p className="text-sm text-muted-foreground">{fromCopy(copy, 'admin.saved')}</p>
-        )}
+        <Saved when={appointState.notice === 'saved'}>{fromCopy(copy, 'admin.saved')}</Saved>
         <h3 className="text-sm font-medium">{fromCopy(copy, 'adminForum.appointTitle')}</h3>
         <input type="hidden" name="forumId" value={forumId} />
 

package/src/components/admin/mail-test-card.tsx

@@ -7,6 +7,7 @@ import { EMPTY_STATE, type FormState } from '@/server/auth-form-state'
 import { sendTestMailAction } from '@/server/mail-test-actions'
 
 import { type Copy, fromCopy } from '../shell/copy'
+import { Saved } from './form-bits'
 
 export function MailTestCard({
   summary,
@@ -61,11 +62,7 @@ export function MailTestCard({
         </p>
       )}
 
-      {state.notice !== undefined && (
-        <p role="status" className="rounded-md border border-border bg-muted px-3 py-2 text-sm">
-          {state.notice}
-        </p>
-      )}
+      <Saved when={state.notice !== undefined}>{state.notice}</Saved>
 
       <form action={submit} className="flex flex-col gap-2">
         <div>

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

@@ -7,6 +7,7 @@ import { refreshMarketplaceAction } from '@/server/marketplace-actions'
 
 import { FormError } from '../auth/form-controls'
 import { type Copy, fromCopy } from '../shell/copy'
+import { Saved } from './form-bits'
 
 export function MarketplaceRefreshForm({ copy }: { copy: Copy }) {
   const [state, action] = useActionState(refreshMarketplaceAction, EMPTY_STATE)
@@ -14,11 +15,9 @@ export function MarketplaceRefreshForm({ copy }: { copy: Copy }) {
   return (
     <form action={action} className="flex flex-col gap-2">
       <FormError message={state.error} />
-      {state.notice === 'refreshed' && (
-        <p role="status" className="text-sm text-muted-foreground">
-          {fromCopy(copy, 'adminPanel.marketplace.refreshed')}
-        </p>
-      )}
+      <Saved when={state.notice === 'refreshed'}>
+        {fromCopy(copy, 'adminPanel.marketplace.refreshed')}
+      </Saved>
       <button
         type="submit"
         className="inline-flex h-9 w-fit items-center justify-center rounded-md border border-border px-3 text-sm font-medium transition-colors hover:border-primary hover:bg-accent"

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/admin/plugin-forms.tsx

@@ -11,7 +11,7 @@ import {
 
 import { FormError, SubmitButton } from '../auth/form-controls'
 import { type Copy, formatFromCopy, fromCopy } from '../shell/copy'
-import { INPUT } from './form-bits'
+import { INPUT, Saved } from './form-bits'
 
 export interface PluginSettingField {
   readonly key: string
@@ -87,11 +87,7 @@ export function PluginSettingsForm({
   return (
     <form action={action} className="flex flex-col gap-4" noValidate>
       <FormError message={state.error} />
-      {state.notice === 'saved' && (
-        <p role="status" className="rounded-md border border-border bg-muted px-3 py-2 text-sm">
-          {fromCopy(copy, 'adminPanel.plugin.saved')}
-        </p>
-      )}
+      <Saved when={state.notice === 'saved'}>{fromCopy(copy, 'adminPanel.plugin.saved')}</Saved>
 
       <input type="hidden" name="key" value={pluginKey} />
 

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

@@ -8,7 +8,7 @@ import type { SettingFieldModel, SettingGroupModel } from '@/view/admin-settings
 
 import { FormError, SubmitButton } from '../auth/form-controls'
 import { type Copy, fromCopy } from '../shell/copy'
-import { INPUT } from './form-bits'
+import { INPUT, Saved } from './form-bits'
 
 function Control({ setting, copy }: { setting: SettingFieldModel; copy: Copy }) {
   const { field, key, value } = setting
@@ -95,11 +95,7 @@ export function AdminSettingsForm({
   return (
     <form action={action} className="flex flex-col gap-8" noValidate>
       <FormError message={state.error} />
-      {state.notice === 'saved' && (
-        <p className="rounded-md border border-border bg-muted px-3 py-2 text-sm">
-          {fromCopy(copy, 'adminPanel.setting.saved')}
-        </p>
-      )}
+      <Saved when={state.notice === 'saved'}>{fromCopy(copy, 'adminPanel.setting.saved')}</Saved>
       {state.notice === 'unchanged' && (
         <p className="rounded-md border border-border bg-muted px-3 py-2 text-sm">
           {fromCopy(copy, 'adminPanel.setting.unchanged')}

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

@@ -14,13 +14,10 @@ import {
 
 import { FormError, SubmitButton } from '../auth/form-controls'
 import { type Copy, formatFromCopy, fromCopy } from '../shell/copy'
+import { Saved } from './form-bits'
 
 function Result({ children }: { children: React.ReactNode }) {
-  return (
-    <p role="status" className="rounded-md border border-border bg-muted px-3 py-2 text-sm">
-      {children}
-    </p>
-  )
+  return <Saved>{children}</Saved>
 }
 
 export function PruneSessionsForm({ prunable, copy }: { prunable: number; copy: Copy }) {

package/src/components/auth/otp-field.tsx

@@ -0,0 +1,142 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+
+import { Input, Field as UiField } from '@meith/ui'
+import { InputOTP, InputOTPGroup, InputOTPSlot, REGEXP_ONLY_DIGITS } from '@meith/ui/input-otp'
+
+import { type Copy, fromCopy } from '../shell/copy'
+
+const OTP_LENGTH = 6
+const OTP_SLOTS = Array.from({ length: OTP_LENGTH }, (_, index) => index)
+
+export interface OtpRecoveryCopy {
+  readonly label: string
+  readonly hint?: string | undefined
+  readonly toRecovery: string
+  readonly toApp: string
+}
+
+export function otpRecoveryFromCopy(copy: Copy, hint?: string): OtpRecoveryCopy {
+  return {
+    label: fromCopy(copy, 'otp.recoveryLabel'),
+    toRecovery: fromCopy(copy, 'otp.useRecovery'),
+    toApp: fromCopy(copy, 'otp.useApp'),
+    ...(hint === undefined ? {} : { hint }),
+  }
+}
+
+export interface OtpFieldProps {
+  readonly label: string
+  readonly name?: string
+  readonly id?: string
+  readonly hint?: string | undefined
+  readonly error?: string | undefined
+  readonly required?: boolean
+  readonly recovery?: OtpRecoveryCopy | undefined
+}
+
+function Toggle({ onClick, children }: { onClick: () => void; children: React.ReactNode }) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className="self-start text-xs text-muted-foreground underline underline-offset-4 transition-colors hover:text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
+    >
+      {children}
+    </button>
+  )
+}
+
+export function OtpField({
+  label,
+  name = 'code',
+  id,
+  hint,
+  error,
+  required = true,
+  recovery,
+}: OtpFieldProps) {
+  const [enhanced, setEnhanced] = useState(false)
+  const [value, setValue] = useState('')
+  const [useRecovery, setUseRecovery] = useState(false)
+
+  useEffect(() => {
+    setEnhanced(true)
+  }, [])
+
+  if (!enhanced) {
+    return (
+      <UiField
+        name={name}
+        label={label}
+        error={error ?? null}
+        {...(id === undefined ? {} : { id })}
+        {...(hint === undefined ? {} : { description: hint })}
+      >
+        {(control) => (
+          <Input
+            {...control}
+            type="text"
+            autoComplete="one-time-code"
+            required={required}
+            {...(recovery === undefined ? { inputMode: 'numeric' as const } : {})}
+          />
+        )}
+      </UiField>
+    )
+  }
+
+  if (recovery !== undefined && useRecovery) {
+    return (
+      <div className="flex flex-col gap-2">
+        <UiField
+          name={name}
+          label={recovery.label}
+          error={error ?? null}
+          {...(id === undefined ? {} : { id })}
+          {...(recovery.hint === undefined ? {} : { description: recovery.hint })}
+        >
+          {(control) => (
+            <Input {...control} type="text" autoComplete="one-time-code" required={required} />
+          )}
+        </UiField>
+        <Toggle onClick={() => setUseRecovery(false)}>{recovery.toApp}</Toggle>
+      </div>
+    )
+  }
+
+  return (
+    <div className="flex flex-col gap-2">
+      <UiField
+        name={name}
+        label={label}
+        error={error ?? null}
+        {...(id === undefined ? {} : { id })}
+        {...(hint === undefined ? {} : { description: hint })}
+      >
+        {(control) => (
+          <InputOTP
+            {...control}
+            maxLength={OTP_LENGTH}
+            pattern={REGEXP_ONLY_DIGITS}
+            value={value}
+            onChange={setValue}
+            inputMode="numeric"
+            autoComplete="one-time-code"
+            required={required}
+          >
+            <InputOTPGroup>
+              {OTP_SLOTS.map((slot) => (
+                <InputOTPSlot key={slot} index={slot} />
+              ))}
+            </InputOTPGroup>
+          </InputOTP>
+        )}
+      </UiField>
+      {recovery !== undefined ? (
+        <Toggle onClick={() => setUseRecovery(true)}>{recovery.toRecovery}</Toggle>
+      ) : null}
+    </div>
+  )
+}

package/src/components/auth/second-factor-form.tsx

@@ -8,7 +8,8 @@ import { abandonSecondFactorAction, verifySecondFactorAction } from '@/server/au
 import { EMPTY_STATE } from '@/server/auth-form-state'
 
 import { type Copy, fromCopy } from '../shell/copy'
-import { Field, FormError, SubmitButton } from './form-controls'
+import { FormError, SubmitButton } from './form-controls'
+import { OtpField, otpRecoveryFromCopy } from './otp-field'
 
 export function SecondFactorForm({
   next,
@@ -26,15 +27,15 @@ export function SecondFactorForm({
       <form action={action} className="flex flex-col gap-4" noValidate>
         <FormError message={state.error} />
 
-        <Field
+        <OtpField
           label={fromCopy(copy, 'authForm.secondFactor.code')}
           name="code"
-          autoComplete="one-time-code"
           hint={
             recoveryCodesLeft > 0
               ? fromCopy(copy, 'authForm.secondFactor.recoveryHint')
               : fromCopy(copy, 'authForm.secondFactor.recoveryHintExhausted')
           }
+          recovery={otpRecoveryFromCopy(copy)}
         />
 
         {next ? <input type="hidden" name="next" value={next} /> : null}