@meith/web 0.16.0

package/src/view/shell.ts

@@ -0,0 +1,164 @@
+import type { Actor } from '@meith/authorization'
+import type { Translator } from '@meith/i18n'
+import type {
+  FooterModel,
+  HeaderModel,
+  LinkModel,
+  LogoModel,
+  UserPanelModel,
+  ViewerModel,
+} from '@meith/theme-kit'
+
+import { count } from './count'
+import { memberHref } from './member-profile'
+import { buildNavigation, defaultNavigationItems } from './navigation'
+import { timezoneLabel, untranslated } from './time'
+
+export const BOARD_TITLE = 'Meith'
+
+export const TIMEZONE_LABEL = 'UTC'
+
+export function buildViewerModel(
+  actor: Actor,
+  options: {
+    displayName?: string | null
+    canAccessAdminCp?: boolean
+    canAccessModCp?: boolean
+    avatarUrl?: string | null
+  } = {},
+): ViewerModel {
+  const isGuest = actor.userId === null
+
+  return {
+    isGuest,
+    userId: actor.userId,
+    username: options.displayName ?? null,
+    profileHref: actor.userId === null ? null : memberHref(actor.userId),
+    avatarUrl: options.avatarUrl ?? null,
+    canAccessAdminCp: options.canAccessAdminCp ?? false,
+    canAccessModCp: options.canAccessModCp ?? false,
+  }
+}
+
+export function buildHeaderModel(
+  viewer: ViewerModel,
+  navigation: readonly LinkModel[] = [],
+  boardTitle: string = BOARD_TITLE,
+  logo: LogoModel | null = null,
+): HeaderModel {
+  return {
+    boardTitle,
+    homeHref: '/',
+    viewer,
+    navigation,
+    ...(logo === null ? {} : { logo }),
+  }
+}
+
+export function buildBoardNavigation(
+  viewer: ViewerModel,
+  options: { searchEnabled?: boolean; t?: Translator } = {},
+): readonly LinkModel[] {
+  return buildNavigation(defaultNavigationItems(), viewer, options)
+}
+
+const ACCOUNT_GROUP = 'account'
+
+const STAFF_GROUP = 'staff'
+
+const NOTIFICATIONS_HREF = '/notifications'
+
+const MESSAGES_HREF = '/messages'
+
+export function buildUserPanelModel(
+  viewer: ViewerModel,
+  options: {
+    unreadNotifications?: number
+    unreadMessages?: number
+    registrationOpen?: boolean
+    t?: Translator
+  } = {},
+): UserPanelModel {
+  const t = options.t ?? untranslated()
+
+  const links: readonly LinkModel[] = viewer.isGuest
+    ? [
+        { label: t.t('nav.signIn'), href: '/login' },
+        ...(options.registrationOpen === false
+          ? []
+          : [{ label: t.t('nav.register'), href: '/register' }]),
+      ]
+    : viewer.profileHref === null
+      ? []
+      : [
+          { label: t.t('nav.profile'), href: viewer.profileHref, group: ACCOUNT_GROUP },
+          { label: t.t('nav.userCp'), href: '/usercp', group: ACCOUNT_GROUP },
+          { label: t.t('nav.notifications'), href: NOTIFICATIONS_HREF, group: ACCOUNT_GROUP },
+          { label: t.t('nav.messages'), href: MESSAGES_HREF, group: ACCOUNT_GROUP },
+          { label: t.t('nav.subscriptions'), href: '/subscriptions', group: ACCOUNT_GROUP },
+          ...(viewer.canAccessAdminCp
+            ? [{ label: t.t('nav.adminCp'), href: '/admin', group: STAFF_GROUP }]
+            : []),
+          ...(viewer.canAccessModCp
+            ? [
+                { label: t.t('nav.modCp'), href: '/modcp', group: STAFF_GROUP },
+                { label: t.t('nav.moderationQueue'), href: '/moderation', group: STAFF_GROUP },
+                { label: t.t('nav.reports'), href: '/moderation/reports', group: STAFF_GROUP },
+              ]
+            : []),
+        ]
+
+  return {
+    viewer,
+    links,
+    unreadNotifications: count(options.unreadNotifications ?? 0, t),
+    unreadMessages: count(options.unreadMessages ?? 0, t),
+    ...(viewer.isGuest
+      ? {}
+      : { notificationsHref: NOTIFICATIONS_HREF, messagesHref: MESSAGES_HREF }),
+  }
+}
+
+export type PanelKey = 'usercp' | 'modcp' | 'admincp'
+
+const PANELS: readonly {
+  readonly key: PanelKey
+  readonly messageKey: string
+  readonly href: string
+}[] = [
+  { key: 'usercp', messageKey: 'nav.userCp', href: '/usercp' },
+  { key: 'modcp', messageKey: 'nav.modCp', href: '/modcp' },
+  { key: 'admincp', messageKey: 'nav.adminCp', href: '/admin' },
+]
+
+export function buildPanelLinks(input: {
+  readonly current: PanelKey
+  readonly canAccessModCp?: boolean
+  readonly canAccessAdminCp?: boolean
+  readonly t?: Translator
+}): readonly LinkModel[] {
+  const t = input.t ?? untranslated()
+  const reachable: Record<PanelKey, boolean> = {
+    usercp: true,
+    modcp: input.canAccessModCp === true,
+    admincp: input.canAccessAdminCp === true,
+  }
+
+  return PANELS.filter((panel) => panel.key !== input.current && reachable[panel.key]).map(
+    (panel) => ({ label: t.t(panel.messageKey), href: panel.href }),
+  )
+}
+
+export function buildFooterModel(
+  links: readonly LinkModel[] = [],
+  boardTitle: string = BOARD_TITLE,
+  zone: string = TIMEZONE_LABEL,
+  translator: Translator = untranslated(),
+): FooterModel {
+  return {
+    boardTitle,
+    links,
+    timezoneLabel: timezoneLabel(zone),
+    poweredBy: { label: translator.t('nav.poweredBy'), href: 'https://meith.dev' },
+  }
+}

