@meith/web 0.16.0

package/src/view/pager.ts

@@ -0,0 +1,191 @@
+import type { PaginationModel } from '@meith/theme-kit'
+
+export const TRAIL_PARAM = 'seen'
+
+export const TRAIL_LIMIT = 40
+
+const TRAIL_SEPARATOR = '~'
+
+const WINDOW = 3
+
+export type QueryParams = Readonly<Record<string, string | string[] | undefined>>
+
+export type Cursor = Readonly<Record<string, string>>
+
+export interface PagerInput {
+  readonly path: string
+  readonly params: QueryParams
+  /**
+   * The query parameters the cursor owns. They are rewritten on every step and
+   * never carried forward from the current address, which is what keeps a
+   * two-part cursor — a rank and an id — from being half of one page and half
+   * of the next.
+   */
+  readonly cursorParams: readonly string[]
+  readonly nextCursor: Cursor | null
+  readonly pageSize?: number
+  readonly total?: number | null
+}
+
+export const PAGE_PARAM = 'page'
+
+const NEIGHBOURS = 2
+
+export interface OffsetPagerInput {
+  readonly path: string
+  readonly params: QueryParams
+  readonly pageParam?: string
+  readonly page: number
+  readonly pageSize: number
+  readonly total: number
+}
+
+export function one(params: QueryParams, key: string): string | undefined {
+  const raw = params[key]
+  const value = Array.isArray(raw) ? raw[0] : raw
+  return value === '' ? undefined : value
+}
+
+function encodeCursor(cursor: Cursor): string {
+  return new URLSearchParams(Object.entries(cursor)).toString()
+}
+
+function decodeCursor(entry: string): Cursor {
+  return Object.fromEntries(new URLSearchParams(entry))
+}
+
+export function readTrail(params: QueryParams): Cursor[] {
+  const raw = one(params, TRAIL_PARAM)
+  if (raw === undefined) return []
+
+  return raw
+    .split(TRAIL_SEPARATOR)
+    .filter((entry) => entry !== '')
+    .slice(-TRAIL_LIMIT)
+    .map(decodeCursor)
+}
+
+function href(input: PagerInput, cursor: Cursor | null, trail: readonly Cursor[]): string {
+  const query = new URLSearchParams()
+
+  for (const [key, value] of Object.entries(input.params)) {
+    if (key === TRAIL_PARAM || input.cursorParams.includes(key)) continue
+    const text = Array.isArray(value) ? value[0] : value
+    if (text !== undefined && text !== '') query.set(key, text)
+  }
+
+  if (cursor !== null) {
+    for (const [key, value] of Object.entries(cursor)) query.set(key, value)
+  }
+
+  if (trail.length > 0) {
+    query.set(TRAIL_PARAM, trail.map(encodeCursor).join(TRAIL_SEPARATOR))
+  }
+
+  const search = query.toString()
+  return search === '' ? input.path : `${input.path}?${search}`
+}
+
+function pageHref(input: PagerInput, trail: readonly Cursor[], page: number): string {
+  if (page <= 1) return href(input, null, [])
+  return href(input, trail[page - 2] ?? null, trail.slice(0, page - 1))
+}
+
+export function buildPager(input: PagerInput): PaginationModel {
+  const trail = readTrail(input.params)
+  const page = trail.length + 1
+
+  const size = input.pageSize ?? 0
+  const total = input.total ?? null
+  const exact = total !== null && size > 0
+
+  const pageCount = exact
+    ? Math.max(1, Math.ceil(total / size))
+    : page + (input.nextCursor === null ? 0 : 1)
+
+  const numbers = new Set<number>([1, page])
+  for (let step = 1; step <= WINDOW; step += 1) {
+    if (page - step > 1) numbers.add(page - step)
+  }
+
+  const pages = [...numbers]
+    .sort((a, b) => a - b)
+    .map((number) => ({
+      page: number,
+      href: pageHref(input, trail, number),
+      isCurrent: number === page,
+    }))
+
+  return {
+    page,
+    pageCount,
+    pageCountIsExact: exact,
+    pages,
+    previousHref: page === 1 ? null : pageHref(input, trail, page - 1),
+    nextHref:
+      input.nextCursor === null
+        ? null
+        : href(input, input.nextCursor, [...trail, input.nextCursor].slice(-TRAIL_LIMIT)),
+  }
+}
+
+export function readPage(params: QueryParams, pageParam: string = PAGE_PARAM): number {
+  const raw = one(params, pageParam)
+  if (raw === undefined) return 1
+
+  const page = Number(raw)
+  return Number.isSafeInteger(page) && page >= 1 ? page : 1
+}
+
+export function offsetOf(page: number, pageSize: number): number {
+  return (Math.max(page, 1) - 1) * pageSize
+}
+
+export function pageCountOf(total: number, pageSize: number): number {
+  return Math.max(1, Math.ceil(Math.max(total, 0) / Math.max(pageSize, 1)))
+}
+
+function numberedHref(input: OffsetPagerInput, page: number): string {
+  const pageParam = input.pageParam ?? PAGE_PARAM
+  const query = new URLSearchParams()
+
+  for (const [key, value] of Object.entries(input.params)) {
+    if (key === pageParam || key === TRAIL_PARAM) continue
+    const text = Array.isArray(value) ? value[0] : value
+    if (text !== undefined && text !== '') query.set(key, text)
+  }
+
+  if (page > 1) query.set(pageParam, String(page))
+
+  const search = query.toString()
+  return search === '' ? input.path : `${input.path}?${search}`
+}
+
+export function buildOffsetPager(input: OffsetPagerInput): PaginationModel {
+  const pageCount = pageCountOf(input.total, input.pageSize)
+  const page = Math.max(input.page, 1)
+
+  const anchor = Math.min(page, pageCount)
+
+  const numbers = new Set<number>([1, pageCount])
+  if (page <= pageCount) numbers.add(page)
+  for (let step = 1; step <= NEIGHBOURS; step += 1) {
+    if (anchor - step >= 1) numbers.add(anchor - step)
+    if (anchor + step <= pageCount) numbers.add(anchor + step)
+  }
+
+  return {
+    page,
+    pageCount,
+    pageCountIsExact: true,
+    pages: [...numbers]
+      .sort((a, b) => a - b)
+      .map((number) => ({
+        page: number,
+        href: numberedHref(input, number),
+        isCurrent: number === page,
+      })),
+    previousHref: page === 1 ? null : numberedHref(input, page > pageCount ? pageCount : page - 1),
+    nextHref: page >= pageCount ? null : numberedHref(input, page + 1),
+  }
+}

