@meith/web 0.30.1 → 0.32.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@meith/web",
-  "version": "0.30.1",
+  "version": "0.32.0",
   "description": "The board itself: the Next.js app, and the forum-web bin that materializes it into an external board workspace.",
   "license": "MIT",
   "repository": {
@@ -43,53 +43,54 @@
     "react-dom": "19.2.8",
     "tailwindcss": "^4.3.3",
     "typescript": "7.0.2",
-    "@meith/accounts": "0.30.1",
-    "@meith/admin": "0.30.1",
-    "@meith/antispam": "0.30.1",
-    "@meith/api": "0.30.1",
-    "@meith/attachments": "0.30.1",
-    "@meith/authorization": "0.30.1",
-    "@meith/avatars": "0.30.1",
-    "@meith/core": "0.30.1",
-    "@meith/db": "0.30.1",
-    "@meith/drafts": "0.30.1",
-    "@meith/demo": "0.30.1",
-    "@meith/drivers": "0.30.1",
-    "@meith/events": "0.30.1",
-    "@meith/groups": "0.30.1",
-    "@meith/forums": "0.30.1",
-    "@meith/i18n": "0.30.1",
-    "@meith/import": "0.30.1",
-    "@meith/install": "0.30.1",
-    "@meith/mail": "0.30.1",
-    "@meith/markdown": "0.30.1",
-    "@meith/marketplace": "0.30.1",
-    "@meith/messages": "0.30.1",
-    "@meith/moderation": "0.30.1",
-    "@meith/notifications": "0.30.1",
-    "@meith/plugin-calendar": "0.30.1",
-    "@meith/plugin-dues": "0.30.1",
-    "@meith/plugin-kit": "0.30.1",
-    "@meith/polls": "0.30.1",
-    "@meith/posts": "0.30.1",
-    "@meith/profile-fields": "0.30.1",
-    "@meith/relations": "0.30.1",
-    "@meith/reputation": "0.30.1",
-    "@meith/runtime": "0.30.1",
-    "@meith/search": "0.30.1",
-    "@meith/settings": "0.30.1",
-    "@meith/signatures": "0.30.1",
-    "@meith/subscriptions": "0.30.1",
-    "@meith/tasks": "0.30.1",
-    "@meith/theme-clubhouse": "0.30.1",
-    "@meith/theme-default": "0.30.1",
-    "@meith/theme-kit": "0.30.1",
-    "@meith/theme-midnight": "0.30.1",
-    "@meith/theme-phasebook": "0.30.1",
-    "@meith/theme-raidframe": "0.30.1",
-    "@meith/threads": "0.30.1",
-    "@meith/ui": "0.30.1",
-    "@meith/upgrade": "0.30.1"
+    "@meith/accounts": "0.32.0",
+    "@meith/admin": "0.32.0",
+    "@meith/antispam": "0.32.0",
+    "@meith/api": "0.32.0",
+    "@meith/attachments": "0.32.0",
+    "@meith/authorization": "0.32.0",
+    "@meith/avatars": "0.32.0",
+    "@meith/board-digest": "0.32.0",
+    "@meith/core": "0.32.0",
+    "@meith/db": "0.32.0",
+    "@meith/demo": "0.32.0",
+    "@meith/drafts": "0.32.0",
+    "@meith/drivers": "0.32.0",
+    "@meith/events": "0.32.0",
+    "@meith/forums": "0.32.0",
+    "@meith/groups": "0.32.0",
+    "@meith/i18n": "0.32.0",
+    "@meith/import": "0.32.0",
+    "@meith/install": "0.32.0",
+    "@meith/mail": "0.32.0",
+    "@meith/markdown": "0.32.0",
+    "@meith/marketplace": "0.32.0",
+    "@meith/messages": "0.32.0",
+    "@meith/moderation": "0.32.0",
+    "@meith/notifications": "0.32.0",
+    "@meith/plugin-calendar": "0.32.0",
+    "@meith/plugin-dues": "0.32.0",
+    "@meith/plugin-kit": "0.32.0",
+    "@meith/polls": "0.32.0",
+    "@meith/posts": "0.32.0",
+    "@meith/profile-fields": "0.32.0",
+    "@meith/relations": "0.32.0",
+    "@meith/reputation": "0.32.0",
+    "@meith/runtime": "0.32.0",
+    "@meith/search": "0.32.0",
+    "@meith/settings": "0.32.0",
+    "@meith/signatures": "0.32.0",
+    "@meith/subscriptions": "0.32.0",
+    "@meith/tasks": "0.32.0",
+    "@meith/theme-clubhouse": "0.32.0",
+    "@meith/theme-default": "0.32.0",
+    "@meith/theme-kit": "0.32.0",
+    "@meith/theme-midnight": "0.32.0",
+    "@meith/theme-phasebook": "0.32.0",
+    "@meith/theme-raidframe": "0.32.0",
+    "@meith/threads": "0.32.0",
+    "@meith/ui": "0.32.0",
+    "@meith/upgrade": "0.32.0"
   },
   "scripts": {
     "dev": "next dev",

package/public/sw.js

@@ -1,5 +1,8 @@
 const FALLBACK_HREF = '/notifications'
 
+const OFFLINE_URL = '/offline'
+const OFFLINE_CACHE = 'meith-offline-v1'
+
 function readPayload(event) {
   if (!event.data) return null
 
@@ -28,12 +31,49 @@ function targetUrl(href) {
   }
 }
 
-self.addEventListener('install', () => {
+self.addEventListener('install', (event) => {
   self.skipWaiting()
+
+  event.waitUntil(
+    fetch(OFFLINE_URL, { cache: 'reload' })
+      .then((response) => {
+        if (!response.ok) return
+        return caches.open(OFFLINE_CACHE).then((cache) => cache.put(OFFLINE_URL, response))
+      })
+      .catch(() => {}),
+  )
 })
 
 self.addEventListener('activate', (event) => {
-  event.waitUntil(self.clients.claim())
+  event.waitUntil(
+    caches
+      .keys()
+      .then((keys) =>
+        Promise.all(
+          keys
+            .filter((key) => key.startsWith('meith-offline-') && key !== OFFLINE_CACHE)
+            .map((key) => caches.delete(key)),
+        ),
+      )
+      .catch(() => {})
+      .then(() => self.clients.claim()),
+  )
+})
+
+self.addEventListener('fetch', (event) => {
+  if (event.request.mode !== 'navigate') return
+
+  const retryRequest = event.request.clone()
+
+  try {
+    event.respondWith(
+      fetch(event.request).catch(() =>
+        caches.match(OFFLINE_URL).then((cached) => cached || fetch(retryRequest)),
+      ),
+    )
+  } catch (_error) {
+    event.respondWith(fetch(retryRequest))
+  }
 })
 
 self.addEventListener('push', (event) => {

package/src/components/account/draft-forms.tsx

@@ -0,0 +1,39 @@
+'use client'
+
+import { useActionState } from 'react'
+
+import { EMPTY_STATE } from '@/server/auth-form-state'
+import { deleteDraftAction } from '@/server/content-actions'
+
+import { FormError, PendingButton } from '../auth/form-controls'
+import { ConfirmDialog } from '../shell/confirm-dialog'
+import { type Copy, fromCopy } from '../shell/copy'
+
+export function DeleteDraftForm({
+  forumId,
+  threadId,
+  copy,
+}: {
+  forumId: number
+  threadId: number | null
+  copy: Copy
+}) {
+  const [state, action] = useActionState(deleteDraftAction, EMPTY_STATE)
+
+  return (
+    <div className="shrink-0">
+      <form action={action}>
+        <FormError message={state.error} />
+        <input type="hidden" name="forumId" value={forumId} />
+        {threadId !== null && <input type="hidden" name="threadId" value={threadId} />}
+        <PendingButton
+          showWorking
+          className="inline-flex h-9 items-center justify-center rounded-md border border-border px-3 text-sm font-medium text-destructive transition-colors hover:bg-destructive/10 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
+        >
+          {fromCopy(copy, 'draftsPage.delete')}
+        </PendingButton>
+      </form>
+      <ConfirmDialog confirm={state.confirm} action={action} />
+    </div>
+  )
+}

package/src/components/account/feed-token.tsx

@@ -0,0 +1,95 @@
+'use client'
+
+import { useActionState } from 'react'
+
+import { EMPTY_STATE } from '@/server/auth-form-state'
+import { regenerateFeedTokenAction, revokeFeedTokenAction } from '@/server/feed-token-actions'
+
+import { FormError, PendingButton } from '../auth/form-controls'
+import { type Copy, fromCopy } from '../shell/copy'
+
+const CARD = 'flex flex-col gap-4 rounded-lg border border-border bg-card p-5'
+
+const BUTTON =
+  'inline-flex h-9 items-center justify-center rounded-md bg-primary px-4 text-sm font-medium text-primary-foreground transition-opacity hover:opacity-90 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring'
+
+const GHOST_BUTTON =
+  'inline-flex h-9 items-center justify-center rounded-md border border-border bg-background px-4 text-sm font-medium transition-opacity hover:opacity-90 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring'
+
+const REVEAL_CODE = 'block overflow-x-auto rounded-sm bg-card px-2 py-1 font-mono text-xs'
+
+export function FeedTokenPanel({
+  active,
+  detail,
+  copy,
+}: {
+  active: boolean
+  detail: string | null
+  copy: Copy
+}) {
+  const [genState, genAction] = useActionState(regenerateFeedTokenAction, EMPTY_STATE)
+  const [revState, revAction] = useActionState(revokeFeedTokenAction, EMPTY_STATE)
+
+  const reveal = genState.notice === 'feed:issued' ? genState.values : undefined
+
+  return (
+    <section className={CARD}>
+      <div className="flex flex-col gap-1">
+        <h2 className="text-lg font-semibold tracking-tight">
+          {fromCopy(copy, 'accountForm.feed.title')}
+        </h2>
+        <p className="text-sm text-muted-foreground">{fromCopy(copy, 'accountForm.feed.blurb')}</p>
+      </div>
+
+      <FormError message={genState.error ?? revState.error} />
+
+      {reveal?.token !== undefined && (
+        <div
+          role="status"
+          className="flex flex-col gap-2 rounded-md border border-accent bg-post-highlight px-3 py-3"
+        >
+          <p className="text-sm font-semibold">{fromCopy(copy, 'accountForm.feed.copyNow')}</p>
+          <code className="block overflow-x-auto rounded-sm bg-card px-2 py-1 font-mono text-sm">
+            {reveal.token}
+          </code>
+          <p className="text-sm font-medium">{fromCopy(copy, 'accountForm.feed.rssLabel')}</p>
+          <code className={REVEAL_CODE}>{reveal.rssUrl}</code>
+          <p className="text-sm font-medium">{fromCopy(copy, 'accountForm.feed.atomLabel')}</p>
+          <code className={REVEAL_CODE}>{reveal.atomUrl}</code>
+          <p className="text-xs text-muted-foreground">
+            {fromCopy(copy, 'accountForm.feed.revealHint')}
+          </p>
+        </div>
+      )}
+
+      <p className="text-sm">
+        {active
+          ? fromCopy(copy, 'accountForm.feed.active')
+          : fromCopy(copy, 'accountForm.feed.none')}
+        {active && detail !== null && (
+          <span className="mt-1 block text-xs text-muted-foreground">{detail}</span>
+        )}
+      </p>
+
+      <p className="text-xs text-muted-foreground">{fromCopy(copy, 'accountForm.feed.warning')}</p>
+
+      <div className="flex flex-wrap gap-3">
+        <form action={genAction}>
+          <PendingButton showWorking className={BUTTON}>
+            {active
+              ? fromCopy(copy, 'accountForm.feed.regenerate')
+              : fromCopy(copy, 'accountForm.feed.generate')}
+          </PendingButton>
+        </form>
+
+        {active && (
+          <form action={revAction}>
+            <PendingButton showWorking className={GHOST_BUTTON}>
+              {fromCopy(copy, 'accountForm.feed.revoke')}
+            </PendingButton>
+          </form>
+        )}
+      </div>
+    </section>
+  )
+}

package/src/components/account/notification-forms.tsx

@@ -2,6 +2,8 @@
 
 import { useActionState } from 'react'
 
+import { textLinkVariants } from '@meith/ui'
+
 import { EMPTY_STATE } from '@/server/auth-form-state'
 import {
   markAllNotificationsReadAction,
@@ -9,6 +11,7 @@ import {
   saveMassMailOptInAction,
   saveNotificationPreferencesAction,
 } from '@/server/notification-actions'
+import { saveBoardDigestCadenceAction } from '@/server/usercp-actions'
 
 import { FormError, PendingButton } from '../auth/form-controls'
 import { type Copy, fromCopy } from '../shell/copy'
@@ -16,8 +19,7 @@ import { type Copy, fromCopy } from '../shell/copy'
 const BUTTON =
   'inline-flex h-9 items-center justify-center rounded-md bg-primary px-4 text-sm font-medium text-primary-foreground transition-opacity hover:opacity-90 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring'
 
-const LINK_BUTTON =
-  'text-sm font-medium text-foreground underline decoration-border underline-offset-2 hover:decoration-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring'
+const LINK_BUTTON = `${textLinkVariants({ size: 'sm' })} focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring`
 
 export function MarkNotificationReadForm({
   notificationId,
@@ -200,3 +202,36 @@ export function AnnouncementsOptInForm({ optedIn, copy }: { optedIn: boolean; co
     </form>
   )
 }
+
+const FIELD =
+  'w-full max-w-xs rounded-md border border-border bg-background px-3 py-2 text-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring'
+
+export function BoardDigestCadenceForm({ cadence, copy }: { cadence: string; copy: Copy }) {
+  const [state, action] = useActionState(saveBoardDigestCadenceAction, EMPTY_STATE)
+
+  return (
+    <form
+      action={action}
+      className="flex flex-col gap-4 rounded-lg border border-border bg-card p-5"
+    >
+      <FormError message={state.error} />
+
+      <label className="flex flex-col gap-1 text-sm">
+        <span className="font-medium">{fromCopy(copy, 'accountForm.boardDigest.legend')}</span>
+        <span className="text-xs text-muted-foreground">
+          {fromCopy(copy, 'accountForm.boardDigest.description')}
+        </span>
+        <select name="cadence" defaultValue={cadence} className={FIELD}>
+          <option value="weekly">{fromCopy(copy, 'accountForm.boardDigest.weekly')}</option>
+          <option value="monthly">{fromCopy(copy, 'accountForm.boardDigest.monthly')}</option>
+        </select>
+      </label>
+
+      <div>
+        <PendingButton showWorking className={BUTTON}>
+          {fromCopy(copy, 'accountForm.boardDigest.submit')}
+        </PendingButton>
+      </div>
+    </form>
+  )
+}

package/src/components/account/relation-forms.tsx

@@ -2,13 +2,14 @@
 
 import { useActionState } from 'react'
 
+import { textLinkVariants } from '@meith/ui'
+
 import { EMPTY_STATE } from '@/server/auth-form-state'
 import { removeRelationAction, setRelationAction } from '@/server/relation-actions'
 
 import { FormError, PendingButton } from '../auth/form-controls'
 
-const LINK_BUTTON =
-  'text-sm font-medium text-foreground underline decoration-border underline-offset-2 hover:decoration-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring'
+const LINK_BUTTON = `${textLinkVariants({ size: 'sm' })} focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring`
 
 const QUIET_BUTTON =
   'text-sm text-muted-foreground hover:text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring'

package/src/components/account/subscription-forms.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useActionState } from 'react'
+import { useActionState, useEffect, useState } from 'react'
 
 import { EMPTY_STATE } from '@/server/auth-form-state'
 import {
@@ -10,6 +10,7 @@ import {
 } from '@/server/subscription-actions'
 
 import { FormError, PendingButton } from '../auth/form-controls'
+import { ProgressiveMarker } from '../content/progressive-marker'
 import { type Copy, fromCopy } from '../shell/copy'
 
 const BUTTON =
@@ -48,6 +49,17 @@ export function FollowForm({
 }) {
   const [state, action] = useActionState(subscribeAction, EMPTY_STATE)
   const [stopState, stopAction] = useActionState(unsubscribeAction, EMPTY_STATE)
+  const [resolved, setResolved] = useState<boolean | null>(null)
+
+  useEffect(() => {
+    if (state.subscribed !== undefined) setResolved(state.subscribed)
+  }, [state])
+
+  useEffect(() => {
+    if (stopState.subscribed !== undefined) setResolved(stopState.subscribed)
+  }, [stopState])
+
+  const subscribed = resolved ?? mode !== null
 
   return (
     <section aria-label={label} className="flex flex-col gap-2">
@@ -58,10 +70,11 @@ export function FollowForm({
           <input type="hidden" name="target" value={target} />
           <input type="hidden" name="targetId" value={targetId} />
           <input type="hidden" name="back" value={back} />
+          <ProgressiveMarker />
 
           <label className="text-sm">
             <span className="mr-2">
-              {mode === null ? label : fromCopy(copy, 'accountForm.follow.notifyMe')}
+              {subscribed ? fromCopy(copy, 'accountForm.follow.notifyMe') : label}
             </span>
             <select
               name="mode"
@@ -78,17 +91,18 @@ export function FollowForm({
           </label>
 
           <PendingButton className={QUIET_BUTTON}>
-            {mode === null
-              ? fromCopy(copy, 'accountForm.follow.follow')
-              : fromCopy(copy, 'accountForm.follow.save')}
+            {subscribed
+              ? fromCopy(copy, 'accountForm.follow.save')
+              : fromCopy(copy, 'accountForm.follow.follow')}
           </PendingButton>
         </form>
 
-        {mode !== null && (
+        {subscribed && (
           <form action={stopAction}>
             <input type="hidden" name="target" value={target} />
             <input type="hidden" name="targetId" value={targetId} />
             <input type="hidden" name="back" value={back} />
+            <ProgressiveMarker />
             <PendingButton className={GHOST_BUTTON}>
               {fromCopy(copy, 'accountForm.follow.stop')}
             </PendingButton>

package/src/components/account/usercp-forms.tsx

@@ -2,6 +2,8 @@
 
 import { useActionState } from 'react'
 
+import type { SubscriptionMode } from '@meith/subscriptions'
+
 import { EMPTY_STATE } from '@/server/auth-form-state'
 import {
   changePasswordAction,
@@ -132,6 +134,9 @@ export function OptionsForm({
   postsPerPage,
   threadsPerPage,
   invisible,
+  autoWatchOwnThreads,
+  autoWatchRepliedThreads,
+  autoWatchChoices,
   copy,
 }: {
   timezone: string
@@ -141,6 +146,9 @@ export function OptionsForm({
   postsPerPage: string
   threadsPerPage: string
   invisible: boolean
+  autoWatchOwnThreads: SubscriptionMode
+  autoWatchRepliedThreads: SubscriptionMode
+  autoWatchChoices: readonly { value: SubscriptionMode; label: string }[]
   copy: Copy
 }) {
   const [state, action] = useActionState(saveOptionsAction, EMPTY_STATE)
@@ -213,6 +221,42 @@ export function OptionsForm({
         </span>
       </label>
 
+      <label className="flex flex-col gap-1 text-sm">
+        <span className="font-medium">
+          {fromCopy(copy, 'accountForm.options.autoWatchOwnThreads')}
+        </span>
+        <select name="autoWatchOwnThreads" defaultValue={autoWatchOwnThreads} className={FIELD}>
+          {autoWatchChoices.map((choice) => (
+            <option key={choice.value} value={choice.value}>
+              {choice.label}
+            </option>
+          ))}
+        </select>
+        <span className="text-xs text-muted-foreground">
+          {fromCopy(copy, 'accountForm.options.autoWatchOwnThreadsHint')}
+        </span>
+      </label>
+
+      <label className="flex flex-col gap-1 text-sm">
+        <span className="font-medium">
+          {fromCopy(copy, 'accountForm.options.autoWatchRepliedThreads')}
+        </span>
+        <select
+          name="autoWatchRepliedThreads"
+          defaultValue={autoWatchRepliedThreads}
+          className={FIELD}
+        >
+          {autoWatchChoices.map((choice) => (
+            <option key={choice.value} value={choice.value}>
+              {choice.label}
+            </option>
+          ))}
+        </select>
+        <span className="text-xs text-muted-foreground">
+          {fromCopy(copy, 'accountForm.options.autoWatchRepliedThreadsHint')}
+        </span>
+      </label>
+
       <div>
         <PendingButton showWorking className={BUTTON}>
           {fromCopy(copy, 'accountForm.options.submit')}

package/src/components/admin/api-token-forms.tsx

@@ -6,6 +6,7 @@ import { issueApiTokenAction, revokeApiTokenAction } from '@/server/api-token-ac
 import { EMPTY_STATE } from '@/server/auth-form-state'
 
 import { FormError, SubmitButton } from '../auth/form-controls'
+import { ConfirmDialog } from '../shell/confirm-dialog'
 import { type Copy, fromCopy } from '../shell/copy'
 
 export function IssueTokenForm({ scopes, copy }: { scopes: readonly string[]; copy: Copy }) {
@@ -78,12 +79,15 @@ export function RevokeTokenForm({ tokenId, copy }: { tokenId: number; copy: Copy
   const [state, action] = useActionState(revokeApiTokenAction, EMPTY_STATE)
 
   return (
-    <form action={action}>
-      <input type="hidden" name="tokenId" value={tokenId} />
-      <SubmitButton>{fromCopy(copy, 'adminPanel.token.revoke')}</SubmitButton>
-      {state.error !== undefined && (
-        <span className="ml-2 text-xs text-destructive">{state.error}</span>
-      )}
-    </form>
+    <>
+      <form action={action}>
+        <input type="hidden" name="tokenId" value={tokenId} />
+        <SubmitButton>{fromCopy(copy, 'adminPanel.token.revoke')}</SubmitButton>
+        {state.error !== undefined && (
+          <span className="ml-2 text-xs text-destructive">{state.error}</span>
+        )}
+      </form>
+      <ConfirmDialog confirm={state.confirm} action={action} />
+    </>
   )
 }

package/src/components/admin/ban-filter-forms.tsx

@@ -6,6 +6,7 @@ import { EMPTY_STATE } from '@/server/auth-form-state'
 import { addBanFilterAction, removeBanFilterAction } from '@/server/ban-filter-admin-actions'
 
 import { FormError, PendingButton, SubmitButton } from '../auth/form-controls'
+import { ConfirmDialog } from '../shell/confirm-dialog'
 import { type Copy, formatFromCopy, fromCopy } from '../shell/copy'
 import { INPUT, Saved } from './form-bits'
 
@@ -89,16 +90,19 @@ export function RemoveBanFilterForm({
   const [state, action] = useActionState(removeBanFilterAction, EMPTY_STATE)
 
   return (
-    <form action={action} className="flex flex-col items-end gap-1">
-      <FormError message={state.error} />
-      <input type="hidden" name="id" value={id} />
-      <PendingButton
-        showWorking
-        className="text-xs text-destructive hover:underline"
-        aria-label={formatFromCopy(copy, 'adminBanFilter.removeFilter', { pattern })}
-      >
-        {fromCopy(copy, 'admin.remove')}
-      </PendingButton>
-    </form>
+    <div className="flex flex-col items-end gap-1">
+      <form action={action} className="flex flex-col items-end gap-1">
+        <FormError message={state.error} />
+        <input type="hidden" name="id" value={id} />
+        <PendingButton
+          showWorking
+          className="text-xs text-destructive hover:underline"
+          aria-label={formatFromCopy(copy, 'adminBanFilter.removeFilter', { pattern })}
+        >
+          {fromCopy(copy, 'admin.remove')}
+        </PendingButton>
+      </form>
+      <ConfirmDialog confirm={state.confirm} action={action} />
+    </div>
   )
 }