@meith/web 0.16.0

package/src/view/reputation.ts

@@ -0,0 +1,107 @@
+import type { Translator } from '@meith/i18n'
+import type { ReputationRow, ReputationSummary } from '@meith/reputation'
+import type { TimeModel } from '@meith/theme-kit'
+
+import { memberHref } from './member-profile'
+import { postLink } from './post-link'
+import { formatTime, untranslated } from './time'
+
+export interface ReputationRowView {
+  readonly id: number
+  readonly givenBy: string
+  readonly givenByHref: string | null
+  readonly points: number
+  readonly pointsLabel: string
+  readonly comment: string
+  readonly postHref: string | null
+  readonly at: TimeModel
+  readonly isMine: boolean
+}
+
+export interface ReputationView {
+  readonly summary: ReputationSummary
+  readonly rows: readonly ReputationRowView[]
+  readonly nextHref: string | null
+  readonly remainingLabel: string | null
+}
+
+export function buildReputationView(input: {
+  readonly userId: number
+  readonly summary: ReputationSummary
+  readonly rows: readonly ReputationRow[]
+  readonly nextBefore: number | null
+  readonly viewerUserId: number | null
+  readonly maxPerDay: number
+  readonly givenToday: number
+  readonly now: Date
+  readonly t?: Translator
+}): ReputationView {
+  const t = input.t ?? untranslated()
+
+  return {
+    summary: input.summary,
+    rows: input.rows.map((row) => ({
+      id: row.id,
+      givenBy: row.givenByUsername ?? t.t('reputation.deletedMember'),
+      givenByHref: row.givenByUserId === null ? null : memberHref(row.givenByUserId),
+      points: row.points,
+      pointsLabel: signed(row.points, t),
+      comment: row.comment,
+      postHref:
+        row.postId === null || row.threadId === null
+          ? null
+          : postLink(`/thread/${row.threadId}`, row.postId),
+      at: formatTime(row.createdAt, input.now, input.t),
+      isMine: input.viewerUserId !== null && row.givenByUserId === input.viewerUserId,
+    })),
+    nextHref:
+      input.nextBefore === null
+        ? null
+        : `/member/${input.userId}/reputation?before=${input.nextBefore}`,
+    remainingLabel:
+      input.maxPerDay <= 0
+        ? null
+        : t.t('reputation.ratingsLeft', {
+            left: Math.max(0, input.maxPerDay - input.givenToday),
+            max: input.maxPerDay,
+          }),
+  }
+}
+
+export function signed(points: number, t: Translator = untranslated()): string {
+  return t.number(points, { signDisplay: points === 0 ? 'never' : 'always' })
+}
+
+export function reputationLabel(
+  summary: ReputationSummary,
+  t: Translator = untranslated(),
+): string {
+  const detail = [
+    summary.positive > 0 ? t.t('reputation.positive', { count: summary.positive }) : null,
+    summary.neutral > 0 ? t.t('reputation.neutral', { count: summary.neutral }) : null,
+    summary.negative > 0 ? t.t('reputation.negative', { count: summary.negative }) : null,
+  ].filter((part): part is string => part !== null)
+
+  if (detail.length === 0) return t.t('reputation.none')
+
+  return t.t('reputation.summary', {
+    total: signed(summary.total, t),
+    detail: t.list(detail, { type: 'unit' }),
+  })
+}
+
+export function reputationNotice(
+  query: {
+    readonly rated?: string | undefined
+    readonly withdrawn?: string | undefined
+  },
+  t: Translator = untranslated(),
+): { kind: 'info'; message: string } | null {
+  if (query.rated !== undefined) {
+    return { kind: 'info', message: t.t('reputation.recorded') }
+  }
+  if (query.withdrawn !== undefined) {
+    return { kind: 'info', message: t.t('reputation.withdrawn') }
+  }
+  return null
+}

package/src/view/search-controls.ts

