@meith/web 0.16.0

package/src/view/usercp-nav.ts

@@ -0,0 +1,103 @@
+import type { Translator } from '@meith/i18n'
+
+import type { PanelNav, PanelSection } from './panel-nav'
+import {
+  currentProps,
+  deepestHrefIn,
+  flattenNav,
+  isUnder,
+  panelText,
+  sectionHrefIn,
+} from './panel-nav'
+import { untranslated } from './time'
+
+export { currentProps, isUnder }
+
+export const USERCP_OVERVIEW: PanelSection = {
+  href: '/usercp',
+  titleKey: 'userCpNav.usercp.title',
+  icon: 'overview',
+  blurbKey: 'userCpNav.usercp.blurb',
+}
+
+export const USERCP_SECTIONS: PanelNav = [
+  {
+    href: '/messages',
+    titleKey: 'userCpNav.messages.title',
+    icon: 'messages',
+    blurbKey: 'userCpNav.messages.blurb',
+    children: [{ href: '/messages/compose', titleKey: 'userCpNav.messages-compose.title' }],
+  },
+  {
+    href: '/notifications',
+    titleKey: 'userCpNav.notifications.title',
+    icon: 'notifications',
+    blurbKey: 'userCpNav.notifications.blurb',
+    children: [
+      { href: '/notifications/preferences', titleKey: 'userCpNav.notifications-preferences.title' },
+    ],
+  },
+  {
+    href: '/subscriptions',
+    titleKey: 'userCpNav.subscriptions.title',
+    icon: 'subscriptions',
+    blurbKey: 'userCpNav.subscriptions.blurb',
+  },
+  {
+    href: '/usercp/profile',
+    titleKey: 'userCpNav.usercp-profile.title',
+    icon: 'profile',
+    blurbKey: 'userCpNav.usercp-profile.blurb',
+  },
+  {
+    href: '/usercp/avatar',
+    titleKey: 'userCpNav.usercp-avatar.title',
+    icon: 'avatar',
+    blurbKey: 'userCpNav.usercp-avatar.blurb',
+  },
+  {
+    href: '/usercp/signature',
+    titleKey: 'userCpNav.usercp-signature.title',
+    icon: 'signature',
+    blurbKey: 'userCpNav.usercp-signature.blurb',
+  },
+  {
+    href: '/usercp/contacts',
+    titleKey: 'userCpNav.usercp-contacts.title',
+    icon: 'buddies',
+    blurbKey: 'userCpNav.usercp-contacts.blurb',
+  },
+  {
+    href: '/usercp/options',
+    titleKey: 'userCpNav.usercp-options.title',
+    icon: 'settings',
+    blurbKey: 'userCpNav.usercp-options.blurb',
+  },
+  {
+    href: '/usercp/security',
+    titleKey: 'userCpNav.usercp-security.title',
+    icon: 'security',
+    blurbKey: 'userCpNav.usercp-security.blurb',
+  },
+]
+
+export const USERCP_NAV: PanelNav = [USERCP_OVERVIEW, ...USERCP_SECTIONS]
+
+export function activeSectionHref(pathname: string): string | null {
+  return sectionHrefIn(USERCP_NAV, pathname)
+}
+
+export function deepestNavHref(pathname: string): string | null {
+  return deepestHrefIn(USERCP_NAV, pathname)
+}
+
+export function currentPanelItem(
+  pathname: string,
+  t: Translator = untranslated(),
+): { readonly title: string } | null {
+  const deepest = deepestNavHref(pathname)
+  if (deepest === null) return null
+
+  const item = flattenNav(USERCP_NAV).find((entry) => entry.href === deepest)
+  return item === undefined ? null : { title: panelText(t, item) }
+}

package/src/view/usercp.ts

