fix: rearrange settings items

frontend/src/components/Settings/SettingsModal.vue

@@ -3,42 +3,31 @@
     <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
+            <div
-              v-for="tab in tabs"
+              v-if="!tab.hideLabel"
-              :icon="tab.icon"
+              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"
-              :label="__(tab.label)"
+            >
-              class="w-full"
+              <span>{{ __(tab.label) }}</span>
-              :class="
+            </div>
-                activeTab?.label == tab.label
+            <nav class="space-y-1">
-                  ? 'bg-white shadow-sm'
+              <SidebarLink
-                  : 'hover:bg-gray-100'
+                v-for="i in tab.items"
-              "
+                :icon="i.icon"
-              @click="activeTab = tab"
+                :label="__(i.label)"
-            />
+                class="w-full"
-          </nav>
+                :class="
-          <div
+                  activeTab?.label == i.label
-            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"
+                    ? 'bg-white shadow-sm'
-          >
+                    : 'hover:bg-gray-100'
-            <span>{{ __('Integrations') }}</span>
+                "
+                @click="activeTab = i"
+              />
+            </nav>
           </div>
-          <nav class="space-y-1">
-            <SidebarLink
-              v-for="i in integrations"
-              :icon="i.icon"
-              :label="__(i.label)"
-              class="w-full"
-              :class="
-                activeTab?.label == i.label
-                  ? 'bg-white shadow-sm'
-                  : 'hover:bg-gray-100'
-              "
-              @click="activeTab = i"
-            />
-          </nav>
         </div>
         <div class="flex flex-1 flex-col overflow-y-auto">
           <component :is="activeTab.component" v-if="activeTab" />
@@ -62,38 +51,53 @@ import { ref, markRaw, computed, h } from 'vue'
 
 const show = defineModel()
 
-let tabs = [
+const tabs = computed(() => {
-  {
+  let _tabs = [
-    label: 'Profile',
-    icon: ContactsIcon,
-    component: markRaw(ProfileSettings),
-  },
-  {
-    label: 'Fields Layout',
-    icon: h(FeatherIcon, { name: 'grid' }),
-    component: markRaw(FieldsLayout),
-  },
-]
-
-let integrations = computed(() => {
-  let items = [
     {
-      label: 'Twilio',
+      label: 'Settings',
-      icon: PhoneIcon,
+      hideLabel: true,
-      component: markRaw(TwilioSettings),
+      items: [
+        {
+          label: 'Profile',
+          icon: ContactsIcon,
+          component: markRaw(ProfileSettings),
+        },
+      ],
+    },
+    {
+      label: 'Integrations',
+      items: [
+        {
+          label: 'Twilio',
+          icon: PhoneIcon,
+          component: markRaw(TwilioSettings),
+        },
+        {
+          label: 'WhatsApp',
+          icon: WhatsAppIcon,
+          component: markRaw(WhatsAppSettings),
+          condition: () => isWhatsappInstalled.value,
+        },
+      ],
+    },
+    {
+      label: 'Customizations',
+      items: [
+        {
+          label: 'Fields Layout',
+          icon: h(FeatherIcon, { name: 'grid' }),
+          component: markRaw(FieldsLayout),
+        },
+      ],
     },
   ]
 
-  if (isWhatsappInstalled.value) {
+  return _tabs.filter((tab) => {
-    items.push({
+    return tab.items.some((item) => {
-      label: 'WhatsApp',
+      return item.condition ? item.condition() : true
-      icon: WhatsAppIcon,
-      component: markRaw(WhatsAppSettings),
     })
-  }
+  })
-
-  return items
 })
 
-const activeTab = ref(tabs[0])
+const activeTab = ref(tabs.value[0].items[0])
 </script>