@meith/web 0.16.0

package/src/view/admin-theme-copy.ts

@@ -0,0 +1,229 @@
+import type { Translator } from '@meith/i18n'
+
+import { copyFor, patternCopy, splitAround } from './copy'
+import { untranslated } from './time'
+
+function splitTwice(
+  t: Translator,
+  key: string,
+  first: string,
+  second: string,
+): readonly [string, string, string] {
+  const rendered = t.t(key, { [first]: '\u0000', [second]: '\u0000' })
+  const [lead = '', mid = '', tail = ''] = rendered.split('\u0000')
+  return [lead, mid, tail]
+}
+
+export function oklchPickerCopy(t: Translator = untranslated()): Readonly<Record<string, string>> {
+  return {
+    ...copyFor(
+      [
+        'adminTheme.oklch.adjustColour',
+        'adminTheme.oklch.hideSliders',
+        'adminTheme.oklch.lightness',
+        'adminTheme.oklch.chroma',
+        'adminTheme.oklch.hue',
+        'adminTheme.oklch.gamut',
+        'adminTheme.oklch.clear',
+      ],
+      t,
+    ),
+    ...patternCopy(['adminTheme.oklch.adjust', 'adminTheme.oklch.hideSlidersFor'], t),
+  }
+}
+
+export function themeStateCopy(t: Translator = untranslated()): Readonly<Record<string, string>> {
+  return {
+    ...copyFor(
+      [
+        'adminTheme.state.makeDefault',
+        'adminTheme.state.turnOn',
+        'adminTheme.state.turnOff',
+        'adminTheme.state.customise',
+      ],
+      t,
+    ),
+    ...patternCopy(
+      [
+        'adminTheme.state.makeDefaultFor',
+        'adminTheme.state.turnOnFor',
+        'adminTheme.state.turnOffFor',
+        'adminTheme.state.customiseFor',
+      ],
+      t,
+    ),
+  }
+}
+
+export function themeAdminCopy(t: Translator = untranslated()): Readonly<Record<string, string>> {
+  const [presetsBlurbLead, presetsBlurbTail] = splitAround(t, 'adminTheme.presets.blurb', 'name')
+  const [cssHintLead, cssHintMid, cssHintTail] = splitTwice(
+    t,
+    'adminTheme.css.hint',
+    'import',
+    'url',
+  )
+  const [cssHintScopedLead, cssHintScopedMid, cssHintScopedTail] = splitTwice(
+    t,
+    'adminTheme.css.hintScoped',
+    'root',
+    'body',
+  )
+  const [cssUnsavedLead, cssUnsavedTail] = splitAround(t, 'adminTheme.changes.cssUnsaved', 'name')
+  const [legibilityBlurbLead, legibilityBlurbMid, legibilityBlurbTail] = splitTwice(
+    t,
+    'adminTheme.legibility.blurb',
+    'colorMix',
+    'var',
+  )
+  const [clickNoteLead, clickNoteTail] = splitAround(t, 'adminTheme.preview.clickNote', 'strong')
+  const [lastPostAdminLead, lastPostAdminTail] = splitAround(
+    t,
+    'adminTheme.sample.lastPostAdmin',
+    'name',
+  )
+  const [lastPostModLead, lastPostModTail] = splitAround(t, 'adminTheme.sample.lastPostMod', 'name')
+  const [breadcrumbLead, breadcrumbTail] = splitAround(t, 'adminTheme.sample.breadcrumb', 'title')
+  const [ownPostLead, ownPostTail] = splitAround(t, 'adminTheme.sample.ownPost', 'link')
+
+  return {
+    ...oklchPickerCopy(t),
+    ...copyFor(
+      [
+        'adminTheme.scheme.both',
+        'adminTheme.scheme.light',
+        'adminTheme.scheme.dark',
+        'adminTheme.token.unsaved',
+        'adminTheme.token.overridden',
+        'adminTheme.token.usingOwn',
+        'adminTheme.useThemesValue',
+        'adminTheme.close',
+        'adminTheme.editor.saved',
+        'adminTheme.presets.title',
+        'adminTheme.find.label',
+        'adminTheme.find.placeholder',
+        'adminTheme.find.nothingOverridden',
+        'adminTheme.css.label',
+        'adminTheme.css.hintDefault',
+        'adminTheme.save',
+        'adminTheme.previewWithoutSaving',
+        'adminTheme.nothingToSave',
+        'adminTheme.validated.title',
+        'adminTheme.validated.blurb',
+        'adminTheme.reset.done',
+        'adminTheme.reset.submit',
+        'adminTheme.import.done',
+        'adminTheme.import.label',
+        'adminTheme.import.hint',
+        'adminTheme.import.submit',
+        'adminTheme.changes.title',
+        'adminTheme.changes.discardAll',
+        'adminTheme.changes.live',
+        'adminTheme.changes.unsavedCleared',
+        'adminTheme.changes.nothingOverridden',
+        'adminTheme.changes.ofWhich',
+        'adminTheme.changes.stillPainting',
+        'adminTheme.changes.allSaved',
+        'adminTheme.changes.undoToTheme',
+        'adminTheme.changes.undoToSaved',
+        'adminTheme.legibility.title',
+        'adminTheme.legibility.notMeasurable',
+        'adminTheme.legibility.allPass',
+        'adminTheme.legibility.on',
+        'adminTheme.legibility.alreadyLike',
+        'adminTheme.palette.changed',
+        'adminTheme.palette.unsaved',
+        'adminTheme.preview.title',
+        'adminTheme.preview.blurb',
+        'adminTheme.preview.clickNoteStrong',
+        'adminTheme.preview.sceneGroup',
+        'adminTheme.preview.scene.forums.title',
+        'adminTheme.preview.scene.forums.blurb',
+        'adminTheme.preview.scene.thread.title',
+        'adminTheme.preview.scene.thread.blurb',
+        'adminTheme.preview.scene.controls.title',
+        'adminTheme.preview.scene.controls.blurb',
+        'adminTheme.sample.boardName',
+        'adminTheme.sample.signedInAs',
+        'adminTheme.sample.category',
+        'adminTheme.sample.announcements',
+        'adminTheme.sample.introductions',
+        'adminTheme.sample.archive',
+        'adminTheme.sample.closedToNewPosts',
+        'adminTheme.sample.pinnedThread',
+        'adminTheme.sample.lockedThread',
+        'adminTheme.sample.movedThread',
+        'adminTheme.sample.threadTitle',
+        'adminTheme.sample.pinned',
+        'adminTheme.sample.awaitingApproval',
+        'adminTheme.sample.supermodMeta',
+        'adminTheme.sample.permalinkNote',
+        'adminTheme.sample.adminMeta',
+        'adminTheme.sample.ordinaryLink',
+        'adminTheme.sample.bannedMeta',
+        'adminTheme.sample.heldPost',
+        'adminTheme.sample.postReply',
+        'adminTheme.sample.hovered',
+        'adminTheme.sample.previewButton',
+        'adminTheme.sample.delete',
+        'adminTheme.sample.threadTitleLabel',
+        'adminTheme.sample.fieldNote',
+        'adminTheme.sample.hoveredRow',
+        'adminTheme.sample.moderationQueue',
+        'adminTheme.sample.queueWaiting',
+        'adminTheme.sample.queueApproved',
+        'adminTheme.sample.queueRejected',
+        'adminTheme.sample.queueDeleted',
+      ],
+      t,
+    ),
+    ...patternCopy(
+      [
+        'adminTheme.contrast.failIntro',
+        'adminTheme.contrast.okIntro',
+        'adminTheme.contrast.needs',
+        'adminTheme.token.describes',
+        'adminTheme.token.themesOwn',
+        'adminTheme.token.replaces',
+        'adminTheme.find.changedOnly',
+        'adminTheme.find.shownCount',
+        'adminTheme.group.changedCount',
+        'adminTheme.group.tokenCount',
+        'adminTheme.saveChanges',
+        'adminTheme.unsavedChanges',
+        'adminTheme.changes.valueCount',
+        'adminTheme.changes.overriddenAcross',
+        'adminTheme.changes.notSavedYet',
+        'adminTheme.legibility.ratioNeeds',
+        'adminTheme.legibility.passCount',
+        'adminTheme.legibility.unknownCount',
+        'adminTheme.legibility.everyPairIn',
+        'adminTheme.sample.threadCount',
+      ],
+      t,
+    ),
+    'adminTheme.presets.blurbLead': presetsBlurbLead,
+    'adminTheme.presets.blurbTail': presetsBlurbTail,
+    'adminTheme.css.hintLead': cssHintLead,
+    'adminTheme.css.hintMid': cssHintMid,
+    'adminTheme.css.hintTail': cssHintTail,
+    'adminTheme.css.hintScopedLead': cssHintScopedLead,
+    'adminTheme.css.hintScopedMid': cssHintScopedMid,
+    'adminTheme.css.hintScopedTail': cssHintScopedTail,
+    'adminTheme.changes.cssUnsavedLead': cssUnsavedLead,
+    'adminTheme.changes.cssUnsavedTail': cssUnsavedTail,
+    'adminTheme.legibility.blurbLead': legibilityBlurbLead,
+    'adminTheme.legibility.blurbMid': legibilityBlurbMid,
+    'adminTheme.legibility.blurbTail': legibilityBlurbTail,
+    'adminTheme.preview.clickNoteLead': clickNoteLead,
+    'adminTheme.preview.clickNoteTail': clickNoteTail,
+    'adminTheme.sample.lastPostAdminLead': lastPostAdminLead,
+    'adminTheme.sample.lastPostAdminTail': lastPostAdminTail,
+    'adminTheme.sample.lastPostModLead': lastPostModLead,
+    'adminTheme.sample.lastPostModTail': lastPostModTail,
+    'adminTheme.sample.breadcrumbLead': breadcrumbLead,
+    'adminTheme.sample.breadcrumbTail': breadcrumbTail,
+    'adminTheme.sample.ownPostLead': ownPostLead,
+    'adminTheme.sample.ownPostTail': ownPostTail,
+  }
+}

