chore: add release tag ci pipeline to push to docker hub

style: updated font size and fixed truncation issue on invited table

.dockerignore

@@ -1 +1,2 @@
-*/**/node_modules
+node_modules
+**/*/node_modules

.github/workflows/release-push-docker.yml

@@ -0,0 +1,66 @@
+name: "Push containers to Docker Hub on release"
+
+on:
+  push:
+    tags:
+      - '*.*.*'
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Setup environment
+        run: cp .env.example .env
+
+      - name: Log in to Docker Hub
+        uses: docker/login-action@v2
+        with:
+          username: ${{ secrets.DOCKER_USERNAME }}
+          password: ${{ secrets.DOCKER_PASSWORD }}
+
+      - name: Build and push `${{ secrets.DOCKER_BACKEND_CONTAINER_NAME }}`
+        uses: docker/build-push-action@v4
+        with:
+          context: .
+          file: ./prod.Dockerfile
+          target: backend
+          push: true
+          tags: |
+            ${{ secrets.DOCKER_ORG_NAME }}/${{ secrets.DOCKER_BACKEND_CONTAINER_NAME }}:latest
+            ${{ secrets.DOCKER_ORG_NAME }}/${{ secrets.DOCKER_BACKEND_CONTAINER_NAME }}:${{ github.ref_name }}
+
+      - name: Build and push `${{ secrets.DOCKER_FRONTEND_CONTAINER_NAME }}`
+        uses: docker/build-push-action@v4
+        with:
+          context: .
+          file: ./prod.Dockerfile
+          target: app
+          push: true
+          tags: |
+            ${{ secrets.DOCKER_ORG_NAME }}/${{ secrets.DOCKER_FRONTEND_CONTAINER_NAME }}:latest
+            ${{ secrets.DOCKER_ORG_NAME }}/${{ secrets.DOCKER_FRONTEND_CONTAINER_NAME }}:${{ github.ref_name }}
+
+      - name: Build and push `${{ secrets.DOCKER_SH_ADMIN_CONTAINER_NAME }}`
+        uses: docker/build-push-action@v4
+        with:
+          context: .
+          file: ./prod.Dockerfile
+          target: sh_admin
+          push: true
+          tags: |
+            ${{ secrets.DOCKER_ORG_NAME }}/${{ secrets.DOCKER_SH_ADMIN_CONTAINER_NAME }}:latest
+            ${{ secrets.DOCKER_ORG_NAME }}/${{ secrets.DOCKER_SH_ADMIN_CONTAINER_NAME }}:${{ github.ref_name }}
+
+      - name: Build and push `${{ secrets.DOCKER_AIO_CONTAINER_NAME }}`
+        uses: docker/build-push-action@v4
+        with:
+          context: .
+          file: ./prod.Dockerfile
+          target: aio
+          push: true
+          tags: |
+            ${{ secrets.DOCKER_ORG_NAME }}/${{ secrets.DOCKER_AIO_CONTAINER_NAME }}:latest
+            ${{ secrets.DOCKER_ORG_NAME }}/${{ secrets.DOCKER_AIO_CONTAINER_NAME }}:${{ github.ref_name }}

aio.Caddyfile

@@ -0,0 +1,11 @@
+:3000 {
+  try_files {path} /
+  root * /site/selfhost-web
+  file_server
+}
+
+:3100 {
+  try_files {path} /
+  root * /site/sh-admin
+  file_server
+}

aio_run.mjs

@@ -0,0 +1,72 @@
+#!/usr/local/bin/node
+// @ts-check
+
+import { execSync, spawn } from "child_process"
+import fs from "fs"
+import process from "process"
+
+function runChildProcessWithPrefix(command, args, prefix) {
+  const childProcess = spawn(command, args);
+
+  childProcess.stdout.on('data', (data) => {
+    const output = data.toString().trim().split('\n');
+    output.forEach((line) => {
+      console.log(`${prefix} | ${line}`);
+    });
+  });
+
+  childProcess.stderr.on('data', (data) => {
+    const error = data.toString().trim().split('\n');
+    error.forEach((line) => {
+      console.error(`${prefix} | ${line}`);
+    });
+  });
+
+  childProcess.on('close', (code) => {
+    console.log(`${prefix} Child process exited with code ${code}`);
+  });
+
+  childProcess.on('error', (stuff) => {
+    console.log("error")
+    console.log(stuff)
+  })
+
+  return childProcess
+}
+
+const envFileContent = Object.entries(process.env)
+  .filter(([env]) => env.startsWith("VITE_"))
+  .map(([env, val]) => `${env}=${
+    (val.startsWith("\"") && val.endsWith("\""))
+      ? val
+      : `"${val}"`
+  }`)
+  .join("\n")
+
+fs.writeFileSync("build.env", envFileContent)
+
+execSync(`npx import-meta-env -x build.env -e build.env -p "/site/**/*"`)
+
+fs.rmSync("build.env")
+
+const caddyProcess = runChildProcessWithPrefix("caddy", ["run", "--config", "/etc/caddy/Caddyfile", "--adapter", "caddyfile"], "App/Admin Dashboard Caddy")
+const backendProcess = runChildProcessWithPrefix("pnpm", ["run", "start:prod"], "Backend Server")
+
+caddyProcess.on("exit", (code) => {
+  console.log(`Exiting process because Caddy Server exited with code ${code}`)
+  process.exit(code)
+})
+
+backendProcess.on("exit", (code) => {
+  console.log(`Exiting process because Backend Server exited with code ${code}`)
+  process.exit(code)
+})
+
+process.on('SIGINT', () => {
+  console.log("SIGINT received, exiting...")
+
+  caddyProcess.kill("SIGINT")
+  backendProcess.kill("SIGINT")
+
+  process.exit(0)
+})

docker-compose.yml

@@ -7,6 +7,103 @@ services:
   # This service runs the backend app in the port 3170
   hoppscotch-backend:
     container_name: hoppscotch-backend
+    build:
+      dockerfile: prod.Dockerfile
+      context: .
+      target: backend
+    env_file:
+      - ./.env
+    restart: always
+    environment:
+      # Edit the below line to match your PostgresDB URL if you have an outside DB (make sure to update the .env file as well)
+      - DATABASE_URL=postgresql://postgres:testpass@hoppscotch-db:5432/hoppscotch?connect_timeout=300
+      - PORT=3170
+    volumes:
+      # Uncomment the line below when modifying code. Only applicable when using the "dev" target.
+      # - ./packages/hoppscotch-backend/:/usr/src/app
+      - /usr/src/app/node_modules/
+    depends_on:
+      hoppscotch-db:
+        condition: service_healthy
+    ports:
+      - "3170:3170"
+
+  # The main hoppscotch app. This will be hosted at port 3000
+  # NOTE: To do TLS or play around with how the app is hosted, you can look into the Caddyfile for
+  #       the SH admin dashboard server at packages/hoppscotch-selfhost-web/Caddyfile
+  hoppscotch-app:
+    container_name: hoppscotch-app
+    build:
+      dockerfile: prod.Dockerfile
+      context: .
+      target: app
+    env_file:
+      - ./.env
+    depends_on:
+      - hoppscotch-backend
+    ports:
+      - "3000:8080"
+
+  # The Self Host dashboard for managing the app. This will be hosted at port 3100
+  # NOTE: To do TLS or play around with how the app is hosted, you can look into the Caddyfile for
+  #       the SH admin dashboard server at packages/hoppscotch-sh-admin/Caddyfile
+  hoppscotch-sh-admin:
+    container_name: hoppscotch-sh-admin
+    build:
+      dockerfile: prod.Dockerfile
+      context: .
+      target: sh_admin
+    env_file:
+      - ./.env
+    depends_on:
+      - hoppscotch-backend
+    ports:
+      - "3100:8080"
+
+  # The service that spins up all 3 services at once in one container
+  hoppscotch-aio:
+    container_name: hoppscotch-aio
+    build:
+      dockerfile: prod.Dockerfile
+      context: .
+      target: aio
+    env_file:
+      - ./.env
+    depends_on:
+      hoppscotch-db:
+        condition: service_healthy
+    ports:
+      - "3000:3000"
+      - "3100:3100"
+      - "3170:3170"
+
+  # The preset DB service, you can delete/comment the below lines if
+  # you are using an external postgres instance
+  # This will be exposed at port 5432
+  hoppscotch-db:
+    image: postgres:15
+    ports:
+      - "5432:5432"
+    user: postgres
+    environment:
+      # The default user defined by the docker image
+      POSTGRES_USER: postgres
+      # NOTE: Please UPDATE THIS PASSWORD!
+      POSTGRES_PASSWORD: testpass
+      POSTGRES_DB: hoppscotch
+    healthcheck:
+      test:
+        [
+          "CMD-SHELL",
+          "sh -c 'pg_isready -U $${POSTGRES_USER} -d $${POSTGRES_DB}'"
+        ]
+      interval: 5s
+      timeout: 5s
+      retries: 10
+
+  # All the services listed below are deprececated
+  hoppscotch-old-backend:
+    container_name: hoppscotch-old-backend
     build:
       dockerfile: packages/hoppscotch-backend/Dockerfile
       context: .
@@ -28,54 +125,26 @@ services:
     ports:
       - "3170:3000"
 
-  # The main hoppscotch app. This will be hosted at port 3000
+  hoppscotch-old-app:
-  # NOTE: To do TLS or play around with how the app is hosted, you can look into the Caddyfile for
+    container_name: hoppscotch-old-app
-  #       the SH admin dashboard server at packages/hoppscotch-selfhost-web/Caddyfile
-  hoppscotch-app:
-    container_name: hoppscotch-app
     build:
       dockerfile: packages/hoppscotch-selfhost-web/Dockerfile
       context: .
     env_file:
       - ./.env
     depends_on:
-      - hoppscotch-backend
+      - hoppscotch-old-backend
     ports:
       - "3000:8080"
 
-  # The Self Host dashboard for managing the app. This will be hosted at port 3100
+  hoppscotch-old-sh-admin:
-  # NOTE: To do TLS or play around with how the app is hosted, you can look into the Caddyfile for
+    container_name: hoppscotch-old-sh-admin
-  #       the SH admin dashboard server at packages/hoppscotch-sh-admin/Caddyfile
-  hoppscotch-sh-admin:
-    container_name: hoppscotch-sh-admin
     build:
       dockerfile: packages/hoppscotch-sh-admin/Dockerfile
       context: .
     env_file:
       - ./.env
     depends_on:
-      - hoppscotch-backend
+      - hoppscotch-old-backend
     ports:
       - "3100:8080"
-
-  # The preset DB service, you can delete/comment the below lines if
-  # you are using an external postgres instance
-  # This will be exposed at port 5432
-  hoppscotch-db:
-    image: postgres:15
-    ports:
-      - "5432:5432"
-    user: postgres
-    environment:
-      # The default user defined by the docker image
-      POSTGRES_USER: postgres
-      # NOTE: Please UPDATE THIS PASSWORD!
-      POSTGRES_PASSWORD: testpass
-      POSTGRES_DB: hoppscotch
-    healthcheck:
-      test: ["CMD-SHELL", "sh -c 'pg_isready -U $${POSTGRES_USER} -d $${POSTGRES_DB}'"]
-      interval: 5s
-      timeout: 5s
-      retries: 10
-
-

healthcheck.sh

@@ -0,0 +1,14 @@
+#!/bin/bash
+
+curlCheck() {
+  if ! curl -s --head "$1" | head -n 1 | grep -q "HTTP/1.[01] [23].."; then
+    echo "URL request failed!"
+    exit 1
+  else
+    echo "URL request succeeded!"
+  fi
+}
+
+curlCheck "http://localhost:3000"
+curlCheck "http://localhost:3100"
+curlCheck "http://localhost:3170/ping"

package.json

@@ -32,5 +32,14 @@
     "@types/node": "^17.0.24",
     "cross-env": "^7.0.3",
     "http-server": "^14.1.1"
+  },
+  "pnpm": {
+    "packageExtensions": {
+      "httpsnippet@^3.0.1": {
+        "peerDependencies": {
+          "ajv": "6.12.3"
+        }
+      }
+    }
   }
 }

packages/hoppscotch-backend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hoppscotch-backend",
-  "version": "2023.4.8",
+  "version": "2023.8.0",
   "description": "",
   "author": "",
   "private": true,
@@ -33,7 +33,7 @@
     "@nestjs/passport": "^9.0.0",
     "@nestjs/platform-express": "^9.2.1",
     "@nestjs/throttler": "^4.0.0",
-    "@prisma/client": "^4.7.1",
+    "@prisma/client": "^4.16.2",
     "apollo-server-express": "^3.11.1",
     "apollo-server-plugin-base": "^3.7.1",
     "argon2": "^0.30.3",
@@ -57,7 +57,7 @@
     "passport-jwt": "^4.0.1",
     "passport-local": "^1.0.0",
     "passport-microsoft": "^1.0.0",
-    "prisma": "^4.7.1",
+    "prisma": "^4.16.2",
     "reflect-metadata": "^0.1.13",
     "rimraf": "^3.0.2",
     "rxjs": "^7.6.0"

packages/hoppscotch-backend/prisma/schema.prisma

