feat: realtime tabs as subpages (#2450)

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

packages/hoppscotch-app/components/app/Sidenav.vue

@@ -7,6 +7,7 @@
         :to="localePath(navigation.target)"
         class="nav-link"
         tabindex="0"
+        :exact="navigation.exact"
       >
         <div v-if="navigation.svg">
           <SmartIcon :name="navigation.svg" class="svg-icons" />
@@ -40,26 +41,31 @@ const primaryNavigation = [
     target: "index",
     svg: "link-2",
     title: t("navigation.rest"),
+    exact: true,
   },
   {
     target: "graphql",
     svg: "graphql",
     title: t("navigation.graphql"),
+    exact: false,
   },
   {
     target: "realtime",
     svg: "globe",
     title: t("navigation.realtime"),
+    exact: false,
   },
   {
     target: "documentation",
     svg: "book-open",
     title: t("navigation.doc"),
+    exact: false,
   },
   {
     target: "settings",
     svg: "settings",
     title: t("navigation.settings"),
+    exact: false,
   },
 ]
 </script>
@@ -105,6 +111,20 @@ const primaryNavigation = [
     @apply text-tiny;
   }
 
+  &.active-link {
+    @apply text-secondaryDark;
+    @apply bg-primaryLight;
+    @apply hover:text-secondaryDark;
+
+    .material-icons,
+    .svg-icons {
+      @apply opacity-100;
+    }
+
+    &::after {
+      @apply bg-accent;
+    }
+  }
   &.exact-active-link {
     @apply text-secondaryDark;
     @apply bg-primaryLight;

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

@@ -15,7 +15,10 @@
       <span class="text-secondaryDark pl-2 break-all">
         {{ ` \xA0 — \xA0 ${env.value}` }}
       </span>
-      <span v-if="status === 'updations'" class="text-secondaryLight px-2 break-all">
+      <span
+        v-if="status === 'updations'"
+        class="text-secondaryLight px-2 break-all"
+      >
         {{ ` \xA0 ← \xA0 ${env.previousValue}` }}
       </span>
     </div>

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>