fix: add @click on row instead on cell

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

.env.example

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

.prettierrc.js

@@ -1,3 +1,8 @@
 module.exports = {
-  semi: false
+  semi: false,
+  trailingComma: "es5",
+  singleQuote: false,
+  printWidth: 80,
+  useTabs: false,
+  tabWidth: 2
 }

packages/codemirror-lang-graphql/package.json

@@ -17,12 +17,12 @@
   "types": "dist/index.d.ts",
   "sideEffects": false,
   "dependencies": {
-    "@codemirror/language": "^6.2.0",
-    "@lezer/highlight": "^1.0.0",
-    "@lezer/lr": "^1.2.0"
+    "@codemirror/language": "^6.9.0",
+    "@lezer/highlight": "^1.1.6",
+    "@lezer/lr": "^1.3.10"
   },
   "devDependencies": {
-    "@lezer/generator": "^1.1.0",
+    "@lezer/generator": "^1.5.0",
     "mocha": "^9.2.2",
     "rollup": "^2.70.2",
     "rollup-plugin-dts": "^4.2.1",

packages/dioc/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

packages/dioc/README.md

@@ -0,0 +1,141 @@
+# dioc
+
+A small and lightweight dependency injection / inversion of control system.
+
+### About
+
+`dioc` is a really simple **DI/IOC** system where you write services (which are singletons per container) that can depend on each other and emit events that can be listened upon.
+
+### Demo
+
+```ts
+import { Service, Container } from "dioc"
+
+// Here is a simple service, which you can define by extending the Service class
+// and providing an ID static field (of type string)
+export class PersistenceService extends Service {
+  // This should be unique for each container
+  public static ID = "PERSISTENCE_SERVICE"
+
+  public read(key: string): string | undefined {
+    // ...
+  }
+
+  public write(key: string, value: string) {
+    // ...
+  }
+}
+
+type TodoServiceEvent =
+  | { type: "TODO_CREATED"; index: number }
+  | { type: "TODO_DELETED"; index: number }
+
+// Services have a built in event system
+// Define the generic argument to say what are the possible emitted values
+export class TodoService extends Service<TodoServiceEvent> {
+  public static ID = "TODO_SERVICE"
+
+  // Inject persistence service into this service
+  private readonly persistence = this.bind(PersistenceService)
+
+  public todos = []
+
+  // Service constructors cannot have arguments
+  constructor() {
+    super()
+
+    this.todos = JSON.parse(this.persistence.read("todos") ?? "[]")
+  }
+
+  public addTodo(text: string) {
+    // ...
+
+    // You can access services via the bound fields
+    this.persistence.write("todos", JSON.stringify(this.todos))
+
+    // This is how you emit an event
+    this.emit({
+      type: "TODO_CREATED",
+      index,
+    })
+  }
+
+  public removeTodo(index: number) {
+    // ...
+
+    this.emit({
+      type: "TODO_DELETED",
+      index,
+    })
+  }
+}
+
+// Services need a container to run in
+const container = new Container()
+
+// You can initialize and get services using Container#bind
+// It will automatically initialize the service (and its dependencies)
+const todoService = container.bind(TodoService) // Returns an instance of TodoService
+```
+
+### Demo (Unit Test)
+
+`dioc/testing` contains `TestContainer` which lets you bind mocked services to the container.
+
+```ts
+import { TestContainer } from "dioc/testing"
+import { TodoService, PersistenceService } from "./demo.ts" // The above demo code snippet
+import { describe, it, expect, vi } from "vitest"
+
+describe("TodoService", () => {
+  it("addTodo writes to persistence", () => {
+    const container = new TestContainer()
+
+    const writeFn = vi.fn()
+
+    // The first parameter is the service to mock and the second parameter
+    // is the mocked service fields and functions
+    container.bindMock(PersistenceService, {
+      read: () => undefined, // Not really important for this test
+      write: writeFn,
+    })
+
+    // the peristence service bind in TodoService will now use the
+    // above defined mocked implementation
+    const todoService = container.bind(TodoService)
+
+    todoService.addTodo("sup")
+
+    expect(writeFn).toHaveBeenCalledOnce()
+    expect(writeFn).toHaveBeenCalledWith("todos", JSON.stringify(["sup"]))
+  })
+})
+```
+
+### Demo (Vue)
+
+`dioc/vue` contains a Vue Plugin and a `useService` composable that allows Vue components to use the defined services.
+
+In the app entry point:
+
+```ts
+import { createApp } from "vue"
+import { diocPlugin } from "dioc/vue"
+
+const app = createApp()
+
+app.use(diocPlugin, {
+  container: new Container(), // You can pass in the container you want to provide to the components here
+})
+```
+
+In your Vue components:
+
+```vue
+<script setup>
+import { TodoService } from "./demo.ts" // The above demo
+import { useService } from "dioc/vue"
+
+const todoService = useService(TodoService) // Returns an instance of the TodoService class
+</script>
+```

packages/dioc/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./dist/main.d.ts"
+export * from "./dist/main.d.ts"

packages/dioc/lib/container.ts

@@ -0,0 +1,147 @@
+import { Service } from "./service"
+import { Observable, Subject } from 'rxjs'
+
+/**
+ * Stores the current container instance in the current operating context.
+ *
+ * NOTE: This should not be used outside of dioc library code
+ */
+export let currentContainer: Container | null = null
+
+/**
+ * The events emitted by the container
+ *
+ * `SERVICE_BIND` - emitted when a service is bound to the container directly or as a dependency to another service
+ * `SERVICE_INIT` - emitted when a service is initialized
+ */
+export type ContainerEvent =
+  | {
+    type: 'SERVICE_BIND';
+
+    /** The Service ID of the service being bounded (the dependency) */
+    boundeeID: string;
+
+    /**
+     * The Service ID of the bounder that is binding the boundee (the dependent)
+     *
+     * NOTE: This will be undefined if the service is bound directly to the container
+     */
+    bounderID: string | undefined
+  }
+  | {
+    type: 'SERVICE_INIT';
+
+    /** The Service ID of the service being initialized */
+    serviceID: string
+  }
+
+/**
+ * The dependency injection container, allows for services to be initialized and maintains the dependency trees.
+ */
+export class Container {
+  /** Used during the `bind` operation to detect circular dependencies */
+  private bindStack: string[] = []
+
+  /** The map of bound services to their IDs */
+  protected boundMap = new Map<string, Service<unknown>>()
+
+  /** The RxJS observable representing the event stream */
+  protected event$ = new Subject<ContainerEvent>()
+
+  /**
+   * Returns whether a container has the given service bound
+   * @param service The service to check for
+   */
+  public hasBound<
+    T extends typeof Service<any> & { ID: string }
+  >(service: T): boolean {
+    return this.boundMap.has(service.ID)
+  }
+
+  /**
+   * Returns the service bound to the container with the given ID or if not found, undefined.
+   *
+   * NOTE: This is an advanced method and should not be used as much as possible.
+   *
+   * @param serviceID The ID of the service to get
+   */
+  public getBoundServiceWithID(serviceID: string): Service<unknown> | undefined {
+    return this.boundMap.get(serviceID)
+  }
+
+  /**
+   * Binds a service to the container. This is equivalent to marking a service as a dependency.
+   * @param service The class reference of a service to bind
+   * @param bounder The class reference of the service that is binding the service (if bound directly to the container, this should be undefined)
+   */
+  public bind<T extends typeof Service<any> & { ID: string }>(
+    service: T,
+    bounder: ((typeof Service<T>) & { ID: string }) | undefined = undefined
+  ): InstanceType<T> {
+    // We need to store the current container in a variable so that we can restore it after the bind operation
+    const oldCurrentContainer = currentContainer;
+    currentContainer = this;
+
+    // If the service is already bound, return the existing instance
+    if (this.hasBound(service)) {
+      this.event$.next({
+        type: 'SERVICE_BIND',
+        boundeeID: service.ID,
+        bounderID: bounder?.ID // Return the bounder ID if it is defined, else assume its the container
+      })
+
+      return this.boundMap.get(service.ID) as InstanceType<T> // Casted as InstanceType<T> because service IDs and types are expected to match
+    }
+
+    // Detect circular dependency and throw error
+    if (this.bindStack.findIndex((serviceID) => serviceID === service.ID) !== -1) {
+      const circularServices = `${this.bindStack.join(' -> ')} -> ${service.ID}`
+
+      throw new Error(`Circular dependency detected.\nChain: ${circularServices}`)
+    }
+
+    // Push the service ID onto the bind stack to detect circular dependencies
+    this.bindStack.push(service.ID)
+
+    // Initialize the service and emit events
+
+    // NOTE: We need to cast the service to any as TypeScript thinks that the service is abstract
+    const instance: Service<any> = new (service as any)()
+
+    this.boundMap.set(service.ID, instance)
+
+    this.bindStack.pop()
+
+    this.event$.next({
+      type: 'SERVICE_INIT',
+      serviceID: service.ID,
+    })
+
+    this.event$.next({
+      type: 'SERVICE_BIND',
+      boundeeID: service.ID,
+      bounderID: bounder?.ID
+    })
+
+
+    // Restore the current container
+    currentContainer = oldCurrentContainer;
+
+    // We expect the return type to match the service definition
+    return instance as InstanceType<T>
+  }
+
+  /**
+   * Returns an iterator of the currently bound service IDs and their instances
+   */
+  public getBoundServices(): IterableIterator<[string, Service<any>]> {
+    return this.boundMap.entries()
+  }
+
+  /**
+   * Returns the public container event stream
+   */
+  public getEventStream(): Observable<ContainerEvent> {
+    return this.event$.asObservable()
+  }
+}

packages/dioc/lib/main.ts

@@ -0,0 +1,2 @@
+export * from "./container"
+export * from "./service"

packages/dioc/lib/service.ts

@@ -0,0 +1,65 @@
+import { Observable, Subject } from 'rxjs'
+import { Container, currentContainer } from './container'
+
+/**
+ * A Dioc service that can bound to a container and can bind dependency services.
+ *
+ * NOTE: Services cannot have a constructor that takes arguments.
+ *
+ * @template EventDef The type of events that can be emitted by the service. These will be accessible by event streams
+ */
+export abstract class Service<EventDef = {}> {
+
+  /**
+   * The internal event stream of the service
+   */
+  private event$ = new Subject<EventDef>()
+
+  /** The container the service is bound to */
+  #container: Container
+
+  constructor() {
+    if (!currentContainer) {
+      throw new Error(
+        `Tried to initialize service with no container (ID: ${ (this.constructor as any).ID })`
+      )
+    }
+
+    this.#container = currentContainer
+  }
+
+  /**
+   * Binds a dependency service into this service.
+   * @param service The class reference of the service to bind
+   */
+  protected bind<T extends typeof Service<any> & { ID: string }>(service: T): InstanceType<T> {
+    if (!currentContainer) {
+      throw new Error('No currentContainer defined.')
+    }
+
+    return currentContainer.bind(service, this.constructor as typeof Service<any> & { ID: string })
+  }
+
+  /**
+   * Returns the container the service is bound to
+   */
+  protected getContainer(): Container {
+    return this.#container
+  }
+
+  /**
+   * Emits an event on the service's event stream
+   * @param event The event to emit
+   */
+  protected emit(event: EventDef) {
+    this.event$.next(event)
+  }
+
+  /**
+   * Returns the event stream of the service
+   */
+  public getEventStream(): Observable<EventDef> {
+
+    return this.event$.asObservable()
+  }
+}

packages/dioc/lib/testing.ts

@@ -0,0 +1,33 @@
+import { Container, Service } from "./main";
+
+/**
+ * A container that can be used for writing tests, contains additional methods
+ * for binding suitable for writing tests. (see `bindMock`).
+ */
+export class TestContainer extends Container {
+
+  /**
+   * Binds a mock service to the container.
+   *
+   * @param service
+   * @param mock
+   */
+  public bindMock<
+    T extends typeof Service<any> & { ID: string },
+    U extends Partial<InstanceType<T>>
+  >(service: T, mock: U): U {
+    if (this.boundMap.has(service.ID)) {
+      throw new Error(`Service '${service.ID}' already bound to container. Did you already call bindMock on this ?`)
+    }
+
+    this.boundMap.set(service.ID, mock as any)
+
+    this.event$.next({
+      type: "SERVICE_BIND",
+      boundeeID: service.ID,
+      bounderID: undefined,
+    })
+
+    return mock
+  }
+}

packages/dioc/lib/vue.ts

@@ -0,0 +1,34 @@
+import { Plugin, inject } from "vue"
+import { Container } from "./container"
+import { Service } from "./service"
+
+const VUE_CONTAINER_KEY = Symbol()
+
+// TODO: Some Vue version issue with plugin generics is breaking type checking
+/**
+ * The Vue Dioc Plugin, this allows the composables to work and access the container
+ *
+ * NOTE: Make sure you add `vue` as dependency to be able to use this plugin (duh)
+ */
+export const diocPlugin: Plugin = {
+  install(app, { container }) {
+    app.provide(VUE_CONTAINER_KEY, container)
+  }
+}
+
+/**
+ * A composable that binds a service to a Vue Component
+ *
+ * @param service The class reference of the service to bind
+ */
+export function useService<
+  T extends typeof Service<any> & { ID: string }
+>(service: T): InstanceType<T> {
+  const container = inject(VUE_CONTAINER_KEY) as Container | undefined | null
+
+  if (!container) {
+    throw new Error("Container not found, did you forget to install the dioc plugin?")
+  }
+
+  return container.bind(service)
+}

packages/dioc/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "dioc",
+  "private": true,
+  "version": "0.1.0",
+  "type": "module",
+  "files": [
+    "dist",
+    "index.d.ts"
+  ],
+  "main": "./dist/counter.umd.cjs",
+  "module": "./dist/counter.js",
+  "types": "./index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/main.d.ts",
+      "require": "./dist/index.cjs",
+      "import": "./dist/index.js"
+    },
+    "./vue": {
+      "types": "./dist/vue.d.ts",
+      "require": "./dist/vue.cjs",
+      "import": "./dist/vue.js"
+    },
+    "./testing": {
+      "types": "./dist/testing.d.ts",
+      "require": "./dist/testing.cjs",
+      "import": "./dist/testing.js"
+    }
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build && tsc --emitDeclarationOnly",
+    "prepare": "pnpm run build",
+    "test": "vitest run",
+    "do-test": "pnpm run test",
+    "test:watch": "vitest"
+  },
+  "devDependencies": {
+    "typescript": "^4.9.4",
+    "vite": "^4.0.4",
+    "vitest": "^0.29.3"
+  },
+  "dependencies": {
+    "rxjs": "^7.8.1"
+  },
+  "peerDependencies": {
+    "vue": "^3.2.25"
+  },
+  "peerDependenciesMeta": {
+    "vue": {
+      "optional": true
+    }
+  }
+}

packages/dioc/test/container.spec.ts

@@ -0,0 +1,262 @@
+import { it, expect, describe, vi } from "vitest"
+import { Service } from "../lib/service"
+import { Container, currentContainer, ContainerEvent } from "../lib/container"
+
+class TestServiceA extends Service {
+  public static ID = "TestServiceA"
+}
+
+class TestServiceB extends Service {
+  public static ID = "TestServiceB"
+
+  // Marked public to allow for testing
+  public readonly serviceA = this.bind(TestServiceA)
+}
+
+describe("Container", () => {
+  describe("getBoundServiceWithID", () => {
+    it("returns the service instance if it is bound to the container", () => {
+      const container = new Container()
+
+      const service = container.bind(TestServiceA)
+
+      expect(container.getBoundServiceWithID(TestServiceA.ID)).toBe(service)
+    })
+
+    it("returns undefined if the service is not bound to the container", () => {
+      const container = new Container()
+
+      expect(container.getBoundServiceWithID(TestServiceA.ID)).toBeUndefined()
+    })
+  })
+
+  describe("bind", () => {
+    it("correctly binds the service to it", () => {
+      const container = new Container()
+
+      const service = container.bind(TestServiceA)
+
+      // @ts-expect-error getContainer is defined as a protected property, but we are leveraging it here to check
+      expect(service.getContainer()).toBe(container)
+    })
+
+    it("after bind, the current container is set back to its previous value", () => {
+      const originalValue = currentContainer
+
+      const container = new Container()
+      container.bind(TestServiceA)
+
+      expect(currentContainer).toBe(originalValue)
+    })
+
+    it("dependent services are registered in the same container", () => {
+      const container = new Container()
+
+      const serviceB = container.bind(TestServiceB)
+
+      // @ts-expect-error getContainer is defined as a protected property, but we are leveraging it here to check
+      expect(serviceB.serviceA.getContainer()).toBe(container)
+    })
+
+    it("binding an already initialized service returns the initialized instance (services are singletons)", () => {
+      const container = new Container()
+
+      const serviceA = container.bind(TestServiceA)
+      const serviceA2 = container.bind(TestServiceA)
+
+      expect(serviceA).toBe(serviceA2)
+    })
+
+    it("binding a service which is a dependency of another service returns the same instance created from the dependency resolution (services are singletons)", () => {
+      const container = new Container()
+
+      const serviceB = container.bind(TestServiceB)
+      const serviceA = container.bind(TestServiceA)
+
+      expect(serviceB.serviceA).toBe(serviceA)
+    })
+
+    it("binding an initialized service as a dependency returns the same instance", () => {
+      const container = new Container()
+
+      const serviceA = container.bind(TestServiceA)
+      const serviceB = container.bind(TestServiceB)
+
+      expect(serviceB.serviceA).toBe(serviceA)
+    })
+
+    it("container emits an init event when an uninitialized service is initialized via bind and event only called once", () => {
+      const container = new Container()
+
+      const serviceFunc = vi.fn<
+        [ContainerEvent & { type: "SERVICE_INIT" }],
+        void
+      >()
+
+      container.getEventStream().subscribe((ev) => {
+        if (ev.type === "SERVICE_INIT") {
+          serviceFunc(ev)
+        }
+      })
+
+      const instance = container.bind(TestServiceA)
+
+      expect(serviceFunc).toHaveBeenCalledOnce()
+      expect(serviceFunc).toHaveBeenCalledWith(<ContainerEvent>{
+        type: "SERVICE_INIT",
+        serviceID: TestServiceA.ID,
+      })
+    })
+
+    it("the bind event emitted has an undefined bounderID when the service is bound directly to the container", () => {
+      const container = new Container()
+
+      const serviceFunc = vi.fn<
+        [ContainerEvent & { type: "SERVICE_BIND" }],
+        void
+      >()
+
+      container.getEventStream().subscribe((ev) => {
+        if (ev.type === "SERVICE_BIND") {
+          serviceFunc(ev)
+        }
+      })
+
+      container.bind(TestServiceA)
+
+      expect(serviceFunc).toHaveBeenCalledOnce()
+      expect(serviceFunc).toHaveBeenCalledWith(<ContainerEvent>{
+        type: "SERVICE_BIND",
+        boundeeID: TestServiceA.ID,
+        bounderID: undefined,
+      })
+    })
+
+    it("the bind event emitted has the correct bounderID when the service is bound to another service", () => {
+      const container = new Container()
+
+      const serviceFunc = vi.fn<
+        [ContainerEvent & { type: "SERVICE_BIND" }],
+        void
+      >()
+
+      container.getEventStream().subscribe((ev) => {
+        // We only care about the bind event of TestServiceA
+        if (ev.type === "SERVICE_BIND" && ev.boundeeID === TestServiceA.ID) {
+          serviceFunc(ev)
+        }
+      })
+
+      container.bind(TestServiceB)
+
+      expect(serviceFunc).toHaveBeenCalledOnce()
+      expect(serviceFunc).toHaveBeenCalledWith(<ContainerEvent>{
+        type: "SERVICE_BIND",
+        boundeeID: TestServiceA.ID,
+        bounderID: TestServiceB.ID,
+      })
+    })
+  })
+
+  describe("hasBound", () => {
+    it("returns true if the given service is bound to the container", () => {
+      const container = new Container()
+
+      container.bind(TestServiceA)
+
+      expect(container.hasBound(TestServiceA)).toEqual(true)
+    })
+
+    it("returns false if the given service is not bound to the container", () => {
+      const container = new Container()
+
+      expect(container.hasBound(TestServiceA)).toEqual(false)
+    })
+
+    it("returns true when the service is bound because it is a dependency of another service", () => {
+      const container = new Container()
+
+      container.bind(TestServiceB)
+
+      expect(container.hasBound(TestServiceA)).toEqual(true)
+    })
+  })
+
+  describe("getEventStream", () => {
+    it("returns an observable which emits events correctly when services are initialized", () => {
+      const container = new Container()
+
+      const serviceFunc = vi.fn<
+        [ContainerEvent & { type: "SERVICE_INIT" }],
+        void
+      >()
+
+      container.getEventStream().subscribe((ev) => {
+        if (ev.type === "SERVICE_INIT") {
+          serviceFunc(ev)
+        }
+      })
+
+      container.bind(TestServiceB)
+
+      expect(serviceFunc).toHaveBeenCalledTimes(2)
+      expect(serviceFunc).toHaveBeenNthCalledWith(1, <ContainerEvent>{
+        type: "SERVICE_INIT",
+        serviceID: TestServiceA.ID,
+      })
+      expect(serviceFunc).toHaveBeenNthCalledWith(2, <ContainerEvent>{
+        type: "SERVICE_INIT",
+        serviceID: TestServiceB.ID,
+      })
+    })
+
+    it("returns an observable which emits events correctly when services are bound", () => {
+      const container = new Container()
+
+      const serviceFunc = vi.fn<
+        [ContainerEvent & { type: "SERVICE_BIND" }],
+        void
+      >()
+
+      container.getEventStream().subscribe((ev) => {
+        if (ev.type === "SERVICE_BIND") {
+          serviceFunc(ev)
+        }
+      })
+
+      container.bind(TestServiceB)
+
+      expect(serviceFunc).toHaveBeenCalledTimes(2)
+      expect(serviceFunc).toHaveBeenNthCalledWith(1, <ContainerEvent>{
+        type: "SERVICE_BIND",
+        boundeeID: TestServiceA.ID,
+        bounderID: TestServiceB.ID,
+      })
+      expect(serviceFunc).toHaveBeenNthCalledWith(2, <ContainerEvent>{
+        type: "SERVICE_BIND",
+        boundeeID: TestServiceB.ID,
+        bounderID: undefined,
+      })
+    })
+  })
+
+  describe("getBoundServices", () => {
+    it("returns an iterator over all services bound to the container in the format [service id, service instance]", () => {
+      const container = new Container()
+
+      const instanceB = container.bind(TestServiceB)
+      const instanceA = instanceB.serviceA
+
+      expect(Array.from(container.getBoundServices())).toEqual([
+        [TestServiceA.ID, instanceA],
+        [TestServiceB.ID, instanceB],
+      ])
+    })
+
+    it("returns an empty iterator if no services are bound", () => {
+      const container = new Container()
+
+      expect(Array.from(container.getBoundServices())).toEqual([])
+    })
+  })
+})

packages/dioc/test/service.spec.ts

@@ -0,0 +1,66 @@
+import { describe, expect, it, vi } from "vitest"
+import { Service, Container } from "../lib/main"
+
+class TestServiceA extends Service {
+  public static ID = "TestServiceA"
+}
+
+class TestServiceB extends Service<"test"> {
+  public static ID = "TestServiceB"
+
+  // Marked public to allow for testing
+  public readonly serviceA = this.bind(TestServiceA)
+
+  public emitTestEvent() {
+    this.emit("test")
+  }
+}
+
+describe("Service", () => {
+  describe("constructor", () => {
+    it("throws an error if the service is initialized without a container", () => {
+      expect(() => new TestServiceA()).toThrowError(
+        "Tried to initialize service with no container (ID: TestServiceA)"
+      )
+    })
+  })
+
+  describe("bind", () => {
+    it("correctly binds the dependency service using the container", () => {
+      const container = new Container()
+
+      const serviceA = container.bind(TestServiceA)
+
+      const serviceB = container.bind(TestServiceB)
+      expect(serviceB.serviceA).toBe(serviceA)
+    })
+  })
+
+  describe("getContainer", () => {
+    it("returns the container the service is bound to", () => {
+      const container = new Container()
+
+      const serviceA = container.bind(TestServiceA)
+
+      // @ts-expect-error getContainer is a protected member, we are just using it to help with testing
+      expect(serviceA.getContainer()).toBe(container)
+    })
+  })
+
+  describe("getEventStream", () => {
+    it("returns the valid event stream of the service", () => {
+      const container = new Container()
+
+      const serviceB = container.bind(TestServiceB)
+
+      const serviceFunc = vi.fn()
+
+      serviceB.getEventStream().subscribe(serviceFunc)
+
+      serviceB.emitTestEvent()
+
+      expect(serviceFunc).toHaveBeenCalledOnce()
+      expect(serviceFunc).toHaveBeenCalledWith("test")
+    })
+  })
+})

packages/dioc/test/test-container.spec.ts

@@ -0,0 +1,92 @@
+import { describe, expect, it, vi } from "vitest"
+import { TestContainer } from "../lib/testing"
+import { Service } from "../lib/service"
+import { ContainerEvent } from "../lib/container"
+
+class TestServiceA extends Service {
+  public static ID = "TestServiceA"
+
+  public test() {
+    return "real"
+  }
+}
+
+class TestServiceB extends Service {
+  public static ID = "TestServiceB"
+
+  // declared public to help with testing
+  public readonly serviceA = this.bind(TestServiceA)
+
+  public test() {
+    return this.serviceA.test()
+  }
+}
+
+describe("TestContainer", () => {
+  describe("bindMock", () => {
+    it("returns the fake service defined", () => {
+      const container = new TestContainer()
+
+      const fakeService = {
+        test: () => "fake",
+      }
+
+      const result = container.bindMock(TestServiceA, fakeService)
+
+      expect(result).toBe(fakeService)
+    })
+
+    it("new services bound to the container get the mock service", () => {
+      const container = new TestContainer()
+
+      const fakeServiceA = {
+        test: () => "fake",
+      }
+
+      container.bindMock(TestServiceA, fakeServiceA)
+
+      const serviceB = container.bind(TestServiceB)
+
+      expect(serviceB.serviceA).toBe(fakeServiceA)
+    })
+
+    it("container emits SERVICE_BIND event", () => {
+      const container = new TestContainer()
+
+      const fakeServiceA = {
+        test: () => "fake",
+      }
+
+      const serviceFunc = vi.fn<[ContainerEvent, void]>()
+
+      container.getEventStream().subscribe((ev) => {
+        serviceFunc(ev)
+      })
+
+      container.bindMock(TestServiceA, fakeServiceA)
+
+      expect(serviceFunc).toHaveBeenCalledOnce()
+      expect(serviceFunc).toHaveBeenCalledWith(<ContainerEvent>{
+        type: "SERVICE_BIND",
+        boundeeID: TestServiceA.ID,
+        bounderID: undefined,
+      })
+    })
+
+    it("throws if service already bound", () => {
+      const container = new TestContainer()
+
+      const fakeServiceA = {
+        test: () => "fake",
+      }
+
+      container.bindMock(TestServiceA, fakeServiceA)
+
+      expect(() => {
+        container.bindMock(TestServiceA, fakeServiceA)
+      }).toThrowError(
+        "Service 'TestServiceA' already bound to container. Did you already call bindMock on this ?"
+      )
+    })
+  })
+})

packages/dioc/testing.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./dist/testing.d.ts"
+export * from "./dist/testing.d.ts"

packages/dioc/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ESNext", "DOM"],
+    "moduleResolution": "Node",
+    "strict": true,
+    "declaration": true,
+    "sourceMap": true,
+    "outDir": "dist",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noImplicitReturns": true,
+    "skipLibCheck": true
+  },
+  "include": ["lib"]
+}

packages/dioc/vite.config.ts

@@ -0,0 +1,16 @@
+import { defineConfig } from 'vite'
+
+export default defineConfig({
+  build: {
+    lib: {
+      entry: {
+        index: './lib/main.ts',
+        vue: './lib/vue.ts',
+        testing: './lib/testing.ts',
+      },
+    },
+    rollupOptions: {
+      external: ['vue'],
+    }
+  },
+})

packages/dioc/vitest.config.ts

@@ -0,0 +1,7 @@
+import { defineConfig } from "vitest/config"
+
+export default defineConfig({
+  test: {
+
+  }
+})

packages/dioc/vue.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./dist/vue.d.ts"
+export * from "./dist/vue.d.ts"

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

packages/hoppscotch-backend/src/errors.ts

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

packages/hoppscotch-backend/src/main.ts

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

packages/hoppscotch-backend/src/team-invitation/team-invite-viewer.guard.ts

@@ -15,7 +15,7 @@ import { TeamService } from 'src/team/team.service';
  * This guard only allows user to execute the resolver
  * 1. If user is invitee, allow
  * 2. Or else, if user is team member, allow
- * 
+ *
  * TLDR: Allow if user is invitee or team member
  */
 @Injectable()

packages/hoppscotch-backend/src/utils.ts

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

packages/hoppscotch-common/.eslintrc.js