package/src/view/slug-id.ts

@@ -0,0 +1,12 @@
+export function leadingId(value: string): number | null {
+  const match = /^(\d+)(?:-|$)/.exec(value)
+  if (!match) return null
+  const id = Number(match[1])
+  return Number.isSafeInteger(id) && id > 0 ? id : null
+}
+
+export function numericId(value: string): number | null {
+  if (!/^[1-9]\d*$/.test(value)) return null
+  const id = Number(value)
+  return Number.isSafeInteger(id) ? id : null
+}

package/src/view/sso-hand-off.ts

@@ -0,0 +1,44 @@
+import { localeDirection, type Translator } from '@meith/i18n'
+
+export function escapeHtml(value: string): string {
+  return value
+    .replace(/&/g, '&')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#39;')
+}
+
+export function handOffPage(input: {
+  readonly label: string
+  readonly authorizationUrl: string
+  readonly t: Translator
+}): string {
+  const label = input.label
+  const target = escapeHtml(input.authorizationUrl)
+
+  return [
+    '<!doctype html>',
+    `<html lang="${escapeHtml(input.t.locale)}" dir="${localeDirection(input.t.locale)}">`,
+    '<head>',
+    '<meta charset="utf-8">',
+    '<meta name="viewport" content="width=device-width, initial-scale=1">',
+    '<meta name="robots" content="noindex, nofollow">',
+    `<meta http-equiv="refresh" content="0; url=${target}">`,
+    `<title>${escapeHtml(input.t.t('authSsoHandOff.title', { provider: label }))}</title>`,
+    '<style>',
+    ':root{color-scheme:light dark}',
+    'body{margin:0;min-height:100vh;display:flex;align-items:center;justify-content:center;',
+    'font-family:system-ui,sans-serif;padding:2rem;text-align:center}',
+    '</style>',
+    '</head>',
+    '<body>',
+    '<main>',
+    `<p>${escapeHtml(input.t.t('authSsoHandOff.message', { provider: label }))}</p>`,
+    `<p><a href="${target}">${escapeHtml(input.t.t('authSsoHandOff.continue', { provider: label }))}</a></p>`,
+    '</main>',
+    '</body>',
+    '</html>',
+    '',
+  ].join('\n')
+}

