feat: .env.example updated

feat: env variable changed
feat: tippy menu for history and tab (#3220 )
2023-08-08 14:10:50 +05:30 · 2023-08-08 14:10:50 +05:30 · 2023-08-08 13:23:11 +05:30 · 2023-08-08 12:18:01 +05:30 · 2023-08-05 23:45:02 +05:30 · 2023-08-05 23:43:02 +05:30
75 changed files with 1414 additions and 821 deletions
--- a/.dockerignore
+++ b/.dockerignore
@@ -0,0 +1 @@
+*/**/node_modules
--- a/.env.example
+++ b/.env.example
@@ -13,7 +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"
-ALLOWED_AUTH_PROVIDERS = GOOGLE,GITHUB,MICROSOFT,EMAIL
+VITE_ALLOWED_AUTH_PROVIDERS = GOOGLE,GITHUB,MICROSOFT,EMAIL

 # Google Auth Config
 GOOGLE_CLIENT_ID="************************************************"
--- a/.github/workflows/tests.yml
+++ b/.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:
--- a/docker-compose.yml
+++ b/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


--- a/packages/hoppscotch-backend/package.json
+++ b/packages/hoppscotch-backend/package.json
@@ -1,6 +1,6 @@
 {
  "name": "hoppscotch-backend",
-  "version": "2023.4.7",
+  "version": "2023.4.8",
  "description": "",
  "author": "",
  "private": true,
--- a/packages/hoppscotch-backend/src/auth/helper.ts
+++ b/packages/hoppscotch-backend/src/auth/helper.ts
@@ -107,7 +107,7 @@ export const subscriptionContextCookieParser = (rawCookies: string) => {
 };

 /**
- * Check to see if given auth provider is present in the ALLOWED_AUTH_PROVIDERS env variable
+ * 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
@@ -117,8 +117,8 @@ export function authProviderCheck(provider: string) {
    throwErr(AUTH_PROVIDER_NOT_SPECIFIED);
  }

-  const envVariables = process.env.ALLOWED_AUTH_PROVIDERS
-    ? process.env.ALLOWED_AUTH_PROVIDERS.split(',').map((provider) =>
+  const envVariables = process.env.VITE_ALLOWED_AUTH_PROVIDERS
+    ? process.env.VITE_ALLOWED_AUTH_PROVIDERS.split(',').map((provider) =>
        provider.trim().toUpperCase(),
      )
    : [];
--- a/packages/hoppscotch-backend/src/errors.ts
+++ b/packages/hoppscotch-backend/src/errors.ts
@@ -29,22 +29,22 @@ export const JSON_INVALID = 'json_invalid';
 export const AUTH_PROVIDER_NOT_SPECIFIED = 'auth/provider_not_specified';

 /**
- * Environment variable "ALLOWED_AUTH_PROVIDERS" is not present in .env file
+ * Environment variable "VITE_ALLOWED_AUTH_PROVIDERS" is not present in .env file
 */
 export const ENV_NOT_FOUND_KEY_AUTH_PROVIDERS =
-  '"ALLOWED_AUTH_PROVIDERS" is not present in .env file';
+  '"VITE_ALLOWED_AUTH_PROVIDERS" is not present in .env file';

 /**
- * Environment variable "ALLOWED_AUTH_PROVIDERS" is empty in .env file
+ * Environment variable "VITE_ALLOWED_AUTH_PROVIDERS" is empty in .env file
 */
 export const ENV_EMPTY_AUTH_PROVIDERS =
-  '"ALLOWED_AUTH_PROVIDERS" is empty in .env file';
+  '"VITE_ALLOWED_AUTH_PROVIDERS" is empty in .env file';

 /**
- * Environment variable "ALLOWED_AUTH_PROVIDERS" contains unsupported provider in .env file
+ * Environment variable "VITE_ALLOWED_AUTH_PROVIDERS" contains unsupported provider in .env file
 */
 export const ENV_NOT_SUPPORT_AUTH_PROVIDERS =
-  '"ALLOWED_AUTH_PROVIDERS" contains an unsupported auth provider in .env file';
+  '"VITE_ALLOWED_AUTH_PROVIDERS" contains an unsupported auth provider in .env file';

 /**
 * Tried to delete a user data document from fb firestore but failed.
--- a/packages/hoppscotch-backend/src/team-environments/team-environments.service.spec.ts
+++ b/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(
--- a/packages/hoppscotch-backend/src/utils.ts
+++ b/packages/hoppscotch-backend/src/utils.ts
@@ -9,7 +9,12 @@ 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 { ENV_EMPTY_AUTH_PROVIDERS, ENV_NOT_FOUND_KEY_AUTH_PROVIDERS, ENV_NOT_SUPPORT_AUTH_PROVIDERS, 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';

 /**
@@ -156,21 +161,21 @@ export function isValidLength(title: string, length: number) {

 /**
 * This function is called by bootstrap() in main.ts
- *  It checks if the "ALLOWED_AUTH_PROVIDERS" environment variable is properly set or not.
+ *  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('ALLOWED_AUTH_PROVIDERS')) {
+  if (!process.env.hasOwnProperty('VITE_ALLOWED_AUTH_PROVIDERS')) {
    throw new Error(ENV_NOT_FOUND_KEY_AUTH_PROVIDERS);
  }

-  if (process.env.ALLOWED_AUTH_PROVIDERS === '') {
+  if (process.env.VITE_ALLOWED_AUTH_PROVIDERS === '') {
    throw new Error(ENV_EMPTY_AUTH_PROVIDERS);
  }

-  const givenAuthProviders = process.env.ALLOWED_AUTH_PROVIDERS.split(',').map(
-    (provider) => provider.toLocaleUpperCase(),
-  );
+  const givenAuthProviders = process.env.VITE_ALLOWED_AUTH_PROVIDERS.split(
+    ',',
+  ).map((provider) => provider.toLocaleUpperCase());
  const supportedAuthProviders = Object.values(AuthProvider).map(
    (provider: string) => provider.toLocaleUpperCase(),
  );
--- a/packages/hoppscotch-common/assets/scss/themes.scss
+++ b/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);
 }

--- a/packages/hoppscotch-common/locales/en.json
+++ b/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,6 +151,7 @@
    "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": {
@@ -432,6 +435,7 @@
    "payload": "Payload",
    "query": "Query",
    "raw_body": "Raw Request Body",
+    "rename": "Rename Request",
    "renamed": "Request renamed",
    "run": "Run",
    "save": "Save",
@@ -658,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",
--- a/packages/hoppscotch-common/locales/tw.json
+++ b/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": "工作區"
  }
 }
--- a/packages/hoppscotch-common/package.json
+++ b/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:^",
@@ -139,11 +142,11 @@
    "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",
--- a/packages/hoppscotch-common/public/badge.svg
+++ b/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>
--- a/packages/hoppscotch-common/src/components.d.ts
+++ b/packages/hoppscotch-common/src/components.d.ts
@@ -1,32 +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']
-    AppContextMenu: typeof import('./components/app/ContextMenu.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']
@@ -55,7 +245,6 @@ declare module '@vue/runtime-core' {
    CollectionsSaveRequest: typeof import('./components/collections/SaveRequest.vue')['default']
    CollectionsTeamCollections: typeof import('./components/collections/TeamCollections.vue')['default']
    Environments: typeof import('./components/environments/index.vue')['default']
-    EnvironmentsAdd: typeof import('./components/environments/Add.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']
@@ -85,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']
@@ -96,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']
@@ -117,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,9 +326,9 @@ declare module '@vue/runtime-core' {
    IconLucideLayers: typeof import('~icons/lucide/layers')['default']
    IconLucideListEnd: typeof import('~icons/lucide/list-end')['default']
    IconLucideMinus: typeof import('~icons/lucide/minus')['default']
-    IconLucideRss: typeof import('~icons/lucide/rss')['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']
@@ -172,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']
@@ -198,5 +389,4 @@ declare module '@vue/runtime-core' {
    WorkspaceCurrent: typeof import('./components/workspace/Current.vue')['default']
    WorkspaceSelector: typeof import('./components/workspace/Selector.vue')['default']
  }
-
 }
--- a/packages/hoppscotch-common/src/components/app/Shortcuts.vue
+++ b/packages/hoppscotch-common/src/components/app/Shortcuts.vue
@@ -4,15 +4,13 @@
      <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
@@ -21,6 +19,7 @@
        >
          <icon-lucide-search class="pb-2 opacity-75 svg-icons" />
        </HoppSmartPlaceholder>
+
        <details
          v-for="(sectionResults, sectionTitle) in shortcutsResults"
          v-else
--- a/packages/hoppscotch-common/src/components/collections/Add.vue
+++ b/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">
--- a/packages/hoppscotch-common/src/components/collections/AddFolder.vue
+++ b/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">
--- a/packages/hoppscotch-common/src/components/collections/AddRequest.vue
+++ b/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">
--- a/packages/hoppscotch-common/src/components/collections/Edit.vue
+++ b/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">
--- a/packages/hoppscotch-common/src/components/collections/EditFolder.vue
+++ b/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">
--- a/packages/hoppscotch-common/src/components/collections/EditRequest.vue
+++ b/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">
--- a/packages/hoppscotch-common/src/components/collections/SaveRequest.vue
+++ b/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

--- a/packages/hoppscotch-common/src/components/collections/graphql/Add.vue
+++ b/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">
--- a/packages/hoppscotch-common/src/components/collections/graphql/AddFolder.vue
+++ b/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">
--- a/packages/hoppscotch-common/src/components/collections/graphql/AddRequest.vue
+++ b/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">
--- a/packages/hoppscotch-common/src/components/collections/graphql/Edit.vue
+++ b/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">
--- a/packages/hoppscotch-common/src/components/collections/graphql/EditFolder.vue
+++ b/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">
--- a/packages/hoppscotch-common/src/components/collections/graphql/EditRequest.vue
+++ b/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">
--- a/packages/hoppscotch-common/src/components/collections/graphql/index.vue
+++ b/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"
--- a/packages/hoppscotch-common/src/components/collections/index.vue
+++ b/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>
--- a/packages/hoppscotch-common/src/components/environments/my/Details.vue
+++ b/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") }}
--- a/packages/hoppscotch-common/src/components/environments/teams/Details.vue
+++ b/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") }}
--- a/packages/hoppscotch-common/src/components/firebase/Login.vue
+++ b/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"
--- a/packages/hoppscotch-common/src/components/history/index.vue
+++ b/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")
--- a/packages/hoppscotch-common/src/components/history/rest/Card.vue
+++ b/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(() => {
--- a/packages/hoppscotch-common/src/components/http/Request.vue
+++ b/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"))
--- a/packages/hoppscotch-common/src/components/http/TabHead.vue
+++ b/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>
--- a/packages/hoppscotch-common/src/components/smart/ChangeLanguage.vue
+++ b/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"
--- a/packages/hoppscotch-common/src/components/smart/EnvInput.vue
+++ b/packages/hoppscotch-common/src/components/smart/EnvInput.vue
@@ -342,7 +342,6 @@ const initView = (el: any) => {
  el.addEventListener("keyup", debounceFn)

  const extensions: Extension = [
-    EditorView.lineWrapping,
    EditorView.contentAttributes.of({ "aria-label": props.placeholder }),
    EditorView.contentAttributes.of({ "data-enable-grammarly": "false" }),
    EditorView.updateListener.of((update) => {
--- a/packages/hoppscotch-common/src/components/teams/Add.vue
+++ b/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">
--- a/packages/hoppscotch-common/src/components/teams/Edit.vue
+++ b/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") }}
--- a/packages/hoppscotch-common/src/helpers/actions.ts
+++ b/packages/hoppscotch-common/src/helpers/actions.ts
@@ -5,7 +5,7 @@
 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
@@ -76,6 +76,15 @@ type HoppActionArgsMap = {
  "rest.request.open": {
    doc: HoppRESTDocument
  }
+  "request.save-as":
+    | {
+        requestType: "rest"
+        request: HoppRESTRequest
+      }
+    | {
+        requestType: "gql"
+        request: HoppGQLRequest
+      }
  "gql.request.open": {
    request: HoppGQLRequest
  }
--- a/packages/hoppscotch-common/src/helpers/keybindings.ts
+++ b/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)
 }

 /**
--- a/packages/hoppscotch-common/src/helpers/rest/tab.ts
+++ b/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
--- a/packages/hoppscotch-common/src/index.ts
+++ b/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"

--- a/packages/hoppscotch-common/src/pages/index.vue
+++ b/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,6 +70,13 @@
      @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"
@@ -99,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,
@@ -113,6 +112,7 @@ import {
  persistableTabState,
  updateTab,
  updateTabOrdering,
+  getDirtyTabsCount,
 } from "~/helpers/rest/tab"
 import { getDefaultRESTRequest } from "~/helpers/rest/default"
 import { defineActionHandler, invokeAction } from "~/helpers/actions"
@@ -139,8 +139,11 @@ 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()
@@ -215,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 = () => {
--- a/packages/hoppscotch-common/src/pages/profile.vue
+++ b/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
--- a/packages/hoppscotch-common/src/pages/realtime/websocket.vue
+++ b/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"
--- a/packages/hoppscotch-common/src/pages/settings.vue
+++ b/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')"
--- a/packages/hoppscotch-common/tsconfig.json
+++ b/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"
--- a/packages/hoppscotch-selfhost-web/Dockerfile
+++ b/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
--- a/packages/hoppscotch-selfhost-web/package.json
+++ b/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,10 +62,10 @@
    "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",
--- a/packages/hoppscotch-selfhost-web/tsconfig.json
+++ b/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" }]
--- a/packages/hoppscotch-selfhost-web/vite.config.ts
+++ b/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, "../../"))
@@ -217,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"],
+          },
        ],
      },
    }),
--- a/packages/hoppscotch-sh-admin/Dockerfile
+++ b/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
--- a/packages/hoppscotch-sh-admin/assets/scss/themes.scss
+++ b/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);
 }

--- a/packages/hoppscotch-sh-admin/package.json
+++ b/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",
--- a/packages/hoppscotch-sh-admin/src/components.d.ts
+++ b/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']
--- a/packages/hoppscotch-sh-admin/src/components/app/Login.vue
+++ b/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"
--- a/packages/hoppscotch-sh-admin/src/components/teams/Add.vue
+++ b/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>
--- a/packages/hoppscotch-sh-admin/src/components/teams/Details.vue
+++ b/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>

--- a/packages/hoppscotch-sh-admin/src/components/users/InviteModal.vue
+++ b/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">
--- a/packages/hoppscotch-sh-admin/src/main.ts
+++ b/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';
--- a/packages/hoppscotch-sh-admin/tsconfig.json
+++ b/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"
    ]
--- a/packages/hoppscotch-sh-admin/vite.config.ts
+++ b/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"],
+          },
+        ],
+      },
+    }),
  ],
 });
--- a/packages/hoppscotch-ui/histoire.setup.ts
+++ b/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() {}
--- a/packages/hoppscotch-ui/package.json
+++ b/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",
@@ -67,11 +70,12 @@
    "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",
--- a/packages/hoppscotch-ui/src/assets/scss/themes.scss
+++ b/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);
 }

--- a/packages/hoppscotch-ui/src/components/smart/Anchor.vue
+++ b/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>
--- a/packages/hoppscotch-ui/src/components/smart/Input.vue
+++ b/packages/hoppscotch-ui/src/components/smart/Input.vue
@@ -0,0 +1,69 @@
+<template>
+  <div class="relative flex" :class="styles">
+    <input
+      :id="inputID"
+      class="input"
+      :class="inputStyles"
+      v-model="inputText"
+      v-focus
+      :placeholder="placeholder"
+      :type="type"
+      @keyup.enter="emit('submit')"
+      autocomplete="off"
+      required
+      :disabled="disabled"
+    />
+
+    <label v-if="label.length > 0" :for="inputID"> {{ label }} </label>
+    <slot name="button"></slot>
+  </div>
+</template>
+
+<script lang="ts">
+/*
+  This inputIDCounter is tracked in the global scope in order to ensure that each input has a unique ID.
+  When we use this component multiple times on the same page, we need to ensure that each input has a unique ID.
+  This is because the label's for attribute needs to match the input's id attribute.
+
+  That's why we use a global counter that increments each time we use this component.
+*/
+let inputIDCounter = 564275
+</script>
+
+<script setup lang="ts">
+import { useVModel } from "@vueuse/core"
+import { defineProps } from "vue"
+
+// Unique ID for input
+const inputID = `input-${inputIDCounter++}`
+
+const props = withDefaults(
+  defineProps<{
+    id: string
+    styles: string
+    modelValue: string | null
+    placeholder: string
+    inputStyles: string | (string | false)[]
+    type: string
+    label: string
+    disabled: boolean
+  }>(),
+  {
+    id: "",
+    styles: "",
+    modelValue: "",
+    placeholder: "",
+    inputStyles: "input",
+    type: "text",
+    label: "",
+    disabled: false,
+  }
+)
+
+const emit = defineEmits<{
+  (e: "submit"): void
+  (e: "update:modelValue", v: string): void
+}>()
+
+const inputText = useVModel(props, "modelValue", emit)
+</script>
--- a/packages/hoppscotch-ui/src/components/smart/index.ts
+++ b/packages/hoppscotch-ui/src/components/smart/index.ts
@@ -4,6 +4,7 @@ export { default as HoppSmartCheckbox } from "./Checkbox.vue"
 export { default as HoppSmartConfirmModal } from "./ConfirmModal.vue"
 export { default as HoppSmartExpand } from "./Expand.vue"
 export { default as HoppSmartFileChip } from "./FileChip.vue"
+export { default as HoppSmartInput } from "./Input.vue"
 export { default as HoppSmartIntersection } from "./Intersection.vue"
 export { default as HoppSmartItem } from "./Item.vue"
 export { default as HoppSmartLink } from "./Link.vue"
--- a/packages/hoppscotch-ui/tsconfig.json
+++ b/packages/hoppscotch-ui/tsconfig.json
@@ -11,47 +11,26 @@
    "resolveJsonModule": true,
    "isolatedModules": true,
    "esModuleInterop": true,
-    "lib": [
-      "ESNext",
-      "DOM"
-    ],
+    "lib": ["ESNext", "DOM"],
    "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"
    ]
  },
