@meith/web 0.31.0 → 0.32.0

package/app/admin/groups/page.tsx

@@ -1,5 +1,7 @@
 import type { Metadata } from 'next'
 
+import { TextLink } from '@meith/ui'
+
 import { CreateGroupForm } from '@/components/admin/group-forms'
 import { PANEL_CARD, PANEL_LIST, PANEL_ROW, PanelActionLink } from '@/components/shell/panel-list'
 import { PanelPage } from '@/components/shell/panel-page'
@@ -36,12 +38,7 @@ export default async function AdminGroupsPage() {
         <>
           {translator.t('adminGroups.ledeBefore')} <em>{translator.t('adminGroups.default')}</em>
           {translator.t('adminGroups.ledeBetween')}{' '}
-          <a
-            href="/admin/forums"
-            className="font-medium text-foreground underline decoration-border underline-offset-2 hover:decoration-foreground"
-          >
-            {translator.t('adminGroups.forumPermissions')}
-          </a>{' '}
+          <TextLink href="/admin/forums">{translator.t('adminGroups.forumPermissions')}</TextLink>{' '}
           {translator.t('adminGroups.ledeEnd')}
         </>
       }
@@ -68,13 +65,14 @@ export default async function AdminGroupsPage() {
                 {group.description === null ? '' : ` · ${group.description}`}
               </span>
             </span>
-            <a
+            <TextLink
               href={`/admin/groups/${group.id}`}
               aria-label={translator.t('adminGroups.editLabel', { title: group.title })}
-              className="shrink-0 text-sm font-medium text-foreground underline decoration-border underline-offset-2 hover:decoration-foreground"
+              size="sm"
+              className="shrink-0"
             >
               {translator.t('adminGroups.edit')}
-            </a>
+            </TextLink>
           </li>
         ))}
       </ul>

package/app/admin/page.tsx

@@ -1,4 +1,5 @@
 import { ModerationQueue } from '@meith/moderation'
+import { PLUGIN_CARD } from '@meith/plugin-kit'
 import {
   Alert,
   AlertDescription,
@@ -12,6 +13,7 @@ import {
   Empty,
   EmptyDescription,
   EmptyTitle,
+  TextLink,
 } from '@meith/ui'
 
 import { PanelSectionGrid, PanelWaitingList } from '@/components/shell/panel-overview'
@@ -20,6 +22,7 @@ import { adminPageContext } from '@/server/admin'
 import { getContainer } from '@/server/container'
 import { getActor } from '@/server/context'
 import { getTranslator, tr } from '@/server/i18n'
+import { boardRegion } from '@/server/plugin-view'
 import { hasReportScope, resolveReportScope } from '@/server/report-scope'
 import { readTotals } from '@/server/stats'
 import { pendingUpgradeNotice } from '@/server/upgrade-notice'
@@ -57,6 +60,8 @@ export default async function AdminHomePage() {
 
   const allClear = pending === 0 && openReports === 0 && upgradeNotice === null
 
+  const dashboard = await boardRegion('admin.dashboard', actor, PLUGIN_CARD)
+
   return (
     <PanelPage
       title={await tr('page.overview')}
@@ -157,6 +162,12 @@ export default async function AdminHomePage() {
         </PanelSection>
       )}
 
+      {dashboard !== null && (
+        <PanelSection id="plugins-heading" title={await tr('page.plugins')}>
+          <div className="flex flex-col gap-4">{dashboard}</div>
+        </PanelSection>
+      )}
+
       <PanelSection id="activity-heading" title={await tr('page.latest-activity')}>
         <Card>
           {recent.length === 0 ? (
@@ -186,12 +197,7 @@ export default async function AdminHomePage() {
                 ))}
               </CardRows>
               <CardFooter>
-                <a
-                  href="/admin/log"
-                  className="font-medium text-foreground underline decoration-border underline-offset-2 hover:decoration-foreground"
-                >
-                  {await tr('page.whole-log')}
-                </a>
+                <TextLink href="/admin/log">{await tr('page.whole-log')}</TextLink>
               </CardFooter>
             </>
           )}

