@meith/web 0.16.0

package/src/view/navigation-arrange.ts

@@ -0,0 +1,188 @@
+export const NAVIGATION_NUDGES = ['up', 'down', 'in', 'out'] as const
+
+export type NavigationNudge = (typeof NAVIGATION_NUDGES)[number]
+
+export const NAVIGATION_MAX_DEPTH = 1
+
+export interface NavigationOutlineRow {
+  readonly id: number
+  readonly parentId: number | null
+  readonly depth: number
+}
+
+export interface NavigationDropTarget {
+  readonly parentId: number | null
+  readonly afterId: number | null
+}
+
+export interface NavigationDropProjection extends NavigationDropTarget {
+  readonly index: number
+  readonly depth: number
+}
+
+export function isNavigationNudge(value: string): value is NavigationNudge {
+  return (NAVIGATION_NUDGES as readonly string[]).includes(value)
+}
+
+export function childrenOf<T extends NavigationOutlineRow>(
+  outline: readonly T[],
+  parentId: number | null,
+): T[] {
+  return outline.filter((row) => row.parentId === parentId)
+}
+
+export function hasChildren(outline: readonly NavigationOutlineRow[], id: number): boolean {
+  return outline.some((row) => row.parentId === id)
+}
+
+export function subtreeOf<T extends NavigationOutlineRow>(outline: readonly T[], id: number): T[] {
+  const start = outline.findIndex((row) => row.id === id)
+  if (start === -1) return []
+
+  const root = outline[start] as T
+  let end = start + 1
+  while (end < outline.length && (outline[end] as T).depth > root.depth) end += 1
+
+  return outline.slice(start, end)
+}
+
+export function withoutSubtree<T extends NavigationOutlineRow>(
+  outline: readonly T[],
+  id: number,
+): T[] {
+  const moving = new Set(subtreeOf(outline, id).map((row) => row.id))
+  return outline.filter((row) => !moving.has(row.id))
+}
+
+export function depthAllowedFor(outline: readonly NavigationOutlineRow[], id: number): number {
+  return hasChildren(outline, id) ? 0 : NAVIGATION_MAX_DEPTH
+}
+
+export function nudgeTarget(
+  outline: readonly NavigationOutlineRow[],
+  id: number,
+  nudge: NavigationNudge,
+): NavigationDropTarget | null {
+  const row = outline.find((entry) => entry.id === id)
+  if (row === undefined) return null
+
+  const siblings = childrenOf(outline, row.parentId)
+  const at = siblings.findIndex((entry) => entry.id === id)
+
+  if (nudge === 'up') {
+    if (at <= 0) return null
+    return { parentId: row.parentId, afterId: siblings[at - 2]?.id ?? null }
+  }
+
+  if (nudge === 'down') {
+    const next = siblings[at + 1]
+    if (next === undefined) return null
+    return { parentId: row.parentId, afterId: next.id }
+  }
+
+  if (nudge === 'in') {
+    const previous = siblings[at - 1]
+    if (previous === undefined || previous.depth >= NAVIGATION_MAX_DEPTH) return null
+    if (hasChildren(outline, id)) return null
+    return { parentId: previous.id, afterId: childrenOf(outline, previous.id).at(-1)?.id ?? null }
+  }
+
+  if (row.parentId === null) return null
+  return { parentId: null, afterId: row.parentId }
+}
+
+export function availableNudges(
+  outline: readonly NavigationOutlineRow[],
+  id: number,
+): Record<NavigationNudge, boolean> {
+  return {
+    up: nudgeTarget(outline, id, 'up') !== null,
+    down: nudgeTarget(outline, id, 'down') !== null,
+    in: nudgeTarget(outline, id, 'in') !== null,
+    out: nudgeTarget(outline, id, 'out') !== null,
+  }
+}
+
+export function projectDrop(
+  rows: readonly NavigationOutlineRow[],
+  index: number,
+  depth: number,
+  maxDepth: number = NAVIGATION_MAX_DEPTH,
+): NavigationDropProjection {
+  const at = Math.min(Math.max(index, 0), rows.length)
+  const previous = rows[at - 1]
+  const next = rows[at]
+
+  if (previous === undefined) return { index: at, depth: 0, parentId: null, afterId: null }
+
+  const deepest = Math.min(NAVIGATION_MAX_DEPTH, maxDepth)
+  const shallowest = Math.min(next?.depth ?? 0, deepest)
+  const settled = Math.min(Math.max(depth, shallowest), deepest)
+
+  if (settled > 0) {
+    return previous.depth === 0
+      ? { index: at, depth: settled, parentId: previous.id, afterId: null }
+      : { index: at, depth: settled, parentId: previous.parentId, afterId: previous.id }
+  }
+
+  for (let cursor = at - 1; cursor >= 0; cursor -= 1) {
+    const candidate = rows[cursor] as NavigationOutlineRow
+    if (candidate.depth === 0) return { index: at, depth: 0, parentId: null, afterId: candidate.id }
+  }
+
+  return { index: at, depth: 0, parentId: null, afterId: null }
+}
+
+export function projectionOf(
+  outline: readonly NavigationOutlineRow[],
+  id: number,
+  target: NavigationDropTarget,
+): NavigationDropProjection {
+  const rows = withoutSubtree(outline, id)
+  const parent = rows.find((row) => row.id === target.parentId)
+  const depth = target.parentId === null ? 0 : (parent?.depth ?? 0) + 1
+
+  if (target.afterId === null) {
+    const index = parent === undefined ? 0 : rows.indexOf(parent) + 1
+    return { ...target, index, depth }
+  }
+
+  const after = rows.find((row) => row.id === target.afterId)
+  if (after === undefined) return { ...target, index: rows.length, depth }
+
+  return { ...target, index: rows.indexOf(after) + subtreeOf(rows, after.id).length, depth }
+}
+
+export function applyDrop<T extends NavigationOutlineRow>(
+  outline: readonly T[],
+  id: number,
+  projection: NavigationDropProjection,
+): T[] {
+  const block = subtreeOf(outline, id)
+  if (block.length === 0) return [...outline]
+
+  const rest = withoutSubtree(outline, id)
+  const shift = projection.depth - (block[0] as T).depth
+
+  const moved = block.map((row, offset) => ({
+    ...row,
+    depth: row.depth + shift,
+    ...(offset === 0 ? { parentId: projection.parentId } : {}),
+  }))
+
+  return [...rest.slice(0, projection.index), ...moved, ...rest.slice(projection.index)]
+}
+
+export function isWhereItIs(
+  outline: readonly NavigationOutlineRow[],
+  id: number,
+  target: NavigationDropTarget,
+): boolean {
+  const row = outline.find((entry) => entry.id === id)
+  if (row === undefined || row.parentId !== target.parentId) return false
+
+  const siblings = childrenOf(outline, row.parentId)
+  const at = siblings.findIndex((entry) => entry.id === id)
+
+  return (siblings[at - 1]?.id ?? null) === target.afterId
+}