-  "include": [
-    "src/**/*.ts",
-    "src/**/*.d.ts",
-    "src/**/*.tsx",
-    "src/**/*.vue"
-  ]
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
 }
--- a/packages/hoppscotch-ui/vite.config.ts
+++ b/packages/hoppscotch-ui/vite.config.ts
@@ -4,28 +4,36 @@ import path from "path"
 import Icons from "unplugin-icons/vite"
 import { defineConfig } from "vite"
 import WindiCSS from "vite-plugin-windicss"
-import { VitePluginFonts } from "vite-plugin-fonts"
+import Unfonts from "unplugin-fonts/vite"

 export default defineConfig({
  plugins: [
    vue(),
    dts({
      insertTypesEntry: true,
-      skipDiagnostics: true,
-      outputDir: ['dist']
+      outDir: ["dist"],
    }),
    WindiCSS({
      root: path.resolve(__dirname),
    }),
    Icons({
-      compiler: "vue3"
+      compiler: "vue3",
    }),
-    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"],
+          },
        ],
      },
    }),
@@ -45,6 +53,6 @@ export default defineConfig({
        exports: "named",
      },
    },
-    emptyOutDir: true
+    emptyOutDir: true,
  },
 })
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -407,6 +407,15 @@ importers:
      '@codemirror/view':
        specifier: ^6.0.2
        version: 6.0.2