package/src/view/panel-nav.ts

@@ -0,0 +1,203 @@
+import type { Translator } from '@meith/i18n'
+import type {
+  PanelKind,
+  PanelNavCurrent,
+  PanelNavIcon,
+  PanelNavModel,
+  PanelNavSectionModel,
+} from '@meith/theme-kit'
+
+import { untranslated } from './time'
+
+export interface PanelSubsection {
+  readonly href: string
+  readonly titleKey?: string
+  /** Set instead of `titleKey` where the name is data, such as a plugin's. */
+  readonly titleText?: string
+  readonly record?: boolean
+}
+
+export interface PanelSection {
+  readonly href: string
+  readonly titleKey?: string
+  readonly titleText?: string
+  readonly blurbKey?: string
+  readonly blurbText?: string
+  readonly icon?: PanelNavIcon
+  readonly children?: readonly PanelSubsection[]
+}
+
+export function panelText(
+  t: Translator,
+  entry: { readonly titleKey?: string; readonly titleText?: string },
+): string
+export function panelText(
+  t: Translator,
+  entry: { readonly blurbKey?: string; readonly blurbText?: string },
+  field: 'blurb',
+): string
+export function panelText(
+  t: Translator,
+  entry: Readonly<Record<string, string | undefined>>,
+  field: 'title' | 'blurb' = 'title',
+): string {
+  const text = entry[`${field}Text`]
+  if (text !== undefined) return text
+
+  const key = entry[`${field}Key`]
+  return key === undefined ? '' : t.t(key)
+}
+
+export interface PanelSectionCopy {
+  readonly href: string
+  readonly title: string
+  readonly blurb: string
+}
+
+export function panelSectionCopy(nav: PanelNav, t: Translator): readonly PanelSectionCopy[] {
+  return nav.map((section) => ({
+    href: section.href,
+    title: panelText(t, section),
+    blurb: panelText(t, section, 'blurb'),
+  }))
+}
+
+export type PanelNav = readonly PanelSection[]
+
+function parts(href: string): { path: string; params: URLSearchParams } {
+  const cut = href.indexOf('?')
+  if (cut === -1) return { path: href, params: new URLSearchParams() }
+  return { path: href.slice(0, cut), params: new URLSearchParams(href.slice(cut + 1)) }
+}
+
+function paramsAgree(here: URLSearchParams, wanted: URLSearchParams): boolean {
+  for (const [key, value] of wanted) {
+    if (here.get(key) !== value) return false
+  }
+  return true
+}
+
+export function isUnder(location: string, href: string): boolean {
+  const here = parts(location)
+  const want = parts(href)
+  if (here.path !== want.path && !here.path.startsWith(`${want.path}/`)) return false
+  return paramsAgree(here.params, want.params)
+}
+
+export function isHere(location: string, href: string): boolean {
+  const here = parts(location)
+  const want = parts(href)
+  return here.path === want.path && paramsAgree(here.params, want.params)
+}
+
+function longest(location: string, hrefs: readonly string[]): string | null {
+  let best: string | null = null
+  for (const href of hrefs) {
+    if (!isUnder(location, href)) continue
+    if (best === null || href.length > best.length) best = href
+  }
+  return best
+}
+
+export function sectionHrefIn(nav: PanelNav, location: string): string | null {
+  return longest(
+    location,
+    nav.map((section) => section.href),
+  )
+}
+
+export function deepestHrefIn(nav: PanelNav, location: string): string | null {
+  return longest(
+    location,
+    nav.flatMap((section) => [
+      section.href,
+      ...(section.children ?? []).map((child) => child.href),
+    ]),
+  )
+}
+
+export function flattenNav(nav: PanelNav): readonly (PanelSection | PanelSubsection)[] {
+  return nav.flatMap((section) => [section, ...(section.children ?? [])])
+}
+
+export function visibleChildren(
+  section: PanelSection,
+  deepest: string | null,
+): readonly PanelSubsection[] {
+  return (section.children ?? []).filter((child) => child.record !== true || child.href === deepest)
+}
+
+export type PanelCounts = Readonly<Record<string, number>>
+
+export function countFor(counts: PanelCounts | undefined, href: string): number | null {
+  const count = counts?.[href] ?? 0
+  return count > 0 ? count : null
+}
+
+export function currentProps(
+  location: string,
+  href: string,
+  deepest: string | null,
+): { readonly 'aria-current'?: 'page' | 'true' } {
+  if (href !== deepest) return {}
+  return { 'aria-current': isHere(location, href) ? 'page' : 'true' }
+}
+
+function currentFor(
+  location: string,
+  href: string,
+  deepest: string | null,
+): PanelNavCurrent | null {
+  if (href !== deepest) return null
+  return isHere(location, href) ? 'here' : 'under'
+}
+
+export function buildPanelNavModel(input: {
+  readonly panel: PanelKind
+  readonly nav: PanelNav
+  readonly overviewHref: string
+  readonly location: string
+  readonly fallbackHref?: string | undefined
+  readonly counts?: PanelCounts | undefined
+  readonly label?: string
+  readonly t?: Translator | undefined
+}): PanelNavModel {
+  const t = input.t ?? untranslated()
+  const fallback = input.fallbackHref ?? null
+  const open = sectionHrefIn(input.nav, input.location) ?? fallback
+  const deepest = deepestHrefIn(input.nav, input.location) ?? fallback
+
+  const sections: PanelNavSectionModel[] = input.nav.map((section) => {
+    const isOpen = open === section.href
+
+    return {
+      href: section.href,
+      title: panelText(t, section),
+      icon: section.icon ?? null,
+      count: countFor(input.counts, section.href),
+      current: currentFor(input.location, section.href, deepest),
+      isRecord: false,
+      isOpen,
+      isOverview: section.href === input.overviewHref,
+      children: isOpen
+        ? visibleChildren(section, deepest).map((child) => ({
+            href: child.href,
+            title: panelText(t, child),
+            icon: null,
+            count: countFor(input.counts, child.href),
+            current: currentFor(input.location, child.href, deepest),
+            isRecord: child.record === true,
+          }))
+        : [],
+    }
+  })
+
+  const here = flattenNav(input.nav).find((item) => item.href === deepest)
+
+  return {
+    panel: input.panel,
+    label: input.label ?? t.t('panel.sections'),
+    sections,
+    currentTitle: here === undefined ? null : panelText(t, here),
+  }
+}

