@meith/web 0.16.0

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

@@ -0,0 +1,387 @@
+'use client'
+
+import { useActionState } from 'react'
+
+import { EMPTY_STATE } from '@/server/auth-form-state'
+import {
+  changePasswordAction,
+  requestEmailChangeAction,
+  saveDisplayGroupAction,
+  saveOptionsAction,
+  saveProfileAction,
+  saveSignatureAction,
+} from '@/server/usercp-actions'
+
+import { FormError } from '../auth/form-controls'
+import { MarkdownEditor } from '../content/markdown-editor'
+import { CustomField, type CustomFieldInput } from '../profile/custom-field'
+import { type Copy, fromCopy } from '../shell/copy'
+
+export type { CustomFieldInput }
+
+const FIELD =
+  'w-full 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'
+
+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 CARD = 'flex flex-col gap-4 rounded-lg border border-border bg-card p-5'
+
+export function ProfileForm({
+  location,
+  website,
+  bio,
+  customFields = [],
+  copy,
+}: {
+  location: string
+  website: string
+  bio: string
+  customFields?: readonly CustomFieldInput[]
+  copy: Copy
+}) {
+  const [state, action] = useActionState(saveProfileAction, EMPTY_STATE)
+
+  return (
+    <form action={action} className={CARD}>
+      <FormError message={state.error} />
+
+      <label className="flex flex-col gap-1 text-sm">
+        <span className="font-medium">{fromCopy(copy, 'accountForm.profile.location')}</span>
+        <input name="location" defaultValue={location} className={FIELD} maxLength={100} />
+      </label>
+
+      <label className="flex flex-col gap-1 text-sm">
+        <span className="font-medium">{fromCopy(copy, 'accountForm.profile.website')}</span>
+        <input
+          name="website"
+          defaultValue={website}
+          className={FIELD}
+          maxLength={200}
+          inputMode="url"
+        />
+      </label>
+
+      <label className="flex flex-col gap-1 text-sm">
+        <span className="font-medium">{fromCopy(copy, 'accountForm.profile.bio')}</span>
+        <textarea name="bio" defaultValue={bio} className={FIELD} rows={5} maxLength={1000} />
+        <span className="text-xs text-muted-foreground">
+          {fromCopy(copy, 'accountForm.profile.bioHint')}
+        </span>
+      </label>
+
+      {customFields.map((field) => (
+        <CustomField key={field.key} field={field} className={FIELD} />
+      ))}
+
+      <div>
+        <button type="submit" className={BUTTON}>
+          {fromCopy(copy, 'accountForm.profile.submit')}
+        </button>
+      </div>
+    </form>
+  )
+}
+
+export function DisplayGroupForm({
+  choices,
+  selected,
+  copy,
+}: {
+  choices: readonly { value: string; label: string }[]
+  selected: string
+  copy: Copy
+}) {
+  const [state, action] = useActionState(saveDisplayGroupAction, EMPTY_STATE)
+
+  return (
+    <form action={action} className={CARD}>
+      <h2 className="text-lg font-semibold tracking-tight">
+        {fromCopy(copy, 'accountForm.displayGroup.title')}
+      </h2>
+      <FormError message={state.error} />
+
+      <label className="flex flex-col gap-1 text-sm">
+        <span className="font-medium">{fromCopy(copy, 'accountForm.displayGroup.label')}</span>
+        <select name="displayGroupId" defaultValue={selected} className={FIELD}>
+          {choices.map((choice) => (
+            <option key={choice.value} value={choice.value}>
+              {choice.label}
+            </option>
+          ))}
+        </select>
+        <span className="text-xs text-muted-foreground">
+          {fromCopy(copy, 'accountForm.displayGroup.hint')}
+        </span>
+      </label>
+
+      <div>
+        <button type="submit" className={BUTTON}>
+          {fromCopy(copy, 'accountForm.displayGroup.submit')}
+        </button>
+      </div>
+    </form>
+  )
+}
+
+export function OptionsForm({
+  timezone,
+  timezones,
+  locale,
+  locales,
+  postsPerPage,
+  threadsPerPage,
+  invisible,
+  copy,
+}: {
+  timezone: string
+  timezones: readonly { value: string; label: string }[]
+  locale: string
+  locales: readonly { value: string; label: string }[]
+  postsPerPage: string
+  threadsPerPage: string
+  invisible: boolean
+  copy: Copy
+}) {
+  const [state, action] = useActionState(saveOptionsAction, EMPTY_STATE)
+
+  return (
+    <form action={action} className={CARD}>
+      <FormError message={state.error} />
+
+      <label className="flex flex-col gap-1 text-sm">
+        <span className="font-medium">{fromCopy(copy, 'accountForm.options.timezone')}</span>
+        <select name="timezone" defaultValue={timezone} className={FIELD}>
+          {timezones.map((zone) => (
+            <option key={zone.value} value={zone.value}>
+              {zone.label}
+            </option>
+          ))}
+        </select>
+        <span className="text-xs text-muted-foreground">
+          {fromCopy(copy, 'accountForm.options.timezoneHint')}
+        </span>
+      </label>
+
+      <label className="flex flex-col gap-1 text-sm">
+        <span className="font-medium">{fromCopy(copy, 'accountForm.options.locale')}</span>
+        <select name="locale" defaultValue={locale} className={FIELD}>
+          {locales.map((choice) => (
+            <option key={choice.value} value={choice.value}>
+              {choice.label}
+            </option>
+          ))}
+        </select>
+        <span className="text-xs text-muted-foreground">
+          {fromCopy(copy, 'accountForm.options.localeHint')}
+        </span>
+      </label>
+
+      <label className="flex flex-col gap-1 text-sm">
+        <span className="font-medium">{fromCopy(copy, 'accountForm.options.postsPerPage')}</span>
+        <input
+          name="postsPerPage"
+          defaultValue={postsPerPage}
+          className={FIELD}
+          inputMode="numeric"
+          placeholder={fromCopy(copy, 'accountForm.options.postsPerPage.placeholder')}
+        />
+      </label>
+
+      <label className="flex flex-col gap-1 text-sm">
+        <span className="font-medium">{fromCopy(copy, 'accountForm.options.threadsPerPage')}</span>
+        <input
+          name="threadsPerPage"
+          defaultValue={threadsPerPage}
+          className={FIELD}
+          inputMode="numeric"
+          placeholder={fromCopy(copy, 'accountForm.options.threadsPerPage.placeholder')}
+        />
+      </label>
+
+      <p className="text-xs text-muted-foreground">
+        {fromCopy(copy, 'accountForm.options.pageSizeHint')}
+      </p>
+
+      <label className="flex items-start gap-2 text-sm">
+        <input type="checkbox" name="invisible" defaultChecked={invisible} className="mt-1" />
+        <span className="flex flex-col gap-1">
+          <span className="font-medium">{fromCopy(copy, 'accountForm.options.invisible')}</span>
+          <span className="text-xs text-muted-foreground">
+            {fromCopy(copy, 'accountForm.options.invisibleHint')}
+          </span>
+        </span>
+      </label>
+
+      <div>
+        <button type="submit" className={BUTTON}>
+          {fromCopy(copy, 'accountForm.options.submit')}
+        </button>
+      </div>
+    </form>
+  )
+}
+
+export function PasswordForm({ minLength, copy }: { minLength: number; copy: Copy }) {
+  const [state, action] = useActionState(changePasswordAction, EMPTY_STATE)
+
+  return (
+    <form action={action} className={CARD}>
+      <h2 className="text-lg font-semibold tracking-tight">
+        {fromCopy(copy, 'accountForm.password.title')}
+      </h2>
+      <FormError message={state.error} />
+
+      <label className="flex flex-col gap-1 text-sm">
+        <span className="font-medium">{fromCopy(copy, 'accountForm.password.current')}</span>
+        <input
+          type="password"
+          name="currentPassword"
+          className={FIELD}
+          autoComplete="current-password"
+          required
+        />
+      </label>
+
+      <label className="flex flex-col gap-1 text-sm">
+        <span className="font-medium">{fromCopy(copy, 'accountForm.password.new')}</span>
+        <input
+          type="password"
+          name="newPassword"
+          className={FIELD}
+          autoComplete="new-password"
+          minLength={minLength}
+          required
+        />
+      </label>
+
+      <label className="flex flex-col gap-1 text-sm">
+        <span className="font-medium">{fromCopy(copy, 'accountForm.password.confirm')}</span>
+        <input
+          type="password"
+          name="confirmPassword"
+          className={FIELD}
+          autoComplete="new-password"
+          minLength={minLength}
+          required
+        />
+      </label>
+
+      <p className="text-xs text-muted-foreground">{fromCopy(copy, 'accountForm.password.note')}</p>
+
+      <div>
+        <button type="submit" className={BUTTON}>
+          {fromCopy(copy, 'accountForm.password.submit')}
+        </button>
+      </div>
+    </form>
+  )
+}
+
+export function EmailForm({ email, copy }: { email: string; copy: Copy }) {
+  const [state, action] = useActionState(requestEmailChangeAction, EMPTY_STATE)
+
+  return (
+    <form action={action} className={CARD}>
+      <h2 className="text-lg font-semibold tracking-tight">
+        {fromCopy(copy, 'accountForm.email.title')}
+      </h2>
+      <FormError message={state.error} />
+
+      <p className="text-sm text-muted-foreground">
+        {copy['accountForm.email.currentLead']}
+        <span className="font-medium text-foreground">{email}</span>
+        {copy['accountForm.email.currentTail']}
+      </p>
+
+      <label className="flex flex-col gap-1 text-sm">
+        <span className="font-medium">{fromCopy(copy, 'accountForm.password.current')}</span>
+        <input
+          type="password"
+          name="currentPassword"
+          className={FIELD}
+          autoComplete="current-password"
+          required
+        />
+      </label>
+
+      <label className="flex flex-col gap-1 text-sm">
+        <span className="font-medium">{fromCopy(copy, 'accountForm.email.new')}</span>
+        <input type="email" name="newEmail" className={FIELD} autoComplete="email" required />
+      </label>
+
+      <p className="text-xs text-muted-foreground">{fromCopy(copy, 'accountForm.email.note')}</p>
+
+      <div>
+        <button type="submit" className={BUTTON}>
+          {fromCopy(copy, 'accountForm.email.submit')}
+        </button>
+      </div>
+    </form>
+  )
+}
+
+export function SignatureForm({
+  signature,
+  maxLength,
+  locked,
+  lockedReason,
+  copy,
+}: {
+  signature: string
+  maxLength: number
+  locked: boolean
+  lockedReason: string | null
+  copy: Copy
+}) {
+  const [state, action] = useActionState(saveSignatureAction, EMPTY_STATE)
+
+  if (locked) {
+    return (
+      <div className={CARD}>
+        <h2 className="text-lg font-semibold tracking-tight">
+          {fromCopy(copy, 'accountForm.signature.lockedTitle')}
+        </h2>
+        <p className="text-sm text-muted-foreground">
+          {fromCopy(copy, 'accountForm.signature.lockedBody')}
+          {lockedReason === null ? null : (
+            <>
+              {' '}
+              {copy['accountForm.locked.reasonLead']}
+              <span className="text-foreground">{lockedReason}</span>
+              {copy['accountForm.locked.reasonTail']}
+            </>
+          )}
+        </p>
+        {signature !== '' && (
+          <pre className="whitespace-pre-wrap break-words rounded-md border border-border bg-muted p-3 text-xs">
+            {signature}
+          </pre>
+        )}
+      </div>
+    )
+  }
+
+  return (
+    <form action={action} className={CARD}>
+      <FormError message={state.error} />
+
+      <MarkdownEditor
+        id="signature-body"
+        name="signature"
+        scope="signature"
+        label={fromCopy(copy, 'accountForm.signature.label')}
+        rows={4}
+        maxLength={maxLength}
+        defaultValue={signature}
+        hint={fromCopy(copy, 'accountForm.signature.hint')}
+      />
+
+      <div>
+        <button type="submit" className={BUTTON}>
+          {fromCopy(copy, 'accountForm.signature.submit')}
+        </button>
+      </div>
+    </form>
+  )
+}

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

