@meith/web 0.16.0

package/app/admin/system/page.tsx

@@ -0,0 +1,303 @@
+import type { Metadata } from 'next'
+
+import type { TaskHealthStatus } from '@meith/tasks'
+import { cn } from '@meith/ui'
+
+import {
+  ClearCacheForm,
+  PruneSessionsForm,
+  PruneTokensForm,
+  RecountForm,
+  ReindexSearchForm,
+  RetryJobForm,
+} from '@/components/admin/system-forms'
+import { PANEL_CARD, PANEL_LIST, PANEL_NOTE, PANEL_ROW } from '@/components/shell/panel-list'
+import { PanelPage } from '@/components/shell/panel-page'
+import { adminPageContext } from '@/server/admin'
+import { getTranslator, tr } from '@/server/i18n'
+import { buildSystemHealthView } from '@/server/system-admin'
+import { systemFormsCopy } from '@/view/admin-panel-copy'
+import { formatTime } from '@/view/time'
+
+const TASK_STATUS_KEYS = {
+  healthy: 'adminSystem.taskStatus.healthy',
+  late: 'adminSystem.taskStatus.late',
+  stale: 'adminSystem.taskStatus.stale',
+  failing: 'adminSystem.taskStatus.failing',
+  disabled: 'adminSystem.taskStatus.disabled',
+  'never-run': 'adminSystem.taskStatus.never-run',
+} satisfies Record<TaskHealthStatus, string>
+
+export async function generateMetadata(): Promise<Metadata> {
+  return { title: await tr('page.system-health') }
+}
+
+export default async function AdminSystemPage() {
+  if ((await adminPageContext()) === null) return null
+
+  const now = new Date()
+  const translator = await getTranslator()
+  const copy = systemFormsCopy(translator)
+  const view = await buildSystemHealthView(now)
+
+  if (view === null) {
+    return (
+      <PanelPage title={await tr('page.system-health')}>
+        <p className="mt-2 text-sm text-muted-foreground">{translator.t('adminSystem.sample')}</p>
+      </PanelPage>
+    )
+  }
+
+  const { mail, scheduler, volumes } = view
+
+  return (
+    <PanelPage
+      title={await tr('page.system-health')}
+      lede={await tr('page.what-board-does-schedule-whether')}
+      gap="loose"
+    >
+      {scheduler.schedulerStopped && (
+        <section
+          role="alert"
+          className="flex flex-col gap-2 rounded-lg border-2 border-destructive bg-destructive/10 p-4"
+        >
+          <h2 className="font-heading text-lg font-semibold text-destructive">
+            {await tr('page.scheduler-not-running')}
+          </h2>
+          <p className="text-sm">
+            {translator.t('adminSystem.schedulerStoppedBefore')}{' '}
+            <strong>{translator.t('adminSystem.schedulerStoppedStrong')}</strong>
+            {translator.t('adminSystem.schedulerStoppedAfter')}
+          </p>
+          <p className="text-sm">{translator.t('adminSystem.schedulerStopped')}</p>
+        </section>
+      )}
+
+      {!scheduler.schedulerStopped && (scheduler.stale > 0 || scheduler.failing > 0) && (
+        <section
+          role="alert"
+          className="flex flex-col gap-1 rounded-lg border border-destructive/40 bg-destructive/10 p-4 text-sm"
+        >
+          {scheduler.stale > 0 && (
+            <p>{translator.t('adminSystem.tasksOverdue', { count: scheduler.stale })}</p>
+          )}
+          {scheduler.failing > 0 && (
+            <p>{translator.t('adminSystem.tasksFailing', { count: scheduler.failing })}</p>
+          )}
+        </section>
+      )}
+
+      {mail.unactivatable && (
+        <section
+          role="alert"
+          className="flex flex-col gap-2 rounded-lg border-2 border-destructive bg-destructive/10 p-4"
+        >
+          <h2 className="font-heading text-lg font-semibold text-destructive">
+            {await tr('page.no-new-member-can-activate')}
+          </h2>
+          <p className="text-sm">
+            {translator.t('adminSystem.activationProblem', {
+              method: mail.activationMethod,
+              summary: mail.summary.toLowerCase(),
+            })}
+          </p>
+          <p className="text-sm">
+            {mail.source === 'environment' ? (
+              <>
+                {translator.t('adminSystem.environmentMailBefore')} <code>MAIL_*</code>{' '}
+                {translator.t('adminSystem.environmentMailBetween')} <code>MAIL_DRIVER</code>{' '}
+                {translator.t('adminSystem.environmentMailEnd')}
+              </>
+            ) : (
+              <>
+                {translator.t('adminSystem.boardMailBefore')}{' '}
+                <a href="/admin/settings?group=mail" className="underline">
+                  {translator.t('page.board-settings')}
+                </a>{' '}
+                {translator.t('adminSystem.boardMailAfter')} <strong>none</strong>{' '}
+                {translator.t('adminSystem.boardMailOr')} <strong>admin</strong>.
+              </>
+            )}{' '}
+            {translator.t('adminSystem.activationAccounts')}
+          </p>
+        </section>
+      )}
+
+      <section className="flex flex-col gap-3">
+        <h2 className="font-heading text-lg font-semibold">{translator.t('adminSystem.mail')}</h2>
+        <p className="text-sm">
+          {mail.summary}
+          {!mail.sends && (
+            <span className="text-muted-foreground">
+              {' '}
+              {translator.t('adminSystem.mailDoesNotSend')}
+            </span>
+          )}{' '}
+          {translator.t('adminSystem.activationMethod')} <code>{mail.activationMethod}</code>{' '}
+          {translator.t('adminSystem.configuredFrom')}{' '}
+          <code>
+            {mail.source === 'environment'
+              ? translator.t('adminSystem.environment')
+              : translator.t('adminSystem.boardSettings')}
+          </code>
+        </p>
+        {mail.source === 'board' && (
+          <p className="text-sm text-muted-foreground">
+            {translator.t('adminSystem.changeMailBefore')}{' '}
+            <a href="/admin/settings?group=mail" className="underline">
+              {translator.t('page.board-settings')}
+            </a>
+            {translator.t('adminSystem.changeMailEnd')}
+          </p>
+        )}
+        <p className="text-sm text-muted-foreground">{translator.t('adminSystem.mailSchedule')}</p>
+      </section>
+
+      <section className="flex flex-col gap-3">
+        <h2 className="font-heading text-lg font-semibold">{await tr('page.scheduled-tasks')}</h2>
+        {scheduler.tasks.length === 0 ? (
+          <p className={PANEL_NOTE}>{translator.t('adminSystem.noTasks')}</p>
+        ) : (
+          <ul className={PANEL_LIST}>
+            {scheduler.tasks.map((task) => (
+              <li key={task.key} className={PANEL_ROW}>
+                <span className="flex min-w-0 flex-col">
+                  <span className="truncate text-sm font-medium">
+                    {task.titleKey === undefined ? task.key : translator.t(task.titleKey)}
+                  </span>
+                  {task.descriptionKey !== undefined && (
+                    <span className="text-xs text-muted-foreground">
+                      {translator.t(task.descriptionKey)}
+                    </span>
+                  )}
+                  <span className="truncate text-xs text-muted-foreground">
+                    <code>{task.key}</code> ·{' '}
+                    {translator.t('adminSystem.taskInterval', { seconds: task.intervalSeconds })} ·{' '}
+                    {task.lastRunAt === null
+                      ? translator.t('adminSystem.neverRun')
+                      : translator.t('adminSystem.taskLastRun', {
+                          time: formatTime(task.lastRunAt, now, translator).label,
+                        })}
+                    {task.consecutiveFailures > 0 &&
+                      ` · ${translator.t('adminSystem.taskFailures', {
+                        count: task.consecutiveFailures,
+                      })}`}
+                  </span>
+                </span>
+                <span
+                  className={
+                    task.status === 'healthy' || task.status === 'disabled'
+                      ? 'shrink-0 text-xs text-muted-foreground'
+                      : 'shrink-0 text-xs font-medium text-destructive'
+                  }
+                >
+                  {translator.t(TASK_STATUS_KEYS[task.status])}
+                </span>
+              </li>
+            ))}
+          </ul>
+        )}
+      </section>
+
+      <section className="flex flex-col gap-3">
+        <h2 className="font-heading text-lg font-semibold">{await tr('page.recent-runs')}</h2>
+        {view.runs.length === 0 ? (
+          <p className="text-sm text-muted-foreground">{await tr('page.nothing-has-run-yet')}</p>
+        ) : (
+          <ul className="flex flex-col gap-1 text-sm">
+            {view.runs.map((run, index) => (
+              // biome-ignore lint/suspicious/noArrayIndexKey: the tiebreaker between two runs of one task recorded at the same instant
+              <li key={`${run.taskKey}:${run.ranAt.toISOString()}:${index}`}>
+                <code className="text-xs">{run.taskKey}</code>{' '}
+                <span className="text-muted-foreground">
+                  {run.succeeded
+                    ? translator.t('adminSystem.taskRunOk')
+                    : translator.t('adminSystem.taskRunFailed')}
+                  {run.durationMs !== null && ` · ${run.durationMs}ms`} ·{' '}
+                  <time dateTime={run.ranAt.toISOString()}>
+                    {formatTime(run.ranAt, now, translator).label}
+                  </time>
+                  {run.detail !== null && ` · ${run.detail}`}
+                </span>
+                {run.error !== null && (
+                  <span className="block text-xs text-destructive">{run.error}</span>
+                )}
+              </li>
+            ))}
+          </ul>
+        )}
+      </section>
+
+      <section className="flex flex-col gap-3">
+        <h2 className="font-heading text-lg font-semibold">
+          {translator.t('adminSystem.volumes')}
+        </h2>
+        <ul className="grid gap-2 text-sm sm:grid-cols-3">
+          <li>{translator.t('adminSystem.members', { count: volumes.users })}</li>
+          <li>{translator.t('adminSystem.threads', { count: volumes.threads })}</li>
+          <li>{translator.t('adminSystem.posts', { count: volumes.posts })}</li>
+          <li>{translator.t('adminSystem.attachments', { count: volumes.attachments })}</li>
+          <li>{translator.t('adminSystem.queuedJobs', { count: volumes.queuedJobs })}</li>
+          <li className={volumes.deadLetteredJobs > 0 ? 'font-medium text-destructive' : undefined}>
+            {translator.t('adminSystem.deadLettered', { count: volumes.deadLetteredJobs })}
+          </li>
+        </ul>
+      </section>
+
+      <section className="flex flex-col gap-3">
+        <h2 className="font-heading text-lg font-semibold">
+          {translator.t('adminSystem.recount')}
+        </h2>
+        <p className="text-sm text-muted-foreground">{translator.t('adminSystem.recountHint')}</p>
+        {view.recount.length > 0 && (
+          <ul className="flex flex-col gap-1 text-xs text-muted-foreground">
+            {view.recount.map((row) => (
+              <li key={row.id}>
+                {translator.t('adminSystem.recountProgress', {
+                  id: row.id,
+                  phase: row.phase,
+                  cursor: row.cursor,
+                  passes: row.passes,
+                  corrected: row.corrected,
+                })}
+              </li>
+            ))}
+          </ul>
+        )}
+        <RecountForm copy={copy} />
+      </section>
+
+      <section className="flex flex-col gap-3">
+        <h2 className="font-heading text-lg font-semibold">{await tr('page.search-index')}</h2>
+        <p className="text-sm text-muted-foreground">
+          {translator.t('adminSystem.searchIndexHint')}
+        </p>
+        <p className="text-sm">
+          {translator.t('adminSystem.searchIndexIndexed', { count: view.searchIndex.indexed })}
+          {view.searchIndex.pending > 0 && (
+            <span className="font-medium text-destructive">
+              {' · '}
+              {translator.t('adminSystem.searchIndexPending', { count: view.searchIndex.pending })}
+            </span>
+          )}
+          .
+        </p>
+        <ReindexSearchForm pending={view.searchIndex.pending} copy={copy} />
+      </section>
+
+      <section className={cn(PANEL_CARD, 'gap-4')}>
+        <h2 className="font-heading text-lg font-semibold">
+          {translator.t('adminSystem.maintenance')}
+        </h2>
+        <p className="text-sm text-muted-foreground">
+          {translator.t('adminSystem.maintenanceHint')}
+        </p>
+
+        <PruneSessionsForm prunable={view.prunableSessions} copy={copy} />
+        <PruneTokensForm copy={copy} />
+        <ClearCacheForm copy={copy} />
+        <RetryJobForm copy={copy} />
+      </section>
+    </PanelPage>
+  )
+}

