@meith/web 0.16.0

package/app/(board)/search/page.tsx

@@ -0,0 +1,289 @@
+import type { Metadata } from 'next'
+import { redirect } from 'next/navigation'
+
+import { isInSubtree } from '@meith/forums'
+import type { Translator } from '@meith/i18n'
+import {
+  MAX_QUERY_LENGTH,
+  readGrouping,
+  readMatch,
+  readPeriod,
+  readSort,
+  SEARCH_GROUPINGS,
+  SEARCH_MATCHES,
+  SEARCH_PERIODS,
+  SEARCH_SORTS,
+  type SearchFilterSet,
+} from '@meith/search'
+import {
+  type OptionModel,
+  requireSlot,
+  type SearchAdvancedModel,
+  type SearchFormModel,
+  slotCopy,
+} from '@meith/theme-kit'
+
+import { SearchOffNotice } from '@/components/board/search-off-notice'
+import { getContainer } from '@/server/container'
+import { getActor } from '@/server/context'
+import { getTranslator, tr } from '@/server/i18n'
+import { filterView, viewerRef } from '@/server/plugin-view'
+import { searchEnabled } from '@/server/search'
+import { MAX_AUTHOR_NAMES, type RunSearchOutcome, runSearch } from '@/server/search-page'
+import { currentSessionKey } from '@/server/session-key'
+import { currentTheme } from '@/server/theme'
+import {
+  choiceOptions,
+  GROUPING_LABEL_KEYS,
+  MATCH_LABEL_KEYS,
+  PERIOD_LABEL_KEYS,
+  SEARCH_FIELDS,
+  SORT_LABEL_KEYS,
+  SUBFORUMS_ON,
+} from '@/view/search-controls'
+
+export async function generateMetadata(): Promise<Metadata> {
+  return { title: await tr('page.search') }
+}
+
+interface Submitted {
+  readonly terms: string
+  readonly forums: readonly string[]
+  readonly subforums: boolean
+  readonly authors: string
+  readonly filters: Omit<SearchFilterSet, 'authorUserIds' | 'authorNames' | 'forumIds'>
+}
+
+export default async function SearchPage({
+  searchParams,
+}: {
+  searchParams: Promise<Record<string, string | string[] | undefined>>
+}) {
+  if (!(await searchEnabled())) {
+    const translator = await getTranslator()
+    return (
+      <SearchOffNotice
+        title={translator.t('board.search.title')}
+        message={translator.t('board.search.disabled')}
+      />
+    )
+  }
+
+  const params = await searchParams
+  const submitted = read(params)
+
+  const actor = await getActor()
+  const SearchForm = requireSlot(await currentTheme(), 'SearchForm')
+  const translator = await getTranslator()
+
+  if (submitted.terms !== '') {
+    const outcome = await runSearch({
+      actor,
+      sessionKey: await currentSessionKey(),
+      terms: submitted.terms,
+      authors: submitted.authors,
+      filters: {
+        ...submitted.filters,
+        ...(await chosenForums(submitted)),
+      },
+    })
+
+    if (outcome.kind === 'ok') redirect(`/search/${outcome.token}`)
+
+    return (
+      <Page>
+        <SearchForm
+          {...(await filteredForm({
+            ...(await formModel(submitted)),
+            hint: null,
+            errorMessage: errorFor(outcome, translator),
+          }))}
+          copy={slotCopy(await currentTheme(), 'SearchForm', translator)}
+        />
+      </Page>
+    )
+  }
+
+  return (
+    <Page>
+      <SearchForm
+        {...(await filteredForm({
+          ...(await formModel(submitted)),
+          hint: translator.t('board.search.hint'),
+          errorMessage: null,
+        }))}
+        copy={slotCopy(await currentTheme(), 'SearchForm', translator)}
+      />
+    </Page>
+  )
+}
+
+async function Page({ children }: { children: React.ReactNode }) {
+  const translator = await getTranslator()
+  return (
+    <main
+      id="board-content"
+      tabIndex={-1}
+      className="mx-auto flex w-full max-w-3xl flex-col gap-6 px-6 py-8 flex-1"
+    >
+      <h1 className="font-heading text-2xl font-semibold">{translator.t('board.search.title')}</h1>
+      {children}
+    </main>
+  )
+}
+
+function errorFor(outcome: Exclude<RunSearchOutcome, { kind: 'ok' }>, t: Translator): string {
+  if (outcome.kind === 'flooded') {
+    return t.t('board.search.flooded', { seconds: outcome.seconds })
+  }
+  if (outcome.kind === 'limited') return outcome.message
+  if (outcome.kind === 'unknown-author')
+    return t.t('board.search.unknownAuthor', { name: outcome.name })
+  if (outcome.reason === 'too-short') {
+    return t.t('board.search.tooShort', { count: outcome.minWordLength })
+  }
+  if (outcome.reason === 'too-long') return t.t('board.search.tooLong')
+  return t.t('board.search.empty')
+}
+
+function read(params: Record<string, string | string[] | undefined>): Submitted {
+  const many = (key: string): readonly string[] => {
+    const raw = params[key]
+    if (raw === undefined) return []
+    return (Array.isArray(raw) ? raw : [raw]).filter((value) => value !== '')
+  }
+  const one = (key: string): string => many(key)[0] ?? ''
+
+  return {
+    terms: one(SEARCH_FIELDS.query),
+    forums: many(SEARCH_FIELDS.forum),
+    subforums: one(SEARCH_FIELDS.subforums) === SUBFORUMS_ON,
+    authors: one(SEARCH_FIELDS.author),
+    filters: {
+      sort: readSort(one(SEARCH_FIELDS.sort)),
+      match: readMatch(one(SEARCH_FIELDS.match)),
+      grouping: readGrouping(one(SEARCH_FIELDS.grouping)),
+      period: readPeriod(one(SEARCH_FIELDS.period)),
+    },
+  }
+}
+
+async function chosenForums(
+  submitted: Submitted,
+): Promise<{ readonly forumIds?: readonly number[] }> {
+  const wanted = submitted.forums
+    .map((value) => Number(value))
+    .filter((value) => Number.isSafeInteger(value) && value > 0)
+
+  if (wanted.length === 0) return {}
+
+  const visible = await visibleForums()
+  const roots = visible.filter((forum) => wanted.includes(forum.id))
+
+  const ids = submitted.subforums
+    ? visible
+        .filter((forum) => roots.some((root) => isInSubtree(forum.path, root.path)))
+        .map((forum) => forum.id)
+    : roots.map((forum) => forum.id)
+
+  return { forumIds: ids.length === 0 ? wanted : ids }
+}
+
+async function formModel(
+  submitted: Submitted,
+): Promise<Omit<SearchFormModel, 'hint' | 'errorMessage'>> {
+  const chosen = submitted.forums[0] ?? ''
+  const t = await getTranslator()
+
+  const forums: OptionModel[] = [
+    { value: '', label: t.t('search.everyVisibleForum'), isSelected: chosen === '' },
+  ]
+  for (const visible of await visibleForums()) {
+    forums.push({
+      value: String(visible.id),
+      label: `${'\u00a0\u00a0'.repeat(visible.depth)}${visible.title}`,
+      isSelected: String(visible.id) === chosen,
+    })
+  }
+
+  return {
+    action: '/search',
+    fields: {
+      query: SEARCH_FIELDS.query,
+      forum: SEARCH_FIELDS.forum,
+      sort: SEARCH_FIELDS.sort,
+    },
+    query: submitted.terms,
+    maxQueryLength: MAX_QUERY_LENGTH,
+    forums,
+    sorts: choiceOptions(SEARCH_SORTS, SORT_LABEL_KEYS, submitted.filters.sort, t),
+    advanced: advancedModel(submitted, t),
+  }
+}
+
+function advancedModel(submitted: Submitted, t: Translator): SearchAdvancedModel {
+  const { filters } = submitted
+
+  return {
+    label: t.t('search.advanced'),
+    isOpen:
+      submitted.authors !== '' ||
+      submitted.subforums ||
+      filters.period !== 'any' ||
+      filters.match !== 'everything' ||
+      filters.grouping !== 'posts',
+    author: {
+      field: SEARCH_FIELDS.author,
+      label: t.t('search.postedBy'),
+      value: submitted.authors,
+      placeholder: t.t('search.anybody'),
+      hint: t.t('board.search.authorHint', { count: MAX_AUTHOR_NAMES }),
+    },
+    toggles: [
+      {
+        field: SEARCH_FIELDS.subforums,
+        value: SUBFORUMS_ON,
+        label: t.t('search.includeSubforums'),
+        isOn: submitted.subforums,
+      },
+    ],
+    choices: [
+      {
+        field: SEARCH_FIELDS.period,
+        label: t.t('search.posted'),
+        options: choiceOptions(SEARCH_PERIODS, PERIOD_LABEL_KEYS, filters.period, t),
+      },
+      {
+        field: SEARCH_FIELDS.match,
+        label: t.t('search.matchingIn'),
+        options: choiceOptions(SEARCH_MATCHES, MATCH_LABEL_KEYS, filters.match, t),
+      },
+      {
+        field: SEARCH_FIELDS.grouping,
+        label: t.t('search.show'),
+        options: choiceOptions(SEARCH_GROUPINGS, GROUPING_LABEL_KEYS, filters.grouping, t),
+      },
+    ],
+  }
+}
+
+async function filteredForm(model: SearchFormModel): Promise<SearchFormModel> {
+  return filterView('view.search-form', model, viewerRef(await getActor()))
+}
+
+async function visibleForums(): Promise<
+  readonly { id: number; title: string; path: string; depth: number }[]
+> {
+  const actor = await getActor()
+  const { authorizer, forums } = getContainer()
+
+  const allowed = new Set(await authorizer.forumIdsWhere(actor, 'thread.view'))
+  return (await forums.listAll())
+    .filter((forum) => allowed.has(forum.id) && forum.type === 'forum')
+    .map((forum) => ({
+      id: forum.id,
+      title: forum.title,
+      path: forum.path,
+      depth: forum.depth,
+    }))
+}

