feat: refactored about menu + added static path updates for win build

Fix #2315

.github/ISSUE_TEMPLATE/BugReport.yaml

@@ -17,6 +17,17 @@ body:
         - label: "I have searched existing issues and found nothing related to my issue."
           required: true
 
+  - type: checkboxes
+    attributes:
+      label: 'This bug is:'
+      options:
+        - label: making Bruno unusable for me
+          required: false
+        - label: slowing me down but I'm able to continue working
+          required: false
+        - label: annoying
+          required: false
+          
   - type: input
     attributes:
       label: Bruno version
@@ -29,14 +40,14 @@ body:
     attributes:
       label: Operating System
       description: Information about the operating system the issue occurs on.
-      placeholder: Windows / Mac / Linux
+      placeholder: Windows 11 26100.3037 / macOS 15.1 (24B83) / Linux 6.13.1
     validations:
       required: true
 
   - type: textarea
     attributes:
       label: Describe the bug
-      description: A clear and concise description of the bug and also include steps to reproduce it.
+      description: A clear and concise description of the bug and how it's effecting your work along with steps to reproduce. 
     validations:
       required: true
 

.github/dependabot.yml

@@ -0,0 +1,31 @@
+version: 2
+
+updates:
+  - package-ecosystem: "github-actions"
+    directory: "/"
+    schedule:
+      interval: weekly
+  
+  - package-ecosystem: npm
+    directory: "/"
+    schedule:
+      interval: weekly
+    groups:
+      bruno-dependencies:
+        patterns:
+          - "*usebruno*"
+      babel-dependencies:
+        patterns:
+          - "*babel*"
+      fortawesome-dependencies:
+        patterns:
+          - "*fortawesome*"
+      electron-dependencies:
+        patterns:
+          - "*electron*"
+      rollup-dependencies:
+        patterns:
+          - "*rollup*"
+      jest-dependencies:
+        patterns:
+          - "*jest*"

.github/workflows/npm-bru-cli.yml

@@ -26,7 +26,7 @@ jobs:
     runs-on: ${{ matrix.os }}
     steps:
       - uses: actions/checkout@v4
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v4
         with:
           node-version-file: '.nvmrc'
 
@@ -43,7 +43,7 @@ jobs:
           bru run --env Prod --output junit.xml --format junit
 
       - name: Publish Test Report
-        uses: dorny/test-reporter@v1
+        uses: dorny/test-reporter@v2
         if: success() || failure()
         with:
           name: Test Report

contributing.md

@@ -86,11 +86,11 @@ find . -type f -name "package-lock.json" -delete
 ### Testing
 
 ```bash
-# bruno-schema
+# run bruno-schema tests
 npm test --workspace=packages/bruno-schema
 
-# bruno-lang
-npm test --workspace=packages/bruno-lang
+# run tests over all workspaces
+npm test --workspaces --if-present
 ```
 
 ### Raising Pull Requests

docs/contributing/contributing_bn.md

@@ -70,11 +70,11 @@ find . -type f -name "package-lock.json" -delete
 ### Testing (পরীক্ষা)
 
 ```bash
-# bruno-schema
+# ব্রুনো-স্কিমা পরীক্ষা চালান
 npm test --workspace=packages/bruno-schema
 
-# bruno-lang
-npm test --workspace=packages/bruno-lang
+# সমস্ত কর্মক্ষেত্রে পরীক্ষা চালান
+npm test --workspaces --if-present
 ```
 
 ### Raising Pull Request (পুল অনুরোধ উত্থাপন)

docs/contributing/contributing_cn.md

@@ -70,11 +70,11 @@ find . -type f -name "package-lock.json" -delete
 ### 测试
 
 ```bash
-# bruno-schema
+# 运行 bruno-schema 测试
 npm test --workspace=packages/bruno-schema
 
-# bruno-lang
-npm test --workspace=packages/bruno-lang
+# 在所有工作区上运行测试
+npm test --workspaces --if-present
 ```
 
 ### 提交 Pull Request

docs/contributing/contributing_de.md

@@ -83,9 +83,9 @@ find . -type f -name "package-lock.json" -delete
 ### Testen
 
 ```bash
-# bruno-schema
+# Führen Sie Bruno-Schema-Tests aus
 npm test --workspace=packages/bruno-schema
 
-# bruno-lang
-npm test --workspace=packages/bruno-lang
+# Führen Sie Tests für alle Arbeitsbereiche durch
+npm test --workspaces --if-present
 ```

docs/contributing/contributing_es.md

@@ -70,11 +70,11 @@ find . -type f -name "package-lock.json" -delete
 ### Pruebas
 
 ```bash
-# bruno-schema
+# ejecutar pruebas de esquema bruno
 npm test --workspace=packages/bruno-schema
 
-# bruno-lang
-npm test --workspace=packages/bruno-lang
+# ejecutar pruebas en todos los espacios de trabajo
+npm test --workspaces --if-present
 ```
 
 ### Crea un Pull Request

docs/contributing/contributing_fr.md

@@ -73,11 +73,11 @@ find . -type f -name "package-lock.json" -delete
 ### Tests
 
 ```bash
-# bruno-schema
+# exécuter des tests de schéma bruno
 npm test --workspace=packages/bruno-schema
 
-# bruno-lang
-npm test --workspace=packages/bruno-lang
+# exécuter des tests sur tous les espaces de travail
+npm test --workspaces --if-present
 ```
 
 ### Ouvrir une Pull Request

docs/contributing/contributing_hi.md

@@ -65,11 +65,11 @@ find . -type f -name "package-lock.json" -delete
 ### परिक्षण
 
 ```bash
-# bruno-schema
+# ब्रूनो-स्कीमा परीक्षण चलाएँ
 npm test --workspace=packages/bruno-schema
 
-# bruno-lang
-npm test --workspace=packages/bruno-lang
+# सभी कार्यस्थानों पर परीक्षण चलाएँ
+npm test --workspaces --if-present
 ```
 
 ### पुल अनुरोध प्रक्रिया

docs/contributing/contributing_it.md

@@ -83,9 +83,9 @@ find . -type f -name "package-lock.json" -delete
 ### Tests
 
 ```bash
-# bruno-schema
+# esegui i test dello schema bruno
 npm test --workspace=packages/bruno-schema
 
-# bruno-lang
-npm test --workspace=packages/bruno-lang
+# esegui test su tutti gli spazi di lavoro
+npm test --workspaces --if-present
 ```

docs/contributing/contributing_ja.md

@@ -65,11 +65,11 @@ find . -type f -name "package-lock.json" -delete
 ### テストを動かすには
 
 ```bash
-# bruno-schema
+# ブルーノスキーマのテストを実行します
 npm test --workspace=packages/bruno-schema
 
-# bruno-lang
-npm test --workspace=packages/bruno-lang
+# すべてのワークスペースでテストを実行します
+npm test --workspaces --if-present
 ```
 
 ### プルリクエストの手順

docs/contributing/contributing_kr.md

@@ -66,11 +66,11 @@ find . -type f -name "package-lock.json" -delete
 ### 테스팅
 
 ```bash
-# bruno-schema
+# bruno-schema 테스트 실행
 npm test --workspace=packages/bruno-schema
 
-# bruno-lang
-npm test --workspace=packages/bruno-lang
+# 모든 작업 공간에서 테스트 실행
+npm test --workspaces --if-present
 ```
 
 ### Pull Requests 요청

docs/contributing/contributing_nl.md

@@ -65,11 +65,11 @@ find . -type f -name "package-lock.json" -delete
 ### Testen
 
 ```bash
-# bruno-schema
+# voer bruno-schema tests uit
 npm test --workspace=packages/bruno-schema
 
-# bruno-lang
-npm test --workspace=packages/bruno-lang
+# voer tests uit over alle werkruimten
+npm test --workspaces --if-present
 ```
 
 ### Pull Requests indienen

docs/contributing/contributing_pl.md

@@ -71,11 +71,11 @@ find . -type f -name "package-lock.json" -delete
 ### Testowanie
 
 ```bash
-# bruno-schema
+# uruchom testy bruno-schema
 npm test --workspace=packages/bruno-schema
 
-# bruno-lang
-npm test --workspace=packages/bruno-lang
+# uruchom testy we wszystkich przestrzeniach roboczych
+npm test --workspaces --if-present
 ```
 
 ### Tworzenie Pull Request

docs/contributing/contributing_pt_br.md

@@ -70,11 +70,11 @@ find . -type f -name "package-lock.json" -delete
 ### Testando
 
 ```bash
-# bruno-schema
+# executar testes do bruno-schema
 npm test --workspace=packages/bruno-schema
 
-# bruno-lang
-npm test --workspace=packages/bruno-lang
+# executar testes em todos os ambientes de trabalho
+npm test --workspaces --if-present
 ```
 
 ### Envio de Pull Request

docs/contributing/contributing_ro.md

@@ -64,11 +64,11 @@ find . -type f -name "package-lock.json" -delete
 ### Testarea
 
 ```shell
-# bruno-schema
+# executați teste bruno-schema
 npm test --workspace=packages/bruno-schema
 
-# bruno-lang
-npm test --workspace=packages/bruno-lang
+# executați teste peste toate spațiile de lucru
+npm test --workspaces --if-present
 ```
 
 ### Crearea unui Pull Request

docs/contributing/contributing_ru.md

@@ -83,9 +83,9 @@ find . -type f -name "package-lock.json" -delete
 ### Тестирование
 
 ```bash
-# bruno-schema
+# запустите тесты bruno-schema
 npm test --workspace=packages/bruno-schema
 
-# bruno-lang
-npm test --workspace=packages/bruno-lang
+# запустите тесты во всех рабочих пространствах
+npm test --workspaces --if-present
 ```

docs/contributing/contributing_sk.md

@@ -67,11 +67,11 @@ find . -type f -name "package-lock.json" -delete
 ### Testovanie
 
 ````bash
-# bruno-schema
+# spustiť bruno-schema testy
 npm test --workspace=packages/bruno-schema
 
-# bruno-lang
-npm test --workspace=packages/bruno-lang
+# spustiť testy vo všetkých pracovných priestoroch
+npm test --workspaces --if-present
 ```
 
 ### Vyrobenie Pull Request

docs/contributing/contributing_tr.md

@@ -70,11 +70,11 @@ find . -type f -name "package-lock.json" -delete
 ### Test
 
 ```bash
-# bruno-schema
+# bruno-schema testlerini çalıştır
 npm test --workspace=packages/bruno-schema
 
-# bruno-lang
-npm test --workspace=packages/bruno-lang
+# tüm çalışma alanlarında testleri çalıştır
+npm test --workspaces --if-present
 ```
 
 ### Pull Request Oluşturma

docs/contributing/contributing_ua.md

@@ -83,9 +83,9 @@ find . -type f -name "package-lock.json" -delete
 ### Тестування
 
 ```bash
-# bruno-schema
+# запустити тести bruno-schema
 npm test --workspace=packages/bruno-schema
 
-# bruno-lang
-npm test --workspace=packages/bruno-lang
+# запустити тести у всіх робочих просторах
+npm test --workspaces --if-present
 ```

docs/contributing/contributing_zhtw.md

@@ -70,11 +70,11 @@ find . -type f -name "package-lock.json" -delete
 ### 測試
 
 ```bash
-# bruno-schema
+# 執行布魯諾架構測試
 npm test --workspace=packages/bruno-schema
 
-# bruno-lang
-npm test --workspace=packages/bruno-lang
+# 對所有工作區執行測試
+npm test --workspaces --if-present
 ```
 
 ### 發送 Pull Request

docs/readme/readme_ua.md

@@ -29,13 +29,13 @@
 | [日本語](./readme_ja.md)
 | [ქართული](./readme_ka.md)
 
-Bruno це новий та іноваційний API клієнт, націлений на революційну зміну статус кво, запровадженого інструментами на кшталт Postman.
+Bruno це новий та іноваційний API клієнт, націлений на революційну зміну статусy кво, запровадженого інструментами на кшталт Postman.
 
 Bruno зберігає ваші колекції напряму у теці на вашому диску. Він використовує текстову мову розмітки Bru для збереження інформації про ваші API запити.
 
 Ви можете використовувати git або будь-яку іншу систему контролю версій щоб спільно працювати над вашими колекціями API запитів.
 
-Bruno є повністю автономним. Немає жодних планів додавати будь-які синхронізації через хмару, ніколи. Ми цінуємо приватність ваших даних, і вважаєм, що вони мають залишитись лише на вашому комп'ютері. Взнати більше про наше бачення у довготривалій перспективі можна [тут](https://github.com/usebruno/bruno/discussions/269)
+Bruno є повністю автономним. Немає жодних планів додавати будь-які синхронізації через хмару, ніколи. Ми цінуємо приватність ваших даних, і вважаєм, що вони мають залишитись лише на вашому комп'ютері. Дізнатись більше про наше бачення у довготривалій перспективі можна [тут](https://github.com/usebruno/bruno/discussions/269)
 
 ![bruno](/assets/images/landing-2.png) <br /><br />
 
@@ -69,13 +69,13 @@ Bruno є повністю автономним. Немає жодних план
 
 ### Поділитись відгуками 📣
 
-Якщо Bruno допоміг вам у вашій роботі і вашим командам, будь ласка не забудьте поділитись вашими [відгуками у github дискусії](https://github.com/usebruno/bruno/discussions/343)
+Якщо Bruno допоміг у роботі вам або вашій команді, будь ласка не забудьте поділитись вашими [відгуками у github дискусії](https://github.com/usebruno/bruno/discussions/343)
 
 ### Зробити свій внесок 👩‍💻🧑‍💻
 
 Я радий що ви бажаєте покращити Bruno. Будь ласка переглянте [інструкцію по контрибуції](../contributing/contributing_ua.md)
 
-Навіть якщо ви не можете зробити свій внесок пишучи програмний код, будь ласка не соромтесь рапортувати про помилки і писати запити на новий функціонал, який потрібен вам у вашій роботі.
+Навіть якщо ви не можете зробити свій внесок пишучи код, будь ласка не соромтесь рапортувати про помилки і писати запити на новий функціонал, який потрібен вам у вашій роботі.
 
 ### Автори
 

package.json

@@ -27,7 +27,7 @@
     "pretty-quick": "^3.1.3",
     "randomstring": "^1.2.2",
     "rimraf": "^6.0.1",
-    "ts-jest": "^29.0.5"
+    "ts-jest": "^29.2.6"
   },
   "scripts": {
     "setup": "node ./scripts/setup.js",

packages/bruno-app/package.json

@@ -36,17 +36,20 @@
     "graphql-request": "^3.7.0",
     "httpsnippet": "^3.0.9",
     "i18next": "24.1.2",
+    "iconv-lite": "^0.6.3",
     "idb": "^7.0.0",
     "immer": "^9.0.15",
     "jsesc": "^3.0.2",
     "jshint": "^2.13.6",
     "json5": "^2.2.3",
     "jsonc-parser": "^3.2.1",
-    "jsonpath-plus": "10.2.0",
+    "jsonpath-plus": "^10.3.0",
     "know-your-http-well": "^0.5.0",
     "lodash": "^4.17.21",
     "markdown-it": "^13.0.2",
     "markdown-it-replace-link": "^1.2.0",
+    "moment": "^2.30.1",
+    "moment-timezone": "^0.5.47",
     "mousetrap": "^1.6.5",
     "nanoid": "3.3.8",
     "path": "^0.12.7",

packages/bruno-app/src/components/Accordion/index.js

@@ -0,0 +1,62 @@
+import React, { createContext, useContext, useState } from 'react';
+import { IconChevronDown } from '@tabler/icons';
+import { AccordionItem, AccordionHeader, AccordionContent } from './styledWrapper';
+
+const AccordionContext = createContext();
+
+const Accordion = ({ children, defaultIndex }) => {
+  const [openIndex, setOpenIndex] = useState(defaultIndex);
+
+  const toggleItem = (index) => {
+    setOpenIndex(openIndex === index ? null : index);
+  };
+
+  return (
+    <AccordionContext.Provider value={{ openIndex, toggleItem }}>
+      <div>{children}</div>
+    </AccordionContext.Provider>
+  );
+};
+
+const Item = ({ index, children, ...props }) => {
+  return (
+    <AccordionItem {...props}>
+      {React.Children.map(children, (child) => React.cloneElement(child, { index }))}
+    </AccordionItem>
+  );
+};
+
+export const Header = ({ index, children, ...props }) => {
+  const { openIndex, toggleItem } = useContext(AccordionContext);
+  const isOpen = openIndex === index;
+
+  return (
+    <AccordionHeader onClick={() => toggleItem(index)} {...props} className={isOpen ? 'open' : ''}>
+      <div className="w-full">{children}</div>
+
+      <IconChevronDown
+        className="w-5 h-5 ml-auto"
+        style={{
+          transform: `rotate(${isOpen ? '180deg' : '0deg'})`,
+          transition: 'transform 0.3s ease-in-out'
+        }}
+      />
+    </AccordionHeader>
+  );
+};
+
+const Content = ({ index, children, ...props }) => {
+  const { openIndex } = useContext(AccordionContext);
+  const isOpen = openIndex === index;
+
+  return (
+    <AccordionContent isOpen={isOpen} {...props}>
+      {children}
+    </AccordionContent>
+  );
+};
+
+Accordion.Item = Item;
+Accordion.Header = Header;
+Accordion.Content = Content;
+export default Accordion;

packages/bruno-app/src/components/Accordion/styledWrapper.js

@@ -0,0 +1,28 @@
+import styled from 'styled-components';
+
+const AccordionItem = styled.div`
+  border: 1px solid ${(props) => props.theme.input.border};
+  border-radius: 4px;
+  overflow: hidden;
+  margin-bottom: 1rem;
+`;
+
+const AccordionHeader = styled.button`
+  width: 100%;
+  display: flex;
+  padding: 0.75rem 1rem;
+  background: transparent;
+  cursor: pointer;
+  font-weight: 500;
+
+  &.open, &:hover {
+    background-color: ${(props) => props.theme.plainGrid.hoverBg};
+  }
+`;
+
+const AccordionContent = styled.div`
+  padding: ${(props) => (props.isOpen ? '1rem' : '0')};
+  max-height: ${(props) => (props.isOpen ? 'auto' : '0')};
+`;
+
+export { AccordionItem, AccordionHeader, AccordionContent };

packages/bruno-app/src/components/CodeEditor/index.js

@@ -31,6 +31,7 @@ if (!SERVER_RENDERED) {
     'res.body',
     'res.responseTime',
     'res.getStatus()',
+    'res.getStatusText()',
     'res.getHeader(name)',
     'res.getHeaders()',
     'res.getBody()',
@@ -83,7 +84,7 @@ if (!SERVER_RENDERED) {
     'bru.runner',
     'bru.runner.setNextRequest(requestName)',
     'bru.runner.skipRequest()',
-    'bru.runner.stopExecution()',
+    'bru.runner.stopExecution()'
   ];
   CodeMirror.registerHelper('hint', 'brunoJS', (editor, options) => {
     const cursor = editor.getCursor();
@@ -174,11 +175,21 @@ export default class CodeEditor extends React.Component {
           }
         },
         'Cmd-F': (cm) => {
+          if (this._isSearchOpen()) {
+            // replace the older search component with the new one
+            const search = document.querySelector('.CodeMirror-dialog.CodeMirror-dialog-top');
+            search && search.remove();
+          }
           cm.execCommand('findPersistent');
           this._bindSearchHandler();
           this._appendSearchResultsCount();
         },
         'Ctrl-F': (cm) => {
+          if (this._isSearchOpen()) {
+            // replace the older search component with the new one
+            const search = document.querySelector('.CodeMirror-dialog.CodeMirror-dialog-top');
+            search && search.remove();
+          }
           cm.execCommand('findPersistent');
           this._bindSearchHandler();
           this._appendSearchResultsCount();
@@ -365,6 +376,10 @@ export default class CodeEditor extends React.Component {
     }
   };
 
+  _isSearchOpen = () => {
+    return document.querySelector('.CodeMirror-dialog.CodeMirror-dialog-top');
+  };
+
   /**
    * Bind handler to search input to count number of search results
    */

packages/bruno-app/src/components/CollectionSettings/ClientCertSettings/index.js

@@ -8,9 +8,7 @@ import { useState } from 'react';
 
 import StyledWrapper from './StyledWrapper';
 import { useRef } from 'react';
-import path from 'path';
-import slash from 'utils/common/slash';
-import { isWindowsOS } from 'utils/common/platform';
+import path from 'utils/common/path';
 
 const ClientCertSettings = ({ root, clientCertConfig, onUpdate, onRemove }) => {
   const certFilePathInputRef = useRef();
@@ -70,12 +68,7 @@ const ClientCertSettings = ({ root, clientCertConfig, onUpdate, onRemove }) => {
   const getFile = (e) => {
     const filePath = window?.ipcRenderer?.getFilePath(e?.files?.[0]);
     if (filePath) {
-      let relativePath;
-      if (isWindowsOS()) {
-        relativePath = slash(path.win32.relative(root, filePath));
-      } else {
-        relativePath = path.posix.relative(root, filePath);
-      }
+      let relativePath = path.relative(root, filePath);
       formik.setFieldValue(e.name, relativePath);
     }
   };
@@ -109,23 +102,23 @@ const ClientCertSettings = ({ root, clientCertConfig, onUpdate, onRemove }) => {
       <ul className="mt-4">
         {!clientCertConfig.length
           ? 'No client certificates added'
-          : clientCertConfig.map((clientCert) => (
-              <li key={uuid()} className="flex items-center available-certificates p-2 rounded-lg mb-2">
-                <div className="flex items-center w-full justify-between">
-                  <div className="flex w-full items-center">
-                    <IconWorld className="mr-2" size={18} strokeWidth={1.5} />
-                    {clientCert.domain}
-                  </div>
-                  <div className="flex w-full items-center">
-                    <IconCertificate className="mr-2 flex-shrink-0" size={18} strokeWidth={1.5} />
-                    {clientCert.type === 'cert' ? clientCert.certFilePath : clientCert.pfxFilePath}
-                  </div>
-                  <button onClick={() => onRemove(clientCert)} className="remove-certificate ml-2">
-                    <IconTrash size={18} strokeWidth={1.5} />
-                  </button>
+          : clientCertConfig.map((clientCert, index) => (
+            <li key={`client-cert-${index}`} className="flex items-center available-certificates p-2 rounded-lg mb-2">
+              <div className="flex items-center w-full justify-between">
+                <div className="flex w-full items-center">
+                  <IconWorld className="mr-2" size={18} strokeWidth={1.5} />
+                  {clientCert.domain}
                 </div>
-              </li>
-            ))}
+                <div className="flex w-full items-center">
+                  <IconCertificate className="mr-2 flex-shrink-0" size={18} strokeWidth={1.5} />
+                  {clientCert.type === 'cert' ? clientCert.certFilePath : clientCert.pfxFilePath}
+                </div>
+                <button onClick={() => onRemove(clientCert)} className="remove-certificate ml-2">
+                  <IconTrash size={18} strokeWidth={1.5} />
+                </button>
+              </div>
+            </li>
+          ))}
       </ul>
 
       <h1 className="font-semibold mt-8 mb-2">Add Client Certificate</h1>
@@ -198,9 +191,9 @@ const ClientCertSettings = ({ root, clientCertConfig, onUpdate, onRemove }) => {
                   <div className="flex flex-row gap-2 items-center">
                     <div
                       className="my-[3px] overflow-hidden text-ellipsis whitespace-nowrap max-w-[300px]"
-                      title={path.basename(slash(formik.values.certFilePath))}
+                      title={path.basename(formik.values.certFilePath)}
                     >
-                      {path.basename(slash(formik.values.certFilePath))}
+                      {path.basename(formik.values.certFilePath)}
                     </div>
                     <IconTrash
                       size={18}
@@ -238,9 +231,9 @@ const ClientCertSettings = ({ root, clientCertConfig, onUpdate, onRemove }) => {
                   <div className="flex flex-row gap-2 items-center">
                     <div
                       className="my-[3px] overflow-hidden text-ellipsis whitespace-nowrap max-w-[300px]"
-                      title={path.basename(slash(formik.values.keyFilePath))}
+                      title={path.basename(formik.values.keyFilePath)}
                     >
-                      {path.basename(slash(formik.values.keyFilePath))}
+                      {path.basename(formik.values.keyFilePath)}
                     </div>
                     <IconTrash
                       size={18}
@@ -281,9 +274,9 @@ const ClientCertSettings = ({ root, clientCertConfig, onUpdate, onRemove }) => {
                   <div className="flex flex-row gap-2 items-center">
                     <div
                       className="my-[3px] overflow-hidden text-ellipsis whitespace-nowrap max-w-[300px]"
-                      title={path.basename(slash(formik.values.pfxFilePath))}
+                      title={path.basename(formik.values.pfxFilePath)}
                     >
-                      {path.basename(slash(formik.values.pfxFilePath))}
+                      {path.basename(formik.values.pfxFilePath)}
                     </div>
                     <IconTrash
                       size={18}

packages/bruno-app/src/components/CollectionSettings/Overview/Info/index.js

@@ -1,13 +1,20 @@
 import React from "react";
 import { getTotalRequestCountInCollection } from 'utils/collections/';
-import { IconFolder, IconWorld, IconApi, IconClock } from '@tabler/icons';
+import { IconFolder, IconWorld, IconApi, IconShare } from '@tabler/icons';
 import { areItemsLoading, getItemsLoadStats } from "utils/collections/index";
+import { useState } from "react";
+import ShareCollection from "components/ShareCollection/index";
 
 const Info = ({ collection }) => {
   const totalRequestsInCollection = getTotalRequestCountInCollection(collection);
 
   const isCollectionLoading = areItemsLoading(collection);
   const { loading: itemsLoadingCount, total: totalItems } = getItemsLoadStats(collection);
+  const [showShareCollectionModal, toggleShowShareCollectionModal] = useState(false);
+  
+  const handleToggleShowShareCollectionModal = (value) => (e) => {
+    toggleShowShareCollectionModal(value);
+  }
 
   return (
     <div className="w-full flex flex-col h-fit">
@@ -53,6 +60,19 @@ const Info = ({ collection }) => {
               </div>
             </div>
           </div>
+
+          <div className="flex items-start group cursor-pointer" onClick={handleToggleShowShareCollectionModal(true)}>
+            <div className="flex-shrink-0 p-3 bg-indigo-50 dark:bg-indigo-900/20 rounded-lg">
+              <IconShare className="w-5 h-5 text-indigo-500" stroke={1.5} />
+            </div>
+            <div className="ml-4 h-full flex flex-col justify-start">
+              <div className="font-semibold text-sm h-fit my-auto">Share</div>
+              <div className="mt-1 text-sm group-hover:underline text-link">
+                Share Collection
+              </div>
+            </div>
+          </div>
+          {showShareCollectionModal && <ShareCollection collection={collection} onClose={handleToggleShowShareCollectionModal(false)} />}
         </div>
       </div>
     </div>

packages/bruno-app/src/components/Cookies/ModifyCookieModal/StyledWrapper.js

@@ -0,0 +1,5 @@
+import styled from 'styled-components';
+
+const StyledWrapper = styled.div``;
+
+export default StyledWrapper;

packages/bruno-app/src/components/Cookies/ModifyCookieModal/index.js

@@ -0,0 +1,371 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { useFormik } from 'formik';
+import * as Yup from 'yup';
+import Modal from 'components/Modal/index';
+import { modifyCookie, addCookie, getParsedCookie, createCookieString } from 'providers/ReduxStore/slices/app';
+import { useDispatch } from 'react-redux';
+import toast from 'react-hot-toast';
+import ToggleSwitch from 'components/ToggleSwitch/index';
+import { IconInfoCircle } from '@tabler/icons';
+import moment from 'moment';
+import 'moment-timezone';
+import { Tooltip } from 'react-tooltip';
+import { isEmpty } from 'lodash';
+
+const removeEmptyValues = (obj) => {
+  return Object.fromEntries(Object.entries(obj).filter(([_, value]) => value !== null && value !== undefined));
+};
+
+const ModifyCookieModal = ({ onClose, domain, cookie }) => {
+  const dispatch = useDispatch();
+  const [isRawMode, setIsRawMode] = useState(false);
+  const [cookieString, setCookieString] = useState('');
+  const initialParseRef = useRef(false);
+
+  const formik = useFormik({
+    enableReinitialize: true,
+    initialValues: {
+      ...(cookie ? cookie : {}),
+      key: cookie?.key || '',
+      value: cookie?.value || '',
+      path: cookie?.path || '/',
+      domain: cookie?.domain || domain || '',
+      expires: cookie?.expires ? moment(cookie.expires).format(moment.HTML5_FMT.DATETIME_LOCAL) : '',
+      secure: cookie?.secure || false,
+      httpOnly: cookie?.httpOnly || false
+    },
+    validationSchema: Yup.object({
+      key: Yup.string().required('Key is required'),
+      value: Yup.string().required('Value is required'),
+      domain: Yup.string().required('Domain is required'),
+      secure: Yup.boolean(),
+      httpOnly: Yup.boolean(),
+      expires: Yup.mixed()
+        .nullable()
+        .transform((value) => {
+          if (!value || value === '') return null;
+          return moment(value).isValid() ? moment(value).toDate() : null;
+        })
+        .test('future-date', 'Expiration date must be in the future', (value) => {
+          if (!value) return true;
+          return moment(value).isAfter(moment());
+        })
+    }),
+    onSubmit: (values) => {
+      const modValues = removeEmptyValues({
+        ...(cookie ? cookie : {}),
+        ...values,
+        expires: values.expires
+          ? moment(values.expires).isValid()
+            ? moment(values.expires).toDate()
+            : Infinity
+          : Infinity
+      });
+
+      handleCookieDispatch(cookie, domain, modValues, onClose);
+    }
+  });
+
+  const title = cookie ? 'Modify Cookie' : 'Add Cookie';
+
+  const handleCookieDispatch = (cookie, domain, modValues, onClose) => {
+    if (cookie) {
+      dispatch(modifyCookie(domain, cookie, modValues))
+        .then(() => {
+          toast.success('Cookie modified successfully');
+          onClose();
+        })
+        .catch((err) => {
+          toast.error('An error occurred while modifying cookie');
+          console.error(err);
+        });
+    } else {
+      dispatch(addCookie(domain, modValues))
+        .then(() => {
+          toast.success('Cookie added successfully');
+          onClose();
+        })
+        .catch((err) => {
+          toast.error('An error occurred while adding cookie');
+          console.error(err);
+        });
+    }
+  };
+
+  const onSubmit = async () => {
+    try {
+      if (isRawMode) {
+        const cookieObj = await dispatch(getParsedCookie(cookieString));
+
+        const modifiedCookie = removeEmptyValues({
+          ...formik.values,
+          ...cookieObj,
+          expires: cookieObj?.expires
+            ? moment(cookieObj.expires).isValid()
+              ? moment(cookieObj.expires).toDate()
+              : Infinity
+            : Infinity
+        });
+
+        if (!cookieObj) {
+          toast.error('Please enter a valid cookie string');
+          return;
+        }
+
+        const validationErrors = await formik.setValues(
+          (values) => ({
+            ...values,
+            ...modifiedCookie,
+            expires:
+              modifiedCookie?.expires && moment(modifiedCookie.expires).isValid()
+                ? moment(new Date(modifiedCookie.expires)).format(moment.HTML5_FMT.DATETIME_LOCAL)
+                : ''
+          }),
+          true
+        );
+
+        if (!isEmpty(validationErrors)) {
+          toast.error(Object.values(validationErrors).join("\n"));
+          return;
+        }
+
+        handleCookieDispatch(cookie, domain, modifiedCookie, onClose);
+      } else {
+        formik.handleSubmit();
+      }
+    } catch (error) {
+      const errMsg = error.message || 'An error occurred while parsing cookie string';
+      toast.error(errMsg);
+    }
+  };
+
+  useEffect(() => {
+    if (!isRawMode) return;
+    const loadCookieString = async () => {
+      if (cookie) {
+        const str = await dispatch(createCookieString(cookie));
+        setCookieString(str);
+      }
+      return '';
+    };
+
+    loadCookieString();
+  }, [cookie, isRawMode]);
+
+  // create the cookieString when raw mode is enabled
+  useEffect(() => {
+    if (isRawMode) {
+      const createCookieStr = async () => {
+        const str = await dispatch(createCookieString(formik.values));
+        setCookieString(str);
+      };
+
+      createCookieStr();
+    }
+  }, [isRawMode, formik.values]);
+
+  useEffect(() => {
+    // Reset the ref when raw mode changes
+    if (isRawMode) {
+      initialParseRef.current = false;
+      return;
+    }
+
+    const setParsedCookie = async () => {
+      if (!isRawMode && cookieString && !initialParseRef.current) {
+        initialParseRef.current = true;
+
+        try {
+          const cookieObj = await dispatch(getParsedCookie(cookieString));
+
+          if (!cookieObj) return;
+
+          formik.setValues(
+            (values) => ({
+              ...values,
+              ...removeEmptyValues(cookieObj),
+              expires:
+                cookieObj?.expires && moment(cookieObj.expires).isValid()
+                  ? moment(new Date(cookieObj.expires)).format(moment.HTML5_FMT.DATETIME_LOCAL)
+                  : ''
+            }),
+            true
+          );
+        } catch (error) {
+          const errMsg = error.message || 'An error occurred while parsing cookie string';
+          toast.error(errMsg);
+        }
+      }
+    };
+
+    setParsedCookie();
+  }, [isRawMode, cookieString, dispatch, formik]);
+
+  return (
+    <Modal
+      size="lg"
+      title={title}
+      onClose={onClose}
+      handleCancel={onClose}
+      handleConfirm={onSubmit}
+      customHeader={
+        <div className="flex items-center justify-between w-full">
+          <h2 className="text-sm font-bold">{title}</h2>
+          <div className="ml-auto flex items-center ">
+            <ToggleSwitch
+              className="mr-2"
+              isOn={isRawMode}
+              size="2xs"
+              handleToggle={(e) => {
+                setIsRawMode(e.target.checked);
+              }}
+            />
+            <label className="text-sm font-normal mr-4 normal-case">Edit Raw</label>
+          </div>
+        </div>
+      }
+    >
+      <form onSubmit={(e) => e.preventDefault()} className="px-2">
+        {isRawMode ? (
+          <div>
+            <div className="flex items-center gap-2 mb-1">
+              <label className="block text-sm">Set-Cookie String</label>
+              <IconInfoCircle id="cookie-raw-info" size={16} strokeWidth={1.5} className="text-gray-400" />
+              <Tooltip
+                anchorId="cookie-raw-info"
+                className="tooltip-mod"
+                html="Key, Path, and Domain are immutable properties and cannot be modified for existing cookies"
+              />
+            </div>
+            <textarea
+              value={cookieString}
+              onChange={(e) => setCookieString(e.target.value)}
+              className="block textbox w-full h-24"
+              placeholder="key=value; key2=value2"
+            />
+          </div>
+        ) : (
+          <div className="space-y-4">
+            <div className="grid grid-cols-2 gap-4">
+              <div>
+                <label className="block text-sm mb-1">
+                  Domain<span className="text-red-600">*</span>{' '}
+                </label>
+                <input
+                  type="text"
+                  name="domain"
+                  // Auto-focus if its add-new i.e. when domain prop is empty
+                  autoFocus={!domain && !formik.values.domain}
+                  value={formik.values.domain}
+                  onChange={formik.handleChange}
+                  className="block textbox non-passphrase-input w-full disabled:opacity-50"
+                  disabled={!!cookie}
+                />
+                {formik.touched.domain && formik.errors.domain && (
+                  <div className="text-red-500 text-sm mt-1">{formik.errors.domain}</div>
+                )}
+              </div>
+              <div>
+                <label className="block text-sm mb-1">Path</label>
+                <input
+                  type="text"
+                  name="path"
+                  value={formik.values.path}
+                  onChange={formik.handleChange}
+                  className="block textbox non-passphrase-input w-full disabled:opacity-50"
+                  disabled={!!cookie}
+                />
+                {formik.touched.path && formik.errors.path && (
+                  <div className="text-red-500 text-sm mt-1">{formik.errors.path}</div>
+                )}
+              </div>
+              <div>
+                <label className="block text-sm mb-1">
+                  Key<span className="text-red-600">*</span>{' '}
+                </label>
+                <input
+                  type="text"
+                  name="key"
+                  // Auto focus when add-for-domain i.e. if domain is already prefilled
+                  autoFocus={!!domain && !formik.values.key}
+                  value={formik.values.key}
+                  onChange={formik.handleChange}
+                  className="block textbox non-passphrase-input w-full disabled:opacity-50"
+                  disabled={!!cookie}
+                />
+                {formik.touched.key && formik.errors.key && (
+                  <div className="text-red-500 text-sm mt-1">{formik.errors.key}</div>
+                )}
+              </div>
+
+              <div>
+                <label className="block text-sm mb-1">
+                  Value<span className="text-red-600">*</span>{' '}
+                </label>
+                <input
+                  type="text"
+                  name="value"
+                  // Auto-focus when its in edit mode i.e. cookie prop is present
+                  autoFocus={!!cookie}
+                  value={formik.values.value}
+                  onChange={formik.handleChange}
+                  className="block textbox non-passphrase-input w-full"
+                />
+                {formik.touched.value && formik.errors.value && (
+                  <div className="text-red-500 text-sm mt-1">{formik.errors.value}</div>
+                )}
+              </div>
+            </div>
+
+            {/* Date Picker */}
+            <div className="w-full flex items-end">
+              <div>
+                <label className="block text-sm mb-1">Expiration ({moment.tz.guess()})</label>
+                <input
+                  type="datetime-local"
+                  name="expires"
+                  value={formik.values.expires}
+                  onChange={(e) => {
+                    formik.handleChange(e);
+                  }}
+                  className="block textbox non-passphrase-input w-full"
+                  min={moment().format(moment.HTML5_FMT.DATETIME_LOCAL)}
+                />
+                {formik.touched.expires && formik.errors.expires && (
+                  <div className="text-red-500 text-sm mt-1">{formik.errors.expires}</div>
+                )}
+              </div>
+
+              {/* Checkboxes */}
+              <div className="flex space-x-4 ml-auto">
+                <label className="flex items-center">
+                  <input
+                    type="checkbox"
+                    name="secure"
+                    checked={formik.values.secure}
+                    onChange={formik.handleChange}
+                    className="mr-2"
+                  />
+                  <span className="text-sm">Secure</span>
+                </label>
+
+                <label className="flex items-center">
+                  <input
+                    type="checkbox"
+                    name="httpOnly"
+                    checked={formik.values.httpOnly}
+                    onChange={formik.handleChange}
+                    className="mr-2"
+                  />
+                  <span className="text-sm">HTTP Only</span>
+                </label>
+              </div>
+            </div>
+          </div>
+        )}
+      </form>
+    </Modal>
+  );
+};
+
+export default ModifyCookieModal;

packages/bruno-app/src/components/Cookies/StyledWrapper.js

@@ -11,6 +11,65 @@ const Wrapper = styled.div`
       user-select: none;
     }
   }