package/app/admin/themes/[key]/page.tsx

@@ -0,0 +1,110 @@
+import type { Metadata } from 'next'
+import { notFound } from 'next/navigation'
+
+import { cn } from '@meith/ui'
+
+import { ImportThemeForm, ResetThemeForm, ThemeEditorForm } from '@/components/admin/theme-forms'
+import { PANEL_CARD } from '@/components/shell/panel-list'
+import { PanelPage } from '@/components/shell/panel-page'
+import { adminPageContext } from '@/server/admin'
+import { getTranslator, tr } from '@/server/i18n'
+import { buildThemeAdminView, themeAdminRepository } from '@/server/theme-admin'
+import { themeAdminCopy } from '@/view/admin-theme-copy'
+import { contrastCopy } from '@/view/contrast'
+import { tokenGroupCopy } from '@/view/theme-tokens'
+import { formatTime } from '@/view/time'
+
+export async function generateMetadata(): Promise<Metadata> {
+  return { title: await tr('page.theme') }
+}
+
+export default async function AdminThemePage({ params }: { params: Promise<{ key: string }> }) {
+  if ((await adminPageContext()) === null) return null
+
+  const { key } = await params
+  const view = await buildThemeAdminView(key)
+  if (view === null) notFound()
+
+  const repository = themeAdminRepository()
+  const exported = repository === null ? null : await repository.exportTheme(key)
+  const now = new Date()
+  const translator = await getTranslator()
+  const copy = {
+    ...tokenGroupCopy(translator),
+    ...contrastCopy(translator),
+    ...themeAdminCopy(translator),
+  }
+
+  return (
+    <PanelPage
+      back={{ href: '/admin/themes', label: translator.t('adminThemes.all') }}
+      title={view.title}
+      gap="loose"
+      width="wide"
+      lede={
+        <>
+          <code className="font-mono text-xs">{view.key}</code>
+          {view.isDefault
+            ? translator.t('adminThemes.defaultLede')
+            : view.enabled
+              ? translator.t('adminThemes.enabledLede')
+              : translator.t('adminThemes.disabledLede')}
+          {view.updatedAt !== null && (
+            <>
+              {' '}
+              · last changed{' '}
+              <time dateTime={view.updatedAt.toISOString()}>
+                {formatTime(view.updatedAt, now, translator).label}
+              </time>
+            </>
+          )}
+        </>
+      }
+      meta={
+        view.isBuildTheme
+          ? translator.t('adminThemes.buildMeta')
+          : translator.t('adminThemes.memberMeta')
+      }
+    >
+      <section className={PANEL_CARD}>
+        <ThemeEditorForm
+          copy={copy}
+          themeKey={view.key}
+          tokens={view.tokens}
+          customCss={view.customCss}
+          isDefault={view.isDefault}
+        />
+      </section>
+
+      <section className={cn(PANEL_CARD, 'max-w-3xl')}>
+        <h2 className="font-heading text-lg font-semibold">{translator.t('adminThemes.export')}</h2>
+        <p className="text-sm text-muted-foreground">{translator.t('adminThemes.exportHint')}</p>
+        <textarea
+          readOnly
+          rows={8}
+          value={exported === null ? '' : JSON.stringify(exported, null, 2)}
+          className="w-full rounded-md border border-border bg-muted px-3 py-2 font-mono text-xs"
+        />
+      </section>
+
+      <section className={cn(PANEL_CARD, 'max-w-3xl')}>
+        <h2 className="font-heading text-lg font-semibold">{translator.t('adminThemes.import')}</h2>
+        <ImportThemeForm themeKey={view.key} copy={copy} />
+      </section>
+
+      <section className={cn(PANEL_CARD, 'max-w-3xl')}>
+        <h2 className="font-heading text-lg font-semibold">{translator.t('adminThemes.reset')}</h2>
+        {view.customised ? (
+          <>
+            <p className="text-sm text-muted-foreground">{translator.t('adminThemes.resetHint')}</p>
+            <ResetThemeForm themeKey={view.key} copy={copy} />
+          </>
+        ) : (
+          <p className="text-sm text-muted-foreground">
+            {await tr('page.nothing-reset-this-theme-already')}
+          </p>
+        )}
+      </section>
+    </PanelPage>
+  )
+}

