@meith/web 0.16.0

package/src/view/copy.ts

@@ -0,0 +1,101 @@
+import type { Translator } from '@meith/i18n'
+
+import { untranslated } from './time'
+
+export function copyFor(
+  keys: readonly string[],
+  t: Translator = untranslated(),
+): Readonly<Record<string, string>> {
+  const copy: Record<string, string> = {}
+  for (const key of keys) copy[key] = t.t(key)
+  return copy
+}
+
+export function patternCopy(
+  keys: readonly string[],
+  t: Translator = untranslated(),
+): Readonly<Record<string, string>> {
+  const copy: Record<string, string> = {}
+  for (const key of keys) copy[key] = t.pattern(key) ?? key
+  return copy
+}
+
+const CHROME_KEYS = [
+  'form.working',
+  'form.notSaved',
+  'composer.message',
+  'composer.tabs',
+  'composer.write',
+  'composer.preview',
+  'composer.formatting',
+  'composer.rendering',
+  'composer.previewFailed',
+  'composer.previewEmpty',
+  'composer.saveDraft',
+  'composer.tool.bold',
+  'composer.tool.italic',
+  'composer.tool.strikethrough',
+  'composer.tool.link',
+  'composer.tool.quote',
+  'composer.tool.code',
+  'composer.tool.bulletedList',
+  'composer.tool.numberedList',
+  'composer.tool.heading',
+  'composer.tool.spoiler',
+  'composer.tool.attachment',
+  'composer.placeholder.bold',
+  'composer.placeholder.italic',
+  'composer.placeholder.struck',
+  'composer.placeholder.spoiler',
+  'composer.help.summary',
+  'composer.help.bold',
+  'composer.help.italic',
+  'composer.help.struck',
+  'composer.help.link',
+  'composer.help.codeInline',
+  'composer.help.codeBlock',
+  'composer.help.quote',
+  'composer.help.list',
+  'composer.help.heading',
+  'composer.help.note',
+  'composer.help.spoiler',
+  'composer.help.mention',
+  'composer.help.attachment',
+  'composer.attachments.label',
+  'composer.mention.suggestions',
+  'composer.attachment.uploading',
+  'composer.thanks.thanked',
+  'composer.thanks.thanks',
+  'composer.multiquote.button',
+  'composer.multiquote.addToReply',
+  'composer.multiquote.adding',
+  'composer.multiquote.clear',
+  'composer.multiquote.cleared',
+  'composer.multiquote.noneQuoted',
+] as const
+
+const CHROME_PATTERN_KEYS = [
+  'composer.toolShortcut',
+  'composer.attachments.hint',
+  'composer.thanks.count',
+  'composer.multiquote.selectedToQuote',
+  'composer.multiquote.added',
+  'composer.multiquote.removed',
+  'composer.multiquote.quotesAdded',
+  'composer.multiquote.quotesPartial',
+] as const
+
+export function formChromeCopy(t: Translator = untranslated()): Readonly<Record<string, string>> {
+  return { ...copyFor(CHROME_KEYS, t), ...patternCopy(CHROME_PATTERN_KEYS, t) }
+}
+
+export function splitAround(
+  t: Translator,
+  key: string,
+  slot: string,
+  args?: Readonly<Record<string, string | number>>,
+): readonly [string, string] {
+  const rendered = t.t(key, { ...args, [slot]: '\u0000' })
+  const at = rendered.indexOf('\u0000')
+  return at === -1 ? [rendered, ''] : [rendered.slice(0, at), rendered.slice(at + 1)]
+}

package/src/view/count.ts

@@ -0,0 +1,8 @@
+import type { Translator } from '@meith/i18n'
+import type { CountModel } from '@meith/theme-kit'
+
+import { untranslated } from './time'
+
+export function count(value: number, translator: Translator = untranslated()): CountModel {
+  return { value, label: translator.number(value) }
+}

package/src/view/discovery-view.ts

