refactor: enable new tab component

packages/hoppscotch-app/pages/profile.vue

@@ -77,12 +77,8 @@
               <FirebaseLogout outline />
             </div>
           </div>
-          <SmartTabs>
-            <SmartTab
-              :id="'sync'"
-              :label="t('settings.account')"
-              :selected="true"
-            >
+          <SmartTabs v-model="selectedProfileTab">
+            <SmartTab :id="'sync'" :label="t('settings.account')">
               <section class="p-4">
                 <h4 class="font-semibold text-secondaryDark">
                   {{ t("settings.profile") }}
@@ -211,6 +207,10 @@ import {
 } from "~/helpers/utils/composables"
 import { toggleSetting, useSetting } from "~/newstore/settings"
 
+type ProfileTabs = "sync" | "teams"
+
+const selectedProfileTab = ref<ProfileTabs>("sync")
+
 const t = useI18n()
 const toast = useToast()
 

packages/hoppscotch-app/pages/realtime.vue

@@ -1,12 +1,12 @@
 <template>
   <SmartTabs
+    v-model="selectedNavigationTab"
     class="h-full !overflow-hidden"
     styles="sticky bg-primary top-0 z-10 border-b border-dividerLight !overflow-visible"
   >
     <SmartTab
       id="websocket"
       :label="$t('tab.websocket')"
-      :selected="true"
       style="height: calc(100% - var(--sidebar-primary-sticky-fold))"
     >
       <RealtimeWebsocket />
@@ -39,6 +39,11 @@
 import { defineComponent } from "@nuxtjs/composition-api"
 
 export default defineComponent({
+  data() {
+    return {
+      selectedNavigationTab: "websocket",
+    }
+  },
   head() {
     return {
       title: `${this.$t("navigation.realtime")} • Hoppscotch`,