Improve admin form workspace UX

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

@@ -12,13 +12,26 @@ interface SubmissionDetailPageProps {
     id: string;
     submissionId: string;
   }>;
+  searchParams: Promise<{ return?: string | string[] }>;
 }
 
-export default async function SubmissionDetailPage({ params }: SubmissionDetailPageProps) {
-  const { id: formId, submissionId } = await params;
+export default async function SubmissionDetailPage({
+  params,
+  searchParams,
+}: SubmissionDetailPageProps) {
+  const [{ id: formId, submissionId }, query] = await Promise.all([
+    params,
+    searchParams,
+  ]);
+  const returnValue = Array.isArray(query.return) ? query.return[0] : query.return;
+  const returnQuery = returnValue?.slice(0, 1000) || "";
+  const backHref = `/admin/form/${formId}/result${returnQuery ? `?${returnQuery}` : ""}`;
+  const detailHref = (id: string) =>
+    `/admin/form/${formId}/result/${id}${returnQuery ? `?return=${encodeURIComponent(returnQuery)}` : ""}`;
 
   const submission = await db.query.submissions.findFirst({
-    where: (s, { eq }) => eq(s.id, submissionId),
+    where: (s, { eq, and }) =>
+      and(eq(s.id, submissionId), eq(s.formId, formId)),
   });
 
   if (!submission) {
@@ -50,28 +63,14 @@ export default async function SubmissionDetailPage({ params }: SubmissionDetailP
   return (
     <div className="space-y-6 w-full max-w-6xl mx-auto p-4 md:p-6 pb-10">
       <RealtimeRefresh topic="submissions" formId={formId} />
-      <div className="flex items-center justify-between">
-        <div className="flex items-center gap-2">
-          <Link href={`/admin/form/${formId}/result`}>
-            <Button variant="ghost" size="icon">
-              <ArrowLeft className="w-4 h-4" />
-            </Button>
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+        <Button variant="ghost" asChild className="self-start">
+          <Link href={backHref}>
+            <ArrowLeft data-icon="inline-start" />
+            Back to responses
           </Link>
-          <h1 className="text-3xl font-bold tracking-tight">Response Detail</h1>
-        </div>
-        <div className="flex items-center gap-2">
-          {prevId && (
-            <Link href={`/admin/form/${formId}/result/${prevId}`}>
-              <Button variant="outline" size="sm">Previous</Button>
-            </Link>
-          )}
-          {nextId && (
-            <Link href={`/admin/form/${formId}/result/${nextId}`}>
-              <Button variant="outline" size="sm">Next</Button>
-            </Link>
-          )}
-          <DeleteSubmissionButton id={submission.id} redirectUrl={`/admin/form/${formId}/result`} />
-        </div>
+        </Button>
+        <DeleteSubmissionButton id={submission.id} redirectUrl={backHref} />
       </div>
 
       <SubmissionDetailClient
@@ -82,18 +81,18 @@ export default async function SubmissionDetailPage({ params }: SubmissionDetailP
 
       <div className="flex justify-between items-center mt-8 pt-6 border-t">
         {prevId ? (
-          <Link href={`/admin/form/${formId}/result/${prevId}`}>
+            <Link href={detailHref(prevId)}>
             <Button variant="outline">
-              <ArrowLeft className="w-4 h-4 mr-2" /> Previous
+              <ArrowLeft data-icon="inline-start" /> Previous
             </Button>
           </Link>
         ) : (
           <div />
         )}
         {nextId && (
-          <Link href={`/admin/form/${formId}/result/${nextId}`}>
+            <Link href={detailHref(nextId)}>
             <Button variant="outline">
-              Next <ArrowRight className="w-4 h-4 ml-2" />
+              Next <ArrowRight data-icon="inline-end" />
             </Button>
           </Link>
         )}