@@ -6,7 +6,6 @@ module.exports = {
   env: {
     browser: true,
     node: true,
-    jest: true,
   },
   parserOptions: {
     sourceType: "module",
@@ -30,8 +29,18 @@ module.exports = {
     "import/named": "off", // because, named import issue with typescript see: https://github.com/typescript-eslint/typescript-eslint/issues/154
     "no-console": "off",
     "no-debugger": process.env.HOPP_LINT_FOR_PROD === "true" ? "error" : "warn",
-    "prettier/prettier":
+    "prettier/prettier": [
       process.env.HOPP_LINT_FOR_PROD === "true" ? "error" : "warn",
+      {},
+      {
+        semi: false,
+        trailingComma: "es5",
+        singleQuote: false,
+        printWidth: 80,
+        useTabs: false,
+        tabWidth: 2,
+      },
+    ],
     "vue/multi-word-component-names": "off",
     "vue/no-side-effects-in-computed-properties": "off",
     "import/no-named-as-default": "off",

packages/hoppscotch-common/.prettierrc.js

@@ -1,3 +1,8 @@
 module.exports = {
-  semi: false
+  semi: false,
+  trailingComma: "es5",
+  singleQuote: false,
+  printWidth: 80,
+  useTabs: false,
+  tabWidth: 2
 }

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

@@ -4,6 +4,7 @@
   @apply after:backface-hidden;
   @apply selection:bg-accentDark;
   @apply selection:text-accentContrast;
+  @apply overscroll-none;
 }
 
 :root {
@@ -189,10 +190,11 @@ a {
   @apply border-solid border-dividerDark;
   @apply rounded;
   @apply shadow-lg;
+  @apply max-w-[45vw] #{!important};
 
   .tippy-content {
     @apply flex flex-col;
-    @apply max-h-56;
+    @apply max-h-[45vh];
     @apply items-stretch;
     @apply overflow-y-auto;
     @apply text-secondary text-body;
@@ -200,6 +202,10 @@ a {
     @apply leading-normal;
     @apply focus:outline-none;
     scroll-behavior: smooth;
+
+    & > span {
+      @apply block #{!important};
+    }
   }
 
   .tippy-svg-arrow {
@@ -215,6 +221,7 @@ a {
 
 [data-v-tippy] {
   @apply flex flex-1;
+  @apply truncate;
 }
 
 [interactive] > div {
@@ -567,3 +574,11 @@ details[open] summary .indicator {
   @apply rounded;
   @apply border-0;
 }
+
+.gql-operation-not-highlight {
+  opacity: 0.5;
+}
+
+.gql-operation-highlight {
+  opacity: 1;
+}

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

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

packages/hoppscotch-common/locales/en.json

@@ -4,6 +4,7 @@
     "cancel": "Cancel",
     "choose_file": "Choose a file",
     "clear": "Clear",
+    "clear_history": "Clear All History",
     "clear_all": "Clear all",
     "close": "Close",
     "connect": "Connect",
@@ -30,6 +31,7 @@
     "open_workspace": "Open workspace",
     "paste": "Paste",
     "prettify": "Prettify",
+    "rename": "Rename",
     "remove": "Remove",
     "restore": "Restore",
     "save": "Save",
@@ -67,6 +69,8 @@
     "invite": "Invite",
     "invite_description": "Hoppscotch is an open source API development ecosystem. We designed a simple and intuitive interface for creating and managing your APIs. Hoppscotch is a tool that helps you build, test, document and share your APIs.",
     "invite_your_friends": "Invite your friends",
+    "social_links": "Social links",
+    "social_description": "Follow us on social media to stay updated with the latest news, updates and releases.",
     "join_discord_community": "Join our Discord community",
     "keyboard_shortcuts": "Keyboard shortcuts",
     "name": "Hoppscotch",
@@ -131,6 +135,7 @@
     "renamed": "Collection renamed",
     "request_in_use": "Request in use",
     "save_as": "Save as",
+    "save_to_collection": "Save to Collection",
     "select": "Select a Collection",
     "select_location": "Select location",
     "select_team": "Select a team",
@@ -148,8 +153,15 @@
     "remove_telemetry": "Are you sure you want to opt-out of Telemetry?",
     "request_change": "Are you sure you want to discard current request, unsaved changes will be lost.",
     "save_unsaved_tab": "Do you want to save changes made in this tab?",
+    "close_unsaved_tab": "Are you sure you want to close this tab?",
+    "close_unsaved_tabs": "Are you sure you want to close all tabs? {count} unsaved tabs will be lost.",
     "sync": "Would you like to restore your workspace from cloud? This will discard your local progress."
   },
+  "context_menu": {
+    "set_environment_variable": "Set as variable",
+    "add_parameter": "Add to parameter",
+    "open_link_in_new_tab": "Open link in new tab"
+  },
   "count": {
     "header": "Header {count}",
     "message": "Message {count}",
@@ -173,6 +185,7 @@
     "folder": "Folder is empty",
     "headers": "This request does not have any headers",
     "history": "History is empty",
+    "history_suggestions": "History does not have any matching entries",
     "invites": "Invite list is empty",
     "members": "Team is empty",
     "parameters": "This request does not have any parameters",
@@ -182,6 +195,7 @@
     "schema": "Connect to a GraphQL endpoint to view schema",
     "shortcodes": "Shortcodes are empty",
     "subscription": "Subscriptions are empty",
+    "suggestions": "No matching suggestions found",
     "team_name": "Team name empty",
     "teams": "You don't belong to any teams",
     "tests": "There are no tests for this request"
@@ -192,17 +206,31 @@
     "create_new": "Create new environment",
     "created": "Environment created",
     "deleted": "Environment deletion",
+    "duplicated": "Environment duplicated",
     "edit": "Edit Environment",
+    "global": "Global",
+    "empty_variables": "No variables",
+    "global_variables": "Global variables",
     "invalid_name": "Please provide a name for the environment",
+    "list": "Environment variables",
     "my_environments": "My Environments",
+    "name": "Name",
     "nested_overflow": "nested environment variables are limited to 10 levels",
     "new": "New Environment",
+    "no_active_environment": "No active environment",
     "no_environment": "No environment",
     "no_environment_description": "No environments were selected. Choose what to do with the following variables.",
+    "quick_peek": "Environment Quick Peek",
+    "replace_with_variable": "Replace with variable",
+    "scope": "Scope",
     "select": "Select environment",
+    "set": "Set environment",
+    "set_as_environment": "Set as environment",
     "team_environments": "Team Environments",
     "title": "Environments",
     "updated": "Environment updated",
+    "value": "Value",
+    "variable": "Variable",
     "variable_list": "Variable List"
   },
   "error": {
@@ -226,6 +254,7 @@
     "no_duration": "No duration",
     "no_results_found": "No matches found",
     "page_not_found": "This page could not be found",
+    "proxy_error": "Proxy error",
     "script_fail": "Could not execute pre-request script",
     "something_went_wrong": "Something went wrong",
     "test_script_fail": "Could not execute post-request script"
@@ -253,6 +282,10 @@
   "graphql": {
     "mutations": "Mutations",
     "schema": "Schema",
+    "switch_connection": "Switch connection",
+    "connection_switch_url": "You're connected to a GraphQL endpoint the connection URL is",
+    "connection_switch_new_url": "Switching to a tab will disconnected you from the active GraphQL connection. New connection URL is",
+    "connection_switch_confirm": "Do you want to connect with the latest GraphQL endpoint?",
     "subscriptions": "Subscriptions"
   },
   "group": {
@@ -282,6 +315,30 @@
     "preview": "Hide Preview",
     "sidebar": "Collapse sidebar"
   },
+  "inspections": {
+    "title": "Inspector",
+    "description": "Inspect possible errors",
+    "environment": {
+      "add_environment": "Add to Environment",
+      "not_found": "Environment variable “{environment}” not found."
+    },
+    "header": {
+      "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.",
+      "404_error": "Please check your request URL and method type.",
+      "network_error": "Please check your network connection.",
+      "cors_error": "Please check your Cross-Origin Resource Sharing configuration.",
+      "default_error": "Please check your request."
+    },
+    "url": {
+      "extension_not_installed": "Extension not installed.",
+      "extention_not_enabled": "Extension not enabled.",
+      "extention_enable_action": "Enable Browser Extension",
+      "extension_unknown_origin": "Make sure you've added the API endpoint's origin to the Hoppscotch Browser Extension list."
+    }
+  },
   "import": {
     "collections": "Import collections",
     "curl": "Import cURL",
@@ -418,8 +475,10 @@
     "payload": "Payload",
     "query": "Query",
     "raw_body": "Raw Request Body",
+    "rename": "Rename Request",
     "renamed": "Request renamed",
     "run": "Run",
+    "stop": "Stop",
     "save": "Save",
     "save_as": "Save as",
     "saved": "Request saved",
@@ -459,9 +518,9 @@
     "account_name_description": "This is your display name.",
     "background": "Background",
     "black_mode": "Black",
+    "dark_mode": "Dark",
     "change_font_size": "Change font size",
     "choose_language": "Choose language",
-    "dark_mode": "Dark",
     "delete_account": "Delete account",
     "delete_account_description": "Once you delete your account, all your data will be permanently deleted. This action cannot be undone.",
     "expand_navigation": "Expand navigation",
@@ -525,6 +584,10 @@
       "show_all": "Keyboard shortcuts",
       "title": "General"
     },
+    "others": {
+      "title": "Others",
+      "prettify": "Prettify Editor's Content"
+    },
     "miscellaneous": {
       "invite": "Invite people to Hoppscotch",
       "title": "Miscellaneous"
@@ -545,6 +608,9 @@
       "delete_method": "Select DELETE method",
       "get_method": "Select GET method",
       "head_method": "Select HEAD method",
+      "rename": "Rename Current Request",
+      "import_curl": "Import cURL",
+      "show_code": "Generate code snippet",
       "method": "Method",
       "next_method": "Select Next method",
       "post_method": "Select POST method",
@@ -553,6 +619,7 @@
       "reset_request": "Reset Request",
       "save_to_collections": "Save to Collections",
       "send_request": "Send Request",
+      "save_request": "Save Request",
       "title": "Request"
     },
     "response": {
@@ -561,10 +628,10 @@
       "title": "Response"
     },
     "theme": {
-      "black": "Switch  theme to black mode",
-      "dark": "Switch  theme to  dark mode",
-      "light": "Switch  theme to light mode",
-      "system": "Switch  theme to system mode",
+      "black": "Switch theme to Black Mode",
+      "dark": "Switch theme to Dark Mode",
+      "light": "Switch theme to Light Mode",
+      "system": "Switch theme to System Mode",
       "title": "Theme"
     }
   },
@@ -582,6 +649,82 @@
     "log": "Log",
     "url": "URL"
   },
+  "spotlight": {
+    "general": {
+      "help_menu": "Open help and support menu",
+      "chat": "Chat with support",
+      "open_docs": "Read Documentation",
+      "open_keybindings": "Open keyboard shortcuts",
+      "social": "Social links and GitHub",
+      "title": "General"
+    },
+    "miscellaneous": {
+      "invite": "Invite people to Hoppscotch",
+      "title": "Miscellaneous"
+    },
+    "request": {
+      "tab_parameters": "Open parameters tab",
+      "tab_body": "Open body tab",
+      "tab_headers": "Open headers tab",
+      "tab_authorization": "Open authorization tab",
+      "tab_pre_request_script": "Open pre-request script tab",
+      "tab_tests": "Open tests tab"
+    },
+    "response": {
+      "copy": "Copy response as JSON",
+      "download": "Download response as file",
+      "title": "Response"
+    },
+    "environments": {
+      "new": "Create new environment",
+      "new_variable": "Create a new environment variable",
+      "edit": "Edit selected environment",
+      "delete": "Delete selected environment",
+      "duplicate": "Duplicate selected environment",
+      "edit_global": "Edit global environment",
+      "duplicate_global": "Duplicate global environment",
+      "title": "Environments"
+    },
+    "workspace": {
+      "new": "Create new team",
+      "edit": "Edit selected team",
+      "delete": "Delete selected team",
+      "invite": "Invite people to team",
+      "switch_to_personal": "Switch to personal workspace",
+      "title": "Teams"
+    },
+    "tab": {
+      "close_current": "Close current tab",
+      "close_others": "Close other tabs",
+      "new_tab": "Open a new tab",
+      "title": "Tabs"
+    },
+    "section": {
+      "user": "User",
+      "theme": "Theme",
+      "interface": "Interface",
+      "interceptor": "Interceptor"
+    },
+    "change_interceptor": "Change Interceptor",
+    "change_language": "Change Language",
+    "install_extension": "Install Browser Extension",
+    "settings": {
+      "theme": {
+        "black": "Black Mode",
+        "dark": "Dark Mode",
+        "light": "Light Mode",
+        "system": "System Mode"
+      },
+      "font": {
+        "size_sm": "Change to Small",
+        "size_md": "Change to Medium",
+        "size_lg": "Change to Large"
+      },
+      "change_interceptor": "Change Interceptor",
+      "change_language": "Change Language",
+      "install_extension": "Install Browser Extension"
+    }
+  },
   "sse": {
     "event_type": "Event type",
     "log": "Log",
@@ -639,8 +782,11 @@
   "tab": {
     "authorization": "Authorization",
     "body": "Body",
+    "close": "Close Tab",
+    "close_others": "Close other Tabs",
     "collections": "Collections",
     "documentation": "Documentation",
+    "duplicate": "Duplicate Tab",
     "environments": "Environments",
     "headers": "Headers",
     "history": "History",

packages/hoppscotch-common/package.json

@@ -4,6 +4,8 @@
   "version": "2023.4.8",
   "scripts": {
     "dev": "pnpm exec npm-run-all -p -l dev:*",
+    "test": "vitest --run",
+    "test:watch": "vitest",
     "dev:vite": "vite",
     "dev:gql-codegen": "graphql-codegen --require dotenv/config --config gql-codegen.yml --watch dotenv_config_path=\"../../.env\"",
     "lint": "eslint src --ext .ts,.js,.vue --ignore-path .gitignore .",
@@ -13,140 +15,147 @@
     "preview": "vite preview",
     "gql-codegen": "graphql-codegen --require dotenv/config --config gql-codegen.yml dotenv_config_path=\"../../.env\"",
     "postinstall": "pnpm run gql-codegen",
+    "do-test": "pnpm run test",
     "do-lint": "pnpm run prod-lint",
     "do-typecheck": "pnpm run lint",
     "do-lintfix": "pnpm run lintfix"
   },
   "dependencies": {
     "@apidevtools/swagger-parser": "^10.1.0",
-    "@codemirror/autocomplete": "^6.0.3",
-    "@codemirror/commands": "^6.0.1",
-    "@codemirror/lang-javascript": "^6.0.1",
-    "@codemirror/lang-json": "^6.0.0",
-    "@codemirror/lang-xml": "^6.0.0",
-    "@codemirror/language": "^6.2.0",
-    "@codemirror/legacy-modes": "^6.1.0",
-    "@codemirror/lint": "^6.0.0",
-    "@codemirror/search": "^6.0.0",
-    "@codemirror/state": "^6.1.0",
-    "@codemirror/view": "^6.0.2",
+    "@codemirror/autocomplete": "^6.9.0",
+    "@codemirror/commands": "^6.2.4",
+    "@codemirror/lang-javascript": "^6.1.9",
+    "@codemirror/lang-json": "^6.0.1",
+    "@codemirror/lang-xml": "^6.0.2",
+    "@codemirror/language": "^6.9.0",
+    "@codemirror/legacy-modes": "^6.3.3",
+    "@codemirror/lint": "^6.4.0",
+    "@codemirror/search": "^6.5.1",
+    "@codemirror/state": "^6.2.1",
+    "@codemirror/view": "^6.16.0",
+    "@fontsource-variable/inter": "^5.0.8",
+    "@fontsource-variable/material-symbols-rounded": "^5.0.7",
+    "@fontsource-variable/roboto-mono": "^5.0.9",
     "@hoppscotch/codemirror-lang-graphql": "workspace:^",
     "@hoppscotch/data": "workspace:^",
     "@hoppscotch/js-sandbox": "workspace:^",
     "@hoppscotch/ui": "workspace:^",
     "@hoppscotch/vue-toasted": "^0.1.0",
-    "@lezer/highlight": "^1.0.0",
-    "@sentry/tracing": "^7.13.0",
-    "@sentry/vue": "^7.13.0",
-    "@urql/core": "^2.5.0",
+    "@lezer/highlight": "^1.1.6",
+    "@sentry/tracing": "^7.64.0",
+    "@sentry/vue": "^7.64.0",
+    "@urql/core": "^4.1.1",
     "@urql/devtools": "^2.0.3",
-    "@urql/exchange-auth": "^0.1.7",
-    "@urql/exchange-graphcache": "^4.4.3",
-    "@vitejs/plugin-legacy": "^2.3.0",
-    "@vueuse/core": "^8.7.5",
-    "@vueuse/head": "^0.7.9",
+    "@urql/exchange-auth": "^2.1.6",
+    "@urql/exchange-graphcache": "^6.3.2",
+    "@vitejs/plugin-legacy": "^4.1.1",
+    "@vueuse/core": "^10.3.0",
+    "@vueuse/head": "^1.3.1",
     "acorn-walk": "^8.2.0",
-    "axios": "^0.21.4",
+    "axios": "^1.4.0",
     "buffer": "^6.0.3",
+    "dioc": "workspace:^",
     "esprima": "^4.0.1",
     "events": "^3.3.0",
-    "fp-ts": "^2.12.1",
+    "fp-ts": "^2.16.1",
     "fuse.js": "^6.6.2",
     "globalthis": "^1.0.3",
-    "graphql": "^15.5.0",
+    "graphql": "^16.8.0",
     "graphql-language-service-interface": "^2.9.1",
     "graphql-tag": "^2.12.6",
     "httpsnippet": "^2.0.0",
-    "insomnia-importers": "^3.3.0",
-    "io-ts": "^2.2.16",
+    "insomnia-importers": "^3.6.0",
+    "io-ts": "^2.2.20",
     "js-yaml": "^4.1.0",
-    "jsonpath-plus": "^7.0.0",
+    "jsonpath-plus": "^7.2.0",
     "lodash-es": "^4.17.21",
-    "lossless-json": "^2.0.8",
+    "lossless-json": "^2.0.11",
+    "minisearch": "^6.1.0",
     "nprogress": "^0.2.0",
     "paho-mqtt": "^1.1.0",
     "path": "^0.12.7",
-    "postman-collection": "^4.1.4",
+    "postman-collection": "^4.2.0",
     "process": "^0.11.10",
-    "qs": "^6.10.3",
-    "rxjs": "^7.5.5",
+    "qs": "^6.11.2",
+    "rxjs": "^7.8.1",
     "socket.io-client-v2": "npm:socket.io-client@^2.4.0",
     "socket.io-client-v3": "npm:socket.io-client@^3.1.3",
     "socket.io-client-v4": "npm:socket.io-client@^4.4.1",
     "socketio-wildcard": "^2.0.0",
-    "splitpanes": "^3.1.1",
+    "splitpanes": "^3.1.5",
     "stream-browserify": "^3.0.0",
     "subscriptions-transport-ws": "^0.11.0",
     "tern": "^0.24.3",
     "timers": "^0.1.1",
     "tippy.js": "^6.3.7",
-    "url": "^0.11.0",
-    "util": "^0.12.4",
-    "uuid": "^8.3.2",
-    "vue": "^3.2.25",
-    "vue-github-button": "^3.0.3",
+    "url": "^0.11.1",
+    "util": "^0.12.5",
+    "uuid": "^9.0.0",
+    "vue": "^3.3.4",
     "vue-i18n": "^9.2.2",
-    "vue-pdf-embed": "^1.1.4",
-    "vue-router": "^4.0.16",
-    "vue-tippy": "6.0.0-alpha.58",
+    "vue-pdf-embed": "^1.1.6",
+    "vue-router": "^4.2.4",
+    "vue-tippy": "6.3.1",
     "vuedraggable-es": "^4.1.1",
-    "wonka": "^4.0.15",
-    "workbox-window": "^6.5.4",
-    "xml-formatter": "^3.4.1",
+    "wonka": "^6.3.4",
+    "workbox-window": "^7.0.0",
+    "xml-formatter": "^3.5.0",
     "yargs-parser": "^21.1.1"
   },
   "devDependencies": {
-    "@esbuild-plugins/node-globals-polyfill": "^0.1.1",
-    "@esbuild-plugins/node-modules-polyfill": "^0.1.4",
-    "@graphql-codegen/add": "^3.2.0",
-    "@graphql-codegen/cli": "^2.8.0",
-    "@graphql-codegen/typed-document-node": "^2.3.1",
-    "@graphql-codegen/typescript": "^2.7.1",
-    "@graphql-codegen/typescript-operations": "^2.5.1",
-    "@graphql-codegen/typescript-urql-graphcache": "^2.3.1",
-    "@graphql-codegen/urql-introspection": "^2.2.0",
-    "@graphql-typed-document-node/core": "^3.1.1",
-    "@iconify-json/lucide": "^1.1.40",
+    "@esbuild-plugins/node-globals-polyfill": "^0.2.3",
+    "@esbuild-plugins/node-modules-polyfill": "^0.2.2",
+    "@graphql-codegen/add": "^5.0.0",
+    "@graphql-codegen/cli": "^5.0.0",
+    "@graphql-codegen/typed-document-node": "^5.0.1",
+    "@graphql-codegen/typescript": "^4.0.1",
+    "@graphql-codegen/typescript-operations": "^4.0.1",
+    "@graphql-codegen/typescript-urql-graphcache": "^2.4.5",
+    "@graphql-codegen/urql-introspection": "^2.2.1",
+    "@graphql-typed-document-node/core": "^3.2.0",
+    "@iconify-json/lucide": "^1.1.119",
     "@intlify/vite-plugin-vue-i18n": "^7.0.0",
-    "@rushstack/eslint-patch": "^1.1.4",
+    "@relmify/jest-fp-ts": "^2.1.1",
+    "@rushstack/eslint-patch": "^1.3.3",
     "@types/js-yaml": "^4.0.5",
-    "@types/lodash-es": "^4.17.6",
+    "@types/lodash-es": "^4.17.8",
     "@types/lossless-json": "^1.0.1",
     "@types/nprogress": "^0.2.0",
-    "@types/paho-mqtt": "^1.0.6",
+    "@types/paho-mqtt": "^1.0.7",
     "@types/postman-collection": "^3.5.7",
     "@types/splitpanes": "^2.2.1",
-    "@types/uuid": "^8.3.4",
+    "@types/uuid": "^9.0.2",
     "@types/yargs-parser": "^21.0.0",
-    "@typescript-eslint/eslint-plugin": "^5.19.0",
-    "@typescript-eslint/parser": "^5.19.0",
-    "@vitejs/plugin-vue": "^3.1.0",
-    "@vue/compiler-sfc": "^3.2.39",
-    "@vue/eslint-config-typescript": "^11.0.1",
-    "@vue/runtime-core": "^3.2.39",
+    "@typescript-eslint/eslint-plugin": "^6.4.0",
+    "@typescript-eslint/parser": "^6.4.0",
+    "@vitejs/plugin-vue": "^4.3.1",
+    "@vue/compiler-sfc": "^3.3.4",
+    "@vue/eslint-config-typescript": "^11.0.3",
+    "@vue/runtime-core": "^3.3.4",
     "cross-env": "^7.0.3",
-    "dotenv": "^16.0.3",
-    "eslint": "^8.24.0",
-    "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-vue": "^9.5.1",
+    "dotenv": "^16.3.1",
+    "eslint": "^8.47.0",
+    "eslint-plugin-prettier": "^5.0.0",
+    "eslint-plugin-vue": "^9.17.0",
     "npm-run-all": "^4.1.5",
-    "openapi-types": "^12.0.0",
-    "rollup-plugin-polyfill-node": "^0.10.1",
-    "sass": "^1.53.0",
-    "typescript": "^4.5.4",
-    "unplugin-icons": "^0.14.9",
-    "unplugin-vue-components": "^0.21.0",
-    "vite": "^3.1.4",
-    "vite-plugin-checker": "^0.5.1",
-    "vite-plugin-fonts": "^0.6.0",
-    "vite-plugin-html-config": "^1.0.10",
-    "vite-plugin-inspect": "^0.7.4",
-    "vite-plugin-pages": "^0.26.0",
-    "vite-plugin-pages-sitemap": "^1.4.0",
-    "vite-plugin-pwa": "^0.13.1",
-    "vite-plugin-vue-layouts": "^0.7.0",
-    "vite-plugin-windicss": "^1.8.8",
-    "vue-tsc": "^0.38.2",
+    "openapi-types": "^12.1.3",
+    "rollup-plugin-polyfill-node": "^0.12.0",
+    "sass": "^1.66.0",
+    "typescript": "^5.1.6",
+    "unplugin-fonts": "^1.0.3",
+    "unplugin-icons": "^0.16.5",
+    "unplugin-vue-components": "^0.25.1",
+    "vite": "^4.4.9",
+    "vite-plugin-checker": "^0.6.1",
+    "vite-plugin-html-config": "^1.0.11",
+    "vite-plugin-inspect": "^0.7.38",
+    "vite-plugin-pages": "^0.31.0",
+    "vite-plugin-pages-sitemap": "^1.6.1",
+    "vite-plugin-pwa": "^0.16.4",
+    "vite-plugin-vue-layouts": "^0.8.0",
+    "vite-plugin-windicss": "^1.9.1",
+    "vitest": "^0.34.2",
+    "vue-tsc": "^1.8.8",
     "windicss": "^3.5.6"
   }
 }

packages/hoppscotch-common/public/badge.svg

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

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

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

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

@@ -1,17 +1,57 @@
 <template>
   <AppShortcuts :show="showShortcuts" @close="showShortcuts = false" />
   <AppShare :show="showShare" @hide-modal="showShare = false" />
+  <AppSocial :show="showSocial" @hide-modal="showSocial = false" />
   <FirebaseLogin :show="showLogin" @hide-modal="showLogin = false" />
+
+  <HoppSmartConfirmModal
+    :show="confirmRemove"
+    :title="t('confirm.remove_team')"
+    @hide-modal="confirmRemove = false"
+    @resolve="deleteTeam()"
+  />
 </template>
 
 <script setup lang="ts">
 import { ref } from "vue"
-import { defineActionHandler } from "~/helpers/actions"
+import { pipe } from "fp-ts/function"
+import * as TE from "fp-ts/TaskEither"
+import { deleteTeam as backendDeleteTeam } from "~/helpers/backend/mutations/Team"
+import { defineActionHandler, invokeAction } from "~/helpers/actions"
+import { showChat } from "~/modules/crisp"
+import { useToast } from "~/composables/toast"
+import { useI18n } from "~/composables/i18n"
+
+const toast = useToast()
+const t = useI18n()
 
 const showShortcuts = ref(false)
 const showShare = ref(false)
+const showSocial = ref(false)
 const showLogin = ref(false)
 
+const confirmRemove = ref(false)
+
+const teamID = ref<string | null>(null)
+
+const deleteTeam = () => {
+  if (!teamID.value) return
+  pipe(
+    backendDeleteTeam(teamID.value),
+    TE.match(
+      (err) => {
+        // TODO: Better errors ? We know the possible errors now
+        toast.error(`${t("error.something_went_wrong")}`)
+        console.error(err)
+      },
+      () => {
+        invokeAction("workspace.switch.personal")
+        toast.success(`${t("team.deleted")}`)
+      }
+    )
+  )() // Tasks (and TEs) are lazy, so call the function returned
+}
+
 defineActionHandler("flyouts.keybinds.toggle", () => {
   showShortcuts.value = !showShortcuts.value
 })
@@ -20,7 +60,20 @@ defineActionHandler("modals.share.toggle", () => {
   showShare.value = !showShare.value
 })
 
+defineActionHandler("modals.social.toggle", () => {
+  showSocial.value = !showSocial.value
+})
+
 defineActionHandler("modals.login.toggle", () => {
   showLogin.value = !showLogin.value
 })
+
+defineActionHandler("flyouts.chat.open", () => {
+  showChat()
+})
+
+defineActionHandler("modals.team.delete", ({ teamId }) => {
+  teamID.value = teamId
+  confirmRemove.value = true
+})
 </script>

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

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

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

@@ -152,7 +152,7 @@
           v-tippy="{ theme: 'tooltip', allowHTML: true }"
           :title="`${t(
             'app.shortcuts'
-          )} <kbd>${getSpecialKey()}</kbd><kbd>K</kbd>`"
+          )} <kbd>${getSpecialKey()}</kbd><kbd>/</kbd>`"
           :icon="IconZap"
           @click="invokeAction('flyouts.keybinds.toggle')"
         />

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

@@ -1,70 +0,0 @@
-<template>
-  <div key="outputHash" class="flex flex-col flex-1 overflow-auto">
-    <div class="flex flex-col">
-      <AppPowerSearchEntry
-        v-for="(shortcut, shortcutIndex) in searchResults"
-        :key="`shortcut-${shortcutIndex}`"
-        :active="shortcutIndex === selectedEntry"
-        :shortcut="shortcut.item"
-        @action="emit('action', shortcut.item.action)"
-        @mouseover="selectedEntry = shortcutIndex"
-      />
-    </div>
-    <div
-      v-if="searchResults.length === 0"
-      class="flex flex-col items-center justify-center p-4 text-secondaryLight"
-    >
-      <icon-lucide-search class="pb-2 opacity-75 svg-icons" />
-      <span class="my-2 text-center">
-        {{ t("state.nothing_found") }} "{{ search }}"
-      </span>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed, onUnmounted, onMounted } from "vue"
-import Fuse from "fuse.js"
-import { useArrowKeysNavigation } from "~/helpers/powerSearchNavigation"
-import { HoppAction } from "~/helpers/actions"
-import { useI18n } from "@composables/i18n"
-
-const t = useI18n()
-
-const props = defineProps<{
-  input: Record<string, any>[]
-  search: string
-}>()
-
-const emit = defineEmits<{
-  (e: "action", action: HoppAction): void
-}>()
-
-const options = {
-  keys: ["keys", "label", "action", "tags"],
-}
-
-const fuse = new Fuse(props.input, options)
-
-const searchResults = computed(() => fuse.search(props.search))
-
-const searchResultsItems = computed(() =>
-  searchResults.value.map((searchResult) => searchResult.item)
-)
-
-const emitSearchAction = (action: HoppAction) => emit("action", action)
-
-const { bindArrowKeysListeners, unbindArrowKeysListeners, selectedEntry } =
-  useArrowKeysNavigation(searchResultsItems, {
-    onEnter: emitSearchAction,
-    stopPropagation: true,
-  })
-
-onMounted(() => {
-  bindArrowKeysListeners()
-})
-
-onUnmounted(() => {
-  unbindArrowKeysListeners()
-})
-</script>

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

@@ -15,16 +15,21 @@
           :label="t('app.name')"
           to="/"
         />
-        <!-- <AppGitHubStarButton class="mt-1.5 transition" /> -->
       </div>
-      <div class="inline-flex items-center space-x-2">
-        <HoppButtonSecondary
-          v-tippy="{ theme: 'tooltip', allowHTML: true }"
-          :title="`${t('app.search')} <kbd>/</kbd>`"
-          :icon="IconSearch"
-          class="rounded hover:bg-primaryDark focus-visible:bg-primaryDark"
+      <div class="inline-flex items-center justify-center flex-1 space-x-2">
+        <button
+          class="flex flex-1 items-center justify-between px-2 py-1 self-stretch bg-primaryDark transition text-secondaryLight cursor-text rounded border border-dividerDark max-w-60 hover:border-dividerDark hover:bg-primaryLight hover:text-secondary focus-visible:border-dividerDark focus-visible:bg-primaryLight focus-visible:text-secondary"
           @click="invokeAction('modals.search.toggle')"
-        />
+        >
+          <span class="inline-flex flex-1 items-center">
+            <icon-lucide-search class="mr-2 svg-icons" />
+            {{ t("app.search") }}
+          </span>
+          <span class="flex 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' }"
@@ -42,6 +47,8 @@
           class="rounded hover:bg-primaryDark focus-visible:bg-primaryDark"
           @click="invokeAction('modals.support.toggle')"
         />
+      </div>
+      <div class="inline-flex items-center justify-end flex-1 space-x-2">
         <div
           v-if="currentUser === null"
           class="inline-flex items-center space-x-2"
@@ -236,19 +243,21 @@ import IconDownload from "~icons/lucide/download"
 import IconUploadCloud from "~icons/lucide/upload-cloud"
 import IconUserPlus from "~icons/lucide/user-plus"
 import IconLifeBuoy from "~icons/lucide/life-buoy"
-import IconSearch from "~icons/lucide/search"
 import { breakpointsTailwind, useBreakpoints, useNetwork } from "@vueuse/core"
 import { pwaDefferedPrompt, installPWA } from "@modules/pwa"
 import { platform } from "~/platform"
 import { useI18n } from "@composables/i18n"
 import { useReadonlyStream } from "@composables/stream"
-import { invokeAction } from "@helpers/actions"
+import { defineActionHandler, invokeAction } from "@helpers/actions"
 import { workspaceStatus$, updateWorkspaceTeamName } from "~/newstore/workspace"
 import TeamListAdapter from "~/helpers/teams/TeamListAdapter"
 import { onLoggedIn } from "~/composables/auth"
 import { GetMyTeamsQuery } from "~/helpers/backend/graphql"
+import { getPlatformSpecialKey } from "~/helpers/platformutils"
+import { useToast } from "~/composables/toast"
 
 const t = useI18n()
+const toast = useToast()
 
 /**
  * Once the PWA code is initialized, this holds a method
@@ -365,6 +374,8 @@ const handleTeamEdit = () => {
     editingTeamID.value = workspace.value.teamID
     editingTeamName.value = { name: selectedTeam.value.name }
     displayModalEdit(true)
+  } else {
+    noPermission()
   }
 }
 
@@ -374,4 +385,29 @@ const profile = ref<any | null>(null)
 const settings = ref<any | null>(null)
 const logout = ref<any | null>(null)
 const accountActions = ref<any | null>(null)
+
+defineActionHandler("modals.team.edit", handleTeamEdit)
+
+defineActionHandler("modals.team.invite", () => {
+  if (
+    selectedTeam.value?.myRole === "OWNER" ||
+    selectedTeam.value?.myRole === "EDITOR"
+  ) {
+    inviteTeam({ name: selectedTeam.value.name }, selectedTeam.value.id)
+  } else {
+    noPermission()
+  }
+})
+
+defineActionHandler(
+  "user.login",
+  () => {
+    invokeAction("modals.login.toggle")
+  },
+  computed(() => !currentUser.value)
+)
+
+const noPermission = () => {
+  toast.error(`${t("profile.no_permission")}`)
+}
 </script>

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

@@ -0,0 +1,112 @@
+<template>
+  <div v-if="inspectionResults && inspectionResults.length > 0">
+    <tippy interactive trigger="click" theme="popover">
+      <div class="flex justify-center items-center flex-1 flex-col">
+        <HoppButtonSecondary
+          v-tippy="{ theme: 'tooltip' }"
+          :icon="IconAlertTriangle"
+          :class="severityColor(getHighestSeverity.severity)"
+          :title="t('inspections.description')"
+        />
+      </div>
+      <template #content="{ hide }">
+        <div class="flex flex-col space-y-2 items-start flex-1">
+          <div
+            class="flex justify-between border rounded pl-2 border-divider bg-popover sticky top-0 self-stretch"
+          >
+            <span class="flex items-center flex-1">
+              <icon-lucide-activity class="mr-2 svg-icons text-accent" />
+              <span class="font-bold">
+                {{ t("inspections.title") }}
+              </span>
+            </span>
+            <HoppButtonSecondary
+              v-tippy="{ theme: 'tooltip' }"
+              to="https://docs.hoppscotch.io/documentation/features/inspections"
+              blank
+              :title="t('app.wiki')"
+              :icon="IconHelpCircle"
+            />
+          </div>
+          <div
+            v-for="(inspector, index) in inspectionResults"
+            :key="index"
+            class="flex self-stretch max-w-md w-full"
+          >
+            <div
+              class="flex flex-col flex-1 rounded border border-dashed border-dividerDark divide-y divide-dashed divide-dividerDark"
+            >
+              <span
+                v-if="inspector.text.type === 'text'"
+                class="flex-1 px-3 py-2"
+              >
+                {{ inspector.text.text }}
+                <HoppSmartLink
+                  blank
+                  :to="inspector.doc.link"
+                  class="text-accent hover:text-accentDark transition"
+                >
+                  {{ inspector.doc.text }}
+                  <icon-lucide-arrow-up-right class="svg-icons" />
+                </HoppSmartLink>
+              </span>
+              <span v-if="inspector.action" class="flex p-2 space-x-2">
+                <HoppButtonSecondary
+                  :label="inspector.action.text"
+                  outline
+                  filled
+                  @click="
+                    () => {
+                      inspector.action?.apply()
+                      hide()
+                    }
+                  "
+                />
+              </span>
+            </div>
+          </div>
+        </div>
+      </template>
+    </tippy>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { InspectorResult } from "~/services/inspection"
+import IconAlertTriangle from "~icons/lucide/alert-triangle"
+import IconHelpCircle from "~icons/lucide/help-circle"
+import { computed } from "vue"
+import { useI18n } from "~/composables/i18n"
+
+const t = useI18n()
+
+const props = defineProps<{
+  inspectionResults: InspectorResult[] | undefined
+}>()
+
+const getHighestSeverity = computed(() => {
+  if (props.inspectionResults) {
+    return props.inspectionResults.reduce(
+      (prev, curr) => {
+        return prev.severity > curr.severity ? prev : curr
+      },
+      { severity: 0 }
+    )
+  } else {
+    return { severity: 0 }
+  }
+})
+
+const severityColor = (severity: number) => {
+  switch (severity) {
+    case 1:
+      return "!text-green-500 hover:!text-green-600"
+    case 2:
+      return "!text-yellow-500 hover:!text-yellow-600"
+    case 3:
+      return "!text-red-500 hover:!text-red-600"
+    default:
+      return "!text-gray-500 hover:!text-gray-600"
+  }
+}
+</script>

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

@@ -8,91 +8,41 @@
         {{ t("settings.interceptor_description") }}
       </p>
     </div>
-    <HoppSmartRadioGroup
-      v-model="interceptorSelection"
-      :radios="interceptors"
-    />
-    <div
-      v-if="interceptorSelection == 'EXTENSIONS_ENABLED' && !extensionVersion"
-      class="flex space-x-2"
-    >
-      <HoppButtonSecondary
-        to="https://chrome.google.com/webstore/detail/hoppscotch-browser-extens/amknoiejhlmhancpahfcfcfhllgkpbld"
-        blank
-        :icon="IconChrome"
-        label="Chrome"
-        outline
-        class="!flex-1"
-      />
-      <HoppButtonSecondary
-        to="https://addons.mozilla.org/en-US/firefox/addon/hoppscotch"
-        blank
-        :icon="IconFirefox"
-        label="Firefox"
-        outline
-        class="!flex-1"
-      />
+
+    <div>
+      <div
+        v-for="interceptor in interceptors"
+        :key="interceptor.interceptorID"
+        class="flex flex-col"
+      >
+        <HoppSmartRadio
+          :value="interceptor.interceptorID"
+          :label="unref(interceptor.name(t))"
+          :selected="interceptorSelection === interceptor.interceptorID"
+          @change="interceptorSelection = interceptor.interceptorID"
+        />
+
+        <component
+          :is="interceptor.selectorSubtitle"
+          v-if="interceptor.selectorSubtitle"
+        />
+      </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import IconChrome from "~icons/brands/chrome"
-import IconFirefox from "~icons/brands/firefox"
-import { computed } from "vue"
-import { applySetting, toggleSetting } from "~/newstore/settings"
-import { useSetting } from "@composables/settings"
 import { useI18n } from "@composables/i18n"
-import { useReadonlyStream } from "@composables/stream"
-import { extensionStatus$ } from "~/newstore/HoppExtension"
+import { useService } from "dioc/vue"
+import { Ref, unref } from "vue"
+import { InterceptorService } from "~/services/interceptor.service"
 
 const t = useI18n()
 
-const PROXY_ENABLED = useSetting("PROXY_ENABLED")
-const EXTENSIONS_ENABLED = useSetting("EXTENSIONS_ENABLED")
+const interceptorService = useService(InterceptorService)
 
-const currentExtensionStatus = useReadonlyStream(extensionStatus$, null)
+const interceptorSelection =
+  interceptorService.currentInterceptorID as Ref<string>
 
-const extensionVersion = computed(() => {
-  return currentExtensionStatus.value === "available"
-    ? window.__POSTWOMAN_EXTENSION_HOOK__?.getVersion() ?? null
-    : null
-})
-
-const interceptors = computed(() => [
-  { value: "BROWSER_ENABLED" as const, label: t("state.none") },
-  { value: "PROXY_ENABLED" as const, label: t("settings.proxy") },
-  {
-    value: "EXTENSIONS_ENABLED" as const,
-    label:
-      `${t("settings.extensions")}: ` +
-      (extensionVersion.value !== null
-        ? `v${extensionVersion.value.major}.${extensionVersion.value.minor}`
-        : t("settings.extension_ver_not_reported")),
-  },
-])
-
-type InterceptorMode = (typeof interceptors)["value"][number]["value"]
-
-const interceptorSelection = computed<InterceptorMode>({
-  get() {
-    if (PROXY_ENABLED.value) return "PROXY_ENABLED"
-    if (EXTENSIONS_ENABLED.value) return "EXTENSIONS_ENABLED"
-    return "BROWSER_ENABLED"
-  },
-  set(val) {
-    if (val === "EXTENSIONS_ENABLED") {
-      applySetting("EXTENSIONS_ENABLED", true)
-      if (PROXY_ENABLED.value) toggleSetting("PROXY_ENABLED")
-    }
-    if (val === "PROXY_ENABLED") {
-      applySetting("PROXY_ENABLED", true)
-      if (EXTENSIONS_ENABLED.value) toggleSetting("EXTENSIONS_ENABLED")
-    }
-    if (val === "BROWSER_ENABLED") {
-      applySetting("PROXY_ENABLED", false)
-      applySetting("EXTENSIONS_ENABLED", false)
-    }
-  },
-})
+const interceptors = interceptorService.availableInterceptors
 </script>

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

@@ -130,13 +130,12 @@
           @click="nativeShare()"
         />
       </div>
-      <AppShare :show="showShare" @hide-modal="showShare = false" />
     </template>
   </HoppSmartModal>
 </template>
 
 <script setup lang="ts">
-import { ref, watch } from "vue"
+import { watch } from "vue"
 import IconSidebar from "~icons/lucide/sidebar"
 import IconSidebarOpen from "~icons/lucide/sidebar-open"
 import IconBook from "~icons/lucide/book"
@@ -151,13 +150,12 @@ import IconUserPlus from "~icons/lucide/user-plus"
 import IconShare2 from "~icons/lucide/share-2"
 import IconChevronRight from "~icons/lucide/chevron-right"
 import { useSetting } from "@composables/settings"
-import { defineActionHandler } from "~/helpers/actions"
+import { invokeAction } from "~/helpers/actions"
 import { showChat } from "@modules/crisp"
 import { useI18n } from "@composables/i18n"
 
 const t = useI18n()
 const navigatorShare = !!navigator.share
-const showShare = ref(false)
 
 const ZEN_MODE = useSetting("ZEN_MODE")
 const EXPAND_NAVIGATION = useSetting("EXPAND_NAVIGATION")
@@ -174,10 +172,6 @@ defineProps<{
   show: boolean
 }>()
 
-defineActionHandler("modals.share.toggle", () => {
-  showShare.value = !showShare.value
-})
-
 const emit = defineEmits<{
   (e: "hide-modal"): void
 }>()
@@ -198,7 +192,7 @@ const expandCollection = () => {
 }
 
 const expandInvite = () => {
-  showShare.value = true
+  invokeAction("modals.share.toggle")
 }
 
 const nativeShare = () => {

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

@@ -18,13 +18,18 @@
         :horizontal="COLUMN_LAYOUT"
         @resize="setPaneEvent($event, 'horizontal')"
       >
-        <Pane :size="PANE_MAIN_TOP_SIZE" class="flex flex-col !overflow-auto">
+        <Pane
+          :size="PANE_MAIN_TOP_SIZE"
+          class="flex flex-col !overflow-auto"
+          min-size="25"
+        >
           <slot name="primary" />
         </Pane>
         <Pane
           v-if="hasSecondary"
           :size="PANE_MAIN_BOTTOM_SIZE"
           class="flex flex-col !overflow-auto"
+          min-size="25"
         >
           <slot name="secondary" />
         </Pane>
@@ -33,7 +38,7 @@
     <Pane
       v-if="SIDEBAR && hasSidebar"
       :size="PANE_SIDEBAR_SIZE"
-      min-size="20"
+      min-size="25"
       class="flex flex-col !overflow-auto bg-primaryContrast"
     >
       <slot name="sidebar" />
@@ -78,10 +83,10 @@ type PaneEvent = {
   size: number
 }
 
-const PANE_MAIN_SIZE = ref(74)
-const PANE_SIDEBAR_SIZE = ref(26)
-const PANE_MAIN_TOP_SIZE = ref(42)
-const PANE_MAIN_BOTTOM_SIZE = ref(58)
+const PANE_MAIN_SIZE = ref(70)
+const PANE_SIDEBAR_SIZE = ref(30)
+const PANE_MAIN_TOP_SIZE = ref(35)
+const PANE_MAIN_BOTTOM_SIZE = ref(65)
 
 if (!COLUMN_LAYOUT.value) {
   PANE_MAIN_TOP_SIZE.value = 50

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

@@ -1,122 +0,0 @@
-<template>
-  <HoppSmartModal
-    v-if="show"
-    styles="sm:max-w-lg"
-    full-width
-    @close="emit('hide-modal')"
-  >
-    <template #body>
-      <div class="flex flex-col border-b transition border-dividerLight">
-        <input
-          id="command"
-          v-model="search"
-          v-focus
-          type="text"
-          autocomplete="off"
-          name="command"
-          :placeholder="`${t('app.type_a_command_search')}`"
-          class="flex flex-shrink-0 p-6 text-base bg-transparent text-secondaryDark"
-        />
-        <div
-          class="flex flex-shrink-0 text-tiny text-secondaryLight px-4 pb-4 justify-between whitespace-nowrap overflow-auto <sm:hidden"
-        >
-          <div class="flex items-center">
-            <kbd class="shortcut-key">↑</kbd>
-            <kbd class="shortcut-key">↓</kbd>
-            <span class="ml-2 truncate">
-              {{ t("action.to_navigate") }}
-            </span>
-            <kbd class="shortcut-key">↩</kbd>
-            <span class="ml-2 truncate">
-              {{ t("action.to_select") }}
-            </span>
-          </div>
-          <div class="flex items-center">
-            <kbd class="shortcut-key">ESC</kbd>
-            <span class="ml-2 truncate">
-              {{ t("action.to_close") }}
-            </span>
-          </div>
-        </div>
-      </div>
-      <AppFuse
-        v-if="search && show"
-        :input="fuse"
-        :search="search"
-        @action="runAction"
-      />
-      <div
-        v-else
-        class="flex flex-col flex-1 overflow-auto space-y-4 divide-y divide-dividerLight"
-      >
-        <div
-          v-for="(map, mapIndex) in mappings"
-          :key="`map-${mapIndex}`"
-          class="flex flex-col"
-        >
-          <h5 class="px-6 py-2 my-2 text-secondaryLight">
-            {{ t(map.section) }}
-          </h5>
-          <AppPowerSearchEntry
-            v-for="(shortcut, shortcutIndex) in map.shortcuts"
-            :key="`map-${mapIndex}-shortcut-${shortcutIndex}`"
-            :shortcut="shortcut"
-            :active="shortcutsItems.indexOf(shortcut) === selectedEntry"
-            @action="runAction"
-            @mouseover="selectedEntry = shortcutsItems.indexOf(shortcut)"
-          />
-        </div>
-      </div>
-    </template>
-  </HoppSmartModal>
-</template>
-
-<script setup lang="ts">
-import { ref, computed, watch } from "vue"
-import { HoppAction, invokeAction } from "~/helpers/actions"
-import { spotlight as mappings, fuse } from "@helpers/shortcuts"
-import { useArrowKeysNavigation } from "~/helpers/powerSearchNavigation"
-import { useI18n } from "@composables/i18n"
-
-const t = useI18n()
-
-const props = defineProps<{
-  show: boolean
-}>()
-
-const emit = defineEmits<{
-  (e: "hide-modal"): void
-}>()
-
-const search = ref("")
-
-const hideModal = () => {
-  search.value = ""
-  emit("hide-modal")
-}
-
-const runAction = (command: HoppAction) => {
-  invokeAction(command)
-  hideModal()
-}
-
-const shortcutsItems = computed(() =>
-  mappings.reduce(
-    (shortcuts, section) => [...shortcuts, ...section.shortcuts],
-    []
-  )
-)
-
-const { bindArrowKeysListeners, unbindArrowKeysListeners, selectedEntry } =
-  useArrowKeysNavigation(shortcutsItems, {
-    onEnter: runAction,
-  })
-
-watch(
-  () => props.show,
-  (show) => {
-    if (show) bindArrowKeysListeners()
-    else unbindArrowKeysListeners()
-  }
-)
-</script>

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

@@ -1,68 +0,0 @@
-<template>
-  <button
-    class="flex items-center flex-1 px-6 py-3 font-medium transition cursor-pointer search-entry focus:outline-none"
-    :class="{ active: active }"
-    tabindex="-1"
-    @click="emit('action', shortcut.action)"
-    @keydown.enter="emit('action', shortcut.action)"
-  >
-    <component
-      :is="shortcut.icon"
-      class="mr-4 transition opacity-50 svg-icons"
-      :class="{ 'opacity-100 text-secondaryDark': active }"
-    />
-    <span
-      class="flex flex-1 mr-4 transition"
-      :class="{ 'text-secondaryDark': active }"
-    >
-      {{ t(shortcut.label) }}
-    </span>
-    <kbd
-      v-for="(key, keyIndex) in shortcut.keys"
-      :key="`key-${String(keyIndex)}`"
-      class="shortcut-key"
-    >
-      {{ key }}
-    </kbd>
-  </button>
-</template>
-
-<script setup lang="ts">
-import type { Component } from "vue"
-import { useI18n } from "@composables/i18n"
-
-const t = useI18n()
-
-defineProps<{
-  shortcut: {
-    label: string
-    keys: string[]
-    action: string
-    icon: object | Component
-  }
-  active: boolean
-}>()
-
-const emit = defineEmits<{
-  (e: "action", action: string): void
-}>()
-</script>
-
-<style lang="scss" scoped>
-.search-entry {
-  @apply relative;
-  @apply after:absolute;
-  @apply after:top-0;
-  @apply after:left-0;
-  @apply after:bottom-0;
-  @apply after:bg-transparent;
-  @apply after:z-2;
-  @apply after:w-0.5;
-  @apply after:content-DEFAULT;
-
-  &.active {
-    @apply bg-primaryLight;
-    @apply after:bg-accentLight;
-  }
-}
-</style>

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

@@ -4,56 +4,26 @@
       <div
         class="sticky top-0 z-10 flex flex-col flex-shrink-0 overflow-x-auto bg-primary"
       >
-        <div class="flex flex-col px-6 py-4 border-b border-dividerLight">
-          <input
-            v-model="filterText"
-            type="search"
-            autocomplete="off"
-            class="flex px-4 py-2 border rounded bg-primaryContrast border-divider hover:border-dividerDark focus-visible:border-dividerDark"
-            :placeholder="`${t('action.search')}`"
-          />
-        </div>
+        <HoppSmartInput
+          v-model="filterText"
+          type="search"
+          styles="px-6 py-4 border-b border-dividerLight"
+          :placeholder="`${t('action.search')}`"
+          input-styles="flex px-4 py-2 border rounded bg-primaryContrast border-divider hover:border-dividerDark focus-visible:border-dividerDark"
+        />
       </div>
-      <div v-if="filterText" class="flex flex-col divide-y divide-dividerLight">
-        <details
-          v-for="(map, mapIndex) in searchResults"
-          :key="`map-${mapIndex}`"
-          class="flex flex-col"
-          open
-        >
-          <summary
-            class="flex items-center flex-1 min-w-0 px-6 py-4 font-semibold transition cursor-pointer focus:outline-none text-secondaryLight hover:text-secondaryDark"
-          >
-            <icon-lucide-chevron-right class="mr-2 indicator" />
-            <span
-              class="font-semibold truncate capitalize-first text-secondaryDark"
-            >
-              {{ t(map.item.section) }}
-            </span>
-          </summary>
-          <div class="flex flex-col px-6 pb-4 space-y-2">
-            <AppShortcutsEntry
-              v-for="(shortcut, index) in map.item.shortcuts"
-              :key="`shortcut-${index}`"
-              :shortcut="shortcut"
-            />
-          </div>
-        </details>
-        <div
-          v-if="searchResults.length === 0"
-          class="flex flex-col items-center justify-center p-4 text-secondaryLight"
+      <div class="flex flex-col divide-y divide-dividerLight">
+        <HoppSmartPlaceholder
+          v-if="isEmpty(shortcutsResults)"
+          :text="`${t('state.nothing_found')} ‟${filterText}”`"
         >
           <icon-lucide-search class="pb-2 opacity-75 svg-icons" />
-          <span class="my-2 text-center flex flex-col">
-            {{ t("state.nothing_found") }}
-            <span class="break-all">"{{ filterText }}"</span>
-          </span>
-        </div>
-      </div>
-      <div v-else class="flex flex-col divide-y divide-dividerLight">
+        </HoppSmartPlaceholder>
+
         <details
-          v-for="(map, mapIndex) in mappings"
-          :key="`map-${mapIndex}`"
+          v-for="(sectionResults, sectionTitle) in shortcutsResults"
+          v-else
+          :key="`section-${sectionTitle}`"
           class="flex flex-col"
           open
         >
@@ -64,13 +34,13 @@
             <span
               class="font-semibold truncate capitalize-first text-secondaryDark"
             >
-              {{ t(map.section) }}
+              {{ sectionTitle }}
             </span>
           </summary>
           <div class="flex flex-col px-6 pb-4 space-y-2">
             <AppShortcutsEntry
-              v-for="(shortcut, shortcutIndex) in map.shortcuts"
-              :key="`map-${mapIndex}-shortcut-${shortcutIndex}`"
+              v-for="(shortcut, index) in sectionResults"
+              :key="`shortcut-${index}`"
               :shortcut="shortcut"
             />
           </div>
@@ -81,10 +51,11 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref } from "vue"
-import Fuse from "fuse.js"
-import mappings from "~/helpers/shortcuts"
+import { computed, onBeforeMount, ref } from "vue"
+import { ShortcutDef, getShortcuts } from "~/helpers/shortcuts"
+import MiniSearch from "minisearch"
 import { useI18n } from "@composables/i18n"
+import { groupBy, isEmpty } from "lodash-es"
 
 const t = useI18n()
 
@@ -92,15 +63,33 @@ defineProps<{
   show: boolean
 }>()
 
-const options = {
-  keys: ["shortcuts.label"],
-}
+const minisearch = new MiniSearch({
+  fields: ["label", "keys", "section"],
+  idField: "label",
+  storeFields: ["label", "keys", "section"],
+  searchOptions: {
+    fuzzy: true,
+    prefix: true,
+  },
+})
 
-const fuse = new Fuse(mappings, options)
+const shortcuts = getShortcuts(t)
+
+onBeforeMount(() => {
+  minisearch.addAllAsync(shortcuts)
+})
 
 const filterText = ref("")
 
-const searchResults = computed(() => fuse.search(filterText.value))
+const shortcutsResults = computed(() => {
+  // If there are no search text, return all the shortcuts
+  const results =
+    filterText.value.length > 0
+      ? minisearch.search(filterText.value)
+      : shortcuts
+
+  return groupBy(results, "section") as Record<string, ShortcutDef[]>
+})
 
 const emit = defineEmits<{
   (e: "close"): void

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

@@ -1,7 +1,7 @@
 <template>
   <div class="flex items-center py-1">
     <span class="flex flex-1 mr-4">
-      {{ t(shortcut.label) }}
+      {{ shortcut.label }}
     </span>
     <kbd
       v-for="(key, index) in shortcut.keys"
@@ -14,14 +14,9 @@
 </template>
 
 <script setup lang="ts">
-import { useI18n } from "@composables/i18n"
-
-const t = useI18n()
+import { ShortcutDef } from "~/helpers/shortcuts"
 
 defineProps<{
-  shortcut: {
-    label: string
-    keys: string[]
-  }
+  shortcut: ShortcutDef
 }>()
 </script>

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

@@ -1,6 +1,6 @@
 <template>
   <div class="flex flex-col items-center justify-center text-secondaryLight">
-    <div class="flex pb-4 my-4 space-x-2">
+    <div class="flex mb-4 space-x-2">
       <div class="flex flex-col items-end space-y-4 text-right">
         <span class="flex items-center flex-1">
           {{ t("shortcut.request.send_request") }}
@@ -22,10 +22,11 @@
         </div>
         <div class="flex">
           <kbd class="shortcut-key">{{ getSpecialKey() }}</kbd>
-          <kbd class="shortcut-key">K</kbd>
+          <kbd class="shortcut-key">/</kbd>
         </div>
         <div class="flex">
-          <kbd class="shortcut-key">/</kbd>
+          <kbd class="shortcut-key">{{ getSpecialKey() }}</kbd>
+          <kbd class="shortcut-key">K</kbd>
         </div>
         <div class="flex">
           <kbd class="shortcut-key">?</kbd>

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

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

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

@@ -0,0 +1,123 @@
+<template>
+  <button
+    ref="el"
+    class="flex items-center flex-1 px-6 py-4 font-medium space-x-4 transition cursor-pointer relative search-entry focus:outline-none"
+    :class="{ 'active bg-primaryLight text-secondaryDark': active }"
+    tabindex="-1"
+    @click="emit('action')"
+    @keydown.enter="emit('action')"
+  >
+    <component
+      :is="entry.icon"
+      class="opacity-50 svg-icons"
+      :class="{ 'opacity-100': active }"
+    />
+    <template
+      v-if="entry.text.type === 'text' && typeof entry.text.text === 'string'"
+    >
+      <span class="block truncate">
+        {{ entry.text.text }}
+      </span>
+    </template>
+    <template
+      v-else-if="entry.text.type === 'text' && Array.isArray(entry.text.text)"
+    >
+      <template
+        v-for="(labelPart, labelPartIndex) in entry.text.text"
+        :key="`label-${labelPart}-${labelPartIndex}`"
+      >
+        <span class="block truncate">
+          {{ labelPart }}
+        </span>
+        <icon-lucide-chevron-right
+          v-if="labelPartIndex < entry.text.text.length - 1"
+          class="flex flex-shrink-0"
+        />
+      </template>
+    </template>
+    <template v-else-if="entry.text.type === 'custom'">
+      <span class="block truncate">
+        <component
+          :is="entry.text.component"
+          v-bind="entry.text.componentProps"
+        />
+      </span>
+    </template>
+    <span v-if="formattedShortcutKeys" class="block truncate">
+      <kbd
+        v-for="(key, keyIndex) in formattedShortcutKeys"
+        :key="`key-${String(keyIndex)}`"
+        class="shortcut-key"
+      >
+        {{ key }}
+      </kbd>
+    </span>
+  </button>
+</template>
+
+<script lang="ts">
+import { getPlatformSpecialKey } from "~/helpers/platformutils"
+import { SpotlightSearcherResult } from "~/services/spotlight"
+
+const SPECIAL_KEY_CHARS: Record<string, string> = {
+  ctrl: getPlatformSpecialKey(),
+  alt: getPlatformAlternateKey(),
+  up: "↑",
+  down: "↓",
+  enter: "↩",
+}
+</script>
+
+<script setup lang="ts">
+import { computed, watch, ref } from "vue"
+import { capitalize } from "lodash-es"
+import { getPlatformAlternateKey } from "~/helpers/platformutils"
+
+const el = ref<HTMLElement>()
+
+const props = defineProps<{
+  entry: SpotlightSearcherResult
+  active: boolean
+}>()
+
+const formattedShortcutKeys = computed(
+  () =>
+    props.entry.meta?.keyboardShortcut?.map((key) => {
+      return SPECIAL_KEY_CHARS[key] ?? capitalize(key)
+    })
+)
+
+const emit = defineEmits<{
+  (e: "action"): void
+}>()
+
+watch(
+  () => props.active,
+  (active) => {
+    if (active) {
+      el.value?.scrollIntoView({
+        behavior: "smooth",
+        block: "nearest",
+        inline: "nearest",
+      })
+    }
+  }
+)
+</script>
+
+<style lang="scss" scoped>
+.search-entry {
+  @apply after:absolute;
+  @apply after:top-0;
+  @apply after:left-0;
+  @apply after:bottom-0;
+  @apply after:bg-transparent;
+  @apply after:z-2;
+  @apply after:w-0.5;
+  @apply after:content-DEFAULT;
+
+  &.active {
+    @apply after:bg-accentLight;
+  }
+}
+</style>

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

@@ -0,0 +1,30 @@
+<template>
+  <span class="flex flex-1 items-center space-x-2">
+    <span class="block truncate">
+      {{ dateTimeText }}
+    </span>
+    <icon-lucide-chevron-right class="flex flex-shrink-0" />
+    <span class="block truncate">
+      {{ historyEntry.request.url }}
+    </span>
+    <span
+      class="font-semibold truncate text-tiny flex flex-shrink-0 border border-dividerDark rounded-md px-1"
+    >
+      {{ historyEntry.request.query.split("\n")[0] }}
+    </span>
+  </span>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue"
+import { shortDateTime } from "~/helpers/utils/date"
+import { GQLHistoryEntry } from "~/newstore/history"
+
+const props = defineProps<{
+  historyEntry: GQLHistoryEntry
+}>()
+
+const dateTimeText = computed(() =>
+  shortDateTime(props.historyEntry.updatedOn!)
+)
+</script>

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

@@ -0,0 +1,65 @@
+<template>
+  <span class="flex flex-1 space-x-2 items-center">
+    <template v-for="(folder, index) in pathFolders" :key="index">
+      <span class="block" :class="{ truncate: index !== 0 }">
+        {{ folder.name }}
+      </span>
+      <icon-lucide-chevron-right class="flex flex-shrink-0" />
+    </template>
+    <span v-if="request" class="block">
+      {{ request.name }}
+    </span>
+  </span>
+</template>
+
+<script setup lang="ts">
+import { HoppCollection, HoppGQLRequest } from "@hoppscotch/data"
+import { computed } from "vue"
+import { graphqlCollectionStore } from "~/newstore/collections"
+
+const props = defineProps<{
+  folderPath: string
+}>()
+
+const pathFolders = computed(() => {
+  try {
+    const folderIndicies = props.folderPath
+      .split("/")
+      .slice(0, -1)
+      .map((x) => parseInt(x))
+
+    const pathItems: HoppCollection<HoppGQLRequest>[] = []
+
+    let currentFolder =
+      graphqlCollectionStore.value.state[folderIndicies.shift()!]
+
+    pathItems.push(currentFolder)
+
+    while (folderIndicies.length > 0) {
+      const folderIndex = folderIndicies.shift()!
+
+      const folder = currentFolder.folders[folderIndex]
+      pathItems.push(folder)
+
+      currentFolder = folder
+    }
+
+    return pathItems
+  } catch (e) {
+    console.error(e)
+    return []
+  }
+})
+
+const request = computed(() => {
+  try {
+    const requestIndex = parseInt(props.folderPath.split("/").at(-1)!)
+
+    return pathFolders.value[pathFolders.value.length - 1].requests[
+      requestIndex
+    ]
+  } catch (e) {
+    return null
+  }
+})
+</script>

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

@@ -0,0 +1,43 @@
+<template>
+  <span class="flex flex-1 items-center space-x-2">
+    <span class="block truncate">
+      {{ dateTimeText }}
+    </span>
+    <icon-lucide-chevron-right class="flex flex-shrink-0" />
+    <span
+      class="font-semibold truncate text-tiny flex flex-shrink-0 border border-dividerDark rounded-md px-1"
+      :class="entryStatus.className"
+    >
+      {{ historyEntry.request.method }}
+    </span>
+    <span class="block truncate">
+      {{ historyEntry.request.endpoint }}
+    </span>
+  </span>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue"
+import findStatusGroup from "~/helpers/findStatusGroup"
+import { shortDateTime } from "~/helpers/utils/date"
+import { RESTHistoryEntry } from "~/newstore/history"
+
+const props = defineProps<{
+  historyEntry: RESTHistoryEntry
+}>()
+
+const dateTimeText = computed(() =>
+  shortDateTime(props.historyEntry.updatedOn!)
+)
+
+const entryStatus = computed(() => {
+  const foundStatusGroup = findStatusGroup(
+    props.historyEntry.responseMeta.statusCode
+  )
+  return (
+    foundStatusGroup || {
+      className: "",
+    }
+  )
+})
+</script>

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

@@ -0,0 +1,71 @@
+<template>
+  <span class="flex flex-1 items-center space-x-2">
+    <template v-for="(folder, index) in pathFolders" :key="index">
+      <span class="block" :class="{ truncate: index !== 0 }">
+        {{ folder.name }}
+      </span>
+      <icon-lucide-chevron-right class="flex flex-shrink-0" />
+    </template>
+    <span
+      v-if="request"
+      class="font-semibold truncate text-tiny flex flex-shrink-0 border border-dividerDark rounded-md px-1"
+      :class="getMethodLabelColorClassOf(request)"
+    >
+      {{ request.method.toUpperCase() }}
+    </span>
+    <span v-if="request" class="block">
+      {{ request.name }}
+    </span>
+  </span>
+</template>
+
+<script setup lang="ts">
+import { HoppCollection, HoppRESTRequest } from "@hoppscotch/data"
+import { computed } from "vue"
+import { restCollectionStore } from "~/newstore/collections"
+import { getMethodLabelColorClassOf } from "~/helpers/rest/labelColoring"
+
+const props = defineProps<{
+  folderPath: string
+}>()
+
+const pathFolders = computed(() => {
+  try {
+    const folderIndicies = props.folderPath
+      .split("/")
+      .slice(0, -1)
+      .map((x) => parseInt(x))
+
+    const pathItems: HoppCollection<HoppRESTRequest>[] = []
+
+    let currentFolder = restCollectionStore.value.state[folderIndicies.shift()!]
+    pathItems.push(currentFolder)
+
+    while (folderIndicies.length > 0) {
+      const folderIndex = folderIndicies.shift()!
+
+      const folder = currentFolder.folders[folderIndex]
+      pathItems.push(folder)
+
+      currentFolder = folder
+    }
+
+    return pathItems
+  } catch (e) {
+    console.error(e)
+    return []
+  }
+})
+
+const request = computed(() => {
+  try {
+    const requestIndex = parseInt(props.folderPath.split("/").at(-1)!)
+
+    return pathFolders.value[pathFolders.value.length - 1].requests[
+      requestIndex
+    ]
+  } catch (e) {
+    return null
+  }
+})
+</script>

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

@@ -0,0 +1,267 @@
+<template>
+  <HoppSmartModal
+    v-if="show"
+    styles="sm:max-w-lg"
+    full-width
+    @close="emit('hide-modal')"
+  >
+    <template #body>
+      <div class="flex flex-col border-b transition border-divider">
+        <div class="flex items-center">
+          <input
+            id="command"
+            v-model="search"
+            v-focus
+            type="text"
+            autocomplete="off"
+            name="command"
+            :placeholder="`${t('app.type_a_command_search')}`"
+            class="flex flex-1 text-base bg-transparent text-secondaryDark px-6 py-5"
+          />
+          <HoppSmartSpinner v-if="searchSession?.loading" class="mr-6" />
+        </div>
+      </div>
+      <div
+        v-if="searchSession && search.length > 0"
+        class="flex flex-col flex-1 overflow-y-auto border-b border-divider divide-y divide-dividerLight"
+      >
+        <div
+          v-for="([sectionID, sectionResult], sectionIndex) in scoredResults"
+          :key="`section-${sectionID}`"
+          class="flex flex-col"
+        >
+          <h5
+            class="px-6 py-2 bg-primaryContrast z-10 text-secondaryLight sticky top-0"
+          >
+            {{ sectionResult.title }}
+          </h5>
+          <AppSpotlightEntry
+            v-for="(result, entryIndex) in sectionResult.results"
+            :key="`result-${result.id}`"
+            :entry="result"
+            :active="isEqual(selectedEntry, [sectionIndex, entryIndex])"
+            @mouseover="selectedEntry = [sectionIndex, entryIndex]"
+            @action="runAction(sectionID, result)"
+          />
+        </div>
+        <HoppSmartPlaceholder
+          v-if="search.length > 0 && scoredResults.length === 0"
+          :text="`${t('state.nothing_found')} ‟${search}”`"
+        >
+          <template #icon>
+            <icon-lucide-search class="pb-2 opacity-75 svg-icons" />
+          </template>
+          <HoppButtonSecondary
+            :label="t('action.clear')"
+            outline
+            @click="search = ''"
+          />
+        </HoppSmartPlaceholder>
+      </div>
+      <div
+        class="flex flex-shrink-0 text-tiny text-secondaryLight p-4 justify-between whitespace-nowrap overflow-auto <sm:hidden"
+      >
+        <div class="flex items-center">
+          <kbd class="shortcut-key">↑</kbd>
+          <kbd class="shortcut-key">↓</kbd>
+          <span class="mx-2 truncate">
+            {{ t("action.to_navigate") }}
+          </span>
+          <kbd class="shortcut-key">↩</kbd>
+          <span class="ml-2 truncate">
+            {{ t("action.to_select") }}
+          </span>
+        </div>
+        <div class="flex items-center">
+          <kbd class="shortcut-key">ESC</kbd>
+          <span class="ml-2 truncate">
+            {{ t("action.to_close") }}
+          </span>
+        </div>
+      </div>
+    </template>
+  </HoppSmartModal>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch } from "vue"
+import { useService } from "dioc/vue"
+import { useI18n } from "@composables/i18n"
+import {
+  SpotlightService,
+  SpotlightSearchState,
+  SpotlightSearcherResult,
+} from "~/services/spotlight"
+import { isEqual } from "lodash-es"
+import { HistorySpotlightSearcherService } from "~/services/spotlight/searchers/history.searcher"
+import { UserSpotlightSearcherService } from "~/services/spotlight/searchers/user.searcher"
+import { NavigationSpotlightSearcherService } from "~/services/spotlight/searchers/navigation.searcher"
+import { SettingsSpotlightSearcherService } from "~/services/spotlight/searchers/settings.searcher"
+import { CollectionsSpotlightSearcherService } from "~/services/spotlight/searchers/collections.searcher"
+import { MiscellaneousSpotlightSearcherService } from "~/services/spotlight/searchers/miscellaneous.searcher"
+import { TabSpotlightSearcherService } from "~/services/spotlight/searchers/tab.searcher"
+import { GeneralSpotlightSearcherService } from "~/services/spotlight/searchers/general.searcher"
+import { ResponseSpotlightSearcherService } from "~/services/spotlight/searchers/response.searcher"
+import { RequestSpotlightSearcherService } from "~/services/spotlight/searchers/request.searcher"
+import {
+  EnvironmentsSpotlightSearcherService,
+  SwitchEnvSpotlightSearcherService,
+} from "~/services/spotlight/searchers/environment.searcher"
+import {
+  SwitchWorkspaceSpotlightSearcherService,
+  WorkspaceSpotlightSearcherService,
+} from "~/services/spotlight/searchers/workspace.searcher"
+
+const t = useI18n()
+
+const props = defineProps<{
+  show: boolean
+}>()
+
+const emit = defineEmits<{
+  (e: "hide-modal"): void
+}>()
+
+const spotlightService = useService(SpotlightService)
+
+useService(HistorySpotlightSearcherService)
+useService(UserSpotlightSearcherService)
+useService(NavigationSpotlightSearcherService)
+useService(SettingsSpotlightSearcherService)
+useService(CollectionsSpotlightSearcherService)
+useService(MiscellaneousSpotlightSearcherService)
+useService(TabSpotlightSearcherService)
+useService(GeneralSpotlightSearcherService)
+useService(ResponseSpotlightSearcherService)
+useService(RequestSpotlightSearcherService)
+useService(EnvironmentsSpotlightSearcherService)
+useService(SwitchEnvSpotlightSearcherService)
+useService(WorkspaceSpotlightSearcherService)
+useService(SwitchWorkspaceSpotlightSearcherService)
+
+const search = ref("")
+
+const searchSession = ref<SpotlightSearchState>()
+const stopSearchSession = ref<() => void>()
+
+const scoredResults = computed(() =>
+  Object.entries(searchSession.value?.results ?? {}).sort(
+    ([, sectionA], [, sectionB]) => sectionB.avgScore - sectionA.avgScore
+  )
+)
+
+const { selectedEntry } = newUseArrowKeysForNavigation()
+
+watch(
+  () => props.show,
+  (show) => {
+    search.value = ""
+
+    if (show) {
+      const [session, onSessionEnd] =
+        spotlightService.createSearchSession(search)
+
+      searchSession.value = session.value
+      stopSearchSession.value = onSessionEnd
+    } else {
+      stopSearchSession.value?.()
+      stopSearchSession.value = undefined
+      searchSession.value = undefined
+    }
+  }
+)
+
+function runAction(searcherID: string, result: SpotlightSearcherResult) {
+  spotlightService.selectSearchResult(searcherID, result)
+  emit("hide-modal")
+}
+
+function newUseArrowKeysForNavigation() {
+  const selectedEntry = ref<[number, number]>([0, 0]) // [sectionIndex, entryIndex]
+
+  watch(search, () => {
+    selectedEntry.value = [0, 0]
+  })
+
+  const onArrowDown = () => {
+    // If no entries, do nothing
+    if (scoredResults.value.length === 0) return
+
+    const [sectionIndex, entryIndex] = selectedEntry.value
+
+    const [, section] = scoredResults.value[sectionIndex]
+
+    if (entryIndex < section.results.length - 1) {
+      selectedEntry.value = [sectionIndex, entryIndex + 1]
+    } else if (sectionIndex < scoredResults.value.length - 1) {
+      selectedEntry.value = [sectionIndex + 1, 0]
+    } else {
+      selectedEntry.value = [0, 0]
+    }
+  }
+
+  const onArrowUp = () => {
+    // If no entries, do nothing
+    if (scoredResults.value.length === 0) return
+
+    const [sectionIndex, entryIndex] = selectedEntry.value
+
+    if (entryIndex > 0) {
+      selectedEntry.value = [sectionIndex, entryIndex - 1]
+    } else if (sectionIndex > 0) {
+      const [, section] = scoredResults.value[sectionIndex - 1]
+      selectedEntry.value = [sectionIndex - 1, section.results.length - 1]
+    } else {
+      selectedEntry.value = [
+        scoredResults.value.length - 1,
+        scoredResults.value[scoredResults.value.length - 1][1].results.length -
+          1,
+      ]
+    }
+  }
+
+  const onEnter = () => {
+    // If no entries, do nothing
+    if (scoredResults.value.length === 0) return
+
+    const [sectionIndex, entryIndex] = selectedEntry.value
+    const [sectionID, section] = scoredResults.value[sectionIndex]
+    const result = section.results[entryIndex]
+
+    runAction(sectionID, result)
+  }
+
+  function handleKeyPress(e: KeyboardEvent) {
+    if (e.key === "ArrowUp") {
+      e.preventDefault()
+      e.stopPropagation()
+
+      onArrowUp()
+    } else if (e.key === "ArrowDown") {
+      e.preventDefault()
+      e.stopPropagation()
+
+      onArrowDown()
+    } else if (e.key === "Enter") {
+      e.preventDefault()
+      e.stopPropagation()
+
+      onEnter()
+    }
+  }
+
+  watch(
+    () => props.show,
+    (show) => {
+      if (show) {
+        window.addEventListener("keydown", handleKeyPress)
+      } else {
+        window.removeEventListener("keydown", handleKeyPress)
+      }
+    }
+  )
+
+  return { selectedEntry }
+}
+</script>
+~/services/spotlight/searchers/workspace.searcher

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

@@ -6,21 +6,13 @@
     @close="hideModal"
   >
     <template #body>
-      <div class="flex flex-col">
-        <input
-          id="selectLabelAdd"
-          v-model="name"
-          v-focus
-          class="input floating-input"
-          placeholder=" "
-          type="text"
-          autocomplete="off"
-          @keyup.enter="addNewCollection"
-        />
-        <label for="selectLabelAdd">
-          {{ t("action.label") }}
-        </label>
-      </div>
+      <HoppSmartInput
+        v-model="editingName"
+        placeholder=" "
+        :label="t('action.label')"
+        input-styles="floating-input"
+        @submit="addNewCollection"
+      />
     </template>
     <template #footer>
       <span class="flex space-x-2">
@@ -65,28 +57,28 @@ const emit = defineEmits<{
   (e: "hide-modal"): void
 }>()
 
-const name = ref("")
+const editingName = ref("")
 
 watch(
   () => props.show,
   (show) => {
     if (!show) {
-      name.value = ""
+      editingName.value = ""
     }
   }
 )
 
 const addNewCollection = () => {
-  if (!name.value) {
+  if (!editingName.value) {
     toast.error(t("collection.invalid_name"))
     return
   }
 
-  emit("submit", name.value)
+  emit("submit", editingName.value)
 }
 
 const hideModal = () => {
-  name.value = ""
+  editingName.value = ""
   emit("hide-modal")
 }
 </script>

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

@@ -6,21 +6,13 @@
     @close="emit('hide-modal')"
   >
     <template #body>
-      <div class="flex flex-col">
-        <input
-          id="selectLabelAddFolder"
-          v-model="name"
-          v-focus
-          class="input floating-input"
-          placeholder=" "
-          type="text"
-          autocomplete="off"
-          @keyup.enter="addFolder"
-        />
-        <label for="selectLabelAddFolder">
-          {{ t("action.label") }}
-        </label>
-      </div>
+      <HoppSmartInput
+        v-model="editingName"
+        placeholder=" "
+        input-styles="floating-input"
+        :label="t('action.label')"
+        @submit="addFolder"
+      />
     </template>
     <template #footer>
       <span class="flex space-x-2">
@@ -65,27 +57,27 @@ const emit = defineEmits<{
   (e: "add-folder", name: string): void
 }>()
 
-const name = ref("")
+const editingName = ref("")
 
 watch(
   () => props.show,
   (show) => {
     if (!show) {
-      name.value = ""
+      editingName.value = ""
     }
   }
 )
 
 const addFolder = () => {
-  if (name.value.trim() === "") {
+  if (editingName.value.trim() === "") {
     toast.error(t("folder.invalid_name"))
     return
   }
-  emit("add-folder", name.value)
+  emit("add-folder", editingName.value)
 }
 
 const hideModal = () => {
-  name.value = ""
+  editingName.value = ""
   emit("hide-modal")
 }
 </script>

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

@@ -6,19 +6,13 @@
     @close="$emit('hide-modal')"
   >
     <template #body>
-      <div class="flex flex-col">
-        <input
-          id="selectLabelAddRequest"
-          v-model="name"
-          v-focus
-          class="input floating-input"
-          placeholder=" "
-          type="text"
-          autocomplete="off"
-          @keyup.enter="addRequest"
-        />
-        <label for="selectLabelAddRequest">{{ t("action.label") }}</label>
-      </div>
+      <HoppSmartInput
+        v-model="editingName"
+        placeholder=" "
+        :label="t('action.label')"
+        input-styles="floating-input"
+        @submit="addRequest"
+      />
     </template>
     <template #footer>
       <span class="flex space-x-2">
@@ -64,23 +58,23 @@ const emit = defineEmits<{
   (event: "add-request", name: string): void
 }>()
 
-const name = ref("")
+const editingName = ref("")
 
 watch(
   () => props.show,
   (show) => {
     if (show) {
-      name.value = currentActiveTab.value.document.request.name
+      editingName.value = currentActiveTab.value.document.request.name
     }
   }
 )
 
 const addRequest = () => {
-  if (name.value.trim() === "") {
+  if (editingName.value.trim() === "") {
     toast.error(`${t("error.empty_req_name")}`)
     return
   }
-  emit("add-request", name.value)
+  emit("add-request", editingName.value)
 }
 
 const hideModal = () => {

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

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

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

@@ -6,21 +6,13 @@
     @close="hideModal"
   >
     <template #body>
-      <div class="flex flex-col">
-        <input
-          id="selectLabelEdit"
-          v-model="name"
-          v-focus
-          class="input floating-input"
-          placeholder=" "
-          type="text"
-          autocomplete="off"
-          @keyup.enter="saveCollection"
-        />
-        <label for="selectLabelEdit">
-          {{ t("action.label") }}
-        </label>
-      </div>
+      <HoppSmartInput
+        v-model="editingName"
+        placeholder=" "
+        input-styles="floating-input"
+        :label="t('action.label')"
+        @submit="saveCollection"
+      />
     </template>
     <template #footer>
       <span class="flex space-x-2">
@@ -67,26 +59,26 @@ const emit = defineEmits<{
   (e: "hide-modal"): void
 }>()
 
-const name = ref("")
+const editingName = ref("")
 
 watch(
   () => props.editingCollectionName,
   (newName) => {
-    name.value = newName
+    editingName.value = newName
   }
 )
 
 const saveCollection = () => {
-  if (name.value.trim() === "") {
+  if (editingName.value.trim() === "") {
     toast.error(t("collection.invalid_name"))
     return
   }
 
-  emit("submit", name.value)
+  emit("submit", editingName.value)
 }
 
 const hideModal = () => {
-  name.value = ""
+  editingName.value = ""
   emit("hide-modal")
 }
 </script>

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

@@ -6,21 +6,13 @@
     @close="emit('hide-modal')"
   >
     <template #body>
-      <div class="flex flex-col">
-        <input
-          id="selectLabelEditFolder"
-          v-model="name"
-          v-focus
-          class="input floating-input"
-          placeholder=" "
-          type="text"
-          autocomplete="off"
-          @keyup.enter="editFolder"
-        />
-        <label for="selectLabelEditFolder">
-          {{ t("action.label") }}
-        </label>
-      </div>
+      <HoppSmartInput
+        v-model="editingName"
+        placeholder=" "
+        :label="t('action.label')"
+        input-styles="floating-input"
+        @submit="editFolder"
+      />
     </template>
     <template #footer>
       <span class="flex space-x-2">
@@ -67,26 +59,26 @@ const emit = defineEmits<{
   (e: "hide-modal"): void
 }>()
 
-const name = ref("")
+const editingName = ref("")
 
 watch(
   () => props.editingFolderName,
   (newName) => {
-    name.value = newName
+    editingName.value = newName
   }
 )
 
 const editFolder = () => {
-  if (name.value.trim() === "") {
+  if (editingName.value.trim() === "") {
     toast.error(t("folder.invalid_name"))
     return
   }
 
-  emit("submit", name.value)
+  emit("submit", editingName.value)
 }
 
 const hideModal = () => {
-  name.value = ""
+  editingName.value = ""
   emit("hide-modal")
 }
 </script>

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

@@ -6,21 +6,13 @@
     @close="hideModal"
   >
     <template #body>
-      <div class="flex flex-col">
-        <input
-          id="selectLabelEditReq"
-          v-model="name"
-          v-focus
-          class="input floating-input"
-          placeholder=" "
-          type="text"
-          autocomplete="off"
-          @keyup.enter="editRequest"
-        />
-        <label for="selectLabelEditReq">
-          {{ t("action.label") }}
-        </label>
-      </div>
+      <HoppSmartInput
+        v-model="editingName"
+        placeholder=" "
+        :label="t('action.label')"
+        input-styles="floating-input"
+        @submit="editRequest"
+      />
     </template>
     <template #footer>
       <span class="flex space-x-2">
@@ -68,19 +60,19 @@ const emit = defineEmits<{
   (e: "update:modelValue", value: string): void
 }>()
 
-const name = useVModel(props, "modelValue")
+const editingName = useVModel(props, "modelValue")
 
 const editRequest = () => {
-  if (name.value.trim() === "") {
+  if (editingName.value.trim() === "") {
     toast.error(t("request.invalid_name"))
     return
   }
 
-  emit("submit", name.value)
+  emit("submit", editingName.value)
 }
 
 const hideModal = () => {
-  name.value = ""
+  editingName.value = ""
   emit("hide-modal")
 }
 </script>

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

@@ -32,7 +32,7 @@
       </span>
     </div>
     <div class="flex flex-col flex-1">
-      <SmartTree :adapter="myAdapter">
+      <HoppSmartTree :adapter="myAdapter">
         <template
           #content="{ node, toggleChildren, isOpen, highlightChildren }"
         >
@@ -243,49 +243,33 @@
           />
         </template>
         <template #emptyNode="{ node }">
-          <div
+          <HoppSmartPlaceholder
             v-if="filterText.length !== 0 && filteredCollections.length === 0"
-            class="flex flex-col items-center justify-center p-4 text-secondaryLight"
+            :text="`${t('state.nothing_found')} ‟${filterText}”`"
           >
-            <icon-lucide-search class="pb-2 opacity-75 svg-icons" />
-            <span class="my-2 text-center">
-              {{ t("state.nothing_found") }} "{{ filterText }}"
-            </span>
-          </div>
-          <div v-else-if="node === null">
-            <div
-              class="flex flex-col items-center justify-center p-4 text-secondaryLight"
-            >
-              <img
-                :src="`/images/states/${colorMode.value}/pack.svg`"
-                loading="lazy"
-                class="inline-flex flex-col object-contain object-center w-16 h-16 mb-4"
-                :alt="`${t('empty.collections')}`"
-              />
-              <span class="pb-4 text-center">
-                {{ t("empty.collections") }}
-              </span>
-              <HoppButtonSecondary
-                :label="t('add.new')"
-                filled
-                outline
-                @click="emit('display-modal-add')"
-              />
-            </div>
-          </div>
-          <div
-            v-else-if="node.data.type === 'collections'"
-            class="flex flex-col items-center justify-center p-4 text-secondaryLight"
+            <template #icon>
+              <icon-lucide-search class="pb-2 opacity-75 svg-icons" />
+            </template>
+          </HoppSmartPlaceholder>
+          <HoppSmartPlaceholder
+            v-else-if="node === null"
+            :src="`/images/states/${colorMode.value}/pack.svg`"
+            :alt="`${t('empty.collections')}`"
+            :text="t('empty.collections')"
           >
-            <img
-              :src="`/images/states/${colorMode.value}/pack.svg`"
-              loading="lazy"
-              class="inline-flex flex-col object-contain object-center w-16 h-16 mb-4"
-              :alt="`${t('empty.collection')}`"
+            <HoppButtonSecondary
+              :label="t('add.new')"
+              filled
+              outline
+              @click="emit('display-modal-add')"
             />
-            <span class="pb-4 text-center">
-              {{ t("empty.collection") }}
-            </span>
+          </HoppSmartPlaceholder>
+          <HoppSmartPlaceholder
+            v-else-if="node.data.type === 'collections'"
+            :src="`/images/states/${colorMode.value}/pack.svg`"
+            :alt="`${t('empty.collections')}`"
+            :text="t('empty.collections')"
+          >
             <HoppButtonSecondary
               :label="t('add.new')"
               filled
@@ -298,23 +282,16 @@
                   })
               "
             />
-          </div>
-          <div
+          </HoppSmartPlaceholder>
+          <HoppSmartPlaceholder
             v-else-if="node.data.type === 'folders'"
-            class="flex flex-col items-center justify-center p-4 text-secondaryLight"
+            :src="`/images/states/${colorMode.value}/pack.svg`"
+            :alt="`${t('empty.folder')}`"
+            :text="t('empty.folder')"
           >
-            <img
-              :src="`/images/states/${colorMode.value}/pack.svg`"
-              loading="lazy"
-              class="inline-flex flex-col object-contain object-center w-16 h-16 mb-4"
-              :alt="`${t('empty.folder')}`"
-            />
-            <span class="text-center">
-              {{ t("empty.folder") }}
-            </span>
-          </div>
+          </HoppSmartPlaceholder>
         </template>
-      </SmartTree>
+      </HoppSmartTree>
     </div>
   </div>
 </template>
@@ -326,7 +303,10 @@ import IconHelpCircle from "~icons/lucide/help-circle"
 import { HoppCollection, HoppRESTRequest } from "@hoppscotch/data"
 import { computed, PropType, Ref, toRef } from "vue"
 import { GetMyTeamsQuery } from "~/helpers/backend/graphql"
-import { ChildrenResult, SmartTreeAdapter } from "~/helpers/treeAdapter"
+import {
+  ChildrenResult,
+  SmartTreeAdapter,
+} from "@hoppscotch/ui/dist/helpers/treeAdapter"
 import { useI18n } from "@composables/i18n"
 import { useColorMode } from "@composables/theming"
 import { pipe } from "fp-ts/function"

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

@@ -8,21 +8,15 @@
   >
     <template #body>
       <div class="flex flex-col">
-        <div class="relative flex">
-          <input
-            id="selectLabelSaveReq"
-            v-model="requestName"
-            v-focus
-            class="input floating-input"
-            placeholder=" "
-            type="text"
-            autocomplete="off"
-            @keyup.enter="saveRequestAs"
-          />
-          <label for="selectLabelSaveReq">
-            {{ t("request.name") }}
-          </label>
-        </div>
+        <HoppSmartInput
+          v-model="requestName"
+          styles="relative flex"
+          placeholder=" "
+          :label="t('request.name')"
+          input-styles="floating-input"
+          @submit="saveRequestAs"
+        />
+
         <label class="p-4">
           {{ t("collection.select_location") }}
         </label>
@@ -62,7 +56,7 @@
 </template>
 
 <script setup lang="ts">
-import { nextTick, reactive, ref, watch } from "vue"
+import { computed, nextTick, reactive, ref, watch } from "vue"
 import { cloneDeep } from "lodash-es"
 import {
   HoppGQLRequest,
@@ -77,7 +71,6 @@ import {
   updateTeamRequest,
 } from "~/helpers/backend/mutations/TeamRequest"
 import { Picked } from "~/helpers/types/HoppPicked"
-import { getGQLSession, useGQLRequestName } from "~/newstore/GQLSession"
 import { useI18n } from "@composables/i18n"
 import { useToast } from "@composables/toast"
 import {
@@ -88,8 +81,9 @@ import {
 } from "~/newstore/collections"
 import { GQLError } from "~/helpers/backend/GQLClient"
 import { computedWithControl } from "@vueuse/core"
-import { currentActiveTab } from "~/helpers/rest/tab"
 import { platform } from "~/platform"
+import { currentActiveTab as activeRESTTab } from "~/helpers/rest/tab"
+import { currentActiveTab as activeGQLTab } from "~/helpers/graphql/tab"
 
 const t = useI18n()
 const toast = useToast()
@@ -107,10 +101,12 @@ const props = withDefaults(
   defineProps<{
     show: boolean
     mode: "rest" | "graphql"
+    request?: HoppRESTRequest | HoppGQLRequest | null
   }>(),
   {
     show: false,
     mode: "rest",
+    request: null,
   }
 )
 
@@ -126,22 +122,36 @@ const emit = defineEmits<{
   (e: "hide-modal"): void
 }>()
 
-const gqlRequestName = useGQLRequestName()
-const restRequestName = computedWithControl(
-  () => currentActiveTab.value,
-  () => currentActiveTab.value.document.request.name
+const gqlRequestName = computedWithControl(
+  () => activeGQLTab.value,
+  () => activeGQLTab.value.document.request.name
 )
 
-const requestName = ref(
-  props.mode === "rest" ? restRequestName.value : gqlRequestName.value
+const restRequestName = computedWithControl(
+  () => activeRESTTab.value,
+  () => activeRESTTab.value.document.request.name
 )
 
+const reqName = computed(() => {
+  if (props.request) {
+    return props.request.name
+  } else if (props.mode === "rest") {
+    return restRequestName.value
+  } else {
+    return gqlRequestName.value
+  }
+})
+
+const requestName = ref(reqName.value)
+
 watch(
-  () => [currentActiveTab.value, gqlRequestName.value],
+  () => [activeRESTTab.value, activeGQLTab.value],
   () => {
     if (props.mode === "rest") {
-      requestName.value = currentActiveTab.value?.document.request.name ?? ""
-    } else requestName.value = gqlRequestName.value
+      requestName.value = activeRESTTab.value?.document.request.name ?? ""
+    } else {
+      requestName.value = activeGQLTab.value?.document.request.name ?? ""
+    }
   }
 )
 
@@ -200,8 +210,8 @@ const saveRequestAs = async () => {
 
   const requestUpdated =
     props.mode === "rest"
-      ? cloneDeep(currentActiveTab.value.document.request)
-      : cloneDeep(getGQLSession().request)
+      ? cloneDeep(activeRESTTab.value.document.request)
+      : cloneDeep(activeGQLTab.value.document.request)
 
   requestUpdated.name = requestName.value
 
@@ -214,7 +224,7 @@ const saveRequestAs = async () => {
       requestUpdated
     )
 
-    currentActiveTab.value.document = {
+    activeRESTTab.value.document = {
       request: requestUpdated,
       isDirty: false,
       saveContext: {
@@ -241,7 +251,7 @@ const saveRequestAs = async () => {
       requestUpdated
     )
 
-    currentActiveTab.value.document = {
+    activeRESTTab.value.document = {
       request: requestUpdated,
       isDirty: false,
       saveContext: {
@@ -269,7 +279,7 @@ const saveRequestAs = async () => {
       requestUpdated
     )
 
-    currentActiveTab.value.document = {
+    activeRESTTab.value.document = {
       request: requestUpdated,
       isDirty: false,
       saveContext: {
@@ -429,7 +439,7 @@ const updateTeamCollectionOrFolder = (
       (result) => {
         const { createRequestInCollection } = result
 
-        currentActiveTab.value.document = {
+        activeRESTTab.value.document = {
           request: requestUpdated,
           isDirty: false,
           saveContext: {
@@ -450,7 +460,7 @@ const updateTeamCollectionOrFolder = (
 const requestSaved = () => {
   toast.success(`${t("request.added")}`)
   nextTick(() => {
-    currentActiveTab.value.document.isDirty = false
+    activeRESTTab.value.document.isDirty = false
   })
   hideModal()
 }

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

@@ -46,7 +46,7 @@
       </span>
     </div>
     <div class="flex flex-col overflow-hidden">
-      <SmartTree :adapter="teamAdapter">
+      <HoppSmartTree :adapter="teamAdapter">
         <template
           #content="{ node, toggleChildren, isOpen, highlightChildren }"
         >
@@ -262,70 +262,56 @@
         </template>
         <template #emptyNode="{ node }">
           <div v-if="node === null">
-            <div
-              class="flex flex-col items-center justify-center p-4 text-secondaryLight"
-              @drop="(e) => e.stopPropagation()"
-            >
-              <img
+            <div @drop="(e) => e.stopPropagation()">
+              <HoppSmartPlaceholder
                 :src="`/images/states/${colorMode.value}/pack.svg`"
-                loading="lazy"
-                class="inline-flex flex-col object-contain object-center w-16 h-16 mb-4"
-                :alt="`${t('empty.collection')}`"
-              />
-              <span class="pb-4 text-center">
-                {{ t("empty.collections") }}
-              </span>
-              <HoppButtonSecondary
-                v-if="hasNoTeamAccess"
-                v-tippy="{ theme: 'tooltip' }"
-                disabled
-                filled
-                outline
-                :title="t('team.no_access')"
-                :label="t('action.new')"
-              />
-              <HoppButtonSecondary
-                v-else
-                :icon="IconPlus"
-                :label="t('action.new')"
-                filled
-                outline
-                @click="emit('display-modal-add')"
-              />
+                :alt="`${t('empty.collections')}`"
+                :text="t('empty.collections')"
+              >
+                <HoppButtonSecondary
+                  v-if="hasNoTeamAccess"
+                  v-tippy="{ theme: 'tooltip' }"
+                  disabled
+                  filled
+                  outline
+                  :title="t('team.no_access')"
+                  :label="t('action.new')"
+                />
+                <HoppButtonSecondary
+                  v-else
+                  :icon="IconPlus"
+                  :label="t('action.new')"
+                  filled
+                  outline
+                  @click="emit('display-modal-add')"
+                />
+              </HoppSmartPlaceholder>
             </div>
           </div>
           <div
             v-else-if="node.data.type === 'collections'"
-            class="flex flex-col items-center justify-center p-4 text-secondaryLight"
             @drop="(e) => e.stopPropagation()"
           >
-            <img
+            <HoppSmartPlaceholder
               :src="`/images/states/${colorMode.value}/pack.svg`"
-              loading="lazy"
-              class="inline-flex flex-col object-contain object-center w-16 h-16 mb-4"
-              :alt="`${t('empty.collection')}`"
-            />
-            <span class="pb-4 text-center">
-              {{ t("empty.collections") }}
-            </span>
+              :alt="`${t('empty.collections')}`"
+              :text="t('empty.collections')"
+            >
+            </HoppSmartPlaceholder>
           </div>
           <div
             v-else-if="node.data.type === 'folders'"
-            class="flex flex-col items-center justify-center p-4 text-secondaryLight"
             @drop="(e) => e.stopPropagation()"
           >
-            <img
+            <HoppSmartPlaceholder
               :src="`/images/states/${colorMode.value}/pack.svg`"
-              loading="lazy"
-              class="inline-flex flex-col object-contain object-center w-16 h-16 mb-4"
               :alt="`${t('empty.folder')}`"
-            />
-            <span class="text-center">
-              {{ t("empty.folder") }}
-            </span>
+              :text="t('empty.folder')"
+            >
+            </HoppSmartPlaceholder>
           </div>
         </template>
-      </SmartTree>
+      </HoppSmartTree>
     </div>
   </div>
 </template>
@@ -340,7 +326,10 @@ import { useI18n } from "@composables/i18n"
 import { useColorMode } from "@composables/theming"
 import { TeamCollection } from "~/helpers/teams/TeamCollection"
 import { TeamRequest } from "~/helpers/teams/TeamRequest"
-import { ChildrenResult, SmartTreeAdapter } from "~/helpers/treeAdapter"
+import {
+  ChildrenResult,
+  SmartTreeAdapter,
+} from "@hoppscotch/ui/dist/helpers/treeAdapter"
 import { cloneDeep } from "lodash-es"
 import { HoppRESTRequest } from "@hoppscotch/data"
 import { pipe } from "fp-ts/function"

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

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

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

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

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

@@ -6,21 +6,13 @@
     @close="emit('hide-modal')"
   >
     <template #body>
-      <div class="flex flex-col">
-        <input
-          id="selectLabelGqlAddRequest"
-          v-model="name"
-          v-focus
-          class="input floating-input"
-          placeholder=" "
-          type="text"
-          autocomplete="off"
-          @keyup.enter="addRequest"
-        />
-        <label for="selectLabelGqlAddRequest">
-          {{ t("action.label") }}
-        </label>
-      </div>
+      <HoppSmartInput
+        v-model="editingName"
+        placeholder=" "
+        :label="t('action.label')"
+        input-styles="floating-input"
+        @submit="addRequest"
+      />
     </template>
     <template #footer>
       <span class="flex space-x-2">
@@ -44,7 +36,7 @@
 import { ref, watch } from "vue"
 import { useI18n } from "@composables/i18n"
 import { useToast } from "@composables/toast"
-import { getGQLSession } from "~/newstore/GQLSession"
+import { currentActiveTab } from "~/helpers/graphql/tab"
 
 const toast = useToast()
 const t = useI18n()
@@ -65,24 +57,24 @@ const emit = defineEmits<{
   ): void
 }>()
 
-const name = ref("")
+const editingName = ref("")
 
 watch(
   () => props.show,
   (show) => {
     if (show) {
-      name.value = getGQLSession().request.name
+      editingName.value = currentActiveTab.value?.document.request.name
     }
   }
 )
 
 const addRequest = () => {
-  if (!name.value) {
+  if (!editingName.value) {
     toast.error(`${t("error.empty_req_name")}`)
     return
   }
   emit("add-request", {
-    name: name.value,
+    name: editingName.value,
     path: props.folderPath,
   })
   hideModal()

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

@@ -171,21 +171,14 @@
           @duplicate-request="$emit('duplicate-request', $event)"
           @select="$emit('select', $event)"
         />
-        <div
+        <HoppSmartPlaceholder
           v-if="
             collection.folders.length === 0 && collection.requests.length === 0
           "
-          class="flex flex-col items-center justify-center p-4 text-secondaryLight"
+          :src="`/images/states/${colorMode.value}/pack.svg`"
+          :alt="`${t('empty.collection')}`"
+          :text="t('empty.collection')"
         >
-          <img
-            :src="`/images/states/${colorMode.value}/pack.svg`"
-            loading="lazy"
-            class="inline-flex flex-col object-contain object-center w-16 h-16 mb-4"
-            :alt="`${t('empty.collection')}`"
-          />
-          <span class="pb-4 text-center">
-            {{ t("empty.collection") }}
-          </span>
           <HoppButtonSecondary
             :label="t('add.new')"
             filled
@@ -196,7 +189,7 @@
               })
             "
           />
-        </div>
+        </HoppSmartPlaceholder>
       </div>
     </div>
     <HoppSmartConfirmModal

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

@@ -6,21 +6,13 @@
     @close="hideModal"
   >
     <template #body>
-      <div class="flex flex-col">
-        <input
-          id="selectLabelGqlEdit"
-          v-model="name"
-          v-focus
-          class="input floating-input"
-          placeholder=" "
-          type="text"
-          autocomplete="off"
-          @keyup.enter="saveCollection"
-        />
-        <label for="selectLabelGqlEdit">
-          {{ t("action.label") }}
-        </label>
-      </div>
+      <HoppSmartInput
+        v-model="editingName"
+        placeholder=" "
+        :label="t('action.label')"
+        input-styles="floating-input"
+        @submit="saveCollection"
+      />
     </template>
     <template #footer>
       <span class="flex space-x-2">
@@ -60,17 +52,17 @@ const emit = defineEmits<{
 const t = useI18n()
 const toast = useToast()
 
-const name = ref<string | null>()
+const editingName = ref<string | null>()
 
 watch(
   () => props.editingCollectionName,
   (val) => {
-    name.value = val
+    editingName.value = val
   }
 )
 
 const saveCollection = () => {
-  if (!name.value) {
+  if (!editingName.value) {
     toast.error(`${t("collection.invalid_name")}`)
     return
   }
@@ -78,7 +70,7 @@ const saveCollection = () => {
   // TODO: Better typechecking here ?
   const collectionUpdated = {
     ...(props.editingCollection as any),
-    name: name.value,
+    name: editingName.value,
   }
 
   editGraphqlCollection(props.editingCollectionIndex, collectionUpdated)
@@ -86,7 +78,7 @@ const saveCollection = () => {
 }
 
 const hideModal = () => {
-  name.value = null
+  editingName.value = null
   emit("hide-modal")
 }
 </script>

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

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

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

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

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

@@ -160,25 +160,19 @@
           @duplicate-request="emit('duplicate-request', $event)"
           @select="emit('select', $event)"
         />
-        <div
+
+        <HoppSmartPlaceholder
           v-if="
             folder.folders &&
             folder.folders.length === 0 &&
             folder.requests &&
             folder.requests.length === 0
           "
-          class="flex flex-col items-center justify-center p-4 text-secondaryLight"
+          :src="`/images/states/${colorMode.value}/pack.svg`"
+          :alt="`${t('empty.folder')}`"
+          :text="t('empty.folder')"
         >
-          <img
-            :src="`/images/states/${colorMode.value}/pack.svg`"
-            loading="lazy"
-            class="inline-flex flex-col object-contain object-center w-16 h-16 mb-4"
-            :alt="`${t('empty.folder')}`"
-          />
-          <span class="text-center">
-            {{ t("empty.folder") }}
-          </span>
-        </div>
+        </HoppSmartPlaceholder>
       </div>
     </div>
     <HoppSmartConfirmModal

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

@@ -132,7 +132,7 @@ import { useToast } from "@composables/toast"
 import { HoppGQLRequest, makeGQLRequest } from "@hoppscotch/data"
 import { cloneDeep } from "lodash-es"
 import { removeGraphqlRequest } from "~/newstore/collections"
-import { setGQLSession } from "~/newstore/GQLSession"
+import { createNewTab } from "~/helpers/graphql/tab"
 
 // Template refs
 const tippyActions = ref<any | null>(null)
@@ -179,7 +179,7 @@ const selectRequest = () => {
   if (props.saveRequest) {
     pick()
   } else {
-    setGQLSession({
+    createNewTab({
       request: cloneDeep(
         makeGQLRequest({
           name: props.request.name,
@@ -190,8 +190,7 @@ const selectRequest = () => {
           auth: props.request.auth,
         })
       ),
-      schema: "",
-      response: "",
+      isDirty: false,
     })
   }
 }

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

@@ -11,7 +11,7 @@
         type="search"
         autocomplete="off"
         :placeholder="t('action.search')"
-        class="py-2 pl-4 pr-2 bg-transparent"
+        class="py-2 pl-4 pr-2 bg-transparent !border-0"
       />
       <div
         class="flex justify-between flex-1 flex-shrink-0 border-y bg-primary border-dividerLight"
@@ -60,35 +60,27 @@
         @select="$emit('select', $event)"
       />
     </div>
-    <div
+    <HoppSmartPlaceholder
       v-if="collections.length === 0"
-      class="flex flex-col items-center justify-center p-4 text-secondaryLight"
+      :src="`/images/states/${colorMode.value}/pack.svg`"
+      :alt="`${t('empty.collections')}`"
+      :text="t('empty.collections')"
     >
-      <img
-        :src="`/images/states/${colorMode.value}/pack.svg`"
-        loading="lazy"
-        class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
-        :alt="t('empty.collections')"
-      />
-      <span class="pb-4 text-center">
-        {{ t("empty.collections") }}
-      </span>
       <HoppButtonSecondary
         :label="t('add.new')"
         filled
         outline
         @click="displayModalAdd(true)"
       />
-    </div>
-    <div
+    </HoppSmartPlaceholder>
+    <HoppSmartPlaceholder
       v-if="!(filteredCollections.length !== 0 || collections.length === 0)"
-      class="flex flex-col items-center justify-center p-4 text-secondaryLight"
+      :text="`${t('state.nothing_found')} ‟${filterText}”`"
     >
-      <icon-lucide-search class="pb-2 opacity-75 svg-icons" />
-      <span class="my-2 text-center">
-        {{ t("state.nothing_found") }} "{{ filterText }}"
-      </span>
-    </div>
+      <template #icon>
+        <icon-lucide-search class="pb-2 opacity-75 svg-icons" />
+      </template>
+    </HoppSmartPlaceholder>
     <CollectionsGraphqlAdd
       :show="showModalAdd"
       @hide-modal="displayModalAdd(false)"
@@ -145,7 +137,6 @@ import {
   addGraphqlFolder,
   saveGraphqlRequestAs,
 } from "~/newstore/collections"
-import { getGQLSession, setGQLSession } from "~/newstore/GQLSession"
 
 import IconPlus from "~icons/lucide/plus"
 import IconHelpCircle from "~icons/lucide/help-circle"
@@ -154,6 +145,7 @@ import { useI18n } from "@composables/i18n"
 import { useReadonlyStream } from "@composables/stream"
 import { useColorMode } from "@composables/theming"
 import { platform } from "~/platform"
+import { createNewTab, currentActiveTab } from "~/helpers/graphql/tab"
 
 export default defineComponent({
   props: {
@@ -275,15 +267,15 @@ export default defineComponent({
     },
     onAddRequest({ name, path }) {
       const newRequest = {
-        ...getGQLSession().request,
+        ...currentActiveTab.value.document.request,
         name,
       }
 
       saveGraphqlRequestAs(path, newRequest)
-      setGQLSession({
+
+      createNewTab({
         request: newRequest,
-        schema: "",
-        response: "",
+        isDirty: false,
       })
 
       platform.analytics?.logEvent({

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

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

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

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

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

@@ -1,126 +1,85 @@
 <template>
-  <tippy
-    interactive
-    trigger="click"
-    theme="popover"
-    :on-shown="() => tippyActions!.focus()"
-  >
-    <span
-      v-tippy="{ theme: 'tooltip' }"
-      :title="`${t('environment.select')}`"
-      class="bg-transparent border-b border-dividerLight select-wrapper"
+  <div class="flex divide-x divide-dividerLight">
+    <tippy
+      interactive
+      trigger="click"
+      theme="popover"
+      :on-shown="() => envSelectorActions!.focus()"
     >
-      <HoppButtonSecondary
-        :icon="IconLayers"
-        :label="
-          mdAndLarger
-            ? selectedEnv.type !== 'NO_ENV_SELECTED'
-              ? selectedEnv.name
-              : `${t('environment.select')}`
-            : ''
-        "
-        class="flex-1 !justify-start pr-8 rounded-none"
-      />
-    </span>
-    <template #content="{ hide }">
-      <div
-        ref="tippyActions"
-        role="menu"
-        class="flex flex-col focus:outline-none"
-        tabindex="0"
-        @keyup.escape="hide()"
+      <span
+        v-tippy="{ theme: 'tooltip' }"
+        :title="`${t('environment.select')}`"
+        class="select-wrapper"
       >
-        <HoppSmartItem
-          :label="`${t('environment.no_environment')}`"
-          :info-icon="
-            selectedEnvironmentIndex.type === 'NO_ENV_SELECTED'
-              ? IconCheck
-              : undefined
-          "
-          :active-info-icon="
-            selectedEnvironmentIndex.type === 'NO_ENV_SELECTED'
-          "
-          @click="
-            () => {
-              selectedEnvironmentIndex = { type: 'NO_ENV_SELECTED' }
-              hide()
-            }
+        <HoppButtonSecondary
+          :icon="IconLayers"
+          :label="
+            mdAndLarger
+              ? selectedEnv.type !== 'NO_ENV_SELECTED'
+                ? selectedEnv.name
+                : `${t('environment.select')}`
+              : ''
           "
+          class="flex-1 !justify-start pr-8 rounded-none"
         />
-        <HoppSmartTabs
-          v-model="selectedEnvTab"
-          styles="sticky overflow-x-auto my-2 border border-divider rounded flex-shrink-0 z-10 top-0 bg-primary"
-          render-inactive-tabs
+      </span>
+      <template #content="{ hide }">
+        <div
+          ref="envSelectorActions"
+          role="menu"
+          class="flex flex-col focus:outline-none"
+          tabindex="0"
+          @keyup.escape="hide()"
         >
-          <HoppSmartTab
-            :id="'my-environments'"
-            :label="`${t('environment.my_environments')}`"
+          <HoppSmartItem
+            :label="`${t('environment.no_environment')}`"
+            :info-icon="
+              selectedEnvironmentIndex.type === 'NO_ENV_SELECTED'
+                ? IconCheck
+                : undefined
+            "
+            :active-info-icon="
+              selectedEnvironmentIndex.type === 'NO_ENV_SELECTED'
+            "
+            @click="
+              () => {
+                selectedEnvironmentIndex = { type: 'NO_ENV_SELECTED' }
+                hide()
+              }
+            "
+          />
+          <HoppSmartTabs
+            v-model="selectedEnvTab"
+            :styles="`sticky overflow-x-auto my-2 border border-divider rounded flex-shrink-0 z-0 top-0 bg-primary ${
+              !isTeamSelected || workspace.type === 'personal'
+                ? 'bg-primaryLight'
+                : ''
+            }`"
+            render-inactive-tabs
           >
-            <HoppSmartItem
-              v-for="(gen, index) in myEnvironments"
-              :key="`gen-${index}`"
-              :icon="IconLayers"
-              :label="gen.name"
-              :info-icon="index === selectedEnv.index ? IconCheck : undefined"
-              :active-info-icon="index === selectedEnv.index"
-              @click="
-                () => {
-                  selectedEnvironmentIndex = { type: 'MY_ENV', index: index }
-                  hide()
-                }
-              "
-            />
-            <div
-              v-if="myEnvironments.length === 0"
-              class="flex flex-col items-center justify-center text-secondaryLight"
+            <HoppSmartTab
+              :id="'my-environments'"
+              :label="`${t('environment.my_environments')}`"
             >
-              <img
-                :src="`/images/states/${colorMode.value}/blockchain.svg`"
-                loading="lazy"
-                class="inline-flex flex-col object-contain object-center w-16 h-16 mb-2"
-                :alt="`${t('empty.environments')}`"
-              />
-              <span class="pb-2 text-center">
-                {{ t("empty.environments") }}
-              </span>
-            </div>
-          </HoppSmartTab>
-          <HoppSmartTab
-            :id="'team-environments'"
-            :label="`${t('environment.team_environments')}`"
-            :disabled="!isTeamSelected || workspace.type === 'personal'"
-          >
-            <div
-              v-if="teamListLoading"
-              class="flex flex-col items-center justify-center p-4"
-            >
-              <HoppSmartSpinner class="my-4" />
-              <span class="text-secondaryLight">{{ t("state.loading") }}</span>
-            </div>
-            <div v-else-if="isTeamSelected" class="flex flex-col">
               <HoppSmartItem
-                v-for="(gen, index) in teamEnvironmentList"
-                :key="`gen-team-${index}`"
+                v-for="(gen, index) in myEnvironments"
+                :key="`gen-${index}`"
                 :icon="IconLayers"
-                :label="gen.environment.name"
-                :info-icon="
-                  gen.id === selectedEnv.teamEnvID ? IconCheck : undefined
-                "
-                :active-info-icon="gen.id === selectedEnv.teamEnvID"
+                :label="gen.name"
+                :info-icon="index === selectedEnv.index ? IconCheck : undefined"
+                :active-info-icon="index === selectedEnv.index"
                 @click="
                   () => {
                     selectedEnvironmentIndex = {
-                      type: 'TEAM_ENV',
-                      teamEnvID: gen.id,
-                      teamID: gen.teamID,
-                      environment: gen.environment,
+                      type: 'MY_ENV',
+                      index: index,
                     }
                     hide()
                   }
                 "
               />
               <div
-                v-if="teamEnvironmentList.length === 0"
+                v-if="myEnvironments.length === 0"
                 class="flex flex-col items-center justify-center text-secondaryLight"
               >
                 <img
@@ -133,42 +92,214 @@
                   {{ t("empty.environments") }}
                 </span>
               </div>
+            </HoppSmartTab>
+            <HoppSmartTab
+              :id="'team-environments'"
+              :label="`${t('environment.team_environments')}`"
+              :disabled="!isTeamSelected || workspace.type === 'personal'"
+            >
+              <div
+                v-if="teamListLoading"
+                class="flex flex-col items-center justify-center p-4"
+              >
+                <HoppSmartSpinner class="my-4" />
+                <span class="text-secondaryLight">
+                  {{ t("state.loading") }}
+                </span>
+              </div>
+              <div v-if="isTeamSelected" class="flex flex-col">
+                <HoppSmartItem
+                  v-for="(gen, index) in teamEnvironmentList"
+                  :key="`gen-team-${index}`"
+                  :icon="IconLayers"
+                  :label="gen.environment.name"
+                  :info-icon="
+                    gen.id === selectedEnv.teamEnvID ? IconCheck : undefined
+                  "
+                  :active-info-icon="gen.id === selectedEnv.teamEnvID"
+                  @click="
+                    () => {
+                      selectedEnvironmentIndex = {
+                        type: 'TEAM_ENV',
+                        teamEnvID: gen.id,
+                        teamID: gen.teamID,
+                        environment: gen.environment,
+                      }
+                      hide()
+                    }
+                  "
+                />
+                <div
+                  v-if="teamEnvironmentList.length === 0"
+                  class="flex flex-col items-center justify-center text-secondaryLight"
+                >
+                  <img
+                    :src="`/images/states/${colorMode.value}/blockchain.svg`"
+                    loading="lazy"
+                    class="inline-flex flex-col object-contain object-center w-16 h-16 mb-2"
+                    :alt="`${t('empty.environments')}`"
+                  />
+                  <span class="pb-2 text-center">
+                    {{ t("empty.environments") }}
+                  </span>
+                </div>
+              </div>
+              <div
+                v-if="!teamListLoading && teamAdapterError"
+                class="flex flex-col items-center py-4"
+              >
+                <icon-lucide-help-circle class="mb-4 svg-icons" />
+                {{ getErrorMessage(teamAdapterError) }}
+              </div>
+            </HoppSmartTab>
+          </HoppSmartTabs>
+        </div>
+      </template>
+    </tippy>
+    <span class="flex">
+      <tippy
+        interactive
+        trigger="click"
+        theme="popover"
+        :on-shown="() => envQuickPeekActions!.focus()"
+      >
+        <HoppButtonSecondary
+          v-tippy="{ theme: 'tooltip' }"
+          :title="`${t('environment.quick_peek')}`"
+          :icon="IconEye"
+          class="!px-4"
+        />
+        <template #content="{ hide }">
+          <div
+            ref="envQuickPeekActions"
+            role="menu"
+            class="flex flex-col focus:outline-none"
+            tabindex="0"
+            @keyup.escape="hide()"
+          >
+            <div
+              class="sticky top-0 font-semibold truncate flex items-center justify-between text-secondaryDark bg-primary border border-divider rounded pl-4"
+            >
+              {{ t("environment.global_variables") }}
+              <HoppButtonSecondary
+                v-tippy="{ theme: 'tooltip' }"
+                :title="t('action.edit')"
+                :icon="IconEdit"
+                @click="
+                  () => {
+                    editGlobalEnv()
+                    hide()
+                  }
+                "
+              />
+            </div>
+            <div class="my-2 flex flex-col flex-1 space-y-2 pl-4 pr-2">
+              <div class="flex flex-1 space-x-4">
+                <span class="w-1/4 min-w-32 truncate text-tiny font-semibold">
+                  {{ t("environment.name") }}
+                </span>
+                <span class="w-full min-w-32 truncate text-tiny font-semibold">
+                  {{ t("environment.value") }}
+                </span>
+              </div>
+              <div
+                v-for="(variable, index) in globalEnvs"
+                :key="index"
+                class="flex flex-1 space-x-4"
+              >
+                <span class="text-secondaryLight w-1/4 min-w-32 truncate">
+                  {{ variable.key }}
+                </span>
+                <span class="text-secondaryLight w-full min-w-32 truncate">
+                  {{ variable.value }}
+                </span>
+              </div>
+              <div v-if="globalEnvs.length === 0" class="text-secondaryLight">
+                {{ t("environment.empty_variables") }}
+              </div>
             </div>
             <div
-              v-if="!teamListLoading && teamAdapterError"
-              class="flex flex-col items-center py-4"
+              class="sticky top-0 mt-2 font-semibold truncate flex items-center justify-between text-secondaryDark bg-primary border border-divider rounded pl-4"
+              :class="{
+                'bg-primaryLight': !selectedEnv.variables,
+              }"
             >
-              <icon-lucide-help-circle class="mb-4 svg-icons" />
-              {{ getErrorMessage(teamAdapterError) }}
+              {{ t("environment.list") }}
+              <HoppButtonSecondary
+                v-tippy="{ theme: 'tooltip' }"
+                :disabled="!selectedEnv.variables"
+                :title="t('action.edit')"
+                :icon="IconEdit"
+                @click="
+                  () => {
+                    editEnv()
+                    hide()
+                  }
+                "
+              />
             </div>
-          </HoppSmartTab>
-        </HoppSmartTabs>
-      </div>
-    </template>
-  </tippy>
+            <div
+              v-if="selectedEnv.type === 'NO_ENV_SELECTED'"
+              class="text-secondaryLight my-2 flex flex-col flex-1 pl-4"
+            >
+              {{ t("environment.no_active_environment") }}
+            </div>
+            <div v-else class="my-2 flex flex-col flex-1 space-y-2 pl-4 pr-2">
+              <div class="flex flex-1 space-x-4">
+                <span class="w-1/4 min-w-32 truncate text-tiny font-semibold">
+                  {{ t("environment.name") }}
+                </span>
+                <span class="w-full min-w-32 truncate text-tiny font-semibold">
+                  {{ t("environment.value") }}
+                </span>
+              </div>
+              <div
+                v-for="(variable, index) in environmentVariables"
+                :key="index"
+                class="flex flex-1 space-x-4"
+              >
+                <span class="text-secondaryLight w-1/4 min-w-32 truncate">
+                  {{ variable.key }}
+                </span>
+                <span class="text-secondaryLight w-full min-w-32 truncate">
+                  {{ variable.value }}
+                </span>
+              </div>
+              <div
+                v-if="environmentVariables.length === 0"
+                class="text-secondaryLight"
+              >
+                {{ t("environment.empty_variables") }}
+              </div>
+            </div>
+          </div>
+        </template>
+      </tippy>
+    </span>
+  </div>
 </template>
 
 <script lang="ts" setup>
 import { computed, ref, watch } from "vue"
 import IconCheck from "~icons/lucide/check"
 import IconLayers from "~icons/lucide/layers"
+import IconEye from "~icons/lucide/eye"
+import IconEdit from "~icons/lucide/edit"
 import { TippyComponent } from "vue-tippy"
 import { useI18n } from "~/composables/i18n"
 import { GQLError } from "~/helpers/backend/GQLClient"
 import { useReadonlyStream, useStream } from "~/composables/stream"
 import {
   environments$,
+  globalEnv$,
   selectedEnvironmentIndex$,
   setSelectedEnvironmentIndex,
 } from "~/newstore/environments"
-import { changeWorkspace, workspaceStatus$ } from "~/newstore/workspace"
+import { workspaceStatus$ } from "~/newstore/workspace"
 import TeamEnvironmentAdapter from "~/helpers/teams/TeamEnvironmentAdapter"
 import { useColorMode } from "@composables/theming"
 import { breakpointsTailwind, useBreakpoints } from "@vueuse/core"
-import TeamListAdapter from "~/helpers/teams/TeamListAdapter"
-import { useLocalState } from "~/newstore/localstate"
-import { onLoggedIn } from "~/composables/auth"
-import { GetMyTeamsQuery } from "~/helpers/backend/graphql"
+import { invokeAction } from "~/helpers/actions"
 
 const breakpoints = useBreakpoints(breakpointsTailwind)
 const mdAndLarger = breakpoints.greater("md")
@@ -217,44 +348,15 @@ watch(
   }
 )
 
-// TeamList-Adapter
-const teamListAdapter = new TeamListAdapter(true)
-const myTeams = useReadonlyStream(teamListAdapter.teamList$, null)
-const teamListFetched = ref(false)
-const REMEMBERED_TEAM_ID = useLocalState("REMEMBERED_TEAM_ID")
-
-onLoggedIn(() => {
-  !teamListAdapter.isInitialized && teamListAdapter.initialize()
-})
-
-const switchToTeamWorkspace = (team: GetMyTeamsQuery["myTeams"][number]) => {
-  REMEMBERED_TEAM_ID.value = team.id
-  changeWorkspace({
-    teamID: team.id,
-    teamName: team.name,
-    type: "team",
-  })
-}
-
-watch(
-  () => myTeams.value,
-  (newTeams) => {
-    if (newTeams && !teamListFetched.value) {
-      teamListFetched.value = true
-      if (REMEMBERED_TEAM_ID.value) {
-        const team = newTeams.find((t) => t.id === REMEMBERED_TEAM_ID.value)
-        if (team) switchToTeamWorkspace(team)
-      }
-    }
-  }
-)
-
 const selectedEnv = computed(() => {
   if (selectedEnvironmentIndex.value.type === "MY_ENV") {
+    const environment =
+      myEnvironments.value[selectedEnvironmentIndex.value.index]
     return {
       type: "MY_ENV",
       index: selectedEnvironmentIndex.value.index,
-      name: myEnvironments.value[selectedEnvironmentIndex.value.index].name,
+      name: environment.name,
+      variables: environment.variables,
     }
   } else if (selectedEnvironmentIndex.value.type === "TEAM_ENV") {
     const teamEnv = teamEnvironmentList.value.find(
@@ -268,6 +370,7 @@ const selectedEnv = computed(() => {
         type: "TEAM_ENV",
         name: teamEnv.environment.name,
         teamEnvID: selectedEnvironmentIndex.value.teamEnvID,
+        variables: teamEnv.environment.variables,
       }
     } else {
       return { type: "NO_ENV_SELECTED" }
@@ -278,7 +381,8 @@ const selectedEnv = computed(() => {
 })
 
 // Template refs
-const tippyActions = ref<TippyComponent | null>(null)
+const envSelectorActions = ref<TippyComponent | null>(null)
+const envQuickPeekActions = ref<TippyComponent | null>(null)
 
 const getErrorMessage = (err: GQLError<string>) => {
   if (err.type === "network_error") {
@@ -292,4 +396,32 @@ const getErrorMessage = (err: GQLError<string>) => {
     }
   }
 }
+
+const globalEnvs = useReadonlyStream(globalEnv$, [])
+
+const environmentVariables = computed(() => {
+  if (selectedEnv.value.variables) {
+    return selectedEnv.value.variables
+  } else {
+    return []
+  }
+})
+
+const editGlobalEnv = () => {
+  invokeAction("modals.my.environment.edit", {
+    envName: "Global",
+  })
+}
+
+const editEnv = () => {
+  if (selectedEnv.value.type === "MY_ENV" && selectedEnv.value.name) {
+    invokeAction("modals.my.environment.edit", {
+      envName: selectedEnv.value.name,
+    })
+  } else if (selectedEnv.value.type === "TEAM_ENV" && selectedEnv.value.name) {
+    invokeAction("modals.team.environment.edit", {
+      envName: selectedEnv.value.name,
+    })
+  }
+}
 </script>

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

@@ -11,9 +11,9 @@
         @edit-environment="editEnvironment('Global')"
       />
     </div>
-    <EnvironmentsMy v-if="environmentType.type === 'my-environments'" />
+    <EnvironmentsMy v-show="environmentType.type === 'my-environments'" />
     <EnvironmentsTeams
-      v-if="environmentType.type === 'team-environments'"
+      v-show="environmentType.type === 'team-environments'"
       :team="environmentType.selectedTeam"
       :team-environments="teamEnvironmentList"
       :loading="loading"
@@ -26,6 +26,13 @@
       :editing-variable-name="editingVariableName"
       @hide-modal="displayModalEdit(false)"
     />
+    <EnvironmentsAdd
+      :show="showModalNew"
+      :name="editingVariableName"
+      :value="editingVariableValue"
+      :position="position"
+      @hide-modal="displayModalNew(false)"
+    />
   </div>
 </template>
 
@@ -161,10 +168,18 @@ watch(
   }
 )
 
+const showModalNew = ref(false)
 const showModalDetails = ref(false)
 const action = ref<"new" | "edit">("edit")
 const editingEnvironmentIndex = ref<"Global" | null>(null)
 const editingVariableName = ref("")
+const editingVariableValue = ref("")
+
+const position = ref({ top: 0, left: 0 })
+
+const displayModalNew = (shouldDisplay: boolean) => {
+  showModalNew.value = shouldDisplay
+}
 
 const displayModalEdit = (shouldDisplay: boolean) => {
   action.value = "edit"
@@ -183,10 +198,15 @@ const resetSelectedData = () => {
   editingEnvironmentIndex.value = null
 }
 
+defineActionHandler("modals.environment.new", () => {
+  action.value = "new"
+  showModalDetails.value = true
+})
+
 defineActionHandler(
   "modals.my.environment.edit",
   ({ envName, variableName }) => {
-    editingVariableName.value = variableName
+    if (variableName) editingVariableName.value = variableName
     envName === "Global" && editEnvironment("Global")
   }
 )
@@ -233,4 +253,10 @@ watch(
   },
   { deep: true }
 )
+
+defineActionHandler("modals.environment.add", ({ envName, variableName }) => {
+  editingVariableName.value = envName
+  editingVariableValue.value = variableName
+  displayModalNew(true)
+})
 </script>

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

@@ -7,22 +7,15 @@
   >
     <template #body>
       <div class="flex flex-col">
-        <div class="relative flex">
-          <input
-            id="selectLabelEnvEdit"
-            v-model="name"
-            v-focus
-            class="input floating-input"
-            placeholder=" "
-            type="text"
-            autocomplete="off"
-            :disabled="editingEnvironmentIndex === 'Global'"
-            @keyup.enter="saveEnvironment"
-          />
-          <label for="selectLabelEnvEdit">
-            {{ t("action.label") }}
-          </label>
-        </div>
+        <HoppSmartInput
+          v-model="editingName"
+          placeholder=" "
+          :label="t('action.label')"
+          input-styles="floating-input"
+          :disabled="editingEnvironmentIndex === 'Global'"
+          @submit="saveEnvironment"
+        />
+
         <div class="flex items-center justify-between flex-1">
           <label for="variableList" class="p-4">
             {{ t("environment.variable_list") }}
@@ -79,26 +72,18 @@
               />
             </div>
           </div>
-          <div
+          <HoppSmartPlaceholder
             v-if="vars.length === 0"
-            class="flex flex-col items-center justify-center p-4 text-secondaryLight"
+            :src="`/images/states/${colorMode.value}/blockchain.svg`"
+            :alt="`${t('empty.environments')}`"
+            :text="t('empty.environments')"
           >
-            <img
-              :src="`/images/states/${colorMode.value}/blockchain.svg`"
-              loading="lazy"
-              class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
-              :alt="`${t('empty.environments')}`"
-            />
-            <span class="pb-4 text-center">
-              {{ t("empty.environments") }}
-            </span>
             <HoppButtonSecondary
               :label="`${t('add.new')}`"
               filled
-              class="mb-4"
               @click="addEnvironmentVariable"
             />
-          </div>
+          </HoppSmartPlaceholder>
         </div>
       </div>
     </template>
@@ -185,7 +170,7 @@ const emit = defineEmits<{
 
 const idTicker = ref(0)
 
-const name = ref<string | null>(null)
+const editingName = ref<string | null>(null)
 const vars = ref<EnvironmentVariable[]>([
   { id: idTicker.value++, env: { key: "", value: "" } },
 ])
@@ -238,10 +223,12 @@ const liveEnvs = computed(() => {
   }
 
   if (props.editingEnvironmentIndex === "Global") {
-    return [...vars.value.map((x) => ({ ...x.env, source: name.value! }))]
+    return [
+      ...vars.value.map((x) => ({ ...x.env, source: editingName.value! })),
+    ]
   } else {
     return [
-      ...vars.value.map((x) => ({ ...x.env, source: name.value! })),
+      ...vars.value.map((x) => ({ ...x.env, source: editingName.value! })),
       ...globalVars.value.map((x) => ({ ...x, source: "Global" })),
     ]
   }
@@ -251,7 +238,7 @@ watch(
   () => props.show,
   (show) => {
     if (show) {
-      name.value = workingEnv.value?.name ?? null
+      editingName.value = workingEnv.value?.name ?? null
       vars.value = pipe(
         workingEnv.value?.variables ?? [],
         A.map((e) => ({
@@ -284,7 +271,7 @@ const removeEnvironmentVariable = (index: number) => {
 }
 
 const saveEnvironment = () => {
-  if (!name.value) {
+  if (!editingName.value) {
     toast.error(`${t("environment.invalid_name")}`)
     return
   }
@@ -300,13 +287,13 @@ const saveEnvironment = () => {
   )
 
   const environmentUpdated: Environment = {
-    name: name.value,
+    name: editingName.value,
     variables: filterdVariables,
   }
 
   if (props.action === "new") {
     // Creating a new environment
-    createEnvironment(name.value, environmentUpdated.variables)
+    createEnvironment(editingName.value, environmentUpdated.variables)
     setSelectedEnvironmentIndex({
       type: "MY_ENV",
       index: envList.value.length - 1,
@@ -344,7 +331,7 @@ const saveEnvironment = () => {
 }
 
 const hideModal = () => {
-  name.value = null
+  editingName.value = null
   emit("hide-modal")
 }
 </script>

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

@@ -158,5 +158,7 @@ const duplicateEnvironments = () => {
       cloneDeep(getGlobalVariables())
     )
   } else duplicateEnvironment(props.environmentIndex)
+
+  toast.success(`${t("environment.duplicated")}`)
 }
 </script>

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

@@ -32,27 +32,19 @@
       :environment="environment"
       @edit-environment="editEnvironment(index)"
     />
-    <div
+    <HoppSmartPlaceholder
       v-if="environments.length === 0"
-      class="flex flex-col items-center justify-center p-4 text-secondaryLight"
+      :src="`/images/states/${colorMode.value}/blockchain.svg`"
+      :alt="`${t('empty.environments')}`"
+      :text="t('empty.environments')"
     >
-      <img
-        :src="`/images/states/${colorMode.value}/blockchain.svg`"
-        loading="lazy"
-        class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
-        :alt="`${t('empty.environments')}`"
-      />
-      <span class="pb-4 text-center">
-        {{ t("empty.environments") }}
-      </span>
       <HoppButtonSecondary
         :label="`${t('add.new')}`"
         filled
         outline
-        class="mb-4"
         @click="displayModalAdd(true)"
       />
-    </div>
+    </HoppSmartPlaceholder>
     <EnvironmentsMyDetails
       :show="showModalDetails"
       :action="action"
@@ -116,7 +108,7 @@ const resetSelectedData = () => {
 defineActionHandler(
   "modals.my.environment.edit",
   ({ envName, variableName }) => {
-    editingVariableName.value = variableName
+    if (variableName) editingVariableName.value = variableName
     const envIndex: number = environments.value.findIndex(
       (environment: Environment) => {
         return environment.name === envName

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

@@ -7,23 +7,15 @@
   >
     <template #body>
       <div class="flex flex-col px-2">
-        <div class="relative flex">
-          <input
-            id="selectLabelEnvEdit"
-            v-model="name"
-            v-focus
-            class="input floating-input"
-            :class="isViewer && 'opacity-25'"
-            placeholder=""
-            type="text"
-            autocomplete="off"
-            :disabled="isViewer"
-            @keyup.enter="saveEnvironment"
-          />
-          <label for="selectLabelEnvEdit">
-            {{ t("action.label") }}
-          </label>
-        </div>
+        <HoppSmartInput
+          v-model="editingName"
+          placeholder=" "
+          :input-styles="['floating-input', isViewer && 'opacity-25']"
+          :label="t('action.label')"
+          :disabled="isViewer"
+          @submit="saveEnvironment"
+        />
+
         <div class="flex items-center justify-between flex-1">
           <label for="variableList" class="p-4">
             {{ t("environment.variable_list") }}
@@ -83,34 +75,25 @@
               />
             </div>
           </div>
-          <div
+          <HoppSmartPlaceholder
             v-if="vars.length === 0"
-            class="flex flex-col items-center justify-center p-4 text-secondaryLight"
+            :src="`/images/states/${colorMode.value}/blockchain.svg`"
+            :alt="`${t('empty.environments')}`"
+            :text="t('empty.environments')"
           >
-            <img
-              :src="`/images/states/${colorMode.value}/blockchain.svg`"
-              loading="lazy"
-              class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
-              :alt="`${t('empty.environments')}`"
-            />
-            <span class="pb-4 text-center">
-              {{ t("empty.environments") }}
-            </span>
             <HoppButtonSecondary
               v-if="isViewer"
               disabled
               :label="`${t('add.new')}`"
               filled
-              class="mb-4"
             />
             <HoppButtonSecondary
               v-else
               :label="`${t('add.new')}`"
               filled
-              class="mb-4"
               @click="addEnvironmentVariable"
             />
-          </div>
+          </HoppSmartPlaceholder>
         </div>
       </div>
     </template>
@@ -197,7 +180,7 @@ const emit = defineEmits<{
 
 const idTicker = ref(0)
 
-const name = ref<string | null>(null)
+const editingName = ref<string | null>(null)
 const vars = ref<EnvironmentVariable[]>([
   { id: idTicker.value++, env: { key: "", value: "" } },
 ])
@@ -223,7 +206,9 @@ const liveEnvs = computed(() => {
   if (evnExpandError.value) {
     return []
   } else {
-    return [...vars.value.map((x) => ({ ...x.env, source: name.value! }))]
+    return [
+      ...vars.value.map((x) => ({ ...x.env, source: editingName.value! })),
+    ]
   }
 })
 
@@ -232,7 +217,7 @@ watch(
   (show) => {
     if (show) {
       if (props.action === "new") {
-        name.value = null
+        editingName.value = null
         vars.value = pipe(
           props.envVars() ?? [],
           A.map((e: { key: string; value: string }) => ({
@@ -241,7 +226,7 @@ watch(
           }))
         )
       } else if (props.editingEnvironment !== null) {
-        name.value = props.editingEnvironment.environment.name ?? null
+        editingName.value = props.editingEnvironment.environment.name ?? null
         vars.value = pipe(
           props.editingEnvironment.environment.variables ?? [],
           A.map((e: { key: string; value: string }) => ({
@@ -279,7 +264,7 @@ const isLoading = ref(false)
 const saveEnvironment = async () => {
   isLoading.value = true
 
-  if (!name.value) {
+  if (!editingName.value) {
     toast.error(`${t("environment.invalid_name")}`)
     return
   }
@@ -304,7 +289,7 @@ const saveEnvironment = async () => {
       createTeamEnvironment(
         JSON.stringify(filterdVariables),
         props.editingTeamId,
-        name.value
+        editingName.value
       ),
       TE.match(
         (err: GQLError<string>) => {
@@ -327,7 +312,7 @@ const saveEnvironment = async () => {
       updateTeamEnvironment(
         JSON.stringify(filterdVariables),
         props.editingEnvironment.id,
-        name.value
+        editingName.value
       ),
       TE.match(
         (err: GQLError<string>) => {
@@ -346,7 +331,7 @@ const saveEnvironment = async () => {
 }
 
 const hideModal = () => {
-  name.value = null
+  editingName.value = null
   emit("hide-modal")
 }
 

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

@@ -154,7 +154,7 @@ const duplicateEnvironments = () => {
         toast.error(`${getErrorMessage(err)}`)
       },
       () => {
-        toast.success(`${t("team_environment.duplicate")}`)
+        toast.success(`${t("environment.duplicated")}`)
       }
     )
   )()

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

@@ -43,25 +43,17 @@
         />
       </div>
     </div>
-    <div
+    <HoppSmartPlaceholder
       v-if="!loading && teamEnvironments.length === 0 && !adapterError"
-      class="flex flex-col items-center justify-center p-4 text-secondaryLight"
+      :src="`/images/states/${colorMode.value}/blockchain.svg`"
+      :alt="`${t('empty.environments')}`"
+      :text="t('empty.environments')"
     >
-      <img
-        :src="`/images/states/${colorMode.value}/blockchain.svg`"
-        loading="lazy"
-        class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
-        :alt="`${t('empty.environments')}`"
-      />
-      <span class="pb-4 text-center">
-        {{ t("empty.environments") }}
-      </span>
       <HoppButtonSecondary
         v-if="team === undefined || team.myRole === 'VIEWER'"
         v-tippy="{ theme: 'tooltip' }"
         disabled
         filled
-        class="mb-4"
         :icon="IconPlus"
         :title="t('team.no_access')"
         :label="t('action.new')"
@@ -71,10 +63,9 @@
         :label="`${t('add.new')}`"
         filled
         outline
-        class="mb-4"
         @click="displayModalAdd(true)"
       />
-    </div>
+    </HoppSmartPlaceholder>
     <div v-else-if="!loading">
       <EnvironmentsTeamsEnvironment
         v-for="(environment, index) in JSON.parse(
@@ -185,7 +176,7 @@ const getErrorMessage = (err: GQLError<string>) => {
 defineActionHandler(
   "modals.team.environment.edit",
   ({ envName, variableName }) => {
-    editingVariableName.value = variableName
+    if (variableName) editingVariableName.value = variableName
     const teamEnvToEdit = props.teamEnvironments.find(
       (environment) => environment.environment.name === envName
     )

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

@@ -9,27 +9,22 @@
     <template #body>
       <div v-if="mode === 'sign-in'" class="flex flex-col space-y-2">
         <HoppSmartItem
-          :loading="signingInWithGitHub"
-          :icon="IconGithub"
-          :label="`${t('auth.continue_with_github')}`"
-          @click="signInWithGithub"
+          v-for="provider in allowedAuthProviders"
+          :key="provider.id"
+          :loading="provider.isLoading.value"
+          :icon="provider.icon"
+          :label="provider.label"
+          @click="provider.action"
         />
+
+        <hr v-if="additonalLoginItems.length > 0" />
+
         <HoppSmartItem
-          :loading="signingInWithGoogle"
-          :icon="IconGoogle"
-          :label="`${t('auth.continue_with_google')}`"
-          @click="signInWithGoogle"
-        />
-        <HoppSmartItem
-          :loading="signingInWithMicrosoft"
-          :icon="IconMicrosoft"
-          :label="`${t('auth.continue_with_microsoft')}`"
-          @click="signInWithMicrosoft"
-        />
-        <HoppSmartItem
-          :icon="IconEmail"
-          :label="`${t('auth.continue_with_email')}`"
-          @click="mode = 'email'"
+          v-for="loginItem in additonalLoginItems"
+          :key="loginItem.id"
+          :icon="loginItem.icon"
+          :label="loginItem.text(t)"
+          @click="doAdditionalLoginItemClickAction(loginItem)"
         />
       </div>
       <form
@@ -37,24 +32,14 @@
         class="flex flex-col space-y-2"
         @submit.prevent="signInWithEmail"
       >
-        <div class="flex flex-col">
-          <input
-            id="email"
-            v-model="form.email"
-            v-focus
-            class="input floating-input"
-            placeholder=" "
-            type="email"
-            name="email"
-            autocomplete="off"
-            required
-            spellcheck="false"
-            autofocus
-          />
-          <label for="email">
-            {{ t("auth.email") }}
-          </label>
-        </div>
+        <HoppSmartInput
+          v-model="form.email"
+          type="email"
+          placeholder=" "
+          :label="t('auth.email')"
+          input-styles="floating-input"
+        />
+
         <HoppButtonPrimary
           :loading="signingInWithEmail"
           type="submit"
@@ -123,124 +108,138 @@
   </HoppSmartModal>
 </template>
 
-<script lang="ts">
-import { defineComponent } from "vue"
+<script setup lang="ts">
+import { Ref, computed, onMounted, ref } from "vue"
+
+import { useStreamSubscriber } from "@composables/stream"
+import { useToast } from "@composables/toast"
+import { useI18n } from "@composables/i18n"
+
 import { platform } from "~/platform"
+import { setLocalConfig } from "~/newstore/localpersistence"
+
 import IconGithub from "~icons/auth/github"
 import IconGoogle from "~icons/auth/google"
 import IconEmail from "~icons/auth/email"
 import IconMicrosoft from "~icons/auth/microsoft"
 import IconArrowLeft from "~icons/lucide/arrow-left"
-import { setLocalConfig } from "~/newstore/localpersistence"
-import { useStreamSubscriber } from "@composables/stream"
-import { useToast } from "@composables/toast"
-import { useI18n } from "@composables/i18n"
 
-export default defineComponent({
-  props: {
-    show: Boolean,
-  },
-  emits: ["hide-modal"],
-  setup() {
-    const { subscribeToStream } = useStreamSubscriber()
+import { LoginItemDef } from "~/platform/auth"
 
-    const tosLink = import.meta.env.VITE_APP_TOS_LINK
-    const privacyPolicyLink = import.meta.env.VITE_APP_PRIVACY_POLICY_LINK
+defineProps<{
+  show: boolean
+}>()
 
-    return {
-      subscribeToStream,
-      t: useI18n(),
-      toast: useToast(),
-      IconGithub,
-      IconGoogle,
-      IconEmail,
-      IconMicrosoft,
-      IconArrowLeft,
-      tosLink,
-      privacyPolicyLink,
-    }
-  },
-  data() {
-    return {
-      form: {
-        email: "",
-      },
-      signingInWithGoogle: false,
-      signingInWithGitHub: false,
-      signingInWithMicrosoft: false,
-      signingInWithEmail: false,
-      mode: "sign-in",
-    }
-  },
-  mounted() {
-    const currentUser$ = platform.auth.getCurrentUserStream()
+const emit = defineEmits<{
+  (e: "hide-modal"): void
+}>()
 
-    this.subscribeToStream(currentUser$, (user) => {
-      if (user) this.hideModal()
-    })
-  },
-  methods: {
-    showLoginSuccess() {
-      this.toast.success(`${this.t("auth.login_success")}`)
-    },
-    async signInWithGoogle() {
-      this.signingInWithGoogle = true
+const { subscribeToStream } = useStreamSubscriber()
+const t = useI18n()
+const toast = useToast()
 
-      try {
-        await platform.auth.signInUserWithGoogle()
-      } catch (e) {
-        console.error(e)
-        /*
+const form = {
+  email: "",
+}
+
+const signingInWithGoogle = ref(false)
+const signingInWithGitHub = ref(false)
+const signingInWithMicrosoft = ref(false)
+const signingInWithEmail = ref(false)
+const mode = ref("sign-in")
+
+const tosLink = import.meta.env.VITE_APP_TOS_LINK
+const privacyPolicyLink = import.meta.env.VITE_APP_PRIVACY_POLICY_LINK
+
+type AuthProviderItem = {
+  id: string
+  icon: typeof IconGithub
+  label: string
+  action: (...args: any[]) => any
+  isLoading: Ref<boolean>
+}
+
+const additonalLoginItems = computed(
+  () => platform.auth.additionalLoginItems ?? []
+)
+
+const doAdditionalLoginItemClickAction = async (item: LoginItemDef) => {
+  await item.onClick()
+  emit("hide-modal")
+}
+
+onMounted(() => {
+  const currentUser$ = platform.auth.getCurrentUserStream()
+
+  subscribeToStream(currentUser$, (user) => {
+    if (user) hideModal()
+  })
+})
+
+const showLoginSuccess = () => {
+  toast.success(`${t("auth.login_success")}`)
+}
+
+const signInWithGoogle = async () => {
+  signingInWithGoogle.value = true
+
+  try {
+    await platform.auth.signInUserWithGoogle()
+  } catch (e) {
+    console.error(e)
+    /*
         A auth/account-exists-with-different-credential Firebase error wont happen between Google and any other providers
         Seems Google account overwrites accounts of other providers https://github.com/firebase/firebase-android-sdk/issues/25
         */
-        this.toast.error(`${this.t("error.something_went_wrong")}`)
-      }
+    toast.error(`${t("error.something_went_wrong")}`)
+  }
 
-      this.signingInWithGoogle = false
-    },
-    async signInWithGithub() {
-      this.signingInWithGitHub = true
+  signingInWithGoogle.value = false
+}
 
-      const result = await platform.auth.signInUserWithGithub()
+const signInWithGithub = async () => {
+  signingInWithGitHub.value = true
 
-      if (!result) {
-        this.signingInWithGitHub = false
-        return
-      }
+  const result = await platform.auth.signInUserWithGithub()
 
-      if (result.type === "success") {
-        // this.showLoginSuccess()
-      } else if (result.type === "account-exists-with-different-cred") {
-        this.toast.info(`${this.t("auth.account_exists")}`, {
-          duration: 0,
-          closeOnSwipe: false,
-          action: {
-            text: `${this.t("action.yes")}`,
-            onClick: async (_, toastObject) => {
-              await result.link()
-              this.showLoginSuccess()
+  if (!result) {
+    signingInWithGitHub.value = false
+    return
+  }
 
-              toastObject.goAway(0)
-            },
-          },
-        })
-      } else {
-        console.log("error logging into github", result.err)
-        this.toast.error(`${this.t("error.something_went_wrong")}`)
-      }
+  if (result.type === "success") {
+    // this.showLoginSuccess()
+  } else if (result.type === "account-exists-with-different-cred") {
+    toast.info(`${t("auth.account_exists")}`, {
+      duration: 0,
+      closeOnSwipe: false,
+      action: {
+        text: `${t("action.yes")}`,
+        onClick: async (_, toastObject) => {
+          await result.link()
+          showLoginSuccess()
 
-      this.signingInWithGitHub = false
-    },
-    async signInWithMicrosoft() {
-      this.signingInWithMicrosoft = true
+          toastObject.goAway(0)
+        },
+      },
+    })
+  } else {
+    console.log("error logging into github", result.err)
+    toast.error(`${t("error.something_went_wrong")}`)
+  }
 
-      try {
-        await platform.auth.signInUserWithMicrosoft()
-        // this.showLoginSuccess()
-      } catch (e) {
-        console.error(e)
-        /*
+  signingInWithGitHub.value = false
+}
+
+const signInWithMicrosoft = async () => {
+  signingInWithMicrosoft.value = true
+
+  try {
+    await platform.auth.signInUserWithMicrosoft()
+    // this.showLoginSuccess()
+  } catch (e) {
+    console.error(e)
+    /*
         A auth/account-exists-with-different-credential Firebase error wont happen between MS with Google or Github
         If a Github account exists and user then logs in with MS email we get a "Something went wrong toast" and console errors and MS replaces GH as only provider.
         The error messages are as follows:
@@ -248,34 +247,82 @@ export default defineComponent({
             @firebase/auth: Auth (9.6.11): INTERNAL ASSERTION FAILED: Pending promise was never set
         They may be related to https://github.com/firebase/firebaseui-web/issues/947
         */
-        this.toast.error(`${this.t("error.something_went_wrong")}`)
-      }
+    toast.error(`${t("error.something_went_wrong")}`)
+  }
 
-      this.signingInWithMicrosoft = false
-    },
-    async signInWithEmail() {
-      this.signingInWithEmail = true
+  signingInWithMicrosoft.value = false
+}
 
