diff --git a/src/app/p/[secret]/posts/page.tsx b/src/app/p/[secret]/posts/page.tsx index 1ca2dc6..5890481 100644 --- a/src/app/p/[secret]/posts/page.tsx +++ b/src/app/p/[secret]/posts/page.tsx @@ -1,6 +1,6 @@ "use client"; -import { useState } from "react"; +import { useEffect, useState } from "react"; import { useInfiniteQuery, useMutation, useQuery, useQueryClient } from "@tanstack/react-query"; import { useTRPC } from "@/trpc/client"; import { Trash2, MessageSquare, Loader2, ChevronDown, Play, ImageOff, PawPrint } from "lucide-react"; @@ -22,11 +22,27 @@ const GRID_COLS_CLASS: Record = { 8: "sm:grid-cols-4 lg:grid-cols-8", }; +const GRID_SIZE_STORAGE_KEY = "pawfeed-admin-posts-grid-size"; + export default function AdminPostsPage() { const trpc = useTRPC(); const qc = useQueryClient(); const [search, setSearch] = useState(""); const [gridSize, setGridSize] = useState(3); + + // Reads the persisted choice after mount (SSR has no localStorage access — + // same pattern as ActivePetContext, a brief default-then-update on first paint). + useEffect(() => { + const stored = Number(window.localStorage.getItem(GRID_SIZE_STORAGE_KEY)); + if (GRID_SIZES.includes(stored as GridSize)) { + setGridSize(stored as GridSize); + } + }, []); + + function handleGridSizeChange(size: GridSize) { + setGridSize(size); + window.localStorage.setItem(GRID_SIZE_STORAGE_KEY, String(size)); + } const [commentsPostId, setCommentsPostId] = useState(null); const [deleteTarget, setDeleteTarget] = useState<{ id: string; type: "post" | "comment" } | null>(null); const [reason, setReason] = useState(""); @@ -88,7 +104,7 @@ export default function AdminPostsPage() {