package/src/view/plugin-panel.ts

@@ -0,0 +1,42 @@
+import { pluginAdminPath } from '@meith/plugin-kit'
+
+import type { PanelSubsection } from './panel-nav'
+
+export interface PluginPage {
+  readonly path: string
+  readonly title: string
+  readonly href: string
+}
+
+export interface PluginPanelTab {
+  readonly href: string
+  readonly label: string
+  readonly isCurrent: boolean
+}
+
+export const PLUGIN_SETTINGS_TAB = 'Settings'
+
+export function pluginPanelTabs(input: {
+  readonly pluginKey: string
+  readonly pages: readonly PluginPage[]
+  readonly current: string | null
+}): readonly PluginPanelTab[] {
+  if (input.pages.length === 0) return []
+
+  return [
+    {
+      href: pluginAdminPath(input.pluginKey, ''),
+      label: PLUGIN_SETTINGS_TAB,
+      isCurrent: input.current === null,
+    },
+    ...input.pages.map((page) => ({
+      href: page.href,
+      label: page.title,
+      isCurrent: page.path === input.current,
+    })),
+  ]
+}
+
+export function pluginNavChildren(pages: readonly PluginPage[]): readonly PanelSubsection[] {
+  return pages.map((page) => ({ href: page.href, titleText: page.title }))
+}

