chore: removed stated return type

.dockerignore

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

.env.example

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

.github/workflows/tests.yml

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

docker-compose.yml

@@ -19,12 +19,10 @@ services:
       - DATABASE_URL=postgresql://postgres:testpass@hoppscotch-db:5432/hoppscotch?connect_timeout=300
       - PORT=3000
     volumes:
-      # Uncomment the line below when modifying code. Only applicable when using the "dev" target.
-      # - ./packages/hoppscotch-backend/:/usr/src/app
+      - ./packages/hoppscotch-backend/:/usr/src/app
       - /usr/src/app/node_modules/
     depends_on:
-      hoppscotch-db:
-        condition: service_healthy
+      - hoppscotch-db
     ports:
       - "3170:3000"
 
@@ -62,20 +60,12 @@ services:
   # you are using an external postgres instance
   # This will be exposed at port 5432
   hoppscotch-db:
-    image: postgres:15
+    image: postgres
     ports:
       - "5432:5432"
-    user: postgres
     environment:
-      # The default user defined by the docker image
-      POSTGRES_USER: postgres
       # NOTE: Please UPDATE THIS PASSWORD!
       POSTGRES_PASSWORD: testpass
       POSTGRES_DB: hoppscotch
-    healthcheck:
-      test: ["CMD-SHELL", "sh -c 'pg_isready -U $${POSTGRES_USER} -d $${POSTGRES_DB}'"]
-      interval: 5s
-      timeout: 5s
-      retries: 10
 
 

packages/dioc/.gitignore

@@ -1,24 +0,0 @@
-# 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

@@ -1,141 +0,0 @@
-# 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

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

packages/dioc/lib/container.ts

@@ -1,147 +0,0 @@
-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

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

packages/dioc/lib/service.ts

@@ -1,65 +0,0 @@
-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

@@ -1,33 +0,0 @@
-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

@@ -1,34 +0,0 @@
-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

