@meith/web 0.31.0 → 0.33.0

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
 }

package/src/view/thread-view.ts

@@ -2,12 +2,14 @@ import type { ForumRow } from '@meith/forums'
 import type { Translator } from '@meith/i18n'
 import { type BoardVocabulary, type CompiledWordFilter, postBodyHtml } from '@meith/markdown'
 import { editedNote, type PostListingRow, type PostPage } from '@meith/posts'
-import { suppress } from '@meith/relations'
+import { isOnline, suppress } from '@meith/relations'
+import type { SubscriptionMode } from '@meith/subscriptions'
 import type {
   PaginationModel,
   PostAttachmentModel,
   PostBitModel,
   ThreadViewModel,
+  ThreadWatchModel,
 } from '@meith/theme-kit'
 import type { ThreadListingRow } from '@meith/threads'
 
@@ -58,6 +60,11 @@ function withinEditWindow(
   return elapsed <= capabilities.editWindowMinutes
 }
 
+export interface AuthorPresence {
+  readonly lastActiveAt: Date | null
+  readonly invisible: boolean
+}
+
 interface PostContext {
   readonly now: Date
   readonly replyHref: string | null
@@ -67,6 +74,8 @@ interface PostContext {
   readonly signatures: ReadonlyMap<number, string>
   readonly avatars: ReadonlyMap<number, string>
   readonly identities: ReadonlyMap<number, MemberIdentity>
+  readonly presence: ReadonlyMap<number, AuthorPresence>
+  readonly viewerSeesInvisible: boolean
   readonly ignoredIds: ReadonlySet<number>
   readonly revealedPostIds: ReadonlySet<number>
   readonly revealHref: (postId: number, number: number) => string
@@ -92,6 +101,12 @@ function post(post: PostListingRow, thread: ThreadListingRow, context: PostConte
   const identity =
     post.authorUserId === null ? undefined : context.identities.get(post.authorUserId)
 
+  const presence = post.authorUserId === null ? undefined : context.presence.get(post.authorUserId)
+  const authorIsOnline =
+    presence !== undefined &&
+    (!presence.invisible || context.viewerSeesInvisible) &&
+    isOnline(presence.lastActiveAt, now)
+
   const mayEdit =
     post.visibility !== 'deleted' &&
     (isOwn
@@ -123,7 +138,7 @@ function post(post: PostListingRow, thread: ThreadListingRow, context: PostConte
       joinedAt: post.authorJoinedAt === null ? null : formatDate(post.authorJoinedAt, t),
       signatureHtml:
         hidden || post.authorUserId === null ? null : (signatures.get(post.authorUserId) ?? null),
-      isOnline: false,
+      isOnline: authorIsOnline,
       fields: hidden || post.authorUserId === null ? [] : (fields.get(post.authorUserId) ?? []),
     },
     bodyHtml: hidden
@@ -191,6 +206,8 @@ export interface ThreadViewInput {
   readonly pagination?: PaginationModel
   readonly nextHref: string | null
   readonly markReadAction?: string | null
+  readonly watchOffered?: boolean
+  readonly watchMode?: SubscriptionMode | null
   readonly replyHref?: string | null
   readonly capabilities?: PostCapabilities
   readonly now: Date
@@ -199,6 +216,8 @@ export interface ThreadViewInput {
   readonly signatures?: ReadonlyMap<number, string>
   readonly avatars?: ReadonlyMap<number, string>
   readonly identities?: ReadonlyMap<number, MemberIdentity>
+  readonly presence?: ReadonlyMap<number, AuthorPresence>
+  readonly viewerSeesInvisible?: boolean
   readonly attachments?: ReadonlyMap<number, readonly PostAttachmentModel[]>
   readonly ignoredIds?: ReadonlySet<number>
   readonly revealedPostIds?: ReadonlySet<number>
@@ -212,6 +231,7 @@ const EMPTY_SIGNATURES: ReadonlyMap<number, string> = new Map()
 const EMPTY_ATTACHMENTS: ReadonlyMap<number, readonly PostAttachmentModel[]> = new Map()
 const EMPTY_AVATARS: ReadonlyMap<number, string> = new Map()
 const EMPTY_IDENTITIES: ReadonlyMap<number, MemberIdentity> = new Map()
+const EMPTY_PRESENCE: ReadonlyMap<number, AuthorPresence> = new Map()
 
 export function revealHref(currentHref: string, postId: number, number: number): string {
   const [path = '', hash] = currentHref.split('#')
@@ -227,6 +247,18 @@ export function threadToolsHeading(
   return t.t(isForumModerator ? 'thread.moderatorTools' : 'thread.threadTools')
 }
 
+export function threadWatch(input: {
+  readonly offered: boolean
+  readonly mode: SubscriptionMode | null
+  readonly threadId: number
+}): ThreadWatchModel | null {
+  if (!input.offered) return null
+
+  return input.mode === null
+    ? { subscribed: false, action: `/api/subscribe/thread/${input.threadId}` }
+    : { subscribed: true, action: `/api/unsubscribe/thread/${input.threadId}` }
+}
+
 export function revealedFrom(raw: string | readonly string[] | undefined): ReadonlySet<number> {
   if (raw === undefined) return EMPTY_IDS
   const values = typeof raw === 'string' ? [raw] : raw
@@ -253,6 +285,11 @@ export function buildThreadView(input: ThreadViewInput): ThreadView {
       forum: { label: input.forum.title, href: forumHref(input.forum) },
       replyHref: input.replyHref ?? null,
       markReadAction: input.markReadAction ?? null,
+      watch: threadWatch({
+        offered: input.watchOffered ?? false,
+        mode: input.watchMode ?? null,
+        threadId: input.thread.id,
+      }),
     },
     posts: input.page.rows.map((entry) =>
       post(entry, input.thread, {
@@ -265,6 +302,8 @@ export function buildThreadView(input: ThreadViewInput): ThreadView {
         attachments: input.attachments ?? EMPTY_ATTACHMENTS,
         avatars: input.avatars ?? EMPTY_AVATARS,
         identities: input.identities ?? EMPTY_IDENTITIES,
+        presence: input.presence ?? EMPTY_PRESENCE,
+        viewerSeesInvisible: input.viewerSeesInvisible ?? false,
         ignoredIds: input.ignoredIds ?? EMPTY_IDS,
         revealedPostIds: input.revealedPostIds ?? EMPTY_IDS,
         revealHref: (postId, number) => revealHref(input.currentHref ?? '', postId, number),

package/src/view/usercp-nav.ts

@@ -61,6 +61,12 @@ export const USERCP_SECTIONS: PanelNav = [
     icon: 'signature',
     blurbKey: 'userCpNav.usercp-signature.blurb',
   },
+  {
+    href: '/usercp/drafts',
+    titleKey: 'userCpNav.usercp-drafts.title',
+    icon: 'content',
+    blurbKey: 'userCpNav.usercp-drafts.blurb',
+  },
   {
     href: '/usercp/contacts',
     titleKey: 'userCpNav.usercp-contacts.title',

package/src/view/usercp.ts

@@ -6,6 +6,7 @@ import {
 } from '@meith/accounts'
 import { SOURCE_LOCALE, type Translator } from '@meith/i18n'
 import { maxLengthFor, type ResolvedProfileField } from '@meith/profile-fields'
+import { MODE_LABELS, SUBSCRIPTION_MODES, type SubscriptionMode } from '@meith/subscriptions'
 
 import { untranslated } from './time'
 
@@ -129,6 +130,8 @@ export function optionsFormValues(settings: MemberSettings): {
   postsPerPage: string
   threadsPerPage: string
   invisible: boolean
+  autoWatchOwnThreads: SubscriptionMode
+  autoWatchRepliedThreads: SubscriptionMode
 } {
   return {
     timezone: settings.timezone,
@@ -136,9 +139,20 @@ export function optionsFormValues(settings: MemberSettings): {
     postsPerPage: settings.postsPerPage === null ? '' : String(settings.postsPerPage),
     threadsPerPage: settings.threadsPerPage === null ? '' : String(settings.threadsPerPage),
     invisible: settings.invisible,
+    autoWatchOwnThreads: settings.autoWatchOwnThreads,
+    autoWatchRepliedThreads: settings.autoWatchRepliedThreads,
   }
 }
 
+export interface AutoWatchChoice {
+  readonly value: SubscriptionMode
+  readonly label: string
+}
+
+export function autoWatchChoices(): readonly AutoWatchChoice[] {
+  return SUBSCRIPTION_MODES.map((mode) => ({ value: mode, label: MODE_LABELS[mode] }))
+}
+
 export function customFieldInputs(resolved: readonly ResolvedProfileField[]): readonly {
   key: string
   label: string