feat: changed the subscription ws to graphql-ws

Co-authored-by: Andrew Bastin <andrewbastin.k@gmail.com>
Co-authored-by: Joel Jacob Stephen <70131076+JoelJacobStephen@users.noreply.github.com>
Co-authored-by: nivedin <nivedinp@gmail.com>

packages/codemirror-lang-graphql/package.json

@@ -17,12 +17,12 @@
   "types": "dist/index.d.ts",
   "sideEffects": false,
   "dependencies": {
-    "@codemirror/language": "6.9.0",
-    "@lezer/highlight": "1.1.4",
-    "@lezer/lr": "^1.3.13"
+    "@codemirror/language": "^6.9.0",
+    "@lezer/highlight": "^1.1.6",
+    "@lezer/lr": "^1.3.10"
   },
   "devDependencies": {
-    "@lezer/generator": "^1.5.1",
+    "@lezer/generator": "^1.5.0",
     "mocha": "^9.2.2",
     "rollup": "^3.29.3",
     "rollup-plugin-dts": "^6.0.2",

packages/hoppscotch-backend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hoppscotch-backend",
-  "version": "2023.8.3-1",
+  "version": "2023.8.2",
   "description": "",
   "author": "",
   "private": true,
@@ -46,6 +46,7 @@
     "graphql-query-complexity": "^0.12.0",
     "graphql-redis-subscriptions": "^2.6.0",
     "graphql-subscriptions": "^2.0.0",
+    "graphql-ws": "^5.14.2",
     "handlebars": "^4.7.7",
     "io-ts": "^2.2.16",
     "luxon": "^3.2.1",
@@ -66,7 +67,6 @@
     "@nestjs/schematics": "^10.0.2",
     "@nestjs/testing": "^10.2.6",
     "@relmify/jest-fp-ts": "^2.0.2",
-    "@types/argon2": "^0.15.0",
     "@types/bcrypt": "^5.0.0",
     "@types/cookie": "^0.5.1",
     "@types/cookie-parser": "^1.4.3",

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

@@ -1,4 +1,9 @@
-import { ObjectType } from '@nestjs/graphql';
+import { ObjectType, OmitType } from '@nestjs/graphql';
+import { User } from 'src/user/user.model';
 
 @ObjectType()
-export class Admin {}
+export class Admin extends OmitType(User, [
+  'isAdmin',
+  'currentRESTSession',
+  'currentGQLSession',
+]) {}

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

@@ -10,6 +10,7 @@ import { TeamInvitationModule } from '../team-invitation/team-invitation.module'
 import { TeamEnvironmentsModule } from '../team-environments/team-environments.module';
 import { TeamCollectionModule } from '../team-collection/team-collection.module';
 import { TeamRequestModule } from '../team-request/team-request.module';
+import { InfraResolver } from './infra.resolver';
 
 @Module({
   imports: [
@@ -23,7 +24,7 @@ import { TeamRequestModule } from '../team-request/team-request.module';
     TeamCollectionModule,
     TeamRequestModule,
   ],
-  providers: [AdminResolver, AdminService],
+  providers: [InfraResolver, AdminResolver, AdminService],
   exports: [AdminService],
 })
 export class AdminModule {}

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

@@ -21,15 +21,15 @@ import { InvitedUser } from './invited-user.model';
 import { GqlUser } from '../decorators/gql-user.decorator';
 import { PubSubService } from '../pubsub/pubsub.service';
 import { Team, TeamMember } from '../team/team.model';
-import { User } from '../user/user.model';
-import { TeamInvitation } from '../team-invitation/team-invitation.model';
-import { PaginationArgs } from '../types/input-types.args';
 import {
   AddUserToTeamArgs,
   ChangeUserRoleInTeamArgs,
 } from './input-types.args';
 import { GqlThrottlerGuard } from 'src/guards/gql-throttler.guard';
 import { SkipThrottle } from '@nestjs/throttler';
+import { User } from 'src/user/user.model';
+import { PaginationArgs } from 'src/types/input-types.args';
+import { TeamInvitation } from 'src/team-invitation/team-invitation.model';
 
 @UseGuards(GqlThrottlerGuard)
 @Resolver(() => Admin)
@@ -51,6 +51,7 @@ export class AdminResolver {
 
   @ResolveField(() => [User], {
     description: 'Returns a list of all admin users in infra',
+    deprecationReason: 'Use `infra` query instead',
   })
   @UseGuards(GqlAuthGuard, GqlAdminGuard)
   async admins() {
@@ -59,6 +60,7 @@ export class AdminResolver {
   }
   @ResolveField(() => User, {
     description: 'Returns a user info by UID',
+    deprecationReason: 'Use `infra` query instead',
   })
   @UseGuards(GqlAuthGuard, GqlAdminGuard)
   async userInfo(
@@ -76,6 +78,7 @@ export class AdminResolver {
 
   @ResolveField(() => [User], {
     description: 'Returns a list of all the users in infra',
+    deprecationReason: 'Use `infra` query instead',
   })
   @UseGuards(GqlAuthGuard, GqlAdminGuard)
   async allUsers(
@@ -88,6 +91,7 @@ export class AdminResolver {
 
   @ResolveField(() => [InvitedUser], {
     description: 'Returns a list of all the invited users',
+    deprecationReason: 'Use `infra` query instead',
   })
   async invitedUsers(@Parent() admin: Admin): Promise<InvitedUser[]> {
     const users = await this.adminService.fetchInvitedUsers();
@@ -96,6 +100,7 @@ export class AdminResolver {
 
   @ResolveField(() => [Team], {
     description: 'Returns a list of all the teams in the infra',
+    deprecationReason: 'Use `infra` query instead',
   })
   async allTeams(
     @Parent() admin: Admin,
@@ -106,6 +111,7 @@ export class AdminResolver {
   }
   @ResolveField(() => Team, {
     description: 'Returns a team info by ID when requested by Admin',
+    deprecationReason: 'Use `infra` query instead',
   })
   async teamInfo(
     @Parent() admin: Admin,
@@ -123,6 +129,7 @@ export class AdminResolver {
 
   @ResolveField(() => Number, {
     description: 'Return count of all the members in a team',
+    deprecationReason: 'Use `infra` query instead',
   })
   async membersCountInTeam(
     @Parent() admin: Admin,
@@ -140,6 +147,7 @@ export class AdminResolver {
 
   @ResolveField(() => Number, {
     description: 'Return count of all the stored collections in a team',
+    deprecationReason: 'Use `infra` query instead',
   })
   async collectionCountInTeam(
     @Parent() admin: Admin,
@@ -155,6 +163,7 @@ export class AdminResolver {
   }
   @ResolveField(() => Number, {
     description: 'Return count of all the stored requests in a team',
+    deprecationReason: 'Use `infra` query instead',
   })
   async requestCountInTeam(
     @Parent() admin: Admin,
@@ -171,6 +180,7 @@ export class AdminResolver {
 
   @ResolveField(() => Number, {
     description: 'Return count of all the stored environments in a team',
+    deprecationReason: 'Use `infra` query instead',
   })
   async environmentCountInTeam(
     @Parent() admin: Admin,
@@ -187,6 +197,7 @@ export class AdminResolver {
 
   @ResolveField(() => [TeamInvitation], {
     description: 'Return all the pending invitations in a team',
+    deprecationReason: 'Use `infra` query instead',
   })
   async pendingInvitationCountInTeam(
     @Parent() admin: Admin,
@@ -205,6 +216,7 @@ export class AdminResolver {
 
   @ResolveField(() => Number, {
     description: 'Return total number of Users in organization',
+    deprecationReason: 'Use `infra` query instead',
   })
   async usersCount() {
     return this.adminService.getUsersCount();
@@ -212,6 +224,7 @@ export class AdminResolver {
 
   @ResolveField(() => Number, {
     description: 'Return total number of Teams in organization',
+    deprecationReason: 'Use `infra` query instead',
   })
   async teamsCount() {
     return this.adminService.getTeamsCount();
@@ -219,6 +232,7 @@ export class AdminResolver {
 
   @ResolveField(() => Number, {
     description: 'Return total number of Team Collections in organization',
+    deprecationReason: 'Use `infra` query instead',
   })
   async teamCollectionsCount() {
     return this.adminService.getTeamCollectionsCount();
@@ -226,6 +240,7 @@ export class AdminResolver {
 
   @ResolveField(() => Number, {
     description: 'Return total number of Team Requests in organization',
+    deprecationReason: 'Use `infra` query instead',
   })
   async teamRequestsCount() {
     return this.adminService.getTeamRequestsCount();

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

@@ -74,7 +74,7 @@ export class AdminService {
 
     try {
       await this.mailerService.sendUserInvitationEmail(inviteeEmail, {
-        template: 'user-invitation',
+        template: 'code-your-own',
         variables: {
           inviteeEmail: inviteeEmail,
           magicLink: `${process.env.VITE_BASE_URL}`,

packages/hoppscotch-backend/src/admin/infra.model.ts

@@ -0,0 +1,10 @@
+import { Field, ObjectType } from '@nestjs/graphql';
+import { Admin } from './admin.model';
+
+@ObjectType()
+export class Infra {
+  @Field(() => Admin, {
+    description: 'Admin who executed the action',
+  })
+  executedBy: Admin;
+}

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

@@ -0,0 +1,205 @@
+import { UseGuards } from '@nestjs/common';
+import { Args, ID, Query, ResolveField, Resolver } from '@nestjs/graphql';
+import { GqlThrottlerGuard } from 'src/guards/gql-throttler.guard';
+import { Infra } from './infra.model';
+import { AdminService } from './admin.service';
+import { GqlAuthGuard } from 'src/guards/gql-auth.guard';
+import { GqlAdminGuard } from './guards/gql-admin.guard';
+import { User } from 'src/user/user.model';
+import { AuthUser } from 'src/types/AuthUser';
+import { throwErr } from 'src/utils';
+import * as E from 'fp-ts/Either';
+import { Admin } from './admin.model';
+import { PaginationArgs } from 'src/types/input-types.args';
+import { InvitedUser } from './invited-user.model';
+import { Team } from 'src/team/team.model';
+import { TeamInvitation } from 'src/team-invitation/team-invitation.model';
+import { GqlAdmin } from './decorators/gql-admin.decorator';
+
+@UseGuards(GqlThrottlerGuard)
+@Resolver(() => Infra)
+export class InfraResolver {
+  constructor(private adminService: AdminService) {}
+
+  @Query(() => Infra, {
+    description: 'Fetch details of the Infrastructure',
+  })
+  @UseGuards(GqlAuthGuard, GqlAdminGuard)
+  infra(@GqlAdmin() admin: Admin) {
+    const infra: Infra = { executedBy: admin };
+    return infra;
+  }
+
+  @ResolveField(() => [User], {
+    description: 'Returns a list of all admin users in infra',
+  })
+  @UseGuards(GqlAuthGuard, GqlAdminGuard)
+  async admins() {
+    const admins = await this.adminService.fetchAdmins();
+    return admins;
+  }
+
+  @ResolveField(() => User, {
+    description: 'Returns a user info by UID',
+  })
+  @UseGuards(GqlAuthGuard, GqlAdminGuard)
+  async userInfo(
+    @Args({
+      name: 'userUid',
+      type: () => ID,
+      description: 'The user UID',
+    })
+    userUid: string,
+  ): Promise<AuthUser> {
+    const user = await this.adminService.fetchUserInfo(userUid);
+    if (E.isLeft(user)) throwErr(user.left);
+    return user.right;
+  }
+
+  @ResolveField(() => [User], {
+    description: 'Returns a list of all the users in infra',
+  })
+  @UseGuards(GqlAuthGuard, GqlAdminGuard)
+  async allUsers(@Args() args: PaginationArgs): Promise<AuthUser[]> {
+    const users = await this.adminService.fetchUsers(args.cursor, args.take);
+    return users;
+  }
+
+  @ResolveField(() => [InvitedUser], {
+    description: 'Returns a list of all the invited users',
+  })
+  async invitedUsers(): Promise<InvitedUser[]> {
+    const users = await this.adminService.fetchInvitedUsers();
+    return users;
+  }
+
+  @ResolveField(() => [Team], {
+    description: 'Returns a list of all the teams in the infra',
+  })
+  async allTeams(@Args() args: PaginationArgs): Promise<Team[]> {
+    const teams = await this.adminService.fetchAllTeams(args.cursor, args.take);
+    return teams;
+  }
+
+  @ResolveField(() => Team, {
+    description: 'Returns a team info by ID when requested by Admin',
+  })
+  async teamInfo(
+    @Args({
+      name: 'teamID',
+      type: () => ID,
+      description: 'Team ID for which info to fetch',
+    })
+    teamID: string,
+  ): Promise<Team> {
+    const team = await this.adminService.getTeamInfo(teamID);
+    if (E.isLeft(team)) throwErr(team.left);
+    return team.right;
+  }
+
+  @ResolveField(() => Number, {
+    description: 'Return count of all the members in a team',
+  })
+  async membersCountInTeam(
+    @Args({
+      name: 'teamID',
+      type: () => ID,
+      description: 'Team ID for which team members to fetch',
+      nullable: false,
+    })
+    teamID: string,
+  ): Promise<number> {
+    const teamMembersCount = await this.adminService.membersCountInTeam(teamID);
+    return teamMembersCount;
+  }
+
+  @ResolveField(() => Number, {
+    description: 'Return count of all the stored collections in a team',
+  })
+  async collectionCountInTeam(
+    @Args({
+      name: 'teamID',
+      type: () => ID,
+      description: 'Team ID for which team members to fetch',
+    })
+    teamID: string,
+  ): Promise<number> {
+    const teamCollCount = await this.adminService.collectionCountInTeam(teamID);
+    return teamCollCount;
+  }
+
+  @ResolveField(() => Number, {
+    description: 'Return count of all the stored requests in a team',
+  })
+  async requestCountInTeam(
+    @Args({
+      name: 'teamID',
+      type: () => ID,
+      description: 'Team ID for which team members to fetch',
+    })
+    teamID: string,
+  ): Promise<number> {
+    const teamReqCount = await this.adminService.requestCountInTeam(teamID);
+    return teamReqCount;
+  }
+
+  @ResolveField(() => Number, {
+    description: 'Return count of all the stored environments in a team',
+  })
+  async environmentCountInTeam(
+    @Args({
+      name: 'teamID',
+      type: () => ID,
+      description: 'Team ID for which team members to fetch',
+    })
+    teamID: string,
+  ): Promise<number> {
+    const envsCount = await this.adminService.environmentCountInTeam(teamID);
+    return envsCount;
+  }
+
+  @ResolveField(() => [TeamInvitation], {
+    description: 'Return all the pending invitations in a team',
+  })
+  async pendingInvitationCountInTeam(
+    @Args({
+      name: 'teamID',
+      type: () => ID,
+      description: 'Team ID for which team members to fetch',
+    })
+    teamID: string,
+  ) {
+    const invitations = await this.adminService.pendingInvitationCountInTeam(
+      teamID,
+    );
+    return invitations;
+  }
+
+  @ResolveField(() => Number, {
+    description: 'Return total number of Users in organization',
+  })
+  async usersCount() {
+    return this.adminService.getUsersCount();
+  }
+
+  @ResolveField(() => Number, {
+    description: 'Return total number of Teams in organization',
+  })
+  async teamsCount() {
+    return this.adminService.getTeamsCount();
+  }
+
+  @ResolveField(() => Number, {
+    description: 'Return total number of Team Collections in organization',
+  })
+  async teamCollectionsCount() {
+    return this.adminService.getTeamCollectionsCount();
+  }
+
+  @ResolveField(() => Number, {
+    description: 'Return total number of Team Requests in organization',
+  })
+  async teamRequestsCount() {
+    return this.adminService.getTeamRequestsCount();
+  }
+}

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

@@ -1,4 +1,4 @@
-import { ForbiddenException, HttpException, Module } from '@nestjs/common';
+import { HttpException, Module } from '@nestjs/common';
 import { GraphQLModule } from '@nestjs/graphql';
 import { ApolloDriver, ApolloDriverConfig } from '@nestjs/apollo';
 import { UserModule } from './user/user.module';
@@ -20,28 +20,35 @@ import { ShortcodeModule } from './shortcode/shortcode.module';
 import { COOKIES_NOT_FOUND } from './errors';
 import { ThrottlerModule } from '@nestjs/throttler';
 import { AppController } from './app.controller';
+import { Context } from 'graphql-ws';
+import {
+  ApolloServerPluginLandingPageLocalDefault,
+  ApolloServerPluginLandingPageProductionDefault,
+} from '@apollo/server/plugin/landingPage/default';
 
 @Module({
   imports: [
     GraphQLModule.forRoot<ApolloDriverConfig>({
+      driver: ApolloDriver,
       buildSchemaOptions: {
         numberScalarMode: 'integer',
       },
-      playground: process.env.PRODUCTION !== 'true',
+      playground: false,
+      plugins: [
+        process.env.PRODUCTION !== 'true'
+          ? ApolloServerPluginLandingPageLocalDefault()
+          : ApolloServerPluginLandingPageProductionDefault(),
+      ],
       autoSchemaFile: true,
-      installSubscriptionHandlers: true,
       subscriptions: {
-        'subscriptions-transport-ws': {
+        'graphql-ws': {
           path: '/graphql',
-          onConnect: (_, websocket) => {
+          onConnect: (context: Context<any, any>) => {
             try {
               const cookies = subscriptionContextCookieParser(
-                websocket.upgradeReq.headers.cookie,
+                context.extra.request.headers.cookie,
               );
-
-              return {
-                headers: { ...websocket?.upgradeReq?.headers, cookies },
-              };
+              context['cookies'] = cookies;
             } catch (error) {
               throw new HttpException(COOKIES_NOT_FOUND, 400, {
                 cause: new Error(COOKIES_NOT_FOUND),
@@ -55,7 +62,6 @@ import { AppController } from './app.controller';
         res,
         connection,
       }),
-      driver: ApolloDriver,
     }),
     ThrottlerModule.forRoot([
       {

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

@@ -229,7 +229,7 @@ export class AuthService {
     }
 
     await this.mailerService.sendEmail(email, {
-      template: 'user-invitation',
+      template: 'code-your-own',
       variables: {
         inviteeEmail: email,
         magicLink: `${url}/enter?token=${generatedTokens.token}`,

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

@@ -60,13 +60,13 @@ export const authCookieHandler = (
   res.cookie(AuthTokenType.ACCESS_TOKEN, authTokens.access_token, {
     httpOnly: true,
     secure: true,
-    sameSite: 'lax',
+    sameSite: process.env.PRODUCTION !== 'true' ? 'none' : 'lax',
     maxAge: accessTokenValidity,
   });
   res.cookie(AuthTokenType.REFRESH_TOKEN, authTokens.refresh_token, {
     httpOnly: true,
     secure: true,
-    sameSite: 'lax',
+    sameSite: process.env.PRODUCTION !== 'true' ? 'none' : 'lax',
     maxAge: refreshTokenValidity,
   });
 

packages/hoppscotch-backend/src/gql-schema.ts

@@ -27,6 +27,7 @@ import { UserRequestUserCollectionResolver } from './user-request/resolvers/user
 import { UserEnvsUserResolver } from './user-environment/user.resolver';
 import { UserHistoryUserResolver } from './user-history/user.resolver';
 import { UserSettingsUserResolver } from './user-settings/user.resolver';
+import { InfraResolver } from './admin/infra.resolver';
 
 /**
  * All the resolvers present in the application.
@@ -34,6 +35,7 @@ import { UserSettingsUserResolver } from './user-settings/user.resolver';
  * NOTE: This needs to be KEPT UP-TO-DATE to keep the schema accurate
  */
 const RESOLVERS = [
+  InfraResolver,
   AdminResolver,
   ShortcodeResolver,
   TeamResolver,

packages/hoppscotch-backend/src/mailer/MailDescriptions.ts

@@ -8,7 +8,7 @@ export type MailDescription = {
 };
 
 export type UserMagicLinkMailDescription = {
-  template: 'user-invitation';
+  template: 'code-your-own';
   variables: {
     inviteeEmail: string;
     magicLink: string;
@@ -16,7 +16,7 @@ export type UserMagicLinkMailDescription = {
 };
 
 export type AdminUserInvitationMailDescription = {
-  template: 'user-invitation';
+  template: 'code-your-own';
   variables: {
     inviteeEmail: string;
     magicLink: string;

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

@@ -27,7 +27,7 @@ export class MailerService {
       case 'team-invitation':
         return `${mailDesc.variables.invitee} invited you to join ${mailDesc.variables.invite_team_name} in Hoppscotch`;
 
-      case 'user-invitation':
+      case 'code-your-own':
         return 'Sign in to Hoppscotch';
     }
   }

packages/hoppscotch-backend/src/mailer/templates/team-invitation.hbs

@@ -14,7 +14,7 @@
   -->
     <style type="text/css" rel="stylesheet" media="all">
     /* Base ------------------------------ */
-
+    
     @import url("https://fonts.googleapis.com/css?family=Nunito+Sans:400,700&display=swap");
     body {
       width: 100% !important;
@@ -22,19 +22,19 @@
       margin: 0;
       -webkit-text-size-adjust: none;
     }
-
+    
     a {
       color: #3869D4;
     }
-
+    
     a img {
       border: none;
     }
-
+    
     td {
       word-break: break-word;
     }
-
+    
     .preheader {
       display: none !important;
       visibility: hidden;
@@ -47,13 +47,13 @@
       overflow: hidden;
     }
     /* Type ------------------------------ */
-
+    
     body,
     td,
     th {
       font-family: "Nunito Sans", Helvetica, Arial, sans-serif;
     }
-
+    
     h1 {
       margin-top: 0;
       color: #333333;
@@ -61,7 +61,7 @@
       font-weight: bold;
       text-align: left;
     }
-
+    
     h2 {
       margin-top: 0;
       color: #333333;
@@ -69,7 +69,7 @@
       font-weight: bold;
       text-align: left;
     }
-
+    
     h3 {
       margin-top: 0;
       color: #333333;
@@ -77,12 +77,12 @@
       font-weight: bold;
       text-align: left;
     }
-
+    
     td,
     th {
       font-size: 16px;
     }
-
+    
     p,
     ul,
     ol,
@@ -91,25 +91,25 @@
       font-size: 16px;
       line-height: 1.625;
     }
-
+    
     p.sub {
       font-size: 13px;
     }
     /* Utilities ------------------------------ */
-
+    
     .align-right {
       text-align: right;
     }
-
+    
     .align-left {
       text-align: left;
     }
-
+    
     .align-center {
       text-align: center;
     }
     /* Buttons ------------------------------ */
-
+    
     .button {
       background-color: #3869D4;
       border-top: 10px solid #3869D4;
@@ -124,7 +124,7 @@
       -webkit-text-size-adjust: none;
       box-sizing: border-box;
     }
-
+    
     .button--green {
       background-color: #22BC66;
       border-top: 10px solid #22BC66;
@@ -132,7 +132,7 @@
       border-bottom: 10px solid #22BC66;
       border-left: 18px solid #22BC66;
     }
-
+    
     .button--red {
       background-color: #FF6136;
       border-top: 10px solid #FF6136;
@@ -140,7 +140,7 @@
       border-bottom: 10px solid #FF6136;
       border-left: 18px solid #FF6136;
     }
-
+    
     @media only screen and (max-width: 500px) {
       .button {
         width: 100% !important;
@@ -148,21 +148,21 @@
       }
     }
     /* Attribute list ------------------------------ */
-
+    
     .attributes {
       margin: 0 0 21px;
     }
-
+    
     .attributes_content {
       background-color: #F4F4F7;
       padding: 16px;
     }
-
+    
     .attributes_item {
       padding: 0;
     }
     /* Related Items ------------------------------ */
-
+    
     .related {
       width: 100%;
       margin: 0;
@@ -171,31 +171,31 @@
       -premailer-cellpadding: 0;
       -premailer-cellspacing: 0;
     }
-
+    
     .related_item {
       padding: 10px 0;
       color: #CBCCCF;
       font-size: 15px;
       line-height: 18px;
     }
-
+    
     .related_item-title {
       display: block;
       margin: .5em 0 0;
     }
-
+    
     .related_item-thumb {
       display: block;
       padding-bottom: 10px;
     }
-
+    
     .related_heading {
       border-top: 1px solid #CBCCCF;
       text-align: center;
       padding: 25px 0 10px;
     }
     /* Discount Code ------------------------------ */
-
+    
     .discount {
       width: 100%;
       margin: 0;
@@ -206,33 +206,33 @@
       background-color: #F4F4F7;
       border: 2px dashed #CBCCCF;
     }
-
+    
     .discount_heading {
       text-align: center;
     }
-
+    
     .discount_body {
       text-align: center;
       font-size: 15px;
     }
     /* Social Icons ------------------------------ */
-
+    
     .social {
       width: auto;
     }
-
+    
     .social td {
       padding: 0;
       width: auto;
     }
-
+    
     .social_icon {
       height: 20px;
       margin: 0 8px 10px 8px;
       padding: 0;
     }
     /* Data table ------------------------------ */
-
+    
     .purchase {
       width: 100%;
       margin: 0;
@@ -241,7 +241,7 @@
       -premailer-cellpadding: 0;
       -premailer-cellspacing: 0;
     }
-
+    
     .purchase_content {
       width: 100%;
       margin: 0;
@@ -250,50 +250,50 @@
       -premailer-cellpadding: 0;
       -premailer-cellspacing: 0;
     }
-
+    
     .purchase_item {
       padding: 10px 0;
       color: #51545E;
       font-size: 15px;
       line-height: 18px;
     }
-
+    
     .purchase_heading {
       padding-bottom: 8px;
       border-bottom: 1px solid #EAEAEC;
     }
-
+    
     .purchase_heading p {
       margin: 0;
       color: #85878E;
       font-size: 12px;
     }
-
+    
     .purchase_footer {
       padding-top: 15px;
       border-top: 1px solid #EAEAEC;
     }
-
+    
     .purchase_total {
       margin: 0;
       text-align: right;
       font-weight: bold;
       color: #333333;
     }
-
+    
     .purchase_total--label {
       padding: 0 15px 0 0;
     }
-
+    
     body {
       background-color: #F2F4F6;
       color: #51545E;
     }
-
+    
     p {
       color: #51545E;
     }
-
+    
     .email-wrapper {
       width: 100%;
       margin: 0;
@@ -303,7 +303,7 @@
       -premailer-cellspacing: 0;
       background-color: #F2F4F6;
     }
-
+    
     .email-content {
       width: 100%;
       margin: 0;
@@ -313,16 +313,16 @@
       -premailer-cellspacing: 0;
     }
     /* Masthead ----------------------- */
-
+    
     .email-masthead {
       padding: 25px 0;
       text-align: center;
     }
-
+    
     .email-masthead_logo {
       width: 94px;
     }
-
+    
     .email-masthead_name {
       font-size: 16px;
       font-weight: bold;
@@ -331,7 +331,7 @@
       text-shadow: 0 1px 0 white;
     }
     /* Body ------------------------------ */
-
+    
     .email-body {
       width: 100%;
       margin: 0;
@@ -340,7 +340,7 @@
       -premailer-cellpadding: 0;
       -premailer-cellspacing: 0;
     }
-
+    
     .email-body_inner {
       width: 570px;
       margin: 0 auto;
@@ -350,7 +350,7 @@
       -premailer-cellspacing: 0;
       background-color: #FFFFFF;
     }
-
+    
     .email-footer {
       width: 570px;
       margin: 0 auto;
@@ -360,11 +360,11 @@
       -premailer-cellspacing: 0;
       text-align: center;
     }
-
+    
     .email-footer p {
       color: #A8AAAF;
     }
-
+    
     .body-action {
       width: 100%;
       margin: 30px auto;
@@ -374,25 +374,25 @@
       -premailer-cellspacing: 0;
       text-align: center;
     }
-
+    
     .body-sub {
       margin-top: 25px;
       padding-top: 25px;
       border-top: 1px solid #EAEAEC;
     }
-
+    
     .content-cell {
       padding: 45px;
     }
     /*Media Queries ------------------------------ */
-
+    
     @media only screen and (max-width: 600px) {
       .email-body_inner,
       .email-footer {
         width: 100% !important;
       }
     }
-
+    
     @media (prefers-color-scheme: dark) {
       body,
       .email-body,

packages/hoppscotch-cli/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hoppscotch/cli",
-  "version": "0.3.3",
+  "version": "0.4.0",
   "description": "A CLI to run Hoppscotch test scripts in CI environments.",
   "homepage": "https://hoppscotch.io",
   "main": "dist/index.js",
@@ -10,6 +10,9 @@
   "publishConfig": {
     "access": "public"
   },
+  "engines": {
+    "node": ">=18"
+  },
   "scripts": {
     "build": "pnpm exec tsup",
     "dev": "pnpm exec tsup --watch",
@@ -38,24 +41,24 @@
   "devDependencies": {
     "@hoppscotch/data": "workspace:^",
     "@hoppscotch/js-sandbox": "workspace:^",
-    "@relmify/jest-fp-ts": "^2.0.2",
-    "@swc/core": "^1.2.181",
-    "@types/jest": "^27.4.1",
-    "@types/lodash": "^4.14.181",
-    "@types/qs": "^6.9.7",
+    "@relmify/jest-fp-ts": "^2.1.1",
+    "@swc/core": "^1.3.92",
+    "@types/jest": "^29.5.5",
+    "@types/lodash": "^4.14.199",
+    "@types/qs": "^6.9.8",
     "axios": "^0.21.4",
-    "chalk": "^4.1.1",
-    "commander": "^8.0.0",
+    "chalk": "^4.1.2",
+    "commander": "^11.0.0",
     "esm": "^3.2.25",
-    "fp-ts": "^2.12.1",
-    "io-ts": "^2.2.16",
-    "jest": "^27.5.1",
+    "fp-ts": "^2.16.1",
+    "io-ts": "^2.2.20",
+    "jest": "^29.7.0",
     "lodash": "^4.17.21",
-    "prettier": "^2.8.4",
-    "qs": "^6.10.3",
-    "ts-jest": "^27.1.4",
-    "tsup": "^5.12.7",
-    "typescript": "^4.6.4",
-    "zod": "^3.22.2"
+    "prettier": "^3.0.3",
+    "qs": "^6.11.2",
+    "ts-jest": "^29.1.1",
+    "tsup": "^7.2.0",
+    "typescript": "^5.2.2",
+    "zod": "^3.22.4"
   }
 }

packages/hoppscotch-common/.prettierrc.js

@@ -4,5 +4,6 @@ module.exports = {
   singleQuote: false,
   printWidth: 80,
   useTabs: false,
-  tabWidth: 2
+  tabWidth: 2,
+  plugins: ["prettier-plugin-tailwindcss"],
 }

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

@@ -1,7 +1,25 @@
+/*
+* Write hoppscotch-common related custom styles in this file.
+* If styles are sharable across all package then write into hoppscotch-ui/assets/scss/styles.scss file.
+*/
+
 * {
-  @apply backface-hidden;
-  @apply before:backface-hidden;
-  @apply after:backface-hidden;
+  backface-visibility: hidden;
+  -moz-backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+
+  &::before {
+    backface-visibility: hidden;
+    -moz-backface-visibility: hidden;
+    -webkit-backface-visibility: hidden;
+  }
+
+  &::after {
+    backface-visibility: hidden;
+    -moz-backface-visibility: hidden;
+    -webkit-backface-visibility: hidden;
+  }
+
   @apply selection:bg-accentDark;
   @apply selection:text-accentContrast;
   @apply overscroll-none;
@@ -11,17 +29,25 @@
   @apply antialiased;
   accent-color: var(--accent-color);
   font-variant-ligatures: common-ligatures;
+
+  // Colors
+  --info-color: #ec4899;
+  --success-color: #10b981;
+  --blue-color: #3b82f6;
+  --warning-color: #f59e0b;
+  --cl-error-color: #ef4444;
+  --sv-error-color: #dc2626;
 }
 
 ::-webkit-scrollbar-track {
   @apply bg-transparent;
-  @apply border-solid border-l border-dividerLight border-t-0 border-b-0 border-r-0;
+  @apply border-b-0 border-l border-r-0 border-t-0 border-solid border-dividerLight;
 }
 
 ::-webkit-scrollbar-thumb {
   @apply bg-divider bg-clip-content;
   @apply rounded-full;
-  @apply border-solid border-transparent border-4;
+  @apply border-4 border-solid border-transparent;
   @apply hover:bg-dividerDark;
   @apply hover:bg-clip-content;
 }
@@ -54,7 +80,7 @@ html {
 
 body {
   @apply bg-primary;
-  @apply text-secondary text-body;
+  @apply text-body text-secondary;
   @apply font-medium;
   @apply select-none;
   @apply overflow-x-hidden;
@@ -124,8 +150,8 @@ a {
 
   &.link {
     @apply items-center;
-    @apply py-0.5 px-1;
-    @apply -my-0.5 -mx-1;
+    @apply px-1 py-0.5;
+    @apply -mx-1 -my-0.5;
     @apply text-accent;
     @apply rounded;
     @apply hover:text-accentDark;
@@ -140,7 +166,7 @@ a {
     @apply shadow-none #{!important};
     @apply fixed;
     @apply inline-flex;
-    @apply -mt-7.5;
+    @apply -mt-8;
   }
 }
 
@@ -154,7 +180,7 @@ a {
     @apply flex;
     @apply text-tiny text-primary;
     @apply font-semibold;
-    @apply py-1 px-2;
+    @apply px-2 py-1;
     @apply truncate;
     @apply leading-normal;
     @apply items-center;
@@ -162,7 +188,7 @@ a {
     kbd {
       @apply hidden;
       @apply font-sans;
-      @apply bg-gray-500/45;
+      background-color: rgba(107, 114, 128, 0.45);
       @apply text-primaryLight;
       @apply rounded-sm;
       @apply px-1;
@@ -170,6 +196,12 @@ a {
       @apply truncate;
       @apply sm:inline-flex;
     }
+
+    .env-icon {
+      @apply transition;
+      @apply inline-flex;
+      @apply items-center;
+    }
   }
 
   .tippy-svg-arrow {
@@ -195,7 +227,7 @@ a {
     @apply max-h-[45vh];
     @apply items-stretch;
     @apply overflow-y-auto;
-    @apply text-secondary text-body;
+    @apply text-body text-secondary;
     @apply p-2;
     @apply leading-normal;
     @apply focus:outline-none;
@@ -234,7 +266,7 @@ hr {
 
 .heading {
   @apply font-bold;
-  @apply text-secondaryDark text-lg;
+  @apply text-lg text-secondaryDark;
   @apply tracking-tight;
 }
 
@@ -243,7 +275,7 @@ hr {
 .textarea {
   @apply flex;
   @apply w-full;
-  @apply py-2 px-4;
+  @apply px-4 py-2;
   @apply bg-transparent;
   @apply rounded;
   @apply text-secondaryDark;
@@ -284,7 +316,7 @@ button {
   @apply transform;
   @apply origin-top-left;
   @apply scale-75;
-  @apply translate-x-1 -translate-y-4;
+  @apply -translate-y-4 translate-x-1;
 }
 
 .floating-input:focus-within ~ label {
@@ -293,7 +325,7 @@ button {
 
 .floating-input ~ .end-actions {
   @apply absolute;
-  @apply right-0.2;
+  @apply right-[.05rem];
   @apply inset-y-0;
   @apply flex;
   @apply items-center;
@@ -335,23 +367,23 @@ pre.ace_editor {
 }
 
 .info-response {
-  @apply text-pink-500;
+  color: var(--info-color);
 }
 
 .success-response {
-  @apply text-green-500;
+  color: var(--success-color);
 }
 
 .redir-response {
-  @apply text-yellow-500;
+  color: var(--warning-color);
 }
 
 .cl-error-response {
-  @apply text-red-500;
+  color: var(--cl-error-color);
 }
 
 .sv-error-response {
-  @apply text-red-600;
+  color: var(--sv-error-color);
 }
 
 .missing-data-response {
@@ -366,7 +398,7 @@ pre.ace_editor {
       @apply px-4 py-2;
       @apply bg-tooltip;
       @apply border-secondaryDark;
-      @apply text-primary text-body;
+      @apply text-body text-primary;
       @apply justify-between;
       @apply shadow-lg;
       @apply font-semibold;
@@ -394,7 +426,7 @@ pre.ace_editor {
         @apply before:opacity-10;
         @apply before:inset-0;
         @apply before:transition;
-        @apply before:content-DEFAULT;
+        @apply before:content-[''];
         @apply hover:no-underline;
         @apply hover:before:opacity-20;
       }
@@ -428,7 +460,7 @@ pre.ace_editor {
   @apply before:opacity-0;
   @apply before:z-20;
   @apply before:transition;
-  @apply before:content-DEFAULT;
+  @apply before:content-[''];
   @apply hover:before:opacity-100;
 }
 
@@ -501,22 +533,6 @@ pre.ace_editor {
   }
 }
 
-.cm-panel.cm-search [name="close"] {
-  @apply flex;
-  @apply items-center;
-  @apply justify-center;
-  @apply min-h-5;
-  @apply min-w-5;
-  @apply bg-primaryDark #{!important};
-  @apply sticky #{!important};
-  @apply right-0 #{!important};
-  @apply ml-auto #{!important};
-  @apply my-auto #{!important};
-  @apply rounded #{!important};
-  @apply outline #{!important};
-  @apply outline-divider #{!important};
-}
-
 .shortcut-key {
   @apply inline-flex;
   @apply font-sans;

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

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

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

@@ -1,274 +0,0 @@
-@mixin base-theme {
-  --font-sans: "Inter Variable", sans-serif;
-  --font-icon: "Material Symbols Rounded Variable";
-  --font-mono: "Roboto Mono Variable", monospace;
-  --font-size-body: 0.75rem;
-  --font-size-tiny: 0.688rem;
-  --line-height-body: 1rem;
-  --upper-primary-sticky-fold: 4.125rem;
-  --upper-secondary-sticky-fold: 6.188rem;
-  --upper-tertiary-sticky-fold: 8.25rem;
-  --upper-fourth-sticky-fold: 10.2rem;
-  --upper-mobile-primary-sticky-fold: 6.625rem;
-  --upper-mobile-secondary-sticky-fold: 8.688rem;
-  --upper-mobile-sticky-fold: 10.75rem;
-  --upper-mobile-tertiary-sticky-fold: 8.25rem;
-  --lower-primary-sticky-fold: 3rem;
-  --lower-secondary-sticky-fold: 5.063rem;
-  --lower-tertiary-sticky-fold: 7.125rem;
-  --lower-fourth-sticky-fold: 9.188rem;
-  --sidebar-primary-sticky-fold: 2rem;
-}
-
-@mixin dark-theme {
-  --primary-color: theme("colors.dark.800");
-  --primary-light-color: theme("colors.dark.600");
-  --primary-dark-color: theme("colors.neutral.800");
-  --primary-contrast-color: theme("colors.neutral.900");
-
-  --secondary-color: theme("colors.neutral.400");
-  --secondary-light-color: theme("colors.neutral.500");
-  --secondary-dark-color: theme("colors.neutral.50");
-
-  --divider-color: theme("colors.neutral.800");
-  --divider-light-color: theme("colors.dark.500");
-  --divider-dark-color: theme("colors.dark.300");
-
-  --error-color: theme("colors.stone.800");
-  --tooltip-color: theme("colors.neutral.100");
-  --popover-color: theme("colors.dark.700");
-  --editor-theme: "merbivore_soft";
-}
-
-@mixin light-theme {
-  --primary-color: theme("colors.white");
-  --primary-light-color: theme("colors.gray.50");
-  --primary-dark-color: theme("colors.gray.100");
-  --primary-contrast-color: theme("colors.light.50");
-
-  --secondary-color: theme("colors.gray.500");
-  --secondary-light-color: theme("colors.gray.400");
-  --secondary-dark-color: theme("colors.gray.900");
-
-  --divider-color: theme("colors.gray.100");
-  --divider-light-color: theme("colors.gray.100");
-  --divider-dark-color: theme("colors.gray.300");
-
-  --error-color: theme("colors.yellow.100");
-  --tooltip-color: theme("colors.neutral.800");
-  --popover-color: theme("colors.white");
-  --editor-theme: "textmate";
-}
-
-@mixin black-theme {
-  --primary-color: theme("colors.dark.900");
-  --primary-light-color: theme("colors.neutral.900");
-  --primary-dark-color: theme("colors.dark.800");
-  --primary-contrast-color: theme("colors.dark.900");
-
-  --secondary-color: theme("colors.neutral.400");
-  --secondary-light-color: theme("colors.neutral.500");
-  --secondary-dark-color: theme("colors.neutral.100");
-
-  --divider-color: theme("colors.dark.600");
-  --divider-light-color: theme("colors.dark.800");
-  --divider-dark-color: theme("colors.dark.200");
-
-  --error-color: theme("colors.stone.900");
-  --tooltip-color: theme("colors.neutral.100");
-  --popover-color: theme("colors.dark.900");
-  --editor-theme: "twilight";
-}
-
-@mixin dark-editor-theme {
-  --editor-type-color: theme("colors.purple.400");
-  --editor-name-color: theme("colors.blue.400");
-  --editor-operator-color: theme("colors.indigo.400");
-  --editor-invalid-color: theme("colors.red.400");
-  --editor-separator-color: theme("colors.gray.400");
-  --editor-meta-color: theme("colors.gray.400");
-  --editor-variable-color: theme("colors.green.400");
-  --editor-link-color: theme("colors.cyan.400");
-  --editor-process-color: theme("colors.fuchsia.400");
-  --editor-constant-color: theme("colors.violet.400");
-  --editor-keyword-color: theme("colors.pink.400");
-}
-
-@mixin light-editor-theme {
-  --editor-type-color: theme("colors.purple.600");
-  --editor-name-color: theme("colors.red.600");
-  --editor-operator-color: theme("colors.indigo.600");
-  --editor-invalid-color: theme("colors.red.600");
-  --editor-separator-color: theme("colors.gray.600");
-  --editor-meta-color: theme("colors.gray.600");
-  --editor-variable-color: theme("colors.green.600");
-  --editor-link-color: theme("colors.cyan.600");
-  --editor-process-color: theme("colors.blue.600");
-  --editor-constant-color: theme("colors.fuchsia.600");
-  --editor-keyword-color: theme("colors.pink.600");
-}
-
-@mixin black-editor-theme {
-  --editor-type-color: theme("colors.purple.400");
-  --editor-name-color: theme("colors.fuchsia.400");
-  --editor-operator-color: theme("colors.indigo.400");
-  --editor-invalid-color: theme("colors.red.400");
-  --editor-separator-color: theme("colors.gray.400");
-  --editor-meta-color: theme("colors.gray.400");
-  --editor-variable-color: theme("colors.green.400");
-  --editor-link-color: theme("colors.cyan.400");
-  --editor-process-color: theme("colors.violet.400");
-  --editor-constant-color: theme("colors.blue.400");
-  --editor-keyword-color: theme("colors.pink.400");
-}
-
-@mixin green-theme {
-  --accent-color: theme("colors.green.500");
-  --accent-light-color: theme("colors.green.400");
-  --accent-dark-color: theme("colors.green.600");
-  --accent-contrast-color: theme("colors.white");
-  --gradient-from-color: theme("colors.green.200");
-  --gradient-via-color: theme("colors.green.400");
-  --gradient-to-color: theme("colors.green.600");
-}
-
-@mixin teal-theme {
-  --accent-color: theme("colors.teal.500");
-  --accent-light-color: theme("colors.teal.400");
-  --accent-dark-color: theme("colors.teal.600");
-  --accent-contrast-color: theme("colors.white");
-  --gradient-from-color: theme("colors.teal.200");
-  --gradient-via-color: theme("colors.teal.400");
-  --gradient-to-color: theme("colors.teal.600");
-}
-
-@mixin blue-theme {
-  --accent-color: theme("colors.blue.500");
-  --accent-light-color: theme("colors.blue.400");
-  --accent-dark-color: theme("colors.blue.600");
-  --accent-contrast-color: theme("colors.white");
-  --gradient-from-color: theme("colors.blue.200");
-  --gradient-via-color: theme("colors.blue.400");
-  --gradient-to-color: theme("colors.blue.600");
-}
-
-@mixin indigo-theme {
-  --accent-color: theme("colors.indigo.500");
-  --accent-light-color: theme("colors.indigo.400");
-  --accent-dark-color: theme("colors.indigo.600");
-  --accent-contrast-color: theme("colors.white");
-  --gradient-from-color: theme("colors.indigo.200");
-  --gradient-via-color: theme("colors.indigo.400");
-  --gradient-to-color: theme("colors.indigo.600");
-}
-
-@mixin purple-theme {
-  --accent-color: theme("colors.purple.500");
-  --accent-light-color: theme("colors.purple.400");
-  --accent-dark-color: theme("colors.purple.600");
-  --accent-contrast-color: theme("colors.white");
-  --gradient-from-color: theme("colors.purple.200");
-  --gradient-via-color: theme("colors.purple.400");
-  --gradient-to-color: theme("colors.purple.600");
-}
-
-@mixin yellow-theme {
-  --accent-color: theme("colors.yellow.500");
-  --accent-light-color: theme("colors.yellow.400");
-  --accent-dark-color: theme("colors.yellow.600");
-  --accent-contrast-color: theme("colors.white");
-  --gradient-from-color: theme("colors.yellow.200");
-  --gradient-via-color: theme("colors.yellow.400");
-  --gradient-to-color: theme("colors.yellow.600");
-}
-
-@mixin orange-theme {
-  --accent-color: theme("colors.orange.500");
-  --accent-light-color: theme("colors.orange.400");
-  --accent-dark-color: theme("colors.orange.600");
-  --accent-contrast-color: theme("colors.white");
-  --gradient-from-color: theme("colors.orange.200");
-  --gradient-via-color: theme("colors.orange.400");
-  --gradient-to-color: theme("colors.orange.600");
-}
-
-@mixin red-theme {
-  --accent-color: theme("colors.red.500");
-  --accent-light-color: theme("colors.red.400");
-  --accent-dark-color: theme("colors.red.600");
-  --accent-contrast-color: theme("colors.white");
-  --gradient-from-color: theme("colors.red.200");
-  --gradient-via-color: theme("colors.red.400");
-  --gradient-to-color: theme("colors.red.600");
-}
-
-@mixin pink-theme {
-  --accent-color: theme("colors.pink.500");
-  --accent-light-color: theme("colors.pink.400");
-  --accent-dark-color: theme("colors.pink.600");
-  --accent-contrast-color: theme("colors.white");
-  --gradient-from-color: theme("colors.pink.200");
-  --gradient-via-color: theme("colors.pink.400");
-  --gradient-to-color: theme("colors.pink.600");
-}
-
-:root {
-  @include base-theme;
-  @include dark-theme;
-  @include dark-editor-theme;
-  @include green-theme;
-}
-
-:root.light {
-  @include light-theme;
-  @include light-editor-theme;
-  color-scheme: light;
-}
-
-:root.dark {
-  @include dark-theme;
-  @include dark-editor-theme;
-  color-scheme: dark;
-}
-
-:root.black {
-  @include black-theme;
-  @include black-editor-theme;
-  color-scheme: dark;
-}
-
-:root[data-accent="blue"] {
-  @include blue-theme;
-}
-
-:root[data-accent="green"] {
-  @include green-theme;
-}
-
-:root[data-accent="teal"] {
-  @include teal-theme;
-}
-
-:root[data-accent="indigo"] {
-  @include indigo-theme;
-}
-
-:root[data-accent="purple"] {
-  @include purple-theme;
-}
-
-:root[data-accent="orange"] {
-  @include orange-theme;
-}
-
-:root[data-accent="pink"] {
-  @include pink-theme;
-}
-
-:root[data-accent="red"] {
-  @include red-theme;
-}
-
-:root[data-accent="yellow"] {
-  @include yellow-theme;
-}

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

@@ -0,0 +1,89 @@
+@mixin green-theme {
+  --accent-color: #10b981;
+  --accent-light-color: #34d399;
+  --accent-dark-color: #059669;
+  --accent-contrast-color: #fff;
+  --gradient-from-color: #a7f3d0;
+  --gradient-via-color: #34d399;
+  --gradient-to-color: #059669;
+}
+
+@mixin teal-theme {
+  --accent-color: #14b8a6;
+  --accent-light-color: #2dd4bf;
+  --accent-dark-color: #0d9488;
+  --accent-contrast-color: #fff;
+  --gradient-from-color: #99f6e4;
+  --gradient-via-color: #2dd4bf;
+  --gradient-to-color: #0d9488;
+}
+
+@mixin blue-theme {
+  --accent-color: #3b82f6;
+  --accent-light-color: #60a5fa;
+  --accent-dark-color: #2563eb;
+  --accent-contrast-color: #fff;
+  --gradient-from-color: #bfdbfe;
+  --gradient-via-color: #60a5fa;
+  --gradient-to-color: #2563eb;
+}
+
+@mixin indigo-theme {
+  --accent-color: #6366f1;
+  --accent-light-color: #818cf8;
+  --accent-dark-color: #4f46e5;
+  --accent-contrast-color: #fff;
+  --gradient-from-color: #c7d2fe;
+  --gradient-via-color: #818cf8;
+  --gradient-to-color: #4f46e5;
+}
+
+@mixin purple-theme {
+  --accent-color: #8b5cf6;
+  --accent-light-color: #a78bfa;
+  --accent-dark-color: #7c3aed;
+  --accent-contrast-color: #fff;
+  --gradient-from-color: #ddd6fe;
+  --gradient-via-color: #a78bfa;
+  --gradient-to-color: #7c3aed;
+}
+
+@mixin yellow-theme {
+  --accent-color: #f59e0b;
+  --accent-light-color: #fbbf24;
+  --accent-dark-color: #d97706;
+  --accent-contrast-color: #fff;
+  --gradient-from-color: #fde68a;
+  --gradient-via-color: #fbbf24;
+  --gradient-to-color: #d97706;
+}
+
+@mixin orange-theme {
+  --accent-color: #f97316;
+  --accent-light-color: #fb923c;
+  --accent-dark-color: #ea580c;
+  --accent-contrast-color: #fff;
+  --gradient-from-color: #fed7aa;
+  --gradient-via-color: #fb923c;
+  --gradient-to-color: #ea580c;
+}
+
+@mixin red-theme {
+  --accent-color: #ef4444;
+  --accent-light-color: #f87171;
+  --accent-dark-color: #dc2626;
+  --accent-contrast-color: #fff;
+  --gradient-from-color: #fecaca;
+  --gradient-via-color: #f87171;
+  --gradient-to-color: #dc2626;
+}
+
+@mixin pink-theme {
+  --accent-color: #ec4899;
+  --accent-light-color: #f472b6;
+  --accent-dark-color: #db2777;
+  --accent-contrast-color: #fff;
+  --gradient-from-color: #fbcfe8;
+  --gradient-via-color: #f472b6;
+  --gradient-to-color: #db2777;
+}

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

@@ -0,0 +1,81 @@
+@mixin base-theme {
+  --font-sans: "Inter Variable", sans-serif;
+  --font-icon: "Material Symbols Rounded Variable";
+  --font-mono: "Roboto Mono Variable", monospace;
+  --font-size-body: 0.75rem;
+  --font-size-tiny: 0.688rem;
+  --line-height-body: 1rem;
+  --upper-primary-sticky-fold: 4.125rem;
+  --upper-secondary-sticky-fold: 6.188rem;
+  --upper-tertiary-sticky-fold: 8.25rem;
+  --upper-fourth-sticky-fold: 10.2rem;
+  --upper-mobile-primary-sticky-fold: 6.625rem;
+  --upper-mobile-secondary-sticky-fold: 8.688rem;
+  --upper-mobile-sticky-fold: 10.75rem;
+  --upper-mobile-tertiary-sticky-fold: 8.25rem;
+  --lower-primary-sticky-fold: 3rem;
+  --lower-secondary-sticky-fold: 5.063rem;
+  --lower-tertiary-sticky-fold: 7.125rem;
+  --lower-fourth-sticky-fold: 9.188rem;
+  --sidebar-primary-sticky-fold: 2rem;
+}
+
+@mixin dark-theme {
+  --primary-color: #181818;
+  --primary-light-color: #1c1c1e;
+  --primary-dark-color: #262626;
+  --primary-contrast-color: #171717;
+
+  --secondary-color: #a3a3a3;
+  --secondary-light-color: #737373;
+  --secondary-dark-color: #fafafa;
+
+  --divider-color: #262626;
+  --divider-light-color: #1f1f1f;
+  --divider-dark-color: #2d2d2d;
+
+  --error-color: #292524;
+  --tooltip-color: #f5f5f5;
+  --popover-color: #1b1b1b;
+  --editor-theme: "merbivore_soft";
+}
+
+@mixin light-theme {
+  --primary-color: #ffffff;
+  --primary-light-color: #f9fafb;
+  --primary-dark-color: #f3f4f6;
+  --primary-contrast-color: #fdfdfd;
+
+  --secondary-color: #6b7280;
+  --secondary-light-color: #9ca3af;
+  --secondary-dark-color: #111827;
+
+  --divider-color: #f3f4f6;
+  --divider-light-color: #f3f4f6;
+  --divider-dark-color: #d1d5db;
+
+  --error-color: #fef3c7;
+  --tooltip-color: #262626;
+  --popover-color: #ffffff;
+  --editor-theme: "textmate";
+}
+
+@mixin black-theme {
+  --primary-color: #0f0f0f;
+  --primary-light-color: #171717;
+  --primary-dark-color: #181818;
+  --primary-contrast-color: #0f0f0f;
+
+  --secondary-color: #a3a3a3;
+  --secondary-light-color: #737373;
+  --secondary-dark-color: #f5f5f5;
+
+  --divider-color: #1c1c1e;
+  --divider-light-color: #181818;
+  --divider-dark-color: #323232;
+
+  --error-color: #1c1917;
+  --tooltip-color: #f5f5f5;
+  --popover-color: #0f0f0f;
+  --editor-theme: "twilight";
+}

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

@@ -0,0 +1,41 @@
+@mixin dark-editor-theme {
+  --editor-type-color: #a78bfa;
+  --editor-name-color: #60a5fa;
+  --editor-operator-color: #818cf8;
+  --editor-invalid-color: #f87171;
+  --editor-separator-color: #9ca3af;
+  --editor-meta-color: #9ca3af;
+  --editor-variable-color: #34d399;
+  --editor-link-color: #22d3ee;
+  --editor-process-color: #e879f9;
+  --editor-constant-color: #a78bfa;
+  --editor-keyword-color: #f472b6;
+}
+
+@mixin light-editor-theme {
+  --editor-type-color: #7c3aed;
+  --editor-name-color: #dc2626;
+  --editor-operator-color: #4f46e5;
+  --editor-invalid-color: #dc2626;
+  --editor-separator-color: #4b5563;
+  --editor-meta-color: #4b5563;
+  --editor-variable-color: #059669;
+  --editor-link-color: #0891b2;
+  --editor-process-color: #2563eb;
+  --editor-constant-color: #c026d3;
+  --editor-keyword-color: #db2777;
+}
+
+@mixin black-editor-theme {
+  --editor-type-color: #a78bfa;
+  --editor-name-color: #e879f9;
+  --editor-operator-color: #818cf8;
+  --editor-invalid-color: #f87171;
+  --editor-separator-color: #9ca3af;
+  --editor-meta-color: #9ca3af;
+  --editor-variable-color: #34d399;
+  --editor-link-color: #22d3ee;
+  --editor-process-color: #a78bfa;
+  --editor-constant-color: #60a5fa;
+  --editor-keyword-color: #f472b6;
+}

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

@@ -0,0 +1,64 @@
+@import "./base-themes.scss";
+@import "./editor-themes.scss";
+@import "./accent-themes.scss";
+
+:root {
+  @include base-theme;
+  @include dark-theme;
+  @include green-theme;
+  @include dark-editor-theme;
+}
+
+:root.light {
+  @include light-theme;
+  @include light-editor-theme;
+  color-scheme: light;
+}
+
+:root.dark {
+  @include dark-theme;
+  @include dark-editor-theme;
+  color-scheme: dark;
+}
+
+:root.black {
+  @include black-theme;
+  @include black-editor-theme;
+  color-scheme: dark;
+}
+
+:root[data-accent="blue"] {
+  @include blue-theme;
+}
+
+:root[data-accent="green"] {
+  @include green-theme;
+}
+
+:root[data-accent="teal"] {
+  @include teal-theme;
+}
+
+:root[data-accent="indigo"] {
+  @include indigo-theme;
+}
+
+:root[data-accent="purple"] {
+  @include purple-theme;
+}
+
+:root[data-accent="orange"] {
+  @include orange-theme;
+}
+
+:root[data-accent="pink"] {
+  @include pink-theme;
+}
+
+:root[data-accent="red"] {
+  @include red-theme;
+}
+
+:root[data-accent="yellow"] {
+  @include yellow-theme;
+}

packages/hoppscotch-common/locales/en.json

@@ -1,6 +1,5 @@
 {
   "action": {
-    "add": "Add",
     "autoscroll": "Autoscroll",
     "cancel": "Cancel",
     "choose_file": "Choose a file",
@@ -55,28 +54,9 @@
     "new": "Add new",
     "star": "Add star"
   },
-  "cookies": {
-    "modal": {
-      "new_domain_name": "New domain name",
-      "set": "Set a cookie",
-      "cookie_string": "Cookie string",
-      "enter_cookie_string": "Enter cookie string",
-      "cookie_name": "Name",
-      "cookie_value": "Value",
-      "cookie_path": "Path",
-      "cookie_expires": "Expires",
-      "managed_tab": "Managed",
-      "raw_tab": "Raw",
-      "interceptor_no_support": "Your currently selected interceptor does not support cookies. Select a different Interceptor and try again.",
-      "empty_domains": "Domain list is empty",
-      "empty_domain": "Domain is empty",
-      "no_cookies_in_domain": "No cookies set for this domain"
-    }
-  },
   "app": {
     "chat_with_us": "Chat with us",
     "contact_us": "Contact us",
-    "cookies": "Cookies",
     "copy": "Copy",
     "copy_user_id": "Copy User Auth Token",
     "developer_option": "Developer options",
@@ -257,7 +237,6 @@
   "error": {
     "browser_support_sse": "This browser doesn't seems to have Server Sent Events support.",
     "check_console_details": "Check console log for details.",
-    "check_how_to_add_origin": "Check how you can add an origin",
     "curl_invalid_format": "cURL is not formatted properly",
     "danger_zone": "Danger zone",
     "delete_account": "Your account is currently an owner in these teams:",
@@ -278,7 +257,6 @@
     "no_environments_to_export": "No environments to export. Please create an environment to get started.",
     "no_results_found": "No matches found",
     "page_not_found": "This page could not be found",
-    "please_install_extension": "Please install the extension and add origin to the extension.",
     "proxy_error": "Proxy error",
     "script_fail": "Could not execute pre-request script",
     "something_went_wrong": "Something went wrong",
@@ -786,7 +764,7 @@
     "published_error": "Something went wrong while publishing msg: {topic} to topic: {message}",
     "published_message": "Published message: {message} to topic: {topic}",
     "reconnection_error": "Failed to reconnect",
-    "show": "Show",
+    "show":"Show",
     "subscribed_failed": "Failed to subscribe to topic: {topic}",
     "subscribed_success": "Successfully subscribed to topic: {topic}",
     "unsubscribed_failed": "Failed to unsubscribe from topic: {topic}",

packages/hoppscotch-common/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@hoppscotch/common",
   "private": true,
-  "version": "2023.8.3-1",
+  "version": "2023.8.2",
   "scripts": {
     "dev": "pnpm exec npm-run-all -p -l dev:*",
     "test": "vitest --run",
@@ -17,22 +17,22 @@
     "postinstall": "pnpm run gql-codegen",
     "do-test": "pnpm run test",
     "do-lint": "pnpm run prod-lint",
-    "do-typecheck": "node type-check.mjs",
+    "do-typecheck": "pnpm run lint",
     "do-lintfix": "pnpm run lintfix"
   },
   "dependencies": {
     "@apidevtools/swagger-parser": "^10.1.0",
-    "@codemirror/autocomplete": "^6.10.2",
-    "@codemirror/commands": "^6.3.0",
-    "@codemirror/lang-javascript": "^6.2.1",
+    "@codemirror/autocomplete": "^6.9.0",
+    "@codemirror/commands": "^6.2.4",
+    "@codemirror/lang-javascript": "^6.1.9",
     "@codemirror/lang-json": "^6.0.1",
     "@codemirror/lang-xml": "^6.0.2",
-    "@codemirror/language": "6.9.0",
+    "@codemirror/language": "^6.9.0",
     "@codemirror/legacy-modes": "^6.3.3",
-    "@codemirror/lint": "^6.4.2",
-    "@codemirror/search": "^6.5.4",
-    "@codemirror/state": "^6.3.1",
-    "@codemirror/view": "^6.22.0",
+    "@codemirror/lint": "^6.4.0",
+    "@codemirror/search": "^6.5.1",
+    "@codemirror/state": "^6.2.1",
+    "@codemirror/view": "^6.16.0",
     "@fontsource-variable/inter": "^5.0.8",
     "@fontsource-variable/material-symbols-rounded": "^5.0.7",
     "@fontsource-variable/roboto-mono": "^5.0.9",
@@ -41,7 +41,9 @@
     "@hoppscotch/js-sandbox": "workspace:^",
     "@hoppscotch/ui": "workspace:^",
     "@hoppscotch/vue-toasted": "^0.1.0",
-    "@lezer/highlight": "1.1.4",
+    "@lezer/highlight": "^1.1.6",
+    "@sentry/tracing": "^7.64.0",
+    "@sentry/vue": "^7.64.0",
     "@urql/core": "^4.1.1",
     "@urql/devtools": "^2.0.3",
     "@urql/exchange-auth": "^2.1.6",
@@ -52,7 +54,6 @@
     "acorn-walk": "^8.2.0",
     "axios": "^1.4.0",
     "buffer": "^6.0.3",
-    "cookie-es": "^1.0.0",
     "dioc": "workspace:^",
     "esprima": "^4.0.1",
     "events": "^3.3.0",
@@ -77,8 +78,6 @@
     "process": "^0.11.10",
     "qs": "^6.11.2",
     "rxjs": "^7.8.1",
-    "set-cookie-parser": "^2.6.0",
-    "set-cookie-parser-es": "^1.0.5",
     "socket.io-client-v2": "npm:socket.io-client@^2.4.0",
     "socket.io-client-v3": "npm:socket.io-client@^3.1.3",
     "socket.io-client-v4": "npm:socket.io-client@^4.4.1",
@@ -101,8 +100,7 @@
     "wonka": "^6.3.4",
     "workbox-window": "^7.0.0",
     "xml-formatter": "^3.5.0",
-    "yargs-parser": "^21.1.1",
-    "zod": "^3.22.4"
+    "yargs-parser": "^21.1.1"
   },
   "devDependencies": {
     "@esbuild-plugins/node-globals-polyfill": "^0.2.3",
@@ -135,13 +133,17 @@
     "@vue/compiler-sfc": "^3.3.4",
     "@vue/eslint-config-typescript": "^11.0.3",
     "@vue/runtime-core": "^3.3.4",
+    "autoprefixer": "^10.4.14",
     "cross-env": "^7.0.3",
     "dotenv": "^16.3.1",
     "eslint": "^8.47.0",
     "eslint-plugin-prettier": "^5.0.0",
     "eslint-plugin-vue": "^9.17.0",
-    "glob": "^10.3.10",
     "npm-run-all": "^4.1.5",
+    "postcss": "^8.4.23",
+    "prettier-plugin-tailwindcss": "^0.5.6",
+    "tailwindcss": "^3.3.2",
+    "vite-plugin-fonts": "^0.6.0",
     "openapi-types": "^12.1.3",
     "rollup-plugin-polyfill-node": "^0.12.0",
     "sass": "^1.66.0",
@@ -157,9 +159,7 @@
     "vite-plugin-pages-sitemap": "^1.6.1",
     "vite-plugin-pwa": "^0.16.4",
     "vite-plugin-vue-layouts": "^0.8.0",
-    "vite-plugin-windicss": "^1.9.1",
     "vitest": "^0.34.2",
-    "vue-tsc": "^1.8.8",
-    "windicss": "^3.5.6"
+    "vue-tsc": "^1.8.8"
   }
 }

packages/hoppscotch-common/public/badge-dark.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="156" height="32" fill="none"><rect width="156" height="32" fill="#000" 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/public/badge-light.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="156" height="32" fill="none"><rect width="156" height="32" fill="#fff" rx="4"/><text xmlns="http://www.w3.org/2000/svg" x="50%" y="50%" fill="#000" 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/public/logo.svg

@@ -1,50 +1 @@
-<svg width="824" height="824" viewBox="0 0 824 824" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect width="824" height="824" rx="184" fill="#08110F"/>
-<rect width="824" height="824" rx="184" fill="url(#paint0_radial_0_21)" fill-opacity="0.5"/>
-<path d="M435.425 463.217C429.441 476.657 411.033 481.515 394.309 474.07C377.585 466.624 368.879 449.693 374.863 436.253C380.846 422.813 399.254 417.954 415.978 425.4C432.702 432.846 441.409 449.777 435.425 463.217Z" fill="url(#paint1_linear_0_21)"/>
-<path d="M435.425 463.217C429.441 476.657 411.033 481.515 394.309 474.07C377.585 466.624 368.879 449.693 374.863 436.253C380.846 422.813 399.254 417.954 415.978 425.4C432.702 432.846 441.409 449.777 435.425 463.217Z" fill="url(#paint2_radial_0_21)" style="mix-blend-mode:soft-light"/>
-<path d="M535.563 521.172C553.071 526.191 570.536 518.856 574.571 504.789C578.606 490.722 567.684 475.251 550.175 470.232C532.666 465.213 515.201 472.548 511.166 486.615C507.131 500.682 518.054 516.153 535.563 521.172Z" fill="url(#paint3_linear_0_21)"/>
-<path d="M535.563 521.172C553.071 526.191 570.536 518.856 574.571 504.789C578.606 490.722 567.684 475.251 550.175 470.232C532.666 465.213 515.201 472.548 511.166 486.615C507.131 500.682 518.054 516.153 535.563 521.172Z" fill="url(#paint4_radial_0_21)" style="mix-blend-mode:soft-light"/>
-<path d="M292.782 355.633C308.227 365.286 314.462 383.173 306.709 395.584C298.955 407.995 280.149 410.231 264.704 400.578C249.258 390.924 243.023 373.037 250.777 360.626C258.53 348.215 277.337 345.98 292.782 355.633Z" fill="url(#paint5_linear_0_21)"/>
-<path d="M292.782 355.633C308.227 365.286 314.462 383.173 306.709 395.584C298.955 407.995 280.149 410.231 264.704 400.578C249.258 390.924 243.023 373.037 250.777 360.626C258.53 348.215 277.337 345.98 292.782 355.633Z" fill="url(#paint6_radial_0_21)" style="mix-blend-mode:soft-light"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M502.355 231.325C581.373 266.506 632.095 343.263 634.119 429.03C680.633 465.639 726.858 516.883 705.36 565.168C681.25 619.319 595.382 617.091 497.781 589.689C450.767 615.718 392.444 620.168 339.689 596.68C286.934 573.192 251.229 526.908 239.1 474.517C153.428 420.321 94.3151 357.999 118.425 303.847C139.923 255.562 208.935 255.626 267.265 265.697C332.356 209.81 423.338 196.144 502.355 231.325ZM159.38 322.082C147.667 348.389 210.578 423.052 382.845 499.751C555.111 576.449 652.693 573.241 664.405 546.934C674.099 525.16 634.213 483.308 588.537 450.878C553.009 425.484 504.344 397.494 440.864 369.231C423.586 361.538 416.839 341.008 424.104 324.691C431.369 308.374 447.329 297.463 480.93 295.91C496.747 295.862 498.823 291.476 499.546 287.716C500.442 281.915 492.401 276.002 484.108 272.31C418.17 242.953 337.453 255.265 281.503 314.178C226.84 301.933 169.074 300.309 159.38 322.082Z" fill="url(#paint7_linear_0_21)"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M502.355 231.325C581.373 266.506 632.095 343.263 634.119 429.03C680.633 465.639 726.858 516.883 705.36 565.168C681.25 619.319 595.382 617.091 497.781 589.689C450.767 615.718 392.444 620.168 339.689 596.68C286.934 573.192 251.229 526.908 239.1 474.517C153.428 420.321 94.3151 357.999 118.425 303.847C139.923 255.562 208.935 255.626 267.265 265.697C332.356 209.81 423.338 196.144 502.355 231.325ZM159.38 322.082C147.667 348.389 210.578 423.052 382.845 499.751C555.111 576.449 652.693 573.241 664.405 546.934C674.099 525.16 634.213 483.308 588.537 450.878C553.009 425.484 504.344 397.494 440.864 369.231C423.586 361.538 416.839 341.008 424.104 324.691C431.369 308.374 447.329 297.463 480.93 295.91C496.747 295.862 498.823 291.476 499.546 287.716C500.442 281.915 492.401 276.002 484.108 272.31C418.17 242.953 337.453 255.265 281.503 314.178C226.84 301.933 169.074 300.309 159.38 322.082Z" fill="url(#paint8_radial_0_21)" style="mix-blend-mode:soft-light"/>
-<defs>
-<radialGradient id="paint0_radial_0_21" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(814.524 12.36) rotate(125.613) scale(1089.59 1210.34)">
-<stop stop-color="#00D196" stop-opacity="0.5"/>
-<stop offset="0.996771" stop-color="#00D196" stop-opacity="0"/>
-</radialGradient>
-<linearGradient id="paint1_linear_0_21" x1="411.893" y1="212" x2="411.893" y2="612" gradientUnits="userSpaceOnUse">
-<stop stop-color="#00D196"/>
-<stop offset="1" stop-color="#00B381"/>
-</linearGradient>
-<radialGradient id="paint2_radial_0_21" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(644.721 344.481) rotate(159.984) scale(631.37 385.135)">
-<stop stop-color="white"/>
-<stop offset="1" stop-color="white" stop-opacity="0"/>
-</radialGradient>
-<linearGradient id="paint3_linear_0_21" x1="411.893" y1="212" x2="411.893" y2="612" gradientUnits="userSpaceOnUse">
-<stop stop-color="#00D196"/>
-<stop offset="1" stop-color="#00B381"/>
-</linearGradient>
-<radialGradient id="paint4_radial_0_21" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(644.721 344.481) rotate(159.984) scale(631.37 385.135)">
-<stop stop-color="white"/>
-<stop offset="1" stop-color="white" stop-opacity="0"/>
-</radialGradient>
-<linearGradient id="paint5_linear_0_21" x1="411.893" y1="212" x2="411.893" y2="612" gradientUnits="userSpaceOnUse">
-<stop stop-color="#00D196"/>
-<stop offset="1" stop-color="#00B381"/>
-</linearGradient>
-<radialGradient id="paint6_radial_0_21" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(644.721 344.481) rotate(159.984) scale(631.37 385.135)">
-<stop stop-color="white"/>
-<stop offset="1" stop-color="white" stop-opacity="0"/>
-</radialGradient>
-<linearGradient id="paint7_linear_0_21" x1="411.893" y1="212" x2="411.893" y2="612" gradientUnits="userSpaceOnUse">
-<stop stop-color="#00D196"/>
-<stop offset="1" stop-color="#00B381"/>
-</linearGradient>
-<radialGradient id="paint8_radial_0_21" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(644.721 344.481) rotate(159.984) scale(631.37 385.135)">
-<stop stop-color="white"/>
-<stop offset="1" stop-color="white" stop-opacity="0"/>
-</radialGradient>
-</defs>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" fill="none"><path fill="#10B981" d="M0 0h512v512H0z"/><circle cx="197.76" cy="157.84" r="10" fill="#fff" fill-opacity=".75"/><circle cx="259.76" cy="161.84" r="12" fill="#fff" fill-opacity=".75"/><circle cx="319.76" cy="177.84" r="10" fill="#fff" fill-opacity=".75"/><path d="M344.963 235.676c2.075-12.698-38.872-29.804-90.967-38.094-52.09-8.296-96.404-4.665-98.48 8.033-.257 1.035 0 1.812.263 2.853-1.298-.521-76.714 211.212-76.714 211.212H364.14s-17.621-181.414-20.211-181.414c.515-.772 1.035-1.549 1.035-2.59Z" fill="url(#a)"/><path d="M314.902 227.386c-1.298 8.033-30.839 9.845-66.343 4.402-35.247-5.7-62.982-16.843-61.684-24.618.521-2.59 3.888-4.665 9.331-5.7-18.141.777-30.062 4.145-31.096 9.845-1.555 10.628 34.726 25.139 81.373 32.657 46.647 7.512 85.782 4.665 87.594-5.7 1.041-6.226-9.33-12.961-26.431-19.439 4.923 2.847 7.513 5.957 7.256 8.553Z" fill="#A7F3D0" fill-opacity=".5"/><path d="M333.557 157.413c-3.104-32.137-27.729-59.351-60.9-64.53-33.172-5.186-64.531 12.954-77.749 42.238 21.251 1.298 44.057 3.631 67.904 7.518 25.396 3.888 49.237 9.074 70.745 14.774Z" fill="url(#b)"/><path d="M74.142 158.002c-2.59 15.808 30.319 35.247 81.894 51.055-.257-1.04-.257-1.818-.257-2.853 2.07-12.698 46.127-16.328 98.48-8.032 52.347 8.29 93.037 25.396 90.961 38.094-.257 1.04-.514 1.818-1.035 2.589 53.645.778 90.968-7.512 93.557-23.32 3.625-24.104-74.638-56.498-174.93-72.306-100.555-15.808-185.045-9.331-188.67 14.773Zm115.586-1.298c.778-4.145 4.665-7.255 8.81-6.477 4.145.777 7.256 4.665 6.478 8.81-.52 4.145-4.665 6.998-8.81 6.478-4.145-.778-7.255-4.666-6.478-8.811Zm59.866 4.145c.777-5.7 6.22-9.587 11.92-8.547 5.7.778 9.588 6.215 8.553 11.921-1.041 5.442-6.478 9.33-11.92 8.553-5.706-.778-9.594-6.221-8.553-11.927Zm62.975 15.294c.778-4.145 4.665-7.255 8.81-6.478 4.145.778 7.255 4.666 6.478 8.811-.515 4.145-4.665 7.255-8.81 6.477-4.145-.777-7.256-4.665-6.478-8.81Z" fill="url(#c)"/><defs><radialGradient id="b" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(0 32.7063 -69.3245 0 264.232 124.706)"><stop stop-color="#047857"/><stop offset="1" stop-color="#064E3B"/></radialGradient><radialGradient id="c" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(255.837 186.754) scale(1389.61)"><stop stop-color="#047857"/><stop offset=".115" stop-color="#064E3B"/></radialGradient><linearGradient id="a" x1="224.998" y1="157.606" x2="224.998" y2="403.696" gradientUnits="userSpaceOnUse"><stop stop-color="#86EFAC" stop-opacity=".75"/><stop offset=".635" stop-color="#fff" stop-opacity=".2"/><stop offset="1" stop-color="#fff" stop-opacity="0"/></linearGradient></defs></svg>

packages/hoppscotch-common/src/App.vue

@@ -2,7 +2,7 @@
   <div>
     <div
       v-if="isLoadingInitialRoute"
-      class="flex flex-col items-center justify-center min-h-screen"
+      class="flex min-h-screen flex-col items-center justify-center"
     >
       <HoppSmartSpinner />
     </div>

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

@@ -58,8 +58,6 @@ declare module 'vue' {
     CollectionsRequest: typeof import('./components/collections/Request.vue')['default']
     CollectionsSaveRequest: typeof import('./components/collections/SaveRequest.vue')['default']
     CollectionsTeamCollections: typeof import('./components/collections/TeamCollections.vue')['default']
-    CookiesAllModal: typeof import('./components/cookies/AllModal.vue')['default']
-    CookiesEditCookie: typeof import('./components/cookies/EditCookie.vue')['default']
     Environments: typeof import('./components/environments/index.vue')['default']
     EnvironmentsAdd: typeof import('./components/environments/Add.vue')['default']
     EnvironmentsImportExport: typeof import('./components/environments/ImportExport.vue')['default']
@@ -92,11 +90,13 @@ declare module 'vue' {
     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']
@@ -143,6 +143,7 @@ declare module 'vue' {
     IconLucideAlertTriangle: typeof import('~icons/lucide/alert-triangle')['default']
     IconLucideArrowLeft: typeof import('~icons/lucide/arrow-left')['default']
     IconLucideArrowUpRight: typeof import('~icons/lucide/arrow-up-right')['default']
+    IconLucideBrush: typeof import('~icons/lucide/brush')['default']
     IconLucideCheckCircle: typeof import('~icons/lucide/check-circle')['default']
     IconLucideChevronRight: typeof import('~icons/lucide/chevron-right')['default']
     IconLucideGlobe: typeof import('~icons/lucide/globe')['default']
@@ -152,9 +153,10 @@ declare module 'vue' {
     IconLucideLayers: typeof import('~icons/lucide/layers')['default']
     IconLucideListEnd: typeof import('~icons/lucide/list-end')['default']
     IconLucideMinus: typeof import('~icons/lucide/minus')['default']
+    IconLucideRss: typeof import('~icons/lucide/rss')['default']
     IconLucideSearch: typeof import('~icons/lucide/search')['default']
     IconLucideUsers: typeof import('~icons/lucide/users')['default']
-    InterceptorsErrorPlaceholder: typeof import('./components/interceptors/ErrorPlaceholder.vue')['default']
+    IconLucideVerified: typeof import('~icons/lucide/verified')['default']
     InterceptorsExtensionSubtitle: typeof import('./components/interceptors/ExtensionSubtitle.vue')['default']
     LensesHeadersRenderer: typeof import('./components/lenses/HeadersRenderer.vue')['default']
     LensesHeadersRendererEntry: typeof import('./components/lenses/HeadersRendererEntry.vue')['default']

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

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="relative flex items-center px-4 py-2 transition bg-error text-tiny group"
+    class="group relative flex items-center bg-error px-4 py-2 text-tiny transition"
     role="alert"
   >
     <icon-lucide-info class="mr-2" />

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

@@ -1,7 +1,7 @@
 <template>
   <div
     ref="contextMenuRef"
-    class="fixed bg-popover shadow-lg transform translate-y-8 border border-dividerDark p-2 rounded"
+    class="fixed translate-y-8 transform rounded border border-dividerDark bg-popover p-2 shadow-lg"
     :style="`top: ${position.top}px; left: ${position.left}px; z-index: 1000;`"
   >
     <div v-if="contextMenuOptions" class="flex flex-col">

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

@@ -6,7 +6,7 @@
     @close="hideModal"
   >
     <template #body>
-      <p class="px-2 mb-4 text-secondaryLight">
+      <p class="mb-4 px-2 text-secondaryLight">
         {{ t("app.developer_option_description") }}
       </p>
       <div class="flex flex-1">

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

@@ -20,12 +20,6 @@
             <AppInterceptor />
           </template>
         </tippy>
-        <HoppButtonSecondary
-          v-if="platform.platformFeatureFlags.cookiesEnabled ?? false"
-          :label="t('app.cookies')"
-          :icon="IconCookie"
-          @click="showCookiesModal = true"
-        />
       </div>
       <div class="flex">
         <tippy
@@ -181,7 +175,7 @@
           @click="COLUMN_LAYOUT = !COLUMN_LAYOUT"
         />
         <span
-          class="transition transform"
+          class="transform transition"
           :class="{
             'rotate-180': SIDEBAR_ON_LEFT,
           }"
@@ -201,17 +195,12 @@
       :show="showDeveloperOptions"
       @hide-modal="showDeveloperOptions = false"
     />
-    <CookiesAllModal
-      :show="showCookiesModal"
-      @hide-modal="showCookiesModal = false"
-    />
   </div>
 </template>
 
 <script setup lang="ts">
 import { ref } from "vue"
 import { version } from "~/../package.json"
-import IconCookie from "~icons/lucide/cookie"
 import IconSidebar from "~icons/lucide/sidebar"
 import IconZap from "~icons/lucide/zap"
 import IconShare2 from "~icons/lucide/share-2"
@@ -234,9 +223,7 @@ import { invokeAction } from "@helpers/actions"
 import { HoppSmartItem } from "@hoppscotch/ui"
 
 const t = useI18n()
-
 const showDeveloperOptions = ref(false)
-const showCookiesModal = ref(false)
 
 const EXPAND_NAVIGATION = useSetting("EXPAND_NAVIGATION")
 const SIDEBAR = useSetting("SIDEBAR")

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

@@ -1,30 +1,28 @@
 <template>
   <div>
     <header
-      ref="headerRef"
-      class="flex items-center justify-between flex-1 flex-shrink-0 px-2 py-2 space-x-2 overflow-x-auto overflow-y-hidden"
-      @mousedown.prevent="platform.ui?.appHeader?.onHeaderAreaClick?.()"
+      class="flex flex-1 flex-shrink-0 items-center justify-between space-x-2 overflow-x-auto overflow-y-hidden px-2 py-2"
     >
       <div
-        class="inline-flex items-center justify-start flex-1 space-x-2"
+        class="inline-flex flex-1 items-center justify-start space-x-2"
         :style="{
           paddingTop: platform.ui?.appHeader?.paddingTop?.value,
           paddingLeft: platform.ui?.appHeader?.paddingLeft?.value,
         }"
       >
         <HoppButtonSecondary
-          class="tracking-wide !font-bold !text-secondaryDark hover:bg-primaryDark focus-visible:bg-primaryDark uppercase"
+          class="!font-bold uppercase tracking-wide !text-secondaryDark hover:bg-primaryDark focus-visible:bg-primaryDark"
           :label="t('app.name')"
           to="/"
         />
       </div>
-      <div class="inline-flex items-center justify-center flex-1 space-x-2">
+      <div class="inline-flex flex-1 items-center justify-center space-x-2">
         <button
-          class="flex flex-1 items-center justify-between px-2 py-1 self-stretch bg-primaryDark transition text-secondaryLight cursor-text rounded border border-dividerDark max-w-60 hover:border-dividerDark hover:bg-primaryLight hover:text-secondary focus-visible:border-dividerDark focus-visible:bg-primaryLight focus-visible:text-secondary"
+          class="flex max-w-[15rem] flex-1 cursor-text items-center justify-between self-stretch rounded border border-dividerDark bg-primaryDark px-2 py-1 text-secondaryLight transition hover:border-dividerDark hover:bg-primaryLight hover:text-secondary focus-visible:border-dividerDark focus-visible:bg-primaryLight focus-visible:text-secondary"
           @click="invokeAction('modals.search.toggle')"
         >
           <span class="inline-flex flex-1 items-center">
-            <icon-lucide-search class="mr-2 svg-icons" />
+            <icon-lucide-search class="svg-icons mr-2" />
             {{ t("app.search") }}
           </span>
           <span class="flex space-x-1">
@@ -50,7 +48,7 @@
           @click="invokeAction('modals.support.toggle')"
         />
       </div>
-      <div class="inline-flex items-center justify-end flex-1 space-x-2">
+      <div class="inline-flex flex-1 items-center justify-end space-x-2">
         <div
           v-if="currentUser === null"
           class="inline-flex items-center space-x-2"
@@ -58,7 +56,7 @@
           <HoppButtonSecondary
             :icon="IconUploadCloud"
             :label="t('header.save_workspace')"
-            class="hidden md:flex bg-green-500/15 py-1.75 border border-green-600/25 !text-green-500 hover:bg-green-400/10 focus-visible:bg-green-400/10 focus-visible:border-green-800/50 !focus-visible:text-green-600 hover:border-green-800/50 !hover:text-green-600"
+            class="py-1.75 !focus-visible:text-green-600 !hover:text-green-600 hidden border border-green-600/25 bg-green-500/[.15] !text-green-500 hover:border-green-800/50 hover:bg-green-400/10 focus-visible:border-green-800/50 focus-visible:bg-green-400/10 md:flex"
             @click="invokeAction('modals.login.toggle')"
           />
           <HoppButtonPrimary
@@ -79,13 +77,13 @@
             @handle-click="handleTeamEdit()"
           />
           <div
-            class="flex border divide-x rounded bg-green-500/15 divide-green-600/25 border-green-600/25 focus-within:bg-green-400/10 focus-within:border-green-800/50 focus-within:divide-green-800/50 hover:bg-green-400/10 hover:border-green-800/50 hover:divide-green-800/50"
+            class="flex divide-x divide-green-600/25 rounded border border-green-600/25 bg-green-500/[.15] focus-within:divide-green-800/50 focus-within:border-green-800/50 focus-within:bg-green-400/10 hover:divide-green-800/50 hover:border-green-800/50 hover:bg-green-400/10"
           >
             <HoppButtonSecondary
               v-tippy="{ theme: 'tooltip' }"
               :title="t('team.invite_tooltip')"
               :icon="IconUserPlus"
-              class="py-1.75 !text-green-500 !focus-visible:text-green-600 !hover:text-green-600"
+              class="py-1.75 !focus-visible:text-green-600 !hover:text-green-600 !text-green-500"
               @click="handleInvite()"
             />
             <HoppButtonSecondary
@@ -97,7 +95,7 @@
               v-tippy="{ theme: 'tooltip' }"
               :title="t('team.edit')"
               :icon="IconSettings"
-              class="py-1.75 !text-green-500 !focus-visible:text-green-600 !hover:text-green-600"
+              class="py-1.75 !focus-visible:text-green-600 !hover:text-green-600 !text-green-500"
               @click="handleTeamEdit()"
             />
           </div>
@@ -112,7 +110,7 @@
               :title="t('workspace.change')"
               :label="mdAndLarger ? workspaceName : ``"
               :icon="workspace.type === 'personal' ? IconUser : IconUsers"
-              class="pr-8 select-wrapper rounded bg-blue-500/15 py-1.75 border border-blue-600/25 !text-blue-500 focus-visible:bg-blue-400/10 focus-visible:border-blue-800/50 !focus-visible:text-blue-600 hover:bg-blue-400/10 hover:border-blue-800/50 !hover:text-blue-600"
+              class="select-wrapper !focus-visible:text-blue-600 !hover:text-blue-600 rounded border border-blue-600/25 bg-blue-500/[.15] py-[0.4375rem] pr-8 !text-blue-500 hover:border-blue-800/50 hover:bg-blue-400/10 focus-visible:border-blue-800/50 focus-visible:bg-blue-400/10"
             />
             <template #content="{ hide }">
               <div
@@ -178,7 +176,7 @@
                   @keyup.escape="hide()"
                 >
                   <div class="flex flex-col px-2 text-tiny">
-                    <span class="inline-flex font-semibold truncate">
+                    <span class="inline-flex truncate font-semibold">
                       {{
                         currentUser.displayName ||
                         t("profile.default_hopp_displayname")

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

@@ -1,7 +1,7 @@
 <template>
   <div v-if="inspectionResults && inspectionResults.length > 0">
     <tippy interactive trigger="click" theme="popover">
-      <div class="flex justify-center items-center flex-1 flex-col">
+      <div class="flex flex-1 flex-col items-center justify-center">
         <HoppButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           :icon="IconAlertTriangle"
@@ -10,12 +10,12 @@
         />
       </div>
       <template #content="{ hide }">
-        <div class="flex flex-col space-y-2 items-start flex-1">
+        <div class="flex flex-1 flex-col items-start space-y-2">
           <div
-            class="flex justify-between border rounded pl-2 border-divider bg-popover sticky top-0 self-stretch"
+            class="sticky top-0 flex justify-between self-stretch rounded border border-divider bg-popover pl-2"
           >
-            <span class="flex items-center flex-1">
-              <icon-lucide-activity class="mr-2 svg-icons text-accent" />
+            <span class="flex flex-1 items-center">
+              <icon-lucide-activity class="svg-icons mr-2 text-accent" />
               <span class="font-bold">
                 {{ t("inspections.title") }}
               </span>
@@ -31,10 +31,10 @@
           <div
             v-for="(inspector, index) in inspectionResults"
             :key="index"
-            class="flex self-stretch max-w-md w-full"
+            class="flex w-full max-w-md self-stretch"
           >
             <div
-              class="flex flex-col flex-1 rounded border border-dashed border-dividerDark divide-y divide-dashed divide-dividerDark"
+              class="flex flex-1 flex-col divide-y divide-dashed divide-dividerDark rounded border border-dashed border-dividerDark"
             >
               <span
                 v-if="inspector.text.type === 'text'"
@@ -44,13 +44,13 @@
                 <HoppSmartLink
                   blank
                   :to="inspector.doc.link"
-                  class="text-accent hover:text-accentDark transition"
+                  class="text-accent transition hover:text-accentDark"
                 >
                   {{ inspector.doc.text }}
                   <icon-lucide-arrow-up-right class="svg-icons" />
                 </HoppSmartLink>
               </span>
-              <span v-if="inspector.action" class="flex p-2 space-x-2">
+              <span v-if="inspector.action" class="flex space-x-2 p-2">
                 <HoppButtonSecondary
                   :label="inspector.action.text"
                   outline

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

@@ -8,7 +8,7 @@
   >
     <template #body>
       <div class="flex flex-col space-y-2">
-        <h2 class="p-4 font-semibold font-bold text-secondaryDark">
+        <h2 class="p-4 font-bold font-semibold text-secondaryDark">
           {{ t("layout.name") }}
         </h2>
         <HoppSmartItem
@@ -27,7 +27,7 @@
           active
           @click="expandCollection"
         />
-        <h2 class="p-4 font-semibold font-bold text-secondaryDark">
+        <h2 class="p-4 font-bold font-semibold text-secondaryDark">
           {{ t("support.title") }}
         </h2>
         <template

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

@@ -16,13 +16,13 @@
             class="share-link"
             tabindex="0"
           >
-            <component :is="platform.icon" class="w-6 h-6" />
+            <component :is="platform.icon" class="h-6 w-6" />
             <span class="mt-3">
               {{ platform.name }}
             </span>
           </a>
           <button class="share-link" @click="copyAppLink">
-            <component :is="copyIcon" class="w-6 h-6 text-xl" />
+            <component :is="copyIcon" class="h-6 w-6 text-xl" />
             <span class="mt-3">
               {{ t("app.copy") }}
             </span>
@@ -119,14 +119,14 @@ const hideModal = () => {
 .share-link {
   @apply border border-dividerLight;
   @apply rounded;
-  @apply flex-col flex;
+  @apply flex flex-col;
   @apply p-4;
   @apply items-center;
   @apply justify-center;
   @apply font-semibold;
-  @apply hover: (bg-primaryLight text-secondaryDark);
-  @apply focus: outline-none;
-  @apply focus-visible: border-divider;
+  @apply hover:bg-primaryLight hover:text-secondaryDark;
+  @apply focus:outline-none;
+  @apply focus-visible:border-divider;
 
   svg {
     @apply opacity-80;

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

@@ -2,7 +2,7 @@
   <HoppSmartSlideOver :show="show" :title="t('app.shortcuts')" @close="close()">
     <template #content>
       <div
-        class="sticky top-0 z-10 flex flex-col flex-shrink-0 overflow-x-auto bg-primary"
+        class="sticky top-0 z-10 flex flex-shrink-0 flex-col overflow-x-auto bg-primary"
       >
         <HoppSmartInput
           v-model="filterText"
@@ -17,7 +17,7 @@
           v-if="isEmpty(shortcutsResults)"
           :text="`${t('state.nothing_found')} ‟${filterText}”`"
         >
-          <icon-lucide-search class="pb-2 opacity-75 svg-icons" />
+          <icon-lucide-search class="svg-icons pb-2 opacity-75" />
         </HoppSmartPlaceholder>
 
         <details
@@ -28,16 +28,16 @@
           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"
+            class="flex min-w-0 flex-1 cursor-pointer items-center px-6 py-4 font-semibold text-secondaryLight transition hover:text-secondaryDark focus:outline-none"
           >
-            <icon-lucide-chevron-right class="mr-2 indicator" />
+            <icon-lucide-chevron-right class="indicator mr-2" />
             <span
-              class="font-semibold truncate capitalize-first text-secondaryDark"
+              class="capitalize-first truncate font-semibold text-secondaryDark"
             >
               {{ sectionTitle }}
             </span>
           </summary>
-          <div class="flex flex-col px-6 pb-4 space-y-2">
+          <div class="flex flex-col space-y-2 px-6 pb-4">
             <AppShortcutsEntry
               v-for="(shortcut, index) in sectionResults"
               :key="`shortcut-${index}`"

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

@@ -1,6 +1,6 @@
 <template>
   <div class="flex items-center py-1">
-    <span class="flex flex-1 mr-4">
+    <span class="mr-4 flex flex-1">
       {{ shortcut.label }}
     </span>
     <kbd

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

@@ -1,17 +1,17 @@
 <template>
   <div class="flex flex-col items-center justify-center text-secondaryLight">
-    <div class="flex mb-4 space-x-2">
+    <div class="mb-4 flex space-x-2">
       <div class="flex flex-col items-end space-y-4 text-right">
-        <span class="flex items-center flex-1">
+        <span class="flex flex-1 items-center">
           {{ t("shortcut.request.send_request") }}
         </span>
-        <span class="flex items-center flex-1">
+        <span class="flex flex-1 items-center">
           {{ t("shortcut.general.show_all") }}
         </span>
-        <span class="flex items-center flex-1">
+        <span class="flex flex-1 items-center">
           {{ t("shortcut.general.command_menu") }}
         </span>
-        <span class="flex items-center flex-1">
+        <span class="flex flex-1 items-center">
           {{ t("shortcut.general.help_menu") }}
         </span>
       </div>

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

@@ -1,6 +1,6 @@
 <template>
-  <aside class="flex justify-between h-full md:flex-col">
-    <nav class="flex flex-1 flex-nowrap md:flex-col md:flex-none bg-primary">
+  <aside class="flex h-full justify-between md:flex-col">
+    <nav class="flex flex-1 flex-nowrap bg-primary md:flex-none md:flex-col">
       <HoppSmartLink
         v-for="(navigation, index) in primaryNavigation"
         :key="`navigation-${index}`"
@@ -73,25 +73,25 @@ const primaryNavigation = [
 .nav-link {
   @apply relative;
   @apply p-4;
-  @apply flex flex-col flex-1;
+  @apply flex flex-1 flex-col;
   @apply items-center;
   @apply justify-center;
-  @apply hover: (bg-primaryDark text-secondaryDark);
-  @apply focus-visible: text-secondaryDark;
+  @apply hover:bg-primaryDark hover:text-secondaryDark;
+  @apply focus-visible:text-secondaryDark;
   @apply after:absolute;
   @apply after:inset-x-0;
-  @apply after:md: inset-x-auto;
-  @apply after:md: inset-y-0;
+  @apply after:md:inset-x-auto;
+  @apply after:md:inset-y-0;
   @apply after:bottom-0;
-  @apply after:md: bottom-auto;
-  @apply after:md: left-0;
-  @apply after:z-2;
+  @apply after:md:bottom-auto;
+  @apply after:md:left-0;
+  @apply after:z-10;
   @apply after:h-0.5;
-  @apply after:md: h-full;
+  @apply after:md:h-full;
   @apply after:w-full;
-  @apply after:md: w-0.5;
-  @apply after:content-DEFAULT;
-  @apply focus: after: bg-divider;
+  @apply after:md:w-0.5;
+  @apply after:content-[""];
+  @apply focus:after:bg-divider;
 
   .svg-icons {
     @apply opacity-75;
@@ -105,7 +105,7 @@ const primaryNavigation = [
   &.router-link-active {
     @apply text-secondaryDark;
     @apply bg-primaryLight;
-    @apply hover: text-secondaryDark;
+    @apply hover:text-secondaryDark;
     @apply after:bg-accent;
 
     .svg-icons {
@@ -116,7 +116,7 @@ const primaryNavigation = [
   &.exact-active-link {
     @apply text-secondaryDark;
     @apply bg-primaryLight;
-    @apply hover: text-secondaryDark;
+    @apply hover:text-secondaryDark;
     @apply after:bg-accent;
 
     .svg-icons {

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

@@ -1,7 +1,7 @@
 <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="search-entry relative flex flex-1 cursor-pointer items-center space-x-4 px-6 py-4 font-medium transition focus:outline-none"
     :class="{ 'active bg-primaryLight text-secondaryDark': active }"
     tabindex="-1"
     @click="emit('action')"
@@ -9,7 +9,7 @@
   >
     <component
       :is="entry.icon"
-      class="opacity-50 svg-icons"
+      class="svg-icons opacity-50"
       :class="{ 'opacity-100': active }"
     />
     <template
@@ -112,9 +112,9 @@ watch(
   @apply after:left-0;
   @apply after:bottom-0;
   @apply after:bg-transparent;
-  @apply after:z-2;
+  @apply after:z-10;
   @apply after:w-0.5;
-  @apply after:content-DEFAULT;
+  @apply after:content-[''];
 
   &.active {
     @apply after:bg-accentLight;

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

@@ -8,7 +8,7 @@
       {{ historyEntry.request.url }}
     </span>
     <span
-      class="font-semibold truncate text-tiny flex flex-shrink-0 border border-dividerDark rounded-md px-1"
+      class="flex flex-shrink-0 truncate rounded-md border border-dividerDark px-1 text-tiny font-semibold"
     >
       {{ historyEntry.request.query.split("\n")[0] }}
     </span>

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

@@ -1,5 +1,5 @@
 <template>
-  <span class="flex flex-1 space-x-2 items-center">
+  <span class="flex flex-1 items-center space-x-2">
     <template v-for="(folder, index) in pathFolders" :key="index">
       <span class="block" :class="{ truncate: index !== 0 }">
         {{ folder.name }}

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

@@ -5,7 +5,7 @@
     </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="flex flex-shrink-0 truncate rounded-md border border-dividerDark px-1 text-tiny font-semibold"
       :class="entryStatus.className"
     >
       {{ historyEntry.request.method }}

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

@@ -8,8 +8,8 @@
     </template>
     <span
       v-if="request"
-      class="font-semibold truncate text-tiny flex flex-shrink-0 border border-dividerDark rounded-md px-1"
-      :class="getMethodLabelColorClassOf(request)"
+      class="flex flex-shrink-0 truncate rounded-md border border-dividerDark px-1 text-tiny font-semibold"
+      :style="{ color: getMethodLabelColorClassOf(request) }"
     >
       {{ request.method.toUpperCase() }}
     </span>

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

@@ -6,7 +6,7 @@
     @close="emit('hide-modal')"
   >
     <template #body>
-      <div class="flex flex-col border-b transition border-divider">
+      <div class="flex flex-col border-b border-divider transition">
         <div class="flex items-center">
           <input
             id="command"
@@ -16,14 +16,14 @@
             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"
+            class="flex flex-1 bg-transparent px-6 py-5 text-base text-secondaryDark"
           />
           <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"
+        class="flex flex-1 flex-col divide-y divide-dividerLight overflow-y-auto border-b border-divider"
       >
         <div
           v-for="([sectionID, sectionResult], sectionIndex) in scoredResults"
@@ -31,7 +31,7 @@
           class="flex flex-col"
         >
           <h5
-            class="px-6 py-2 bg-primaryContrast z-10 text-secondaryLight sticky top-0"
+            class="sticky top-0 z-10 bg-primaryContrast px-6 py-2 text-secondaryLight"
           >
             {{ sectionResult.title }}
           </h5>
@@ -49,7 +49,7 @@
           :text="`${t('state.nothing_found')} ‟${search}”`"
         >
           <template #icon>
-            <icon-lucide-search class="pb-2 opacity-75 svg-icons" />
+            <icon-lucide-search class="svg-icons pb-2 opacity-75" />
           </template>
           <HoppButtonSecondary
             :label="t('action.clear')"
@@ -59,7 +59,7 @@
         </HoppSmartPlaceholder>
       </div>
       <div
-        class="flex flex-shrink-0 text-tiny text-secondaryLight p-4 justify-between whitespace-nowrap overflow-auto <sm:hidden"
+        class="flex flex-shrink-0 justify-between overflow-auto whitespace-nowrap p-4 text-tiny text-secondaryLight <sm:hidden"
       >
         <div class="flex items-center">
           <kbd class="shortcut-key">↑</kbd>

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

@@ -12,16 +12,16 @@
       @dragleave="ordering = false"
       @dragend="resetDragState"
     ></div>
-    <div class="flex flex-col relative">
+    <div class="relative flex flex-col">
       <div
-        class="absolute bg-accent opacity-0 pointer-events-none inset-0 z-1 transition"
+        class="z-1 pointer-events-none absolute inset-0 bg-accent opacity-0 transition"
         :class="{
           'opacity-25':
             dragging && notSameDestination && notSameParentDestination,
         }"
       ></div>
       <div
-        class="flex items-stretch group relative z-3 cursor-pointer pointer-events-auto"
+        class="z-3 group pointer-events-auto relative flex cursor-pointer items-stretch"
         :draggable="!hasNoTeamAccess"
         @dragstart="dragStart"
         @drop="handelDrop($event)"
@@ -36,11 +36,11 @@
         @contextmenu.prevent="options?.tippy.show()"
       >
         <div
-          class="flex items-center justify-center flex-1 min-w-0"
+          class="flex min-w-0 flex-1 items-center justify-center"
           @click="emit('toggle-children')"
         >
           <span
-            class="flex items-center justify-center px-4 pointer-events-none"
+            class="pointer-events-none flex items-center justify-center px-4"
           >
             <HoppSmartSpinner v-if="isCollLoading" />
             <component
@@ -51,7 +51,7 @@
             />
           </span>
           <span
-            class="flex flex-1 min-w-0 py-2 pr-2 transition pointer-events-none group-hover:text-secondaryDark"
+            class="pointer-events-none flex min-w-0 flex-1 py-2 pr-2 transition group-hover:text-secondaryDark"
           >
             <span class="truncate" :class="{ 'text-accent': isSelected }">
               {{ collectionName }}

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

@@ -26,7 +26,7 @@
             <div v-if="step.name === 'FILE_IMPORT'" class="space-y-4">
               <p class="flex items-center">
                 <span
-                  class="inline-flex items-center justify-center flex-shrink-0 mr-4 border-4 rounded-full border-primary text-dividerDark"
+                  class="mr-4 inline-flex flex-shrink-0 items-center justify-center rounded-full border-4 border-primary text-dividerDark"
                   :class="{
                     '!text-green-500': hasFile,
                   }"
@@ -38,14 +38,14 @@
                 </span>
               </p>
               <p
-                class="flex flex-col ml-10 border border-dashed rounded border-dividerDark"
+                class="ml-10 flex flex-col rounded border border-dashed border-dividerDark"
               >
                 <input
                   id="inputChooseFileToImportFrom"
                   ref="inputChooseFileToImportFrom"
                   name="inputChooseFileToImportFrom"
                   type="file"
-                  class="p-4 cursor-pointer transition file:transition file:cursor-pointer text-secondary hover:text-secondaryDark file:mr-2 file:py-2 file:px-4 file:rounded file:border-0 file:text-secondary hover:file:text-secondaryDark file:bg-primaryLight hover:file:bg-primaryDark"
+                  class="cursor-pointer p-4 text-secondary transition file:mr-2 file:cursor-pointer file:rounded file:border-0 file:bg-primaryLight file:px-4 file:py-2 file:text-secondary file:transition hover:text-secondaryDark hover:file:bg-primaryDark hover:file:text-secondaryDark"
                   :accept="step.metadata.acceptedFileTypes"
                   @change="onFileChange"
                 />
@@ -54,7 +54,7 @@
             <div v-else-if="step.name === 'URL_IMPORT'" class="space-y-4">
               <p class="flex items-center">
                 <span
-                  class="inline-flex items-center justify-center flex-shrink-0 mr-4 border-4 rounded-full border-primary text-dividerDark"
+                  class="mr-4 inline-flex flex-shrink-0 items-center justify-center rounded-full border-4 border-primary text-dividerDark"
                   :class="{
                     '!text-green-500': hasGist,
                   }"
@@ -65,7 +65,7 @@
                   {{ t(`${step.metadata.caption}`) }}
                 </span>
               </p>
-              <p class="flex flex-col ml-10">
+              <p class="ml-10 flex flex-col">
                 <input
                   v-model="inputChooseGistToImportFrom"
                   type="url"

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

@@ -1,7 +1,7 @@
 <template>
-  <div class="flex flex-col flex-1">
+  <div class="flex flex-1 flex-col">
     <div
-      class="sticky z-10 flex justify-between flex-1 border-b bg-primary border-dividerLight"
+      class="sticky z-10 flex flex-1 justify-between border-b border-dividerLight bg-primary"
       :style="
         saveRequest
           ? 'top: calc(var(--upper-primary-sticky-fold) - var(--line-height-body))'
@@ -31,7 +31,7 @@
         />
       </span>
     </div>
-    <div class="flex flex-col flex-1">
+    <div class="flex flex-1 flex-col">
       <HoppSmartTree :adapter="myAdapter">
         <template
           #content="{ node, toggleChildren, isOpen, highlightChildren }"
@@ -248,7 +248,7 @@
             :text="`${t('state.nothing_found')} ‟${filterText}”`"
           >
             <template #icon>
-              <icon-lucide-search class="pb-2 opacity-75 svg-icons" />
+              <icon-lucide-search class="svg-icons pb-2 opacity-75" />
             </template>
           </HoppSmartPlaceholder>
           <HoppSmartPlaceholder
@@ -258,10 +258,10 @@
             :text="t('empty.collections')"
           >
             <div class="flex flex-col items-center space-y-4">
-              <span class="text-secondaryLight text-center">
+              <span class="text-center text-secondaryLight">
                 {{ t("collection.import_or_create") }}
               </span>
-              <div class="flex gap-4 flex-col items-stretch">
+              <div class="flex flex-col items-stretch gap-4">
                 <HoppButtonPrimary
                   :icon="IconImport"
                   :label="t('import.title')"

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

@@ -13,7 +13,7 @@
       @dragend="resetDragState"
     ></div>
     <div
-      class="flex items-stretch group"
+      class="group flex items-stretch"
       :draggable="!hasNoTeamAccess"
       @drop="handelDrop"
       @dragstart="dragStart"
@@ -23,12 +23,13 @@
       @contextmenu.prevent="options?.tippy.show()"
     >
       <div
-        class="flex items-center justify-center flex-1 min-w-0 cursor-pointer pointer-events-auto"
+        class="pointer-events-auto flex min-w-0 flex-1 cursor-pointer items-center justify-center"
         @click="selectRequest()"
       >
         <span
-          class="flex items-center justify-center w-16 px-2 truncate pointer-events-none"
+          class="pointer-events-none flex w-16 items-center justify-center truncate px-2"
           :class="requestLabelColor"
+          :style="{ color: requestLabelColor }"
         >
           <component
             :is="IconCheckCircle"
@@ -37,12 +38,12 @@
             :class="{ 'text-accent': isSelected }"
           />
           <HoppSmartSpinner v-else-if="isRequestLoading" />
-          <span v-else class="font-semibold truncate text-tiny">
+          <span v-else class="truncate text-tiny font-semibold">
             {{ request.method }}
           </span>
         </span>
         <span
-          class="flex items-center flex-1 min-w-0 py-2 pr-2 pointer-events-none transition group-hover:text-secondaryDark"
+          class="pointer-events-none flex min-w-0 flex-1 items-center py-2 pr-2 transition group-hover:text-secondaryDark"
         >
           <span class="truncate" :class="{ 'text-accent': isSelected }">
             {{ request.name }}
@@ -50,15 +51,15 @@
           <span
             v-if="isActive"
             v-tippy="{ theme: 'tooltip' }"
-            class="relative h-1.5 w-1.5 flex flex-shrink-0 mx-3"
+            class="relative mx-3 flex h-1.5 w-1.5 flex-shrink-0"
             :title="`${t('collection.request_in_use')}`"
           >
             <span
-              class="absolute inline-flex flex-shrink-0 w-full h-full bg-green-500 rounded-full opacity-75 animate-ping"
+              class="absolute inline-flex h-full w-full flex-shrink-0 animate-ping rounded-full bg-green-500 opacity-75"
             >
             </span>
             <span
-              class="relative inline-flex flex-shrink-0 rounded-full h-1.5 w-1.5 bg-green-500"
+              class="relative inline-flex h-1.5 w-1.5 flex-shrink-0 rounded-full bg-green-500"
             ></span>
           </span>
         </span>

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

@@ -1,7 +1,7 @@
 <template>
-  <div class="flex flex-col flex-1">
+  <div class="flex flex-1 flex-col">
     <div
-      class="sticky z-10 flex justify-between flex-1 border-b bg-primary border-dividerLight"
+      class="sticky z-10 flex flex-1 justify-between border-b border-dividerLight bg-primary"
       :style="
         saveRequest
           ? 'top: calc(var(--upper-primary-sticky-fold) - var(--line-height-body))'
@@ -269,10 +269,10 @@
             @drop.stop
           >
             <div class="flex flex-col items-center space-y-4">
-              <span class="text-secondaryLight text-center">
+              <span class="text-center text-secondaryLight">
                 {{ t("collection.import_or_create") }}
               </span>
-              <div class="flex gap-4 flex-col items-stretch">
+              <div class="flex flex-col items-stretch gap-4">
                 <HoppButtonPrimary
                   :icon="IconImport"
                   :label="t('import.title')"

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

@@ -1,7 +1,7 @@
 <template>
   <div class="flex flex-col" :class="[{ 'bg-primaryLight': dragging }]">
     <div
-      class="flex items-stretch group"
+      class="group flex items-stretch"
       @dragover.prevent
       @drop.prevent="dropEvent"
       @dragover="dragging = true"
@@ -11,7 +11,7 @@
       @contextmenu.prevent="options.tippy.show()"
     >
       <span
-        class="flex items-center justify-center px-4 cursor-pointer"
+        class="flex cursor-pointer items-center justify-center px-4"
         @click="toggleShowChildren()"
       >
         <component
@@ -21,7 +21,7 @@
         />
       </span>
       <span
-        class="flex flex-1 min-w-0 py-2 pr-2 cursor-pointer transition group-hover:text-secondaryDark"
+        class="flex min-w-0 flex-1 cursor-pointer py-2 pr-2 transition group-hover:text-secondaryDark"
         @click="toggleShowChildren()"
       >
         <span class="truncate" :class="{ 'text-accent': isSelected }">
@@ -136,10 +136,10 @@
     </div>
     <div v-if="showChildren || isFiltered" class="flex">
       <div
-        class="bg-dividerLight cursor-nsResize flex ml-5.5 transform transition w-0.5 hover:bg-dividerDark hover:scale-x-125"
+        class="ml-[1.375rem] flex w-0.5 transform cursor-nsResize bg-dividerLight transition hover:scale-x-125 hover:bg-dividerDark"
         @click="toggleShowChildren()"
       ></div>
-      <div class="flex flex-col flex-1 truncate">
+      <div class="flex flex-1 flex-col truncate">
         <CollectionsGraphqlFolder
           v-for="(folder, index) in collection.folders"
           :key="`folder-${String(index)}`"

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

@@ -1,7 +1,7 @@
 <template>
   <div class="flex flex-col" :class="[{ 'bg-primaryLight': dragging }]">
     <div
-      class="flex items-stretch group"
+      class="group flex items-stretch"
       @dragover.prevent
       @drop.prevent="dropEvent"
       @dragover="dragging = true"
@@ -11,7 +11,7 @@
       @contextmenu.prevent="options.tippy.show()"
     >
       <span
-        class="flex items-center justify-center px-4 cursor-pointer"
+        class="flex cursor-pointer items-center justify-center px-4"
         @click="toggleShowChildren()"
       >
         <component
@@ -21,7 +21,7 @@
         />
       </span>
       <span
-        class="flex flex-1 min-w-0 py-2 pr-2 cursor-pointer transition group-hover:text-secondaryDark"
+        class="flex min-w-0 flex-1 cursor-pointer py-2 pr-2 transition group-hover:text-secondaryDark"
         @click="toggleShowChildren()"
       >
         <span class="truncate" :class="{ 'text-accent': isSelected }">
@@ -128,10 +128,10 @@
     </div>
     <div v-if="showChildren || isFiltered" class="flex">
       <div
-        class="bg-dividerLight cursor-nsResize flex ml-5.5 transform transition w-0.5 hover:bg-dividerDark hover:scale-x-125"
+        class="ml-[1.375rem] flex w-0.5 transform cursor-nsResize bg-dividerLight transition hover:scale-x-125 hover:bg-dividerDark"
         @click="toggleShowChildren()"
       ></div>
-      <div class="flex flex-col flex-1 truncate">
+      <div class="flex flex-1 flex-col truncate">
         <!-- Referring to this component only (this is recursive) -->
         <Folder
           v-for="(subFolder, subFolderIndex) in folder.folders"

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

@@ -258,7 +258,7 @@ const importFromJSON = () => {
   inputChooseFileToImportFrom.value.value = ""
 }
 
-const exportJSON = async () => {
+const exportJSON = () => {
   const dataToWrite = collectionJson.value
 
   const parsedCollections = JSON.parse(dataToWrite)
@@ -268,32 +268,24 @@ const exportJSON = async () => {
   }
 
   const file = new Blob([dataToWrite], { type: "application/json" })
+  const a = document.createElement("a")
   const url = URL.createObjectURL(file)
+  a.href = url
 
-  const filename = `${url.split("/").pop()!.split("#")[0].split("?")[0]}.json`
-
-  URL.revokeObjectURL(url)
-
-  const result = await platform.io.saveFileWithDialog({
-    data: dataToWrite,
-    contentType: "application/json",
-    suggestedFilename: filename,
-    filters: [
-      {
-        name: "Hoppscotch Collection JSON file",
-        extensions: ["json"],
-      },
-    ],
+  platform?.analytics?.logEvent({
+    type: "HOPP_EXPORT_COLLECTION",
+    exporter: "json",
+    platform: "gql",
   })
 
-  if (result.type === "unknown" || result.type === "saved") {
-    platform?.analytics?.logEvent({
-      type: "HOPP_EXPORT_COLLECTION",
-      exporter: "json",
-      platform: "gql",
-    })
-
-    toast.success(t("state.download_started").toString())
-  }
+  // TODO: get uri from meta
+  a.download = `${url.split("/").pop()!.split("#")[0].split("?")[0]}.json`
+  document.body.appendChild(a)
+  a.click()
+  toast.success(t("state.download_started").toString())
+  setTimeout(() => {
+    document.body.removeChild(a)
+    URL.revokeObjectURL(url)
+  }, 1000)
 }
 </script>

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

@@ -1,7 +1,7 @@
 <template>
   <div class="flex flex-col" :class="[{ 'bg-primaryLight': dragging }]">
     <div
-      class="flex items-stretch group"
+      class="group flex items-stretch"
       draggable="true"
       @dragstart="dragStart"
       @dragover.stop
@@ -10,7 +10,7 @@
       @contextmenu.prevent="options.tippy.show()"
     >
       <span
-        class="flex items-center justify-center w-16 px-2 truncate cursor-pointer"
+        class="flex w-16 cursor-pointer items-center justify-center truncate px-2"
         @click="selectRequest()"
       >
         <component
@@ -20,7 +20,7 @@
         />
       </span>
       <span
-        class="flex items-center flex-1 min-w-0 py-2 pr-2 cursor-pointer transition group-hover:text-secondaryDark"
+        class="flex min-w-0 flex-1 cursor-pointer items-center py-2 pr-2 transition group-hover:text-secondaryDark"
         @click="selectRequest()"
       >
         <span class="truncate" :class="{ 'text-accent': isSelected }">
@@ -29,15 +29,15 @@
         <span
           v-if="isActive"
           v-tippy="{ theme: 'tooltip' }"
-          class="relative h-1.5 w-1.5 flex flex-shrink-0 mx-3"
+          class="relative mx-3 flex h-1.5 w-1.5 flex-shrink-0"
           :title="`${t('collection.request_in_use')}`"
         >
           <span
-            class="absolute inline-flex flex-shrink-0 w-full h-full bg-green-500 rounded-full opacity-75 animate-ping"
+            class="absolute inline-flex h-full w-full flex-shrink-0 animate-ping rounded-full bg-green-500 opacity-75"
           >
           </span>
           <span
-            class="relative inline-flex flex-shrink-0 rounded-full h-1.5 w-1.5 bg-green-500"
+            class="relative inline-flex h-1.5 w-1.5 flex-shrink-0 rounded-full bg-green-500"
           ></span>
         </span>
       </span>

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

@@ -1,7 +1,7 @@
 <template>
   <div :class="{ 'rounded border border-divider': saveRequest }">
     <div
-      class="sticky z-10 flex flex-col flex-shrink-0 overflow-x-auto rounded-t bg-primary"
+      class="sticky z-10 flex flex-shrink-0 flex-col overflow-x-auto rounded-t bg-primary"
       :style="
         saveRequest ? 'top: calc(-1 * var(--line-height-body))' : 'top: 0'
       "
@@ -11,10 +11,10 @@
         type="search"
         autocomplete="off"
         :placeholder="t('action.search')"
-        class="py-2 pl-4 pr-2 bg-transparent !border-0"
+        class="!border-0 bg-transparent py-2 pl-4 pr-2"
       />
       <div
-        class="flex justify-between flex-1 flex-shrink-0 border-y bg-primary border-dividerLight"
+        class="flex flex-1 flex-shrink-0 justify-between border-y border-dividerLight bg-primary"
       >
         <HoppButtonSecondary
           :icon="IconPlus"
@@ -67,10 +67,10 @@
       :text="t('empty.collections')"
     >
       <div class="flex flex-col items-center space-y-4">
-        <span class="text-secondaryLight text-center">
+        <span class="text-center text-secondaryLight">
           {{ t("collection.import_or_create") }}
         </span>
-        <div class="flex gap-4 flex-col items-stretch">
+        <div class="flex flex-col items-stretch gap-4">
           <HoppButtonPrimary
             :icon="IconImport"
             :label="t('import.title')"
@@ -93,7 +93,7 @@
       :text="`${t('state.nothing_found')} ‟${filterText}”`"
     >
       <template #icon>
-        <icon-lucide-search class="pb-2 opacity-75 svg-icons" />
+        <icon-lucide-search class="svg-icons pb-2 opacity-75" />
       </template>
     </HoppSmartPlaceholder>
     <CollectionsGraphqlAdd

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

@@ -11,19 +11,20 @@
     @dragend="draggingToRoot = false"
   >
     <div
-      class="sticky z-10 flex flex-col flex-shrink-0 overflow-x-auto border-b bg-primary border-dividerLight"
+      class="sticky z-10 flex flex-shrink-0 flex-col overflow-x-auto border-b border-dividerLight bg-primary"
       :class="{ 'rounded-t': saveRequest }"
       :style="
         saveRequest ? 'top: calc(-1 * var(--line-height-body))' : 'top: 0'
       "
     >
       <WorkspaceCurrent :section="t('tab.collections')" />
-      <input
+
+      <HoppSmartInput
         v-model="filterTexts"
-        type="search"
-        autocomplete="off"
-        class="flex w-full p-4 py-2 bg-transparent h-8"
         :placeholder="t('action.search')"
+        input-styles="py-2 pl-4 pr-2 bg-transparent !border-0"
+        type="search"
+        :autofocus="false"
         :disabled="collectionsType.type === 'team-collections'"
       />
     </div>
@@ -85,12 +86,12 @@
       @display-modal-import-export="displayModalImportExport(true)"
     />
     <div
-      class="hidden bg-primaryDark flex-col flex-1 items-center py-15 justify-center px-4 text-secondaryLight"
+      class="py-15 hidden flex-1 flex-col items-center justify-center bg-primaryDark px-4 text-secondaryLight"
       :class="{
         '!flex': draggingToRoot && currentReorderingStatus.type !== 'request',
       }"
     >
-      <icon-lucide-list-end class="svg-icons !w-8 !h-8" />
+      <icon-lucide-list-end class="svg-icons !h-8 !w-8" />
     </div>
     <CollectionsAdd
       :show="showModalAdd"
@@ -1866,25 +1867,28 @@ const getJSONCollection = async () => {
  * @param collectionJSON - JSON string of the collection
  * @param name - Name of the collection set as the file name
  */
-const initializeDownloadCollection = async (
+const initializeDownloadCollection = (
   collectionJSON: string,
   name: string | null
 ) => {
-  const result = await platform.io.saveFileWithDialog({
-    data: collectionJSON,
-    contentType: "application/json",
-    suggestedFilename: `${name ?? "collection"}.json`,
-    filters: [
-      {
-        name: "Hoppscotch Collection JSON file",
-        extensions: ["json"],
-      },
-    ],
-  })
+  const file = new Blob([collectionJSON], { type: "application/json" })
+  const a = document.createElement("a")
+  const url = URL.createObjectURL(file)
+  a.href = url
 
-  if (result.type === "unknown" || result.type === "saved") {
-    toast.success(t("state.download_started").toString())
+  if (name) {
+    a.download = `${name}.json`
+  } else {
+    a.download = `${url.split("/").pop()!.split("#")[0].split("?")[0]}.json`
   }
+
+  document.body.appendChild(a)
+  a.click()
+  toast.success(t("state.download_started").toString())
+  setTimeout(() => {
+    document.body.removeChild(a)
+    URL.revokeObjectURL(url)
+  }, 1000)
 }
 
 /**
@@ -1913,14 +1917,11 @@ const exportData = async (
           exportLoading.value = false
           return
         },
-        async (coll) => {
+        (coll) => {
           const hoppColl = teamCollToHoppRESTColl(coll)
           const collectionJSONString = JSON.stringify(hoppColl)
 
-          await initializeDownloadCollection(
-            collectionJSONString,
-            hoppColl.name
-          )
+          initializeDownloadCollection(collectionJSONString, hoppColl.name)
           exportLoading.value = false
         }
       )

packages/hoppscotch-common/src/components/cookies/AllModal.vue

@@ -1,269 +0,0 @@
-<template>
-  <HoppSmartModal
-    v-if="show"
-    dialog
-    :title="t('app.cookies')"
-    aria-modal="true"
-    @close="hideModal"
-  >
-    <template #body>
-      <HoppSmartPlaceholder
-        v-if="!currentInterceptorSupportsCookies"
-        :text="t('cookies.modal.interceptor_no_support')"
-      >
-        <AppInterceptor class="p-2 border rounded border-dividerLight" />
-      </HoppSmartPlaceholder>
-      <div v-else class="flex flex-col">
-        <div
-          class="flex bg-primary space-x-2 border-b sticky border-dividerLight -mx-4 px-4 py-4 -mt-4"
-          style="top: calc(-1 * var(--line-height-body))"
-        >
-          <HoppSmartInput
-            v-model="newDomainText"
-            class="flex-1"
-            :placeholder="t('cookies.modal.new_domain_name')"
-            @keyup.enter="addNewDomain"
-          />
-          <HoppButtonSecondary
-            outline
-            filled
-            :label="t('action.add')"
-            @click="addNewDomain"
-          />
-        </div>
-        <div class="flex flex-col space-y-4">
-          <HoppSmartPlaceholder
-            v-if="workingCookieJar.size === 0"
-            :src="`/images/states/${colorMode.value}/blockchain.svg`"
-            :alt="`${t('cookies.modal.empty_domains')}`"
-            :text="t('cookies.modal.empty_domains')"
-            class="mt-6"
-          >
-          </HoppSmartPlaceholder>
-          <div
-            v-for="[domain, entries] in workingCookieJar.entries()"
-            v-else
-            :key="domain"
-            class="flex flex-col"
-          >
-            <div class="flex items-center justify-between flex-1">
-              <label for="cookiesList" class="p-4">
-                {{ domain }}
-              </label>
-              <div class="flex">
-                <HoppButtonSecondary
-                  v-tippy="{ theme: 'tooltip' }"
-                  :title="t('action.delete')"
-                  :icon="IconTrash2"
-                  @click="deleteDomain(domain)"
-                />
-                <HoppButtonSecondary
-                  v-tippy="{ theme: 'tooltip' }"
-                  :title="t('add.new')"
-                  :icon="IconPlus"
-                  @click="addCookieToDomain(domain)"
-                />
-              </div>
-            </div>
-            <div class="border rounded border-divider">
-              <div class="divide-y divide-dividerLight">
-                <div
-                  v-if="entries.length === 0"
-                  class="flex flex-col gap-2 p-4 items-center"
-                >
-                  {{ t("cookies.modal.no_cookies_in_domain") }}
-                </div>
-                <template v-else>
-                  <div
-                    v-for="(entry, entryIndex) in entries"
-                    :key="`${entry}-${entryIndex}`"
-                    class="flex divide-x divide-dividerLight"
-                  >
-                    <input
-                      class="flex flex-1 px-4 py-2 bg-transparent"
-                      :value="entry"
-                      readonly
-                    />
-                    <HoppButtonSecondary
-                      v-tippy="{ theme: 'tooltip' }"
-                      :title="t('action.edit')"
-                      :icon="IconEdit"
-                      @click="editCookie(domain, entryIndex, entry)"
-                    />
-                    <HoppButtonSecondary
-                      v-tippy="{ theme: 'tooltip' }"
-                      :title="t('action.remove')"
-                      :icon="IconTrash"
-                      color="red"
-                      @click="deleteCookie(domain, entryIndex)"
-                    />
-                  </div>
-                </template>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </template>
-    <template v-if="currentInterceptorSupportsCookies" #footer>
-      <span class="flex space-x-2">
-        <HoppButtonPrimary
-          v-focus
-          :label="t('action.save')"
-          outline
-          @click="saveCookieChanges"
-        />
-        <HoppButtonSecondary
-          :label="t('action.cancel')"
-          outline
-          filled
-          @click="cancelCookieChanges"
-        />
-      </span>
-      <HoppButtonSecondary
-        :label="t('action.clear_all')"
-        outline
-        filled
-        @click="clearAllDomains"
-      />
-    </template>
-  </HoppSmartModal>
-  <CookiesEditCookie
-    :show="!!showEditModalFor"
-    :entry="showEditModalFor"
-    @save-cookie="saveCookie"
-    @hide-modal="showEditModalFor = null"
-  />
-</template>
-
-<script setup lang="ts">
-import { useI18n } from "@composables/i18n"
-import { useService } from "dioc/vue"
-import { CookieJarService } from "~/services/cookie-jar.service"
-import IconTrash from "~icons/lucide/trash"
-import IconEdit from "~icons/lucide/edit"
-import IconTrash2 from "~icons/lucide/trash-2"
-import IconPlus from "~icons/lucide/plus"
-import { cloneDeep } from "lodash-es"
-import { ref, watch, computed } from "vue"
-import { InterceptorService } from "~/services/interceptor.service"
-import { EditCookieConfig } from "./EditCookie.vue"
-import { useColorMode } from "@composables/theming"
-import { useToast } from "@composables/toast"
-
-const props = defineProps<{
-  show: boolean
-}>()
-
-const emit = defineEmits<{
-  (e: "hide-modal"): void
-}>()
-
-const t = useI18n()
-const colorMode = useColorMode()
-const toast = useToast()
-
-const newDomainText = ref("")
-
-const interceptorService = useService(InterceptorService)
-const cookieJarService = useService(CookieJarService)
-
-const workingCookieJar = ref(cloneDeep(cookieJarService.cookieJar.value))
-
-const currentInterceptorSupportsCookies = computed(() => {
-  const currentInterceptor = interceptorService.currentInterceptor.value
-
-  if (!currentInterceptor) return true
-
-  return currentInterceptor.supportsCookies ?? false
-})
-
-function addNewDomain() {
-  if (newDomainText.value === "" || /^\s+$/.test(newDomainText.value)) {
-    toast.error(`${t("cookies.modal.empty_domain")}`)
-    return
-  }
-
-  workingCookieJar.value.set(newDomainText.value, [])
-  newDomainText.value = ""
-}
-
-function deleteDomain(domain: string) {
-  workingCookieJar.value.delete(domain)
-}
-
-function addCookieToDomain(domain: string) {
-  showEditModalFor.value = { type: "create", domain }
-}
-
-function clearAllDomains() {
-  workingCookieJar.value = new Map()
-  toast.success(`${t("state.cleared")}`)
-}
-
-watch(
-  () => props.show,
-  (show) => {
-    if (show) {
-      workingCookieJar.value = cloneDeep(cookieJarService.cookieJar.value)
-    }
-  }
-)
-
-const showEditModalFor = ref<EditCookieConfig | null>(null)
-
-function saveCookieChanges() {
-  cookieJarService.cookieJar.value = workingCookieJar.value
-  hideModal()
-}
-
-function cancelCookieChanges() {
-  hideModal()
-}
-
-function editCookie(domain: string, entryIndex: number, cookieEntry: string) {
-  showEditModalFor.value = {
-    type: "edit",
-    domain,
-    entryIndex,
-    currentCookieEntry: cookieEntry,
-  }
-}
-
-function deleteCookie(domain: string, entryIndex: number) {
-  const entry = workingCookieJar.value.get(domain)
-
-  if (entry) {
-    entry.splice(entryIndex, 1)
-  }
-}
-
-function saveCookie(cookie: string) {
-  if (showEditModalFor.value?.type === "create") {
-    const { domain } = showEditModalFor.value
-
-    const entry = workingCookieJar.value.get(domain)!
-    entry.push(cookie)
-
-    showEditModalFor.value = null
-
-    return
-  }
-
-  if (showEditModalFor.value?.type !== "edit") return
-
-  const { domain, entryIndex } = showEditModalFor.value!
-
-  const entry = workingCookieJar.value.get(domain)
-
-  if (entry) {
-    entry[entryIndex] = cookie
-  }
-
-  showEditModalFor.value = null
-}
-
-const hideModal = () => {
-  emit("hide-modal")
-}
-</script>

packages/hoppscotch-common/src/components/cookies/EditCookie.vue

@@ -1,195 +0,0 @@
-<template>
-  <HoppSmartModal
-    v-if="show"
-    dialog
-    :title="t('cookies.modal.set')"
-    @close="hideModal"
-  >
-    <template #body>
-      <div class="border rounded border-dividerLight">
-        <div class="flex flex-col">
-          <div class="flex items-center justify-between pl-4">
-            <label class="font-semibold truncate text-secondaryLight">
-              {{ t("cookies.modal.cookie_string") }}
-            </label>
-            <div class="flex items-center">
-              <HoppButtonSecondary
-                v-tippy="{ theme: 'tooltip' }"
-                :title="t('action.clear_all')"
-                :icon="IconTrash2"
-                @click="clearContent()"
-              />
-              <HoppButtonSecondary
-                v-tippy="{ theme: 'tooltip' }"
-                :title="t('state.linewrap')"
-                :class="{ '!text-accent': linewrapEnabled }"
-                :icon="IconWrapText"
-                @click.prevent="linewrapEnabled = !linewrapEnabled"
-              />
-              <HoppButtonSecondary
-                v-tippy="{ theme: 'tooltip', allowHTML: true }"
-                :title="t('action.download_file')"
-                :icon="downloadIcon"
-                @click="downloadResponse"
-              />
-              <HoppButtonSecondary
-                v-tippy="{ theme: 'tooltip', allowHTML: true }"
-                :title="t('action.copy')"
-                :icon="copyIcon"
-                @click="copyResponse"
-              />
-            </div>
-          </div>
-          <div class="h-46">
-            <div
-              ref="cookieEditor"
-              class="h-full border-t rounded-b border-dividerLight"
-            ></div>
-          </div>
-        </div>
-      </div>
-    </template>
-    <template #footer>
-      <div class="flex space-x-2">
-        <HoppButtonPrimary
-          v-focus
-          :label="t('action.save')"
-          outline
-          @click="saveCookieChange"
-        />
-        <HoppButtonSecondary
-          :label="t('action.cancel')"
-          outline
-          filled
-          @click="cancelCookieChange"
-        />
-      </div>
-      <span class="flex">
-        <HoppButtonSecondary
-          :icon="pasteIcon"
-          :label="`${t('action.paste')}`"
-          filled
-          outline
-          @click="handlePaste"
-        />
-      </span>
-    </template>
-  </HoppSmartModal>
-</template>
-
-<script lang="ts">
-export type EditCookieConfig =
-  | { type: "create"; domain: string }
-  | {
-      type: "edit"
-      domain: string
-      entryIndex: number
-      currentCookieEntry: string
-    }
-</script>
-
-<script setup lang="ts">
-import { useI18n } from "@composables/i18n"
-import { useCodemirror } from "~/composables/codemirror"
-import { watch, ref, reactive } from "vue"
-import { refAutoReset } from "@vueuse/core"
-import IconWrapText from "~icons/lucide/wrap-text"
-import IconClipboard from "~icons/lucide/clipboard"
-import IconCheck from "~icons/lucide/check"
-import IconTrash2 from "~icons/lucide/trash-2"
-import { useToast } from "~/composables/toast"
-import {
-  useCopyResponse,
-  useDownloadResponse,
-} from "~/composables/lens-actions"
-
-// TODO: Build Managed Mode!
-
-const props = defineProps<{
-  show: boolean
-
-  entry: EditCookieConfig | null
-}>()
-
-const emit = defineEmits<{
-  (e: "save-cookie", cookie: string): void
-  (e: "hide-modal"): void
-}>()
-
-const t = useI18n()
-
-const toast = useToast()
-
-const cookieEditor = ref<HTMLElement>()
-const rawCookieString = ref("")
-const linewrapEnabled = ref(true)
-
-useCodemirror(
-  cookieEditor,
-  rawCookieString,
-  reactive({
-    extendedEditorConfig: {
-      mode: "text/plain",
-      placeholder: `${t("cookies.modal.enter_cookie_string")}`,
-      lineWrapping: linewrapEnabled,
-    },
-    linter: null,
-    completer: null,
-    environmentHighlights: false,
-  })
-)
-
-const pasteIcon = refAutoReset<typeof IconClipboard | typeof IconCheck>(
-  IconClipboard,
-  1000
-)
-
-watch(
-  () => props.entry,
-  () => {
-    if (!props.entry) return
-
-    if (props.entry.type === "create") {
-      rawCookieString.value = ""
-      return
-    }
-
-    rawCookieString.value = props.entry.currentCookieEntry
-  }
-)
-
-function hideModal() {
-  emit("hide-modal")
-}
-
-function cancelCookieChange() {
-  hideModal()
-}
-
-async function handlePaste() {
-  try {
-    const text = await navigator.clipboard.readText()
-    if (text) {
-      rawCookieString.value = text
-      pasteIcon.value = IconCheck
-    }
-  } catch (e) {
-    console.error("Failed to copy: ", e)
-    toast.error(t("profile.no_permission").toString())
-  }
-}
-
-function saveCookieChange() {
-  emit("save-cookie", rawCookieString.value)
-}
-
-const { copyIcon, copyResponse } = useCopyResponse(rawCookieString)
-const { downloadIcon, downloadResponse } = useDownloadResponse(
-  "",
-  rawCookieString
-)
-
-function clearContent() {
-  rawCookieString.value = ""
-}
-</script>

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

@@ -5,9 +5,9 @@
     @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">{{
+      <div class="flex flex-1 flex-col space-y-4">
+        <div class="ml-2 flex items-center space-x-8">
+          <label for="name" class="min-w-10 font-semibold">{{
             t("environment.name")
           }}</label>
           <input
@@ -17,8 +17,8 @@
             class="input"
           />
         </div>
-        <div class="flex items-center space-x-8 ml-2">
-          <label for="value" class="font-semibold min-w-10">{{
+        <div class="ml-2 flex items-center space-x-8">
+          <label for="value" class="min-w-10 font-semibold">{{
             t("environment.value")
           }}</label>
           <input
@@ -28,17 +28,17 @@
             :placeholder="t('environment.value')"
           />
         </div>
-        <div class="flex items-center space-x-8 ml-2">
-          <label for="scope" class="font-semibold min-w-10">
+        <div class="ml-2 flex items-center space-x-8">
+          <label for="scope" class="min-w-10 font-semibold">
             {{ t("environment.scope") }}
           </label>
           <div
-            class="relative flex flex-1 flex-col border border-divider rounded focus-visible:border-dividerDark"
+            class="relative flex flex-1 flex-col rounded border border-divider 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 v-if="replaceWithVariable" class="mt-3 flex space-x-2">
           <div class="min-w-18" />
           <HoppSmartCheckbox
             :on="replaceWithVariable"

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

@@ -375,7 +375,7 @@ const importFromPostman = ({
   importFromHoppscotch(environments)
 }
 
-const exportJSON = async () => {
+const exportJSON = () => {
   const dataToWrite = environmentJson.value
 
   const parsedCollections = JSON.parse(dataToWrite)
@@ -385,27 +385,19 @@ const exportJSON = async () => {
   }
 
   const file = new Blob([dataToWrite], { type: "application/json" })
+  const a = document.createElement("a")
   const url = URL.createObjectURL(file)
+  a.href = url
 
-  const filename = `${url.split("/").pop()!.split("#")[0].split("?")[0]}.json`
-
-  URL.revokeObjectURL(url)
-
-  const result = await platform.io.saveFileWithDialog({
-    data: dataToWrite,
-    contentType: "application/json",
-    suggestedFilename: filename,
-    filters: [
-      {
-        name: "JSON file",
-        extensions: ["json"],
-      },
-    ],
-  })
-
-  if (result.type === "unknown" || result.type === "saved") {
-    toast.success(t("state.download_started").toString())
-  }
+  // TODO: get uri from meta
+  a.download = `${url.split("/").pop()!.split("#")[0].split("?")[0]}.json`
+  document.body.appendChild(a)
+  a.click()
+  toast.success(t("state.download_started").toString())
+  setTimeout(() => {
+    document.body.removeChild(a)
+    URL.revokeObjectURL(url)
+  }, 1000)
 }
 
 const getErrorMessage = (err: GQLError<string>) => {

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

@@ -20,7 +20,7 @@
                 : `${t('environment.select')}`
               : ''
           "
-          class="flex-1 !justify-start pr-8 rounded-none"
+          class="flex-1 !justify-start rounded-none pr-8"
         />
       </span>
       <template #content="{ hide }">
@@ -66,7 +66,7 @@
           />
           <HoppSmartTabs
             v-model="selectedEnvTab"
-            :styles="`sticky overflow-x-auto my-2 border border-divider rounded flex-shrink-0 z-10 top-0 bg-primary ${
+            :styles="`sticky overflow-x-auto my-2 border border-divider rounded flex-shrink-0 z-0 top-0 bg-primary ${
               !isTeamSelected || workspace.type === 'personal'
                 ? 'bg-primaryLight'
                 : ''
@@ -101,7 +101,7 @@
                 <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"
+                  class="mb-2 inline-flex h-16 w-16 flex-col object-contain object-center"
                   :alt="`${t('empty.environments')}`"
                 />
                 <span class="pb-2 text-center">
@@ -148,7 +148,7 @@
                   <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"
+                    class="mb-2 inline-flex h-16 w-16 flex-col object-contain object-center"
                     :alt="`${t('empty.environments')}`"
                   />
                   <span class="pb-2 text-center">
@@ -160,7 +160,7 @@
                 v-if="!teamListLoading && teamAdapterError"
                 class="flex flex-col items-center py-4"
               >
-                <icon-lucide-help-circle class="mb-4 svg-icons" />
+                <icon-lucide-help-circle class="svg-icons mb-4" />
                 {{ getErrorMessage(teamAdapterError) }}
               </div>
             </HoppSmartTab>
@@ -190,7 +190,7 @@
             @keyup.escape="hide()"
           >
             <div
-              class="sticky top-0 font-semibold truncate flex items-center justify-between text-secondaryDark bg-primary border border-divider rounded pl-4"
+              class="sticky top-0 flex items-center justify-between truncate rounded border border-divider bg-primary pl-4 font-semibold text-secondaryDark"
             >
               {{ t("environment.global_variables") }}
               <HoppButtonSecondary
@@ -205,12 +205,12 @@
                 "
               />
             </div>
-            <div class="my-2 flex flex-col flex-1 space-y-2 pl-4 pr-2">
+            <div class="my-2 flex flex-1 flex-col space-y-2 pl-4 pr-2">
               <div class="flex flex-1 space-x-4">
-                <span class="w-1/4 min-w-32 truncate text-tiny font-semibold">
+                <span class="min-w-32 w-1/4 truncate text-tiny font-semibold">
                   {{ t("environment.name") }}
                 </span>
-                <span class="w-full min-w-32 truncate text-tiny font-semibold">
+                <span class="min-w-32 w-full truncate text-tiny font-semibold">
                   {{ t("environment.value") }}
                 </span>
               </div>
@@ -219,10 +219,10 @@
                 :key="index"
                 class="flex flex-1 space-x-4"
               >
-                <span class="text-secondaryLight w-1/4 min-w-32 truncate">
+                <span class="min-w-32 w-1/4 truncate text-secondaryLight">
                   {{ variable.key }}
                 </span>
-                <span class="text-secondaryLight w-full min-w-32 truncate">
+                <span class="min-w-32 w-full truncate text-secondaryLight">
                   {{ variable.value }}
                 </span>
               </div>
@@ -231,7 +231,7 @@
               </div>
             </div>
             <div
-              class="sticky top-0 mt-2 font-semibold truncate flex items-center justify-between text-secondaryDark bg-primary border border-divider rounded pl-4"
+              class="sticky top-0 mt-2 flex items-center justify-between truncate rounded border border-divider bg-primary pl-4 font-semibold text-secondaryDark"
               :class="{
                 'bg-primaryLight': !selectedEnv.variables,
               }"
@@ -252,16 +252,16 @@
             </div>
             <div
               v-if="selectedEnv.type === 'NO_ENV_SELECTED'"
-              class="text-secondaryLight my-2 flex flex-col flex-1 pl-4"
+              class="my-2 flex flex-1 flex-col pl-4 text-secondaryLight"
             >
               {{ t("environment.no_active_environment") }}
             </div>
-            <div v-else class="my-2 flex flex-col flex-1 space-y-2 pl-4 pr-2">
+            <div v-else class="my-2 flex flex-1 flex-col space-y-2 pl-4 pr-2">
               <div class="flex flex-1 space-x-4">
-                <span class="w-1/4 min-w-32 truncate text-tiny font-semibold">
+                <span class="min-w-32 w-1/4 truncate text-tiny font-semibold">
                   {{ t("environment.name") }}
                 </span>
-                <span class="w-full min-w-32 truncate text-tiny font-semibold">
+                <span class="min-w-32 w-full truncate text-tiny font-semibold">
                   {{ t("environment.value") }}
                 </span>
               </div>
@@ -270,10 +270,10 @@
                 :key="index"
                 class="flex flex-1 space-x-4"
               >
-                <span class="text-secondaryLight w-1/4 min-w-32 truncate">
+                <span class="min-w-32 w-1/4 truncate text-secondaryLight">
                   {{ variable.key }}
                 </span>
-                <span class="text-secondaryLight w-full min-w-32 truncate">
+                <span class="min-w-32 w-full truncate text-secondaryLight">
                   {{ variable.value }}
                 </span>
               </div>

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

@@ -1,7 +1,7 @@
 <template>
   <div>
     <div
-      class="sticky top-0 z-10 flex flex-col flex-shrink-0 overflow-x-auto bg-primary"
+      class="sticky top-0 z-10 flex flex-shrink-0 flex-col overflow-x-auto bg-primary"
     >
       <WorkspaceCurrent :section="t('tab.environments')" />
       <EnvironmentsMyEnvironment

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

@@ -16,7 +16,7 @@
           @submit="saveEnvironment"
         />
 
-        <div class="flex items-center justify-between flex-1">
+        <div class="flex flex-1 items-center justify-between">
           <label for="variableList" class="p-4">
             {{ t("environment.variable_list") }}
           </label>
@@ -37,11 +37,11 @@
         </div>
         <div
           v-if="evnExpandError"
-          class="w-full px-4 py-2 mb-2 overflow-auto font-mono text-red-400 whitespace-normal rounded bg-primaryLight"
+          class="mb-2 w-full overflow-auto whitespace-normal rounded bg-primaryLight px-4 py-2 font-mono text-red-400"
         >
           {{ t("environment.nested_overflow") }}
         </div>
-        <div class="border rounded divide-y divide-dividerLight border-divider">
+        <div class="divide-y divide-dividerLight rounded border border-divider">
           <div
             v-for="({ id, env }, index) in vars"
             :key="`variable-${id}-${index}`"
@@ -50,7 +50,7 @@
             <input
               v-model="env.key"
               v-focus
-              class="flex flex-1 px-4 py-2 bg-transparent"
+              class="flex flex-1 bg-transparent px-4 py-2"
               :placeholder="`${t('count.variable', { count: index + 1 })}`"
               :name="'param' + index"
             />

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

@@ -1,24 +1,24 @@
 <template>
   <div
-    class="flex items-stretch group"
+    class="group flex items-stretch"
     @contextmenu.prevent="options!.tippy.show()"
   >
     <span
       v-if="environmentIndex === 'Global'"
-      class="flex items-center justify-center px-4 cursor-pointer"
+      class="flex cursor-pointer items-center justify-center px-4"
       @click="emit('edit-environment')"
     >
       <icon-lucide-globe class="svg-icons" />
     </span>
     <span
       v-else
-      class="flex items-center justify-center px-4 cursor-pointer"
+      class="flex cursor-pointer items-center justify-center px-4"
       @click="emit('edit-environment')"
     >
       <icon-lucide-layers class="svg-icons" />
     </span>
     <span
-      class="flex flex-1 min-w-0 py-2 pr-2 cursor-pointer transition group-hover:text-secondaryDark"
+      class="flex min-w-0 flex-1 cursor-pointer py-2 pr-2 transition group-hover:text-secondaryDark"
       @click="emit('edit-environment')"
     >
       <span class="truncate">

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

@@ -1,7 +1,7 @@
 <template>
   <div>
     <div
-      class="sticky z-10 flex justify-between flex-1 flex-shrink-0 overflow-x-auto border-b top-upperPrimaryStickyFold border-dividerLight bg-primary"
+      class="sticky top-upperPrimaryStickyFold z-10 flex flex-1 flex-shrink-0 justify-between overflow-x-auto border-b border-dividerLight bg-primary"
     >
       <HoppButtonSecondary
         :icon="IconPlus"
@@ -39,10 +39,10 @@
       :text="t('empty.environments')"
     >
       <div class="flex flex-col items-center space-y-4">
-        <span class="text-secondaryLight text-center">
+        <span class="text-center text-secondaryLight">
           {{ t("environment.import_or_create") }}
         </span>
-        <div class="flex gap-4 flex-col items-stretch">
+        <div class="flex flex-col items-stretch gap-4">
           <HoppButtonPrimary
             :icon="IconImport"
             :label="t('import.title')"

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

@@ -16,7 +16,7 @@
           @submit="saveEnvironment"
         />
 
-        <div class="flex items-center justify-between flex-1">
+        <div class="flex flex-1 items-center justify-between">
           <label for="variableList" class="p-4">
             {{ t("environment.variable_list") }}
           </label>
@@ -37,11 +37,11 @@
         </div>
         <div
           v-if="evnExpandError"
-          class="w-full px-4 py-2 mb-2 overflow-auto font-mono text-red-400 whitespace-normal rounded bg-primaryLight"
+          class="mb-2 w-full overflow-auto whitespace-normal rounded bg-primaryLight px-4 py-2 font-mono text-red-400"
         >
           {{ t("environment.nested_overflow") }}
         </div>
-        <div class="border rounded divide-y divide-dividerLight border-divider">
+        <div class="divide-y divide-dividerLight rounded border border-divider">
           <div
             v-for="({ id, env }, index) in vars"
             :key="`variable-${id}-${index}`"
@@ -50,7 +50,7 @@
             <input
               v-model="env.key"
               v-focus
-              class="flex flex-1 px-4 py-2 bg-transparent"
+              class="flex flex-1 bg-transparent px-4 py-2"
               :class="isViewer && 'opacity-25'"
               :placeholder="`${t('count.variable', { count: index + 1 })}`"
               :name="'param' + index"

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

@@ -1,16 +1,16 @@
 <template>
   <div
-    class="flex items-stretch group"
+    class="group flex items-stretch"
     @contextmenu.prevent="options!.tippy.show()"
   >
     <span
-      class="flex items-center justify-center px-4 cursor-pointer"
+      class="flex cursor-pointer items-center justify-center px-4"
       @click="emit('edit-environment')"
     >
       <icon-lucide-layers class="svg-icons" />
     </span>
     <span
-      class="flex flex-1 min-w-0 py-2 pr-2 cursor-pointer transition group-hover:text-secondaryDark"
+      class="flex min-w-0 flex-1 cursor-pointer py-2 pr-2 transition group-hover:text-secondaryDark"
       @click="emit('edit-environment')"
     >
       <span class="truncate">

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

@@ -1,7 +1,7 @@
 <template>
   <div>
     <div
-      class="sticky z-10 flex justify-between flex-1 flex-shrink-0 overflow-x-auto border-b top-upperPrimaryStickyFold border-dividerLight bg-primary"
+      class="sticky top-upperPrimaryStickyFold z-10 flex flex-1 flex-shrink-0 justify-between overflow-x-auto border-b border-dividerLight bg-primary"
     >
       <HoppButtonSecondary
         v-if="team === undefined || team.myRole === 'VIEWER'"
@@ -50,10 +50,10 @@
       :text="t('empty.environments')"
     >
       <div class="flex flex-col items-center space-y-4">
-        <span class="text-secondaryLight text-center">
+        <span class="text-center text-secondaryLight">
           {{ t("environment.import_or_create") }}
         </span>
-        <div class="flex gap-4 flex-col items-stretch">
+        <div class="flex flex-col items-stretch gap-4">
           <HoppButtonPrimary
             :icon="IconImport"
             :label="t('import.title')"
@@ -94,7 +94,7 @@
       v-if="!loading && adapterError"
       class="flex flex-col items-center py-4"
     >
-      <icon-lucide-help-circle class="mb-4 svg-icons" />
+      <icon-lucide-help-circle class="svg-icons mb-4" />
       {{ getErrorMessage(adapterError) }}
     </div>
     <EnvironmentsTeamsDetails

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

@@ -47,9 +47,9 @@
         />
       </form>
       <div v-if="mode === 'email-sent'" class="flex flex-col px-4">
-        <div class="flex flex-col items-center justify-center max-w-md">
-          <icon-lucide-inbox class="w-6 h-6 text-accent" />
-          <h3 class="my-2 text-lg text-center">
+        <div class="flex max-w-md flex-col items-center justify-center">
+          <icon-lucide-inbox class="h-6 w-6 text-accent" />
+          <h3 class="my-2 text-center text-lg">
             {{ t("auth.we_sent_magic_link") }}
           </h3>
           <p class="text-center">
@@ -63,7 +63,7 @@
     <template #footer>
       <div
         v-if="mode === 'sign-in' && tosLink && privacyPolicyLink"
-        class="text-secondaryLight text-tiny"
+        class="text-tiny text-secondaryLight"
       >
         By signing in, you are agreeing to our
         <HoppSmartAnchor
@@ -90,7 +90,7 @@
       </div>
       <div
         v-if="mode === 'email-sent'"
-        class="flex justify-between flex-1 text-secondaryLight"
+        class="flex flex-1 justify-between text-secondaryLight"
       >
         <HoppSmartAnchor
           class="link"

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

@@ -1,10 +1,10 @@
 <template>
-  <div class="flex flex-col flex-1">
+  <div class="flex flex-1 flex-col">
     <div
-      class="sticky top-sidebarPrimaryStickyFold z-10 flex items-center justify-between pl-4 border-y bg-primary border-dividerLight"
+      class="sticky top-sidebarPrimaryStickyFold z-10 flex items-center justify-between border-y border-dividerLight bg-primary pl-4"
     >
       <span class="flex items-center">
-        <label class="font-semibold truncate text-secondaryLight">
+        <label class="truncate font-semibold text-secondaryLight">
           {{ t("authorization.type") }}
         </label>
         <tippy
@@ -15,7 +15,7 @@
         >
           <span class="select-wrapper">
             <HoppButtonSecondary
-              class="pr-8 ml-2 rounded-none"
+              class="ml-2 rounded-none pr-8"
               :label="authName"
             />
           </span>
@@ -171,7 +171,7 @@
         </div>
       </div>
       <div
-        class="sticky flex-shrink-0 h-full p-4 overflow-auto overflow-x-auto bg-primary top-upperTertiaryStickyFold min-w-46 max-w-1/3 z-9"
+        class="z-9 sticky top-upperTertiaryStickyFold h-full min-w-46 max-w-1/3 flex-shrink-0 overflow-auto overflow-x-auto bg-primary p-4"
       >
         <div class="pb-2 text-secondaryLight">
           {{ t("helpers.authorization") }}

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

@@ -1,34 +1,23 @@
 <template>
   <div>
-    <div class="flex justify-between gap-2">
-      <div
-        class="field-title flex-1"
-        :class="{ 'field-highlighted': isHighlighted }"
-      >
-        {{ fieldName }}
-        <span v-if="fieldArgs.length > 0">
-          (
-          <span v-for="(field, index) in fieldArgs" :key="`field-${index}`">
-            {{ field.name }}:
-            <GraphqlTypeLink
-              :gql-type="field.type"
-              @jump-to-type="jumpToType"
-            />
-            <span v-if="index !== fieldArgs.length - 1">, </span>
-          </span>
-          ) </span
-        >:
-        <GraphqlTypeLink :gql-type="gqlField.type" @jump-to-type="jumpToType" />
-      </div>
-      <div v-if="gqlField.deprecationReason">
-        <span
-          v-tippy="{ theme: 'tomato' }"
-          class="!text-red-500 hover:!text-red-600 text-xs flex items-center gap-2 cursor-pointer"
-          :title="gqlField.deprecationReason"
-        >
-          <IconAlertTriangle /> {{ t("state.deprecated") }}
+    <div class="field-title" :class="{ 'field-highlighted': isHighlighted }">
+      {{ fieldName }}
+      <span v-if="fieldArgs.length > 0">
+        (
+        <span v-for="(field, index) in fieldArgs" :key="`field-${index}`">
+          {{ field.name }}:
+          <GraphqlTypeLink
+            :gql-type="field.type"
+            :jump-type-callback="jumpTypeCallback"
+          />
+          <span v-if="index !== fieldArgs.length - 1">, </span>
         </span>
-      </div>
+        ) </span
+      >:
+      <GraphqlTypeLink
+        :gql-type="gqlField.type"
+        :jump-type-callback="jumpTypeCallback"
+      />
     </div>
     <div
       v-if="gqlField.description"
@@ -36,6 +25,12 @@
     >
       {{ gqlField.description }}
     </div>
+    <div
+      v-if="gqlField.isDeprecated"
+      class="field-deprecated my-1 inline-block rounded bg-yellow-200 px-2 py-1 text-black"
+    >
+      {{ t("state.deprecated") }}
+    </div>
     <div v-if="fieldArgs.length > 0">
       <h5 class="my-2">Arguments:</h5>
       <div class="border-l-2 border-divider pl-4">
@@ -44,7 +39,7 @@
             {{ field.name }}:
             <GraphqlTypeLink
               :gql-type="field.type"
-              @jump-to-type="jumpToType"
+              :jump-type-callback="jumpTypeCallback"
             />
           </span>
           <div
@@ -59,36 +54,32 @@
   </div>
 </template>
 
-<script setup lang="ts">
+<script>
+// TypeScript + Script Setup this :)
+import { defineComponent } from "vue"
 import { useI18n } from "@composables/i18n"
-import { GraphQLType } from "graphql"
-import { computed } from "vue"
-import IconAlertTriangle from "~icons/lucide/alert-triangle"
 
-const t = useI18n()
+export default defineComponent({
+  props: {
+    gqlField: { type: Object, default: () => ({}) },
+    jumpTypeCallback: { type: Function, default: () => ({}) },
+    isHighlighted: { type: Boolean, default: false },
+  },
+  setup() {
+    return {
+      t: useI18n(),
+    }
+  },
+  computed: {
+    fieldName() {
+      return this.gqlField.name
+    },
 
-const props = withDefaults(
-  defineProps<{
-    gqlField: any
-    isHighlighted: boolean
-  }>(),
-  {
-    gqlField: {},
-    isHighlighted: false,
-  }
-)
-
-const emit = defineEmits<{
-  (e: "jump-to-type", type: GraphQLType): void
-}>()
-
-const fieldName = computed(() => props.gqlField.name)
-
-const fieldArgs = computed(() => props.gqlField.args || [])
-
-const jumpToType = (type: GraphQLType) => {
-  emit("jump-to-type", type)
-}
+    fieldArgs() {
+      return this.gqlField.args || []
+    },
+  },
+})
 </script>
 
 <style lang="scss" scoped>

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

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="sticky top-sidebarPrimaryStickyFold z-10 flex items-center justify-between pl-4 border-y bg-primary border-dividerLight"
+    class="sticky top-sidebarPrimaryStickyFold z-10 flex items-center justify-between border-y border-dividerLight bg-primary pl-4"
   >
     <label class="font-semibold text-secondaryLight">
       {{ t("tab.headers") }}
@@ -42,7 +42,7 @@
       />
     </div>
   </div>
-  <div v-if="bulkMode" ref="bulkEditor" class="flex flex-col flex-1"></div>
+  <div v-if="bulkMode" ref="bulkEditor" class="flex flex-1 flex-col"></div>
   <div v-else>
     <draggable
       v-model="workingHeaders"
@@ -56,7 +56,7 @@
     >
       <template #item="{ element: header, index }">
         <div
-          class="flex border-b divide-x divide-dividerLight border-dividerLight draggable-content group"
+          class="draggable-content group flex divide-x divide-dividerLight border-b border-dividerLight"
         >
           <span>
             <HoppButtonSecondary
@@ -71,7 +71,7 @@
               :icon="IconGripVertical"
               class="cursor-auto text-primary hover:text-primary"
               :class="{
-                'draggable-handle group-hover:text-secondaryLight !cursor-grab':
+                'draggable-handle !cursor-grab group-hover:text-secondaryLight':
                   index !== workingHeaders?.length - 1,
               }"
               tabindex="-1"
@@ -91,7 +91,7 @@
                 px-4
                 truncate
               "
-            class="flex-1 !flex"
+            class="!flex flex-1"
             @input="
               updateHeader(index, {
                 id: header.id,
@@ -102,7 +102,7 @@
             "
           />
           <input
-            class="flex flex-1 px-4 py-2 bg-transparent"
+            class="flex flex-1 bg-transparent px-4 py-2"
             :placeholder="`${t('count.value', { count: index + 1 })}`"
             :name="`value ${String(index)}`"
             :value="header.value"

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

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="sticky top-sidebarPrimaryStickyFold z-10 flex items-center justify-between pl-4 border-y bg-primary border-dividerLight"
+    class="sticky top-sidebarPrimaryStickyFold z-10 flex items-center justify-between border-y border-dividerLight bg-primary pl-4"
   >
     <label class="font-semibold text-secondaryLight">
       {{ t("request.query") }}
@@ -16,7 +16,7 @@
         :title="`${t('request.stop')}`"
         :label="`${t('request.stop')}`"
         :icon="IconStop"
-        class="rounded-none !text-accent !hover:text-accentDark"
+        class="!hover:text-accentDark rounded-none !text-accent"
         @click="unsubscribe()"
       />
 
@@ -31,7 +31,7 @@
         :label="`${selectedOperation.name?.value ?? t('request.run')}`"
         :icon="IconPlay"
         :disabled="!selectedOperation"
-        class="rounded-none !text-accent !hover:text-accentDark"
+        class="!hover:text-accentDark rounded-none !text-accent"
         @click="runQuery(selectedOperation)"
       />
 
@@ -79,7 +79,7 @@
       />
     </div>
   </div>
-  <div ref="queryEditor" class="flex flex-col flex-1"></div>
+  <div ref="queryEditor" class="flex flex-1 flex-col"></div>
 </template>
 
 <script setup lang="ts">

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

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="sticky top-0 z-10 flex flex-shrink-0 p-4 overflow-x-auto space-x-2 bg-primary"
+    class="sticky top-0 z-10 flex flex-shrink-0 space-x-2 overflow-x-auto bg-primary p-4"
   >
     <div class="inline-flex flex-1 space-x-2">
       <input
@@ -9,7 +9,7 @@
         type="url"
         autocomplete="off"
         spellcheck="false"
-        class="w-full px-4 py-2 border rounded bg-primaryLight border-divider text-secondaryDark"
+        class="w-full rounded border border-divider bg-primaryLight px-4 py-2 text-secondaryDark"
         :placeholder="`${t('request.url')}`"
         :disabled="connected"
         @keyup.enter="onConnectClick"

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-col flex-1 h-full">
+  <div class="flex h-full flex-1 flex-col">
     <HoppSmartTabs
       v-model="selectedOptionTab"
       styles="sticky top-0 bg-primary z-10 border-b-0"

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

@@ -1,10 +1,10 @@
 <template>
-  <div class="flex flex-col flex-1 overflow-auto whitespace-nowrap">
-    <div v-if="response?.length === 1" class="flex flex-col flex-1">
+  <div class="flex flex-1 flex-col overflow-auto whitespace-nowrap">
+    <div v-if="response?.length === 1" class="flex flex-1 flex-col">
       <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"
+        class="sticky top-0 z-10 flex flex-shrink-0 items-center justify-between overflow-x-auto border-b border-dividerLight bg-primary pl-4"
       >
-        <label class="font-semibold truncate text-secondaryLight">
+        <label class="truncate font-semibold text-secondaryLight">
           {{ t("response.title") }}
         </label>
         <div class="flex items-center">
@@ -33,11 +33,11 @@
           />
         </div>
       </div>
-      <div ref="schemaEditor" class="flex flex-col flex-1"></div>
+      <div ref="schemaEditor" class="flex flex-1 flex-col"></div>
     </div>
     <div
       v-else-if="response && response?.length > 1"
-      class="flex flex-col flex-1"
+      class="flex flex-1 flex-col"
     >
       <GraphqlSubscriptionLog :log="response" />
     </div>
@@ -59,7 +59,6 @@ import { useToast } from "@composables/toast"
 import { defineActionHandler } from "~/helpers/actions"
 import { getPlatformSpecialKey as getSpecialKey } from "~/helpers/platformutils"
 import { GQLResponseEvent } from "~/helpers/graphql/connection"
-import { platform } from "~/platform"
 
 const t = useI18n()
 const toast = useToast()
@@ -112,31 +111,21 @@ const copyResponse = (str: string) => {
   toast.success(`${t("state.copied_to_clipboard")}`)
 }
 
-const downloadResponse = async (str: string) => {
+const downloadResponse = (str: string) => {
   const dataToWrite = str
   const file = new Blob([dataToWrite!], { type: "application/json" })
+  const a = document.createElement("a")
   const url = URL.createObjectURL(file)
-
-  const filename = `${url.split("/").pop()!.split("#")[0].split("?")[0]}.json`
-
-  URL.revokeObjectURL(url)
-
-  const result = await platform.io.saveFileWithDialog({
-    data: dataToWrite,
-    contentType: "application/json",
-    suggestedFilename: filename,
-    filters: [
-      {
-        name: "JSON file",
-        extensions: ["json"],
-      },
-    ],
-  })
-
-  if (result.type === "unknown" || result.type === "saved") {
-    downloadResponseIcon.value = IconCheck
-    toast.success(`${t("state.download_started")}`)
-  }
+  a.href = url
+  a.download = `${url.split("/").pop()!.split("#")[0].split("?")[0]}`
+  document.body.appendChild(a)
+  a.click()
+  downloadResponseIcon.value = IconCheck
+  toast.success(`${t("state.download_started")}`)
+  setTimeout(() => {
+    document.body.removeChild(a)
+    URL.revokeObjectURL(url)
+  }, 1000)
 }
 
 defineActionHandler(

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

@@ -30,8 +30,8 @@
             v-model="graphqlFieldsFilterText"
             type="search"
             autocomplete="off"
-            class="flex w-full p-4 py-2 bg-transparent h-8"
             :placeholder="`${t('action.search')}`"
+            class="flex flex-1 bg-transparent p-4 py-2"
           />
           <div class="flex">
             <HoppButtonSecondary
@@ -58,8 +58,8 @@
               v-for="(field, index) in filteredQueryFields"
               :key="`field-${index}`"
               :gql-field="field"
+              :jump-type-callback="handleJumpToType"
               class="p-4"
-              @jump-to-type="handleJumpToType"
             />
           </HoppSmartTab>
           <HoppSmartTab
@@ -72,8 +72,8 @@
               v-for="(field, index) in filteredMutationFields"
               :key="`field-${index}`"
               :gql-field="field"
+              :jump-type-callback="handleJumpToType"
               class="p-4"
-              @jump-to-type="handleJumpToType"
             />
           </HoppSmartTab>
           <HoppSmartTab
@@ -86,8 +86,8 @@
               v-for="(field, index) in filteredSubscriptionFields"
               :key="`field-${index}`"
               :gql-field="field"
+              :jump-type-callback="handleJumpToType"
               class="p-4"
-              @jump-to-type="handleJumpToType"
             />
           </HoppSmartTab>
           <HoppSmartTab
@@ -103,7 +103,7 @@
               :gql-types="graphqlTypes"
               :is-highlighted="isGqlTypeHighlighted(type)"
               :highlighted-fields="getGqlTypeHighlightedFields(type)"
-              @jump-to-type="handleJumpToType"
+              :jump-type-callback="handleJumpToType"
             />
           </HoppSmartTab>
         </HoppSmartTabs>
@@ -112,9 +112,9 @@
     <HoppSmartTab :id="'schema'" :icon="IconBox" :label="`${t('tab.schema')}`">
       <div
         v-if="schemaString"
-        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"
+        class="sticky top-0 z-10 flex flex-shrink-0 items-center justify-between overflow-x-auto border-b border-dividerLight bg-primary pl-4"
       >
-        <label class="font-semibold truncate text-secondaryLight">
+        <label class="truncate font-semibold text-secondaryLight">
           {{ t("graphql.schema") }}
         </label>
         <div class="flex">
@@ -149,7 +149,7 @@
       <div
         v-if="schemaString"
         ref="schemaEditor"
-        class="flex flex-col flex-1"
+        class="flex flex-1 flex-col"
       ></div>
       <HoppSmartPlaceholder
         v-else
@@ -202,7 +202,6 @@ import {
   schemaString,
   subscriptionFields,
 } from "~/helpers/graphql/connection"
-import { platform } from "~/platform"
 
 type NavigationTabs = "history" | "collection" | "docs" | "schema"
 type GqlTabs = "queries" | "mutations" | "subscriptions" | "types"
@@ -373,33 +372,21 @@ useCodemirror(
   })
 )
 
-const downloadSchema = async () => {
-  const dataToWrite = schemaString.value
+const downloadSchema = () => {
+  const dataToWrite = JSON.stringify(schemaString.value, null, 2)
   const file = new Blob([dataToWrite], { type: "application/graphql" })
+  const a = document.createElement("a")
   const url = URL.createObjectURL(file)
-
-  const filename = `${
-    url.split("/").pop()!.split("#")[0].split("?")[0]
-  }.graphql`
-
-  URL.revokeObjectURL(url)
-
-  const result = await platform.io.saveFileWithDialog({
-    data: dataToWrite,
-    contentType: "application/graphql",
-    suggestedFilename: filename,
-    filters: [
-      {
-        name: "GraphQL Schema File",
-        extensions: ["graphql"],
-      },
-    ],
-  })
-
-  if (result.type === "unknown" || result.type === "saved") {
-    downloadSchemaIcon.value = IconCheck
-    toast.success(`${t("state.download_started")}`)
-  }
+  a.href = url
+  a.download = `${url.split("/").pop()!.split("#")[0].split("?")[0]}.graphql`
+  document.body.appendChild(a)
+  a.click()
+  downloadSchemaIcon.value = IconCheck
+  toast.success(`${t("state.download_started")}`)
+  setTimeout(() => {
+    document.body.removeChild(a)
+    URL.revokeObjectURL(url)
+  }, 1000)
 }
 
 const copySchema = () => {

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

@@ -1,7 +1,7 @@
 <template>
-  <div ref="container" class="flex flex-col flex-1">
+  <div ref="container" class="flex flex-1 flex-col">
     <div
-      class="sticky top-0 z-10 flex items-center justify-between flex-none pl-4 border-b bg-primary border-dividerLight"
+      class="sticky top-0 z-10 flex flex-none items-center justify-between border-b border-dividerLight bg-primary pl-4"
     >
       <label for="log" class="py-2 font-semibold text-secondaryLight">
         {{ "Subscription Log" }}
@@ -43,7 +43,7 @@
       class="overflow-y-auto border-b border-dividerLight"
     >
       <div
-        class="flex flex-col h-auto h-full border-r divide-y divide-dividerLight border-dividerLight"
+        class="flex h-auto h-full flex-col divide-y divide-dividerLight border-r border-dividerLight"
       >
         <RealtimeLogEntry
           v-for="(entry, index) in log"

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

@@ -2,7 +2,7 @@
   <div
     v-tippy="{ theme: 'tooltip', delay: [500, 20] }"
     :title="tab.document.request.name"
-    class="truncate px-2 flex items-center"
+    class="flex items-center truncate px-2"
     @dblclick="emit('open-rename-modal')"
     @contextmenu.prevent="options?.tippy?.show()"
     @click.middle="emit('close-tab')"
@@ -14,7 +14,7 @@
       theme="popover"
       :on-shown="() => tippyActions!.focus()"
     >
-      <span class="leading-8 px-2 truncate">
+      <span class="truncate px-2 leading-8">
         {{ tab.document.request.name }}
       </span>
       <template #content="{ hide }">

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

@@ -6,7 +6,7 @@
       <span v-else-if="isEnum" class="text-accent">enum </span>
       {{ gqlType.name }}
     </div>
-    <div v-if="gqlType.description" class="py-2 text-secondaryLight type-desc">
+    <div v-if="gqlType.description" class="type-desc py-2 text-secondaryLight">
       {{ gqlType.description }}
     </div>
     <div v-if="interfaces.length > 0">
@@ -18,7 +18,7 @@
         <GraphqlTypeLink
           :gql-type="gqlInterface"
           :jump-type-callback="jumpTypeCallback"
-          class="pl-4 border-l-2 border-divider"
+          class="border-l-2 border-divider pl-4"
         />
       </div>
     </div>
@@ -29,7 +29,7 @@
         :key="`child-${index}`"
         :gql-type="child"
         :jump-type-callback="jumpTypeCallback"
-        class="pl-4 border-l-2 border-divider"
+        class="border-l-2 border-divider pl-4"
       />
     </div>
     <div v-if="gqlType.getFields">
@@ -37,7 +37,7 @@
       <GraphqlField
         v-for="(field, index) in gqlType.getFields()"
         :key="`field-${index}`"
-        class="pl-4 border-l-2 border-divider"
+        class="border-l-2 border-divider pl-4"
         :gql-field="field"
         :is-highlighted="isFieldHighlighted({ field })"
         :jump-type-callback="jumpTypeCallback"
@@ -48,7 +48,7 @@
       <div
         v-for="(value, index) in gqlType.getValues()"
         :key="`value-${index}`"
-        class="pl-4 border-l-2 border-divider"
+        class="border-l-2 border-divider pl-4"
         v-text="value.name"
       ></div>
     </div>

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

@@ -7,31 +7,38 @@
   </span>
 </template>
 
-<script setup lang="ts">
-import { GraphQLScalarType, GraphQLType } from "graphql"
-import { computed } from "vue"
+<script lang="ts">
+import { defineComponent } from "vue"
+import { GraphQLScalarType } from "graphql"
 
-const props = defineProps<{
-  gqlType: GraphQLType
-}>()
+export default defineComponent({
+  props: {
+    // eslint-disable-next-line vue/require-default-prop
+    gqlType: null,
+    // (typeName: string) => void
+    // eslint-disable-next-line vue/require-default-prop
+    jumpTypeCallback: Function,
+  },
 
-const emit = defineEmits<{
-  (e: "jump-to-type", type: GraphQLType): void
-}>()
+  computed: {
+    typeString() {
+      return `${this.gqlType}`
+    },
+    isScalar() {
+      return this.resolveRootType(this.gqlType) instanceof GraphQLScalarType
+    },
+  },
 
-const typeString = computed(() => `${props.gqlType}`)
-const isScalar = computed(() => {
-  return resolveRootType(props.gqlType) instanceof GraphQLScalarType
+  methods: {
+    jumpToType() {
+      if (this.isScalar) return
+      this.jumpTypeCallback(this.gqlType)
+    },
+    resolveRootType(type) {
+      let t = type
+      while (t.ofType != null) t = t.ofType
+      return t
+    },
+  },
 })
-
-function resolveRootType(type: GraphQLType) {
-  let t = type as any
-  while (t.ofType != null) t = t.ofType
-  return t
-}
-
-function jumpToType() {
-  if (isScalar.value) return
-  emit("jump-to-type", props.gqlType)
-}
 </script>

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

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="sticky top-sidebarPrimaryStickyFold z-10 flex items-center justify-between pl-4 border-y bg-primary border-dividerLight"
+    class="sticky top-sidebarPrimaryStickyFold z-10 flex items-center justify-between border-y border-dividerLight bg-primary pl-4"
   >
     <label class="font-semibold text-secondaryLight">
       {{ t("request.variables") }}
@@ -16,7 +16,7 @@
         :title="`${t('request.stop')}`"
         :label="`${t('request.stop')}`"
         :icon="IconStop"
-        class="rounded-none !text-accent !hover:text-accentDark"
+        class="!hover:text-accentDark rounded-none !text-accent"
         @click="unsubscribe()"
       />
       <HoppButtonSecondary
@@ -30,7 +30,7 @@
         :label="`${selectedOperation.name?.value ?? t('request.run')}`"
         :icon="IconPlay"
         :disabled="!selectedOperation"
-        class="rounded-none !text-accent !hover:text-accentDark"
+        class="!hover:text-accentDark rounded-none !text-accent"
         @click="runQuery(selectedOperation)"
       />
       <HoppButtonSecondary
@@ -67,7 +67,7 @@
       />
     </div>
   </div>
-  <div ref="variableEditor" class="flex flex-col flex-1"></div>
+  <div ref="variableEditor" class="flex flex-1 flex-col"></div>
 </template>
 
 <script setup lang="ts">