fix: test breaking for script setup

.github/ISSUE_TEMPLATE/--bug-report.yaml

@@ -1,57 +0,0 @@
-name: Bug report
-description: Create a bug report to help us improve Hoppscotch
-title: "[bug]: "
-labels: [bug, need testing]
-body:
-- type: markdown
-  attributes:
-    value: |
-      Thank you for taking the time to fill out this bug report.
-- type: checkboxes
-  attributes:
-    label: Is there an existing issue for this?
-    description: Please search to see if an issue already exists for the bug you encountered
-    options:
-    - label: I have searched the existing issues
-      required: true
-- type: textarea
-  attributes:
-    label: Current behavior
-    description: A concise description of what you're experiencing and what you expect
-    placeholder: |
-      When I do <X>, <Y> happens and I see the error message attached below:
-      ```...```
-      What I expect is <Z>
-  validations:
-    required: true
-- type: textarea
-  attributes:
-    label: Steps to reproduce
-    description: Add steps to reproduce this behaviour, include console or network logs and screenshots
-    placeholder: |
-      1. Go to '...'
-      2. Click on '....'
-      3. Scroll down to '....'
-      4. See error
-  validations:
-    required: true
-- type: dropdown
-  id: env
-  attributes:
-    label: Environment
-    options:
-      - Production
-      - Release
-      - Deploy preview
-  validations:
-    required: true
-- type: dropdown
-  id: version
-  attributes:
-    label: Version
-    options:
-      - Cloud
-      - Self-hosted
-      - Local
-  validations:
-    required: true

.github/ISSUE_TEMPLATE/--feature-request.yaml

@@ -1,28 +0,0 @@
-name: Feature request
-description: Suggest a feature to improve Hoppscotch
-title: "[feature]: "
-labels: [feature]
-body:
-- type: markdown
-  attributes:
-    value: |
-      Thank you for taking the time to request a feature for Hoppscotch
-- type: checkboxes
-  attributes:
-    label: Is there an existing issue for this?
-    description: Please search to see if an issue related to this feature request already exists
-    options:
-    - label: I have searched the existing issues
-      required: true
-- type: textarea
-  attributes:
-    label: Summary
-    description: One paragraph description of the feature
-  validations:
-    required: true
-- type: textarea
-  attributes:
-    label: Why should this be worked on?
-    description: A concise description of the problems or use cases for this feature request
-  validations:
-    required: true

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,38 @@
+---
+name: Bug report
+about: Create a report to help us improve
+title: ''
+labels: ''
+assignees: ''
+
+---
+
+**Describe the bug**
+A clear and concise description of what the bug is.
+
+**To Reproduce**
+Steps to reproduce the behavior:
+1. Go to '...'
+2. Click on '....'
+3. Scroll down to '....'
+4. See error
+
+**Expected behavior**
+A clear and concise description of what you expected to happen.
+
+**Screenshots**
+If applicable, add screenshots to help explain your problem.
+
+**Desktop (please complete the following information):**
+ - OS: [e.g. iOS]
+ - Browser [e.g. chrome, safari]
+ - Version [e.g. 22]
+
+**Smartphone (please complete the following information):**
+ - Device: [e.g. iPhone6]
+ - OS: [e.g. iOS8.1]
+ - Browser [e.g. stock browser, safari]
+ - Version [e.g. 22]
+
+**Additional context**
+Add any other context about the problem here.

.github/ISSUE_TEMPLATE/config.yml

@@ -1,7 +0,0 @@
-contact_links:
-  - name: Help and support
-    url: https://github.com/hoppscotch/hoppscotch#support
-    about: Reach out to us on our Discord server or Telegram group or GitHub discussions.
-  - name: Dedicated support
-    url: mailto:support@hoppscotch.io
-    about: Write to us if you'd like dedicated support using Hoppscotch

.github/ISSUE_TEMPLATE/custom.md

@@ -0,0 +1,8 @@
+---
+name: Custom issue template
+about: Describe this issue template's purpose here.
+title: ''
+labels: ''
+assignees: ''
+
+---

.github/ISSUE_TEMPLATE/feature_request.md

@@ -0,0 +1,20 @@
+---
+name: Feature request
+about: Suggest an idea for this project
+title: ''
+labels: ''
+assignees: ''
+
+---
+
+**Is your feature request related to a problem? Please describe.**
+A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
+
+**Describe the solution you'd like**
+A clear and concise description of what you want to happen.
+
+**Describe alternatives you've considered**
+A clear and concise description of any alternative solutions or features you've considered.
+
+**Additional context**
+Add any other context or screenshots about the feature request here.

README.md

@@ -46,7 +46,7 @@
 
 #### **Support**
 