+
+  &.header {
+    input {
+      padding: 0.3rem 0.5rem;
+    }
+  }
+
+  .textbox {
+    line-height: 1.42857143;
+    border: 1px solid #ccc;
+    padding: 0.45rem;
+    box-shadow: none;
+    border-radius: 0px;
+    outline: none;
+    box-shadow: none;
+    transition: border-color ease-in-out 0.1s;
+    border-radius: 3px;
+    background-color: ${(props) => props.theme.modal.input.bg};
+    border: 1px solid ${(props) => props.theme.modal.input.border};
+
+    &:focus {
+      border: solid 1px ${(props) => props.theme.modal.input.focusBorder} !important;
+      outline: none !important;
+    }
+  }
+
+  .scroll-box {
+    max-height: 500px;
+    overflow-y: auto;
+
+    background:
+    /* Shadow Cover TOP */
+    linear-gradient(
+      ${(props) => props.theme.modal.body.bg} 20%,
+      rgba(255, 255, 255, 0)
+    ) center top,
+    
+    /* Shadow Cover BOTTOM */
+    linear-gradient(
+      rgba(255, 255, 255, 0),
+      ${(props) => props.theme.modal.body.bg} 80%
+    ) center bottom,
+    
+    /* Shadow TOP */
+    linear-gradient(
+      rgba(0, 0, 0, 0.1) 0%,
+      rgba(0, 0, 0, 0) 100%
+    ) center top,
+    
+    /* Shadow BOTTOM */
+    linear-gradient(
+      rgba(0, 0, 0, 0) 0%,
+      rgba(0, 0, 0, 0.1) 100%
+    ) center bottom;
+
+    background-repeat: no-repeat;
+    background-size: 100% 30px, 100% 30px, 100% 10px, 100% 10px;
+    background-attachment: local, local, scroll, scroll;
+  }
 `;
 
 export default Wrapper;

packages/bruno-app/src/components/Cookies/index.js

@@ -1,53 +1,331 @@
-import React from 'react';
+import React, { useState, useRef, useEffect, useMemo } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import Modal from 'components/Modal';
-import { IconTrash } from '@tabler/icons';
-import { deleteCookiesForDomain } from 'providers/ReduxStore/slices/app';
+import Accordion from 'components/Accordion/index';
+import { IconTrash, IconEdit, IconCirclePlus, IconCookieOff, IconAlertTriangle, IconSearch } from '@tabler/icons';
+import { deleteCookiesForDomain, deleteCookie } from 'providers/ReduxStore/slices/app';
 import toast from 'react-hot-toast';
-
+import ModifyCookieModal from 'components/Cookies/ModifyCookieModal/index';
 import StyledWrapper from './StyledWrapper';
+import moment from 'moment';
+import { Tooltip } from 'react-tooltip';
+
+const ClearDomainCookiesModal = ({ onClose, domain, onClear }) => (
+  <Modal onClose={onClose} handleCancel={onClose} title="Clear Domain Cookies" hideFooter={true}>
+    <div className="flex items-center font-normal">
+      <IconAlertTriangle size={32} strokeWidth={1.5} className="text-yellow-600" />
+      <h1 className="ml-2 text-lg font-semibold">Hold on..</h1>
+    </div>
+    <div className="font-normal mt-4">
+      Are you sure you want to clear all cookies for the domain {domain}?
+    </div>
+
+    <div className="flex justify-between mt-6">
+      <div>
+        <button className="btn btn-sm btn-close" onClick={onClose}>
+          Close
+        </button>
+      </div>
+      <div>
+        <button className="btn btn-sm btn-danger" onClick={onClear}>
+          Clear All
+        </button>
+      </div>
+    </div>
+  </Modal>
+);
+
+const DeleteCookieModal = ({ onClose, cookieName, onDelete }) => (
+  <Modal onClose={onClose} handleCancel={onClose} title="Delete Cookie" hideFooter={true}>
+    <div className="flex items-center font-normal">
+      <IconAlertTriangle size={32} strokeWidth={1.5} className="text-yellow-600" />
+      <h1 className="ml-2 text-lg font-semibold">Hold on..</h1>
+    </div>
+    <div className="font-normal mt-4">
+      Are you sure you want to delete the cookie {cookieName}?
+    </div>
+
+    <div className="flex justify-between mt-6">
+      <div>
+        <button className="btn btn-sm btn-close" onClick={onClose}>
+          Close
+        </button>
+      </div>
+      <div>
+        <button className="btn btn-sm btn-danger" onClick={onDelete}>
+          Delete
+        </button>
+      </div>
+    </div>
+  </Modal>
+);
 
 const CollectionProperties = ({ onClose }) => {
   const dispatch = useDispatch();
   const cookies = useSelector((state) => state.app.cookies) || [];
+  const [isModifyCookieModalOpen, setIsModifyCookieModalOpen] = useState(false);
+  const [currentDomain, setCurrentDomain] = useState(null);
+  const [cookieToEdit, setCookieToEdit] = useState(null);
 
-  const handleDeleteDomain = (domain) => {
-    dispatch(deleteCookiesForDomain(domain))
-      .then(() => {
-        toast.success('Domain deleted successfully');
-      })
-      .catch((err) => console.log(err) && toast.error('Failed to delete domain'));
+  const [domainToClear, setDomainToClear] = useState(null);
+  const [cookieToDelete, setCookieToDelete] = useState(null);
+  const [searchText, setSearchText] = useState(null);
+
+  const handleAddCookie = (domain) => {
+    if(domain) setCurrentDomain(domain);
+    setIsModifyCookieModalOpen(true);
   };
 
+  const handleEditCookie = (domain, cookie) => {
+    setCurrentDomain(domain);
+    setCookieToEdit(cookie);
+    setIsModifyCookieModalOpen(true);
+  };
+
+  const handleClearDomainCookies = (domain) => {
+    setDomainToClear(domain);
+  };
+
+  const clearDomainCookiesAction = () => {
+    dispatch(deleteCookiesForDomain(domainToClear))
+      .then(() => {
+        toast.success('Domain cookies cleared successfully');
+      })
+      .catch((err) => console.log(err) && toast.error('Failed to clear domain cookies'));
+    setDomainToClear(null);
+  };
+
+  const handleDeleteCookie = (domain, path, key) => {
+    setCookieToDelete({ key, domain, path });
+  };
+
+  const deleteCookieAction = () => {
+    if (cookieToDelete) {
+      const { domain, path, key } = cookieToDelete;
+      dispatch(deleteCookie(domain, path, key))
+        .then(() => {
+          toast.success('Cookie deleted successfully');
+        })
+        .catch((err) => console.log(err) && toast.error('Failed to delete cookie'));
+    }
+    setCookieToDelete(null);
+  };
+
+  const filteredCookies = useMemo(() => {
+    if (!searchText) return cookies;
+
+    return cookies.filter((cookie) =>
+      cookie.domain.toLowerCase().includes(searchText.toLowerCase())
+    );
+  }, [cookies, searchText]);
+
+  const shouldShowHeader = cookies && cookies.length > 0;
+
   return (
-    <Modal size="md" title="Cookies" hideFooter={true} handleCancel={onClose}>
-      <StyledWrapper>
-        <table className="w-full border-collapse" style={{ marginTop: '-1rem' }}>
-          <thead>
-            <tr>
-              <th className="py-2 px-2 text-left">Domain</th>
-              <th className="py-2 px-2 text-left">Cookie</th>
-              <th className="py-2 px-2 text-center" style={{ width: 80 }}>
-                Actions
-              </th>
-            </tr>
-          </thead>
-          <tbody>
-            {cookies.map((cookie) => (
-              <tr key={cookie.domain}>
-                <td className="py-2 px-2">{cookie.domain}</td>
-                <td className="py-2 px-2 break-all">{cookie.cookieString}</td>
-                <td className="text-center">
-                  <button tabIndex="-1" onClick={() => handleDeleteDomain(cookie.domain)}>
-                    <IconTrash strokeWidth={1.5} size={20} />
-                  </button>
-                </td>
-              </tr>
-            ))}
-          </tbody>
-        </table>
-      </StyledWrapper>
-    </Modal>
+    <>
+      <Modal
+        size="xl"
+        title="Cookies"
+        hideFooter={true}
+        handleCancel={onClose}
+        customHeader={shouldShowHeader ? (
+          <StyledWrapper className="header flex items-center justify-between w-full">
+            <h2 className="text-xs font-medium">Cookies</h2>
+            <input
+              type="search"
+              placeholder="Search by domain"
+              value={searchText || ''}
+              onChange={(e) => setSearchText(e.target.value)}
+              className="block textbox non-passphrase-input ml-auto font-normal"
+            />
+            <button
+              type="submit"
+              className="submit btn btn-sm btn-secondary flex items-center gap-1 mx-4 font-medium"
+              onClick={(e) => {
+                e.stopPropagation();
+                handleAddCookie();
+              }}
+            >
+              <IconCirclePlus strokeWidth={1.5} size={16} />
+              <span>Add Cookie</span>
+            </button>
+          </StyledWrapper>
+        ) : null}
+      >
+        <StyledWrapper>
+          {!cookies || !cookies.length ? (
+            // No cookies found
+            <div className="flex items-center justify-center flex-col">
+              <IconCookieOff size={48} strokeWidth={1.5} className="text-gray-500" />
+              <h2 className="text-lg font-semibold mt-4">No cookies found</h2>
+              <p className="text-gray-500 mt-2">Add cookies to get started</p>
+              <button
+                type="submit"
+                className="submit btn btn-sm btn-secondary flex items-center gap-1 mt-8"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  handleAddCookie();
+                }}
+              >
+                <IconCirclePlus strokeWidth={1.5} size={16} />
+                <span>Add Cookie</span>
+              </button>
+            </div>
+          ) : cookies.length && !filteredCookies.length ? (
+            // No search results
+            <div className="flex items-center justify-center flex-col">
+              <IconSearch size={48} />
+              <h2 className="text-lg font-semibold mt-4">No search results</h2>
+              <p className="text-gray-500 mt-2">Try a different search term</p>
+            </div>
+          ) : (
+            // Show cookies list
+            <div className="scroll-box">
+              <Accordion defaultIndex={0}>
+                {filteredCookies.map((domainWithCookies, i) => (
+                  <Accordion.Item key={i} index={i}>
+                    <Accordion.Header index={i} className="flex items-center">
+                      <div className="flex items-center">
+                        <span>{domainWithCookies.domain}</span>
+                        <span className="ml-2 text-xs dark:text-gray-300 text-gray-500">
+                          ({domainWithCookies.cookies.length}{' '}
+                          {domainWithCookies.cookies.length === 1 ? 'cookie' : 'cookies'})
+                        </span>
+                        <div className="ml-auto flex items-center gap-2">
+                          <button
+                            type="submit"
+                            className="flex items-center gap-1 text-gray-500 hover:text-gray-950 dark:text-white dark:hover:text-gray-300"
+                            onClick={(e) => {
+                              e.stopPropagation();
+                              handleAddCookie(domainWithCookies.domain);
+                            }}
+                          >
+                            <IconCirclePlus strokeWidth={1.5} size={16} />
+                          </button>
+                          <button
+                            onClick={(e) => {
+                              e.stopPropagation();
+                              handleClearDomainCookies(domainWithCookies.domain);
+                            }}
+                            className="text-gray-950 dark:text-white dark:hover:hover:text-red-600 hover:text-red-600  mr-2"
+                          >
+                            <IconTrash strokeWidth={1.5} size={16} />
+                          </button>
+                        </div>
+                      </div>
+                    </Accordion.Header>
+                    <Accordion.Content index={i}>
+                      <div className="flex items-center justify-between">
+                        <table className="w-full">
+                          <thead>
+                            <tr className="text-left border-b border-gray-200 dark:border-neutral-600 text-gray-700 dark:text-gray-300">
+                              <th className="py-2 px-4 font-semibold w-32">Name</th>
+                              <th className="py-2 px-4 font-semibold w-52">Value</th>
+                              <th className="py-2 px-4 font-semibold">Path</th>
+                              <th className="py-2 px-4 font-semibold">Expires</th>
+                              <th className="py-2 px-4 font-semibold text-center">Secure</th>
+                              <th className="py-2 px-4 font-semibold text-center">HTTP Only</th>
+                              <th className="py-2 px-4 font-semibold text-right w-24">Actions</th>
+                            </tr>
+                          </thead>
+                          <tbody>
+                            {domainWithCookies.cookies.map((cookie) => (
+                              <tr key={cookie.key} className="border-b border-gray-200 dark:border-neutral-600 last:border-none">
+                                <td className="py-2 px-4 truncate">
+                                  <span id={`cookie-key-${cookie.key}`}>{cookie.key}</span>
+                                  <Tooltip
+                                    anchorId={`cookie-key-${cookie.key}`}
+                                    className="tooltip-mod"
+                                    html={cookie.key}
+                                  />
+                                </td>
+                                <td className="py-2 px-4 truncate">
+                                  <span id={`cookie-value-${cookie.key}`}>{cookie.value}</span>
+                                  <Tooltip
+                                    anchorId={`cookie-value-${cookie.key}`}
+                                    className="tooltip-mod"
+                                    html={cookie.value}
+                                  />
+                                </td>
+                                <td className="py-2 px-4 truncate">{cookie.path || '/'}</td>
+                                <td className="py-2 px-4 truncate">
+                                  <span id={`cookie-expires-${cookie.key}`}>
+                                    {cookie.expires && moment(cookie.expires).isValid()
+                                      ? new Date(cookie.expires).toLocaleString()
+                                      : 'Session'}
+                                  </span>
+                                  {cookie.expires && moment(cookie.expires).isValid() && (
+                                    <Tooltip
+                                      anchorId={`cookie-expires-${cookie.key}`}
+                                      className="tooltip-mod"
+                                      html={new Date(cookie.expires).toLocaleString()}
+                                    />
+                                  )}
+                                </td>
+                                <td className="py-2 px-4 text-center">{cookie.secure ? '✓' : ''}</td>
+                                <td className="py-2 px-4 text-center">{cookie.httpOnly ? '✓' : ''}</td>
+                                <td className="py-2 px-4">
+                                  <div className="flex items-center justify-end gap-2">
+                                    <button
+                                      onClick={(e) => {
+                                        e.stopPropagation();
+                                        handleEditCookie(domainWithCookies.domain, cookie);
+                                      }}
+                                      className="text-gray-700  hover:text-gray-950
+                                    dark:text-white dark:hover:text-gray-300"
+                                    >
+                                      <IconEdit strokeWidth={1.5} size={16} />
+                                    </button>
+                                    <button
+                                      onClick={(e) => {
+                                        e.stopPropagation();
+                                        handleDeleteCookie(domainWithCookies.domain, cookie.path, cookie.key);
+                                      }}
+                                      className="text-gray-950 dark:text-white dark:hover:hover:text-red-600  hover:text-red-600"
+                                    >
+                                      <IconTrash strokeWidth={1.5} size={16} />
+                                    </button>
+                                  </div>
+                                </td>
+                              </tr>
+                            ))}
+                          </tbody>
+                        </table>
+                      </div>
+                    </Accordion.Content>
+                  </Accordion.Item>
+                ))}
+              </Accordion>
+            </div>
+          )}
+        </StyledWrapper>
+      </Modal>
+      {isModifyCookieModalOpen && (
+        <ModifyCookieModal
+          onClose={() => {
+            setCookieToEdit(null);
+            setCurrentDomain(null);
+            setIsModifyCookieModalOpen(false);
+          }}
+          domain={currentDomain}
+          cookie={cookieToEdit}
+        />
+      )}
+      {domainToClear ? (
+        <ClearDomainCookiesModal
+          onClose={() => setDomainToClear(null)}
+          domain={domainToClear}
+          onClear={clearDomainCookiesAction}
+        />
+      ) : null}
+      {cookieToDelete ? (
+        <DeleteCookieModal
+          onClose={() => setCookieToDelete(null)}
+          cookieName={cookieToDelete.key}
+          onDelete={deleteCookieAction}
+        />
+      ) : null}
+    </>
   );
 };
 

packages/bruno-app/src/components/Environments/EnvironmentSettings/CreateEnvironment/index.js

@@ -6,6 +6,7 @@ import * as Yup from 'yup';
 import { useDispatch } from 'react-redux';
 import Portal from 'components/Portal';
 import Modal from 'components/Modal';
+import { validateName, validateNameError } from 'utils/common/regex';
 
 const CreateEnvironment = ({ collection, onClose }) => {
   const dispatch = useDispatch();
@@ -23,7 +24,11 @@ const CreateEnvironment = ({ collection, onClose }) => {
     validationSchema: Yup.object({
       name: Yup.string()
         .min(1, 'Must be at least 1 character')
-        .max(50, 'Must be 50 characters or less')
+        .max(255, 'Must be 255 characters or less')
+        .test('is-valid-filename', function(value) {
+          const isValid = validateName(value);
+          return isValid ? true : this.createError({ message: validateNameError(value) });
+        })
         .required('Name is required')
         .test('duplicate-name', 'Environment already exists', validateEnvironmentName)
     }),

packages/bruno-app/src/components/Environments/EnvironmentSettings/RenameEnvironment/index.js

@@ -6,6 +6,7 @@ import { useFormik } from 'formik';
 import { renameEnvironment } from 'providers/ReduxStore/slices/collections/actions';
 import * as Yup from 'yup';
 import { useDispatch } from 'react-redux';
+import { validateName, validateNameError } from 'utils/common/regex';
 
 const RenameEnvironment = ({ onClose, environment, collection }) => {
   const dispatch = useDispatch();
@@ -18,7 +19,11 @@ const RenameEnvironment = ({ onClose, environment, collection }) => {
     validationSchema: Yup.object({
       name: Yup.string()
         .min(1, 'must be at least 1 character')
-        .max(50, 'must be 50 characters or less')
+        .max(255, 'Must be 255 characters or less')
+        .test('is-valid-filename', function(value) {
+          const isValid = validateName(value);
+          return isValid ? true : this.createError({ message: validateNameError(value) });
+        })
         .required('name is required')
     }),
     onSubmit: (values) => {

packages/bruno-app/src/components/FilePickerEditor/index.js

@@ -1,10 +1,9 @@
 import React from 'react';
-import path from 'path';
+import path from 'utils/common/path';
 import { useDispatch } from 'react-redux';
 import { browseFiles } from 'providers/ReduxStore/slices/collections/actions';
 import { IconX } from '@tabler/icons';
 import { isWindowsOS } from 'utils/common/platform';
-import slash from 'utils/common/slash';
 
 const FilePickerEditor = ({ value, onChange, collection, isSingleFilePicker = false }) => {
   const dispatch = useDispatch();
@@ -27,7 +26,7 @@ const FilePickerEditor = ({ value, onChange, collection, isSingleFilePicker = fa
           const collectionDir = collection.pathname;
 
           if (filePath.startsWith(collectionDir)) {
-            return path.relative(slash(collectionDir), slash(filePath));
+            return path.relative(collectionDir, filePath);
           }
 
           return filePath;

packages/bruno-app/src/components/GlobalEnvironments/EnvironmentSelector/index.js

@@ -81,7 +81,10 @@ const EnvironmentSelector = () => {
             <IconDatabaseOff size={18} strokeWidth={1.5} />
             <span className="ml-2">No Environment</span>
           </div>
-          <div className="dropdown-item border-top" onClick={handleSettingsIconClick}>
+          <div className="dropdown-item border-top" onClick={() => {
+            handleSettingsIconClick();
+            dropdownTippyRef.current.hide();
+          }}>
             <div className="pr-2 text-gray-600">
               <IconSettings size={18} strokeWidth={1.5} />
             </div>

packages/bruno-app/src/components/GlobalEnvironments/EnvironmentSettings/CreateEnvironment/index.js

@@ -6,6 +6,7 @@ import { useDispatch, useSelector } from 'react-redux';
 import Portal from 'components/Portal';
 import Modal from 'components/Modal';
 import { addGlobalEnvironment } from 'providers/ReduxStore/slices/global-environments';
+import { validateName, validateNameError } from 'utils/common/regex';
 
 const CreateEnvironment = ({ onClose }) => {
   const globalEnvs = useSelector((state) => state?.globalEnvironments?.globalEnvironments);
@@ -25,7 +26,11 @@ const CreateEnvironment = ({ onClose }) => {
     validationSchema: Yup.object({
       name: Yup.string()
         .min(1, 'Must be at least 1 character')
-        .max(50, 'Must be 50 characters or less')
+        .max(255, 'Must be 255 characters or less')
+        .test('is-valid-filename', function(value) {
+          const isValid = validateName(value);
+          return isValid ? true : this.createError({ message: validateNameError(value) });
+        })
         .required('Name is required')
         .test('duplicate-name', 'Global Environment already exists', validateEnvironmentName)
     }),

packages/bruno-app/src/components/GlobalEnvironments/EnvironmentSettings/RenameEnvironment/index.js

@@ -3,10 +3,10 @@ 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';
 import { renameGlobalEnvironment } from 'providers/ReduxStore/slices/global-environments';
+import { validateName, validateNameError } from 'utils/common/regex';
 
 const RenameEnvironment = ({ onClose, environment }) => {
   const dispatch = useDispatch();
@@ -19,7 +19,11 @@ const RenameEnvironment = ({ onClose, environment }) => {
     validationSchema: Yup.object({
       name: Yup.string()
         .min(1, 'must be at least 1 character')
-        .max(50, 'must be 50 characters or less')
+        .max(255, 'Must be 255 characters or less')
+        .test('is-valid-filename', function(value) {
+          const isValid = validateName(value);
+          return isValid ? true : this.createError({ message: validateNameError(value) });
+        })
         .required('name is required')
     }),
     onSubmit: (values) => {

packages/bruno-app/src/components/Help/StyledWrapper.js

@@ -0,0 +1,11 @@
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  font-weight: 400;
+  font-size: 0.75rem;
+  background-color: ${props => props.theme.infoTip.bg};
+  border: 1px solid ${props => props.theme.infoTip.border};
+  box-shadow: ${props => props.theme.infoTip.boxShadow};
+`;
+
+export default Wrapper;

