@meith/web 0.16.0

package/app/(board)/thread/[slug]/poll/page.tsx

@@ -0,0 +1,41 @@
+import type { Metadata } from 'next'
+import { notFound } from 'next/navigation'
+
+import { PollEditForm } from '@/components/content/poll-edit-form'
+import { PanelPage } from '@/components/shell/panel-page'
+import { getContainer } from '@/server/container'
+import { getActor } from '@/server/context'
+import { tr } from '@/server/i18n'
+import { resolvePollScope } from '@/server/poll-scope'
+import { leadingId } from '@/view/slug-id'
+
+export async function generateMetadata(): Promise<Metadata> {
+  return { title: await tr('page.edit-poll') }
+}
+
+export default async function EditPollPage({ params }: { params: Promise<{ slug: string }> }) {
+  const { slug } = await params
+  const threadId = leadingId(slug)
+  if (threadId === null) notFound()
+
+  const { polls } = getContainer()
+  if (polls === null) notFound()
+
+  const actor = await getActor()
+  const scope = await resolvePollScope(actor, threadId)
+  if (scope === null || !scope.mayEdit) notFound()
+
+  const poll = await polls.find(threadId, actor.userId)
+  if (poll === null) notFound()
+
+  return (
+    <PanelPage
+      frame="standalone"
+      title={await tr('page.edit-poll')}
+      lede={await tr('pollEdit.lede')}
+      back={{ href: `/thread/${threadId}`, label: await tr('pollEdit.back') }}
+    >
+      <PollEditForm poll={poll} threadId={threadId} />
+    </PanelPage>
+  )
+}

package/app/(board)/thread/[slug]/post/[postId]/history/page.tsx