package/src/view/navigation.ts

@@ -0,0 +1,173 @@
+import type { NavigationAudience, NavigationItemRow } from '@meith/db'
+import type { Translator } from '@meith/i18n'
+import type { LinkModel, ViewerModel } from '@meith/theme-kit'
+
+import { untranslated } from './time'
+
+export type { NavigationAudience }
+
+export const NAVIGATION_AUDIENCE_MESSAGE_KEYS: Readonly<Record<NavigationAudience, string>> = {
+  all: 'adminNavigation.audience.all',
+  guests: 'adminNavigation.audience.guests',
+  members: 'adminNavigation.audience.members',
+  staff: 'adminNavigation.audience.staff',
+}
+
+export const NAVIGATION_AUDIENCE_VALUES = Object.keys(
+  NAVIGATION_AUDIENCE_MESSAGE_KEYS,
+) as readonly NavigationAudience[]
+
+export interface BuiltInNavigationItem {
+  readonly key: string
+  readonly messageKey: string
+  readonly href: string
+  readonly audience: NavigationAudience
+}
+
+export const BUILT_IN_NAVIGATION: readonly BuiltInNavigationItem[] = [
+  { key: 'home', messageKey: 'nav.home', href: '/', audience: 'all' },
+  { key: 'new-posts', messageKey: 'nav.newPosts', href: '/discover/new', audience: 'all' },
+  {
+    key: 'unanswered',
+    messageKey: 'nav.unanswered',
+    href: '/discover/unanswered',
+    audience: 'all',
+  },
+  {
+    key: 'my-posts',
+    messageKey: 'nav.myPosts',
+    href: '/discover/participated',
+    audience: 'members',
+  },
+  { key: 'search', messageKey: 'nav.search', href: '/search', audience: 'all' },
+  { key: 'online', messageKey: 'nav.online', href: '/online', audience: 'all' },
+]
+
+const SEARCH_KEY = 'search'
+
+export type NavigationOutlineItem = NavigationItemRow & { readonly depth: number }
+
+export function builtInNavigation(key: string | null): BuiltInNavigationItem | null {
+  if (key === null) return null
+  return BUILT_IN_NAVIGATION.find((item) => item.key === key) ?? null
+}
+
+export function defaultNavigationItems(): readonly NavigationItemRow[] {
+  return BUILT_IN_NAVIGATION.map((item, index) => ({
+    id: index + 1,
+    key: item.key,
+    parentId: null,
+    label: '',
+    href: item.href,
+    displayOrder: index * 10,
+    audience: item.audience,
+    newTab: false,
+    enabled: true,
+    visibleToGroups: [],
+  }))
+}
+
+/**
+ * What a plugin called an item, for the rows the board holds on its behalf.
+ * Keyed by the same `plugin.<plugin>.<item>` the row carries.
+ */
+export interface NavigationName {
+  readonly label: string
+  readonly labelKey: string | null
+  readonly labelArgs?: Parameters<Translator['t']>[1] | null
+}
+
+export interface NavigationNames {
+  readonly [key: string]: NavigationName
+}
+
+export function navigationLabel(
+  item: Pick<NavigationItemRow, 'key' | 'label'>,
+  t: Translator = untranslated(),
+  names: NavigationNames = {},
+): string {
+  if (item.label.trim() !== '') return item.label
+
+  const builtIn = builtInNavigation(item.key)
+  if (builtIn !== null) return t.t(builtIn.messageKey)
+
+  const named = item.key === null ? undefined : names[item.key]
+  if (named === undefined) return ''
+  if (named.labelKey === null || !t.has(named.labelKey)) return named.label
+  return named.labelArgs === null || named.labelArgs === undefined
+    ? t.t(named.labelKey)
+    : t.t(named.labelKey, named.labelArgs)
+}
+
+function inOrder(rows: readonly NavigationItemRow[]): readonly NavigationItemRow[] {
+  return [...rows].sort((a, b) => a.displayOrder - b.displayOrder || a.id - b.id)
+}
+
+export function outlineOf(rows: readonly NavigationItemRow[]): NavigationOutlineItem[] {
+  const sorted = inOrder(rows)
+  const outline: NavigationOutlineItem[] = []
+
+  for (const top of sorted.filter((row) => row.parentId === null)) {
+    outline.push({ ...top, depth: 0 })
+    for (const child of sorted.filter((row) => row.parentId === top.id)) {
+      outline.push({ ...child, depth: 1 })
+    }
+  }
+
+  return outline
+}
+
+function isStaff(viewer: ViewerModel): boolean {
+  return viewer.canAccessAdminCp || viewer.canAccessModCp
+}
+
+export function audienceAdmits(audience: NavigationAudience, viewer: ViewerModel): boolean {
+  if (audience === 'guests') return viewer.isGuest
+  if (audience === 'members') return !viewer.isGuest
+  if (audience === 'staff') return isStaff(viewer)
+  return true
+}
+
+export interface NavigationOptions {
+  readonly searchEnabled?: boolean
+  readonly t?: Translator
+  readonly admits?: (item: NavigationItemRow) => boolean
+  readonly names?: NavigationNames
+}
+
+export function buildNavigation(
+  items: readonly NavigationItemRow[],
+  viewer: ViewerModel,
+  options: NavigationOptions = {},
+): readonly LinkModel[] {
+  const t = options.t ?? untranslated()
+  const admits = options.admits ?? (() => true)
+  const names = options.names ?? {}
+
+  const shown = (item: NavigationItemRow): boolean =>
+    item.enabled &&
+    !(item.key === SEARCH_KEY && options.searchEnabled === false) &&
+    audienceAdmits(item.audience, viewer) &&
+    admits(item) &&
+    navigationLabel(item, t, names) !== ''
+
+  const linkOf = (item: NavigationItemRow, submenu: readonly LinkModel[]): LinkModel => ({
+    label: navigationLabel(item, t, names),
+    href: item.href,
+    ...(item.newTab ? { newTab: true } : {}),
+    ...(submenu.length === 0 ? {} : { submenu }),
+  })
+
+  const sorted = inOrder(items)
+
+  return sorted
+    .filter((item) => item.parentId === null && shown(item))
+    .map((item) =>
+      linkOf(
+        item,
+        sorted
+          .filter((child) => child.parentId === item.id && shown(child))
+          .map((child) => linkOf(child, [])),
+      ),
+    )
+}