@@ -0,0 +1,14 @@
+import { PanelNavRegion } from '@/components/shell/panel-nav'
+import type { PanelCounts } from '@/view/panel-nav'
+import { USERCP_NAV, USERCP_OVERVIEW } from '@/view/usercp-nav'
+
+export function UserCpNav({ counts }: { readonly counts: PanelCounts }) {
+  return (
+    <PanelNavRegion
+      panel="usercp"
+      nav={USERCP_NAV}
+      overviewHref={USERCP_OVERVIEW.href}
+      counts={counts}
+    />
+  )
+}

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

@@ -0,0 +1,34 @@
+import { PanelShell } from '@/components/shell/panel-shell'
+import { getActor } from '@/server/context'
+import { getTranslator } from '@/server/i18n'
+import { unreadMessageCount } from '@/server/messages'
+import { unreadNotificationCount } from '@/server/notifications'
+import { buildPanelLinks } from '@/view/shell'
+
+import { UserCpNav } from './usercp-nav'
+
+export async function UserCpShell({ children }: { children: React.ReactNode }) {
+  const actor = await getActor()
+
+  const [messages, notifications] = await Promise.all([
+    unreadMessageCount(actor.userId),
+    unreadNotificationCount(actor.userId),
+  ])
+
+  const links = buildPanelLinks({
+    t: await getTranslator(),
+    current: 'usercp',
+    canAccessModCp: actor.global.canAccessModCp === true,
+    canAccessAdminCp: actor.global.canAccessAdminCp === true,
+  })
+
+  return (
+    <PanelShell
+      panel="usercp"
+      nav={<UserCpNav counts={{ '/messages': messages, '/notifications': notifications }} />}
+      links={links}
+    >
+      {children}
+    </PanelShell>
+  )
+}

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

