refactor: network strategy rewrite

feat: context menu for secondary actions in collection, environment and team components - #2005
feat: show existing name while renaming collections/folders/requests - resolved #2006
2021-12-12 16:43:07 +05:30 · 2021-12-11 08:03:39 +05:30 · 2021-12-10 10:55:49 +05:30 · 2021-12-08 20:50:59 +05:30 · 2021-12-07 06:52:43 +05:30 · 2021-12-06 20:06:19 +05:30
233 changed files with 7111 additions and 7742 deletions
--- a/.github/ISSUE_TEMPLATE/--bug-report.yaml
+++ b/.github/ISSUE_TEMPLATE/--bug-report.yaml
@@ -0,0 +1,57 @@
+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
--- a/.github/ISSUE_TEMPLATE/--feature-request.yaml
+++ b/.github/ISSUE_TEMPLATE/--feature-request.yaml
@@ -0,0 +1,28 @@
+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
--- a/.github/ISSUE_TEMPLATE/bug_report.md
+++ b/.github/ISSUE_TEMPLATE/bug_report.md
@@ -1,38 +0,0 @@
---
-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.
--- a/.github/ISSUE_TEMPLATE/config.yml
+++ b/.github/ISSUE_TEMPLATE/config.yml
@@ -0,0 +1,7 @@
+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
--- a/.github/ISSUE_TEMPLATE/custom.md
+++ b/.github/ISSUE_TEMPLATE/custom.md
@@ -1,8 +0,0 @@
---
-name: Custom issue template
-about: Describe this issue template's purpose here.
-title: ''
-labels: ''
-assignees: ''
-
---
--- a/.github/ISSUE_TEMPLATE/feature_request.md
+++ b/.github/ISSUE_TEMPLATE/feature_request.md
@@ -1,20 +0,0 @@
---
-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.
--- a/6
+++ b/6
@@ -3,8 +3,10 @@ FROM node:lts-alpine
 LABEL maintainer="Hoppscotch (support@hoppscotch.io)"

 # Add git as the prebuild target requires it to parse version information
-RUN apk add --update --no-cache \
-  git
+RUN apk add --no-cache --virtual .gyp \
+  python3 \
+  make \
+  g++

 # Create app directory
 WORKDIR /app
--- a/README.md
+++ b/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)
+[![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)

 <details open>
  <summary><b>Table of contents</b></summary>
--- a/SECURITY.md
+++ b/SECURITY.md
@@ -0,0 +1,26 @@
+# 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.
--- a/TRANSLATIONS.md
+++ b/TRANSLATIONS.md
@@ -9,16 +9,19 @@ 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. **Create a new branch for your translation.**
-3. **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. **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. **Save & commit changes.**
-8. **Send a pull request.**
+2. **Checkout the `i18n` branch for latest translations.**
+3. **Create a new branch for your translation with base branch `i18n`.**
+4. **Create target language file in the [`locales`](https://github.com/hoppscotch/hoppscotch/tree/main/packages/hoppscotch-app/locales) directory.**
+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.**
+6. **Translate the strings in the target language file.**
+7. **Add your language entry to [`languages.json`](https://github.com/hoppscotch/hoppscotch/blob/main/packages/hoppscotch-app/languages.json).**
+8. **Save & commit changes.**
+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
--- a/package.json
+++ b/package.json
@@ -4,6 +4,7 @@
  "description": "Open source API development ecosystem",
  "author": "Hoppscotch (support@hoppscotch.io)",
  "private": true,
+  "license": "MIT",
  "scripts": {
    "preinstall": "npx only-allow pnpm",
    "prepare": "husky install",
@@ -20,10 +21,10 @@
  ],
  "dependencies": {
    "husky": "^7.0.4",
-    "lint-staged": "^12.0.2"
+    "lint-staged": "^12.1.2"
  },
  "devDependencies": {
-    "@commitlint/cli": "^14.1.0",
-    "@commitlint/config-conventional": "^14.1.0"
+    "@commitlint/cli": "^15.0.0",
+    "@commitlint/config-conventional": "^15.0.0"
  }
 }
--- a/packages/codemirror-lang-graphql/package.json
+++ b/packages/codemirror-lang-graphql/package.json
@@ -2,6 +2,7 @@
  "name": "@hoppscotch/codemirror-lang-graphql",
  "version": "0.1.0",
  "description": "GraphQL language support for CodeMirror",
+  "author": "Hoppscotch (support@hoppscotch.io)",
  "scripts": {
    "prepare": "rollup -c"
  },
@@ -15,17 +16,17 @@
  "types": "dist/index.d.ts",
  "sideEffects": false,
  "dependencies": {
-    "@codemirror/highlight": "^0.19.0",
-    "@codemirror/language": "^0.19.0",
-    "@lezer/lr": "^0.15.0"
+    "@codemirror/highlight": "^0.19.6",
+    "@codemirror/language": "^0.19.7",
+    "@lezer/lr": "^0.15.5"
  },
  "devDependencies": {
    "@lezer/generator": "^0.15.0",
    "mocha": "^9.0.1",
-    "rollup": "^2.35.1",
-    "rollup-plugin-dts": "^3.0.2",
-    "rollup-plugin-ts": "^1.4.0",
-    "typescript": "^4.3.4"
+    "rollup": "^2.60.2",
+    "rollup-plugin-dts": "^4.0.1",
+    "rollup-plugin-ts": "^2.0.4",
+    "typescript": "^4.5.2"
  },
  "license": "MIT"
 }
--- a/packages/hoppscotch-app/assets/icons/folder-minus.svg
+++ b/packages/hoppscotch-app/assets/icons/folder-minus.svg
@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-  <path d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z"></path>
-  <line x1="9" y1="14" x2="15" y2="14"></line>
-</svg>
--- a/packages/hoppscotch-app/assets/icons/corner-down-left.svg
+++ b/packages/hoppscotch-app/assets/icons/corner-down-left.svg
@@ -1,4 +1,3 @@
 <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">
-  <polyline points="9 10 4 15 9 20"></polyline>
-  <path d="M20 4v7a4 4 0 01-4 4H4"></path>
-</svg>
+  <path d="M6 17l2-5h14l-3 8a2 2 0 01-2 1H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h7a2 2 0 012 2v4"></path>
+</svg>
--- a/packages/hoppscotch-app/assets/icons/loader.svg
+++ b/packages/hoppscotch-app/assets/icons/loader.svg
@@ -1,10 +1,3 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-  <line x1="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>
+  <path d="M21 12a9 9 0 11-6.219-8.56"></path>
 </svg>
--- a/packages/hoppscotch-app/assets/icons/logo.svg
+++ b/packages/hoppscotch-app/assets/icons/logo.svg
@@ -0,0 +1,25 @@
+<svg width="128" height="128" viewBox="0 0 128 128" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 16C0 7.16344 7.16344 0 16 0H112C120.837 0 128 7.16344 128 16V112C128 120.837 120.837 128 112 128H16C7.16344 128 0 120.837 0 112V16Z" fill="#10B981"/>
+<ellipse cx="49.94" cy="39.46" rx="2.5" ry="2.5" fill="white" fill-opacity="0.75"/>
+<ellipse cx="65.44" cy="40.46" rx="3" ry="3" fill="white" fill-opacity="0.75"/>
+<ellipse cx="80.44" cy="44.46" rx="2.50001" ry="2.5" fill="white" fill-opacity="0.75"/>
+<path d="M86.7407 58.919C87.2596 55.7445 77.0229 51.468 63.9989 49.3955C50.9765 47.3216 39.8979 48.2292 39.379 51.4037C39.3147 51.6624 39.379 51.8568 39.4448 52.1169C39.1203 51.9868 20.2663 104.92 20.2663 104.92H91.5347C91.5347 104.92 87.1295 59.5665 86.482 59.5665C86.6107 59.3735 86.7407 59.1792 86.7407 58.919Z" fill="url(#paint0_linear_202_73)"/>
+<path d="M79.2254 56.8465C78.9009 58.8547 71.5157 59.3078 62.6397 57.9471C53.828 56.5221 46.8943 53.7363 47.2188 51.7925C47.3489 51.145 48.1907 50.6261 49.5514 50.3675C45.0162 50.5618 42.0361 51.4037 41.7774 52.8287C41.3887 55.4858 50.4591 59.1134 62.1208 60.993C73.7826 62.8711 83.5662 62.1593 84.0193 59.5679C84.2795 58.0114 81.6867 56.3277 77.4116 54.7083C78.6422 55.4201 79.2897 56.1976 79.2254 56.8465Z" fill="#A7F3D0" fill-opacity="0.5"/>
+<path d="M83.8892 39.3532C83.1131 31.319 76.9571 24.5155 68.6642 23.2205C60.3713 21.9241 52.5315 26.4593 49.227 33.7803C54.5397 34.1047 60.2412 34.6879 66.2029 35.6598C72.5519 36.6318 78.5122 37.9282 83.8892 39.3532Z" fill="url(#paint1_radial_202_73)"/>
+<path d="M19.0356 39.5005C18.3882 43.4526 26.6153 48.3123 39.5091 52.2643C39.4448 52.0042 39.4448 51.8098 39.4448 51.5511C39.9622 48.3766 50.9765 47.469 64.0647 49.5429C77.1515 51.6154 87.3239 55.8919 86.805 59.0664C86.7407 59.3266 86.6764 59.5209 86.5463 59.7139C99.9576 59.9083 109.288 57.8358 109.936 53.8837C110.842 47.8577 91.2759 39.7592 66.203 35.8072C41.0642 31.8552 19.9418 33.4746 19.0356 39.5005ZM47.9321 39.1761C48.1264 38.1398 49.0984 37.3623 50.1346 37.5567C51.1709 37.7511 51.9484 38.723 51.754 39.7592C51.6239 40.7955 50.5877 41.5087 49.5515 41.3786C48.5152 41.1843 47.7377 40.2123 47.9321 39.1761ZM62.8984 40.2123C63.0928 38.7873 64.4535 37.8154 65.8785 38.0755C67.3035 38.2699 68.2754 39.6292 68.0168 41.0556C67.7566 42.4164 66.3973 43.3883 65.0366 43.1939C63.6102 42.9995 62.6382 41.6388 62.8984 40.2123ZM78.6423 44.0358C78.8366 42.9995 79.8086 42.222 80.8448 42.4164C81.8811 42.6107 82.6586 43.5827 82.4642 44.6189C82.3356 45.6552 81.2979 46.4327 80.2617 46.2383C79.2254 46.0439 78.4479 45.072 78.6423 44.0358Z" fill="url(#paint2_radial_202_73)"/>
+<defs>
+<linearGradient id="paint0_linear_202_73" x1="56.7496" y1="39.4014" x2="56.7496" y2="100.924" gradientUnits="userSpaceOnUse">
+<stop stop-color="#86EFAC" stop-opacity="0.75"/>
+<stop offset="0.635417" stop-color="white" stop-opacity="0.2"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<radialGradient id="paint1_radial_202_73" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(66.5581 31.1766) rotate(90) scale(8.17659 17.3311)">
+<stop stop-color="#047857"/>
+<stop offset="1" stop-color="#064E3B"/>
+</radialGradient>
+<radialGradient id="paint2_radial_202_73" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(64.4593 46.6885) scale(347.403)">
+<stop stop-color="#047857"/>
+<stop offset="0.114583" stop-color="#064E3B"/>
+</radialGradient>
+</defs>
+</svg>
--- a/packages/hoppscotch-app/assets/icons/wrap-text.svg
+++ b/packages/hoppscotch-app/assets/icons/wrap-text.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <line x1="3" y1="6" x2="21" y2="6"></line>
+  <path d="M3 12h15a3 3 0 110 6h-4"></path>
+  <polyline points="16 16 14 18 16 20"></polyline>
+  <line x1="3" y1="18" x2="10" y2="18"></line>
+</svg>
--- a/packages/hoppscotch-app/assets/scss/styles.scss
+++ b/packages/hoppscotch-app/assets/scss/styles.scss
@@ -19,7 +19,8 @@
  @apply bg-divider bg-clip-content;
  @apply rounded-full;
  @apply border-solid border-transparent border-4;
-  @apply hover:(bg-dividerDark bg-clip-content);
+  @apply hover:bg-dividerDark;
+  @apply hover:bg-clip-content;
 }

 ::-webkit-scrollbar {
@@ -27,23 +28,24 @@
  @apply h-4;
 }

+.hide-scrollbar {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
 .hide-scrollbar::-webkit-scrollbar {
  @apply hidden;
 }

 ::selection {
-  @apply bg-divider;
-}
-
-.cm-focused {
-  @apply !outline-none;
+  @apply bg-accentDark;
+  @apply text-accentContrast;
 }

 input::placeholder,
-textarea::placeholder,
-.CodeMirror-empty {
+textarea::placeholder {
  @apply text-secondary;
-  @apply opacity-25;
+  @apply opacity-35;
 }

 input,
@@ -66,7 +68,6 @@ 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;
 }
@@ -130,7 +131,8 @@ a {
    @apply text-accent;
    @apply rounded;
    @apply hover:text-accentDark;
-    @apply focus-visible:(ring ring-accent);
+    @apply focus-visible:ring;
+    @apply focus-visible:ring-accent;
  }
 }

