feat: .env.example updated

Co-authored-by: Liyas Thomas <liyascthomas@gmail.com>

.dockerignore

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

.env.example

@@ -13,6 +13,7 @@ SESSION_SECRET='add some secret here'
 # Hoppscotch App Domain Config
 REDIRECT_URL="http://localhost:3000"
 WHITELISTED_ORIGINS = "http://localhost:3170,http://localhost:3000,http://localhost:3100"
+VITE_ALLOWED_AUTH_PROVIDERS = GOOGLE,GITHUB,MICROSOFT,EMAIL
 
 # Google Auth Config
 GOOGLE_CLIENT_ID="************************************************"

.github/workflows/tests.yml

@@ -2,9 +2,9 @@ name: Node.js CI
 
 on:
   push:
-    branches: [main, staging]
+    branches: [main, staging, "release/**"]
   pull_request:
-    branches: [main, staging]
+    branches: [main, staging, "release/**"]
 
 jobs:
   test:

docker-compose.yml

@@ -19,10 +19,12 @@ services:
       - DATABASE_URL=postgresql://postgres:testpass@hoppscotch-db:5432/hoppscotch?connect_timeout=300
       - PORT=3000
     volumes:
-      - ./packages/hoppscotch-backend/:/usr/src/app
+      # 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
+      hoppscotch-db:
+        condition: service_healthy
     ports:
       - "3170:3000"
 
@@ -60,12 +62,20 @@ services:
   # you are using an external postgres instance
   # This will be exposed at port 5432
   hoppscotch-db:
-    image: postgres
+    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
 
 

packages/hoppscotch-backend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hoppscotch-backend",
-  "version": "2023.4.7",
+  "version": "2023.4.8",
   "description": "",
   "author": "",
   "private": true,

packages/hoppscotch-backend/src/admin/admin.resolver.ts

@@ -411,6 +411,23 @@ export class AdminResolver {
     return deletedTeam.right;
   }
 