+      '@fontsource-variable/inter':
+        specifier: ^5.0.5
+        version: 5.0.5
+      '@fontsource-variable/material-symbols-rounded':
+        specifier: ^5.0.5
+        version: 5.0.5
+      '@fontsource-variable/roboto-mono':
+        specifier: ^5.0.6
+        version: 5.0.6
      '@hoppscotch/codemirror-lang-graphql':
        specifier: workspace:^
        version: link:../codemirror-lang-graphql
@@ -720,6 +729,9 @@ importers:
      typescript:
        specifier: ^4.5.4
        version: 4.7.4
+      unplugin-fonts:
+        specifier: ^1.0.3
+        version: 1.0.3(vite@3.1.4)
      unplugin-icons:
        specifier: ^0.14.9
        version: 0.14.9(@vue/compiler-sfc@3.2.39)(esbuild@0.17.19)(rollup@2.79.1)(vite@3.1.4)
@@ -732,9 +744,6 @@ importers:
      vite-plugin-checker:
        specifier: ^0.5.1
        version: 0.5.1(eslint@8.24.0)(typescript@4.7.4)(vite@3.1.4)
-      vite-plugin-fonts:
-        specifier: ^0.6.0
-        version: 0.6.0(vite@3.1.4)
      vite-plugin-html-config:
        specifier: ^1.0.10
        version: 1.0.10(vite@3.1.4)
@@ -857,6 +866,15 @@ importers:

  packages/hoppscotch-selfhost-web:
    dependencies:
+      '@fontsource-variable/inter':
+        specifier: ^5.0.5
+        version: 5.0.5
+      '@fontsource-variable/material-symbols-rounded':
+        specifier: ^5.0.5
+        version: 5.0.5
+      '@fontsource-variable/roboto-mono':
+        specifier: ^5.0.6
+        version: 5.0.6
      '@hoppscotch/common':
        specifier: workspace:^
        version: link:../hoppscotch-common
@@ -960,6 +978,9 @@ importers:
      typescript:
        specifier: ^4.6.4
        version: 4.9.3
+      unplugin-fonts:
+        specifier: ^1.0.3
+        version: 1.0.3(vite@3.2.4)
      unplugin-icons:
        specifier: ^0.14.9
        version: 0.14.9(@vue/compiler-sfc@3.2.39)(esbuild@0.17.19)(rollup@2.79.1)(vite@3.1.4)
@@ -969,9 +990,6 @@ importers:
      vite:
        specifier: ^3.2.3
        version: 3.2.4(@types/node@17.0.45)(sass@1.53.0)(terser@5.14.1)
-      vite-plugin-fonts:
-        specifier: ^0.6.0
-        version: 0.6.0(vite@3.2.4)
      vite-plugin-html-config:
        specifier: ^1.0.10
        version: 1.0.10(vite@3.2.4)
@@ -1008,6 +1026,15 @@ importers:

  packages/hoppscotch-sh-admin:
    dependencies:
+      '@fontsource-variable/inter':
+        specifier: ^5.0.5
+        version: 5.0.5
+      '@fontsource-variable/material-symbols-rounded':
+        specifier: ^5.0.5
+        version: 5.0.5
+      '@fontsource-variable/roboto-mono':
+        specifier: ^5.0.6
+        version: 5.0.6
      '@graphql-typed-document-node/core':
        specifier: ^3.1.1
        version: 3.1.1(graphql@16.6.0)
@@ -1132,6 +1159,9 @@ importers:
      typescript:
        specifier: ^4.9.3
        version: 4.9.3
+      unplugin-fonts:
+        specifier: ^1.0.3
+        version: 1.0.3(vite@3.2.4)
      vite:
        specifier: ^3.1.4
        version: 3.2.4(@types/node@17.0.45)(sass@1.53.0)(terser@5.14.1)
@@ -1153,6 +1183,15 @@ importers:

  packages/hoppscotch-ui:
    dependencies:
+      '@fontsource-variable/inter':
+        specifier: ^5.0.5
+        version: 5.0.5
+      '@fontsource-variable/material-symbols-rounded':
+        specifier: ^5.0.5
+        version: 5.0.5
+      '@fontsource-variable/roboto-mono':
+        specifier: ^5.0.6
+        version: 5.0.6
      '@hoppscotch/vue-toasted':
        specifier: ^0.1.0
        version: 0.1.0(vue@3.2.45)
@@ -1295,6 +1334,9 @@ importers:
      typescript:
        specifier: ^4.5.4
        version: 4.9.3
+      unplugin-fonts:
+        specifier: ^1.0.3
+        version: 1.0.3(vite@3.2.4)
      unplugin-icons:
        specifier: ^0.15.3
        version: 0.15.3(@vue/compiler-sfc@3.2.45)
@@ -1308,8 +1350,8 @@ importers:
        specifier: ^0.5.1
        version: 0.5.1(eslint@8.29.0)(typescript@4.9.3)(vite@3.2.4)
      vite-plugin-dts:
-        specifier: 2.0.0-beta.3
-        version: 2.0.0-beta.3(@types/node@17.0.45)(rollup@2.79.1)(vite@3.2.4)
+        specifier: 3.2.0
+        version: 3.2.0(@types/node@17.0.45)(sass@1.53.0)(terser@5.14.1)(typescript@4.9.3)
      vite-plugin-fonts:
        specifier: ^0.6.0
        version: 0.6.0(vite@3.2.4)
@@ -2011,14 +2053,6 @@ packages:
    dependencies:
      '@babel/types': 7.18.7

-  /@babel/parser@7.20.15:
-    resolution: {integrity: sha512-DI4a1oZuf8wC+oAJA9RW6ga3Zbe8RZFt7kD9i4qAspz3I/yHet1VvC3DiSy/fsUvv5pvJuNPh0LPOdCcqinDPg==}
-    engines: {node: '>=6.0.0'}
-    hasBin: true
-    dependencies:
-      '@babel/types': 7.20.7
-    dev: true
-
  /@babel/parser@7.22.5:
    resolution: {integrity: sha512-DFZMC9LJUG9PLOclRC32G63UXwzqS2koQC8dkx+PLdmt1xSePYpbT/NbsrJy8Q/muXz7o/h/d4A7Fuyixm559Q==}
    engines: {node: '>=6.0.0'}
