Merge pull request #2 from jouwdan/claude/docs-folder-next-step-019o7v

Author: jouwdan

apps/forum/app/(board)/forum/[slug]/new/page.tsx

@@ -0,0 +1,93 @@
+import type { Metadata } from 'next'
+import { notFound } from 'next/navigation'
+
+import { requireSlot } from '@forum/theme-kit'
+
+import { NewThreadForm } from '@/components/content/new-thread-form'
+import { getContainer } from '@/server/container'
+import { getActor } from '@/server/context'
+import { activeTheme } from '@/server/theme'
+import { buildNewThreadView } from '@/view/post-form'
+
+export const metadata: Metadata = { title: 'New thread' }
+
+function forumId(value: string): number | null {
+  const match = /^(\d+)(?:-|$)/.exec(value)
+  if (!match) return null
+  const id = Number(match[1])
+  return Number.isSafeInteger(id) && id > 0 ? id : null
+}
+
+export default async function NewThreadPage({
+  params,
+}: {
+  params: Promise<{ slug: string }>
+}) {
+  const { slug } = await params
+  const id = forumId(slug)
+  if (id === null) notFound()
+
+  const actor = await getActor()
+  const { authorizer, forums, threadWrites } = getContainer()
+
+  /*
+   * Fixture mode has no writer, so the composer does not exist there rather
+   * than existing and failing on submit — the same rule the scheduler and the
+   * CLI follow: never advertise a capability that is not there (D32).
+   */
+  if (threadWrites === null) notFound()
+
+  const forum = await forums.findById(id)
+  if (!forum || forum.type !== 'forum') notFound()
+
+  const matrix = await authorizer.forumMatrix(actor, id)
+  const target = { forumId: id, forum: matrix }
+  /*
+   * Two checks, not one. Without `thread.view` the forum is not something this
+   * actor may know exists, so the answer is the same 404 the listing gives;
+   * with it but without `thread.post`, they may look and not write. The action
+   * repeats both — rendering a page is not authorisation.
+   */
+  if (!authorizer.can(actor, 'thread.view', target)) notFound()
+  if (!authorizer.can(actor, 'thread.post', target)) notFound()
+
+  const rules = await threadWrites.postingRules(id)
+  if (!rules) notFound()
+
+  const prefixes = await threadWrites.listPrefixes(id)
+
+  const view = buildNewThreadView({
+    forum: { id: forum.id, title: forum.title, slug: forum.slug },
+    // A closed forum still renders its composer, with the reason stated. The
+    // alternative — a 404 — reads as "this forum vanished" to someone who was
+    // just looking at it.
+    errorMessage:
+      rules.isOpen && rules.allowThreads
+        ? null
+        : 'This forum is closed to new threads.',
+  })
+
+  const PostForm = requireSlot(activeTheme, 'PostForm')
+
+  return (
+    <main id="board-content" tabIndex={-1} className="flex-1">
+      <PostForm
+        {...view}
+        regions={{
+          form:
+            rules.isOpen && rules.allowThreads ? (
+              <NewThreadForm
+                forumId={id}
+                prefixes={prefixes.map((p) => ({ id: p.id, label: p.label }))}
+                requiresPrefix={rules.requiresPrefix}
+                canSubscribe={authorizer.can(actor, 'forum.subscribe', target)}
+              />
+            ) : null,
+          // F45's island. Absent by design: the plain textarea above is the
+          // posting path, and it must stay the whole path.
+          toolbar: null,
+        }}
+      />
+    </main>
+  )
+}

apps/forum/app/(board)/forum/[slug]/page.tsx

@@ -7,8 +7,7 @@ import { getActor } from "@/server/context";
 import { activeTheme } from "@/server/theme";
 import { decodeForumCursor, encodeForumCursor } from "@/view/forum-cursor";
 import { buildForumDisplayView } from "@/view/forum-display";
-
-const THREADS_PER_PAGE = 25;
+import { THREADS_PER_PAGE } from "@/view/paging";
 
 export const metadata: Metadata = { title: "Forum" };
 
