refactor: polish request section

Dockerfile

@@ -3,10 +3,8 @@ FROM node:lts-alpine
 LABEL maintainer="Hoppscotch (support@hoppscotch.io)"
 
 # Add git as the prebuild target requires it to parse version information
-RUN apk add --no-cache --virtual .gyp \
-  python3 \
-  make \
-  g++
+RUN apk add --update --no-cache \
+  git
 
 # Create app directory
 WORKDIR /app

packages/codemirror-lang-graphql/package.json

@@ -17,13 +17,13 @@
   "sideEffects": false,
   "dependencies": {
     "@codemirror/highlight": "^0.19.6",
-    "@codemirror/language": "^0.19.7",
-    "@lezer/lr": "^0.15.5"
+    "@codemirror/language": "^0.19.6",
+    "@lezer/lr": "^0.15.0"
   },
   "devDependencies": {
     "@lezer/generator": "^0.15.0",
     "mocha": "^9.0.1",
-    "rollup": "^2.60.2",
+    "rollup": "^2.60.1",
     "rollup-plugin-dts": "^4.0.1",
     "rollup-plugin-ts": "^2.0.4",
     "typescript": "^4.5.2"

packages/hoppscotch-app/assets/icons/corner-down-left.svg

@@ -1,3 +1,4 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-  <path d="M6 17l2-5h14l-3 8a2 2 0 01-2 1H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h7a2 2 0 012 2v4"></path>
-</svg>
+  <polyline points="9 10 4 15 9 20"></polyline>
+  <path d="M20 4v7a4 4 0 01-4 4H4"></path>
+</svg>

packages/hoppscotch-app/assets/icons/folder-minus.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z"></path>
+  <line x1="9" y1="14" x2="15" y2="14"></line>
+</svg>

packages/hoppscotch-app/assets/icons/logo.svg

@@ -1,25 +0,0 @@
-<svg width="128" height="128" viewBox="0 0 128 128" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M0 16C0 7.16344 7.16344 0 16 0H112C120.837 0 128 7.16344 128 16V112C128 120.837 120.837 128 112 128H16C7.16344 128 0 120.837 0 112V16Z" fill="#10B981"/>
-<ellipse cx="49.94" cy="39.46" rx="2.5" ry="2.5" fill="white" fill-opacity="0.75"/>
-<ellipse cx="65.44" cy="40.46" rx="3" ry="3" fill="white" fill-opacity="0.75"/>
-<ellipse cx="80.44" cy="44.46" rx="2.50001" ry="2.5" fill="white" fill-opacity="0.75"/>
-<path d="M86.7407 58.919C87.2596 55.7445 77.0229 51.468 63.9989 49.3955C50.9765 47.3216 39.8979 48.2292 39.379 51.4037C39.3147 51.6624 39.379 51.8568 39.4448 52.1169C39.1203 51.9868 20.2663 104.92 20.2663 104.92H91.5347C91.5347 104.92 87.1295 59.5665 86.482 59.5665C86.6107 59.3735 86.7407 59.1792 86.7407 58.919Z" fill="url(#paint0_linear_202_73)"/>
-<path d="M79.2254 56.8465C78.9009 58.8547 71.5157 59.3078 62.6397 57.9471C53.828 56.5221 46.8943 53.7363 47.2188 51.7925C47.3489 51.145 48.1907 50.6261 49.5514 50.3675C45.0162 50.5618 42.0361 51.4037 41.7774 52.8287C41.3887 55.4858 50.4591 59.1134 62.1208 60.993C73.7826 62.8711 83.5662 62.1593 84.0193 59.5679C84.2795 58.0114 81.6867 56.3277 77.4116 54.7083C78.6422 55.4201 79.2897 56.1976 79.2254 56.8465Z" fill="#A7F3D0" fill-opacity="0.5"/>
-<path d="M83.8892 39.3532C83.1131 31.319 76.9571 24.5155 68.6642 23.2205C60.3713 21.9241 52.5315 26.4593 49.227 33.7803C54.5397 34.1047 60.2412 34.6879 66.2029 35.6598C72.5519 36.6318 78.5122 37.9282 83.8892 39.3532Z" fill="url(#paint1_radial_202_73)"/>
-<path d="M19.0356 39.5005C18.3882 43.4526 26.6153 48.3123 39.5091 52.2643C39.4448 52.0042 39.4448 51.8098 39.4448 51.5511C39.9622 48.3766 50.9765 47.469 64.0647 49.5429C77.1515 51.6154 87.3239 55.8919 86.805 59.0664C86.7407 59.3266 86.6764 59.5209 86.5463 59.7139C99.9576 59.9083 109.288 57.8358 109.936 53.8837C110.842 47.8577 91.2759 39.7592 66.203 35.8072C41.0642 31.8552 19.9418 33.4746 19.0356 39.5005ZM47.9321 39.1761C48.1264 38.1398 49.0984 37.3623 50.1346 37.5567C51.1709 37.7511 51.9484 38.723 51.754 39.7592C51.6239 40.7955 50.5877 41.5087 49.5515 41.3786C48.5152 41.1843 47.7377 40.2123 47.9321 39.1761ZM62.8984 40.2123C63.0928 38.7873 64.4535 37.8154 65.8785 38.0755C67.3035 38.2699 68.2754 39.6292 68.0168 41.0556C67.7566 42.4164 66.3973 43.3883 65.0366 43.1939C63.6102 42.9995 62.6382 41.6388 62.8984 40.2123ZM78.6423 44.0358C78.8366 42.9995 79.8086 42.222 80.8448 42.4164C81.8811 42.6107 82.6586 43.5827 82.4642 44.6189C82.3356 45.6552 81.2979 46.4327 80.2617 46.2383C79.2254 46.0439 78.4479 45.072 78.6423 44.0358Z" fill="url(#paint2_radial_202_73)"/>
-<defs>
-<linearGradient id="paint0_linear_202_73" x1="56.7496" y1="39.4014" x2="56.7496" y2="100.924" gradientUnits="userSpaceOnUse">
-<stop stop-color="#86EFAC" stop-opacity="0.75"/>
-<stop offset="0.635417" stop-color="white" stop-opacity="0.2"/>
-<stop offset="1" stop-color="white" stop-opacity="0"/>
-</linearGradient>
-<radialGradient id="paint1_radial_202_73" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(66.5581 31.1766) rotate(90) scale(8.17659 17.3311)">
-<stop stop-color="#047857"/>
-<stop offset="1" stop-color="#064E3B"/>
-</radialGradient>
-<radialGradient id="paint2_radial_202_73" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(64.4593 46.6885) scale(347.403)">
-<stop stop-color="#047857"/>
-<stop offset="0.114583" stop-color="#064E3B"/>
-</radialGradient>
-</defs>
-</svg>

packages/hoppscotch-app/assets/icons/wrap-text.svg

@@ -1,6 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-  <line x1="3" y1="6" x2="21" y2="6"></line>
-  <path d="M3 12h15a3 3 0 110 6h-4"></path>
-  <polyline points="16 16 14 18 16 20"></polyline>
-  <line x1="3" y1="18" x2="10" y2="18"></line>
-</svg>

packages/hoppscotch-app/assets/scss/styles.scss

@@ -19,8 +19,7 @@
   @apply bg-divider bg-clip-content;
   @apply rounded-full;
   @apply border-solid border-transparent border-4;
-  @apply hover:bg-dividerDark;
-  @apply hover:bg-clip-content;
+  @apply hover:(bg-dividerDark bg-clip-content);
 }
 
 ::-webkit-scrollbar {
@@ -131,8 +130,7 @@ a {
     @apply text-accent;
     @apply rounded;
     @apply hover:text-accentDark;
-    @apply focus-visible:ring;
-    @apply focus-visible:ring-accent;
+    @apply focus-visible:(ring ring-accent);
   }
 }
 
@@ -338,8 +336,7 @@ pre.ace_editor {
         @apply rounded;
         @apply text-current;
         @apply normal-case;
-        @apply hover:bg-opacity-20;
-        @apply hover:no-underline;
+        @apply hover:(bg-opacity-20 no-underline);
         @apply font-medium;
 
         font-size: var(--body-font-size);

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

@@ -1,14 +1,14 @@
 <template>
   <div class="bg-error flex justify-between">
     <span
-      class="flex py-2 px-4 transition justify-center group relative items-center"
+      class="group relative flex items-center justify-center px-4 py-2 transition"
     >
-      <i class="mr-2 material-icons">info_outline</i>
+      <i class="material-icons mr-2">info_outline</i>
       <span class="text-secondaryDark">
         <span class="md:hidden">
           {{ t("helpers.offline_short") }}
         </span>
-        <span class="hidden md:inline">
+        <span class="md:inline hidden">
           {{ t("helpers.offline") }}
         </span>
       </span>

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

@@ -107,7 +107,7 @@
                 @click.native="$refs.options.tippy().hide()"
               />
               <!-- <SmartItem :label="t('app.status')" /> -->
-              <div class="flex opacity-50 py-2 px-4">
+              <div class="flex px-4 py-2 opacity-50">
                 {{ `${t("app.name")} ${t("app.version")}` }}
               </div>
             </div>
@@ -135,7 +135,7 @@
           @click.native="COLUMN_LAYOUT = !COLUMN_LAYOUT"
         />
         <span
-          class="transform transition"
+          class="transition transform"
           :class="{
             'rotate-180': SIDEBAR_ON_LEFT,
           }"

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

@@ -11,9 +11,9 @@
     />
     <div
       v-if="searchResults.length === 0"
-      class="flex flex-col text-secondaryLight p-4 items-center justify-center"
+      class="text-secondaryLight flex flex-col items-center justify-center p-4"
     >
-      <i class="opacity-75 pb-2 material-icons">manage_search</i>
+      <i class="material-icons pb-2 opacity-75">manage_search</i>
       <span class="text-center">
         {{ t("state.nothing_found") }} "{{ search }}"
       </span>

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

@@ -1,37 +1,37 @@
 <template>
   <div>
     <header
-      class="flex space-x-2 flex-1 py-2 px-2 items-center justify-between"
+      class="flex items-center justify-between flex-1 px-2 py-2 space-x-2"
     >
-      <div class="space-x-2 inline-flex items-center">
+      <div class="inline-flex items-center space-x-2">
         <ButtonSecondary
-          class="tracking-wide !font-bold !text-secondaryDark hover:bg-primaryDark focus-visible:bg-primaryDark"
+          class="tracking-wide !font-bold !text-secondaryDark"
           label="HOPPSCOTCH"
           to="/"
         />
         <AppGitHubStarButton class="mt-1.5 transition hidden sm:flex" />
       </div>
-      <div class="space-x-2 inline-flex items-center">
+      <div class="inline-flex items-center space-x-2">
         <ButtonSecondary
           id="installPWA"
           v-tippy="{ theme: 'tooltip' }"
           :title="t('header.install_pwa')"
           svg="download"
-          class="rounded hover:bg-primaryDark focus-visible:bg-primaryDark"
+          class="rounded"
           @click.native="showInstallPrompt()"
         />
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           :title="`${t('app.search')} <kbd>/</kbd>`"
           svg="search"
-          class="rounded hover:bg-primaryDark focus-visible:bg-primaryDark"
+          class="rounded"
           @click.native="showSearch = true"
         />
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           :title="`${t('support.title')} <kbd>?</kbd>`"
           svg="life-buoy"
-          class="rounded hover:bg-primaryDark focus-visible:bg-primaryDark"
+          class="rounded"
           @click.native="showSupport = true"
         />
         <ButtonSecondary
@@ -39,7 +39,7 @@
           svg="upload-cloud"
           :label="t('header.save_workspace')"
           filled
-          class="hidden md:flex"
+          class="md:flex hidden"
           @click.native="showLogin = true"
         />
         <ButtonPrimary
@@ -47,13 +47,13 @@
           :label="t('header.login')"
           @click.native="showLogin = true"
         />
-        <div v-else class="space-x-2 inline-flex items-center">
+        <div v-else class="inline-flex items-center space-x-2">
           <ButtonPrimary
             v-tippy="{ theme: 'tooltip' }"
             :title="t('team.invite_tooltip')"
             :label="t('team.invite')"
             svg="user-plus"
-            class="!bg-green-500 !bg-opacity-15 !text-green-500 !hover:bg-opacity-10 !hover:bg-green-400 !hover:text-green-600"
+            class="!bg-green-500 !text-green-500 !bg-opacity-15 !hover:bg-opacity-10 !hover:text-green-600 !hover:bg-green-400"
             @click.native="showTeamsModal = true"
           />
           <span class="px-2">
@@ -74,7 +74,7 @@
                   v-else
                   v-tippy="{ theme: 'tooltip' }"
                   :title="t('header.account')"
-                  class="rounded hover:bg-primaryDark focus-visible:bg-primaryDark"
+                  class="rounded"
                   svg="user"
                 />
               </template>

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-col space-y-4 p-4 items-start">
+  <div class="flex flex-col items-start p-4 space-y-4">
     <SmartToggle
       :on="PROXY_ENABLED"
       @change="toggleSettingKey('PROXY_ENABLED')"

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

@@ -14,7 +14,7 @@
         autocomplete="off"
         name="command"
         :placeholder="`${t('app.type_a_command_search')}`"
-        class="bg-transparent border-b border-dividerLight flex flex-shrink-0 text-base text-secondaryDark p-6"
+        class="border-dividerLight text-secondaryDark flex flex-shrink-0 p-6 text-base bg-transparent border-b"
       />
       <AppFuse
         v-if="search && show"
@@ -24,14 +24,14 @@
       />
       <div
         v-else
-        class="divide-dividerLight divide-y flex flex-col space-y-4 flex-1 overflow-auto hide-scrollbar"
+        class="divide-dividerLight hide-scrollbar flex flex-col flex-1 space-y-4 overflow-auto divide-y"
       >
         <div
           v-for="(map, mapIndex) in mappings"
           :key="`map-${mapIndex}`"
           class="flex flex-col"
         >
-          <h5 class="my-2 text-secondaryLight py-2 px-6">
+          <h5 class="text-secondaryLight px-6 py-2 my-2">
             {{ t(map.section) }}
           </h5>
           <AppPowerSearchEntry

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

@@ -1,18 +1,18 @@
 <template>
   <button
-    class="cursor-pointer flex flex-1 py-2 px-6 transition items-center search-entry focus:outline-none"
+    class="search-entry focus:outline-none flex items-center flex-1 px-6 py-2 transition cursor-pointer"
     :class="{ active: active }"
     tabindex="-1"
     @click="$emit('action', shortcut.action)"
     @keydown.enter="$emit('action', shortcut.action)"
   >
     <SmartIcon
-      class="mr-4 opacity-50 transition svg-icons"
+      class="svg-icons mr-4 transition opacity-50"
       :class="{ 'opacity-100 text-secondaryDark': active }"
       :name="shortcut.icon"
     />
     <span
-      class="flex font-medium flex-1 mr-4 transition"
+      class="flex flex-1 mr-4 font-medium transition"
       :class="{ 'text-secondaryDark': active }"
     >
       {{ t(shortcut.label) }}

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

@@ -1,5 +1,5 @@
 <template>
-  <section :id="label.toLowerCase()" class="flex flex-col flex-1 relative">
+  <section :id="label.toLowerCase()" class="relative flex flex-col flex-1">
     <slot></slot>
   </section>
 </template>

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

@@ -5,11 +5,11 @@
     @close="hideModal"
   >
     <template #body>
-      <p class="text-secondaryLight mb-8 px-2">
+      <p class="text-secondaryLight px-2 mb-8">
         {{ t("app.invite_description") }}
       </p>
-      <div class="flex flex-col space-y-2 px-2">
-        <div class="grid gap-4 grid-cols-3">
+      <div class="flex flex-col px-2 space-y-2">
+        <div class="grid grid-cols-3 gap-4">
           <a
             v-for="(platform, index) in platforms"
             :key="`platform-${index}`"
@@ -17,13 +17,13 @@
             target="_blank"
             class="share-link"
           >
-            <SmartIcon :name="platform.icon" class="h-6 w-6" />
+            <SmartIcon :name="platform.icon" class="w-6 h-6" />
             <span class="mt-3">
               {{ platform.name }}
             </span>
           </a>
           <button class="share-link" @click="copyAppLink">
-            <SmartIcon class="h-6 text-xl w-6" :name="copyIcon" />
+            <SmartIcon class="w-6 h-6 text-xl" :name="copyIcon" />
             <span class="mt-3">
               {{ t("app.copy") }}
             </span>

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

@@ -2,34 +2,34 @@
   <AppSlideOver :show="show" @close="close()">
     <template #content>
       <div
-        class="bg-primary border-b border-dividerLight flex p-2 top-0 z-10 sticky items-center justify-between"
+        class="bg-primary border-dividerLight sticky top-0 z-10 flex items-center justify-between p-2 border-b"
       >
-        <h3 class="ml-4 heading">{{ t("app.shortcuts") }}</h3>
+        <h3 class="heading ml-4">{{ t("app.shortcuts") }}</h3>
         <div class="flex">
-          <ButtonSecondary svg="x" @click.native="close()" />
+          <ButtonSecondary svg="x" class="rounded" @click.native="close()" />
         </div>
       </div>
-      <div class="bg-primary border-b border-dividerLight">
-        <div class="flex flex-col my-4 mx-6">
+      <div class="bg-primary border-dividerLight border-b">
+        <div class="flex flex-col mx-6 my-4">
           <input
             v-model="filterText"
             type="search"
             autocomplete="off"
-            class="bg-primaryLight border border-dividerLight rounded flex w-full py-2 px-4 focus-visible:border-divider"
+            class="bg-primaryLight border-dividerLight focus-visible:border-divider flex w-full px-4 py-2 border rounded"
             :placeholder="`${t('action.search')}`"
           />
         </div>
       </div>
       <div
         v-if="filterText"
-        class="divide-dividerLight divide-y flex flex-col flex-1 overflow-auto hide-scrollbar"
+        class="divide-dividerLight hide-scrollbar flex flex-col flex-1 overflow-auto divide-y"
       >
         <div
           v-for="(map, mapIndex) in searchResults"
           :key="`map-${mapIndex}`"
-          class="space-y-4 py-4 px-6"
+          class="px-6 py-4 space-y-4"
         >
-          <h1 class="font-semibold text-secondaryDark">
+          <h1 class="text-secondaryDark font-semibold">
             {{ t(map.item.section) }}
           </h1>
           <AppShortcutsEntry
@@ -40,9 +40,9 @@
         </div>
         <div
           v-if="searchResults.length === 0"
-          class="flex flex-col text-secondaryLight p-4 items-center justify-center"
+          class="text-secondaryLight flex flex-col items-center justify-center p-4"
         >
-          <i class="opacity-75 pb-2 material-icons">manage_search</i>
+          <i class="material-icons pb-2 opacity-75">manage_search</i>
           <span class="text-center">
             {{ t("state.nothing_found") }} "{{ filterText }}"
           </span>
@@ -50,14 +50,14 @@
       </div>
       <div
         v-else
-        class="divide-dividerLight divide-y flex flex-col flex-1 overflow-auto hide-scrollbar"
+        class="divide-dividerLight hide-scrollbar flex flex-col flex-1 overflow-auto divide-y"
       >
         <div
           v-for="(map, mapIndex) in mappings"
           :key="`map-${mapIndex}`"
-          class="space-y-4 py-4 px-6"
+          class="px-6 py-4 space-y-4"
         >
-          <h1 class="font-semibold text-secondaryDark">
+          <h1 class="text-secondaryDark font-semibold">
             {{ t(map.section) }}
           </h1>
           <AppShortcutsEntry

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

@@ -1,6 +1,6 @@
 <template>
-  <aside class="flex h-full justify-between md:flex-col">
-    <nav class="flex flex-nowrap flex-1 md:flex-col md:flex-none">
+  <aside class="md:flex-col flex justify-between h-full">
+    <nav class="flex-nowrap md:flex-col md:flex-none flex flex-1">
       <NuxtLink
         v-for="(navigation, index) in primaryNavigation"
         :key="`navigation-${index}`"

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

@@ -1,16 +1,16 @@
 <template>
   <div>
     <transition v-if="show" name="fade" appear>
-      <div class="inset-0 transition-opacity z-20 fixed" @keydown.esc="close()">
+      <div class="fixed inset-0 z-20 transition-opacity" @keydown.esc="close()">
         <div
-          class="bg-primaryLight opacity-90 inset-0 absolute"
+          class="bg-primaryLight opacity-90 absolute inset-0"
           tabindex="0"
           @click="close()"
         ></div>
       </div>
     </transition>
     <aside
-      class="bg-primary flex flex-col h-full max-w-full transform transition top-0 ease-in-out right-0 w-96 z-30 duration-300 fixed overflow-auto"
+      class="bg-primary w-96 fixed top-0 right-0 z-30 flex flex-col h-full max-w-full overflow-auto transition duration-300 ease-in-out transform"
       :class="show ? 'shadow-xl translate-x-0' : 'translate-x-full'"
     >
       <slot name="content"></slot>

packages/hoppscotch-app/components/button/Primary.vue

@@ -3,7 +3,7 @@
     :to="`${/^\/(?!\/).*$/.test(to) ? localePath(to) : to}`"
     :exact="exact"
     :blank="blank"
-    class="font-bold py-2 transition inline-flex items-center justify-center focus:outline-none focus-visible:bg-accentDark"
+    class="focus:outline-none focus-visible:bg-accentDark inline-flex items-center justify-center py-2 font-bold transition"
     :class="[
       color
         ? `text-${color}-800 bg-${color}-200 hover:(text-${color}-900 bg-${color}-300) focus-visible:(text-${color}-900 bg-${color}-300)`
@@ -29,7 +29,7 @@
   >
     <span
       v-if="!loading"
-      class="inline-flex items-center justify-center whitespace-nowrap"
+      class="whitespace-nowrap inline-flex items-center justify-center"
       :class="{ 'flex-row-reverse': reverse }"
     >
       <i
@@ -56,7 +56,7 @@
         <kbd
           v-for="(key, index) in shortcut"
           :key="`key-${index}`"
-          class="bg-accentLight rounded ml-1 px-1 inline-flex"
+          class="bg-accentLight inline-flex px-1 ml-1 rounded"
         >
           {{ key }}
         </kbd>

packages/hoppscotch-app/components/button/Secondary.vue

@@ -3,12 +3,11 @@
     :to="`${/^\/(?!\/).*$/.test(to) ? localePath(to) : to}`"
     :exact="exact"
     :blank="blank"
-    class="font-semibold py-2 transition inline-flex items-center justify-center whitespace-nowrap focus:outline-none"
+    class="whitespace-nowrap hover:bg-primaryDark focus:outline-none focus-visible:bg-primaryDark inline-flex items-center justify-center py-2 font-semibold transition"
     :class="[
       color
-        ? `text-${color}-500 hover:text-${color}-600 focus-visible:text-${color}-600`
+        ? `text-${color}-500 hover:(text-${color}-600 text-${color}-600)`
         : 'text-secondary hover:text-secondaryDark focus-visible:text-secondaryDark',
-      { 'pointer-events-none': loading },
       label ? 'rounded px-4' : 'px-2',
       { 'rounded-full': rounded },
       { 'opacity-75 cursor-not-allowed': disabled },
@@ -18,50 +17,39 @@
         'border border-divider hover:border-dividerDark focus-visible:border-dividerDark':
           outline,
       },
-      {
-        'bg-primaryLight hover:bg-primaryDark focus-visible:bg-primaryDark':
-          filled,
-      },
+      { '!bg-primaryLight !hover:bg-primaryDark': filled },
     ]"
     :disabled="disabled"
-    :tabindex="loading ? '-1' : '0'"
   >
-    <span
-      v-if="!loading"
-      class="inline-flex items-center justify-center whitespace-nowrap"
-      :class="{ 'flex-row-reverse': reverse }"
+    <i
+      v-if="icon"
+      class="material-icons"
+      :class="[
+        { '!text-2xl': large },
+        label ? (reverse ? 'ml-2' : 'mr-2') : '',
+      ]"
     >
