@meith/web 0.30.1 → 0.32.0

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

@@ -2,6 +2,7 @@ import type { Metadata } from 'next'
 import { notFound } from 'next/navigation'
 
 import { SubscriptionService } from '@meith/subscriptions'
+import { TextLink } from '@meith/ui'
 
 import { SubscriptionRowForm } from '@/components/account/subscription-forms'
 import { BoardNotice } from '@/components/shell/board-notice'
@@ -52,12 +53,9 @@ export default async function SubscriptionsPage({
       lede={
         <>
           What you follow, and how often you hear about it.{' '}
-          <a
-            href="/notifications/preferences"
-            className="font-medium text-foreground underline decoration-border underline-offset-2 hover:decoration-foreground"
-          >
+          <TextLink href="/notifications/preferences">
             {await tr('page.whether-any-it-also-arrives')}
-          </a>{' '}
+          </TextLink>{' '}
           is a separate setting.
         </>
       }
@@ -120,12 +118,9 @@ function Section({
           {rows.map((row) => (
             <li key={row.key} className="rounded-lg border border-border bg-card p-4">
               <div className="flex flex-wrap items-baseline justify-between gap-2">
-                <a
-                  href={row.href}
-                  className="text-sm font-medium text-foreground underline decoration-border underline-offset-2 hover:decoration-foreground"
-                >
+                <TextLink href={row.href} size="sm">
                   {row.title}
-                </a>
+                </TextLink>
                 <span className="text-xs text-muted-foreground">
                   {since[0]}
                   <time dateTime={row.since.iso}>{row.since.label}</time>

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

@@ -4,11 +4,18 @@ import { notFound } from 'next/navigation'
 import { requireSlot, slotCopy } from '@meith/theme-kit'
 
 import { DeletePostForm, EditPostForm, RestorePostForm } from '@/components/content/edit-post-form'
+import {
+  attachmentLimits as attachmentLimitsFor,
+  attachmentsForPosts,
+  canAttach,
+  resolveEditAttachmentScope,
+} from '@/server/attachments'
 import { getActor } from '@/server/context'
 import { getTranslator, tr } from '@/server/i18n'
 import { filterView, viewerRef } from '@/server/plugin-view'
 import { resolvePostScope } from '@/server/post-scope'
 import { currentTheme } from '@/server/theme'
+import { editableAttachment } from '@/view/attachments'
 import { editPostFormCopy } from '@/view/content-copy'
 import { buildEditorToolbarModel } from '@/view/editor-toolbar'
 import { buildEditView } from '@/view/post-form'
@@ -73,6 +80,18 @@ export default async function EditPostPage({
       <EditorToolbar {...toolbarModel} copy={slotCopy(theme, 'EditorToolbar', translator)} />
     )
 
+  const editingActor = await getActor()
+  const attachmentScope = editable
+    ? await resolveEditAttachmentScope(editingActor, scope.target.forum.id)
+    : null
+  const existingAttachments = editable
+    ? (await attachmentsForPosts([post])).map(editableAttachment)
+    : []
+  const editAttachmentLimits =
+    attachmentScope !== null && canAttach(editingActor, attachmentScope)
+      ? attachmentLimitsFor(attachmentScope)
+      : null
+
   const formModel = await filterView(
     'view.post-form',
     {
@@ -89,6 +108,8 @@ export default async function EditPostPage({
                 postId={post}
                 message={scope.target.post.message}
                 reason={null}
+                attachments={existingAttachments}
+                attachmentLimits={editAttachmentLimits}
                 toolbar={editorToolbar}
               />
             )}

package/app/(board)/thread/[slug]/feed.xml/route.ts

@@ -1,13 +1,14 @@
 import { activeWordFilter } from '@/server/content-admin'
 import { feedFor } from '@/server/feed-builder'
 import { feedResponse, noFeed, offlineFeed } from '@/server/feed-routes'
-import { FEED_LIMIT, feedRepository, origin, publicScope } from '@/server/syndication'
+import { feedScopeForRequest } from '@/server/feed-token'
+import { FEED_LIMIT, feedRepository, origin } from '@/server/syndication'
 import { leadingId } from '@/view/slug-id'
 
 export const dynamic = 'force-dynamic'
 
 export async function GET(
-  _request: Request,
+  request: Request,
   { params }: { params: Promise<{ slug: string }> },
 ): Promise<Response> {
   const offline = await offlineFeed()
@@ -20,7 +21,8 @@ export async function GET(
   const id = leadingId(slug)
   if (id === null) return noFeed()
 
-  const posts = await repo.recentPosts(id, FEED_LIMIT, await publicScope())
+  const { scope, tokened } = await feedScopeForRequest(request)
+  const posts = await repo.recentPosts(id, FEED_LIMIT, scope)
   if (posts.length === 0) return noFeed()
 
   const first = posts[0]!
@@ -38,5 +40,6 @@ export async function GET(
     }),
     'rss',
     'thread',
+    { private: tokened },
   )
 }

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

@@ -1,5 +1,6 @@
 import type { Metadata } from 'next'
 import { notFound, redirect } from 'next/navigation'
+import { after as scheduleAfterResponse } from 'next/server'
 
 import { currentRequestId } from '@meith/core/logger'
 import { acceptsThreads, canHoldThreads } from '@meith/forums'
@@ -19,6 +20,7 @@ import { ThreadToolsForm } from '@/components/moderation/thread-tools-form'
 import { BoardNotice } from '@/components/shell/board-notice'
 import { BOARD_MEASURE } from '@/components/shell/measure'
 import { attachmentLimits, attachmentsForPosts, canAttach } from '@/server/attachments'
+import { autoWatchChecksByDefault } from '@/server/auto-watch'
 import { avatarsFor } from '@/server/avatars'
 import { getContainer } from '@/server/container'
 import { activeVocabulary, activeWordFilter } from '@/server/content-admin'
@@ -30,12 +32,14 @@ import { cspNonce } from '@/server/nonce'
 import { pageMetadata } from '@/server/page-metadata'
 import { filterView, pluginRegion, viewerRef } from '@/server/plugin-view'
 import { resolvePollScope } from '@/server/poll-scope'
+import { presenceFor } from '@/server/presence'
 import { postbitProfileFields } from '@/server/profile-fields'
 import { viewerIgnoredIds } from '@/server/relations'
 import { reputationSettings, thanksForPosts } from '@/server/reputation'
 import { getSettings } from '@/server/settings'
 import { signaturesFor } from '@/server/signatures'
 import { currentTheme } from '@/server/theme'
+import { resolveUnreadGoto } from '@/server/unread-goto'
 import { getViewerPreferences } from '@/server/viewer-preferences'
 import { followFormCopy } from '@/view/account-copy'
 import { attachmentsByPost } from '@/view/attachments'
@@ -171,6 +175,7 @@ export default async function ThreadPage({
     replied?: string
     posted?: string
     post?: string
+    goto?: string
     removed?: string
     unchanged?: string
     tool?: string
@@ -194,6 +199,7 @@ export default async function ThreadPage({
     posts,
     threads,
     authorizer,
+    readState,
     threadViews,
     threadWrites,
     postWrites,
@@ -236,6 +242,19 @@ export default async function ThreadPage({
     }
   }
 
+  if (query.goto === 'unread' && actor.userId !== null && readState !== null) {
+    const location = await resolveUnreadGoto(
+      posts,
+      readState,
+      actor.userId,
+      { id: thread.id, forumId: forum.id, lastPostId: thread.lastPost?.postId ?? null },
+      { scope, pageSize: preferences.postsPerPage },
+    )
+    if (location !== null) {
+      redirect(locatedHref(`/thread/${thread.id}-${thread.slug}`, query, location))
+    }
+  }
+
   if (threadViews && after === undefined) {
     await threadViews.record(thread.id).catch(() => undefined)
   }
@@ -248,6 +267,18 @@ export default async function ThreadPage({
     scope,
   })
 
+  if (readState !== null && actor.userId !== null) {
+    const readerId = actor.userId
+    const lastRenderedPostId = postPage.rows.at(-1)?.id
+    if (lastRenderedPostId !== undefined) {
+      scheduleAfterResponse(() =>
+        readState
+          .markThreadRead(readerId, thread.id, lastRenderedPostId, new Date())
+          .catch(() => undefined),
+      )
+    }
+  }
+
   const pager = buildOffsetPager({
     path: `/thread/${thread.id}-${thread.slug}`,
     params: query,
@@ -350,12 +381,25 @@ export default async function ThreadPage({
 
   const identities = await identitiesFor(authorIds)
 
+  const presence = await presenceFor(authorIds)
+
   const attachments = attachmentsByPost(
     await attachmentsForPosts(postPage.rows.map((row) => row.id)),
   )
 
   const wordFilter = await activeWordFilter()
 
+  const { subscriptions } = getContainer()
+  const followMode =
+    subscriptions === null || actor.userId === null
+      ? null
+      : await subscriptions.modeFor(actor.userId, 'thread', thread.id)
+  const followOffered = subscriptions !== null && actor.userId !== null
+  const followModes = buildSubscriptionsView({
+    rows: [],
+    now: new Date(),
+  }).modes
+
   const view = buildThreadView({
     thread,
     wordFilter,
@@ -371,6 +415,8 @@ export default async function ThreadPage({
       actor.userId === null || postPage.rows.at(-1) === undefined
         ? null
         : `/api/read/thread/${thread.id}?post=${postPage.rows.at(-1)!.id}`,
+    watchOffered: followOffered,
+    watchMode: followMode,
     now: new Date(),
     t: await getTranslator(),
     authorFields,
@@ -378,6 +424,8 @@ export default async function ThreadPage({
     attachments,
     avatars,
     identities,
+    presence,
+    viewerSeesInvisible: authorizer.can(actor, 'modcp.access'),
     ignoredIds,
     revealedPostIds: revealedFrom(query.reveal),
     currentHref:
@@ -385,17 +433,6 @@ export default async function ThreadPage({
       (after === undefined ? `?page=${page}` : `?after=${after}&page=${page}`),
   })
 
-  const { subscriptions } = getContainer()
-  const followMode =
-    subscriptions === null || actor.userId === null
-      ? null
-      : await subscriptions.modeFor(actor.userId, 'thread', thread.id)
-  const followOffered = subscriptions !== null && actor.userId !== null
-  const followModes = buildSubscriptionsView({
-    rows: [],
-    now: new Date(),
-  }).modes
-
   const theme = await currentTheme()
   const ThreadView = requireSlot(theme, 'ThreadView')
   const Navigation = requireSlot(theme, 'Navigation')
@@ -548,6 +585,7 @@ export default async function ThreadPage({
         seenLastPostId={thread.lastPost?.postId ?? null}
         prefill=""
         canSubscribe={authorizer.can(actor, 'forum.subscribe', replyTarget)}
+        subscribeDefault={autoWatchChecksByDefault(preferences.autoWatchRepliedThreads)}
         attachmentLimits={quickReplyAttachable ? attachmentLimits(replyTarget) : null}
         draft={
           actor.userId === null || drafts === null

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

@@ -8,6 +8,7 @@ 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 { autoWatchChecksByDefault, autoWatchPreference } from '@/server/auto-watch'
 import { getContainer } from '@/server/container'
 import { activeWordFilter } from '@/server/content-admin'
 import { getActor } from '@/server/context'
@@ -86,6 +87,9 @@ export default async function ReplyPage({
   const EditorToolbar = requireSlot(theme, 'EditorToolbar')
   const translator = await getTranslator()
   const attachable = canAttach(actor, scope)
+  const subscribeDefault = autoWatchChecksByDefault(
+    await autoWatchPreference(actor.userId, 'reply'),
+  )
   const toolbarModel = locked
     ? null
     : await filterView(
@@ -113,6 +117,7 @@ export default async function ReplyPage({
               seenLastPostId={target.lastPostId}
               prefill={prefill}
               canSubscribe={authorizer.can(actor, 'forum.subscribe', scope)}
+              subscribeDefault={subscribeDefault}
               attachmentLimits={attachable ? attachmentLimits(scope) : null}
               draft={
                 actor.userId === null || drafts === null

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

@@ -2,6 +2,7 @@ import type { Metadata } from 'next'
 
 import { env } from '@meith/core'
 import { readUnsubscribeToken } from '@meith/subscriptions'
+import { TextLink } from '@meith/ui'
 
 import { UnsubscribeConfirmForm } from '@/components/account/subscription-forms'
 import { BoardNotice } from '@/components/shell/board-notice'
@@ -36,24 +37,18 @@ export default async function UnsubscribePage({
             <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"
-              >
+              <TextLink href="/subscriptions">
                 {translator.t('unsubscribePage.subscriptions')}
-              </a>
+              </TextLink>
               {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"
-            >
+            <TextLink href="/subscriptions">
               {translator.t('unsubscribePage.subscriptions')}
-            </a>{' '}
+            </TextLink>{' '}
             {translator.t('unsubscribePage.invalidAfter')}
           </p>
         ) : (
@@ -64,7 +59,9 @@ export default async function UnsubscribePage({
                 ? await tr('page.unsubscribe.massMailScope')
                 : claim.scope === 'email'
                   ? await tr('page.unsubscribe.emailScope')
-                  : await tr('page.unsubscribe.targetScope')
+                  : claim.scope === 'board-digest'
+                    ? await tr('page.unsubscribe.boardDigestScope')
+                    : await tr('page.unsubscribe.targetScope')
             }
             copy={followFormCopy(translator)}
           />

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

@@ -2,6 +2,7 @@ import type { Metadata } from 'next'
 import { notFound } from 'next/navigation'
 
 import { MAX_RELATIONS } from '@meith/relations'
+import { TextLink } from '@meith/ui'
 
 import { RemoveRelationForm } from '@/components/account/relation-forms'
 import { BoardNotice } from '@/components/shell/board-notice'
@@ -123,12 +124,9 @@ async function ContactLine({ row }: { row: ContactRowView }) {
 
       <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"
-          >
+          <TextLink href={row.messageHref} size="sm">
             {translator.t('board.contacts.message')}
-          </a>
+          </TextLink>
         )}
         <RemoveRelationForm userId={row.userId} username={row.username} returnTo={RETURN_TO} />
       </span>

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

@@ -0,0 +1,70 @@
+import type { Metadata } from 'next'
+import { notFound } from 'next/navigation'
+
+import { buttonVariants, TextLink } from '@meith/ui'
+
+import { DeleteDraftForm } from '@/components/account/draft-forms'
+import { PanelPage } from '@/components/shell/panel-page'
+import { getContainer } from '@/server/container'
+import { getActor } from '@/server/context'
+import { getTranslator, tr } from '@/server/i18n'
+import { buildDraftsView, draftsPageCopy } from '@/view/drafts'
+
+export async function generateMetadata(): Promise<Metadata> {
+  return { title: await tr('page.drafts') }
+}
+
+export default async function DraftsPage() {
+  const actor = await getActor()
+  const { drafts } = getContainer()
+  if (actor.userId === null || drafts === null) notFound()
+
+  const translator = await getTranslator()
+  const rows = buildDraftsView({
+    drafts: await drafts.listByUser(actor.userId),
+    now: new Date(),
+    t: translator,
+  })
+  const copy = draftsPageCopy(translator)
+  const resumeLabel = await tr('draftsPage.resume')
+
+  return (
+    <PanelPage title={await tr('page.drafts')} lede={await tr('draftsPage.lede')}>
+      {rows.length === 0 ? (
+        <p className="rounded-lg border border-border bg-card p-4 text-sm text-muted-foreground">
+          {await tr('draftsPage.none')}
+        </p>
+      ) : (
+        <ul className="flex flex-col gap-3">
+          {rows.map((row) => (
+            <li key={row.key} className="rounded-lg border border-border bg-card p-4">
+              <div className="flex flex-wrap items-baseline justify-between gap-2">
+                <span className="flex flex-col gap-0.5">
+                  <span className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
+                    {row.kindLabel}
+                  </span>
+                  <TextLink href={row.resumeHref} size="sm">
+                    {row.targetName}
+                  </TextLink>
+                </span>
+                <time dateTime={row.updatedAt.iso} className="text-xs text-muted-foreground">
+                  {row.updatedAt.label}
+                </time>
+              </div>
+
+              <div className="mt-3 flex flex-wrap items-center gap-2">
+                <a
+                  href={row.resumeHref}
+                  className={buttonVariants({ variant: 'primary', size: 'sm' })}
+                >
+                  {resumeLabel}
+                </a>
+                <DeleteDraftForm forumId={row.forumId} threadId={row.threadId} copy={copy} />
+              </div>
+            </li>
+          ))}
+        </ul>
+      )}
+    </PanelPage>
+  )
+}

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

@@ -9,7 +9,13 @@ import { getActor } from '@/server/context'
 import { catalogs, getTranslator, tr } from '@/server/i18n'
 import { getSettings } from '@/server/settings'
 import { optionsFormCopy } from '@/view/account-copy'
-import { localeChoices, optionsFormValues, timezoneChoices, userCpNotice } from '@/view/usercp'
+import {
+  autoWatchChoices,
+  localeChoices,
+  optionsFormValues,
+  timezoneChoices,
+  userCpNotice,
+} from '@/view/usercp'
 
 export async function generateMetadata(): Promise<Metadata> {
   return { title: await tr('page.options') }
@@ -45,6 +51,7 @@ export default async function OptionsPage({
         {...values}
         timezones={timezoneChoices(await getTranslator())}
         locales={localeChoices(catalogs.locales, await getTranslator())}
+        autoWatchChoices={autoWatchChoices()}
         copy={optionsFormCopy(
           board.get('display.posts_per_page'),
           board.get('display.threads_per_page'),

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

@@ -4,6 +4,7 @@ import { notFound } from 'next/navigation'
 import { PASSKEY_LIMIT, providerLabel } from '@meith/accounts'
 
 import { ActiveSessions, type SessionView } from '@/components/account/active-sessions'
+import { FeedTokenPanel } from '@/components/account/feed-token'
 import { PasskeyEnrol } from '@/components/account/passkey-enrol'
 import { type ActivityView, SecurityActivity } from '@/components/account/security-activity'
 import {
@@ -22,6 +23,7 @@ import { memberSecurityActivity } from '@/server/auth-events'
 import { getContainer } from '@/server/container'
 import { getActor } from '@/server/context'
 import { memberManagedSignIns, passkeysEnabled, signInProviders } from '@/server/federation'
+import { feedTokenSummary } from '@/server/feed-token'
 import { getTranslator, tr } from '@/server/i18n'
 import { currentSessionId } from '@/server/session-actions'
 import { pendingEnrolment, secondFactorPosture, twoFactorState } from '@/server/two-factor'
@@ -29,6 +31,8 @@ import {
   activeSessionsCopy,
   activityDetailLabel,
   emailFormCopy,
+  feedTokenCopy,
+  feedTokenDetailLabel,
   linkedUsageLabel,
   passkeyUsageLabel,
   passwordFormCopy,
@@ -159,6 +163,12 @@ export default async function SecurityPage({
 
   const anywhereToSignIn = providers.length > 0 || linked.length > 0
 
+  const feedToken = await feedTokenSummary(actor.userId)
+  const feedTokenDetail =
+    feedToken === null
+      ? null
+      : feedTokenDetailLabel(on(feedToken.createdAt) ?? '', on(feedToken.lastUsedAt), translator)
+
   return (
     <PanelPage
       title={await tr('page.account-security')}
@@ -211,6 +221,12 @@ export default async function SecurityPage({
 
       <ActiveSessions sessions={sessionView} copy={activeSessionsCopy(translator)} />
 
+      <FeedTokenPanel
+        active={feedToken !== null}
+        detail={feedTokenDetail}
+        copy={feedTokenCopy(translator)}
+      />
+
       <SecurityActivity events={activity} copy={securityActivityCopy(translator)} />
     </PanelPage>
   )

package/app/admin/antispam/page.tsx

@@ -1,6 +1,6 @@
 import type { Metadata } from 'next'
 
-import { cn } from '@meith/ui'
+import { cn, TextLink } from '@meith/ui'
 
 import { CaptchaQuestionRowForm, NewCaptchaQuestionForm } from '@/components/admin/content-forms'
 import { PANEL_CARD } from '@/components/shell/panel-list'
@@ -34,12 +34,9 @@ export default async function AdminAntispamPage() {
       lede={
         <>
           The thresholds are in{' '}
-          <a
-            href="/admin/settings?group=antispam"
-            className="font-medium text-foreground underline decoration-border underline-offset-2 hover:decoration-foreground"
-          >
+          <TextLink href="/admin/settings?group=antispam">
             {await tr('page.settings-anti-spam')}
-          </a>
+          </TextLink>
           {translator.t('adminAntispam.ledeEnd')}
         </>
       }
@@ -115,12 +112,7 @@ export default async function AdminAntispamPage() {
             </dt>
             <dd>
               {translator.t('adminAntispam.firstPostsBefore')}{' '}
-              <a
-                href="/modcp"
-                className="font-medium text-foreground underline decoration-border underline-offset-2 hover:decoration-foreground"
-              >
-                {translator.t('adminAntispam.moderationQueue')}
-              </a>
+              <TextLink href="/modcp">{translator.t('adminAntispam.moderationQueue')}</TextLink>
               {translator.t('adminAntispam.firstPostsAfter')}
             </dd>
           </div>

package/app/admin/content/attachments/page.tsx

@@ -1,6 +1,6 @@
 import type { Metadata } from 'next'
 
-import { cn } from '@meith/ui'
+import { cn, TextLink } from '@meith/ui'
 
 import { DeleteAttachmentForm } from '@/components/admin/content-forms'
 import { PANEL_CARD, PANEL_LIST, PANEL_NOTE, PANEL_ROW } from '@/components/shell/panel-list'
@@ -160,12 +160,9 @@ export default async function AdminAttachmentsPage({
                   {row.threadSlug !== null && (
                     <>
                       {' · '}
-                      <a
-                        href={postLink(`/thread/${row.threadSlug}`, row.postId)}
-                        className="font-medium text-foreground underline decoration-border underline-offset-2 hover:decoration-foreground"
-                      >
+                      <TextLink href={postLink(`/thread/${row.threadSlug}`, row.postId)}>
                         {translator.t('adminAttachments.post')}
-                      </a>
+                      </TextLink>
                     </>
                   )}
                 </span>

package/app/admin/content/page.tsx

@@ -1,6 +1,6 @@
 import type { Metadata } from 'next'
 
-import { cn } from '@meith/ui'
+import { cn, TextLink } from '@meith/ui'
 
 import {
   DeletePrefixForm,
@@ -107,23 +107,13 @@ export default async function AdminContentPage() {
       <section className={cn(PANEL_CARD, 'gap-2 text-sm')}>
         <h2 className="font-heading text-lg font-semibold">{t.t('contentPage.announcements')}</h2>
         <p className="text-muted-foreground">{t.t('contentPage.announcementsHelp')}</p>
-        <a
-          href="/admin/content/announcements"
-          className="font-medium text-foreground underline decoration-border underline-offset-2 hover:decoration-foreground"
-        >
-          {await tr('page.announcements-b')}
-        </a>
+        <TextLink href="/admin/content/announcements">{await tr('page.announcements-b')}</TextLink>
       </section>
 
       <section className={cn(PANEL_CARD, 'gap-2 text-sm')}>
         <h2 className="font-heading text-lg font-semibold">{t.t('contentPage.attachments')}</h2>
         <p className="text-muted-foreground">{t.t('contentPage.attachmentsHelp')}</p>
-        <a
-          href="/admin/content/attachments"
-          className="font-medium text-foreground underline decoration-border underline-offset-2 hover:decoration-foreground"
-        >
-          {await tr('page.attachments-b')}
-        </a>
+        <TextLink href="/admin/content/attachments">{await tr('page.attachments-b')}</TextLink>
       </section>
 
       <section className={PANEL_CARD}>

package/app/admin/forums/[id]/permissions/page.tsx

@@ -1,7 +1,7 @@
 import type { Metadata } from 'next'
 import { notFound } from 'next/navigation'
 
-import { CopyPermissionsForm, ForumPermissionRowForm } from '@/components/admin/forum-forms'
+import { CopyPermissionsForm, ForumPermissionMatrixForm } from '@/components/admin/forum-forms'
 import { PANEL_CARD } from '@/components/shell/panel-list'
 import { PanelPage } from '@/components/shell/panel-page'
 import { adminPageContext } from '@/server/admin'
@@ -42,18 +42,15 @@ export default async function ForumPermissionsPage({
         </>
       }
       gap="loose"
+      width="wide"
     >
-      <div className="flex flex-col gap-6">
-        {view.rows.map((row) => (
-          <ForumPermissionRowForm
-            key={row.groupId}
-            forumId={view.forum.id}
-            row={row}
-            forumTitles={forumTitles}
-            copy={forumAdminCopy(t)}
-          />
-        ))}
-      </div>
+      <ForumPermissionMatrixForm
+        forumId={view.forum.id}
+        columns={view.columns}
+        fields={view.fields}
+        forumTitles={forumTitles}
+        copy={forumAdminCopy(t)}
+      />
 
       <section className={PANEL_CARD}>
         <h2 className="font-heading text-lg font-semibold">{await tr('page.copy-subforums')}</h2>