@@ -0,0 +1,160 @@
+import type { Metadata } from 'next'
+import { notFound } from 'next/navigation'
+
+import { diffLines } from '@meith/posts'
+import { Card, CardContent, CardHeader, CardTitle } from '@meith/ui'
+
+import { PanelPage } from '@/components/shell/panel-page'
+import { getContainer } from '@/server/container'
+import { rollbackPostAction } from '@/server/content-actions'
+import { getActor } from '@/server/context'
+import { getTranslator, tr } from '@/server/i18n'
+import { resolvePostScope } from '@/server/post-scope'
+import { leadingId } from '@/view/slug-id'
+import { formatTime } from '@/view/time'
+
+export async function generateMetadata(): Promise<Metadata> {
+  return { title: await tr('postHistory.title') }
+}
+
+function revisionId(value: string | undefined): number | null {
+  if (value === undefined || !/^\d+$/.test(value)) return null
+  const parsed = Number(value)
+  return Number.isSafeInteger(parsed) ? parsed : null
+}
+
+export default async function PostHistoryPage({
+  params,
+  searchParams,
+}: {
+  params: Promise<{ slug: string; postId: string }>
+  searchParams: Promise<{ from?: string; to?: string }>
+}) {
+  const [{ slug, postId: postValue }, query, actor] = await Promise.all([
+    params,
+    searchParams,
+    getActor(),
+  ])
+  const threadId = leadingId(slug)
+  const postId = revisionId(postValue)
+  if (threadId === null || postId === null || postId === 0) notFound()
+
+  const scope = await resolvePostScope(threadId, postId, actor)
+  if (scope === null || !scope.mayViewHistory) notFound()
+
+  const revisions = await getContainer().posts.listRevisions(threadId, postId)
+  if (revisions.length < 2) notFound()
+
+  const requestedFrom = revisionId(query.from)
+  const requestedTo = revisionId(query.to)
+  const to = revisions.find((entry) => entry.revision === requestedTo) ?? revisions.at(-1)!
+  const toIndex = revisions.findIndex((entry) => entry.revision === to.revision)
+  const from =
+    revisions.find((entry) => entry.revision === requestedFrom) ??
+    revisions[Math.max(0, toIndex - 1)]!
+  const translator = await getTranslator()
+  const now = new Date()
+  const backHref = `/thread/${scope.target.thread.id}-${scope.target.thread.slug}#post-${postId}`
+
+  return (
+    <main id="board-content" tabIndex={-1} className="flex-1">
+      <PanelPage
+        title={translator.t('postHistory.title')}
+        lede={translator.t('postHistory.lede')}
+        back={{ href: backHref, label: translator.t('postHistory.back') }}
+        width="wide"
+      >
+        <Card>
+          <CardHeader>
+            <CardTitle>
+              {translator.t('postHistory.comparing', {
+                from: from.revision,
+                to: to.revision,
+              })}
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="overflow-x-auto rounded-md border border-border font-mono text-sm">
+              {diffLines(from.message, to.message).map((line) => (
+                <div
+                  key={line.id}
+                  className={
+                    line.kind === 'added'
+                      ? 'bg-primary/10 px-3 py-1 text-foreground'
+                      : line.kind === 'removed'
+                        ? 'bg-destructive/10 px-3 py-1 text-foreground'
+                        : 'px-3 py-1 text-muted-foreground'
+                  }
+                >
+                  <span className="select-none" aria-hidden="true">
+                    {line.kind === 'added' ? '+ ' : line.kind === 'removed' ? '− ' : '  '}
+                  </span>
+                  <span>{line.value || ' '}</span>
+                </div>
+              ))}
+            </div>
+          </CardContent>
+        </Card>
+
+        <section className="flex flex-col gap-3" aria-labelledby="revision-list-heading">
+          <h2 id="revision-list-heading" className="font-heading text-lg font-semibold">
+            {translator.t('postHistory.revisions')}
+          </h2>
+          {revisions.map((revision, index) => {
+            const previous = revisions[index - 1]
+            return (
+              <Card key={revision.revision}>
+                <CardContent className="flex flex-col gap-3 p-4 sm:flex-row sm:items-center sm:justify-between">
+                  <div className="flex flex-col gap-1 text-sm">
+                    <p className="font-medium">
+                      {revision.current
+                        ? translator.t('postHistory.current')
+                        : translator.t('postHistory.revision', { revision: revision.revision })}
+                    </p>
+                    <p className="text-muted-foreground">
+                      {translator.t('postHistory.editedBy', {
+                        username: revision.editedByUsername,
+                        date: formatTime(revision.createdAt, now, translator).label,
+                      })}
+                    </p>
+                    {revision.reason !== null && <p>{revision.reason}</p>}
+                  </div>
+                  <div className="flex flex-wrap items-center gap-3">
+                    {previous !== undefined && (
+                      <a
+                        className="font-medium text-primary underline underline-offset-4"
+                        href={`?from=${previous.revision}&to=${revision.revision}`}
+                      >
+                        {translator.t('postHistory.comparePrevious')}
+                      </a>
+                    )}
+                    {scope.mayRollback && !revision.current && (
+                      <form
+                        action={rollbackPostAction}
+                        className="flex flex-wrap items-center gap-2"
+                      >
+                        <input type="hidden" name="threadId" value={threadId} />
+                        <input type="hidden" name="postId" value={postId} />
+                        <input type="hidden" name="revision" value={revision.revision} />
+                        <label className="flex items-center gap-2 text-sm">
+                          <input type="checkbox" required name="confirm" value="1" />
+                          <span>{translator.t('postHistory.confirmRollback')}</span>
+                        </label>
+                        <button
+                          type="submit"
+                          className="rounded-md border border-border px-3 py-2 text-sm font-medium hover:bg-muted"
+                        >
+                          {translator.t('postHistory.rollback')}
+                        </button>
+                      </form>
+                    )}
+                  </div>
+                </CardContent>
+              </Card>
+            )
+          })}
+        </section>
+      </PanelPage>
+    </main>
+  )
+}

package/app/(board)/thread/[slug]/reply/page.tsx

