NightSpire/web-next/app/[locale]/forum/topic/[topicId]/page.tsx

import { notFound } from 'next/navigation'
import { getTranslations, setRequestLocale } from 'next-intl/server'
import { Link } from '@/i18n/navigation'
import { getTopic, getPosts, countPosts, listForumsForMove } from '@/lib/forum'
import { getSession } from '@/lib/session'
import { forumIsModerator, canEditPost } from '@/lib/forum-perm'
import { ReplyForm } from '@/components/ReplyForm'
import { PostActions } from '@/components/PostActions'
import { TopicModBar } from '@/components/TopicModBar'
import { Pagination } from '@/components/Pagination'

export const dynamic = 'force-dynamic'

const PER_PAGE = 15

export default async function TopicPage({
  params,
  searchParams,
}: {
  params: Promise<{ locale: string; topicId: string }>
  searchParams: Promise<{ page?: string }>
}) {
  const { locale, topicId } = await params
  setRequestLocale(locale)
  const t = await getTranslations('Forum')

  const id = Number(topicId)
  const session = await getSession()
  const isMod = await forumIsModerator(session)
  const topic = await getTopic(id, isMod)
  if (!topic) notFound()
  const total = await countPosts(id, isMod)
  const totalPages = Math.max(1, Math.ceil(total / PER_PAGE))
  const page = Math.min(Math.max(1, Number((await searchParams).page) || 1), totalPages)
  const posts = await getPosts(id, (page - 1) * PER_PAGE, PER_PAGE, isMod)
  const moveForums = isMod ? (await listForumsForMove()).filter((f) => f.id !== topic!.forum_id) : []
  const canReply = Boolean(session.username) && (!topic!.locked || isMod)

  return (
    <main className="mx-auto max-w-4xl px-4 py-8">
      <p className="mb-2 text-sm">
        <Link href="/forum" className="text-sky-400 hover:underline">
          ← {t('backToForum')}
        </Link>
      </p>
      <h1 className="mb-4 text-2xl font-bold text-amber-500">
        {topic!.sticky && <span className="mr-2 text-sm text-nw-gold-light">[{t('pinned')}]</span>}
        {topic!.locked && <span className="mr-2 text-sm text-red-400">[{t('locked')}]</span>}
        {topic!.deleted && <span className="mr-2 text-sm text-red-400">[{t('deletedMark')}]</span>}
        {topic!.name}
      </h1>

      {isMod && (
        <TopicModBar
          topicId={id}
          locked={topic!.locked}
          sticky={topic!.sticky}
          deleted={topic!.deleted}
          moveForums={moveForums}
        />
      )}

      <div className="space-y-4">
        {posts.map((post) => (
          <article key={post.id} className={`nw-card ${post.deleted ? 'opacity-50 ring-1 ring-red-900/50' : ''}`}>
            <div className="mb-2 flex items-center justify-between border-b border-amber-900/40 pb-2 text-sm">
              <span className="font-semibold text-amber-400">
                {post.poster}
                {post.deleted && <span className="ml-2 text-xs text-red-400">[{t('deletedMark')}]</span>}
              </span>
              {post.time && (
                <span className="text-amber-200/50">
                  {new Date(post.time).toLocaleString(locale)}
                  {post.edited && <span className="ml-2 italic text-amber-200/40">· {t('editedMark')}</span>}
                </span>
              )}
            </div>
            <div
              className="prose prose-invert max-w-none text-sm"
              dangerouslySetInnerHTML={{ __html: post.text }}
            />
            {canEditPost(session, isMod, post.poster_id) && (
              <PostActions postId={post.id} initialText={post.text} deleted={post.deleted} />
            )}
          </article>
        ))}
      </div>

      <Pagination page={page} totalPages={totalPages} hrefFor={(p) => `/forum/topic/${id}?page=${p}`} />

      {canReply ? (
        page === totalPages ? (
          <ReplyForm topicId={id} />
        ) : (
          <p className="mt-6 text-sm">
            <Link href={`/forum/topic/${id}?page=${totalPages}`} className="text-sky-400 hover:underline">
              {t('replyOnLastPage')}
            </Link>
          </p>
        )
      ) : (
        !session.username && <p className="mt-6 text-sm text-amber-200/60">{t('loginToPost')}</p>
      )}
    </main>
  )
}