package/src/view/admin-user-copy.ts

@@ -0,0 +1,96 @@
+import type { Translator } from '@meith/i18n'
+
+import { adminSharedCopy } from './admin-copy'
+import { copyFor, patternCopy } from './copy'
+import { untranslated } from './time'
+
+export function userAdminCopy(t: Translator = untranslated()): Readonly<Record<string, string>> {
+  return {
+    ...adminSharedCopy(t),
+    ...copyFor(
+      [
+        'adminUser.username',
+        'adminUser.email',
+        'adminUser.emailHint',
+        'adminUser.primaryGroup',
+        'adminUser.primaryGroupHint',
+        'adminUser.displayGroup',
+        'adminUser.sameAsPrimary',
+        'adminUser.displayGroupHint',
+        'adminUser.saveAccount',
+        'adminUser.accountState',
+        'adminUser.state.active',
+        'adminUser.state.awaitingActivation',
+        'adminUser.accountStateHint',
+        'adminUser.saveState',
+        'adminUser.banned',
+        'adminUser.banLength',
+        'adminUser.banLengthHint',
+        'adminUser.staffNote',
+        'adminUser.staffNoteHint',
+        'adminUser.publicReason',
+        'adminUser.publicReasonHint',
+        'adminUser.banMember',
+        'adminUser.secondFactor',
+        'adminUser.secondFactorHeld',
+        'adminUser.secondFactorNotHeld',
+        'adminUser.secondFactorCleared',
+        'adminUser.secondFactorNote',
+        'adminUser.clearSecondFactor',
+        'adminUser.banPasswordNote',
+        'adminUser.additionalGroupsSr',
+        'adminUser.saveGroups',
+        'adminUser.moveNextBatch',
+        'adminUser.lifted',
+        'adminUser.liftBan',
+        'adminUser.prunePasswordNote',
+        'adminUser.sendTo',
+        'adminUser.sendToHint',
+        'adminUser.subject',
+        'adminUser.message',
+        'adminUser.messageHint',
+        'adminUser.queueMessage',
+        'adminUser.mailPasswordNote',
+        'adminUser.queueNextBatch',
+      ],
+      t,
+    ),
+    ...patternCopy(
+      [
+        'adminUser.primaryGroupRow',
+        'adminUser.merged',
+        'adminUser.mergeMore',
+        'adminUser.mergeInto',
+        'adminUser.mergeNote',
+        'adminUser.pruneFinished',
+        'adminUser.pruneMore',
+        'adminUser.mailQueuedAll',
+        'adminUser.mailQueuedMore',
+      ],
+      t,
+    ),
+  }
+}
+
+export function userPruneCopy(
+  total: number,
+  t: Translator = untranslated(),
+): Readonly<Record<string, string>> {
+  return {
+    ...userAdminCopy(t),
+    'adminUser.pruneClose':
+      total > 500
+        ? t.t('adminUser.pruneCloseFirst500')
+        : t.t('adminUser.pruneCloseCount', { count: total }),
+  }
+}
+
+export function userMassMailCopy(
+  audience: number,
+  t: Translator = untranslated(),
+): Readonly<Record<string, string>> {
+  return {
+    ...userAdminCopy(t),
+    'adminUser.everyMember': t.t('adminUser.everyMember', { audience }),
+  }
+}

