@meith/web 0.16.0

package/src/view/board-latest.ts

@@ -0,0 +1,101 @@
+import type { Translator } from '@meith/i18n'
+import { type CompiledWordFilter, summarise } from '@meith/markdown'
+import type {
+  LatestPostModel,
+  LatestPostsModel,
+  LatestThreadModel,
+  LatestThreadsModel,
+} from '@meith/theme-kit'
+
+import { forumHref } from './board-index'
+import { count } from './count'
+import { type MemberIdentity, nameClassOf } from './member-identity'
+import { memberHref } from './member-profile'
+import { postLink } from './post-link'
+import { formatTime } from './time'
+import { filterWords } from './word-filter'
+
+export interface LatestThreadRow {
+  readonly threadId: number
+  readonly title: string
+  readonly slug: string
+  readonly forumId: number
+  readonly forumTitle: string
+  readonly forumSlug: string
+  readonly authorUserId: number | null
+  readonly authorUsername: string
+  readonly replyCount: number
+  readonly createdAt: Date
+}
+
+export interface LatestPostRow {
+  readonly postId: number
+  readonly threadId: number
+  readonly threadTitle: string
+  readonly threadSlug: string
+  readonly forumId: number
+  readonly forumTitle: string
+  readonly forumSlug: string
+  readonly authorUserId: number | null
+  readonly authorUsername: string
+  readonly createdAt: Date
+  readonly messageSource: string
+}
+
+export interface LatestInput<Row> {
+  readonly rows: readonly Row[]
+  readonly now: Date
+  readonly t?: Translator | undefined
+  readonly identities?: ReadonlyMap<number, MemberIdentity>
+  readonly wordFilter?: CompiledWordFilter | undefined
+}
+
+const EXCERPT_CHARS = 140
+
+function postHref(row: LatestPostRow): string {
+  return postLink(`/thread/${row.threadId}-${row.threadSlug}`, row.postId)
+}
+
+function authorOf(
+  row: { authorUserId: number | null; authorUsername: string },
+  identities: ReadonlyMap<number, MemberIdentity> | undefined,
+) {
+  return {
+    userId: row.authorUserId,
+    username: row.authorUsername,
+    profileHref: row.authorUserId === null ? null : memberHref(row.authorUserId),
+    nameClass: nameClassOf(identities, row.authorUserId),
+  }
+}
+
+export function buildLatestThreadsModel(input: LatestInput<LatestThreadRow>): LatestThreadsModel {
+  const threads: LatestThreadModel[] = input.rows.map((row) => ({
+    title: row.title,
+    href: `/thread/${row.threadId}-${row.slug}`,
+    forum: {
+      label: row.forumTitle,
+      href: forumHref({ id: row.forumId, slug: row.forumSlug }),
+    },
+    author: authorOf(row, input.identities),
+    replyCount: count(row.replyCount, input.t),
+    startedAt: formatTime(row.createdAt, input.now, input.t),
+  }))
+
+  return { threads, capturedAt: formatTime(input.now, input.now, input.t) }
+}
+
+export function buildLatestPostsModel(input: LatestInput<LatestPostRow>): LatestPostsModel {
+  const posts: LatestPostModel[] = input.rows.map((row) => ({
+    threadTitle: row.threadTitle,
+    href: postHref(row),
+    forum: {
+      label: row.forumTitle,
+      href: forumHref({ id: row.forumId, slug: row.forumSlug }),
+    },
+    author: authorOf(row, input.identities),
+    excerpt: filterWords(summarise(row.messageSource, EXCERPT_CHARS), input.wordFilter),
+    postedAt: formatTime(row.createdAt, input.now, input.t),
+  }))
+
+  return { posts, capturedAt: formatTime(input.now, input.now, input.t) }
+}

package/src/view/breadcrumb.ts