@@ -0,0 +1,103 @@
+import type { Translator } from '@meith/i18n'
+import type {
+  SearchCursor,
+  SearchGrouping,
+  SearchMatch,
+  SearchPeriod,
+  SearchRefinement,
+  SearchSort,
+} from '@meith/search'
+import type { OptionModel } from '@meith/theme-kit'
+
+import { untranslated } from './time'
+
+export const SEARCH_FIELDS = {
+  query: 'q',
+  forum: 'forum',
+  subforums: 'subforums',
+  author: 'author',
+  period: 'when',
+  match: 'in',
+  grouping: 'show',
+  sort: 'sort',
+} as const
+
+export const REFINE_FIELDS = {
+  forum: 'forum',
+  author: 'by',
+  period: 'when',
+  match: 'in',
+  grouping: 'show',
+  sort: 'sort',
+} as const
+
+export const CURSOR_FIELDS = { rank: 'rank', after: 'after' } as const
+
+export const SUBFORUMS_ON = 'yes'
+
+export const SORT_LABEL_KEYS: Readonly<Record<SearchSort, string>> = {
+  relevance: 'search.sort.relevance',
+  newest: 'search.sort.newest',
+  oldest: 'search.sort.oldest',
+}
+
+export const PERIOD_LABEL_KEYS: Readonly<Record<SearchPeriod, string>> = {
+  any: 'search.period.any',
+  day: 'search.period.day',
+  week: 'search.period.week',
+  month: 'search.period.month',
+  year: 'search.period.year',
+}
+
+export const MATCH_LABEL_KEYS: Readonly<Record<SearchMatch, string>> = {
+  everything: 'search.match.everything',
+  titles: 'search.match.titles',
+}
+
+export const GROUPING_LABEL_KEYS: Readonly<Record<SearchGrouping, string>> = {
+  posts: 'search.grouping.posts',
+  threads: 'search.grouping.threads',
+}
+
+export function choiceOptions<T extends string>(
+  values: readonly T[],
+  keys: Readonly<Record<T, string>>,
+  selected: T,
+  t: Translator = untranslated(),
+): OptionModel[] {
+  return values.map((value) => ({
+    value,
+    label: t.t(keys[value]),
+    isSelected: value === selected,
+  }))
+}
+
+export function refineParams(refine: SearchRefinement): URLSearchParams {
+  const params = new URLSearchParams()
+
+  if (refine.sort !== undefined) params.set(REFINE_FIELDS.sort, refine.sort)
+  if (refine.grouping !== undefined) params.set(REFINE_FIELDS.grouping, refine.grouping)
+  if (refine.match !== undefined) params.set(REFINE_FIELDS.match, refine.match)
+  if (refine.period !== undefined) params.set(REFINE_FIELDS.period, refine.period)
+
+  for (const id of refine.forumIds ?? []) params.append(REFINE_FIELDS.forum, String(id))
+  for (const id of refine.authorUserIds ?? []) params.append(REFINE_FIELDS.author, String(id))
+
+  return params
+}
+
+export function resultsHref(
+  token: string,
+  refine: SearchRefinement,
+  cursor: SearchCursor | null = null,
+): string {
+  const params = refineParams(refine)
+
+  if (cursor !== null) {
+    params.set(CURSOR_FIELDS.rank, String(cursor.rank))
+    params.set(CURSOR_FIELDS.after, String(cursor.postId))
+  }
+
+  const query = params.toString()
+  return query === '' ? `/search/${token}` : `/search/${token}?${query}`
+}

package/src/view/search-results.ts