@@ -0,0 +1,136 @@
+import type { Metadata } from 'next'
+import { notFound } from 'next/navigation'
+
+import { requireSlot, slotCopy } from '@meith/theme-kit'
+import { quotePrefill } from '@meith/threads'
+
+import { MultiQuoteSelection } from '@/components/content/multiquote-selection'
+import { ReplyForm } from '@/components/content/reply-form'
+import { OnboardingBanner } from '@/components/shell/onboarding-banner'
+import { attachmentLimits, canAttach } from '@/server/attachments'
+import { getContainer } from '@/server/container'
+import { getActor } from '@/server/context'
+import { getTranslator, tr } from '@/server/i18n'
+import { firstPostGuidance } from '@/server/onboarding'
+import { filterView, viewerRef } from '@/server/plugin-view'
+import { currentTheme } from '@/server/theme'
+import { replyFormCopy } from '@/view/content-copy'
+import { buildEditorToolbarModel } from '@/view/editor-toolbar'
+import { buildReplyView } from '@/view/post-form'
+import { postLink } from '@/view/post-link'
+import { leadingId } from '@/view/slug-id'
+
+export async function generateMetadata(): Promise<Metadata> {
+  return { title: await tr('page.reply') }
+}
+
+function quotedPostId(value: string | undefined): number | null {
+  if (value === undefined || !/^[1-9]\d*$/.test(value)) return null
+  const id = Number(value)
+  return Number.isSafeInteger(id) ? id : null
+}
+
+export default async function ReplyPage({
+  params,
+  searchParams,
+}: {
+  params: Promise<{ slug: string }>
+  searchParams: Promise<{ quote?: string }>
+}) {
+  const [{ slug }, query] = await Promise.all([params, searchParams])
+  const id = leadingId(slug)
+  if (id === null) notFound()
+
+  const actor = await getActor()
+  const { authorizer, posts, threadWrites, drafts } = getContainer()
+  if (threadWrites === null) notFound()
+
+  const target = await threadWrites.replyTarget(id)
+  if (target?.visibility !== 'visible') notFound()
+
+  const scope = {
+    forumId: target.forum.id,
+    forum: await authorizer.forumMatrix(actor, target.forum.id),
+    allowsAttachments: target.forum.allowAttachments,
+  }
+  if (!authorizer.can(actor, 'thread.view', scope)) notFound()
+  if (!authorizer.can(actor, 'reply.post', scope)) notFound()
+
+  const moderates = authorizer.can(actor, 'content.viewUnapproved', scope)
+  const locked = target.isLocked && !moderates
+
+  const quoteId = quotedPostId(query.quote)
+  let prefill = ''
+  if (quoteId !== null) {
+    const quoted = await posts.findQuotable(id, quoteId)
+    if (quoted) {
+      prefill = quotePrefill({
+        authorUsername: quoted.authorUsername,
+        message: quoted.message,
+        sourceHref: postLink(`/thread/${target.threadId}-${target.slug}`, quoted.id),
+        sourceLabel: await tr('markdown.quote.view-post'),
+      })
+    }
+  }
+
+  const view = buildReplyView({
+    t: await getTranslator(),
+    thread: { id: target.threadId, title: target.title, slug: target.slug },
+    errorMessage: locked ? (await getTranslator()).t('board.reply.locked') : null,
+  })
+
+  const theme = await currentTheme()
+  const PostForm = requireSlot(theme, 'PostForm')
+  const EditorToolbar = requireSlot(theme, 'EditorToolbar')
+  const translator = await getTranslator()
+  const attachable = canAttach(actor, scope)
+  const toolbarModel = locked
+    ? null
+    : await filterView(
+        'view.editor-toolbar',
+        buildEditorToolbarModel({ attachments: attachable, t: translator }),
+        viewerRef(actor),
+      )
+
+  const formModel = await filterView(
+    'view.post-form',
+    {
+      ...view,
+      regions: {
+        form: locked ? null : (
+          <>
+            <MultiQuoteSelection threadId={target.threadId} insertOnMount />
+            <ReplyForm
+              copy={replyFormCopy(await getTranslator())}
+              threadId={target.threadId}
+              seenLastPostId={target.lastPostId}
+              prefill={prefill}
+              canSubscribe={authorizer.can(actor, 'forum.subscribe', scope)}
+              attachmentLimits={attachable ? attachmentLimits(scope) : null}
+              draft={
+                actor.userId === null || drafts === null
+                  ? null
+                  : await drafts.find(actor.userId, target.forum.id, target.threadId)
+              }
+              toolbar="external"
+            />
+          </>
+        ),
+        toolbar:
+          toolbarModel === null ? null : (
+            <EditorToolbar {...toolbarModel} copy={slotCopy(theme, 'EditorToolbar', translator)} />
+          ),
+      },
+    },
+    viewerRef(actor),
+  )
+
+  const guidance = locked ? null : await firstPostGuidance(actor).catch(() => null)
+
+  return (
+    <main id="board-content" tabIndex={-1} className="flex-1">
+      {guidance !== null && <OnboardingBanner {...guidance} />}
+      <PostForm {...formModel} copy={slotCopy(theme, 'PostForm', translator)} />
+    </main>
+  )
+}