package/src/view/notification-menu.ts

@@ -0,0 +1,202 @@
+import type { Translator } from '@meith/i18n'
+import type { MessageListRow } from '@meith/messages'
+import type { QueueItem, ReportRow } from '@meith/moderation'
+import type { NotificationView } from '@meith/notifications'
+import type { TimeModel } from '@meith/theme-kit'
+
+import { copyFor } from './copy'
+import { formatTime, untranslated } from './time'
+
+export const NOTIFICATION_MENU_PREVIEW = 10
+
+export type NotificationMenuTabKind = 'notifications' | 'messages' | 'mod'
+
+export interface NotificationMenuRow {
+  readonly key: string
+  /** The id a mark-seen form submits, or `null` for a row that is acted on elsewhere. */
+  readonly seenId: number | null
+  readonly subject: string
+  readonly meta: string | null
+  readonly href: string | null
+  readonly at: TimeModel
+  readonly isUnread: boolean
+  /** A short category label shown before the subject, or `null`. */
+  readonly tag: string | null
+}
+
+export interface ModerationSummary {
+  readonly queue: readonly QueueItem[]
+  readonly reports: readonly ReportRow[]
+  readonly pending: number
+  readonly openReports: number
+}
+
+export interface NotificationMenuTab {
+  readonly kind: NotificationMenuTabKind
+  readonly label: string
+  readonly unread: number
+  readonly rows: readonly NotificationMenuRow[]
+  readonly allHref: string
+  readonly emptyLabel: string
+}
+
+export interface NotificationMenuModel {
+  readonly total: number
+  readonly tabs: readonly NotificationMenuTab[]
+}
+
+function notificationRow(row: NotificationView, now: Date, t: Translator): NotificationMenuRow {
+  return {
+    key: `notification-${row.id}`,
+    seenId: row.id,
+    subject: row.subject,
+    meta: row.body === '' ? null : firstLine(row.body),
+    href: row.href,
+    at: formatTime(row.updatedAt, now, t),
+    isUnread: !row.isRead,
+    tag: null,
+  }
+}
+
+function messageRow(row: MessageListRow, now: Date, t: Translator): NotificationMenuRow {
+  const from = row.counterparties[0] ?? null
+  const more = row.moreCounterparties
+  return {
+    key: `message-${row.copyId}`,
+    seenId: row.copyId,
+    subject: row.subject === '' ? t.t('board.notificationMenu.noSubject') : row.subject,
+    meta:
+      from === null
+        ? null
+        : more > 0
+          ? t.t('board.notificationMenu.fromMany', { name: from, count: more })
+          : t.t('board.notificationMenu.from', { name: from }),
+    href: `/messages/${row.messageId}`,
+    at: formatTime(row.sentAt, now, t),
+    isUnread: row.readAt === null && row.role !== 'author',
+    tag: null,
+  }
+}
+
+function queueRow(item: QueueItem, now: Date, t: Translator): NotificationMenuRow {
+  return {
+    key: `queue-${item.kind}-${item.id}`,
+    seenId: null,
+    subject: item.threadTitle,
+    meta: item.forumTitle,
+    href: '/moderation',
+    at: formatTime(item.createdAt, now, t),
+    isUnread: false,
+    tag: t.t('board.notificationMenu.mod.pending'),
+  }
+}
+
+function reportRow(report: ReportRow, now: Date, t: Translator): NotificationMenuRow {
+  return {
+    key: `report-${report.id}`,
+    seenId: null,
+    subject: report.targetLabel,
+    meta: firstLine(report.reason),
+    href: '/moderation/reports',
+    at: formatTime(report.createdAt, now, t),
+    isUnread: false,
+    tag: t.t('board.notificationMenu.mod.report'),
+  }
+}
+
+function firstLine(body: string): string {
+  const line = body.split('\n', 1)[0] ?? ''
+  return line.length > 140 ? `${line.slice(0, 139)}…` : line
+}
+
+export function buildNotificationMenuView(input: {
+  readonly notifications: readonly NotificationView[]
+  readonly notificationsUnread: number
+  readonly messages: readonly MessageListRow[]
+  readonly messagesUnread: number
+  readonly moderation: ModerationSummary | null
+  readonly now: Date
+  readonly t?: Translator
+}): NotificationMenuModel {
+  const t = input.t ?? untranslated()
+
+  const notificationsTab: NotificationMenuTab = {
+    kind: 'notifications',
+    label: t.t('board.notificationMenu.tab.notifications'),
+    unread: input.notificationsUnread,
+    rows: input.notifications
+      .filter((row) => !row.isRead)
+      .slice(0, NOTIFICATION_MENU_PREVIEW)
+      .map((row) => notificationRow(row, input.now, t)),
+    allHref: '/notifications',
+    emptyLabel: t.t('board.notificationMenu.empty.notifications'),
+  }
+
+  const messagesTab: NotificationMenuTab = {
+    kind: 'messages',
+    label: t.t('board.notificationMenu.tab.messages'),
+    unread: input.messagesUnread,
+    rows: input.messages
+      .filter((row) => row.readAt === null && row.role !== 'author')
+      .slice(0, NOTIFICATION_MENU_PREVIEW)
+      .map((row) => messageRow(row, input.now, t)),
+    allHref: '/messages',
+    emptyLabel: t.t('board.notificationMenu.empty.messages'),
+  }
+
+  const tabs: NotificationMenuTab[] = [notificationsTab, messagesTab]
+
+  const moderationUnread =
+    input.moderation === null ? 0 : input.moderation.pending + input.moderation.openReports
+
+  if (input.moderation !== null) {
+    const rows = [
+      ...input.moderation.reports.map((report) => ({
+        at: report.createdAt,
+        row: reportRow(report, input.now, t),
+      })),
+      ...input.moderation.queue.map((item) => ({
+        at: item.createdAt,
+        row: queueRow(item, input.now, t),
+      })),
+    ]
+      .sort((a, b) => b.at.getTime() - a.at.getTime())
+      .slice(0, NOTIFICATION_MENU_PREVIEW)
+      .map((entry) => entry.row)
+
+    tabs.push({
+      kind: 'mod',
+      label: t.t('board.notificationMenu.tab.mod'),
+      unread: moderationUnread,
+      rows,
+      allHref: '/moderation',
+      emptyLabel: t.t('board.notificationMenu.empty.mod'),
+    })
+  }
+
+  return {
+    total: input.notificationsUnread + input.messagesUnread + moderationUnread,
+    tabs,
+  }
+}
+
+export function notificationMenuCopy(
+  t: Translator = untranslated(),
+): Readonly<Record<string, string>> {
+  return copyFor(
+    [
+      'board.notificationMenu.trigger',
+      'board.notificationMenu.heading',
+      'board.notificationMenu.markSeen',
+      'board.notificationMenu.markAllSeen',
+      'board.notificationMenu.viewAll',
+      'board.notificationMenu.close',
+      'board.notificationMenu.unreadNotifications',
+      'board.notificationMenu.unreadMessages',
+      'board.notificationMenu.unreadMod',
+      'board.notificationMenu.totalUnread',
+      'form.working',
+    ],
+    t,
+  )
+}