-[![Chat on Discord](https://img.shields.io/badge/chat-Discord-7289DA?logo=discord)](https://hoppscotch.io/discord) [![Chat on Telegram](https://img.shields.io/badge/chat-Telegram-2CA5E0?logo=telegram)](https://hoppscotch.io/telegram) [![Discuss on GitHub](https://img.shields.io/badge/discussions-GitHub-333333?logo=github)](https://github.com/hoppscotch/hoppscotch/discussions)
+[![Chat on Discord](https://img.shields.io/badge/chat-Discord-7289DA?logo=discord)](https://hoppscotch.io/discord) [![Chat on Telegram](https://img.shields.io/badge/chat-Telegram-2CA5E0?logo=Telegram)](https://hoppscotch.io/telegram)
 
 <details open>
   <summary><b>Table of contents</b></summary>

SECURITY.md

@@ -1,26 +0,0 @@
-# Security Policy
-
-This document outlines security procedures and general policies for the Hoppscotch project.
-
-1. [Reporting a security vulnerability](#reporting-a-security-vulnerability)
-3. [Incident response process](#incident-response-process)
-
-## Reporting a security vulnerability
-
-Report security vulnerabilities by emailing the Hoppscotch Support team at support@hoppscotch.io.
-
-The primary security point of contact from Hoppscotch Support team will acknowledge your email within 48 hours, and will send a more detailed response within 48 hours indicating the next steps in handling your report. After the initial reply to your report, the security team will endeavor to keep you informed of the progress towards a fix and full announcement, and may ask for additional information or guidance.
-
-**Do not create a GitHub issue ticket to report a security vulnerability.**
-
-The Hoppscotch team and community take all security vulnerability reports in Hoppscotch seriously. Thank you for improving the security of Hoppscotch. We appreciate your efforts and responsible disclosure and will make every effort to acknowledge your contributions.
-
-Report security bugs in third-party modules to the person or team maintaining the module.
-
-## Incident response process
-
-In case an incident is discovered or reported, we will follow the following  process to contain, respond, and remediate:
-
-1. Confirm the problem and determine the affected versions.
-2. Audit code to find any potential similar problems.
-3. Prepare fixes for all releases still under maintenance. These fixes will be deployed as fast as possible to production.

TRANSLATIONS.md

@@ -9,19 +9,16 @@ Before you start working on a new language, please look through the [open pull r
 if there is no existing translation, you can create a new one by following these steps:
 
 1. **[Fork the repository](https://github.com/hoppscotch/hoppscotch/fork).**
-2. **Checkout the `i18n` branch for latest translations.**
+2. **Create a new branch for your translation.**
-3. **Create a new branch for your translation with base branch `i18n`.**
+3. **Create target language file in the [`locales`](https://github.com/hoppscotch/hoppscotch/tree/main/packages/hoppscotch-app/locales) directory.**
-4. **Create target language file in the [`locales`](https://github.com/hoppscotch/hoppscotch/tree/main/packages/hoppscotch-app/locales) directory.**
+4. **Copy the contents of the source file [`locales/en.json`](https://github.com/hoppscotch/hoppscotch/blob/main/packages/hoppscotch-app/locales/en.json) to the target language file.**
-5. **Copy the contents of the source file [`locales/en.json`](https://github.com/hoppscotch/hoppscotch/blob/main/packages/hoppscotch-app/locales/en.json) to the target language file.**
+5. **Translate the strings in the target language file.**
-6. **Translate the strings in the target language file.**
+6. **Add your language entry to [`languages.json`](https://github.com/hoppscotch/hoppscotch/blob/main/packages/hoppscotch-app/languages.json).**
-7. **Add your language entry to [`languages.json`](https://github.com/hoppscotch/hoppscotch/blob/main/packages/hoppscotch-app/languages.json).**
+7. **Save & commit changes.**
-8. **Save & commit changes.**
+8. **Send a pull request.**
-9. **Send a pull request.**
 
 _You may send a pull request before all steps above are complete: e.g., you may want to ask for help with translations, or getting tests to pass. However, your pull request will not be merged until all steps above are complete._
 
-`i18n` branch will be merged into `main` branch once every week.
-
 Completing an initial translation of the whole site is a fairly large task. One way to break that task up is to work with other translators through pull requests on your fork. You can also [add collaborators to your fork](https://help.github.com/en/github/setting-up-and-managing-your-github-user-account/inviting-collaborators-to-a-personal-repository) if you'd like to invite other translators to commit directly to your fork and share responsibility for merging pull requests.
 
 ## Updating a translation

package.json

@@ -4,7 +4,6 @@
   "description": "Open source API development ecosystem",
   "author": "Hoppscotch (support@hoppscotch.io)",
   "private": true,
-  "license": "MIT",
   "scripts": {
     "preinstall": "npx only-allow pnpm",
     "prepare": "husky install",
@@ -21,10 +20,10 @@
   ],
   "dependencies": {
     "husky": "^7.0.4",
-    "lint-staged": "^12.1.2"
+    "lint-staged": "^12.0.2"
   },
   "devDependencies": {
-    "@commitlint/cli": "^15.0.0",
+    "@commitlint/cli": "^14.1.0",
-    "@commitlint/config-conventional": "^15.0.0"
+    "@commitlint/config-conventional": "^14.1.0"
   }
 }

packages/codemirror-lang-graphql/package.json

@@ -2,7 +2,6 @@
   "name": "@hoppscotch/codemirror-lang-graphql",
   "version": "0.1.0",
   "description": "GraphQL language support for CodeMirror",
-  "author": "Hoppscotch (support@hoppscotch.io)",
   "scripts": {
     "prepare": "rollup -c"
   },
@@ -16,17 +15,17 @@
   "types": "dist/index.d.ts",
   "sideEffects": false,
   "dependencies": {
-    "@codemirror/highlight": "^0.19.6",
+    "@codemirror/highlight": "^0.19.0",
-    "@codemirror/language": "^0.19.6",
+    "@codemirror/language": "^0.19.0",
     "@lezer/lr": "^0.15.0"
   },
   "devDependencies": {
     "@lezer/generator": "^0.15.0",
     "mocha": "^9.0.1",
-    "rollup": "^2.60.1",
+    "rollup": "^2.35.1",
-    "rollup-plugin-dts": "^4.0.1",
+    "rollup-plugin-dts": "^3.0.2",
-    "rollup-plugin-ts": "^2.0.4",
+    "rollup-plugin-ts": "^1.4.0",
-    "typescript": "^4.5.2"
+    "typescript": "^4.3.4"
   },
   "license": "MIT"
 }

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

@@ -1,3 +1,10 @@
 <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="M21 12a9 9 0 11-6.219-8.56"></path>
+  <line x1="12" y1="2" x2="12" y2="6"></line>
+  <line x1="12" y1="18" x2="12" y2="22"></line>
+  <line x1="4.93" y1="4.93" x2="7.76" y2="7.76"></line>
+  <line x1="16.24" y1="16.24" x2="19.07" y2="19.07"></line>
+  <line x1="2" y1="12" x2="6" y2="12"></line>
+  <line x1="18" y1="12" x2="22" y2="12"></line>
+  <line x1="4.93" y1="19.07" x2="7.76" y2="16.24"></line>
+  <line x1="16.24" y1="7.76" x2="19.07" y2="4.93"></line>
 </svg>

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

@@ -27,24 +27,23 @@
   @apply h-4;
 }
 
-.hide-scrollbar {
-  -ms-overflow-style: none;
-  scrollbar-width: none;
-}
-
 .hide-scrollbar::-webkit-scrollbar {
   @apply hidden;
 }
 
 ::selection {
-  @apply bg-accentDark;
+  @apply bg-divider;
-  @apply text-accentContrast;
+}
+
+.cm-focused {
+  @apply !outline-none;
 }
 
 input::placeholder,
-textarea::placeholder {
+textarea::placeholder,
+.CodeMirror-empty {
   @apply text-secondary;
-  @apply opacity-35;
+  @apply opacity-25;
 }
 
 input,
@@ -67,6 +66,7 @@ body {
   animation: fade 300ms forwards;
   font-size: var(--body-font-size);
   line-height: var(--body-line-height);
+  overflow: overlay;
   -webkit-tap-highlight-color: transparent;
   -webkit-touch-callout: none;
 }
@@ -318,7 +318,7 @@ pre.ace_editor {
     &.toasted-primary {
       @apply bg-tooltip;
       @apply text-primary;
-      @apply justify-between;
+      @apply justify-start;
       @apply shadow;
       @apply font-medium;
       @apply transition;
@@ -391,7 +391,7 @@ pre.ace_editor {
 .smart-splitter .splitpanes__splitter::before {
   @apply absolute;
   @apply inset-0;
-  @apply bg-accentLight;
+  @apply bg-dividerLight;
   @apply opacity-0;
   @apply z-20;
   @apply transition;
@@ -435,16 +435,29 @@ pre.ace_editor {
   @apply w-full;
 }
 
-.cm-focused {
+.CodeMirror {
-  @apply select-auto;
+  @apply !h-auto;
-  @apply !outline-none;
 
-  .cm-activeLine {
+  font-size: var(--body-font-size);
-    @apply bg-primaryLight;
+
+  &:not(.CodeMirror-focused) .CodeMirror-activeline-background {
+    background: transparent !important;
   }
 
-  .cm-activeLineGutter {
+  .CodeMirror-dialog-top {
-    @apply bg-primaryDark;
+    @apply bg-primaryLight;
+    @apply border-dividerLight;
+    @apply px-4;
+    @apply py-2;
+    @apply z-5;
+  }
+
+  .CodeMirror-scroll {
+    @apply min-h-64;
+  }
+
+  * {
+    font-family: "Roboto Mono", monospace;
   }
 }
 

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

@@ -53,17 +53,17 @@
 }
 
 @mixin dark-editor-theme {
-  --editor-type-color: theme("colors.purple.400");
+  --editor-type-color: theme("colors.purple.500");
-  --editor-name-color: theme("colors.blue.400");
+  --editor-name-color: theme("colors.blue.500");
-  --editor-operator-color: theme("colors.indigo.400");
+  --editor-operator-color: theme("colors.indigo.500");
-  --editor-invalid-color: theme("colors.red.400");
+  --editor-invalid-color: theme("colors.red.500");
-  --editor-separator-color: theme("colors.gray.400");
+  --editor-separator-color: theme("colors.gray.500");
-  --editor-meta-color: theme("colors.gray.400");
+  --editor-meta-color: theme("colors.gray.500");
-  --editor-variable-color: theme("colors.green.400");
+  --editor-variable-color: theme("colors.green.500");
-  --editor-link-color: theme("colors.cyan.400");
+  --editor-link-color: theme("colors.cyan.500");
-  --editor-process-color: theme("colors.fuchsia.400");
+  --editor-process-color: theme("colors.gray.400");
-  --editor-constant-color: theme("colors.violet.400");
+  --editor-constant-color: theme("colors.fuchsia.500");
-  --editor-keyword-color: theme("colors.pink.400");
+  --editor-keyword-color: theme("colors.pink.500");
 }
 
 @mixin light-editor-theme {
@@ -82,15 +82,15 @@
 
 @mixin black-editor-theme {
   --editor-type-color: theme("colors.purple.400");
-  --editor-name-color: theme("colors.fuchsia.400");
+  --editor-name-color: theme("colors.gray.400");
   --editor-operator-color: theme("colors.indigo.400");
   --editor-invalid-color: theme("colors.red.400");
   --editor-separator-color: theme("colors.gray.400");
   --editor-meta-color: theme("colors.gray.400");
   --editor-variable-color: theme("colors.green.400");
   --editor-link-color: theme("colors.cyan.400");
-  --editor-process-color: theme("colors.violet.400");
+  --editor-process-color: theme("colors.blue.400");
-  --editor-constant-color: theme("colors.blue.400");
+  --editor-constant-color: theme("colors.fuchsia.400");
   --editor-keyword-color: theme("colors.pink.400");
 }
 

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

@@ -1,23 +1,26 @@
 <template>
   <div class="bg-error flex justify-between">
     <span
-      class="group relative flex items-center justify-center px-4 py-2 transition"
+      class="
+        flex
+        py-2
+        px-4
+        transition
+        relative
+        items-center
+        justify-center
+        group
+      "
     >
-      <i class="material-icons mr-2">info_outline</i>
+      <i class="mr-2 material-icons">info_outline</i>
       <span class="text-secondaryDark">
         <span class="md:hidden">
-          {{ t("helpers.offline_short") }}
+          {{ $t("helpers.offline_short") }}
         </span>
-        <span class="md:inline hidden">
+        <span class="hidden md:inline">
-          {{ t("helpers.offline") }}
+          {{ $t("helpers.offline") }}
         </span>
       </span>
     </span>
   </div>
 </template>
-
-<script setup lang="ts">
-import { useI18n } from "~/helpers/utils/composables"
-
-const t = useI18n()
-</script>

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

@@ -4,7 +4,7 @@
       <div class="flex">
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
-          :title="EXPAND_NAVIGATION ? t('hide.sidebar') : t('show.sidebar')"
+          :title="EXPAND_NAVIGATION ? $t('hide.sidebar') : $t('show.sidebar')"
           svg="sidebar"
           class="transform"
           :class="{ '-rotate-180': !EXPAND_NAVIGATION }"
@@ -12,9 +12,9 @@
         />
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
-          :title="`${ZEN_MODE ? t('action.turn_off') : t('action.turn_on')} ${t(
+          :title="`${
-            'layout.zen_mode'
+            ZEN_MODE ? $t('action.turn_off') : $t('action.turn_on')
-          )}`"
+          } ${$t('layout.zen_mode')}`"
           :svg="ZEN_MODE ? 'minimize' : 'maximize'"
           :class="{
             '!text-accent !focus-visible:text-accentDark !hover:text-accentDark':
@@ -36,20 +36,20 @@
               <ButtonSecondary
                 svg="help-circle"
                 class="!rounded-none"
-                :label="`${t('app.help')}`"
+                :label="`${$t('app.help')}`"
               />
             </template>
             <div class="flex flex-col">
               <SmartItem
                 svg="book"
-                :label="`${t('app.documentation')}`"
+                :label="`${$t('app.documentation')}`"
                 to="https://docs.hoppscotch.io"
                 blank
                 @click.native="$refs.options.tippy().hide()"
               />
               <SmartItem
                 svg="zap"
-                :label="`${t('app.keyboard_shortcuts')}`"
+                :label="`${$t('app.keyboard_shortcuts')}`"
                 @click.native="
                   () => {
                     showShortcuts = true
@@ -59,14 +59,14 @@
               />
               <SmartItem
                 svg="gift"
-                :label="`${t('app.whats_new')}`"
+                :label="`${$t('app.whats_new')}`"
                 to="https://docs.hoppscotch.io/changelog"
                 blank
                 @click.native="$refs.options.tippy().hide()"
               />
               <SmartItem
                 svg="message-circle"
-                :label="`${t('app.chat_with_us')}`"
+                :label="`${$t('app.chat_with_us')}`"
                 @click.native="
                   () => {
                     chatWithUs()
@@ -77,21 +77,21 @@
               <hr />
               <SmartItem
                 svg="github"
-                :label="`${t('app.github')}`"
+                :label="`${$t('app.github')}`"
                 to="https://github.com/hoppscotch/hoppscotch"
                 blank
                 @click.native="$refs.options.tippy().hide()"
               />
               <SmartItem
                 svg="twitter"
-                :label="`${t('app.twitter')}`"
+                :label="`${$t('app.twitter')}`"
                 to="https://hoppscotch.io/twitter"
                 blank
                 @click.native="$refs.options.tippy().hide()"
               />
               <SmartItem
                 svg="user-plus"
-                :label="`${t('app.invite')}`"
+                :label="`${$t('app.invite')}`"
                 @click.native="
                   () => {
                     showShare = true
@@ -101,14 +101,14 @@
               />
               <SmartItem
                 svg="lock"
-                :label="`${t('app.terms_and_privacy')}`"
+                :label="`${$t('app.terms_and_privacy')}`"
                 to="https://docs.hoppscotch.io/privacy"
                 blank
                 @click.native="$refs.options.tippy().hide()"
               />
-              <!-- <SmartItem :label="t('app.status')" /> -->
+              <!-- <SmartItem :label="$t('app.status')" /> -->
-              <div class="flex px-4 py-2 opacity-50">
+              <div class="flex opacity-50 py-2 px-4">
-                {{ `${t("app.name")} ${t("app.version")}` }}
+                {{ `${$t("app.name")} ${$t("app.version")}` }}
               </div>
             </div>
           </tippy>
@@ -116,33 +116,33 @@
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           svg="zap"
-          :title="t('app.shortcuts')"
+          :title="$t('app.shortcuts')"
           @click.native="showShortcuts = true"
         />
         <ButtonSecondary
           v-if="navigatorShare"
           v-tippy="{ theme: 'tooltip' }"
           svg="share-2"
-          :title="t('request.share')"
+          :title="$t('request.share')"
           @click.native="nativeShare()"
         />
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
-          :title="COLUMN_LAYOUT ? t('layout.row') : t('layout.column')"
+          :title="COLUMN_LAYOUT ? $t('layout.row') : $t('layout.column')"
           svg="columns"
           class="transform"
           :class="{ 'rotate-90': !COLUMN_LAYOUT }"
           @click.native="COLUMN_LAYOUT = !COLUMN_LAYOUT"
         />
         <span
-          class="transition transform"
+          class="transform transition"
           :class="{
             'rotate-180': SIDEBAR_ON_LEFT,
           }"
         >
           <ButtonSecondary
             v-tippy="{ theme: 'tooltip' }"
-            :title="SIDEBAR ? t('hide.sidebar') : t('show.sidebar')"
+            :title="SIDEBAR ? $t('hide.sidebar') : $t('show.sidebar')"
             svg="sidebar-open"
             class="transform"
             :class="{ 'rotate-180': !SIDEBAR }"
@@ -161,9 +161,7 @@ import { ref, watch } from "@nuxtjs/composition-api"
 import { defineActionHandler } from "~/helpers/actions"
 import { showChat } from "~/helpers/support"
 import { useSetting } from "~/newstore/settings"
-import { useI18n } from "~/helpers/utils/composables"
 
-const t = useI18n()
 const showShortcuts = ref(false)
 const showShare = ref(false)
 

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

@@ -11,11 +11,11 @@
     />
     <div
       v-if="searchResults.length === 0"
-      class="text-secondaryLight flex flex-col items-center justify-center p-4"
+      class="flex flex-col text-secondaryLight p-4 items-center justify-center"
     >
-      <i class="material-icons pb-2 opacity-75">manage_search</i>
+      <i class="opacity-75 pb-2 material-icons">manage_search</i>
       <span class="text-center">
-        {{ t("state.nothing_found") }} "{{ search }}"
+        {{ $t("state.nothing_found") }} "{{ search }}"
       </span>
     </div>
   </div>
@@ -26,9 +26,6 @@ import { computed, onUnmounted, onMounted } from "@nuxtjs/composition-api"
 import Fuse from "fuse.js"
 import { useArrowKeysNavigation } from "~/helpers/powerSearchNavigation"
 import { HoppAction } from "~/helpers/actions"
-import { useI18n } from "~/helpers/utils/composables"
-
-const t = useI18n()
 
 const props = defineProps<{
   input: Record<string, any>[]

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

@@ -1,9 +1,9 @@
 <template>
   <div>
     <header
-      class="flex items-center justify-between flex-1 px-2 py-2 space-x-2"
+      class="flex space-x-2 flex-1 py-2 px-2 items-center justify-between"
     >
-      <div class="inline-flex items-center space-x-2">
+      <div class="space-x-2 inline-flex items-center">
         <ButtonSecondary
           class="tracking-wide !font-bold !text-secondaryDark"
           label="HOPPSCOTCH"
@@ -11,25 +11,25 @@
         />
         <AppGitHubStarButton class="mt-1.5 transition hidden sm:flex" />
       </div>
-      <div class="inline-flex items-center space-x-2">
+      <div class="space-x-2 inline-flex items-center">
         <ButtonSecondary
           id="installPWA"
           v-tippy="{ theme: 'tooltip' }"
-          :title="t('header.install_pwa')"
+          :title="$t('header.install_pwa')"
           svg="download"
           class="rounded"
           @click.native="showInstallPrompt()"
         />
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
-          :title="`${t('app.search')} <kbd>/</kbd>`"
+          :title="`${$t('app.search')} <kbd>/</kbd>`"
           svg="search"
           class="rounded"
           @click.native="showSearch = true"
         />
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
-          :title="`${t('support.title')} <kbd>?</kbd>`"
+          :title="`${$t('support.title')} <kbd>?</kbd>`"
           svg="life-buoy"
           class="rounded"
           @click.native="showSupport = true"
@@ -37,23 +37,28 @@
         <ButtonSecondary
           v-if="currentUser === null"
           svg="upload-cloud"
-          :label="t('header.save_workspace')"
+          :label="$t('header.save_workspace')"
           filled
-          class="md:flex hidden"
+          class="hidden md:flex"
           @click.native="showLogin = true"
         />
         <ButtonPrimary
           v-if="currentUser === null"
-          :label="t('header.login')"
+          :label="$t('header.login')"
           @click.native="showLogin = true"
         />
-        <div v-else class="inline-flex items-center space-x-2">
+        <div v-else class="space-x-2 inline-flex items-center">
           <ButtonPrimary
             v-tippy="{ theme: 'tooltip' }"
-            :title="t('team.invite_tooltip')"
+            :title="$t('team.invite_tooltip')"
-            :label="t('team.invite')"
+            :label="$t('team.invite')"
             svg="user-plus"
-            class="!bg-green-500 !text-green-500 !bg-opacity-15 !hover:bg-opacity-10 !hover:text-green-600 !hover:bg-green-400"
+            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">
@@ -73,7 +78,7 @@
                 <ButtonSecondary
                   v-else
                   v-tippy="{ theme: 'tooltip' }"
-                  :title="t('header.account')"
+                  :title="$t('header.account')"
                   class="rounded"
                   svg="user"
                 />
@@ -81,13 +86,13 @@
               <SmartItem
                 to="/profile"
                 svg="user"
-                :label="t('navigation.profile')"
+                :label="$t('navigation.profile')"
                 @click.native="$refs.user.tippy().hide()"
               />
               <SmartItem
                 to="/settings"
                 svg="settings"
-                :label="t('navigation.settings')"
+                :label="$t('navigation.settings')"
                 @click.native="$refs.user.tippy().hide()"
               />
               <FirebaseLogout @confirm-logout="$refs.user.tippy().hide()" />
@@ -105,20 +110,18 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref } from "@nuxtjs/composition-api"
+import { onMounted, ref, useContext } from "@nuxtjs/composition-api"
 import intializePwa from "~/helpers/pwa"
 import { probableUser$ } from "~/helpers/fb/auth"
 import { getLocalConfig, setLocalConfig } from "~/newstore/localpersistence"
-import {
+import { useReadonlyStream } from "~/helpers/utils/composables"
-  useReadonlyStream,
-  useI18n,
-  useToast,
-} from "~/helpers/utils/composables"
 import { defineActionHandler } from "~/helpers/actions"
 
-const t = useI18n()
+const {
-
+  $toast,
-const toast = useToast()
+  app: { i18n },
+} = useContext()
+const t = i18n.t.bind(i18n)
 
 /**
  * Once the PWA code is initialized, this holds a method
@@ -157,11 +160,12 @@ onMounted(() => {
 
   const cookiesAllowed = getLocalConfig("cookiesAllowed") === "yes"
   if (!cookiesAllowed) {
-    toast.show(`${t("app.we_use_cookies")}`, {
+    $toast.show(t("app.we_use_cookies").toString(), {
+      icon: "cookie",
       duration: 0,
       action: [
         {
-          text: `${t("action.learn_more")}`,
+          text: t("action.learn_more").toString(),
           onClick: (_, toastObject) => {
             setLocalConfig("cookiesAllowed", "yes")
             toastObject.goAway(0)
@@ -169,7 +173,7 @@ onMounted(() => {
           },
         },
         {
-          text: `${t("action.dismiss")}`,
+          text: t("action.dismiss").toString(),
           onClick: (_, toastObject) => {
             setLocalConfig("cookiesAllowed", "yes")
             toastObject.goAway(0)

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

@@ -1,20 +1,20 @@
 <template>
-  <div class="flex flex-col items-start p-4 space-y-4">
+  <div class="flex p-4 space-y-4 items-start flex-col">
     <SmartToggle
       :on="PROXY_ENABLED"
       @change="toggleSettingKey('PROXY_ENABLED')"
     >
-      {{ t("settings.proxy") }}
+      {{ $t("settings.proxy") }}
     </SmartToggle>
     <SmartToggle
       :on="EXTENSIONS_ENABLED"
       @change="toggleSettingKey('EXTENSIONS_ENABLED')"
     >
-      {{ t("settings.extensions") }}:
+      {{ $t("settings.extensions") }}:
       {{
         extensionVersion != null
           ? `v${extensionVersion.major}.${extensionVersion.minor}`
-          : t("settings.extension_ver_not_reported")
+          : $t("settings.extension_ver_not_reported")
       }}
     </SmartToggle>
   </div>
@@ -25,9 +25,6 @@ import { defineComponent } from "@nuxtjs/composition-api"
 import { KeysMatching } from "~/types/ts-utils"
 import { SettingsType, toggleSetting, useSetting } from "~/newstore/settings"
 import { hasExtensionInstalled } from "~/helpers/strategies/ExtensionStrategy"
-import { useI18n } from "~/helpers/utils/composables"
-
-const t = useI18n()
 
 const PROXY_ENABLED = useSetting("PROXY_ENABLED")
 const EXTENSIONS_ENABLED = useSetting("EXTENSIONS_ENABLED")

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

@@ -13,8 +13,14 @@
         type="text"
         autocomplete="off"
         name="command"
-        :placeholder="`${t('app.type_a_command_search')}`"
+        :placeholder="`${$t('app.type_a_command_search')}`"
-        class="border-dividerLight text-secondaryDark flex flex-shrink-0 p-6 text-base bg-transparent border-b"
+        class="
+          bg-transparent
+          border-b border-dividerLight
+          flex flex-shrink-0
+          text-secondaryDark text-base
+          p-6
+        "
       />
       <AppFuse
         v-if="search && show"
@@ -24,15 +30,22 @@
       />
       <div
         v-else
-        class="divide-dividerLight hide-scrollbar flex flex-col flex-1 space-y-4 overflow-auto divide-y"
+        class="
+          divide-y divide-dividerLight
+          flex flex-col
+          space-y-4
+          flex-1
+          overflow-auto
+          hide-scrollbar
+        "
       >
         <div
           v-for="(map, mapIndex) in mappings"
           :key="`map-${mapIndex}`"
           class="flex flex-col"
         >
-          <h5 class="text-secondaryLight px-6 py-2 my-2">
+          <h5 class="my-2 text-secondaryLight py-2 px-6">
-            {{ t(map.section) }}
+            {{ $t(map.section) }}
           </h5>
           <AppPowerSearchEntry
             v-for="(shortcut, shortcutIndex) in map.shortcuts"
@@ -53,9 +66,6 @@ import { ref, computed, watch } from "@nuxtjs/composition-api"
 import { HoppAction, invokeAction } from "~/helpers/actions"
 import { spotlight as mappings, fuse } from "~/helpers/shortcuts"
 import { useArrowKeysNavigation } from "~/helpers/powerSearchNavigation"
-import { useI18n } from "~/helpers/utils/composables"
-
-const t = useI18n()
 
 const props = defineProps<{
   show: boolean

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

@@ -1,13 +1,22 @@
 <template>
   <button
-    class="search-entry focus:outline-none flex items-center flex-1 px-6 py-2 transition cursor-pointer"
+    class="
+      cursor-pointer
+      flex flex-1
+      py-2
+      px-6
+      transition
+      items-center
+      search-entry
+      focus:outline-none
+    "
     :class="{ active: active }"
     tabindex="-1"
     @click="$emit('action', shortcut.action)"
     @keydown.enter="$emit('action', shortcut.action)"
   >
     <SmartIcon
-      class="svg-icons mr-4 transition opacity-50"
+      class="mr-4 opacity-50 transition svg-icons"
       :class="{ 'opacity-100 text-secondaryDark': active }"
       :name="shortcut.icon"
     />
@@ -15,7 +24,7 @@
       class="flex flex-1 mr-4 font-medium transition"
       :class="{ 'text-secondaryDark': active }"
     >
-      {{ t(shortcut.label) }}
+      {{ $t(shortcut.label) }}
     </span>
     <span
       v-for="(key, keyIndex) in shortcut.keys"
@@ -28,10 +37,6 @@
 </template>
 
 <script setup lang="ts">
-import { useI18n } from "~/helpers/utils/composables"
-
-const t = useI18n()
-
 defineProps<{
   shortcut: Object
   active: Boolean

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

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

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

@@ -1,15 +1,15 @@
 <template>
   <SmartModal
     v-if="show"
-    :title="t('app.invite_your_friends')"
+    :title="$t('app.invite_your_friends')"
     @close="hideModal"
   >
     <template #body>
-      <p class="text-secondaryLight px-2 mb-8">
+      <p class="text-secondaryLight mb-8 px-2">
-        {{ t("app.invite_description") }}
+        {{ $t("app.invite_description") }}
       </p>
-      <div class="flex flex-col px-2 space-y-2">
+      <div class="flex flex-col space-y-2 px-2">
-        <div class="grid grid-cols-3 gap-4">
+        <div class="grid gap-4 grid-cols-3">
           <a
             v-for="(platform, index) in platforms"
             :key="`platform-${index}`"
@@ -17,15 +17,15 @@
             target="_blank"
             class="share-link"
           >
-            <SmartIcon :name="platform.icon" class="w-6 h-6" />
+            <SmartIcon :name="platform.icon" class="h-6 w-6" />
             <span class="mt-3">
               {{ platform.name }}
             </span>
           </a>
           <button class="share-link" @click="copyAppLink">
-            <SmartIcon class="w-6 h-6 text-xl" :name="copyIcon" />
+            <SmartIcon class="h-6 text-xl w-6" :name="copyIcon" />
             <span class="mt-3">
-              {{ t("app.copy") }}
+              {{ $t("app.copy") }}
             </span>
           </button>
         </div>
@@ -35,13 +35,14 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from "@nuxtjs/composition-api"
+import { ref, useContext } from "@nuxtjs/composition-api"
 import { copyToClipboard } from "~/helpers/utils/clipboard"
-import { useI18n, useToast } from "~/helpers/utils/composables"
 
-const t = useI18n()
+const {
-
+  $toast,
-const toast = useToast()
+  app: { i18n },
+} = useContext()
+const t = i18n.t.bind(i18n)
 
 defineProps<{
   show: Boolean
@@ -91,7 +92,9 @@ const platforms = [
 const copyAppLink = () => {
   copyToClipboard(url)
   copyIcon.value = "check"
-  toast.success(`${t("state.copied_to_clipboard")}`)
+  $toast.success(t("state.copied_to_clipboard").toString(), {
+    icon: "content_paste",
+  })
   setTimeout(() => (copyIcon.value = "copy"), 1000)
 }
 

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

@@ -2,35 +2,51 @@
   <AppSlideOver :show="show" @close="close()">
     <template #content>
       <div
-        class="bg-primary border-dividerLight sticky top-0 z-10 flex items-center justify-between p-2 border-b"
+        class="
+          bg-primary
+          border-b border-dividerLight
+          flex
+          p-2
+          top-0
+          z-10
+          items-center
+          sticky
+          justify-between
+        "
       >
-        <h3 class="heading ml-4">{{ t("app.shortcuts") }}</h3>
+        <h3 class="ml-4 heading">{{ $t("app.shortcuts") }}</h3>
         <div class="flex">
           <ButtonSecondary svg="x" class="rounded" @click.native="close()" />
         </div>
       </div>
-      <div class="bg-primary border-dividerLight border-b">
+      <div class="bg-primary border-b border-dividerLight">
-        <div class="flex flex-col mx-6 my-4">
+        <div class="flex flex-col my-4 mx-6">
           <input
             v-model="filterText"
             type="search"
             autocomplete="off"
-            class="bg-primaryLight border-dividerLight focus-visible:border-divider flex w-full px-4 py-2 border rounded"
+            class="
-            :placeholder="`${t('action.search')}`"
+              bg-primaryLight
+              border border-dividerLight
+              rounded
+              flex
+              w-full
+              py-2
+              px-4
+              focus-visible:border-divider
+            "
+            :placeholder="`${$t('action.search')}`"
           />
         </div>
       </div>
-      <div
+      <div v-if="filterText">
-        v-if="filterText"
-        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="px-6 py-4 space-y-4"
+          class="space-y-4 py-4 px-6"
         >
-          <h1 class="text-secondaryDark font-semibold">
+          <h1 class="font-semibold text-secondaryDark">
-            {{ t(map.item.section) }}
+            {{ $t(map.item.section) }}
           </h1>
           <AppShortcutsEntry
             v-for="(shortcut, index) in map.item.shortcuts"
@@ -40,25 +56,36 @@
         </div>
         <div
           v-if="searchResults.length === 0"
-          class="text-secondaryLight flex flex-col items-center justify-center p-4"
+          class="
+            flex flex-col
+            text-secondaryLight
+            p-4
+            items-center
+            justify-center
+          "
         >
-          <i class="material-icons pb-2 opacity-75">manage_search</i>
+          <i class="opacity-75 pb-2 material-icons">manage_search</i>
           <span class="text-center">
-            {{ t("state.nothing_found") }} "{{ filterText }}"
+            {{ $t("state.nothing_found") }} "{{ filterText }}"
           </span>
         </div>
       </div>
       <div
         v-else
-        class="divide-dividerLight hide-scrollbar flex flex-col flex-1 overflow-auto divide-y"
+        class="
+          divide-y divide-dividerLight
+          flex flex-col flex-1
+          overflow-auto
+          hide-scrollbar
+        "
       >
         <div
           v-for="(map, mapIndex) in mappings"
           :key="`map-${mapIndex}`"
-          class="px-6 py-4 space-y-4"
+          class="space-y-4 py-4 px-6"
         >
-          <h1 class="text-secondaryDark font-semibold">
+          <h1 class="font-semibold text-secondaryDark">
-            {{ t(map.section) }}
+            {{ $t(map.section) }}
           </h1>
           <AppShortcutsEntry
             v-for="(shortcut, shortcutIndex) in map.shortcuts"
@@ -75,9 +102,6 @@
 import { computed, ref } from "@nuxtjs/composition-api"
 import Fuse from "fuse.js"
 import mappings from "~/helpers/shortcuts"
-import { useI18n } from "~/helpers/utils/composables"
-
-const t = useI18n()
 
 defineProps<{
   show: boolean

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

@@ -1,7 +1,7 @@
 <template>
   <div class="flex items-center">
     <span class="flex flex-1 mr-4">
-      {{ t(shortcut.label) }}
+      {{ $t(shortcut.label) }}
     </span>
     <span
       v-for="(key, index) in shortcut.keys"
@@ -14,10 +14,6 @@
 </template>
 
 <script setup lang="ts">
-import { useI18n } from "~/helpers/utils/composables"
-
-const t = useI18n()
-
 defineProps<{
   shortcut: Object
 }>()

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

@@ -1,6 +1,6 @@
 <template>
-  <aside class="md:flex-col flex justify-between h-full">
+  <aside class="flex h-full justify-between md:flex-col">
-    <nav class="flex-nowrap md:flex-col md:flex-none flex flex-1">
+    <nav class="flex flex-nowrap md:flex-col flex-1 md:flex-none">
       <NuxtLink
         v-for="(navigation, index) in primaryNavigation"
         :key="`navigation-${index}`"
@@ -27,11 +27,14 @@
 </template>
 
 <script setup lang="ts">
+import { useContext } from "@nuxtjs/composition-api"
 import useWindowSize from "~/helpers/utils/useWindowSize"
 import { useSetting } from "~/newstore/settings"
-import { useI18n } from "~/helpers/utils/composables"
 
-const t = useI18n()
+const {
+  app: { i18n },
+} = useContext()
+const t = i18n.t.bind(i18n)
 
 const windowInnerWidth = useWindowSize()
 const EXPAND_NAVIGATION = useSetting("EXPAND_NAVIGATION")

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

@@ -1,16 +1,31 @@
 <template>
   <div>
     <transition v-if="show" name="fade" appear>
-      <div class="fixed inset-0 z-20 transition-opacity" @keydown.esc="close()">
+      <div class="inset-0 transition-opacity z-20 fixed" @keydown.esc="close()">
         <div
-          class="bg-primaryLight opacity-90 absolute inset-0"
+          class="bg-primaryLight opacity-90 inset-0 absolute"
           tabindex="0"
           @click="close()"
         ></div>
       </div>
     </transition>
     <aside
-      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="
+        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="show ? 'shadow-xl translate-x-0' : 'translate-x-full'"
     >
       <slot name="content"></slot>

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

@@ -1,7 +1,7 @@
 <template>
   <SmartModal
     v-if="show"
-    :title="t('support.title')"
+    :title="$t('support.title')"
     max-width="sm:max-w-md"
     @close="$emit('hide-modal')"
   >
@@ -9,9 +9,9 @@
       <div class="flex flex-col space-y-2">
         <SmartItem
           svg="book"
-          :label="t('app.documentation')"
+          :label="$t('app.documentation')"
           to="https://docs.hoppscotch.io"
-          :description="t('support.documentation')"
+          :description="$t('support.documentation')"
           info-icon="chevron_right"
           active
           blank
@@ -19,17 +19,17 @@
         />
         <SmartItem
           svg="zap"
-          :label="t('app.keyboard_shortcuts')"
+          :label="$t('app.keyboard_shortcuts')"
-          :description="t('support.shortcuts')"
+          :description="$t('support.shortcuts')"
           info-icon="chevron_right"
           active
           @click.native="showShortcuts()"
         />
         <SmartItem
           svg="gift"
-          :label="t('app.whats_new')"
+          :label="$t('app.whats_new')"
           to="https://docs.hoppscotch.io/changelog"
-          :description="t('support.changelog')"
+          :description="$t('support.changelog')"
           info-icon="chevron_right"
           active
           blank
@@ -37,28 +37,28 @@
         />
         <SmartItem
           svg="message-circle"
-          :label="t('app.chat_with_us')"
+          :label="$t('app.chat_with_us')"
-          :description="t('support.chat')"
+          :description="$t('support.chat')"
           info-icon="chevron_right"
           active
           @click.native="chatWithUs()"
         />
         <SmartItem
           svg="brands/discord"
-          :label="t('app.join_discord_community')"
+          :label="$t('app.join_discord_community')"
           to="https://hoppscotch.io/discord"
           blank
-          :description="t('support.community')"
+          :description="$t('support.community')"
           info-icon="chevron_right"
           active
           @click.native="hideModal()"
         />
         <SmartItem
           svg="brands/twitter"
-          :label="t('app.twitter')"
+          :label="$t('app.twitter')"
           to="https://hoppscotch.io/twitter"
           blank
-          :description="t('support.twitter')"
+          :description="$t('support.twitter')"
           info-icon="chevron_right"
           active
           @click.native="hideModal()"
@@ -71,9 +71,6 @@
 <script setup lang="ts">
 import { invokeAction } from "~/helpers/actions"
 import { showChat } from "~/helpers/support"
-import { useI18n } from "~/helpers/utils/composables"
-
-const t = useI18n()
 
 defineProps<{
   show: Boolean
@@ -90,7 +87,6 @@ const chatWithUs = () => {
 
 const showShortcuts = () => {
   invokeAction("flyouts.keybinds.toggle")
-  hideModal()
 }
 
 const hideModal = () => {

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

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

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

@@ -3,7 +3,18 @@
     :to="`${/^\/(?!\/).*$/.test(to) ? localePath(to) : to}`"
     :exact="exact"
     :blank="blank"
-    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="
+      font-semibold
+      py-2
+      transition
+      inline-flex
+      items-center
+      justify-center
+      whitespace-nowrap
+      hover:bg-primaryDark
+      focus:outline-none
+      focus-visible:bg-primaryDark
+    "
     :class="[
       color
         ? `text-${color}-500 hover:(text-${color}-600 text-${color}-600)`
@@ -17,7 +28,7 @@
         'border border-divider hover:border-dividerDark focus-visible:border-dividerDark':
           outline,
       },
-      { '!bg-primaryLight !hover:bg-primaryDark': filled },
+      { '!bg-primaryDark': filled },
     ]"
     :disabled="disabled"
   >
@@ -45,7 +56,14 @@
       <kbd
         v-for="(key, index) in shortcut"
         :key="`key-${index}`"
-        class="bg-dividerLight text-secondaryLight inline-flex px-1 ml-1 rounded"
+        class="
+          bg-dividerLight
+          rounded
+          text-secondaryLight
+          ml-1
+          px-1
+          inline-flex
+        "
       >
         {{ key }}
       </kbd>

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

@@ -47,7 +47,9 @@ export default defineComponent({
   methods: {
     addNewCollection() {
       if (!this.name) {
-        this.$toast.error(this.$t("collection.invalid_name"))
+        this.$toast.error(this.$t("collection.invalid_name"), {
+          icon: "error_outline",
+        })
         return
       }
       this.$emit("submit", this.name)

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

@@ -51,7 +51,9 @@ export default defineComponent({
   methods: {
     addFolder() {
       if (!this.name) {
-        this.$toast.error(this.$t("folder.invalid_name"))
+        this.$toast.error(this.$t("folder.invalid_name"), {
+          icon: "error_outline",
+        })
         return
       }
       this.$emit("add-folder", {

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

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

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

@@ -48,7 +48,9 @@ export default defineComponent({
   methods: {
     saveCollection() {
       if (!this.name) {
-        this.$toast.error(this.$t("collection.invalid_name"))
+        this.$toast.error(this.$t("collection.invalid_name"), {
+          icon: "error_outline",
+        })
         return
       }
       this.$emit("submit", this.name)

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

@@ -48,7 +48,9 @@ export default defineComponent({
   methods: {
     editFolder() {
       if (!this.name) {
-        this.$toast.error(this.$t("folder.invalid_name"))
+        this.$toast.error(this.$t("folder.invalid_name"), {
+          icon: "error_outline",
+        })
         return
       }
       this.$emit("submit", this.name)

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

@@ -47,7 +47,9 @@ export default defineComponent({
   methods: {
     saveRequest() {
       if (!this.requestUpdateData.name) {
-        this.$toast.error(this.$t("request.invalid_name"))
+        this.$toast.error(this.$t("request.invalid_name"), {
+          icon: "error_outline",
+        })
         return
       }
       this.$emit("submit", this.requestUpdateData)

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

@@ -229,11 +229,15 @@ export default defineComponent({
           }
         )
         .then((res) => {
-          this.$toast.success(this.$t("export.gist_created"))
+          this.$toast.success(this.$t("export.gist_created"), {
+            icon: "done",
+          })
           window.open(res.html_url)
         })
         .catch((e) => {
-          this.$toast.error(this.$t("error.something_went_wrong"))
+          this.$toast.error(this.$t("error.something_went_wrong"), {
+            icon: "error_outline",
+          })
           console.error(e)
         })
     },
@@ -411,17 +415,23 @@ export default defineComponent({
       a.download = `${url.split("/").pop().split("#")[0].split("?")[0]}.json`
       document.body.appendChild(a)
       a.click()
-      this.$toast.success(this.$t("state.download_started"))
+      this.$toast.success(this.$t("state.download_started"), {
+        icon: "downloading",
+      })
       setTimeout(() => {
         document.body.removeChild(a)
         URL.revokeObjectURL(url)
       }, 1000)
     },
     fileImported() {
-      this.$toast.success(this.$t("state.file_imported"))
+      this.$toast.success(this.$t("state.file_imported"), {
+        icon: "folder_shared",
+      })
     },
     failedImport() {
-      this.$toast.error(this.$t("import.failed"))
+      this.$toast.error(this.$t("import.failed"), {
+        icon: "error_outline",
+      })
     },
     parsePostmanCollection({ info, name, item }) {
       const hoppscotchCollection = {

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

@@ -1,12 +1,12 @@
 <template>
   <SmartModal
     v-if="show"
-    :title="`${t('collection.save_as')}`"
+    :title="`${$t('collection.save_as')}`"
     @close="hideModal"
   >
     <template #body>
       <div class="flex flex-col px-2">
-        <div class="relative flex">
+        <div class="flex relative">
           <input
             id="selectLabelSaveReq"
             v-model="requestName"
@@ -18,11 +18,11 @@
             @keyup.enter="saveRequestAs"
           />
           <label for="selectLabelSaveReq">
-            {{ t("request.name") }}
+            {{ $t("request.name") }}
           </label>
         </div>
         <label class="p-4">
-          {{ t("collection.select_location") }}
+          {{ $t("collection.select_location") }}
         </label>
         <CollectionsGraphql
           v-if="mode === 'graphql'"
@@ -45,11 +45,11 @@
     <template #footer>
       <span>
         <ButtonPrimary
-          :label="`${t('action.save')}`"
+          :label="`${$t('action.save')}`"
           @click.native="saveRequestAs"
         />
         <ButtonSecondary
-          :label="`${t('action.cancel')}`"
+          :label="`${$t('action.cancel')}`"
           @click.native="hideModal"
         />
       </span>
@@ -58,7 +58,7 @@
 </template>
 
 <script setup lang="ts">
-import { reactive, ref, watch } from "@nuxtjs/composition-api"
+import { reactive, ref, useContext, watch } from "@nuxtjs/composition-api"
 import { isHoppRESTRequest } from "~/helpers/types/HoppRESTRequest"
 import {
   editGraphqlRequest,
@@ -75,9 +75,6 @@ import {
 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()
 
 type CollectionType =
   | {
@@ -140,7 +137,12 @@ const emit = defineEmits<{
   (e: "hide-modal"): void
 }>()
 
-const toast = useToast()
+const {
+  $toast,
+  app: { i18n },
+} = useContext()
+
+const t = i18n.t.bind(i18n)
 
 // TODO: Use a better implementation with computed ?
 // This implementation can't work across updates to mode prop (which won't happen tho)
@@ -192,11 +194,15 @@ const hideModal = () => {
 
 const saveRequestAs = async () => {
   if (!requestName.value) {
-    toast.error(`${t("error.empty_req_name")}`)
+    $toast.error(`${t("error.empty_req_name")}`, {
+      icon: "error_outline",
+    })
     return
   }
   if (picked.value === null) {
-    toast.error(`${t("collection.select")}`)
+    $toast.error(`${t("collection.select")}`, {
+      icon: "error_outline",
+    })
     return
   }
 
@@ -277,7 +283,9 @@ const saveRequestAs = async () => {
         requestSaved()
       })
       .catch((error) => {
-        toast.error(`${t("profile.no_permission")}`)
+        $toast.error(t("profile.no_permission").toString(), {
+          icon: "error_outline",
+        })
         throw new Error(error)
       })
 
@@ -312,7 +320,9 @@ const saveRequestAs = async () => {
 
       requestSaved()
     } catch (error) {
-      toast.error(`${t("profile.no_permission")}`)
+      $toast.error(t("profile.no_permission").toString(), {
+        icon: "error_outline",
+      })
       console.error(error)
     }
   } else if (picked.value.pickedType === "teams-collection") {
@@ -342,7 +352,9 @@ const saveRequestAs = async () => {
 
       requestSaved()
     } catch (error) {
-      toast.error(`${t("profile.no_permission")}`)
+      $toast.error(t("profile.no_permission").toString(), {
+        icon: "error_outline",
+      })
       console.error(error)
     }
   } else if (picked.value.pickedType === "gql-my-request") {
@@ -374,7 +386,9 @@ const saveRequestAs = async () => {
 }
 
 const requestSaved = () => {
-  toast.success(`${t("request.added")}`)
+  $toast.success(`${t("request.added")}`, {
+    icon: "post_add",
+  })
   hideModal()
 }
 

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

@@ -49,7 +49,9 @@ export default defineComponent({
   methods: {
     addNewCollection() {
       if (!this.name) {
-        this.$toast.error(`${this.$t("collection.invalid_name")}`)
+        this.$toast.error(`${this.$t("collection.invalid_name")}`, {
+          icon: "error_outline",
+        })
         return
       }
 

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

@@ -1,7 +1,7 @@
 <template>
   <div class="flex flex-col" :class="[{ 'bg-primaryLight': dragging }]">
     <div
-      class="group flex items-center"
+      class="flex items-center group"
       @dragover.prevent
       @drop.prevent="dropEvent"
       @dragover="dragging = true"
@@ -10,7 +10,7 @@
       @dragend="dragging = false"
     >
       <span
-        class="flex items-center justify-center px-4 cursor-pointer"
+        class="cursor-pointer flex px-4 justify-center items-center"
         @click="toggleShowChildren()"
       >
         <SmartIcon
@@ -20,7 +20,15 @@
         />
       </span>
       <span
-        class="group-hover:text-secondaryDark flex flex-1 min-w-0 py-2 pr-2 transition cursor-pointer"
+        class="
+          cursor-pointer
+          flex flex-1
+          min-w-0
+          py-2
+          pr-2
+          transition
+          group-hover:text-secondaryDark
+        "
         @click="toggleShowChildren()"
       >
         <span class="truncate"> {{ collection.name }} </span>
@@ -30,7 +38,7 @@
           v-tippy="{ theme: 'tooltip' }"
           svg="folder-plus"
           :title="$t('folder.new')"
-          class="group-hover:inline-flex hidden"
+          class="hidden group-hover:inline-flex"
           @click.native="
             $emit('add-folder', {
               path: `${collectionIndex}`,
@@ -91,7 +99,16 @@
     </div>
     <div v-if="showChildren || isFiltered" class="flex">
       <div
-        class="flex w-1 transform transition cursor-nsResize ml-5.5 bg-dividerLight hover:scale-x-125 hover:bg-dividerDark"
+        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 +149,25 @@
           v-if="
             collection.folders.length === 0 && collection.requests.length === 0
           "
-          class="text-secondaryLight flex flex-col items-center justify-center p-4"
+          class="
+            flex flex-col
+            text-secondaryLight
+            p-4
+            items-center
+            justify-center
+          "
         >
           <img
             :src="`/images/states/${$colorMode.value}/pack.svg`"
             loading="lazy"
-            class="inline-flex flex-col object-contain object-center w-16 h-16 mb-4"
+            class="
+              flex-col
+              mb-4
+              object-contain object-center
+              h-16
+              w-16
+              inline-flex
+            "
             :alt="$t('empty.collection')"
           />
           <span class="text-center">
@@ -221,7 +251,9 @@ export default defineComponent({
         this.$emit("select", { picked: null })
       }
       removeGraphqlCollection(this.collectionIndex)
-      this.$toast.success(`${this.$t("state.deleted")}`)
+      this.$toast.success(`${this.$t("state.deleted")}`, {
+        icon: "delete",
+      })
     },
     dropEvent({ dataTransfer }: any) {
       this.dragging = !this.dragging

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

@@ -54,7 +54,9 @@ export default defineComponent({
   methods: {
     saveCollection() {
       if (!this.name) {
-        this.$toast.error(`${this.$t("collection.invalid_name")}`)
+        this.$toast.error(`${this.$t("collection.invalid_name")}`, {
+          icon: "error_outline",
+        })
         return
       }
       const collectionUpdated = {

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

@@ -54,7 +54,9 @@ export default defineComponent({
   methods: {
     editFolder() {
       if (!this.name) {
-        this.$toast.error(`${this.$t("collection.invalid_name")}`)
+        this.$toast.error(`${this.$t("collection.invalid_name")}`, {
+          icon: "error_outline",
+        })
         return
       }
       editGraphqlFolder(this.folderPath, {

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

@@ -58,7 +58,9 @@ export default defineComponent({
   methods: {
     saveRequest() {
       if (!this.requestUpdateData.name) {
-        this.$toast.error(`${this.$t("collection.invalid_name")}`)
+        this.$toast.error(`${this.$t("collection.invalid_name")}`, {
+          icon: "error_outline",
+        })
         return
       }
       const requestUpdated = {

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

@@ -1,7 +1,7 @@
 <template>
   <div class="flex flex-col" :class="[{ 'bg-primaryLight': dragging }]">
     <div
-      class="group flex items-center"
+      class="flex items-center group"
       @dragover.prevent
       @drop.prevent="dropEvent"
       @dragover="dragging = true"
@@ -10,7 +10,7 @@
       @dragend="dragging = false"
     >
       <span
-        class="flex items-center justify-center px-4 cursor-pointer"
+        class="cursor-pointer flex px-4 justify-center items-center"
         @click="toggleShowChildren()"
       >
         <SmartIcon
@@ -20,7 +20,15 @@
         />
       </span>
       <span
-        class="group-hover:text-secondaryDark flex flex-1 min-w-0 py-2 pr-2 transition cursor-pointer"
+        class="
+          cursor-pointer
+          flex flex-1
+          min-w-0
+          py-2
+          pr-2
+          transition
+          group-hover:text-secondaryDark
+        "
         @click="toggleShowChildren()"
       >
         <span class="truncate">
@@ -32,7 +40,7 @@
           v-tippy="{ theme: 'tooltip' }"
           svg="folder-plus"
           :title="$t('folder.new')"
-          class="group-hover:inline-flex hidden"
+          class="hidden group-hover:inline-flex"
           @click.native="$emit('add-folder', { folder, path: folderPath })"
         />
         <span>
@@ -87,7 +95,16 @@
     </div>
     <div v-if="showChildren || isFiltered" class="flex">
       <div
-        class="flex w-1 transform transition cursor-nsResize ml-5.5 bg-dividerLight hover:scale-x-125 hover:bg-dividerDark"
+        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">
@@ -131,12 +148,25 @@
             folder.requests &&
             folder.requests.length === 0
           "
-          class="text-secondaryLight flex flex-col items-center justify-center p-4"
+          class="
+            flex flex-col
+            text-secondaryLight
+            p-4
+            items-center
+            justify-center
+          "
         >
           <img
             :src="`/images/states/${$colorMode.value}/pack.svg`"
             loading="lazy"
-            class="inline-flex flex-col object-contain object-center w-16 h-16 mb-4"
+            class="
+              flex-col
+              mb-4
+              object-contain object-center
+              h-16
+              w-16
+              inline-flex
+            "
             :alt="$t('empty.folder')"
           />
           <span class="text-center">
@@ -220,7 +250,9 @@ export default defineComponent({
       }
 
       removeGraphqlFolder(this.folderPath)
-      this.$toast.success(`${this.$t("state.deleted")}`)
+      this.$toast.success(`${this.$t("state.deleted")}`, {
+        icon: "delete",
+      })
     },
     dropEvent({ dataTransfer }: any) {
       this.dragging = !this.dragging

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

@@ -140,11 +140,15 @@ export default defineComponent({
           }
         )
         .then((res) => {
-          this.$toast.success(this.$t("export.gist_created"))
+          this.$toast.success(this.$t("export.gist_created"), {
+            icon: "done",
+          })
           window.open(res.html_url)
         })
         .catch((e) => {
-          this.$toast.error(this.$t("error.something_went_wrong"))
+          this.$toast.error(this.$t("error.something_went_wrong"), {
+            icon: "error_outline",
+          })
           console.error(e)
         })
     },
@@ -248,17 +252,23 @@ export default defineComponent({
       a.download = `${url.split("/").pop().split("#")[0].split("?")[0]}.json`
       document.body.appendChild(a)
       a.click()
-      this.$toast.success(this.$t("state.download_started"))
+      this.$toast.success(this.$t("state.download_started"), {
+        icon: "downloading",
+      })
       setTimeout(() => {
         document.body.removeChild(a)
         URL.revokeObjectURL(url)
       }, 1000)
     },
     fileImported() {
-      this.$toast.success(this.$t("state.file_imported"))
+      this.$toast.success(this.$t("state.file_imported"), {
+        icon: "folder_shared",
+      })
     },
     failedImport() {
-      this.$toast.error(this.$t("import.failed"))
+      this.$toast.error(this.$t("import.failed"), {
+        icon: "error_outline",
+      })
     },
     parsePostmanCollection({ info, name, item }) {
       const hoppscotchCollection = {

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

@@ -1,7 +1,7 @@
 <template>
   <div class="flex flex-col" :class="[{ 'bg-primaryLight': dragging }]">
     <div
-      class="group flex items-center"
+      class="flex items-center group"
       draggable="true"
       @dragstart="dragStart"
       @dragover.stop
@@ -9,7 +9,15 @@
       @dragend="dragging = false"
     >
       <span
-        class="flex items-center justify-center w-16 px-2 truncate cursor-pointer"
+        class="
+          cursor-pointer
+          flex
+          px-2
+          w-16
+          justify-center
+          items-center
+          truncate
+        "
         @click="!doc ? selectRequest() : {}"
       >
         <SmartIcon
@@ -19,7 +27,15 @@
         />
       </span>
       <span
-        class="group-hover:text-secondaryDark flex flex-1 min-w-0 py-2 pr-2 transition cursor-pointer"
+        class="
+          cursor-pointer
+          flex flex-1
+          min-w-0
+          py-2
+          pr-2
+          transition
+          group-hover:text-secondaryDark
+        "
         @click="!doc ? selectRequest() : {}"
       >
         <span class="truncate"> {{ request.name }} </span>
@@ -30,7 +46,7 @@
           v-tippy="{ theme: 'tooltip' }"
           svg="rotate-ccw"
           :title="$t('action.restore')"
-          class="group-hover:inline-flex hidden"
+          class="hidden group-hover:inline-flex"
           @click.native="!doc ? selectRequest() : {}"
         />
         <span>
@@ -178,7 +194,9 @@ export default defineComponent({
       }
 
       removeGraphqlRequest(this.folderPath, this.requestIndex)
-      this.$toast.success(`${this.$t("state.deleted")}`)
+      this.$toast.success(`${this.$t("state.deleted")}`, {
+        icon: "delete",
+      })
     },
   },
 })

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

@@ -4,7 +4,14 @@
     :class="{ 'rounded border border-divider': savingMode }"
   >
     <div
-      class="divide-dividerLight border-dividerLight sticky top-0 z-10 flex flex-col border-b divide-y"
+      class="
+        divide-y divide-dividerLight
+        border-b border-dividerLight
+        flex flex-col
+        top-0
+        z-10
+        sticky
+      "
       :class="{ 'bg-primary': !savingMode }"
     >
       <input
@@ -13,9 +20,9 @@
         type="search"
         autocomplete="off"
         :placeholder="$t('action.search')"
-        class="flex w-full px-4 py-2 bg-transparent"
+        class="bg-transparent flex w-full py-2 px-4"
       />
-      <div class="flex justify-between flex-1">
+      <div class="flex flex-1 justify-between">
         <ButtonSecondary
           svg="plus"
           :label="$t('action.new')"
@@ -62,15 +69,15 @@
     </div>
     <div
       v-if="collections.length === 0"
-      class="text-secondaryLight flex flex-col items-center justify-center p-4"
+      class="flex flex-col text-secondaryLight p-4 items-center justify-center"
     >
       <img
         :src="`/images/states/${$colorMode.value}/pack.svg`"
         loading="lazy"
-        class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
+        class="flex-col my-4 object-contain object-center h-16 w-16 inline-flex"
         :alt="$t('empty.collections')"
       />
-      <span class="pb-4 text-center">
+      <span class="text-center pb-4">
         {{ $t("empty.collections") }}
       </span>
       <ButtonSecondary
@@ -81,9 +88,9 @@
     </div>
     <div
       v-if="!(filteredCollections.length !== 0 || collections.length === 0)"
-      class="text-secondaryLight flex flex-col items-center justify-center p-4"
+      class="flex flex-col text-secondaryLight p-4 items-center justify-center"
     >
-      <i class="material-icons pb-2 opacity-75">manage_search</i>
+      <i class="opacity-75 pb-2 material-icons">manage_search</i>
       <span class="text-center">
         {{ $t("state.nothing_found") }} "{{ filterText }}"
       </span>

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

@@ -4,7 +4,16 @@
     :class="{ 'rounded border border-divider': saveRequest }"
   >
     <div
-      class="divide-dividerLight bg-primary border-dividerLight sticky top-0 z-10 flex flex-col border-b divide-y rounded-t"
+      class="
+        divide-y divide-dividerLight
+        bg-primary
+        border-b border-dividerLight
+        rounded-t
+        flex flex-col
+        top-0
+        z-10
+        sticky
+      "
     >
       <div v-if="!saveRequest" class="search-wrappe">
         <input
@@ -12,7 +21,7 @@
           type="search"
           autocomplete="off"
           :placeholder="$t('action.search')"
-          class="flex w-full py-2 pl-4 pr-2 bg-transparent"
+          class="bg-transparent flex w-full py-2 pr-2 pl-4"
         />
       </div>
       <CollectionsChooseType
@@ -22,7 +31,7 @@
         @update-collection-type="updateCollectionType"
         @update-selected-team="updateSelectedTeam"
       />
-      <div class="flex justify-between flex-1">
+      <div class="flex flex-1 justify-between">
         <ButtonSecondary
           v-if="
             collectionsType.type == 'team-collections' &&
@@ -98,15 +107,15 @@
     </div>
     <div
       v-if="filteredCollections.length === 0 && filterText.length === 0"
-      class="text-secondaryLight flex flex-col items-center justify-center p-4"
+      class="flex flex-col text-secondaryLight p-4 items-center justify-center"
     >
       <img
         :src="`/images/states/${$colorMode.value}/pack.svg`"
         loading="lazy"
-        class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
+        class="flex-col my-4 object-contain object-center h-16 w-16 inline-flex"
         :alt="$t('empty.collections')"
       />
-      <span class="pb-4 text-center">
+      <span class="text-center pb-4">
         {{ $t("empty.collections") }}
       </span>
       <ButtonSecondary
@@ -131,9 +140,9 @@
     </div>
     <div
       v-if="filterText.length !== 0 && filteredCollections.length === 0"
-      class="text-secondaryLight flex flex-col items-center justify-center p-4"
+      class="flex flex-col text-secondaryLight p-4 items-center justify-center"
     >
-      <i class="material-icons pb-2 opacity-75">manage_search</i>
+      <i class="opacity-75 pb-2 material-icons">manage_search</i>
       <span class="text-center">
         {{ $t("state.nothing_found") }} "{{ filterText }}"
       </span>
@@ -352,10 +361,14 @@ export default defineComponent({
             this.collectionsType.selectedTeam.id
           )
           .then(() => {
-            this.$toast.success(this.$t("collection.created"))
+            this.$toast.success(this.$t("collection.created"), {
+              icon: "done",
+            })
           })
           .catch((e) => {
-            this.$toast.error(this.$t("error.something_went_wrong"))
+            this.$toast.error(this.$t("error.something_went_wrong"), {
+              icon: "error_outline",
+            })
             console.error(e)
           })
       }
@@ -364,7 +377,9 @@ export default defineComponent({
     // Intented to be called by CollectionEdit modal submit event
     updateEditingCollection(newName) {
       if (!newName) {
-        this.$toast.error(this.$t("collection.invalid_name"))
+        this.$toast.error(this.$t("collection.invalid_name"), {
+          icon: "error_outline",
+        })
         return
       }
       if (this.collectionsType.type === "my-collections") {
@@ -381,10 +396,14 @@ export default defineComponent({
         teamUtils
           .renameCollection(this.$apollo, newName, this.editingCollection.id)
           .then(() => {
-            this.$toast.success(this.$t("collection.renamed"))
+            this.$toast.success(this.$t("collection.renamed"), {
+              icon: "done",
+            })
           })
           .catch((e) => {
-            this.$toast.error(this.$t("error.something_went_wrong"))
+            this.$toast.error(this.$t("error.something_went_wrong"), {
+              icon: "error_outline",
+            })
             console.error(e)
           })
       }
@@ -401,10 +420,14 @@ export default defineComponent({
         teamUtils
           .renameCollection(this.$apollo, name, this.editingFolder.id)
           .then(() => {
-            this.$toast.success(this.$t("folder.renamed"))
+            this.$toast.success(this.$t("folder.renamed"), {
+              icon: "done",
+            })
           })
           .catch((e) => {
-            this.$toast.error(this.$t("error.something_went_wrong"))
+            this.$toast.error(this.$t("error.something_went_wrong"), {
+              icon: "error_outline",
+            })
             console.error(e)
           })
       }
@@ -437,11 +460,15 @@ export default defineComponent({
             this.editingRequestIndex
           )
           .then(() => {
-            this.$toast.success(this.$t("request.renamed"))
+            this.$toast.success(this.$t("request.renamed"), {
+              icon: "done",
+            })
             this.$emit("update-team-collections")
           })
           .catch((e) => {
-            this.$toast.error(this.$t("error.something_went_wrong"))
+            this.$toast.error(this.$t("error.something_went_wrong"), {
+              icon: "error_outline",
+            })
             console.error(e)
           })
       }
@@ -506,11 +533,15 @@ export default defineComponent({
               },
             })
             .then(() => {
-              this.$toast.success(this.$t("folder.created"))
+              this.$toast.success(this.$t("folder.created"), {
+                icon: "done",
+              })
               this.$emit("update-team-collections")
             })
             .catch((e) => {
-              this.$toast.error(this.$t("error.something_went_wrong"))
+              this.$toast.error(this.$t("error.something_went_wrong"), {
+                icon: "error_outline",
+              })
               console.error(e)
             })
         }
@@ -574,7 +605,9 @@ export default defineComponent({
         }
 
         removeRESTCollection(collectionIndex)
-        this.$toast.success(this.$t("state.deleted"))
+        this.$toast.success(this.$t("state.deleted"), {
+          icon: "delete",
+        })
       } else if (collectionsType.type === "team-collections") {
         // Cancel pick if picked collection is deleted
         if (
@@ -600,10 +633,14 @@ export default defineComponent({
               },
             })
             .then(() => {
-              this.$toast.success(this.$t("state.deleted"))
+              this.$toast.success(this.$t("state.deleted"), {
+                icon: "delete",
+              })
             })
             .catch((e) => {
-              this.$toast.error(this.$t("error.something_went_wrong"))
+              this.$toast.error(this.$t("error.something_went_wrong"), {
+                icon: "error_outline",
+              })
               console.error(e)
             })
         }
@@ -621,7 +658,9 @@ export default defineComponent({
           this.$emit("select", { picked: null })
         }
         removeRESTRequest(folderPath, requestIndex)
-        this.$toast.success(this.$t("state.deleted"))
+        this.$toast.success(this.$t("state.deleted"), {
+          icon: "delete",
+        })
       } else if (this.collectionsType.type === "team-collections") {
         // Cancel pick if the picked item is being deleted
         if (
@@ -635,10 +674,14 @@ export default defineComponent({
         teamUtils
           .deleteRequest(this.$apollo, requestIndex)
           .then(() => {
-            this.$toast.success(this.$t("state.deleted"))
+            this.$toast.success(this.$t("state.deleted"), {
+              icon: "delete",
+            })
           })
           .catch((e) => {
-            this.$toast.error(this.$t("error.something_went_wrong"))
+            this.$toast.error(this.$t("error.something_went_wrong"), {
+              icon: "error_outline",
+            })
             console.error(e)
           })
       }

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

@@ -1,7 +1,7 @@
 <template>
   <div class="flex flex-col" :class="[{ 'bg-primaryLight': dragging }]">
     <div
-      class="group flex items-center"
+      class="flex items-center group"
       @dragover.prevent
       @drop.prevent="dropEvent"
       @dragover="dragging = true"
@@ -10,7 +10,7 @@
       @dragend="dragging = false"
     >
       <span
-        class="flex items-center justify-center px-4 cursor-pointer"
+        class="cursor-pointer flex px-4 justify-center items-center"
         @click="toggleShowChildren()"
       >
         <SmartIcon
@@ -20,7 +20,15 @@
         />
       </span>
       <span
-        class="group-hover:text-secondaryDark flex flex-1 min-w-0 py-2 pr-2 transition cursor-pointer"
+        class="
+          cursor-pointer
+          flex flex-1
+          min-w-0
+          py-2
+          pr-2
+          transition
+          group-hover:text-secondaryDark
+        "
         @click="toggleShowChildren()"
       >
         <span class="truncate"> {{ collection.name }} </span>
@@ -47,7 +55,7 @@
           v-tippy="{ theme: 'tooltip' }"
           svg="folder-plus"
           :title="$t('folder.new')"
-          class="group-hover:inline-flex hidden"
+          class="hidden group-hover:inline-flex"
           @click.native="
             $emit('add-folder', {
               folder: collection,
@@ -110,7 +118,16 @@
     </div>
     <div v-if="showChildren || isFiltered" class="flex">
       <div
-        class="flex w-1 transform transition cursor-nsResize ml-5.5 bg-dividerLight hover:scale-x-125 hover:bg-dividerDark"
+        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">
@@ -158,12 +175,25 @@
             (collection.requests == undefined ||
               collection.requests.length === 0)
           "
-          class="text-secondaryLight flex flex-col items-center justify-center p-4"
+          class="
+            flex flex-col
+            text-secondaryLight
+            p-4
+            items-center
+            justify-center
+          "
         >
           <img
             :src="`/images/states/${$colorMode.value}/pack.svg`"
             loading="lazy"
-            class="inline-flex flex-col object-contain object-center w-16 h-16 mb-4"
+            class="
+              flex-col
+              mb-4
+              object-contain object-center
+              h-16
+              w-16
+              inline-flex
+            "
             :alt="$t('empty.collection')"
           />
           <span class="text-center">

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

@@ -1,7 +1,7 @@
 <template>
   <div class="flex flex-col" :class="[{ 'bg-primaryLight': dragging }]">
     <div
-      class="group flex items-center"
+      class="flex items-center group"
       @dragover.prevent
       @drop.prevent="dropEvent"
       @dragover="dragging = true"
@@ -10,7 +10,7 @@
       @dragend="dragging = false"
     >
       <span
-        class="flex items-center justify-center px-4 cursor-pointer"
+        class="cursor-pointer flex px-4 justify-center items-center"
         @click="toggleShowChildren()"
       >
         <SmartIcon
@@ -20,7 +20,15 @@
         />
       </span>
       <span
-        class="group-hover:text-secondaryDark flex flex-1 min-w-0 py-2 pr-2 transition cursor-pointer"
+        class="
+          cursor-pointer
+          flex flex-1
+          min-w-0
+          py-2
+          pr-2
+          transition
+          group-hover:text-secondaryDark
+        "
         @click="toggleShowChildren()"
       >
         <span class="truncate">
@@ -32,7 +40,7 @@
           v-tippy="{ theme: 'tooltip' }"
           svg="folder-plus"
           :title="$t('folder.new')"
-          class="group-hover:inline-flex hidden"
+          class="hidden group-hover:inline-flex"
           @click.native="$emit('add-folder', { folder, path: folderPath })"
         />
         <span>
@@ -92,7 +100,16 @@
     </div>
     <div v-if="showChildren || isFiltered" class="flex">
       <div
-        class="flex w-1 transform transition cursor-nsResize ml-5.5 bg-dividerLight hover:scale-x-125 hover:bg-dividerDark"
+        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">
@@ -140,12 +157,25 @@
             folder.requests &&
             folder.requests.length === 0
           "
-          class="text-secondaryLight flex flex-col items-center justify-center p-4"
+          class="
+            flex flex-col
+            text-secondaryLight
+            p-4
+            items-center
+            justify-center
+          "
         >
           <img
             :src="`/images/states/${$colorMode.value}/pack.svg`"
             loading="lazy"
-            class="inline-flex flex-col object-contain object-center w-16 h-16 mb-4"
+            class="
+              flex-col
+              mb-4
+              object-contain object-center
+              h-16
+              w-16
+              inline-flex
+            "
             :alt="$t('empty.folder')"
           />
           <span class="text-center">
@@ -232,7 +262,9 @@ export default defineComponent({
         this.$emit("select", { picked: null })
       }
       removeRESTFolder(this.folderPath)
-      this.$toast.success(this.$t("state.deleted"))
+      this.$toast.success(this.$t("state.deleted"), {
+        icon: "delete",
+      })
     },
     dropEvent({ dataTransfer }) {
       this.dragging = !this.dragging

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

@@ -1,7 +1,7 @@
 <template>
   <div class="flex flex-col" :class="[{ 'bg-primaryLight': dragging }]">
     <div
-      class="group flex items-center"
+      class="flex items-center group"
       draggable="true"
       @dragstart="dragStart"
       @dragover.stop
@@ -9,7 +9,15 @@
       @dragend="dragging = false"
     >
       <span
-        class="flex items-center justify-center w-16 px-2 truncate cursor-pointer"
+        class="
+          cursor-pointer
+          flex
+          px-2
+          w-16
+          justify-center
+          items-center
+          truncate
+        "
         :class="getRequestLabelColor(request.method)"
         @click="!doc ? selectRequest() : {}"
       >
@@ -24,7 +32,16 @@
         </span>
       </span>
       <span
-        class="group-hover:text-secondaryDark flex items-center flex-1 min-w-0 py-2 pr-2 transition cursor-pointer"
+        class="
+          cursor-pointer
+          flex flex-1
+          min-w-0
+          py-2
+          pr-2
+          transition
+          items-center
+          group-hover:text-secondaryDark
+        "
         @click="!doc ? selectRequest() : {}"
       >
         <span class="truncate"> {{ request.name }} </span>
@@ -44,7 +61,7 @@
           v-tippy="{ theme: 'tooltip' }"
           svg="rotate-ccw"
           :title="$t('action.restore')"
-          class="group-hover:inline-flex hidden"
+          class="hidden group-hover:inline-flex"
           @click.native="!doc ? selectRequest() : {}"
         />
         <span>

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

@@ -1,8 +1,8 @@
 <template>
   <div class="flex flex-col">
-    <div class="group flex items-center">
+    <div class="flex items-center group">
       <span
-        class="flex items-center justify-center px-4 cursor-pointer"
+        class="cursor-pointer flex px-4 justify-center items-center"
         @click="toggleShowChildren()"
       >
         <SmartIcon
@@ -12,7 +12,15 @@
         />
       </span>
       <span
-        class="group-hover:text-secondaryDark flex flex-1 min-w-0 py-2 pr-2 transition cursor-pointer"
+        class="
+          cursor-pointer
+          flex flex-1
+          min-w-0
+          py-2
+          pr-2
+          transition
+          group-hover:text-secondaryDark
+        "
         @click="toggleShowChildren()"
       >
         <span class="truncate"> {{ collection.title }} </span>
@@ -39,7 +47,7 @@
           v-tippy="{ theme: 'tooltip' }"
           svg="folder-plus"
           :title="$t('folder.new')"
-          class="group-hover:inline-flex hidden"
+          class="hidden group-hover:inline-flex"
           @click.native="
             $emit('add-folder', {
               folder: collection,
@@ -106,7 +114,16 @@
     </div>
     <div v-if="showChildren || isFiltered" class="flex">
       <div
-        class="flex w-1 transform transition cursor-nsResize ml-5.5 bg-dividerLight hover:scale-x-125 hover:bg-dividerDark"
+        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">
@@ -152,12 +169,25 @@
             (collection.requests == undefined ||
               collection.requests.length === 0)
           "
-          class="text-secondaryLight flex flex-col items-center justify-center p-4"
+          class="
+            flex flex-col
+            text-secondaryLight
+            p-4
+            items-center
+            justify-center
+          "
         >
           <img
             :src="`/images/states/${$colorMode.value}/pack.svg`"
             loading="lazy"
-            class="inline-flex flex-col object-contain object-center w-16 h-16 mb-4"
+            class="
+              flex-col
+              mb-4
+              object-contain object-center
+              h-16
+              w-16
+              inline-flex
+            "
             :alt="$t('empty.collection')"
           />
           <span class="text-center">

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

@@ -1,8 +1,8 @@
 <template>
   <div class="flex flex-col">
-    <div class="group flex items-center">
+    <div class="flex items-center group">
       <span
-        class="flex items-center justify-center px-4 cursor-pointer"
+        class="cursor-pointer flex px-4 justify-center items-center"
         @click="toggleShowChildren()"
       >
         <SmartIcon
@@ -12,7 +12,15 @@
         />
       </span>
       <span
-        class="group-hover:text-secondaryDark flex flex-1 min-w-0 py-2 pr-2 transition cursor-pointer"
+        class="
+          cursor-pointer
+          flex flex-1
+          min-w-0
+          py-2
+          pr-2
+          transition
+          group-hover:text-secondaryDark
+        "
         @click="toggleShowChildren()"
       >
         <span class="truncate">
@@ -25,7 +33,7 @@
           v-tippy="{ theme: 'tooltip' }"
           svg="folder-plus"
           :title="$t('folder.new')"
-          class="group-hover:inline-flex hidden"
+          class="hidden group-hover:inline-flex"
           @click.native="$emit('add-folder', { folder, path: folderPath })"
         />
         <span>
@@ -89,7 +97,16 @@
     </div>
     <div v-if="showChildren || isFiltered" class="flex">
       <div
-        class="flex w-1 transform transition cursor-nsResize ml-5.5 bg-dividerLight hover:scale-x-125 hover:bg-dividerDark"
+        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 +150,25 @@
             (folder.children == undefined || folder.children.length === 0) &&
             (folder.requests == undefined || folder.requests.length === 0)
           "
-          class="text-secondaryLight flex flex-col items-center justify-center p-4"
+          class="
+            flex flex-col
+            text-secondaryLight
+            p-4
+            items-center
+            justify-center
+          "
         >
           <img
             :src="`/images/states/${$colorMode.value}/pack.svg`"
             loading="lazy"
-            class="inline-flex flex-col object-contain object-center w-16 h-16 mb-4"
+            class="
+              flex-col
+              mb-4
+              object-contain object-center
+              h-16
+              w-16
+              inline-flex
+            "
             :alt="$t('empty.folder')"
           />
           <span class="text-center">
@@ -223,11 +253,15 @@ export default defineComponent({
         teamUtils
           .deleteCollection(this.$apollo, this.folder.id)
           .then(() => {
-            this.$toast.success(this.$t("state.deleted"))
+            this.$toast.success(this.$t("state.deleted"), {
+              icon: "delete",
+            })
             this.$emit("update-team-collections")
           })
           .catch((e) => {
-            this.$toast.error(this.$t("error.something_went_wrong"))
+            this.$toast.error(this.$t("error.something_went_wrong"), {
+              icon: "error_outline",
+            })
             console.error(e)
           })
         this.$emit("update-team-collections")

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

@@ -1,8 +1,16 @@
 <template>
   <div class="flex flex-col">
-    <div class="group flex items-center">
+    <div class="flex items-center group">
       <span
-        class="flex items-center justify-center w-16 px-2 truncate cursor-pointer"
+        class="
+          cursor-pointer
+          flex
+          px-2
+          w-16
+          justify-center
+          items-center
+          truncate
+        "
         :class="getRequestLabelColor(request.method)"
         @click="!doc ? selectRequest() : {}"
       >
@@ -17,7 +25,16 @@
         </span>
       </span>
       <span
-        class="group-hover:text-secondaryDark flex items-center flex-1 min-w-0 py-2 pr-2 transition cursor-pointer"
+        class="
+          cursor-pointer
+          flex flex-1
+          min-w-0
+          py-2
+          pr-2
+          transition
+          items-center
+          group-hover:text-secondaryDark
+        "
         @click="!doc ? selectRequest() : {}"
       >
         <span class="truncate"> {{ request.name }} </span>
@@ -36,7 +53,7 @@
           v-tippy="{ theme: 'tooltip' }"
           svg="rotate-ccw"
           :title="$t('action.restore')"
-          class="group-hover:inline-flex hidden"
+          class="hidden group-hover:inline-flex"
           @click.native="!doc ? selectRequest() : {}"
         />
         <span>

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

@@ -52,7 +52,9 @@ export default defineComponent({
   methods: {
     addNewEnvironment() {
       if (!this.name) {
-        this.$toast.error(`${this.$t("environment.invalid_name")}`)
+        this.$toast.error(`${this.$t("environment.invalid_name")}`, {
+          icon: "error_outline",
+        })
         return
       }
       createEnvironment(this.name)

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

@@ -6,7 +6,7 @@
   >
     <template #body>
       <div class="flex flex-col px-2">
-        <div class="relative flex">
+        <div class="flex relative">
           <input
             id="selectLabelEnvEdit"
             v-model="name"
@@ -22,7 +22,7 @@
             {{ $t("action.label") }}
           </label>
         </div>
-        <div class="flex items-center justify-between flex-1">
+        <div class="flex flex-1 justify-between items-center">
           <label for="variableList" class="p-4">
             {{ $t("environment.variable_list") }}
           </label>
@@ -43,21 +43,21 @@
             />
           </div>
         </div>
-        <div class="divide-dividerLight border-divider border divide-y rounded">
+        <div class="divide-y divide-dividerLight border-divider border rounded">
           <div
             v-for="(variable, index) in vars"
             :key="`variable-${index}`"
-            class="divide-dividerLight flex divide-x"
+            class="divide-x divide-dividerLight flex"
           >
             <input
               v-model="variable.key"
-              class="flex flex-1 px-4 py-2 bg-transparent"
+              class="bg-transparent flex flex-1 py-2 px-4"
               :placeholder="`${$t('count.variable', { count: index + 1 })}`"
               :name="'param' + index"
             />
             <input
               v-model="variable.value"
-              class="flex flex-1 px-4 py-2 bg-transparent"
+              class="bg-transparent flex flex-1 py-2 px-4"
               :placeholder="`${$t('count.value', { count: index + 1 })}`"
               :name="'value' + index"
             />
@@ -74,15 +74,28 @@
           </div>
           <div
             v-if="vars.length === 0"
-            class="text-secondaryLight flex flex-col items-center justify-center p-4"
+            class="
+              flex flex-col
+              text-secondaryLight
+              p-4
+              items-center
+              justify-center
+            "
           >
             <img
               :src="`/images/states/${$colorMode.value}/blockchain.svg`"
               loading="lazy"
-              class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
+              class="
+                flex-col
+                my-4
+                object-contain object-center
+                h-16
+                w-16
+                inline-flex
+              "
               :alt="$t('empty.environments')"
             />
-            <span class="pb-4 text-center">
+            <span class="text-center pb-4">
               {{ $t("empty.environments") }}
             </span>
             <ButtonSecondary
@@ -164,7 +177,9 @@ export default defineComponent({
     clearContent() {
       this.vars = []
       this.clearIcon = "check"
-      this.$toast.success(`${this.$t("state.cleared")}`)
+      this.$toast.success(`${this.$t("state.cleared")}`, {
+        icon: "clear_all",
+      })
       setTimeout(() => (this.clearIcon = "trash-2"), 1000)
     },
     addEnvironmentVariable() {
@@ -178,7 +193,9 @@ export default defineComponent({
     },
     saveEnvironment() {
       if (!this.name) {
-        this.$toast.error(`${this.$t("environment.invalid_name")}`)
+        this.$toast.error(`${this.$t("environment.invalid_name")}`, {
+          icon: "error_outline",
+        })
         return
       }
 

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

@@ -1,13 +1,21 @@
 <template>
-  <div class="group flex items-center">
+  <div class="flex items-center group">
     <span
-      class="flex items-center justify-center px-4 cursor-pointer"
+      class="cursor-pointer flex px-4 justify-center items-center"
       @click="$emit('edit-environment')"
     >
       <SmartIcon class="svg-icons" name="layers" />
     </span>
     <span
-      class="group-hover:text-secondaryDark flex flex-1 min-w-0 py-2 pr-2 transition cursor-pointer"
+      class="
+        cursor-pointer
+        flex flex-1
+        min-w-0
+        py-2
+        pr-2
+        transition
+        group-hover:text-secondaryDark
+      "
       @click="$emit('edit-environment')"
     >
       <span class="truncate">
@@ -94,7 +102,9 @@ export default defineComponent({
     removeEnvironment() {
       if (this.environmentIndex !== "Global")
         deleteEnvironment(this.environmentIndex)
-      this.$toast.success(`${this.$t("state.deleted")}`)
+      this.$toast.success(`${this.$t("state.deleted")}`, {
+        icon: "delete",
+      })
     },
     duplicateEnvironment() {
       if (this.environmentIndex === "Global") {

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

@@ -140,11 +140,15 @@ export default defineComponent({
           }
         )
         .then((res) => {
-          this.$toast.success(this.$t("export.gist_created"))
+          this.$toast.success(this.$t("export.gist_created"), {
+            icon: "done",
+          })
           window.open(res.html_url)
         })
         .catch((e) => {
-          this.$toast.error(this.$t("error.something_went_wrong"))
+          this.$toast.error(this.$t("error.something_went_wrong"), {
+            icon: "error_outline",
+          })
           console.error(e)
         })
     },
@@ -226,14 +230,18 @@ export default defineComponent({
       a.download = `${url.split("/").pop().split("#")[0].split("?")[0]}.json`
       document.body.appendChild(a)
       a.click()
-      this.$toast.success(this.$t("state.download_started"))
+      this.$toast.success(this.$t("state.download_started"), {
+        icon: "downloading",
+      })
       setTimeout(() => {
         document.body.removeChild(a)
         URL.revokeObjectURL(url)
       }, 1000)
     },
     fileImported() {
-      this.$toast.success(this.$t("state.file_imported"))
+      this.$toast.success(this.$t("state.file_imported"), {
+        icon: "folder_shared",
+      })
     },
   },
 })

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

@@ -1,22 +1,27 @@
 <template>
   <AppSection :label="`${$t('environment.title')}`">
-    <div class="bg-primary sticky top-0 z-10 flex flex-col rounded-t">
+    <div class="bg-primary rounded-t flex flex-col top-0 z-10 sticky">
       <tippy ref="options" interactive trigger="click" theme="popover" arrow>
         <template #trigger>
           <span
             v-tippy="{ theme: 'tooltip' }"
             :title="`${$t('environment.select')}`"
-            class="border-dividerLight select-wrapper flex-1 bg-transparent border-b"
+            class="
+              bg-transparent
+              border-b border-dividerLight
+              flex-1
+              select-wrapper
+            "
           >
             <ButtonSecondary
               v-if="selectedEnvironmentIndex !== -1"
               :label="environments[selectedEnvironmentIndex].name"
-              class="flex-1 pr-8 rounded-none"
+              class="rounded-none flex-1 pr-8"
             />
             <ButtonSecondary
               v-else
               :label="`${$t('environment.no_environment')}`"
-              class="flex-1 pr-8 rounded-none"
+              class="rounded-none flex-1 pr-8"
             />
           </span>
         </template>
@@ -45,7 +50,7 @@
           "
         />
       </tippy>
-      <div class="border-dividerLight flex justify-between flex-1 border-b">
+      <div class="border-b border-dividerLight flex flex-1 justify-between">
         <ButtonSecondary
           svg="plus"
           :label="`${$t('action.new')}`"
@@ -86,7 +91,7 @@
       <EnvironmentsEnvironment
         environment-index="Global"
         :environment="globalEnvironment"
-        class="border-dividerLight border-b border-dashed"
+        class="border-b border-dashed border-dividerLight"
         @edit-environment="editEnvironment('Global')"
       />
       <EnvironmentsEnvironment
@@ -99,15 +104,15 @@
     </div>
     <div
       v-if="environments.length === 0"
-      class="text-secondaryLight flex flex-col items-center justify-center p-4"
+      class="flex flex-col text-secondaryLight p-4 items-center justify-center"
     >
       <img
         :src="`/images/states/${$colorMode.value}/blockchain.svg`"
         loading="lazy"
-        class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
+        class="flex-col my-4 object-contain object-center h-16 w-16 inline-flex"
         :alt="$t('empty.environments')"
       />
-      <span class="pb-4 text-center">
+      <span class="text-center pb-4">
         {{ $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 px-2 space-y-2">
+      <div v-if="mode === 'sign-in'" class="flex flex-col space-y-2 px-2">
         <SmartItem
           :loading="signingInWithGitHub"
           svg="auth/github"
@@ -56,9 +56,9 @@
         />
       </form>
       <div v-if="mode === 'email-sent'" class="flex flex-col px-4">
-        <div class="flex flex-col items-center justify-center max-w-md">
+        <div class="flex flex-col max-w-md justify-center items-center">
-          <SmartIcon class="text-accent w-6 h-6" name="inbox" />
+          <SmartIcon class="h-6 text-accent w-6" name="inbox" />
-          <h3 class="my-2 text-lg text-center">
+          <h3 class="my-2 text-center text-lg">
             {{ $t("auth.we_sent_magic_link") }}
           </h3>
           <p class="text-center">
@@ -95,7 +95,7 @@
       </p>
       <p
         v-if="mode === 'email-sent'"
-        class="text-secondaryLight flex justify-between flex-1"
+        class="flex flex-1 text-secondaryLight justify-between"
       >
         <SmartAnchor
           class="link"
@@ -155,7 +155,9 @@ export default defineComponent({
   },
   methods: {
     showLoginSuccess() {
-      this.$toast.success(`${this.$t("auth.login_success")}`)
+      this.$toast.success(`${this.$t("auth.login_success")}`, {
+        icon: "vpn_key",
+      })
     },
     async signInWithGoogle() {
       this.signingInWithGoogle = true
@@ -172,6 +174,7 @@ export default defineComponent({
           // The pending Google credential.
           const pendingCred = e.credential
           this.$toast.info(`${this.$t("auth.account_exists")}`, {
+            icon: "vpn_key",
             duration: 0,
             closeOnSwipe: false,
             action: {
@@ -187,7 +190,9 @@ export default defineComponent({
             },
           })
         } else {
-          this.$toast.error(`${this.$t("error.something_went_wrong")}`)
+          this.$toast.error(`${this.$t("error.something_went_wrong")}`, {
+            icon: "error_outline",
+          })
         }
       }
 
@@ -213,6 +218,7 @@ export default defineComponent({
           // The pending Google credential.
           const pendingCred = e.credential
           this.$toast.info(`${this.$t("auth.account_exists")}`, {
+            icon: "vpn_key",
             duration: 0,
             closeOnSwipe: false,
             action: {
@@ -228,7 +234,9 @@ export default defineComponent({
             },
           })
         } else {
-          this.$toast.error(`${this.$t("error.something_went_wrong")}`)
+          this.$toast.error(`${this.$t("error.something_went_wrong")}`, {
+            icon: "error_outline",
+          })
         }
       }
 
@@ -248,7 +256,9 @@ export default defineComponent({
         })
         .catch((e) => {
           console.error(e)
-          this.$toast.error(e.message)
+          this.$toast.error(e.message, {
+            icon: "error_outline",
+          })
           this.signingInWithEmail = false
         })
         .finally(() => {

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

@@ -40,10 +40,14 @@ export default defineComponent({
     async logout() {
       try {
         await signOutUser()
-        this.$toast.success(`${this.$t("auth.logged_out")}`)
+        this.$toast.success(`${this.$t("auth.logged_out")}`, {
+          icon: "vpn_key",
+        })
       } catch (e) {
         console.error(e)
-        this.$toast.error(`${this.$t("error.something_went_wrong")}`)
+        this.$toast.error(`${this.$t("error.something_went_wrong")}`, {
+          icon: "error_outline",
+        })
       }
     },
   },

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

@@ -21,19 +21,28 @@
     </div>
     <div
       v-if="gqlField.description"
-      class="text-secondaryLight field-desc py-2"
+      class="text-secondaryLight py-2 field-desc"
     >
       {{ gqlField.description }}
     </div>
     <div
       v-if="gqlField.isDeprecated"
-      class="field-deprecated inline-block px-2 py-1 my-1 text-black bg-yellow-200 rounded"
+      class="
+        rounded
+        bg-yellow-200
+        my-1
+        text-black
+        py-1
+        px-2
+        inline-block
+        field-deprecated
+      "
     >
       {{ $t("state.deprecated") }}
     </div>
     <div v-if="fieldArgs.length > 0">
       <h5 class="my-2">Arguments:</h5>
-      <div class="border-divider pl-4 border-l-2">
+      <div class="border-divider border-l-2 pl-4">
         <div v-for="(field, index) in fieldArgs" :key="`field-${index}`">
           <span>
             {{ field.name }}:
@@ -44,7 +53,7 @@
           </span>
           <div
             v-if="field.description"
-            class="text-secondaryLight field-desc py-2"
+            class="text-secondaryLight py-2 field-desc"
           >
             {{ field.description }}
           </div>

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

@@ -1,21 +1,31 @@
 <template>
-  <div class="bg-primary sticky top-0 z-10 flex p-4">
+  <div class="bg-primary flex p-4 top-0 z-10 sticky">
-    <div class="inline-flex flex-1 space-x-2">
+    <div class="space-x-2 flex-1 inline-flex">
       <input
         id="url"
         v-model="url"
         type="url"
         autocomplete="off"
         spellcheck="false"
-        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"
+        class="
-        :placeholder="`${t('request.url')}`"
+          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
+        "
+        :placeholder="$t('request.url')"
         :disabled="connected"
         @keyup.enter="onConnectClick"
       />
       <ButtonPrimary
         id="get"
         name="get"
-        :label="!connected ? t('action.connect') : t('action.disconnect')"
+        :label="!connected ? $t('action.connect') : $t('action.disconnect')"
         class="w-32"
         @click.native="onConnectClick"
       />
@@ -27,15 +37,9 @@
 import { logHoppRequestRunToAnalytics } from "~/helpers/fb/analytics"
 import { GQLConnection } from "~/helpers/GQLConnection"
 import { getCurrentStrategyID } from "~/helpers/network"
-import {
+import { useReadonlyStream, useStream } from "~/helpers/utils/composables"
-  useReadonlyStream,
-  useStream,
-  useI18n,
-} from "~/helpers/utils/composables"
 import { gqlHeaders$, gqlURL$, setGQLURL } from "~/newstore/GQLSession"
 
-const t = useI18n()
-
 const props = defineProps<{
   conn: GQLConnection
 }>()

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

@@ -3,44 +3,55 @@
     <SmartTabs styles="sticky bg-primary top-upperPrimaryStickyFold z-10">
       <template #actions>
         <ButtonSecondary
-          :label="`${t('request.run')}`"
+          :label="`${$t('request.run')}`"
           svg="play"
           class="rounded-none !text-accent"
           @click.native="runQuery()"
         />
         <ButtonSecondary
           ref="saveRequest"
-          :label="`${t('request.save')}`"
+          :label="`${$t('request.save')}`"
           class="rounded-none"
           @click.native="saveRequest"
         />
       </template>
 
-      <SmartTab :id="'query'" :label="`${t('tab.query')}`" :selected="true">
+      <SmartTab :id="'query'" :label="`${$t('tab.query')}`" :selected="true">
         <AppSection label="query">
           <div
-            class="bg-primary border-dividerLight top-upperSecondaryStickyFold gqlRunQuery sticky z-10 flex items-center justify-between flex-1 pl-4 border-b"
+            class="
+              bg-primary
+              border-b border-dividerLight
+              flex flex-1
+              top-upperSecondaryStickyFold
+              pl-4
+              z-10
+              sticky
+              items-center
+              justify-between
+              gqlRunQuery
+            "
           >
-            <label class="text-secondaryLight font-semibold">
+            <label class="font-semibold text-secondaryLight">
-              {{ t("request.query") }}
+              {{ $t("request.query") }}
             </label>
             <div class="flex">
               <ButtonSecondary
                 v-tippy="{ theme: 'tooltip' }"
-                to="https://docs.hoppscotch.io/graphql/#queries"
+                to="https://docs.hoppscotch.io"
                 blank
-                :title="t('app.wiki')"
+                :title="$t('app.wiki')"
                 svg="help-circle"
               />
               <ButtonSecondary
                 v-tippy="{ theme: 'tooltip' }"
-                :title="t('action.prettify')"
+                :title="$t('action.prettify')"
                 :svg="`${prettifyQueryIcon}`"
                 @click.native="prettifyQuery"
               />
               <ButtonSecondary
                 v-tippy="{ theme: 'tooltip' }"
-                :title="t('action.copy')"
+                :title="$t('action.copy')"
                 :svg="`${copyQueryIcon}`"
                 @click.native="copyQuery"
               />
@@ -50,25 +61,35 @@
         </AppSection>
       </SmartTab>
 
-      <SmartTab :id="'variables'" :label="`${t('tab.variables')}`">
+      <SmartTab :id="'variables'" :label="`${$t('tab.variables')}`">
         <AppSection label="variables">
           <div
-            class="bg-primary border-dividerLight top-upperSecondaryStickyFold sticky z-10 flex items-center justify-between flex-1 pl-4 border-b"
+            class="
+              bg-primary
+              border-b border-dividerLight
+              flex flex-1
+              top-upperSecondaryStickyFold
+              pl-4
+              z-10
+              sticky
+              items-center
+              justify-between
+            "
           >
-            <label class="text-secondaryLight font-semibold">
+            <label class="font-semibold text-secondaryLight">
-              {{ t("request.variables") }}
+              {{ $t("request.variables") }}
             </label>
             <div class="flex">
               <ButtonSecondary
                 v-tippy="{ theme: 'tooltip' }"
-                to="https://docs.hoppscotch.io/graphql/#queries"
+                to="https://docs.hoppscotch.io"
                 blank
-                :title="t('app.wiki')"
+                :title="$t('app.wiki')"
                 svg="help-circle"
               />
               <ButtonSecondary
                 v-tippy="{ theme: 'tooltip' }"
-                :title="t('action.copy')"
+                :title="$t('action.copy')"
                 :svg="`${copyVariablesIcon}`"
                 @click.native="copyVariables"
               />
@@ -78,38 +99,48 @@
         </AppSection>
       </SmartTab>
 
-      <SmartTab :id="'headers'" :label="`${t('tab.headers')}`">
+      <SmartTab :id="'headers'" :label="`${$t('tab.headers')}`">
         <AppSection label="headers">
           <div
-            class="bg-primary border-dividerLight top-upperSecondaryStickyFold sticky z-10 flex items-center justify-between flex-1 pl-4 border-b"
+            class="
+              bg-primary
+              border-b border-dividerLight
+              flex flex-1
+              top-upperSecondaryStickyFold
+              pl-4
+              z-10
+              sticky
+              items-center
+              justify-between
+            "
           >
-            <label class="text-secondaryLight font-semibold">
+            <label class="font-semibold text-secondaryLight">
-              {{ t("tab.headers") }}
+              {{ $t("tab.headers") }}
             </label>
             <div class="flex">
               <ButtonSecondary
                 v-tippy="{ theme: 'tooltip' }"
-                to="https://docs.hoppscotch.io/graphql/#headers"
+                to="https://docs.hoppscotch.io"
                 blank
-                :title="t('app.wiki')"
+                :title="$t('app.wiki')"
                 svg="help-circle"
               />
               <ButtonSecondary
                 v-tippy="{ theme: 'tooltip' }"
-                :title="t('action.clear_all')"
+                :title="$t('action.clear_all')"
                 svg="trash-2"
-                @click.native="clearContent()"
+                @click.native="bulkMode ? clearBulkEditor() : clearContent()"
               />
               <ButtonSecondary
                 v-tippy="{ theme: 'tooltip' }"
-                :title="t('state.bulk_mode')"
+                :title="$t('state.bulk_mode')"
                 svg="edit"
                 :class="{ '!text-accent': bulkMode }"
                 @click.native="bulkMode = !bulkMode"
               />
               <ButtonSecondary
                 v-tippy="{ theme: 'tooltip' }"
-                :title="t('add.new')"
+                :title="$t('add.new')"
                 svg="plus"
                 :disabled="bulkMode"
                 @click.native="addRequestHeader"
@@ -121,10 +152,14 @@
             <div
               v-for="(header, index) in headers"
               :key="`header-${String(index)}`"
-              class="divide-dividerLight border-dividerLight flex border-b divide-x"
+              class="
+                divide-x divide-dividerLight
+                border-b border-dividerLight
+                flex
+              "
             >
               <SmartAutoComplete
-                :placeholder="`${t('count.header', { count: index + 1 })}`"
+                :placeholder="`${$t('count.header', { count: index + 1 })}`"
                 :source="commonHeaders"
                 :spellcheck="false"
                 :value="header.key"
@@ -147,8 +182,8 @@
                 "
               />
               <input
-                class="flex flex-1 px-4 py-2 bg-transparent"
+                class="bg-transparent flex flex-1 py-2 px-4"
-                :placeholder="`${t('count.value', { count: index + 1 })}`"
+                :placeholder="`${$t('count.value', { count: index + 1 })}`"
                 :name="`value ${String(index)}`"
                 :value="header.value"
                 autofocus
@@ -166,9 +201,9 @@
                   :title="
                     header.hasOwnProperty('active')
                       ? header.active
-                        ? t('action.turn_off')
+                        ? $t('action.turn_off')
-                        : t('action.turn_on')
+                        : $t('action.turn_on')
-                      : t('action.turn_off')
+                      : $t('action.turn_off')
                   "
                   :svg="
                     header.hasOwnProperty('active')
@@ -190,7 +225,7 @@
               <span>
                 <ButtonSecondary
                   v-tippy="{ theme: 'tooltip' }"
-                  :title="t('action.remove')"
+                  :title="$t('action.remove')"
                   svg="trash"
                   color="red"
                   @click.native="removeRequestHeader(index)"
@@ -199,19 +234,32 @@
             </div>
             <div
               v-if="headers.length === 0"
-              class="text-secondaryLight flex flex-col items-center justify-center p-4"
+              class="
+                flex flex-col
+                text-secondaryLight
+                p-4
+                items-center
+                justify-center
+              "
             >
               <img
                 :src="`/images/states/${$colorMode.value}/add_category.svg`"
                 loading="lazy"
-                class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
+                class="
-                :alt="`${t('empty.headers')}`"
+                  flex-col
+                  my-4
+                  object-contain object-center
+                  h-16
+                  w-16
+                  inline-flex
+                "
+                :alt="$t('empty.headers')"
               />
-              <span class="pb-4 text-center">
+              <span class="text-center pb-4">
-                {{ t("empty.headers") }}
+                {{ $t("empty.headers") }}
               </span>
               <ButtonSecondary
-                :label="`${t('add.new')}`"
+                :label="`${$t('add.new')}`"
                 filled
                 svg="plus"
                 class="mb-4"
@@ -232,7 +280,7 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref, watch } from "@nuxtjs/composition-api"
+import { onMounted, ref, useContext, watch } from "@nuxtjs/composition-api"
 import clone from "lodash/clone"
 import * as gql from "graphql"
 import { copyToClipboard } from "~/helpers/utils/clipboard"
@@ -240,8 +288,6 @@ import {
   useNuxt,
   useReadonlyStream,
   useStream,
-  useI18n,
-  useToast,
 } from "~/helpers/utils/composables"
 import {
   addGQLHeader,
@@ -268,14 +314,15 @@ import jsonLinter from "~/helpers/editor/linting/json"
 import { createGQLQueryLinter } from "~/helpers/editor/linting/gqlQuery"
 import queryCompleter from "~/helpers/editor/completion/gqlQuery"
 
-const t = useI18n()
-
 const props = defineProps<{
   conn: GQLConnection
 }>()
 
-const toast = useToast()
+const {
-
+  $toast,
+  app: { i18n },
+} = useContext()
+const t = i18n.t.bind(i18n)
 const nuxt = useNuxt()
 
 const bulkMode = ref(false)
@@ -288,9 +335,11 @@ watch(bulkHeaders, () => {
       value: item.substring(item.indexOf(":") + 1).trim(),
       active: !item.trim().startsWith("//"),
     }))
-    setGQLHeaders(transformation as GQLHeader[])
+    setGQLHeaders(transformation)
   } catch (e) {
-    toast.error(`${t("error.something_went_wrong")}`)
+    $toast.error(`${t("error.something_went_wrong")}`, {
+      icon: "error_outline",
+    })
     console.error(e)
   }
 })
@@ -343,13 +392,12 @@ const showSaveRequestModal = ref(false)
 watch(
   headers,
   () => {
-    if (!bulkMode.value)
+    if (
-      if (
+      (headers.value[headers.value.length - 1]?.key !== "" ||
-        (headers.value[headers.value.length - 1]?.key !== "" ||
+        headers.value[headers.value.length - 1]?.value !== "") &&
-          headers.value[headers.value.length - 1]?.value !== "") &&
+      headers.value.length
-        headers.value.length
+    )
-      )
+      addRequestHeader()
-        addRequestHeader()
   },
   { deep: true }
 )
@@ -379,7 +427,6 @@ onMounted(() => {
 const copyQuery = () => {
   copyToClipboard(gqlQueryString.value)
   copyQueryIcon.value = "check"
-  toast.success(`${t("state.copied_to_clipboard")}`)
   setTimeout(() => (copyQueryIcon.value = "copy"), 1000)
 }
 
@@ -423,14 +470,18 @@ const runQuery = async () => {
       })
     )
 
-    toast.success(`${t("state.finished_in", { duration })}`)
+    $toast.success(`${t("state.finished_in", { duration })}`, {
+      icon: "done",
+    })
   } catch (e: any) {
     response.value = `${e}`
     nuxt.value.$loading.finish()
 
-    toast.error(
+    $toast.error(
       `${t("error.something_went_wrong")}. ${t("error.check_console_details")}`,
-      {}
+      {
+        icon: "error_outline",
+      }
     )
     console.error(e)
   }
@@ -448,11 +499,12 @@ const hideRequestModal = () => {
 const prettifyQuery = () => {
   try {
     gqlQueryString.value = gql.print(gql.parse(gqlQueryString.value))
-    prettifyQueryIcon.value = "check"
   } catch (e) {
-    toast.error(`${t("error.gql_prettify_invalid_query")}`)
+    $toast.error(`${t("error.gql_prettify_invalid_query")}`, {
-    prettifyQueryIcon.value = "info"
+      icon: "error_outline",
+    })
   }
+  prettifyQueryIcon.value = "check"
   setTimeout(() => (prettifyQueryIcon.value = "wand"), 1000)
 }
 
@@ -463,7 +515,6 @@ const saveRequest = () => {
 const copyVariables = () => {
   copyToClipboard(variableString.value)
   copyVariablesIcon.value = "check"
-  toast.success(`${t("state.copied_to_clipboard")}`)
   setTimeout(() => (copyVariablesIcon.value = "copy"), 1000)
 }
 
@@ -491,10 +542,11 @@ const removeRequestHeader = (index: number) => {
 
   const deletedItem = headersBeforeDeletion[index]
   if (deletedItem.key || deletedItem.value) {
-    toast.success(`${t("state.deleted")}`, {
+    $toast.success(t("state.deleted").toString(), {
+      icon: "delete",
       action: [
         {
-          text: `${t("action.undo")}`,
+          text: t("action.undo").toString(),
           onClick: (_, toastObject) => {
             setGQLHeaders(headersBeforeDeletion as GQLHeader[])
             editBulkHeadersLine(index, deletedItem)

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

@@ -2,22 +2,32 @@
   <AppSection ref="response" label="response">
     <div
       v-if="responseString === 'loading'"
-      class="flex flex-col items-center justify-center p-4"
+      class="flex flex-col p-4 items-center justify-center"
     >
       <SmartSpinner class="my-4" />
-      <span class="text-secondaryLight">{{ t("state.loading") }}</span>
+      <span class="text-secondaryLight">{{ $t("state.loading") }}</span>
     </div>
     <div v-else-if="responseString">
       <div
-        class="bg-primary border-dividerLight sticky top-0 z-10 flex items-center justify-between flex-1 pl-4 border-b"
+        class="
+          bg-primary
+          border-b border-dividerLight
+          flex flex-1
+          pl-4
+          top-0
+          z-10
+          sticky
+          items-center
+          justify-between
+        "
       >
-        <label class="text-secondaryLight font-semibold">
+        <label class="font-semibold text-secondaryLight">
-          {{ t("response.title") }}
+          {{ $t("response.title") }}
         </label>
         <div class="flex">
           <ButtonSecondary
             v-tippy="{ theme: 'tooltip' }"
-            :title="t('state.linewrap')"
+            :title="$t('state.linewrap')"
             :class="{ '!text-accent': linewrapEnabled }"
             svg="corner-down-left"
             @click.native.prevent="linewrapEnabled = !linewrapEnabled"
@@ -25,14 +35,14 @@
           <ButtonSecondary
             ref="downloadResponse"
             v-tippy="{ theme: 'tooltip' }"
-            :title="t('action.download_file')"
+            :title="$t('action.download_file')"
             :svg="downloadResponseIcon"
             @click.native="downloadResponse"
           />
           <ButtonSecondary
             ref="copyResponseButton"
             v-tippy="{ theme: 'tooltip' }"
-            :title="t('action.copy')"
+            :title="$t('action.copy')"
             :svg="copyResponseIcon"
             @click.native="copyResponse"
           />
@@ -42,15 +52,21 @@
     </div>
     <div
       v-else
-      class="text-secondaryLight flex flex-col items-center justify-center flex-1 p-4"
+      class="
+        flex flex-col flex-1
+        text-secondaryLight
+        p-4
+        items-center
+        justify-center
+      "
     >
-      <div class="flex pb-4 my-4 space-x-2">
+      <div class="flex space-x-2 pb-4 my-4">
-        <div class="flex flex-col items-end space-y-4 text-right">
+        <div class="flex flex-col space-y-4 text-right items-end">
-          <span class="flex items-center flex-1">
+          <span class="flex flex-1 items-center">
-            {{ t("shortcut.general.command_menu") }}
+            {{ $t("shortcut.general.command_menu") }}
           </span>
-          <span class="flex items-center flex-1">
+          <span class="flex flex-1 items-center">
-            {{ t("shortcut.general.help_menu") }}
+            {{ $t("shortcut.general.help_menu") }}
           </span>
         </div>
         <div class="flex flex-col space-y-4">
@@ -63,8 +79,8 @@
         </div>
       </div>
       <ButtonSecondary
-        :label="`${t('app.documentation')}`"
+        :label="`${$t('app.documentation')}`"
-        to="https://docs.hoppscotch.io/features/response"
+        to="https://docs.hoppscotch.io"
         svg="external-link"
         blank
         outline
@@ -75,19 +91,17 @@
 </template>
 
 <script setup lang="ts">
-import { reactive, ref } from "@nuxtjs/composition-api"
+import { reactive, ref, useContext } from "@nuxtjs/composition-api"
 import { useCodemirror } from "~/helpers/editor/codemirror"
 import { copyToClipboard } from "~/helpers/utils/clipboard"
-import {
+import { useReadonlyStream } from "~/helpers/utils/composables"
-  useReadonlyStream,
-  useI18n,
-  useToast,
-} from "~/helpers/utils/composables"
 import { gqlResponse$ } from "~/newstore/GQLSession"
 
-const t = useI18n()
+const {
-
+  $toast,
-const toast = useToast()
+  app: { i18n },
+} = useContext()
+const t = i18n.t.bind(i18n)
 
 const responseString = useReadonlyStream(gqlResponse$, "")
 
@@ -114,7 +128,6 @@ const copyResponseIcon = ref("copy")
 const copyResponse = () => {
   copyToClipboard(responseString.value!)
   copyResponseIcon.value = "check"
-  toast.success(`${t("state.copied_to_clipboard")}`)
   setTimeout(() => (copyResponseIcon.value = "copy"), 1000)
 }
 
@@ -128,7 +141,9 @@ const downloadResponse = () => {
   document.body.appendChild(a)
   a.click()
   downloadResponseIcon.value = "check"
-  toast.success(`${t("state.download_started")}`)
+  $toast.success(`${t("state.download_started")}`, {
+    icon: "downloading",
+  })
   setTimeout(() => {
     document.body.removeChild(a)
     URL.revokeObjectURL(url)

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

@@ -3,7 +3,7 @@
     <SmartTab
       :id="'history'"
       icon="clock"
-      :label="`${t('tab.history')}`"
+      :label="`${$t('tab.history')}`"
       :selected="true"
     >
       <History
@@ -16,7 +16,7 @@
     <SmartTab
       :id="'collections'"
       icon="folder"
-      :label="`${t('tab.collections')}`"
+      :label="`${$t('tab.collections')}`"
     >
       <CollectionsGraphql />
     </SmartTab>
@@ -24,7 +24,7 @@
     <SmartTab
       :id="'docs'"
       icon="book-open"
-      :label="`${t('tab.documentation')}`"
+      :label="`${$t('tab.documentation')}`"
     >
       <AppSection label="docs">
         <div
@@ -34,33 +34,46 @@
             subscriptionFields.length === 0 &&
             graphqlTypes.length === 0
           "
-          class="text-secondaryLight flex flex-col items-center justify-center p-4"
+          class="
+            flex flex-col
+            text-secondaryLight
+            p-4
+            items-center
+            justify-center
+          "
         >
           <img
             :src="`/images/states/${$colorMode.value}/add_comment.svg`"
             loading="lazy"
-            class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
+            class="
-            :alt="`${t('empty.documentation')}`"
+              flex-col
+              my-4
+              object-contain object-center
+              h-16
+              w-16
+              inline-flex
+            "
+            :alt="$t('empty.documentation')"
           />
-          <span class="mb-4 text-center">
+          <span class="text-center mb-4">
-            {{ t("empty.documentation") }}
+            {{ $t("empty.documentation") }}
           </span>
         </div>
         <div v-else>
-          <div class="bg-primary sticky top-0 z-10 flex">
+          <div class="bg-primary flex top-0 z-10 sticky">
             <input
               v-model="graphqlFieldsFilterText"
               type="search"
               autocomplete="off"
-              :placeholder="`${t('action.search')}`"
+              :placeholder="`${$t('action.search')}`"
-              class="flex w-full p-4 py-2 bg-transparent"
+              class="bg-transparent flex w-full p-4 py-2"
             />
             <div class="flex">
               <ButtonSecondary
                 v-tippy="{ theme: 'tooltip' }"
                 to="https://docs.hoppscotch.io/quickstart/graphql"
                 blank
-                :title="t('app.wiki')"
+                :title="$t('app.wiki')"
                 svg="help-circle"
               />
             </div>
@@ -73,9 +86,9 @@
               <SmartTab
                 v-if="queryFields.length > 0"
                 :id="'queries'"
-                :label="`${t('tab.queries')}`"
+                :label="`${$t('tab.queries')}`"
                 :selected="true"
-                class="divide-dividerLight divide-y"
+                class="divide-y divide-dividerLight"
               >
                 <GraphqlField
                   v-for="(field, index) in filteredQueryFields"
@@ -88,8 +101,8 @@
               <SmartTab
                 v-if="mutationFields.length > 0"
                 :id="'mutations'"
-                :label="`${t('graphql.mutations')}`"
+                :label="`${$t('graphql.mutations')}`"
-                class="divide-dividerLight divide-y"
+                class="divide-y divide-dividerLight"
               >
                 <GraphqlField
                   v-for="(field, index) in filteredMutationFields"
@@ -102,8 +115,8 @@
               <SmartTab
                 v-if="subscriptionFields.length > 0"
                 :id="'subscriptions'"
-                :label="`${t('graphql.subscriptions')}`"
+                :label="`${$t('graphql.subscriptions')}`"
-                class="divide-dividerLight divide-y"
+                class="divide-y divide-dividerLight"
               >
                 <GraphqlField
                   v-for="(field, index) in filteredSubscriptionFields"
@@ -117,8 +130,8 @@
                 v-if="graphqlTypes.length > 0"
                 :id="'types'"
                 ref="typesTab"
-                :label="`${t('tab.types')}`"
+                :label="`${$t('tab.types')}`"
-                class="divide-dividerLight divide-y"
+                class="divide-y divide-dividerLight"
               >
                 <GraphqlType
                   v-for="(type, index) in filteredGraphqlTypes"
@@ -136,26 +149,36 @@
       </AppSection>
     </SmartTab>
 
-    <SmartTab :id="'schema'" icon="box" :label="`${t('tab.schema')}`">
+    <SmartTab :id="'schema'" icon="box" :label="`${$t('tab.schema')}`">
       <AppSection ref="schema" label="schema">
         <div
           v-if="schemaString"
-          class="bg-primary border-dividerLight sticky top-0 z-10 flex items-center justify-between flex-1 pl-4 border-b"
+          class="
+            bg-primary
+            flex flex-1
+            top-0
+            pl-4
+            z-10
+            sticky
+            items-center
+            justify-between
+            border-b border-dividerLight
+          "
         >
-          <label class="text-secondaryLight font-semibold">
+          <label class="font-semibold text-secondaryLight">
-            {{ t("graphql.schema") }}
+            {{ $t("graphql.schema") }}
           </label>
           <div class="flex">
             <ButtonSecondary
               v-tippy="{ theme: 'tooltip' }"
               to="https://docs.hoppscotch.io/quickstart/graphql"
               blank
-              :title="t('app.wiki')"
+              :title="$t('app.wiki')"
               svg="help-circle"
             />
             <ButtonSecondary
               v-tippy="{ theme: 'tooltip' }"
-              :title="t('state.linewrap')"
+              :title="$t('state.linewrap')"
               :class="{ '!text-accent': linewrapEnabled }"
               svg="corner-down-left"
               @click.native.prevent="linewrapEnabled = !linewrapEnabled"
@@ -163,14 +186,14 @@
             <ButtonSecondary
               ref="downloadSchema"
               v-tippy="{ theme: 'tooltip' }"
-              :title="t('action.download_file')"
+              :title="$t('action.download_file')"
               :svg="downloadSchemaIcon"
               @click.native="downloadSchema"
             />
             <ButtonSecondary
               ref="copySchemaCode"
               v-tippy="{ theme: 'tooltip' }"
-              :title="t('action.copy')"
+              :title="$t('action.copy')"
               :svg="copySchemaIcon"
               @click.native="copySchema"
             />
@@ -179,16 +202,29 @@
         <div v-if="schemaString" ref="schemaEditor"></div>
         <div
           v-else
-          class="text-secondaryLight flex flex-col items-center justify-center p-4"
+          class="
+            flex flex-col
+            text-secondaryLight
+            p-4
+            items-center
+            justify-center
+          "
         >
           <img
             :src="`/images/states/${$colorMode.value}/blockchain.svg`"
             loading="lazy"
-            class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
+            class="
-            :alt="`${t('empty.schema')}`"
+              flex-col
+              my-4
+              object-contain object-center
+              h-16
+              w-16
+              inline-flex
+            "
+            :alt="$t('empty.schema')"
           />
-          <span class="mb-4 text-center">
+          <span class="text-center mb-4">
-            {{ t("empty.schema") }}
+            {{ $t("empty.schema") }}
           </span>
         </div>
       </AppSection>
@@ -197,18 +233,20 @@
 </template>
 
 <script setup lang="ts">
-import { computed, nextTick, reactive, ref } from "@nuxtjs/composition-api"
+import {
+  computed,
+  nextTick,
+  reactive,
+  ref,
+  useContext,
+} from "@nuxtjs/composition-api"
 import { GraphQLField, GraphQLType } from "graphql"
 import { map } from "rxjs/operators"
 import { useCodemirror } from "~/helpers/editor/codemirror"
 import { GQLConnection } from "~/helpers/GQLConnection"
 import { GQLHeader } from "~/helpers/types/HoppGQLRequest"
 import { copyToClipboard } from "~/helpers/utils/clipboard"
-import {
+import { useReadonlyStream } from "~/helpers/utils/composables"
-  useReadonlyStream,
-  useI18n,
-  useToast,
-} from "~/helpers/utils/composables"
 import {
   setGQLHeaders,
   setGQLQuery,
@@ -217,8 +255,6 @@ import {
   setGQLVariables,
 } from "~/newstore/GQLSession"
 
-const t = useI18n()
-
 function isTextFoundInGraphqlFieldObject(
   text: string,
   field: GraphQLField<any, any>
@@ -285,7 +321,11 @@ const props = defineProps<{
   conn: GQLConnection
 }>()
 
-const toast = useToast()
+const {
+  $toast,
+  app: { i18n },
+} = useContext()
+const t = i18n.t.bind(i18n)
 
 const queryFields = useReadonlyStream(
   props.conn.queryFields$.pipe(map((x) => x ?? [])),
@@ -368,25 +408,12 @@ const handleJumpToType = async (type: GraphQLType) => {
   await nextTick()
 
   const rootTypeName = resolveRootType(type).name
+
   const target = document.getElementById(`type_${rootTypeName}`)
   if (target) {
-    target.scrollIntoView({ block: "center", behavior: "smooth" })
+    gqlTabs.value.$el
-    target.classList.add(
+      .querySelector(".gqlTabs")
-      "transition-all",
+      .scrollTo({ top: target.offsetTop, behavior: "smooth" })
-      "ring-inset",
-      "ring-accentLight",
-      "ring-4"
-    )
-    setTimeout(
-      () =>
-        target.classList.remove(
-          "ring-inset",
-          "ring-accentLight",
-          "ring-4",
-          "transition-all"
-        ),
-      2000
-    )
   }
 }
 
@@ -422,7 +449,9 @@ const downloadSchema = () => {
   document.body.appendChild(a)
   a.click()
   downloadSchemaIcon.value = "check"
-  toast.success(`${t("state.download_started")}`)
+  $toast.success(`${t("state.download_started")}`, {
+    icon: "downloading",
+  })
   setTimeout(() => {
     document.body.removeChild(a)
     URL.revokeObjectURL(url)

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="py-2 text-secondaryLight type-desc">
+    <div v-if="gqlType.description" class="text-secondaryLight py-2 type-desc">
       {{ gqlType.description }}
     </div>
     <div v-if="interfaces.length > 0">
@@ -18,7 +18,7 @@
         <GraphqlTypeLink
           :gql-type="gqlInterface"
           :jump-type-callback="jumpTypeCallback"
-          class="pl-4 border-l-2 border-divider"
+          class="border-divider border-l-2 pl-4"
         />
       </div>
     </div>
@@ -29,7 +29,7 @@
         :key="`child-${index}`"
         :gql-type="child"
         :jump-type-callback="jumpTypeCallback"
-        class="pl-4 border-l-2 border-divider"
+        class="border-divider border-l-2 pl-4"
       />
     </div>
     <div v-if="gqlType.getFields">
@@ -37,7 +37,7 @@
       <GraphqlField
         v-for="(field, index) in gqlType.getFields()"
         :key="`field-${index}`"
-        class="pl-4 border-l-2 border-divider"
+        class="border-divider border-l-2 pl-4"
         :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="pl-4 border-l-2 border-divider"
+        class="border-divider border-l-2 pl-4"
         v-text="value.name"
       ></div>
     </div>

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

@@ -1,8 +1,17 @@
 <template>
-  <div class="group flex flex-col">
+  <div class="flex flex-col group">
     <div class="flex items-center">
       <span
-        class="group-hover:text-secondaryDark flex flex-1 min-w-0 py-2 pl-4 pr-2 transition cursor-pointer"
+        class="
+          cursor-pointer
+          flex flex-1
+          min-w-0
+          py-2
+          pr-2
+          pl-4
+          transition
+          group-hover:text-secondaryDark
+        "
         data-testid="restore_history_entry"
         @click="useEntry"
       >
@@ -15,7 +24,7 @@
         svg="trash"
         color="red"
         :title="$t('action.remove')"
-        class="group-hover:inline-flex hidden"
+        class="hidden group-hover:inline-flex"
         data-testid="delete_history_entry"
         @click.native="$emit('delete-entry')"
       />
@@ -23,7 +32,7 @@
         v-tippy="{ theme: 'tooltip' }"
         :title="expand ? $t('hide.more') : $t('show.more')"
         :svg="expand ? 'minimize-2' : 'maximize-2'"
-        class="group-hover:inline-flex hidden"
+        class="hidden group-hover:inline-flex"
         @click.native="expand = !expand"
       />
       <ButtonSecondary
@@ -40,7 +49,7 @@
       <span
         v-for="(line, index) in query"
         :key="`line-${index}`"
-        class="text-secondaryLight px-4 truncate whitespace-pre cursor-pointer"
+        class="cursor-pointer text-secondaryLight px-4 whitespace-pre truncate"
         data-testid="restore_history_entry"
         @click="useEntry"
         >{{ line }}</span

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

@@ -1,11 +1,11 @@
 <template>
   <AppSection label="history">
-    <div class="sticky top-0 z-10 flex border-b bg-primary border-dividerLight">
+    <div class="bg-primary border-b border-dividerLight flex top-0 z-10 sticky">
       <input
         v-model="filterText"
         type="search"
         autocomplete="off"
-        class="flex w-full p-4 py-2 bg-transparent"
+        class="bg-transparent flex w-full p-4 py-2"
         :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 items-center justify-center p-4 text-secondaryLight"
+      class="flex flex-col text-secondaryLight p-4 items-center justify-center"
     >
-      <i class="pb-2 opacity-75 material-icons">manage_search</i>
+      <i class="opacity-75 pb-2 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 items-center justify-center p-4 text-secondaryLight"
+      class="flex flex-col text-secondaryLight p-4 items-center justify-center"
     >
       <img
         :src="`/images/states/${$colorMode.value}/history.svg`"
         loading="lazy"
-        class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
+        class="flex-col my-4 object-contain object-center h-16 w-16 inline-flex"
         :alt="$t('empty.history')"
       />
-      <span class="mb-4 text-center">
+      <span class="text-center mb-4">
         {{ $t("empty.history") }}
       </span>
     </div>
@@ -140,7 +140,9 @@ export default defineComponent({
     clearHistory() {
       if (this.page === "rest") clearRESTHistory()
       else clearGraphqlHistory()
-      this.$toast.success(`${this.$t("state.history_deleted")}`)
+      this.$toast.success(`${this.$t("state.history_deleted")}`, {
+        icon: "delete",
+      })
     },
     useHistory(entry: any) {
       if (this.page === "rest") setRESTRequest(entry.request)
@@ -148,7 +150,9 @@ export default defineComponent({
     deleteHistory(entry: any) {
       if (this.page === "rest") deleteRESTHistoryEntry(entry)
       else deleteGraphqlHistoryEntry(entry)
-      this.$toast.success(`${this.$t("state.deleted")}`)
+      this.$toast.success(`${this.$t("state.deleted")}`, {
+        icon: "delete",
+      })
     },
     toggleStar(entry: any) {
       if (this.page === "rest") toggleRESTHistoryEntryStar(entry)

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

@@ -1,7 +1,7 @@
 <template>
-  <div class="group flex items-center">
+  <div class="flex items-center group">
     <span
-      class="flex items-center justify-center w-16 px-2 truncate cursor-pointer"
+      class="cursor-pointer flex px-2 w-16 justify-center items-center truncate"
       :class="entryStatus.className"
       data-testid="restore_history_entry"
       :title="`${duration}`"
@@ -10,7 +10,15 @@
       {{ entry.request.method }}
     </span>
     <span
-      class="group-hover:text-secondaryDark flex flex-1 min-w-0 py-2 pr-2 transition cursor-pointer"
+      class="
+        cursor-pointer
+        flex flex-1
+        min-w-0
+        py-2
+        pr-2
+        transition
+        group-hover:text-secondaryDark
+      "
       data-testid="restore_history_entry"
       :title="`${duration}`"
       @click="$emit('use-entry')"
@@ -24,7 +32,7 @@
       svg="trash"
       color="red"
       :title="$t('action.remove')"
-      class="group-hover:inline-flex hidden"
+      class="hidden group-hover:inline-flex"
       data-testid="delete_history_entry"
       @click.native="$emit('delete-entry')"
     />
@@ -41,9 +49,13 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType } from "@nuxtjs/composition-api"
+import {
+  computed,
+  defineComponent,
+  PropType,
+  useContext,
+} from "@nuxtjs/composition-api"
 import findStatusGroup from "~/helpers/findStatusGroup"
-import { useI18n } from "~/helpers/utils/composables"
 import { RESTHistoryEntry } from "~/newstore/history"
 
 export default defineComponent({
@@ -52,7 +64,10 @@ export default defineComponent({
     showMore: Boolean,
   },
   setup(props) {
-    const t = useI18n()
+    const {
+      app: { i18n },
+    } = useContext()
+    const $t = i18n.t.bind(i18n)
 
     const duration = computed(() => {
       if (props.entry.responseMeta.duration) {
@@ -60,9 +75,9 @@ export default defineComponent({
         if (!responseDuration) return ""
 
         return responseDuration > 0
-          ? `${t("request.duration")}: ${responseDuration}ms`
+          ? `${$t("request.duration")}: ${responseDuration}ms`
-          : t("error.no_duration")
+          : $t("error.no_duration")
-      } else return t("error.no_duration")
+      } else return $t("error.no_duration")
     })
 
     const entryStatus = computed(() => {

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

@@ -1,10 +1,20 @@
 <template>
   <div>
     <div
-      class="bg-primary border-dividerLight top-upperSecondaryStickyFold sticky z-10 flex items-center justify-between flex-1 pl-4 border-b"
+      class="
+        bg-primary
+        border-b border-dividerLight
+        flex flex-1
+        top-upperSecondaryStickyFold
+        pl-4
+        z-10
+        sticky
+        items-center
+        justify-between
+      "
     >
       <span class="flex items-center">
-        <label class="text-secondaryLight font-semibold">
+        <label class="font-semibold text-secondaryLight">
           {{ $t("authorization.type") }}
         </label>
         <tippy
@@ -17,7 +27,7 @@
           <template #trigger>
             <span class="select-wrapper">
               <ButtonSecondary
-                class="pr-8 ml-2 rounded-none"
+                class="rounded-none ml-2 pr-8"
                 :label="authName"
               />
             </span>
@@ -83,37 +93,37 @@
     </div>
     <div
       v-if="authType === 'none'"
-      class="text-secondaryLight flex flex-col items-center justify-center p-4"
+      class="flex flex-col text-secondaryLight p-4 items-center justify-center"
     >
       <img
         :src="`/images/states/${$colorMode.value}/login.svg`"
         loading="lazy"
-        class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
+        class="flex-col my-4 object-contain object-center h-16 w-16 inline-flex"
         :alt="$t('empty.authorization')"
       />
-      <span class="pb-4 text-center">
+      <span class="text-center pb-4">
         {{ $t("empty.authorization") }}
       </span>
       <ButtonSecondary
         outline
         :label="$t('app.documentation')"
-        to="https://docs.hoppscotch.io/features/authorization"
+        to="https://docs.hoppscotch.io"
         blank
         svg="external-link"
         reverse
         class="mb-4"
       />
     </div>
-    <div v-if="authType === 'basic'" class="border-dividerLight flex border-b">
+    <div v-if="authType === 'basic'" class="border-b border-dividerLight flex">
-      <div class="border-dividerLight w-2/3 border-r">
+      <div class="border-r border-dividerLight w-2/3">
-        <div class="border-dividerLight flex border-b">
+        <div class="border-b border-dividerLight flex">
           <SmartEnvInput
             v-model="basicUsername"
             :placeholder="$t('authorization.username')"
             styles="bg-transparent flex flex-1 py-1 px-4"
           />
         </div>
-        <div class="border-dividerLight flex border-b">
+        <div class="border-b border-dividerLight flex">
           <SmartEnvInput
             v-model="basicPassword"
             :placeholder="$t('authorization.password')"
@@ -122,7 +132,17 @@
         </div>
       </div>
       <div
-        class="bg-primary top-upperTertiaryStickyFold min-w-46 max-w-1/3 z-9 sticky h-full p-4 overflow-auto"
+        class="
+          bg-primary
+          h-full
+          top-upperTertiaryStickyFold
+          min-w-46
+          max-w-1/3
+          p-4
+          z-9
+          sticky
+          overflow-auto
+        "
       >
         <div class="p-2">
           <div class="text-secondaryLight pb-2">
@@ -131,15 +151,15 @@
           <SmartAnchor
             class="link"
             :label="`${$t('authorization.learn')} \xA0 →`"
-            to="https://docs.hoppscotch.io/features/authorization"
+            to="https://docs.hoppscotch.io/"
             blank
           />
         </div>
       </div>
     </div>
-    <div v-if="authType === 'bearer'" class="border-dividerLight flex border-b">
+    <div v-if="authType === 'bearer'" class="border-b border-dividerLight flex">
-      <div class="border-dividerLight w-2/3 border-r">
+      <div class="border-r border-dividerLight w-2/3">
-        <div class="border-dividerLight flex border-b">
+        <div class="border-b border-dividerLight flex">
           <SmartEnvInput
             v-model="bearerToken"
             placeholder="Token"
@@ -148,7 +168,17 @@
         </div>
       </div>
       <div
-        class="bg-primary top-upperTertiaryStickyFold min-w-46 max-w-1/3 z-9 sticky h-full p-4 overflow-auto"
+        class="
+          bg-primary
+          h-full
+          top-upperTertiaryStickyFold
+          min-w-46
+          max-w-1/3
+          p-4
+          z-9
+          sticky
+          overflow-auto
+        "
       >
         <div class="p-2">
           <div class="text-secondaryLight pb-2">
@@ -157,7 +187,7 @@
           <SmartAnchor
             class="link"
             :label="`${$t('authorization.learn')} \xA0 →`"
-            to="https://docs.hoppscotch.io/features/authorization"
+            to="https://docs.hoppscotch.io/"
             blank
           />
         </div>
@@ -165,10 +195,10 @@
     </div>
     <div
       v-if="authType === 'oauth-2'"
-      class="border-dividerLight flex border-b"
+      class="border-b border-dividerLight flex"
     >
-      <div class="border-dividerLight w-2/3 border-r">
+      <div class="border-r border-dividerLight w-2/3">
-        <div class="border-dividerLight flex border-b">
+        <div class="border-b border-dividerLight flex">
           <SmartEnvInput
             v-model="oauth2Token"
             placeholder="Token"
@@ -178,7 +208,17 @@
         <HttpOAuth2Authorization />
       </div>
       <div
-        class="bg-primary top-upperTertiaryStickyFold min-w-46 max-w-1/3 z-9 sticky h-full p-4 overflow-auto"
+        class="
+          bg-primary
+          h-full
+          top-upperTertiaryStickyFold
+          min-w-46
+          max-w-1/3
+          p-4
+          z-9
+          sticky
+          overflow-auto
+        "
       >
         <div class="p-2">
           <div class="text-secondaryLight pb-2">
@@ -187,7 +227,7 @@
           <SmartAnchor
             class="link"
             :label="`${$t('authorization.learn')} \xA0 →`"
-            to="https://docs.hoppscotch.io/features/authorization"
+            to="https://docs.hoppscotch.io/"
             blank
           />
         </div>

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

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

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

@@ -1,9 +1,19 @@
 <template>
   <AppSection label="bodyParameters">
     <div
-      class="bg-primary border-dividerLight top-upperTertiaryStickyFold sticky z-10 flex items-center justify-between flex-1 pl-4 border-b"
+      class="
+        bg-primary
+        border-b border-dividerLight
+        flex flex-1
+        top-upperTertiaryStickyFold
+        pl-4
+        z-10
+        sticky
+        items-center
+        justify-between
+      "
     >
-      <label class="text-secondaryLight font-semibold">
+      <label class="font-semibold text-secondaryLight">
         {{ $t("request.body") }}
       </label>
       <div class="flex">
@@ -31,7 +41,7 @@
     <div
       v-for="(param, index) in bodyParams"
       :key="`param-${index}`"
-      class="divide-dividerLight border-dividerLight flex border-b divide-x"
+      class="divide-x divide-dividerLight border-b border-dividerLight flex"
     >
       <SmartEnvInput
         v-model="param.key"
@@ -53,7 +63,7 @@
         "
       />
       <div v-if="param.isFile" class="file-chips-container hide-scrollbar">
-        <div class="file-chips-wrapper space-x-2">
+        <div class="space-x-2 file-chips-wrapper">
           <SmartDeletableChip
             v-for="(file, fileIndex) in param.value"
             :key="`param-${index}-file-${fileIndex}`"
@@ -141,15 +151,15 @@
     </div>
     <div
       v-if="bodyParams.length === 0"
-      class="text-secondaryLight flex flex-col items-center justify-center p-4"
+      class="flex flex-col text-secondaryLight p-4 items-center justify-center"
     >
       <img
         :src="`/images/states/${$colorMode.value}/upload_single_file.svg`"
         loading="lazy"
-        class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
+        class="flex-col my-4 object-contain object-center h-16 w-16 inline-flex"
         :alt="$t('empty.body')"
       />
-      <span class="pb-4 text-center">
+      <span class="text-center pb-4">
         {{ $t("empty.body") }}
       </span>
       <ButtonSecondary

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

@@ -7,7 +7,7 @@
     <template #body>
       <div class="flex flex-col px-2">
         <label for="requestType" class="px-4 pb-4">
-          {{ t("request.choose_language") }}
+          {{ $t("request.choose_language") }}
         </label>
         <tippy ref="options" interactive trigger="click" theme="popover" arrow>
           <template #trigger>
@@ -33,7 +33,7 @@
             "
           />
         </tippy>
-        <div class="flex justify-between flex-1">
+        <div class="flex flex-1 justify-between">
           <label for="generatedCode" class="p-4">
             {{ t("request.generated_code") }}
           </label>
@@ -41,7 +41,7 @@
         <div
           v-if="codegenType"
           ref="generatedCode"
-          class="border rounded border-dividerLight"
+          class="border border-dividerLight rounded"
         ></div>
       </div>
     </template>
@@ -62,16 +62,13 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, watch } from "@nuxtjs/composition-api"
+import { computed, ref, useContext, watch } from "@nuxtjs/composition-api"
 import { codegens, generateCodegenContext } from "~/helpers/codegen/codegen"
 import { useCodemirror } from "~/helpers/editor/codemirror"
 import { copyToClipboard } from "~/helpers/utils/clipboard"
 import { getEffectiveRESTRequest } from "~/helpers/utils/EffectiveURL"
 import { getCurrentEnvironment } from "~/newstore/environments"
 import { getRESTRequest } from "~/newstore/RESTSession"
-import { useI18n, useToast } from "~/helpers/utils/composables"
-
-const t = useI18n()
 
 const props = defineProps<{
   show: boolean
@@ -81,7 +78,11 @@ const emit = defineEmits<{
   (e: "hide-modal"): void
 }>()
 
-const toast = useToast()
+const {
+  $toast,
+  app: { i18n },
+} = useContext()
+const t = i18n.t.bind(i18n)
 
 const options = ref<any | null>(null)
 
@@ -125,7 +126,9 @@ const hideModal = () => emit("hide-modal")
 const copyRequestCode = () => {
   copyToClipboard(requestCode.value)
   copyIcon.value = "check"
-  toast.success(`${t("state.copied_to_clipboard")}`)
+  $toast.success(`${t("state.copied_to_clipboard")}`, {
+    icon: "content_paste",
+  })
   setTimeout(() => (copyIcon.value = "copy"), 1000)
 }
 </script>

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

@@ -1,35 +1,45 @@
 <template>
   <AppSection label="headers">
     <div
-      class="bg-primary border-dividerLight top-upperSecondaryStickyFold sticky z-10 flex items-center justify-between flex-1 pl-4 border-b"
+      class="
+        bg-primary
+        border-b border-dividerLight
+        flex flex-1
+        top-upperSecondaryStickyFold
+        pl-4
+        z-10
+        sticky
+        items-center
+        justify-between
+      "
     >
-      <label class="text-secondaryLight font-semibold">
+      <label class="font-semibold text-secondaryLight">
-        {{ t("request.header_list") }}
+        {{ $t("request.header_list") }}
       </label>
       <div class="flex">
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           to="https://docs.hoppscotch.io/features/headers"
           blank
-          :title="t('app.wiki')"
+          :title="$t('app.wiki')"
           svg="help-circle"
         />
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
-          :title="t('action.clear_all')"
+          :title="$t('action.clear_all')"
           svg="trash-2"
-          @click.native="clearContent()"
+          @click.native="bulkMode ? clearBulkEditor() : clearContent()"
         />
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
-          :title="t('state.bulk_mode')"
+          :title="$t('state.bulk_mode')"
           svg="edit"
           :class="{ '!text-accent': bulkMode }"
           @click.native="bulkMode = !bulkMode"
         />
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
-          :title="t('add.new')"
+          :title="$t('add.new')"
           svg="plus"
           :disabled="bulkMode"
           @click.native="addHeader"
@@ -41,10 +51,10 @@
       <div
         v-for="(header, index) in headers$"
         :key="`header-${index}`"
-        class="divide-dividerLight border-dividerLight flex border-b divide-x"
+        class="divide-x divide-dividerLight border-b border-dividerLight flex"
       >
         <SmartAutoComplete
-          :placeholder="`${t('count.header', { count: index + 1 })}`"
+          :placeholder="`${$t('count.header', { count: index + 1 })}`"
           :source="commonHeaders"
           :spellcheck="false"
           :value="header.key"
@@ -68,7 +78,7 @@
         />
         <SmartEnvInput
           v-model="header.value"
-          :placeholder="`${t('count.value', { count: index + 1 })}`"
+          :placeholder="`${$t('count.value', { count: index + 1 })}`"
           styles="
             bg-transparent
             flex
@@ -90,9 +100,9 @@
             :title="
               header.hasOwnProperty('active')
                 ? header.active
-                  ? t('action.turn_off')
+                  ? $t('action.turn_off')
-                  : t('action.turn_on')
+                  : $t('action.turn_on')
-                : t('action.turn_off')
+                : $t('action.turn_off')
             "
             :svg="
               header.hasOwnProperty('active')
@@ -116,7 +126,7 @@
         <span>
           <ButtonSecondary
             v-tippy="{ theme: 'tooltip' }"
-            :title="t('action.remove')"
+            :title="$t('action.remove')"
             svg="trash"
             color="red"
             @click.native="deleteHeader(index)"
@@ -125,20 +135,33 @@
       </div>
       <div
         v-if="headers$.length === 0"
-        class="text-secondaryLight flex flex-col items-center justify-center p-4"
+        class="
+          flex flex-col
+          text-secondaryLight
+          p-4
+          items-center
+          justify-center
+        "
       >
         <img
           :src="`/images/states/${$colorMode.value}/add_category.svg`"
           loading="lazy"
-          class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
+          class="
-          :alt="`${t('empty.headers')}`"
+            flex-col
+            my-4
+            object-contain object-center
+            h-16
+            w-16
+            inline-flex
+          "
+          :alt="$t('empty.headers')"
         />
-        <span class="pb-4 text-center">
+        <span class="text-center pb-4">
-          {{ t("empty.headers") }}
+          {{ $t("empty.headers") }}
         </span>
         <ButtonSecondary
           filled
-          :label="`${t('add.new')}`"
+          :label="`${$t('add.new')}`"
           svg="plus"
           class="mb-4"
           @click.native="addHeader"
@@ -149,7 +172,7 @@
 </template>
 
 <script setup lang="ts">
-import { onBeforeUpdate, ref, watch } from "@nuxtjs/composition-api"
+import { onBeforeUpdate, ref, useContext, watch } from "@nuxtjs/composition-api"
 import { useCodemirror } from "~/helpers/editor/codemirror"
 import {
   addRESTHeader,
@@ -160,16 +183,14 @@ import {
   updateRESTHeader,
 } from "~/newstore/RESTSession"
 import { commonHeaders } from "~/helpers/headers"
-import {
+import { useReadonlyStream } from "~/helpers/utils/composables"
-  useReadonlyStream,
-  useI18n,
-  useToast,
-} from "~/helpers/utils/composables"
 import { HoppRESTHeader } from "~/helpers/types/HoppRESTRequest"
 
-const t = useI18n()
+const {
-
+  $toast,
-const toast = useToast()
+  app: { i18n },
+} = useContext()
+const t = i18n.t.bind(i18n)
 
 const bulkMode = ref(false)
 const bulkHeaders = ref("")
@@ -191,9 +212,11 @@ watch(bulkHeaders, () => {
       value: item.substring(item.indexOf(":") + 1).trim(),
       active: !item.trim().startsWith("//"),
     }))
-    setRESTHeaders(transformation as HoppRESTHeader[])
+    setRESTHeaders(transformation)
   } catch (e) {
-    toast.error(`${t("error.something_went_wrong")}`)
+    $toast.error(`${t("error.something_went_wrong")}`, {
+      icon: "error_outline",
+    })
     console.error(e)
   }
 })
@@ -203,13 +226,12 @@ const headers$ = useReadonlyStream(restHeaders$, [])
 watch(
   headers$,
   (newValue) => {
-    if (!bulkMode.value)
+    if (
-      if (
+      (newValue[newValue.length - 1]?.key !== "" ||
-        (newValue[newValue.length - 1]?.key !== "" ||
+        newValue[newValue.length - 1]?.value !== "") &&
-          newValue[newValue.length - 1]?.value !== "") &&
+      newValue.length
-        newValue.length
+    )
-      )
+      addHeader()
-        addHeader()
   },
   { deep: true }
 )
@@ -255,10 +277,11 @@ const deleteHeader = (index: number) => {
 
   const deletedItem = headersBeforeDeletion[index]
   if (deletedItem.key || deletedItem.value) {
-    toast.success(`${t("state.deleted")}`, {
+    $toast.success(t("state.deleted").toString(), {
+      icon: "delete",
       action: [
         {
-          text: `${t("action.undo")}`,
+          text: t("action.undo").toString(),
           onClick: (_, toastObject) => {
             setRESTHeaders(headersBeforeDeletion as HoppRESTHeader[])
             editBulkHeadersLine(index, deletedItem)

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

@@ -1,18 +1,18 @@
 <template>
-  <SmartModal v-if="show" :title="`${t('import.curl')}`" @close="hideModal">
+  <SmartModal v-if="show" :title="`${$t('import.curl')}`" @close="hideModal">
     <template #body>
       <div class="flex flex-col px-2">
-        <div ref="curlEditor" class="border rounded border-dividerLight"></div>
+        <div ref="curlEditor" class="border border-dividerLight rounded"></div>
       </div>
     </template>
     <template #footer>
       <span class="flex">
         <ButtonPrimary
-          :label="`${t('import.title')}`"
+          :label="`${$t('import.title')}`"
           @click.native="handleImport"
         />
         <ButtonSecondary
-          :label="`${t('action.cancel')}`"
+          :label="`${$t('action.cancel')}`"
           @click.native="hideModal"
         />
       </span>
@@ -21,7 +21,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from "@nuxtjs/composition-api"
+import { ref, useContext } from "@nuxtjs/composition-api"
 import parseCurlCommand from "~/helpers/curlparser"
 import { useCodemirror } from "~/helpers/editor/codemirror"
 import {
@@ -30,11 +30,12 @@ import {
   makeRESTRequest,
 } from "~/helpers/types/HoppRESTRequest"
 import { setRESTRequest } from "~/newstore/RESTSession"
-import { useI18n, useToast } from "~/helpers/utils/composables"
 
-const t = useI18n()
+const {
-
+  $toast,
-const toast = useToast()
+  app: { i18n },
+} = useContext()
+const t = i18n.t.bind(i18n)
 
 const curl = ref("")
 
@@ -122,7 +123,9 @@ const handleImport = () => {
     )
   } catch (e) {
     console.error(e)
-    toast.error(`${t("error.curl_invalid_format")}`)
+    $toast.error(`${t("error.curl_invalid_format")}`, {
+      icon: "error_outline",
+    })
   }
   hideModal()
 }

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

@@ -1,46 +1,46 @@
 <template>
   <div class="flex flex-col">
-    <div class="flex border-b border-dividerLight">
+    <div class="border-b border-dividerLight flex">
       <input
         id="oidcDiscoveryURL"
         v-model="oidcDiscoveryURL"
-        class="flex flex-1 px-4 py-2 bg-transparent"
+        class="bg-transparent flex flex-1 py-2 px-4"
         placeholder="OpenID Connect Discovery URL"
         name="oidcDiscoveryURL"
       />
     </div>
-    <div class="flex border-b border-dividerLight">
+    <div class="border-b border-dividerLight flex">
       <input
         id="authURL"
         v-model="authURL"
-        class="flex flex-1 px-4 py-2 bg-transparent"
+        class="bg-transparent flex flex-1 py-2 px-4"
         placeholder="Authentication URL"
         name="authURL"
       />
     </div>
-    <div class="flex border-b border-dividerLight">
+    <div class="border-b border-dividerLight flex">
       <input
         id="accessTokenURL"
         v-model="accessTokenURL"
-        class="flex flex-1 px-4 py-2 bg-transparent"
+        class="bg-transparent flex flex-1 py-2 px-4"
         placeholder="Access Token URL"
         name="accessTokenURL"
       />
     </div>
-    <div class="flex border-b border-dividerLight">
+    <div class="border-b border-dividerLight flex">
       <input
         id="clientID"
         v-model="clientID"
-        class="flex flex-1 px-4 py-2 bg-transparent"
+        class="bg-transparent flex flex-1 py-2 px-4"
         placeholder="Client ID"
         name="clientID"
       />
     </div>
-    <div class="flex border-b border-dividerLight">
+    <div class="border-b border-dividerLight flex">
       <input
         id="scope"
         v-model="scope"
-        class="flex flex-1 px-4 py-2 bg-transparent"
+        class="bg-transparent flex flex-1 py-2 px-4"
         placeholder="Scope"
         name="scope"
       />
@@ -48,7 +48,7 @@
     <div class="p-2">
       <ButtonSecondary
         filled
-        :label="`${t('authorization.generate_token')}`"
+        :label="`${$t('authorization.generate_token')}`"
         @click.native="handleAccessTokenRequest()"
       />
     </div>
@@ -56,21 +56,19 @@
 </template>
 
 <script lang="ts">
-import { Ref } from "@nuxtjs/composition-api"
+import { Ref, useContext } from "@nuxtjs/composition-api"
-import {
+import { pluckRef, useStream } from "~/helpers/utils/composables"
-  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"
 
 export default {
   setup() {
-    const t = useI18n()
+    const {
-    const toast = useToast()
+      $toast,
+      app: { i18n },
+    } = useContext()
+    const $t = i18n.t.bind(i18n)
 
     const auth = useStream(
       restAuth$,
@@ -99,7 +97,9 @@ export default {
         oidcDiscoveryURL.value === "" &&
         (authURL.value === "" || accessTokenURL.value === "")
       ) {
-        toast.error(`${t("complete_config_urls")}`)
+        $toast.error(`${$t("complete_config_urls")}`, {
+          icon: "error",
+        })
         return
       }
       try {
@@ -113,7 +113,9 @@ export default {
         }
         await tokenRequest(tokenReqParams)
       } catch (e) {
-        toast.error(`${e}`)
+        $toast.error(`${e}`, {
+          icon: "code",
+        })
       }
     }
 

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

@@ -1,35 +1,45 @@
 <template>
   <AppSection label="parameters">
     <div
-      class="bg-primary border-dividerLight top-upperSecondaryStickyFold sticky z-10 flex items-center justify-between flex-1 pl-4 border-b"
+      class="
+        bg-primary
+        border-b border-dividerLight
+        flex flex-1
+        top-upperSecondaryStickyFold
+        pl-4
+        z-10
+        sticky
+        items-center
+        justify-between
+      "
     >
-      <label class="text-secondaryLight font-semibold">
+      <label class="font-semibold text-secondaryLight">
-        {{ t("request.parameter_list") }}
+        {{ $t("request.parameter_list") }}
       </label>
       <div class="flex">
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           to="https://docs.hoppscotch.io/features/parameters"
           blank
-          :title="t('app.wiki')"
+          :title="$t('app.wiki')"
           svg="help-circle"
         />
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
-          :title="t('action.clear_all')"
+          :title="$t('action.clear_all')"
           svg="trash-2"
-          @click.native="clearContent()"
+          @click.native="bulkMode ? clearBulkEditor() : clearContent()"
         />
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
-          :title="t('state.bulk_mode')"
+          :title="$t('state.bulk_mode')"
           svg="edit"
           :class="{ '!text-accent': bulkMode }"
           @click.native="bulkMode = !bulkMode"
         />
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
-          :title="t('add.new')"
+          :title="$t('add.new')"
           svg="plus"
           :disabled="bulkMode"
           @click.native="addParam"
@@ -41,11 +51,11 @@
       <div
         v-for="(param, index) in params$"
         :key="`param-${index}`"
-        class="divide-dividerLight border-dividerLight flex border-b divide-x"
+        class="divide-x divide-dividerLight border-b border-dividerLight flex"
       >
         <SmartEnvInput
           v-model="param.key"
-          :placeholder="`${t('count.parameter', { count: index + 1 })}`"
+          :placeholder="`${$t('count.parameter', { count: index + 1 })}`"
           styles="
             bg-transparent
             flex
@@ -63,7 +73,7 @@
         />
         <SmartEnvInput
           v-model="param.value"
-          :placeholder="`${t('count.value', { count: index + 1 })}`"
+          :placeholder="`${$t('count.value', { count: index + 1 })}`"
           styles="
             bg-transparent
             flex
@@ -85,9 +95,9 @@
             :title="
               param.hasOwnProperty('active')
                 ? param.active
-                  ? t('action.turn_off')
+                  ? $t('action.turn_off')
-                  : t('action.turn_on')
+                  : $t('action.turn_on')
-                : t('action.turn_off')
+                : $t('action.turn_off')
             "
             :svg="
               param.hasOwnProperty('active')
@@ -109,7 +119,7 @@
         <span>
           <ButtonSecondary
             v-tippy="{ theme: 'tooltip' }"
-            :title="t('action.remove')"
+            :title="$t('action.remove')"
             svg="trash"
             color="red"
             @click.native="deleteParam(index)"
@@ -118,19 +128,32 @@
       </div>
       <div
         v-if="params$.length === 0"
-        class="text-secondaryLight flex flex-col items-center justify-center p-4"
+        class="
+          flex flex-col
+          text-secondaryLight
+          p-4
+          items-center
+          justify-center
+        "
       >
         <img
           :src="`/images/states/${$colorMode.value}/add_files.svg`"
           loading="lazy"
-          class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
+          class="
-          :alt="`${t('empty.parameters')}`"
+            flex-col
+            my-4
+            object-contain object-center
+            h-16
+            w-16
+            inline-flex
+          "
+          :alt="$t('empty.parameters')"
         />
-        <span class="pb-4 text-center">
+        <span class="text-center pb-4">
-          {{ t("empty.parameters") }}
+          {{ $t("empty.parameters") }}
         </span>
         <ButtonSecondary
-          :label="`${t('add.new')}`"
+          :label="`${$t('add.new')}`"
           svg="plus"
           filled
           class="mb-4"
@@ -142,14 +165,10 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watch, onBeforeUpdate } from "@nuxtjs/composition-api"
+import { ref, useContext, watch, onBeforeUpdate } from "@nuxtjs/composition-api"
 import { useCodemirror } from "~/helpers/editor/codemirror"
 import { HoppRESTParam } from "~/helpers/types/HoppRESTRequest"
-import {
+import { useReadonlyStream } from "~/helpers/utils/composables"
-  useReadonlyStream,
-  useI18n,
-  useToast,
-} from "~/helpers/utils/composables"
 import {
   restParams$,
   addRESTParam,
@@ -159,9 +178,11 @@ import {
   setRESTParams,
 } from "~/newstore/RESTSession"
 
-const t = useI18n()
+const {
-
+  $toast,
-const toast = useToast()
+  app: { i18n },
+} = useContext()
+const t = i18n.t.bind(i18n)
 
 const bulkMode = ref(false)
 const bulkParams = ref("")
@@ -173,9 +194,11 @@ watch(bulkParams, () => {
       value: item.substring(item.indexOf(":") + 1).trim(),
       active: !item.trim().startsWith("//"),
     }))
-    setRESTParams(transformation as HoppRESTParam[])
+    setRESTParams(transformation)
   } catch (e) {
-    toast.error(`${t("error.something_went_wrong")}`)
+    $toast.error(`${t("error.something_went_wrong")}`, {
+      icon: "error_outline",
+    })
     console.error(e)
   }
 })
@@ -196,13 +219,12 @@ const params$ = useReadonlyStream(restParams$, [])
 watch(
   params$,
   (newValue) => {
-    if (!bulkMode.value)
+    if (
-      if (
+      (newValue[newValue.length - 1]?.key !== "" ||
-        (newValue[newValue.length - 1]?.key !== "" ||
+        newValue[newValue.length - 1]?.value !== "") &&
-          newValue[newValue.length - 1]?.value !== "") &&
+      newValue.length
-        newValue.length
+    )
-      )
+      addParam()
-        addParam()
   },
   { deep: true }
 )
@@ -248,10 +270,11 @@ const deleteParam = (index: number) => {
 
   const deletedItem = parametersBeforeDeletion[index]
   if (deletedItem.key || deletedItem.value) {
-    toast.success(`${t("state.deleted")}`, {
+    $toast.success(t("state.deleted").toString(), {
+      icon: "delete",
       action: [
         {
-          text: `${t("action.undo")}`,
+          text: t("action.undo").toString(),
           onClick: (_, toastObject) => {
             setRESTParams(parametersBeforeDeletion as HoppRESTParam[])
             editBulkParamsLine(index, deletedItem)

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

@@ -1,51 +1,71 @@
 <template>
-  <AppSection id="script" :label="`${t('preRequest.script')}`">
+  <AppSection id="script" :label="`${$t('preRequest.script')}`">
     <div
-      class="bg-primary border-dividerLight top-upperSecondaryStickyFold sticky z-10 flex items-center justify-between flex-1 pl-4 border-b"
+      class="
+        bg-primary
+        border-b border-dividerLight
+        flex flex-1
+        top-upperSecondaryStickyFold
+        pl-4
+        z-10
+        sticky
+        items-center
+        justify-between
+      "
     >
-      <label class="text-secondaryLight font-semibold">
+      <label class="font-semibold text-secondaryLight">
-        {{ t("preRequest.javascript_code") }}
+        {{ $t("preRequest.javascript_code") }}
       </label>
       <div class="flex">
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           to="https://docs.hoppscotch.io/features/pre-request-script"
           blank
-          :title="t('app.wiki')"
+          :title="$t('app.wiki')"
           svg="help-circle"
         />
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
-          :title="t('state.linewrap')"
+          :title="$t('state.linewrap')"
           :class="{ '!text-accent': linewrapEnabled }"
           svg="corner-down-left"
           @click.native.prevent="linewrapEnabled = !linewrapEnabled"
         />
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
-          :title="t('action.clear')"
+          :title="$t('action.clear')"
           svg="trash-2"
           @click.native="clearContent"
         />
       </div>
     </div>
-    <div class="border-dividerLight flex border-b">
+    <div class="border-b border-dividerLight flex">
-      <div class="border-dividerLight w-2/3 border-r">
+      <div class="border-r border-dividerLight w-2/3">
         <div ref="preRrequestEditor"></div>
       </div>
       <div
-        class="bg-primary top-upperTertiaryStickyFold min-w-46 max-w-1/3 z-9 sticky h-full p-4 overflow-auto"
+        class="
+          bg-primary
+          h-full
+          top-upperTertiaryStickyFold
+          min-w-46
+          max-w-1/3
+          p-4
+          z-9
+          sticky
+          overflow-auto
+        "
       >
         <div class="text-secondaryLight pb-2">
-          {{ t("helpers.pre_request_script") }}
+          {{ $t("helpers.pre_request_script") }}
         </div>
         <SmartAnchor
-          :label="`${t('preRequest.learn')}`"
+          :label="`${$t('preRequest.learn')}`"
           to="https://docs.hoppscotch.io/features/pre-request-script"
           blank
         />
-        <h4 class="text-secondaryLight pt-6 font-bold">
+        <h4 class="font-bold text-secondaryLight pt-6">
-          {{ t("preRequest.snippets") }}
+          {{ $t("preRequest.snippets") }}
         </h4>
         <div class="flex flex-col pt-4">
           <TabSecondary
@@ -62,15 +82,17 @@
 </template>
 
 <script setup lang="ts">
-import { reactive, ref } from "@nuxtjs/composition-api"
+import { reactive, ref, useContext } from "@nuxtjs/composition-api"
 import { usePreRequestScript } from "~/newstore/RESTSession"
 import snippets from "~/helpers/preRequestScriptSnippets"
 import { useCodemirror } from "~/helpers/editor/codemirror"
 import linter from "~/helpers/editor/linting/preRequest"
 import completer from "~/helpers/editor/completion/preRequest"
-import { useI18n } from "~/helpers/utils/composables"
 
-const t = useI18n()
+const {
+  app: { i18n },
+} = useContext()
+const t = i18n.t.bind(i18n)
 
 const preRequestScript = usePreRequestScript()
 

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

@@ -1,29 +1,39 @@
 <template>
   <div>
     <div
-      class="bg-primary border-dividerLight top-upperTertiaryStickyFold sticky z-10 flex items-center justify-between flex-1 pl-4 border-b"
+      class="
+        bg-primary
+        border-b border-dividerLight
+        flex flex-1
+        top-upperTertiaryStickyFold
+        pl-4
+        z-10
+        sticky
+        items-center
+        justify-between
+      "
     >
-      <label class="text-secondaryLight font-semibold">
+      <label class="font-semibold text-secondaryLight">
-        {{ t("request.raw_body") }}
+        {{ $t("request.raw_body") }}
       </label>
       <div class="flex">
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           to="https://docs.hoppscotch.io/features/body"
           blank
-          :title="t('app.wiki')"
+          :title="$t('app.wiki')"
           svg="help-circle"
         />
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
-          :title="t('state.linewrap')"
+          :title="$t('state.linewrap')"
           :class="{ '!text-accent': linewrapEnabled }"
           svg="corner-down-left"
           @click.native.prevent="linewrapEnabled = !linewrapEnabled"
         />
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
-          :title="t('action.clear')"
+          :title="$t('action.clear')"
           svg="trash-2"
           @click.native="clearContent"
         />
@@ -31,14 +41,14 @@
           v-if="contentType && contentType.endsWith('json')"
           ref="prettifyRequest"
           v-tippy="{ theme: 'tooltip' }"
-          :title="t('action.prettify')"
+          :title="$t('action.prettify')"
           :svg="prettifyIcon"
           @click.native="prettifyRequestBody"
         />
         <label for="payload">
           <ButtonSecondary
             v-tippy="{ theme: 'tooltip' }"
-            :title="t('import.json')"
+            :title="$t('import.json')"
             svg="file-plus"
             @click.native="$refs.payload.click()"
           />
@@ -57,19 +67,21 @@
 </template>
 
 <script setup lang="ts">
-import { computed, reactive, ref } from "@nuxtjs/composition-api"
+import { computed, reactive, ref, useContext } from "@nuxtjs/composition-api"
 import { useCodemirror } from "~/helpers/editor/codemirror"
 import { getEditorLangForMimeType } from "~/helpers/editorutils"
-import { pluckRef, useI18n, useToast } from "~/helpers/utils/composables"
+import { pluckRef } from "~/helpers/utils/composables"
 import { useRESTRequestBody } from "~/newstore/RESTSession"
 
-const t = useI18n()
-
 const props = defineProps<{
   contentType: string
 }>()
 
-const toast = useToast()
+const {
+  $toast,
+  app: { i18n },
+} = useContext()
+const t = i18n.t.bind(i18n)
 
 const rawParamsBody = pluckRef(useRESTRequestBody(), "body")
 const prettifyIcon = ref("wand")
@@ -106,9 +118,13 @@ const uploadPayload = (e: InputEvent) => {
       rawParamsBody.value = target?.result
     }
     reader.readAsText(file)
-    toast.success(`${t("state.file_imported")}`)
+    $toast.success(`${t("state.file_imported")}`, {
+      icon: "attach_file",
+    })
   } else {
-    toast.error(`${t("action.choose_file")}`)
+    $toast.error(`${t("action.choose_file")}`, {
+      icon: "attach_file",
+    })
   }
 }
 const prettifyRequestBody = () => {
@@ -119,7 +135,9 @@ const prettifyRequestBody = () => {
     setTimeout(() => (prettifyIcon.value = "wand"), 1000)
   } catch (e) {
     console.error(e)
-    toast.error(`${t("error.json_prettify_invalid_body")}`)
+    $toast.error(`${t("error.json_prettify_invalid_body")}`, {
+      icon: "error_outline",
+    })
   }
 }
 </script>

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

@@ -1,9 +1,19 @@
 <template>
   <div
-    class="bg-primary hide-scrollbar sticky top-0 z-10 flex p-4 space-x-2 overflow-x-auto"
+    class="
+      bg-primary
+      flex
+      space-x-2
+      p-4
+      top-0
+      z-10
+      sticky
+      overflow-x-auto
+      hide-scrollbar
+    "
   >
     <div class="flex flex-1">
-      <div class="relative flex">
+      <div class="flex relative">
         <label for="method">
           <tippy
             ref="methodOptions"
@@ -16,10 +26,24 @@
               <span class="select-wrapper">
                 <input
                   id="method"
-                  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"
+                  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
+                  "
                   :value="newMethod"
                   :readonly="!isCustomMethod"
-                  :placeholder="`${t('request.method')}`"
+                  :placeholder="`${$t('request.method')}`"
                   @input="onSelectMethod($event.target.value)"
                 />
               </span>
@@ -36,7 +60,7 @@
       <div class="flex flex-1">
         <SmartEnvInput
           v-model="newEndpoint"
-          :placeholder="`${t('request.url')}`"
+          :placeholder="`${$t('request.url')}`"
           styles="
             bg-primaryLight
             border border-divider
@@ -58,8 +82,8 @@
     <div class="flex">
       <ButtonPrimary
         id="send"
-        class="min-w-20 flex-1 rounded-r-none"
+        class="rounded-r-none flex-1 min-w-20"
-        :label="`${!loading ? t('action.send') : t('action.cancel')}`"
+        :label="`${!loading ? $t('action.send') : $t('action.cancel')}`"
         @click.native="!loading ? newSendRequest() : cancelRequest()"
       />
       <span class="flex">
@@ -74,7 +98,7 @@
             <ButtonPrimary class="rounded-l-none" filled svg="chevron-down" />
           </template>
           <SmartItem
-            :label="`${t('import.curl')}`"
+            :label="`${$t('import.curl')}`"
             svg="file-code"
             @click.native="
               () => {
@@ -84,7 +108,7 @@
             "
           />
           <SmartItem
-            :label="`${t('show.code')}`"
+            :label="`${$t('show.code')}`"
             svg="code-2"
             @click.native="
               () => {
@@ -95,7 +119,7 @@
           />
           <SmartItem
             ref="clearAll"
-            :label="`${t('action.clear_all')}`"
+            :label="`${$t('action.clear_all')}`"
             svg="rotate-ccw"
             @click.native="
               () => {
@@ -107,10 +131,10 @@
         </tippy>
       </span>
       <ButtonSecondary
-        class="ml-2 rounded rounded-r-none"
+        class="rounded rounded-r-none ml-2"
         :label="
           windowInnerWidth.x.value >= 768 && COLUMN_LAYOUT
-            ? `${t('request.save')}`
+            ? `${$t('request.save')}`
             : ''
         "
         filled
@@ -135,27 +159,27 @@
           <input
             id="request-name"
             v-model="requestName"
-            :placeholder="`${t('request.name')}`"
+            :placeholder="`${$t('request.name')}`"
             name="request-name"
             type="text"
             autocomplete="off"
-            class="input mb-2"
+            class="mb-2 input"
             @keyup.enter="saveOptions.tippy().hide()"
           />
           <SmartItem
             ref="copyRequest"
-            :label="shareButtonText"
+            :label="`${$t('request.copy_link')}`"
-            :svg="copyLinkIcon"
+            :svg="hasNavigatorShare ? 'share-2' : 'copy'"
-            :loading="fetchingShareLink"
             @click.native="
               () => {
                 copyRequest()
+                saveOptions.tippy().hide()
               }
             "
           />
           <SmartItem
             ref="saveRequest"
-            :label="`${t('request.save_as')}`"
+            :label="`${$t('request.save_as')}`"
             svg="folder-plus"
             @click.native="
               () => {
@@ -184,9 +208,8 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, watch } from "@nuxtjs/composition-api"
+import { computed, ref, useContext, watch } from "@nuxtjs/composition-api"
 import { isRight } from "fp-ts/lib/Either"
-import * as E from "fp-ts/Either"
 import {
   updateRESTResponse,
   restEndpoint$,
@@ -197,7 +220,6 @@ import {
   useRESTRequestName,
   getRESTSaveContext,
   getRESTRequest,
-  restRequest$,
 } from "~/newstore/RESTSession"
 import { editRESTRequest } from "~/newstore/collections"
 import { runRESTRequest$ } from "~/helpers/RequestRunner"
@@ -205,9 +227,6 @@ import {
   useStreamSubscriber,
   useStream,
   useNuxt,
-  useI18n,
-  useToast,
-  useReadonlyStream,
 } from "~/helpers/utils/composables"
 import { defineActionHandler } from "~/helpers/actions"
 import { copyToClipboard } from "~/helpers/utils/clipboard"
@@ -215,9 +234,6 @@ import { useSetting } from "~/newstore/settings"
 import { overwriteRequestTeams } from "~/helpers/teams/utils"
 import { apolloClient } from "~/helpers/apollo"
 import useWindowSize from "~/helpers/utils/useWindowSize"
-import { createShortcode } from "~/helpers/backend/mutations/Shortcode"
-
-const t = useI18n()
 
 const methods = [
   "GET",
@@ -232,9 +248,12 @@ const methods = [
   "CUSTOM",
 ]
 
-const toast = useToast()
+const {
+  $toast,
+  app: { i18n },
+} = useContext()
 const nuxt = useNuxt()
-
+const t = i18n.t.bind(i18n)
 const { subscribeToStream } = useStreamSubscriber()
 
 const newEndpoint = useStream(restEndpoint$, "", setRESTEndpoint)
@@ -263,11 +282,6 @@ watch(loading, () => {
 })
 
 const newSendRequest = async () => {
-  if (newEndpoint.value === "" || /^\s+$/.test(newEndpoint.value)) {
-    toast.error(`${t("empty.endpoint")}`)
-    return
-  }
-
   loading.value = true
 
   // Double calling is because the function returns a TaskEither than should be executed
@@ -313,46 +327,7 @@ const clearContent = () => {
   resetRESTRequest()
 }
 
-const copyLinkIcon = hasNavigatorShare ? ref("share-2") : ref("copy")
+const copyRequest = () => {
-const shareLink = ref<string | null>("")
-const fetchingShareLink = ref(false)
-
-const shareButtonText = computed(() => {
-  if (shareLink.value) {
-    return shareLink.value
-  } else if (fetchingShareLink.value) {
-    return t("state.loading")
-  } else {
-    return t("request.copy_link")
-  }
-})
-
-const request = useReadonlyStream(restRequest$, getRESTRequest())
-
-watch(request, () => {
-  shareLink.value = null
-})
-
-const copyRequest = async () => {
-  if (shareLink.value) {
-    copyShareLink(shareLink.value)
-  } else {
-    shareLink.value = ""
-    fetchingShareLink.value = true
-    const request = getRESTRequest()
-    const shortcodeResult = await createShortcode(request)()
-    if (E.isLeft(shortcodeResult)) {
-      toast.error(`${shortcodeResult.left.error}`)
-      shareLink.value = `${t("error.something_went_wrong")}`
-    } else if (E.isRight(shortcodeResult)) {
-      shareLink.value = `/${shortcodeResult.right.createShortcode.id}`
-      copyShareLink(shareLink.value)
-    }
-    fetchingShareLink.value = false
-  }
-}
-
-const copyShareLink = (shareLink: string) => {
   if (navigator.share) {
     const time = new Date().toLocaleTimeString()
     const date = new Date().toLocaleDateString()
@@ -360,15 +335,15 @@ const copyShareLink = (shareLink: string) => {
       .share({
         title: "Hoppscotch",
         text: `Hoppscotch • Open source API development ecosystem at ${time} on ${date}`,
-        url: `https://hopp.sh/r${shareLink}`,
+        url: window.location.href,
       })
       .then(() => {})
       .catch(() => {})
   } else {
-    copyLinkIcon.value = "check"
+    copyToClipboard(window.location.href)
-    copyToClipboard(`https://hopp.sh/r${shareLink}`)
+    $toast.success(`${t("state.copied_to_clipboard")}`, {
-    toast.success(`${t("state.copied_to_clipboard")}`)
+      icon: "content_paste",
-    setTimeout(() => (copyLinkIcon.value = "copy"), 2000)
+    })
   }
 }
 
@@ -407,7 +382,9 @@ const saveRequest = () => {
 
   if (saveCtx.originLocation === "user-collection") {
     editRESTRequest(saveCtx.folderPath, saveCtx.requestIndex, getRESTRequest())
-    toast.success(`${t("request.saved")}`)
+    $toast.success(`${t("request.saved")}`, {
+      icon: "playlist_add_check",
+    })
   } else if (saveCtx.originLocation === "team-collection") {
     const req = getRESTRequest()
 
@@ -420,14 +397,20 @@ const saveRequest = () => {
         saveCtx.requestID
       )
         .then(() => {
-          toast.success(`${t("request.saved")}`)
+          $toast.success(`${t("request.saved")}`, {
+            icon: "playlist_add_check",
+          })
         })
         .catch(() => {
-          toast.error(`${t("profile.no_permission")}`)
+          $toast.error(t("profile.no_permission").toString(), {
+            icon: "error_outline",
+          })
         })
     } catch (error) {
       showSaveRequestModal.value = true
-      toast.error(`${t("error.something_went_wrong")}`)
+      $toast.error(t("error.something_went_wrong").toString(), {
+        icon: "error_outline",
+      })
       console.error(error)
     }
   }

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

@@ -1,24 +1,27 @@
 <template>
-  <div
+  <div class="bg-primary flex p-4 top-0 z-10 sticky items-center">
-    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="text-secondaryLight flex flex-col items-center justify-center flex-1"
+      class="
+        flex flex-col flex-1
+        text-secondaryLight
+        items-center
+        justify-center
+      "
     >
-      <div class="flex pb-4 my-4 space-x-2">
+      <div class="flex space-x-2 pb-4 my-4">
-        <div class="flex flex-col items-end space-y-4 text-right">
+        <div class="flex flex-col space-y-4 text-right items-end">
-          <span class="flex items-center flex-1">
+          <span class="flex flex-1 items-center">
-            {{ t("shortcut.request.send_request") }}
+            {{ $t("shortcut.request.send_request") }}
           </span>
-          <span class="flex items-center flex-1">
+          <span class="flex flex-1 items-center">
-            {{ t("shortcut.general.show_all") }}
+            {{ $t("shortcut.general.show_all") }}
           </span>
-          <span class="flex items-center flex-1">
+          <span class="flex flex-1 items-center">
-            {{ t("shortcut.general.command_menu") }}
+            {{ $t("shortcut.general.command_menu") }}
           </span>
-          <span class="flex items-center flex-1">
+          <span class="flex flex-1 items-center">
-            {{ t("shortcut.general.help_menu") }}
+            {{ $t("shortcut.general.help_menu") }}
           </span>
         </div>
         <div class="flex flex-col space-y-4">
@@ -39,8 +42,8 @@
         </div>
       </div>
       <ButtonSecondary
-        :label="t('app.documentation')"
+        :label="$t('app.documentation')"
-        to="https://docs.hoppscotch.io/features/response"
+        to="https://docs.hoppscotch.io"
         svg="external-link"
         blank
         outline
@@ -53,41 +56,48 @@
         class="flex flex-col items-center justify-center"
       >
         <SmartSpinner class="my-4" />
-        <span class="text-secondaryLight">{{ t("state.loading") }}</span>
+        <span class="text-secondaryLight">{{ $t("state.loading") }}</span>
       </div>
       <div
         v-if="response.type === 'network_fail'"
-        class="flex flex-col items-center justify-center flex-1 p-4"
+        class="flex flex-col flex-1 p-4 items-center justify-center"
       >
         <img
           :src="`/images/states/${$colorMode.value}/youre_lost.svg`"
           loading="lazy"
-          class="inline-flex flex-col object-contain object-center w-32 h-32 my-4"
+          class="
-          :alt="`${t('error.network_fail')}`"
+            flex-col
+            my-4
+            object-contain object-center
+            h-32
+            w-32
+            inline-flex
+          "
+          :alt="$t('empty.network_fail')"
         />
-        <span class="mb-2 font-semibold text-center">
+        <span class="text-center font-semibold mb-2">
-          {{ t("error.network_fail") }}
+          {{ $t("error.network_fail") }}
         </span>
-        <span class="text-secondaryLight max-w-sm mb-4 text-center">
+        <span class="text-center text-secondaryLight mb-4 max-w-sm">
-          {{ t("helpers.network_fail") }}
+          {{ $t("helpers.network_fail") }}
         </span>
         <AppInterceptor />
       </div>
       <div
         v-if="response.type === 'success' || 'fail'"
         :class="statusCategory.className"
-        class="space-x-4 font-semibold"
+        class="font-semibold space-x-4"
       >
         <span v-if="response.statusCode">
-          <span class="text-secondary"> {{ t("response.status") }}: </span>
+          <span class="text-secondary"> {{ $t("response.status") }}: </span>
-          {{ response.statusCode || t("state.waiting_send_request") }}
+          {{ response.statusCode || $t("state.waiting_send_request") }}
         </span>
         <span v-if="response.meta && response.meta.responseDuration">
-          <span class="text-secondary"> {{ t("response.time") }}: </span>
+          <span class="text-secondary"> {{ $t("response.time") }}: </span>
           {{ `${response.meta.responseDuration} ms` }}
         </span>
         <span v-if="response.meta && response.meta.responseSize">
-          <span class="text-secondary"> {{ t("response.size") }}: </span>
+          <span class="text-secondary"> {{ $t("response.size") }}: </span>
           {{ `${response.meta.responseSize} B` }}
         </span>
       </div>
@@ -100,9 +110,6 @@ import { computed } from "@nuxtjs/composition-api"
 import findStatusGroup from "~/helpers/findStatusGroup"
 import { HoppRESTResponse } from "~/helpers/types/HoppRESTResponse"
 import { getPlatformSpecialKey as getSpecialKey } from "~/helpers/platformutils"
-import { useI18n } from "~/helpers/utils/composables"
-
-const t = useI18n()
 
 const props = defineProps<{
   response: HoppRESTResponse

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

@@ -1,5 +1,5 @@
 <template>
-  <AppSection :label="`${t('test.results')}`">
+  <AppSection :label="`${$t('test.results')}`">
     <div
       v-if="
         testResults &&
@@ -7,14 +7,24 @@
       "
     >
       <div
-        class="bg-primary border-dividerLight top-lowerSecondaryStickyFold sticky z-10 flex items-center justify-between flex-1 pl-4 border-b"
+        class="
+          bg-primary
+          border-dividerLight border-b
+          flex flex-1
+          top-lowerSecondaryStickyFold
+          pl-4
+          z-10
+          sticky
+          items-center
+          justify-between
+        "
       >
-        <label class="text-secondaryLight font-semibold">
+        <label class="font-semibold text-secondaryLight">
-          {{ t("test.report") }}
+          {{ $t("test.report") }}
         </label>
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
-          :title="t('action.clear')"
+          :title="$t('action.clear')"
           svg="trash-2"
           @click.native="clearContent()"
         />
@@ -38,10 +48,10 @@
           <div
             v-for="(result, index) in testResults.expectResults"
             :key="`result-${index}`"
-            class="flex items-center px-4 py-2"
+            class="flex py-2 px-4 items-center"
           >
             <i
-              class="material-icons mr-4"
+              class="mr-4 material-icons"
               :class="
                 result.status === 'pass' ? 'text-green-500' : 'text-red-500'
               "
@@ -54,7 +64,9 @@
             <span class="text-secondaryLight">
               {{
                 ` \xA0 — \xA0 ${
-                  result.status === "pass" ? t("test.passed") : t("test.failed")
+                  result.status === "pass"
+                    ? $t("test.passed")
+                    : $t("test.failed")
                 }`
               }}
             </span>
@@ -64,24 +76,24 @@
     </div>
     <div
       v-else
-      class="text-secondaryLight flex flex-col items-center justify-center p-4"
+      class="flex flex-col text-secondaryLight p-4 items-center justify-center"
     >
       <img
         :src="`/images/states/${$colorMode.value}/validation.svg`"
         loading="lazy"
-        class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
+        class="flex-col my-4 object-contain object-center h-16 w-16 inline-flex"
-        :alt="`${t('empty.tests')}`"
+        :alt="$t('empty.tests')"
       />
-      <span class="pb-2 text-center">
+      <span class="text-center pb-2">
-        {{ t("empty.tests") }}
+        {{ $t("empty.tests") }}
       </span>
-      <span class="pb-4 text-center">
+      <span class="text-center pb-4">
-        {{ t("helpers.tests") }}
+        {{ $t("helpers.tests") }}
       </span>
       <ButtonSecondary
         outline
-        :label="`${t('action.learn_more')}`"
+        :label="`${$t('action.learn_more')}`"
-        to="https://docs.hoppscotch.io/features/tests"
+        to="https://docs.hoppscotch.io"
         blank
         svg="external-link"
         reverse
@@ -92,11 +104,9 @@
 </template>
 
 <script setup lang="ts">
-import { useReadonlyStream, useI18n } from "~/helpers/utils/composables"
+import { useReadonlyStream } from "~/helpers/utils/composables"
 import { restTestResults$, setRESTTestResults } from "~/newstore/RESTSession"
 
-const t = useI18n()
-
 const testResults = useReadonlyStream(restTestResults$, null)
 
 const clearContent = () => setRESTTestResults(null)

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

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

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

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

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

@@ -1,51 +1,71 @@
 <template>
-  <AppSection id="script" :label="`${t('test.script')}`">
+  <AppSection id="script" :label="`${$t('test.script')}`">
     <div
-      class="bg-primary border-dividerLight top-upperSecondaryStickyFold sticky z-10 flex items-center justify-between flex-1 pl-4 border-b"
+      class="
+        bg-primary
+        border-b border-dividerLight
+        flex flex-1
+        top-upperSecondaryStickyFold
+        pl-4
+        z-10
+        sticky
+        items-center
+        justify-between
+      "
     >
-      <label class="text-secondaryLight font-semibold">
+      <label class="font-semibold text-secondaryLight">
-        {{ t("test.javascript_code") }}
+        {{ $t("test.javascript_code") }}
       </label>
       <div class="flex">
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           to="https://docs.hoppscotch.io/features/tests"
           blank
-          :title="t('app.wiki')"
+          :title="$t('app.wiki')"
           svg="help-circle"
         />
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
-          :title="t('state.linewrap')"
+          :title="$t('state.linewrap')"
           :class="{ '!text-accent': linewrapEnabled }"
           svg="corner-down-left"
           @click.native.prevent="linewrapEnabled = !linewrapEnabled"
         />
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
-          :title="t('action.clear')"
+          :title="$t('action.clear')"
           svg="trash-2"
           @click.native="clearContent"
         />
       </div>
     </div>
-    <div class="border-dividerLight flex border-b">
+    <div class="border-b border-dividerLight flex">
-      <div class="border-dividerLight w-2/3 border-r">
+      <div class="border-r border-dividerLight w-2/3">
         <div ref="testScriptEditor"></div>
       </div>
       <div
-        class="bg-primary top-upperTertiaryStickyFold min-w-46 max-w-1/3 z-9 sticky h-full p-4 overflow-auto"
+        class="
+          bg-primary
+          h-full
+          top-upperTertiaryStickyFold
+          min-w-46
+          max-w-1/3
+          p-4
+          z-9
+          sticky
+          overflow-auto
+        "
       >
         <div class="text-secondaryLight pb-2">
-          {{ t("helpers.post_request_tests") }}
+          {{ $t("helpers.post_request_tests") }}
         </div>
         <SmartAnchor
-          :label="`${t('test.learn')}`"
+          :label="`${$t('test.learn')}`"
           to="https://docs.hoppscotch.io/features/tests"
           blank
         />
-        <h4 class="text-secondaryLight pt-6 font-bold">
+        <h4 class="font-bold text-secondaryLight pt-6">
-          {{ t("test.snippets") }}
+          {{ $t("test.snippets") }}
         </h4>
         <div class="flex flex-col pt-4">
           <TabSecondary
@@ -62,15 +82,17 @@
 </template>
 
 <script setup lang="ts">
-import { reactive, ref } from "@nuxtjs/composition-api"
+import { reactive, ref, useContext } from "@nuxtjs/composition-api"
 import { useTestScript } from "~/newstore/RESTSession"
 import testSnippets from "~/helpers/testSnippets"
 import { useCodemirror } from "~/helpers/editor/codemirror"
 import linter from "~/helpers/editor/linting/testScript"
 import completer from "~/helpers/editor/completion/testScript"
-import { useI18n } from "~/helpers/utils/composables"
 
-const t = useI18n()
+const {
+  app: { i18n },
+} = useContext()
+const t = i18n.t.bind(i18n)
 
 const testScript = useTestScript()
 

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

@@ -1,17 +1,27 @@
 <template>
   <div>
     <div
-      class="bg-primary border-dividerLight top-lowerSecondaryStickyFold sticky z-10 flex items-center justify-between flex-1 pl-4 border-b"
+      class="
+        bg-primary
+        border-b border-dividerLight
+        flex flex-1
+        top-lowerSecondaryStickyFold
+        pl-4
+        z-10
+        sticky
+        items-center
+        justify-between
+      "
     >
-      <label class="text-secondaryLight font-semibold">
+      <label class="font-semibold text-secondaryLight">
-        {{ t("request.header_list") }}
+        {{ $t("request.header_list") }}
       </label>
       <div class="flex">
         <ButtonSecondary
           v-if="headers"
           ref="copyHeaders"
           v-tippy="{ theme: 'tooltip' }"
-          :title="t('action.copy')"
+          :title="$t('action.copy')"
           :svg="copyIcon"
           @click.native="copyHeaders"
         />
@@ -20,19 +30,38 @@
     <div
       v-for="(header, index) in headers"
       :key="`header-${index}`"
-      class="divide-dividerLight border-dividerLight group flex border-b divide-x"
+      class="
+        divide-x divide-dividerLight
+        border-b border-dividerLight
+        flex
+        group
+      "
     >
       <span
-        class="group-hover:text-secondaryDark flex flex-1 min-w-0 px-4 py-2 transition"
+        class="
+          flex flex-1
+          min-w-0
+          py-2
+          px-4
+          transition
+          group-hover:text-secondaryDark
+        "
       >
-        <span class="truncate rounded-sm select-all">
+        <span class="rounded-sm select-all truncate">
           {{ header.key }}
         </span>
       </span>
       <span
-        class="group-hover:text-secondaryDark flex flex-1 min-w-0 px-4 py-2 transition"
+        class="
+          flex flex-1
+          min-w-0
+          py-2
+          px-4
+          transition
+          group-hover:text-secondaryDark
+        "
       >
-        <span class="truncate rounded-sm select-all">
+        <span class="rounded-sm select-all truncate">
           {{ header.value }}
         </span>
       </span>
@@ -40,26 +69,28 @@
   </div>
 </template>
 
-<script setup lang="ts">
+<script>
-import { ref } from "@nuxtjs/composition-api"
+import { defineComponent } from "@nuxtjs/composition-api"
-import { HoppRESTHeader } from "~/helpers/types/HoppRESTRequest"
 import { copyToClipboard } from "~/helpers/utils/clipboard"
-import { useI18n, useToast } from "~/helpers/utils/composables"
 
-const t = useI18n()
+export default defineComponent({
-
+  props: {
-const toast = useToast()
+    headers: { type: Array, default: () => [] },
-
+  },
-const props = defineProps<{
+  data() {
-  headers: Array<HoppRESTHeader>
+    return {
-}>()
+      copyIcon: "copy",
-
+    }
-const copyIcon = ref("copy")
+  },
-
+  methods: {
-const copyHeaders = () => {
+    copyHeaders() {
-  copyToClipboard(JSON.stringify(props.headers))
+      copyToClipboard(JSON.stringify(this.headers))
-  copyIcon.value = "check"
+      this.copyIcon = "check"
-  toast.success(`${t("state.copied_to_clipboard")}`)
+      this.$toast.success(this.$t("state.copied_to_clipboard"), {
-  setTimeout(() => (copyIcon.value = "copy"), 1000)
+        icon: "content_paste",
-}
+      })
+      setTimeout(() => (this.copyIcon = "copy"), 1000)
+    },
+  },
+})
 </script>

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

@@ -1,16 +1,26 @@
 <template>
   <div class="flex flex-col flex-1">
     <div
-      class="bg-primary border-dividerLight top-lowerSecondaryStickyFold sticky z-10 flex items-center justify-between flex-1 pl-4 border-b"
+      class="
+        bg-primary
+        border-b border-dividerLight
+        flex flex-1
+        top-lowerSecondaryStickyFold
+        pl-4
+        z-10
+        sticky
+        items-center
+        justify-between
+      "
     >
-      <label class="text-secondaryLight font-semibold">
+      <label class="font-semibold text-secondaryLight">
-        {{ t("response.body") }}
+        {{ $t("response.body") }}
       </label>
       <div class="flex">
         <ButtonSecondary
           v-if="response.body"
           v-tippy="{ theme: 'tooltip' }"
-          :title="t('state.linewrap')"
+          :title="$t('state.linewrap')"
           :class="{ '!text-accent': linewrapEnabled }"
           svg="corner-down-left"
           @click.native.prevent="linewrapEnabled = !linewrapEnabled"
@@ -19,7 +29,7 @@
           v-if="response.body"
           v-tippy="{ theme: 'tooltip' }"
           :title="
-            previewEnabled ? t('hide.preview') : t('response.preview_html')
+            previewEnabled ? $t('hide.preview') : $t('response.preview_html')
           "
           :svg="!previewEnabled ? 'eye' : 'eye-off'"
           @click.native.prevent="togglePreview"
@@ -28,7 +38,7 @@
           v-if="response.body"
           ref="downloadResponse"
           v-tippy="{ theme: 'tooltip' }"
-          :title="t('action.download_file')"
+          :title="$t('action.download_file')"
           :svg="downloadIcon"
           @click.native="downloadResponse"
         />
@@ -36,7 +46,7 @@
           v-if="response.body"
           ref="copyResponse"
           v-tippy="{ theme: 'tooltip' }"
-          :title="t('action.copy')"
+          :title="$t('action.copy')"
           :svg="copyIcon"
           @click.native="copyResponse"
         />
@@ -54,19 +64,20 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, reactive } from "@nuxtjs/composition-api"
+import { computed, ref, useContext, reactive } from "@nuxtjs/composition-api"
 import { useCodemirror } from "~/helpers/editor/codemirror"
 import { copyToClipboard } from "~/helpers/utils/clipboard"
 import { HoppRESTResponse } from "~/helpers/types/HoppRESTResponse"
-import { useI18n, useToast } from "~/helpers/utils/composables"
-
-const t = useI18n()
 
 const props = defineProps<{
   response: HoppRESTResponse
 }>()
 
-const toast = useToast()
+const {
+  $toast,
+  app: { i18n },
+} = useContext()
+const t = i18n.t.bind(i18n)
 
 const responseBodyText = computed(() => {
   if (
@@ -116,7 +127,9 @@ const downloadResponse = () => {
   document.body.appendChild(a)
   a.click()
   downloadIcon.value = "check"
-  toast.success(`${t("state.download_started")}`)
+  $toast.success(`${t("state.download_started")}`, {
+    icon: "downloading",
+  })
   setTimeout(() => {
     document.body.removeChild(a)
     URL.revokeObjectURL(url)
@@ -127,7 +140,9 @@ const downloadResponse = () => {
 const copyResponse = () => {
   copyToClipboard(responseBodyText.value)
   copyIcon.value = "check"
-  toast.success(`${t("state.copied_to_clipboard")}`)
+  $toast.success(`${t("state.copied_to_clipboard")}`, {
+    icon: "content_paste",
+  })
   setTimeout(() => (copyIcon.value = "copy"), 1000)
 }
 

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

@@ -1,9 +1,19 @@
 <template>
   <div>
     <div
-      class="bg-primary border-dividerLight top-lowerSecondaryStickyFold sticky z-10 flex items-center justify-between flex-1 pl-4 border-b"
+      class="
+        bg-primary
+        border-b border-dividerLight
+        flex flex-1
+        top-lowerSecondaryStickyFold
+        pl-4
+        z-10
+        sticky
+        items-center
+        justify-between
+      "
     >
-      <label class="text-secondaryLight font-semibold">
+      <label class="font-semibold text-secondaryLight">
         {{ $t("response.body") }}
       </label>
       <div class="flex">
@@ -18,7 +28,7 @@
       </div>
     </div>
     <img
-      class="border-dividerLight flex flex-1 max-w-full border-b"
+      class="border-b border-dividerLight flex max-w-full flex-1"
       :src="imageSource"
       loading="lazy"
       :alt="imageSource"
@@ -93,7 +103,9 @@ export default defineComponent({
       document.body.appendChild(a)
       a.click()
       this.downloadIcon = "check"
-      this.$toast.success(this.$t("state.download_started"))
+      this.$toast.success(this.$t("state.download_started"), {
+        icon: "downloading",
+      })
       setTimeout(() => {
         document.body.removeChild(a)
         URL.revokeObjectURL(url)

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

@@ -1,16 +1,26 @@
 <template>
   <div>
     <div
-      class="bg-primary border-dividerLight top-lowerSecondaryStickyFold sticky z-10 flex items-center justify-between flex-1 pl-4 border-b"
+      class="
+        bg-primary
+        border-b border-dividerLight
+        flex flex-1
+        top-lowerSecondaryStickyFold
+        pl-4
+        z-10
+        sticky
+        items-center
+        justify-between
+      "
     >
-      <label class="text-secondaryLight font-semibold">{{
+      <label class="font-semibold text-secondaryLight">{{
-        t("response.body")
+        $t("response.body")
       }}</label>
       <div class="flex">
         <ButtonSecondary
           v-if="response.body"
           v-tippy="{ theme: 'tooltip' }"
-          :title="t('state.linewrap')"
+          :title="$t('state.linewrap')"
           :class="{ '!text-accent': linewrapEnabled }"
           svg="corner-down-left"
           @click.native.prevent="linewrapEnabled = !linewrapEnabled"
@@ -19,7 +29,7 @@
           v-if="response.body"
           ref="downloadResponse"
           v-tippy="{ theme: 'tooltip' }"
-          :title="t('action.download_file')"
+          :title="$t('action.download_file')"
           :svg="downloadIcon"
           @click.native="downloadResponse"
         />
@@ -27,7 +37,7 @@
           v-if="response.body"
           ref="copyResponse"
           v-tippy="{ theme: 'tooltip' }"
-          :title="t('action.copy')"
+          :title="$t('action.copy')"
           :svg="copyIcon"
           @click.native="copyResponse"
         />
@@ -36,7 +46,17 @@
     <div ref="jsonResponse"></div>
     <div
       v-if="outlinePath"
-      class="bg-primaryLight border-dividerLight flex-nowrap hide-scrollbar sticky bottom-0 z-10 flex flex-1 px-2 overflow-auto border-t"
+      class="
+        bg-primaryLight
+        border-t border-dividerLight
+        flex flex-nowrap flex-1
+        px-2
+        bottom-0
+        z-10
+        sticky
+        overflow-auto
+        hide-scrollbar
+      "
     >
       <div
         v-for="(item, index) in outlinePath"
@@ -115,7 +135,7 @@
         </tippy>
         <i
           v-if="index + 1 !== outlinePath.length"
-          class="text-secondaryLight material-icons opacity-50"
+          class="text-secondaryLight opacity-50 material-icons"
           >chevron_right</i
         >
       </div>
@@ -124,7 +144,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, reactive } from "@nuxtjs/composition-api"
+import { computed, ref, useContext, reactive } from "@nuxtjs/composition-api"
 import { useCodemirror } from "~/helpers/editor/codemirror"
 import { copyToClipboard } from "~/helpers/utils/clipboard"
 import { HoppRESTResponse } from "~/helpers/types/HoppRESTResponse"
@@ -134,15 +154,16 @@ import {
   convertIndexToLineCh,
   convertLineChToIndex,
 } from "~/helpers/editor/utils"
-import { useI18n, useToast } from "~/helpers/utils/composables"
-
-const t = useI18n()
 
 const props = defineProps<{
   response: HoppRESTResponse
 }>()
 
-const toast = useToast()
+const {
+  $toast,
+  app: { i18n },
+} = useContext()
+const t = i18n.t.bind(i18n)
 
 const responseBodyText = computed(() => {
   if (
@@ -213,7 +234,9 @@ const downloadResponse = () => {
   document.body.appendChild(a)
   a.click()
   downloadIcon.value = "check"
-  toast.success(`${t("state.download_started")}`)
+  $toast.success(`${t("state.download_started")}`, {
+    icon: "downloading",
+  })
   setTimeout(() => {
     document.body.removeChild(a)
     URL.revokeObjectURL(url)
@@ -233,7 +256,9 @@ const outlinePath = computed(() => {
 const copyResponse = () => {
   copyToClipboard(responseBodyText.value)
   copyIcon.value = "check"
-  toast.success(`${t("state.copied_to_clipboard")}`)
+  $toast.success(`${t("state.copied_to_clipboard")}`, {
+    icon: "content_paste",
+  })
   setTimeout(() => (copyIcon.value = "copy"), 1000)
 }
 </script>

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

@@ -1,16 +1,26 @@
 <template>
   <div>
     <div
-      class="bg-primary border-dividerLight top-lowerSecondaryStickyFold sticky z-10 flex items-center justify-between flex-1 pl-4 border-b"
+      class="
+        bg-primary
+        border-b border-dividerLight
+        flex flex-1
+        top-lowerSecondaryStickyFold
+        pl-4
+        z-10
+        sticky
+        items-center
+        justify-between
+      "
     >
-      <label class="text-secondaryLight font-semibold">
+      <label class="font-semibold text-secondaryLight">
-        {{ t("response.body") }}
+        {{ $t("response.body") }}
       </label>
       <div class="flex">
         <ButtonSecondary
           v-if="response.body"
           v-tippy="{ theme: 'tooltip' }"
-          :title="t('state.linewrap')"
+          :title="$t('state.linewrap')"
           :class="{ '!text-accent': linewrapEnabled }"
           svg="corner-down-left"
           @click.native.prevent="linewrapEnabled = !linewrapEnabled"
@@ -19,7 +29,7 @@
           v-if="response.body"
           ref="downloadResponse"
           v-tippy="{ theme: 'tooltip' }"
-          :title="t('action.download_file')"
+          :title="$t('action.download_file')"
           :svg="downloadIcon"
           @click.native="downloadResponse"
         />
@@ -27,7 +37,7 @@
           v-if="response.body"
           ref="copyResponse"
           v-tippy="{ theme: 'tooltip' }"
-          :title="t('action.copy')"
+          :title="$t('action.copy')"
           :svg="copyIcon"
           @click.native="copyResponse"
         />
@@ -38,19 +48,20 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, reactive } from "@nuxtjs/composition-api"
+import { ref, useContext, computed, reactive } from "@nuxtjs/composition-api"
 import { useCodemirror } from "~/helpers/editor/codemirror"
 import { copyToClipboard } from "~/helpers/utils/clipboard"
 import { HoppRESTResponse } from "~/helpers/types/HoppRESTResponse"
-import { useI18n, useToast } from "~/helpers/utils/composables"
-
-const t = useI18n()
 
 const props = defineProps<{
   response: HoppRESTResponse
 }>()
 
-const toast = useToast()
+const {
+  $toast,
+  app: { i18n },
+} = useContext()
+const t = i18n.t.bind(i18n)
 
 const responseBodyText = computed(() => {
   if (
@@ -106,7 +117,9 @@ const downloadResponse = () => {
   document.body.appendChild(a)
   a.click()
   downloadIcon.value = "check"
-  toast.success(`${t("state.download_started")}`)
+  $toast.success(`${t("state.download_started")}`, {
+    icon: "downloading",
+  })
   setTimeout(() => {
     document.body.removeChild(a)
     URL.revokeObjectURL(url)
@@ -117,7 +130,9 @@ const downloadResponse = () => {
 const copyResponse = () => {
   copyToClipboard(responseBodyText.value)
   copyIcon.value = "check"
-  toast.success(`${t("state.copied_to_clipboard")}`)
+  $toast.success(`${t("state.copied_to_clipboard")}`, {
+    icon: "content_paste",
+  })
   setTimeout(() => (copyIcon.value = "copy"), 1000)
 }
 </script>

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

@@ -1,16 +1,26 @@
 <template>
   <div>
     <div
-      class="bg-primary border-dividerLight top-lowerSecondaryStickyFold sticky z-10 flex items-center justify-between flex-1 pl-4 border-b"
+      class="
+        bg-primary
+        border-b border-dividerLight
+        flex flex-1
+        top-lowerSecondaryStickyFold
+        pl-4
+        z-10
+        sticky
+        items-center
+        justify-between
+      "
     >
-      <label class="text-secondaryLight font-semibold">
+      <label class="font-semibold text-secondaryLight">
-        {{ t("response.body") }}
+        {{ $t("response.body") }}
       </label>
       <div class="flex">
         <ButtonSecondary
           v-if="response.body"
           v-tippy="{ theme: 'tooltip' }"
-          :title="t('state.linewrap')"
+          :title="$t('state.linewrap')"
           :class="{ '!text-accent': linewrapEnabled }"
           svg="corner-down-left"
           @click.native.prevent="linewrapEnabled = !linewrapEnabled"
@@ -19,7 +29,7 @@
           v-if="response.body"
           ref="downloadResponse"
           v-tippy="{ theme: 'tooltip' }"
-          :title="t('action.download_file')"
+          :title="$t('action.download_file')"
           :svg="downloadIcon"
           @click.native="downloadResponse"
         />
@@ -27,7 +37,7 @@
           v-if="response.body"
           ref="copyResponse"
           v-tippy="{ theme: 'tooltip' }"
-          :title="t('action.copy')"
+          :title="$t('action.copy')"
           :svg="copyIcon"
           @click.native="copyResponse"
         />
@@ -38,19 +48,20 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, reactive } from "@nuxtjs/composition-api"
+import { computed, ref, useContext, reactive } from "@nuxtjs/composition-api"
 import { useCodemirror } from "~/helpers/editor/codemirror"
 import { copyToClipboard } from "~/helpers/utils/clipboard"
 import { HoppRESTResponse } from "~/helpers/types/HoppRESTResponse"
-import { useI18n, useToast } from "~/helpers/utils/composables"
-
-const t = useI18n()
 
 const props = defineProps<{
   response: HoppRESTResponse
 }>()
 
-const toast = useToast()
+const {
+  $toast,
+  app: { i18n },
+} = useContext()
+const t = i18n.t.bind(i18n)
 
 const responseBodyText = computed(() => {
   if (
@@ -106,7 +117,9 @@ const downloadResponse = () => {
   document.body.appendChild(a)
   a.click()
   downloadIcon.value = "check"
-  toast.success(`${t("state.download_started")}`)
+  $toast.success(`${t("state.download_started")}`, {
+    icon: "downloading",
+  })
   setTimeout(() => {
     document.body.removeChild(a)
     URL.revokeObjectURL(url)
@@ -117,7 +130,9 @@ const downloadResponse = () => {
 const copyResponse = () => {
   copyToClipboard(responseBodyText.value)
   copyIcon.value = "check"
-  toast.success(`${t("state.copied_to_clipboard")}`)
+  $toast.success(`${t("state.copied_to_clipboard")}`, {
+    icon: "content_paste",
+  })
   setTimeout(() => (copyIcon.value = "copy"), 1000)
 }
 </script>

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

@@ -1,15 +1,32 @@
 <template>
-  <div class="relative flex items-center justify-center w-5 h-5 cursor-pointer">
+  <div class="cursor-pointer flex h-5 w-5 relative items-center justify-center">
     <img
-      class="bg-primaryDark absolute object-cover object-center w-5 h-5 transition rounded-full"
+      class="
+        bg-primaryDark bg-primaryLight
+        rounded-full
+        object-cover object-center
+        h-5
+        transition
+        w-5
+        absolute
+      "
       :src="url"
       :alt="alt"
       loading="lazy"
     />
-    <div class="absolute inset-0 rounded-full shadow-inner"></div>
+    <div class="rounded-full shadow-inner inset-0 absolute"></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"
+      class="
+        border-primary
+        rounded-full
+        border-2
+        h-2.5
+        -top-0.5
+        -right-0.5
+        w-2.5
+        absolute
+      "
       :class="indicatorStyles"
     ></span>
   </div>

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

@@ -1,9 +1,19 @@
 <template>
   <div class="flex flex-col">
     <div
-      class="bg-primary border-dividerLight sticky top-0 z-10 flex items-center justify-between flex-1 pl-4 border-b"
+      class="
+        bg-primary
+        border-b border-dividerLight
+        flex flex-1
+        pl-4
+        top-0
+        z-10
+        sticky
+        items-center
+        justify-between
+      "
     >
-      <label for="log" class="text-secondaryLight py-2 font-semibold">
+      <label for="log" class="font-semibold text-secondaryLight py-2">
         {{ title }}
       </label>
     </div>
@@ -16,7 +26,7 @@
           >{{ entry.ts }}{{ source(entry.source) }}{{ entry.payload }}</span
         >
       </span>
-      <span v-else>{{ t("response.waiting_for_connection") }}</span>
+      <span v-else>{{ $t("response.waiting_for_connection") }}</span>
     </div>
   </div>
 </template>
@@ -24,9 +34,6 @@
 <script setup lang="ts">
 import { nextTick, ref, watch } from "@nuxtjs/composition-api"
 import { getSourcePrefix as source } from "~/helpers/utils/string"
-import { useI18n } from "~/helpers/utils/composables"
-
-const t = useI18n()
 
 const props = defineProps({
   log: { type: Array, default: () => [] },

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

@@ -9,22 +9,30 @@
   >
     <Pane size="75" min-size="65" class="hide-scrollbar !overflow-auto">
       <Splitpanes class="smart-splitter" :horizontal="COLUMN_LAYOUT">
-        <Pane
+        <Pane class="hide-scrollbar !overflow-auto">
-          :size="COLUMN_LAYOUT ? 45 : 50"
-          class="hide-scrollbar !overflow-auto"
-        >
           <AppSection label="request">
             <div
-              class="bg-primary sticky top-0 z-10 flex flex-col p-4 space-y-4"
+              class="bg-primary flex flex-col space-y-4 p-4 top-0 z-10 sticky"
             >
-              <div class="inline-flex flex-1 space-x-2">
+              <div class="space-x-2 flex-1 inline-flex">
                 <input
                   id="mqtt-url"
                   v-model="url"
                   type="url"
                   autocomplete="off"
                   spellcheck="false"
-                  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"
+                  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
+                  "
                   :placeholder="$t('mqtt.url')"
                   :disabled="connectionState"
                   @keyup.enter="validUrl ? toggleConnection() : null"
@@ -63,10 +71,7 @@
             </div>
           </AppSection>
         </Pane>
-        <Pane
+        <Pane class="hide-scrollbar !overflow-auto">
-          :size="COLUMN_LAYOUT ? 65 : 50"
-          class="hide-scrollbar !overflow-auto"
-        >
           <AppSection label="response">
             <RealtimeLog :title="$t('mqtt.log')" :log="log" />
           </AppSection>
@@ -80,8 +85,8 @@
       class="hide-scrollbar !overflow-auto"
     >
       <AppSection label="messages">
-        <div class="flex inline-flex flex-col flex-1 p-4">
+        <div class="flex flex-col flex-1 p-4 inline-flex">
-          <label for="pub_topic" class="text-secondaryLight font-semibold">
+          <label for="pub_topic" class="font-semibold text-secondaryLight">
             {{ $t("mqtt.topic") }}
           </label>
         </div>
@@ -96,12 +101,12 @@
             spellcheck="false"
           />
         </div>
-        <div class="flex items-center justify-between flex-1 p-4">
+        <div class="flex flex-1 p-4 items-center justify-between">
-          <label for="mqtt-message" class="text-secondaryLight font-semibold">
+          <label for="mqtt-message" class="font-semibold text-secondaryLight">
             {{ $t("mqtt.communication") }}
           </label>
         </div>
-        <div class="flex px-4 space-x-2">
+        <div class="flex space-x-2 px-4">
           <input
             id="mqtt-message"
             v-model="msg"
@@ -120,13 +125,19 @@
           />
         </div>
         <div
-          class="border-dividerLight flex inline-flex flex-col flex-1 p-4 mt-4 border-t"
+          class="
+            border-t border-dividerLight
+            flex flex-col flex-1
+            mt-4
+            p-4
+            inline-flex
+          "
         >
-          <label for="sub_topic" class="text-secondaryLight font-semibold">
+          <label for="sub_topic" class="font-semibold text-secondaryLight">
             {{ $t("mqtt.topic") }}
           </label>
         </div>
-        <div class="flex px-4 space-x-2">
+        <div class="flex space-x-2 px-4">
           <input
             id="sub_topic"
             v-model="sub_topic"
@@ -277,7 +288,9 @@ export default defineComponent({
         color: "var(--accent-color)",
         ts: new Date().toLocaleTimeString(),
       })
-      this.$toast.success(this.$t("state.connected"))
+      this.$toast.success(this.$t("state.connected"), {
+        icon: "sync",
+      })
     },
     onMessageArrived({ payloadString, destinationName }) {
       this.log.push({
@@ -308,9 +321,13 @@ export default defineComponent({
       this.connectingState = false
       this.connectionState = false
       if (this.manualDisconnect) {
-        this.$toast.error(this.$t("state.disconnected"))
+        this.$toast.error(this.$t("state.disconnected"), {
+          icon: "sync_disabled",
+        })
       } else {
-        this.$toast.error(this.$t("error.something_went_wrong"))
+        this.$toast.error(this.$t("error.something_went_wrong"), {
+          icon: "error_outline",
+        })
       }
       this.manualDisconnect = false
       this.subscriptionState = false

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

@@ -9,13 +9,10 @@
   >
     <Pane size="75" min-size="65" class="hide-scrollbar !overflow-auto">
       <Splitpanes class="smart-splitter" :horizontal="COLUMN_LAYOUT">
-        <Pane
+        <Pane class="hide-scrollbar !overflow-auto">
-          :size="COLUMN_LAYOUT ? 45 : 50"
-          class="hide-scrollbar !overflow-auto"
-        >
           <AppSection label="request">
-            <div class="bg-primary sticky top-0 z-10 flex p-4">
+            <div class="bg-primary flex p-4 top-0 z-10 sticky">
-              <div class="inline-flex flex-1 space-x-2">
+              <div class="space-x-2 flex-1 inline-flex">
                 <div class="flex flex-1">
                   <label for="client-version">
                     <tippy
@@ -31,7 +28,21 @@
                             id="client-version"
                             v-tippy="{ theme: 'tooltip' }"
                             title="socket.io-client version"
-                            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"
+                            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
+                            "
                             :value="`Client ${clientVersion}`"
                             readonly
                             :disabled="connectionState"
@@ -53,7 +64,18 @@
                     autocomplete="off"
                     spellcheck="false"
                     :class="{ error: !urlValid }"
-                    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"
+                    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
+                    "
                     :placeholder="$t('socketio.url')"
                     :disabled="connectionState"
                     @keyup.enter="urlValid ? toggleConnection() : null"
@@ -61,7 +83,19 @@
                   <input
                     id="socketio-path"
                     v-model="path"
-                    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"
+                    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
+                    "
                     spellcheck="false"
                     :disabled="connectionState"
                     @keyup.enter="urlValid ? toggleConnection() : null"
@@ -84,10 +118,7 @@
             </div>
           </AppSection>
         </Pane>
-        <Pane
+        <Pane class="hide-scrollbar !overflow-auto">
-          :size="COLUMN_LAYOUT ? 65 : 50"
-          class="hide-scrollbar !overflow-auto"
-        >
           <AppSection label="response">
             <RealtimeLog :title="$t('socketio.log')" :log="communication.log" />
           </AppSection>
@@ -101,8 +132,8 @@
       class="hide-scrollbar !overflow-auto"
     >
       <AppSection label="messages">
-        <div class="flex inline-flex flex-col flex-1 p-4">
+        <div class="flex flex-col flex-1 p-4 inline-flex">
-          <label for="events" class="text-secondaryLight font-semibold">
+          <label for="events" class="font-semibold text-secondaryLight">
             {{ $t("socketio.events") }}
           </label>
         </div>
@@ -118,8 +149,8 @@
             :disabled="!connectionState"
           />
         </div>
-        <div class="flex items-center justify-between flex-1 p-4">
+        <div class="flex flex-1 p-4 items-center justify-between">
-          <label class="text-secondaryLight font-semibold">
+          <label class="font-semibold text-secondaryLight">
             {{ $t("socketio.communication") }}
           </label>
           <div class="flex">
@@ -132,7 +163,7 @@
             />
           </div>
         </div>
-        <div class="flex flex-col px-4 pb-4 space-y-2">
+        <div class="flex flex-col space-y-2 px-4 pb-4">
           <div
             v-for="(input, index) of communication.inputs"
             :key="`input-${index}`"
@@ -294,7 +325,9 @@ export default defineComponent({
               ts: new Date().toLocaleTimeString(),
             },
           ]
-          this.$toast.success(this.$t("state.connected"))
+          this.$toast.success(this.$t("state.connected"), {
+            icon: "sync",
+          })
         })
         this.io.on("*", ({ data }) => {
           const [eventName, message] = data
@@ -322,11 +355,15 @@ export default defineComponent({
             color: "#ff5555",
             ts: new Date().toLocaleTimeString(),
           })
-          this.$toast.error(this.$t("state.disconnected"))
+          this.$toast.error(this.$t("state.disconnected"), {
+            icon: "sync_disabled",
+          })
         })
       } catch (e) {
         this.handleError(e)
-        this.$toast.error(this.$t("error.something_went_wrong"))
+        this.$toast.error(this.$t("error.something_went_wrong"), {
+          icon: "error_outline",
+        })
       }
 
       logHoppRequestRunToAnalytics({

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">
+    <Pane class="hide-scrollbar !overflow-auto">
-      <div class="bg-primary sticky top-0 z-10 flex p-4">
+      <div class="bg-primary flex p-4 top-0 z-10 sticky">
-        <div class="inline-flex flex-1 space-x-2">
+        <div class="space-x-2 flex-1 inline-flex">
           <div class="flex flex-1">
             <input
               id="server"
@@ -10,21 +10,51 @@
               type="url"
               autocomplete="off"
               :class="{ error: !serverValid }"
-              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"
+              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
+              "
               :placeholder="$t('sse.url')"
               :disabled="connectionSSEState"
               @keyup.enter="serverValid ? toggleSSEConnection() : null"
             />
             <label
               for="event-type"
-              class="bg-primaryLight border-divider text-secondaryLight px-4 py-2 font-semibold truncate border-t border-b"
+              class="
+                bg-primaryLight
+                border-t border-b border-divider
+                font-semibold
+                text-secondaryLight
+                py-2
+                px-4
+                truncate
+              "
             >
               {{ $t("sse.event_type") }}
             </label>
             <input
               id="event-type"
               v-model="eventType"
-              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"
+              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
+              "
               spellcheck="false"
               :disabled="connectionSSEState"
               @keyup.enter="serverValid ? toggleSSEConnection() : null"
@@ -44,7 +74,7 @@
         </div>
       </div>
     </Pane>
-    <Pane :size="COLUMN_LAYOUT ? 65 : 50" class="hide-scrollbar !overflow-auto">
+    <Pane class="hide-scrollbar !overflow-auto">
       <AppSection label="response">
         <ul>
           <li>
@@ -141,7 +171,9 @@ export default defineComponent({
                 ts: new Date().toLocaleTimeString(),
               },
             ]
-            this.$toast.success(this.$t("state.connected"))
+            this.$toast.success(this.$t("state.connected"), {
+              icon: "sync",
+            })
           }
           this.sse.onerror = () => {
             this.handleSSEError()
@@ -156,7 +188,9 @@ export default defineComponent({
               color: "#ff5555",
               ts: new Date().toLocaleTimeString(),
             })
-            this.$toast.error(this.$t("state.disconnected"))
+            this.$toast.error(this.$t("state.disconnected"), {
+              icon: "sync_disabled",
+            })
           }
           this.sse.addEventListener(this.eventType, ({ data }) => {
             this.events.log.push({
@@ -167,7 +201,9 @@ export default defineComponent({
           })
         } catch (e) {
           this.handleSSEError(e)
-          this.$toast.error(this.$t("error.something_went_wrong"))
+          this.$toast.error(this.$t("error.something_went_wrong"), {
+            icon: "error_outline",
+          })
         }
       } else {
         this.events.log = [

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

@@ -9,17 +9,25 @@
   >
     <Pane size="75" min-size="65" class="hide-scrollbar !overflow-auto">
       <Splitpanes class="smart-splitter" :horizontal="COLUMN_LAYOUT">
-        <Pane
+        <Pane class="hide-scrollbar !overflow-auto">
-          :size="COLUMN_LAYOUT ? 45 : 50"
-          class="hide-scrollbar !overflow-auto"
-        >
           <AppSection label="request">
-            <div class="bg-primary sticky top-0 z-10 flex p-4">
+            <div class="bg-primary flex p-4 top-0 z-10 sticky">
-              <div class="inline-flex flex-1 space-x-2">
+              <div class="space-x-2 flex-1 inline-flex">
                 <input
                   id="websocket-url"
                   v-model="url"
-                  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"
+                  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
+                  "
                   type="url"
                   autocomplete="off"
                   spellcheck="false"
@@ -44,9 +52,19 @@
               </div>
             </div>
             <div
-              class="bg-primary border-dividerLight top-upperPrimaryStickyFold sticky z-10 flex items-center justify-between flex-1 pl-4 border-b"
+              class="
+                bg-primary
+                border-b border-dividerLight
+                flex flex-1
+                top-upperPrimaryStickyFold
+                pl-4
+                z-10
+                sticky
+                items-center
+                justify-between
+              "
             >
-              <label class="text-secondaryLight font-semibold">
+              <label class="font-semibold text-secondaryLight">
                 {{ $t("websocket.protocols") }}
               </label>
               <div class="flex">
@@ -67,11 +85,15 @@
             <div
               v-for="(protocol, index) of protocols"
               :key="`protocol-${index}`"
-              class="divide-dividerLight border-dividerLight flex border-b divide-x"
+              class="
+                divide-x divide-dividerLight
+                border-b border-dividerLight
+                flex
+              "
             >
               <input
                 v-model="protocol.value"
-                class="flex flex-1 px-4 py-2 bg-transparent"
+                class="bg-transparent flex flex-1 py-2 px-4"
                 :placeholder="$t('count.protocol', { count: index + 1 })"
                 name="message"
                 type="text"
@@ -114,24 +136,34 @@
             </div>
             <div
               v-if="protocols.length === 0"
-              class="text-secondaryLight flex flex-col items-center justify-center p-4"
+              class="
+                flex flex-col
+                text-secondaryLight
+                p-4
+                items-center
+                justify-center
+              "
             >
               <img
                 :src="`/images/states/${$colorMode.value}/add_category.svg`"
                 loading="lazy"
-                class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
+                class="
+                  flex-col
+                  my-4
+                  object-contain object-center
+                  h-16
+                  w-16
+                  inline-flex
+                "
                 :alt="$t('empty.protocols')"
               />
-              <span class="mb-4 text-center">
+              <span class="text-center mb-4">
                 {{ $t("empty.protocols") }}
               </span>
             </div>
           </AppSection>
         </Pane>
-        <Pane
+        <Pane class="hide-scrollbar !overflow-auto">
-          :size="COLUMN_LAYOUT ? 65 : 50"
-          class="hide-scrollbar !overflow-auto"
-        >
           <AppSection label="response">
             <RealtimeLog
               :title="$t('websocket.log')"
@@ -148,15 +180,15 @@
       class="hide-scrollbar !overflow-auto"
     >
       <AppSection label="messages">
-        <div class="flex inline-flex flex-col flex-1 p-4">
+        <div class="flex flex-col flex-1 p-4 inline-flex">
           <label
             for="websocket-message"
-            class="text-secondaryLight font-semibold"
+            class="font-semibold text-secondaryLight"
           >
             {{ $t("websocket.communication") }}
           </label>
         </div>
-        <div class="flex px-4 space-x-2">
+        <div class="flex space-x-2 px-4">
           <input
             id="websocket-message"
             v-model="communication.input"
@@ -287,7 +319,9 @@ export default defineComponent({
               ts: new Date().toLocaleTimeString(),
             },
           ]
-          this.$toast.success(this.$t("state.connected"))
+          this.$toast.success(this.$t("state.connected"), {
+            icon: "sync",
+          })
         }
         this.socket.onerror = () => {
           this.handleError()
@@ -300,7 +334,9 @@ export default defineComponent({
             color: "#ff5555",
             ts: new Date().toLocaleTimeString(),
           })
-          this.$toast.error(this.$t("state.disconnected"))
+          this.$toast.error(this.$t("state.disconnected"), {
+            icon: "sync_disabled",
+          })
         }
         this.socket.onmessage = ({ data }) => {
           this.communication.log.push({
@@ -311,7 +347,9 @@ export default defineComponent({
         }
       } catch (e) {
         this.handleError(e)
-        this.$toast.error(this.$t("error.something_went_wrong"))
+        this.$toast.error(this.$t("error.something_went_wrong"), {
+          icon: "error_outline",
+        })
       }
 
       logHoppRequestRunToAnalytics({
@@ -395,6 +433,7 @@ export default defineComponent({
       const oldProtocols = this.protocols.slice()
       this.$delete(this.protocols, index)
       this.$toast.success(this.$t("state.deleted"), {
+        icon: "delete",
         action: {
           text: this.$t("action.undo"),
           duration: 4000,

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

@@ -1,6 +1,15 @@
 <template>
   <div
-    class="flex-nowrap group hover:text-secondaryDark inline-flex items-center justify-center transition cursor-pointer"
+    class="
+      cursor-pointer
+      flex-nowrap
+      group
+      inline-flex
+      items-center
+      justify-center
+      transition
+      hover:text-secondaryDark
+    "
     @click="$emit('change')"
   >
     <input
@@ -12,24 +21,22 @@
     />
     <label
       for="checkbox"
-      class="pl-0 font-semibold align-middle cursor-pointer"
+      class="cursor-pointer pl-0 align-middle font-semibold"
     >
       <slot></slot>
     </label>
   </div>
 </template>
 
-<script>
+<script setup lang="ts">
-import { defineComponent } from "@nuxtjs/composition-api"
+withDefaults(
-
+  defineProps<{
-export default defineComponent({
+    on: Boolean
-  props: {
+  }>(),
-    on: {
+  {
-      type: Boolean,
+    on: false,
-      default: false,
+  }
-    },
+)
-  },
-})
 </script>
 
 <style scoped lang="scss">

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

@@ -4,7 +4,7 @@
       v-for="(color, index) of colors"
       :key="`color-${index}`"
       v-tippy="{ theme: 'tooltip' }"
-      :title="t(getColorModeName(color))"
+      :title="$t(getColorModeName(color))"
       :class="{
         'bg-primaryLight !text-accent hover:text-accent': color === active,
       }"
@@ -22,9 +22,6 @@ import {
   HoppBgColors,
   useSetting,
 } from "~/newstore/settings"
-import { useI18n } from "~/helpers/utils/composables"
-
-const t = useI18n()
 
 const colors = HoppBgColors
 const active = useSetting("BG_COLOR")