package/app/(board)/stats/page.tsx

@@ -0,0 +1,202 @@
+import type { Metadata } from 'next'
+
+import { Card, CardContent, CardRows, Empty, EmptyDescription, EmptyTitle } from '@meith/ui'
+
+import { PanelPage, PanelSection } from '@/components/shell/panel-page'
+import { getActor } from '@/server/context'
+import { getTranslator, tr } from '@/server/i18n'
+import { buildStatsView, LEADERBOARD_SIZE } from '@/server/stats'
+import { getViewerPreferences } from '@/server/viewer-preferences'
+import { formatTime } from '@/view/time'
+
+export async function generateMetadata(): Promise<Metadata> {
+  return { title: await tr('page.board-statistics') }
+}
+
+const LINK =
+  'font-medium text-foreground underline decoration-border underline-offset-2 hover:decoration-foreground'
+
+const ROW = 'flex items-baseline justify-between gap-4 px-4 py-2.5 text-sm'
+
+export default async function StatsPage() {
+  const actor = await getActor()
+  const now = new Date()
+  const translator = await getTranslator()
+  const _preferences = await getViewerPreferences()
+  const view = await buildStatsView(actor)
+
+  if (view === null) {
+    return (
+      <PanelPage frame="standalone" title={await tr('page.board-statistics')}>
+        <Card>
+          <Empty>
+            <EmptyTitle>{await tr('page.nothing-counted-here')}</EmptyTitle>
+            <EmptyDescription>{await tr('page.this-board-keeps-no-statistics')}</EmptyDescription>
+          </Empty>
+        </Card>
+      </PanelPage>
+    )
+  }
+
+  const { totals, topPosters, mostViewed, mostReplied } = view
+
+  return (
+    <PanelPage
+      frame="standalone"
+      gap="loose"
+      title={await tr('page.board-statistics')}
+      lede={
+        totals.computedAt === null ? (
+          translator.t('board.stats.notCounted')
+        ) : (
+          <>
+            {translator.t('board.stats.counted')}{' '}
+            <time dateTime={totals.computedAt.toISOString()}>
+              {formatTime(totals.computedAt, now, translator).label}
+            </time>
+            . {translator.t('board.stats.live')}
+          </>
+        )
+      }
+    >
+      <PanelSection id="totals-heading" title={await tr('page.totals')}>
+        <Card>
+          <CardContent>
+            <dl className="grid grid-cols-2 gap-3 text-sm sm:grid-cols-4">
+              <Figure
+                label={translator.t('board.stats.threads')}
+                value={translator.number(totals.threadCount)}
+              />
+              <Figure
+                label={translator.t('board.stats.posts')}
+                value={translator.number(totals.postCount)}
+              />
+              <Figure
+                label={translator.t('board.stats.members')}
+                value={translator.number(totals.memberCount)}
+              />
+              <div>
+                <dt className="text-muted-foreground">{await tr('page.newest-member')}</dt>
+                <dd className="font-medium">
+                  {totals.newestUsername === null ? (
+                    '—'
+                  ) : totals.newestUserId === null ? (
+                    totals.newestUsername
+                  ) : (
+                    <a href={`/member/${totals.newestUserId}`} className={LINK}>
+                      {totals.newestUsername}
+                    </a>
+                  )}
+                </dd>
+              </div>
+            </dl>
+          </CardContent>
+        </Card>
+      </PanelSection>
+
+      <PanelSection
+        id="posters-heading"
+        title={translator.t('board.stats.topPosters', { count: LEADERBOARD_SIZE })}
+      >
+        <Card>
+          {topPosters.length === 0 ? (
+            <Empty>
+              <EmptyTitle>{await tr('page.no-posts-yet')}</EmptyTitle>
+              <EmptyDescription>{await tr('page.nobody-has-posted-yet')}</EmptyDescription>
+            </Empty>
+          ) : (
+            <CardRows>
+              {topPosters.map((poster, index) => (
+                <li key={poster.userId} className={ROW}>
+                  <span className="min-w-0 truncate">
+                    <span className="text-muted-foreground tabular-nums">{index + 1}.</span>{' '}
+                    <a href={`/member/${poster.userId}`} className={LINK}>
+                      {poster.username}
+                    </a>
+                  </span>
+                  <span className="shrink-0 text-xs text-muted-foreground">
+                    {translator.t('stats.posts', { count: poster.postCount })}
+                  </span>
+                </li>
+              ))}
+            </CardRows>
+          )}
+        </Card>
+      </PanelSection>
+
+      <ThreadTable
+        id="viewed"
+        heading={translator.t('board.stats.mostViewed')}
+        rows={mostViewed}
+        figure={(row) => translator.t('stats.views', { count: row.viewCount })}
+      />
+
+      <ThreadTable
+        id="replied"
+        heading={translator.t('board.stats.mostReplied')}
+        rows={mostReplied}
+        figure={(row) => translator.t('stats.replies', { count: row.replyCount })}
+      />
+    </PanelPage>
+  )
+}
+
+function Figure({ label, value }: { label: string; value: string }) {
+  return (
+    <div>
+      <dt className="text-muted-foreground">{label}</dt>
+      <dd className="font-medium">{value}</dd>
+    </div>
+  )
+}
+
+async function ThreadTable({
+  id,
+  heading,
+  rows,
+  figure,
+}: {
+  id: string
+  heading: string
+  rows: readonly {
+    threadId: number
+    title: string
+    slug: string
+    forumId: number
+    forumTitle: string
+    viewCount: number
+    replyCount: number
+  }[]
+  figure: (row: { viewCount: number; replyCount: number }) => string
+}) {
+  const translator = await getTranslator()
+  return (
+    <PanelSection id={`${id}-heading`} title={heading}>
+      <Card>
+        {rows.length === 0 ? (
+          <Empty>
+            <EmptyTitle>{await tr('page.no-threads-yet')}</EmptyTitle>
+            <EmptyDescription>{await tr('page.nothing-show-yet')}</EmptyDescription>
+          </Empty>
+        ) : (
+          <CardRows>
+            {rows.map((row, index) => (
+              <li key={row.threadId} className={ROW}>
+                <span className="min-w-0 truncate">
+                  <span className="text-muted-foreground tabular-nums">{index + 1}.</span>{' '}
+                  <a href={`/thread/${row.threadId}-${row.slug}`} className={LINK}>
+                    {row.title}
+                  </a>{' '}
+                  <span className="text-muted-foreground">
+                    {translator.t('board.stats.inForum', { forum: row.forumTitle })}
+                  </span>
+                </span>
+                <span className="shrink-0 text-xs text-muted-foreground">{figure(row)}</span>
+              </li>
+            ))}
+          </CardRows>
+        )}
+      </Card>
+    </PanelSection>
+  )
+}