@@ -0,0 +1,50 @@
+import { ancestorIds } from '@meith/forums'
+import type { LinkModel } from '@meith/theme-kit'
+
+import { forumHref } from './board-index'
+
+export interface CrumbForum {
+  readonly id: number
+  readonly slug: string
+  readonly title: string
+  readonly path: string
+}
+
+export interface BreadcrumbInput {
+  readonly forums: readonly CrumbForum[]
+  readonly forumId: number
+  readonly visibleForumIds?: ReadonlySet<number>
+  readonly leaf?: string
+  readonly homeLabel?: string
+}
+
+export function buildBreadcrumb({
+  forums,
+  forumId,
+  visibleForumIds,
+  leaf,
+  homeLabel = 'Home',
+}: BreadcrumbInput): readonly LinkModel[] {
+  const byId = new Map(forums.map((forum) => [forum.id, forum]))
+  const self = byId.get(forumId)
+
+  const items: LinkModel[] = [{ label: homeLabel, href: '/' }]
+  if (self === undefined) {
+    if (leaf !== undefined) items.push({ label: leaf, href: '' })
+    return items
+  }
+
+  const visible = (id: number) => visibleForumIds === undefined || visibleForumIds.has(id)
+
+  for (const ancestorId of ancestorIds(self.path)) {
+    const ancestor = byId.get(ancestorId)
+    if (ancestor === undefined || !visible(ancestor.id)) continue
+    items.push({ label: ancestor.title, href: forumHref(ancestor) })
+  }
+
+  items.push({ label: self.title, href: forumHref(self) })
+
+  if (leaf !== undefined) items.push({ label: leaf, href: '' })
+
+  return items
+}

package/src/view/contacts.ts

@@ -0,0 +1,85 @@
+import type { Translator } from '@meith/i18n'
+import { isOnline, type RelationKind, type RelationRow } from '@meith/relations'
+import type { TimeModel } from '@meith/theme-kit'
+
+import { memberHref } from './member-profile'
+import { formatTime, untranslated } from './time'
+
+export interface ContactRowView {
+  readonly userId: number
+  readonly username: string
+  readonly profileHref: string
+  readonly isOnline: boolean
+  readonly lastSeenLabel: string | null
+  readonly addedAt: TimeModel
+  readonly messageHref: string | null
+}
+
+export interface ContactsView {
+  readonly kind: RelationKind
+  readonly buddies: readonly ContactRowView[]
+  readonly ignored: readonly ContactRowView[]
+  readonly onlineCount: number
+  readonly total: number
+  readonly limit: number
+}
+
+export function buildContactsView(input: {
+  readonly kind: RelationKind
+  readonly buddies: readonly RelationRow[]
+  readonly ignored: readonly RelationRow[]
+  readonly limit: number
+  readonly now: Date
+  readonly t?: Translator
+}): ContactsView {
+  const row = (entry: RelationRow): ContactRowView => ({
+    userId: entry.userId,
+    username: entry.username,
+    profileHref: memberHref(entry.userId),
+    isOnline: isOnline(entry.lastActiveAt, input.now),
+    lastSeenLabel:
+      entry.lastActiveAt === null
+        ? null
+        : `Last seen ${formatTime(entry.lastActiveAt, input.now, input.t).label}`,
+    addedAt: formatTime(entry.createdAt, input.now, input.t),
+    messageHref:
+      entry.kind === 'buddy' ? `/messages/compose?to=${encodeURIComponent(entry.username)}` : null,
+  })
+
+  const buddies = input.buddies.map(row)
+
+  return {
+    kind: input.kind,
+    buddies,
+    ignored: input.ignored.map(row),
+    onlineCount: buddies.filter((entry) => entry.isOnline).length,
+    total: input.buddies.length + input.ignored.length,
+    limit: input.limit,
+  }
+}
+
+export function contactsNotice(
+  query: {
+    readonly added?: string | undefined
+    readonly ignored?: string | undefined
+    readonly removed?: string | undefined
+  },
+  t: Translator = untranslated(),
+): { kind: 'info'; message: string } | null {
+  if (query.added !== undefined) {
+    return { kind: 'info', message: t.t('contacts.added', { name: nameOf(query.added, t) }) }
+  }
+  if (query.ignored !== undefined) {
+    return { kind: 'info', message: t.t('contacts.ignored', { name: nameOf(query.ignored, t) }) }
+  }
+  if (query.removed !== undefined) {
+    return { kind: 'info', message: t.t('contacts.removed', { name: nameOf(query.removed, t) }) }
+  }
+  return null
+}
+
+function nameOf(raw: string, t: Translator): string {
+  const trimmed = raw.trim()
+  if (trimmed === '') return t.t('contacts.someMember')
+  return trimmed.length > 30 ? `${trimmed.slice(0, 30)}…` : trimmed
+}

