@meith/web 0.16.0

package/app/admin/plugins/page.tsx

@@ -0,0 +1,165 @@
+import type { Metadata } from 'next'
+
+import { cn } from '@meith/ui'
+
+import { PluginEnableForm, PluginHealthResetForm } from '@/components/admin/plugin-forms'
+import { PANEL_CARD, PANEL_LIST, PANEL_NOTE, 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 { getTranslator, tr } from '@/server/i18n'
+import { hookListeners, pluginInventory } from '@/server/plugin-admin'
+import { pluginFormsCopy } from '@/view/admin-panel-copy'
+import { catalogTabs } from '@/view/marketplace-panel'
+
+export async function generateMetadata(): Promise<Metadata> {
+  return { title: await tr('page.plugins') }
+}
+
+export default async function AdminPluginsPage() {
+  const t = await getTranslator()
+  if ((await adminPageContext()) === null) return null
+
+  const { plugins, migrationsKnown } = await pluginInventory(t)
+  const listeners = hookListeners()
+  const copy = pluginFormsCopy(t)
+
+  return (
+    <PanelPage
+      title={t.t('page.plugins')}
+      lede={
+        <>
+          {t.t('adminPlugins.ledeBefore')} <code className="text-xs">community.config.ts</code>{' '}
+          {t.t('adminPlugins.ledeAfter')}
+        </>
+      }
+    >
+      <ViewTabs
+        label={t.t('adminMarketplace.tabsLabel')}
+        tabs={catalogTabs({
+          installedHref: '/admin/plugins',
+          browseHref: '/admin/plugins/browse',
+          current: 'installed',
+          t,
+        })}
+      />
+
+      {plugins.length === 0 ? (
+        <p className={PANEL_NOTE}>{t.t('page.no-plugins-configured-this-board')}</p>
+      ) : (
+        <ul className={PANEL_LIST}>
+          {plugins.map((plugin) => {
+            const pending = plugin.migrations.filter((migration) => !migration.applied).length
+
+            return (
+              <li key={plugin.key} className={PANEL_ROW}>
+                <span className="flex min-w-0 flex-col gap-1">
+                  <span className="truncate text-sm font-medium">
+                    {plugin.name ?? plugin.key}
+                    {plugin.version !== null && (
+                      <span className="ml-2 text-xs font-normal text-muted-foreground">
+                        {plugin.version}
+                      </span>
+                    )}
+                  </span>
+                  <span className="truncate font-mono text-xs text-muted-foreground">
+                    {plugin.key}
+                  </span>
+
+                  {!plugin.hasDefinition ? (
+                    <span className="text-xs text-muted-foreground">
+                      {t.t('page.registered-without-definition-key-no')}
+                    </span>
+                  ) : !plugin.configuredEnabled ? (
+                    <span className="text-xs text-muted-foreground">
+                      {t.t('adminPlugins.configDisabled')}
+                    </span>
+                  ) : !plugin.operatorEnabled ? (
+                    <span className="text-xs text-muted-foreground">
+                      {t.t('page.switched-off-here-its-hooks')}
+                    </span>
+                  ) : plugin.health?.disabledReason != null ? (
+                    <span className="text-xs text-destructive">
+                      {t.t('adminPlugins.serverDisabled', { reason: plugin.health.disabledReason })}
+                    </span>
+                  ) : null}
+
+                  {plugin.durableHealth !== null && plugin.durableHealth.failures > 0 && (
+                    <span className="text-xs text-muted-foreground">
+                      {t.t('adminPlugins.recordedFailures', {
+                        count: plugin.durableHealth.failures,
+                      })}
+                    </span>
+                  )}
+
+                  {pending > 0 && migrationsKnown && (
+                    <span className="text-xs text-destructive">
+                      {t.t('adminPlugins.pendingMigrations', { count: pending })}
+                    </span>
+                  )}
+
+                  {plugin.pages.length > 0 && (
+                    <span className="flex flex-wrap items-center gap-x-2 gap-y-1 pt-1">
+                      {plugin.pages.map((page) => (
+                        <a
+                          key={page.path}
+                          href={page.href}
+                          className="inline-flex items-center rounded-md border border-border bg-surface px-2 py-0.5 text-xs font-medium transition-colors hover:border-primary hover:bg-accent focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
+                        >
+                          {page.title}
+                        </a>
+                      ))}
+                    </span>
+                  )}
+                </span>
+
+                <span className="flex shrink-0 items-center gap-3">
+                  <a
+                    href={`/admin/plugins/${plugin.key}`}
+                    className="text-sm font-medium text-foreground underline decoration-border underline-offset-2 hover:decoration-foreground"
+                  >
+                    {t.t('adminPlugins.details')}
+                  </a>
+                  {plugin.durableHealth?.disabledAt != null && (
+                    <PluginHealthResetForm pluginKey={plugin.key} copy={copy} />
+                  )}
+                  {plugin.configuredEnabled && plugin.hasDefinition && (
+                    <PluginEnableForm
+                      pluginKey={plugin.key}
+                      enabled={plugin.operatorEnabled}
+                      copy={copy}
+                    />
+                  )}
+                </span>
+              </li>
+            )
+          })}
+        </ul>
+      )}
+
+      {!migrationsKnown && <p className={PANEL_NOTE}>{t.t('adminPlugins.migrationsUnknown')}</p>}
+
+      {listeners.length > 0 && (
+        <section className={cn(PANEL_CARD, 'gap-2 text-sm')}>
+          <h2 className="font-heading text-lg font-semibold">{t.t('page.hooks-use')}</h2>
+          <p className="text-muted-foreground">{t.t('adminPlugins.hooksHint')}</p>
+          <ul className="flex flex-col divide-y divide-border">
+            {listeners.map((row) => (
+              <li key={row.hook} className="flex flex-wrap items-baseline gap-2 py-2">
+                <code className="text-xs">{row.hook}</code>
+                <span className="text-xs text-muted-foreground">{row.plugins.join(' → ')}</span>
+              </li>
+            ))}
+          </ul>
+        </section>
+      )}
+
+      <section className={cn(PANEL_CARD, 'gap-2 text-sm')}>
+        <h2 className="font-heading text-lg font-semibold">{t.t('page.installing-plugin')}</h2>
+        <p className="text-muted-foreground">{t.t('adminPlugins.installingHint')}</p>
+        <p className="text-muted-foreground">{t.t('adminPlugins.duplicateHint')}</p>
+        <p className="text-muted-foreground">{t.t('adminPlugins.uninstallHint')}</p>
+      </section>
+    </PanelPage>
+  )
+}

package/app/admin/security/page.tsx

@@ -0,0 +1,124 @@
+import type { Metadata } from 'next'
+
+import { AUTH_EVENT_KINDS } from '@meith/accounts'
+
+import { PANEL_LIST, PANEL_ROW } from '@/components/shell/panel-list'
+import { PanelPage } from '@/components/shell/panel-page'
+import { adminPageContext } from '@/server/admin'
+import { boardSecurityActivity } from '@/server/auth-events'
+import { getContainer } from '@/server/container'
+import { getTranslator, tr } from '@/server/i18n'
+import { authEventLabel, describeAddress, describeDevice } from '@/view/security-activity'
+import { formatTime } from '@/view/time'
+
+export async function generateMetadata(): Promise<Metadata> {
+  return { title: await tr('page.sign-in-activity') }
+}
+
+const PAGE_SIZE = 50
+
+export default async function AdminSecurityPage({
+  searchParams,
+}: {
+  searchParams: Promise<{ before?: string; kind?: string }>
+}) {
+  if ((await adminPageContext()) === null) return null
+
+  const query = await searchParams
+  const translator = await getTranslator()
+
+  const kind = (AUTH_EVENT_KINDS as readonly string[]).includes(query.kind ?? '')
+    ? (query.kind as (typeof AUTH_EVENT_KINDS)[number])
+    : undefined
+
+  const before = /^\d+$/.test(query.before ?? '') ? Number(query.before) : undefined
+
+  const events = await boardSecurityActivity({
+    limit: PAGE_SIZE + 1,
+    ...(before === undefined ? {} : { before }),
+    ...(kind === undefined ? {} : { kind }),
+  })
+
+  const page = events.slice(0, PAGE_SIZE)
+  const more = events.length > PAGE_SIZE ? page[page.length - 1]?.id : undefined
+
+  const names = await usernamesFor(page.map((event) => event.userId))
+  const now = new Date()
+
+  return (
+    <PanelPage
+      title={await tr('page.sign-in-activity')}
+      lede={translator.t('adminSecurity.lede')}
+      width="wide"
+    >
+      <form method="get" className="flex flex-wrap items-end gap-2">
+        <label className="flex flex-col gap-1 text-sm">
+          <span className="font-medium">{translator.t('adminSecurity.kind')}</span>
+          <select
+            name="kind"
+            defaultValue={kind ?? ''}
+            className="h-9 rounded-md border border-border bg-background px-2 text-sm"
+          >
+            <option value="">{translator.t('adminSecurity.everything')}</option>
+            {AUTH_EVENT_KINDS.map((value) => (
+              <option key={value} value={value}>
+                {authEventLabel(value, translator)}
+              </option>
+            ))}
+          </select>
+        </label>
+        <button
+          type="submit"
+          className="h-9 rounded-md border border-border bg-card px-3 text-sm font-medium hover:bg-muted"
+        >
+          {translator.t('adminSecurity.filter')}
+        </button>
+      </form>
+
+      {page.length === 0 ? (
+        <p className="text-sm text-muted-foreground">{await tr('page.nothing-recorded-yet')}</p>
+      ) : (
+        <ul className={PANEL_LIST}>
+          {page.map((event) => (
+            <li key={event.id} className={PANEL_ROW}>
+              <span className="flex flex-col text-sm">
+                <span className="font-medium">{authEventLabel(event.kind, translator)}</span>
+                <span className="text-xs text-muted-foreground">
+                  {event.userId === null
+                    ? translator.t('adminSecurity.noAccount')
+                    : (names.get(event.userId) ??
+                      translator.t('adminSecurity.member', { id: event.userId }))}{' '}
+                  · {describeDevice(event.userAgent, translator)} ·{' '}
+                  {describeAddress(event.ipPrefix)}
+                </span>
+              </span>
+              <span className="text-xs text-muted-foreground">
+                {formatTime(event.at, now, translator).label}
+              </span>
+            </li>
+          ))}
+        </ul>
+      )}
+
+      {more !== undefined && (
+        <a
+          href={`/admin/security?before=${more}${kind === undefined ? '' : `&kind=${kind}`}`}
+          className="text-sm underline underline-offset-4"
+        >
+          {await tr('page.older-activity')}
+        </a>
+      )}
+    </PanelPage>
+  )
+}
+
+async function usernamesFor(ids: readonly (number | null)[]): Promise<ReadonlyMap<number, string>> {
+  const { accountStore } = getContainer()
+  const wanted = [...new Set(ids.filter((id): id is number => id !== null))]
+
+  const found = await Promise.all(wanted.map((id) => accountStore.accounts.findById(id)))
+
+  return new Map(
+    found.filter((account) => account !== null).map((account) => [account.id, account.username]),
+  )
+}

package/app/admin/settings/page.tsx

@@ -0,0 +1,190 @@
+import type { Metadata } from 'next'
+import { redirect } from 'next/navigation'
+
+import { buttonVariants, Card, CardContent, CardFooter, cn, Input } from '@meith/ui'
+
+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 { boardUrlResolution } from '@/server/board-url'
+import { getTranslator, tr } from '@/server/i18n'
+import { assessMailReadiness } from '@/server/mail-health'
+import { pushReadiness } from '@/server/push'
+import { getSettings } from '@/server/settings'
+import { mailTestCardCopy, settingsFormCopy } from '@/view/admin-panel-copy'
+import { buildAdminSettingsModel, DEFAULT_SETTING_GROUP, settingsHref } from '@/view/admin-settings'
+
+export async function generateMetadata(): Promise<Metadata> {
+  return { title: await tr('page.board-settings') }
+}
+
+export default async function AdminSettingsPage({
+  searchParams,
+}: {
+  searchParams: Promise<{ group?: string; q?: string; advanced?: string }>
+}) {
+  if ((await adminPageContext()) === null) return null
+
+  const query = await searchParams
+
+  if (query.group === undefined && query.q === undefined) {
+    redirect(settingsHref({ group: DEFAULT_SETTING_GROUP, advanced: query.advanced === '1' }))
+  }
+  const t = await getTranslator()
+  const model = buildAdminSettingsModel({
+    snapshot: await getSettings(),
+    query: query.q,
+    group: query.group,
+    advanced: query.advanced === '1',
+    t,
+  })
+
+  const mail =
+    model.activeGroup === 'registration' || model.activeGroup === 'mail'
+      ? await assessMailReadiness()
+      : null
+
+  const address = model.activeGroup === 'board' ? await boardUrlResolution() : null
+
+  const push = model.activeGroup === 'push' ? await pushReadiness() : null
+
+  return (
+    <PanelPage title={await tr('page.board-settings')} lede={t.t('adminSettings.lede')}>
+      <Card>
+        <CardContent className="flex flex-wrap items-center gap-3 p-3">
+          <form method="get" className="flex min-w-64 flex-1 items-center gap-2">
+            <label className="flex-1">
+              <span className="sr-only">{await tr('page.search-settings')}</span>
+              <Input
+                type="search"
+                name="q"
+                defaultValue={model.query}
+                placeholder={t.t('adminSettings.searchPlaceholder')}
+              />
+            </label>
+            {model.showAdvanced && <input type="hidden" name="advanced" value="1" />}
+            <button type="submit" className={buttonVariants({ variant: 'outline' })}>
+              Search
+            </button>
+          </form>
+
+          {(model.showAdvanced || model.hiddenAdvanced > 0) && (
+            <a
+              href={settingsHref({
+                group: model.activeGroup,
+                query: model.query,
+                advanced: !model.showAdvanced,
+              })}
+              className={cn(
+                buttonVariants({ variant: model.showAdvanced ? 'secondary' : 'outline' }),
+                'shrink-0',
+              )}
+            >
+              {model.showAdvanced
+                ? t.t('adminSettings.hideAdvanced')
+                : t.t('adminSettings.showAdvanced', { count: model.hiddenAdvanced })}
+            </a>
+          )}
+        </CardContent>
+
+        <CardFooter>
+          {model.query === ''
+            ? t.t('adminSettings.settingCount', {
+                count: model.total,
+                group: model.groups[0]?.label ?? t.t('adminSettings.thisGroup'),
+              })
+            : t.t('adminSettings.matchCount', { count: model.total, query: model.query })}
+          {model.showAdvanced && t.t('adminSettings.advancedShown')}
+        </CardFooter>
+      </Card>
+
+      {address?.source === 'environment' && (
+        <section className="rounded-lg border border-border bg-muted/40 p-4 text-sm">
+          <p>
+            {t.t('adminSettings.environmentAddressBefore')} <code>{address.url}</code>
+            {t.t('adminSettings.environmentAddressAfterUrl')} <code>APP_URL</code>
+            {t.t('adminSettings.environmentAddressEnd')}
+          </p>
+        </section>
+      )}
+
+      {address?.source === 'none' && (
+        <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.this-board-does-not-know')}
+          </h2>
+          <p className="text-sm">{t.t('adminSettings.noAddress')}</p>
+        </section>
+      )}
+
+      {model.activeGroup === 'mail' && mail !== null && (
+        <MailTestCard
+          summary={mail.summary}
+          sends={mail.sends}
+          fromEnvironment={mail.source === 'environment'}
+          copy={mailTestCardCopy(t)}
+        />
+      )}
+
+      {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.nobody-can-finish-registering')}
+          </h2>
+          <p className="text-sm">
+            The activation method is{' '}
+            <strong className="font-medium">{mail.activationMethod}</strong>, so a new account waits
+            for a confirmation link — but this board sends no mail: {mail.summary.toLowerCase()}.
+            Every account created while this is true is stuck: it cannot sign in, and the link that
+            would release it never arrives.
+          </p>
+          <p className="text-sm">
+            {t.t('adminSettings.fixActivationBefore')} <strong className="font-medium">none</strong>{' '}
+            {t.t('adminSettings.fixActivationBetween')}{' '}
+            <strong className="font-medium">admin</strong>
+            {t.t('adminSettings.fixActivationAfter')}
+            {mail.source === 'environment' ? (
+              <>
+                {t.t('adminSettings.environmentMailBefore')} <code>MAIL_*</code>
+                {t.t('adminSettings.environmentMailBetween')} <code>MAIL_DRIVER</code>
+                {t.t('adminSettings.environmentMailEnd')}
+              </>
+            ) : (
+              <>
+                <a href={settingsHref({ group: 'mail' })} className="underline">
+                  {t.t('adminSettings.configureMail')}
+                </a>
+                {t.t('adminSettings.configureMailEnd')}
+              </>
+            )}
+          </p>
+        </section>
+      )}
+
+      {push !== null && push.problem !== null && push.problem !== 'disabled' && (
+        <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">
+            {t.t('adminSettings.pushNotLive')}
+          </h2>
+          <p className="text-sm">
+            {push.problem === 'no-subject'
+              ? t.t('adminSettings.pushNoContact')
+              : t.t('adminSettings.pushNoKeys')}
+          </p>
+        </section>
+      )}
+
+      <AdminSettingsForm groups={model.groups} copy={settingsFormCopy(t)} />
+    </PanelPage>
+  )
+}