feat(admin): make the posts moderation grid density selectable (3/5/8 cols)

src/app/p/[secret]/posts/page.tsx

@@ -10,11 +10,23 @@ import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "
 import { getMediaUrl } from "@/lib/media-url";
 import { BlurImage } from "@/components/ui/blur-image";
 import { MILESTONE_META } from "@/lib/milestone-meta";
+import { cn } from "@/lib/utils";
+
+const GRID_SIZES = [3, 5, 8] as const;
+type GridSize = (typeof GRID_SIZES)[number];
+
+// Tailwind class names must be static strings for the JIT scanner to pick them up.
+const GRID_COLS_CLASS: Record<GridSize, string> = {
+  3: "sm:grid-cols-2 lg:grid-cols-3",
+  5: "sm:grid-cols-3 lg:grid-cols-5",
+  8: "sm:grid-cols-4 lg:grid-cols-8",
+};
 
 export default function AdminPostsPage() {
   const trpc = useTRPC();
   const qc = useQueryClient();
   const [search, setSearch] = useState("");
+  const [gridSize, setGridSize] = useState<GridSize>(3);
   const [commentsPostId, setCommentsPostId] = useState<string | null>(null);
   const [deleteTarget, setDeleteTarget] = useState<{ id: string; type: "post" | "comment" } | null>(null);
   const [reason, setReason] = useState("");
@@ -70,12 +82,32 @@ export default function AdminPostsPage() {
     <div className="space-y-6">
       <div className="flex items-center justify-between">
         <h1 className="text-2xl font-bold text-zinc-100">Posts</h1>
-        <Input
-          placeholder="Search caption…"
-          value={search}
-          onChange={(e) => setSearch(e.target.value)}
-          className="w-64 bg-zinc-900 border-zinc-700 text-zinc-100 placeholder:text-zinc-500"
-        />
+        <div className="flex items-center gap-3">
+          <div className="flex items-center gap-0.5 rounded-lg border border-zinc-700 p-0.5">
+            {GRID_SIZES.map((size) => (
+              <button
+                key={size}
+                type="button"
+                onClick={() => setGridSize(size)}
+                aria-pressed={gridSize === size}
+                className={cn(
+                  "rounded-md px-2.5 py-1 text-xs font-medium transition-colors",
+                  gridSize === size
+                    ? "bg-zinc-700 text-zinc-100"
+                    : "text-zinc-400 hover:text-zinc-200"
+                )}
+              >
+                {size}
+              </button>
+            ))}
+          </div>
+          <Input
+            placeholder="Search caption…"
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            className="w-64 bg-zinc-900 border-zinc-700 text-zinc-100 placeholder:text-zinc-500"
+          />
+        </div>
       </div>
 
       {isLoading ? (
@@ -84,7 +116,7 @@ export default function AdminPostsPage() {
         </div>
       ) : (
         <div className="space-y-4">
-          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+          <div className={cn("grid grid-cols-1 gap-4", GRID_COLS_CLASS[gridSize])}>
             {posts.map((post) => {
               const originalPost = post.repost?.originalPost;
               const effectiveMilestone = post.milestone ?? originalPost?.milestone;