package/app/(board)/unsubscribe/page.tsx

@@ -0,0 +1,73 @@
+import type { Metadata } from 'next'
+
+import { env } from '@meith/core'
+import { readUnsubscribeToken } from '@meith/subscriptions'
+
+import { UnsubscribeConfirmForm } from '@/components/account/subscription-forms'
+import { BoardNotice } from '@/components/shell/board-notice'
+import { getTranslator, tr } from '@/server/i18n'
+import { followFormCopy } from '@/view/account-copy'
+import { unsubscribeNotice } from '@/view/subscriptions'
+
+export async function generateMetadata(): Promise<Metadata> {
+  return { title: await tr('page.unsubscribe') }
+}
+
+export default async function UnsubscribePage({
+  searchParams,
+}: {
+  searchParams: Promise<{ token?: string; done?: string }>
+}) {
+  const query = await searchParams
+  const translator = await getTranslator()
+  const done = unsubscribeNotice(query.done, translator)
+
+  const token = query.token ?? ''
+  const secret = env.AUTH_SECRET
+  const claim = token === '' || secret === undefined ? null : readUnsubscribeToken(token, secret)
+
+  return (
+    <main id="board-content" tabIndex={-1} className="flex-1">
+      <div className="mx-auto flex w-full max-w-xl flex-col gap-6 px-6 py-10">
+        <h1 className="font-heading text-2xl font-semibold">{translator.t('page.unsubscribe')}</h1>
+
+        {done !== null ? (
+          <>
+            <BoardNotice kind="info" message={done} dismissHref="/" />
+            <p className="text-sm text-muted-foreground">
+              {translator.t('unsubscribePage.doneBefore')}{' '}
+              <a
+                href="/subscriptions"
+                className="font-medium text-foreground underline decoration-border underline-offset-2 hover:decoration-foreground"
+              >
+                {translator.t('unsubscribePage.subscriptions')}
+              </a>
+              {translator.t('unsubscribePage.doneAfter')}
+            </p>
+          </>
+        ) : claim === null ? (
+          <p className="text-sm text-muted-foreground">
+            {translator.t('unsubscribePage.invalidBefore')}{' '}
+            <a
+              href="/subscriptions"
+              className="font-medium text-foreground underline decoration-border underline-offset-2 hover:decoration-foreground"
+            >
+              {translator.t('unsubscribePage.subscriptions')}
+            </a>{' '}
+            {translator.t('unsubscribePage.invalidAfter')}
+          </p>
+        ) : (
+          <UnsubscribeConfirmForm
+            token={token}
+            description={
+              claim.scope === 'email'
+                ? await tr('page.unsubscribe.emailScope')
+                : await tr('page.unsubscribe.targetScope')
+            }
+            copy={followFormCopy(translator)}
+          />
+        )}
+      </div>
+    </main>
+  )
+}

package/app/(board)/usercp/avatar/page.tsx

@@ -0,0 +1,56 @@
+import type { Metadata } from 'next'
+import { notFound } from 'next/navigation'
+
+import { avatarUrl } from '@meith/avatars'
+import { AVATAR_BOX, AVATAR_MAX_BYTES } from '@meith/avatars/limits'
+
+import { AvatarForm } from '@/components/account/avatar-form'
+import { BoardNotice } from '@/components/shell/board-notice'
+import { PanelPage } from '@/components/shell/panel-page'
+import { avatarFor, canUploadAvatar } from '@/server/avatars'
+import { getActor } from '@/server/context'
+import { getTranslator, tr } from '@/server/i18n'
+import { avatarFormCopy } from '@/view/account-copy'
+import { userCpNotice } from '@/view/usercp'
+
+export async function generateMetadata(): Promise<Metadata> {
+  return { title: await tr('page.avatar') }
+}
+
+export default async function AvatarPage({
+  searchParams,
+}: {
+  searchParams: Promise<{ saved?: string }>
+}) {
+  const query = await searchParams
+  const actor = await getActor()
+
+  if (actor.userId === null || !canUploadAvatar(actor)) notFound()
+
+  const avatar = await avatarFor(actor.userId)
+  const notice = userCpNotice(query, await getTranslator())
+
+  return (
+    <PanelPage title={await tr('page.avatar')} lede={await tr('page.shown-beside-every-post-make')}>
+      {notice !== null && (
+        <BoardNotice kind={notice.kind} message={notice.message} dismissHref="/usercp/avatar" />
+      )}
+
+      <AvatarForm
+        currentUrl={avatarUrl(actor.userId, avatar)}
+        status={avatar.status}
+        failureReason={avatar.failureReason}
+        locked={avatar.locked}
+        lockedReason={avatar.lockedReason}
+        copy={avatarFormCopy(
+          {
+            maxMegabytes: Math.round(AVATAR_MAX_BYTES / (1024 * 1024)),
+            width: AVATAR_BOX.width,
+            height: AVATAR_BOX.height,
+          },
+          await getTranslator(),
+        )}
+      />
+    </PanelPage>
+  )
+}