@@ -0,0 +1,74 @@
+import type { Translator } from '@meith/i18n'
+import type { DiscoveryViewModel } from '@meith/theme-kit'
+
+import { count } from './count'
+import { formatTime, untranslated } from './time'
+
+export const DISCOVERY_LABELS = {
+  new: { labelKey: 'discovery.new.label', blurbKey: 'discovery.new.blurb' },
+  today: { labelKey: 'discovery.today.label', blurbKey: 'discovery.today.blurb' },
+  mine: { labelKey: 'discovery.mine.label', blurbKey: 'discovery.mine.blurb' },
+  participated: {
+    labelKey: 'discovery.participated.label',
+    blurbKey: 'discovery.participated.blurb',
+  },
+  unanswered: { labelKey: 'discovery.unanswered.label', blurbKey: 'discovery.unanswered.blurb' },
+} as const satisfies Readonly<Record<string, { labelKey: string; blurbKey: string }>>
+
+export type DiscoveryKey = keyof typeof DISCOVERY_LABELS
+
+export interface DiscoveryThreadRow {
+  readonly threadId: number
+  readonly slug: string
+  readonly title: string
+  readonly forumId: number
+  readonly forumSlug: string
+  readonly forumTitle: string
+  readonly authorUsername: string
+  readonly replyCount: number
+  readonly lastPostAt: Date
+  readonly lastPostUsername: string | null
+}
+
+export function buildDiscoveryView(input: {
+  readonly view: DiscoveryKey
+  readonly views: readonly DiscoveryKey[]
+  readonly rows: readonly DiscoveryThreadRow[]
+  readonly nextHref: string | null
+  readonly pageSize: number
+  readonly isFirstPage: boolean
+  readonly refusalMessage?: string | null | undefined
+  readonly now: Date
+  readonly t?: Translator | undefined
+}): DiscoveryViewModel {
+  const refusal = input.refusalMessage ?? null
+  const t = input.t ?? untranslated()
+
+  return {
+    title: t.t(DISCOVERY_LABELS[input.view].labelKey),
+    blurb: t.t(DISCOVERY_LABELS[input.view].blurbKey),
+    tabsLabel: t.t('discovery.tabsLabel'),
+    tabs: input.views.map((view) => ({
+      href: `/discover/${view}`,
+      label: t.t(DISCOVERY_LABELS[view].labelKey),
+      isCurrent: view === input.view,
+    })),
+    rows: input.rows.map((row) => ({
+      threadId: row.threadId,
+      title: row.title,
+      href: `/thread/${row.threadId}-${row.slug}`,
+      forum: { label: row.forumTitle, href: `/${row.forumId}-${row.forumSlug}` },
+      authorUsername: row.authorUsername,
+      replyCount: count(row.replyCount, input.t),
+      lastPostAt: formatTime(row.lastPostAt, input.now, input.t),
+      lastPostUsername: row.lastPostUsername,
+    })),
+    nextHref: input.nextHref,
+    nextLabel: t.t('discovery.next', { count: input.pageSize }),
+    emptyMessage: t.t(input.isFirstPage ? 'discovery.emptyFirst' : 'discovery.emptyMore'),
+    refusal:
+      refusal === null
+        ? null
+        : { message: refusal, signInHref: '/login', signInLabel: t.t('nav.signIn') },
+  }
+}

package/src/view/editor-toolbar.ts