packages/bruno-app/src/components/Help/index.js

@@ -0,0 +1,40 @@
+/**
+ * The InfoTip components needs to be nuked
+ * This component will be the future replacement
+ * We should allow icon and placement props to be passed in
+ */
+
+import React, { useState } from 'react';
+import HelpIcon from 'components/Icons/Help';
+import StyledWrapper from './StyledWrapper';
+
+const Help = ({ children, width = 200 }) => {
+  const [showTooltip, setShowTooltip] = useState(false);
+
+  return (
+    <div className="flex items-center relative">
+      <span
+        className="flex items-center"
+        onMouseEnter={() => setShowTooltip(true)}
+        onMouseLeave={() => setShowTooltip(false)}
+      >
+        <HelpIcon size={14}/>
+      </span>
+      {showTooltip && (
+        <StyledWrapper
+          className="absolute z-50 rounded-md p-3"
+          style={{ 
+            top: '50%',
+            left: 'calc(100% + 8px)',
+            transform: 'translateY(-50%)',
+            width: `${width}px`
+          }}
+        >
+          {children}
+        </StyledWrapper>
+      )}
+    </div>
+  );
+};
+
+export default Help; 

packages/bruno-app/src/components/Icons/Help/index.js

@@ -0,0 +1,20 @@
+import React from 'react';
+
+const HelpIcon = ({ size = 14 }) => {
+  return (
+    <svg
+      tabIndex="-1"
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      fill="currentColor"
+      className="inline-block ml-2 cursor-pointer"
+      viewBox="0 0 16 16"
+    >
+      <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z" />
+      <path d="M5.255 5.786a.237.237 0 0 0 .241.247h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286zm1.557 5.763c0 .533.425.927 1.01.927.609 0 1.028-.394 1.028-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94z" />
+    </svg>
+  )
+}
+
+export default HelpIcon;

packages/bruno-app/src/components/Icons/OpenAPILogo/index.js

@@ -0,0 +1,104 @@
+const OpenApiLogo = () => {
+  return (
+    <svg width="28" height="28" viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg">
+      <path
+        style={{
+          fill: "#91d400",
+          fillOpacity: 1,
+          fillRule: "nonzero",
+          stroke: "none"
+        }} d="M43.125 51.148H20.781l.012.325c.012.21.027.418.039.625.004.09.008.18.016.27a41.442 41.442 0 0 0 .164 1.687c0 .027.004.05.008.078.035.285.07.574.113.86 0 .003 0 .007.004.01a36.98 36.98 0 0 0 1.152 5.255c.004.008.008.012.008.02a27.978 27.978 0 0 0 .265.859c.004.015.012.031.016.047.078.242.164.484.246.73.024.059.043.121.067.184.074.207.148.418.226.629.04.093.074.187.11.285.07.172.136.343.203.52.054.128.11.257.164.39.054.133.113.27.168.406.074.164.148.328.218.492.047.102.09.2.133.297.09.195.184.395.278.59l.093.191c.11.227.223.45.336.672.02.035.035.07.051.102a36.344 36.344 0 0 0 .41.773c.028.051.059.102.086.149L44.45 56.156l.07-.043a15.031 15.031 0 0 1-1.394-4.965Zm0 0" transform="translate(-26.793 -.606) scale(1.44332)"
+      />
+      <path 
+        style={{
+          fill: "#91d400",
+          fillOpacity: 1,
+          fillRule: "nonzero",
+          stroke: "none"
+        }} d="m22.563 61.137-.727.207.008.02zm0 0" transform="translate(-26.793 -.606) scale(1.44332)"
+        />
+      <path
+        style={{
+          fill: "#4c5930",
+          fillOpacity: 1,
+          fillRule: "nonzero",
+          stroke: "none"
+        }} d="m48.613 61.355-.05.055-15.739 15.664c.082.074.16.149.242.223.149.133.297.266.446.394.078.067.152.137.23.204.18.152.36.3.54.449.046.043.097.082.144.12a21.669 21.669 0 0 0 .691.556c.227.175.45.343.676.515.012.008.02.012.027.02.95.707 1.93 1.367 2.946 1.98.035.024.07.043.105.067l.578.34c.117.066.239.132.356.203.113.062.222.125.336.187.207.11.41.223.617.328a35.567 35.567 0 0 0 1.824.887l.559-1.348 7.918-19.133.027-.07a15.337 15.337 0 0 1-2.473-1.64Zm0 0" transform="translate(-26.793 -.606) scale(1.44332)"
+      />
+      <path
+        style={{
+          fill: "#68a338",
+          fillOpacity: 1,
+          fillRule: "nonzero",
+          stroke: "none"
+        }} d="M46.977 59.797a16.778 16.778 0 0 1-.899-1.102c-.152-.203-.3-.406-.437-.617a15.93 15.93 0 0 1-.41-.633L26.124 68.902c.297.485.602.957.914 1.422.012.016.02.035.031.051l.012.016c.008.015.02.03.027.046.004.004.004.004.004.008.028.035.051.07.078.11 0 .004 0 .004.004.007v.004a35.121 35.121 0 0 0 1.051 1.465c.008.012.016.02.02.031.156.2.308.403.464.602.024.027.043.05.063.078.164.203.328.406.496.61.04.046.078.093.117.144.153.18.305.36.457.535.067.078.137.153.203.227.13.148.262.297.395.445.074.082.152.16.226.242.032.035.067.075.102.11l.293.316.121.121c.176.184.352.363.531.54l15.758-15.684a22.18 22.18 0 0 1-.515-.551Zm0 0" transform="translate(-26.793 -.606) scale(1.44332)"
+      />
+      <path
+        style={{
+          fill: "#4c5930",
+          fillOpacity: 1,
+          fillRule: "nonzero",
+          stroke: "none"
+        }} d="M67.867 61.348c-.176.136-.347.273-.527.406l.039.066L78.87 80.805a38.54 38.54 0 0 0 1.57-1.078 38.099 38.099 0 0 0 3.227-2.653L67.93 61.41Zm0 0" transform="translate(-26.793 -.606) scale(1.44332)"
+      />
+      <path
+        style={{
+          fill: "#91d400",
+          fillOpacity: 1,
+          fillRule: "nonzero",
+          stroke: "none"
+        }} d="m77.418 81.707.023-.012-.023.012zm.023-.012c.051-.027.102-.054.153-.086l-.004-.004c-.05.032-.098.06-.149.09zm-.023.012-.008.004zm-.039-.039.027.047zm.039.039.023-.012-.023.012zm-.016.012.004-.004zm.008-.009-.004.005c.004-.004.008-.004.012-.008-.004.004-.004.004-.008.004zm0 0" transform="translate(-26.793 -.606) scale(1.44332)"
+      />
+      <path
+        style={{
+          fill: "#91d400",
+          fillOpacity: 1,
+          fillRule: "nonzero",
+          stroke: "none"
+        }} d="M77.441 81.695c.051-.03.102-.054.153-.086-.051.032-.102.059-.153.086zm.149-.09.004.004zm-.2.118.005-.004zm-.19-.763-.391-.644-10.727-17.722c-.215.133-.437.25-.66.367-.223.121-.45.23-.676.34a15.303 15.303 0 0 1-6.523 1.469c-1.465 0-2.93-.211-4.344-.63-.238-.074-.473-.167-.711-.25-.238-.085-.48-.156-.715-.253l-7.91 19.117-.309.75-.265.644h-.004l.062.024c.024.012.043.016.067.027h.004c.004 0 .007.004.011.004.188.078.375.145.563.215.238.094.473.184.707.27.121.042.238.097.36.136a38.13 38.13 0 0 0 7.648 1.824c.105.012.207.028.308.04l.32.035c.2.023.4.047.602.066l.149.012c.25.023.496.043.742.062.082.004.168.008.25.016.219.016.433.027.648.039.133.004.266.008.399.016.172.004.343.011.515.015.246.008.496.008.746.012h.176c2.082 0 4.164-.172 6.223-.516l.105-.015c.215-.04.434-.078.653-.117.125-.024.246-.047.37-.075.126-.023.255-.05.384-.078.21-.043.421-.09.632-.14l.118-.024a37.8 37.8 0 0 0 8.992-3.34c.187-.097.367-.207.554-.308.22-.121.438-.246.657-.371.152-.086.308-.164.457-.254l.004-.004h.004l.003-.004c.004 0 .004 0 .004-.004l-.027-.047.027.047h.004c.004-.004.008-.004.008-.004.008-.008.016-.012.023-.016.051-.03.102-.058.149-.09zM48.625 37.938c.172-.141.348-.274.523-.407l-.039-.066L37.621 18.48c-.535.348-1.062.704-1.578 1.082a37.213 37.213 0 0 0-3.219 2.649l15.739 15.664Zm0 0" transform="translate(-26.793 -.606) scale(1.44332)"
+      />
+      <path
+        style={{
+          fill: "#4c5930",
+          fillOpacity: 1,
+          fillRule: "nonzero",
+          stroke: "none"
+        }} d="M31.73 23.254c-.18.18-.347.363-.523.543-.172.18-.352.36-.523.543a38.163 38.163 0 0 0-3.32 4.125c-.106.156-.216.312-.321.469-.11.164-.219.328-.324.496-.04.058-.078.12-.117.18a37.099 37.099 0 0 0-5.82 18.527c-.009.25-.016.504-.02.754s-.012.5-.012.75h22.29c0-.25.023-.5.034-.75.012-.254.016-.504.043-.754a15.002 15.002 0 0 1 3.36-8.078c.16-.192.34-.375.507-.559.172-.188.329-.379.508-.559zm45.993-5.508a46.43 46.43 0 0 0-.684-.402c-.117-.067-.23-.133-.348-.196-.117-.066-.23-.128-.347-.195-.2-.11-.403-.219-.606-.324-.031-.016-.062-.031-.093-.05a38.014 38.014 0 0 0-4.02-1.798c-.035-.015-.074-.027-.11-.039a37.527 37.527 0 0 0-8.41-2.102c-.101-.015-.207-.027-.312-.042l-.313-.036a31.754 31.754 0 0 0-.777-.078c-.238-.023-.48-.043-.719-.062-.093-.004-.187-.012-.28-.016-.204-.015-.415-.027-.618-.039l-.328-.012v22.239c1.144.117 2.281.363 3.383.734l16.445-16.367a41.117 41.117 0 0 0-1.863-1.215zm0 0" transform="translate(-26.793 -.606) scale(1.44332)"
+      />
+      <path
+        style={{
+          fill: "#68a338",
+          fillOpacity: 1,
+          fillRule: "nonzero",
+          stroke: "none"
+        }} d="m38.898 17.68.391.644zm18.59-5.34c-.25.004-.504.004-.754.015a38.117 38.117 0 0 0-4.71.48c-.036.009-.07.013-.106.02-.219.036-.434.079-.652.118l-.371.07c-.13.027-.258.05-.383.082a36.99 36.99 0 0 0-.75.164 37.925 37.925 0 0 0-8.996 3.336c-.184.098-.368.21-.551.312-.219.118-.438.243-.66.368-.16.093-.325.18-.489.277h-.003a.162.162 0 0 1-.036.02c-.043.027-.086.046-.129.074l.004.004.387.644 11.117 18.367c.215-.132.438-.25.66-.367a15.15 15.15 0 0 1 5.668-1.73c.25-.028.5-.047.754-.063.25-.011.504-.023.758-.023V12.324c-.254 0-.504.008-.758.016zm0 0" transform="translate(-26.793 -.606) scale(1.44332)"
+      />
+      <path
+        style={{
+          fill: "#4c5930",
+          fillOpacity: 1,
+          fillRule: "nonzero",
+          stroke: "none"
+        }} d="m95.695 47.809-.035-.598c-.008-.102-.012-.2-.02-.3l-.058-.704c-.008-.059-.012-.121-.016-.18a53.501 53.501 0 0 0-.086-.785c-.003-.023-.003-.043-.007-.062 0-.012 0-.02-.004-.032-.035-.28-.07-.562-.114-.843 0-.012 0-.02-.003-.028a36.772 36.772 0 0 0-1.153-5.246 47.929 47.929 0 0 0-.258-.832c-.011-.035-.023-.07-.03-.105-.083-.242-.161-.48-.247-.719-.023-.063-.043-.129-.066-.195a39.302 39.302 0 0 0-.34-.91c-.067-.172-.133-.344-.2-.512-.054-.137-.109-.27-.163-.403-.055-.132-.114-.261-.168-.394l-.223-.504-.129-.285c-.09-.2-.188-.402-.281-.602-.032-.058-.059-.12-.086-.18-.113-.23-.227-.456-.34-.683-.016-.031-.031-.062-.05-.094-.13-.25-.259-.5-.395-.746l-.012-.023a36.958 36.958 0 0 0-2.133-3.446L72.628 44.77c.376 1.097.618 2.23.735 3.37h22.344l-.012-.331zm0 0" transform="translate(-26.793 -.606) scale(1.44332)"
+      />
+      <path
+        style={{
+          fill: "#68a338",
+          fillOpacity: 1,
+          fillRule: "nonzero",
+          stroke: "none"
+        }} d="M73.45 49.64c0 .255-.024.505-.036.755-.012.25-.016.503-.043.753a15.002 15.002 0 0 1-3.36 8.079c-.16.191-.335.375-.507.558-.168.188-.328.38-.508.559L84.758 76.03c.18-.18.347-.363.523-.543.172-.183.352-.363.52-.547a36.965 36.965 0 0 0 3.195-3.937c.04-.055.074-.11.11-.16.117-.168.234-.34.347-.508.102-.152.203-.3.3-.453.048-.074.095-.153.142-.223a37.055 37.055 0 0 0 5.808-18.515c.012-.25.016-.5.024-.75.003-.25.011-.5.011-.754zm0 0" transform="translate(-26.793 -.606) scale(1.44332)"
+      />
+      <path
+        style={{
+          fill: "#3f3f42",
+          fillOpacity: 1,
+          fillRule: "nonzero",
+          stroke: "none"
+        }} d="M102.36 5.734c-4.079-4.058-10.688-4.058-14.766 0-3.254 3.235-3.903 8.075-1.965 11.961l-22.746 22.64c-3.906-1.925-8.77-1.28-12.024 1.958-4.078 4.059-4.074 10.64 0 14.7 4.082 4.058 10.692 4.054 14.77 0a10.356 10.356 0 0 0 1.965-11.966l22.746-22.64c3.906 1.93 8.765 1.281 12.02-1.957a10.355 10.355 0 0 0 0-14.696zm0 0" transform="translate(-26.793 -.606) scale(1.44332)"
+      />
+    </svg>
+  );
+};
+
+export default OpenApiLogo;

packages/bruno-app/src/components/MarkDown/StyledWrapper.js

