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>