package/src/view/sso-notices.ts

@@ -0,0 +1,48 @@
+import type { ErrorCode } from '@meith/core'
+import type { Translator } from '@meith/i18n'
+
+import { untranslated } from './time'
+
+export type SsoNoticeKind = 'info' | 'warning'
+
+export interface SsoNotice {
+  readonly kind: SsoNoticeKind
+  readonly messageKey: string
+}
+
+export interface SsoNoticeCopy {
+  readonly kind: SsoNoticeKind
+  readonly message: string
+}
+
+const NOTICES: Readonly<Record<string, SsoNotice>> = {
+  linked: { kind: 'info', messageKey: 'sso.linked' },
+  unlinked: { kind: 'info', messageKey: 'sso.unlinked' },
+  approval: { kind: 'info', messageKey: 'sso.approval' },
+  expired: { kind: 'warning', messageKey: 'sso.expired' },
+  refused: { kind: 'warning', messageKey: 'sso.refused' },
+  off: { kind: 'warning', messageKey: 'sso.off' },
+  conflict: { kind: 'warning', messageKey: 'sso.conflict' },
+  forbidden: { kind: 'warning', messageKey: 'sso.forbidden' },
+  invalid: { kind: 'warning', messageKey: 'sso.invalid' },
+  slowdown: { kind: 'warning', messageKey: 'sso.slowdown' },
+  failed: { kind: 'warning', messageKey: 'sso.failed' },
+}
+
+export function ssoNotice(
+  code: string | undefined,
+  t: Translator = untranslated(),
+): SsoNoticeCopy | null {
+  if (code === undefined) return null
+
+  const notice = NOTICES[code] ?? NOTICES.failed
+  return notice === undefined ? null : { kind: notice.kind, message: t.t(notice.messageKey) }
+}
+
+export function ssoOutcomeCode(error: ErrorCode | null): string {
+  if (error === 'CONFLICT') return 'conflict'
+  if (error === 'FORBIDDEN') return 'forbidden'
+  if (error === 'VALIDATION') return 'invalid'
+  if (error === 'RATE_LIMITED') return 'slowdown'
+  return 'failed'
+}

package/src/view/subscriptions.ts

@@ -0,0 +1,76 @@
+import type { Translator } from '@meith/i18n'
+import type { SubscriptionMode, SubscriptionRow } from '@meith/subscriptions'
+import { MODE_LABELS, SUBSCRIPTION_MODES } from '@meith/subscriptions'
+import type { TimeModel } from '@meith/theme-kit'
+
+import { formatTime, untranslated } from './time'
+
+export interface SubscriptionRowView {
+  readonly key: string
+  readonly target: 'thread' | 'forum'
+  readonly targetId: number
+  readonly title: string
+  readonly href: string
+  readonly mode: SubscriptionMode
+  readonly modeLabel: string
+  readonly since: TimeModel
+  readonly pending: string | null
+}
+
+export interface SubscriptionsView {
+  readonly threads: readonly SubscriptionRowView[]
+  readonly forums: readonly SubscriptionRowView[]
+  readonly modes: readonly { readonly value: SubscriptionMode; readonly label: string }[]
+  readonly total: number
+}
+
+export function buildSubscriptionsView(input: {
+  readonly rows: readonly SubscriptionRow[]
+  readonly now: Date
+  readonly t?: Translator
+}): SubscriptionsView {
+  const rows = input.rows.map((row) => toRow(row, input.now, input.t))
+
+  return {
+    threads: rows.filter((row) => row.target === 'thread'),
+    forums: rows.filter((row) => row.target === 'forum'),
+    modes: SUBSCRIPTION_MODES.map((value) => ({ value, label: MODE_LABELS[value] })),
+    total: rows.length,
+  }
+}
+
+function toRow(row: SubscriptionRow, now: Date, t: Translator | undefined): SubscriptionRowView {
+  return {
+    key: `${row.target}:${row.targetId}`,
+    target: row.target,
+    targetId: row.targetId,
+    title: row.title,
+    href: row.href,
+    mode: row.mode,
+    modeLabel: MODE_LABELS[row.mode],
+    since: formatTime(row.createdAt, now, t),
+    pending:
+      row.pending === 0 ? null : `${row.pending} new ${row.pending === 1 ? 'post' : 'posts'}`,
+  }
+}
+
+export function subscriptionNotice(
+  query: {
+    readonly followed?: string | undefined
+    readonly stopped?: string | undefined
+  },
+  t: Translator = untranslated(),
+): string | null {
+  if (query.followed !== undefined) return t.t('subscription.followed')
+  if (query.stopped !== undefined) return t.t('subscription.stopped')
+  return null
+}
+
+export function unsubscribeNotice(
+  done: string | undefined,
+  t: Translator = untranslated(),
+): string | null {
+  if (done === 'email') return t.t('subscription.emailsOff')
+  if (done === 'one') return t.t('subscription.doneOne')
+  return null
+}