@@ -0,0 +1,92 @@
+'use client'
+
+import { useActionState } from 'react'
+
+import { adminSignInAction, adminSignOutAction } from '@/server/admin-actions'
+import { EMPTY_STATE } from '@/server/auth-form-state'
+
+import { FormError } from '../auth/form-controls'
+import { type Copy, formatFromCopy, fromCopy } from '../shell/copy'
+
+export function AdminSignInForm({
+  next,
+  reason,
+  idleMinutes,
+  copy,
+}: {
+  next: string
+  reason: 'expired' | 'reauth' | null
+  idleMinutes: number
+  copy: Copy
+}) {
+  const [state, action] = useActionState(adminSignInAction, EMPTY_STATE)
+
+  return (
+    <form
+      action={action}
+      className="flex w-full max-w-sm flex-col gap-4 rounded-lg border border-border bg-card p-6"
+    >
+      <h1 className="text-xl font-semibold tracking-tight">{fromCopy(copy, 'adminPanel.title')}</h1>
+
+      <p className="text-sm text-muted-foreground">
+        {reason === 'reauth'
+          ? fromCopy(copy, 'adminPanel.reason.reauth')
+          : reason === 'expired'
+            ? fromCopy(copy, 'adminPanel.reason.expired')
+            : fromCopy(copy, 'adminPanel.reason.default')}
+      </p>
+
+      <FormError message={state.error} />
+      <input type="hidden" name="next" value={next} />
+
+      <label className="flex flex-col gap-1 text-sm">
+        <span className="font-medium">{fromCopy(copy, 'adminPanel.password')}</span>
+        <input
+          type="password"
+          name="password"
+          autoComplete="current-password"
+          required
+          className="h-10 rounded-md border border-input bg-background px-3 text-sm outline-none focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/40"
+        />
+      </label>
+
+      <label className="flex flex-col gap-1 text-sm">
+        <span className="font-medium">{fromCopy(copy, 'adminPanel.twoFactorCode')}</span>
+        <input
+          type="text"
+          name="code"
+          inputMode="numeric"
+          autoComplete="one-time-code"
+          className="h-10 rounded-md border border-input bg-background px-3 text-sm outline-none focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/40"
+        />
+        <span className="text-xs text-muted-foreground">
+          {fromCopy(copy, 'adminPanel.twoFactorCodeHint')}
+        </span>
+      </label>
+
+      <button
+        type="submit"
+        className="inline-flex h-10 items-center justify-center rounded-md bg-primary px-4 text-sm font-medium text-primary-foreground hover:opacity-90 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
+      >
+        {fromCopy(copy, 'adminPanel.enter')}
+      </button>
+
+      <p className="text-xs text-muted-foreground">
+        {formatFromCopy(copy, 'adminPanel.idleNote', { minutes: idleMinutes })}
+      </p>
+    </form>
+  )
+}
+
+export function AdminSignOutForm({ copy }: { copy: Copy }) {
+  return (
+    <form action={adminSignOutAction}>
+      <button
+        type="submit"
+        className="text-sm text-muted-foreground hover:text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
+      >
+        {fromCopy(copy, 'adminPanel.leave')}
+      </button>
+    </form>
+  )
+}