-      await platform.auth
-        .signInWithEmail(this.form.email)
-        .then(() => {
-          this.mode = "email-sent"
-          setLocalConfig("emailForSignIn", this.form.email)
-        })
-        .catch((e) => {
-          console.error(e)
-          this.toast.error(e.message)
-          this.signingInWithEmail = false
-        })
-        .finally(() => {
-          this.signingInWithEmail = false
-        })
-    },
-    hideModal() {
-      this.mode = "sign-in"
-      this.toast.clear()
-      this.$emit("hide-modal")
-    },
+const signInWithEmail = async () => {
+  signingInWithEmail.value = true
+
+  await platform.auth
+    .signInWithEmail(form.email)
+    .then(() => {
+      mode.value = "email-sent"
+      setLocalConfig("emailForSignIn", form.email)
+    })
+    .catch((e) => {
+      console.error(e)
+      toast.error(e.message)
+      signingInWithEmail.value = false
+    })
+    .finally(() => {
+      signingInWithEmail.value = false
+    })
+}
+
+const hideModal = () => {
+  mode.value = "sign-in"
+  toast.clear()
+
+  emit("hide-modal")
+}
+
+const authProviders: AuthProviderItem[] = [
+  {
+    id: "GITHUB",
+    icon: IconGithub,
+    label: t("auth.continue_with_github"),
+    action: signInWithGithub,
+    isLoading: signingInWithGitHub,
   },
-})
+  {
+    id: "GOOGLE",
+    icon: IconGoogle,
+    label: t("auth.continue_with_google"),
+    action: signInWithGoogle,
+    isLoading: signingInWithGoogle,
+  },
+  {
+    id: "MICROSOFT",
+    icon: IconMicrosoft,
+    label: t("auth.continue_with_microsoft"),
+    action: signInWithMicrosoft,
+    isLoading: signingInWithMicrosoft,
+  },
+  {
+    id: "EMAIL",
+    icon: IconEmail,
+    label: t("auth.continue_with_email"),
+    action: () => {
+      mode.value = "email"
+    },
+    isLoading: signingInWithEmail,
+  },
+]
+
+const allowedAuthProvidersIDsString: string | undefined = import.meta.env
+  .VITE_ALLOWED_AUTH_PROVIDERS
+
+const allowedAuthProvidersIDs = allowedAuthProvidersIDsString
+  ? allowedAuthProvidersIDsString.split(",")
+  : []
+
+const allowedAuthProviders =
+  allowedAuthProvidersIDs.length > 0
+    ? authProviders.filter((provider) =>
+        allowedAuthProvidersIDs.includes(provider.id)
+      )
+    : authProviders
 </script>

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

