Form editor v2 (#579)

* Form editor v2

* fix template test

* setFormDefaults when save

* fix form cleaning dark mode

* improvements on open sidebar

* UI polish

* Fix change type button

---------

Co-authored-by: Julien Nahum <julien@nahum.net>

client/components/global/Settings/SettingsSection.vue

@@ -0,0 +1,40 @@
+<template>
+  <div
+    v-show="isActive"
+    class="settings-section"
+  >
+    <h3 class="text-xl font-medium mb-1">
+      {{ name }}
+    </h3>
+    <slot />
+  </div>
+</template>
+  
+<script setup>
+import { inject, computed, onMounted, onBeforeUnmount } from 'vue'
+
+const props = defineProps({
+  name: {
+    type: String,
+    required: true
+  },
+  icon: {
+    type: String,
+    required: true
+  }
+})
+
+const activeSection = inject('activeSection', ref(''))
+const registerSection = inject('registerSection', () => {})
+const unregisterSection = inject('unregisterSection', () => {})
+
+const isActive = computed(() => activeSection.value === props.name)
+
+onMounted(() => {
+  registerSection(props.name, props.icon)
+})
+
+onBeforeUnmount(() => {
+  unregisterSection(props.name)
+})
+</script>

client/components/global/Settings/SettingsSubSection.vue

@@ -0,0 +1,30 @@
+<template>
+  <div class="mb-8 flex">
+    <div class="w-1/3 pr-8">
+      <h3 class="text-lg font-semibold mb-1">
+        {{ title }}
+      </h3>
+      <p class="text-sm text-gray-500">
+        {{ description }}
+      </p>
+    </div>
+    <div class="w-2/3">
+      <UCard class="divide-y divide-gray-200">
+        <slot />
+      </UCard>
+    </div>
+  </div>
+</template>
+  
+  <script setup>
+  defineProps({
+    title: {
+      type: String,
+      required: true
+    },
+    description: {
+      type: String,
+      required: true
+    }
+  })
+  </script>

client/components/global/Settings/SettingsWrapper.vue

@@ -0,0 +1,62 @@
+<template>
+  <div class="flex flex-grow h-full relative">
+    <!-- Sidebar -->
+    <nav class="w-64 flex-shrink-0 overflow-y-auto border-r p-4 sticky top-0 bg-gray-50">
+      <ul class="space-y-2">
+        <li
+          v-for="section in sections"
+          :key="section.name"
+        >
+          <UButton
+            :icon="section.icon"
+            :label="section.name"
+            :color="activeSection === section.name ? 'primary' : 'gray'"
+            :variant="activeSection === section.name ? 'soft' : 'ghost'"
+            class="w-full justify-start"
+          
+            @click="activeSection = section.name"
+          />
+        </li>
+      </ul>
+    </nav>
+
+    <!-- Main content -->
+    <div class="flex items-start h-full px-4 md:px-8 py-4 flex-grow">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, provide } from 'vue'
+
+const sections = ref([])
+const activeSection = ref('')
+
+const registerSection = (name, icon) => {
+  const existingIndex = sections.value.findIndex(section => section.name === name)
+  if (existingIndex !== -1) {
+    sections.value[existingIndex] = { name, icon }
+  } else {
+    sections.value.push({ name, icon })
+    if (sections.value.length === 1) {
+      activeSection.value = name
+    }
+  }
+}
+
+const unregisterSection = (name) => {
+  const index = sections.value.findIndex(section => section.name === name)
+  if (index !== -1) {
+    sections.value.splice(index, 1)
+    if (activeSection.value === name && sections.value.length > 0) {
+      activeSection.value = sections.value[0].name
+    }
+  }
+}
+
+// Provide active section and registration function to child components
+provide('activeSection', activeSection)
+provide('registerSection', registerSection)
+provide('unregisterSection', unregisterSection)
+</script>