chore: update nextjs and filter render on client side

app/admin/form/[id]/result/client.tsx

@@ -0,0 +1,148 @@
+"use client";
+
+import Link from "next/link";
+import { useMemo, useState } from "react";
+import { Kbd } from "@/components/ui/kbd";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import { Pagination, PaginationContent, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious } from "@/components/ui/pagination";
+import { DeleteAllSubmissionsButton, DeleteSubmissionButton } from "@/components/delete-buttons";
+import { ResultsFilters } from "@/components/results-filters";
+import type { DiscordMemberProfile } from "@/lib/discord";
+
+const RESULTS_PAGE_SIZE = 25;
+type ResultFilters = {
+  q: string;
+  page: number;
+  sort: "submittedAt" | "respondent";
+  direction: "asc" | "desc";
+  edited: "all" | "edited" | "unedited";
+  dateFrom: string;
+  dateTo: string;
+};
+
+function resultFiltersToSearchParams(filters: ResultFilters) {
+  const params = new URLSearchParams();
+  if (filters.q) params.set("q", filters.q);
+  if (filters.page > 1) params.set("page", String(filters.page));
+  if (filters.sort !== "submittedAt") params.set("sort", filters.sort);
+  if (filters.direction !== "desc") params.set("direction", filters.direction);
+  if (filters.edited !== "all") params.set("edited", filters.edited);
+  if (filters.dateFrom) params.set("dateFrom", filters.dateFrom);
+  if (filters.dateTo) params.set("dateTo", filters.dateTo);
+  return params.toString();
+}
+
+type ResultRow = {
+  id: string;
+  userName: string | null;
+  userDiscordId: string | null;
+  submittedAt: string;
+  adminNote: string | null;
+  editHistory: unknown[];
+};
+
+function formatDate(value: string) {
+  return new Date(value).toLocaleString("en-GB", {
+    timeZone: "Asia/Bangkok",
+    hour12: false,
+  });
+}
+
+function bangkokDate(value: string) {
+  const parts = new Intl.DateTimeFormat("en-CA", {
+    timeZone: "Asia/Bangkok",
+    year: "numeric",
+    month: "2-digit",
+    day: "2-digit",
+  }).formatToParts(new Date(value));
+  const values = Object.fromEntries(parts.map((part) => [part.type, part.value]));
+  return `${values.year}-${values.month}-${values.day}`;
+}
+
+function RespondentName({
+  row,
+  profile,
+}: {
+  row: ResultRow;
+  profile: DiscordMemberProfile | null;
+}) {
+  const displayName = profile?.globalName || profile?.username || row.userName || row.userDiscordId || "Anonymous";
+  const username = profile?.username || row.userName;
+  return (
+    <span className="inline-flex flex-wrap items-center gap-1.5">
+      <span>{displayName}</span>
+      {username && username !== displayName && <Kbd>({username})</Kbd>}
+    </span>
+  );
+}
+
+export default function ResultsClient({
+  formId,
+  initialFilters,
+  rows,
+  profiles,
+}: {
+  formId: string;
+  initialFilters: ResultFilters;
+  rows: ResultRow[];
+  profiles: Record<string, DiscordMemberProfile | null>;
+}) {
+  const [filters, setFilters] = useState(initialFilters);
+  const [page, setPage] = useState(initialFilters.page);
+
+  const filteredRows = useMemo(() => {
+    const query = filters.q.toLocaleLowerCase();
+    return rows
+      .filter((row) => {
+        const matchesQuery = !query || `${row.userName ?? ""} ${row.userDiscordId ?? ""}`.toLocaleLowerCase().includes(query);
+        const edited = row.editHistory.length > 0;
+        const matchesEdited = filters.edited === "all" || (filters.edited === "edited" ? edited : !edited);
+        const date = bangkokDate(row.submittedAt);
+        return matchesQuery && matchesEdited && (!filters.dateFrom || date >= filters.dateFrom) && (!filters.dateTo || date <= filters.dateTo);
+      })
+      .sort((a, b) => {
+        if (filters.sort === "respondent") {
+          const result = (a.userName || a.userDiscordId || "").localeCompare(b.userName || b.userDiscordId || "");
+          return filters.direction === "asc" ? result : -result;
+        }
+        const result = new Date(a.submittedAt).getTime() - new Date(b.submittedAt).getTime();
+        return filters.direction === "asc" ? result : -result;
+      });
+  }, [filters, rows]);
+
+  const pageCount = Math.max(1, Math.ceil(filteredRows.length / RESULTS_PAGE_SIZE));
+  const currentPage = Math.min(page, pageCount);
+  const visibleRows = filteredRows.slice((currentPage - 1) * RESULTS_PAGE_SIZE, currentPage * RESULTS_PAGE_SIZE);
+  const updateFilters = (next: ResultFilters) => {
+    const normalized = { ...next, page: 1 };
+    setFilters(normalized);
+    setPage(1);
+    const query = resultFiltersToSearchParams(normalized);
+    window.history.replaceState(null, "", `/admin/form/${formId}/result${query ? `?${query}` : ""}`);
+  };
+
+  return (
+    <div className="mx-auto flex w-full max-w-6xl flex-col gap-6 p-4 pb-12 md:p-6">
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between">
+        <div>
+          <h2 className="text-2xl font-semibold">Responses</h2>
+          <p className="text-muted-foreground">{filteredRows.length} matching {filteredRows.length === 1 ? "response" : "responses"}</p>
+        </div>
+        {rows.length > 0 && <DeleteAllSubmissionsButton formId={formId} />}
+      </div>
+      <ResultsFilters formId={formId} filters={filters} onFiltersChange={updateFilters} />
+      {visibleRows.length === 0 ? (
+        <Card><CardHeader><CardTitle>No responses found</CardTitle><CardDescription>Try changing or clearing the current filters.</CardDescription></CardHeader></Card>
+      ) : (
+        <>
+          <Card className="hidden md:block"><CardContent className="p-0"><Table><TableHeader><TableRow><TableHead>Respondent</TableHead><TableHead>Submitted</TableHead><TableHead>Note</TableHead><TableHead className="text-right">Actions</TableHead></TableRow></TableHeader><TableBody>
+            {visibleRows.map((row) => <TableRow key={row.id} className="relative cursor-pointer"><TableCell><Link href={`/admin/form/${formId}/result/${row.id}`} className="font-medium after:absolute after:inset-0 focus-visible:outline-none focus-visible:after:ring-2 focus-visible:after:ring-ring focus-visible:after:ring-inset"><RespondentName row={row} profile={row.userDiscordId ? profiles[row.userDiscordId] ?? null : null} /></Link>{row.userName && row.userDiscordId && <p className="text-xs text-muted-foreground">{row.userDiscordId}</p>}</TableCell><TableCell>{formatDate(row.submittedAt)}</TableCell><TableCell className="max-w-80">{row.adminNote ? <p className="line-clamp-2 whitespace-pre-wrap text-sm">{row.adminNote}</p> : <span className="text-sm italic text-muted-foreground">No note</span>}</TableCell><TableCell className="relative z-10 text-right"><DeleteSubmissionButton id={row.id} compact /></TableCell></TableRow>)}
+          </TableBody></Table></CardContent></Card>
+          <div className="flex flex-col gap-3 md:hidden">{visibleRows.map((row) => <Card key={row.id} className="relative transition-colors hover:bg-muted/50"><CardHeader><CardTitle className="text-base"><Link href={`/admin/form/${formId}/result/${row.id}`} className="after:absolute after:inset-0 focus-visible:outline-none focus-visible:after:ring-2 focus-visible:after:ring-ring focus-visible:after:ring-inset"><RespondentName row={row} profile={row.userDiscordId ? profiles[row.userDiscordId] ?? null : null} /></Link></CardTitle><CardDescription>{formatDate(row.submittedAt)}</CardDescription></CardHeader><CardContent className="flex items-start justify-between gap-4"><div className="min-w-0"><p className="text-xs font-medium text-muted-foreground">Note</p>{row.adminNote ? <p className="line-clamp-3 whitespace-pre-wrap text-sm">{row.adminNote}</p> : <p className="text-sm italic text-muted-foreground">No note</p>}</div><div className="relative z-10"><DeleteSubmissionButton id={row.id} compact /></div></CardContent></Card>)}</div>
+        </>
+      )}
+      {pageCount > 1 && <Pagination><PaginationContent><PaginationItem><PaginationPrevious href="#" onClick={(event) => { event.preventDefault(); setPage(Math.max(1, currentPage - 1)); }} aria-disabled={currentPage === 1} /></PaginationItem><PaginationItem><PaginationLink href="#" isActive onClick={(event) => event.preventDefault()}>{currentPage} / {pageCount}</PaginationLink></PaginationItem><PaginationItem><PaginationNext href="#" onClick={(event) => { event.preventDefault(); setPage(Math.min(pageCount, currentPage + 1)); }} aria-disabled={currentPage === pageCount} /></PaginationItem></PaginationContent></Pagination>}
+    </div>
+  );
+}