package/app/(board)/subscriptions/layout.tsx

@@ -0,0 +1,5 @@
+import { UserCpShell } from '@/components/account/usercp-shell'
+
+export default function SubscriptionsLayout({ children }: { children: React.ReactNode }) {
+  return <UserCpShell>{children}</UserCpShell>
+}

package/app/(board)/subscriptions/page.tsx

@@ -0,0 +1,142 @@
+import type { Metadata } from 'next'
+import { notFound } from 'next/navigation'
+
+import { SubscriptionService } from '@meith/subscriptions'
+
+import { SubscriptionRowForm } from '@/components/account/subscription-forms'
+import { BoardNotice } from '@/components/shell/board-notice'
+import { PanelPage } from '@/components/shell/panel-page'
+import { getContainer } from '@/server/container'
+import { getActor } from '@/server/context'
+import { getTranslator, tr } from '@/server/i18n'
+import { followFormCopy } from '@/view/account-copy'
+import { splitAround } from '@/view/copy'
+import {
+  buildSubscriptionsView,
+  type SubscriptionRowView,
+  subscriptionNotice,
+} from '@/view/subscriptions'
+
+export async function generateMetadata(): Promise<Metadata> {
+  return { title: await tr('page.subscriptions') }
+}
+
+export default async function SubscriptionsPage({
+  searchParams,
+}: {
+  searchParams: Promise<{ followed?: string; stopped?: string }>
+}) {
+  const query = await searchParams
+  const actor = await getActor()
+  const { subscriptions, authorizer } = getContainer()
+
+  if (actor.userId === null || subscriptions === null) notFound()
+
+  const visibleForumIds = await authorizer.visibleForumIds(actor)
+  const rows = await new SubscriptionService({ subscriptions }).list(actor.userId, visibleForumIds)
+
+  const translator = await getTranslator()
+
+  const view = buildSubscriptionsView({ rows, now: new Date(), t: translator })
+  const notice = subscriptionNotice(query)
+
+  return (
+    <PanelPage
+      title={await tr('page.subscriptions')}
+      lede={
+        <>
+          What you follow, and how often you hear about it.{' '}
+          <a
+            href="/notifications/preferences"
+            className="font-medium text-foreground underline decoration-border underline-offset-2 hover:decoration-foreground"
+          >
+            {await tr('page.whether-any-it-also-arrives')}
+          </a>{' '}
+          is a separate setting.
+        </>
+      }
+    >
+      {notice !== null && <BoardNotice kind="info" message={notice} dismissHref="/subscriptions" />}
+
+      {view.total === 0 ? (
+        <p className="text-sm text-muted-foreground">{await tr('page.subscriptions.none')}</p>
+      ) : (
+        <>
+          <Section
+            title={await tr('page.threads')}
+            empty={await tr('page.subscriptions.noThreads')}
+            rows={view.threads}
+            modes={view.modes}
+            since={splitAround(translator, 'page.subscriptions.since', 'time')}
+            copy={followFormCopy(translator)}
+          />
+          <Section
+            title={await tr('page.forums')}
+            empty={await tr('page.subscriptions.noForums')}
+            rows={view.forums}
+            modes={view.modes}
+            since={splitAround(translator, 'page.subscriptions.since', 'time')}
+            copy={followFormCopy(translator)}
+          />
+        </>
+      )}
+    </PanelPage>
+  )
+}
+
+function Section({
+  title,
+  empty,
+  rows,
+  modes,
+  since,
+  copy,
+}: {
+  title: string
+  empty: string
+  rows: readonly SubscriptionRowView[]
+  modes: readonly { readonly value: string; readonly label: string }[]
+  since: readonly [string, string]
+  copy: Readonly<Record<string, string>>
+}) {
+  return (
+    <section className="flex flex-col gap-3">
+      <h2 className="font-heading text-lg font-semibold">{title}</h2>
+
+      {rows.length === 0 ? (
+        <p className="text-sm text-muted-foreground">{empty}</p>
+      ) : (
+        <ul className="flex flex-col gap-3">
+          {rows.map((row) => (
+            <li key={row.key} className="rounded-lg border border-border bg-card p-4">
+              <div className="flex flex-wrap items-baseline justify-between gap-2">
+                <a
+                  href={row.href}
+                  className="text-sm font-medium text-foreground underline decoration-border underline-offset-2 hover:decoration-foreground"
+                >
+                  {row.title}
+                </a>
+                <span className="text-xs text-muted-foreground">
+                  {since[0]}
+                  <time dateTime={row.since.iso}>{row.since.label}</time>
+                  {since[1]}
+                  {row.pending === null ? null : ` · ${row.pending}`}
+                </span>
+              </div>
+
+              <div className="mt-3">
+                <SubscriptionRowForm
+                  target={row.target}
+                  targetId={row.targetId}
+                  mode={row.mode}
+                  modes={modes}
+                  copy={copy}
+                />
+              </div>
+            </li>
+          ))}
+        </ul>
+      )}
+    </section>
+  )
+}

package/app/(board)/terms/page.tsx

@@ -0,0 +1,12 @@
+import type { Metadata } from 'next'
+
+import { LegalDocument } from '@/components/legal/legal-document'
+import { tr } from '@/server/i18n'
+
+export async function generateMetadata(): Promise<Metadata> {
+  return { title: await tr('page.terms-service') }
+}
+
+export default async function TermsPage() {
+  return <LegalDocument slug="terms" />
+}