feat: improve form response experience

app/form/[id]/page.tsx

@@ -6,6 +6,10 @@ import { notFound } from "next/navigation";
 import LoginDialog from "@/components/login-dialog";
 import { canAccessForm, getSessionDiscordId } from "@/lib/auth";
 import { RealtimeRefresh } from "@/components/realtime-refresh";
+import {
+  decodeCheckboxAnswer,
+  type FormAnswerValue,
+} from "@/lib/form-answer-values";
 
 export const dynamic = "force-dynamic";
 
@@ -26,6 +30,10 @@ export default async function FormsSubmitPage(
     return notFound();
   }
 
+  if (!discordId) {
+    return <LoginDialog />;
+  }
+
   if (!(await canAccessForm(form, discordId))) {
     return notFound();
   }
@@ -35,34 +43,36 @@ export default async function FormsSubmitPage(
     orderBy: (q, { asc }) => [asc(q.displayOrder)],
   });
 
-  const initialAnswers: Record<string, string> = {};
-  if (discordId) {
-    const existingSubmission = await db.query.submissions.findFirst({
-      where: (s, { eq, and }) =>
-        and(eq(s.formId, form.id), eq(s.userDiscordId, discordId)),
-    });
+  const existingSubmission = await db.query.submissions.findFirst({
+    where: (s, { eq, and }) =>
+      and(eq(s.formId, form.id), eq(s.userDiscordId, discordId)),
+  });
 
-    if (existingSubmission) {
-      const answersList = await db.query.answers.findMany({
-        where: (a, { eq }) => eq(a.submissionId, existingSubmission.id),
-      });
-      for (const a of answersList) {
-        initialAnswers[a.questionId] = a.value;
-      }
+  const initialAnswers: Record<string, FormAnswerValue> = {};
+  if (existingSubmission) {
+    const answersList = await db.query.answers.findMany({
+      where: (a, { eq }) => eq(a.submissionId, existingSubmission.id),
+    });
+    const questionTypes = new Map(questionsList.map((question) => [question.id, question.type]));
+    for (const answer of answersList) {
+      initialAnswers[answer.questionId] =
+        questionTypes.get(answer.questionId) === "checkbox"
+          ? decodeCheckboxAnswer(answer.value)
+          : answer.value;
     }
   }
 
   return (
     <>
       <RealtimeRefresh topic="forms" formId={form.id} />
-      <div className="max-w-2xl mx-auto p-4 md:p-6 space-y-6">
+      <div className="mx-auto max-w-2xl">
         <FormFillerClient 
           form={form} 
           questions={questionsList} 
           initialAnswers={initialAnswers} 
+          hasSubmission={Boolean(existingSubmission)}
         />
       </div>
-      {!discordId && <LoginDialog />}
     </>
   );
 }

app/form/layout.tsx

@@ -64,7 +64,7 @@ export default async function FormLayout({
           <ThemeToggle />
         </div>
       </header>
-      <main className="flex-1 p-6 md:p-8 overflow-y-auto max-w-6xl mx-auto w-full">
+      <main className="mx-auto w-full max-w-6xl flex-1 overflow-y-auto px-3 py-4 sm:p-6 md:p-8">
         {children}
       </main>
     </div>