package/src/view/content-copy.ts

@@ -0,0 +1,118 @@
+import type { Translator } from '@meith/i18n'
+
+import { copyFor, patternCopy, splitAround } from './copy'
+import { untranslated } from './time'
+
+export function replyFormCopy(t: Translator = untranslated()): Readonly<Record<string, string>> {
+  return copyFor(
+    [
+      'composer.draftSaved',
+      'composer.autosave.failed',
+      'composer.autosave.saved',
+      'composer.autosave.saving',
+      'composer.recovery.available',
+      'composer.recovery.discard',
+      'composer.recovery.restore',
+      'composer.notifyReplies',
+      'composer.reply.submit',
+      'composer.reply.write',
+      'composer.reply.quick',
+      'composer.reply.draftSaved',
+    ],
+    t,
+  )
+}
+
+export function editPostFormCopy(t: Translator = untranslated()): Readonly<Record<string, string>> {
+  return copyFor(
+    [
+      'composer.edit.reason',
+      'composer.edit.submit',
+      'composer.edit.delete',
+      'composer.edit.deleteBlurb',
+      'composer.edit.restore',
+      'composer.edit.restoreBlurb',
+      'composer.preview',
+    ],
+    t,
+  )
+}
+
+export function newThreadFormCopy(
+  t: Translator = untranslated(),
+): Readonly<Record<string, string>> {
+  return {
+    ...copyFor(
+      [
+        'composer.draftSaved',
+        'composer.notifyReplies',
+        'composer.newThread.subject',
+        'composer.newThread.prefix',
+        'composer.newThread.prefixOptional',
+        'composer.newThread.choosePrefix',
+        'composer.newThread.noPrefix',
+        'composer.newThread.addPoll',
+        'composer.newThread.optional',
+        'composer.newThread.question',
+        'composer.newThread.pollChoices',
+        'composer.newThread.pollChoicesHint',
+        'composer.newThread.pollRevote',
+        'composer.newThread.pollPublic',
+        'composer.newThread.submit',
+      ],
+      t,
+    ),
+    ...patternCopy(['composer.newThread.option'], t),
+  }
+}
+
+export function messageFormsCopy(t: Translator = untranslated()): Readonly<Record<string, string>> {
+  return copyFor(
+    [
+      'messageForm.to',
+      'messageForm.toHint',
+      'messageForm.bcc',
+      'messageForm.bccHint',
+      'messageForm.subject',
+      'messageForm.bodyHint',
+      'messageForm.receipt',
+      'messageForm.send',
+      'messageForm.withSelected',
+      'messageForm.markRead',
+      'messageForm.markUnread',
+      'messageForm.restore',
+      'messageForm.deleteForever',
+      'messageForm.emptyTrash',
+      'messageForm.moveToTrash',
+    ],
+    t,
+  )
+}
+
+export function threadRatingCopy(
+  rating: { readonly count: number; readonly average: number; readonly mine: number | null },
+  t: Translator = untranslated(),
+): Readonly<Record<string, string>> {
+  const [outOfLead, outOfTail] = splitAround(t, 'thread.rating.outOf', 'average')
+  return {
+    ...copyFor(
+      [
+        'thread.rating.section',
+        'thread.rating.none',
+        'thread.rating.rateIt',
+        'thread.rating.yours',
+      ],
+      t,
+    ),
+    ...patternCopy(['thread.rating.rateValue', 'thread.rating.currentValue'], t),
+    'thread.rating.outOfLead': outOfLead,
+    'thread.rating.outOfTail': outOfTail,
+    'thread.rating.average': t.number(rating.average, {
+      minimumFractionDigits: 1,
+      maximumFractionDigits: 1,
+    }),
+    'thread.rating.from': t.t('thread.rating.from', { count: rating.count }),
+    'thread.rating.countLabel': t.t('thread.rating.countLabel', { count: rating.count }),
+    'thread.rating.mine': t.t('thread.rating.mine', { value: rating.mine ?? 0 }),
+  }
+}

package/src/view/contrast.ts