@@ -1,12 +1,12 @@
 <template>
-  <div class="flex" @click="OpenLogoutModal()">
+  <div class="flex" @click="openLogoutModal()">
     <HoppSmartItem
       ref="logoutItem"
       :icon="IconLogOut"
       :label="`${t('auth.logout')}`"
       :outline="outline"
       :shortcut="shortcut"
-      @click="OpenLogoutModal()"
+      @click="openLogoutModal()"
     />
     <HoppSmartConfirmModal
       :show="confirmLogout"
@@ -23,6 +23,7 @@ import IconLogOut from "~icons/lucide/log-out"
 import { useToast } from "@composables/toast"
 import { useI18n } from "@composables/i18n"
 import { platform } from "~/platform"
+import { defineActionHandler } from "~/helpers/actions"
 
 defineProps({
   outline: {
@@ -55,8 +56,12 @@ const logout = async () => {
   }
 }
 
-const OpenLogoutModal = () => {
+const openLogoutModal = () => {
   emit("confirm-logout")
   confirmLogout.value = true
 }
+
+defineActionHandler("user.logout", () => {
+  openLogoutModal()
+})
 </script>

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

@@ -1,7 +1,7 @@
 <template>
   <div class="flex flex-col flex-1">
     <div
-      class="sticky z-10 flex items-center justify-between flex-shrink-0 pl-4 overflow-x-auto border-b bg-primary border-dividerLight top-upperSecondaryStickyFold"
+      class="sticky z-10 flex items-center justify-between flex-shrink-0 pl-4 overflow-x-auto border-b bg-primary border-dividerLight"
     >
       <span class="flex items-center">
         <label class="font-semibold truncate text-secondaryLight">
@@ -32,7 +32,7 @@
                 :active="authName === 'None'"
                 @click="
                   () => {
-                    authType = 'none'
+                    auth.authType = 'none'
                     hide()
                   }
                 "
@@ -43,7 +43,7 @@
                 :active="authName === 'Basic Auth'"
                 @click="
                   () => {
-                    authType = 'basic'
+                    auth.authType = 'basic'
                     hide()
                   }
                 "
@@ -54,7 +54,7 @@
                 :active="authName === 'Bearer'"
                 @click="
                   () => {
-                    authType = 'bearer'
+                    auth.authType = 'bearer'
                     hide()
                   }
                 "
@@ -65,7 +65,7 @@
                 :active="authName === 'OAuth 2.0'"
                 @click="
                   () => {
-                    authType = 'oauth-2'
+                    auth.authType = 'oauth-2'
                     hide()
                   }
                 "
@@ -76,7 +76,7 @@
                 :active="authName === 'API key'"
                 @click="
                   () => {
-                    authType = 'api-key'
+                    auth.authType = 'api-key'
                     hide()
                   }
                 "
@@ -90,8 +90,8 @@
           :on="!URLExcludes.auth"
           @change="setExclude('auth', !$event)"
         >
-          {{ t("authorization.include_in_url") }}
-        </HoppSmartCheckbox> -->
+          {{ $t("authorization.include_in_url") }}
+        </HoppSmartCheckbox>-->
         <HoppSmartCheckbox
           :on="authActive"
           class="px-2"
@@ -114,19 +114,12 @@
         />
       </div>
     </div>
-    <div
-      v-if="authType === 'none'"
-      class="flex flex-col items-center justify-center p-4 text-secondaryLight"
+    <HoppSmartPlaceholder
+      v-if="auth.authType === 'none'"
+      :src="`/images/states/${colorMode.value}/login.svg`"
+      :alt="`${t('empty.authorization')}`"
+      :text="t('empty.authorization')"
     >
-      <img
-        :src="`/images/states/${colorMode.value}/login.svg`"
-        loading="lazy"
-        class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
-        :alt="`${t('empty.authorization')}`"
-      />
-      <span class="pb-4 text-center">
-        {{ t("empty.authorization") }}
-      </span>
       <HoppButtonSecondary
         outline
         :label="t('app.documentation')"
@@ -134,114 +127,47 @@
         blank
         :icon="IconExternalLink"
         reverse
-        class="mb-4"
       />
-    </div>
+    </HoppSmartPlaceholder>
     <div v-else class="flex flex-1 border-b border-dividerLight">
       <div class="w-2/3 border-r border-dividerLight">
-        <div v-if="authType === 'basic'">
+        <div v-if="auth.authType === 'basic'">
           <div class="flex flex-1 border-b border-dividerLight">
             <SmartEnvInput
-              v-model="basicUsername"
+              v-model="auth.username"
               :environment-highlights="false"
               :placeholder="t('authorization.username')"
             />
           </div>
           <div class="flex flex-1 border-b border-dividerLight">
             <SmartEnvInput
-              v-model="basicPassword"
+              v-model="auth.password"
               :environment-highlights="false"
               :placeholder="t('authorization.password')"
             />
           </div>
         </div>
-        <div v-if="authType === 'bearer'">
+        <div v-if="auth.authType === 'bearer'">
           <div class="flex flex-1 border-b border-dividerLight">
             <SmartEnvInput
-              v-model="bearerToken"
+              v-model="auth.token"
               :environment-highlights="false"
               placeholder="Token"
             />
           </div>
         </div>
-        <div v-if="authType === 'oauth-2'">
+        <div v-if="auth.authType === 'oauth-2'">
           <div class="flex flex-1 border-b border-dividerLight">
             <SmartEnvInput
-              v-model="oauth2Token"
+              v-model="auth.token"
               :environment-highlights="false"
               placeholder="Token"
             />
           </div>
-          <HttpOAuth2Authorization />
+          <HttpOAuth2Authorization v-model="auth" />
         </div>
-        <div v-if="authType === 'api-key'">
-          <div class="flex flex-1 border-b border-dividerLight">
-            <SmartEnvInput
-              v-model="apiKey"
-              :environment-highlights="false"
-              placeholder="Key"
-            />
-          </div>
-          <div class="flex flex-1 border-b border-dividerLight">
-            <SmartEnvInput
-              v-model="apiValue"
-              :environment-highlights="false"
-              placeholder="Value"
-            />
-          </div>
-          <div class="flex items-center border-b border-dividerLight">
-            <span class="flex items-center">
-              <label class="ml-4 text-secondaryLight">
-                {{ t("authorization.pass_key_by") }}
-              </label>
-              <tippy
-                interactive
-                trigger="click"
-                theme="popover"
-                :on-shown="() => authTippyActions.focus()"
-              >
-                <span class="select-wrapper">
-                  <HoppButtonSecondary
-                    :label="addTo || t('state.none')"
-                    class="pr-8 ml-2 rounded-none"
-                  />
-                </span>
-                <template #content="{ hide }">
-                  <div
-                    ref="authTippyActions"
-                    class="flex flex-col focus:outline-none"
-                    tabindex="0"
-                    @keyup.escape="hide()"
-                  >
-                    <HoppSmartItem
-                      :icon="addTo === 'Headers' ? IconCircleDot : IconCircle"
-                      :active="addTo === 'Headers'"
-                      :label="'Headers'"
-                      @click="
-                        () => {
-                          addTo = 'Headers'
-                          hide()
-                        }
-                      "
-                    />
-                    <HoppSmartItem
-                      :icon="
-                        addTo === 'Query params' ? IconCircleDot : IconCircle
-                      "
-                      :active="addTo === 'Query params'"
-                      :label="'Query params'"
-                      @click="
-                        () => {
-                          addTo = 'Query params'
-                          hide()
-                        }
-                      "
-                    />
-                  </div>
-                </template>
-              </tippy>
-            </span>
-          </div>
+        <div v-if="auth.authType === 'api-key'">
+          <HttpAuthorizationApiKey v-model="auth" />
         </div>
       </div>
       <div
@@ -264,55 +190,45 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, Ref } from "vue"
-import {
-  HoppGQLAuthAPIKey,
-  HoppGQLAuthBasic,
-  HoppGQLAuthBearer,
-  HoppGQLAuthOAuth2,
-} from "@hoppscotch/data"
-
-import { pluckRef } from "@composables/ref"
-import { useStream } from "@composables/stream"
-import { useI18n } from "@composables/i18n"
-import { useColorMode } from "@composables/theming"
-import { gqlAuth$, setGQLAuth } from "~/newstore/GQLSession"
-
-import IconTrash2 from "~icons/lucide/trash-2"
 import IconHelpCircle from "~icons/lucide/help-circle"
+import IconTrash2 from "~icons/lucide/trash-2"
 import IconExternalLink from "~icons/lucide/external-link"
 import IconCircleDot from "~icons/lucide/circle-dot"
 import IconCircle from "~icons/lucide/circle"
+import { computed, ref } from "vue"
+import { HoppGQLAuth } from "@hoppscotch/data"
+import { pluckRef } from "@composables/ref"
+import { useI18n } from "@composables/i18n"
+import { useColorMode } from "@composables/theming"
+import { useVModel } from "@vueuse/core"
 
 const t = useI18n()
+
 const colorMode = useColorMode()
 
-const auth = useStream(
-  gqlAuth$,
-  { authType: "none", authActive: true },
-  setGQLAuth
-)
+const props = defineProps<{
+  modelValue: HoppGQLAuth
+}>()
+
+const emit = defineEmits<{
+  (e: "update:modelValue", value: HoppGQLAuth): void
+}>()
+
+const auth = useVModel(props, "modelValue", emit)
+
+const AUTH_KEY_NAME = {
+  basic: "Basic Auth",
+  bearer: "Bearer",
+  "oauth-2": "OAuth 2.0",
+  "api-key": "API key",
+  none: "None",
+} as const
+
 const authType = pluckRef(auth, "authType")
-const authName = computed(() => {
-  if (authType.value === "basic") return "Basic Auth"
-  else if (authType.value === "bearer") return "Bearer"
-  else if (authType.value === "oauth-2") return "OAuth 2.0"
-  else if (authType.value === "api-key") return "API key"
-  else return "None"
-})
+const authName = computed(() =>
+  AUTH_KEY_NAME[authType.value] ? AUTH_KEY_NAME[authType.value] : "None"
+)
 const authActive = pluckRef(auth, "authActive")
-const basicUsername = pluckRef(auth as Ref<HoppGQLAuthBasic>, "username")
-const basicPassword = pluckRef(auth as Ref<HoppGQLAuthBasic>, "password")
-const bearerToken = pluckRef(auth as Ref<HoppGQLAuthBearer>, "token")
-const oauth2Token = pluckRef(auth as Ref<HoppGQLAuthOAuth2>, "token")
-const apiKey = pluckRef(auth as Ref<HoppGQLAuthAPIKey>, "key")
-const apiValue = pluckRef(auth as Ref<HoppGQLAuthAPIKey>, "value")
-const addTo = pluckRef(auth as Ref<HoppGQLAuthAPIKey>, "addTo")
-if (typeof addTo.value === "undefined") {
-  addTo.value = "Headers"
-  apiKey.value = ""
-  apiValue.value = ""
-}
 
 const clearContent = () => {
   auth.value = {
@@ -323,5 +239,4 @@ const clearContent = () => {
 
 // Template refs
 const tippyActions = ref<any | null>(null)
-const authTippyActions = ref<any | null>(null)
 </script>

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

@@ -0,0 +1,430 @@
+<template>
+  <div
+    class="sticky z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight"
+  >
+    <label class="font-semibold text-secondaryLight">
+      {{ t("tab.headers") }}
+    </label>
+    <div class="flex">
+      <HoppButtonSecondary
+        v-tippy="{ theme: 'tooltip' }"
+        to="https://docs.hoppscotch.io/documentation/features/graphql-api-testing"
+        blank
+        :title="t('app.wiki')"
+        :icon="IconHelpCircle"
+      />
+      <HoppButtonSecondary
+        v-tippy="{ theme: 'tooltip' }"
+        :title="t('action.clear_all')"
+        :icon="IconTrash2"
+        @click="clearContent()"
+      />
+      <HoppButtonSecondary
+        v-tippy="{ theme: 'tooltip' }"
+        :title="t('state.linewrap')"
+        :class="{ '!text-accent': linewrapEnabled }"
+        :icon="IconWrapText"
+        @click.prevent="linewrapEnabled = !linewrapEnabled"
+      />
+      <HoppButtonSecondary
+        v-tippy="{ theme: 'tooltip' }"
+        :title="t('state.bulk_mode')"
+        :icon="IconEdit"
+        :class="{ '!text-accent': bulkMode }"
+        @click="bulkMode = !bulkMode"
+      />
+      <HoppButtonSecondary
+        v-tippy="{ theme: 'tooltip' }"
+        :title="t('add.new')"
+        :icon="IconPlus"
+        :disabled="bulkMode"
+        @click="addHeader"
+      />
+    </div>
+  </div>
+  <div v-if="bulkMode" ref="bulkEditor" class="flex flex-col flex-1"></div>
+  <div v-else>
+    <draggable
+      v-model="workingHeaders"
+      :item-key="(header: any) => `header-${header.id}`"
+      animation="250"
+      handle=".draggable-handle"
+      draggable=".draggable-content"
+      ghost-class="cursor-move"
+      chosen-class="bg-primaryLight"
+      drag-class="cursor-grabbing"
+    >
+      <template #item="{ element: header, index }">
+        <div
+          class="flex border-b divide-x divide-dividerLight border-dividerLight draggable-content group"
+        >
+          <span>
+            <HoppButtonSecondary
+              v-tippy="{
+                theme: 'tooltip',
+                delay: [500, 20],
+                content:
+                  index !== workingHeaders?.length - 1
+                    ? t('action.drag_to_reorder')
+                    : null,
+              }"
+              :icon="IconGripVertical"
+              class="cursor-auto text-primary hover:text-primary"
+              :class="{
+                'draggable-handle group-hover:text-secondaryLight !cursor-grab':
+                  index !== workingHeaders?.length - 1,
+              }"
+              tabindex="-1"
+            />
+          </span>
+          <HoppSmartAutoComplete
+            :placeholder="`${t('count.header', { count: index + 1 })}`"
+            :source="commonHeaders"
+            :spellcheck="false"
+            :value="header.key"
+            autofocus
+            styles="
+                bg-transparent
+                flex
+                flex-1
+                py-1
+                px-4
+                truncate
+              "
+            class="flex-1 !flex"
+            @input="
+              updateHeader(index, {
+                id: header.id,
+                key: $event,
+                value: header.value,
+                active: header.active,
+              })
+            "
+          />
+          <input
+            class="flex flex-1 px-4 py-2 bg-transparent"
+            :placeholder="`${t('count.value', { count: index + 1 })}`"
+            :name="`value ${String(index)}`"
+            :value="header.value"
+            autofocus
+            @change="
+              updateHeader(index, {
+                id: header.id,
+                key: header.key,
+                value: ($event!.target! as HTMLInputElement).value,
+                active: header.active,
+              })
+            "
+          />
+          <span>
+            <HoppButtonSecondary
+              v-tippy="{ theme: 'tooltip' }"
+              :title="
+                header.hasOwnProperty('active')
+                  ? header.active
+                    ? t('action.turn_off')
+                    : t('action.turn_on')
+                  : t('action.turn_off')
+              "
+              :icon="
+                header.hasOwnProperty('active')
+                  ? header.active
+                    ? IconCheckCircle
+                    : IconCircle
+                  : IconCheckCircle
+              "
+              color="green"
+              @click="
+                updateHeader(index, {
+                  id: header.id,
+                  key: header.key,
+                  value: header.value,
+                  active: !header.active,
+                })
+              "
+            />
+          </span>
+          <span>
+            <HoppButtonSecondary
+              v-tippy="{ theme: 'tooltip' }"
+              :title="t('action.remove')"
+              :icon="IconTrash"
+              color="red"
+              @click="deleteHeader(index)"
+            />
+          </span>
+        </div>
+      </template>
+    </draggable>
+    <HoppSmartPlaceholder
+      v-if="workingHeaders.length === 0"
+      :src="`/images/states/${colorMode.value}/add_category.svg`"
+      :alt="`${t('empty.headers')}`"
+      :text="t('empty.headers')"
+    >
+      <HoppButtonSecondary
+        :label="`${t('add.new')}`"
+        filled
+        :icon="IconPlus"
+        @click="addHeader"
+      />
+    </HoppSmartPlaceholder>
+  </div>
+</template>
+
+<script setup lang="ts">
+import IconHelpCircle from "~icons/lucide/help-circle"
+import IconTrash2 from "~icons/lucide/trash-2"
+import IconEdit from "~icons/lucide/edit"
+import IconPlus from "~icons/lucide/plus"
+import IconGripVertical from "~icons/lucide/grip-vertical"
+import IconCheckCircle from "~icons/lucide/check-circle"
+import IconTrash from "~icons/lucide/trash"
+import IconCircle from "~icons/lucide/circle"
+import IconWrapText from "~icons/lucide/wrap-text"
+import { reactive, ref, watch } from "vue"
+import * as E from "fp-ts/Either"
+import * as O from "fp-ts/Option"
+import * as A from "fp-ts/Array"
+import * as RA from "fp-ts/ReadonlyArray"
+import { pipe, flow } from "fp-ts/function"
+import {
+  GQLHeader,
+  rawKeyValueEntriesToString,
+  parseRawKeyValueEntriesE,
+  RawKeyValueEntry,
+  HoppGQLRequest,
+} from "@hoppscotch/data"
+import draggable from "vuedraggable-es"
+import { clone, cloneDeep, isEqual } from "lodash-es"
+import { useColorMode } from "@composables/theming"
+import { useI18n } from "@composables/i18n"
+import { useToast } from "@composables/toast"
+import { commonHeaders } from "~/helpers/headers"
+import { useCodemirror } from "@composables/codemirror"
+import { objRemoveKey } from "~/helpers/functional/object"
+import { useVModel } from "@vueuse/core"
+
+const colorMode = useColorMode()
+const t = useI18n()
+const toast = useToast()
+
+// v-model integration with props and emit
+const props = defineProps<{ modelValue: HoppGQLRequest }>()
+
+const emit = defineEmits<{
+  (e: "update:modelValue", value: HoppGQLRequest): void
+}>()
+
+const request = useVModel(props, "modelValue", emit)
+
+const idTicker = ref(0)
+
+const linewrapEnabled = ref(false)
+const bulkMode = ref(false)
+const bulkHeaders = ref("")
+
+const deletionToast = ref<{ goAway: (delay: number) => void } | null>(null)
+
+const bulkEditor = ref<any | null>(null)
+
+useCodemirror(
+  bulkEditor,
+  bulkHeaders,
+  reactive({
+    extendedEditorConfig: {
+      mode: "text/x-yaml",
+      placeholder: `${t("state.bulk_mode_placeholder")}`,
+      lineWrapping: linewrapEnabled,
+    },
+    linter: null,
+    completer: null,
+    environmentHighlights: false,
+  })
+)
+
+// The UI representation of the headers list (has the empty end header)
+const workingHeaders = ref<Array<GQLHeader & { id: number }>>([
+  {
+    id: idTicker.value++,
+    key: "",
+    value: "",
+    active: true,
+  },
+])
+
+// Rule: Working Headers always have one empty header or the last element is always an empty header
+watch(workingHeaders, (headersList) => {
+  if (
+    headersList.length > 0 &&
+    headersList[headersList.length - 1].key !== ""
+  ) {
+    workingHeaders.value.push({
+      id: idTicker.value++,
+      key: "",
+      value: "",
+      active: true,
+    })
+  }
+})
+
+// Sync logic between headers and working headers
+watch(
+  props.modelValue.headers,
+  (newHeadersList) => {
+    // Sync should overwrite working headers
+    const filteredWorkingHeaders = pipe(
+      workingHeaders.value,
+      A.filterMap(
+        flow(
+          O.fromPredicate((e) => e.key !== ""),
+          O.map(objRemoveKey("id"))
+        )
+      )
+    )
+
+    const filteredBulkHeaders = pipe(
+      parseRawKeyValueEntriesE(bulkHeaders.value),
+      E.map(
+        flow(
+          RA.filter((e) => e.key !== ""),
+          RA.toArray
+        )
+      ),
+      E.getOrElse(() => [] as RawKeyValueEntry[])
+    )
+
+    if (!isEqual(newHeadersList, filteredWorkingHeaders)) {
+      workingHeaders.value = pipe(
+        newHeadersList,
+        A.map((x) => ({ id: idTicker.value++, ...x }))
+      )
+    }
+
+    if (!isEqual(newHeadersList, filteredBulkHeaders)) {
+      bulkHeaders.value = rawKeyValueEntriesToString(newHeadersList)
+    }
+  },
+  { immediate: true }
+)
+
+watch(workingHeaders, (newWorkingHeaders) => {
+  const fixedHeaders = pipe(
+    newWorkingHeaders,
+    A.filterMap(
+      flow(
+        O.fromPredicate((e) => e.key !== ""),
+        O.map(objRemoveKey("id"))
+      )
+    )
+  )
+
+  if (!isEqual(request.value.headers, fixedHeaders)) {
+    request.value.headers = cloneDeep(fixedHeaders)
+  }
+})
+
+// Bulk Editor Syncing with Working Headers
+watch(bulkHeaders, (newBulkHeaders) => {
+  const filteredBulkHeaders = pipe(
+    parseRawKeyValueEntriesE(newBulkHeaders),
+    E.map(
+      flow(
+        RA.filter((e) => e.key !== ""),
+        RA.toArray
+      )
+    ),
+    E.getOrElse(() => [] as RawKeyValueEntry[])
+  )
+
+  if (!isEqual(request.value.headers, filteredBulkHeaders)) {
+    request.value.headers = filteredBulkHeaders
+  }
+})
+
+watch(workingHeaders, (newHeadersList) => {
+  // If we are in bulk mode, don't apply direct changes
+  if (bulkMode.value) return
+
+  try {
+    const currentBulkHeaders = bulkHeaders.value.split("\n").map((item) => ({
+      key: item.substring(0, item.indexOf(":")).trimLeft().replace(/^#/, ""),
+      value: item.substring(item.indexOf(":") + 1).trimLeft(),
+      active: !item.trim().startsWith("#"),
+    }))
+
+    const filteredHeaders = newHeadersList.filter((x) => x.key !== "")
+
+    if (!isEqual(currentBulkHeaders, filteredHeaders)) {
+      bulkHeaders.value = rawKeyValueEntriesToString(filteredHeaders)
+    }
+  } catch (e) {
+    toast.error(`${t("error.something_went_wrong")}`)
+    console.error(e)
+  }
+})
+
+const addHeader = () => {
+  workingHeaders.value.push({
+    id: idTicker.value++,
+    key: "",
+    value: "",
+    active: true,
+  })
+}
+
+const updateHeader = (index: number, header: GQLHeader & { id: number }) => {
+  workingHeaders.value = workingHeaders.value.map((h, i) =>
+    i === index ? header : h
+  )
+}
+
+const deleteHeader = (index: number) => {
+  const headersBeforeDeletion = clone(workingHeaders.value)
+
+  if (
+    !(
+      headersBeforeDeletion.length > 0 &&
+      index === headersBeforeDeletion.length - 1
+    )
+  ) {
+    if (deletionToast.value) {
+      deletionToast.value.goAway(0)
+      deletionToast.value = null
+    }
+
+    deletionToast.value = toast.success(`${t("state.deleted")}`, {
+      action: [
+        {
+          text: `${t("action.undo")}`,
+          onClick: (_: any, toastObject: any) => {
+            workingHeaders.value = headersBeforeDeletion
+            toastObject.goAway(0)
+            deletionToast.value = null
+          },
+        },
+      ],
+
+      onComplete: () => {
+        deletionToast.value = null
+      },
+    })
+  }
+
+  workingHeaders.value.splice(index, 1)
+}
+
+const clearContent = () => {
+  // set headers list to the initial state
+  workingHeaders.value = [
+    {
+      id: idTicker.value++,
+      key: "",
+      value: "",
+      active: true,
+    },
+  ]
+
+  bulkHeaders.value = ""
+}
+</script>

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

@@ -0,0 +1,237 @@
+<template>
+  <div
+    class="sticky z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight gqlRunQuery"
+  >
+    <label class="font-semibold text-secondaryLight">
+      {{ t("request.query") }}
+    </label>
+    <div class="flex">
+      <HoppButtonSecondary
+        v-if="subscriptionState === 'SUBSCRIBED'"
+        v-tippy="{
+          theme: 'tooltip',
+          delay: [500, 20],
+          allowHTML: true,
+        }"
+        :title="`${t('request.stop')}`"
+        :label="`${t('request.stop')}`"
+        :icon="IconStop"
+        class="rounded-none !text-accent !hover:text-accentDark"
+        @click="unsubscribe()"
+      />
+
+      <HoppButtonSecondary
+        v-if="selectedOperation && subscriptionState !== 'SUBSCRIBED'"
+        v-tippy="{
+          theme: 'tooltip',
+          delay: [500, 20],
+          allowHTML: true,
+        }"
+        :title="`${t('request.run')} <kbd>${getSpecialKey()}</kbd><kbd>G</kbd>`"
+        :label="`${selectedOperation.name?.value ?? t('request.run')}`"
+        :icon="IconPlay"
+        :disabled="!selectedOperation"
+        class="rounded-none !text-accent !hover:text-accentDark"
+        @click="runQuery(selectedOperation)"
+      />
+
+      <HoppButtonSecondary
+        v-tippy="{ theme: 'tooltip', delay: [500, 20], allowHTML: true }"
+        :title="`${t(
+          'request.save'
+        )} <kbd>${getSpecialKey()}</kbd><kbd>S</kbd>`"
+        :label="`${t('request.save')}`"
+        :icon="IconSave"
+        class="rounded-none"
+        @click="saveRequest"
+      />
+      <HoppButtonSecondary
+        v-tippy="{ theme: 'tooltip' }"
+        to="https://docs.hoppscotch.io/documentation/features/graphql-api-testing"
+        blank
+        :title="t('app.wiki')"
+        :icon="IconHelpCircle"
+      />
+      <HoppButtonSecondary
+        v-tippy="{ theme: 'tooltip' }"
+        :title="t('action.clear_all')"
+        :icon="IconTrash2"
+        @click="clearGQLQuery()"
+      />
+      <HoppButtonSecondary
+        v-tippy="{ theme: 'tooltip' }"
+        :title="t('state.linewrap')"
+        :class="{ '!text-accent': linewrapEnabled }"
+        :icon="IconWrapText"
+        @click.prevent="linewrapEnabled = !linewrapEnabled"
+      />
+      <HoppButtonSecondary
+        v-tippy="{ theme: 'tooltip' }"
+        :title="t('action.prettify')"
+        :icon="prettifyQueryIcon"
+        @click="prettifyQuery"
+      />
+      <HoppButtonSecondary
+        v-tippy="{ theme: 'tooltip' }"
+        :title="t('action.copy')"
+        :icon="copyQueryIcon"
+        @click="copyQuery"
+      />
+    </div>
+  </div>
+  <div ref="queryEditor" class="flex flex-col flex-1"></div>
+</template>
+
+<script setup lang="ts">
+import IconPlay from "~icons/lucide/play"
+import IconStop from "~icons/lucide/stop-circle"
+import IconSave from "~icons/lucide/save"
+import IconHelpCircle from "~icons/lucide/help-circle"
+import IconTrash2 from "~icons/lucide/trash-2"
+import IconCopy from "~icons/lucide/copy"
+import IconCheck from "~icons/lucide/check"
+import IconInfo from "~icons/lucide/info"
+import IconWand from "~icons/lucide/wand"
+import IconWrapText from "~icons/lucide/wrap-text"
+import { onMounted, reactive, ref, markRaw } from "vue"
+import { copyToClipboard } from "@helpers/utils/clipboard"
+import { useCodemirror } from "@composables/codemirror"
+import { useI18n } from "@composables/i18n"
+import { refAutoReset, useVModel } from "@vueuse/core"
+import { useToast } from "~/composables/toast"
+import { getPlatformSpecialKey as getSpecialKey } from "~/helpers/platformutils"
+import * as gql from "graphql"
+import { createGQLQueryLinter } from "~/helpers/editor/linting/gqlQuery"
+import queryCompleter from "~/helpers/editor/completion/gqlQuery"
+import { selectedGQLOpHighlight } from "~/helpers/editor/gql/operation"
+import { debounce } from "lodash-es"
+import { ViewUpdate } from "@codemirror/view"
+import { defineActionHandler } from "~/helpers/actions"
+import {
+  schema,
+  socketDisconnect,
+  subscriptionState,
+} from "~/helpers/graphql/connection"
+
+// Template refs
+const queryEditor = ref<any | null>(null)
+
+const t = useI18n()
+const toast = useToast()
+
+const props = defineProps<{
+  modelValue: string
+}>()
+
+const emit = defineEmits<{
+  (e: "save-request"): void
+  (e: "update:modelValue", val: string): void
+  (e: "run-query", definition: gql.OperationDefinitionNode | null): void
+}>()
+
+const copyQueryIcon = refAutoReset<typeof IconCopy | typeof IconCheck>(
+  IconCopy,
+  1000
+)
+const prettifyQueryIcon = refAutoReset<
+  typeof IconWand | typeof IconCheck | typeof IconInfo
+>(IconWand, 1000)
+
+const linewrapEnabled = ref(true)
+
+const selectedOperation = ref<gql.OperationDefinitionNode | null>(null)
+
+const gqlQueryString = useVModel(props, "modelValue", emit)
+
+const debouncedOnUpdateQueryState = debounce((update: ViewUpdate) => {
+  if (!update.selectionSet) return
+
+  const selectedPos = update.state.selection.main.head
+  const queryString = update.state.doc.toJSON().join(update.state.lineBreak)
+
+  try {
+    const operations = gql.parse(queryString)
+    if (operations.definitions.length === 1) {
+      selectedOperation.value = operations
+        .definitions[0] as gql.OperationDefinitionNode
+      return
+    }
+
+    selectedOperation.value =
+      (operations.definitions.find((def) => {
+        if (def.kind !== "OperationDefinition") return false
+        const { start, end } = def.loc!
+        return selectedPos >= start && selectedPos <= end
+      }) as gql.OperationDefinitionNode) ?? null
+  } catch (error) {
+    // console.error(error)
+  }
+}, 300)
+
+onMounted(() => {
+  try {
+    const operations = gql.parse(gqlQueryString.value)
+    if (operations.definitions.length) {
+      selectedOperation.value = operations
+        .definitions[0] as gql.OperationDefinitionNode
+      return
+    }
+  } catch (error) {}
+})
+
+useCodemirror(
+  queryEditor,
+  gqlQueryString,
+  reactive({
+    extendedEditorConfig: {
+      mode: "graphql",
+      placeholder: `${t("request.query")}`,
+      lineWrapping: linewrapEnabled,
+    },
+    linter: createGQLQueryLinter(schema),
+    completer: queryCompleter(schema),
+    environmentHighlights: false,
+    additionalExts: [markRaw(selectedGQLOpHighlight)],
+    onUpdate: debouncedOnUpdateQueryState,
+  })
+)
+
+// operations on graphql query string
+// const operations = useReadonlyStream(props.request.operations$, [])
+
+const prettifyQuery = () => {
+  try {
+    gqlQueryString.value = gql.print(
+      gql.parse(gqlQueryString.value, {
+        allowLegacyFragmentVariables: true,
+      })
+    )
+    prettifyQueryIcon.value = IconCheck
+  } catch (e) {
+    toast.error(`${t("error.gql_prettify_invalid_query")}`)
+    prettifyQueryIcon.value = IconInfo
+  }
+}
+
+const copyQuery = () => {
+  copyToClipboard(gqlQueryString.value)
+  copyQueryIcon.value = IconCheck
+  toast.success(`${t("state.copied_to_clipboard")}`)
+}
+
+const clearGQLQuery = () => {
+  gqlQueryString.value = ""
+}
+
+const runQuery = (definition: gql.OperationDefinitionNode | null = null) => {
+  emit("run-query", definition)
+}
+const unsubscribe = () => {
+  socketDisconnect()
+}
+const saveRequest = () => {
+  emit("save-request")
+}
+
+defineActionHandler("editor.format", prettifyQuery)
+</script>

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

@@ -17,55 +17,127 @@
       <HoppButtonPrimary
         id="get"
         name="get"
-        :loading="isLoading"
+        :loading="connection.state === 'CONNECTING'"
         :label="!connected ? t('action.connect') : t('action.disconnect')"
         class="w-32"
         @click="onConnectClick"
       />
     </div>
   </div>
+  <HoppSmartModal
+    v-if="connectionSwitchModal"
+    dialog
+    :dimissible="false"
+    :title="t('graphql.switch_connection')"
+    @close="connectionSwitchModal = false"
+  >
+    <template #body>
+      <p class="mb-4">
+        {{ t("graphql.connection_switch_url") }}:
+        <kbd class="shortcut-key !ml-0"> {{ lastTwoUrls.at(0) }} </kbd>
+      </p>
+      <p class="mb-4">
+        {{ t("graphql.connection_switch_new_url") }}:
+        <kbd class="shortcut-key !ml-0"> {{ lastTwoUrls.at(1) }} </kbd>
+      </p>
+      <p>{{ t("graphql.connection_switch_confirm") }}</p>
+    </template>
+    <template #footer>
+      <span class="flex space-x-2">
+        <HoppButtonPrimary
+          :label="t('action.connect')"
+          :loading="connection.state === 'CONNECTING'"
+          outline
+          @click="switchConnection()"
+        />
+        <HoppButtonSecondary
+          :label="t('action.cancel')"
+          outline
+          filled
+          @click="cancelSwitch()"
+        />
+      </span>
+    </template>
+  </HoppSmartModal>
 </template>
 
 <script setup lang="ts">
 import { platform } from "~/platform"
-import { GQLConnection } from "~/helpers/GQLConnection"
-import { getCurrentStrategyID } from "~/helpers/network"
-import { useReadonlyStream, useStream } from "@composables/stream"
 import { useI18n } from "@composables/i18n"
-import {
-  gqlAuth$,
-  gqlHeaders$,
-  gqlURL$,
-  setGQLURL,
-} from "~/newstore/GQLSession"
+import { currentActiveTab } from "~/helpers/graphql/tab"
+import { computed, ref, watch } from "vue"
+import { connection } from "~/helpers/graphql/connection"
+import { connect } from "~/helpers/graphql/connection"
+import { disconnect } from "~/helpers/graphql/connection"
+import { InterceptorService } from "~/services/interceptor.service"
+import { useService } from "dioc/vue"
 
 const t = useI18n()
 
-const props = defineProps<{
-  conn: GQLConnection
-}>()
+const interceptorService = useService(InterceptorService)
 
-const connected = useReadonlyStream(props.conn.connected$, false)
-const isLoading = useReadonlyStream(props.conn.isLoading$, false)
-const headers = useReadonlyStream(gqlHeaders$, [])
-const auth = useReadonlyStream(gqlAuth$, {
-  authType: "none",
-  authActive: true,
+const connectionSwitchModal = ref(false)
+
+const connected = computed(() => connection.state === "CONNECTED")
+
+const url = computed({
+  get: () => currentActiveTab.value?.document.request.url ?? "",
+  set: (value) => {
+    currentActiveTab.value!.document.request.url = value
+  },
 })
 
-const url = useStream(gqlURL$, "", setGQLURL)
-
 const onConnectClick = () => {
   if (!connected.value) {
-    props.conn.connect(url.value, headers.value as any, auth.value)
-
-    platform.analytics?.logEvent({
-      type: "HOPP_REQUEST_RUN",
-      platform: "graphql-schema",
-      strategy: getCurrentStrategyID(),
-    })
+    gqlConnect()
   } else {
-    props.conn.disconnect()
+    disconnect()
   }
 }
+
+const gqlConnect = () => {
+  connect(url.value, currentActiveTab.value?.document.request.headers)
+
+  platform.analytics?.logEvent({
+    type: "HOPP_REQUEST_RUN",
+    platform: "graphql-schema",
+    strategy: interceptorService.currentInterceptorID.value!,
+  })
+}
+
+const switchConnection = () => {
+  gqlConnect()
+  connectionSwitchModal.value = false
+}
+
+const lastTwoUrls = ref<string[]>([])
+
+watch(
+  currentActiveTab,
+  (newVal) => {
+    if (newVal) {
+      lastTwoUrls.value.push(newVal.document.request.url)
+      if (lastTwoUrls.value.length > 2) {
+        lastTwoUrls.value.shift()
+      }
+    }
+
+    if (
+      connected.value &&
+      lastTwoUrls.value.length === 2 &&
+      lastTwoUrls.value.at(0) !== lastTwoUrls.value.at(1)
+    ) {
+      disconnect()
+      connectionSwitchModal.value = true
+    }
+  },
+  {
+    immediate: true,
+  }
+)
+
+const cancelSwitch = () => {
+  if (connected.value) disconnect()
+  connectionSwitchModal.value = false
+}
 </script>

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

@@ -2,318 +2,42 @@
   <div class="flex flex-col flex-1 h-full">
     <HoppSmartTabs
       v-model="selectedOptionTab"
-      styles="sticky overflow-x-auto flex-shrink-0 bg-primary top-upperPrimaryStickyFold z-10"
-      render-inactive-tabs
+      styles="sticky bg-primary z-10"
+      :render-inactive-tabs="true"
     >
       <HoppSmartTab
         :id="'query'"
         :label="`${t('tab.query')}`"
-        :indicator="gqlQueryString && gqlQueryString.length > 0 ? true : false"
+        :indicator="request.query && request.query.length > 0 ? true : false"
       >
-        <div
-          class="sticky z-10 flex items-center justify-between flex-shrink-0 pl-4 overflow-x-auto border-b bg-primary border-dividerLight top-upperSecondaryStickyFold gqlRunQuery"
-        >
-          <label class="font-semibold truncate text-secondaryLight">
-            {{ t("request.query") }}
-          </label>
-          <div class="flex">
-            <HoppButtonSecondary
-              v-tippy="{ theme: 'tooltip', delay: [500, 20], allowHTML: true }"
-              :title="`${t(
-                'request.run'
-              )} <kbd>${getSpecialKey()}</kbd><kbd>↩</kbd>`"
-              :label="`${t('request.run')}`"
-              :icon="IconPlay"
-              class="rounded-none !text-accent !hover:text-accentDark"
-              @click="runQuery()"
-            />
-            <HoppButtonSecondary
-              v-tippy="{ theme: 'tooltip', delay: [500, 20], allowHTML: true }"
-              :title="`${t(
-                'request.save'
-              )} <kbd>${getSpecialKey()}</kbd><kbd>S</kbd>`"
-              :label="`${t('request.save')}`"
-              :icon="IconSave"
-              class="rounded-none"
-              @click="saveRequest"
-            />
-            <HoppButtonSecondary
-              v-tippy="{ theme: 'tooltip' }"
-              to="https://docs.hoppscotch.io/documentation/features/graphql-api-testing"
-              blank
-              :title="t('app.wiki')"
-              :icon="IconHelpCircle"
-            />
-            <HoppButtonSecondary
-              v-tippy="{ theme: 'tooltip' }"
-              :title="t('action.clear_all')"
-              :icon="IconTrash2"
-              @click="clearGQLQuery()"
-            />
-            <HoppButtonSecondary
-              v-tippy="{ theme: 'tooltip' }"
-              :title="t('state.linewrap')"
-              :class="{ '!text-accent': linewrapEnabledQuery }"
-              :icon="IconWrapText"
-              @click.prevent="linewrapEnabledQuery = !linewrapEnabledQuery"
-            />
-            <HoppButtonSecondary
-              v-tippy="{ theme: 'tooltip' }"
-              :title="t('action.prettify')"
-              :icon="prettifyQueryIcon"
-              @click="prettifyQuery"
-            />
-            <HoppButtonSecondary
-              v-tippy="{ theme: 'tooltip' }"
-              :title="t('action.copy')"
-              :icon="copyQueryIcon"
-              @click="copyQuery"
-            />
-          </div>
-        </div>
-        <div ref="queryEditor" class="flex flex-col flex-1"></div>
+        <GraphqlQuery
+          v-model="request.query"
+          @run-query="runQuery"
+          @save-request="saveRequest"
+        />
       </HoppSmartTab>
       <HoppSmartTab
         :id="'variables'"
         :label="`${t('tab.variables')}`"
-        :indicator="variableString && variableString.length > 0 ? true : false"
+        :indicator="
+          request.variables && request.variables.length > 0 ? true : false
+        "
       >
-        <div
-          class="sticky z-10 flex items-center justify-between flex-shrink-0 pl-4 overflow-x-auto border-b bg-primary border-dividerLight top-upperSecondaryStickyFold"
-        >
-          <label class="font-semibold truncate text-secondaryLight">
-            {{ t("request.variables") }}
-          </label>
-          <div class="flex">
-            <HoppButtonSecondary
-              v-tippy="{ theme: 'tooltip' }"
-              to="https://docs.hoppscotch.io/documentation/features/graphql-api-testing"
-              blank
-              :title="t('app.wiki')"
-              :icon="IconHelpCircle"
-            />
-            <HoppButtonSecondary
-              v-tippy="{ theme: 'tooltip' }"
-              :title="t('action.clear_all')"
-              :icon="IconTrash2"
-              @click="clearGQLVariables()"
-            />
-            <HoppButtonSecondary
-              v-tippy="{ theme: 'tooltip' }"
-              :title="t('state.linewrap')"
-              :class="{ '!text-accent': linewrapEnabledVariable }"
-              :icon="IconWrapText"
-              @click.prevent="
-                linewrapEnabledVariable = !linewrapEnabledVariable
-              "
-            />
-            <HoppButtonSecondary
-              v-tippy="{ theme: 'tooltip' }"
-              :title="t('action.prettify')"
-              :icon="prettifyVariablesIcon"
-              @click="prettifyVariableString"
-            />
-            <HoppButtonSecondary
-              v-tippy="{ theme: 'tooltip' }"
-              :title="t('action.copy')"
-              :icon="copyVariablesIcon"
-              @click="copyVariables"
-            />
-          </div>
-        </div>
-        <div ref="variableEditor" class="flex flex-col flex-1"></div>
+        <GraphqlVariable
+          v-model="request.variables"
+          @run-query="runQuery"
+          @save-request="saveRequest"
+        />
       </HoppSmartTab>
       <HoppSmartTab
         :id="'headers'"
         :label="`${t('tab.headers')}`"
         :info="activeGQLHeadersCount === 0 ? null : `${activeGQLHeadersCount}`"
       >
-        <div
-          class="sticky z-10 flex items-center justify-between flex-shrink-0 pl-4 overflow-x-auto border-b bg-primary border-dividerLight top-upperSecondaryStickyFold"
-        >
-          <label class="font-semibold truncate text-secondaryLight">
-            {{ t("tab.headers") }}
-          </label>
-          <div class="flex">
-            <HoppButtonSecondary
-              v-tippy="{ theme: 'tooltip' }"
-              to="https://docs.hoppscotch.io/documentation/features/graphql-api-testing"
-              blank
-              :title="t('app.wiki')"
-              :icon="IconHelpCircle"
-            />
-            <HoppButtonSecondary
-              v-tippy="{ theme: 'tooltip' }"
-              :title="t('action.clear_all')"
-              :icon="IconTrash2"
-              @click="clearContent()"
-            />
-            <HoppButtonSecondary
-              v-tippy="{ theme: 'tooltip' }"
-              :title="t('state.linewrap')"
-              :class="{ '!text-accent': linewrapEnabled }"
-              :icon="IconWrapText"
-              @click.prevent="linewrapEnabled = !linewrapEnabled"
-            />
-            <HoppButtonSecondary
-              v-tippy="{ theme: 'tooltip' }"
-              :title="t('state.bulk_mode')"
-              :icon="IconEdit"
-              :class="{ '!text-accent': bulkMode }"
-              @click="bulkMode = !bulkMode"
-            />
-            <HoppButtonSecondary
-              v-tippy="{ theme: 'tooltip' }"
-              :title="t('add.new')"
-              :icon="IconPlus"
-              :disabled="bulkMode"
-              @click="addHeader"
-            />
-          </div>
-        </div>
-        <div
-          v-if="bulkMode"
-          ref="bulkEditor"
-          class="flex flex-col flex-1"
-        ></div>
-        <div v-else>
-          <draggable
-            v-model="workingHeaders"
-            :item-key="(header) => `header-${header.id}`"
-            animation="250"
-            handle=".draggable-handle"
-            draggable=".draggable-content"
-            ghost-class="cursor-move"
-            chosen-class="bg-primaryLight"
-            drag-class="cursor-grabbing"
-          >
-            <template #item="{ element: header, index }">
-              <div
-                class="flex border-b divide-x divide-dividerLight border-dividerLight draggable-content group"
-              >
-                <span>
-                  <HoppButtonSecondary
-                    v-tippy="{
-                      theme: 'tooltip',
-                      delay: [500, 20],
-                      content:
-                        index !== workingHeaders?.length - 1
-                          ? t('action.drag_to_reorder')
-                          : null,
-                    }"
-                    :icon="IconGripVertical"
-                    class="cursor-auto text-primary hover:text-primary"
-                    :class="{
-                      'draggable-handle group-hover:text-secondaryLight !cursor-grab':
-                        index !== workingHeaders?.length - 1,
-                    }"
-                    tabindex="-1"
-                  />
-                </span>
-                <HoppSmartAutoComplete
-                  :placeholder="`${t('count.header', { count: index + 1 })}`"
-                  :source="commonHeaders"
-                  :spellcheck="false"
-                  :value="header.key"
-                  autofocus
-                  styles="
-                bg-transparent
-                flex
-                flex-1
-                py-1
-                px-4
-                truncate
-              "
-                  class="flex-1 !flex"
-                  @input="
-                    updateHeader(index, {
-                      id: header.id,
-                      key: $event,
-                      value: header.value,
-                      active: header.active,
-                    })
-                  "
-                />
-                <input
-                  class="flex flex-1 px-4 py-2 bg-transparent"
-                  :placeholder="`${t('count.value', { count: index + 1 })}`"
-                  :name="`value ${String(index)}`"
-                  :value="header.value"
-                  autofocus
-                  @change="
-                    updateHeader(index, {
-                      id: header.id,
-                      key: header.key,
-                      value: ($event!.target! as HTMLInputElement).value,
-                      active: header.active,
-                    })
-                  "
-                />
-                <span>
-                  <HoppButtonSecondary
-                    v-tippy="{ theme: 'tooltip' }"
-                    :title="
-                      header.hasOwnProperty('active')
-                        ? header.active
-                          ? t('action.turn_off')
-                          : t('action.turn_on')
-                        : t('action.turn_off')
-                    "
-                    :icon="
-                      header.hasOwnProperty('active')
-                        ? header.active
-                          ? IconCheckCircle
-                          : IconCircle
-                        : IconCheckCircle
-                    "
-                    color="green"
-                    @click="
-                      updateHeader(index, {
-                        id: header.id,
-                        key: header.key,
-                        value: header.value,
-                        active: !header.active,
-                      })
-                    "
-                  />
-                </span>
-                <span>
-                  <HoppButtonSecondary
-                    v-tippy="{ theme: 'tooltip' }"
-                    :title="t('action.remove')"
-                    :icon="IconTrash"
-                    color="red"
-                    @click="deleteHeader(index)"
-                  />
-                </span>
-              </div>
-            </template>
-          </draggable>
-          <div
-            v-if="workingHeaders.length === 0"
-            class="flex flex-col items-center justify-center p-4 text-secondaryLight"
-          >
-            <img
-              :src="`/images/states/${colorMode.value}/add_category.svg`"
-              loading="lazy"
-              class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
-              :alt="`${t('empty.headers')}`"
-            />
-            <span class="pb-4 text-center">
-              {{ t("empty.headers") }}
-            </span>
-            <HoppButtonSecondary
-              :label="`${t('add.new')}`"
-              filled
-              :icon="IconPlus"
-              class="mb-4"
-              @click="addHeader"
-            />
-          </div>
-        </div>
+        <GraphqlHeaders v-model="request" />
       </HoppSmartTab>
       <HoppSmartTab :id="'authorization'" :label="`${t('tab.authorization')}`">
-        <GraphqlAuthorization />
+        <GraphqlAuthorization v-model="request.auth" />
       </HoppSmartTab>
     </HoppSmartTabs>
     <CollectionsSaveRequest
@@ -325,480 +49,142 @@
 </template>
 
 <script setup lang="ts">
-import IconPlay from "~icons/lucide/play"
-import IconSave from "~icons/lucide/save"
-import IconHelpCircle from "~icons/lucide/help-circle"
-import IconTrash2 from "~icons/lucide/trash-2"
-import IconEdit from "~icons/lucide/edit"
-import IconPlus from "~icons/lucide/plus"
-import IconGripVertical from "~icons/lucide/grip-vertical"
-import IconCheckCircle from "~icons/lucide/check-circle"
-import IconTrash from "~icons/lucide/trash"
-import IconCircle from "~icons/lucide/circle"
-import IconCopy from "~icons/lucide/copy"
-import IconCheck from "~icons/lucide/check"
-import IconInfo from "~icons/lucide/info"
-import IconWand2 from "~icons/lucide/wand-2"
-import IconWrapText from "~icons/lucide/wrap-text"
-import { Ref, computed, reactive, ref, watch } from "vue"
-import * as gql from "graphql"
-import * as E from "fp-ts/Either"
-import * as O from "fp-ts/Option"
-import * as A from "fp-ts/Array"
-import * as RA from "fp-ts/ReadonlyArray"
-import { pipe, flow } from "fp-ts/function"
-import {
-  GQLHeader,
-  makeGQLRequest,
-  rawKeyValueEntriesToString,
-  parseRawKeyValueEntriesE,
-  RawKeyValueEntry,
-} from "@hoppscotch/data"
-import draggable from "vuedraggable-es"
-import { clone, cloneDeep, isEqual } from "lodash-es"
-import { refAutoReset } from "@vueuse/core"
-import { copyToClipboard } from "~/helpers/utils/clipboard"
-import { useReadonlyStream, useStream } from "@composables/stream"
-import { useColorMode } from "@composables/theming"
 import { useI18n } from "@composables/i18n"
 import { useToast } from "@composables/toast"
-import { startPageProgress, completePageProgress } from "@modules/loadingbar"
-import {
-  gqlAuth$,
-  gqlHeaders$,
-  gqlQuery$,
-  gqlResponse$,
-  gqlURL$,
-  gqlVariables$,
-  setGQLAuth,
-  setGQLHeaders,
-  setGQLQuery,
-  setGQLResponse,
-  setGQLVariables,
-} from "~/newstore/GQLSession"
-import { commonHeaders } from "~/helpers/headers"
-import { GQLConnection } from "~/helpers/GQLConnection"
-import { makeGQLHistoryEntry, addGraphqlHistoryEntry } from "~/newstore/history"
-import { platform } from "~/platform"
-import { getCurrentStrategyID } from "~/helpers/network"
-import { useCodemirror } from "@composables/codemirror"
-import jsonLinter from "~/helpers/editor/linting/json"
-import { createGQLQueryLinter } from "~/helpers/editor/linting/gqlQuery"
-import queryCompleter from "~/helpers/editor/completion/gqlQuery"
+import { completePageProgress, startPageProgress } from "@modules/loadingbar"
+import * as gql from "graphql"
+import { clone } from "lodash-es"
+import { computed, ref, watch } from "vue"
 import { defineActionHandler } from "~/helpers/actions"
-import { getPlatformSpecialKey as getSpecialKey } from "~/helpers/platformutils"
-import { objRemoveKey } from "~/helpers/functional/object"
+import { HoppGQLRequest } from "@hoppscotch/data"
+import { platform } from "~/platform"
+import { currentActiveTab } from "~/helpers/graphql/tab"
+import { computedWithControl } from "@vueuse/core"
+import {
+  GQLResponseEvent,
+  runGQLOperation,
+  gqlMessageEvent,
+} from "~/helpers/graphql/connection"
+import { useService } from "dioc/vue"
+import { InterceptorService } from "~/services/interceptor.service"
 
 type OptionTabs = "query" | "headers" | "variables" | "authorization"
-
-const colorMode = useColorMode()
-
 const selectedOptionTab = ref<OptionTabs>("query")
+const interceptorService = useService(InterceptorService)
 
 const t = useI18n()
-
-const props = defineProps<{
-  conn: GQLConnection
-}>()
-
 const toast = useToast()
 
-const url = useReadonlyStream(gqlURL$, "")
-const gqlQueryString = useStream(gqlQuery$, "", setGQLQuery)
-const variableString = useStream(gqlVariables$, "", setGQLVariables)
-
-const idTicker = ref(0)
-
-const bulkMode = ref(false)
-const bulkHeaders = ref("")
-const bulkEditor = ref<any | null>(null)
-const linewrapEnabled = ref(true)
-
-const deletionToast = ref<{ goAway: (delay: number) => void } | null>(null)
-
-useCodemirror(
-  bulkEditor,
-  bulkHeaders,
-  reactive({
-    extendedEditorConfig: {
-      mode: "text/x-yaml",
-      placeholder: `${t("state.bulk_mode_placeholder")}`,
-      lineWrapping: linewrapEnabled,
-    },
-    linter: null,
-    completer: null,
-    environmentHighlights: false,
-  })
-)
-
-// The functional headers list (the headers actually in the system)
-const headers = useStream(gqlHeaders$, [], setGQLHeaders) as Ref<GQLHeader[]>
-
-const auth = useStream(
-  gqlAuth$,
-  { authType: "none", authActive: true },
-  setGQLAuth
-)
-
-// The UI representation of the headers list (has the empty end header)
-const workingHeaders = ref<Array<GQLHeader & { id: number }>>([
+// v-model integration with props and emit
+const props = withDefaults(
+  defineProps<{
+    modelValue: HoppGQLRequest
+    response?: GQLResponseEvent[] | null
+    tabId: string
+  }>(),
   {
-    id: idTicker.value++,
-    key: "",
-    value: "",
-    active: true,
-  },
-])
-
-// Rule: Working Headers always have one empty header or the last element is always an empty header
-watch(workingHeaders, (headersList) => {
-  if (
-    headersList.length > 0 &&
-    headersList[headersList.length - 1].key !== ""
-  ) {
-    workingHeaders.value.push({
-      id: idTicker.value++,
-      key: "",
-      value: "",
-      active: true,
-    })
+    response: null,
   }
-})
+)
+const emit = defineEmits(["update:modelValue", "update:response"])
+
+const request = ref(props.modelValue)
 
-// Sync logic between headers and working headers
 watch(
-  headers,
-  (newHeadersList) => {
-    // Sync should overwrite working headers
-    const filteredWorkingHeaders = pipe(
-      workingHeaders.value,
-      A.filterMap(
-        flow(
-          O.fromPredicate((e) => e.key !== ""),
-          O.map(objRemoveKey("id"))
-        )
-      )
-    )
-
-    const filteredBulkHeaders = pipe(
-      parseRawKeyValueEntriesE(bulkHeaders.value),
-      E.map(
-        flow(
-          RA.filter((e) => e.key !== ""),
-          RA.toArray
-        )
-      ),
-      E.getOrElse(() => [] as RawKeyValueEntry[])
-    )
-
-    if (!isEqual(newHeadersList, filteredWorkingHeaders)) {
-      workingHeaders.value = pipe(
-        newHeadersList,
-        A.map((x) => ({ id: idTicker.value++, ...x }))
-      )
-    }
-
-    if (!isEqual(newHeadersList, filteredBulkHeaders)) {
-      bulkHeaders.value = rawKeyValueEntriesToString(newHeadersList)
-    }
+  () => request.value,
+  (newVal) => {
+    emit("update:modelValue", newVal)
   },
-  { immediate: true }
+  { deep: true }
 )
 
-watch(workingHeaders, (newWorkingHeaders) => {
-  const fixedHeaders = pipe(
-    newWorkingHeaders,
-    A.filterMap(
-      flow(
-        O.fromPredicate((e) => e.key !== ""),
-        O.map(objRemoveKey("id"))
-      )
-    )
-  )
-
-  if (!isEqual(headers.value, fixedHeaders)) {
-    headers.value = cloneDeep(fixedHeaders)
-  }
-})
-
-// Bulk Editor Syncing with Working Headers
-watch(bulkHeaders, (newBulkHeaders) => {
-  const filteredBulkHeaders = pipe(
-    parseRawKeyValueEntriesE(newBulkHeaders),
-    E.map(
-      flow(
-        RA.filter((e) => e.key !== ""),
-        RA.toArray
-      )
-    ),
-    E.getOrElse(() => [] as RawKeyValueEntry[])
-  )
-
-  if (!isEqual(headers.value, filteredBulkHeaders)) {
-    headers.value = filteredBulkHeaders
-  }
-})
-
-watch(workingHeaders, (newHeadersList) => {
-  // If we are in bulk mode, don't apply direct changes
-  if (bulkMode.value) return
-
-  try {
-    const currentBulkHeaders = bulkHeaders.value.split("\n").map((item) => ({
-      key: item.substring(0, item.indexOf(":")).trimLeft().replace(/^#/, ""),
-      value: item.substring(item.indexOf(":") + 1).trimLeft(),
-      active: !item.trim().startsWith("#"),
-    }))
-
-    const filteredHeaders = newHeadersList.filter((x) => x.key !== "")
-
-    if (!isEqual(currentBulkHeaders, filteredHeaders)) {
-      bulkHeaders.value = rawKeyValueEntriesToString(filteredHeaders)
-    }
-  } catch (e) {
-    toast.error(`${t("error.something_went_wrong")}`)
-    console.error(e)
-  }
-})
-
-const addHeader = () => {
-  workingHeaders.value.push({
-    id: idTicker.value++,
-    key: "",
-    value: "",
-    active: true,
-  })
-}
-
-const updateHeader = (index: number, header: GQLHeader & { id: number }) => {
-  workingHeaders.value = workingHeaders.value.map((h, i) =>
-    i === index ? header : h
-  )
-}
-
-const deleteHeader = (index: number) => {
-  const headersBeforeDeletion = clone(workingHeaders.value)
-
-  if (
-    !(
-      headersBeforeDeletion.length > 0 &&
-      index === headersBeforeDeletion.length - 1
-    )
-  ) {
-    if (deletionToast.value) {
-      deletionToast.value.goAway(0)
-      deletionToast.value = null
-    }
-
-    deletionToast.value = toast.success(`${t("state.deleted")}`, {
-      action: [
-        {
-          text: `${t("action.undo")}`,
-          onClick: (_, toastObject) => {
-            workingHeaders.value = headersBeforeDeletion
-            toastObject.goAway(0)
-            deletionToast.value = null
-          },
-        },
-      ],
-
-      onComplete: () => {
-        deletionToast.value = null
-      },
-    })
-  }
-
-  workingHeaders.value.splice(index, 1)
-}
-
-const clearContent = () => {
-  // set headers list to the initial state
-  workingHeaders.value = [
-    {
-      id: idTicker.value++,
-      key: "",
-      value: "",
-      active: true,
-    },
-  ]
-
-  bulkHeaders.value = ""
-}
+const url = computedWithControl(
+  () => currentActiveTab.value,
+  () => currentActiveTab.value.document.request.url
+)
 
 const activeGQLHeadersCount = computed(
   () =>
-    headers.value.filter((x) => x.active && (x.key !== "" || x.value !== ""))
-      .length
+    request.value.headers.filter(
+      (x) => x.active && (x.key !== "" || x.value !== "")
+    ).length
 )
-
-const variableEditor = ref<any | null>(null)
-const linewrapEnabledVariable = ref(true)
-
-useCodemirror(
-  variableEditor,
-  variableString,
-  reactive({
-    extendedEditorConfig: {
-      mode: "application/ld+json",
-      placeholder: `${t("request.variables")}`,
-      lineWrapping: linewrapEnabledVariable,
-    },
-    linter: computed(() =>
-      variableString.value.length > 0 ? jsonLinter : null
-    ),
-    completer: null,
-    environmentHighlights: false,
-  })
-)
-
-const queryEditor = ref<any | null>(null)
-const schema = useReadonlyStream(props.conn.schema$, null, "noclone")
-const linewrapEnabledQuery = ref(true)
-
-useCodemirror(
-  queryEditor,
-  gqlQueryString,
-  reactive({
-    extendedEditorConfig: {
-      mode: "graphql",
-      placeholder: `${t("request.query")}`,
-      lineWrapping: linewrapEnabledQuery,
-    },
-    linter: createGQLQueryLinter(schema),
-    completer: queryCompleter(schema),
-    environmentHighlights: false,
-  })
-)
-
-const copyQueryIcon = refAutoReset<typeof IconCopy | typeof IconCheck>(
-  IconCopy,
-  1000
-)
-const copyVariablesIcon = refAutoReset<typeof IconCopy | typeof IconCheck>(
-  IconCopy,
-  1000
-)
-const prettifyQueryIcon = refAutoReset<
-  typeof IconWand2 | typeof IconCheck | typeof IconInfo
->(IconWand2, 1000)
-const prettifyVariablesIcon = refAutoReset<
-  typeof IconWand2 | typeof IconCheck | typeof IconInfo
->(IconWand2, 1000)
-
 const showSaveRequestModal = ref(false)
-
-const copyQuery = () => {
-  copyToClipboard(gqlQueryString.value)
-  copyQueryIcon.value = IconCheck
-  toast.success(`${t("state.copied_to_clipboard")}`)
-}
-
-const response = useStream(gqlResponse$, "", setGQLResponse)
-
-const runQuery = async () => {
+const runQuery = async (
+  definition: gql.OperationDefinitionNode | null = null
+) => {
   const startTime = Date.now()
-
   startPageProgress()
-  response.value = "loading"
-
   try {
     const runURL = clone(url.value)
-    const runHeaders = clone(headers.value)
-    const runQuery = clone(gqlQueryString.value)
-    const runVariables = clone(variableString.value)
-    const runAuth = clone(auth.value)
+    const runHeaders = clone(request.value.headers)
+    const runQuery = clone(request.value.query)
+    const runVariables = clone(request.value.variables)
+    const runAuth = clone(request.value.auth)
 
-    const responseText = await props.conn.runQuery(
-      runURL,
-      runHeaders,
-      runQuery,
-      runVariables,
-      runAuth
-    )
+    await runGQLOperation({
+      name: request.value.name,
+      url: runURL,
+      headers: runHeaders,
+      query: runQuery,
+      variables: runVariables,
+      auth: runAuth,
+      operationName: definition?.name?.value,
+      operationType: definition?.operation ?? "query",
+    })
     const duration = Date.now() - startTime
-
     completePageProgress()
-
-    response.value = JSON.stringify(JSON.parse(responseText), null, 2)
-
-    addGraphqlHistoryEntry(
-      makeGQLHistoryEntry({
-        request: makeGQLRequest({
-          name: "",
-          url: runURL,
-          query: runQuery,
-          headers: runHeaders,
-          variables: runVariables,
-          auth: runAuth,
-        }),
-        response: response.value,
-        star: false,
-      })
-    )
-
     toast.success(`${t("state.finished_in", { duration })}`)
   } catch (e: any) {
-    response.value = `${e}`
+    console.log(e)
+    // response.value = [`${e}`]
     completePageProgress()
-
     toast.error(
       `${t("error.something_went_wrong")}. ${t("error.check_console_details")}`,
       {}
     )
     console.error(e)
   }
-
   platform.analytics?.logEvent({
     type: "HOPP_REQUEST_RUN",
     platform: "graphql-query",
-    strategy: getCurrentStrategyID(),
+    strategy: interceptorService.currentInterceptorID.value!,
   })
 }
 
+watch(
+  () => gqlMessageEvent.value,
+  (event) => {
+    if (event === "reset") {
+      emit("update:response", [])
+      return
+    }
+
+    try {
+      if (event?.operationType !== "subscription") {
+        // response.value = [event]
+        emit("update:response", [event])
+      } else {
+        emit("update:response", [...(props.response ?? []), event])
+
+        // TODO: subscription indicator??
+      }
+    } catch (error) {
+      console.log(error)
+    }
+  },
+  { deep: true }
+)
+
 const hideRequestModal = () => {
   showSaveRequestModal.value = false
 }
-
-const prettifyQuery = () => {
-  try {
-    gqlQueryString.value = gql.print(gql.parse(gqlQueryString.value))
-    prettifyQueryIcon.value = IconCheck
-  } catch (e) {
-    toast.error(`${t("error.gql_prettify_invalid_query")}`)
-    prettifyQueryIcon.value = IconInfo
-  }
-}
-
 const saveRequest = () => {
   showSaveRequestModal.value = true
 }
-
-const copyVariables = () => {
-  copyToClipboard(variableString.value)
-  copyVariablesIcon.value = IconCheck
-  toast.success(`${t("state.copied_to_clipboard")}`)
-}
-
-const prettifyVariableString = () => {
-  try {
-    const jsonObj = JSON.parse(variableString.value)
-    variableString.value = JSON.stringify(jsonObj, null, 2)
-    prettifyVariablesIcon.value = IconCheck
-  } catch (e) {
-    console.error(e)
-    prettifyVariablesIcon.value = IconInfo
-    toast.error(`${t("error.json_prettify_invalid_body")}`)
-  }
-}
-
 const clearGQLQuery = () => {
-  gqlQueryString.value = ""
+  request.value.query = ""
 }
-
-const clearGQLVariables = () => {
-  variableString.value = ""
-}
-
 defineActionHandler("request.send-cancel", runQuery)
 defineActionHandler("request.save", saveRequest)
 defineActionHandler("request.reset", clearGQLQuery)

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

@@ -0,0 +1,50 @@
+<template>
+  <AppPaneLayout layout-id="gql-primary">
+    <template #primary>
+      <GraphqlRequestOptions
+        v-model="tab.document.request"
+        v-model:response="tab.response"
+        :tab-id="tab.id"
+      />
+    </template>
+    <template #secondary>
+      <GraphqlResponse :response="tab.response" />
+    </template>
+  </AppPaneLayout>
+</template>
+
+<script setup lang="ts">
+import { useVModel } from "@vueuse/core"
+import { cloneDeep } from "lodash-es"
+import { watch } from "vue"
+import { isEqualHoppGQLRequest } from "~/helpers/graphql"
+import { HoppGQLTab } from "~/helpers/graphql/tab"
+
+// TODO: Move Response and Request execution code to over here
+
+const props = defineProps<{ modelValue: HoppGQLTab }>()
+
+const emit = defineEmits<{
+  (e: "update:modelValue", val: HoppGQLTab): void
+}>()
+
+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) => {
+    // TODO: Check equality of request
+    if (
+      !tab.value.document.isDirty &&
+      !isEqualHoppGQLRequest(oldRequest, updatedValue)
+    ) {
+      tab.value.document.isDirty = true
+    }
+
+    oldRequest = cloneDeep(updatedValue)
+  },
+  { deep: true }
+)
+</script>

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

@@ -1,13 +1,6 @@
 <template>
   <div class="flex flex-col flex-1 overflow-auto whitespace-nowrap">
-    <div
-      v-if="responseString === 'loading'"
-      class="flex flex-col items-center justify-center p-4 text-secondaryLight"
-    >
-      <HoppSmartSpinner class="my-4" />
-      <span class="text-secondaryLight">{{ t("state.loading") }}</span>
-    </div>
-    <div v-else-if="responseString" class="flex flex-col flex-1">
+    <div v-if="response?.length === 1" class="flex flex-col flex-1">
       <div
         class="sticky top-0 z-10 flex items-center justify-between flex-shrink-0 pl-4 overflow-x-auto border-b bg-primary border-dividerLight"
       >
@@ -36,12 +29,18 @@
               'action.copy'
             )} <kbd>${getSpecialKey()}</kbd><kbd>.</kbd>`"
             :icon="copyResponseIcon"