package/src/components/admin/admin-nav.tsx

@@ -0,0 +1,52 @@
+import { PanelNavRegion } from '@/components/shell/panel-nav'
+import { getActor } from '@/server/context'
+import { currentLocation } from '@/server/current-location'
+import { getTranslator } from '@/server/i18n'
+import { pluginPanelSection } from '@/server/plugin-panel'
+import { filterView, viewerRef } from '@/server/plugin-view'
+import { ADMIN_OVERVIEW, adminNavWithPlugin, pluginKeyAt } from '@/view/admin-nav'
+import type { PanelNav, PanelSection } from '@/view/panel-nav'
+import { pluginNavChildren } from '@/view/plugin-panel'
+
+/**
+ * A plugin may reorder, drop, or add a section here. A link it adds reaches a
+ * page it declared and nothing else — the panel re-checks who is asking.
+ */
+async function withPluginSections(nav: PanelNav, t: Awaited<ReturnType<typeof getTranslator>>) {
+  const links = await filterView(
+    'admin.navigation',
+    nav.map((section) => ({
+      label: section.titleText ?? (section.titleKey === undefined ? '' : t.t(section.titleKey)),
+      href: section.href,
+    })),
+    viewerRef(await getActor()),
+  )
+
+  const byHref = new Map(nav.map((section) => [section.href, section]))
+  return links.map(
+    (link): PanelSection =>
+      byHref.get(link.href) ?? { href: link.href, titleText: link.label, icon: 'plugins' },
+  )
+}
+
+export async function AdminNav() {
+  const t = await getTranslator()
+  const pluginKey = pluginKeyAt(await currentLocation())
+  const plugin = pluginKey === null ? null : await pluginPanelSection(pluginKey, t)
+
+  const nav = adminNavWithPlugin(
+    plugin === null
+      ? null
+      : { key: plugin.key, name: plugin.name, pages: pluginNavChildren(plugin.pages) },
+    t,
+  )
+
+  return (
+    <PanelNavRegion
+      panel="admincp"
+      nav={await withPluginSections(nav, t)}
+      overviewHref={ADMIN_OVERVIEW.href}
+      fallbackHref={ADMIN_OVERVIEW.href}
+    />
+  )
+}