@@ -0,0 +1,291 @@
+import type { Translator } from '@meith/i18n'
+import type { CompiledWordFilter } from '@meith/markdown'
+import {
+  isRefined,
+  narrowerPeriod,
+  SEARCH_GROUPINGS,
+  SEARCH_MATCHES,
+  SEARCH_PERIODS,
+  SEARCH_SORTS,
+  type SearchCursor,
+  type SearchFilterSet,
+  type SearchRefinement,
+  type SearchSummary,
+} from '@meith/search'
+import type {
+  HiddenFieldModel,
+  OptionModel,
+  SearchChipModel,
+  SearchChoiceModel,
+  SearchRefineModel,
+  SearchResultsModel,
+} from '@meith/theme-kit'
+
+import { postLink } from './post-link'
+import {
+  choiceOptions,
+  GROUPING_LABEL_KEYS,
+  MATCH_LABEL_KEYS,
+  PERIOD_LABEL_KEYS,
+  REFINE_FIELDS,
+  resultsHref,
+  SEARCH_FIELDS,
+  SORT_LABEL_KEYS,
+} from './search-controls'
+import { formatTime, untranslated } from './time'
+import { filterWords } from './word-filter'
+
+export interface SearchHitRow {
+  readonly postId: number
+  readonly threadId: number
+  readonly threadTitle: string
+  readonly threadSlug: string
+  readonly authorUsername: string
+  readonly postedAt: Date
+  readonly excerpt: string
+}
+
+export interface SearchForumRef {
+  readonly id: number
+  readonly title: string
+}
+
+export interface SearchResultsInput {
+  readonly token: string
+  readonly terms: string
+  readonly createdAt: Date
+  readonly hits: readonly SearchHitRow[]
+  readonly nextCursor: SearchCursor | null
+  readonly pageSize: number
+  readonly now: Date
+  readonly t?: Translator | undefined
+  readonly filters: SearchFilterSet
+  readonly effective: SearchFilterSet
+  readonly refine: SearchRefinement
+  readonly summary: SearchSummary
+  readonly forums: readonly SearchForumRef[]
+  readonly countCap: number
+  readonly wordFilter?: CompiledWordFilter | undefined
+}
+
+export function buildSearchResultsView(input: SearchResultsInput): SearchResultsModel {
+  const t = input.t ?? untranslated()
+  const nextHref =
+    input.nextCursor === null ? null : resultsHref(input.token, input.refine, input.nextCursor)
+
+  return {
+    terms: input.terms,
+    searchedAt: formatTime(input.createdAt, input.now, input.t),
+    hits: input.hits.map((hit) => ({
+      postId: hit.postId,
+      threadTitle: hit.threadTitle,
+      href: postLink(`/thread/${hit.threadId}-${hit.threadSlug}`, hit.postId),
+      excerptHtml: filterWords(hit.excerpt, input.wordFilter),
+      authorUsername: hit.authorUsername,
+      postedAt: formatTime(hit.postedAt, input.now, input.t),
+    })),
+    nextHref,
+    nextLabel: t.t('search.nextResults', { count: input.pageSize }),
+    newSearchHref: '/search',
+    within: {
+      action: '/search',
+      field: SEARCH_FIELDS.query,
+      value: `${input.terms} `,
+      label: t.t('search.withinLabel'),
+      hint: t.t('search.withinHint'),
+      submitLabel: t.t('search.within'),
+      hidden: carriedFilters(input.filters),
+    },
+    ...(input.summary.total === 0 && !isRefined(input.refine)
+      ? {}
+      : { refine: buildRefine(input) }),
+  }
+}
+
+function buildRefine(input: SearchResultsInput): SearchRefineModel {
+  const { token, refine, effective, summary } = input
+  const t = input.t ?? untranslated()
+  const href = (next: SearchRefinement): string => resultsHref(token, next)
+  const applied = chips(input, href)
+
+  return {
+    action: `/search/${token}`,
+    label: t.t('search.filterLabel'),
+    summary: summaryLine(input),
+    note: summary.isCapped
+      ? `Counting stops at ${number(input.t, input.countCap)} matches, so the total and the counts below are floors.`
+      : null,
+    sorts: SEARCH_SORTS.map((sort) => ({
+      label: t.t(SORT_LABEL_KEYS[sort]),
+      href: href({ ...refine, sort: sort === input.filters.sort ? undefined : sort }),
+      isCurrent: sort === effective.sort,
+    })),
+    sortsLabel: t.t('search.sortBy'),
+    choices: [
+      forumChoice(input),
+      authorChoice(input),
+      {
+        field: REFINE_FIELDS.period,
+        label: t.t('search.posted'),
+        options: choiceOptions(
+          SEARCH_PERIODS.filter(
+            (period) => narrowerPeriod(input.filters.period, period) === period,
+          ),
+          PERIOD_LABEL_KEYS,
+          effective.period,
+          t,
+        ),
+      },
+      ...(input.filters.match === 'titles'
+        ? []
+        : [
+            {
+              field: REFINE_FIELDS.match,
+              label: t.t('search.matchingIn'),
+              options: choiceOptions(SEARCH_MATCHES, MATCH_LABEL_KEYS, effective.match, t),
+            },
+          ]),
+      {
+        field: REFINE_FIELDS.grouping,
+        label: t.t('search.show'),
+        options: choiceOptions(SEARCH_GROUPINGS, GROUPING_LABEL_KEYS, effective.grouping, t),
+      },
+    ],
+    submitLabel: t.t('search.applyFilters'),
+    applied,
+    clearHref:
+      applied.length === 0 ? null : href(refine.sort === undefined ? {} : { sort: refine.sort }),
+  }
+}
+
+function forumChoice(input: SearchResultsInput): SearchChoiceModel {
+  const t = input.t ?? untranslated()
+  const titles = new Map(input.forums.map((forum) => [forum.id, forum.title]))
+  const chosen = input.refine.forumIds ?? []
+
+  const options: OptionModel[] = [
+    { value: '', label: t.t('search.everyForum'), isSelected: chosen.length === 0 },
+  ]
+
+  for (const facet of input.summary.forums) {
+    options.push({
+      value: String(facet.forumId),
+      label: `${titles.get(facet.forumId) ?? `Forum ${facet.forumId}`} (${facet.hits})`,
+      isSelected: chosen.includes(facet.forumId),
+    })
+  }
+
+  return { field: REFINE_FIELDS.forum, label: 'In', options }
+}
+
+function authorChoice(input: SearchResultsInput): SearchChoiceModel {
+  const t = input.t ?? untranslated()
+  const chosen = input.refine.authorUserIds ?? []
+
+  const options: OptionModel[] = [{ value: '', label: 'Anybody', isSelected: chosen.length === 0 }]
+
+  for (const facet of input.summary.authors) {
+    options.push({
+      value: String(facet.userId),
+      label: `${facet.username} (${facet.hits})`,
+      isSelected: chosen.includes(facet.userId),
+    })
+  }
+
+  return { field: REFINE_FIELDS.author, label: t.t('search.postedBy'), options }
+}
+
+function chips(
+  input: SearchResultsInput,
+  href: (refine: SearchRefinement) => string,
+): SearchChipModel[] {
+  const { refine, summary } = input
+  const titles = new Map(input.forums.map((forum) => [forum.id, forum.title]))
+  const usernames = new Map(summary.authors.map((facet) => [facet.userId, facet.username]))
+
+  const applied: SearchChipModel[] = []
+
+  for (const id of refine.forumIds ?? []) {
+    applied.push({
+      label: `In ${titles.get(id) ?? `forum ${id}`}`,
+      removeHref: href({ ...refine, forumIds: without(refine.forumIds, id) }),
+    })
+  }
+
+  const t = input.t ?? untranslated()
+
+  for (const id of refine.authorUserIds ?? []) {
+    applied.push({
+      label: `By ${usernames.get(id) ?? `member ${id}`}`,
+      removeHref: href({ ...refine, authorUserIds: without(refine.authorUserIds, id) }),
+    })
+  }
+
+  if (refine.period !== undefined) {
+    applied.push({
+      label: t.t(PERIOD_LABEL_KEYS[refine.period]),
+      removeHref: href({ ...refine, period: undefined }),
+    })
+  }
+
+  if (refine.match !== undefined) {
+    applied.push({
+      label: t.t(MATCH_LABEL_KEYS[refine.match]),
+      removeHref: href({ ...refine, match: undefined }),
+    })
+  }
+
+  if (refine.grouping !== undefined) {
+    applied.push({
+      label: t.t(GROUPING_LABEL_KEYS[refine.grouping]),
+      removeHref: href({ ...refine, grouping: undefined }),
+    })
+  }
+
+  return applied
+}
+
+function without(
+  ids: readonly number[] | undefined,
+  removed: number,
+): readonly number[] | undefined {
+  const kept = (ids ?? []).filter((id) => id !== removed)
+  return kept.length === 0 ? undefined : kept
+}
+
+function number(translator: Translator | undefined, value: number): string {
+  return (translator ?? untranslated()).number(value)
+}
+
+function summaryLine(input: SearchResultsInput): string {
+  const { total, isCapped } = input.summary
+  const noun = input.effective.grouping === 'threads' ? 'thread' : 'post'
+
+  if (total === 0) return `No ${noun}s matched these words.`
+
+  const counted = `${number(input.t, total)} matching ${noun}${total === 1 ? '' : 's'}`
+  return isCapped ? `More than ${counted}.` : `${counted}.`
+}
+
+function carriedFilters(filters: SearchFilterSet): HiddenFieldModel[] {
+  const carried: HiddenFieldModel[] = []
+
+  for (const id of filters.forumIds ?? []) {
+    carried.push({ name: SEARCH_FIELDS.forum, value: String(id) })
+  }
+
+  if (filters.authorNames !== undefined && filters.authorNames.length > 0) {
+    carried.push({ name: SEARCH_FIELDS.author, value: filters.authorNames.join(', ') })
+  }
+
+  if (filters.period !== 'any') carried.push({ name: SEARCH_FIELDS.period, value: filters.period })
+  if (filters.match !== 'everything') {
+    carried.push({ name: SEARCH_FIELDS.match, value: filters.match })
+  }
+  if (filters.grouping !== 'posts') {
+    carried.push({ name: SEARCH_FIELDS.grouping, value: filters.grouping })
+  }
+  if (filters.sort !== 'relevance') carried.push({ name: SEARCH_FIELDS.sort, value: filters.sort })
+
+  return carried
+}