@@ -0,0 +1,196 @@
+import {
+  AUTOMATIC_LOCALE,
+  AUTOMATIC_TIMEZONE,
+  type MemberGroupChoice,
+  type MemberSettings,
+} from '@meith/accounts'
+import { SOURCE_LOCALE, type Translator } from '@meith/i18n'
+import { maxLengthFor, type ResolvedProfileField } from '@meith/profile-fields'
+
+import { untranslated } from './time'
+
+export interface TimezoneChoice {
+  readonly value: string
+  readonly label: string
+}
+
+export const AUTOMATIC_TIMEZONE_KEY = 'usercp.automaticTimezone'
+
+export function timezoneChoices(t: Translator = untranslated()): readonly TimezoneChoice[] {
+  return [
+    { value: AUTOMATIC_TIMEZONE, label: t.t(AUTOMATIC_TIMEZONE_KEY) },
+    ...availableTimezones().map((zone) => ({
+      value: zone,
+      label: zone.replace(/_/g, ' '),
+    })),
+  ]
+}
+
+export const AUTOMATIC_LOCALE_KEY = 'usercp.automaticLocale'
+
+export function localeChoices(
+  supported: readonly string[],
+  t: Translator = untranslated(),
+): readonly TimezoneChoice[] {
+  return [
+    { value: AUTOMATIC_LOCALE, label: t.t(AUTOMATIC_LOCALE_KEY) },
+    ...[...supported]
+      .map((locale) => ({ value: locale, label: localeName(locale) }))
+      .sort((a, b) => a.label.localeCompare(b.label, SOURCE_LOCALE)),
+  ]
+}
+
+export function localeName(locale: string): string {
+  try {
+    const named = new Intl.DisplayNames([locale], { type: 'language' }).of(locale)
+    return named === undefined || named === locale ? locale : `${named} (${locale})`
+  } catch {
+    return locale
+  }
+}
+
+export function availableTimezones(): readonly string[] {
+  const supported = (
+    Intl as typeof Intl & {
+      supportedValuesOf?: (key: string) => string[]
+    }
+  ).supportedValuesOf
+
+  if (typeof supported === 'function') {
+    try {
+      return supported('timeZone')
+    } catch {
+      /* ignore */
+    }
+  }
+
+  return FALLBACK_TIMEZONES
+}
+
+const FALLBACK_TIMEZONES: readonly string[] = [
+  'UTC',
+  'Europe/London',
+  'Europe/Berlin',
+  'Europe/Moscow',
+  'America/New_York',
+  'America/Chicago',
+  'America/Denver',
+  'America/Los_Angeles',
+  'America/Sao_Paulo',
+  'Asia/Kolkata',
+  'Asia/Shanghai',
+  'Asia/Tokyo',
+  'Australia/Sydney',
+  'Pacific/Auckland',
+]
+
+export function profileFormValues(settings: MemberSettings): {
+  location: string
+  website: string
+  bio: string
+} {
+  return {
+    location: settings.location ?? '',
+    website: settings.website ?? '',
+    bio: settings.bio ?? '',
+  }
+}
+
+export interface DisplayGroupChoices {
+  readonly choices: readonly { value: string; label: string }[]
+  readonly selected: string
+}
+
+export function displayGroupChoices(
+  held: readonly MemberGroupChoice[],
+  displayGroupId: number | null,
+): DisplayGroupChoices {
+  if (held.find((group) => group.isPrimary)?.isStaff === true) {
+    return { choices: [], selected: '' }
+  }
+
+  const choices = held.map((group) => ({
+    value: String(group.groupId),
+    label: group.isPrimary ? `${group.title} — your main group` : group.title,
+  }))
+
+  const primary = held.find((group) => group.isPrimary)
+  const fallback = primary === undefined ? '' : String(primary.groupId)
+  const chosen = displayGroupId === null ? null : String(displayGroupId)
+
+  return {
+    choices,
+    selected:
+      chosen !== null && choices.some((choice) => choice.value === chosen) ? chosen : fallback,
+  }
+}
+
+export function optionsFormValues(settings: MemberSettings): {
+  timezone: string
+  locale: string
+  postsPerPage: string
+  threadsPerPage: string
+  invisible: boolean
+} {
+  return {
+    timezone: settings.timezone,
+    locale: settings.locale,
+    postsPerPage: settings.postsPerPage === null ? '' : String(settings.postsPerPage),
+    threadsPerPage: settings.threadsPerPage === null ? '' : String(settings.threadsPerPage),
+    invisible: settings.invisible,
+  }
+}
+
+export function customFieldInputs(resolved: readonly ResolvedProfileField[]): readonly {
+  key: string
+  label: string
+  description: string | null
+  type: string | null
+  options: readonly string[]
+  value: string
+  maxLength: number
+  required: boolean
+}[] {
+  return resolved.map((entry) => ({
+    key: entry.field.key,
+    label: entry.field.label,
+    description: entry.field.description,
+    type: entry.field.type,
+    options: entry.field.options,
+    value: entry.value,
+    maxLength: maxLengthFor(entry.field),
+    required: false,
+  }))
+}
+
+export function userCpNotice(
+  query: {
+    readonly saved?: string | undefined
+    readonly changed?: string | undefined
+    readonly sent?: string | undefined
+    readonly confirmed?: string | undefined
+    readonly failed?: string | undefined
+  },
+  t: Translator = untranslated(),
+): { kind: 'info' | 'warning'; message: string } | null {
+  if (query.saved === 'processing') {
+    return { kind: 'info', message: t.t('usercp.avatarProcessing') }
+  }
+  if (query.saved === 'removed') {
+    return { kind: 'info', message: t.t('usercp.avatarRemoved') }
+  }
+  if (query.saved !== undefined) return { kind: 'info', message: t.t('usercp.saved') }
+  if (query.changed === 'password') {
+    return { kind: 'info', message: t.t('usercp.passwordChanged') }
+  }
+  if (query.sent !== undefined) {
+    return { kind: 'info', message: t.t('usercp.emailConfirmSent') }
+  }
+  if (query.confirmed !== undefined) {
+    return { kind: 'info', message: t.t('usercp.emailChanged') }
+  }
+  if (query.failed !== undefined) {
+    return { kind: 'warning', message: t.t('usercp.linkInvalid') }
+  }
+  return null
+}