@@ -15,14 +15,14 @@ const StyledMarkdownBodyWrapper = styled.div`
       margin: 0.67em 0;
       font-weight: var(--base-text-weight-semibold, 600);
       padding-bottom: 0.3em;
-      font-size: 1.3;
+      font-size: 1.3em;
       border-bottom: 1px solid var(--color-border-muted);
     }
 
     h2 {
       font-weight: var(--base-text-weight-semibold, 600);
       padding-bottom: 0.3em;
-      font-size: 1.2;
+      font-size: 1.2em;
       border-bottom: 1px solid var(--color-border-muted);
     }
 

packages/bruno-app/src/components/Modal/index.js

@@ -16,7 +16,7 @@ const ModalHeader = ({ title, handleCancel, customHeader, hideClose }) => (
   </div>
 );
 
-const ModalContent = ({ children }) => <div className="bruno-modal-content px-4 py-6">{children}</div>;
+const ModalContent = ({ children }) => <div className="bruno-modal-content px-4 py-4">{children}</div>;
 
 const ModalFooter = ({
   confirmText,

packages/bruno-app/src/components/PathDisplay/StyledWrapper.js

@@ -0,0 +1,39 @@
+import styled from 'styled-components';
+
+const StyledWrapper = styled.div`
+  width: 100%;
+  .path-display {
+    background: ${(props) => props.theme.requestTabPanel.url.bg};
+    border-radius: 4px;
+    padding: 8px 12px;
+    font-size: 0.8125rem;
+    border: 1px solid rgba(0, 0, 0, 0.08);
+    
+    .icon-column {
+      padding-right: 8px;
+      align-items: flex-start;
+      padding-top: 2px;
+    }
+
+    .path-container {
+      flex-wrap: wrap;
+    }
+
+    .path-segment {
+      white-space: nowrap;
+    }
+
+    
+    .name-container, .file-extension {
+      color: ${(props) => props.theme.colors.text.yellow};
+    }
+
+    .separator {
+      color: ${(props) => props.theme.text};
+      opacity: 0.6;
+      margin: 0 2px;
+    }
+  }
+`;
+
+export default StyledWrapper; 

packages/bruno-app/src/components/PathDisplay/index.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import { IconFolder, IconFile } from '@tabler/icons';
+import path from 'utils/common/path';
+import StyledWrapper from './StyledWrapper';
+
+const PathDisplay = ({ 
+  baseName = '',
+  iconType = 'file'
+}) => {
+  return (
+    <StyledWrapper>
+        <div className="path-display mt-2">
+        <div className="path-layout flex font-mono">
+          <div className="icon-column flex">
+            {iconType === 'file' ? <IconFile size={16} /> : <IconFolder size={16} />} 
+          </div>
+          <span className="name-container">
+            {baseName}
+          </span>
+        </div>
+      </div>
+    </StyledWrapper>
+  );
+};
+
+export default PathDisplay;

packages/bruno-app/src/components/Preferences/General/index.js

@@ -6,8 +6,7 @@ import { savePreferences } from 'providers/ReduxStore/slices/app';
 import StyledWrapper from './StyledWrapper';
 import * as Yup from 'yup';
 import toast from 'react-hot-toast';
-import path from 'path';
-import slash from 'utils/common/slash';
+import path from 'utils/common/path';
 import { IconTrash } from '@tabler/icons';
 
 const General = ({ close }) => {
@@ -134,7 +133,7 @@ const General = ({ close }) => {
             className={`flex items-center mt-2 pl-6 ${formik.values.customCaCertificate.enabled ? '' : 'opacity-25'}`}
           >
             <span className="flex items-center border px-2 rounded-md">
-              {path.basename(slash(formik.values.customCaCertificate.filePath))}
+              {path.basename(formik.values.customCaCertificate.filePath)}
               <button
                 type="button"
                 tabIndex="-1"

packages/bruno-app/src/components/Preferences/index.js

@@ -46,7 +46,7 @@ const Preferences = ({ onClose }) => {
   return (
     <StyledWrapper>
       <Modal size="lg" title="Preferences" handleCancel={onClose} hideFooter={true}>
-        <div className='flex flex-row gap-2 mx-[-1rem] !my-[-1.5rem]'>
+        <div className='flex flex-row gap-2 mx-[-1rem] !my-[-1.5rem] py-2'>
           <div className="flex flex-col items-center tabs" role="tablist">
             <div className={getTabClassname('general')} role="tab" onClick={() => setTab('general')}>
               General

packages/bruno-app/src/components/RequestPane/HttpRequestPane/index.js

@@ -15,6 +15,7 @@ import Tests from 'components/RequestPane/Tests';
 import StyledWrapper from './StyledWrapper';
 import { find, get } from 'lodash';
 import Documentation from 'components/Documentation/index';
+import { useEffect } from 'react';
 
 const ContentIndicator = () => {
   return (
@@ -24,6 +25,14 @@ const ContentIndicator = () => {
   );
 };
 
+const ErrorIndicator = () => {
+  return (
+    <sup className="ml-[.125rem] opacity-80 font-medium text-red-500">
+      <DotIcon width="10" ></DotIcon>
+    </sup>
+  );
+};
+
 const HttpRequestPane = ({ item, collection, leftPaneWidth }) => {
   const dispatch = useDispatch();
   const tabs = useSelector((state) => state.tabs.tabs);
@@ -111,6 +120,12 @@ const HttpRequestPane = ({ item, collection, leftPaneWidth }) => {
     requestVars.filter((request) => request.enabled).length +
     responseVars.filter((response) => response.enabled).length;
 
+  useEffect(() => {
+    if (activeParamsLength === 0 && body.mode !== 'none') {
+      selectTab('body');
+    }
+  }, []);
+
   return (
     <StyledWrapper className="flex flex-col h-full relative">
       <div className="flex flex-wrap items-center tabs" role="tablist">
@@ -136,7 +151,11 @@ const HttpRequestPane = ({ item, collection, leftPaneWidth }) => {
         </div>
         <div className={getTabClassname('script')} role="tab" onClick={() => selectTab('script')}>
           Script
-          {(script.req || script.res) && <ContentIndicator />}
+          {(script.req || script.res) && (
+            item.preScriptResponseErrorMessage || item.postResponseScriptErrorMessage ? 
+            <ErrorIndicator /> : 
+            <ContentIndicator />
+          )}
         </div>
         <div className={getTabClassname('assert')} role="tab" onClick={() => selectTab('assert')}>
           Assert

packages/bruno-app/src/components/RequestPane/QueryEditor/index.js

@@ -109,7 +109,7 @@ export default class QueryEditor extends React.Component {
             this.props.onPrettifyQuery();
           }
         },
-        /* Shift-Ctrl-P is hard coded in Firefox for private browsing so adding an alternative to Pretiffy */
+        /* Shift-Ctrl-P is hard coded in Firefox for private browsing so adding an alternative to Prettify */
         'Shift-Ctrl-F': () => {
           if (this.props.onPrettifyQuery) {
             this.props.onPrettifyQuery();

packages/bruno-app/src/components/ResponsePane/QueryResult/index.js

@@ -3,48 +3,49 @@ import QueryResultFilter from './QueryResultFilter';
 import { JSONPath } from 'jsonpath-plus';
 import React from 'react';
 import classnames from 'classnames';
+import iconv from 'iconv-lite';
 import { getContentType, safeStringifyJSON, safeParseXML } from 'utils/common';
 import { getCodeMirrorModeBasedOnContentType } from 'utils/common/codemirror';
 import QueryResultPreview from './QueryResultPreview';
-
 import StyledWrapper from './StyledWrapper';
-import { useState } from 'react';
-import { useMemo } from 'react';
-import { useEffect } from 'react';
+import { useState, useMemo, useEffect } from 'react';
 import { useTheme } from 'providers/Theme/index';
-import { uuid } from 'utils/common/index';
+import { getEncoding, prettifyJson, uuid } from 'utils/common/index';
 
-const formatResponse = (data, mode, filter) => {
-  if (data === undefined) {
+const formatResponse = (data, dataBuffer, encoding, mode, filter) => {
+  if (data === undefined || !dataBuffer) {
     return '';
   }
 
-  if (data === null) {
-    return 'null';
-  }
+  // TODO: We need a better way to get the raw response-data here instead
+  // of using this dataBuffer param.
+  // Also, we only need the raw response-data and content-type to show the preview.
+  const rawData = iconv.decode(
+    Buffer.from(dataBuffer, "base64"),
+    iconv.encodingExists(encoding) ? encoding : "utf-8"
+  );
 
   if (mode.includes('json')) {
-    let isValidJSON = false;
-
     try {
-      isValidJSON = typeof JSON.parse(JSON.stringify(data)) === 'object'
+      JSON.parse(rawData);
     } catch (error) {
-      console.log('Error parsing JSON: ', error.message);
-    }
-
-    if (!isValidJSON && typeof data === 'string') {
-      return data;
+      // If the response content-type is JSON and it fails parsing, its an invalid JSON.
+      // In that case, just show the response as it is in the preview.
+      return rawData;
     }
 
     if (filter) {
       try {
         data = JSONPath({ path: filter, json: data });
+        return prettifyJson(JSON.stringify(data));
       } catch (e) {
         console.warn('Could not apply JSONPath filter:', e.message);
       }
     }
 
-    return safeStringifyJSON(data, true);
+    // Prettify the JSON string directly instead of parse->stringify to avoid
+    // issues like rounding numbers bigger than Number.MAX_SAFE_INTEGER etc.
+    return prettifyJson(rawData);
   }
 
   if (mode.includes('xml')) {
@@ -59,14 +60,27 @@ const formatResponse = (data, mode, filter) => {
     return data;
   }
 
-  return safeStringifyJSON(data, true);
+  return prettifyJson(rawData);
+};
+
+const formatErrorMessage = (error) => {
+  if (!error) return 'Something went wrong';
+
+  const remoteMethodError = "Error invoking remote method 'send-http-request':";
+  
+  if (error.includes(remoteMethodError)) {
+    const parts = error.split(remoteMethodError);
+    return parts[1]?.trim() || error;
+  }
+
+  return error;
 };
 
 const QueryResult = ({ item, collection, data, dataBuffer, width, disableRunEventListener, headers, error }) => {
   const contentType = getContentType(headers);
   const mode = getCodeMirrorModeBasedOnContentType(contentType, data);
   const [filter, setFilter] = useState(null);
-  const formattedData = formatResponse(data, mode, filter);
+  const formattedData = formatResponse(data, dataBuffer, getEncoding(headers), mode, filter);
   const { displayedTheme } = useTheme();
 
   const debouncedResultFilterOnChange = debounce((e) => {
@@ -121,6 +135,7 @@ const QueryResult = ({ item, collection, data, dataBuffer, width, disableRunEven
   }, [allowedPreviewModes, previewTab]);
 
   const queryFilterEnabled = useMemo(() => mode.includes('json'), [mode]);
+  const hasScriptError = item.preRequestScriptErrorMessage || item.postResponseScriptErrorMessage;
 
   return (
     <StyledWrapper
@@ -133,7 +148,7 @@ const QueryResult = ({ item, collection, data, dataBuffer, width, disableRunEven
       </div>
       {error ? (
         <div>
-          <div className="text-red-500">{error}</div>
+          {hasScriptError ? null : <div className="text-red-500">{formatErrorMessage(error)}</div>}
 
           {error && typeof error === 'string' && error.toLowerCase().includes('self signed certificate') ? (
             <div className="mt-6 muted text-xs">
@@ -143,24 +158,26 @@ const QueryResult = ({ item, collection, data, dataBuffer, width, disableRunEven
           ) : null}
         </div>
       ) : (
-        <>
-          <QueryResultPreview
-            previewTab={previewTab}
-            data={data}
-            dataBuffer={dataBuffer}
-            formattedData={formattedData}
-            item={item}
-            contentType={contentType}
-            mode={mode}
-            collection={collection}
-            allowedPreviewModes={allowedPreviewModes}
-            disableRunEventListener={disableRunEventListener}
-            displayedTheme={displayedTheme}
-          />
-          {queryFilterEnabled && (
-            <QueryResultFilter filter={filter} onChange={debouncedResultFilterOnChange} mode={mode} />
-          )}
-        </>
+        <div className="h-full flex flex-col">
+          <div className="flex-1 relative">
+            <QueryResultPreview
+              previewTab={previewTab}
+              data={data}
+              dataBuffer={dataBuffer}
+              formattedData={formattedData}
+              item={item}
+              contentType={contentType}
+              mode={mode}
+              collection={collection}
+              allowedPreviewModes={allowedPreviewModes}
+              disableRunEventListener={disableRunEventListener}
+              displayedTheme={displayedTheme}
+            />
+            {queryFilterEnabled && (
+              <QueryResultFilter filter={filter} onChange={debouncedResultFilterOnChange} mode={mode} />
+            )}
+          </div>
+        </div>
       )}
     </StyledWrapper>
   );

packages/bruno-app/src/components/ResponsePane/ScriptError/StyledWrapper.js

@@ -0,0 +1,55 @@
+import styled from 'styled-components';
+
+const StyledWrapper = styled.div`
+  border-left: 4px solid ${(props) => props.theme.colors.text.danger};
+  border-top: 1px solid transparent;
+  border-right: 1px solid transparent;
+  border-bottom: 1px solid transparent;
+  border-radius: 0.375rem;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  max-height: 200px;
+  min-height: 70px;
+  overflow-y: auto;
+  background-color: ${(props) => props.theme.bg === '#1e1e1e' ? 'rgba(40, 40, 40, 0.5)' : 'rgba(250, 250, 250, 0.9)'};
+  
+  .error-icon-container {
+    margin-top: 0.125rem;
+    padding: 0.375rem;
+    border-radius: 9999px;
+    background-color: ${(props) => props.theme.bg === '#1e1e1e' ? 'rgba(40, 40, 40, 0.8)' : 'rgba(240, 240, 240, 0.8)'};
+    
+    svg {
+      color: ${(props) => props.theme.colors.text.danger};
+    }
+  }
+  
+  .close-button {
+    opacity: 0.7;
+    transition: opacity 0.2s;
+    
+    &:hover {
+      opacity: 1;
+    }
+    
+    svg {
+      color: ${(props) => props.theme.text};
+    }
+  }
+  
+  .error-title {
+    font-weight: 600;
+    margin-bottom: 0.375rem;
+    color: ${(props) => props.theme.colors.text.danger};
+  }
+  
+  .error-message {
+    font-family: monospace;
+    font-size: 0.6875rem;
+    line-height: 1.25rem;
+    white-space: pre-wrap;
+    word-break: break-all;
+    color: ${(props) => props.theme.text};
+  }
+`;
+
+export default StyledWrapper; 

packages/bruno-app/src/components/ResponsePane/ScriptError/index.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import { IconX } from '@tabler/icons';
+import StyledWrapper from './StyledWrapper';
+
+
+const ScriptError = ({ item, onClose }) => {
+  const preRequestError = item?.preRequestScriptErrorMessage;
+  const postResponseError = item?.postResponseScriptErrorMessage;
+  
+  if (!preRequestError && !postResponseError) return null;
+  
+  const errorMessage = preRequestError || postResponseError;
+  const errorTitle = preRequestError ? 'Pre-Request Script Error' : 'Post-Response Script Error';
+  
+  return (
+    <StyledWrapper className="mt-4 mb-2">
+      <div className="flex items-start gap-3 px-4 py-3">
+        <div className="flex-1 min-w-0">
+          <div className="error-title">
+            {errorTitle}
+          </div>
+          <div className="error-message">
+            {errorMessage}
+          </div>
+        </div>
+        <div 
+          className="close-button flex-shrink-0 cursor-pointer"
+          onClick={onClose}
+        >
+          <IconX size={16} strokeWidth={1.5} />
+        </div>
+      </div>
+    </StyledWrapper>
+  );
+};
+
+export default ScriptError; 

packages/bruno-app/src/components/ResponsePane/ScriptErrorIcon/index.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import { IconAlertCircle } from '@tabler/icons';
+import ToolHint from 'components/ToolHint';
+
+const ScriptErrorIcon = ({ itemUid, onClick }) => {
+  const toolhintId = `script-error-icon-${itemUid}`;
+  
+  return (
+    <>
+      <div 
+        id={toolhintId}
+        className="cursor-pointer ml-2"
+        onClick={onClick}
+      >
+        <div className="flex items-center text-red-400">
+          <IconAlertCircle size={16} strokeWidth={1.5} className="stroke-current" />
+        </div>
+      </div>
+      <ToolHint
+        toolhintId={toolhintId}
+        text="Script execution error occurred"
+        place="bottom"
+      />
+    </>
+  );
+};
+
+export default ScriptErrorIcon; 

packages/bruno-app/src/components/ResponsePane/index.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import find from 'lodash/find';
 import classnames from 'classnames';
 import { useDispatch, useSelector } from 'react-redux';
@@ -13,6 +13,8 @@ import ResponseSize from './ResponseSize';
 import Timeline from './Timeline';
 import TestResults from './TestResults';
 import TestResultsLabel from './TestResultsLabel';
+import ScriptError from './ScriptError';
+import ScriptErrorIcon from './ScriptErrorIcon';
 import StyledWrapper from './StyledWrapper';
 import ResponseSave from 'src/components/ResponsePane/ResponseSave';
 import ResponseClear from 'src/components/ResponsePane/ResponseClear';
@@ -22,6 +24,13 @@ const ResponsePane = ({ rightPaneWidth, item, collection }) => {
   const tabs = useSelector((state) => state.tabs.tabs);
   const activeTabUid = useSelector((state) => state.tabs.activeTabUid);
   const isLoading = ['queued', 'sending'].includes(item.requestState);
+  const [showScriptErrorCard, setShowScriptErrorCard] = useState(false);
+
+  useEffect(() => {
+    if (item?.preRequestScriptErrorMessage || item?.postResponseScriptErrorMessage) {
+      setShowScriptErrorCard(true);
+    }
+  }, [item?.preRequestScriptErrorMessage, item?.postResponseScriptErrorMessage]);
 
   const selectTab = (tab) => {
     dispatch(
@@ -98,6 +107,8 @@ const ResponsePane = ({ rightPaneWidth, item, collection }) => {
   };
 
   const responseHeadersCount = typeof response.headers === 'object' ? Object.entries(response.headers).length : 0;
+  
+  const hasScriptError = item?.preRequestScriptErrorMessage || item?.postResponseScriptErrorMessage;
 
   return (
     <StyledWrapper className="flex flex-col h-full relative">
@@ -117,6 +128,12 @@ const ResponsePane = ({ rightPaneWidth, item, collection }) => {
         </div>
         {!isLoading ? (
           <div className="flex flex-grow justify-end items-center">
+            {hasScriptError && !showScriptErrorCard && (
+              <ScriptErrorIcon 
+                itemUid={item.uid} 
+                onClick={() => setShowScriptErrorCard(true)} 
+              />
+            )}
             <ResponseClear item={item} collection={collection} />
             <ResponseSave item={item} />
             <StatusCode status={response.status} />
@@ -126,9 +143,15 @@ const ResponsePane = ({ rightPaneWidth, item, collection }) => {
         ) : null}
       </div>
       <section
-        className={`flex flex-grow relative pl-3 pr-4 ${focusedTab.responsePaneTab === 'response' ? '' : 'mt-4'}`}
+        className={`flex flex-col flex-grow relative pl-3 pr-4 ${focusedTab.responsePaneTab === 'response' ? '' : 'mt-4'}`}
       >
         {isLoading ? <Overlay item={item} collection={collection} /> : null}
+        {hasScriptError && showScriptErrorCard && (
+          <ScriptError 
+            item={item} 
+            onClose={() => setShowScriptErrorCard(false)} 
+          />
+        )}
         {getTabPanel(focusedTab.responsePaneTab)}
       </section>
     </StyledWrapper>

packages/bruno-app/src/components/RunnerResults/index.jsx

@@ -1,23 +1,18 @@
 import React, { useState, useRef, useEffect } from 'react';
-import path from 'path';
+import path from 'utils/common/path';
 import { useDispatch } from 'react-redux';
 import { get, cloneDeep } from 'lodash';
 import { runCollectionFolder, cancelRunnerExecution } from 'providers/ReduxStore/slices/collections/actions';
 import { resetCollectionRunner } from 'providers/ReduxStore/slices/collections';
 import { findItemInCollection, getTotalRequestCountInCollection } from 'utils/collections';
 import { IconRefresh, IconCircleCheck, IconCircleX, IconCheck, IconX, IconRun } from '@tabler/icons';
-import slash from 'utils/common/slash';
 import ResponsePane from './ResponsePane';
 import StyledWrapper from './StyledWrapper';
 import { areItemsLoading } from 'utils/collections';
 
-const getRelativePath = (fullPath, pathname) => {
-  // convert to unix style path
-  fullPath = slash(fullPath);
-  pathname = slash(pathname);
-
+const getDisplayName = (fullPath, pathname, name = '') => {
   let relativePath = path.relative(fullPath, pathname);
-  const { dir, name } = path.parse(relativePath);
+  const { dir = '' } = path.parse(relativePath);
   return path.join(dir, name);
 };
 
@@ -58,7 +53,7 @@ export default function RunnerResults({ collection }) {
         type: info.type,
         filename: info.filename,
         pathname: info.pathname,
-        relativePath: getRelativePath(collection.pathname, info.pathname)
+        displayName: getDisplayName(collection.pathname, info.pathname, info.name)
       };
       if (newItem.status !== 'error' && newItem.status !== 'skipped') {
         if (newItem.testResults) {
@@ -186,7 +181,7 @@ export default function RunnerResults({ collection }) {
                     <span
                       className={`mr-1 ml-2 ${item.status == 'error' || item.status == 'skipped' || item.testStatus == 'fail' ? 'danger' : ''}`}
                     >
-                      {item.relativePath}
+                      {item.displayName}
                     </span>
                     {item.status !== 'error' && item.status !== 'skipped' && item.status !== 'completed' ? (
                       <IconRefresh className="animate-spin ml-1" size={18} strokeWidth={1.5} />
@@ -266,7 +261,7 @@ export default function RunnerResults({ collection }) {
           <div className="flex flex-1 w-[50%]">
             <div className="flex flex-col w-full overflow-auto">
               <div className="flex items-center px-3 mb-4 font-medium">
-                <span className="mr-2">{selectedItem.relativePath}</span>
+                <span className="mr-2">{selectedItem.displayName}</span>
                 <span>
                   {selectedItem.testStatus === 'pass' ? (
                     <IconCircleCheck className="test-success" size={20} strokeWidth={1.5} />
@@ -275,7 +270,6 @@ export default function RunnerResults({ collection }) {
                   )}
                 </span>
               </div>
-              {/* <div className='px-3 mb-4 font-medium'>{selectedItem.relativePath}</div> */}
               <ResponsePane item={selectedItem} collection={collection} />
             </div>
           </div>

packages/bruno-app/src/components/ShareCollection/StyledWrapper.js

@@ -0,0 +1,30 @@
+import styled from 'styled-components';
+
+const StyledWrapper = styled.div`
+  .tabs {
+    .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;
+      }
+    }
+  }
+`;
+
+export default StyledWrapper;

packages/bruno-app/src/components/ShareCollection/index.js

@@ -0,0 +1,60 @@
+import React from 'react';
+import Modal from 'components/Modal';
+import { IconDownload } from '@tabler/icons';
+import StyledWrapper from './StyledWrapper';
+import Bruno from 'components/Bruno';
+import exportBrunoCollection from 'utils/collections/export';
+import exportPostmanCollection from 'utils/exporters/postman-collection';
+import { cloneDeep } from 'lodash';
+import { transformCollectionToSaveToExportAsFile } from 'utils/collections/index';
+
+const ShareCollection = ({ onClose, collection }) => {
+  const handleExportBrunoCollection = () => {
+    const collectionCopy = cloneDeep(collection);
+    exportBrunoCollection(transformCollectionToSaveToExportAsFile(collectionCopy));
+    onClose();
+  };
+
+  const handleExportPostmanCollection = () => {
+    const collectionCopy = cloneDeep(collection);
+    exportPostmanCollection(collectionCopy);
+    onClose();
+  };
+
+  return (
+    <Modal
+      size="md"
+      title="Share Collection"
+      confirmText="Close"
+      handleConfirm={onClose}
+      handleCancel={onClose}
+      hideCancel
+    >
+      <StyledWrapper className="flex flex-col h-full w-[500px]">
+          <div className="space-y-2"> 
+            <div className="flex border border-gray-200 dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-500/10 items-center p-3 rounded-lg transition-colors cursor-pointer" onClick={handleExportBrunoCollection}>
+              <div className="mr-3 p-1 rounded-full">
+                <Bruno width={28} />
+              </div>
+              <div className="flex-1">
+                <div className="font-medium">Bruno Collection</div>
+                <div className="text-xs">Export in Bruno format</div>
+              </div>
+            </div>
+            
+            <div className="flex border border-gray-200 dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-500/10 items-center p-3 rounded-lg transition-colors cursor-pointer" onClick={handleExportPostmanCollection}>
+              <div className="mr-3 p-1 rounded-full">
+                <IconDownload size={28} strokeWidth={1} className="" />
+              </div>
+              <div className="flex-1">
+                <div className="font-medium">Postman Collection</div>
+                <div className="text-xs">Export in Postman format</div>
+              </div>
+            </div>
+          </div>
+      </StyledWrapper>
+    </Modal>
+  );
+};
+
+export default ShareCollection;

packages/bruno-app/src/components/Sidebar/Collections/Collection/CloneCollection/index.js

@@ -5,29 +5,38 @@ import * as Yup from 'yup';
 import { browseDirectory } from 'providers/ReduxStore/slices/collections/actions';
 import { cloneCollection } from 'providers/ReduxStore/slices/collections/actions';
 import toast from 'react-hot-toast';
-import InfoTip from 'components/InfoTip';
 import Modal from 'components/Modal';
+import { sanitizeName, validateName, validateNameError } from 'utils/common/regex';
+import Help from 'components/Help';
+import PathDisplay from 'components/PathDisplay';
+import { useState } from 'react';
+import { IconArrowBackUp, IconEdit } from "@tabler/icons";
 
 const CloneCollection = ({ onClose, collection }) => {
   const inputRef = useRef();
   const dispatch = useDispatch();
+  const [isEditing, toggleEditing] = useState(false);
+  const { name } = collection;
 
   const formik = useFormik({
     enableReinitialize: true,
     initialValues: {
-      collectionName: '',
-      collectionFolderName: '',
+      collectionName: `${name} copy`,
+      collectionFolderName: `${sanitizeName(name)} copy`,
       collectionLocation: ''
     },
     validationSchema: Yup.object({
       collectionName: Yup.string()
         .min(1, 'must be at least 1 character')
-        .max(50, 'must be 50 characters or less')
+        .max(255, 'must be 255 characters or less')
         .required('collection name is required'),
       collectionFolderName: Yup.string()
         .min(1, 'must be at least 1 character')
-        .max(50, 'must be 50 characters or less')
-        .matches(/^[\w\-. ]+$/, 'Folder name contains invalid characters')
+        .max(255, 'must be 255 characters or less')
+        .test('is-valid-collection-name', function(value) {
+          const isValid = validateName(value);
+          return isValid ? true : this.createError({ message: validateNameError(value) });
+        })
         .required('folder name is required'),
       collectionLocation: Yup.string().min(1, 'location is required').required('location is required')
     }),
@@ -51,7 +60,7 @@ const CloneCollection = ({ onClose, collection }) => {
   const browse = () => {
     dispatch(browseDirectory())
       .then((dirPath) => {
-        // When the user closes the diolog without selecting anything dirPath will be false
+        // When the user closes the dialog without selecting anything dirPath will be false
         if (typeof dirPath === 'string') {
           formik.setFieldValue('collectionLocation', dirPath);
         }
@@ -85,9 +94,7 @@ const CloneCollection = ({ onClose, collection }) => {
             className="block textbox mt-2 w-full"
             onChange={(e) => {
               formik.handleChange(e);
-              if (formik.values.collectionName === formik.values.collectionFolderName) {
-                formik.setFieldValue('collectionFolderName', e.target.value);
-              }
+              !isEditing && formik.setFieldValue('collectionFolderName', sanitizeName(e.target.value));
             }}
             autoComplete="off"
             autoCorrect="off"
@@ -119,33 +126,70 @@ const CloneCollection = ({ onClose, collection }) => {
             <div className="text-red-500">{formik.errors.collectionLocation}</div>
           ) : null}
           <div className="mt-1">
-            <span className="text-link cursor-pointer hover:underline" onClick={browse}>
+            <span
+              className="text-link cursor-pointer hover:underline" onClick={browse}
+              style={{
+                fontSize: '0.8125rem'
+              }}
+            >
               Browse
             </span>
           </div>
 
-          <label htmlFor="collection-folder-name" className="flex items-center mt-3">
-            <span className="font-semibold">Folder Name</span>
-            <InfoTip
-              content="This folder will be created under the selected location"
-              infotipId="collection-folder-name-infotip"
-            />
-          </label>
-          <input
-            id="collection-folder-name"
-            type="text"
-            name="collectionFolderName"
-            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}
+          <div className="mt-4">
+            <div className="flex items-center justify-between">
+              <label htmlFor="filename" className="flex items-center font-semibold">
+                Folder Name
+                <Help width="300">
+                  <p>
+                    The name of the folder used to store the collection.
+                  </p>
+                  <p className="mt-2">
+                    You can choose a folder name different from your collection's name or one compatible with filesystem rules.
+                  </p>
+                </Help>
+              </label>
+              {isEditing ? (
+                <IconArrowBackUp 
+                  className="cursor-pointer opacity-50 hover:opacity-80" 
+                  size={16} 
+                  strokeWidth={1.5} 
+                  onClick={() => toggleEditing(false)} 
+                />
+              ) : (
+                <IconEdit
+                  className="cursor-pointer opacity-50 hover:opacity-80" 
+                  size={16} 
+                  strokeWidth={1.5}
+                  onClick={() => toggleEditing(true)} 
+                />
+              )}
+            </div>
+            {isEditing ? (
+              <input
+                id="collection-folder-name"
+                type="text"
+                name="collectionFolderName"
+                className="block textbox mt-2 w-full"
+                onChange={formik.handleChange}
+                autoComplete="off"
+                autoCorrect="off"
+                autoCapitalize="off"
+                spellCheck="false"
+                value={formik.values.collectionFolderName || ''}
+              />
+            ) : (
+              <div className='relative flex flex-row gap-1 items-center justify-between'>
+                <PathDisplay
+                  baseName={formik.values.collectionFolderName}
+                />
+              </div>
+            )}
+
+            {formik.touched.collectionFolderName && formik.errors.collectionFolderName ? (
+              <div className="text-red-500">{formik.errors.collectionFolderName}</div>
+            ) : null}
+          </div>
         </div>
       </form>
     </Modal>

packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/CloneCollectionItem/StyledWrapper.js

@@ -0,0 +1,12 @@
+import styled from 'styled-components';
+
+const StyledWrapper = styled.div`
+  .advanced-options {
+    .caret {
+      color: ${(props) => props.theme.textLink};
+      fill: ${(props) => props.theme.textLink};
+    }
+  }
+`;
+
+export default StyledWrapper;

packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/CloneCollectionItem/index.js

@@ -1,4 +1,4 @@
-import React, { useRef, useEffect } from 'react';
+import React, { useState, useRef, useEffect, forwardRef } from 'react';
 import toast from 'react-hot-toast';
 import { useFormik } from 'formik';
 import * as Yup from 'yup';
@@ -6,24 +6,50 @@ import Modal from 'components/Modal';
 import { useDispatch } from 'react-redux';
 import { isItemAFolder } from 'utils/tabs';
 import { cloneItem } from 'providers/ReduxStore/slices/collections/actions';
+import { IconArrowBackUp, IconEdit, IconCaretDown } from "@tabler/icons";
+import { sanitizeName, validateName, validateNameError } from 'utils/common/regex';
+import Help from 'components/Help';
+import PathDisplay from 'components/PathDisplay/index';
+import path from 'utils/common/path';
+import Portal from 'components/Portal';
+import Dropdown from 'components/Dropdown';
+import StyledWrapper from './StyledWrapper';
 
 const CloneCollectionItem = ({ collection, item, onClose }) => {
   const dispatch = useDispatch();
   const isFolder = isItemAFolder(item);
   const inputRef = useRef();
+  const [isEditing, toggleEditing] = useState(false);
+  const itemName = item?.name;
+  const itemType = item?.type;
+  const [showFilesystemName, toggleShowFilesystemName] = useState(false);
+
+  const dropdownTippyRef = useRef();
+  const onDropdownCreate = (ref) => (dropdownTippyRef.current = ref);
+
   const formik = useFormik({
     enableReinitialize: true,
     initialValues: {
-      name: item.name
+      name: `${itemName} copy`,
+      filename: `${sanitizeName(itemName)} copy`
     },
     validationSchema: Yup.object({
       name: Yup.string()
         .min(1, 'must be at least 1 character')
-        .max(50, 'must be 50 characters or less')
+        .max(255, 'must be 255 characters or less')
+        .required('name is required'),
+      filename: Yup.string()
+        .min(1, 'must be at least 1 character')
+        .max(255, 'must be 255 characters or less')
         .required('name is required')
+        .test('is-valid-name', function(value) {
+          const isValid = validateName(value);
+          return isValid ? true : this.createError({ message: validateNameError(value) });
+        })
+        .test('not-reserved', `The file names "collection" and "folder" are reserved in bruno`, value => !['collection', 'folder'].includes(value))
     }),
     onSubmit: (values) => {
-      dispatch(cloneItem(values.name, item.uid, collection.uid))
+      dispatch(cloneItem(values.name, values.filename, item.uid, collection.uid))
         .then(() => {
           toast.success('Request cloned!');
           onClose();
@@ -40,39 +66,159 @@ const CloneCollectionItem = ({ collection, item, onClose }) => {
     }
   }, [inputRef]);
 
-  const onSubmit = () => formik.handleSubmit();
+  const AdvancedOptions = forwardRef((props, ref) => {
+    return (
+      <div ref={ref} className="flex mr-2 text-link cursor-pointer items-center">
+        <button
+          className="btn-advanced"
+          type="button"
+        >
+          Options
+        </button>
+        <IconCaretDown className="caret ml-1" size={14} strokeWidth={2}/>
+      </div>
+    );
+  });
 
   return (
-    <Modal
-      size="sm"
-      title={`Clone ${isFolder ? 'Folder' : 'Request'}`}
-      confirmText="Clone"
-      handleConfirm={onSubmit}
-      handleCancel={onClose}
-    >
-      <form className="bruno-form" onSubmit={e => e.preventDefault()}>
-        <div>
-          <label htmlFor="name" className="block font-semibold">
-            {isFolder ? 'Folder' : 'Request'} Name
-          </label>
-          <input
-            id="collection-item-name"
-            type="text"
-            name="name"
-            placeholder='Enter Item 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>
+      <StyledWrapper>
+        <Modal
+          size="md"
+          title={`Clone ${isFolder ? 'Folder' : 'Request'}`}
+          handleCancel={onClose}
+          hideFooter
+        >
+          <form className="bruno-form" onSubmit={formik.handleSubmit}>
+            <div>
+              <label htmlFor="name" className="block font-semibold">
+                {isFolder ? 'Folder' : 'Request'} Name
+              </label>
+              <input
+                id="collection-item-name"
+                type="text"
+                name="name"
+                placeholder='Enter Item name'
+                ref={inputRef}
+                className="block textbox mt-2 w-full"
+                autoComplete="off"
+                autoCorrect="off"
+                autoCapitalize="off"
+                spellCheck="false"
+                onChange={e => {
+                  formik.setFieldValue('name', e.target.value);
+                  !isEditing && formik.setFieldValue('filename', sanitizeName(e.target.value));
+                }}
+                value={formik.values.name || ''}
+              />
+              {formik.touched.name && formik.errors.name ? <div className="text-red-500">{formik.errors.name}</div> : null}
+            </div>
+            
+            {showFilesystemName && (
+              <div className="mt-4">
+                <div className="flex items-center justify-between">
+                  <label htmlFor="filename" className="flex items-center font-semibold">
+                    {isFolder ? 'Folder' : 'File'} Name <small className='font-normal text-muted ml-1'>(on filesystem)</small>
+                    { isFolder ? (
+                      <Help width="300">
+                        <p>
+                          You can choose to save the folder as a different name on your file system versus what is displayed in the app.
+                        </p>
+                      </Help>
+                    ) : (
+                      <Help width="300">
+                        <p>
+                          Bruno saves each request as a file in your collection's folder.
+                        </p>
+                        <p className="mt-2">
+                          You can choose a file name different from your request's name or one compatible with filesystem rules.
+                        </p>
+                      </Help>
+                    )}
+                  </label>
+                  {isEditing ? (
+                    <IconArrowBackUp 
+                      className="cursor-pointer opacity-50 hover:opacity-80" 
+                      size={16} 
+                      strokeWidth={1.5} 
+                      onClick={() => toggleEditing(false)} 
+                    />
+                  ) : (
+                    <IconEdit
+                        className="cursor-pointer opacity-50 hover:opacity-80" 
+                        size={16} 
+                        strokeWidth={1.5}
+                        onClick={() => toggleEditing(true)} 
+                      />
+                  )}
+                </div>
+                {isEditing ? (
+                  <div className='relative flex flex-row gap-1 items-center justify-between'>
+                    <input
+                      id="file-name"
+                      type="text"
+                      name="filename"
+                      placeholder={isFolder ? 'Folder Name' : 'File Name'}
+                      className={`!pr-10 block textbox mt-2 w-full`}
+                      autoComplete="off"
+                      autoCorrect="off"
+                      autoCapitalize="off"
+                      spellCheck="false"
+                      onChange={formik.handleChange}
+                      value={formik.values.filename || ''}
+                    />
+                    {itemType !== 'folder' && <span className='absolute right-2 top-4 flex justify-center items-center file-extension'>.bru</span>}
+                  </div>
+                ) : (
+                  <div className='relative flex flex-row gap-1 items-center justify-between'>
+                    <PathDisplay
+                      collection={collection}
+                      dirName={path.relative(collection?.pathname, path.dirname(item?.pathname))}
+                      baseName={formik.values.filename}
+                    />
+                  </div>
+                )}
+                {formik.touched.filename && formik.errors.filename ? (
+                  <div className="text-red-500">{formik.errors.filename}</div>
+                ) : null}
+              </div>
+            )}
+
+            <div className="flex justify-between items-center mt-8 bruno-modal-footer">
+              <div className='flex advanced-options'>
+                <Dropdown onCreate={onDropdownCreate} icon={<AdvancedOptions />} placement="bottom-start">
+                  <div 
+                    className="dropdown-item"
+                    key="show-filesystem-name"
+                    onClick={(e) => {
+                      dropdownTippyRef.current.hide();
+                      toggleShowFilesystemName(!showFilesystemName);
+                    }}
+                  >
+                    {showFilesystemName ? 'Hide Filesystem Name' : 'Show Filesystem Name'}
+                  </div>
+                </Dropdown>
+              </div>
+              <div className='flex justify-end'>
+                <span className='mr-2'>
+                  <button type="button" onClick={onClose} className="btn btn-md btn-close">
+                    Cancel
+                  </button>
+                </span>
+                <span>
+                  <button
+                    type="submit"
+                    className="submit btn btn-md btn-secondary"
+                  >
+                    Clone
+                  </button>
+                </span>
+              </div>
+            </div>
+          </form>
+        </Modal>
+      </StyledWrapper>
+    </Portal>
   );
 };
 

packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/CollectionItemInfo/index.js

@@ -0,0 +1,57 @@
+import React from 'react';
+import Modal from 'components/Modal';
+import Help from 'components/Help';
+
+const CollectionItemInfo = ({ item, onClose }) => {
+  const { name, filename, type } = item;
+
+  return (
+    <Modal
+      size="md"
+      title={`Info`}
+      handleCancel={onClose}
+      hideCancel={true}
+      hideFooter={true}
+    >
+      <div className="w-fit flex flex-col h-full">
+        <table className="w-full border-collapse">
+          <tbody>
+          <tr className="">
+            <td className="py-2 px-2 text-left text-muted ">
+              {type=='folder' ? 'Folder Name' : 'Request Name'}
+            </td>
+            <td className="py-2 px-2 text-nowrap truncate max-w-[500px]" title={name}>
+              <span className="mr-2">:</span>{name}
+            </td>
+          </tr>
+          <tr className="">
+            <td className="py-2 px-2 text-left text-muted flex items-center">
+              {type == 'folder' ? 'Folder Name' : 'File Name'}
+              <small className='font-normal text-muted ml-1'>(on filesystem)</small>
+              {type == 'folder' ? (
+                <Help width="300">
+                  <p>
+                    The name of the folder on your filesystem.
+                  </p>
+                </Help>
+              ) : (
+                <Help width="300">
+                  <p>
+                    Bruno saves each request as a file in your collection's folder.
+                  </p>
+                </Help>
+              )}
+            </td>
+            <td className="py-2 px-2 break-all text-nowrap truncate max-w-[500px]" title={filename}>
+              <span className="mr-2">:</span>
+              {filename}
+            </td>
+          </tr>
+          </tbody>
+        </table>
+      </div>
+    </Modal>
+  );
+};
+
+export default CollectionItemInfo;

packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/RenameCollectionItem/StyledWrapper.js

@@ -0,0 +1,12 @@
+import styled from 'styled-components';
+
+const StyledWrapper = styled.div`
+  .advanced-options {
+    .caret {
+      color: ${(props) => props.theme.textLink};
+      fill: ${(props) => props.theme.textLink};
+    }
+  }
+`;
+
+export default StyledWrapper;

packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/RenameCollectionItem/index.js

@@ -1,46 +1,82 @@
-import React, { useRef, useEffect } from 'react';
+import React, { useRef, useEffect, useState, forwardRef } from 'react';
 import { useFormik } from 'formik';
 import * as Yup from 'yup';
 import Modal from 'components/Modal';
 import { useDispatch } from 'react-redux';
 import { isItemAFolder } from 'utils/tabs';
 import { renameItem, saveRequest } from 'providers/ReduxStore/slices/collections/actions';
+import path from 'utils/common/path';
+import { IconArrowBackUp, IconEdit, IconCaretDown } from '@tabler/icons';
+import { sanitizeName, validateName, validateNameError } from 'utils/common/regex';
 import toast from 'react-hot-toast';
 import { closeTabs } from 'providers/ReduxStore/slices/tabs';
+import Help from 'components/Help';
+import PathDisplay from 'components/PathDisplay';
+import Portal from 'components/Portal';
+import Dropdown from 'components/Dropdown';
+import StyledWrapper from './StyledWrapper';
 
 const RenameCollectionItem = ({ collection, item, onClose }) => {
   const dispatch = useDispatch();
   const isFolder = isItemAFolder(item);
   const inputRef = useRef();
+  const [isEditing, toggleEditing] = useState(false);
+  const itemName = item?.name;
+  const itemType = item?.type;
+  const itemFilename = item?.filename ? path.parse(item?.filename).name : '';
+  const [showFilesystemName, toggleShowFilesystemName] = useState(false);
+
+  const dropdownTippyRef = useRef();
+  const onDropdownCreate = (ref) => (dropdownTippyRef.current = ref);
+
   const formik = useFormik({
     enableReinitialize: true,
     initialValues: {
-      name: item.name
+      name: itemName,
+      filename: sanitizeName(itemFilename)
     },
     validationSchema: Yup.object({
       name: Yup.string()
         .min(1, 'must be at least 1 character')
-        .max(50, 'must be 50 characters or less')
+        .max(255, 'must be 255 characters or less')
+        .required('name is required'),
+      filename: Yup.string()
+        .min(1, 'must be at least 1 character')
+        .max(255, 'must be 255 characters or less')
         .required('name is required')
+        .test('is-valid-name', function(value) {
+          const isValid = validateName(value);
+          return isValid ? true : this.createError({ message: validateNameError(value) });
+        })
+        .test('not-reserved', `The file names "collection" and "folder" are reserved in bruno`, value => !['collection', 'folder'].includes(value))
     }),
     onSubmit: async (values) => {
       // if there is unsaved changes in the request,
       // save them before renaming the request
+      if ((item.name === values.name) && (itemFilename === values.filename)) {
+        return;
+      }
       if (!isFolder && item.draft) {
         await dispatch(saveRequest(item.uid, collection.uid, true));
       }
-      if (item.name === values.name) {
-        return;
+      const { name: newName, filename: newFilename } = values;
+      try {
+        let renameConfig = {
+          itemUid: item.uid,
+          collectionUid: collection.uid,
+        };
+        renameConfig['newName'] = newName;
+        if (itemFilename !== newFilename) {
+          renameConfig['newFilename'] = newFilename;
+        }
+        await dispatch(renameItem(renameConfig));
+        if (isFolder) {
+          dispatch(closeTabs({ tabUids: [item.uid] }));
+        }
+        onClose();
+      } catch (error) {
+        toast.error(error.message || 'An error occurred while renaming');
       }
-      dispatch(renameItem(values.name, item.uid, collection.uid))
-        .then(() => {
-          isFolder && dispatch(closeTabs({ tabUids: [item.uid] }));
-          toast.success(isFolder ? 'Folder renamed' : 'Request renamed');
-          onClose();
-        })
-        .catch((err) => {
-          toast.error(err ? err.message : 'An error occurred while renaming the request');
-        });
     }
   });
 
@@ -50,38 +86,157 @@ const RenameCollectionItem = ({ collection, item, onClose }) => {
     }
   }, [inputRef]);
 
-  const onSubmit = () => formik.handleSubmit();
+  const AdvancedOptions = forwardRef((props, ref) => {
+    return (
+      <div ref={ref} className="flex mr-2 text-link cursor-pointer items-center">
+        <button
+          className="btn-advanced"
+          type="button"
+        >
+          Options
+        </button>
+        <IconCaretDown className="caret ml-1" size={14} strokeWidth={2}/>
+      </div>
+    );
+  });
 
   return (
-    <Modal
-      size="sm"
-      title={`Rename ${isFolder ? 'Folder' : 'Request'}`}
-      confirmText="Rename"
-      handleConfirm={onSubmit}
-      handleCancel={onClose}
-    >
-      <form className="bruno-form" onSubmit={(e) => e.preventDefault()}>
-        <div>
-          <label htmlFor="name" className="block font-semibold">
-            {isFolder ? 'Folder' : 'Request'} Name
-          </label>
-          <input
-            id="collection-item-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>
+      <StyledWrapper>
+        <Modal
+          size="md"
+          title={`Rename ${isFolder ? 'Folder' : 'Request'}`}
+          handleCancel={onClose}
+          hideFooter
+        >
+          <form className="bruno-form" onSubmit={formik.handleSubmit}>
+            <div className='flex flex-col mt-2'>
+              <label htmlFor="name" className="block font-semibold">
+                {isFolder ? 'Folder' : 'Request'} Name
+              </label>
+              <input
+                id="collection-item-name"
+                type="text"
+                name="name"
+                ref={inputRef}
+                className="block textbox mt-2 w-full"
+                autoComplete="off"
+                autoCorrect="off"
+                autoCapitalize="off"
+                spellCheck="false"
+                onChange={e => {
+                  formik.setFieldValue('name', e.target.value);
+                  !isEditing && formik.setFieldValue('filename', sanitizeName(e.target.value));
+                }}
+                value={formik.values.name || ''}
+              />
+              {formik.touched.name && formik.errors.name ? <div className="text-red-500">{formik.errors.name}</div> : null}
+            </div>
+
+            {showFilesystemName && (
+              <div className="mt-4">
+                <div className="flex items-center justify-between">
+                  <label htmlFor="filename" className="flex items-center font-semibold">
+                    {isFolder ? 'Folder' : 'File'} Name <small className='font-normal text-muted ml-1'>(on filesystem)</small>
+                    { isFolder ? (
+                      <Help width="300">
+                        <p>
+                          You can choose to save the folder as a different name on your file system versus what is displayed in the app.
+                        </p>
+                      </Help>
+                    ) : (
+                      <Help width="300">
+                        <p>
+                          Bruno saves each request as a file in your collection's folder.
+                        </p>
+                        <p className="mt-2">
+                          You can choose a file name different from your request's name or one compatible with filesystem rules.
+                        </p>
+                      </Help>
+                    )}
+                  </label>
+                  {isEditing ? (
+                    <IconArrowBackUp 
+                      className="cursor-pointer opacity-50 hover:opacity-80"
+                      size={16} 
+                      strokeWidth={1.5} 
+                      onClick={() => toggleEditing(false)} 
+                    />
+                  ) : (
+                    <IconEdit
+                      className="cursor-pointer opacity-50 hover:opacity-80" 
+                      size={16} 
+                      strokeWidth={1.5}
+                      onClick={() => toggleEditing(true)} 
+                    />
+                  )}
+                </div>
+                {isEditing ? (
+                  <div className='relative flex flex-row gap-1 items-center justify-between'>
+                    <input
+                      id="file-name"
+                      type="text"
+                      name="filename"
+                      placeholder={isFolder ? 'Folder Name' : 'File Name'}
+                      className={`!pr-10 block textbox mt-2 w-full`}
+                      autoComplete="off"
+                      autoCorrect="off"
+                      autoCapitalize="off"
+                      spellCheck="false"
+                      onChange={formik.handleChange}
+                      value={formik.values.filename || ''}
+                    />
+                    {itemType !== 'folder' && <span className='absolute right-2 top-4 flex justify-center items-center file-extension'>.bru</span>}
+                  </div>
+                ) : (
+                  <div className='relative flex flex-row gap-1 items-center justify-between'>
+                    <PathDisplay
+                      collection={collection}
+                      dirName={path.relative(collection?.pathname, path.dirname(item?.pathname))}
+                      baseName={formik.values.filename}
+                    />
+                  </div>
+                )}
+                {formik.touched.filename && formik.errors.filename ? (
+                  <div className="text-red-500">{formik.errors.filename}</div>
+                ) : null}
+              </div>
+            )}
+            <div className="flex justify-between items-center mt-8 bruno-modal-footer">
+              <div className='flex advanced-options'>
+                <Dropdown onCreate={onDropdownCreate} icon={<AdvancedOptions />} placement="bottom-start">
+                  <div 
+                    className="dropdown-item"
+                    key="show-filesystem-name"
+                    onClick={(e) => {
+                      dropdownTippyRef.current.hide();
+                      toggleShowFilesystemName(!showFilesystemName);
+                    }}
+                  >
+                    {showFilesystemName ? 'Hide Filesystem Name' : 'Show Filesystem Name'}
+                  </div>
+                </Dropdown>
+              </div>
+              <div className='flex justify-end'>
+                <span className='mr-2'>
+                  <button type="button" onClick={onClose} className="btn btn-md btn-close">
+                    Cancel
+                  </button>
+                </span>
+                <span>
+                  <button
+                    type="submit"
+                    className="submit btn btn-md btn-secondary"
+                  >
+                    Rename
+                  </button>
+                </span>
+              </div>
+            </div>
+          </form>
+        </Modal>
+      </StyledWrapper>
+    </Portal>
   );
 };
 

packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/index.js

@@ -23,7 +23,7 @@ import { hideHomePage } from 'providers/ReduxStore/slices/app';
 import toast from 'react-hot-toast';
 import StyledWrapper from './StyledWrapper';
 import NetworkError from 'components/ResponsePane/NetworkError/index';
-import { findItemInCollection } from 'utils/collections';
+import CollectionItemInfo from './CollectionItemInfo/index';
 import CollectionItemIcon from './CollectionItemIcon';
 import { scrollToTheActiveTab } from 'utils/tabs';
 
@@ -41,7 +41,7 @@ const CollectionItem = ({ item, collection, searchText }) => {
   const [newRequestModalOpen, setNewRequestModalOpen] = useState(false);
   const [newFolderModalOpen, setNewFolderModalOpen] = useState(false);
   const [runCollectionModalOpen, setRunCollectionModalOpen] = useState(false);
-
+  const [itemInfoModalOpen, setItemInfoModalOpen] = useState(false);
   const hasSearchText = searchText && searchText?.trim()?.length;
   const itemIsCollapsed = hasSearchText ? false : item.collapsed;
 
@@ -259,6 +259,9 @@ const CollectionItem = ({ item, collection, searchText }) => {
       {generateCodeItemModalOpen && (
         <GenerateCodeItem collection={collection} item={item} onClose={() => setGenerateCodeItemModalOpen(false)} />
       )}
+      {itemInfoModalOpen && (
+        <CollectionItemInfo item={item} collection={collection} onClose={() => setItemInfoModalOpen(false)} />
+      )}
       <div className={itemRowClassName} ref={collectionItemRef}>
         <div className="flex items-center h-full w-full">
           {indents && indents.length
@@ -413,6 +416,15 @@ const CollectionItem = ({ item, collection, searchText }) => {
                   Settings
                 </div>
               )}
+              <div
+                className="dropdown-item item-info"
+                onClick={(e) => {
+                  dropdownTippyRef.current.hide();
+                  setItemInfoModalOpen(true);
+                }}
+              >
+                Info
+              </div>
             </Dropdown>
           </div>
         </div>

packages/bruno-app/src/components/Sidebar/Collections/Collection/index.js

@@ -13,7 +13,6 @@ import NewRequest from 'components/Sidebar/NewRequest';
 import NewFolder from 'components/Sidebar/NewFolder';
 import CollectionItem from './CollectionItem';
 import RemoveCollection from './RemoveCollection';
-import ExportCollection from './ExportCollection';
 import { doesCollectionHaveItemsMatchingSearchText } from 'utils/collections/search';
 import { isItemAFolder, isItemARequest } from 'utils/collections';
 
@@ -22,15 +21,15 @@ import StyledWrapper from './StyledWrapper';
 import CloneCollection from './CloneCollection';
 import { areItemsLoading, findItemInCollection } from 'utils/collections';
 import { scrollToTheActiveTab } from 'utils/tabs';
+import ShareCollection from 'components/ShareCollection/index';
 
 const Collection = ({ collection, searchText }) => {
   const [showNewFolderModal, setShowNewFolderModal] = useState(false);
   const [showNewRequestModal, setShowNewRequestModal] = useState(false);
   const [showRenameCollectionModal, setShowRenameCollectionModal] = useState(false);
   const [showCloneCollectionModalOpen, setShowCloneCollectionModalOpen] = useState(false);
-  const [showExportCollectionModal, setShowExportCollectionModal] = useState(false);
+  const [showShareCollectionModal, setShowShareCollectionModal] = useState(false);
   const [showRemoveCollectionModal, setShowRemoveCollectionModal] = useState(false);
-  const tabs = useSelector((state) => state.tabs.tabs);
   const dispatch = useDispatch();
   const isLoading = areItemsLoading(collection);
   const collectionRef = useRef(null);
@@ -193,8 +192,8 @@ const Collection = ({ collection, searchText }) => {
       {showRemoveCollectionModal && (
         <RemoveCollection collection={collection} onClose={() => setShowRemoveCollectionModal(false)} />
       )}
-      {showExportCollectionModal && (
-        <ExportCollection collection={collection} onClose={() => setShowExportCollectionModal(false)} />
+      {showShareCollectionModal && (
+        <ShareCollection collection={collection} onClose={() => setShowShareCollectionModal(false)} />
       )}
       {showCloneCollectionModalOpen && (
         <CloneCollection collection={collection} onClose={() => setShowCloneCollectionModalOpen(false)} />
@@ -215,7 +214,7 @@ const Collection = ({ collection, searchText }) => {
             style={{ width: 16, minWidth: 16, color: 'rgb(160 160 160)' }}
             onClick={handleCollectionCollapse}
           />
-          <div className="ml-1" id="sidebar-collection-name">
+          <div className="ml-1 w-full" id="sidebar-collection-name">
             {collection.name}
           </div>
           {isLoading ? <IconLoader2 className="animate-spin mx-1" size={18} strokeWidth={1.5} /> : null}
@@ -271,10 +270,10 @@ const Collection = ({ collection, searchText }) => {
               className="dropdown-item"
               onClick={(e) => {
                 menuDropdownTippyRef.current.hide();
-                setShowExportCollectionModal(true);
+                setShowShareCollectionModal(true);
               }}
             >
-              Export
+              Share
             </div>
             <div
               className="dropdown-item"

packages/bruno-app/src/components/Sidebar/Collections/index.js

@@ -89,7 +89,7 @@ const Collections = () => {
         <input
           type="text"
           name="search"
-          placeholder="search"
+          placeholder="Search requests …"
           id="search"
           autoComplete="off"
           autoCorrect="off"

packages/bruno-app/src/components/Sidebar/CreateCollection/index.js

@@ -5,12 +5,17 @@ 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 InfoTip from 'components/InfoTip';
 import Modal from 'components/Modal';
+import { sanitizeName, validateName, validateNameError } from 'utils/common/regex';
+import PathDisplay from 'components/PathDisplay/index';
+import { useState } from 'react';
+import { IconArrowBackUp, IconEdit } from '@tabler/icons';
+import Help from 'components/Help';
 
 const CreateCollection = ({ onClose }) => {
   const inputRef = useRef();
   const dispatch = useDispatch();
+  const [isEditing, toggleEditing] = useState(false);
 
   const formik = useFormik({
     enableReinitialize: true,
@@ -22,12 +27,15 @@ const CreateCollection = ({ onClose }) => {
     validationSchema: Yup.object({
       collectionName: Yup.string()
         .min(1, 'must be at least 1 character')
-        .max(50, 'must be 50 characters or less')
+        .max(255, 'must be 255 characters or less')
         .required('collection name is required'),
       collectionFolderName: Yup.string()
         .min(1, 'must be at least 1 character')
-        .max(50, 'must be 50 characters or less')
-        .matches(/^[\w\-. ]+$/, 'Folder name contains invalid characters')
+        .max(255, 'must be 255 characters or less')
+        .test('is-valid-collection-name', function(value) {
+          const isValid = validateName(value);
+          return isValid ? true : this.createError({ message: validateNameError(value) });
+        })
         .required('folder name is required'),
       collectionLocation: Yup.string().min(1, 'location is required').required('location is required')
     }),
@@ -44,7 +52,7 @@ const CreateCollection = ({ onClose }) => {
   const browse = () => {
     dispatch(browseDirectory())
       .then((dirPath) => {
-        // When the user closes the diolog without selecting anything dirPath will be false
+        // When the user closes the dialog without selecting anything dirPath will be false
         if (typeof dirPath === 'string') {
           formik.setFieldValue('collectionLocation', dirPath);
         }
@@ -78,9 +86,7 @@ const CreateCollection = ({ onClose }) => {
             className="block textbox mt-2 w-full"
             onChange={(e) => {
               formik.handleChange(e);
-              if (formik.values.collectionName === formik.values.collectionFolderName) {
-                formik.setFieldValue('collectionFolderName', e.target.value);
-              }
+              !isEditing && formik.setFieldValue('collectionFolderName', sanitizeName(e.target.value));
             }}
             autoComplete="off"
             autoCorrect="off"
@@ -92,8 +98,16 @@ const CreateCollection = ({ onClose }) => {
             <div className="text-red-500">{formik.errors.collectionName}</div>
           ) : null}
 
-          <label htmlFor="collection-location" className="block font-semibold mt-3">
+          <label htmlFor="collection-location" className="block font-semibold mt-3 flex items-center">
             Location
+            <Help>
+              <p>
+                Bruno stores your collections on your computer's filesystem.
+              </p>
+              <p className="mt-2">
+                Choose the location where you want to store this collection.
+              </p>
+            </Help>
           </label>
           <input
             id="collection-location"
@@ -112,33 +126,70 @@ const CreateCollection = ({ onClose }) => {
             <div className="text-red-500">{formik.errors.collectionLocation}</div>
           ) : null}
           <div className="mt-1">
-            <span className="text-link cursor-pointer hover:underline" onClick={browse}>
+            <span
+              className="text-link cursor-pointer hover:underline" onClick={browse}
+              style={{
+                fontSize: '0.8125rem'
+              }}
+            >
               Browse
             </span>
           </div>
-
-          <label htmlFor="collection-folder-name" className="flex items-center mt-3">
-            <span className="font-semibold">Folder Name</span>
-            <InfoTip
-              content="This folder will be created under the selected location"
-              infotipId="collection-folder-name-infotip"
-            />
-          </label>
-          <input
-            id="collection-folder-name"
-            type="text"
-            name="collectionFolderName"
-            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}
+          {formik.values.collectionName?.trim()?.length > 0 && (
+            <div className="mt-4">
+              <div className="flex items-center justify-between">
+                <label htmlFor="filename" className="flex items-center font-semibold">
+                  Folder Name
+                  <Help width="300">
+                    <p>
+                      The name of the folder used to store the collection.
+                    </p>
+                    <p className="mt-2">
+                      You can choose a folder name different from your collection's name or one compatible with filesystem rules.
+                    </p>
+                  </Help>
+                </label>
+                {isEditing ? (
+                  <IconArrowBackUp 
+                    className="cursor-pointer opacity-50 hover:opacity-80" 
+                    size={16} 
+                    strokeWidth={1.5} 
+                    onClick={() => toggleEditing(false)} 
+                  />
+                ) : (
+                  <IconEdit
+                    className="cursor-pointer opacity-50 hover:opacity-80" 
+                    size={16} 
+                    strokeWidth={1.5} 
+                    onClick={() => toggleEditing(true)} 
+                  />
+                )}
+              </div>
+              {isEditing ? (
+                <input
+                  id="collection-folder-name"
+                  type="text"
+                  name="collectionFolderName"
+                  className="block textbox mt-2 w-full"
+                  onChange={formik.handleChange}
+                  autoComplete="off"
+                  autoCorrect="off"
+                  autoCapitalize="off"
+                  spellCheck="false"
+                  value={formik.values.collectionFolderName || ''}
+                />
+              ) : (
+                <div className='relative flex flex-row gap-1 items-center justify-between'>
+                  <PathDisplay
+                    baseName={formik.values.collectionFolderName}
+                  />
+                </div>
+              )}
+              {formik.touched.collectionFolderName && formik.errors.collectionFolderName ? (
+                <div className="text-red-500">{formik.errors.collectionFolderName}</div>
+              ) : null}
+            </div>
+          )}
         </div>
       </form>
     </Modal>

packages/bruno-app/src/components/Sidebar/GoldenEdition/index.js

@@ -85,7 +85,7 @@ const GoldenEdition = ({ onClose }) => {
     });
   };
 
-  const goldenEditonIndividuals = [
+  const goldenEditionIndividuals = [
     'Inbuilt Bru File Explorer',
     'Visual Git (Like Gitlens for Vscode)',
     'GRPC, Websocket, SocketIO, MQTT',
@@ -97,7 +97,7 @@ const GoldenEdition = ({ onClose }) => {
     'Custom Themes'
   ];
 
-  const goldenEditonOrganizations = [
+  const goldenEditionOrganizations = [
     'Centralized License Management',
     'Integration with Secret Managers',
     'Private Collection Registry',
@@ -179,7 +179,7 @@ const GoldenEdition = ({ onClose }) => {
             </li>
             {pricingOption === 'individuals' ? (
               <>
-                {goldenEditonIndividuals.map((item, index) => (
+                {goldenEditionIndividuals.map((item, index) => (
                   <li className="flex items-center space-x-3" key={index}>
                     <CheckIcon />
                     <span>{item}</span>
@@ -192,7 +192,7 @@ const GoldenEdition = ({ onClose }) => {
                   <IconPlus size={16} strokeWidth={1.5} style={{ marginLeft: '2px' }} />
                   <span>Everything in the Individual Plan</span>
                 </li>
-                {goldenEditonOrganizations.map((item, index) => (
+                {goldenEditionOrganizations.map((item, index) => (
                   <li className="flex items-center space-x-3" key={index}>
                     <CheckIcon />
                     <span>{item}</span>

packages/bruno-app/src/components/Sidebar/NewFolder/StyledWrapper.js

@@ -0,0 +1,12 @@
+import styled from 'styled-components';
+
+const StyledWrapper = styled.div`
+  .advanced-options {
+    .caret {
+      color: ${(props) => props.theme.textLink};
+      fill: ${(props) => props.theme.textLink};
+    }
+  }
+`;
+
+export default StyledWrapper;

packages/bruno-app/src/components/Sidebar/NewFolder/index.js

@@ -1,40 +1,61 @@
-import React, { useRef, useEffect } from 'react';
+import React, { useRef, useEffect, useState, forwardRef } from 'react';
 import { useFormik } from 'formik';
 import toast from 'react-hot-toast';
 import * as Yup from 'yup';
+import Portal from 'components/Portal';
 import Modal from 'components/Modal';
 import { useDispatch } from 'react-redux';
 import { newFolder } from 'providers/ReduxStore/slices/collections/actions';
+import { IconArrowBackUp, IconEdit} from '@tabler/icons';
+import { sanitizeName, validateName, validateNameError } from 'utils/common/regex';
+import PathDisplay from 'components/PathDisplay/index';
+import Help from 'components/Help';
+import Dropdown from "components/Dropdown";
+import { IconCaretDown } from "@tabler/icons";
+import StyledWrapper from './StyledWrapper';
 
 const NewFolder = ({ collection, item, onClose }) => {
   const dispatch = useDispatch();
   const inputRef = useRef();
+  const [isEditing, toggleEditing] = useState(false);
+  const [showFilesystemName, toggleShowFilesystemName] = useState(false);
+
+  const dropdownTippyRef = useRef();
+  const onDropdownCreate = (ref) => (dropdownTippyRef.current = ref);
+
   const formik = useFormik({
     enableReinitialize: true,
     initialValues: {
-      folderName: ''
+      folderName: '',
+      directoryName: ''
     },
     validationSchema: Yup.object({
       folderName: Yup.string()
         .trim()
         .min(1, 'must be at least 1 character')
-        .required('name is required')
+        .required('name is required'),
+      directoryName: Yup.string()
+        .trim()
+        .min(1, 'must be at least 1 character')
+        .required('foldername is required')
+        .test('is-valid-folder-name', function(value) {
+          const isValid = validateName(value);
+          return isValid ? true : this.createError({ message: validateNameError(value) });
+        })
         .test({
           name: 'folderName',
           message: 'The folder name "environments" at the root of the collection is reserved in bruno',
           test: (value) => {
-            if (item && item.uid) {
-              return true;
-            }
+            if (item?.uid) return true;
             return value && !value.trim().toLowerCase().includes('environments');
           }
         })
     }),
     onSubmit: (values) => {
-      dispatch(newFolder(values.folderName, collection.uid, item ? item.uid : null))
+      dispatch(newFolder(values.folderName, values.directoryName, collection.uid, item ? item.uid : null))
         .then(() => {
           toast.success('New folder created!');
-          onClose()
+          onClose();
         })
         .catch((err) => toast.error(err ? err.message : 'An error occurred while adding the folder'));
     }
@@ -46,34 +67,139 @@ const NewFolder = ({ collection, item, onClose }) => {
     }
   }, [inputRef]);
 
-  const onSubmit = () => formik.handleSubmit();
+  const AdvancedOptions = forwardRef((props, ref) => {
+    return (
+      <div ref={ref} className="flex mr-2 text-link cursor-pointer items-center">
+        <button
+          className="btn-advanced"
+          type="button"
+        >
+          Options
+        </button>
+        <IconCaretDown className="caret ml-1" size={14} strokeWidth={2}/>
+      </div>
+    );
+  });
 
   return (
-    <Modal size="sm" title="New Folder" confirmText="Create" handleConfirm={onSubmit} handleCancel={onClose}>
-      <form className="bruno-form" onSubmit={e => e.preventDefault()}>
-        <div>
-          <label htmlFor="folderName" className="block font-semibold">
-            Folder Name
-          </label>
-          <input
-            id="collection-name"
-            type="text"
-            name="folderName"
-            ref={inputRef}
-            className="block textbox mt-2 w-full"
-            autoComplete="off"
-            autoCorrect="off"
-            autoCapitalize="off"
-            spellCheck="false"
-            onChange={formik.handleChange}
-            value={formik.values.folderName || ''}
-          />
-          {formik.touched.folderName && formik.errors.folderName ? (
-            <div className="text-red-500">{formik.errors.folderName}</div>
-          ) : null}
-        </div>
-      </form>
-    </Modal>
+    <Portal>
+      <StyledWrapper>
+        <Modal size="md" title="New Folder" hideFooter={true} handleCancel={onClose}>
+          <form className="bruno-form" onSubmit={formik.handleSubmit}>
+            <label htmlFor="folderName" className="block font-semibold">
+              Folder Name
+            </label>
+            <input
+              id="collection-name"
+              type="text"
+              name="folderName"
+              ref={inputRef}
+              className="block textbox mt-2 w-full"
+              autoComplete="off"
+              autoCorrect="off"
+              autoCapitalize="off"
+              spellCheck="false"
+              onChange={e => {
+                formik.setFieldValue('folderName', e.target.value);
+                !isEditing && formik.setFieldValue('directoryName', sanitizeName(e.target.value));
+              }}
+              value={formik.values.folderName || ''}
+            />
+            {formik.touched.folderName && formik.errors.folderName ? (
+              <div className="text-red-500">{formik.errors.folderName}</div>
+            ) : null}
+
+            {showFilesystemName && (
+              <div className="mt-4">
+                <div className="flex items-center justify-between">
+                  <label htmlFor="directoryName" className="flex items-center font-semibold">
+                    Folder Name <small className='font-normal text-muted ml-1'>(on filesystem)</small>
+                    <Help width="300">
+                      <p>
+                        You can choose to save the folder as a different name on your file system versus what is displayed in the app.
+                      </p>
+                    </Help>
+                  </label>
+                  {isEditing ? (
+                    <IconArrowBackUp 
+                      className="cursor-pointer opacity-50 hover:opacity-80" 
+                      size={16} 
+                      strokeWidth={1.5} 
+                      onClick={() => toggleEditing(false)} 
+                    />
+                  ): (
+                    <IconEdit
+                      className="cursor-pointer opacity-50 hover:opacity-80" 
+                      size={16} 
+                      strokeWidth={1.5}
+                      onClick={() => toggleEditing(true)} 
+                    />
+                  )}
+                </div>
+                {isEditing ? (
+                  <div className='relative flex flex-row gap-1 items-center justify-between'>
+                    <input
+                      id="file-name"
+                      type="text"
+                      name="directoryName"
+                      placeholder="Folder Name"
+                      className={`block textbox mt-2 w-full`}
+                      autoComplete="off"
+                      autoCorrect="off"
+                      autoCapitalize="off"
+                      spellCheck="false"
+                      onChange={formik.handleChange}
+                      value={formik.values.directoryName || ''}
+                    />
+                  </div>
+                ) : (
+                  <div className='relative flex flex-row gap-1 items-center justify-between'>
+                    <PathDisplay
+                      iconType="folder"
+                      baseName={formik.values.directoryName}
+                    />
+                  </div>
+                )}
+                {formik.touched.directoryName && formik.errors.directoryName ? (
+                  <div className="text-red-500">{formik.errors.directoryName}</div>
+                ) : null}
+              </div>
+            )}
+            <div className="flex justify-between items-center mt-8 bruno-modal-footer">
+              <div className='flex advanced-options'>
+                <Dropdown onCreate={onDropdownCreate} icon={<AdvancedOptions />} placement="bottom-start">
+                  <div 
+                    className="dropdown-item"
+                    key="show-filesystem-name"
+                    onClick={(e) => {
+                      dropdownTippyRef.current.hide();
+                      toggleShowFilesystemName(!showFilesystemName);
+                    }}
+                  >
+                    {showFilesystemName ? 'Hide Filesystem Name' : 'Show Filesystem Name'}
+                  </div>
+                </Dropdown>
+              </div>
+              <div className='flex justify-end'>
+                <span className='mr-2'>
+                  <button type="button" onClick={onClose} className="btn btn-md btn-close">
+                    Cancel
+                  </button>
+                </span>
+                <span>
+                  <button
+                    type="submit"
+                    className="submit btn btn-md btn-secondary"
+                  >
+                    Create
+                  </button>
+                </span>
+              </div>
+            </div>
+          </form>
+        </Modal>
+      </StyledWrapper>
+    </Portal>
   );
 };
 

packages/bruno-app/src/components/Sidebar/NewRequest/StyledWrapper.js

@@ -7,28 +7,23 @@ const StyledWrapper = styled.div`
     background-color: ${(props) => props.theme.modal.input.bg};
     border-top-left-radius: 3px;
     border-bottom-left-radius: 3px;
