feat: add admin comments page with search, filters, pagination, remove/restore

app/(admin)/admin/comments/comments-client.tsx

@@ -0,0 +1,491 @@
+"use client"
+
+import { useCallback, useEffect, useRef, useState } from "react"
+import Image from "next/image"
+import Link from "next/link"
+import {
+  Loader2,
+  SearchIcon,
+  TrashIcon,
+  RotateCcwIcon,
+  ExternalLinkIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  MessageSquareIcon,
+} from "lucide-react"
+
+interface Comment {
+  id: string
+  gameId: string
+  content: Record<string, unknown>
+  upvotes: number
+  isRemoved: boolean
+  createdAt: string
+  updatedAt: string
+  userId: string
+  userName: string | null
+  userImage: string | null
+  gameTitle: string
+  parentId: string | null
+}
+
+interface CommentsApiResponse {
+  data: Comment[]
+  total: number
+  limit: number
+  offset: number
+}
+
+type StatusFilter = "all" | "active" | "removed"
+
+const LIMIT = 20
+
+function formatDate(value: string | Date | null | undefined) {
+  if (!value) return "—"
+  const d = typeof value === "string" ? new Date(value) : value
+  return d.toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" })
+}
+
+function getInitial(name: string | null | undefined) {
+  return name?.charAt(0)?.toUpperCase() || "?"
+}
+
+function extractPlainText(content: Record<string, unknown>, maxLength = 80): string {
+  let result = ""
+  function walk(node: unknown) {
+    if (typeof node !== "object" || node === null) return
+    if (Array.isArray(node)) {
+      for (const item of node) {
+        walk(item)
+        if (result.length >= maxLength) return
+      }
+      return
+    }
+    const obj = node as Record<string, unknown>
+    if (typeof obj.text === "string") {
+      result += obj.text
+      if (result.length >= maxLength) return
+    }
+    if (Array.isArray(obj.content)) {
+      for (const item of obj.content) {
+        walk(item)
+        if (result.length >= maxLength) return
+      }
+    }
+  }
+  walk(content)
+  return result.length > maxLength ? result.slice(0, maxLength) + "…" : result
+}
+
+function statusBadgeClasses(isRemoved: boolean) {
+  return isRemoved
+    ? "bg-red-500/10 text-red-400"
+    : "bg-green-500/10 text-green-400"
+}
+
+function statusDotClass(isRemoved: boolean) {
+  return isRemoved ? "bg-red-400" : "bg-green-400"
+}
+
+export function CommentsClient() {
+  const [comments, setComments] = useState<Comment[]>([])
+  const [total, setTotal] = useState(0)
+  const [loading, setLoading] = useState(true)
+  const [search, setSearch] = useState("")
+  const [offset, setOffset] = useState(0)
+  const [statusFilter, setStatusFilter] = useState<StatusFilter>("all")
+  const [actionLoading, setActionLoading] = useState<Record<string, boolean>>({})
+  const [confirmAction, setConfirmAction] = useState<
+    | { type: "remove" | "restore"; comment: Comment }
+    | null
+  >(null)
+
+  const isSearchChangeRef = useRef(false)
+
+  const handleSearchChange = (value: string) => {
+    setSearch(value)
+    setOffset(0)
+    isSearchChangeRef.current = true
+  }
+
+  const handleStatusChange = (value: StatusFilter) => {
+    setStatusFilter(value)
+    setOffset(0)
+    isSearchChangeRef.current = true
+  }
+
+  const handlePrev = () => {
+    setOffset((prev) => Math.max(0, prev - LIMIT))
+    isSearchChangeRef.current = false
+  }
+
+  const handleNext = () => {
+    setOffset((prev) => prev + LIMIT)
+    isSearchChangeRef.current = false
+  }
+
+  const loadData = useCallback(async () => {
+    setLoading(true)
+    try {
+      const params = new URLSearchParams({
+        limit: String(LIMIT),
+        offset: String(offset),
+      })
+      if (statusFilter === "active") {
+        params.set("removed", "false")
+      } else if (statusFilter === "removed") {
+        params.set("removed", "true")
+      }
+      if (search.trim()) {
+        params.set("search", search.trim())
+      }
+
+      const res = await fetch(`/api/admin/comments?${params.toString()}`)
+      if (res.ok) {
+        const json = (await res.json()) as CommentsApiResponse
+        setComments(json.data)
+        setTotal(json.total)
+      }
+    } catch {
+      // ignore
+    } finally {
+      setLoading(false)
+    }
+  }, [search, offset, statusFilter])
+
+  useEffect(() => {
+    const delay = isSearchChangeRef.current ? 300 : 0
+    isSearchChangeRef.current = false
+
+    let cancelled = false
+    const timer = setTimeout(async () => {
+      if (!cancelled) {
+        await loadData()
+      }
+    }, delay)
+
+    return () => {
+      cancelled = true
+      clearTimeout(timer)
+    }
+  }, [loadData])
+
+  const handleRemove = async (comment: Comment) => {
+    setActionLoading((prev) => ({ ...prev, [comment.id]: true }))
+    try {
+      const res = await fetch(`/api/admin/comments/${comment.id}/remove`, {
+        method: "PATCH",
+      })
+      if (res.ok) {
+        await loadData()
+        setConfirmAction(null)
+      }
+    } finally {
+      setActionLoading((prev) => ({ ...prev, [comment.id]: false }))
+    }
+  }
+
+  const handleRestore = async (comment: Comment) => {
+    setActionLoading((prev) => ({ ...prev, [comment.id]: true }))
+    try {
+      const res = await fetch(`/api/admin/comments/${comment.id}/restore`, {
+        method: "PATCH",
+      })
+      if (res.ok) {
+        await loadData()
+        setConfirmAction(null)
+      }
+    } finally {
+      setActionLoading((prev) => ({ ...prev, [comment.id]: false }))
+    }
+  }
+
+  const hasMore = offset + comments.length < total
+
+  const tabs: { label: string; value: StatusFilter }[] = [
+    { label: "All", value: "all" },
+    { label: "Active", value: "active" },
+    { label: "Removed", value: "removed" },
+  ]
+
+  return (
+    <div className="space-y-4">
+      {/* Header */}
+      <div className="flex items-center gap-3">
+        <MessageSquareIcon className="h-5 w-5 text-text/70" />
+        <h1 className="text-lg font-semibold text-text">Comments</h1>
+      </div>
+
+      {/* Search */}
+      <div className="relative">
+        <SearchIcon className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-text/40" />
+        <input
+          type="text"
+          value={search}
+          onChange={(e) => handleSearchChange(e.target.value)}
+          placeholder="Search comments..."
+          className="w-full pl-9 pr-4 py-2 rounded-md bg-text/5 border border-border text-sm text-text placeholder:text-text/40 focus:outline-none focus:border-primary/60 transition-colors"
+        />
+      </div>
+
+      {/* Filter tabs */}
+      <div className="flex items-center gap-1">
+        {tabs.map((tab) => (
+          <button
+            key={tab.value}
+            onClick={() => handleStatusChange(tab.value)}
+            className={`px-3 py-1.5 rounded-md text-xs font-medium transition-colors cursor-pointer ${
+              statusFilter === tab.value
+                ? "bg-primary/10 text-primary"
+                : "bg-text/5 text-text/70 hover:bg-text/10"
+            }`}
+          >
+            {tab.label}
+          </button>
+        ))}
+      </div>
+
+      {/* Table */}
+      <div className="rounded-xl border border-border overflow-hidden">
+        <table className="w-full text-sm">
+          <thead className="bg-text/[0.03]">
+            <tr>
+              <th className="text-left px-4 py-3 text-xs font-medium uppercase tracking-wider text-text/50">
+                Author
+              </th>
+              <th className="text-left px-4 py-3 text-xs font-medium uppercase tracking-wider text-text/50">
+                Content
+              </th>
+              <th className="text-left px-4 py-3 text-xs font-medium uppercase tracking-wider text-text/50">
+                Game
+              </th>
+              <th className="text-left px-4 py-3 text-xs font-medium uppercase tracking-wider text-text/50">
+                Upvotes
+              </th>
+              <th className="text-left px-4 py-3 text-xs font-medium uppercase tracking-wider text-text/50">
+                Status
+              </th>
+              <th className="text-left px-4 py-3 text-xs font-medium uppercase tracking-wider text-text/50">
+                Date
+              </th>
+              <th className="text-left px-4 py-3 text-xs font-medium uppercase tracking-wider text-text/50">
+                Actions
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            {loading ? (
+              <tr>
+                <td colSpan={7} className="px-4 py-8 text-center text-text/50">
+                  <Loader2 className="h-5 w-5 animate-spin mx-auto" />
+                </td>
+              </tr>
+            ) : comments.length === 0 ? (
+              <tr>
+                <td colSpan={7} className="px-4 py-8 text-center text-text/50">
+                  No comments found.
+                </td>
+              </tr>
+            ) : (
+              comments.map((comment) => (
+                <tr
+                  key={comment.id}
+                  className="border-t border-border hover:bg-text/[0.02] transition-colors"
+                >
+                  <td className="px-4 py-3">
+                    <div className="flex items-center gap-3">
+                      {comment.userImage ? (
+                        <Image
+                          src={comment.userImage}
+                          alt={comment.userName || "User"}
+                          width={32}
+                          height={32}
+                          className="h-8 w-8 rounded-full object-cover"
+                          unoptimized
+                        />
+                      ) : (
+                        <div className="h-8 w-8 rounded-full bg-text/10 flex items-center justify-center text-xs font-medium text-text/70">
+                          {getInitial(comment.userName)}
+                        </div>
+                      )}
+                      <div className="min-w-0">
+                        <p className="font-medium text-text truncate">
+                          {comment.userName || "Unknown"}
+                        </p>
+                      </div>
+                    </div>
+                  </td>
+                  <td className="px-4 py-3">
+                    <p className="text-text/70 truncate max-w-[240px]">
+                      {extractPlainText(comment.content, 80)}
+                    </p>
+                  </td>
+                  <td className="px-4 py-3">
+                    <p className="font-medium text-text truncate max-w-[150px]">
+                      {comment.gameTitle}
+                    </p>
+                  </td>
+                  <td className="px-4 py-3">
+                    <span className="text-text/70">{comment.upvotes}</span>
+                  </td>
+                  <td className="px-4 py-3">
+                    <span
+                      className={`inline-flex items-center gap-1.5 px-2 py-0.5 rounded-full text-[10px] font-medium uppercase tracking-wider ${statusBadgeClasses(comment.isRemoved)}`}
+                    >
+                      <span
+                        className={`h-1.5 w-1.5 rounded-full ${statusDotClass(comment.isRemoved)}`}
+                      />
+                      {comment.isRemoved ? "Removed" : "Active"}
+                    </span>
+                  </td>
+                  <td className="px-4 py-3 text-xs text-text/50">
+                    {formatDate(comment.createdAt)}
+                  </td>
+                  <td className="px-4 py-3">
+                    <div className="flex items-center gap-2 flex-wrap">
+                      <Link
+                        href={`/game/${comment.gameId}`}
+                        className="flex items-center gap-1.5 px-2.5 py-1.5 rounded-md text-xs font-medium bg-text/5 text-text hover:bg-text/10 transition-colors"
+                      >
+                        <ExternalLinkIcon className="h-3.5 w-3.5" />
+                        View
+                      </Link>
+                      {!comment.isRemoved ? (
+                        <button
+                          onClick={() =>
+                            setConfirmAction({ type: "remove", comment })
+                          }
+                          disabled={actionLoading[comment.id]}
+                          className="flex items-center gap-1.5 px-2.5 py-1.5 rounded-md text-xs font-medium bg-red-500/10 text-red-400 hover:bg-red-500/20 transition-colors cursor-pointer disabled:opacity-50"
+                        >
+                          {actionLoading[comment.id] ? (
+                            <Loader2 className="h-3.5 w-3.5 animate-spin" />
+                          ) : (
+                            <TrashIcon className="h-3.5 w-3.5" />
+                          )}
+                          Remove
+                        </button>
+                      ) : (
+                        <button
+                          onClick={() =>
+                            setConfirmAction({ type: "restore", comment })
+                          }
+                          disabled={actionLoading[comment.id]}
+                          className="flex items-center gap-1.5 px-2.5 py-1.5 rounded-md text-xs font-medium bg-blue-500/10 text-blue-400 hover:bg-blue-500/20 transition-colors cursor-pointer disabled:opacity-50"
+                        >
+                          {actionLoading[comment.id] ? (
+                            <Loader2 className="h-3.5 w-3.5 animate-spin" />
+                          ) : (
+                            <RotateCcwIcon className="h-3.5 w-3.5" />
+                          )}
+                          Restore
+                        </button>
+                      )}
+                    </div>
+                  </td>
+                </tr>
+              ))
+            )}
+          </tbody>
+        </table>
+      </div>
+
+      {/* Pagination */}
+      {comments.length > 0 && (
+        <div className="flex items-center justify-between">
+          <p className="text-xs text-text/50">
+            Showing {offset + 1}–{Math.min(offset + comments.length, total)} of{" "}
+            {total}
+          </p>
+          <div className="flex items-center gap-2">
+            <button
+              onClick={handlePrev}
+              disabled={offset === 0 || loading}
+              className="px-3 py-1.5 rounded-md text-xs font-medium bg-text/5 text-text hover:bg-text/10 transition-colors disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer flex items-center gap-1"
+            >
+              <ChevronLeftIcon className="h-3.5 w-3.5" />
+              Previous
+            </button>
+            <button
+              onClick={handleNext}
+              disabled={!hasMore || loading}
+              className="px-3 py-1.5 rounded-md text-xs font-medium bg-text/5 text-text hover:bg-text/10 transition-colors disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer flex items-center gap-1"
+            >
+              Next
+              <ChevronRightIcon className="h-3.5 w-3.5" />
+            </button>
+          </div>
+        </div>
+      )}
+
+      {/* Confirmation Dialogs */}
+      {confirmAction && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
+          <div className="bg-background border border-border rounded-xl p-6 max-w-sm w-full mx-4 space-y-4">
+            {confirmAction.type === "remove" && (
+              <>
+                <h2 className="text-base font-semibold text-text">
+                  Confirm Remove
+                </h2>
+                <p className="text-sm text-text/70">
+                  Are you sure you want to remove this comment?
+                </p>
+                <div className="flex items-center justify-end gap-2">
+                  <button
+                    onClick={() => setConfirmAction(null)}
+                    className="px-3 py-1.5 rounded-md text-xs font-medium bg-text/5 text-text hover:bg-text/10 transition-colors cursor-pointer"
+                  >
+                    Cancel
+                  </button>
+                  <button
+                    onClick={() => handleRemove(confirmAction.comment)}
+                    disabled={actionLoading[confirmAction.comment.id]}
+                    className="px-3 py-1.5 rounded-md text-xs font-medium bg-red-500/10 text-red-400 hover:bg-red-500/20 transition-colors cursor-pointer disabled:opacity-50 flex items-center gap-1.5"
+                  >
+                    {actionLoading[confirmAction.comment.id] ? (
+                      <Loader2 className="h-3.5 w-3.5 animate-spin" />
+                    ) : (
+                      <TrashIcon className="h-3.5 w-3.5" />
+                    )}
+                    Remove
+                  </button>
+                </div>
+              </>
+            )}
+
+            {confirmAction.type === "restore" && (
+              <>
+                <h2 className="text-base font-semibold text-text">
+                  Confirm Restore
+                </h2>
+                <p className="text-sm text-text/70">
+                  Are you sure you want to restore this comment?
+                </p>
+                <div className="flex items-center justify-end gap-2">
+                  <button
+                    onClick={() => setConfirmAction(null)}
+                    className="px-3 py-1.5 rounded-md text-xs font-medium bg-text/5 text-text hover:bg-text/10 transition-colors cursor-pointer"
+                  >
+                    Cancel
+                  </button>
+                  <button
+                    onClick={() => handleRestore(confirmAction.comment)}
+                    disabled={actionLoading[confirmAction.comment.id]}
+                    className="px-3 py-1.5 rounded-md text-xs font-medium bg-blue-500/10 text-blue-400 hover:bg-blue-500/20 transition-colors cursor-pointer disabled:opacity-50 flex items-center gap-1.5"
+                  >
+                    {actionLoading[confirmAction.comment.id] ? (
+                      <Loader2 className="h-3.5 w-3.5 animate-spin" />
+                    ) : (
+                      <RotateCcwIcon className="h-3.5 w-3.5" />
+                    )}
+                    Restore
+                  </button>
+                </div>
+              </>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}

app/(admin)/admin/comments/page.tsx

@@ -0,0 +1,10 @@
+import type { Metadata } from "next"
+import { CommentsClient } from "./comments-client"
+
+export const metadata: Metadata = {
+  title: "Comments",
+}
+
+export default function CommentsPage() {
+  return <CommentsClient />
+}

components/admin/admin-sidebar.tsx

@@ -2,12 +2,13 @@
 
 import Link from "next/link"
 import { usePathname } from "next/navigation"
-import { UsersIcon, CpuIcon, Gamepad2Icon } from "lucide-react"
+import { UsersIcon, CpuIcon, Gamepad2Icon, MessageSquareIcon } from "lucide-react"
 
 const adminNavItems = [
   { href: "/admin/users", label: "Users", icon: UsersIcon },
   { href: "/admin/hardware", label: "Hardware", icon: CpuIcon },
   { href: "/admin/games", label: "Games", icon: Gamepad2Icon },
+  { href: "/admin/comments", label: "Comments", icon: MessageSquareIcon },
 ]
 
 export function AdminSidebar() {