fix: rearrange settings items

frontend/src/components/Settings/SettingsModal.vue

@@ -3,31 +3,19 @@
     <template #body>
       <div class="flex h-[calc(100vh_-_8rem)]">
         <div class="flex w-52 shrink-0 flex-col bg-gray-50 p-2">
-          <h1 class="px-2 pt-2 text-lg font-semibold">
+          <h1 class="mb-3 px-2 pt-2 text-lg font-semibold">
             {{ __('Settings') }}
           </h1>
-          <nav class="mt-3 space-y-1">
+          <div v-for="tab in tabs">
-            <SidebarLink
-              v-for="tab in tabs"
-              :icon="tab.icon"
-              :label="__(tab.label)"
-              class="w-full"
-              :class="
-                activeTab?.label == tab.label
-                  ? 'bg-white shadow-sm'
-                  : 'hover:bg-gray-100'
-              "
-              @click="activeTab = tab"
-            />
-          </nav>
             <div
+              v-if="!tab.hideLabel"
               class="mb-2 mt-3 flex cursor-pointer gap-1.5 px-1 text-base font-medium text-gray-600 transition-all duration-300 ease-in-out"
             >
-            <span>{{ __('Integrations') }}</span>
+              <span>{{ __(tab.label) }}</span>
             </div>
             <nav class="space-y-1">
               <SidebarLink
-              v-for="i in integrations"
+                v-for="i in tab.items"
                 :icon="i.icon"
                 :label="__(i.label)"
                 class="w-full"
@@ -40,6 +28,7 @@
               />
             </nav>
           </div>
+        </div>
         <div class="flex flex-1 flex-col overflow-y-auto">
           <component :is="activeTab.component" v-if="activeTab" />
         </div>
@@ -62,38 +51,53 @@ import { ref, markRaw, computed, h } from 'vue'
 
 const show = defineModel()
 
-let tabs = [
+const tabs = computed(() => {
+  let _tabs = [
+    {
+      label: 'Settings',
+      hideLabel: true,
+      items: [
         {
           label: 'Profile',
           icon: ContactsIcon,
           component: markRaw(ProfileSettings),
         },
-  {
+      ],
-    label: 'Fields Layout',
-    icon: h(FeatherIcon, { name: 'grid' }),
-    component: markRaw(FieldsLayout),
     },
-]
+    {
-
+      label: 'Integrations',
-let integrations = computed(() => {
+      items: [
-  let items = [
         {
           label: 'Twilio',
           icon: PhoneIcon,
           component: markRaw(TwilioSettings),
         },
-  ]
+        {
-
-  if (isWhatsappInstalled.value) {
-    items.push({
           label: 'WhatsApp',
           icon: WhatsAppIcon,
           component: markRaw(WhatsAppSettings),
-    })
+          condition: () => isWhatsappInstalled.value,
-  }
+        },
+      ],
+    },
+    {
+      label: 'Customizations',
+      items: [
+        {
+          label: 'Fields Layout',
+          icon: h(FeatherIcon, { name: 'grid' }),
+          component: markRaw(FieldsLayout),
+        },
+      ],
+    },
+  ]
 
-  return items
+  return _tabs.filter((tab) => {
+    return tab.items.some((item) => {
+      return item.condition ? item.condition() : true
+    })
+  })
 })
 
-const activeTab = ref(tabs[0])
+const activeTab = ref(tabs.value[0].items[0])
 </script>