fix: Add option to enable and disable collapsible section

frontend/src/components/Fields.vue

@@ -15,6 +15,7 @@
         :label="section.label"
         :hideLabel="section.hideLabel"
         :opened="section.opened"
+        :collapsible="section.collapsible"
         collapseIconPosition="right"
       >
         <div

frontend/src/components/QuickEntryLayoutBuilder.vue

@@ -9,9 +9,15 @@
             >
               <div
                 v-if="!section.editingLabel"
+                class="flex items-center gap-2"
                 :class="{ 'text-ink-gray-3': section.hideLabel }"
               >
                 {{ __(section.label) || __('Untitled') }}
+                <FeatherIcon
+                  v-if="section.collapsible"
+                  name="chevron-down"
+                  class="h-4 transition-all duration-300 ease-in-out"
+                />
               </div>
               <div v-else class="flex gap-2 items-center">
                 <Input
@@ -166,6 +172,11 @@ function getOptions(section) {
       onClick: () => (section.editingLabel = true),
       condition: () => section.editable !== false,
     },
+    {
+      label: section.collapsible ? 'Uncollapsible' : 'Collapsible',
+      icon: section.collapsible ? 'chevron-up' : 'chevron-down',
+      onClick: () => (section.collapsible = !section.collapsible),
+    },
     {
       label: section.hideLabel ? 'Show Label' : 'Hide Label',
       icon: section.hideLabel ? 'eye' : 'eye-off',

frontend/src/components/Section.vue

@@ -4,10 +4,10 @@
       <div
         class="flex text-ink-gray-9 max-w-fit cursor-pointer items-center gap-2 text-base"
         v-bind="$attrs"
-        @click="toggle()"
+        @click="collapsible && toggle()"
       >
         <FeatherIcon
-          v-if="collapseIconPosition === 'left'"
+          v-if="collapsible && collapseIconPosition === 'left'"
           name="chevron-right"
           class="h-4 transition-all duration-300 ease-in-out"
           :class="{ 'rotate-90': opened }"
@@ -16,7 +16,7 @@
           {{ __(label) || __('Untitled') }}
         </span>
         <FeatherIcon
-          v-if="collapseIconPosition === 'right'"
+          v-if="collapsible && collapseIconPosition === 'right'"
           name="chevron-right"
           class="h-4 transition-all duration-300 ease-in-out"
           :class="{ 'rotate-90': opened }"
@@ -54,6 +54,10 @@ const props = defineProps({
     type: Boolean,
     default: true,
   },
+  collapsible: {
+    type: Boolean,
+    default: true,
+  },
   collapseIconPosition: {
     type: String,
     default: 'left',