package/src/view/post-form.ts

@@ -0,0 +1,61 @@
+import type { Translator } from '@meith/i18n'
+import type { PostFormModel } from '@meith/theme-kit'
+
+import { postLink } from './post-link'
+import { untranslated } from './time'
+
+export interface PostFormInput {
+  readonly forum: { readonly id: number; readonly title: string; readonly slug: string }
+  readonly errorMessage?: string | null
+  readonly t?: Translator
+}
+
+export function buildNewThreadView(input: PostFormInput): Omit<PostFormModel, 'regions'> {
+  const t = input.t ?? untranslated()
+
+  return {
+    mode: 'thread',
+    heading: t.t('postForm.newThread', { forum: input.forum.title }),
+    cancelHref: `/${input.forum.id}-${input.forum.slug}`,
+    cancelLabel: t.t('postForm.backToForum', { forum: input.forum.title }),
+    errorMessage: input.errorMessage ?? null,
+  }
+}
+
+export interface ReplyViewInput {
+  readonly thread: { readonly id: number; readonly title: string; readonly slug: string }
+  readonly errorMessage?: string | null
+  readonly t?: Translator
+}
+
+export function buildReplyView(input: ReplyViewInput): Omit<PostFormModel, 'regions'> {
+  const t = input.t ?? untranslated()
+
+  return {
+    mode: 'reply',
+    heading: t.t('postForm.reply', { thread: input.thread.title }),
+    cancelHref: `/thread/${input.thread.id}-${input.thread.slug}`,
+    cancelLabel: t.t('postForm.backToThread'),
+    errorMessage: input.errorMessage ?? null,
+  }
+}
+
+export interface EditViewInput {
+  readonly thread: { readonly id: number; readonly title: string; readonly slug: string }
+  readonly postId: number
+  readonly isDeleted: boolean
+  readonly errorMessage?: string | null
+  readonly t?: Translator
+}
+
+export function buildEditView(input: EditViewInput): Omit<PostFormModel, 'regions'> {
+  const t = input.t ?? untranslated()
+
+  return {
+    mode: 'edit',
+    heading: t.t(input.isDeleted ? 'postForm.deletedPost' : 'postForm.editPost'),
+    cancelHref: postLink(`/thread/${input.thread.id}-${input.thread.slug}`, input.postId),
+    cancelLabel: t.t('postForm.backToThread'),
+    errorMessage: input.errorMessage ?? null,
+  }
+}