package/src/view/attachments.ts

@@ -0,0 +1,51 @@
+import { type AttachmentRecord, attachmentType } from '@meith/attachments/types'
+import type { PostAttachmentModel } from '@meith/theme-kit'
+
+export function formatBytes(bytes: number): string {
+  if (bytes >= 1024 * 1024) return `${Math.round((bytes / (1024 * 1024)) * 10) / 10} MB`
+  if (bytes >= 1024) return `${Math.round(bytes / 1024)} KB`
+  return `${bytes} bytes`
+}
+
+export function attachmentHref(id: number): string {
+  return `/attachment/${id}`
+}
+
+export function thumbnailHref(id: number): string {
+  return `/attachment/${id}/thumb`
+}
+
+export function attachmentModel(record: AttachmentRecord): PostAttachmentModel | null {
+  if (record.status !== 'ready' || record.storageKey === null) return null
+
+  const type = attachmentType(record.contentType)
+  if (type === undefined) return null
+
+  return {
+    id: record.id,
+    filename: record.filename,
+    size: formatBytes(record.sizeBytes),
+    isImage: type.inline,
+    href: attachmentHref(record.id),
+    thumbnailHref: type.inline && record.thumbnailKey !== null ? thumbnailHref(record.id) : null,
+    width: record.width,
+    height: record.height,
+  }
+}
+
+export function attachmentsByPost(
+  records: readonly AttachmentRecord[],
+): ReadonlyMap<number, readonly PostAttachmentModel[]> {
+  const byPost = new Map<number, PostAttachmentModel[]>()
+
+  for (const record of records) {
+    if (record.postId === null) continue
+    const model = attachmentModel(record)
+    if (model === null) continue
+    const list = byPost.get(record.postId)
+    if (list === undefined) byPost.set(record.postId, [model])
+    else list.push(model)
+  }
+
+  return byPost
+}