@@ -0,0 +1,84 @@
+import type { Translator } from '@meith/i18n'
+import type { EditorTag, EditorToolbarButtonModel, EditorToolbarModel } from '@meith/theme-kit'
+
+import { attachmentFieldId, MESSAGE_TEXTAREA_ID } from '@/components/content/composer-ids'
+
+import { untranslated } from './time'
+
+interface ToolSpec {
+  readonly tag: EditorTag
+  readonly key: string
+  readonly shortcut: string | null
+  readonly placeholderKey: string | null
+}
+
+const TOOLS: readonly ToolSpec[] = [
+  {
+    tag: 'bold',
+    key: 'composer.tool.bold',
+    shortcut: 'b',
+    placeholderKey: 'composer.placeholder.bold',
+  },
+  {
+    tag: 'italic',
+    key: 'composer.tool.italic',
+    shortcut: 'i',
+    placeholderKey: 'composer.placeholder.italic',
+  },
+  {
+    tag: 'strikethrough',
+    key: 'composer.tool.strikethrough',
+    shortcut: null,
+    placeholderKey: 'composer.placeholder.struck',
+  },
+  { tag: 'link', key: 'composer.tool.link', shortcut: 'k', placeholderKey: null },
+  { tag: 'quote', key: 'composer.tool.quote', shortcut: null, placeholderKey: null },
+  { tag: 'code', key: 'composer.tool.code', shortcut: null, placeholderKey: null },
+  {
+    tag: 'spoiler',
+    key: 'composer.tool.spoiler',
+    shortcut: null,
+    placeholderKey: 'composer.placeholder.spoiler',
+  },
+  { tag: 'bulletedList', key: 'composer.tool.bulletedList', shortcut: null, placeholderKey: null },
+  { tag: 'numberedList', key: 'composer.tool.numberedList', shortcut: null, placeholderKey: null },
+  { tag: 'heading', key: 'composer.tool.heading', shortcut: null, placeholderKey: null },
+]
+
+function button(spec: ToolSpec, t: Translator): EditorToolbarButtonModel {
+  const label = t.t(spec.key)
+  return {
+    tag: spec.tag,
+    label,
+    icon: null,
+    title:
+      spec.shortcut === null
+        ? label
+        : t.t('composer.toolShortcut', { label, key: spec.shortcut.toUpperCase() }),
+    keyShortcut: spec.shortcut === null ? null : `Control+${spec.shortcut}`,
+    placeholder: spec.placeholderKey === null ? null : t.t(spec.placeholderKey),
+  }
+}
+
+export interface EditorToolbarInput {
+  readonly textareaId?: string
+  /** Whether this composer takes attachments. Defaults to `false`. */
+  readonly attachments?: boolean
+  readonly t?: Translator
+}
+
+export function buildEditorToolbarModel(input: EditorToolbarInput = {}): EditorToolbarModel {
+  const t = input.t ?? untranslated()
+  const textareaId = input.textareaId ?? MESSAGE_TEXTAREA_ID
+
+  return {
+    textareaId,
+    groupLabel: t.t('composer.formatting'),
+    buttons: TOOLS.map((spec) => button(spec, t)),
+    attachment:
+      input.attachments === true
+        ? { inputId: attachmentFieldId(textareaId), label: t.t('composer.tool.attachment') }
+        : null,
+    previewAction: null,
+  }
+}

package/src/view/error-notice.ts

@@ -0,0 +1,52 @@
+import type { Translator } from '@meith/i18n'
+import type { ErrorNoticeModel } from '@meith/theme-kit'
+
+import { untranslated } from './time'
+
+export interface ErrorNoticeCopy {
+  readonly status: number
+  readonly titleKey: string
+  readonly messageKey: string
+}
+
+export const NOT_FOUND_NOTICE: ErrorNoticeCopy = {
+  status: 404,
+  titleKey: 'errorNotice.notFound.title',
+  messageKey: 'errorNotice.notFound.message',
+}
+
+export const CRASH_NOTICE_STATUS = 500
+
+export const CRASH_NOTICE: ErrorNoticeCopy = {
+  status: CRASH_NOTICE_STATUS,
+  titleKey: 'errorNotice.crash.title',
+  messageKey: 'errorNotice.crash.message',
+}
+
+export interface CrashNoticeCopy {
+  readonly title: string
+  readonly message: string
+  readonly homeLabel: string
+}
+
+export function crashNoticeCopy(t: Translator = untranslated()): CrashNoticeCopy {
+  return {
+    title: t.t(CRASH_NOTICE.titleKey),
+    message: t.t(CRASH_NOTICE.messageKey),
+    homeLabel: t.t('errorNotice.home'),
+  }
+}
+
+export function buildErrorNotice(
+  copy: ErrorNoticeCopy,
+  requestId: string | null,
+  t: Translator = untranslated(),
+): ErrorNoticeModel {
+  return {
+    status: copy.status,
+    title: t.t(copy.titleKey),
+    message: t.t(copy.messageKey),
+    homeHref: '/',
+    requestId,
+  }
+}

