feat: active tab no longer resets after request (#2917)

Co-authored-by: Andrew Bastin <andrewbastin.k@gmail.com>
Closes https://github.com/hoppscotch/hoppscotch/issues/2080

packages/hoppscotch-common/src/components/http/Response.vue

@@ -3,40 +3,32 @@
     <HttpResponseMeta :response="response" />
     <LensesResponseBodyRenderer
       v-if="!loading && hasResponse"
+      v-model:selected-tab-preference="selectedTabPreference"
       :response="response"
     />
   </div>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent, watch } from "vue"
+<script setup lang="ts">
+import { ref, computed, watch } from "vue"
 import { startPageProgress, completePageProgress } from "@modules/loadingbar"
 import { useReadonlyStream } from "@composables/stream"
 import { restResponse$ } from "~/newstore/RESTSession"
 
-export default defineComponent({
-  setup() {
-    const response = useReadonlyStream(restResponse$, null)
+const selectedTabPreference = ref<string | null>(null)
 
-    const hasResponse = computed(
-      () =>
-        response.value?.type === "success" || response.value?.type === "fail"
-    )
+const response = useReadonlyStream(restResponse$, null)
 
-    const loading = computed(
-      () => response.value === null || response.value.type === "loading"
-    )
+const hasResponse = computed(
+  () => response.value?.type === "success" || response.value?.type === "fail"
+)
 
-    watch(response, () => {
-      if (response.value?.type === "loading") startPageProgress()
-      else completePageProgress()
-    })
+const loading = computed(
+  () => response.value === null || response.value.type === "loading"
+)
 
-    return {
-      hasResponse,
-      response,
-      loading,
-    }
-  },
+watch(response, () => {
+  if (response.value?.type === "loading") startPageProgress()
+  else completePageProgress()
 })
 </script>

packages/hoppscotch-common/src/components/http/ResponseMeta.vue

@@ -107,7 +107,7 @@ const t = useI18n()
 const colorMode = useColorMode()
 
 const props = defineProps<{
-  response: HoppRESTResponse
+  response: HoppRESTResponse | null
 }>()
 
 /**
@@ -118,6 +118,7 @@ const props = defineProps<{
  */
 const readableResponseSize = computed(() => {
   if (
+    props.response === null ||
     props.response.type === "loading" ||
     props.response.type === "network_fail" ||
     props.response.type === "script_fail" ||
@@ -135,6 +136,7 @@ const readableResponseSize = computed(() => {
 
 const statusCategory = computed(() => {
   if (
+    props.response === null ||
     props.response.type === "loading" ||
     props.response.type === "network_fail" ||
     props.response.type === "script_fail" ||