refactor: enable new tab component

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>
-    <SmartTab
-      :id="'history'"
-      icon="clock"
-      :label="`${t('tab.history')}`"
-      :selected="true"
-    >
+  <SmartTabs
+    v-model="selectedNavigationTab"
+    styles="sticky bg-primary z-10 top-0"
+    vertical
+  >
+    <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(