package/src/view/feed.ts

@@ -0,0 +1,130 @@
+export interface FeedEntry {
+  readonly id: string
+  readonly title: string
+  readonly href: string
+  readonly author: string
+  readonly published: Date
+  readonly updated: Date
+  readonly summary: string
+}
+
+export interface FeedChannel {
+  readonly title: string
+  readonly description: string
+  readonly href: string
+  readonly selfHref: string
+  readonly updated: Date
+  readonly entries: readonly FeedEntry[]
+}
+
+export function xmlEscape(value: string): string {
+  return stripControl(value)
+    .replace(/&/g, '&')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&apos;')
+}
+
+function stripControl(value: string): string {
+  // biome-ignore lint/suspicious/noControlCharactersInRegex: the point is the control range
+  return value.replace(/[\u0000-\u0008\u000B\u000C\u000E-\u001F\u007F]/g, '')
+}
+
+export { summarise } from '@meith/markdown'
+
+function rfc822(at: Date): string {
+  return at.toUTCString()
+}
+
+export function renderRss(channel: FeedChannel): string {
+  const items = channel.entries
+    .map(
+      (entry) => `    <item>
+      <title>${xmlEscape(entry.title)}</title>
+      <link>${xmlEscape(entry.href)}</link>
+      <guid isPermaLink="false">${xmlEscape(entry.id)}</guid>
+      <dc:creator>${xmlEscape(entry.author)}</dc:creator>
+      <pubDate>${rfc822(entry.published)}</pubDate>
+      <description>${xmlEscape(entry.summary)}</description>
+    </item>`,
+    )
+    .join('\n')
+
+  return `<?xml version="1.0" encoding="UTF-8"?>
+<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
+  <channel>
+    <title>${xmlEscape(channel.title)}</title>
+    <link>${xmlEscape(channel.href)}</link>
+    <description>${xmlEscape(channel.description)}</description>
+    <lastBuildDate>${rfc822(channel.updated)}</lastBuildDate>
+    <atom:link href="${xmlEscape(channel.selfHref)}" rel="self" type="application/rss+xml"/>
+${items}
+  </channel>
+</rss>
+`
+}
+
+export function renderAtom(channel: FeedChannel): string {
+  const entries = channel.entries
+    .map(
+      (entry) => `  <entry>
+    <title>${xmlEscape(entry.title)}</title>
+    <link rel="alternate" href="${xmlEscape(entry.href)}"/>
+    <id>${xmlEscape(entry.id)}</id>
+    <author><name>${xmlEscape(entry.author)}</name></author>
+    <published>${entry.published.toISOString()}</published>
+    <updated>${entry.updated.toISOString()}</updated>
+    <summary type="text">${xmlEscape(entry.summary)}</summary>
+  </entry>`,
+    )
+    .join('\n')
+
+  return `<?xml version="1.0" encoding="UTF-8"?>
+<feed xmlns="http://www.w3.org/2005/Atom">
+  <title>${xmlEscape(channel.title)}</title>
+  <link rel="alternate" href="${xmlEscape(channel.href)}"/>
+  <link rel="self" href="${xmlEscape(channel.selfHref)}"/>
+  <id>${xmlEscape(channel.href)}</id>
+  <updated>${channel.updated.toISOString()}</updated>
+${entries}
+</feed>
+`
+}
+
+export interface SitemapUrl {
+  readonly loc: string
+  readonly lastmod?: Date | undefined
+}
+
+export function renderSitemap(urls: readonly SitemapUrl[]): string {
+  const entries = urls
+    .map((url) => {
+      const lastmod =
+        url.lastmod === undefined ? '' : `\n    <lastmod>${url.lastmod.toISOString()}</lastmod>`
+      return `  <url>\n    <loc>${xmlEscape(url.loc)}</loc>${lastmod}\n  </url>`
+    })
+    .join('\n')
+
+  return `<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.w3.org/schemas/sitemap/0.9">
+${entries}
+</urlset>
+`
+}
+
+export function renderSitemapIndex(sitemaps: readonly SitemapUrl[]): string {
+  const entries = sitemaps
+    .map((url) => {
+      const lastmod =
+        url.lastmod === undefined ? '' : `\n    <lastmod>${url.lastmod.toISOString()}</lastmod>`
+      return `  <sitemap>\n    <loc>${xmlEscape(url.loc)}</loc>${lastmod}\n  </sitemap>`
+    })
+    .join('\n')
+
+  return `<?xml version="1.0" encoding="UTF-8"?>
+<sitemapindex xmlns="http://www.w3.org/schemas/sitemap/0.9">
+${entries}
+</sitemapindex>
+`
+}