@@ -1,54 +0,0 @@
-{
-  "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

@@ -1,262 +0,0 @@
-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

@@ -1,66 +0,0 @@
-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

@@ -1,92 +0,0 @@
-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

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

packages/dioc/tsconfig.json

@@ -1,21 +0,0 @@
-{
-  "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

@@ -1,16 +0,0 @@
-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

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

packages/dioc/vue.d.ts

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

packages/hoppscotch-backend/package.json

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

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

@@ -411,23 +411,6 @@ 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,7 +11,6 @@ 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,
@@ -417,19 +416,4 @@ 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,18 +19,12 @@ 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 {
-  AuthProvider,
-  authCookieHandler,
-  authProviderCheck,
-  throwHTTPErr,
-} from './helper';
+import { authCookieHandler, 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' })
@@ -45,9 +39,6 @@ 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,7 +11,6 @@ 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: [
@@ -27,9 +26,9 @@ import { AuthProvider, authProviderCheck } from './helper';
     AuthService,
     JwtStrategy,
     RTJwtStrategy,
-    ...(authProviderCheck(AuthProvider.GOOGLE) ? [GoogleStrategy] : []),
-    ...(authProviderCheck(AuthProvider.GITHUB) ? [GithubStrategy] : []),
-    ...(authProviderCheck(AuthProvider.MICROSOFT) ? [MicrosoftStrategy] : []),
+    GoogleStrategy,
+    GithubStrategy,
+    MicrosoftStrategy,
   ],
   controllers: [AuthController],
 })

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

@@ -1,20 +1,8 @@
-import { CanActivate, ExecutionContext, Injectable } from '@nestjs/common';
+import { 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') 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);
-  }
-
+export class GithubSSOGuard extends AuthGuard('github') {
   getAuthenticateOptions(context: ExecutionContext) {
     const req = context.switchToHttp().getRequest();
 

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

@@ -1,20 +1,8 @@
-import { CanActivate, ExecutionContext, Injectable } from '@nestjs/common';
+import { 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') 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);
-  }
-
+export class GoogleSSOGuard extends AuthGuard('google') {
   getAuthenticateOptions(context: ExecutionContext) {
     const req = context.switchToHttp().getRequest();
 

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

@@ -1,26 +1,8 @@
-import { CanActivate, ExecutionContext, Injectable } from '@nestjs/common';
+import { 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')
-  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);
-  }
-
+export class MicrosoftSSOGuard extends AuthGuard('microsoft') {
   getAuthenticateOptions(context: ExecutionContext) {
     const req = context.switchToHttp().getRequest();
 

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

@@ -1,11 +1,10 @@
-import { HttpException, HttpStatus } from '@nestjs/common';
+import { ForbiddenException, 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 { AUTH_PROVIDER_NOT_SPECIFIED, COOKIES_NOT_FOUND } from 'src/errors';
-import { throwErr } from 'src/utils';
+import { COOKIES_NOT_FOUND } from 'src/errors';
 
 enum AuthTokenType {
   ACCESS_TOKEN = 'access_token',
@@ -17,13 +16,6 @@ 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
@@ -105,25 +97,3 @@ 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,30 +22,6 @@ 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,14 +5,11 @@ import * as cookieParser from 'cookie-parser';
 import { VersioningType } from '@nestjs/common';
 import * as session from 'express-session';
 import { emitGQLSchemaFile } from './gql-schema';
-import { checkEnvironmentAuthProvider } from './utils';
 
 async function bootstrap() {
   console.log(`Running in production: ${process.env.PRODUCTION}`);
   console.log(`Port: ${process.env.PORT}`);
 
-  checkEnvironmentAuthProvider();
-
   const app = await NestFactory.create(AppModule);
 
   app.use(

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

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

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,13 +9,7 @@ import * as E from 'fp-ts/Either';
 import * as A from 'fp-ts/Array';
 import { TeamMemberRole } from './team/team.model';
 import { User } from './user/user.model';
-import {
-  ENV_EMPTY_AUTH_PROVIDERS,
-  ENV_NOT_FOUND_KEY_AUTH_PROVIDERS,
-  ENV_NOT_SUPPORT_AUTH_PROVIDERS,
-  JSON_INVALID,
-} from './errors';
-import { AuthProvider } from './auth/helper';
+import { JSON_INVALID } from './errors';
 
 /**
  * A workaround to throw an exception in an expression.
@@ -158,31 +152,3 @@ 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,6 +6,7 @@ module.exports = {
   env: {
     browser: true,
     node: true,
+    jest: true,
   },
   parserOptions: {
     sourceType: "module",

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

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

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

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

packages/hoppscotch-common/locales/en.json

@@ -4,7 +4,6 @@
     "cancel": "Cancel",
     "choose_file": "Choose a file",
     "clear": "Clear",
-    "clear_history": "Clear All History",
     "clear_all": "Clear all",
     "close": "Close",
     "connect": "Connect",
@@ -31,7 +30,6 @@
     "open_workspace": "Open workspace",
     "paste": "Paste",
     "prettify": "Prettify",
-    "rename": "Rename",
     "remove": "Remove",
     "restore": "Restore",
     "save": "Save",
@@ -133,7 +131,6 @@
     "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",
@@ -151,14 +148,8 @@
     "remove_telemetry": "Are you sure you want to opt-out of Telemetry?",
     "request_change": "Are you sure you want to discard current request, unsaved changes will be lost.",
     "save_unsaved_tab": "Do you want to save changes made in this tab?",
-    "close_unsaved_tabs": "Are you sure you want to close all tabs? {count} unsaved tabs will be lost.",
     "sync": "Would you like to restore your workspace from cloud? This will discard your local progress."
   },
-  "context_menu": {
-    "set_environment_variable": "Set as variable",
-    "add_parameter": "Add to parameter",
-    "open_link_in_new_tab": "Open link in new tab"
-  },
   "count": {
     "header": "Header {count}",
     "message": "Message {count}",
@@ -182,7 +173,6 @@
     "folder": "Folder is empty",
     "headers": "This request does not have any headers",
     "history": "History is empty",
-    "history_suggestions": "History does not have any matching entries",
     "invites": "Invite list is empty",
     "members": "Team is empty",
     "parameters": "This request does not have any parameters",
@@ -203,23 +193,16 @@
     "created": "Environment created",
     "deleted": "Environment deletion",
     "edit": "Edit Environment",
-    "global": "Global",
     "invalid_name": "Please provide a name for the environment",
     "my_environments": "My Environments",
-    "name": "Name",
     "nested_overflow": "nested environment variables are limited to 10 levels",
     "new": "New Environment",
     "no_environment": "No environment",
     "no_environment_description": "No environments were selected. Choose what to do with the following variables.",
-    "replace_with_variable": "Replace with variable",
-    "scope": "Scope",
     "select": "Select environment",
-    "set_as_environment": "Set as environment",
     "team_environments": "Team Environments",
     "title": "Environments",
     "updated": "Environment updated",
-    "value": "Value",
-    "variable": "Variable",
     "variable_list": "Variable List"
   },
   "error": {
@@ -435,7 +418,6 @@
     "payload": "Payload",
     "query": "Query",
     "raw_body": "Raw Request Body",
-    "rename": "Rename Request",
     "renamed": "Request renamed",
     "run": "Run",
     "save": "Save",
@@ -600,11 +582,6 @@
     "log": "Log",
     "url": "URL"
   },
-  "spotlight": {
-    "section": {
-      "user": "User"
-    }
-  },
   "sse": {
     "event_type": "Event type",
     "log": "Log",
@@ -662,11 +639,8 @@
   "tab": {
     "authorization": "Authorization",
     "body": "Body",
-    "close": "Close Tab",
-    "close_others": "Close other Tabs",
     "collections": "Collections",
     "documentation": "Documentation",
-    "duplicate": "Duplicate Tab",
     "environments": "Environments",
     "headers": "Headers",
     "history": "History",

packages/hoppscotch-common/locales/tw.json

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

packages/hoppscotch-common/package.json

@@ -1,11 +1,9 @@
 {
   "name": "@hoppscotch/common",
   "private": true,
-  "version": "2023.4.8",
+  "version": "2023.4.7",
   "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 .",
@@ -15,7 +13,6 @@
     "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"
@@ -33,9 +30,6 @@
     "@codemirror/search": "^6.0.0",
     "@codemirror/state": "^6.1.0",
     "@codemirror/view": "^6.0.2",
-    "@fontsource-variable/inter": "^5.0.5",
-    "@fontsource-variable/material-symbols-rounded": "^5.0.5",
-    "@fontsource-variable/roboto-mono": "^5.0.6",
     "@hoppscotch/codemirror-lang-graphql": "workspace:^",
     "@hoppscotch/data": "workspace:^",
     "@hoppscotch/js-sandbox": "workspace:^",
@@ -49,12 +43,11 @@
     "@urql/exchange-auth": "^0.1.7",
     "@urql/exchange-graphcache": "^4.4.3",
     "@vitejs/plugin-legacy": "^2.3.0",
-    "@vueuse/core": "^8.9.4",
+    "@vueuse/core": "^8.7.5",
     "@vueuse/head": "^0.7.9",
     "acorn-walk": "^8.2.0",
     "axios": "^0.21.4",
     "buffer": "^6.0.3",
-    "dioc": "workspace:^",
     "esprima": "^4.0.1",
     "events": "^3.3.0",
     "fp-ts": "^2.12.1",
@@ -70,7 +63,6 @@
     "jsonpath-plus": "^7.0.0",
     "lodash-es": "^4.17.21",
     "lossless-json": "^2.0.8",
-    "minisearch": "^6.1.0",
     "nprogress": "^0.2.0",
     "paho-mqtt": "^1.1.0",
     "path": "^0.12.7",
@@ -92,6 +84,7 @@
     "util": "^0.12.4",
     "uuid": "^8.3.2",
     "vue": "^3.2.25",
+    "vue-github-button": "^3.0.3",
     "vue-i18n": "^9.2.2",
     "vue-pdf-embed": "^1.1.4",
     "vue-router": "^4.0.16",
@@ -113,9 +106,8 @@
     "@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.109",
+    "@iconify-json/lucide": "^1.1.40",
     "@intlify/vite-plugin-vue-i18n": "^7.0.0",
-    "@relmify/jest-fp-ts": "^2.1.1",
     "@rushstack/eslint-patch": "^1.1.4",
     "@types/js-yaml": "^4.0.5",
     "@types/lodash-es": "^4.17.6",
@@ -142,19 +134,18 @@
     "rollup-plugin-polyfill-node": "^0.10.1",
     "sass": "^1.53.0",
     "typescript": "^4.5.4",
-    "unplugin-fonts": "^1.0.3",
     "unplugin-icons": "^0.14.9",
     "unplugin-vue-components": "^0.21.0",
     "vite": "^3.1.4",
     "vite-plugin-checker": "^0.5.1",
+    "vite-plugin-fonts": "^0.6.0",
     "vite-plugin-html-config": "^1.0.10",
     "vite-plugin-inspect": "^0.7.4",
     "vite-plugin-pages": "^0.26.0",
-    "vite-plugin-pages-sitemap": "^1.4.5",
+    "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",
-    "vitest": "^0.32.2",
     "vue-tsc": "^0.38.2",
     "windicss": "^3.5.6"
   }

packages/hoppscotch-common/public/badge.svg

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

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

@@ -1,76 +0,0 @@
-<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>/</kbd>`"
+          )} <kbd>${getSpecialKey()}</kbd><kbd>K</kbd>`"
           :icon="IconZap"
           @click="invokeAction('flyouts.keybinds.toggle')"
         />

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

@@ -0,0 +1,70 @@
+<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,21 +15,16 @@
           :label="t('app.name')"
           to="/"
         />
+        <!-- <AppGitHubStarButton class="mt-1.5 transition" /> -->
       </div>
-      <div class="inline-flex items-center justify-center flex-1 space-x-2">
-        <button
-          class="flex flex-1 items-center justify-between px-2 py-1 bg-primaryDark transition text-secondaryLight cursor-text rounded border border-dividerDark max-w-xs hover:border-dividerDark hover:bg-primaryLight hover:text-secondary focus-visible:border-dividerDark focus-visible:bg-primaryLight focus-visible:text-secondary"
+      <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"
           @click="invokeAction('modals.search.toggle')"
-        >
-          <span class="inline-flex flex-1 items-center">
-            <icon-lucide-search class="mr-2 svg-icons" />
-            {{ t("app.search") }}
-          </span>
-          <span class="flex">
-            <kbd class="shortcut-key">{{ getPlatformSpecialKey() }}</kbd>
-            <kbd class="shortcut-key">K</kbd>
-          </span>
-        </button>
+        />
         <HoppButtonSecondary
           v-if="showInstallButton"
           v-tippy="{ theme: 'tooltip' }"
@@ -47,8 +42,6 @@
           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"
@@ -243,17 +236,17 @@ 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 { defineActionHandler, invokeAction } from "@helpers/actions"
+import { 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"
 
 const t = useI18n()
 
@@ -381,12 +374,4 @@ 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(
-  "user.login",
-  () => {
-    invokeAction("modals.login.toggle")
-  },
-  computed(() => !currentUser.value)
-)
 </script>

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

@@ -0,0 +1,122 @@
+<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

@@ -0,0 +1,68 @@
+<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,26 +4,20 @@
       <div
         class="sticky top-0 z-10 flex flex-col flex-shrink-0 overflow-x-auto bg-primary"
       >
-        <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 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>
       </div>
-      <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" />
-        </HoppSmartPlaceholder>
-
+      <div v-if="filterText" class="flex flex-col divide-y divide-dividerLight">
         <details
-          v-for="(sectionResults, sectionTitle) in shortcutsResults"
-          v-else
-          :key="`section-${sectionTitle}`"
+          v-for="(map, mapIndex) in searchResults"
+          :key="`map-${mapIndex}`"
           class="flex flex-col"
           open
         >
@@ -34,28 +28,63 @@
             <span
               class="font-semibold truncate capitalize-first text-secondaryDark"
             >
-              {{ sectionTitle }}
+              {{ t(map.item.section) }}
             </span>
           </summary>
           <div class="flex flex-col px-6 pb-4 space-y-2">
             <AppShortcutsEntry
-              v-for="(shortcut, index) in sectionResults"
+              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"
+        >
+          <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">
+        <details
+          v-for="(map, mapIndex) in mappings"
+          :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.section) }}
+            </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}`"
+              :shortcut="shortcut"
+            />
+          </div>
+        </details>
       </div>
     </template>
   </HoppSmartSlideOver>
 </template>
 
 <script setup lang="ts">
-import { computed, onBeforeMount, ref } from "vue"
-import { ShortcutDef, getShortcuts } from "~/helpers/shortcuts"
-import MiniSearch from "minisearch"
+import { computed, ref } from "vue"
+import Fuse from "fuse.js"
+import mappings from "~/helpers/shortcuts"
 import { useI18n } from "@composables/i18n"
-import { groupBy, isEmpty } from "lodash-es"
 
 const t = useI18n()
 
@@ -63,33 +92,15 @@ defineProps<{
   show: boolean
 }>()
 
-const minisearch = new MiniSearch({
-  fields: ["label", "keys", "section"],
-  idField: "label",
-  storeFields: ["label", "keys", "section"],
-  searchOptions: {
-    fuzzy: true,
-    prefix: true,
-  },
-})
+const options = {
+  keys: ["shortcuts.label"],
+}
 
-const shortcuts = getShortcuts(t)
-
-onBeforeMount(() => {
-  minisearch.addAllAsync(shortcuts)
-})
+const fuse = new Fuse(mappings, options)
 
 const filterText = ref("")
 
-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 searchResults = computed(() => fuse.search(filterText.value))
 
 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">
-      {{ shortcut.label }}
+      {{ t(shortcut.label) }}
     </span>
     <kbd
       v-for="(key, index) in shortcut.keys"
@@ -14,9 +14,14 @@
 </template>
 
 <script setup lang="ts">
-import { ShortcutDef } from "~/helpers/shortcuts"
+import { useI18n } from "@composables/i18n"
+
+const t = useI18n()
 
 defineProps<{
-  shortcut: ShortcutDef
+  shortcut: {
+    label: string
+    keys: string[]
+  }
 }>()
 </script>

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

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

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

@@ -1,122 +0,0 @@
-<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

@@ -1,30 +0,0 @@
-<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/RESTHistory.vue

@@ -1,43 +0,0 @@
-<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/index.vue

@@ -1,238 +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-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"
-
-const t = useI18n()
-
-const props = defineProps<{
-  show: boolean
-}>()
-
-const emit = defineEmits<{
-  (e: "hide-modal"): void
-}>()
-
-const spotlightService = useService(SpotlightService)
-
-useService(HistorySpotlightSearcherService)
-useService(UserSpotlightSearcherService)
-
-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>

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

@@ -6,13 +6,21 @@
     @close="hideModal"
   >
     <template #body>
-      <HoppSmartInput
-        v-model="name"
-        placeholder=" "
-        :label="t('action.label')"
-        input-styles="floating-input"
-        @submit="addNewCollection"
-      />
+      <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>
     </template>
     <template #footer>
       <span class="flex space-x-2">

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

@@ -6,13 +6,21 @@
     @close="emit('hide-modal')"
   >
     <template #body>
-      <HoppSmartInput
-        v-model="name"
-        placeholder=" "
-        input-styles="floating-input"
-        :label="t('action.label')"
-        @submit="addFolder"
-      />
+      <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>
     </template>
     <template #footer>
       <span class="flex space-x-2">

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

@@ -6,13 +6,19 @@
     @close="$emit('hide-modal')"
   >
     <template #body>
-      <HoppSmartInput
-        v-model="name"
-        placeholder=" "
-        :label="t('action.label')"
-        input-styles="floating-input"
-        @submit="addRequest"
-      />
+      <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>
     </template>
     <template #footer>
       <span class="flex space-x-2">

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

@@ -193,7 +193,7 @@ import IconTrash2 from "~icons/lucide/trash-2"
 import IconEdit from "~icons/lucide/edit"
 import IconFolder from "~icons/lucide/folder"
 import IconFolderOpen from "~icons/lucide/folder-open"
-import { ref, computed, watch } from "vue"
+import { PropType, ref, computed, watch } from "vue"
 import { HoppCollection, HoppRESTRequest } from "@hoppscotch/data"
 import { useI18n } from "@composables/i18n"
 import { TippyComponent } from "vue-tippy"
@@ -209,36 +209,67 @@ type FolderType = "collection" | "folder"
 
 const t = useI18n()
 
-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 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 emit = defineEmits<{
   (event: "toggle-children"): void
@@ -417,13 +448,8 @@ const notSameDestination = computed(() => {
 })
 
 const isCollLoading = computed(() => {
-  const { collectionMoveLoading } = props
-  if (
-    collectionMoveLoading &&
-    collectionMoveLoading.length > 0 &&
-    props.data.id
-  ) {
-    return collectionMoveLoading.includes(props.data.id)
+  if (props.collectionMoveLoading.length > 0 && props.data.id) {
+    return props.collectionMoveLoading.includes(props.data.id)
   } else {
     return false
   }

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

@@ -6,13 +6,21 @@
     @close="hideModal"
   >
     <template #body>
-      <HoppSmartInput
-        v-model="name"
-        placeholder=" "
-        input-styles="floating-input"
-        :label="t('action.label')"
-        @submit="saveCollection"
-      />
+      <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>
     </template>
     <template #footer>
       <span class="flex space-x-2">

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

@@ -6,13 +6,21 @@
     @close="emit('hide-modal')"
   >
     <template #body>
-      <HoppSmartInput
-        v-model="name"
-        placeholder=" "
-        :label="t('action.label')"
-        input-styles="floating-input"
-        @submit="editFolder"
-      />
+      <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>
     </template>
     <template #footer>
       <span class="flex space-x-2">

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

@@ -6,13 +6,21 @@
     @close="hideModal"
   >
     <template #body>
-      <HoppSmartInput
-        v-model="name"
-        placeholder=" "
-        :label="t('action.label')"
-        input-styles="floating-input"
-        @submit="editRequest"
-      />
+      <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>
     </template>
     <template #footer>
       <span class="flex space-x-2">

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

@@ -243,33 +243,49 @@
           />
         </template>
         <template #emptyNode="{ node }">
-          <HoppSmartPlaceholder
+          <div
             v-if="filterText.length !== 0 && filteredCollections.length === 0"
-            :text="`${t('state.nothing_found')} ‟${filterText}”`"
+            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')"
-          >
-            <HoppButtonSecondary
-              :label="t('add.new')"
-              filled
-              outline
-              @click="emit('display-modal-add')"
-            />
-          </HoppSmartPlaceholder>
-          <HoppSmartPlaceholder
+            <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'"
-            :src="`/images/states/${colorMode.value}/pack.svg`"
-            :alt="`${t('empty.collections')}`"
-            :text="t('empty.collections')"
+            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.collection')}`"
+            />
+            <span class="pb-4 text-center">
+              {{ t("empty.collection") }}
+            </span>
             <HoppButtonSecondary
               :label="t('add.new')"
               filled
@@ -282,14 +298,21 @@
                   })
               "
             />
-          </HoppSmartPlaceholder>
-          <HoppSmartPlaceholder
+          </div>
+          <div
             v-else-if="node.data.type === 'folders'"
-            :src="`/images/states/${colorMode.value}/pack.svg`"
-            :alt="`${t('empty.folder')}`"
-            :text="t('empty.folder')"
+            class="flex flex-col items-center justify-center p-4 text-secondaryLight"
           >
-          </HoppSmartPlaceholder>
+            <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>
         </template>
       </SmartTree>
     </div>

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

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

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

@@ -262,53 +262,67 @@
         </template>
         <template #emptyNode="{ node }">
           <div v-if="node === null">
-            <div @drop="(e) => e.stopPropagation()">
-              <HoppSmartPlaceholder
+            <div
+              class="flex flex-col items-center justify-center p-4 text-secondaryLight"
+              @drop="(e) => e.stopPropagation()"
+            >
+              <img
                 :src="`/images/states/${colorMode.value}/pack.svg`"
-                :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>
+                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')"
+              />
             </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()"
           >
-            <HoppSmartPlaceholder
+            <img
               :src="`/images/states/${colorMode.value}/pack.svg`"
-              :alt="`${t('empty.collections')}`"
-              :text="t('empty.collections')"
-            >
-            </HoppSmartPlaceholder>
+              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>
           </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()"
           >
-            <HoppSmartPlaceholder
+            <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')}`"
-              :text="t('empty.folder')"
-            >
-            </HoppSmartPlaceholder>
+            />
+            <span class="text-center">
+              {{ t("empty.folder") }}
+            </span>
           </div>
         </template>
       </SmartTree>

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

@@ -6,13 +6,21 @@
     @close="hideModal"
   >
     <template #body>
-      <HoppSmartInput
-        v-model="name"
-        placeholder=" "
-        input-styles="floating-input"
-        :label="t('action.label')"
-        @submit="addNewCollection"
-      />
+      <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>
     </template>
     <template #footer>
       <span class="flex space-x-2">

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

@@ -6,13 +6,21 @@
     @close="$emit('hide-modal')"
   >
     <template #body>
-      <HoppSmartInput
-        v-model="name"
-        placeholder=" "
-        :label="t('action.label')"
-        input-styles="floating-input"
-        @submit="addFolder"
-      />
+      <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>
     </template>
     <template #footer>
       <span class="flex space-x-2">

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

@@ -6,13 +6,21 @@
     @close="emit('hide-modal')"
   >
     <template #body>
-      <HoppSmartInput
-        v-model="name"
-        placeholder=" "
-        :label="t('action.label')"
-        input-styles="floating-input"
-        @submit="addRequest"
-      />
+      <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>
     </template>
     <template #footer>
       <span class="flex space-x-2">

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

@@ -171,14 +171,21 @@
           @duplicate-request="$emit('duplicate-request', $event)"
           @select="$emit('select', $event)"
         />
-        <HoppSmartPlaceholder
+        <div
           v-if="
             collection.folders.length === 0 && collection.requests.length === 0
           "
-          :src="`/images/states/${colorMode.value}/pack.svg`"
-          :alt="`${t('empty.collection')}`"
-          :text="t('empty.collection')"
+          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.collection')}`"
+          />
+          <span class="pb-4 text-center">
+            {{ t("empty.collection") }}
+          </span>
           <HoppButtonSecondary
             :label="t('add.new')"
             filled
@@ -189,7 +196,7 @@
               })
             "
           />
-        </HoppSmartPlaceholder>
+        </div>
       </div>
     </div>
     <HoppSmartConfirmModal

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

@@ -6,13 +6,21 @@
     @close="hideModal"
   >
     <template #body>
-      <HoppSmartInput
-        v-model="name"
-        placeholder=" "
-        :label="t('action.label')"
-        input-styles="floating-input"
-        @submit="saveCollection"
-      />
+      <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>
     </template>
     <template #footer>
       <span class="flex space-x-2">

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

@@ -6,13 +6,21 @@
     @close="$emit('hide-modal')"
   >
     <template #body>
-      <HoppSmartInput
-        v-model="name"
-        placeholder=" "
-        :label="t('action.label')"
-        input-styles="floating-input"
-        @submit="editFolder"
-      />
+      <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>
     </template>
     <template #footer>
       <span class="flex space-x-2">

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

@@ -6,13 +6,21 @@
     @close="hideModal"
   >
     <template #body>
-      <HoppSmartInput
-        v-model="requestUpdateData.name"
-        placeholder=" "
-        :label="t('action.label')"
-        input-styles="floating-input"
-        @submit="saveRequest"
-      />
+      <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>
     </template>
     <template #footer>
       <span class="flex space-x-2">

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

@@ -160,19 +160,25 @@
           @duplicate-request="emit('duplicate-request', $event)"
           @select="emit('select', $event)"
         />
-
-        <HoppSmartPlaceholder
+        <div
           v-if="
             folder.folders &&
             folder.folders.length === 0 &&
             folder.requests &&
             folder.requests.length === 0
           "
-          :src="`/images/states/${colorMode.value}/pack.svg`"
-          :alt="`${t('empty.folder')}`"
-          :text="t('empty.folder')"
+          class="flex flex-col items-center justify-center p-4 text-secondaryLight"
         >
-        </HoppSmartPlaceholder>
+          <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>
       </div>
     </div>
     <HoppSmartConfirmModal

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 !border-0"
+        class="py-2 pl-4 pr-2 bg-transparent"
       />
       <div
         class="flex justify-between flex-1 flex-shrink-0 border-y bg-primary border-dividerLight"
@@ -60,27 +60,35 @@
         @select="$emit('select', $event)"
       />
     </div>
-    <HoppSmartPlaceholder
+    <div
       v-if="collections.length === 0"
-      :src="`/images/states/${colorMode.value}/pack.svg`"
-      :alt="`${t('empty.collections')}`"
-      :text="t('empty.collections')"
+      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 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)"
       />
-    </HoppSmartPlaceholder>
-    <HoppSmartPlaceholder
+    </div>
+    <div
       v-if="!(filteredCollections.length !== 0 || collections.length === 0)"
-      :text="`${t('state.nothing_found')} ‟${filterText}”`"
+      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>
+      <icon-lucide-search class="pb-2 opacity-75 svg-icons" />
+      <span class="my-2 text-center">
+        {{ t("state.nothing_found") }} "{{ filterText }}"
+      </span>
+    </div>
     <CollectionsGraphqlAdd
       :show="showModalAdd"
       @hide-modal="displayModalAdd(false)"

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

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

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

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

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

@@ -8,7 +8,7 @@
     <span
       v-tippy="{ theme: 'tooltip' }"
       :title="`${t('environment.select')}`"
-      class="bg-transparent select-wrapper"
+      class="bg-transparent border-b border-dividerLight select-wrapper"
     >
       <HoppButtonSecondary
         :icon="IconLayers"
@@ -22,7 +22,6 @@
         class="flex-1 !justify-start pr-8 rounded-none"
       />
     </span>
-
     <template #content="{ hide }">
       <div
         ref="tippyActions"
@@ -32,7 +31,6 @@
         @keyup.escape="hide()"
       >
         <HoppSmartItem
-          v-if="!isScopeSelector"
           :label="`${t('environment.no_environment')}`"
           :info-icon="
             selectedEnvironmentIndex.type === 'NO_ENV_SELECTED'
@@ -49,21 +47,6 @@
             }
           "
         />
-        <HoppSmartItem
-          v-else-if="isScopeSelector && modelValue"
-          :label="t('environment.global')"
-          :icon="IconGlobe"
-          :info-icon="modelValue.type === 'global' ? IconCheck : undefined"
-          :active-info-icon="modelValue.type === 'global'"
-          @click="
-            () => {
-              $emit('update:modelValue', {
-                type: 'global',
-              })
-              hide()
-            }
-          "
-        />
         <HoppSmartTabs
           v-model="selectedEnvTab"
           styles="sticky overflow-x-auto my-2 border border-divider rounded flex-shrink-0 z-10 top-0 bg-primary"
@@ -78,25 +61,29 @@
               :key="`gen-${index}`"
               :icon="IconLayers"
               :label="gen.name"
-              :info-icon="isEnvActive(index) ? IconCheck : undefined"
-              :active-info-icon="isEnvActive(index)"
+              :info-icon="index === selectedEnv.index ? IconCheck : undefined"
+              :active-info-icon="index === selectedEnv.index"
               @click="
                 () => {
-                  handleEnvironmentChange(index, {
-                    type: 'my-environment',
-                    environment: gen,
-                  })
+                  selectedEnvironmentIndex = { type: 'MY_ENV', index: index }
                   hide()
                 }
               "
             />
-            <HoppSmartPlaceholder
+            <div
               v-if="myEnvironments.length === 0"
-              :src="`/images/states/${colorMode.value}/blockchain.svg`"
-              :alt="`${t('empty.environments')}`"
-              :text="t('empty.environments')"
+              class="flex flex-col items-center justify-center text-secondaryLight"
             >
-            </HoppSmartPlaceholder>
+              <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'"
@@ -116,26 +103,36 @@
                 :key="`gen-team-${index}`"
                 :icon="IconLayers"
                 :label="gen.environment.name"
-                :info-icon="isEnvActive(gen.id) ? IconCheck : undefined"
-                :active-info-icon="isEnvActive(gen.id)"
+                :info-icon="
+                  gen.id === selectedEnv.teamEnvID ? IconCheck : undefined
+                "
+                :active-info-icon="gen.id === selectedEnv.teamEnvID"
                 @click="
                   () => {
-                    handleEnvironmentChange(index, {
-                      type: 'team-environment',
-                      environment: gen,
-                    })
+                    selectedEnvironmentIndex = {
+                      type: 'TEAM_ENV',
+                      teamEnvID: gen.id,
+                      teamID: gen.teamID,
+                      environment: gen.environment,
+                    }
                     hide()
                   }
                 "
               />
-
-              <HoppSmartPlaceholder
+              <div
                 v-if="teamEnvironmentList.length === 0"
-                :src="`/images/states/${colorMode.value}/blockchain.svg`"
-                :alt="`${t('empty.environments')}`"
-                :text="t('empty.environments')"
+                class="flex flex-col items-center justify-center text-secondaryLight"
               >
-              </HoppSmartPlaceholder>
+                <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"
@@ -152,10 +149,9 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, onMounted, ref, watch } from "vue"
+import { computed, ref, watch } from "vue"
 import IconCheck from "~icons/lucide/check"
 import IconLayers from "~icons/lucide/layers"
-import IconGlobe from "~icons/lucide/globe"
 import { TippyComponent } from "vue-tippy"
 import { useI18n } from "~/composables/i18n"
 import { GQLError } from "~/helpers/backend/GQLClient"
@@ -173,31 +169,6 @@ import TeamListAdapter from "~/helpers/teams/TeamListAdapter"
 import { useLocalState } from "~/newstore/localstate"
 import { onLoggedIn } from "~/composables/auth"
 import { GetMyTeamsQuery } from "~/helpers/backend/graphql"
-import { TeamEnvironment } from "~/helpers/teams/TeamEnvironment"
-import { Environment } from "@hoppscotch/data"
-
-type Scope =
-  | {
-      type: "global"
-    }
-  | {
-      type: "my-environment"
-      environment: Environment
-      index: number
-    }
-  | {
-      type: "team-environment"
-      environment: TeamEnvironment
-    }
-
-const props = defineProps<{
-  isScopeSelector?: boolean
-  modelValue?: Scope
-}>()
-
-const emit = defineEmits<{
-  (e: "update:modelValue", data: Scope): void
-}>()
 
 const breakpoints = useBreakpoints(breakpointsTailwind)
 const mdAndLarger = breakpoints.greater("md")
@@ -212,39 +183,6 @@ const myEnvironments = useReadonlyStream(environments$, [])
 
 const workspace = useReadonlyStream(workspaceStatus$, { type: "personal" })
 
-// TeamList-Adapter
-const teamListAdapter = new TeamListAdapter(true)
-const myTeams = useReadonlyStream(teamListAdapter.teamList$, null)
-const teamListFetched = ref(false)
-const REMEMBERED_TEAM_ID = useLocalState("REMEMBERED_TEAM_ID")
-
-onLoggedIn(() => {
-  !teamListAdapter.isInitialized && teamListAdapter.initialize()
-})
-
-const switchToTeamWorkspace = (team: GetMyTeamsQuery["myTeams"][number]) => {
-  REMEMBERED_TEAM_ID.value = team.id
-  changeWorkspace({
-    teamID: team.id,
-    teamName: team.name,
-    type: "team",
-  })
-}
-
-watch(
-  () => myTeams.value,
-  (newTeams) => {
-    if (newTeams && !teamListFetched.value) {
-      teamListFetched.value = true
-      if (REMEMBERED_TEAM_ID.value) {
-        const team = newTeams.find((t) => t.id === REMEMBERED_TEAM_ID.value)
-        if (team) switchToTeamWorkspace(team)
-      }
-    }
-  }
-)
-
-// TeamEnv List Adapter
 const teamEnvListAdapter = new TeamEnvironmentAdapter(undefined)
 const teamListLoading = useReadonlyStream(teamEnvListAdapter.loading$, false)
 const teamAdapterError = useReadonlyStream(teamEnvListAdapter.error$, null)
@@ -279,152 +217,63 @@ watch(
   }
 )
 
-const handleEnvironmentChange = (
-  index: number,
-  env?:
-    | {
-        type: "my-environment"
-        environment: Environment
-      }
-    | {
-        type: "team-environment"
-        environment: TeamEnvironment
-      }
-) => {
-  if (props.isScopeSelector && env) {
-    if (env.type === "my-environment") {
-      emit("update:modelValue", {
-        type: "my-environment",
-        environment: env.environment,
-        index,
-      })
-    } else if (env.type === "team-environment") {
-      emit("update:modelValue", {
-        type: "team-environment",
-        environment: env.environment,
-      })
-    }
-  } else {
-    if (env && env.type === "my-environment") {
-      selectedEnvironmentIndex.value = {
-        type: "MY_ENV",
-        index,
-      }
-    } else if (env && env.type === "team-environment") {
-      selectedEnvironmentIndex.value = {
-        type: "TEAM_ENV",
-        teamEnvID: env.environment.id,
-        teamID: env.environment.teamID,
-        environment: env.environment.environment,
-      }
-    }
-  }
+// 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",
+  })
 }
 
-const isEnvActive = (id: string | number) => {
-  if (props.isScopeSelector) {
-    if (props.modelValue?.type === "my-environment") {
-      return props.modelValue.index === id
-    } else if (props.modelValue?.type === "team-environment") {
-      return (
-        props.modelValue?.type === "team-environment" &&
-        props.modelValue.environment &&
-        props.modelValue.environment.id === id
-      )
-    }
-  } else {
-    if (selectedEnvironmentIndex.value.type === "MY_ENV") {
-      return selectedEnv.value.index === id
-    } else {
-      return (
-        selectedEnvironmentIndex.value.type === "TEAM_ENV" &&
-        selectedEnv.value.teamEnvID === id
-      )
+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 (props.isScopeSelector) {
-    if (props.modelValue?.type === "my-environment") {
-      return {
-        type: "MY_ENV",
-        index: props.modelValue.index,
-        name: props.modelValue.environment?.name,
-      }
-    } else if (props.modelValue?.type === "team-environment") {
+  if (selectedEnvironmentIndex.value.type === "MY_ENV") {
+    return {
+      type: "MY_ENV",
+      index: selectedEnvironmentIndex.value.index,
+      name: myEnvironments.value[selectedEnvironmentIndex.value.index].name,
+    }
+  } else if (selectedEnvironmentIndex.value.type === "TEAM_ENV") {
+    const teamEnv = teamEnvironmentList.value.find(
+      (env) =>
+        env.id ===
+        (selectedEnvironmentIndex.value.type === "TEAM_ENV" &&
+          selectedEnvironmentIndex.value.teamEnvID)
+    )
+    if (teamEnv) {
       return {
         type: "TEAM_ENV",
-        name: props.modelValue.environment.environment.name,
-        teamEnvID: props.modelValue.environment.id,
-      }
-    } else {
-      return { type: "global", name: "Global" }
-    }
-  } else {
-    if (selectedEnvironmentIndex.value.type === "MY_ENV") {
-      return {
-        type: "MY_ENV",
-        index: selectedEnvironmentIndex.value.index,
-        name: myEnvironments.value[selectedEnvironmentIndex.value.index].name,
-      }
-    } else if (selectedEnvironmentIndex.value.type === "TEAM_ENV") {
-      const teamEnv = teamEnvironmentList.value.find(
-        (env) =>
-          env.id ===
-          (selectedEnvironmentIndex.value.type === "TEAM_ENV" &&
-            selectedEnvironmentIndex.value.teamEnvID)
-      )
-      if (teamEnv) {
-        return {
-          type: "TEAM_ENV",
-          name: teamEnv.environment.name,
-          teamEnvID: selectedEnvironmentIndex.value.teamEnvID,
-        }
-      } else {
-        return { type: "NO_ENV_SELECTED" }
+        name: teamEnv.environment.name,
+        teamEnvID: selectedEnvironmentIndex.value.teamEnvID,
       }
     } else {
       return { type: "NO_ENV_SELECTED" }
     }
-  }
-})
-
-// Set the selected environment as initial scope value
-onMounted(() => {
-  if (props.isScopeSelector) {
-    if (
-      selectedEnvironmentIndex.value.type === "MY_ENV" &&
-      selectedEnvironmentIndex.value.index !== undefined
-    ) {
-      emit("update:modelValue", {
-        type: "my-environment",
-        environment: myEnvironments.value[selectedEnvironmentIndex.value.index],
-        index: selectedEnvironmentIndex.value.index,
-      })
-    } else if (
-      selectedEnvironmentIndex.value.type === "TEAM_ENV" &&
-      selectedEnvironmentIndex.value.teamEnvID &&
-      teamEnvironmentList.value &&
-      teamEnvironmentList.value.length > 0
-    ) {
-      const teamEnv = teamEnvironmentList.value.find(
-        (env) =>
-          env.id ===
-          (selectedEnvironmentIndex.value.type === "TEAM_ENV" &&
-            selectedEnvironmentIndex.value.teamEnvID)
-      )
-      if (teamEnv) {
-        emit("update:modelValue", {
-          type: "team-environment",
-          environment: teamEnv,
-        })
-      }
-    } else {
-      emit("update:modelValue", {
-        type: "global",
-      })
-    }
+  } else {
+    return { type: "NO_ENV_SELECTED" }
   }
 })
 

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

@@ -26,13 +26,6 @@
       :editing-variable-name="editingVariableName"
       @hide-modal="displayModalEdit(false)"
     />
-    <EnvironmentsAdd
-      :show="showModalNew"
-      :name="editingVariableName"
-      :value="editingVariableValue"
-      :position="position"
-      @hide-modal="displayModalNew(false)"
-    />
   </div>
 </template>
 
@@ -168,18 +161,10 @@ 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"
@@ -248,10 +233,4 @@ 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,15 +7,22 @@
   >
     <template #body>
       <div class="flex flex-col">
-        <HoppSmartInput
-          v-model="name"
-          placeholder=" "
-          :label="t('action.label')"
-          input-styles="floating-input"
-          :disabled="editingEnvironmentIndex === 'Global'"
-          @submit="saveEnvironment"
-        />
-
+        <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>
         <div class="flex items-center justify-between flex-1">
           <label for="variableList" class="p-4">
             {{ t("environment.variable_list") }}
@@ -72,19 +79,26 @@
               />
             </div>
           </div>
-          <HoppSmartPlaceholder
+          <div
             v-if="vars.length === 0"
-            :src="`/images/states/${colorMode.value}/blockchain.svg`"
-            :alt="`${t('empty.environments')}`"
-            :text="t('empty.environments')"
+            class="flex flex-col items-center justify-center p-4 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 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"
             />
-          </HoppSmartPlaceholder>
+          </div>
         </div>
       </div>
     </template>

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

@@ -32,12 +32,19 @@
       :environment="environment"
       @edit-environment="editEnvironment(index)"
     />
-    <HoppSmartPlaceholder
+    <div
       v-if="environments.length === 0"
-      :src="`/images/states/${colorMode.value}/blockchain.svg`"
-      :alt="`${t('empty.environments')}`"
-      :text="t('empty.environments')"
+      class="flex flex-col items-center justify-center p-4 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 my-4"
+        :alt="`${t('empty.environments')}`"
+      />
+      <span class="pb-4 text-center">
+        {{ t("empty.environments") }}
+      </span>
       <HoppButtonSecondary
         :label="`${t('add.new')}`"
         filled
@@ -45,7 +52,7 @@
         class="mb-4"
         @click="displayModalAdd(true)"
       />
-    </HoppSmartPlaceholder>
+    </div>
     <EnvironmentsMyDetails
       :show="showModalDetails"
       :action="action"

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

@@ -7,15 +7,23 @@
   >
     <template #body>
       <div class="flex flex-col px-2">
-        <HoppSmartInput
-          v-model="name"
-          placeholder=" "
-          :input-styles="['floating-input', isViewer && 'opacity-25']"
-          :label="t('action.label')"
-          :disabled="isViewer"
-          @submit="saveEnvironment"
-        />
-
+        <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>
         <div class="flex items-center justify-between flex-1">
           <label for="variableList" class="p-4">
             {{ t("environment.variable_list") }}
@@ -75,12 +83,19 @@
               />
             </div>
           </div>
-          <HoppSmartPlaceholder
+          <div
             v-if="vars.length === 0"
-            :src="`/images/states/${colorMode.value}/blockchain.svg`"
-            :alt="`${t('empty.environments')}`"
-            :text="t('empty.environments')"
+            class="flex flex-col items-center justify-center p-4 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 my-4"
+              :alt="`${t('empty.environments')}`"
+            />
+            <span class="pb-4 text-center">
+              {{ t("empty.environments") }}
+            </span>
             <HoppButtonSecondary
               v-if="isViewer"
               disabled
@@ -95,7 +110,7 @@
               class="mb-4"
               @click="addEnvironmentVariable"
             />
-          </HoppSmartPlaceholder>
+          </div>
         </div>
       </div>
     </template>

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

@@ -43,12 +43,19 @@
         />
       </div>
     </div>
-    <HoppSmartPlaceholder
+    <div
       v-if="!loading && teamEnvironments.length === 0 && !adapterError"
-      :src="`/images/states/${colorMode.value}/blockchain.svg`"
-      :alt="`${t('empty.environments')}`"
-      :text="t('empty.environments')"
+      class="flex flex-col items-center justify-center p-4 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 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' }"
@@ -67,7 +74,7 @@
         class="mb-4"
         @click="displayModalAdd(true)"
       />
-    </HoppSmartPlaceholder>
+    </div>
     <div v-else-if="!loading">
       <EnvironmentsTeamsEnvironment
         v-for="(environment, index) in JSON.parse(

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

@@ -37,14 +37,24 @@
         class="flex flex-col space-y-2"
         @submit.prevent="signInWithEmail"
       >
-        <HoppSmartInput
-          v-model="form.email"
-          type="email"
-          placeholder=" "
-          :label="t('auth.email')"
-          input-styles="floating-input"
-        />
-
+        <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>
         <HoppButtonPrimary
           :loading="signingInWithEmail"
           type="submit"

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,7 +23,6 @@ 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: {
@@ -56,12 +55,8 @@ 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

@@ -114,12 +114,19 @@
         />
       </div>
     </div>
-    <HoppSmartPlaceholder
+    <div
       v-if="authType === 'none'"
-      :src="`/images/states/${colorMode.value}/login.svg`"
-      :alt="`${t('empty.authorization')}`"
-      :text="t('empty.authorization')"
+      class="flex flex-col items-center justify-center p-4 text-secondaryLight"
     >
+      <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')"
@@ -129,7 +136,7 @@
         reverse
         class="mb-4"
       />
-    </HoppSmartPlaceholder>
+    </div>
     <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'">

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

@@ -289,12 +289,19 @@
               </div>
             </template>
           </draggable>
-          <HoppSmartPlaceholder
+          <div
             v-if="workingHeaders.length === 0"
-            :src="`/images/states/${colorMode.value}/add_category.svg`"
-            :alt="`${t('empty.headers')}`"
-            :text="t('empty.headers')"
+            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
@@ -302,7 +309,7 @@
               class="mb-4"
               @click="addHeader"
             />
-          </HoppSmartPlaceholder>
+          </div>
         </div>
       </HoppSmartTab>
       <HoppSmartTab :id="'authorization'" :label="`${t('tab.authorization')}`">

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

@@ -1,13 +1,12 @@
 <template>
   <div class="flex flex-col flex-1 overflow-auto whitespace-nowrap">
-    <HoppSmartPlaceholder
+    <div
       v-if="responseString === 'loading'"
-      :text="t('state.loading')"
+      class="flex flex-col items-center justify-center p-4 text-secondaryLight"
     >
-      <template #icon>
-        <HoppSmartSpinner class="my-4" />
-      </template>
-    </HoppSmartPlaceholder>
+      <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
         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"

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

@@ -24,18 +24,25 @@
       :icon="IconBookOpen"
       :label="`${t('tab.documentation')}`"
     >
-      <HoppSmartPlaceholder
+      <div
         v-if="
           queryFields.length === 0 &&
           mutationFields.length === 0 &&
           subscriptionFields.length === 0 &&
           graphqlTypes.length === 0
         "
-        :src="`/images/states/${colorMode.value}/add_comment.svg`"
-        :alt="`${t('empty.documentation')}`"
-        :text="t('empty.documentation')"
+        class="flex flex-col items-center justify-center p-4 text-secondaryLight"
       >
-      </HoppSmartPlaceholder>
+        <img
+          :src="`/images/states/${colorMode.value}/add_comment.svg`"
+          loading="lazy"
+          class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
+          :alt="`${t('empty.documentation')}`"
+        />
+        <span class="mb-4 text-center">
+          {{ t("empty.documentation") }}
+        </span>
+      </div>
       <div v-else>
         <div
           class="sticky top-0 z-10 flex flex-shrink-0 overflow-x-auto bg-primary"
@@ -165,13 +172,20 @@
         ref="schemaEditor"
         class="flex flex-col flex-1"
       ></div>
-      <HoppSmartPlaceholder
+      <div
         v-else
-        :src="`/images/states/${colorMode.value}/blockchain.svg`"
-        :alt="`${t('empty.schema')}`"
-        :text="t('empty.schema')"
+        class="flex flex-col items-center justify-center p-4 text-secondaryLight"
       >
-      </HoppSmartPlaceholder>
+        <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.schema')}`"
+        />
+        <span class="mb-4 text-center">
+          {{ t("empty.schema") }}
+        </span>
+      </div>
     </HoppSmartTab>
   </HoppSmartTabs>
 </template>

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

@@ -105,27 +105,34 @@
           @toggle-star="toggleStar(entry.entry)"
           @delete-entry="deleteHistory(entry.entry)"
           @use-entry="useHistory(toRaw(entry.entry))"
-          @add-to-collection="addToCollection(entry.entry)"
         />
       </details>
     </div>
-    <HoppSmartPlaceholder
+    <div
       v-if="history.length === 0"
-      :src="`/images/states/${colorMode.value}/history.svg`"
-      :alt="`${t('empty.history')}`"
-      :text="t('empty.history')"
+      class="flex flex-col items-center justify-center p-4 text-secondaryLight"
     >
-    </HoppSmartPlaceholder>
-    <HoppSmartPlaceholder
+      <img
+        :src="`/images/states/${colorMode.value}/history.svg`"
+        loading="lazy"
+        class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
+        :alt="`${t('empty.history')}`"
+      />
+      <span class="mb-4 text-center">
+        {{ t("empty.history") }}
+      </span>
+    </div>
+    <div
       v-else-if="
         Object.keys(filteredHistoryGroups).length === 0 ||
         filteredHistory.length === 0
       "
-      :text="`${t('state.nothing_found')} ‟${filterText || filterSelection}”`"
+      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>
+      <icon-lucide-search class="pb-2 opacity-75 svg-icons" />
+      <span class="mt-2 mb-4 text-center">
+        {{ t("state.nothing_found") }} "{{ filterText || filterSelection }}"
+      </span>
       <HoppButtonSecondary
         :label="t('action.clear')"
         outline
@@ -136,7 +143,7 @@
           }
         "
       />
-    </HoppSmartPlaceholder>
+    </div>
     <HoppSmartConfirmModal
       :show="confirmRemove"
       :title="`${t('confirm.remove_history')}`"
@@ -177,7 +184,6 @@ import {
 import HistoryRestCard from "./rest/Card.vue"
 import HistoryGraphqlCard from "./graphql/Card.vue"
 import { createNewTab } from "~/helpers/rest/tab"
-import { defineActionHandler, invokeAction } from "~/helpers/actions"
 
 type HistoryEntry = GQLHistoryEntry | RESTHistoryEntry
 
@@ -325,22 +331,10 @@ const deleteHistory = (entry: HistoryEntry) => {
   toast.success(`${t("state.deleted")}`)
 }
 
-const addToCollection = (entry: HistoryEntry) => {
-  if (props.page === "rest") {
-    invokeAction("request.save-as", {
-      request: entry.request,
-    })
-  }
-}
-
 const toggleStar = (entry: HistoryEntry) => {
   // History entry type specified because function does not know the type
   if (props.page === "rest")
     toggleRESTHistoryEntryStar(entry as RESTHistoryEntry)
   else toggleGraphqlHistoryEntryStar(entry as GQLHistoryEntry)
 }
-
-defineActionHandler("history.clear", () => {
-  confirmRemove.value = true
-})
 </script>

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

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

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

@@ -113,12 +113,17 @@
         />
       </div>
     </div>
-    <HoppSmartPlaceholder
+    <div
       v-if="auth.authType === 'none'"
-      :src="`/images/states/${colorMode.value}/login.svg`"
-      :alt="`${t('empty.authorization')}`"
-      :text="t('empty.authorization')"
+      class="flex flex-col items-center justify-center p-4 text-secondaryLight"
     >
+      <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')"
@@ -128,7 +133,7 @@
         reverse
         class="mb-4"
       />
-    </HoppSmartPlaceholder>
+    </div>
     <div v-else class="flex flex-1 border-b border-dividerLight">
       <div class="w-2/3 border-r border-dividerLight">
         <div v-if="auth.authType === 'basic'">

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

@@ -102,12 +102,17 @@
       v-model="body"
     />
     <HttpRawBody v-else-if="body.contentType !== null" v-model="body" />
-    <HoppSmartPlaceholder
+    <div
       v-if="body.contentType == null"
-      :src="`/images/states/${colorMode.value}/upload_single_file.svg`"
-      :alt="`${t('empty.body')}`"
-      :text="t('empty.body')"
+      class="flex flex-col items-center justify-center p-4 text-secondaryLight"
     >
+      <img
+        :src="`/images/states/${colorMode.value}/upload_single_file.svg`"
+        loading="lazy"
+        class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
+        :alt="`${t('empty.body')}`"
+      />
+      <span class="pb-4 text-center">{{ t("empty.body") }}</span>
       <HoppButtonSecondary
         outline
         :label="`${t('app.documentation')}`"
@@ -117,7 +122,7 @@
         reverse
         class="mb-4"
       />
-    </HoppSmartPlaceholder>
+    </div>
   </div>
 </template>
 

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

@@ -152,12 +152,17 @@
       </template>
     </draggable>
 
-    <HoppSmartPlaceholder
+    <div
       v-if="workingParams.length === 0"
-      :src="`/images/states/${colorMode.value}/upload_single_file.svg`"
-      :alt="`${t('empty.body')}`"
-      :text="t('empty.body')"
+      class="flex flex-col items-center justify-center p-4 text-secondaryLight"
     >
+      <img
+        :src="`/images/states/${colorMode.value}/upload_single_file.svg`"
+        loading="lazy"
+        class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
+        :alt="`${t('empty.body')}`"
+      />
+      <span class="pb-4 text-center">{{ t("empty.body") }}</span>
       <HoppButtonSecondary
         :label="`${t('add.new')}`"
         filled
@@ -165,7 +170,7 @@
         class="mb-4"
         @click="addBodyParam"
       />
-    </HoppSmartPlaceholder>
+    </div>
   </div>
 </template>
 

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

@@ -56,19 +56,20 @@
                     }
                   "
                 />
-                <HoppSmartPlaceholder
+                <div
                   v-if="
                     !(
                       filteredCodegenDefinitions.length !== 0 ||
                       CodegenDefinitions.length === 0
                     )
                   "
-                  :text="`${t('state.nothing_found')} ‟${searchQuery}”`"
+                  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>
+                  <icon-lucide-search class="pb-2 opacity-75 svg-icons" />
+                  <span class="my-2 text-center">
+                    {{ t("state.nothing_found") }} "{{ searchQuery }}"
+                  </span>
+                </div>
               </div>
             </div>
           </template>

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

@@ -202,12 +202,17 @@
           </div>
         </template>
       </draggable>
-      <HoppSmartPlaceholder
+      <div
         v-if="workingHeaders.length === 0"
-        :src="`/images/states/${colorMode.value}/add_category.svg`"
-        :alt="`${t('empty.headers')}`"
-        :text="t('empty.headers')"
+        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
           filled
           :label="`${t('add.new')}`"
@@ -215,7 +220,7 @@
           class="mb-4"
           @click="addHeader"
         />
-      </HoppSmartPlaceholder>
+      </div>
     </div>
   </div>
 </template>

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

@@ -145,12 +145,18 @@
           </div>
         </template>
       </draggable>
-      <HoppSmartPlaceholder
+
+      <div
         v-if="workingParams.length === 0"
-        :src="`/images/states/${colorMode.value}/add_files.svg`"
-        :alt="`${t('empty.parameters')}`"
-        :text="t('empty.parameters')"
+        class="flex flex-col items-center justify-center p-4 text-secondaryLight"
       >
+        <img
+          :src="`/images/states/${colorMode.value}/add_files.svg`"
+          loading="lazy"
+          class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
+          :alt="`${t('empty.parameters')}`"
+        />
+        <span class="pb-4 text-center">{{ t("empty.parameters") }}</span>
         <HoppButtonSecondary
           :label="`${t('add.new')}`"
           :icon="IconPlus"
@@ -158,7 +164,7 @@
           class="mb-4"
           @click="addParam"
         />
-      </HoppSmartPlaceholder>
+      </div>
     </div>
   </div>
 </template>

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

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="sticky top-0 z-20 flex-none flex-shrink-0 p-4 sm:flex sm:flex-shrink-0 sm:space-x-2 bg-primary"
+    class="sticky top-0 z-20 flex-none flex-shrink-0 p-4 overflow-x-auto sm:flex sm:flex-shrink-0 sm:space-x-2 bg-primary"
   >
     <div
       class="flex flex-1 border rounded min-w-52 border-divider whitespace-nowrap"
@@ -47,14 +47,13 @@
         </label>
       </div>
       <div
-        class="flex flex-1 transition border-l rounded-r border-divider bg-primaryLight whitespace-nowrap"
+        class="flex flex-1 overflow-auto transition border-l rounded-r border-divider bg-primaryLight whitespace-nowrap"
       >
         <SmartEnvInput
           v-model="tab.document.request.endpoint"
           :placeholder="`${t('request.url')}`"
-          :auto-complete-source="userHistories"
+          @enter="newSendRequest()"
           @paste="onPasteUrl($event)"
-          @enter="newSendRequest"
         />
       </div>
     </div>
@@ -221,7 +220,6 @@
       v-if="showSaveRequestModal"
       mode="rest"
       :show="showSaveRequestModal"
-      :request="request"
       @hide-modal="showSaveRequestModal = false"
     />
   </div>
@@ -230,7 +228,7 @@
 <script setup lang="ts">
 import { useI18n } from "@composables/i18n"
 import { useSetting } from "@composables/settings"
-import { useReadonlyStream, useStreamSubscriber } from "@composables/stream"
+import { useStreamSubscriber } from "@composables/stream"
 import { useToast } from "@composables/toast"
 import { refAutoReset, useVModel } from "@vueuse/core"
 import * as E from "fp-ts/Either"
@@ -261,10 +259,8 @@ import IconSave from "~icons/lucide/save"
 import IconShare2 from "~icons/lucide/share-2"
 import { HoppRESTTab } from "~/helpers/rest/tab"
 import { getDefaultRESTRequest } from "~/helpers/rest/default"
-import { RESTHistoryEntry, restHistory$ } from "~/newstore/history"
 import { platform } from "~/platform"
 import { getCurrentStrategyID } from "~/helpers/network"
-import { HoppGQLRequest, HoppRESTRequest } from "@hoppscotch/data"
 
 const t = useI18n()
 
@@ -317,12 +313,6 @@ const clearAll = ref<any | null>(null)
 const copyRequestAction = ref<any | null>(null)
 const saveRequestAction = ref<any | null>(null)
 
-const history = useReadonlyStream<RESTHistoryEntry[]>(restHistory$, [])
-
-const userHistories = computed(() => {
-  return history.value.map((history) => history.request.endpoint).slice(0, 10)
-})
-
 const newSendRequest = async () => {
   if (newEndpoint.value === "" || /^\s+$/.test(newEndpoint.value)) {
     toast.error(`${t("empty.endpoint")}`)
@@ -580,8 +570,6 @@ const saveRequest = () => {
   }
 }
 
-const request = ref<HoppRESTRequest | null>(null)
-
 onBeforeUnmount(() => {
   if (loading.value) cancelRequest()
 })
@@ -597,22 +585,7 @@ defineActionHandler("request.method.prev", cycleUpMethod)
 defineActionHandler("request.save", saveRequest)
 defineActionHandler(
   "request.save-as",
-  (
-    req:
-      | {
-          requestType: "rest"
-          request: HoppRESTRequest
-        }
-      | {
-          requestType: "gql"
-          request: HoppGQLRequest
-        }
-  ) => {
-    showSaveRequestModal.value = true
-    if (req && req.requestType === "rest") {
-      request.value = req.request
-    }
-  }
+  () => (showSaveRequestModal.value = true)
 )
 defineActionHandler("request.method.get", () => updateMethod("GET"))
 defineActionHandler("request.method.post", () => updateMethod("POST"))

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

@@ -11,29 +11,51 @@
         <HoppSmartSpinner class="my-4" />
         <span class="text-secondaryLight">{{ t("state.loading") }}</span>
       </div>
-      <HoppSmartPlaceholder
+      <div
         v-if="response.type === 'network_fail'"
-        :src="`/images/states/${colorMode.value}/youre_lost.svg`"
-        :alt="`${t('error.network_fail')}`"
-        :heading="t('error.network_fail')"
-        :text="t('helpers.network_fail')"
+        class="flex flex-col items-center justify-center flex-1 p-4"
       >
+        <img
+          :src="`/images/states/${colorMode.value}/youre_lost.svg`"
+          loading="lazy"
+          class="inline-flex flex-col object-contain object-center w-32 h-32 my-4"
+          :alt="`${t('error.network_fail')}`"
+        />
+        <span class="mb-2 font-semibold text-center">
+          {{ t("error.network_fail") }}
+        </span>
+        <span
+          class="max-w-sm mb-6 text-center whitespace-normal text-secondaryLight"
+        >
+          {{ t("helpers.network_fail") }}
+        </span>
         <AppInterceptor class="p-2 border rounded border-dividerLight" />
-      </HoppSmartPlaceholder>
-      <HoppSmartPlaceholder
+      </div>
+      <div
         v-if="response.type === 'script_fail'"
-        :src="`/images/states/${colorMode.value}/youre_lost.svg`"
-        :alt="`${t('error.script_fail')}`"
-        :label="t('error.script_fail')"
-        :text="t('helpers.script_fail')"
+        class="flex flex-col items-center justify-center flex-1 p-4"
       >
+        <img
+          :src="`/images/states/${colorMode.value}/youre_lost.svg`"
+          loading="lazy"
+          class="inline-flex flex-col object-contain object-center w-32 h-32 my-4"
+          :alt="`${t('error.script_fail')}`"
+        />
+        <span class="mb-2 font-semibold text-center">
+          {{ t("error.script_fail") }}
+        </span>
+        <span
+          class="max-w-sm mb-6 text-center whitespace-normal text-secondaryLight"
+        >
+          {{ t("helpers.script_fail") }}
+        </span>
         <div
-          class="mt-2 w-full px-4 py-2 overflow-auto font-mono text-red-400 whitespace-normal rounded bg-primaryLight"
+          class="w-full px-4 py-2 overflow-auto font-mono text-red-400 whitespace-normal rounded bg-primaryLight"
         >
           {{ response.error.name }}: {{ response.error.message }}<br />
           {{ response.error.stack }}
         </div>
-      </HoppSmartPlaceholder>
+      </div>
       <div
         v-if="response.type === 'success' || response.type === 'fail'"
         class="flex items-center font-semibold text-tiny"

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

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