package/src/view/notifications.ts

@@ -0,0 +1,84 @@
+import type { Translator } from '@meith/i18n'
+import type { NotificationPreferenceView, NotificationView } from '@meith/notifications'
+import type { TimeModel } from '@meith/theme-kit'
+
+import { formatTime, untranslated } from './time'
+
+export interface NotificationRowView {
+  readonly id: number
+  readonly subject: string
+  readonly body: string
+  readonly href: string | null
+  readonly at: TimeModel
+  readonly isRead: boolean
+  readonly repeated: string | null
+}
+
+export interface NotificationCentreView {
+  readonly rows: readonly NotificationRowView[]
+  readonly unread: number
+  readonly nextHref: string | null
+  readonly preferencesHref: string
+}
+
+export function buildNotificationCentreView(input: {
+  readonly rows: readonly NotificationView[]
+  readonly unread: number
+  readonly nextCursor?: string | undefined
+  readonly now: Date
+  readonly t?: Translator
+}): NotificationCentreView {
+  return {
+    rows: input.rows.map((row) => ({
+      id: row.id,
+      subject: row.subject,
+      body: row.body,
+      href: row.href,
+      at: formatTime(row.updatedAt, input.now, input.t),
+      isRead: row.isRead,
+      repeated: row.occurrences > 1 ? `Happened ${row.occurrences} times` : null,
+    })),
+    unread: input.unread,
+    nextHref:
+      input.nextCursor === undefined
+        ? null
+        : `/notifications?after=${encodeURIComponent(input.nextCursor)}`,
+    preferencesHref: '/notifications/preferences',
+  }
+}
+
+export interface PreferencesView {
+  readonly rows: readonly NotificationPreferenceView[]
+  readonly backHref: string
+}
+
+export function buildPreferencesView(
+  rows: readonly NotificationPreferenceView[],
+  translator: Translator = untranslated(),
+): PreferencesView {
+  return {
+    rows: rows.map((row) => ({
+      ...row,
+      title: translated(translator, row.titleKey, row.title),
+      description: translated(translator, row.descriptionKey, row.description),
+    })),
+    backHref: '/notifications',
+  }
+}
+
+function translated(translator: Translator, key: string | undefined, fallback: string): string {
+  return key !== undefined && translator.has(key) ? translator.t(key) : fallback
+}
+
+export function notificationNotice(
+  query: {
+    readonly read?: string | undefined
+    readonly saved?: string | undefined
+  },
+  t: Translator = untranslated(),
+): string | null {
+  if (query.saved !== undefined) return t.t('notice.preferencesSaved')
+  if (query.read === 'all') return t.t('notice.allRead')
+  if (query.read === 'one') return t.t('notice.markedRead')
+  return null
+}

package/src/view/onboarding.ts

@@ -0,0 +1,26 @@
+export type OnboardingPanel = 'welcome' | 'profile' | 'first-post'
+
+const ONBOARDING_COOKIE_PREFIX = 'meith_onboarding_'
+
+export const ONBOARDING_PANELS: readonly OnboardingPanel[] = ['welcome', 'profile', 'first-post']
+
+export const ONBOARDING_COOKIE_MAX_AGE = 60 * 60 * 24 * 365
+
+export function onboardingCookieName(panel: OnboardingPanel): string {
+  return `${ONBOARDING_COOKIE_PREFIX}${panel.replace('-', '_')}`
+}
+
+export function isOnboardingPanel(value: unknown): value is OnboardingPanel {
+  return (ONBOARDING_PANELS as readonly unknown[]).includes(value)
+}
+
+export function isNewMember(postCount: number): boolean {
+  return postCount === 0
+}
+
+export function hasCompleteProfile(profile: {
+  avatarUrl: string | null
+  bio: string | null
+}): boolean {
+  return profile.avatarUrl !== null && profile.bio !== null && profile.bio.trim() !== ''
+}