refactor: enable new tab component

packages/hoppscotch-app/components/collections/ChooseType.vue

@@ -1,10 +1,9 @@
 <template>
   <div v-if="show">
-    <SmartTabs :id="'collections_tab'" @tab-changed="updateCollectionsType">
+    <SmartTabs :id="'collections_tab'" v-model="collectionTab">
       <SmartTab
         :id="'my-collections'"
         :label="`${$t('collection.my_collections')}`"
-        :selected="true"
       />
       <SmartTab
         v-if="currentUser && !doc"
@@ -65,7 +64,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from "@nuxtjs/composition-api"
+import { ref, watch } from "@nuxtjs/composition-api"
 import { GetMyTeamsQuery, Team } from "~/helpers/backend/graphql"
 import { onLoggedIn } from "~/helpers/fb/auth"
 import { currentUserInfo$ } from "~/helpers/teams/BackendUserInfo"
@@ -74,6 +73,10 @@ import { useReadonlyStream } from "~/helpers/utils/composables"
 
 type TeamData = GetMyTeamsQuery["myTeams"][number]
 
+type CollectionTabs = "my-collections" | "team-collections"
+
+const collectionTab = ref<CollectionTabs>("my-collections")
+
 defineProps<{
   doc: boolean
   show: boolean
@@ -111,4 +114,11 @@ const options = ref<any | null>(null)
 const updateSelectedTeam = (team: TeamData | undefined) => {
   emit("update-selected-team", team)
 }
+
+watch(
+  () => collectionTab.value,
+  (newValue: string) => {
+    updateCollectionsType(newValue)
+  }
+)
 </script>

packages/hoppscotch-app/components/graphql/RequestOptions.vue

@@ -1,10 +1,12 @@
 <template>
   <div class="flex flex-col flex-1 h-full">
-    <SmartTabs styles="sticky bg-primary top-upperPrimaryStickyFold z-10">
+    <SmartTabs
+      v-model="selectedOptionTab"
+      styles="sticky bg-primary top-upperPrimaryStickyFold z-10"
+    >
       <SmartTab
         :id="'query'"
         :label="`${t('tab.query')}`"
-        :selected="true"
         :indicator="gqlQueryString && gqlQueryString.length > 0 ? true : false"
       >
         <div
@@ -64,7 +66,6 @@
         </div>
         <div ref="queryEditor" class="flex flex-col flex-1"></div>
       </SmartTab>
-
       <SmartTab
         :id="'variables'"
         :label="`${t('tab.variables')}`"
@@ -107,7 +108,6 @@
         </div>
         <div ref="variableEditor" class="flex flex-col flex-1"></div>
       </SmartTab>
-
       <SmartTab
         :id="'headers'"
         :label="`${t('tab.headers')}`"
@@ -346,6 +346,10 @@ import { defineActionHandler } from "~/helpers/actions"
 import { getPlatformSpecialKey as getSpecialKey } from "~/helpers/platformutils"
 import { objRemoveKey } from "~/helpers/functional/object"
 
+type OptionTabs = "query" | "headers" | "variables" | "authorization"
+
+const selectedOptionTab = ref<OptionTabs>("query")
+
 const t = useI18n()
 
 const props = defineProps<{

packages/hoppscotch-app/components/graphql/Sidebar.vue

@@ -1,11 +1,10 @@
 <template>
-  <SmartTabs styles="sticky bg-primary z-10 top-0" vertical>
+  <SmartTabs
-    <SmartTab
+    v-model="selectedNavigationTab"
-      :id="'history'"
+    styles="sticky bg-primary z-10 top-0"
-      icon="clock"
+    vertical
-      :label="`${t('tab.history')}`"
+  >
-      :selected="true"
+    <SmartTab :id="'history'" icon="clock" :label="`${t('tab.history')}`">
-    >
       <History
         ref="graphqlHistoryComponent"
         :page="'graphql'"
@@ -66,6 +65,7 @@
         </div>
         <SmartTabs
           ref="gqlTabs"
+          v-model="selectedGqlTab"
           styles="border-t border-b border-dividerLight bg-primary sticky z-10 top-sidebarPrimaryStickyFold"
         >
           <div class="gqlTabs">
@@ -73,7 +73,6 @@
               v-if="queryFields.length > 0"
               :id="'queries'"
               :label="`${t('tab.queries')}`"
-              :selected="true"
               class="divide-y divide-dividerLight"
             >
               <GraphqlField
@@ -218,6 +217,12 @@ import {
   setGQLVariables,
 } from "~/newstore/GQLSession"
 
+type NavigationTabs = "history" | "collection" | "docs" | "schema"
+type GqlTabs = "queries" | "mutations" | "subscriptions" | "types"
+
+const selectedNavigationTab = ref<NavigationTabs>("history")
+const selectedGqlTab = ref<GqlTabs>("queries")
+
 const t = useI18n()
 
 function isTextFoundInGraphqlFieldObject(

packages/hoppscotch-app/components/http/RequestOptions.vue

@@ -1,11 +1,11 @@
 <template>
   <SmartTabs
+    v-model="selectedRealtimeTab"
     styles="sticky bg-primary top-upperMobilePrimaryStickyFold sm:top-upperPrimaryStickyFold z-10"
   >
     <SmartTab
       :id="'params'"
       :label="`${$t('tab.parameters')}`"
-      :selected="true"
       :info="`${newActiveParamsCount$}`"
     >
       <HttpParameters />
@@ -43,6 +43,7 @@
 </template>
 
 <script setup lang="ts">
+import { ref } from "@nuxtjs/composition-api"
 import { map } from "rxjs/operators"
 import { useReadonlyStream } from "~/helpers/utils/composables"
 import {
@@ -52,6 +53,10 @@ import {
   useTestScript,
 } from "~/newstore/RESTSession"
 
+type RequestOptionTabs = "params" | "bodyParams" | "headers" | "authorization"
+
+const selectedRealtimeTab = ref<RequestOptionTabs>("params")
+
 const newActiveParamsCount$ = useReadonlyStream(
   restActiveParamsCount$.pipe(
     map((e) => {

packages/hoppscotch-app/components/http/Sidebar.vue

@@ -1,11 +1,10 @@
 <template>
-  <SmartTabs styles="sticky bg-primary z-10 top-0" vertical>
+  <SmartTabs
-    <SmartTab
+    v-model="selectedNavigationTab"
-      :id="'history'"
+    styles="sticky bg-primary z-10 top-0"
-      icon="clock"
+    vertical
-      :label="`${$t('tab.history')}`"
+  >
-      :selected="true"
+    <SmartTab :id="'history'" icon="clock" :label="`${$t('tab.history')}`">
-    >
       <History ref="historyComponent" :page="'rest'" />
     </SmartTab>
     <SmartTab
@@ -20,3 +19,11 @@
     </SmartTab>
   </SmartTabs>
 </template>
+
+<script setup lang="ts">
+import { ref } from "@nuxtjs/composition-api"
+
+type RequestOptionTabs = "history" | "collections" | "env"
+
+const selectedNavigationTab = ref<RequestOptionTabs>("history")
+</script>

packages/hoppscotch-app/components/lenses/ResponseBodyRenderer.vue

@@ -1,11 +1,14 @@
 <template>
-  <SmartTabs styles="sticky z-10 bg-primary top-lowerPrimaryStickyFold">
+  <SmartTabs
+    v-if="response"
+    v-model="selectedLensTab"
+    styles="sticky z-10 bg-primary top-lowerPrimaryStickyFold"
+  >
     <SmartTab
       v-for="(lens, index) in validLenses"
       :id="lens.renderer"
       :key="`lens-${index}`"
       :label="$t(lens.lensName)"
-      :selected="index === 0"
       class="flex flex-col flex-1 w-full h-full"
     >
       <component :is="lens.renderer" :response="response" />
@@ -59,6 +62,11 @@ export default defineComponent({
       testResults,
     }
   },
+  data() {
+    return {
+      selectedLensTab: "",
+    }
+  },
   computed: {
     headerLength() {
       if (!this.response || !this.response.headers) return 0
@@ -71,5 +79,14 @@ export default defineComponent({
       return getSuitableLenses(this.response)
     },
   },
+  watch: {
+    validLenses: {
+      handler(newValue) {
+        if (newValue.length === 0) return
+        this.selectedLensTab = newValue[0].renderer
+      },
+      immediate: true,
+    },
+  },
 })
 </script>

packages/hoppscotch-app/pages/profile.vue

@@ -77,12 +77,8 @@
               <FirebaseLogout outline />
             </div>
           </div>
-          <SmartTabs>
+          <SmartTabs v-model="selectedProfileTab">
-            <SmartTab
+            <SmartTab :id="'sync'" :label="t('settings.account')">
-              :id="'sync'"
-              :label="t('settings.account')"
-              :selected="true"
-            >
               <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`,