style: move button

app/actions/submissions.ts

@@ -9,11 +9,8 @@ import { authOptions } from "@/lib/auth-options";
 import { requireAdmin, requireDiscordId, requireFormAccess } from "@/lib/auth";
 import { sse } from "@/lib/sse";
 import type { FormAnswerValue } from "@/lib/form-answer-values";
-import {
-  answersByTemplateIndex,
-  normalizeSubmissionAnswers,
-  submissionUpdateText,
-} from "@/lib/submission-intake";
+import { normalizeSubmissionAnswers } from "@/lib/submission-intake";
+import { submissionWebhookMessage } from "@/lib/submission-webhook";
 
 export async function submitForm(
   formId: string,
@@ -132,30 +129,19 @@ export async function submitForm(
     ? form.discordWebhookUpdateTemplate
     : form.discordWebhookTemplate;
 
-  if (form.discordWebhookUrl && templateToUse) {
+  if (form.discordWebhookUrl) {
     try {
-      const answersDict = answersByTemplateIndex(questionsList, normalizedAnswers);
-      const updatesText = result.isUpdate
-        ? submissionUpdateText(questionsList, normalizedAnswers, result.oldAnswersDict)
-        : "";
-
-      let message = templateToUse;
-      // Replace {1}, {2}, etc. with value, and new variables
-      message = message.replace(/\{([^}]+)\}/g, (match: string, p1: string) => {
-        const key = p1.toLowerCase();
-        if (key === "username" || key === "displayname") {
-          return session.user?.name || "Unknown User";
-        }
-        if (key === "id") {
-          return discordId || "Unknown ID";
-        }
-        if (key === "update") {
-          return updatesText;
-        }
-        return answersDict[p1] || "Not Provided";
+      const message = submissionWebhookMessage({
+        template: templateToUse,
+        isUpdate: result.isUpdate,
+        userName: session.user.name,
+        discordId,
+        questions: questionsList,
+        answers: normalizedAnswers,
+        oldAnswersByQuestionId: result.oldAnswersDict,
       });
 
-      await fetch(form.discordWebhookUrl, {
+      const response = await fetch(form.discordWebhookUrl, {
         method: "POST",
         headers: {
           "Content-Type": "application/json",
@@ -164,6 +150,14 @@ export async function submitForm(
           content: message,
         }),
       });
+      if (!response.ok) {
+        const responseBody = await response.text();
+        console.error("Discord webhook rejected submission notification", {
+          status: response.status,
+          statusText: response.statusText,
+          response: responseBody.slice(0, 500),
+        });
+      }
     } catch (e) {
       console.error("Failed to send webhook", e);
     }

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

@@ -473,7 +473,7 @@ export default function FormEditorClient({ form, initialQuestions }: FormEditorC
                 </div>
               </div>
 
-              <div className="space-y-2">
+              <div className="flex flex-wrap items-center gap-4">
                 {q.imageUrl ? (
                   <div className="relative max-w-full h-auto inline-block shrink-0 group">
                     <Image
@@ -517,6 +517,21 @@ export default function FormEditorClient({ form, initialQuestions }: FormEditorC
                     />
                   </div>
                 )}
+                <div className="flex items-center gap-2">
+                  <Switch
+                    id={`required-${q.id}`}
+                    checked={q.required}
+                    onCheckedChange={(checked) =>
+                      handleUpdateQuestion(q.id, { required: checked })
+                    }
+                  />
+                  <Label
+                    htmlFor={`required-${q.id}`}
+                    className="text-sm font-normal text-muted-foreground"
+                  >
+                    Required
+                  </Label>
+                </div>
               </div>
 
               {(q.type === "radio" || q.type === "checkbox") && (
@@ -557,16 +572,6 @@ export default function FormEditorClient({ form, initialQuestions }: FormEditorC
 
               <div className="flex justify-between items-center pt-2 border-t border-border">
                 <div className="flex items-center flex-wrap gap-6">
-                  <div className="flex items-center gap-2">
-                    <Switch
-                      id={`required-${q.id}`}
-                      checked={q.required}
-                      onCheckedChange={(checked) => handleUpdateQuestion(q.id, { required: checked })}
-                    />
-                    <Label htmlFor={`required-${q.id}`} className="text-sm font-normal text-muted-foreground">
-                      Required
-                    </Label>
-                  </div>
                   {(q.type === "radio" || q.type === "checkbox") && (
                     <div className="flex items-center gap-2">
                       <Switch