-            @click="copyResponse"
+            @click="copyResponse(response[0].data)"
           />
         </div>
       </div>
       <div ref="schemaEditor" class="flex flex-col flex-1"></div>
     </div>
+    <div
+      v-else-if="response && response?.length > 1"
+      class="flex flex-col flex-1"
+    >
+      <GraphqlSubscriptionLog :log="response" />
+    </div>
     <AppShortcutsPrompt v-else class="p-4" />
   </div>
 </template>
@@ -51,22 +50,34 @@ import IconWrapText from "~icons/lucide/wrap-text"
 import IconDownload from "~icons/lucide/download"
 import IconCheck from "~icons/lucide/check"
 import IconCopy from "~icons/lucide/copy"
-import { reactive, ref } from "vue"
+import { computed, reactive, ref } from "vue"
 import { refAutoReset } from "@vueuse/core"
 import { useCodemirror } from "@composables/codemirror"
 import { copyToClipboard } from "~/helpers/utils/clipboard"
-import { useReadonlyStream } from "@composables/stream"
 import { useI18n } from "@composables/i18n"
 import { useToast } from "@composables/toast"
-import { gqlResponse$ } from "~/newstore/GQLSession"
 import { defineActionHandler } from "~/helpers/actions"
 import { getPlatformSpecialKey as getSpecialKey } from "~/helpers/platformutils"