-      <i
-        v-if="icon"
-        class="material-icons"
-        :class="[
-          { '!text-2xl': large },
-          label ? (reverse ? 'ml-2' : 'mr-2') : '',
-        ]"
+      {{ icon }}
+    </i>
+    <SmartIcon
+      v-if="svg"
+      :name="svg"
+      class="svg-icons"
+      :class="[
+        { '!h-6 !w-6': large },
+        label ? (reverse ? 'ml-2' : 'mr-2') : '',
+      ]"
+    />
+    {{ label }}
+    <div v-if="shortcut.length" class="ml-2">
+      <kbd
+        v-for="(key, index) in shortcut"
+        :key="`key-${index}`"
+        class="bg-dividerLight text-secondaryLight inline-flex px-1 ml-1 rounded"
       >
-        {{ icon }}
-      </i>
-      <SmartIcon
-        v-if="svg"
-        :name="svg"
-        class="svg-icons"
-        :class="[
-          { '!h-6 !w-6': large },
-          label ? (reverse ? 'ml-2' : 'mr-2') : '',
-        ]"
-      />
-      {{ label }}
-      <div v-if="shortcut.length" class="ml-2">
-        <kbd
-          v-for="(key, index) in shortcut"
-          :key="`key-${index}`"
-          class="bg-dividerLight rounded text-secondaryLight ml-1 px-1 inline-flex"
-        >
-          {{ key }}
-        </kbd>
-      </div>
-    </span>
-    <SmartSpinner v-else />
+        {{ key }}
+      </kbd>
+    </div>
   </SmartLink>
 </template>
 