package/app/(board)/usercp/contacts/page.tsx

@@ -0,0 +1,141 @@
+import type { Metadata } from 'next'
+import { notFound } from 'next/navigation'
+
+import { MAX_RELATIONS } from '@meith/relations'
+
+import { RemoveRelationForm } from '@/components/account/relation-forms'
+import { BoardNotice } from '@/components/shell/board-notice'
+import { PANEL_LIST } from '@/components/shell/panel-list'
+import { PanelPage } from '@/components/shell/panel-page'
+import { getActor } from '@/server/context'
+import { getTranslator, tr } from '@/server/i18n'
+import { relationService } from '@/server/relations'
+import { getViewerPreferences } from '@/server/viewer-preferences'
+import { buildContactsView, type ContactRowView, contactsNotice } from '@/view/contacts'
+
+export async function generateMetadata(): Promise<Metadata> {
+  return { title: await tr('page.buddies-ignored-members') }
+}
+
+const RETURN_TO = '/usercp/contacts'
+
+export default async function ContactsPage({
+  searchParams,
+}: {
+  searchParams: Promise<{ added?: string; ignored?: string; removed?: string }>
+}) {
+  const query = await searchParams
+  const actor = await getActor()
+  const translator = await getTranslator()
+  const service = relationService()
+
+  if (actor.userId === null || service === null) notFound()
+
+  const _preferences = await getViewerPreferences()
+  const [buddies, ignored] = await Promise.all([
+    service.list(actor.userId, 'buddy'),
+    service.list(actor.userId, 'ignore'),
+  ])
+
+  const view = buildContactsView({
+    kind: 'buddy',
+    buddies,
+    ignored,
+    limit: MAX_RELATIONS,
+    now: new Date(),
+    t: await getTranslator(),
+  })
+
+  const notice = contactsNotice(query, await getTranslator())
+
+  return (
+    <PanelPage
+      title={await tr('page.buddies-ignored-members')}
+      lede={translator.t('board.contacts.lede', { total: view.total, limit: view.limit })}
+    >
+      {notice !== null && (
+        <BoardNotice kind={notice.kind} message={notice.message} dismissHref={RETURN_TO} />
+      )}
+
+      <section className="flex flex-col gap-3">
+        <h2 className="font-heading text-lg font-semibold">
+          {translator.t('board.contacts.buddies')}{' '}
+          <span className="text-sm font-normal text-muted-foreground">
+            {view.onlineCount > 0
+              ? translator.t('board.contacts.onlineNow', { count: view.onlineCount })
+              : null}
+          </span>
+        </h2>
+
+        {view.buddies.length === 0 ? (
+          <p className="text-sm text-muted-foreground">
+            {translator.t('board.contacts.emptyBuddies')}
+          </p>
+        ) : (
+          <ul className={PANEL_LIST}>
+            {view.buddies.map((row) => (
+              <ContactLine key={row.userId} row={row} />
+            ))}
+          </ul>
+        )}
+      </section>
+
+      <section className="flex flex-col gap-3">
+        <h2 className="font-heading text-lg font-semibold">
+          {translator.t('board.contacts.ignored')}
+        </h2>
+        <p className="text-sm text-muted-foreground">
+          {translator.t('board.contacts.ignoredHint')}
+        </p>
+
+        {view.ignored.length === 0 ? (
+          <p className="text-sm text-muted-foreground">
+            {translator.t('board.contacts.emptyIgnored')}
+          </p>
+        ) : (
+          <ul className={PANEL_LIST}>
+            {view.ignored.map((row) => (
+              <ContactLine key={row.userId} row={row} />
+            ))}
+          </ul>
+        )}
+      </section>
+    </PanelPage>
+  )
+}
+
+async function ContactLine({ row }: { row: ContactRowView }) {
+  const translator = await getTranslator()
+  return (
+    <li className="flex flex-wrap items-center gap-3 px-4 py-3">
+      <a
+        href={row.profileHref}
+        className="text-sm font-medium text-foreground hover:underline underline-offset-2"
+      >
+        {row.username}
+      </a>
+
+      {row.isOnline ? (
+        <span className="text-xs font-medium text-moderation-approved">
+          {translator.t('board.contacts.online')}
+        </span>
+      ) : (
+        row.lastSeenLabel !== null && (
+          <span className="text-xs text-muted-foreground">{row.lastSeenLabel}</span>
+        )
+      )}
+
+      <span className="ml-auto flex items-center gap-4">
+        {row.messageHref !== null && (
+          <a
+            href={row.messageHref}
+            className="text-sm font-medium text-foreground underline decoration-border underline-offset-2 hover:decoration-foreground"
+          >
+            {translator.t('board.contacts.message')}
+          </a>
+        )}
+        <RemoveRelationForm userId={row.userId} username={row.username} returnTo={RETURN_TO} />
+      </span>
+    </li>
+  )
+}