package/src/view/post-link.ts

@@ -0,0 +1,29 @@
+import type { PostLocation } from '@meith/posts'
+
+export function postAnchor(number: number): string {
+  return `post-${number}`
+}
+
+export function postLink(threadHref: string, postId: number): string {
+  const path = threadHref.split('#')[0] ?? ''
+  return `${path}${path.includes('?') ? '&' : '?'}post=${postId}`
+}
+
+export function locatedHref(
+  path: string,
+  query: Record<string, string | readonly string[] | undefined>,
+  location: PostLocation,
+): string {
+  const params = new URLSearchParams()
+  for (const [key, value] of Object.entries(query)) {
+    if (value === undefined || key === 'post' || key === 'after' || key === 'page') continue
+    for (const one of typeof value === 'string' ? [value] : value) params.append(key, one)
+  }
+  if (location.afterId !== null) {
+    params.set('after', String(location.afterId))
+    params.set('page', String(location.page))
+  }
+
+  const search = params.toString()
+  return `${path}${search === '' ? '' : `?${search}`}#${postAnchor(location.number)}`
+}

package/src/view/presence.ts

@@ -0,0 +1,99 @@
+import type { Translator } from '@meith/i18n'
+import type { BoardStatsModel, OnlineMemberModel, WhoIsOnlineModel } from '@meith/theme-kit'
+
+import { count } from './count'
+import { type MemberIdentity, nameClassOf } from './member-identity'
+import { memberHref } from './member-profile'
+import { formatTime, untranslated } from './time'
+
+export interface OnlineRow {
+  readonly userId: number
+  readonly username: string
+  readonly invisible: boolean
+  readonly lastSeenAt: Date
+  readonly forumId: number | null
+  readonly forumTitle: string | null
+  readonly threadId: number | null
+  readonly threadTitle: string | null
+  readonly threadSlug: string | null
+}
+
+export interface OnlineInput {
+  readonly members: readonly OnlineRow[]
+  readonly guestCount: number
+  readonly recordCount: number
+  readonly recordAt: Date | null
+  readonly now: Date
+  readonly t?: Translator | undefined
+  readonly identities?: ReadonlyMap<number, MemberIdentity>
+}
+
+export function locationOf(
+  row: OnlineRow,
+  t: Translator = untranslated(),
+): { label: string; href: string | null } {
+  if (row.threadId !== null && row.threadTitle !== null) {
+    return {
+      label: t.t('presence.reading', { title: row.threadTitle }),
+      href: `/thread/${row.threadId}-${row.threadSlug ?? ''}`,
+    }
+  }
+
+  if (row.forumId !== null && row.forumTitle !== null) {
+    return { label: t.t('presence.viewing', { title: row.forumTitle }), href: `/${row.forumId}` }
+  }
+
+  return { label: t.t('presence.somewhere'), href: null }
+}
+
+export function buildWhoIsOnlineModel(input: OnlineInput): WhoIsOnlineModel {
+  const members: OnlineMemberModel[] = input.members.map((row) => ({
+    userId: row.userId,
+    username: row.username,
+    profileHref: memberHref(row.userId),
+    nameClass: nameClassOf(input.identities, row.userId),
+    location: locationOf(row, input.t ?? untranslated()),
+    isInvisible: row.invisible,
+    lastSeen: formatTime(row.lastSeenAt, input.now, input.t),
+  }))
+
+  return {
+    guestCount: count(input.guestCount, input.t),
+    members,
+    memberCount: count(members.length, input.t),
+    total: count(members.length + input.guestCount, input.t),
+    recordCount: count(input.recordCount, input.t),
+    recordAt: input.recordAt === null ? null : formatTime(input.recordAt, input.now, input.t),
+    fullListHref: '/online',
+  }
+}
+
+export interface StatsInput {
+  readonly threadCount: number
+  readonly postCount: number
+  readonly memberCount: number
+  readonly newestUserId: number | null
+  readonly newestUsername: string | null
+  readonly computedAt: Date | null
+  readonly now: Date
+  readonly t?: Translator | undefined
+  readonly identities?: ReadonlyMap<number, MemberIdentity>
+}
+
+export function buildBoardStatsModel(input: StatsInput): BoardStatsModel {
+  return {
+    threadCount: count(input.threadCount, input.t),
+    postCount: count(input.postCount, input.t),
+    memberCount: count(input.memberCount, input.t),
+    newestMember:
+      input.newestUsername === null
+        ? null
+        : {
+            userId: input.newestUserId,
+            username: input.newestUsername,
+            profileHref: input.newestUserId === null ? null : memberHref(input.newestUserId),
+            nameClass: nameClassOf(input.identities, input.newestUserId),
+          },
+    computedAt: input.computedAt === null ? null : formatTime(input.computedAt, input.now, input.t),
+  }
+}