@@ -102,10 +90,6 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
-    loading: {
-      type: Boolean,
-      default: false,
-    },
     reverse: {
       type: Boolean,
       default: false,

packages/hoppscotch-app/components/collections/ChooseType.vue

@@ -18,7 +18,7 @@
               type="text"
               autocomplete="off"
               autofocus
-              class="bg-transparent border-t border-dividerLight cursor-pointer flex font-semibold w-full py-2 px-4 appearance-none hover:bg-primaryDark"
+              class="border-dividerLight hover:bg-primaryDark flex w-full px-4 py-2 font-semibold bg-transparent border-t appearance-none cursor-pointer"
               @change="updateSelectedTeam(myTeams[$event.target.value])"
             >
               <option

packages/hoppscotch-app/components/collections/Edit.vue

@@ -38,18 +38,13 @@ import { defineComponent } from "@nuxtjs/composition-api"
 export default defineComponent({
   props: {
     show: Boolean,
-    editingCollectionName: { type: String, default: null },
+    placeholderCollName: { type: String, default: null },
   },
   data() {
     return {
       name: null,
     }
   },
-  watch: {
-    editingCollectionName(val) {
-      this.name = val
-    },
-  },
   methods: {
     saveCollection() {
       if (!this.name) {

packages/hoppscotch-app/components/collections/EditFolder.vue

@@ -39,18 +39,12 @@ import { defineComponent } from "@nuxtjs/composition-api"
 export default defineComponent({
   props: {
     show: Boolean,
-    editingFolderName: { type: String, default: null },
   },
   data() {
     return {
       name: null,
     }
   },
-  watch: {
-    editingFolderName(val) {
-      this.name = val
-    },
-  },
   methods: {
     editFolder() {
       if (!this.name) {

packages/hoppscotch-app/components/collections/EditRequest.vue

@@ -35,7 +35,7 @@ import { defineComponent } from "@nuxtjs/composition-api"
 export default defineComponent({
   props: {
     show: Boolean,
-    editingRequestName: { type: String, default: null },
+    placeholderReqName: { type: String, default: null },
   },
   data() {
     return {
@@ -44,11 +44,6 @@ export default defineComponent({
       },
     }
   },
-  watch: {
-    editingRequestName(val) {
-      this.requestUpdateData.name = val
-    },
-  },
   methods: {
     saveRequest() {
       if (!this.requestUpdateData.name) {

packages/hoppscotch-app/components/collections/ImportExport.vue

@@ -10,6 +10,7 @@
         v-if="mode == 'import_from_my_collections'"
         v-tippy="{ theme: 'tooltip' }"
         :title="$t('action.go_back')"
+        class="rounded"
         svg="arrow-left"
         @click.native="
           () => {
@@ -33,6 +34,7 @@
             <ButtonSecondary
               v-tippy="{ theme: 'tooltip' }"
               :title="$t('action.more')"
+              class="rounded"
               svg="more-vertical"
             />
           </template>

packages/hoppscotch-app/components/collections/SaveRequest.vue

@@ -6,7 +6,7 @@
   >
     <template #body>
       <div class="flex flex-col px-2">
-        <div class="flex relative">
+        <div class="relative flex">
           <input
             id="selectLabelSaveReq"
             v-model="requestName"
@@ -59,8 +59,7 @@
 
 <script setup lang="ts">
 import { reactive, ref, watch } from "@nuxtjs/composition-api"
-import { HoppGQLRequest, isHoppRESTRequest } from "@hoppscotch/data"
-import cloneDeep from "lodash/cloneDeep"
+import { isHoppRESTRequest } from "~/helpers/types/HoppRESTRequest"
 import {
   editGraphqlRequest,
   editRESTRequest,
@@ -75,6 +74,7 @@ import {
 } from "~/newstore/RESTSession"
 import * as teamUtils from "~/helpers/teams/utils"
 import { apolloClient } from "~/helpers/apollo"
+import { HoppGQLRequest } from "~/helpers/types/HoppGQLRequest"
 import { useI18n, useToast } from "~/helpers/utils/composables"
 
 const t = useI18n()
@@ -200,12 +200,8 @@ const saveRequestAs = async () => {
     return
   }
 
-  // Clone Deep because objects are shared by reference so updating
-  // just one bit will update other referenced shared instances
   const requestUpdated =
-    props.mode === "rest"
-      ? cloneDeep(getRESTRequest())
-      : cloneDeep(getGQLSession().request)
+    props.mode === "rest" ? getRESTRequest() : getGQLSession().request
 
   // // Filter out all REST file inputs
   // if (this.mode === "rest" && requestUpdated.bodyParams) {

packages/hoppscotch-app/components/collections/graphql/Add.vue

@@ -34,7 +34,7 @@
 
 <script lang="ts">
 import { defineComponent } from "@nuxtjs/composition-api"
-import { HoppGQLRequest } from "@hoppscotch/data"
+import { HoppGQLRequest } from "~/helpers/types/HoppGQLRequest"
 import { addGraphqlCollection, makeCollection } from "~/newstore/collections"
 
 export default defineComponent({

packages/hoppscotch-app/components/collections/graphql/Collection.vue

@@ -1,17 +1,16 @@
 <template>
   <div class="flex flex-col" :class="[{ 'bg-primaryLight': dragging }]">
     <div
-      class="flex items-stretch group"
+      class="group flex items-center"
       @dragover.prevent
       @drop.prevent="dropEvent"
       @dragover="dragging = true"
       @drop="dragging = false"
       @dragleave="dragging = false"
       @dragend="dragging = false"
-      @contextmenu.prevent="$refs.options.tippy().show()"
     >
       <span
-        class="cursor-pointer flex px-4 items-center justify-center"
+        class="flex items-center justify-center px-4 cursor-pointer"
         @click="toggleShowChildren()"
       >
         <SmartIcon
@@ -21,7 +20,7 @@
         />
       </span>
       <span
-        class="cursor-pointer flex flex-1 min-w-0 py-2 pr-2 transition group-hover:text-secondaryDark"
+        class="group-hover:text-secondaryDark flex flex-1 min-w-0 py-2 pr-2 transition cursor-pointer"
         @click="toggleShowChildren()"
       >
         <span class="truncate"> {{ collection.name }} </span>
@@ -31,7 +30,7 @@
           v-tippy="{ theme: 'tooltip' }"
           svg="folder-plus"
           :title="$t('folder.new')"
-          class="hidden group-hover:inline-flex"
+          class="group-hover:inline-flex hidden"
           @click.native="
             $emit('add-folder', {
               path: `${collectionIndex}`,
@@ -92,7 +91,7 @@
     </div>
     <div v-if="showChildren || isFiltered" class="flex">
       <div
-        class="bg-dividerLight cursor-nsResize flex ml-5.5 transform transition w-1 hover:bg-dividerDark hover:scale-x-125"
+        class="flex w-1 transform transition cursor-nsResize ml-5.5 bg-dividerLight hover:scale-x-125 hover:bg-dividerDark"
         @click="toggleShowChildren()"
       ></div>
       <div class="flex flex-col flex-1 truncate">
@@ -133,12 +132,12 @@
           v-if="
             collection.folders.length === 0 && collection.requests.length === 0
           "
-          class="flex flex-col text-secondaryLight p-4 items-center justify-center"
+          class="text-secondaryLight flex flex-col items-center justify-center p-4"
         >
           <img
             :src="`/images/states/${$colorMode.value}/pack.svg`"
             loading="lazy"
-            class="flex-col object-contain object-center h-16 mb-4 w-16 inline-flex"
+            class="inline-flex flex-col object-contain object-center w-16 h-16 mb-4"
             :alt="$t('empty.collection')"
           />
           <span class="text-center">
@@ -192,7 +191,7 @@ export default defineComponent({
     getCollectionIcon() {
       if (this.isSelected) return "check-circle"
       else if (!this.showChildren && !this.isFiltered) return "folder"
-      else if (this.showChildren || this.isFiltered) return "folder-open"
+      else if (this.showChildren || this.isFiltered) return "folder-minus"
       else return "folder"
     },
   },

packages/hoppscotch-app/components/collections/graphql/Edit.vue

@@ -45,18 +45,12 @@ export default defineComponent({
     show: Boolean,
     editingCollection: { type: Object, default: () => {} },
     editingCollectionIndex: { type: Number, default: null },
-    editingCollectionName: { type: String, default: null },
   },
   data() {
     return {
       name: null as string | null,
     }
   },
-  watch: {
-    editingCollectionName(val) {
-      this.name = val
-    },
-  },
   methods: {
     saveCollection() {
       if (!this.name) {

packages/hoppscotch-app/components/collections/graphql/EditFolder.vue

@@ -45,18 +45,12 @@ export default defineComponent({
     show: Boolean,
     folder: { type: Object, default: () => {} },
     folderPath: { type: String, default: null },
-    editingFolderName: { type: String, default: null },
   },
   data() {
     return {
       name: "",
     }
   },
-  watch: {
-    editingFolderName(val) {
-      this.name = val
-    },
-  },
   methods: {
     editFolder() {
       if (!this.name) {

packages/hoppscotch-app/components/collections/graphql/EditRequest.vue

@@ -38,7 +38,7 @@
 
 <script lang="ts">
 import { defineComponent, PropType } from "@nuxtjs/composition-api"
-import { HoppGQLRequest } from "@hoppscotch/data"
+import { HoppGQLRequest } from "~/helpers/types/HoppGQLRequest"
 import { editGraphqlRequest } from "~/newstore/collections"
 
 export default defineComponent({
@@ -47,7 +47,6 @@ export default defineComponent({
     folderPath: { type: String, default: null },
     request: { type: Object as PropType<HoppGQLRequest>, default: () => {} },
     requestIndex: { type: Number, default: null },
-    editingRequestName: { type: String, default: null },
   },
   data() {
     return {
@@ -56,11 +55,6 @@ export default defineComponent({
       },
     }
   },
-  watch: {
-    editingRequestName(val) {
-      this.requestUpdateData.name = val
-    },
-  },
   methods: {
     saveRequest() {
       if (!this.requestUpdateData.name) {

packages/hoppscotch-app/components/collections/graphql/Folder.vue

@@ -1,17 +1,16 @@
 <template>
   <div class="flex flex-col" :class="[{ 'bg-primaryLight': dragging }]">
     <div
-      class="flex items-stretch group"
+      class="group flex items-center"
       @dragover.prevent
       @drop.prevent="dropEvent"
       @dragover="dragging = true"
       @drop="dragging = false"
       @dragleave="dragging = false"
       @dragend="dragging = false"
-      @contextmenu.prevent="$refs.options.tippy().show()"
     >
       <span
-        class="cursor-pointer flex px-4 items-center justify-center"
+        class="flex items-center justify-center px-4 cursor-pointer"
         @click="toggleShowChildren()"
       >
         <SmartIcon
@@ -21,7 +20,7 @@
         />
       </span>
       <span
-        class="cursor-pointer flex flex-1 min-w-0 py-2 pr-2 transition group-hover:text-secondaryDark"
+        class="group-hover:text-secondaryDark flex flex-1 min-w-0 py-2 pr-2 transition cursor-pointer"
         @click="toggleShowChildren()"
       >
         <span class="truncate">
@@ -33,7 +32,7 @@
           v-tippy="{ theme: 'tooltip' }"
           svg="folder-plus"
           :title="$t('folder.new')"
-          class="hidden group-hover:inline-flex"
+          class="group-hover:inline-flex hidden"
           @click.native="$emit('add-folder', { folder, path: folderPath })"
         />
         <span>
@@ -88,7 +87,7 @@
     </div>
     <div v-if="showChildren || isFiltered" class="flex">
       <div
-        class="bg-dividerLight cursor-nsResize flex ml-5.5 transform transition w-1 hover:bg-dividerDark hover:scale-x-125"
+        class="flex w-1 transform transition cursor-nsResize ml-5.5 bg-dividerLight hover:scale-x-125 hover:bg-dividerDark"
         @click="toggleShowChildren()"
       ></div>
       <div class="flex flex-col flex-1 truncate">
@@ -132,12 +131,12 @@
             folder.requests &&
             folder.requests.length === 0
           "
-          class="flex flex-col text-secondaryLight p-4 items-center justify-center"
+          class="text-secondaryLight flex flex-col items-center justify-center p-4"
         >
           <img
             :src="`/images/states/${$colorMode.value}/pack.svg`"
             loading="lazy"
-            class="flex-col object-contain object-center h-16 mb-4 w-16 inline-flex"
+            class="inline-flex flex-col object-contain object-center w-16 h-16 mb-4"
             :alt="$t('empty.folder')"
           />
           <span class="text-center">
@@ -190,7 +189,7 @@ export default defineComponent({
     getCollectionIcon() {
       if (this.isSelected) return "check-circle"
       else if (!this.showChildren && !this.isFiltered) return "folder"
-      else if (this.showChildren || this.isFiltered) return "folder-open"
+      else if (this.showChildren || this.isFiltered) return "folder-minus"
       else return "folder"
     },
   },

packages/hoppscotch-app/components/collections/graphql/ImportExport.vue

@@ -12,6 +12,7 @@
             <ButtonSecondary
               v-tippy="{ theme: 'tooltip' }"
               :title="$t('action.more')"
+              class="rounded"
               svg="more-vertical"
             />
           </template>

packages/hoppscotch-app/components/collections/graphql/Request.vue

@@ -1,16 +1,15 @@
 <template>
   <div class="flex flex-col" :class="[{ 'bg-primaryLight': dragging }]">
     <div
-      class="flex items-stretch group"
+      class="group flex items-center"
       draggable="true"
       @dragstart="dragStart"
       @dragover.stop
       @dragleave="dragging = false"
       @dragend="dragging = false"
-      @contextmenu.prevent="$refs.options.tippy().show()"
     >
       <span
-        class="cursor-pointer flex px-2 w-16 items-center justify-center truncate"
+        class="flex items-center justify-center w-16 px-2 truncate cursor-pointer"
         @click="!doc ? selectRequest() : {}"
       >
         <SmartIcon
@@ -20,7 +19,7 @@
         />
       </span>
       <span
-        class="cursor-pointer flex flex-1 min-w-0 py-2 pr-2 transition group-hover:text-secondaryDark"
+        class="group-hover:text-secondaryDark flex flex-1 min-w-0 py-2 pr-2 transition cursor-pointer"
         @click="!doc ? selectRequest() : {}"
       >
         <span class="truncate"> {{ request.name }} </span>
@@ -31,7 +30,7 @@
           v-tippy="{ theme: 'tooltip' }"
           svg="rotate-ccw"
           :title="$t('action.restore')"
-          class="hidden group-hover:inline-flex"
+          class="group-hover:inline-flex hidden"
           @click.native="!doc ? selectRequest() : {}"
         />
         <span>
@@ -103,7 +102,7 @@
 
 <script lang="ts">
 import { defineComponent, PropType } from "@nuxtjs/composition-api"
-import { HoppGQLRequest, makeGQLRequest } from "@hoppscotch/data"
+import { HoppGQLRequest, makeGQLRequest } from "~/helpers/types/HoppGQLRequest"
 import { removeGraphqlRequest } from "~/newstore/collections"
 import { setGQLSession } from "~/newstore/GQLSession"
 

packages/hoppscotch-app/components/collections/graphql/index.vue

@@ -4,7 +4,7 @@
     :class="{ 'rounded border border-divider': savingMode }"
   >
     <div
-      class="divide-dividerLight divide-y border-b border-dividerLight flex flex-col top-0 z-10 sticky"
+      class="divide-dividerLight border-dividerLight sticky top-0 z-10 flex flex-col border-b divide-y"
       :class="{ 'bg-primary': !savingMode }"
     >
       <input
@@ -13,9 +13,9 @@
         type="search"
         autocomplete="off"
         :placeholder="$t('action.search')"
-        class="bg-transparent flex w-full py-2 px-4"
+        class="flex w-full px-4 py-2 bg-transparent"
       />
-      <div class="flex flex-1 justify-between">
+      <div class="flex justify-between flex-1">
         <ButtonSecondary
           svg="plus"
           :label="$t('action.new')"
@@ -62,15 +62,15 @@
     </div>
     <div
       v-if="collections.length === 0"
-      class="flex flex-col text-secondaryLight p-4 items-center justify-center"
+      class="text-secondaryLight flex flex-col items-center justify-center p-4"
     >
       <img
         :src="`/images/states/${$colorMode.value}/pack.svg`"
         loading="lazy"
-        class="flex-col object-contain object-center h-16 my-4 w-16 inline-flex"
+        class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
         :alt="$t('empty.collections')"
       />
-      <span class="text-center pb-4">
+      <span class="pb-4 text-center">
         {{ $t("empty.collections") }}
       </span>
       <ButtonSecondary
@@ -81,9 +81,9 @@
     </div>
     <div
       v-if="!(filteredCollections.length !== 0 || collections.length === 0)"
-      class="flex flex-col text-secondaryLight p-4 items-center justify-center"
+      class="text-secondaryLight flex flex-col items-center justify-center p-4"
     >
-      <i class="opacity-75 pb-2 material-icons">manage_search</i>
+      <i class="material-icons pb-2 opacity-75">manage_search</i>
       <span class="text-center">
         {{ $t("state.nothing_found") }} "{{ filterText }}"
       </span>
@@ -96,7 +96,6 @@
       :show="showModalEdit"
       :editing-collection="editingCollection"
       :editing-collection-index="editingCollectionIndex"
-      :editing-collection-name="editingCollection ? editingCollection.name : ''"
       @hide-modal="displayModalEdit(false)"
     />
     <CollectionsGraphqlAddFolder
@@ -111,7 +110,6 @@
       :folder="editingFolder"
       :folder-index="editingFolderIndex"
       :folder-path="editingFolderPath"
-      :editing-folder-name="editingFolder ? editingFolder.name : ''"
       @hide-modal="displayModalEditFolder(false)"
     />
     <CollectionsGraphqlEditRequest
@@ -119,7 +117,6 @@
       :folder-path="editingFolderPath"
       :request="editingRequest"
       :request-index="editingRequestIndex"
-      :editing-request-name="editingRequest ? editingRequest.name : ''"
       @hide-modal="displayModalEditRequest(false)"
     />
     <CollectionsGraphqlImportExport

packages/hoppscotch-app/components/collections/index.vue

@@ -4,8 +4,7 @@
     :class="{ 'rounded border border-divider': saveRequest }"
   >
     <div
-      class="divide-dividerLight divide-y bg-primary border-b border-dividerLight rounded-t flex flex-col z-10 sticky"
-      :style="saveRequest ? 'top: calc(-1 * var(--body-font-size))' : 'top: 0'"
+      class="divide-dividerLight bg-primary border-dividerLight sticky top-0 z-10 flex flex-col border-b divide-y rounded-t"
     >
       <div v-if="!saveRequest" class="search-wrappe">
         <input
@@ -13,7 +12,7 @@
           type="search"
           autocomplete="off"
           :placeholder="$t('action.search')"
-          class="bg-transparent flex w-full py-2 pr-2 pl-4"
+          class="flex w-full py-2 pl-4 pr-2 bg-transparent"
         />
       </div>
       <CollectionsChooseType
@@ -23,7 +22,7 @@
         @update-collection-type="updateCollectionType"
         @update-selected-team="updateSelectedTeam"
       />
-      <div class="flex flex-1 justify-between">
+      <div class="flex justify-between flex-1">
         <ButtonSecondary
           v-if="
             collectionsType.type == 'team-collections' &&
@@ -99,15 +98,15 @@
     </div>
     <div
       v-if="filteredCollections.length === 0 && filterText.length === 0"
-      class="flex flex-col text-secondaryLight p-4 items-center justify-center"
+      class="text-secondaryLight flex flex-col items-center justify-center p-4"
     >
       <img
         :src="`/images/states/${$colorMode.value}/pack.svg`"
         loading="lazy"
-        class="flex-col object-contain object-center h-16 my-4 w-16 inline-flex"
+        class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
         :alt="$t('empty.collections')"
       />
-      <span class="text-center pb-4">
+      <span class="pb-4 text-center">
         {{ $t("empty.collections") }}
       </span>
       <ButtonSecondary
@@ -132,9 +131,9 @@
     </div>
     <div
       v-if="filterText.length !== 0 && filteredCollections.length === 0"
-      class="flex flex-col text-secondaryLight p-4 items-center justify-center"
+      class="text-secondaryLight flex flex-col items-center justify-center p-4"
     >
-      <i class="opacity-75 pb-2 material-icons">manage_search</i>
+      <i class="material-icons pb-2 opacity-75">manage_search</i>
       <span class="text-center">
         {{ $t("state.nothing_found") }} "{{ filterText }}"
       </span>
@@ -146,11 +145,8 @@
     />
     <CollectionsEdit
       :show="showModalEdit"
-      :editing-collection-name="
-        editingCollection
-          ? editingCollection.name || editingCollection.title
-          : ''
-      "
+      :editing-coll-name="editingCollection ? editingCollection.name : ''"
+      :placeholder-coll-name="editingCollection ? editingCollection.name : ''"
       @hide-modal="displayModalEdit(false)"
       @submit="updateEditingCollection"
     />
@@ -163,15 +159,12 @@
     />
     <CollectionsEditFolder
       :show="showModalEditFolder"
-      :editing-folder-name="
-        editingFolder ? editingFolder.name || editingFolder.title : ''
-      "
       @submit="updateEditingFolder"
       @hide-modal="displayModalEditFolder(false)"
     />
     <CollectionsEditRequest
       :show="showModalEditRequest"
-      :editing-request-name="editingRequest ? editingRequest.name : ''"
+      :placeholder-req-name="editingRequest ? editingRequest.name : ''"
       @submit="updateEditingRequest"
       @hide-modal="displayModalEditRequest(false)"
     />

packages/hoppscotch-app/components/collections/my/Collection.vue

@@ -1,17 +1,16 @@
 <template>
   <div class="flex flex-col" :class="[{ 'bg-primaryLight': dragging }]">
     <div
-      class="flex items-stretch group"
+      class="group flex items-center"
       @dragover.prevent
       @drop.prevent="dropEvent"
       @dragover="dragging = true"
       @drop="dragging = false"
       @dragleave="dragging = false"
       @dragend="dragging = false"
-      @contextmenu.prevent="$refs.options.tippy().show()"
     >
       <span
-        class="cursor-pointer flex px-4 items-center justify-center"
+        class="flex items-center justify-center px-4 cursor-pointer"
         @click="toggleShowChildren()"
       >
         <SmartIcon
@@ -21,7 +20,7 @@
         />
       </span>
       <span
-        class="cursor-pointer flex flex-1 min-w-0 py-2 pr-2 transition group-hover:text-secondaryDark"
+        class="group-hover:text-secondaryDark flex flex-1 min-w-0 py-2 pr-2 transition cursor-pointer"
         @click="toggleShowChildren()"
       >
         <span class="truncate"> {{ collection.name }} </span>
@@ -48,7 +47,7 @@
           v-tippy="{ theme: 'tooltip' }"
           svg="folder-plus"
           :title="$t('folder.new')"
-          class="hidden group-hover:inline-flex"
+          class="group-hover:inline-flex hidden"
           @click.native="
             $emit('add-folder', {
               folder: collection,
@@ -111,7 +110,7 @@
     </div>
     <div v-if="showChildren || isFiltered" class="flex">
       <div
-        class="bg-dividerLight cursor-nsResize flex ml-5.5 transform transition w-1 hover:bg-dividerDark hover:scale-x-125"
+        class="flex w-1 transform transition cursor-nsResize ml-5.5 bg-dividerLight hover:scale-x-125 hover:bg-dividerDark"
         @click="toggleShowChildren()"
       ></div>
       <div class="flex flex-col flex-1 truncate">
@@ -159,12 +158,12 @@
             (collection.requests == undefined ||
               collection.requests.length === 0)
           "
-          class="flex flex-col text-secondaryLight p-4 items-center justify-center"
+          class="text-secondaryLight flex flex-col items-center justify-center p-4"
         >
           <img
             :src="`/images/states/${$colorMode.value}/pack.svg`"
             loading="lazy"
-            class="flex-col object-contain object-center h-16 mb-4 w-16 inline-flex"
+            class="inline-flex flex-col object-contain object-center w-16 h-16 mb-4"
             :alt="$t('empty.collection')"
           />
           <span class="text-center">
@@ -219,7 +218,7 @@ export default defineComponent({
     getCollectionIcon() {
       if (this.isSelected) return "check-circle"
       else if (!this.showChildren && !this.isFiltered) return "folder"
-      else if (this.showChildren || this.isFiltered) return "folder-open"
+      else if (this.showChildren || this.isFiltered) return "folder-minus"
       else return "folder"
     },
   },

packages/hoppscotch-app/components/collections/my/Folder.vue

@@ -1,17 +1,16 @@
 <template>
   <div class="flex flex-col" :class="[{ 'bg-primaryLight': dragging }]">
     <div
-      class="flex items-stretch group"
+      class="group flex items-center"
       @dragover.prevent
       @drop.prevent="dropEvent"
       @dragover="dragging = true"
       @drop="dragging = false"
       @dragleave="dragging = false"
       @dragend="dragging = false"
-      @contextmenu.prevent="$refs.options.tippy().show()"
     >
       <span
-        class="cursor-pointer flex px-4 items-center justify-center"
+        class="flex items-center justify-center px-4 cursor-pointer"
         @click="toggleShowChildren()"
       >
         <SmartIcon
@@ -21,7 +20,7 @@
         />
       </span>
       <span
-        class="cursor-pointer flex flex-1 min-w-0 py-2 pr-2 transition group-hover:text-secondaryDark"
+        class="group-hover:text-secondaryDark flex flex-1 min-w-0 py-2 pr-2 transition cursor-pointer"
         @click="toggleShowChildren()"
       >
         <span class="truncate">
@@ -33,7 +32,7 @@
           v-tippy="{ theme: 'tooltip' }"
           svg="folder-plus"
           :title="$t('folder.new')"
-          class="hidden group-hover:inline-flex"
+          class="group-hover:inline-flex hidden"
           @click.native="$emit('add-folder', { folder, path: folderPath })"
         />
         <span>
@@ -93,7 +92,7 @@
     </div>
     <div v-if="showChildren || isFiltered" class="flex">
       <div
-        class="bg-dividerLight cursor-nsResize flex ml-5.5 transform transition w-1 hover:bg-dividerDark hover:scale-x-125"
+        class="flex w-1 transform transition cursor-nsResize ml-5.5 bg-dividerLight hover:scale-x-125 hover:bg-dividerDark"
         @click="toggleShowChildren()"
       ></div>
       <div class="flex flex-col flex-1 truncate">
@@ -141,12 +140,12 @@
             folder.requests &&
             folder.requests.length === 0
           "
-          class="flex flex-col text-secondaryLight p-4 items-center justify-center"
+          class="text-secondaryLight flex flex-col items-center justify-center p-4"
         >
           <img
             :src="`/images/states/${$colorMode.value}/pack.svg`"
             loading="lazy"
-            class="flex-col object-contain object-center h-16 mb-4 w-16 inline-flex"
+            class="inline-flex flex-col object-contain object-center w-16 h-16 mb-4"
             :alt="$t('empty.folder')"
           />
           <span class="text-center">
@@ -205,7 +204,7 @@ export default defineComponent({
     getCollectionIcon() {
       if (this.isSelected) return "check-circle"
       else if (!this.showChildren && !this.isFiltered) return "folder"
-      else if (this.showChildren || this.isFiltered) return "folder-open"
+      else if (this.showChildren || this.isFiltered) return "folder-minus"
       else return "folder"
     },
   },

packages/hoppscotch-app/components/collections/my/Request.vue

@@ -1,16 +1,15 @@
 <template>
   <div class="flex flex-col" :class="[{ 'bg-primaryLight': dragging }]">
     <div
-      class="flex items-stretch group"
+      class="group flex items-center"
       draggable="true"
       @dragstart="dragStart"
       @dragover.stop
       @dragleave="dragging = false"
       @dragend="dragging = false"
-      @contextmenu.prevent="$refs.options.tippy().show()"
     >
       <span
-        class="cursor-pointer flex px-2 w-16 items-center justify-center truncate"
+        class="flex items-center justify-center w-16 px-2 truncate cursor-pointer"
         :class="getRequestLabelColor(request.method)"
         @click="!doc ? selectRequest() : {}"
       >
@@ -25,7 +24,7 @@
         </span>
       </span>
       <span
-        class="cursor-pointer flex flex-1 min-w-0 py-2 pr-2 transition items-center group-hover:text-secondaryDark"
+        class="group-hover:text-secondaryDark flex items-center flex-1 min-w-0 py-2 pr-2 transition cursor-pointer"
         @click="!doc ? selectRequest() : {}"
       >
         <span class="truncate"> {{ request.name }} </span>
@@ -45,7 +44,7 @@
           v-tippy="{ theme: 'tooltip' }"
           svg="rotate-ccw"
           :title="$t('action.restore')"
-          class="hidden group-hover:inline-flex"
+          class="group-hover:inline-flex hidden"
           @click.native="!doc ? selectRequest() : {}"
         />
         <span>
@@ -117,7 +116,7 @@
 
 <script>
 import { defineComponent } from "@nuxtjs/composition-api"
-import { translateToNewRequest } from "@hoppscotch/data"
+import { translateToNewRequest } from "~/helpers/types/HoppRESTRequest"
 import { useReadonlyStream } from "~/helpers/utils/composables"
 import {
   restSaveContext$,

packages/hoppscotch-app/components/collections/teams/Collection.vue

@@ -1,11 +1,8 @@
 <template>
   <div class="flex flex-col">
-    <div
-      class="flex items-stretch group"
-      @contextmenu.prevent="$refs.options.tippy().show()"
-    >
+    <div class="group flex items-center">
       <span
-        class="cursor-pointer flex px-4 items-center justify-center"
+        class="flex items-center justify-center px-4 cursor-pointer"
         @click="toggleShowChildren()"
       >
         <SmartIcon
@@ -15,7 +12,7 @@
         />
       </span>
       <span
-        class="cursor-pointer flex flex-1 min-w-0 py-2 pr-2 transition group-hover:text-secondaryDark"
+        class="group-hover:text-secondaryDark flex flex-1 min-w-0 py-2 pr-2 transition cursor-pointer"
         @click="toggleShowChildren()"
       >
         <span class="truncate"> {{ collection.title }} </span>
@@ -42,7 +39,7 @@
           v-tippy="{ theme: 'tooltip' }"
           svg="folder-plus"
           :title="$t('folder.new')"
-          class="hidden group-hover:inline-flex"
+          class="group-hover:inline-flex hidden"
           @click.native="
             $emit('add-folder', {
               folder: collection,
@@ -109,7 +106,7 @@
     </div>
     <div v-if="showChildren || isFiltered" class="flex">
       <div
-        class="bg-dividerLight cursor-nsResize flex ml-5.5 transform transition w-1 hover:bg-dividerDark hover:scale-x-125"
+        class="flex w-1 transform transition cursor-nsResize ml-5.5 bg-dividerLight hover:scale-x-125 hover:bg-dividerDark"
         @click="toggleShowChildren()"
       ></div>
       <div class="flex flex-col flex-1 truncate">
@@ -155,12 +152,12 @@
             (collection.requests == undefined ||
               collection.requests.length === 0)
           "
-          class="flex flex-col text-secondaryLight p-4 items-center justify-center"
+          class="text-secondaryLight flex flex-col items-center justify-center p-4"
         >
           <img
             :src="`/images/states/${$colorMode.value}/pack.svg`"
             loading="lazy"
-            class="flex-col object-contain object-center h-16 mb-4 w-16 inline-flex"
+            class="inline-flex flex-col object-contain object-center w-16 h-16 mb-4"
             :alt="$t('empty.collection')"
           />
           <span class="text-center">
@@ -213,7 +210,7 @@ export default defineComponent({
     getCollectionIcon() {
       if (this.isSelected) return "check-circle"
       else if (!this.showChildren && !this.isFiltered) return "folder"
-      else if (this.showChildren || this.isFiltered) return "folder-open"
+      else if (this.showChildren || this.isFiltered) return "folder-minus"
       else return "folder"
     },
   },

packages/hoppscotch-app/components/collections/teams/Folder.vue

@@ -1,11 +1,8 @@
 <template>
   <div class="flex flex-col">
-    <div
-      class="flex items-stretch group"
-      @contextmenu.prevent="$refs.options.tippy().show()"
-    >
+    <div class="group flex items-center">
       <span
-        class="cursor-pointer flex px-4 items-center justify-center"
+        class="flex items-center justify-center px-4 cursor-pointer"
         @click="toggleShowChildren()"
       >
         <SmartIcon
@@ -15,7 +12,7 @@
         />
       </span>
       <span
-        class="cursor-pointer flex flex-1 min-w-0 py-2 pr-2 transition group-hover:text-secondaryDark"
+        class="group-hover:text-secondaryDark flex flex-1 min-w-0 py-2 pr-2 transition cursor-pointer"
         @click="toggleShowChildren()"
       >
         <span class="truncate">
@@ -28,7 +25,7 @@
           v-tippy="{ theme: 'tooltip' }"
           svg="folder-plus"
           :title="$t('folder.new')"
-          class="hidden group-hover:inline-flex"
+          class="group-hover:inline-flex hidden"
           @click.native="$emit('add-folder', { folder, path: folderPath })"
         />
         <span>
@@ -92,7 +89,7 @@
     </div>
     <div v-if="showChildren || isFiltered" class="flex">
       <div
-        class="bg-dividerLight cursor-nsResize flex ml-5.5 transform transition w-1 hover:bg-dividerDark hover:scale-x-125"
+        class="flex w-1 transform transition cursor-nsResize ml-5.5 bg-dividerLight hover:scale-x-125 hover:bg-dividerDark"
         @click="toggleShowChildren()"
       ></div>
       <div class="flex flex-col flex-1 truncate">
@@ -136,12 +133,12 @@
             (folder.children == undefined || folder.children.length === 0) &&
             (folder.requests == undefined || folder.requests.length === 0)
           "
-          class="flex flex-col text-secondaryLight p-4 items-center justify-center"
+          class="text-secondaryLight flex flex-col items-center justify-center p-4"
         >
           <img
             :src="`/images/states/${$colorMode.value}/pack.svg`"
             loading="lazy"
-            class="flex-col object-contain object-center h-16 mb-4 w-16 inline-flex"
+            class="inline-flex flex-col object-contain object-center w-16 h-16 mb-4"
             :alt="$t('empty.folder')"
           />
           <span class="text-center">
@@ -195,7 +192,7 @@ export default defineComponent({
     getCollectionIcon() {
       if (this.isSelected) return "check-circle"
       else if (!this.showChildren && !this.isFiltered) return "folder"
-      else if (this.showChildren || this.isFiltered) return "folder-open"
+      else if (this.showChildren || this.isFiltered) return "folder-minus"
       else return "folder"
     },
   },

packages/hoppscotch-app/components/collections/teams/Request.vue

@@ -1,11 +1,8 @@
 <template>
   <div class="flex flex-col">
-    <div
-      class="flex items-stretch group"
-      @contextmenu.prevent="$refs.options.tippy().show()"
-    >
+    <div class="group flex items-center">
       <span
-        class="cursor-pointer flex px-2 w-16 items-center justify-center truncate"
+        class="flex items-center justify-center w-16 px-2 truncate cursor-pointer"
         :class="getRequestLabelColor(request.method)"
         @click="!doc ? selectRequest() : {}"
       >
@@ -20,7 +17,7 @@
         </span>
       </span>
       <span
-        class="cursor-pointer flex flex-1 min-w-0 py-2 pr-2 transition items-center group-hover:text-secondaryDark"
+        class="group-hover:text-secondaryDark flex items-center flex-1 min-w-0 py-2 pr-2 transition cursor-pointer"
         @click="!doc ? selectRequest() : {}"
       >
         <span class="truncate"> {{ request.name }} </span>
@@ -39,7 +36,7 @@
           v-tippy="{ theme: 'tooltip' }"
           svg="rotate-ccw"
           :title="$t('action.restore')"
-          class="hidden group-hover:inline-flex"
+          class="group-hover:inline-flex hidden"
           @click.native="!doc ? selectRequest() : {}"
         />
         <span>
@@ -96,7 +93,7 @@
 
 <script lang="ts">
 import { defineComponent } from "@nuxtjs/composition-api"
-import { translateToNewRequest } from "@hoppscotch/data"
+import { translateToNewRequest } from "~/helpers/types/HoppRESTRequest"
 import { useReadonlyStream } from "~/helpers/utils/composables"
 import {
   restSaveContext$,

packages/hoppscotch-app/components/docs/Folder.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="folder">
     <h3 class="heading">
-      <SmartIcon name="folder-open" class="svg-icons" />
+      <SmartIcon name="folder-minus" class="svg-icons" />
       {{ folder.name || $t("state.none") }}
     </h3>
     <div

packages/hoppscotch-app/components/environments/Edit.vue

@@ -6,7 +6,7 @@
   >
     <template #body>
       <div class="flex flex-col px-2">
-        <div class="flex relative">
+        <div class="relative flex">
           <input
             id="selectLabelEnvEdit"
             v-model="name"
@@ -22,7 +22,7 @@
             {{ $t("action.label") }}
           </label>
         </div>
-        <div class="flex flex-1 items-center justify-between">
+        <div class="flex items-center justify-between flex-1">
           <label for="variableList" class="p-4">
             {{ $t("environment.variable_list") }}
           </label>
@@ -31,31 +31,33 @@
               v-tippy="{ theme: 'tooltip' }"
               :title="$t('action.clear_all')"
               :svg="clearIcon"
+              class="rounded"
               @click.native="clearContent()"
             />
             <ButtonSecondary
               v-tippy="{ theme: 'tooltip' }"
               svg="plus"
               :title="$t('add.new')"
+              class="rounded"
               @click.native="addEnvironmentVariable"
             />
           </div>
         </div>
-        <div class="divide-dividerLight divide-y border border-divider rounded">
+        <div class="divide-dividerLight border-divider border divide-y rounded">
           <div
             v-for="(variable, index) in vars"
             :key="`variable-${index}`"
-            class="divide-dividerLight divide-x flex"
+            class="divide-dividerLight flex divide-x"
           >
             <input
               v-model="variable.key"
-              class="bg-transparent flex flex-1 py-2 px-4"
+              class="flex flex-1 px-4 py-2 bg-transparent"
               :placeholder="`${$t('count.variable', { count: index + 1 })}`"
               :name="'param' + index"
             />
             <input
               v-model="variable.value"
-              class="bg-transparent flex flex-1 py-2 px-4"
+              class="flex flex-1 px-4 py-2 bg-transparent"
               :placeholder="`${$t('count.value', { count: index + 1 })}`"
               :name="'value' + index"
             />
@@ -72,15 +74,15 @@
           </div>
           <div
             v-if="vars.length === 0"
-            class="flex flex-col text-secondaryLight p-4 items-center justify-center"
+            class="text-secondaryLight flex flex-col items-center justify-center p-4"
           >
             <img
               :src="`/images/states/${$colorMode.value}/blockchain.svg`"
               loading="lazy"
-              class="flex-col object-contain object-center h-16 my-4 w-16 inline-flex"
+              class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
               :alt="$t('empty.environments')"
             />
-            <span class="text-center pb-4">
+            <span class="pb-4 text-center">
               {{ $t("empty.environments") }}
             </span>
             <ButtonSecondary

packages/hoppscotch-app/components/environments/Environment.vue

@@ -1,16 +1,13 @@
 <template>
-  <div
-    class="flex items-stretch group"
-    @contextmenu.prevent="$refs.options.tippy().show()"
-  >
+  <div class="group flex items-center">
     <span
-      class="cursor-pointer flex px-4 items-center justify-center"
+      class="flex items-center justify-center px-4 cursor-pointer"
       @click="$emit('edit-environment')"
     >
       <SmartIcon class="svg-icons" name="layers" />
     </span>
     <span
-      class="cursor-pointer flex flex-1 min-w-0 py-2 pr-2 transition group-hover:text-secondaryDark"
+      class="group-hover:text-secondaryDark flex flex-1 min-w-0 py-2 pr-2 transition cursor-pointer"
       @click="$emit('edit-environment')"
     >
       <span class="truncate">

packages/hoppscotch-app/components/environments/ImportExport.vue

@@ -12,6 +12,7 @@
             <ButtonSecondary
               v-tippy="{ theme: 'tooltip' }"
               :title="$t('action.more')"
+              class="rounded"
               svg="more-vertical"
             />
           </template>

packages/hoppscotch-app/components/environments/index.vue

@@ -1,22 +1,22 @@
 <template>
   <AppSection :label="`${$t('environment.title')}`">
-    <div class="bg-primary rounded-t flex flex-col top-0 z-10 sticky">
+    <div class="bg-primary sticky top-0 z-10 flex flex-col rounded-t">
       <tippy ref="options" interactive trigger="click" theme="popover" arrow>
         <template #trigger>
           <span
             v-tippy="{ theme: 'tooltip' }"
             :title="`${$t('environment.select')}`"
-            class="bg-transparent border-b border-dividerLight flex-1 select-wrapper"
+            class="border-dividerLight select-wrapper flex-1 bg-transparent border-b"
           >
             <ButtonSecondary
               v-if="selectedEnvironmentIndex !== -1"
               :label="environments[selectedEnvironmentIndex].name"
-              class="rounded-none flex-1 pr-8"
+              class="flex-1 pr-8 rounded-none"
             />
             <ButtonSecondary
               v-else
               :label="`${$t('environment.no_environment')}`"
-              class="rounded-none flex-1 pr-8"
+              class="flex-1 pr-8 rounded-none"
             />
           </span>
         </template>
@@ -45,7 +45,7 @@
           "
         />
       </tippy>
-      <div class="border-b border-dividerLight flex flex-1 justify-between">
+      <div class="border-dividerLight flex justify-between flex-1 border-b">
         <ButtonSecondary
           svg="plus"
           :label="`${$t('action.new')}`"
@@ -86,7 +86,7 @@
       <EnvironmentsEnvironment
         environment-index="Global"
         :environment="globalEnvironment"
-        class="border-b border-dashed border-dividerLight"
+        class="border-dividerLight border-b border-dashed"
         @edit-environment="editEnvironment('Global')"
       />
       <EnvironmentsEnvironment
@@ -99,15 +99,15 @@
     </div>
     <div
       v-if="environments.length === 0"
-      class="flex flex-col text-secondaryLight p-4 items-center justify-center"
+      class="text-secondaryLight flex flex-col items-center justify-center p-4"
     >
       <img
         :src="`/images/states/${$colorMode.value}/blockchain.svg`"
         loading="lazy"
-        class="flex-col object-contain object-center h-16 my-4 w-16 inline-flex"
+        class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
         :alt="$t('empty.environments')"
       />
-      <span class="text-center pb-4">
+      <span class="pb-4 text-center">
         {{ $t("empty.environments") }}
       </span>
       <ButtonSecondary

packages/hoppscotch-app/components/firebase/Login.vue

@@ -7,7 +7,7 @@
     @close="hideModal"
   >
     <template #body>
-      <div v-if="mode === 'sign-in'" class="flex flex-col space-y-2 px-2">
+      <div v-if="mode === 'sign-in'" class="flex flex-col px-2 space-y-2">
         <SmartItem
           :loading="signingInWithGitHub"
           svg="auth/github"
@@ -56,8 +56,8 @@
         />
       </form>
       <div v-if="mode === 'email-sent'" class="flex flex-col px-4">
-        <div class="flex flex-col max-w-md items-center justify-center">
-          <SmartIcon class="h-6 text-accent w-6" name="inbox" />
+        <div class="flex flex-col items-center justify-center max-w-md">
+          <SmartIcon class="text-accent w-6 h-6" name="inbox" />
           <h3 class="my-2 text-lg text-center">
             {{ $t("auth.we_sent_magic_link") }}
           </h3>
@@ -95,7 +95,7 @@
       </p>
       <p
         v-if="mode === 'email-sent'"
-        class="flex flex-1 text-secondaryLight justify-between"
+        class="text-secondaryLight flex justify-between flex-1"
       >
         <SmartAnchor
           class="link"

packages/hoppscotch-app/components/graphql/Field.vue

@@ -21,19 +21,19 @@
     </div>
     <div
       v-if="gqlField.description"
-      class="text-secondaryLight py-2 field-desc"
+      class="text-secondaryLight field-desc py-2"
     >
       {{ gqlField.description }}
     </div>
     <div
       v-if="gqlField.isDeprecated"
-      class="rounded bg-yellow-200 my-1 text-black py-1 px-2 inline-block field-deprecated"
+      class="field-deprecated inline-block px-2 py-1 my-1 text-black bg-yellow-200 rounded"
     >
       {{ $t("state.deprecated") }}
     </div>
     <div v-if="fieldArgs.length > 0">
       <h5 class="my-2">Arguments:</h5>
-      <div class="border-divider border-l-2 pl-4">
+      <div class="border-divider pl-4 border-l-2">
         <div v-for="(field, index) in fieldArgs" :key="`field-${index}`">
           <span>
             {{ field.name }}:
@@ -44,7 +44,7 @@
           </span>
           <div
             v-if="field.description"
-            class="text-secondaryLight py-2 field-desc"
+            class="text-secondaryLight field-desc py-2"
           >
             {{ field.description }}
           </div>
@@ -77,7 +77,7 @@ export default defineComponent({
 
 <style scoped lang="scss">
 .field-highlighted {
-  @apply border-accent border-b-2;
+  @apply border-b-2 border-accent;
 }
 
 .field-title {

packages/hoppscotch-app/components/graphql/Request.vue

@@ -1,13 +1,13 @@
 <template>
-  <div class="bg-primary flex p-4 top-0 z-10 sticky">
-    <div class="space-x-2 flex-1 inline-flex">
+  <div class="bg-primary sticky top-0 z-10 flex p-4">
+    <div class="inline-flex flex-1 space-x-2">
       <input
         id="url"
         v-model="url"
         type="url"
         autocomplete="off"
         spellcheck="false"
-        class="bg-primaryLight border border-divider rounded text-secondaryDark w-full py-2 px-4 hover:border-dividerDark focus-visible:bg-transparent focus-visible:border-dividerDark"
+        class="bg-primaryLight border-divider text-secondaryDark hover:border-dividerDark focus-visible:bg-transparent focus-visible:border-dividerDark w-full px-4 py-2 border rounded"
         :placeholder="`${t('request.url')}`"
         :disabled="connected"
         @keyup.enter="onConnectClick"

packages/hoppscotch-app/components/graphql/RequestOptions.vue

@@ -1,31 +1,33 @@
 <template>
   <div>
     <SmartTabs styles="sticky bg-primary top-upperPrimaryStickyFold z-10">
+      <template #actions>
+        <ButtonSecondary
+          :label="`${t('request.run')}`"
+          svg="play"
+          class="rounded-none !text-accent"
+          @click.native="runQuery()"
+        />
+        <ButtonSecondary
+          ref="saveRequest"
+          :label="`${t('request.save')}`"
+          class="rounded-none"
+          @click.native="saveRequest"
+        />
+      </template>
+
       <SmartTab :id="'query'" :label="`${t('tab.query')}`" :selected="true">
         <AppSection label="query">
           <div
-            class="bg-primary border-b border-dividerLight flex flex-1 top-upperSecondaryStickyFold pl-4 z-10 sticky items-center justify-between gqlRunQuery"
+            class="bg-primary border-dividerLight top-upperSecondaryStickyFold gqlRunQuery sticky z-10 flex items-center justify-between flex-1 pl-4 border-b"
           >
-            <label class="font-semibold text-secondaryLight">
+            <label class="text-secondaryLight font-semibold">
               {{ t("request.query") }}
             </label>
             <div class="flex">
-              <ButtonSecondary
-                :label="`${t('request.run')}`"
-                svg="play"
-                class="rounded-none !text-accent !hover:text-accentDark"
-                @click.native="runQuery()"
-              />
-              <ButtonSecondary
-                ref="saveRequest"
-                :label="`${t('request.save')}`"
-                svg="save"
-                class="rounded-none"
-                @click.native="saveRequest"
-              />
               <ButtonSecondary
                 v-tippy="{ theme: 'tooltip' }"
-                to="https://docs.hoppscotch.io/graphql"
+                to="https://docs.hoppscotch.io/graphql/#queries"
                 blank
                 :title="t('app.wiki')"
                 svg="help-circle"
@@ -51,15 +53,15 @@
       <SmartTab :id="'variables'" :label="`${t('tab.variables')}`">
         <AppSection label="variables">
           <div
-            class="bg-primary border-b border-dividerLight flex flex-1 top-upperSecondaryStickyFold pl-4 z-10 sticky items-center justify-between"
+            class="bg-primary border-dividerLight top-upperSecondaryStickyFold sticky z-10 flex items-center justify-between flex-1 pl-4 border-b"
           >
-            <label class="font-semibold text-secondaryLight">
+            <label class="text-secondaryLight font-semibold">
               {{ t("request.variables") }}
             </label>
             <div class="flex">
               <ButtonSecondary
                 v-tippy="{ theme: 'tooltip' }"
-                to="https://docs.hoppscotch.io/graphql"
+                to="https://docs.hoppscotch.io/graphql/#queries"
                 blank
                 :title="t('app.wiki')"
                 svg="help-circle"
@@ -79,15 +81,15 @@
       <SmartTab :id="'headers'" :label="`${t('tab.headers')}`">
         <AppSection label="headers">
           <div
-            class="bg-primary border-b border-dividerLight flex flex-1 top-upperSecondaryStickyFold pl-4 z-10 sticky items-center justify-between"
+            class="bg-primary border-dividerLight top-upperSecondaryStickyFold sticky z-10 flex items-center justify-between flex-1 pl-4 border-b"
           >
-            <label class="font-semibold text-secondaryLight">
+            <label class="text-secondaryLight font-semibold">
               {{ t("tab.headers") }}
             </label>
             <div class="flex">
               <ButtonSecondary
                 v-tippy="{ theme: 'tooltip' }"
-                to="https://docs.hoppscotch.io/graphql"
+                to="https://docs.hoppscotch.io/graphql/#headers"
                 blank
                 :title="t('app.wiki')"
                 svg="help-circle"
@@ -119,7 +121,7 @@
             <div
               v-for="(header, index) in headers"
               :key="`header-${String(index)}`"
-              class="divide-dividerLight divide-x border-b border-dividerLight flex"
+              class="divide-dividerLight border-dividerLight flex border-b divide-x"
             >
               <SmartAutoComplete
                 :placeholder="`${t('count.header', { count: index + 1 })}`"
@@ -135,7 +137,7 @@
                   px-4
                   truncate
                 "
-                class="flex-1 !flex"
+                class="!flex flex-1"
                 @input="
                   updateRequestHeader(index, {
                     key: $event,
@@ -145,7 +147,7 @@
                 "
               />
               <input
-                class="bg-transparent flex flex-1 py-2 px-4"
+                class="flex flex-1 px-4 py-2 bg-transparent"
                 :placeholder="`${t('count.value', { count: index + 1 })}`"
                 :name="`value ${String(index)}`"
                 :value="header.value"
@@ -197,15 +199,15 @@
             </div>
             <div
               v-if="headers.length === 0"
-              class="flex flex-col text-secondaryLight p-4 items-center justify-center"
+              class="text-secondaryLight flex flex-col items-center justify-center p-4"
             >
               <img
                 :src="`/images/states/${$colorMode.value}/add_category.svg`"
                 loading="lazy"
-                class="flex-col object-contain object-center h-16 my-4 w-16 inline-flex"
+                class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
                 :alt="`${t('empty.headers')}`"
               />
-              <span class="text-center pb-4">
+              <span class="pb-4 text-center">
                 {{ t("empty.headers") }}
               </span>
               <ButtonSecondary
@@ -233,7 +235,6 @@
 import { onMounted, ref, watch } from "@nuxtjs/composition-api"
 import clone from "lodash/clone"
 import * as gql from "graphql"
-import { GQLHeader, makeGQLRequest } from "@hoppscotch/data"
 import { copyToClipboard } from "~/helpers/utils/clipboard"
 import {
   useNuxt,
@@ -261,6 +262,7 @@ import { GQLConnection } from "~/helpers/GQLConnection"
 import { makeGQLHistoryEntry, addGraphqlHistoryEntry } from "~/newstore/history"
 import { logHoppRequestRunToAnalytics } from "~/helpers/fb/analytics"
 import { getCurrentStrategyID } from "~/helpers/network"
+import { GQLHeader, makeGQLRequest } from "~/helpers/types/HoppGQLRequest"
 import { useCodemirror } from "~/helpers/editor/codemirror"
 import jsonLinter from "~/helpers/editor/linting/json"
 import { createGQLQueryLinter } from "~/helpers/editor/linting/gqlQuery"

packages/hoppscotch-app/components/graphql/Response.vue

@@ -2,16 +2,16 @@
   <AppSection ref="response" label="response">
     <div
       v-if="responseString === 'loading'"
-      class="flex flex-col p-4 items-center justify-center"
+      class="flex flex-col items-center justify-center p-4"
     >
       <SmartSpinner class="my-4" />
       <span class="text-secondaryLight">{{ t("state.loading") }}</span>
     </div>
     <div v-else-if="responseString">
       <div
-        class="bg-primary border-b border-dividerLight flex flex-1 pl-4 top-0 z-10 sticky items-center justify-between"
+        class="bg-primary border-dividerLight sticky top-0 z-10 flex items-center justify-between flex-1 pl-4 border-b"
       >
-        <label class="font-semibold text-secondaryLight">
+        <label class="text-secondaryLight font-semibold">
           {{ t("response.title") }}
         </label>
         <div class="flex">
@@ -19,7 +19,7 @@
             v-tippy="{ theme: 'tooltip' }"
             :title="t('state.linewrap')"
             :class="{ '!text-accent': linewrapEnabled }"
-            svg="wrap-text"
+            svg="corner-down-left"
             @click.native.prevent="linewrapEnabled = !linewrapEnabled"
           />
           <ButtonSecondary
@@ -42,14 +42,14 @@
     </div>
     <div
       v-else
-      class="flex flex-col flex-1 text-secondaryLight p-4 items-center justify-center"
+      class="text-secondaryLight flex flex-col items-center justify-center flex-1 p-4"
     >
-      <div class="flex space-x-2 my-4 pb-4">
-        <div class="flex flex-col space-y-4 text-right items-end">
-          <span class="flex flex-1 items-center">
+      <div class="flex pb-4 my-4 space-x-2">
+        <div class="flex flex-col items-end space-y-4 text-right">
+          <span class="flex items-center flex-1">
             {{ t("shortcut.general.command_menu") }}
           </span>
-          <span class="flex flex-1 items-center">
+          <span class="flex items-center flex-1">
             {{ t("shortcut.general.help_menu") }}
           </span>
         </div>

packages/hoppscotch-app/components/graphql/Sidebar.vue

@@ -34,26 +34,26 @@
             subscriptionFields.length === 0 &&
             graphqlTypes.length === 0
           "
-          class="flex flex-col text-secondaryLight p-4 items-center justify-center"
+          class="text-secondaryLight flex flex-col items-center justify-center p-4"
         >
           <img
             :src="`/images/states/${$colorMode.value}/add_comment.svg`"
             loading="lazy"
-            class="flex-col object-contain object-center h-16 my-4 w-16 inline-flex"
+            class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
             :alt="`${t('empty.documentation')}`"
           />
-          <span class="text-center mb-4">
+          <span class="mb-4 text-center">
             {{ t("empty.documentation") }}
           </span>
         </div>
         <div v-else>
-          <div class="bg-primary flex top-0 z-10 sticky">
+          <div class="bg-primary sticky top-0 z-10 flex">
             <input
               v-model="graphqlFieldsFilterText"
               type="search"
               autocomplete="off"
               :placeholder="`${t('action.search')}`"
-              class="bg-transparent flex w-full p-4 py-2"
+              class="flex w-full p-4 py-2 bg-transparent"
             />
             <div class="flex">
               <ButtonSecondary
@@ -140,9 +140,9 @@
       <AppSection ref="schema" label="schema">
         <div
           v-if="schemaString"
-          class="bg-primary border-b border-dividerLight flex flex-1 pl-4 top-0 z-10 sticky items-center justify-between"
+          class="bg-primary border-dividerLight sticky top-0 z-10 flex items-center justify-between flex-1 pl-4 border-b"
         >
-          <label class="font-semibold text-secondaryLight">
+          <label class="text-secondaryLight font-semibold">
             {{ t("graphql.schema") }}
           </label>
           <div class="flex">
@@ -157,7 +157,7 @@
               v-tippy="{ theme: 'tooltip' }"
               :title="t('state.linewrap')"
               :class="{ '!text-accent': linewrapEnabled }"
-              svg="wrap-text"
+              svg="corner-down-left"
               @click.native.prevent="linewrapEnabled = !linewrapEnabled"
             />
             <ButtonSecondary
@@ -179,15 +179,15 @@
         <div v-if="schemaString" ref="schemaEditor"></div>
         <div
           v-else
-          class="flex flex-col text-secondaryLight p-4 items-center justify-center"
+          class="text-secondaryLight flex flex-col items-center justify-center p-4"
         >
           <img
             :src="`/images/states/${$colorMode.value}/blockchain.svg`"
             loading="lazy"
-            class="flex-col object-contain object-center h-16 my-4 w-16 inline-flex"
+            class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
             :alt="`${t('empty.schema')}`"
           />
-          <span class="text-center mb-4">
+          <span class="mb-4 text-center">
             {{ t("empty.schema") }}
           </span>
         </div>
@@ -200,9 +200,9 @@
 import { computed, nextTick, reactive, ref } from "@nuxtjs/composition-api"
 import { GraphQLField, GraphQLType } from "graphql"
 import { map } from "rxjs/operators"
-import { GQLHeader } from "@hoppscotch/data"
 import { useCodemirror } from "~/helpers/editor/codemirror"
 import { GQLConnection } from "~/helpers/GQLConnection"
+import { GQLHeader } from "~/helpers/types/HoppGQLRequest"
 import { copyToClipboard } from "~/helpers/utils/clipboard"
 import {
   useReadonlyStream,

packages/hoppscotch-app/components/graphql/Type.vue

@@ -6,7 +6,7 @@
       <span v-else-if="isEnum" class="text-accent">enum </span>
       {{ gqlType.name }}
     </div>
-    <div v-if="gqlType.description" class="text-secondaryLight py-2 type-desc">
+    <div v-if="gqlType.description" class="py-2 text-secondaryLight type-desc">
       {{ gqlType.description }}
     </div>
     <div v-if="interfaces.length > 0">
@@ -18,7 +18,7 @@
         <GraphqlTypeLink
           :gql-type="gqlInterface"
           :jump-type-callback="jumpTypeCallback"
-          class="border-divider border-l-2 pl-4"
+          class="pl-4 border-l-2 border-divider"
         />
       </div>
     </div>
@@ -29,7 +29,7 @@
         :key="`child-${index}`"
         :gql-type="child"
         :jump-type-callback="jumpTypeCallback"
-        class="border-divider border-l-2 pl-4"
+        class="pl-4 border-l-2 border-divider"
       />
     </div>
     <div v-if="gqlType.getFields">
@@ -37,7 +37,7 @@
       <GraphqlField
         v-for="(field, index) in gqlType.getFields()"
         :key="`field-${index}`"
-        class="border-divider border-l-2 pl-4"
+        class="pl-4 border-l-2 border-divider"
         :gql-field="field"
         :is-highlighted="isFieldHighlighted({ field })"
         :jump-type-callback="jumpTypeCallback"
@@ -48,7 +48,7 @@
       <div
         v-for="(value, index) in gqlType.getValues()"
         :key="`value-${index}`"
-        class="border-divider border-l-2 pl-4"
+        class="pl-4 border-l-2 border-divider"
         v-text="value.name"
       ></div>
     </div>

packages/hoppscotch-app/components/history/graphql/Card.vue

@@ -1,8 +1,8 @@
 <template>
-  <div class="flex flex-col group">
+  <div class="group flex flex-col">
     <div class="flex items-center">
       <span
-        class="cursor-pointer flex flex-1 min-w-0 py-2 pr-2 pl-4 transition group-hover:text-secondaryDark"
+        class="group-hover:text-secondaryDark flex flex-1 min-w-0 py-2 pl-4 pr-2 transition cursor-pointer"
         data-testid="restore_history_entry"
         @click="useEntry"
       >
@@ -15,7 +15,7 @@
         svg="trash"
         color="red"
         :title="$t('action.remove')"
-        class="hidden group-hover:inline-flex"
+        class="group-hover:inline-flex hidden"
         data-testid="delete_history_entry"
         @click.native="$emit('delete-entry')"
       />
@@ -23,7 +23,7 @@
         v-tippy="{ theme: 'tooltip' }"
         :title="expand ? $t('hide.more') : $t('show.more')"
         :svg="expand ? 'minimize-2' : 'maximize-2'"
-        class="hidden group-hover:inline-flex"
+        class="group-hover:inline-flex hidden"
         @click.native="expand = !expand"
       />
       <ButtonSecondary
@@ -40,7 +40,7 @@
       <span
         v-for="(line, index) in query"
         :key="`line-${index}`"
-        class="cursor-pointer font-mono text-secondaryLight px-4 truncate whitespace-pre"
+        class="text-secondaryLight px-4 truncate whitespace-pre cursor-pointer"
         data-testid="restore_history_entry"
         @click="useEntry"
         >{{ line }}</span
@@ -56,7 +56,7 @@ import {
   PropType,
   ref,
 } from "@nuxtjs/composition-api"
-import { makeGQLRequest } from "@hoppscotch/data"
+import { makeGQLRequest } from "~/helpers/types/HoppGQLRequest"
 import { setGQLSession } from "~/newstore/GQLSession"
 import { GQLHistoryEntry } from "~/newstore/history"
 

packages/hoppscotch-app/components/history/index.vue

@@ -1,11 +1,11 @@
 <template>
   <AppSection label="history">
-    <div class="bg-primary border-b border-dividerLight flex top-0 z-10 sticky">
+    <div class="sticky top-0 z-10 flex border-b bg-primary border-dividerLight">
       <input
         v-model="filterText"
         type="search"
         autocomplete="off"
-        class="bg-transparent flex w-full p-4 py-2"
+        class="flex w-full p-4 py-2 bg-transparent"
         :placeholder="`${$t('action.search')}`"
       />
       <div class="flex">
@@ -49,24 +49,24 @@
     </div>
     <div
       v-if="!(filteredHistory.length !== 0 || history.length === 0)"
-      class="flex flex-col text-secondaryLight p-4 items-center justify-center"
+      class="flex flex-col items-center justify-center p-4 text-secondaryLight"
     >
-      <i class="opacity-75 pb-2 material-icons">manage_search</i>
+      <i class="pb-2 opacity-75 material-icons">manage_search</i>
       <span class="text-center">
         {{ $t("state.nothing_found") }} "{{ filterText }}"
       </span>
     </div>
     <div
       v-if="history.length === 0"
-      class="flex flex-col text-secondaryLight p-4 items-center justify-center"
+      class="flex flex-col items-center justify-center p-4 text-secondaryLight"
     >
       <img
         :src="`/images/states/${$colorMode.value}/history.svg`"
         loading="lazy"
-        class="flex-col object-contain object-center h-16 my-4 w-16 inline-flex"
+        class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
         :alt="$t('empty.history')"
       />
-      <span class="text-center mb-4">
+      <span class="mb-4 text-center">
         {{ $t("empty.history") }}
       </span>
     </div>

packages/hoppscotch-app/components/history/rest/Card.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="flex items-stretch group">
+  <div class="group flex items-center">
     <span
-      class="cursor-pointer flex px-2 w-16 items-center justify-center truncate"
+      class="flex items-center justify-center w-16 px-2 truncate cursor-pointer"
       :class="entryStatus.className"
       data-testid="restore_history_entry"
       :title="`${duration}`"
@@ -10,7 +10,7 @@
       {{ entry.request.method }}
     </span>
     <span
-      class="cursor-pointer flex flex-1 min-w-0 py-2 pr-2 transition group-hover:text-secondaryDark"
+      class="group-hover:text-secondaryDark flex flex-1 min-w-0 py-2 pr-2 transition cursor-pointer"
       data-testid="restore_history_entry"
       :title="`${duration}`"
       @click="$emit('use-entry')"
@@ -24,7 +24,7 @@
       svg="trash"
       color="red"
       :title="$t('action.remove')"
-      class="hidden group-hover:inline-flex"
+      class="group-hover:inline-flex hidden"
       data-testid="delete_history_entry"
       @click.native="$emit('delete-entry')"
     />

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

@@ -1,10 +1,10 @@
 <template>
   <div>
     <div
-      class="bg-primary border-b border-dividerLight flex flex-1 top-upperSecondaryStickyFold pl-4 z-10 sticky items-center justify-between"
+      class="bg-primary border-dividerLight top-upperSecondaryStickyFold sticky z-10 flex items-center justify-between flex-1 pl-4 border-b"
     >
       <span class="flex items-center">
-        <label class="font-semibold text-secondaryLight">
+        <label class="text-secondaryLight font-semibold">
           {{ $t("authorization.type") }}
         </label>
         <tippy
@@ -17,18 +17,13 @@
           <template #trigger>
             <span class="select-wrapper">
               <ButtonSecondary
-                class="rounded-none ml-2 pr-8"
+                class="pr-8 ml-2 rounded-none"
                 :label="authName"
               />
             </span>
           </template>
           <SmartItem
             label="None"
-            :icon="
-              authName === 'None'
-                ? 'radio_button_checked'
-                : 'radio_button_unchecked'
-            "
             @click.native="
               authType = 'none'
               $refs.authTypeOptions.tippy().hide()
@@ -36,11 +31,6 @@
           />
           <SmartItem
             label="Basic Auth"
-            :icon="
-              authName === 'Basic Auth'
-                ? 'radio_button_checked'
-                : 'radio_button_unchecked'
-            "
             @click.native="
               authType = 'basic'
               $refs.authTypeOptions.tippy().hide()
@@ -48,11 +38,6 @@
           />
           <SmartItem
             label="Bearer Token"
-            :icon="
-              authName === 'Bearer'
-                ? 'radio_button_checked'
-                : 'radio_button_unchecked'
-            "
             @click.native="
               authType = 'bearer'
               $refs.authTypeOptions.tippy().hide()
@@ -60,11 +45,6 @@
           />
           <SmartItem
             label="OAuth 2.0"
-            :icon="
-              authName === 'OAuth 2.0'
-                ? 'radio_button_checked'
-                : 'radio_button_unchecked'
-            "
             @click.native="
               authType = 'oauth-2'
               $refs.authTypeOptions.tippy().hide()
@@ -103,15 +83,15 @@
     </div>
     <div
       v-if="authType === 'none'"
-      class="flex flex-col text-secondaryLight p-4 items-center justify-center"
+      class="text-secondaryLight flex flex-col items-center justify-center p-4"
     >
       <img
         :src="`/images/states/${$colorMode.value}/login.svg`"
         loading="lazy"
-        class="flex-col object-contain object-center h-16 my-4 w-16 inline-flex"
+        class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
         :alt="$t('empty.authorization')"
       />
-      <span class="text-center pb-4">
+      <span class="pb-4 text-center">
         {{ $t("empty.authorization") }}
       </span>
       <ButtonSecondary
@@ -124,16 +104,16 @@
         class="mb-4"
       />
     </div>
-    <div v-if="authType === 'basic'" class="border-b border-dividerLight flex">
-      <div class="border-r border-dividerLight w-2/3">
-        <div class="border-b border-dividerLight flex">
+    <div v-if="authType === 'basic'" class="border-dividerLight flex border-b">
+      <div class="border-dividerLight w-2/3 border-r">
+        <div class="border-dividerLight flex border-b">
           <SmartEnvInput
             v-model="basicUsername"
             :placeholder="$t('authorization.username')"
             styles="bg-transparent flex flex-1 py-1 px-4"
           />
         </div>
-        <div class="border-b border-dividerLight flex">
+        <div class="border-dividerLight flex border-b">
           <SmartEnvInput
             v-model="basicPassword"
             :placeholder="$t('authorization.password')"
@@ -142,7 +122,7 @@
         </div>
       </div>
       <div
-        class="bg-primary h-full top-upperTertiaryStickyFold min-w-46 max-w-1/3 p-4 z-9 sticky overflow-auto"
+        class="bg-primary top-upperTertiaryStickyFold min-w-46 max-w-1/3 z-9 sticky h-full p-4 overflow-auto"
       >
         <div class="p-2">
           <div class="text-secondaryLight pb-2">
@@ -157,9 +137,9 @@
         </div>
       </div>
     </div>
-    <div v-if="authType === 'bearer'" class="border-b border-dividerLight flex">
-      <div class="border-r border-dividerLight w-2/3">
-        <div class="border-b border-dividerLight flex">
+    <div v-if="authType === 'bearer'" class="border-dividerLight flex border-b">
+      <div class="border-dividerLight w-2/3 border-r">
+        <div class="border-dividerLight flex border-b">
           <SmartEnvInput
             v-model="bearerToken"
             placeholder="Token"
@@ -168,7 +148,7 @@
         </div>
       </div>
       <div
-        class="bg-primary h-full top-upperTertiaryStickyFold min-w-46 max-w-1/3 p-4 z-9 sticky overflow-auto"
+        class="bg-primary top-upperTertiaryStickyFold min-w-46 max-w-1/3 z-9 sticky h-full p-4 overflow-auto"
       >
         <div class="p-2">
           <div class="text-secondaryLight pb-2">
@@ -185,10 +165,10 @@
     </div>
     <div
       v-if="authType === 'oauth-2'"
-      class="border-b border-dividerLight flex"
+      class="border-dividerLight flex border-b"
     >
-      <div class="border-r border-dividerLight w-2/3">
-        <div class="border-b border-dividerLight flex">
+      <div class="border-dividerLight w-2/3 border-r">
+        <div class="border-dividerLight flex border-b">
           <SmartEnvInput
             v-model="oauth2Token"
             placeholder="Token"
@@ -198,7 +178,7 @@
         <HttpOAuth2Authorization />
       </div>
       <div
-        class="bg-primary h-full top-upperTertiaryStickyFold min-w-46 max-w-1/3 p-4 z-9 sticky overflow-auto"
+        class="bg-primary top-upperTertiaryStickyFold min-w-46 max-w-1/3 z-9 sticky h-full p-4 overflow-auto"
       >
         <div class="p-2">
           <div class="text-secondaryLight pb-2">
@@ -222,7 +202,7 @@ import {
   HoppRESTAuthBasic,
   HoppRESTAuthBearer,
   HoppRESTAuthOAuth2,
-} from "@hoppscotch/data"
+} from "~/helpers/types/HoppRESTAuth"
 import { pluckRef, useStream } from "~/helpers/utils/composables"
 import { restAuth$, setRESTAuth } from "~/newstore/RESTSession"
 import { useSetting } from "~/newstore/settings"

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

@@ -1,10 +1,10 @@
 <template>
   <div>
     <div
-      class="bg-primary border-b border-dividerLight flex flex-1 top-upperSecondaryStickyFold pl-4 z-10 sticky items-center justify-between"
+      class="bg-primary border-dividerLight top-upperSecondaryStickyFold sticky z-10 flex items-center justify-between flex-1 pl-4 border-b"
     >
       <span class="flex items-center">
-        <label class="font-semibold text-secondaryLight">
+        <label class="text-secondaryLight font-semibold">
           {{ $t("request.content_type") }}
         </label>
         <tippy
@@ -18,7 +18,7 @@
             <span class="select-wrapper">
               <ButtonSecondary
                 :label="contentType || $t('state.none').toLowerCase()"
-                class="rounded-none ml-2 pr-8"
+                class="pr-8 ml-2 rounded-none"
               />
             </span>
           </template>
@@ -53,15 +53,15 @@
     <HttpRawBody v-else-if="contentType !== null" :content-type="contentType" />
     <div
       v-if="contentType == null"
-      class="flex flex-col text-secondaryLight p-4 items-center justify-center"
+      class="text-secondaryLight flex flex-col items-center justify-center p-4"
     >
       <img
         :src="`/images/states/${$colorMode.value}/upload_single_file.svg`"
         loading="lazy"
-        class="flex-col object-contain object-center h-16 my-4 w-16 inline-flex"
+        class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
         :alt="$t('empty.body')"
       />
-      <span class="text-center pb-4">
+      <span class="pb-4 text-center">
         {{ $t("empty.body") }}
       </span>
       <ButtonSecondary

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

@@ -1,9 +1,9 @@
 <template>
   <AppSection label="bodyParameters">
     <div
-      class="bg-primary border-b border-dividerLight flex flex-1 top-upperTertiaryStickyFold pl-4 z-10 sticky items-center justify-between"
+      class="bg-primary border-dividerLight top-upperTertiaryStickyFold sticky z-10 flex items-center justify-between flex-1 pl-4 border-b"
     >
-      <label class="font-semibold text-secondaryLight">
+      <label class="text-secondaryLight font-semibold">
         {{ $t("request.body") }}
       </label>
       <div class="flex">
@@ -31,7 +31,7 @@
     <div
       v-for="(param, index) in bodyParams"
       :key="`param-${index}`"
-      class="divide-dividerLight divide-x border-b border-dividerLight flex"
+      class="divide-dividerLight border-dividerLight flex border-b divide-x"
     >
       <SmartEnvInput
         v-model="param.key"
@@ -53,7 +53,7 @@
         "
       />
       <div v-if="param.isFile" class="file-chips-container hide-scrollbar">
-        <div class="space-x-2 file-chips-wrapper">
+        <div class="file-chips-wrapper space-x-2">
           <SmartDeletableChip
             v-for="(file, fileIndex) in param.value"
             :key="`param-${index}-file-${fileIndex}`"
@@ -141,15 +141,15 @@
     </div>
     <div
       v-if="bodyParams.length === 0"
-      class="flex flex-col text-secondaryLight p-4 items-center justify-center"
+      class="text-secondaryLight flex flex-col items-center justify-center p-4"
     >
       <img
         :src="`/images/states/${$colorMode.value}/upload_single_file.svg`"
         loading="lazy"
-        class="flex-col object-contain object-center h-16 my-4 w-16 inline-flex"
+        class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
         :alt="$t('empty.body')"
       />
-      <span class="text-center pb-4">
+      <span class="pb-4 text-center">
         {{ $t("empty.body") }}
       </span>
       <ButtonSecondary
@@ -165,7 +165,7 @@
 
 <script lang="ts">
 import { defineComponent, onMounted, Ref, watch } from "@nuxtjs/composition-api"
-import { FormDataKeyValue } from "@hoppscotch/data"
+import { FormDataKeyValue } from "~/helpers/types/HoppRESTRequest"
 import { pluckRef } from "~/helpers/utils/composables"
 import {
   addFormDataEntry,

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

@@ -33,7 +33,7 @@
             "
           />
         </tippy>
-        <div class="flex flex-1 justify-between">
+        <div class="flex justify-between flex-1">
           <label for="generatedCode" class="p-4">
             {{ t("request.generated_code") }}
           </label>
@@ -41,7 +41,7 @@
         <div
           v-if="codegenType"
           ref="generatedCode"
-          class="border border-dividerLight rounded"
+          class="border rounded border-dividerLight"
         ></div>
       </div>
     </template>

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

@@ -1,9 +1,9 @@
 <template>
   <AppSection label="headers">
     <div
-      class="bg-primary border-b border-dividerLight flex flex-1 top-upperSecondaryStickyFold pl-4 z-10 sticky items-center justify-between"
+      class="bg-primary border-dividerLight top-upperSecondaryStickyFold sticky z-10 flex items-center justify-between flex-1 pl-4 border-b"
     >
-      <label class="font-semibold text-secondaryLight">
+      <label class="text-secondaryLight font-semibold">
         {{ t("request.header_list") }}
       </label>
       <div class="flex">
@@ -41,7 +41,7 @@
       <div
         v-for="(header, index) in headers$"
         :key="`header-${index}`"
-        class="divide-dividerLight divide-x border-b border-dividerLight flex"
+        class="divide-dividerLight border-dividerLight flex border-b divide-x"
       >
         <SmartAutoComplete
           :placeholder="`${t('count.header', { count: index + 1 })}`"
@@ -57,7 +57,7 @@
             px-4
             truncate
           "
-          class="flex-1 !flex"
+          class="!flex flex-1"
           @input="
             updateHeader(index, {
               key: $event,
@@ -125,15 +125,15 @@
       </div>
       <div
         v-if="headers$.length === 0"
-        class="flex flex-col text-secondaryLight p-4 items-center justify-center"
+        class="text-secondaryLight flex flex-col items-center justify-center p-4"
       >
         <img
           :src="`/images/states/${$colorMode.value}/add_category.svg`"
           loading="lazy"
-          class="flex-col object-contain object-center h-16 my-4 w-16 inline-flex"
+          class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
           :alt="`${t('empty.headers')}`"
         />
-        <span class="text-center pb-4">
+        <span class="pb-4 text-center">
           {{ t("empty.headers") }}
         </span>
         <ButtonSecondary
@@ -150,7 +150,6 @@
 
 <script setup lang="ts">
 import { onBeforeUpdate, ref, watch } from "@nuxtjs/composition-api"
-import { HoppRESTHeader } from "@hoppscotch/data"
 import { useCodemirror } from "~/helpers/editor/codemirror"
 import {
   addRESTHeader,
@@ -166,6 +165,7 @@ import {
   useI18n,
   useToast,
 } from "~/helpers/utils/composables"
+import { HoppRESTHeader } from "~/helpers/types/HoppRESTRequest"
 
 const t = useI18n()
 

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

@@ -2,7 +2,7 @@
   <SmartModal v-if="show" :title="`${t('import.curl')}`" @close="hideModal">
     <template #body>
       <div class="flex flex-col px-2">
-        <div ref="curlEditor" class="border border-dividerLight rounded"></div>
+        <div ref="curlEditor" class="border rounded border-dividerLight"></div>
       </div>
     </template>
     <template #footer>
@@ -22,13 +22,13 @@
 
 <script setup lang="ts">
 import { ref } from "@nuxtjs/composition-api"
+import parseCurlCommand from "~/helpers/curlparser"
+import { useCodemirror } from "~/helpers/editor/codemirror"
 import {
   HoppRESTHeader,
   HoppRESTParam,
   makeRESTRequest,
-} from "@hoppscotch/data"
-import parseCurlCommand from "~/helpers/curlparser"
-import { useCodemirror } from "~/helpers/editor/codemirror"
+} from "~/helpers/types/HoppRESTRequest"
 import { setRESTRequest } from "~/newstore/RESTSession"
 import { useI18n, useToast } from "~/helpers/utils/composables"
 

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

@@ -1,46 +1,46 @@
 <template>
   <div class="flex flex-col">
-    <div class="border-b border-dividerLight flex">
+    <div class="flex border-b border-dividerLight">
       <input
         id="oidcDiscoveryURL"
         v-model="oidcDiscoveryURL"
-        class="bg-transparent flex flex-1 py-2 px-4"
+        class="flex flex-1 px-4 py-2 bg-transparent"
         placeholder="OpenID Connect Discovery URL"
         name="oidcDiscoveryURL"
       />
     </div>
-    <div class="border-b border-dividerLight flex">
+    <div class="flex border-b border-dividerLight">
       <input
         id="authURL"
         v-model="authURL"
-        class="bg-transparent flex flex-1 py-2 px-4"
+        class="flex flex-1 px-4 py-2 bg-transparent"
         placeholder="Authentication URL"
         name="authURL"
       />
     </div>
-    <div class="border-b border-dividerLight flex">
+    <div class="flex border-b border-dividerLight">
       <input
         id="accessTokenURL"
         v-model="accessTokenURL"
-        class="bg-transparent flex flex-1 py-2 px-4"
+        class="flex flex-1 px-4 py-2 bg-transparent"
         placeholder="Access Token URL"
         name="accessTokenURL"
       />
     </div>
-    <div class="border-b border-dividerLight flex">
+    <div class="flex border-b border-dividerLight">
       <input
         id="clientID"
         v-model="clientID"
-        class="bg-transparent flex flex-1 py-2 px-4"
+        class="flex flex-1 px-4 py-2 bg-transparent"
         placeholder="Client ID"
         name="clientID"
       />
     </div>
-    <div class="border-b border-dividerLight flex">
+    <div class="flex border-b border-dividerLight">
       <input
         id="scope"
         v-model="scope"
-        class="bg-transparent flex flex-1 py-2 px-4"
+        class="flex flex-1 px-4 py-2 bg-transparent"
         placeholder="Scope"
         name="scope"
       />
@@ -57,13 +57,13 @@
 
 <script lang="ts">
 import { Ref } from "@nuxtjs/composition-api"
-import { HoppRESTAuthOAuth2 } from "@hoppscotch/data"
 import {
   pluckRef,
   useI18n,
   useStream,
   useToast,
 } from "~/helpers/utils/composables"
+import { HoppRESTAuthOAuth2 } from "~/helpers/types/HoppRESTAuth"
 import { restAuth$, setRESTAuth } from "~/newstore/RESTSession"
 import { tokenRequest } from "~/helpers/oauth"
 
@@ -124,7 +124,6 @@ export default {
       clientID,
       scope,
       handleAccessTokenRequest,
-      t,
     }
   },
 }

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

@@ -1,9 +1,9 @@
 <template>
   <AppSection label="parameters">
     <div
-      class="bg-primary border-b border-dividerLight flex flex-1 top-upperSecondaryStickyFold pl-4 z-10 sticky items-center justify-between"
+      class="bg-primary border-dividerLight top-upperSecondaryStickyFold sticky z-10 flex items-center justify-between flex-1 pl-4 border-b"
     >
-      <label class="font-semibold text-secondaryLight">
+      <label class="text-secondaryLight font-semibold">
         {{ t("request.parameter_list") }}
       </label>
       <div class="flex">
@@ -41,7 +41,7 @@
       <div
         v-for="(param, index) in params$"
         :key="`param-${index}`"
-        class="divide-dividerLight divide-x border-b border-dividerLight flex"
+        class="divide-dividerLight border-dividerLight flex border-b divide-x"
       >
         <SmartEnvInput
           v-model="param.key"
@@ -118,15 +118,15 @@
       </div>
       <div
         v-if="params$.length === 0"
-        class="flex flex-col text-secondaryLight p-4 items-center justify-center"
+        class="text-secondaryLight flex flex-col items-center justify-center p-4"
       >
         <img
           :src="`/images/states/${$colorMode.value}/add_files.svg`"
           loading="lazy"
-          class="flex-col object-contain object-center h-16 my-4 w-16 inline-flex"
+          class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
           :alt="`${t('empty.parameters')}`"
         />
-        <span class="text-center pb-4">
+        <span class="pb-4 text-center">
           {{ t("empty.parameters") }}
         </span>
         <ButtonSecondary
@@ -143,8 +143,8 @@
 
 <script setup lang="ts">
 import { ref, watch, onBeforeUpdate } from "@nuxtjs/composition-api"
-import { HoppRESTParam } from "@hoppscotch/data"
 import { useCodemirror } from "~/helpers/editor/codemirror"
+import { HoppRESTParam } from "~/helpers/types/HoppRESTRequest"
 import {
   useReadonlyStream,
   useI18n,

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

@@ -1,9 +1,9 @@
 <template>
   <AppSection id="script" :label="`${t('preRequest.script')}`">
     <div
-      class="bg-primary border-b border-dividerLight flex flex-1 top-upperSecondaryStickyFold pl-4 z-10 sticky items-center justify-between"
+      class="bg-primary border-dividerLight top-upperSecondaryStickyFold sticky z-10 flex items-center justify-between flex-1 pl-4 border-b"
     >
-      <label class="font-semibold text-secondaryLight">
+      <label class="text-secondaryLight font-semibold">
         {{ t("preRequest.javascript_code") }}
       </label>
       <div class="flex">
@@ -18,7 +18,7 @@
           v-tippy="{ theme: 'tooltip' }"
           :title="t('state.linewrap')"
           :class="{ '!text-accent': linewrapEnabled }"
-          svg="wrap-text"
+          svg="corner-down-left"
           @click.native.prevent="linewrapEnabled = !linewrapEnabled"
         />
         <ButtonSecondary
@@ -29,12 +29,12 @@
         />
       </div>
     </div>
-    <div class="border-b border-dividerLight flex">
-      <div class="border-r border-dividerLight w-2/3">
+    <div class="border-dividerLight flex border-b">
+      <div class="border-dividerLight w-2/3 border-r">
         <div ref="preRrequestEditor"></div>
       </div>
       <div
-        class="bg-primary h-full top-upperTertiaryStickyFold min-w-46 max-w-1/3 p-4 z-9 sticky overflow-auto"
+        class="bg-primary top-upperTertiaryStickyFold min-w-46 max-w-1/3 z-9 sticky h-full p-4 overflow-auto"
       >
         <div class="text-secondaryLight pb-2">
           {{ t("helpers.pre_request_script") }}
@@ -44,7 +44,7 @@
           to="https://docs.hoppscotch.io/features/pre-request-script"
           blank
         />
-        <h4 class="font-bold text-secondaryLight pt-6">
+        <h4 class="text-secondaryLight pt-6 font-bold">
           {{ t("preRequest.snippets") }}
         </h4>
         <div class="flex flex-col pt-4">

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

@@ -1,9 +1,9 @@
 <template>
   <div>
     <div
-      class="bg-primary border-b border-dividerLight flex flex-1 top-upperTertiaryStickyFold pl-4 z-10 sticky items-center justify-between"
+      class="bg-primary border-dividerLight top-upperTertiaryStickyFold sticky z-10 flex items-center justify-between flex-1 pl-4 border-b"
     >
-      <label class="font-semibold text-secondaryLight">
+      <label class="text-secondaryLight font-semibold">
         {{ t("request.raw_body") }}
       </label>
       <div class="flex">
@@ -18,7 +18,7 @@
           v-tippy="{ theme: 'tooltip' }"
           :title="t('state.linewrap')"
           :class="{ '!text-accent': linewrapEnabled }"
-          svg="wrap-text"
+          svg="corner-down-left"
           @click.native.prevent="linewrapEnabled = !linewrapEnabled"
         />
         <ButtonSecondary

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

@@ -1,9 +1,9 @@
 <template>
   <div
-    class="bg-primary flex space-x-2 p-4 top-0 z-10 sticky overflow-x-auto hide-scrollbar"
+    class="bg-primary hide-scrollbar sticky top-0 z-10 flex p-4 space-x-2 overflow-x-auto"
   >
     <div class="flex flex-1">
-      <div class="flex relative">
+      <div class="relative flex">
         <label for="method">
           <tippy
             ref="methodOptions"
@@ -16,7 +16,7 @@
               <span class="select-wrapper">
                 <input
                   id="method"
-                  class="bg-primaryLight border border-divider rounded-l cursor-pointer flex font-semibold text-secondaryDark py-2 px-4 w-26 hover:border-dividerDark focus-visible:bg-transparent focus-visible:border-dividerDark"
+                  class="bg-primaryLight border-divider text-secondaryDark w-26 hover:border-dividerDark focus-visible:bg-transparent focus-visible:border-dividerDark flex px-4 py-2 font-semibold border rounded-l cursor-pointer"
                   :value="newMethod"
                   :readonly="!isCustomMethod"
                   :placeholder="`${t('request.method')}`"
@@ -58,7 +58,7 @@
     <div class="flex">
       <ButtonPrimary
         id="send"
-        class="rounded-r-none flex-1 min-w-20"
+        class="min-w-20 flex-1 rounded-r-none"
         :label="`${!loading ? t('action.send') : t('action.cancel')}`"
         @click.native="!loading ? newSendRequest() : cancelRequest()"
       />
@@ -107,7 +107,7 @@
         </tippy>
       </span>
       <ButtonSecondary
-        class="rounded rounded-r-none ml-2"
+        class="ml-2 rounded rounded-r-none"
         :label="
           windowInnerWidth.x.value >= 768 && COLUMN_LAYOUT
             ? `${t('request.save')}`
@@ -139,7 +139,7 @@
             name="request-name"
             type="text"
             autocomplete="off"
-            class="mb-2 input"
+            class="input mb-2"
             @keyup.enter="saveOptions.tippy().hide()"
           />
           <SmartItem
@@ -185,7 +185,7 @@
 
 <script setup lang="ts">
 import { computed, ref, watch } from "@nuxtjs/composition-api"
-import { isLeft, isRight } from "fp-ts/lib/Either"
+import { isRight } from "fp-ts/lib/Either"
 import * as E from "fp-ts/Either"
 import {
   updateRESTResponse,
@@ -198,7 +198,6 @@ import {
   getRESTSaveContext,
   getRESTRequest,
   restRequest$,
-  setRESTSaveContext,
 } from "~/newstore/RESTSession"
 import { editRESTRequest } from "~/newstore/collections"
 import { runRESTRequest$ } from "~/helpers/RequestRunner"
@@ -274,6 +273,7 @@ const newSendRequest = async () => {
   // Double calling is because the function returns a TaskEither than should be executed
   const streamResult = await runRESTRequest$()()
 
+  // TODO: What if stream fetching failed (script execution errors ?) (isLeft)
   if (isRight(streamResult)) {
     subscribeToStream(
       streamResult.right,
@@ -291,19 +291,6 @@ const newSendRequest = async () => {
         loading.value = false
       }
     )
-  } else if (isLeft(streamResult)) {
-    loading.value = false
-    toast.error(`${t("error.script_fail")}`)
-    let error: Error
-    if (typeof streamResult.left === "string") {
-      error = { name: "RequestFailure", message: streamResult.left }
-    } else {
-      error = streamResult.left
-    }
-    updateRESTResponse({
-      type: "script_fail",
-      error,
-    })
   }
 }
 
@@ -419,17 +406,8 @@ const saveRequest = () => {
   }
 
   if (saveCtx.originLocation === "user-collection") {
-    try {
-      editRESTRequest(
-        saveCtx.folderPath,
-        saveCtx.requestIndex,
-        getRESTRequest()
-      )
-      toast.success(`${t("request.saved")}`)
-    } catch (e) {
-      setRESTSaveContext(null)
-      saveRequest()
-    }
+    editRESTRequest(saveCtx.folderPath, saveCtx.requestIndex, getRESTRequest())
+    toast.success(`${t("request.saved")}`)
   } else if (saveCtx.originLocation === "team-collection") {
     const req = getRESTRequest()
 

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

@@ -1,23 +1,23 @@
 <template>
   <div
-    class="bg-primary flex p-4 top-0 z-10 sticky items-center overflow-auto hide-scrollbar whitespace-nowrap"
+    class="bg-primary hide-scrollbar whitespace-nowrap sticky top-0 z-10 flex items-center p-4 overflow-auto"
   >
     <div
       v-if="response == null"
-      class="flex flex-col flex-1 text-secondaryLight items-center justify-center"
+      class="text-secondaryLight flex flex-col items-center justify-center flex-1"
     >
-      <div class="flex space-x-2 my-4 pb-4">
-        <div class="flex flex-col space-y-4 text-right items-end">
-          <span class="flex flex-1 items-center">
+      <div class="flex pb-4 my-4 space-x-2">
+        <div class="flex flex-col items-end space-y-4 text-right">
+          <span class="flex items-center flex-1">
             {{ t("shortcut.request.send_request") }}
           </span>
-          <span class="flex flex-1 items-center">
+          <span class="flex items-center flex-1">
             {{ t("shortcut.general.show_all") }}
           </span>
-          <span class="flex flex-1 items-center">
+          <span class="flex items-center flex-1">
             {{ t("shortcut.general.command_menu") }}
           </span>
-          <span class="flex flex-1 items-center">
+          <span class="flex items-center flex-1">
             {{ t("shortcut.general.help_menu") }}
           </span>
         </div>
@@ -57,53 +57,26 @@
       </div>
       <div
         v-if="response.type === 'network_fail'"
-        class="flex flex-col flex-1 p-4 items-center justify-center"
+        class="flex flex-col items-center justify-center flex-1 p-4"
       >
         <img
           :src="`/images/states/${$colorMode.value}/youre_lost.svg`"
           loading="lazy"
-          class="flex-col object-contain object-center h-32 my-4 w-32 inline-flex"
+          class="inline-flex flex-col object-contain object-center w-32 h-32 my-4"
           :alt="`${t('error.network_fail')}`"
         />
-        <span class="font-semibold text-center mb-2">
+        <span class="mb-2 font-semibold text-center">
           {{ t("error.network_fail") }}
         </span>
-        <span
-          class="max-w-sm text-secondaryLight text-center mb-4 whitespace-normal"
-        >
+        <span class="text-secondaryLight max-w-sm mb-4 text-center">
           {{ t("helpers.network_fail") }}
         </span>
         <AppInterceptor />
       </div>
-      <div
-        v-if="response.type === 'script_fail'"
-        class="flex flex-col flex-1 p-4 items-center justify-center"
-      >
-        <img
-          :src="`/images/states/${$colorMode.value}/youre_lost.svg`"
-          loading="lazy"
-          class="flex-col object-contain object-center h-32 my-4 w-32 inline-flex"
-          :alt="`${t('error.script_fail')}`"
-        />
-        <span class="font-semibold text-center mb-2">
-          {{ t("error.script_fail") }}
-        </span>
-        <span
-          class="max-w-sm text-secondaryLight text-center mb-4 whitespace-normal"
-        >
-          {{ t("helpers.script_fail") }}
-        </span>
-        <div
-          class="bg-primaryLight rounded font-mono w-full py-2 px-4 text-red-400 overflow-auto whitespace-normal"
-        >
-          {{ response.error.name }}: {{ response.error.message }}<br />
-          {{ response.error.stack }}
-        </div>
-      </div>
       <div
         v-if="response.type === 'success' || 'fail'"
         :class="statusCategory.className"
-        class="font-semibold space-x-4"
+        class="space-x-4 font-semibold"
       >
         <span v-if="response.statusCode">
           <span class="text-secondary"> {{ t("response.status") }}: </span>
@@ -138,8 +111,7 @@ const props = defineProps<{
 const statusCategory = computed(() => {
   if (
     props.response.type === "loading" ||
-    props.response.type === "network_fail" ||
-    props.response.type === "script_fail"
+    props.response.type === "network_fail"
   )
     return ""
   return findStatusGroup(props.response.statusCode)

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

@@ -7,9 +7,9 @@
       "
     >
       <div
-        class="bg-primary border-b border-dividerLight flex flex-1 top-lowerSecondaryStickyFold pl-4 z-10 sticky items-center justify-between"
+        class="bg-primary border-dividerLight top-lowerSecondaryStickyFold sticky z-10 flex items-center justify-between flex-1 pl-4 border-b"
       >
-        <label class="font-semibold text-secondaryLight">
+        <label class="text-secondaryLight font-semibold">
           {{ t("test.report") }}
         </label>
         <ButtonSecondary
@@ -19,7 +19,7 @@
           @click.native="clearContent()"
         />
       </div>
-      <div class="divide-dividerLight border-b border-dividerLight divide-y-4">
+      <div class="divide-dividerLight border-dividerLight border-b divide-y-4">
         <div v-if="testResults.tests" class="divide-dividerLight divide-y-4">
           <HttpTestResultEntry
             v-for="(result, index) in testResults.tests"
@@ -38,10 +38,10 @@
           <div
             v-for="(result, index) in testResults.expectResults"
             :key="`result-${index}`"
-            class="flex py-2 px-4 items-center"
+            class="flex items-center px-4 py-2"
           >
             <i
-              class="mr-4 material-icons"
+              class="material-icons mr-4"
               :class="
                 result.status === 'pass' ? 'text-green-500' : 'text-red-500'
               "
@@ -64,18 +64,18 @@
     </div>
     <div
       v-else
-      class="flex flex-col text-secondaryLight p-4 items-center justify-center"
+      class="text-secondaryLight flex flex-col items-center justify-center p-4"
     >
       <img
         :src="`/images/states/${$colorMode.value}/validation.svg`"
         loading="lazy"
-        class="flex-col object-contain object-center h-16 my-4 w-16 inline-flex"
+        class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
         :alt="`${t('empty.tests')}`"
       />
-      <span class="text-center pb-2">
+      <span class="pb-2 text-center">
         {{ t("empty.tests") }}
       </span>
-      <span class="text-center pb-4">
+      <span class="pb-4 text-center">
         {{ t("helpers.tests") }}
       </span>
       <ButtonSecondary

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

@@ -2,7 +2,7 @@
   <div>
     <span
       v-if="testResults.description"
-      class="flex font-bold text-secondaryDark py-2 px-4 items-center"
+      class="flex items-center px-4 py-2 font-bold text-secondaryDark"
     >
       {{ testResults.description }}
     </span>
@@ -14,7 +14,7 @@
       <div
         v-for="(result, index) in testResults.expectResults"
         :key="`result-${index}`"
-        class="flex py-2 px-4 items-center"
+        class="flex items-center px-4 py-2"
       >
         <i
           class="mr-4 material-icons"

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex p-2 items-center">
+  <div class="flex items-center p-2">
     <SmartProgressRing
       class="text-red-500"
       :radius="16"

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

@@ -1,9 +1,9 @@
 <template>
   <AppSection id="script" :label="`${t('test.script')}`">
     <div
-      class="bg-primary border-b border-dividerLight flex flex-1 top-upperSecondaryStickyFold pl-4 z-10 sticky items-center justify-between"
+      class="bg-primary border-dividerLight top-upperSecondaryStickyFold sticky z-10 flex items-center justify-between flex-1 pl-4 border-b"
     >
-      <label class="font-semibold text-secondaryLight">
+      <label class="text-secondaryLight font-semibold">
         {{ t("test.javascript_code") }}
       </label>
       <div class="flex">
@@ -18,7 +18,7 @@
           v-tippy="{ theme: 'tooltip' }"
           :title="t('state.linewrap')"
           :class="{ '!text-accent': linewrapEnabled }"
-          svg="wrap-text"
+          svg="corner-down-left"
           @click.native.prevent="linewrapEnabled = !linewrapEnabled"
         />
         <ButtonSecondary
@@ -29,12 +29,12 @@
         />
       </div>
     </div>
-    <div class="border-b border-dividerLight flex">
-      <div class="border-r border-dividerLight w-2/3">
+    <div class="border-dividerLight flex border-b">
+      <div class="border-dividerLight w-2/3 border-r">
         <div ref="testScriptEditor"></div>
       </div>
       <div
-        class="bg-primary h-full top-upperTertiaryStickyFold min-w-46 max-w-1/3 p-4 z-9 sticky overflow-auto"
+        class="bg-primary top-upperTertiaryStickyFold min-w-46 max-w-1/3 z-9 sticky h-full p-4 overflow-auto"
       >
         <div class="text-secondaryLight pb-2">
           {{ t("helpers.post_request_tests") }}
@@ -44,7 +44,7 @@
           to="https://docs.hoppscotch.io/features/tests"
           blank
         />
-        <h4 class="font-bold text-secondaryLight pt-6">
+        <h4 class="text-secondaryLight pt-6 font-bold">
           {{ t("test.snippets") }}
         </h4>
         <div class="flex flex-col pt-4">

packages/hoppscotch-app/components/lenses/HeadersRenderer.vue

@@ -1,9 +1,9 @@
 <template>
   <div>
     <div
-      class="bg-primary border-b border-dividerLight flex flex-1 top-lowerSecondaryStickyFold pl-4 z-10 sticky items-center justify-between"
+      class="bg-primary border-dividerLight top-lowerSecondaryStickyFold sticky z-10 flex items-center justify-between flex-1 pl-4 border-b"
     >
-      <label class="font-semibold text-secondaryLight">
+      <label class="text-secondaryLight font-semibold">
         {{ t("request.header_list") }}
       </label>
       <div class="flex">
@@ -20,19 +20,19 @@
     <div
       v-for="(header, index) in headers"
       :key="`header-${index}`"
-      class="divide-dividerLight divide-x border-b border-dividerLight flex group"
+      class="divide-dividerLight border-dividerLight group flex border-b divide-x"
     >
       <span
-        class="flex flex-1 min-w-0 py-2 px-4 transition group-hover:text-secondaryDark"
+        class="group-hover:text-secondaryDark flex flex-1 min-w-0 px-4 py-2 transition"
       >
-        <span class="rounded-sm truncate select-all">
+        <span class="truncate rounded-sm select-all">
           {{ header.key }}
         </span>
       </span>
       <span
-        class="flex flex-1 min-w-0 py-2 px-4 transition group-hover:text-secondaryDark"
+        class="group-hover:text-secondaryDark flex flex-1 min-w-0 px-4 py-2 transition"
       >
-        <span class="rounded-sm truncate select-all">
+        <span class="truncate rounded-sm select-all">
           {{ header.value }}
         </span>
       </span>
@@ -42,7 +42,7 @@
 
 <script setup lang="ts">
 import { ref } from "@nuxtjs/composition-api"
-import { HoppRESTHeader } from "@hoppscotch/data"
+import { HoppRESTHeader } from "~/helpers/types/HoppRESTRequest"
 import { copyToClipboard } from "~/helpers/utils/clipboard"
 import { useI18n, useToast } from "~/helpers/utils/composables"
 

packages/hoppscotch-app/components/lenses/renderers/HTMLLensRenderer.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="flex flex-col flex-1">
     <div
-      class="bg-primary border-b border-dividerLight flex flex-1 top-lowerSecondaryStickyFold pl-4 z-10 sticky items-center justify-between"
+      class="bg-primary border-dividerLight top-lowerSecondaryStickyFold sticky z-10 flex items-center justify-between flex-1 pl-4 border-b"
     >
-      <label class="font-semibold text-secondaryLight">
+      <label class="text-secondaryLight font-semibold">
         {{ t("response.body") }}
       </label>
       <div class="flex">
@@ -12,7 +12,7 @@
           v-tippy="{ theme: 'tooltip' }"
           :title="t('state.linewrap')"
           :class="{ '!text-accent': linewrapEnabled }"
-          svg="wrap-text"
+          svg="corner-down-left"
           @click.native.prevent="linewrapEnabled = !linewrapEnabled"
         />
         <ButtonSecondary

packages/hoppscotch-app/components/lenses/renderers/ImageLensRenderer.vue

@@ -1,9 +1,9 @@
 <template>
   <div>
     <div
-      class="bg-primary border-b border-dividerLight flex flex-1 top-lowerSecondaryStickyFold pl-4 z-10 sticky items-center justify-between"
+      class="bg-primary border-dividerLight top-lowerSecondaryStickyFold sticky z-10 flex items-center justify-between flex-1 pl-4 border-b"
     >
-      <label class="font-semibold text-secondaryLight">
+      <label class="text-secondaryLight font-semibold">
         {{ $t("response.body") }}
       </label>
       <div class="flex">
@@ -18,7 +18,7 @@
       </div>
     </div>
     <img
-      class="border-b border-dividerLight flex max-w-full flex-1"
+      class="border-dividerLight flex flex-1 max-w-full border-b"
       :src="imageSource"
       loading="lazy"
       :alt="imageSource"

packages/hoppscotch-app/components/lenses/renderers/JSONLensRenderer.vue

@@ -1,9 +1,9 @@
 <template>
   <div>
     <div
-      class="bg-primary border-b border-dividerLight flex flex-1 top-lowerSecondaryStickyFold pl-4 z-10 sticky items-center justify-between"
+      class="bg-primary border-dividerLight top-lowerSecondaryStickyFold sticky z-10 flex items-center justify-between flex-1 pl-4 border-b"
     >
-      <label class="font-semibold text-secondaryLight">{{
+      <label class="text-secondaryLight font-semibold">{{
         t("response.body")
       }}</label>
       <div class="flex">
@@ -12,7 +12,7 @@
           v-tippy="{ theme: 'tooltip' }"
           :title="t('state.linewrap')"
           :class="{ '!text-accent': linewrapEnabled }"
-          svg="wrap-text"
+          svg="corner-down-left"
           @click.native.prevent="linewrapEnabled = !linewrapEnabled"
         />
         <ButtonSecondary
@@ -36,7 +36,7 @@
     <div ref="jsonResponse"></div>
     <div
       v-if="outlinePath"
-      class="bg-primaryLight border-t border-dividerLight flex flex-nowrap flex-1 px-2 bottom-0 z-10 sticky overflow-auto hide-scrollbar"
+      class="bg-primaryLight border-dividerLight flex-nowrap hide-scrollbar sticky bottom-0 z-10 flex flex-1 px-2 overflow-auto border-t"
     >
       <div
         v-for="(item, index) in outlinePath"
@@ -115,7 +115,7 @@
         </tippy>
         <i
           v-if="index + 1 !== outlinePath.length"
-          class="text-secondaryLight opacity-50 material-icons"
+          class="text-secondaryLight material-icons opacity-50"
           >chevron_right</i
         >
       </div>

packages/hoppscotch-app/components/lenses/renderers/RawLensRenderer.vue

@@ -1,9 +1,9 @@
 <template>
   <div>
     <div
-      class="bg-primary border-b border-dividerLight flex flex-1 top-lowerSecondaryStickyFold pl-4 z-10 sticky items-center justify-between"
+      class="bg-primary border-dividerLight top-lowerSecondaryStickyFold sticky z-10 flex items-center justify-between flex-1 pl-4 border-b"
     >
-      <label class="font-semibold text-secondaryLight">
+      <label class="text-secondaryLight font-semibold">
         {{ t("response.body") }}
       </label>
       <div class="flex">
@@ -12,7 +12,7 @@
           v-tippy="{ theme: 'tooltip' }"
           :title="t('state.linewrap')"
           :class="{ '!text-accent': linewrapEnabled }"
-          svg="wrap-text"
+          svg="corner-down-left"
           @click.native.prevent="linewrapEnabled = !linewrapEnabled"
         />
         <ButtonSecondary

packages/hoppscotch-app/components/lenses/renderers/XMLLensRenderer.vue

@@ -1,9 +1,9 @@
 <template>
   <div>
     <div
-      class="bg-primary border-b border-dividerLight flex flex-1 top-lowerSecondaryStickyFold pl-4 z-10 sticky items-center justify-between"
+      class="bg-primary border-dividerLight top-lowerSecondaryStickyFold sticky z-10 flex items-center justify-between flex-1 pl-4 border-b"
     >
-      <label class="font-semibold text-secondaryLight">
+      <label class="text-secondaryLight font-semibold">
         {{ t("response.body") }}
       </label>
       <div class="flex">
@@ -12,7 +12,7 @@
           v-tippy="{ theme: 'tooltip' }"
           :title="t('state.linewrap')"
           :class="{ '!text-accent': linewrapEnabled }"
-          svg="wrap-text"
+          svg="corner-down-left"
           @click.native.prevent="linewrapEnabled = !linewrapEnabled"
         />
         <ButtonSecondary

packages/hoppscotch-app/components/profile/Picture.vue

@@ -1,12 +1,12 @@
 <template>
-  <div class="cursor-pointer flex h-5 w-5 relative items-center justify-center">
+  <div class="relative flex items-center justify-center w-5 h-5 cursor-pointer">
     <img
-      class="bg-primaryDark rounded-full object-cover object-center h-5 transition w-5 absolute"
+      class="bg-primaryDark absolute object-cover object-center w-5 h-5 transition rounded-full"
       :src="url"
       :alt="alt"
       loading="lazy"
     />
-    <div class="rounded-full shadow-inner inset-0 absolute"></div>
+    <div class="absolute inset-0 rounded-full shadow-inner"></div>
     <span
       v-if="indicator"
       class="border-primary rounded-full border-2 h-2.5 -top-0.5 -right-0.5 w-2.5 absolute"

packages/hoppscotch-app/components/realtime/Log.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="flex flex-col">
     <div
-      class="bg-primary border-b border-dividerLight flex flex-1 pl-4 top-0 z-10 sticky items-center justify-between"
+      class="bg-primary border-dividerLight sticky top-0 z-10 flex items-center justify-between flex-1 pl-4 border-b"
     >
-      <label for="log" class="font-semibold text-secondaryLight py-2">
+      <label for="log" class="text-secondaryLight py-2 font-semibold">
         {{ title }}
       </label>
     </div>

packages/hoppscotch-app/components/realtime/Mqtt.vue

@@ -15,16 +15,16 @@
         >
           <AppSection label="request">
             <div
-              class="bg-primary flex flex-col space-y-4 p-4 top-0 z-10 sticky"
+              class="bg-primary sticky top-0 z-10 flex flex-col p-4 space-y-4"
             >
-              <div class="space-x-2 flex-1 inline-flex">
+              <div class="inline-flex flex-1 space-x-2">
                 <input
                   id="mqtt-url"
                   v-model="url"
                   type="url"
                   autocomplete="off"
                   spellcheck="false"
-                  class="bg-primaryLight border border-divider rounded text-secondaryDark w-full py-2 px-4 hover:border-dividerDark focus-visible:bg-transparent focus-visible:border-dividerDark"
+                  class="bg-primaryLight border-divider text-secondaryDark hover:border-dividerDark focus-visible:bg-transparent focus-visible:border-dividerDark w-full px-4 py-2 border rounded"
                   :placeholder="$t('mqtt.url')"
                   :disabled="connectionState"
                   @keyup.enter="validUrl ? toggleConnection() : null"
@@ -80,8 +80,8 @@
       class="hide-scrollbar !overflow-auto"
     >
       <AppSection label="messages">
-        <div class="flex flex-col flex-1 p-4 inline-flex">
-          <label for="pub_topic" class="font-semibold text-secondaryLight">
+        <div class="flex inline-flex flex-col flex-1 p-4">
+          <label for="pub_topic" class="text-secondaryLight font-semibold">
             {{ $t("mqtt.topic") }}
           </label>
         </div>
@@ -96,12 +96,12 @@
             spellcheck="false"
           />
         </div>
-        <div class="flex flex-1 p-4 items-center justify-between">
-          <label for="mqtt-message" class="font-semibold text-secondaryLight">
+        <div class="flex items-center justify-between flex-1 p-4">
+          <label for="mqtt-message" class="text-secondaryLight font-semibold">
             {{ $t("mqtt.communication") }}
           </label>
         </div>
-        <div class="flex space-x-2 px-4">
+        <div class="flex px-4 space-x-2">
           <input
             id="mqtt-message"
             v-model="msg"
@@ -120,13 +120,13 @@
           />
         </div>
         <div
-          class="border-t border-dividerLight flex flex-col flex-1 mt-4 p-4 inline-flex"
+          class="border-dividerLight flex inline-flex flex-col flex-1 p-4 mt-4 border-t"
         >
-          <label for="sub_topic" class="font-semibold text-secondaryLight">
+          <label for="sub_topic" class="text-secondaryLight font-semibold">
             {{ $t("mqtt.topic") }}
           </label>
         </div>
-        <div class="flex space-x-2 px-4">
+        <div class="flex px-4 space-x-2">
           <input
             id="sub_topic"
             v-model="sub_topic"
@@ -161,22 +161,6 @@ import debounce from "lodash/debounce"
 import { logHoppRequestRunToAnalytics } from "~/helpers/fb/analytics"
 import { useSetting } from "~/newstore/settings"
 import useWindowSize from "~/helpers/utils/useWindowSize"
-import {
-  MQTTEndpoint$,
-  setMQTTEndpoint,
-  MQTTConnectingState$,
-  MQTTConnectionState$,
-  setMQTTConnectingState,
-  setMQTTConnectionState,
-  MQTTSubscriptionState$,
-  setMQTTSubscriptionState,
-  MQTTSocket$,
-  setMQTTSocket,
-  MQTTLog$,
-  setMQTTLog,
-  addMQTTLogLine,
-} from "~/newstore/MQTTSession"
-import { useStream } from "~/helpers/utils/composables"
 
 export default defineComponent({
   components: { Splitpanes, Pane },
@@ -186,33 +170,21 @@ export default defineComponent({
       SIDEBAR: useSetting("SIDEBAR"),
       COLUMN_LAYOUT: useSetting("COLUMN_LAYOUT"),
       SIDEBAR_ON_LEFT: useSetting("SIDEBAR_ON_LEFT"),
-      url: useStream(MQTTEndpoint$, "", setMQTTEndpoint),
-      connectionState: useStream(
-        MQTTConnectionState$,
-        false,
-        setMQTTConnectionState
-      ),
-      connectingState: useStream(
-        MQTTConnectingState$,
-        false,
-        setMQTTConnectingState
-      ),
-      subscriptionState: useStream(
-        MQTTSubscriptionState$,
-        false,
-        setMQTTSubscriptionState
-      ),
-      log: useStream(MQTTLog$, null, setMQTTLog),
-      client: useStream(MQTTSocket$, null, setMQTTSocket),
     }
   },
   data() {
     return {
+      url: "wss://test.mosquitto.org:8081",
       isUrlValid: true,
+      client: null,
       pub_topic: "",
       sub_topic: "",
       msg: "",
+      connectionState: false,
+      connectingState: false,
+      log: null,
       manualDisconnect: false,
+      subscriptionState: false,
       username: "",
       password: "",
     }
@@ -289,7 +261,7 @@ export default defineComponent({
     onConnectionFailure() {
       this.connectingState = false
       this.connectionState = false
-      addMQTTLogLine({
+      this.log.push({
         payload: this.$t("error.something_went_wrong"),
         source: "info",
         color: "#ff5555",
@@ -299,7 +271,7 @@ export default defineComponent({
     onConnectionSuccess() {
       this.connectingState = false
       this.connectionState = true
-      addMQTTLogLine({
+      this.log.push({
         payload: this.$t("state.connected_to", { name: this.url }),
         source: "info",
         color: "var(--accent-color)",
@@ -308,7 +280,7 @@ export default defineComponent({
       this.$toast.success(this.$t("state.connected"))
     },
     onMessageArrived({ payloadString, destinationName }) {
-      addMQTTLogLine({
+      this.log.push({
         payload: `Message: ${payloadString} arrived on topic: ${destinationName}`,
         source: "info",
         color: "var(--accent-color)",
@@ -325,7 +297,7 @@ export default defineComponent({
     disconnect() {
       this.manualDisconnect = true
       this.client.disconnect()
-      addMQTTLogLine({
+      this.log.push({
         payload: this.$t("state.disconnected_from", { name: this.url }),
         source: "info",
         color: "#ff5555",
@@ -346,14 +318,14 @@ export default defineComponent({
     publish() {
       try {
         this.client.publish(this.pub_topic, this.msg, 0, false)
-        addMQTTLogLine({
+        this.log.push({
           payload: `Published message: ${this.msg} to topic: ${this.pub_topic}`,
           ts: new Date().toLocaleTimeString(),
           source: "info",
           color: "var(--accent-color)",
         })
       } catch (e) {
-        addMQTTLogLine({
+        this.log.push({
           payload:
             this.$t("error.something_went_wrong") +
             `while publishing msg: ${this.msg} to topic:  ${this.pub_topic}`,
@@ -377,7 +349,7 @@ export default defineComponent({
           onFailure: this.usubFailure,
         })
       } catch (e) {
-        addMQTTLogLine({
+        this.log.push({
           payload:
             this.$t("error.something_went_wrong") +
             `while subscribing to topic:  ${this.sub_topic}`,
@@ -389,7 +361,7 @@ export default defineComponent({
     },
     usubSuccess() {
       this.subscriptionState = !this.subscriptionState
-      addMQTTLogLine({
+      this.log.push({
         payload:
           `Successfully ` +
           (this.subscriptionState ? "subscribed" : "unsubscribed") +
@@ -400,7 +372,7 @@ export default defineComponent({
       })
     },
     usubFailure() {
-      addMQTTLogLine({
+      this.log.push({
         payload:
           `Failed to ` +
           (this.subscriptionState ? "unsubscribe" : "subscribe") +

packages/hoppscotch-app/components/realtime/Socketio.vue

@@ -14,8 +14,8 @@
           class="hide-scrollbar !overflow-auto"
         >
           <AppSection label="request">
-            <div class="bg-primary flex p-4 top-0 z-10 sticky">
-              <div class="space-x-2 flex-1 inline-flex">
+            <div class="bg-primary sticky top-0 z-10 flex p-4">
+              <div class="inline-flex flex-1 space-x-2">
                 <div class="flex flex-1">
                   <label for="client-version">
                     <tippy
@@ -31,7 +31,7 @@
                             id="client-version"
                             v-tippy="{ theme: 'tooltip' }"
                             title="socket.io-client version"
-                            class="bg-primaryLight border border-divider rounded-l cursor-pointer flex font-semibold text-secondaryDark py-2 px-4 w-26 hover:border-dividerDark focus-visible:bg-transparent focus-visible:border-dividerDark"
+                            class="bg-primaryLight border-divider text-secondaryDark w-26 hover:border-dividerDark focus-visible:bg-transparent focus-visible:border-dividerDark flex px-4 py-2 font-semibold border rounded-l cursor-pointer"
                             :value="`Client ${clientVersion}`"
                             readonly
                             :disabled="connectionState"
@@ -53,7 +53,7 @@
                     autocomplete="off"
                     spellcheck="false"
                     :class="{ error: !urlValid }"
-                    class="bg-primaryLight border border-divider flex flex-1 text-secondaryDark w-full py-2 px-4 hover:border-dividerDark focus-visible:bg-transparent focus-visible:border-dividerDark"
+                    class="bg-primaryLight border-divider text-secondaryDark hover:border-dividerDark focus-visible:bg-transparent focus-visible:border-dividerDark flex flex-1 w-full px-4 py-2 border"
                     :placeholder="$t('socketio.url')"
                     :disabled="connectionState"
                     @keyup.enter="urlValid ? toggleConnection() : null"
@@ -61,7 +61,7 @@
                   <input
                     id="socketio-path"
                     v-model="path"
-                    class="bg-primaryLight border border-divider rounded-r flex flex-1 text-secondaryDark w-full py-2 px-4 hover:border-dividerDark focus-visible:bg-transparent focus-visible:border-dividerDark"
+                    class="bg-primaryLight border-divider text-secondaryDark hover:border-dividerDark focus-visible:bg-transparent focus-visible:border-dividerDark flex flex-1 w-full px-4 py-2 border rounded-r"
                     spellcheck="false"
                     :disabled="connectionState"
                     @keyup.enter="urlValid ? toggleConnection() : null"
@@ -89,7 +89,7 @@
           class="hide-scrollbar !overflow-auto"
         >
           <AppSection label="response">
-            <RealtimeLog :title="$t('socketio.log')" :log="log" />
+            <RealtimeLog :title="$t('socketio.log')" :log="communication.log" />
           </AppSection>
         </Pane>
       </Splitpanes>
@@ -101,8 +101,8 @@
       class="hide-scrollbar !overflow-auto"
     >
       <AppSection label="messages">
-        <div class="flex flex-col flex-1 p-4 inline-flex">
-          <label for="events" class="font-semibold text-secondaryLight">
+        <div class="flex inline-flex flex-col flex-1 p-4">
+          <label for="events" class="text-secondaryLight font-semibold">
             {{ $t("socketio.events") }}
           </label>
         </div>
@@ -118,8 +118,8 @@
             :disabled="!connectionState"
           />
         </div>
-        <div class="flex flex-1 p-4 items-center justify-between">
-          <label class="font-semibold text-secondaryLight">
+        <div class="flex items-center justify-between flex-1 p-4">
+          <label class="text-secondaryLight font-semibold">
             {{ $t("socketio.communication") }}
           </label>
           <div class="flex">
@@ -127,11 +127,12 @@
               v-tippy="{ theme: 'tooltip' }"
               :title="$t('add.new')"
               svg="plus"
+              class="rounded"
               @click.native="addCommunicationInput"
             />
           </div>
         </div>
-        <div class="flex flex-col space-y-2 px-4 pb-4">
+        <div class="flex flex-col px-4 pb-4 space-y-2">
           <div
             v-for="(input, index) of communication.inputs"
             :key="`input-${index}`"
@@ -152,6 +153,7 @@
                 v-tippy="{ theme: 'tooltip' }"
                 :title="$t('action.remove')"
                 svg="trash"
+                class="rounded"
                 color="red"
                 outline
                 @click.native="removeCommunicationInput({ index })"
@@ -186,24 +188,6 @@ import debounce from "lodash/debounce"
 import { logHoppRequestRunToAnalytics } from "~/helpers/fb/analytics"
 import { useSetting } from "~/newstore/settings"
 import useWindowSize from "~/helpers/utils/useWindowSize"
-import {
-  SIOEndpoint$,
-  setSIOEndpoint,
-  SIOVersion$,
-  setSIOVersion,
-  SIOPath$,
-  setSIOPath,
-  SIOConnectionState$,
-  SIOConnectingState$,
-  setSIOConnectionState,
-  setSIOConnectingState,
-  SIOSocket$,
-  setSIOSocket,
-  SIOLog$,
-  setSIOLog,
-  addSIOLogLine,
-} from "~/newstore/SocketIOSession"
-import { useStream } from "~/helpers/utils/composables"
 
 const socketIoClients = {
   v4: ClientV4,
@@ -220,27 +204,20 @@ export default defineComponent({
       COLUMN_LAYOUT: useSetting("COLUMN_LAYOUT"),
       SIDEBAR_ON_LEFT: useSetting("SIDEBAR_ON_LEFT"),
       socketIoClients,
-      url: useStream(SIOEndpoint$, "", setSIOEndpoint),
-      clientVersion: useStream(SIOVersion$, "", setSIOVersion),
-      path: useStream(SIOPath$, "", setSIOPath),
-      connectingState: useStream(
-        SIOConnectingState$,
-        false,
-        setSIOConnectingState
-      ),
-      connectionState: useStream(
-        SIOConnectionState$,
-        false,
-        setSIOConnectionState
-      ),
-      io: useStream(SIOSocket$, null, setSIOSocket),
-      log: useStream(SIOLog$, [], setSIOLog),
     }
   },
   data() {
     return {
+      // default version is set to v4
+      clientVersion: "v4",
+      url: "wss://hoppscotch-socketio.herokuapp.com",
+      path: "/socket.io",
       isUrlValid: true,
+      connectingState: false,
+      connectionState: false,
+      io: null,
       communication: {
+        log: null,
         eventName: "",
         inputs: [""],
       },
@@ -290,7 +267,7 @@ export default defineComponent({
     },
     connect() {
       this.connectingState = true
-      this.log = [
+      this.communication.log = [
         {
           payload: this.$t("state.connecting_to", { name: this.url }),
           source: "info",
@@ -309,7 +286,7 @@ export default defineComponent({
         this.io.on("connect", () => {
           this.connectingState = false
           this.connectionState = true
-          this.log = [
+          this.communication.log = [
             {
               payload: this.$t("state.connected_to", { name: this.url }),
               source: "info",
@@ -321,7 +298,7 @@ export default defineComponent({
         })
         this.io.on("*", ({ data }) => {
           const [eventName, message] = data
-          addSIOLogLine({
+          this.communication.log.push({
             payload: `[${eventName}] ${message ? JSON.stringify(message) : ""}`,
             source: "server",
             ts: new Date().toLocaleTimeString(),
@@ -339,7 +316,7 @@ export default defineComponent({
         this.io.on("disconnect", () => {
           this.connectingState = false
           this.connectionState = false
-          addSIOLogLine({
+          this.communication.log.push({
             payload: this.$t("state.disconnected_from", { name: this.url }),
             source: "info",
             color: "#ff5555",
@@ -363,14 +340,14 @@ export default defineComponent({
       this.disconnect()
       this.connectingState = false
       this.connectionState = false
-      addSIOLogLine({
+      this.communication.log.push({
         payload: this.$t("error.something_went_wrong"),
         source: "info",
         color: "#ff5555",
         ts: new Date().toLocaleTimeString(),
       })
       if (error !== null)
-        addSIOLogLine({
+        this.communication.log.push({
           payload: error,
           source: "info",
           color: "#ff5555",
@@ -392,14 +369,14 @@ export default defineComponent({
       if (this.io) {
         this.io.emit(eventName, ...messages, (data) => {
           // receive response from server
-          addSIOLogLine({
+          this.communication.log.push({
             payload: `[${eventName}] ${JSON.stringify(data)}`,
             source: "server",
             ts: new Date().toLocaleTimeString(),
           })
         })
 
-        addSIOLogLine({
+        this.communication.log.push({
           payload: `[${eventName}] ${JSON.stringify(messages)}`,
           source: "client",
           ts: new Date().toLocaleTimeString(),

packages/hoppscotch-app/components/realtime/Sse.vue

@@ -1,8 +1,8 @@
 <template>
   <Splitpanes class="smart-splitter" :horizontal="COLUMN_LAYOUT">
     <Pane :size="COLUMN_LAYOUT ? 45 : 50" class="hide-scrollbar !overflow-auto">
-      <div class="bg-primary flex p-4 top-0 z-10 sticky">
-        <div class="space-x-2 flex-1 inline-flex">
+      <div class="bg-primary sticky top-0 z-10 flex p-4">
+        <div class="inline-flex flex-1 space-x-2">
           <div class="flex flex-1">
             <input
               id="server"
@@ -10,21 +10,21 @@
               type="url"
               autocomplete="off"
               :class="{ error: !serverValid }"
-              class="bg-primaryLight border border-divider rounded-l flex flex-1 text-secondaryDark w-full py-2 px-4 hover:border-dividerDark focus-visible:bg-transparent focus-visible:border-dividerDark"
+              class="bg-primaryLight border-divider text-secondaryDark hover:border-dividerDark focus-visible:bg-transparent focus-visible:border-dividerDark flex flex-1 w-full px-4 py-2 border rounded-l"
               :placeholder="$t('sse.url')"
               :disabled="connectionSSEState"
               @keyup.enter="serverValid ? toggleSSEConnection() : null"
             />
             <label
               for="event-type"
-              class="bg-primaryLight border-t border-b border-divider font-semibold text-secondaryLight py-2 px-4 truncate"
+              class="bg-primaryLight border-divider text-secondaryLight px-4 py-2 font-semibold truncate border-t border-b"
             >
               {{ $t("sse.event_type") }}
             </label>
             <input
               id="event-type"
               v-model="eventType"
-              class="bg-primaryLight border border-divider rounded-r flex flex-1 text-secondaryDark w-full py-2 px-4 hover:border-dividerDark focus-visible:bg-transparent focus-visible:border-dividerDark"
+              class="bg-primaryLight border-divider text-secondaryDark hover:border-dividerDark focus-visible:bg-transparent focus-visible:border-dividerDark flex flex-1 w-full px-4 py-2 border rounded-r"
               spellcheck="false"
               :disabled="connectionSSEState"
               @keyup.enter="serverValid ? toggleSSEConnection() : null"
@@ -48,7 +48,7 @@
       <AppSection label="response">
         <ul>
           <li>
-            <RealtimeLog :title="$t('sse.log')" :log="log" />
+            <RealtimeLog :title="$t('sse.log')" :log="events.log" />
             <div id="result"></div>
           </li>
         </ul>
@@ -64,47 +64,26 @@ import "splitpanes/dist/splitpanes.css"
 import debounce from "lodash/debounce"
 import { logHoppRequestRunToAnalytics } from "~/helpers/fb/analytics"
 import { useSetting } from "~/newstore/settings"
-import {
-  SSEEndpoint$,
-  setSSEEndpoint,
-  SSEEventType$,
-  setSSEEventType,
-  SSESocket$,
-  setSSESocket,
-  SSEConnectingState$,
-  SSEConnectionState$,
-  setSSEConnectionState,
-  setSSEConnectingState,
-  SSELog$,
-  setSSELog,
-  addSSELogLine,
-} from "~/newstore/SSESession"
-import { useStream } from "~/helpers/utils/composables"
 
 export default defineComponent({
   components: { Splitpanes, Pane },
   setup() {
     return {
       COLUMN_LAYOUT: useSetting("COLUMN_LAYOUT"),
-      connectionSSEState: useStream(
-        SSEConnectionState$,
-        false,
-        setSSEConnectionState
-      ),
-      connectingState: useStream(
-        SSEConnectingState$,
-        false,
-        setSSEConnectingState
-      ),
-      server: useStream(SSEEndpoint$, "", setSSEEndpoint),
-      eventType: useStream(SSEEventType$, "", setSSEEventType),
-      sse: useStream(SSESocket$, null, setSSESocket),
-      log: useStream(SSELog$, [], setSSELog),
     }
   },
   data() {
     return {
+      connectionSSEState: false,
+      connectingState: false,
+      server: "https://express-eventsource.herokuapp.com/events",
       isUrlValid: true,
+      sse: null,
+      events: {
+        log: null,
+        input: "",
+      },
+      eventType: "data",
     }
   },
   computed: {
@@ -141,7 +120,7 @@ export default defineComponent({
     },
     start() {
       this.connectingState = true
-      this.log = [
+      this.events.log = [
         {
           payload: this.$t("state.connecting_to", { name: this.server }),
           source: "info",
@@ -154,7 +133,7 @@ export default defineComponent({
           this.sse.onopen = () => {
             this.connectingState = false
             this.connectionSSEState = true
-            this.log = [
+            this.events.log = [
               {
                 payload: this.$t("state.connected_to", { name: this.server }),
                 source: "info",
@@ -169,7 +148,7 @@ export default defineComponent({
           }
           this.sse.onclose = () => {
             this.connectionSSEState = false
-            addSSELogLine({
+            this.events.log.push({
               payload: this.$t("state.disconnected_from", {
                 name: this.server,
               }),
@@ -180,7 +159,7 @@ export default defineComponent({
             this.$toast.error(this.$t("state.disconnected"))
           }
           this.sse.addEventListener(this.eventType, ({ data }) => {
-            addSSELogLine({
+            this.events.log.push({
               payload: data,
               source: "server",
               ts: new Date().toLocaleTimeString(),
@@ -191,7 +170,7 @@ export default defineComponent({
           this.$toast.error(this.$t("error.something_went_wrong"))
         }
       } else {
-        this.log = [
+        this.events.log = [
           {
             payload: this.$t("error.browser_support_sse"),
             source: "info",
@@ -208,14 +187,14 @@ export default defineComponent({
     handleSSEError(error) {
       this.stop()
       this.connectionSSEState = false
-      addSSELogLine({
+      this.events.log.push({
         payload: this.$t("error.something_went_wrong"),
         source: "info",
         color: "#ff5555",
         ts: new Date().toLocaleTimeString(),
       })
       if (error !== null)
-        addSSELogLine({
+        this.events.log.push({
           payload: error,
           source: "info",
           color: "#ff5555",

packages/hoppscotch-app/components/realtime/Websocket.vue

@@ -14,12 +14,12 @@
           class="hide-scrollbar !overflow-auto"
         >
           <AppSection label="request">
-            <div class="bg-primary flex p-4 top-0 z-10 sticky">
-              <div class="space-x-2 flex-1 inline-flex">
+            <div class="bg-primary sticky top-0 z-10 flex p-4">
+              <div class="inline-flex flex-1 space-x-2">
                 <input
                   id="websocket-url"
                   v-model="url"
-                  class="bg-primaryLight border border-divider rounded text-secondaryDark w-full py-2 px-4 hover:border-dividerDark focus-visible:bg-transparent focus-visible:border-dividerDark"
+                  class="bg-primaryLight border-divider text-secondaryDark hover:border-dividerDark focus-visible:bg-transparent focus-visible:border-dividerDark w-full px-4 py-2 border rounded"
                   type="url"
                   autocomplete="off"
                   spellcheck="false"
@@ -44,9 +44,9 @@
               </div>
             </div>
             <div
-              class="bg-primary border-b border-dividerLight flex flex-1 top-upperPrimaryStickyFold pl-4 z-10 sticky items-center justify-between"
+              class="bg-primary border-dividerLight top-upperPrimaryStickyFold sticky z-10 flex items-center justify-between flex-1 pl-4 border-b"
             >
-              <label class="font-semibold text-secondaryLight">
+              <label class="text-secondaryLight font-semibold">
                 {{ $t("websocket.protocols") }}
               </label>
               <div class="flex">
@@ -67,21 +67,15 @@
             <div
               v-for="(protocol, index) of protocols"
               :key="`protocol-${index}`"
-              class="divide-dividerLight divide-x border-b border-dividerLight flex"
+              class="divide-dividerLight border-dividerLight flex border-b divide-x"
             >
               <input
                 v-model="protocol.value"
-                class="bg-transparent flex flex-1 py-2 px-4"
+                class="flex flex-1 px-4 py-2 bg-transparent"
                 :placeholder="$t('count.protocol', { count: index + 1 })"
                 name="message"
                 type="text"
                 autocomplete="off"
-                @change="
-                  updateProtocol(index, {
-                    value: $event.target.value,
-                    active: protocol.active,
-                  })
-                "
               />
               <span>
                 <ButtonSecondary
@@ -102,10 +96,9 @@
                   "
                   color="green"
                   @click.native="
-                    updateProtocol(index, {
-                      value: protocol.value,
-                      active: !protocol.active,
-                    })
+                    protocol.active = protocol.hasOwnProperty('active')
+                      ? !protocol.active
+                      : false
                   "
                 />
               </span>
@@ -121,15 +114,15 @@
             </div>
             <div
               v-if="protocols.length === 0"
-              class="flex flex-col text-secondaryLight p-4 items-center justify-center"
+              class="text-secondaryLight flex flex-col items-center justify-center p-4"
             >
               <img
                 :src="`/images/states/${$colorMode.value}/add_category.svg`"
                 loading="lazy"
-                class="flex-col object-contain object-center h-16 my-4 w-16 inline-flex"
+                class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
                 :alt="$t('empty.protocols')"
               />
-              <span class="text-center mb-4">
+              <span class="mb-4 text-center">
                 {{ $t("empty.protocols") }}
               </span>
             </div>
@@ -140,7 +133,10 @@
           class="hide-scrollbar !overflow-auto"
         >
           <AppSection label="response">
-            <RealtimeLog :title="$t('websocket.log')" :log="log" />
+            <RealtimeLog
+              :title="$t('websocket.log')"
+              :log="communication.log"
+            />
           </AppSection>
         </Pane>
       </Splitpanes>
@@ -152,15 +148,15 @@
       class="hide-scrollbar !overflow-auto"
     >
       <AppSection label="messages">
-        <div class="flex flex-col flex-1 p-4 inline-flex">
+        <div class="flex inline-flex flex-col flex-1 p-4">
           <label
             for="websocket-message"
-            class="font-semibold text-secondaryLight"
+            class="text-secondaryLight font-semibold"
           >
             {{ $t("websocket.communication") }}
           </label>
         </div>
-        <div class="flex space-x-2 px-4">
+        <div class="flex px-4 space-x-2">
           <input
             id="websocket-message"
             v-model="communication.input"
@@ -195,26 +191,6 @@ import debounce from "lodash/debounce"
 import { logHoppRequestRunToAnalytics } from "~/helpers/fb/analytics"
 import useWindowSize from "~/helpers/utils/useWindowSize"
 import { useSetting } from "~/newstore/settings"
-import {
-  setWSEndpoint,
-  WSEndpoint$,
-  WSProtocols$,
-  setWSProtocols,
-  addWSProtocol,
-  deleteWSProtocol,
-  updateWSProtocol,
-  deleteAllWSProtocols,
-  WSSocket$,
-  setWSSocket,
-  setWSConnectionState,
-  setWSConnectingState,
-  WSConnectionState$,
-  WSConnectingState$,
-  addWSLogLine,
-  WSLog$,
-  setWSLog,
-} from "~/newstore/WebSocketSession"
-import { useStream } from "~/helpers/utils/composables"
 
 export default defineComponent({
   components: { Splitpanes, Pane },
@@ -224,29 +200,21 @@ export default defineComponent({
       SIDEBAR: useSetting("SIDEBAR"),
       COLUMN_LAYOUT: useSetting("COLUMN_LAYOUT"),
       SIDEBAR_ON_LEFT: useSetting("SIDEBAR_ON_LEFT"),
-      url: useStream(WSEndpoint$, "", setWSEndpoint),
-      protocols: useStream(WSProtocols$, [], setWSProtocols),
-      connectionState: useStream(
-        WSConnectionState$,
-        false,
-        setWSConnectionState
-      ),
-      connectingState: useStream(
-        WSConnectingState$,
-        false,
-        setWSConnectingState
-      ),
-      socket: useStream(WSSocket$, null, setWSSocket),
-      log: useStream(WSLog$, [], setWSLog),
     }
   },
   data() {
     return {
+      connectionState: false,
+      connectingState: false,
+      url: "wss://hoppscotch-websocket.herokuapp.com",
       isUrlValid: true,
+      socket: null,
       communication: {
+        log: null,
         input: "",
       },
       currentIndex: -1, // index of the message log array to put in input box
+      protocols: [],
       activeProtocols: [],
     }
   },
@@ -283,7 +251,7 @@ export default defineComponent({
   },
   methods: {
     clearContent() {
-      deleteAllWSProtocols()
+      this.protocols = []
     },
     debouncer: debounce(function () {
       this.worker.postMessage({ type: "ws", url: this.url })
@@ -298,7 +266,7 @@ export default defineComponent({
       else return this.disconnect()
     },
     connect() {
-      this.log = [
+      this.communication.log = [
         {
           payload: this.$t("state.connecting_to", { name: this.url }),
           source: "info",
@@ -311,7 +279,7 @@ export default defineComponent({
         this.socket.onopen = () => {
           this.connectingState = false
           this.connectionState = true
-          this.log = [
+          this.communication.log = [
             {
               payload: this.$t("state.connected_to", { name: this.url }),
               source: "info",
@@ -326,7 +294,7 @@ export default defineComponent({
         }
         this.socket.onclose = () => {
           this.connectionState = false
-          addWSLogLine({
+          this.communication.log.push({
             payload: this.$t("state.disconnected_from", { name: this.url }),
             source: "info",
             color: "#ff5555",
@@ -335,7 +303,7 @@ export default defineComponent({
           this.$toast.error(this.$t("state.disconnected"))
         }
         this.socket.onmessage = ({ data }) => {
-          addWSLogLine({
+          this.communication.log.push({
             payload: data,
             source: "server",
             ts: new Date().toLocaleTimeString(),
@@ -360,14 +328,14 @@ export default defineComponent({
     handleError(error) {
       this.disconnect()
       this.connectionState = false
-      addWSLogLine({
+      this.communication.log.push({
         payload: this.$t("error.something_went_wrong"),
         source: "info",
         color: "#ff5555",
         ts: new Date().toLocaleTimeString(),
       })
       if (error !== null)
-        addWSLogLine({
+        this.communication.log.push({
           payload: error,
           source: "info",
           color: "#ff5555",
@@ -377,7 +345,7 @@ export default defineComponent({
     sendMessage() {
       const message = this.communication.input
       this.socket.send(message)
-      addWSLogLine({
+      this.communication.log.push({
         payload: message,
         source: "client",
         ts: new Date().toLocaleTimeString(),
@@ -385,7 +353,7 @@ export default defineComponent({
       this.communication.input = ""
     },
     walkHistory(direction) {
-      const clientMessages = this.log.filter(
+      const clientMessages = this.communication.log.filter(
         ({ source }) => source === "client"
       )
       const length = clientMessages.length
@@ -421,11 +389,11 @@ export default defineComponent({
       }
     },
     addProtocol() {
-      addWSProtocol({ value: "", active: true })
+      this.protocols.push({ value: "", active: true })
     },
     deleteProtocol({ index }) {
       const oldProtocols = this.protocols.slice()
-      deleteWSProtocol(index)
+      this.$delete(this.protocols, index)
       this.$toast.success(this.$t("state.deleted"), {
         action: {
           text: this.$t("action.undo"),
@@ -437,9 +405,6 @@ export default defineComponent({
         },
       })
     },
-    updateProtocol(index, updated) {
-      updateWSProtocol(index, updated)
-    },
   },
 })
 </script>

packages/hoppscotch-app/components/smart/AutoComplete.vue

@@ -18,7 +18,7 @@
     />
     <ul
       v-if="suggestions.length > 0 && suggestionsVisible"
-      class="suggestions hide-scrollbar"
+      class="suggestions"
       :style="{ transform: `translate(${suggestionsOffsetLeft}px, 0)` }"
     >
       <li
@@ -101,8 +101,8 @@ export default defineComponent({
           )
           // Cut off the part that's already been typed.
           .map((entry) => entry.substring(this.selectionStart))
-          // We only want the top 10 suggestions.
-          .slice(0, 10)
+          // We only want the top 6 suggestions.
+          .slice(0, 6)
       )
     },
   },
@@ -215,8 +215,6 @@ export default defineComponent({
     @apply left-0;
     @apply z-50;
     @apply shadow-lg;
-    @apply max-h-46;
-    @apply overflow-y-auto;
 
     top: calc(100% - 4px);
     border-radius: 0 0 8px 8px;

packages/hoppscotch-app/components/smart/Checkbox.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="cursor-pointer flex-nowrap transition inline-flex items-center justify-center group hover:text-secondaryDark"
+    class="flex-nowrap group hover:text-secondaryDark inline-flex items-center justify-center transition cursor-pointer"
     @click="$emit('change')"
   >
     <input
@@ -12,7 +12,7 @@
     />
     <label
       for="checkbox"
-      class="cursor-pointer font-semibold pl-0 align-middle"
+      class="pl-0 font-semibold align-middle cursor-pointer"
     >
       <slot></slot>
     </label>

packages/hoppscotch-app/components/smart/DeletableChip.vue

@@ -1,7 +1,7 @@
 <template>
   <span class="chip">
     <i class="opacity-75 material-icons">attachment</i>
-    <span class="max-w-64 px-2 truncate"><slot></slot></span>
+    <span class="px-2 truncate max-w-64"><slot></slot></span>
     <ButtonSecondary
       class="rounded close-button"
       svg="x"

packages/hoppscotch-app/components/smart/FontSizePicker.vue

@@ -19,9 +19,8 @@
         v-for="(size, index) in fontSizes"
         :key="`size-${index}`"
         :label="`${getFontSizeName(size)}`"
-        :icon="
-          size === active ? 'radio_button_checked' : 'radio_button_unchecked'
-        "
+        :info-icon="size === active ? 'done' : ''"
+        :active-info-icon="size === active"
         @click.native="
           () => {
             setActiveFont(size)

packages/hoppscotch-app/components/smart/Item.vue

@@ -3,7 +3,7 @@
     :to="`${/^\/(?!\/).*$/.test(to) ? localePath(to) : to}`"
     :exact="exact"
     :blank="blank"
-    class="rounded flex-shrink-0 py-2 px-4 transition inline-flex items-center hover:bg-primaryDark hover:text-secondaryDark focus:outline-none focus-visible:bg-primaryDark focus-visible:text-secondaryDark"
+    class="hover:bg-primaryDark hover:text-secondaryDark focus:outline-none focus-visible:bg-primaryDark focus-visible:text-secondaryDark inline-flex items-center flex-shrink-0 px-4 py-2 transition rounded"
     :class="[
       { 'opacity-75 cursor-not-allowed': disabled },
       { 'pointer-events-none': loading },
@@ -42,9 +42,9 @@
         class="svg-icons"
       />
     </span>
-    <SmartSpinner v-else class="mr-4 text-secondaryDark" />
+    <SmartSpinner v-else class="text-secondaryDark mr-4" />
     <div
-      class="flex-1 inline-flex items-start truncate"
+      class="inline-flex items-start flex-1 truncate"
       :class="{ 'flex-col': description }"
     >
       <div class="font-semibold truncate">
@@ -52,14 +52,14 @@
       </div>
       <p
         v-if="description"
-        class="font-medium my-2 text-left text-secondaryLight"
+        class="text-secondaryLight my-2 font-medium text-left"
       >
         {{ description }}
       </p>
     </div>
     <i
       v-if="infoIcon"
-      class="ml-6 items-center self-center material-icons"
+      class="material-icons items-center self-center ml-6"
       :class="{ 'text-accent': activeInfoIcon }"
     >
       {{ infoIcon }}

packages/hoppscotch-app/components/smart/LoadingIndicator.vue

@@ -1,5 +1,5 @@
 <template>
   <div class="text-sm text-secondaryLight animate-pulse">
-    <AppLogo class="h-8 w-8" />
+    <AppLogo class="w-8 h-8" />
   </div>
 </template>

packages/hoppscotch-app/components/smart/Modal.vue

@@ -2,14 +2,14 @@
   <transition name="fade" appear @leave="onTransitionLeaveStart">
     <div
       ref="modal"
-      class="inset-0 transition z-10 z-50 fixed overflow-y-auto hide-scrollbar"
+      class="hide-scrollbar fixed inset-0 z-10 z-50 overflow-y-auto transition"
     >
       <div
-        class="flex min-h-screen text-center items-end justify-center sm:block"
+        class="sm:block flex items-end justify-center min-h-screen text-center"
       >
         <transition name="fade" appear>
           <div
-            class="bg-primaryLight opacity-90 inset-0 transition fixed"
+            class="bg-primaryLight opacity-90 fixed inset-0 transition"
             @touchstart="!dialog ? close() : null"
             @touchend="!dialog ? close() : null"
             @mouseup="!dialog ? close() : null"
@@ -18,7 +18,7 @@
         </transition>
         <span
           v-if="placement === 'center'"
-          class="hidden sm:h-screen sm:inline-block sm:align-middle"
+          class="sm:h-screen sm:inline-block sm:align-middle hidden"
           aria-hidden="true"
           >&#8203;</span
         >
@@ -32,7 +32,7 @@
           leave-to-class="scale-95 translate-y-4"
         >
           <div
-            class="bg-primary shadow-lg text-left w-full transform transition-all inline-block overflow-hidden align-bottom sm:rounded-xl sm:align-middle"
+            class="bg-primary sm:align-middle sm:rounded-xl inline-block w-full overflow-hidden text-left align-bottom transition-all transform shadow-lg"
             :class="[
               { 'mt-24 md:mb-8': placement === 'top' },
               { 'p-4': !fullWidth },
@@ -41,27 +41,28 @@
           >
             <div
               v-if="title"
-              class="flex mb-4 pl-2 items-center justify-between"
+              class="flex items-center justify-between pl-2 mb-4"
             >
               <h3 class="heading">{{ title }}</h3>
               <span class="flex">
                 <slot name="actions"></slot>
                 <ButtonSecondary
                   v-if="dimissible"
+                  class="rounded"
                   svg="x"
                   @click.native="close"
                 />
               </span>
             </div>
             <div
-              class="flex flex-col max-h-md overflow-y-auto hide-scrollbar"
+              class="max-h-md hide-scrollbar flex flex-col overflow-y-auto"
               :class="{ 'py-2': !fullWidth }"
             >
               <slot name="body"></slot>
             </div>
             <div
               v-if="hasFooterSlot"
-              class="flex flex-1 mt-4 p-2 items-center justify-between"
+              class="flex items-center justify-between flex-1 p-2 mt-4"
             >
               <slot name="footer"></slot>
             </div>
@@ -73,7 +74,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, onBeforeUnmount } from "@nuxtjs/composition-api"
+import { defineComponent } from "@nuxtjs/composition-api"
 import { useKeybindingDisabler } from "~/helpers/keybindings"
 
 const PORTAL_DOM_ID = "hoppscotch-modal-portal"
@@ -118,12 +119,9 @@ export default defineComponent({
   setup() {
     const { disableKeybindings, enableKeybindings } = useKeybindingDisabler()
 
-    onBeforeUnmount(() => {
-      enableKeybindings()
-    })
-
     return {
       disableKeybindings,
+      enableKeybindings,
     }
   },
   data() {
@@ -157,6 +155,7 @@ export default defineComponent({
   methods: {
     close() {
       this.$emit("close")
+      this.enableKeybindings()
     },
     onKeyDown(e: KeyboardEvent) {
       if (e.key === "Escape" && this.stackId === stack.peek()) {

packages/hoppscotch-app/components/smart/Tabs.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="flex flex-nowrap h-full flex-1"
+    class="flex flex-1 h-full flex-nowrap"
     :class="{ 'flex-col h-auto': !vertical }"
   >
     <div
@@ -9,7 +9,7 @@
     >
       <div class="flex flex-1">
         <div
-          class="flex flex-1 justify-between"
+          class="flex justify-between flex-1"
           :class="{ 'flex-col': vertical }"
         >
           <div class="flex" :class="{ 'flex-col space-y-2 p-2': vertical }">
@@ -35,7 +35,7 @@
               </span>
               <span
                 v-if="tab.indicator"
-                class="bg-accentLight rounded-full h-1 ml-2 w-1"
+                class="w-1 h-1 ml-2 rounded-full bg-accentLight"
               ></span>
             </button>
           </div>
@@ -46,7 +46,7 @@
       </div>
     </div>
     <div
-      class="h-full w-full contents"
+      class="w-full h-full contents"
       :class="{
         '!flex flex-col flex-1 overflow-y-auto hide-scrollbar': vertical,
       }"
@@ -128,7 +128,7 @@ export default defineComponent({
     @apply flex-shrink-0;
     @apply items-center;
     @apply justify-center;
-    @apply py-2 px-4;
+    @apply px-4 py-2;
     @apply text-secondary;
     @apply font-semibold;
     @apply cursor-pointer;

packages/hoppscotch-app/components/smart/Toggle.vue

@@ -1,12 +1,12 @@
 <template>
   <div
-    class="cursor-pointer flex-nowrap transition inline-flex items-center justify-center group hover:text-secondaryDark"
+    class="inline-flex items-center justify-center cursor-pointer flex-nowrap"
     @click="$emit('change')"
   >
     <label ref="toggle" class="toggle" :class="{ on: on }">
       <span class="handle"></span>
     </label>
-    <label class="cursor-pointer font-semibold pl-0 align-middle">
+    <label class="pl-0 font-semibold align-middle cursor-pointer">
       <slot></slot>
     </label>
   </div>
@@ -28,7 +28,7 @@ export default defineComponent({
 <style scoped lang="scss">
 $useBorder: true;
 $borderColor: var(--divider-color);
-$activeColor: var(--divider-dark-color);
+$activeColor: var(--divider-color);
 $inactiveColor: var(--divider-color);
 $inactiveHandleColor: var(--secondary-light-color);
 $activeHandleColor: var(--accent-color);
@@ -49,8 +49,6 @@ $transition: all 0.2s ease-in-out;
   @apply mr-4;
   @apply cursor-pointer;
   @apply flex-shrink-0;
-  @apply group-hover:border-accentDark;
-  @apply transition;
 
   width: $width;
   height: $height;

packages/hoppscotch-app/components/tab/Primary.vue

@@ -3,7 +3,7 @@
     :to="`${/^\/(?!\/).*$/.test(to) ? localePath(to) : to}`"
     :exact="exact"
     :blank="blank"
-    class="rounded py-2 px-4 transition inline-flex items-center truncate focus:outline-none"
+    class="focus:outline-none inline-flex items-center px-4 py-2 truncate transition rounded"
     :class="[
       color
         ? `text-${color}-500 hover:text-${color}-600 focus-visible:text-${color}-600`

packages/hoppscotch-app/components/tab/Secondary.vue

@@ -3,7 +3,7 @@
     :to="`${/^\/(?!\/).*$/.test(to) ? localePath(to) : to}`"
     :exact="exact"
     :blank="blank"
-    class="font-semibold flex-1 py-2 transform transition inline-flex items-center truncate hover:translate-x-2 focus:outline-none focus-visible:translate-x-2"
+    class="hover:translate-x-2 focus:outline-none focus-visible:translate-x-2 inline-flex items-center flex-1 py-2 font-semibold truncate transition transform"
     :class="[
       label ? 'px-3' : 'px-2',
       active

packages/hoppscotch-app/components/teams/Edit.vue

@@ -2,7 +2,7 @@
   <SmartModal v-if="show" :title="t('team.edit')" @close="hideModal">
     <template #body>
       <div class="flex flex-col px-2">
-        <div class="flex relative">
+        <div class="relative flex">
           <input
             id="selectLabelTeamEdit"
             v-model="name"
@@ -17,7 +17,7 @@
             {{ t("action.label") }}
           </label>
         </div>
-        <div class="flex flex-1 pt-4 items-center justify-between">
+        <div class="flex items-center justify-between flex-1 pt-4">
           <label for="memberList" class="p-4">
             {{ t("team.members") }}
           </label>
@@ -47,19 +47,19 @@
             E.isRight(teamDetails.data) &&
             teamDetails.data.right.team.teamMembers
           "
-          class="divide-dividerLight divide-y border border-divider rounded"
+          class="divide-dividerLight border-divider border divide-y rounded"
         >
           <div
             v-if="teamDetails.data.right.team.teamMembers === 0"
-            class="flex flex-col text-secondaryLight p-4 items-center justify-center"
+            class="text-secondaryLight flex flex-col items-center justify-center p-4"
           >
             <img
               :src="`/images/states/${$colorMode.value}/add_group.svg`"
               loading="lazy"
-              class="flex-col object-contain object-center h-16 my-4 w-16 inline-flex"
+              class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
               :alt="`${t('empty.members')}`"
             />
-            <span class="text-center pb-4">
+            <span class="pb-4 text-center">
               {{ t("empty.members") }}
             </span>
             <ButtonSecondary
@@ -76,10 +76,10 @@
             <div
               v-for="(member, index) in membersList"
               :key="`member-${index}`"
-              class="divide-dividerLight divide-x flex"
+              class="divide-dividerLight flex divide-x"
             >
               <input
-                class="bg-transparent flex flex-1 py-2 px-4"
+                class="flex flex-1 px-4 py-2 bg-transparent"
                 :placeholder="`${t('team.email')}`"
                 :name="'param' + index"
                 :value="member.email"
@@ -96,21 +96,20 @@
                   <template #trigger>
                     <span class="select-wrapper">
                       <input
-                        class="bg-transparent cursor-pointer flex flex-1 py-2 px-4"
+                        class="flex flex-1 px-4 py-2 bg-transparent cursor-pointer"
                         :placeholder="`${t('team.permissions')}`"
                         :name="'value' + index"
-                        :value="member.role"
+                        :value="
+                          typeof member.role === 'string'
+                            ? member.role
+                            : JSON.stringify(member.role)
+                        "
                         readonly
                       />
                     </span>
                   </template>
                   <SmartItem
                     label="OWNER"
-                    :icon="
-                      member.role === 'OWNER'
-                        ? 'radio_button_checked'
-                        : 'radio_button_unchecked'
-                    "
                     @click.native="
                       () => {
                         updateMemberRole(member.userID, 'OWNER')
@@ -120,11 +119,6 @@
                   />
                   <SmartItem
                     label="EDITOR"
-                    :icon="
-                      member.role === 'EDITOR'
-                        ? 'radio_button_checked'
-                        : 'radio_button_unchecked'
-                    "
                     @click.native="
                       () => {
                         updateMemberRole(member.userID, 'EDITOR')
@@ -134,11 +128,6 @@
                   />
                   <SmartItem
                     label="VIEWER"
-                    :icon="
-                      member.role === 'VIEWER'
-                        ? 'radio_button_checked'
-                        : 'radio_button_unchecked'
-                    "
                     @click.native="
                       () => {
                         updateMemberRole(member.userID, 'VIEWER')
@@ -165,7 +154,7 @@
           v-if="!teamDetails.loading && E.isLeft(teamDetails.data)"
           class="flex flex-col items-center"
         >
-          <i class="mb-4 material-icons">help_outline</i>
+          <i class="material-icons mb-4">help_outline</i>
           {{ t("error.something_went_wrong") }}
         </div>
       </div>

packages/hoppscotch-app/components/teams/Invite.vue

@@ -2,8 +2,8 @@
   <SmartModal v-if="show" :title="t('team.invite')" @close="hideModal">
     <template #body>
       <div v-if="sendInvitesResult.length" class="flex flex-col px-4">
-        <div class="flex flex-col max-w-md items-center justify-center">
-          <SmartIcon class="h-6 text-accent w-6" name="users" />
+        <div class="flex flex-col items-center justify-center max-w-md">
+          <SmartIcon class="text-accent w-6 h-6" name="users" />
           <h3 class="my-2 text-lg text-center">
             {{ t("team.we_sent_invite_link") }}
           </h3>
@@ -12,7 +12,7 @@
           </p>
         </div>
         <div
-          class="border border-dividerLight rounded flex flex-col space-y-6 mt-8 p-4"
+          class="border-dividerLight flex flex-col p-4 mt-8 space-y-6 border rounded"
         >
           <div
             v-for="(invitee, index) in sendInvitesResult"
@@ -20,7 +20,7 @@
           >
             <p class="flex items-center">
               <i
-                class="mr-4 material-icons"
+                class="material-icons mr-4"
                 :class="
                   invitee.status === 'error' ? 'text-red-500' : 'text-green-500'
                 "
@@ -41,20 +41,20 @@
       </div>
       <div
         v-else-if="sendingInvites"
-        class="flex p-4 items-center justify-center"
+        class="flex items-center justify-center p-4"
       >
         <SmartSpinner />
       </div>
       <div v-else class="flex flex-col px-2">
-        <div class="flex flex-1 items-center justify-between">
+        <div class="flex items-center justify-between flex-1">
           <label for="memberList" class="px-4 pb-4">
             {{ t("team.pending_invites") }}
           </label>
         </div>
-        <div class="divide-dividerLight divide-y border border-divider rounded">
+        <div class="divide-dividerLight border-divider border divide-y rounded">
           <div
             v-if="pendingInvites.loading"
-            class="flex p-4 items-center justify-center"
+            class="flex items-center justify-center p-4"
           >
             <SmartSpinner />
           </div>
@@ -66,21 +66,25 @@
                 v-for="(invitee, index) in pendingInvites.data.right.team
                   .teamInvitations"
                 :key="`invitee-${index}`"
-                class="divide-dividerLight divide-x flex"
+                class="divide-dividerLight flex divide-x"
               >
                 <input
                   v-if="invitee"
-                  class="bg-transparent flex flex-1 text-secondaryLight py-2 px-4"
+                  class="text-secondaryLight flex flex-1 px-4 py-2 bg-transparent"
                   :placeholder="`${t('team.email')}`"
                   :name="'param' + index"
                   :value="invitee.inviteeEmail"
                   readonly
                 />
                 <input
-                  class="bg-transparent flex flex-1 text-secondaryLight py-2 px-4"
+                  class="text-secondaryLight flex flex-1 px-4 py-2 bg-transparent"
                   :placeholder="`${t('team.permissions')}`"
                   :name="'value' + index"
-                  :value="invitee.inviteeRole"
+                  :value="
+                    typeof invitee.inviteeRole === 'string'
+                      ? invitee.inviteeRole
+                      : JSON.stringify(invitee.inviteeRole)
+                  "
                   readonly
                 />
                 <div class="flex">
@@ -99,7 +103,7 @@
                 E.isRight(pendingInvites.data) &&
                 pendingInvites.data.right.team.teamInvitations.length === 0
               "
-              class="flex flex-col text-secondaryLight p-4 items-center justify-center"
+              class="text-secondaryLight flex flex-col items-center justify-center p-4"
             >
               <span class="text-center">
                 {{ t("empty.pending_invites") }}
@@ -107,14 +111,14 @@
             </div>
             <div
               v-if="!pendingInvites.loading && E.isLeft(pendingInvites.data)"
-              class="flex flex-col p-4 items-center"
+              class="flex flex-col items-center p-4"
             >
-              <i class="mb-4 material-icons">help_outline</i>
+              <i class="material-icons mb-4">help_outline</i>
               {{ t("error.something_went_wrong") }}
             </div>
           </div>
         </div>
-        <div class="flex flex-1 pt-4 items-center justify-between">
+        <div class="flex items-center justify-between flex-1 pt-4">
           <label for="memberList" class="p-4">
             {{ t("team.invite_tooltip") }}
           </label>
@@ -127,15 +131,15 @@
             />
           </div>
         </div>
-        <div class="divide-dividerLight divide-y border border-divider rounded">
+        <div class="divide-dividerLight border-divider border divide-y rounded">
           <div
             v-for="(invitee, index) in newInvites"
             :key="`new-invitee-${index}`"
-            class="divide-dividerLight divide-x flex"
+            class="divide-dividerLight flex divide-x"
           >
             <input
               v-model="invitee.key"
-              class="bg-transparent flex flex-1 py-2 px-4"
+              class="flex flex-1 px-4 py-2 bg-transparent"
               :placeholder="`${t('team.email')}`"
               :name="'invitee' + index"
               autofocus
@@ -151,21 +155,20 @@
                 <template #trigger>
                   <span class="select-wrapper">
                     <input
-                      class="bg-transparent cursor-pointer flex flex-1 py-2 px-4"
+                      class="flex flex-1 px-4 py-2 bg-transparent cursor-pointer"
                       :placeholder="`${t('team.permissions')}`"
                       :name="'value' + index"
-                      :value="invitee.value"
+                      :value="
+                        typeof invitee.value === 'string'
+                          ? invitee.value
+                          : JSON.stringify(invitee.value)
+                      "
                       readonly
                     />
                   </span>
                 </template>
                 <SmartItem
                   label="OWNER"
-                  :icon="
-                    invitee.value === 'OWNER'
-                      ? 'radio_button_checked'
-                      : 'radio_button_unchecked'
-                  "
                   @click.native="
                     () => {
                       updateNewInviteeRole(index, 'OWNER')
@@ -175,11 +178,6 @@
                 />
                 <SmartItem
                   label="EDITOR"
-                  :icon="
-                    invitee.value === 'EDITOR'
-                      ? 'radio_button_checked'
-                      : 'radio_button_unchecked'
-                  "
                   @click.native="
                     () => {
                       updateNewInviteeRole(index, 'EDITOR')
@@ -189,11 +187,6 @@
                 />
                 <SmartItem
                   label="VIEWER"
-                  :icon="
-                    invitee.value === 'VIEWER'
-                      ? 'radio_button_checked'
-                      : 'radio_button_unchecked'
-                  "
                   @click.native="
                     () => {
                       updateNewInviteeRole(index, 'VIEWER')
@@ -216,15 +209,15 @@
           </div>
           <div
             v-if="newInvites.length === 0"
-            class="flex flex-col text-secondaryLight p-4 items-center justify-center"
+            class="text-secondaryLight flex flex-col items-center justify-center p-4"
           >
             <img
               :src="`/images/states/${$colorMode.value}/add_group.svg`"
               loading="lazy"
-              class="flex-col object-contain object-center h-16 mb-4 w-16 inline-flex"
+              class="inline-flex flex-col object-contain object-center w-16 h-16 mb-4"
               :alt="`${t('empty.invites')}`"
             />
-            <span class="text-center pb-4">
+            <span class="pb-4 text-center">
               {{ t("empty.invites") }}
             </span>
             <ButtonSecondary
@@ -236,12 +229,12 @@
         </div>
         <div
           v-if="newInvites.length"
-          class="border border-dividerLight rounded flex flex-col mt-4 py-4 px-4 items-start"
+          class="border-dividerLight flex flex-col items-start px-4 py-4 mt-4 border rounded"
         >
           <span
-            class="bg-primaryDark border border-divider rounded-full flex font-semibold mb-4 py-1 px-2 items-center justify-center"
+            class="bg-primaryDark border-divider flex items-center justify-center px-2 py-1 mb-4 font-semibold border rounded-full"
           >
-            <i class="mr-2 text-secondaryLight material-icons">help_outline</i>
+            <i class="text-secondaryLight material-icons mr-2">help_outline</i>
             {{ t("profile.roles") }}
           </span>
           <p>
@@ -249,10 +242,10 @@
               {{ t("profile.roles_description") }}
             </span>
           </p>
-          <ul class="space-y-4 mt-4">
+          <ul class="mt-4 space-y-4">
             <li class="flex">
               <span
-                class="font-semibold text-secondaryDark max-w-16 w-1/4 uppercase truncate"
+                class="text-secondaryDark max-w-16 w-1/4 font-semibold uppercase truncate"
               >
                 {{ t("profile.owner") }}
               </span>
@@ -262,7 +255,7 @@
             </li>
             <li class="flex">
               <span
-                class="font-semibold text-secondaryDark max-w-16 w-1/4 uppercase truncate"
+                class="text-secondaryDark max-w-16 w-1/4 font-semibold uppercase truncate"
               >
                 {{ t("profile.editor") }}
               </span>
@@ -272,7 +265,7 @@
             </li>
             <li class="flex">
               <span
-                class="font-semibold text-secondaryDark max-w-16 w-1/4 uppercase truncate"
+                class="text-secondaryDark max-w-16 w-1/4 font-semibold uppercase truncate"
               >
                 {{ t("profile.viewer") }}
               </span>
@@ -287,7 +280,7 @@
     <template #footer>
       <p
         v-if="sendInvitesResult.length"
-        class="flex flex-1 text-secondaryLight justify-between"
+        class="text-secondaryLight flex justify-between flex-1"
       >
         <SmartAnchor
           class="link"

packages/hoppscotch-app/components/teams/Team.vue

@@ -1,10 +1,7 @@
 <template>
-  <div
-    class="border border-divider rounded flex flex-col flex-1"
-    @contextmenu.prevent="!compact ? $refs.options.tippy().show() : null"
-  >
+  <div class="flex flex-col flex-1 border rounded border-divider">
     <div
-      class="flex flex-1 items-start"
+      class="flex items-start flex-1"
       :class="
         compact
           ? team.myRole === 'OWNER'
@@ -27,7 +24,7 @@
         >
           {{ team.name || t("state.nothing_found") }}
         </label>
-        <div class="flex -space-x-1 mt-2 overflow-hidden">
+        <div class="flex mt-2 overflow-hidden -space-x-1">
           <img
             v-for="(member, index) in team.teamMembers"
             :key="`member-${index}`"
@@ -35,13 +32,13 @@
             :title="member.user.displayName"
             :src="member.user.photoURL || undefined"
             :alt="member.user.displayName"
-            class="rounded-full h-5 ring-primary ring-2 w-5 inline-block"
+            class="inline-block w-5 h-5 rounded-full ring-primary ring-2"
             loading="lazy"
           />
         </div>
       </div>
     </div>
-    <div v-if="!compact" class="flex flex-shrink-0 items-end justify-between">
+    <div v-if="!compact" class="flex items-end justify-between flex-shrink-0">
       <span>
         <ButtonSecondary
           v-if="team.myRole === 'OWNER'"