@meith/web 0.33.4 → 0.34.0

package/app/admin/settings/page.tsx

@@ -8,6 +8,7 @@ import { MailTestCard } from '@/components/admin/mail-test-card'
 import { AdminSettingsForm } from '@/components/admin/settings-form'
 import { PanelPage } from '@/components/shell/panel-page'
 import { adminPageContext } from '@/server/admin'
+import { destinationIsFromEnvironment } from '@/server/backup-admin'
 import { boardUrlResolution } from '@/server/board-url'
 import { faviconKey, faviconSrc } from '@/server/branding'
 import { getTranslator, tr } from '@/server/i18n'
@@ -54,6 +55,8 @@ export default async function AdminSettingsPage({
 
   const favicon = model.activeGroup === 'board' ? await faviconKey() : null
 
+  const backupFromEnvironment = model.activeGroup === 'backup' && destinationIsFromEnvironment()
+
   return (
     <PanelPage title={await tr('page.board-settings')} lede={t.t('adminSettings.lede')}>
       <Card>
@@ -189,6 +192,12 @@ export default async function AdminSettingsPage({
         </section>
       )}
 
+      {backupFromEnvironment && (
+        <section className="rounded-lg border border-border bg-muted/40 p-4 text-sm">
+          <p>{t.t('adminSettings.backupFromEnvironment')}</p>
+        </section>
+      )}
+
       {model.activeGroup === 'board' && (
         <section className="flex flex-col gap-3">
           <div className="flex flex-col gap-1">

package/app/admin/system/backups/[name]/route.ts

@@ -0,0 +1,11 @@
+import { serveBackupDownload } from '@/server/backup-download'
+
+export const dynamic = 'force-dynamic'
+
+export async function GET(
+  _request: Request,
+  context: { params: Promise<{ name: string }> },
+): Promise<Response> {
+  const { name } = await context.params
+  return serveBackupDownload(name)
+}

package/app/admin/system/backups/page.tsx

@@ -0,0 +1,298 @@
+import type { Metadata } from 'next'
+
+import type { BackupRunRecord } from '@meith/backup'
+import { formatScheduleTime } from '@meith/backup'
+import { cn } from '@meith/ui'
+
+import {
+  DeleteBackupForm,
+  RequestBackupForm,
+  TestDestinationForm,
+} from '@/components/admin/backup-forms'
+import { PANEL_CARD } from '@/components/shell/panel-list'
+import { PanelPage } from '@/components/shell/panel-page'
+import { adminPageContext } from '@/server/admin'
+import { buildBackupAdminView } from '@/server/backup-admin'
+import { getTranslator, tr } from '@/server/i18n'
+import { backupFormsCopy } from '@/view/admin-panel-copy'
+import { settingsHref } from '@/view/admin-settings'
+import { formatBytes } from '@/view/attachments'
+import { formatTime } from '@/view/time'
+
+export async function generateMetadata(): Promise<Metadata> {
+  return { title: await tr('page.backups') }
+}
+
+const RUN_STATUS_KEYS = {
+  queued: 'adminBackups.run.queued',
+  running: 'adminBackups.run.running',
+  done: 'adminBackups.run.done',
+  incomplete: 'adminBackups.run.incomplete',
+  failed: 'adminBackups.run.failed',
+} as const satisfies Record<BackupRunRecord['status'], string>
+
+const RUN_TRIGGER_KEYS = {
+  manual: 'adminBackups.trigger.manual',
+  schedule: 'adminBackups.trigger.schedule',
+  upgrade: 'adminBackups.trigger.upgrade',
+  cli: 'adminBackups.trigger.cli',
+} as const satisfies Record<BackupRunRecord['trigger'], string>
+
+const WEEKDAY_KEYS: Readonly<Record<number, string>> = {
+  0: 'setting.backup.weekday.option.0',
+  1: 'setting.backup.weekday.option.1',
+  2: 'setting.backup.weekday.option.2',
+  3: 'setting.backup.weekday.option.3',
+  4: 'setting.backup.weekday.option.4',
+  5: 'setting.backup.weekday.option.5',
+  6: 'setting.backup.weekday.option.6',
+}
+
+const DOWNLOAD_LINK =
+  'inline-flex h-8 items-center justify-center rounded-md border border-border px-2.5 text-xs font-medium transition-colors hover:bg-muted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring'
+
+export default async function AdminBackupsPage({
+  searchParams,
+}: {
+  searchParams: Promise<{ notice?: string }>
+}) {
+  if ((await adminPageContext()) === null) return null
+
+  const now = new Date()
+  const [translator, view, query] = await Promise.all([
+    getTranslator(),
+    buildBackupAdminView(now),
+    searchParams,
+  ])
+  const copy = backupFormsCopy(translator)
+  const t = translator.t.bind(translator)
+
+  if (view === null) {
+    return (
+      <PanelPage
+        title={await tr('page.backups')}
+        back={{ href: '/admin/system', label: t('adminBackups.backToSystem') }}
+      >
+        <p className="mt-2 text-sm text-muted-foreground">{t('adminBackups.sample')}</p>
+      </PanelPage>
+    )
+  }
+
+  const { settings } = view
+  const available = view.capability === 'available'
+  const time = formatScheduleTime(settings.schedule)
+  const scheduleSummary =
+    settings.schedule.frequency === 'off'
+      ? t('adminBackups.schedule.off')
+      : settings.schedule.frequency === 'daily'
+        ? t('adminBackups.schedule.daily', { time })
+        : t('adminBackups.schedule.weekly', {
+            time,
+            weekday: t(WEEKDAY_KEYS[settings.schedule.weekday] ?? WEEKDAY_KEYS[1] ?? ''),
+          })
+  const retentionSummary =
+    (settings.retention.keepDays ?? 0) > 0
+      ? t('adminBackups.retention.countAndDays', {
+          count: settings.retention.keep,
+          days: settings.retention.keepDays ?? 0,
+        })
+      : t('adminBackups.retention.count', { count: settings.retention.keep })
+
+  return (
+    <PanelPage
+      title={await tr('page.backups')}
+      back={{ href: '/admin/system', label: t('adminBackups.backToSystem') }}
+      lede={t('adminBackups.lede')}
+      gap="loose"
+    >
+      {query.notice === 'reauth' && (
+        <section role="alert" className="rounded-lg border border-border bg-muted/40 p-4 text-sm">
+          {t('adminBackups.reauth')}
+        </section>
+      )}
+
+      {view.capability === 'serverless' && (
+        <section
+          role="alert"
+          className="flex flex-col gap-2 rounded-lg border border-destructive/40 bg-destructive/10 p-4 text-sm"
+        >
+          <p>{t('adminBackups.serverless')}</p>
+        </section>
+      )}
+
+      <section className={cn(PANEL_CARD, 'gap-4')}>
+        <h2 className="font-heading text-lg font-semibold">{t('adminBackups.now.title')}</h2>
+        <p className="text-sm text-muted-foreground">{t('adminBackups.now.hint')}</p>
+        {view.active !== null && (
+          <p className="text-sm">
+            {view.active.status === 'running'
+              ? t('adminBackups.now.running', {
+                  since: formatTime(
+                    view.active.startedAt ?? view.active.requestedAt,
+                    now,
+                    translator,
+                  ).label,
+                })
+              : t('adminBackups.now.queued')}
+          </p>
+        )}
+        <RequestBackupForm disabled={!available || view.active !== null} copy={copy} />
+      </section>
+
+      <section className={PANEL_CARD}>
+        <h2 className="font-heading text-lg font-semibold">{t('adminBackups.plan.title')}</h2>
+        <ul className="flex flex-col gap-1 text-sm">
+          <li>
+            <span className="text-muted-foreground">{t('adminBackups.plan.schedule')}</span>{' '}
+            {scheduleSummary}
+            {view.nextScheduled !== null && available && (
+              <span className="text-muted-foreground">
+                {' · '}
+                {t('adminBackups.plan.next', {
+                  time: formatTime(view.nextScheduled, now, translator).label,
+                })}
+              </span>
+            )}
+          </li>
+          <li>
+            <span className="text-muted-foreground">{t('adminBackups.plan.retention')}</span>{' '}
+            {retentionSummary}
+          </li>
+          <li>
+            <span className="text-muted-foreground">{t('adminBackups.plan.uploads')}</span>{' '}
+            {settings.uploads === 'include'
+              ? t('adminBackups.plan.uploadsIncluded')
+              : t('adminBackups.plan.uploadsSkipped')}
+          </li>
+          <li>
+            <span className="text-muted-foreground">{t('adminBackups.plan.beforeUpgrade')}</span>{' '}
+            {settings.beforeUpgrade ? t('adminBackups.plan.on') : t('adminBackups.plan.off')}
+          </li>
+          <li>
+            <span className="text-muted-foreground">{t('adminBackups.plan.ring')}</span>{' '}
+            <code className="text-xs">{view.ring}</code>
+          </li>
+        </ul>
+        <p className="text-sm text-muted-foreground">
+          <a href={settingsHref({ group: 'backup' })} className="underline">
+            {t('adminBackups.plan.change')}
+          </a>
+        </p>
+      </section>
+
+      <section className={PANEL_CARD}>
+        <h2 className="font-heading text-lg font-semibold">
+          {t('adminBackups.destination.title')}
+        </h2>
+        {view.destination.source === 'none' ? (
+          <p className="text-sm text-muted-foreground">{t('adminBackups.destination.none')}</p>
+        ) : (
+          <p className="text-sm">
+            {view.destination.description === null
+              ? t('adminBackups.destination.unusable')
+              : t('adminBackups.destination.shipsTo', {
+                  destination: view.destination.description,
+                })}{' '}
+            <span className="text-muted-foreground">
+              {view.destination.source === 'environment'
+                ? t('adminBackups.destination.fromEnvironment')
+                : t('adminBackups.destination.fromBoard')}
+            </span>
+          </p>
+        )}
+        {view.destination.problem !== null && (
+          <p className="text-sm text-destructive">{view.destination.problem}</p>
+        )}
+        {view.destination.listError !== null && (
+          <p className="text-sm text-destructive">
+            {t('adminBackups.destination.listFailed', { error: view.destination.listError })}
+          </p>
+        )}
+        {view.destination.description !== null && <TestDestinationForm copy={copy} />}
+      </section>
+
+      <section className={PANEL_CARD}>
+        <h2 className="font-heading text-lg font-semibold">{t('adminBackups.bundles.title')}</h2>
+        {view.bundles.length === 0 ? (
+          <p className="text-sm text-muted-foreground">{t('adminBackups.bundles.empty')}</p>
+        ) : (
+          <ul className="flex flex-col divide-y divide-border">
+            {view.bundles.map((bundle) => (
+              <li
+                key={bundle.name}
+                className="flex flex-wrap items-center justify-between gap-x-3 gap-y-2 py-3 first:pt-0 last:pb-0"
+              >
+                <span className="flex min-w-0 flex-col">
+                  <span className="text-sm font-medium">
+                    {bundle.takenAt === null
+                      ? bundle.name
+                      : formatTime(bundle.takenAt, now, translator).label}
+                  </span>
+                  <span className="truncate text-xs text-muted-foreground">
+                    <code>{bundle.name}</code>
+                    {bundle.localSize !== null &&
+                      ` · ${t('adminBackups.bundles.local', { size: formatBytes(bundle.localSize) })}`}
+                    {bundle.remoteSize !== null &&
+                      ` · ${t('adminBackups.bundles.offSite', { size: formatBytes(bundle.remoteSize) })}`}
+                  </span>
+                </span>
+                <span className="flex shrink-0 flex-wrap items-center gap-2">
+                  <a
+                    href={`/admin/system/backups/${encodeURIComponent(bundle.name)}`}
+                    className={DOWNLOAD_LINK}
+                  >
+                    {t('adminBackups.bundles.download')}
+                  </a>
+                  <DeleteBackupForm name={bundle.name} copy={copy} />
+                </span>
+              </li>
+            ))}
+          </ul>
+        )}
+        <p className="text-xs text-muted-foreground">{t('adminBackups.bundles.restoreHint')}</p>
+      </section>
+
+      <section className={PANEL_CARD}>
+        <h2 className="font-heading text-lg font-semibold">{t('adminBackups.runs.title')}</h2>
+        {view.runs.length === 0 ? (
+          <p className="text-sm text-muted-foreground">{t('adminBackups.runs.empty')}</p>
+        ) : (
+          <ul className="flex flex-col gap-1 text-sm">
+            {view.runs.map((run) => (
+              <li key={run.id}>
+                <span
+                  className={
+                    run.status === 'failed' || run.status === 'incomplete'
+                      ? 'font-medium text-destructive'
+                      : 'font-medium'
+                  }
+                >
+                  {t(RUN_STATUS_KEYS[run.status])}
+                </span>{' '}
+                <span className="text-muted-foreground">
+                  {t(RUN_TRIGGER_KEYS[run.trigger])} ·{' '}
+                  <time dateTime={run.requestedAt.toISOString()}>
+                    {formatTime(run.requestedAt, now, translator).label}
+                  </time>
+                  {run.bundleName !== null && (
+                    <>
+                      {' · '}
+                      <code className="text-xs">{run.bundleName}</code>
+                    </>
+                  )}
+                  {run.sizeBytes !== null && ` · ${formatBytes(run.sizeBytes)}`}
+                  {run.shipped && ` · ${t('adminBackups.runs.shipped')}`}
+                  {run.skippedKeys > 0 &&
+                    ` · ${t('adminBackups.runs.skipped', { count: run.skippedKeys })}`}
+                </span>
+                {run.error !== null && (
+                  <span className="block text-xs text-destructive">{run.error}</span>
+                )}
+              </li>
+            ))}
+          </ul>
+        )}
+      </section>
+    </PanelPage>
+  )
+}

package/app/admin/system/page.tsx

@@ -23,6 +23,7 @@ import { formatTime } from '@/view/time'
 
 const TASK_STATUS_KEYS = {
   healthy: 'adminSystem.taskStatus.healthy',
+  running: 'adminSystem.taskStatus.running',
   late: 'adminSystem.taskStatus.late',
   stale: 'adminSystem.taskStatus.stale',
   failing: 'adminSystem.taskStatus.failing',
@@ -194,7 +195,9 @@ export default async function AdminSystemPage() {
                 </span>
                 <span
                   className={
-                    task.status === 'healthy' || task.status === 'disabled'
+                    task.status === 'healthy' ||
+                    task.status === 'running' ||
+                    task.status === 'disabled'
                       ? 'shrink-0 text-xs text-muted-foreground'
                       : 'shrink-0 text-xs font-medium text-destructive'
                   }

package/app/install/page.tsx

@@ -16,9 +16,13 @@ import { isUsableOrigin, MAIL_PRESETS, normaliseOrigin } from '@meith/settings'
 import { Alert, AlertDescription, AlertTitle, Disclosure } from '@meith/ui'
 
 import { InstallForm } from '@/components/install/install-form'
+import { InstallRestoreForm } from '@/components/install/restore-form'
 import { getTranslator, tr } from '@/server/i18n'
 import { gatherPreflight, installerIsSealed, probeMail } from '@/server/install'
-import { installFormCopy } from '@/view/install-copy'
+import { installRestoreView } from '@/server/install-restore'
+import { formatBytes } from '@/view/attachments'
+import { installFormCopy, installRestoreCopy } from '@/view/install-copy'
+import { formatTime } from '@/view/time'
 
 export async function generateMetadata(): Promise<Metadata> {
   return { title: await tr('page.install') }
@@ -75,6 +79,8 @@ export default async function InstallPage() {
   const ready = canProceed(checks)
   const mail = await probeMail()
   const suggestedBoardUrl = await suggestBoardUrl()
+  const restore = ready ? await installRestoreView() : null
+  const now = new Date()
 
   return (
     <main className="mx-auto flex w-full max-w-2xl flex-col gap-8 px-6 py-12">
@@ -87,6 +93,28 @@ export default async function InstallPage() {
 
       <Preflight checks={checks} />
 
+      {restore?.possible && (
+        <InstallRestoreForm
+          candidates={restore.candidates.map((candidate) => ({
+            name: candidate.name,
+            label:
+              candidate.takenAt === null
+                ? candidate.name
+                : t.t('install.restore.takenAt', {
+                    time: formatTime(candidate.takenAt, now, t).label,
+                  }),
+            size: formatBytes(candidate.size),
+            location:
+              candidate.location === 'server'
+                ? t.t('install.restore.onServer')
+                : t.t('install.restore.offSite'),
+          }))}
+          destination={restore.destination}
+          problem={restore.problem}
+          copy={installRestoreCopy(t)}
+        />
+      )}
+
       {ready && (
         <InstallForm
           presets={MAIL_PRESETS.map((preset) => ({

package/next.config.mjs

@@ -91,6 +91,7 @@ const nextConfig = {
     '@meith/settings',
     '@meith/signatures',
     '@meith/subscriptions',
+    '@meith/backup',
     '@meith/tasks',
     '@meith/theme-clubhouse',
     '@meith/theme-default',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@meith/web",
-  "version": "0.33.4",
+  "version": "0.34.0",
   "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,54 +43,55 @@
     "react-dom": "19.2.8",
     "tailwindcss": "^4.3.3",
     "typescript": "7.0.2",
-    "@meith/accounts": "0.33.4",
-    "@meith/admin": "0.33.4",
-    "@meith/antispam": "0.33.4",
-    "@meith/api": "0.33.4",
-    "@meith/attachments": "0.33.4",
-    "@meith/authorization": "0.33.4",
-    "@meith/avatars": "0.33.4",
-    "@meith/board-digest": "0.33.4",
-    "@meith/core": "0.33.4",
-    "@meith/db": "0.33.4",
-    "@meith/demo": "0.33.4",
-    "@meith/drivers": "0.33.4",
-    "@meith/drafts": "0.33.4",
-    "@meith/events": "0.33.4",
-    "@meith/forums": "0.33.4",
-    "@meith/groups": "0.33.4",
-    "@meith/i18n": "0.33.4",
-    "@meith/import": "0.33.4",
-    "@meith/install": "0.33.4",
-    "@meith/mail": "0.33.4",
-    "@meith/markdown": "0.33.4",
-    "@meith/marketplace": "0.33.4",
-    "@meith/messages": "0.33.4",
-    "@meith/moderation": "0.33.4",
-    "@meith/notifications": "0.33.4",
-    "@meith/plugin-calendar": "0.33.4",
-    "@meith/plugin-dues": "0.33.4",
-    "@meith/plugin-kit": "0.33.4",
-    "@meith/polls": "0.33.4",
-    "@meith/posts": "0.33.4",
-    "@meith/profile-fields": "0.33.4",
-    "@meith/relations": "0.33.4",
-    "@meith/reputation": "0.33.4",
-    "@meith/runtime": "0.33.4",
-    "@meith/search": "0.33.4",
-    "@meith/settings": "0.33.4",
-    "@meith/signatures": "0.33.4",
-    "@meith/subscriptions": "0.33.4",
-    "@meith/tasks": "0.33.4",
-    "@meith/theme-clubhouse": "0.33.4",
-    "@meith/theme-default": "0.33.4",
-    "@meith/theme-kit": "0.33.4",
-    "@meith/theme-midnight": "0.33.4",
-    "@meith/theme-phasebook": "0.33.4",
-    "@meith/theme-raidframe": "0.33.4",
-    "@meith/threads": "0.33.4",
-    "@meith/ui": "0.33.4",
-    "@meith/upgrade": "0.33.4"
+    "@meith/accounts": "0.34.0",
+    "@meith/admin": "0.34.0",
+    "@meith/antispam": "0.34.0",
+    "@meith/api": "0.34.0",
+    "@meith/attachments": "0.34.0",
+    "@meith/authorization": "0.34.0",
+    "@meith/avatars": "0.34.0",
+    "@meith/backup": "0.34.0",
+    "@meith/board-digest": "0.34.0",
+    "@meith/core": "0.34.0",
+    "@meith/db": "0.34.0",
+    "@meith/demo": "0.34.0",
+    "@meith/drafts": "0.34.0",
+    "@meith/drivers": "0.34.0",
+    "@meith/events": "0.34.0",
+    "@meith/forums": "0.34.0",
+    "@meith/groups": "0.34.0",
+    "@meith/i18n": "0.34.0",
+    "@meith/import": "0.34.0",
+    "@meith/install": "0.34.0",
+    "@meith/mail": "0.34.0",
+    "@meith/markdown": "0.34.0",
+    "@meith/marketplace": "0.34.0",
+    "@meith/messages": "0.34.0",
+    "@meith/moderation": "0.34.0",
+    "@meith/notifications": "0.34.0",
+    "@meith/plugin-calendar": "0.34.0",
+    "@meith/plugin-dues": "0.34.0",
+    "@meith/plugin-kit": "0.34.0",
+    "@meith/polls": "0.34.0",
+    "@meith/posts": "0.34.0",
+    "@meith/profile-fields": "0.34.0",
+    "@meith/relations": "0.34.0",
+    "@meith/reputation": "0.34.0",
+    "@meith/runtime": "0.34.0",
+    "@meith/search": "0.34.0",
+    "@meith/settings": "0.34.0",
+    "@meith/signatures": "0.34.0",
+    "@meith/subscriptions": "0.34.0",
+    "@meith/tasks": "0.34.0",
+    "@meith/theme-clubhouse": "0.34.0",
+    "@meith/theme-default": "0.34.0",
+    "@meith/theme-kit": "0.34.0",
+    "@meith/theme-midnight": "0.34.0",
+    "@meith/theme-phasebook": "0.34.0",
+    "@meith/theme-raidframe": "0.34.0",
+    "@meith/threads": "0.34.0",
+    "@meith/ui": "0.34.0",
+    "@meith/upgrade": "0.34.0"
   },
   "scripts": {
     "dev": "next dev",

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

@@ -0,0 +1,87 @@
+'use client'
+
+import { useActionState } from 'react'
+
+import { EMPTY_STATE } from '@/server/auth-form-state'
+import {
+  deleteBackupAction,
+  requestBackupAction,
+  testBackupDestinationAction,
+} from '@/server/backup-admin-actions'
+
+import { FormError, PendingButton, SubmitButton } from '../auth/form-controls'
+import { ConfirmDialog } from '../shell/confirm-dialog'
+import { type Copy, formatFromCopy, fromCopy } from '../shell/copy'
+import { Saved } from './form-bits'
+
+const ROW_BUTTON =
+  'inline-flex h-8 items-center justify-center rounded-md border border-destructive/30 bg-destructive/10 px-2.5 text-xs font-medium text-destructive transition-colors hover:bg-destructive/20 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring'
+
+export function RequestBackupForm({ disabled, copy }: { disabled: boolean; copy: Copy }) {
+  const [state, action] = useActionState(requestBackupAction, EMPTY_STATE)
+
+  return (
+    <form action={action} className="flex flex-col gap-2">
+      <FormError message={state.error} />
+      {state.notice === 'queued' && <Saved>{fromCopy(copy, 'adminPanel.backup.queued')}</Saved>}
+      {state.notice === 'already' && (
+        <p className="rounded-md border border-border bg-muted px-3 py-2 text-sm">
+          {fromCopy(copy, 'adminPanel.backup.already')}
+        </p>
+      )}
+      <div>
+        {disabled ? (
+          <button
+            type="button"
+            disabled
+            className="inline-flex h-10 cursor-not-allowed items-center rounded-md border border-border px-4 text-sm opacity-60"
+          >
+            {fromCopy(copy, 'adminPanel.backup.now')}
+          </button>
+        ) : (
+          <SubmitButton className="w-auto">{fromCopy(copy, 'adminPanel.backup.now')}</SubmitButton>
+        )}
+      </div>
+    </form>
+  )
+}
+
+export function DeleteBackupForm({ name, copy }: { name: string; copy: Copy }) {
+  const [state, action] = useActionState(deleteBackupAction, EMPTY_STATE)
+
+  return (
+    <form action={action} className="flex flex-wrap items-center gap-2">
+      <input type="hidden" name="name" value={name} />
+      <PendingButton className={ROW_BUTTON}>
+        {fromCopy(copy, 'adminPanel.backup.delete')}
+      </PendingButton>
+      {state.notice === 'deleted' && (
+        <span className="text-xs text-muted-foreground">
+          {formatFromCopy(copy, 'adminPanel.backup.deleted', { name: state.values?.name ?? name })}
+        </span>
+      )}
+      {state.error !== undefined && <span className="text-xs text-destructive">{state.error}</span>}
+      <ConfirmDialog confirm={state.confirm} action={action} />
+    </form>
+  )
+}
+
+export function TestDestinationForm({ copy }: { copy: Copy }) {
+  const [state, action] = useActionState(testBackupDestinationAction, EMPTY_STATE)
+
+  return (
+    <form action={action} className="flex flex-col gap-2">
+      <FormError message={state.error} />
+      {state.notice === 'reachable' && (
+        <Saved>
+          {formatFromCopy(copy, 'adminPanel.backup.reachable', {
+            count: Number(state.values?.count ?? 0),
+          })}
+        </Saved>
+      )}
+      <div>
+        <SubmitButton className="w-auto">{fromCopy(copy, 'adminPanel.backup.test')}</SubmitButton>
+      </div>
+    </form>
+  )
+}