package/src/view/promotion-rules.ts

@@ -0,0 +1,52 @@
+import type { PromotionRule } from '@meith/groups'
+
+export interface PromotionRuleFormValues {
+  readonly id: number
+  readonly title: string
+  readonly enabled: boolean
+  readonly displayOrder: string
+  readonly minPostCount: string
+  readonly minReputation: string
+  readonly minDaysRegistered: string
+  readonly fromPrimaryGroupId: string
+  readonly toPrimaryGroupId: string
+}
+
+function field(value: number | null | undefined): string {
+  return value === null || value === undefined ? '' : String(value)
+}
+
+export function promotionRuleFormValues(rule: PromotionRule): PromotionRuleFormValues {
+  return {
+    id: rule.id,
+    title: rule.title,
+    enabled: rule.enabled,
+    displayOrder: String(rule.displayOrder),
+    minPostCount: field(rule.minPostCount),
+    minReputation: field(rule.minReputation),
+    minDaysRegistered: field(rule.minDaysRegistered),
+    fromPrimaryGroupId: field(rule.fromPrimaryGroupId),
+    toPrimaryGroupId: String(rule.toPrimaryGroupId),
+  }
+}
+
+export function promotionRuleSummary(
+  rule: PromotionRule,
+  groupTitle: (id: number | null) => string,
+): string {
+  const criteria: string[] = []
+  if (rule.minPostCount !== undefined) criteria.push(`${rule.minPostCount} posts`)
+  if (rule.minReputation !== undefined) criteria.push(`${rule.minReputation} reputation`)
+  if (rule.minDaysRegistered !== undefined) {
+    criteria.push(`${rule.minDaysRegistered} days registered`)
+  }
+
+  const from =
+    rule.fromPrimaryGroupId === null || rule.fromPrimaryGroupId === undefined
+      ? 'any group'
+      : groupTitle(rule.fromPrimaryGroupId)
+
+  const wants = criteria.length === 0 ? 'no criteria' : `at least ${criteria.join(', ')}`
+
+  return `${from} → ${groupTitle(rule.toPrimaryGroupId)} · ${wants}`
+}

package/src/view/redirect-notice.ts

@@ -0,0 +1,21 @@
+import type { RedirectNoticeModel } from '@meith/theme-kit'
+
+export const REDIRECT_DELAY_SECONDS = 2
+
+export function localHref(value: string | undefined): string {
+  if (value === undefined || !value.startsWith('/')) return '/'
+  const origin = 'https://forum.invalid'
+  const url = new URL(value, origin)
+  return url.origin === origin ? `${url.pathname}${url.search}${url.hash}` : '/'
+}
+
+export function buildRedirectNotice(
+  target: string | undefined,
+  message: string | undefined,
+): RedirectNoticeModel {
+  return {
+    targetHref: localHref(target),
+    message: message?.trim() || 'Continuing…',
+    delaySeconds: REDIRECT_DELAY_SECONDS,
+  }
+}