feat: new ui for response interface generation (#4105)

* feat: codegen body added

* feat: new ui added for response interface

* feat: generate code component added

* chore: default collection tab

* feat: generate data schema

* chore: clean up

* chore: minor code refactor

* fix: only render if `isDrawerOpen` is true

* chore: clean up

* chore: clean up

---------

Co-authored-by: nivedin <nivedinp@gmail.com>

packages/hoppscotch-common/src/components/app/ActionHandler.vue

@@ -2,6 +2,11 @@
   <AppShortcuts :show="showShortcuts" @close="showShortcuts = false" />
   <AppShare :show="showShare" @hide-modal="showShare = false" />
   <FirebaseLogin v-if="showLogin" @hide-modal="showLogin = false" />
+  <HttpResponseInterface
+    v-if="isDrawerOpen"
+    :show="isDrawerOpen"
+    @close="isDrawerOpen = false"
+  />
 </template>
 
 <script setup lang="ts">
@@ -11,6 +16,7 @@ import { defineActionHandler } from "~/helpers/actions"
 const showShortcuts = ref(false)
 const showShare = ref(false)
 const showLogin = ref(false)
+const isDrawerOpen = ref(false)
 
 defineActionHandler("flyouts.keybinds.toggle", () => {
   showShortcuts.value = !showShortcuts.value
@@ -23,4 +29,8 @@ defineActionHandler("modals.share.toggle", () => {
 defineActionHandler("modals.login.toggle", () => {
   showLogin.value = !showLogin.value
 })
+
+defineActionHandler("response.schema.toggle", () => {
+  isDrawerOpen.value = !isDrawerOpen.value
+})
 </script>

packages/hoppscotch-common/src/components/app/PaneLayout.vue

@@ -16,7 +16,7 @@
     >
       <Splitpanes
         class="smart-splitter"
-        :horizontal="COLUMN_LAYOUT"
+        :horizontal="COLUMN_LAYOUT || forceColumnLayout"
         @resize="setPaneEvent($event, 'horizontal')"
       >
         <Pane
@@ -79,6 +79,10 @@ const props = defineProps({
     default: null,
   },
   isEmbed: {
+    type: Boolean,
+    defaul: false,
+  },
+  forceColumnLayout: {
     type: Boolean,
     default: false,
   },