@@ -318,7 +320,7 @@ pre.ace_editor {
    &.toasted-primary {
      @apply bg-tooltip;
      @apply text-primary;
-      @apply justify-start;
+      @apply justify-between;
      @apply shadow;
      @apply font-medium;
      @apply transition;
@@ -336,7 +338,8 @@ pre.ace_editor {
        @apply rounded;
        @apply text-current;
        @apply normal-case;
-        @apply hover:(bg-opacity-20 no-underline);
+        @apply hover:bg-opacity-20;
+        @apply hover:no-underline;
        @apply font-medium;

        font-size: var(--body-font-size);
@@ -391,7 +394,7 @@ pre.ace_editor {
 .smart-splitter .splitpanes__splitter::before {
  @apply absolute;
  @apply inset-0;
-  @apply bg-dividerLight;
+  @apply bg-accentLight;
  @apply opacity-0;
  @apply z-20;
  @apply transition;
@@ -435,29 +438,16 @@ pre.ace_editor {
  @apply w-full;
 }

-.CodeMirror {
-  @apply !h-auto;
+.cm-focused {
+  @apply select-auto;
+  @apply !outline-none;

-  font-size: var(--body-font-size);
-
-  &:not(.CodeMirror-focused) .CodeMirror-activeline-background {
-    background: transparent !important;
-  }
-
-  .CodeMirror-dialog-top {
+  .cm-activeLine {
    @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;
+  .cm-activeLineGutter {
+    @apply bg-primaryDark;
  }
 }

--- a/packages/hoppscotch-app/assets/scss/themes.scss
+++ b/packages/hoppscotch-app/assets/scss/themes.scss
@@ -53,17 +53,17 @@
 }

@mixin dark-editor-theme {
-  --editor-type-color: theme("colors.purple.500");
-  --editor-name-color: theme("colors.blue.500");
-  --editor-operator-color: theme("colors.indigo.500");
-  --editor-invalid-color: theme("colors.red.500");
-  --editor-separator-color: theme("colors.gray.500");
-  --editor-meta-color: theme("colors.gray.500");
-  --editor-variable-color: theme("colors.green.500");
-  --editor-link-color: theme("colors.cyan.500");
-  --editor-process-color: theme("colors.gray.400");
-  --editor-constant-color: theme("colors.fuchsia.500");
-  --editor-keyword-color: theme("colors.pink.500");
+  --editor-type-color: theme("colors.purple.400");
+  --editor-name-color: theme("colors.blue.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.fuchsia.400");
+  --editor-constant-color: theme("colors.violet.400");
+  --editor-keyword-color: theme("colors.pink.400");
 }

@mixin light-editor-theme {
@@ -82,15 +82,15 @@

@mixin black-editor-theme {
  --editor-type-color: theme("colors.purple.400");
-  --editor-name-color: theme("colors.gray.400");
+  --editor-name-color: theme("colors.fuchsia.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.blue.400");
-  --editor-constant-color: theme("colors.fuchsia.400");
+  --editor-process-color: theme("colors.violet.400");
+  --editor-constant-color: theme("colors.blue.400");
  --editor-keyword-color: theme("colors.pink.400");
 }

--- a/packages/hoppscotch-app/components/app/Announcement.vue
+++ b/packages/hoppscotch-app/components/app/Announcement.vue
@@ -1,26 +1,23 @@
 <template>
  <div class="bg-error flex justify-between">
    <span
-      class="
-        flex
-        py-2
-        px-4
-        transition
-        relative
-        items-center
-        justify-center
-        group
-      "
+      class="flex py-2 px-4 transition justify-center group relative items-center"
    >
      <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="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>
--- a/packages/hoppscotch-app/components/app/Footer.vue
+++ b/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('layout.zen_mode')}`"
+          :title="`${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 opacity-50 py-2 px-4">
-                {{ `${$t("app.name")} ${$t("app.version")}` }}
+                {{ `${t("app.name")} ${t("app.version")}` }}
              </div>
            </div>
          </tippy>
@@ -116,19 +116,19 @@
        <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 }"
@@ -142,7 +142,7 @@
        >
          <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,7 +161,9 @@ 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)

--- a/packages/hoppscotch-app/components/app/Fuse.vue
+++ b/packages/hoppscotch-app/components/app/Fuse.vue
@@ -15,7 +15,7 @@
    >
      <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,6 +26,9 @@ 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>[]
--- a/packages/hoppscotch-app/components/app/Header.vue
+++ b/packages/hoppscotch-app/components/app/Header.vue
@@ -5,7 +5,7 @@
    >
      <div class="space-x-2 inline-flex items-center">
        <ButtonSecondary
-          class="tracking-wide !font-bold !text-secondaryDark"
+          class="tracking-wide !font-bold !text-secondaryDark hover:bg-primaryDark focus-visible:bg-primaryDark"
          label="HOPPSCOTCH"
          to="/"
        />
@@ -15,50 +15,45 @@
        <ButtonSecondary
          id="installPWA"
          v-tippy="{ theme: 'tooltip' }"
-          :title="$t('header.install_pwa')"
+          :title="t('header.install_pwa')"
          svg="download"
-          class="rounded"
+          class="rounded hover:bg-primaryDark focus-visible:bg-primaryDark"
          @click.native="showInstallPrompt()"
        />
        <ButtonSecondary
          v-tippy="{ theme: 'tooltip' }"
-          :title="`${$t('app.search')} <kbd>/</kbd>`"
+          :title="`${t('app.search')} <kbd>/</kbd>`"
          svg="search"
-          class="rounded"
+          class="rounded hover:bg-primaryDark focus-visible:bg-primaryDark"
          @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"
+          class="rounded hover:bg-primaryDark focus-visible:bg-primaryDark"
          @click.native="showSupport = true"
        />
        <ButtonSecondary
          v-if="currentUser === null"
          svg="upload-cloud"
-          :label="$t('header.save_workspace')"
+          :label="t('header.save_workspace')"
          filled
          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="space-x-2 inline-flex items-center">
          <ButtonPrimary
            v-tippy="{ theme: 'tooltip' }"
-            :title="$t('team.invite_tooltip')"
-            :label="$t('team.invite')"
+            :title="t('team.invite_tooltip')"
+            :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 !bg-opacity-15 !text-green-500 !hover:bg-opacity-10 !hover:bg-green-400 !hover:text-green-600"
            @click.native="showTeamsModal = true"
          />
          <span class="px-2">
@@ -78,21 +73,21 @@
                <ButtonSecondary
                  v-else
                  v-tippy="{ theme: 'tooltip' }"
-                  :title="$t('header.account')"
-                  class="rounded"
+                  :title="t('header.account')"
+                  class="rounded hover:bg-primaryDark focus-visible:bg-primaryDark"
                  svg="user"
                />
              </template>
              <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()" />
@@ -110,18 +105,20 @@
 </template>

 <script setup lang="ts">
-import { onMounted, ref, useContext } from "@nuxtjs/composition-api"
+import { onMounted, ref } from "@nuxtjs/composition-api"
 import intializePwa from "~/helpers/pwa"
 import { probableUser$ } from "~/helpers/fb/auth"
 import { getLocalConfig, setLocalConfig } from "~/newstore/localpersistence"
-import { useReadonlyStream } from "~/helpers/utils/composables"
+import {
+  useReadonlyStream,
+  useI18n,
+  useToast,
+} from "~/helpers/utils/composables"
 import { defineActionHandler } from "~/helpers/actions"

-const {
-  $toast,
-  app: { i18n },
-} = useContext()
-const t = i18n.t.bind(i18n)
+const t = useI18n()
+
+const toast = useToast()

 /**
 * Once the PWA code is initialized, this holds a method
@@ -160,12 +157,11 @@ onMounted(() => {

  const cookiesAllowed = getLocalConfig("cookiesAllowed") === "yes"
  if (!cookiesAllowed) {
-    $toast.show(t("app.we_use_cookies").toString(), {
-      icon: "cookie",
+    toast.show(`${t("app.we_use_cookies")}`, {
      duration: 0,
      action: [
        {
-          text: t("action.learn_more").toString(),
+          text: `${t("action.learn_more")}`,
          onClick: (_, toastObject) => {
            setLocalConfig("cookiesAllowed", "yes")
            toastObject.goAway(0)
@@ -173,7 +169,7 @@ onMounted(() => {
          },
        },
        {
-          text: t("action.dismiss").toString(),
+          text: `${t("action.dismiss")}`,
          onClick: (_, toastObject) => {
            setLocalConfig("cookiesAllowed", "yes")
            toastObject.goAway(0)
--- a/packages/hoppscotch-app/components/app/Interceptor.vue
+++ b/packages/hoppscotch-app/components/app/Interceptor.vue
@@ -1,20 +1,20 @@
 <template>
-  <div class="flex p-4 space-y-4 items-start flex-col">
+  <div class="flex flex-col space-y-4 p-4 items-start">
    <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,6 +25,9 @@ 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")
--- a/packages/hoppscotch-app/components/app/PowerSearch.vue
+++ b/packages/hoppscotch-app/components/app/PowerSearch.vue
@@ -13,14 +13,8 @@
        type="text"
        autocomplete="off"
        name="command"
-        :placeholder="`${$t('app.type_a_command_search')}`"
-        class="
-          bg-transparent
-          border-b border-dividerLight
-          flex flex-shrink-0
-          text-secondaryDark text-base
-          p-6
-        "
+        :placeholder="`${t('app.type_a_command_search')}`"
+        class="bg-transparent border-b border-dividerLight flex flex-shrink-0 text-base text-secondaryDark p-6"
      />
      <AppFuse
        v-if="search && show"
@@ -30,14 +24,7 @@
      />
      <div
        v-else
-        class="
-          divide-y divide-dividerLight
-          flex flex-col
-          space-y-4
-          flex-1
-          overflow-auto
-          hide-scrollbar
-        "
+        class="divide-dividerLight divide-y flex flex-col space-y-4 flex-1 overflow-auto hide-scrollbar"
      >
        <div
          v-for="(map, mapIndex) in mappings"
@@ -45,7 +32,7 @@
          class="flex flex-col"
        >
          <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"
@@ -66,6 +53,9 @@ 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
--- a/packages/hoppscotch-app/components/app/PowerSearchEntry.vue
+++ b/packages/hoppscotch-app/components/app/PowerSearchEntry.vue
@@ -1,15 +1,6 @@
 <template>
  <button
-    class="
-      cursor-pointer
-      flex flex-1
-      py-2
-      px-6
-      transition
-      items-center
-      search-entry
-      focus:outline-none
-    "
+    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)"
@@ -21,10 +12,10 @@
      :name="shortcut.icon"
    />
    <span
-      class="flex flex-1 mr-4 font-medium transition"
+      class="flex font-medium flex-1 mr-4 transition"
      :class="{ 'text-secondaryDark': active }"
    >
-      {{ $t(shortcut.label) }}
+      {{ t(shortcut.label) }}
    </span>
    <span
      v-for="(key, keyIndex) in shortcut.keys"
@@ -37,6 +28,10 @@
 </template>

 <script setup lang="ts">
+import { useI18n } from "~/helpers/utils/composables"
+
+const t = useI18n()
+
 defineProps<{
  shortcut: Object
  active: Boolean
--- a/packages/hoppscotch-app/components/app/Share.vue
+++ b/packages/hoppscotch-app/components/app/Share.vue
@@ -1,12 +1,12 @@
 <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 mb-8 px-2">
-        {{ $t("app.invite_description") }}
+        {{ t("app.invite_description") }}
      </p>
      <div class="flex flex-col space-y-2 px-2">
        <div class="grid gap-4 grid-cols-3">
@@ -25,7 +25,7 @@
          <button class="share-link" @click="copyAppLink">
            <SmartIcon class="h-6 text-xl w-6" :name="copyIcon" />
            <span class="mt-3">
-              {{ $t("app.copy") }}
+              {{ t("app.copy") }}
            </span>
          </button>
        </div>
@@ -35,14 +35,13 @@
 </template>

 <script setup lang="ts">
-import { ref, useContext } from "@nuxtjs/composition-api"
+import { ref } from "@nuxtjs/composition-api"
 import { copyToClipboard } from "~/helpers/utils/clipboard"
+import { useI18n, useToast } from "~/helpers/utils/composables"

-const {
-  $toast,
-  app: { i18n },
-} = useContext()
-const t = i18n.t.bind(i18n)
+const t = useI18n()
+
+const toast = useToast()

 defineProps<{
  show: Boolean
@@ -92,9 +91,7 @@ const platforms = [
 const copyAppLink = () => {
  copyToClipboard(url)
  copyIcon.value = "check"
-  $toast.success(t("state.copied_to_clipboard").toString(), {
-    icon: "content_paste",
-  })
+  toast.success(`${t("state.copied_to_clipboard")}`)
  setTimeout(() => (copyIcon.value = "copy"), 1000)
 }

--- a/packages/hoppscotch-app/components/app/Shortcuts.vue
+++ b/packages/hoppscotch-app/components/app/Shortcuts.vue
@@ -2,21 +2,11 @@
  <AppSlideOver :show="show" @close="close()">
    <template #content>
      <div
-        class="
-          bg-primary
-          border-b border-dividerLight
-          flex
-          p-2
-          top-0
-          z-10
-          items-center
-          sticky
-          justify-between
-        "
+        class="bg-primary border-b border-dividerLight flex p-2 top-0 z-10 sticky items-center justify-between"
      >
-        <h3 class="ml-4 heading">{{ $t("app.shortcuts") }}</h3>
+        <h3 class="ml-4 heading">{{ t("app.shortcuts") }}</h3>
        <div class="flex">
-          <ButtonSecondary svg="x" class="rounded" @click.native="close()" />
+          <ButtonSecondary svg="x" @click.native="close()" />
        </div>
      </div>
      <div class="bg-primary border-b border-dividerLight">
@@ -25,28 +15,22 @@
            v-model="filterText"
            type="search"
            autocomplete="off"
-            class="
-              bg-primaryLight
-              border border-dividerLight
-              rounded
-              flex
-              w-full
-              py-2
-              px-4
-              focus-visible:border-divider
-            "
-            :placeholder="`${$t('action.search')}`"
+            class="bg-primaryLight border border-dividerLight rounded flex w-full py-2 px-4 focus-visible:border-divider"
+            :placeholder="`${t('action.search')}`"
          />
        </div>
      </div>
-      <div v-if="filterText">
+      <div
+        v-if="filterText"
+        class="divide-dividerLight divide-y flex flex-col flex-1 overflow-auto hide-scrollbar"
+      >
        <div
          v-for="(map, mapIndex) in searchResults"
          :key="`map-${mapIndex}`"
          class="space-y-4 py-4 px-6"
        >
          <h1 class="font-semibold text-secondaryDark">
-            {{ $t(map.item.section) }}
+            {{ t(map.item.section) }}
          </h1>
          <AppShortcutsEntry
            v-for="(shortcut, index) in map.item.shortcuts"
@@ -56,28 +40,17 @@
        </div>
        <div
          v-if="searchResults.length === 0"
-          class="
-            flex flex-col
-            text-secondaryLight
-            p-4
-            items-center
-            justify-center
-          "
+          class="flex flex-col text-secondaryLight p-4 items-center justify-center"
        >
          <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-y divide-dividerLight
-          flex flex-col flex-1
-          overflow-auto
-          hide-scrollbar
-        "
+        class="divide-dividerLight divide-y flex flex-col flex-1 overflow-auto hide-scrollbar"
      >
        <div
          v-for="(map, mapIndex) in mappings"
@@ -85,7 +58,7 @@
          class="space-y-4 py-4 px-6"
        >
          <h1 class="font-semibold text-secondaryDark">
-            {{ $t(map.section) }}
+            {{ t(map.section) }}
          </h1>
          <AppShortcutsEntry
            v-for="(shortcut, shortcutIndex) in map.shortcuts"
@@ -102,6 +75,9 @@
 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
--- a/packages/hoppscotch-app/components/app/ShortcutsEntry.vue
+++ b/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,6 +14,10 @@
 </template>

 <script setup lang="ts">
+import { useI18n } from "~/helpers/utils/composables"
+
+const t = useI18n()
+
 defineProps<{
  shortcut: Object
 }>()
--- a/packages/hoppscotch-app/components/app/Sidenav.vue
+++ b/packages/hoppscotch-app/components/app/Sidenav.vue
@@ -1,6 +1,6 @@
 <template>
  <aside class="flex h-full justify-between md:flex-col">
-    <nav class="flex flex-nowrap md:flex-col flex-1 md:flex-none">
+    <nav class="flex flex-nowrap flex-1 md:flex-col md:flex-none">
      <NuxtLink
        v-for="(navigation, index) in primaryNavigation"
        :key="`navigation-${index}`"
@@ -27,14 +27,11 @@
 </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 {
-  app: { i18n },
-} = useContext()
-const t = i18n.t.bind(i18n)
+const t = useI18n()

 const windowInnerWidth = useWindowSize()
 const EXPAND_NAVIGATION = useSetting("EXPAND_NAVIGATION")
--- a/packages/hoppscotch-app/components/app/SlideOver.vue
+++ b/packages/hoppscotch-app/components/app/SlideOver.vue
@@ -10,22 +10,7 @@
      </div>
    </transition>
    <aside
-      class="
-        bg-primary
-        flex flex-col
-        h-full
-        max-w-full
-        transform
-        transition
-        top-0
-        ease-in-out
-        right-0
-        w-96
-        z-30
-        duration-300
-        fixed
-        overflow-auto
-      "
+      class="bg-primary 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>
--- a/packages/hoppscotch-app/components/app/Support.vue
+++ b/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')"
-          :description="$t('support.shortcuts')"
+          :label="t('app.keyboard_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')"
-          :description="$t('support.chat')"
+          :label="t('app.chat_with_us')"
+          :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,6 +71,9 @@
 <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
@@ -87,6 +90,7 @@ const chatWithUs = () => {

 const showShortcuts = () => {
  invokeAction("flyouts.keybinds.toggle")
+  hideModal()
 }

 const hideModal = () => {
--- a/packages/hoppscotch-app/components/button/Primary.vue
+++ b/packages/hoppscotch-app/components/button/Primary.vue
@@ -3,16 +3,7 @@
    :to="`${/^\/(?!\/).*$/.test(to) ? localePath(to) : to}`"
    :exact="exact"
    :blank="blank"
-    class="
-      font-bold
-      py-2
-      transition
-      inline-flex
-      items-center
-      justify-center
-      focus:outline-none
-      focus-visible:bg-accentDark
-    "
+    class="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)`
--- a/packages/hoppscotch-app/components/button/Secondary.vue
+++ b/packages/hoppscotch-app/components/button/Secondary.vue
@@ -3,22 +3,12 @@
    :to="`${/^\/(?!\/).*$/.test(to) ? localePath(to) : to}`"
    :exact="exact"
    :blank="blank"
-    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="font-semibold py-2 transition inline-flex items-center justify-center whitespace-nowrap focus:outline-none"
    :class="[
      color
-        ? `text-${color}-500 hover:(text-${color}-600 text-${color}-600)`
+        ? `text-${color}-500 hover:text-${color}-600 focus-visible:text-${color}-600`
        : 'text-secondary hover:text-secondaryDark focus-visible:text-secondaryDark',
+      { 'pointer-events-none': loading },
      label ? 'rounded px-4' : 'px-2',
      { 'rounded-full': rounded },
      { 'opacity-75 cursor-not-allowed': disabled },
@@ -28,46 +18,50 @@
        'border border-divider hover:border-dividerDark focus-visible:border-dividerDark':
          outline,
      },
-      { '!bg-primaryDark': filled },
+      {
+        'bg-primaryLight hover:bg-primaryDark focus-visible:bg-primaryDark':
+          filled,
+      },
    ]"
    :disabled="disabled"
+    :tabindex="loading ? '-1' : '0'"
  >
-    <i
-      v-if="icon"
-      class="material-icons"
-      :class="[
-        { '!text-2xl': large },
-        label ? (reverse ? 'ml-2' : 'mr-2') : '',
-      ]"
+    <span
+      v-if="!loading"
+      class="inline-flex items-center justify-center whitespace-nowrap"
+      :class="{ 'flex-row-reverse': reverse }"
    >
-      {{ icon }}
-    </i>
-    <SmartIcon
-      v-if="svg"
-      :name="svg"
-      class="svg-icons"
-      :class="[
-        { '!h-6 !w-6': large },
-        label ? (reverse ? 'ml-2' : 'mr-2') : '',
-      ]"
-    />
-    {{ label }}
-    <div v-if="shortcut.length" class="ml-2">
-      <kbd
-        v-for="(key, index) in shortcut"
-        :key="`key-${index}`"
-        class="
-          bg-dividerLight
-          rounded
-          text-secondaryLight
-          ml-1
-          px-1
-          inline-flex
-        "
+      <i
+        v-if="icon"
+        class="material-icons"
+        :class="[
+          { '!text-2xl': large },
+          label ? (reverse ? 'ml-2' : 'mr-2') : '',
+        ]"
      >
-        {{ key }}
-      </kbd>
-    </div>
+        {{ icon }}
+      </i>
+      <SmartIcon
+        v-if="svg"
+        :name="svg"
+        class="svg-icons"
+        :class="[
+          { '!h-6 !w-6': large },
+          label ? (reverse ? 'ml-2' : 'mr-2') : '',
+        ]"
+      />
+      {{ label }}
+      <div v-if="shortcut.length" class="ml-2">
+        <kbd
+          v-for="(key, index) in shortcut"
+          :key="`key-${index}`"
+          class="bg-dividerLight rounded text-secondaryLight ml-1 px-1 inline-flex"
+        >
+          {{ key }}
+        </kbd>
+      </div>
+    </span>
+    <SmartSpinner v-else />
  </SmartLink>
 </template>

@@ -108,6 +102,10 @@ export default defineComponent({
      type: Boolean,
      default: false,
    },
+    loading: {
+      type: Boolean,
+      default: false,
+    },
    reverse: {
      type: Boolean,
      default: false,
--- a/packages/hoppscotch-app/components/collections/Add.vue
+++ b/packages/hoppscotch-app/components/collections/Add.vue
@@ -47,9 +47,7 @@ export default defineComponent({
  methods: {
    addNewCollection() {
      if (!this.name) {
-        this.$toast.error(this.$t("collection.invalid_name"), {
-          icon: "error_outline",
-        })
+        this.$toast.error(this.$t("collection.invalid_name"))
        return
      }
      this.$emit("submit", this.name)
--- a/packages/hoppscotch-app/components/collections/AddFolder.vue
+++ b/packages/hoppscotch-app/components/collections/AddFolder.vue
@@ -51,9 +51,7 @@ export default defineComponent({
  methods: {
    addFolder() {
      if (!this.name) {
-        this.$toast.error(this.$t("folder.invalid_name"), {
-          icon: "error_outline",
-        })
+        this.$toast.error(this.$t("folder.invalid_name"))
        return
      }
      this.$emit("add-folder", {
--- a/packages/hoppscotch-app/components/collections/ChooseType.vue
+++ b/packages/hoppscotch-app/components/collections/ChooseType.vue
@@ -18,18 +18,7 @@
              type="text"
              autocomplete="off"
              autofocus
-              class="
-                bg-transparent
-                border-t border-dividerLight
-                cursor-pointer
-                flex
-                font-semibold
-                w-full
-                py-2
-                px-4
-                appearance-none
-                hover:bg-primaryDark
-              "
+              class="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
--- a/packages/hoppscotch-app/components/collections/Edit.vue
+++ b/packages/hoppscotch-app/components/collections/Edit.vue
@@ -38,19 +38,22 @@ import { defineComponent } from "@nuxtjs/composition-api"
 export default defineComponent({
  props: {
    show: Boolean,
-    placeholderCollName: { type: String, default: null },
+    editingCollectionName: { type: String, default: null },
  },
  data() {
    return {
      name: null,
    }
  },
+  watch: {
+    editingCollectionName(val) {
+      this.name = val
+    },
+  },
  methods: {
    saveCollection() {
      if (!this.name) {
-        this.$toast.error(this.$t("collection.invalid_name"), {
-          icon: "error_outline",
-        })
+        this.$toast.error(this.$t("collection.invalid_name"))
        return
      }
      this.$emit("submit", this.name)
--- a/packages/hoppscotch-app/components/collections/EditFolder.vue
+++ b/packages/hoppscotch-app/components/collections/EditFolder.vue
@@ -39,18 +39,22 @@ import { defineComponent } from "@nuxtjs/composition-api"
 export default defineComponent({
  props: {
    show: Boolean,
+    editingFolderName: { type: String, default: null },
  },
  data() {
    return {
      name: null,
    }
  },
+  watch: {
+    editingFolderName(val) {
+      this.name = val
+    },
+  },
  methods: {
    editFolder() {
      if (!this.name) {
-        this.$toast.error(this.$t("folder.invalid_name"), {
-          icon: "error_outline",
-        })
+        this.$toast.error(this.$t("folder.invalid_name"))
        return
      }
      this.$emit("submit", this.name)
--- a/packages/hoppscotch-app/components/collections/EditRequest.vue
+++ b/packages/hoppscotch-app/components/collections/EditRequest.vue
@@ -35,7 +35,7 @@ import { defineComponent } from "@nuxtjs/composition-api"
 export default defineComponent({
  props: {
    show: Boolean,
-    placeholderReqName: { type: String, default: null },
+    editingRequestName: { type: String, default: null },
  },
  data() {
    return {
@@ -44,12 +44,15 @@ export default defineComponent({
      },
    }
  },
+  watch: {
+    editingRequestName(val) {
+      this.requestUpdateData.name = val
+    },
+  },
  methods: {
    saveRequest() {
      if (!this.requestUpdateData.name) {
-        this.$toast.error(this.$t("request.invalid_name"), {
-          icon: "error_outline",
-        })
+        this.$toast.error(this.$t("request.invalid_name"))
        return
      }
      this.$emit("submit", this.requestUpdateData)
--- a/packages/hoppscotch-app/components/collections/ImportExport.vue
+++ b/packages/hoppscotch-app/components/collections/ImportExport.vue
@@ -10,7 +10,6 @@
        v-if="mode == 'import_from_my_collections'"
        v-tippy="{ theme: 'tooltip' }"
        :title="$t('action.go_back')"
-        class="rounded"
        svg="arrow-left"
        @click.native="
          () => {
@@ -34,7 +33,6 @@
            <ButtonSecondary
              v-tippy="{ theme: 'tooltip' }"
              :title="$t('action.more')"
-              class="rounded"
              svg="more-vertical"
            />
          </template>
@@ -229,15 +227,11 @@ export default defineComponent({
          }
        )
        .then((res) => {
-          this.$toast.success(this.$t("export.gist_created"), {
-            icon: "done",
-          })
+          this.$toast.success(this.$t("export.gist_created"))
          window.open(res.html_url)
        })
        .catch((e) => {
-          this.$toast.error(this.$t("error.something_went_wrong"), {
-            icon: "error_outline",
-          })
+          this.$toast.error(this.$t("error.something_went_wrong"))
          console.error(e)
        })
    },
@@ -415,23 +409,17 @@ 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"), {
-        icon: "downloading",
-      })
+      this.$toast.success(this.$t("state.download_started"))
      setTimeout(() => {
        document.body.removeChild(a)
        URL.revokeObjectURL(url)
      }, 1000)
    },
    fileImported() {
-      this.$toast.success(this.$t("state.file_imported"), {
-        icon: "folder_shared",
-      })
+      this.$toast.success(this.$t("state.file_imported"))
    },
    failedImport() {
-      this.$toast.error(this.$t("import.failed"), {
-        icon: "error_outline",
-      })
+      this.$toast.error(this.$t("import.failed"))
    },
    parsePostmanCollection({ info, name, item }) {
      const hoppscotchCollection = {
--- a/packages/hoppscotch-app/components/collections/SaveRequest.vue
+++ b/packages/hoppscotch-app/components/collections/SaveRequest.vue
@@ -1,7 +1,7 @@
 <template>
  <SmartModal
    v-if="show"
-    :title="`${$t('collection.save_as')}`"
+    :title="`${t('collection.save_as')}`"
    @close="hideModal"
  >
    <template #body>
@@ -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,8 +58,9 @@
 </template>

 <script setup lang="ts">
-import { reactive, ref, useContext, watch } from "@nuxtjs/composition-api"
-import { isHoppRESTRequest } from "~/helpers/types/HoppRESTRequest"
+import { reactive, ref, watch } from "@nuxtjs/composition-api"
+import { HoppGQLRequest, isHoppRESTRequest } from "@hoppscotch/data"
+import cloneDeep from "lodash/cloneDeep"
 import {
  editGraphqlRequest,
  editRESTRequest,
@@ -74,7 +75,9 @@ import {
 } from "~/newstore/RESTSession"
 import * as teamUtils from "~/helpers/teams/utils"
 import { apolloClient } from "~/helpers/apollo"
-import { HoppGQLRequest } from "~/helpers/types/HoppGQLRequest"
+import { useI18n, useToast } from "~/helpers/utils/composables"
+
+const t = useI18n()

 type CollectionType =
  | {
@@ -137,12 +140,7 @@ const emit = defineEmits<{
  (e: "hide-modal"): void
 }>()

-const {
-  $toast,
-  app: { i18n },
-} = useContext()
-
-const t = i18n.t.bind(i18n)
+const toast = useToast()

 // TODO: Use a better implementation with computed ?
 // This implementation can't work across updates to mode prop (which won't happen tho)
@@ -194,20 +192,20 @@ const hideModal = () => {

 const saveRequestAs = async () => {
  if (!requestName.value) {
-    $toast.error(`${t("error.empty_req_name")}`, {
-      icon: "error_outline",
-    })
+    toast.error(`${t("error.empty_req_name")}`)
    return
  }
  if (picked.value === null) {
-    $toast.error(`${t("collection.select")}`, {
-      icon: "error_outline",
-    })
+    toast.error(`${t("collection.select")}`)
    return
  }

+  // Clone Deep because objects are shared by reference so updating
+  // just one bit will update other referenced shared instances
  const requestUpdated =
-    props.mode === "rest" ? getRESTRequest() : getGQLSession().request
+    props.mode === "rest"
+      ? cloneDeep(getRESTRequest())
+      : cloneDeep(getGQLSession().request)

  // // Filter out all REST file inputs
  // if (this.mode === "rest" && requestUpdated.bodyParams) {
@@ -283,9 +281,7 @@ const saveRequestAs = async () => {
        requestSaved()
      })
      .catch((error) => {
-        $toast.error(t("profile.no_permission").toString(), {
-          icon: "error_outline",
-        })
+        toast.error(`${t("profile.no_permission")}`)
        throw new Error(error)
      })

@@ -320,9 +316,7 @@ const saveRequestAs = async () => {

      requestSaved()
    } catch (error) {
-      $toast.error(t("profile.no_permission").toString(), {
-        icon: "error_outline",
-      })
+      toast.error(`${t("profile.no_permission")}`)
      console.error(error)
    }
  } else if (picked.value.pickedType === "teams-collection") {
@@ -352,9 +346,7 @@ const saveRequestAs = async () => {

      requestSaved()
    } catch (error) {
-      $toast.error(t("profile.no_permission").toString(), {
-        icon: "error_outline",
-      })
+      toast.error(`${t("profile.no_permission")}`)
      console.error(error)
    }
  } else if (picked.value.pickedType === "gql-my-request") {
@@ -386,9 +378,7 @@ const saveRequestAs = async () => {
 }

 const requestSaved = () => {
-  $toast.success(`${t("request.added")}`, {
-    icon: "post_add",
-  })
+  toast.success(`${t("request.added")}`)
  hideModal()
 }

--- a/packages/hoppscotch-app/components/collections/graphql/Add.vue
+++ b/packages/hoppscotch-app/components/collections/graphql/Add.vue
@@ -34,7 +34,7 @@

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

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

--- a/packages/hoppscotch-app/components/collections/graphql/Collection.vue
+++ b/packages/hoppscotch-app/components/collections/graphql/Collection.vue
@@ -1,16 +1,17 @@
 <template>
  <div class="flex flex-col" :class="[{ 'bg-primaryLight': dragging }]">
    <div
-      class="flex items-center group"
+      class="flex items-stretch group"
      @dragover.prevent
      @drop.prevent="dropEvent"
      @dragover="dragging = true"
      @drop="dragging = false"
      @dragleave="dragging = false"
      @dragend="dragging = false"
+      @contextmenu.prevent="$refs.options.tippy().show()"
    >
      <span
-        class="cursor-pointer flex px-4 justify-center items-center"
+        class="cursor-pointer flex px-4 items-center justify-center"
        @click="toggleShowChildren()"
      >
        <SmartIcon
@@ -20,15 +21,7 @@
        />
      </span>
      <span
-        class="
-          cursor-pointer
-          flex flex-1
-          min-w-0
-          py-2
-          pr-2
-          transition
-          group-hover:text-secondaryDark
-        "
+        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>
@@ -99,16 +92,7 @@
    </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="bg-dividerLight cursor-nsResize flex ml-5.5 transform transition w-1 hover:bg-dividerDark hover:scale-x-125"
        @click="toggleShowChildren()"
      ></div>
      <div class="flex flex-col flex-1 truncate">
@@ -149,25 +133,12 @@
          v-if="
            collection.folders.length === 0 && collection.requests.length === 0
          "
-          class="
-            flex flex-col
-            text-secondaryLight
-            p-4
-            items-center
-            justify-center
-          "
+          class="flex flex-col text-secondaryLight p-4 items-center justify-center"
        >
          <img
            :src="`/images/states/${$colorMode.value}/pack.svg`"
            loading="lazy"
-            class="
-              flex-col
-              mb-4
-              object-contain object-center
-              h-16
-              w-16
-              inline-flex
-            "
+            class="flex-col object-contain object-center h-16 mb-4 w-16 inline-flex"
            :alt="$t('empty.collection')"
          />
          <span class="text-center">
@@ -221,7 +192,7 @@ export default defineComponent({
    getCollectionIcon() {
      if (this.isSelected) return "check-circle"
      else if (!this.showChildren && !this.isFiltered) return "folder"
-      else if (this.showChildren || this.isFiltered) return "folder-minus"
+      else if (this.showChildren || this.isFiltered) return "folder-open"
      else return "folder"
    },
  },
@@ -251,9 +222,7 @@ export default defineComponent({
        this.$emit("select", { picked: null })
      }
      removeGraphqlCollection(this.collectionIndex)
-      this.$toast.success(`${this.$t("state.deleted")}`, {
-        icon: "delete",
-      })
+      this.$toast.success(`${this.$t("state.deleted")}`)
    },
    dropEvent({ dataTransfer }: any) {
      this.dragging = !this.dragging
--- a/packages/hoppscotch-app/components/collections/graphql/Edit.vue
+++ b/packages/hoppscotch-app/components/collections/graphql/Edit.vue
@@ -45,18 +45,22 @@ export default defineComponent({
    show: Boolean,
    editingCollection: { type: Object, default: () => {} },
    editingCollectionIndex: { type: Number, default: null },
+    editingCollectionName: { type: String, default: null },
  },
  data() {
    return {
      name: null as string | null,
    }
  },
+  watch: {
+    editingCollectionName(val) {
+      this.name = val
+    },
+  },
  methods: {
    saveCollection() {
      if (!this.name) {
-        this.$toast.error(`${this.$t("collection.invalid_name")}`, {
-          icon: "error_outline",
-        })
+        this.$toast.error(`${this.$t("collection.invalid_name")}`)
        return
      }
      const collectionUpdated = {
--- a/packages/hoppscotch-app/components/collections/graphql/EditFolder.vue
+++ b/packages/hoppscotch-app/components/collections/graphql/EditFolder.vue
@@ -45,18 +45,22 @@ export default defineComponent({
    show: Boolean,
    folder: { type: Object, default: () => {} },
    folderPath: { type: String, default: null },
+    editingFolderName: { type: String, default: null },
  },
  data() {
    return {
      name: "",
    }
  },
+  watch: {
+    editingFolderName(val) {
+      this.name = val
+    },
+  },
  methods: {
    editFolder() {
      if (!this.name) {
-        this.$toast.error(`${this.$t("collection.invalid_name")}`, {
-          icon: "error_outline",
-        })
+        this.$toast.error(`${this.$t("collection.invalid_name")}`)
        return
      }
      editGraphqlFolder(this.folderPath, {
--- a/packages/hoppscotch-app/components/collections/graphql/EditRequest.vue
+++ b/packages/hoppscotch-app/components/collections/graphql/EditRequest.vue
@@ -38,7 +38,7 @@

 <script lang="ts">
 import { defineComponent, PropType } from "@nuxtjs/composition-api"
-import { HoppGQLRequest } from "~/helpers/types/HoppGQLRequest"
+import { HoppGQLRequest } from "@hoppscotch/data"
 import { editGraphqlRequest } from "~/newstore/collections"

 export default defineComponent({
@@ -47,6 +47,7 @@ export default defineComponent({
    folderPath: { type: String, default: null },
    request: { type: Object as PropType<HoppGQLRequest>, default: () => {} },
    requestIndex: { type: Number, default: null },
+    editingRequestName: { type: String, default: null },
  },
  data() {
    return {
@@ -55,12 +56,15 @@ export default defineComponent({
      },
    }
  },
+  watch: {
+    editingRequestName(val) {
+      this.requestUpdateData.name = val
+    },
+  },
  methods: {
    saveRequest() {
      if (!this.requestUpdateData.name) {
-        this.$toast.error(`${this.$t("collection.invalid_name")}`, {
-          icon: "error_outline",
-        })
+        this.$toast.error(`${this.$t("collection.invalid_name")}`)
        return
      }
      const requestUpdated = {
--- a/packages/hoppscotch-app/components/collections/graphql/Folder.vue
+++ b/packages/hoppscotch-app/components/collections/graphql/Folder.vue
@@ -1,16 +1,17 @@
 <template>
  <div class="flex flex-col" :class="[{ 'bg-primaryLight': dragging }]">
    <div
-      class="flex items-center group"
+      class="flex items-stretch group"
      @dragover.prevent
      @drop.prevent="dropEvent"
      @dragover="dragging = true"
      @drop="dragging = false"
      @dragleave="dragging = false"
      @dragend="dragging = false"
+      @contextmenu.prevent="$refs.options.tippy().show()"
    >
      <span
-        class="cursor-pointer flex px-4 justify-center items-center"
+        class="cursor-pointer flex px-4 items-center justify-center"
        @click="toggleShowChildren()"
      >
        <SmartIcon
@@ -20,15 +21,7 @@
        />
      </span>
      <span
-        class="
-          cursor-pointer
-          flex flex-1
-          min-w-0
-          py-2
-          pr-2
-          transition
-          group-hover:text-secondaryDark
-        "
+        class="cursor-pointer flex flex-1 min-w-0 py-2 pr-2 transition group-hover:text-secondaryDark"
        @click="toggleShowChildren()"
      >
        <span class="truncate">
@@ -95,16 +88,7 @@
    </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="bg-dividerLight cursor-nsResize flex ml-5.5 transform transition w-1 hover:bg-dividerDark hover:scale-x-125"
        @click="toggleShowChildren()"
      ></div>
      <div class="flex flex-col flex-1 truncate">
@@ -148,25 +132,12 @@
            folder.requests &&
            folder.requests.length === 0
          "
-          class="
-            flex flex-col
-            text-secondaryLight
-            p-4
-            items-center
-            justify-center
-          "
+          class="flex flex-col text-secondaryLight p-4 items-center justify-center"
        >
          <img
            :src="`/images/states/${$colorMode.value}/pack.svg`"
            loading="lazy"
-            class="
-              flex-col
-              mb-4
-              object-contain object-center
-              h-16
-              w-16
-              inline-flex
-            "
+            class="flex-col object-contain object-center h-16 mb-4 w-16 inline-flex"
            :alt="$t('empty.folder')"
          />
          <span class="text-center">
@@ -219,7 +190,7 @@ export default defineComponent({
    getCollectionIcon() {
      if (this.isSelected) return "check-circle"
      else if (!this.showChildren && !this.isFiltered) return "folder"
-      else if (this.showChildren || this.isFiltered) return "folder-minus"
+      else if (this.showChildren || this.isFiltered) return "folder-open"
      else return "folder"
    },
  },
@@ -250,9 +221,7 @@ export default defineComponent({
      }

      removeGraphqlFolder(this.folderPath)
-      this.$toast.success(`${this.$t("state.deleted")}`, {
-        icon: "delete",
-      })
+      this.$toast.success(`${this.$t("state.deleted")}`)
    },
    dropEvent({ dataTransfer }: any) {
      this.dragging = !this.dragging
--- a/packages/hoppscotch-app/components/collections/graphql/ImportExport.vue
+++ b/packages/hoppscotch-app/components/collections/graphql/ImportExport.vue
@@ -12,7 +12,6 @@
            <ButtonSecondary
              v-tippy="{ theme: 'tooltip' }"
              :title="$t('action.more')"
-              class="rounded"
              svg="more-vertical"
            />
          </template>
@@ -140,15 +139,11 @@ export default defineComponent({
          }
        )
        .then((res) => {
-          this.$toast.success(this.$t("export.gist_created"), {
-            icon: "done",
-          })
+          this.$toast.success(this.$t("export.gist_created"))
          window.open(res.html_url)
        })
        .catch((e) => {
-          this.$toast.error(this.$t("error.something_went_wrong"), {
-            icon: "error_outline",
-          })
+          this.$toast.error(this.$t("error.something_went_wrong"))
          console.error(e)
        })
    },
@@ -252,23 +247,17 @@ 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"), {
-        icon: "downloading",
-      })
+      this.$toast.success(this.$t("state.download_started"))
      setTimeout(() => {
        document.body.removeChild(a)
        URL.revokeObjectURL(url)
      }, 1000)
    },
    fileImported() {
-      this.$toast.success(this.$t("state.file_imported"), {
-        icon: "folder_shared",
-      })
+      this.$toast.success(this.$t("state.file_imported"))
    },
    failedImport() {
-      this.$toast.error(this.$t("import.failed"), {
-        icon: "error_outline",
-      })
+      this.$toast.error(this.$t("import.failed"))
    },
    parsePostmanCollection({ info, name, item }) {
      const hoppscotchCollection = {
--- a/packages/hoppscotch-app/components/collections/graphql/Request.vue
+++ b/packages/hoppscotch-app/components/collections/graphql/Request.vue
@@ -1,23 +1,16 @@
 <template>
  <div class="flex flex-col" :class="[{ 'bg-primaryLight': dragging }]">
    <div
-      class="flex items-center group"
+      class="flex items-stretch group"
      draggable="true"
      @dragstart="dragStart"
      @dragover.stop
      @dragleave="dragging = false"
      @dragend="dragging = false"
+      @contextmenu.prevent="$refs.options.tippy().show()"
    >
      <span
-        class="
-          cursor-pointer
-          flex
-          px-2
-          w-16
-          justify-center
-          items-center
-          truncate
-        "
+        class="cursor-pointer flex px-2 w-16 items-center justify-center truncate"
        @click="!doc ? selectRequest() : {}"
      >
        <SmartIcon
@@ -27,15 +20,7 @@
        />
      </span>
      <span
-        class="
-          cursor-pointer
-          flex flex-1
-          min-w-0
-          py-2
-          pr-2
-          transition
-          group-hover:text-secondaryDark
-        "
+        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>
@@ -118,7 +103,7 @@

 <script lang="ts">
 import { defineComponent, PropType } from "@nuxtjs/composition-api"
-import { HoppGQLRequest, makeGQLRequest } from "~/helpers/types/HoppGQLRequest"
+import { HoppGQLRequest, makeGQLRequest } from "@hoppscotch/data"
 import { removeGraphqlRequest } from "~/newstore/collections"
 import { setGQLSession } from "~/newstore/GQLSession"

@@ -194,9 +179,7 @@ export default defineComponent({
      }

      removeGraphqlRequest(this.folderPath, this.requestIndex)
-      this.$toast.success(`${this.$t("state.deleted")}`, {
-        icon: "delete",
-      })
+      this.$toast.success(`${this.$t("state.deleted")}`)
    },
  },
 })
--- a/packages/hoppscotch-app/components/collections/graphql/index.vue
+++ b/packages/hoppscotch-app/components/collections/graphql/index.vue
@@ -4,14 +4,7 @@
    :class="{ 'rounded border border-divider': savingMode }"
  >
    <div
-      class="
-        divide-y divide-dividerLight
-        border-b border-dividerLight
-        flex flex-col
-        top-0
-        z-10
-        sticky
-      "
+      class="divide-dividerLight divide-y border-b border-dividerLight flex flex-col top-0 z-10 sticky"
      :class="{ 'bg-primary': !savingMode }"
    >
      <input
@@ -74,7 +67,7 @@
      <img
        :src="`/images/states/${$colorMode.value}/pack.svg`"
        loading="lazy"
-        class="flex-col my-4 object-contain object-center h-16 w-16 inline-flex"
+        class="flex-col object-contain object-center h-16 my-4 w-16 inline-flex"
        :alt="$t('empty.collections')"
      />
      <span class="text-center pb-4">
@@ -103,6 +96,7 @@
      :show="showModalEdit"
      :editing-collection="editingCollection"
      :editing-collection-index="editingCollectionIndex"
+      :editing-collection-name="editingCollection ? editingCollection.name : ''"
      @hide-modal="displayModalEdit(false)"
    />
    <CollectionsGraphqlAddFolder
@@ -117,6 +111,7 @@
      :folder="editingFolder"
      :folder-index="editingFolderIndex"
      :folder-path="editingFolderPath"
+      :editing-folder-name="editingFolder ? editingFolder.name : ''"
      @hide-modal="displayModalEditFolder(false)"
    />
    <CollectionsGraphqlEditRequest
@@ -124,6 +119,7 @@
      :folder-path="editingFolderPath"
      :request="editingRequest"
      :request-index="editingRequestIndex"
+      :editing-request-name="editingRequest ? editingRequest.name : ''"
      @hide-modal="displayModalEditRequest(false)"
    />
    <CollectionsGraphqlImportExport
--- a/packages/hoppscotch-app/components/collections/index.vue
+++ b/packages/hoppscotch-app/components/collections/index.vue
@@ -4,16 +4,8 @@
    :class="{ 'rounded border border-divider': saveRequest }"
  >
    <div
-      class="
-        divide-y divide-dividerLight
-        bg-primary
-        border-b border-dividerLight
-        rounded-t
-        flex flex-col
-        top-0
-        z-10
-        sticky
-      "
+      class="divide-dividerLight divide-y bg-primary border-b border-dividerLight rounded-t flex flex-col z-10 sticky"
+      :style="saveRequest ? 'top: calc(-1 * var(--body-font-size))' : 'top: 0'"
    >
      <div v-if="!saveRequest" class="search-wrappe">
        <input
@@ -112,7 +104,7 @@
      <img
        :src="`/images/states/${$colorMode.value}/pack.svg`"
        loading="lazy"
-        class="flex-col my-4 object-contain object-center h-16 w-16 inline-flex"
+        class="flex-col object-contain object-center h-16 my-4 w-16 inline-flex"
        :alt="$t('empty.collections')"
      />
      <span class="text-center pb-4">
@@ -154,8 +146,11 @@
    />
    <CollectionsEdit
      :show="showModalEdit"
-      :editing-coll-name="editingCollection ? editingCollection.name : ''"
-      :placeholder-coll-name="editingCollection ? editingCollection.name : ''"
+      :editing-collection-name="
+        editingCollection
+          ? editingCollection.name || editingCollection.title
+          : ''
+      "
      @hide-modal="displayModalEdit(false)"
      @submit="updateEditingCollection"
    />
@@ -168,12 +163,15 @@
    />
    <CollectionsEditFolder
      :show="showModalEditFolder"
+      :editing-folder-name="
+        editingFolder ? editingFolder.name || editingFolder.title : ''
+      "
      @submit="updateEditingFolder"
      @hide-modal="displayModalEditFolder(false)"
    />
    <CollectionsEditRequest
      :show="showModalEditRequest"
-      :placeholder-req-name="editingRequest ? editingRequest.name : ''"
+      :editing-request-name="editingRequest ? editingRequest.name : ''"
      @submit="updateEditingRequest"
      @hide-modal="displayModalEditRequest(false)"
    />
@@ -361,14 +359,10 @@ export default defineComponent({
            this.collectionsType.selectedTeam.id
          )
          .then(() => {
-            this.$toast.success(this.$t("collection.created"), {
-              icon: "done",
-            })
+            this.$toast.success(this.$t("collection.created"))
          })
          .catch((e) => {
-            this.$toast.error(this.$t("error.something_went_wrong"), {
-              icon: "error_outline",
-            })
+            this.$toast.error(this.$t("error.something_went_wrong"))
            console.error(e)
          })
      }
@@ -377,9 +371,7 @@ export default defineComponent({
    // Intented to be called by CollectionEdit modal submit event
    updateEditingCollection(newName) {
      if (!newName) {
-        this.$toast.error(this.$t("collection.invalid_name"), {
-          icon: "error_outline",
-        })
+        this.$toast.error(this.$t("collection.invalid_name"))
        return
      }
      if (this.collectionsType.type === "my-collections") {
@@ -396,14 +388,10 @@ export default defineComponent({
        teamUtils
          .renameCollection(this.$apollo, newName, this.editingCollection.id)
          .then(() => {
-            this.$toast.success(this.$t("collection.renamed"), {
-              icon: "done",
-            })
+            this.$toast.success(this.$t("collection.renamed"))
          })
          .catch((e) => {
-            this.$toast.error(this.$t("error.something_went_wrong"), {
-              icon: "error_outline",
-            })
+            this.$toast.error(this.$t("error.something_went_wrong"))
            console.error(e)
          })
      }
@@ -420,14 +408,10 @@ export default defineComponent({
        teamUtils
          .renameCollection(this.$apollo, name, this.editingFolder.id)
          .then(() => {
-            this.$toast.success(this.$t("folder.renamed"), {
-              icon: "done",
-            })
+            this.$toast.success(this.$t("folder.renamed"))
          })
          .catch((e) => {
-            this.$toast.error(this.$t("error.something_went_wrong"), {
-              icon: "error_outline",
-            })
+            this.$toast.error(this.$t("error.something_went_wrong"))
            console.error(e)
          })
      }
@@ -460,15 +444,11 @@ export default defineComponent({
            this.editingRequestIndex
          )
          .then(() => {
-            this.$toast.success(this.$t("request.renamed"), {
-              icon: "done",
-            })
+            this.$toast.success(this.$t("request.renamed"))
            this.$emit("update-team-collections")
          })
          .catch((e) => {
-            this.$toast.error(this.$t("error.something_went_wrong"), {
-              icon: "error_outline",
-            })
+            this.$toast.error(this.$t("error.something_went_wrong"))
            console.error(e)
          })
      }
@@ -533,15 +513,11 @@ export default defineComponent({
              },
            })
            .then(() => {
-              this.$toast.success(this.$t("folder.created"), {
-                icon: "done",
-              })
+              this.$toast.success(this.$t("folder.created"))
              this.$emit("update-team-collections")
            })
            .catch((e) => {
-              this.$toast.error(this.$t("error.something_went_wrong"), {
-                icon: "error_outline",
-              })
+              this.$toast.error(this.$t("error.something_went_wrong"))
              console.error(e)
            })
        }
@@ -605,9 +581,7 @@ export default defineComponent({
        }

        removeRESTCollection(collectionIndex)
-        this.$toast.success(this.$t("state.deleted"), {
-          icon: "delete",
-        })
+        this.$toast.success(this.$t("state.deleted"))
      } else if (collectionsType.type === "team-collections") {
        // Cancel pick if picked collection is deleted
        if (
@@ -633,14 +607,10 @@ export default defineComponent({
              },
            })
            .then(() => {
-              this.$toast.success(this.$t("state.deleted"), {
-                icon: "delete",
-              })
+              this.$toast.success(this.$t("state.deleted"))
            })
            .catch((e) => {
-              this.$toast.error(this.$t("error.something_went_wrong"), {
-                icon: "error_outline",
-              })
+              this.$toast.error(this.$t("error.something_went_wrong"))
              console.error(e)
            })
        }
@@ -658,9 +628,7 @@ export default defineComponent({
          this.$emit("select", { picked: null })
        }
        removeRESTRequest(folderPath, requestIndex)
-        this.$toast.success(this.$t("state.deleted"), {
-          icon: "delete",
-        })
+        this.$toast.success(this.$t("state.deleted"))
      } else if (this.collectionsType.type === "team-collections") {
        // Cancel pick if the picked item is being deleted
        if (
@@ -674,14 +642,10 @@ export default defineComponent({
        teamUtils
          .deleteRequest(this.$apollo, requestIndex)
          .then(() => {
-            this.$toast.success(this.$t("state.deleted"), {
-              icon: "delete",
-            })
+            this.$toast.success(this.$t("state.deleted"))
          })
          .catch((e) => {
-            this.$toast.error(this.$t("error.something_went_wrong"), {
-              icon: "error_outline",
-            })
+            this.$toast.error(this.$t("error.something_went_wrong"))
            console.error(e)
          })
      }
--- a/packages/hoppscotch-app/components/collections/my/Collection.vue
+++ b/packages/hoppscotch-app/components/collections/my/Collection.vue
@@ -1,16 +1,17 @@
 <template>
  <div class="flex flex-col" :class="[{ 'bg-primaryLight': dragging }]">
    <div
-      class="flex items-center group"
+      class="flex items-stretch group"
      @dragover.prevent
      @drop.prevent="dropEvent"
      @dragover="dragging = true"
      @drop="dragging = false"
      @dragleave="dragging = false"
      @dragend="dragging = false"
+      @contextmenu.prevent="$refs.options.tippy().show()"
    >
      <span
-        class="cursor-pointer flex px-4 justify-center items-center"
+        class="cursor-pointer flex px-4 items-center justify-center"
        @click="toggleShowChildren()"
      >
        <SmartIcon
@@ -20,15 +21,7 @@
        />
      </span>
      <span
-        class="
-          cursor-pointer
-          flex flex-1
-          min-w-0
-          py-2
-          pr-2
-          transition
-          group-hover:text-secondaryDark
-        "
+        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>
@@ -118,16 +111,7 @@
    </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="bg-dividerLight cursor-nsResize flex ml-5.5 transform transition w-1 hover:bg-dividerDark hover:scale-x-125"
        @click="toggleShowChildren()"
      ></div>
      <div class="flex flex-col flex-1 truncate">
@@ -175,25 +159,12 @@
            (collection.requests == undefined ||
              collection.requests.length === 0)
          "
-          class="
-            flex flex-col
-            text-secondaryLight
-            p-4
-            items-center
-            justify-center
-          "
+          class="flex flex-col text-secondaryLight p-4 items-center justify-center"
        >
          <img
            :src="`/images/states/${$colorMode.value}/pack.svg`"
            loading="lazy"
-            class="
-              flex-col
-              mb-4
-              object-contain object-center
-              h-16
-              w-16
-              inline-flex
-            "
+            class="flex-col object-contain object-center h-16 mb-4 w-16 inline-flex"
            :alt="$t('empty.collection')"
          />
          <span class="text-center">
@@ -248,7 +219,7 @@ export default defineComponent({
    getCollectionIcon() {
      if (this.isSelected) return "check-circle"
      else if (!this.showChildren && !this.isFiltered) return "folder"
-      else if (this.showChildren || this.isFiltered) return "folder-minus"
+      else if (this.showChildren || this.isFiltered) return "folder-open"
      else return "folder"
    },
  },
--- a/packages/hoppscotch-app/components/collections/my/Folder.vue
+++ b/packages/hoppscotch-app/components/collections/my/Folder.vue
@@ -1,16 +1,17 @@
 <template>
  <div class="flex flex-col" :class="[{ 'bg-primaryLight': dragging }]">
    <div
-      class="flex items-center group"
+      class="flex items-stretch group"
      @dragover.prevent
      @drop.prevent="dropEvent"
      @dragover="dragging = true"
      @drop="dragging = false"
      @dragleave="dragging = false"
      @dragend="dragging = false"
+      @contextmenu.prevent="$refs.options.tippy().show()"
    >
      <span
-        class="cursor-pointer flex px-4 justify-center items-center"
+        class="cursor-pointer flex px-4 items-center justify-center"
        @click="toggleShowChildren()"
      >
        <SmartIcon
@@ -20,15 +21,7 @@
        />
      </span>
      <span
-        class="
-          cursor-pointer
-          flex flex-1
-          min-w-0
-          py-2
-          pr-2
-          transition
-          group-hover:text-secondaryDark
-        "
+        class="cursor-pointer flex flex-1 min-w-0 py-2 pr-2 transition group-hover:text-secondaryDark"
        @click="toggleShowChildren()"
      >
        <span class="truncate">
@@ -100,16 +93,7 @@
    </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="bg-dividerLight cursor-nsResize flex ml-5.5 transform transition w-1 hover:bg-dividerDark hover:scale-x-125"
        @click="toggleShowChildren()"
      ></div>
      <div class="flex flex-col flex-1 truncate">
@@ -157,25 +141,12 @@
            folder.requests &&
            folder.requests.length === 0
          "
-          class="
-            flex flex-col
-            text-secondaryLight
-            p-4
-            items-center
-            justify-center
-          "
+          class="flex flex-col text-secondaryLight p-4 items-center justify-center"
        >
          <img
            :src="`/images/states/${$colorMode.value}/pack.svg`"
            loading="lazy"
-            class="
-              flex-col
-              mb-4
-              object-contain object-center
-              h-16
-              w-16
-              inline-flex
-            "
+            class="flex-col object-contain object-center h-16 mb-4 w-16 inline-flex"
            :alt="$t('empty.folder')"
          />
          <span class="text-center">
@@ -234,7 +205,7 @@ export default defineComponent({
    getCollectionIcon() {
      if (this.isSelected) return "check-circle"
      else if (!this.showChildren && !this.isFiltered) return "folder"
-      else if (this.showChildren || this.isFiltered) return "folder-minus"
+      else if (this.showChildren || this.isFiltered) return "folder-open"
      else return "folder"
    },
  },
@@ -262,9 +233,7 @@ export default defineComponent({
        this.$emit("select", { picked: null })
      }
      removeRESTFolder(this.folderPath)
-      this.$toast.success(this.$t("state.deleted"), {
-        icon: "delete",
-      })
+      this.$toast.success(this.$t("state.deleted"))
    },
    dropEvent({ dataTransfer }) {
      this.dragging = !this.dragging
--- a/packages/hoppscotch-app/components/collections/my/Request.vue
+++ b/packages/hoppscotch-app/components/collections/my/Request.vue
@@ -1,23 +1,16 @@
 <template>
  <div class="flex flex-col" :class="[{ 'bg-primaryLight': dragging }]">
    <div
-      class="flex items-center group"
+      class="flex items-stretch group"
      draggable="true"
      @dragstart="dragStart"
      @dragover.stop
      @dragleave="dragging = false"
      @dragend="dragging = false"
+      @contextmenu.prevent="$refs.options.tippy().show()"
    >
      <span
-        class="
-          cursor-pointer
-          flex
-          px-2
-          w-16
-          justify-center
-          items-center
-          truncate
-        "
+        class="cursor-pointer flex px-2 w-16 items-center justify-center truncate"
        :class="getRequestLabelColor(request.method)"
        @click="!doc ? selectRequest() : {}"
      >
@@ -32,16 +25,7 @@
        </span>
      </span>
      <span
-        class="
-          cursor-pointer
-          flex flex-1
-          min-w-0
-          py-2
-          pr-2
-          transition
-          items-center
-          group-hover:text-secondaryDark
-        "
+        class="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>
@@ -133,7 +117,7 @@

 <script>
 import { defineComponent } from "@nuxtjs/composition-api"
-import { translateToNewRequest } from "~/helpers/types/HoppRESTRequest"
+import { translateToNewRequest } from "@hoppscotch/data"
 import { useReadonlyStream } from "~/helpers/utils/composables"
 import {
  restSaveContext$,
--- a/packages/hoppscotch-app/components/collections/teams/Collection.vue
+++ b/packages/hoppscotch-app/components/collections/teams/Collection.vue
@@ -1,8 +1,11 @@
 <template>
  <div class="flex flex-col">
-    <div class="flex items-center group">
+    <div
+      class="flex items-stretch group"
+      @contextmenu.prevent="$refs.options.tippy().show()"
+    >
      <span
-        class="cursor-pointer flex px-4 justify-center items-center"
+        class="cursor-pointer flex px-4 items-center justify-center"
        @click="toggleShowChildren()"
      >
        <SmartIcon
@@ -12,15 +15,7 @@
        />
      </span>
      <span
-        class="
-          cursor-pointer
-          flex flex-1
-          min-w-0
-          py-2
-          pr-2
-          transition
-          group-hover:text-secondaryDark
-        "
+        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>
@@ -114,16 +109,7 @@
    </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="bg-dividerLight cursor-nsResize flex ml-5.5 transform transition w-1 hover:bg-dividerDark hover:scale-x-125"
        @click="toggleShowChildren()"
      ></div>
      <div class="flex flex-col flex-1 truncate">
@@ -169,25 +155,12 @@
            (collection.requests == undefined ||
              collection.requests.length === 0)
          "
-          class="
-            flex flex-col
-            text-secondaryLight
-            p-4
-            items-center
-            justify-center
-          "
+          class="flex flex-col text-secondaryLight p-4 items-center justify-center"
        >
          <img
            :src="`/images/states/${$colorMode.value}/pack.svg`"
            loading="lazy"
-            class="
-              flex-col
-              mb-4
-              object-contain object-center
-              h-16
-              w-16
-              inline-flex
-            "
+            class="flex-col object-contain object-center h-16 mb-4 w-16 inline-flex"
            :alt="$t('empty.collection')"
          />
          <span class="text-center">
@@ -240,7 +213,7 @@ export default defineComponent({
    getCollectionIcon() {
      if (this.isSelected) return "check-circle"
      else if (!this.showChildren && !this.isFiltered) return "folder"
-      else if (this.showChildren || this.isFiltered) return "folder-minus"
+      else if (this.showChildren || this.isFiltered) return "folder-open"
      else return "folder"
    },
  },
--- a/packages/hoppscotch-app/components/collections/teams/Folder.vue
+++ b/packages/hoppscotch-app/components/collections/teams/Folder.vue
@@ -1,8 +1,11 @@
 <template>
  <div class="flex flex-col">
-    <div class="flex items-center group">
+    <div
+      class="flex items-stretch group"
+      @contextmenu.prevent="$refs.options.tippy().show()"
+    >
      <span
-        class="cursor-pointer flex px-4 justify-center items-center"
+        class="cursor-pointer flex px-4 items-center justify-center"
        @click="toggleShowChildren()"
      >
        <SmartIcon
@@ -12,15 +15,7 @@
        />
      </span>
      <span
-        class="
-          cursor-pointer
-          flex flex-1
-          min-w-0
-          py-2
-          pr-2
-          transition
-          group-hover:text-secondaryDark
-        "
+        class="cursor-pointer flex flex-1 min-w-0 py-2 pr-2 transition group-hover:text-secondaryDark"
        @click="toggleShowChildren()"
      >
        <span class="truncate">
@@ -97,16 +92,7 @@
    </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="bg-dividerLight cursor-nsResize flex ml-5.5 transform transition w-1 hover:bg-dividerDark hover:scale-x-125"
        @click="toggleShowChildren()"
      ></div>
      <div class="flex flex-col flex-1 truncate">
@@ -150,25 +136,12 @@
            (folder.children == undefined || folder.children.length === 0) &&
            (folder.requests == undefined || folder.requests.length === 0)
          "
-          class="
-            flex flex-col
-            text-secondaryLight
-            p-4
-            items-center
-            justify-center
-          "
+          class="flex flex-col text-secondaryLight p-4 items-center justify-center"
        >
          <img
            :src="`/images/states/${$colorMode.value}/pack.svg`"
            loading="lazy"
-            class="
-              flex-col
-              mb-4
-              object-contain object-center
-              h-16
-              w-16
-              inline-flex
-            "
+            class="flex-col object-contain object-center h-16 mb-4 w-16 inline-flex"
            :alt="$t('empty.folder')"
          />
          <span class="text-center">
@@ -222,7 +195,7 @@ export default defineComponent({
    getCollectionIcon() {
      if (this.isSelected) return "check-circle"
      else if (!this.showChildren && !this.isFiltered) return "folder"
-      else if (this.showChildren || this.isFiltered) return "folder-minus"
+      else if (this.showChildren || this.isFiltered) return "folder-open"
      else return "folder"
    },
  },
@@ -253,15 +226,11 @@ export default defineComponent({
        teamUtils
          .deleteCollection(this.$apollo, this.folder.id)
          .then(() => {
-            this.$toast.success(this.$t("state.deleted"), {
-              icon: "delete",
-            })
+            this.$toast.success(this.$t("state.deleted"))
            this.$emit("update-team-collections")
          })
          .catch((e) => {
-            this.$toast.error(this.$t("error.something_went_wrong"), {
-              icon: "error_outline",
-            })
+            this.$toast.error(this.$t("error.something_went_wrong"))
            console.error(e)
          })
        this.$emit("update-team-collections")
--- a/packages/hoppscotch-app/components/collections/teams/Request.vue
+++ b/packages/hoppscotch-app/components/collections/teams/Request.vue
@@ -1,16 +1,11 @@
 <template>
  <div class="flex flex-col">
-    <div class="flex items-center group">
+    <div
+      class="flex items-stretch group"
+      @contextmenu.prevent="$refs.options.tippy().show()"
+    >
      <span
-        class="
-          cursor-pointer
-          flex
-          px-2
-          w-16
-          justify-center
-          items-center
-          truncate
-        "
+        class="cursor-pointer flex px-2 w-16 items-center justify-center truncate"
        :class="getRequestLabelColor(request.method)"
        @click="!doc ? selectRequest() : {}"
      >
@@ -25,16 +20,7 @@
        </span>
      </span>
      <span
-        class="
-          cursor-pointer
-          flex flex-1
-          min-w-0
-          py-2
-          pr-2
-          transition
-          items-center
-          group-hover:text-secondaryDark
-        "
+        class="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>
@@ -110,7 +96,7 @@

 <script lang="ts">
 import { defineComponent } from "@nuxtjs/composition-api"
-import { translateToNewRequest } from "~/helpers/types/HoppRESTRequest"
+import { translateToNewRequest } from "@hoppscotch/data"
 import { useReadonlyStream } from "~/helpers/utils/composables"
 import {
  restSaveContext$,
--- a/packages/hoppscotch-app/components/docs/Folder.vue
+++ b/packages/hoppscotch-app/components/docs/Folder.vue
@@ -1,7 +1,7 @@
 <template>
  <div class="folder">
    <h3 class="heading">
-      <SmartIcon name="folder-minus" class="svg-icons" />
+      <SmartIcon name="folder-open" class="svg-icons" />
      {{ folder.name || $t("state.none") }}
    </h3>
    <div
--- a/packages/hoppscotch-app/components/environments/Add.vue
+++ b/packages/hoppscotch-app/components/environments/Add.vue
@@ -52,9 +52,7 @@ export default defineComponent({
  methods: {
    addNewEnvironment() {
      if (!this.name) {
-        this.$toast.error(`${this.$t("environment.invalid_name")}`, {
-          icon: "error_outline",
-        })
+        this.$toast.error(`${this.$t("environment.invalid_name")}`)
        return
      }
      createEnvironment(this.name)
--- a/packages/hoppscotch-app/components/environments/Edit.vue
+++ b/packages/hoppscotch-app/components/environments/Edit.vue
@@ -22,7 +22,7 @@
            {{ $t("action.label") }}
          </label>
        </div>
-        <div class="flex flex-1 justify-between items-center">
+        <div class="flex flex-1 items-center justify-between">
          <label for="variableList" class="p-4">
            {{ $t("environment.variable_list") }}
          </label>
@@ -31,23 +31,21 @@
              v-tippy="{ theme: 'tooltip' }"
              :title="$t('action.clear_all')"
              :svg="clearIcon"
-              class="rounded"
              @click.native="clearContent()"
            />
            <ButtonSecondary
              v-tippy="{ theme: 'tooltip' }"
              svg="plus"
              :title="$t('add.new')"
-              class="rounded"
              @click.native="addEnvironmentVariable"
            />
          </div>
        </div>
-        <div class="divide-y divide-dividerLight border-divider border rounded">
+        <div class="divide-dividerLight divide-y border border-divider rounded">
          <div
            v-for="(variable, index) in vars"
            :key="`variable-${index}`"
-            class="divide-x divide-dividerLight flex"
+            class="divide-dividerLight divide-x flex"
          >
            <input
              v-model="variable.key"
@@ -74,25 +72,12 @@
          </div>
          <div
            v-if="vars.length === 0"
-            class="
-              flex flex-col
-              text-secondaryLight
-              p-4
-              items-center
-              justify-center
-            "
+            class="flex flex-col text-secondaryLight p-4 items-center justify-center"
          >
            <img
              :src="`/images/states/${$colorMode.value}/blockchain.svg`"
              loading="lazy"
-              class="
-                flex-col
-                my-4
-                object-contain object-center
-                h-16
-                w-16
-                inline-flex
-              "
+              class="flex-col object-contain object-center h-16 my-4 w-16 inline-flex"
              :alt="$t('empty.environments')"
            />
            <span class="text-center pb-4">
@@ -177,9 +162,7 @@ export default defineComponent({
    clearContent() {
      this.vars = []
      this.clearIcon = "check"
-      this.$toast.success(`${this.$t("state.cleared")}`, {
-        icon: "clear_all",
-      })
+      this.$toast.success(`${this.$t("state.cleared")}`)
      setTimeout(() => (this.clearIcon = "trash-2"), 1000)
    },
    addEnvironmentVariable() {
@@ -193,9 +176,7 @@ export default defineComponent({
    },
    saveEnvironment() {
      if (!this.name) {
-        this.$toast.error(`${this.$t("environment.invalid_name")}`, {
-          icon: "error_outline",
-        })
+        this.$toast.error(`${this.$t("environment.invalid_name")}`)
        return
      }

--- a/packages/hoppscotch-app/components/environments/Environment.vue
+++ b/packages/hoppscotch-app/components/environments/Environment.vue
@@ -1,21 +1,16 @@
 <template>
-  <div class="flex items-center group">
+  <div
+    class="flex items-stretch group"
+    @contextmenu.prevent="$refs.options.tippy().show()"
+  >
    <span
-      class="cursor-pointer flex px-4 justify-center items-center"
+      class="cursor-pointer flex px-4 items-center justify-center"
      @click="$emit('edit-environment')"
    >
      <SmartIcon class="svg-icons" name="layers" />
    </span>
    <span
-      class="
-        cursor-pointer
-        flex flex-1
-        min-w-0
-        py-2
-        pr-2
-        transition
-        group-hover:text-secondaryDark
-      "
+      class="cursor-pointer flex flex-1 min-w-0 py-2 pr-2 transition group-hover:text-secondaryDark"
      @click="$emit('edit-environment')"
    >
      <span class="truncate">
@@ -102,9 +97,7 @@ export default defineComponent({
    removeEnvironment() {
      if (this.environmentIndex !== "Global")
        deleteEnvironment(this.environmentIndex)
-      this.$toast.success(`${this.$t("state.deleted")}`, {
-        icon: "delete",
-      })
+      this.$toast.success(`${this.$t("state.deleted")}`)
    },
    duplicateEnvironment() {
      if (this.environmentIndex === "Global") {
--- a/packages/hoppscotch-app/components/environments/ImportExport.vue
+++ b/packages/hoppscotch-app/components/environments/ImportExport.vue
@@ -12,7 +12,6 @@
            <ButtonSecondary
              v-tippy="{ theme: 'tooltip' }"
              :title="$t('action.more')"
-              class="rounded"
              svg="more-vertical"
            />
          </template>
@@ -140,15 +139,11 @@ export default defineComponent({
          }
        )
        .then((res) => {
-          this.$toast.success(this.$t("export.gist_created"), {
-            icon: "done",
-          })
+          this.$toast.success(this.$t("export.gist_created"))
          window.open(res.html_url)
        })
        .catch((e) => {
-          this.$toast.error(this.$t("error.something_went_wrong"), {
-            icon: "error_outline",
-          })
+          this.$toast.error(this.$t("error.something_went_wrong"))
          console.error(e)
        })
    },
@@ -230,18 +225,14 @@ 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"), {
-        icon: "downloading",
-      })
+      this.$toast.success(this.$t("state.download_started"))
      setTimeout(() => {
        document.body.removeChild(a)
        URL.revokeObjectURL(url)
      }, 1000)
    },
    fileImported() {
-      this.$toast.success(this.$t("state.file_imported"), {
-        icon: "folder_shared",
-      })
+      this.$toast.success(this.$t("state.file_imported"))
    },
  },
 })
--- a/packages/hoppscotch-app/components/environments/index.vue
+++ b/packages/hoppscotch-app/components/environments/index.vue
@@ -6,12 +6,7 @@
          <span
            v-tippy="{ theme: 'tooltip' }"
            :title="`${$t('environment.select')}`"
-            class="
-              bg-transparent
-              border-b border-dividerLight
-              flex-1
-              select-wrapper
-            "
+            class="bg-transparent border-b border-dividerLight flex-1 select-wrapper"
          >
            <ButtonSecondary
              v-if="selectedEnvironmentIndex !== -1"
@@ -109,7 +104,7 @@
      <img
        :src="`/images/states/${$colorMode.value}/blockchain.svg`"
        loading="lazy"
-        class="flex-col my-4 object-contain object-center h-16 w-16 inline-flex"
+        class="flex-col object-contain object-center h-16 my-4 w-16 inline-flex"
        :alt="$t('empty.environments')"
      />
      <span class="text-center pb-4">
--- a/packages/hoppscotch-app/components/firebase/Login.vue
+++ b/packages/hoppscotch-app/components/firebase/Login.vue
@@ -56,9 +56,9 @@
        />
      </form>
      <div v-if="mode === 'email-sent'" class="flex flex-col px-4">
-        <div class="flex flex-col max-w-md justify-center items-center">
+        <div class="flex flex-col max-w-md items-center justify-center">
          <SmartIcon class="h-6 text-accent w-6" name="inbox" />
-          <h3 class="my-2 text-center text-lg">
+          <h3 class="my-2 text-lg text-center">
            {{ $t("auth.we_sent_magic_link") }}
          </h3>
          <p class="text-center">
@@ -155,9 +155,7 @@ export default defineComponent({
  },
  methods: {
    showLoginSuccess() {
-      this.$toast.success(`${this.$t("auth.login_success")}`, {
-        icon: "vpn_key",
-      })
+      this.$toast.success(`${this.$t("auth.login_success")}`)
    },
    async signInWithGoogle() {
      this.signingInWithGoogle = true
@@ -174,7 +172,6 @@ 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: {
@@ -190,9 +187,7 @@ export default defineComponent({
            },
          })
        } else {
-          this.$toast.error(`${this.$t("error.something_went_wrong")}`, {
-            icon: "error_outline",
-          })
+          this.$toast.error(`${this.$t("error.something_went_wrong")}`)
        }
      }

@@ -218,7 +213,6 @@ 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: {
@@ -234,9 +228,7 @@ export default defineComponent({
            },
          })
        } else {
-          this.$toast.error(`${this.$t("error.something_went_wrong")}`, {
-            icon: "error_outline",
-          })
+          this.$toast.error(`${this.$t("error.something_went_wrong")}`)
        }
      }

@@ -256,9 +248,7 @@ export default defineComponent({
        })
        .catch((e) => {
          console.error(e)
-          this.$toast.error(e.message, {
-            icon: "error_outline",
-          })
+          this.$toast.error(e.message)
          this.signingInWithEmail = false
        })
        .finally(() => {
--- a/packages/hoppscotch-app/components/firebase/Logout.vue
+++ b/packages/hoppscotch-app/components/firebase/Logout.vue
@@ -40,14 +40,10 @@ export default defineComponent({
    async logout() {
      try {
        await signOutUser()
-        this.$toast.success(`${this.$t("auth.logged_out")}`, {
-          icon: "vpn_key",
-        })
+        this.$toast.success(`${this.$t("auth.logged_out")}`)
      } catch (e) {
        console.error(e)
-        this.$toast.error(`${this.$t("error.something_went_wrong")}`, {
-          icon: "error_outline",
-        })
+        this.$toast.error(`${this.$t("error.something_went_wrong")}`)
      }
    },
  },
--- a/packages/hoppscotch-app/components/graphql/Field.vue
+++ b/packages/hoppscotch-app/components/graphql/Field.vue
@@ -27,16 +27,7 @@
    </div>
    <div
      v-if="gqlField.isDeprecated"
-      class="
-        rounded
-        bg-yellow-200
-        my-1
-        text-black
-        py-1
-        px-2
-        inline-block
-        field-deprecated
-      "
+      class="rounded bg-yellow-200 my-1 text-black py-1 px-2 inline-block field-deprecated"
    >
      {{ $t("state.deprecated") }}
    </div>
@@ -86,7 +77,7 @@ export default defineComponent({

 <style scoped lang="scss">
 .field-highlighted {
-  @apply border-b-2 border-accent;
+  @apply border-accent border-b-2;
 }

 .field-title {
--- a/packages/hoppscotch-app/components/graphql/Request.vue
+++ b/packages/hoppscotch-app/components/graphql/Request.vue
@@ -7,25 +7,15 @@
        type="url"
        autocomplete="off"
        spellcheck="false"
-        class="
-          bg-primaryLight
-          border border-divider
-          rounded
-          text-secondaryDark
-          w-full
-          py-2
-          px-4
-          hover:border-dividerDark
-          focus-visible:bg-transparent focus-visible:border-dividerDark
-        "
-        :placeholder="$t('request.url')"
+        class="bg-primaryLight border border-divider rounded text-secondaryDark w-full py-2 px-4 hover:border-dividerDark focus-visible:bg-transparent focus-visible:border-dividerDark"
+        :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"
      />
@@ -37,9 +27,15 @@
 import { logHoppRequestRunToAnalytics } from "~/helpers/fb/analytics"
 import { GQLConnection } from "~/helpers/GQLConnection"
 import { getCurrentStrategyID } from "~/helpers/network"
-import { useReadonlyStream, useStream } from "~/helpers/utils/composables"
+import {
+  useReadonlyStream,
+  useStream,
+  useI18n,
+} from "~/helpers/utils/composables"
 import { gqlHeaders$, gqlURL$, setGQLURL } from "~/newstore/GQLSession"

+const t = useI18n()
+
 const props = defineProps<{
  conn: GQLConnection
 }>()
--- a/packages/hoppscotch-app/components/graphql/RequestOptions.vue
+++ b/packages/hoppscotch-app/components/graphql/RequestOptions.vue
@@ -1,57 +1,44 @@
 <template>
  <div>
    <SmartTabs styles="sticky bg-primary top-upperPrimaryStickyFold z-10">
-      <template #actions>
-        <ButtonSecondary
-          :label="`${$t('request.run')}`"
-          svg="play"
-          class="rounded-none !text-accent"
-          @click.native="runQuery()"
-        />
-        <ButtonSecondary
-          ref="saveRequest"
-          :label="`${$t('request.save')}`"
-          class="rounded-none"
-          @click.native="saveRequest"
-        />
-      </template>
-
-      <SmartTab :id="'query'" :label="`${$t('tab.query')}`" :selected="true">
+      <SmartTab :id="'query'" :label="`${t('tab.query')}`" :selected="true">
        <AppSection label="query">
          <div
-            class="
-              bg-primary
-              border-b border-dividerLight
-              flex flex-1
-              top-upperSecondaryStickyFold
-              pl-4
-              z-10
-              sticky
-              items-center
-              justify-between
-              gqlRunQuery
-            "
+            class="bg-primary border-b border-dividerLight flex flex-1 top-upperSecondaryStickyFold pl-4 z-10 sticky items-center justify-between gqlRunQuery"
          >
            <label class="font-semibold text-secondaryLight">
-              {{ $t("request.query") }}
+              {{ t("request.query") }}
            </label>
            <div class="flex">
+              <ButtonSecondary
+                :label="`${t('request.run')}`"
+                svg="play"
+                class="rounded-none !text-accent !hover:text-accentDark"
+                @click.native="runQuery()"
+              />
+              <ButtonSecondary
+                ref="saveRequest"
+                :label="`${t('request.save')}`"
+                svg="save"
+                class="rounded-none"
+                @click.native="saveRequest"
+              />
              <ButtonSecondary
                v-tippy="{ theme: 'tooltip' }"
-                to="https://docs.hoppscotch.io"
+                to="https://docs.hoppscotch.io/graphql"
                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"
              />
@@ -61,35 +48,25 @@
        </AppSection>
      </SmartTab>

-      <SmartTab :id="'variables'" :label="`${$t('tab.variables')}`">
+      <SmartTab :id="'variables'" :label="`${t('tab.variables')}`">
        <AppSection label="variables">
          <div
-            class="
-              bg-primary
-              border-b border-dividerLight
-              flex flex-1
-              top-upperSecondaryStickyFold
-              pl-4
-              z-10
-              sticky
-              items-center
-              justify-between
-            "
+            class="bg-primary border-b border-dividerLight flex flex-1 top-upperSecondaryStickyFold pl-4 z-10 sticky items-center justify-between"
          >
            <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"
+                to="https://docs.hoppscotch.io/graphql"
                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"
              />
@@ -99,48 +76,38 @@
        </AppSection>
      </SmartTab>

-      <SmartTab :id="'headers'" :label="`${$t('tab.headers')}`">
+      <SmartTab :id="'headers'" :label="`${t('tab.headers')}`">
        <AppSection label="headers">
          <div
-            class="
-              bg-primary
-              border-b border-dividerLight
-              flex flex-1
-              top-upperSecondaryStickyFold
-              pl-4
-              z-10
-              sticky
-              items-center
-              justify-between
-            "
+            class="bg-primary border-b border-dividerLight flex flex-1 top-upperSecondaryStickyFold pl-4 z-10 sticky items-center justify-between"
          >
            <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"
+                to="https://docs.hoppscotch.io/graphql"
                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="bulkMode ? clearBulkEditor() : clearContent()"
+                @click.native="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"
@@ -152,14 +119,10 @@
            <div
              v-for="(header, index) in headers"
              :key="`header-${String(index)}`"
-              class="
-                divide-x divide-dividerLight
-                border-b border-dividerLight
-                flex
-              "
+              class="divide-dividerLight divide-x 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"
@@ -172,7 +135,7 @@
                  px-4
                  truncate
                "
-                class="!flex flex-1"
+                class="flex-1 !flex"
                @input="
                  updateRequestHeader(index, {
                    key: $event,
@@ -183,7 +146,7 @@
              />
              <input
                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
@@ -201,9 +164,9 @@
                  :title="
                    header.hasOwnProperty('active')
                      ? header.active
-                        ? $t('action.turn_off')
-                        : $t('action.turn_on')
-                      : $t('action.turn_off')
+                        ? t('action.turn_off')
+                        : t('action.turn_on')
+                      : t('action.turn_off')
                  "
                  :svg="
                    header.hasOwnProperty('active')
@@ -225,7 +188,7 @@
              <span>
                <ButtonSecondary
                  v-tippy="{ theme: 'tooltip' }"
-                  :title="$t('action.remove')"
+                  :title="t('action.remove')"
                  svg="trash"
                  color="red"
                  @click.native="removeRequestHeader(index)"
@@ -234,32 +197,19 @@
            </div>
            <div
              v-if="headers.length === 0"
-              class="
-                flex flex-col
-                text-secondaryLight
-                p-4
-                items-center
-                justify-center
-              "
+              class="flex flex-col text-secondaryLight p-4 items-center justify-center"
            >
              <img
                :src="`/images/states/${$colorMode.value}/add_category.svg`"
                loading="lazy"
-                class="
-                  flex-col
-                  my-4
-                  object-contain object-center
-                  h-16
-                  w-16
-                  inline-flex
-                "
-                :alt="$t('empty.headers')"
+                class="flex-col object-contain object-center h-16 my-4 w-16 inline-flex"
+                :alt="`${t('empty.headers')}`"
              />
              <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"
@@ -280,14 +230,17 @@
 </template>

 <script setup lang="ts">
-import { onMounted, ref, useContext, watch } from "@nuxtjs/composition-api"
+import { onMounted, ref, watch } from "@nuxtjs/composition-api"
 import clone from "lodash/clone"
 import * as gql from "graphql"
+import { GQLHeader, makeGQLRequest } from "@hoppscotch/data"
 import { copyToClipboard } from "~/helpers/utils/clipboard"
 import {
  useNuxt,
  useReadonlyStream,
  useStream,
+  useI18n,
+  useToast,
 } from "~/helpers/utils/composables"
 import {
  addGQLHeader,
@@ -308,21 +261,19 @@ import { GQLConnection } from "~/helpers/GQLConnection"
 import { makeGQLHistoryEntry, addGraphqlHistoryEntry } from "~/newstore/history"
 import { logHoppRequestRunToAnalytics } from "~/helpers/fb/analytics"
 import { getCurrentStrategyID } from "~/helpers/network"
-import { GQLHeader, makeGQLRequest } from "~/helpers/types/HoppGQLRequest"
 import { useCodemirror } from "~/helpers/editor/codemirror"
 import jsonLinter from "~/helpers/editor/linting/json"
 import { createGQLQueryLinter } from "~/helpers/editor/linting/gqlQuery"
 import queryCompleter from "~/helpers/editor/completion/gqlQuery"

+const t = useI18n()
+
 const props = defineProps<{
  conn: GQLConnection
 }>()

-const {
-  $toast,
-  app: { i18n },
-} = useContext()
-const t = i18n.t.bind(i18n)
+const toast = useToast()
+
 const nuxt = useNuxt()

 const bulkMode = ref(false)
@@ -335,11 +286,9 @@ watch(bulkHeaders, () => {
      value: item.substring(item.indexOf(":") + 1).trim(),
      active: !item.trim().startsWith("//"),
    }))
-    setGQLHeaders(transformation)
+    setGQLHeaders(transformation as GQLHeader[])
  } catch (e) {
-    $toast.error(`${t("error.something_went_wrong")}`, {
-      icon: "error_outline",
-    })
+    toast.error(`${t("error.something_went_wrong")}`)
    console.error(e)
  }
 })
@@ -392,12 +341,13 @@ const showSaveRequestModal = ref(false)
 watch(
  headers,
  () => {
-    if (
-      (headers.value[headers.value.length - 1]?.key !== "" ||
-        headers.value[headers.value.length - 1]?.value !== "") &&
-      headers.value.length
-    )
-      addRequestHeader()
+    if (!bulkMode.value)
+      if (
+        (headers.value[headers.value.length - 1]?.key !== "" ||
+          headers.value[headers.value.length - 1]?.value !== "") &&
+        headers.value.length
+      )
+        addRequestHeader()
  },
  { deep: true }
 )
@@ -427,6 +377,7 @@ onMounted(() => {
 const copyQuery = () => {
  copyToClipboard(gqlQueryString.value)
  copyQueryIcon.value = "check"
+  toast.success(`${t("state.copied_to_clipboard")}`)
  setTimeout(() => (copyQueryIcon.value = "copy"), 1000)
 }

@@ -470,18 +421,14 @@ const runQuery = async () => {
      })
    )

-    $toast.success(`${t("state.finished_in", { duration })}`, {
-      icon: "done",
-    })
+    toast.success(`${t("state.finished_in", { duration })}`)
  } 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)
  }
@@ -499,12 +446,11 @@ 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")}`, {
-      icon: "error_outline",
-    })
+    toast.error(`${t("error.gql_prettify_invalid_query")}`)
+    prettifyQueryIcon.value = "info"
  }
-  prettifyQueryIcon.value = "check"
  setTimeout(() => (prettifyQueryIcon.value = "wand"), 1000)
 }

@@ -515,6 +461,7 @@ const saveRequest = () => {
 const copyVariables = () => {
  copyToClipboard(variableString.value)
  copyVariablesIcon.value = "check"
+  toast.success(`${t("state.copied_to_clipboard")}`)
  setTimeout(() => (copyVariablesIcon.value = "copy"), 1000)
 }

@@ -542,11 +489,10 @@ const removeRequestHeader = (index: number) => {

  const deletedItem = headersBeforeDeletion[index]
  if (deletedItem.key || deletedItem.value) {
-    $toast.success(t("state.deleted").toString(), {
-      icon: "delete",
+    toast.success(`${t("state.deleted")}`, {
      action: [
        {
-          text: t("action.undo").toString(),
+          text: `${t("action.undo")}`,
          onClick: (_, toastObject) => {
            setGQLHeaders(headersBeforeDeletion as GQLHeader[])
            editBulkHeadersLine(index, deletedItem)
--- a/packages/hoppscotch-app/components/graphql/Response.vue
+++ b/packages/hoppscotch-app/components/graphql/Response.vue
@@ -5,44 +5,34 @@
      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-b border-dividerLight
-          flex flex-1
-          pl-4
-          top-0
-          z-10
-          sticky
-          items-center
-          justify-between
-        "
+        class="bg-primary border-b border-dividerLight flex flex-1 pl-4 top-0 z-10 sticky items-center justify-between"
      >
        <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"
+            svg="wrap-text"
            @click.native.prevent="linewrapEnabled = !linewrapEnabled"
          />
          <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"
          />
@@ -52,21 +42,15 @@
    </div>
    <div
      v-else
-      class="
-        flex flex-col flex-1
-        text-secondaryLight
-        p-4
-        items-center
-        justify-center
-      "
+      class="flex flex-col flex-1 text-secondaryLight p-4 items-center justify-center"
    >
-      <div class="flex space-x-2 pb-4 my-4">
+      <div class="flex space-x-2 my-4 pb-4">
        <div class="flex flex-col space-y-4 text-right items-end">
          <span class="flex flex-1 items-center">
-            {{ $t("shortcut.general.command_menu") }}
+            {{ t("shortcut.general.command_menu") }}
          </span>
          <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">
@@ -79,8 +63,8 @@
        </div>
      </div>
      <ButtonSecondary
-        :label="`${$t('app.documentation')}`"
-        to="https://docs.hoppscotch.io"
+        :label="`${t('app.documentation')}`"
+        to="https://docs.hoppscotch.io/features/response"
        svg="external-link"
        blank
        outline
@@ -91,17 +75,19 @@
 </template>

 <script setup lang="ts">
-import { reactive, ref, useContext } from "@nuxtjs/composition-api"
+import { reactive, ref } from "@nuxtjs/composition-api"
 import { useCodemirror } from "~/helpers/editor/codemirror"
 import { copyToClipboard } from "~/helpers/utils/clipboard"
-import { useReadonlyStream } from "~/helpers/utils/composables"
+import {
+  useReadonlyStream,
+  useI18n,
+  useToast,
+} from "~/helpers/utils/composables"
 import { gqlResponse$ } from "~/newstore/GQLSession"

-const {
-  $toast,
-  app: { i18n },
-} = useContext()
-const t = i18n.t.bind(i18n)
+const t = useI18n()
+
+const toast = useToast()

 const responseString = useReadonlyStream(gqlResponse$, "")

@@ -128,6 +114,7 @@ const copyResponseIcon = ref("copy")
 const copyResponse = () => {
  copyToClipboard(responseString.value!)
  copyResponseIcon.value = "check"
+  toast.success(`${t("state.copied_to_clipboard")}`)
  setTimeout(() => (copyResponseIcon.value = "copy"), 1000)
 }

@@ -141,9 +128,7 @@ const downloadResponse = () => {
  document.body.appendChild(a)
  a.click()
  downloadResponseIcon.value = "check"
-  $toast.success(`${t("state.download_started")}`, {
-    icon: "downloading",
-  })
+  toast.success(`${t("state.download_started")}`)
  setTimeout(() => {
    document.body.removeChild(a)
    URL.revokeObjectURL(url)
--- a/packages/hoppscotch-app/components/graphql/Sidebar.vue
+++ b/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,29 +34,16 @@
            subscriptionFields.length === 0 &&
            graphqlTypes.length === 0
          "
-          class="
-            flex flex-col
-            text-secondaryLight
-            p-4
-            items-center
-            justify-center
-          "
+          class="flex flex-col text-secondaryLight p-4 items-center justify-center"
        >
          <img
            :src="`/images/states/${$colorMode.value}/add_comment.svg`"
            loading="lazy"
-            class="
-              flex-col
-              my-4
-              object-contain object-center
-              h-16
-              w-16
-              inline-flex
-            "
-            :alt="$t('empty.documentation')"
+            class="flex-col object-contain object-center h-16 my-4 w-16 inline-flex"
+            :alt="`${t('empty.documentation')}`"
          />
          <span class="text-center mb-4">
-            {{ $t("empty.documentation") }}
+            {{ t("empty.documentation") }}
          </span>
        </div>
        <div v-else>
@@ -65,7 +52,7 @@
              v-model="graphqlFieldsFilterText"
              type="search"
              autocomplete="off"
-              :placeholder="`${$t('action.search')}`"
+              :placeholder="`${t('action.search')}`"
              class="bg-transparent flex w-full p-4 py-2"
            />
            <div class="flex">
@@ -73,7 +60,7 @@
                v-tippy="{ theme: 'tooltip' }"
                to="https://docs.hoppscotch.io/quickstart/graphql"
                blank
-                :title="$t('app.wiki')"
+                :title="t('app.wiki')"
                svg="help-circle"
              />
            </div>
@@ -86,9 +73,9 @@
              <SmartTab
                v-if="queryFields.length > 0"
                :id="'queries'"
-                :label="`${$t('tab.queries')}`"
+                :label="`${t('tab.queries')}`"
                :selected="true"
-                class="divide-y divide-dividerLight"
+                class="divide-dividerLight divide-y"
              >
                <GraphqlField
                  v-for="(field, index) in filteredQueryFields"
@@ -101,8 +88,8 @@
              <SmartTab
                v-if="mutationFields.length > 0"
                :id="'mutations'"
-                :label="`${$t('graphql.mutations')}`"
-                class="divide-y divide-dividerLight"
+                :label="`${t('graphql.mutations')}`"
+                class="divide-dividerLight divide-y"
              >
                <GraphqlField
                  v-for="(field, index) in filteredMutationFields"
@@ -115,8 +102,8 @@
              <SmartTab
                v-if="subscriptionFields.length > 0"
                :id="'subscriptions'"
-                :label="`${$t('graphql.subscriptions')}`"
-                class="divide-y divide-dividerLight"
+                :label="`${t('graphql.subscriptions')}`"
+                class="divide-dividerLight divide-y"
              >
                <GraphqlField
                  v-for="(field, index) in filteredSubscriptionFields"
@@ -130,8 +117,8 @@
                v-if="graphqlTypes.length > 0"
                :id="'types'"
                ref="typesTab"
-                :label="`${$t('tab.types')}`"
-                class="divide-y divide-dividerLight"
+                :label="`${t('tab.types')}`"
+                class="divide-dividerLight divide-y"
              >
                <GraphqlType
                  v-for="(type, index) in filteredGraphqlTypes"
@@ -149,51 +136,41 @@
      </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
-            flex flex-1
-            top-0
-            pl-4
-            z-10
-            sticky
-            items-center
-            justify-between
-            border-b border-dividerLight
-          "
+          class="bg-primary border-b border-dividerLight flex flex-1 pl-4 top-0 z-10 sticky items-center justify-between"
        >
          <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"
+              svg="wrap-text"
              @click.native.prevent="linewrapEnabled = !linewrapEnabled"
            />
            <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"
            />
@@ -202,29 +179,16 @@
        <div v-if="schemaString" ref="schemaEditor"></div>
        <div
          v-else
-          class="
-            flex flex-col
-            text-secondaryLight
-            p-4
-            items-center
-            justify-center
-          "
+          class="flex flex-col text-secondaryLight p-4 items-center justify-center"
        >
          <img
            :src="`/images/states/${$colorMode.value}/blockchain.svg`"
            loading="lazy"
-            class="
-              flex-col
-              my-4
-              object-contain object-center
-              h-16
-              w-16
-              inline-flex
-            "
-            :alt="$t('empty.schema')"
+            class="flex-col object-contain object-center h-16 my-4 w-16 inline-flex"
+            :alt="`${t('empty.schema')}`"
          />
          <span class="text-center mb-4">
-            {{ $t("empty.schema") }}
+            {{ t("empty.schema") }}
          </span>
        </div>
      </AppSection>
@@ -233,20 +197,18 @@
 </template>

 <script setup lang="ts">
-import {
-  computed,
-  nextTick,
-  reactive,
-  ref,
-  useContext,
-} from "@nuxtjs/composition-api"
+import { computed, nextTick, reactive, ref } from "@nuxtjs/composition-api"
 import { GraphQLField, GraphQLType } from "graphql"
 import { map } from "rxjs/operators"
+import { GQLHeader } from "@hoppscotch/data"
 import { useCodemirror } from "~/helpers/editor/codemirror"
 import { GQLConnection } from "~/helpers/GQLConnection"
-import { GQLHeader } from "~/helpers/types/HoppGQLRequest"
 import { copyToClipboard } from "~/helpers/utils/clipboard"
-import { useReadonlyStream } from "~/helpers/utils/composables"
+import {
+  useReadonlyStream,
+  useI18n,
+  useToast,
+} from "~/helpers/utils/composables"
 import {
  setGQLHeaders,
  setGQLQuery,
@@ -255,6 +217,8 @@ import {
  setGQLVariables,
 } from "~/newstore/GQLSession"

+const t = useI18n()
+
 function isTextFoundInGraphqlFieldObject(
  text: string,
  field: GraphQLField<any, any>
@@ -321,11 +285,7 @@ const props = defineProps<{
  conn: GQLConnection
 }>()

-const {
-  $toast,
-  app: { i18n },
-} = useContext()
-const t = i18n.t.bind(i18n)
+const toast = useToast()

 const queryFields = useReadonlyStream(
  props.conn.queryFields$.pipe(map((x) => x ?? [])),
@@ -408,12 +368,25 @@ const handleJumpToType = async (type: GraphQLType) => {
  await nextTick()

  const rootTypeName = resolveRootType(type).name
-
  const target = document.getElementById(`type_${rootTypeName}`)
  if (target) {
-    gqlTabs.value.$el
-      .querySelector(".gqlTabs")
-      .scrollTo({ top: target.offsetTop, behavior: "smooth" })
+    target.scrollIntoView({ block: "center", behavior: "smooth" })
+    target.classList.add(
+      "transition-all",
+      "ring-inset",
+      "ring-accentLight",
+      "ring-4"
+    )
+    setTimeout(
+      () =>
+        target.classList.remove(
+          "ring-inset",
+          "ring-accentLight",
+          "ring-4",
+          "transition-all"
+        ),
+      2000
+    )
  }
 }

@@ -449,9 +422,7 @@ const downloadSchema = () => {
  document.body.appendChild(a)
  a.click()
  downloadSchemaIcon.value = "check"
-  $toast.success(`${t("state.download_started")}`, {
-    icon: "downloading",
-  })
+  toast.success(`${t("state.download_started")}`)
  setTimeout(() => {
    document.body.removeChild(a)
    URL.revokeObjectURL(url)
--- a/packages/hoppscotch-app/components/history/graphql/Card.vue
+++ b/packages/hoppscotch-app/components/history/graphql/Card.vue
@@ -2,16 +2,7 @@
  <div class="flex flex-col group">
    <div class="flex items-center">
      <span
-        class="
-          cursor-pointer
-          flex flex-1
-          min-w-0
-          py-2
-          pr-2
-          pl-4
-          transition
-          group-hover:text-secondaryDark
-        "
+        class="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"
      >
@@ -49,7 +40,7 @@
      <span
        v-for="(line, index) in query"
        :key="`line-${index}`"
-        class="cursor-pointer text-secondaryLight px-4 whitespace-pre truncate"
+        class="cursor-pointer font-mono text-secondaryLight px-4 truncate whitespace-pre"
        data-testid="restore_history_entry"
        @click="useEntry"
        >{{ line }}</span
@@ -65,7 +56,7 @@ import {
  PropType,
  ref,
 } from "@nuxtjs/composition-api"
-import { makeGQLRequest } from "~/helpers/types/HoppGQLRequest"
+import { makeGQLRequest } from "@hoppscotch/data"
 import { setGQLSession } from "~/newstore/GQLSession"
 import { GQLHistoryEntry } from "~/newstore/history"

--- a/packages/hoppscotch-app/components/history/index.vue
+++ b/packages/hoppscotch-app/components/history/index.vue
@@ -63,7 +63,7 @@
      <img
        :src="`/images/states/${$colorMode.value}/history.svg`"
        loading="lazy"
-        class="flex-col my-4 object-contain object-center h-16 w-16 inline-flex"
+        class="flex-col object-contain object-center h-16 my-4 w-16 inline-flex"
        :alt="$t('empty.history')"
      />
      <span class="text-center mb-4">
@@ -140,9 +140,7 @@ export default defineComponent({
    clearHistory() {
      if (this.page === "rest") clearRESTHistory()
      else clearGraphqlHistory()
-      this.$toast.success(`${this.$t("state.history_deleted")}`, {
-        icon: "delete",
-      })
+      this.$toast.success(`${this.$t("state.history_deleted")}`)
    },
    useHistory(entry: any) {
      if (this.page === "rest") setRESTRequest(entry.request)
@@ -150,9 +148,7 @@ export default defineComponent({
    deleteHistory(entry: any) {
      if (this.page === "rest") deleteRESTHistoryEntry(entry)
      else deleteGraphqlHistoryEntry(entry)
-      this.$toast.success(`${this.$t("state.deleted")}`, {
-        icon: "delete",
-      })
+      this.$toast.success(`${this.$t("state.deleted")}`)
    },
    toggleStar(entry: any) {
      if (this.page === "rest") toggleRESTHistoryEntryStar(entry)
--- a/packages/hoppscotch-app/components/history/rest/Card.vue
+++ b/packages/hoppscotch-app/components/history/rest/Card.vue
@@ -1,7 +1,7 @@
 <template>
-  <div class="flex items-center group">
+  <div class="flex items-stretch group">
    <span
-      class="cursor-pointer flex px-2 w-16 justify-center items-center truncate"
+      class="cursor-pointer flex px-2 w-16 items-center justify-center truncate"
      :class="entryStatus.className"
      data-testid="restore_history_entry"
      :title="`${duration}`"
@@ -10,15 +10,7 @@
      {{ entry.request.method }}
    </span>
    <span
-      class="
-        cursor-pointer
-        flex flex-1
-        min-w-0
-        py-2
-        pr-2
-        transition
-        group-hover:text-secondaryDark
-      "
+      class="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')"
@@ -49,13 +41,9 @@
 </template>

 <script lang="ts">
-import {
-  computed,
-  defineComponent,
-  PropType,
-  useContext,
-} from "@nuxtjs/composition-api"
+import { computed, defineComponent, PropType } from "@nuxtjs/composition-api"
 import findStatusGroup from "~/helpers/findStatusGroup"
+import { useI18n } from "~/helpers/utils/composables"
 import { RESTHistoryEntry } from "~/newstore/history"

 export default defineComponent({
@@ -64,10 +52,7 @@ export default defineComponent({
    showMore: Boolean,
  },
  setup(props) {
-    const {
-      app: { i18n },
-    } = useContext()
-    const $t = i18n.t.bind(i18n)
+    const t = useI18n()

    const duration = computed(() => {
      if (props.entry.responseMeta.duration) {
@@ -75,9 +60,9 @@ export default defineComponent({
        if (!responseDuration) return ""

        return responseDuration > 0
-          ? `${$t("request.duration")}: ${responseDuration}ms`
-          : $t("error.no_duration")
-      } else return $t("error.no_duration")
+          ? `${t("request.duration")}: ${responseDuration}ms`
+          : t("error.no_duration")
+      } else return t("error.no_duration")
    })

    const entryStatus = computed(() => {
--- a/packages/hoppscotch-app/components/http/Authorization.vue
+++ b/packages/hoppscotch-app/components/http/Authorization.vue
@@ -1,17 +1,7 @@
 <template>
  <div>
    <div
-      class="
-        bg-primary
-        border-b border-dividerLight
-        flex flex-1
-        top-upperSecondaryStickyFold
-        pl-4
-        z-10
-        sticky
-        items-center
-        justify-between
-      "
+      class="bg-primary border-b border-dividerLight flex flex-1 top-upperSecondaryStickyFold pl-4 z-10 sticky items-center justify-between"
    >
      <span class="flex items-center">
        <label class="font-semibold text-secondaryLight">
@@ -34,6 +24,11 @@
          </template>
          <SmartItem
            label="None"
+            :icon="
+              authName === 'None'
+                ? 'radio_button_checked'
+                : 'radio_button_unchecked'
+            "
            @click.native="
              authType = 'none'
              $refs.authTypeOptions.tippy().hide()
@@ -41,6 +36,11 @@
          />
          <SmartItem
            label="Basic Auth"
+            :icon="
+              authName === 'Basic Auth'
+                ? 'radio_button_checked'
+                : 'radio_button_unchecked'
+            "
            @click.native="
              authType = 'basic'
              $refs.authTypeOptions.tippy().hide()
@@ -48,6 +48,11 @@
          />
          <SmartItem
            label="Bearer Token"
+            :icon="
+              authName === 'Bearer'
+                ? 'radio_button_checked'
+                : 'radio_button_unchecked'
+            "
            @click.native="
              authType = 'bearer'
              $refs.authTypeOptions.tippy().hide()
@@ -55,6 +60,11 @@
          />
          <SmartItem
            label="OAuth 2.0"
+            :icon="
+              authName === 'OAuth 2.0'
+                ? 'radio_button_checked'
+                : 'radio_button_unchecked'
+            "
            @click.native="
              authType = 'oauth-2'
              $refs.authTypeOptions.tippy().hide()
@@ -98,7 +108,7 @@
      <img
        :src="`/images/states/${$colorMode.value}/login.svg`"
        loading="lazy"
-        class="flex-col my-4 object-contain object-center h-16 w-16 inline-flex"
+        class="flex-col object-contain object-center h-16 my-4 w-16 inline-flex"
        :alt="$t('empty.authorization')"
      />
      <span class="text-center pb-4">
@@ -107,7 +117,7 @@
      <ButtonSecondary
        outline
        :label="$t('app.documentation')"
-        to="https://docs.hoppscotch.io"
+        to="https://docs.hoppscotch.io/features/authorization"
        blank
        svg="external-link"
        reverse
@@ -132,17 +142,7 @@
        </div>
      </div>
      <div
-        class="
-          bg-primary
-          h-full
-          top-upperTertiaryStickyFold
-          min-w-46
-          max-w-1/3
-          p-4
-          z-9
-          sticky
-          overflow-auto
-        "
+        class="bg-primary 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">
@@ -151,7 +151,7 @@
          <SmartAnchor
            class="link"
            :label="`${$t('authorization.learn')} \xA0 →`"
-            to="https://docs.hoppscotch.io/"
+            to="https://docs.hoppscotch.io/features/authorization"
            blank
          />
        </div>
@@ -168,17 +168,7 @@
        </div>
      </div>
      <div
-        class="
-          bg-primary
-          h-full
-          top-upperTertiaryStickyFold
-          min-w-46
-          max-w-1/3
-          p-4
-          z-9
-          sticky
-          overflow-auto
-        "
+        class="bg-primary 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 +177,7 @@
          <SmartAnchor
            class="link"
            :label="`${$t('authorization.learn')} \xA0 →`"
-            to="https://docs.hoppscotch.io/"
+            to="https://docs.hoppscotch.io/features/authorization"
            blank
          />
        </div>
@@ -208,17 +198,7 @@
        <HttpOAuth2Authorization />
      </div>
      <div
-        class="
-          bg-primary
-          h-full
-          top-upperTertiaryStickyFold
-          min-w-46
-          max-w-1/3
-          p-4
-          z-9
-          sticky
-          overflow-auto
-        "
+        class="bg-primary 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">
@@ -227,7 +207,7 @@
          <SmartAnchor
            class="link"
            :label="`${$t('authorization.learn')} \xA0 →`"
-            to="https://docs.hoppscotch.io/"
+            to="https://docs.hoppscotch.io/features/authorization"
            blank
          />
        </div>
@@ -242,7 +222,7 @@ import {
  HoppRESTAuthBasic,
  HoppRESTAuthBearer,
  HoppRESTAuthOAuth2,
-} from "~/helpers/types/HoppRESTAuth"
+} from "@hoppscotch/data"
 import { pluckRef, useStream } from "~/helpers/utils/composables"
 import { restAuth$, setRESTAuth } from "~/newstore/RESTSession"
 import { useSetting } from "~/newstore/settings"
--- a/packages/hoppscotch-app/components/http/Body.vue
+++ b/packages/hoppscotch-app/components/http/Body.vue
@@ -1,17 +1,7 @@
 <template>
  <div>
    <div
-      class="
-        bg-primary
-        border-b border-dividerLight
-        flex flex-1
-        top-upperSecondaryStickyFold
-        pl-4
-        z-10
-        sticky
-        items-center
-        justify-between
-      "
+      class="bg-primary border-b border-dividerLight flex flex-1 top-upperSecondaryStickyFold pl-4 z-10 sticky items-center justify-between"
    >
      <span class="flex items-center">
        <label class="font-semibold text-secondaryLight">
@@ -68,7 +58,7 @@
      <img
        :src="`/images/states/${$colorMode.value}/upload_single_file.svg`"
        loading="lazy"
-        class="flex-col my-4 object-contain object-center h-16 w-16 inline-flex"
+        class="flex-col object-contain object-center h-16 my-4 w-16 inline-flex"
        :alt="$t('empty.body')"
      />
      <span class="text-center pb-4">
@@ -77,7 +67,7 @@
      <ButtonSecondary
        outline
        :label="`${$t('app.documentation')}`"
-        to="https://docs.hoppscotch.io"
+        to="https://docs.hoppscotch.io/features/body"
        blank
        svg="external-link"
        reverse
--- a/packages/hoppscotch-app/components/http/BodyParameters.vue
+++ b/packages/hoppscotch-app/components/http/BodyParameters.vue
@@ -1,17 +1,7 @@
 <template>
  <AppSection label="bodyParameters">
    <div
-      class="
-        bg-primary
-        border-b border-dividerLight
-        flex flex-1
-        top-upperTertiaryStickyFold
-        pl-4
-        z-10
-        sticky
-        items-center
-        justify-between
-      "
+      class="bg-primary border-b border-dividerLight flex flex-1 top-upperTertiaryStickyFold pl-4 z-10 sticky items-center justify-between"
    >
      <label class="font-semibold text-secondaryLight">
        {{ $t("request.body") }}
@@ -41,7 +31,7 @@
    <div
      v-for="(param, index) in bodyParams"
      :key="`param-${index}`"
-      class="divide-x divide-dividerLight border-b border-dividerLight flex"
+      class="divide-dividerLight divide-x border-b border-dividerLight flex"
    >
      <SmartEnvInput
        v-model="param.key"
@@ -156,7 +146,7 @@
      <img
        :src="`/images/states/${$colorMode.value}/upload_single_file.svg`"
        loading="lazy"
-        class="flex-col my-4 object-contain object-center h-16 w-16 inline-flex"
+        class="flex-col object-contain object-center h-16 my-4 w-16 inline-flex"
        :alt="$t('empty.body')"
      />
      <span class="text-center pb-4">
@@ -175,7 +165,7 @@

 <script lang="ts">
 import { defineComponent, onMounted, Ref, watch } from "@nuxtjs/composition-api"
-import { FormDataKeyValue } from "~/helpers/types/HoppRESTRequest"
+import { FormDataKeyValue } from "@hoppscotch/data"
 import { pluckRef } from "~/helpers/utils/composables"
 import {
  addFormDataEntry,
--- a/packages/hoppscotch-app/components/http/CodegenModal.vue
+++ b/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>
@@ -62,13 +62,16 @@
 </template>

 <script setup lang="ts">
-import { computed, ref, useContext, watch } from "@nuxtjs/composition-api"
+import { computed, ref, 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
@@ -78,11 +81,7 @@ const emit = defineEmits<{
  (e: "hide-modal"): void
 }>()

-const {
-  $toast,
-  app: { i18n },
-} = useContext()
-const t = i18n.t.bind(i18n)
+const toast = useToast()

 const options = ref<any | null>(null)

@@ -126,9 +125,7 @@ const hideModal = () => emit("hide-modal")
 const copyRequestCode = () => {
  copyToClipboard(requestCode.value)
  copyIcon.value = "check"
-  $toast.success(`${t("state.copied_to_clipboard")}`, {
-    icon: "content_paste",
-  })
+  toast.success(`${t("state.copied_to_clipboard")}`)
  setTimeout(() => (copyIcon.value = "copy"), 1000)
 }
 </script>
--- a/packages/hoppscotch-app/components/http/Headers.vue
+++ b/packages/hoppscotch-app/components/http/Headers.vue
@@ -1,45 +1,35 @@
 <template>
  <AppSection label="headers">
    <div
-      class="
-        bg-primary
-        border-b border-dividerLight
-        flex flex-1
-        top-upperSecondaryStickyFold
-        pl-4
-        z-10
-        sticky
-        items-center
-        justify-between
-      "
+      class="bg-primary border-b border-dividerLight flex flex-1 top-upperSecondaryStickyFold pl-4 z-10 sticky items-center justify-between"
    >
      <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="bulkMode ? clearBulkEditor() : clearContent()"
+          @click.native="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"
@@ -51,10 +41,10 @@
      <div
        v-for="(header, index) in headers$"
        :key="`header-${index}`"
-        class="divide-x divide-dividerLight border-b border-dividerLight flex"
+        class="divide-dividerLight divide-x 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"
@@ -67,7 +57,7 @@
            px-4
            truncate
          "
-          class="!flex flex-1"
+          class="flex-1 !flex"
          @input="
            updateHeader(index, {
              key: $event,
@@ -78,7 +68,7 @@
        />
        <SmartEnvInput
          v-model="header.value"
-          :placeholder="`${$t('count.value', { count: index + 1 })}`"
+          :placeholder="`${t('count.value', { count: index + 1 })}`"
          styles="
            bg-transparent
            flex
@@ -100,9 +90,9 @@
            :title="
              header.hasOwnProperty('active')
                ? header.active
-                  ? $t('action.turn_off')
-                  : $t('action.turn_on')
-                : $t('action.turn_off')
+                  ? t('action.turn_off')
+                  : t('action.turn_on')
+                : t('action.turn_off')
            "
            :svg="
              header.hasOwnProperty('active')
@@ -126,7 +116,7 @@
        <span>
          <ButtonSecondary
            v-tippy="{ theme: 'tooltip' }"
-            :title="$t('action.remove')"
+            :title="t('action.remove')"
            svg="trash"
            color="red"
            @click.native="deleteHeader(index)"
@@ -135,33 +125,20 @@
      </div>
      <div
        v-if="headers$.length === 0"
-        class="
-          flex flex-col
-          text-secondaryLight
-          p-4
-          items-center
-          justify-center
-        "
+        class="flex flex-col text-secondaryLight p-4 items-center justify-center"
      >
        <img
          :src="`/images/states/${$colorMode.value}/add_category.svg`"
          loading="lazy"
-          class="
-            flex-col
-            my-4
-            object-contain object-center
-            h-16
-            w-16
-            inline-flex
-          "
-          :alt="$t('empty.headers')"
+          class="flex-col object-contain object-center h-16 my-4 w-16 inline-flex"
+          :alt="`${t('empty.headers')}`"
        />
        <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"
@@ -172,7 +149,8 @@
 </template>

 <script setup lang="ts">
-import { onBeforeUpdate, ref, useContext, watch } from "@nuxtjs/composition-api"
+import { onBeforeUpdate, ref, watch } from "@nuxtjs/composition-api"
+import { HoppRESTHeader } from "@hoppscotch/data"
 import { useCodemirror } from "~/helpers/editor/codemirror"
 import {
  addRESTHeader,
@@ -183,14 +161,15 @@ import {
  updateRESTHeader,
 } from "~/newstore/RESTSession"
 import { commonHeaders } from "~/helpers/headers"
-import { useReadonlyStream } from "~/helpers/utils/composables"
-import { HoppRESTHeader } from "~/helpers/types/HoppRESTRequest"
+import {
+  useReadonlyStream,
+  useI18n,
+  useToast,
+} from "~/helpers/utils/composables"

-const {
-  $toast,
-  app: { i18n },
-} = useContext()
-const t = i18n.t.bind(i18n)
+const t = useI18n()
+
+const toast = useToast()

 const bulkMode = ref(false)
 const bulkHeaders = ref("")
@@ -212,11 +191,9 @@ watch(bulkHeaders, () => {
      value: item.substring(item.indexOf(":") + 1).trim(),
      active: !item.trim().startsWith("//"),
    }))
-    setRESTHeaders(transformation)
+    setRESTHeaders(transformation as HoppRESTHeader[])
  } catch (e) {
-    $toast.error(`${t("error.something_went_wrong")}`, {
-      icon: "error_outline",
-    })
+    toast.error(`${t("error.something_went_wrong")}`)
    console.error(e)
  }
 })
@@ -226,12 +203,13 @@ const headers$ = useReadonlyStream(restHeaders$, [])
 watch(
  headers$,
  (newValue) => {
-    if (
-      (newValue[newValue.length - 1]?.key !== "" ||
-        newValue[newValue.length - 1]?.value !== "") &&
-      newValue.length
-    )
-      addHeader()
+    if (!bulkMode.value)
+      if (
+        (newValue[newValue.length - 1]?.key !== "" ||
+          newValue[newValue.length - 1]?.value !== "") &&
+        newValue.length
+      )
+        addHeader()
  },
  { deep: true }
 )
@@ -277,11 +255,10 @@ const deleteHeader = (index: number) => {

  const deletedItem = headersBeforeDeletion[index]
  if (deletedItem.key || deletedItem.value) {
-    $toast.success(t("state.deleted").toString(), {
-      icon: "delete",
+    toast.success(`${t("state.deleted")}`, {
      action: [
        {
-          text: t("action.undo").toString(),
+          text: `${t("action.undo")}`,
          onClick: (_, toastObject) => {
            setRESTHeaders(headersBeforeDeletion as HoppRESTHeader[])
            editBulkHeadersLine(index, deletedItem)
--- a/packages/hoppscotch-app/components/http/ImportCurl.vue
+++ b/packages/hoppscotch-app/components/http/ImportCurl.vue
@@ -1,5 +1,5 @@
 <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 border-dividerLight rounded"></div>
@@ -8,11 +8,11 @@
    <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,21 +21,20 @@
 </template>

 <script setup lang="ts">
-import { ref, useContext } from "@nuxtjs/composition-api"
-import parseCurlCommand from "~/helpers/curlparser"
-import { useCodemirror } from "~/helpers/editor/codemirror"
+import { ref } from "@nuxtjs/composition-api"
 import {
  HoppRESTHeader,
  HoppRESTParam,
  makeRESTRequest,
-} from "~/helpers/types/HoppRESTRequest"
+} from "@hoppscotch/data"
+import parseCurlCommand from "~/helpers/curlparser"
+import { useCodemirror } from "~/helpers/editor/codemirror"
 import { setRESTRequest } from "~/newstore/RESTSession"
+import { useI18n, useToast } from "~/helpers/utils/composables"

-const {
-  $toast,
-  app: { i18n },
-} = useContext()
-const t = i18n.t.bind(i18n)
+const t = useI18n()
+
+const toast = useToast()

 const curl = ref("")

@@ -123,9 +122,7 @@ const handleImport = () => {
    )
  } catch (e) {
    console.error(e)
-    $toast.error(`${t("error.curl_invalid_format")}`, {
-      icon: "error_outline",
-    })
+    toast.error(`${t("error.curl_invalid_format")}`)
  }
  hideModal()
 }
--- a/packages/hoppscotch-app/components/http/OAuth2Authorization.vue
+++ b/packages/hoppscotch-app/components/http/OAuth2Authorization.vue
@@ -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,19 +56,21 @@
 </template>

 <script lang="ts">
-import { Ref, useContext } from "@nuxtjs/composition-api"
-import { pluckRef, useStream } from "~/helpers/utils/composables"
-import { HoppRESTAuthOAuth2 } from "~/helpers/types/HoppRESTAuth"
+import { Ref } from "@nuxtjs/composition-api"
+import { HoppRESTAuthOAuth2 } from "@hoppscotch/data"
+import {
+  pluckRef,
+  useI18n,
+  useStream,
+  useToast,
+} from "~/helpers/utils/composables"
 import { restAuth$, setRESTAuth } from "~/newstore/RESTSession"
 import { tokenRequest } from "~/helpers/oauth"

 export default {
  setup() {
-    const {
-      $toast,
-      app: { i18n },
-    } = useContext()
-    const $t = i18n.t.bind(i18n)
+    const t = useI18n()
+    const toast = useToast()

    const auth = useStream(
      restAuth$,
@@ -97,9 +99,7 @@ export default {
        oidcDiscoveryURL.value === "" &&
        (authURL.value === "" || accessTokenURL.value === "")
      ) {
-        $toast.error(`${$t("complete_config_urls")}`, {
-          icon: "error",
-        })
+        toast.error(`${t("complete_config_urls")}`)
        return
      }
      try {
@@ -113,9 +113,7 @@ export default {
        }
        await tokenRequest(tokenReqParams)
      } catch (e) {
-        $toast.error(`${e}`, {
-          icon: "code",
-        })
+        toast.error(`${e}`)
      }
    }

@@ -126,6 +124,7 @@ export default {
      clientID,
      scope,
      handleAccessTokenRequest,
+      t,
    }
  },
 }
--- a/packages/hoppscotch-app/components/http/Parameters.vue
+++ b/packages/hoppscotch-app/components/http/Parameters.vue
@@ -1,45 +1,35 @@
 <template>
  <AppSection label="parameters">
    <div
-      class="
-        bg-primary
-        border-b border-dividerLight
-        flex flex-1
-        top-upperSecondaryStickyFold
-        pl-4
-        z-10
-        sticky
-        items-center
-        justify-between
-      "
+      class="bg-primary border-b border-dividerLight flex flex-1 top-upperSecondaryStickyFold pl-4 z-10 sticky items-center justify-between"
    >
      <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="bulkMode ? clearBulkEditor() : clearContent()"
+          @click.native="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"
@@ -51,11 +41,11 @@
      <div
        v-for="(param, index) in params$"
        :key="`param-${index}`"
-        class="divide-x divide-dividerLight border-b border-dividerLight flex"
+        class="divide-dividerLight divide-x 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
@@ -73,7 +63,7 @@
        />
        <SmartEnvInput
          v-model="param.value"
-          :placeholder="`${$t('count.value', { count: index + 1 })}`"
+          :placeholder="`${t('count.value', { count: index + 1 })}`"
          styles="
            bg-transparent
            flex
@@ -95,9 +85,9 @@
            :title="
              param.hasOwnProperty('active')
                ? param.active
-                  ? $t('action.turn_off')
-                  : $t('action.turn_on')
-                : $t('action.turn_off')
+                  ? t('action.turn_off')
+                  : t('action.turn_on')
+                : t('action.turn_off')
            "
            :svg="
              param.hasOwnProperty('active')
@@ -119,7 +109,7 @@
        <span>
          <ButtonSecondary
            v-tippy="{ theme: 'tooltip' }"
-            :title="$t('action.remove')"
+            :title="t('action.remove')"
            svg="trash"
            color="red"
            @click.native="deleteParam(index)"
@@ -128,32 +118,19 @@
      </div>
      <div
        v-if="params$.length === 0"
-        class="
-          flex flex-col
-          text-secondaryLight
-          p-4
-          items-center
-          justify-center
-        "
+        class="flex flex-col text-secondaryLight p-4 items-center justify-center"
      >
        <img
          :src="`/images/states/${$colorMode.value}/add_files.svg`"
          loading="lazy"
-          class="
-            flex-col
-            my-4
-            object-contain object-center
-            h-16
-            w-16
-            inline-flex
-          "
-          :alt="$t('empty.parameters')"
+          class="flex-col object-contain object-center h-16 my-4 w-16 inline-flex"
+          :alt="`${t('empty.parameters')}`"
        />
        <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"
@@ -165,10 +142,14 @@
 </template>

 <script setup lang="ts">
-import { ref, useContext, watch, onBeforeUpdate } from "@nuxtjs/composition-api"
+import { ref, watch, onBeforeUpdate } from "@nuxtjs/composition-api"
+import { HoppRESTParam } from "@hoppscotch/data"
 import { useCodemirror } from "~/helpers/editor/codemirror"
-import { HoppRESTParam } from "~/helpers/types/HoppRESTRequest"
-import { useReadonlyStream } from "~/helpers/utils/composables"
+import {
+  useReadonlyStream,
+  useI18n,
+  useToast,
+} from "~/helpers/utils/composables"
 import {
  restParams$,
  addRESTParam,
@@ -178,11 +159,9 @@ import {
  setRESTParams,
 } from "~/newstore/RESTSession"

-const {
-  $toast,
-  app: { i18n },
-} = useContext()
-const t = i18n.t.bind(i18n)
+const t = useI18n()
+
+const toast = useToast()

 const bulkMode = ref(false)
 const bulkParams = ref("")
@@ -194,11 +173,9 @@ watch(bulkParams, () => {
      value: item.substring(item.indexOf(":") + 1).trim(),
      active: !item.trim().startsWith("//"),
    }))
-    setRESTParams(transformation)
+    setRESTParams(transformation as HoppRESTParam[])
  } catch (e) {
-    $toast.error(`${t("error.something_went_wrong")}`, {
-      icon: "error_outline",
-    })
+    toast.error(`${t("error.something_went_wrong")}`)
    console.error(e)
  }
 })
@@ -219,12 +196,13 @@ const params$ = useReadonlyStream(restParams$, [])
 watch(
  params$,
  (newValue) => {
-    if (
-      (newValue[newValue.length - 1]?.key !== "" ||
-        newValue[newValue.length - 1]?.value !== "") &&
-      newValue.length
-    )
-      addParam()
+    if (!bulkMode.value)
+      if (
+        (newValue[newValue.length - 1]?.key !== "" ||
+          newValue[newValue.length - 1]?.value !== "") &&
+        newValue.length
+      )
+        addParam()
  },
  { deep: true }
 )
@@ -270,11 +248,10 @@ const deleteParam = (index: number) => {

  const deletedItem = parametersBeforeDeletion[index]
  if (deletedItem.key || deletedItem.value) {
-    $toast.success(t("state.deleted").toString(), {
-      icon: "delete",
+    toast.success(`${t("state.deleted")}`, {
      action: [
        {
-          text: t("action.undo").toString(),
+          text: `${t("action.undo")}`,
          onClick: (_, toastObject) => {
            setRESTParams(parametersBeforeDeletion as HoppRESTParam[])
            editBulkParamsLine(index, deletedItem)
--- a/packages/hoppscotch-app/components/http/PreRequestScript.vue
+++ b/packages/hoppscotch-app/components/http/PreRequestScript.vue
@@ -1,39 +1,29 @@
 <template>
-  <AppSection id="script" :label="`${$t('preRequest.script')}`">
+  <AppSection id="script" :label="`${t('preRequest.script')}`">
    <div
-      class="
-        bg-primary
-        border-b border-dividerLight
-        flex flex-1
-        top-upperSecondaryStickyFold
-        pl-4
-        z-10
-        sticky
-        items-center
-        justify-between
-      "
+      class="bg-primary border-b border-dividerLight flex flex-1 top-upperSecondaryStickyFold pl-4 z-10 sticky items-center justify-between"
    >
      <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"
+          svg="wrap-text"
          @click.native.prevent="linewrapEnabled = !linewrapEnabled"
        />
        <ButtonSecondary
          v-tippy="{ theme: 'tooltip' }"
-          :title="$t('action.clear')"
+          :title="t('action.clear')"
          svg="trash-2"
          @click.native="clearContent"
        />
@@ -44,28 +34,18 @@
        <div ref="preRrequestEditor"></div>
      </div>
      <div
-        class="
-          bg-primary
-          h-full
-          top-upperTertiaryStickyFold
-          min-w-46
-          max-w-1/3
-          p-4
-          z-9
-          sticky
-          overflow-auto
-        "
+        class="bg-primary 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="font-bold text-secondaryLight pt-6">
-          {{ $t("preRequest.snippets") }}
+          {{ t("preRequest.snippets") }}
        </h4>
        <div class="flex flex-col pt-4">
          <TabSecondary
@@ -82,17 +62,15 @@
 </template>

 <script setup lang="ts">
-import { reactive, ref, useContext } from "@nuxtjs/composition-api"
+import { reactive, ref } 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 {
-  app: { i18n },
-} = useContext()
-const t = i18n.t.bind(i18n)
+const t = useI18n()

 const preRequestScript = usePreRequestScript()

--- a/packages/hoppscotch-app/components/http/RawBody.vue
+++ b/packages/hoppscotch-app/components/http/RawBody.vue
@@ -1,39 +1,29 @@
 <template>
  <div>
    <div
-      class="
-        bg-primary
-        border-b border-dividerLight
-        flex flex-1
-        top-upperTertiaryStickyFold
-        pl-4
-        z-10
-        sticky
-        items-center
-        justify-between
-      "
+      class="bg-primary border-b border-dividerLight flex flex-1 top-upperTertiaryStickyFold pl-4 z-10 sticky items-center justify-between"
    >
      <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"
+          svg="wrap-text"
          @click.native.prevent="linewrapEnabled = !linewrapEnabled"
        />
        <ButtonSecondary
          v-tippy="{ theme: 'tooltip' }"
-          :title="$t('action.clear')"
+          :title="t('action.clear')"
          svg="trash-2"
          @click.native="clearContent"
        />
@@ -41,14 +31,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()"
          />
@@ -67,21 +57,19 @@
 </template>

 <script setup lang="ts">
-import { computed, reactive, ref, useContext } from "@nuxtjs/composition-api"
+import { computed, reactive, ref } from "@nuxtjs/composition-api"
 import { useCodemirror } from "~/helpers/editor/codemirror"
 import { getEditorLangForMimeType } from "~/helpers/editorutils"
-import { pluckRef } from "~/helpers/utils/composables"
+import { pluckRef, useI18n, useToast } from "~/helpers/utils/composables"
 import { useRESTRequestBody } from "~/newstore/RESTSession"

+const t = useI18n()
+
 const props = defineProps<{
  contentType: string
 }>()

-const {
-  $toast,
-  app: { i18n },
-} = useContext()
-const t = i18n.t.bind(i18n)
+const toast = useToast()

 const rawParamsBody = pluckRef(useRESTRequestBody(), "body")
 const prettifyIcon = ref("wand")
@@ -118,13 +106,9 @@ const uploadPayload = (e: InputEvent) => {
      rawParamsBody.value = target?.result
    }
    reader.readAsText(file)
-    $toast.success(`${t("state.file_imported")}`, {
-      icon: "attach_file",
-    })
+    toast.success(`${t("state.file_imported")}`)
  } else {
-    $toast.error(`${t("action.choose_file")}`, {
-      icon: "attach_file",
-    })
+    toast.error(`${t("action.choose_file")}`)
  }
 }
 const prettifyRequestBody = () => {
@@ -135,9 +119,7 @@ const prettifyRequestBody = () => {
    setTimeout(() => (prettifyIcon.value = "wand"), 1000)
  } catch (e) {
    console.error(e)
-    $toast.error(`${t("error.json_prettify_invalid_body")}`, {
-      icon: "error_outline",
-    })
+    toast.error(`${t("error.json_prettify_invalid_body")}`)
  }
 }
 </script>
--- a/packages/hoppscotch-app/components/http/Request.vue
+++ b/packages/hoppscotch-app/components/http/Request.vue
@@ -1,16 +1,6 @@
 <template>
  <div
-    class="
-      bg-primary
-      flex
-      space-x-2
-      p-4
-      top-0
-      z-10
-      sticky
-      overflow-x-auto
-      hide-scrollbar
-    "
+    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="flex relative">
@@ -26,24 +16,10 @@
              <span class="select-wrapper">
                <input
                  id="method"
-                  class="
-                    bg-primaryLight
-                    border border-divider
-                    rounded-l
-                    cursor-pointer
-                    flex
-                    font-semibold
-                    text-secondaryDark
-                    py-2
-                    px-4
-                    w-26
-                    hover:border-dividerDark
-                    focus-visible:bg-transparent
-                    focus-visible:border-dividerDark
-                  "
+                  class="bg-primaryLight border 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>
@@ -60,7 +36,7 @@
      <div class="flex flex-1">
        <SmartEnvInput
          v-model="newEndpoint"
-          :placeholder="`${$t('request.url')}`"
+          :placeholder="`${t('request.url')}`"
          styles="
            bg-primaryLight
            border border-divider
@@ -83,7 +59,7 @@
      <ButtonPrimary
        id="send"
        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">
@@ -98,7 +74,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="
              () => {
@@ -108,7 +84,7 @@
            "
          />
          <SmartItem
-            :label="`${$t('show.code')}`"
+            :label="`${t('show.code')}`"
            svg="code-2"
            @click.native="
              () => {
@@ -119,7 +95,7 @@
          />
          <SmartItem
            ref="clearAll"
-            :label="`${$t('action.clear_all')}`"
+            :label="`${t('action.clear_all')}`"
            svg="rotate-ccw"
            @click.native="
              () => {
@@ -134,7 +110,7 @@
        class="rounded rounded-r-none ml-2"
        :label="
          windowInnerWidth.x.value >= 768 && COLUMN_LAYOUT
-            ? `${$t('request.save')}`
+            ? `${t('request.save')}`
            : ''
        "
        filled
@@ -159,7 +135,7 @@
          <input
            id="request-name"
            v-model="requestName"
-            :placeholder="`${$t('request.name')}`"
+            :placeholder="`${t('request.name')}`"
            name="request-name"
            type="text"
            autocomplete="off"
@@ -168,18 +144,18 @@
          />
          <SmartItem
            ref="copyRequest"
-            :label="`${$t('request.copy_link')}`"
-            :svg="hasNavigatorShare ? 'share-2' : 'copy'"
+            :label="shareButtonText"
+            :svg="copyLinkIcon"
+            :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="
              () => {
@@ -208,8 +184,9 @@
 </template>

 <script setup lang="ts">
-import { computed, ref, useContext, watch } from "@nuxtjs/composition-api"
-import { isRight } from "fp-ts/lib/Either"
+import { computed, ref, watch } from "@nuxtjs/composition-api"
+import { isLeft, isRight } from "fp-ts/lib/Either"
+import * as E from "fp-ts/Either"
 import {
  updateRESTResponse,
  restEndpoint$,
@@ -220,6 +197,8 @@ import {
  useRESTRequestName,
  getRESTSaveContext,
  getRESTRequest,
+  restRequest$,
+  setRESTSaveContext,
 } from "~/newstore/RESTSession"
 import { editRESTRequest } from "~/newstore/collections"
 import { runRESTRequest$ } from "~/helpers/RequestRunner"
@@ -227,6 +206,9 @@ import {
  useStreamSubscriber,
  useStream,
  useNuxt,
+  useI18n,
+  useToast,
+  useReadonlyStream,
 } from "~/helpers/utils/composables"
 import { defineActionHandler } from "~/helpers/actions"
 import { copyToClipboard } from "~/helpers/utils/clipboard"
@@ -234,6 +216,9 @@ 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",
@@ -248,12 +233,9 @@ const methods = [
  "CUSTOM",
 ]

-const {
-  $toast,
-  app: { i18n },
-} = useContext()
+const toast = useToast()
 const nuxt = useNuxt()
-const t = i18n.t.bind(i18n)
+
 const { subscribeToStream } = useStreamSubscriber()

 const newEndpoint = useStream(restEndpoint$, "", setRESTEndpoint)
@@ -282,12 +264,16 @@ 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
  const streamResult = await runRESTRequest$()()

-  // TODO: What if stream fetching failed (script execution errors ?) (isLeft)
  if (isRight(streamResult)) {
    subscribeToStream(
      streamResult.right,
@@ -305,6 +291,19 @@ const newSendRequest = async () => {
        loading.value = false
      }
    )
+  } else if (isLeft(streamResult)) {
+    loading.value = false
+    toast.error(`${t("error.script_fail")}`)
+    let error: Error
+    if (typeof streamResult.left === "string") {
+      error = { name: "RequestFailure", message: streamResult.left }
+    } else {
+      error = streamResult.left
+    }
+    updateRESTResponse({
+      type: "script_fail",
+      error,
+    })
  }
 }

@@ -327,7 +326,46 @@ const clearContent = () => {
  resetRESTRequest()
 }

-const copyRequest = () => {
+const copyLinkIcon = hasNavigatorShare ? ref("share-2") : ref("copy")
+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()
@@ -335,15 +373,15 @@ const copyRequest = () => {
      .share({
        title: "Hoppscotch",
        text: `Hoppscotch • Open source API development ecosystem at ${time} on ${date}`,
-        url: window.location.href,
+        url: `https://hopp.sh/r${shareLink}`,
      })
      .then(() => {})
      .catch(() => {})
  } else {
-    copyToClipboard(window.location.href)
-    $toast.success(`${t("state.copied_to_clipboard")}`, {
-      icon: "content_paste",
-    })
+    copyLinkIcon.value = "check"
+    copyToClipboard(`https://hopp.sh/r${shareLink}`)
+    toast.success(`${t("state.copied_to_clipboard")}`)
+    setTimeout(() => (copyLinkIcon.value = "copy"), 2000)
  }
 }

@@ -381,10 +419,17 @@ const saveRequest = () => {
  }

  if (saveCtx.originLocation === "user-collection") {
-    editRESTRequest(saveCtx.folderPath, saveCtx.requestIndex, getRESTRequest())
-    $toast.success(`${t("request.saved")}`, {
-      icon: "playlist_add_check",
-    })
+    try {
+      editRESTRequest(
+        saveCtx.folderPath,
+        saveCtx.requestIndex,
+        getRESTRequest()
+      )
+      toast.success(`${t("request.saved")}`)
+    } catch (e) {
+      setRESTSaveContext(null)
+      saveRequest()
+    }
  } else if (saveCtx.originLocation === "team-collection") {
    const req = getRESTRequest()

@@ -397,20 +442,14 @@ const saveRequest = () => {
        saveCtx.requestID
      )
        .then(() => {
-          $toast.success(`${t("request.saved")}`, {
-            icon: "playlist_add_check",
-          })
+          toast.success(`${t("request.saved")}`)
        })
        .catch(() => {
-          $toast.error(t("profile.no_permission").toString(), {
-            icon: "error_outline",
-          })
+          toast.error(`${t("profile.no_permission")}`)
        })
    } catch (error) {
      showSaveRequestModal.value = true
-      $toast.error(t("error.something_went_wrong").toString(), {
-        icon: "error_outline",
-      })
+      toast.error(`${t("error.something_went_wrong")}`)
      console.error(error)
    }
  }
--- a/packages/hoppscotch-app/components/http/ResponseMeta.vue
+++ b/packages/hoppscotch-app/components/http/ResponseMeta.vue
@@ -1,27 +1,24 @@
 <template>
-  <div class="bg-primary flex p-4 top-0 z-10 sticky items-center">
+  <div
+    class="bg-primary flex p-4 top-0 z-10 sticky items-center overflow-auto hide-scrollbar whitespace-nowrap"
+  >
    <div
      v-if="response == null"
-      class="
-        flex flex-col flex-1
-        text-secondaryLight
-        items-center
-        justify-center
-      "
+      class="flex flex-col flex-1 text-secondaryLight items-center justify-center"
    >
-      <div class="flex space-x-2 pb-4 my-4">
+      <div class="flex space-x-2 my-4 pb-4">
        <div class="flex flex-col space-y-4 text-right items-end">
          <span class="flex flex-1 items-center">
-            {{ $t("shortcut.request.send_request") }}
+            {{ t("shortcut.request.send_request") }}
          </span>
          <span class="flex flex-1 items-center">
-            {{ $t("shortcut.general.show_all") }}
+            {{ t("shortcut.general.show_all") }}
          </span>
          <span class="flex flex-1 items-center">
-            {{ $t("shortcut.general.command_menu") }}
+            {{ t("shortcut.general.command_menu") }}
          </span>
          <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">
@@ -42,8 +39,8 @@
        </div>
      </div>
      <ButtonSecondary
-        :label="$t('app.documentation')"
-        to="https://docs.hoppscotch.io"
+        :label="t('app.documentation')"
+        to="https://docs.hoppscotch.io/features/response"
        svg="external-link"
        blank
        outline
@@ -56,7 +53,7 @@
        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'"
@@ -65,39 +62,59 @@
        <img
          :src="`/images/states/${$colorMode.value}/youre_lost.svg`"
          loading="lazy"
-          class="
-            flex-col
-            my-4
-            object-contain object-center
-            h-32
-            w-32
-            inline-flex
-          "
-          :alt="$t('empty.network_fail')"
+          class="flex-col object-contain object-center h-32 my-4 w-32 inline-flex"
+          :alt="`${t('error.network_fail')}`"
        />
-        <span class="text-center font-semibold mb-2">
-          {{ $t("error.network_fail") }}
+        <span class="font-semibold text-center mb-2">
+          {{ t("error.network_fail") }}
        </span>
-        <span class="text-center text-secondaryLight mb-4 max-w-sm">
-          {{ $t("helpers.network_fail") }}
+        <span
+          class="max-w-sm text-secondaryLight text-center mb-4 whitespace-normal"
+        >
+          {{ t("helpers.network_fail") }}
        </span>
        <AppInterceptor />
      </div>
+      <div
+        v-if="response.type === 'script_fail'"
+        class="flex flex-col flex-1 p-4 items-center justify-center"
+      >
+        <img
+          :src="`/images/states/${$colorMode.value}/youre_lost.svg`"
+          loading="lazy"
+          class="flex-col object-contain object-center h-32 my-4 w-32 inline-flex"
+          :alt="`${t('error.script_fail')}`"
+        />
+        <span class="font-semibold text-center mb-2">
+          {{ t("error.script_fail") }}
+        </span>
+        <span
+          class="max-w-sm text-secondaryLight text-center mb-4 whitespace-normal"
+        >
+          {{ t("helpers.script_fail") }}
+        </span>
+        <div
+          class="bg-primaryLight rounded font-mono w-full py-2 px-4 text-red-400 overflow-auto whitespace-normal"
+        >
+          {{ response.error.name }}: {{ response.error.message }}<br />
+          {{ response.error.stack }}
+        </div>
+      </div>
      <div
        v-if="response.type === 'success' || 'fail'"
        :class="statusCategory.className"
        class="font-semibold space-x-4"
      >
        <span v-if="response.statusCode">
-          <span class="text-secondary"> {{ $t("response.status") }}: </span>
-          {{ response.statusCode || $t("state.waiting_send_request") }}
+          <span class="text-secondary"> {{ t("response.status") }}: </span>
+          {{ 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>
@@ -110,6 +127,9 @@ 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
@@ -118,7 +138,8 @@ const props = defineProps<{
 const statusCategory = computed(() => {
  if (
    props.response.type === "loading" ||
-    props.response.type === "network_fail"
+    props.response.type === "network_fail" ||
+    props.response.type === "script_fail"
  )
    return ""
  return findStatusGroup(props.response.statusCode)
--- a/packages/hoppscotch-app/components/http/TestResult.vue
+++ b/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,29 +7,19 @@
      "
    >
      <div
-        class="
-          bg-primary
-          border-dividerLight border-b
-          flex flex-1
-          top-lowerSecondaryStickyFold
-          pl-4
-          z-10
-          sticky
-          items-center
-          justify-between
-        "
+        class="bg-primary border-b border-dividerLight flex flex-1 top-lowerSecondaryStickyFold pl-4 z-10 sticky items-center justify-between"
      >
        <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()"
        />
      </div>
-      <div class="divide-dividerLight border-dividerLight border-b divide-y-4">
+      <div class="divide-dividerLight border-b border-dividerLight divide-y-4">
        <div v-if="testResults.tests" class="divide-dividerLight divide-y-4">
          <HttpTestResultEntry
            v-for="(result, index) in testResults.tests"
@@ -64,9 +54,7 @@
            <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>
@@ -81,19 +69,19 @@
      <img
        :src="`/images/states/${$colorMode.value}/validation.svg`"
        loading="lazy"
-        class="flex-col my-4 object-contain object-center h-16 w-16 inline-flex"
-        :alt="$t('empty.tests')"
+        class="flex-col object-contain object-center h-16 my-4 w-16 inline-flex"
+        :alt="`${t('empty.tests')}`"
      />
      <span class="text-center pb-2">
-        {{ $t("empty.tests") }}
+        {{ t("empty.tests") }}
      </span>
      <span class="text-center pb-4">
-        {{ $t("helpers.tests") }}
+        {{ t("helpers.tests") }}
      </span>
      <ButtonSecondary
        outline
-        :label="`${$t('action.learn_more')}`"
-        to="https://docs.hoppscotch.io"
+        :label="`${t('action.learn_more')}`"
+        to="https://docs.hoppscotch.io/features/tests"
        blank
        svg="external-link"
        reverse
@@ -104,9 +92,11 @@
 </template>

 <script setup lang="ts">
-import { useReadonlyStream } from "~/helpers/utils/composables"
+import { useReadonlyStream, useI18n } from "~/helpers/utils/composables"
 import { restTestResults$, setRESTTestResults } from "~/newstore/RESTSession"

+const t = useI18n()
+
 const testResults = useReadonlyStream(restTestResults$, null)

 const clearContent = () => setRESTTestResults(null)
--- a/packages/hoppscotch-app/components/http/TestResultEntry.vue
+++ b/packages/hoppscotch-app/components/http/TestResultEntry.vue
@@ -6,7 +6,7 @@
    >
      {{ testResults.description }}
    </span>
-    <div v-if="testResults.expectResults" class="divide-y divide-dividerLight">
+    <div v-if="testResults.expectResults" class="divide-dividerLight divide-y">
      <HttpTestResultReport
        v-if="testResults.expectResults.length"
        :test-results="testResults"
--- a/packages/hoppscotch-app/components/http/Tests.vue
+++ b/packages/hoppscotch-app/components/http/Tests.vue
@@ -1,39 +1,29 @@
 <template>
-  <AppSection id="script" :label="`${$t('test.script')}`">
+  <AppSection id="script" :label="`${t('test.script')}`">
    <div
-      class="
-        bg-primary
-        border-b border-dividerLight
-        flex flex-1
-        top-upperSecondaryStickyFold
-        pl-4
-        z-10
-        sticky
-        items-center
-        justify-between
-      "
+      class="bg-primary border-b border-dividerLight flex flex-1 top-upperSecondaryStickyFold pl-4 z-10 sticky items-center justify-between"
    >
      <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"
+          svg="wrap-text"
          @click.native.prevent="linewrapEnabled = !linewrapEnabled"
        />
        <ButtonSecondary
          v-tippy="{ theme: 'tooltip' }"
-          :title="$t('action.clear')"
+          :title="t('action.clear')"
          svg="trash-2"
          @click.native="clearContent"
        />
@@ -44,28 +34,18 @@
        <div ref="testScriptEditor"></div>
      </div>
      <div
-        class="
-          bg-primary
-          h-full
-          top-upperTertiaryStickyFold
-          min-w-46
-          max-w-1/3
-          p-4
-          z-9
-          sticky
-          overflow-auto
-        "
+        class="bg-primary 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="font-bold text-secondaryLight pt-6">
-          {{ $t("test.snippets") }}
+          {{ t("test.snippets") }}
        </h4>
        <div class="flex flex-col pt-4">
          <TabSecondary
@@ -82,17 +62,15 @@
 </template>

 <script setup lang="ts">
-import { reactive, ref, useContext } from "@nuxtjs/composition-api"
+import { reactive, ref } 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 {
-  app: { i18n },
-} = useContext()
-const t = i18n.t.bind(i18n)
+const t = useI18n()

 const testScript = useTestScript()

--- a/packages/hoppscotch-app/components/lenses/HeadersRenderer.vue
+++ b/packages/hoppscotch-app/components/lenses/HeadersRenderer.vue
@@ -1,27 +1,17 @@
 <template>
  <div>
    <div
-      class="
-        bg-primary
-        border-b border-dividerLight
-        flex flex-1
-        top-lowerSecondaryStickyFold
-        pl-4
-        z-10
-        sticky
-        items-center
-        justify-between
-      "
+      class="bg-primary border-b border-dividerLight flex flex-1 top-lowerSecondaryStickyFold pl-4 z-10 sticky items-center justify-between"
    >
      <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"
        />
@@ -30,38 +20,19 @@
    <div
      v-for="(header, index) in headers"
      :key="`header-${index}`"
-      class="
-        divide-x divide-dividerLight
-        border-b border-dividerLight
-        flex
-        group
-      "
+      class="divide-dividerLight divide-x border-b border-dividerLight flex group"
    >
      <span
-        class="
-          flex flex-1
-          min-w-0
-          py-2
-          px-4
-          transition
-          group-hover:text-secondaryDark
-        "
+        class="flex flex-1 min-w-0 py-2 px-4 transition group-hover:text-secondaryDark"
      >
-        <span class="rounded-sm select-all truncate">
+        <span class="rounded-sm truncate select-all">
          {{ header.key }}
        </span>
      </span>
      <span
-        class="
-          flex flex-1
-          min-w-0
-          py-2
-          px-4
-          transition
-          group-hover:text-secondaryDark
-        "
+        class="flex flex-1 min-w-0 py-2 px-4 transition group-hover:text-secondaryDark"
      >
-        <span class="rounded-sm select-all truncate">
+        <span class="rounded-sm truncate select-all">
          {{ header.value }}
        </span>
      </span>
@@ -69,28 +40,26 @@
  </div>
 </template>

-<script>
-import { defineComponent } from "@nuxtjs/composition-api"
+<script setup lang="ts">
+import { ref } from "@nuxtjs/composition-api"
+import { HoppRESTHeader } from "@hoppscotch/data"
 import { copyToClipboard } from "~/helpers/utils/clipboard"
+import { useI18n, useToast } from "~/helpers/utils/composables"

-export default defineComponent({
-  props: {
-    headers: { type: Array, default: () => [] },
-  },
-  data() {
-    return {
-      copyIcon: "copy",
-    }
-  },
-  methods: {
-    copyHeaders() {
-      copyToClipboard(JSON.stringify(this.headers))
-      this.copyIcon = "check"
-      this.$toast.success(this.$t("state.copied_to_clipboard"), {
-        icon: "content_paste",
-      })
-      setTimeout(() => (this.copyIcon = "copy"), 1000)
-    },
-  },
-})
+const t = useI18n()
+
+const toast = useToast()
+
+const props = defineProps<{
+  headers: Array<HoppRESTHeader>
+}>()
+
+const copyIcon = ref("copy")
+
+const copyHeaders = () => {
+  copyToClipboard(JSON.stringify(props.headers))
+  copyIcon.value = "check"
+  toast.success(`${t("state.copied_to_clipboard")}`)
+  setTimeout(() => (copyIcon.value = "copy"), 1000)
+}
 </script>
--- a/packages/hoppscotch-app/components/lenses/renderers/HTMLLensRenderer.vue
+++ b/packages/hoppscotch-app/components/lenses/renderers/HTMLLensRenderer.vue
@@ -1,35 +1,25 @@
 <template>
  <div class="flex flex-col flex-1">
    <div
-      class="
-        bg-primary
-        border-b border-dividerLight
-        flex flex-1
-        top-lowerSecondaryStickyFold
-        pl-4
-        z-10
-        sticky
-        items-center
-        justify-between
-      "
+      class="bg-primary border-b border-dividerLight flex flex-1 top-lowerSecondaryStickyFold pl-4 z-10 sticky items-center justify-between"
    >
      <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"
+          svg="wrap-text"
          @click.native.prevent="linewrapEnabled = !linewrapEnabled"
        />
        <ButtonSecondary
          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"
@@ -38,7 +28,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"
        />
@@ -46,7 +36,7 @@
          v-if="response.body"
          ref="copyResponse"
          v-tippy="{ theme: 'tooltip' }"
-          :title="$t('action.copy')"
+          :title="t('action.copy')"
          :svg="copyIcon"
          @click.native="copyResponse"
        />
@@ -64,20 +54,19 @@
 </template>

 <script setup lang="ts">
-import { computed, ref, useContext, reactive } from "@nuxtjs/composition-api"
+import { computed, ref, 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,
-  app: { i18n },
-} = useContext()
-const t = i18n.t.bind(i18n)
+const toast = useToast()

 const responseBodyText = computed(() => {
  if (
@@ -127,9 +116,7 @@ const downloadResponse = () => {
  document.body.appendChild(a)
  a.click()
  downloadIcon.value = "check"
-  $toast.success(`${t("state.download_started")}`, {
-    icon: "downloading",
-  })
+  toast.success(`${t("state.download_started")}`)
  setTimeout(() => {
    document.body.removeChild(a)
    URL.revokeObjectURL(url)
@@ -140,9 +127,7 @@ const downloadResponse = () => {
 const copyResponse = () => {
  copyToClipboard(responseBodyText.value)
  copyIcon.value = "check"
-  $toast.success(`${t("state.copied_to_clipboard")}`, {
-    icon: "content_paste",
-  })
+  toast.success(`${t("state.copied_to_clipboard")}`)
  setTimeout(() => (copyIcon.value = "copy"), 1000)
 }

--- a/packages/hoppscotch-app/components/lenses/renderers/ImageLensRenderer.vue
+++ b/packages/hoppscotch-app/components/lenses/renderers/ImageLensRenderer.vue
@@ -1,17 +1,7 @@
 <template>
  <div>
    <div
-      class="
-        bg-primary
-        border-b border-dividerLight
-        flex flex-1
-        top-lowerSecondaryStickyFold
-        pl-4
-        z-10
-        sticky
-        items-center
-        justify-between
-      "
+      class="bg-primary border-b border-dividerLight flex flex-1 top-lowerSecondaryStickyFold pl-4 z-10 sticky items-center justify-between"
    >
      <label class="font-semibold text-secondaryLight">
        {{ $t("response.body") }}
@@ -103,9 +93,7 @@ export default defineComponent({
      document.body.appendChild(a)
      a.click()
      this.downloadIcon = "check"
-      this.$toast.success(this.$t("state.download_started"), {
-        icon: "downloading",
-      })
+      this.$toast.success(this.$t("state.download_started"))
      setTimeout(() => {
        document.body.removeChild(a)
        URL.revokeObjectURL(url)
--- a/packages/hoppscotch-app/components/lenses/renderers/JSONLensRenderer.vue
+++ b/packages/hoppscotch-app/components/lenses/renderers/JSONLensRenderer.vue
@@ -1,35 +1,25 @@
 <template>
  <div>
    <div
-      class="
-        bg-primary
-        border-b border-dividerLight
-        flex flex-1
-        top-lowerSecondaryStickyFold
-        pl-4
-        z-10
-        sticky
-        items-center
-        justify-between
-      "
+      class="bg-primary border-b border-dividerLight flex flex-1 top-lowerSecondaryStickyFold pl-4 z-10 sticky items-center justify-between"
    >
      <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"
+          svg="wrap-text"
          @click.native.prevent="linewrapEnabled = !linewrapEnabled"
        />
        <ButtonSecondary
          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"
        />
@@ -37,7 +27,7 @@
          v-if="response.body"
          ref="copyResponse"
          v-tippy="{ theme: 'tooltip' }"
-          :title="$t('action.copy')"
+          :title="t('action.copy')"
          :svg="copyIcon"
          @click.native="copyResponse"
        />
@@ -46,17 +36,7 @@
    <div ref="jsonResponse"></div>
    <div
      v-if="outlinePath"
-      class="
-        bg-primaryLight
-        border-t border-dividerLight
-        flex flex-nowrap flex-1
-        px-2
-        bottom-0
-        z-10
-        sticky
-        overflow-auto
-        hide-scrollbar
-      "
+      class="bg-primaryLight border-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"
@@ -144,7 +124,7 @@
 </template>

 <script setup lang="ts">
-import { computed, ref, useContext, reactive } from "@nuxtjs/composition-api"
+import { computed, ref, reactive } from "@nuxtjs/composition-api"
 import { useCodemirror } from "~/helpers/editor/codemirror"
 import { copyToClipboard } from "~/helpers/utils/clipboard"
 import { HoppRESTResponse } from "~/helpers/types/HoppRESTResponse"
@@ -154,16 +134,15 @@ import {
  convertIndexToLineCh,
  convertLineChToIndex,
 } from "~/helpers/editor/utils"
+import { useI18n, useToast } from "~/helpers/utils/composables"
+
+const t = useI18n()

 const props = defineProps<{
  response: HoppRESTResponse
 }>()

-const {
-  $toast,
-  app: { i18n },
-} = useContext()
-const t = i18n.t.bind(i18n)
+const toast = useToast()

 const responseBodyText = computed(() => {
  if (
@@ -234,9 +213,7 @@ const downloadResponse = () => {
  document.body.appendChild(a)
  a.click()
  downloadIcon.value = "check"
-  $toast.success(`${t("state.download_started")}`, {
-    icon: "downloading",
-  })
+  toast.success(`${t("state.download_started")}`)
  setTimeout(() => {
    document.body.removeChild(a)
    URL.revokeObjectURL(url)
@@ -256,9 +233,7 @@ const outlinePath = computed(() => {
 const copyResponse = () => {
  copyToClipboard(responseBodyText.value)
  copyIcon.value = "check"
-  $toast.success(`${t("state.copied_to_clipboard")}`, {
-    icon: "content_paste",
-  })
+  toast.success(`${t("state.copied_to_clipboard")}`)
  setTimeout(() => (copyIcon.value = "copy"), 1000)
 }
 </script>
--- a/packages/hoppscotch-app/components/lenses/renderers/RawLensRenderer.vue
+++ b/packages/hoppscotch-app/components/lenses/renderers/RawLensRenderer.vue
@@ -1,35 +1,25 @@
 <template>
  <div>
    <div
-      class="
-        bg-primary
-        border-b border-dividerLight
-        flex flex-1
-        top-lowerSecondaryStickyFold
-        pl-4
-        z-10
-        sticky
-        items-center
-        justify-between
-      "
+      class="bg-primary border-b border-dividerLight flex flex-1 top-lowerSecondaryStickyFold pl-4 z-10 sticky items-center justify-between"
    >
      <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"
+          svg="wrap-text"
          @click.native.prevent="linewrapEnabled = !linewrapEnabled"
        />
        <ButtonSecondary
          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"
        />
@@ -37,7 +27,7 @@
          v-if="response.body"
          ref="copyResponse"
          v-tippy="{ theme: 'tooltip' }"
-          :title="$t('action.copy')"
+          :title="t('action.copy')"
          :svg="copyIcon"
          @click.native="copyResponse"
        />
@@ -48,20 +38,19 @@
 </template>

 <script setup lang="ts">
-import { ref, useContext, computed, reactive } from "@nuxtjs/composition-api"
+import { ref, 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,
-  app: { i18n },
-} = useContext()
-const t = i18n.t.bind(i18n)
+const toast = useToast()

 const responseBodyText = computed(() => {
  if (
@@ -117,9 +106,7 @@ const downloadResponse = () => {
  document.body.appendChild(a)
  a.click()
  downloadIcon.value = "check"
-  $toast.success(`${t("state.download_started")}`, {
-    icon: "downloading",
-  })
+  toast.success(`${t("state.download_started")}`)
  setTimeout(() => {
    document.body.removeChild(a)
    URL.revokeObjectURL(url)
@@ -130,9 +117,7 @@ const downloadResponse = () => {
 const copyResponse = () => {
  copyToClipboard(responseBodyText.value)
  copyIcon.value = "check"
-  $toast.success(`${t("state.copied_to_clipboard")}`, {
-    icon: "content_paste",
-  })
+  toast.success(`${t("state.copied_to_clipboard")}`)
  setTimeout(() => (copyIcon.value = "copy"), 1000)
 }
 </script>
--- a/packages/hoppscotch-app/components/lenses/renderers/XMLLensRenderer.vue
+++ b/packages/hoppscotch-app/components/lenses/renderers/XMLLensRenderer.vue
@@ -1,35 +1,25 @@
 <template>
  <div>
    <div
-      class="
-        bg-primary
-        border-b border-dividerLight
-        flex flex-1
-        top-lowerSecondaryStickyFold
-        pl-4
-        z-10
-        sticky
-        items-center
-        justify-between
-      "
+      class="bg-primary border-b border-dividerLight flex flex-1 top-lowerSecondaryStickyFold pl-4 z-10 sticky items-center justify-between"
    >
      <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"
+          svg="wrap-text"
          @click.native.prevent="linewrapEnabled = !linewrapEnabled"
        />
        <ButtonSecondary
          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"
        />
@@ -37,7 +27,7 @@
          v-if="response.body"
          ref="copyResponse"
          v-tippy="{ theme: 'tooltip' }"
-          :title="$t('action.copy')"
+          :title="t('action.copy')"
          :svg="copyIcon"
          @click.native="copyResponse"
        />
@@ -48,20 +38,19 @@
 </template>

 <script setup lang="ts">
-import { computed, ref, useContext, reactive } from "@nuxtjs/composition-api"
+import { computed, ref, 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,
-  app: { i18n },
-} = useContext()
-const t = i18n.t.bind(i18n)
+const toast = useToast()

 const responseBodyText = computed(() => {
  if (
@@ -117,9 +106,7 @@ const downloadResponse = () => {
  document.body.appendChild(a)
  a.click()
  downloadIcon.value = "check"
-  $toast.success(`${t("state.download_started")}`, {
-    icon: "downloading",
-  })
+  toast.success(`${t("state.download_started")}`)
  setTimeout(() => {
    document.body.removeChild(a)
    URL.revokeObjectURL(url)
@@ -130,9 +117,7 @@ const downloadResponse = () => {
 const copyResponse = () => {
  copyToClipboard(responseBodyText.value)
  copyIcon.value = "check"
-  $toast.success(`${t("state.copied_to_clipboard")}`, {
-    icon: "content_paste",
-  })
+  toast.success(`${t("state.copied_to_clipboard")}`)
  setTimeout(() => (copyIcon.value = "copy"), 1000)
 }
 </script>
--- a/packages/hoppscotch-app/components/profile/Picture.vue
+++ b/packages/hoppscotch-app/components/profile/Picture.vue
@@ -1,15 +1,7 @@
 <template>
  <div class="cursor-pointer flex h-5 w-5 relative items-center justify-center">
    <img
-      class="
-        bg-primaryDark bg-primaryLight
-        rounded-full
-        object-cover object-center
-        h-5
-        transition
-        w-5
-        absolute
-      "
+      class="bg-primaryDark rounded-full object-cover object-center h-5 transition w-5 absolute"
      :src="url"
      :alt="alt"
      loading="lazy"
@@ -17,16 +9,7 @@
    <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>
--- a/packages/hoppscotch-app/components/realtime/Log.vue
+++ b/packages/hoppscotch-app/components/realtime/Log.vue
@@ -1,17 +1,7 @@
 <template>
  <div class="flex flex-col">
    <div
-      class="
-        bg-primary
-        border-b border-dividerLight
-        flex flex-1
-        pl-4
-        top-0
-        z-10
-        sticky
-        items-center
-        justify-between
-      "
+      class="bg-primary border-b border-dividerLight flex flex-1 pl-4 top-0 z-10 sticky items-center justify-between"
    >
      <label for="log" class="font-semibold text-secondaryLight py-2">
        {{ title }}
@@ -26,7 +16,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>
@@ -34,6 +24,9 @@
 <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: () => [] },
--- a/packages/hoppscotch-app/components/realtime/Mqtt.vue
+++ b/packages/hoppscotch-app/components/realtime/Mqtt.vue
@@ -9,7 +9,10 @@
  >
    <Pane size="75" min-size="65" class="hide-scrollbar !overflow-auto">
      <Splitpanes class="smart-splitter" :horizontal="COLUMN_LAYOUT">
-        <Pane class="hide-scrollbar !overflow-auto">
+        <Pane
+          :size="COLUMN_LAYOUT ? 45 : 50"
+          class="hide-scrollbar !overflow-auto"
+        >
          <AppSection label="request">
            <div
              class="bg-primary flex flex-col space-y-4 p-4 top-0 z-10 sticky"
@@ -21,18 +24,7 @@
                  type="url"
                  autocomplete="off"
                  spellcheck="false"
-                  class="
-                    bg-primaryLight
-                    border border-divider
-                    rounded
-                    text-secondaryDark
-                    w-full
-                    py-2
-                    px-4
-                    hover:border-dividerDark
-                    focus-visible:bg-transparent
-                    focus-visible:border-dividerDark
-                  "
+                  class="bg-primaryLight border 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"
@@ -71,7 +63,10 @@
            </div>
          </AppSection>
        </Pane>
-        <Pane class="hide-scrollbar !overflow-auto">
+        <Pane
+          :size="COLUMN_LAYOUT ? 65 : 50"
+          class="hide-scrollbar !overflow-auto"
+        >
          <AppSection label="response">
            <RealtimeLog :title="$t('mqtt.log')" :log="log" />
          </AppSection>
@@ -125,13 +120,7 @@
          />
        </div>
        <div
-          class="
-            border-t border-dividerLight
-            flex flex-col flex-1
-            mt-4
-            p-4
-            inline-flex
-          "
+          class="border-t border-dividerLight flex flex-col flex-1 mt-4 p-4 inline-flex"
        >
          <label for="sub_topic" class="font-semibold text-secondaryLight">
            {{ $t("mqtt.topic") }}
@@ -172,6 +161,22 @@ import debounce from "lodash/debounce"
 import { logHoppRequestRunToAnalytics } from "~/helpers/fb/analytics"
 import { useSetting } from "~/newstore/settings"
 import useWindowSize from "~/helpers/utils/useWindowSize"
+import {
+  MQTTEndpoint$,
+  setMQTTEndpoint,
+  MQTTConnectingState$,
+  MQTTConnectionState$,
+  setMQTTConnectingState,
+  setMQTTConnectionState,
+  MQTTSubscriptionState$,
+  setMQTTSubscriptionState,
+  MQTTSocket$,
+  setMQTTSocket,
+  MQTTLog$,
+  setMQTTLog,
+  addMQTTLogLine,
+} from "~/newstore/MQTTSession"
+import { useStream } from "~/helpers/utils/composables"

 export default defineComponent({
  components: { Splitpanes, Pane },
@@ -181,21 +186,33 @@ export default defineComponent({
      SIDEBAR: useSetting("SIDEBAR"),
      COLUMN_LAYOUT: useSetting("COLUMN_LAYOUT"),
      SIDEBAR_ON_LEFT: useSetting("SIDEBAR_ON_LEFT"),
+      url: useStream(MQTTEndpoint$, "", setMQTTEndpoint),
+      connectionState: useStream(
+        MQTTConnectionState$,
+        false,
+        setMQTTConnectionState
+      ),
+      connectingState: useStream(
+        MQTTConnectingState$,
+        false,
+        setMQTTConnectingState
+      ),
+      subscriptionState: useStream(
+        MQTTSubscriptionState$,
+        false,
+        setMQTTSubscriptionState
+      ),
+      log: useStream(MQTTLog$, null, setMQTTLog),
+      client: useStream(MQTTSocket$, null, setMQTTSocket),
    }
  },
  data() {
    return {
-      url: "wss://test.mosquitto.org:8081",
      isUrlValid: true,
-      client: null,
      pub_topic: "",
      sub_topic: "",
      msg: "",
-      connectionState: false,
-      connectingState: false,
-      log: null,
      manualDisconnect: false,
-      subscriptionState: false,
      username: "",
      password: "",
    }
@@ -272,7 +289,7 @@ export default defineComponent({
    onConnectionFailure() {
      this.connectingState = false
      this.connectionState = false
-      this.log.push({
+      addMQTTLogLine({
        payload: this.$t("error.something_went_wrong"),
        source: "info",
        color: "#ff5555",
@@ -282,18 +299,16 @@ export default defineComponent({
    onConnectionSuccess() {
      this.connectingState = false
      this.connectionState = true
-      this.log.push({
+      addMQTTLogLine({
        payload: this.$t("state.connected_to", { name: this.url }),
        source: "info",
        color: "var(--accent-color)",
        ts: new Date().toLocaleTimeString(),
      })
-      this.$toast.success(this.$t("state.connected"), {
-        icon: "sync",
-      })
+      this.$toast.success(this.$t("state.connected"))
    },
    onMessageArrived({ payloadString, destinationName }) {
-      this.log.push({
+      addMQTTLogLine({
        payload: `Message: ${payloadString} arrived on topic: ${destinationName}`,
        source: "info",
        color: "var(--accent-color)",
@@ -310,7 +325,7 @@ export default defineComponent({
    disconnect() {
      this.manualDisconnect = true
      this.client.disconnect()
-      this.log.push({
+      addMQTTLogLine({
        payload: this.$t("state.disconnected_from", { name: this.url }),
        source: "info",
        color: "#ff5555",
@@ -321,13 +336,9 @@ export default defineComponent({
      this.connectingState = false
      this.connectionState = false
      if (this.manualDisconnect) {
-        this.$toast.error(this.$t("state.disconnected"), {
-          icon: "sync_disabled",
-        })
+        this.$toast.error(this.$t("state.disconnected"))
      } else {
-        this.$toast.error(this.$t("error.something_went_wrong"), {
-          icon: "error_outline",
-        })
+        this.$toast.error(this.$t("error.something_went_wrong"))
      }
      this.manualDisconnect = false
      this.subscriptionState = false
@@ -335,14 +346,14 @@ export default defineComponent({
    publish() {
      try {
        this.client.publish(this.pub_topic, this.msg, 0, false)
-        this.log.push({
+        addMQTTLogLine({
          payload: `Published message: ${this.msg} to topic: ${this.pub_topic}`,
          ts: new Date().toLocaleTimeString(),
          source: "info",
          color: "var(--accent-color)",
        })
      } catch (e) {
-        this.log.push({
+        addMQTTLogLine({
          payload:
            this.$t("error.something_went_wrong") +
            `while publishing msg: ${this.msg} to topic:  ${this.pub_topic}`,
@@ -366,7 +377,7 @@ export default defineComponent({
          onFailure: this.usubFailure,
        })
      } catch (e) {
-        this.log.push({
+        addMQTTLogLine({
          payload:
            this.$t("error.something_went_wrong") +
            `while subscribing to topic:  ${this.sub_topic}`,
@@ -378,7 +389,7 @@ export default defineComponent({
    },
    usubSuccess() {
      this.subscriptionState = !this.subscriptionState
-      this.log.push({
+      addMQTTLogLine({
        payload:
          `Successfully ` +
          (this.subscriptionState ? "subscribed" : "unsubscribed") +
@@ -389,7 +400,7 @@ export default defineComponent({
      })
    },
    usubFailure() {
-      this.log.push({
+      addMQTTLogLine({
        payload:
          `Failed to ` +
          (this.subscriptionState ? "unsubscribe" : "subscribe") +
--- a/packages/hoppscotch-app/components/realtime/Socketio.vue
+++ b/packages/hoppscotch-app/components/realtime/Socketio.vue
@@ -9,7 +9,10 @@
  >
    <Pane size="75" min-size="65" class="hide-scrollbar !overflow-auto">
      <Splitpanes class="smart-splitter" :horizontal="COLUMN_LAYOUT">
-        <Pane class="hide-scrollbar !overflow-auto">
+        <Pane
+          :size="COLUMN_LAYOUT ? 45 : 50"
+          class="hide-scrollbar !overflow-auto"
+        >
          <AppSection label="request">
            <div class="bg-primary flex p-4 top-0 z-10 sticky">
              <div class="space-x-2 flex-1 inline-flex">
@@ -28,21 +31,7 @@
                            id="client-version"
                            v-tippy="{ theme: 'tooltip' }"
                            title="socket.io-client version"
-                            class="
-                              bg-primaryLight
-                              border border-divider
-                              rounded-l
-                              cursor-pointer
-                              flex
-                              font-semibold
-                              text-secondaryDark
-                              py-2
-                              px-4
-                              w-26
-                              hover:border-dividerDark
-                              focus-visible:bg-transparent
-                              focus-visible:border-dividerDark
-                            "
+                            class="bg-primaryLight border 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"
@@ -64,18 +53,7 @@
                    autocomplete="off"
                    spellcheck="false"
                    :class="{ error: !urlValid }"
-                    class="
-                      bg-primaryLight
-                      border border-divider
-                      flex flex-1
-                      text-secondaryDark
-                      w-full
-                      py-2
-                      px-4
-                      hover:border-dividerDark
-                      focus-visible:bg-transparent
-                      focus-visible:border-dividerDark
-                    "
+                    class="bg-primaryLight border 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"
@@ -83,19 +61,7 @@
                  <input
                    id="socketio-path"
                    v-model="path"
-                    class="
-                      bg-primaryLight
-                      border border-divider
-                      rounded-r
-                      flex flex-1
-                      text-secondaryDark
-                      w-full
-                      py-2
-                      px-4
-                      hover:border-dividerDark
-                      focus-visible:bg-transparent
-                      focus-visible:border-dividerDark
-                    "
+                    class="bg-primaryLight border 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"
@@ -118,9 +84,12 @@
            </div>
          </AppSection>
        </Pane>
-        <Pane class="hide-scrollbar !overflow-auto">
+        <Pane
+          :size="COLUMN_LAYOUT ? 65 : 50"
+          class="hide-scrollbar !overflow-auto"
+        >
          <AppSection label="response">
-            <RealtimeLog :title="$t('socketio.log')" :log="communication.log" />
+            <RealtimeLog :title="$t('socketio.log')" :log="log" />
          </AppSection>
        </Pane>
      </Splitpanes>
@@ -158,7 +127,6 @@
              v-tippy="{ theme: 'tooltip' }"
              :title="$t('add.new')"
              svg="plus"
-              class="rounded"
              @click.native="addCommunicationInput"
            />
          </div>
@@ -184,7 +152,6 @@
                v-tippy="{ theme: 'tooltip' }"
                :title="$t('action.remove')"
                svg="trash"
-                class="rounded"
                color="red"
                outline
                @click.native="removeCommunicationInput({ index })"
@@ -219,6 +186,24 @@ import debounce from "lodash/debounce"
 import { logHoppRequestRunToAnalytics } from "~/helpers/fb/analytics"
 import { useSetting } from "~/newstore/settings"
 import useWindowSize from "~/helpers/utils/useWindowSize"
+import {
+  SIOEndpoint$,
+  setSIOEndpoint,
+  SIOVersion$,
+  setSIOVersion,
+  SIOPath$,
+  setSIOPath,
+  SIOConnectionState$,
+  SIOConnectingState$,
+  setSIOConnectionState,
+  setSIOConnectingState,
+  SIOSocket$,
+  setSIOSocket,
+  SIOLog$,
+  setSIOLog,
+  addSIOLogLine,
+} from "~/newstore/SocketIOSession"
+import { useStream } from "~/helpers/utils/composables"

 const socketIoClients = {
  v4: ClientV4,
@@ -235,20 +220,27 @@ export default defineComponent({
      COLUMN_LAYOUT: useSetting("COLUMN_LAYOUT"),
      SIDEBAR_ON_LEFT: useSetting("SIDEBAR_ON_LEFT"),
      socketIoClients,
+      url: useStream(SIOEndpoint$, "", setSIOEndpoint),
+      clientVersion: useStream(SIOVersion$, "", setSIOVersion),
+      path: useStream(SIOPath$, "", setSIOPath),
+      connectingState: useStream(
+        SIOConnectingState$,
+        false,
+        setSIOConnectingState
+      ),
+      connectionState: useStream(
+        SIOConnectionState$,
+        false,
+        setSIOConnectionState
+      ),
+      io: useStream(SIOSocket$, null, setSIOSocket),
+      log: useStream(SIOLog$, [], setSIOLog),
    }
  },
  data() {
    return {
-      // default version is set to v4
-      clientVersion: "v4",
-      url: "wss://hoppscotch-socketio.herokuapp.com",
-      path: "/socket.io",
      isUrlValid: true,
-      connectingState: false,
-      connectionState: false,
-      io: null,
      communication: {
-        log: null,
        eventName: "",
        inputs: [""],
      },
@@ -298,7 +290,7 @@ export default defineComponent({
    },
    connect() {
      this.connectingState = true
-      this.communication.log = [
+      this.log = [
        {
          payload: this.$t("state.connecting_to", { name: this.url }),
          source: "info",
@@ -317,7 +309,7 @@ export default defineComponent({
        this.io.on("connect", () => {
          this.connectingState = false
          this.connectionState = true
-          this.communication.log = [
+          this.log = [
            {
              payload: this.$t("state.connected_to", { name: this.url }),
              source: "info",
@@ -325,13 +317,11 @@ export default defineComponent({
              ts: new Date().toLocaleTimeString(),
            },
          ]
-          this.$toast.success(this.$t("state.connected"), {
-            icon: "sync",
-          })
+          this.$toast.success(this.$t("state.connected"))
        })
        this.io.on("*", ({ data }) => {
          const [eventName, message] = data
-          this.communication.log.push({
+          addSIOLogLine({
            payload: `[${eventName}] ${message ? JSON.stringify(message) : ""}`,
            source: "server",
            ts: new Date().toLocaleTimeString(),
@@ -349,21 +339,17 @@ export default defineComponent({
        this.io.on("disconnect", () => {
          this.connectingState = false
          this.connectionState = false
-          this.communication.log.push({
+          addSIOLogLine({
            payload: this.$t("state.disconnected_from", { name: this.url }),
            source: "info",
            color: "#ff5555",
            ts: new Date().toLocaleTimeString(),
          })
-          this.$toast.error(this.$t("state.disconnected"), {
-            icon: "sync_disabled",
-          })
+          this.$toast.error(this.$t("state.disconnected"))
        })
      } catch (e) {
        this.handleError(e)
-        this.$toast.error(this.$t("error.something_went_wrong"), {
-          icon: "error_outline",
-        })
+        this.$toast.error(this.$t("error.something_went_wrong"))
      }

      logHoppRequestRunToAnalytics({
@@ -377,14 +363,14 @@ export default defineComponent({
      this.disconnect()
      this.connectingState = false
      this.connectionState = false
-      this.communication.log.push({
+      addSIOLogLine({
        payload: this.$t("error.something_went_wrong"),
        source: "info",
        color: "#ff5555",
        ts: new Date().toLocaleTimeString(),
      })
      if (error !== null)
-        this.communication.log.push({
+        addSIOLogLine({
          payload: error,
          source: "info",
          color: "#ff5555",
@@ -406,14 +392,14 @@ export default defineComponent({
      if (this.io) {
        this.io.emit(eventName, ...messages, (data) => {
          // receive response from server
-          this.communication.log.push({
+          addSIOLogLine({
            payload: `[${eventName}] ${JSON.stringify(data)}`,
            source: "server",
            ts: new Date().toLocaleTimeString(),
          })
        })

-        this.communication.log.push({
+        addSIOLogLine({
          payload: `[${eventName}] ${JSON.stringify(messages)}`,
          source: "client",
          ts: new Date().toLocaleTimeString(),
--- a/packages/hoppscotch-app/components/realtime/Sse.vue
+++ b/packages/hoppscotch-app/components/realtime/Sse.vue
@@ -1,6 +1,6 @@
 <template>
  <Splitpanes class="smart-splitter" :horizontal="COLUMN_LAYOUT">
-    <Pane class="hide-scrollbar !overflow-auto">
+    <Pane :size="COLUMN_LAYOUT ? 45 : 50" class="hide-scrollbar !overflow-auto">
      <div class="bg-primary flex p-4 top-0 z-10 sticky">
        <div class="space-x-2 flex-1 inline-flex">
          <div class="flex flex-1">
@@ -10,51 +10,21 @@
              type="url"
              autocomplete="off"
              :class="{ error: !serverValid }"
-              class="
-                bg-primaryLight
-                border border-divider
-                rounded-l
-                flex flex-1
-                text-secondaryDark
-                w-full
-                py-2
-                px-4
-                hover:border-dividerDark
-                focus-visible:bg-transparent focus-visible:border-dividerDark
-              "
+              class="bg-primaryLight border 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-t border-b border-divider
-                font-semibold
-                text-secondaryLight
-                py-2
-                px-4
-                truncate
-              "
+              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 border-divider
-                rounded-r
-                flex flex-1
-                text-secondaryDark
-                w-full
-                py-2
-                px-4
-                hover:border-dividerDark
-                focus-visible:bg-transparent focus-visible:border-dividerDark
-              "
+              class="bg-primaryLight border 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"
@@ -74,11 +44,11 @@
        </div>
      </div>
    </Pane>
-    <Pane class="hide-scrollbar !overflow-auto">
+    <Pane :size="COLUMN_LAYOUT ? 65 : 50" class="hide-scrollbar !overflow-auto">
      <AppSection label="response">
        <ul>
          <li>
-            <RealtimeLog :title="$t('sse.log')" :log="events.log" />
+            <RealtimeLog :title="$t('sse.log')" :log="log" />
            <div id="result"></div>
          </li>
        </ul>
@@ -94,26 +64,47 @@ import "splitpanes/dist/splitpanes.css"
 import debounce from "lodash/debounce"
 import { logHoppRequestRunToAnalytics } from "~/helpers/fb/analytics"
 import { useSetting } from "~/newstore/settings"
+import {
+  SSEEndpoint$,
+  setSSEEndpoint,
+  SSEEventType$,
+  setSSEEventType,
+  SSESocket$,
+  setSSESocket,
+  SSEConnectingState$,
+  SSEConnectionState$,
+  setSSEConnectionState,
+  setSSEConnectingState,
+  SSELog$,
+  setSSELog,
+  addSSELogLine,
+} from "~/newstore/SSESession"
+import { useStream } from "~/helpers/utils/composables"

 export default defineComponent({
  components: { Splitpanes, Pane },
  setup() {
    return {
      COLUMN_LAYOUT: useSetting("COLUMN_LAYOUT"),
+      connectionSSEState: useStream(
+        SSEConnectionState$,
+        false,
+        setSSEConnectionState
+      ),
+      connectingState: useStream(
+        SSEConnectingState$,
+        false,
+        setSSEConnectingState
+      ),
+      server: useStream(SSEEndpoint$, "", setSSEEndpoint),
+      eventType: useStream(SSEEventType$, "", setSSEEventType),
+      sse: useStream(SSESocket$, null, setSSESocket),
+      log: useStream(SSELog$, [], setSSELog),
    }
  },
  data() {
    return {
-      connectionSSEState: false,
-      connectingState: false,
-      server: "https://express-eventsource.herokuapp.com/events",
      isUrlValid: true,
-      sse: null,
-      events: {
-        log: null,
-        input: "",
-      },
-      eventType: "data",
    }
  },
  computed: {
@@ -150,7 +141,7 @@ export default defineComponent({
    },
    start() {
      this.connectingState = true
-      this.events.log = [
+      this.log = [
        {
          payload: this.$t("state.connecting_to", { name: this.server }),
          source: "info",
@@ -163,7 +154,7 @@ export default defineComponent({
          this.sse.onopen = () => {
            this.connectingState = false
            this.connectionSSEState = true
-            this.events.log = [
+            this.log = [
              {
                payload: this.$t("state.connected_to", { name: this.server }),
                source: "info",
@@ -171,16 +162,14 @@ export default defineComponent({
                ts: new Date().toLocaleTimeString(),
              },
            ]
-            this.$toast.success(this.$t("state.connected"), {
-              icon: "sync",
-            })
+            this.$toast.success(this.$t("state.connected"))
          }
          this.sse.onerror = () => {
            this.handleSSEError()
          }
          this.sse.onclose = () => {
            this.connectionSSEState = false
-            this.events.log.push({
+            addSSELogLine({
              payload: this.$t("state.disconnected_from", {
                name: this.server,
              }),
@@ -188,12 +177,10 @@ export default defineComponent({
              color: "#ff5555",
              ts: new Date().toLocaleTimeString(),
            })
-            this.$toast.error(this.$t("state.disconnected"), {
-              icon: "sync_disabled",
-            })
+            this.$toast.error(this.$t("state.disconnected"))
          }
          this.sse.addEventListener(this.eventType, ({ data }) => {
-            this.events.log.push({
+            addSSELogLine({
              payload: data,
              source: "server",
              ts: new Date().toLocaleTimeString(),
@@ -201,12 +188,10 @@ export default defineComponent({
          })
        } catch (e) {
          this.handleSSEError(e)
-          this.$toast.error(this.$t("error.something_went_wrong"), {
-            icon: "error_outline",
-          })
+          this.$toast.error(this.$t("error.something_went_wrong"))
        }
      } else {
-        this.events.log = [
+        this.log = [
          {
            payload: this.$t("error.browser_support_sse"),
            source: "info",
@@ -223,14 +208,14 @@ export default defineComponent({
    handleSSEError(error) {
      this.stop()
      this.connectionSSEState = false
-      this.events.log.push({
+      addSSELogLine({
        payload: this.$t("error.something_went_wrong"),
        source: "info",
        color: "#ff5555",
        ts: new Date().toLocaleTimeString(),
      })
      if (error !== null)
-        this.events.log.push({
+        addSSELogLine({
          payload: error,
          source: "info",
          color: "#ff5555",
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Andrew Bastin	0ffc9e3a4d	refactor: network strategy rewrite	2021-12-12 16:43:07 +05:30
liyasthomas	75e34feabf	feat: context menu for secondary actions in collection, environment and team components - #2005	2021-12-11 08:03:39 +05:30
liyasthomas	fe13de2ea0	feat: show existing name while renaming collections/folders/requests - resolved #2006	2021-12-10 10:55:49 +05:30
liyasthomas	dec26ce2aa	feat: update and verify email address	2021-12-08 20:50:59 +05:30
liyasthomas	b0f02fee57	feat: change and verify user's email address	2021-12-07 06:52:43 +05:30
Andrew Bastin	02be413eff	fix: fail state requests with response data can run tests fixes #1996	2021-12-06 20:06:19 +05:30
liyasthomas	42849e6853	chore(deps): bump	2021-12-05 21:18:55 +05:30
liyasthomas	e7535d505e	fix: catch an edge case while saving request	2021-12-05 18:21:41 +05:30
liyasthomas	fb6015ce26	refactor: improve ui consistency	2021-12-05 10:04:01 +05:30
liyasthomas	f3a38bab3c	chore(deps): bump	2021-12-05 06:15:21 +05:30
liyasthomas	1a1f45401c	fix: package import location	2021-12-04 20:57:10 +05:30
Andrew Bastin	4a43807f34	fix: formdata inconsistencies	2021-12-04 19:50:04 +05:30
liyasthomas	88cc21e3d4	chore(deps): bump	2021-12-04 19:08:12 +05:30
liyasthomas	ecce830787	Merge remote-tracking branch 'origin/i18n'	2021-12-04 19:03:09 +05:30
liyasthomas	084039f59f	refactor: minor ui improvements	2021-12-04 18:59:26 +05:30
liyasthomas	0de9f3d8c3	fix: broken function import	2021-12-03 20:34:20 +05:30
Andrew Bastin	4d6d30c92b	fix: shared references on saveRequest causing overwrite fixes #1992	2021-12-03 16:27:18 +05:30
Andrew Bastin	38755bf3e3	refactor: separate out data structures into hoppscotch-data	2021-12-03 16:10:56 +05:30
Lokesh Sanapalli	2884854aab	fix: docker node-gyp python not found (#1987 ) Co-authored-by: Liyas Thomas <liyascthomas@gmail.com>	2021-12-03 13:14:34 +05:30
Andrius Petrauskis	d24d07e420	fix: show an error when pre-request script fails (#1991 ) * fix: show an error when pre-request script fails * refactor: minor ui improvements Co-authored-by: Liyas Thomas <liyascthomas@gmail.com>	2021-12-02 23:14:26 +05:30
0xc0Der	cc81242294	realtime persistence. (#1952 ) * feat: websocket persistence * feat: socketio persistence * feat: sse persistence * feat: mqtt persistence * fix: added types * fix: typescript issues Co-authored-by: Andrew Bastin <andrewbastin.k@gmail.com>	2021-12-02 20:20:24 +05:30
liyasthomas	a508909471	refactor: sort windi class names	2021-12-01 22:59:01 +05:30
SiderealArt	475a28b159	chore(i18n): update tw translations (#1986 )	2021-11-30 10:50:57 +05:30
Deepanshu Dhruw	520ac8ede5	fix: code generators (#1985 ) Co-authored-by: liyasthomas <liyascthomas@gmail.com>	2021-11-30 07:46:45 +05:30
liyasthomas	2a59557851	chore(deps): bump	2021-11-29 06:19:32 +05:30
liyasthomas	4089bc288c	chore: updated i18n translations	2021-11-29 06:14:52 +05:30
liyasthomas	1999819846	chore(deps): bump	2021-11-28 19:48:53 +05:30
liyasthomas	0bf856291c	refactor: lint + minor ui fixes	2021-11-27 19:59:28 +05:30
liyasthomas	da8c446ad7	chore(deps): bump	2021-11-27 19:58:08 +05:30
liyasthomas	3614877964	fix: broken scroll to definition in graphql documentation	2021-11-26 07:22:06 +05:30
liyasthomas	85c8171aa8	refactor: use smart confirm modal instead of native confirm modal	2021-11-25 11:37:23 +05:30
liyasthomas	b58278d55e	chore: hide scrollbar	2021-11-24 19:27:25 +05:30
liyasthomas	b398ed1e90	fix: improve readability on input placeholders - fixed #1974	2021-11-23 20:22:38 +05:30
liyasthomas	afa750e409	fix: validate empty endpoints before sending request - resolved #1968	2021-11-23 20:01:45 +05:30
liyasthomas	fdf12a24ed	refactor: sort windi class names	2021-11-23 08:47:09 +05:30
liyasthomas	4c5ca1b31d	Merge branch 'main' of https://github.com/hoppscotch/hoppscotch	2021-11-23 05:31:22 +05:30
liyasthomas	bcb9b97b6b	Merge branch 'i18n'	2021-11-23 05:31:01 +05:30
Andrew Bastin	757294ae38	feat: bump dependencies	2021-11-22 19:34:23 +05:30
liyasthomas	8d4dd8c428	chore: better error message in invalid link	2021-11-22 16:31:10 +05:30
liyasthomas	508809eba1	chore: cleanup - remove writing request object to url	2021-11-22 15:02:29 +05:30
liyasthomas	d0386ef86f	chore: cleanup	2021-11-22 14:52:14 +05:30
liyasthomas	56cdb79773	Merge branch 'main' into feat/short-code	2021-11-22 11:35:16 +05:30
liyasthomas	6ed4211004	feat: short code redirection	2021-11-22 11:26:43 +05:30
liyasthomas	222f0800d2	chore: better short code fetching	2021-11-22 08:26:22 +05:30
liyasthomas	12a9dd1058	feat: fetch, display and copy short code	2021-11-21 23:50:31 +05:30
Andrew Bastin	4a32fc6180	feat: mutations and queries for shortcode management	2021-11-21 20:02:09 +05:30
liyasthomas	1e08e7f73d	chore(deps): bump	2021-11-21 19:47:06 +05:30
liyasthomas	8b05b063ff	fix: minor ui improvements	2021-11-21 19:40:15 +05:30
SiderealArt	0bcfeb86ae	chore(i18n): update tw translations (#1965 )	2021-11-21 08:22:15 +05:30
liyasthomas	03a056b6c1	perf: updated issue templates	2021-11-20 22:43:19 +05:30
liyasthomas	d57e465806	fix: minor ui improvements	2021-11-20 08:28:38 +05:30
liyasthomas	5ab24d1439	docs: updated links + editor theme	2021-11-20 07:27:50 +05:30
liyasthomas	47661de974	refactor: composables for i18n and toast	2021-11-19 22:49:11 +05:30
liyasthomas	26429466e9	refactor: remove icons from toast	2021-11-19 21:13:58 +05:30
Andrew Bastin	cad8f3e856	refactor: add i18n composable	2021-11-19 21:06:04 +05:30
liyasthomas	1a4eb1fabe	chore: handle short code states	2021-11-19 12:47:47 +05:30
Liyas Thomas	680f61b7dc	docs: create security policy - skip ci	2021-11-19 11:07:26 +05:30
liyasthomas	f602a1e2d3	feat: loading indicator to fetch short code	2021-11-19 09:15:31 +05:30
liyasthomas	1572ff9e67	fix: regression in bulk mode to key-value pair translation	2021-11-19 08:52:58 +05:30
liyasthomas	fe7b236ad9	fix: enable native select on editor - fixed #1960	2021-11-18 18:26:48 +05:30
liyasthomas	3080af1ea5	refactor: migrate more components to setup script + fix a race condition with power search	2021-11-18 07:00:51 +05:30
liyasthomas	0f83c8b490	refactor: hightlight active only when editor is focused	2021-11-17 21:01:43 +05:30
liyasthomas	7d590ab966	feat: init short code ui	2021-11-17 02:36:40 +05:30