@@ -0,0 +1,286 @@
+import type { Translator } from '@meith/i18n'
+import { oklchToRgb, parseColour, relativeLuminance } from '@meith/theme-kit'
+
+import { untranslated } from './time'
+
+export type ContrastNeed = 'text' | 'large-text' | 'non-text'
+
+export const REQUIRED_RATIO: Readonly<Record<ContrastNeed, number>> = {
+  text: 4.5,
+  'large-text': 3,
+  'non-text': 3,
+}
+
+export interface ContrastPair {
+  readonly foreground: string
+  readonly background: string
+  readonly labelKey: string
+  readonly need: ContrastNeed
+}
+
+export const CONTRAST_PAIRS: readonly ContrastPair[] = [
+  {
+    foreground: 'foreground',
+    background: 'background',
+    labelKey: 'contrast.foreground-on-background',
+    need: 'text',
+  },
+  {
+    foreground: 'foreground',
+    background: 'surface',
+    labelKey: 'contrast.foreground-on-surface',
+    need: 'text',
+  },
+  {
+    foreground: 'card-foreground',
+    background: 'card',
+    labelKey: 'contrast.card-foreground-on-card',
+    need: 'text',
+  },
+  {
+    foreground: 'muted-foreground',
+    background: 'card',
+    labelKey: 'contrast.muted-foreground-on-card',
+    need: 'text',
+  },
+  {
+    foreground: 'muted-foreground',
+    background: 'background',
+    labelKey: 'contrast.muted-foreground-on-background',
+    need: 'text',
+  },
+  {
+    foreground: 'primary-foreground',
+    background: 'primary',
+    labelKey: 'contrast.primary-foreground-on-primary',
+    need: 'text',
+  },
+  {
+    foreground: 'primary-foreground',
+    background: 'primary-hover',
+    labelKey: 'contrast.primary-foreground-on-primary-hover',
+    need: 'text',
+  },
+  {
+    foreground: 'secondary-foreground',
+    background: 'secondary',
+    labelKey: 'contrast.secondary-foreground-on-secondary',
+    need: 'text',
+  },
+  {
+    foreground: 'destructive-foreground',
+    background: 'destructive',
+    labelKey: 'contrast.destructive-foreground-on-destructive',
+    need: 'text',
+  },
+  {
+    foreground: 'accent-foreground',
+    background: 'accent',
+    labelKey: 'contrast.accent-foreground-on-accent',
+    need: 'text',
+  },
+
+  {
+    foreground: 'card-foreground',
+    background: 'post-highlight',
+    labelKey: 'contrast.card-foreground-on-post-highlight',
+    need: 'text',
+  },
+  {
+    foreground: 'card-foreground',
+    background: 'post-own',
+    labelKey: 'contrast.card-foreground-on-post-own',
+    need: 'text',
+  },
+  {
+    foreground: 'card-foreground',
+    background: 'post-unapproved',
+    labelKey: 'contrast.card-foreground-on-post-unapproved',
+    need: 'text',
+  },
+
+  {
+    foreground: 'forum-unread',
+    background: 'card',
+    labelKey: 'contrast.forum-unread-on-card',
+    need: 'text',
+  },
+  {
+    foreground: 'forum-read',
+    background: 'card',
+    labelKey: 'contrast.forum-read-on-card',
+    need: 'text',
+  },
+  {
+    foreground: 'forum-locked',
+    background: 'card',
+    labelKey: 'contrast.forum-locked-on-card',
+    need: 'text',
+  },
+  {
+    foreground: 'thread-pinned',
+    background: 'card',
+    labelKey: 'contrast.thread-pinned-on-card',
+    need: 'text',
+  },
+  {
+    foreground: 'thread-locked',
+    background: 'card',
+    labelKey: 'contrast.thread-locked-on-card',
+    need: 'text',
+  },
+  {
+    foreground: 'thread-moved',
+    background: 'card',
+    labelKey: 'contrast.thread-moved-on-card',
+    need: 'text',
+  },
+  {
+    foreground: 'thread-unapproved',
+    background: 'card',
+    labelKey: 'contrast.thread-unapproved-on-card',
+    need: 'text',
+  },
+  {
+    foreground: 'thread-deleted',
+    background: 'card',
+    labelKey: 'contrast.thread-deleted-on-card',
+    need: 'text',
+  },
+
+  {
+    foreground: 'moderation-pending',
+    background: 'card',
+    labelKey: 'contrast.moderation-pending-on-card',
+    need: 'text',
+  },
+  {
+    foreground: 'moderation-approved',
+    background: 'card',
+    labelKey: 'contrast.moderation-approved-on-card',
+    need: 'text',
+  },
+  {
+    foreground: 'moderation-rejected',
+    background: 'card',
+    labelKey: 'contrast.moderation-rejected-on-card',
+    need: 'text',
+  },
+
+  {
+    foreground: 'group-admin',
+    background: 'card',
+    labelKey: 'contrast.group-admin-on-card',
+    need: 'text',
+  },
+  {
+    foreground: 'group-supermod',
+    background: 'card',
+    labelKey: 'contrast.group-supermod-on-card',
+    need: 'text',
+  },
+  {
+    foreground: 'group-mod',
+    background: 'card',
+    labelKey: 'contrast.group-mod-on-card',
+    need: 'text',
+  },
+  {
+    foreground: 'group-banned',
+    background: 'card',
+    labelKey: 'contrast.group-banned-on-card',
+    need: 'text',
+  },
+
+  {
+    foreground: 'ring',
+    background: 'background',
+    labelKey: 'contrast.ring-on-background',
+    need: 'non-text',
+  },
+  {
+    foreground: 'ring',
+    background: 'card',
+    labelKey: 'contrast.ring-on-card',
+    need: 'non-text',
+  },
+  { foreground: 'input', background: 'card', labelKey: 'contrast.input-on-card', need: 'non-text' },
+]
+
+export type ContrastState = 'pass' | 'fail' | 'unknown'
+
+export interface ContrastCheck {
+  readonly pair: ContrastPair
+  readonly required: number
+  readonly ratio: number | null
+  readonly state: ContrastState
+}
+
+export function contrastRatio(a: string, b: string): number | null {
+  const first = parseColour(a)
+  const second = parseColour(b)
+  if (first === null || second === null) return null
+
+  const lighter = Math.max(
+    relativeLuminance(oklchToRgb(first).rgb),
+    relativeLuminance(oklchToRgb(second).rgb),
+  )
+  const darker = Math.min(
+    relativeLuminance(oklchToRgb(first).rgb),
+    relativeLuminance(oklchToRgb(second).rgb),
+  )
+
+  return (lighter + 0.05) / (darker + 0.05)
+}
+
+function check(pair: ContrastPair, values: Readonly<Record<string, string>>): ContrastCheck {
+  const foreground = values[pair.foreground]
+  const background = values[pair.background]
+  const required = REQUIRED_RATIO[pair.need]
+
+  if (foreground === undefined || background === undefined) {
+    return { pair, required, ratio: null, state: 'unknown' }
+  }
+
+  const ratio = contrastRatio(foreground, background)
+  return {
+    pair,
+    required,
+    ratio,
+    state: ratio === null ? 'unknown' : ratio >= required ? 'pass' : 'fail',
+  }
+}
+
+export function checkContrast(
+  values: Readonly<Record<string, string>>,
+  pairs: readonly ContrastPair[] = CONTRAST_PAIRS,
+): readonly ContrastCheck[] {
+  return pairs.map((pair) => check(pair, values))
+}
+
+export function contrastChecksFor(
+  token: string,
+  values: Readonly<Record<string, string>>,
+): readonly ContrastCheck[] {
+  return checkContrast(
+    values,
+    CONTRAST_PAIRS.filter((pair) => pair.foreground === token || pair.background === token),
+  )
+}
+
+export function contrastCopy(t: Translator = untranslated()): Readonly<Record<string, string>> {
+  const copy: Record<string, string> = {}
+  for (const pair of CONTRAST_PAIRS) copy[pair.labelKey] = t.t(pair.labelKey)
+  return copy
+}
+
+export function formatRatio(ratio: number): string {
+  return `${ratio.toFixed(2).replace(/\.?0+$/, '')}:1`
+}
+
+export function contrastGrade(ratio: number, need: ContrastNeed): 'AAA' | 'AA' | 'Fails' {
+  if (need === 'non-text') return ratio >= 3 ? 'AA' : 'Fails'
+  const enhanced = need === 'text' ? 7 : 4.5
+  if (ratio >= enhanced) return 'AAA'
+  return ratio >= REQUIRED_RATIO[need] ? 'AA' : 'Fails'
+}