feat: rest revamp (#2918)

Co-authored-by: Liyas Thomas <liyascthomas@gmail.com>
Co-authored-by: Nivedin <53208152+nivedin@users.noreply.github.com>
Co-authored-by: Andrew Bastin <andrewbastin.k@gmail.com>

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

@@ -1,34 +1,42 @@
 <template>
   <div class="flex flex-col flex-1">
-    <HttpResponseMeta :response="response" />
+    <HttpResponseMeta :response="tab.response" />
     <LensesResponseBodyRenderer
       v-if="!loading && hasResponse"
       v-model:selected-tab-preference="selectedTabPreference"
-      :response="response"
+      v-model:tab="tab"
     />
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, computed, watch } from "vue"
+import { computed, ref, watch } from "vue"
 import { startPageProgress, completePageProgress } from "@modules/loadingbar"
-import { useReadonlyStream } from "@composables/stream"
-import { restResponse$ } from "~/newstore/RESTSession"
+import { HoppRESTTab } from "~/helpers/rest/tab"
+import { useVModel } from "@vueuse/core"
+
+const props = defineProps<{
+  tab: HoppRESTTab
+}>()
+
+const emit = defineEmits<{
+  (e: "update:tab", val: HoppRESTTab): void
+}>()
+
+const tab = useVModel(props, "tab", emit)
 
 const selectedTabPreference = ref<string | null>(null)
 
-const response = useReadonlyStream(restResponse$, null)
-
 const hasResponse = computed(
-  () => response.value?.type === "success" || response.value?.type === "fail"
+  () =>
+    tab.value.response?.type === "success" ||
+    tab.value.response?.type === "fail"
 )
 
-const loading = computed(
-  () => response.value === null || response.value.type === "loading"
-)
+const loading = computed(() => tab.value.response?.type === "loading")
 
-watch(response, () => {
-  if (response.value?.type === "loading") startPageProgress()
+watch(loading, (isLoading) => {
+  if (isLoading) startPageProgress()
   else completePageProgress()
 })
 </script>