@meith/web 0.31.0 → 0.32.0

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

@@ -47,6 +47,29 @@ export function apiTokenFormsCopy(
   )
 }
 
+export function webhookFormsCopy(t: Translator = untranslated()): Readonly<Record<string, string>> {
+  return copyFor(
+    [
+      'adminPanel.webhook.copyNow',
+      'adminPanel.webhook.url',
+      'adminPanel.webhook.urlPlaceholder',
+      'adminPanel.webhook.urlHint',
+      'adminPanel.webhook.topics',
+      'adminPanel.webhook.topicsHint',
+      'adminPanel.webhook.format',
+      'adminPanel.webhook.formatHint',
+      'adminPanel.webhook.format.json',
+      'adminPanel.webhook.format.discord',
+      'adminPanel.webhook.active',
+      'adminPanel.webhook.create',
+      'adminPanel.webhook.enable',
+      'adminPanel.webhook.disable',
+      'adminPanel.webhook.delete',
+    ],
+    t,
+  )
+}
+
 export function systemFormsCopy(t: Translator = untranslated()): Readonly<Record<string, string>> {
   return {
     ...copyFor(

package/src/view/attachments.ts

@@ -1,4 +1,8 @@
-import { type AttachmentRecord, attachmentType } from '@meith/attachments/types'
+import {
+  type AttachmentRecord,
+  type AttachmentStatus,
+  attachmentType,
+} from '@meith/attachments/types'
 import type { PostAttachmentModel } from '@meith/theme-kit'
 
 export function formatBytes(bytes: number): string {
@@ -33,6 +37,34 @@ export function attachmentModel(record: AttachmentRecord): PostAttachmentModel |
   }
 }
 
+export interface EditableAttachment {
+  readonly id: number
+  readonly filename: string
+  readonly size: string
+  readonly status: AttachmentStatus
+  readonly isImage: boolean
+  readonly href: string | null
+  readonly thumbnailHref: string | null
+}
+
+export function editableAttachment(record: AttachmentRecord): EditableAttachment {
+  const ready = record.status === 'ready' && record.storageKey !== null
+  const type = attachmentType(record.contentType)
+
+  return {
+    id: record.id,
+    filename: record.filename,
+    size: formatBytes(record.sizeBytes),
+    status: record.status,
+    isImage: ready && type?.inline === true,
+    href: ready ? attachmentHref(record.id) : null,
+    thumbnailHref:
+      ready && type?.inline === true && record.thumbnailKey !== null
+        ? thumbnailHref(record.id)
+        : null,
+  }
+}
+
 export function attachmentsByPost(
   records: readonly AttachmentRecord[],
 ): ReadonlyMap<number, readonly PostAttachmentModel[]> {

package/src/view/board-index.ts

@@ -64,6 +64,26 @@ function toLastPost(
   }
 }
 
+export interface ForumRowHydration {
+  readonly lastPost: LastPostModel | null
+  readonly isUnread: boolean
+}
+
+export function hydrateForumRow(
+  row: ForumListingRow,
+  ownThreadsOnly: boolean,
+  unreadForumIds: ReadonlySet<number> | undefined,
+  now: Date,
+  t: Translator | undefined,
+  identities: ReadonlyMap<number, MemberIdentity> | undefined,
+  wordFilter: CompiledWordFilter | undefined,
+): ForumRowHydration {
+  return {
+    lastPost: ownThreadsOnly ? null : toLastPost(row, now, t, identities, wordFilter),
+    isUnread: !ownThreadsOnly && (unreadForumIds?.has(row.id) ?? false),
+  }
+}
+
 function toForumRow(
   node: ForumNode<ForumListingRow>,
   now: Date,
@@ -74,6 +94,15 @@ function toForumRow(
   wordFilter: CompiledWordFilter | undefined,
 ): ForumRowModel {
   const ownThreadsOnly = ownThreadsOnlyForumIds?.has(node.id) ?? false
+  const hydration = hydrateForumRow(
+    node,
+    ownThreadsOnly,
+    unreadForumIds,
+    now,
+    t,
+    identities,
+    wordFilter,
+  )
 
   return {
     id: node.id,
@@ -83,8 +112,8 @@ function toForumRow(
     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, wordFilter),
-    isUnread: !ownThreadsOnly && (unreadForumIds?.has(node.id) ?? false),
+    lastPost: hydration.lastPost,
+    isUnread: hydration.isUnread,
     subforums: node.children.map(
       (child): LinkModel => ({ label: child.title, href: hrefFor(child) }),
     ),

package/src/view/board-title.ts

@@ -0,0 +1 @@
+export const BOARD_TITLE = 'Meith'

package/src/view/content-copy.ts

@@ -28,18 +28,25 @@ export function replyFormCopy(t: Translator = untranslated()): Readonly<Record<s
 }
 
 export function editPostFormCopy(t: Translator = untranslated()): Readonly<Record<string, string>> {
-  return copyFor(
-    [
-      'composer.edit.reason',
-      'composer.edit.submit',
-      'composer.edit.delete',
-      'composer.edit.deleteBlurb',
-      'composer.edit.restore',
-      'composer.edit.restoreBlurb',
-      'composer.preview',
-    ],
-    t,
-  )
+  return {
+    ...copyFor(
+      [
+        'composer.edit.reason',
+        'composer.edit.submit',
+        'composer.edit.delete',
+        'composer.edit.deleteBlurb',
+        'composer.edit.restore',
+        'composer.edit.restoreBlurb',
+        'composer.edit.attachments',
+        'composer.edit.remove',
+        'composer.edit.attachmentProcessing',
+        'composer.edit.attachmentFailed',
+        'composer.preview',
+      ],
+      t,
+    ),
+    ...patternCopy(['composer.edit.removeAttachment'], t),
+  }
 }
 
 export function newThreadFormCopy(
@@ -63,7 +70,10 @@ export function newThreadFormCopy(
         'composer.newThread.pollChoicesHint',
         'composer.newThread.pollRevote',
         'composer.newThread.pollPublic',
+        'composer.newThread.morePollOptions',
         'composer.newThread.submit',
+        'pollEdit.closesAt',
+        'pollEdit.closesAtHint',
       ],
       t,
     ),

package/src/view/copy.ts

@@ -23,6 +23,10 @@ export function patternCopy(
 const CHROME_KEYS = [
   'form.working',
   'form.notSaved',
+  'confirm.confirm',
+  'confirm.cancel',
+  'confirm.heading',
+  'notice.dismiss',
   'composer.message',
   'composer.tabs',
   'composer.write',
@@ -36,37 +40,48 @@ const CHROME_KEYS = [
   'composer.tool.italic',
   'composer.tool.strikethrough',
   'composer.tool.link',
+  'composer.tool.image',
   'composer.tool.quote',
   'composer.tool.code',
   'composer.tool.bulletedList',
   'composer.tool.numberedList',
+  'composer.tool.taskList',
   'composer.tool.heading',
+  'composer.tool.table',
   'composer.tool.spoiler',
   'composer.tool.attachment',
   'composer.placeholder.bold',
   'composer.placeholder.italic',
   'composer.placeholder.struck',
   'composer.placeholder.spoiler',
+  'composer.placeholder.image',
+  'composer.placeholder.table',
   'composer.help.summary',
   'composer.help.bold',
   'composer.help.italic',
   'composer.help.struck',
   'composer.help.link',
+  'composer.help.image',
   'composer.help.codeInline',
   'composer.help.codeBlock',
   'composer.help.quote',
   'composer.help.list',
+  'composer.help.taskList',
   'composer.help.heading',
+  'composer.help.table',
   'composer.help.note',
   'composer.help.spoiler',
   'composer.help.mention',
   'composer.help.attachment',
   'composer.attachments.label',
+  'composer.attachments.remove',
   'composer.mention.suggestions',
+  'composer.recipient.suggestions',
   'composer.attachment.uploading',
   'composer.thanks.thanked',
   'composer.thanks.thanks',
   'composer.multiquote.button',
+  'composer.multiquote.tooltip',
   'composer.multiquote.addToReply',
   'composer.multiquote.adding',
   'composer.multiquote.clear',
@@ -75,8 +90,10 @@ const CHROME_KEYS = [
 ] as const
 
 const CHROME_PATTERN_KEYS = [
+  'composer.mention.available',
   'composer.toolShortcut',
   'composer.attachments.hint',
+  'composer.attachments.removeChosen',
   'composer.thanks.count',
   'composer.multiquote.selectedToQuote',
   'composer.multiquote.added',

package/src/view/discovery-view.ts

@@ -9,6 +9,7 @@ import { filterWords } from './word-filter'
 export const DISCOVERY_LABELS = {
   new: { labelKey: 'discovery.new.label', blurbKey: 'discovery.new.blurb' },
   today: { labelKey: 'discovery.today.label', blurbKey: 'discovery.today.blurb' },
+  unread: { labelKey: 'discovery.unread.label', blurbKey: 'discovery.unread.blurb' },
   mine: { labelKey: 'discovery.mine.label', blurbKey: 'discovery.mine.blurb' },
   participated: {
     labelKey: 'discovery.participated.label',
@@ -59,7 +60,7 @@ export function buildDiscoveryView(input: {
     rows: input.rows.map((row) => ({
       threadId: row.threadId,
       title: filterWords(row.title, input.wordFilter),
-      href: `/thread/${row.threadId}-${row.slug}`,
+      href: `/thread/${row.threadId}-${row.slug}${input.view === 'unread' ? '?goto=unread' : ''}`,
       forum: { label: row.forumTitle, href: `/${row.forumId}-${row.forumSlug}` },
       authorUsername: row.authorUsername,
       replyCount: count(row.replyCount, input.t),

package/src/view/drafts.ts

@@ -0,0 +1,45 @@
+import type { DraftSummary } from '@meith/drafts'
+import type { Translator } from '@meith/i18n'
+import type { TimeModel } from '@meith/theme-kit'
+
+import { copyFor } from './copy'
+import { formatTime, untranslated } from './time'
+
+export function draftsPageCopy(t: Translator = untranslated()): Readonly<Record<string, string>> {
+  return copyFor(['draftsPage.delete'], t)
+}
+
+export interface DraftRowView {
+  readonly key: string
+  readonly kind: 'thread' | 'reply'
+  readonly kindLabel: string
+  readonly targetName: string
+  readonly resumeHref: string
+  readonly forumId: number
+  readonly threadId: number | null
+  readonly updatedAt: TimeModel
+}
+
+export function buildDraftsView(input: {
+  readonly drafts: readonly DraftSummary[]
+  readonly now: Date
+  readonly t?: Translator
+}): readonly DraftRowView[] {
+  const t = input.t ?? untranslated()
+
+  return input.drafts.map((draft) => {
+    const isReply = draft.threadId !== null
+    return {
+      key: isReply ? `thread:${draft.threadId}` : `forum:${draft.forumId}`,
+      kind: isReply ? 'reply' : 'thread',
+      kindLabel: t.t(isReply ? 'draftsPage.kind.reply' : 'draftsPage.kind.thread'),
+      targetName: isReply ? (draft.threadTitle ?? draft.forumTitle) : draft.forumTitle,
+      resumeHref: isReply
+        ? `/thread/${draft.threadId}-${draft.threadSlug}/reply`
+        : `/${draft.forumId}-${draft.forumSlug}/new`,
+      forumId: draft.forumId,
+      threadId: draft.threadId,
+      updatedAt: formatTime(draft.updatedAt, input.now, t),
+    }
+  })
+}

package/src/view/editor-toolbar.ts

@@ -32,6 +32,12 @@ const TOOLS: readonly ToolSpec[] = [
     placeholderKey: 'composer.placeholder.struck',
   },
   { tag: 'link', key: 'composer.tool.link', shortcut: 'k', placeholderKey: null },
+  {
+    tag: 'image',
+    key: 'composer.tool.image',
+    shortcut: null,
+    placeholderKey: 'composer.placeholder.image',
+  },
   { tag: 'quote', key: 'composer.tool.quote', shortcut: null, placeholderKey: null },
   { tag: 'code', key: 'composer.tool.code', shortcut: null, placeholderKey: null },
   {
@@ -42,13 +48,21 @@ const TOOLS: readonly ToolSpec[] = [
   },
   { tag: 'bulletedList', key: 'composer.tool.bulletedList', shortcut: null, placeholderKey: null },
   { tag: 'numberedList', key: 'composer.tool.numberedList', shortcut: null, placeholderKey: null },
+  { tag: 'taskList', key: 'composer.tool.taskList', shortcut: null, placeholderKey: null },
   { tag: 'heading', key: 'composer.tool.heading', shortcut: null, placeholderKey: null },
+  {
+    tag: 'table',
+    key: 'composer.tool.table',
+    shortcut: null,
+    placeholderKey: 'composer.placeholder.table',
+  },
 ]
 
 function button(spec: ToolSpec, t: Translator): EditorToolbarButtonModel {
   const label = t.t(spec.key)
   return {
     tag: spec.tag,
+    insertion: null,
     label,
     icon: null,
     title:

package/src/view/forum-display.ts

@@ -11,7 +11,7 @@ import type {
 } from '@meith/theme-kit'
 import type { ReadState, ThreadListingRow, ThreadPage } from '@meith/threads'
 
-import { forumHref } from './board-index'
+import { forumHref, hydrateForumRow } from './board-index'
 import { count } from './count'
 import { type MemberIdentity, nameClassOf } from './member-identity'
 import { memberHref } from './member-profile'
@@ -53,9 +53,22 @@ function lastPost(
 function forum(
   row: ForumListingRow,
   ownThreadsOnlyForumIds: ReadonlySet<number> | undefined,
+  unreadForumIds: ReadonlySet<number> | undefined,
+  now: Date,
   t: Translator | undefined,
+  identities: ReadonlyMap<number, MemberIdentity> | undefined,
+  wordFilter: CompiledWordFilter | undefined,
 ): ForumRowModel {
   const ownThreadsOnly = ownThreadsOnlyForumIds?.has(row.id) ?? false
+  const hydration = hydrateForumRow(
+    row,
+    ownThreadsOnly,
+    unreadForumIds,
+    now,
+    t,
+    identities,
+    wordFilter,
+  )
   return {
     id: row.id,
     title: row.title,
@@ -64,8 +77,8 @@ function forum(
     type: row.type,
     threadCount: count(ownThreadsOnly ? 0 : row.threadCount, t),
     postCount: count(ownThreadsOnly ? 0 : row.postCount, t),
-    lastPost: null,
-    isUnread: false,
+    lastPost: hydration.lastPost,
+    isUnread: hydration.isUnread,
     subforums: [],
   }
 }
@@ -87,7 +100,7 @@ export function threadRowModel(
   return {
     id: row.id,
     title: filterWords(row.title, wordFilter),
-    href: threadHref(row),
+    href: isUnread ? `${threadHref(row)}?goto=unread` : threadHref(row),
     prefix: row.prefix,
     author: {
       userId: row.authorUserId,
@@ -115,7 +128,7 @@ export interface ForumDisplayInput {
   readonly nextHref: string | null
   readonly pagination?: PaginationModel
   readonly newThreadHref?: string | null
-  readonly readState?: Pick<ReadState, 'forumReadAt' | 'threadLastPostId'> | null
+  readonly readState?: Pick<ReadState, 'forumReadAt' | 'threadLastPostId' | 'unreadForumIds'> | null
   readonly markReadAction?: string | null
   readonly now: Date
   readonly t?: Translator
@@ -131,9 +144,18 @@ export interface ForumDisplayView {
 }
 
 export function buildForumDisplayView(input: ForumDisplayInput): ForumDisplayView {
+  const unreadForumIds = input.readState?.unreadForumIds
   return {
     display: {
-      forum: forum(input.forum, input.ownThreadsOnlyForumIds, input.t),
+      forum: forum(
+        input.forum,
+        input.ownThreadsOnlyForumIds,
+        unreadForumIds,
+        input.now,
+        input.t,
+        input.identities,
+        input.wordFilter,
+      ),
       newThreadHref: input.newThreadHref ?? null,
       markReadAction: input.markReadAction ?? null,
     },
@@ -141,7 +163,17 @@ export function buildForumDisplayView(input: ForumDisplayInput): ForumDisplayVie
       input.subforums.length === 0
         ? null
         : {
-            forums: input.subforums.map((row) => forum(row, input.ownThreadsOnlyForumIds, input.t)),
+            forums: input.subforums.map((row) =>
+              forum(
+                row,
+                input.ownThreadsOnlyForumIds,
+                unreadForumIds,
+                input.now,
+                input.t,
+                input.identities,
+                input.wordFilter,
+              ),
+            ),
           },
     threads: input.page.rows.map((row) =>
       threadRowModel(

package/src/view/modcp-nav.ts

@@ -1,3 +1,6 @@
+import type { Translator } from '@meith/i18n'
+
+import type { PluginNavSection } from './admin-nav'
 import {
   currentProps,
   deepestHrefIn,
@@ -6,6 +9,7 @@ import {
   type PanelSection,
   sectionHrefIn,
 } from './panel-nav'
+import { untranslated } from './time'
 
 export { currentProps, isUnder }
 
@@ -67,6 +71,34 @@ export function modCpNav(access: ModCpNavAccess): PanelNav {
   return [MODCP_OVERVIEW, ...modCpSections(access)]
 }
 
+export const MODCP_PLUGINS_HREF = '/modcp/plugins'
+
+const MODCP_PLUGIN_KEY_PATTERN = /^\/modcp\/plugins\/([a-z][a-z0-9-]*)(?:\/|$|\?)/
+
+export function pluginKeyAtModCp(pathname: string): string | null {
+  return MODCP_PLUGIN_KEY_PATTERN.exec(pathname)?.[1] ?? null
+}
+
+export function modCpNavWithPlugin(
+  access: ModCpNavAccess,
+  plugin: PluginNavSection | null,
+  t: Translator = untranslated(),
+): PanelNav {
+  const base = modCpNav(access)
+  if (plugin === null || plugin.pages.length === 0) return base
+
+  const href = `${MODCP_PLUGINS_HREF}/${plugin.key}`
+  const section: PanelSection = {
+    href,
+    titleText: plugin.name,
+    icon: 'plugins',
+    blurbText: t.t('modCpNav.plugin.blurb', { name: plugin.name }),
+    children: plugin.pages.filter((page) => page.href !== href),
+  }
+
+  return [...base, section]
+}
+
 export function activeSectionHref(access: ModCpNavAccess, pathname: string): string | null {
   return sectionHrefIn(modCpNav(access), pathname)
 }

package/src/view/moderation-copy.ts

@@ -1,8 +1,23 @@
 import type { Translator } from '@meith/i18n'
+import type { ReportCategory } from '@meith/moderation'
 
 import { copyFor, patternCopy, splitAround } from './copy'
 import { untranslated } from './time'
 
+export const REPORT_CATEGORY_ORDER = [
+  'spam',
+  'off_topic',
+  'abuse',
+  'other',
+] as const satisfies readonly ReportCategory[]
+
+export const REPORT_CATEGORY_LABEL_KEYS: Readonly<Record<ReportCategory, string>> = {
+  spam: 'moderationForm.report.category.spam',
+  off_topic: 'moderationForm.report.category.off_topic',
+  abuse: 'moderationForm.report.category.abuse',
+  other: 'moderationForm.report.category.other',
+}
+
 export function moderationFormsCopy(
   t: Translator = untranslated(),
 ): Readonly<Record<string, string>> {
@@ -15,6 +30,11 @@ export function moderationFormsCopy(
         'moderationForm.report.label',
         'moderationForm.report.hint',
         'moderationForm.report.submit',
+        'moderationForm.report.categoryLegend',
+        'moderationForm.report.category.spam',
+        'moderationForm.report.category.off_topic',
+        'moderationForm.report.category.abuse',
+        'moderationForm.report.category.other',
         'moderationForm.report.putBack',
         'moderationForm.report.take',
         'moderationForm.report.note',

package/src/view/notifications.ts

@@ -78,6 +78,7 @@ export function notificationNotice(
   t: Translator = untranslated(),
 ): string | null {
   if (query.saved === 'announcements') return t.t('notice.announcementsSaved')
+  if (query.saved === 'digest-cadence') return t.t('notice.boardDigestCadenceSaved')
   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')

package/src/view/plugin-panel.ts

@@ -37,6 +37,19 @@ export function pluginPanelTabs(input: {
   ]
 }
 
+export function pluginStaffPanelTabs(input: {
+  readonly pages: readonly PluginPage[]
+  readonly current: string | null
+}): readonly PluginPanelTab[] {
+  if (input.pages.length < 2) return []
+
+  return input.pages.map((page) => ({
+    href: page.href,
+    label: page.title,
+    isCurrent: page.path === input.current,
+  }))
+}
+
 export function pluginNavChildren(pages: readonly PluginPage[]): readonly PanelSubsection[] {
   return pages.map((page) => ({ href: page.href, titleText: page.title }))
 }

package/src/view/poll-vote.ts

@@ -0,0 +1,46 @@
+import { type Poll, pollOptionShares } from '@meith/polls'
+
+export interface PollOptionVoteView {
+  readonly id: number
+  readonly label: string
+  readonly votes: number
+  readonly share: number
+  readonly checked: boolean
+  readonly voterNames: readonly string[]
+  readonly moreVoters: number
+}
+
+export interface PollVoteView {
+  readonly options: readonly PollOptionVoteView[]
+  readonly total: number
+  readonly multiple: boolean
+  readonly closed: boolean
+  readonly hasVoted: boolean
+  readonly mayCast: boolean
+  readonly publicVotes: boolean
+}
+
+export function pollVoteView(poll: Poll, mayVote: boolean, now: Date): PollVoteView {
+  const total = poll.options.reduce((sum, option) => sum + option.votes, 0)
+  const shares = pollOptionShares(poll.options.map((option) => option.votes))
+  const closed = poll.closesAt !== null && poll.closesAt <= now
+  const hasVoted = poll.votedOptionIds.length > 0
+
+  return {
+    total,
+    multiple: poll.maxOptions !== 1,
+    closed,
+    hasVoted,
+    mayCast: mayVote && !closed && (!hasVoted || poll.allowRevote),
+    publicVotes: poll.publicVotes,
+    options: poll.options.map((option, index) => ({
+      id: option.id,
+      label: option.label,
+      votes: option.votes,
+      share: shares[index] ?? 0,
+      checked: poll.votedOptionIds.includes(option.id),
+      voterNames: poll.publicVotes ? option.voters.map((voter) => voter.username) : [],
+      moreVoters: poll.publicVotes ? Math.max(0, option.votes - option.voters.length) : 0,
+    })),
+  }
+}

package/src/view/post-link.ts

@@ -16,7 +16,14 @@ export function locatedHref(
 ): string {
   const params = new URLSearchParams()
   for (const [key, value] of Object.entries(query)) {
-    if (value === undefined || key === 'post' || key === 'after' || key === 'page') continue
+    if (
+      value === undefined ||
+      key === 'post' ||
+      key === 'after' ||
+      key === 'page' ||
+      key === 'goto'
+    )
+      continue
     for (const one of typeof value === 'string' ? [value] : value) params.append(key, one)
   }
   if (location.afterId !== null) {

package/src/view/progressive-enhancement.ts

@@ -0,0 +1,5 @@
+export const PROGRESSIVE_FIELD = 'clientEnhanced'
+
+export function isEnhancedSubmit(form: FormData): boolean {
+  return form.get(PROGRESSIVE_FIELD) === '1'
+}

package/src/view/shell.ts

@@ -9,12 +9,13 @@ import type {
   ViewerModel,
 } from '@meith/theme-kit'
 
+import { BOARD_TITLE } from './board-title'
 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 { BOARD_TITLE }
 
 export const TIMEZONE_LABEL = 'UTC'
 

package/src/view/subscriptions.ts

@@ -80,6 +80,7 @@ export function unsubscribeNotice(
 ): string | null {
   if (done === 'announcements') return t.t('subscription.announcementsOff')
   if (done === 'email') return t.t('subscription.emailsOff')
+  if (done === 'boardDigest') return t.t('subscription.boardDigestOff')
   if (done === 'one') return t.t('subscription.doneOne')
   return null
 }