package/app/admin/themes/browse/page.tsx

@@ -0,0 +1,70 @@
+import type { Metadata } from 'next'
+
+import { MarketplaceRefreshForm } from '@/components/admin/marketplace-forms'
+import { MarketplaceListingCard } from '@/components/admin/marketplace-listing'
+import { PANEL_NOTE } from '@/components/shell/panel-list'
+import { PanelPage } from '@/components/shell/panel-page'
+import { ViewTabs } from '@/components/shell/view-tabs'
+import { adminPageContext } from '@/server/admin'
+import { getTranslator, tr } from '@/server/i18n'
+import { marketplaceCatalog } from '@/server/marketplace-admin'
+import { marketplaceFormsCopy } from '@/view/admin-panel-copy'
+import { catalogTabs } from '@/view/marketplace-panel'
+import { formatTime } from '@/view/time'
+
+export async function generateMetadata(): Promise<Metadata> {
+  return { title: await tr('adminMarketplace.browseThemesTitle') }
+}
+
+export default async function AdminThemesBrowsePage() {
+  if ((await adminPageContext()) === null) return null
+
+  const t = await getTranslator()
+  const catalog = await marketplaceCatalog('theme')
+  const copy = marketplaceFormsCopy(t)
+  const now = new Date()
+
+  return (
+    <PanelPage
+      title={t.t('adminMarketplace.browseThemesTitle')}
+      lede={t.t('adminMarketplace.browseLede')}
+    >
+      <ViewTabs
+        label={t.t('adminMarketplace.tabsLabel')}
+        tabs={catalogTabs({
+          installedHref: '/admin/themes',
+          browseHref: '/admin/themes/browse',
+          current: 'browse',
+          t,
+        })}
+        aside={
+          catalog.fetchedAt !== null
+            ? t.t('adminMarketplace.lastFetched', {
+                time: formatTime(catalog.fetchedAt, now, t).label,
+              })
+            : undefined
+        }
+      />
+
+      <MarketplaceRefreshForm copy={copy} />
+
+      {catalog.unreachable && <p className={PANEL_NOTE}>{t.t('adminMarketplace.unreachable')}</p>}
+
+      {!catalog.unreachable && !catalog.hasEverFetched && (
+        <p className={PANEL_NOTE}>{t.t('adminMarketplace.neverFetched')}</p>
+      )}
+
+      {catalog.hasEverFetched && catalog.listings.length === 0 && (
+        <p className={PANEL_NOTE}>{t.t('adminMarketplace.emptyThemes')}</p>
+      )}
+
+      {catalog.listings.length > 0 && (
+        <ul className="flex flex-col gap-4">
+          {catalog.listings.map((listing) => (
+            <MarketplaceListingCard key={listing.key} listing={listing} t={t} />
+          ))}
+        </ul>
+      )}
+    </PanelPage>
+  )
+}