package/src/view/theme-draft.ts

@@ -0,0 +1,167 @@
+import type { TokenKind } from './theme-tokens'
+
+export type Scheme = 'light' | 'dark'
+
+export const SCHEMES: readonly Scheme[] = ['light', 'dark']
+
+export type FieldScheme = Scheme | 'both'
+
+export interface EditableToken {
+  readonly name: string
+  readonly label: string
+  readonly hint: string
+  readonly kind: TokenKind
+  readonly light: string
+  readonly dark: string
+  readonly overrideLight: string
+  readonly overrideDark: string
+}
+
+export type Draft = Record<string, string>
+
+export function fieldName(name: string, scheme: FieldScheme): string {
+  return `token.${scheme}.${name}`
+}
+
+export function schemesFor(token: EditableToken): readonly FieldScheme[] {
+  return token.kind === 'colour' ? ['light', 'dark'] : ['both']
+}
+
+export function shippedValue(token: EditableToken, scheme: FieldScheme): string {
+  return scheme === 'dark' ? token.dark : token.light
+}
+
+export function savedValue(token: EditableToken, scheme: FieldScheme): string {
+  return scheme === 'dark' ? token.overrideDark : token.overrideLight
+}
+
+export function draftValue(draft: Draft, token: EditableToken, scheme: FieldScheme): string {
+  return (draft[fieldName(token.name, scheme)] ?? '').trim()
+}
+
+export function initialDraft(
+  tokens: readonly EditableToken[],
+  restored?: Draft | undefined,
+): Draft {
+  const draft: Draft = {}
+  for (const token of tokens) {
+    for (const scheme of schemesFor(token)) {
+      const field = fieldName(token.name, scheme)
+      draft[field] = restored?.[field] ?? savedValue(token, scheme)
+    }
+  }
+  return draft
+}
+
+export function shippedValues(
+  tokens: readonly EditableToken[],
+  scheme: Scheme,
+): Record<string, string> {
+  const values: Record<string, string> = {}
+  for (const token of tokens) values[token.name] = shippedValue(token, scheme)
+  return values
+}
+
+export function savedValues(
+  tokens: readonly EditableToken[],
+  scheme: Scheme,
+): Record<string, string> {
+  const values: Record<string, string> = {}
+  for (const token of tokens) {
+    const field: FieldScheme = token.kind === 'colour' ? scheme : 'both'
+    const saved = savedValue(token, field)
+    values[token.name] = saved === '' ? shippedValue(token, scheme) : saved
+  }
+  return values
+}
+
+export function effectiveValues(
+  tokens: readonly EditableToken[],
+  draft: Draft,
+  scheme: Scheme,
+): Record<string, string> {
+  const values: Record<string, string> = {}
+  for (const token of tokens) {
+    const field: FieldScheme = token.kind === 'colour' ? scheme : 'both'
+    const override = draftValue(draft, token, field)
+    values[token.name] = override === '' ? shippedValue(token, scheme) : override
+  }
+  return values
+}
+
+export function cssVariables(values: Readonly<Record<string, string>>): Record<string, string> {
+  const style: Record<string, string> = {}
+  for (const [name, value] of Object.entries(values)) style[`--${name}`] = value
+  return style
+}
+
+export type ChangeState = 'saved' | 'added' | 'edited' | 'cleared'
+
+export interface TokenChange {
+  readonly token: EditableToken
+  readonly scheme: FieldScheme
+  readonly shipped: string
+  readonly saved: string
+  readonly draft: string
+  readonly state: ChangeState
+  readonly next: string
+  readonly current: string
+}
+
+function stateOf(saved: string, draft: string): ChangeState | null {
+  if (draft === '' && saved === '') return null
+  if (draft === saved) return 'saved'
+  if (draft === '') return 'cleared'
+  return saved === '' ? 'added' : 'edited'
+}
+
+export function tokenChanges(
+  tokens: readonly EditableToken[],
+  draft: Draft,
+): readonly TokenChange[] {
+  const changes: TokenChange[] = []
+
+  for (const token of tokens) {
+    for (const scheme of schemesFor(token)) {
+      const saved = savedValue(token, scheme)
+      const value = draftValue(draft, token, scheme)
+      const state = stateOf(saved, value)
+      if (state === null) continue
+
+      const shipped = shippedValue(token, scheme)
+      changes.push({
+        token,
+        scheme,
+        shipped,
+        saved,
+        draft: value,
+        state,
+        next: value === '' ? shipped : value,
+        current: saved === '' ? shipped : saved,
+      })
+    }
+  }
+
+  return changes
+}
+
+export interface ChangeCounts {
+  readonly overridden: number
+  readonly unsaved: number
+  readonly tokens: number
+}
+
+export function changeCounts(changes: readonly TokenChange[]): ChangeCounts {
+  return {
+    overridden: changes.filter((change) => change.draft !== '').length,
+    unsaved: changes.filter((change) => change.state !== 'saved').length,
+    tokens: new Set(changes.filter((change) => change.draft !== '').map((c) => c.token.name)).size,
+  }
+}
+
+export function matchesQuery(token: EditableToken, query: string): boolean {
+  const needle = query.trim().toLowerCase()
+  if (needle === '') return true
+
+  return [token.name, token.label, token.hint].some((field) => field.toLowerCase().includes(needle))
+}

package/src/view/theme-preference.ts

@@ -0,0 +1,30 @@
+export const THEME_COOKIE = 'meith_theme'
+export const SCHEME_COOKIE = 'meith_scheme'
+
+export const PREFERENCE_COOKIE_MAX_AGE = 60 * 60 * 24 * 365
+
+export const THEME_QUERY = 'theme'
+
+const THEME_KEY = /^[a-z0-9][a-z0-9-]{0,31}$/
+
+export function themeFromQuery(value: string | null | undefined): string | null {
+  if (typeof value !== 'string') return null
+
+  const key = value.trim().toLowerCase()
+  return THEME_KEY.test(key) ? key : null
+}
+
+export const COLOUR_SCHEMES = ['system', 'light', 'dark'] as const
+export type ColourSchemePreference = (typeof COLOUR_SCHEMES)[number]
+
+export function isColourScheme(value: unknown): value is ColourSchemePreference {
+  return COLOUR_SCHEMES.includes(value as ColourSchemePreference)
+}
+
+export function schemeClass(scheme: ColourSchemePreference): string {
+  return scheme === 'system' ? '' : scheme
+}
+
+export function colorSchemeProperty(scheme: ColourSchemePreference): string {
+  return scheme === 'system' ? 'light dark' : scheme
+}