@meith/web 0.33.3 → 0.34.0

package/src/components/install/restore-form.tsx

@@ -0,0 +1,154 @@
+'use client'
+
+import { useActionState } from 'react'
+
+import {
+  Alert,
+  AlertDescription,
+  AlertTitle,
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@meith/ui'
+import { Button } from '@meith/ui/button'
+
+import { useFocusOnFail } from '@/components/auth/form-controls'
+import { type Copy, formatFromCopy, fromCopy } from '@/components/shell/copy'
+import { type InstallRestoreState, installRestoreAction } from '@/server/install-restore-actions'
+
+const EMPTY: InstallRestoreState = {}
+
+export interface RestoreCandidateView {
+  readonly name: string
+  readonly label: string
+  readonly size: string
+  readonly location: string
+}
+
+export function InstallRestoreForm({
+  candidates,
+  destination,
+  problem,
+  copy,
+}: {
+  candidates: readonly RestoreCandidateView[]
+  destination: string | null
+  problem: string | null
+  copy: Copy
+}) {
+  const [state, submit, pending] = useActionState(installRestoreAction, EMPTY)
+  const errorRef = useFocusOnFail<HTMLDivElement>(state.error !== undefined)
+
+  if (state.outcome !== undefined) {
+    const { outcome } = state
+    return (
+      <Card>
+        <CardHeader>
+          <CardTitle>{fromCopy(copy, 'install.restore.doneTitle')}</CardTitle>
+          <CardDescription>
+            {formatFromCopy(copy, 'install.restore.doneDetail', {
+              bundle: outcome.bundle,
+              version: outcome.version,
+              posts: outcome.posts,
+            })}
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="flex flex-col gap-3 text-sm">
+          {outcome.migrationsApplied > 0 && (
+            <p>
+              {formatFromCopy(copy, 'install.restore.migrated', {
+                count: outcome.migrationsApplied,
+              })}
+            </p>
+          )}
+          {outcome.uploads === 'none' && <p>{fromCopy(copy, 'install.restore.noUploads')}</p>}
+          {outcome.skippedKeys > 0 && (
+            <p className="text-destructive">
+              {formatFromCopy(copy, 'install.restore.skipped', { count: outcome.skippedKeys })}
+            </p>
+          )}
+          <p>{fromCopy(copy, 'install.restore.next')}</p>
+          <p>
+            <a href="/login" className="underline">
+              {fromCopy(copy, 'install.restore.signIn')}
+            </a>
+          </p>
+        </CardContent>
+      </Card>
+    )
+  }
+
+  return (
+    <Card aria-labelledby="install-restore">
+      <CardHeader>
+        <CardTitle id="install-restore">{fromCopy(copy, 'install.restore.title')}</CardTitle>
+        <CardDescription>{fromCopy(copy, 'install.restore.hint')}</CardDescription>
+      </CardHeader>
+      <CardContent className="flex flex-col gap-4">
+        {problem !== null && (
+          <Alert tone="warning">
+            <AlertDescription>{problem}</AlertDescription>
+          </Alert>
+        )}
+        {candidates.length === 0 ? (
+          <p className="text-sm text-muted-foreground">
+            {destination === null
+              ? fromCopy(copy, 'install.restore.noneLocal')
+              : formatFromCopy(copy, 'install.restore.noneAnywhere', { destination })}
+          </p>
+        ) : (
+          <form action={submit} className="flex flex-col gap-4">
+            {state.error !== undefined && (
+              <Alert tone="error" ref={errorRef} tabIndex={-1}>
+                <AlertDescription>
+                  <AlertTitle>{fromCopy(copy, 'install.restore.notRestored')}</AlertTitle>{' '}
+                  {state.error}
+                </AlertDescription>
+              </Alert>
+            )}
+            <fieldset className="flex flex-col gap-2">
+              <legend className="text-sm font-medium">
+                {fromCopy(copy, 'install.restore.pick')}
+              </legend>
+              {candidates.map((candidate, index) => (
+                <label key={candidate.name} className="flex items-start gap-2 text-sm">
+                  <input
+                    type="radio"
+                    name="bundle"
+                    value={candidate.name}
+                    defaultChecked={index === 0}
+                    className="mt-1 size-4"
+                  />
+                  <span className="flex min-w-0 flex-col">
+                    <span className="font-medium">{candidate.label}</span>
+                    <span className="truncate text-xs text-muted-foreground">
+                      <code>{candidate.name}</code> · {candidate.size} · {candidate.location}
+                    </span>
+                  </span>
+                </label>
+              ))}
+            </fieldset>
+            <label className="flex items-start gap-2 text-sm">
+              <input type="checkbox" name="confirm" value="1" className="mt-1 size-4" />
+              <span>{fromCopy(copy, 'install.restore.confirm')}</span>
+            </label>
+            <div className="flex flex-wrap items-center gap-3">
+              <Button type="submit" variant="secondary" size="lg" disabled={pending}>
+                {pending
+                  ? fromCopy(copy, 'install.restore.restoring')
+                  : fromCopy(copy, 'install.restore.submit')}
+              </Button>
+              <p className="text-xs text-muted-foreground">
+                {pending
+                  ? fromCopy(copy, 'install.restore.pendingNote')
+                  : fromCopy(copy, 'install.restore.idleNote')}
+              </p>
+            </div>
+          </form>
+        )}
+      </CardContent>
+    </Card>
+  )
+}

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

@@ -11,7 +11,8 @@ import { type Copy, formatFromCopy, fromCopy } from '../shell/copy'
 const BUTTON =
   'inline-flex h-8 items-center rounded-md border border-border px-3 text-xs font-medium hover:opacity-90 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring'
 const FIELD =
-  'h-8 rounded-md border border-border bg-background px-2 text-xs focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring'
+  'h-8 min-w-0 max-w-full rounded-md border border-border bg-background px-2 text-xs focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring'
+const LABEL = 'flex min-w-0 max-w-full items-center text-xs'
 
 export interface SplitPoint {
   readonly id: number
@@ -39,9 +40,9 @@ export function ThreadSurgeryForm({
         <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">
+            <label className={LABEL}>
               <span className="sr-only">{fromCopy(copy, 'moderationForm.surgery.fromSr')}</span>
-              <select name="fromPostId" className={FIELD}>
+              <select name="fromPostId" className={`${FIELD} sm:max-w-64`}>
                 {splitPoints.map((point) => (
                   <option key={point.id} value={point.id}>
                     {formatFromCopy(copy, 'moderationForm.surgery.splitPoint', {
@@ -52,7 +53,7 @@ export function ThreadSurgeryForm({
                 ))}
               </select>
             </label>
-            <label className="flex items-center gap-2 text-xs">
+            <label className={LABEL}>
               <span className="sr-only">{fromCopy(copy, 'moderationForm.surgery.titleSr')}</span>
               <input
                 type="text"
@@ -76,7 +77,7 @@ export function ThreadSurgeryForm({
         <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">
+            <label className={LABEL}>
               <span className="sr-only">{fromCopy(copy, 'moderationForm.surgery.mergeSr')}</span>
               <input
                 type="number"

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

@@ -11,6 +11,27 @@ import { type Copy, fromCopy } from '../shell/copy'
 
 const BUTTON =
   'inline-flex h-8 items-center rounded-md border border-border px-3 text-xs font-medium hover:opacity-90 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring'
+const SELECT =
+  'h-8 min-w-0 max-w-full rounded-md border border-border bg-background px-2 text-xs focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring'
+const SUMMARY =
+  'flex cursor-pointer list-none items-center gap-2 rounded-lg px-4 py-3 text-xs font-medium text-muted-foreground select-none hover:text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring [&::-webkit-details-marker]:hidden'
+
+function Chevron() {
+  return (
+    <svg
+      aria-hidden="true"
+      viewBox="0 0 12 12"
+      className="size-3 shrink-0 transition-transform group-open/tools:rotate-90"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path d="m4.5 3 3 3-3 3" />
+    </svg>
+  )
+}
 
 export interface MoveOption {
   readonly id: number
@@ -25,6 +46,7 @@ export function ThreadToolsForm({
   moveTargets,
   heading,
   copy,
+  open = false,
   children,
 }: {
   threadId: number
@@ -34,74 +56,75 @@ export function ThreadToolsForm({
   moveTargets: readonly MoveOption[]
   heading: string
   copy: Copy
+  open?: boolean
   children?: React.ReactNode
 }) {
   const [state, action] = useActionState(threadToolAction, EMPTY_STATE)
 
   return (
-    <section
-      aria-label={heading}
-      className="flex flex-col gap-2 rounded-lg border border-border bg-secondary px-4 py-3"
-    >
-      <div className="flex flex-wrap items-center gap-3">
-        <span className="text-xs font-medium text-muted-foreground">{heading}</span>
-
-        <form action={action} className="flex flex-wrap items-center gap-3">
-          <input type="hidden" name="threadId" value={threadId} />
+    <section aria-label={heading} className="rounded-lg border border-border bg-secondary">
+      <details className="group/tools" open={open || state.error !== undefined ? true : undefined}>
+        <summary className={SUMMARY}>
+          <Chevron />
+          {heading}
+        </summary>
 
-          {rights.lock && (
-            <PendingButton name="tool" value={isLocked ? 'unlock' : 'lock'} className={BUTTON}>
-              {isLocked
-                ? fromCopy(copy, 'moderationForm.tool.unlock')
-                : fromCopy(copy, 'moderationForm.tool.lock')}
-            </PendingButton>
-          )}
-          {rights.stick && (
-            <PendingButton name="tool" value={isSticky ? 'unstick' : 'stick'} className={BUTTON}>
-              {isSticky
-                ? fromCopy(copy, 'moderationForm.tool.unpin')
-                : fromCopy(copy, 'moderationForm.tool.pin')}
-            </PendingButton>
-          )}
-          {rights.delete && (
-            <PendingButton
-              name="tool"
-              value="delete"
-              className={`${BUTTON} border-destructive/40 text-destructive`}
-            >
-              {fromCopy(copy, 'moderationForm.tool.deleteThread')}
-            </PendingButton>
-          )}
+        <div className="flex flex-col gap-2 px-4 pb-3">
+          <form action={action} className="flex flex-wrap items-center gap-2">
+            <input type="hidden" name="threadId" value={threadId} />
 
-          {rights.move && moveTargets.length > 0 && (
-            <span className="flex items-center gap-2">
-              <label className="flex items-center gap-2 text-xs">
-                <span className="sr-only">{fromCopy(copy, 'moderationForm.moveTo')}</span>
-                <select
-                  name="toForumId"
-                  className="h-8 rounded-md border border-border bg-background px-2 text-xs focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
-                >
-                  {moveTargets.map((forum) => (
-                    <option key={forum.id} value={forum.id}>
-                      {forum.title}
-                    </option>
-                  ))}
-                </select>
-              </label>
-              <PendingButton name="tool" value="move" className={BUTTON}>
-                {fromCopy(copy, 'moderationForm.tool.move')}
+            {rights.lock && (
+              <PendingButton name="tool" value={isLocked ? 'unlock' : 'lock'} className={BUTTON}>
+                {isLocked
+                  ? fromCopy(copy, 'moderationForm.tool.unlock')
+                  : fromCopy(copy, 'moderationForm.tool.lock')}
+              </PendingButton>
+            )}
+            {rights.stick && (
+              <PendingButton name="tool" value={isSticky ? 'unstick' : 'stick'} className={BUTTON}>
+                {isSticky
+                  ? fromCopy(copy, 'moderationForm.tool.unpin')
+                  : fromCopy(copy, 'moderationForm.tool.pin')}
               </PendingButton>
-              <PendingButton name="tool" value="copy" className={BUTTON}>
-                {fromCopy(copy, 'moderationForm.tool.copy')}
+            )}
+            {rights.delete && (
+              <PendingButton
+                name="tool"
+                value="delete"
+                className={`${BUTTON} border-destructive/40 text-destructive`}
+              >
+                {fromCopy(copy, 'moderationForm.tool.deleteThread')}
               </PendingButton>
-            </span>
-          )}
-        </form>
+            )}
+
+            {rights.move && moveTargets.length > 0 && (
+              <span className="flex min-w-0 max-w-full basis-full flex-wrap items-center gap-2 sm:basis-auto">
+                <label className="flex min-w-0 max-w-full flex-1 items-center text-xs sm:flex-none">
+                  <span className="sr-only">{fromCopy(copy, 'moderationForm.moveTo')}</span>
+                  <select name="toForumId" className={`${SELECT} w-full sm:w-auto sm:max-w-56`}>
+                    {moveTargets.map((forum) => (
+                      <option key={forum.id} value={forum.id}>
+                        {forum.title}
+                      </option>
+                    ))}
+                  </select>
+                </label>
+                <PendingButton name="tool" value="move" className={BUTTON}>
+                  {fromCopy(copy, 'moderationForm.tool.move')}
+                </PendingButton>
+                <PendingButton name="tool" value="copy" className={BUTTON}>
+                  {fromCopy(copy, 'moderationForm.tool.copy')}
+                </PendingButton>
+              </span>
+            )}
+          </form>
+
+          {children}
 
-        {children}
-      </div>
+          <FormError message={state.error} />
+        </div>
+      </details>
 
-      <FormError message={state.error} />
       <ConfirmDialog confirm={state.confirm} action={action} />
     </section>
   )

package/src/components/shell/header-peek-enhancer.tsx

@@ -0,0 +1,58 @@
+'use client'
+
+import { useEffect } from 'react'
+
+const PEEKING_HEADER = '[data-header-peek]'
+
+const SETTLE = 8
+
+function peek(header: HTMLElement): () => void {
+  let last = window.scrollY
+  let ticking = false
+
+  function settle() {
+    ticking = false
+    const y = Math.max(0, window.scrollY)
+    const delta = y - last
+
+    if (y <= header.offsetHeight) {
+      header.removeAttribute('data-peek')
+    } else if (delta > SETTLE) {
+      header.setAttribute('data-peek', '')
+    } else if (delta < -SETTLE) {
+      header.removeAttribute('data-peek')
+    } else {
+      return
+    }
+    last = y
+  }
+
+  function onScroll() {
+    if (ticking) return
+    ticking = true
+    window.requestAnimationFrame(settle)
+  }
+
+  function onFocusIn() {
+    header.removeAttribute('data-peek')
+  }
+
+  window.addEventListener('scroll', onScroll, { passive: true })
+  header.addEventListener('focusin', onFocusIn)
+
+  return () => {
+    window.removeEventListener('scroll', onScroll)
+    header.removeEventListener('focusin', onFocusIn)
+    header.removeAttribute('data-peek')
+  }
+}
+
+export function HeaderPeekEnhancer() {
+  useEffect(() => {
+    const header = document.querySelector<HTMLElement>(PEEKING_HEADER)
+    if (header === null) return
+    return peek(header)
+  }, [])
+
+  return null
+}

package/src/components/shell/page-shell.tsx

@@ -3,6 +3,7 @@ import { currentRequestId } from '@meith/core/logger'
 import { requireSlot, slotCopy } from '@meith/theme-kit'
 
 import { LogoutForm } from '@/components/account/logout-form'
+import { HeaderPeekEnhancer } from '@/components/shell/header-peek-enhancer'
 import { InstallBanner } from '@/components/shell/install-banner'
 import { NavDisclosureEnhancer } from '@/components/shell/nav-disclosure-enhancer'
 import { NotificationMenu } from '@/components/shell/notification-menu'
@@ -154,6 +155,7 @@ export async function PageShell({ actor, children }: { actor: Actor; children: R
       </Header>
 
       <NavDisclosureEnhancer />
+      <HeaderPeekEnhancer />
 
       {await boardRegion('header.notice', actor)}
 

package/src/server/backup-admin-actions.ts

@@ -0,0 +1,115 @@
+'use server'
+
+import { rm } from 'node:fs/promises'
+
+import { revalidatePath } from 'next/cache'
+
+import { isBundleName } from '@meith/backup'
+import { ValidationError } from '@meith/core'
+import { msg } from '@meith/i18n'
+
+import { recordAdminAction, requireAdmin, requireFreshAdmin } from './admin'
+import type { FormState } from './auth-form-state'
+import {
+  backupsAvailable,
+  currentBackupSettings,
+  destinationFor,
+  localBundlePath,
+  requireBackupRuns,
+} from './backup-admin'
+import { requireConfirmation } from './confirm'
+import { formStateReporter } from './form-state-reporter'
+import { tr } from './i18n'
+
+const toFormState = formStateReporter('backup-admin', 'backup action failed')
+
+const BACKUPS_PATH = '/admin/system/backups'
+
+function refreshBackupsScreen(): void {
+  revalidatePath(BACKUPS_PATH)
+}
+
+export async function requestBackupAction(): Promise<FormState> {
+  try {
+    const admin = await requireAdmin()
+    if (backupsAvailable() !== 'available') {
+      throw new ValidationError(msg('error.app.backups-not-on-this-deployment'))
+    }
+
+    const { queued } = await requireBackupRuns().enqueue({
+      trigger: 'manual',
+      requestedByUserId: admin.session.userId,
+      now: new Date(),
+    })
+
+    refreshBackupsScreen()
+    if (queued) await recordAdminAction({ action: 'backup.requested' })
+    return { notice: queued ? 'queued' : 'already' }
+  } catch (err) {
+    return toFormState(err)
+  }
+}
+
+function bundleNameFrom(form: FormData): string {
+  const raw = form.get('name')
+  const name = typeof raw === 'string' ? raw.trim() : ''
+  if (!isBundleName(name)) throw new ValidationError(msg('error.app.not-a-backup-bundle-name'))
+  return name
+}
+
+export async function deleteBackupAction(_prev: FormState, form: FormData): Promise<FormState> {
+  try {
+    await requireFreshAdmin()
+    const name = bundleNameFrom(form)
+
+    const confirm = requireConfirmation(form, await tr('adminBackups.confirm.delete'))
+    if (confirm !== null) return confirm
+
+    const local = await localBundlePath(name)
+    if (local !== null) await rm(local, { force: true })
+
+    let remote = false
+    const destination = destinationFor(await currentBackupSettings())
+    if (destination !== undefined) {
+      const listed = await destination.list()
+      if (listed.some((bundle) => bundle.name === name)) {
+        await destination.delete(name)
+        remote = true
+      }
+    }
+
+    if (local === null && !remote) throw new ValidationError(msg('error.app.no-such-bundle'))
+
+    refreshBackupsScreen()
+    await recordAdminAction({
+      action: 'backup.deleted',
+      detail: { name, local: local !== null, remote },
+    })
+    return { notice: 'deleted', values: { name } }
+  } catch (err) {
+    return toFormState(err)
+  }
+}
+
+export async function testBackupDestinationAction(): Promise<FormState> {
+  try {
+    await requireAdmin()
+    const settings = await currentBackupSettings()
+    if (settings.destination.problem !== null) {
+      throw new ValidationError(settings.destination.problem)
+    }
+    const destination = destinationFor(settings)
+    if (destination === undefined) {
+      throw new ValidationError(msg('error.app.no-off-site-destination'))
+    }
+
+    const bundles = await destination.list()
+    await recordAdminAction({
+      action: 'backup.destination_tested',
+      detail: { count: bundles.length },
+    })
+    return { notice: 'reachable', values: { count: String(bundles.length) } }
+  } catch (err) {
+    return toFormState(err)
+  }
+}