package/src/view/forum-cursor.ts

@@ -0,0 +1,54 @@
+import type { ThreadCursor } from '@meith/threads'
+
+export function decodeForumCursor(value: string | undefined): ThreadCursor | null | undefined {
+  if (value === undefined) return undefined
+  try {
+    const parsed: unknown = JSON.parse(Buffer.from(value, 'base64url').toString('utf8'))
+    if (
+      typeof parsed !== 'object' ||
+      parsed === null ||
+      ((parsed as { o?: unknown }).o !== 'activity' &&
+        (parsed as { o?: unknown }).o !== 'rating') ||
+      typeof (parsed as { s?: unknown }).s !== 'boolean' ||
+      typeof (parsed as { t?: unknown }).t !== 'string' ||
+      !Number.isSafeInteger((parsed as { r?: unknown }).r) ||
+      !Number.isSafeInteger((parsed as { n?: unknown }).n) ||
+      typeof (parsed as { i?: unknown }).i !== 'number'
+    ) {
+      return null
+    }
+    const lastPostAt = new Date((parsed as { t: string }).t)
+    const ratingTotal = (parsed as { r: number }).r
+    const ratingCount = (parsed as { n: number }).n
+    const id = (parsed as { i: number }).i
+    return Number.isSafeInteger(id) &&
+      id > 0 &&
+      ratingTotal >= 0 &&
+      ratingCount >= 0 &&
+      !Number.isNaN(lastPostAt.getTime())
+      ? {
+          sort: (parsed as { o: 'activity' | 'rating' }).o,
+          isSticky: (parsed as { s: boolean }).s,
+          lastPostAt,
+          ratingTotal,
+          ratingCount,
+          id,
+        }
+      : null
+  } catch {
+    return null
+  }
+}
+
+export function encodeForumCursor(cursor: ThreadCursor): string {
+  return Buffer.from(
+    JSON.stringify({
+      o: cursor.sort,
+      s: cursor.isSticky,
+      t: cursor.lastPostAt.toISOString(),
+      r: cursor.ratingTotal,
+      n: cursor.ratingCount,
+      i: cursor.id,
+    }),
+  ).toString('base64url')
+}

package/src/view/forum-display.ts