+import { GQLResponseEvent } from "~/helpers/graphql/connection"
 
 const t = useI18n()
-
 const toast = useToast()
 
-const responseString = useReadonlyStream(gqlResponse$, "")
+const props = withDefaults(
+  defineProps<{
+    response: GQLResponseEvent[] | null
+  }>(),
+  {
+    response: null,
+  }
+)
+
+const responseString = computed(() => {
+  if (props.response?.length === 1) {
+    return JSON.stringify(JSON.parse(props.response[0].data), null, 2)
+  }
+  return ""
+})
 
 const schemaEditor = ref<any | null>(null)
 const linewrapEnabled = ref(true)
@@ -94,14 +105,14 @@ const copyResponseIcon = refAutoReset<typeof IconCopy | typeof IconCheck>(
   1000
 )
 
-const copyResponse = () => {
-  copyToClipboard(responseString.value!)
+const copyResponse = (str: string) => {
+  copyToClipboard(str)
   copyResponseIcon.value = IconCheck
   toast.success(`${t("state.copied_to_clipboard")}`)
 }
 
-const downloadResponse = () => {
-  const dataToWrite = responseString.value
+const downloadResponse = (str: string) => {
+  const dataToWrite = str
   const file = new Blob([dataToWrite!], { type: "application/json" })
   const a = document.createElement("a")
   const url = URL.createObjectURL(file)
@@ -117,6 +128,10 @@ const downloadResponse = () => {
   }, 1000)
 }
 
-defineActionHandler("response.file.download", () => downloadResponse())
-defineActionHandler("response.copy", () => copyResponse())
+defineActionHandler("response.file.download", () =>
+  downloadResponse.bind(responseString.value)
+)
+defineActionHandler("response.copy", () =>
+  copyResponse.bind(responseString.value)
+)
 </script>