-
     .method-selector {
       min-width: 80px;
     }
   }
-
   div.method-selector-container,
   div.input-container {
     background-color: ${(props) => props.theme.modal.input.bg};
     height: 2.3rem;
   }
-
   div.input-container {
     border: solid 1px ${(props) => props.theme.modal.input.border};
     border-top-right-radius: 3px;
     border-bottom-right-radius: 3px;
-
     input {
       background-color: ${(props) => props.theme.modal.input.bg};
       outline: none;
       box-shadow: none;
-
       &:focus {
         outline: none !important;
         box-shadow: none !important;
@@ -39,14 +34,20 @@ const StyledWrapper = styled.div`
   textarea.curl-command {
     min-height: 150px;
   }
-
   .dropdown {
     width: fit-content;
   
-   .dropdown-item {
-    padding: 0.2rem 0.6rem !important;
+    .dropdown-item {
+      padding: 0.2rem 0.6rem !important;
+    }
+  }
+
+  .advanced-options {
+    .caret {
+      color: ${(props) => props.theme.textLink};
+      fill: ${(props) => props.theme.textLink};
     }
   }
 `;
 
-export default StyledWrapper;
+export default StyledWrapper;

packages/bruno-app/src/components/Sidebar/NewRequest/index.js

@@ -2,6 +2,7 @@ import React, { useRef, useEffect, useCallback, forwardRef, useState } from 'rea
 import { useFormik } from 'formik';
 import * as Yup from 'yup';
 import toast from 'react-hot-toast';
+import path from 'utils/common/path';
 import { uuid } from 'utils/common';
 import Modal from 'components/Modal';
 import { useDispatch } from 'react-redux';
@@ -10,10 +11,14 @@ import { newHttpRequest } from 'providers/ReduxStore/slices/collections/actions'
 import { addTab } from 'providers/ReduxStore/slices/tabs';
 import HttpMethodSelector from 'components/RequestPane/QueryUrl/HttpMethodSelector';
 import { getDefaultRequestPaneTab } from 'utils/collections';
-import StyledWrapper from './StyledWrapper';
 import { getRequestFromCurlCommand } from 'utils/curl';
+import { IconArrowBackUp, IconCaretDown, IconEdit } from '@tabler/icons';
+import { sanitizeName, validateName, validateNameError } from 'utils/common/regex';
 import Dropdown from 'components/Dropdown';
-import { IconCaretDown } from '@tabler/icons';
+import PathDisplay from 'components/PathDisplay';
+import Portal from 'components/Portal';
+import Help from 'components/Help';
+import StyledWrapper from './StyledWrapper';
 
 const NewRequest = ({ collection, item, isEphemeral, onClose }) => {
   const dispatch = useDispatch();
@@ -22,10 +27,14 @@ const NewRequest = ({ collection, item, isEphemeral, onClose }) => {
     brunoConfig: { presets: collectionPresets = {} }
   } = collection;
   const [curlRequestTypeDetected, setCurlRequestTypeDetected] = useState(null);
+  const [showFilesystemName, toggleShowFilesystemName] = useState(false);
 
   const dropdownTippyRef = useRef();
   const onDropdownCreate = (ref) => (dropdownTippyRef.current = ref);
 
+  const advancedDropdownTippyRef = useRef();
+  const onAdvancedDropdownCreate = (ref) => (advancedDropdownTippyRef.current = ref);
+
   const Icon = forwardRef((props, ref) => {
     return (
       <div ref={ref} className="flex items-center justify-end auth-type-label select-none">
@@ -55,6 +64,8 @@ const NewRequest = ({ collection, item, isEphemeral, onClose }) => {
     setCurlRequestTypeDetected(type);
   };
 
+  const [isEditing, toggleEditing] = useState(false);
+
   const getRequestType = (collectionPresets) => {
     if (!collectionPresets || !collectionPresets.requestType) {
       return 'http-request';
@@ -79,6 +90,7 @@ const NewRequest = ({ collection, item, isEphemeral, onClose }) => {
     enableReinitialize: true,
     initialValues: {
       requestName: '',
+      filename: '',
       requestType: getRequestType(collectionPresets),
       requestUrl: collectionPresets.requestUrl || '',
       requestMethod: 'GET',
@@ -88,15 +100,18 @@ const NewRequest = ({ collection, item, isEphemeral, onClose }) => {
       requestName: Yup.string()
         .trim()
         .min(1, 'must be at least 1 character')
-        .required('name is required')
-        .test({
-          name: 'requestName',
-          message: `The request names - collection and folder is reserved in bruno`,
-          test: (value) => {
-            const trimmedValue = value ? value.trim().toLowerCase() : '';
-            return !['collection', 'folder'].includes(trimmedValue);
-          }
-        }),
+        .max(255, 'must be 255 characters or less')
+        .required('name is required'),
+      filename: Yup.string()
+        .trim()
+        .min(1, 'must be at least 1 character')
+        .max(255, 'must be 255 characters or less')
+        .required('filename is required')
+        .test('is-valid-filename', function(value) {
+          const isValid = validateName(value);
+          return isValid ? true : this.createError({ message: validateNameError(value) });
+        })
+        .test('not-reserved', `The file names "collection" and "folder" are reserved in bruno`, value => !['collection', 'folder'].includes(value)),
       curlCommand: Yup.string().when('requestType', {
         is: (requestType) => requestType === 'from-curl',
         then: Yup.string()
@@ -116,6 +131,7 @@ const NewRequest = ({ collection, item, isEphemeral, onClose }) => {
           newEphemeralHttpRequest({
             uid: uid,
             requestName: values.requestName,
+            filename: values.filename,
             requestType: values.requestType,
             requestUrl: values.requestUrl,
             requestMethod: values.requestMethod,
@@ -138,6 +154,7 @@ const NewRequest = ({ collection, item, isEphemeral, onClose }) => {
         dispatch(
           newHttpRequest({
             requestName: values.requestName,
+            filename: values.filename,
             requestType: curlRequestTypeDetected,
             requestUrl: request.url,
             requestMethod: request.method,
@@ -157,6 +174,7 @@ const NewRequest = ({ collection, item, isEphemeral, onClose }) => {
         dispatch(
           newHttpRequest({
             requestName: values.requestName,
+            filename: values.filename,
             requestType: values.requestType,
             requestUrl: values.requestUrl,
             requestMethod: values.requestMethod,
@@ -218,160 +236,279 @@ const NewRequest = ({ collection, item, isEphemeral, onClose }) => {
     }
   };
 
+  const AdvancedOptions = forwardRef((props, ref) => {
+    return (
+      <div ref={ref} className="flex mr-2 text-link cursor-pointer items-center">
+        <button
+          className="btn-advanced"
+          type="button"
+        >
+          Options
+        </button>
+        <IconCaretDown className="caret ml-1" size={14} strokeWidth={2}/>
+      </div>
+    );
+  });
+
   return (
-    <StyledWrapper>
-      <Modal size="md" title="New Request" confirmText="Create" handleConfirm={onSubmit} handleCancel={onClose}>
-        <form className="bruno-form" onSubmit={e => e.preventDefault()}>
-          <div>
-            <label htmlFor="requestName" className="block font-semibold">
-              Type
-            </label>
-
-            <div className="flex items-center mt-2">
-              <input
-                id="http-request"
-                className="cursor-pointer"
-                type="radio"
-                name="requestType"
-                onChange={formik.handleChange}
-                value="http-request"
-                checked={formik.values.requestType === 'http-request'}
-              />
-              <label htmlFor="http-request" className="ml-1 cursor-pointer select-none">
-                HTTP
+    <Portal>
+      <StyledWrapper>
+        <Modal size="md" title="New Request" hideFooter handleCancel={onClose}>
+          <form
+            className="bruno-form"
+            onSubmit={formik.handleSubmit}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter') {
+                e.preventDefault();
+                formik.handleSubmit();
+              }
+            }}
+          >
+            <div>
+              <label htmlFor="requestName" className="block font-semibold">
+                Type
               </label>
 
-              <input
-                id="graphql-request"
-                className="ml-4 cursor-pointer"
-                type="radio"
-                name="requestType"
-                onChange={(event) => {
-                  formik.setFieldValue('requestMethod', 'POST');
-                  formik.handleChange(event);
-                }}
-                value="graphql-request"
-                checked={formik.values.requestType === 'graphql-request'}
-              />
-              <label htmlFor="graphql-request" className="ml-1 cursor-pointer select-none">
-                GraphQL
-              </label>
-
-              <input
-                id="from-curl"
-                className="cursor-pointer ml-auto"
-                type="radio"
-                name="requestType"
-                onChange={formik.handleChange}
-                value="from-curl"
-                checked={formik.values.requestType === 'from-curl'}
-              />
-
-              <label htmlFor="from-curl" className="ml-1 cursor-pointer select-none">
-                From cURL
-              </label>
-            </div>
-          </div>
-          <div className="mt-4">
-            <label htmlFor="requestName" className="block font-semibold">
-              Name
-            </label>
-            <input
-              id="request-name"
-              type="text"
-              name="requestName"
-              placeholder="Request Name"
-              ref={inputRef}
-              className="block textbox mt-2 w-full"
-              autoComplete="off"
-              autoCorrect="off"
-              autoCapitalize="off"
-              spellCheck="false"
-              onChange={formik.handleChange}
-              value={formik.values.requestName || ''}
-            />
-            {formik.touched.requestName && formik.errors.requestName ? (
-              <div className="text-red-500">{formik.errors.requestName}</div>
-            ) : null}
-          </div>
-          {formik.values.requestType !== 'from-curl' ? (
-            <>
-              <div className="mt-4">
-                <label htmlFor="request-url" className="block font-semibold">
-                  URL
+              <div className="flex items-center mt-2">
+                <input
+                  id="http-request"
+                  className="cursor-pointer"
+                  type="radio"
+                  name="requestType"
+                  onChange={formik.handleChange}
+                  value="http-request"
+                  checked={formik.values.requestType === 'http-request'}
+                />
+                <label htmlFor="http-request" className="ml-1 cursor-pointer select-none">
+                  HTTP
                 </label>
 
-                <div className="flex items-center mt-2 ">
-                  <div className="flex items-center h-full method-selector-container">
-                    <HttpMethodSelector
-                      method={formik.values.requestMethod}
-                      onMethodSelect={(val) => formik.setFieldValue('requestMethod', val)}
+                <input
+                  id="graphql-request"
+                  className="ml-4 cursor-pointer"
+                  type="radio"
+                  name="requestType"
+                  onChange={(event) => {
+                    formik.setFieldValue('requestMethod', 'POST');
+                    formik.handleChange(event);
+                  }}
+                  value="graphql-request"
+                  checked={formik.values.requestType === 'graphql-request'}
+                />
+                <label htmlFor="graphql-request" className="ml-1 cursor-pointer select-none">
+                  GraphQL
+                </label>
+
+                <input
+                  id="from-curl"
+                  className="cursor-pointer ml-auto"
+                  type="radio"
+                  name="requestType"
+                  onChange={formik.handleChange}
+                  value="from-curl"
+                  checked={formik.values.requestType === 'from-curl'}
+                />
+
+                <label htmlFor="from-curl" className="ml-1 cursor-pointer select-none">
+                  From cURL
+                </label>
+              </div>
+            </div>
+            <div className="mt-4">
+              <label htmlFor="requestName" className="block font-semibold">
+                Request Name
+              </label>
+              <input
+                id="request-name"
+                type="text"
+                name="requestName"
+                placeholder="Request Name"
+                ref={inputRef}
+                className="block textbox mt-2 w-full"
+                autoComplete="off"
+                autoCorrect="off"
+                autoCapitalize="off"
+                spellCheck="false"
+                onChange={e => {
+                  formik.setFieldValue('requestName', e.target.value);
+                  !isEditing && formik.setFieldValue('filename', sanitizeName(e.target.value));
+                }}
+                value={formik.values.requestName || ''}
+              />
+              {formik.touched.requestName && formik.errors.requestName ? (
+                <div className="text-red-500">{formik.errors.requestName}</div>
+              ) : null}
+            </div>
+            {showFilesystemName && (
+              <div className="mt-4">
+                <div className="flex items-center justify-between">
+                  <label htmlFor="filename" className="flex items-center font-semibold">
+                    File Name <small className='font-normal text-muted ml-1'>(on filesystem)</small>
+                    <Help width="300">
+                      <p>
+                        Bruno saves each request as a file in your collection's folder.
+                      </p>
+                      <p className="mt-2">
+                        You can choose a file name different from your request's name or one compatible with filesystem rules.
+                      </p>
+                    </Help>
+                  </label>
+                  {isEditing ? (
+                    <IconArrowBackUp 
+                      className="cursor-pointer opacity-50 hover:opacity-80" 
+                      size={16} 
+                      strokeWidth={1.5} 
+                      onClick={() => toggleEditing(false)} 
                     />
-                  </div>
-                  <div className="flex items-center flex-grow input-container h-full">
+                  ) : (
+                    <IconEdit
+                      className="cursor-pointer opacity-50 hover:opacity-80" 
+                      size={16} 
+                      strokeWidth={1.5} 
+                      onClick={() => toggleEditing(true)} 
+                    />
+                  )}
+                </div>
+                {isEditing ? (
+                  <div className='relative flex flex-row gap-1 items-center justify-between'>
                     <input
-                      id="request-url"
+                      id="file-name"
                       type="text"
-                      name="requestUrl"
-                      placeholder="Request URL"
-                      className="px-3 w-full "
+                      name="filename"
+                      placeholder="File Name"
+                      className={`!pr-10 block textbox mt-2 w-full`}
                       autoComplete="off"
                       autoCorrect="off"
                       autoCapitalize="off"
                       spellCheck="false"
                       onChange={formik.handleChange}
-                      value={formik.values.requestUrl || ''}
-                      onPaste={handlePaste}
+                      value={formik.values.filename || ''}
+                    />
+                    <span className='absolute right-2 top-4 flex justify-center items-center file-extension'>.bru</span>
+                  </div>
+                ) : (
+                  <div className='relative flex flex-row gap-1 items-center justify-between'>
+                    <PathDisplay
+                      collection={collection}
+                      dirName={path.relative(collection?.pathname, item?.pathname || collection?.pathname)}
+                      baseName={formik.values.filename? `${formik.values.filename}.bru` : ''}
                     />
                   </div>
-                </div>
-                {formik.touched.requestUrl && formik.errors.requestUrl ? (
-                  <div className="text-red-500">{formik.errors.requestUrl}</div>
+                )}
+                {formik.touched.filename && formik.errors.filename ? (
+                  <div className="text-red-500">{formik.errors.filename}</div>
                 ) : null}
               </div>
-            </>
-          ) : (
-            <div className="mt-4">
-              <div className="flex justify-between">
-                <label htmlFor="request-url" className="block font-semibold">
-                  cURL Command
-                </label>
-                <Dropdown className="dropdown" onCreate={onDropdownCreate} icon={<Icon />} placement="bottom-end">
-                  <div
-                    className="dropdown-item"
-                    onClick={() => {
-                      dropdownTippyRef.current.hide();
-                      curlRequestTypeChange('http-request');
-                    }}
-                  >
-                    HTTP
+            )}
+            {formik.values.requestType !== 'from-curl' ? (
+              <>
+                <div className="mt-4">
+                  <label htmlFor="request-url" className="block font-semibold">
+                    URL
+                  </label>
+                  <div className="flex items-center mt-2 ">
+                    <div className="flex items-center h-full method-selector-container">
+                      <HttpMethodSelector
+                        method={formik.values.requestMethod}
+                        onMethodSelect={(val) => formik.setFieldValue('requestMethod', val)}
+                      />
+                    </div>
+                    <div className="flex items-center flex-grow input-container h-full">
+                      <input
+                        id="request-url"
+                        type="text"
+                        name="requestUrl"
+                        placeholder="Request URL"
+                        className="px-3 w-full "
+                        autoComplete="off"
+                        autoCorrect="off"
+                        autoCapitalize="off"
+                        spellCheck="false"
+                        onChange={formik.handleChange}
+                        value={formik.values.requestUrl || ''}
+                        onPaste={handlePaste}
+                      />
+                    </div>
                   </div>
-                  <div
+                  {formik.touched.requestUrl && formik.errors.requestUrl ? (
+                    <div className="text-red-500">{formik.errors.requestUrl}</div>
+                  ) : null}
+                </div>
+              </>
+            ) : (
+              <div className="mt-4">
+                <div className="flex justify-between">
+                  <label htmlFor="request-url" className="block font-semibold">
+                    cURL Command
+                  </label>
+                  <Dropdown className="dropdown" onCreate={onDropdownCreate} icon={<Icon />} placement="bottom-end">
+                    <div
+                      className="dropdown-item"
+                      onClick={() => {
+                        dropdownTippyRef.current.hide();
+                        curlRequestTypeChange('http-request');
+                      }}
+                    >
+                      HTTP
+                    </div>
+                    <div
+                      className="dropdown-item"
+                      onClick={() => {
+                        dropdownTippyRef.current.hide();
+                        curlRequestTypeChange('graphql-request');
+                      }}
+                    >
+                      GraphQL
+                    </div>
+                  </Dropdown>
+                </div>
+                <textarea
+                  name="curlCommand"
+                  placeholder="Enter cURL request here.."
+                  className="block textbox w-full mt-4 curl-command"
+                  value={formik.values.curlCommand}
+                  onChange={handleCurlCommandChange}
+                ></textarea>
+                {formik.touched.curlCommand && formik.errors.curlCommand ? (
+                  <div className="text-red-500">{formik.errors.curlCommand}</div>
+                ) : null}
+              </div>
+            )}
+            <div className="flex justify-between items-center mt-8 bruno-modal-footer">
+              <div className='flex advanced-options'>
+                <Dropdown onCreate={onAdvancedDropdownCreate} icon={<AdvancedOptions />} placement="bottom-start">
+                  <div 
                     className="dropdown-item"
-                    onClick={() => {
-                      dropdownTippyRef.current.hide();
-                      curlRequestTypeChange('graphql-request');
+                    key="show-filesystem-name"
+                    onClick={(e) => {
+                      advancedDropdownTippyRef.current.hide();
+                      toggleShowFilesystemName(!showFilesystemName);
                     }}
                   >
-                    GraphQL
+                    {showFilesystemName ? 'Hide Filesystem Name' : 'Show Filesystem Name'}
                   </div>
                 </Dropdown>
               </div>
-              <textarea
-                name="curlCommand"
-                placeholder="Enter cURL request here.."
-                className="block textbox w-full mt-4 curl-command"
-                value={formik.values.curlCommand}
-                onChange={handleCurlCommandChange}
-              ></textarea>
-              {formik.touched.curlCommand && formik.errors.curlCommand ? (
-                <div className="text-red-500">{formik.errors.curlCommand}</div>
-              ) : null}
+              <div className='flex justify-end'>
+                <span className='mr-2'>
+                  <button type="button" onClick={onClose} className="btn btn-md btn-close">
+                    Cancel
+                  </button>
+                </span>
+                <span>
+                  <button
+                    type="submit"
+                    className="submit btn btn-md btn-secondary"
+                  >
+                    Create
+                  </button>
+                </span>
+              </div>
             </div>
-          )}
-        </form>
-      </Modal>
-    </StyledWrapper>
+          </form>
+        </Modal>
+      </StyledWrapper>
+    </Portal>
   );
 };
 

packages/bruno-app/src/components/ToggleSwitch/StyledWrapper.js

@@ -0,0 +1,91 @@
+import styled from 'styled-components';
+
+const switchSizes = {
+  '2xs': { width: 32, height: 16, buttonSize: 14 },
+  xs: { width: 40, height: 20, buttonSize: 18 },
+  s: { width: 44, height: 22, buttonSize: 20 },
+  m: { width: 50, height: 24, buttonSize: 22 }, // default size
+  l: { width: 56, height: 28, buttonSize: 26 },
+  xl: { width: 64, height: 32, buttonSize: 30 },
+  '2xl': { width: 72, height: 36, buttonSize: 34 }
+};
+
+const getSizeValues = (size = 'm') => switchSizes[size] || switchSizes.m;
+
+export const Switch = styled.div`
+  position: relative;
+  display: inline-block;
+  width: ${(props) => getSizeValues(props.size).width}px;
+  height: ${(props) => getSizeValues(props.size).height}px;
+  border-radius: ${(props) => getSizeValues(props.size).height}px;
+`;
+
+export const Checkbox = styled.input`
+  opacity: 0;
+  width: 0;
+  height: 0;
+
+  &:checked + label div {
+    background-color: ${(props) => props.theme.textLink};
+  }
+
+  &:checked + label div:before {
+    transform: translateX(${(props) => getSizeValues(props.size).width - getSizeValues(props.size).buttonSize - 2}px);
+  }
+`;
+
+export const Label = styled.label`
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  cursor: pointer;
+  background-color: ${(props) => props.theme.input.bg};
+  border-radius: 24px;
+
+  div {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: ${(props) => props.theme.colors.text.muted};
+    border-radius: 24px;
+    transition: transform 0.2s;
+  }
+`;
+
+export const Inner = styled.div`
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  right: 2px;
+  bottom: 2px;
+  background-color: #fafafa;
+  transition: 0.4s;
+  border-radius: ${(props) => getSizeValues(props.size).height - 2}px;
+`;
+
+export const SwitchButton = styled.div`
+  position: absolute;
+  height: ${(props) => getSizeValues(props.size).buttonSize}px;
+  width: ${(props) => getSizeValues(props.size).buttonSize}px;
+  left: 2px;
+  bottom: 2px;
+  background-color: white;
+  transition: 0.4s;
+  border-radius: 50%;
+
+  &:before {
+    content: '';
+    position: absolute;
+    height: ${(props) => getSizeValues(props.size).buttonSize - 2}px;
+    width: ${(props) => getSizeValues(props.size).buttonSize - 2}px;
+    background-color: white;
+    top: 2px;
+    left: 2px;
+    transition: 0.4s;
+    border-radius: 50%;
+  }
+`;

packages/bruno-app/src/components/ToggleSwitch/index.js

@@ -0,0 +1,15 @@
+import { Checkbox, Inner, Label, Switch, SwitchButton } from './StyledWrapper';
+
+const ToggleSwitch = ({ isOn, handleToggle, size = 'm', ...props }) => {
+  return (
+    <Switch size={size} {...props}>
+      <Checkbox checked={isOn} onChange={handleToggle} id="toggle-switch" type="checkbox" size={size} />
+      <Label htmlFor="toggle-switch">
+        <Inner size={size} />
+        <SwitchButton size={size} />
+      </Label>
+    </Switch>
+  );
+};
+
+export default ToggleSwitch;

packages/bruno-app/src/hooks/useOnClickOutside/index.js

@@ -5,7 +5,7 @@ const useOnClickOutside = (ref, handler) => {
   useEffect(
     () => {
       const listener = (event) => {
-        // Do nothing if clicking ref's element or descendent elements
+        // Do nothing if clicking ref's element or descendant elements
         if (!ref.current || ref.current.contains(event.target)) {
           return;
         }

packages/bruno-app/src/providers/ReduxStore/slices/app.js

@@ -122,6 +122,44 @@ export const deleteCookiesForDomain = (domain) => (dispatch, getState) => {
   });
 };
 
+export const deleteCookie = (domain, path, cookieKey) => (dispatch, getState) => {
+  return new Promise((resolve, reject) => {
+    const { ipcRenderer } = window;
+
+    ipcRenderer.invoke('renderer:delete-cookie', domain, path, cookieKey).then(resolve).catch(reject);
+  });
+};
+
+export const addCookie = (domain, cookie) => (dispatch, getState) => {
+  return new Promise((resolve, reject) => {
+    const { ipcRenderer } = window;
+
+    ipcRenderer.invoke('renderer:add-cookie', domain, cookie).then(resolve).catch(reject);
+  });
+};
+
+export const modifyCookie = (domain, oldCookie, cookie) => (dispatch, getState) => {
+  return new Promise((resolve, reject) => {
+    const { ipcRenderer } = window;
+
+    ipcRenderer.invoke('renderer:modify-cookie', domain, oldCookie, cookie).then(resolve).catch(reject);
+  });
+};
+
+export const getParsedCookie = (cookieStr) => () => {
+  return new Promise((resolve, reject) => {
+    const { ipcRenderer } = window;
+    ipcRenderer.invoke('renderer:get-parsed-cookie', cookieStr).then(resolve).catch(reject);
+  });
+};
+
+export const createCookieString = (cookieObj) => () => {
+  return new Promise((resolve, reject) => {
+    const { ipcRenderer } = window;
+    ipcRenderer.invoke('renderer:create-cookie-string', cookieObj).then(resolve).catch(reject);
+  });
+};
+
 export const completeQuitFlow = () => (dispatch, getState) => {
   const { ipcRenderer } = window;
   return ipcRenderer.invoke('main:complete-quit-flow');

packages/bruno-app/src/providers/ReduxStore/slices/collections/actions.js

@@ -3,8 +3,9 @@ import cloneDeep from 'lodash/cloneDeep';
 import filter from 'lodash/filter';
 import find from 'lodash/find';
 import get from 'lodash/get';
+import set from 'lodash/set';
 import trim from 'lodash/trim';
-import path from 'path';
+import path from 'utils/common/path';
 import { insertTaskIntoQueue } from 'providers/ReduxStore/slices/app';
 import toast from 'react-hot-toast';
 import {
@@ -21,7 +22,6 @@ import {
   transformRequestToSaveToFilesystem
 } from 'utils/collections';
 import { uuid, waitForNextTick } from 'utils/common';
-import { PATH_SEPARATOR, getDirectoryName, isWindowsPath } from 'utils/common/platform';
 import { cancelNetworkRequest, sendNetworkRequest } from 'utils/network';
 import { callIpc } from 'utils/common/ipc';
 
@@ -45,9 +45,9 @@ import { closeAllCollectionTabs } from 'providers/ReduxStore/slices/tabs';
 import { resolveRequestFilename } from 'utils/common/platform';
 import { parsePathParams, parseQueryParams, splitOnFirst } from 'utils/url/index';
 import { sendCollectionOauth2Request as _sendCollectionOauth2Request } from 'utils/network/index';
-import slash from 'utils/common/slash';
 import { getGlobalEnvironmentVariables } from 'utils/collections/index';
 import { findCollectionByPathname, findEnvironmentInCollectionByName } from 'utils/collections/index';
+import { sanitizeName } from 'utils/common/regex';
 
 export const renameCollection = (newName, collectionUid) => (dispatch, getState) => {
   const state = getState();
@@ -343,7 +343,7 @@ export const runCollectionFolder = (collectionUid, folderUid, recursive, delay)
   });
 };
 
-export const newFolder = (folderName, collectionUid, itemUid) => (dispatch, getState) => {
+export const newFolder = (folderName, directoryName, collectionUid, itemUid) => (dispatch, getState) => {
   const state = getState();
   const collection = findCollectionByUid(state.collections.collections, collectionUid);
 
@@ -355,14 +355,14 @@ export const newFolder = (folderName, collectionUid, itemUid) => (dispatch, getS
     if (!itemUid) {
       const folderWithSameNameExists = find(
         collection.items,
-        (i) => i.type === 'folder' && trim(i.name) === trim(folderName)
+        (i) => i.type === 'folder' && trim(i.filename) === trim(directoryName)
       );
       if (!folderWithSameNameExists) {
-        const fullName = `${collection.pathname}${PATH_SEPARATOR}${folderName}`;
+        const fullName = path.join(collection.pathname, directoryName);
         const { ipcRenderer } = window;
 
         ipcRenderer
-          .invoke('renderer:new-folder', fullName)
+          .invoke('renderer:new-folder', fullName, folderName)
           .then(() => resolve())
           .catch((error) => reject(error));
       } else {
@@ -373,14 +373,14 @@ export const newFolder = (folderName, collectionUid, itemUid) => (dispatch, getS
       if (currentItem) {
         const folderWithSameNameExists = find(
           currentItem.items,
-          (i) => i.type === 'folder' && trim(i.name) === trim(folderName)
+          (i) => i.type === 'folder' && trim(i.filename) === trim(directoryName)
         );
         if (!folderWithSameNameExists) {
-          const fullName = `${currentItem.pathname}${PATH_SEPARATOR}${folderName}`;
+          const fullName = path.join(currentItem.pathname, directoryName);
           const { ipcRenderer } = window;
 
           ipcRenderer
-            .invoke('renderer:new-folder', fullName)
+            .invoke('renderer:new-folder', fullName, folderName)
             .then(() => resolve())
             .catch((error) => reject(error));
         } else {
@@ -393,8 +393,7 @@ export const newFolder = (folderName, collectionUid, itemUid) => (dispatch, getS
   });
 };
 
-// rename item
-export const renameItem = (newName, itemUid, collectionUid) => (dispatch, getState) => {
+export const renameItem = ({ newName, newFilename, itemUid, collectionUid }) => (dispatch, getState) => {
   const state = getState();
   const collection = findCollectionByUid(state.collections.collections, collectionUid);
 
@@ -409,22 +408,53 @@ export const renameItem = (newName, itemUid, collectionUid) => (dispatch, getSta
       return reject(new Error('Unable to locate item'));
     }
 
-    const dirname = getDirectoryName(item.pathname);
-
-    let newPathname = '';
-    if (item.type === 'folder') {
-      newPathname = path.join(dirname, trim(newName));
-    } else {
-      const filename = resolveRequestFilename(newName);
-      newPathname = path.join(dirname, filename);
-    }
     const { ipcRenderer } = window;
 
-    ipcRenderer.invoke('renderer:rename-item', slash(item.pathname), newPathname, newName).then(resolve).catch(reject);
+    const renameName = async () => {
+      return ipcRenderer.invoke('renderer:rename-item-name', { itemPath: item.pathname, newName })
+        .catch((err) => {
+          toast.error('Failed to rename the item name');
+          console.error(err);
+          throw new Error('Failed to rename the item name');
+        });
+    };
+
+    const renameFile = async () => {
+      const dirname = path.dirname(item.pathname);
+      let newPath = '';
+      if (item.type === 'folder') {
+        newPath = path.join(dirname, trim(newFilename));
+      } else {
+        const filename = resolveRequestFilename(newFilename);
+        newPath = path.join(dirname, filename);
+      }
+
+      return ipcRenderer.invoke('renderer:rename-item-filename', { oldPath: item.pathname, newPath, newName, newFilename })
+        .catch((err) => {
+          toast.error('Failed to rename the file');
+          console.error(err);
+          throw new Error('Failed to rename the file');
+        });
+    };
+
+    let renameOperation = null;
+    if (newName) renameOperation = renameName;
+    if (newFilename) renameOperation = renameFile;
+
+    if (!renameOperation) {
+      resolve();
+    }
+    
+    renameOperation()
+      .then(() => {
+        toast.success('Item renamed successfully');
+        resolve();
+      })
+      .catch((err) => reject(err));
   });
 };
 
-export const cloneItem = (newName, itemUid, collectionUid) => (dispatch, getState) => {
+export const cloneItem = (newName, newFilename, itemUid, collectionUid) => (dispatch, getState) => {
   const state = getState();
   const collection = findCollectionByUid(state.collections.collections, collectionUid);
 
@@ -443,36 +473,41 @@ export const cloneItem = (newName, itemUid, collectionUid) => (dispatch, getStat
 
       const folderWithSameNameExists = find(
         parentFolder.items,
-        (i) => i.type === 'folder' && trim(i.name) === trim(newName)
+        (i) => i.type === 'folder' && trim(i?.filename) === trim(newFilename)
       );
 
       if (folderWithSameNameExists) {
         return reject(new Error('Duplicate folder names under same parent folder are not allowed'));
       }
 
-      const collectionPath = `${parentFolder.pathname}${PATH_SEPARATOR}${newName}`;
+      set(item, 'name', newName);
+      set(item, 'filename', newFilename);
+      set(item, 'root.meta.name', newName);
+
+      const collectionPath = path.join(parentFolder.pathname, newFilename);
       ipcRenderer.invoke('renderer:clone-folder', item, collectionPath).then(resolve).catch(reject);
       return;
     }
 
     const parentItem = findParentItemInCollection(collectionCopy, itemUid);
-    const filename = resolveRequestFilename(newName);
+    const filename = resolveRequestFilename(newFilename);
     const itemToSave = refreshUidsInItem(transformRequestToSaveToFilesystem(item));
-    itemToSave.name = trim(newName);
+    set(itemToSave, 'name', trim(newName));
+    set(itemToSave, 'filename', trim(filename));
     if (!parentItem) {
       const reqWithSameNameExists = find(
         collection.items,
         (i) => i.type !== 'folder' && trim(i.filename) === trim(filename)
       );
       if (!reqWithSameNameExists) {
-        const fullName = `${collection.pathname}${PATH_SEPARATOR}${filename}`;
+        const fullPathname = path.join(collection.pathname, filename);
         const { ipcRenderer } = window;
         const requestItems = filter(collection.items, (i) => i.type !== 'folder');
         itemToSave.seq = requestItems ? requestItems.length + 1 : 1;
 
         itemSchema
           .validate(itemToSave)
-          .then(() => ipcRenderer.invoke('renderer:new-request', fullName, itemToSave))
+          .then(() => ipcRenderer.invoke('renderer:new-request', fullPathname, itemToSave))
           .then(resolve)
           .catch(reject);
 
@@ -481,7 +516,7 @@ export const cloneItem = (newName, itemUid, collectionUid) => (dispatch, getStat
             uid: uuid(),
             type: 'OPEN_REQUEST',
             collectionUid,
-            itemPathname: fullName
+            itemPathname: fullPathname
           })
         );
       } else {
@@ -493,8 +528,8 @@ export const cloneItem = (newName, itemUid, collectionUid) => (dispatch, getStat
         (i) => i.type !== 'folder' && trim(i.filename) === trim(filename)
       );
       if (!reqWithSameNameExists) {
-        const dirname = getDirectoryName(item.pathname);
-        const fullName = isWindowsPath(item.pathname) ? path.win32.join(dirname, filename) : path.join(dirname, filename);
+        const dirname = path.dirname(item.pathname);
+        const fullName = path.join(dirname, filename);
         const { ipcRenderer } = window;
         const requestItems = filter(parentItem.items, (i) => i.type !== 'folder');
         itemToSave.seq = requestItems ? requestItems.length + 1 : 1;
@@ -719,7 +754,7 @@ export const moveItemToRootOfCollection = (collectionUid, draggedItemUid) => (di
 };
 
 export const newHttpRequest = (params) => (dispatch, getState) => {
-  const { requestName, requestType, requestUrl, requestMethod, collectionUid, itemUid, headers, body, auth } = params;
+  const { requestName, filename, requestType, requestUrl, requestMethod, collectionUid, itemUid, headers, body, auth } = params;
 
   return new Promise((resolve, reject) => {
     const state = getState();
@@ -747,6 +782,7 @@ export const newHttpRequest = (params) => (dispatch, getState) => {
       uid: uuid(),
       type: requestType,
       name: requestName,
+      filename,
       request: {
         method: requestMethod,
         url: requestUrl,
@@ -763,52 +799,26 @@ export const newHttpRequest = (params) => (dispatch, getState) => {
           file: null
         },
         auth: auth ?? {
-          mode: 'none'
+          mode: 'inherit'
         }
       }
     };
 
     // itemUid is null when we are creating a new request at the root level
-    const filename = resolveRequestFilename(requestName);
+    const resolvedFilename = resolveRequestFilename(filename);
     if (!itemUid) {
       const reqWithSameNameExists = find(
         collection.items,
-        (i) => i.type !== 'folder' && trim(i.filename) === trim(filename)
+        (i) => i.type !== 'folder' && trim(i.filename) === trim(resolvedFilename)
       );
       const requestItems = filter(collection.items, (i) => i.type !== 'folder');
       item.seq = requestItems.length + 1;
 
       if (!reqWithSameNameExists) {
-        const fullName = `${collection.pathname}${PATH_SEPARATOR}${filename}`;
+        const fullName = path.join(collection.pathname, resolvedFilename);
         const { ipcRenderer } = window;
 
-        ipcRenderer.invoke('renderer:new-request', fullName, item).then(resolve).catch(reject);
-        // task middleware will track this and open the new request in a new tab once request is created
-        dispatch(
-          insertTaskIntoQueue({
-            uid: uuid(),
-            type: 'OPEN_REQUEST',
-            collectionUid,
-            itemPathname: fullName
-          })
-        );
-      } else {
-        return reject(new Error('Duplicate request names are not allowed under the same folder'));
-      }
-    } else {
-      const currentItem = findItemInCollection(collection, itemUid);
-      if (currentItem) {
-        const reqWithSameNameExists = find(
-          currentItem.items,
-          (i) => i.type !== 'folder' && trim(i.filename) === trim(filename)
-        );
-        const requestItems = filter(currentItem.items, (i) => i.type !== 'folder');
-        item.seq = requestItems.length + 1;
-        if (!reqWithSameNameExists) {
-          const fullName = `${currentItem.pathname}${PATH_SEPARATOR}${filename}`;
-          const { ipcRenderer } = window;
-
-          ipcRenderer.invoke('renderer:new-request', fullName, item).then(resolve).catch(reject);
+        ipcRenderer.invoke('renderer:new-request', fullName, item).then(() => {
           // task middleware will track this and open the new request in a new tab once request is created
           dispatch(
             insertTaskIntoQueue({
@@ -818,6 +828,35 @@ export const newHttpRequest = (params) => (dispatch, getState) => {
               itemPathname: fullName
             })
           );
+          resolve();
+        }).catch(reject);
+      } else {
+        return reject(new Error('Duplicate request names are not allowed under the same folder'));
+      }
+    } else {
+      const currentItem = findItemInCollection(collection, itemUid);
+      if (currentItem) {
+        const reqWithSameNameExists = find(
+          currentItem.items,
+          (i) => i.type !== 'folder' && trim(i.filename) === trim(resolvedFilename)
+        );
+        const requestItems = filter(currentItem.items, (i) => i.type !== 'folder');
+        item.seq = requestItems.length + 1;
+        if (!reqWithSameNameExists) {
+          const fullName = path.join(currentItem.pathname, resolvedFilename);
+          const { ipcRenderer } = window;
+          ipcRenderer.invoke('renderer:new-request', fullName, item).then(() => {
+            // task middleware will track this and open the new request in a new tab once request is created
+            dispatch(
+              insertTaskIntoQueue({
+                uid: uuid(),
+                type: 'OPEN_REQUEST',
+                collectionUid,
+                itemPathname: fullName
+              })
+            );
+            resolve();
+          }).catch(reject);
         } else {
           return reject(new Error('Duplicate request names are not allowed under the same folder'));
         }
@@ -859,16 +898,18 @@ export const importEnvironment = (name, variables, collectionUid) => (dispatch,
     if (!collection) {
       return reject(new Error('Collection not found'));
     }
+    
+    const sanitizedName = sanitizeName(name);
 
     ipcRenderer
-      .invoke('renderer:create-environment', collection.pathname, name, variables)
+      .invoke('renderer:create-environment', collection.pathname, sanitizedName, variables)
       .then(
         dispatch(
           updateLastAction({
             collectionUid,
             lastAction: {
               type: 'ADD_ENVIRONMENT',
-              payload: name
+              payload: sanitizedName
             }
           })
         )
@@ -888,18 +929,20 @@ export const copyEnvironment = (name, baseEnvUid, collectionUid) => (dispatch, g
 
     const baseEnv = findEnvironmentInCollection(collection, baseEnvUid);
     if (!collection) {
-      return reject(new Error('Environmnent not found'));
+      return reject(new Error('Environment not found'));
     }
 
+    const sanitizedName = sanitizeName(name); 
+
     ipcRenderer
-      .invoke('renderer:create-environment', collection.pathname, name, baseEnv.variables)
+      .invoke('renderer:create-environment', collection.pathname, sanitizedName, baseEnv.variables)
       .then(
         dispatch(
           updateLastAction({
             collectionUid,
             lastAction: {
               type: 'ADD_ENVIRONMENT',
-              payload: name
+              payload: sanitizedName
             }
           })
         )
@@ -923,12 +966,13 @@ export const renameEnvironment = (newName, environmentUid, collectionUid) => (di
       return reject(new Error('Environment not found'));
     }
 
+    const sanitizedName = sanitizeName(newName);
     const oldName = environment.name;
-    environment.name = newName;
+    environment.name = sanitizedName;
 
     environmentSchema
       .validate(environment)
-      .then(() => ipcRenderer.invoke('renderer:rename-environment', collection.pathname, oldName, newName))
+      .then(() => ipcRenderer.invoke('renderer:rename-environment', collection.pathname, oldName, sanitizedName))
       .then(resolve)
       .catch(reject);
   });
@@ -1100,7 +1144,7 @@ export const createCollection = (collectionName, collectionFolderName, collectio
       .catch(reject);
   });
 };
-export const cloneCollection = (collectionName, collectionFolderName, collectionLocation, perviousPath) => () => {
+export const cloneCollection = (collectionName, collectionFolderName, collectionLocation, previousPath) => () => {
   const { ipcRenderer } = window;
 
   return ipcRenderer.invoke(
@@ -1108,7 +1152,7 @@ export const cloneCollection = (collectionName, collectionFolderName, collection
     collectionName,
     collectionFolderName,
     collectionLocation,
-    perviousPath
+    previousPath
   );
 };
 export const openCollection = () => () => {

packages/bruno-app/src/providers/ReduxStore/slices/collections/index.js

@@ -16,10 +16,10 @@ import {
   isItemARequest
 } from 'utils/collections';
 import { parsePathParams, parseQueryParams, splitOnFirst, stringifyQueryParams } from 'utils/url';
-import { getDirectoryName, getSubdirectoriesFromRoot, PATH_SEPARATOR } from 'utils/common/platform';
+import { getSubdirectoriesFromRoot } from 'utils/common/platform';
 import toast from 'react-hot-toast';
 import mime from 'mime-types';
-import path from 'node:path';
+import path from 'utils/common/path';
 
 const initialState = {
   collections: [],
@@ -90,15 +90,16 @@ export const collectionsSlice = createSlice({
     },
     sortCollections: (state, action) => {
       state.collectionSortOrder = action.payload.order;
+      const collator = new Intl.Collator(undefined, {numeric: true, sensitivity: 'base'});
       switch (action.payload.order) {
         case 'default':
           state.collections = state.collections.sort((a, b) => a.importedAt - b.importedAt);
           break;
         case 'alphabetical':
-          state.collections = state.collections.sort((a, b) => a.name.localeCompare(b.name));
+          state.collections = state.collections.sort((a, b) => collator.compare(a.name, b.name));
           break;
         case 'reverseAlphabetical':
-          state.collections = state.collections.sort((a, b) => b.name.localeCompare(a.name));
+          state.collections = state.collections.sort((a, b) => -collator.compare(a.name, b.name));
           break;
       }
     },
@@ -1654,25 +1655,29 @@ export const collectionsSlice = createSlice({
       }
 
       if (isFolderRoot) {
-        const folderPath = getDirectoryName(file.meta.pathname);
+        const folderPath = path.dirname(file.meta.pathname);
         const folderItem = findItemInCollectionByPathname(collection, folderPath);
         if (folderItem) {
+          if (file?.data?.meta?.name) {
+            folderItem.name = file?.data?.meta?.name;
+          }
           folderItem.root = file.data;
         }
         return;
       }
 
       if (collection) {
-        const dirname = getDirectoryName(file.meta.pathname);
+        const dirname = path.dirname(file.meta.pathname);
         const subDirectories = getSubdirectoriesFromRoot(collection.pathname, dirname);
         let currentPath = collection.pathname;
         let currentSubItems = collection.items;
         for (const directoryName of subDirectories) {
-          let childItem = currentSubItems.find((f) => f.type === 'folder' && f.name === directoryName);
+          let childItem = currentSubItems.find((f) => f.type === 'folder' && f.filename === directoryName);
+          currentPath = path.join(currentPath, directoryName);
           if (!childItem) {
             childItem = {
               uid: uuid(),
-              pathname: `${currentPath}${PATH_SEPARATOR}${directoryName}`,
+              pathname: currentPath,
               name: directoryName,
               collapsed: true,
               type: 'folder',
@@ -1680,8 +1685,6 @@ export const collectionsSlice = createSlice({
             };
             currentSubItems.push(childItem);
           }
-
-          currentPath = `${currentPath}${PATH_SEPARATOR}${directoryName}`;
           currentSubItems = childItem.items;
         }
 
@@ -1731,20 +1734,20 @@ export const collectionsSlice = createSlice({
         let currentPath = collection.pathname;
         let currentSubItems = collection.items;
         for (const directoryName of subDirectories) {
-          let childItem = currentSubItems.find((f) => f.type === 'folder' && f.name === directoryName);
+          let childItem = currentSubItems.find((f) => f.type === 'folder' && f.filename === directoryName);
+          currentPath = path.join(currentPath, directoryName);
           if (!childItem) {
             childItem = {
               uid: uuid(),
-              pathname: `${currentPath}${PATH_SEPARATOR}${directoryName}`,
-              name: directoryName,
+              pathname: currentPath,
+              name: dir?.meta?.name || directoryName,
+              filename: directoryName,
               collapsed: true,
               type: 'folder',
               items: []
             };
             currentSubItems.push(childItem);
           }
-
-          currentPath = `${currentPath}${PATH_SEPARATOR}${directoryName}`;
           currentSubItems = childItem.items;
         }
         addDepth(collection.items);
@@ -1752,11 +1755,25 @@ export const collectionsSlice = createSlice({
     },
     collectionChangeFileEvent: (state, action) => {
       const { file } = action.payload;
+      const isCollectionRoot = file.meta.collectionRoot ? true : false;
+      const isFolderRoot = file.meta.folderRoot ? true : false;
       const collection = findCollectionByUid(state.collections, file.meta.collectionUid);
+      if (isCollectionRoot) {
+        if (collection) {
+          collection.root = file.data;
+        }
+        return;
+      }
 
-      // check and update collection root
-      if (collection && file.meta.collectionRoot) {
-        collection.root = file.data;
+      if (isFolderRoot) {
+        const folderPath = path.dirname(file.meta.pathname);
+        const folderItem = findItemInCollectionByPathname(collection, folderPath);
+        if (folderItem) {
+          if (file?.data?.meta?.name) {
+            folderItem.name = file?.data?.meta?.name;
+          }
+          folderItem.root = file.data;
+        }
         return;
       }
 
@@ -1853,12 +1870,22 @@ export const collectionsSlice = createSlice({
       }
     },
     runRequestEvent: (state, action) => {
-      const { itemUid, collectionUid, type, requestUid } = action.payload;
+      const { itemUid, collectionUid, type, requestUid, hasError } = action.payload;
       const collection = findCollectionByUid(state.collections, collectionUid);
 
       if (collection) {
         const item = findItemInCollection(collection, itemUid);
         if (item) {
+          if (type === 'pre-request-script-execution') {
+            item.requestUid = requestUid;
+            item.preRequestScriptErrorMessage = action.payload.errorMessage;
+          }
+
+          if(type === 'post-response-script-execution') {
+            item.requestUid = requestUid;
+            item.postResponseScriptErrorMessage = action.payload.errorMessage;
+          }
+
           if (type === 'request-queued') {
             const { cancelTokenUid } = action.payload;
             item.requestUid = requestUid;

packages/bruno-app/src/styles/globals.css

@@ -145,7 +145,7 @@ body {
   font-kerning: none;
   text-rendering: optimizeSpeed;
   letter-spacing: normal;
-  font-family: Inter, sans-serif !important;
+  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
   overflow-x: hidden;
 }
 

packages/bruno-app/src/themes/dark.js

@@ -279,6 +279,12 @@ const darkTheme = {
 
   scrollbar: {
     color: 'rgb(52 51 49)'
+  },
+
+  infoTip: {
+    bg: '#1f1f1f',
+    border: '#333333',
+    boxShadow: '0 4px 12px rgba(0, 0, 0, 0.5)'
   }
 };
 

packages/bruno-app/src/themes/light.js

@@ -280,6 +280,12 @@ const lightTheme = {
 
   scrollbar: {
     color: 'rgb(152 151 149)'
+  },
+
+  infoTip: {
+    bg: 'white',
+    border: '#e0e0e0',
+    boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)'
   }
 };
 

packages/bruno-app/src/utils/codemirror/javascript-lint.js

@@ -19,6 +19,27 @@ if (!SERVER_RENDERED) {
       }
       return [];
     }
+    
+    // Set default options for Bruno
+    const defaultOptions = {
+      esversion: 11,
+      expr: true,
+      asi: true,
+      undef: true,
+      browser: true,
+      devel: true,
+      predef: {
+        'bru': false,
+        'req': false,
+        'res': false,
+        'test': false,
+        'expect': false
+      }
+    };
+    
+    // Merge provided options with defaults
+    options = Object.assign({}, defaultOptions, options);
+    
     if (!options.indent)
       // JSHint error.character actually is a column index, this fixes underlining on lines using tabs for indentation
       options.indent = 1; // JSHint default value is 4

packages/bruno-app/src/utils/collections/index.js

@@ -1,7 +1,6 @@
 import {cloneDeep, isEqual, sortBy, filter, map, isString, findIndex, find, each, get } from 'lodash';
 import { uuid } from 'utils/common';
-import path from 'path';
-import slash from 'utils/common/slash';
+import path from 'utils/common/path';
 
 const replaceTabsWithSpaces = (str, numSpaces = 2) => {
   if (!str || !str.length || !isString(str)) {
@@ -90,7 +89,7 @@ export const findCollectionByItemUid = (collections, itemUid) => {
 };
 
 export const findItemByPathname = (items = [], pathname) => {
-  return find(items, (i) => slash(i.pathname) === slash(pathname));
+  return find(items, (i) => i.pathname === pathname);
 };
 
 export const findItemInCollectionByPathname = (collection, pathname) => {
@@ -307,6 +306,7 @@ export const transformCollectionToSaveToExportAsFile = (collection, options = {}
         uid: si.uid,
         type: si.type,
         name: si.name,
+        filename: si.filename,
         seq: si.seq
       };
 

packages/bruno-app/src/utils/common/index.js

@@ -1,5 +1,6 @@
 import { customAlphabet } from 'nanoid';
 import xmlFormat from 'xml-formatter';
+import { format as jsoncFormat, applyEdits as jsoncApplyEdits } from 'jsonc-parser';
 
 // a customized version of nanoid without using _ and -
 export const uuid = () => {
@@ -26,6 +27,13 @@ export const waitForNextTick = () => {
   });
 };
 
+export const prettifyJson = (doc) => {
+  return jsoncApplyEdits(
+    doc,
+    jsoncFormat(doc, null, {insertSpaces: true, tabSize: 2})
+  );
+}
+
 export const safeParseJSON = (str) => {
   if (!str || !str.length || typeof str !== 'string') {
     return str;
@@ -176,3 +184,9 @@ export const generateUidBasedOnHash = (str) => {
 };
 
 export const stringifyIfNot = v => typeof v === 'string' ? v : String(v);
+
+export const getEncoding = (headers) => {
+  // Parse the charset from content type: https://stackoverflow.com/a/33192813
+  const charsetMatch = /charset=([^()<>@,;:"/[\]?.=\s]*)/i.exec(headers?.['content-type'] || '');
+  return charsetMatch?.[1];
+}

packages/bruno-app/src/utils/common/path.js

@@ -0,0 +1,12 @@
+import platform from 'platform';
+import path from 'path';
+
+const isWindowsOS = () => {
+    const os = platform.os;
+    const osFamily = os.family.toLowerCase();
+    return osFamily.includes('windows');
+};
+
+const brunoPath = isWindowsOS() ? path.win32 : path.posix;
+
+export default brunoPath;

packages/bruno-app/src/utils/common/platform.js

@@ -1,7 +1,6 @@
 import trim from 'lodash/trim';
-import path from 'path';
-import slash from './slash';
 import platform from 'platform';
+import path from './path';
 
 export const isElectron = () => {
   if (!window) {
@@ -16,35 +15,11 @@ export const resolveRequestFilename = (name) => {
 };
 
 export const getSubdirectoriesFromRoot = (rootPath, pathname) => {
-  // convert to unix style path
-  pathname = slash(pathname);
-  rootPath = slash(rootPath);
 
   const relativePath = path.relative(rootPath, pathname);
   return relativePath ? relativePath.split(path.sep) : [];
 };
 
-
-export const isWindowsPath = (pathname) => {
-
-  if (!isWindowsOS()) {
-    return false;
-  }
-
-  // Check for Windows drive letter format (e.g., "C:\")
-  const hasDriveLetter = /^[a-zA-Z]:\\/.test(pathname);
-  
-  // Check for UNC path format (e.g., "\\server\share") a.k.a. network path || WSL path
-  const isUNCPath = pathname.startsWith('\\\\');
-
-  return hasDriveLetter || isUNCPath;
-};
-
-
-export const getDirectoryName = (pathname) => {
-  return isWindowsPath(pathname) ? path.win32.dirname(pathname) : path.dirname(pathname);
-};
-
 export const isWindowsOS = () => {
   const os = platform.os;
   const osFamily = os.family.toLowerCase();
@@ -59,8 +34,6 @@ export const isMacOS = () => {
   return osFamily.includes('os x');
 };
 
-export const PATH_SEPARATOR = isWindowsOS() ? '\\' : '/';
-
 export const getAppInstallDate = () => {
   let dateString = localStorage.getItem('bruno.installedOn');
 

packages/bruno-app/src/utils/common/regex.js

@@ -1 +1,56 @@
+const invalidCharacters = /[<>:"/\\|?*\x00-\x1F]/g; // replace invalid characters with hyphens
+const reservedDeviceNames = /^(CON|PRN|AUX|NUL|COM[0-9]|LPT[0-9])$/i;
+const firstCharacter = /^[^.\s\-\<>:"/\\|?*\x00-\x1F]/; // no dot, space, or hyphen at start
+const middleCharacters = /^[^<>:"/\\|?*\x00-\x1F]*$/;   // no invalid characters
+const lastCharacter = /^[^.\s\-\<>:"/\\|?*\x00-\x1F]/;  // no dot or space at end, hyphen allowed
+
 export const variableNameRegex = /^[\w-.]*$/;
+
+export const sanitizeName = (name) => {
+    name = name
+        .replace(invalidCharacters, '-')       // replace invalid characters with hyphens
+        .replace(/^[.\s-]+/, '')               // remove leading dots, hyphens and spaces
+        .replace(/[.\s]+$/, '');               // remove trailing dots and spaces (keep trailing hyphens)
+    return name;
+};
+
+export const validateName = (name) => {
+    if (!name) return false;
+    if (name.length > 255) return false;          // max name length
+
+    if (reservedDeviceNames.test(name)) return false; // windows reserved names
+
+    return (
+        firstCharacter.test(name) &&
+        middleCharacters.test(name) &&
+        lastCharacter.test(name)
+    );
+};
+
+export const validateNameError = (name) => {
+    if (!name) return "Name cannot be empty.";
+
+    if (name.length > 255) {
+        return "Name cannot exceed 255 characters.";
+    }
+
+    if (reservedDeviceNames.test(name)) {
+        return "Name cannot be a reserved device name.";
+    }
+
+    if (!firstCharacter.test(name[0])) {
+        return "Invalid first character.";
+    }
+
+    for (let i = 1; i < name.length - 1; i++) {
+        if (!middleCharacters.test(name[i])) {
+            return `Invalid character '${name[i]}' at position ${i + 1}.`;
+        }
+    }
+
+    if (!lastCharacter.test(name[name.length - 1])) {
+        return "Invalid last character.";
+    }
+
+    return '';
+};

packages/bruno-app/src/utils/common/regex.spec.js

@@ -0,0 +1,166 @@
+const { describe, it, expect } = require('@jest/globals');
+
+import { sanitizeName, validateName } from './regex';
+
+describe('regex validators', () => {
+  describe('sanitize name', () => {
+    it('should remove invalid characters', () => {
+      expect(sanitizeName('hello world')).toBe('hello world');
+      expect(sanitizeName('hello-world')).toBe('hello-world');
+      expect(sanitizeName('hello_world')).toBe('hello_world');
+      expect(sanitizeName('hello_world-')).toBe('hello_world-');
+      expect(sanitizeName('hello_world-123')).toBe('hello_world-123');
+      expect(sanitizeName('hello_world-123!@#$%^&*()')).toBe('hello_world-123!@#$%^&-()');
+      expect(sanitizeName('hello_world?')).toBe('hello_world-');
+      expect(sanitizeName('foo/bar/')).toBe('foo-bar-');
+      expect(sanitizeName('foo\\bar\\')).toBe('foo-bar-');
+    });
+
+    it('should remove leading hyphens', () => {
+      expect(sanitizeName('-foo')).toBe('foo');
+      expect(sanitizeName('---foo')).toBe('foo');
+      expect(sanitizeName('-foo-bar')).toBe('foo-bar');
+    });
+
+    it('should remove trailing periods', () => {
+      expect(sanitizeName('.file')).toBe('file');
+      expect(sanitizeName('.file.')).toBe('file');
+      expect(sanitizeName('file.')).toBe('file');
+      expect(sanitizeName('file.name.')).toBe('file.name');
+      expect(sanitizeName('hello world.')).toBe('hello world');
+    });
+
+    it('should handle filenames with only invalid characters', () => {
+      expect(sanitizeName('<>:"/\\|?*')).toBe('');
+      expect(sanitizeName('::::')).toBe('');
+    });
+
+    it('should handle filenames with a mix of valid and invalid characters', () => {
+      expect(sanitizeName('test<>:"/\\|?*')).toBe('test---------');
+      expect(sanitizeName('foo<bar>')).toBe('foo-bar-');
+    });
+
+    it('should remove control characters', () => {
+      expect(sanitizeName('foo\x00bar')).toBe('foo-bar');
+      expect(sanitizeName('file\x1Fname')).toBe('file-name');
+    });
+
+    it('should return an empty string if the name is empty or consists only of invalid characters', () => {
+      expect(sanitizeName('')).toBe('');
+      expect(sanitizeName('<>:"/\\|?*')).toBe('');
+    });
+
+    it('should handle filenames with multiple consecutive invalid characters', () => {
+      expect(sanitizeName('foo<<bar')).toBe('foo--bar');
+      expect(sanitizeName('test||name')).toBe('test--name');
+    });
+
+    it('should handle names with spaces only', () => {
+      expect(sanitizeName('     ')).toBe('');
+    });
+
+    it('should handle names with leading/trailing spaces', () => {
+      expect(sanitizeName('  foo bar  ')).toBe('foo bar');
+    });
+
+    it('should preserve valid non-ASCII characters', () => {
+      expect(sanitizeName('brunó')).toBe('brunó');
+      expect(sanitizeName('文件')).toBe('文件');
+      expect(sanitizeName('brunfais')).toBe('brunfais');
+      expect(sanitizeName('brunai')).toBe('brunai');
+      expect(sanitizeName('brunsборка')).toBe('brunsборка');
+      expect(sanitizeName('brunпривет')).toBe('brunпривет');
+      expect(sanitizeName('🐶')).toBe('🐶');
+      expect(sanitizeName('brunfais🐶')).toBe('brunfais🐶');
+      expect(sanitizeName('file-🐶-bruno')).toBe('file-🐶-bruno');
+      expect(sanitizeName('helló')).toBe('helló');
+    });
+
+    it('should preserve case sensitivity', () => {
+      expect(sanitizeName('FileName')).toBe('FileName');
+      expect(sanitizeName('fileNAME')).toBe('fileNAME');
+    });
+
+    it('should handle filenames with multiple consecutive periods (only remove trailing)', () => {
+      expect(sanitizeName('file.name...')).toBe('file.name');
+      expect(sanitizeName('...file')).toBe('file');
+      expect(sanitizeName('file.name...  ')).toBe('file.name');
+      expect(sanitizeName('  ...file')).toBe('file');
+      expect(sanitizeName('  ...file   ')).toBe('file');
+      expect(sanitizeName('  ...file....   ')).toBe('file');
+    });
+
+    it('should handle very long filenames', () => {
+      const longName = 'a'.repeat(250) + '.txt';
+      expect(sanitizeName(longName)).toBe(longName);
+    });
+
+    it('should handle names with leading/trailing invalid characters', () => {
+      expect(sanitizeName('-foo/bar-')).toBe('foo-bar-');
+      expect(sanitizeName('/foo\\bar/')).toBe('foo-bar-');
+    });
+
+    it('should handle different language unicode characters', () => {
+      expect(sanitizeName('你好世界!?@#$%^&*()')).toBe('你好世界!-@#$%^&-()');
+      expect(sanitizeName('こんにちは世界!?@#$%^&*()')).toBe('こんにちは世界!-@#$%^&-()');
+      expect(sanitizeName('안녕하세요 세계!?@#$%^&*()')).toBe('안녕하세요 세계!-@#$%^&-()');
+      expect(sanitizeName('مرحبا بالعالم!?@#$%^&*()')).toBe('مرحبا بالعالم!-@#$%^&-()');
+      expect(sanitizeName('Здравствуй мир!?@#$%^&*()')).toBe('Здравствуй мир!-@#$%^&-()');
+      expect(sanitizeName('नमस्ते दुनिया!?@#$%^&*()')).toBe('नमस्ते दुनिया!-@#$%^&-()');
+      expect(sanitizeName('สวัสดีชาวโลก!?@#$%^&*()')).toBe('สวัสดีชาวโลก!-@#$%^&-()');
+      expect(sanitizeName('γειά σου κόσμος!?@#$%^&*()')).toBe('γειά σου κόσμος!-@#$%^&-()');
+    });
+    
+  });
+});
+
+describe('sanitizeName and validateName', () => {
+  it('should sanitize and then validate valid names', () => {
+    const validNames = [
+      'valid_filename.txt',
+      '  valid name ',
+      '   valid-name   ',
+      'valid<>name.txt',
+      'file/with?invalid*chars'
+    ];
+
+    validNames.forEach(name => {
+      const sanitized = sanitizeName(name);
+      expect(validateName(sanitized)).toBe(true);
+    });
+  });
+
+  it('should sanitize and then validate names with reserved device names', () => {
+    const reservedNames = ['CON', 'PRN', 'AUX', 'NUL', 'COM1', 'LPT2'];
+    
+    reservedNames.forEach(name => {
+      const sanitized = sanitizeName(name);
+      expect(validateName(sanitized)).toBe(false);
+    });
+  });
+
+  it('should sanitize invalid names to empty strings', () => {
+    const invalidNames = [
+      '  <>:"/\\|?*  ',
+      '   ...   ',
+      '    ',
+    ];
+
+    invalidNames.forEach(name => {
+      const sanitized = sanitizeName(name);
+      expect(validateName(sanitized)).toBe(false);
+    });
+  });
+
+  it('should return false for reserved device names with leading/trailing spaces', () => {
+    const mixedNames = [
+      'AUX   ',
+      '   COM1   '
+    ];
+
+    mixedNames.forEach(name => {
+      const sanitized = sanitizeName(name);
+      expect(validateName(sanitized)).toBe(false);
+    });
+  });
+});

packages/bruno-app/src/utils/common/slash.js

@@ -1,20 +0,0 @@
-/**
- * MIT License
- *
- * Copyright (c) Sindre Sorhus <sindresorhus@gmail.com> (https://sindresorhus.com)
- * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
- * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
- */
-
-const slash = (path) => {
-  const isExtendedLengthPath = /^\\\\\?\\/.test(path);
-
-  if (isExtendedLengthPath) {
-    return path;
-  }
-
-  return path.replace(/\\/g, '/');
-};
-
-export default slash;

packages/bruno-app/src/utils/curl/curl-to-json.js

@@ -9,7 +9,6 @@
 import parseCurlCommand from './parse-curl';
 import * as querystring from 'query-string';
 import * as jsesc from 'jsesc';
-import * as path from 'path';
 
 function getContentType(headers = {}) {
   const contentType = Object.keys(headers).find((key) => key.toLowerCase() === 'content-type');

packages/bruno-app/src/utils/exporters/postman-collection.js

@@ -11,7 +11,8 @@ import { deleteSecretsInEnvs, deleteUidsInEnvs, deleteUidsInItems } from '../col
  */
 export const transformUrl = (url, params) => {
   if (typeof url !== 'string' || !url.trim()) {
-    throw new Error("Invalid URL input");
+    url = "";
+    console.error("Invalid URL input:", url);
   }
 
   const urlRegexPatterns = {

packages/bruno-app/src/utils/importers/common.js

@@ -62,7 +62,6 @@ export const updateUidsInCollection = (_collection) => {
 export const transformItemsInCollection = (collection) => {
   const transformItems = (items = []) => {
     each(items, (item) => {
-      item.name = normalizeFileName(item.name);
 
       if (['http', 'graphql'].includes(item.type)) {
         item.type = `${item.type}-request`;

packages/bruno-app/src/utils/importers/openapi-collection.js

@@ -31,7 +31,7 @@ const readFile = (files) => {
 };
 
 const ensureUrl = (url) => {
-  // emoving multiple slashes after the protocol if it exists, or after the beginning of the string otherwise
+  // removing multiple slashes after the protocol if it exists, or after the beginning of the string otherwise
   return url.replace(/([^:])\/{2,}/g, '$1/');
 };
 

packages/bruno-app/src/utils/importers/postman-collection.js

@@ -531,7 +531,9 @@ const parsePostmanCollection = (str, options) => {
 
       let v2Schemas = [
         'https://schema.getpostman.com/json/collection/v2.0.0/collection.json',
-        'https://schema.getpostman.com/json/collection/v2.1.0/collection.json'
+        'https://schema.getpostman.com/json/collection/v2.1.0/collection.json',
+        'https://schema.postman.com/json/collection/v2.0.0/collection.json',
+        'https://schema.postman.com/json/collection/v2.1.0/collection.json'
       ];
 
       if (v2Schemas.includes(schema)) {

packages/bruno-cli/package.json

@@ -46,13 +46,13 @@
     "package.json"
   ],
   "dependencies": {
-    "@aws-sdk/credential-providers": "3.658.1",
+    "@aws-sdk/credential-providers": "3.750.0",
     "@usebruno/common": "0.1.0",
     "@usebruno/js": "0.12.0",
     "@usebruno/lang": "0.12.0",
     "@usebruno/vm2": "^3.9.13",
     "aws4-axios": "^3.3.0",
-    "axios": "1.7.7",
+    "axios": "^1.8.3",
     "axios-ntlm": "^1.4.2",
     "chai": "^4.3.7",
     "chalk": "^3.0.0",