@@ -0,0 +1,152 @@
+import type { ForumListingRow } from '@meith/forums'
+import type { Translator } from '@meith/i18n'
+import type {
+  ForumDisplayModel,
+  ForumRowModel,
+  LastPostModel,
+  PaginationModel,
+  SubforumListModel,
+  ThreadRowModel,
+} from '@meith/theme-kit'
+import type { ReadState, ThreadListingRow, ThreadPage } from '@meith/threads'
+
+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'
+
+export function threadHref(row: ThreadListingRow): string {
+  return `/thread/${row.id}-${row.slug}`
+}
+
+function lastPost(
+  post: {
+    readonly postId: number
+    readonly userId: number | null
+    readonly username: string
+    readonly at: Date
+  } | null,
+  thread: ThreadListingRow,
+  now: Date,
+  t: Translator | undefined,
+  identities: ReadonlyMap<number, MemberIdentity> | undefined,
+): LastPostModel | null {
+  if (!post) return null
+  return {
+    threadTitle: thread.title,
+    href: postLink(threadHref(thread), post.postId),
+    author: {
+      userId: post.userId,
+      username: post.username,
+      profileHref: post.userId === null ? null : memberHref(post.userId),
+      nameClass: nameClassOf(identities, post.userId),
+    },
+    at: formatTime(post.at, now, t),
+  }
+}
+
+function forum(
+  row: ForumListingRow,
+  ownThreadsOnlyForumIds: ReadonlySet<number> | undefined,
+  t: Translator | undefined,
+): ForumRowModel {
+  const ownThreadsOnly = ownThreadsOnlyForumIds?.has(row.id) ?? false
+  return {
+    id: row.id,
+    title: row.title,
+    description: row.description,
+    href: forumHref(row),
+    type: row.type,
+    threadCount: count(ownThreadsOnly ? 0 : row.threadCount, t),
+    postCount: count(ownThreadsOnly ? 0 : row.postCount, t),
+    lastPost: null,
+    isUnread: false,
+    subforums: [],
+  }
+}
+
+export function threadRowModel(
+  row: ThreadListingRow,
+  now: Date,
+  readState: Pick<ReadState, 'forumReadAt' | 'threadLastPostId'> | null = null,
+  t?: Translator,
+  identities?: ReadonlyMap<number, MemberIdentity>,
+): ThreadRowModel {
+  const last = row.lastPost
+  const isUnread =
+    last !== null &&
+    readState !== null &&
+    last.postId > (readState.threadLastPostId.get(row.id) ?? 0) &&
+    last.at > (readState.forumReadAt.get(row.forumId) ?? new Date(0))
+  return {
+    id: row.id,
+    title: row.title,
+    href: threadHref(row),
+    prefix: row.prefix,
+    author: {
+      userId: row.authorUserId,
+      username: row.authorUsername,
+      profileHref: row.authorUserId === null ? null : memberHref(row.authorUserId),
+      nameClass: nameClassOf(identities, row.authorUserId),
+    },
+    replyCount: count(row.replyCount, t),
+    viewCount: count(row.viewCount, t),
+    isSticky: row.isSticky,
+    isLocked: row.isLocked,
+    isUnread,
+    isMoved: row.isMoved,
+    lastPost: lastPost(row.lastPost, row, now, t, identities),
+  }
+}
+
+export interface ForumDisplayInput {
+  readonly forum: ForumListingRow
+  readonly subforums: readonly ForumListingRow[]
+  readonly ownThreadsOnlyForumIds?: ReadonlySet<number>
+  readonly page: ThreadPage
+  readonly pageNumber: number
+  readonly nextHref: string | null
+  readonly pagination?: PaginationModel
+  readonly newThreadHref?: string | null
+  readonly readState?: Pick<ReadState, 'forumReadAt' | 'threadLastPostId'> | null
+  readonly markReadAction?: string | null
+  readonly now: Date
+  readonly t?: Translator
+  readonly identities?: ReadonlyMap<number, MemberIdentity>
+}
+
+export interface ForumDisplayView {
+  readonly display: Omit<ForumDisplayModel, 'regions'>
+  readonly subforums: SubforumListModel | null
+  readonly threads: readonly ThreadRowModel[]
+  readonly pagination: PaginationModel
+}
+
+export function buildForumDisplayView(input: ForumDisplayInput): ForumDisplayView {
+  return {
+    display: {
+      forum: forum(input.forum, input.ownThreadsOnlyForumIds, input.t),
+      newThreadHref: input.newThreadHref ?? null,
+      markReadAction: input.markReadAction ?? null,
+    },
+    subforums:
+      input.subforums.length === 0
+        ? null
+        : {
+            forums: input.subforums.map((row) => forum(row, input.ownThreadsOnlyForumIds, input.t)),
+          },
+    threads: input.page.rows.map((row) =>
+      threadRowModel(row, input.now, input.readState ?? null, input.t, input.identities),
+    ),
+    pagination: input.pagination ?? {
+      page: input.pageNumber,
+      pageCount: input.pageNumber,
+      pageCountIsExact: false,
+      pages: [{ page: input.pageNumber, href: '', isCurrent: true }],
+      previousHref: null,
+      nextHref: input.nextHref,
+    },
+  }
+}