@@ -24,7 +23,7 @@ export default async function ForumPage({
   searchParams,
 }: {
   params: Promise<{ slug: string }>;
-  searchParams: Promise<{ after?: string; page?: string }>;
+  searchParams: Promise<{ after?: string; page?: string; posted?: string }>;
 }) {
   const [{ slug }, query] = await Promise.all([params, searchParams]);
   const id = forumId(slug);
@@ -34,7 +33,7 @@ export default async function ForumPage({
     notFound();
 
   const actor = await getActor();
-  const { forums, threads, authorizer, readState } = getContainer();
+  const { forums, threads, authorizer, readState, threadWrites } = getContainer();
   const [rows, visible, read] = await Promise.all([
     forums.listListing(),
     authorizer.visibleForumIds(actor),
@@ -57,8 +56,19 @@ export default async function ForumPage({
   const nextHref = threadPage.nextCursor
     ? `/forum/${id}-${forum.slug}?after=${encodeForumCursor(threadPage.nextCursor)}&page=${page + 1}`
     : null;
+  /*
+   * The composer link appears only when this actor may actually use it, and
+   * only when the board can accept a post at all (fixture mode cannot). A link
+   * to a page that 404s is worse than no link.
+   */
+  const canPost =
+    threadWrites !== null &&
+    forum.type === "forum" &&
+    authorizer.can(actor, "thread.post", { forumId: id, forum: matrix });
+
   const view = buildForumDisplayView({
     forum,
+    newThreadHref: canPost ? `/forum/${id}-${forum.slug}/new` : null,
     subforums: rows.filter(
       (row) => row.parentId === id && visible.includes(row.id),
     ),
@@ -71,12 +81,27 @@ export default async function ForumPage({
   });
 
   const ForumDisplay = requireSlot(activeTheme, "ForumDisplay");
+  const Notice = requireSlot(activeTheme, "Notice");
   const ThreadRow = requireSlot(activeTheme, "ThreadRow");
   const SubforumList = requireSlot(activeTheme, "SubforumList");
   const Pagination = requireSlot(activeTheme, "Pagination");
 
   return (
     <main id="board-content" tabIndex={-1} className="flex-1">
+      {/*
+        Where a held thread lands. The author cannot be sent to a thread nobody
+        can see, so the forum tells them what happened; dismissal is the same
+        link without the parameter, which needs no JavaScript and no state.
+      */}
+      {query.posted === "moderated" && (
+        <div className="px-6 pt-6">
+          <Notice
+            kind="info"
+            message="Your thread was posted and is waiting for a moderator to approve it."
+            dismissHref={`/forum/${id}-${forum.slug}`}
+          />
+        </div>
+      )}
       <ForumDisplay
         {...view.display}
         regions={{

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

@@ -6,10 +6,9 @@ import { requireSlot } from '@forum/theme-kit'
 import { getContainer } from '@/server/container'
 import { getActor } from '@/server/context'
 import { activeTheme } from '@/server/theme'
+import { POSTS_PER_PAGE } from '@/view/paging'
 import { buildThreadView } from '@/view/thread-view'
 
-const POSTS_PER_PAGE = 20
-
 export const metadata: Metadata = { title: 'Thread' }
 
 function threadId(value: string): number | null {
@@ -32,7 +31,7 @@ export default async function ThreadPage({
   searchParams,
 }: {
   params: Promise<{ slug: string }>
-  searchParams: Promise<{ after?: string; page?: string }>
+  searchParams: Promise<{ after?: string; page?: string; replied?: string; posted?: string }>
 }) {
   const [{ slug }, query] = await Promise.all([params, searchParams])
   const id = threadId(slug)
@@ -41,7 +40,7 @@ export default async function ThreadPage({
   if (id === null || after === null || !Number.isSafeInteger(page) || page < 1) notFound()
 
   const actor = await getActor()
-  const { forums, posts, threads, authorizer } = getContainer()
+  const { forums, posts, threads, authorizer, threadViews, threadWrites } = getContainer()
   const thread = await threads.findVisibleById(id)
   if (!thread) notFound()
 
@@ -50,15 +49,37 @@ export default async function ThreadPage({
   const matrix = await authorizer.forumMatrix(actor, forum.id)
   if (!authorizer.can(actor, 'thread.view', { forumId: forum.id, forum: matrix })) notFound()
 
+  /*
+   * Count the view only after the permission check, and only on the first page:
+   * paging through a long thread is one visit, and a viewer who cannot see the
+   * thread has not viewed it. The write is buffered (F38) rather than applied to
+   * `threads`, and a failure is swallowed — a view counter is never a reason to
+   * fail a page that has already been authorised and read.
+   */
+  if (threadViews && after === undefined) {
+    await threadViews.record(thread.id).catch(() => undefined)
+  }
+
   const postPage = await posts.listThread(
     thread.id,
     after === undefined ? { limit: POSTS_PER_PAGE } : { afterId: after, limit: POSTS_PER_PAGE },
   )
   const nextHref = postPage.nextAfterId === null
     ? null
     : `/thread/${thread.id}-${thread.slug}?after=${postPage.nextAfterId}&page=${page + 1}`
+  /*
+   * The reply link is offered only where the actor may actually use it, and a
+   * locked thread offers it to nobody but a moderator — the same answer the
+   * action gives, computed twice because a link is not authorisation.
+   */
+  const canReply =
+    threadWrites !== null &&
+    authorizer.can(actor, 'reply.post', { forumId: forum.id, forum: matrix }) &&
+    (!thread.isLocked || authorizer.can(actor, 'content.viewUnapproved', { forumId: forum.id, forum: matrix }))
+
   const view = buildThreadView({
     thread,
+    replyHref: canReply ? `/thread/${thread.id}-${thread.slug}/reply` : null,
     forum,
     page: postPage,
     pageNumber: page,
@@ -71,12 +92,29 @@ export default async function ThreadPage({
   })
 
   const ThreadView = requireSlot(activeTheme, 'ThreadView')
+  const Notice = requireSlot(activeTheme, 'Notice')
   const PostBit = requireSlot(activeTheme, 'PostBit')
   const PostActions = requireSlot(activeTheme, 'PostActions')
   const Pagination = requireSlot(activeTheme, 'Pagination')
 
+  const notice =
+    query.replied === 'race'
+      ? 'Somebody else replied while you were writing. Your reply was posted below theirs.'
+      : query.posted === 'moderated'
+        ? 'Your reply was posted and is waiting for a moderator to approve it.'
+        : null
+
   return (
     <main id="board-content" tabIndex={-1} className="flex-1">
+      {notice !== null && (
+        <div className="px-6 pt-6">
+          <Notice
+            kind="info"
+            message={notice}
+            dismissHref={`/thread/${thread.id}-${thread.slug}`}
+          />
+        </div>
+      )}
       <ThreadView
         {...view.view}
         regions={{

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

@@ -0,0 +1,102 @@
+import type { Metadata } from 'next'
+import { notFound } from 'next/navigation'
+
+import { quotePrefill } from '@forum/threads'
+import { requireSlot } from '@forum/theme-kit'
+
+import { ReplyForm } from '@/components/content/reply-form'
+import { getContainer } from '@/server/container'
+import { getActor } from '@/server/context'
+import { activeTheme } from '@/server/theme'
+import { buildReplyView } from '@/view/post-form'
+
+export const metadata: Metadata = { title: 'Reply' }
+
+function threadId(value: string): number | null {
+  const match = /^(\d+)(?:-|$)/.exec(value)
+  if (!match) return null
+  const id = Number(match[1])
+  return Number.isSafeInteger(id) && id > 0 ? id : null
+}
+
+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 = threadId(slug)
+  if (id === null) notFound()
+
+  const actor = await getActor()
+  const { authorizer, posts, threadWrites } = getContainer()
+  if (threadWrites === null) notFound()
+
+  const target = await threadWrites.replyTarget(id)
+  if (!target || target.visibility !== 'visible') notFound()
+
+  const scope = {
+    forumId: target.forum.id,
+    forum: await authorizer.forumMatrix(actor, target.forum.id),
+  }
+  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
+
+  /*
+   * The quote is resolved here, on the server, so quoting works with scripting
+   * off: it is a link to this page, not a button that edits a textarea. The
+   * quoted post is re-read through the visible-post lookup rather than trusted
+   * from the query string — otherwise `?quote=<id>` is a way to paste any post
+   * on the board, including one in a forum the quoter cannot see, into a forum
+   * where everyone can.
+   */
+  const quoteId = quotedPostId(query.quote)
+  let prefill = ''
+  if (quoteId !== null) {
+    const quoted = await posts.findQuotable(id, quoteId)
+    if (quoted) {
+      prefill = quotePrefill({
+        postId: quoted.id,
+        authorUsername: quoted.authorUsername,
+        message: quoted.message,
+      })
+    }
+  }
+
+  const view = buildReplyView({
+    thread: { id: target.threadId, title: target.title, slug: target.slug },
+    errorMessage: locked ? 'This thread is locked.' : null,
+  })
+
+  const PostForm = requireSlot(activeTheme, 'PostForm')
+
+  return (
+    <main id="board-content" tabIndex={-1} className="flex-1">
+      <PostForm
+        {...view}
+        regions={{
+          form: locked ? null : (
+            <ReplyForm
+              threadId={target.threadId}
+              seenLastPostId={target.lastPostId}
+              prefill={prefill}
+              canSubscribe={authorizer.can(actor, 'forum.subscribe', scope)}
+            />
+          ),
+          toolbar: null,
+        }}
+      />
+    </main>
+  )
+}

apps/forum/src/components/auth/form-controls.tsx

@@ -60,6 +60,8 @@ interface FieldProps {
   required?: boolean | undefined
   defaultValue?: string | undefined
   minLength?: number | undefined
+  /** Mirrors a server-side limit; never the only enforcement of one. */
+  maxLength?: number | undefined
   hint?: string | undefined
 }
 
@@ -71,6 +73,7 @@ export function Field({
   required = true,
   defaultValue,
   minLength,
+  maxLength,
   hint,
 }: FieldProps) {
   const hintId = hint ? `${name}-hint` : undefined
@@ -84,6 +87,7 @@ export function Field({
         required={required}
         defaultValue={defaultValue}
         minLength={minLength}
+        maxLength={maxLength}
         aria-describedby={hintId}
         className="h-10 rounded-md border border-input bg-background px-3 text-sm text-foreground outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/40"
       />