feat: platform definition added for additional settings components (#3503)

packages/hoppscotch-common/locales/en.json

@@ -599,6 +599,7 @@
     "use_experimental_url_bar": "Use experimental URL bar with environment highlighting",
     "user": "User",
     "verified_email": "Verified email",
+    "additional": "Additional Settings",
     "verify_email": "Verify email"
   },
   "shortcodes": {

packages/hoppscotch-common/src/pages/profile.vue

@@ -143,8 +143,6 @@
                   </div>
                 </section>
 
-                <ProfileUserDelete />
-
                 <section class="p-4">
                   <h4 class="font-semibold text-secondaryDark">
                     {{ t("settings.sync") }}
@@ -180,7 +178,18 @@
                   </div>
                 </section>
 
+                <template v-if="platform.ui?.additionalProfileSections?.length">
+                  <template
+                    v-for="item in platform.ui?.additionalProfileSections"
+                    :key="item.id"
+                  >
+                    <component :is="item" />
+                  </template>
+                </template>
+
                 <ProfileShortcodes />
+
+                <ProfileUserDelete />
               </div>
             </HoppSmartTab>
             <HoppSmartTab :id="'teams'" :label="t('team.title')">

packages/hoppscotch-common/src/pages/settings.vue

@@ -106,6 +106,15 @@
           </section>
         </div>
       </div>
+
+      <template v-if="platform.ui?.additionalSettingsSections?.length">
+        <template
+          v-for="item in platform.ui?.additionalSettingsSections"
+          :key="item.id"
+        >
+          <component :is="item" />
+        </template>
+      </template>
     </div>
     <HoppSmartConfirmModal
       :show="confirmRemove"

packages/hoppscotch-common/src/platform/ui.ts

@@ -38,4 +38,14 @@ export type UIPlatformDef = {
    * Additional Support Options menu items shown in the app header
    */
   additionalSupportOptionsMenuItems?: HoppSupportOptionsMenuItem[]
+
+  /**
+   * Additional Settings Section components in the settings page
+   */
+  additionalSettingsSections?: Component[]
+
+  /**
+   * Additional profile Section components in the profile page
+   */
+  additionalProfileSections?: Component[]
 }