package/app/(board)/usercp/email/confirm/page.tsx

@@ -0,0 +1,52 @@
+import type { Metadata } from 'next'
+import { notFound, redirect } from 'next/navigation'
+
+import { MemberSettingsService } from '@meith/accounts'
+
+import { recordAuthEvent } from '@/server/auth-events'
+import { getContainer } from '@/server/container'
+import { getActor } from '@/server/context'
+import { getTranslator, tr } from '@/server/i18n'
+import { sendEmailChangeNotice } from '@/server/usercp-mail'
+
+export async function generateMetadata(): Promise<Metadata> {
+  return { title: await tr('page.confirm-e-mail-address') }
+}
+
+export default async function ConfirmEmailPage({
+  searchParams,
+}: {
+  searchParams: Promise<{ token?: string }>
+}) {
+  const token = (await searchParams).token ?? ''
+  const actor = await getActor()
+  const { memberSettings, accountStore } = getContainer()
+
+  if (memberSettings === null) notFound()
+  if (actor.userId === null) {
+    redirect(`/login?next=${encodeURIComponent(`/usercp/email/confirm?token=${token}`)}`)
+  }
+
+  const outcome =
+    token === ''
+      ? null
+      : await new MemberSettingsService({
+          settings: memberSettings,
+          accounts: accountStore.accounts,
+          sessions: accountStore.sessions,
+          remember: accountStore.remember,
+          tokens: accountStore.tokens,
+        }).confirmEmailChange(token, actor.userId)
+
+  if (outcome !== null) {
+    await sendEmailChangeNotice({
+      stage: 'adopted',
+      previousEmail: outcome.previousEmail,
+      email: outcome.email,
+      t: await getTranslator(),
+    })
+    await recordAuthEvent({ userId: outcome.userId, kind: 'email_changed' })
+  }
+
+  redirect(outcome === null ? '/usercp/security?failed=1' : '/usercp/security?confirmed=1')
+}

package/app/(board)/usercp/layout.tsx

@@ -0,0 +1,23 @@
+import { headers } from 'next/headers'
+import { notFound, redirect } from 'next/navigation'
+
+import { UserCpShell } from '@/components/account/usercp-shell'
+import { getContainer } from '@/server/container'
+import { getActor } from '@/server/context'
+import { PATH_HEADER } from '@/server/location-header'
+import { isSafeLocalPath } from '@/server/safe-path'
+
+export default async function UserCpLayout({ children }: { children: React.ReactNode }) {
+  const actor = await getActor()
+  const { memberSettings } = getContainer()
+
+  if (memberSettings === null) notFound()
+
+  if (actor.userId === null) {
+    const path = (await headers()).get(PATH_HEADER)
+    const next = path !== null && isSafeLocalPath(path) ? path : '/usercp'
+    redirect(`/login?next=${encodeURIComponent(next)}`)
+  }
+
+  return <UserCpShell>{children}</UserCpShell>
+}