package/app/admin/plugins/[key]/[[...path]]/page.tsx

@@ -1,6 +1,8 @@
 import type { Metadata } from 'next'
 import { notFound } from 'next/navigation'
 
+import { TextLink } from '@meith/ui'
+
 import { PluginEnableForm, PluginSettingsForm } from '@/components/admin/plugin-forms'
 import { PANEL_CARD, PANEL_NOTE } from '@/components/shell/panel-list'
 import { PanelPage } from '@/components/shell/panel-page'
@@ -219,12 +221,7 @@ export default async function AdminPluginPage({
           <h2 className="font-heading text-lg font-semibold">{await tr('page.scheduled-tasks')}</h2>
           <p className="text-sm text-muted-foreground">
             {t.t('adminPluginDetail.tasksHintBefore')}{' '}
-            <a
-              href="/admin/system"
-              className="font-medium text-foreground underline decoration-border underline-offset-2 hover:decoration-foreground"
-            >
-              {t.t('page.system-health')}
-            </a>{' '}
+            <TextLink href="/admin/system">{t.t('page.system-health')}</TextLink>{' '}
             {t.t('adminPluginDetail.tasksHintAfter')}
           </p>
           <ul className="flex flex-col divide-y divide-border text-sm">
@@ -232,7 +229,9 @@ export default async function AdminPluginPage({
               <li key={task.id} className="flex justify-between gap-3 py-2">
                 <code className="text-xs">{task.registeredId}</code>
                 <span className="text-xs text-muted-foreground">
-                  {t.t('adminPluginDetail.every', { seconds: task.intervalSeconds })}
+                  {task.schedule === null
+                    ? t.t('adminPluginDetail.every', { seconds: task.intervalSeconds })
+                    : t.t('adminPluginDetail.schedule', { schedule: task.schedule })}
                 </span>
               </li>
             ))}

package/app/admin/plugins/page.tsx

@@ -1,6 +1,6 @@
 import type { Metadata } from 'next'
 
-import { cn } from '@meith/ui'
+import { cn, TextLink } from '@meith/ui'
 
 import { MarketplaceRefreshForm } from '@/components/admin/marketplace-forms'
 import { PluginEnableForm, PluginHealthResetForm } from '@/components/admin/plugin-forms'
@@ -128,12 +128,9 @@ export default async function AdminPluginsPage() {
                 </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"
-                  >
+                  <TextLink href={`/admin/plugins/${plugin.key}`} size="sm">
                     {t.t('adminPlugins.details')}
-                  </a>
+                  </TextLink>
                   {plugin.durableHealth?.disabledAt != null && (
                     <PluginHealthResetForm pluginKey={plugin.key} copy={copy} />
                   )}

package/app/admin/users/[id]/page.tsx

@@ -1,6 +1,8 @@
 import type { Metadata } from 'next'
 import { notFound } from 'next/navigation'
 
+import { TextLink } from '@meith/ui'
+
 import {
   BanMemberForm,
   ClearSecondFactorForm,
@@ -151,12 +153,9 @@ export default async function AdminMemberPage({ params }: { params: Promise<{ id
         <h2 className="font-heading text-lg font-semibold">{translator.t('adminUsers.merge')}</h2>
         <p className="text-sm text-muted-foreground">{translator.t('adminUsers.mergeLede')}</p>
         <p>
-          <a
-            href={`/admin/users/${member.id}/merge`}
-            className="text-sm font-medium text-foreground underline decoration-border underline-offset-2 hover:decoration-foreground"
-          >
+          <TextLink href={`/admin/users/${member.id}/merge`} size="sm">
             {translator.t('adminUsers.mergeLink', { username: member.username })}
-          </a>
+          </TextLink>
         </p>
       </section>
 
@@ -185,12 +184,7 @@ export default async function AdminMemberPage({ params }: { params: Promise<{ id
             <ul className="flex flex-col gap-1 text-sm">
               {view.sharedNetwork.map((row) => (
                 <li key={row.id}>
-                  <a
-                    href={`/admin/users/${row.id}`}
-                    className="font-medium text-foreground underline decoration-border underline-offset-2 hover:decoration-foreground"
-                  >
-                    {row.username}
-                  </a>{' '}
+                  <TextLink href={`/admin/users/${row.id}`}>{row.username}</TextLink>{' '}
                   <span className="text-xs text-muted-foreground">
                     {row.state === 'active'
                       ? ''

package/app/admin/users/prune/page.tsx

@@ -1,5 +1,7 @@
 import type { Metadata } from 'next'
 
+import { TextLink } from '@meith/ui'
+
 import { PruneForm, SelectedPruneForm } from '@/components/admin/user-forms'
 import { PANEL_CARD, PANEL_NOTE } from '@/components/shell/panel-list'
 import { PanelPage } from '@/components/shell/panel-page'
@@ -72,12 +74,7 @@ export default async function AdminPrunePage({
           <ul className="flex flex-col gap-1 text-sm text-muted-foreground">
             {selectedPreview.sample.map((row) => (
               <li key={row.id}>
-                <a
-                  href={`/admin/users/${row.id}`}
-                  className="font-medium text-foreground underline decoration-border underline-offset-2 hover:decoration-foreground"
-                >
-                  {row.username}
-                </a>{' '}
+                <TextLink href={`/admin/users/${row.id}`}>{row.username}</TextLink>{' '}
                 {translator.t('adminUsers.pruneMemberMeta', {
                   email: row.email,
                   date: row.createdAt.toISOString().slice(0, 10),
@@ -150,12 +147,7 @@ export default async function AdminPrunePage({
               <ul className="flex flex-col gap-1 text-sm text-muted-foreground">
                 {preview.sample.map((row) => (
                   <li key={row.id}>
-                    <a
-                      href={`/admin/users/${row.id}`}
-                      className="font-medium text-foreground underline decoration-border underline-offset-2 hover:decoration-foreground"
-                    >
-                      {row.username}
-                    </a>{' '}
+                    <TextLink href={`/admin/users/${row.id}`}>{row.username}</TextLink>{' '}
                     {translator.t('adminUsers.pruneMemberMeta', {
                       email: row.email,
                       date: row.createdAt.toISOString().slice(0, 10),

package/app/admin/webhooks/page.tsx

@@ -0,0 +1,144 @@
+import type { Metadata } from 'next'
+
+import {
+  CreateWebhookForm,
+  DeleteWebhookForm,
+  ToggleWebhookForm,
+} from '@/components/admin/webhook-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 { buildWebhookView } from '@/server/webhooks-admin'
+import { webhookFormsCopy } from '@/view/admin-panel-copy'
+import { formatTime } from '@/view/time'
+
+export async function generateMetadata(): Promise<Metadata> {
+  return { title: await tr('page.webhooks') }
+}
+
+export default async function AdminWebhooksPage() {
+  if ((await adminPageContext()) === null) return null
+
+  const now = new Date()
+  const translator = await getTranslator()
+  const copy = webhookFormsCopy(translator)
+  const view = await buildWebhookView()
+
+  if (view === null) {
+    return (
+      <PanelPage title={await tr('page.webhooks')}>
+        <p className="mt-2 text-sm text-muted-foreground">
+          {await tr('page.this-board-running-in-memory-sample-c')}
+        </p>
+      </PanelPage>
+    )
+  }
+
+  const statusLabel: Record<string, string> = {
+    delivered: translator.t('adminWebhooks.delivered'),
+    pending: translator.t('adminWebhooks.pending'),
+    dead: translator.t('adminWebhooks.dead'),
+  }
+
+  return (
+    <PanelPage
+      title={await tr('page.webhooks')}
+      lede={translator.t('adminWebhooks.lede')}
+      gap="loose"
+    >
+      <section className={PANEL_CARD}>
+        <h2 className="font-heading text-lg font-semibold">{translator.t('adminWebhooks.add')}</h2>
+        <CreateWebhookForm topics={view.topics} formats={view.formats} copy={copy} />
+      </section>
+
+      <section className={PANEL_CARD}>
+        <h2 className="font-heading text-lg font-semibold">
+          {translator.t('adminWebhooks.existing')}
+        </h2>
+
+        {view.subscriptions.length === 0 ? (
+          <p className="text-sm text-muted-foreground">{translator.t('adminWebhooks.empty')}</p>
+        ) : (
+          <ul className="flex flex-col gap-4">
+            {view.subscriptions.map((subscription) => (
+              <li
+                key={subscription.id}
+                className="flex flex-col gap-3 rounded-md border border-border p-3"
+              >
+                <div className="flex flex-wrap items-center justify-between gap-2">
+                  <code className="overflow-x-auto font-mono text-xs">{subscription.url}</code>
+                  <span
+                    className={
+                      subscription.active ? 'text-moderation-approved' : 'text-muted-foreground'
+                    }
+                  >
+                    {subscription.active
+                      ? translator.t('adminWebhooks.state.active')
+                      : translator.t('adminWebhooks.state.paused')}
+                  </span>
+                </div>
+
+                <div className="flex flex-wrap gap-2">
+                  {subscription.topics.map((topic) => (
+                    <code key={topic} className="font-mono text-xs text-muted-foreground">
+                      {topic}
+                    </code>
+                  ))}
+                </div>
+
+                <p className="text-xs text-muted-foreground">
+                  <code className="font-mono">{subscription.format}</code>
+                  {' · '}
+                  {statusLabel.delivered}: {subscription.delivered}
+                  {' · '}
+                  {statusLabel.pending}: {subscription.pending}
+                  {' · '}
+                  {statusLabel.dead}: {subscription.dead}
+                </p>
+
+                {subscription.recent.length > 0 && (
+                  <details>
+                    <summary className="cursor-pointer text-xs font-medium">
+                      {translator.t('adminWebhooks.recent')}
+                    </summary>
+                    <div className="mt-2 overflow-x-auto">
+                      <table className="w-full border-collapse text-xs">
+                        <tbody>
+                          {subscription.recent.map((entry) => (
+                            <tr key={entry.id} className="border-b border-border align-top">
+                              <td className="py-1 pr-3 font-mono">{entry.topic}</td>
+                              <td className="py-1 pr-3">
+                                {statusLabel[entry.status] ?? entry.status}
+                              </td>
+                              <td className="py-1 pr-3">{entry.attempts}</td>
+                              <td className="py-1 pr-3 font-mono">
+                                {entry.lastStatusCode ?? entry.lastError ?? ''}
+                              </td>
+                              <td className="py-1">
+                                {formatTime(entry.createdAt, now, translator).label}
+                              </td>
+                            </tr>
+                          ))}
+                        </tbody>
+                      </table>
+                    </div>
+                  </details>
+                )}
+
+                <div className="flex flex-wrap items-center gap-3">
+                  <ToggleWebhookForm
+                    webhookId={subscription.id}
+                    active={subscription.active}
+                    copy={copy}
+                  />
+                  <DeleteWebhookForm webhookId={subscription.id} copy={copy} />
+                </div>
+              </li>
+            ))}
+          </ul>
+        )}
+      </section>
+    </PanelPage>
+  )
+}

package/app/api/subscribe/thread/[id]/route.ts

@@ -0,0 +1,53 @@
+import { ALL_THREAD_AUTHORS, PUBLIC_CONTENT } from '@meith/core'
+import { currentRequestId } from '@meith/core/logger'
+import { canHoldThreads } from '@meith/forums'
+
+import { getContainer } from '@/server/container'
+import { getActor } from '@/server/context'
+import { emitEvent } from '@/server/plugin-view'
+import { crossOriginRefusal, isSameOrigin } from '@/server/same-origin'
+import { seeOther } from '@/server/see-other'
+
+function idFrom(value: string): number | null {
+  if (!/^[1-9]\d*$/.test(value)) return null
+  const id = Number(value)
+  return Number.isSafeInteger(id) ? id : null
+}
+
+export async function POST(request: Request, { params }: { params: Promise<{ id: string }> }) {
+  if (!isSameOrigin(request)) return crossOriginRefusal()
+
+  const threadId = idFrom((await params).id)
+  const actor = await getActor()
+  const { forums, threads, authorizer, subscriptions } = getContainer()
+  if (threadId === null || actor.userId === null || subscriptions === null) return seeOther('/')
+
+  const thread = await threads.findById(threadId, PUBLIC_CONTENT, ALL_THREAD_AUTHORS)
+  if (!thread) return seeOther('/')
+  const forum = await forums.findById(thread.forumId)
+  if (!forum || !canHoldThreads(forum.type)) return seeOther('/')
+  const matrix = await authorizer.forumMatrix(actor, forum.id)
+  const target = {
+    ...(await authorizer.moderatorTargetIn(actor, forum.id, matrix)),
+    threadAuthorId: thread.authorUserId,
+  }
+  if (!authorizer.can(actor, 'thread.view', target)) return seeOther('/')
+
+  const subscribed = await subscriptions.subscribe({
+    userId: actor.userId,
+    target: 'thread',
+    targetId: threadId,
+    mode: 'instant',
+    at: new Date(),
+  })
+
+  if (subscribed) {
+    await emitEvent(
+      'subscription.changed',
+      { userId: actor.userId, target: 'thread', targetId: threadId, subscribed: true },
+      { requestId: currentRequestId() ?? null },
+    )
+  }
+
+  return seeOther(`/thread/${threadId}-${thread.slug}`)
+}

package/app/api/unsubscribe/thread/[id]/route.ts

@@ -0,0 +1,42 @@
+import { ALL_THREAD_AUTHORS, PUBLIC_CONTENT } from '@meith/core'
+import { currentRequestId } from '@meith/core/logger'
+
+import { getContainer } from '@/server/container'
+import { getActor } from '@/server/context'
+import { emitEvent } from '@/server/plugin-view'
+import { crossOriginRefusal, isSameOrigin } from '@/server/same-origin'
+import { seeOther } from '@/server/see-other'
+
+function idFrom(value: string): number | null {
+  if (!/^[1-9]\d*$/.test(value)) return null
+  const id = Number(value)
+  return Number.isSafeInteger(id) ? id : null
+}
+
+export async function POST(request: Request, { params }: { params: Promise<{ id: string }> }) {
+  if (!isSameOrigin(request)) return crossOriginRefusal()
+
+  const threadId = idFrom((await params).id)
+  const actor = await getActor()
+  const { threads, subscriptions } = getContainer()
+  if (threadId === null || actor.userId === null || subscriptions === null) return seeOther('/')
+
+  const thread = await threads.findById(threadId, PUBLIC_CONTENT, ALL_THREAD_AUTHORS)
+  if (!thread) return seeOther('/')
+
+  const unsubscribed = await subscriptions.unsubscribe({
+    userId: actor.userId,
+    target: 'thread',
+    targetId: threadId,
+  })
+
+  if (unsubscribed) {
+    await emitEvent(
+      'subscription.changed',
+      { userId: actor.userId, target: 'thread', targetId: threadId, subscribed: false },
+      { requestId: currentRequestId() ?? null },
+    )
+  }
+
+  return seeOther(`/thread/${threadId}-${thread.slug}`)
+}

package/app/atom.xml/route.ts

@@ -2,6 +2,6 @@ import { boardFeed } from '@/server/feed-routes'
 
 export const dynamic = 'force-dynamic'
 
-export async function GET(): Promise<Response> {
-  return boardFeed('atom', '/atom.xml')
+export async function GET(request: Request): Promise<Response> {
+  return boardFeed('atom', '/atom.xml', request)
 }

package/app/auth/sso/[provider]/callback/route.ts

@@ -23,6 +23,7 @@ import { isTopLevelNavigation } from '@/server/same-origin'
 import {
   clearHandshakeCookie,
   readHandshakeCookie,
+  setSecondFactorCookie,
   setSessionCookie,
 } from '@/server/session-cookies'
 import { decodeHandshake } from '@/server/sso-handshake'
@@ -42,6 +43,10 @@ function withReason(path: string, reason: string): string {
   return `${path}${path.includes('?') ? '&' : '?'}sso=${reason}`
 }
 
+function verifyPath(next: string): string {
+  return next === '/' ? '/login/verify' : `/login/verify?next=${encodeURIComponent(next)}`
+}
+
 export async function GET(
   request: NextRequest,
   context: { params: Promise<{ provider: string }> },
@@ -146,6 +151,11 @@ export async function GET(
       },
     })
 
+    if (outcome.status === 'second-factor') {
+      await setSecondFactorCookie(outcome.token, outcome.expiresAt)
+      return to(verifyPath(handshake.next))
+    }
+
     if (outcome.status === 'pending') {
       if (outcome.verificationToken === null) return to(withReason(home, 'approval'))
 

package/app/feed.xml/route.ts

@@ -2,6 +2,6 @@ import { boardFeed } from '@/server/feed-routes'
 
 export const dynamic = 'force-dynamic'
 
-export async function GET(): Promise<Response> {
-  return boardFeed('rss', '/feed.xml')
+export async function GET(request: Request): Promise<Response> {
+  return boardFeed('rss', '/feed.xml', request)
 }

package/app/offline/route.ts

@@ -0,0 +1,98 @@
+import { BOARD_TITLE } from '@/view/board-title'
+
+export const dynamic = 'force-static'
+
+function page(): string {
+  return `<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Offline · ${BOARD_TITLE}</title>
+<style>
+:root {
+  --offline-background: oklch(0.968 0 0);
+  --offline-foreground: oklch(0.205 0 0);
+  --offline-card: oklch(1 0 0);
+  --offline-border: oklch(0.905 0 0);
+  --offline-primary: oklch(0.508 0.105 165.6);
+  --offline-primary-foreground: oklch(0.985 0 0);
+  --offline-muted-foreground: oklch(0.494 0 0);
+  --offline-radius: 0.5rem;
+  color-scheme: light dark;
+}
+@media (prefers-color-scheme: dark) {
+  :root {
+    --offline-background: oklch(0.15 0 0);
+    --offline-foreground: oklch(0.967 0 0);
+    --offline-card: oklch(0.196 0 0);
+    --offline-border: oklch(0.31 0 0);
+    --offline-primary: oklch(0.773 0.153 163.2);
+    --offline-primary-foreground: oklch(0.181 0.029 166.6);
+    --offline-muted-foreground: oklch(0.702 0 0);
+  }
+}
+* {
+  box-sizing: border-box;
+}
+body {
+  margin: 0;
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1.5rem;
+  background: var(--offline-background);
+  color: var(--offline-foreground);
+  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
+}
+main {
+  width: 100%;
+  max-width: 24rem;
+  padding: 2rem;
+  text-align: center;
+  background: var(--offline-card);
+  border: 1px solid var(--offline-border);
+  border-radius: var(--offline-radius);
+}
+h1 {
+  margin: 0 0 0.5rem;
+  font-size: 1.125rem;
+  font-weight: 600;
+}
+p {
+  margin: 0 0 1.5rem;
+  color: var(--offline-muted-foreground);
+  font-size: 0.9375rem;
+  line-height: 1.5;
+}
+a.retry {
+  display: inline-block;
+  padding: 0.5rem 1.25rem;
+  border-radius: var(--offline-radius);
+  background: var(--offline-primary);
+  color: var(--offline-primary-foreground);
+  font-weight: 600;
+  text-decoration: none;
+}
+</style>
+</head>
+<body>
+<main>
+<h1>${BOARD_TITLE}</h1>
+<p>You're offline. Check your connection and try again.</p>
+<a class="retry" href="/">Retry</a>
+</main>
+</body>
+</html>
+`
+}
+
+export function GET(): Response {
+  return new Response(page(), {
+    headers: {
+      'content-type': 'text/html; charset=utf-8',
+      'cache-control': 'public, max-age=300',
+    },
+  })
+}

package/next.config.mjs

@@ -60,6 +60,7 @@ const nextConfig = {
     '@meith/attachments',
     '@meith/authorization',
     '@meith/avatars',
+    '@meith/board-digest',
     '@meith/core',
     '@meith/db',
     '@meith/demo',