package/src/view/auth-copy.ts

@@ -0,0 +1,147 @@
+import type { Translator } from '@meith/i18n'
+
+import { copyFor, splitAround } from './copy'
+import { untranslated } from './time'
+
+export function loginFormCopy(t: Translator = untranslated()): Readonly<Record<string, string>> {
+  return copyFor(
+    [
+      'authForm.login.identifier',
+      'authForm.login.password',
+      'authForm.login.remember',
+      'authForm.login.submit',
+    ],
+    t,
+  )
+}
+
+export interface RegistrationLimits {
+  readonly minPasswordLength: number
+  readonly usernameMin: number
+  readonly usernameMax: number
+}
+
+export function registerFormCopy(
+  limits: RegistrationLimits,
+  t: Translator = untranslated(),
+): Readonly<Record<string, string>> {
+  const [termsLead, termsTail] = splitAround(t, 'authForm.register.terms', 'policy')
+  return {
+    ...copyFor(
+      [
+        'authForm.register.username',
+        'authForm.email',
+        'authForm.register.password',
+        'authForm.register.honeypot',
+        'authForm.register.challengeHint',
+        'authForm.register.submit',
+      ],
+      t,
+    ),
+    'authForm.register.usernameHint': t.t('authForm.register.usernameHint', {
+      min: limits.usernameMin,
+      max: limits.usernameMax,
+    }),
+    'authForm.passwordHint': t.t('authForm.passwordHint', { min: limits.minPasswordLength }),
+    'authForm.register.termsLead': termsLead,
+    'authForm.register.termsTail': termsTail,
+  }
+}
+
+export function resetRequestFormCopy(
+  t: Translator = untranslated(),
+): Readonly<Record<string, string>> {
+  return copyFor(['authForm.reset.continue', 'authForm.email', 'authForm.reset.submit'], t)
+}
+
+export function resetConfirmFormCopy(
+  minLength: number,
+  t: Translator = untranslated(),
+): Readonly<Record<string, string>> {
+  return {
+    ...copyFor(
+      [
+        'authForm.resetConfirm.password',
+        'authForm.resetConfirm.confirm',
+        'authForm.resetConfirm.submit',
+      ],
+      t,
+    ),
+    'authForm.passwordHint': t.t('authForm.passwordHint', { min: minLength }),
+  }
+}
+
+export function resendVerificationFormCopy(
+  t: Translator = untranslated(),
+): Readonly<Record<string, string>> {
+  return copyFor(['authForm.email', 'authForm.resend.submit'], t)
+}
+
+export function secondFactorFormCopy(
+  t: Translator = untranslated(),
+): Readonly<Record<string, string>> {
+  return copyFor(
+    [
+      'authForm.secondFactor.code',
+      'authForm.secondFactor.recoveryHint',
+      'authForm.secondFactor.recoveryHintExhausted',
+      'authForm.secondFactor.submit',
+      'authForm.secondFactor.cancel',
+    ],
+    t,
+  )
+}
+
+export function passkeyCopy(t: Translator = untranslated()): Readonly<Record<string, string>> {
+  return copyFor(
+    [
+      'authForm.or',
+      'authForm.passkey.waiting',
+      'authForm.passkey.signIn',
+      'authForm.passkey.confirm',
+      'authForm.passkey.cancelled',
+      'authForm.passkey.failed',
+      'authForm.passkey.noneCreated',
+      'authForm.passkey.noneOffered',
+    ],
+    t,
+  )
+}
+
+export function passkeyEnrolCopy(
+  limit: number,
+  t: Translator = untranslated(),
+): Readonly<Record<string, string>> {
+  return {
+    ...passkeyCopy(t),
+    ...copyFor(
+      [
+        'accountForm.passkey.unsupported',
+        'accountForm.passkey.label',
+        'accountForm.passkey.placeholder',
+        'accountForm.passkey.submit',
+      ],
+      t,
+    ),
+    'accountForm.passkey.hint': t.t('accountForm.passkey.hint', { limit }),
+  }
+}
+
+export interface SsoButtonModel {
+  readonly id: string
+  readonly cta: string
+}
+
+export function ssoButtonModels(
+  providers: ReadonlyArray<{ readonly id: string; readonly label: string }>,
+  t: Translator = untranslated(),
+): readonly SsoButtonModel[] {
+  return providers.map((provider) => ({
+    id: provider.id,
+    cta: t.t('authForm.sso.continue', { provider: provider.label }),
+  }))
+}
+
+export function ssoButtonsCopy(t: Translator = untranslated()): Readonly<Record<string, string>> {
+  return copyFor(['authForm.sso.lede', 'authForm.or'], t)
+}