@@ -5,7 +5,7 @@ datasource db {
 
 generator client {
   provider      = "prisma-client-js"
-  binaryTargets = ["native", "debian-openssl-1.1.x"]
+  binaryTargets = ["native", "debian-openssl-1.1.x", "debian-openssl-3.0.x"]
 }
 
 model Team {

packages/hoppscotch-backend/src/app.controller.ts

@@ -0,0 +1,9 @@
+import { Controller, Get } from '@nestjs/common';
+
+@Controller('ping')
+export class AppController {
+  @Get()
+  ping(): string {
+    return 'Success';
+  }
+}

packages/hoppscotch-backend/src/app.module.ts

@@ -19,6 +19,7 @@ import { UserCollectionModule } from './user-collection/user-collection.module';
 import { ShortcodeModule } from './shortcode/shortcode.module';
 import { COOKIES_NOT_FOUND } from './errors';
 import { ThrottlerModule } from '@nestjs/throttler';
+import { AppController } from './app.controller';
 
 @Module({
   imports: [
@@ -81,5 +82,6 @@ import { ThrottlerModule } from '@nestjs/throttler';
     ShortcodeModule,
   ],
   providers: [GQLComplexityPlugin],
+  controllers: [AppController],
 })
 export class AppModule {}

packages/hoppscotch-backend/src/shortcode/shortcode.service.ts

@@ -150,7 +150,7 @@ export class ShortcodeService implements UserDataHandler, OnModuleInit {
       orderBy: {
         createdOn: 'desc',
       },
-      skip: 1,
+      skip: args.cursor ? 1 : 0,
       take: args.take,
       cursor: args.cursor ? { id: args.cursor } : undefined,
     });

packages/hoppscotch-backend/src/user-history/user-history.service.spec.ts

@@ -24,6 +24,8 @@ beforeEach(() => {
   mockPubSub.publish.mockClear();
 });
 
+const date = new Date();
+
 describe('UserHistoryService', () => {
   describe('fetchUserHistory', () => {
     test('Should return a list of users REST history if exists', async () => {
@@ -400,7 +402,7 @@ describe('UserHistoryService', () => {
         request: [{}],
         responseMetadata: [{}],
         reqType: ReqType.REST,
-        executedOn: new Date(),
+        executedOn: date,
         isStarred: false,
       });
 
@@ -410,7 +412,7 @@ describe('UserHistoryService', () => {
         request: JSON.stringify([{}]),
         responseMetadata: JSON.stringify([{}]),
         reqType: ReqType.REST,
-        executedOn: new Date(),
+        executedOn: date,
         isStarred: false,
       };
 

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

@@ -166,12 +166,6 @@ a {
       @apply truncate;
       @apply sm:inline-flex;
     }
-
-    .env-icon {
-      @apply transition;
-      @apply inline-flex;
-      @apply items-center;
-    }
   }
 
   .tippy-svg-arrow {
@@ -332,7 +326,7 @@ pre.ace_editor {
   @apply after:font-icon;
   @apply after:text-current;
   @apply after:right-3;
-  @apply after:content-["\e313"];
+  @apply after:content-["\e5cf"];
   @apply after:text-lg;
 }
 
@@ -487,6 +481,10 @@ pre.ace_editor {
   }
 }
 
+.cm-scroller {
+  @apply overscroll-y-auto;
+}
+
 .cm-editor {
   .cm-line::selection {
     @apply bg-accentDark #{!important};
@@ -576,9 +574,9 @@ details[open] summary .indicator {
 }
 
 .gql-operation-not-highlight {
-  opacity: 0.5;
+  @apply opacity-50;
 }
 
 .gql-operation-highlight {
-  opacity: 1;
+  @apply opacity-100;
 }

packages/hoppscotch-common/locales/en.json

@@ -159,8 +159,8 @@
   },
   "context_menu": {
     "set_environment_variable": "Set as variable",
-    "add_parameter": "Add to parameter",
+    "add_parameters": "Add to parameters",
-    "open_link_in_new_tab": "Open link in new tab"
+    "open_request_in_new_tab": "Open request in new tab"
   },
   "count": {
     "header": "Header {count}",
@@ -185,7 +185,6 @@
     "folder": "Folder is empty",
     "headers": "This request does not have any headers",
     "history": "History is empty",
-    "history_suggestions": "History does not have any matching entries",
     "invites": "Invite list is empty",
     "members": "Team is empty",
     "parameters": "This request does not have any parameters",
@@ -195,7 +194,6 @@
     "schema": "Connect to a GraphQL endpoint to view schema",
     "shortcodes": "Shortcodes are empty",
     "subscription": "Subscriptions are empty",
-    "suggestions": "No matching suggestions found",
     "team_name": "Team name empty",
     "teams": "You don't belong to any teams",
     "tests": "There are no tests for this request"
@@ -608,7 +606,7 @@
       "delete_method": "Select DELETE method",
       "get_method": "Select GET method",
       "head_method": "Select HEAD method",
-      "rename": "Rename Current Request",
+      "rename": "Rename Request",
       "import_curl": "Import cURL",
       "show_code": "Generate code snippet",
       "method": "Method",
@@ -651,51 +649,62 @@
   },
   "spotlight": {
     "general": {
-      "help_menu": "Open help and support menu",
+      "help_menu": "Help and support",
       "chat": "Chat with support",
       "open_docs": "Read Documentation",
-      "open_keybindings": "Open keyboard shortcuts",
+      "open_keybindings": "Keyboard shortcuts",
-      "social": "Social links and GitHub",
+      "open_github": "Open GitHub repository",
+      "social": "Social",
       "title": "General"
     },
     "miscellaneous": {
-      "invite": "Invite people to Hoppscotch",
+      "invite": "Invite your friends to Hoppscotch",
       "title": "Miscellaneous"
     },
     "request": {
-      "tab_parameters": "Open parameters tab",
+      "switch_to": "Switch to",
-      "tab_body": "Open body tab",
+      "select_method": "Select method",
-      "tab_headers": "Open headers tab",
+      "save_as_new": "Save as new request",
-      "tab_authorization": "Open authorization tab",
+      "tab_parameters": "Parameters tab",
-      "tab_pre_request_script": "Open pre-request script tab",
+      "tab_body": "Body tab",
-      "tab_tests": "Open tests tab"
+      "tab_headers": "Headers tab",
+      "tab_authorization": "Authorization tab",
+      "tab_pre_request_script": "Pre-request script tab",
+      "tab_tests": "Tests tab",
+      "tab_query": "Query tab",
+      "tab_variables": "Variables tab"
+    },
+    "graphql": {
+      "connect": "Connect to server",
+      "disconnect": "Disconnect from server"
     },
     "response": {
-      "copy": "Copy response as JSON",
+      "copy": "Copy response",
       "download": "Download response as file",
       "title": "Response"
     },
     "environments": {
       "new": "Create new environment",
       "new_variable": "Create a new environment variable",
-      "edit": "Edit selected environment",
+      "edit": "Edit current environment",
-      "delete": "Delete selected environment",
+      "delete": "Delete current environment",
-      "duplicate": "Duplicate selected environment",
+      "duplicate": "Duplicate current environment",
       "edit_global": "Edit global environment",
       "duplicate_global": "Duplicate global environment",
       "title": "Environments"
     },
     "workspace": {
       "new": "Create new team",
-      "edit": "Edit selected team",
+      "edit": "Edit current team",
-      "delete": "Delete selected team",
+      "delete": "Delete current team",
       "invite": "Invite people to team",
-      "switch_to_personal": "Switch to personal workspace",
+      "switch_to_personal": "Switch to your personal workspace",
       "title": "Teams"
     },
     "tab": {
+      "duplicate": "Duplicate current tab",
       "close_current": "Close current tab",
-      "close_others": "Close other tabs",
+      "close_others": "Close all other tabs",
       "new_tab": "Open a new tab",
       "title": "Tabs"
     },
@@ -705,24 +714,21 @@
       "interface": "Interface",
       "interceptor": "Interceptor"
     },
-    "change_interceptor": "Change Interceptor",
     "change_language": "Change Language",
-    "install_extension": "Install Browser Extension",
     "settings": {
       "theme": {
-        "black": "Black Mode",
+        "black": "Black",
-        "dark": "Dark Mode",
+        "dark": "Dark",
-        "light": "Light Mode",
+        "light": "Light",
-        "system": "System Mode"
+        "system": "System preference"
       },
       "font": {
-        "size_sm": "Change to Small",
+        "size_sm": "Small",
-        "size_md": "Change to Medium",
+        "size_md": "Medium",
-        "size_lg": "Change to Large"
+        "size_lg": "Large"
       },
       "change_interceptor": "Change Interceptor",
-      "change_language": "Change Language",
+      "change_language": "Change Language"
-      "install_extension": "Install Browser Extension"
     }
   },
   "sse": {

packages/hoppscotch-common/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@hoppscotch/common",
   "private": true,
-  "version": "2023.4.8",
+  "version": "2023.8.0",
   "scripts": {
     "dev": "pnpm exec npm-run-all -p -l dev:*",
     "test": "vitest --run",
@@ -63,7 +63,7 @@
     "graphql": "^16.8.0",
     "graphql-language-service-interface": "^2.9.1",
     "graphql-tag": "^2.12.6",
-    "httpsnippet": "^2.0.0",
+    "httpsnippet": "^3.0.1",
     "insomnia-importers": "^3.6.0",
     "io-ts": "^2.2.20",
     "js-yaml": "^4.1.0",
@@ -117,6 +117,7 @@
     "@intlify/vite-plugin-vue-i18n": "^7.0.0",
     "@relmify/jest-fp-ts": "^2.1.1",
     "@rushstack/eslint-patch": "^1.3.3",
+    "@types/har-format": "^1.2.12",
     "@types/js-yaml": "^4.0.5",
     "@types/lodash-es": "^4.17.8",
     "@types/lossless-json": "^1.0.1",

packages/hoppscotch-common/src/App.vue

@@ -18,6 +18,7 @@ import { HOPP_MODULES } from "@modules/."
 import { isLoadingInitialRoute } from "@modules/router"
 import { useI18n } from "@composables/i18n"
 import { APP_IS_IN_DEV_MODE } from "@helpers/dev"
+import { platform } from "./platform"
 
 const t = useI18n()
 
@@ -45,4 +46,5 @@ if (APP_IS_IN_DEV_MODE) {
 
 // Run module root component setup code
 HOPP_MODULES.forEach((mod) => mod.onRootSetup?.())
+platform.addedHoppModules?.forEach((mod) => mod.onRootSetup?.())
 </script>

packages/hoppscotch-common/src/components.d.ts

@@ -5,218 +5,221 @@
 // Read more: https://github.com/vuejs/core/pull/3399
 export {}
 
-declare module "vue" {
+declare module 'vue' {
   export interface GlobalComponents {
-    AppActionHandler: typeof import("./components/app/ActionHandler.vue")["default"]
+    AppActionHandler: typeof import('./components/app/ActionHandler.vue')['default']
-    AppAnnouncement: typeof import("./components/app/Announcement.vue")["default"]
+    AppAnnouncement: typeof import('./components/app/Announcement.vue')['default']
-    AppContextMenu: typeof import("./components/app/ContextMenu.vue")["default"]
+    AppContextMenu: typeof import('./components/app/ContextMenu.vue')['default']
-    AppDeveloperOptions: typeof import("./components/app/DeveloperOptions.vue")["default"]
+    AppDeveloperOptions: typeof import('./components/app/DeveloperOptions.vue')['default']
-    AppFooter: typeof import("./components/app/Footer.vue")["default"]
+    AppFooter: typeof import('./components/app/Footer.vue')['default']
-    AppGitHubStarButton: typeof import("./components/app/GitHubStarButton.vue")["default"]
+    AppGitHubStarButton: typeof import('./components/app/GitHubStarButton.vue')['default']
-    AppHeader: typeof import("./components/app/Header.vue")["default"]
+    AppHeader: typeof import('./components/app/Header.vue')['default']
-    AppInspection: typeof import("./components/app/Inspection.vue")["default"]
+    AppInspection: typeof import('./components/app/Inspection.vue')['default']
-    AppInterceptor: typeof import("./components/app/Interceptor.vue")["default"]
+    AppInterceptor: typeof import('./components/app/Interceptor.vue')['default']
-    AppLogo: typeof import("./components/app/Logo.vue")["default"]
+    AppLogo: typeof import('./components/app/Logo.vue')['default']
-    AppOptions: typeof import("./components/app/Options.vue")["default"]
+    AppOptions: typeof import('./components/app/Options.vue')['default']
-    AppPaneLayout: typeof import("./components/app/PaneLayout.vue")["default"]
+    AppPaneLayout: typeof import('./components/app/PaneLayout.vue')['default']
-    AppShare: typeof import("./components/app/Share.vue")["default"]
+    AppShare: typeof import('./components/app/Share.vue')['default']
-    AppShortcuts: typeof import("./components/app/Shortcuts.vue")["default"]
+    AppShortcuts: typeof import('./components/app/Shortcuts.vue')['default']
-    AppShortcutsEntry: typeof import("./components/app/ShortcutsEntry.vue")["default"]
+    AppShortcutsEntry: typeof import('./components/app/ShortcutsEntry.vue')['default']
-    AppShortcutsPrompt: typeof import("./components/app/ShortcutsPrompt.vue")["default"]
+    AppShortcutsPrompt: typeof import('./components/app/ShortcutsPrompt.vue')['default']
-    AppSidenav: typeof import("./components/app/Sidenav.vue")["default"]
+    AppSidenav: typeof import('./components/app/Sidenav.vue')['default']
-    AppSocial: typeof import("./components/app/Social.vue")["default"]
+    AppSocial: typeof import('./components/app/Social.vue')['default']
-    AppSpotlight: typeof import("./components/app/spotlight/index.vue")["default"]
+    AppSpotlight: typeof import('./components/app/spotlight/index.vue')['default']
-    AppSpotlightEntry: typeof import("./components/app/spotlight/Entry.vue")["default"]
+    AppSpotlightEntry: typeof import('./components/app/spotlight/Entry.vue')['default']
-    AppSpotlightEntryGQLHistory: typeof import("./components/app/spotlight/entry/GQLHistory.vue")["default"]
+    AppSpotlightEntryGQLHistory: typeof import('./components/app/spotlight/entry/GQLHistory.vue')['default']
-    AppSpotlightEntryGQLRequest: typeof import("./components/app/spotlight/entry/GQLRequest.vue")["default"]
+    AppSpotlightEntryGQLRequest: typeof import('./components/app/spotlight/entry/GQLRequest.vue')['default']
-    AppSpotlightEntryRESTHistory: typeof import("./components/app/spotlight/entry/RESTHistory.vue")["default"]
+    AppSpotlightEntryIconSelected: typeof import('./components/app/spotlight/entry/IconSelected.vue')['default']
-    AppSpotlightEntryRESTRequest: typeof import("./components/app/spotlight/entry/RESTRequest.vue")["default"]
+    AppSpotlightEntryRESTHistory: typeof import('./components/app/spotlight/entry/RESTHistory.vue')['default']
-    AppSupport: typeof import("./components/app/Support.vue")["default"]
+    AppSpotlightEntryRESTRequest: typeof import('./components/app/spotlight/entry/RESTRequest.vue')['default']
-    ButtonPrimary: typeof import("./../../hoppscotch-ui/src/components/button/Primary.vue")["default"]
+    AppSupport: typeof import('./components/app/Support.vue')['default']
-    ButtonSecondary: typeof import("./../../hoppscotch-ui/src/components/button/Secondary.vue")["default"]
+    ButtonPrimary: typeof import('./../../hoppscotch-ui/src/components/button/Primary.vue')['default']
-    Collections: typeof import("./components/collections/index.vue")["default"]
+    ButtonSecondary: typeof import('./../../hoppscotch-ui/src/components/button/Secondary.vue')['default']
-    CollectionsAdd: typeof import("./components/collections/Add.vue")["default"]
+    Collections: typeof import('./components/collections/index.vue')['default']
-    CollectionsAddFolder: typeof import("./components/collections/AddFolder.vue")["default"]
+    CollectionsAdd: typeof import('./components/collections/Add.vue')['default']
-    CollectionsAddRequest: typeof import("./components/collections/AddRequest.vue")["default"]
+    CollectionsAddFolder: typeof import('./components/collections/AddFolder.vue')['default']
-    CollectionsCollection: typeof import("./components/collections/Collection.vue")["default"]
+    CollectionsAddRequest: typeof import('./components/collections/AddRequest.vue')['default']
-    CollectionsEdit: typeof import("./components/collections/Edit.vue")["default"]
+    CollectionsCollection: typeof import('./components/collections/Collection.vue')['default']
-    CollectionsEditFolder: typeof import("./components/collections/EditFolder.vue")["default"]
+    CollectionsEdit: typeof import('./components/collections/Edit.vue')['default']
-    CollectionsEditRequest: typeof import("./components/collections/EditRequest.vue")["default"]
+    CollectionsEditFolder: typeof import('./components/collections/EditFolder.vue')['default']
-    CollectionsGraphql: typeof import("./components/collections/graphql/index.vue")["default"]
+    CollectionsEditRequest: typeof import('./components/collections/EditRequest.vue')['default']
-    CollectionsGraphqlAdd: typeof import("./components/collections/graphql/Add.vue")["default"]
+    CollectionsGraphql: typeof import('./components/collections/graphql/index.vue')['default']
-    CollectionsGraphqlAddFolder: typeof import("./components/collections/graphql/AddFolder.vue")["default"]
+    CollectionsGraphqlAdd: typeof import('./components/collections/graphql/Add.vue')['default']
-    CollectionsGraphqlAddRequest: typeof import("./components/collections/graphql/AddRequest.vue")["default"]
+    CollectionsGraphqlAddFolder: typeof import('./components/collections/graphql/AddFolder.vue')['default']
-    CollectionsGraphqlCollection: typeof import("./components/collections/graphql/Collection.vue")["default"]
+    CollectionsGraphqlAddRequest: typeof import('./components/collections/graphql/AddRequest.vue')['default']
-    CollectionsGraphqlEdit: typeof import("./components/collections/graphql/Edit.vue")["default"]
+    CollectionsGraphqlCollection: typeof import('./components/collections/graphql/Collection.vue')['default']
-    CollectionsGraphqlEditFolder: typeof import("./components/collections/graphql/EditFolder.vue")["default"]
+    CollectionsGraphqlEdit: typeof import('./components/collections/graphql/Edit.vue')['default']
-    CollectionsGraphqlEditRequest: typeof import("./components/collections/graphql/EditRequest.vue")["default"]
+    CollectionsGraphqlEditFolder: typeof import('./components/collections/graphql/EditFolder.vue')['default']
-    CollectionsGraphqlFolder: typeof import("./components/collections/graphql/Folder.vue")["default"]
+    CollectionsGraphqlEditRequest: typeof import('./components/collections/graphql/EditRequest.vue')['default']
-    CollectionsGraphqlImportExport: typeof import("./components/collections/graphql/ImportExport.vue")["default"]
+    CollectionsGraphqlFolder: typeof import('./components/collections/graphql/Folder.vue')['default']
-    CollectionsGraphqlRequest: typeof import("./components/collections/graphql/Request.vue")["default"]
+    CollectionsGraphqlImportExport: typeof import('./components/collections/graphql/ImportExport.vue')['default']
-    CollectionsImportExport: typeof import("./components/collections/ImportExport.vue")["default"]
+    CollectionsGraphqlRequest: typeof import('./components/collections/graphql/Request.vue')['default']
-    CollectionsMyCollections: typeof import("./components/collections/MyCollections.vue")["default"]
+    CollectionsImportExport: typeof import('./components/collections/ImportExport.vue')['default']
-    CollectionsRequest: typeof import("./components/collections/Request.vue")["default"]
+    CollectionsMyCollections: typeof import('./components/collections/MyCollections.vue')['default']
-    CollectionsSaveRequest: typeof import("./components/collections/SaveRequest.vue")["default"]
+    CollectionsRequest: typeof import('./components/collections/Request.vue')['default']
-    CollectionsTeamCollections: typeof import("./components/collections/TeamCollections.vue")["default"]
+    CollectionsSaveRequest: typeof import('./components/collections/SaveRequest.vue')['default']
-    Environments: typeof import("./components/environments/index.vue")["default"]
+    CollectionsTeamCollections: typeof import('./components/collections/TeamCollections.vue')['default']
-    EnvironmentsAdd: typeof import("./components/environments/Add.vue")["default"]
+    Environments: typeof import('./components/environments/index.vue')['default']
-    EnvironmentsImportExport: typeof import("./components/environments/ImportExport.vue")["default"]
+    EnvironmentsAdd: typeof import('./components/environments/Add.vue')['default']
-    EnvironmentsMy: typeof import("./components/environments/my/index.vue")["default"]
+    EnvironmentsImportExport: typeof import('./components/environments/ImportExport.vue')['default']
-    EnvironmentsMyDetails: typeof import("./components/environments/my/Details.vue")["default"]
+    EnvironmentsMy: typeof import('./components/environments/my/index.vue')['default']
-    EnvironmentsMyEnvironment: typeof import("./components/environments/my/Environment.vue")["default"]
+    EnvironmentsMyDetails: typeof import('./components/environments/my/Details.vue')['default']
-    EnvironmentsSelector: typeof import("./components/environments/Selector.vue")["default"]
+    EnvironmentsMyEnvironment: typeof import('./components/environments/my/Environment.vue')['default']
-    EnvironmentsTeams: typeof import("./components/environments/teams/index.vue")["default"]
+    EnvironmentsSelector: typeof import('./components/environments/Selector.vue')['default']
-    EnvironmentsTeamsDetails: typeof import("./components/environments/teams/Details.vue")["default"]
+    EnvironmentsTeams: typeof import('./components/environments/teams/index.vue')['default']
-    EnvironmentsTeamsEnvironment: typeof import("./components/environments/teams/Environment.vue")["default"]
+    EnvironmentsTeamsDetails: typeof import('./components/environments/teams/Details.vue')['default']
-    FirebaseLogin: typeof import("./components/firebase/Login.vue")["default"]
+    EnvironmentsTeamsEnvironment: typeof import('./components/environments/teams/Environment.vue')['default']
-    FirebaseLogout: typeof import("./components/firebase/Logout.vue")["default"]
+    FirebaseLogin: typeof import('./components/firebase/Login.vue')['default']
-    GraphqlAuthorization: typeof import("./components/graphql/Authorization.vue")["default"]
+    FirebaseLogout: typeof import('./components/firebase/Logout.vue')['default']
-    GraphqlField: typeof import("./components/graphql/Field.vue")["default"]
+    GraphqlAuthorization: typeof import('./components/graphql/Authorization.vue')['default']
-    GraphqlHeaders: typeof import("./components/graphql/Headers.vue")["default"]
+    GraphqlField: typeof import('./components/graphql/Field.vue')['default']
-    GraphqlQuery: typeof import("./components/graphql/Query.vue")["default"]
+    GraphqlHeaders: typeof import('./components/graphql/Headers.vue')['default']
-    GraphqlRequest: typeof import("./components/graphql/Request.vue")["default"]
+    GraphqlQuery: typeof import('./components/graphql/Query.vue')['default']
-    GraphqlRequestOptions: typeof import("./components/graphql/RequestOptions.vue")["default"]
+    GraphqlRequest: typeof import('./components/graphql/Request.vue')['default']
-    GraphqlRequestTab: typeof import("./components/graphql/RequestTab.vue")["default"]
+    GraphqlRequestOptions: typeof import('./components/graphql/RequestOptions.vue')['default']
-    GraphqlResponse: typeof import("./components/graphql/Response.vue")["default"]
+    GraphqlRequestTab: typeof import('./components/graphql/RequestTab.vue')['default']
-    GraphqlSidebar: typeof import("./components/graphql/Sidebar.vue")["default"]
+    GraphqlResponse: typeof import('./components/graphql/Response.vue')['default']
-    GraphqlSubscriptionLog: typeof import("./components/graphql/SubscriptionLog.vue")["default"]
+    GraphqlSidebar: typeof import('./components/graphql/Sidebar.vue')['default']
-    GraphqlType: typeof import("./components/graphql/Type.vue")["default"]
+    GraphqlSubscriptionLog: typeof import('./components/graphql/SubscriptionLog.vue')['default']
-    GraphqlTypeLink: typeof import("./components/graphql/TypeLink.vue")["default"]
+    GraphqlTabHead: typeof import('./components/graphql/TabHead.vue')['default']
-    GraphqlVariable: typeof import("./components/graphql/Variable.vue")["default"]
+    GraphqlType: typeof import('./components/graphql/Type.vue')['default']
-    History: typeof import("./components/history/index.vue")["default"]
+    GraphqlTypeLink: typeof import('./components/graphql/TypeLink.vue')['default']
-    HistoryGraphqlCard: typeof import("./components/history/graphql/Card.vue")["default"]
+    GraphqlVariable: typeof import('./components/graphql/Variable.vue')['default']
-    HistoryRestCard: typeof import("./components/history/rest/Card.vue")["default"]
+    History: typeof import('./components/history/index.vue')['default']
-    HoppButtonPrimary: typeof import("@hoppscotch/ui")["HoppButtonPrimary"]
+    HistoryGraphqlCard: typeof import('./components/history/graphql/Card.vue')['default']
-    HoppButtonSecondary: typeof import("@hoppscotch/ui")["HoppButtonSecondary"]
+    HistoryRestCard: typeof import('./components/history/rest/Card.vue')['default']
-    HoppSmartAnchor: typeof import("@hoppscotch/ui")["HoppSmartAnchor"]
+    HoppButtonPrimary: typeof import('@hoppscotch/ui')['HoppButtonPrimary']
-    HoppSmartAutoComplete: typeof import("@hoppscotch/ui")["HoppSmartAutoComplete"]
+    HoppButtonSecondary: typeof import('@hoppscotch/ui')['HoppButtonSecondary']
-    HoppSmartCheckbox: typeof import("@hoppscotch/ui")["HoppSmartCheckbox"]
+    HoppSmartAnchor: typeof import('@hoppscotch/ui')['HoppSmartAnchor']
-    HoppSmartConfirmModal: typeof import("@hoppscotch/ui")["HoppSmartConfirmModal"]
+    HoppSmartAutoComplete: typeof import('@hoppscotch/ui')['HoppSmartAutoComplete']
-    HoppSmartExpand: typeof import("@hoppscotch/ui")["HoppSmartExpand"]
+    HoppSmartCheckbox: typeof import('@hoppscotch/ui')['HoppSmartCheckbox']
-    HoppSmartFileChip: typeof import("@hoppscotch/ui")["HoppSmartFileChip"]
+    HoppSmartConfirmModal: typeof import('@hoppscotch/ui')['HoppSmartConfirmModal']
-    HoppSmartInput: typeof import("@hoppscotch/ui")["HoppSmartInput"]
+    HoppSmartExpand: typeof import('@hoppscotch/ui')['HoppSmartExpand']
-    HoppSmartIntersection: typeof import("@hoppscotch/ui")["HoppSmartIntersection"]
+    HoppSmartFileChip: typeof import('@hoppscotch/ui')['HoppSmartFileChip']
-    HoppSmartItem: typeof import("@hoppscotch/ui")["HoppSmartItem"]
+    HoppSmartInput: typeof import('@hoppscotch/ui')['HoppSmartInput']
-    HoppSmartLink: typeof import("@hoppscotch/ui")["HoppSmartLink"]
+    HoppSmartIntersection: typeof import('@hoppscotch/ui')['HoppSmartIntersection']
-    HoppSmartModal: typeof import("@hoppscotch/ui")["HoppSmartModal"]
+    HoppSmartItem: typeof import('@hoppscotch/ui')['HoppSmartItem']
-    HoppSmartPicture: typeof import("@hoppscotch/ui")["HoppSmartPicture"]
+    HoppSmartLink: typeof import('@hoppscotch/ui')['HoppSmartLink']
-    HoppSmartPlaceholder: typeof import("@hoppscotch/ui")["HoppSmartPlaceholder"]
+    HoppSmartModal: typeof import('@hoppscotch/ui')['HoppSmartModal']
-    HoppSmartProgressRing: typeof import("@hoppscotch/ui")["HoppSmartProgressRing"]
+    HoppSmartPicture: typeof import('@hoppscotch/ui')['HoppSmartPicture']
-    HoppSmartRadio: typeof import("@hoppscotch/ui")["HoppSmartRadio"]
+    HoppSmartPlaceholder: typeof import('@hoppscotch/ui')['HoppSmartPlaceholder']
-    HoppSmartRadioGroup: typeof import("@hoppscotch/ui")["HoppSmartRadioGroup"]
+    HoppSmartProgressRing: typeof import('@hoppscotch/ui')['HoppSmartProgressRing']
-    HoppSmartSlideOver: typeof import("@hoppscotch/ui")["HoppSmartSlideOver"]
+    HoppSmartRadio: typeof import('@hoppscotch/ui')['HoppSmartRadio']
-    HoppSmartSpinner: typeof import("@hoppscotch/ui")["HoppSmartSpinner"]
+    HoppSmartRadioGroup: typeof import('@hoppscotch/ui')['HoppSmartRadioGroup']
-    HoppSmartTab: typeof import("@hoppscotch/ui")["HoppSmartTab"]
+    HoppSmartSlideOver: typeof import('@hoppscotch/ui')['HoppSmartSlideOver']
-    HoppSmartTabs: typeof import("@hoppscotch/ui")["HoppSmartTabs"]
+    HoppSmartSpinner: typeof import('@hoppscotch/ui')['HoppSmartSpinner']
-    HoppSmartToggle: typeof import("@hoppscotch/ui")["HoppSmartToggle"]
+    HoppSmartTab: typeof import('@hoppscotch/ui')['HoppSmartTab']
-    HoppSmartTree: typeof import("@hoppscotch/ui")["HoppSmartTree"]
+    HoppSmartTabs: typeof import('@hoppscotch/ui')['HoppSmartTabs']
-    HoppSmartWindow: typeof import("@hoppscotch/ui")["HoppSmartWindow"]
+    HoppSmartToggle: typeof import('@hoppscotch/ui')['HoppSmartToggle']
-    HoppSmartWindows: typeof import("@hoppscotch/ui")["HoppSmartWindows"]
+    HoppSmartTree: typeof import('@hoppscotch/ui')['HoppSmartTree']
-    HttpAuthorization: typeof import("./components/http/Authorization.vue")["default"]
+    HoppSmartWindow: typeof import('@hoppscotch/ui')['HoppSmartWindow']
-    HttpAuthorizationApiKey: typeof import("./components/http/authorization/ApiKey.vue")["default"]
+    HoppSmartWindows: typeof import('@hoppscotch/ui')['HoppSmartWindows']
-    HttpAuthorizationBasic: typeof import("./components/http/authorization/Basic.vue")["default"]
+    HttpAuthorization: typeof import('./components/http/Authorization.vue')['default']
-    HttpBody: typeof import("./components/http/Body.vue")["default"]
+    HttpAuthorizationApiKey: typeof import('./components/http/authorization/ApiKey.vue')['default']
-    HttpBodyParameters: typeof import("./components/http/BodyParameters.vue")["default"]
+    HttpAuthorizationBasic: typeof import('./components/http/authorization/Basic.vue')['default']
-    HttpCodegenModal: typeof import("./components/http/CodegenModal.vue")["default"]
+    HttpBody: typeof import('./components/http/Body.vue')['default']
-    HttpHeaders: typeof import("./components/http/Headers.vue")["default"]
+    HttpBodyParameters: typeof import('./components/http/BodyParameters.vue')['default']
-    HttpImportCurl: typeof import("./components/http/ImportCurl.vue")["default"]
+    HttpCodegenModal: typeof import('./components/http/CodegenModal.vue')['default']
-    HttpOAuth2Authorization: typeof import("./components/http/OAuth2Authorization.vue")["default"]
+    HttpHeaders: typeof import('./components/http/Headers.vue')['default']
-    HttpParameters: typeof import("./components/http/Parameters.vue")["default"]
+    HttpImportCurl: typeof import('./components/http/ImportCurl.vue')['default']
-    HttpPreRequestScript: typeof import("./components/http/PreRequestScript.vue")["default"]
+    HttpOAuth2Authorization: typeof import('./components/http/OAuth2Authorization.vue')['default']
-    HttpRawBody: typeof import("./components/http/RawBody.vue")["default"]
+    HttpParameters: typeof import('./components/http/Parameters.vue')['default']
-    HttpReqChangeConfirmModal: typeof import("./components/http/ReqChangeConfirmModal.vue")["default"]
+    HttpPreRequestScript: typeof import('./components/http/PreRequestScript.vue')['default']
-    HttpRequest: typeof import("./components/http/Request.vue")["default"]
+    HttpRawBody: typeof import('./components/http/RawBody.vue')['default']
-    HttpRequestOptions: typeof import("./components/http/RequestOptions.vue")["default"]
+    HttpReqChangeConfirmModal: typeof import('./components/http/ReqChangeConfirmModal.vue')['default']
-    HttpRequestTab: typeof import("./components/http/RequestTab.vue")["default"]
+    HttpRequest: typeof import('./components/http/Request.vue')['default']
-    HttpResponse: typeof import("./components/http/Response.vue")["default"]
+    HttpRequestOptions: typeof import('./components/http/RequestOptions.vue')['default']
-    HttpResponseMeta: typeof import("./components/http/ResponseMeta.vue")["default"]
+    HttpRequestTab: typeof import('./components/http/RequestTab.vue')['default']
-    HttpSidebar: typeof import("./components/http/Sidebar.vue")["default"]
+    HttpResponse: typeof import('./components/http/Response.vue')['default']
-    HttpTabHead: typeof import("./components/http/TabHead.vue")["default"]
+    HttpResponseMeta: typeof import('./components/http/ResponseMeta.vue')['default']
-    HttpTestResult: typeof import("./components/http/TestResult.vue")["default"]
+    HttpSidebar: typeof import('./components/http/Sidebar.vue')['default']
-    HttpTestResultEntry: typeof import("./components/http/TestResultEntry.vue")["default"]
+    HttpTabHead: typeof import('./components/http/TabHead.vue')['default']
-    HttpTestResultEnv: typeof import("./components/http/TestResultEnv.vue")["default"]
+    HttpTestResult: typeof import('./components/http/TestResult.vue')['default']
-    HttpTestResultReport: typeof import("./components/http/TestResultReport.vue")["default"]
+    HttpTestResultEntry: typeof import('./components/http/TestResultEntry.vue')['default']
-    HttpTests: typeof import("./components/http/Tests.vue")["default"]
+    HttpTestResultEnv: typeof import('./components/http/TestResultEnv.vue')['default']
-    HttpURLEncodedParams: typeof import("./components/http/URLEncodedParams.vue")["default"]
+    HttpTestResultReport: typeof import('./components/http/TestResultReport.vue')['default']
-    IconLucideActivity: typeof import("~icons/lucide/activity")["default"]
+    HttpTests: typeof import('./components/http/Tests.vue')['default']
-    IconLucideAlertTriangle: typeof import("~icons/lucide/alert-triangle")["default"]
+    HttpURLEncodedParams: typeof import('./components/http/URLEncodedParams.vue')['default']
-    IconLucideArrowLeft: typeof import("~icons/lucide/arrow-left")["default"]
+    IconLucideActivity: typeof import('~icons/lucide/activity')['default']
-    IconLucideArrowUpRight: typeof import("~icons/lucide/arrow-up-right")["default"]
+    IconLucideAlertTriangle: typeof import('~icons/lucide/alert-triangle')['default']
-    IconLucideCheckCircle: typeof import("~icons/lucide/check-circle")["default"]
+    IconLucideArrowLeft: typeof import('~icons/lucide/arrow-left')['default']
-    IconLucideChevronRight: typeof import("~icons/lucide/chevron-right")["default"]
+    IconLucideArrowUpRight: typeof import('~icons/lucide/arrow-up-right')['default']
-    IconLucideGlobe: typeof import("~icons/lucide/globe")["default"]
+    IconLucideCheckCircle: typeof import('~icons/lucide/check-circle')['default']
-    IconLucideHelpCircle: typeof import("~icons/lucide/help-circle")["default"]
+    IconLucideChevronRight: typeof import('~icons/lucide/chevron-right')['default']
-    IconLucideInbox: typeof import("~icons/lucide/inbox")["default"]
+    IconLucideGlobe: typeof import('~icons/lucide/globe')['default']
-    IconLucideInfo: typeof import("~icons/lucide/info")["default"]
+    IconLucideHelpCircle: typeof import('~icons/lucide/help-circle')['default']
-    IconLucideLayers: typeof import("~icons/lucide/layers")["default"]
+    IconLucideInbox: typeof import('~icons/lucide/inbox')['default']
-    IconLucideListEnd: typeof import("~icons/lucide/list-end")["default"]
+    IconLucideInfo: typeof import('~icons/lucide/info')['default']
-    IconLucideMinus: typeof import("~icons/lucide/minus")["default"]
+    IconLucideLayers: typeof import('~icons/lucide/layers')['default']
-    IconLucideSearch: typeof import("~icons/lucide/search")["default"]
+    IconLucideListEnd: typeof import('~icons/lucide/list-end')['default']
-    IconLucideUsers: typeof import("~icons/lucide/users")["default"]
+    IconLucideMinus: typeof import('~icons/lucide/minus')['default']
-    IconLucideVerified: typeof import("~icons/lucide/verified")["default"]
+    IconLucideRss: typeof import('~icons/lucide/rss')['default']
-    InterceptorsExtensionSubtitle: typeof import("./components/interceptors/ExtensionSubtitle.vue")["default"]
+    IconLucideSearch: typeof import('~icons/lucide/search')['default']
-    LensesHeadersRenderer: typeof import("./components/lenses/HeadersRenderer.vue")["default"]
+    IconLucideUsers: typeof import('~icons/lucide/users')['default']
-    LensesHeadersRendererEntry: typeof import("./components/lenses/HeadersRendererEntry.vue")["default"]
+    IconLucideVerified: typeof import('~icons/lucide/verified')['default']
-    LensesRenderersAudioLensRenderer: typeof import("./components/lenses/renderers/AudioLensRenderer.vue")["default"]
+    InterceptorsExtensionSubtitle: typeof import('./components/interceptors/ExtensionSubtitle.vue')['default']
-    LensesRenderersHTMLLensRenderer: typeof import("./components/lenses/renderers/HTMLLensRenderer.vue")["default"]
+    LensesHeadersRenderer: typeof import('./components/lenses/HeadersRenderer.vue')['default']
-    LensesRenderersImageLensRenderer: typeof import("./components/lenses/renderers/ImageLensRenderer.vue")["default"]
+    LensesHeadersRendererEntry: typeof import('./components/lenses/HeadersRendererEntry.vue')['default']
-    LensesRenderersJSONLensRenderer: typeof import("./components/lenses/renderers/JSONLensRenderer.vue")["default"]
+    LensesRenderersAudioLensRenderer: typeof import('./components/lenses/renderers/AudioLensRenderer.vue')['default']
-    LensesRenderersPDFLensRenderer: typeof import("./components/lenses/renderers/PDFLensRenderer.vue")["default"]
+    LensesRenderersHTMLLensRenderer: typeof import('./components/lenses/renderers/HTMLLensRenderer.vue')['default']
-    LensesRenderersRawLensRenderer: typeof import("./components/lenses/renderers/RawLensRenderer.vue")["default"]
+    LensesRenderersImageLensRenderer: typeof import('./components/lenses/renderers/ImageLensRenderer.vue')['default']
-    LensesRenderersVideoLensRenderer: typeof import("./components/lenses/renderers/VideoLensRenderer.vue")["default"]
+    LensesRenderersJSONLensRenderer: typeof import('./components/lenses/renderers/JSONLensRenderer.vue')['default']
-    LensesRenderersXMLLensRenderer: typeof import("./components/lenses/renderers/XMLLensRenderer.vue")["default"]
+    LensesRenderersPDFLensRenderer: typeof import('./components/lenses/renderers/PDFLensRenderer.vue')['default']
-    LensesResponseBodyRenderer: typeof import("./components/lenses/ResponseBodyRenderer.vue")["default"]
+    LensesRenderersRawLensRenderer: typeof import('./components/lenses/renderers/RawLensRenderer.vue')['default']
-    ProfileShortcode: typeof import("./components/profile/Shortcode.vue")["default"]
+    LensesRenderersVideoLensRenderer: typeof import('./components/lenses/renderers/VideoLensRenderer.vue')['default']
-    ProfileShortcodes: typeof import("./components/profile/Shortcodes.vue")["default"]
+    LensesRenderersXMLLensRenderer: typeof import('./components/lenses/renderers/XMLLensRenderer.vue')['default']
-    ProfileUserDelete: typeof import("./components/profile/UserDelete.vue")["default"]
+    LensesResponseBodyRenderer: typeof import('./components/lenses/ResponseBodyRenderer.vue')['default']
-    RealtimeCommunication: typeof import("./components/realtime/Communication.vue")["default"]
+    ProfileShortcode: typeof import('./components/profile/Shortcode.vue')['default']
-    RealtimeConnectionConfig: typeof import("./components/realtime/ConnectionConfig.vue")["default"]
+    ProfileShortcodes: typeof import('./components/profile/Shortcodes.vue')['default']
-    RealtimeLog: typeof import("./components/realtime/Log.vue")["default"]
+    ProfileUserDelete: typeof import('./components/profile/UserDelete.vue')['default']
-    RealtimeLogEntry: typeof import("./components/realtime/LogEntry.vue")["default"]
+    RealtimeCommunication: typeof import('./components/realtime/Communication.vue')['default']
-    RealtimeSubscription: typeof import("./components/realtime/Subscription.vue")["default"]
+    RealtimeConnectionConfig: typeof import('./components/realtime/ConnectionConfig.vue')['default']
-    SettingsExtension: typeof import("./components/settings/Extension.vue")["default"]
+    RealtimeLog: typeof import('./components/realtime/Log.vue')['default']
-    SettingsProxy: typeof import("./components/settings/Proxy.vue")["default"]
+    RealtimeLogEntry: typeof import('./components/realtime/LogEntry.vue')['default']
-    SmartAccentModePicker: typeof import("./components/smart/AccentModePicker.vue")["default"]
+    RealtimeSubscription: typeof import('./components/realtime/Subscription.vue')['default']
-    SmartAnchor: typeof import("./../../hoppscotch-ui/src/components/smart/Anchor.vue")["default"]
+    SettingsExtension: typeof import('./components/settings/Extension.vue')['default']
-    SmartAutoComplete: typeof import("./../../hoppscotch-ui/src/components/smart/AutoComplete.vue")["default"]
+    SettingsProxy: typeof import('./components/settings/Proxy.vue')['default']
-    SmartChangeLanguage: typeof import("./components/smart/ChangeLanguage.vue")["default"]
+    SmartAccentModePicker: typeof import('./components/smart/AccentModePicker.vue')['default']
-    SmartCheckbox: typeof import("./../../hoppscotch-ui/src/components/smart/Checkbox.vue")["default"]
+    SmartAnchor: typeof import('./../../hoppscotch-ui/src/components/smart/Anchor.vue')['default']
-    SmartColorModePicker: typeof import("./components/smart/ColorModePicker.vue")["default"]
+    SmartAutoComplete: typeof import('./../../hoppscotch-ui/src/components/smart/AutoComplete.vue')['default']
-    SmartConfirmModal: typeof import("./../../hoppscotch-ui/src/components/smart/ConfirmModal.vue")["default"]
+    SmartChangeLanguage: typeof import('./components/smart/ChangeLanguage.vue')['default']
-    SmartEnvInput: typeof import("./components/smart/EnvInput.vue")["default"]
+    SmartCheckbox: typeof import('./../../hoppscotch-ui/src/components/smart/Checkbox.vue')['default']
-    SmartExpand: typeof import("./../../hoppscotch-ui/src/components/smart/Expand.vue")["default"]
+    SmartColorModePicker: typeof import('./components/smart/ColorModePicker.vue')['default']
-    SmartFileChip: typeof import("./../../hoppscotch-ui/src/components/smart/FileChip.vue")["default"]
+    SmartConfirmModal: typeof import('./../../hoppscotch-ui/src/components/smart/ConfirmModal.vue')['default']
-    SmartFontSizePicker: typeof import("./components/smart/FontSizePicker.vue")["default"]
+    SmartEnvInput: typeof import('./components/smart/EnvInput.vue')['default']
-    SmartInput: typeof import("./../../hoppscotch-ui/src/components/smart/Input.vue")["default"]
+    SmartExpand: typeof import('./../../hoppscotch-ui/src/components/smart/Expand.vue')['default']
-    SmartIntersection: typeof import("./../../hoppscotch-ui/src/components/smart/Intersection.vue")["default"]
+    SmartFileChip: typeof import('./../../hoppscotch-ui/src/components/smart/FileChip.vue')['default']
-    SmartItem: typeof import("./../../hoppscotch-ui/src/components/smart/Item.vue")["default"]
+    SmartFontSizePicker: typeof import('./components/smart/FontSizePicker.vue')['default']
-    SmartLink: typeof import("./../../hoppscotch-ui/src/components/smart/Link.vue")["default"]
+    SmartInput: typeof import('./../../hoppscotch-ui/src/components/smart/Input.vue')['default']
-    SmartModal: typeof import("./../../hoppscotch-ui/src/components/smart/Modal.vue")["default"]
+    SmartIntersection: typeof import('./../../hoppscotch-ui/src/components/smart/Intersection.vue')['default']
-    SmartPicture: typeof import("./../../hoppscotch-ui/src/components/smart/Picture.vue")["default"]
+    SmartItem: typeof import('./../../hoppscotch-ui/src/components/smart/Item.vue')['default']
-    SmartPlaceholder: typeof import("./../../hoppscotch-ui/src/components/smart/Placeholder.vue")["default"]
+    SmartLink: typeof import('./../../hoppscotch-ui/src/components/smart/Link.vue')['default']
-    SmartProgressRing: typeof import("./../../hoppscotch-ui/src/components/smart/ProgressRing.vue")["default"]
+    SmartModal: typeof import('./../../hoppscotch-ui/src/components/smart/Modal.vue')['default']
-    SmartRadio: typeof import("./../../hoppscotch-ui/src/components/smart/Radio.vue")["default"]
+    SmartPicture: typeof import('./../../hoppscotch-ui/src/components/smart/Picture.vue')['default']
-    SmartRadioGroup: typeof import("./../../hoppscotch-ui/src/components/smart/RadioGroup.vue")["default"]
+    SmartPlaceholder: typeof import('./../../hoppscotch-ui/src/components/smart/Placeholder.vue')['default']
-    SmartSlideOver: typeof import("./../../hoppscotch-ui/src/components/smart/SlideOver.vue")["default"]
+    SmartProgressRing: typeof import('./../../hoppscotch-ui/src/components/smart/ProgressRing.vue')['default']
-    SmartSpinner: typeof import("./../../hoppscotch-ui/src/components/smart/Spinner.vue")["default"]
+    SmartRadio: typeof import('./../../hoppscotch-ui/src/components/smart/Radio.vue')['default']
-    SmartTab: typeof import("./../../hoppscotch-ui/src/components/smart/Tab.vue")["default"]
+    SmartRadioGroup: typeof import('./../../hoppscotch-ui/src/components/smart/RadioGroup.vue')['default']
-    SmartTabs: typeof import("./../../hoppscotch-ui/src/components/smart/Tabs.vue")["default"]
+    SmartSlideOver: typeof import('./../../hoppscotch-ui/src/components/smart/SlideOver.vue')['default']
-    SmartToggle: typeof import("./../../hoppscotch-ui/src/components/smart/Toggle.vue")["default"]
+    SmartSpinner: typeof import('./../../hoppscotch-ui/src/components/smart/Spinner.vue')['default']
-    SmartTree: typeof import("./../../hoppscotch-ui/src/components/smart/Tree.vue")["default"]
+    SmartTab: typeof import('./../../hoppscotch-ui/src/components/smart/Tab.vue')['default']
-    SmartTreeBranch: typeof import("./../../hoppscotch-ui/src/components/smart/TreeBranch.vue")["default"]
+    SmartTabs: typeof import('./../../hoppscotch-ui/src/components/smart/Tabs.vue')['default']
-    SmartWindow: typeof import("./../../hoppscotch-ui/src/components/smart/Window.vue")["default"]
+    SmartToggle: typeof import('./../../hoppscotch-ui/src/components/smart/Toggle.vue')['default']
-    SmartWindows: typeof import("./../../hoppscotch-ui/src/components/smart/Windows.vue")["default"]
+    SmartTree: typeof import('./../../hoppscotch-ui/src/components/smart/Tree.vue')['default']
-    TabPrimary: typeof import("./components/tab/Primary.vue")["default"]
+    SmartTreeBranch: typeof import('./../../hoppscotch-ui/src/components/smart/TreeBranch.vue')['default']
-    TabSecondary: typeof import("./components/tab/Secondary.vue")["default"]
+    SmartWindow: typeof import('./../../hoppscotch-ui/src/components/smart/Window.vue')['default']
-    Teams: typeof import("./components/teams/index.vue")["default"]
+    SmartWindows: typeof import('./../../hoppscotch-ui/src/components/smart/Windows.vue')['default']
-    TeamsAdd: typeof import("./components/teams/Add.vue")["default"]
+    TabPrimary: typeof import('./components/tab/Primary.vue')['default']
-    TeamsEdit: typeof import("./components/teams/Edit.vue")["default"]
+    TabSecondary: typeof import('./components/tab/Secondary.vue')['default']
-    TeamsInvite: typeof import("./components/teams/Invite.vue")["default"]
+    Teams: typeof import('./components/teams/index.vue')['default']
-    TeamsMemberStack: typeof import("./components/teams/MemberStack.vue")["default"]
+    TeamsAdd: typeof import('./components/teams/Add.vue')['default']
-    TeamsModal: typeof import("./components/teams/Modal.vue")["default"]
+    TeamsEdit: typeof import('./components/teams/Edit.vue')['default']
-    TeamsTeam: typeof import("./components/teams/Team.vue")["default"]
+    TeamsInvite: typeof import('./components/teams/Invite.vue')['default']
-    Tippy: typeof import("vue-tippy")["Tippy"]
+    TeamsMemberStack: typeof import('./components/teams/MemberStack.vue')['default']
-    WorkspaceCurrent: typeof import("./components/workspace/Current.vue")["default"]
+    TeamsModal: typeof import('./components/teams/Modal.vue')['default']
-    WorkspaceSelector: typeof import("./components/workspace/Selector.vue")["default"]
+    TeamsTeam: typeof import('./components/teams/Team.vue')['default']
+    Tippy: typeof import('vue-tippy')['Tippy']
+    WorkspaceCurrent: typeof import('./components/workspace/Current.vue')['default']
+    WorkspaceSelector: typeof import('./components/workspace/Selector.vue')['default']
   }
 }

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

@@ -1,7 +1,6 @@
 <template>
   <AppShortcuts :show="showShortcuts" @close="showShortcuts = false" />
   <AppShare :show="showShare" @hide-modal="showShare = false" />
-  <AppSocial :show="showSocial" @hide-modal="showSocial = false" />
   <FirebaseLogin :show="showLogin" @hide-modal="showLogin = false" />
 
   <HoppSmartConfirmModal
@@ -18,7 +17,6 @@ import { pipe } from "fp-ts/function"
 import * as TE from "fp-ts/TaskEither"
 import { deleteTeam as backendDeleteTeam } from "~/helpers/backend/mutations/Team"
 import { defineActionHandler, invokeAction } from "~/helpers/actions"
-import { showChat } from "~/modules/crisp"
 import { useToast } from "~/composables/toast"
 import { useI18n } from "~/composables/i18n"
 
@@ -27,7 +25,6 @@ const t = useI18n()
 
 const showShortcuts = ref(false)
 const showShare = ref(false)
-const showSocial = ref(false)
 const showLogin = ref(false)
 
 const confirmRemove = ref(false)
@@ -60,18 +57,10 @@ defineActionHandler("modals.share.toggle", () => {
   showShare.value = !showShare.value
 })
 
-defineActionHandler("modals.social.toggle", () => {
-  showSocial.value = !showSocial.value
-})
-
 defineActionHandler("modals.login.toggle", () => {
   showLogin.value = !showLogin.value
 })
 
-defineActionHandler("flyouts.chat.open", () => {
-  showChat()
-})
-
 defineActionHandler("modals.team.delete", ({ teamId }) => {
   teamID.value = teamId
   confirmRemove.value = true

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

@@ -76,6 +76,7 @@
                   }
                 "
               />
+              <!--
               <HoppSmartItem
                 ref="chat"
                 :icon="IconMessageCircle"
@@ -88,20 +89,34 @@
                   }
                 "
               />
-              <HoppSmartItem
+              -->
-                :icon="IconGift"
+              <template
-                :label="`${t('app.whats_new')}`"
+                v-for="footerItem in platform.ui?.additionalFooterMenuItems"
-                to="https://docs.hoppscotch.io/documentation/changelog"
+                :key="footerItem.id"
-                blank
+              >
-                @click="hide()"
+                <template v-if="footerItem.action.type === 'link'">
-              />
+                  <HoppSmartItem
-              <HoppSmartItem
+                    :icon="footerItem.icon"
-                :icon="IconActivity"
+                    :label="footerItem.text(t)"
-                :label="t('app.status')"
+                    :to="footerItem.action.href"
-                to="https://status.hoppscotch.io"
+                    blank
-                blank
+                    @click="hide()"
-                @click="hide()"
+                  />
-              />
+                </template>
+                <HoppSmartItem
+                  v-else
+                  :icon="footerItem.icon"
+                  :label="footerItem.text(t)"
+                  blank
+                  @click="
+                    () => {
+                      // @ts-expect-error TypeScript not understanding the type
+                      footerItem.action.do()
+                      hide()
+                    }
+                  "
+                />
+              </template>
               <hr />
               <HoppSmartItem
                 :icon="IconGithub"
@@ -207,15 +222,11 @@ import IconColumns from "~icons/lucide/columns"
 import IconSidebarOpen from "~icons/lucide/sidebar-open"
 import IconShieldCheck from "~icons/lucide/shield-check"
 import IconBook from "~icons/lucide/book"
-import IconMessageCircle from "~icons/lucide/message-circle"
-import IconGift from "~icons/lucide/gift"
-import IconActivity from "~icons/lucide/activity"
 import IconGithub from "~icons/lucide/github"
 import IconTwitter from "~icons/lucide/twitter"
 import IconUserPlus from "~icons/lucide/user-plus"
 import IconLock from "~icons/lucide/lock"
 import IconLifeBuoy from "~icons/lucide/life-buoy"
-import { showChat } from "@modules/crisp"
 import { useSetting } from "@composables/settings"
 import { useI18n } from "@composables/i18n"
 import { useReadonlyStream } from "@composables/stream"
@@ -262,10 +273,6 @@ const nativeShare = () => {
   }
 }
 
-const chatWithUs = () => {
-  showChat()
-}
-
 const showDeveloperOptionModal = () => {
   if (currentUser.value) {
     showDeveloperOptions.value = true

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

@@ -30,105 +30,37 @@
         <h2 class="p-4 font-semibold font-bold text-secondaryDark">
           {{ t("support.title") }}
         </h2>
-        <HoppSmartItem
+        <template
-          :icon="IconBook"
+          v-for="item in platform.ui?.additionalSupportOptionsMenuItems"
-          :label="t('app.documentation')"
+          :key="item.id"
-          to="https://docs.hoppscotch.io"
+        >
-          :description="t('support.documentation')"
+          <HoppSmartItem
-          :info-icon="IconChevronRight"
+            v-if="item.action.type === 'link'"
-          active
+            :icon="item.icon"
-          blank
+            :label="item.text(t)"
-          @click="hideModal()"
+            :to="item.action.href"
-        />
+            :description="item.subtitle(t)"
-        <HoppSmartItem
+            :info-icon="IconChevronRight"
-          :icon="IconGift"
+            active
-          :label="t('app.whats_new')"
+            blank
-          to="https://docs.hoppscotch.io/documentation/changelog"
+            @click="hideModal()"
-          :description="t('support.changelog')"
+          />
-          :info-icon="IconChevronRight"
+          <HoppSmartItem
-          active
+            v-else
-          blank
+            :icon="item.icon"
-          @click="hideModal()"
+            :label="item.text(t)"
-        />
+            :description="item.subtitle(t)"
-        <HoppSmartItem
+            :info-icon="IconChevronRight"
-          :icon="IconActivity"
+            active
-          :label="t('app.status')"
+            @click="
-          to="https://status.hoppscotch.io"
+              () => {
-          blank
+                // @ts-expect-error Typescript isn't able to understand
-          :description="t('app.status_description')"
+                item.action.do()
-          :info-icon="IconChevronRight"
+                hideModal()
-          active
+              }
-          @click="hideModal()"
+            "
-        />
+          />
-        <HoppSmartItem
+        </template>
-          :icon="IconLock"
-          :label="`${t('app.terms_and_privacy')}`"
-          to="https://docs.hoppscotch.io/support/privacy"
-          blank
-          :description="t('app.terms_and_privacy')"
-          :info-icon="IconChevronRight"
-          active
-          @click="hideModal()"
-        />
-        <h2 class="p-4 font-semibold font-bold text-secondaryDark">
-          {{ t("settings.follow") }}
-        </h2>
-        <HoppSmartItem
-          :icon="IconDiscord"
-          :label="t('app.discord')"
-          to="https://hoppscotch.io/discord"
-          blank
-          :description="t('app.join_discord_community')"
-          :info-icon="IconChevronRight"
-          active
-          @click="hideModal()"
-        />
-        <HoppSmartItem
-          :icon="IconTwitter"
-          :label="t('app.twitter')"
-          to="https://hoppscotch.io/twitter"
-          blank
-          :description="t('support.twitter')"
-          :info-icon="IconChevronRight"
-          active
-          @click="hideModal()"
-        />
-        <HoppSmartItem
-          :icon="IconGithub"
-          :label="`${t('app.github')}`"
-          to="https://github.com/hoppscotch/hoppscotch"
-          blank
-          :description="t('support.github')"
-          :info-icon="IconChevronRight"
-          active
-          @click="hideModal()"
-        />
-        <HoppSmartItem
-          :icon="IconMessageCircle"
-          :label="t('app.chat_with_us')"
-          :description="t('support.chat')"
-          :info-icon="IconChevronRight"
-          active
-          @click="chatWithUs()"
-        />
-        <HoppSmartItem
-          :icon="IconUserPlus"
-          :label="`${t('app.invite')}`"
-          :description="t('shortcut.miscellaneous.invite')"
-          :info-icon="IconChevronRight"
-          active
-          @click="expandInvite()"
-        />
-        <HoppSmartItem
-          v-if="navigatorShare"
-          v-tippy="{ theme: 'tooltip' }"
-          :icon="IconShare2"
-          :label="`${t('request.share')}`"
-          :description="t('request.share_description')"
-          :info-icon="IconChevronRight"
-          active
-          @click="nativeShare()"
-        />
       </div>
     </template>
   </HoppSmartModal>
@@ -138,24 +70,12 @@
 import { watch } from "vue"
 import IconSidebar from "~icons/lucide/sidebar"
 import IconSidebarOpen from "~icons/lucide/sidebar-open"
-import IconBook from "~icons/lucide/book"
-import IconGift from "~icons/lucide/gift"
-import IconActivity from "~icons/lucide/activity"
-import IconLock from "~icons/lucide/lock"
-import IconDiscord from "~icons/brands/discord"
-import IconTwitter from "~icons/brands/twitter"
-import IconGithub from "~icons/lucide/github"
-import IconMessageCircle from "~icons/lucide/message-circle"
-import IconUserPlus from "~icons/lucide/user-plus"
-import IconShare2 from "~icons/lucide/share-2"
 import IconChevronRight from "~icons/lucide/chevron-right"
 import { useSetting } from "@composables/settings"
-import { invokeAction } from "~/helpers/actions"
-import { showChat } from "@modules/crisp"
 import { useI18n } from "@composables/i18n"
+import { platform } from "~/platform"
 
 const t = useI18n()
-const navigatorShare = !!navigator.share
 
 const ZEN_MODE = useSetting("ZEN_MODE")
 const EXPAND_NAVIGATION = useSetting("EXPAND_NAVIGATION")
@@ -176,11 +96,6 @@ const emit = defineEmits<{
   (e: "hide-modal"): void
 }>()
 
-const chatWithUs = () => {
-  showChat()
-  hideModal()
-}
-
 const expandNavigation = () => {
   EXPAND_NAVIGATION.value = !EXPAND_NAVIGATION.value
   hideModal()
@@ -191,24 +106,6 @@ const expandCollection = () => {
   hideModal()
 }
 
-const expandInvite = () => {
-  invokeAction("modals.share.toggle")
-}
-
-const nativeShare = () => {
-  if (navigator.share) {
-    navigator
-      .share({
-        title: "Hoppscotch",
-        text: "Hoppscotch • Open source API development ecosystem - Helps you create requests faster, saving precious time on development.",
-        url: "https://hoppscotch.io",
-      })
-      .catch(console.error)
-  } else {
-    // fallback
-  }
-}
-
 const hideModal = () => {
   emit("hide-modal")
 }

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

@@ -1,135 +0,0 @@
-<template>
-  <HoppSmartModal
-    v-if="show"
-    dialog
-    :title="t('app.social_links')"
-    @close="hideModal"
-  >
-    <template #body>
-      <div class="flex flex-col space-y-2">
-        <div class="grid grid-cols-3 gap-4">
-          <a
-            v-for="(platform, index) in platforms"
-            :key="`platform-${index}`"
-            :href="platform.link"
-            target="_blank"
-            class="social-link"
-            tabindex="0"
-          >
-            <component :is="platform.icon" class="w-6 h-6" />
-            <span class="mt-3">
-              {{ platform.name }}
-            </span>
-          </a>
-          <button class="social-link" @click="copyAppLink">
-            <component :is="copyIcon" class="w-6 h-6 text-xl" />
-            <span class="mt-3">
-              {{ t("app.copy") }}
-            </span>
-          </button>
-        </div>
-      </div>
-    </template>
-    <template #footer>
-      <p class="text-secondaryLight">
-        {{ t("app.social_description") }}
-      </p>
-    </template>
-  </HoppSmartModal>
-</template>
-
-<script setup lang="ts">
-import { useI18n } from "@composables/i18n"
-import { useToast } from "@composables/toast"
-import { refAutoReset } from "@vueuse/core"
-import { copyToClipboard } from "~/helpers/utils/clipboard"
-import IconFacebook from "~icons/brands/facebook"
-import IconLinkedIn from "~icons/brands/linkedin"
-import IconReddit from "~icons/brands/reddit"
-import IconTwitter from "~icons/brands/twitter"
-import IconCheck from "~icons/lucide/check"
-import IconCopy from "~icons/lucide/copy"
-import IconGitHub from "~icons/lucide/github"
-
-const t = useI18n()
-
-const toast = useToast()
-
-defineProps<{
-  show: boolean
-}>()
-
-const emit = defineEmits<{
-  (e: "hide-modal"): void
-}>()
-
-const url = "https://hoppscotch.io"
-
-const copyIcon = refAutoReset<typeof IconCopy | typeof IconCheck>(
-  IconCopy,
-  1000
-)
-
-const platforms = [
-  {
-    name: "GitHub",
-    icon: IconGitHub,
-    link: `https://hoppscotch.io/github`,
-  },
-  {
-    name: "Twitter",
-    icon: IconTwitter,
-    link: `https://twitter.com/hoppscotch_io`,
-  },
-  {
-    name: "Facebook",
-    icon: IconFacebook,
-    link: `https://www.facebook.com/hoppscotch.io`,
-  },
-  {
-    name: "Reddit",
-    icon: IconReddit,
-    link: `https://www.reddit.com/r/hoppscotch`,
-  },
-  {
-    name: "LinkedIn",
-    icon: IconLinkedIn,
-    link: `https://www.linkedin.com/company/hoppscotch/`,
-  },
-]
-
-const copyAppLink = () => {
-  copyToClipboard(url)
-  copyIcon.value = IconCheck
-  toast.success(`${t("state.copied_to_clipboard")}`)
-}
-
-const hideModal = () => {
-  emit("hide-modal")
-}
-</script>
-
-<style lang="scss" scoped>
-.social-link {
-  @apply border border-dividerLight;
-  @apply rounded;
-  @apply flex-col flex;
-  @apply p-4;
-  @apply items-center;
-  @apply justify-center;
-  @apply font-semibold;
-  @apply hover: (bg-primaryLight text-secondaryDark);
-  @apply focus: outline-none;
-  @apply focus-visible: border-divider;
-
-  svg {
-    @apply opacity-80;
-  }
-
-  &:hover {
-    svg {
-      @apply opacity-100;
-    }
-  }
-}
-</style>

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

@@ -8,89 +8,46 @@
   >
     <template #body>
       <div class="flex flex-col space-y-2">
-        <HoppSmartItem
+        <template
-          :icon="IconBook"
+          v-for="item in platform.ui?.additionalSupportOptionsMenuItems"
-          :label="t('app.documentation')"
+          :key="item.id"
-          to="https://docs.hoppscotch.io"
+        >
-          :description="t('support.documentation')"
+          <HoppSmartItem
-          :info-icon="IconChevronRight"
+            v-if="item.action.type === 'link'"
-          active
+            :icon="item.icon"
-          blank
+            :label="item.text(t)"
-          @click="hideModal()"
+            :to="item.action.href"
-        />
+            :description="item.subtitle(t)"
-        <HoppSmartItem
+            :info-icon="IconChevronRight"
-          :icon="IconZap"
+            active
-          :label="t('app.keyboard_shortcuts')"
+            blank
-          :description="t('support.shortcuts')"
+            @click="hideModal()"
-          :info-icon="IconChevronRight"
+          />
-          active
+          <HoppSmartItem
-          @click="showShortcuts()"
+            v-else
-        />
+            :icon="item.icon"
-        <HoppSmartItem
+            :label="item.text(t)"
-          :icon="IconGift"
+            :description="item.subtitle(t)"
-          :label="t('app.whats_new')"
+            :info-icon="IconChevronRight"
-          to="https://docs.hoppscotch.io/documentation/changelog"
+            active
-          :description="t('support.changelog')"
+            @click="
-          :info-icon="IconChevronRight"
+              () => {
-          active
+                // @ts-expect-error Typescript isn't able to understand
-          blank
+                item.action.do()
-          @click="hideModal()"
+                hideModal()
-        />
+              }
-        <HoppSmartItem
+            "
-          :icon="IconMessageCircle"
+          />
-          :label="t('app.chat_with_us')"
+        </template>
-          :description="t('support.chat')"
-          :info-icon="IconChevronRight"
-          active
-          @click="chatWithUs()"
-        />
-        <HoppSmartItem
-          :icon="IconGitHub"
-          :label="t('app.github')"
-          to="https://hoppscotch.io/github"
-          blank
-          :description="t('support.github')"
-          :info-icon="IconChevronRight"
-          active
-          @click="hideModal()"
-        />
-        <HoppSmartItem
-          :icon="IconDiscord"
-          :label="t('app.join_discord_community')"
-          to="https://hoppscotch.io/discord"
-          blank
-          :description="t('support.community')"
-          :info-icon="IconChevronRight"
-          active
-          @click="hideModal()"
-        />
-        <HoppSmartItem
-          :icon="IconTwitter"
-          :label="t('app.twitter')"
-          to="https://hoppscotch.io/twitter"
-          blank
-          :description="t('support.twitter')"
-          :info-icon="IconChevronRight"
-          active
-          @click="hideModal()"
-        />
       </div>
     </template>
   </HoppSmartModal>
 </template>
 
 <script setup lang="ts">
-import IconTwitter from "~icons/brands/twitter"
-import IconDiscord from "~icons/brands/discord"
-import IconGitHub from "~icons/lucide/github"
-import IconMessageCircle from "~icons/lucide/message-circle"
-import IconGift from "~icons/lucide/gift"
-import IconZap from "~icons/lucide/zap"
-import IconBook from "~icons/lucide/book"
 import IconChevronRight from "~icons/lucide/chevron-right"
-import { invokeAction } from "@helpers/actions"
-import { showChat } from "@modules/crisp"
 import { useI18n } from "@composables/i18n"
+import { platform } from "~/platform"
 
 const t = useI18n()
 
@@ -102,16 +59,6 @@ const emit = defineEmits<{
   (e: "hide-modal"): void
 }>()
 
-const chatWithUs = () => {
-  showChat()
-  hideModal()
-}
-
-const showShortcuts = () => {
-  invokeAction("flyouts.keybinds.toggle")
-  hideModal()
-}
-
 const hideModal = () => {
   emit("hide-modal")
 }

packages/hoppscotch-common/src/components/app/spotlight/entry/IconSelected.vue

@@ -0,0 +1,3 @@
+<template>
+  <IconLucideCheckCircle class="text-accent" />
+</template>

packages/hoppscotch-common/src/components/app/spotlight/index.vue

@@ -111,6 +111,7 @@ import {
   SwitchWorkspaceSpotlightSearcherService,
   WorkspaceSpotlightSearcherService,
 } from "~/services/spotlight/searchers/workspace.searcher"
+import { InterceptorSpotlightSearcherService } from "~/services/spotlight/searchers/interceptor.searcher"
 
 const t = useI18n()
 
@@ -138,6 +139,7 @@ useService(EnvironmentsSpotlightSearcherService)
 useService(SwitchEnvSpotlightSearcherService)
 useService(WorkspaceSpotlightSearcherService)
 useService(SwitchWorkspaceSpotlightSearcherService)
+useService(InterceptorSpotlightSearcherService)
 
 const search = ref("")
 
@@ -264,4 +266,3 @@ function newUseArrowKeysForNavigation() {
   return { selectedEntry }
 }
 </script>
-~/services/spotlight/searchers/workspace.searcher

packages/hoppscotch-common/src/components/collections/graphql/Collection.vue

@@ -37,6 +37,7 @@
           @click="
             emit('add-request', {
               path: `${collectionIndex}`,
+              index: collection.requests.length,
             })
           "
         />
@@ -219,6 +220,7 @@ import {
   moveGraphqlRequest,
 } from "~/newstore/collections"
 import { Picked } from "~/helpers/types/HoppPicked"
+import { getTabsRefTo } from "~/helpers/graphql/tab"
 
 const props = defineProps({
   picked: { type: Object, default: null },
@@ -293,6 +295,22 @@ const removeCollection = () => {
     emit("select", null)
   }
 
+  const possibleTabs = getTabsRefTo((tab) => {
+    const ctx = tab.document.saveContext
+
+    if (!ctx) return false
+
+    return (
+      ctx.originLocation === "user-collection" &&
+      ctx.folderPath.startsWith(props.collectionIndex.toString())
+    )
+  })
+
+  for (const tab of possibleTabs) {
+    tab.value.document.saveContext = undefined
+    tab.value.document.isDirty = true
+  }
+
   removeGraphqlCollection(props.collectionIndex, props.collection.id)
   toast.success(`${t("state.deleted")}`)
 }

packages/hoppscotch-common/src/components/collections/graphql/Folder.vue

@@ -34,7 +34,12 @@
           :icon="IconFilePlus"
           :title="t('request.new')"
           class="hidden group-hover:inline-flex"
-          @click="emit('add-request', { path: folderPath })"
+          @click="
+            emit('add-request', {
+              path: folderPath,
+              index: folder.requests.length,
+            })
+          "
         />
         <HoppButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
@@ -198,6 +203,7 @@ import { useI18n } from "@composables/i18n"
 import { useColorMode } from "@composables/theming"
 import { removeGraphqlFolder, moveGraphqlRequest } from "~/newstore/collections"
 import { computed, ref } from "vue"
+import { getTabsRefTo } from "~/helpers/graphql/tab"
 
 const toast = useToast()
 const t = useI18n()
@@ -249,10 +255,8 @@ const collectionIcon = computed(() => {
 
 const pick = () => {
   emit("select", {
-    picked: {
+    pickedType: "gql-my-folder",
-      pickedType: "gql-my-folder",
+    folderPath: props.folderPath,
-      folderPath: props.folderPath,
-    },
   })
 }
 
@@ -273,6 +277,22 @@ const removeFolder = () => {
     emit("select", { picked: null })
   }
 
+  const possibleTabs = getTabsRefTo((tab) => {
+    const ctx = tab.document.saveContext
+
+    if (!ctx) return false
+
+    return (
+      ctx.originLocation === "user-collection" &&
+      ctx.folderPath.startsWith(props.folderPath)
+    )
+  })
+
+  for (const tab of possibleTabs) {
+    tab.value.document.saveContext = undefined
+    tab.value.document.isDirty = true
+  }
+
   removeGraphqlFolder(props.folderPath, props.folder.id)
   toast.success(t("state.deleted"))
 }

packages/hoppscotch-common/src/components/collections/graphql/Request.vue

@@ -20,22 +20,28 @@
         />
       </span>
       <span
-        class="flex flex-1 min-w-0 py-2 pr-2 cursor-pointer transition group-hover:text-secondaryDark"
+        class="flex items-center flex-1 min-w-0 py-2 pr-2 cursor-pointer transition group-hover:text-secondaryDark"
         @click="selectRequest()"
       >
         <span class="truncate" :class="{ 'text-accent': isSelected }">
           {{ request.name }}
         </span>
+        <span
+          v-if="isActive"
+          v-tippy="{ theme: 'tooltip' }"
+          class="relative h-1.5 w-1.5 flex flex-shrink-0 mx-3"
+          :title="`${t('collection.request_in_use')}`"
+        >
+          <span
+            class="absolute inline-flex flex-shrink-0 w-full h-full bg-green-500 rounded-full opacity-75 animate-ping"
+          >
+          </span>
+          <span
+            class="relative inline-flex flex-shrink-0 rounded-full h-1.5 w-1.5 bg-green-500"
+          ></span>
+        </span>
       </span>
       <div class="flex">
-        <HoppButtonSecondary
-          v-if="!saveRequest"
-          v-tippy="{ theme: 'tooltip' }"
-          :icon="IconRotateCCW"
-          :title="t('action.restore')"
-          class="hidden group-hover:inline-flex"
-          @click="selectRequest()"
-        />
         <span>
           <tippy
             ref="options"
@@ -121,7 +127,6 @@
 <script setup lang="ts">
 import IconCheckCircle from "~icons/lucide/check-circle"
 import IconFile from "~icons/lucide/file"
-import IconRotateCCW from "~icons/lucide/rotate-ccw"
 import IconMoreVertical from "~icons/lucide/more-vertical"
 import IconEdit from "~icons/lucide/edit"
 import IconCopy from "~icons/lucide/copy"
@@ -132,7 +137,12 @@ import { useToast } from "@composables/toast"
 import { HoppGQLRequest, makeGQLRequest } from "@hoppscotch/data"
 import { cloneDeep } from "lodash-es"
 import { removeGraphqlRequest } from "~/newstore/collections"
-import { createNewTab } from "~/helpers/graphql/tab"
+import {
+  createNewTab,
+  getTabRefWithSaveContext,
+  currentTabID,
+  currentActiveTab,
+} from "~/helpers/graphql/tab"
 
 // Template refs
 const tippyActions = ref<any | null>(null)
@@ -154,6 +164,18 @@ const props = defineProps({
   requestIndex: { type: Number, default: null },
 })
 
+const isActive = computed(() => {
+  const saveCtx = currentActiveTab.value?.document.saveContext
+
+  if (!saveCtx) return false
+
+  return (
+    saveCtx.originLocation === "user-collection" &&
+    saveCtx.folderPath === props.folderPath &&
+    saveCtx.requestIndex === props.requestIndex
+  )
+})
+
 // TODO: Better types please
 const emit = defineEmits(["select", "edit-request", "duplicate-request"])
 
@@ -179,7 +201,24 @@ const selectRequest = () => {
   if (props.saveRequest) {
     pick()
   } else {
+    const possibleTab = getTabRefWithSaveContext({
+      originLocation: "user-collection",
+      folderPath: props.folderPath,
+      requestIndex: props.requestIndex,
+    })
+
+    // Switch to that request if that request is open
+    if (possibleTab) {
+      currentTabID.value = possibleTab.value.id
+      return
+    }
+
     createNewTab({
+      saveContext: {
+        originLocation: "user-collection",
+        folderPath: props.folderPath,
+        requestIndex: props.requestIndex,
+      },
       request: cloneDeep(
         makeGQLRequest({
           name: props.request.name,
@@ -213,6 +252,18 @@ const removeRequest = () => {
     emit("select", null)
   }
 
+  // Detach the request from any of the tabs
+  const possibleTab = getTabRefWithSaveContext({
+    originLocation: "user-collection",
+    folderPath: props.folderPath,
+    requestIndex: props.requestIndex,
+  })
+
+  if (possibleTab) {
+    possibleTab.value.document.saveContext = undefined
+    possibleTab.value.document.isDirty = true
+  }
+
   removeGraphqlRequest(props.folderPath, props.requestIndex, props.request.id)
   toast.success(`${t("state.deleted")}`)
 }

packages/hoppscotch-common/src/components/collections/graphql/index.vue

@@ -265,7 +265,7 @@ export default defineComponent({
       this.$data.editingCollectionIndex = collectionIndex
       this.displayModalEdit(true)
     },
-    onAddRequest({ name, path }) {
+    onAddRequest({ name, path, index }) {
       const newRequest = {
         ...currentActiveTab.value.document.request,
         name,
@@ -274,6 +274,11 @@ export default defineComponent({
       saveGraphqlRequestAs(path, newRequest)
 
       createNewTab({
+        saveContext: {
+          originLocation: "user-collection",
+          folderPath: path,
+          requestIndex: index,
+        },
         request: newRequest,
         isDirty: false,
       })

packages/hoppscotch-common/src/components/collections/index.vue

@@ -239,6 +239,7 @@ import {
   resetTeamRequestsContext,
 } from "~/helpers/collection/collection"
 import { currentReorderingStatus$ } from "~/newstore/reordering"
+import { defineActionHandler } from "~/helpers/actions"
 
 const t = useI18n()
 const toast = useToast()
@@ -2067,4 +2068,8 @@ const getErrorMessage = (err: GQLError<string>) => {
     }
   }
 }
+
+defineActionHandler("collection.new", () => {
+  displayModalAdd(true)
+})
 </script>

packages/hoppscotch-common/src/components/environments/Add.vue

@@ -21,7 +21,12 @@
           <label for="value" class="font-semibold min-w-10">{{
             t("environment.value")
           }}</label>
-          <input type="text" :value="value" class="input" />
+          <input
+            v-model="editingValue"
+            type="text"
+            class="input"
+            :placeholder="t('environment.value')"
+          />
         </div>
         <div class="flex items-center space-x-8 ml-2">
           <label for="scope" class="font-semibold min-w-10">
@@ -105,9 +110,12 @@ watch(
       scope.value = {
         type: "global",
       }
-      editingName.value = ""
       replaceWithVariable.value = false
+      editingName.value = ""
+      editingValue.value = ""
     }
+    editingName.value = props.name
+    editingValue.value = props.value
   }
 )
 
@@ -132,6 +140,7 @@ const scope = ref<Scope>({
 const replaceWithVariable = ref(false)
 
 const editingName = ref(props.name)
+const editingValue = ref(props.value)
 
 const addEnvironment = async () => {
   if (!editingName.value) {
@@ -141,13 +150,13 @@ const addEnvironment = async () => {
   if (scope.value.type === "global") {
     addGlobalEnvVariable({
       key: editingName.value,
-      value: props.value,
+      value: editingValue.value,
     })
     toast.success(`${t("environment.updated")}`)
   } else if (scope.value.type === "my-environment") {
     addEnvironmentVariable(scope.value.index, {
       key: editingName.value,
-      value: props.value,
+      value: editingValue.value,
     })
     toast.success(`${t("environment.updated")}`)
   } else {
@@ -155,7 +164,7 @@ const addEnvironment = async () => {
       ...scope.value.environment.environment.variables,
       {
         key: editingName.value,
-        value: props.value,
+        value: editingValue.value,
       },
     ]
     await pipe(
@@ -182,7 +191,7 @@ const addEnvironment = async () => {
     //replace the currenttab endpoint containing the value in the text with variablename
     currentActiveTab.value.document.request.endpoint =
       currentActiveTab.value.document.request.endpoint.replace(
-        props.value,
+        editingValue.value,
         variableName
       )
   }

packages/hoppscotch-common/src/components/environments/Selector.vue

@@ -32,6 +32,7 @@
           @keyup.escape="hide()"
         >
           <HoppSmartItem
+            v-if="!isScopeSelector"
             :label="`${t('environment.no_environment')}`"
             :info-icon="
               selectedEnvironmentIndex.type === 'NO_ENV_SELECTED'
@@ -48,6 +49,21 @@
               }
             "
           />
+          <HoppSmartItem
+            v-else-if="isScopeSelector && modelValue"
+            :label="t('environment.global')"
+            :icon="IconGlobe"
+            :info-icon="modelValue.type === 'global' ? IconCheck : undefined"
+            :active-info-icon="modelValue.type === 'global'"
+            @click="
+              () => {
+                $emit('update:modelValue', {
+                  type: 'global',
+                })
+                hide()
+              }
+            "
+          />
           <HoppSmartTabs
             v-model="selectedEnvTab"
             :styles="`sticky overflow-x-auto my-2 border border-divider rounded flex-shrink-0 z-0 top-0 bg-primary ${
@@ -66,14 +82,14 @@
                 :key="`gen-${index}`"
                 :icon="IconLayers"
                 :label="gen.name"
-                :info-icon="index === selectedEnv.index ? IconCheck : undefined"
+                :info-icon="isEnvActive(index) ? IconCheck : undefined"
-                :active-info-icon="index === selectedEnv.index"
+                :active-info-icon="isEnvActive(index)"
                 @click="
                   () => {
-                    selectedEnvironmentIndex = {
+                    handleEnvironmentChange(index, {
-                      type: 'MY_ENV',
+                      type: 'my-environment',
-                      index: index,
+                      environment: gen,
-                    }
+                    })
                     hide()
                   }
                 "
@@ -113,18 +129,14 @@
                   :key="`gen-team-${index}`"
                   :icon="IconLayers"
                   :label="gen.environment.name"
-                  :info-icon="
+                  :info-icon="isEnvActive(gen.id) ? IconCheck : undefined"
-                    gen.id === selectedEnv.teamEnvID ? IconCheck : undefined
+                  :active-info-icon="isEnvActive(gen.id)"
-                  "
-                  :active-info-icon="gen.id === selectedEnv.teamEnvID"
                   @click="
                     () => {
-                      selectedEnvironmentIndex = {
+                      handleEnvironmentChange(index, {
-                        type: 'TEAM_ENV',
+                        type: 'team-environment',
-                        teamEnvID: gen.id,
+                        environment: gen,
-                        teamID: gen.teamID,
+                      })
-                        environment: gen.environment,
-                      }
                       hide()
                     }
                   "
@@ -285,6 +297,7 @@ import IconCheck from "~icons/lucide/check"
 import IconLayers from "~icons/lucide/layers"
 import IconEye from "~icons/lucide/eye"
 import IconEdit from "~icons/lucide/edit"
+import IconGlobe from "~icons/lucide/globe"
 import { TippyComponent } from "vue-tippy"
 import { useI18n } from "~/composables/i18n"
 import { GQLError } from "~/helpers/backend/GQLClient"
@@ -295,11 +308,39 @@ import {
   selectedEnvironmentIndex$,
   setSelectedEnvironmentIndex,
 } from "~/newstore/environments"
-import { workspaceStatus$ } from "~/newstore/workspace"
+import { changeWorkspace, workspaceStatus$ } from "~/newstore/workspace"
 import TeamEnvironmentAdapter from "~/helpers/teams/TeamEnvironmentAdapter"
 import { useColorMode } from "@composables/theming"
 import { breakpointsTailwind, useBreakpoints } from "@vueuse/core"
 import { invokeAction } from "~/helpers/actions"
+import { TeamEnvironment } from "~/helpers/teams/TeamEnvironment"
+import { Environment } from "@hoppscotch/data"
+import { onMounted } from "vue"
+import { onLoggedIn } from "~/composables/auth"
+import TeamListAdapter from "~/helpers/teams/TeamListAdapter"
+import { useLocalState } from "~/newstore/localstate"
+import { GetMyTeamsQuery } from "~/helpers/backend/graphql"
+
+type Scope =
+  | {
+      type: "global"
+    }
+  | {
+      type: "my-environment"
+      environment: Environment
+      index: number
+    }
+  | {
+      type: "team-environment"
+      environment: TeamEnvironment
+    }
+const props = defineProps<{
+  isScopeSelector?: boolean
+  modelValue?: Scope
+}>()
+const emit = defineEmits<{
+  (e: "update:modelValue", data: Scope): void
+}>()
 
 const breakpoints = useBreakpoints(breakpointsTailwind)
 const mdAndLarger = breakpoints.greater("md")
@@ -314,6 +355,38 @@ const myEnvironments = useReadonlyStream(environments$, [])
 
 const workspace = useReadonlyStream(workspaceStatus$, { type: "personal" })
 
+// TeamList-Adapter
+const teamListAdapter = new TeamListAdapter(true)
+const myTeams = useReadonlyStream(teamListAdapter.teamList$, null)
+const teamListFetched = ref(false)
+const REMEMBERED_TEAM_ID = useLocalState("REMEMBERED_TEAM_ID")
+
+onLoggedIn(() => {
+  !teamListAdapter.isInitialized && teamListAdapter.initialize()
+})
+
+const switchToTeamWorkspace = (team: GetMyTeamsQuery["myTeams"][number]) => {
+  REMEMBERED_TEAM_ID.value = team.id
+  changeWorkspace({
+    teamID: team.id,
+    teamName: team.name,
+    type: "team",
+  })
+}
+watch(
+  () => myTeams.value,
+  (newTeams) => {
+    if (newTeams && !teamListFetched.value) {
+      teamListFetched.value = true
+      if (REMEMBERED_TEAM_ID.value) {
+        const team = newTeams.find((t) => t.id === REMEMBERED_TEAM_ID.value)
+        if (team) switchToTeamWorkspace(team)
+      }
+    }
+  }
+)
+
+// TeamEnv List Adapter
 const teamEnvListAdapter = new TeamEnvironmentAdapter(undefined)
 const teamListLoading = useReadonlyStream(teamEnvListAdapter.loading$, false)
 const teamAdapterError = useReadonlyStream(teamEnvListAdapter.error$, null)
@@ -322,6 +395,70 @@ const teamEnvironmentList = useReadonlyStream(
   []
 )
 
+const handleEnvironmentChange = (
+  index: number,
+  env?:
+    | {
+        type: "my-environment"
+        environment: Environment
+      }
+    | {
+        type: "team-environment"
+        environment: TeamEnvironment
+      }
+) => {
+  if (props.isScopeSelector && env) {
+    if (env.type === "my-environment") {
+      emit("update:modelValue", {
+        type: "my-environment",
+        environment: env.environment,
+        index,
+      })
+    } else if (env.type === "team-environment") {
+      emit("update:modelValue", {
+        type: "team-environment",
+        environment: env.environment,
+      })
+    }
+  } else {
+    if (env && env.type === "my-environment") {
+      selectedEnvironmentIndex.value = {
+        type: "MY_ENV",
+        index,
+      }
+    } else if (env && env.type === "team-environment") {
+      selectedEnvironmentIndex.value = {
+        type: "TEAM_ENV",
+        teamEnvID: env.environment.id,
+        teamID: env.environment.teamID,
+        environment: env.environment.environment,
+      }
+    }
+  }
+}
+const isEnvActive = (id: string | number) => {
+  if (props.isScopeSelector) {
+    if (props.modelValue?.type === "my-environment") {
+      return props.modelValue.index === id
+    } else if (props.modelValue?.type === "team-environment") {
+      return (
+        props.modelValue?.type === "team-environment" &&
+        props.modelValue.environment &&
+        props.modelValue.environment.id === id
+      )
+    }
+  } else {
+    if (selectedEnvironmentIndex.value.type === "MY_ENV") {
+      return selectedEnv.value.index === id
+    } else {
+      return (
+        selectedEnvironmentIndex.value.type === "TEAM_ENV" &&
+        selectedEnv.value.teamEnvID === id
+      )
+    }
+  }
+}
+
 const selectedEnvironmentIndex = useStream(
   selectedEnvironmentIndex$,
   { type: "NO_ENV_SELECTED" },
@@ -349,34 +486,90 @@ watch(
 )
 
 const selectedEnv = computed(() => {
-  if (selectedEnvironmentIndex.value.type === "MY_ENV") {
+  if (props.isScopeSelector) {
-    const environment =
+    if (props.modelValue?.type === "my-environment") {
-      myEnvironments.value[selectedEnvironmentIndex.value.index]
+      return {
-    return {
+        type: "MY_ENV",
-      type: "MY_ENV",
+        index: props.modelValue.index,
-      index: selectedEnvironmentIndex.value.index,
+        name: props.modelValue.environment?.name,
-      name: environment.name,
+      }
-      variables: environment.variables,
+    } else if (props.modelValue?.type === "team-environment") {
-    }
-  } else if (selectedEnvironmentIndex.value.type === "TEAM_ENV") {
-    const teamEnv = teamEnvironmentList.value.find(
-      (env) =>
-        env.id ===
-        (selectedEnvironmentIndex.value.type === "TEAM_ENV" &&
-          selectedEnvironmentIndex.value.teamEnvID)
-    )
-    if (teamEnv) {
       return {
         type: "TEAM_ENV",
-        name: teamEnv.environment.name,
+        name: props.modelValue.environment.environment.name,
-        teamEnvID: selectedEnvironmentIndex.value.teamEnvID,
+        teamEnvID: props.modelValue.environment.id,
-        variables: teamEnv.environment.variables,
+      }
+    } else {
+      return { type: "global", name: "Global" }
+    }
+  } else {
+    if (selectedEnvironmentIndex.value.type === "MY_ENV") {
+      const environment =
+        myEnvironments.value[selectedEnvironmentIndex.value.index]
+      return {
+        type: "MY_ENV",
+        index: selectedEnvironmentIndex.value.index,
+        name: environment.name,
+        variables: environment.variables,
+      }
+    } else if (selectedEnvironmentIndex.value.type === "TEAM_ENV") {
+      const teamEnv = teamEnvironmentList.value.find(
+        (env) =>
+          env.id ===
+          (selectedEnvironmentIndex.value.type === "TEAM_ENV" &&
+            selectedEnvironmentIndex.value.teamEnvID)
+      )
+      if (teamEnv) {
+        return {
+          type: "TEAM_ENV",
+          name: teamEnv.environment.name,
+          teamEnvID: selectedEnvironmentIndex.value.teamEnvID,
+          variables: teamEnv.environment.variables,
+        }
+      } else {
+        return { type: "NO_ENV_SELECTED" }
       }
     } else {
       return { type: "NO_ENV_SELECTED" }
     }
-  } else {
+  }
-    return { type: "NO_ENV_SELECTED" }
+})
+
+// Set the selected environment as initial scope value
+onMounted(() => {
+  if (props.isScopeSelector) {
+    if (
+      selectedEnvironmentIndex.value.type === "MY_ENV" &&
+      selectedEnvironmentIndex.value.index !== undefined
+    ) {
+      emit("update:modelValue", {
+        type: "my-environment",
+        environment: myEnvironments.value[selectedEnvironmentIndex.value.index],
+        index: selectedEnvironmentIndex.value.index,
+      })
+    } else if (
+      selectedEnvironmentIndex.value.type === "TEAM_ENV" &&
+      selectedEnvironmentIndex.value.teamEnvID &&
+      teamEnvironmentList.value &&
+      teamEnvironmentList.value.length > 0
+    ) {
+      const teamEnv = teamEnvironmentList.value.find(
+        (env) =>
+          env.id ===
+          (selectedEnvironmentIndex.value.type === "TEAM_ENV" &&
+            selectedEnvironmentIndex.value.teamEnvID)
+      )
+      if (teamEnv) {
+        emit("update:modelValue", {
+          type: "team-environment",
+          environment: teamEnv,
+        })
+      }
+    } else {
+      emit("update:modelValue", {
+        type: "global",
+      })
+    }
   }
 })
 

packages/hoppscotch-common/src/components/environments/index.vue

@@ -34,6 +34,13 @@
       @hide-modal="displayModalNew(false)"
     />
   </div>
+
+  <HoppSmartConfirmModal
+    :show="showConfirmRemoveEnvModal"
+    :title="t('confirm.remove_team')"
+    @hide-modal="showConfirmRemoveEnvModal = false"
+    @resolve="removeSelectedEnvironment()"
+  />
 </template>
 
 <script setup lang="ts">
@@ -44,6 +51,7 @@ import { GetMyTeamsQuery } from "~/helpers/backend/graphql"
 import { useReadonlyStream, useStream } from "@composables/stream"
 import { useI18n } from "~/composables/i18n"
 import {
+  getSelectedEnvironmentIndex,
   globalEnv$,
   selectedEnvironmentIndex$,
   setSelectedEnvironmentIndex,
@@ -54,8 +62,15 @@ import { workspaceStatus$ } from "~/newstore/workspace"
 import TeamListAdapter from "~/helpers/teams/TeamListAdapter"
 import { useLocalState } from "~/newstore/localstate"
 import { onLoggedIn } from "~/composables/auth"
+import { pipe } from "fp-ts/function"
+import * as TE from "fp-ts/TaskEither"
+import { GQLError } from "~/helpers/backend/GQLClient"
+import { deleteEnvironment } from "~/newstore/environments"
+import { deleteTeamEnvironment } from "~/helpers/backend/mutations/TeamEnvironment"
+import { useToast } from "~/composables/toast"
 
 const t = useI18n()
+const toast = useToast()
 
 type EnvironmentType = "my-environments" | "team-environments"
 
@@ -168,6 +183,7 @@ watch(
   }
 )
 
+const showConfirmRemoveEnvModal = ref(false)
 const showModalNew = ref(false)
 const showModalDetails = ref(false)
 const action = ref<"new" | "edit">("edit")
@@ -194,6 +210,30 @@ const editEnvironment = (environmentIndex: "Global") => {
   displayModalEdit(true)
 }
 
+const removeSelectedEnvironment = () => {
+  const selectedEnvIndex = getSelectedEnvironmentIndex()
+  if (selectedEnvIndex?.type === "NO_ENV_SELECTED") return
+
+  if (selectedEnvIndex?.type === "MY_ENV") {
+    deleteEnvironment(selectedEnvIndex.index)
+    toast.success(`${t("state.deleted")}`)
+  }
+
+  if (selectedEnvIndex?.type === "TEAM_ENV") {
+    pipe(
+      deleteTeamEnvironment(selectedEnvIndex.teamEnvID),
+      TE.match(
+        (err: GQLError<string>) => {
+          console.error(err)
+        },
+        () => {
+          toast.success(`${t("team_environment.deleted")}`)
+        }
+      )
+    )()
+  }
+}
+
 const resetSelectedData = () => {
   editingEnvironmentIndex.value = null
 }
@@ -203,6 +243,10 @@ defineActionHandler("modals.environment.new", () => {
   showModalDetails.value = true
 })
 
+defineActionHandler("modals.environment.delete-selected", () => {
+  showConfirmRemoveEnvModal.value = true
+})
+
 defineActionHandler(
   "modals.my.environment.edit",
   ({ envName, variableName }) => {
@@ -256,7 +300,7 @@ watch(
 
 defineActionHandler("modals.environment.add", ({ envName, variableName }) => {
   editingVariableName.value = envName
-  editingVariableValue.value = variableName
+  if (variableName) editingVariableValue.value = variableName
   displayModalNew(true)
 })
 </script>

packages/hoppscotch-common/src/components/firebase/Login.vue

@@ -312,8 +312,10 @@ const authProviders: AuthProviderItem[] = [
   },
 ]
 
-const allowedAuthProvidersIDsString: string | undefined = import.meta.env
+// Do not format the `import.meta.env.VITE_ALLOWED_AUTH_PROVIDERS` call into multiple lines!
-  .VITE_ALLOWED_AUTH_PROVIDERS
+// prettier-ignore
+const allowedAuthProvidersIDsString =
+  import.meta.env.VITE_ALLOWED_AUTH_PROVIDERS
 
 const allowedAuthProvidersIDs = allowedAuthProvidersIDsString
   ? allowedAuthProvidersIDsString.split(",")

packages/hoppscotch-common/src/components/graphql/Authorization.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="flex flex-col flex-1">
     <div
-      class="sticky z-10 flex items-center justify-between flex-shrink-0 pl-4 overflow-x-auto border-b bg-primary border-dividerLight"
+      class="sticky top-sidebarPrimaryStickyFold z-10 flex items-center justify-between pl-4 border-y bg-primary border-dividerLight"
     >
       <span class="flex items-center">
         <label class="font-semibold truncate text-secondaryLight">

packages/hoppscotch-common/src/components/graphql/Headers.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="sticky z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight"
+    class="sticky top-sidebarPrimaryStickyFold z-10 flex items-center justify-between pl-4 border-y bg-primary border-dividerLight"
   >
     <label class="font-semibold text-secondaryLight">
       {{ t("tab.headers") }}

packages/hoppscotch-common/src/components/graphql/Query.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="sticky z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight gqlRunQuery"
+    class="sticky top-sidebarPrimaryStickyFold z-10 flex items-center justify-between pl-4 border-y bg-primary border-dividerLight"
   >
     <label class="font-semibold text-secondaryLight">
       {{ t("request.query") }}
@@ -144,8 +144,6 @@ const selectedOperation = ref<gql.OperationDefinitionNode | null>(null)
 const gqlQueryString = useVModel(props, "modelValue", emit)
 
 const debouncedOnUpdateQueryState = debounce((update: ViewUpdate) => {
-  if (!update.selectionSet) return
-
   const selectedPos = update.state.selection.main.head
   const queryString = update.state.doc.toJSON().join(update.state.lineBreak)
 

packages/hoppscotch-common/src/components/graphql/Request.vue

@@ -71,6 +71,7 @@ import { connect } from "~/helpers/graphql/connection"
 import { disconnect } from "~/helpers/graphql/connection"
 import { InterceptorService } from "~/services/interceptor.service"
 import { useService } from "dioc/vue"
+import { defineActionHandler } from "~/helpers/actions"
 
 const t = useI18n()
 
@@ -140,4 +141,12 @@ const cancelSwitch = () => {
   if (connected.value) disconnect()
   connectionSwitchModal.value = false
 }
+
+defineActionHandler(
+  "gql.connect",
+  gqlConnect,
+  computed(() => !connected.value)
+)
+
+defineActionHandler("gql.disconnect", disconnect, connected)
 </script>

packages/hoppscotch-common/src/components/graphql/RequestOptions.vue

@@ -2,7 +2,7 @@
   <div class="flex flex-col flex-1 h-full">
     <HoppSmartTabs
       v-model="selectedOptionTab"
-      styles="sticky bg-primary z-10"
+      styles="sticky top-0 bg-primary z-10 border-b-0"
       :render-inactive-tabs="true"
     >
       <HoppSmartTab
@@ -67,9 +67,10 @@ import {
 } from "~/helpers/graphql/connection"
 import { useService } from "dioc/vue"
 import { InterceptorService } from "~/services/interceptor.service"
+import { editGraphqlRequest } from "~/newstore/collections"
 
-type OptionTabs = "query" | "headers" | "variables" | "authorization"
+export type GQLOptionTabs = "query" | "headers" | "variables" | "authorization"
-const selectedOptionTab = ref<OptionTabs>("query")
+const selectedOptionTab = ref<GQLOptionTabs>("query")
 const interceptorService = useService(InterceptorService)
 
 const t = useI18n()
@@ -180,12 +181,33 @@ const hideRequestModal = () => {
   showSaveRequestModal.value = false
 }
 const saveRequest = () => {
-  showSaveRequestModal.value = true
+  if (
+    currentActiveTab.value.document.saveContext &&
+    currentActiveTab.value.document.saveContext.originLocation ===
+      "user-collection"
+  ) {
+    editGraphqlRequest(
+      currentActiveTab.value.document.saveContext.folderPath,
+      currentActiveTab.value.document.saveContext.requestIndex,
+      currentActiveTab.value.document.request
+    )
+
+    currentActiveTab.value.document.isDirty = false
+  } else {
+    showSaveRequestModal.value = true
+  }
 }
 const clearGQLQuery = () => {
   request.value.query = ""
 }
 defineActionHandler("request.send-cancel", runQuery)
 defineActionHandler("request.save", saveRequest)
+defineActionHandler("request.save-as", () => {
+  showSaveRequestModal.value = true
+})
 defineActionHandler("request.reset", clearGQLQuery)
+
+defineActionHandler("request.open-tab", ({ tab }) => {
+  selectedOptionTab.value = tab as GQLOptionTabs
+})
 </script>

packages/hoppscotch-common/src/components/graphql/Response.vue

@@ -128,10 +128,14 @@ const downloadResponse = (str: string) => {
   }, 1000)
 }
 
-defineActionHandler("response.file.download", () =>
+defineActionHandler(
-  downloadResponse.bind(responseString.value)
+  "response.file.download",
+  () => downloadResponse(responseString.value),
+  computed(() => !!props.response && props.response.length > 0)
 )
-defineActionHandler("response.copy", () =>
+defineActionHandler(
-  copyResponse.bind(responseString.value)
+  "response.copy",
+  () => copyResponse(responseString.value),
+  computed(() => !!props.response && props.response.length > 0)
 )
 </script>

packages/hoppscotch-common/src/components/graphql/TabHead.vue

@@ -0,0 +1,118 @@
+<template>
+  <div
+    v-tippy="{ theme: 'tooltip', delay: [500, 20] }"
+    :title="tab.document.request.name"
+    class="truncate px-2 flex items-center"
+    @dblclick="emit('open-rename-modal')"
+    @contextmenu.prevent="options?.tippy?.show()"
+    @click.middle="emit('close-tab')"
+  >
+    <tippy
+      ref="options"
+      trigger="manual"
+      interactive
+      theme="popover"
+      :on-shown="() => tippyActions!.focus()"
+    >
+      <span class="leading-8 px-2 truncate">
+        {{ tab.document.request.name }}
+      </span>
+      <template #content="{ hide }">
+        <div
+          ref="tippyActions"
+          class="flex flex-col focus:outline-none"
+          tabindex="0"
+          @keyup.r="renameAction?.$el.click()"
+          @keyup.d="duplicateAction?.$el.click()"
+          @keyup.w="closeAction?.$el.click()"
+          @keyup.x="closeOthersAction?.$el.click()"
+          @keyup.escape="hide()"
+        >
+          <HoppSmartItem
+            ref="renameAction"
+            :icon="IconFileEdit"
+            :label="t('request.rename')"
+            :shortcut="['R']"
+            @click="
+              () => {
+                emit('open-rename-modal')
+                hide()
+              }
+            "
+          />
+          <HoppSmartItem
+            ref="duplicateAction"
+            :icon="IconCopy"
+            :label="t('tab.duplicate')"
+            :shortcut="['D']"
+            @click="
+              () => {
+                emit('duplicate-tab')
+                hide()
+              }
+            "
+          />
+          <HoppSmartItem
+            v-if="isRemovable"
+            ref="closeAction"
+            :icon="IconXCircle"
+            :label="t('tab.close')"
+            :shortcut="['W']"
+            @click="
+              () => {
+                emit('close-tab')
+                hide()
+              }
+            "
+          />
+          <HoppSmartItem
+            v-if="isRemovable"
+            ref="closeOthersAction"
+            :icon="IconXSquare"
+            :label="t('tab.close_others')"
+            :shortcut="['X']"
+            @click="
+              () => {
+                emit('close-other-tabs')
+                hide()
+              }
+            "
+          />
+        </div>
+      </template>
+    </tippy>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue"
+import { TippyComponent } from "vue-tippy"
+import { useI18n } from "~/composables/i18n"
+import IconXCircle from "~icons/lucide/x-circle"
+import IconXSquare from "~icons/lucide/x-square"
+import IconFileEdit from "~icons/lucide/file-edit"
+import IconCopy from "~icons/lucide/copy"
+import { HoppGQLTab } from "~/helpers/graphql/tab"
+
+const t = useI18n()
+
+defineProps<{
+  tab: HoppGQLTab
+  isRemovable: boolean
+}>()
+
+const emit = defineEmits<{
+  (event: "open-rename-modal"): void
+  (event: "close-tab"): void
+  (event: "close-other-tabs"): void
+  (event: "duplicate-tab"): void
+}>()
+
+const tippyActions = ref<TippyComponent | null>(null)
+const options = ref<TippyComponent | null>(null)
+
+const renameAction = ref<HTMLButtonElement | null>(null)
+const closeAction = ref<HTMLButtonElement | null>(null)
+const closeOthersAction = ref<HTMLButtonElement | null>(null)
+const duplicateAction = ref<HTMLButtonElement | null>(null)
+</script>

packages/hoppscotch-common/src/components/graphql/Variable.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="sticky z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight"
+    class="sticky top-sidebarPrimaryStickyFold z-10 flex items-center justify-between pl-4 border-y bg-primary border-dividerLight"
   >
     <label class="font-semibold text-secondaryLight">
       {{ t("request.variables") }}

packages/hoppscotch-common/src/components/http/Headers.vue

@@ -508,30 +508,17 @@ const changeTab = (tab: ComputedHeader["source"]) => {
 
 const inspectionService = useService(InspectionService)
 
-const allTabResults = inspectionService.tabs
+const headerKeyResults = inspectionService.getResultViewFor(
+  currentTabID.value,
+  (result) =>
+    result.locations.type === "header" && result.locations.position === "key"
+)
 
-const headerKeyResults = computed(() => {
+const headerValueResults = inspectionService.getResultViewFor(
-  return (
+  currentTabID.value,
-    allTabResults.value
+  (result) =>
-      .get(currentTabID.value)
+    result.locations.type === "header" && result.locations.position === "value"
-      .filter(
+)
-        (result) =>
-          result.locations.type === "header" &&
-          result.locations.position === "key"
-      ) ?? []
-  )
-})
-const headerValueResults = computed(() => {
-  return (
-    allTabResults.value
-      .get(currentTabID.value)
-      .filter(
-        (result) =>
-          result.locations.type === "header" &&
-          result.locations.position === "value"
-      ) ?? []
-  )
-})
 
 const getInspectorResult = (results: InspectorResult[], index: number) => {
   return results.filter((result) => {

packages/hoppscotch-common/src/components/http/Parameters.vue

@@ -178,7 +178,7 @@ import IconCheckCircle from "~icons/lucide/check-circle"
 import IconCircle from "~icons/lucide/circle"
 import IconTrash from "~icons/lucide/trash"
 import IconWrapText from "~icons/lucide/wrap-text"
-import { computed, reactive, ref, watch } from "vue"
+import { reactive, ref, watch } from "vue"
 import { flow, pipe } from "fp-ts/function"
 import * as O from "fp-ts/Option"
 import * as A from "fp-ts/Array"
@@ -409,30 +409,18 @@ const clearContent = () => {
 
 const inspectionService = useService(InspectionService)
 
-const allTabResults = inspectionService.tabs
+const parameterKeyResults = inspectionService.getResultViewFor(
+  currentTabID.value,
+  (result) =>
+    result.locations.type === "parameter" && result.locations.position === "key"
+)
 
-const parameterKeyResults = computed(() => {
+const parameterValueResults = inspectionService.getResultViewFor(
-  return (
+  currentTabID.value,
-    allTabResults.value
+  (result) =>
-      .get(currentTabID.value)
+    result.locations.type === "parameter" &&
-      .filter(
+    result.locations.position === "value"
-        (result) =>
+)
-          result.locations.type === "parameter" &&
-          result.locations.position === "key"
-      ) ?? []
-  )
-})
-const parameterValueResults = computed(() => {
-  return (
-    allTabResults.value
-      .get(currentTabID.value)
-      .filter(
-        (result) =>
-          result.locations.type === "parameter" &&
-          result.locations.position === "value"
-      ) ?? []
-  )
-})
 
 const getInspectorResult = (results: InspectorResult[], index: number) => {
   return results.filter((result) => {

packages/hoppscotch-common/src/components/http/Request.vue

@@ -56,13 +56,7 @@
           :inspection-results="tabResults"
           @paste="onPasteUrl($event)"
           @enter="newSendRequest"
-        >
+        />
-          <template #empty>
-            <span>
-              {{ t("empty.history_suggestions") }}
-            </span>
-          </template>
-        </SmartEnvInput>
       </div>
     </div>
     <div class="flex mt-2 sm:mt-0">
@@ -648,9 +642,5 @@ const COLUMN_LAYOUT = useSetting("COLUMN_LAYOUT")
 
 const inspectionService = useService(InspectionService)
 
-const allTabResults = inspectionService.tabs
+const tabResults = inspectionService.getResultViewFor(currentTabID.value)
-
-const tabResults = computed(() => {
-  return allTabResults.value.get(currentTabID.value) ?? []
-})
 </script>

packages/hoppscotch-common/src/components/http/RequestOptions.vue

@@ -101,6 +101,6 @@ const newActiveHeadersCount$ = computed(() => {
 })
 
 defineActionHandler("request.open-tab", ({ tab }) => {
-  selectedOptionsTab.value = tab
+  selectedOptionsTab.value = tab as RequestOptionTabs
 })
 </script>

packages/hoppscotch-common/src/components/http/ResponseMeta.vue

@@ -145,13 +145,8 @@ const statusCategory = computed(() => {
 
 const inspectionService = useService(InspectionService)
 
-const allTabResults = inspectionService.tabs
+const tabResults = inspectionService.getResultViewFor(
-
+  currentTabID.value,
-const tabResults = computed(() => {
+  (result) => result.locations.type === "response"
-  return (
+)
-    allTabResults.value
-      .get(currentTabID.value)
-      ?.filter((result) => result.locations.type === "response") ?? []
-  )
-})
 </script>

packages/hoppscotch-common/src/components/http/TabHead.vue

@@ -4,7 +4,7 @@
     :title="tab.document.request.name"
     class="truncate px-2 flex items-center"
     @dblclick="emit('open-rename-modal')"
-    @contextmenu.prevent="options?.tippy.show()"
+    @contextmenu.prevent="options?.tippy?.show()"
     @click.middle="emit('close-tab')"
   >
     <span

packages/hoppscotch-common/src/components/smart/EnvInput.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="autocomplete-wrapper">
+  <div ref="autoCompleteWrapper" class="autocomplete-wrapper">
     <div
       class="absolute inset-0 flex flex-1 divide-x divide-dividerLight overflow-x-auto"
     >
@@ -18,7 +18,9 @@
       />
     </div>
     <ul
-      v-if="showSuggestionPopover && autoCompleteSource"
+      v-if="
+        showSuggestionPopover && autoCompleteSource && suggestions.length > 0
+      "
       ref="suggestionsMenu"
       class="suggestions"
     >
@@ -39,20 +41,12 @@
           <span class="ml-2 truncate">to select</span>
         </div>
       </li>
-      <li v-if="suggestions.length === 0" class="pointer-events-none">
-        <div v-if="slots.empty" class="truncate py-0.5">
-          <slot name="empty"></slot>
-        </div>
-        <span v-else class="truncate py-0.5">
-          {{ t("empty.suggestions") }}
-        </span>
-      </li>
     </ul>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, watch, nextTick, computed, Ref, useSlots } from "vue"
+import { ref, onMounted, watch, nextTick, computed, Ref } from "vue"
 import {
   EditorView,
   placeholder as placeholderExt,
@@ -69,7 +63,6 @@ import { HoppReactiveEnvPlugin } from "~/helpers/editor/extensions/HoppEnvironme
 import { useReadonlyStream } from "@composables/stream"
 import { AggregateEnvironment, aggregateEnvs$ } from "~/newstore/environments"
 import { platform } from "~/platform"
-import { useI18n } from "~/composables/i18n"
 import { onClickOutside, useDebounceFn } from "@vueuse/core"
 import { InspectorResult } from "~/services/inspection"
 import { invokeAction } from "~/helpers/actions"
@@ -111,10 +104,6 @@ const emit = defineEmits<{
   (e: "click", ev: any): void
 }>()
 
-const slots = useSlots()
-
-const t = useI18n()
-
 const cachedValue = ref(props.modelValue)
 
 const view = ref<EditorView>()
@@ -125,8 +114,9 @@ const currentSuggestionIndex = ref(-1)
 const showSuggestionPopover = ref(false)
 
 const suggestionsMenu = ref<any | null>(null)
+const autoCompleteWrapper = ref<any | null>(null)
 
-onClickOutside(suggestionsMenu, () => {
+onClickOutside(autoCompleteWrapper, () => {
   showSuggestionPopover.value = false
 })
 

packages/hoppscotch-common/src/helpers/actions.ts

@@ -2,11 +2,14 @@
  * For example, sending a request.
  */
 
-import { Ref, onBeforeUnmount, onMounted, watch } from "vue"
+import { Ref, onBeforeUnmount, onMounted, reactive, watch } from "vue"
 import { BehaviorSubject } from "rxjs"
 import { HoppRESTDocument } from "./rest/document"
 import { HoppGQLRequest, HoppRESTRequest } from "@hoppscotch/data"
 import { RequestOptionTabs } from "~/components/http/RequestOptions.vue"
+import { HoppGQLSaveContext } from "./graphql/document"
+import { GQLOptionTabs } from "~/components/graphql/RequestOptions.vue"
+import { computed } from "vue"
 
 export type HoppAction =
   | "contextmenu.open" // Send/Cancel a Hoppscotch Request
@@ -15,7 +18,7 @@ export type HoppAction =
   | "request.copy-link" // Copy Request Link
   | "request.save" // Save to Collections
   | "request.save-as" // Save As
-  | "rest.request.rename" // Rename
+  | "request.rename" // Rename request on REST or GraphQL
   | "request.method.next" // Select Next Method
   | "request.method.prev" // Select Previous Method
   | "request.method.get" // Select GET Method
@@ -25,14 +28,20 @@ export type HoppAction =
   | "request.method.delete" // Select DELETE Method
   | "request.import-curl" // Import cURL
   | "request.show-code" // Show generated code
+  | "gql.connect" // Connect to GraphQL endpoint given
+  | "gql.disconnect" // Disconnect from GraphQL endpoint given
+  | "tab.close-current" // Close current tab
+  | "tab.close-other" // Close other tabs
+  | "tab.open-new" // Open new tab
+  | "collection.new" // Create root collection
   | "flyouts.chat.open" // Shows the keybinds flyout
   | "flyouts.keybinds.toggle" // Shows the keybinds flyout
   | "modals.search.toggle" // Shows the search modal
   | "modals.support.toggle" // Shows the support modal
   | "modals.share.toggle" // Shows the share modal
-  | "modals.social.toggle" // Shows the social links modal
   | "modals.environment.add" // Show add environment modal via context menu
   | "modals.environment.new" // Add new environment
+  | "modals.environment.delete-selected" // Delete Selected Environment
   | "modals.my.environment.edit" // Edit current personal environment
   | "modals.team.environment.edit" // Edit current team environment
   | "modals.team.new" // Add new team
@@ -104,11 +113,16 @@ type HoppActionArgsMap = {
         request: HoppGQLRequest
       }
   "request.open-tab": {
-    tab: RequestOptionTabs
+    tab: RequestOptionTabs | GQLOptionTabs
+  }
+
+  "tab.duplicate-tab": {
+    tabID?: string
   }
 
   "gql.request.open": {
     request: HoppGQLRequest
+    saveContext?: HoppGQLSaveContext
   }
   "modals.environment.add": {
     envName: string
@@ -143,7 +157,7 @@ type BoundActionList = {
   [A in HoppAction | HoppActionWithArgs]?: Array<ActionFunc<A>>
 }
 
-const boundActions: BoundActionList = {}
+const boundActions: BoundActionList = reactive({})
 
 export const activeActions$ = new BehaviorSubject<
   (HoppAction | HoppActionWithArgs)[]
@@ -199,6 +213,15 @@ export function unbindAction<A extends HoppAction | HoppActionWithArgs>(
   activeActions$.next(Object.keys(boundActions) as HoppAction[])
 }
 
+/**
+ * Returns a ref that indicates whether a given action is bound at a given time
+ *
+ * @param action The action to check
+ */
+export function isActionBound(action: HoppAction): Ref<boolean> {
+  return computed(() => !!boundActions[action])
+}
+
 /**
  * A composable function that defines a component can handle a given
  * HoppAction. The handler will be bound when the component is mounted

packages/hoppscotch-common/src/helpers/editor/extensions/HoppEnvironment.ts

@@ -17,6 +17,9 @@ import {
   getSelectedEnvironmentType,
 } from "~/newstore/environments"
 import { invokeAction } from "~/helpers/actions"
+import IconUser from "~icons/lucide/user?raw"
+import IconUsers from "~icons/lucide/users?raw"
+import IconEdit from "~icons/lucide/edit?raw"
 
 const HOPP_ENVIRONMENT_REGEX = /(<<[a-zA-Z0-9-_]+>>)/g
 
@@ -71,14 +74,14 @@ const cursorTooltipField = (aggregateEnvs: AggregateEnvironment[]) =>
 
       const selectedEnvType = getSelectedEnvironmentType()
 
-      const envTypeIcon = `<span class="inline-flex items-center opacity-65 -mx-0.5 text-base font-icon">${
+      const envTypeIcon = `<span class="inline-flex items-center justify-center my-1">${
-        selectedEnvType === "TEAM_ENV" ? "group" : "person"
+        selectedEnvType === "TEAM_ENV" ? IconUsers : IconUser
       }</span>`
 
       const appendEditAction = (tooltip: HTMLElement) => {
-        const editIcon = document.createElement("span")
+        const editIcon = document.createElement("button")
         editIcon.className =
-          "ml-2 cursor-pointer env-icon text-accent hover:text-accentDark"
+          "ml-2 cursor-pointer text-accent hover:text-accentDark"
         editIcon.addEventListener("click", () => {
           const isPersonalEnv =
             envName === "Global" || selectedEnvType !== "TEAM_ENV"
@@ -88,7 +91,7 @@ const cursorTooltipField = (aggregateEnvs: AggregateEnvironment[]) =>
             variableName: parsedEnvKey,
           })
         })
-        editIcon.innerHTML = `<span class="inline-flex items-center px-1 -mx-1 text-base font-icon">edit</span>`
+        editIcon.innerHTML = `<span class="inline-flex items-center justify-center my-1">${IconEdit}</span>`
         tooltip.appendChild(editIcon)
       }
 
@@ -103,7 +106,7 @@ const cursorTooltipField = (aggregateEnvs: AggregateEnvironment[]) =>
           const kbd = document.createElement("kbd")
           const icon = document.createElement("span")
           icon.innerHTML = envTypeIcon
-          icon.className = "mr-2 env-icon"
+          icon.className = "mr-2"
           kbd.textContent = finalEnv
           tooltipContainer.appendChild(icon)
           tooltipContainer.appendChild(document.createTextNode(`${envName} `))

packages/hoppscotch-common/src/helpers/graphql/tab.ts

@@ -197,3 +197,30 @@ export function getTabsRefTo(func: (tab: HoppGQLTab) => boolean) {
     .filter(func)
     .map((tab) => getTabRef(tab.id))
 }
+
+export function closeOtherTabs(tabID: string) {
+  if (!tabMap.has(tabID)) {
+    console.warn(
+      `The tab to close other tabs does not exist (tab id: ${tabID})`
+    )
+    return
+  }
+
+  tabOrdering.value = [tabID]
+
+  tabMap.forEach((_, id) => {
+    if (id !== tabID) tabMap.delete(id)
+  })
+
+  currentTabID.value = tabID
+}
+
+export function getDirtyTabsCount() {
+  let count = 0
+
+  for (const tab of tabMap.values()) {
+    if (tab.document.isDirty) count++
+  }
+
+  return count
+}

packages/hoppscotch-common/src/helpers/new-codegen/har.ts

@@ -98,7 +98,11 @@ const buildHarPostData = (req: HoppRESTRequest): Har.PostData | undefined => {
   }
 }
 
-export const buildHarRequest = (req: HoppRESTRequest): Har.Request => {
+export const buildHarRequest = (
+  req: HoppRESTRequest
+): Har.Request & {
+  postData: Har.PostData & Exclude<Har.PostData, undefined>
+} => {
   return {
     bodySize: -1, // TODO: It would be cool if we can calculate the body size
     headersSize: -1, // TODO: It would be cool if we can calculate the header size
@@ -108,6 +112,9 @@ export const buildHarRequest = (req: HoppRESTRequest): Har.Request => {
     method: req.method,
     queryString: buildHarQueryStrings(req),
     url: req.endpoint,
-    postData: buildHarPostData(req),
+    postData: buildHarPostData(req) ?? {
+      mimeType: "x-unknown",
+      params: [],
+    },
   }
 }

packages/hoppscotch-common/src/helpers/new-codegen/index.ts

@@ -208,7 +208,10 @@ export const generateCode = (
         }).convert(codegenInfo.lang, codegenInfo.mode, {
           indent: "  ",
         }),
-      (e) => e
+      (e) => {
+        console.error(e)
+        return e
+      }
     ),
 
     // Only allow string output to pass through, else none

packages/hoppscotch-common/src/helpers/rest/tab.ts

@@ -7,6 +7,7 @@ import { HoppRESTResponse } from "../types/HoppRESTResponse"
 import { getDefaultRESTRequest } from "./default"
 import { HoppTestResult } from "../types/HoppTestResult"
 import { platform } from "~/platform"
+import { nextTick } from "vue"
 
 export type HoppRESTTab = {
   id: string
@@ -178,7 +179,9 @@ export function closeTab(tabID: string) {
 
   tabOrdering.value.splice(tabOrdering.value.indexOf(tabID), 1)
 
-  tabMap.delete(tabID)
+  nextTick(() => {
+    tabMap.delete(tabID)
+  })
 }
 
 export function closeOtherTabs(tabID: string) {

packages/hoppscotch-common/src/helpers/strategies/AxiosStrategy.ts

@@ -0,0 +1,163 @@
+import axios, { AxiosRequestConfig } from "axios"
+import { v4 } from "uuid"
+import { pipe } from "fp-ts/function"
+import * as TE from "fp-ts/TaskEither"
+import { cloneDeep } from "lodash-es"
+import { NetworkResponse, NetworkStrategy } from "../network"
+import { decodeB64StringToArrayBuffer } from "../utils/b64"
+import { settingsStore } from "~/newstore/settings"
+
+let cancelSource = axios.CancelToken.source()
+
+type ProxyHeaders = {
+  "multipart-part-key"?: string
+}
+
+type ProxyPayloadType = FormData | (AxiosRequestConfig & { wantsBinary: true })
+
+export const cancelRunningAxiosRequest = () => {
+  cancelSource.cancel()
+
+  // Create a new cancel token
+  cancelSource = axios.CancelToken.source()
+}
+
+const getProxyPayload = (
+  req: AxiosRequestConfig,
+  multipartKey: string | null
+) => {
+  let payload: ProxyPayloadType = {
+    ...req,
+    wantsBinary: true,
+    accessToken: import.meta.env.VITE_PROXYSCOTCH_ACCESS_TOKEN ?? "",
+  }
+
+  if (payload.data instanceof FormData) {
+    const formData = payload.data
+    payload.data = ""
+    formData.append(multipartKey!, JSON.stringify(payload))
+    payload = formData
+  }
+
+  return payload
+}
+
+const preProcessRequest = (req: AxiosRequestConfig): AxiosRequestConfig => {
+  const reqClone = cloneDeep(req)
+
+  // If the parameters are URLSearchParams, inject them to URL instead
+  // This prevents issues of marshalling the URLSearchParams to the proxy
+  if (reqClone.params instanceof URLSearchParams) {
+    try {
+      const url = new URL(reqClone.url ?? "")
+
+      for (const [key, value] of reqClone.params.entries()) {
+        url.searchParams.append(key, value)
+      }
+
+      reqClone.url = url.toString()
+    } catch (e) {
+      // making this a non-empty block, so we can make the linter happy.
+      // we should probably use, allowEmptyCatch, or take the time to do something with the caught errors :)
+    }
+
+    reqClone.params = {}
+  }
+
+  return reqClone
+}
+
+const axiosWithProxy: NetworkStrategy = (req) =>
+  pipe(
+    TE.Do,
+
+    TE.bind("processedReq", () => TE.of(preProcessRequest(req))),
+
+    // If the request has FormData, the proxy needs a key
+    TE.bind("multipartKey", ({ processedReq }) =>
+      TE.of(
+        processedReq.data instanceof FormData
+          ? `proxyRequestData-${v4()}`
+          : null
+      )
+    ),
+
+    // Build headers to send
+    TE.bind("headers", ({ processedReq, multipartKey }) =>
+      TE.of(
+        processedReq.data instanceof FormData
+          ? <ProxyHeaders>{
+              "multipart-part-key": multipartKey,
+            }
+          : <ProxyHeaders>{}
+      )
+    ),
+
+    // Create payload
+    TE.bind("payload", ({ processedReq, multipartKey }) =>
+      TE.of(getProxyPayload(processedReq, multipartKey))
+    ),
+
+    // Run the proxy request
+    TE.chain(({ payload, headers }) =>
+      TE.tryCatch(
+        () =>
+          axios.post(
+            settingsStore.value.PROXY_URL || "https://proxy.hoppscotch.io",
+            payload,
+            {
+              headers,
+              cancelToken: cancelSource.token,
+            }
+          ),
+        (reason) =>
+          axios.isCancel(reason)
+            ? "cancellation" // Convert cancellation errors into cancellation strings
+            : reason
+      )
+    ),
+
+    // Check success predicate
+    TE.chain(
+      TE.fromPredicate(
+        ({ data }) => data.success,
+        ({ data }) => data.data.message || "Proxy Error"
+      )
+    ),
+
+    // Process Base64
+    TE.chain(({ data }) => {
+      if (data.isBinary) {
+        data.data = decodeB64StringToArrayBuffer(data.data)
+      }
+
+      return TE.of(data)
+    })
+  )
+
+const axiosWithoutProxy: NetworkStrategy = (req) =>
+  pipe(
+    TE.tryCatch(
+      () =>
+        axios({
+          ...req,
+          cancelToken: (cancelSource && cancelSource.token) || "",
+          responseType: "arraybuffer",
+        }),
+      (e) => (axios.isCancel(e) ? "cancellation" : (e as any))
+    ),
+
+    TE.orElse((e) =>
+      e !== "cancellation" && e.response
+        ? TE.right(e.response as NetworkResponse)
+        : TE.left(e)
+    )
+  )
+
+const axiosStrategy: NetworkStrategy = (req) =>
+  pipe(
+    req,
+    settingsStore.value.PROXY_ENABLED ? axiosWithProxy : axiosWithoutProxy
+  )
+
+export default axiosStrategy

packages/hoppscotch-common/src/index.ts

@@ -28,6 +28,7 @@ export function createHoppApp(el: string | Element, platformDef: PlatformDef) {
   performMigrations()
 
   HOPP_MODULES.forEach((mod) => mod.onVueAppInit?.(app))
+  platformDef.addedHoppModules?.forEach((mod) => mod.onVueAppInit?.(app))
 
   app.mount(el)
 

packages/hoppscotch-common/src/modules/crisp.ts

@@ -1,32 +0,0 @@
-import { HoppModule } from "."
-
-export const showChat = () => {
-  ;(window as any).$crisp.push([
-    "do",
-    "chat:show",
-    (window as any).$crisp.push(["do", "chat:open"]),
-  ])
-}
-
-export default <HoppModule>{
-  onVueAppInit() {
-    // TODO: Env variable this ?
-    ;(window as any).$crisp = []
-    ;(window as any).CRISP_WEBSITE_ID = "3ad30257-c192-4773-955d-fb05a4b41af3"
-
-    const d = document
-    const s = d.createElement("script")
-
-    s.src = "https://client.crisp.chat/l.js"
-    s.async = true
-    d.getElementsByTagName("head")[0].appendChild(s)
-    ;(window as any).$crisp.push(["do", "chat:hide"])
-    ;(window as any).$crisp.push([
-      "on",
-      "chat:closed",
-      () => {
-        ;(window as any).$crisp.push(["do", "chat:hide"])
-      },
-    ])
-  },
-}

packages/hoppscotch-common/src/modules/router.ts

@@ -53,6 +53,9 @@ export default <HoppModule>{
       HOPP_MODULES.forEach((mod) => {
         mod.onBeforeRouteChange?.(to, from, router)
       })
+      platform.addedHoppModules?.forEach((mod) => {
+        mod.onBeforeRouteChange?.(to, from, router)
+      })
     })
 
     // Instead of this a better architecture is for the router
@@ -66,10 +69,14 @@ export default <HoppModule>{
       HOPP_MODULES.forEach((mod) => {
         mod.onAfterRouteChange?.(to, router)
       })
+      platform.addedHoppModules?.forEach((mod) => {
+        mod.onAfterRouteChange?.(to, router)
+      })
     })
 
     app.use(router)
 
     HOPP_MODULES.forEach((mod) => mod.onRouterInit?.(app, router))
+    platform.addedHoppModules?.forEach((mod) => mod.onRouterInit?.(app, router))
   },
 }

packages/hoppscotch-common/src/newstore/environments.ts

@@ -427,6 +427,10 @@ export function getCurrentEnvironment(): Environment {
   }
 }
 
+export function getSelectedEnvironmentIndex() {
+  return environmentsStore.value.selectedEnvironmentIndex
+}
+
 export function getSelectedEnvironmentType() {
   return environmentsStore.value.selectedEnvironmentIndex.type
 }

packages/hoppscotch-common/src/pages/graphql.vue

@@ -21,15 +21,14 @@
             :close-visibility="'hover'"
           >
             <template #tabhead>
-              <div
+              <GraphqlTabHead
-                v-tippy="{ theme: 'tooltip', delay: [500, 20] }"
+                :tab="tab"
-                :title="tab.document.request.name"
+                :is-removable="tabs.length > 1"
-                class="truncate px-2"
+                @open-rename-modal="openReqRenameModal(tab)"
-              >
+                @close-tab="removeTab(tab.id)"
-                <span class="leading-8 px-2">
+                @close-other-tabs="closeOtherTabsAction(tab.id)"
-                  {{ tab.document.request.name }}
+                @duplicate-tab="duplicateTab(tab.id)"
-                </span>
+              />
-              </div>
             </template>
 
             <template #suffix>
@@ -59,7 +58,12 @@
         <GraphqlSidebar />
       </template>
     </AppPaneLayout>
-
+    <CollectionsEditRequest
+      v-model="editReqModalReqName"
+      :show="showRenamingReqNameModalForTabID !== undefined"
+      @submit="renameReqName"
+      @hide-modal="showRenamingReqNameModalForTabID = undefined"
+    />
     <HoppSmartConfirmModal
       :show="confirmingCloseForTabID !== null"
       :confirm="t('modal.close_unsaved_tab')"
@@ -67,6 +71,13 @@
       @hide-modal="onCloseConfirm"
       @resolve="onResolveConfirm"
     />
+    <HoppSmartConfirmModal
+      :show="confirmingCloseAllTabs"
+      :confirm="t('modal.close_unsaved_tab')"
+      :title="t('confirm.close_unsaved_tabs', { count: unsavedTabsCount })"
+      @hide-modal="confirmingCloseAllTabs = false"
+      @resolve="onResolveConfirmCloseAllTabs"
+    />
   </div>
 </template>
 
@@ -80,10 +91,12 @@ import { connection, disconnect } from "~/helpers/graphql/connection"
 import { getDefaultGQLRequest } from "~/helpers/graphql/default"
 import {
   HoppGQLTab,
+  closeOtherTabs,
   closeTab,
   createNewTab,
   currentTabID,
   getActiveTabs,
+  getDirtyTabsCount,
   getTabRef,
   updateTab,
   updateTabOrdering,
@@ -142,6 +155,27 @@ const onResolveConfirm = () => {
   }
 }
 
+const confirmingCloseAllTabs = ref(false)
+const unsavedTabsCount = ref(0)
+const exceptedTabID = ref<string | null>(null)
+
+const closeOtherTabsAction = (tabID: string) => {
+  const dirtyTabCount = getDirtyTabsCount()
+  // If there are dirty tabs, show the confirm modal
+  if (dirtyTabCount > 0) {
+    confirmingCloseAllTabs.value = true
+    unsavedTabsCount.value = dirtyTabCount
+    exceptedTabID.value = tabID
+  } else {
+    closeOtherTabs(tabID)
+  }
+}
+
+const onResolveConfirmCloseAllTabs = () => {
+  if (exceptedTabID.value) closeOtherTabs(exceptedTabID.value)
+  confirmingCloseAllTabs.value = false
+}
+
 const onTabUpdate = (tab: HoppGQLTab) => {
   updateTab(tab)
 }
@@ -152,10 +186,54 @@ onBeforeUnmount(() => {
   }
 })
 
-defineActionHandler("gql.request.open", ({ request }) => {
+const editReqModalReqName = ref("")
+const showRenamingReqNameModalForTabID = ref<string>()
+
+const openReqRenameModal = (tab: HoppGQLTab) => {
+  editReqModalReqName.value = tab.document.request.name
+  showRenamingReqNameModalForTabID.value = tab.id
+}
+
+const renameReqName = () => {
+  const tab = getTabRef(showRenamingReqNameModalForTabID.value!)
+  if (tab.value) {
+    tab.value.document.request.name = editReqModalReqName.value
+    updateTab(tab.value)
+  }
+  showRenamingReqNameModalForTabID.value = undefined
+}
+
+const duplicateTab = (tabID: string) => {
+  const tab = getTabRef(tabID)
+  if (tab.value) {
+    const newTab = createNewTab({
+      request: tab.value.document.request,
+      isDirty: true,
+    })
+    currentTabID.value = newTab.id
+  }
+}
+
+defineActionHandler("gql.request.open", ({ request, saveContext }) => {
   createNewTab({
+    saveContext,
     request: request,
     isDirty: false,
   })
 })
+
+defineActionHandler("request.rename", () => {
+  openReqRenameModal(getTabRef(currentTabID.value).value!)
+})
+
+defineActionHandler("tab.duplicate-tab", ({ tabID }) => {
+  duplicateTab(tabID ?? currentTabID.value)
+})
+defineActionHandler("tab.close-current", () => {
+  removeTab(currentTabID.value)
+})
+defineActionHandler("tab.close-other", () => {
+  closeOtherTabs(currentTabID.value)
+})
+defineActionHandler("tab.open-new", addNewTab)
 </script>

packages/hoppscotch-common/src/pages/index.vue

@@ -94,7 +94,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, onMounted, onBeforeUnmount, onBeforeMount, watch } from "vue"
+import { ref, onMounted, onBeforeUnmount, onBeforeMount } from "vue"
 import { safelyExtractRESTRequest } from "@hoppscotch/data"
 import { translateExtURLParams } from "~/helpers/RESTExtURLParams"
 import { useRoute } from "vue-router"
@@ -140,7 +140,6 @@ import { useService } from "dioc/vue"
 import { InspectionService } from "~/services/inspection"
 import { HeaderInspectorService } from "~/services/inspection/inspectors/header.inspector"
 import { EnvironmentInspectorService } from "~/services/inspection/inspectors/environment.inspector"
-import { URLInspectorService } from "~/services/inspection/inspectors/url.inspector"
 import { ResponseInspectorService } from "~/services/inspection/inspectors/response.inspector"
 
 const savingRequest = ref(false)
@@ -150,6 +149,7 @@ const showRenamingReqNameModal = ref(false)
 const reqName = ref<string>("")
 const unsavedTabsCount = ref(0)
 const exceptedTabID = ref<string | null>(null)
+const renameTabID = ref<string | null>(null)
 
 const t = useI18n()
 const toast = useToast()
@@ -214,6 +214,8 @@ const sortTabs = (e: { oldIndex: number; newIndex: number }) => {
   updateTabOrdering(e.oldIndex, e.newIndex)
 }
 
+const inspectionService = useService(InspectionService)
+
 const removeTab = (tabID: string) => {
   const tabState = getTabRef(tabID).value
 
@@ -257,6 +259,7 @@ const openReqRenameModal = (tabID?: string) => {
   if (tabID) {
     const tab = getTabRef(tabID)
     reqName.value = tab.value.document.request.name
+    renameTabID.value = tabID
   } else {
     reqName.value = currentActiveTab.value.document.request.name
   }
@@ -264,7 +267,7 @@ const openReqRenameModal = (tabID?: string) => {
 }
 
 const renameReqName = () => {
-  const tab = getTabRef(currentTabID.value)
+  const tab = getTabRef(renameTabID.value ?? currentTabID.value)
   if (tab.value) {
     tab.value.document.request.name = reqName.value
     updateTab(tab.value)
@@ -458,19 +461,22 @@ defineActionHandler("rest.request.open", ({ doc }) => {
   createNewTab(doc)
 })
 
-defineActionHandler("rest.request.rename", openReqRenameModal)
+defineActionHandler("request.rename", openReqRenameModal)
+defineActionHandler("tab.duplicate-tab", ({ tabID }) => {
+  duplicateTab(tabID ?? currentTabID.value)
+})
+defineActionHandler("tab.close-current", () => {
+  removeTab(currentTabID.value)
+})
+defineActionHandler("tab.close-other", () => {
+  closeOtherTabs(currentTabID.value)
+})
+defineActionHandler("tab.open-new", addNewTab)
 
-const inspectionService = useService(InspectionService)
 useService(HeaderInspectorService)
 useService(EnvironmentInspectorService)
-useService(URLInspectorService)
 useService(ResponseInspectorService)
-
+for (const inspectorDef of platform.additionalInspectors ?? []) {
-watch(
+  useService(inspectorDef.service)
-  () => currentTabID.value,
+}
-  () => {
-    inspectionService.initializeTabInspectors()
-  },
-  { immediate: true }
-)
 </script>

packages/hoppscotch-common/src/platform/index.ts

@@ -7,9 +7,12 @@ import { HistoryPlatformDef } from "./history"
 import { TabStatePlatformDef } from "./tab"
 import { AnalyticsPlatformDef } from "./analytics"
 import { InterceptorsPlatformDef } from "./interceptors"
+import { HoppModule } from "~/modules"
+import { InspectorsPlatformDef } from "./inspectors"
 
 export type PlatformDef = {
   ui?: UIPlatformDef
+  addedHoppModules?: HoppModule[]
   auth: AuthPlatformDef
   analytics?: AnalyticsPlatformDef
   sync: {
@@ -20,6 +23,7 @@ export type PlatformDef = {
     tabState: TabStatePlatformDef
   }
   interceptors: InterceptorsPlatformDef
+  additionalInspectors?: InspectorsPlatformDef
   platformFeatureFlags: {
     exportAsGIST: boolean
   }

packages/hoppscotch-common/src/platform/inspectors.ts

@@ -0,0 +1,16 @@
+import { Service } from "dioc"
+import { Inspector } from "~/services/inspection"
+
+/**
+ * Defines an added interceptor by the platform
+ */
+export type PlatformInspectorsDef = {
+  // We are keeping this as the only mode for now
+  // So that if we choose to add other modes, we can do without breaking
+  type: "service"
+  service: typeof Service<unknown> & { ID: string } & {
+    new (): Service & Inspector
+  }
+}
+
+export type InspectorsPlatformDef = PlatformInspectorsDef[]

packages/hoppscotch-common/src/platform/std/inspections/__tests__/extension.inspector.spec.ts

@@ -1,15 +1,17 @@
 import { TestContainer } from "dioc/testing"
 import { describe, expect, it, vi } from "vitest"
-import { URLInspectorService } from "../url.inspector"
+import { ExtensionInspectorService } from "../extension.inspector"
-import { InspectionService } from "../../index"
+import { InspectionService } from "~/services/inspection"
 import { getDefaultRESTRequest } from "~/helpers/rest/default"
+import { ref } from "vue"
+import { ExtensionInterceptorService } from "~/platform/std/interceptors/extension"
 
 vi.mock("~/modules/i18n", () => ({
   __esModule: true,
   getI18n: () => (x: string) => x,
 }))
 
-describe("URLInspectorService", () => {
+describe("ExtensionInspectorService", () => {
   it("registers with the inspection service upon initialization", () => {
     const container = new TestContainer()
 
@@ -19,7 +21,7 @@ describe("URLInspectorService", () => {
       registerInspector: registerInspectorFn,
     })
 
-    const urlInspector = container.bind(URLInspectorService)
+    const urlInspector = container.bind(ExtensionInspectorService)
 
     expect(registerInspectorFn).toHaveBeenCalledOnce()
     expect(registerInspectorFn).toHaveBeenCalledWith(urlInspector)
@@ -28,55 +30,57 @@ describe("URLInspectorService", () => {
   describe("getInspectorFor", () => {
     it("should return an inspector result when localhost is in URL and extension is not available", () => {
       const container = new TestContainer()
-      const urlInspector = container.bind(URLInspectorService)
+      const urlInspector = container.bind(ExtensionInspectorService)
 
-      const req = {
+      const req = ref({
         ...getDefaultRESTRequest(),
         endpoint: "http://localhost:8000/api/data",
-      }
+      })
 
-      const result = urlInspector.getInspectorFor(req)
+      const result = urlInspector.getInspections(req)
 
-      expect(result).toContainEqual(
+      expect(result.value).toContainEqual(
         expect.objectContaining({ id: "url", isApplicable: true })
       )
     })
 
     it("should not return an inspector result when localhost is not in URL", () => {
       const container = new TestContainer()
-      const urlInspector = container.bind(URLInspectorService)
 
-      const req = {
+      container.bindMock(ExtensionInterceptorService, {
+        extensionStatus: ref("unknown-origin" as const),
+      })
+
+      const urlInspector = container.bind(ExtensionInspectorService)
+
+      const req = ref({
         ...getDefaultRESTRequest(),
         endpoint: "http://example.com/api/data",
-      }
+      })
 
-      const result = urlInspector.getInspectorFor(req)
+      const result = urlInspector.getInspections(req)
 
-      expect(result).toHaveLength(0)
+      expect(result.value).toHaveLength(0)
     })
 
     it("should add the correct text to the results when extension is not installed", () => {
-      vi.mock("~/newstore/HoppExtension", async () => {
-        const { BehaviorSubject }: any = await vi.importActual("rxjs")
-
-        return {
-          __esModule: true,
-          extensionStatus$: new BehaviorSubject("waiting"),
-        }
-      })
       const container = new TestContainer()
-      const urlInspector = container.bind(URLInspectorService)
 
-      const req = {
+      container.bindMock(ExtensionInterceptorService, {
+        extensionStatus: ref("waiting" as const),
+      })
+
+      const urlInspector = container.bind(ExtensionInspectorService)
+
+      const req = ref({
         ...getDefaultRESTRequest(),
         endpoint: "http://localhost:8000/api/data",
-      }
+      })
 
-      const result = urlInspector.getInspectorFor(req)
+      const result = urlInspector.getInspections(req)
 
-      expect(result).toHaveLength(1)
+      expect(result.value).toHaveLength(1)
-      expect(result[0]).toMatchObject({
+      expect(result.value[0]).toMatchObject({
         text: { type: "text", text: "inspections.url.extension_not_installed" },
       })
     })

packages/hoppscotch-common/src/platform/std/inspections/extension.inspector.ts

@@ -0,0 +1,107 @@
+import { Service } from "dioc"
+import {
+  InspectionService,
+  Inspector,
+  InspectorResult,
+} from "~/services/inspection"
+import { getI18n } from "~/modules/i18n"
+import { HoppRESTRequest } from "@hoppscotch/data"
+import { computed, markRaw } from "vue"
+import IconAlertTriangle from "~icons/lucide/alert-triangle"
+import { Ref } from "vue"
+import { InterceptorService } from "~/services/interceptor.service"
+import { ExtensionInterceptorService } from "~/platform/std/interceptors/extension"
+
+/**
+ * This inspector is responsible for inspecting the URL of a request.
+ * It checks if the URL contains localhost and if the extension is installed.
+ * It also provides an action to enable the extension.
+ *
+ * NOTE: Initializing this service registers it as a inspector with the Inspection Service.
+ */
+export class ExtensionInspectorService extends Service implements Inspector {
+  public static readonly ID = "EXTENSION_INSPECTOR_SERVICE"
+
+  private t = getI18n()
+
+  public readonly inspectorID = "extension"
+
+  private readonly interceptorService = this.bind(InterceptorService)
+  private readonly extensionService = this.bind(ExtensionInterceptorService)
+
+  private readonly inspection = this.bind(InspectionService)
+
+  constructor() {
+    super()
+
+    this.inspection.registerInspector(this)
+  }
+
+  getInspections(req: Readonly<Ref<HoppRESTRequest>>) {
+    const currentExtensionStatus = this.extensionService.extensionStatus
+
+    const isExtensionInstalled = computed(
+      () => currentExtensionStatus.value === "available"
+    )
+
+    const EXTENSIONS_ENABLED = computed(
+      () => this.interceptorService.currentInterceptorID.value === "extension"
+    )
+
+    return computed(() => {
+      const results: InspectorResult[] = []
+
+      const url = req.value.endpoint
+      const localHostURLs = ["localhost", "127.0.0.1"]
+
+      const isContainLocalhost = localHostURLs.some((host) =>
+        url.includes(host)
+      )
+
+      if (
+        isContainLocalhost &&
+        (!EXTENSIONS_ENABLED.value || !isExtensionInstalled.value)
+      ) {
+        let text
+
+        if (!isExtensionInstalled.value) {
+          if (currentExtensionStatus.value === "unknown-origin") {
+            text = this.t("inspections.url.extension_unknown_origin")
+          } else {
+            text = this.t("inspections.url.extension_not_installed")
+          }
+        } else if (!EXTENSIONS_ENABLED.value) {
+          text = this.t("inspections.url.extention_not_enabled")
+        } else {
+          text = this.t("inspections.url.localhost")
+        }
+
+        results.push({
+          id: "url",
+          icon: markRaw(IconAlertTriangle),
+          text: {
+            type: "text",
+            text: text,
+          },
+          action: {
+            text: this.t("inspections.url.extention_enable_action"),
+            apply: () => {
+              this.interceptorService.currentInterceptorID.value = "extension"
+            },
+          },
+          severity: 2,
+          isApplicable: true,
+          locations: {
+            type: "url",
+          },
+          doc: {
+            text: this.t("action.learn_more"),
+            link: "https://docs.hoppscotch.io/documentation/features/interceptor#browser-extension",
+          },
+        })
+      }
+
+      return results
+    })
+  }
+}

packages/hoppscotch-common/src/platform/std/ui/footerItem.ts

@@ -0,0 +1,25 @@
+import { HoppFooterMenuItem } from "../../ui"
+import IconGift from "~icons/lucide/gift"
+import IconActivity from "~icons/lucide/activity"
+
+export const whatsNew: HoppFooterMenuItem = {
+  id: "whats-new",
+  text: (t) => t("app.whats_new"),
+  icon: IconGift,
+  action: {
+    type: "link",
+    href: "https://docs.hoppscotch.io/documentation/changelog",
+  },
+}
+
+export const status: HoppFooterMenuItem = {
+  id: "status",
+  text: (t) => t("app.status"),
+  icon: IconActivity,
+  action: {
+    type: "link",
+    href: "https://status.hoppscotch.io",
+  },
+}
+
+export const stdFooterItems = [whatsNew, status]

packages/hoppscotch-common/src/platform/std/ui/supportOptionsItem.ts

@@ -0,0 +1,110 @@
+import { invokeAction } from "~/helpers/actions"
+import { HoppSupportOptionsMenuItem } from "~/platform/ui"
+import IconBook from "~icons/lucide/book"
+import IconGift from "~icons/lucide/gift"
+import IconZap from "~icons/lucide/zap"
+import IconGitHub from "~icons/lucide/github"
+import IconTwitter from "~icons/brands/twitter"
+import IconDiscord from "~icons/brands/discord"
+import IconUserPlus from "~icons/lucide/user-plus"
+
+export const documentation: HoppSupportOptionsMenuItem = {
+  id: "documentation",
+  text: (t) => t("app.documentation"),
+  subtitle: (t) => t("support.documentation"),
+  icon: IconBook,
+  action: {
+    type: "link",
+    href: "https://docs.hoppscotch.io",
+  },
+}
+
+export const shortcuts: HoppSupportOptionsMenuItem = {
+  id: "shortcuts",
+  text: (t) => t("app.keyboard_shortcuts"),
+  subtitle: (t) => t("support.shortcuts"),
+  icon: IconZap,
+  action: {
+    type: "custom",
+    do() {
+      invokeAction("flyouts.keybinds.toggle")
+    },
+  },
+}
+
+export const changelog: HoppSupportOptionsMenuItem = {
+  id: "changelog",
+  text: (t) => t("app.whats_new"),
+  subtitle: (t) => t("support.changelog"),
+  icon: IconGift,
+  action: {
+    type: "link",
+    href: "https://docs.hoppscotch.io/documentation/changelog",
+  },
+}
+
+export const github: HoppSupportOptionsMenuItem = {
+  id: "github",
+  text: (t) => t("app.github"),
+  subtitle: (t) => t("support.github"),
+  icon: IconGitHub,
+  action: {
+    type: "link",
+    href: "https://hoppscotch.io/github",
+  },
+}
+
+export const discord: HoppSupportOptionsMenuItem = {
+  id: "discord",
+  text: (t) => t("app.join_discord_community"),
+  subtitle: (t) => t("support.community"),
+  icon: IconDiscord,
+  action: {
+    type: "link",
+    href: "https://hoppscotch.io/discord",
+  },
+}
+
+export const twitter: HoppSupportOptionsMenuItem = {
+  id: "discord",
+  text: (t) => t("app.twitter"),
+  subtitle: (t) => t("support.twitter"),
+  icon: IconTwitter,
+  action: {
+    type: "link",
+    href: "https://hoppscotch.io/discord",
+  },
+}
+
+export const invite: HoppSupportOptionsMenuItem = {
+  id: "invite",
+  text: (t) => t("app.invite"),
+  subtitle: (t) => t("shortcut.miscellaneous.invite"),
+  icon: IconUserPlus,
+  action: {
+    type: "custom",
+    do() {
+      if (navigator.share) {
+        navigator
+          .share({
+            title: "Hoppscotch",
+            text: "Hoppscotch • Open source API development ecosystem - Helps you create requests faster, saving precious time on development.",
+            url: "https://hoppscotch.io",
+          })
+          .catch(console.error)
+      } else {
+        // fallback
+      }
+    },
+  },
+}
+
+export const stdSupportOptionItems: HoppSupportOptionsMenuItem[] = [
+  documentation,
+  shortcuts,
+  changelog,
+  github,
+  discord,
+  twitter,
+  invite,
+]

packages/hoppscotch-common/src/platform/ui.ts

@@ -1,4 +1,20 @@
-import { Ref } from "vue"
+import { Ref, Component } from "vue"
+import { getI18n } from "~/modules/i18n"
+
+export type HoppFooterMenuItem = {
+  id: string
+  text: (t: ReturnType<typeof getI18n>) => string
+  icon: Component
+  action: { type: "link"; href: string } | { type: "custom"; do: () => void }
+}
+
+export type HoppSupportOptionsMenuItem = {
+  id: string
+  text: (t: ReturnType<typeof getI18n>) => string
+  subtitle: (t: ReturnType<typeof getI18n>) => string
+  icon: Component
+  action: { type: "link"; href: string } | { type: "custom"; do: () => void }
+}
 
 export type UIPlatformDef = {
   appHeader?: {
@@ -6,4 +22,15 @@ export type UIPlatformDef = {
     paddingLeft?: Ref<string>
   }
   onCodemirrorInstanceMount?: (element: HTMLElement) => void
+
+  /**
+   * Additonal menu items shown in the "Help and Feedback" menu
+   * in the app footer.
+   */
+  additionalFooterMenuItems?: HoppFooterMenuItem[]
+
+  /**
+   * Additional Support Options menu items shown in the app header
+   */
+  additionalSupportOptionsMenuItems?: HoppSupportOptionsMenuItem[]
 }

packages/hoppscotch-common/src/services/context-menu/menu/__tests__/environment.menu.spec.ts

@@ -61,7 +61,7 @@ describe("EnvironmentMenuService", () => {
       expect(actionsMock.invokeAction).toHaveBeenCalledWith(
         "modals.environment.add",
         {
-          envName: "test",
+          envName: "",
           variableName: test,
         }
       )

packages/hoppscotch-common/src/services/context-menu/menu/environment.menu.ts

@@ -42,7 +42,7 @@ export class EnvironmentMenuService extends Service implements ContextMenu {
         icon: markRaw(IconPlusCircle),
         action: () => {
           invokeAction("modals.environment.add", {
-            envName: "test",
+            envName: "",
             variableName: text,
           })
         },

packages/hoppscotch-common/src/services/context-menu/menu/parameter.menu.ts

@@ -114,7 +114,7 @@ export class ParameterMenuService extends Service implements ContextMenu {
           id: "environment",
           text: {
             type: "text",
-            text: this.t("context_menu.add_parameter"),
+            text: this.t("context_menu.add_parameters"),
           },
           icon: markRaw(IconArrowDownRight),
           action: () => {

packages/hoppscotch-common/src/services/context-menu/menu/url.menu.ts

@@ -70,7 +70,7 @@ export class URLMenuService extends Service implements ContextMenu {
           id: "link-tab",
           text: {
             type: "text",
-            text: this.t("context_menu.open_link_in_new_tab"),
+            text: this.t("context_menu.open_request_in_new_tab"),
           },
           icon: markRaw(IconCopyPlus),
           action: () => {

packages/hoppscotch-common/src/services/inspection/__tests__/index.spec.ts

@@ -1,6 +1,7 @@
 import { describe, it, expect } from "vitest"
 import { Inspector, InspectionService, InspectorResult } from "../"
 import { TestContainer } from "dioc/testing"
+import { ref } from "vue"
 
 const inspectorResultMock: InspectorResult[] = [
   {
@@ -21,7 +22,7 @@ const inspectorResultMock: InspectorResult[] = [
 
 const testInspector: Inspector = {
   inspectorID: "inspector1",
-  getInspectorFor: () => inspectorResultMock,
+  getInspections: () => ref(inspectorResultMock),
 }
 
 describe("InspectionService", () => {

packages/hoppscotch-common/src/services/inspection/index.ts

@@ -1,7 +1,9 @@
 import { HoppRESTRequest } from "@hoppscotch/data"
+import { refDebounced } from "@vueuse/core"
 import { Service } from "dioc"
+import { computed, markRaw, reactive } from "vue"
 import { Component, Ref, ref, watch } from "vue"
-import { currentActiveTab, currentTabID } from "~/helpers/rest/tab"
+import { currentActiveTab } from "~/helpers/rest/tab"
 import { HoppRESTResponse } from "~/helpers/types/HoppRESTResponse"
 
 /**
@@ -80,15 +82,16 @@ export interface Inspector {
    */
   inspectorID: string
   /**
-   * Returns the inspector results for the request
+   * Returns the inspector results for the request.
-   * @param req The request to inspect
+   * NOTE: The refs passed down are readonly and are debounced to avoid performance issues
-   * @param res The response to inspect
+   * @param req The ref to the request to inspect
-   * @returns The inspector results
+   * @param res The ref to the response to inspect
+   * @returns The ref to the inspector results
    */
-  getInspectorFor: (
+  getInspections: (
-    req: HoppRESTRequest,
+    req: Readonly<Ref<HoppRESTRequest>>,
-    res?: HoppRESTResponse
+    res: Readonly<Ref<HoppRESTResponse | null | undefined>>
-  ) => InspectorResult[]
+  ) => Ref<InspectorResult[]>
 }
 
 /**
@@ -98,38 +101,73 @@ export interface Inspector {
 export class InspectionService extends Service {
   public static readonly ID = "INSPECTION_SERVICE"
 
-  private inspectors: Map<string, Inspector> = new Map()
+  private inspectors: Map<string, Inspector> = reactive(new Map())
 
-  public tabs: Ref<Map<string, InspectorResult[]>> = ref(new Map())
+  private tabs: Ref<Map<string, InspectorResult[]>> = ref(new Map())
+
+  constructor() {
+    super()
+
+    this.initializeListeners()
+  }
 
   /**
    * Registers a inspector with the inspection service
    * @param inspector The inspector instance to register
    */
   public registerInspector(inspector: Inspector) {
-    this.inspectors.set(inspector.inspectorID, inspector)
+    // markRaw is required here so that the inspector is not made reactive
+    this.inspectors.set(inspector.inspectorID, markRaw(inspector))
   }
 
-  public initializeTabInspectors() {
+  private initializeListeners() {
     watch(
-      currentActiveTab.value,
+      () => [this.inspectors.entries(), currentActiveTab.value.id],
-      (tab) => {
+      () => {
-        if (!tab) return
+        const reqRef = computed(() => currentActiveTab.value.document.request)
-        const req = currentActiveTab.value.document.request
+        const resRef = computed(() => currentActiveTab.value.response)
-        const res = currentActiveTab.value.response
+
-        const inspectors = Array.from(this.inspectors.values()).map((x) =>
+        const debouncedReq = refDebounced(reqRef, 1000, { maxWait: 2000 })
-          x.getInspectorFor(req, res)
+        const debouncedRes = refDebounced(resRef, 1000, { maxWait: 2000 })
+
+        const inspectorRefs = Array.from(this.inspectors.values()).map((x) =>
+          x.getInspections(debouncedReq, debouncedRes)
         )
-        this.tabs.value.set(
+
-          currentTabID.value,
+        const activeInspections = computed(() =>
-          inspectors.flatMap((x) => x)
+          inspectorRefs.flatMap((x) => x!.value)
+        )
+
+        watch(
+          () => [...inspectorRefs.flatMap((x) => x!.value)],
+          () => {
+            this.tabs.value.set(
+              currentActiveTab.value.id,
+              activeInspections.value
+            )
+          },
+          { immediate: true }
         )
       },
-      { immediate: true, deep: true }
+      { immediate: true, flush: "pre" }
     )
   }
 
   public deleteTabInspectorResult(tabID: string) {
+    // TODO: Move Tabs into a service and implement this with an event instead
     this.tabs.value.delete(tabID)
   }
+
+  /**
+   * Returns a reactive view into the inspector results for a specific tab
+   * @param tabID The ID of the tab to get the results for
+   * @param filter The filter to apply to the results.
+   * @returns The ref into the inspector results, if the tab doesn't exist, a ref into an empty array is returned
+   */
+  public getResultViewFor(
+    tabID: string,
+    filter: (x: InspectorResult) => boolean = () => true
+  ) {
+    return computed(() => this.tabs.value.get(tabID)?.filter(filter) ?? [])
+  }
 }

packages/hoppscotch-common/src/services/inspection/inspectors/__tests__/environment.inspector.spec.ts

@@ -3,16 +3,23 @@ import { describe, expect, it, vi } from "vitest"
 import { EnvironmentInspectorService } from "../environment.inspector"
 import { InspectionService } from "../../index"
 import { getDefaultRESTRequest } from "~/helpers/rest/default"
+import { ref } from "vue"
 
 vi.mock("~/modules/i18n", () => ({
   __esModule: true,
   getI18n: () => (x: string) => x,
 }))
 
-vi.mock("~/newstore/environments", () => ({
+vi.mock("~/newstore/environments", async () => {
-  __esModule: true,
+  const { BehaviorSubject }: any = await vi.importActual("rxjs")
-  getAggregateEnvs: () => [{ key: "EXISTING_ENV_VAR", value: "test_value" }],
+
-}))
+  return {
+    __esModule: true,
+    aggregateEnvs$: new BehaviorSubject([
+      { key: "EXISTING_ENV_VAR", value: "test_value" },
+    ]),
+  }
+})
 
 describe("EnvironmentInspectorService", () => {
   it("registers with the inspection service upon initialization", () => {
@@ -35,14 +42,14 @@ describe("EnvironmentInspectorService", () => {
       const container = new TestContainer()
       const envInspector = container.bind(EnvironmentInspectorService)
 
-      const req = {
+      const req = ref({
         ...getDefaultRESTRequest(),
         endpoint: "<<UNDEFINED_ENV_VAR>>",
-      }
+      })
 
-      const result = envInspector.getInspectorFor(req)
+      const result = envInspector.getInspections(req)
 
-      expect(result).toContainEqual(
+      expect(result.value).toContainEqual(
         expect.objectContaining({
           id: "environment",
           isApplicable: true,
@@ -58,31 +65,31 @@ describe("EnvironmentInspectorService", () => {
       const container = new TestContainer()
       const envInspector = container.bind(EnvironmentInspectorService)
 
-      const req = {
+      const req = ref({
         ...getDefaultRESTRequest(),
         endpoint: "<<EXISTING_ENV_VAR>>",
-      }
+      })
 
-      const result = envInspector.getInspectorFor(req)
+      const result = envInspector.getInspections(req)
 
-      expect(result).toHaveLength(0)
+      expect(result.value).toHaveLength(0)
     })
 
     it("should return an inspector result when the headers contain undefined environment variables", () => {
       const container = new TestContainer()
       const envInspector = container.bind(EnvironmentInspectorService)
 
-      const req = {
+      const req = ref({
         ...getDefaultRESTRequest(),
         endpoint: "http://example.com/api/data",
         headers: [
           { key: "<<UNDEFINED_ENV_VAR>>", value: "some-value", active: true },
         ],
-      }
+      })
 
-      const result = envInspector.getInspectorFor(req)
+      const result = envInspector.getInspections(req)
 
-      expect(result).toContainEqual(
+      expect(result.value).toContainEqual(
         expect.objectContaining({
           id: "environment",
           isApplicable: true,
@@ -98,34 +105,34 @@ describe("EnvironmentInspectorService", () => {
       const container = new TestContainer()
       const envInspector = container.bind(EnvironmentInspectorService)
 
-      const req = {
+      const req = ref({
         ...getDefaultRESTRequest(),
         endpoint: "http://example.com/api/data",
         headers: [
           { key: "<<EXISTING_ENV_VAR>>", value: "some-value", active: true },
         ],
-      }
+      })
 
-      const result = envInspector.getInspectorFor(req)
+      const result = envInspector.getInspections(req)
 
-      expect(result).toHaveLength(0)
+      expect(result.value).toHaveLength(0)
     })
 
     it("should return an inspector result when the params contain undefined environment variables", () => {
       const container = new TestContainer()
       const envInspector = container.bind(EnvironmentInspectorService)
 
-      const req = {
+      const req = ref({
         ...getDefaultRESTRequest(),
         endpoint: "http://example.com/api/data",
         params: [
           { key: "<<UNDEFINED_ENV_VAR>>", value: "some-value", active: true },
         ],
-      }
+      })
 
-      const result = envInspector.getInspectorFor(req)
+      const result = envInspector.getInspections(req)
 
-      expect(result).toContainEqual(
+      expect(result.value).toContainEqual(
         expect.objectContaining({
           id: "environment",
           isApplicable: true,
@@ -141,18 +148,18 @@ describe("EnvironmentInspectorService", () => {
       const container = new TestContainer()
       const envInspector = container.bind(EnvironmentInspectorService)
 
-      const req = {
+      const req = ref({
         ...getDefaultRESTRequest(),
         endpoint: "http://example.com/api/data",
         headers: [],
         params: [
           { key: "<<EXISTING_ENV_VAR>>", value: "some-value", active: true },
         ],
-      }
+      })
 
-      const result = envInspector.getInspectorFor(req)
+      const result = envInspector.getInspections(req)
 
-      expect(result).toHaveLength(0)
+      expect(result.value).toHaveLength(0)
     })
   })
 })

packages/hoppscotch-common/src/services/inspection/inspectors/__tests__/header.inspector.spec.ts

@@ -3,6 +3,7 @@ import { describe, expect, it, vi } from "vitest"
 import { HeaderInspectorService } from "../header.inspector"
 import { InspectionService } from "../../index"
 import { getDefaultRESTRequest } from "~/helpers/rest/default"
+import { ref } from "vue"
 
 vi.mock("~/modules/i18n", () => ({
   __esModule: true,
@@ -30,15 +31,15 @@ describe("HeaderInspectorService", () => {
       const container = new TestContainer()
       const headerInspector = container.bind(HeaderInspectorService)
 
-      const req = {
+      const req = ref({
         ...getDefaultRESTRequest(),
         endpoint: "http://example.com/api/data",
         headers: [{ key: "Cookie", value: "some-cookie", active: true }],
-      }
+      })
 
-      const result = headerInspector.getInspectorFor(req)
+      const result = headerInspector.getInspections(req)
 
-      expect(result).toContainEqual(
+      expect(result.value).toContainEqual(
         expect.objectContaining({ id: "header", isApplicable: true })
       )
     })
@@ -47,15 +48,15 @@ describe("HeaderInspectorService", () => {
       const container = new TestContainer()
       const headerInspector = container.bind(HeaderInspectorService)
 
-      const req = {
+      const req = ref({
         ...getDefaultRESTRequest(),
         endpoint: "http://example.com/api/data",
         headers: [{ key: "Authorization", value: "Bearer abcd", active: true }],
-      }
+      })
 
-      const result = headerInspector.getInspectorFor(req)
+      const result = headerInspector.getInspections(req)
 
-      expect(result).toHaveLength(0)
+      expect(result.value).toHaveLength(0)
     })
   })
 })

packages/hoppscotch-common/src/services/inspection/inspectors/__tests__/response.inspector.spec.ts

@@ -0,0 +1,245 @@
+import { TestContainer } from "dioc/testing"
+import { describe, expect, it, beforeEach, afterEach, vi } from "vitest"
+import { ResponseInspectorService } from "../response.inspector"
+import { InspectionService } from "../../index"
+import { getDefaultRESTRequest } from "~/helpers/rest/default"
+import { ref } from "vue"
+import { HoppRESTResponse } from "~/helpers/types/HoppRESTResponse"
+
+vi.mock("~/modules/i18n", () => ({
+  __esModule: true,
+  getI18n: () => (x: string) => x,
+}))
+
+describe("ResponseInspectorService", () => {
+  beforeEach(() => {
+    vi.stubGlobal("navigator", {
+      onLine: true,
+    })
+  })
+
+  afterEach(() => {
+    vi.unstubAllGlobals()
+  })
+
+  it("registers with the inspection service upon initialization", () => {
+    const container = new TestContainer()
+
+    const registerInspectorFn = vi.fn()
+
+    container.bindMock(InspectionService, {
+      registerInspector: registerInspectorFn,
+    })
+
+    const responseInspector = container.bind(ResponseInspectorService)
+
+    expect(registerInspectorFn).toHaveBeenCalledOnce()
+    expect(registerInspectorFn).toHaveBeenCalledWith(responseInspector)
+  })
+
+  describe("getInspectorFor", () => {
+    it("should return an empty array when response is undefined", () => {
+      const container = new TestContainer()
+      const responseInspector = container.bind(ResponseInspectorService)
+
+      const req = ref({
+        ...getDefaultRESTRequest(),
+        endpoint: "http://example.com/api/data",
+      })
+
+      const result = responseInspector.getInspections(req, ref(undefined))
+
+      expect(result.value).toHaveLength(0)
+    })
+
+    it("should return an inspector result when response type is not success or status code is not 200 and if the network is not available", () => {
+      const container = new TestContainer()
+      const responseInspector = container.bind(ResponseInspectorService)
+
+      const req = ref({
+        ...getDefaultRESTRequest(),
+        endpoint: "http://example.com/api/data",
+      })
+      const res = ref<HoppRESTResponse>({
+        type: "network_fail",
+        error: new Error("test"),
+        req: req.value,
+      })
+
+      vi.stubGlobal("navigator", {
+        onLine: false,
+      })
+
+      const result = responseInspector.getInspections(req, res)
+
+      expect(result.value).toContainEqual(
+        expect.objectContaining({ id: "url", isApplicable: true })
+      )
+    })
+
+    it("should return no inspector result when response type is not success or status code is not 200 and if the network is not available", () => {
+      const container = new TestContainer()
+      const responseInspector = container.bind(ResponseInspectorService)
+
+      const req = ref({
+        ...getDefaultRESTRequest(),
+        endpoint: "http://example.com/api/data",
+      })
+      const res = ref<HoppRESTResponse>({
+        type: "network_fail",
+        error: new Error("test"),
+        req: req.value,
+      })
+
+      const result = responseInspector.getInspections(req, res)
+
+      expect(result.value).toHaveLength(0)
+    })
+
+    it("should handle network_fail responses and return nothing when no network is present", () => {
+      const container = new TestContainer()
+      const responseInspector = container.bind(ResponseInspectorService)
+
+      const req = ref({
+        ...getDefaultRESTRequest(),
+        endpoint: "http://example.com/api/data",
+      })
+      const res = ref<HoppRESTResponse>({
+        type: "network_fail",
+        error: new Error("test"),
+        req: req.value,
+      })
+
+      vi.stubGlobal("navigator", {
+        onLine: false,
+      })
+
+      const result = responseInspector.getInspections(req, res)
+
+      expect(result.value).toContainEqual(
+        expect.objectContaining({
+          text: { type: "text", text: "inspections.response.network_error" },
+        })
+      )
+    })
+
+    it("should handle network_fail responses and return nothing when network is present", () => {
+      const container = new TestContainer()
+      const responseInspector = container.bind(ResponseInspectorService)
+
+      const req = ref({
+        ...getDefaultRESTRequest(),
+        endpoint: "http://example.com/api/data",
+      })
+      const res = ref<HoppRESTResponse>({
+        type: "network_fail",
+        error: new Error("test"),
+        req: req.value,
+      })
+
+      const result = responseInspector.getInspections(req, res)
+
+      expect(result.value).toHaveLength(0)
+    })
+
+    it("should handle fail responses", () => {
+      const container = new TestContainer()
+      const responseInspector = container.bind(ResponseInspectorService)
+
+      const req = ref({
+        ...getDefaultRESTRequest(),
+        endpoint: "http://example.com/api/data",
+      })
+      const res = ref<HoppRESTResponse>({
+        type: "fail",
+        statusCode: 500,
+        body: Uint8Array.from([]),
+        headers: [],
+        meta: { responseDuration: 0, responseSize: 0 },
+        req: req.value,
+      })
+
+      const result = responseInspector.getInspections(req, res)
+
+      expect(result.value).toContainEqual(
+        expect.objectContaining({
+          text: { type: "text", text: "inspections.response.default_error" },
+        })
+      )
+    })
+
+    it("should handle 404 responses", () => {
+      const container = new TestContainer()
+      const responseInspector = container.bind(ResponseInspectorService)
+
+      const req = ref({
+        ...getDefaultRESTRequest(),
+        endpoint: "http://example.com/api/data",
+      })
+      const res = ref<HoppRESTResponse>({
+        type: "success",
+        statusCode: 404,
+        body: Uint8Array.from([]),
+        headers: [],
+        meta: { responseDuration: 0, responseSize: 0 },
+        req: req.value,
+      })
+
+      const result = responseInspector.getInspections(req, res)
+
+      expect(result.value).toContainEqual(
+        expect.objectContaining({
+          text: { type: "text", text: "inspections.response.404_error" },
+        })
+      )
+    })
+
+    it("should handle 401 responses", () => {
+      const container = new TestContainer()
+      const responseInspector = container.bind(ResponseInspectorService)
+
+      const req = ref({
+        ...getDefaultRESTRequest(),
+        endpoint: "http://example.com/api/data",
+      })
+      const res = ref<HoppRESTResponse>({
+        type: "success",
+        statusCode: 401,
+        body: Uint8Array.from([]),
+        headers: [],
+        meta: { responseDuration: 0, responseSize: 0 },
+        req: req.value,
+      })
+
+      const result = responseInspector.getInspections(req, res)
+
+      expect(result.value).toContainEqual(
+        expect.objectContaining({
+          text: { type: "text", text: "inspections.response.401_error" },
+        })
+      )
+    })
+
+    it("should handle successful responses", () => {
+      const container = new TestContainer()
+      const responseInspector = container.bind(ResponseInspectorService)
+
+      const req = ref({
+        ...getDefaultRESTRequest(),
+        endpoint: "http://example.com/api/data",
+      })
+      const res = ref<HoppRESTResponse>({
+        type: "success",
+        statusCode: 200,
+        body: Uint8Array.from([]),
+        headers: [],
+        meta: { responseDuration: 0, responseSize: 0 },
+        req: req.value,
+      })
+
+      const result = responseInspector.getInspections(req, res)
+
+      expect(result.value).toHaveLength(0)
+    })
+  })
+})

packages/hoppscotch-common/src/services/inspection/inspectors/__tests__/response.interceptor.spec.ts

@@ -1,151 +0,0 @@
-import { TestContainer } from "dioc/testing"
-import { describe, expect, it, vi } from "vitest"
-import { ResponseInspectorService } from "../response.inspector"
-import { InspectionService } from "../../index"
-import { getDefaultRESTRequest } from "~/helpers/rest/default"
-
-vi.mock("~/modules/i18n", () => ({
-  __esModule: true,
-  getI18n: () => (x: string) => x,
-}))
-
-describe("ResponseInspectorService", () => {
-  it("registers with the inspection service upon initialization", () => {
-    const container = new TestContainer()
-
-    const registerInspectorFn = vi.fn()
-
-    container.bindMock(InspectionService, {
-      registerInspector: registerInspectorFn,
-    })
-
-    const responseInspector = container.bind(ResponseInspectorService)
-
-    expect(registerInspectorFn).toHaveBeenCalledOnce()
-    expect(registerInspectorFn).toHaveBeenCalledWith(responseInspector)
-  })
-
-  describe("getInspectorFor", () => {
-    it("should return an empty array when response is undefined", () => {
-      const container = new TestContainer()
-      const responseInspector = container.bind(ResponseInspectorService)
-
-      const req = {
-        ...getDefaultRESTRequest(),
-        endpoint: "http://example.com/api/data",
-      }
-
-      const result = responseInspector.getInspectorFor(req, undefined)
-
-      expect(result).toHaveLength(0)
-    })
-
-    it("should return an inspector result when response type is not success or status code is not 200", () => {
-      const container = new TestContainer()
-      const responseInspector = container.bind(ResponseInspectorService)
-
-      const req = {
-        ...getDefaultRESTRequest(),
-        endpoint: "http://example.com/api/data",
-      }
-      const res = { type: "network_fail", statusCode: 400 }
-
-      const result = responseInspector.getInspectorFor(req, res)
-
-      expect(result).toContainEqual(
-        expect.objectContaining({ id: "url", isApplicable: true })
-      )
-    })
-
-    it("should handle network_fail responses", () => {
-      const container = new TestContainer()
-      const responseInspector = container.bind(ResponseInspectorService)
-
-      const req = {
-        ...getDefaultRESTRequest(),
-        endpoint: "http://example.com/api/data",
-      }
-      const res = { type: "network_fail", statusCode: 500 }
-
-      const result = responseInspector.getInspectorFor(req, res)
-
-      expect(result).toContainEqual(
-        expect.objectContaining({
-          text: { type: "text", text: "inspections.response.network_error" },
-        })
-      )
-    })
-
-    it("should handle fail responses", () => {
-      const container = new TestContainer()
-      const responseInspector = container.bind(ResponseInspectorService)
-
-      const req = {
-        ...getDefaultRESTRequest(),
-        endpoint: "http://example.com/api/data",
-      }
-      const res = { type: "fail", statusCode: 500 }
-
-      const result = responseInspector.getInspectorFor(req, res)
-
-      expect(result).toContainEqual(
-        expect.objectContaining({
-          text: { type: "text", text: "inspections.response.default_error" },
-        })
-      )
-    })
-
-    it("should handle 404 responses", () => {
-      const container = new TestContainer()
-      const responseInspector = container.bind(ResponseInspectorService)
-
-      const req = {
-        ...getDefaultRESTRequest(),
-        endpoint: "http://example.com/api/data",
-      }
-      const res = { type: "success", statusCode: 404 }
-
-      const result = responseInspector.getInspectorFor(req, res)
-
-      expect(result).toContainEqual(
-        expect.objectContaining({
-          text: { type: "text", text: "inspections.response.404_error" },
-        })
-      )
-    })
-
-    it("should handle 401 responses", () => {
-      const container = new TestContainer()
-      const responseInspector = container.bind(ResponseInspectorService)
-
-      const req = {
-        ...getDefaultRESTRequest(),
-        endpoint: "http://example.com/api/data",
-      }
-      const res = { type: "success", statusCode: 401 }
-
-      const result = responseInspector.getInspectorFor(req, res)
-
-      expect(result).toContainEqual(
-        expect.objectContaining({
-          text: { type: "text", text: "inspections.response.401_error" },
-        })
-      )
-    })
-
-    it("should handle successful responses", () => {
-      const container = new TestContainer()
-      const responseInspector = container.bind(ResponseInspectorService)
-
-      const req = {
-        ...getDefaultRESTRequest(),
-        endpoint: "http://example.com/api/data",
-      }
-      const res = { type: "success", statusCode: 200 }
-
-      const result = responseInspector.getInspectorFor(req, res)
-
-      expect(result).toHaveLength(0)
-    })
-  })
-})

packages/hoppscotch-common/src/services/inspection/inspectors/environment.inspector.ts

@@ -6,11 +6,13 @@ import {
   InspectorResult,
 } from ".."
 import { Service } from "dioc"
-import { Ref, markRaw, ref } from "vue"
+import { Ref, markRaw } from "vue"
 import IconPlusCircle from "~icons/lucide/plus-circle"
 import { HoppRESTRequest } from "@hoppscotch/data"
-import { getAggregateEnvs } from "~/newstore/environments"
+import { aggregateEnvs$ } from "~/newstore/environments"
 import { invokeAction } from "~/helpers/actions"
+import { computed } from "vue"
+import { useStreamStatic } from "~/composables/stream"
 
 const HOPP_ENVIRONMENT_REGEX = /(<<[a-zA-Z0-9-_]+>>)/g
 
@@ -34,6 +36,10 @@ export class EnvironmentInspectorService extends Service implements Inspector {
 
   private readonly inspection = this.bind(InspectionService)
 
+  private aggregateEnvs = useStreamStatic(aggregateEnvs$, [], () => {
+    /* noop */
+  })[0]
+
   constructor() {
     super()
 
@@ -49,11 +55,11 @@ export class EnvironmentInspectorService extends Service implements Inspector {
    */
   private validateEnvironmentVariables = (
     target: any[],
-    results: Ref<InspectorResult[]>,
     locations: InspectorLocation
   ) => {
-    const env = getAggregateEnvs()
+    const newErrors: InspectorResult[] = []
-    const envKeys = env.map((e) => e.key)
+
+    const envKeys = this.aggregateEnvs.value.map((e) => e.key)
 
     target.forEach((element, index) => {
       if (isENVInString(element)) {
@@ -83,7 +89,7 @@ export class EnvironmentInspectorService extends Service implements Inspector {
               }
             }
             if (!envKeys.includes(formattedExEnv)) {
-              results.value.push({
+              newErrors.push({
                 id: "environment",
                 text: {
                   type: "text",
@@ -96,8 +102,8 @@ export class EnvironmentInspectorService extends Service implements Inspector {
                   text: this.t("inspections.environment.add_environment"),
                   apply: () => {
                     invokeAction("modals.environment.add", {
-                      envName: "test",
+                      envName: formattedExEnv,
-                      variableName: formattedExEnv,
+                      variableName: "",
                     })
                   },
                 },
@@ -114,54 +120,61 @@ export class EnvironmentInspectorService extends Service implements Inspector {
         }
       }
     })
+
+    return newErrors
   }
 
-  /**
+  getInspections(req: Readonly<Ref<HoppRESTRequest>>) {
-   * Returns the inspector results for the request
+    return computed(() => {
-   * It checks if any env is used in the request ie, url, headers, params
+      const results: InspectorResult[] = []
-   * and checks if the env is defined in the environment using the validateEnvironmentVariables function
-   * @param req The request to inspect
-   * @returns The inspector results
-   */
-  getInspectorFor(req: HoppRESTRequest): InspectorResult[] {
-    const results = ref<InspectorResult[]>([])
 
-    const headers = req.headers
+      const headers = req.value.headers
 
-    const params = req.params
+      const params = req.value.params
 
-    this.validateEnvironmentVariables([req.endpoint], results, {
+      results.push(
-      type: "url",
+        ...this.validateEnvironmentVariables([req.value.endpoint], {
+          type: "url",
+        })
+      )
+
+      const headerKeys = Object.values(headers).map((header) => header.key)
+
+      results.push(
+        ...this.validateEnvironmentVariables(headerKeys, {
+          type: "header",
+          position: "key",
+        })
+      )
+
+      const headerValues = Object.values(headers).map((header) => header.value)
+
+      results.push(
+        ...this.validateEnvironmentVariables(headerValues, {
+          type: "header",
+          position: "value",
+        })
+      )
+
+      const paramsKeys = Object.values(params).map((param) => param.key)
+
+      results.push(
+        ...this.validateEnvironmentVariables(paramsKeys, {
+          type: "parameter",
+          position: "key",
+        })
+      )
+
+      const paramsValues = Object.values(params).map((param) => param.value)
+
+      results.push(
+        ...this.validateEnvironmentVariables(paramsValues, {
+          type: "parameter",
+          position: "value",
+        })
+      )
+
+      return results
     })
-
-    const headerKeys = Object.values(headers).map((header) => header.key)
-
-    this.validateEnvironmentVariables(headerKeys, results, {
-      type: "header",
-      position: "key",
-    })
-
-    const headerValues = Object.values(headers).map((header) => header.value)
-
-    this.validateEnvironmentVariables(headerValues, results, {
-      type: "header",
-      position: "value",
-    })
-
-    const paramsKeys = Object.values(params).map((param) => param.key)
-
-    this.validateEnvironmentVariables(paramsKeys, results, {
-      type: "parameter",
-      position: "key",
-    })
-
-    const paramsValues = Object.values(params).map((param) => param.value)
-
-    this.validateEnvironmentVariables(paramsValues, results, {
-      type: "parameter",
-      position: "value",
-    })
-
-    return results.value
   }
 }

packages/hoppscotch-common/src/services/inspection/inspectors/header.inspector.ts

@@ -2,7 +2,7 @@ import { Service } from "dioc"
 import { InspectionService, Inspector, InspectorResult } from ".."
 import { getI18n } from "~/modules/i18n"
 import { HoppRESTRequest } from "@hoppscotch/data"
-import { markRaw, ref } from "vue"
+import { Ref, computed, markRaw } from "vue"
 import IconAlertTriangle from "~icons/lucide/alert-triangle"
 
 /**
@@ -26,53 +26,50 @@ export class HeaderInspectorService extends Service implements Inspector {
     this.inspection.registerInspector(this)
   }
 
-  /**
+  private cookiesCheck(headerKey: string) {
-   * Checks if the header contains cookies
+    const cookieKeywords = ["Cookie", "Set-Cookie", "Cookie2", "Set-Cookie2"]
-   * @param req The request to inspect
-   * @returns The inspector results
-   */
-  getInspectorFor(req: HoppRESTRequest): InspectorResult[] {
-    const results = ref<InspectorResult[]>([])
 
-    const cookiesCheck = (headerKey: string) => {
+    return cookieKeywords.includes(headerKey)
-      const cookieKeywords = ["Cookie", "Set-Cookie", "Cookie2", "Set-Cookie2"]
+  }
 
-      return cookieKeywords.includes(headerKey)
+  getInspections(req: Readonly<Ref<HoppRESTRequest>>) {
-    }
+    return computed(() => {
+      const results: InspectorResult[] = []
 
-    const headers = req.headers
+      const headers = req.value.headers
 
-    const headerKeys = Object.values(headers).map((header) => header.key)
+      const headerKeys = Object.values(headers).map((header) => header.key)
 
-    const isContainCookies = headerKeys.includes("Cookie")
+      const isContainCookies = headerKeys.includes("Cookie")
 
-    if (isContainCookies) {
+      if (isContainCookies) {
-      headerKeys.forEach((headerKey, index) => {
+        headerKeys.forEach((headerKey, index) => {
-        if (cookiesCheck(headerKey)) {
+          if (this.cookiesCheck(headerKey)) {
-          results.value.push({
+            results.push({
-            id: "header",
+              id: "header",
-            icon: markRaw(IconAlertTriangle),
+              icon: markRaw(IconAlertTriangle),
-            text: {
+              text: {
-              type: "text",
+                type: "text",
-              text: this.t("inspections.header.cookie"),
+                text: this.t("inspections.header.cookie"),
-            },
+              },
-            severity: 2,
+              severity: 2,
-            isApplicable: true,
+              isApplicable: true,
-            locations: {
+              locations: {
-              type: "header",
+                type: "header",
-              position: "key",
+                position: "key",
-              key: headerKey,
+                key: headerKey,
-              index: index,
+                index: index,
-            },
+              },
-            doc: {
+              doc: {
-              text: this.t("action.learn_more"),
+                text: this.t("action.learn_more"),
-              link: "https://docs.hoppscotch.io/",
+                link: "https://docs.hoppscotch.io/",
-            },
+              },
-          })
+            })
-        }
+          }
-      })
+        })
-    }
+      }
 
-    return results.value
+      return results
+    })
   }
 }

packages/hoppscotch-common/src/services/inspection/inspectors/response.inspector.ts

@@ -2,9 +2,11 @@ import { Service } from "dioc"
 import { InspectionService, Inspector, InspectorResult } from ".."
 import { getI18n } from "~/modules/i18n"
 import { HoppRESTRequest } from "@hoppscotch/data"
-import { markRaw, ref } from "vue"
+import { markRaw } from "vue"
 import IconAlertTriangle from "~icons/lucide/alert-triangle"
 import { HoppRESTResponse } from "~/helpers/types/HoppRESTResponse"
+import { Ref } from "vue"
+import { computed } from "vue"
 
 /**
  * This inspector is responsible for inspecting the response of a request.
@@ -27,47 +29,50 @@ export class ResponseInspectorService extends Service implements Inspector {
     this.inspection.registerInspector(this)
   }
 
-  getInspectorFor(
+  getInspections(
-    req: HoppRESTRequest,
+    _req: Readonly<Ref<HoppRESTRequest>>,
-    res: HoppRESTResponse | undefined
+    res: Readonly<Ref<HoppRESTResponse | null | undefined>>
-  ): InspectorResult[] {
+  ) {
-    const results = ref<InspectorResult[]>([])
+    return computed(() => {
-    if (!res) return results.value
+      const results: InspectorResult[] = []
+      if (!res.value) return results
 
-    const hasErrors = res && (res.type !== "success" || res.statusCode !== 200)
+      const hasErrors =
+        res && (res.value.type !== "success" || res.value.statusCode !== 200)
 
-    let text
+      let text: string | undefined = undefined
 
-    if (res.type === "network_fail") {
+      if (res.value.type === "network_fail" && !navigator.onLine) {
-      text = this.t("inspections.response.network_error")
+        text = this.t("inspections.response.network_error")
-    } else if (res.type === "fail") {
+      } else if (res.value.type === "fail") {
-      text = this.t("inspections.response.default_error")
+        text = this.t("inspections.response.default_error")
-    } else if (res.type === "success" && res.statusCode === 404) {
+      } else if (res.value.type === "success" && res.value.statusCode === 404) {
-      text = this.t("inspections.response.404_error")
+        text = this.t("inspections.response.404_error")
-    } else if (res.type === "success" && res.statusCode === 401) {
+      } else if (res.value.type === "success" && res.value.statusCode === 401) {
-      text = this.t("inspections.response.401_error")
+        text = this.t("inspections.response.401_error")
-    }
+      }
 
-    if (hasErrors && text) {
+      if (hasErrors && text) {
-      results.value.push({
+        results.push({
-        id: "url",
+          id: "url",
-        icon: markRaw(IconAlertTriangle),
+          icon: markRaw(IconAlertTriangle),
-        text: {
+          text: {
-          type: "text",
+            type: "text",
-          text: text,
+            text: text,
-        },
+          },
-        severity: 2,
+          severity: 2,
-        isApplicable: true,
+          isApplicable: true,
-        locations: {
+          locations: {
-          type: "response",
+            type: "response",
-        },
+          },
-        doc: {
+          doc: {
-          text: this.t("action.learn_more"),
+            text: this.t("action.learn_more"),
-          link: "https://docs.hoppscotch.io/",
+            link: "https://docs.hoppscotch.io/",
-        },
+          },
-      })
+        })
-    }
+      }
 
-    return results.value
+      return results
+    })
   }
 }

packages/hoppscotch-common/src/services/inspection/inspectors/url.inspector.ts

@@ -1,96 +0,0 @@
-import { Service } from "dioc"
-import { InspectionService, Inspector, InspectorResult } from ".."
-import { getI18n } from "~/modules/i18n"
-import { HoppRESTRequest } from "@hoppscotch/data"
-import { computed, markRaw, ref } from "vue"
-import IconAlertTriangle from "~icons/lucide/alert-triangle"
-import { useReadonlyStream } from "~/composables/stream"
-import { extensionStatus$ } from "~/newstore/HoppExtension"
-import { useSetting } from "~/composables/settings"
-import { applySetting, toggleSetting } from "~/newstore/settings"
-
-/**
- * This inspector is responsible for inspecting the URL of a request.
- * It checks if the URL contains localhost and if the extension is installed.
- * It also provides an action to enable the extension.
- *
- * NOTE: Initializing this service registers it as a inspector with the Inspection Service.
- */
-export class URLInspectorService extends Service implements Inspector {
-  public static readonly ID = "URL_INSPECTOR_SERVICE"
-
-  private t = getI18n()
-
-  public readonly inspectorID = "url"
-
-  private readonly inspection = this.bind(InspectionService)
-
-  constructor() {
-    super()
-
-    this.inspection.registerInspector(this)
-  }
-
-  getInspectorFor(req: HoppRESTRequest): InspectorResult[] {
-    const PROXY_ENABLED = useSetting("PROXY_ENABLED")
-
-    const currentExtensionStatus = useReadonlyStream(extensionStatus$, null)
-
-    const isExtensionInstalled = computed(() => {
-      return currentExtensionStatus.value === "available"
-    })
-    const EXTENSIONS_ENABLED = useSetting("EXTENSIONS_ENABLED")
-
-    const results = ref<InspectorResult[]>([])
-
-    const url = req.endpoint
-
-    const isContainLocalhost = url.includes("localhost")
-
-    if (
-      isContainLocalhost &&
-      (!EXTENSIONS_ENABLED.value || !isExtensionInstalled.value)
-    ) {
-      let text
-
-      if (!isExtensionInstalled.value) {
-        if (currentExtensionStatus.value === "unknown-origin") {
-          text = this.t("inspections.url.extension_unknown_origin")
-        } else {
-          text = this.t("inspections.url.extension_not_installed")
-        }
-      } else if (!EXTENSIONS_ENABLED.value) {
-        text = this.t("inspections.url.extention_not_enabled")
-      } else {
-        text = this.t("inspections.url.localhost")
-      }
-
-      results.value.push({
-        id: "url",
-        icon: markRaw(IconAlertTriangle),
-        text: {
-          type: "text",
-          text: text,
-        },
-        action: {
-          text: this.t("inspections.url.extention_enable_action"),
-          apply: () => {
-            applySetting("EXTENSIONS_ENABLED", true)
-            if (PROXY_ENABLED.value) toggleSetting("PROXY_ENABLED")
-          },
-        },
-        severity: 2,
-        isApplicable: true,
-        locations: {
-          type: "url",
-        },
-        doc: {
-          text: this.t("action.learn_more"),
-          link: "https://docs.hoppscotch.io/",
-        },
-      })
-    }
-
-    return results.value
-  }
-}

packages/hoppscotch-common/src/services/spotlight/searchers/base/static.searcher.ts

@@ -91,8 +91,9 @@ export abstract class StaticSpotlightSearcherService<
   private async addDocsToSearchIndex() {
     this.loading.value = true
 
-    this.minisearch.removeAll()
+    this.minisearch = new MiniSearch({
-    this.minisearch.vacuum()
+      fields: this.opts.searchFields as string[],
+    })
 
     await this.minisearch.addAllAsync(
       Object.entries(this._documents).map(([id, doc]) => ({

packages/hoppscotch-common/src/services/spotlight/searchers/collections.searcher.ts

@@ -1,5 +1,6 @@
 import { Service } from "dioc"
 import {
+  SpotlightResultTextType,
   SpotlightSearcher,
   SpotlightSearcherResult,
   SpotlightSearcherSessionState,
@@ -26,6 +27,7 @@ import {
 } from "@hoppscotch/data"
 import { hoppWorkspaceStore } from "~/newstore/workspace"
 import { changeWorkspace } from "~/newstore/workspace"
+import { invokeAction } from "~/helpers/actions"
 
 /**
  * A spotlight searcher that searches through the user's collections
@@ -143,6 +145,13 @@ export class CollectionsSpotlightSearcherService
       },
     })
 
+    if (pageCategory === "rest" || pageCategory === "graphql") {
+      minisearch.add({
+        id: `create-collection`,
+        name: this.t("collection.new"),
+      })
+    }
+
     if (pageCategory === "rest") {
       this.loadRESTDocsIntoMinisearch(minisearch)
     } else if (pageCategory === "graphql") {
@@ -153,6 +162,11 @@ export class CollectionsSpotlightSearcherService
 
     const scopeHandle = effectScope()
 
+    const newCollectionText: SpotlightResultTextType<any> = {
+      type: "text",
+      text: this.t("collection.new"),
+    }
+
     scopeHandle.run(() => {
       watch(query, (query) => {
         if (pageCategory === "other") {
@@ -165,28 +179,34 @@ export class CollectionsSpotlightSearcherService
 
           results.value = searchResults.map((result) => ({
             id: result.id,
-            text: {
+            text:
-              type: "custom",
+              result.id === "create-collection"
-              component: markRaw(RESTRequestSpotlightEntry),
+                ? newCollectionText
-              componentProps: {
+                : {
-                folderPath: result.id.split("rest-")[1],
+                    type: "custom",
-              },
+                    component: markRaw(RESTRequestSpotlightEntry),
-            },
+                    componentProps: {
+                      folderPath: result.id.split("rest-")[1],
+                    },
+                  },
             icon: markRaw(IconFolder),
             score: result.score,
           }))
-        } else {
+        } else if (pageCategory === "graphql") {
           const searchResults = minisearch.search(query).slice(0, 10)
 
           results.value = searchResults.map((result) => ({
             id: result.id,
-            text: {
+            text:
-              type: "custom",
+              result.id === "create-collection"
-              component: markRaw(GQLRequestSpotlightEntry),
+                ? newCollectionText
-              componentProps: {
+                : {
-                folderPath: result.id.split("gql-")[1],
+                    type: "custom",
-              },
+                    component: markRaw(GQLRequestSpotlightEntry),
-            },
+                    componentProps: {
+                      folderPath: result.id.split("gql-")[1],
+                    },
+                  },
             icon: markRaw(IconFolder),
             score: result.score,
           }))
@@ -256,6 +276,8 @@ export class CollectionsSpotlightSearcherService
   }
 
   public onResultSelect(result: SpotlightSearcherResult): void {
+    if (result.id === "create-collection") return invokeAction("collection.new")
+
     const [type, path] = result.id.split("-")
 
     if (type === "rest") {
@@ -304,13 +326,15 @@ export class CollectionsSpotlightSearcherService
 
       if (!req) return
 
-      createNewGQLTab(
+      createNewGQLTab({
-        {
+        saveContext: {
-          request: req,
+          originLocation: "user-collection",
-          isDirty: false,
+          folderPath: folderPath.join("/"),
+          requestIndex: reqIndex,
         },
-        true
+        request: req,
-      )
+        isDirty: false,
+      })
     }
   }
 }

packages/hoppscotch-common/src/services/spotlight/searchers/environment.searcher.ts

@@ -21,33 +21,35 @@ import {
   StaticSpotlightSearcherService,
 } from "./base/static.searcher"
 
-import IconEdit from "~icons/lucide/edit"
-import IconTrash2 from "~icons/lucide/trash-2"
 import IconCopy from "~icons/lucide/copy"
+import IconEdit from "~icons/lucide/edit"
 import IconLayers from "~icons/lucide/layers"
+import IconTrash2 from "~icons/lucide/trash-2"
 
+import { Service } from "dioc"
+import * as TE from "fp-ts/TaskEither"
+import { pipe } from "fp-ts/function"
+import { cloneDeep } from "lodash-es"
+import MiniSearch from "minisearch"
+import { map } from "rxjs"
 import { useStreamStatic } from "~/composables/stream"
+import { GQLError } from "~/helpers/backend/GQLClient"
+import { deleteTeamEnvironment } from "~/helpers/backend/mutations/TeamEnvironment"
 import {
   createEnvironment,
   currentEnvironment$,
-  deleteEnvironment,
   duplicateEnvironment,
   environmentsStore,
   getGlobalVariables,
   selectedEnvironmentIndex$,
   setSelectedEnvironmentIndex,
 } from "~/newstore/environments"
-import { pipe } from "fp-ts/function"
+
-import * as TE from "fp-ts/TaskEither"
+import IconCheckCircle from "~/components/app/spotlight/entry/IconSelected.vue"
-import { deleteTeamEnvironment } from "~/helpers/backend/mutations/TeamEnvironment"
+import IconCircle from "~icons/lucide/circle"
-import { GQLError } from "~/helpers/backend/GQLClient"
-import { cloneDeep } from "lodash-es"
-import { Service } from "dioc"
-import MiniSearch from "minisearch"
-import { map } from "rxjs"
 
 type Doc = {
-  text: string
+  text: string | string[]
   alternates: string[]
   icon: object | Component
   excludeFromSearch?: boolean
@@ -89,40 +91,61 @@ export class EnvironmentsSpotlightSearcherService extends StaticSpotlightSearche
 
   private documents: Record<string, Doc> = reactive({
     new_environment: {
-      text: this.t("spotlight.environments.new"),
+      text: [
+        this.t("spotlight.environments.title"),
+        this.t("spotlight.environments.new"),
+      ],
       alternates: ["new", "environment"],
       icon: markRaw(IconLayers),
     },
     new_environment_variable: {
-      text: this.t("spotlight.environments.new_variable"),
+      text: [
+        this.t("spotlight.environments.title"),
+        this.t("spotlight.environments.new_variable"),
+      ],
       alternates: ["new", "environment", "variable"],
       icon: markRaw(IconLayers),
     },
     edit_selected_env: {
-      text: this.t("spotlight.environments.edit"),
+      text: [
+        this.t("spotlight.environments.title"),
+        this.t("spotlight.environments.edit"),
+      ],
       alternates: ["edit", "environment"],
       icon: markRaw(IconEdit),
       excludeFromSearch: computed(() => !this.hasSelectedEnv.value),
     },
     delete_selected_env: {
-      text: this.t("spotlight.environments.delete"),
+      text: [
+        this.t("spotlight.environments.title"),
+        this.t("spotlight.environments.delete"),
+      ],
       alternates: ["delete", "environment"],
       icon: markRaw(IconTrash2),
       excludeFromSearch: computed(() => !this.hasSelectedEnv.value),
     },
     duplicate_selected_env: {
-      text: this.t("spotlight.environments.duplicate"),
+      text: [
+        this.t("spotlight.environments.title"),
+        this.t("spotlight.environments.duplicate"),
+      ],
       alternates: ["duplicate", "environment"],
       icon: markRaw(IconCopy),
       excludeFromSearch: computed(() => !this.hasSelectedEnv.value),
     },
     edit_global_env: {
-      text: this.t("spotlight.environments.edit_global"),
+      text: [
+        this.t("spotlight.environments.title"),
+        this.t("spotlight.environments.edit_global"),
+      ],
       alternates: ["edit", "global", "environment"],
       icon: markRaw(IconEdit),
     },
     duplicate_global_env: {
-      text: this.t("spotlight.environments.duplicate_global"),
+      text: [
+        this.t("spotlight.environments.title"),
+        this.t("spotlight.environments.duplicate_global"),
+      ],
       alternates: ["duplicate", "global", "environment"],
       icon: markRaw(IconCopy),
     },
@@ -188,29 +211,6 @@ export class EnvironmentsSpotlightSearcherService extends StaticSpotlightSearche
     }
   }
 
-  removeSelectedEnvironment = () => {
-    if (this.selectedEnvIndex.value?.type === "NO_ENV_SELECTED") return
-
-    if (this.selectedEnvIndex.value?.type === "MY_ENV") {
-      deleteEnvironment(this.selectedEnvIndex.value.index)
-      // this.toast.success(`${t("state.deleted")}`)
-    }
-
-    if (this.selectedEnvIndex.value?.type === "TEAM_ENV") {
-      pipe(
-        deleteTeamEnvironment(this.selectedEnvIndex.value.teamEnvID),
-        TE.match(
-          (err: GQLError<string>) => {
-            console.error(err)
-          },
-          () => {
-            // this.toast.success(`${this.t("team_environment.deleted")}`)
-          }
-        )
-      )()
-    }
-  }
-
   public onDocSelected(id: string): void {
     switch (id) {
       case "new_environment":
@@ -229,7 +229,7 @@ export class EnvironmentsSpotlightSearcherService extends StaticSpotlightSearche
           })
         break
       case "delete_selected_env":
-        this.removeSelectedEnvironment()
+        invokeAction(`modals.environment.delete-selected`)
         break
       case "duplicate_selected_env":
         this.duplicateSelectedEnv()
@@ -269,6 +269,16 @@ export class SwitchEnvSpotlightSearcherService
     this.spotlight.registerSearcher(this)
   }
 
+  private selectedEnvIndex = useStreamStatic(
+    selectedEnvironmentIndex$,
+    {
+      type: "NO_ENV_SELECTED",
+    },
+    () => {
+      /* noop */
+    }
+  )[0]
+
   private environmentSearchable = useStreamStatic(
     activeActions$.pipe(
       map((actions) => actions.includes("modals.environment.add"))
@@ -286,16 +296,25 @@ export class SwitchEnvSpotlightSearcherService
     const results = ref<SpotlightSearcherResult[]>([])
 
     const minisearch = new MiniSearch({
-      fields: ["name"],
+      fields: ["name", "alternates"],
       storeFields: ["name"],
     })
 
     if (this.environmentSearchable.value) {
       minisearch.addAll(
         environmentsStore.value.environments.map((entry, index) => {
+          let id = `environment-${index}`
+
+          if (
+            this.selectedEnvIndex.value?.type === "MY_ENV" &&
+            this.selectedEnvIndex.value.index === index
+          ) {
+            id += "-selected"
+          }
           return {
-            id: `environment-${index}`,
+            id,
             name: entry.name,
+            alternates: ["environment", "change", entry.name],
           }
         })
       )
@@ -322,7 +341,9 @@ export class SwitchEnvSpotlightSearcherService
             .map((x) => {
               return {
                 id: x.id,
-                icon: markRaw(IconLayers),
+                icon: markRaw(
+                  x.id.endsWith("-selected") ? IconCheckCircle : IconCircle
+                ),
                 score: x.score,
                 text: {
                   type: "text",

packages/hoppscotch-common/src/services/spotlight/searchers/general.searcher.ts

@@ -7,16 +7,19 @@ import {
   StaticSpotlightSearcherService,
 } from "./base/static.searcher"
 
+import IconLinkedIn from "~icons/brands/linkedin"
+import IconTwitter from "~icons/brands/twitter"
+import IconDiscord from "~icons/brands/discord"
+import IconGitHub from "~icons/lucide/github"
 import IconBook from "~icons/lucide/book"
-import IconGithub from "~icons/lucide/github"
 import IconLifeBuoy from "~icons/lucide/life-buoy"
-import IconMessageCircle from "~icons/lucide/message-circle"
 import IconZap from "~icons/lucide/zap"
 
 type Doc = {
-  text: string
+  text: string | string[]
   alternates: string[]
   icon: object | Component
+  action: () => void
 }
 
 /**
@@ -40,26 +43,48 @@ export class GeneralSpotlightSearcherService extends StaticSpotlightSearcherServ
       text: this.t("spotlight.general.help_menu"),
       alternates: ["help", "hoppscotch"],
       icon: markRaw(IconLifeBuoy),
-    },
+      action() {
-    chat_with_support: {
+        invokeAction("modals.support.toggle")
-      text: this.t("spotlight.general.chat"),
+      },
-      alternates: ["chat", "support", "hoppscotch"],
-      icon: markRaw(IconMessageCircle),
     },
     open_docs: {
       text: this.t("spotlight.general.open_docs"),
       alternates: ["docs", "documentation", "hoppscotch"],
       icon: markRaw(IconBook),
+      action: () => this.openURL("https://docs.hoppscotch.io"),
     },
     open_keybindings: {
       text: this.t("spotlight.general.open_keybindings"),
       alternates: ["key", "shortcuts", "binding"],
       icon: markRaw(IconZap),
+      action() {
+        invokeAction("flyouts.keybinds.toggle")
+      },
     },
-    social_links: {
+    open_github: {
-      text: this.t("spotlight.general.social"),
+      text: this.t("spotlight.general.open_github"),
-      alternates: ["social", "github", "binding"],
+      alternates: ["repository", "github", "documentation", "hoppscotch"],
-      icon: markRaw(IconGithub),
+      icon: markRaw(IconGitHub),
+      action: () => this.openURL("https://hoppscotch.io/github"),
+    },
+    link_twitter: {
+      text: [this.t("spotlight.general.social"), "Twitter"],
+      alternates: ["social", "twitter", "link"],
+      icon: markRaw(IconTwitter),
+      action: () => this.openURL("https://twitter.com/hoppscotch_io"),
+    },
+    link_discord: {
+      text: [this.t("spotlight.general.social"), "Discord"],
+      alternates: ["social", "discord", "link"],
+      icon: markRaw(IconDiscord),
+      action: () => this.openURL("https://hoppscotch.io/discord"),
+    },
+    link_linkedin: {
+      text: [this.t("spotlight.general.social"), "LinkedIn"],
+      alternates: ["social", "linkedin", "link"],
+      icon: markRaw(IconLinkedIn),
+      action: () =>
+        this.openURL("https://www.linkedin.com/company/hoppscotch/"),
     },
   })
 
@@ -87,28 +112,16 @@ export class GeneralSpotlightSearcherService extends StaticSpotlightSearcherServ
     }
   }
 
-  private openDocs() {
+  private openURL(url: string) {
-    const url = "https://docs.hoppscotch.io"
     window.open(url, "_blank")
   }
 
   public onDocSelected(id: string): void {
-    switch (id) {
+    this.documents[id]?.action()
-      case "open_help":
+  }
-        invokeAction("modals.support.toggle")
+
-        break
+  public addCustomEntries(docs: Record<string, Doc>) {
-      case "chat_with_support":
+    this.documents = { ...this.documents, ...docs }
-        invokeAction("flyouts.chat.open")
+    this.setDocuments(this.documents)
-        break
-      case "open_docs":
-        this.openDocs()
-        break
-      case "open_keybindings":
-        invokeAction("flyouts.keybinds.toggle")
-        break
-      case "social_links":
-        invokeAction("modals.social.toggle")
-        break
-    }
   }
 }

packages/hoppscotch-common/src/services/spotlight/searchers/interceptor.searcher.ts

@@ -0,0 +1,126 @@
+import { Ref, computed, effectScope, markRaw, ref, unref, watch } from "vue"
+import { getI18n } from "~/modules/i18n"
+import {
+  SpotlightSearcher,
+  SpotlightSearcherResult,
+  SpotlightSearcherSessionState,
+  SpotlightService,
+} from ".."
+
+import { Service } from "dioc"
+import { useService } from "dioc/vue"
+import MiniSearch from "minisearch"
+import IconCheckCircle from "~/components/app/spotlight/entry/IconSelected.vue"
+import { InterceptorService } from "~/services/interceptor.service"
+import IconCircle from "~icons/lucide/circle"
+
+/**
+ * This searcher is responsible for searching through the interceptor.
+ * And switching between them.
+ */
+export class InterceptorSpotlightSearcherService
+  extends Service
+  implements SpotlightSearcher
+{
+  public static readonly ID = "INTERCEPTOR_SPOTLIGHT_SEARCHER_SERVICE"
+
+  private t = getI18n()
+
+  public searcherID = "interceptor"
+  public searcherSectionTitle = this.t("settings.interceptor")
+
+  private readonly spotlight = this.bind(SpotlightService)
+
+  constructor() {
+    super()
+
+    this.spotlight.registerSearcher(this)
+  }
+
+  private interceptorService = useService(InterceptorService)
+
+  createSearchSession(
+    query: Readonly<Ref<string>>
+  ): [Ref<SpotlightSearcherSessionState>, () => void] {
+    const loading = ref(false)
+    const results = ref<SpotlightSearcherResult[]>([])
+
+    const minisearch = new MiniSearch({
+      fields: ["name", "alternates"],
+      storeFields: ["name"],
+    })
+
+    const interceptorSelection = this.interceptorService
+      .currentInterceptorID as Ref<string>
+
+    const interceptors = this.interceptorService.availableInterceptors
+
+    minisearch.addAll(
+      interceptors.value.map((entry) => {
+        let id = `interceptor-${entry.interceptorID}`
+        if (entry.interceptorID === interceptorSelection.value) {
+          id += "-selected"
+        }
+        const name = unref(entry.name(this.t))
+        return {
+          id,
+          name,
+          alternates: ["interceptor", "change", name],
+        }
+      })
+    )
+
+    const scopeHandle = effectScope()
+
+    scopeHandle.run(() => {
+      watch(
+        [query],
+        ([query]) => {
+          results.value = minisearch
+            .search(query, {
+              prefix: true,
+              fuzzy: true,
+              boost: {
+                reltime: 2,
+              },
+              weights: {
+                fuzzy: 0.2,
+                prefix: 0.8,
+              },
+            })
+            .map((x) => {
+              return {
+                id: x.id,
+                icon: markRaw(
+                  x.id.endsWith("-selected") ? IconCheckCircle : IconCircle
+                ),
+                score: x.score,
+                text: {
+                  type: "text",
+                  text: [this.t("spotlight.section.interceptor"), x.name],
+                },
+              }
+            })
+        },
+        { immediate: true }
+      )
+    })
+
+    const onSessionEnd = () => {
+      scopeHandle.stop()
+      minisearch.removeAll()
+    }
+
+    const resultObj = computed<SpotlightSearcherSessionState>(() => ({
+      loading: loading.value,
+      results: results.value,
+    }))
+
+    return [resultObj, onSessionEnd]
+  }
+
+  onResultSelect(result: SpotlightSearcherResult): void {
+    const selectedInterceptor = result.id.split("-")[1]
+    this.interceptorService.currentInterceptorID.value = selectedInterceptor
+  }
+}

packages/hoppscotch-common/src/services/spotlight/searchers/request.searcher.ts

@@ -1,5 +1,5 @@
-import { Component, markRaw, reactive } from "vue"
+import { Component, computed, markRaw, reactive } from "vue"
-import { invokeAction } from "~/helpers/actions"
+import { invokeAction, isActionBound } from "~/helpers/actions"
 import { getI18n } from "~/modules/i18n"
 import { SpotlightSearcherResult, SpotlightService } from ".."
 import {
@@ -7,12 +7,11 @@ import {
   StaticSpotlightSearcherService,
 } from "./base/static.searcher"
 
+import { useRoute } from "vue-router"
 import { RequestOptionTabs } from "~/components/http/RequestOptions.vue"
 import { currentActiveTab } from "~/helpers/rest/tab"
 import IconWindow from "~icons/lucide/app-window"
-import IconCheck from "~icons/lucide/check"
+import IconCheckCircle from "~icons/lucide/check-circle"
-import IconChevronLeft from "~icons/lucide/chevron-left"
-import IconChevronRight from "~icons/lucide/chevron-right"
 import IconCode2 from "~icons/lucide/code-2"
 import IconCopy from "~icons/lucide/copy"
 import IconFileCode from "~icons/lucide/file-code"
@@ -20,11 +19,13 @@ import IconRename from "~icons/lucide/file-edit"
 import IconPlay from "~icons/lucide/play"
 import IconRotateCCW from "~icons/lucide/rotate-ccw"
 import IconSave from "~icons/lucide/save"
+import { GQLOptionTabs } from "~/components/graphql/RequestOptions.vue"
 
 type Doc = {
   text: string | string[]
   alternates: string[]
   icon: object | Component
+  excludeFromSearch?: boolean
 }
 
 /**
@@ -43,116 +44,182 @@ export class RequestSpotlightSearcherService extends StaticSpotlightSearcherServ
 
   private readonly spotlight = this.bind(SpotlightService)
 
+  private route = useRoute()
+  private isRESTPage = computed(() => this.route.name === "index")
+  private isGQLPage = computed(() => this.route.name === "graphql")
+  private isRESTOrGQLPage = computed(
+    () => this.isRESTPage.value || this.isGQLPage.value
+  )
+  private isGQLConnectBound = isActionBound("gql.connect")
+  private isGQLDisconnectBound = isActionBound("gql.disconnect")
+
   private documents: Record<string, Doc> = reactive({
     send_request: {
       text: this.t("shortcut.request.send_request"),
       alternates: ["request", "send"],
       icon: markRaw(IconPlay),
+      excludeFromSearch: computed(() => !this.isRESTOrGQLPage.value),
+    },
+    gql_connect: {
+      text: [this.t("navigation.graphql"), this.t("spotlight.graphql.connect")],
+      alternates: ["connect", "server", "graphql"],
+      icon: markRaw(IconPlay),
+      excludeFromSearch: computed(() => !this.isGQLConnectBound.value),
+    },
+    gql_disconnect: {
+      text: [
+        this.t("navigation.graphql"),
+        this.t("spotlight.graphql.disconnect"),
+      ],
+      alternates: ["disconnect", "stop", "graphql"],
+      icon: markRaw(IconPlay),
+      excludeFromSearch: computed(() => !this.isGQLDisconnectBound.value),
     },
     save_to_collections: {
-      text: [
+      text: this.t("spotlight.request.save_as_new"),
-        this.t("request.save_as"),
-        this.t("shortcut.request.save_to_collections"),
-      ],
       alternates: ["save", "collections"],
       icon: markRaw(IconSave),
+      excludeFromSearch: computed(() => !this.isRESTOrGQLPage.value),
     },
     save_request: {
       text: this.t("shortcut.request.save_request"),
       alternates: ["save", "request"],
       icon: markRaw(IconSave),
+      excludeFromSearch: computed(() => !this.isRESTOrGQLPage.value),
     },
     rename_request: {
       text: this.t("shortcut.request.rename"),
       alternates: ["rename", "request"],
       icon: markRaw(IconRename),
+      excludeFromSearch: computed(() => !this.isRESTOrGQLPage.value),
     },
     copy_request_link: {
       text: this.t("shortcut.request.copy_request_link"),
       alternates: ["copy", "link"],
       icon: markRaw(IconCopy),
+      excludeFromSearch: computed(() => !this.isRESTPage.value),
     },
     reset_request: {
       text: this.t("shortcut.request.reset_request"),
       alternates: ["reset", "request"],
       icon: markRaw(IconRotateCCW),
+      excludeFromSearch: computed(() => !this.isRESTOrGQLPage.value),
     },
     import_curl: {
       text: this.t("shortcut.request.import_curl"),
       alternates: ["import", "curl"],
       icon: markRaw(IconFileCode),
+      excludeFromSearch: computed(() => !this.isRESTPage.value),
     },
     show_code: {
       text: this.t("shortcut.request.show_code"),
       alternates: ["show", "code"],
       icon: markRaw(IconCode2),
+      excludeFromSearch: computed(() => !this.isRESTPage.value),
     },
     // Change request method
-    next_method: {
-      text: this.t("shortcut.request.next_method"),
-      alternates: ["next", "method"],
-      icon: markRaw(IconChevronRight),
-    },
-    previous_method: {
-      text: this.t("shortcut.request.previous_method"),
-      alternates: ["previous", "method"],
-      icon: markRaw(IconChevronLeft),
-    },
     get_method: {
-      text: this.t("shortcut.request.get_method"),
+      text: [this.t("spotlight.request.select_method"), "GET"],
       alternates: ["get", "method"],
-      icon: markRaw(IconCheck),
+      icon: markRaw(IconCheckCircle),
+      excludeFromSearch: computed(() => !this.isRESTPage.value),
     },
     head_method: {
-      text: this.t("shortcut.request.head_method"),
+      text: [this.t("spotlight.request.select_method"), "HEAD"],
       alternates: ["head", "method"],
-      icon: markRaw(IconCheck),
+      icon: markRaw(IconCheckCircle),
+      excludeFromSearch: computed(() => !this.isRESTPage.value),
     },
     post_method: {
-      text: this.t("shortcut.request.post_method"),
+      text: [this.t("spotlight.request.select_method"), "POST"],
       alternates: ["post", "method"],
-      icon: markRaw(IconCheck),
+      icon: markRaw(IconCheckCircle),
+      excludeFromSearch: computed(() => !this.isRESTPage.value),
     },
     put_method: {
-      text: this.t("shortcut.request.put_method"),
+      text: [this.t("spotlight.request.select_method"), "PUT"],
       alternates: ["put", "method"],
-      icon: markRaw(IconCheck),
+      icon: markRaw(IconCheckCircle),
+      excludeFromSearch: computed(() => !this.isRESTPage.value),
     },
     delete_method: {
-      text: this.t("shortcut.request.delete_method"),
+      text: [this.t("spotlight.request.select_method"), "DELETE"],
       alternates: ["delete", "method"],
-      icon: markRaw(IconCheck),
+      icon: markRaw(IconCheckCircle),
+      excludeFromSearch: computed(() => !this.isRESTPage.value),
     },
     // Change sub tabs
     tab_parameters: {
-      text: this.t("spotlight.request.tab_parameters"),
+      text: [
+        this.t("spotlight.request.switch_to"),
+        this.t("spotlight.request.tab_parameters"),
+      ],
       alternates: ["parameters", "tab"],
       icon: markRaw(IconWindow),
+      excludeFromSearch: computed(() => !this.isRESTOrGQLPage.value),
     },
     tab_body: {
-      text: this.t("spotlight.request.tab_body"),
+      text: [
+        this.t("spotlight.request.switch_to"),
+        this.t("spotlight.request.tab_body"),
+      ],
       alternates: ["body", "tab"],
       icon: markRaw(IconWindow),
+      excludeFromSearch: computed(() => !this.isRESTOrGQLPage.value),
     },
     tab_headers: {
-      text: this.t("spotlight.request.tab_headers"),
+      text: [
+        this.t("spotlight.request.switch_to"),
+        this.t("spotlight.request.tab_headers"),
+      ],
       alternates: ["headers", "tab"],
       icon: markRaw(IconWindow),
+      excludeFromSearch: computed(() => !this.isRESTOrGQLPage.value),
     },
     tab_authorization: {
-      text: this.t("spotlight.request.tab_authorization"),
+      text: [
+        this.t("spotlight.request.switch_to"),
+        this.t("spotlight.request.tab_authorization"),
+      ],
       alternates: ["authorization", "tab"],
       icon: markRaw(IconWindow),
+      excludeFromSearch: computed(() => !this.isRESTOrGQLPage.value),
     },
     tab_pre_request_script: {
-      text: this.t("spotlight.request.tab_pre_request_script"),
+      text: [
+        this.t("spotlight.request.switch_to"),
+        this.t("spotlight.request.tab_pre_request_script"),
+      ],
       alternates: ["pre-request", "script", "tab"],
       icon: markRaw(IconWindow),
+      excludeFromSearch: computed(() => !this.isRESTPage.value),
     },
     tab_tests: {
-      text: this.t("spotlight.request.tab_tests"),
+      text: [
+        this.t("spotlight.request.switch_to"),
+        this.t("spotlight.request.tab_tests"),
+      ],
       alternates: ["tests", "tab"],
       icon: markRaw(IconWindow),
+      excludeFromSearch: computed(() => !this.isRESTPage.value),
+    },
+    tab_query: {
+      text: [
+        this.t("spotlight.request.switch_to"),
+        this.t("spotlight.request.tab_query"),
+      ],
+      alternates: ["query", "tab"],
+      icon: markRaw(IconWindow),
+      excludeFromSearch: computed(() => !this.isGQLPage.value),
+    },
+    tab_variables: {
+      text: [
+        this.t("spotlight.request.switch_to"),
+        this.t("spotlight.request.tab_variables"),
+      ],
+      alternates: ["variables", "tab"],
+      icon: markRaw(IconWindow),
+      excludeFromSearch: computed(() => !this.isGQLPage.value),
     },
   })
 
@@ -180,7 +247,7 @@ export class RequestSpotlightSearcherService extends StaticSpotlightSearcherServ
     }
   }
 
-  private openRequestTab(tab: RequestOptionTabs): void {
+  private openRequestTab(tab: RequestOptionTabs | GQLOptionTabs): void {
     invokeAction("request.open-tab", {
       tab,
     })
@@ -191,6 +258,12 @@ export class RequestSpotlightSearcherService extends StaticSpotlightSearcherServ
       case "send_request":
         invokeAction("request.send-cancel")
         break
+      case "gql_connect":
+        invokeAction("gql.connect")
+        break
+      case "gql_disconnect":
+        invokeAction("gql.disconnect")
+        break
       case "save_to_collections":
         invokeAction("request.save-as", {
           requestType: "rest",
@@ -201,7 +274,7 @@ export class RequestSpotlightSearcherService extends StaticSpotlightSearcherServ
         invokeAction("request.save")
         break
       case "rename_request":
-        invokeAction("rest.request.rename")
+        invokeAction("request.rename")
         break
       case "copy_request_link":
         invokeAction("request.copy-link")
@@ -209,12 +282,6 @@ export class RequestSpotlightSearcherService extends StaticSpotlightSearcherServ
       case "reset_request":
         invokeAction("request.reset")
         break
-      case "next_method":
-        invokeAction("request.method.next")
-        break
-      case "previous_method":
-        invokeAction("request.method.prev")
-        break
       case "get_method":
         invokeAction("request.method.get")
         break
@@ -254,6 +321,12 @@ export class RequestSpotlightSearcherService extends StaticSpotlightSearcherServ
       case "tab_tests":
         this.openRequestTab("tests")
         break
+      case "tab_query":
+        this.openRequestTab("query")
+        break
+      case "tab_variables":
+        this.openRequestTab("variables")
+        break
     }
   }
 }

packages/hoppscotch-common/src/services/spotlight/searchers/response.searcher.ts

@@ -1,5 +1,5 @@
 import { Component, computed, markRaw, reactive } from "vue"
-import { activeActions$, invokeAction } from "~/helpers/actions"
+import { invokeAction, isActionBound } from "~/helpers/actions"
 import { getI18n } from "~/modules/i18n"
 import { SpotlightSearcherResult, SpotlightService } from ".."
 import {
@@ -9,8 +9,6 @@ import {
 
 import IconDownload from "~icons/lucide/download"
 import IconCopy from "~icons/lucide/copy"
-import { map } from "rxjs"
-import { useStreamStatic } from "~/composables/stream"
 
 type Doc = {
   text: string
@@ -35,23 +33,11 @@ export class ResponseSpotlightSearcherService extends StaticSpotlightSearcherSer
 
   private readonly spotlight = this.bind(SpotlightService)
 
-  private copyResponseActionEnabled = useStreamStatic(
+  private copyResponseActionEnabled = isActionBound("response.copy")
-    activeActions$.pipe(map((actions) => actions.includes("response.copy"))),
-    activeActions$.value.includes("response.copy"),
-    () => {
-      /* noop */
-    }
-  )[0]
 
-  private downloadResponseActionEnabled = useStreamStatic(
+  private downloadResponseActionEnabled = isActionBound(
-    activeActions$.pipe(
+    "response.file.download"
-      map((actions) => actions.includes("response.file.download"))
+  )
-    ),
-    activeActions$.value.includes("response.file.download"),
-    () => {
-      /* noop */
-    }
-  )[0]
 
   private documents: Record<string, Doc> = reactive({
     copy_response: {

packages/hoppscotch-common/src/services/spotlight/searchers/settings.searcher.ts

@@ -10,16 +10,15 @@ import {
 } from "./base/static.searcher"
 
 import IconCloud from "~icons/lucide/cloud"
+import IconGlobe from "~icons/lucide/globe"
 import IconMonitor from "~icons/lucide/monitor"
 import IconMoon from "~icons/lucide/moon"
 import IconSun from "~icons/lucide/sun"
-import IconGlobe from "~icons/lucide/globe"
+import IconCircle from "~icons/lucide/circle"
-import IconShieldCheck from "~icons/lucide/shield-check"
+import IconCheckCircle from "~icons/lucide/check-circle"
-import IconType from "~icons/lucide/type"
 
 type Doc = {
   text: string | string[]
-  excludeFromSearch?: boolean
   alternates: string[]
   icon: object | Component
 }
@@ -36,6 +35,7 @@ export class SettingsSpotlightSearcherService extends StaticSpotlightSearcherSer
   private t = getI18n()
 
   private activeFontSize = useSetting("FONT_SIZE")
+  private activeTheme = useSetting("BG_COLOR")
 
   public readonly searcherID = "settings"
   public searcherSectionTitle = this.t("navigation.settings")
@@ -49,7 +49,11 @@ export class SettingsSpotlightSearcherService extends StaticSpotlightSearcherSer
         this.t("spotlight.settings.theme.system"),
       ],
       alternates: ["theme"],
-      icon: markRaw(IconMonitor),
+      icon: computed(() =>
+        this.activeTheme.value === "system"
+          ? markRaw(IconCheckCircle)
+          : markRaw(IconMonitor)
+      ),
     },
     theme_light: {
       text: [
@@ -57,7 +61,11 @@ export class SettingsSpotlightSearcherService extends StaticSpotlightSearcherSer
         this.t("spotlight.settings.theme.light"),
       ],
       alternates: ["theme"],
-      icon: markRaw(IconSun),
+      icon: computed(() =>
+        this.activeTheme.value === "light"
+          ? markRaw(IconCheckCircle)
+          : markRaw(IconSun)
+      ),
     },
     theme_dark: {
       text: [
@@ -65,7 +73,11 @@ export class SettingsSpotlightSearcherService extends StaticSpotlightSearcherSer
         this.t("spotlight.settings.theme.dark"),
       ],
       alternates: ["theme"],
-      icon: markRaw(IconCloud),
+      icon: computed(() =>
+        this.activeTheme.value === "dark"
+          ? markRaw(IconCheckCircle)
+          : markRaw(IconCloud)
+      ),
     },
     theme_black: {
       text: [
@@ -73,7 +85,11 @@ export class SettingsSpotlightSearcherService extends StaticSpotlightSearcherSer
         this.t("spotlight.settings.theme.black"),
       ],
       alternates: ["theme"],
-      icon: markRaw(IconMoon),
+      icon: computed(() =>
+        this.activeTheme.value === "black"
+          ? markRaw(IconCheckCircle)
+          : markRaw(IconMoon)
+      ),
     },
     font_size_sm: {
       text: [
@@ -83,42 +99,51 @@ export class SettingsSpotlightSearcherService extends StaticSpotlightSearcherSer
       onClick: () => {
         console.log("clicked")
       },
-      excludeFromSearch: computed(() => this.activeFontSize.value === "small"),
       alternates: [
         "font size",
         "change font size",
         "change font",
         "increase font",
       ],
-      icon: markRaw(IconType),
+      icon: computed(() =>
+        this.activeFontSize.value === "small"
+          ? markRaw(IconCheckCircle)
+          : markRaw(IconCircle)
+      ),
     },
     font_size_md: {
       text: [
         this.t("settings.font_size"),
         this.t("spotlight.settings.font.size_md"),
       ],
-      excludeFromSearch: computed(() => this.activeFontSize.value === "medium"),
       alternates: [
         "font size",
         "change font size",
         "change font",
         "increase font",
       ],
-      icon: markRaw(IconType),
+      icon: computed(() =>
+        this.activeFontSize.value === "medium"
+          ? markRaw(IconCheckCircle)
+          : markRaw(IconCircle)
+      ),
     },
     font_size_lg: {
       text: [
         this.t("settings.font_size"),
         this.t("spotlight.settings.font.size_lg"),
       ],
-      excludeFromSearch: computed(() => this.activeFontSize.value === "large"),
       alternates: [
         "font size",
         "change font size",
         "change font",
         "increase font",
       ],
-      icon: markRaw(IconType),
+      icon: computed(() =>
+        this.activeFontSize.value === "large"
+          ? markRaw(IconCheckCircle)
+          : markRaw(IconCircle)
+      ),
     },
     change_lang: {
       text: [
@@ -128,22 +153,6 @@ export class SettingsSpotlightSearcherService extends StaticSpotlightSearcherSer
       alternates: ["language", "change language"],
       icon: markRaw(IconGlobe),
     },
-    change_interceptor: {
-      text: [
-        this.t("spotlight.section.interceptor"),
-        this.t("spotlight.settings.change_interceptor"),
-      ],
-      alternates: ["interceptor", "change interceptor"],
-      icon: markRaw(IconShieldCheck),
-    },
-    install_ext: {
-      text: [
-        this.t("spotlight.section.interceptor"),
-        this.t("spotlight.settings.install_extension"),
-      ],
-      alternates: ["install extension", "extension", "interceptor"],
-      icon: markRaw(IconShieldCheck),
-    },
   })
 
   constructor() {
@@ -174,27 +183,12 @@ export class SettingsSpotlightSearcherService extends StaticSpotlightSearcherSer
     applySetting("BG_COLOR", theme)
   }
 
-  installExtension() {
-    const url = navigator.userAgent.includes("Firefox")
-      ? "https://addons.mozilla.org/en-US/firefox/addon/hoppscotch"
-      : "https://chrome.google.com/webstore/detail/hoppscotch-browser-extens/amknoiejhlmhancpahfcfcfhllgkpbld"
-    window.open(url, "_blank")
-  }
-
   public onDocSelected(id: string): void {
     switch (id) {
-      case "change_interceptor":
-        invokeAction("navigation.jump.settings")
-        break
-
       case "change_lang":
         invokeAction("navigation.jump.settings")
         break
 
-      case "install_ext":
-        this.installExtension()
-        break
-
       // theme actions
       case "theme_system":
         invokeAction("settings.theme.system")

packages/hoppscotch-common/src/services/spotlight/searchers/tab.searcher.ts

@@ -1,4 +1,4 @@
-import { Component, markRaw, reactive } from "vue"
+import { Component, computed, markRaw, reactive } from "vue"
 import { getI18n } from "~/modules/i18n"
 import { SpotlightSearcherResult, SpotlightService } from ".."
 import {
@@ -6,19 +6,20 @@ import {
   StaticSpotlightSearcherService,
 } from "./base/static.searcher"
 
-import {
+import { useRoute } from "vue-router"
-  closeOtherTabs,
+import IconCopy from "~icons/lucide/copy"
-  closeTab,
+import IconCopyPlus from "~icons/lucide/copy-plus"
-  createNewTab,
+import IconXCircle from "~icons/lucide/x-circle"
-  currentTabID,
+import IconXSquare from "~icons/lucide/x-square"
-} from "~/helpers/rest/tab"
+import { invokeAction } from "~/helpers/actions"
-import IconWindow from "~icons/lucide/app-window"
+import { getActiveTabs as getRESTActiveTabs } from "~/helpers/rest/tab"
-import { getDefaultRESTRequest } from "~/helpers/rest/default"
+import { getActiveTabs as getGQLActiveTabs } from "~/helpers/graphql/tab"
 
 type Doc = {
-  text: string
+  text: string | string[]
   alternates: string[]
   icon: object | Component
+  excludeFromSearch?: boolean
 }
 
 /**
@@ -37,21 +38,52 @@ export class TabSpotlightSearcherService extends StaticSpotlightSearcherService<
 
   private readonly spotlight = this.bind(SpotlightService)
 
+  private route = useRoute()
+  private showAction = computed(
+    () => this.route.name === "index" || this.route.name === "graphql"
+  )
+  private gqlActiveTabs = getGQLActiveTabs()
+  private restActiveTabs = getRESTActiveTabs()
+  private isOnlyTab = computed(() =>
+    this.route.name === "graphql"
+      ? this.gqlActiveTabs.value.length === 1
+      : this.restActiveTabs.value.length === 1
+  )
+
   private documents: Record<string, Doc> = reactive({
+    duplicate_tab: {
+      text: [this.t("spotlight.tab.title"), this.t("spotlight.tab.duplicate")],
+      alternates: ["tab", "duplicate", "duplicate tab"],
+      icon: markRaw(IconCopy),
+      excludeFromSearch: computed(() => !this.showAction.value),
+    },
     close_current_tab: {
-      text: this.t("spotlight.tab.close_current"),
+      text: [
+        this.t("spotlight.tab.title"),
+        this.t("spotlight.tab.close_current"),
+      ],
       alternates: ["tab", "close", "close tab"],
-      icon: markRaw(IconWindow),
+      icon: markRaw(IconXCircle),
+      excludeFromSearch: computed(
+        () => !this.showAction.value || this.isOnlyTab.value
+      ),
     },
     close_other_tabs: {
-      text: this.t("spotlight.tab.close_others"),
+      text: [
+        this.t("spotlight.tab.title"),
+        this.t("spotlight.tab.close_others"),
+      ],
       alternates: ["tab", "close", "close all"],
-      icon: markRaw(IconWindow),
+      icon: markRaw(IconXSquare),
+      excludeFromSearch: computed(
+        () => !this.showAction.value || this.isOnlyTab.value
+      ),
     },
     open_new_tab: {
-      text: this.t("spotlight.tab.new_tab"),
+      text: [this.t("spotlight.tab.title"), this.t("spotlight.tab.new_tab")],
       alternates: ["tab", "new", "open tab"],
-      icon: markRaw(IconWindow),
+      icon: markRaw(IconCopyPlus),
+      excludeFromSearch: computed(() => !this.showAction.value),
     },
   })
 
@@ -80,12 +112,9 @@ export class TabSpotlightSearcherService extends StaticSpotlightSearcherService<
   }
 
   public onDocSelected(id: string): void {
-    if (id === "close_current_tab") closeTab(currentTabID.value)
+    if (id === "duplicate_tab") invokeAction("tab.duplicate-tab", {})
-    if (id === "close_other_tabs") closeOtherTabs(currentTabID.value)
+    if (id === "close_current_tab") invokeAction("tab.close-current")
-    if (id === "open_new_tab")
+    if (id === "close_other_tabs") invokeAction("tab.close-other")
-      createNewTab({
+    if (id === "open_new_tab") invokeAction("tab.open-new")
-        request: getDefaultRESTRequest(),
-        isDirty: false,
-      })
   }
 }

packages/hoppscotch-common/src/services/spotlight/searchers/workspace.searcher.ts

@@ -8,7 +8,7 @@ import {
   ref,
   watch,
 } from "vue"
-import { activeActions$, invokeAction } from "~/helpers/actions"
+import { invokeAction } from "~/helpers/actions"
 import { getI18n } from "~/modules/i18n"
 import {
   SpotlightSearcher,
@@ -24,6 +24,7 @@ import {
 import { Service } from "dioc"
 import * as E from "fp-ts/Either"
 import MiniSearch from "minisearch"
+import IconCheckCircle from "~/components/app/spotlight/entry/IconSelected.vue"
 import { useStreamStatic } from "~/composables/stream"
 import { runGQLQuery } from "~/helpers/backend/GQLClient"
 import { GetMyTeamsDocument, GetMyTeamsQuery } from "~/helpers/backend/graphql"
@@ -36,7 +37,7 @@ import IconUserPlus from "~icons/lucide/user-plus"
 import IconUsers from "~icons/lucide/users"
 
 type Doc = {
-  text: string
+  text: string | string[]
   alternates: string[]
   icon: object | Component
   excludeFromSearch?: boolean
@@ -66,14 +67,6 @@ export class WorkspaceSpotlightSearcherService extends StaticSpotlightSearcherSe
     }
   )[0]
 
-  private activeActions = useStreamStatic(activeActions$, [], () => {
-    /* noop */
-  })[0]
-
-  private isLoggedInUser = computed(() =>
-    this.activeActions.value.includes("user.logout")
-  )
-
   private isTeamSelected = computed(
     () =>
       this.workspace.value.type === "team" &&
@@ -82,31 +75,33 @@ export class WorkspaceSpotlightSearcherService extends StaticSpotlightSearcherSe
 
   private documents: Record<string, Doc> = reactive({
     new_team: {
-      text: this.t("spotlight.workspace.new"),
+      text: [this.t("team.title"), this.t("spotlight.workspace.new")],
       alternates: ["new", "team", "workspace"],
       icon: markRaw(IconUsers),
-      excludeFromSearch: computed(() => !this.isLoggedInUser.value),
     },
     edit_team: {
-      text: this.t("spotlight.workspace.edit"),
+      text: [this.t("team.title"), this.t("spotlight.workspace.edit")],
       alternates: ["edit", "team", "workspace"],
       icon: markRaw(IconEdit),
       excludeFromSearch: computed(() => !this.isTeamSelected.value),
     },
     invite_members: {
-      text: this.t("spotlight.workspace.invite"),
+      text: [this.t("team.title"), this.t("spotlight.workspace.invite")],
       alternates: ["invite", "members", "workspace"],
       icon: markRaw(IconUserPlus),
       excludeFromSearch: computed(() => !this.isTeamSelected.value),
     },
     delete_team: {
-      text: this.t("spotlight.workspace.delete"),
+      text: [this.t("team.title"), this.t("spotlight.workspace.delete")],
       alternates: ["delete", "team", "workspace"],
       icon: markRaw(IconTrash2),
       excludeFromSearch: computed(() => !this.isTeamSelected.value),
     },
     switch_to_personal: {
-      text: this.t("spotlight.workspace.switch_to_personal"),
+      text: [
+        this.t("team.title"),
+        this.t("spotlight.workspace.switch_to_personal"),
+      ],
       alternates: ["switch", "team", "workspace", "personal"],
       icon: markRaw(IconUser),
       excludeFromSearch: computed(() => !this.isTeamSelected.value),
@@ -145,8 +140,13 @@ export class WorkspaceSpotlightSearcherService extends StaticSpotlightSearcherSe
   }
 
   public onDocSelected(id: string): void {
-    if (id === "new_team") invokeAction(`modals.team.new`)
+    if (id === "new_team") {
-    else if (id === "edit_team") invokeAction(`modals.team.edit`)
+      if (platform.auth.getCurrentUser()) {
+        invokeAction(`modals.team.new`)
+      } else {
+        invokeAction(`modals.login.toggle`)
+      }
+    } else if (id === "edit_team") invokeAction(`modals.team.edit`)
     else if (id === "invite_members") invokeAction(`modals.team.invite`)
     else if (id === "delete_team") this.deleteTeam()
     else if (id === "switch_to_personal")
@@ -197,6 +197,14 @@ export class SwitchWorkspaceSpotlightSearcherService
     })
   }
 
+  private workspace = useStreamStatic(
+    workspaceStatus$,
+    { type: "personal" },
+    () => {
+      /* noop */
+    }
+  )[0]
+
   createSearchSession(
     query: Readonly<Ref<string>>
   ): [Ref<SpotlightSearcherSessionState>, () => void] {
@@ -211,8 +219,16 @@ export class SwitchWorkspaceSpotlightSearcherService
     this.fetchMyTeams().then((teams) => {
       minisearch.addAll(
         teams.map((entry) => {
+          let id = `workspace-${entry.id}`
+          // if id matches add -selected to it
+          if (
+            this.workspace.value.type === "team" &&
+            this.workspace.value.teamID === entry.id
+          ) {
+            id += "-selected"
+          }
           return {
-            id: `workspace-${entry.id}`,
+            id,
             name: entry.name,
             alternates: ["team", "workspace", "change", "switch"],
           }
@@ -241,7 +257,9 @@ export class SwitchWorkspaceSpotlightSearcherService
             .map((x) => {
               return {
                 id: x.id,
-                icon: markRaw(IconUsers),
+                icon: markRaw(
+                  x.id.endsWith("-selected") ? IconCheckCircle : IconUsers
+                ),
                 score: x.score,
                 text: {
                   type: "text",

packages/hoppscotch-selfhost-web/index.html

@@ -1,6 +1,9 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
+    <script>
+      globalThis.import_meta_env = JSON.parse('"import_meta_env_placeholder"')
+    </script>
     <title>Hoppscotch • Open source API development ecosystem</title>
     <meta charset="UTF-8" />
     <link rel="icon" href="/favicon.ico" />

packages/hoppscotch-selfhost-web/meta.ts

@@ -36,7 +36,7 @@ export const META_TAGS = (env: Record<string, string>): IHTMLTag[] => [
   },
   {
     name: "image",
-    content: `${env.VITE_BASE_URL}/banner.png`,
+    content: `${env.APP_BASE_URL}/banner.png`,
   },
   // Open Graph tags
   {
@@ -49,7 +49,7 @@ export const META_TAGS = (env: Record<string, string>): IHTMLTag[] => [
   },
   {
     name: "og:image",
-    content: `${env.VITE_BASE_URL}/banner.png`,
+    content: `${env.APP_BASE_URL}/banner.png`,
   },
   // Twitter tags
   {
@@ -74,7 +74,7 @@ export const META_TAGS = (env: Record<string, string>): IHTMLTag[] => [
   },
   {
     name: "twitter:image",
-    content: `${env.VITE_BASE_URL}/banner.png`,
+    content: `${env.APP_BASE_URL}/banner.png`,
   },
   // Add to homescreen for Chrome on Android. Fallback for PWA (handled by nuxt)
   {
@@ -84,7 +84,7 @@ export const META_TAGS = (env: Record<string, string>): IHTMLTag[] => [
   // Windows phone tile icon
   {
     name: "msapplication-TileImage",
-    content: `${env.VITE_BASE_URL}/icon.png`,
+    content: `${env.APP_BASE_URL}/icon.png`,
   },
   {
     name: "msapplication-TileColor",

packages/hoppscotch-selfhost-web/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@hoppscotch/selfhost-web",
   "private": true,
-  "version": "2023.4.8",
+  "version": "2023.8.0",
   "type": "module",
   "scripts": {
     "dev:vite": "vite",
@@ -28,6 +28,7 @@
     "@fontsource-variable/roboto-mono": "^5.0.9",
     "@hoppscotch/common": "workspace:^",
     "@hoppscotch/data": "workspace:^",
+    "@import-meta-env/unplugin": "^0.4.8",
     "axios": "^1.4.0",
     "buffer": "^6.0.3",
     "fp-ts": "^2.16.1",
@@ -64,6 +65,7 @@
     "unplugin-icons": "^0.16.5",
     "unplugin-vue-components": "^0.25.1",
     "vite": "^4.4.9",
+    "vite-plugin-fonts": "^0.6.0",
     "vite-plugin-html-config": "^1.0.11",
     "vite-plugin-inspect": "^0.7.38",
     "vite-plugin-pages": "^0.31.0",

packages/hoppscotch-selfhost-web/prod_run.mjs

@@ -0,0 +1,17 @@
+#!/usr/local/bin/node
+import { execSync } from "child_process"
+import fs from "fs"
+
+const envFileContent = Object.entries(process.env)
+  .filter(([env]) => env.startsWith("VITE_"))
+  .map(
+    ([env, val]) =>
+      `${env}=${val.startsWith('"') && val.endsWith('"') ? val : `"${val}"`}`
+  )
+  .join("\n")
+
+fs.writeFileSync("build.env", envFileContent)
+
+execSync(`npx import-meta-env -x build.env -e build.env -p "/site/**/*"`)
+
+fs.rmSync("build.env")

packages/hoppscotch-selfhost-web/src/main.ts

@@ -7,9 +7,16 @@ import { def as historyDef } from "./platform/history/history.platform"
 import { def as tabStateDef } from "./platform/tabState/tabState.platform"
 import { browserInterceptor } from "@hoppscotch/common/platform/std/interceptors/browser"
 import { proxyInterceptor } from "@hoppscotch/common/platform/std/interceptors/proxy"
+import { ExtensionInspectorService } from "@hoppscotch/common/platform/std/inspections/extension.inspector"
 import { ExtensionInterceptorService } from "@hoppscotch/common/platform/std/interceptors/extension"
+import { stdFooterItems } from "@hoppscotch/common/platform/std/ui/footerItem"
+import { stdSupportOptionItems } from "@hoppscotch/common/platform/std/ui/supportOptionsItem"
 
 createHoppApp("#app", {
+  ui: {
+    additionalFooterMenuItems: stdFooterItems,
+    additionalSupportOptionsMenuItems: stdSupportOptionItems,
+  },
   auth: authDef,
   sync: {
     environments: environmentsDef,
@@ -26,6 +33,9 @@ createHoppApp("#app", {
       { type: "service", service: ExtensionInterceptorService },
     ],
   },
+  additionalInspectors: [
+    { type: "service", service: ExtensionInspectorService },
+  ],
   platformFeatureFlags: {
     exportAsGIST: false,
   },

packages/hoppscotch-selfhost-web/vite.config.ts

@@ -17,10 +17,12 @@ import { FileSystemIconLoader } from "unplugin-icons/loaders"
 import * as path from "path"
 import Unfonts from "unplugin-fonts/vite"
 import legacy from "@vitejs/plugin-legacy"
+import ImportMetaEnv from "@import-meta-env/unplugin"
 
-const ENV = loadEnv("development", path.resolve(__dirname, "../../"))
+const ENV = loadEnv("development", path.resolve(__dirname, "../../"), ["VITE_"])
 
 export default defineConfig({
+  envPrefix: process.env.HOPP_ALLOW_RUNTIME_ENV ? "VITE_BUILDTIME_" : "VITE_",
   envDir: path.resolve(__dirname, "../../"),
   // TODO: Migrate @hoppscotch/data to full ESM
   define: {
@@ -65,6 +67,7 @@ export default defineConfig({
       "@lib": path.resolve(__dirname, "./src/lib"),
       stream: "stream-browserify",
       util: "util",
+      querystring: "qs",
     },
     dedupe: ["vue"],
   },
@@ -78,14 +81,15 @@ export default defineConfig({
       routeStyle: "nuxt",
       dirs: "../hoppscotch-common/src/pages",
       importMode: "async",
-      onRoutesGenerated: (routes) =>
+      onRoutesGenerated(routes) {
         generateSitemap({
           routes,
           nuxtStyle: true,
           allowRobots: true,
           dest: ".sitemap-gen",
           hostname: ENV.VITE_BASE_URL,
-        }),
+        })
+      },
     }),
     StaticCopy({
       targets: [
@@ -239,5 +243,11 @@ export default defineConfig({
       modernPolyfills: ["es.string.replace-all"],
       renderLegacyChunks: false,
     }),
+    process.env.HOPP_ALLOW_RUNTIME_ENV
+      ? ImportMetaEnv.vite({
+          example: "../../.env.example",
+          env: "../../.env",
+        })
+      : [],
   ],
 })

packages/hoppscotch-sh-admin/assets/scss/styles.scss

@@ -166,12 +166,6 @@ a {
       @apply truncate;
       @apply sm:inline-flex;
     }
-
-    .env-icon {
-      @apply transition;
-      @apply inline-flex;
-      @apply items-center;
-    }
   }
 
   .tippy-svg-arrow {
@@ -332,7 +326,7 @@ pre.ace_editor {
   @apply after:font-icon;
   @apply after:text-current;
   @apply after:right-3;
-  @apply after:content-["\e313"];
+  @apply after:content-["\e5cf"];
   @apply after:text-lg;
 }
 
@@ -487,6 +481,10 @@ pre.ace_editor {
   }
 }
 
+.cm-scroller {
+  @apply overscroll-y-auto;
+}
+
 .cm-editor {
   .cm-line::selection {
     @apply bg-accentDark #{!important};
@@ -574,3 +572,11 @@ details[open] summary .indicator {
   @apply rounded;
   @apply border-0;
 }
+
+.gql-operation-not-highlight {
+  @apply opacity-50;
+}
+
+.gql-operation-highlight {
+  @apply opacity-100;
+}