@@ -4276,6 +4310,18 @@ packages:
    resolution: {integrity: sha512-zThUKcqIU6utWzM93uEvhlh8qj8A5LMPFJPvk/ODb+8GSSif19xM2Lw1M2ijyBy8+6skSkQBbavPzOU5Oh/8tQ==}
    dev: false

+  /@fontsource-variable/inter@5.0.5:
+    resolution: {integrity: sha512-hmj/jffr+1tabEPmvm+/b89MtbO6hd5PVbQ6HoMGTO7RMF5eD2C9UcprCgZTOF3OWh5uC21C9HZGN0O9wxe+UQ==}
+    dev: false
+
+  /@fontsource-variable/material-symbols-rounded@5.0.5:
+    resolution: {integrity: sha512-HSCzawb0Vq0f4UYwLdlYsSCjfNw6LUwXKG8pgc0f8dIpG+NapWVfGFObIVL0to4byKmvvGueXC8GjljSn73HMA==}
+    dev: false
+
+  /@fontsource-variable/roboto-mono@5.0.6:
+    resolution: {integrity: sha512-n2TfINPd+mycq6husov36SWO6v1/dKDhxNf6LtB7mKrCtBjWyTAJiC1qjiRmYT4I69/cNQZhlu3Jd+f+JQIR6g==}
+    dev: false
+
  /@graphql-codegen/add@3.2.0(graphql@15.8.0):
    resolution: {integrity: sha512-8hyr5XvTDGnpiT4nH2yH8PP4SWtUEIUdkFaZbkpkFkU0Ud9dplvSviOCdxdArffZ1FHy0XYLTMa2it+UJOtszg==}
    peerDependencies:
@@ -5855,7 +5901,7 @@ packages:
    dependencies:
      '@intlify/message-compiler': 9.3.0-beta.20
      '@intlify/shared': 9.3.0-beta.20
-      acorn: 8.8.2
+      acorn: 8.10.0
      escodegen: 2.0.0
      estree-walker: 2.0.2
      jsonc-eslint-parser: 1.4.1
@@ -6008,6 +6054,7 @@ packages:

  /@ioredis/commands@1.2.0:
    resolution: {integrity: sha512-Sx1pU8EM64o2BrqNpEO1CNLtKQwyhuXuqyfH7oGKCk+1a33d2r5saW8zNwm3j6BTExtjrv2BxTgzzkMwts6vGg==}
+    requiresBuild: true
    dev: false
    optional: true

@@ -6620,32 +6667,32 @@ packages:
    resolution: {integrity: sha512-EWUguj2kd7ldmrF9F+vI5hUOralPd+sdsUnYbRy33vZTuZkduC1shE9TtEMEjAQwyfyMb4ole5KtjF8MsnQOlA==}
    dev: true

-  /@microsoft/api-extractor-model@7.26.4(@types/node@17.0.45):
-    resolution: {integrity: sha512-PDCgCzXDo+SLY5bsfl4bS7hxaeEtnXj7XtuzEE+BtALp7B5mK/NrS2kHWU69pohgsRmEALycQdaQPXoyT2i5MQ==}
+  /@microsoft/api-extractor-model@7.27.5(@types/node@17.0.45):
+    resolution: {integrity: sha512-9/tBzYMJitR+o+zkPr1lQh2+e8ClcaTF6eZo7vZGDqRt2O5XmXWPbYJZmxyM3wb5at6lfJNEeGZrQXLjsQ0Nbw==}
    dependencies:
      '@microsoft/tsdoc': 0.14.2
      '@microsoft/tsdoc-config': 0.16.2
-      '@rushstack/node-core-library': 3.55.2(@types/node@17.0.45)
+      '@rushstack/node-core-library': 3.59.6(@types/node@17.0.45)
    transitivePeerDependencies:
      - '@types/node'
    dev: true

-  /@microsoft/api-extractor@7.34.4(@types/node@17.0.45):
-    resolution: {integrity: sha512-HOdcci2nT40ejhwPC3Xja9G+WSJmWhCUKKryRfQYsmE9cD+pxmBaKBKCbuS9jUcl6bLLb4Gz+h7xEN5r0QiXnQ==}
+  /@microsoft/api-extractor@7.36.3(@types/node@17.0.45):
+    resolution: {integrity: sha512-u0H6362AQq+r55X8drHx4npgkrCfJnMzRRHfQo8PMNKB8TcBnrTLfXhXWi+xnTM6CzlU/netEN8c4bq581Rnrg==}
    hasBin: true
    dependencies:
-      '@microsoft/api-extractor-model': 7.26.4(@types/node@17.0.45)
+      '@microsoft/api-extractor-model': 7.27.5(@types/node@17.0.45)
      '@microsoft/tsdoc': 0.14.2
      '@microsoft/tsdoc-config': 0.16.2
-      '@rushstack/node-core-library': 3.55.2(@types/node@17.0.45)
-      '@rushstack/rig-package': 0.3.18
-      '@rushstack/ts-command-line': 4.13.2
+      '@rushstack/node-core-library': 3.59.6(@types/node@17.0.45)
+      '@rushstack/rig-package': 0.4.0
+      '@rushstack/ts-command-line': 4.15.1
      colors: 1.2.5
      lodash: 4.17.21
      resolve: 1.22.1
-      semver: 7.3.8
+      semver: 7.5.4
      source-map: 0.6.1
-      typescript: 4.8.4
+      typescript: 5.0.4
    transitivePeerDependencies:
      - '@types/node'
    dev: true
@@ -7225,8 +7272,8 @@ packages:
    resolution: {integrity: sha512-LwzQKA4vzIct1zNZzBmRKI9QuNpLgTQMEjsQLf3BXuGYb3QPTP4Yjf6mkdX+X1mYttZ808QpOwAzZjv28kq7DA==}
    dev: true

-  /@rushstack/node-core-library@3.55.2(@types/node@17.0.45):
-    resolution: {integrity: sha512-SaLe/x/Q/uBVdNFK5V1xXvsVps0y7h1sN7aSJllQyFbugyOaxhNRF25bwEDnicARNEjJw0pk0lYnJQ9Kr6ev0A==}
+  /@rushstack/node-core-library@3.59.6(@types/node@17.0.45):
+    resolution: {integrity: sha512-bMYJwNFfWXRNUuHnsE9wMlW/mOB4jIwSUkRKtu02CwZhQdmzMsUbxE0s1xOLwTpNIwlzfW/YT7OnOHgDffLgYg==}
    peerDependencies:
      '@types/node': '*'
    peerDependenciesMeta:
@@ -7239,19 +7286,19 @@ packages:
      import-lazy: 4.0.0
      jju: 1.4.0
      resolve: 1.22.1
-      semver: 7.3.8
+      semver: 7.5.4
      z-schema: 5.0.5
    dev: true

-  /@rushstack/rig-package@0.3.18:
-    resolution: {integrity: sha512-SGEwNTwNq9bI3pkdd01yCaH+gAsHqs0uxfGvtw9b0LJXH52qooWXnrFTRRLG1aL9pf+M2CARdrA9HLHJys3jiQ==}
+  /@rushstack/rig-package@0.4.0:
+    resolution: {integrity: sha512-FnM1TQLJYwSiurP6aYSnansprK5l8WUK8VG38CmAaZs29ZeL1msjK0AP1VS4ejD33G0kE/2cpsPsS9jDenBMxw==}
    dependencies:
      resolve: 1.22.1
      strip-json-comments: 3.1.1
    dev: true

-  /@rushstack/ts-command-line@4.13.2:
-    resolution: {integrity: sha512-bCU8qoL9HyWiciltfzg7GqdfODUeda/JpI0602kbN5YH22rzTxyqYvv7aRLENCM7XCQ1VRs7nMkEqgJUOU8Sag==}
+  /@rushstack/ts-command-line@4.15.1:
+    resolution: {integrity: sha512-EL4jxZe5fhb1uVL/P/wQO+Z8Rc8FMiWJ1G7VgnPDvdIt5GVjRfK7vwzder1CZQiX3x0PY6uxENYLNGTFd1InRQ==}
    dependencies:
      '@types/argparse': 1.0.38
      argparse: 1.0.10
@@ -7513,15 +7560,6 @@ packages:
    engines: {node: '>= 10'}
    dev: true

