Enhancement: Revamp question card ui

apps/web/app/environments/[environmentId]/surveys/[surveyId]/edit/MultipleChoiceSingleForm.tsx

@@ -1,7 +1,7 @@
 import type { MultipleChoiceSingleQuestion } from "@formbricks/types/questions";
 import { Survey } from "@formbricks/types/surveys";
 import { Button, Input, Label } from "@formbricks/ui";
-import { TrashIcon } from "@heroicons/react/24/solid";
+import { TrashIcon, PlusIcon } from "@heroicons/react/24/solid";
 import { createId } from "@paralleldrive/cuid2";
 import { cn } from "@formbricks/lib/cn";
 
@@ -31,13 +31,18 @@ export default function MultipleChoiceSingleForm({
     updateQuestion(questionIdx, { choices: newChoices });
   };
 
-  const addChoice = () => {
+  const addChoice = (choiceIdx?: number) => {
     let newChoices = !question.choices ? [] : question.choices;
     const otherChoice = newChoices.find((choice) => choice.id === "other");
     if (otherChoice) {
       newChoices = newChoices.filter((choice) => choice.id !== "other");
     }
-    newChoices.push({ id: createId(), label: "" });
+    const newChoice = { id: createId(), label: "" };
+    if (choiceIdx !== undefined) {
+      newChoices.splice(choiceIdx + 1, 0, newChoice);
+    } else {
+      newChoices.push(newChoice);
+    }
     if (otherChoice) {
       newChoices.push(otherChoice);
     }
@@ -84,17 +89,23 @@ export default function MultipleChoiceSingleForm({
         </div>
       </div>
 
-      <div className="mt-3">
-        <Label htmlFor="subheader">Description</Label>
-        <div className="mt-2">
-          <Input
-            id="subheader"
-            name="subheader"
-            value={question.subheader}
-            onChange={(e) => updateQuestion(questionIdx, { subheader: e.target.value })}
-          />
+      {question.subheader && (
+        <div className="mt-3">
+          <Label htmlFor="subheader">Description</Label>
+          <div className="mt-2 inline-flex w-full items-center">
+            <Input
+              id="subheader"
+              name="subheader"
+              value={question.subheader}
+              onChange={(e) => updateQuestion(questionIdx, { subheader: e.target.value })}
+            />
+            <TrashIcon
+              className="ml-2 h-4 w-4 cursor-pointer text-slate-400 hover:text-slate-500"
+              onClick={() => updateQuestion(questionIdx, { subheader: "" })}
+            />
+          </div>
         </div>
-      </div>
+      )}
 
       <div className="mt-3">
         <Label htmlFor="choices">Options</Label>
@@ -116,15 +127,15 @@ export default function MultipleChoiceSingleForm({
                     onClick={() => deleteChoice(choiceIdx)}
                   />
                 )}
+                <PlusIcon
+                  className="ml-2 h-4 w-4 cursor-pointer text-slate-400 hover:text-slate-500"
+                  onClick={() => addChoice(choiceIdx)}
+                />
               </div>
             ))}
           <div className="flex items-center space-x-2">
-            <Button variant="secondary" type="button" onClick={() => addChoice()}>
-              Add Option
-            </Button>
             {question.choices.filter((c) => c.id === "other").length === 0 && (
               <>
-                <p>or</p>
                 <Button size="sm" variant="minimal" type="button" onClick={() => addOther()}>
                   Add &quot;Other&quot; with specify
                 </Button>
@@ -133,19 +144,6 @@ export default function MultipleChoiceSingleForm({
           </div>
         </div>
       </div>
-
-      <div className="mt-3">
-        <Label htmlFor="buttonLabel">Button Label</Label>
-        <div className="mt-2">
-          <Input
-            id="buttonLabel"
-            name="buttonLabel"
-            value={question.buttonLabel}
-            placeholder={lastQuestion ? "Finish" : "Next"}
-            onChange={(e) => updateQuestion(questionIdx, { buttonLabel: e.target.value })}
-          />
-        </div>
-      </div>
     </form>
   );
 }

apps/web/app/environments/[environmentId]/surveys/[surveyId]/edit/QuestionCard.tsx

@@ -5,7 +5,7 @@ import { getQuestionTypeName } from "@/lib/questions";
 import { cn } from "@formbricks/lib/cn";
 import type { Question } from "@formbricks/types/questions";
 import type { Survey } from "@formbricks/types/surveys";
-import { Label, Switch } from "@formbricks/ui";
+import { Input, Label, Switch } from "@formbricks/ui";
 import {
   ChatBubbleBottomCenterTextIcon,
   ChevronDownIcon,
@@ -24,7 +24,7 @@ import MultipleChoiceMultiForm from "./MultipleChoiceMultiForm";
 import MultipleChoiceSingleForm from "./MultipleChoiceSingleForm";
 import NPSQuestionForm from "./NPSQuestionForm";
 import OpenQuestionForm from "./OpenQuestionForm";
-import QuestionDropdown from "./QuestionDropdown";
+import QuestionDropdown from "./QuestionMenu";
 import RatingQuestionForm from "./RatingQuestionForm";
 import UpdateQuestionId from "./UpdateQuestionId";
 
@@ -116,19 +116,6 @@ export default function QuestionCard({
                 </div>
 
                 <div className="flex items-center space-x-2">
-                  {open && (
-                    <div className="flex items-center space-x-2">
-                      <Label htmlFor="required-toggle">Required</Label>
-                      <Switch
-                        id="required-toggle"
-                        checked={question.required}
-                        onClick={(e) => {
-                          e.stopPropagation();
-                          updateQuestion(questionIdx, { required: !question.required });
-                        }}
-                      />
-                    </div>
-                  )}
                   <QuestionDropdown
                     questionIdx={questionIdx}
                     lastQuestion={lastQuestion}
@@ -190,12 +177,6 @@ export default function QuestionCard({
                 />
               ) : null}
               <div className="mt-4 border-t border-slate-200">
-                <LogicEditor
-                  question={question}
-                  updateQuestion={updateQuestion}
-                  localSurvey={localSurvey}
-                  questionIdx={questionIdx}
-                />
                 <Collapsible.Root open={openAdvanced} onOpenChange={setOpenAdvanced} className="mt-5">
                   <Collapsible.CollapsibleTrigger className="flex items-center text-xs text-slate-700 ">
                     {openAdvanced ? (
@@ -207,6 +188,24 @@ export default function QuestionCard({
                   </Collapsible.CollapsibleTrigger>
 
                   <Collapsible.CollapsibleContent className="space-y-2">
+                    <div className="mt-3">
+                      <Label htmlFor="buttonLabel">Button Label</Label>
+                      <div className="mt-2">
+                        <Input
+                          id="buttonLabel"
+                          name="buttonLabel"
+                          value={question.buttonLabel}
+                          placeholder={lastQuestion ? "Finish" : "Next"}
+                          onChange={(e) => updateQuestion(questionIdx, { buttonLabel: e.target.value })}
+                        />
+                      </div>
+                    </div>
+                    <LogicEditor
+                      question={question}
+                      updateQuestion={updateQuestion}
+                      localSurvey={localSurvey}
+                      questionIdx={questionIdx}
+                    />
                     <div className="mt-3">
                       <UpdateQuestionId
                         question={question}
@@ -219,6 +218,21 @@ export default function QuestionCard({
                 </Collapsible.Root>
               </div>
             </Collapsible.CollapsibleContent>
+            <div className="m-4 mt-0 border-t border-slate-200">
+              {open && (
+                <div className="mb-4 mr-4 mt-4 flex items-center justify-end space-x-2">
+                  <Label htmlFor="required-toggle">Required</Label>
+                  <Switch
+                    id="required-toggle"
+                    checked={question.required}
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      updateQuestion(questionIdx, { required: !question.required });
+                    }}
+                  />
+                </div>
+              )}
+            </div>
           </Collapsible.Root>
         </div>
       )}

apps/web/app/environments/[environmentId]/surveys/[surveyId]/edit/QuestionDropdown.tsx

@@ -1,71 +0,0 @@
-"use client";
-
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@formbricks/ui";
-import {
-  EllipsisHorizontalIcon,
-  ArrowUpIcon,
-  ArrowDownIcon,
-  TrashIcon,
-  DocumentDuplicateIcon,
-} from "@heroicons/react/24/solid";
-
-interface QuestionDropdownProps {
-  questionIdx: number;
-  lastQuestion: boolean;
-  duplicateQuestion: (questionIdx: number) => void;
-  deleteQuestion: (questionIdx: number) => void;
-  moveQuestion: (questionIdx: number, up: boolean) => void;
-}
-
-export default function QuestionDropdown({
-  questionIdx,
-  lastQuestion,
-  duplicateQuestion,
-  deleteQuestion,
-  moveQuestion,
-}: QuestionDropdownProps) {
-  return (
-    <DropdownMenu>
-      <DropdownMenuTrigger>
-        <EllipsisHorizontalIcon className="h-5 w-5 text-slate-600 focus:outline-none active:outline-none" />
-      </DropdownMenuTrigger>
-      <DropdownMenuContent>
-        <DropdownMenuItem
-          className="justify-between"
-          onClick={(e) => {
-            e.stopPropagation();
-            moveQuestion(questionIdx, true);
-          }}
-          disabled={questionIdx == 0}>
-          Move up <ArrowUpIcon className="ml-3 h-4" />
-        </DropdownMenuItem>
-        <DropdownMenuItem
-          className="justify-between"
-          onClick={(e) => {
-            e.stopPropagation();
-            moveQuestion(questionIdx, false);
-          }}
-          disabled={lastQuestion}>
-          Move down
-          <ArrowDownIcon className="h-4" />
-        </DropdownMenuItem>
-        <DropdownMenuItem
-          className="justify-between"
-          onClick={(e) => {
-            e.stopPropagation();
-            duplicateQuestion(questionIdx);
-          }}>
-          Duplicate <DocumentDuplicateIcon className="ml-3 h-4" />
-        </DropdownMenuItem>
-        <DropdownMenuItem
-          className="justify-between"
-          onClick={(e) => {
-            e.stopPropagation();
-            deleteQuestion(questionIdx);
-          }}>
-          Delete <TrashIcon className="ml-3 h-4" />
-        </DropdownMenuItem>
-      </DropdownMenuContent>
-    </DropdownMenu>
-  );
-}

apps/web/app/environments/[environmentId]/surveys/[surveyId]/edit/QuestionMenu.tsx

@@ -0,0 +1,56 @@
+"use client";
+
+import { ArrowUpIcon, ArrowDownIcon, TrashIcon, DocumentDuplicateIcon } from "@heroicons/react/24/solid";
+
+interface QuestionDropdownProps {
+  questionIdx: number;
+  lastQuestion: boolean;
+  duplicateQuestion: (questionIdx: number) => void;
+  deleteQuestion: (questionIdx: number) => void;
+  moveQuestion: (questionIdx: number, up: boolean) => void;
+}
+
+export default function QuestionActions({
+  questionIdx,
+  lastQuestion,
+  duplicateQuestion,
+  deleteQuestion,
+  moveQuestion,
+}: QuestionDropdownProps) {
+  return (
+    <div className="flex space-x-4">
+      <ArrowUpIcon
+        className={`h-4 cursor-pointer text-slate-500 ${questionIdx === 0 ? "opacity-50" : ""}`}
+        onClick={(e) => {
+          if (questionIdx !== 0) {
+            e.stopPropagation();
+            moveQuestion(questionIdx, true);
+          }
+        }}
+      />
+      <ArrowDownIcon
+        className={`h-4 cursor-pointer text-slate-500 ${lastQuestion ? "opacity-50" : ""}`}
+        onClick={(e) => {
+          if (!lastQuestion) {
+            e.stopPropagation();
+            moveQuestion(questionIdx, false);
+          }
+        }}
+      />
+      <DocumentDuplicateIcon
+        className="h-4 cursor-pointer text-slate-500"
+        onClick={(e) => {
+          e.stopPropagation();
+          duplicateQuestion(questionIdx);
+        }}
+      />
+      <TrashIcon
+        className="h-4 cursor-pointer text-slate-500"
+        onClick={(e) => {
+          e.stopPropagation();
+          deleteQuestion(questionIdx);
+        }}
+      />
+    </div>
+  );
+}