package/src/components/admin/admin-undo.tsx

@@ -0,0 +1,32 @@
+'use client'
+
+import { useActionState } from 'react'
+
+import { undoAdminAction } from '@/server/admin-undo-actions'
+import { EMPTY_STATE, type UndoState } from '@/server/auth-form-state'
+
+import { FormError, SubmitButton } from '../auth/form-controls'
+import { type Copy, formatFromCopy, fromCopy } from '../shell/copy'
+import { Saved } from './form-bits'
+
+export function AdminUndo({ undo, copy }: { undo: UndoState | undefined; copy: Copy }) {
+  const [state, action] = useActionState(undoAdminAction, EMPTY_STATE)
+
+  if (undo === undefined && state.notice !== 'undone' && state.error === undefined) return null
+
+  return (
+    <div aria-live="polite" className="flex flex-col gap-2">
+      <FormError message={state.error} />
+      <Saved when={state.notice === 'undone'}>{fromCopy(copy, 'admin.undoSucceeded')}</Saved>
+      {undo !== undefined && state.notice !== 'undone' && (
+        <form action={action} className="flex flex-wrap items-center gap-3">
+          <input type="hidden" name="undoToken" value={undo.token} />
+          <span className="text-sm text-muted-foreground">
+            {formatFromCopy(copy, 'admin.undoUntil', { time: undo.expiresAt })}
+          </span>
+          <SubmitButton>{fromCopy(copy, 'admin.undo')}</SubmitButton>
+        </form>
+      )}
+    </div>
+  )
+}