Merge branch 'release/2024.3.2' into fix/sh-email-handlebar-issue

fix: resolved mailer module email issue
2024-04-29 11:52:33 +05:30 · 2024-04-23 16:22:34 +05:30
129 changed files with 2484 additions and 13366 deletions
--- a/package.json
+++ b/package.json
@@ -34,11 +34,11 @@
  },
  "pnpm": {
    "overrides": {
-      "vue": "3.4.27"
+      "vue": "3.3.9"
    },
    "packageExtensions": {
      "httpsnippet@3.0.1": {
-        "dependencies": {
+        "peerDependencies": {
          "ajv": "6.12.3"
        }
      }
--- a/packages/hoppscotch-backend/Dockerfile
+++ b/packages/hoppscotch-backend/Dockerfile
@@ -1,4 +1,4 @@
-FROM node:20.12.2 AS builder
+FROM node:18.8.0 AS builder

 WORKDIR /usr/src/app

--- a/packages/hoppscotch-backend/package.json
+++ b/packages/hoppscotch-backend/package.json
@@ -1,6 +1,6 @@
 {
  "name": "hoppscotch-backend",
-  "version": "2024.3.3",
+  "version": "2024.3.1",
  "description": "",
  "author": "",
  "private": true,
@@ -35,7 +35,6 @@
    "@nestjs/passport": "10.0.2",
    "@nestjs/platform-express": "10.2.7",
    "@nestjs/schedule": "4.0.1",
-    "@nestjs/terminus": "10.2.3",
    "@nestjs/throttler": "5.0.1",
    "@prisma/client": "5.8.1",
    "argon2": "0.30.3",
--- a/packages/hoppscotch-backend/src/app.module.ts
+++ b/packages/hoppscotch-backend/src/app.module.ts
@@ -26,7 +26,6 @@ import { loadInfraConfiguration } from './infra-config/helper';
 import { MailerModule } from './mailer/mailer.module';
 import { PosthogModule } from './posthog/posthog.module';
 import { ScheduleModule } from '@nestjs/schedule';
-import { HealthModule } from './health/health.module';

@Module({
  imports: [
@@ -101,7 +100,6 @@ import { HealthModule } from './health/health.module';
    InfraConfigModule,
    PosthogModule,
    ScheduleModule.forRoot(),
-    HealthModule,
  ],
  providers: [GQLComplexityPlugin],
  controllers: [AppController],
--- a/packages/hoppscotch-backend/src/health/health.controller.ts
+++ b/packages/hoppscotch-backend/src/health/health.controller.ts
@@ -1,24 +0,0 @@
-import { Controller, Get } from '@nestjs/common';
-import {
-  HealthCheck,
-  HealthCheckService,
-  PrismaHealthIndicator,
-} from '@nestjs/terminus';
-import { PrismaService } from 'src/prisma/prisma.service';
-
-@Controller('health')
-export class HealthController {
-  constructor(
-    private health: HealthCheckService,
-    private prismaHealth: PrismaHealthIndicator,
-    private prisma: PrismaService,
-  ) {}
-
-  @Get()
-  @HealthCheck()
-  check() {
-    return this.health.check([
-      async () => this.prismaHealth.pingCheck('database', this.prisma),
-    ]);
-  }
-}
--- a/packages/hoppscotch-backend/src/health/health.module.ts
+++ b/packages/hoppscotch-backend/src/health/health.module.ts
@@ -1,10 +0,0 @@
-import { Module } from '@nestjs/common';
-import { HealthController } from './health.controller';
-import { PrismaModule } from 'src/prisma/prisma.module';
-import { TerminusModule } from '@nestjs/terminus';
-
-@Module({
-  imports: [PrismaModule, TerminusModule],
-  controllers: [HealthController],
-})
-export class HealthModule {}
--- a/packages/hoppscotch-common/locales/en.json
+++ b/packages/hoppscotch-common/locales/en.json
@@ -374,8 +374,7 @@
    "mutations": "Mutations",
    "schema": "Schema",
    "subscriptions": "Subscriptions",
-    "switch_connection": "Switch connection",
-    "url_placeholder": "Enter a GraphQL endpoint URL"
+    "switch_connection": "Switch connection"
  },
  "graphql_collections": {
    "title": "GraphQL Collections"
@@ -599,7 +598,6 @@
    "title": "Request",
    "type": "Request type",
    "url": "URL",
-    "url_placeholder": "Enter a URL or paste a cURL command",
    "variables": "Variables",
    "view_my_links": "View my links"
  },
@@ -1027,8 +1025,7 @@
    "personal": "Personal Workspace",
    "other_workspaces": "My Workspaces",
    "team": "Workspace",
-    "title": "Workspaces",
-    "no_workspace": "No Workspace"
+    "title": "Workspaces"
  },
  "site_protection": {
    "login_to_continue": "Login to continue",
--- a/packages/hoppscotch-common/locales/pt-br.json
+++ b/packages/hoppscotch-common/locales/pt-br.json
--- a/packages/hoppscotch-common/locales/ru.json
+++ b/packages/hoppscotch-common/locales/ru.json
@@ -11,13 +11,12 @@
    "connect": "Подключиться",
    "connecting": "Соединение...",
    "copy": "Скопировать",
-    "create": "Создать",
+    "create": "Create",
    "delete": "Удалить",
    "disconnect": "Отключиться",
    "dismiss": "Скрыть",
    "dont_save": "Не сохранять",
    "download_file": "Скачать файл",
-    "download_here": "Download here",
    "drag_to_reorder": "Перетягивайте для сортировки",
    "duplicate": "Дублировать",
    "edit": "Редактировать",
@@ -25,7 +24,6 @@
    "go_back": "Вернуться",
    "go_forward": "Вперёд",
    "group_by": "Сгруппировать по",
-    "hide_secret": "Hide secret",
    "label": "Название",
    "learn_more": "Узнать больше",
    "less": "Меньше",
@@ -35,7 +33,7 @@
    "open_workspace": "Открыть пространство",
    "paste": "Вставить",
    "prettify": "Форматировать",
-    "properties": "Параметры",
+    "properties": "Properties",
    "remove": "Удалить",
    "rename": "Переименовать",
    "restore": "Восстановить",
@@ -44,14 +42,13 @@
    "scroll_to_top": "Вверх",
    "search": "Поиск",
    "send": "Отправить",
-    "share": "Поделиться",
-    "show_secret": "Show secret",
+    "share": "Share",
    "start": "Начать",
    "starting": "Запускаю",
    "stop": "Стоп",
-    "to_close": "закрыть",
+    "to_close": "что бы закрыть",
    "to_navigate": "для навигации",
-    "to_select": "выбрать",
+    "to_select": "выборать",
    "turn_off": "Выключить",
    "turn_on": "Включить",
    "undo": "Отменить",
@@ -69,12 +66,12 @@
    "copy_interface_type": "Copy interface type",
    "copy_user_id": "Копировать токен пользователя",
    "developer_option": "Настройки разработчика",
-    "developer_option_description": "Инструмент разработчика помогает обслуживать и развивать Hoppscotch",
+    "developer_option_description": "Инструмент разработчика помогает обслуживить и развивить Hoppscotch",
    "discord": "Discord",
    "documentation": "Документация",
    "github": "GitHub",
    "help": "Справка, отзывы и документация",
-    "home": "На главную",
+    "home": "Дом",
    "invite": "Пригласить",
    "invite_description": "В Hoppscotch мы разработали простой и интуитивно понятный интерфейс для создания и управления вашими API. Hoppscotch - это инструмент, который помогает создавать, тестировать, документировать и делиться своими API.",
    "invite_your_friends": "Пригласить своих друзей",
@@ -88,7 +85,7 @@
    "reload": "Перезагрузить",
    "search": "Поиск",
    "share": "Поделиться",
-    "shortcuts": "Горячие клавиши",
+    "shortcuts": "Ярлыки",
    "social_description": "Подписывайся на наши соц. сети и оставайся всегда в курсе последних новостей, обновлений и релизов.",
    "social_links": "Социальные сети",
    "spotlight": "Прожектор",
@@ -99,19 +96,17 @@
    "type_a_command_search": "Введите команду или выполните поиск…",
    "we_use_cookies": "Мы используем куки",
    "whats_new": "Что нового?",
-    "wiki": "Узнать больше"
+    "wiki": "Вики"
  },
  "auth": {
    "account_exists": "Учетная запись существует с разными учетными данными - войдите, чтобы связать обе учетные записи",
    "all_sign_in_options": "Все варианты входа",
-    "continue_with_auth_provider": "Continue with {provider}",
    "continue_with_email": "Продолжить с электронной почтой",
    "continue_with_github": "Продолжить с GitHub",
-    "continue_with_github_enterprise": "Continue with GitHub Enterprise",
    "continue_with_google": "Продолжить с Google",
    "continue_with_microsoft": "Продолжить с Microsoft",
    "email": "Электронное письмо",
-    "logged_out": "Успешно вышли. Будем скучать!",
+    "logged_out": "Вышли из",
    "login": "Авторизоваться",
    "login_success": "Успешный вход в систему",
    "login_to_hoppscotch": "Войти в Hoppscotch",
@@ -126,7 +121,7 @@
    "generate_token": "Сгенерировать токен",
    "graphql_headers": "Authorization Headers are sent as part of the payload to connection_init",
    "include_in_url": "Добавить в URL",
-    "inherited_from": "Унаследован тип аутентификации {auth} из родительской коллекции {collection}",
+    "inherited_from": "Inherited {auth} from parent collection {collection} ",
    "learn": "Узнать больше",
    "oauth": {
      "redirect_auth_server_returned_error": "Auth Server returned an error state",
@@ -140,32 +135,11 @@
      "redirect_no_token_endpoint": "No Token Endpoint Defined",
      "something_went_wrong_on_oauth_redirect": "Something went wrong during OAuth Redirect",
      "something_went_wrong_on_token_generation": "Something went wrong on token generation",
-      "token_generation_oidc_discovery_failed": "Failure on token generation: OpenID Connect Discovery Failed",
-      "grant_type": "Grant Type",
-      "grant_type_auth_code": "Authorization Code",
-      "token_fetched_successfully": "Token fetched successfully",
-      "token_fetch_failed": "Failed to fetch token",
-      "validation_failed": "Validation Failed, please check the form fields",
-      "label_authorization_endpoint": "Authorization Endpoint",
-      "label_client_id": "Client ID",
-      "label_client_secret": "Client Secret",
-      "label_code_challenge": "Code Challenge",
-      "label_code_challenge_method": "Code Challenge Method",
-      "label_code_verifier": "Code Verifier",
-      "label_scopes": "Scopes",
-      "label_token_endpoint": "Token Endpoint",
-      "label_use_pkce": "Use PKCE",
-      "label_implicit": "Implicit",
-      "label_password": "Password",
-      "label_username": "Username",
-      "label_auth_code": "Authorization Code",
-      "label_client_credentials": "Client Credentials"
+      "token_generation_oidc_discovery_failed": "Failure on token generation: OpenID Connect Discovery Failed"
    },
-    "pass_by_headers_label": "Headers",
-    "pass_by_query_params_label": "Query Parameters",
    "pass_key_by": "Pass by",
    "password": "Пароль",
-    "save_to_inherit": "Чтобы унаследовать аутентификации, нужно сохранить запрос в коллекции",
+    "save_to_inherit": "Please save this request in any collection to inherit the authorization",
    "token": "Токен",
    "type": "Метод авторизации",
    "username": "Имя пользователя"
@@ -175,7 +149,6 @@
    "different_parent": "Нельзя сортировать коллекцию с разной родительской коллекцией",
    "edit": "Редактировать коллекцию",
    "import_or_create": "Вы можете импортировать существующую или создать новую коллекцию",
-    "import_collection": "Импортировать коллекцию",
    "invalid_name": "Укажите допустимое название коллекции",
    "invalid_root_move": "Коллекция уже в корне",
    "moved": "Перемещено успешно",
@@ -184,36 +157,38 @@
    "name_length_insufficient": "Имя коллекции должно иметь 3 или более символов",
    "new": "Создать коллекцию",
    "order_changed": "Порядок коллекции обновлён",
-    "properties": "Параметры коллекции",
-    "properties_updated": "Параметры коллекции обновлены",
+    "properties": "Collection Properties",
+    "properties_updated": "Collection Properties Updated",
    "renamed": "Коллекция переименована",
    "request_in_use": "Запрос обрабатывается",
    "save_as": "Сохранить как",
    "save_to_collection": "Сохранить в коллекцию",
    "select": "Выбрать коллекцию",
-    "select_location": "Выберите местоположение"
+    "select_location": "Выберите местоположение",
+    "select_team": "Выберите команду",
+    "team_collections": "Коллекции команд"
  },
  "confirm": {
-    "close_unsaved_tab": "Вы уверены, что хотите закрыть эту вкладку?",
-    "close_unsaved_tabs": "Вы уверены, что хотите закрыть все эти вкладки? Несохранённые данные {count} вкладок будут утеряны.",
+    "close_unsaved_tab": "Вы уверены что хотите закрыть эту вкладку?",
+    "close_unsaved_tabs": "Вы уверены что хотите закрыть все эти вкладки? Несохранённые данные {count} вкладок будут утеряны.",
    "exit_team": "Вы точно хотите покинуть эту команду?",
    "logout": "Вы действительно хотите выйти?",
    "remove_collection": "Вы уверены, что хотите навсегда удалить эту коллекцию?",
-    "remove_environment": "Вы действительно хотите удалить это окружение без возможности восстановления?",
+    "remove_environment": "Вы действительно хотите удалить эту среду без возможности восстановления?",
    "remove_folder": "Вы уверены, что хотите навсегда удалить эту папку?",
    "remove_history": "Вы уверены, что хотите навсегда удалить всю историю?",
    "remove_request": "Вы уверены, что хотите навсегда удалить этот запрос?",
-    "remove_shared_request": "Вы уверены, что хотите навсегда удалить этот запрос?",
+    "remove_shared_request": "Are you sure you want to permanently delete this shared request?",
    "remove_team": "Вы уверены, что хотите удалить эту команду?",
    "remove_telemetry": "Вы действительно хотите отказаться от телеметрии?",
-    "request_change": "Вы уверены, что хотите сбросить текущий запрос, все не сохранённые данные будт утеряны?",
+    "request_change": "Вы уверены что хотите сбросить текущий запрос, все не сохранённые данные будт утеряны?",
    "save_unsaved_tab": "Вы хотите сохранить изменения в этой вкладке?",
    "sync": "Вы уверены, что хотите синхронизировать это рабочее пространство?"
  },
  "context_menu": {
-    "add_parameters": "Добавить в список параметров",
-    "open_request_in_new_tab": "Открыть запрос в новом окне",
-    "set_environment_variable": "Добавить значение в переменную"
+    "add_parameters": "Add to parameters",
+    "open_request_in_new_tab": "Open request in new tab",
+    "set_environment_variable": "Set as variable"
  },
  "cookies": {
    "modal": {
@@ -252,25 +227,24 @@
    "collections": "Коллекции пустые",
    "documentation": "Подключите GraphQL endpoint, чтобы увидеть документацию.",
    "endpoint": "Endpoint не может быть пустым",
-    "environments": "Переменных окружения нет",
+    "environments": "Окружения пусты",
    "folder": "Папка пуста",
    "headers": "У этого запроса нет заголовков",
    "history": "История пуста",
    "invites": "Вы еще никого не приглашали",
    "members": "В этой команде еще нет участников",
-    "parameters": "Этот запрос не содержит параметров",
+    "parameters": "Этот запрос не имеет параметров",
    "pending_invites": "Пока что нет ожидающих заявок на вступление в команду",
    "profile": "Войдите, чтобы просмотреть свой профиль",
    "protocols": "Протоколы пустые",
-    "request_variables": "Этот запрос не содержит никаких переменных",
-    "secret_environments": "Секреты хранятся только на этом устройстве и не синхронизируются с сервером",
    "schema": "Подключиться к конечной точке GraphQL",
-    "shared_requests": "Вы еще не делились запросами с другими",
-    "shared_requests_logout": "Нужно войти, чтобы делиться запросами и управлять ими",
+    "shared_requests": "Shared requests are empty",
+    "shared_requests_logout": "Login to view your shared requests or create a new one",
    "subscription": "Нет подписок",
    "team_name": "Название команды пусто",
    "teams": "Команды пустые",
-    "tests": "Для этого запроса нет тестов"
+    "tests": "Для этого запроса нет тестов",
+    "shortcodes": "Нет коротких ссылок"
  },
  "environment": {
    "add_to_global": "Добавить в глобальное окружение",
@@ -278,57 +252,53 @@
    "create_new": "Создать новое окружение",
    "created": "Окружение создано",
    "deleted": "Окружение удалено",
-    "duplicated": "Окружение продублировано",
+    "duplicated": "Environment duplicated",
    "edit": "Редактировать окружение",
-    "empty_variables": "Переменные еще не добавлены",
+    "empty_variables": "No variables",
    "global": "Global",
-    "global_variables": "Глобальные переменные",
+    "global_variables": "Global variables",
    "import_or_create": "Импортировать или создать новое окружение",
    "invalid_name": "Укажите допустимое имя для окружения",
    "list": "Переменные окружения",
    "my_environments": "Мои окружения",
-    "name": "Имя",
+    "name": "Name",
    "nested_overflow": "максимальный уровень вложения переменных окружения - 10",
    "new": "Новая среда",
    "no_active_environment": "Нет активных окружений",
    "no_environment": "Нет окружения",
    "no_environment_description": "Не выбрано окружение, выберите что делать с переменными.",
-    "quick_peek": "Быстрый просмотр переменных",
+    "quick_peek": "Environment Quick Peek",
    "replace_with_variable": "Replace with variable",
    "scope": "Scope",
-    "secrets": "Секретные переменные",
-    "secret_value": "Секретное значение",
    "select": "Выберите среду",
-    "set": "Выбрать окружение",
-    "set_as_environment": "Поместить значение в переменную",
+    "set": "Set environment",
+    "set_as_environment": "Set as environment",
    "team_environments": "Окружения команды",
    "title": "Окружения",
    "updated": "Окружение обновлено",
-    "value": "Значение",
-    "variable": "Переменная",
-    "variables": "Переменные",
+    "value": "Value",
+    "variable": "Variable",
    "variable_list": "Список переменных"
  },
  "error": {
    "authproviders_load_error": "Unable to load auth providers",
    "browser_support_sse": "Похоже, в этом браузере нет поддержки событий, отправленных сервером.",
    "check_console_details": "Подробности смотрите в журнале консоли.",
-    "check_how_to_add_origin": "Инструкция как это сделать",
+    "check_how_to_add_origin": "Инструкция как добавить origin в настройки расширения",
    "curl_invalid_format": "cURL неправильно отформатирован",
    "danger_zone": "Опасная зона",
    "delete_account": "Вы являетесь владельцем этой команды:",
    "delete_account_description": "Прежде чем удалить аккаунт вам необходимо либо назначить владельцом другого пользователя, либо удалить команды в которых вы являетесь владельцем.",
-    "empty_profile_name": "Имя пользователя не может быть пустым",
    "empty_req_name": "Пустое имя запроса",
    "f12_details": "(F12 для подробностей)",
-    "gql_prettify_invalid_query": "Не удалось отформатировать, т.к. в запросе есть синтаксические ошибки. Устраните их и повторите попытку.",
+    "gql_prettify_invalid_query": "Не удалось определить недопустимый запрос, устранить синтаксические ошибки запроса и повторить попытку.",
    "incomplete_config_urls": "Не заполнены URL конфигурации",
    "incorrect_email": "Не корректный Email",
    "invalid_link": "Не корректная ссылка",
    "invalid_link_description": "Ссылка, по которой вы перешли, - недействительна, либо срок ее действия истек.",
    "invalid_embed_link": "The embed does not exist or is invalid.",
    "json_parsing_failed": "Не корректный JSON",
-    "json_prettify_invalid_body": "Не удалось определить формат строки, устраните синтаксические ошибки и повторите попытку.",
+    "json_prettify_invalid_body": "Не удалось определить недопустимое тело, устранить синтаксические ошибки json и повторить попытку.",
    "network_error": "Похоже, возникла проблема с соединением. Попробуйте еще раз.",
    "network_fail": "Не удалось отправить запрос",
    "no_collections_to_export": "Нечего экспортировать. Для начала нужно создать коллекцию.",
@@ -336,10 +306,8 @@
    "no_environments_to_export": "Нечего экспортировать. Для начала нужно создать переменные окружения.",
    "no_results_found": "Совпадения не найдены",
    "page_not_found": "Эта страница не найдена",
-    "please_install_extension": "Ничего страшного. Просто нужно установить специальное расширение в браузере.",
+    "please_install_extension": "Нужно установить специальное расширение и добавить этот домен как новый origin в настройках расширения.",
    "proxy_error": "Proxy error",
-    "reading_files": "Произошла ошибка при чтении файла или нескольких файлов",
-    "same_profile_name": "Задано имя пользователя такое же как и было",
    "script_fail": "Не удалось выполнить сценарий предварительного запроса",
    "something_went_wrong": "Что-то пошло не так",
    "test_script_fail": "Не удалось выполнить тестирование запроса"
@@ -347,12 +315,13 @@
  "export": {
    "as_json": "Экспорт как JSON",
    "create_secret_gist": "Создать секретный Gist",
-    "create_secret_gist_tooltip_text": "Экспортировать как секретный Gist",
-    "failed": "Произошла ошибка во время экспорта",
-    "secret_gist_success": "Успешно экспортировано как секретный Gist",
+    "create_secret_gist_tooltip_text": "Export as secret Gist",
+    "failed": "Something went wrong while exporting",
+    "secret_gist_success": "Successfully exported as secret Gist",
    "require_github": "Войдите через GitHub, чтобы создать секретную суть",
    "title": "Экспорт",
-    "success": "Успешно экспортировано"
+    "success": "Successfully exported",
+    "gist_created": "Gist создан"
  },
  "filter": {
    "all": "Все",
@@ -377,7 +346,7 @@
    "switch_connection": "Изменить соединение"
  },
  "graphql_collections": {
-    "title": "Коллекции GraphQL"
+    "title": "GraphQL Collections"
  },
  "group": {
    "time": "Время",
@@ -390,8 +359,8 @@
  },
  "helpers": {
    "authorization": "Заголовок авторизации будет автоматически сгенерирован при отправке запроса.",
-    "collection_properties_authorization": "Этот заголовок авторизации будет подставляться при каждом запросе в этой коллекции.",
-    "collection_properties_header": "Этот заголовок будет подставляться при каждом запросе в этой коллекции.",
+    "collection_properties_authorization": " This authorization will be set for every request in this collection.",
+    "collection_properties_header": "This header will be set for every request in this collection.",
    "generate_documentation_first": "Сначала создайте документацию",
    "network_fail": "Невозможно достичь конечной точки API. Проверьте подключение к сети и попробуйте еще раз.",
    "offline": "Кажется, вы не в сети. Данные в этой рабочей области могут быть устаревшими.",
@@ -411,12 +380,10 @@
  "import": {
    "collections": "Импортировать коллекции",
    "curl": "Импортировать из cURL",
-    "environments_from_gist": "Импортировать из Gist",
-    "environments_from_gist_description": "Импортировать переменные окружения Hoppscotch из Gist",
+    "environments_from_gist": "Import From Gist",
+    "environments_from_gist_description": "Import Hoppscotch Environments From Gist",
    "failed": "Ошибка импорта",
-    "file_size_limit_exceeded_warning_multiple_files": "Выбранные файлы превышают рекомендованный лимит в 10MB. Были импортированы только первые {files}",
-    "file_size_limit_exceeded_warning_single_file": "Размер выбранного в данный момент файла превышает рекомендуемый лимит в 10 МБ. Пожалуйста, выберите другой файл.",
-    "from_file": "Импортировать из одного или нескольких файлов",
+    "from_file": "Import from File",
    "from_gist": "Импорт из Gist",
    "from_gist_description": "Импортировать через Gist URL",
    "from_insomnia": "Импортировать с Insomnia",
@@ -431,9 +398,9 @@
    "from_postman_description": "Импортировать из коллекции Postman",
    "from_url": "Импортировать из URL",
    "gist_url": "Введите URL-адрес Gist",
-    "gql_collections_from_gist_description": "Импортировать GraphQL коллекцию из Gist",
+    "gql_collections_from_gist_description": "Import GraphQL Collections From Gist",
    "hoppscotch_environment": "Hoppscotch Environment",
-    "hoppscotch_environment_description": "Импортировать окружение Hoppscotch из JSON файла",
+    "hoppscotch_environment_description": "Import Hoppscotch Environment JSON file",
    "import_from_url_invalid_fetch": "Не удалить получить данные по этому URL",
    "import_from_url_invalid_file_format": "Ошибка при импорте коллекций",
    "import_from_url_invalid_type": "Неподдерживаемый тип. Поддерживаемые типы: 'hoppscotch', 'openapi', 'postman', 'insomnia'",
@@ -442,19 +409,16 @@
    "json_description": "Импортировать из коллекции Hoppscotch",
    "postman_environment": "Postman Environment",
    "postman_environment_description": "Import Postman Environment from a JSON file",
-    "success": "Успешно импортировано",
    "title": "Импортировать"
  },
  "inspections": {
-    "description": "Показать возможные ошибки",
+    "description": "Inspect possible errors",
    "environment": {
-      "add_environment": "Добавить переменную",
-      "add_environment_value": "Заполнить значение",
-      "empty_value": "Значение переменной окружения '{variable}' пустое",
-      "not_found": "Переменная окружения “{environment}” не задана."
+      "add_environment": "Add to Environment",
+      "not_found": "Environment variable “{environment}” not found."
    },
    "header": {
-      "cookie": "Из-за ограничений безопасности в веб версии нельзя задать Cookie параметры. Пожалуйста, используйте Hoppscotch Desktop приложение или используйте заголовок Authorization вместо этого."
+      "cookie": "The browser doesn't allow Hoppscotch to set the Cookie Header. While we're working on the Hoppscotch Desktop App (coming soon), please use the Authorization Header instead."
    },
    "response": {
      "401_error": "Please check your authentication credentials.",
@@ -463,12 +427,12 @@
      "default_error": "Please check your request.",
      "network_error": "Please check your network connection."
    },
-    "title": "Помощник",
+    "title": "Inspector",
    "url": {
-      "extension_not_installed": "Расширение не установлено.",
-      "extension_unknown_origin": "Убедитесь, что текущий домен добавлен в список доверенных ресурсов в расширении браузера",
-      "extention_enable_action": "Подключить расширение",
-      "extention_not_enabled": "Расширение в браузере не подключено."
+      "extension_not_installed": "Extension not installed.",
+      "extension_unknown_origin": "Make sure you've added the API endpoint's origin to the Hoppscotch Browser Extension list.",
+      "extention_enable_action": "Enable Browser Extension",
+      "extention_not_enabled": "Extension not enabled."
    }
  },
  "layout": {
@@ -481,11 +445,11 @@
  "modal": {
    "close_unsaved_tab": "У вас есть не сохранённые изменения",
    "collections": "Коллекции",
-    "confirm": "Подтвердите действие",
+    "confirm": "Подтверждать",
    "customize_request": "Customize Request",
    "edit_request": "Изменить запрос",
    "import_export": "Импорт Экспорт",
-    "share_request": "Поделиться запросом"
+    "share_request": "Share Request"
  },
  "mqtt": {
    "already_subscribed": "Вы уже подписаны на этот топик",
@@ -521,7 +485,7 @@
    "doc": "Документы",
    "graphql": "GraphQL",
    "profile": "Профиль",
-    "realtime": "Realtime",
+    "realtime": "В реальном времени",
    "rest": "REST",
    "settings": "Настройки"
  },
@@ -543,8 +507,8 @@
    "roles": "Роли",
    "roles_description": "Роли позволяют настраивать доступ конкретным людям к публичным коллекциям.",
    "updated": "Профиль обновлен",
-    "viewer": "Читатель",
-    "viewer_description": "Могут только просматривать и использовать запросы."
+    "viewer": "Зритель",
+    "viewer_description": "Зрительно могут только просматривать и использовать запросы."
  },
  "remove": {
    "star": "Удалить звезду"
@@ -566,11 +530,11 @@
    "enter_curl": "Введите сюда команду cURL",
    "generate_code": "Сгенерировать код",
    "generated_code": "Сгенерированный код",
-    "go_to_authorization_tab": "Перейти на вкладку авторизации",
-    "go_to_body_tab": "Перейти на вкладку тела запроса",
+    "go_to_authorization_tab": "Go to Authorization",
+    "go_to_body_tab": "Go to Body tab",
    "header_list": "Список заголовков",
    "invalid_name": "Укажите имя для запроса",
-    "method": "Метод",
+    "method": "Методика",
    "moved": "Запрос перемещён",
    "name": "Имя запроса",
    "new": "Новый запрос",
@@ -584,22 +548,22 @@
    "payload": "Полезная нагрузка",
    "query": "Запрос",
    "raw_body": "Необработанное тело запроса",
-    "rename": "Переименовать запрос",
+    "rename": "Переименость запрос",
    "renamed": "Запрос переименован",
-    "request_variables": "Переменные запроса",
    "run": "Запустить",
    "save": "Сохранить",
    "save_as": "Сохранить как",
    "saved": "Запрос сохранен",
-    "share": "Поделиться",
+    "share": "Делиться",
    "share_description": "Поделиться Hoppscotch с друзьями",
-    "share_request": "Поделиться запросом",
-    "stop": "Стоп",
+    "share_request": "Share Request",
+    "stop": "Stop",
    "title": "Запрос",
    "type": "Тип запроса",
    "url": "URL",
    "variables": "Переменные",
-    "view_my_links": "Посмотреть мои ссылки"
+    "view_my_links": "Посмотреть мои ссылки",
+    "copy_link": "Копировать ссылку"
  },
  "response": {
    "audio": "Аудио",
@@ -622,7 +586,7 @@
  },
  "settings": {
    "accent_color": "Основной цвет",
-    "account": "Аккаунт",
+    "account": "Счет",
    "account_deleted": "Ваш аккаунт был удалён",
    "account_description": "Настройте параметры своей учетной записи.",
    "account_email_description": "Ваш основной адрес электронной почты.",
@@ -675,29 +639,29 @@
    "verify_email": "Подтвердить Email"
  },
  "shared_requests": {
-    "button": "Кнопка",
-    "button_info": "Создать кнопку 'Run in Hoppscotch' на свой сайт, блог или README.",
-    "copy_html": "Копировать HTML код",
-    "copy_link": "Копировать ссылку",
-    "copy_markdown": "Копировать Markdown",
-    "creating_widget": "Создание виджет",
-    "customize": "Настроить",
-    "deleted": "Запрос удален",
-    "description": "Выберите вид как вы поделитесь запросом, позже вы сможете дополнительно его настроить",
-    "embed": "Встраиваемое окно",
-    "embed_info": "Добавьте небольшую площадку 'Hoppscotch API Playground' на свой веб-сайт, блог или документацию.",
-    "link": "Ссылка",
-    "link_info": "Создайте общедоступную ссылку, которой можно поделиться с любым пользователем, имеющим доступ к просмотру.",
-    "modified": "Запрос изменен",
-    "not_found": "Такой ссылке не нашлось",
-    "open_new_tab": "Открыть в новом окне",
+    "button": "Button",
+    "button_info": "Create a 'Run in Hoppscotch' button for your website, blog or a README.",
+    "copy_html": "Copy HTML",
+    "copy_link": "Copy Link",
+    "copy_markdown": "Copy Markdown",
+    "creating_widget": "Creating widget",
+    "customize": "Customize",
+    "deleted": "Shared request deleted",
+    "description": "Select a widget, you can change and customize this later",
+    "embed": "Embed",
+    "embed_info": "Add a mini 'Hoppscotch API Playground' to your website, blog or documentation.",
+    "link": "Link",
+    "link_info": "Create a shareable link to share with anyone on the internet with view access.",
+    "modified": "Shared request modified",
+    "not_found": "Shared request not found",
+    "open_new_tab": "Open in new tab",
    "preview": "Preview",
    "run_in_hoppscotch": "Run in Hoppscotch",
    "theme": {
-      "dark": "Темная",
-      "light": "Светлая",
-      "system": "Системная",
-      "title": "Тема"
+      "dark": "Dark",
+      "light": "Light",
+      "system": "System",
+      "title": "Theme"
    }
  },
  "shortcut": {
@@ -705,7 +669,7 @@
      "close_current_menu": "Закрыть текущее меню",
      "command_menu": "Меню поиска и команд",
      "help_menu": "Меню помощи",
-      "show_all": "Список горячих клавиш",
+      "show_all": "Горячие клавиши",
      "title": "Общий"
    },
    "miscellaneous": {
@@ -732,19 +696,20 @@
      "get_method": "Выберите метод GET",
      "head_method": "Выберите метод HEAD",
      "import_curl": "Импортировать из cURL",
-      "method": "Метод",
+      "method": "Методика",
      "next_method": "Выберите следующий метод",
      "post_method": "Выберите метод POST",
      "previous_method": "Выбрать предыдущий метод",
      "put_method": "Выберите метод PUT",
      "rename": "Переименовать запрос",
      "reset_request": "Сбросить запрос",
-      "save_request": "Сохранить запрос",
+      "save_request": "Сохарнить запрос",
      "save_to_collections": "Сохранить в коллекции",
      "send_request": "Послать запрос",
-      "share_request": "Поделиться запросом",
-      "show_code": "Сгенерировать фрагмент кода из запроса",
-      "title": "Запрос"
+      "share_request": "Share Request",
+      "show_code": "Generate code snippet",
+      "title": "Запрос",
+      "copy_request_link": "Копировать ссылку на запрос"
    },
    "response": {
      "copy": "Копировать запрос в буфер обмена",
@@ -752,11 +717,11 @@
      "title": "Запрос"
    },
    "theme": {
-      "black": "Переключить на черный режим",
-      "dark": "Переключить на тёмный режим",
-      "light": "Переключить на светлый режим",
-      "system": "Переключить на тему, исходя из настроек системы",
-      "title": "Внешний вид"
+      "black": "Черный режим",
+      "dark": "Тёмный режим",
+      "light": "Светлый режим",
+      "system": "Определяется системой",
+      "title": "Тема"
    }
  },
  "show": {
@@ -765,11 +730,6 @@
    "more": "Показать больше",
    "sidebar": "Показать боковую панель"
  },
-  "site_protection": {
-    "error_fetching_site_protection_status": "Something Went Wrong While Fetching Site Protection Status",
-    "login_to_continue": "Login to continue",
-    "login_to_continue_description": "You need to be logged in to access this Hoppscotch Enterprise Instance."
-  },
  "socketio": {
    "communication": "Коммуникация",
    "connection_not_authorized": "Это SocketIO соединение не использует какую-либо авторизацию.",
@@ -779,89 +739,82 @@
    "url": "URL"
  },
  "spotlight": {
-    "change_language": "Изменить язык",
+    "change_language": "Change Language",
    "environments": {
-      "delete": "Удалить текущее окружение",
-      "duplicate": "Дублировать текущее окружение",
-      "duplicate_global": "Дублировать глобальное окружение",
-      "edit": "Редактировать текущее окружение",
-      "edit_global": "Редактировать глобальное окружение",
-      "new": "Создать новое окружение",
-      "new_variable": "Создать новую переменную окружения",
-      "title": "Окружение"
+      "delete": "Delete current environment",
+      "duplicate": "Duplicate current environment",
+      "duplicate_global": "Duplicate global environment",
+      "edit": "Edit current environment",
+      "edit_global": "Edit global environment",
+      "new": "Create new environment",
+      "new_variable": "Create a new environment variable",
+      "title": "Environments"
    },
    "general": {
-      "chat": "Чат с поддержкой",
-      "help_menu": "Помощь",
-      "open_docs": "Почитать документацию",
-      "open_github": "Открыть GitHub репозиторий",
-      "open_keybindings": "Горячие клавиши",
-      "social": "Соц. сети",
-      "title": "Общее"
+      "chat": "Chat with support",
+      "help_menu": "Help and support",
+      "open_docs": "Read Documentation",
+      "open_github": "Open GitHub repository",
+      "open_keybindings": "Keyboard shortcuts",
+      "social": "Social",
+      "title": "General"
    },
    "graphql": {
-      "connect": "Подключиться к серверу",
-      "disconnect": "Отключиться от сервера"
+      "connect": "Connect to server",
+      "disconnect": "Disconnect from server"
    },
    "miscellaneous": {
-      "invite": "Пригласить друзей в Hoppscotch",
-      "title": "Другое"
-    },
-    "phrases": {
-      "create_environment": "Создать окружение",
-      "create_workspace": "Создать пространство",
-      "import_collections": "Импортировать коллекцию",
-      "share_request": "Поделиться запросом",
-      "try": "Попробовать"
+      "invite": "Invite your friends to Hoppscotch",
+      "title": "Miscellaneous"
    },
    "request": {
-      "save_as_new": "Сохранить как новый запрос",
-      "select_method": "Выбрать метод",
-      "switch_to": "Переключиться",
-      "tab_authorization": "На вкладку авторизации",
-      "tab_body": "На вкладку тела запроса",
-      "tab_headers": "На вкладку заголовков",
-      "tab_parameters": "На вкладку параметров",
-      "tab_pre_request_script": "На вкладку пред-скрипта запроса",
-      "tab_query": "На вкладку запроса",
-      "tab_tests": "На вкладку тестов",
-      "tab_variables": "На вкладку переменных запроса"
+      "save_as_new": "Save as new request",
+      "select_method": "Select method",
+      "switch_to": "Switch to",
+      "tab_authorization": "Authorization tab",
+      "tab_body": "Body tab",
+      "tab_headers": "Headers tab",
+      "tab_parameters": "Parameters tab",
+      "tab_pre_request_script": "Pre-request script tab",
+      "tab_query": "Query tab",
+      "tab_tests": "Tests tab",
+      "tab_variables": "Variables tab"
    },
    "response": {
-      "copy": "Копировать содержимое ответа",
-      "download": "Сказать содержимое ответа как файл",
-      "title": "Ответ запроса"
+      "copy": "Copy response",
+      "download": "Download response as file",
+      "title": "Response"
    },
    "section": {
-      "interceptor": "Перехватчик",
-      "interface": "Интерфейс",
-      "theme": "Внешний вид",
-      "user": "Пользователь"
+      "interceptor": "Interceptor",
+      "interface": "Interface",
+      "theme": "Theme",
+      "user": "User"
    },
    "settings": {
-      "change_interceptor": "Изменить перехватчик",
-      "change_language": "Изменить язык",
+      "change_interceptor": "Change Interceptor",
+      "change_language": "Change Language",
      "theme": {
-        "black": "Черная",
-        "dark": "Темная",
-        "light": "Светлая",
-        "system": "Как задано в системе"
+        "black": "Black",
+        "dark": "Dark",
+        "light": "Light",
+        "system": "System preference"
      }
    },
    "tab": {
-      "close_current": "Закрыть текущую вкладку",
-      "close_others": "Закрыть все вкладки",
-      "duplicate": "Продублировать текущую вкладку",
-      "new_tab": "Открыть в новой вкладке",
-      "title": "Вкладки"
+      "close_current": "Close current tab",
+      "close_others": "Close all other tabs",
+      "duplicate": "Duplicate current tab",
+      "new_tab": "Open a new tab",
+      "title": "Tabs"
    },
    "workspace": {
-      "delete": "Удалить текущую команду",
-      "edit": "Редактировать текущую команду",
-      "invite": "Пригласить людей в команду",
-      "new": "Создать новую команду",
-      "switch_to_personal": "Переключить на персональное пространство",
-      "title": "Команды"
+      "delete": "Delete current team",
+      "edit": "Edit current team",
+      "invite": "Invite people to team",
+      "new": "Create new team",
+      "switch_to_personal": "Switch to your personal workspace",
+      "title": "Teams"
    }
  },
  "sse": {
@@ -871,7 +824,7 @@
  },
  "state": {
    "bulk_mode": "Множественное редактирование",
-    "bulk_mode_placeholder": "Каждый параметр должен начинаться с новой строки\nКлючи и значения разделяются двоеточием\nИспользуйте # для комментария",
+    "bulk_mode_placeholder": "Каждый параметр должен начинаться с новой строки\nКлючи и значения разедляются двоеточием\nИспользуйте # для комментария",
    "cleared": "Очищено",
    "connected": "Связаны",
    "connected_to": "Подключено к {name}",
@@ -890,20 +843,20 @@
    "download_failed": "Download failed",
    "download_started": "Скачивание началось",
    "enabled": "Включено",
-    "file_imported": "Файл  успешно импортирован",
+    "file_imported": "Файл импортирован",
    "finished_in": "Завершено через {duration} мс",
-    "hide": "Скрыть",
+    "hide": "Hide",
    "history_deleted": "История удалена",
    "linewrap": "Обернуть линии",
    "loading": "Загрузка...",
    "message_received": "Сообщение: {message} получено по топику: {topic}",
    "mqtt_subscription_failed": "Что-то пошло не так, при попытке подписаться на топик: {topic}",
-    "none": "Не задан",
+    "none": "Никто",
    "nothing_found": "Ничего не найдено для",
    "published_error": "Что-то пошло не так при попытке опубликовать сообщение в топик {topic}: {message}",
    "published_message": "Опубликовано сообщение: {message} в топик: {topic}",
    "reconnection_error": "Не удалось переподключиться",
-    "show": "Показать",
+    "show": "Show",
    "subscribed_failed": "Не удалось подписаться на топик: {topic}",
    "subscribed_success": "Успешно подписался на топик: {topic}",
    "unsubscribed_failed": "Не удалось отписаться от топика: {topic}",
@@ -918,6 +871,7 @@
    "forum": "Задавайте вопросы и получайте ответы",
    "github": "Подпишитесь на нас на Github",
    "shortcuts": "Просматривайте приложение быстрее",
+    "team": "Свяжитесь с командой",
    "title": "Служба поддержки",
    "twitter": "Следуйте за нами на Twitter"
  },
@@ -928,7 +882,7 @@
    "close_others": "Закрыть остальные вкладки",
    "collections": "Коллекции",
    "documentation": "Документация",
-    "duplicate": "Дублировать вкладку",
+    "duplicate": "Duplicate Tab",
    "environments": "Окружения",
    "headers": "Заголовки",
    "history": "История",
@@ -938,8 +892,7 @@
    "queries": "Запросы",
    "query": "Запрос",
    "schema": "Схема",
-    "shared_requests": "Запросы в общем доступе",
-    "share_tab_request": "Поделиться запросом",
+    "shared_requests": "Shared Requests",
    "socketio": "Socket.IO",
    "sse": "SSE",
    "tests": "Тесты",
@@ -968,6 +921,7 @@
    "invite_tooltip": "Пригласить людей в Ваше рабочее пространство",
    "invited_to_team": "{owner} приглашает Вас присоединиться к команде {team}",
    "join": "Приглашение принято",
+    "join_beta": "Присоединяйтесь к бета-программе, чтобы получить доступ к командам.",
    "join_team": "Присоединиться к {team}",
    "joined_team": "Вы присоединились к команде {team}",
    "joined_team_description": "Теперь Вы участник этой команды",
@@ -996,7 +950,6 @@
    "permissions": "Разрешения",
    "same_target_destination": "Таже цель и конечная точка",
    "saved": "Команда сохранена",
-    "search_title": "Team Requests",
    "select_a_team": "Выбрать команду",
    "success_invites": "Принятые приглашения",
    "title": "Команды",
@@ -1028,8 +981,16 @@
  "workspace": {
    "change": "Изменить пространство",
    "personal": "Моё пространство",
-    "other_workspaces": "Пространства",
    "team": "Пространство команды",
    "title": "Рабочие пространства"
+  },
+  "shortcodes": {
+    "actions": "Действия",
+    "created_on": "Создано",
+    "deleted": "Удалёна",
+    "method": "Метод",
+    "not_found": "Короткая ссылка не найдена",
+    "short_code": "Короткая ссылка",
+    "url": "URL"
  }
 }
--- a/packages/hoppscotch-common/locales/tr.json
+++ b/packages/hoppscotch-common/locales/tr.json
@@ -68,9 +68,9 @@
    "developer_option": "Developer options",
    "developer_option_description": "Developer tools which helps in development and maintenance of Hoppscotch.",
    "discord": "Discord",
-    "documentation": "Dokümanlar",
+    "documentation": "Dökümanlar",
    "github": "GitHub",
-    "help": "Yardım, geri bildirim ve dokümanlar",
+    "help": "Yardım, geri bildirim ve dökümanlar",
    "home": "Ana sayfa",
    "invite": "Davet et",
    "invite_description": "Hoppscotch'ta API'lerinizi oluşturmak ve yönetmek için basit ve sezgisel bir arayüz tasarladık. Hoppscotch, API'lerinizi oluşturmanıza, test etmenize, belgelemenize ve paylaşmanıza yardımcı olan bir araçtır.",
@@ -225,7 +225,7 @@
    "body": "Bu isteğin bir gövdesi yok",
    "collection": "Koleksiyon boş",
    "collections": "Koleksiyonlar boş",
-    "documentation": "Dokümanları görmek için GraphQL uç noktasını bağlayın",
+    "documentation": "Dökümanları görmek için GraphQL uç noktasını bağlayın",
    "endpoint": "Uç nokta boş olamaz",
    "environments": "Ortamlar boş",
    "folder": "Klasör boş",
@@ -735,7 +735,7 @@
    "url": "Bağlantı"
  },
  "spotlight": {
-    "change_language": "Dil Değiştir",
+    "change_language": "Change Language",
    "environments": {
      "delete": "Delete current environment",
      "duplicate": "Duplicate current environment",
@@ -744,7 +744,7 @@
      "edit_global": "Edit global environment",
      "new": "Create new environment",
      "new_variable": "Create a new environment variable",
-      "title": "Ortamlar"
+      "title": "Environments"
    },
    "general": {
      "chat": "Chat with support",
--- a/packages/hoppscotch-common/package.json
+++ b/packages/hoppscotch-common/package.json
@@ -1,7 +1,7 @@
 {
  "name": "@hoppscotch/common",
  "private": true,
-  "version": "2024.3.3",
+  "version": "2024.3.1",
  "scripts": {
    "dev": "pnpm exec npm-run-all -p -l dev:*",
    "test": "vitest --run",
@@ -50,7 +50,7 @@
    "axios": "1.6.2",
    "buffer": "6.0.3",
    "cookie-es": "1.0.0",
-    "dioc": "3.0.1",
+    "dioc": "1.0.1",
    "esprima": "4.0.1",
    "events": "3.3.0",
    "fp-ts": "2.16.1",
@@ -90,7 +90,7 @@
    "util": "0.12.5",
    "uuid": "9.0.1",
    "verzod": "0.2.2",
-    "vue": "3.4.27",
+    "vue": "3.3.9",
    "vue-i18n": "9.8.0",
    "vue-pdf-embed": "1.2.1",
    "vue-router": "4.2.5",
--- a/packages/hoppscotch-common/src/components.d.ts
+++ b/packages/hoppscotch-common/src/components.d.ts
@@ -32,7 +32,6 @@ declare module 'vue' {
    AppSpotlightEntryRESTHistory: typeof import('./components/app/spotlight/entry/RESTHistory.vue')['default']
    AppSpotlightEntryRESTRequest: typeof import('./components/app/spotlight/entry/RESTRequest.vue')['default']
    AppSpotlightEntryRESTTeamRequestEntry: typeof import('./components/app/spotlight/entry/RESTTeamRequestEntry.vue')['default']
-    AppSpotlightSearch: typeof import('./components/app/SpotlightSearch.vue')['default']
    AppSupport: typeof import('./components/app/Support.vue')['default']
    Collections: typeof import('./components/collections/index.vue')['default']
    CollectionsAdd: typeof import('./components/collections/Add.vue')['default']
@@ -181,10 +180,6 @@ declare module 'vue' {
    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']
-    NewCollections: typeof import('./components/new-collections/index.vue')['default']
-    NewCollectionsRest: typeof import('./components/new-collections/rest/index.vue')['default']
-    NewCollectionsRestCollection: typeof import('./components/new-collections/rest/Collection.vue')['default']
-    NewCollectionsRestRequest: typeof import('./components/new-collections/rest/Request.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']
@@ -216,8 +211,6 @@ declare module 'vue' {
    TeamsTeam: typeof import('./components/teams/Team.vue')['default']
    Tippy: typeof import('vue-tippy')['Tippy']
    WorkspaceCurrent: typeof import('./components/workspace/Current.vue')['default']
-    WorkspacePersonalWorkspaceSelector: typeof import('./components/workspace/PersonalWorkspaceSelector.vue')['default']
    WorkspaceSelector: typeof import('./components/workspace/Selector.vue')['default']
-    WorkspaceTestWorkspaceSelector: typeof import('./components/workspace/TestWorkspaceSelector.vue')['default']
  }
 }
--- a/packages/hoppscotch-common/src/components/app/Header.vue
+++ b/packages/hoppscotch-common/src/components/app/Header.vue
@@ -2,222 +2,208 @@
  <div>
    <header
      ref="headerRef"
-      class="flex flex-1 flex-shrink-0 items-center justify-between space-x-2 overflow-x-auto overflow-y-hidden px-2 py-2"
+      class="grid grid-cols-5 grid-rows-1 gap-2 overflow-x-auto overflow-y-hidden p-2"
      @mousedown.prevent="platform.ui?.appHeader?.onHeaderAreaClick?.()"
    >
      <div
-        class="inline-flex flex-1 items-center justify-start space-x-2"
+        class="col-span-2 flex items-center justify-between space-x-2"
        :style="{
          paddingTop: platform.ui?.appHeader?.paddingTop?.value,
          paddingLeft: platform.ui?.appHeader?.paddingLeft?.value,
        }"
      >
-        <HoppButtonSecondary
-          class="!font-bold uppercase tracking-wide !text-secondaryDark hover:bg-primaryDark focus-visible:bg-primaryDark"
-          :label="t('app.name')"
-          to="/"
-        />
-      </div>
-      <div class="inline-flex flex-1 items-center justify-center space-x-2">
-        <button
-          class="flex max-w-[15rem] flex-1 cursor-text items-center justify-between self-stretch rounded border border-dividerDark bg-primaryDark px-2 py-1 text-secondaryLight transition hover:border-dividerDark hover:bg-primaryLight hover:text-secondary focus-visible:border-dividerDark focus-visible:bg-primaryLight focus-visible:text-secondary"
-          @click="invokeAction('modals.search.toggle')"
-        >
-          <span class="inline-flex flex-1 items-center">
-            <icon-lucide-search class="svg-icons mr-2" />
-            {{ t("app.search") }}
-          </span>
-          <span class="flex space-x-1">
-            <kbd class="shortcut-key">{{ getPlatformSpecialKey() }}</kbd>
-            <kbd class="shortcut-key">K</kbd>
-          </span>
-        </button>
-        <HoppButtonSecondary
-          v-if="showInstallButton"
-          v-tippy="{ theme: 'tooltip' }"
-          :title="t('header.install_pwa')"
-          :icon="IconDownload"
-          class="rounded hover:bg-primaryDark focus-visible:bg-primaryDark"
-          @click="installPWA()"
-        />
-        <HoppButtonSecondary
-          v-tippy="{ theme: 'tooltip', allowHTML: true }"
-          :title="`${
-            mdAndLarger ? t('support.title') : t('app.options')
-          } <kbd>?</kbd>`"
-          :icon="IconLifeBuoy"
-          class="rounded hover:bg-primaryDark focus-visible:bg-primaryDark"
-          @click="invokeAction('modals.support.toggle')"
-        />
-      </div>
-      <div class="inline-flex flex-1 items-center justify-end space-x-2">
-        <div
-          v-if="currentUser === null"
-          class="inline-flex items-center space-x-2"
-        >
+        <div class="flex">
          <HoppButtonSecondary
-            :icon="IconUploadCloud"
-            :label="t('header.save_workspace')"
-            class="py-1.75 !focus-visible:text-green-600 !hover:text-green-600 hidden border border-green-600/25 bg-green-500/[.15] !text-green-500 hover:border-green-800/50 hover:bg-green-400/10 focus-visible:border-green-800/50 focus-visible:bg-green-400/10 md:flex"
-            @click="invokeAction('modals.login.toggle')"
-          />
-          <HoppButtonPrimary
-            :label="t('header.login')"
-            @click="invokeAction('modals.login.toggle')"
+            class="!font-bold uppercase tracking-wide !text-secondaryDark hover:bg-primaryDark focus-visible:bg-primaryDark"
+            :label="t('app.name')"
+            to="/"
          />
        </div>
-        <div v-else class="inline-flex items-center space-x-2">
-          <TeamsMemberStack
-            v-if="
-              workspace.type === 'team' &&
-              selectedTeam &&
-              selectedTeam.teamMembers.length > 1
-            "
-            :team-members="selectedTeam.teamMembers"
-            show-count
-            class="mx-2"
-            @handle-click="handleTeamEdit()"
+      </div>
+      <div class="col-span-1 flex items-center justify-between space-x-2">
+        <AppSpotlightSearch />
+      </div>
+      <div class="col-span-2 flex items-center justify-between space-x-2">
+        <div class="flex">
+          <HoppButtonSecondary
+            v-if="showInstallButton"
+            v-tippy="{ theme: 'tooltip' }"
+            :title="t('header.install_pwa')"
+            :icon="IconDownload"
+            class="rounded hover:bg-primaryDark focus-visible:bg-primaryDark"
+            @click="installPWA()"
          />
+          <HoppButtonSecondary
+            v-tippy="{ theme: 'tooltip', allowHTML: true }"
+            :title="`${
+              mdAndLarger ? t('support.title') : t('app.options')
+            } <kbd>?</kbd>`"
+            :icon="IconLifeBuoy"
+            class="rounded hover:bg-primaryDark focus-visible:bg-primaryDark"
+            @click="invokeAction('modals.support.toggle')"
+          />
+        </div>
+        <div class="flex">
          <div
-            class="flex divide-x divide-green-600/25 rounded border border-green-600/25 bg-green-500/[.15] focus-within:divide-green-800/50 focus-within:border-green-800/50 focus-within:bg-green-400/10 hover:divide-green-800/50 hover:border-green-800/50 hover:bg-green-400/10"
+            v-if="currentUser === null"
+            class="inline-flex items-center space-x-2"
          >
            <HoppButtonSecondary
-              v-tippy="{ theme: 'tooltip' }"
-              :title="t('team.invite_tooltip')"
-              :icon="IconUserPlus"
-              class="py-1.75 !focus-visible:text-green-600 !hover:text-green-600 !text-green-500"
-              @click="handleInvite()"
+              :icon="IconUploadCloud"
+              :label="t('header.save_workspace')"
+              class="!focus-visible:text-emerald-600 !hover:text-emerald-600 hidden h-8 border border-emerald-600/25 bg-emerald-500/10 !text-emerald-500 hover:border-emerald-600/20 hover:bg-emerald-600/20 focus-visible:border-emerald-600/20 focus-visible:bg-emerald-600/20 md:flex"
+              @click="invokeAction('modals.login.toggle')"
            />
-            <HoppButtonSecondary
+            <HoppButtonPrimary
+              :label="t('header.login')"
+              class="h-8"
+              @click="invokeAction('modals.login.toggle')"
+            />
+          </div>
+          <div v-else class="inline-flex items-center space-x-2">
+            <TeamsMemberStack
              v-if="
                workspace.type === 'team' &&
                selectedTeam &&
-                selectedTeam?.myRole === 'OWNER'
+                selectedTeam.teamMembers.length > 1
              "
-              v-tippy="{ theme: 'tooltip' }"
-              :title="t('team.edit')"
-              :icon="IconSettings"
-              class="py-1.75 !focus-visible:text-green-600 !hover:text-green-600 !text-green-500"
-              @click="handleTeamEdit()"
+              :team-members="selectedTeam.teamMembers"
+              show-count
+              class="mx-2"
+              @handle-click="handleTeamEdit()"
            />
-          </div>
-          <tippy
-            interactive
-            trigger="click"
-            theme="popover"
-            :on-shown="() => accountActions.focus()"
-          >
-            <HoppButtonSecondary
-              v-tippy="{ theme: 'tooltip' }"
-              :title="t('workspace.change')"
-              :label="mdAndLarger ? activeWorkspaceName : ``"
-              :icon="activeWorkspaceIcon"
-              class="select-wrapper !focus-visible:text-blue-600 !hover:text-blue-600 rounded border border-blue-600/25 bg-blue-500/[.15] py-[0.4375rem] pr-8 !text-blue-500 hover:border-blue-800/50 hover:bg-blue-400/10 focus-visible:border-blue-800/50 focus-visible:bg-blue-400/10"
-            />
-            <template #content="{ hide }">
-              <div
-                ref="accountActions"
-                class="flex flex-col focus:outline-none"
-                tabindex="0"
-                @keyup.escape="hide()"
-                @click="hide()"
-              >
-                <WorkspaceSelector />
-              </div>
-            </template>
-          </tippy>
-          <span class="px-2">
+            <div
+              class="flex h-8 divide-x divide-emerald-600/25 rounded border border-emerald-600/25 bg-emerald-500/10 focus-within:divide-emerald-600/20 focus-within:border-emerald-600/20 focus-within:bg-emerald-600/20 hover:divide-emerald-600/20 hover:border-emerald-600/20 hover:bg-emerald-600/20"
+            >
+              <HoppButtonSecondary
+                v-tippy="{ theme: 'tooltip' }"
+                :title="t('team.invite_tooltip')"
+                :icon="IconUserPlus"
+                class="!focus-visible:text-emerald-600 !hover:text-emerald-600 !text-emerald-500"
+                @click="handleInvite()"
+              />
+              <HoppButtonSecondary
+                v-if="
+                  workspace.type === 'team' &&
+                  selectedTeam &&
+                  selectedTeam?.myRole === 'OWNER'
+                "
+                v-tippy="{ theme: 'tooltip' }"
+                :title="t('team.edit')"
+                :icon="IconSettings"
+                class="!focus-visible:text-emerald-600 !hover:text-emerald-600 !text-emerald-500"
+                @click="handleTeamEdit()"
+              />
+            </div>
            <tippy
              interactive
              trigger="click"
              theme="popover"
-              :on-shown="() => tippyActions.focus()"
+              :on-shown="() => accountActions.focus()"
            >
-              <HoppSmartPicture
-                v-if="currentUser.photoURL"
-                v-tippy="{
-                  theme: 'tooltip',
-                }"
-                :url="currentUser.photoURL"
-                :alt="
-                  currentUser.displayName ||
-                  t('profile.default_hopp_displayname')
-                "
-                :title="
-                  currentUser.displayName ||
-                  currentUser.email ||
-                  t('profile.default_hopp_displayname')
-                "
-                indicator
-                :indicator-styles="
-                  network.isOnline ? 'bg-green-500' : 'bg-red-500'
-                "
-              />
-              <HoppSmartPicture
-                v-else
-                v-tippy="{ theme: 'tooltip' }"
-                :title="
-                  currentUser.displayName ||
-                  currentUser.email ||
-                  t('profile.default_hopp_displayname')
-                "
-                :initial="currentUser.displayName || currentUser.email"
-                indicator
-                :indicator-styles="
-                  network.isOnline ? 'bg-green-500' : 'bg-red-500'
-                "
-              />
+              <HoppSmartSelectWrapper
+                class="!text-blue-500 !focus-visible:text-blue-600 !hover:text-blue-600"
+              >
+                <HoppButtonSecondary
+                  v-tippy="{ theme: 'tooltip' }"
+                  :title="t('workspace.change')"
+                  :label="mdAndLarger ? workspaceName : ``"
+                  :icon="workspace.type === 'personal' ? IconUser : IconUsers"
+                  class="!focus-visible:text-blue-600 !hover:text-blue-600 h-8 rounded border border-blue-600/25 bg-blue-500/10 pr-8 !text-blue-500 hover:border-blue-600/20 hover:bg-blue-600/20 focus-visible:border-blue-600/20 focus-visible:bg-blue-600/20"
+                />
+              </HoppSmartSelectWrapper>
              <template #content="{ hide }">
                <div
-                  ref="tippyActions"
+                  ref="accountActions"
                  class="flex flex-col focus:outline-none"
                  tabindex="0"
-                  @keyup.p="profile.$el.click()"
-                  @keyup.s="settings.$el.click()"
-                  @keyup.l="logout.$el.click()"
                  @keyup.escape="hide()"
+                  @click="hide()"
                >
-                  <div class="flex flex-col px-2 text-tiny">
-                    <span class="inline-flex truncate font-semibold">
-                      {{
-                        currentUser.displayName ||
-                        t("profile.default_hopp_displayname")
-                      }}
-                    </span>
-                    <span class="inline-flex truncate text-secondaryLight">
-                      {{ currentUser.email }}
-                    </span>
-                  </div>
-                  <hr />
-                  <HoppSmartItem
-                    ref="profile"
-                    to="/profile"
-                    :icon="IconUser"
-                    :label="t('navigation.profile')"
-                    :shortcut="['P']"
-                    @click="hide()"
-                  />
-                  <HoppSmartItem
-                    ref="settings"
-                    to="/settings"
-                    :icon="IconSettings"
-                    :label="t('navigation.settings')"
-                    :shortcut="['S']"
-                    @click="hide()"
-                  />
-                  <FirebaseLogout
-                    ref="logout"
-                    :shortcut="['L']"
-                    @confirm-logout="hide()"
-                  />
+                  <WorkspaceSelector />
                </div>
              </template>
            </tippy>
-          </span>
+            <span class="px-2">
+              <tippy
+                interactive
+                trigger="click"
+                theme="popover"
+                :on-shown="() => tippyActions.focus()"
+              >
+                <HoppSmartPicture
+                  v-tippy="{
+                    theme: 'tooltip',
+                  }"
+                  :name="currentUser.uid"
+                  :title="
+                    currentUser.displayName ||
+                    currentUser.email ||
+                    t('profile.default_hopp_displayname')
+                  "
+                  indicator
+                  :indicator-styles="
+                    network.isOnline ? 'bg-green-500' : 'bg-red-500'
+                  "
+                />
+                <template #content="{ hide }">
+                  <div
+                    ref="tippyActions"
+                    class="flex flex-col focus:outline-none"
+                    tabindex="0"
+                    @keyup.p="profile.$el.click()"
+                    @keyup.s="settings.$el.click()"
+                    @keyup.l="logout.$el.click()"
+                    @keyup.escape="hide()"
+                  >
+                    <div class="flex flex-col px-2">
+                      <span class="inline-flex truncate font-semibold">
+                        {{
+                          currentUser.displayName ||
+                          t("profile.default_hopp_displayname")
+                        }}
+                      </span>
+                      <span
+                        class="inline-flex truncate text-secondaryLight text-tiny"
+                      >
+                        {{ currentUser.email }}
+                      </span>
+                    </div>
+                    <hr />
+                    <HoppSmartItem
+                      ref="profile"
+                      to="/profile"
+                      :icon="IconUser"
+                      :label="t('navigation.profile')"
+                      :shortcut="['P']"
+                      @click="hide()"
+                    />
+                    <HoppSmartItem
+                      ref="settings"
+                      to="/settings"
+                      :icon="IconSettings"
+                      :label="t('navigation.settings')"
+                      :shortcut="['S']"
+                      @click="hide()"
+                    />
+                    <FirebaseLogout
+                      ref="logout"
+                      :shortcut="['L']"
+                      @confirm-logout="hide()"
+                    />
+                  </div>
+                </template>
+              </tippy>
+            </span>
+          </div>
        </div>
      </div>
    </header>
-    <AppBanner v-if="bannerContent" :banner="bannerContent" />
+    <AppBanner
+      v-if="bannerContent"
+      :banner="bannerContent"
+      @dismiss="dismissOfflineBanner"
+    />
    <TeamsModal :show="showTeamsModal" @hide-modal="showTeamsModal = false" />
    <TeamsInvite
      v-if="workspace.type === 'team' && workspace.teamID"
@@ -233,7 +219,6 @@
      @invite-team="inviteTeam(editingTeamName, editingTeamID)"
      @refetch-teams="refetchTeams"
    />
-
    <HoppSmartConfirmModal
      :show="confirmRemove"
      :title="t('confirm.remove_team')"
@@ -247,31 +232,29 @@
 import { useI18n } from "@composables/i18n"
 import { useReadonlyStream } from "@composables/stream"
 import { defineActionHandler, invokeAction } from "@helpers/actions"
+import { WorkspaceService } from "~/services/workspace.service"
+import { useService } from "dioc/vue"
 import { installPWA, pwaDefferedPrompt } from "@modules/pwa"
 import { breakpointsTailwind, useBreakpoints, useNetwork } from "@vueuse/core"
-import { useService } from "dioc/vue"
-import * as TE from "fp-ts/TaskEither"
-import { pipe } from "fp-ts/function"
 import { computed, reactive, ref, watch } from "vue"
-
 import { useToast } from "~/composables/toast"
 import { GetMyTeamsQuery, TeamMemberRole } from "~/helpers/backend/graphql"
-import { deleteTeam as backendDeleteTeam } from "~/helpers/backend/mutations/Team"
-import { getPlatformSpecialKey } from "~/helpers/platformutils"
 import { platform } from "~/platform"
-import {
-  BANNER_PRIORITY_HIGH,
-  BannerContent,
-  BannerService,
-} from "~/services/banner.service"
-import { NewWorkspaceService } from "~/services/new-workspace"
-import { WorkspaceService } from "~/services/workspace.service"
 import IconDownload from "~icons/lucide/download"
 import IconLifeBuoy from "~icons/lucide/life-buoy"
 import IconSettings from "~icons/lucide/settings"
 import IconUploadCloud from "~icons/lucide/upload-cloud"
 import IconUser from "~icons/lucide/user"
 import IconUserPlus from "~icons/lucide/user-plus"
+import IconUsers from "~icons/lucide/users"
+import { pipe } from "fp-ts/function"
+import * as TE from "fp-ts/TaskEither"
+import { deleteTeam as backendDeleteTeam } from "~/helpers/backend/mutations/Team"
+import {
+  BannerService,
+  BannerContent,
+  BANNER_PRIORITY_HIGH,
+} from "~/services/banner.service"

 const t = useI18n()
 const toast = useToast()
@@ -294,10 +277,11 @@ const bannerContent = computed(() => banner.content.value?.content)
 let bannerID: number | null = null

 const offlineBanner: BannerContent = {
-  type: "info",
+  type: "warning",
  text: (t) => t("helpers.offline"),
  alternateText: (t) => t("helpers.offline_short"),
  score: BANNER_PRIORITY_HIGH,
+  dismissible: true,
 }

 const network = reactive(useNetwork())
@@ -314,6 +298,8 @@ watch(isOnline, () => {
  }
 })

+const dismissOfflineBanner = () => banner.removeBanner(bannerID!)
+
 const currentUser = useReadonlyStream(
  platform.auth.getProbableUserStream(),
  platform.auth.getProbableUser()
@@ -331,6 +317,12 @@ const myTeams = useReadonlyStream(teamListAdapter.teamList$, null)

 const workspace = workspaceService.currentWorkspace

+const workspaceName = computed(() => {
+  return workspace.value.type === "personal"
+    ? t("workspace.personal")
+    : workspace.value.teamName
+})
+
 const refetchTeams = () => {
  teamListAdapter.fetchList()
 }
@@ -365,23 +357,6 @@ watch(
  }
 )

-const newWorkspaceService = useService(NewWorkspaceService)
-
-const activeWorkspaceName = computed(() => {
-  const activeWorkspaceHandleRef =
-    newWorkspaceService.activeWorkspaceHandle.value?.get()
-
-  if (activeWorkspaceHandleRef?.value.type === "ok") {
-    return activeWorkspaceHandleRef.value.data.name
-  }
-
-  return t("workspace.no_workspace")
-})
-
-const activeWorkspaceIcon = computed(() => {
-  return newWorkspaceService.activeWorkspaceDecor.value?.value.headerCurrentIcon
-})
-
 const showModalInvite = ref(false)
 const showModalEdit = ref(false)

@@ -405,8 +380,6 @@ const inviteTeam = (team: { name: string }, teamID: string) => {

 // Show the workspace selected team invite modal if the user is an owner of the team else show the default invite modal
 const handleInvite = () => {
-  if (!currentUser.value) return invokeAction("modals.login.toggle")
-
  if (
    workspace.value.type === "team" &&
    workspace.value.teamID &&
--- a/packages/hoppscotch-common/src/components/collections/ImportExport.vue
+++ b/packages/hoppscotch-common/src/components/collections/ImportExport.vue
@@ -30,8 +30,9 @@ import { defineStep } from "~/composables/step-components"

 import { useI18n } from "~/composables/i18n"
 import { useToast } from "~/composables/toast"
-import { restCollections$ } from "~/newstore/collections"
+import { appendRESTCollections, restCollections$ } from "~/newstore/collections"
 import MyCollectionImport from "~/components/importExport/ImportExportSteps/MyCollectionImport.vue"
+import { GetMyTeamsQuery } from "~/helpers/backend/graphql"

 import IconFolderPlus from "~icons/lucide/folder-plus"
 import IconOpenAPI from "~icons/lucide/file"
@@ -47,23 +48,23 @@ import { getTeamCollectionJSON } from "~/helpers/backend/helpers"

 import { platform } from "~/platform"

-import { initializeDownloadFile } from "~/helpers/import-export/export"
+import { initializeDownloadCollection } from "~/helpers/import-export/export"
 import { gistExporter } from "~/helpers/import-export/export/gist"
+import { myCollectionsExporter } from "~/helpers/import-export/export/myCollections"
 import { teamCollectionsExporter } from "~/helpers/import-export/export/teamCollections"

 import { GistSource } from "~/helpers/import-export/import/import-sources/GistSource"
 import { ImporterOrExporter } from "~/components/importExport/types"
-import { useService } from "dioc/vue"
-import { NewWorkspaceService } from "~/services/new-workspace"
-import { TeamWorkspace } from "~/services/workspace.service"

 const t = useI18n()
 const toast = useToast()

+type SelectedTeam = GetMyTeamsQuery["myTeams"][number] | undefined
+
 type CollectionType =
  | {
      type: "team-collections"
-      selectedTeam: TeamWorkspace
+      selectedTeam: SelectedTeam
    }
  | { type: "my-collections" }

@@ -85,45 +86,15 @@ const currentUser = useReadonlyStream(

 const myCollections = useReadonlyStream(restCollections$, [])

-const workspaceService = useService(NewWorkspaceService)
-
-const activeWorkspaceHandle = workspaceService.activeWorkspaceHandle
-
 const showImportFailedError = () => {
  toast.error(t("import.failed"))
 }

 const handleImportToStore = async (collections: HoppCollection[]) => {
-  if (props.collectionsType.type === "my-collections") {
-    if (!activeWorkspaceHandle.value) {
-      return
-    }
-
-    const collectionHandleResult = await workspaceService.importRESTCollections(
-      activeWorkspaceHandle.value,
-      collections
-    )
-
-    if (E.isLeft(collectionHandleResult)) {
-      // INVALID_WORKSPACE_HANDLE
-      return toast.error(t("import.failed"))
-    }
-
-    const resultHandle = collectionHandleResult.right
-
-    const requestHandleRef = resultHandle.get()
-
-    if (requestHandleRef.value.type === "invalid") {
-      // WORKSPACE_INVALIDATED
-    }
-
-    toast.success(t("state.file_imported"))
-    emit("hide-modal")
-
-    return
-  }
-
-  const importResult = await importToTeamsWorkspace(collections)
+  const importResult =
+    props.collectionsType.type === "my-collections"
+      ? await importToPersonalWorkspace(collections)
+      : await importToTeamsWorkspace(collections)

  if (E.isRight(importResult)) {
    toast.success(t("state.file_imported"))
@@ -133,6 +104,13 @@ const handleImportToStore = async (collections: HoppCollection[]) => {
  }
 }

+const importToPersonalWorkspace = (collections: HoppCollection[]) => {
+  appendRESTCollections(collections)
+  return E.right({
+    success: true,
+  })
+}
+
 function translateToTeamCollectionFormat(x: HoppCollection) {
  const folders: HoppCollection[] = (x.folders ?? []).map(
    translateToTeamCollectionFormat
@@ -412,34 +390,28 @@ const HoppMyCollectionsExporter: ImporterOrExporter = {
    applicableTo: ["personal-workspace"],
    isLoading: isHoppMyCollectionExporterInProgress,
  },
-  action: async () => {
+  action: () => {
    if (!myCollections.value.length) {
      return toast.error(t("error.no_collections_to_export"))
    }

-    if (!activeWorkspaceHandle.value) {
-      return
-    }
-
    isHoppMyCollectionExporterInProgress.value = true

-    const result = await workspaceService.exportRESTCollections(
-      activeWorkspaceHandle.value,
-      myCollections.value
+    const message = initializeDownloadCollection(
+      myCollectionsExporter(myCollections.value),
+      "Collections"
    )

-    if (E.isLeft(result)) {
-      // INVALID_WORKSPACE_HANDLE
+    if (E.isRight(message)) {
+      toast.success(t(message.right))
+
+      platform.analytics?.logEvent({
+        type: "HOPP_EXPORT_COLLECTION",
+        exporter: "json",
+        platform: "rest",
+      })
    }

-    toast.success(t("state.download_started"))
-
-    platform.analytics?.logEvent({
-      type: "HOPP_EXPORT_COLLECTION",
-      exporter: "json",
-      platform: "rest",
-    })
-
    isHoppMyCollectionExporterInProgress.value = false
  },
 }
@@ -461,7 +433,7 @@ const HoppTeamCollectionsExporter: ImporterOrExporter = {
      props.collectionsType.selectedTeam
    ) {
      const res = await teamCollectionsExporter(
-        props.collectionsType.selectedTeam.teamID
+        props.collectionsType.selectedTeam.id
      )

      if (E.isRight(res)) {
@@ -473,7 +445,10 @@ const HoppTeamCollectionsExporter: ImporterOrExporter = {
          return toast.error(t("error.no_collections_to_export"))
        }

-        initializeDownloadFile(exportCollectionsToJSON, "team-collections")
+        initializeDownloadCollection(
+          exportCollectionsToJSON,
+          "team-collections"
+        )

        platform.analytics?.logEvent({
          type: "HOPP_EXPORT_COLLECTION",
@@ -512,7 +487,7 @@ const HoppGistCollectionsExporter: ImporterOrExporter = {
    const collectionJSON = await getCollectionJSON()
    const accessToken = currentUser.value?.accessToken

-    if (!accessToken || E.isLeft(collectionJSON)) {
+    if (!accessToken) {
      toast.error(t("error.something_went_wrong"))
      isHoppGistCollectionExporterInProgress.value = false
      return
@@ -594,8 +569,8 @@ const hasTeamWriteAccess = computed(() => {
  }

  return (
-    collectionsType.selectedTeam.role === "EDITOR" ||
-    collectionsType.selectedTeam.role === "OWNER"
+    collectionsType.selectedTeam.myRole === "EDITOR" ||
+    collectionsType.selectedTeam.myRole === "OWNER"
  )
 })

@@ -603,49 +578,26 @@ const selectedTeamID = computed(() => {
  const { collectionsType } = props

  return collectionsType.type === "team-collections"
-    ? collectionsType.selectedTeam?.teamID
+    ? collectionsType.selectedTeam?.id
    : undefined
 })

 const getCollectionJSON = async () => {
-  // TODO: Implement `getRESTCollectionJSONView` for team workspace
  if (
    props.collectionsType.type === "team-collections" &&
-    props.collectionsType.selectedTeam?.teamID
+    props.collectionsType.selectedTeam?.id
  ) {
    const res = await getTeamCollectionJSON(
-      props.collectionsType.selectedTeam?.teamID
+      props.collectionsType.selectedTeam?.id
    )

    return E.isRight(res)
      ? E.right(res.right.exportCollectionsToJSON)
-      : E.left(res.left.error.toString())
+      : E.left(res.left)
  }

  if (props.collectionsType.type === "my-collections") {
-    if (!activeWorkspaceHandle.value) {
-      return E.left("INVALID_WORKSPACE_HANDLE")
-    }
-
-    const collectionJSONHandleResult =
-      await workspaceService.getRESTCollectionJSONView(
-        activeWorkspaceHandle.value
-      )
-
-    if (E.isLeft(collectionJSONHandleResult)) {
-      return E.left(collectionJSONHandleResult.left.error)
-    }
-
-    const collectionJSONHandle = collectionJSONHandleResult.right
-
-    const collectionJSONHandleRef = collectionJSONHandle.get()
-
-    if (collectionJSONHandleRef.value.type === "invalid") {
-      // WORKSPACE_INVALIDATED
-      return E.left("WORKSPACE_INVALIDATED")
-    }
-
-    return E.right(collectionJSONHandleRef.value.data.content)
+    return E.right(JSON.stringify(myCollections.value, null, 2))
  }

  return E.left("INVALID_SELECTED_TEAM_OR_INVALID_COLLECTION_TYPE")
--- a/packages/hoppscotch-common/src/components/collections/Properties.vue
+++ b/packages/hoppscotch-common/src/components/collections/Properties.vue
@@ -75,7 +75,7 @@ import {
 import { useVModel } from "@vueuse/core"
 import { useService } from "dioc/vue"
 import { clone } from "lodash-es"
-import { ref, toRefs, watch } from "vue"
+import { ref, watch } from "vue"

 import { HoppInheritedProperty } from "~/helpers/types/HoppInheritedProperties"
 import { PersistenceService } from "~/services/persistence"
@@ -100,15 +100,11 @@ const props = withDefaults(
    editingProperties: EditingProperties | null
    source: "REST" | "GraphQL"
    modelValue: string
-    // TODO: Purpose of this prop is to maintain backwards compatibility
-    // To be removed after porting all usages of this component
-    emitWithFullCollection: boolean
  }>(),
  {
    show: false,
    loadingState: false,
    editingProperties: null,
-    emitWithFullCollection: true,
  }
 )

@@ -182,24 +178,15 @@ watch(
 const saveEditedCollection = () => {
  if (!props.editingProperties) return
  const finalCollection = clone(editableCollection.value)
-  delete finalCollection.body
-
-  const { path } = toRefs(props.editingProperties)
-
  const collection = {
-    path: path.value,
+    path: props.editingProperties.path,
    collection: {
      ...props.editingProperties.collection,
      ...finalCollection,
    },
    isRootCollection: props.editingProperties.isRootCollection,
  }
-
-  const data = props.emitWithFullCollection
-    ? collection
-    : { ...finalCollection, collIndexPath: path.value }
-  emit("set-collection-properties", data as EditingProperties)
-
+  emit("set-collection-properties", collection as EditingProperties)
  persistenceService.removeLocalConfig("unsaved_collection_properties")
 }

--- a/packages/hoppscotch-common/src/components/collections/SaveRequest.vue
+++ b/packages/hoppscotch-common/src/components/collections/SaveRequest.vue
@@ -20,25 +20,19 @@
        <label class="p-4">
          {{ t("collection.select_location") }}
        </label>
-        <!-- <CollectionsGraphql
+        <CollectionsGraphql
          v-if="mode === 'graphql'"
          :picked="picked"
          :save-request="true"
          @select="onSelect"
-        /> -->
-        <!-- <Collections
+        />
+        <Collections
          v-else
          :picked="picked"
          :save-request="true"
          @select="onSelect"
          @update-team="updateTeam"
          @update-collection-type="updateCollectionType"
-        /> -->
-        <NewCollections
-          :picked="picked"
-          :save-request="true"
-          platform="rest"
-          @select="onSelect"
        />
      </div>
    </template>
@@ -62,40 +56,51 @@
 </template>

 <script setup lang="ts">
-import { useI18n } from "@composables/i18n"
-import { useToast } from "@composables/toast"
+import { computed, nextTick, reactive, ref, watch } from "vue"
+import { cloneDeep } from "lodash-es"
 import {
  HoppGQLRequest,
  HoppRESTRequest,
  isHoppRESTRequest,
 } from "@hoppscotch/data"
-import { computedWithControl } from "@vueuse/core"
-import { useService } from "dioc/vue"
-import * as E from "fp-ts/Either"
-import { cloneDeep } from "lodash-es"
-import { computed, nextTick, reactive, ref, watch } from "vue"
-
+import { pipe } from "fp-ts/function"
+import * as TE from "fp-ts/TaskEither"
+import { GetMyTeamsQuery } from "~/helpers/backend/graphql"
+import {
+  createRequestInCollection,
+  updateTeamRequest,
+} from "~/helpers/backend/mutations/TeamRequest"
 import { Picked } from "~/helpers/types/HoppPicked"
-import { cascadeParentCollectionForHeaderAuth } from "~/newstore/collections"
-import { NewWorkspaceService } from "~/services/new-workspace"
-import { GQLTabService } from "~/services/tab/graphql"
+import { useI18n } from "@composables/i18n"
+import { useToast } from "@composables/toast"
+import {
+  cascadeParentCollectionForHeaderAuth,
+  editGraphqlRequest,
+  editRESTRequest,
+  saveGraphqlRequestAs,
+  saveRESTRequestAs,
+} from "~/newstore/collections"
+import { GQLError } from "~/helpers/backend/GQLClient"
+import { computedWithControl } from "@vueuse/core"
+import { platform } from "~/platform"
+import { useService } from "dioc/vue"
 import { RESTTabService } from "~/services/tab/rest"
+import { GQLTabService } from "~/services/tab/graphql"

 const t = useI18n()
 const toast = useToast()

 const RESTTabs = useService(RESTTabService)
 const GQLTabs = useService(GQLTabService)
-const workspaceService = useService(NewWorkspaceService)

-// type SelectedTeam = GetMyTeamsQuery["myTeams"][number] | undefined
+type SelectedTeam = GetMyTeamsQuery["myTeams"][number] | undefined

-// type CollectionType =
-//   | {
-//       type: "team-collections"
-//       selectedTeam: SelectedTeam
-//     }
-//   | { type: "my-collections"; selectedTeam: undefined }
+type CollectionType =
+  | {
+      type: "team-collections"
+      selectedTeam: SelectedTeam
+    }
+  | { type: "my-collections"; selectedTeam: undefined }

 const props = withDefaults(
  defineProps<{
@@ -163,10 +168,10 @@ const requestData = reactive({
  requestIndex: undefined as number | undefined,
 })

-// const collectionsType = ref<CollectionType>({
-//   type: "my-collections",
-//   selectedTeam: undefined,
-// })
+const collectionsType = ref<CollectionType>({
+  type: "my-collections",
+  selectedTeam: undefined,
+})

 const picked = ref<Picked | null>(null)

@@ -187,14 +192,13 @@ watch(
  }
 )

-// TODO: To be removed
-// const updateTeam = (newTeam: SelectedTeam) => {
-//   collectionsType.value.selectedTeam = newTeam
-// }
+const updateTeam = (newTeam: SelectedTeam) => {
+  collectionsType.value.selectedTeam = newTeam
+}

-// const updateCollectionType = (type: CollectionType["type"]) => {
-//   collectionsType.value.type = type
-// }
+const updateCollectionType = (type: CollectionType["type"]) => {
+  collectionsType.value.type = type
+}

 const onSelect = (pickedVal: Picked | null) => {
  picked.value = pickedVal
@@ -210,109 +214,66 @@ const saveRequestAs = async () => {
    return
  }

-  const updatedRequest =
+  const requestUpdated =
    props.mode === "rest"
      ? cloneDeep(RESTTabs.currentActiveTab.value.document.request)
      : cloneDeep(GQLTabs.currentActiveTab.value.document.request)

-  updatedRequest.name = requestName.value
+  requestUpdated.name = requestName.value

-  if (!workspaceService.activeWorkspaceHandle.value) {
-    return
-  }
-
-  if (
-    picked.value.pickedType === "my-collection" ||
-    picked.value.pickedType === "my-folder"
-  ) {
-    if (!isHoppRESTRequest(updatedRequest))
+  if (picked.value.pickedType === "my-collection") {
+    if (!isHoppRESTRequest(requestUpdated))
      throw new Error("requestUpdated is not a REST Request")

-    const collectionPathIndex =
-      picked.value.pickedType === "my-collection"
-        ? picked.value.collectionIndex.toString()
-        : picked.value.folderPath
-
-    const collectionHandleResult = await workspaceService.getCollectionHandle(
-      workspaceService.activeWorkspaceHandle.value,
-      collectionPathIndex
+    const insertionIndex = saveRESTRequestAs(
+      `${picked.value.collectionIndex}`,
+      requestUpdated
    )

-    if (E.isLeft(collectionHandleResult)) {
-      // INVALID_WORKSPACE_HANDLE | INVALID_COLLECTION_ID | INVALID_PATH
-      return
-    }
-
-    const collectionHandle = collectionHandleResult.right
-
-    const requestHandleResult = await workspaceService.createRESTRequest(
-      collectionHandle,
-      updatedRequest
-    )
-
-    if (E.isLeft(requestHandleResult)) {
-      // WORKSPACE_INVALIDATED | INVALID_COLLECTION_HANDLE
-      return
-    }
-
-    const requestHandle = requestHandleResult.right
-
-    const requestHandleRef = requestHandle.get()
-
-    if (requestHandleRef.value.type === "invalid") {
-      // WORKSPACE_INVALIDATED | INVALID_COLLECTION_HANDLE
-      return
-    }
-
    RESTTabs.currentActiveTab.value.document = {
-      request: updatedRequest,
+      request: requestUpdated,
      isDirty: false,
      saveContext: {
-        originLocation: "workspace-user-collection",
-        requestHandle,
+        originLocation: "user-collection",
+        folderPath: `${picked.value.collectionIndex}`,
+        requestIndex: insertionIndex,
      },
    }

+    const { auth, headers } = cascadeParentCollectionForHeaderAuth(
+      `${picked.value.collectionIndex}`,
+      "rest"
+    )
+
+    RESTTabs.currentActiveTab.value.document.inheritedProperties = {
+      auth,
+      headers,
+    }
+
+    platform.analytics?.logEvent({
+      type: "HOPP_SAVE_REQUEST",
+      createdNow: true,
+      platform: "rest",
+      workspaceType: "personal",
+    })
+
    requestSaved()
-  } else if (picked.value.pickedType === "my-request") {
-    if (!isHoppRESTRequest(updatedRequest))
+  } else if (picked.value.pickedType === "my-folder") {
+    if (!isHoppRESTRequest(requestUpdated))
      throw new Error("requestUpdated is not a REST Request")

-    const requestHandleResult = await workspaceService.getRequestHandle(
-      workspaceService.activeWorkspaceHandle.value,
-      `${picked.value.folderPath}/${picked.value.requestIndex.toString()}`
+    const insertionIndex = saveRESTRequestAs(
+      picked.value.folderPath,
+      requestUpdated
    )

-    if (E.isLeft(requestHandleResult)) {
-      // INVALID_COLLECTION_HANDLE | INVALID_REQUEST_ID | REQUEST_NOT_FOUND
-      return
-    }
-
-    const requestHandle = requestHandleResult.right
-
-    const requestHandleRef = requestHandle.get()
-
-    if (requestHandleRef.value.type === "invalid") {
-      // WORKSPACE_INVALIDATED
-      return
-    }
-
-    const updateRequestResult = await workspaceService.updateRESTRequest(
-      requestHandle,
-      updatedRequest
-    )
-
-    if (E.isLeft(updateRequestResult)) {
-      // WORKSPACE_INVALIDATED | INVALID_REQUEST_HANDLE
-      return
-    }
-
    RESTTabs.currentActiveTab.value.document = {
-      request: updatedRequest,
+      request: requestUpdated,
      isDirty: false,
      saveContext: {
-        originLocation: "workspace-user-collection",
-        requestHandle,
+        originLocation: "user-collection",
+        folderPath: picked.value.folderPath,
+        requestIndex: insertionIndex,
      },
    }

@@ -326,147 +287,190 @@ const saveRequestAs = async () => {
      headers,
    }

+    platform.analytics?.logEvent({
+      type: "HOPP_SAVE_REQUEST",
+      createdNow: true,
+      platform: "rest",
+      workspaceType: "personal",
+    })
+
+    requestSaved()
+  } else if (picked.value.pickedType === "my-request") {
+    if (!isHoppRESTRequest(requestUpdated))
+      throw new Error("requestUpdated is not a REST Request")
+
+    editRESTRequest(
+      picked.value.folderPath,
+      picked.value.requestIndex,
+      requestUpdated
+    )
+
+    RESTTabs.currentActiveTab.value.document = {
+      request: requestUpdated,
+      isDirty: false,
+      saveContext: {
+        originLocation: "user-collection",
+        folderPath: picked.value.folderPath,
+        requestIndex: picked.value.requestIndex,
+      },
+    }
+
+    const { auth, headers } = cascadeParentCollectionForHeaderAuth(
+      picked.value.folderPath,
+      "rest"
+    )
+
+    RESTTabs.currentActiveTab.value.document.inheritedProperties = {
+      auth,
+      headers,
+    }
+
+    platform.analytics?.logEvent({
+      type: "HOPP_SAVE_REQUEST",
+      createdNow: false,
+      platform: "rest",
+      workspaceType: "personal",
+    })
+
+    requestSaved()
+  } else if (picked.value.pickedType === "teams-collection") {
+    if (!isHoppRESTRequest(requestUpdated))
+      throw new Error("requestUpdated is not a REST Request")
+
+    updateTeamCollectionOrFolder(picked.value.collectionID, requestUpdated)
+
+    platform.analytics?.logEvent({
+      type: "HOPP_SAVE_REQUEST",
+      createdNow: true,
+      platform: "rest",
+      workspaceType: "team",
+    })
+  } else if (picked.value.pickedType === "teams-folder") {
+    if (!isHoppRESTRequest(requestUpdated))
+      throw new Error("requestUpdated is not a REST Request")
+
+    updateTeamCollectionOrFolder(picked.value.folderID, requestUpdated)
+
+    platform.analytics?.logEvent({
+      type: "HOPP_SAVE_REQUEST",
+      createdNow: true,
+      platform: "rest",
+      workspaceType: "team",
+    })
+  } else if (picked.value.pickedType === "teams-request") {
+    if (!isHoppRESTRequest(requestUpdated))
+      throw new Error("requestUpdated is not a REST Request")
+
+    if (
+      collectionsType.value.type !== "team-collections" ||
+      !collectionsType.value.selectedTeam
+    )
+      throw new Error("Collections Type mismatch")
+
+    modalLoadingState.value = true
+
+    const data = {
+      request: JSON.stringify(requestUpdated),
+      title: requestUpdated.name,
+    }
+
+    platform.analytics?.logEvent({
+      type: "HOPP_SAVE_REQUEST",
+      createdNow: false,
+      platform: "rest",
+      workspaceType: "team",
+    })
+
+    pipe(
+      updateTeamRequest(picked.value.requestID, data),
+      TE.match(
+        (err: GQLError<string>) => {
+          toast.error(`${getErrorMessage(err)}`)
+          modalLoadingState.value = false
+        },
+        () => {
+          modalLoadingState.value = false
+          requestSaved()
+        }
+      )
+    )()
+  } else if (picked.value.pickedType === "gql-my-request") {
+    // TODO: Check for GQL request ?
+    editGraphqlRequest(
+      picked.value.folderPath,
+      picked.value.requestIndex,
+      requestUpdated as HoppGQLRequest
+    )
+
+    platform.analytics?.logEvent({
+      type: "HOPP_SAVE_REQUEST",
+      createdNow: false,
+      platform: "gql",
+      workspaceType: "team",
+    })
+
+    const { auth, headers } = cascadeParentCollectionForHeaderAuth(
+      picked.value.folderPath,
+      "graphql"
+    )
+
+    GQLTabs.currentActiveTab.value.document.inheritedProperties = {
+      auth,
+      headers,
+    }
+
+    requestSaved()
+  } else if (picked.value.pickedType === "gql-my-folder") {
+    // TODO: Check for GQL request ?
+    saveGraphqlRequestAs(
+      picked.value.folderPath,
+      requestUpdated as HoppGQLRequest
+    )
+
+    platform.analytics?.logEvent({
+      type: "HOPP_SAVE_REQUEST",
+      createdNow: true,
+      platform: "gql",
+      workspaceType: "team",
+    })
+
+    const { auth, headers } = cascadeParentCollectionForHeaderAuth(
+      picked.value.folderPath,
+      "graphql"
+    )
+
+    GQLTabs.currentActiveTab.value.document.inheritedProperties = {
+      auth,
+      headers,
+    }
+
+    requestSaved()
+  } else if (picked.value.pickedType === "gql-my-collection") {
+    // TODO: Check for GQL request ?
+    saveGraphqlRequestAs(
+      `${picked.value.collectionIndex}`,
+      requestUpdated as HoppGQLRequest
+    )
+
+    platform.analytics?.logEvent({
+      type: "HOPP_SAVE_REQUEST",
+      createdNow: true,
+      platform: "gql",
+      workspaceType: "team",
+    })
+
+    const { auth, headers } = cascadeParentCollectionForHeaderAuth(
+      `${picked.value.collectionIndex}`,
+      "graphql"
+    )
+
+    GQLTabs.currentActiveTab.value.document.inheritedProperties = {
+      auth,
+      headers,
+    }
+
    requestSaved()
  }
-  // TODO: To be removed
-  // else if (picked.value.pickedType === "teams-collection") {
-  //   if (!isHoppRESTRequest(updatedRequest))
-  //     throw new Error("requestUpdated is not a REST Request")
-
-  //   updateTeamCollectionOrFolder(picked.value.collectionID, updatedRequest)
-
-  //   platform.analytics?.logEvent({
-  //     type: "HOPP_SAVE_REQUEST",
-  //     createdNow: true,
-  //     platform: "rest",
-  //     workspaceType: "team",
-  //   })
-  // } else if (picked.value.pickedType === "teams-folder") {
-  //   if (!isHoppRESTRequest(updatedRequest))
-  //     throw new Error("requestUpdated is not a REST Request")
-
-  //   updateTeamCollectionOrFolder(picked.value.folderID, updatedRequest)
-
-  //   platform.analytics?.logEvent({
-  //     type: "HOPP_SAVE_REQUEST",
-  //     createdNow: true,
-  //     platform: "rest",
-  //     workspaceType: "team",
-  //   })
-  // } else if (picked.value.pickedType === "teams-request") {
-  //   if (!isHoppRESTRequest(updatedRequest))
-  //     throw new Error("requestUpdated is not a REST Request")
-
-  //   if (
-  //     collectionsType.value.type !== "team-collections" ||
-  //     !collectionsType.value.selectedTeam
-  //   )
-  //     throw new Error("Collections Type mismatch")
-
-  //   modalLoadingState.value = true
-
-  //   const data = {
-  //     request: JSON.stringify(updatedRequest),
-  //     title: updatedRequest.name,
-  //   }
-
-  //   platform.analytics?.logEvent({
-  //     type: "HOPP_SAVE_REQUEST",
-  //     createdNow: false,
-  //     platform: "rest",
-  //     workspaceType: "team",
-  //   })
-
-  //   pipe(
-  //     updateTeamRequest(picked.value.requestID, data),
-  //     TE.match(
-  //       (err: GQLError<string>) => {
-  //         toast.error(`${getErrorMessage(err)}`)
-  //         modalLoadingState.value = false
-  //       },
-  //       () => {
-  //         modalLoadingState.value = false
-  //         requestSaved()
-  //       }
-  //     )
-  //   )()
-  // } else if (picked.value.pickedType === "gql-my-request") {
-  //   // TODO: Check for GQL request ?
-  //   editGraphqlRequest(
-  //     picked.value.folderPath,
-  //     picked.value.requestIndex,
-  //     updatedRequest as HoppGQLRequest
-  //   )
-
-  //   platform.analytics?.logEvent({
-  //     type: "HOPP_SAVE_REQUEST",
-  //     createdNow: false,
-  //     platform: "gql",
-  //     workspaceType: "team",
-  //   })
-
-  //   const { auth, headers } = cascadeParentCollectionForHeaderAuth(
-  //     picked.value.folderPath,
-  //     "graphql"
-  //   )
-
-  //   GQLTabs.currentActiveTab.value.document.inheritedProperties = {
-  //     auth,
-  //     headers,
-  //   }
-
-  //   requestSaved()
-  // } else if (picked.value.pickedType === "gql-my-folder") {
-  //   // TODO: Check for GQL request ?
-  //   saveGraphqlRequestAs(
-  //     picked.value.folderPath,
-  //     updatedRequest as HoppGQLRequest
-  //   )
-
-  //   platform.analytics?.logEvent({
-  //     type: "HOPP_SAVE_REQUEST",
-  //     createdNow: true,
-  //     platform: "gql",
-  //     workspaceType: "team",
-  //   })
-
-  //   const { auth, headers } = cascadeParentCollectionForHeaderAuth(
-  //     picked.value.folderPath,
-  //     "graphql"
-  //   )
-
-  //   GQLTabs.currentActiveTab.value.document.inheritedProperties = {
-  //     auth,
-  //     headers,
-  //   }
-
-  //   requestSaved()
-  // } else if (picked.value.pickedType === "gql-my-collection") {
-  //   // TODO: Check for GQL request ?
-  //   saveGraphqlRequestAs(
-  //     `${picked.value.collectionIndex}`,
-  //     updatedRequest as HoppGQLRequest
-  //   )
-
-  //   platform.analytics?.logEvent({
-  //     type: "HOPP_SAVE_REQUEST",
-  //     createdNow: true,
-  //     platform: "gql",
-  //     workspaceType: "team",
-  //   })
-
-  //   const { auth, headers } = cascadeParentCollectionForHeaderAuth(
-  //     `${picked.value.collectionIndex}`,
-  //     "graphql"
-  //   )
-
-  //   GQLTabs.currentActiveTab.value.document.inheritedProperties = {
-  //     auth,
-  //     headers,
-  //   }
-
-  //   requestSaved()
-  // }
 }

 /**
@@ -474,50 +478,50 @@ const saveRequestAs = async () => {
 * @param collectionID - ID of the collection or folder
 * @param requestUpdated - Updated request
 */
-// const updateTeamCollectionOrFolder = (
-//   collectionID: string,
-//   requestUpdated: HoppRESTRequest
-// ) => {
-//   if (
-//     collectionsType.value.type !== "team-collections" ||
-//     !collectionsType.value.selectedTeam
-//   )
-//     throw new Error("Collections Type mismatch")
+const updateTeamCollectionOrFolder = (
+  collectionID: string,
+  requestUpdated: HoppRESTRequest
+) => {
+  if (
+    collectionsType.value.type !== "team-collections" ||
+    !collectionsType.value.selectedTeam
+  )
+    throw new Error("Collections Type mismatch")

-//   modalLoadingState.value = true
+  modalLoadingState.value = true

-//   const data = {
-//     title: requestUpdated.name,
-//     request: JSON.stringify(requestUpdated),
-//     teamID: collectionsType.value.selectedTeam.id,
-//   }
-//   pipe(
-//     createRequestInCollection(collectionID, data),
-//     TE.match(
-//       (err: GQLError<string>) => {
-//         toast.error(`${getErrorMessage(err)}`)
-//         modalLoadingState.value = false
-//       },
-//       (result) => {
-//         const { createRequestInCollection } = result
+  const data = {
+    title: requestUpdated.name,
+    request: JSON.stringify(requestUpdated),
+    teamID: collectionsType.value.selectedTeam.id,
+  }
+  pipe(
+    createRequestInCollection(collectionID, data),
+    TE.match(
+      (err: GQLError<string>) => {
+        toast.error(`${getErrorMessage(err)}`)
+        modalLoadingState.value = false
+      },
+      (result) => {
+        const { createRequestInCollection } = result

-//         RESTTabs.currentActiveTab.value.document = {
-//           request: requestUpdated,
-//           isDirty: false,
-//           saveContext: {
-//             originLocation: "team-collection",
-//             requestID: createRequestInCollection.id,
-//             collectionID: createRequestInCollection.collection.id,
-//             teamID: createRequestInCollection.collection.team.id,
-//           },
-//         }
+        RESTTabs.currentActiveTab.value.document = {
+          request: requestUpdated,
+          isDirty: false,
+          saveContext: {
+            originLocation: "team-collection",
+            requestID: createRequestInCollection.id,
+            collectionID: createRequestInCollection.collection.id,
+            teamID: createRequestInCollection.collection.team.id,
+          },
+        }

-//         modalLoadingState.value = false
-//         requestSaved()
-//       }
-//     )
-//   )()
-// }
+        modalLoadingState.value = false
+        requestSaved()
+      }
+    )
+  )()
+}

 const requestSaved = () => {
  toast.success(`${t("request.added")}`)
@@ -532,24 +536,24 @@ const hideModal = () => {
  emit("hide-modal")
 }

-// const getErrorMessage = (err: GQLError<string>) => {
-//   console.error(err)
-//   if (err.type === "network_error") {
-//     return t("error.network_error")
-//   }
-//   switch (err.error) {
-//     case "team_coll/short_title":
-//       return t("collection.name_length_insufficient")
-//     case "team/invalid_coll_id":
-//       return t("team.invalid_id")
-//     case "team/not_required_role":
-//       return t("profile.no_permission")
-//     case "team_req/not_required_role":
-//       return t("profile.no_permission")
-//     case "Forbidden resource":
-//       return t("profile.no_permission")
-//     default:
-//       return t("error.something_went_wrong")
-//   }
-// }
+const getErrorMessage = (err: GQLError<string>) => {
+  console.error(err)
+  if (err.type === "network_error") {
+    return t("error.network_error")
+  }
+  switch (err.error) {
+    case "team_coll/short_title":
+      return t("collection.name_length_insufficient")
+    case "team/invalid_coll_id":
+      return t("team.invalid_id")
+    case "team/not_required_role":
+      return t("profile.no_permission")
+    case "team_req/not_required_role":
+      return t("profile.no_permission")
+    case "Forbidden resource":
+      return t("profile.no_permission")
+    default:
+      return t("error.something_went_wrong")
+  }
+}
 </script>
--- a/packages/hoppscotch-common/src/components/collections/TeamCollections.vue
+++ b/packages/hoppscotch-common/src/components/collections/TeamCollections.vue
@@ -387,6 +387,7 @@ import IconPlus from "~icons/lucide/plus"
 import IconHelpCircle from "~icons/lucide/help-circle"
 import IconImport from "~icons/lucide/folder-down"
 import { computed, PropType, Ref, toRef } from "vue"
+import { GetMyTeamsQuery } from "~/helpers/backend/graphql"
 import { useI18n } from "@composables/i18n"
 import { useColorMode } from "@composables/theming"
 import { TeamCollection } from "~/helpers/teams/TeamCollection"
@@ -399,16 +400,17 @@ import * as O from "fp-ts/Option"
 import { Picked } from "~/helpers/types/HoppPicked.js"
 import { RESTTabService } from "~/services/tab/rest"
 import { useService } from "dioc/vue"
-import { TeamWorkspace } from "~/services/workspace.service"

 const t = useI18n()
 const colorMode = useColorMode()
 const tabs = useService(RESTTabService)

+type SelectedTeam = GetMyTeamsQuery["myTeams"][number] | undefined
+
 type CollectionType =
  | {
      type: "team-collections"
-      selectedTeam: TeamWorkspace
+      selectedTeam: SelectedTeam
    }
  | { type: "my-collections"; selectedTeam: undefined }

@@ -612,7 +614,7 @@ const hasNoTeamAccess = computed(
  () =>
    props.collectionsType.type === "team-collections" &&
    (props.collectionsType.selectedTeam === undefined ||
-      props.collectionsType.selectedTeam.role === "VIEWER")
+      props.collectionsType.selectedTeam.myRole === "VIEWER")
 )

 const isSelected = ({
--- a/packages/hoppscotch-common/src/components/collections/graphql/ImportExport.vue
+++ b/packages/hoppscotch-common/src/components/collections/graphql/ImportExport.vue
@@ -21,7 +21,7 @@ import { GistSource } from "~/helpers/import-export/import/import-sources/GistSo

 import IconFolderPlus from "~icons/lucide/folder-plus"
 import IconUser from "~icons/lucide/user"
-import { initializeDownloadFile } from "~/helpers/import-export/export"
+import { initializeDownloadCollection } from "~/helpers/import-export/export"
 import { useReadonlyStream } from "~/composables/stream"

 import { platform } from "~/platform"
@@ -133,12 +133,12 @@ const GqlCollectionsHoppExporter: ImporterOrExporter = {
    disabled: false,
    applicableTo: ["personal-workspace", "team-workspace"],
  },
-  action: async () => {
+  action: () => {
    if (!gqlCollections.value.length) {
      return toast.error(t("error.no_collections_to_export"))
    }

-    const message = await initializeDownloadFile(
+    const message = initializeDownloadCollection(
      gqlCollectionsExporter(gqlCollections.value),
      "GQLCollections"
    )
--- a/packages/hoppscotch-common/src/components/collections/graphql/index.vue
+++ b/packages/hoppscotch-common/src/components/collections/graphql/index.vue
@@ -200,7 +200,7 @@ const toast = useToast()
 defineProps<{
  // Whether to activate the ability to pick items (activates 'select' events)
  saveRequest: boolean
-  picked: Picked | null
+  picked: Picked
 }>()

 const collections = useReadonlyStream(graphqlCollections$, [], "deep")
--- a/packages/hoppscotch-common/src/components/collections/index.vue
+++ b/packages/hoppscotch-common/src/components/collections/index.vue
@@ -178,6 +178,7 @@ import { useI18n } from "@composables/i18n"
 import { Picked } from "~/helpers/types/HoppPicked"
 import { useReadonlyStream } from "~/composables/stream"
 import { useLocalState } from "~/newstore/localstate"
+import { GetMyTeamsQuery } from "~/helpers/backend/graphql"
 import { pipe } from "fp-ts/function"
 import * as TE from "fp-ts/TaskEither"
 import {
@@ -244,7 +245,7 @@ import {
 } from "~/helpers/collection/collection"
 import { currentReorderingStatus$ } from "~/newstore/reordering"
 import { defineActionHandler, invokeAction } from "~/helpers/actions"
-import { TeamWorkspace, WorkspaceService } from "~/services/workspace.service"
+import { WorkspaceService } from "~/services/workspace.service"
 import { useService } from "dioc/vue"
 import { RESTTabService } from "~/services/tab/rest"
 import { HoppInheritedProperty } from "~/helpers/types/HoppInheritedProperties"
@@ -273,14 +274,16 @@ const props = defineProps({

 const emit = defineEmits<{
  (event: "select", payload: Picked | null): void
-  (event: "update-team", team: TeamWorkspace): void
+  (event: "update-team", team: SelectedTeam): void
  (event: "update-collection-type", type: CollectionType["type"]): void
 }>()

+type SelectedTeam = GetMyTeamsQuery["myTeams"][number] | undefined
+
 type CollectionType =
  | {
      type: "team-collections"
-      selectedTeam: TeamWorkspace
+      selectedTeam: SelectedTeam
    }
  | { type: "my-collections"; selectedTeam: undefined }

@@ -327,7 +330,9 @@ const requestMoveLoading = ref<string[]>([])
 // TeamList-Adapter
 const workspaceService = useService(WorkspaceService)
 const teamListAdapter = workspaceService.acquireTeamListAdapter(null)
+const myTeams = useReadonlyStream(teamListAdapter.teamList$, null)
 const REMEMBERED_TEAM_ID = useLocalState("REMEMBERED_TEAM_ID")
+const teamListFetched = ref(false)

 // Team Collection Adapter
 const teamCollectionAdapter = new TeamCollectionAdapter(null)
@@ -373,7 +378,7 @@ watch(
  filterTexts,
  (newFilterText) => {
    if (collectionsType.value.type === "team-collections") {
-      const selectedTeamID = collectionsType.value.selectedTeam?.teamID
+      const selectedTeamID = collectionsType.value.selectedTeam?.id

      selectedTeamID &&
        debouncedSearch(newFilterText, selectedTeamID)?.catch(() => {})
@@ -430,6 +435,28 @@ onMounted(() => {
  }
 })

+watch(
+  () => myTeams.value,
+  (newTeams) => {
+    if (newTeams && !teamListFetched.value) {
+      teamListFetched.value = true
+      if (REMEMBERED_TEAM_ID.value && currentUser.value) {
+        const team = newTeams.find((t) => t.id === REMEMBERED_TEAM_ID.value)
+        if (team) updateSelectedTeam(team)
+      }
+    }
+  }
+)
+
+watch(
+  () => collectionsType.value.selectedTeam,
+  (newTeam) => {
+    if (newTeam) {
+      teamCollectionAdapter.changeTeamID(newTeam.id)
+    }
+  }
+)
+
 const switchToMyCollections = () => {
  collectionsType.value.type = "my-collections"
  collectionsType.value.selectedTeam = undefined
@@ -461,12 +488,11 @@ const expandTeamCollection = (collectionID: string) => {
  teamCollectionAdapter.expandCollection(collectionID)
 }

-const updateSelectedTeam = (team: TeamWorkspace) => {
+const updateSelectedTeam = (team: SelectedTeam) => {
  if (team) {
    collectionsType.value.type = "team-collections"
-    teamCollectionAdapter.changeTeamID(team.teamID)
    collectionsType.value.selectedTeam = team
-    REMEMBERED_TEAM_ID.value = team.teamID
+    REMEMBERED_TEAM_ID.value = team.id
    emit("update-team", team)
    emit("update-collection-type", "team-collections")
  }
@@ -475,14 +501,23 @@ const updateSelectedTeam = (team: TeamWorkspace) => {
 const workspace = workspaceService.currentWorkspace

 // Used to switch collection type and team when user switch workspace in the global workspace switcher
+// Check if there is a teamID in the workspace, if yes, switch to team collections and select the team
+// If there is no teamID, switch to my collections
 watch(
-  workspace,
-  (newWorkspace) => {
-    if (newWorkspace.type === "personal") {
-      switchToMyCollections()
-    } else if (newWorkspace.type === "team") {
-      updateSelectedTeam(newWorkspace)
+  () => {
+    const space = workspace.value
+    return space.type === "personal" ? undefined : space.teamID
+  },
+  (teamID) => {
+    if (teamID) {
+      const team = myTeams.value?.find((t) => t.id === teamID)
+      if (team) {
+        updateSelectedTeam(team)
+      }
+      return
    }
+
+    return switchToMyCollections()
  },
  {
    immediate: true,
@@ -510,7 +545,7 @@ const hasTeamWriteAccess = computed(() => {
    return false
  }

-  const role = collectionsType.value.selectedTeam?.role
+  const role = collectionsType.value.selectedTeam?.myRole
  return role === "OWNER" || role === "EDITOR"
 })

@@ -725,7 +760,7 @@ const addNewRootCollection = (name: string) => {
    })

    pipe(
-      createNewRootCollection(name, collectionsType.value.selectedTeam.teamID),
+      createNewRootCollection(name, collectionsType.value.selectedTeam.id),
      TE.match(
        (err: GQLError<string>) => {
          toast.error(`${getErrorMessage(err)}`)
@@ -796,7 +831,7 @@ const onAddRequest = (requestName: string) => {

    const data = {
      request: JSON.stringify(newRequest),
-      teamID: collectionsType.value.selectedTeam.teamID,
+      teamID: collectionsType.value.selectedTeam.id,
      title: requestName,
    }

@@ -1123,7 +1158,7 @@ const duplicateRequest = (payload: {

    const data = {
      request: JSON.stringify(newRequest),
-      teamID: collectionsType.value.selectedTeam.teamID,
+      teamID: collectionsType.value.selectedTeam.id,
      title: `${request.name} - ${t("action.duplicate")}`,
    }

--- a/packages/hoppscotch-common/src/components/environments/ImportExport.vue
+++ b/packages/hoppscotch-common/src/components/environments/ImportExport.vue
@@ -37,7 +37,7 @@ import IconFolderPlus from "~icons/lucide/folder-plus"
 import IconPostman from "~icons/hopp/postman"
 import IconInsomnia from "~icons/hopp/insomnia"
 import IconUser from "~icons/lucide/user"
-import { initializeDownloadFile } from "~/helpers/import-export/export"
+import { initializeDownloadCollection } from "~/helpers/import-export/export"
 import { computed } from "vue"
 import { useReadonlyStream } from "~/composables/stream"
 import { environmentsExporter } from "~/helpers/import-export/export/environments"
@@ -230,12 +230,12 @@ const HoppEnvironmentsExport: ImporterOrExporter = {
    disabled: false,
    applicableTo: ["personal-workspace", "team-workspace"],
  },
-  action: async () => {
+  action: () => {
    if (!environmentJson.value.length) {
      return toast.error(t("error.no_environments_to_export"))
    }

-    const message = await initializeDownloadFile(
+    const message = initializeDownloadCollection(
      environmentsExporter(environmentJson.value),
      "Environments"
    )
--- a/packages/hoppscotch-common/src/components/environments/Selector.vue
+++ b/packages/hoppscotch-common/src/components/environments/Selector.vue
@@ -364,7 +364,6 @@ const switchToTeamWorkspace = (team: GetMyTeamsQuery["myTeams"][number]) => {
    teamID: team.id,
    teamName: team.name,
    type: "team",
-    role: team.myRole,
  })
 }
 watch(
--- a/packages/hoppscotch-common/src/components/environments/index.vue
+++ b/packages/hoppscotch-common/src/components/environments/index.vue
@@ -46,38 +46,41 @@
 </template>

 <script setup lang="ts">
-import { useReadonlyStream, useStream } from "@composables/stream"
-import { Environment } from "@hoppscotch/data"
-import { useService } from "dioc/vue"
-import * as TE from "fp-ts/TaskEither"
-import { pipe } from "fp-ts/function"
-import { isEqual } from "lodash-es"
 import { computed, ref, watch } from "vue"
+import { isEqual } from "lodash-es"
+import { platform } from "~/platform"
+import { GetMyTeamsQuery } from "~/helpers/backend/graphql"
+import { useReadonlyStream, useStream } from "@composables/stream"
 import { useI18n } from "~/composables/i18n"
-import { useToast } from "~/composables/toast"
-import { defineActionHandler } from "~/helpers/actions"
-import { GQLError } from "~/helpers/backend/GQLClient"
-import { deleteTeamEnvironment } from "~/helpers/backend/mutations/TeamEnvironment"
-import TeamEnvironmentAdapter from "~/helpers/teams/TeamEnvironmentAdapter"
 import {
-  deleteEnvironment,
  getSelectedEnvironmentIndex,
  globalEnv$,
  selectedEnvironmentIndex$,
  setSelectedEnvironmentIndex,
 } from "~/newstore/environments"
+import TeamEnvironmentAdapter from "~/helpers/teams/TeamEnvironmentAdapter"
+import { defineActionHandler } from "~/helpers/actions"
 import { useLocalState } from "~/newstore/localstate"
-import { platform } from "~/platform"
-import { TeamWorkspace, WorkspaceService } from "~/services/workspace.service"
+import { pipe } from "fp-ts/function"
+import * as TE from "fp-ts/TaskEither"
+import { GQLError } from "~/helpers/backend/GQLClient"
+import { deleteEnvironment } from "~/newstore/environments"
+import { deleteTeamEnvironment } from "~/helpers/backend/mutations/TeamEnvironment"
+import { useToast } from "~/composables/toast"
+import { WorkspaceService } from "~/services/workspace.service"
+import { useService } from "dioc/vue"
+import { Environment } from "@hoppscotch/data"

 const t = useI18n()
 const toast = useToast()

 type EnvironmentType = "my-environments" | "team-environments"

+type SelectedTeam = GetMyTeamsQuery["myTeams"][number] | undefined
+
 type EnvironmentsChooseType = {
  type: EnvironmentType
-  selectedTeam: TeamWorkspace | undefined
+  selectedTeam: SelectedTeam
 }

 const environmentType = ref<EnvironmentsChooseType>({
@@ -99,7 +102,11 @@ const currentUser = useReadonlyStream(
  platform.auth.getCurrentUser()
 )

+// TeamList-Adapter
 const workspaceService = useService(WorkspaceService)
+const teamListAdapter = workspaceService.acquireTeamListAdapter(null)
+const myTeams = useReadonlyStream(teamListAdapter.teamList$, null)
+const teamListFetched = ref(false)
 const REMEMBERED_TEAM_ID = useLocalState("REMEMBERED_TEAM_ID")

 const adapter = new TeamEnvironmentAdapter(undefined)
@@ -111,17 +118,29 @@ const loading = computed(
  () => adapterLoading.value && teamEnvironmentList.value.length === 0
 )

+watch(
+  () => myTeams.value,
+  (newTeams) => {
+    if (newTeams && !teamListFetched.value) {
+      teamListFetched.value = true
+      if (REMEMBERED_TEAM_ID.value && currentUser.value) {
+        const team = newTeams.find((t) => t.id === REMEMBERED_TEAM_ID.value)
+        if (team) updateSelectedTeam(team)
+      }
+    }
+  }
+)
+
 const switchToMyEnvironments = () => {
  environmentType.value.selectedTeam = undefined
  updateEnvironmentType("my-environments")
  adapter.changeTeamID(undefined)
 }

-const updateSelectedTeam = (newSelectedTeam: TeamWorkspace | undefined) => {
+const updateSelectedTeam = (newSelectedTeam: SelectedTeam | undefined) => {
  if (newSelectedTeam) {
-    adapter.changeTeamID(newSelectedTeam.teamID)
    environmentType.value.selectedTeam = newSelectedTeam
-    REMEMBERED_TEAM_ID.value = newSelectedTeam.teamID
+    REMEMBERED_TEAM_ID.value = newSelectedTeam.id
    updateEnvironmentType("team-environments")
  }
 }
@@ -129,6 +148,15 @@ const updateEnvironmentType = (newEnvironmentType: EnvironmentType) => {
  environmentType.value.type = newEnvironmentType
 }

+watch(
+  () => environmentType.value.selectedTeam,
+  (newTeam) => {
+    if (newTeam) {
+      adapter.changeTeamID(newTeam.id)
+    }
+  }
+)
+
 const workspace = workspaceService.currentWorkspace

 // Switch to my environments if workspace is personal and to team environments if workspace is team
@@ -142,7 +170,8 @@ watch(workspace, (newWorkspace) => {
      })
    }
  } else if (newWorkspace.type === "team") {
-    updateSelectedTeam(newWorkspace)
+    const team = myTeams.value?.find((t) => t.id === newWorkspace.teamID)
+    updateSelectedTeam(team)
  }
 })

--- a/packages/hoppscotch-common/src/components/environments/my/Details.vue
+++ b/packages/hoppscotch-common/src/components/environments/my/Details.vue
@@ -54,7 +54,9 @@
              :key="tab.id"
              :label="tab.label"
            >
-              <div class="divide-y divide-dividerLight">
+              <div
+                class="divide-y divide-dividerLight rounded border border-divider"
+              >
                <HoppSmartPlaceholder
                  v-if="tab.variables.length === 0"
                  :src="`/images/states/${colorMode.value}/blockchain.svg`"
--- a/packages/hoppscotch-common/src/components/environments/teams/Details.vue
+++ b/packages/hoppscotch-common/src/components/environments/teams/Details.vue
@@ -56,7 +56,9 @@
              :key="tab.id"
              :label="tab.label"
            >
-              <div class="divide-y divide-dividerLight">
+              <div
+                class="divide-y divide-dividerLight rounded border border-divider"
+              >
                <HoppSmartPlaceholder
                  v-if="tab.variables.length === 0"
                  :src="`/images/states/${colorMode.value}/blockchain.svg`"
--- a/packages/hoppscotch-common/src/components/environments/teams/index.vue
+++ b/packages/hoppscotch-common/src/components/environments/teams/index.vue
@@ -4,7 +4,7 @@
      class="sticky top-upperPrimaryStickyFold z-10 flex flex-1 flex-shrink-0 justify-between overflow-x-auto border-b border-dividerLight bg-primary"
    >
      <HoppButtonSecondary
-        v-if="team === undefined || team.role === 'VIEWER'"
+        v-if="team === undefined || team.myRole === 'VIEWER'"
        v-tippy="{ theme: 'tooltip' }"
        disabled
        class="!rounded-none"
@@ -28,7 +28,7 @@
          :icon="IconHelpCircle"
        />
        <HoppButtonSecondary
-          v-if="team !== undefined && team.role === 'VIEWER'"
+          v-if="team !== undefined && team.myRole === 'VIEWER'"
          v-tippy="{ theme: 'tooltip' }"
          disabled
          :icon="IconImport"
@@ -84,7 +84,7 @@
        )"
        :key="`environment-${index}`"
        :environment="environment"
-        :is-viewer="team?.role === 'VIEWER'"
+        :is-viewer="team?.myRole === 'VIEWER'"
        @edit-environment="editEnvironment(environment)"
      />
    </div>
@@ -103,16 +103,16 @@
      :show="showModalDetails"
      :action="action"
      :editing-environment="editingEnvironment"
-      :editing-team-id="team?.teamID"
+      :editing-team-id="team?.id"
      :editing-variable-name="editingVariableName"
      :is-secret-option-selected="secretOptionSelected"
-      :is-viewer="team?.role === 'VIEWER'"
+      :is-viewer="team?.myRole === 'VIEWER'"
      @hide-modal="displayModalEdit(false)"
    />
    <EnvironmentsImportExport
      v-if="showModalImportExport"
      :team-environments="teamEnvironments"
-      :team-id="team?.teamID"
+      :team-id="team?.id"
      environment-type="TEAM_ENV"
      @hide-modal="displayModalImportExport(false)"
    />
@@ -129,14 +129,16 @@ import IconPlus from "~icons/lucide/plus"
 import IconHelpCircle from "~icons/lucide/help-circle"
 import IconImport from "~icons/lucide/folder-down"
 import { defineActionHandler } from "~/helpers/actions"
-import { TeamWorkspace } from "~/services/workspace.service"
+import { GetMyTeamsQuery } from "~/helpers/backend/graphql"

 const t = useI18n()

 const colorMode = useColorMode()

+type SelectedTeam = GetMyTeamsQuery["myTeams"][number] | undefined
+
 const props = defineProps<{
-  team: TeamWorkspace | undefined
+  team: SelectedTeam
  teamEnvironments: TeamEnvironment[]
  adapterError: GQLError<string> | null
  loading: boolean
@@ -149,7 +151,7 @@ const editingEnvironment = ref<TeamEnvironment | null>(null)
 const editingVariableName = ref("")
 const secretOptionSelected = ref(false)

-const isTeamViewer = computed(() => props.team?.role === "VIEWER")
+const isTeamViewer = computed(() => props.team?.myRole === "VIEWER")

 const displayModalAdd = (shouldDisplay: boolean) => {
  action.value = "new"
--- a/packages/hoppscotch-common/src/components/graphql/Request.vue
+++ b/packages/hoppscotch-common/src/components/graphql/Request.vue
@@ -10,7 +10,7 @@
        autocomplete="off"
        spellcheck="false"
        class="w-full rounded border border-divider bg-primaryLight px-4 py-2 text-secondaryDark"
-        :placeholder="`${t('graphql.url_placeholder')}`"
+        :placeholder="`${t('request.url')}`"
        :disabled="connected"
        @keyup.enter="onConnectClick"
      />
--- a/packages/hoppscotch-common/src/components/http/Request.vue
+++ b/packages/hoppscotch-common/src/components/http/Request.vue
@@ -54,7 +54,7 @@
      >
        <SmartEnvInput
          v-model="tab.document.request.endpoint"
-          :placeholder="`${t('request.url_placeholder')}`"
+          :placeholder="`${t('request.url')}`"
          :auto-complete-source="userHistories"
          :auto-complete-env="true"
          :inspection-results="tabResults"
@@ -236,28 +236,16 @@ import { useI18n } from "@composables/i18n"
 import { useSetting } from "@composables/settings"
 import { useReadonlyStream, useStreamSubscriber } from "@composables/stream"
 import { useToast } from "@composables/toast"
-import { HoppRESTRequest } from "@hoppscotch/data"
 import { useVModel } from "@vueuse/core"
-import { useService } from "dioc/vue"
 import * as E from "fp-ts/Either"
-import { Ref, computed, onUnmounted, ref } from "vue"
-import { runRESTRequest$ } from "~/helpers/RequestRunner"
+import { Ref, computed, ref, onUnmounted } from "vue"
 import { defineActionHandler, invokeAction } from "~/helpers/actions"
 import { runMutation } from "~/helpers/backend/GQLClient"
 import { UpdateRequestDocument } from "~/helpers/backend/graphql"
 import { getPlatformSpecialKey as getSpecialKey } from "~/helpers/platformutils"
-import { getDefaultRESTRequest } from "~/helpers/rest/default"
-import { HoppRESTDocument } from "~/helpers/rest/document"
-import { getMethodLabelColor } from "~/helpers/rest/labelColoring"
+import { runRESTRequest$ } from "~/helpers/RequestRunner"
 import { HoppRESTResponse } from "~/helpers/types/HoppRESTResponse"
-import { RESTHistoryEntry, restHistory$ } from "~/newstore/history"
-import { platform } from "~/platform"
-import { InspectionService } from "~/services/inspection"
-import { InterceptorService } from "~/services/interceptor.service"
-import { NewWorkspaceService } from "~/services/new-workspace"
-import { HoppTab } from "~/services/tab"
-import { RESTTabService } from "~/services/tab/rest"
-import { WorkspaceService } from "~/services/workspace.service"
+import { editRESTRequest } from "~/newstore/collections"
 import IconChevronDown from "~icons/lucide/chevron-down"
 import IconCode2 from "~icons/lucide/code-2"
 import IconFileCode from "~icons/lucide/file-code"
@@ -265,10 +253,21 @@ import IconFolderPlus from "~icons/lucide/folder-plus"
 import IconRotateCCW from "~icons/lucide/rotate-ccw"
 import IconSave from "~icons/lucide/save"
 import IconShare2 from "~icons/lucide/share-2"
+import { getDefaultRESTRequest } from "~/helpers/rest/default"
+import { RESTHistoryEntry, restHistory$ } from "~/newstore/history"
+import { platform } from "~/platform"
+import { HoppRESTRequest } from "@hoppscotch/data"
+import { useService } from "dioc/vue"
+import { InspectionService } from "~/services/inspection"
+import { InterceptorService } from "~/services/interceptor.service"
+import { HoppTab } from "~/services/tab"
+import { HoppRESTDocument } from "~/helpers/rest/document"
+import { RESTTabService } from "~/services/tab/rest"
+import { getMethodLabelColor } from "~/helpers/rest/labelColoring"
+import { WorkspaceService } from "~/services/workspace.service"

 const t = useI18n()
 const interceptorService = useService(InterceptorService)
-const newWorkspaceService = useService(NewWorkspaceService)

 const methods = [
  "GET",
@@ -507,61 +506,34 @@ const cycleDownMethod = () => {
  }
 }

-const saveRequest = async () => {
-  const { saveContext } = tab.value.document
+const saveRequest = () => {
+  const saveCtx = tab.value.document.saveContext

-  if (!saveContext) {
+  if (!saveCtx) {
    showSaveRequestModal.value = true
    return
  }
+  if (saveCtx.originLocation === "user-collection") {
+    const req = tab.value.document.request

-  if (saveContext.originLocation === "workspace-user-collection") {
-    const updatedRequest = tab.value.document.request
+    try {
+      editRESTRequest(saveCtx.folderPath, saveCtx.requestIndex, req)

-    if (
-      !newWorkspaceService.activeWorkspaceHandle.value ||
-      !saveContext.requestHandle
-    ) {
-      return
+      tab.value.document.isDirty = false
+
+      platform.analytics?.logEvent({
+        type: "HOPP_SAVE_REQUEST",
+        platform: "rest",
+        createdNow: false,
+        workspaceType: "personal",
+      })
+
+      toast.success(`${t("request.saved")}`)
+    } catch (e) {
+      tab.value.document.saveContext = undefined
+      saveRequest()
    }
-
-    const { requestHandle } = saveContext
-
-    const requestHandleRef = requestHandle.get()
-
-    if (!requestHandleRef.value) {
-      return
-    }
-
-    if (requestHandleRef.value.type === "invalid") {
-      showSaveRequestModal.value = true
-      return
-    }
-
-    const updateRequestResult = await newWorkspaceService.updateRESTRequest(
-      requestHandle,
-      updatedRequest
-    )
-
-    if (E.isLeft(updateRequestResult)) {
-      // INVALID_REQUEST_HANDLE
-      showSaveRequestModal.value = true
-
-      if (!tab.value.document.isDirty) {
-        tab.value.document.isDirty = true
-      }
-      return
-    }
-
-    tab.value.document.isDirty = false
-
-    tab.value.document.saveContext = {
-      ...saveContext,
-      requestHandle,
-    }
-
-    toast.success(`${t("request.saved")}`)
-  } else if (saveContext.originLocation === "team-collection") {
+  } else if (saveCtx.originLocation === "team-collection") {
    const req = tab.value.document.request

    // TODO: handle error case (NOTE: overwriteRequestTeams is async)
@@ -574,7 +546,7 @@ const saveRequest = async () => {
      })

      runMutation(UpdateRequestDocument, {
-        requestID: saveContext.requestID,
+        requestID: saveCtx.requestID,
        data: {
          title: req.name,
          request: JSON.stringify(req),
--- a/packages/hoppscotch-common/src/components/http/RequestTab.vue
+++ b/packages/hoppscotch-common/src/components/http/RequestTab.vue
@@ -17,7 +17,8 @@
 <script setup lang="ts">
 import { watch } from "vue"
 import { useVModel } from "@vueuse/core"
-import { cloneDeep, isEqual } from "lodash-es"
+import { cloneDeep } from "lodash-es"
+import { isEqualHoppRESTRequest } from "@hoppscotch/data"
 import { HoppTab } from "~/services/tab"
 import { HoppRESTDocument } from "~/helpers/rest/document"

@@ -31,42 +32,15 @@ const emit = defineEmits<{

 const tab = useVModel(props, "modelValue", emit)

+// TODO: Come up with a better dirty check
 let oldRequest = cloneDeep(tab.value.document.request)
-
 watch(
  () => tab.value.document.request,
  (updatedValue) => {
-    // Request from the collection tree
    if (
-      tab.value.document.saveContext?.originLocation ===
-      "workspace-user-collection"
+      !tab.value.document.isDirty &&
+      !isEqualHoppRESTRequest(oldRequest, updatedValue)
    ) {
-      const requestHandleRef =
-        tab.value.document.saveContext.requestHandle?.get()
-
-      if (!requestHandleRef || requestHandleRef.value.type === "invalid") {
-        return
-      }
-
-      if (
-        !tab.value.document.isDirty &&
-        !isEqual(oldRequest, requestHandleRef?.value.data.request)
-      ) {
-        tab.value.document.isDirty = true
-      }
-
-      if (
-        tab.value.document.isDirty &&
-        isEqual(oldRequest, requestHandleRef?.value.data.request)
-      ) {
-        tab.value.document.isDirty = false
-      }
-
-      return
-    }
-
-    // Unsaved request
-    if (!tab.value.document.isDirty && !isEqual(oldRequest, updatedValue)) {
      tab.value.document.isDirty = true
    }

--- a/packages/hoppscotch-common/src/components/http/Sidebar.vue
+++ b/packages/hoppscotch-common/src/components/http/Sidebar.vue
@@ -10,8 +10,7 @@
      :icon="IconFolder"
      :label="`${t('tab.collections')}`"
    >
-      <!-- <Collections /> -->
-      <NewCollections :platform="'rest'" />
+      <Collections />
    </HoppSmartTab>
    <HoppSmartTab
      :id="'env'"
@@ -38,13 +37,12 @@
 </template>

 <script setup lang="ts">
-import { useI18n } from "@composables/i18n"
-import { ref } from "vue"
-
 import IconClock from "~icons/lucide/clock"
-import IconFolder from "~icons/lucide/folder"
 import IconLayers from "~icons/lucide/layers"
+import IconFolder from "~icons/lucide/folder"
 import IconShare2 from "~icons/lucide/share-2"
+import { ref } from "vue"
+import { useI18n } from "@composables/i18n"

 const t = useI18n()

--- a/packages/hoppscotch-common/src/components/http/TabHead.vue
+++ b/packages/hoppscotch-common/src/components/http/TabHead.vue
@@ -106,15 +106,15 @@
 <script setup lang="ts">
 import { ref } from "vue"
 import { TippyComponent } from "vue-tippy"
-import { useI18n } from "~/composables/i18n"
-import { HoppRESTDocument } from "~/helpers/rest/document"
 import { getMethodLabelColorClassOf } from "~/helpers/rest/labelColoring"
-import { HoppTab } from "~/services/tab"
-import IconCopy from "~icons/lucide/copy"
-import IconFileEdit from "~icons/lucide/file-edit"
-import IconShare2 from "~icons/lucide/share-2"
+import { useI18n } from "~/composables/i18n"
 import IconXCircle from "~icons/lucide/x-circle"
 import IconXSquare from "~icons/lucide/x-square"
+import IconFileEdit from "~icons/lucide/file-edit"
+import IconCopy from "~icons/lucide/copy"
+import IconShare2 from "~icons/lucide/share-2"
+import { HoppTab } from "~/services/tab"
+import { HoppRESTDocument } from "~/helpers/rest/document"

 const t = useI18n()

--- a/packages/hoppscotch-common/src/components/new-collections/index.vue
+++ b/packages/hoppscotch-common/src/components/new-collections/index.vue
@@ -1,32 +0,0 @@
-<template>
-  <div v-if="!activeWorkspaceHandle">No Workspace Selected.</div>
-
-  <NewCollectionsRest
-    v-else-if="platform === 'rest'"
-    :picked="picked"
-    :save-request="saveRequest"
-    :workspace-handle="activeWorkspaceHandle"
-    @select="(payload) => emit('select', payload)"
-  />
-</template>
-
-<script setup lang="ts">
-import { useService } from "dioc/vue"
-
-import { Picked } from "~/helpers/types/HoppPicked"
-import { NewWorkspaceService } from "~/services/new-workspace"
-
-defineProps<{
-  picked?: Picked | null
-  platform: "rest" | "gql"
-  saveRequest?: boolean
-}>()
-
-const emit = defineEmits<{
-  (event: "select", payload: Picked | null): void
-}>()
-
-const workspaceService = useService(NewWorkspaceService)
-
-const activeWorkspaceHandle = workspaceService.activeWorkspaceHandle
-</script>
--- a/packages/hoppscotch-common/src/components/new-collections/rest/Collection.vue
+++ b/packages/hoppscotch-common/src/components/new-collections/rest/Collection.vue
@@ -1,450 +0,0 @@
-<template>
-  <div class="flex flex-col">
-    <div
-      class="h-1 w-full transition"
-      :class="[
-        {
-          'bg-accentDark': isReorderable,
-        },
-      ]"
-      @drop="orderUpdateCollectionEvent"
-      @dragover.prevent="ordering = true"
-      @dragleave="ordering = false"
-      @dragend="resetDragState"
-    ></div>
-
-    <div class="relative flex flex-col">
-      <div
-        class="z-[1] pointer-events-none absolute inset-0 bg-accent opacity-0 transition"
-        :class="{
-          'opacity-25':
-            dragging && notSameDestination && notSameParentDestination,
-        }"
-      ></div>
-
-      <div
-        class="z-[3] group pointer-events-auto relative flex cursor-pointer items-stretch"
-        :draggable="true"
-        @dragstart="dragStart"
-        @dragover="handleDragOver($event)"
-        @dragleave="resetDragState"
-        @dragend="
-          () => {
-            resetDragState()
-            dropItemID = ''
-          }
-        "
-        @drop="handleDrop($event)"
-        @contextmenu.prevent="options?.tippy?.show()"
-      >
-        <div
-          class="flex min-w-0 flex-1 items-center justify-center"
-          @click="emit('toggle-children')"
-        >
-          <span
-            class="pointer-events-none flex items-center justify-center px-4"
-          >
-            <component
-              :is="collectionIcon"
-              class="svg-icons"
-              :class="{ 'text-accent': isSelected }"
-            />
-          </span>
-
-          <span
-            class="pointer-events-none flex min-w-0 flex-1 py-2 pr-2 transition group-hover:text-secondaryDark"
-          >
-            <span class="truncate" :class="{ 'text-accent': isSelected }">
-              {{ collectionView.name }}
-            </span>
-          </span>
-        </div>
-
-        <div class="flex">
-          <HoppButtonSecondary
-            v-tippy="{ theme: 'tooltip' }"
-            :icon="IconFilePlus"
-            :title="t('request.new')"
-            class="hidden group-hover:inline-flex"
-            @click="addRequest"
-          />
-
-          <HoppButtonSecondary
-            v-tippy="{ theme: 'tooltip' }"
-            :icon="IconFolderPlus"
-            :title="t('folder.new')"
-            class="hidden group-hover:inline-flex"
-            @click="addChildCollection"
-          />
-
-          <span>
-            <tippy
-              ref="options"
-              interactive
-              trigger="click"
-              theme="popover"
-              :on-shown="() => tippyActions!.focus()"
-            >
-              <HoppButtonSecondary
-                v-tippy="{ theme: 'tooltip' }"
-                :title="t('action.more')"
-                :icon="IconMoreVertical"
-              />
-              <template #content="{ hide }">
-                <div
-                  ref="tippyActions"
-                  class="flex flex-col focus:outline-none"
-                  tabindex="0"
-                  @keyup.r="requestAction?.$el.click()"
-                  @keyup.n="folderAction?.$el.click()"
-                  @keyup.e="edit?.$el.click()"
-                  @keyup.delete="deleteAction?.$el.click()"
-                  @keyup.x="exportAction?.$el.click()"
-                  @keyup.p="propertiesAction?.$el.click()"
-                  @keyup.escape="hide()"
-                >
-                  <HoppSmartItem
-                    ref="requestAction"
-                    :icon="IconFilePlus"
-                    :label="t('request.new')"
-                    :shortcut="['R']"
-                    @click="
-                      () => {
-                        addRequest()
-                        hide()
-                      }
-                    "
-                  />
-                  <HoppSmartItem
-                    ref="folderAction"
-                    :icon="IconFolderPlus"
-                    :label="t('folder.new')"
-                    :shortcut="['N']"
-                    @click="
-                      () => {
-                        addChildCollection()
-                        hide()
-                      }
-                    "
-                  />
-                  <HoppSmartItem
-                    ref="edit"
-                    :icon="IconEdit"
-                    :label="t('action.edit')"
-                    :shortcut="['E']"
-                    @click="
-                      () => {
-                        editCollection()
-                        hide()
-                      }
-                    "
-                  />
-                  <HoppSmartItem
-                    ref="exportAction"
-                    :icon="IconDownload"
-                    :label="t('export.title')"
-                    :shortcut="['X']"
-                    @click="
-                      () => {
-                        emit('export-collection', collectionView.collectionID)
-                        hide()
-                      }
-                    "
-                  />
-                  <HoppSmartItem
-                    ref="deleteAction"
-                    :icon="IconTrash2"
-                    :label="t('action.delete')"
-                    :shortcut="['⌫']"
-                    @click="
-                      () => {
-                        removeCollection()
-                        hide()
-                      }
-                    "
-                  />
-                  <HoppSmartItem
-                    ref="propertiesAction"
-                    :icon="IconSettings2"
-                    :label="t('action.properties')"
-                    :shortcut="['P']"
-                    @click="
-                      () => {
-                        emit(
-                          'edit-collection-properties',
-                          collectionView.collectionID
-                        )
-                        hide()
-                      }
-                    "
-                  />
-                </div>
-              </template>
-            </tippy>
-          </span>
-        </div>
-      </div>
-    </div>
-
-    <div
-      v-if="collectionView.isLastItem"
-      class="w-full transition"
-      :class="[
-        {
-          'bg-accentDark': isLastItemReorderable,
-          'h-1 ': collectionView.isLastItem,
-        },
-      ]"
-      @drop="updateLastItemOrder"
-      @dragover.prevent="orderingLastItem = true"
-      @dragleave="orderingLastItem = false"
-      @dragend="resetDragState"
-    ></div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed, ref, watch } from "vue"
-import { TippyComponent } from "vue-tippy"
-
-import { useI18n } from "~/composables/i18n"
-import { useReadonlyStream } from "~/composables/stream"
-import {
-  currentReorderingStatus$,
-  changeCurrentReorderStatus,
-} from "~/newstore/reordering"
-import { RESTCollectionViewCollection } from "~/services/new-workspace/view"
-
-import IconCheckCircle from "~icons/lucide/check-circle"
-import IconDownload from "~icons/lucide/download"
-import IconEdit from "~icons/lucide/edit"
-import IconFilePlus from "~icons/lucide/file-plus"
-import IconFolder from "~icons/lucide/folder"
-import IconFolderOpen from "~icons/lucide/folder-open"
-import IconFolderPlus from "~icons/lucide/folder-plus"
-import IconMoreVertical from "~icons/lucide/more-vertical"
-import IconSettings2 from "~icons/lucide/settings-2"
-import IconTrash2 from "~icons/lucide/trash-2"
-
-const t = useI18n()
-
-const props = defineProps<{
-  collectionView: RESTCollectionViewCollection
-  isOpen: boolean
-  isSelected?: boolean | null
-}>()
-
-const emit = defineEmits<{
-  (event: "add-child-collection", parentCollectionIndexPath: string): void
-  (event: "add-request", parentCollectionIndexPath: string): void
-  (event: "dragging", payload: boolean): void
-  (event: "drop-event", payload: DataTransfer): void
-  (event: "drag-event", payload: DataTransfer): void
-  (
-    event: "edit-child-collection",
-    payload: { collectionIndexPath: string; collectionName: string }
-  ): void
-  (event: "edit-collection-properties", collectionIndexPath: string): void
-  (
-    event: "edit-root-collection",
-    payload: { collectionIndexPath: string; collectionName: string }
-  ): void
-  (event: "export-collection", collectionIndexPath: string): void
-  (event: "remove-child-collection", collectionIndexPath: string): void
-  (event: "remove-root-collection", collectionIndexPath: string): void
-  (event: "toggle-children"): void
-  (event: "update-collection-order", payload: DataTransfer): void
-  (event: "update-last-collection-order", payload: DataTransfer): void
-}>()
-
-const tippyActions = ref<TippyComponent | null>(null)
-const requestAction = ref<HTMLButtonElement | null>(null)
-const folderAction = ref<HTMLButtonElement | null>(null)
-const edit = ref<HTMLButtonElement | null>(null)
-const deleteAction = ref<HTMLButtonElement | null>(null)
-const exportAction = ref<HTMLButtonElement | null>(null)
-const propertiesAction = ref<TippyComponent | null>(null)
-const options = ref<TippyComponent | null>(null)
-
-const dragging = ref(false)
-const ordering = ref(false)
-const orderingLastItem = ref(false)
-const dropItemID = ref("")
-
-const currentReorderingStatus = useReadonlyStream(currentReorderingStatus$, {
-  type: "collection",
-  id: "",
-  parentID: "",
-})
-
-// Used to determine if the collection is being dragged to a different destination
-// This is used to make the highlight effect work
-watch(
-  () => dragging.value,
-  (val) => {
-    if (val && notSameDestination.value && notSameParentDestination.value) {
-      emit("dragging", true)
-    } else {
-      emit("dragging", false)
-    }
-  }
-)
-
-const collectionIcon = computed(() => {
-  if (props.isSelected) {
-    return IconCheckCircle
-  }
-  return props.isOpen ? IconFolderOpen : IconFolder
-})
-
-const notSameParentDestination = computed(() => {
-  return (
-    currentReorderingStatus.value.parentID !== props.collectionView.collectionID
-  )
-})
-
-const isRequestDragging = computed(() => {
-  return currentReorderingStatus.value.type === "request"
-})
-
-const isSameParent = computed(() => {
-  return (
-    currentReorderingStatus.value.parentID ===
-    props.collectionView.parentCollectionID
-  )
-})
-
-const isReorderable = computed(() => {
-  return (
-    ordering.value &&
-    notSameDestination.value &&
-    !isRequestDragging.value &&
-    isSameParent.value
-  )
-})
-const isLastItemReorderable = computed(() => {
-  return (
-    orderingLastItem.value &&
-    notSameDestination.value &&
-    !isRequestDragging.value &&
-    isSameParent.value
-  )
-})
-
-const addChildCollection = () => {
-  emit("add-child-collection", props.collectionView.collectionID)
-}
-
-const addRequest = () => {
-  emit("add-request", props.collectionView.collectionID)
-}
-
-const editCollection = () => {
-  const { collectionID: collectionIndexPath, name: collectionName } =
-    props.collectionView
-
-  const data = {
-    collectionIndexPath,
-    collectionName,
-  }
-
-  collectionIndexPath.split("/").length > 1
-    ? emit("edit-child-collection", data)
-    : emit("edit-root-collection", data)
-}
-
-const dragStart = ({ dataTransfer }: DragEvent) => {
-  if (dataTransfer) {
-    emit("drag-event", dataTransfer)
-
-    dropItemID.value = dataTransfer.getData("collectionIndex")
-    dragging.value = !dragging.value
-
-    changeCurrentReorderStatus({
-      type: "collection",
-      id: props.collectionView.collectionID,
-      parentID: props.collectionView.parentCollectionID,
-    })
-  }
-}
-
-// Trigger the re-ordering event when a collection is dragged over another collection's top section
-const handleDragOver = (e: DragEvent) => {
-  dragging.value = true
-  if (
-    e.offsetY < 10 &&
-    notSameDestination.value &&
-    !isRequestDragging.value &&
-    isSameParent.value
-  ) {
-    ordering.value = true
-    dragging.value = false
-    orderingLastItem.value = false
-  } else if (
-    e.offsetY > 18 &&
-    notSameDestination.value &&
-    !isRequestDragging.value &&
-    isSameParent.value &&
-    props.collectionView.isLastItem
-  ) {
-    orderingLastItem.value = true
-    dragging.value = false
-    ordering.value = false
-  } else {
-    ordering.value = false
-    orderingLastItem.value = false
-  }
-}
-
-const handleDrop = (e: DragEvent) => {
-  if (ordering.value) {
-    orderUpdateCollectionEvent(e)
-  } else if (orderingLastItem.value) {
-    updateLastItemOrder(e)
-  } else {
-    notSameParentDestination.value ? dropEvent(e) : e.stopPropagation()
-  }
-}
-
-const dropEvent = (e: DragEvent) => {
-  if (e.dataTransfer) {
-    e.stopPropagation()
-    emit("drop-event", e.dataTransfer)
-    resetDragState()
-  }
-}
-
-const orderUpdateCollectionEvent = (e: DragEvent) => {
-  if (e.dataTransfer) {
-    e.stopPropagation()
-    emit("update-collection-order", e.dataTransfer)
-    resetDragState()
-  }
-}
-
-const updateLastItemOrder = (e: DragEvent) => {
-  if (e.dataTransfer) {
-    e.stopPropagation()
-    emit("update-last-collection-order", e.dataTransfer)
-    resetDragState()
-  }
-}
-
-const notSameDestination = computed(() => {
-  return dropItemID.value !== props.collectionView.collectionID
-})
-
-const removeCollection = () => {
-  const { collectionID } = props.collectionView
-
-  collectionID.split("/").length > 1
-    ? emit("remove-child-collection", collectionID)
-    : emit("remove-root-collection", collectionID)
-}
-
-const resetDragState = () => {
-  dragging.value = false
-  ordering.value = false
-  orderingLastItem.value = false
-}
-</script>
--- a/packages/hoppscotch-common/src/components/new-collections/rest/Request.vue
+++ b/packages/hoppscotch-common/src/components/new-collections/rest/Request.vue
@@ -1,334 +0,0 @@
-<template>
-  <div class="flex flex-col">
-    <div
-      class="h-1 w-full transition"
-      :class="[
-        {
-          'bg-accentDark': isReorderable,
-        },
-      ]"
-      @drop="updateRequestOrder"
-      @dragover.prevent="ordering = true"
-      @dragleave="resetDragState"
-      @dragend="resetDragState"
-    ></div>
-
-    <div
-      class="group flex items-stretch"
-      :draggable="true"
-      @dragstart="dragStart"
-      @dragover="handleDragOver($event)"
-      @dragleave="resetDragState"
-      @dragend="resetDragState"
-      @drop="handleDrop"
-      @contextmenu.prevent="options?.tippy?.show()"
-    >
-      <div
-        class="pointer-events-auto flex min-w-0 flex-1 cursor-pointer items-center justify-center"
-        @click="selectRequest"
-      >
-        <span
-          class="pointer-events-none flex w-16 items-center justify-center truncate px-2"
-          :class="requestLabelColor"
-          :style="{ color: requestLabelColor }"
-        >
-          <component
-            :is="IconCheckCircle"
-            v-if="isSelected"
-            class="svg-icons"
-            :class="{ 'text-accent': isSelected }"
-          />
-          <span v-else class="truncate text-tiny font-semibold">
-            {{ requestView.request.method }}
-          </span>
-        </span>
-        <span
-          class="pointer-events-none flex min-w-0 flex-1 items-center py-2 pr-2 transition group-hover:text-secondaryDark"
-        >
-          <span class="truncate" :class="{ 'text-accent': isSelected }">
-            {{ requestView.request.name }}
-          </span>
-          <span
-            v-if="props.isActive"
-            v-tippy="{ theme: 'tooltip' }"
-            class="relative mx-3 flex h-1.5 w-1.5 flex-shrink-0"
-            :title="`${t('collection.request_in_use')}`"
-          >
-            <span
-              class="absolute inline-flex h-full w-full flex-shrink-0 animate-ping rounded-full bg-green-500 opacity-75"
-            >
-            </span>
-            <span
-              class="relative inline-flex h-1.5 w-1.5 flex-shrink-0 rounded-full bg-green-500"
-            ></span>
-          </span>
-        </span>
-      </div>
-
-      <div class="flex">
-        <HoppButtonSecondary
-          v-tippy="{ theme: 'tooltip' }"
-          :icon="IconRotateCCW"
-          :title="t('action.restore')"
-          class="hidden group-hover:inline-flex"
-          @click="selectRequest"
-        />
-        <span>
-          <tippy
-            ref="options"
-            interactive
-            trigger="click"
-            theme="popover"
-            :on-shown="() => tippyActions?.focus()"
-          >
-            <HoppButtonSecondary
-              v-tippy="{ theme: 'tooltip' }"
-              :title="t('action.more')"
-              :icon="IconMoreVertical"
-            />
-            <template #content="{ hide }">
-              <div
-                ref="tippyActions"
-                class="flex flex-col focus:outline-none"
-                tabindex="0"
-                @keyup.e="edit?.$el.click()"
-                @keyup.d="duplicate?.$el.click()"
-                @keyup.delete="deleteAction?.$el.click()"
-                @keyup.s="shareAction?.$el.click()"
-                @keyup.escape="hide()"
-              >
-                <HoppSmartItem
-                  ref="edit"
-                  :icon="IconEdit"
-                  :label="t('action.edit')"
-                  :shortcut="['E']"
-                  @click="
-                    () => {
-                      emit('edit-request', {
-                        requestIndexPath: requestView.requestID,
-                        requestName: requestView.request.name,
-                      })
-                      hide()
-                    }
-                  "
-                />
-                <HoppSmartItem
-                  ref="duplicate"
-                  :icon="IconCopy"
-                  :label="t('action.duplicate')"
-                  :shortcut="['D']"
-                  @click="
-                    () => {
-                      emit('duplicate-request', requestView.requestID)
-                      hide()
-                    }
-                  "
-                />
-                <HoppSmartItem
-                  ref="deleteAction"
-                  :icon="IconTrash2"
-                  :label="t('action.delete')"
-                  :shortcut="['⌫']"
-                  @click="
-                    () => {
-                      emit('remove-request', requestView.requestID)
-                      hide()
-                    }
-                  "
-                />
-                <HoppSmartItem
-                  ref="shareAction"
-                  :icon="IconShare2"
-                  :label="t('action.share')"
-                  :shortcut="['S']"
-                  @click="
-                    () => {
-                      emit('share-request', requestView.request)
-                      hide()
-                    }
-                  "
-                />
-              </div>
-            </template>
-          </tippy>
-        </span>
-      </div>
-    </div>
-
-    <div
-      class="w-full transition"
-      :class="[
-        {
-          'bg-accentDark': isLastItemReorderable,
-          'h-1 ': props.requestView.isLastItem,
-        },
-      ]"
-      @drop="handleDrop"
-      @dragover.prevent="orderingLastItem = true"
-      @dragleave="resetDragState"
-      @dragend="resetDragState"
-    ></div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { useI18n } from "@composables/i18n"
-import { HoppRESTRequest } from "@hoppscotch/data"
-import { computed, ref } from "vue"
-import { TippyComponent } from "vue-tippy"
-import { useReadonlyStream } from "~/composables/stream"
-
-import { getMethodLabelColorClassOf } from "~/helpers/rest/labelColoring"
-import {
-  currentReorderingStatus$,
-  changeCurrentReorderStatus,
-} from "~/newstore/reordering"
-import { RESTCollectionViewRequest } from "~/services/new-workspace/view"
-
-import IconCheckCircle from "~icons/lucide/check-circle"
-import IconCopy from "~icons/lucide/copy"
-import IconEdit from "~icons/lucide/edit"
-import IconMoreVertical from "~icons/lucide/more-vertical"
-import IconRotateCCW from "~icons/lucide/rotate-ccw"
-import IconShare2 from "~icons/lucide/share-2"
-import IconTrash2 from "~icons/lucide/trash-2"
-
-const t = useI18n()
-
-const currentReorderingStatus = useReadonlyStream(currentReorderingStatus$, {
-  type: "collection",
-  id: "",
-  parentID: "",
-})
-
-const props = defineProps<{
-  isActive: boolean
-  requestView: RESTCollectionViewRequest
-  isSelected: boolean | null | undefined
-}>()
-
-const emit = defineEmits<{
-  (event: "duplicate-request", requestIndexPath: string): void
-  (
-    event: "edit-request",
-    payload: {
-      requestIndexPath: string
-      requestName: string
-    }
-  ): void
-  (event: "remove-request", requestIndexPath: string): void
-  (event: "select-request", requestIndexPath: string): void
-  (event: "share-request", request: HoppRESTRequest): void
-  (event: "drag-request", payload: DataTransfer): void
-  (event: "update-request-order", payload: DataTransfer): void
-  (event: "update-last-request-order", payload: DataTransfer): void
-}>()
-
-const tippyActions = ref<TippyComponent | null>(null)
-const edit = ref<HTMLButtonElement | null>(null)
-const deleteAction = ref<HTMLButtonElement | null>(null)
-const options = ref<TippyComponent | null>(null)
-const duplicate = ref<HTMLButtonElement | null>(null)
-const shareAction = ref<HTMLButtonElement | null>(null)
-
-const dragging = ref(false)
-const ordering = ref(false)
-const orderingLastItem = ref(false)
-
-const isCollectionDragging = computed(() => {
-  return currentReorderingStatus.value.type === "collection"
-})
-
-const isLastItemReorderable = computed(() => {
-  return (
-    orderingLastItem.value && isSameParent.value && !isCollectionDragging.value
-  )
-})
-
-const isReorderable = computed(() => {
-  return (
-    ordering.value &&
-    !isCollectionDragging.value &&
-    isSameParent.value &&
-    !isSameRequest.value
-  )
-})
-
-const isSameParent = computed(() => {
-  return (
-    currentReorderingStatus.value.parentID === props.requestView.collectionID
-  )
-})
-
-const isSameRequest = computed(() => {
-  return currentReorderingStatus.value.id === props.requestView.requestID
-})
-
-const requestLabelColor = computed(() =>
-  getMethodLabelColorClassOf(props.requestView.request)
-)
-
-const dragStart = ({ dataTransfer }: DragEvent) => {
-  if (dataTransfer) {
-    emit("drag-request", dataTransfer)
-    dragging.value = !dragging.value
-
-    changeCurrentReorderStatus({
-      type: "request",
-      id: props.requestView.requestID,
-      parentID: props.requestView.collectionID,
-    })
-  }
-}
-
-const handleDrop = (e: DragEvent) => {
-  if (ordering.value) {
-    updateRequestOrder(e)
-  } else if (orderingLastItem.value) {
-    updateLastItemOrder(e)
-  } else {
-    updateRequestOrder(e)
-  }
-}
-
-// Trigger the re-ordering event when a request is dragged over another request's top section
-const handleDragOver = (e: DragEvent) => {
-  dragging.value = true
-  if (e.offsetY < 10) {
-    ordering.value = true
-    dragging.value = false
-    orderingLastItem.value = false
-  } else if (e.offsetY > 18) {
-    orderingLastItem.value = true
-    dragging.value = false
-    ordering.value = false
-  } else {
-    ordering.value = false
-    orderingLastItem.value = false
-  }
-}
-
-const resetDragState = () => {
-  dragging.value = false
-  ordering.value = false
-  orderingLastItem.value = false
-}
-
-const selectRequest = () => emit("select-request", props.requestView.requestID)
-
-const updateRequestOrder = (e: DragEvent) => {
-  if (e.dataTransfer) {
-    e.stopPropagation()
-    resetDragState()
-    emit("update-request-order", e.dataTransfer)
-  }
-}
-
-const updateLastItemOrder = (e: DragEvent) => {
-  if (e.dataTransfer) {
-    e.stopPropagation()
-    resetDragState()
-    emit("update-last-request-order", e.dataTransfer)
-  }
-}
-</script>
--- a/packages/hoppscotch-common/src/components/new-collections/rest/index.vue
+++ b/packages/hoppscotch-common/src/components/new-collections/rest/index.vue
--- a/packages/hoppscotch-common/src/components/teams/Add.vue
+++ b/packages/hoppscotch-common/src/components/teams/Add.vue
@@ -37,17 +37,13 @@ import { TeamNameCodec } from "~/helpers/backend/types/TeamName"
 import { useI18n } from "@composables/i18n"
 import { useToast } from "@composables/toast"
 import { platform } from "~/platform"
-import { useService } from "dioc/vue"
-import { WorkspaceService } from "~/services/workspace.service"
-import { useLocalState } from "~/newstore/localstate"

 const t = useI18n()

 const toast = useToast()

-const props = defineProps<{
+defineProps<{
  show: boolean
-  switchWorkspaceAfterCreation?: boolean
 }>()

 const emit = defineEmits<{
@@ -56,12 +52,8 @@ const emit = defineEmits<{

 const editingName = ref<string | null>(null)

-const REMEMBERED_TEAM_ID = useLocalState("REMEMBERED_TEAM_ID")
-
 const isLoading = ref(false)

-const workspaceService = useService(WorkspaceService)
-
 const addNewTeam = async () => {
  isLoading.value = true
  await pipe(
@@ -84,19 +76,8 @@ const addNewTeam = async () => {
          // Handle GQL errors (use err obj)
        }
      },
-      (team) => {
+      () => {
        toast.success(`${t("team.new_created")}`)
-
-        if (props.switchWorkspaceAfterCreation) {
-          REMEMBERED_TEAM_ID.value = team.id
-          workspaceService.changeWorkspace({
-            teamID: team.id,
-            teamName: team.name,
-            type: "team",
-            role: team.myRole,
-          })
-        }
-
        hideModal()
      }
    )
--- a/packages/hoppscotch-common/src/components/workspace/Current.vue
+++ b/packages/hoppscotch-common/src/components/workspace/Current.vue
@@ -3,7 +3,7 @@
    class="flex items-center overflow-x-auto whitespace-nowrap border-b border-dividerLight px-4 py-2 text-tiny text-secondaryLight"
  >
    <span class="truncate">
-      {{ workspaceName ?? t("workspace.no_workspace") }}
+      {{ currentWorkspace }}
    </span>
    <icon-lucide-chevron-right v-if="section" class="mx-2" />
    {{ section }}
@@ -14,24 +14,29 @@
 import { computed } from "vue"
 import { useI18n } from "~/composables/i18n"
 import { useService } from "dioc/vue"
-import { NewWorkspaceService } from "~/services/new-workspace"
+import { WorkspaceService } from "~/services/workspace.service"

-defineProps<{
+const props = defineProps<{
  section?: string
+  isOnlyPersonal?: boolean
 }>()

 const t = useI18n()

-const workspaceService = useService(NewWorkspaceService)
-const activeWorkspaceHandle = workspaceService.activeWorkspaceHandle
+const workspaceService = useService(WorkspaceService)
+const workspace = workspaceService.currentWorkspace

-const workspaceName = computed(() => {
-  const activeWorkspaceHandleRef = activeWorkspaceHandle.value?.get()
-
-  if (activeWorkspaceHandleRef?.value.type === "ok") {
-    return activeWorkspaceHandleRef.value.data.name
+const currentWorkspace = computed(() => {
+  if (props.isOnlyPersonal || workspace.value.type === "personal") {
+    return t("workspace.personal")
  }
+  return teamWorkspaceName.value
+})

-  return undefined
+const teamWorkspaceName = computed(() => {
+  if (workspace.value.type === "team" && workspace.value.teamName) {
+    return workspace.value.teamName
+  }
+  return `${t("workspace.team")}`
 })
 </script>
--- a/packages/hoppscotch-common/src/components/workspace/PersonalWorkspaceSelector.vue
+++ b/packages/hoppscotch-common/src/components/workspace/PersonalWorkspaceSelector.vue
@@ -1,54 +0,0 @@
-<template>
-  <div>
-    <div class="flex flex-col">
-      <HoppSmartItem
-        :label="'Personal Workspace'"
-        :info-icon="
-          activeWorkspaceInfo?.provider ===
-            personalWorkspaceProviderService.providerID &&
-          activeWorkspaceInfo.workspaceID === 'personal'
-            ? IconCheck
-            : undefined
-        "
-        :active-info-icon="
-          activeWorkspaceInfo?.provider ===
-            personalWorkspaceProviderService.providerID &&
-          activeWorkspaceInfo.workspaceID === 'personal'
-        "
-        @click="selectWorkspace"
-      />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { useService } from "dioc/vue"
-import { NewWorkspaceService } from "~/services/new-workspace"
-import { computed } from "vue"
-import { PersonalWorkspaceProviderService } from "~/services/new-workspace/providers/personal.workspace"
-import IconCheck from "~icons/lucide/check"
-
-const workspaceService = useService(NewWorkspaceService)
-const personalWorkspaceProviderService = useService(
-  PersonalWorkspaceProviderService
-)
-
-const activeWorkspaceInfo = computed(() => {
-  const activeWorkspaceHandleRef =
-    workspaceService.activeWorkspaceHandle.value?.get()
-
-  if (activeWorkspaceHandleRef?.value.type === "ok") {
-    return {
-      provider: activeWorkspaceHandleRef.value.data.providerID,
-      workspaceID: activeWorkspaceHandleRef.value.data.workspaceID,
-    }
-  }
-
-  return undefined
-})
-
-function selectWorkspace() {
-  workspaceService.activeWorkspaceHandle.value =
-    personalWorkspaceProviderService.getPersonalWorkspaceHandle()
-}
-</script>
--- a/packages/hoppscotch-common/src/components/workspace/Selector.vue
+++ b/packages/hoppscotch-common/src/components/workspace/Selector.vue
@@ -1,36 +1,190 @@
 <template>
  <div ref="rootEl">
    <div class="flex flex-col">
-      <div
-        v-for="(selectorComponent, index) in workspaceSelectorComponents"
-        :key="index"
-        class="flex flex-col"
-      >
-        <component :is="selectorComponent" />
+      <div class="flex flex-col">
+        <HoppSmartItem
+          :label="t('workspace.personal')"
+          :icon="IconUser"
+          :info-icon="workspace.type === 'personal' ? IconDone : undefined"
+          :active-info-icon="workspace.type === 'personal'"
+          @click="switchToPersonalWorkspace"
+        />
        <hr />
      </div>
+      <div v-if="loading" class="flex flex-col items-center justify-center p-4">
+        <HoppSmartSpinner class="mb-4" />
+        <span class="text-secondaryLight">{{ t("state.loading") }}</span>
+      </div>
+      <HoppSmartPlaceholder
+        v-if="!loading && myTeams.length === 0"
+        :src="`/images/states/${colorMode.value}/add_group.svg`"
+        :alt="`${t('empty.teams')}`"
+        :text="`${t('empty.teams')}`"
+      >
+        <template #body>
+          <HoppButtonSecondary
+            :label="t('team.create_new')"
+            filled
+            outline
+            :icon="IconPlus"
+            @click="displayModalAdd(true)"
+          />
+        </template>
+      </HoppSmartPlaceholder>
+      <div v-else-if="!loading" class="flex flex-col">
+        <div
+          class="sticky top-0 z-10 mb-2 flex items-center justify-between bg-popover py-2 pl-2"
+        >
+          <div class="flex items-center px-2 font-semibold text-secondaryLight">
+            {{ t("workspace.other_workspaces") }}
+          </div>
+          <HoppButtonSecondary
+            v-tippy="{ theme: 'tooltip' }"
+            :icon="IconPlus"
+            :title="`${t('team.create_new')}`"
+            outline
+            filled
+            class="ml-8 rounded !p-0.75"
+            @click="displayModalAdd(true)"
+          />
+        </div>
+        <HoppSmartItem
+          v-for="(team, index) in myTeams"
+          :key="`team-${String(index)}`"
+          :icon="IconUsers"
+          :label="team.name"
+          :info-icon="isActiveWorkspace(team.id) ? IconDone : undefined"
+          :active-info-icon="isActiveWorkspace(team.id)"
+          @click="switchToTeamWorkspace(team)"
+        />
+      </div>
+      <div
+        v-if="!loading && teamListAdapterError"
+        class="flex flex-col items-center py-4"
+      >
+        <icon-lucide-help-circle class="svg-icons mb-4" />
+        {{ t("error.something_went_wrong") }}
+      </div>
    </div>
+    <TeamsAdd :show="showModalAdd" @hide-modal="displayModalAdd(false)" />
  </div>
 </template>
 <script setup lang="ts">
+import { computed, ref, watch } from "vue"
+import { useReadonlyStream } from "~/composables/stream"
+import { platform } from "~/platform"
+import { useI18n } from "@composables/i18n"
+import IconUser from "~icons/lucide/user"
+import IconUsers from "~icons/lucide/users"
+import IconPlus from "~icons/lucide/plus"
+import { useColorMode } from "@composables/theming"
+import { GetMyTeamsQuery } from "~/helpers/backend/graphql"
+import IconDone from "~icons/lucide/check"
+import { useLocalState } from "~/newstore/localstate"
+import { defineActionHandler } from "~/helpers/actions"
+import { WorkspaceService } from "~/services/workspace.service"
 import { useService } from "dioc/vue"
-import { NewWorkspaceService } from "~/services/new-workspace"
-import { TestWorkspaceProviderService } from "~/services/new-workspace/providers/test.workspace"
+import { useElementVisibility, useIntervalFn } from "@vueuse/core"

-useService(TestWorkspaceProviderService)
+const t = useI18n()
+const colorMode = useColorMode()

-const newWorkspaceService = useService(NewWorkspaceService)
-const workspaceSelectorComponents =
-  newWorkspaceService.workspaceSelectorComponents
+const showModalAdd = ref(false)

-// TODO: Handle the updates to these actions
-//  defineActionHandler("modals.team.new", () => {
-//    displayModalAdd(true)
-//  })
-//
-//  defineActionHandler("workspace.switch.personal", switchToPersonalWorkspace)
-//  defineActionHandler("workspace.switch", ({ teamId }) => {
-//    const team = myTeams.value.find((t) => t.id === teamId)
-//    if (team) switchToTeamWorkspace(team)
-//  })
+const currentUser = useReadonlyStream(
+  platform.auth.getProbableUserStream(),
+  platform.auth.getProbableUser()
+)
+
+const workspaceService = useService(WorkspaceService)
+const teamListadapter = workspaceService.acquireTeamListAdapter(null)
+const myTeams = useReadonlyStream(teamListadapter.teamList$, [])
+const isTeamListLoading = useReadonlyStream(teamListadapter.loading$, false)
+const teamListAdapterError = useReadonlyStream(teamListadapter.error$, null)
+const REMEMBERED_TEAM_ID = useLocalState("REMEMBERED_TEAM_ID")
+const teamListFetched = ref(false)
+
+const rootEl = ref<HTMLElement>()
+const elVisible = useElementVisibility(rootEl)
+
+const { pause: pauseListPoll, resume: resumeListPoll } = useIntervalFn(() => {
+  if (teamListadapter.isInitialized) {
+    teamListadapter.fetchList()
+  }
+}, 10000)
+
+watch(
+  elVisible,
+  () => {
+    if (elVisible.value) {
+      teamListadapter.fetchList()
+
+      resumeListPoll()
+    } else {
+      pauseListPoll()
+    }
+  },
+  { immediate: true }
+)
+
+watch(myTeams, (teams) => {
+  if (teams && !teamListFetched.value) {
+    teamListFetched.value = true
+    if (REMEMBERED_TEAM_ID.value && currentUser.value) {
+      const team = teams.find((t) => t.id === REMEMBERED_TEAM_ID.value)
+      if (team) switchToTeamWorkspace(team)
+    }
+  }
+})
+
+const loading = computed(
+  () => isTeamListLoading.value && myTeams.value.length === 0
+)
+
+const workspace = workspaceService.currentWorkspace
+
+const isActiveWorkspace = computed(() => (id: string) => {
+  if (workspace.value.type === "personal") return false
+  return workspace.value.teamID === id
+})
+
+const switchToTeamWorkspace = (team: GetMyTeamsQuery["myTeams"][number]) => {
+  REMEMBERED_TEAM_ID.value = team.id
+  workspaceService.changeWorkspace({
+    teamID: team.id,
+    teamName: team.name,
+    type: "team",
+  })
+}
+
+const switchToPersonalWorkspace = () => {
+  REMEMBERED_TEAM_ID.value = undefined
+  workspaceService.changeWorkspace({
+    type: "personal",
+  })
+}
+
+watch(
+  () => currentUser.value,
+  (user) => {
+    if (!user) {
+      switchToPersonalWorkspace()
+    }
+  }
+)
+
+const displayModalAdd = (shouldDisplay: boolean) => {
+  showModalAdd.value = shouldDisplay
+  teamListadapter.fetchList()
+}
+
+defineActionHandler("modals.team.new", () => {
+  displayModalAdd(true)
+})
+
+defineActionHandler("workspace.switch.personal", switchToPersonalWorkspace)
+defineActionHandler("workspace.switch", ({ teamId }) => {
+  const team = myTeams.value.find((t) => t.id === teamId)
+  if (team) switchToTeamWorkspace(team)
+})
 </script>
--- a/packages/hoppscotch-common/src/components/workspace/TestWorkspaceSelector.vue
+++ b/packages/hoppscotch-common/src/components/workspace/TestWorkspaceSelector.vue
@@ -1,65 +0,0 @@
-<template>
-  <div>
-    <div class="flex flex-col">
-      <HoppSmartItem
-        v-for="candidate in candidates"
-        :key="candidate.id"
-        :label="candidate.name"
-        :info-icon="
-          activeWorkspaceInfo?.provider ===
-            testWorkspaceProviderService.providerID &&
-          activeWorkspaceInfo.workspaceID === candidate.id
-            ? IconCheck
-            : undefined
-        "
-        :active-info-icon="
-          activeWorkspaceInfo?.provider ===
-            testWorkspaceProviderService.providerID &&
-          activeWorkspaceInfo.workspaceID === candidate.id
-        "
-        @click="selectWorkspace(candidate.id)"
-      />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { useService } from "dioc/vue"
-import { computed } from "vue"
-import { NewWorkspaceService } from "~/services/new-workspace"
-import { TestWorkspaceProviderService } from "~/services/new-workspace/providers/test.workspace"
-import IconCheck from "~icons/lucide/check"
-import * as E from "fp-ts/Either"
-
-const workspaceService = useService(NewWorkspaceService)
-const testWorkspaceProviderService = useService(TestWorkspaceProviderService)
-
-const candidates = testWorkspaceProviderService.getWorkspaceCandidates()
-
-const activeWorkspaceInfo = computed(() => {
-  const activeWorkspaceHandle = workspaceService.activeWorkspaceHandle.value
-  const activeWorkspaceHandleRef = activeWorkspaceHandle?.get()
-
-  if (activeWorkspaceHandleRef?.value.type === "ok") {
-    return {
-      provider: activeWorkspaceHandleRef.value.data.providerID,
-      workspaceID: activeWorkspaceHandleRef.value.data.workspaceID,
-    }
-  }
-
-  return undefined
-})
-
-async function selectWorkspace(workspaceID: string) {
-  const result =
-    await testWorkspaceProviderService.getWorkspaceHandle(workspaceID)
-
-  // TODO: Re-evaluate this ?
-  if (E.isLeft(result)) {
-    console.error(result)
-    return
-  }
-
-  workspaceService.activeWorkspaceHandle.value = result.right
-}
-</script>
--- a/packages/hoppscotch-common/src/helpers/adapters/WorkspaceRESTCollectionSearchTreeAdapter.ts
+++ b/packages/hoppscotch-common/src/helpers/adapters/WorkspaceRESTCollectionSearchTreeAdapter.ts
@@ -1,92 +0,0 @@
-import { HoppCollection } from "@hoppscotch/data"
-import { ChildrenResult, SmartTreeAdapter } from "@hoppscotch/ui"
-import { Ref, computed, ref } from "vue"
-import { navigateToFolderWithIndexPath } from "~/newstore/collections"
-import { RESTCollectionViewItem } from "~/services/new-workspace/view"
-
-export class WorkspaceRESTSearchCollectionTreeAdapter
-  implements SmartTreeAdapter<RESTCollectionViewItem>
-{
-  constructor(public data: Ref<HoppCollection[]>) {}
-
-  getChildren(
-    nodeID: string | null
-  ): Ref<ChildrenResult<RESTCollectionViewItem>> {
-    const result = ref<ChildrenResult<RESTCollectionViewItem>>({
-      status: "loading",
-    })
-
-    return computed(() => {
-      if (nodeID === null) {
-        result.value = {
-          status: "loaded",
-          data: this.data.value.map((item, index) => ({
-            id: index.toString(),
-
-            data: <RESTCollectionViewItem>{
-              type: "collection",
-              value: {
-                collectionID: index.toString(),
-                isLastItem: index === this.data.value.length - 1,
-                name: item.name,
-                parentCollectionID: null,
-              },
-            },
-          })),
-        }
-      } else {
-        const indexPath = nodeID.split("/").map((x) => parseInt(x))
-
-        const item = navigateToFolderWithIndexPath(this.data.value, indexPath)
-
-        if (item) {
-          const collections = item.folders.map(
-            (childCollection, childCollectionID) => {
-              return {
-                id: `${nodeID}/${childCollectionID}`,
-                data: <RESTCollectionViewItem>{
-                  type: "collection",
-                  value: {
-                    isLastItem:
-                      item.folders?.length > 1
-                        ? childCollectionID === item.folders.length - 1
-                        : false,
-                    collectionID: `${nodeID}/${childCollectionID}`,
-                    name: childCollection.name,
-                    parentCollectionID: nodeID,
-                  },
-                },
-              }
-            }
-          )
-
-          const requests = item.requests.map((request, requestID) => {
-            return {
-              id: `${nodeID}/${requestID}`,
-              data: <RESTCollectionViewItem>{
-                type: "request",
-                value: {
-                  isLastItem:
-                    item.requests?.length > 1
-                      ? requestID === item.requests.length - 1
-                      : false,
-                  parentCollectionID: nodeID,
-                  collectionID: nodeID,
-                  requestID: `${nodeID}/${requestID}`,
-                  request,
-                },
-              },
-            }
-          })
-
-          result.value = {
-            status: "loaded",
-            data: [...collections, ...requests],
-          }
-        }
-      }
-
-      return result.value
-    })
-  }
-}
--- a/packages/hoppscotch-common/src/helpers/adapters/WorkspaceRESTCollectionTreeAdapter.ts
+++ b/packages/hoppscotch-common/src/helpers/adapters/WorkspaceRESTCollectionTreeAdapter.ts
@@ -1,134 +0,0 @@
-import {
-  ChildrenResult,
-  SmartTreeAdapter,
-} from "@hoppscotch/ui/dist/src/helpers/treeAdapter"
-import * as E from "fp-ts/Either"
-import { Ref, ref, watchEffect } from "vue"
-import { NewWorkspaceService } from "~/services/new-workspace"
-import { Handle } from "~/services/new-workspace/handle"
-import { RESTCollectionViewItem } from "~/services/new-workspace/view"
-import { Workspace } from "~/services/new-workspace/workspace"
-
-export class WorkspaceRESTCollectionTreeAdapter
-  implements SmartTreeAdapter<RESTCollectionViewItem>
-{
-  constructor(
-    private workspaceHandle: Handle<Workspace>,
-    private workspaceService: NewWorkspaceService
-  ) {}
-
-  public getChildren(
-    nodeID: string | null,
-    nodeType?: string
-  ): Ref<ChildrenResult<RESTCollectionViewItem>> {
-    const workspaceHandleRef = this.workspaceHandle.get()
-
-    if (workspaceHandleRef.value.type !== "ok") {
-      throw new Error("Cannot issue children with invalid workspace handle")
-    }
-
-    const result = ref<ChildrenResult<RESTCollectionViewItem>>({
-      status: "loading",
-    })
-
-    if (nodeID !== null) {
-      ;(async () => {
-        if (nodeType === "request") {
-          result.value = {
-            status: "loaded",
-            data: [],
-          }
-          return
-        }
-
-        const collectionHandleResult =
-          await this.workspaceService.getCollectionHandle(
-            this.workspaceHandle,
-            nodeID
-          )
-
-        // TODO: Better error handling
-        if (E.isLeft(collectionHandleResult)) {
-          throw new Error(JSON.stringify(collectionHandleResult.left.error))
-        }
-
-        const collectionHandle = collectionHandleResult.right
-
-        const collectionChildrenResult =
-          await this.workspaceService.getRESTCollectionChildrenView(
-            collectionHandle
-          )
-
-        // TODO: Better error handling
-        if (E.isLeft(collectionChildrenResult)) {
-          throw new Error(JSON.stringify(collectionChildrenResult.left.error))
-        }
-
-        const collectionChildrenViewHandle =
-          collectionChildrenResult.right.get()
-
-        watchEffect(() => {
-          if (collectionChildrenViewHandle.value.type !== "ok") return
-
-          if (collectionChildrenViewHandle.value.data.loading.value) {
-            result.value = {
-              status: "loading",
-            }
-          } else {
-            result.value = {
-              status: "loaded",
-              data: collectionChildrenViewHandle.value.data.content.value.map(
-                (item) => ({
-                  id:
-                    item.type === "request"
-                      ? item.value.requestID
-                      : item.value.collectionID,
-
-                  data: item,
-                })
-              ),
-            }
-          }
-        })
-      })()
-    } else {
-      ;(async () => {
-        const viewResult =
-          await this.workspaceService.getRESTRootCollectionView(
-            this.workspaceHandle
-          )
-
-        // TODO: Better error handling
-        if (E.isLeft(viewResult)) {
-          throw new Error(JSON.stringify(viewResult.left.error))
-        }
-
-        const viewHandle = viewResult.right.get()
-
-        watchEffect(() => {
-          if (viewHandle.value.type !== "ok") return
-
-          if (viewHandle.value.data.loading.value) {
-            result.value = {
-              status: "loading",
-            }
-          } else {
-            result.value = {
-              status: "loaded",
-              data: viewHandle.value.data.collections.value.map((coll) => ({
-                id: coll.collectionID,
-
-                data: {
-                  type: "collection",
-                  value: coll,
-                },
-              })),
-            }
-          }
-        })
-      })()
-    }
-
-    return result
-  }
-}
--- a/packages/hoppscotch-common/src/helpers/collection/collection.ts
+++ b/packages/hoppscotch-common/src/helpers/collection/collection.ts
@@ -1,15 +1,12 @@
 import { HoppCollection } from "@hoppscotch/data"
-import * as E from "fp-ts/Either"
-
-import { getService } from "~/modules/dioc"
-import { GQLTabService } from "~/services/tab/graphql"
-import { RESTTabService } from "~/services/tab/rest"
-import { runGQLQuery } from "../backend/GQLClient"
-import { GetSingleRequestDocument } from "../backend/graphql"
-import { HoppGQLSaveContext } from "../graphql/document"
-import { HoppRESTSaveContext } from "../rest/document"
-import { HoppInheritedProperty } from "../types/HoppInheritedProperties"
 import { getAffectedIndexes } from "./affectedIndex"
+import { GetSingleRequestDocument } from "../backend/graphql"
+import { runGQLQuery } from "../backend/GQLClient"
+import * as E from "fp-ts/Either"
+import { getService } from "~/modules/dioc"
+import { RESTTabService } from "~/services/tab/rest"
+import { HoppInheritedProperty } from "../types/HoppInheritedProperties"
+import { GQLTabService } from "~/services/tab/graphql"

 /**
 * Resolve save context on reorder
@@ -21,12 +18,15 @@ import { getAffectedIndexes } from "./affectedIndex"
 * @returns
 */

-export function resolveSaveContextOnCollectionReorder(payload: {
-  lastIndex: number
-  newIndex: number
-  folderPath: string
-  length?: number // better way to do this? now it could be undefined
-}) {
+export function resolveSaveContextOnCollectionReorder(
+  payload: {
+    lastIndex: number
+    newIndex: number
+    folderPath: string
+    length?: number // better way to do this? now it could be undefined
+  },
+  type: "remove" | "drop" = "remove"
+) {
  const { lastIndex, folderPath, length } = payload
  let { newIndex } = payload

@@ -41,6 +41,12 @@ export function resolveSaveContextOnCollectionReorder(payload: {
  if (newIndex === -1) {
    // if (newIndex === -1) remove it from the map because it will be deleted
    affectedIndexes.delete(lastIndex)
+    // when collection deleted opended requests from that collection be affected
+    if (type === "remove") {
+      resetSaveContextForAffectedRequests(
+        folderPath ? `${folderPath}/${lastIndex}` : lastIndex.toString()
+      )
+    }
  }

  // add folder path as prefix to the affected indexes
@@ -56,27 +62,10 @@ export function resolveSaveContextOnCollectionReorder(payload: {
  const tabService = getService(RESTTabService)

  const tabs = tabService.getTabsRefTo((tab) => {
-    if (tab.document.saveContext?.originLocation === "user-collection") {
-      return affectedPaths.has(tab.document.saveContext.folderPath)
-    }
-
-    if (
-      tab.document.saveContext?.originLocation !== "workspace-user-collection"
-    ) {
-      return false
-    }
-
-    const requestHandleRef = tab.document.saveContext.requestHandle?.get()
-
-    if (!requestHandleRef || requestHandleRef.value.type === "invalid") {
-      return false
-    }
-
-    const { requestID } = requestHandleRef.value.data
-
-    const collectionID = requestID.split("/").slice(0, -1).join("/")
-
-    return affectedPaths.has(collectionID)
+    return (
+      tab.document.saveContext?.originLocation === "user-collection" &&
+      affectedPaths.has(tab.document.saveContext.folderPath)
+    )
  })

  for (const tab of tabs) {
@@ -86,34 +75,6 @@ export function resolveSaveContextOnCollectionReorder(payload: {
      )!
      tab.value.document.saveContext.folderPath = newPath
    }
-
-    if (
-      tab.value.document.saveContext?.originLocation !==
-      "workspace-user-collection"
-    ) {
-      return false
-    }
-
-    const requestHandleRef = tab.value.document.saveContext.requestHandle?.get()
-
-    if (!requestHandleRef || requestHandleRef.value.type === "invalid") {
-      return false
-    }
-
-    const { requestID } = requestHandleRef.value.data
-
-    const collectionID = requestID.split("/").slice(0, -1).join("/")
-
-    const newCollectionID = affectedPaths.get(collectionID)
-    const newRequestID = `${newCollectionID}/${
-      requestID.split("/").slice(-1)[0]
-    }`
-
-    requestHandleRef.value.data = {
-      ...requestHandleRef.value.data,
-      collectionID: newCollectionID!,
-      requestID: newRequestID,
-    }
  }
 }

@@ -125,63 +86,25 @@ export function resolveSaveContextOnCollectionReorder(payload: {
 */

 export function updateSaveContextForAffectedRequests(
-  draggedCollectionIndex: string,
-  destinationCollectionIndex: string
+  oldFolderPath: string,
+  newFolderPath: string
 ) {
  const tabService = getService(RESTTabService)
+  const tabs = tabService.getTabsRefTo((tab) => {
+    return (
+      tab.document.saveContext?.originLocation === "user-collection" &&
+      tab.document.saveContext.folderPath.startsWith(oldFolderPath)
+    )
+  })

-  const activeTabs = tabService.getActiveTabs()
-
-  for (const tab of activeTabs.value) {
-    if (tab.document.saveContext?.originLocation === "user-collection") {
-      const { folderPath } = tab.document.saveContext
-
-      if (folderPath.startsWith(draggedCollectionIndex)) {
-        const newFolderPath = folderPath.replace(
-          draggedCollectionIndex,
-          destinationCollectionIndex
-        )
-
-        tab.document.saveContext = {
-          ...tab.document.saveContext,
-          folderPath: newFolderPath,
-        }
-      }
-
-      return
-    }
-
-    if (
-      tab.document.saveContext?.originLocation === "workspace-user-collection"
-    ) {
-      const requestHandleRef = tab.document.saveContext.requestHandle?.get()
-
-      if (!requestHandleRef || requestHandleRef.value.type === "invalid") {
-        return false
-      }
-
-      const { requestID } = requestHandleRef.value.data
-
-      const collectionID = requestID.split("/").slice(0, -1).join("/")
-      const requestIndex = requestID.split("/").slice(-1)[0]
-
-      if (collectionID.startsWith(draggedCollectionIndex)) {
-        const newCollectionID = collectionID.replace(
-          draggedCollectionIndex,
-          destinationCollectionIndex
-        )
-        const newRequestID = `${newCollectionID}/${requestIndex}`
-
-        tab.document.saveContext = {
-          ...tab.document.saveContext,
-          requestID: newRequestID,
-        }
-
-        requestHandleRef.value.data = {
-          ...requestHandleRef.value.data,
-          collectionID: newCollectionID,
-          requestID: newRequestID,
-        }
+  for (const tab of tabs) {
+    if (tab.value.document.saveContext?.originLocation === "user-collection") {
+      tab.value.document.saveContext = {
+        ...tab.value.document.saveContext,
+        folderPath: tab.value.document.saveContext.folderPath.replace(
+          oldFolderPath,
+          newFolderPath
+        ),
      }
    }
  }
@@ -243,33 +166,6 @@ function removeDuplicatesAndKeepLast(arr: HoppInheritedProperty["headers"]) {
  return result
 }

-function getSaveContextCollectionID(
-  saveContext: HoppRESTSaveContext | HoppGQLSaveContext | undefined
-): string | undefined {
-  if (!saveContext) {
-    return
-  }
-
-  const { originLocation } = saveContext
-
-  if (originLocation === "team-collection") {
-    return saveContext.collectionID
-  }
-
-  if (originLocation === "user-collection") {
-    return saveContext.folderPath
-  }
-
-  const requestHandleRef = saveContext.requestHandle?.get()
-
-  if (!requestHandleRef || requestHandleRef.value.type === "invalid") {
-    return
-  }
-
-  // TODO: Remove `collectionID` and obtain it from `requestID`
-  return requestHandleRef.value.data.collectionID
-}
-
 export function updateInheritedPropertiesForAffectedRequests(
  path: string,
  inheritedProperties: HoppInheritedProperty,
@@ -281,17 +177,22 @@ export function updateInheritedPropertiesForAffectedRequests(
  const effectedTabs = tabService.getTabsRefTo((tab) => {
    const saveContext = tab.document.saveContext

-    const collectionID = getSaveContextCollectionID(saveContext)
-    return collectionID?.startsWith(path) ?? false
+    const saveContextPath =
+      saveContext?.originLocation === "team-collection"
+        ? saveContext.collectionID
+        : saveContext?.folderPath
+
+    return saveContextPath?.startsWith(path) ?? false
  })

  effectedTabs.map((tab) => {
    const inheritedParentID =
      tab.value.document.inheritedProperties?.auth.parentID

-    const contextPath = getSaveContextCollectionID(
-      tab.value.document.saveContext
-    )
+    const contextPath =
+      tab.value.document.saveContext?.originLocation === "team-collection"
+        ? tab.value.document.saveContext.collectionID
+        : tab.value.document.saveContext?.folderPath

    const effectedPath = folderPathCloseToSaveContext(
      inheritedParentID,
@@ -326,6 +227,21 @@ export function updateInheritedPropertiesForAffectedRequests(
  })
 }

+function resetSaveContextForAffectedRequests(folderPath: string) {
+  const tabService = getService(RESTTabService)
+  const tabs = tabService.getTabsRefTo((tab) => {
+    return (
+      tab.document.saveContext?.originLocation === "user-collection" &&
+      tab.document.saveContext.folderPath.startsWith(folderPath)
+    )
+  })
+
+  for (const tab of tabs) {
+    tab.value.document.saveContext = null
+    tab.value.document.isDirty = true
+  }
+}
+
 /**
 * Reset save context to null if requests are deleted from the team collection or its folder
 * only runs when collection or folder is deleted
--- a/packages/hoppscotch-common/src/helpers/collection/request.ts
+++ b/packages/hoppscotch-common/src/helpers/collection/request.ts
@@ -3,10 +3,9 @@ import {
  HoppGQLRequest,
  HoppRESTRequest,
 } from "@hoppscotch/data"
-
-import { getService } from "~/modules/dioc"
-import { RESTTabService } from "~/services/tab/rest"
 import { getAffectedIndexes } from "./affectedIndex"
+import { RESTTabService } from "~/services/tab/rest"
+import { getService } from "~/modules/dioc"

 /**
 * Resolve save context on reorder
@@ -30,76 +29,30 @@ export function resolveSaveContextOnRequestReorder(payload: {
  if (newIndex > lastIndex) newIndex-- // there is a issue when going down? better way to resolve this?
  if (lastIndex === newIndex) return

-  const affectedIndices = getAffectedIndexes(
+  const affectedIndexes = getAffectedIndexes(
    lastIndex,
    newIndex === -1 ? length! : newIndex
  )

  // if (newIndex === -1) remove it from the map because it will be deleted
-  if (newIndex === -1) affectedIndices.delete(lastIndex)
+  if (newIndex === -1) affectedIndexes.delete(lastIndex)

  const tabService = getService(RESTTabService)
  const tabs = tabService.getTabsRefTo((tab) => {
-    if (tab.document.saveContext?.originLocation === "user-collection") {
-      return (
-        tab.document.saveContext.folderPath === folderPath &&
-        affectedIndices.has(tab.document.saveContext.requestIndex)
-      )
-    }
-
-    if (
-      tab.document.saveContext?.originLocation !== "workspace-user-collection"
-    ) {
-      return false
-    }
-
-    const requestHandleRef = tab.document.saveContext.requestHandle?.get()
-
-    if (!requestHandleRef || requestHandleRef.value.type === "invalid") {
-      return false
-    }
-
-    const { requestID } = requestHandleRef.value.data
-    const collectionID = requestID.split("/").slice(0, -1).join("/")
-    const requestIndex = parseInt(requestID.split("/").slice(-1)[0])
-
-    return collectionID === folderPath && affectedIndices.has(requestIndex)
+    return (
+      tab.document.saveContext?.originLocation === "user-collection" &&
+      tab.document.saveContext.folderPath === folderPath &&
+      affectedIndexes.has(tab.document.saveContext.requestIndex)
+    )
  })

  for (const tab of tabs) {
    if (tab.value.document.saveContext?.originLocation === "user-collection") {
-      const newIndex = affectedIndices.get(
+      const newIndex = affectedIndexes.get(
        tab.value.document.saveContext?.requestIndex
      )!
      tab.value.document.saveContext.requestIndex = newIndex
    }
-
-    if (
-      tab.value.document.saveContext?.originLocation !==
-      "workspace-user-collection"
-    ) {
-      return
-    }
-
-    const requestHandleRef = tab.value.document.saveContext.requestHandle?.get()
-
-    if (!requestHandleRef || requestHandleRef.value.type === "invalid") {
-      return
-    }
-
-    const { requestID } = requestHandleRef.value.data
-
-    const requestIDArr = requestID.split("/")
-    const requestIndex = affectedIndices.get(
-      parseInt(requestIDArr[requestIDArr.length - 1])
-    )!
-
-    requestIDArr[requestIDArr.length - 1] = requestIndex.toString()
-
-    requestHandleRef.value.data.requestID = requestIDArr.join("/")
-    requestHandleRef.value.data.collectionID = requestIDArr
-      .slice(0, -1)
-      .join("/")
  }
 }

@@ -114,7 +67,7 @@ export function getRequestsByPath(

  if (pathArray.length === 1) {
    const latestVersionedRequests = currentCollection.requests.filter(
-      (req): req is HoppRESTRequest => req.v === "4"
+      (req): req is HoppRESTRequest => req.v === "3"
    )

    return latestVersionedRequests
@@ -125,7 +78,7 @@ export function getRequestsByPath(
  }

  const latestVersionedRequests = currentCollection.requests.filter(
-    (req): req is HoppRESTRequest => req.v === "4"
+    (req): req is HoppRESTRequest => req.v === "3"
  )

  return latestVersionedRequests
--- a/packages/hoppscotch-common/src/helpers/import-export/export/index.ts
+++ b/packages/hoppscotch-common/src/helpers/import-export/export/index.ts
@@ -1,31 +1,32 @@
 import * as E from "fp-ts/Either"

-import { platform } from "~/platform"
-
 /**
 * Create a downloadable file from a collection and prompts the user to download it.
 * @param collectionJSON - JSON string of the collection
 * @param name - Name of the collection set as the file name
 */
-export const initializeDownloadFile = async (
+export const initializeDownloadCollection = (
  collectionJSON: string,
  name: string | null
 ) => {
-  const result = await platform.io.saveFileWithDialog({
-    data: collectionJSON,
-    contentType: "application/json",
-    suggestedFilename: `${name ?? "collection"}.json`,
-    filters: [
-      {
-        name: "Hoppscotch Collection/Environment JSON file",
-        extensions: ["json"],
-      },
-    ],
-  })
+  const file = new Blob([collectionJSON], { type: "application/json" })
+  const a = document.createElement("a")
+  const url = URL.createObjectURL(file)
+  a.href = url

-  if (result.type === "unknown" || result.type === "saved") {
-    return E.right("state.download_started")
+  if (name) {
+    a.download = `${name}.json`
+  } else {
+    a.download = `${url.split("/").pop()!.split("#")[0].split("?")[0]}.json`
  }

-  return E.left("state.download_failed")
+  document.body.appendChild(a)
+  a.click()
+
+  setTimeout(() => {
+    document.body.removeChild(a)
+    URL.revokeObjectURL(url)
+  }, 1000)
+
+  return E.right("state.download_started")
 }
--- a/packages/hoppscotch-common/src/helpers/import-export/export/myCollections.ts
+++ b/packages/hoppscotch-common/src/helpers/import-export/export/myCollections.ts
@@ -0,0 +1,5 @@
+import { HoppCollection } from "@hoppscotch/data"
+
+export const myCollectionsExporter = (myCollections: HoppCollection[]) => {
+  return JSON.stringify(myCollections, null, 2)
+}
--- a/packages/hoppscotch-common/src/helpers/rest/document.ts
+++ b/packages/hoppscotch-common/src/helpers/rest/document.ts
@@ -3,37 +3,8 @@ import { HoppRESTResponse } from "../types/HoppRESTResponse"
 import { HoppTestResult } from "../types/HoppTestResult"
 import { RESTOptionTabs } from "~/components/http/RequestOptions.vue"
 import { HoppInheritedProperty } from "../types/HoppInheritedProperties"
-import { Handle } from "~/services/new-workspace/handle"
-import { WorkspaceRequest } from "~/services/new-workspace/workspace"

 export type HoppRESTSaveContext =
-  | {
-      /**
-       * The origin source of the request
-       */
-      // TODO: Make this `user-collection` after porting all usages
-      // Future TODO: Keep separate types for the IDs (specific to persistence) & `requestHandle` (only existing at runtime)
-      originLocation: "workspace-user-collection"
-      /**
-       * ID of the workspace
-       */
-      workspaceID?: string
-
-      /**
-       * ID of the provider
-       */
-      providerID?: string
-
-      /**
-       * Path to the request in the collection tree
-       */
-      requestID?: string
-
-      /**
-       * Handle to the request open in the tab
-       */
-      requestHandle?: Handle<WorkspaceRequest>
-    }
  | {
      /**
       * The origin source of the request
--- a/packages/hoppscotch-common/src/helpers/teams/TeamListAdapter.ts
+++ b/packages/hoppscotch-common/src/helpers/teams/TeamListAdapter.ts
@@ -50,7 +50,6 @@ export default class TeamListAdapter {
  }

  public dispose() {
-    this.teamList$.next([])
    this.isDispose = true
    clearTimeout(this.timeoutHandle as any)
    this.timeoutHandle = null
--- a/packages/hoppscotch-common/src/helpers/teams/TeamsSearch.service.ts
+++ b/packages/hoppscotch-common/src/helpers/teams/TeamsSearch.service.ts
@@ -201,7 +201,7 @@ export class TeamSearchService extends Service {
  expandingCollections: Ref<string[]> = ref([])
  expandedCollections: Ref<string[]> = ref([])

-  // TODO: ideally this should return the search results / formatted results instead of directly manipulating the result set
+  // FUTURE-TODO: ideally this should return the search results / formatted results instead of directly manipulating the result set
  // eg: do the spotlight formatting in the spotlight searcher and not here
  searchTeams = async (query: string, teamID: string) => {
    if (!query.length) {
--- a/packages/hoppscotch-common/src/helpers/types/HoppInheritedProperties.ts
+++ b/packages/hoppscotch-common/src/helpers/types/HoppInheritedProperties.ts
@@ -17,24 +17,3 @@ export type HoppInheritedProperty = {
    inheritedHeader: HoppRESTHeader | GQLHeader
  }[]
 }
-
-type ModifiedAuth<T, AuthType> = {
-  [K in keyof T]: K extends "inheritedAuth" ? Extract<T[K], AuthType> : T[K]
-}
-
-type ModifiedHeaders<T, HeaderType> = {
-  [K in keyof T]: K extends "inheritedHeader" ? Extract<T[K], HeaderType> : T[K]
-}
-
-type ModifiedHoppInheritedProperty<AuthType, HeaderType> = {
-  auth: ModifiedAuth<HoppInheritedProperty["auth"], AuthType>
-  headers: ModifiedHeaders<
-    HoppInheritedProperty["headers"][number],
-    HeaderType
-  >[]
-}
-
-export type HoppInheritedRESTProperty = ModifiedHoppInheritedProperty<
-  HoppRESTAuth,
-  HoppRESTHeader
->
--- a/packages/hoppscotch-common/src/helpers/types/HoppPicked.ts
+++ b/packages/hoppscotch-common/src/helpers/types/HoppPicked.ts
@@ -20,29 +20,28 @@ export type Picked =
      pickedType: "my-collection"
      collectionIndex: number
    }
-// TODO: Enable this when rest of the implementation is in place
-// | {
-//     pickedType: "teams-request"
-//     requestID: string
-//   }
-// | {
-//     pickedType: "teams-folder"
-//     folderID: string
-//   }
-// | {
-//     pickedType: "teams-collection"
-//     collectionID: string
-//   }
-// | {
-//     pickedType: "gql-my-request"
-//     folderPath: string
-//     requestIndex: number
-//   }
-// | {
-//     pickedType: "gql-my-folder"
-//     folderPath: string
-//   }
-// | {
-//     pickedType: "gql-my-collection"
-//     collectionIndex: number
-//   }
+  | {
+      pickedType: "teams-request"
+      requestID: string
+    }
+  | {
+      pickedType: "teams-folder"
+      folderID: string
+    }
+  | {
+      pickedType: "teams-collection"
+      collectionID: string
+    }
+  | {
+      pickedType: "gql-my-request"
+      folderPath: string
+      requestIndex: number
+    }
+  | {
+      pickedType: "gql-my-folder"
+      folderPath: string
+    }
+  | {
+      pickedType: "gql-my-collection"
+      collectionIndex: number
+    }
--- a/packages/hoppscotch-common/src/helpers/utils/lazy.ts
+++ b/packages/hoppscotch-common/src/helpers/utils/lazy.ts
@@ -1,17 +0,0 @@
-/**
- * Create a function that will only run the given function once and caches the result.
- */
-export function lazy<T>(fn: () => T): () => T {
-  let funcRan = false
-  let result: T | null = null
-
-  return () => {
-    if (!funcRan) {
-      result = fn()
-      funcRan = true
-
-      return result
-    }
-    return result!
-  }
-}
--- a/packages/hoppscotch-common/src/index.ts
+++ b/packages/hoppscotch-common/src/index.ts
@@ -3,40 +3,36 @@ import { createApp } from "vue"
 import { initializeApp } from "./helpers/app"
 import { initBackendGQLClient } from "./helpers/backend/GQLClient"
 import { performMigrations } from "./helpers/migrations"
-import { getService } from "./modules/dioc"
 import { PlatformDef, setPlatformDef } from "./platform"
-import { PersonalWorkspaceProviderService } from "./services/new-workspace/providers/personal.workspace"
-import { TestWorkspaceProviderService } from "./services/new-workspace/providers/test.workspace"

-import { PersistenceService } from "./services/persistence"
-
-import "nprogress/nprogress.css"
-import "../assets/scss/styles.scss"
 import "../assets/scss/tailwind.scss"
 import "../assets/themes/themes.scss"
+import "../assets/scss/styles.scss"
+import "nprogress/nprogress.css"
+
+import "unfonts.css"

 import App from "./App.vue"
+import { getService } from "./modules/dioc"
+import { PersistenceService } from "./services/persistence"

 export function createHoppApp(el: string | Element, platformDef: PlatformDef) {
  setPlatformDef(platformDef)

  const app = createApp(App)

-  HOPP_MODULES.forEach((mod) => mod.onVueAppInit?.(app))
-  platformDef.addedHoppModules?.forEach((mod) => mod.onVueAppInit?.(app))
-
  // Some basic work that needs to be done before module inits even
  initBackendGQLClient()
  initializeApp()
+
+  HOPP_MODULES.forEach((mod) => mod.onVueAppInit?.(app))
+  platformDef.addedHoppModules?.forEach((mod) => mod.onVueAppInit?.(app))
+
  // TODO: Explore possibilities of moving this invocation to the service constructor
  // `toast` was coming up as `null` in the previous attempts
  getService(PersistenceService).setupLocalPersistence()
  performMigrations()

-  // TODO: Remove this
-  getService(TestWorkspaceProviderService)
-  getService(PersonalWorkspaceProviderService)
-
  app.mount(el)

  console.info(
--- a/packages/hoppscotch-common/src/modules/dioc.ts
+++ b/packages/hoppscotch-common/src/modules/dioc.ts
@@ -1,5 +1,5 @@
 import { HoppModule } from "."
-import { Container, ServiceClassInstance } from "dioc"
+import { Container, Service } from "dioc"
 import { diocPlugin } from "dioc/vue"
 import { DebugService } from "~/services/debug.service"
 import { platform } from "~/platform"
@@ -22,7 +22,7 @@ if (import.meta.env.DEV) {
 * services. Please use `useService` if within components or try to convert your
 * legacy subsystem into a service if possible.
 */
-export function getService<T extends ServiceClassInstance<any>>(
+export function getService<T extends typeof Service<any> & { ID: string }>(
  service: T
 ): InstanceType<T> {
  return serviceContainer.bind(service)
@@ -30,10 +30,11 @@ export function getService<T extends ServiceClassInstance<any>>(

 export default <HoppModule>{
  onVueAppInit(app) {
+    // TODO: look into this
+    // @ts-expect-error Something weird with Vue versions
    app.use(diocPlugin, {
      container: serviceContainer,
    })
-
    for (const service of platform.addedServices ?? []) {
      serviceContainer.bind(service)
    }
--- a/packages/hoppscotch-common/src/newstore/collections.ts
+++ b/packages/hoppscotch-common/src/newstore/collections.ts
@@ -319,7 +319,6 @@ const restCollectionDispatchers = defineDispatchers({
      )
      return {}
    }
-
    // We get the index path to the folder itself,
    // we have to find the folder containing the target folder,
    // so we pop the last path index
@@ -691,11 +690,17 @@ const restCollectionDispatchers = defineDispatchers({

    // if the destination is null, we are moving to the end of the list
    if (destinationRequestIndex === null) {
-      // TODO: Verify if this can be safely removed
+      // move to the end of the list
      targetLocation.requests.push(
        targetLocation.requests.splice(requestIndex, 1)[0]
      )

+      resolveSaveContextOnRequestReorder({
+        lastIndex: requestIndex,
+        newIndex: targetLocation.requests.length,
+        folderPath: destinationCollectionPath,
+      })
+
      return {
        state: newState,
      }
@@ -703,6 +708,12 @@ const restCollectionDispatchers = defineDispatchers({

    reorderItems(targetLocation.requests, requestIndex, destinationRequestIndex)

+    resolveSaveContextOnRequestReorder({
+      lastIndex: requestIndex,
+      newIndex: destinationRequestIndex,
+      folderPath: destinationCollectionPath,
+    })
+
    return {
      state: newState,
    }
--- a/packages/hoppscotch-common/src/newstore/settings.ts
+++ b/packages/hoppscotch-common/src/newstore/settings.ts
@@ -1,10 +1,9 @@
+import { pluck, distinctUntilChanged } from "rxjs/operators"
 import { cloneDeep, defaultsDeep, has } from "lodash-es"
 import { Observable } from "rxjs"
-import { distinctUntilChanged, pluck } from "rxjs/operators"
-import { nextTick } from "vue"
-import { platform } from "~/platform"
-import type { KeysMatching } from "~/types/ts-utils"
+
 import DispatchingStore, { defineDispatchers } from "./DispatchingStore"
+import type { KeysMatching } from "~/types/ts-utils"

 export const HoppBgColors = ["system", "light", "dark", "black"] as const

@@ -70,63 +69,51 @@ export type SettingsDef = {
  HAS_OPENED_SPOTLIGHT: boolean
 }

-export const getDefaultSettings = (): SettingsDef => {
-  const defaultSettings: SettingsDef = {
-    syncCollections: true,
-    syncHistory: true,
-    syncEnvironments: true,
+export const getDefaultSettings = (): SettingsDef => ({
+  syncCollections: true,
+  syncHistory: true,
+  syncEnvironments: true,

-    WRAP_LINES: {
-      httpRequestBody: true,
-      httpResponseBody: true,
-      httpHeaders: true,
-      httpParams: true,
-      httpUrlEncoded: true,
-      httpPreRequest: true,
-      httpTest: true,
-      httpRequestVariables: true,
-      graphqlQuery: true,
-      graphqlResponseBody: true,
-      graphqlHeaders: false,
-      graphqlVariables: false,
-      graphqlSchema: true,
-      importCurl: true,
-      codeGen: true,
-      cookie: true,
-    },
+  WRAP_LINES: {
+    httpRequestBody: true,
+    httpResponseBody: true,
+    httpHeaders: true,
+    httpParams: true,
+    httpUrlEncoded: true,
+    httpPreRequest: true,
+    httpTest: true,
+    httpRequestVariables: true,
+    graphqlQuery: true,
+    graphqlResponseBody: true,
+    graphqlHeaders: false,
+    graphqlVariables: false,
+    graphqlSchema: true,
+    importCurl: true,
+    codeGen: true,
+    cookie: true,
+  },

-    CURRENT_INTERCEPTOR_ID: "",
+  CURRENT_INTERCEPTOR_ID: "browser", // TODO: Allow the platform definition to take this place

-    // TODO: Interceptor related settings should move under the interceptor systems
-    PROXY_URL: "https://proxy.hoppscotch.io/",
-    URL_EXCLUDES: {
-      auth: true,
-      httpUser: true,
-      httpPassword: true,
-      bearerToken: true,
-      oauth2Token: true,
-    },
-    THEME_COLOR: "indigo",
-    BG_COLOR: "system",
-    TELEMETRY_ENABLED: true,
-    EXPAND_NAVIGATION: false,
-    SIDEBAR: true,
-    SIDEBAR_ON_LEFT: false,
-    COLUMN_LAYOUT: true,
+  // TODO: Interceptor related settings should move under the interceptor systems
+  PROXY_URL: "https://proxy.hoppscotch.io/",
+  URL_EXCLUDES: {
+    auth: true,
+    httpUser: true,
+    httpPassword: true,
+    bearerToken: true,
+    oauth2Token: true,
+  },
+  THEME_COLOR: "indigo",
+  BG_COLOR: "system",
+  TELEMETRY_ENABLED: true,
+  EXPAND_NAVIGATION: false,
+  SIDEBAR: true,
+  SIDEBAR_ON_LEFT: false,
+  COLUMN_LAYOUT: true,

-    HAS_OPENED_SPOTLIGHT: false,
-  }
-
-  // Wait for platform to initialize before setting CURRENT_INTERCEPTOR_ID
-  nextTick(() => {
-    applySetting(
-      "CURRENT_INTERCEPTOR_ID",
-      platform?.interceptors.default || "browser"
-    )
-  })
-
-  return defaultSettings
-}
+  HAS_OPENED_SPOTLIGHT: false,
+})

 type ApplySettingPayload = {
  [K in keyof SettingsDef]: {
--- a/packages/hoppscotch-common/src/pages/index.vue
+++ b/packages/hoppscotch-common/src/pages/index.vue
@@ -31,7 +31,7 @@
            </template>
            <template #suffix>
              <span
-                v-if="getTabDirtyStatus(tab)"
+                v-if="tab.document.isDirty"
                class="flex w-4 items-center justify-center text-secondary group-hover:hidden"
              >
                <svg
@@ -95,24 +95,24 @@
 </template>

 <script lang="ts" setup>
-import { useI18n } from "@composables/i18n"
+import { ref, onMounted } from "vue"
 import { safelyExtractRESTRequest } from "@hoppscotch/data"
-import { useService } from "dioc/vue"
-import { cloneDeep } from "lodash-es"
-import { onMounted, ref } from "vue"
-import { useRoute } from "vue-router"
-import { useReadonlyStream } from "~/composables/stream"
 import { translateExtURLParams } from "~/helpers/RESTExtURLParams"
-import { defineActionHandler, invokeAction } from "~/helpers/actions"
+import { useRoute } from "vue-router"
+import { useI18n } from "@composables/i18n"
 import { getDefaultRESTRequest } from "~/helpers/rest/default"
-import { HoppRESTDocument } from "~/helpers/rest/document"
+import { defineActionHandler, invokeAction } from "~/helpers/actions"
 import { platform } from "~/platform"
+import { useReadonlyStream } from "~/composables/stream"
+import { useService } from "dioc/vue"
 import { InspectionService } from "~/services/inspection"
-import { EnvironmentInspectorService } from "~/services/inspection/inspectors/environment.inspector"
 import { HeaderInspectorService } from "~/services/inspection/inspectors/header.inspector"
+import { EnvironmentInspectorService } from "~/services/inspection/inspectors/environment.inspector"
 import { ResponseInspectorService } from "~/services/inspection/inspectors/response.inspector"
-import { HoppTab } from "~/services/tab"
+import { cloneDeep } from "lodash-es"
 import { RESTTabService } from "~/services/tab/rest"
+import { HoppTab } from "~/services/tab"
+import { HoppRESTDocument } from "~/helpers/rest/document"

 const savingRequest = ref(false)
 const confirmingCloseForTabID = ref<string | null>(null)
@@ -193,7 +193,7 @@ const inspectionService = useService(InspectionService)
 const removeTab = (tabID: string) => {
  const tabState = tabs.getTabRef(tabID).value

-  if (getTabDirtyStatus(tabState)) {
+  if (tabState.document.isDirty) {
    confirmingCloseForTabID.value = tabID
  } else {
    tabs.closeTab(tabState.id)
@@ -202,10 +202,8 @@ const removeTab = (tabID: string) => {
 }

 const closeOtherTabsAction = (tabID: string) => {
+  const isTabDirty = tabs.getTabRef(tabID).value?.document.isDirty
  const dirtyTabCount = tabs.getDirtyTabsCount()
-
-  const isTabDirty = getTabDirtyStatus(tabs.getTabRef(tabID).value)
-
  // If current tab is dirty, so we need to subtract 1 from the dirty tab count
  const balanceDirtyTabCount = isTabDirty ? dirtyTabCount - 1 : dirtyTabCount

@@ -270,24 +268,15 @@ const onCloseConfirmSaveTab = () => {
 * Called when the user confirms they want to save the tab
 */
 const onResolveConfirmSaveTab = () => {
-  const { saveContext } = tabs.currentActiveTab.value.document
+  if (tabs.currentActiveTab.value.document.saveContext) {
+    invokeAction("request.save")

-  // There're two cases where the save request under a collection modal should open
-  // 1. Attempting to save a request that is not under a collection (When the save context is not available)
-  // 2. Deleting a request from the collection tree and attempting to save it while closing the respective tab (When the request handle is invalid)
-  if (
-    !saveContext ||
-    (saveContext.originLocation === "workspace-user-collection" &&
-      saveContext.requestHandle?.get().value.type === "invalid")
-  ) {
-    return (savingRequest.value = true)
-  }
-
-  invokeAction("request.save")
-
-  if (confirmingCloseForTabID.value) {
-    tabs.closeTab(confirmingCloseForTabID.value)
-    confirmingCloseForTabID.value = null
+    if (confirmingCloseForTabID.value) {
+      tabs.closeTab(confirmingCloseForTabID.value)
+      confirmingCloseForTabID.value = null
+    }
+  } else {
+    savingRequest.value = true
  }
 }

@@ -315,17 +304,6 @@ const shareTabRequest = (tabID: string) => {
  }
 }

-const getTabDirtyStatus = (tab: HoppTab<HoppRESTDocument>) => {
-  if (tab.document.isDirty) {
-    return true
-  }
-
-  return (
-    tab.document.saveContext?.originLocation === "workspace-user-collection" &&
-    tab.document.saveContext.requestHandle?.get().value.type === "invalid"
-  )
-}
-
 defineActionHandler("contextmenu.open", ({ position, text }) => {
  if (text) {
    contextMenu.value = {
--- a/packages/hoppscotch-common/src/platform/index.ts
+++ b/packages/hoppscotch-common/src/platform/index.ts
@@ -8,15 +8,14 @@ import { AnalyticsPlatformDef } from "./analytics"
 import { InterceptorsPlatformDef } from "./interceptors"
 import { HoppModule } from "~/modules"
 import { InspectorsPlatformDef } from "./inspectors"
-import { ServiceClassInstance } from "dioc"
+import { Service } from "dioc"
 import { IOPlatformDef } from "./io"
 import { SpotlightPlatformDef } from "./spotlight"
-import { Ref } from "vue"

 export type PlatformDef = {
  ui?: UIPlatformDef
  addedHoppModules?: HoppModule[]
-  addedServices?: Array<ServiceClassInstance<unknown>>
+  addedServices?: Array<typeof Service<unknown> & { ID: string }>
  auth: AuthPlatformDef
  analytics?: AnalyticsPlatformDef
  io: IOPlatformDef
@@ -46,11 +45,6 @@ export type PlatformDef = {
     * If a value is not given, then the value is assumed to be true
     */
    promptAsUsingCookies?: boolean
-
-    /**
-     * Whether to show the A/B testing workspace switcher click login flow or not
-     */
-    workspaceSwitcherLogin?: Ref<boolean>
  }
 }

--- a/packages/hoppscotch-common/src/platform/inspectors.ts
+++ b/packages/hoppscotch-common/src/platform/inspectors.ts
@@ -1,4 +1,4 @@
-import { Container, ServiceClassInstance } from "dioc"
+import { Service } from "dioc"
 import { Inspector } from "~/services/inspection"

 /**
@@ -8,9 +8,8 @@ export type PlatformInspectorsDef = {
  // We are keeping this as the only mode for now
  // So that if we choose to add other modes, we can do without breaking
  type: "service"
-  // TODO: I don't think this type is effective, we have to come up with a better impl
-  service: ServiceClassInstance<unknown> & {
-    new (c: Container): Inspector
+  service: typeof Service<unknown> & { ID: string } & {
+    new (): Service & Inspector
  }
 }

--- a/packages/hoppscotch-common/src/platform/interceptors.ts
+++ b/packages/hoppscotch-common/src/platform/interceptors.ts
@@ -1,13 +1,12 @@
-import { Container, ServiceClassInstance } from "dioc"
+import { Service } from "dioc"
 import { Interceptor } from "~/services/interceptor.service"

 export type PlatformInterceptorDef =
  | { type: "standalone"; interceptor: Interceptor }
  | {
      type: "service"
-      // TODO: I don't think this type is effective, we have to come up with a better impl
-      service: ServiceClassInstance<unknown> & {
-        new (c: Container): Interceptor
+      service: typeof Service<unknown> & { ID: string } & {
+        new (): Service & Interceptor
      }
    }

--- a/packages/hoppscotch-common/src/platform/spotlight.ts
+++ b/packages/hoppscotch-common/src/platform/spotlight.ts
@@ -1,10 +1,10 @@
-import { Container, ServiceClassInstance } from "dioc"
+import { Service } from "dioc"
 import { SpotlightSearcher } from "~/services/spotlight"

 export type SpotlightPlatformDef = {
  additionalSearchers?: Array<
-    ServiceClassInstance<unknown> & {
-      new (c: Container): SpotlightSearcher
+    typeof Service<unknown> & { ID: string } & {
+      new (): Service & SpotlightSearcher
    }
  >
 }
--- a/packages/hoppscotch-common/src/platform/std/inspections/extension.inspector.ts
+++ b/packages/hoppscotch-common/src/platform/std/inspections/extension.inspector.ts
@@ -31,7 +31,9 @@ export class ExtensionInspectorService extends Service implements Inspector {

  private readonly inspection = this.bind(InspectionService)

-  override onServiceInit() {
+  constructor() {
+    super()
+
    this.inspection.registerInspector(this)
  }

--- a/packages/hoppscotch-common/src/platform/std/interceptors/extension.ts
+++ b/packages/hoppscotch-common/src/platform/std/interceptors/extension.ts
@@ -133,7 +133,9 @@ export class ExtensionInterceptorService

  public selectable = { type: "selectable" as const }

-  override onServiceInit() {
+  constructor() {
+    super()
+
    this.listenForExtensionStatus()
  }

--- a/packages/hoppscotch-common/src/platform/std/io.ts
+++ b/packages/hoppscotch-common/src/platform/std/io.ts
@@ -13,17 +13,15 @@ export const browserIODef: IOPlatformDef = {
    const url = URL.createObjectURL(file)

    a.href = url
-    a.download =
-      opts.suggestedFilename ??
-      pipe(
-        url,
-        S.split("/"),
-        RNEA.last,
-        S.split("#"),
-        RNEA.head,
-        S.split("?"),
-        RNEA.head
-      )
+    a.download = pipe(
+      url,
+      S.split("/"),
+      RNEA.last,
+      S.split("#"),
+      RNEA.head,
+      S.split("?"),
+      RNEA.head
+    )

    document.body.appendChild(a)
    a.click()
--- a/packages/hoppscotch-common/src/services/context-menu/menu/environment.menu.ts
+++ b/packages/hoppscotch-common/src/services/context-menu/menu/environment.menu.ts
@@ -24,7 +24,9 @@ export class EnvironmentMenuService extends Service implements ContextMenu {

  private readonly contextMenu = this.bind(ContextMenuService)

-  override onServiceInit() {
+  constructor() {
+    super()
+
    this.contextMenu.registerMenu(this)
  }

--- a/packages/hoppscotch-common/src/services/context-menu/menu/parameter.menu.ts
+++ b/packages/hoppscotch-common/src/services/context-menu/menu/parameter.menu.ts
@@ -41,7 +41,9 @@ export class ParameterMenuService extends Service implements ContextMenu {

  private readonly contextMenu = this.bind(ContextMenuService)

-  override onServiceInit() {
+  constructor() {
+    super()
+
    this.contextMenu.registerMenu(this)
  }

--- a/packages/hoppscotch-common/src/services/context-menu/menu/url.menu.ts
+++ b/packages/hoppscotch-common/src/services/context-menu/menu/url.menu.ts
@@ -39,7 +39,9 @@ export class URLMenuService extends Service implements ContextMenu {
  private readonly contextMenu = this.bind(ContextMenuService)
  private readonly restTab = this.bind(RESTTabService)

-  override onServiceInit() {
+  constructor() {
+    super()
+
    this.contextMenu.registerMenu(this)
  }

--- a/packages/hoppscotch-common/src/services/cookie-jar.service.ts
+++ b/packages/hoppscotch-common/src/services/cookie-jar.service.ts
@@ -20,6 +20,10 @@ export class CookieJarService extends Service {
   */
  public cookieJar = ref(new Map<string, string[]>())

+  constructor() {
+    super()
+  }
+
  public parseSetCookieString(setCookieString: string) {
    return setCookieParse(setCookieString)
  }
--- a/packages/hoppscotch-common/src/services/debug.service.ts
+++ b/packages/hoppscotch-common/src/services/debug.service.ts
@@ -14,7 +14,9 @@ import { Service } from "dioc"
 export class DebugService extends Service {
  public static readonly ID = "DEBUG_SERVICE"

-  override onServiceInit() {
+  constructor() {
+    super()
+
    console.log("DebugService is initialized...")

    const container = this.getContainer()
--- a/packages/hoppscotch-common/src/services/inspection/index.ts
+++ b/packages/hoppscotch-common/src/services/inspection/index.ts
@@ -107,7 +107,9 @@ export class InspectionService extends Service {

  private readonly restTab = this.bind(RESTTabService)

-  override onServiceInit() {
+  constructor() {
+    super()
+
    this.initializeListeners()
  }

@@ -121,11 +123,6 @@ export class InspectionService extends Service {
  }

  private initializeListeners() {
-    console.log(
-      `Current active tab from inspection service is `,
-      this.restTab.currentActiveTab.value
-    )
-
    watch(
      () => [this.inspectors.entries(), this.restTab.currentActiveTab.value.id],
      () => {
--- a/packages/hoppscotch-common/src/services/inspection/inspectors/environment.inspector.ts
+++ b/packages/hoppscotch-common/src/services/inspection/inspectors/environment.inspector.ts
@@ -53,7 +53,9 @@ export class EnvironmentInspectorService extends Service implements Inspector {
    }
  )[0]

-  override onServiceInit() {
+  constructor() {
+    super()
+
    this.inspection.registerInspector(this)
  }

--- a/packages/hoppscotch-common/src/services/inspection/inspectors/header.inspector.ts
+++ b/packages/hoppscotch-common/src/services/inspection/inspectors/header.inspector.ts
@@ -22,7 +22,9 @@ export class HeaderInspectorService extends Service implements Inspector {
  private readonly inspection = this.bind(InspectionService)
  private readonly interceptorService = this.bind(InterceptorService)

-  override onServiceInit() {
+  constructor() {
+    super()
+
    this.inspection.registerInspector(this)
  }

--- a/packages/hoppscotch-common/src/services/inspection/inspectors/response.inspector.ts
+++ b/packages/hoppscotch-common/src/services/inspection/inspectors/response.inspector.ts
@@ -23,7 +23,9 @@ export class ResponseInspectorService extends Service implements Inspector {

  private readonly inspection = this.bind(InspectionService)

-  override onServiceInit() {
+  constructor() {
+    super()
+
    this.inspection.registerInspector(this)
  }

--- a/packages/hoppscotch-common/src/services/interceptor.service.ts
+++ b/packages/hoppscotch-common/src/services/interceptor.service.ts
@@ -178,7 +178,9 @@ export class InterceptorService extends Service {
    return this.interceptors.get(this.currentInterceptorID.value)
  })

-  override onServiceInit() {
+  constructor() {
+    super()
+
    // If the current interceptor is unselectable, select the first selectable one, else null
    watch([() => this.interceptors, this.currentInterceptorID], () => {
      if (!this.currentInterceptorID.value) return
--- a/packages/hoppscotch-common/src/services/new-workspace/handle.ts
+++ b/packages/hoppscotch-common/src/services/new-workspace/handle.ts
@@ -1,18 +0,0 @@
-import { Ref, WritableComputedRef } from "vue"
-
-export type Handle<T, InvalidateReason = unknown> = {
-  get: () => HandleRef<T, InvalidateReason>
-}
-
-export type HandleRef<T, InvalidateReason = unknown> = Ref<
-  HandleState<T, InvalidateReason>
->
-
-export type HandleState<T, InvalidateReason> =
-  | { type: "ok"; data: T }
-  | { type: "invalid"; reason: InvalidateReason }
-
-export type WritableHandleRef<
-  T,
-  InvalidateReason = unknown,
-> = WritableComputedRef<HandleState<T, InvalidateReason>>
--- a/packages/hoppscotch-common/src/services/new-workspace/helpers.ts
+++ b/packages/hoppscotch-common/src/services/new-workspace/helpers.ts
@@ -1,48 +0,0 @@
-import { Ref } from "vue"
-import { HandleRef } from "./handle"
-import { Workspace, WorkspaceCollection, WorkspaceRequest } from "./workspace"
-
-export const isValidWorkspaceHandle = (
-  workspaceHandle: HandleRef<Workspace>,
-  providerID: string,
-  workspaceID: string
-): workspaceHandle is Ref<{
-  data: Workspace
-  type: "ok"
-}> => {
-  return (
-    workspaceHandle.value.type === "ok" &&
-    workspaceHandle.value.data.providerID === providerID &&
-    workspaceHandle.value.data.workspaceID === workspaceID
-  )
-}
-
-export const isValidCollectionHandle = (
-  collectionHandle: HandleRef<WorkspaceCollection>,
-  providerID: string,
-  workspaceID: string
-): collectionHandle is Ref<{
-  data: WorkspaceCollection
-  type: "ok"
-}> => {
-  return (
-    collectionHandle.value.type === "ok" &&
-    collectionHandle.value.data.providerID === providerID &&
-    collectionHandle.value.data.workspaceID === workspaceID
-  )
-}
-
-export const isValidRequestHandle = (
-  requestHandle: HandleRef<WorkspaceRequest>,
-  providerID: string,
-  workspaceID: string
-): requestHandle is Ref<{
-  data: WorkspaceRequest
-  type: "ok"
-}> => {
-  return (
-    requestHandle.value.type === "ok" &&
-    requestHandle.value.data.providerID === providerID &&
-    requestHandle.value.data.workspaceID === workspaceID
-  )
-}
--- a/packages/hoppscotch-common/src/services/new-workspace/index.ts
+++ b/packages/hoppscotch-common/src/services/new-workspace/index.ts
@@ -1,807 +0,0 @@
-import { HoppCollection, HoppRESTRequest } from "@hoppscotch/data"
-import { Service } from "dioc"
-import * as E from "fp-ts/Either"
-import {
-  Component,
-  Ref,
-  computed,
-  markRaw,
-  shallowReactive,
-  shallowRef,
-  watch,
-} from "vue"
-import { Handle } from "./handle"
-import { WorkspaceProvider } from "./provider"
-import {
-  RESTCollectionChildrenView,
-  RESTCollectionJSONView,
-  RESTCollectionLevelAuthHeadersView,
-  RESTSearchResultsView,
-  RootRESTCollectionView,
-} from "./view"
-import { Workspace, WorkspaceCollection, WorkspaceRequest } from "./workspace"
-
-export type WorkspaceError<ServiceErr> =
-  | { type: "SERVICE_ERROR"; error: ServiceErr }
-  | { type: "PROVIDER_ERROR"; error: unknown }
-
-export class NewWorkspaceService extends Service {
-  public static readonly ID = "NEW_WORKSPACE_SERVICE"
-
-  private registeredProviders = shallowReactive(
-    new Map<string, WorkspaceProvider>()
-  )
-
-  public activeWorkspaceHandle: Ref<Handle<Workspace> | undefined> =
-    shallowRef()
-
-  public activeWorkspaceDecor = computed(() => {
-    const activeWorkspaceHandleRef = this.activeWorkspaceHandle.value?.get()
-
-    if (activeWorkspaceHandleRef?.value.type !== "ok") {
-      return undefined
-    }
-
-    return this.registeredProviders.get(
-      activeWorkspaceHandleRef.value.data.providerID
-    )!.workspaceDecor
-  })
-
-  public workspaceSelectorComponents = computed(() => {
-    const items: Component[] = []
-
-    const sortedProviders = Array.from(this.registeredProviders.values()).sort(
-      (a, b) =>
-        (b.workspaceDecor?.value.workspaceSelectorPriority ?? 0) -
-        (a.workspaceDecor?.value.workspaceSelectorPriority ?? 0)
-    )
-
-    for (const workspace of sortedProviders) {
-      if (workspace.workspaceDecor?.value?.workspaceSelectorComponent) {
-        items.push(workspace.workspaceDecor.value.workspaceSelectorComponent)
-      }
-    }
-
-    return items
-  })
-
-  override onServiceInit() {
-    // Watch for situations where the handle is invalidated
-    // so the active workspace handle definition can be invalidated
-    watch(
-      () => {
-        return this.activeWorkspaceHandle.value
-          ? [
-              this.activeWorkspaceHandle.value,
-              this.activeWorkspaceHandle.value?.get(),
-            ]
-          : [this.activeWorkspaceHandle.value]
-      },
-      () => {
-        if (!this.activeWorkspaceHandle.value) return
-
-        const activeWorkspaceHandleRef = this.activeWorkspaceHandle.value.get()
-
-        if (activeWorkspaceHandleRef.value.type === "invalid") {
-          this.activeWorkspaceHandle.value = undefined
-        }
-      },
-      { deep: true }
-    )
-  }
-
-  public async getWorkspaceHandle(
-    providerID: string,
-    workspaceID: string
-  ): Promise<E.Either<WorkspaceError<"INVALID_PROVIDER">, Handle<Workspace>>> {
-    const provider = this.registeredProviders.get(providerID)
-
-    if (!provider) {
-      return Promise.resolve(
-        E.left({ type: "SERVICE_ERROR", error: "INVALID_PROVIDER" as const })
-      )
-    }
-
-    const handleResult = await provider.getWorkspaceHandle(workspaceID)
-
-    if (E.isLeft(handleResult)) {
-      return E.left({ type: "PROVIDER_ERROR", error: handleResult.left })
-    }
-
-    return E.right(handleResult.right)
-  }
-
-  public async getCollectionHandle(
-    workspaceHandle: Handle<Workspace>,
-    collectionID: string
-  ): Promise<
-    E.Either<
-      WorkspaceError<"INVALID_HANDLE" | "INVALID_PROVIDER">,
-      Handle<WorkspaceCollection>
-    >
-  > {
-    const workspaceHandleRef = workspaceHandle.get()
-
-    if (workspaceHandleRef.value.type === "invalid") {
-      return E.left({ type: "SERVICE_ERROR", error: "INVALID_HANDLE" })
-    }
-
-    const provider = this.registeredProviders.get(
-      workspaceHandleRef.value.data.providerID
-    )
-
-    if (!provider) {
-      return E.left({ type: "SERVICE_ERROR", error: "INVALID_PROVIDER" })
-    }
-
-    const result = await provider.getCollectionHandle(
-      workspaceHandle,
-      collectionID
-    )
-
-    if (E.isLeft(result)) {
-      return E.left({ type: "PROVIDER_ERROR", error: result.left })
-    }
-
-    return E.right(result.right)
-  }
-
-  public async getRequestHandle(
-    workspaceHandle: Handle<Workspace>,
-    requestID: string
-  ): Promise<
-    E.Either<
-      WorkspaceError<"INVALID_HANDLE" | "INVALID_PROVIDER">,
-      Handle<WorkspaceRequest>
-    >
-  > {
-    const workspaceHandleRef = workspaceHandle.get()
-
-    if (workspaceHandleRef.value.type === "invalid") {
-      return E.left({ type: "SERVICE_ERROR", error: "INVALID_HANDLE" })
-    }
-
-    const provider = this.registeredProviders.get(
-      workspaceHandleRef.value.data.providerID
-    )
-
-    if (!provider) {
-      return E.left({ type: "SERVICE_ERROR", error: "INVALID_PROVIDER" })
-    }
-
-    const result = await provider.getRequestHandle(workspaceHandle, requestID)
-
-    if (E.isLeft(result)) {
-      return E.left({ type: "PROVIDER_ERROR", error: result.left })
-    }
-
-    return E.right(result.right)
-  }
-
-  public async createRESTRootCollection(
-    workspaceHandle: Handle<Workspace>,
-    newCollection: Partial<Exclude<HoppCollection, "id">> & { name: string }
-  ): Promise<
-    E.Either<
-      WorkspaceError<"INVALID_HANDLE" | "INVALID_PROVIDER">,
-      Handle<WorkspaceCollection>
-    >
-  > {
-    const workspaceHandleRef = workspaceHandle.get()
-
-    if (workspaceHandleRef.value.type === "invalid") {
-      return E.left({ type: "SERVICE_ERROR", error: "INVALID_HANDLE" })
-    }
-
-    const provider = this.registeredProviders.get(
-      workspaceHandleRef.value.data.providerID
-    )
-
-    if (!provider) {
-      return E.left({ type: "SERVICE_ERROR", error: "INVALID_PROVIDER" })
-    }
-
-    const result = await provider.createRESTRootCollection(
-      workspaceHandle,
-      newCollection
-    )
-
-    if (E.isLeft(result)) {
-      return E.left({ type: "PROVIDER_ERROR", error: result.left })
-    }
-
-    return E.right(result.right)
-  }
-
-  public async createRESTChildCollection(
-    parentCollectionHandle: Handle<WorkspaceCollection>,
-    newChildCollection: Partial<HoppCollection> & { name: string }
-  ): Promise<
-    E.Either<
-      WorkspaceError<"INVALID_HANDLE" | "INVALID_PROVIDER">,
-      Handle<WorkspaceCollection>
-    >
-  > {
-    const parentCollectionHandleRef = parentCollectionHandle.get()
-
-    if (parentCollectionHandleRef.value.type === "invalid") {
-      return E.left({ type: "SERVICE_ERROR", error: "INVALID_HANDLE" })
-    }
-
-    const provider = this.registeredProviders.get(
-      parentCollectionHandleRef.value.data.providerID
-    )
-
-    if (!provider) {
-      return E.left({ type: "SERVICE_ERROR", error: "INVALID_PROVIDER" })
-    }
-
-    const result = await provider.createRESTChildCollection(
-      parentCollectionHandle,
-      newChildCollection
-    )
-
-    if (E.isLeft(result)) {
-      return E.left({ type: "PROVIDER_ERROR", error: result.left })
-    }
-
-    return E.right(result.right)
-  }
-
-  public async updateRESTCollection(
-    collectionHandle: Handle<WorkspaceCollection>,
-    updatedCollection: Partial<HoppCollection>
-  ): Promise<
-    E.Either<WorkspaceError<"INVALID_HANDLE" | "INVALID_PROVIDER">, void>
-  > {
-    const collectionHandleRef = collectionHandle.get()
-
-    if (collectionHandleRef.value.type === "invalid") {
-      return E.left({ type: "SERVICE_ERROR", error: "INVALID_HANDLE" })
-    }
-
-    const provider = this.registeredProviders.get(
-      collectionHandleRef.value.data.providerID
-    )
-
-    if (!provider) {
-      return E.left({ type: "SERVICE_ERROR", error: "INVALID_PROVIDER" })
-    }
-
-    const result = await provider.updateRESTCollection(
-      collectionHandle,
-      updatedCollection
-    )
-
-    if (E.isLeft(result)) {
-      return E.left({ type: "PROVIDER_ERROR", error: result.left })
-    }
-
-    return E.right(undefined)
-  }
-
-  public async removeRESTCollection(
-    collectionHandle: Handle<WorkspaceCollection>
-  ): Promise<
-    E.Either<WorkspaceError<"INVALID_HANDLE" | "INVALID_PROVIDER">, void>
-  > {
-    const collectionHandleRef = collectionHandle.get()
-
-    if (collectionHandleRef.value.type === "invalid") {
-      return E.left({ type: "SERVICE_ERROR", error: "INVALID_HANDLE" })
-    }
-
-    const provider = this.registeredProviders.get(
-      collectionHandleRef.value.data.providerID
-    )
-
-    if (!provider) {
-      return E.left({ type: "SERVICE_ERROR", error: "INVALID_PROVIDER" })
-    }
-
-    const result = await provider.removeRESTCollection(collectionHandle)
-
-    if (E.isLeft(result)) {
-      return E.left({ type: "PROVIDER_ERROR", error: result.left })
-    }
-
-    return E.right(undefined)
-  }
-
-  public async createRESTRequest(
-    parentCollectionHandle: Handle<WorkspaceCollection>,
-    newRequest: HoppRESTRequest
-  ): Promise<
-    E.Either<
-      WorkspaceError<"INVALID_HANDLE" | "INVALID_PROVIDER">,
-      Handle<WorkspaceRequest>
-    >
-  > {
-    const parentCollectionHandleRef = parentCollectionHandle.get()
-
-    if (parentCollectionHandleRef.value.type === "invalid") {
-      return E.left({ type: "SERVICE_ERROR", error: "INVALID_HANDLE" })
-    }
-
-    const provider = this.registeredProviders.get(
-      parentCollectionHandleRef.value.data.providerID
-    )
-
-    if (!provider) {
-      return E.left({ type: "SERVICE_ERROR", error: "INVALID_PROVIDER" })
-    }
-
-    const result = await provider.createRESTRequest(
-      parentCollectionHandle,
-      newRequest
-    )
-
-    if (E.isLeft(result)) {
-      return E.left({ type: "PROVIDER_ERROR", error: result.left })
-    }
-
-    return E.right(result.right)
-  }
-
-  public async removeRESTRequest(
-    requestHandle: Handle<WorkspaceRequest>
-  ): Promise<
-    E.Either<WorkspaceError<"INVALID_HANDLE" | "INVALID_PROVIDER">, void>
-  > {
-    const requestHandleRef = requestHandle.get()
-
-    if (requestHandleRef.value.type === "invalid") {
-      return E.left({ type: "SERVICE_ERROR", error: "INVALID_HANDLE" })
-    }
-
-    const provider = this.registeredProviders.get(
-      requestHandleRef.value.data.providerID
-    )
-
-    if (!provider) {
-      return E.left({ type: "SERVICE_ERROR", error: "INVALID_PROVIDER" })
-    }
-
-    const result = await provider.removeRESTRequest(requestHandle)
-
-    if (E.isLeft(result)) {
-      return E.left({ type: "PROVIDER_ERROR", error: result.left })
-    }
-
-    return E.right(undefined)
-  }
-
-  public async updateRESTRequest(
-    requestHandle: Handle<WorkspaceRequest>,
-    updatedRequest: Partial<HoppRESTRequest>
-  ): Promise<
-    E.Either<WorkspaceError<"INVALID_HANDLE" | "INVALID_PROVIDER">, void>
-  > {
-    const requestHandleRef = requestHandle.get()
-
-    if (requestHandleRef.value.type === "invalid") {
-      return E.left({ type: "SERVICE_ERROR", error: "INVALID_HANDLE" })
-    }
-
-    const provider = this.registeredProviders.get(
-      requestHandleRef.value.data.providerID
-    )
-
-    if (!provider) {
-      return E.left({ type: "SERVICE_ERROR", error: "INVALID_PROVIDER" })
-    }
-
-    const result = await provider.updateRESTRequest(
-      requestHandle,
-      updatedRequest
-    )
-
-    if (E.isLeft(result)) {
-      return E.left({ type: "PROVIDER_ERROR", error: result.left })
-    }
-
-    return E.right(result.right)
-  }
-
-  public async importRESTCollections(
-    workspaceHandle: Handle<Workspace>,
-    collections: HoppCollection[]
-  ): Promise<
-    E.Either<
-      WorkspaceError<"INVALID_HANDLE" | "INVALID_PROVIDER">,
-      Handle<WorkspaceCollection>
-    >
-  > {
-    const workspaceHandleRef = workspaceHandle.get()
-
-    if (workspaceHandleRef.value.type === "invalid") {
-      return E.left({ type: "SERVICE_ERROR", error: "INVALID_HANDLE" })
-    }
-
-    const provider = this.registeredProviders.get(
-      workspaceHandleRef.value.data.providerID
-    )
-
-    if (!provider) {
-      return E.left({ type: "SERVICE_ERROR", error: "INVALID_PROVIDER" })
-    }
-
-    const result = await provider.importRESTCollections(
-      workspaceHandle,
-      collections
-    )
-
-    if (E.isLeft(result)) {
-      return E.left({ type: "PROVIDER_ERROR", error: result.left })
-    }
-
-    return E.right(result.right)
-  }
-
-  public async exportRESTCollections(
-    workspaceHandle: Handle<Workspace>,
-    collections: HoppCollection[]
-  ): Promise<
-    E.Either<WorkspaceError<"INVALID_HANDLE" | "INVALID_PROVIDER">, void>
-  > {
-    const workspaceHandleRef = workspaceHandle.get()
-
-    if (workspaceHandleRef.value.type === "invalid") {
-      return E.left({ type: "SERVICE_ERROR", error: "INVALID_HANDLE" })
-    }
-
-    const provider = this.registeredProviders.get(
-      workspaceHandleRef.value.data.providerID
-    )
-
-    if (!provider) {
-      return E.left({ type: "SERVICE_ERROR", error: "INVALID_PROVIDER" })
-    }
-
-    const result = await provider.exportRESTCollections(
-      workspaceHandle,
-      collections
-    )
-
-    if (E.isLeft(result)) {
-      return E.left({ type: "PROVIDER_ERROR", error: result.left })
-    }
-
-    return E.right(result.right)
-  }
-
-  public async exportRESTCollection(
-    collectionHandle: Handle<WorkspaceCollection>,
-    collection: HoppCollection
-  ): Promise<
-    E.Either<WorkspaceError<"INVALID_HANDLE" | "INVALID_PROVIDER">, void>
-  > {
-    const collectionHandleRef = collectionHandle.get()
-
-    if (collectionHandleRef.value.type === "invalid") {
-      return E.left({ type: "SERVICE_ERROR", error: "INVALID_HANDLE" })
-    }
-
-    const provider = this.registeredProviders.get(
-      collectionHandleRef.value.data.providerID
-    )
-
-    if (!provider) {
-      return E.left({ type: "SERVICE_ERROR", error: "INVALID_PROVIDER" })
-    }
-
-    const result = await provider.exportRESTCollection(
-      collectionHandle,
-      collection
-    )
-
-    if (E.isLeft(result)) {
-      return E.left({ type: "PROVIDER_ERROR", error: result.left })
-    }
-
-    return E.right(result.right)
-  }
-
-  public async reorderRESTCollection(
-    collectionHandle: Handle<WorkspaceCollection>,
-    destinationCollectionID: string | null
-  ): Promise<
-    E.Either<WorkspaceError<"INVALID_HANDLE" | "INVALID_PROVIDER">, void>
-  > {
-    const collectionHandleRef = collectionHandle.get()
-
-    if (collectionHandleRef.value.type === "invalid") {
-      return E.left({ type: "SERVICE_ERROR", error: "INVALID_HANDLE" })
-    }
-
-    const provider = this.registeredProviders.get(
-      collectionHandleRef.value.data.providerID
-    )
-
-    if (!provider) {
-      return E.left({ type: "SERVICE_ERROR", error: "INVALID_PROVIDER" })
-    }
-
-    const result = await provider.reorderRESTCollection(
-      collectionHandle,
-      destinationCollectionID
-    )
-
-    if (E.isLeft(result)) {
-      return E.left({ type: "PROVIDER_ERROR", error: result.left })
-    }
-
-    return E.right(result.right)
-  }
-
-  public async moveRESTCollection(
-    collectionHandle: Handle<WorkspaceCollection>,
-    destinationCollectionID: string | null
-  ): Promise<
-    E.Either<WorkspaceError<"INVALID_HANDLE" | "INVALID_PROVIDER">, void>
-  > {
-    const collectionHandleRef = collectionHandle.get()
-
-    if (collectionHandleRef.value.type === "invalid") {
-      return E.left({ type: "SERVICE_ERROR", error: "INVALID_HANDLE" })
-    }
-
-    const provider = this.registeredProviders.get(
-      collectionHandleRef.value.data.providerID
-    )
-
-    if (!provider) {
-      return E.left({ type: "SERVICE_ERROR", error: "INVALID_PROVIDER" })
-    }
-
-    const result = await provider.moveRESTCollection(
-      collectionHandle,
-      destinationCollectionID
-    )
-
-    if (E.isLeft(result)) {
-      return E.left({ type: "PROVIDER_ERROR", error: result.left })
-    }
-
-    return E.right(result.right)
-  }
-
-  public async reorderRESTRequest(
-    requestHandle: Handle<WorkspaceRequest>,
-    destinationCollectionID: string,
-    destinationRequestID: string | null
-  ): Promise<
-    E.Either<WorkspaceError<"INVALID_HANDLE" | "INVALID_PROVIDER">, void>
-  > {
-    const requestHandleRef = requestHandle.get()
-
-    if (requestHandleRef.value.type === "invalid") {
-      return E.left({ type: "SERVICE_ERROR", error: "INVALID_HANDLE" })
-    }
-
-    const provider = this.registeredProviders.get(
-      requestHandleRef.value.data.providerID
-    )
-
-    if (!provider) {
-      return E.left({ type: "SERVICE_ERROR", error: "INVALID_PROVIDER" })
-    }
-
-    const result = await provider.reorderRESTRequest(
-      requestHandle,
-      destinationCollectionID,
-      destinationRequestID
-    )
-
-    if (E.isLeft(result)) {
-      return E.left({ type: "PROVIDER_ERROR", error: result.left })
-    }
-
-    return E.right(result.right)
-  }
-
-  public async moveRESTRequest(
-    requestHandle: Handle<WorkspaceRequest>,
-    destinationCollectionID: string
-  ): Promise<
-    E.Either<WorkspaceError<"INVALID_HANDLE" | "INVALID_PROVIDER">, void>
-  > {
-    const requestHandleRef = requestHandle.get()
-
-    if (requestHandleRef.value.type === "invalid") {
-      return E.left({ type: "SERVICE_ERROR", error: "INVALID_HANDLE" })
-    }
-
-    const provider = this.registeredProviders.get(
-      requestHandleRef.value.data.providerID
-    )
-
-    if (!provider) {
-      return E.left({ type: "SERVICE_ERROR", error: "INVALID_PROVIDER" })
-    }
-
-    const result = await provider.moveRESTRequest(
-      requestHandle,
-      destinationCollectionID
-    )
-
-    if (E.isLeft(result)) {
-      return E.left({ type: "PROVIDER_ERROR", error: result.left })
-    }
-
-    return E.right(result.right)
-  }
-
-  public async getRESTCollectionChildrenView(
-    collectionHandle: Handle<WorkspaceCollection>
-  ): Promise<
-    E.Either<
-      WorkspaceError<"INVALID_HANDLE" | "INVALID_PROVIDER">,
-      Handle<RESTCollectionChildrenView>
-    >
-  > {
-    const collectionHandleRef = collectionHandle.get()
-
-    if (collectionHandleRef.value.type === "invalid") {
-      return E.left({ type: "SERVICE_ERROR", error: "INVALID_HANDLE" })
-    }
-
-    const provider = this.registeredProviders.get(
-      collectionHandleRef.value.data.providerID
-    )
-
-    if (!provider) {
-      return E.left({ type: "SERVICE_ERROR", error: "INVALID_PROVIDER" })
-    }
-
-    const result =
-      await provider.getRESTCollectionChildrenView(collectionHandle)
-
-    if (E.isLeft(result)) {
-      return E.left({ type: "PROVIDER_ERROR", error: result.left })
-    }
-
-    return E.right(result.right)
-  }
-
-  public async getRESTRootCollectionView(
-    workspaceHandle: Handle<Workspace>
-  ): Promise<
-    E.Either<
-      WorkspaceError<"INVALID_HANDLE" | "INVALID_PROVIDER">,
-      Handle<RootRESTCollectionView>
-    >
-  > {
-    const workspaceHandleRef = workspaceHandle.get()
-
-    if (workspaceHandleRef.value.type === "invalid") {
-      return E.left({ type: "SERVICE_ERROR", error: "INVALID_HANDLE" })
-    }
-
-    const provider = this.registeredProviders.get(
-      workspaceHandleRef.value.data.providerID
-    )
-
-    if (!provider) {
-      return E.left({ type: "SERVICE_ERROR", error: "INVALID_PROVIDER" })
-    }
-
-    const result = await provider.getRESTRootCollectionView(workspaceHandle)
-
-    if (E.isLeft(result)) {
-      return E.left({ type: "PROVIDER_ERROR", error: result.left })
-    }
-
-    return E.right(result.right)
-  }
-
-  public async getRESTCollectionLevelAuthHeadersView(
-    collectionHandle: Handle<WorkspaceCollection>
-  ): Promise<
-    E.Either<
-      WorkspaceError<"INVALID_HANDLE" | "INVALID_PROVIDER">,
-      Handle<RESTCollectionLevelAuthHeadersView>
-    >
-  > {
-    const collectionHandleRef = collectionHandle.get()
-
-    if (collectionHandleRef.value.type === "invalid") {
-      return E.left({ type: "SERVICE_ERROR", error: "INVALID_HANDLE" })
-    }
-
-    const provider = this.registeredProviders.get(
-      collectionHandleRef.value.data.providerID
-    )
-
-    if (!provider) {
-      return E.left({ type: "SERVICE_ERROR", error: "INVALID_PROVIDER" })
-    }
-
-    const result =
-      await provider.getRESTCollectionLevelAuthHeadersView(collectionHandle)
-
-    if (E.isLeft(result)) {
-      return E.left({ type: "PROVIDER_ERROR", error: result.left })
-    }
-
-    return E.right(result.right)
-  }
-
-  public async getRESTSearchResultsView(
-    workspaceHandle: Handle<Workspace>,
-    searchQuery: Ref<string>
-  ): Promise<
-    E.Either<
-      WorkspaceError<"INVALID_HANDLE" | "INVALID_PROVIDER">,
-      Handle<RESTSearchResultsView>
-    >
-  > {
-    const workspaceHandleRef = workspaceHandle.get()
-
-    if (workspaceHandleRef.value.type === "invalid") {
-      return E.left({ type: "SERVICE_ERROR", error: "INVALID_HANDLE" })
-    }
-
-    const provider = this.registeredProviders.get(
-      workspaceHandleRef.value.data.providerID
-    )
-
-    if (!provider) {
-      return E.left({ type: "SERVICE_ERROR", error: "INVALID_PROVIDER" })
-    }
-
-    const result = await provider.getRESTSearchResultsView(
-      workspaceHandle,
-      searchQuery
-    )
-
-    if (E.isLeft(result)) {
-      return E.left({ type: "PROVIDER_ERROR", error: result.left })
-    }
-
-    return E.right(result.right)
-  }
-
-  public async getRESTCollectionJSONView(
-    workspaceHandle: Handle<Workspace>
-  ): Promise<
-    E.Either<
-      WorkspaceError<"INVALID_HANDLE" | "INVALID_PROVIDER">,
-      Handle<RESTCollectionJSONView>
-    >
-  > {
-    const workspaceHandleRef = workspaceHandle.get()
-
-    if (workspaceHandleRef.value.type === "invalid") {
-      return E.left({ type: "SERVICE_ERROR", error: "INVALID_HANDLE" })
-    }
-
-    const provider = this.registeredProviders.get(
-      workspaceHandleRef.value.data.providerID
-    )
-
-    if (!provider) {
-      return E.left({ type: "SERVICE_ERROR", error: "INVALID_PROVIDER" })
-    }
-
-    const result = await provider.getRESTCollectionJSONView(workspaceHandle)
-
-    if (E.isLeft(result)) {
-      return E.left({ type: "PROVIDER_ERROR", error: result.left })
-    }
-
-    return E.right(result.right)
-  }
-
-  public registerWorkspaceProvider(provider: WorkspaceProvider) {
-    if (this.registeredProviders.has(provider.providerID)) {
-      console.warn(
-        "Ignoring attempt to re-register workspace provider that is already existing:",
-        provider
-      )
-      return
-    }
-
-    this.registeredProviders.set(provider.providerID, markRaw(provider))
-  }
-}
--- a/packages/hoppscotch-common/src/services/new-workspace/provider.ts
+++ b/packages/hoppscotch-common/src/services/new-workspace/provider.ts
@@ -1,111 +0,0 @@
-import { Ref } from "vue"
-import * as E from "fp-ts/Either"
-
-import { Handle } from "./handle"
-import {
-  Workspace,
-  WorkspaceCollection,
-  WorkspaceDecor,
-  WorkspaceRequest,
-} from "./workspace"
-import {
-  RESTCollectionLevelAuthHeadersView,
-  RESTCollectionChildrenView,
-  RootRESTCollectionView,
-  RESTSearchResultsView,
-  RESTCollectionJSONView,
-} from "./view"
-import { HoppCollection, HoppRESTRequest } from "@hoppscotch/data"
-
-export interface WorkspaceProvider {
-  providerID: string
-
-  workspaceDecor?: Ref<WorkspaceDecor>
-
-  getWorkspaceHandle(
-    workspaceID: string
-  ): Promise<E.Either<unknown, Handle<Workspace>>>
-  getCollectionHandle(
-    workspaceHandle: Handle<Workspace>,
-    collectionID: string
-  ): Promise<E.Either<unknown, Handle<WorkspaceCollection>>>
-  getRequestHandle(
-    workspaceHandle: Handle<Workspace>,
-    requestID: string
-  ): Promise<E.Either<unknown, Handle<WorkspaceRequest>>>
-
-  getRESTRootCollectionView(
-    workspaceHandle: Handle<Workspace>
-  ): Promise<E.Either<never, Handle<RootRESTCollectionView>>>
-  getRESTCollectionChildrenView(
-    collectionHandle: Handle<WorkspaceCollection>
-  ): Promise<E.Either<never, Handle<RESTCollectionChildrenView>>>
-  getRESTCollectionLevelAuthHeadersView(
-    collectionHandle: Handle<WorkspaceCollection>
-  ): Promise<E.Either<never, Handle<RESTCollectionLevelAuthHeadersView>>>
-  getRESTSearchResultsView(
-    workspaceHandle: Handle<Workspace>,
-    searchQuery: Ref<string>
-  ): Promise<E.Either<never, Handle<RESTSearchResultsView>>>
-  getRESTCollectionJSONView(
-    workspaceHandle: Handle<Workspace>
-  ): Promise<E.Either<never, Handle<RESTCollectionJSONView>>>
-
-  createRESTRootCollection(
-    workspaceHandle: Handle<Workspace>,
-    newCollection: Partial<Exclude<HoppCollection, "id">> & { name: string }
-  ): Promise<E.Either<unknown, Handle<WorkspaceCollection>>>
-  createRESTChildCollection(
-    parentCollectionHandle: Handle<WorkspaceCollection>,
-    newChildCollection: Partial<HoppCollection> & { name: string }
-  ): Promise<E.Either<unknown, Handle<WorkspaceCollection>>>
-  updateRESTCollection(
-    collectionHandle: Handle<WorkspaceCollection>,
-    updatedCollection: Partial<HoppCollection>
-  ): Promise<E.Either<unknown, void>>
-  removeRESTCollection(
-    collectionHandle: Handle<WorkspaceCollection>
-  ): Promise<E.Either<unknown, void>>
-  createRESTRequest(
-    parentCollectionHandle: Handle<WorkspaceCollection>,
-    newRequest: HoppRESTRequest
-  ): Promise<E.Either<unknown, Handle<WorkspaceRequest>>>
-  updateRESTRequest(
-    requestHandle: Handle<WorkspaceRequest>,
-    updatedRequest: Partial<HoppRESTRequest>
-  ): Promise<E.Either<unknown, void>>
-  removeRESTRequest(
-    requestHandle: Handle<WorkspaceRequest>
-  ): Promise<E.Either<unknown, void>>
-
-  importRESTCollections(
-    workspaceHandle: Handle<Workspace>,
-    collections: HoppCollection[]
-  ): Promise<E.Either<unknown, Handle<WorkspaceCollection>>>
-  exportRESTCollections(
-    workspaceHandle: Handle<Workspace>,
-    collections: HoppCollection[]
-  ): Promise<E.Either<unknown, void>>
-  exportRESTCollection(
-    collectionHandle: Handle<WorkspaceCollection>,
-    collection: HoppCollection
-  ): Promise<E.Either<unknown, void>>
-
-  reorderRESTCollection(
-    collectionHandle: Handle<WorkspaceCollection>,
-    destinationCollectionID: string | null
-  ): Promise<E.Either<unknown, void>>
-  moveRESTCollection(
-    collectionHandle: Handle<WorkspaceCollection>,
-    destinationCollectionID: string | null
-  ): Promise<E.Either<unknown, void>>
-  reorderRESTRequest(
-    requestHandle: Handle<WorkspaceRequest>,
-    destinationCollectionID: string,
-    destinationRequestID: string | null
-  ): Promise<E.Either<unknown, void>>
-  moveRESTRequest(
-    requestHandle: Handle<WorkspaceRequest>,
-    destinationCollectionID: string
-  ): Promise<E.Either<unknown, void>>
-}
--- a/packages/hoppscotch-common/src/services/new-workspace/providers/tests/mocks/store.ts
+++ b/packages/hoppscotch-common/src/services/new-workspace/providers/tests/mocks/store.ts
--- a/packages/hoppscotch-common/src/services/new-workspace/providers/tests/helpers.ts
+++ b/packages/hoppscotch-common/src/services/new-workspace/providers/tests/helpers.ts
@@ -1,52 +0,0 @@
-import { getDefaultRESTRequest } from "@hoppscotch/data"
-import { ref, computed } from "vue"
-
-import { HandleState } from "../../handle"
-import { WorkspaceRequest } from "../../workspace"
-
-export const generateIssuedHandleValues = (
-  collectionsAndRequests: { collectionID: string; requestCount: number }[]
-) => {
-  const providerID = "PERSONAL_WORKSPACE_PROVIDER"
-  const workspaceID = "personal"
-  const issuedHandleValues: HandleState<WorkspaceRequest, unknown>[] = []
-
-  collectionsAndRequests.forEach(({ collectionID, requestCount }) => {
-    for (let i = 0; i < requestCount; i++) {
-      const requestID = `${collectionID}/${i}`
-
-      issuedHandleValues.push({
-        type: "ok" as const,
-        data: {
-          providerID: providerID,
-          workspaceID: workspaceID,
-          collectionID,
-          requestID,
-          request: {
-            ...getDefaultRESTRequest(),
-            name: `req-${requestID}`,
-          },
-        },
-      })
-    }
-  })
-
-  return issuedHandleValues
-}
-
-export const getWritableHandle = (
-  value: HandleState<WorkspaceRequest, unknown>
-) => {
-  const handleRefData = ref(value)
-
-  const writableHandle = computed({
-    get() {
-      return handleRefData.value
-    },
-    set(newValue) {
-      handleRefData.value = newValue
-    },
-  })
-
-  return writableHandle
-}
--- a/packages/hoppscotch-common/src/services/new-workspace/providers/tests/personal.workspace.spec.ts
+++ b/packages/hoppscotch-common/src/services/new-workspace/providers/tests/personal.workspace.spec.ts
--- a/packages/hoppscotch-common/src/services/new-workspace/providers/personal.workspace.ts
+++ b/packages/hoppscotch-common/src/services/new-workspace/providers/personal.workspace.ts
--- a/packages/hoppscotch-common/src/services/new-workspace/providers/test.workspace.ts
+++ b/packages/hoppscotch-common/src/services/new-workspace/providers/test.workspace.ts
@@ -1,309 +0,0 @@
-import { computed, markRaw, reactive, ref } from "vue"
-import { useTimestamp } from "@vueuse/core"
-import { Service } from "dioc"
-import { WorkspaceProvider } from "../provider"
-import * as E from "fp-ts/Either"
-import { Handle, HandleRef } from "../handle"
-import { Workspace, WorkspaceCollection } from "../workspace"
-import { NewWorkspaceService } from ".."
-import TestWorkspaceSelector from "~/components/workspace/TestWorkspaceSelector.vue"
-import { RESTCollectionChildrenView, RootRESTCollectionView } from "../view"
-import IconUser from "~icons/lucide/user"
-import { get } from "lodash-es"
-
-type TestReqDef = {
-  name: string
-}
-
-type TestCollDef = {
-  name: string
-  collections: TestCollDef[]
-  requests: TestReqDef[]
-}
-
-const timestamp = useTimestamp({ interval: 3000 })
-// const timestamp = ref(Date.now())
-
-const testData = reactive({
-  workspaceA: {
-    name: computed(() => `Workspace A: ${timestamp.value}`),
-    collections: [
-      <TestCollDef>{
-        name: "Collection A",
-        collections: [
-          {
-            name: "Collection B",
-            collections: [
-              { name: "Collection C", collections: [], requests: [] },
-            ],
-            requests: [],
-          },
-        ],
-        requests: [{ name: "Request C" }],
-      },
-    ],
-  },
-  workspaceB: {
-    name: "Workspace B",
-    collections: [
-      <TestCollDef>{
-        name: "Collection D",
-        collections: [{ name: "Collection E", collections: [], requests: [] }],
-        requests: [{ name: "Request F" }],
-      },
-    ],
-  },
-})
-
-;(window as any).testData = testData
-
-export class TestWorkspaceProviderService
-  extends Service
-  implements WorkspaceProvider
-{
-  public static readonly ID = "TEST_WORKSPACE_PROVIDER_SERVICE"
-
-  public providerID = "TEST_WORKSPACE_PROVIDER"
-
-  public workspaceDecor = ref({
-    workspaceSelectorComponent: markRaw(TestWorkspaceSelector),
-    headerCurrentIcon: markRaw(IconUser),
-    workspaceSelectorPriority: 10,
-  })
-
-  private readonly workspaceService = this.bind(NewWorkspaceService)
-
-  override onServiceInit() {
-    this.workspaceService.registerWorkspaceProvider(this)
-  }
-
-  public createRESTRootCollection(
-    workspaceHandle: HandleRef<Workspace>,
-    collectionName: string
-  ): Promise<
-    E.Either<"INVALID_WORKSPACE_HANDLE", Handle<WorkspaceCollection>>
-  > {
-    if (workspaceHandle.value.type !== "ok") {
-      return Promise.resolve(E.left("INVALID_WORKSPACE_HANDLE" as const))
-    }
-
-    const workspaceID = workspaceHandle.value.data.workspaceID
-
-    const newCollID =
-      testData[workspaceID as keyof typeof testData].collections.length
-
-    testData[workspaceID as keyof typeof testData].collections.push({
-      name: collectionName,
-      collections: [],
-      requests: [],
-    })
-
-    return this.getCollectionHandle(workspaceHandle, newCollID.toString())
-  }
-
-  public createRESTChildCollection(
-    parentCollHandle: HandleRef<WorkspaceCollection>,
-    collectionName: string
-  ): Promise<E.Either<unknown, Handle<WorkspaceCollection>>> {
-    // TODO: Implement
-    throw new Error("Method not implemented.")
-  }
-
-  public getWorkspaceHandle(
-    workspaceID: string
-  ): Promise<E.Either<never, Handle<Workspace>>> {
-    return Promise.resolve(
-      E.right(
-        computed(() => {
-          if (!(workspaceID in testData)) {
-            return {
-              type: "invalid",
-              reason: "WORKSPACE_WENT_OUT" as const,
-            }
-          }
-
-          return {
-            type: "ok",
-            data: {
-              providerID: this.providerID,
-              workspaceID,
-              name: testData[workspaceID as keyof typeof testData].name,
-              collectionsAreReadonly: false,
-            },
-          }
-        })
-      )
-    )
-  }
-
-  public getCollectionHandle(
-    workspaceHandle: HandleRef<Workspace>,
-    collectionID: string
-  ): Promise<
-    E.Either<"INVALID_WORKSPACE_HANDLE", Handle<WorkspaceCollection>>
-  > {
-    return Promise.resolve(
-      E.right(
-        computed(() => {
-          if (workspaceHandle.value.type !== "ok") {
-            return {
-              type: "invalid",
-              reason: "WORKSPACE_INVALIDATED" as const,
-            }
-          }
-
-          const workspaceID = workspaceHandle.value.data.workspaceID
-          const collectionPath = collectionID
-            .split("/")
-            .flatMap((x) => ["collections", x])
-
-          const result: TestCollDef | undefined = get(
-            testData[workspaceID as keyof typeof testData],
-            collectionPath
-          )
-
-          if (!result) {
-            return {
-              type: "invalid",
-              reason: "INVALID_COLL_ID",
-            }
-          }
-
-          return {
-            type: "ok",
-            data: {
-              providerID: this.providerID,
-              workspaceID,
-              collectionID,
-              name: result.name,
-            },
-          }
-        })
-      )
-    )
-  }
-
-  public getRESTCollectionChildrenView(
-    collectionHandle: HandleRef<WorkspaceCollection>
-  ): Promise<E.Either<never, Handle<RESTCollectionChildrenView>>> {
-    return Promise.resolve(
-      E.right(
-        computed(() => {
-          if (collectionHandle.value.type === "invalid") {
-            return {
-              type: "invalid",
-              reason: "COLL_HANDLE_IS_INVALID" as const,
-            }
-          }
-
-          const workspaceID = collectionHandle.value.data.workspaceID
-          const collectionID = collectionHandle.value.data.collectionID
-
-          if (!(workspaceID in testData)) {
-            return {
-              type: "invalid",
-              reason: "WORKSPACE_NOT_PRESENT" as const,
-            }
-          }
-
-          const collectionPath = collectionID
-            .split("/")
-            .flatMap((x) => ["collections", x])
-
-          return markRaw({
-            type: "ok",
-            data: {
-              providerID: this.providerID,
-              workspaceID,
-              collectionID,
-
-              loading: ref(false),
-
-              content: computed(() => [
-                ...(
-                  get(testData[workspaceID as keyof typeof testData], [
-                    ...collectionPath,
-                    "collections",
-                  ]) as TestCollDef[]
-                ).map((item, i) => ({
-                  type: "collection" as const,
-                  value: {
-                    collectionID: `${collectionID}/${i}`,
-                    name: item.name,
-                  },
-                })),
-                ...(
-                  get(testData[workspaceID as keyof typeof testData], [
-                    ...collectionPath,
-                    "requests",
-                  ]) as TestReqDef[]
-                ).map((item, i) => ({
-                  type: "request" as const,
-                  value: {
-                    requestID: `${collectionID}/${i}`,
-                    name: item.name,
-                    method: "get",
-                  },
-                })),
-              ]),
-            },
-          })
-        })
-      )
-    )
-  }
-
-  public getRESTRootCollectionView(
-    workspaceHandle: HandleRef<Workspace>
-  ): Promise<E.Either<never, Handle<RootRESTCollectionView>>> {
-    return Promise.resolve(
-      E.right(
-        computed(() => {
-          if (workspaceHandle.value.type === "invalid") {
-            return {
-              type: "invalid",
-              reason: "WORKSPACE_IS_INVALID" as const,
-            }
-          }
-
-          const workspaceID = workspaceHandle.value.data.workspaceID
-
-          if (!(workspaceID in testData)) {
-            return {
-              type: "invalid",
-              reason: "WORKSPACE_NOT_PRESENT" as const,
-            }
-          }
-
-          return markRaw({
-            type: "ok",
-            data: {
-              providerID: this.providerID,
-              workspaceID,
-
-              loading: ref(false),
-
-              collections: computed(() => {
-                return testData[
-                  workspaceID as keyof typeof testData
-                ].collections.map((x, i) => ({
-                  collectionID: i.toString(),
-                  name: x.name,
-                }))
-              }),
-            },
-          })
-        })
-      )
-    )
-  }
-
-  public getWorkspaceCandidates() {
-    return computed(() =>
-      Object.keys(testData).map((workspaceID) => ({
-        id: workspaceID,
-        name: testData[workspaceID as keyof typeof testData].name,
-      }))
-    )
-  }
-}
--- a/packages/hoppscotch-common/src/services/new-workspace/view.ts
+++ b/packages/hoppscotch-common/src/services/new-workspace/view.ts
@@ -1,64 +0,0 @@
-import { HoppCollection, HoppRESTRequest } from "@hoppscotch/data"
-import { Ref } from "vue"
-import { HoppInheritedRESTProperty } from "~/helpers/types/HoppInheritedProperties"
-
-export type RESTCollectionLevelAuthHeadersView = {
-  auth: HoppInheritedRESTProperty["auth"]
-  headers: HoppInheritedRESTProperty["headers"]
-}
-
-export type RESTCollectionViewCollection = {
-  collectionID: string
-
-  isLastItem: boolean
-  name: string
-  parentCollectionID: string | null
-}
-
-export type RESTCollectionViewRequest = {
-  collectionID: string
-  requestID: string
-
-  request: HoppRESTRequest
-  isLastItem: boolean
-}
-
-export type RESTCollectionViewItem =
-  | { type: "collection"; value: RESTCollectionViewCollection }
-  | { type: "request"; value: RESTCollectionViewRequest }
-
-export interface RootRESTCollectionView {
-  providerID: string
-  workspaceID: string
-
-  loading: Ref<boolean>
-
-  collections: Ref<RESTCollectionViewCollection[]>
-}
-
-export interface RESTCollectionChildrenView {
-  providerID: string
-  workspaceID: string
-  collectionID: string
-
-  loading: Ref<boolean>
-
-  content: Ref<RESTCollectionViewItem[]>
-}
-
-export interface RESTSearchResultsView {
-  providerID: string
-  workspaceID: string
-
-  loading: Ref<boolean>
-
-  results: Ref<HoppCollection[]>
-  onSessionEnd: () => void
-}
-
-export interface RESTCollectionJSONView {
-  providerID: string
-  workspaceID: string
-
-  content: string
-}
--- a/packages/hoppscotch-common/src/services/new-workspace/workspace.ts
+++ b/packages/hoppscotch-common/src/services/new-workspace/workspace.ts
@@ -1,35 +0,0 @@
-import { HoppRESTRequest } from "@hoppscotch/data"
-import { Component } from "vue"
-
-export type Workspace = {
-  providerID: string
-  workspaceID: string
-
-  name: string
-}
-
-export type WorkspaceCollection = {
-  providerID: string
-  workspaceID: string
-  collectionID: string
-
-  name: string
-}
-
-export type WorkspaceRequest = {
-  providerID: string
-  workspaceID: string
-  collectionID: string
-  requestID: string
-
-  request: HoppRESTRequest
-}
-
-export type WorkspaceDecor = {
-  headerComponent?: Component
-
-  headerCurrentIcon?: Component | object
-
-  workspaceSelectorComponent?: Component
-  workspaceSelectorPriority?: number
-}
--- a/packages/hoppscotch-common/src/services/oauth/oauth.service.ts
+++ b/packages/hoppscotch-common/src/services/oauth/oauth.service.ts
@@ -109,6 +109,10 @@ export class OauthAuthService extends Service {
  public static readonly ID = "OAUTH_AUTH_SERVICE"

  static redirectURI = `${window.location.origin}/oauth`
+
+  constructor() {
+    super()
+  }
 }

 export const generateRandomString = () => {
--- a/packages/hoppscotch-common/src/services/persistence/tests/index.spec.ts
+++ b/packages/hoppscotch-common/src/services/persistence/tests/index.spec.ts
@@ -580,6 +580,8 @@ describe("PersistenceService", () => {

        invokeSetupLocalPersistence()

+        // toastErrorFn = vi.fn()
+
        expect(getItemSpy).toHaveBeenCalledWith(settingsKey)

        expect(toastErrorFn).not.toHaveBeenCalledWith(settingsKey)
--- a/packages/hoppscotch-common/src/services/persistence/index.ts
+++ b/packages/hoppscotch-common/src/services/persistence/index.ts
@@ -89,6 +89,10 @@ export class PersistenceService extends Service {

  public hoppLocalConfigStorage: StorageLike = localStorage

+  constructor() {
+    super()
+  }
+
  private showErrorToast(localStorageKey: string) {
    const toast = useToast()
    toast.error(
--- a/packages/hoppscotch-common/src/services/persistence/validation-schemas/index.ts
+++ b/packages/hoppscotch-common/src/services/persistence/validation-schemas/index.ts
@@ -492,15 +492,6 @@ const HoppRESTResponseSchema = z.discriminatedUnion("type", [

 const HoppRESTSaveContextSchema = z.nullable(
  z.discriminatedUnion("originLocation", [
-    z
-      .object({
-        originLocation: z.literal("workspace-user-collection"),
-        workspaceID: z.optional(z.string()),
-        providerID: z.optional(z.string()),
-        requestID: z.optional(z.string()),
-        requestHandle: z.optional(z.record(z.unknown())),
-      })
-      .strict(),
    z
      .object({
        originLocation: z.literal("user-collection"),
--- a/packages/hoppscotch-common/src/services/secret-environment.service.ts
+++ b/packages/hoppscotch-common/src/services/secret-environment.service.ts
@@ -27,6 +27,10 @@ export class SecretEnvironmentService extends Service {
   */
  public secretEnvironments = reactive(new Map<string, SecretVariable[]>())

+  constructor() {
+    super()
+  }
+
  /**
   * Add a new secret environment.
   * @param id ID of the environment
--- a/packages/hoppscotch-common/src/services/spotlight/searchers/base/tests/static.searcher.spec.ts
+++ b/packages/hoppscotch-common/src/services/spotlight/searchers/base/tests/static.searcher.spec.ts
@@ -6,7 +6,6 @@ import {
 import { nextTick, reactive, ref } from "vue"
 import { SpotlightSearcherResult } from "../../.."
 import { TestContainer } from "dioc/testing"
-import { Container } from "dioc"

 async function flushPromises() {
  return await new Promise((r) => setTimeout(r))
@@ -33,15 +32,12 @@ describe("StaticSpotlightSearcherService", () => {
        },
      })

-      // TODO: dioc > v3 does not recommend using constructors, move to onServiceInit
-      constructor(c: Container) {
-        super(c, {
+      constructor() {
+        super({
          searchFields: ["text"],
          fieldWeights: {},
        })
-      }

-      override onServiceInit() {
        this.setDocuments(this.documents)
      }

@@ -98,15 +94,12 @@ describe("StaticSpotlightSearcherService", () => {
        },
      })

-      // TODO: dioc > v3 does not recommend using constructors, move to onServiceInit
-      constructor(c: Container) {
-        super(c, {
+      constructor() {
+        super({
          searchFields: ["text"],
          fieldWeights: {},
        })
-      }

-      override onServiceInit() {
        this.setDocuments(this.documents)
      }

@@ -166,15 +159,12 @@ describe("StaticSpotlightSearcherService", () => {
        },
      })

-      // TODO: dioc > v3 does not recommend using constructors, move to onServiceInit
-      constructor(c: Container) {
-        super(c, {
+      constructor() {
+        super({
          searchFields: ["text"],
          fieldWeights: {},
        })
-      }

-      override onServiceInit() {
        this.setDocuments(this.documents)
      }

@@ -234,15 +224,12 @@ describe("StaticSpotlightSearcherService", () => {
        },
      })

-      // TODO: dioc > v3 does not recommend using constructors, move to onServiceInit
-      constructor(c: Container) {
-        super(c, {
+      constructor() {
+        super({
          searchFields: ["text"],
          fieldWeights: {},
        })
-      }

-      override onServiceInit() {
        this.setDocuments(this.documents)
      }

@@ -298,15 +285,12 @@ describe("StaticSpotlightSearcherService", () => {
        },
      })

-      // TODO: dioc > v3 does not recommend using constructors, move to onServiceInit
-      constructor(c: Container) {
-        super(c, {
+      constructor() {
+        super({
          searchFields: ["text"],
          fieldWeights: {},
        })
-      }

-      override onServiceInit() {
        this.setDocuments(this.documents)
      }

@@ -370,15 +354,12 @@ describe("StaticSpotlightSearcherService", () => {
        },
      })

-      // TODO: dioc > v3 does not recommend using constructors, move to onServiceInit
-      constructor(c: Container) {
-        super(c, {
+      constructor() {
+        super({
          searchFields: ["text", "alternate"],
          fieldWeights: {},
        })
-      }

-      override onServiceInit() {
        this.setDocuments(this.documents)
      }

--- a/packages/hoppscotch-common/src/services/spotlight/searchers/base/static.searcher.ts
+++ b/packages/hoppscotch-common/src/services/spotlight/searchers/base/static.searcher.ts
@@ -1,4 +1,4 @@
-import { Container, Service } from "dioc"
+import { Service } from "dioc"
 import {
  type SpotlightSearcher,
  type SpotlightSearcherResult,
@@ -67,12 +67,8 @@ export abstract class StaticSpotlightSearcherService<

  private _documents: Record<string, Doc> = {}

-  // TODO: This pattern is no longer recommended in dioc > 3, move to something else
-  constructor(
-    c: Container,
-    private opts: StaticSpotlightSearcherOptions<Doc>
-  ) {
-    super(c)
+  constructor(private opts: StaticSpotlightSearcherOptions<Doc>) {
+    super()

    this.minisearch = new MiniSearch({
      fields: opts.searchFields as string[],
--- a/packages/hoppscotch-common/src/services/spotlight/searchers/collections.searcher.ts
+++ b/packages/hoppscotch-common/src/services/spotlight/searchers/collections.searcher.ts
@@ -50,7 +50,9 @@ export class CollectionsSpotlightSearcherService
  private readonly spotlight = this.bind(SpotlightService)
  private readonly workspaceService = this.bind(WorkspaceService)

-  override onServiceInit() {
+  constructor() {
+    super()
+
    this.spotlight.registerSearcher(this)
  }

--- a/packages/hoppscotch-common/src/services/spotlight/searchers/environment.searcher.ts
+++ b/packages/hoppscotch-common/src/services/spotlight/searchers/environment.searcher.ts
@@ -26,7 +26,7 @@ import IconEdit from "~icons/lucide/edit"
 import IconLayers from "~icons/lucide/layers"
 import IconTrash2 from "~icons/lucide/trash-2"

-import { Container, Service } from "dioc"
+import { Service } from "dioc"
 import * as TE from "fp-ts/TaskEither"
 import { pipe } from "fp-ts/function"
 import { cloneDeep } from "lodash-es"
@@ -164,18 +164,15 @@ export class EnvironmentsSpotlightSearcherService extends StaticSpotlightSearche
    },
  })

-  // TODO: This pattern is no longer recommended in dioc > 3, move to something else
-  constructor(c: Container) {
-    super(c, {
+  constructor() {
+    super({
      searchFields: ["text", "alternates"],
      fieldWeights: {
        text: 2,
        alternates: 1,
      },
    })
-  }

-  override onServiceInit() {
    this.setDocuments(this.documents)
    this.spotlight.registerSearcher(this)
  }
@@ -280,7 +277,9 @@ export class SwitchEnvSpotlightSearcherService
  private readonly workspaceService = this.bind(WorkspaceService)
  private teamEnvironmentList: TeamEnvironment[] = []

-  override onServiceInit() {
+  constructor() {
+    super()
+
    this.spotlight.registerSearcher(this)
  }

--- a/packages/hoppscotch-common/src/services/spotlight/searchers/general.searcher.ts
+++ b/packages/hoppscotch-common/src/services/spotlight/searchers/general.searcher.ts
@@ -15,7 +15,6 @@ import IconBook from "~icons/lucide/book"
 import IconLifeBuoy from "~icons/lucide/life-buoy"
 import IconZap from "~icons/lucide/zap"
 import { platform } from "~/platform"
-import { Container } from "dioc"

 type Doc = {
  text: string | string[]
@@ -90,18 +89,15 @@ export class GeneralSpotlightSearcherService extends StaticSpotlightSearcherServ
    },
  })

-  // TODO: This is not recommended as of dioc > 3. Move to onServiceInit instead
-  constructor(c: Container) {
-    super(c, {
+  constructor() {
+    super({
      searchFields: ["text", "alternates"],
      fieldWeights: {
        text: 2,
        alternates: 1,
      },
    })
-  }

-  override onServiceInit() {
    this.setDocuments(this.documents)
    this.spotlight.registerSearcher(this)
  }
--- a/packages/hoppscotch-common/src/services/spotlight/searchers/history.searcher.ts
+++ b/packages/hoppscotch-common/src/services/spotlight/searchers/history.searcher.ts
@@ -66,7 +66,9 @@ export class HistorySpotlightSearcherService
    }
  )[0]

-  override onServiceInit() {
+  constructor() {
+    super()
+
    this.spotlight.registerSearcher(this)
  }

--- a/packages/hoppscotch-common/src/services/spotlight/searchers/interceptor.searcher.ts
+++ b/packages/hoppscotch-common/src/services/spotlight/searchers/interceptor.searcher.ts
@@ -31,7 +31,9 @@ export class InterceptorSpotlightSearcherService
  private readonly spotlight = this.bind(SpotlightService)
  private interceptorService = this.bind(InterceptorService)

-  override onServiceInit() {
+  constructor() {
+    super()
+
    this.spotlight.registerSearcher(this)
  }

--- a/packages/hoppscotch-common/src/services/spotlight/searchers/miscellaneous.searcher.ts
+++ b/packages/hoppscotch-common/src/services/spotlight/searchers/miscellaneous.searcher.ts
@@ -8,7 +8,6 @@ import {
 } from "./base/static.searcher"

 import IconShare from "~icons/lucide/share"
-import { Container } from "dioc"

 type Doc = {
  text: string
@@ -40,18 +39,15 @@ export class MiscellaneousSpotlightSearcherService extends StaticSpotlightSearch
    },
  })

-  // TODO: Constructors are no longer recommended as of dioc > 3, move to onServiceInit
-  constructor(c: Container) {
-    super(c, {
+  constructor() {
+    super({
      searchFields: ["text", "alternates"],
      fieldWeights: {
        text: 2,
        alternates: 1,
      },
    })
-  }

-  override onServiceInit() {
    this.setDocuments(this.documents)
    this.spotlight.registerSearcher(this)
  }
--- a/packages/hoppscotch-common/src/services/spotlight/searchers/navigation.searcher.ts
+++ b/packages/hoppscotch-common/src/services/spotlight/searchers/navigation.searcher.ts
@@ -8,7 +8,6 @@ import {
 } from "./base/static.searcher"

 import IconArrowRight from "~icons/lucide/arrow-right"
-import { Container } from "dioc"

 type Doc = {
  text: string
@@ -62,18 +61,15 @@ export class NavigationSpotlightSearcherService extends StaticSpotlightSearcherS

  private docKeys = Object.keys(this.documents)

-  // TODO: Constructors are no longer recommended as of dioc > 3, use onServiceInit instead
-  constructor(c: Container) {
-    super(c, {
+  constructor() {
+    super({
      searchFields: ["text", "alternates"],
      fieldWeights: {
        text: 2,
        alternates: 1,
      },
    })
-  }

-  override onServiceInit() {
    this.setDocuments(this.documents)
    this.spotlight.registerSearcher(this)
  }
--- a/packages/hoppscotch-common/src/services/spotlight/searchers/request.searcher.ts
+++ b/packages/hoppscotch-common/src/services/spotlight/searchers/request.searcher.ts
@@ -20,7 +20,6 @@ import IconRotateCCW from "~icons/lucide/rotate-ccw"
 import IconSave from "~icons/lucide/save"
 import { GQLOptionTabs } from "~/components/graphql/RequestOptions.vue"
 import { RESTTabService } from "~/services/tab/rest"
-import { Container } from "dioc"

 type Doc = {
  text: string | string[]
@@ -225,18 +224,15 @@ export class RequestSpotlightSearcherService extends StaticSpotlightSearcherServ
    },
  })

-  // TODO: Constructors are no longer recommended as of dioc > 3, use onServiceInit instead
-  constructor(c: Container) {
-    super(c, {
+  constructor() {
+    super({
      searchFields: ["text", "alternates"],
      fieldWeights: {
        text: 2,
        alternates: 1,
      },
    })
-  }

-  override onServiceInit() {
    this.setDocuments(this.documents)
    this.spotlight.registerSearcher(this)
  }
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Balu Babu	bc562e547e	Merge branch 'release/2024.3.2' into fix/sh-email-handlebar-issue	2024-04-29 11:52:33 +05:30
Balu Babu	e9c9dc19bf	fix: resolved mailer module email issue	2024-04-23 16:22:34 +05:30