-  /@ts-morph/common@0.18.1:
-    resolution: {integrity: sha512-RVE+zSRICWRsfrkAw5qCAK+4ZH9kwEFv5h0+/YeHTLieWP7F4wWq4JsKFuNWG+fYh/KF+8rAtgdj5zb2mm+DVA==}
-    dependencies:
-      fast-glob: 3.2.12
-      minimatch: 5.1.0
-      mkdirp: 1.0.4
-      path-browserify: 1.0.1
-    dev: true
-
  /@tsconfig/node10@1.0.9:
    resolution: {integrity: sha512-jNsYVVxU8v5g43Erja32laIDHXeoNvFEpX33OK4d6hljo3jDhCBDhx5dhCCTMWUojscpAagGiRkBKxpdl9fxqA==}

@@ -8733,6 +8771,12 @@ packages:
      muggle-string: 0.1.0
    dev: true

+  /@volar/language-core@1.10.0:
+    resolution: {integrity: sha512-ddyWwSYqcbEZNFHm+Z3NZd6M7Ihjcwl/9B5cZd8kECdimVXUFdFi60XHWD27nrWtUQIsUYIG7Ca1WBwV2u2LSQ==}
+    dependencies:
+      '@volar/source-map': 1.10.0
+    dev: true
+
  /@volar/shared@0.27.24:
    resolution: {integrity: sha512-Mi8a4GQaiorfb+o4EqOXDZm9E/uBJXgScFgF+NhtcMBOUKHNMKQyLI7YRGumtyJTTdaX7nSDJjGGTkv23tcOtQ==}
    dependencies:
@@ -8757,6 +8801,12 @@ packages:
      muggle-string: 0.1.0
    dev: true

+  /@volar/source-map@1.10.0:
+    resolution: {integrity: sha512-/ibWdcOzDGiq/GM1JU2eX8fH1bvAhl66hfe8yEgLEzg9txgr6qb5sQ/DEz5PcDL75tF5H5sCRRwn8Eu8ezi9mw==}
+    dependencies:
+      muggle-string: 0.3.1
+    dev: true
+
  /@volar/transforms@0.27.24:
    resolution: {integrity: sha512-sOHi1ZSapFlxn7yPl4MO5TXd9aWC0BVq2CgXAJ2EESb+ddh2uJbGQgLLNocX+MDh419cUuuFT2QAJpuWHhJcng==}
    dependencies:
@@ -8770,6 +8820,12 @@ packages:
      '@volar/language-core': 1.0.9
    dev: true

+  /@volar/typescript@1.10.0:
+    resolution: {integrity: sha512-OtqGtFbUKYC0pLNIk3mHQp5xWnvL1CJIUc9VE39VdZ/oqpoBh5jKfb9uJ45Y4/oP/WYTrif/Uxl1k8VTPz66Gg==}
+    dependencies:
+      '@volar/language-core': 1.10.0
+    dev: true
+
  /@volar/vue-code-gen@0.38.2:
    resolution: {integrity: sha512-whLunD6phSGWBUHZKdTxeglrpzQu26ii8CRVapFdjfyMaVhQ7ESNeIAhkTVyg2ovOPc0PiDYPQEPzfWAADIWog==}
    dependencies:
@@ -8991,6 +9047,25 @@ packages:
      - supports-color
    dev: true

+  /@vue/language-core@1.8.8(typescript@4.9.3):
+    resolution: {integrity: sha512-i4KMTuPazf48yMdYoebTkgSOJdFraE4pQf0B+FTOFkbB+6hAfjrSou/UmYWRsWyZV6r4Rc6DDZdI39CJwL0rWw==}
+    peerDependencies:
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+    dependencies:
+      '@volar/language-core': 1.10.0
+      '@volar/source-map': 1.10.0
+      '@vue/compiler-dom': 3.3.4
+      '@vue/reactivity': 3.3.4
+      '@vue/shared': 3.3.4
+      minimatch: 9.0.3
+      muggle-string: 0.3.1
+      typescript: 4.9.3
+      vue-template-compiler: 2.7.14
+    dev: true
+
  /@vue/reactivity-transform@3.2.37:
    resolution: {integrity: sha512-IWopkKEb+8qpu/1eMKVeXrK0NLw9HicGviJzhJDEyfxTR9e1WtpnnbYkJWurX6WwoFP0sz10xQg8yL8lgskAZg==}
    dependencies:
@@ -9034,6 +9109,12 @@ packages:
    dependencies:
      '@vue/shared': 3.2.45

+  /@vue/reactivity@3.3.4:
+    resolution: {integrity: sha512-kLTDLwd0B1jG08NBF3R5rqULtv/f8x3rOFByTDz4J53ttIQEDmALqKqXY0J+XQeN0aV2FBxY8nJDf88yvOPAqQ==}
+    dependencies:
+      '@vue/shared': 3.3.4
+    dev: true
+
  /@vue/runtime-core@3.2.37:
    resolution: {integrity: sha512-JPcd9kFyEdXLl/i0ClS7lwgcs0QpUAWj+SKX2ZC3ANKi1U4DOtiEr6cRqFXsPwY5u1L9fAjkinIdB8Rz3FoYNQ==}
    dependencies:
@@ -9098,6 +9179,15 @@ packages:
    resolution: {integrity: sha512-7OjdcV8vQ74eiz1TZLzZP4JwqM5fA94K6yntPS5Z25r9HDuGNzaGdgvwKYq6S+MxwF0TFRwe50fIR/MYnakdkQ==}
    dev: true

+  /@vue/typescript@1.8.8(typescript@4.9.3):
+    resolution: {integrity: sha512-jUnmMB6egu5wl342eaUH236v8tdcEPXXkPgj+eI/F6JwW/lb+yAU6U07ZbQ3MVabZRlupIlPESB7ajgAGixhow==}
+    dependencies:
+      '@volar/typescript': 1.10.0
+      '@vue/language-core': 1.8.8(typescript@4.9.3)
+    transitivePeerDependencies:
+      - typescript
+    dev: true
+
  /@vueuse/core@8.7.5(vue@3.2.45):
    resolution: {integrity: sha512-tqgzeZGoZcXzoit4kOGLWJibDMLp0vdm6ZO41SSUQhkhtrPhAg6dbIEPiahhUu6sZAmSYvVrZgEr5aKD51nrLA==}
    peerDependencies:
@@ -9429,7 +9519,7 @@ packages:
  /acorn-globals@7.0.1:
    resolution: {integrity: sha512-umOSDSDrfHbTNPuNpC2NSnnA3LUrqpevPb4T9jRx4MagXNS0rs+gwiTcAvqCRmsD6utzsrzNt+ebm00SNWiC3Q==}
    dependencies:
-      acorn: 8.8.2
+      acorn: 8.10.0
      acorn-walk: 8.2.0
    dev: true

@@ -9448,6 +9538,14 @@ packages:
      acorn: 7.4.1
    dev: true

+  /acorn-jsx@5.3.2(acorn@8.10.0):
+    resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
+    peerDependencies:
+      acorn: ^6.0.0 || ^7.0.0 || ^8.0.0
+    dependencies:
+      acorn: 8.10.0
+    dev: true
+
  /acorn-jsx@5.3.2(acorn@8.8.0):
    resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
    peerDependencies:
@@ -9455,14 +9553,6 @@ packages:
    dependencies:
      acorn: 8.8.0

-  /acorn-jsx@5.3.2(acorn@8.8.2):
-    resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
-    peerDependencies:
-      acorn: ^6.0.0 || ^7.0.0 || ^8.0.0
-    dependencies:
-      acorn: 8.8.2
-    dev: true
-
  /acorn-loose@6.1.0:
    resolution: {integrity: sha512-FHhXoiF0Uch3IqsrnPpWwCtiv5PYvipTpT1k9lDMgQVVYc9iDuSl5zdJV358aI8twfHCYMFBRVYvAVki9wC/ng==}
    engines: {node: '>=0.4.0'}
@@ -9495,6 +9585,11 @@ packages:
    engines: {node: '>=0.4.0'}
    hasBin: true