package/src/view/security-activity.ts

@@ -0,0 +1,73 @@
+import type { AuthEventKind } from '@meith/accounts'
+import type { Translator } from '@meith/i18n'
+
+import { untranslated } from './time'
+
+const LABEL_KEYS: Readonly<Record<AuthEventKind, string>> = {
+  login: 'authEvent.login',
+  login_failed: 'authEvent.login_failed',
+  logout: 'authEvent.logout',
+  second_factor_failed: 'authEvent.second_factor_failed',
+  second_factor_enabled: 'authEvent.second_factor_enabled',
+  second_factor_disabled: 'authEvent.second_factor_disabled',
+  second_factor_cleared: 'authEvent.second_factor_cleared',
+  recovery_code_used: 'authEvent.recovery_code_used',
+  recovery_codes_replaced: 'authEvent.recovery_codes_replaced',
+  password_changed: 'authEvent.password_changed',
+  password_reset: 'authEvent.password_reset',
+  email_change_requested: 'authEvent.email_change_requested',
+  email_changed: 'authEvent.email_changed',
+  session_revoked: 'authEvent.session_revoked',
+  sessions_revoked: 'authEvent.sessions_revoked',
+  identity_linked: 'authEvent.identity_linked',
+  identity_unlinked: 'authEvent.identity_unlinked',
+  passkey_added: 'authEvent.passkey_added',
+  passkey_removed: 'authEvent.passkey_removed',
+}
+
+export function authEventLabel(kind: string, t: Translator = untranslated()): string {
+  const key = LABEL_KEYS[kind as AuthEventKind]
+  return key === undefined ? kind.replace(/_/g, ' ') : t.t(key)
+}
+
+/**
+ * Enough of a user-agent string for a member to tell one of their own devices
+ * from another, and no more: the full string is a fingerprint, and this is a
+ * page whose job is recognition, not identification.
+ */
+export function describeDevice(userAgent: string | null, t: Translator = untranslated()): string {
+  const unknown = t.t('device.unknown')
+  if (userAgent === null || userAgent.trim() === '') return unknown
+
+  const platform =
+    firstMatch(userAgent, [
+      [/Windows NT/i, 'Windows'],
+      [/Android/i, 'Android'],
+      [/iPhone/i, 'iPhone'],
+      [/iPad/i, 'iPad'],
+      [/Mac OS X|Macintosh/i, 'Mac'],
+      [/CrOS/i, 'ChromeOS'],
+      [/Linux/i, 'Linux'],
+    ]) ?? unknown
+
+  const browser = firstMatch(userAgent, [
+    [/Edg\//i, 'Edge'],
+    [/OPR\/|Opera/i, 'Opera'],
+    [/Firefox\//i, 'Firefox'],
+    [/Chrome\//i, 'Chrome'],
+    [/Safari\//i, 'Safari'],
+  ])
+
+  return browser === null ? platform : `${browser} on ${platform}`
+}
+
+function firstMatch(value: string, table: readonly (readonly [RegExp, string])[]): string | null {
+  for (const [pattern, label] of table) {
+    if (pattern.test(value)) return label
+  }
+  return null
+}
+
+export function describeAddress(ipPrefix: string | null): string {
+  return ipPrefix === null || ipPrefix.trim() === '' ? 'address not recorded' : ipPrefix
+}

package/src/view/setting-groups.ts

@@ -0,0 +1,43 @@
+import type { SettingGroup } from '@meith/settings'
+
+export const GROUP_LABELS: Record<SettingGroup, string> = {
+  board: 'Board',
+  registration: 'Registration',
+  posting: 'Posting',
+  display: 'Display',
+  search: 'Search',
+  mail: 'Mail',
+  reputation: 'Reputation',
+  security: 'Security',
+  federation: 'Sign-in providers',
+  antispam: 'Anti-spam',
+  push: 'Push',
+  legal: 'Legal',
+  marketplace: 'Marketplace',
+}
+
+export const GROUP_ORDER: readonly SettingGroup[] = [
+  'board',
+  'registration',
+  'posting',
+  'display',
+  'search',
+  'reputation',
+  'mail',
+  'security',
+  'federation',
+  'antispam',
+  'push',
+  'legal',
+  'marketplace',
+]
+
+export const DEFAULT_SETTING_GROUP: SettingGroup = GROUP_ORDER[0]!
+
+export const SETTING_GROUP_NAV: readonly {
+  readonly href: string
+  readonly titleKey: string
+}[] = GROUP_ORDER.map((group) => ({
+  href: `/admin/settings?group=${group}`,
+  titleKey: `setting.group.${group}`,
+}))