package/src/view/board-index.ts

@@ -0,0 +1,167 @@
+import { buildTree, type ForumListingRow, type ForumNode, keepVisibleSubtrees } from '@meith/forums'
+import type { Translator } from '@meith/i18n'
+import type {
+  BoardIndexModel,
+  CategoryBlockModel,
+  ForumRowModel,
+  LastPostModel,
+  LinkModel,
+} from '@meith/theme-kit'
+
+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 interface BoardIndexInput {
+  readonly rows: readonly ForumListingRow[]
+  readonly visibleForumIds: ReadonlySet<number>
+  readonly ownThreadsOnlyForumIds?: ReadonlySet<number>
+  readonly unreadForumIds?: ReadonlySet<number>
+  readonly markAllReadAction?: string | null
+  readonly now: Date
+  readonly t?: Translator
+  readonly identities?: ReadonlyMap<number, MemberIdentity>
+}
+
+export function forumHref(row: { id: number; slug: string }): string {
+  return `/${row.id}-${row.slug}`
+}
+
+function hrefFor(row: ForumListingRow): string {
+  if (row.type === 'link' && row.linkUrl !== null) return row.linkUrl
+  return forumHref(row)
+}
+
+function threadHref(threadId: number, postId: number): string {
+  return postLink(`/thread/${threadId}`, postId)
+}
+
+function toLastPost(
+  row: ForumListingRow,
+  now: Date,
+  t: Translator | undefined,
+  identities: ReadonlyMap<number, MemberIdentity> | undefined,
+): LastPostModel | null {
+  const last = row.lastPost
+  if (last === null) return null
+
+  return {
+    threadTitle: last.threadTitle,
+    href: threadHref(last.threadId, last.postId),
+    author: {
+      userId: last.userId,
+      username: last.username,
+      profileHref: last.userId === null ? null : memberHref(last.userId),
+      nameClass: nameClassOf(identities, last.userId),
+    },
+    at: formatTime(last.at, now, t),
+  }
+}
+
+function toForumRow(
+  node: ForumNode<ForumListingRow>,
+  now: Date,
+  t: Translator | undefined,
+  unreadForumIds: ReadonlySet<number> | undefined,
+  identities: ReadonlyMap<number, MemberIdentity> | undefined,
+  ownThreadsOnlyForumIds: ReadonlySet<number> | undefined,
+): ForumRowModel {
+  const ownThreadsOnly = ownThreadsOnlyForumIds?.has(node.id) ?? false
+
+  return {
+    id: node.id,
+    title: node.title,
+    description: node.description,
+    href: hrefFor(node),
+    type: node.type,
+    threadCount: count(ownThreadsOnly ? 0 : node.threadCount, t),
+    postCount: count(ownThreadsOnly ? 0 : node.postCount, t),
+    lastPost: ownThreadsOnly ? null : toLastPost(node, now, t, identities),
+    isUnread: !ownThreadsOnly && (unreadForumIds?.has(node.id) ?? false),
+    subforums: node.children.map(
+      (child): LinkModel => ({ label: child.title, href: hrefFor(child) }),
+    ),
+  }
+}
+
+export interface BoardIndexBlock {
+  readonly block: CategoryBlockModel
+  readonly forums: readonly ForumRowModel[]
+}
+
+export interface BoardIndexView {
+  readonly index: Omit<BoardIndexModel, 'regions'>
+  readonly blocks: readonly BoardIndexBlock[]
+}
+
+export interface SectionInput extends BoardIndexInput {
+  readonly categoryId: number
+}
+
+function findNode(
+  nodes: readonly ForumNode<ForumListingRow>[],
+  id: number,
+): ForumNode<ForumListingRow> | null {
+  for (const node of nodes) {
+    if (node.id === id) return node
+    const found = findNode(node.children, id)
+    if (found !== null) return found
+  }
+  return null
+}
+
+export function buildSectionView(input: SectionInput): BoardIndexBlock | null {
+  const tree = buildTree(
+    keepVisibleSubtrees(input.rows, (row) => input.visibleForumIds.has(row.id)),
+  )
+  const node = findNode(tree, input.categoryId)
+  if (node === null) return null
+
+  const row = (candidate: ForumNode<ForumListingRow>): ForumRowModel =>
+    toForumRow(
+      candidate,
+      input.now,
+      input.t,
+      input.unreadForumIds,
+      input.identities,
+      input.ownThreadsOnlyForumIds,
+    )
+
+  return { block: { category: row(node) }, forums: node.children.map(row) }
+}
+
+export function buildBoardIndexView(input: BoardIndexInput): BoardIndexView {
+  const tree = buildTree(
+    keepVisibleSubtrees(input.rows, (row) => input.visibleForumIds.has(row.id)),
+  )
+
+  return {
+    index: {
+      markAllReadAction: input.markAllReadAction ?? null,
+    },
+    blocks: tree.map((node) => ({
+      block: {
+        category: toForumRow(
+          node,
+          input.now,
+          input.t,
+          input.unreadForumIds,
+          input.identities,
+          input.ownThreadsOnlyForumIds,
+        ),
+      },
+      forums: node.children.map((child) =>
+        toForumRow(
+          child,
+          input.now,
+          input.t,
+          input.unreadForumIds,
+          input.identities,
+          input.ownThreadsOnlyForumIds,
+        ),
+      ),
+    })),
+  }
+}