+  @Mutation(() => Boolean, {
+    description: 'Revoke a team Invite by Invite ID',
+  })
+  @UseGuards(GqlAuthGuard, GqlAdminGuard)
+  async revokeTeamInviteByAdmin(
+    @Args({
+      name: 'inviteID',
+      description: 'Team Invite ID',
+      type: () => ID,
+    })
+    inviteID: string,
+  ): Promise<boolean> {
+    const invite = await this.adminService.revokeTeamInviteByID(inviteID);
+    if (E.isLeft(invite)) throwErr(invite.left);
+    return true;
+  }
+
   /* Subscriptions */
 
   @Subscription(() => InvitedUser, {

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

@@ -11,6 +11,7 @@ import {
   INVALID_EMAIL,
   ONLY_ONE_ADMIN_ACCOUNT,
   TEAM_INVITE_ALREADY_MEMBER,
+  TEAM_INVITE_NO_INVITE_FOUND,
   USER_ALREADY_INVITED,
   USER_IS_ADMIN,
   USER_NOT_FOUND,
@@ -416,4 +417,19 @@ export class AdminService {
     if (E.isLeft(team)) return E.left(team.left);
     return E.right(team.right);
   }
+
+  /**
+   * Revoke a team invite by ID
+   * @param inviteID Team Invite ID
+   * @returns an Either of boolean or error
+   */
+  async revokeTeamInviteByID(inviteID: string) {
+    const teamInvite = await this.teamInvitationService.revokeInvitation(
+      inviteID,
+    );
+
+    if (E.isLeft(teamInvite)) return E.left(teamInvite.left);
+
+    return E.right(teamInvite.right);
+  }
 }

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

@@ -2,9 +2,9 @@ import {
   Body,
   Controller,
   Get,
+  InternalServerErrorException,
   Post,
   Query,
-  Req,
   Request,
   Res,
   UseGuards,
@@ -19,12 +19,18 @@ import { JwtAuthGuard } from './guards/jwt-auth.guard';
 import { GqlUser } from 'src/decorators/gql-user.decorator';
 import { AuthUser } from 'src/types/AuthUser';
 import { RTCookie } from 'src/decorators/rt-cookie.decorator';
-import { authCookieHandler, throwHTTPErr } from './helper';
+import {
+  AuthProvider,
+  authCookieHandler,
+  authProviderCheck,
+  throwHTTPErr,
+} from './helper';
 import { GoogleSSOGuard } from './guards/google-sso.guard';
 import { GithubSSOGuard } from './guards/github-sso.guard';
 import { MicrosoftSSOGuard } from './guards/microsoft-sso-.guard';
 import { ThrottlerBehindProxyGuard } from 'src/guards/throttler-behind-proxy.guard';
 import { SkipThrottle } from '@nestjs/throttler';
+import { AUTH_PROVIDER_NOT_SPECIFIED } from 'src/errors';
 
 @UseGuards(ThrottlerBehindProxyGuard)
 @Controller({ path: 'auth', version: '1' })
@@ -39,6 +45,9 @@ export class AuthController {
     @Body() authData: SignInMagicDto,
     @Query('origin') origin: string,
   ) {
+    if (!authProviderCheck(AuthProvider.EMAIL))
+      throwHTTPErr({ message: AUTH_PROVIDER_NOT_SPECIFIED, statusCode: 404 });
+
     const deviceIdToken = await this.authService.signInMagicLink(
       authData.email,
       origin,

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

@@ -11,6 +11,7 @@ import { RTJwtStrategy } from './strategies/rt-jwt.strategy';
 import { GoogleStrategy } from './strategies/google.strategy';
 import { GithubStrategy } from './strategies/github.strategy';
 import { MicrosoftStrategy } from './strategies/microsoft.strategy';
+import { AuthProvider, authProviderCheck } from './helper';
 
 @Module({
   imports: [
@@ -26,9 +27,9 @@ import { MicrosoftStrategy } from './strategies/microsoft.strategy';
     AuthService,
     JwtStrategy,
     RTJwtStrategy,
-    GoogleStrategy,
-    GithubStrategy,
-    MicrosoftStrategy,
+    ...(authProviderCheck(AuthProvider.GOOGLE) ? [GoogleStrategy] : []),
+    ...(authProviderCheck(AuthProvider.GITHUB) ? [GithubStrategy] : []),
+    ...(authProviderCheck(AuthProvider.MICROSOFT) ? [MicrosoftStrategy] : []),
   ],
   controllers: [AuthController],
 })

packages/hoppscotch-backend/src/auth/guards/github-sso.guard.ts

@@ -1,8 +1,20 @@
-import { ExecutionContext, Injectable } from '@nestjs/common';
+import { CanActivate, ExecutionContext, Injectable } from '@nestjs/common';
 import { AuthGuard } from '@nestjs/passport';
+import { AuthProvider, authProviderCheck, throwHTTPErr } from '../helper';
+import { Observable } from 'rxjs';
+import { AUTH_PROVIDER_NOT_SPECIFIED } from 'src/errors';
 
 @Injectable()
-export class GithubSSOGuard extends AuthGuard('github') {
+export class GithubSSOGuard extends AuthGuard('github') implements CanActivate {
+  canActivate(
+    context: ExecutionContext,
+  ): boolean | Promise<boolean> | Observable<boolean> {
+    if (!authProviderCheck(AuthProvider.GITHUB))
+      throwHTTPErr({ message: AUTH_PROVIDER_NOT_SPECIFIED, statusCode: 404 });
+
+    return super.canActivate(context);
+  }
+
   getAuthenticateOptions(context: ExecutionContext) {
     const req = context.switchToHttp().getRequest();
 

packages/hoppscotch-backend/src/auth/guards/google-sso.guard.ts

@@ -1,8 +1,20 @@
-import { ExecutionContext, Injectable } from '@nestjs/common';
+import { CanActivate, ExecutionContext, Injectable } from '@nestjs/common';
 import { AuthGuard } from '@nestjs/passport';
+import { AuthProvider, authProviderCheck, throwHTTPErr } from '../helper';
+import { Observable } from 'rxjs';
+import { AUTH_PROVIDER_NOT_SPECIFIED } from 'src/errors';
 
 @Injectable()
-export class GoogleSSOGuard extends AuthGuard('google') {
+export class GoogleSSOGuard extends AuthGuard('google') implements CanActivate {
+  canActivate(
+    context: ExecutionContext,
+  ): boolean | Promise<boolean> | Observable<boolean> {
+    if (!authProviderCheck(AuthProvider.GOOGLE))
+      throwHTTPErr({ message: AUTH_PROVIDER_NOT_SPECIFIED, statusCode: 404 });
+
+    return super.canActivate(context);
+  }
+
   getAuthenticateOptions(context: ExecutionContext) {
     const req = context.switchToHttp().getRequest();
 

packages/hoppscotch-backend/src/auth/guards/microsoft-sso-.guard.ts

@@ -1,8 +1,26 @@
-import { ExecutionContext, Injectable } from '@nestjs/common';
+import { CanActivate, ExecutionContext, Injectable } from '@nestjs/common';
 import { AuthGuard } from '@nestjs/passport';
+import { AuthProvider, authProviderCheck, throwHTTPErr } from '../helper';
+import { Observable } from 'rxjs';
+import { AUTH_PROVIDER_NOT_SPECIFIED } from 'src/errors';
 
 @Injectable()
-export class MicrosoftSSOGuard extends AuthGuard('microsoft') {
+export class MicrosoftSSOGuard
+  extends AuthGuard('microsoft')
+  implements CanActivate
+{
+  canActivate(
+    context: ExecutionContext,
+  ): boolean | Promise<boolean> | Observable<boolean> {
+    if (!authProviderCheck(AuthProvider.MICROSOFT))
+      throwHTTPErr({
+        message: AUTH_PROVIDER_NOT_SPECIFIED,
+        statusCode: 404,
+      });
+
+    return super.canActivate(context);
+  }
+
   getAuthenticateOptions(context: ExecutionContext) {
     const req = context.switchToHttp().getRequest();
 

packages/hoppscotch-backend/src/auth/helper.ts

@@ -1,10 +1,11 @@
-import { ForbiddenException, HttpException, HttpStatus } from '@nestjs/common';
+import { HttpException, HttpStatus } from '@nestjs/common';
 import { DateTime } from 'luxon';
 import { AuthError } from 'src/types/AuthError';
 import { AuthTokens } from 'src/types/AuthTokens';
 import { Response } from 'express';
 import * as cookie from 'cookie';
-import { COOKIES_NOT_FOUND } from 'src/errors';
+import { AUTH_PROVIDER_NOT_SPECIFIED, COOKIES_NOT_FOUND } from 'src/errors';
+import { throwErr } from 'src/utils';
 
 enum AuthTokenType {
   ACCESS_TOKEN = 'access_token',
@@ -16,6 +17,13 @@ export enum Origin {
   APP = 'app',
 }
 
+export enum AuthProvider {
+  GOOGLE = 'GOOGLE',
+  GITHUB = 'GITHUB',
+  MICROSOFT = 'MICROSOFT',
+  EMAIL = 'EMAIL',
+}
+
 /**
  * This function allows throw to be used as an expression
  * @param errMessage Message present in the error message
@@ -97,3 +105,25 @@ export const subscriptionContextCookieParser = (rawCookies: string) => {
     refresh_token: cookies[AuthTokenType.REFRESH_TOKEN],
   };
 };
+
+/**
+ * Check to see if given auth provider is present in the VITE_ALLOWED_AUTH_PROVIDERS env variable
+ *
+ * @param provider Provider we want to check the presence of
+ * @returns Boolean if provider specified is present or not
+ */
+export function authProviderCheck(provider: string) {
+  if (!provider) {
+    throwErr(AUTH_PROVIDER_NOT_SPECIFIED);
+  }
+
+  const envVariables = process.env.VITE_ALLOWED_AUTH_PROVIDERS
+    ? process.env.VITE_ALLOWED_AUTH_PROVIDERS.split(',').map((provider) =>
+        provider.trim().toUpperCase(),
+      )
+    : [];
+
+  if (!envVariables.includes(provider.toUpperCase())) return false;
+
+  return true;
+}

packages/hoppscotch-backend/src/errors.ts

@@ -22,6 +22,30 @@ export const AUTH_FAIL = 'auth/fail';
  */
 export const JSON_INVALID = 'json_invalid';
 
+/**
+ * Auth Provider not specified
+ * (Auth)
+ */
+export const AUTH_PROVIDER_NOT_SPECIFIED = 'auth/provider_not_specified';
+
+/**
+ * Environment variable "VITE_ALLOWED_AUTH_PROVIDERS" is not present in .env file
+ */
+export const ENV_NOT_FOUND_KEY_AUTH_PROVIDERS =
+  '"VITE_ALLOWED_AUTH_PROVIDERS" is not present in .env file';
+
+/**
+ * Environment variable "VITE_ALLOWED_AUTH_PROVIDERS" is empty in .env file
+ */
+export const ENV_EMPTY_AUTH_PROVIDERS =
+  '"VITE_ALLOWED_AUTH_PROVIDERS" is empty in .env file';
+
+/**
+ * Environment variable "VITE_ALLOWED_AUTH_PROVIDERS" contains unsupported provider in .env file
+ */
+export const ENV_NOT_SUPPORT_AUTH_PROVIDERS =
+  '"VITE_ALLOWED_AUTH_PROVIDERS" contains an unsupported auth provider in .env file';
+
 /**
  * Tried to delete a user data document from fb firestore but failed.
  * (FirebaseService)

packages/hoppscotch-backend/src/main.ts

@@ -5,11 +5,14 @@ import * as cookieParser from 'cookie-parser';
 import { VersioningType } from '@nestjs/common';
 import * as session from 'express-session';
 import { emitGQLSchemaFile } from './gql-schema';
+import { checkEnvironmentAuthProvider } from './utils';
 
 async function bootstrap() {
   console.log(`Running in production: ${process.env.PRODUCTION}`);
   console.log(`Port: ${process.env.PORT}`);
 
+  checkEnvironmentAuthProvider();
+
   const app = await NestFactory.create(AppModule);
 
   app.use(

packages/hoppscotch-backend/src/team-environments/team-environments.service.spec.ts

@@ -306,8 +306,8 @@ describe('TeamEnvironmentsService', () => {
       );
 
       mockPrisma.teamEnvironment.create.mockResolvedValueOnce({
-        ...teamEnvironment,
         id: 'newid',
+        ...teamEnvironment,
       });
 
       const result = await teamEnvironmentsService.createDuplicateEnvironment(
@@ -337,8 +337,8 @@ describe('TeamEnvironmentsService', () => {
       );
 
       mockPrisma.teamEnvironment.create.mockResolvedValueOnce({
-        ...teamEnvironment,
         id: 'newid',
+        ...teamEnvironment,
       });
 
       const result = await teamEnvironmentsService.createDuplicateEnvironment(

packages/hoppscotch-backend/src/utils.ts

@@ -9,7 +9,13 @@ import * as E from 'fp-ts/Either';
 import * as A from 'fp-ts/Array';
 import { TeamMemberRole } from './team/team.model';
 import { User } from './user/user.model';
-import { JSON_INVALID } from './errors';
+import {
+  ENV_EMPTY_AUTH_PROVIDERS,
+  ENV_NOT_FOUND_KEY_AUTH_PROVIDERS,
+  ENV_NOT_SUPPORT_AUTH_PROVIDERS,
+  JSON_INVALID,
+} from './errors';
+import { AuthProvider } from './auth/helper';
 
 /**
  * A workaround to throw an exception in an expression.
@@ -152,3 +158,31 @@ export function isValidLength(title: string, length: number) {
 
   return true;
 }
+
+/**
+ * This function is called by bootstrap() in main.ts
+ *  It checks if the "VITE_ALLOWED_AUTH_PROVIDERS" environment variable is properly set or not.
+ * If not, it throws an error.
+ */
+export function checkEnvironmentAuthProvider() {
+  if (!process.env.hasOwnProperty('VITE_ALLOWED_AUTH_PROVIDERS')) {
+    throw new Error(ENV_NOT_FOUND_KEY_AUTH_PROVIDERS);
+  }
+
+  if (process.env.VITE_ALLOWED_AUTH_PROVIDERS === '') {
+    throw new Error(ENV_EMPTY_AUTH_PROVIDERS);
+  }
+
+  const givenAuthProviders = process.env.VITE_ALLOWED_AUTH_PROVIDERS.split(
+    ',',
+  ).map((provider) => provider.toLocaleUpperCase());
+  const supportedAuthProviders = Object.values(AuthProvider).map(
+    (provider: string) => provider.toLocaleUpperCase(),
+  );
+
+  for (const givenAuthProvider of givenAuthProviders) {
+    if (!supportedAuthProviders.includes(givenAuthProvider)) {
+      throw new Error(ENV_NOT_SUPPORT_AUTH_PROVIDERS);
+    }
+  }
+}

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

@@ -4,6 +4,7 @@
   @apply after:backface-hidden;
   @apply selection:bg-accentDark;
   @apply selection:text-accentContrast;
+  @apply overscroll-none;
 }
 
 :root {

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

@@ -1,7 +1,7 @@
 @mixin base-theme {
-  --font-sans: "Inter", sans-serif;
-  --font-mono: "Roboto Mono", monospace;
-  --font-icon: "Material Icons";
+  --font-sans: "Inter Variable", sans-serif;
+  --font-icon: "Material Symbols Rounded Variable";
+  --font-mono: "Roboto Mono Variable", monospace;
   --font-size-tiny: calc(var(--font-size-body) - 0.062rem);
 }
 

packages/hoppscotch-common/locales/en.json

@@ -31,6 +31,7 @@
     "open_workspace": "Open workspace",
     "paste": "Paste",
     "prettify": "Prettify",
+    "rename": "Rename",
     "remove": "Remove",
     "restore": "Restore",
     "save": "Save",
@@ -132,6 +133,7 @@
     "renamed": "Collection renamed",
     "request_in_use": "Request in use",
     "save_as": "Save as",
+    "save_to_collection": "Save to Collection",
     "select": "Select a Collection",
     "select_location": "Select location",
     "select_team": "Select a team",
@@ -149,8 +151,14 @@
     "remove_telemetry": "Are you sure you want to opt-out of Telemetry?",
     "request_change": "Are you sure you want to discard current request, unsaved changes will be lost.",
     "save_unsaved_tab": "Do you want to save changes made in this tab?",
+    "close_unsaved_tabs": "Are you sure you want to close all tabs? {count} unsaved tabs will be lost.",
     "sync": "Would you like to restore your workspace from cloud? This will discard your local progress."
   },
+  "context_menu": {
+    "set_environment_variable": "Set as variable",
+    "add_parameter": "Add to parameter",
+    "open_link_in_new_tab": "Open link in new tab"
+  },
   "count": {
     "header": "Header {count}",
     "message": "Message {count}",
@@ -195,16 +203,23 @@
     "created": "Environment created",
     "deleted": "Environment deletion",
     "edit": "Edit Environment",
+    "global": "Global",
     "invalid_name": "Please provide a name for the environment",
     "my_environments": "My Environments",
+    "name": "Name",
     "nested_overflow": "nested environment variables are limited to 10 levels",
     "new": "New Environment",
     "no_environment": "No environment",
     "no_environment_description": "No environments were selected. Choose what to do with the following variables.",
+    "replace_with_variable": "Replace with variable",
+    "scope": "Scope",
     "select": "Select environment",
+    "set_as_environment": "Set as environment",
     "team_environments": "Team Environments",
     "title": "Environments",
     "updated": "Environment updated",
+    "value": "Value",
+    "variable": "Variable",
     "variable_list": "Variable List"
   },
   "error": {
@@ -420,6 +435,7 @@
     "payload": "Payload",
     "query": "Query",
     "raw_body": "Raw Request Body",
+    "rename": "Rename Request",
     "renamed": "Request renamed",
     "run": "Run",
     "save": "Save",
@@ -646,8 +662,11 @@
   "tab": {
     "authorization": "Authorization",
     "body": "Body",
+    "close": "Close Tab",
+    "close_others": "Close other Tabs",
     "collections": "Collections",
     "documentation": "Documentation",
+    "duplicate": "Duplicate Tab",
     "environments": "Environments",
     "headers": "Headers",
     "history": "History",

packages/hoppscotch-common/locales/tw.json

@@ -19,7 +19,7 @@
     "edit": "編輯",
     "filter": "篩選回應",
     "go_back": "返回",
-    "go_forward": "Go forward",
+    "go_forward": "向前",
     "group_by": "分組方式",
     "label": "標籤",
     "learn_more": "瞭解更多",
@@ -117,37 +117,37 @@
     "username": "使用者名稱"
   },
   "collection": {
-    "created": "組合已建立",
-    "different_parent": "Cannot reorder collection with different parent",
-    "edit": "編輯組合",
-    "invalid_name": "請提供有效的組合名稱",
-    "invalid_root_move": "Collection already in the root",
-    "moved": "Moved Successfully",
-    "my_collections": "我的組合",
-    "name": "我的新組合",
-    "name_length_insufficient": "組合名稱至少要有 3 個字元。",
-    "new": "建立組合",
-    "order_changed": "Collection Order Updated",
-    "renamed": "組合已重新命名",
+    "created": "集合已建立",
+    "different_parent": "無法為父集合不同的集合重新排序",
+    "edit": "編輯集合",
+    "invalid_name": "請提供有效的集合名稱",
+    "invalid_root_move": "集合已在根目錄",
+    "moved": "移動成功",
+    "my_collections": "我的集合",
+    "name": "我的新集合",
+    "name_length_insufficient": "集合名稱至少要有 3 個字元。",
+    "new": "建立集合",
+    "order_changed": "集合順序已更新",
+    "renamed": "集合已重新命名",
     "request_in_use": "請求正在使用中",
     "save_as": "另存為",
-    "select": "選擇一個組合",
+    "select": "選擇一個集合",
     "select_location": "選擇位置",
     "select_team": "選擇一個團隊",
-    "team_collections": "團隊組合"
+    "team_collections": "團隊集合"
   },
   "confirm": {
     "exit_team": "您確定要離開此團隊嗎？",
     "logout": "您確定要登出嗎？",
-    "remove_collection": "您確定要永久刪除該組合嗎？",
+    "remove_collection": "您確定要永久刪除該集合嗎？",
     "remove_environment": "您確定要永久刪除該環境嗎？",
     "remove_folder": "您確定要永久刪除該資料夾嗎？",
     "remove_history": "您確定要永久刪除全部歷史記錄嗎？",
     "remove_request": "您確定要永久刪除該請求嗎？",
     "remove_team": "您確定要刪除該團隊嗎？",
     "remove_telemetry": "您確定要退出遙測服務嗎？",
-    "request_change": "您確定要捨棄當前請求嗎？未儲存的變更將遺失。",
-    "save_unsaved_tab": "Do you want to save changes made in this tab?",
+    "request_change": "您確定要捨棄目前的請求嗎？未儲存的變更將遺失。",
+    "save_unsaved_tab": "您要儲存在此分頁做出的改動嗎？",
     "sync": "您想從雲端恢復您的工作區嗎？這將丟棄您的本地進度。"
   },
   "count": {
@@ -160,13 +160,13 @@
   },
   "documentation": {
     "generate": "產生文件",
-    "generate_message": "匯入 Hoppscotch 組合以隨時隨地產生 API 文件。"
+    "generate_message": "匯入 Hoppscotch 集合以隨時隨地產生 API 文件。"
   },
   "empty": {
     "authorization": "該請求沒有使用任何授權",
     "body": "該請求沒有任何請求主體",
-    "collection": "組合為空",
-    "collections": "組合為空",
+    "collection": "集合為空",
+    "collections": "集合為空",
     "documentation": "連線到 GraphQL 端點以檢視文件",
     "endpoint": "端點不能留空",
     "environments": "環境為空",
@@ -209,7 +209,7 @@
     "browser_support_sse": "此瀏覽器似乎不支援 SSE。",
     "check_console_details": "檢查控制台日誌以獲悉詳情",
     "curl_invalid_format": "cURL 格式不正確",
-    "danger_zone": "Danger zone",
+    "danger_zone": "危險地帶",
     "delete_account": "您的帳號目前為這些團隊的擁有者：",
     "delete_account_description": "您在刪除帳號前必須先將您自己從團隊中移除、轉移擁有權，或是刪除團隊。",
     "empty_req_name": "空請求名稱",
@@ -277,38 +277,38 @@
     "tests": "編寫測試指令碼以自動除錯。"
   },
   "hide": {
-    "collection": "隱藏組合面板",
+    "collection": "隱藏集合面板",
     "more": "隱藏更多",
     "preview": "隱藏預覽",
     "sidebar": "隱藏側邊欄"
   },
   "import": {
-    "collections": "匯入組合",
+    "collections": "匯入集合",
     "curl": "匯入 cURL",
     "failed": "匯入失敗",
     "from_gist": "從 Gist 匯入",
     "from_gist_description": "從 Gist 網址匯入",
     "from_insomnia": "從 Insomnia 匯入",
-    "from_insomnia_description": "從 Insomnia 組合匯入",
+    "from_insomnia_description": "從 Insomnia 集合匯入",
     "from_json": "從 Hoppscotch 匯入",
-    "from_json_description": "從 Hoppscotch 組合檔匯入",
-    "from_my_collections": "從我的組合匯入",
-    "from_my_collections_description": "從我的組合檔匯入",
+    "from_json_description": "從 Hoppscotch 集合檔匯入",
+    "from_my_collections": "從我的集合匯入",
+    "from_my_collections_description": "從我的集合檔匯入",
     "from_openapi": "從 OpenAPI 匯入",
     "from_openapi_description": "從 OpenAPI 規格檔 (YML/JSON) 匯入",
     "from_postman": "從 Postman 匯入",
-    "from_postman_description": "從 Postman 組合匯入",
+    "from_postman_description": "從 Postman 集合匯入",
     "from_url": "從網址匯入",
     "gist_url": "輸入 Gist 網址",
     "import_from_url_invalid_fetch": "無法從網址取得資料",
-    "import_from_url_invalid_file_format": "匯入組合時發生錯誤",
+    "import_from_url_invalid_file_format": "匯入集合時發生錯誤",
     "import_from_url_invalid_type": "不支援此類型。可接受的值為 'hoppscotch'、'openapi'、'postman'、'insomnia'",
-    "import_from_url_success": "已匯入組合",
-    "json_description": "從 Hoppscotch 組合 JSON 檔匯入組合",
+    "import_from_url_success": "已匯入集合",
+    "json_description": "從 Hoppscotch 集合 JSON 檔匯入集合",
     "title": "匯入"
   },
   "layout": {
-    "collapse_collection": "隱藏或顯示組合",
+    "collapse_collection": "隱藏或顯示集合",
     "collapse_sidebar": "隱藏或顯示側邊欄",
     "column": "垂直版面",
     "name": "配置",
@@ -316,8 +316,8 @@
     "zen_mode": "專注模式"
   },
   "modal": {
-    "close_unsaved_tab": "You have unsaved changes",
-    "collections": "組合",
+    "close_unsaved_tab": "您有未儲存的改動",
+    "collections": "集合",
     "confirm": "確認",
     "edit_request": "編輯請求",
     "import_export": "匯入／匯出"
@@ -374,9 +374,9 @@
     "email_verification_mail": "已將驗證信寄送至您的電子郵件地址。請點擊信中連結以驗證您的電子郵件地址。",
     "no_permission": "您沒有權限執行此操作。",
     "owner": "擁有者",
-    "owner_description": "擁有者可以新增、編輯和刪除請求、組合和團隊成員。",
+    "owner_description": "擁有者可以新增、編輯和刪除請求、集合和團隊成員。",
     "roles": "角色",
-    "roles_description": "角色用來控制對共用組合的存取權。",
+    "roles_description": "角色用來控制對共用集合的存取權。",
     "updated": "已更新個人檔案",
     "viewer": "檢視者",
     "viewer_description": "檢視者只能檢視和使用請求。"
@@ -396,8 +396,8 @@
       "text": "文字"
     },
     "copy_link": "複製連結",
-    "different_collection": "Cannot reorder requests from different collections",
-    "duplicated": "Request duplicated",
+    "different_collection": "無法重新排列來自不同集合的請求",
+    "duplicated": "已複製請求",
     "duration": "持續時間",
     "enter_curl": "輸入 cURL",
     "generate_code": "產生程式碼",
@@ -405,10 +405,10 @@
     "header_list": "請求標頭列表",
     "invalid_name": "請提供請求名稱",
     "method": "方法",
-    "moved": "Request moved",
+    "moved": "已移動請求",
     "name": "請求名稱",
     "new": "新請求",
-    "order_changed": "Request Order Updated",
+    "order_changed": "已更新請求順序",
     "override": "覆寫",
     "override_help": "在標頭設置 <kbd>Content-Type</kbd>",
     "overriden": "已覆寫",
@@ -432,7 +432,7 @@
     "view_my_links": "檢視我的連結"
   },
   "response": {
-    "audio": "Audio",
+    "audio": "音訊",
     "body": "回應本體",
     "filter_response_body": "篩選 JSON 回應本體 (使用 JSONPath 語法)",
     "headers": "回應標頭",
@@ -446,7 +446,7 @@
     "status": "狀態",
     "time": "時間",
     "title": "回應",
-    "video": "Video",
+    "video": "視訊",
     "waiting_for_connection": "等待連線",
     "xml": "XML"
   },
@@ -494,7 +494,7 @@
     "short_codes_description": "我們為您打造的快捷碼。",
     "sidebar_on_left": "左側邊欄",
     "sync": "同步",
-    "sync_collections": "組合",
+    "sync_collections": "集合",
     "sync_description": "這些設定會同步到雲端。",
     "sync_environments": "環境",
     "sync_history": "歷史",
@@ -551,7 +551,7 @@
       "previous_method": "選擇上一個方法",
       "put_method": "選擇 PUT 方法",
       "reset_request": "重置請求",
-      "save_to_collections": "儲存到組合",
+      "save_to_collections": "儲存到集合",
       "send_request": "傳送請求",
       "title": "請求"
     },
@@ -570,7 +570,7 @@
   },
   "show": {
     "code": "顯示程式碼",
-    "collection": "顯示組合面板",
+    "collection": "顯示集合面板",
     "more": "顯示更多",
     "sidebar": "顯示側邊欄"
   },
@@ -639,9 +639,9 @@
   "tab": {
     "authorization": "授權",
     "body": "請求本體",
-    "collections": "組合",
+    "collections": "集合",
     "documentation": "幫助文件",
-    "environments": "Environments",
+    "environments": "環境",
     "headers": "請求標頭",
     "history": "歷史記錄",
     "mqtt": "MQTT",
@@ -666,7 +666,7 @@
     "email_do_not_match": "電子信箱與您的帳號資料不一致。請聯絡您的團隊擁有者。",
     "exit": "退出團隊",
     "exit_disabled": "團隊擁有者無法退出團隊",
-    "invalid_coll_id": "Invalid collection ID",
+    "invalid_coll_id": "集合 ID 無效",
     "invalid_email_format": "電子信箱格式無效",
     "invalid_id": "團隊 ID 無效。請聯絡您的團隊擁有者。",
     "invalid_invite_link": "邀請連結無效",
@@ -690,21 +690,21 @@
     "member_removed": "使用者已移除",
     "member_role_updated": "使用者角色已更新",
     "members": "成員",
-    "more_members": "+{count} more",
+    "more_members": "還有 {count} 位",
     "name_length_insufficient": "團隊名稱至少為 6 個字元",
     "name_updated": "團隊名稱已更新",
     "new": "新團隊",
     "new_created": "已建立新團隊",
     "new_name": "我的新團隊",
-    "no_access": "您沒有編輯組合的許可權",
+    "no_access": "您沒有編輯集合的許可權",
     "no_invite_found": "未找到邀請。請聯絡您的團隊擁有者。",
-    "no_request_found": "Request not found.",
+    "no_request_found": "找不到請求。",
     "not_found": "找不到團隊。請聯絡您的團隊擁有者。",
     "not_valid_viewer": "您不是一個有效的檢視者。請聯絡您的團隊擁有者。",
-    "parent_coll_move": "Cannot move collection to a child collection",
+    "parent_coll_move": "無法將集合移動至子集合",
     "pending_invites": "待定邀請",
     "permissions": "許可權",
-    "same_target_destination": "Same target and destination",
+    "same_target_destination": "目標和目的地相同",
     "saved": "團隊已儲存",
     "select_a_team": "選擇團隊",
     "title": "團隊",
@@ -734,9 +734,9 @@
     "url": "網址"
   },
   "workspace": {
-    "change": "Change workspace",
-    "personal": "My Workspace",
-    "team": "Team Workspace",
-    "title": "Workspaces"
+    "change": "切換工作區",
+    "personal": "我的工作區",
+    "team": "團隊工作區",
+    "title": "工作區"
   }
 }

packages/hoppscotch-common/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@hoppscotch/common",
   "private": true,
-  "version": "2023.4.7",
+  "version": "2023.4.8",
   "scripts": {
     "dev": "pnpm exec npm-run-all -p -l dev:*",
     "test": "vitest --run",
@@ -33,6 +33,9 @@
     "@codemirror/search": "^6.0.0",
     "@codemirror/state": "^6.1.0",
     "@codemirror/view": "^6.0.2",
+    "@fontsource-variable/inter": "^5.0.5",
+    "@fontsource-variable/material-symbols-rounded": "^5.0.5",
+    "@fontsource-variable/roboto-mono": "^5.0.6",
     "@hoppscotch/codemirror-lang-graphql": "workspace:^",
     "@hoppscotch/data": "workspace:^",
     "@hoppscotch/js-sandbox": "workspace:^",
@@ -89,7 +92,6 @@
     "util": "^0.12.4",
     "uuid": "^8.3.2",
     "vue": "^3.2.25",
-    "vue-github-button": "^3.0.3",
     "vue-i18n": "^9.2.2",
     "vue-pdf-embed": "^1.1.4",
     "vue-router": "^4.0.16",
@@ -111,7 +113,7 @@
     "@graphql-codegen/typescript-urql-graphcache": "^2.3.1",
     "@graphql-codegen/urql-introspection": "^2.2.0",
     "@graphql-typed-document-node/core": "^3.1.1",
-    "@iconify-json/lucide": "^1.1.40",
+    "@iconify-json/lucide": "^1.1.109",
     "@intlify/vite-plugin-vue-i18n": "^7.0.0",
     "@relmify/jest-fp-ts": "^2.1.1",
     "@rushstack/eslint-patch": "^1.1.4",
@@ -140,15 +142,15 @@
     "rollup-plugin-polyfill-node": "^0.10.1",
     "sass": "^1.53.0",
     "typescript": "^4.5.4",
+    "unplugin-fonts": "^1.0.3",
     "unplugin-icons": "^0.14.9",
     "unplugin-vue-components": "^0.21.0",
     "vite": "^3.1.4",
     "vite-plugin-checker": "^0.5.1",
-    "vite-plugin-fonts": "^0.6.0",
     "vite-plugin-html-config": "^1.0.10",
     "vite-plugin-inspect": "^0.7.4",
     "vite-plugin-pages": "^0.26.0",
-    "vite-plugin-pages-sitemap": "^1.4.0",
+    "vite-plugin-pages-sitemap": "^1.4.5",
     "vite-plugin-pwa": "^0.13.1",
     "vite-plugin-vue-layouts": "^0.7.0",
     "vite-plugin-windicss": "^1.8.8",

packages/hoppscotch-common/public/badge.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="156" height="32" fill="none"><rect width="156" height="32" fill="#6366f1" rx="4"/><text xmlns="http://www.w3.org/2000/svg" x="50%" y="50%" fill="#fff" dominant-baseline="central" font-family="Helvetica,sans-serif" font-size="12" font-weight="bold" text-anchor="middle" text-rendering="geometricPrecision">▶  Run  in Hoppscotch</text></svg>

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

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

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

@@ -0,0 +1,76 @@
+<template>
+  <div
+    ref="contextMenuRef"
+    class="fixed bg-popover shadow-lg transform translate-y-8 border border-dividerDark p-2 rounded"
+    :style="`top: ${position.top}px; left: ${position.left}px; z-index: 1000;`"
+  >
+    <div v-if="contextMenuOptions" class="flex flex-col">
+      <div
+        v-for="option in contextMenuOptions"
+        :key="option.id"
+        class="flex flex-col space-y-2"
+      >
+        <HoppSmartItem
+          v-if="option.text.type === 'text' && option.text"
+          :icon="option.icon"
+          :label="option.text.text"
+          @click="handleClick(option)"
+        />
+        <component
+          :is="option.text.component"
+          v-else-if="option.text.type === 'custom'"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { onClickOutside } from "@vueuse/core"
+import { useService } from "dioc/vue"
+import { ref, watch } from "vue"
+import { ContextMenuResult, ContextMenuService } from "~/services/context-menu"
+import { EnvironmentMenuService } from "~/services/context-menu/menu/environment.menu"
+import { ParameterMenuService } from "~/services/context-menu/menu/parameter.menu"
+import { URLMenuService } from "~/services/context-menu/menu/url.menu"
+
+const props = defineProps<{
+  show: boolean
+  position: { top: number; left: number }
+  text: string | null
+}>()
+
+const emit = defineEmits<{
+  (e: "hide-modal"): void
+}>()
+
+const contextMenuRef = ref<any | null>(null)
+
+const contextMenuOptions = ref<ContextMenuResult[]>([])
+
+onClickOutside(contextMenuRef, () => {
+  emit("hide-modal")
+})
+
+const contextMenuService = useService(ContextMenuService)
+
+useService(EnvironmentMenuService)
+useService(ParameterMenuService)
+useService(URLMenuService)
+
+const handleClick = (option: { action: () => void }) => {
+  option.action()
+  emit("hide-modal")
+}
+
+watch(
+  () => [props.show, props.text],
+  (val) => {
+    if (val && props.text) {
+      const options = contextMenuService.getMenuFor(props.text)
+      contextMenuOptions.value = options
+    }
+  },
+  { immediate: true }
+)
+</script>

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

@@ -15,18 +15,21 @@
           :label="t('app.name')"
           to="/"
         />
-        <!-- <AppGitHubStarButton class="mt-1.5 transition" /> -->
       </div>
-      <div class="inline-flex items-center space-x-2">
-        <HoppButtonSecondary
-          v-tippy="{ theme: 'tooltip', allowHTML: true }"
-          :title="`${t(
-            'app.search'
-          )} <kbd>${getPlatformSpecialKey()}</kbd> <kbd>K</kbd>`"
-          :icon="IconSearch"
-          class="rounded hover:bg-primaryDark focus-visible:bg-primaryDark"
+      <div class="inline-flex items-center justify-center flex-1 space-x-2">
+        <button
+          class="flex flex-1 items-center justify-between px-2 py-1 bg-primaryDark transition text-secondaryLight cursor-text rounded border border-dividerDark max-w-xs hover:border-dividerDark hover:bg-primaryLight hover:text-secondary focus-visible:border-dividerDark focus-visible:bg-primaryLight focus-visible:text-secondary"
           @click="invokeAction('modals.search.toggle')"
-        />
+        >
+          <span class="inline-flex flex-1 items-center">
+            <icon-lucide-search class="mr-2 svg-icons" />
+            {{ t("app.search") }}
+          </span>
+          <span class="flex">
+            <kbd class="shortcut-key">{{ getPlatformSpecialKey() }}</kbd>
+            <kbd class="shortcut-key">K</kbd>
+          </span>
+        </button>
         <HoppButtonSecondary
           v-if="showInstallButton"
           v-tippy="{ theme: 'tooltip' }"
@@ -44,6 +47,8 @@
           class="rounded hover:bg-primaryDark focus-visible:bg-primaryDark"
           @click="invokeAction('modals.support.toggle')"
         />
+      </div>
+      <div class="inline-flex items-center justify-end flex-1 space-x-2">
         <div
           v-if="currentUser === null"
           class="inline-flex items-center space-x-2"
@@ -238,7 +243,6 @@ import IconDownload from "~icons/lucide/download"
 import IconUploadCloud from "~icons/lucide/upload-cloud"
 import IconUserPlus from "~icons/lucide/user-plus"
 import IconLifeBuoy from "~icons/lucide/life-buoy"
-import IconSearch from "~icons/lucide/search"
 import { breakpointsTailwind, useBreakpoints, useNetwork } from "@vueuse/core"
 import { pwaDefferedPrompt, installPWA } from "@modules/pwa"
 import { platform } from "~/platform"

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

@@ -4,20 +4,22 @@
       <div
         class="sticky top-0 z-10 flex flex-col flex-shrink-0 overflow-x-auto bg-primary"
       >
-        <div class="flex flex-col px-6 py-4 border-b border-dividerLight">
-          <input
-            v-model="filterText"
-            type="search"
-            autocomplete="off"
-            class="flex px-4 py-2 border rounded bg-primaryContrast border-divider hover:border-dividerDark focus-visible:border-dividerDark"
-            :placeholder="`${t('action.search')}`"
-          />
-        </div>
+        <HoppSmartInput
+          v-model="filterText"
+          type="search"
+          styles="px-6 py-4 border-b border-dividerLight"
+          :placeholder="`${t('action.search')}`"
+          input-styles="flex px-4 py-2 border rounded bg-primaryContrast border-divider hover:border-dividerDark focus-visible:border-dividerDark"
+        />
       </div>
       <div class="flex flex-col divide-y divide-dividerLight">
-        <HoppSmartPlaceholder v-if="isEmpty(shortcutsResults)">
+        <HoppSmartPlaceholder
+          v-if="isEmpty(shortcutsResults)"
+          :text="`${t('state.nothing_found')} ‟${filterText}”`"
+        >
           <icon-lucide-search class="pb-2 opacity-75 svg-icons" />
         </HoppSmartPlaceholder>
+
         <details
           v-for="(sectionResults, sectionTitle) in shortcutsResults"
           v-else

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

@@ -22,10 +22,11 @@
         </div>
         <div class="flex">
           <kbd class="shortcut-key">{{ getSpecialKey() }}</kbd>
-          <kbd class="shortcut-key">K</kbd>
+          <kbd class="shortcut-key">/</kbd>
         </div>
         <div class="flex">
-          <kbd class="shortcut-key">/</kbd>
+          <kbd class="shortcut-key">{{ getSpecialKey() }}</kbd>
+          <kbd class="shortcut-key">K</kbd>
         </div>
         <div class="flex">
           <kbd class="shortcut-key">?</kbd>

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

@@ -6,21 +6,13 @@
     @close="hideModal"
   >
     <template #body>
-      <div class="flex flex-col">
-        <input
-          id="selectLabelAdd"
-          v-model="name"
-          v-focus
-          class="input floating-input"
-          placeholder=" "
-          type="text"
-          autocomplete="off"
-          @keyup.enter="addNewCollection"
-        />
-        <label for="selectLabelAdd">
-          {{ t("action.label") }}
-        </label>
-      </div>
+      <HoppSmartInput
+        v-model="name"
+        placeholder=" "
+        :label="t('action.label')"
+        input-styles="floating-input"
+        @submit="addNewCollection"
+      />
     </template>
     <template #footer>
       <span class="flex space-x-2">

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

@@ -6,21 +6,13 @@
     @close="emit('hide-modal')"
   >
     <template #body>
-      <div class="flex flex-col">
-        <input
-          id="selectLabelAddFolder"
-          v-model="name"
-          v-focus
-          class="input floating-input"
-          placeholder=" "
-          type="text"
-          autocomplete="off"
-          @keyup.enter="addFolder"
-        />
-        <label for="selectLabelAddFolder">
-          {{ t("action.label") }}
-        </label>
-      </div>
+      <HoppSmartInput
+        v-model="name"
+        placeholder=" "
+        input-styles="floating-input"
+        :label="t('action.label')"
+        @submit="addFolder"
+      />
     </template>
     <template #footer>
       <span class="flex space-x-2">

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

@@ -6,19 +6,13 @@
     @close="$emit('hide-modal')"
   >
     <template #body>
-      <div class="flex flex-col">
-        <input
-          id="selectLabelAddRequest"
-          v-model="name"
-          v-focus
-          class="input floating-input"
-          placeholder=" "
-          type="text"
-          autocomplete="off"
-          @keyup.enter="addRequest"
-        />
-        <label for="selectLabelAddRequest">{{ t("action.label") }}</label>
-      </div>
+      <HoppSmartInput
+        v-model="name"
+        placeholder=" "
+        :label="t('action.label')"
+        input-styles="floating-input"
+        @submit="addRequest"
+      />
     </template>
     <template #footer>
       <span class="flex space-x-2">

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

@@ -193,7 +193,7 @@ import IconTrash2 from "~icons/lucide/trash-2"
 import IconEdit from "~icons/lucide/edit"
 import IconFolder from "~icons/lucide/folder"
 import IconFolderOpen from "~icons/lucide/folder-open"
-import { PropType, ref, computed, watch } from "vue"
+import { ref, computed, watch } from "vue"
 import { HoppCollection, HoppRESTRequest } from "@hoppscotch/data"
 import { useI18n } from "@composables/i18n"
 import { TippyComponent } from "vue-tippy"
@@ -209,67 +209,36 @@ type FolderType = "collection" | "folder"
 
 const t = useI18n()
 
-const props = defineProps({
-  id: {
-    type: String,
-    default: "",
-    required: true,
-  },
-  parentID: {
-    type: String as PropType<string | null>,
-    default: null,
-    required: false,
-  },
-  data: {
-    type: Object as PropType<HoppCollection<HoppRESTRequest> | TeamCollection>,
-    default: () => ({}),
-    required: true,
-  },
-  collectionsType: {
-    type: String as PropType<CollectionType>,
-    default: "my-collections",
-    required: true,
-  },
-  /**
-   * Collection component can be used for both collections and folders.
-   * folderType is used to determine which one it is.
-   */
-  folderType: {
-    type: String as PropType<FolderType>,
-    default: "collection",
-    required: true,
-  },
-  isOpen: {
-    type: Boolean,
-    default: false,
-    required: true,
-  },
-  isSelected: {
-    type: Boolean as PropType<boolean | null>,
-    default: false,
-    required: false,
-  },
-  exportLoading: {
-    type: Boolean,
-    default: false,
-    required: false,
-  },
-  hasNoTeamAccess: {
-    type: Boolean,
-    default: false,
-    required: false,
-  },
-  collectionMoveLoading: {
-    type: Array as PropType<string[]>,
-    default: () => [],
-    required: false,
-  },
-  isLastItem: {
-    type: Boolean,
-    default: false,
-    required: false,
-  },
-})
+const props = withDefaults(
+  defineProps<{
+    id: string
+    parentID?: string | null
+    data: HoppCollection<HoppRESTRequest> | TeamCollection
+    /**
+     * Collection component can be used for both collections and folders.
+     * folderType is used to determine which one it is.
+     */
+    collectionsType: CollectionType
+    folderType: FolderType
+    isOpen: boolean
+    isSelected?: boolean | null
+    exportLoading?: boolean
+    hasNoTeamAccess?: boolean
+    collectionMoveLoading?: string[]
+    isLastItem?: boolean
+  }>(),
+  {
+    id: "",
+    parentID: null,
+    collectionsType: "my-collections",
+    folderType: "collection",
+    isOpen: false,
+    isSelected: false,
+    exportLoading: false,
+    hasNoTeamAccess: false,
+    isLastItem: false,
+  }
+)
 
 const emit = defineEmits<{
   (event: "toggle-children"): void
@@ -448,8 +417,13 @@ const notSameDestination = computed(() => {
 })
 
 const isCollLoading = computed(() => {
-  if (props.collectionMoveLoading.length > 0 && props.data.id) {
-    return props.collectionMoveLoading.includes(props.data.id)
+  const { collectionMoveLoading } = props
+  if (
+    collectionMoveLoading &&
+    collectionMoveLoading.length > 0 &&
+    props.data.id
+  ) {
+    return collectionMoveLoading.includes(props.data.id)
   } else {
     return false
   }

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

@@ -6,21 +6,13 @@
     @close="hideModal"
   >
     <template #body>
-      <div class="flex flex-col">
-        <input
-          id="selectLabelEdit"
-          v-model="name"
-          v-focus
-          class="input floating-input"
-          placeholder=" "
-          type="text"
-          autocomplete="off"
-          @keyup.enter="saveCollection"
-        />
-        <label for="selectLabelEdit">
-          {{ t("action.label") }}
-        </label>
-      </div>
+      <HoppSmartInput
+        v-model="name"
+        placeholder=" "
+        input-styles="floating-input"
+        :label="t('action.label')"
+        @submit="saveCollection"
+      />
     </template>
     <template #footer>
       <span class="flex space-x-2">

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

@@ -6,21 +6,13 @@
     @close="emit('hide-modal')"
   >
     <template #body>
-      <div class="flex flex-col">
-        <input
-          id="selectLabelEditFolder"
-          v-model="name"
-          v-focus
-          class="input floating-input"
-          placeholder=" "
-          type="text"
-          autocomplete="off"
-          @keyup.enter="editFolder"
-        />
-        <label for="selectLabelEditFolder">
-          {{ t("action.label") }}
-        </label>
-      </div>
+      <HoppSmartInput
+        v-model="name"
+        placeholder=" "
+        :label="t('action.label')"
+        input-styles="floating-input"
+        @submit="editFolder"
+      />
     </template>
     <template #footer>
       <span class="flex space-x-2">

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

@@ -6,21 +6,13 @@
     @close="hideModal"
   >
     <template #body>
-      <div class="flex flex-col">
-        <input
-          id="selectLabelEditReq"
-          v-model="name"
-          v-focus
-          class="input floating-input"
-          placeholder=" "
-          type="text"
-          autocomplete="off"
-          @keyup.enter="editRequest"
-        />
-        <label for="selectLabelEditReq">
-          {{ t("action.label") }}
-        </label>
-      </div>
+      <HoppSmartInput
+        v-model="name"
+        placeholder=" "
+        :label="t('action.label')"
+        input-styles="floating-input"
+        @submit="editRequest"
+      />
     </template>
     <template #footer>
       <span class="flex space-x-2">

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

@@ -8,21 +8,15 @@
   >
     <template #body>
       <div class="flex flex-col">
-        <div class="relative flex">
-          <input
-            id="selectLabelSaveReq"
-            v-model="requestName"
-            v-focus
-            class="input floating-input"
-            placeholder=" "
-            type="text"
-            autocomplete="off"
-            @keyup.enter="saveRequestAs"
-          />
-          <label for="selectLabelSaveReq">
-            {{ t("request.name") }}
-          </label>
-        </div>
+        <HoppSmartInput
+          v-model="requestName"
+          styles="relative flex"
+          placeholder=" "
+          :label="t('request.name')"
+          input-styles="floating-input"
+          @submit="saveRequestAs"
+        />
+
         <label class="p-4">
           {{ t("collection.select_location") }}
         </label>
@@ -62,7 +56,7 @@
 </template>
 
 <script setup lang="ts">
-import { nextTick, reactive, ref, watch } from "vue"
+import { computed, nextTick, reactive, ref, watch } from "vue"
 import { cloneDeep } from "lodash-es"
 import {
   HoppGQLRequest,
@@ -107,10 +101,12 @@ const props = withDefaults(
   defineProps<{
     show: boolean
     mode: "rest" | "graphql"
+    request?: HoppRESTRequest | HoppGQLRequest | null
   }>(),
   {
     show: false,
     mode: "rest",
+    request: null,
   }
 )
 
@@ -132,9 +128,17 @@ const restRequestName = computedWithControl(
   () => currentActiveTab.value.document.request.name
 )
 
-const requestName = ref(
-  props.mode === "rest" ? restRequestName.value : gqlRequestName.value
-)
+const reqName = computed(() => {
+  if (props.request) {
+    return props.request.name
+  } else if (props.mode === "rest") {
+    return restRequestName.value
+  } else {
+    return gqlRequestName.value
+  }
+})
+
+const requestName = ref(reqName.value)
 
 watch(
   () => [currentActiveTab.value, gqlRequestName.value],
@@ -198,10 +202,15 @@ const saveRequestAs = async () => {
     return
   }
 
-  const requestUpdated =
-    props.mode === "rest"
-      ? cloneDeep(currentActiveTab.value.document.request)
-      : cloneDeep(getGQLSession().request)
+  let requestUpdated
+
+  if (props.request) {
+    requestUpdated = cloneDeep(props.request)
+  } else if (props.mode === "rest") {
+    requestUpdated = cloneDeep(currentActiveTab.value.document.request)
+  } else {
+    requestUpdated = cloneDeep(getGQLSession().request)
+  }
 
   requestUpdated.name = requestName.value
 

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

@@ -6,21 +6,13 @@
     @close="hideModal"
   >
     <template #body>
-      <div class="flex flex-col">
-        <input
-          id="selectLabelGqlAdd"
-          v-model="name"
-          v-focus
-          class="input floating-input"
-          placeholder=" "
-          type="text"
-          autocomplete="off"
-          @keyup.enter="addNewCollection"
-        />
-        <label for="selectLabelGqlAdd">
-          {{ t("action.label") }}
-        </label>
-      </div>
+      <HoppSmartInput
+        v-model="name"
+        placeholder=" "
+        input-styles="floating-input"
+        :label="t('action.label')"
+        @submit="addNewCollection"
+      />
     </template>
     <template #footer>
       <span class="flex space-x-2">

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

@@ -6,21 +6,13 @@
     @close="$emit('hide-modal')"
   >
     <template #body>
-      <div class="flex flex-col">
-        <input
-          id="selectLabelGqlAddFolder"
-          v-model="name"
-          v-focus
-          class="input floating-input"
-          placeholder=" "
-          type="text"
-          autocomplete="off"
-          @keyup.enter="addFolder"
-        />
-        <label for="selectLabelGqlAddFolder">
-          {{ t("action.label") }}
-        </label>
-      </div>
+      <HoppSmartInput
+        v-model="name"
+        placeholder=" "
+        :label="t('action.label')"
+        input-styles="floating-input"
+        @submit="addFolder"
+      />
     </template>
     <template #footer>
       <span class="flex space-x-2">

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

@@ -6,21 +6,13 @@
     @close="emit('hide-modal')"
   >
     <template #body>
-      <div class="flex flex-col">
-        <input
-          id="selectLabelGqlAddRequest"
-          v-model="name"
-          v-focus
-          class="input floating-input"
-          placeholder=" "
-          type="text"
-          autocomplete="off"
-          @keyup.enter="addRequest"
-        />
-        <label for="selectLabelGqlAddRequest">
-          {{ t("action.label") }}
-        </label>
-      </div>
+      <HoppSmartInput
+        v-model="name"
+        placeholder=" "
+        :label="t('action.label')"
+        input-styles="floating-input"
+        @submit="addRequest"
+      />
     </template>
     <template #footer>
       <span class="flex space-x-2">

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

@@ -6,21 +6,13 @@
     @close="hideModal"
   >
     <template #body>
-      <div class="flex flex-col">
-        <input
-          id="selectLabelGqlEdit"
-          v-model="name"
-          v-focus
-          class="input floating-input"
-          placeholder=" "
-          type="text"
-          autocomplete="off"
-          @keyup.enter="saveCollection"
-        />
-        <label for="selectLabelGqlEdit">
-          {{ t("action.label") }}
-        </label>
-      </div>
+      <HoppSmartInput
+        v-model="name"
+        placeholder=" "
+        :label="t('action.label')"
+        input-styles="floating-input"
+        @submit="saveCollection"
+      />
     </template>
     <template #footer>
       <span class="flex space-x-2">

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

@@ -6,21 +6,13 @@
     @close="$emit('hide-modal')"
   >
     <template #body>
-      <div class="flex flex-col">
-        <input
-          id="selectLabelGqlEditFolder"
-          v-model="name"
-          v-focus
-          class="input floating-input"
-          placeholder=" "
-          type="text"
-          autocomplete="off"
-          @keyup.enter="editFolder"
-        />
-        <label for="selectLabelGqlEditFolder">
-          {{ t("action.label") }}
-        </label>
-      </div>
+      <HoppSmartInput
+        v-model="name"
+        placeholder=" "
+        :label="t('action.label')"
+        input-styles="floating-input"
+        @submit="editFolder"
+      />
     </template>
     <template #footer>
       <span class="flex space-x-2">

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

@@ -6,21 +6,13 @@
     @close="hideModal"
   >
     <template #body>
-      <div class="flex flex-col">
-        <input
-          id="selectLabelGqlEditReq"
-          v-model="requestUpdateData.name"
-          v-focus
-          class="input floating-input"
-          placeholder=" "
-          type="text"
-          autocomplete="off"
-          @keyup.enter="saveRequest"
-        />
-        <label for="selectLabelGqlEditReq">
-          {{ t("action.label") }}
-        </label>
-      </div>
+      <HoppSmartInput
+        v-model="requestUpdateData.name"
+        placeholder=" "
+        :label="t('action.label')"
+        input-styles="floating-input"
+        @submit="saveRequest"
+      />
     </template>
     <template #footer>
       <span class="flex space-x-2">

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

@@ -11,7 +11,7 @@
         type="search"
         autocomplete="off"
         :placeholder="t('action.search')"
-        class="py-2 pl-4 pr-2 bg-transparent"
+        class="py-2 pl-4 pr-2 bg-transparent !border-0"
       />
       <div
         class="flex justify-between flex-1 flex-shrink-0 border-y bg-primary border-dividerLight"

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

@@ -18,12 +18,12 @@
       "
     >
       <WorkspaceCurrent :section="t('tab.collections')" />
-      <input
+
+      <HoppSmartInput
         v-model="filterTexts"
-        type="search"
-        autocomplete="off"
         :placeholder="t('action.search')"
-        class="py-2 pl-4 pr-2 bg-transparent"
+        input-styles="py-2 pl-4 pr-2 bg-transparent !border-0"
+        type="search"
         :disabled="collectionsType.type === 'team-collections'"
       />
     </div>

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

@@ -0,0 +1,208 @@
+<template>
+  <HoppSmartModal
+    v-if="show"
+    :title="t('environment.set_as_environment')"
+    @close="hideModal"
+  >
+    <template #body>
+      <div class="flex space-y-4 flex-1 flex-col">
+        <div class="flex items-center space-x-8 ml-2">
+          <label for="name" class="font-semibold min-w-10">{{
+            t("environment.name")
+          }}</label>
+          <input
+            v-model="name"
+            type="text"
+            :placeholder="t('environment.variable')"
+            class="input"
+          />
+        </div>
+        <div class="flex items-center space-x-8 ml-2">
+          <label for="value" class="font-semibold min-w-10">{{
+            t("environment.value")
+          }}</label>
+          <input type="text" :value="value" class="input" />
+        </div>
+        <div class="flex items-center space-x-8 ml-2">
+          <label for="scope" class="font-semibold min-w-10">
+            {{ t("environment.scope") }}
+          </label>
+          <div
+            class="relative flex flex-1 flex-col border border-divider rounded focus-visible:border-dividerDark"
+          >
+            <EnvironmentsSelector v-model="scope" :is-scope-selector="true" />
+          </div>
+        </div>
+        <div v-if="replaceWithVariable" class="flex space-x-2 mt-3">
+          <div class="min-w-18" />
+          <HoppSmartCheckbox
+            :on="replaceWithVariable"
+            title="t('environment.replace_with_variable'))"
+            @change="replaceWithVariable = !replaceWithVariable"
+          />
+          <label for="replaceWithVariable">
+            {{ t("environment.replace_with_variable") }}</label
+          >
+        </div>
+      </div>
+    </template>
+    <template #footer>
+      <span class="flex space-x-2">
+        <HoppButtonPrimary
+          :label="t('action.save')"
+          outline
+          @click="addEnvironment"
+        />
+        <HoppButtonSecondary
+          :label="t('action.cancel')"
+          outline
+          filled
+          @click="hideModal"
+        />
+      </span>
+    </template>
+  </HoppSmartModal>
+</template>
+
+<script lang="ts" setup>
+import { Environment } from "@hoppscotch/data"
+import { ref, watch } from "vue"
+import { useI18n } from "~/composables/i18n"
+import { useToast } from "~/composables/toast"
+import { GQLError } from "~/helpers/backend/GQLClient"
+import { TeamEnvironment } from "~/helpers/teams/TeamEnvironment"
+import {
+  addEnvironmentVariable,
+  addGlobalEnvVariable,
+} from "~/newstore/environments"
+import * as TE from "fp-ts/TaskEither"
+import { pipe } from "fp-ts/function"
+import { updateTeamEnvironment } from "~/helpers/backend/mutations/TeamEnvironment"
+import { currentActiveTab } from "~/helpers/rest/tab"
+
+const t = useI18n()
+const toast = useToast()
+
+const props = defineProps<{
+  show: boolean
+  position: { top: number; left: number }
+  name: string
+  value: string
+  replaceWithVariable: boolean
+}>()
+
+const emit = defineEmits<{
+  (e: "hide-modal"): void
+}>()
+
+const hideModal = () => {
+  emit("hide-modal")
+}
+
+watch(
+  () => props.show,
+  (newVal) => {
+    if (!newVal) {
+      scope.value = {
+        type: "global",
+      }
+      name.value = ""
+      replaceWithVariable.value = false
+    }
+  }
+)
+
+type Scope =
+  | {
+      type: "global"
+    }
+  | {
+      type: "my-environment"
+      environment: Environment
+      index: number
+    }
+  | {
+      type: "team-environment"
+      environment: TeamEnvironment
+    }
+
+const scope = ref<Scope>({
+  type: "global",
+})
+
+const replaceWithVariable = ref(false)
+
+const name = ref("")
+
+const addEnvironment = async () => {
+  if (!name.value) {
+    toast.error(`${t("environment.invalid_name")}`)
+    return
+  }
+  if (scope.value.type === "global") {
+    addGlobalEnvVariable({
+      key: name.value,
+      value: props.value,
+    })
+    toast.success(`${t("environment.updated")}`)
+  } else if (scope.value.type === "my-environment") {
+    addEnvironmentVariable(scope.value.index, {
+      key: name.value,
+      value: props.value,
+    })
+    toast.success(`${t("environment.updated")}`)
+  } else {
+    const newVariables = [
+      ...scope.value.environment.environment.variables,
+      {
+        key: name.value,
+        value: props.value,
+      },
+    ]
+    await pipe(
+      updateTeamEnvironment(
+        JSON.stringify(newVariables),
+        scope.value.environment.id,
+        scope.value.environment.environment.name
+      ),
+      TE.match(
+        (err: GQLError<string>) => {
+          console.error(err)
+          toast.error(`${getErrorMessage(err)}`)
+        },
+        () => {
+          hideModal()
+          toast.success(`${t("environment.updated")}`)
+        }
+      )
+    )()
+  }
+  if (replaceWithVariable.value) {
+    //replace the current tab endpoint with the variable name with << and >>
+    const variableName = `<<${name.value}>>`
+    //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,
+        variableName
+      )
+  }
+
+  hideModal()
+}
+
+const getErrorMessage = (err: GQLError<string>) => {
+  if (err.type === "network_error") {
+    return t("error.network_error")
+  } else {
+    switch (err.error) {
+      case "team_environment/not_found":
+        return t("team_environment.not_found")
+      case "Forbidden resource":
+        return t("profile.no_permission")
+      default:
+        return t("error.something_went_wrong")
+    }
+  }
+}
+</script>

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

@@ -8,7 +8,7 @@
     <span
       v-tippy="{ theme: 'tooltip' }"
       :title="`${t('environment.select')}`"
-      class="bg-transparent border-b border-dividerLight select-wrapper"
+      class="bg-transparent select-wrapper"
     >
       <HoppButtonSecondary
         :icon="IconLayers"
@@ -22,6 +22,7 @@
         class="flex-1 !justify-start pr-8 rounded-none"
       />
     </span>
+
     <template #content="{ hide }">
       <div
         ref="tippyActions"
@@ -31,6 +32,7 @@
         @keyup.escape="hide()"
       >
         <HoppSmartItem
+          v-if="!isScopeSelector"
           :label="`${t('environment.no_environment')}`"
           :info-icon="
             selectedEnvironmentIndex.type === 'NO_ENV_SELECTED'
@@ -47,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-10 top-0 bg-primary"
@@ -61,11 +78,14 @@
               :key="`gen-${index}`"
               :icon="IconLayers"
               :label="gen.name"
-              :info-icon="index === selectedEnv.index ? IconCheck : undefined"
-              :active-info-icon="index === selectedEnv.index"
+              :info-icon="isEnvActive(index) ? IconCheck : undefined"
+              :active-info-icon="isEnvActive(index)"
               @click="
                 () => {
-                  selectedEnvironmentIndex = { type: 'MY_ENV', index: index }
+                  handleEnvironmentChange(index, {
+                    type: 'my-environment',
+                    environment: gen,
+                  })
                   hide()
                 }
               "
@@ -96,18 +116,14 @@
                 :key="`gen-team-${index}`"
                 :icon="IconLayers"
                 :label="gen.environment.name"
-                :info-icon="
-                  gen.id === selectedEnv.teamEnvID ? IconCheck : undefined
-                "
-                :active-info-icon="gen.id === selectedEnv.teamEnvID"
+                :info-icon="isEnvActive(gen.id) ? IconCheck : undefined"
+                :active-info-icon="isEnvActive(gen.id)"
                 @click="
                   () => {
-                    selectedEnvironmentIndex = {
-                      type: 'TEAM_ENV',
-                      teamEnvID: gen.id,
-                      teamID: gen.teamID,
-                      environment: gen.environment,
-                    }
+                    handleEnvironmentChange(index, {
+                      type: 'team-environment',
+                      environment: gen,
+                    })
                     hide()
                   }
                 "
@@ -136,9 +152,10 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, ref, watch } from "vue"
+import { computed, onMounted, ref, watch } from "vue"
 import IconCheck from "~icons/lucide/check"
 import IconLayers from "~icons/lucide/layers"
+import IconGlobe from "~icons/lucide/globe"
 import { TippyComponent } from "vue-tippy"
 import { useI18n } from "~/composables/i18n"
 import { GQLError } from "~/helpers/backend/GQLClient"
@@ -156,6 +173,31 @@ import TeamListAdapter from "~/helpers/teams/TeamListAdapter"
 import { useLocalState } from "~/newstore/localstate"
 import { onLoggedIn } from "~/composables/auth"
 import { GetMyTeamsQuery } from "~/helpers/backend/graphql"
+import { TeamEnvironment } from "~/helpers/teams/TeamEnvironment"
+import { Environment } from "@hoppscotch/data"
+
+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")
@@ -170,6 +212,39 @@ 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)
@@ -204,63 +279,152 @@ watch(
   }
 )
 
-// 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)
+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 selectedEnv = computed(() => {
-  if (selectedEnvironmentIndex.value.type === "MY_ENV") {
-    return {
-      type: "MY_ENV",
-      index: selectedEnvironmentIndex.value.index,
-      name: myEnvironments.value[selectedEnvironmentIndex.value.index].name,
-    }
-  } 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) {
+  if (props.isScopeSelector) {
+    if (props.modelValue?.type === "my-environment") {
+      return {
+        type: "MY_ENV",
+        index: props.modelValue.index,
+        name: props.modelValue.environment?.name,
+      }
+    } else if (props.modelValue?.type === "team-environment") {
       return {
         type: "TEAM_ENV",
-        name: teamEnv.environment.name,
-        teamEnvID: selectedEnvironmentIndex.value.teamEnvID,
+        name: props.modelValue.environment.environment.name,
+        teamEnvID: props.modelValue.environment.id,
+      }
+    } else {
+      return { type: "global", name: "Global" }
+    }
+  } else {
+    if (selectedEnvironmentIndex.value.type === "MY_ENV") {
+      return {
+        type: "MY_ENV",
+        index: selectedEnvironmentIndex.value.index,
+        name: myEnvironments.value[selectedEnvironmentIndex.value.index].name,
+      }
+    } 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,
+        }
+      } 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

@@ -26,6 +26,13 @@
       :editing-variable-name="editingVariableName"
       @hide-modal="displayModalEdit(false)"
     />
+    <EnvironmentsAdd
+      :show="showModalNew"
+      :name="editingVariableName"
+      :value="editingVariableValue"
+      :position="position"
+      @hide-modal="displayModalNew(false)"
+    />
   </div>
 </template>
 
@@ -161,10 +168,18 @@ watch(
   }
 )
 
+const showModalNew = ref(false)
 const showModalDetails = ref(false)
 const action = ref<"new" | "edit">("edit")
 const editingEnvironmentIndex = ref<"Global" | null>(null)
 const editingVariableName = ref("")
+const editingVariableValue = ref("")
+
+const position = ref({ top: 0, left: 0 })
+
+const displayModalNew = (shouldDisplay: boolean) => {
+  showModalNew.value = shouldDisplay
+}
 
 const displayModalEdit = (shouldDisplay: boolean) => {
   action.value = "edit"
@@ -233,4 +248,10 @@ watch(
   },
   { deep: true }
 )
+
+defineActionHandler("modals.environment.add", ({ envName, variableName }) => {
+  editingVariableName.value = envName
+  editingVariableValue.value = variableName
+  displayModalNew(true)
+})
 </script>

packages/hoppscotch-common/src/components/environments/my/Details.vue

@@ -7,22 +7,15 @@
   >
     <template #body>
       <div class="flex flex-col">
-        <div class="relative flex">
-          <input
-            id="selectLabelEnvEdit"
-            v-model="name"
-            v-focus
-            class="input floating-input"
-            placeholder=" "
-            type="text"
-            autocomplete="off"
-            :disabled="editingEnvironmentIndex === 'Global'"
-            @keyup.enter="saveEnvironment"
-          />
-          <label for="selectLabelEnvEdit">
-            {{ t("action.label") }}
-          </label>
-        </div>
+        <HoppSmartInput
+          v-model="name"
+          placeholder=" "
+          :label="t('action.label')"
+          input-styles="floating-input"
+          :disabled="editingEnvironmentIndex === 'Global'"
+          @submit="saveEnvironment"
+        />
+
         <div class="flex items-center justify-between flex-1">
           <label for="variableList" class="p-4">
             {{ t("environment.variable_list") }}

packages/hoppscotch-common/src/components/environments/teams/Details.vue

@@ -7,23 +7,15 @@
   >
     <template #body>
       <div class="flex flex-col px-2">
-        <div class="relative flex">
-          <input
-            id="selectLabelEnvEdit"
-            v-model="name"
-            v-focus
-            class="input floating-input"
-            :class="isViewer && 'opacity-25'"
-            placeholder=""
-            type="text"
-            autocomplete="off"
-            :disabled="isViewer"
-            @keyup.enter="saveEnvironment"
-          />
-          <label for="selectLabelEnvEdit">
-            {{ t("action.label") }}
-          </label>
-        </div>
+        <HoppSmartInput
+          v-model="name"
+          placeholder=" "
+          :input-styles="['floating-input', isViewer && 'opacity-25']"
+          :label="t('action.label')"
+          :disabled="isViewer"
+          @submit="saveEnvironment"
+        />
+
         <div class="flex items-center justify-between flex-1">
           <label for="variableList" class="p-4">
             {{ t("environment.variable_list") }}

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

@@ -37,24 +37,14 @@
         class="flex flex-col space-y-2"
         @submit.prevent="signInWithEmail"
       >
-        <div class="flex flex-col">
-          <input
-            id="email"
-            v-model="form.email"
-            v-focus
-            class="input floating-input"
-            placeholder=" "
-            type="email"
-            name="email"
-            autocomplete="off"
-            required
-            spellcheck="false"
-            autofocus
-          />
-          <label for="email">
-            {{ t("auth.email") }}
-          </label>
-        </div>
+        <HoppSmartInput
+          v-model="form.email"
+          type="email"
+          placeholder=" "
+          :label="t('auth.email')"
+          input-styles="floating-input"
+        />
+
         <HoppButtonPrimary
           :loading="signingInWithEmail"
           type="submit"

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

@@ -105,6 +105,7 @@
           @toggle-star="toggleStar(entry.entry)"
           @delete-entry="deleteHistory(entry.entry)"
           @use-entry="useHistory(toRaw(entry.entry))"
+          @add-to-collection="addToCollection(entry.entry)"
         />
       </details>
     </div>
@@ -176,7 +177,7 @@ import {
 import HistoryRestCard from "./rest/Card.vue"
 import HistoryGraphqlCard from "./graphql/Card.vue"
 import { createNewTab } from "~/helpers/rest/tab"
-import { defineActionHandler } from "~/helpers/actions"
+import { defineActionHandler, invokeAction } from "~/helpers/actions"
 
 type HistoryEntry = GQLHistoryEntry | RESTHistoryEntry
 
@@ -324,6 +325,14 @@ const deleteHistory = (entry: HistoryEntry) => {
   toast.success(`${t("state.deleted")}`)
 }
 
+const addToCollection = (entry: HistoryEntry) => {
+  if (props.page === "rest") {
+    invokeAction("request.save-as", {
+      request: entry.request,
+    })
+  }
+}
+
 const toggleStar = (entry: HistoryEntry) => {
   // History entry type specified because function does not know the type
   if (props.page === "rest")

packages/hoppscotch-common/src/components/history/rest/Card.vue

@@ -1,5 +1,8 @@
 <template>
-  <div class="flex items-stretch group">
+  <div
+    class="flex items-stretch group"
+    @contextmenu.prevent="options!.tippy.show()"
+  >
     <span
       v-tippy="{ theme: 'tooltip', delay: [500, 20] }"
       class="flex items-center justify-center w-16 px-2 truncate cursor-pointer"
@@ -26,6 +29,39 @@
         {{ entry.request.endpoint }}
       </span>
     </span>
+    <span>
+      <tippy
+        ref="options"
+        interactive
+        trigger="click"
+        theme="popover"
+        :on-shown="() => tippyActions!.focus()"
+      >
+        <template #content="{ hide }">
+          <div
+            ref="tippyActions"
+            class="flex flex-col focus:outline-none"
+            tabindex="0"
+            role="menu"
+            @keyup.s="addToCollectionAction?.$el.click()"
+            @keyup.escape="hide()"
+          >
+            <HoppSmartItem
+              ref="addToCollectionAction"
+              :icon="IconSave"
+              :label="`${t('collection.save_to_collection')}`"
+              :shortcut="['S']"
+              @click="
+                () => {
+                  emit('add-to-collection')
+                  hide()
+                }
+              "
+            />
+          </div>
+        </template>
+      </tippy>
+    </span>
     <HoppButtonSecondary
       v-tippy="{ theme: 'tooltip' }"
       :icon="IconTrash"
@@ -48,15 +84,16 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from "vue"
+import { computed, ref } from "vue"
 import findStatusGroup from "~/helpers/findStatusGroup"
 import { useI18n } from "@composables/i18n"
 import { RESTHistoryEntry } from "~/newstore/history"
 import { shortDateTime } from "~/helpers/utils/date"
-
+import IconSave from "~icons/lucide/save"
 import IconStar from "~icons/lucide/star"
 import IconStarOff from "~icons/hopp/star-off"
 import IconTrash from "~icons/lucide/trash"
+import { TippyComponent } from "vue-tippy"
 
 const props = defineProps<{
   entry: RESTHistoryEntry
@@ -67,8 +104,13 @@ const emit = defineEmits<{
   (e: "use-entry"): void
   (e: "delete-entry"): void
   (e: "toggle-star"): void
+  (e: "add-to-collection"): void
 }>()
 
+const tippyActions = ref<TippyComponent | null>(null)
+const options = ref<TippyComponent | null>(null)
+const addToCollectionAction = ref<HTMLButtonElement | null>(null)
+
 const t = useI18n()
 
 const duration = computed(() => {

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

@@ -221,6 +221,7 @@
       v-if="showSaveRequestModal"
       mode="rest"
       :show="showSaveRequestModal"
+      :request="request"
       @hide-modal="showSaveRequestModal = false"
     />
   </div>
@@ -263,6 +264,7 @@ import { getDefaultRESTRequest } from "~/helpers/rest/default"
 import { RESTHistoryEntry, restHistory$ } from "~/newstore/history"
 import { platform } from "~/platform"
 import { getCurrentStrategyID } from "~/helpers/network"
+import { HoppGQLRequest, HoppRESTRequest } from "@hoppscotch/data"
 
 const t = useI18n()
 
@@ -578,6 +580,8 @@ const saveRequest = () => {
   }
 }
 
+const request = ref<HoppRESTRequest | null>(null)
+
 onBeforeUnmount(() => {
   if (loading.value) cancelRequest()
 })
@@ -593,7 +597,22 @@ defineActionHandler("request.method.prev", cycleUpMethod)
 defineActionHandler("request.save", saveRequest)
 defineActionHandler(
   "request.save-as",
-  () => (showSaveRequestModal.value = true)
+  (
+    req:
+      | {
+          requestType: "rest"
+          request: HoppRESTRequest
+        }
+      | {
+          requestType: "gql"
+          request: HoppGQLRequest
+        }
+  ) => {
+    showSaveRequestModal.value = true
+    if (req && req.requestType === "rest") {
+      request.value = req.request
+    }
+  }
 )
 defineActionHandler("request.method.get", () => updateMethod("GET"))
 defineActionHandler("request.method.post", () => updateMethod("POST"))

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

@@ -0,0 +1,126 @@
+<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')"
+  >
+    <span
+      class="font-semibold text-tiny"
+      :class="getMethodLabelColorClassOf(tab.document.request)"
+    >
+      {{ tab.document.request.method }}
+    </span>
+
+    <tippy
+      ref="options"
+      trigger="manual"
+      interactive
+      theme="popover"
+      :on-shown="() => tippyActions!.focus()"
+    >
+      <span class="leading-8 px-2">
+        {{ 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 { getMethodLabelColorClassOf } from "~/helpers/rest/labelColoring"
+import { useI18n } from "~/composables/i18n"
+import { HoppRESTTab } from "~/helpers/rest/tab"
+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"
+
+const t = useI18n()
+
+defineProps<{
+  tab: HoppRESTTab
+  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/smart/ChangeLanguage.vue

@@ -18,15 +18,13 @@
       </span>
       <template #content="{ hide }">
         <div class="flex flex-col space-y-2">
-          <div class="sticky z-10 top-0 flex-shrink-0 overflow-x-auto">
-            <input
-              v-model="searchQuery"
-              type="search"
-              autocomplete="off"
-              class="flex w-full p-4 py-2 input !bg-primaryContrast"
-              :placeholder="`${t('action.search')}`"
-            />
-          </div>
+          <HoppSmartInput
+            v-model="searchQuery"
+            styles="ticky z-10 top-0 flex-shrink-0 overflow-x-auto"
+            :placeholder="`${t('action.search')}`"
+            type="search"
+            input-styles="flex w-full p-4 py-2 input !bg-primaryContrast"
+          />
           <div
             ref="tippyActions"
             class="flex flex-col focus:outline-none"

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

@@ -61,7 +61,8 @@ import { useReadonlyStream } from "@composables/stream"
 import { AggregateEnvironment, aggregateEnvs$ } from "~/newstore/environments"
 import { platform } from "~/platform"
 import { useI18n } from "~/composables/i18n"
-import { onClickOutside } from "@vueuse/core"
+import { onClickOutside, useDebounceFn } from "@vueuse/core"
+import { invokeAction } from "~/helpers/actions"
 
 const props = withDefaults(
   defineProps<{
@@ -149,6 +150,11 @@ const handleKeystroke = (ev: KeyboardEvent) => {
     ev.preventDefault()
   }
 
+  if (ev.shiftKey) {
+    showSuggestionPopover.value = false
+    return
+  }
+
   showSuggestionPopover.value = true
 
   if (
@@ -299,8 +305,45 @@ const envVars = computed(() =>
 const envTooltipPlugin = new HoppReactiveEnvPlugin(envVars, view)
 
 const initView = (el: any) => {
+  function handleTextSelection() {
+    const selection = view.value?.state.selection.main
+    if (selection) {
+      const from = selection.from
+      const to = selection.to
+      const text = view.value?.state.doc.sliceString(from, to)
+      const { top, left } = view.value?.coordsAtPos(from)
+      if (text) {
+        invokeAction("contextmenu.open", {
+          position: {
+            top,
+            left,
+          },
+          text,
+        })
+        showSuggestionPopover.value = false
+      } else {
+        invokeAction("contextmenu.open", {
+          position: {
+            top,
+            left,
+          },
+          text: null,
+        })
+      }
+    }
+  }
+
+  // Debounce to prevent double click from selecting the word
+  const debounceFn = useDebounceFn(() => {
+    handleTextSelection()
+  }, 140)
+
+  el.addEventListener("mouseup", debounceFn)
+  el.addEventListener("keyup", debounceFn)
+
   const extensions: Extension = [
     EditorView.contentAttributes.of({ "aria-label": props.placeholder }),
+    EditorView.contentAttributes.of({ "data-enable-grammarly": "false" }),
     EditorView.updateListener.of((update) => {
       if (props.readonly) {
         update.view.contentDOM.inputMode = "none"
@@ -431,7 +474,7 @@ watch(editor, () => {
     @apply border-b border-x border-divider;
     @apply overflow-y-auto;
     @apply -left-[1px];
-    @apply right-0;
+    @apply -right-[1px];
 
     top: calc(100% + 1px);
     border-radius: 0 0 8px 8px;

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

@@ -10,6 +10,7 @@
         class="flex flex-col flex-1"
       >
         <SmartTreeBranch
+          :root-nodes-length="rootNodes.data.length"
           :node-item="rootNode"
           :adapter="adapter as SmartTreeAdapter<T>"
         >

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

@@ -85,19 +85,25 @@ const props = defineProps<{
    *  The node item that will be used to render the tree branch content
    */
   nodeItem: TreeNode<T>
+  /**
+   *  Total number of rootNode
+   */
+  rootNodesLength?: number
 }>()
 
 const CHILD_SLOT_NAME = "default"
 const t = useI18n()
 
+const isOnlyRootChild = computed(() => props.rootNodesLength === 1)
+
 /**
  * Marks whether the children on this branch were ever rendered
  * See the usage inside '<template>' for more info
  */
-const childrenRendered = ref(false)
+const childrenRendered = ref(isOnlyRootChild.value)
 
-const showChildren = ref(false)
-const isNodeOpen = ref(false)
+const showChildren = ref(isOnlyRootChild.value)
+const isNodeOpen = ref(isOnlyRootChild.value)
 
 const highlightNode = ref(false)
 

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

@@ -1,21 +1,13 @@
 <template>
   <HoppSmartModal v-if="show" dialog :title="t('team.new')" @close="hideModal">
     <template #body>
-      <div class="flex flex-col">
-        <input
-          id="selectLabelTeamAdd"
-          v-model="name"
-          v-focus
-          class="input floating-input"
-          placeholder=" "
-          type="text"
-          autocomplete="off"
-          @keyup.enter="addNewTeam"
-        />
-        <label for="selectLabelTeamAdd">
-          {{ t("action.label") }}
-        </label>
-      </div>
+      <HoppSmartInput
+        v-model="name"
+        :label="t('action.label')"
+        placeholder=" "
+        input-styles="floating-input"
+        @submit="addNewTeam"
+      />
     </template>
     <template #footer>
       <span class="flex space-x-2">

packages/hoppscotch-common/src/components/teams/Edit.vue

@@ -2,21 +2,13 @@
   <HoppSmartModal v-if="show" dialog :title="t('team.edit')" @close="hideModal">
     <template #body>
       <div class="flex flex-col">
-        <div class="relative flex">
-          <input
-            id="selectLabelTeamEdit"
-            v-model="name"
-            v-focus
-            class="input floating-input"
-            placeholder=" "
-            type="text"
-            autocomplete="off"
-            @keyup.enter="saveTeam"
-          />
-          <label for="selectLabelTeamEdit">
-            {{ t("action.label") }}
-          </label>
-        </div>
+        <HoppSmartInput
+          v-model="name"
+          placeholder=" "
+          :label="t('action.label')"
+          input-styles="floating-input"
+          @submit="saveTeam"
+        />
         <div class="flex items-center justify-between flex-1 pt-4">
           <label for="memberList" class="p-4">
             {{ t("team.members") }}

packages/hoppscotch-common/src/composables/codemirror.ts

@@ -40,6 +40,8 @@ import {
 import { HoppEnvironmentPlugin } from "@helpers/editor/extensions/HoppEnvironment"
 import xmlFormat from "xml-formatter"
 import { platform } from "~/platform"
+import { invokeAction } from "~/helpers/actions"
+import { useDebounceFn } from "@vueuse/core"
 // TODO: Migrate from legacy mode
 
 type ExtendedEditorConfig = {
@@ -218,6 +220,40 @@ export function useCodemirror(
       ViewPlugin.fromClass(
         class {
           update(update: ViewUpdate) {
+            function handleTextSelection() {
+              const selection = view.value?.state.selection.main
+              if (selection) {
+                const from = selection.from
+                const to = selection.to
+                const text = view.value?.state.doc.sliceString(from, to)
+                const { top, left } = view.value?.coordsAtPos(from)
+                if (text) {
+                  invokeAction("contextmenu.open", {
+                    position: {
+                      top,
+                      left,
+                    },
+                    text,
+                  })
+                } else {
+                  invokeAction("contextmenu.open", {
+                    position: {
+                      top,
+                      left,
+                    },
+                    text: null,
+                  })
+                }
+              }
+            }
+
+            // Debounce to prevent double click from selecting the word
+            const debounceFn = useDebounceFn(() => {
+              handleTextSelection()
+            }, 140)
+
+            el.addEventListener("mouseup", debounceFn)
+            el.addEventListener("keyup", debounceFn)
             const cursorPos = update.state.selection.main.head
             const line = update.state.doc.lineAt(cursorPos)
 
@@ -276,6 +312,7 @@ export function useCodemirror(
           run: indentLess,
         },
       ]),
+      EditorView.contentAttributes.of({ "data-enable-grammarly": "false" }),
     ]
 
     if (environmentTooltip) extensions.push(environmentTooltip.extension)

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

@@ -5,9 +5,10 @@
 import { Ref, onBeforeUnmount, onMounted, watch } from "vue"
 import { BehaviorSubject } from "rxjs"
 import { HoppRESTDocument } from "./rest/document"
-import { HoppGQLRequest } from "@hoppscotch/data"
+import { HoppGQLRequest, HoppRESTRequest } from "@hoppscotch/data"
 
 export type HoppAction =
+  | "contextmenu.open" // Send/Cancel a Hoppscotch Request
   | "request.send-cancel" // Send/Cancel a Hoppscotch Request
   | "request.reset" // Clear request data
   | "request.copy-link" // Copy Request Link
@@ -24,6 +25,9 @@ export type HoppAction =
   | "modals.search.toggle" // Shows the search modal
   | "modals.support.toggle" // Shows the support modal
   | "modals.share.toggle" // Shows the share modal
+  | "modals.environment.add" // Show add environment modal via context menu
+  | "modals.my.environment.edit" // Edit current personal environment
+  | "modals.team.environment.edit" // Edit current team environment
   | "navigation.jump.rest" // Jump to REST page
   | "navigation.jump.graphql" // Jump to GraphQL page
   | "navigation.jump.realtime" // Jump to realtime page
@@ -54,6 +58,13 @@ export type HoppAction =
  * will know if you got something wrong if there is a type error in this file
  */
 type HoppActionArgsMap = {
+  "contextmenu.open": {
+    position: {
+      top: number
+      left: number
+    }
+    text: string | null
+  }
   "modals.my.environment.edit": {
     envName: string
     variableName: string
@@ -65,9 +76,22 @@ type HoppActionArgsMap = {
   "rest.request.open": {
     doc: HoppRESTDocument
   }
+  "request.save-as":
+    | {
+        requestType: "rest"
+        request: HoppRESTRequest
+      }
+    | {
+        requestType: "gql"
+        request: HoppGQLRequest
+      }
   "gql.request.open": {
     request: HoppGQLRequest
   }
+  "modals.environment.add": {
+    envName: string
+    variableName: string
+  }
 }
 
 /**

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

@@ -14,7 +14,13 @@ let keybindingsEnabled = true
  * Alt is also regarded as macOS OPTION (⌥) key
  * Ctrl is also regarded as macOS COMMAND (⌘) key (NOTE: this differs from HTML Keyboard spec where COMMAND is Meta key!)
  */
-type ModifierKeys = "ctrl" | "alt" | "ctrl-shift" | "alt-shift"
+type ModifierKeys =
+  | "ctrl"
+  | "alt"
+  | "ctrl-shift"
+  | "alt-shift"
+  | "ctrl-alt"
+  | "ctrl-alt-shift"
 
 /* eslint-disable prettier/prettier */
 // prettier-ignore
@@ -143,18 +149,19 @@ function getPressedKey(ev: KeyboardEvent): Key | null {
 }
 
 function getActiveModifier(ev: KeyboardEvent): ModifierKeys | null {
-  const isShiftKey = ev.shiftKey
+  const modifierKeys = {
+    ctrl: isAppleDevice() ? ev.metaKey : ev.ctrlKey,
+    alt: ev.altKey,
+    shift: ev.shiftKey,
+  }
 
-  // We only allow one modifier key to be pressed (for now)
-  // Control key (+ Command) gets priority and if Alt is also pressed, it is ignored
-  if (isAppleDevice() && ev.metaKey) return isShiftKey ? "ctrl-shift" : "ctrl"
-  else if (!isAppleDevice() && ev.ctrlKey)
-    return isShiftKey ? "ctrl-shift" : "ctrl"
+  // active modifier: ctrl | alt | ctrl-alt | ctrl-shift | ctrl-alt-shift | alt-shift
+  // modiferKeys object's keys are sorted to match the above order
+  const activeModifier = Object.keys(modifierKeys)
+    .filter((key) => modifierKeys[key as keyof typeof modifierKeys])
+    .join("-")
 
-  // Test for Alt key
-  if (ev.altKey) return isShiftKey ? "alt-shift" : "alt"
-
-  return null
+  return activeModifier === "" ? null : (activeModifier as ModifierKeys)
 }
 
 /**

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

@@ -181,6 +181,33 @@ export function closeTab(tabID: string) {
   tabMap.delete(tabID)
 }
 
+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
+}
+
 export function getTabRefWithSaveContext(ctx: HoppRESTSaveContext) {
   for (const tab of tabMap.values()) {
     // For `team-collection` request id can be considered unique

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

@@ -16,12 +16,12 @@ export function getShortcuts(t: (x: string) => string): ShortcutDef[] {
     },
     {
       label: t("shortcut.general.command_menu"),
-      keys: ["/"],
+      keys: [getPlatformSpecialKey(), "K"],
       section: t("shortcut.general.title"),
     },
     {
       label: t("shortcut.general.show_all"),
-      keys: [getPlatformSpecialKey(), "K"],
+      keys: [getPlatformSpecialKey(), "/"],
       section: t("shortcut.general.title"),
     },
     {

packages/hoppscotch-common/src/index.ts

@@ -10,6 +10,9 @@ import "virtual:windi.css"
 import "../assets/scss/themes.scss"
 import "../assets/scss/styles.scss"
 import "nprogress/nprogress.css"
+import "@fontsource-variable/inter"
+import "@fontsource-variable/material-symbols-rounded"
+import "@fontsource-variable/roboto-mono"
 
 import App from "./App.vue"
 

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

@@ -19,22 +19,14 @@
             :close-visibility="'hover'"
           >
             <template #tabhead>
-              <div
-                v-tippy="{ theme: 'tooltip', delay: [500, 20] }"
-                :title="tab.document.request.name"
-                class="truncate px-2"
-                @dblclick="openReqRenameModal()"
-              >
-                <span
-                  class="font-semibold text-tiny"
-                  :class="getMethodLabelColorClassOf(tab.document.request)"
-                >
-                  {{ tab.document.request.method }}
-                </span>
-                <span class="leading-8 px-2">
-                  {{ tab.document.request.name }}
-                </span>
-              </div>
+              <HttpTabHead
+                :tab="tab"
+                :is-removable="tabs.length > 1"
+                @open-rename-modal="openReqRenameModal(tab.id)"
+                @close-tab="removeTab(tab.id)"
+                @close-other-tabs="closeOtherTabsAction(tab.id)"
+                @duplicate-tab="duplicateTab(tab.id)"
+              />
             </template>
             <template #suffix>
               <span
@@ -78,12 +70,26 @@
       @hide-modal="onCloseConfirmSaveTab"
       @resolve="onResolveConfirmSaveTab"
     />
+    <HoppSmartConfirmModal
+      :show="confirmingCloseAllTabs"
+      :confirm="t('modal.close_unsaved_tab')"
+      :title="t('confirm.close_unsaved_tabs', { count: unsavedTabsCount })"
+      @hide-modal="confirmingCloseAllTabs = false"
+      @resolve="onResolveConfirmCloseAllTabs"
+    />
     <CollectionsSaveRequest
       v-if="savingRequest"
       mode="rest"
       :show="savingRequest"
       @hide-modal="onSaveModalClose"
     />
+    <AppContextMenu
+      v-if="contextMenu.show"
+      :show="contextMenu.show"
+      :position="contextMenu.position"
+      :text="contextMenu.text"
+      @hide-modal="contextMenu.show = false"
+    />
   </div>
 </template>
 
@@ -92,10 +98,10 @@ import { ref, onMounted, onBeforeUnmount, onBeforeMount } from "vue"
 import { safelyExtractRESTRequest } from "@hoppscotch/data"
 import { translateExtURLParams } from "~/helpers/RESTExtURLParams"
 import { useRoute } from "vue-router"
-import { getMethodLabelColorClassOf } from "~/helpers/rest/labelColoring"
 import { useI18n } from "@composables/i18n"
 import {
   closeTab,
+  closeOtherTabs,
   createNewTab,
   currentActiveTab,
   currentTabID,
@@ -106,6 +112,7 @@ import {
   persistableTabState,
   updateTab,
   updateTabOrdering,
+  getDirtyTabsCount,
 } from "~/helpers/rest/tab"
 import { getDefaultRESTRequest } from "~/helpers/rest/default"
 import { defineActionHandler, invokeAction } from "~/helpers/actions"
@@ -132,12 +139,33 @@ import {
 
 const savingRequest = ref(false)
 const confirmingCloseForTabID = ref<string | null>(null)
+const confirmingCloseAllTabs = ref(false)
 const showRenamingReqNameModal = ref(false)
 const reqName = ref<string>("")
+const unsavedTabsCount = ref(0)
+const exceptedTabID = ref<string | null>(null)
 
 const t = useI18n()
 const toast = useToast()
 
+type PopupDetails = {
+  show: boolean
+  position: {
+    top: number
+    left: number
+  }
+  text: string | null
+}
+
+const contextMenu = ref<PopupDetails>({
+  show: false,
+  position: {
+    top: 0,
+    left: 0,
+  },
+  text: null,
+})
+
 const tabs = getActiveTabs()
 
 const confirmSync = useReadonlyStream(currentSyncingStatus$, {
@@ -190,9 +218,42 @@ const removeTab = (tabID: string) => {
   }
 }
 
-const openReqRenameModal = () => {
+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 duplicateTab = (tabID: string) => {
+  const tab = getTabRef(tabID)
+  if (tab.value) {
+    const newTab = createNewTab({
+      request: tab.value.document.request,
+      isDirty: true,
+    })
+    currentTabID.value = newTab.id
+  }
+}
+
+const onResolveConfirmCloseAllTabs = () => {
+  if (exceptedTabID.value) closeOtherTabs(exceptedTabID.value)
+  confirmingCloseAllTabs.value = false
+}
+
+const openReqRenameModal = (tabID?: string) => {
+  if (tabID) {
+    const tab = getTabRef(tabID)
+    reqName.value = tab.value.document.request.name
+  } else {
+    reqName.value = currentActiveTab.value.document.request.name
+  }
   showRenamingReqNameModal.value = true
-  reqName.value = currentActiveTab.value.document.request.name
 }
 
 const renameReqName = () => {
@@ -365,6 +426,22 @@ function oAuthURL() {
   })
 }
 
+defineActionHandler("contextmenu.open", ({ position, text }) => {
+  if (text) {
+    contextMenu.value = {
+      show: true,
+      position,
+      text,
+    }
+  } else {
+    contextMenu.value = {
+      show: false,
+      position,
+      text,
+    }
+  }
+})
+
 setupTabStateSync()
 bindRequestToURLParams()
 oAuthURL()

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

@@ -100,55 +100,45 @@
                     <label for="displayName">
                       {{ t("settings.profile_name") }}
                     </label>
-                    <form
-                      class="flex mt-2 md:max-w-sm"
-                      @submit.prevent="updateDisplayName"
+                    <HoppSmartInput
+                      v-model="displayName"
+                      styles="mt-2 md:max-w-sm"
+                      :placeholder="`${t('settings.profile_name')}`"
                     >
-                      <input
-                        id="displayName"
-                        v-model="displayName"
-                        class="input"
-                        :placeholder="`${t('settings.profile_name')}`"
-                        type="text"
-                        autocomplete="off"
-                        required
-                      />
-                      <HoppButtonSecondary
-                        filled
-                        outline
-                        :label="t('action.save')"
-                        class="ml-2 min-w-16"
-                        type="submit"
-                        :loading="updatingDisplayName"
-                      />
-                    </form>
+                      <template #button>
+                        <HoppButtonSecondary
+                          filled
+                          outline
+                          :label="t('action.save')"
+                          class="ml-2 min-w-16"
+                          type="submit"
+                          :loading="updatingDisplayName"
+                          @click="updateDisplayName"
+                        />
+                      </template>
+                    </HoppSmartInput>
                   </div>
                   <div class="py-4">
                     <label for="emailAddress">
                       {{ t("settings.profile_email") }}
                     </label>
-                    <form
-                      class="flex mt-2 md:max-w-sm"
-                      @submit.prevent="updateEmailAddress"
+                    <HoppSmartInput
+                      v-model="emailAddress"
+                      styles="flex mt-2 md:max-w-sm"
+                      :placeholder="`${t('settings.profile_name')}`"
                     >
-                      <input
-                        id="emailAddress"
-                        v-model="emailAddress"
-                        class="input"
-                        :placeholder="`${t('settings.profile_name')}`"
-                        type="email"
-                        autocomplete="off"
-                        required
-                      />
-                      <HoppButtonSecondary
-                        filled
-                        outline
-                        :label="t('action.save')"
-                        class="ml-2 min-w-16"
-                        type="submit"
-                        :loading="updatingEmailAddress"
-                      />
-                    </form>
+                      <template #button>
+                        <HoppButtonSecondary
+                          filled
+                          outline
+                          :label="t('action.save')"
+                          class="ml-2 min-w-16"
+                          type="submit"
+                          :loading="updatingEmailAddress"
+                          @click="updateEmailAddress"
+                        />
+                      </template>
+                    </HoppSmartInput>
                   </div>
                 </section>
 
@@ -208,7 +198,6 @@ import { ref, watchEffect, computed } from "vue"
 import { platform } from "~/platform"
 
 import { invokeAction } from "~/helpers/actions"
-
 import { useReadonlyStream } from "@composables/stream"
 import { useI18n } from "@composables/i18n"
 import { useToast } from "@composables/toast"
@@ -251,9 +240,9 @@ const loadingCurrentUser = computed(() => {
   else return false
 })
 
-const displayName = ref(currentUser.value?.displayName)
+const displayName = ref(currentUser.value?.displayName || "")
 const updatingDisplayName = ref(false)
-watchEffect(() => (displayName.value = currentUser.value?.displayName))
+watchEffect(() => (displayName.value = currentUser.value?.displayName || ""))
 
 const updateDisplayName = () => {
   updatingDisplayName.value = true
@@ -270,9 +259,9 @@ const updateDisplayName = () => {
     })
 }
 
-const emailAddress = ref(currentUser.value?.email)
+const emailAddress = ref(currentUser.value?.email || "")
 const updatingEmailAddress = ref(false)
-watchEffect(() => (emailAddress.value = currentUser.value?.email))
+watchEffect(() => (emailAddress.value = currentUser.value?.email || ""))
 
 const updateEmailAddress = () => {
   updatingEmailAddress.value = true

packages/hoppscotch-common/src/pages/realtime/websocket.vue

@@ -4,38 +4,35 @@
       <div
         class="sticky top-0 z-10 flex flex-shrink-0 p-4 space-x-2 overflow-x-auto bg-primary"
       >
-        <div class="inline-flex flex-1 space-x-2">
-          <input
-            id="websocket-url"
-            v-model="url"
-            class="w-full px-4 py-2 border rounded bg-primaryLight border-divider text-secondaryDark"
-            type="url"
-            autocomplete="off"
-            spellcheck="false"
-            :class="{ error: !isUrlValid }"
-            :placeholder="`${t('websocket.url')}`"
-            :disabled="
-              connectionState === 'CONNECTED' ||
-              connectionState === 'CONNECTING'
-            "
-            @keyup.enter="isUrlValid ? toggleConnection() : null"
-          />
-          <HoppButtonPrimary
-            id="connect"
-            :disabled="!isUrlValid"
-            class="w-32"
-            name="connect"
-            :label="
-              connectionState === 'CONNECTING'
-                ? t('action.connecting')
-                : connectionState === 'DISCONNECTED'
-                ? t('action.connect')
-                : t('action.disconnect')
-            "
-            :loading="connectionState === 'CONNECTING'"
-            @click="toggleConnection"
-          />
-        </div>
+        <HoppSmartInput
+          v-model="url"
+          type="url"
+          styles="!inline-flex flex-1 space-x-2"
+          input-styles="w-full px-4 py-2 border rounded !bg-primaryLight border-divider text-secondaryDark"
+          :placeholder="`${t('websocket.url')}`"
+          :disabled="
+            connectionState === 'CONNECTED' || connectionState === 'CONNECTING'
+          "
+          @submit="isUrlValid ? toggleConnection() : null"
+        >
+          <template #button>
+            <HoppButtonPrimary
+              id="connect"
+              :disabled="!isUrlValid"
+              class="w-32"
+              name="connect"
+              :label="
+                connectionState === 'CONNECTING'
+                  ? t('action.connecting')
+                  : connectionState === 'DISCONNECTED'
+                  ? t('action.connect')
+                  : t('action.disconnect')
+              "
+              :loading="connectionState === 'CONNECTING'"
+              @click="toggleConnection"
+            />
+          </template>
+        </HoppSmartInput>
       </div>
       <HoppSmartTabs
         v-model="selectedTab"

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

@@ -193,20 +193,19 @@
               </div>
             </div>
             <div class="flex items-center py-4 space-x-2">
-              <div class="relative flex flex-col flex-1">
-                <input
-                  id="url"
-                  v-model="PROXY_URL"
-                  class="input floating-input"
-                  placeholder=" "
-                  type="url"
-                  autocomplete="off"
-                  :disabled="!PROXY_ENABLED"
-                />
-                <label for="url">
-                  {{ t("settings.proxy_url") }}
-                </label>
-              </div>
+              <HoppSmartInput
+                v-model="PROXY_URL"
+                styles="flex-1"
+                placeholder=" "
+                input-styles="input floating-input"
+                :disabled="!PROXY_ENABLED"
+              >
+                <template #label>
+                  <label for="url">
+                    {{ t("settings.proxy_url") }}
+                  </label>
+                </template>
+              </HoppSmartInput>
               <HoppButtonSecondary
                 v-tippy="{ theme: 'tooltip' }"
                 :title="t('settings.reset_default')"

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

@@ -0,0 +1,114 @@
+import { describe, it, expect, vi } from "vitest"
+import { ContextMenu, ContextMenuResult, ContextMenuService } from "../"
+import { TestContainer } from "dioc/testing"
+
+const contextMenuResult: ContextMenuResult[] = [
+  {
+    id: "result1",
+    text: { type: "text", text: "Sample Text" },
+    icon: {},
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    action: () => {},
+  },
+]
+
+const testMenu: ContextMenu = {
+  menuID: "menu1",
+  getMenuFor: () => {
+    return {
+      results: contextMenuResult,
+    }
+  },
+}
+
+describe("ContextMenuService", () => {
+  describe("registerMenu", () => {
+    it("should register a menu", () => {
+      const container = new TestContainer()
+      const service = container.bind(ContextMenuService)
+
+      service.registerMenu(testMenu)
+
+      const result = service.getMenuFor("text")
+
+      expect(result).toContainEqual(expect.objectContaining({ id: "result1" }))
+    })
+
+    it("should not register a menu twice", () => {
+      const container = new TestContainer()
+      const service = container.bind(ContextMenuService)
+
+      service.registerMenu(testMenu)
+      service.registerMenu(testMenu)
+
+      const result = service.getMenuFor("text")
+
+      expect(result).toHaveLength(1)
+    })
+
+    it("should register multiple menus", () => {
+      const container = new TestContainer()
+      const service = container.bind(ContextMenuService)
+
+      const testMenu2: ContextMenu = {
+        menuID: "menu2",
+        getMenuFor: () => {
+          return {
+            results: contextMenuResult,
+          }
+        },
+      }
+
+      service.registerMenu(testMenu)
+      service.registerMenu(testMenu2)
+
+      const result = service.getMenuFor("text")
+
+      expect(result).toHaveLength(2)
+    })
+  })
+
+  describe("getMenuFor", () => {
+    it("should get the menu", () => {
+      const sampleMenus = {
+        results: contextMenuResult,
+      }
+
+      const container = new TestContainer()
+      const service = container.bind(ContextMenuService)
+
+      service.registerMenu(testMenu)
+
+      const results = service.getMenuFor("sometext")
+
+      expect(results).toEqual(sampleMenus.results)
+    })
+
+    it("calls registered menus with correct value", () => {
+      const container = new TestContainer()
+      const service = container.bind(ContextMenuService)
+
+      const testMenu2: ContextMenu = {
+        menuID: "some-id",
+        getMenuFor: vi.fn(() => ({
+          results: contextMenuResult,
+        })),
+      }
+
+      service.registerMenu(testMenu2)
+
+      service.getMenuFor("sometext")
+
+      expect(testMenu2.getMenuFor).toHaveBeenCalledWith("sometext")
+    })
+
+    it("should return empty array if no menus are registered", () => {
+      const container = new TestContainer()
+      const service = container.bind(ContextMenuService)
+
+      const results = service.getMenuFor("sometext")
+
+      expect(results).toEqual([])
+    })
+  })
+})

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

@@ -0,0 +1,109 @@
+import { Service } from "dioc"
+import { Component } from "vue"
+
+/**
+ * Defines how to render the text in a Context Menu Search Result
+ */
+export type ContextMenuTextType<T extends object | Component = never> =
+  | {
+      type: "text"
+      text: string
+    }
+  | {
+      type: "custom"
+      /**
+       * The component to render in place of the text
+       */
+      component: T
+
+      /**
+       * The props to pass to the component
+       */
+      componentProps: T extends Component<infer Props> ? Props : never
+    }
+
+/**
+ * Defines info about a context menu result so the UI can render it
+ */
+export interface ContextMenuResult {
+  /**
+   * The unique ID of the result
+   */
+  id: string
+  /**
+   * The text to render in the result
+   */
+  text: ContextMenuTextType<any>
+  /**
+   * The icon to render as the signifier of the result
+   */
+  icon: object | Component
+  /**
+   * The action to perform when the result is selected
+   */
+  action: () => void
+  /**
+   * Additional metadata about the result
+   */
+  meta?: {
+    /**
+     * The keyboard shortcut to trigger the result
+     */
+    keyboardShortcut?: string[]
+  }
+}
+
+/**
+ * Defines the state of a context menu
+ */
+export type ContextMenuState = {
+  results: ContextMenuResult[]
+}
+
+/**
+ * Defines a context menu
+ */
+export interface ContextMenu {
+  /**
+   * The unique ID of the context menu
+   * This is used to identify the context menu
+   */
+  menuID: string
+  /**
+   * Gets the context menu for the given text
+   * @param text The text to get the context menu for
+   * @returns The context menu state
+   */
+  getMenuFor: (text: string) => ContextMenuState
+}
+
+/**
+ * Defines the context menu service
+ * This service is used to register context menus and get context menus for text
+ * This service is used by the context menu UI
+ */
+export class ContextMenuService extends Service {
+  public static readonly ID = "CONTEXT_MENU_SERVICE"
+
+  private menus: Map<string, ContextMenu> = new Map()
+
+  /**
+   * Registers a menu with the context menu service
+   * @param menu The menu to register
+   */
+  public registerMenu(menu: ContextMenu) {
+    this.menus.set(menu.menuID, menu)
+  }
+
+  /**
+   * Gets the context menu for the given text
+   * @param text The text to get the context menu for
+   */
+  public getMenuFor(text: string): ContextMenuResult[] {
+    const menus = Array.from(this.menus.values()).map((x) => x.getMenuFor(text))
+
+    const result = menus.flatMap((x) => x.results)
+
+    return result
+  }
+}

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

@@ -0,0 +1,70 @@
+import { TestContainer } from "dioc/testing"
+import { describe, expect, it, vi } from "vitest"
+import { EnvironmentMenuService } from "../environment.menu"
+import { ContextMenuService } from "../.."
+
+vi.mock("~/modules/i18n", () => ({
+  __esModule: true,
+  getI18n: () => (x: string) => x,
+}))
+
+const actionsMock = vi.hoisted(() => ({
+  invokeAction: vi.fn(),
+}))
+
+vi.mock("~/helpers/actions", async () => {
+  return {
+    __esModule: true,
+    invokeAction: actionsMock.invokeAction,
+  }
+})
+
+describe("EnvironmentMenuService", () => {
+  it("registers with the contextmenu service upon initialization", () => {
+    const container = new TestContainer()
+
+    const registerContextMenuFn = vi.fn()
+
+    container.bindMock(ContextMenuService, {
+      registerMenu: registerContextMenuFn,
+    })
+
+    const environment = container.bind(EnvironmentMenuService)
+
+    expect(registerContextMenuFn).toHaveBeenCalledOnce()
+    expect(registerContextMenuFn).toHaveBeenCalledWith(environment)
+  })
+
+  describe("getMenuFor", () => {
+    it("should return a menu for adding environment", () => {
+      const container = new TestContainer()
+      const environment = container.bind(EnvironmentMenuService)
+
+      const test = "some-text"
+      const result = environment.getMenuFor(test)
+
+      expect(result.results).toContainEqual(
+        expect.objectContaining({ id: "environment" })
+      )
+    })
+
+    it("should invoke the add environment modal", () => {
+      const container = new TestContainer()
+      const environment = container.bind(EnvironmentMenuService)
+
+      const test = "some-text"
+      const result = environment.getMenuFor(test)
+
+      const action = result.results[0].action
+      action()
+      expect(actionsMock.invokeAction).toHaveBeenCalledOnce()
+      expect(actionsMock.invokeAction).toHaveBeenCalledWith(
+        "modals.environment.add",
+        {
+          envName: "test",
+          variableName: test,
+        }
+      )
+    })
+  })
+})

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

@@ -0,0 +1,94 @@
+import { TestContainer } from "dioc/testing"
+import { describe, expect, it, vi } from "vitest"
+import { ContextMenuService } from "../.."
+import { ParameterMenuService } from "../parameter.menu"
+
+//regex containing both url and parameter
+const urlAndParameterRegex = new RegExp("[^&?]*?=[^&?]*")
+
+vi.mock("~/modules/i18n", () => ({
+  __esModule: true,
+  getI18n: () => (x: string) => x,
+}))
+
+const tabMock = vi.hoisted(() => ({
+  currentActiveTab: vi.fn(),
+}))
+
+vi.mock("~/helpers/rest/tab", () => ({
+  __esModule: true,
+  currentActiveTab: tabMock.currentActiveTab,
+}))
+
+describe("ParameterMenuService", () => {
+  it("registers with the contextmenu service upon initialization", () => {
+    const container = new TestContainer()
+
+    const registerContextMenuFn = vi.fn()
+
+    container.bindMock(ContextMenuService, {
+      registerMenu: registerContextMenuFn,
+    })
+
+    const parameter = container.bind(ParameterMenuService)
+
+    expect(registerContextMenuFn).toHaveBeenCalledOnce()
+    expect(registerContextMenuFn).toHaveBeenCalledWith(parameter)
+
+    describe("getMenuFor", () => {
+      it("validating if the text passes the regex and return the menu", () => {
+        const container = new TestContainer()
+        const parameter = container.bind(ParameterMenuService)
+
+        const test = "https://hoppscotch.io?id=some-text"
+        const result = parameter.getMenuFor(test)
+
+        if (test.match(urlAndParameterRegex)) {
+          expect(result.results).toContainEqual(
+            expect.objectContaining({ id: "parameter" })
+          )
+        } else {
+          expect(result.results).not.toContainEqual(
+            expect.objectContaining({ id: "parameter" })
+          )
+        }
+      })
+
+      it("should call the addParameter function when action is called", () => {
+        const addParameterFn = vi.fn()
+
+        const container = new TestContainer()
+        const environment = container.bind(ParameterMenuService)
+
+        const test = "https://hoppscotch.io"
+
+        const result = environment.getMenuFor(test)
+
+        const action = result.results[0].action
+
+        action()
+
+        expect(addParameterFn).toHaveBeenCalledOnce()
+        expect(addParameterFn).toHaveBeenCalledWith(action)
+      })
+
+      it("should call the extractParams function when addParameter function is called", () => {
+        const extractParamsFn = vi.fn()
+
+        const container = new TestContainer()
+        const environment = container.bind(ParameterMenuService)
+
+        const test = "https://hoppscotch.io"
+
+        const result = environment.getMenuFor(test)
+
+        const action = result.results[0].action
+
+        action()
+
+        expect(extractParamsFn).toHaveBeenCalledOnce()
+        expect(extractParamsFn).toHaveBeenCalledWith(action)
+      })
+    })
+  })
+})

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

@@ -0,0 +1,86 @@
+import { TestContainer } from "dioc/testing"
+import { describe, expect, it, vi } from "vitest"
+import { ContextMenuService } from "../.."
+import { URLMenuService } from "../url.menu"
+import { getDefaultRESTRequest } from "~/helpers/rest/default"
+
+vi.mock("~/modules/i18n", () => ({
+  __esModule: true,
+  getI18n: () => (x: string) => x,
+}))
+
+const tabMock = vi.hoisted(() => ({
+  createNewTab: vi.fn(),
+}))
+
+vi.mock("~/helpers/rest/tab", () => ({
+  __esModule: true,
+  createNewTab: tabMock.createNewTab,
+}))
+
+describe("URLMenuService", () => {
+  it("registers with the contextmenu service upon initialization", () => {
+    const container = new TestContainer()
+
+    const registerContextMenuFn = vi.fn()
+
+    container.bindMock(ContextMenuService, {
+      registerMenu: registerContextMenuFn,
+    })
+
+    const environment = container.bind(URLMenuService)
+
+    expect(registerContextMenuFn).toHaveBeenCalledOnce()
+    expect(registerContextMenuFn).toHaveBeenCalledWith(environment)
+  })
+
+  describe("getMenuFor", () => {
+    it("validating if the text passes the regex and return the menu", () => {
+      function isValidURL(url: string) {
+        try {
+          new URL(url)
+          return true
+        } catch (error) {
+          // Fallback to regular expression check
+          const pattern = /^(https?:\/\/)?([\w.-]+)(\.[\w.-]+)+([/?].*)?$/
+          return pattern.test(url)
+        }
+      }
+
+      const container = new TestContainer()
+      const url = container.bind(URLMenuService)
+
+      const test = ""
+      const result = url.getMenuFor(test)
+
+      if (isValidURL(test)) {
+        expect(result.results).toContainEqual(
+          expect.objectContaining({ id: "link-tab" })
+        )
+      } else {
+        expect(result).toEqual({ results: [] })
+      }
+    })
+
+    it("should call the openNewTab function when action is called and a new hoppscotch tab is opened", () => {
+      const container = new TestContainer()
+      const url = container.bind(URLMenuService)
+
+      const test = "https://hoppscotch.io"
+      const result = url.getMenuFor(test)
+
+      result.results[0].action()
+
+      const request = {
+        ...getDefaultRESTRequest(),
+        endpoint: test,
+      }
+
+      expect(tabMock.createNewTab).toHaveBeenCalledOnce()
+      expect(tabMock.createNewTab).toHaveBeenCalledWith({
+        request: request,
+        isDirty: false,
+      })
+    })
+  })
+})

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

@@ -0,0 +1,56 @@
+import { Service } from "dioc"
+import {
+  ContextMenu,
+  ContextMenuResult,
+  ContextMenuService,
+  ContextMenuState,
+} from "../"
+import { markRaw, ref } from "vue"
+import { invokeAction } from "~/helpers/actions"
+import IconPlusCircle from "~icons/lucide/plus-circle"
+import { getI18n } from "~/modules/i18n"
+
+/**
+ * This menu returns a single result that allows the user
+ * to add the selected text as an environment variable
+ * This menus is shown on all text selections
+ */
+export class EnvironmentMenuService extends Service implements ContextMenu {
+  public static readonly ID = "ENVIRONMENT_CONTEXT_MENU_SERVICE"
+
+  private t = getI18n()
+
+  public readonly menuID = "environment"
+
+  private readonly contextMenu = this.bind(ContextMenuService)
+
+  constructor() {
+    super()
+
+    this.contextMenu.registerMenu(this)
+  }
+
+  getMenuFor(text: Readonly<string>): ContextMenuState {
+    const results = ref<ContextMenuResult[]>([])
+    results.value = [
+      {
+        id: "environment",
+        text: {
+          type: "text",
+          text: this.t("context_menu.set_environment_variable"),
+        },
+        icon: markRaw(IconPlusCircle),
+        action: () => {
+          invokeAction("modals.environment.add", {
+            envName: "test",
+            variableName: text,
+          })
+        },
+      },
+    ]
+    const resultObj = <ContextMenuState>{
+      results: results.value,
+    }
+    return resultObj
+  }
+}

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

@@ -0,0 +1,133 @@
+import { Service } from "dioc"
+import {
+  ContextMenu,
+  ContextMenuResult,
+  ContextMenuService,
+  ContextMenuState,
+} from "../"
+import { markRaw, ref } from "vue"
+import IconArrowDownRight from "~icons/lucide/arrow-down-right"
+import { currentActiveTab } from "~/helpers/rest/tab"
+import { getI18n } from "~/modules/i18n"
+
+//regex containing both url and parameter
+const urlAndParameterRegex = new RegExp("[^&?]*?=[^&?]*")
+
+interface Param {
+  [key: string]: string
+}
+
+/**
+ * The extracted parameters from the input
+ * with the new URL if it was provided
+ */
+interface ExtractedParams {
+  params: Param
+  newURL?: string
+}
+
+/**
+ * This menu returns a single result that allows the user
+ * to add the selected text as a parameter
+ * if the selected text is a valid URL
+ */
+export class ParameterMenuService extends Service implements ContextMenu {
+  public static readonly ID = "PARAMETER_CONTEXT_MENU_SERVICE"
+
+  private t = getI18n()
+
+  public readonly menuID = "parameter"
+
+  private readonly contextMenu = this.bind(ContextMenuService)
+
+  constructor() {
+    super()
+
+    this.contextMenu.registerMenu(this)
+  }
+
+  /**
+   *
+   * @param input The input to extract the parameters from
+   * @returns The extracted parameters and the new URL if it was provided
+   */
+  private extractParams(input: string): ExtractedParams {
+    let text = input
+    let newURL: string | undefined
+
+    // if the input is a URL, extract the parameters
+    if (text.startsWith("http")) {
+      const url = new URL(text)
+      newURL = url.origin + url.pathname
+      text = url.search.slice(1)
+    }
+
+    const regex = /(\w+)=(\w+)/g
+    const matches = text.matchAll(regex)
+    const params: Param = {}
+
+    // extract the parameters from the input
+    for (const match of matches) {
+      const [, key, value] = match
+      params[key] = value
+    }
+
+    return { params, newURL }
+  }
+
+  /**
+   * Adds the parameters from the input to the current request
+   * parameters and updates the endpoint if a new URL was provided
+   * @param text The input to extract the parameters from
+   */
+  private addParameter(text: string) {
+    const { params, newURL } = this.extractParams(text)
+
+    const queryParams = []
+    for (const [key, value] of Object.entries(params)) {
+      queryParams.push({ key, value, active: true })
+    }
+
+    // add the parameters to the current request parameters
+    currentActiveTab.value.document.request.params = [
+      ...currentActiveTab.value.document.request.params,
+      ...queryParams,
+    ]
+
+    if (newURL) {
+      currentActiveTab.value.document.request.endpoint = newURL
+    } else {
+      // remove the parameter from the URL
+      const textRegex = new RegExp(`\\b${text.replace(/\?/g, "")}\\b`, "gi")
+      const sanitizedWord = currentActiveTab.value.document.request.endpoint
+      const newURL = sanitizedWord.replace(textRegex, "")
+      currentActiveTab.value.document.request.endpoint = newURL
+    }
+  }
+
+  getMenuFor(text: Readonly<string>): ContextMenuState {
+    const results = ref<ContextMenuResult[]>([])
+
+    if (urlAndParameterRegex.test(text)) {
+      results.value = [
+        {
+          id: "environment",
+          text: {
+            type: "text",
+            text: this.t("context_menu.add_parameter"),
+          },
+          icon: markRaw(IconArrowDownRight),
+          action: () => {
+            this.addParameter(text)
+          },
+        },
+      ]
+    }
+
+    const resultObj = <ContextMenuState>{
+      results: results.value,
+    }
+
+    return resultObj
+  }
+}

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

@@ -0,0 +1,89 @@
+import { Service } from "dioc"
+import {
+  ContextMenu,
+  ContextMenuResult,
+  ContextMenuService,
+  ContextMenuState,
+} from ".."
+import { markRaw, ref } from "vue"
+import IconCopyPlus from "~icons/lucide/copy-plus"
+import { createNewTab } from "~/helpers/rest/tab"
+import { getDefaultRESTRequest } from "~/helpers/rest/default"
+import { getI18n } from "~/modules/i18n"
+
+/**
+ * Used to check if a string is a valid URL
+ * @param url The string to check
+ * @returns Whether the string is a valid URL
+ */
+function isValidURL(url: string) {
+  try {
+    // Try to create a URL object
+    // this will fail for endpoints like "localhost:3000", ie without a protocol
+    new URL(url)
+    return true
+  } catch (error) {
+    // Fallback to regular expression check
+    const pattern = /^(https?:\/\/)?([\w.-]+)(\.[\w.-]+)+([/?].*)?$/
+    return pattern.test(url)
+  }
+}
+
+export class URLMenuService extends Service implements ContextMenu {
+  public static readonly ID = "URL_CONTEXT_MENU_SERVICE"
+
+  private t = getI18n()
+
+  public readonly menuID = "url"
+
+  private readonly contextMenu = this.bind(ContextMenuService)
+
+  constructor() {
+    super()
+
+    this.contextMenu.registerMenu(this)
+  }
+
+  /**
+   * Opens a new tab with the provided URL
+   * @param url The URL to open
+   */
+  private openNewTab(url: string) {
+    //create a new request object
+    const request = {
+      ...getDefaultRESTRequest(),
+      endpoint: url,
+    }
+
+    createNewTab({
+      request: request,
+      isDirty: false,
+    })
+  }
+
+  getMenuFor(text: Readonly<string>): ContextMenuState {
+    const results = ref<ContextMenuResult[]>([])
+
+    if (isValidURL(text)) {
+      results.value = [
+        {
+          id: "link-tab",
+          text: {
+            type: "text",
+            text: this.t("context_menu.open_link_in_new_tab"),
+          },
+          icon: markRaw(IconCopyPlus),
+          action: () => {
+            this.openNewTab(text)
+          },
+        },
+      ]
+    }
+
+    const resultObj = <ContextMenuState>{
+      results: results.value,
+    }
+
+    return resultObj
+  }
+}

packages/hoppscotch-common/tsconfig.json

@@ -15,17 +15,18 @@
     "skipLibCheck": true,
     "noUnusedLocals": true,
     "paths": {
-      "~/*": [ "./src/*" ],
-      "@composables/*": [ "./src/composables/*" ],
-      "@components/*": [ "./src/components/*" ],
-      "@helpers/*": [ "./src/helpers/*" ],
-      "@modules/*": [ "./src/modules/*" ],
-      "@workers/*": [ "./src/workers/*" ],
-      "@functional/*": [ "./src/helpers/functional/*" ]
+      "~/*": ["./src/*"],
+      "@composables/*": ["./src/composables/*"],
+      "@components/*": ["./src/components/*"],
+      "@helpers/*": ["./src/helpers/*"],
+      "@modules/*": ["./src/modules/*"],
+      "@workers/*": ["./src/workers/*"],
+      "@functional/*": ["./src/helpers/functional/*"]
     },
     "types": [
       "vite/client",
       "unplugin-icons/types/vue",
+      "unplugin-fonts/client",
       "vite-plugin-pages/client",
       "vite-plugin-vue-layouts/client",
       "vite-plugin-pwa/client"

packages/hoppscotch-selfhost-web/Dockerfile

@@ -6,7 +6,7 @@ WORKDIR /usr/src/app
 RUN npm i -g pnpm
 
 COPY . .
-RUN pnpm install
+RUN pnpm install --force --frozen-lockfile
 
 WORKDIR /usr/src/app/packages/hoppscotch-selfhost-web/
 RUN pnpm run build

packages/hoppscotch-selfhost-web/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@hoppscotch/selfhost-web",
   "private": true,
-  "version": "2023.4.7",
+  "version": "2023.4.8",
   "type": "module",
   "scripts": {
     "dev:vite": "vite",
     "dev:gql-codegen": "graphql-codegen --require dotenv/config --config gql-codegen.yml dotenv_config_path=\"../../.env\" --watch",
     "dev": "pnpm exec npm-run-all -p -l dev:*",
-    "build": "node --max_old_space_size=16384 ./node_modules/vite/bin/vite.js build",
+    "build": "node --max_old_space_size=4096 ./node_modules/vite/bin/vite.js build",
     "preview": "vite preview",
     "lint": "eslint src --ext .ts,.js,.vue --ignore-path .gitignore .",
     "lint:ts": "vue-tsc --noEmit",
@@ -23,6 +23,9 @@
     "postinstall": "pnpm run gql-codegen"
   },
   "dependencies": {
+    "@fontsource-variable/inter": "^5.0.5",
+    "@fontsource-variable/material-symbols-rounded": "^5.0.5",
+    "@fontsource-variable/roboto-mono": "^5.0.6",
     "@hoppscotch/common": "workspace:^",
     "@hoppscotch/data": "workspace:^",
     "axios": "^0.21.4",
@@ -59,14 +62,14 @@
     "eslint-plugin-vue": "^9.5.1",
     "npm-run-all": "^4.1.5",
     "typescript": "^4.6.4",
+    "unplugin-fonts": "^1.0.3",
     "unplugin-icons": "^0.14.9",
     "unplugin-vue-components": "^0.21.0",
     "vite": "^3.2.3",
-    "vite-plugin-fonts": "^0.6.0",
     "vite-plugin-html-config": "^1.0.10",
     "vite-plugin-inspect": "^0.7.4",
     "vite-plugin-pages": "^0.26.0",
-    "vite-plugin-pages-sitemap": "^1.4.0",
+    "vite-plugin-pages-sitemap": "^1.4.5",
     "vite-plugin-pwa": "^0.13.1",
     "vite-plugin-static-copy": "^0.12.0",
     "vite-plugin-vue-layouts": "^0.7.0",

packages/hoppscotch-selfhost-web/tsconfig.json

@@ -13,12 +13,11 @@
     "skipLibCheck": true,
     "noEmit": true,
     "paths": {
-      "@hoppscotch/common": [ "../hoppscotch-common/src/index.ts" ],
-      "@hoppscotch/common/*": [ "../hoppscotch-common/src/*" ],
+      "@hoppscotch/common": ["../hoppscotch-common/src/index.ts"],
+      "@hoppscotch/common/*": ["../hoppscotch-common/src/*"],
       "@platform/*": ["./src/platform/*"],
-      "@lib/*": ["./src/lib/*"],
+      "@lib/*": ["./src/lib/*"]
     }
-
   },
   "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
   "references": [{ "path": "./tsconfig.node.json" }]

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

@@ -15,7 +15,7 @@ import Layouts from "vite-plugin-vue-layouts"
 import IconResolver from "unplugin-icons/resolver"
 import { FileSystemIconLoader } from "unplugin-icons/loaders"
 import * as path from "path"
-import { VitePluginFonts } from "vite-plugin-fonts"
+import Unfonts from "unplugin-fonts/vite"
 import legacy from "@vitejs/plugin-legacy"
 
 const ENV = loadEnv("development", path.resolve(__dirname, "../../"))
@@ -78,16 +78,14 @@ export default defineConfig({
       routeStyle: "nuxt",
       dirs: "../hoppscotch-common/src/pages",
       importMode: "async",
-      onRoutesGenerated(routes) {
-        // HACK: See: https://github.com/jbaubree/vite-plugin-pages-sitemap/issues/173
-        return ((generateSitemap as any).default as typeof generateSitemap)({
+      onRoutesGenerated: (routes) =>
+        generateSitemap({
           routes,
           nuxtStyle: true,
           allowRobots: true,
           dest: ".sitemap-gen",
           hostname: ENV.VITE_BASE_URL,
-        })
-      },
+        }),
     }),
     StaticCopy({
       targets: [
@@ -219,12 +217,21 @@ export default defineConfig({
         ],
       },
     }),
-    VitePluginFonts({
-      google: {
+    Unfonts({
+      fontsource: {
         families: [
-          "Inter:wght@400;500;600;700;800",
-          "Roboto+Mono:wght@400;500",
-          "Material+Icons",
+          {
+            name: "Inter Variable",
+            variables: ["variable-full"],
+          },
+          {
+            name: "Material Symbols Rounded Variable",
+            variables: ["variable-full"],
+          },
+          {
+            name: "Roboto Mono Variable",
+            variables: ["variable-full"],
+          },
         ],
       },
     }),

packages/hoppscotch-sh-admin/Dockerfile

@@ -6,7 +6,7 @@ WORKDIR /usr/src/app
 RUN npm i -g pnpm
 
 COPY . .
-RUN pnpm install
+RUN pnpm install --force --frozen-lockfile
 
 WORKDIR /usr/src/app/packages/hoppscotch-sh-admin/
 RUN pnpm run build

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

@@ -4,6 +4,7 @@
   @apply after:backface-hidden;
   @apply selection:bg-accentDark;
   @apply selection:text-accentContrast;
+  @apply overscroll-none;
 }
 
 :root {

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

@@ -1,7 +1,7 @@
 @mixin base-theme {
-  --font-sans: 'Inter', sans-serif;
-  --font-mono: 'Roboto Mono', monospace;
-  --font-icon: 'Material Icons';
+  --font-sans: "Inter Variable", sans-serif;
+  --font-icon: "Material Symbols Rounded Variable";
+  --font-mono: "Roboto Mono Variable", monospace;
   --font-size-tiny: calc(var(--font-size-body) - 0.062rem);
 }
 

packages/hoppscotch-sh-admin/package.json

@@ -1,7 +1,7 @@
 {
   "name": "hoppscotch-sh-admin",
   "private": true,
-  "version": "2023.4.7",
+  "version": "2023.4.8",
   "type": "module",
   "scripts": {
     "dev": "pnpm exec npm-run-all -p -l dev:*",
@@ -13,6 +13,9 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@fontsource-variable/inter": "^5.0.5",
+    "@fontsource-variable/material-symbols-rounded": "^5.0.5",
+    "@fontsource-variable/roboto-mono": "^5.0.6",
     "@graphql-typed-document-node/core": "^3.1.1",
     "@hoppscotch/ui": "workspace:^",
     "@hoppscotch/vue-toasted": "^0.1.0",
@@ -56,6 +59,7 @@
     "sass": "^1.57.1",
     "ts-node": "^10.9.1",
     "typescript": "^4.9.3",
+    "unplugin-fonts": "^1.0.3",
     "vite": "^3.1.4",
     "vite-plugin-pages": "^0.26.0",
     "vite-plugin-vue-layouts": "^0.7.0",

packages/hoppscotch-sh-admin/src/components.d.ts

@@ -14,6 +14,22 @@ declare module '@vue/runtime-core' {
     AppSidebar: typeof import('./components/app/Sidebar.vue')['default']
     AppToast: typeof import('./components/app/Toast.vue')['default']
     DashboardMetricsCard: typeof import('./components/dashboard/MetricsCard.vue')['default']
+    HoppButtonPrimary: typeof import('@hoppscotch/ui')['HoppButtonPrimary']
+    HoppButtonSecondary: typeof import('@hoppscotch/ui')['HoppButtonSecondary']
+    HoppSmartAnchor: typeof import('@hoppscotch/ui')['HoppSmartAnchor']
+    HoppSmartAutoComplete: typeof import('@hoppscotch/ui')['HoppSmartAutoComplete']
+    HoppSmartConfirmModal: typeof import('@hoppscotch/ui')['HoppSmartConfirmModal']
+    HoppSmartInput: typeof import('@hoppscotch/ui')['HoppSmartInput']
+    HoppSmartItem: typeof import('@hoppscotch/ui')['HoppSmartItem']
+    HoppSmartModal: typeof import('@hoppscotch/ui')['HoppSmartModal']
+    HoppSmartPicture: typeof import('@hoppscotch/ui')['HoppSmartPicture']
+    HoppSmartSpinner: typeof import('@hoppscotch/ui')['HoppSmartSpinner']
+    HoppSmartTab: typeof import('@hoppscotch/ui')['HoppSmartTab']
+    IconLucideArrowLeft: typeof import('~icons/lucide/arrow-left')['default']
+    IconLucideChevronDown: typeof import('~icons/lucide/chevron-down')['default']
+    IconLucideHelpCircle: typeof import('~icons/lucide/help-circle')['default']
+    IconLucideInbox: typeof import('~icons/lucide/inbox')['default']
+    IconLucideUser: typeof import('~icons/lucide/user')['default']
     TeamsAdd: typeof import('./components/teams/Add.vue')['default']
     TeamsDetails: typeof import('./components/teams/Details.vue')['default']
     TeamsInvite: typeof import('./components/teams/Invite.vue')['default']

packages/hoppscotch-sh-admin/src/components/app/Login.vue

@@ -41,22 +41,14 @@
         class="flex flex-col space-y-4"
         @submit.prevent="signInWithEmail"
       >
-        <div class="flex flex-col">
-          <input
-            id="email"
-            v-model="form.email"
-            class="input floating-input"
-            placeholder=" "
-            type="email"
-            name="email"
-            autocomplete="off"
-            required
-            spellcheck="false"
-            v-focus
-            autofocus
-          />
-          <label for="email"> Email </label>
-        </div>
+        <HoppSmartInput
+          v-model="form.email"
+          type="email"
+          placeholder=" "
+          input-styles="floating-input"
+          label="Email"
+        />
+
         <HoppButtonPrimary
           :loading="signingInWithEmail"
           type="submit"

packages/hoppscotch-sh-admin/src/components/teams/Add.vue

@@ -18,18 +18,8 @@
             @input="(email: string) => getOwnerEmail(email)"
           />
         </div>
-        <div class="flex flex-col">
-          <label for="teamName" class="py-2">{{ t('teams.name') }} </label>
-          <input
-            id="teamName"
-            v-model="teamName"
-            v-focus
-            class="input relative"
-            placeholder=""
-            type="email"
-            autocomplete="off"
-          />
-        </div>
+        <label for="teamName"> {{ t('teams.name') }} </label>
+        <HoppSmartInput v-model="teamName" placeholder="" class="!my-2" />
       </div>
     </template>
     <template #footer>

packages/hoppscotch-sh-admin/src/components/teams/Details.vue

@@ -20,24 +20,26 @@
             '!border-accent': showRenameInput,
           }"
         >
-          <input
-            class="bg-transparent flex-1 p-3 rounded-md !rounded-r-none disabled:select-none border-r-0 disabled:cursor-default disabled:opacity-50"
-            type="text"
+          <HoppSmartInput
             v-model="newTeamName"
+            styles="bg-transparent flex-1 rounded-md !rounded-r-none disabled:select-none border-r-0 disabled:cursor-default disabled:opacity-50"
             placeholder="Team Name"
-            autofocus
             :disabled="!showRenameInput"
-            v-focus
-          />
-          <HoppButtonPrimary
-            class="!rounded-l-none"
-            filled
-            :icon="showRenameInput ? IconSave : IconEdit"
-            :label="
-              showRenameInput ? `${t('teams.rename')}` : `${t('teams.edit')}`
-            "
-            @click="handleNameEdit()"
-          />
+          >
+            <template #button>
+              <HoppButtonPrimary
+                class="!rounded-l-none"
+                filled
+                :icon="showRenameInput ? IconSave : IconEdit"
+                :label="
+                  showRenameInput
+                    ? `${t('teams.rename')}`
+                    : `${t('teams.edit')}`
+                "
+                @click="handleNameEdit()"
+              />
+            </template>
+          </HoppSmartInput>
         </div>
       </div>
 

packages/hoppscotch-sh-admin/src/components/users/InviteModal.vue

@@ -6,19 +6,11 @@
     @close="$emit('hide-modal')"
   >
     <template #body>
-      <div class="flex flex-col">
-        <input
-          id="inviteUserEmail"
-          v-model="email"
-          v-focus
-          class="input floating-input"
-          placeholder=" "
-          type="text"
-          autocomplete="off"
-          @keyup.enter="sendInvite"
-        />
-        <label for="inviteUserEmail">{{ t('users.email_address') }}</label>
-      </div>
+      <HoppSmartInput
+        v-model="email"
+        :label="t('users.email_address')"
+        input-styles="floating-input"
+      />
     </template>
     <template #footer>
       <span class="flex space-x-2">

packages/hoppscotch-sh-admin/src/main.ts

@@ -7,6 +7,9 @@ import 'virtual:windi.css';
 import '@hoppscotch/ui/style.css';
 import '../assets/scss/themes.scss';
 import '../assets/scss/styles.scss';
+import '@fontsource-variable/inter';
+import '@fontsource-variable/material-symbols-rounded';
+import '@fontsource-variable/roboto-mono';
 // END STYLES
 
 import { HOPP_MODULES } from './modules';

packages/hoppscotch-sh-admin/tsconfig.json

@@ -25,6 +25,7 @@
     "types": [
       "vite/client",
       "unplugin-icons/types/vue",
+      "unplugin-fonts/client",
       "vite-plugin-pages/client",
       "vite-plugin-vue-layouts/client"
     ]

packages/hoppscotch-sh-admin/vite.config.ts

@@ -2,6 +2,7 @@ import { defineConfig } from 'vite';
 import vue from '@vitejs/plugin-vue';
 import { FileSystemIconLoader } from 'unplugin-icons/loaders';
 import Icons from 'unplugin-icons/vite';
+import Unfonts from "unplugin-fonts/vite";
 import IconResolver from 'unplugin-icons/resolver';
 import Components from 'unplugin-vue-components/vite';
 import WindiCSS from 'vite-plugin-windicss';
@@ -68,5 +69,23 @@ export default defineConfig({
         auth: FileSystemIconLoader('../hoppscotch-sh-admin/assets/icons/auth'),
       },
     }),
+    Unfonts({
+      fontsource: {
+        families: [
+          {
+            name: "Inter Variable",
+            variables: ["variable-full"],
+          },
+          {
+            name: "Material Symbols Rounded Variable",
+            variables: ["variable-full"],
+          },
+          {
+            name: "Roboto Mono Variable",
+            variables: ["variable-full"],
+          },
+        ],
+      },
+    }),
   ],
 });

packages/hoppscotch-ui/histoire.setup.ts

@@ -1,5 +1,8 @@
 import "./src/assets/scss/styles.scss"
 import "./src/assets/scss/themes.scss"
 import "virtual:windi.css"
+import "@fontsource-variable/inter"
+import "@fontsource-variable/material-symbols-rounded"
+import "@fontsource-variable/roboto-mono"
 
 export function setupVue3() {}

packages/hoppscotch-ui/package.json

@@ -18,6 +18,9 @@
     "vue-router": "^4.0.16"
   },
   "dependencies": {
+    "@fontsource-variable/inter": "^5.0.5",
+    "@fontsource-variable/material-symbols-rounded": "^5.0.5",
+    "@fontsource-variable/roboto-mono": "^5.0.6",
     "@hoppscotch/vue-toasted": "^0.1.0",
     "@lezer/highlight": "^1.0.0",
     "@vitejs/plugin-legacy": "^2.3.0",
@@ -47,7 +50,7 @@
     "@esbuild-plugins/node-globals-polyfill": "^0.1.1",
     "@esbuild-plugins/node-modules-polyfill": "^0.1.4",
     "@histoire/plugin-vue": "^0.12.4",
-    "@iconify-json/lucide": "^1.1.40",
+    "@iconify-json/lucide": "^1.1.109",
     "@intlify/vite-plugin-vue-i18n": "^6.0.1",
     "@rushstack/eslint-patch": "^1.1.4",
     "@types/lodash-es": "^4.17.6",
@@ -67,16 +70,17 @@
     "rollup-plugin-polyfill-node": "^0.10.1",
     "sass": "^1.53.0",
     "typescript": "^4.5.4",
+    "unplugin-fonts": "^1.0.3",
     "unplugin-icons": "^0.15.3",
     "unplugin-vue-components": "^0.21.0",
     "vite": "^3.2.3",
     "vite-plugin-checker": "^0.5.1",
-    "vite-plugin-dts": "2.0.0-beta.3",
+    "vite-plugin-dts": "3.2.0",
     "vite-plugin-fonts": "^0.6.0",
     "vite-plugin-html-config": "^1.0.10",
     "vite-plugin-inspect": "^0.7.4",
     "vite-plugin-pages": "^0.26.0",
-    "vite-plugin-pages-sitemap": "^1.4.0",
+    "vite-plugin-pages-sitemap": "^1.4.5",
     "vite-plugin-pwa": "^0.13.1",
     "vite-plugin-vue-layouts": "^0.7.0",
     "vite-plugin-windicss": "^1.8.8",

packages/hoppscotch-ui/src/assets/scss/styles.scss

@@ -4,6 +4,7 @@
   @apply after:backface-hidden;
   @apply selection:bg-accentDark;
   @apply selection:text-accentContrast;
+  @apply overscroll-none;
 }
 
 :root {

packages/hoppscotch-ui/src/assets/scss/themes.scss

@@ -1,7 +1,7 @@
 @mixin base-theme {
-  --font-sans: "Inter", sans-serif;
-  --font-mono: "Roboto Mono", monospace;
-  --font-icon: "Material Icons";
+  --font-sans: "Inter Variable", sans-serif;
+  --font-icon: "Material Symbols Rounded Variable";
+  --font-mono: "Roboto Mono Variable", monospace;
   --font-size-tiny: calc(var(--font-size-body) - 0.062rem);
 }
 

packages/hoppscotch-ui/src/components/smart/Anchor.vue

@@ -1,62 +1,55 @@
 <template>
-  <HoppSmartLink :to="to" :exact="exact" :blank="blank" class="inline-flex items-center justify-center focus:outline-none"
+  <HoppSmartLink
+    :to="to"
+    :exact="exact"
+    :blank="blank"
+    class="inline-flex items-center justify-center focus:outline-none"
     :class="[
       color
         ? `text-${color}-500 hover:text-${color}-600 focus-visible:text-${color}-600`
         : 'hover:text-secondaryDark focus-visible:text-secondaryDark',
       { 'opacity-75 cursor-not-allowed': disabled },
       { 'flex-row-reverse': reverse },
-    ]" :disabled="disabled" tabindex="0">
-    <component :is="icon" v-if="icon" class="svg-icons" :class="label ? (reverse ? 'ml-2' : 'mr-2') : ''" />
+    ]"
+    :disabled="disabled"
+    tabindex="0"
+  >
+    <component
+      :is="icon"
+      v-if="icon"
+      class="svg-icons"
+      :class="label ? (reverse ? 'ml-2' : 'mr-2') : ''"
+    />
     {{ label }}
   </HoppSmartLink>
 </template>
 
-<script lang="ts">
-import HoppSmartLink from "./Link.vue";
-import { Component, defineComponent, PropType } from "vue"
+<script setup lang="ts">
+import HoppSmartLink from "./Link.vue"
+import type { Component } from "vue"
 
-export default defineComponent({
-  components: {
-    HoppSmartLink
-  },
-  props: {
-    to: {
-      type: String,
-      default: "",
-    },
-    exact: {
-      type: Boolean,
-      default: true,
-    },
-    blank: {
-      type: Boolean,
-      default: false,
-    },
-    label: {
-      type: String,
-      default: "",
-    },
-    icon: {
-      type: Object as PropType<Component | null>,
-      default: null,
-    },
-    svg: {
-      type: Object as PropType<Component | null>,
-      default: null,
-    },
-    color: {
-      type: String,
-      default: "",
-    },
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-    reverse: {
-      type: Boolean,
-      default: false,
-    },
-  },
-})
+withDefaults(
+  defineProps<{
+    to: string
+    exact: boolean
+    blank: boolean
+    label: string
+    icon: Component | null
+    svg: Component | null
+    color: string
+    disabled: boolean
+    reverse: boolean
+  }>(),
+  {
+    to: "",
+    exact: true,
+    blank: false,
+    label: "",
+    icon: null,
+    svg: null,
+    color: "",
+    disabled: false,
+    reverse: false,
+  }
+)
 </script>