feat: realtime tabs as subpages (#2450)

Co-authored-by: Andrew Bastin <andrewbastin.k@gmail.com>

packages/hoppscotch-app/pages/realtime.vue

@@ -1,53 +1,67 @@
 <template>
-  <SmartTabs
-    v-model="selectedNavigationTab"
-    class="h-full !overflow-hidden"
-    styles="sticky bg-primary top-0 z-10 border-b border-dividerLight !overflow-visible"
-  >
+  <SmartTabs v-model="currentTab">
     <SmartTab
-      id="websocket"
-      :label="$t('tab.websocket')"
-      style="height: calc(100% - var(--sidebar-primary-sticky-fold))"
+      v-for="{ target, title } in REALTIME_NAVIGATION"
+      :id="target"
+      :key="target"
+      :label="title"
     >
-      <RealtimeWebsocket />
-    </SmartTab>
-    <SmartTab
-      id="sse"
-      :label="$t('tab.sse')"
-      style="height: calc(100% - var(--sidebar-primary-sticky-fold))"
-    >
-      <RealtimeSse />
-    </SmartTab>
-    <SmartTab
-      id="socketio"
-      :label="$t('tab.socketio')"
-      style="height: calc(100% - var(--sidebar-primary-sticky-fold))"
-    >
-      <RealtimeSocketio />
-    </SmartTab>
-    <SmartTab
-      id="mqtt"
-      :label="$t('tab.mqtt')"
-      style="height: calc(100% - var(--sidebar-primary-sticky-fold))"
-    >
-      <RealtimeMqtt />
+      <NuxtChild />
     </SmartTab>
   </SmartTabs>
 </template>
 
-<script>
-import { defineComponent } from "@nuxtjs/composition-api"
+<script setup lang="ts">
+import { watch, ref, useRouter, useRoute } from "@nuxtjs/composition-api"
+import { useI18n } from "~/helpers/utils/composables"
 
-export default defineComponent({
-  data() {
-    return {
-      selectedNavigationTab: "websocket",
-    }
+const t = useI18n()
+const router = useRouter()
+const route = useRoute()
+
+const REALTIME_NAVIGATION = [
+  {
+    target: "websocket",
+    title: t("tab.websocket"),
   },
-  head() {
-    return {
-      title: `${this.$t("navigation.realtime")} • Hoppscotch`,
-    }
+  {
+    target: "sse",
+    title: t("tab.sse"),
   },
+  {
+    target: "socketio",
+    title: t("tab.socketio"),
+  },
+  {
+    target: "mqtt",
+    title: t("tab.mqtt"),
+  },
+] as const
+
+type RealtimeNavTab = typeof REALTIME_NAVIGATION[number]["target"]
+
+const currentTab = ref<RealtimeNavTab>("websocket")
+
+// Update the router when the tab is updated
+watch(currentTab, (newTab) => {
+  router.push(`/realtime/${newTab}`)
 })
+
+// Update the tab when router is upgrad
+watch(
+  route,
+  (updateRoute) => {
+    if (updateRoute.path === "/realtime") router.replace("/realtime/websocket")
+
+    const destination: string | undefined =
+      updateRoute.path.split("/realtime/")[1]
+
+    const target = REALTIME_NAVIGATION.find(
+      ({ target }) => target === destination
+    )?.target
+
+    if (target) currentTab.value = target
+  },
+  { immediate: true }
+)
 </script>