refactor: fix ai slop

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

@@ -71,6 +71,11 @@ import {
   FieldLegend,
   FieldSet,
 } from "@/components/ui/field";
+import {
+  getQuestionResponseSettings,
+  getQuestionResponseType,
+  type QuestionResponseType,
+} from "@/lib/question-response-type";
 
 interface Question {
   id: string;
@@ -241,6 +246,16 @@ export default function FormEditorClient({ form, initialQuestions }: FormEditorC
     questionsAutoSave.schedule();
   };
 
+  const handleResponseTypeChange = (
+    question: Question,
+    responseType: QuestionResponseType,
+  ) => {
+    handleUpdateQuestion(
+      question.id,
+      getQuestionResponseSettings(responseType, question.required),
+    );
+  };
+
   const handleDeleteQuestion = async (id: string) => {
     try {
       await deleteQuestion(id, form.id);
@@ -504,7 +519,7 @@ export default function FormEditorClient({ form, initialQuestions }: FormEditorC
                             </CardTitle>
                             <CardDescription>
                               Question {index + 1} · {questionTypeLabel(q.type)}
-                              {q.required ? " · Required" : ""}
+                              {q.required || q.imageAnswerMode === "required" ? " · Required" : ""}
                             </CardDescription>
                           </div>
                         </AccordionTrigger>
@@ -639,29 +654,12 @@ 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>
-                <Field className="w-full max-w-xs">
-                  <FieldLabel>Answer image</FieldLabel>
+                <Field className="w-full max-w-sm">
+                  <FieldLabel>Response type</FieldLabel>
                   <Select
-                    value={q.imageAnswerMode}
+                    value={getQuestionResponseType(q)}
                     onValueChange={(val) =>
-                      handleUpdateQuestion(q.id, {
-                        imageAnswerMode: val as Question["imageAnswerMode"],
-                      })
+                      handleResponseTypeChange(q, val as QuestionResponseType)
                     }
                   >
                     <SelectTrigger>
@@ -669,13 +667,40 @@ export default function FormEditorClient({ form, initialQuestions }: FormEditorC
                     </SelectTrigger>
                     <SelectContent>
                       <SelectGroup>
-                        <SelectItem value="none">Off</SelectItem>
-                        <SelectItem value="optional">Optional</SelectItem>
-                        <SelectItem value="required">Required</SelectItem>
+                        <SelectItem value="answer-only">Answer only</SelectItem>
+                        <SelectItem value="answer-optional-image">
+                          Answer + optional image
+                        </SelectItem>
+                        <SelectItem value="image-only">Image only</SelectItem>
+                        <SelectItem value="answer-required-image">
+                          Answer + required image
+                        </SelectItem>
                       </SelectGroup>
                     </SelectContent>
                   </Select>
+                  <FieldDescription>
+                    “Image only” hides the normal answer field. “Answer + required image” requires both.
+                  </FieldDescription>
                 </Field>
+                {(q.imageAnswerMode === "none" || q.imageAnswerMode === "optional") && (
+                  <Field orientation="horizontal">
+                    <Switch
+                      id={`required-${q.id}`}
+                      checked={q.required}
+                      onCheckedChange={(checked) =>
+                        handleUpdateQuestion(q.id, { required: checked })
+                      }
+                    />
+                    <div>
+                      <FieldLabel htmlFor={`required-${q.id}`}>
+                        Require answer
+                      </FieldLabel>
+                      <FieldDescription>
+                        Users must complete the normal answer field.
+                      </FieldDescription>
+                    </div>
+                  </Field>
+                )}
               </div>
 
               {(q.type === "radio" || q.type === "checkbox") && (