app/admin/form/[id]/result/page.tsx

@@ -1,79 +1,10 @@
-import Link from "next/link";
+import { parseResultFilters, getFilteredSubmissions } from "@/lib/admin-form-results";
-import { redirect } from "next/navigation";
+import { getDiscordMemberProfile } from "@/lib/discord";
-import { Badge } from "@/components/ui/badge";
-import { Kbd } from "@/components/ui/kbd";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card";
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table";
-import {
-  Pagination,
-  PaginationContent,
-  PaginationItem,
-  PaginationLink,
-  PaginationNext,
-  PaginationPrevious,
-} from "@/components/ui/pagination";
-import {
-  getFilteredSubmissions,
-  parseResultFilters,
-  resultFiltersToSearchParams,
-  RESULTS_PAGE_SIZE,
-} from "@/lib/admin-form-results";
-import { DeleteAllSubmissionsButton, DeleteSubmissionButton } from "@/components/delete-buttons";
-import { ResultsFilters } from "@/components/results-filters";
 import { RealtimeRefresh } from "@/components/realtime-refresh";
-import {
+import ResultsClient from "./client";
-  getDiscordMemberProfile,
-  type DiscordMemberProfile,
-} from "@/lib/discord";
 
 export const dynamic = "force-dynamic";
 