+  /acorn@8.10.0:
+    resolution: {integrity: sha512-F0SAmZ8iUtS//m8DmCTA0jlh6TDKkHQyK6xc6V4KDTyZKA9dnvX9/3sRTVQrWm79glUAZbnmmNcdYwUIHWVybw==}
+    engines: {node: '>=0.4.0'}
+    hasBin: true
+
  /acorn@8.8.0:
    resolution: {integrity: sha512-QOxyigPVrpZ2GXT+PFyZTl6TtOFc5egxHIP9IlQ+RbupQuX4RkT/Bee4/kQuC02Xkzg84JcT7oLYtDIQxp+v7w==}
    engines: {node: '>=0.4.0'}
@@ -9876,6 +9971,7 @@ packages:

  /async@3.2.4:
    resolution: {integrity: sha512-iAB+JbDEGXhyIUavoDl9WP/Jj106Kz9DEn1DPgYw5ruDn0e3Wgi3sKFm55sASdGBNOQB8F59d9qQ7deqrHA8wQ==}
+    requiresBuild: true

  /asynckit@0.4.0:
    resolution: {integrity: sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==}
@@ -10661,6 +10757,7 @@ packages:
  /cluster-key-slot@1.1.2:
    resolution: {integrity: sha512-RMr0FhtfXemyinomL4hrWcYJxmX6deFdCxpJzhDttxgO1+bcCnkk+9drydLVDmAMG7NE6aN/fl4F7ucU/90gAA==}
    engines: {node: '>=0.10.0'}
+    requiresBuild: true
    dev: false
    optional: true

@@ -10669,10 +10766,6 @@ packages:
    engines: {iojs: '>= 1.0.0', node: '>= 0.12.0'}
    dev: true

-  /code-block-writer@11.0.3:
-    resolution: {integrity: sha512-NiujjUFB4SwScJq2bwbYUtXbZhBSlY6vYzm++3Q6oC+U+injTqfPYFK8wS9COOmb2lueqp0ZRB4nK1VYeHgNyw==}
-    dev: true
-
  /collect-v8-coverage@1.0.1:
    resolution: {integrity: sha512-iBPtljfCNcTKNAto0KEtDfZ3qzjJvqE3aTGZsbhjSBlorqpXJlaWWtPO35D+ZImoC3KWejX64o+yPGxhWSTzfg==}
    dev: true
@@ -11369,6 +11462,7 @@ packages:
  /denque@2.1.0:
    resolution: {integrity: sha512-HVQE3AAb/pxF8fQAoiqpvg9i3evqug3hoiwakOyZAwJm+6vZehbkYXZ0l4JxS+I3QxM97v5aaRNhj8v5oBhekw==}
    engines: {node: '>=0.10'}
+    requiresBuild: true
    dev: false
    optional: true

@@ -12793,8 +12887,8 @@ packages:
    resolution: {integrity: sha512-D211tC7ZwouTIuY5x9XnS0E9sWNChB7IYKX/Xp5eQj3nFXhqmiUDB9q27y76oFl8jTg3pXcQx/bpxMfs3CIZbA==}
    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
    dependencies:
-      acorn: 8.8.2
-      acorn-jsx: 5.3.2(acorn@8.8.2)
+      acorn: 8.10.0
+      acorn-jsx: 5.3.2(acorn@8.10.0)
      eslint-visitor-keys: 3.4.1
    dev: true

@@ -12810,8 +12904,8 @@ packages:
    resolution: {integrity: sha512-7OASN1Wma5fum5SrNhFMAMJxOUAbhyfQ8dQ//PJaJbNw0URTPWqIghHWt1MmAANKhHZIYOHruW4Kw4ruUWOdGw==}
    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
    dependencies:
-      acorn: 8.8.2
-      acorn-jsx: 5.3.2(acorn@8.8.2)
+      acorn: 8.10.0
+      acorn-jsx: 5.3.2(acorn@8.10.0)
      eslint-visitor-keys: 3.4.1
    dev: true

@@ -13208,6 +13302,7 @@ packages:

  /filelist@1.0.4:
    resolution: {integrity: sha512-w1cEuf3S+DrLCQL7ET6kz+gmlJdbq9J7yXCSjK/OZCPA+qEN1WyF4ZAf0YYJa4/shHJra2t/d/r8SV4Ji+x+8Q==}
+    requiresBuild: true
    dependencies:
      minimatch: 5.1.0

@@ -14980,6 +15075,7 @@ packages:
    resolution: {integrity: sha512-sVpxYeuAhWt0OTWITwT98oyV0GsXyMlXCF+3L1SuafBVUIr/uILGRB+NqwkzhgXKvoJpDIpQvqkUALgdmQsQxw==}
    engines: {node: '>=10'}
    hasBin: true
+    requiresBuild: true
    dependencies:
      async: 3.2.4
      chalk: 4.1.2
@@ -16104,7 +16200,7 @@ packages:
        optional: true
    dependencies:
      abab: 2.0.6
-      acorn: 8.8.2
+      acorn: 8.10.0
      acorn-globals: 6.0.0
      cssom: 0.4.4
      cssstyle: 2.3.0
@@ -16146,7 +16242,7 @@ packages:
        optional: true
    dependencies:
      abab: 2.0.6
-      acorn: 8.8.2
+      acorn: 8.10.0
      acorn-globals: 7.0.1
      cssom: 0.5.0
      cssstyle: 2.3.0
@@ -16381,6 +16477,10 @@ packages:
    resolution: {integrity: sha512-ymToLHqL02udwVdbkowNpzjFd6UzozMtshPQKVi5k1EjKRqKqBrOnE9QbLEb0/pV76SAiIT13hdL8R6suc+f3g==}
    dev: true

+  /kolorist@1.8.0:
+    resolution: {integrity: sha512-Y+60/zizpJ3HRH8DCss+q95yr6145JXZo46OTpFvDZWLfRCE4qChOyk1b26nMaNpfHHgxagk9dXT5OP0Tfe+dQ==}
+    dev: true
+
  /leac@0.6.0:
    resolution: {integrity: sha512-y+SqErxb8h7nE/fiEX07jsbuhrpO9lL8eca7/Y1nuWV2moNlXhyd59iDGcRf6moVyDMbmTNzL40SUyrFU/yDpg==}
    dev: false
@@ -16576,6 +16676,7 @@ packages:

  /lodash.defaults@4.2.0:
    resolution: {integrity: sha512-qjxPLHd3r5DnsdGacqOMU6pb/avJzdh9tFX2ymgoZE27BmjXrNy/y4LoaiTeAb+O3gL8AfpJGtqfX/ae2leYYQ==}
+    requiresBuild: true
    dev: false
    optional: true

@@ -16588,6 +16689,7 @@ packages:

  /lodash.isarguments@3.1.0:
    resolution: {integrity: sha512-chi4NHZlZqZD18a0imDHnZPrDeBbTtVN7GXMwuGdRH9qotxAjYs3aVLKc7zNOG9eddR5Ksd8rvFEBc9SsggPpg==}
+    requiresBuild: true
    dev: false
    optional: true

@@ -16749,13 +16851,6 @@ packages:
    dependencies:
      sourcemap-codec: 1.4.8

-  /magic-string@0.29.0:
-    resolution: {integrity: sha512-WcfidHrDjMY+eLjlU+8OvwREqHwpgCeKVBUpQ3OhYYuvfaYCUgcbuBzappNzZvg/v8onU3oQj+BYpkOJe9Iw4Q==}
-    engines: {node: '>=12'}
-    dependencies:
-      '@jridgewell/sourcemap-codec': 1.4.14
-    dev: true
-
  /magic-string@0.30.0:
    resolution: {integrity: sha512-LA+31JYDJLs82r2ScLrlz1GjSgu66ZV518eyWT+S8VhyQn/JL0u9MeBOvQMGYiPk1DBiSN9DDMOcXvigJZaViQ==}
    engines: {node: '>=12'}
@@ -17018,6 +17113,13 @@ packages:
    dependencies:
      brace-expansion: 2.0.1

+  /minimatch@9.0.3:
+    resolution: {integrity: sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==}
+    engines: {node: '>=16 || 14 >=14.17'}
+    dependencies:
+      brace-expansion: 2.0.1
+    dev: true
+
  /minimist-options@4.1.0:
    resolution: {integrity: sha512-Q4r8ghd80yhO/0j1O3B2BjweX3fiHg9cdOwjJd2J76Q135c+NDxGCqdYKQ1SKBuFfgWbAUzBfvYjPUEeNgqN1A==}
    engines: {node: '>= 6'}
@@ -17440,7 +17542,7 @@ packages:
  /mlly@1.2.0:
    resolution: {integrity: sha512-+c7A3CV0KGdKcylsI6khWyts/CYrGTrRVo4R/I7u/cUsy0Conxa6LUhiEzVKIw14lc2L5aiO4+SeVe4TeGRKww==}
    dependencies:
-      acorn: 8.8.2
+      acorn: 8.10.0
      pathe: 1.1.0
      pkg-types: 1.0.2
      ufo: 1.1.1
@@ -17500,6 +17602,10 @@ packages:
    resolution: {integrity: sha512-Tr1knR3d2mKvvWthlk7202rywKbiOm4rVFLsfAaSIhJ6dt9o47W4S+JMtWhd/PW9Wrdew2/S2fSvhz3E2gkfEg==}
    dev: true

+  /muggle-string@0.3.1:
+    resolution: {integrity: sha512-ckmWDJjphvd/FvZawgygcUeQCxzvohjFO5RxTjj4eq8kw359gFF3E1brjfI+viLMxss5JrHTDRHZvu2/tuy0Qg==}
+    dev: true
+
  /multer@1.4.4-lts.1:
    resolution: {integrity: sha512-WeSGziVj6+Z2/MwQo3GvqzgR+9Uc+qt8SwHKh3gvNPiISKfsMfG4SvCOFYlxxgkXt7yIV2i1yczehm0EOKIxIg==}
    engines: {node: '>= 6.0.0'}
@@ -17644,7 +17750,7 @@ packages:
    dependencies:
      hosted-git-info: 4.1.0
      is-core-module: 2.9.0
-      semver: 7.3.8
+      semver: 7.5.4
      validate-npm-package-license: 3.0.4
    dev: true

@@ -18104,10 +18210,6 @@ packages:
      utils-merge: 1.0.1
    dev: false

-  /path-browserify@1.0.1:
-    resolution: {integrity: sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==}
-    dev: true
-
  /path-case@3.0.4:
    resolution: {integrity: sha512-qO4qCFjXqVTrcbPt/hQfhTQ+VhFsqNKOPtytgNKkKxSoEp3XPUQ8ObFuePylOIok5gjn69ry8XiULxCwot3Wfg==}
    dependencies:
@@ -18812,12 +18914,14 @@ packages:
  /redis-errors@1.2.0:
    resolution: {integrity: sha512-1qny3OExCf0UvUV/5wpYKf2YwPcOqXzkwKKSmKHiE6ZMQs5heeE/c8eXK+PNllPvmjgAbfnsbpkGZWy8cBpn9w==}
    engines: {node: '>=4'}
+    requiresBuild: true
    dev: false
    optional: true

  /redis-parser@3.0.0:
    resolution: {integrity: sha512-DJnGAeenTdpMEH6uAJRK/uiyEIH9WVsUmoLwzudwGJUwZPp80PDBWPHXSAGNPwNvIXAbe7MSUB1zQFugFml66A==}
    engines: {node: '>=4'}
+    requiresBuild: true
    dependencies:
      redis-errors: 1.2.0
    dev: false
@@ -19313,6 +19417,13 @@ packages:
    dependencies:
      lru-cache: 6.0.0

+  /semver@7.5.4:
+    resolution: {integrity: sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==}
+    engines: {node: '>=10'}
+    hasBin: true
+    dependencies:
+      lru-cache: 6.0.0
+
  /send@0.18.0:
    resolution: {integrity: sha512-qqWzuOjSFOuqPjFe4NOsMLafToQQwBSOEpS+FwEt3A2V3vKubTquT3vmLTQpFgMXp8AlFWFuP1qKaJZOtPpVXg==}
    engines: {node: '>= 0.8.0'}
@@ -19710,6 +19821,7 @@ packages:

  /standard-as-callback@2.1.0:
    resolution: {integrity: sha512-qoRRSyROncaz1z0mvYqIE4lCd9p2R90i6GxW3uZv5ucSu8tU7B5HXUP1gG8pVZsYNVaXjk8ClXHPttLyxAL48A==}
+    requiresBuild: true
    dev: false
    optional: true

@@ -19974,7 +20086,7 @@ packages:
      methods: 1.1.2
      mime: 2.6.0
      qs: 6.11.0
-      semver: 7.3.8
+      semver: 7.5.4
    transitivePeerDependencies:
      - supports-color
    dev: false
@@ -20162,7 +20274,7 @@ packages:
    hasBin: true
    dependencies:
      '@jridgewell/source-map': 0.3.2
-      acorn: 8.8.2
+      acorn: 8.10.0
      commander: 2.20.3
      source-map-support: 0.5.21

@@ -20470,13 +20582,6 @@ packages:
    resolution: {integrity: sha512-DEQrfv6l7IvN2jlzc/VTdZJYsWUnQNCsueYjMkC/iXoEoi5fNan6MjeDqkvhfzbmHgdz9UxDUluX3V5HdjTydQ==}
    dev: true

-  /ts-morph@17.0.1:
-    resolution: {integrity: sha512-10PkHyXmrtsTvZSL+cqtJLTgFXkU43Gd0JCc0Rw6GchWbqKe0Rwgt1v3ouobTZwQzF1mGhDeAlWYBMGRV7y+3g==}
-    dependencies:
-      '@ts-morph/common': 0.18.1
-      code-block-writer: 11.0.3
-    dev: true
-
  /ts-node-dev@2.0.0(@types/node@18.16.17)(typescript@4.9.3):
    resolution: {integrity: sha512-ywMrhCfH6M75yftYvrvNarLEY+SUXtUvU8/0Z6llrHQVBx12GiFk5sStF8UdfE/yfzk9IAq7O5EEbTQsxlBI8w==}
    engines: {node: '>=0.8.0'}
@@ -20525,7 +20630,7 @@ packages:
      '@tsconfig/node14': 1.0.3
      '@tsconfig/node16': 1.0.3
      '@types/node': 18.16.17
-      acorn: 8.8.2
+      acorn: 8.10.0
      acorn-walk: 8.2.0
      arg: 4.1.3
      create-require: 1.1.1
@@ -20815,6 +20920,12 @@ packages:
    hasBin: true
    dev: true

+  /typescript@5.0.4:
+    resolution: {integrity: sha512-cW9T5W9xY37cc+jfEnaUvX91foxtHkza3Nw3wkoF4sSlKn0MONdkdEndig/qPBWXNkmplh3NzayQzCiHM4/hqw==}
+    engines: {node: '>=12.20'}
+    hasBin: true
+    dev: true
+
  /ua-parser-js@0.7.31:
    resolution: {integrity: sha512-qLK/Xe9E2uzmYI3qLeOmI0tEOt+TBBQyUIAh4aAgU05FVYzeZrKUdkAZfBNVGRaHVgV0TDkdEngJSw/SyQchkQ==}
    dev: true
@@ -20929,6 +21040,34 @@ packages:
    resolution: {integrity: sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==}
    engines: {node: '>= 0.8'}

+  /unplugin-fonts@1.0.3(vite@3.1.4):
+    resolution: {integrity: sha512-6Wq0SMhMznUx7DTkqr/ogCvWg2vFSCApHmhUcUISxqfnuME2B/KRLa6+bWyX3sbPNhYsW4zI7jvUkkmIumwenw==}
+    peerDependencies:
+      '@nuxt/kit': ^3.0.0
+      vite: ^2.0.0 || ^3.0.0 || ^4.0.0
+    peerDependenciesMeta:
+      '@nuxt/kit':
+        optional: true
+    dependencies:
+      fast-glob: 3.2.12
+      unplugin: 1.4.0
+      vite: 3.1.4(sass@1.53.0)(terser@5.14.1)
+    dev: true
+
+  /unplugin-fonts@1.0.3(vite@3.2.4):
+    resolution: {integrity: sha512-6Wq0SMhMznUx7DTkqr/ogCvWg2vFSCApHmhUcUISxqfnuME2B/KRLa6+bWyX3sbPNhYsW4zI7jvUkkmIumwenw==}
+    peerDependencies:
+      '@nuxt/kit': ^3.0.0
+      vite: ^2.0.0 || ^3.0.0 || ^4.0.0
+    peerDependenciesMeta:
+      '@nuxt/kit':
+        optional: true
+    dependencies:
+      fast-glob: 3.2.12
+      unplugin: 1.4.0
+      vite: 3.2.4(@types/node@17.0.45)(sass@1.53.0)(terser@5.14.1)
+    dev: true
+
  /unplugin-icons@0.14.9(@vue/compiler-sfc@3.2.39)(esbuild@0.17.19)(rollup@2.79.1)(vite@3.1.4):
    resolution: {integrity: sha512-vPyVfNREH88dP6gszdaoGkAEFPpiScXj1A8eWN905jQgT53A3tsiPEiqJjCHOUVcsUaREt2JSudzumFOsCA78A==}
    peerDependencies:
@@ -21061,7 +21200,7 @@ packages:
      webpack:
        optional: true
    dependencies:
-      acorn: 8.8.2
+      acorn: 8.10.0
      chokidar: 3.5.3
      esbuild: 0.17.19
      rollup: 2.79.1
@@ -21072,7 +21211,16 @@ packages:
  /unplugin@1.1.0:
    resolution: {integrity: sha512-I8obQ8Rs/hnkxokRV6g8JKOQFgYNnTd9DL58vcSt5IJ9AkK8wbrtsnzD5hi4BJlvcY536JzfEXj9L6h7j559/A==}
    dependencies:
-      acorn: 8.8.2
+      acorn: 8.10.0
+      chokidar: 3.5.3
+      webpack-sources: 3.2.3
+      webpack-virtual-modules: 0.5.0
+    dev: true
+
+  /unplugin@1.4.0:
+    resolution: {integrity: sha512-5x4eIEL6WgbzqGtF9UV8VEC/ehKptPXDS6L2b0mv4FRMkJxRtjaJfOWDd6a8+kYbqsjklix7yWP0N3SUepjXcg==}
+    dependencies:
+      acorn: 8.10.0
      chokidar: 3.5.3
      webpack-sources: 3.2.3
      webpack-virtual-modules: 0.5.0
@@ -21369,27 +21517,31 @@ packages:
      vscode-uri: 3.0.3
    dev: true

-  /vite-plugin-dts@2.0.0-beta.3(@types/node@17.0.45)(rollup@2.79.1)(vite@3.2.4):
-    resolution: {integrity: sha512-QrsbTxyt0choSYXPxPfmN9XcSvxcVZk0zticxLrI5DkECs9KhDrSVGok1YP/UPkoKpfF9ThtOJcM5Rjuesxv/w==}
+  /vite-plugin-dts@3.2.0(@types/node@17.0.45)(sass@1.53.0)(terser@5.14.1)(typescript@4.9.3):
+    resolution: {integrity: sha512-s+dwJvDcb/AWgb49oVbq9JiUSIMwaVpFfV4SVIaBZmv9OZyeyDGxujaq+z4HJ4LB4hUG5c4oRAJyLfV66c763Q==}
    engines: {node: ^14.18.0 || >=16.0.0}
    peerDependencies:
-      vite: '>=2.9.0'
+      typescript: '*'
    dependencies:
-      '@babel/parser': 7.20.15
-      '@microsoft/api-extractor': 7.34.4(@types/node@17.0.45)
+      '@microsoft/api-extractor': 7.36.3(@types/node@17.0.45)
      '@rollup/pluginutils': 5.0.2(rollup@2.79.1)
-      '@rushstack/node-core-library': 3.55.2(@types/node@17.0.45)
+      '@rushstack/node-core-library': 3.59.6(@types/node@17.0.45)
+      '@vue/language-core': 1.8.8(typescript@4.9.3)
      debug: 4.3.4(supports-color@9.2.2)
-      fast-glob: 3.2.12
-      fs-extra: 10.1.0
-      kolorist: 1.7.0
-      magic-string: 0.29.0
-      ts-morph: 17.0.1
+      kolorist: 1.8.0
+      typescript: 4.9.3
+      vue-tsc: 1.8.8(typescript@4.9.3)
+    optionalDependencies:
+      rollup: 2.79.1
      vite: 3.2.4(@types/node@17.0.45)(sass@1.53.0)(terser@5.14.1)
    transitivePeerDependencies:
      - '@types/node'
-      - rollup
+      - less
+      - sass
+      - stylus
+      - sugarss
      - supports-color
+      - terser
    dev: true

  /vite-plugin-eslint@1.8.1(eslint@8.29.0)(vite@3.2.4):
@@ -21405,21 +21557,12 @@ packages:
      vite: 3.2.4(@types/node@17.0.45)(sass@1.53.0)(terser@5.14.1)
    dev: false

-  /vite-plugin-fonts@0.6.0(vite@3.1.4):
-    resolution: {integrity: sha512-dV6nnLEju8k5EmvlBH6egxkVZ+rgc5zWsJr9+cNRXBMEDnpRGHcZPI260UEDNg2yB99wSTNER2eduEvZFbMIGw==}
-    peerDependencies:
-      vite: ^2.0.0 || ^3.0.0
-    dependencies:
-      fast-glob: 3.2.11
-      vite: 3.1.4(sass@1.53.0)(terser@5.14.1)
-    dev: true
-
  /vite-plugin-fonts@0.6.0(vite@3.2.4):
    resolution: {integrity: sha512-dV6nnLEju8k5EmvlBH6egxkVZ+rgc5zWsJr9+cNRXBMEDnpRGHcZPI260UEDNg2yB99wSTNER2eduEvZFbMIGw==}
    peerDependencies:
      vite: ^2.0.0 || ^3.0.0
    dependencies:
-      fast-glob: 3.2.11
+      fast-glob: 3.2.12
      vite: 3.2.4(@types/node@17.0.45)(sass@1.53.0)(terser@5.14.1)
    dev: true

@@ -21939,7 +22082,7 @@ packages:
    engines: {node: '>=6.0'}
    hasBin: true
    dependencies:
-      acorn: 8.8.2
+      acorn: 8.10.0
      acorn-walk: 8.2.0
    dev: false

@@ -22304,6 +22447,18 @@ packages:
      typescript: 4.9.3
    dev: true

+  /vue-tsc@1.8.8(typescript@4.9.3):
+    resolution: {integrity: sha512-bSydNFQsF7AMvwWsRXD7cBIXaNs/KSjvzWLymq/UtKE36697sboX4EccSHFVxvgdBlI1frYPc/VMKJNB7DFeDQ==}
+    hasBin: true
+    peerDependencies:
+      typescript: '*'
+    dependencies:
+      '@vue/language-core': 1.8.8(typescript@4.9.3)
+      '@vue/typescript': 1.8.8(typescript@4.9.3)
+      semver: 7.3.8
+      typescript: 4.9.3
+    dev: true
+
  /vue@2.7.1:
    resolution: {integrity: sha512-X1YkFddhbTAU2FPK0gBZ/vDOcOMA8ZT4uHoFVor1bUb7BpVGdEswS286YGtODsf/Ghfr1LM1sBMFAY8XT+dVhA==}
    dependencies:
Author	SHA1	Message	Date
Mir Arif Hasan	a4fdc05b5f	feat: .env.example updated	2023-08-08 14:10:50 +05:30
Mir Arif Hasan	4a0a5e6a04	feat: env variable changed	2023-08-08 14:10:50 +05:30
Nivedin	085fbb2a9b	feat: tippy menu for history and tab (#3220 ) Co-authored-by: Liyas Thomas <liyascthomas@gmail.com>	2023-08-08 13:23:11 +05:30
Andrew Bastin	05f2d8817b	chore: merge hoppscotch/main into release/2023.8.0	2023-08-08 12:18:01 +05:30
Joel Jacob Stephen	81fbb22c51	feat: introducing a new smart input hoppscotch ui component (#3089 ) Co-authored-by: Anwarul Islam <anwaarulislaam@gmail.com>	2023-08-05 23:45:02 +05:30
Liyas Thomas	01cf59c663	fix: disable line wrapping in EnvInput component (#3230 )	2023-08-05 23:43:02 +05:30
Liyas Thomas	5c8ebaff3e	refactor: fonts are now bundled with packages (#3227 )	2023-08-05 23:42:31 +05:30
Andrew Bastin	0e70c28324	feat: dynamically select which auth providers for your instance of hoppscotch (be implementation)	2023-08-03 20:12:54 +05:30
Liyas Thomas	c1efa381f0	feat: svg badge asset (#3196 )	2023-07-25 20:45:22 +05:30
Andrew Bastin	29171d1b6f	fix: generate-ui failing to build	2023-07-18 22:27:37 +05:30
Andrew Bastin	e869d49e16	chore: run tests on and against release branches	2023-07-18 21:46:38 +05:30
Andrew Bastin	6496bea846	chore: bump version to 2023.4.8	2023-07-18 21:46:36 +05:30
NicklasWallgren	39842559b5	fix: reduce the memory consumption during build to prevent OOM (#3148 ) Co-authored-by: Nicklas Wallgren <nicklas.wallgren@folksam.se> Co-authored-by: Andrew Bastin <andrewbastin.k@gmail.com>	2023-07-18 00:08:06 +05:30
Anwarul Islam	51efb35aa6	fix: keybinding modifier issue (#3163 )	2023-07-17 23:56:08 +05:30
NicklasWallgren	9402bb9285	fix: add healthcheck for db and remove unwanted volumes (#3150 )	2023-07-17 21:22:56 +05:30
Balu Babu	82b6e08d68	fix: fixed issue in team-environment test cases (#3189 )	2023-07-17 12:33:11 +05:30
Anwarul Islam	25177bd635	fix: update vite-plugin-dts version which fixes build issue on docker/alpine (#3179 )	2023-07-17 12:32:25 +05:30
5idereal	6928eb7992	feat(lang): update tw translation (#3170 )	2023-07-14 11:36:08 +05:30
				`@@ -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>`