chore: fixed indentation

feat: workspace selector (resolves #13 )
2026-07-05 10:28:32 +00:00 · 2022-10-05 20:29:05 +05:30 · 2022-10-05 20:20:46 +05:30
423 changed files with 14592 additions and 20268 deletions
--- a/.github/workflows/playwright.yml
+++ b/.github/workflows/playwright.yml
@@ -1,27 +0,0 @@
-name: Playwright Tests
-on:
-  push:
-    branches: [ main ]
-  pull_request:
-    branches: [ main ]
-jobs:
-  test:
-    timeout-minutes: 60
-    runs-on: ubuntu-latest
-    steps:
-    - uses: actions/checkout@v3
-    - uses: actions/setup-node@v3
-      with:
-        node-version: 16
-    - name: Install dependencies
-      run: npm i --legacy-peer-deps
-    - name: Install Playwright Browsers
-      run: npx playwright install --with-deps
-    - name: Run Playwright tests
-      run: npm run test:e2e
-    - uses: actions/upload-artifact@v3
-      if: always()
-      with:
-        name: playwright-report
-        path: playwright-report/
-        retention-days: 30
--- a/.github/workflows/unit-tests.yml
+++ b/.github/workflows/unit-tests.yml
@@ -1,21 +0,0 @@
-name: Unit Tests
-on:
-  push:
-    branches: [ main ]
-  pull_request:
-    branches: [ main ]
-jobs:
-  test:
-    timeout-minutes: 60
-    runs-on: ubuntu-latest
-    steps:
-    - uses: actions/checkout@v3
-    - uses: actions/setup-node@v3
-      with:
-        node-version: 16
-    - name: Install dependencies
-      run: npm i --legacy-peer-deps
-    - name: Test Package bruno-lang
-      run: npm run test --workspace=packages/bruno-lang
-    - name: Test Package bruno-schema
-      run: npm run test --workspace=packages/bruno-schema
--- a/.gitignore
+++ b/.gitignore
@@ -2,9 +2,6 @@

 # dependencies
 node_modules
-yarn.lock
-pnpm-lock.yaml
-package-lock.json
 .pnp
 .pnp.js

@@ -13,11 +10,6 @@ coverage

 # production
 build
-chrome-extension
-chrome-extension.pem
-chrome-extension.crx
-bruno.zip
-*.zip

 # misc
 .DS_Store
@@ -35,9 +27,5 @@ yarn-error.log*
 .env.production.local

 # next.js
-/renderer
 /renderer/.next/
 /renderer/out/
-/test-results/
-/playwright-report/
-/playwright/.cache/
--- a/.nvmrc
+++ b/.nvmrc
@@ -1 +1 @@
-v18.13.0
+v14.17.0
--- a/assets/images/landing-2.png
+++ b/assets/images/landing-2.png
--- a/assets/images/local-collections.png
+++ b/assets/images/local-collections.png
--- a/assets/images/logo-transparent.png
+++ b/assets/images/logo-transparent.png
--- a/assets/images/logo.png
+++ b/assets/images/logo.png
--- a/contributing.md
+++ b/contributing.md
@@ -1,53 +0,0 @@
-## Lets make bruno better, together !!
-
-I am happy that you are looking to improve bruno. Below are the guidelines to get started bringing up bruno on your computer.
-
-### Technology Stack
-
-Bruno is built using NextJs and React. We also use electron to ship a desktop version (that supports local collections)
-
-Libraries we use
-
- CSS - Tailwind
- Code Editors - Codemirror
- State Management - Redux
- Icons - Tabler Icons
- Forms - formik
- Schema Validation - Yup
- Request Client - axios
- Filesystem Watcher - chokidar
-
-### Dependencies
-
-You would need [Node v14.x or the latest LTS version](https://nodejs.org/en/) and npm 8.x. We use npm workspaces in the project
-
-### Lets start coding
-
-```bash
-# clone and cd into bruno
-# use Node 14.x, Npm 8.x
-
-# Install deps (note that we use npm workspaces)
-npm i
-
-# run next app
-npm run dev:web
-
-# run electron app
-# neededonly if you want to test changes related to electron app
-# please note that both web and electron use the same code
-# if it works in web, then it should also work in electron
-npm run dev:electron
-
-# open in browser
-open http://localhost:3000
-```
-
-### Raising Pull Request
-
- Please keep the PR's small and focused on one thing
- Please follow the format of creating branches
-  - feature/[feature name]: This branch should contain changes for a specific feature
-    - Example: feature/dark-mode
-  - bugfix/[bug name]: This branch should container only bug fixes for a specific bug
-    - Example bugfix/bug-1
--- a/docs/development.md
+++ b/docs/development.md
@@ -1,40 +1 @@
 ## development
-
-Bruno is deing developed as a desktop app. You need to load the app by running the nextjs app in one terminal and then run the electron app in another terminal.
-
-### Dependencies
-* NodeJS v18
-
-###
-
-```bash
-# use nodejs 18 version
-nvm use
-
-# install deps
-npm i
-
-# run next app
-npm run dev --workspace=packages/bruno-app
-
-# run electron app
-npm run dev --workspace=packages/bruno-electron
-
-# build next app
-npm run build --workspace=packages/bruno-app
-```
-
-### fix
-
-You might encounter a `Unsupported platform` error when you run `npm install`. To fix this, you will need to delete `node_modules` and `package-lock.json` and run `npm install`. This should install all the necessary packages needed to run the app.
-
-### testing
-
-```bash
-# bruno-schema
-npm test --workspace=packages/bruno-schema
-
-# bruno-lang
-npm test --workspace=packages/bruno-schema
-
-```
--- a/packages/bruno-electron/src/app/menu-template.js
+++ b/packages/bruno-electron/src/app/menu-template.js
@@ -5,7 +5,7 @@ const template = [
    label: 'Collection',
    submenu: [
      {
-        label: 'Open Local Collection',
+        label: 'Open Collection',
        click () {
          ipcMain.emit('main:open-collection');
        }
--- a/packages/bruno-electron/src/index.js
+++ b/packages/bruno-electron/src/index.js
@@ -1,16 +1,12 @@
 const path = require('path');
-const isDev = require('electron-is-dev');
 const { format } = require('url');
 const { BrowserWindow, app, Menu } = require('electron');
 const { setContentSecurityPolicy } = require('electron-util');

 const menuTemplate = require('./app/menu-template');
-const LastOpenedCollections = require('./app/last-opened-collections');
-const registerNetworkIpc = require('./ipc/network');
-const registerCollectionsIpc = require('./ipc/collection');
-const Watcher = require('./app/watcher');
-
-const lastOpenedCollections = new LastOpenedCollections();
+const registerIpc = require('./ipc');
+const isDev = require('electron-is-dev');
+const prepareNext = require('electron-next');

 setContentSecurityPolicy(`
 	default-src * 'unsafe-inline' 'unsafe-eval';
@@ -18,17 +14,18 @@ setContentSecurityPolicy(`
 	connect-src * 'unsafe-inline';
 	base-uri 'none';
 	form-action 'none';
-  img-src 'self' data:image/svg+xml
+	frame-ancestors 'none';
 `);

 const menu = Menu.buildFromTemplate(menuTemplate);
 Menu.setApplicationMenu(menu);

 let mainWindow;
-let watcher;

 // Prepare the renderer once the app is ready
 app.on('ready', async () => {
+  await prepareNext('./renderer');
+
  mainWindow = new BrowserWindow({
    width: 1280,
    height: 768,
@@ -40,19 +37,17 @@ app.on('ready', async () => {
  });

  const url = isDev
-    ? 'http://localhost:3000'
+    ? 'http://localhost:8000'
    : format({
-        pathname: path.join(__dirname, '../web/index.html'),
+        pathname: path.join(__dirname, '../renderer/out/index.html'),
        protocol: 'file:',
        slashes: true
      });

  mainWindow.loadURL(url);
-  watcher = new Watcher();

  // register all ipc handlers
-  registerNetworkIpc(mainWindow, watcher, lastOpenedCollections);
-  registerCollectionsIpc(mainWindow, watcher, lastOpenedCollections);
+  registerIpc(mainWindow);
 });

 // Quit the app once all windows are closed
--- a/main/ipc.js
+++ b/main/ipc.js
@@ -0,0 +1,33 @@
+const axios = require('axios');
+const { ipcMain } = require('electron');
+
+const registerIpc = () => {
+  // handler for sending http request
+  ipcMain.handle('send-http-request', async (event, request) => {
+    try {
+      const result = await axios(request);
+
+      return {
+        status: result.status,
+        headers: result.headers,
+        data: result.data
+      };
+    } catch (error) {
+      if(error.response) {
+        return {
+          status: error.response.status,
+          headers: error.response.headers,
+          data: error.response.data
+        };
+      }
+
+      return {
+        status: -1,
+        headers: [],
+        data: null
+      };
+    }
+  });
+};
+
+module.exports = registerIpc;
--- a/packages/bruno-electron/src/preload.js
+++ b/packages/bruno-electron/src/preload.js
--- a/packages/bruno-schema/src/utils/testUtils.js
+++ b/packages/bruno-schema/src/utils/testUtils.js
@@ -1,5 +1,4 @@
 const { customAlphabet } = require('nanoid');
-const { expect } = require('@jest/globals');

 // a customized version of nanoid without using _ and -
 const uuid = () => {
@@ -10,13 +9,6 @@ const uuid = () => {
  return customNanoId();
 };

-const validationErrorWithMessages = (...errors) => {
-  return expect.objectContaining({
-    errors
-  });
-}
-
 module.exports = {
-  uuid,
-  validationErrorWithMessages
+  uuid
 };
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -1,34 +1,81 @@
 {
-  "name": "usebruno",
+  "name": "grafnode",
  "private": true,
-  "workspaces": [
-    "packages/bruno-app",
-    "packages/bruno-electron",
-    "packages/bruno-tauri",
-    "packages/bruno-schema",
-    "packages/bruno-js",
-    "packages/bruno-lang",
-    "packages/bruno-testbench",
-    "packages/bruno-graphql-docs"
-  ],
-  "devDependencies": {
-    "@faker-js/faker": "^7.6.0",
-    "@playwright/test": "^1.27.1",
-    "jest": "^29.2.0",
-    "randomstring": "^1.2.2"
-  },
+  "main": "main/index.js",
  "scripts": {
-    "dev:web": "npm run dev --workspace=packages/bruno-app",
-    "build:web": "npm run build --workspace=packages/bruno-app",
-    "prettier:web": "npm run prettier --workspace=packages/bruno-app",
-    "dev:electron": "npm run dev --workspace=packages/bruno-electron",
-    "build:graphql-docs": "npm run build --workspace=packages/bruno-graphql-docs",
-    "build:chrome-extension": "./scripts/build-chrome-extension.sh",
-    "build:electron": "./scripts/build-electron.sh",
-    "test:e2e": "npx playwright test",
-    "test:report": "npx playwright show-report"
+    "clean": "rimraf dist renderer/.next renderer/out",
+    "start": "electron .",
+    "build": "next build renderer && next export renderer",
+    "pack-app": "npm run build && electron-builder --dir",
+    "dist": "npm run build && electron-builder"
  },
-  "overrides": {
-    "rollup": "3.2.5"
+  "build": {
+    "asar": true,
+    "files": [
+      "main",
+      "renderer/out"
+    ]
+  },
+  "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^1.2.36",
+    "@fortawesome/free-solid-svg-icons": "^5.15.4",
+    "@fortawesome/react-fontawesome": "^0.1.16",
+    "@reduxjs/toolkit": "^1.8.0",
+    "@tabler/icons": "^1.46.0",
+    "@tippyjs/react": "^4.2.6",
+    "axios": "^0.26.0",
+    "classnames": "^2.3.1",
+    "codemirror": "^5.65.2",
+    "codemirror-graphql": "^1.2.5",
+    "electron-is-dev": "^2.0.0",
+    "electron-next": "^3.1.5",
+    "electron-store": "^8.0.1",
+    "electron-util": "^0.17.2",
+    "escape-html": "^1.0.3",
+    "formik": "^2.2.9",
+    "fs-extra": "^10.0.1",
+    "graphiql": "^1.5.9",
+    "graphql": "^16.2.0",
+    "graphql-request": "^3.7.0",
+    "idb": "^7.0.0",
+    "immer": "^9.0.12",
+    "is-valid-path": "^0.1.1",
+    "js-yaml": "^4.1.0",
+    "lodash": "^4.17.21",
+    "markdown-it": "^12.2.0",
+    "mousetrap": "^1.6.5",
+    "nanoid": "^3.1.30",
+    "next": "12.0.4",
+    "qs": "^6.11.0",
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
+    "react-redux": "^7.2.6",
+    "react-tabs": "^3.2.3",
+    "sass": "^1.46.0",
+    "split-on-first": "^3.0.0",
+    "styled-components": "^5.3.3",
+    "tailwindcss": "^2.2.19",
+    "yup": "^0.32.11"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.16.0",
+    "@babel/plugin-transform-spread": "^7.16.7",
+    "@babel/preset-env": "^7.16.4",
+    "@babel/preset-react": "^7.16.0",
+    "@babel/runtime": "^7.16.3",
+    "babel-loader": "^8.2.3",
+    "css-loader": "^6.5.1",
+    "electron": "^17.1.0",
+    "electron-builder": "^22.14.13",
+    "file-loader": "^6.2.0",
+    "html-loader": "^3.0.1",
+    "html-webpack-plugin": "^5.5.0",
+    "mini-css-extract-plugin": "^2.4.5",
+    "next": "^12.1.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "style-loader": "^3.3.1",
+    "webpack": "^5.64.4",
+    "webpack-cli": "^4.9.1"
  }
 }
--- a/packages/bruno-app/.env.prod
+++ b/packages/bruno-app/.env.prod
@@ -1,5 +0,0 @@
-ENV=production
-
-NEXT_PUBLIC_ENV=prod
-
-NEXT_PUBLIC_BRUNO_SERVER_API=https://ada.grafnode.com/api
--- a/packages/bruno-app/.gitignore
+++ b/packages/bruno-app/.gitignore
@@ -1,34 +0,0 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
-# dependencies
-node_modules
-.pnp
-.pnp.js
-pnpm-lock.yaml
-package-lock.json
-yarn.lock
-
-# testing
-coverage
-
-# production
-build
-
-# misc
-.DS_Store
-*.pem
-
-# debug
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-
-# local env files
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-
-# next.js
-.next/
-out/
--- a/packages/bruno-app/.prettierrc.json
+++ b/packages/bruno-app/.prettierrc.json
@@ -1,7 +0,0 @@
-{
-  "trailingComma": "none",
-  "tabWidth": 2,
-  "semi": true,
-  "singleQuote": true,
-  "printWidth": 180
-}
--- a/packages/bruno-app/package.json
+++ b/packages/bruno-app/package.json
@@ -1,74 +0,0 @@
-{
-  "name": "@usebruno/app",
-  "version": "0.3.0",
-  "private": true,
-  "scripts": {
-    "dev": "cross-env ENV=dev next dev",
-    "build": "next build && next export",
-    "start": "next start",
-    "lint": "next lint",
-    "prettier": "prettier --write \"./src/**/*.{js,jsx,json,ts,tsx}\""
-  },
-  "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^1.2.36",
-    "@fortawesome/free-solid-svg-icons": "^5.15.4",
-    "@fortawesome/react-fontawesome": "^0.1.16",
-    "@reduxjs/toolkit": "^1.8.0",
-    "@tabler/icons": "^1.46.0",
-    "@tippyjs/react": "^4.2.6",
-    "@usebruno/graphql-docs": "0.1.0",
-    "@usebruno/schema": "0.2.0",
-    "axios": "^0.26.0",
-    "classnames": "^2.3.1",
-    "codemirror": "^5.65.2",
-    "codemirror-graphql": "^1.2.5",
-    "escape-html": "^1.0.3",
-    "file-dialog": "^0.0.8",
-    "file-saver": "^2.0.5",
-    "formik": "^2.2.9",
-    "graphiql": "^1.5.9",
-    "graphql": "^16.2.0",
-    "graphql-request": "^3.7.0",
-    "idb": "^7.0.0",
-    "immer": "^9.0.15",
-    "lodash": "^4.17.21",
-    "markdown-it": "^13.0.1",
-    "mousetrap": "^1.6.5",
-    "nanoid": "3.3.4",
-    "next": "12.3.3",
-    "path": "^0.12.7",
-    "platform": "^1.3.6",
-    "posthog-node": "^2.1.0",
-    "qs": "^6.11.0",
-    "react": "18.2.0",
-    "react-dnd": "^16.0.1",
-    "react-dnd-html5-backend": "^16.0.1",
-    "react-dom": "18.2.0",
-    "react-hot-toast": "^2.4.0",
-    "react-redux": "^7.2.6",
-    "react-tooltip": "^5.5.2",
-    "sass": "^1.46.0",
-    "split-on-first": "^3.0.0",
-    "styled-components": "^5.3.3",
-    "tailwindcss": "^2.2.19",
-    "yup": "^0.32.11"
-  },
-  "devDependencies": {
-    "@babel/core": "^7.16.0",
-    "@babel/plugin-transform-spread": "^7.16.7",
-    "@babel/preset-env": "^7.16.4",
-    "@babel/preset-react": "^7.16.0",
-    "@babel/runtime": "^7.16.3",
-    "babel-loader": "^8.2.3",
-    "cross-env": "^7.0.3",
-    "css-loader": "^6.5.1",
-    "file-loader": "^6.2.0",
-    "html-loader": "^3.0.1",
-    "html-webpack-plugin": "^5.5.0",
-    "mini-css-extract-plugin": "^2.4.5",
-    "prettier": "^2.7.1",
-    "style-loader": "^3.3.1",
-    "webpack": "^5.64.4",
-    "webpack-cli": "^4.9.1"
-  }
-}
--- a/packages/bruno-app/public/favicon.ico
+++ b/packages/bruno-app/public/favicon.ico
--- a/packages/bruno-app/public/theme/dark.js
+++ b/packages/bruno-app/public/theme/dark.js
@@ -1,30 +0,0 @@
-const darkTheme = {
-  brand: '#546de5',
-  text: 'rgb(52 52 52)',
-  'primary-text': '#ffffff',
-  'primary-theme': '#1e1e1e',
-  'secondary-text': '#929292',
-  'sidebar-collection-item-active-indent-border': '#d0d0d0',
-  'sidebar-collection-item-active-background': '#e1e1e1',
-  'sidebar-background': '#252526',
-  'sidebar-bottom-bg': '#68217a',
-  'request-dragbar-background': '#efefef',
-  'request-dragbar-background-active': 'rgb(200, 200, 200)',
-  'tab-inactive': 'rgb(155 155 155)',
-  'tab-active-border': '#546de5',
-  'layout-border': '#dedede',
-  'codemirror-border': '#efefef',
-  'codemirror-background': 'rgb(243, 243, 243)',
-  'text-link': '#1663bb',
-  'text-danger': 'rgb(185, 28, 28)',
-  'background-danger': '#dc3545',
-  'method-get': 'rgb(5, 150, 105)',
-  'method-post': '#8e44ad',
-  'method-delete': 'rgb(185, 28, 28)',
-  'method-patch': 'rgb(52 52 52)',
-  'method-options': 'rgb(52 52 52)',
-  'method-head': 'rgb(52 52 52)',
-  'table-stripe': '#f3f3f3'
-};
-
-export default darkTheme;
--- a/packages/bruno-app/public/theme/index.js
+++ b/packages/bruno-app/public/theme/index.js
@@ -1,7 +0,0 @@
-import darkTheme from './dark';
-import lightTheme from './light';
-
-export default {
-  Light: lightTheme,
-  Dark: darkTheme
-};
--- a/packages/bruno-app/public/theme/light.js
+++ b/packages/bruno-app/public/theme/light.js
@@ -1,30 +0,0 @@
-const lightTheme = {
-  brand: '#546de5',
-  text: 'rgb(52 52 52)',
-  'primary-text': 'rgb(52 52 52)',
-  'primary-theme': '#ffffff',
-  'secondary-text': '#929292',
-  'sidebar-collection-item-active-indent-border': '#d0d0d0',
-  'sidebar-collection-item-active-background': '#e1e1e1',
-  'sidebar-background': '#f3f3f3',
-  'sidebar-bottom-bg': '#f3f3f3',
-  'request-dragbar-background': '#efefef',
-  'request-dragbar-background-active': 'rgb(200, 200, 200)',
-  'tab-inactive': 'rgb(155 155 155)',
-  'tab-active-border': '#546de5',
-  'layout-border': '#dedede',
-  'codemirror-border': '#efefef',
-  'codemirror-background': 'rgb(243, 243, 243)',
-  'text-link': '#1663bb',
-  'text-danger': 'rgb(185, 28, 28)',
-  'background-danger': '#dc3545',
-  'method-get': 'rgb(5, 150, 105)',
-  'method-post': '#8e44ad',
-  'method-delete': 'rgb(185, 28, 28)',
-  'method-patch': 'rgb(52 52 52)',
-  'method-options': 'rgb(52 52 52)',
-  'method-head': 'rgb(52 52 52)',
-  'table-stripe': '#f3f3f3'
-};
-
-export default lightTheme;
--- a/packages/bruno-app/src/api/base.js
+++ b/packages/bruno-app/src/api/base.js
@@ -1,30 +0,0 @@
-import axios from 'axios';
-
-const apiClient = axios.create({
-  baseURL: process.env.NEXT_PUBLIC_GRAFNODE_SERVER_API
-});
-
-apiClient.interceptors.request.use(
-  (config) => {
-    const headers = {
-      'Content-Type': 'application/json'
-    };
-
-    return {
-      ...config,
-      headers: headers
-    };
-  },
-  (error) => Promise.reject(error)
-);
-
-apiClient.interceptors.response.use(
-  (response) => response,
-  async (error) => {
-    return Promise.reject(error.response ? error.response.data : error);
-  }
-);
-
-const { get, post, put, delete: destroy } = apiClient;
-
-export { get, post, put, destroy };
--- a/packages/bruno-app/src/assets/github.svg
+++ b/packages/bruno-app/src/assets/github.svg
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
--- a/packages/bruno-app/src/assets/send.svg
+++ b/packages/bruno-app/src/assets/send.svg
@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48">
-    <path fill="#515151" d="M4.02 42l41.98-18-41.98-18-.02 14 30 4-30 4z"/>
-    <path d="M0 0h48v48h-48z" fill="none"/>
-</svg>
--- a/packages/bruno-app/src/components/Bruno/index.js
+++ b/packages/bruno-app/src/components/Bruno/index.js
@@ -1,94 +0,0 @@
-import React from 'react';
-
-const Bruno = ({ width }) => {
-  return (
-    <svg id="emoji" width={width} viewBox="0 0 72 72" xmlns="http://www.w3.org/2000/svg">
-      <g id="color">
-        <path
-          fill="#F4AA41"
-          stroke="none"
-          d="M23.5,14.5855l-4.5,1.75l-7.25,8.5l-4.5,10.75l2,5.25c1.2554,3.7911,3.5231,7.1832,7.25,10l2.5-3.3333 c0,0,3.8218,7.7098,10.7384,8.9598c0,0,10.2616,1.936,15.5949-0.8765c3.4203-1.8037,4.4167-4.4167,4.4167-4.4167l3.4167-3.4167 l1.5833,2.3333l2.0833-0.0833l5.4167-7.25L64,37.3355l-0.1667-4.5l-2.3333-5.5l-4.8333-7.4167c0,0-2.6667-4.9167-8.1667-3.9167 c0,0-6.5-4.8333-11.8333-4.0833S32.0833,10.6688,23.5,14.5855z"
-        />
-        <polygon
-          fill="#EA5A47"
-          stroke="none"
-          points="36,47.2521 32.9167,49.6688 30.4167,49.6688 30.3333,53.5021 31.0833,57.0021 32.1667,58.9188 35,60.4188 39.5833,59.8355 41.1667,58.0855 42.1667,53.8355 41.9167,49.8355 39.9167,50.0855"
-        />
-        <polygon fill="#3F3F3F" stroke="none" points="32.5,36.9188 30.9167,40.6688 33.0833,41.9188 34.3333,42.4188 38.6667,42.5855 41.5833,40.3355 39.8333,37.0855" />
-      </g>
-      <g id="hair" />
-      <g id="skin" />
-      <g id="skin-shadow" />
-      <g id="line">
-        <path
-          fill="#000000"
-          stroke="none"
-          d="M29.5059,30.1088c0,0-1.8051,1.2424-2.7484,0.6679c-0.9434-0.5745-1.2424-1.8051-0.6679-2.7484 s1.805-1.2424,2.7484-0.6679S29.5059,30.1088,29.5059,30.1088z"
-        />
-        <path
-          fill="none"
-          stroke="#000000"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeMiterlimit="10"
-          strokeWidth="2"
-          d="M33.1089,37.006h6.1457c0.4011,0,0.7634,0.2397,0.9203,0.6089l1.1579,2.7245l-2.1792,1.1456 c-0.6156,0.3236-1.3654-0.0645-1.4567-0.754"
-        />
-        <path
-          fill="none"
-          stroke="#000000"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeMiterlimit="10"
-          strokeWidth="2"
-          d="M34.7606,40.763c-0.1132,0.6268-0.7757,0.9895-1.3647,0.7471l-2.3132-0.952l1.0899-2.9035 c0.1465-0.3901,0.5195-0.6486,0.9362-0.6486"
-        />
-        <path
-          fill="none"
-          stroke="#000000"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeMiterlimit="10"
-          strokeWidth="2"
-          d="M30.4364,50.0268c0,0-0.7187,8.7934,3.0072,9.9375c2.6459,0.8125,5.1497,0.5324,6.0625-0.25 c0.875-0.75,2.6323-4.4741,1.8267-9.6875"
-        />
-        <path
-          fill="#000000"
-          stroke="none"
-          d="M44.2636,30.1088c0,0,1.805,1.2424,2.7484,0.6679c0.9434-0.5745,1.2424-1.8051,0.6679-2.7484 c-0.5745-0.9434-1.805-1.2424-2.7484-0.6679C43.9881,27.9349,44.2636,30.1088,44.2636,30.1088z"
-        />
-        <path
-          fill="none"
-          stroke="#000000"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeMiterlimit="10"
-          strokeWidth="2"
-          d="M25.6245,42.8393c-0.475,3.6024,2.2343,5.7505,4.2847,6.8414c1.1968,0.6367,2.6508,0.5182,3.7176-0.3181l2.581-2.0233l2.581,2.0233 c1.0669,0.8363,2.5209,0.9548,3.7176,0.3181c2.0504-1.0909,4.7597-3.239,4.2847-6.8414"
-        />
-        <path
-          fill="none"
-          stroke="#000000"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeMiterlimit="10"
-          strokeWidth="2"
-          d="M19.9509,28.3572c-2.3166,5.1597-0.5084,13.0249,0.119,15.3759c0.122,0.4571,0.0755,0.9355-0.1271,1.3631l-1.9874,4.1937 c-0.623,1.3146-2.3934,1.5533-3.331,0.4409c-3.1921-3.7871-8.5584-11.3899-6.5486-16.686 c7.0625-18.6104,15.8677-18.1429,15.8677-18.1429c2.8453-1.9336,13.1042-6.9375,24.8125,0.875c0,0,8.6323-1.7175,14.9375,16.9375 c1.8036,5.3362-3.4297,12.8668-6.5506,16.6442c-0.9312,1.127-2.7162,0.8939-3.3423-0.4272l-1.9741-4.1656 c-0.2026-0.4275-0.2491-0.906-0.1271-1.3631c0.6275-2.3509,2.4356-10.2161,0.119-15.3759"
-        />
-        <path
-          fill="none"
-          stroke="#000000"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeMiterlimit="10"
-          strokeWidth="2"
-          d="M52.6309,46.4628c0,0-3.0781,6.7216-7.8049,8.2712"
-        />
-        <path fill="none" stroke="#000000" strokeLinecap="round" strokeLinejoin="round" strokeMiterlimit="10" strokeWidth="2" d="M19.437,46.969c0,0,3.0781,6.0823,7.8049,7.632" />
-        <line x1="36.2078" x2="36.2078" y1="47.3393" y2="44.3093" fill="none" stroke="#000000" strokeLinecap="round" strokeLinejoin="round" strokeMiterlimit="10" strokeWidth="2" />
-      </g>
-    </svg>
-  );
-};
-
-export default Bruno;
--- a/packages/bruno-app/src/components/BrunoSupport/index.js
+++ b/packages/bruno-app/src/components/BrunoSupport/index.js
@@ -1,41 +0,0 @@
-import React from 'react';
-import Modal from 'components/Modal/index';
-import { IconSpeakerphone, IconBrandTwitter, IconBrandGithub, IconBrandDiscord } from '@tabler/icons';
-import StyledWrapper from './StyledWrapper';
-
-const BrunoSupport = ({ onClose }) => {
-  return (
-    <StyledWrapper>
-      <Modal size="sm" title={'Support'} handleCancel={onClose} hideFooter={true}>
-        <div className="collection-options">
-          <div className="mt-2">
-            <a href="https://github.com/usebruno/bruno/issues" target="_blank" className="flex items-end">
-              <IconSpeakerphone size={18} strokeWidth={2} />
-              <span className="label ml-2">Report Issues</span>
-            </a>
-          </div>
-          <div className="mt-2">
-            <a href="https://discord.com/invite/KgcZUncpjq" target="_blank" className="flex items-end">
-              <IconBrandDiscord size={18} strokeWidth={2} />
-              <span className="label ml-2">Discord</span>
-            </a>
-          </div>
-          <div className="mt-2">
-            <a href="https://github.com/usebruno/bruno" target="_blank" className="flex items-end">
-              <IconBrandGithub size={18} strokeWidth={2} />
-              <span className="label ml-2">Github</span>
-            </a>
-          </div>
-          <div className="mt-2">
-            <a href="https://twitter.com/use_bruno" target="_blank" className="flex items-end">
-              <IconBrandTwitter size={18} strokeWidth={2} />
-              <span className="label ml-2">Twitter</span>
-            </a>
-          </div>
-        </div>
-      </Modal>
-    </StyledWrapper>
-  );
-};
-
-export default BrunoSupport;
--- a/packages/bruno-app/src/components/CodeEditor/StyledWrapper.js
+++ b/packages/bruno-app/src/components/CodeEditor/StyledWrapper.js
@@ -1,35 +0,0 @@
-import styled from 'styled-components';
-
-const StyledWrapper = styled.div`
-  div.CodeMirror {
-    background: ${(props) => props.theme.codemirror.bg};
-    border: solid 1px ${(props) => props.theme.codemirror.border};
-  }
-
-  textarea.cm-editor {
-    position: relative;
-  }
-
-  // Todo: dark mode temporary fix
-  // Clean this
-  .cm-s-monokai span.cm-property, .cm-s-monokai span.cm-attribute {
-    color: #9cdcfe !important;
-  }
-
-  .cm-s-monokai span.cm-string {
-    color: #ce9178 !important;
-  }
-
-  .cm-s-monokai span.cm-number{
-    color: #b5cea8 !important;
-  }
-
-  .cm-s-monokai span.cm-atom{
-    color: #569cd6 !important;
-  }
-
-  .cm-variable-valid{color: green}
-  .cm-variable-invalid{color: red}
-`;
-
-export default StyledWrapper;
--- a/packages/bruno-app/src/components/Dropdown/StyledWrapper.js
+++ b/packages/bruno-app/src/components/Dropdown/StyledWrapper.js
@@ -1,53 +0,0 @@
-import styled from 'styled-components';
-
-const Wrapper = styled.div`
-  .dropdown-toggle {
-    &:hover {
-      color: black;
-    }
-  }
-
-  .tippy-box {
-    min-width: 135px;
-    font-size: 0.8125rem;
-    color: ${(props) => props.theme.dropdown.color};
-    background-color: ${(props) => props.theme.dropdown.bg};
-    box-shadow: ${(props) => props.theme.dropdown.shadow};
-    border-radius: 3px;
-
-    .tippy-content {
-      padding-left: 0;
-      padding-right: 0;
-      padding-top: 0.25rem;
-      padding-bottom: 0.25rem;
-
-      .label-item {
-        display: flex;
-        align-items: center;
-        padding: 0.35rem 0.6rem;
-        background-color: ${(props) => props.theme.dropdown.labelBg};
-      }
-
-      .dropdown-item {
-        display: flex;
-        align-items: center;
-        padding: 0.35rem 0.6rem;
-        cursor: pointer;
-
-        .icon {
-          color: ${(props) => props.theme.dropdown.iconColor};
-        }
-
-        &:hover {
-          background-color: ${(props) => props.theme.dropdown.hoverBg};
-        }
-
-        &.border-top {
-          border-top: solid 1px ${(props) => props.theme.dropdown.seperator};
-        }
-      }
-    }
-  }
-`;
-
-export default Wrapper;
--- a/packages/bruno-app/src/components/Dropdown/index.js
+++ b/packages/bruno-app/src/components/Dropdown/index.js
@@ -1,15 +0,0 @@
-import React from 'react';
-import Tippy from '@tippyjs/react';
-import StyledWrapper from './StyledWrapper';
-
-const Dropdown = ({ icon, children, onCreate, placement }) => {
-  return (
-    <StyledWrapper className="dropdown">
-      <Tippy content={children} placement={placement || 'bottom-end'} animation={false} arrow={false} onCreate={onCreate} interactive={true} trigger="click" appendTo="parent">
-        {icon}
-      </Tippy>
-    </StyledWrapper>
-  );
-};
-
-export default Dropdown;
--- a/packages/bruno-app/src/components/Environments/EnvironmentSelector/index.js
+++ b/packages/bruno-app/src/components/Environments/EnvironmentSelector/index.js
@@ -1,81 +0,0 @@
-import React, { useRef, forwardRef, useState } from 'react';
-import find from 'lodash/find';
-import Dropdown from 'components/Dropdown';
-import { selectEnvironment } from 'providers/ReduxStore/slices/collections/actions';
-import { IconSettings, IconCaretDown, IconDatabase } from '@tabler/icons';
-import EnvironmentSettings from '../EnvironmentSettings';
-import toast from 'react-hot-toast';
-import { useDispatch } from 'react-redux';
-import StyledWrapper from './StyledWrapper';
-
-const EnvironmentSelector = ({ collection }) => {
-  const dispatch = useDispatch();
-  const dropdownTippyRef = useRef();
-  const [openSettingsModal, setOpenSettingsModal] = useState(false);
-  const { environments, activeEnvironmentUid } = collection;
-  const activeEnvironment = activeEnvironmentUid ? find(environments, (e) => e.uid === activeEnvironmentUid) : null;
-
-  const Icon = forwardRef((props, ref) => {
-    return (
-      <div ref={ref} className="current-enviroment flex items-center justify-center pl-3 pr-2 py-1 select-none">
-        {activeEnvironment ? activeEnvironment.name : 'No Environment'}
-        <IconCaretDown className="caret" size={14} strokeWidth={2} />
-      </div>
-    );
-  });
-
-  const onDropdownCreate = (ref) => (dropdownTippyRef.current = ref);
-
-  const onSelect = (environment) => {
-    dispatch(selectEnvironment(environment ? environment.uid : null, collection.uid))
-      .then(() => {
-        if (environment) {
-          toast.success(`Environment changed to ${environment.name}`);
-        } else {
-          toast.success(`No Environments are active now`);
-        }
-      })
-      .catch((err) => console.log(err) && toast.error('An error occured while selecting the environment'));
-  };
-
-  return (
-    <StyledWrapper>
-      <div className="flex items-center cursor-pointer environment-selector">
-        <Dropdown onCreate={onDropdownCreate} icon={<Icon />} placement="bottom-end">
-          {environments && environments.length
-            ? environments.map((e) => (
-                <div
-                  className="dropdown-item"
-                  key={e.uid}
-                  onClick={() => {
-                    onSelect(e);
-                    dropdownTippyRef.current.hide();
-                  }}
-                >
-                  <IconDatabase size={18} strokeWidth={1.5} /> <span className="ml-2">{e.name}</span>
-                </div>
-              ))
-            : null}
-          <div
-            className="dropdown-item"
-            onClick={() => {
-              dropdownTippyRef.current.hide();
-              onSelect(null);
-            }}
-          >
-            <span>No Environment</span>
-          </div>
-          <div className="dropdown-item border-top" onClick={() => setOpenSettingsModal(true)}>
-            <div className="pr-2 text-gray-600">
-              <IconSettings size={18} strokeWidth={1.5} />
-            </div>
-            <span>Configure</span>
-          </div>
-        </Dropdown>
-      </div>
-      {openSettingsModal && <EnvironmentSettings collection={collection} onClose={() => setOpenSettingsModal(false)} />}
-    </StyledWrapper>
-  );
-};
-
-export default EnvironmentSelector;
--- a/packages/bruno-app/src/components/Environments/EnvironmentSettings/CreateEnvironment/index.js
+++ b/packages/bruno-app/src/components/Environments/EnvironmentSettings/CreateEnvironment/index.js
@@ -1,70 +0,0 @@
-import React, { useEffect, useRef } from 'react';
-import Portal from 'components/Portal/index';
-import Modal from 'components/Modal/index';
-import toast from 'react-hot-toast';
-import { useFormik } from 'formik';
-import { addEnvironment } from 'providers/ReduxStore/slices/collections/actions';
-import * as Yup from 'yup';
-import { useDispatch } from 'react-redux';
-
-const CreateEnvironment = ({ collection, onClose }) => {
-  const dispatch = useDispatch();
-  const inputRef = useRef();
-  const formik = useFormik({
-    enableReinitialize: true,
-    initialValues: {
-      name: ''
-    },
-    validationSchema: Yup.object({
-      name: Yup.string().min(1, 'must be atleast 1 characters').max(50, 'must be 50 characters or less').required('name is required')
-    }),
-    onSubmit: (values) => {
-      dispatch(addEnvironment(values.name, collection.uid))
-        .then(() => {
-          toast.success('Environment created in collection');
-          onClose();
-        })
-        .catch(() => toast.error('An error occured while created the environment'));
-    }
-  });
-
-  useEffect(() => {
-    if (inputRef && inputRef.current) {
-      inputRef.current.focus();
-    }
-  }, [inputRef]);
-
-  const onSubmit = () => {
-    formik.handleSubmit();
-  };
-
-  return (
-    <Portal>
-      <Modal size="sm" title={'Create Environment'} confirmText="Create" handleConfirm={onSubmit} handleCancel={onClose}>
-        <form className="bruno-form" onSubmit={formik.handleSubmit}>
-          <div>
-            <label htmlFor="name" className="block font-semibold">
-              Environment Name
-            </label>
-            <input
-              id="environment-name"
-              type="text"
-              name="name"
-              ref={inputRef}
-              className="block textbox mt-2 w-full"
-              autoComplete="off"
-              autoCorrect="off"
-              autoCapitalize="off"
-              spellCheck="false"
-              onChange={formik.handleChange}
-              value={formik.values.name || ''}
-            />
-            {formik.touched.name && formik.errors.name ? <div className="text-red-500">{formik.errors.name}</div> : null}
-          </div>
-        </form>
-      </Modal>
-    </Portal>
-  );
-};
-
-export default CreateEnvironment;
--- a/packages/bruno-app/src/components/Environments/EnvironmentSettings/DeleteEnvironment/index.js
+++ b/packages/bruno-app/src/components/Environments/EnvironmentSettings/DeleteEnvironment/index.js
@@ -1,31 +0,0 @@
-import React from 'react';
-import Portal from 'components/Portal/index';
-import toast from 'react-hot-toast';
-import Modal from 'components/Modal/index';
-import { deleteEnvironment } from 'providers/ReduxStore/slices/collections/actions';
-import { useDispatch } from 'react-redux';
-import StyledWrapper from './StyledWrapper';
-
-const DeleteEnvironment = ({ onClose, environment, collection }) => {
-  const dispatch = useDispatch();
-  const onConfirm = () => {
-    dispatch(deleteEnvironment(environment.uid, collection.uid))
-      .then(() => {
-        toast.success('Environment deleted successfully');
-        onClose();
-      })
-      .catch(() => toast.error('An error occured while deleting the environment'));
-  };
-
-  return (
-    <Portal>
-      <StyledWrapper>
-        <Modal size="sm" title={'Delete Environment'} confirmText="Delete" handleConfirm={onConfirm} handleCancel={onClose}>
-          Are you sure you want to delete <span className="font-semibold">{environment.name}</span> ?
-        </Modal>
-      </StyledWrapper>
-    </Portal>
-  );
-};
-
-export default DeleteEnvironment;
--- a/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/index.js
+++ b/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/index.js
@@ -1,129 +0,0 @@
-import React, { useReducer } from 'react';
-import toast from 'react-hot-toast';
-import cloneDeep from 'lodash/cloneDeep';
-import { IconTrash } from '@tabler/icons';
-import { useDispatch } from 'react-redux';
-import { saveEnvironment } from 'providers/ReduxStore/slices/collections/actions';
-import reducer from './reducer';
-import StyledWrapper from './StyledWrapper';
-
-const EnvironmentVariables = ({ environment, collection }) => {
-  const dispatch = useDispatch();
-  const [state, reducerDispatch] = useReducer(reducer, { hasChanges: false, variables: environment.variables || [] });
-  const { variables, hasChanges } = state;
-
-  const saveChanges = () => {
-    dispatch(saveEnvironment(cloneDeep(variables), environment.uid, collection.uid))
-      .then(() => {
-        toast.success('Changes saved successfully');
-        reducerDispatch({
-          type: 'CHANGES_SAVED'
-        });
-      })
-      .catch(() => toast.error('An error occured while saving the changes'));
-  };
-
-  const addVariable = () => {
-    reducerDispatch({
-      type: 'ADD_VAR'
-    });
-  };
-
-  const handleVarChange = (e, _variable, type) => {
-    const variable = cloneDeep(_variable);
-    switch (type) {
-      case 'name': {
-        variable.name = e.target.value;
-        break;
-      }
-      case 'value': {
-        variable.value = e.target.value;
-        break;
-      }
-      case 'enabled': {
-        variable.enabled = e.target.checked;
-        break;
-      }
-    }
-    reducerDispatch({
-      type: 'UPDATE_VAR',
-      variable
-    });
-  };
-
-  const handleRemoveVars = (variable) => {
-    reducerDispatch({
-      type: 'DELETE_VAR',
-      variable
-    });
-  };
-
-  return (
-    <StyledWrapper className="w-full mt-6 mb-6">
-      <table>
-        <thead>
-          <tr>
-            <td>Name</td>
-            <td>Value</td>
-            <td></td>
-          </tr>
-        </thead>
-        <tbody>
-          {variables && variables.length
-            ? variables.map((variable, index) => {
-                return (
-                  <tr key={variable.uid}>
-                    <td>
-                      <input
-                        type="text"
-                        autoComplete="off"
-                        autoCorrect="off"
-                        autoCapitalize="off"
-                        spellCheck="false"
-                        value={variable.name}
-                        className="mousetrap"
-                        onChange={(e) => handleVarChange(e, variable, 'name')}
-                      />
-                    </td>
-                    <td>
-                      <input
-                        type="text"
-                        autoComplete="off"
-                        autoCorrect="off"
-                        autoCapitalize="off"
-                        spellCheck="false"
-                        value={variable.value}
-                        className="mousetrap"
-                        onChange={(e) => handleVarChange(e, variable, 'value')}
-                      />
-                    </td>
-                    <td>
-                      <div className="flex items-center">
-                        <input type="checkbox" checked={variable.enabled} className="mr-3 mousetrap" onChange={(e) => handleVarChange(e, variable, 'enabled')} />
-                        <button onClick={() => handleRemoveVars(variable)}>
-                          <IconTrash strokeWidth={1.5} size={20} />
-                        </button>
-                      </div>
-                    </td>
-                  </tr>
-                );
-              })
-            : null}
-        </tbody>
-      </table>
-
-      <div>
-        <button className="btn-add-param text-link pr-2 py-3 mt-2 select-none" onClick={addVariable}>
-          + Add Variable
-        </button>
-      </div>
-
-      <div>
-        <button type="submit" className="submit btn btn-md btn-secondary mt-2" disabled={!hasChanges} onClick={saveChanges}>
-          Save
-        </button>
-      </div>
-    </StyledWrapper>
-  );
-};
-export default EnvironmentVariables;
--- a/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/reducer.js
+++ b/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/reducer.js
@@ -1,50 +0,0 @@
-import produce from 'immer';
-import find from 'lodash/find';
-import filter from 'lodash/filter';
-import { uuid } from 'utils/common';
-
-const reducer = (state, action) => {
-  switch (action.type) {
-    case 'ADD_VAR': {
-      return produce(state, (draft) => {
-        draft.variables.push({
-          uid: uuid(),
-          name: '',
-          value: '',
-          type: 'text',
-          enabled: true
-        });
-        draft.hasChanges = true;
-      });
-    }
-
-    case 'UPDATE_VAR': {
-      return produce(state, (draft) => {
-        const variable = find(draft.variables, (v) => v.uid === action.variable.uid);
-        variable.name = action.variable.name;
-        variable.value = action.variable.value;
-        variable.enabled = action.variable.enabled;
-        draft.hasChanges = true;
-      });
-    }
-
-    case 'DELETE_VAR': {
-      return produce(state, (draft) => {
-        draft.variables = filter(draft.variables, (v) => v.uid !== action.variable.uid);
-        draft.hasChanges = true;
-      });
-    }
-
-    case 'CHANGES_SAVED': {
-      return produce(state, (draft) => {
-        draft.hasChanges = false;
-      });
-    }
-
-    default: {
-      return state;
-    }
-  }
-};
-
-export default reducer;
--- a/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/index.js
+++ b/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/index.js
@@ -1,33 +0,0 @@
-import React, { useState } from 'react';
-import { IconEdit, IconTrash, IconDatabase } from '@tabler/icons';
-import EnvironmentVariables from './EnvironmentVariables';
-import RenameEnvironment from '../../RenameEnvironment';
-import DeleteEnvironment from '../../DeleteEnvironment';
-
-const EnvironmentDetails = ({ environment, collection }) => {
-  const [openEditModal, setOpenEditModal] = useState(false);
-  const [openDeleteModal, setOpenDeleteModal] = useState(false);
-
-  return (
-    <div className="px-6 flex-grow flex flex-col pt-6" style={{ maxWidth: '700px' }}>
-      {openEditModal && <RenameEnvironment onClose={() => setOpenEditModal(false)} environment={environment} collection={collection} />}
-      {openDeleteModal && <DeleteEnvironment onClose={() => setOpenDeleteModal(false)} environment={environment} collection={collection} />}
-      <div className="flex">
-        <div className="flex flex-grow items-center">
-          <IconDatabase className="cursor-pointer" size={20} strokeWidth={1.5} />
-          <span className="ml-1 font-semibold">{environment.name}</span>
-        </div>
-        <div className="flex gap-x-4 pl-4">
-          <IconEdit className="cursor-pointer" size={20} strokeWidth={1.5} onClick={() => setOpenEditModal(true)} />
-          <IconTrash className="cursor-pointer" size={20} strokeWidth={1.5} onClick={() => setOpenDeleteModal(true)} />
-        </div>
-      </div>
-
-      <div>
-        <EnvironmentVariables key={environment.uid} environment={environment} collection={collection} />
-      </div>
-    </div>
-  );
-};
-
-export default EnvironmentDetails;
--- a/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/StyledWrapper.js
+++ b/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/StyledWrapper.js
@@ -1,52 +0,0 @@
-import styled from 'styled-components';
-
-const StyledWrapper = styled.div`
-  margin-inline: -1rem;
-  margin-block: -1.5rem;
-
-  background-color: ${(props) => props.theme.collection.environment.settings.bg};
-
-  .environments-sidebar {
-    background-color: ${(props) => props.theme.collection.environment.settings.sidebar.bg};
-    border-right: solid 1px ${(props) => props.theme.collection.environment.settings.sidebar.borderRight};
-    min-height: 400px;
-  }
-
-  .environment-item {
-    min-width: 150px;
-    display: block;
-    position: relative;
-    cursor: pointer;
-    padding: 8px 10px;
-    border-left: solid 2px transparent;
-    text-decoration: none;
-
-    &:hover {
-      text-decoration: none;
-      background-color: ${(props) => props.theme.collection.environment.settings.item.hoverBg};
-    }
-  }
-
-  .active {
-    background-color: ${(props) => props.theme.collection.environment.settings.item.active.bg} !important;
-    border-left: solid 2px ${(props) => props.theme.collection.environment.settings.item.border};
-    &:hover {
-      background-color: ${(props) => props.theme.collection.environment.settings.item.active.hoverBg} !important;
-    }
-  }
-
-  .btn-create-environment {
-    padding: 8px 10px;
-    cursor: pointer;
-    border-bottom: none;
-    color: ${(props) => props.theme.textLink};
-
-    &:hover {
-      span {
-        text-decoration: underline;
-      }
-    }
-  }
-`;
-
-export default StyledWrapper;
--- a/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/index.js
+++ b/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/index.js
@@ -1,43 +0,0 @@
-import React, { useEffect, useState, forwardRef, useRef } from 'react';
-import EnvironmentDetails from './EnvironmentDetails';
-import CreateEnvironment from '../CreateEnvironment/index';
-import StyledWrapper from './StyledWrapper';
-
-const EnvironmentList = ({ collection }) => {
-  const { environments } = collection;
-  const [selectedEnvironment, setSelectedEnvironment] = useState(null);
-  const [openCreateModal, setOpenCreateModal] = useState(false);
-
-  useEffect(() => {
-    setSelectedEnvironment(environments && environments.length ? environments[0] : null);
-  }, [environments]);
-
-  if (!selectedEnvironment) {
-    return null;
-  }
-
-  return (
-    <StyledWrapper>
-      {openCreateModal && <CreateEnvironment collection={collection} onClose={() => setOpenCreateModal(false)} />}
-      <div className="flex">
-        <div>
-          <div className="environments-sidebar">
-            {environments &&
-              environments.length &&
-              environments.map((env) => (
-                <div key={env.uid} className={selectedEnvironment.uid === env.uid ? 'environment-item active' : 'environment-item'} onClick={() => setSelectedEnvironment(env)}>
-                  <span>{env.name}</span>
-                </div>
-              ))}
-            <div className="btn-create-environment" onClick={() => setOpenCreateModal(true)}>
-              + <span>Create</span>
-            </div>
-          </div>
-        </div>
-        <EnvironmentDetails environment={selectedEnvironment} collection={collection} />
-      </div>
-    </StyledWrapper>
-  );
-};
-
-export default EnvironmentList;
--- a/packages/bruno-app/src/components/Environments/EnvironmentSettings/RenameEnvironment/index.js
+++ b/packages/bruno-app/src/components/Environments/EnvironmentSettings/RenameEnvironment/index.js
@@ -1,70 +0,0 @@
-import React, { useEffect, useRef } from 'react';
-import Portal from 'components/Portal/index';
-import Modal from 'components/Modal/index';
-import toast from 'react-hot-toast';
-import { useFormik } from 'formik';
-import { renameEnvironment } from 'providers/ReduxStore/slices/collections/actions';
-import * as Yup from 'yup';
-import { useDispatch } from 'react-redux';
-
-const RenameEnvironment = ({ onClose, environment, collection }) => {
-  const dispatch = useDispatch();
-  const inputRef = useRef();
-  const formik = useFormik({
-    enableReinitialize: true,
-    initialValues: {
-      name: environment.name
-    },
-    validationSchema: Yup.object({
-      name: Yup.string().min(1, 'must be atleast 1 characters').max(50, 'must be 50 characters or less').required('name is required')
-    }),
-    onSubmit: (values) => {
-      dispatch(renameEnvironment(values.name, environment.uid, collection.uid))
-        .then(() => {
-          toast.success('Environment renamed successfully');
-          onClose();
-        })
-        .catch(() => toast.error('An error occured while renaming the environment'));
-    }
-  });
-
-  useEffect(() => {
-    if (inputRef && inputRef.current) {
-      inputRef.current.focus();
-    }
-  }, [inputRef]);
-
-  const onSubmit = () => {
-    formik.handleSubmit();
-  };
-
-  return (
-    <Portal>
-      <Modal size="sm" title={'Rename Environment'} confirmText="Rename" handleConfirm={onSubmit} handleCancel={onClose}>
-        <form className="bruno-form" onSubmit={formik.handleSubmit}>
-          <div>
-            <label htmlFor="name" className="block font-semibold">
-              Environment Name
-            </label>
-            <input
-              id="environment-name"
-              type="text"
-              name="name"
-              ref={inputRef}
-              className="block textbox mt-2 w-full"
-              autoComplete="off"
-              autoCorrect="off"
-              autoCapitalize="off"
-              spellCheck="false"
-              onChange={formik.handleChange}
-              value={formik.values.name || ''}
-            />
-            {formik.touched.name && formik.errors.name ? <div className="text-red-500">{formik.errors.name}</div> : null}
-          </div>
-        </form>
-      </Modal>
-    </Portal>
-  );
-};
-
-export default RenameEnvironment;
--- a/packages/bruno-app/src/components/Environments/EnvironmentSettings/StyledWrapper.js
+++ b/packages/bruno-app/src/components/Environments/EnvironmentSettings/StyledWrapper.js
@@ -1,13 +0,0 @@
-import styled from 'styled-components';
-
-const StyledWrapper = styled.div`
-  button.btn-create-environment {
-    &:hover {
-      span {
-        text-decoration: underline;
-      }
-    }
-  }
-`;
-
-export default StyledWrapper;
--- a/packages/bruno-app/src/components/Environments/EnvironmentSettings/index.js
+++ b/packages/bruno-app/src/components/Environments/EnvironmentSettings/index.js
@@ -1,34 +0,0 @@
-import Modal from 'components/Modal/index';
-import React, { useState } from 'react';
-import CreateEnvironment from './CreateEnvironment';
-import EnvironmentList from './EnvironmentList';
-import StyledWrapper from './StyledWrapper';
-
-const EnvironmentSettings = ({ collection, onClose }) => {
-  const { environments } = collection;
-  const [openCreateModal, setOpenCreateModal] = useState(false);
-
-  if (!environments || !environments.length) {
-    return (
-      <StyledWrapper>
-        <Modal size="md" title="Environments" confirmText={'Close'} handleConfirm={onClose} handleCancel={onClose} hideCancel={true}>
-          {openCreateModal && <CreateEnvironment collection={collection} onClose={() => setOpenCreateModal(false)} />}
-          <div className="text-center">
-            <p>No environments found!</p>
-            <button className="btn-create-environment text-link pr-2 py-3 mt-2 select-none" onClick={() => setOpenCreateModal(true)}>
-              + <span>Create Environment</span>
-            </button>
-          </div>
-        </Modal>
-      </StyledWrapper>
-    );
-  }
-
-  return (
-    <Modal size="lg" title="Environments" handleCancel={onClose} hideFooter={true}>
-      <EnvironmentList collection={collection} />
-    </Modal>
-  );
-};
-
-export default EnvironmentSettings;
--- a/packages/bruno-app/src/components/Icons/Send/index.js
+++ b/packages/bruno-app/src/components/Icons/Send/index.js
@@ -1,17 +0,0 @@
-import React from 'react';
-
-const SendIcon = ({color, width}) => {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width={width}
-      height={width}
-      viewBox="0 0 48 48"
-    >
-      <path fill={color} d="M4.02 42l41.98-18-41.98-18-.02 14 30 4-30 4z"/>
-      <path d="M0 0h48v48h-48z" fill="none"/>
-    </svg>
-  );
-}
-
-export default SendIcon;
--- a/packages/bruno-app/src/components/Portal/index.js
+++ b/packages/bruno-app/src/components/Portal/index.js
@@ -1,8 +0,0 @@
-import { createPortal } from 'react-dom';
-
-function Portal({ children, wrapperId }) {
-  wrapperId = wrapperId || 'bruno-app-body';
-
-  return createPortal(children, document.getElementById(wrapperId));
-}
-export default Portal;
--- a/packages/bruno-app/src/components/RequestPane/FormUrlEncodedParams/StyledWrapper.js
+++ b/packages/bruno-app/src/components/RequestPane/FormUrlEncodedParams/StyledWrapper.js
@@ -1,48 +0,0 @@
-import styled from 'styled-components';
-
-const Wrapper = styled.div`
-  table {
-    width: 100%;
-    border-collapse: collapse;
-    font-weight: 600;
-
-    thead,
-    td {
-      border: 1px solid ${(props) => props.theme.table.border};
-    }
-
-    thead {
-      color: ${(props) => props.theme.table.thead.color};
-      font-size: 0.8125rem;
-      user-select: none;
-    }
-    td {
-      padding: 6px 10px;
-    }
-  }
-
-  .btn-add-param {
-    font-size: 0.8125rem;
-  }
-
-  input[type='text'] {
-    width: 100%;
-    border: solid 1px transparent;
-    outline: none !important;
-    color: ${(props) => props.theme.table.input.color};
-    background: transparent;
-
-    &:focus {
-      outline: none !important;
-      border: solid 1px transparent;
-    }
-  }
-
-  input[type='checkbox'] {
-    cursor: pointer;
-    position: relative;
-    top: 1px;
-  }
-`;
-
-export default Wrapper;
--- a/packages/bruno-app/src/components/RequestPane/FormUrlEncodedParams/index.js
+++ b/packages/bruno-app/src/components/RequestPane/FormUrlEncodedParams/index.js
@@ -1,121 +0,0 @@
-import React from 'react';
-import get from 'lodash/get';
-import cloneDeep from 'lodash/cloneDeep';
-import { IconTrash } from '@tabler/icons';
-import { useDispatch } from 'react-redux';
-import { addFormUrlEncodedParam, updateFormUrlEncodedParam, deleteFormUrlEncodedParam } from 'providers/ReduxStore/slices/collections';
-import SingleLineEditor from 'components/SingleLineEditor';
-import { sendRequest, saveRequest } from 'providers/ReduxStore/slices/collections/actions';
-import StyledWrapper from './StyledWrapper';
-
-const FormUrlEncodedParams = ({ item, collection }) => {
-  const dispatch = useDispatch();
-  const params = item.draft ? get(item, 'draft.request.body.formUrlEncoded') : get(item, 'request.body.formUrlEncoded');
-
-  const addParam = () => {
-    dispatch(
-      addFormUrlEncodedParam({
-        itemUid: item.uid,
-        collectionUid: collection.uid
-      })
-    );
-  };
-
-  const onSave = () => dispatch(saveRequest(item.uid, collection.uid));
-  const handleRun = () => dispatch(sendRequest(item, collection.uid));
-  const handleParamChange = (e, _param, type) => {
-    const param = cloneDeep(_param);
-    switch (type) {
-      case 'name': {
-        param.name = e.target.value;
-        break;
-      }
-      case 'value': {
-        param.value = e.target.value;
-        break;
-      }
-      case 'enabled': {
-        param.enabled = e.target.checked;
-        break;
-      }
-    }
-    dispatch(
-      updateFormUrlEncodedParam({
-        param: param,
-        itemUid: item.uid,
-        collectionUid: collection.uid
-      })
-    );
-  };
-
-  const handleRemoveParams = (param) => {
-    dispatch(
-      deleteFormUrlEncodedParam({
-        paramUid: param.uid,
-        itemUid: item.uid,
-        collectionUid: collection.uid
-      })
-    );
-  };
-
-  return (
-    <StyledWrapper className="w-full">
-      <table>
-        <thead>
-          <tr>
-            <td>Key</td>
-            <td>Value</td>
-            <td></td>
-          </tr>
-        </thead>
-        <tbody>
-          {params && params.length
-            ? params.map((param, index) => {
-                return (
-                  <tr key={param.uid}>
-                    <td>
-                      <input
-                        type="text"
-                        autoComplete="off"
-                        autoCorrect="off"
-                        autoCapitalize="off"
-                        spellCheck="false"
-                        value={param.name}
-                        className="mousetrap"
-                        onChange={(e) => handleParamChange(e, param, 'name')}
-                      />
-                    </td>
-                    <td>
-                      <SingleLineEditor 
-                        value={param.value}
-                        onSave={onSave}
-                        onChange={(newValue) => handleParamChange({
-                          target: {
-                            value: newValue
-                          }
-                        }, param, 'value')}
-                        onRun={handleRun}
-                        collection={collection}
-                      />
-                    </td>
-                    <td>
-                      <div className="flex items-center">
-                        <input type="checkbox" checked={param.enabled} className="mr-3 mousetrap" onChange={(e) => handleParamChange(e, param, 'enabled')} />
-                        <button onClick={() => handleRemoveParams(param)}>
-                          <IconTrash strokeWidth={1.5} size={20} />
-                        </button>
-                      </div>
-                    </td>
-                  </tr>
-                );
-              })
-            : null}
-        </tbody>
-      </table>
-      <button className="btn-add-param text-link pr-2 py-3 mt-2 select-none" onClick={addParam}>
-        + Add Param
-      </button>
-    </StyledWrapper>
-  );
-};
-export default FormUrlEncodedParams;
--- a/packages/bruno-app/src/components/RequestPane/GraphQLRequestPane/index.js
+++ b/packages/bruno-app/src/components/RequestPane/GraphQLRequestPane/index.js
@@ -1,136 +0,0 @@
-import React, { useEffect } from 'react';
-import find from 'lodash/find';
-import get from 'lodash/get';
-import classnames from 'classnames';
-import { IconRefresh, IconLoader2, IconBook, IconDownload } from '@tabler/icons';
-import { useSelector, useDispatch } from 'react-redux';
-import { updateRequestPaneTab } from 'providers/ReduxStore/slices/tabs';
-import QueryEditor from 'components/RequestPane/QueryEditor';
-import RequestHeaders from 'components/RequestPane/RequestHeaders';
-import { useTheme } from 'providers/Theme';
-import { updateRequestGraphqlQuery } from 'providers/ReduxStore/slices/collections';
-import { sendRequest, saveRequest } from 'providers/ReduxStore/slices/collections/actions';
-import useGraphqlSchema from './useGraphqlSchema';
-import StyledWrapper from './StyledWrapper';
-
-const GraphQLRequestPane = ({ item, collection, leftPaneWidth, onSchemaLoad, toggleDocs, handleGqlClickReference }) => {
-  const dispatch = useDispatch();
-  const tabs = useSelector((state) => state.tabs.tabs);
-  const activeTabUid = useSelector((state) => state.tabs.activeTabUid);
-  const query = item.draft ? get(item, 'draft.request.body.graphql.query') : get(item, 'request.body.graphql.query');
-  const url = item.draft ? get(item, 'draft.request.url') : get(item, 'request.url');
-  const {
-    storedTheme
-  } = useTheme();
-  
-  let {
-    schema,
-    loadSchema,
-    isLoading: isSchemaLoading,
-    error: schemaError
-  } = useGraphqlSchema(url);
-
-  const loadGqlSchema = () => {
-    if(!isSchemaLoading) {
-      loadSchema();
-    }
-  };
-
-  useEffect(() => {
-    if(onSchemaLoad) {
-      onSchemaLoad(schema);
-    }
-  }, [schema]);
-
-  const onQueryChange = (value) => {
-    dispatch(
-      updateRequestGraphqlQuery({
-        query: value,
-        itemUid: item.uid,
-        collectionUid: collection.uid
-      })
-    );
-  };
-  const onRun = () => dispatch(sendRequest(item, collection.uid));
-  const onSave = () => dispatch(saveRequest(item.uid, collection.uid));
-
-  const selectTab = (tab) => {
-    dispatch(
-      updateRequestPaneTab({
-        uid: item.uid,
-        requestPaneTab: tab
-      })
-    );
-  };
-
-  const getTabPanel = (tab) => {
-    switch (tab) {
-      case 'query': {
-        return <QueryEditor
-          collection={collection}
-          theme={storedTheme}
-          schema={schema}
-          width={leftPaneWidth}
-          onSave={onSave}
-          value={query}
-          onRun={onRun}
-          onEdit={onQueryChange}
-          onClickReference={handleGqlClickReference}
-        />;
-      }
-      case 'headers': {
-        return <RequestHeaders item={item} collection={collection} />;
-      }
-      default: {
-        return <div className="mt-4">404 | Not found</div>;
-      }
-    }
-  };
-
-  if (!activeTabUid) {
-    return <div>Something went wrong</div>;
-  }
-
-  const focusedTab = find(tabs, (t) => t.uid === activeTabUid);
-  if (!focusedTab || !focusedTab.uid || !focusedTab.requestPaneTab) {
-    return <div className="pb-4 px-4">An error occured!</div>;
-  }
-
-  const getTabClassname = (tabName) => {
-    return classnames(`tab select-none ${tabName}`, {
-      active: tabName === focusedTab.requestPaneTab
-    });
-  };
-
-  return (
-    <StyledWrapper className="flex flex-col h-full relative">
-      <div className="flex items-center tabs" role="tablist">
-        <div className={getTabClassname('query')} role="tab" onClick={() => selectTab('query')}>
-          Query
-        </div>
-        <div className={getTabClassname('headers')} role="tab" onClick={() => selectTab('headers')}>
-          Headers
-        </div>
-        <div className="flex flex-grow justify-end items-center" style={{fontSize: 13}}>
-          <div className='flex items-center cursor-pointer hover:underline' onClick={loadGqlSchema}>
-            {isSchemaLoading ? (
-              <IconLoader2 className="animate-spin" size={18} strokeWidth={1.5}/>
-            ) : null}
-            {!isSchemaLoading && !schema ? <IconDownload size={18} strokeWidth={1.5}/> : null }
-            {!isSchemaLoading && schema ? <IconRefresh size={18} strokeWidth={1.5}/> : null }
-            <span className='ml-1'>{schema ? 'Schema' : 'Load Schema'}</span>
-          </div>
-          <div
-            className='flex items-center cursor-pointer hover:underline ml-2'
-            onClick={toggleDocs}
-          >
-            <IconBook size={18} strokeWidth={1.5} /><span className='ml-1'>Docs</span>
-          </div>
-        </div>
-      </div>
-      <section className="flex w-full mt-5">{getTabPanel(focusedTab.requestPaneTab)}</section>
-    </StyledWrapper>
-  );
-};
-
-export default GraphQLRequestPane;
--- a/packages/bruno-app/src/components/RequestPane/GraphQLRequestPane/useGraphqlSchema.js
+++ b/packages/bruno-app/src/components/RequestPane/GraphQLRequestPane/useGraphqlSchema.js
@@ -1,70 +0,0 @@
-import { useState } from 'react';
-import toast from 'react-hot-toast';
-import { getIntrospectionQuery, buildClientSchema } from 'graphql';
-import { simpleHash } from 'utils/common';
-
-const schemaHashPrefix = 'bruno.graphqlSchema';
-
-const fetchSchema = (endpoint) => {
-  const introspectionQuery = getIntrospectionQuery();
-  const queryParams = {
-    query: introspectionQuery
-  };
-
-  return fetch(endpoint, {
-    method: 'POST',
-    headers: {
-      Accept: 'application/json',
-      'Content-Type': 'application/json'
-    },
-    body: JSON.stringify(queryParams)
-  });
-}
-
-const useGraphqlSchema = (endpoint) => {
-  const localStorageKey = `${schemaHashPrefix}.${simpleHash(endpoint)}`;
-  const [error, setError] = useState(null);
-  const [isLoading, setIsLoading] = useState(false);
-  const [schema, setSchema] = useState(() => {
-    try {
-      const saved = localStorage.getItem(localStorageKey);
-      if(!saved) {
-        return null;
-      }
-      return buildClientSchema(JSON.parse(saved));
-    } catch {
-      localStorage.setItem(localStorageKey, null);
-      return null;
-    }
-  });
-
-  const loadSchema = () => {
-    setIsLoading(true);
-    fetchSchema(endpoint)
-      .then((res) => res.json())
-      .then((s) => {
-        if (s && s.data) {
-          setSchema(buildClientSchema(s.data));
-          setIsLoading(false);
-          localStorage.setItem(localStorageKey, JSON.stringify(s.data));
-          toast.success('Graphql Schema loaded successfully');
-        } else {
-          return Promise.reject(new Error('An error occurred while introspecting schema'));
-        }
-      })
-      .catch((err) => {
-        setIsLoading(false);
-        setError(err);
-        toast.error('Error occured while loading Graphql Schema');
-      });
-  };
-
-  return {
-    isLoading,
-    schema,
-    loadSchema,
-    error
-  };
-};
-
-export default useGraphqlSchema;
--- a/packages/bruno-app/src/components/RequestPane/MultipartFormParams/StyledWrapper.js
+++ b/packages/bruno-app/src/components/RequestPane/MultipartFormParams/StyledWrapper.js
@@ -1,49 +0,0 @@
-import styled from 'styled-components';
-
-const Wrapper = styled.div`
-  table {
-    width: 100%;
-    border-collapse: collapse;
-    font-weight: 600;
-
-    thead,
-    td {
-      border: 1px solid ${(props) => props.theme.table.border};
-    }
-
-    thead {
-      color: ${(props) => props.theme.table.thead.color};
-      font-size: 0.8125rem;
-      user-select: none;
-    }
-    td {
-      padding: 6px 10px;
-    }
-  }
-
-  .btn-add-param {
-    font-size: 0.8125rem;
-  }
-
-  input[type='text'] {
-    width: 100%;
-    border: solid 1px transparent;
-    outline: none !important;
-    color: ${(props) => props.theme.table.input.color};
-    background: transparent;
-
-
-    &:focus {
-      outline: none !important;
-      border: solid 1px transparent;
-    }
-  }
-
-  input[type='checkbox'] {
-    cursor: pointer;
-    position: relative;
-    top: 1px;
-  }
-`;
-
-export default Wrapper;
--- a/packages/bruno-app/src/components/RequestPane/MultipartFormParams/index.js
+++ b/packages/bruno-app/src/components/RequestPane/MultipartFormParams/index.js
@@ -1,121 +0,0 @@
-import React from 'react';
-import get from 'lodash/get';
-import cloneDeep from 'lodash/cloneDeep';
-import { IconTrash } from '@tabler/icons';
-import { useDispatch } from 'react-redux';
-import { addMultipartFormParam, updateMultipartFormParam, deleteMultipartFormParam } from 'providers/ReduxStore/slices/collections';
-import SingleLineEditor from 'components/SingleLineEditor';
-import { sendRequest, saveRequest } from 'providers/ReduxStore/slices/collections/actions';
-import StyledWrapper from './StyledWrapper';
-
-const MultipartFormParams = ({ item, collection }) => {
-  const dispatch = useDispatch();
-  const params = item.draft ? get(item, 'draft.request.body.multipartForm') : get(item, 'request.body.multipartForm');
-
-  const addParam = () => {
-    dispatch(
-      addMultipartFormParam({
-        itemUid: item.uid,
-        collectionUid: collection.uid
-      })
-    );
-  };
-
-  const onSave = () => dispatch(saveRequest(item.uid, collection.uid));
-  const handleRun = () => dispatch(sendRequest(item, collection.uid));
-  const handleParamChange = (e, _param, type) => {
-    const param = cloneDeep(_param);
-    switch (type) {
-      case 'name': {
-        param.name = e.target.value;
-        break;
-      }
-      case 'value': {
-        param.value = e.target.value;
-        break;
-      }
-      case 'enabled': {
-        param.enabled = e.target.checked;
-        break;
-      }
-    }
-    dispatch(
-      updateMultipartFormParam({
-        param: param,
-        itemUid: item.uid,
-        collectionUid: collection.uid
-      })
-    );
-  };
-
-  const handleRemoveParams = (param) => {
-    dispatch(
-      deleteMultipartFormParam({
-        paramUid: param.uid,
-        itemUid: item.uid,
-        collectionUid: collection.uid
-      })
-    );
-  };
-
-  return (
-    <StyledWrapper className="w-full">
-      <table>
-        <thead>
-          <tr>
-            <td>Key</td>
-            <td>Value</td>
-            <td></td>
-          </tr>
-        </thead>
-        <tbody>
-          {params && params.length
-            ? params.map((param, index) => {
-                return (
-                  <tr key={param.uid}>
-                    <td>
-                      <input
-                        type="text"
-                        autoComplete="off"
-                        autoCorrect="off"
-                        autoCapitalize="off"
-                        spellCheck="false"
-                        value={param.name}
-                        className="mousetrap"
-                        onChange={(e) => handleParamChange(e, param, 'name')}
-                      />
-                    </td>
-                    <td>
-                      <SingleLineEditor 
-                        onSave={onSave}
-                        value={param.value} 
-                        onChange={(newValue) => handleParamChange({
-                          target: {
-                            value: newValue
-                          }
-                        }, param, 'value')}
-                        onRun={handleRun}
-                        collection={collection}
-                      />
-                    </td>
-                    <td>
-                      <div className="flex items-center">
-                        <input type="checkbox" checked={param.enabled} className="mr-3 mousetrap" onChange={(e) => handleParamChange(e, param, 'enabled')} />
-                        <button onClick={() => handleRemoveParams(param)}>
-                          <IconTrash strokeWidth={1.5} size={20} />
-                        </button>
-                      </div>
-                    </td>
-                  </tr>
-                );
-              })
-            : null}
-        </tbody>
-      </table>
-      <button className="btn-add-param text-link pr-2 py-3 mt-2 select-none" onClick={addParam}>
-        + Add Param
-      </button>
-    </StyledWrapper>
-  );
-};
-export default MultipartFormParams;
--- a/packages/bruno-app/src/components/RequestPane/QueryEditor/StyledWrapper.js
+++ b/packages/bruno-app/src/components/RequestPane/QueryEditor/StyledWrapper.js
@@ -1,37 +0,0 @@
-import styled from 'styled-components';
-
-const StyledWrapper = styled.div`
-  div.CodeMirror {
-    background: ${(props) => props.theme.codemirror.bg};
-    border: solid 1px ${(props) => props.theme.codemirror.border};
-    /* todo: find a better way */
-    height: calc(100vh - 220px);
-  }
-
-  textarea.cm-editor {
-    position: relative;
-  }
-
-  // Todo: dark mode temporary fix
-  // Clean this
-  .cm-s-monokai span.cm-property, .cm-s-monokai span.cm-attribute {
-    color: #9cdcfe !important;
-  }
-
-  .cm-s-monokai span.cm-string {
-    color: #ce9178 !important;
-  }
-
-  .cm-s-monokai span.cm-number{
-    color: #b5cea8 !important;
-  }
-
-  .cm-s-monokai span.cm-atom{
-    color: #569cd6 !important;
-  }
-
-  .cm-variable-valid{color: green}
-  .cm-variable-invalid{color: red}
-`;
-
-export default StyledWrapper;
--- a/packages/bruno-app/src/components/RequestPane/QueryEditor/onHasCompletion.js
+++ b/packages/bruno-app/src/components/RequestPane/QueryEditor/onHasCompletion.js
@@ -1,87 +0,0 @@
-/**
- *  Copyright (c) 2021 GraphQL Contributors.
- *
- *  This source code is licensed under the MIT license found in the
- *  LICENSE file in the root directory of this source tree.
- */
-import escapeHTML from 'escape-html';
-import MD from 'markdown-it';
-
-import { GraphQLNonNull, GraphQLList } from 'graphql';
-
-const md = new MD();
-
-/**
- * Render a custom UI for CodeMirror's hint which includes additional info
- * about the type and description for the selected context.
- */
-export default function onHasCompletion(_cm, data, onHintInformationRender) {
-  const CodeMirror = require('codemirror');
-
-  let information;
-  let deprecation;
-
-  // When a hint result is selected, we augment the UI with information.
-  CodeMirror.on(data, 'select', (ctx, el) => {
-    // Only the first time (usually when the hint UI is first displayed)
-    // do we create the information nodes.
-    if (!information) {
-      const hintsUl = el.parentNode;
-
-      // This "information" node will contain the additional info about the
-      // highlighted typeahead option.
-      information = document.createElement('div');
-      information.className = 'CodeMirror-hint-information';
-      hintsUl.appendChild(information);
-
-      // This "deprecation" node will contain info about deprecated usage.
-      deprecation = document.createElement('div');
-      deprecation.className = 'CodeMirror-hint-deprecation';
-      hintsUl.appendChild(deprecation);
-
-      // When CodeMirror attempts to remove the hint UI, we detect that it was
-      // removed and in turn remove the information nodes.
-      let onRemoveFn;
-      hintsUl.addEventListener(
-        'DOMNodeRemoved',
-        (onRemoveFn = (event) => {
-          if (event.target === hintsUl) {
-            hintsUl.removeEventListener('DOMNodeRemoved', onRemoveFn);
-            information = null;
-            deprecation = null;
-            onRemoveFn = null;
-          }
-        })
-      );
-    }
-
-    // Now that the UI has been set up, add info to information.
-    const description = ctx.description ? md.render(ctx.description) : 'Self descriptive.';
-    const type = ctx.type ? '<span className="infoType">' + renderType(ctx.type) + '</span>' : '';
-
-    information.innerHTML = '<div className="content">' + (description.slice(0, 3) === '<p>' ? '<p>' + type + description.slice(3) : type + description) + '</div>';
-
-    if (ctx && deprecation && ctx.deprecationReason) {
-      const reason = ctx.deprecationReason ? md.render(ctx.deprecationReason) : '';
-      deprecation.innerHTML = '<span className="deprecation-label">Deprecated</span>' + reason;
-      deprecation.style.display = 'block';
-    } else if (deprecation) {
-      deprecation.style.display = 'none';
-    }
-
-    // Additional rendering?
-    if (onHintInformationRender) {
-      onHintInformationRender(information);
-    }
-  });
-}
-
-function renderType(type) {
-  if (type instanceof GraphQLNonNull) {
-    return `${renderType(type.ofType)}!`;
-  }
-  if (type instanceof GraphQLList) {
-    return `[${renderType(type.ofType)}]`;
-  }
-  return `<a className="typeName">${escapeHTML(type.name)}</a>`;
-}
--- a/packages/bruno-app/src/components/RequestPane/QueryParams/index.js
+++ b/packages/bruno-app/src/components/RequestPane/QueryParams/index.js
@@ -1,124 +0,0 @@
-import React from 'react';
-import get from 'lodash/get';
-import cloneDeep from 'lodash/cloneDeep';
-import { IconTrash } from '@tabler/icons';
-import { useDispatch } from 'react-redux';
-import { addQueryParam, updateQueryParam, deleteQueryParam } from 'providers/ReduxStore/slices/collections';
-import SingleLineEditor from 'components/SingleLineEditor';
-import { sendRequest, saveRequest } from 'providers/ReduxStore/slices/collections/actions';
-
-import StyledWrapper from './StyledWrapper';
-
-const QueryParams = ({ item, collection }) => {
-  const dispatch = useDispatch();
-  const params = item.draft ? get(item, 'draft.request.params') : get(item, 'request.params');
-
-  const handleAddParam = () => {
-    dispatch(
-      addQueryParam({
-        itemUid: item.uid,
-        collectionUid: collection.uid
-      })
-    );
-  };
-
-  const onSave = () => dispatch(saveRequest(item.uid, collection.uid));
-  const handleRun = () => dispatch(sendRequest(item, collection.uid));
-  const handleParamChange = (e, _param, type) => {
-    const param = cloneDeep(_param);
-
-    switch (type) {
-      case 'name': {
-        param.name = e.target.value;
-        break;
-      }
-      case 'value': {
-        param.value = e.target.value;
-        break;
-      }
-      case 'enabled': {
-        param.enabled = e.target.checked;
-        break;
-      }
-    }
-
-    dispatch(
-      updateQueryParam({
-        param,
-        itemUid: item.uid,
-        collectionUid: collection.uid
-      })
-    );
-  };
-
-  const handleRemoveParam = (param) => {
-    dispatch(
-      deleteQueryParam({
-        paramUid: param.uid,
-        itemUid: item.uid,
-        collectionUid: collection.uid
-      })
-    );
-  };
-
-  return (
-    <StyledWrapper className="w-full">
-      <table>
-        <thead>
-          <tr>
-            <td>Key</td>
-            <td>Value</td>
-            <td></td>
-          </tr>
-        </thead>
-        <tbody>
-          {params && params.length
-            ? params.map((param, index) => {
-                return (
-                  <tr key={param.uid}>
-                    <td>
-                      <input
-                        type="text"
-                        autoComplete="off"
-                        autoCorrect="off"
-                        autoCapitalize="off"
-                        spellCheck="false"
-                        value={param.name}
-                        className="mousetrap"
-                        onChange={(e) => handleParamChange(e, param, 'name')}
-                      />
-                    </td>
-                    <td>
-                      <SingleLineEditor 
-                        value={param.value}
-                        onSave={onSave}
-                        onChange={(newValue) => handleParamChange({
-                          target: {
-                            value: newValue
-                          }
-                        }, param, 'value')}
-                        onRun={handleRun}
-                        collection={collection}
-                      />
-                    </td>
-                    <td>
-                      <div className="flex items-center">
-                        <input type="checkbox" checked={param.enabled} className="mr-3 mousetrap" onChange={(e) => handleParamChange(e, param, 'enabled')} />
-                        <button onClick={() => handleRemoveParam(param)}>
-                          <IconTrash strokeWidth={1.5} size={20} />
-                        </button>
-                      </div>
-                    </td>
-                  </tr>
-                );
-              })
-            : null}
-        </tbody>
-      </table>
-      <button className="btn-add-param text-link pr-2 py-3 mt-2 select-none" onClick={handleAddParam}>
-        +&nbsp;<span>Add Param</span>
-      </button>
-    </StyledWrapper>
-  );
-};
-export default QueryParams;
--- a/packages/bruno-app/src/components/RequestPane/QueryUrl/HttpMethodSelector/index.js
+++ b/packages/bruno-app/src/components/RequestPane/QueryUrl/HttpMethodSelector/index.js
@@ -1,53 +0,0 @@
-import React, { useRef, forwardRef } from 'react';
-import { IconCaretDown } from '@tabler/icons';
-import Dropdown from 'components/Dropdown';
-import StyledWrapper from './StyledWrapper';
-
-const HttpMethodSelector = ({ method, onMethodSelect }) => {
-  const dropdownTippyRef = useRef();
-  const onDropdownCreate = (ref) => (dropdownTippyRef.current = ref);
-
-  const Icon = forwardRef((props, ref) => {
-    return (
-      <div ref={ref} className="flex w-full items-center pl-3 py-1 select-none uppercase">
-        <div className="flex-grow font-medium" id="create-new-request-method">{method}</div>
-        <div>
-          <IconCaretDown className="caret ml-2 mr-2" size={14} strokeWidth={2} />
-        </div>
-      </div>
-    );
-  });
-
-  const handleMethodSelect = (verb) => onMethodSelect(verb);
-
-  const Verb = ({ verb }) => {
-    return (
-      <div
-        className="dropdown-item"
-        onClick={() => {
-          dropdownTippyRef.current.hide();
-          handleMethodSelect(verb);
-        }}
-      >
-        {verb}
-      </div>
-    );
-  };
-
-  return (
-    <StyledWrapper>
-      <div className="flex items-center cursor-pointer method-selector">
-        <Dropdown onCreate={onDropdownCreate} icon={<Icon />} placement="bottom-start">
-          <Verb verb="GET" />
-          <Verb verb="POST" />
-          <Verb verb="PUT" />
-          <Verb verb="DELETE" />
-          <Verb verb="PATCH" />
-          <Verb verb="OPTIONS" />
-          <Verb verb="HEAD" />
-        </Dropdown>
-      </div>
-    </StyledWrapper>
-  );
-};
-export default HttpMethodSelector;
--- a/packages/bruno-app/src/components/RequestPane/QueryUrl/index.js
+++ b/packages/bruno-app/src/components/RequestPane/QueryUrl/index.js
@@ -1,60 +0,0 @@
-import React from 'react';
-import get from 'lodash/get';
-import { useDispatch } from 'react-redux';
-import { requestUrlChanged, updateRequestMethod } from 'providers/ReduxStore/slices/collections';
-import { saveRequest } from 'providers/ReduxStore/slices/collections/actions';
-import HttpMethodSelector from './HttpMethodSelector';
-import { useTheme } from 'providers/Theme';
-import SendIcon from 'components/Icons/Send';
-import SingleLineEditor from 'components/SingleLineEditor';
-import StyledWrapper from './StyledWrapper';
-
-const QueryUrl = ({ item, collection, handleRun }) => {
-  const { theme } = useTheme();
-  const dispatch = useDispatch();
-  const method = item.draft ? get(item, 'draft.request.method') : get(item, 'request.method');
-  const url = item.draft ? get(item, 'draft.request.url') : get(item, 'request.url');
-
-  const onSave = () => dispatch(saveRequest(item.uid, collection.uid));
-  const onUrlChange = (value) => {
-    dispatch(
-      requestUrlChanged({
-        itemUid: item.uid,
-        collectionUid: collection.uid,
-        url: value
-      })
-    );
-  };
-
-  const onMethodSelect = (verb) => {
-    dispatch(
-      updateRequestMethod({
-        method: verb,
-        itemUid: item.uid,
-        collectionUid: collection.uid
-      })
-    );
-  };
-
-  return (
-    <StyledWrapper className="flex items-center">
-      <div className="flex items-center h-full method-selector-container">
-        <HttpMethodSelector method={method} onMethodSelect={onMethodSelect} />
-      </div>
-      <div className="flex items-center flex-grow input-container h-full">
-        <SingleLineEditor 
-          value={url} 
-          onSave={onSave}
-          onChange={(newValue) => onUrlChange(newValue)}
-          onRun={handleRun}
-          collection={collection}
-        />
-        <div className="flex items-center h-full mr-2 cursor-pointer" id="send-request" onClick={handleRun}>
-          <SendIcon color={theme.requestTabPanel.url.icon} width={22}/>
-        </div>
-      </div>
-    </StyledWrapper>
-  );
-};
-
-export default QueryUrl;
--- a/packages/bruno-app/src/components/RequestPane/RequestBody/RequestBodyMode/index.js
+++ b/packages/bruno-app/src/components/RequestPane/RequestBody/RequestBodyMode/index.js
@@ -1,100 +0,0 @@
-import React, { useRef, forwardRef } from 'react';
-import get from 'lodash/get';
-import { IconCaretDown } from '@tabler/icons';
-import Dropdown from 'components/Dropdown';
-import { useDispatch } from 'react-redux';
-import { updateRequestBodyMode } from 'providers/ReduxStore/slices/collections';
-import { humanizeRequestBodyMode } from 'utils/collections';
-import StyledWrapper from './StyledWrapper';
-
-const RequestBodyMode = ({ item, collection }) => {
-  const dispatch = useDispatch();
-  const dropdownTippyRef = useRef();
-  const onDropdownCreate = (ref) => (dropdownTippyRef.current = ref);
-  const bodyMode = item.draft ? get(item, 'draft.request.body.mode') : get(item, 'request.body.mode');
-
-  const Icon = forwardRef((props, ref) => {
-    return (
-      <div ref={ref} className="flex items-center justify-center pl-3 py-1 select-none">
-        {humanizeRequestBodyMode(bodyMode)} <IconCaretDown className="caret ml-2 mr-2" size={14} strokeWidth={2} />
-      </div>
-    );
-  });
-
-  const onModeChange = (value) => {
-    dispatch(
-      updateRequestBodyMode({
-        itemUid: item.uid,
-        collectionUid: collection.uid,
-        mode: value
-      })
-    );
-  };
-
-  return (
-    <StyledWrapper>
-      <div className="inline-flex items-center cursor-pointer body-mode-selector">
-        <Dropdown onCreate={onDropdownCreate} icon={<Icon />} placement="bottom-end">
-          <div className="label-item font-medium">Form</div>
-          <div
-            className="dropdown-item"
-            onClick={() => {
-              dropdownTippyRef.current.hide();
-              onModeChange('multipartForm');
-            }}
-          >
-            Multipart Form
-          </div>
-          <div
-            className="dropdown-item"
-            onClick={() => {
-              dropdownTippyRef.current.hide();
-              onModeChange('formUrlEncoded');
-            }}
-          >
-            Form Url Encoded
-          </div>
-          <div className="label-item font-medium">Raw</div>
-          <div
-            className="dropdown-item"
-            onClick={() => {
-              dropdownTippyRef.current.hide();
-              onModeChange('json');
-            }}
-          >
-            JSON
-          </div>
-          <div
-            className="dropdown-item"
-            onClick={() => {
-              dropdownTippyRef.current.hide();
-              onModeChange('xml');
-            }}
-          >
-            XML
-          </div>
-          <div
-            className="dropdown-item"
-            onClick={() => {
-              dropdownTippyRef.current.hide();
-              onModeChange('text');
-            }}
-          >
-            TEXT
-          </div>
-          <div className="label-item font-medium">Other</div>
-          <div
-            className="dropdown-item"
-            onClick={() => {
-              dropdownTippyRef.current.hide();
-              onModeChange('none');
-            }}
-          >
-            No Body
-          </div>
-        </Dropdown>
-      </div>
-    </StyledWrapper>
-  );
-};
-export default RequestBodyMode;
--- a/packages/bruno-app/src/components/RequestPane/RequestHeaders/index.js
+++ b/packages/bruno-app/src/components/RequestPane/RequestHeaders/index.js
@@ -1,121 +0,0 @@
-import React from 'react';
-import get from 'lodash/get';
-import cloneDeep from 'lodash/cloneDeep';
-import { IconTrash } from '@tabler/icons';
-import { useDispatch } from 'react-redux';
-import { addRequestHeader, updateRequestHeader, deleteRequestHeader } from 'providers/ReduxStore/slices/collections';
-import { sendRequest, saveRequest } from 'providers/ReduxStore/slices/collections/actions';
-import SingleLineEditor from 'components/SingleLineEditor';
-import StyledWrapper from './StyledWrapper';
-
-const RequestHeaders = ({ item, collection }) => {
-  const dispatch = useDispatch();
-  const headers = item.draft ? get(item, 'draft.request.headers') : get(item, 'request.headers');
-
-  const addHeader = () => {
-    dispatch(
-      addRequestHeader({
-        itemUid: item.uid,
-        collectionUid: collection.uid
-      })
-    );
-  };
-
-  const onSave = () => dispatch(saveRequest(item.uid, collection.uid));
-  const handleRun = () => dispatch(sendRequest(item, collection.uid));
-  const handleHeaderValueChange = (e, _header, type) => {
-    const header = cloneDeep(_header);
-    switch (type) {
-      case 'name': {
-        header.name = e.target.value;
-        break;
-      }
-      case 'value': {
-        header.value = e.target.value;
-        break;
-      }
-      case 'enabled': {
-        header.enabled = e.target.checked;
-        break;
-      }
-    }
-    dispatch(
-      updateRequestHeader({
-        header: header,
-        itemUid: item.uid,
-        collectionUid: collection.uid
-      })
-    );
-  };
-
-  const handleRemoveHeader = (header) => {
-    dispatch(
-      deleteRequestHeader({
-        headerUid: header.uid,
-        itemUid: item.uid,
-        collectionUid: collection.uid
-      })
-    );
-  };
-
-  return (
-    <StyledWrapper className="w-full">
-      <table>
-        <thead>
-          <tr>
-            <td>Key</td>
-            <td>Value</td>
-            <td></td>
-          </tr>
-        </thead>
-        <tbody>
-          {headers && headers.length
-            ? headers.map((header, index) => {
-                return (
-                  <tr key={header.uid}>
-                    <td>
-                      <input
-                        type="text"
-                        autoComplete="off"
-                        autoCorrect="off"
-                        autoCapitalize="off"
-                        spellCheck="false"
-                        value={header.name}
-                        className="mousetrap"
-                        onChange={(e) => handleHeaderValueChange(e, header, 'name')}
-                      />
-                    </td>
-                    <td>
-                      <SingleLineEditor
-                        value={header.value}
-                        onSave={onSave}
-                        onChange={(newValue) => handleHeaderValueChange({
-                          target: {
-                            value: newValue
-                          }
-                        }, header, 'value')}
-                        onRun={handleRun}
-                        collection={collection}
-                      />
-                    </td>
-                    <td>
-                      <div className="flex items-center">
-                        <input type="checkbox" checked={header.enabled} className="mr-3 mousetrap" onChange={(e) => handleHeaderValueChange(e, header, 'enabled')} />
-                        <button onClick={() => handleRemoveHeader(header)}>
-                          <IconTrash strokeWidth={1.5} size={20} />
-                        </button>
-                      </div>
-                    </td>
-                  </tr>
-                );
-              })
-            : null}
-        </tbody>
-      </table>
-      <button className="btn-add-header text-link pr-2 py-3 mt-2 select-none" onClick={addHeader}>
-        + Add Header
-      </button>
-    </StyledWrapper>
-  );
-};
-export default RequestHeaders;
--- a/packages/bruno-app/src/components/RequestPane/SaveRequest/index.js
+++ b/packages/bruno-app/src/components/RequestPane/SaveRequest/index.js
@@ -1,48 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { faFolder } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import StyledWrapper from './StyledWrapper';
-import Modal from 'components//Modal';
-
-const SaveRequest = ({ items, onClose }) => {
-  const [showFolders, setShowFolders] = useState([]);
-
-  useEffect(() => {
-    setShowFolders(items || []);
-  }, [items]);
-
-  const handleFolderClick = (folder) => {
-    let subFolders = [];
-    if (folder.items && folder.items.length) {
-      for (let item of folder.items) {
-        if (item.items) {
-          subFolders.push(item);
-        }
-      }
-
-      if (subFolders.length) {
-        setShowFolders(subFolders);
-      }
-    }
-  };
-
-  return (
-    <StyledWrapper>
-      <Modal size="md" title="Save Request" confirmText="Save" cancelText="Cancel" handleCancel={onClose} handleConfirm={onClose}>
-        <p className="mb-2">Select a folder to save request:</p>
-        <div className="folder-list">
-          {showFolders && showFolders.length
-            ? showFolders.map((folder) => (
-                <div key={folder.uid} className="folder-name" onClick={() => handleFolderClick(folder)}>
-                  <FontAwesomeIcon className="mr-3 text-gray-500" icon={faFolder} style={{ fontSize: 20 }} />
-                  {folder.name}
-                </div>
-              ))
-            : null}
-        </div>
-      </Modal>
-    </StyledWrapper>
-  );
-};
-
-export default SaveRequest;
--- a/packages/bruno-app/src/components/RequestPane/Script/index.js
+++ b/packages/bruno-app/src/components/RequestPane/Script/index.js
@@ -1,45 +0,0 @@
-import React from 'react';
-import get from 'lodash/get';
-import { useDispatch } from 'react-redux';
-import CodeEditor from 'components/CodeEditor';
-import { updateRequestScript } from 'providers/ReduxStore/slices/collections';
-import { sendRequest, saveRequest } from 'providers/ReduxStore/slices/collections/actions';
-import { useTheme } from 'providers/Theme';
-import StyledWrapper from './StyledWrapper';
-
-const Script = ({ item, collection }) => {
-  const dispatch = useDispatch();
-  const script = item.draft ? get(item, 'draft.request.script') : get(item, 'request.script');
-
-  const {
-    storedTheme
-  } = useTheme();
-
-  const onEdit = (value) => {
-    dispatch(
-      updateRequestScript({
-        script: value,
-        itemUid: item.uid,
-        collectionUid: collection.uid
-      })
-    );
-  };
-
-  const onRun = () => dispatch(sendRequest(item, collection.uid));
-  const onSave = () => dispatch(saveRequest(item.uid, collection.uid));
-
-  return (
-    <StyledWrapper className="w-full">
-      <CodeEditor
-        collection={collection} value={script || ''}
-        theme={storedTheme}
-        onEdit={onEdit}
-        mode='javascript'
-        onRun={onRun}
-        onSave={onSave}
-      />
-    </StyledWrapper>
-  );
-};
-
-export default Script;
--- a/packages/bruno-app/src/components/RequestPane/Tests/index.js
+++ b/packages/bruno-app/src/components/RequestPane/Tests/index.js
@@ -1,45 +0,0 @@
-import React from 'react';
-import get from 'lodash/get';
-import { useDispatch } from 'react-redux';
-import CodeEditor from 'components/CodeEditor';
-import { updateRequestTests } from 'providers/ReduxStore/slices/collections';
-import { sendRequest, saveRequest } from 'providers/ReduxStore/slices/collections/actions';
-import { useTheme } from 'providers/Theme';
-import StyledWrapper from './StyledWrapper';
-
-const Tests = ({ item, collection }) => {
-  const dispatch = useDispatch();
-  const tests = item.draft ? get(item, 'draft.request.tests') : get(item, 'request.tests');
-
-  const {
-    storedTheme
-  } = useTheme();
-
-  const onEdit = (value) => {
-    dispatch(
-      updateRequestTests({
-        tests: value,
-        itemUid: item.uid,
-        collectionUid: collection.uid
-      })
-    );
-  };
-
-  const onRun = () => dispatch(sendRequest(item, collection.uid));
-  const onSave = () => dispatch(saveRequest(item.uid, collection.uid));
-
-  return (
-    <StyledWrapper className="w-full">
-      <CodeEditor
-        collection={collection} value={tests || ''}
-        theme={storedTheme}
-        onEdit={onEdit}
-        mode='javascript'
-        onRun={onRun}
-        onSave={onSave}
-      />
-    </StyledWrapper>
-  );
-};
-
-export default Tests;
--- a/packages/bruno-app/src/components/RequestTabPanel/RequestNotFound/index.js
+++ b/packages/bruno-app/src/components/RequestTabPanel/RequestNotFound/index.js
@@ -1,44 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { closeTabs } from 'providers/ReduxStore/slices/tabs';
-import { useDispatch } from 'react-redux';
-
-const RequestNotFound = ({ itemUid }) => {
-  const dispatch = useDispatch();
-  const [showErrorMessage, setShowErrorMessage] = useState(false);
-
-  const closeTab = () => {
-    dispatch(
-      closeTabs({
-        tabUids: [itemUid]
-      })
-    );
-  };
-
-  useEffect(() => {
-    setTimeout(() => {
-      setShowErrorMessage(true);
-    }, 300);
-  }, []);
-
-  // add a delay component in react that shows a loading spinner
-  // and then shows the error message after a delay
-  // this will prevent the error message from flashing on the screen
-
-  if(!showErrorMessage) {
-    return null;
-  }
-
-  return (
-    <div className="mt-6 px-6">
-      <div className="p-4 bg-orange-100 border-l-4 border-yellow-500 text-yellow-700 bg-yellow-100 p-4">
-        <div>Request no longer exists.</div>
-        <div className="mt-2">This can happen when the .bru file associated with this request was deleted on your filesystem.</div>
-      </div>
-      <button className="btn btn-md btn-secondary mt-6" onClick={closeTab}>
-        Close Tab
-      </button>
-    </div>
-  );
-};
-
-export default RequestNotFound;
--- a/packages/bruno-app/src/components/RequestTabPanel/StyledWrapper.js
+++ b/packages/bruno-app/src/components/RequestTabPanel/StyledWrapper.js
@@ -1,49 +0,0 @@
-import styled from 'styled-components';
-
-const StyledWrapper = styled.div`
-  &.dragging {
-    cursor: col-resize;
-  }
-
-  div.drag-request {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 10px;
-    padding: 0;
-    cursor: col-resize;
-    background: transparent;
-
-    div.drag-request-border {
-      display: flex;
-      height: 100%;
-      width: 1px;
-      border-left: solid 1px ${(props) => props.theme.requestTabPanel.dragbar.border};
-    }
-
-    &:hover div.drag-request-border {
-      border-left: solid 1px ${(props) => props.theme.requestTabPanel.dragbar.activeBorder};
-    }
-  }
-
-  div.graphql-docs-explorer-container {
-    background: white;
-    outline: none;
-    box-shadow: rgb(0 0 0 / 15%) 0px 0px 8px;
-    position: absolute;
-    right: 0px;
-    z-index: 2000;
-    width: 350px;
-    height: 100%;
-
-    div.doc-explorer-title {
-      text-align: left;
-    }
-
-    div.doc-explorer-rhs {
-      display: flex;
-    }
-  }
-`;
-
-export default StyledWrapper;
--- a/packages/bruno-app/src/components/RequestTabPanel/index.js
+++ b/packages/bruno-app/src/components/RequestTabPanel/index.js
@@ -1,177 +0,0 @@
-import React, { useState, useEffect, useRef } from 'react';
-import find from 'lodash/find';
-import toast from 'react-hot-toast';
-import { useSelector, useDispatch } from 'react-redux';
-import GraphQLRequestPane from 'components/RequestPane/GraphQLRequestPane';
-import HttpRequestPane from 'components/RequestPane/HttpRequestPane';
-import ResponsePane from 'components/ResponsePane';
-import Welcome from 'components/Welcome';
-import { findItemInCollection } from 'utils/collections';
-import { updateRequestPaneTabWidth } from 'providers/ReduxStore/slices/tabs';
-import { sendRequest } from 'providers/ReduxStore/slices/collections/actions';
-import RequestNotFound from './RequestNotFound';
-import QueryUrl from 'components/RequestPane/QueryUrl';
-import NetworkError from 'components/ResponsePane/NetworkError';
-import { DocExplorer } from '@usebruno/graphql-docs';
-
-import StyledWrapper from './StyledWrapper';
-
-const MIN_LEFT_PANE_WIDTH = 300;
-const MIN_RIGHT_PANE_WIDTH = 350;
-const DEFAULT_PADDING = 5;
-
-const RequestTabPanel = () => {
-  if (typeof window == 'undefined') {
-    return <div></div>;
-  }
-  const dispatch = useDispatch();
-  const tabs = useSelector((state) => state.tabs.tabs);
-  const activeTabUid = useSelector((state) => state.tabs.activeTabUid);
-  const collections = useSelector((state) => state.collections.collections);
-  const screenWidth = useSelector((state) => state.app.screenWidth);
-
-  let asideWidth = useSelector((state) => state.app.leftSidebarWidth);
-  const focusedTab = find(tabs, (t) => t.uid === activeTabUid);
-  const [leftPaneWidth, setLeftPaneWidth] = useState(focusedTab && focusedTab.requestPaneWidth ? focusedTab.requestPaneWidth : (screenWidth - asideWidth) / 2.2); // 2.2 so that request pane is relatively smaller
-  const [rightPaneWidth, setRightPaneWidth] = useState(screenWidth - asideWidth - leftPaneWidth - DEFAULT_PADDING);
-  const [dragging, setDragging] = useState(false);
-
-  // Not a recommended pattern here to have the child component
-  // make a callback to set state, but treating this as an exception
-  const docExplorerRef = useRef(null);
-  const [schema, setSchema] = useState(null);
-  const [showGqlDocs, setShowGqlDocs] = useState(false);
-  const onSchemaLoad = (schema) => setSchema(schema);
-  const toggleDocs = () => setShowGqlDocs((showGqlDocs) => !showGqlDocs);
-  const handleGqlClickReference = (reference) => {
-    if(docExplorerRef.current) {
-      docExplorerRef.current.showDocForReference(reference);
-    }
-    if(!showGqlDocs) {
-      setShowGqlDocs(true);
-    }
-  };
-
-  useEffect(() => {
-    const leftPaneWidth = (screenWidth - asideWidth) / 2.2;
-    setLeftPaneWidth(leftPaneWidth);
-  }, [screenWidth]);
-
-  useEffect(() => {
-    setRightPaneWidth(screenWidth - asideWidth - leftPaneWidth - DEFAULT_PADDING);
-  }, [screenWidth, asideWidth, leftPaneWidth]);
-
-  const handleMouseMove = (e) => {
-    if (dragging) {
-      e.preventDefault();
-      let leftPaneXPosition = e.clientX + 2;
-      if (leftPaneXPosition < (asideWidth+ DEFAULT_PADDING + MIN_LEFT_PANE_WIDTH) || leftPaneXPosition > (screenWidth - MIN_RIGHT_PANE_WIDTH )) {
-        return;
-      }
-      setLeftPaneWidth(leftPaneXPosition- asideWidth);
-      setRightPaneWidth(screenWidth - e.clientX - DEFAULT_PADDING);
-    }
-  };
-  const handleMouseUp = (e) => {
-    if (dragging) {
-      e.preventDefault();
-      setDragging(false);
-      dispatch(
-        updateRequestPaneTabWidth({
-          uid: activeTabUid,
-          requestPaneWidth: e.clientX - asideWidth - DEFAULT_PADDING
-        })
-      );
-    }
-  };
-  const handleDragbarMouseDown = (e) => {
-    e.preventDefault();
-    setDragging(true);
-  };
-
-  useEffect(() => {
-    document.addEventListener('mouseup', handleMouseUp);
-    document.addEventListener('mousemove', handleMouseMove);
-
-    return () => {
-      document.removeEventListener('mouseup', handleMouseUp);
-      document.removeEventListener('mousemove', handleMouseMove);
-    };
-  }, [dragging, asideWidth]);
-
-  if (!activeTabUid) {
-    return <Welcome />;
-  }
-
-  if (!focusedTab || !focusedTab.uid || !focusedTab.collectionUid) {
-    return <div className="pb-4 px-4">An error occured!</div>;
-  }
-
-  let collection = find(collections, (c) => c.uid === focusedTab.collectionUid);
-  if (!collection || !collection.uid) {
-    return <div className="pb-4 px-4">Collection not found!</div>;
-  }
-
-  const item = findItemInCollection(collection, activeTabUid);
-  if (!item || !item.uid) {
-    return <RequestNotFound itemUid={activeTabUid} />;
-  }
-
-  const handleRun = async () => {
-    dispatch(sendRequest(item, collection.uid)).catch((err) =>
-      toast.custom((t) => <NetworkError onClose={() => toast.dismiss(t.id)} />, {
-        duration: 5000
-      })
-    );
-  };
-
-  return (
-    <StyledWrapper className={`flex flex-col flex-grow relative ${dragging ? 'dragging' : ''}`}>
-      <div className="pt-4 pb-3 px-4">
-        <QueryUrl item={item} collection={collection} handleRun={handleRun} />
-      </div>
-      <section className="main flex flex-grow pb-4 relative">
-        <section className="request-pane">
-          <div className="px-4" style={{ width: `${Math.max(leftPaneWidth, MIN_LEFT_PANE_WIDTH)}px`, height: `calc(100% - ${DEFAULT_PADDING}px)` }}>
-            {item.type === 'graphql-request' ? (
-              <GraphQLRequestPane
-                item={item}
-                collection={collection}
-                leftPaneWidth={leftPaneWidth}
-                onSchemaLoad={onSchemaLoad}
-                toggleDocs={toggleDocs}
-                handleGqlClickReference={handleGqlClickReference}
-              />
-            ) : null}
-
-            {item.type === 'http-request' ? <HttpRequestPane item={item} collection={collection} leftPaneWidth={leftPaneWidth} /> : null}
-          </div>
-        </section>
-
-        <div className="drag-request" onMouseDown={handleDragbarMouseDown}>
-          <div className="drag-request-border" />
-        </div>
-
-        <section className="response-pane flex-grow">
-          <ResponsePane item={item} collection={collection} rightPaneWidth={rightPaneWidth} response={item.response} />
-        </section>
-      </section>
-
-      {item.type === 'graphql-request' ? (
-        <div className={`graphql-docs-explorer-container ${showGqlDocs ? '' : 'hidden'}`}>
-          <DocExplorer schema={schema} ref={(r) => docExplorerRef.current = r}>
-            <button
-              className='mr-2'
-              onClick={toggleDocs}
-              aria-label="Close Documentation Explorer"
-            >
-              {'\u2715'}
-            </button>
-          </DocExplorer>
-        </div>
-      ): null}
-    </StyledWrapper>
-  );
-};
-
-export default RequestTabPanel;
--- a/packages/bruno-app/src/components/RequestTabs/CollectionToolBar/StyledWrapper.js
+++ b/packages/bruno-app/src/components/RequestTabs/CollectionToolBar/StyledWrapper.js
@@ -1,5 +0,0 @@
-import styled from 'styled-components';
-
-const StyledWrapper = styled.div``;
-
-export default StyledWrapper;
--- a/packages/bruno-app/src/components/RequestTabs/RequestTab/RequestTabNotFound.js
+++ b/packages/bruno-app/src/components/RequestTabs/RequestTab/RequestTabNotFound.js
@@ -1,42 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { IconAlertTriangle } from '@tabler/icons';
-
-const RequestTabNotFound = ({handleCloseClick}) => {
-  const [showErrorMessage, setShowErrorMessage] = useState(false);
-
-  // add a delay component in react that shows a loading spinner
-  // and then shows the error message after a delay
-  // this will prevent the error message from flashing on the screen
-  useEffect(() => {
-    setTimeout(() => {
-      setShowErrorMessage(true);
-    }, 300);
-  }, []);
-
-  if(!showErrorMessage) {
-    return null;
-  }
-
-  return (
-    <>
-      <div className="flex items-center tab-label pl-2">
-        {showErrorMessage ? (
-          <>
-            <IconAlertTriangle size={18} strokeWidth={1.5} className="text-yellow-600" />
-            <span className="ml-1">Not Found</span>
-          </>
-        ) : null}
-      </div>
-      <div className="flex px-2 close-icon-container" onClick={(e) => handleCloseClick(e)}>
-        <svg focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" className="close-icon">
-          <path
-            fill="currentColor"
-            d="M207.6 256l107.72-107.72c6.23-6.23 6.23-16.34 0-22.58l-25.03-25.03c-6.23-6.23-16.34-6.23-22.58 0L160 208.4 52.28 100.68c-6.23-6.23-16.34-6.23-22.58 0L4.68 125.7c-6.23 6.23-6.23 16.34 0 22.58L112.4 256 4.68 363.72c-6.23 6.23-6.23 16.34 0 22.58l25.03 25.03c6.23 6.23 16.34 6.23 22.58 0L160 303.6l107.72 107.72c6.23 6.23 16.34 6.23 22.58 0l25.03-25.03c6.23-6.23 6.23-16.34 0-22.58L207.6 256z"
-          ></path>
-        </svg>
-      </div>
-    </>
-  );
-};
-
-export default RequestTabNotFound;
--- a/packages/bruno-app/src/components/RequestTabs/RequestTab/index.js
+++ b/packages/bruno-app/src/components/RequestTabs/RequestTab/index.js
@@ -1,99 +0,0 @@
-import React from 'react';
-import get from 'lodash/get';
-import { closeTabs } from 'providers/ReduxStore/slices/tabs';
-import { useDispatch } from 'react-redux';
-import { findItemInCollection } from 'utils/collections';
-import StyledWrapper from './StyledWrapper';
-import RequestTabNotFound from './RequestTabNotFound';
-
-const RequestTab = ({ tab, collection }) => {
-  const dispatch = useDispatch();
-
-  const handleCloseClick = (event) => {
-    event.stopPropagation();
-    event.preventDefault();
-    dispatch(
-      closeTabs({
-        tabUids: [tab.uid]
-      })
-    );
-  };
-
-  const getMethodColor = (method = '') => {
-    let color = '';
-    method = method.toLocaleLowerCase();
-    switch (method) {
-      case 'get': {
-        color = 'var(--color-method-get)';
-        break;
-      }
-      case 'post': {
-        color = 'var(--color-method-post)';
-        break;
-      }
-      case 'put': {
-        color = 'var(--color-method-put)';
-        break;
-      }
-      case 'delete': {
-        color = 'var(--color-method-delete)';
-        break;
-      }
-      case 'patch': {
-        color = 'var(--color-method-patch)';
-        break;
-      }
-      case 'options': {
-        color = 'var(--color-method-options)';
-        break;
-      }
-      case 'head': {
-        color = 'var(--color-method-head)';
-        break;
-      }
-    }
-
-    return color;
-  };
-
-  const item = findItemInCollection(collection, tab.uid);
-
-  if (!item) {
-    return (
-      <StyledWrapper className="flex items-center justify-between tab-container px-1">
-        <RequestTabNotFound handleCloseClick={handleCloseClick} />
-      </StyledWrapper>
-    );
-  }
-
-  const method = item.draft ? get(item, 'draft.request.method') : get(item, 'request.method');
-
-  return (
-    <StyledWrapper className="flex items-center justify-between tab-container px-1">
-      <div className="flex items-baseline tab-label pl-2">
-        <span className="tab-method uppercase" style={{ color: getMethodColor(method), fontSize: 12 }}>
-          {method}
-        </span>
-        <span className="ml-1 tab-name" title={item.name}>
-          {item.name}
-        </span>
-      </div>
-      <div className="flex px-2 close-icon-container" onClick={(e) => handleCloseClick(e)}>
-        {!item.draft ? (
-          <svg focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" className="close-icon">
-            <path
-              fill="currentColor"
-              d="M207.6 256l107.72-107.72c6.23-6.23 6.23-16.34 0-22.58l-25.03-25.03c-6.23-6.23-16.34-6.23-22.58 0L160 208.4 52.28 100.68c-6.23-6.23-16.34-6.23-22.58 0L4.68 125.7c-6.23 6.23-6.23 16.34 0 22.58L112.4 256 4.68 363.72c-6.23 6.23-6.23 16.34 0 22.58l25.03 25.03c6.23 6.23 16.34 6.23 22.58 0L160 303.6l107.72 107.72c6.23 6.23 16.34 6.23 22.58 0l25.03-25.03c6.23-6.23 6.23-16.34 0-22.58L207.6 256z"
-            ></path>
-          </svg>
-        ) : (
-          <svg focusable="false" xmlns="http://www.w3.org/2000/svg" width="8" height="16" fill="#cc7b1b" className="has-changes-icon" viewBox="0 0 8 8">
-            <circle cx="4" cy="4" r="3" />
-          </svg>
-        )}
-      </div>
-    </StyledWrapper>
-  );
-};
-
-export default RequestTab;
--- a/packages/bruno-app/src/components/ResponsePane/NetworkError/index.js
+++ b/packages/bruno-app/src/components/ResponsePane/NetworkError/index.js
@@ -1,25 +0,0 @@
-import React from 'react';
-
-const NetworkError = ({ onClose }) => {
-  return (
-    <div className="max-w-md w-full bg-white shadow-lg rounded-lg pointer-events-auto flex bg-red-100">
-      <div className="flex-1 w-0 p-4">
-        <div className="flex items-start">
-          <div className="ml-3 flex-1">
-            <p className="text-sm font-medium text-red-800">Network Error</p>
-          </div>
-        </div>
-      </div>
-      <div className="flex">
-        <button
-          onClick={onClose}
-          className="w-full border border-transparent rounded-none rounded-r-lg p-4 flex items-center justify-center text-sm font-medium focus:outline-none"
-        >
-          Close
-        </button>
-      </div>
-    </div>
-  );
-};
-
-export default NetworkError;
--- a/packages/bruno-app/src/components/ResponsePane/Overlay/index.js
+++ b/packages/bruno-app/src/components/ResponsePane/Overlay/index.js
@@ -1,36 +0,0 @@
-import React from 'react';
-import { IconRefresh } from '@tabler/icons';
-import { useDispatch } from 'react-redux';
-import { cancelRequest } from 'providers/ReduxStore/slices/collections/actions';
-import StopWatch from '../../StopWatch';
-import StyledWrapper from './StyledWrapper';
-
-const ResponseLoadingOverlay = ({ item, collection }) => {
-  const dispatch = useDispatch();
-
-  const handleCancelRequest = () => {
-    dispatch(cancelRequest(item.cancelTokenUid, item, collection));
-  };
-
-  return (
-    <StyledWrapper className="mt-4 px-3 w-full">
-      <div className="overlay">
-        <div style={{ marginBottom: 15, fontSize: 26 }}>
-          <div style={{ display: 'inline-block', fontSize: 24, marginLeft: 5, marginRight: 5 }}>
-            <StopWatch />
-          </div>
-        </div>
-        <IconRefresh size={24} className="animate-spin" />
-        <button
-          onClick={handleCancelRequest}
-          className="mt-4 uppercase btn-md rounded btn-secondary ease-linear transition-all duration-150"
-          type="button"
-        >
-          Cancel Request
-        </button>
-      </div>
-    </StyledWrapper>
-  );
-};
-
-export default ResponseLoadingOverlay;
--- a/packages/bruno-app/src/components/ResponsePane/QueryResult/index.js
+++ b/packages/bruno-app/src/components/ResponsePane/QueryResult/index.js
@@ -1,26 +0,0 @@
-import React from 'react';
-import CodeEditor from 'components/CodeEditor';
-import { useTheme } from 'providers/Theme';
-import { useDispatch } from 'react-redux';
-import { sendRequest } from 'providers/ReduxStore/slices/collections/actions';
-
-import StyledWrapper from './StyledWrapper';
-
-const QueryResult = ({ item, collection, value, width }) => {
-  const {
-    storedTheme
-  } = useTheme();
-  const dispatch = useDispatch();
-
-  const onRun = () => dispatch(sendRequest(item, collection.uid));
-
-  return (
-    <StyledWrapper className="px-3 w-full" style={{ maxWidth: width }}>
-      <div className="h-full">
-        <CodeEditor collection={collection} theme={storedTheme} onRun={onRun} value={value || ''} readOnly />
-      </div>
-    </StyledWrapper>
-  );
-};
-
-export default QueryResult;
--- a/packages/bruno-app/src/components/ResponsePane/ResponseHeaders/index.js
+++ b/packages/bruno-app/src/components/ResponsePane/ResponseHeaders/index.js
@@ -1,30 +0,0 @@
-import React from 'react';
-import StyledWrapper from './StyledWrapper';
-
-const ResponseHeaders = ({ headers }) => {
-  return (
-    <StyledWrapper className="px-3 pb-4 w-full">
-      <table>
-        <thead>
-          <tr>
-            <td>Name</td>
-            <td>Value</td>
-          </tr>
-        </thead>
-        <tbody>
-          {headers && headers.length
-            ? headers.map((header, index) => {
-                return (
-                  <tr key={index}>
-                    <td className="key">{header[0]}</td>
-                    <td className="value">{header[1]}</td>
-                  </tr>
-                );
-              })
-            : null}
-        </tbody>
-      </table>
-    </StyledWrapper>
-  );
-};
-export default ResponseHeaders;
--- a/packages/bruno-app/src/components/ResponsePane/ResponseSize/index.js
+++ b/packages/bruno-app/src/components/ResponsePane/ResponseSize/index.js
@@ -1,18 +0,0 @@
-import React from 'react';
-import StyledWrapper from './StyledWrapper';
-
-const ResponseSize = ({ size }) => {
-  let sizeToDisplay = '';
-
-  if (size > 1024) {
-    // size is greater than 1kb
-    let kb = Math.floor(size / 1024);
-    let decimal = ((size % 1024) / 1024).toFixed(2) * 100;
-    sizeToDisplay = kb + '.' + decimal + 'KB';
-  } else {
-    sizeToDisplay = size + 'B';
-  }
-
-  return <StyledWrapper className="ml-4">{sizeToDisplay}</StyledWrapper>;
-};
-export default ResponseSize;
--- a/packages/bruno-app/src/components/ResponsePane/ResponseTime/index.js
+++ b/packages/bruno-app/src/components/ResponsePane/ResponseTime/index.js
@@ -1,18 +0,0 @@
-import React from 'react';
-import StyledWrapper from './StyledWrapper';
-
-const ResponseTime = ({ duration }) => {
-  let durationToDisplay = '';
-
-  if (duration > 1000) {
-    // duration greater than a second
-    let seconds = Math.floor(duration / 1000);
-    let decimal = ((duration % 1000) / 1000) * 100;
-    durationToDisplay = seconds + '.' + decimal.toFixed(0) + 's';
-  } else {
-    durationToDisplay = duration + 'ms';
-  }
-
-  return <StyledWrapper className="ml-4">{durationToDisplay}</StyledWrapper>;
-};
-export default ResponseTime;
--- a/packages/bruno-app/src/components/ResponsePane/StatusCode/StyledWrapper.js
+++ b/packages/bruno-app/src/components/ResponsePane/StatusCode/StyledWrapper.js
@@ -1,16 +0,0 @@
-import styled from 'styled-components';
-
-const Wrapper = styled.div`
-  font-size: 0.75rem;
-  font-weight: 600;
-  
-  &.text-ok {
-    color: ${(props) => props.theme.requestTabPanel.responseOk};
-  }
-  
-  &.text-error {
-    color: ${(props) => props.theme.requestTabPanel.responseError};
-  }
-`;
-
-export default Wrapper;
--- a/packages/bruno-app/src/components/ResponsePane/StatusCode/index.js
+++ b/packages/bruno-app/src/components/ResponsePane/StatusCode/index.js
@@ -1,24 +0,0 @@
-import React from 'react';
-import classnames from 'classnames';
-import statusCodePhraseMap from './get-status-code-phrase';
-import StyledWrapper from './StyledWrapper';
-
-// Todo: text-error class is not getting pulled in for 500 errors
-const StatusCode = ({ status }) => {
-  const getTabClassname = (status) => {
-    return classnames('', {
-      'text-ok': status >= 100 && status < 200,
-      'text-ok': status >= 200 && status < 300,
-      'text-error': status >= 300 && status < 400,
-      'text-error': status >= 400 && status < 500,
-      'text-error': status >= 500 && status < 600
-    });
-  };
-
-  return (
-    <StyledWrapper className={getTabClassname(status)}>
-      {status} {statusCodePhraseMap[status]}
-    </StyledWrapper>
-  );
-};
-export default StatusCode;
--- a/packages/bruno-app/src/components/ResponsePane/StyledWrapper.js
+++ b/packages/bruno-app/src/components/ResponsePane/StyledWrapper.js
@@ -1,38 +0,0 @@
-import styled from 'styled-components';
-
-const StyledWrapper = styled.div`
-  div.tabs {
-    div.tab {
-      padding: 6px 0px;
-      border: none;
-      border-bottom: solid 2px transparent;
-      margin-right: 1.25rem;
-      color: var(--color-tab-inactive);
-      cursor: pointer;
-
-      &:focus,
-      &:active,
-      &:focus-within,
-      &:focus-visible,
-      &:target {
-        outline: none !important;
-        box-shadow: none !important;
-      }
-
-      &.active {
-        color: ${(props) => props.theme.tabs.active.color} !important;
-        border-bottom: solid 2px ${(props) => props.theme.tabs.active.border} !important;
-      }
-    }
-  }
-
-  .some-tests-failed {
-    color: ${(props) => props.theme.colors.text.danger} !important;
-  }
-
-  .all-tests-passed {
-    color: ${(props) => props.theme.colors.text.green} !important;
-  }
-`;
-
-export default StyledWrapper;
--- a/packages/bruno-app/src/components/ResponsePane/TestResults/StyledWrapper.js
+++ b/packages/bruno-app/src/components/ResponsePane/TestResults/StyledWrapper.js
@@ -1,17 +0,0 @@
-import styled from 'styled-components';
-
-const StyledWrapper = styled.div`
-  .test-success {
-    color: ${(props) => props.theme.colors.text.green};
-  }
-
-  .test-failure {
-    color: ${(props) => props.theme.colors.text.danger};
-
-    .error-message {
-      color: ${(props) => props.theme.colors.text.muted};
-    }
-  }
-`;
-
-export default StyledWrapper;
--- a/packages/bruno-app/src/components/ResponsePane/TestResults/index.js
+++ b/packages/bruno-app/src/components/ResponsePane/TestResults/index.js
@@ -1,46 +0,0 @@
-import React from 'react';
-import StyledWrapper from './StyledWrapper';
-
-const TestResults = ({ results }) => {
-  if (!results || !results.length) {
-    return (
-      <div className="px-3">
-        No tests found
-      </div>
-    );
-  }
-
-  const passedTests = results.filter((result) => result.status === 'pass');
-  const failedTests = results.filter((result) => result.status === 'fail');
-
-  return (
-    <StyledWrapper className='flex flex-col px-3'>
-      <div className="py-2 font-medium test-summary">
-        Tests ({results.length}/{results.length}), Passed: {passedTests.length}, Failed: {failedTests.length}
-      </div>
-      <ul className="">
-        {results.map((result) => (
-          <li key={result.uid} className="py-1">
-            {result.status === 'pass' ? (
-              <span className="test-success">
-                &#x2714;&nbsp; {result.description}
-              </span>
-            ) : (
-              <>
-                <span className="test-failure">
-                  &#x2718;&nbsp; {result.description}
-                </span>
-                <br />
-                <span className="error-message pl-8">
-                  {result.error}
-                </span>
-              </>
-            )}
-          </li>
-        ))}
-      </ul>
-    </StyledWrapper>
-  );
-};
-
-export default TestResults;
--- a/packages/bruno-app/src/components/ResponsePane/Timeline/StyledWrapper.js
+++ b/packages/bruno-app/src/components/ResponsePane/Timeline/StyledWrapper.js
@@ -1,24 +0,0 @@
-import styled from 'styled-components';
-
-const StyledWrapper = styled.div`
-  .line {
-    white-space: pre-line;
-    word-wrap: break-word;
-    word-break: break-all;
-    font-family: Inter, sans-serif !important;
-
-    .arrow {
-      opacity: 0.5;
-    }
-
-    &.request {
-      color: ${(props) => props.theme.colors.text.green};
-    }
-
-    &.response {
-      color: ${(props) => props.theme.colors.text.purple};
-    }
-  }
-`;
-
-export default StyledWrapper;
--- a/packages/bruno-app/src/components/ResponsePane/Timeline/index.js
+++ b/packages/bruno-app/src/components/ResponsePane/Timeline/index.js
@@ -1,59 +0,0 @@
-import React from 'react';
-import forOwn from 'lodash/forOwn';
-import { safeStringifyJSON } from 'utils/common';
-import StyledWrapper from './StyledWrapper';
-
-const Timeline = ({ item }) => {
-  const request = item.requestSent || {};
-  const response = item.response || {};
-  const requestHeaders = [];
-  const responseHeaders = response.headers || [];
-
-  forOwn(request.headers, (value, key) => {
-    requestHeaders.push({
-      name: key,
-      value
-    });
-  });
-
-  let requestData = safeStringifyJSON(request.data);
-
-  return (
-    <StyledWrapper className="px-3 pb-4 w-full">
-      <div>
-        <pre className='line request font-bold'>
-          <span className="arrow">{'>'}</span> {request.method} {request.url}
-        </pre>
-        {requestHeaders.map((h) => {
-          return (
-            <pre className='line request' key={h.name}>
-              <span className="arrow">{'>'}</span> {h.name}: {h.value}
-            </pre>
-          );
-        })}
-
-        {requestData ? (
-          <pre className='line request'>
-            <span className="arrow">{'>'}</span> data {requestData}
-          </pre>
-        ) : null}
-      </div>
-
-      <div className='mt-4'>
-        <pre className='line response font-bold'>
-          <span className="arrow">{'<'}</span> {response.status} {response.statusText}
-        </pre>
-
-        {responseHeaders.map((h) => {
-          return (
-            <pre className='line response' key={h[0]}>
-              <span className="arrow">{'<'}</span> {h[0]}: {h[1]}
-            </pre>
-          );
-        })}
-      </div>
-    </StyledWrapper>
-  );
-};
-
-export default Timeline;
--- a/packages/bruno-app/src/components/ResponsePane/index.js
+++ b/packages/bruno-app/src/components/ResponsePane/index.js
@@ -1,143 +0,0 @@
-import React from 'react';
-import find from 'lodash/find';
-import classnames from 'classnames';
-import { useSelector, useDispatch } from 'react-redux';
-import { updateResponsePaneTab } from 'providers/ReduxStore/slices/tabs';
-import QueryResult from './QueryResult';
-import Overlay from './Overlay';
-import Placeholder from './Placeholder';
-import ResponseHeaders from './ResponseHeaders';
-import StatusCode from './StatusCode';
-import ResponseTime from './ResponseTime';
-import ResponseSize from './ResponseSize';
-import Timeline from './Timeline';
-import TestResults from './TestResults';
-import StyledWrapper from './StyledWrapper';
-
-const TestResultsLabel = ({ results }) => {
-  if(!results || !results.length) {
-    return 'Tests';
-  }
-
-  const numberOfTests = results.length;
-  const numberOfFailedTests = results.filter(result => result.status === 'fail').length;
-
-  return (
-    <div className='flex items-center'>
-      <div>Tests</div>
-      {numberOfFailedTests ? (
-        <sup className='sups some-tests-failed ml-1 font-medium'>
-          {numberOfFailedTests}
-        </sup>
-      ) : (
-        <sup className='sups all-tests-passed ml-1 font-medium'>
-          {numberOfTests}
-        </sup>
-      )}
-      </div>
-  );
-};
-
-const ResponsePane = ({ rightPaneWidth, item, collection }) => {
-  const dispatch = useDispatch();
-  const tabs = useSelector((state) => state.tabs.tabs);
-  const activeTabUid = useSelector((state) => state.tabs.activeTabUid);
-  const isLoading = ['queued', 'sending'].includes(item.requestState);
-
-  const selectTab = (tab) => {
-    dispatch(
-      updateResponsePaneTab({
-        uid: item.uid,
-        responsePaneTab: tab
-      })
-    );
-  };
-
-  const response = item.response || {};
-
-  const getTabPanel = (tab) => {
-    switch (tab) {
-      case 'response': {
-        return <QueryResult
-          item={item}
-          collection={collection}
-          width={rightPaneWidth}
-          value={response.data ? JSON.stringify(response.data, null, 2) : ''
-        } />;
-      }
-      case 'headers': {
-        return <ResponseHeaders headers={response.headers} />;
-      }
-      case 'timeline': {
-        return <Timeline item={item} />;
-      }
-      case 'tests': {
-        return <TestResults results={item.testResults} />;
-      }
-
-      default: {
-        return <div>404 | Not found</div>;
-      }
-    }
-  };
-
-  if (isLoading) {
-    return (
-      <StyledWrapper className="flex h-full relative">
-        <Overlay item={item} collection={collection} />
-      </StyledWrapper>
-    );
-  }
-
-  if (response.state !== 'success') {
-    return (
-      <StyledWrapper className="flex h-full relative">
-        <Placeholder />
-      </StyledWrapper>
-    );
-  }
-
-  if (!activeTabUid) {
-    return <div>Something went wrong</div>;
-  }
-
-  const focusedTab = find(tabs, (t) => t.uid === activeTabUid);
-  if (!focusedTab || !focusedTab.uid || !focusedTab.responsePaneTab) {
-    return <div className="pb-4 px-4">An error occured!</div>;
-  }
-
-  const getTabClassname = (tabName) => {
-    return classnames(`tab select-none ${tabName}`, {
-      active: tabName === focusedTab.responsePaneTab
-    });
-  };
-
-  return (
-    <StyledWrapper className="flex flex-col h-full relative">
-      <div className="flex items-center px-3 tabs" role="tablist">
-        <div className={getTabClassname('response')} role="tab" onClick={() => selectTab('response')}>
-          Response
-        </div>
-        <div className={getTabClassname('headers')} role="tab" onClick={() => selectTab('headers')}>
-          Headers
-        </div>
-        <div className={getTabClassname('timeline')} role="tab" onClick={() => selectTab('timeline')}>
-          Timeline
-        </div>
-        <div className={getTabClassname('tests')} role="tab" onClick={() => selectTab('tests')}>
-          <TestResultsLabel results={item.testResults} />
-        </div>
-        {!isLoading ? (
-          <div className="flex flex-grow justify-end items-center">
-            <StatusCode status={response.status} />
-            <ResponseTime duration={response.duration} />
-            <ResponseSize size={response.size} />
-          </div>
-        ) : null}
-      </div>
-      <section className="flex flex-grow mt-5">{getTabPanel(focusedTab.responsePaneTab)}</section>
-    </StyledWrapper>
-  );
-};
-
-export default ResponsePane;
--- a/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/DeleteCollectionItem/StyledWrapper.js
+++ b/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/DeleteCollectionItem/StyledWrapper.js
@@ -1,15 +0,0 @@
-import styled from 'styled-components';
-
-const Wrapper = styled.div`
-  button.submit {
-    color: white;
-    background-color: var(--color-background-danger) !important;
-    border: inherit !important;
-
-    &:hover {
-      border: inherit !important;
-    }
-  }
-`;
-
-export default Wrapper;
--- a/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/RequestMethod/StyledWrapper.js
+++ b/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/RequestMethod/StyledWrapper.js
@@ -1,38 +0,0 @@
-import styled from 'styled-components';
-
-const Wrapper = styled.div`
-  font-size: 0.6875rem;
-  display: flex;
-  align-self: stretch;
-  align-items: center;
-  min-width: 34px;
-
-  span {
-    position: relative;
-    top: 1px;
-  }
-
-  .method-get {
-    color: ${(props) => props.theme.request.methods.get};
-  }
-  .method-post {
-    color: ${(props) => props.theme.request.methods.post};
-  }
-  .method-put {
-    color: ${(props) => props.theme.request.methods.put};
-  }
-  .method-delete {
-    color: ${(props) => props.theme.request.methods.delete};
-  }
-  .method-patch {
-    color: ${(props) => props.theme.request.methods.put};
-  }
-  .method-options {
-    color: ${(props) => props.theme.request.methods.put};
-  }
-  .method-head {
-    color: ${(props) => props.theme.request.methods.put};
-  }
-`;
-
-export default Wrapper;
--- a/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/index.js
+++ b/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/index.js
@@ -1,268 +0,0 @@
-import React, { useState, useRef, forwardRef, useEffect } from 'react';
-import range from 'lodash/range';
-import filter from 'lodash/filter';
-import classnames from 'classnames';
-import { useDrag, useDrop } from 'react-dnd';
-import { IconChevronRight, IconDots } from '@tabler/icons';
-import { useSelector, useDispatch } from 'react-redux';
-import { addTab, focusTab } from 'providers/ReduxStore/slices/tabs';
-import { collectionFolderClicked } from 'providers/ReduxStore/slices/collections';
-import { moveItem } from 'providers/ReduxStore/slices/collections/actions';
-import Dropdown from 'components/Dropdown';
-import NewRequest from 'components/Sidebar/NewRequest';
-import NewFolder from 'components/Sidebar/NewFolder';
-import RequestMethod from './RequestMethod';
-import RenameCollectionItem from './RenameCollectionItem';
-import CloneCollectionItem from './CloneCollectionItem';
-import DeleteCollectionItem from './DeleteCollectionItem';
-import { isItemARequest, isItemAFolder, itemIsOpenedInTabs } from 'utils/tabs';
-import { doesRequestMatchSearchText, doesFolderHaveItemsMatchSearchText } from 'utils/collections/search';
-import { getDefaultRequestPaneTab } from 'utils/collections';
-import { hideHomePage } from 'providers/ReduxStore/slices/app';
-
-import StyledWrapper from './StyledWrapper';
-
-const CollectionItem = ({ item, collection, searchText }) => {
-  const tabs = useSelector((state) => state.tabs.tabs);
-  const activeTabUid = useSelector((state) => state.tabs.activeTabUid);
-  const isSidebarDragging = useSelector((state) => state.app.isDragging);
-  const dispatch = useDispatch();
-
-  const [renameItemModalOpen, setRenameItemModalOpen] = useState(false);
-  const [cloneItemModalOpen, setCloneItemModalOpen] = useState(false);
-  const [deleteItemModalOpen, setDeleteItemModalOpen] = useState(false);
-  const [newRequestModalOpen, setNewRequestModalOpen] = useState(false);
-  const [newFolderModalOpen, setNewFolderModalOpen] = useState(false);
-  const [itemIsCollapsed, setItemisCollapsed] = useState(item.collapsed);
-
-  const [{ isDragging }, drag] = useDrag({
-    type: 'COLLECTION_ITEM',
-    item: item,
-    collect: (monitor) => ({
-      isDragging: monitor.isDragging()
-    })
-  });
-
-  const [{ isOver }, drop] = useDrop({
-    accept: 'COLLECTION_ITEM',
-    drop: (draggedItem) => {
-      if (draggedItem.uid !== item.uid) {
-        dispatch(moveItem(collection.uid, draggedItem.uid, item.uid));
-      }
-    },
-    canDrop: (draggedItem) => {
-      return draggedItem.uid !== item.uid;
-    },
-    collect: (monitor) => ({
-      isOver: monitor.isOver()
-    })
-  });
-
-  useEffect(() => {
-    if (searchText && searchText.length) {
-      setItemisCollapsed(false);
-    } else {
-      setItemisCollapsed(item.collapsed);
-    }
-  }, [searchText, item]);
-
-  const dropdownTippyRef = useRef();
-  const MenuIcon = forwardRef((props, ref) => {
-    return (
-      <div ref={ref}>
-        <IconDots size={22} />
-      </div>
-    );
-  });
-
-  const iconClassName = classnames({
-    'rotate-90': !itemIsCollapsed
-  });
-
-  const itemRowClassName = classnames('flex collection-item-name items-center', {
-    'item-focused-in-tab': item.uid == activeTabUid
-  });
-
-  const handleClick = (event) => {
-    if (isItemARequest(item)) {
-      if (itemIsOpenedInTabs(item, tabs)) {
-        dispatch(
-          focusTab({
-            uid: item.uid
-          })
-        );
-      } else {
-        dispatch(
-          addTab({
-            uid: item.uid,
-            collectionUid: collection.uid,
-            requestPaneTab: getDefaultRequestPaneTab(item)
-          })
-        );
-      }
-      dispatch(hideHomePage());
-    } else {
-      dispatch(
-        collectionFolderClicked({
-          itemUid: item.uid,
-          collectionUid: collection.uid
-        })
-      );
-    }
-  };
-
-  let indents = range(item.depth);
-  const onDropdownCreate = (ref) => (dropdownTippyRef.current = ref);
-  const isFolder = isItemAFolder(item);
-
-  const className = classnames('flex flex-col w-full', {
-    'is-sidebar-dragging': isSidebarDragging
-  });
-
-  if (searchText && searchText.length) {
-    if (isItemARequest(item)) {
-      if (!doesRequestMatchSearchText(item, searchText)) {
-        return null;
-      }
-    } else {
-      if (!doesFolderHaveItemsMatchSearchText(item, searchText)) {
-        return null;
-      }
-    }
-  }
-
-  // we need to sort request items by seq property
-  const sortRequestItems = (items = []) => {
-    return items.sort((a, b) => a.seq - b.seq);
-  };
-
-  // we need to sort folder items by name alphabetically
-  const sortFolderItems = (items = []) => {
-    return items.sort((a, b) => a.name.localeCompare(b.name));
-  };
-
-  const requestItems = sortRequestItems(filter(item.items, (i) => isItemARequest(i)));
-  const folderItems = sortFolderItems(filter(item.items, (i) => isItemAFolder(i)));
-
-  return (
-    <StyledWrapper className={className}>
-      {renameItemModalOpen && <RenameCollectionItem item={item} collection={collection} onClose={() => setRenameItemModalOpen(false)} />}
-      {cloneItemModalOpen && <CloneCollectionItem item={item} collection={collection} onClose={() => setCloneItemModalOpen(false)} />}
-      {deleteItemModalOpen && <DeleteCollectionItem item={item} collection={collection} onClose={() => setDeleteItemModalOpen(false)} />}
-      {newRequestModalOpen && <NewRequest item={item} collection={collection} onClose={() => setNewRequestModalOpen(false)} />}
-      {newFolderModalOpen && <NewFolder item={item} collection={collection} onClose={() => setNewFolderModalOpen(false)} />}
-      <div className={itemRowClassName} ref={(node) => drag(drop(node))}>
-        <div className="flex items-center h-full w-full">
-          {indents && indents.length
-            ? indents.map((i) => {
-                return (
-                  <div
-                    onClick={handleClick}
-                    className="indent-block"
-                    key={i}
-                    style={{
-                      width: 16,
-                      minWidth: 16,
-                      height: '100%'
-                    }}
-                  >
-                    &nbsp;{/* Indent */}
-                  </div>
-                );
-              })
-            : null}
-          <div
-            onClick={handleClick}
-            className="flex flex-grow items-center h-full overflow-hidden"
-            style={{
-              paddingLeft: 8
-            }}
-          >
-            <div style={{ width: 16, minWidth: 16 }}>
-              {isFolder ? <IconChevronRight size={16} strokeWidth={2} className={iconClassName} style={{ color: 'rgb(160 160 160)' }} /> : null}
-            </div>
-
-            <div className="ml-1 flex items-center overflow-hidden">
-              <RequestMethod item={item} />
-              <span className="item-name" title={item.name}>
-                {item.name}
-              </span>
-            </div>
-          </div>
-          <div className="menu-icon pr-2">
-            <Dropdown onCreate={onDropdownCreate} icon={<MenuIcon />} placement="bottom-start">
-              {isFolder && (
-                <>
-                  <div
-                    className="dropdown-item"
-                    onClick={(e) => {
-                      dropdownTippyRef.current.hide();
-                      setNewRequestModalOpen(true);
-                    }}
-                  >
-                    New Request
-                  </div>
-                  <div
-                    className="dropdown-item"
-                    onClick={(e) => {
-                      dropdownTippyRef.current.hide();
-                      setNewFolderModalOpen(true);
-                    }}
-                  >
-                    New Folder
-                  </div>
-                </>
-              )}
-              <div
-                className="dropdown-item"
-                onClick={(e) => {
-                  dropdownTippyRef.current.hide();
-                  setRenameItemModalOpen(true);
-                }}
-              >
-                Rename
-              </div>
-              {!isFolder && (
-                <div
-                  className="dropdown-item"
-                  onClick={(e) => {
-                    dropdownTippyRef.current.hide();
-                    setCloneItemModalOpen(true);
-                  }}
-                >
-                  Clone
-                </div>
-              )}
-              <div
-                className="dropdown-item delete-item"
-                onClick={(e) => {
-                  dropdownTippyRef.current.hide();
-                  setDeleteItemModalOpen(true);
-                }}
-              >
-                Delete
-              </div>
-            </Dropdown>
-          </div>
-        </div>
-      </div>
-
-      {!itemIsCollapsed ? (
-        <div>
-          {folderItems && folderItems.length
-            ? folderItems.map((i) => {
-                return <CollectionItem key={i.uid} item={i} collection={collection} searchText={searchText} />;
-              })
-            : null}
-          {requestItems && requestItems.length
-            ? requestItems.map((i) => {
-                return <CollectionItem key={i.uid} item={i} collection={collection} searchText={searchText} />;
-              })
-            : null}
-        </div>
-      ) : null}
-    </StyledWrapper>
-  );
-};
-
-export default CollectionItem;
--- a/packages/bruno-app/src/components/Sidebar/Collections/Collection/RemoveCollection/index.js
+++ b/packages/bruno-app/src/components/Sidebar/Collections/Collection/RemoveCollection/index.js
@@ -1,26 +0,0 @@
-import React from 'react';
-import toast from 'react-hot-toast';
-import Modal from 'components/Modal';
-import { useDispatch } from 'react-redux';
-import { removeCollection } from 'providers/ReduxStore/slices/collections/actions';
-
-const RemoveCollection = ({ onClose, collection }) => {
-  const dispatch = useDispatch();
-
-  const onConfirm = () => {
-    dispatch(removeCollection(collection.uid))
-      .then(() => {
-        toast.success('Collection removed');
-        onClose();
-      })
-      .catch(() => toast.error('An error occured while removing the collection'));
-  };
-
-  return (
-    <Modal size="sm" title="Remove Collection" confirmText="Remove" handleConfirm={onConfirm} handleCancel={onClose}>
-      Are you sure you want to remove this collection?
-    </Modal>
-  );
-};
-
-export default RemoveCollection;
--- a/packages/bruno-app/src/components/Sidebar/Collections/Collection/RenameCollection/index.js
+++ b/packages/bruno-app/src/components/Sidebar/Collections/Collection/RenameCollection/index.js
@@ -1,62 +0,0 @@
-import React, { useRef, useEffect } from 'react';
-import { useFormik } from 'formik';
-import * as Yup from 'yup';
-import Modal from 'components/Modal';
-import { useDispatch } from 'react-redux';
-import toast from 'react-hot-toast';
-import { renameCollection } from 'providers/ReduxStore/slices/collections/actions';
-
-const RenameCollection = ({ collection, onClose }) => {
-  const dispatch = useDispatch();
-  const inputRef = useRef();
-  const formik = useFormik({
-    enableReinitialize: true,
-    initialValues: {
-      name: collection.name
-    },
-    validationSchema: Yup.object({
-      name: Yup.string().min(1, 'must be atleast 1 characters').max(50, 'must be 50 characters or less').required('name is required')
-    }),
-    onSubmit: (values) => {
-      dispatch(renameCollection(values.name, collection.uid));
-      toast.success('Collection renamed!');
-      onClose();
-    }
-  });
-
-  useEffect(() => {
-    if (inputRef && inputRef.current) {
-      inputRef.current.focus();
-    }
-  }, [inputRef]);
-
-  const onSubmit = () => formik.handleSubmit();
-
-  return (
-    <Modal size="sm" title="Rename Collection" confirmText="Rename" handleConfirm={onSubmit} handleCancel={onClose}>
-      <form className="bruno-form" onSubmit={formik.handleSubmit}>
-        <div>
-          <label htmlFor="name" className="block font-semibold">
-            Name
-          </label>
-          <input
-            id="collection-name"
-            type="text"
-            name="name"
-            ref={inputRef}
-            className="block textbox mt-2 w-full"
-            autoComplete="off"
-            autoCorrect="off"
-            autoCapitalize="off"
-            spellCheck="false"
-            onChange={formik.handleChange}
-            value={formik.values.name || ''}
-          />
-          {formik.touched.name && formik.errors.name ? <div className="text-red-500">{formik.errors.name}</div> : null}
-        </div>
-      </form>
-    </Modal>
-  );
-};
-
-export default RenameCollection;
--- a/packages/bruno-app/src/components/Sidebar/Collections/Collection/index.js
+++ b/packages/bruno-app/src/components/Sidebar/Collections/Collection/index.js
@@ -1,177 +0,0 @@
-import React, { useState, forwardRef, useRef, useEffect } from 'react';
-import classnames from 'classnames';
-import filter from 'lodash/filter';
-import cloneDeep from 'lodash/cloneDeep';
-import { useDrop } from 'react-dnd';
-import { IconChevronRight, IconDots } from '@tabler/icons';
-import Dropdown from 'components/Dropdown';
-import { collectionClicked } from 'providers/ReduxStore/slices/collections';
-import { moveItemToRootOfCollection } from 'providers/ReduxStore/slices/collections/actions';
-import { useDispatch } from 'react-redux';
-import NewRequest from 'components/Sidebar/NewRequest';
-import NewFolder from 'components/Sidebar/NewFolder';
-import CollectionItem from './CollectionItem';
-import RemoveCollection from './RemoveCollection';
-import { doesCollectionHaveItemsMatchingSearchText } from 'utils/collections/search';
-import { isItemAFolder, isItemARequest, transformCollectionToSaveToIdb } from 'utils/collections';
-import exportCollection from 'utils/collections/export';
-
-import RenameCollection from './RenameCollection';
-import StyledWrapper from './StyledWrapper';
-
-const Collection = ({ collection, searchText }) => {
-  const [showNewFolderModal, setShowNewFolderModal] = useState(false);
-  const [showNewRequestModal, setShowNewRequestModal] = useState(false);
-  const [showRenameCollectionModal, setShowRenameCollectionModal] = useState(false);
-  const [showRemoveCollectionModal, setShowRemoveCollectionModal] = useState(false);
-  const [collectionIsCollapsed, setCollectionIsCollapsed] = useState(collection.collapsed);
-  const dispatch = useDispatch();
-
-  const menuDropdownTippyRef = useRef();
-  const onMenuDropdownCreate = (ref) => (menuDropdownTippyRef.current = ref);
-  const MenuIcon = forwardRef((props, ref) => {
-    return (
-      <div ref={ref} className="pr-2">
-        <IconDots size={22} />
-      </div>
-    );
-  });
-
-  useEffect(() => {
-    if (searchText && searchText.length) {
-      setCollectionIsCollapsed(false);
-    } else {
-      setCollectionIsCollapsed(collection.collapsed);
-    }
-  }, [searchText, collection]);
-
-  const iconClassName = classnames({
-    'rotate-90': !collectionIsCollapsed
-  });
-
-  const handleClick = (event) => {
-    dispatch(collectionClicked(collection.uid));
-  };
-
-  if (searchText && searchText.length) {
-    if (!doesCollectionHaveItemsMatchingSearchText(collection, searchText)) {
-      return null;
-    }
-  }
-
-  const handleExportClick = () => {
-    const collectionCopy = cloneDeep(collection);
-    exportCollection(transformCollectionToSaveToIdb(collectionCopy));
-  };
-
-  const [{ isOver }, drop] = useDrop({
-    accept: 'COLLECTION_ITEM',
-    drop: (draggedItem) => {
-      dispatch(moveItemToRootOfCollection(collection.uid, draggedItem.uid));
-    },
-    canDrop: (draggedItem) => {
-      // todo need to make sure that draggedItem belongs to the collection
-      return true;
-    },
-    collect: (monitor) => ({
-      isOver: monitor.isOver()
-    })
-  });
-
-  // we need to sort request items by seq property
-  const sortRequestItems = (items = []) => {
-    return items.sort((a, b) => a.seq - b.seq);
-  };
-
-  // we need to sort folder items by name alphabetically
-  const sortFolderItems = (items = []) => {
-    return items.sort((a, b) => a.name.localeCompare(b.name));
-  };
-
-  const requestItems = sortRequestItems(filter(collection.items, (i) => isItemARequest(i)));
-  const folderItems = sortFolderItems(filter(collection.items, (i) => isItemAFolder(i)));
-
-  return (
-    <StyledWrapper className="flex flex-col">
-      {showNewRequestModal && <NewRequest collection={collection} onClose={() => setShowNewRequestModal(false)} />}
-      {showNewFolderModal && <NewFolder collection={collection} onClose={() => setShowNewFolderModal(false)} />}
-      {showRenameCollectionModal && <RenameCollection collection={collection} onClose={() => setShowRenameCollectionModal(false)} />}
-      {showRemoveCollectionModal && <RemoveCollection collection={collection} onClose={() => setShowRemoveCollectionModal(false)} />}
-      <div className="flex py-1 collection-name items-center" ref={drop}>
-        <div className="flex flex-grow items-center" onClick={handleClick}>
-          <IconChevronRight size={16} strokeWidth={2} className={iconClassName} style={{ width: 16, color: 'rgb(160 160 160)' }} />
-          <div className="ml-1" id="sidebar-collection-name">{collection.name}</div>
-        </div>
-        <div className="collection-actions">
-          <Dropdown onCreate={onMenuDropdownCreate} icon={<MenuIcon />} placement="bottom-start">
-            <div
-              className="dropdown-item"
-              onClick={(e) => {
-                menuDropdownTippyRef.current.hide();
-                setShowNewRequestModal(true);
-              }}
-            >
-              New Request
-            </div>
-            <div
-              className="dropdown-item"
-              onClick={(e) => {
-                menuDropdownTippyRef.current.hide();
-                setShowNewFolderModal(true);
-              }}
-            >
-              New Folder
-            </div>
-            {/* Todo: implement rename collection */}
-            {/* <div
-              className="dropdown-item"
-              onClick={(e) => {
-                menuDropdownTippyRef.current.hide();
-                setShowRenameCollectionModal(true);
-              }}
-            >
-              Rename
-            </div> */}
-            <div
-              className="dropdown-item"
-              onClick={(e) => {
-                menuDropdownTippyRef.current.hide();
-                handleExportClick(true);
-              }}
-            >
-              Export
-            </div>
-            <div
-              className="dropdown-item"
-              onClick={(e) => {
-                menuDropdownTippyRef.current.hide();
-                setShowRemoveCollectionModal(true);
-              }}
-            >
-              Remove
-            </div>
-          </Dropdown>
-        </div>
-      </div>
-
-      <div>
-        {!collectionIsCollapsed ? (
-          <div>
-            {folderItems && folderItems.length
-              ? folderItems.map((i) => {
-                  return <CollectionItem key={i.uid} item={i} collection={collection} searchText={searchText} />;
-                })
-              : null}
-            {requestItems && requestItems.length
-              ? requestItems.map((i) => {
-                  return <CollectionItem key={i.uid} item={i} collection={collection} searchText={searchText} />;
-                })
-              : null}
-          </div>
-        ) : null}
-      </div>
-    </StyledWrapper>
-  );
-};
-
-export default Collection;
--- a/packages/bruno-app/src/components/Sidebar/Collections/CreateOrOpenCollection/index.js
+++ b/packages/bruno-app/src/components/Sidebar/Collections/CreateOrOpenCollection/index.js
@@ -1,48 +0,0 @@
-import { useState } from 'react';
-import { useTheme } from '../../../../providers/Theme';
-import { useDispatch } from 'react-redux';
-import { openCollection } from 'providers/ReduxStore/slices/collections/actions';
-
-import toast from 'react-hot-toast';
-import styled from 'styled-components';
-import CreateCollection from 'components/Sidebar/CreateCollection';
-import StyledWrapper from './StyledWrapper';
-
-const LinkStyle = styled.span`
-  color: ${(props) => props.theme['text-link']};
-`;
-
-const CreateOrOpenCollection = () => {
-  const { theme } = useTheme();
-  const dispatch = useDispatch();
-  const [createCollectionModalOpen, setCreateCollectionModalOpen] = useState(false);
-
-  const handleOpenCollection = () => {
-    dispatch(openCollection()).catch((err) => console.log(err) && toast.error('An error occured while opening the collection'));
-  };
-  const CreateLink = () => (
-    <LinkStyle className="underline text-link cursor-pointer" theme={theme} onClick={() => setCreateCollectionModalOpen(true)}>
-      Create
-    </LinkStyle>
-  );
-  const OpenLink = () => (
-    <LinkStyle className="underline text-link cursor-pointer" theme={theme} onClick={() => handleOpenCollection(true)}>
-      Open
-    </LinkStyle>
-  );
-
-  return (
-    <StyledWrapper className="px-2 mt-4">
-      {createCollectionModalOpen ? <CreateCollection onClose={() => setCreateCollectionModalOpen(false)} /> : null}
-
-      <div className="text-xs text-center">
-        <div>No collections found.</div>
-        <div className="mt-2">
-          <CreateLink /> or <OpenLink /> Collection.
-        </div>
-      </div>
-    </StyledWrapper>
-  );
-};
-
-export default CreateOrOpenCollection;
--- a/packages/bruno-app/src/components/Sidebar/Collections/SelectCollection/StyledWrapper.js
+++ b/packages/bruno-app/src/components/Sidebar/Collections/SelectCollection/StyledWrapper.js
@@ -1,18 +0,0 @@
-import styled from 'styled-components';
-
-const StyledWrapper = styled.div`
-  div.collection {
-    padding: 4px 6px;
-    padding-left: 8px;
-    display: flex;
-    align-items: center;
-    border-radius: 3px;
-    cursor: pointer;
-
-    &:hover {
-      background-color: ${(props) => props.theme.plainGrid.hoverBg};;
-    }
-  }
-`;
-
-export default StyledWrapper;
--- a/packages/bruno-app/src/components/Sidebar/Collections/SelectCollection/index.js
+++ b/packages/bruno-app/src/components/Sidebar/Collections/SelectCollection/index.js
@@ -1,29 +0,0 @@
-import React from 'react';
-import Modal from 'components/Modal/index';
-import { IconFiles } from '@tabler/icons';
-import { useSelector } from 'react-redux';
-import StyledWrapper from './StyledWrapper';
-
-const SelectCollection = ({ onClose, onSelect, title }) => {
-  const { collections } = useSelector((state) => state.collections);
-
-  return (
-    <StyledWrapper>
-      <Modal size="sm" title={title || 'Select Collection'} hideFooter={true} handleCancel={onClose}>
-        <ul className="mb-2">
-          {collections && collections.length ? (
-            collections.map((c) => (
-              <div className="collection" key={c.uid} onClick={() => onSelect(c.uid)}>
-                <IconFiles size={18} strokeWidth={1.5} /> <span className="ml-2">{c.name}</span>
-              </div>
-            ))
-          ) : (
-            <div>No collections found</div>
-          )}
-        </ul>
-      </Modal>
-    </StyledWrapper>
-  );
-};
-
-export default SelectCollection;
--- a/packages/bruno-app/src/components/Sidebar/Collections/index.js
+++ b/packages/bruno-app/src/components/Sidebar/Collections/index.js
@@ -1,80 +0,0 @@
-import React, { useState } from 'react';
-import { useSelector } from 'react-redux';
-import { IconSearch, IconFolders } from '@tabler/icons';
-import Collection from '../Collections/Collection';
-import CreateCollection from '../CreateCollection';
-import StyledWrapper from './StyledWrapper';
-import CreateOrOpenCollection from './CreateOrOpenCollection';
-import { DndProvider } from 'react-dnd';
-import { HTML5Backend } from 'react-dnd-html5-backend';
-
-const CollectionsBadge = () => {
-  return (
-    <div className="items-center mt-2 relative">
-      <div className="collections-badge flex items-center pl-2 pr-2 py-1 select-none">
-        <span className="mr-2">
-          <IconFolders size={18} strokeWidth={1.5} />
-        </span>
-        <span>Collections</span>
-      </div>
-    </div>
-  );
-};
-
-const Collections = () => {
-  const [searchText, setSearchText] = useState('');
-  const { collections } = useSelector((state) => state.collections);
-  const [createCollectionModalOpen, setCreateCollectionModalOpen] = useState(false);
-
-  if (!collections || !collections.length) {
-    return (
-      <StyledWrapper>
-        <CollectionsBadge />
-        <CreateOrOpenCollection />
-      </StyledWrapper>
-    );
-  }
-
-  return (
-    <StyledWrapper>
-      {createCollectionModalOpen ? <CreateCollection onClose={() => setCreateCollectionModalOpen(false)} /> : null}
-
-      <CollectionsBadge />
-
-      <div className="mt-4 relative collection-filter px-2">
-        <div className="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
-          <span className="text-gray-500 sm:text-sm">
-            <IconSearch size={16} strokeWidth={1.5} />
-          </span>
-        </div>
-        <input
-          type="text"
-          name="search"
-          id="search"
-          autoComplete="off"
-          autoCorrect="off"
-          autoCapitalize="off"
-          spellCheck="false"
-          className="block w-full pl-7 py-1 sm:text-sm"
-          placeholder="search"
-          onChange={(e) => setSearchText(e.target.value.toLowerCase())}
-        />
-      </div>
-
-      <div className="mt-4 flex flex-col">
-        {collections && collections.length
-          ? collections.map((c) => {
-              return (
-                <DndProvider backend={HTML5Backend} key={c.uid}>
-                  <Collection searchText={searchText} collection={c} key={c.uid} />
-                </DndProvider>
-              );
-            })
-          : null}
-      </div>
-    </StyledWrapper>
-  );
-};
-
-export default Collections;
-
--- a/packages/bruno-app/src/components/Sidebar/CreateCollection/index.js
+++ b/packages/bruno-app/src/components/Sidebar/CreateCollection/index.js
@@ -1,131 +0,0 @@
-import React, { useRef, useEffect } from 'react';
-import { useDispatch } from 'react-redux';
-import { useFormik } from 'formik';
-import * as Yup from 'yup';
-import { browseDirectory } from 'providers/ReduxStore/slices/collections/actions';
-import { createCollection } from 'providers/ReduxStore/slices/collections/actions';
-import toast from 'react-hot-toast';
-import Tooltip from 'components/Tooltip';
-import Modal from 'components/Modal';
-
-const CreateCollection = ({ onClose }) => {
-  const inputRef = useRef();
-  const dispatch = useDispatch();
-
-  const formik = useFormik({
-    enableReinitialize: true,
-    initialValues: {
-      collectionName: '',
-      collectionFolderName: '',
-      collectionLocation: ''
-    },
-    validationSchema: Yup.object({
-      collectionName: Yup.string().min(1, 'must be atleast 1 characters').max(50, 'must be 50 characters or less').required('collection name is required'),
-      collectionFolderName: Yup.string().min(1, 'must be atleast 1 characters').max(50, 'must be 50 characters or less').required('folder name is required'),
-      collectionLocation: Yup.string().required('location is required')
-    }),
-    onSubmit: (values) => {
-      dispatch(createCollection(values.collectionName, values.collectionFolderName, values.collectionLocation))
-        .then(() => {
-          toast.success('Collection created');
-          onClose();
-        })
-        .catch(() => toast.error('An error occured while creating the collection'));
-    }
-  });
-
-  const browse = () => {
-    dispatch(browseDirectory())
-      .then((dirPath) => {
-        formik.setFieldValue('collectionLocation', dirPath);
-      })
-      .catch((error) => {
-        formik.setFieldValue('collectionLocation', '');
-        console.error(error);
-      });
-  };
-
-  useEffect(() => {
-    if (inputRef && inputRef.current) {
-      inputRef.current.focus();
-    }
-  }, [inputRef]);
-
-  const onSubmit = () => formik.handleSubmit();
-
-  return (
-    <Modal size="sm" title="Create Collection" confirmText="Create" handleConfirm={onSubmit} handleCancel={onClose}>
-      <form className="bruno-form" onSubmit={formik.handleSubmit}>
-        <div>
-          <label htmlFor="collectionName" className="flex items-center">
-            <span className='font-semibold'>Name</span>
-            <Tooltip text="Name of the collection" tooltipId="collection-name"/>
-          </label>
-          <input
-            id="collection-name"
-            type="text"
-            name="collectionName"
-            ref={inputRef}
-            className="block textbox mt-2 w-full"
-            onChange={formik.handleChange}
-            autoComplete="off"
-            autoCorrect="off"
-            autoCapitalize="off"
-            spellCheck="false"
-            value={formik.values.collectionName || ''}
-          />
-          {formik.touched.collectionName && formik.errors.collectionName ? <div className="text-red-500">{formik.errors.collectionName}</div> : null}
-
-          <label htmlFor="collectionFolderName" className="flex items-center mt-3">
-            <span className='font-semibold'>Folder Name</span>
-            <Tooltip text="Name of the folder where your collection is stored" tooltipId="collection-folder-name"/>
-          </label>
-          <input
-            id="collection-folder-name"
-            type="text"
-            name="collectionFolderName"
-            ref={inputRef}
-            className="block textbox mt-2 w-full"
-            onChange={formik.handleChange}
-            autoComplete="off"
-            autoCorrect="off"
-            autoCapitalize="off"
-            spellCheck="false"
-            value={formik.values.collectionFolderName || ''}
-          />
-          {formik.touched.collectionFolderName && formik.errors.collectionFolderName ? <div className="text-red-500">{formik.errors.collectionFolderName}</div> : null}
-
-          <>
-            <label htmlFor="collectionLocation" className="block font-semibold mt-3">
-              Location
-            </label>
-            <input
-              id="collection-location"
-              type="text"
-              name="collectionLocation"
-              readOnly={true}
-              className="block textbox mt-2 w-full"
-              autoComplete="off"
-              autoCorrect="off"
-              autoCapitalize="off"
-              spellCheck="false"
-              value={formik.values.collectionLocation || ''}
-              onClick={browse}
-            />
-          </>
-          {formik.touched.collectionLocation && formik.errors.collectionLocation ? (
-            <div className="text-red-500">{formik.errors.collectionLocation}</div>
-          ) : null}
-
-          <div className="mt-1">
-            <span className="text-link cursor-pointer hover:underline" onClick={browse}>
-              Browse
-            </span>
-          </div>
-        </div>
-      </form>
-    </Modal>
-  );
-};
-
-export default CreateCollection;
--- a/packages/bruno-app/src/components/Sidebar/ImportCollection/index.js
+++ b/packages/bruno-app/src/components/Sidebar/ImportCollection/index.js
@@ -1,44 +0,0 @@
-import React from 'react';
-import importBrunoCollection from 'utils/importers/bruno-collection';
-import importPostmanCollection from 'utils/importers/postman-collection';
-import { toastError } from 'utils/common/error';
-import Modal from 'components/Modal';
-
-const ImportCollection = ({ onClose, handleSubmit }) => {
-  const handleImportBrunoCollection = () => {
-    importBrunoCollection()
-      .then((collection) => {
-        handleSubmit(collection);
-      })
-      .catch((err) => toastError(err, 'Import collection failed'));
-  };
-
-  const handleImportPostmanCollection = () => {
-    importPostmanCollection()
-      .then((collection) => {
-        handleSubmit(collection);
-      })
-      .catch((err) => toastError(err, 'Postman Import collection failed'));
-  };
-
-  return (
-    <Modal size="sm" title="Import Collection" hideFooter={true} handleConfirm={onClose} handleCancel={onClose}>
-      <div>
-        <div
-          className='text-link hover:underline cursor-pointer'
-          onClick={handleImportBrunoCollection}
-        >
-          Bruno Collection
-        </div>
-        <div
-          className='text-link hover:underline cursor-pointer mt-2'
-          onClick={handleImportPostmanCollection}
-        >
-          Postman Collection
-        </div>
-      </div>
-    </Modal>
-  );
-};
-
-export default ImportCollection;
--- a/packages/bruno-app/src/components/Sidebar/ImportCollectionLocation/index.js
+++ b/packages/bruno-app/src/components/Sidebar/ImportCollectionLocation/index.js
@@ -1,87 +0,0 @@
-import React, { useRef, useEffect } from 'react';
-import { useDispatch } from 'react-redux';
-import { useFormik } from 'formik';
-import * as Yup from 'yup';
-import { browseDirectory } from 'providers/ReduxStore/slices/collections/actions';
-import Modal from 'components/Modal';
-
-const ImportCollectionLocation = ({ onClose, handleSubmit, collectionName }) => {
-  const inputRef = useRef();
-  const dispatch = useDispatch();
-
-  const formik = useFormik({
-    enableReinitialize: true,
-    initialValues: {
-      collectionLocation: ''
-    },
-    validationSchema: Yup.object({
-      collectionLocation: Yup.string().min(1, 'must be atleast 1 characters').max(500, 'must be 500 characters or less').required('name is required')
-    }),
-    onSubmit: (values) => {
-      console.log('here');
-      handleSubmit(values.collectionLocation);
-    }
-  });
-
-  const browse = () => {
-    dispatch(browseDirectory())
-      .then((dirPath) => {
-        formik.setFieldValue('collectionLocation', dirPath);
-      })
-      .catch((error) => {
-        formik.setFieldValue('collectionLocation', '');
-        console.error(error);
-      });
-  };
-
-  useEffect(() => {
-    if (inputRef && inputRef.current) {
-      inputRef.current.focus();
-    }
-  }, [inputRef]);
-
-  const onSubmit = () => formik.handleSubmit();
-
-  return (
-    <Modal size="sm" title="Import Collection" confirmText="Import" handleConfirm={onSubmit} handleCancel={onClose}>
-      <form className="bruno-form" onSubmit={formik.handleSubmit}>
-        <div>
-          <label htmlFor="collectionName" className="block font-semibold">
-            Name
-          </label>
-          <div className='mt-2'>{collectionName}</div>
-
-          <>
-            <label htmlFor="collectionLocation" className="block font-semibold mt-3">
-              Location
-            </label>
-            <input
-              id="collection-location"
-              type="text"
-              name="collectionLocation"
-              readOnly={true}
-              className="block textbox mt-2 w-full"
-              autoComplete="off"
-              autoCorrect="off"
-              autoCapitalize="off"
-              spellCheck="false"
-              value={formik.values.collectionLocation || ''}
-              onClick={browse}
-            />
-          </>
-          {formik.touched.collectionLocation && formik.errors.collectionLocation ? (
-            <div className="text-red-500">{formik.errors.collectionLocation}</div>
-          ) : null}
-
-          <div className="mt-1">
-            <span className="text-link cursor-pointer hover:underline" onClick={browse}>
-              Browse
-            </span>
-          </div>
-        </div>
-      </form>
-    </Modal>
-  );
-};
-
-export default ImportCollectionLocation;
--- a/packages/bruno-app/src/components/Sidebar/MenuBar/index.js
+++ b/packages/bruno-app/src/components/Sidebar/MenuBar/index.js
@@ -1,60 +0,0 @@
-import { useState } from 'react';
-import { useRouter } from 'next/router';
-import { useDispatch } from 'react-redux';
-import { isElectron } from 'utils/common/platform';
-import { toggleLeftMenuBar } from 'providers/ReduxStore/slices/app';
-import { IconCode, IconFiles, IconMoon, IconChevronsLeft, IconLifebuoy } from '@tabler/icons';
-
-import Link from 'next/link';
-import StyledWrapper from './StyledWrapper';
-import BrunoSupport from 'components/BrunoSupport';
-import SwitchTheme from 'components/SwitchTheme';
-
-const MenuBar = () => {
-  const router = useRouter();
-  const dispatch = useDispatch();
-  const [openTheme, setOpenTheme] = useState(false);
-  const [openBrunoSupport, setOpenBrunoSupport] = useState(false);
-  const isPlatformElectron = isElectron();
-
-  const getClassName = (menu) => {
-    return router.pathname === menu ? 'active menu-item' : 'menu-item';
-  };
-
-  return (
-    <StyledWrapper className="h-full flex flex-col">
-      {openBrunoSupport && <BrunoSupport onClose={() => setOpenBrunoSupport(false)} />}
-      {openTheme && <SwitchTheme onClose={() => setOpenTheme(false)} />}
-
-      <div className="flex flex-col">
-        {/* Todo: Fix this: Clicking on this crashes the app */}
-        {/* <Link href="/">
-          <div className={getClassName('/')}>
-            <IconCode size={28} strokeWidth={1.5} />
-          </div>
-        </Link> */}
-        {/* <div className="menu-item">
-          <IconUsers size={28} strokeWidth={1.5}/>
-        </div> */}
-      </div>
-      <div className="flex flex-col flex-grow justify-end">
-        {/* <Link href="/login">
-          <div className="menu-item">
-              <IconUser size={28} strokeWidth={1.5}/>
-          </div>
-        </Link> */}
-        <div className="menu-item" onClick={() => setOpenBrunoSupport(true)}>
-          <IconLifebuoy size={28} strokeWidth={1.5}/>
-        </div>
-        <div className="menu-item" onClick={() => setOpenTheme(true)}>
-          <IconMoon size={28} strokeWidth={1.5}/>
-        </div>
-        <div className="menu-item" onClick={() => dispatch(toggleLeftMenuBar())}>
-          <IconChevronsLeft size={28} strokeWidth={1.5} />
-        </div>
-      </div>
-    </StyledWrapper>
-  );
-};
-
-export default MenuBar;
--- a/packages/bruno-app/src/components/Sidebar/TitleBar/index.js
+++ b/packages/bruno-app/src/components/Sidebar/TitleBar/index.js
@@ -1,110 +0,0 @@
-import toast from 'react-hot-toast';
-import Bruno from 'components/Bruno';
-import Dropdown from 'components/Dropdown';
-import CreateCollection from '../CreateCollection';
-import ImportCollection from 'components/Sidebar/ImportCollection';
-import ImportCollectionLocation from 'components/Sidebar/ImportCollectionLocation';
-
-import { IconDots } from '@tabler/icons';
-import { useState, forwardRef, useRef } from 'react';
-import { useDispatch } from 'react-redux';
-import { showHomePage } from 'providers/ReduxStore/slices/app';
-import { openCollection, importCollection } from 'providers/ReduxStore/slices/collections/actions';
-import StyledWrapper from './StyledWrapper';
-
-const TitleBar = () => {
-  const [importedCollection, setImportedCollection] = useState(null);
-  const [createCollectionModalOpen, setCreateCollectionModalOpen] = useState(false);
-  const [importCollectionModalOpen, setImportCollectionModalOpen] = useState(false);
-  const [importCollectionLocationModalOpen, setImportCollectionLocationModalOpen] = useState(false);
-  const dispatch = useDispatch();
-
-  const handleImportCollection = (collection) => {
-    setImportedCollection(collection);
-    setImportCollectionModalOpen(false);
-    setImportCollectionLocationModalOpen(true);
-  };
-
-  const handleImportCollectionLocation = (collectionLocation) => {
-    dispatch(importCollection(importedCollection, collectionLocation));
-    setImportCollectionLocationModalOpen(false);
-    setImportedCollection(null);
-    toast.success('Collection imported successfully');
-  };
-
-  const menuDropdownTippyRef = useRef();
-  const onMenuDropdownCreate = (ref) => (menuDropdownTippyRef.current = ref);
-  const MenuIcon = forwardRef((props, ref) => {
-    return (
-      <div ref={ref} className="dropdown-icon cursor-pointer">
-        <IconDots size={22} />
-      </div>
-    );
-  });
-
-  const handleTitleClick = () => dispatch(showHomePage());
-
-  const handleOpenCollection = () => {
-    dispatch(openCollection()).catch((err) => console.log(err) && toast.error('An error occured while opening the collection'));
-  };
-
-  return (
-    <StyledWrapper className="px-2 py-2">
-      {createCollectionModalOpen ? <CreateCollection onClose={() => setCreateCollectionModalOpen(false)} /> : null}
-      {importCollectionModalOpen ? <ImportCollection onClose={() => setImportCollectionModalOpen(false)} handleSubmit={handleImportCollection} /> : null}
-      {importCollectionLocationModalOpen ? (
-        <ImportCollectionLocation
-          collectionName={importedCollection.name}
-          onClose={() => setImportCollectionLocationModalOpen(false)}
-          handleSubmit={handleImportCollectionLocation}
-        />
-      ): null}
-
-      <div className="flex items-center">
-        <div className="flex items-center cursor-pointer" onClick={handleTitleClick}>
-          <Bruno width={30} />
-        </div>
-        <div
-          onClick={handleTitleClick}
-          className="flex items-center font-medium select-none cursor-pointer"
-          style={{ fontSize: 14, paddingLeft: 6, position: 'relative', top: -1 }}
-        >
-          bruno
-        </div>
-        <div className="collection-dropdown flex flex-grow items-center justify-end">
-          <Dropdown onCreate={onMenuDropdownCreate} icon={<MenuIcon />} placement="bottom-start">
-            <div
-              className="dropdown-item"
-              onClick={(e) => {
-                setCreateCollectionModalOpen(true);
-                menuDropdownTippyRef.current.hide();
-              }}
-            >
-              Create Collection
-            </div>
-            <div
-              className="dropdown-item"
-              onClick={(e) => {
-                handleOpenCollection();
-                menuDropdownTippyRef.current.hide();
-              }}
-            >
-              Open Collection
-            </div>
-            <div
-              className="dropdown-item"
-              onClick={(e) => {
-                menuDropdownTippyRef.current.hide();
-                setImportCollectionModalOpen(true);
-              }}
-            >
-              Import Collection
-            </div>
-          </Dropdown>
-        </div>
-      </div>
-    </StyledWrapper>
-  );
-};
-
-export default TitleBar;
--- a/packages/bruno-app/src/components/SingleLineEditor/StyledWrapper.js
+++ b/packages/bruno-app/src/components/SingleLineEditor/StyledWrapper.js
@@ -1,36 +0,0 @@
-import styled from 'styled-components';
-
-const StyledWrapper = styled.div`
-  width: 100%;
-  height: 30px;
-  overflow-y: hidden;
-
-  .CodeMirror {
-    background: transparent;
-    height: 30px;
-    font-size: 14px;
-    line-height: 30px;
-
-    .CodeMirror-lines {
-      padding: 0;
-    }
-
-    .CodeMirror-cursor {
-      height: 20px !important;
-      margin-top: 5px !important;
-      border-left: 1px solid ${(props) => props.theme.text} !important;
-    }
-
-    pre {
-      font-family: Inter, sans-serif !important;
-      font-weight: 400;
-    }
-
-    .CodeMirror-line {
-      color: ${(props) => props.theme.text};
-    }
-  }
-  
-`;
-
-export default StyledWrapper;
--- a/packages/bruno-app/src/components/SingleLineEditor/index.js
+++ b/packages/bruno-app/src/components/SingleLineEditor/index.js
@@ -1,103 +0,0 @@
-import React, { Component } from 'react';
-import isEqual from 'lodash/isEqual';
-import { getEnvironmentVariables } from 'utils/collections';
-import { defineCodeMirrorBrunoVariablesMode } from 'utils/common/codemirror';
-import StyledWrapper from './StyledWrapper';
-
-let CodeMirror;
-const SERVER_RENDERED = typeof navigator === 'undefined' || global['PREVENT_CODEMIRROR_RENDER'] === true;
-
-if (!SERVER_RENDERED) {
-  CodeMirror = require('codemirror');
-}
-
-class SingleLineEditor extends Component {
-  constructor(props) {
-    super(props);
-    this.editorRef = React.createRef();
-    this.variables = {};
-  }
-  componentDidMount() {
-    // Initialize CodeMirror as a single line editor
-    this.editor = CodeMirror(this.editorRef.current, {
-      lineWrapping: false,
-      lineNumbers: false,
-      mode: "brunovariables",
-      brunoVarInfo: {
-        variables: getEnvironmentVariables(this.props.collection),
-      },
-      extraKeys: {
-        "Enter": () => {
-          if (this.props.onRun) {
-            this.props.onRun();
-          }
-        },
-        "Ctrl-Enter": () => {
-          if (this.props.onRun) {
-            this.props.onRun();
-          }
-        },
-        "Cmd-Enter": () => {
-          if (this.props.onRun) {
-            this.props.onRun();
-          }
-        },
-        "Alt-Enter": () => {
-          if (this.props.onRun) {
-            this.props.onRun();
-          }
-        },
-        "Shift-Enter": () => {
-          if (this.props.onRun) {
-            this.props.onRun();
-          }
-        },
-        'Cmd-S': () => {
-          if (this.props.onSave) {
-            this.props.onSave();
-          }
-        },
-        'Ctrl-S': () => {
-          if (this.props.onSave) {
-            this.props.onSave();
-          }
-        },
-        'Cmd-F': () => {},
-        'Ctrl-F': () => {},
-        'Tab': () => {}
-      },
-    });
-    this.editor.setValue(this.props.value);
-    this.editor.on('change', (cm) => {
-      this.props.onChange(cm.getValue());
-    });
-    this.addOverlay();
-  }
-
-  componentDidUpdate(prevProps) {
-    let variables = getEnvironmentVariables(this.props.collection);
-    if (!isEqual(variables, this.variables)) {
-      this.editor.options.brunoVarInfo.variables = variables;
-      this.addOverlay();
-    }
-  }
-
-  componentWillUnmount() {
-    this.editor.getWrapperElement().remove();
-  }
-
-  addOverlay = () => {
-    let variables = getEnvironmentVariables(this.props.collection);
-    this.variables = variables;
-
-    defineCodeMirrorBrunoVariablesMode(variables, "text/plain");
-    this.editor.setOption('mode', 'brunovariables');
-  }
-
-  render() {
-    return (
-      <StyledWrapper ref={this.editorRef} className="single-line-editor"></StyledWrapper>
-    );
-  }
-}
-export default SingleLineEditor;
--- a/packages/bruno-app/src/components/SwitchTheme/StyledWrapper.js
+++ b/packages/bruno-app/src/components/SwitchTheme/StyledWrapper.js
@@ -1,20 +0,0 @@
-import styled from 'styled-components';
-
-const StyledWrapper = styled.div`
-  color: var(--color-text);
-  .collection-options {
-    svg {
-      position: relative;
-      top: -1px;
-    }
-
-    .label {
-      cursor: pointer;
-      &:hover {
-        text-decoration: underline;
-      }
-    }
-  }
-`;
-
-export default StyledWrapper;
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Anusree Subash	114fe26fe2	chore: fixed indentation	2022-10-05 20:29:05 +05:30
Anusree Subash	72a9567221	feat: workspace selector (resolves #13 )	2022-10-05 20:20:46 +05:30
				`@@ -1 +0,0 @@`
				<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>