package/src/view/warnings.ts

@@ -0,0 +1,128 @@
+import type { Translator } from '@meith/i18n'
+import type { WarningRow, WarningStanding, WarningType } from '@meith/moderation'
+import type { TimeModel } from '@meith/theme-kit'
+
+import { memberHref } from './member-profile'
+import { formatTime, untranslated } from './time'
+
+export interface WarningHistoryRow {
+  readonly id: number
+  readonly title: string
+  readonly points: number
+  readonly reason: string
+  readonly issuedBy: string
+  readonly issuedAt: TimeModel
+  readonly postId: number | null
+  readonly lapsed: string | null
+  readonly revocable: boolean
+}
+
+export interface WarningStandingView {
+  readonly points: number
+  readonly levelLabel: string | null
+  readonly levelPoints: number | null
+}
+
+export interface WarningView {
+  readonly member: { readonly userId: number; readonly username: string; readonly href: string }
+  readonly standing: WarningStandingView
+  readonly types: readonly {
+    readonly id: number
+    readonly label: string
+  }[]
+  readonly history: readonly WarningHistoryRow[]
+  readonly nextHref: string | null
+}
+
+function levelLabel(action: string, t: Translator): string {
+  const key = LEVEL_KEYS[action]
+  return key === undefined ? action : t.t(key)
+}
+
+const LEVEL_KEYS: Readonly<Record<string, string>> = {
+  moderate_posting: 'warning.level.moderate_posting',
+  suspend_posting: 'warning.level.suspend_posting',
+  ban: 'warning.level.ban',
+}
+
+export function buildWarningView(input: {
+  readonly member: { readonly userId: number; readonly username: string }
+  readonly standing: WarningStanding
+  readonly types: readonly WarningType[]
+  readonly history: readonly WarningRow[]
+  readonly nextCursor?: string | undefined
+  readonly now: Date
+  readonly t?: Translator
+}): WarningView {
+  const t = input.t ?? untranslated()
+
+  return {
+    member: {
+      userId: input.member.userId,
+      username: input.member.username,
+      href: memberHref(input.member.userId),
+    },
+    standing: {
+      points: input.standing.points,
+      levelLabel: input.standing.level === null ? null : levelLabel(input.standing.level.action, t),
+      levelPoints: input.standing.level?.points ?? null,
+    },
+    types: input.types.map((type) => ({
+      id: type.id,
+      label: t.t(type.expiryDays === null ? 'warning.type' : 'warning.typeExpiring', {
+        title: type.title,
+        points: type.points,
+        days: type.expiryDays ?? 0,
+      }),
+    })),
+    history: input.history.map((row) => warningRow(row, input.now, input.t)),
+    nextHref:
+      input.nextCursor === undefined
+        ? null
+        : `/moderation/warn?user=${input.member.userId}&after=${encodeURIComponent(input.nextCursor)}`,
+  }
+}
+
+function warningRow(row: WarningRow, now: Date, t: Translator | undefined): WarningHistoryRow {
+  const lapsed =
+    row.revokedAt !== null
+      ? `Revoked by ${row.revokedByUsername ?? 'a moderator'}${
+          row.revokeReason ? ` — ${row.revokeReason}` : ''
+        }`
+      : row.expiresAt !== null && row.expiresAt <= now
+        ? `Expired ${formatTime(row.expiresAt, now, t).label}`
+        : null
+
+  return {
+    id: row.id,
+    title: row.title,
+    points: row.points,
+    reason: row.reason,
+    issuedBy: row.issuedByUsername ?? 'a former moderator',
+    issuedAt: formatTime(row.createdAt, now, t),
+    postId: row.postId,
+    lapsed,
+    revocable: lapsed === null,
+  }
+}
+
+export function warningNotice(
+  query: {
+    readonly warned?: string | undefined
+    readonly level?: string | undefined
+    readonly revoked?: string | undefined
+  },
+  t: Translator = untranslated(),
+): string | null {
+  if (query.warned !== undefined) {
+    const key = query.level === undefined ? undefined : LEVEL_KEYS[query.level]
+    const issued = t.t('warning.issued', { points: query.warned })
+    if (key === undefined) return issued
+    return `${issued} ${t.t('warning.threshold', { level: t.t(key) })}`
+  }
+  if (query.revoked === 'already') return t.t('warning.revokedAlready')
+  if (query.revoked !== undefined) {
+    return t.t('warning.revoked', { points: query.revoked })
+  }
+  return null
+}

package/src/view/word-filter.ts

@@ -0,0 +1,5 @@
+import { applyWordFilter, type CompiledWordFilter } from '@meith/markdown'
+
+export function filterWords(text: string, filter: CompiledWordFilter | undefined): string {
+  return filter === undefined ? text : applyWordFilter(text, filter)
+}