package/app/admin/themes/page.tsx

@@ -0,0 +1,163 @@
+import type { Metadata } from 'next'
+
+import { cn } from '@meith/ui'
+
+import { LogoUploadForm } from '@/components/admin/branding-forms'
+import { ThemeStateForms } from '@/components/admin/theme-forms'
+import { PANEL_CARD, PANEL_LIST, PANEL_ROW } from '@/components/shell/panel-list'
+import { PanelPage } from '@/components/shell/panel-page'
+import { ViewTabs } from '@/components/shell/view-tabs'
+import { adminPageContext } from '@/server/admin'
+import { logoKey, logoSrc } from '@/server/branding'
+import { getTranslator, tr } from '@/server/i18n'
+import { MAX_IMAGE_BYTES } from '@/server/image-upload'
+import { themeListing } from '@/server/theme-admin'
+import { brandingFormsCopy } from '@/view/admin-panel-copy'
+import { themeStateCopy } from '@/view/admin-theme-copy'
+import { catalogTabs } from '@/view/marketplace-panel'
+import { formatTime } from '@/view/time'
+
+export async function generateMetadata(): Promise<Metadata> {
+  return { title: await tr('page.themes') }
+}
+
+export default async function AdminThemesPage() {
+  if ((await adminPageContext()) === null) return null
+
+  const themes = await themeListing()
+  const [lightKey, darkKey] = await Promise.all([logoKey('light'), logoKey('dark')])
+  const now = new Date()
+  const translator = await getTranslator()
+  const brandingCopy = brandingFormsCopy(translator)
+  const stateCopy = themeStateCopy(translator)
+
+  return (
+    <PanelPage title={await tr('page.themes')} lede={translator.t('adminThemes.lede')}>
+      <ViewTabs
+        label={translator.t('adminMarketplace.tabsLabel')}
+        tabs={catalogTabs({
+          installedHref: '/admin/themes',
+          browseHref: '/admin/themes/browse',
+          current: 'installed',
+          t: translator,
+        })}
+      />
+
+      <section className="flex flex-col gap-3">
+        <div className="flex flex-col gap-1">
+          <h2 className="font-heading text-lg font-semibold">{translator.t('adminThemes.logo')}</h2>
+          <p className="text-sm text-muted-foreground">{translator.t('adminThemes.logoHint')}</p>
+        </div>
+
+        <div className="grid gap-3 sm:grid-cols-2">
+          <LogoUploadForm
+            maxKib={MAX_IMAGE_BYTES / 1024}
+            copy={brandingCopy}
+            slot={{
+              scheme: 'light',
+              label: translator.t('adminThemes.light'),
+              hint: translator.t('adminThemes.lightHint'),
+              src: lightKey === null ? null : logoSrc('light', lightKey),
+            }}
+          />
+          <LogoUploadForm
+            maxKib={MAX_IMAGE_BYTES / 1024}
+            copy={brandingCopy}
+            slot={{
+              scheme: 'dark',
+              label: translator.t('adminThemes.dark'),
+              hint: translator.t('adminThemes.darkHint'),
+              src: darkKey === null ? null : logoSrc('dark', darkKey),
+            }}
+          />
+        </div>
+
+        <p className="text-xs text-muted-foreground">
+          What a screen reader announces in place of the logo is{' '}
+          <strong>{await tr('page.logo-alt-text')}</strong> under Settings → Board. Left empty it
+          becomes the board&rsquo;s name, which is usually what a logo says anyway.
+        </p>
+      </section>
+
+      <h2 className="font-heading text-lg font-semibold">{await tr('page.installed-themes')}</h2>
+
+      <ul className={PANEL_LIST}>
+        {themes.map((theme) => (
+          <li key={theme.key} className={PANEL_ROW}>
+            <span className="flex min-w-0 flex-col gap-0.5">
+              <span className="flex flex-wrap items-center gap-2">
+                <span className="truncate text-sm font-medium">{theme.title}</span>
+                {theme.isDefault && (
+                  <span className="rounded-full bg-primary px-2 py-0.5 text-xs font-medium text-primary-foreground">
+                    {translator.t('adminThemes.default')}
+                  </span>
+                )}
+                {!theme.enabled && (
+                  <span className="rounded-full border border-border px-2 py-0.5 text-xs text-muted-foreground">
+                    {translator.t('adminThemes.off')}
+                  </span>
+                )}
+                {theme.isBuildTheme && (
+                  <span className="rounded-full border border-border px-2 py-0.5 text-xs text-muted-foreground">
+                    {translator.t('adminThemes.buildsOwn')}
+                  </span>
+                )}
+              </span>
+
+              <span className="truncate text-xs text-muted-foreground">
+                <code className="text-xs">{theme.key}</code> ·{' '}
+                {theme.overriddenTokens === 0 && !theme.hasCustomCss
+                  ? translator.t('adminThemes.noChanges')
+                  : `${theme.overriddenTokens} colour${theme.overriddenTokens === 1 ? '' : 's'} changed${
+                      theme.hasCustomCss ? ', plus custom CSS' : ''
+                    }`}
+                {theme.updatedAt !== null && (
+                  <>
+                    {' '}
+                    · changed{' '}
+                    <time dateTime={theme.updatedAt.toISOString()}>
+                      {formatTime(theme.updatedAt, now, translator).label}
+                    </time>
+                  </>
+                )}
+              </span>
+            </span>
+
+            <ThemeStateForms
+              themeKey={theme.key}
+              title={theme.title}
+              enabled={theme.enabled}
+              isDefault={theme.isDefault}
+              isBuildTheme={theme.isBuildTheme}
+              copy={stateCopy}
+            />
+          </li>
+        ))}
+      </ul>
+
+      <section className={cn(PANEL_CARD, 'gap-2 text-sm')}>
+        <h2 className="font-heading text-lg font-semibold">
+          {translator.t('adminThemes.memberChoice')}
+        </h2>
+        <p className="text-muted-foreground">
+          <strong>{await tr('page.whole-theme')}</strong> — its components as well as its colours. A
+          theme that renders forum listings as tables renders them as tables for the member who
+          picked it. The choice is a cookie, resolved on the server, so the page arrives already
+          correct: no flash, no second paint, and the control works with JavaScript turned off.
+        </p>
+        <p className="text-muted-foreground">
+          {translator.t('adminThemes.tokensOnlyBefore')} <em>only</em>{' '}
+          {translator.t('adminThemes.tokensOnlyAfter')}
+        </p>
+        <p className="text-muted-foreground">
+          {translator.t('adminThemes.deployBefore')} <em>exist</em>
+          {translator.t('adminThemes.deployAfterExist')} <code className="text-xs">pnpm add</code>{' '}
+          {translator.t('adminThemes.deployAfterAdd')}{' '}
+          <code className="text-xs">community.config.ts</code>
+          {translator.t('adminThemes.deployAfterConfig')}{' '}
+          <code className="text-xs">defaultTheme</code> {translator.t('adminThemes.deployEnd')}
+        </p>
+      </section>
+    </PanelPage>
+  )
+}