-function formatDate(date: Date) {
-  return date.toLocaleString("en-GB", {
-    timeZone: "Asia/Bangkok",
-    hour12: false,
-  });
-}
-
-function RespondentName({
-  submission,
-  profile,
-}: {
-  submission: {
-    userName: string | null;
-    userDiscordId: string | null;
-  };
-  profile: DiscordMemberProfile | null;
-}) {
-  const displayName =
-    profile?.globalName ||
-    profile?.username ||
-    submission.userName ||
-    submission.userDiscordId ||
-    "Anonymous";
-  const username = profile?.username || submission.userName;
-
-  return (
-    <span className="inline-flex flex-wrap items-center gap-1.5">
-      <span>{displayName}</span>
-      {username && username !== displayName && <Kbd>({username})</Kbd>}
-    </span>
-  );
-}
-
 export default async function ResultsListPage({
   params,
   searchParams,
@@ -82,202 +13,42 @@ export default async function ResultsListPage({
   searchParams: Promise<Record<string, string | string[] | undefined>>;
 }) {
   const [{ id }, rawFilters] = await Promise.all([params, searchParams]);
-  const filters = parseResultFilters(rawFilters);
+  const initialFilters = parseResultFilters(rawFilters);
-  const { rows, total } = await getFilteredSubmissions(id, filters);
+  const { rows } = await getFilteredSubmissions(id, parseResultFilters({}), {
-  const pageCount = Math.max(1, Math.ceil(total / RESULTS_PAGE_SIZE));
+    paginate: false,
-  if (total > 0 && filters.page > pageCount) {
+  });
-    redirect(`?${resultFiltersToSearchParams(filters, { page: pageCount })}`);
-  }
-  const currentPage = Math.min(filters.page, pageCount);
-  const listQuery = resultFiltersToSearchParams(filters);
   const discordIds = [
     ...new Set(
       rows
-        .map((submission) => submission.userDiscordId)
+        .map((row) => row.userDiscordId)
-        .filter((discordId): discordId is string => Boolean(discordId))
+        .filter((value): value is string => Boolean(value))
     ),
   ];
-  const respondentProfiles = new Map(
+  const profiles = Object.fromEntries(
     await Promise.all(
-      discordIds.map(
+      discordIds.map(async (discordId) => [
-        async (discordId) =>
+        discordId,
-          [discordId, await getDiscordMemberProfile(discordId)] as const
+        await getDiscordMemberProfile(discordId),
-      )
+      ])
     )
   );
 
   return (
-    <div className="mx-auto flex w-full max-w-6xl flex-col gap-6 p-4 pb-12 md:p-6">
-      <RealtimeRefresh topic="submissions" formId={id} />
-      <div className="flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between">
-        <div>
-          <h2 className="text-2xl font-semibold">Responses</h2>
-          <p className="text-muted-foreground">
-            {total} matching {total === 1 ? "response" : "responses"}
-          </p>
-        </div>
-        {total > 0 && <DeleteAllSubmissionsButton formId={id} />}
-      </div>
-
-      <ResultsFilters key={listQuery} formId={id} filters={filters} />
-
-      {rows.length === 0 ? (
-        <Card>
-          <CardHeader>
-            <CardTitle>No responses found</CardTitle>
-            <CardDescription>
-              {total === 0 && !listQuery
-                ? "Responses will appear here after people submit the form."
-                : "Try changing or clearing the current filters."}
-            </CardDescription>
-          </CardHeader>
-        </Card>
-      ) : (
     <>
-          <Card className="hidden md:block">
+      <RealtimeRefresh topic="submissions" formId={id} />
-            <CardContent className="p-0">
+      <ResultsClient
-              <Table>
+        formId={id}
-                <TableHeader>
+        initialFilters={initialFilters}
-                  <TableRow>
+        rows={rows.map((row) => ({
-                    <TableHead>Respondent</TableHead>
+          id: row.id,
-                    <TableHead>Submitted</TableHead>
+          userName: row.userName,
-                    <TableHead>Note</TableHead>
+          userDiscordId: row.userDiscordId,
-                    <TableHead className="text-right">Actions</TableHead>
+          submittedAt: row.submittedAt.toISOString(),
-                  </TableRow>
+          adminNote: row.adminNote,
-                </TableHeader>
+          editHistory: Array.isArray(row.editHistory) ? row.editHistory : [],
-                <TableBody>
+        }))}
-                  {rows.map((submission) => {
+        profiles={profiles}
-                    const detailHref = `/admin/form/${id}/result/${submission.id}${listQuery ? `?return=${encodeURIComponent(listQuery)}` : ""}`;
-                    return (
-                      <TableRow key={submission.id} className="relative cursor-pointer">
-                        <TableCell>
-                          <Link
-                            href={detailHref}
-                            className="font-medium after:absolute after:inset-0 focus-visible:outline-none focus-visible:after:ring-2 focus-visible:after:ring-ring focus-visible:after:ring-inset"
-                          >
-                            <RespondentName
-                              submission={submission}
-                              profile={
-                                submission.userDiscordId
-                                  ? respondentProfiles.get(
-                                      submission.userDiscordId
-                                    ) ?? null
-                                  : null
-                              }
       />
-                          </Link>
-                          {submission.userName && submission.userDiscordId && (
-                            <p className="text-xs text-muted-foreground">
-                              {submission.userDiscordId}
-                            </p>
-                          )}
-                        </TableCell>
-                        <TableCell>{formatDate(submission.submittedAt)}</TableCell>
-                        <TableCell className="max-w-80">
-                          {submission.adminNote ? (
-                            <p className="line-clamp-2 whitespace-pre-wrap text-sm">
-                              {submission.adminNote}
-                            </p>
-                          ) : (
-                            <span className="text-sm italic text-muted-foreground">
-                              No note
-                            </span>
-                          )}
-                        </TableCell>
-                        <TableCell className="relative z-10 text-right">
-                          <DeleteSubmissionButton id={submission.id} compact />
-                        </TableCell>
-                      </TableRow>
-                    );
-                  })}
-                </TableBody>
-              </Table>
-            </CardContent>
-          </Card>
-
-          <div className="flex flex-col gap-3 md:hidden">
-            {rows.map((submission) => {
-              const detailHref = `/admin/form/${id}/result/${submission.id}${listQuery ? `?return=${encodeURIComponent(listQuery)}` : ""}`;
-              return (
-                <Card
-                  key={submission.id}
-                  className="relative transition-colors hover:bg-muted/50"
-                >
-                  <CardHeader>
-                    <CardTitle className="text-base">
-                      <Link
-                        href={detailHref}
-                        className="after:absolute after:inset-0 focus-visible:outline-none focus-visible:after:ring-2 focus-visible:after:ring-ring focus-visible:after:ring-inset"
-                      >
-                        <RespondentName
-                          submission={submission}
-                          profile={
-                            submission.userDiscordId
-                              ? respondentProfiles.get(
-                                  submission.userDiscordId
-                                ) ?? null
-                              : null
-                          }
-                        />
-                      </Link>
-                    </CardTitle>
-                    <CardDescription>
-                      {formatDate(submission.submittedAt)}
-                    </CardDescription>
-                  </CardHeader>
-                  <CardContent className="flex items-start justify-between gap-4">
-                    <div className="min-w-0">
-                      <p className="text-xs font-medium text-muted-foreground">
-                        Note
-                      </p>
-                      {submission.adminNote ? (
-                        <p className="line-clamp-3 whitespace-pre-wrap text-sm">
-                          {submission.adminNote}
-                        </p>
-                      ) : (
-                        <p className="text-sm italic text-muted-foreground">
-                          No note
-                        </p>
-                      )}
-                    </div>
-                    <div className="relative z-10">
-                      <DeleteSubmissionButton id={submission.id} compact />
-                    </div>
-                  </CardContent>
-                </Card>
-              );
-            })}
-          </div>
     </>
-      )}
-
-      {pageCount > 1 && (
-        <Pagination>
-          <PaginationContent>
-            <PaginationItem>
-              <PaginationPrevious
-                href={`?${resultFiltersToSearchParams(filters, {
-                  page: Math.max(1, currentPage - 1),
-                })}`}
-                aria-disabled={currentPage === 1}
-              />
-            </PaginationItem>
-            <PaginationItem>
-              <PaginationLink href={`?${listQuery}`} isActive size="default">
-                {currentPage} / {pageCount}
-              </PaginationLink>
-            </PaginationItem>
-            <PaginationItem>
-              <PaginationNext
-                href={`?${resultFiltersToSearchParams(filters, {
-                  page: Math.min(pageCount, currentPage + 1),
-                })}`}
-                aria-disabled={currentPage === pageCount}
-              />
-            </PaginationItem>
-          </PaginationContent>
-        </Pagination>
-      )}
-    </div>
   );
 }

bun.lock

@@ -24,7 +24,7 @@
         "date-fns": "^4.4.0",
         "drizzle-orm": "^0.45.2",
         "lucide-react": "^1.23.0",
-        "next": "^16.2.10",
+        "next": "^16.2.12",
         "next-auth": "^4.24.14",
         "next-themes": "^0.4.6",
         "postgres": "^3.4.9",
@@ -317,19 +317,19 @@
 
     "@next/swc-darwin-arm64": ["@next/[email protected]", "", { "os": "darwin", "cpu": "arm64" }, "sha512-v9IdJCa0H0mbo+8z5zwUpOk1Vj7RjkcI5uNYf5Ws1y6szf/p3Mzl9hLaST8SCt6L9h8NGnruZcd2+o0NTNwDhA=="],
 
-    "@next/swc-darwin-x64": ["@next/[email protected]", "", { "os": "darwin", "cpu": "x64" }, "sha512-17IS0jJRViROGmA9uGdNR8VPJpfbnaVG7E9qhso5jDLkmyd0lSDORWxbcKINzcFqzZqGwGtMSnrFRxBpuUYjLQ=="],
+    "@next/swc-darwin-x64": ["@next/[email protected]", "", { "os": "darwin", "cpu": "x64" }, "sha512-17ISGmA9uGdNR8VPJpfbnaVG7E9qhso5jDLkmyd0lSDORWxbcKINzcFqzZqGwGtMSnrFRxBpuUYjLQAAAAAAAA=="],
 
-    "@next/swc-linux-arm64-gnu": ["@next/[email protected]0", "", { "os": "linux", "cpu": "arm64" }, "sha512-GRQRsRtuciNJvB54AvvuQTiq0oZtFwa1owQqtZD8wwnGpM2L39MV22kpI72YSXLKIyY40LC66EiLFv4PiicXxg=="],
+    "@next/swc-linux-arm64-gnu": ["@next/[email protected]2", "", { "os": "linux", "cpu": "arm64" }, "sha512-+YqU2h1cQkHsGfvjAsrSmst8UIFBibBGm5x3Xgel8NLMiDQtNOM4sM2GOEMvG5YiOBNeN/Ykk8cQC2S0Xrqljg=="],
 
-    "@next/swc-linux-arm64-musl": ["@next/[email protected]0", "", { "os": "linux", "cpu": "arm64" }, "sha512-zkN9MQYS7UQBro+FnISUq1itaQjXI9xqISzuQ+2bc921NcJ1x4yPCqrn77tVN6/dOOXaaWVX3k6/bR07pPwK+A=="],
+    "@next/swc-linux-arm64-musl": ["@next/[email protected]2", "", { "os": "linux", "cpu": "arm64" }, "sha512-0qjhiYBaKAqF63LA1ZWAAnKTzFUguAaZiRa5etMLGGPj/B6uEVjtIZldIzFEp3wHlB0koK6aTzqPtSdplTCjoA=="],
 
-    "@next/swc-linux-x64-gnu": ["@next/[email protected]0", "", { "os": "linux", "cpu": "x64" }, "sha512-iCVJnwvrPYECvA6WM/7+oo+OiTvedIKLxtCLAZP4xZR3nXa1zmzZyLPbYCmWvpd4CvMYF1EMTafd0ii3DygLvA=="],
+    "@next/swc-linux-x64-gnu": ["@next/[email protected]2", "", { "os": "linux", "cpu": "x64" }, "sha512-7A3q26W+h7gnA15uqBToNuDqBEFZZcqh0mW2mn4AJh/G5pdg2RVE3n4slzLEliASZFG3NmsbEzng/x2Sh09mBg=="],
 
-    "@next/swc-linux-x64-musl": ["@next/[email protected]0", "", { "os": "linux", "cpu": "x64" }, "sha512-ov2g4H0dHY9bPoOU83m91hWT7Iq5qy13bUnyyshLU3HGR1Ownn0X9QpmDPc5iIUaahTp7f7LeGAhV4DSFtackw=="],
+    "@next/swc-linux-x64-musl": ["@next/[email protected]2", "", { "os": "linux", "cpu": "x64" }, "sha512-qSjL/uppm+cbh21s72Ss8gkiOhQ4dExWHNGOWy6eZV7STj5WsKehgxT61beSsOj+YYQuTplL376lOCdMQU5T8w=="],
 
-    "@next/swc-win32-arm64-msvc": ["@next/[email protected]0", "", { "os": "win32", "cpu": "arm64" }, "sha512-DwAnhLX76HQiFFQNgWlcK+JzlnD1rZ+UK/WY0ZMI/deXpvgnesjNYrqcfo1JzBuz4Kf7o3brIBL0glI1junatA=="],
+    "@next/swc-win32-arm64-msvc": ["@next/[email protected]2", "", { "os": "win32", "cpu": "arm64" }, "sha512-X6hzsOUJac/e7AWSbn9gQ9nzHld1xWP5iyjHpYWvud8pufB679O1xg4JDyKr8Xd69Jvd+kM2Der6uftiZCmjYA=="],
 
-    "@next/swc-win32-x64-msvc": ["@next/[email protected]0", "", { "os": "win32", "cpu": "x64" }, "sha512-0JXq3b85Jk9Jg4ntLUbXSPvoDw3gpZou7twuKdoFG2jOw635v7+IiXfTaa0TxVMyx78pUjnrVYwLgjKfX4e6/A=="],
+    "@next/swc-win32-x64-msvc": ["@next/[email protected]2", "", { "os": "win32", "cpu": "x64" }, "sha512-F6fakeHuFTLOPt0bslQJdf+xtT+WIP9DVn/m4y1w1mRnVPyh3D/cNvzlRkxM444xfm+IvvYNSOrKiA2CDJ0Uxw=="],
 
     "@nodelib/fs.scandir": ["@nodelib/[email protected]", "", { "dependencies": { "@nodelib/fs.stat": "2.0.5", "run-parallel": "^1.1.9" } }, "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g=="],
 
@@ -1223,7 +1223,7 @@
 
     "negotiator": ["[email protected]", "", {}, "sha512-8Ofs/AUQh8MaEcrlq5xOX0CQ9ypTF5dl78mjlMNfOK08fzpgTHQRQPBxcPlEtIw0yRpws+Zo/3r+5WRby7u3Gg=="],
 
-    "next": ["[email protected]0", "", { "dependencies": { "@next/env": "16.2.10", "@swc/helpers": "0.5.15", "baseline-browser-mapping": "^2.9.19", "caniuse-lite": "^1.0.30001579", "postcss": "8.4.31", "styled-jsx": "5.1.6" }, "optionalDependencies": { "@next/swc-darwin-arm64": "16.2.10", "@next/swc-darwin-x64": "16.2.10", "@next/swc-linux-arm64-gnu": "16.2.10", "@next/swc-linux-arm64-musl": "16.2.10", "@next/swc-linux-x64-gnu": "16.2.10", "@next/swc-linux-x64-musl": "16.2.10", "@next/swc-win32-arm64-msvc": "16.2.10", "@next/swc-win32-x64-msvc": "16.2.10", "sharp": "^0.34.5" }, "peerDependencies": { "@opentelemetry/api": "^1.1.0", "@playwright/test": "^1.51.1", "babel-plugin-react-compiler": "*", "react": "^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0", "react-dom": "^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0", "sass": "^1.3.0" }, "optionalPeers": ["@opentelemetry/api", "@playwright/test", "babel-plugin-react-compiler", "sass"], "bin": { "next": "dist/bin/next" } }, "sha512-2som5AVXb3kE6Yjine3/mNbBayYF58eguBWIVVUdr1y/L426xyVEgYxgBG+1QC34P2x5E+tcDup6XkuOAX3dCA=="],
+    "next": ["[email protected]2", "", { "dependencies": { "@next/env": "16.2.12", "@swc/helpers": "0.5.15", "baseline-browser-mapping": "^2.9.19", "caniuse-lite": "^1.0.30001579", "postcss": "8.4.31", "styled-jsx": "5.1.6" }, "optionalDependencies": { "@next/swc-darwin-arm64": "16.2.12", "@next/swc-darwin-x64": "16.2.12", "@next/swc-linux-arm64-gnu": "16.2.12", "@next/swc-linux-arm64-musl": "16.2.12", "@next/swc-linux-x64-gnu": "16.2.12", "@next/swc-linux-x64-musl": "16.2.12", "@next/swc-win32-arm64-msvc": "16.2.12", "@next/swc-win32-x64-msvc": "16.2.12", "sharp": "^0.34.5" }, "peerDependencies": { "@opentelemetry/api": "^1.1.0", "@playwright/test": "^1.51.1", "babel-plugin-react-compiler": "*", "react": "^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0", "react-dom": "^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0", "sass": "^1.3.0" }, "optionalPeers": ["@opentelemetry/api", "@playwright/test", "babel-plugin-react-compiler", "sass"], "bin": { "next": "dist/bin/next" } }, "sha512-iD59eYQWmbFcEbX7v/acG5DRym9iw1DdaPoD0WTA920naWsE25wShzJW4+UvAs8MK9EC2kBfIH6vtto1H1PHGw=="],
 
     "next-auth": ["[email protected]", "", { "dependencies": { "@babel/runtime": "^7.20.13", "@panva/hkdf": "^1.0.2", "cookie": "^0.7.0", "jose": "^4.15.5", "oauth": "^0.9.15", "openid-client": "^5.4.0", "preact": "^10.6.3", "preact-render-to-string": "^5.1.19", "uuid": "^8.3.2" }, "peerDependencies": { "@auth/core": "0.34.3", "next": "^12.2.5 || ^13 || ^14 || ^15 || ^16", "nodemailer": "^7.0.7", "react": "^17.0.2 || ^18 || ^19", "react-dom": "^17.0.2 || ^18 || ^19" }, "optionalPeers": ["@auth/core", "nodemailer"] }, "sha512-YRz6xFDXKUwiXSMMChbrBEWyFktZ1qZXEgeSHQQ3nsy08B4c/xLk6REeutRsIFwkjY/1+ShHnu07DN3JeJguig=="],
 

components/results-filters.tsx

@@ -72,14 +72,26 @@ function DateFilterPicker({
 export function ResultsFilters({
   formId,
   filters,
+  onFiltersChange,
 }: {
   formId: string;
   filters: ResultFilters;
+  onFiltersChange?: (filters: ResultFilters) => void;
 }) {
   const router = useRouter();
   const [values, setValues] = useState(filters);
   const base = `/admin/form/${formId}/result`;
 
+  const updateValues = (
+    update: (current: ResultFilters) => ResultFilters
+  ) => {
+    setValues((current) => {
+      const next = update(current);
+      onFiltersChange?.(next);
+      return next;
+    });
+  };
+
   const filterQuery = useMemo(() => {
     const params = new URLSearchParams();
     if (values.q) params.set("q", values.q);
@@ -103,6 +115,7 @@ export function ResultsFilters({
   }, [filters]);
 
   useEffect(() => {
+    if (onFiltersChange) return;
     if (filterQuery === appliedQuery) return;
 
     const timeout = window.setTimeout(() => {
@@ -112,7 +125,7 @@ export function ResultsFilters({
     }, 350);
 
     return () => window.clearTimeout(timeout);
-  }, [appliedQuery, base, filterQuery, router]);
+  }, [appliedQuery, base, filterQuery, onFiltersChange, router]);
 
   return (
     <div className="flex flex-col gap-3">
@@ -120,7 +133,7 @@ export function ResultsFilters({
         <Input
           value={values.q}
           onChange={(event) =>
-            setValues((current) => ({ ...current, q: event.target.value }))
+            updateValues((current) => ({ ...current, q: event.target.value }))
           }
           placeholder="Search name or Discord ID"
           aria-label="Search responses"
@@ -128,7 +141,7 @@ export function ResultsFilters({
         <Select
           value={values.edited}
           onValueChange={(edited: ResultFilters["edited"]) =>
-            setValues((current) => ({ ...current, edited }))
+            updateValues((current) => ({ ...current, edited }))
           }
         >
           <SelectTrigger className="w-full lg:w-40" aria-label="Edit status">
@@ -149,7 +162,7 @@ export function ResultsFilters({
               ResultFilters["sort"],
               ResultFilters["direction"],
             ];
-            setValues((current) => ({ ...current, sort, direction }));
+            updateValues((current) => ({ ...current, sort, direction }));
           }}
         >
           <SelectTrigger className="w-full lg:w-44" aria-label="Sort responses">
@@ -168,14 +181,14 @@ export function ResultsFilters({
           label="From date"
           value={values.dateFrom}
           onChange={(dateFrom) =>
-            setValues((current) => ({ ...current, dateFrom }))
+            updateValues((current) => ({ ...current, dateFrom }))
           }
         />
         <DateFilterPicker
           label="Through date"
           value={values.dateTo}
           onChange={(dateTo) =>
-            setValues((current) => ({ ...current, dateTo }))
+            updateValues((current) => ({ ...current, dateTo }))
           }
         />
         <Button variant="outline" asChild>
@@ -189,11 +202,32 @@ export function ResultsFilters({
         filters.edited !== "all" ||
         filters.dateFrom ||
         filters.dateTo) && (
-        <Button variant="ghost" size="sm" className="self-start" asChild>
+        <Button
+          variant="ghost"
+          size="sm"
+          className="self-start"
+          asChild={!onFiltersChange}
+          onClick={onFiltersChange ? () => updateValues(() => ({
+            q: "",
+            page: 1,
+            sort: "submittedAt",
+            direction: "desc",
+            edited: "all",
+            dateFrom: "",
+            dateTo: "",
+          })) : undefined}
+        >
+          {onFiltersChange ? (
+            <span>
+              <X data-icon="inline-start" />
+              Clear filters
+            </span>
+          ) : (
             <a href={base}>
               <X data-icon="inline-start" />
               Clear filters
             </a>
+          )}
         </Button>
       )}
     </div>

lib/admin-form-results.ts

@@ -43,14 +43,9 @@ export function parseResultFilters(
     page: Number.isFinite(page) && page > 0 ? page : 1,
     sort: sort === "respondent" ? "respondent" : "submittedAt",
     direction: direction === "asc" ? "asc" : "desc",
-    edited:
+    edited: edited === "edited" || edited === "unedited" ? edited : "all",
-      edited === "edited" || edited === "unedited" ? edited : "all",
+    dateFrom: /^\d{4}-\d{2}-\d{2}$/.test(value("dateFrom")) ? value("dateFrom") : "",
-    dateFrom: /^\d{4}-\d{2}-\d{2}$/.test(value("dateFrom"))
+    dateTo: /^\d{4}-\d{2}-\d{2}$/.test(value("dateTo")) ? value("dateTo") : "",
-      ? value("dateFrom")
-      : "",
-    dateTo: /^\d{4}-\d{2}-\d{2}$/.test(value("dateTo"))
-      ? value("dateTo")
-      : "",
   };
 }
 

package.json

@@ -38,7 +38,7 @@
     "date-fns": "^4.4.0",
     "drizzle-orm": "^0.45.2",
     "lucide-react": "^1.23.0",
-    "next": "^16.2.10",
+    "next": "^16.2.12",
     "next-auth": "^4.24.14",
     "next-themes": "^0.4.6",
     "postgres": "^3.4.9",