style: update font-family for improved typography consistency

Fix #2315

.github/ISSUE_TEMPLATE/BugReport.yaml

@@ -6,26 +6,58 @@ body:
     attributes:
       value: |
         Thanks for taking the time to fill out this bug report!
+
+        Before submitting, please make sure you've searched existing issues:
+        👉 [Search existing issues](https://github.com/usebruno/bruno/issues?q=is%3Aissue)
+
   - type: checkboxes
     attributes:
       label: 'I have checked the following:'
       options:
-        - label: I use the newest version of bruno.
-          required: true
-        - label: I've searched existing issues and found nothing related to my issue.
+        - 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
+      description: Please specify the version of Bruno you are using in which the issue occurs.
+      placeholder: 1.38.1
+    validations:
+      required: true
+
+  - type: input
+    attributes:
+      label: Operating System
+      description: Information about the operating system the issue occurs on.
+      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.
+      description: A clear and concise description of the bug and how it's effecting your work along with steps to reproduce. 
     validations:
       required: true
+
   - type: textarea
     attributes:
       label: .bru file to reproduce the bug
-      description: Attach your .bru file here that can reqroduce the problem.
+      description: Attach your .bru file here that can reproduce the problem.
     validations:
       required: false
+
   - type: textarea
     attributes:
       label: Screenshots/Live demo link

.github/ISSUE_TEMPLATE/FeatureRequest.yaml

@@ -8,13 +8,23 @@ body:
       options:
         - label: I've searched existing issues and found nothing related to my issue.
           required: true
+  - type: checkboxes
+    attributes:
+      label: 'This feature'
+      options:
+        - label: blocks me from using Bruno 
+          required: false
+        - label: would improve my quality of life in Bruno 
+          required: false
+        - label: is something I've never seen an API client do before
+          required: false
   - type: markdown
     attributes:
       value: |
         Suggest an idea for this project.
   - type: textarea
     attributes:
-      label: Describe the feature you want to add
+      label: Describe the feature you want to add, and how it would change your usage of Bruno 
       description: A clear and concise description of the feature you want to be added.
     validations:
       required: true
@@ -23,4 +33,4 @@ body:
       label: Mockups or Images of the feature
       description: Add some images to support your feature.
     validations:
-      required: true
+      required: false

.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

@@ -1,6 +1,6 @@
 {
   "name": "@usebruno/app",
-  "version": "0.3.0",
+  "version": "1.39.0",
   "private": true,
   "scripts": {
     "dev": "rsbuild dev",
@@ -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",
@@ -69,6 +72,7 @@
     "react-redux": "^7.2.9",
     "react-tooltip": "^5.5.2",
     "sass": "^1.46.0",
+    "semver": "^7.7.1",
     "strip-json-comments": "^5.0.1",
     "styled-components": "^5.3.3",
     "system": "^2.0.1",

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/Docs/StyledWrapper.js

@@ -1,11 +1,7 @@
 import styled from 'styled-components';
 
 const StyledWrapper = styled.div`
-  div.CodeMirror {
-    .CodeMirror-scroll {
-      padding-bottom: 0px;
-    }
-  }
+
   .editing-mode {
     cursor: pointer;
   }

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

@@ -1,10 +1,21 @@
-import React from 'react';
+import React from "react";
 import { getTotalRequestCountInCollection } from 'utils/collections/';
-import { IconFolder, IconFileOff, IconWorld, IconApi } 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">
       <div className="rounded-lg py-6">
@@ -42,15 +53,30 @@ const Info = ({ collection }) => {
             </div>
             <div className="ml-4">
               <div className="font-semibold text-sm">Requests</div>
-              <div className="mt-1 text-sm text-muted">
-                {totalRequestsInCollection} request{totalRequestsInCollection !== 1 ? 's' : ''} in collection
+              <div className="mt-1 text-sm text-muted font-mono">
+                {
+                  isCollectionLoading? `${totalItems - itemsLoadingCount} out of ${totalItems} requests in the collection loaded` : `${totalRequestsInCollection} request${totalRequestsInCollection !== 1 ? 's' : ''} in 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>
   );
 };
 
-export default Info;
+export default Info;

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

@@ -2,8 +2,15 @@ import React from 'react';
 import { flattenItems } from "utils/collections";
 import { IconAlertTriangle } from '@tabler/icons';
 import StyledWrapper from "./StyledWrapper";
+import { useDispatch, useSelector } from 'react-redux';
+import { isItemARequest, itemIsOpenedInTabs } from 'utils/tabs/index';
+import { getDefaultRequestPaneTab } from 'utils/collections/index';
+import { addTab, focusTab } from 'providers/ReduxStore/slices/tabs';
+import { hideHomePage } from 'providers/ReduxStore/slices/app';
 
 const RequestsNotLoaded = ({ collection }) => {
+  const dispatch = useDispatch();
+  const tabs = useSelector((state) => state.tabs.tabs);
   const flattenedItems = flattenItems(collection.items);
   const itemsFailedLoading = flattenedItems?.filter(item => item?.partial && !item?.loading);
 
@@ -11,6 +18,29 @@ const RequestsNotLoaded = ({ collection }) => {
     return null;
   }
 
+  const handleRequestClick = (item) => e => {
+    e.preventDefault();
+    if (isItemARequest(item)) {
+      dispatch(hideHomePage());
+      if (itemIsOpenedInTabs(item, tabs)) {
+        dispatch(
+          focusTab({
+            uid: item.uid
+          })
+        );
+        return;
+      }
+      dispatch(
+        addTab({
+          uid: item.uid,
+          collectionUid: collection.uid,
+          requestPaneTab: getDefaultRequestPaneTab(item)
+        })
+      );
+      return;
+    }
+  }
+
   return (
     <StyledWrapper className="w-full card my-2">
       <div className="flex items-center gap-2 px-3 py-2 title bg-yellow-50 dark:bg-yellow-900/20">
@@ -31,7 +61,7 @@ const RequestsNotLoaded = ({ collection }) => {
         <tbody>
           {flattenedItems?.map((item, index) => (
             item?.partial && !item?.loading ? (
-              <tr key={index}>
+              <tr key={index} className='cursor-pointer' onClick={handleRequestClick(item)}>
                 <td className="py-1.5 px-3">
                   {item?.pathname?.split(`${collection?.pathname}/`)?.[1]}
                 </td>

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/Notifications/index.js

@@ -3,6 +3,7 @@ import { useState } from 'react';
 import StyledWrapper from './StyleWrapper';
 import Modal from 'components/Modal/index';
 import { useEffect } from 'react';
+import { useApp } from 'providers/App';
 import {
   fetchNotifications,
   markAllNotificationsAsRead,
@@ -17,6 +18,7 @@ const PAGE_SIZE = 5;
 
 const Notifications = () => {
   const dispatch = useDispatch();
+  const { version } = useApp();
   const notifications = useSelector((state) => state.notifications.notifications);
 
   const [showNotificationsModal, setShowNotificationsModal] = useState(false);
@@ -29,7 +31,9 @@ const Notifications = () => {
   const unreadNotifications = notifications.filter((notification) => !notification.read);
 
   useEffect(() => {
-    dispatch(fetchNotifications());
+    dispatch(fetchNotifications({
+      currentVersion: version
+    }));
   }, []);
 
   useEffect(() => {
@@ -96,7 +100,9 @@ const Notifications = () => {
       <a
         className="relative cursor-pointer"
         onClick={() => {
-          dispatch(fetchNotifications());
+          dispatch(fetchNotifications({
+            currentVersion: version
+          }));
           setShowNotificationsModal(true);
         }}
         aria-label="Check all Notifications"
@@ -187,7 +193,7 @@ const Notifications = () => {
                   </div>
                   <iframe
                     src={`data:text/html,${getSanitizedDescription(selectedNotification?.description)}`}
-                    sandbox=""
+                    sandbox="allow-popups"
                     style={{ width: '100%', height: '100%' }}
                   ></iframe>
                 </div>

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/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/RequestTabPanel/RequestNotLoaded/index.js

@@ -21,18 +21,18 @@ const RequestNotLoaded = ({ collection, item }) => {
             <IconFile size={16} strokeWidth={1.5} className="text-gray-400" />
             File Info
           </div>
-          <div className='hr'/>
+          <div className='hr' />
 
           <div className='flex items-center mt-2'>
             <span className='w-12 mr-2 text-muted'>Name:</span>
             <div>{item?.name}</div>
           </div>
-          
+
           <div className='flex items-center mt-1'>
             <span className='w-12 mr-2 text-muted'>Path:</span>
             <div className='break-all'>{item?.pathname}</div>
           </div>
-          
+
           <div className='flex items-center mt-1 pb-4'>
             <span className='w-12 mr-2 text-muted'>Size:</span>
             <div>{item?.size?.toFixed?.(2)} MB</div>
@@ -67,7 +67,7 @@ const RequestNotLoaded = ({ collection, item }) => {
 
           {item?.loading && (
             <>
-              <div className='hr mt-4'/>
+              <div className='hr mt-4' />
               <div className='flex items-center gap-2 mt-4'>
                 <IconLoader2 className="animate-spin" size={16} strokeWidth={2} />
                 <span>Loading...</span>

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/Sidebar/index.js

@@ -5,6 +5,7 @@ import Preferences from 'components/Preferences';
 import Cookies from 'components/Cookies';
 import ToolHint from 'components/ToolHint';
 import GoldenEdition from './GoldenEdition';
+import { useApp } from 'providers/App';
 
 import { useState, useEffect } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
@@ -20,7 +21,7 @@ const Sidebar = () => {
   const leftSidebarWidth = useSelector((state) => state.app.leftSidebarWidth);
   const preferencesOpen = useSelector((state) => state.app.showPreferences);
   const [goldenEditionOpen, setGoldenEditionOpen] = useState(false);
-
+  const { version } = useApp();
   const [asideWidth, setAsideWidth] = useState(leftSidebarWidth);
   const [cookiesOpen, setCookiesOpen] = useState(false);
 
@@ -184,7 +185,7 @@ const Sidebar = () => {
                   Star
                 </GitHubButton> */}
               </div>
-              <div className="flex flex-grow items-center justify-end text-xs mr-2">v1.36.1</div>
+              <div className="flex flex-grow items-center justify-end text-xs mr-2">v{version}</div>
             </div>
           </div>
         </div>

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/App/index.js

@@ -6,11 +6,12 @@ import ConfirmAppClose from './ConfirmAppClose';
 import useIpcEvents from './useIpcEvents';
 import useTelemetry from './useTelemetry';
 import StyledWrapper from './StyledWrapper';
+import { version } from '../../../package.json';
 
 export const AppContext = React.createContext();
 
 export const AppProvider = (props) => {
-  useTelemetry();
+  useTelemetry({ version });
   useIpcEvents();
 
   const dispatch = useDispatch();
@@ -37,7 +38,7 @@ export const AppProvider = (props) => {
   }, []);
 
   return (
-    <AppContext.Provider {...props} value="appProvider">
+    <AppContext.Provider {...props} value={{ version }}>
       <StyledWrapper>
         <ConfirmAppClose />
         {props.children}
@@ -46,4 +47,12 @@ export const AppProvider = (props) => {
   );
 };
 
+export const useApp = () => {
+  const context = React.useContext(AppContext);
+  if (!context) {
+    throw new Error('useApp must be used within an AppProvider');
+  }
+  return context;
+};
+
 export default AppProvider;

packages/bruno-app/src/providers/App/useTelemetry.js

@@ -42,7 +42,7 @@ const getAnonymousTrackingId = () => {
   return id;
 };
 
-const trackStart = () => {
+const trackStart = (version) => {
   if (isPlaywrightTestRunning()) {
     return;
   }
@@ -58,16 +58,18 @@ const trackStart = () => {
     event: 'start',
     properties: {
       os: platformLib.os.family,
-      version: '1.38.1'
+      version: version
     }
   });
 };
 
-const useTelemetry = () => {
+const useTelemetry = ({ version }) => {
   useEffect(() => {
-    trackStart();
-    setInterval(trackStart, 24 * 60 * 60 * 1000);
-  }, []);
+    if (posthogApiKey && posthogApiKey.length) {
+      trackStart(version);
+      setInterval(trackStart, 24 * 60 * 60 * 1000);
+    }
+  }, [posthogApiKey]);
 };
 
 export default useTelemetry;

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: [],
@@ -59,7 +59,9 @@ export const collectionsSlice = createSlice({
     updateCollectionMountStatus: (state, action) => {
       const collection = findCollectionByUid(state.collections, action.payload.collectionUid);
       if (collection) {
-        collection.mountStatus = action.payload.mountStatus;
+        if (action.payload.mountStatus) {
+          collection.mountStatus = action.payload.mountStatus;
+        }
       }
     },
     setCollectionSecurityConfig: (state, action) => {
@@ -88,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;
       }
     },
@@ -1652,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',
@@ -1678,8 +1685,6 @@ export const collectionsSlice = createSlice({
             };
             currentSubItems.push(childItem);
           }
-
-          currentPath = `${currentPath}${PATH_SEPARATOR}${directoryName}`;
           currentSubItems = childItem.items;
         }
 
@@ -1729,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);
@@ -1750,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;
       }
 
@@ -1851,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/providers/ReduxStore/slices/notifications.js

@@ -1,7 +1,7 @@
 import toast from 'react-hot-toast';
 import { createSlice } from '@reduxjs/toolkit';
 import { getAppInstallDate } from 'utils/common/platform';
-
+import semver from 'semver';
 const getReadNotificationIds = () => {
   try {
     let readNotificationIdsString = window.localStorage.getItem('bruno.notifications.read');
@@ -27,6 +27,26 @@ const initialState = {
   readNotificationIds: getReadNotificationIds() || []
 };
 
+export const filterNotificationsByVersion = (notifications, currentVersion) => {
+  try {
+    if (!notifications) return [];
+
+    if (!currentVersion) return notifications;
+
+    return notifications.filter(notification => {
+      const { minVersion, maxVersion } = notification;
+      if (!minVersion && !maxVersion) return true;
+      if (!minVersion) return semver.lte(currentVersion, maxVersion);
+      if (!maxVersion) return semver.gte(currentVersion, minVersion);
+
+      return semver.gte(currentVersion, minVersion) && semver.lte(currentVersion, maxVersion);
+    });
+  } catch (error) {
+    console.error(error);
+    return [];
+  }
+};
+
 export const notificationSlice = createSlice({
   name: 'notifications',
   initialState,
@@ -86,13 +106,14 @@ export const notificationSlice = createSlice({
 export const { setNotifications, setFetchingStatus, markNotificationAsRead, markAllNotificationsAsRead } =
   notificationSlice.actions;
 
-export const fetchNotifications = () => (dispatch, getState) => {
+export const fetchNotifications = ({currentVersion}) => (dispatch, getState) => {
   return new Promise((resolve) => {
     const { ipcRenderer } = window;
     dispatch(setFetchingStatus(true));
     ipcRenderer
       .invoke('renderer:fetch-notifications')
       .then((notifications) => {
+        notifications = filterNotificationsByVersion(notifications, currentVersion);
         dispatch(setNotifications({ notifications }));
         dispatch(setFetchingStatus(false));
         resolve(notifications);

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

@@ -0,0 +1,133 @@
+const { filterNotificationsByVersion } = require('./notifications');
+
+describe('filterNotificationsByVersion - basic', () => {
+  it('should filter notifications by version', () => {
+    const notifications = [{ minVersion: '1.0.0', maxVersion: '1.1.0' }];
+    const currentVersion = '1.0.5';
+    const filteredNotifications = filterNotificationsByVersion(notifications, currentVersion);
+    expect(filteredNotifications).toEqual([{ minVersion: '1.0.0', maxVersion: '1.1.0' }]);
+  });
+
+  it('should gracefully handle no notifications', () => {
+    const notifications = [];
+    const currentVersion = '1.0.5';
+    const filteredNotifications = filterNotificationsByVersion(notifications, currentVersion);
+    expect(filteredNotifications).toEqual([]);
+  });
+
+  it('should gracefully handle notifications are undefined', () => {
+    const notifications = undefined;
+    const currentVersion = '1.0.5';
+    const filteredNotifications = filterNotificationsByVersion(notifications, currentVersion);
+    expect(filteredNotifications).toEqual([]);
+  });
+
+  it('should gracefully handle scenario when no current version is provided', () => {
+    const notifications = [{ minVersion: '1.0.0', maxVersion: '1.1.0' }];
+    const filteredNotifications = filterNotificationsByVersion(notifications);
+    expect(filteredNotifications).toEqual(notifications);
+  });
+
+  it('should gracefully handle scenario minVersion is undefined', () => {
+    const notifications = [{ minVersion: undefined, maxVersion: '1.1.0' }];
+    const currentVersion = '1.0.5';
+    const filteredNotifications = filterNotificationsByVersion(notifications, currentVersion);
+    expect(filteredNotifications).toEqual(notifications);
+  });
+
+  it('should gracefully handle scenario maxVersion is undefined', () => {
+    const notifications = [{ minVersion: '1.0.0', maxVersion: undefined }];
+    const currentVersion = '1.0.5';
+    const filteredNotifications = filterNotificationsByVersion(notifications, currentVersion);
+    expect(filteredNotifications).toEqual(notifications);
+  });
+
+  it('should gracefully handle scenario minVersion and maxVersion are undefined', () => {
+    const notifications = [{ minVersion: undefined, maxVersion: undefined }];
+    const currentVersion = '1.0.5';
+    const filteredNotifications = filterNotificationsByVersion(notifications, currentVersion);
+    expect(filteredNotifications).toEqual(notifications);
+  });
+});
+
+describe('filterNotificationsByVersion - semver', () => {
+  it('should filter out notifications outside version range', () => {
+    const notifications = [
+      { minVersion: '1.0.0', maxVersion: '1.1.0' },  // should be included
+      { minVersion: '2.0.0', maxVersion: '2.1.0' },  // should be filtered out
+      { minVersion: '0.5.0', maxVersion: '0.9.0' }   // should be filtered out
+    ];
+    const currentVersion = '1.0.5';
+    const filteredNotifications = filterNotificationsByVersion(notifications, currentVersion);
+    expect(filteredNotifications).toEqual([
+      { minVersion: '1.0.0', maxVersion: '1.1.0' }
+    ]);
+  });
+
+  it('should handle mixed valid and invalid version ranges', () => {
+    const notifications = [
+      { minVersion: '1.0.0', maxVersion: '2.0.0' },  // should be included
+      { minVersion: '3.0.0', maxVersion: '4.0.0' },  // should be filtered out
+      { minVersion: '1.5.0', maxVersion: '1.8.0' },  // should be included
+      { minVersion: '0.1.0', maxVersion: '0.5.0' }   // should be filtered out
+    ];
+    const currentVersion = '1.6.0';
+    const filteredNotifications = filterNotificationsByVersion(notifications, currentVersion);
+    expect(filteredNotifications).toEqual([
+      { minVersion: '1.0.0', maxVersion: '2.0.0' },
+      { minVersion: '1.5.0', maxVersion: '1.8.0' }
+    ]);
+  });
+
+  it('should handle edge cases of version ranges', () => {
+    const notifications = [
+      { minVersion: '1.0.0', maxVersion: '1.0.0' },  // should be included
+      { minVersion: '1.0.1', maxVersion: '2.0.0' },  // should be filtered out
+      { minVersion: '0.9.9', maxVersion: '1.0.0' }   // should be included
+    ];
+    const currentVersion = '1.0.0';
+    const filteredNotifications = filterNotificationsByVersion(notifications, currentVersion);
+    expect(filteredNotifications).toEqual([
+      { minVersion: '1.0.0', maxVersion: '1.0.0' },
+      { minVersion: '0.9.9', maxVersion: '1.0.0' }
+    ]);
+  });
+});
+
+describe('filterNotificationsByVersion - undefined version bounds', () => {
+  it('should include notifications when minVersion is undefined and current version is below maxVersion', () => {
+    const notifications = [
+      { minVersion: undefined, maxVersion: '2.0.0' }
+    ];
+    const currentVersion = '1.5.0';
+    const filteredNotifications = filterNotificationsByVersion(notifications, currentVersion);
+    expect(filteredNotifications).toEqual(notifications);
+  });
+
+  it('should exclude notifications when minVersion is undefined and current version is above maxVersion', () => {
+    const notifications = [
+      { minVersion: undefined, maxVersion: '2.0.0' }
+    ];
+    const currentVersion = '2.1.0';
+    const filteredNotifications = filterNotificationsByVersion(notifications, currentVersion);
+    expect(filteredNotifications).toEqual([]);
+  });
+
+  it('should include notifications when maxVersion is undefined and current version is above minVersion', () => {
+    const notifications = [
+      { minVersion: '1.0.0', maxVersion: undefined }
+    ];
+    const currentVersion = '2.0.0';
+    const filteredNotifications = filterNotificationsByVersion(notifications, currentVersion);
+    expect(filteredNotifications).toEqual(notifications);
+  });
+
+  it('should exclude notifications when maxVersion is undefined and current version is below minVersion', () => {
+    const notifications = [
+      { minVersion: '1.0.0', maxVersion: undefined }
+    ];
+    const currentVersion = '0.9.0';
+    const filteredNotifications = filterNotificationsByVersion(notifications, currentVersion);
+    expect(filteredNotifications).toEqual([]);
+  });
+});

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) => {
@@ -137,6 +136,20 @@ export const areItemsLoading = (folder) => {
   }, false);
 }
 
+export const getItemsLoadStats = (folder) => {
+  let loadingCount = 0;
+  let flattenedItems = flattenItems(folder.items);
+  flattenedItems?.forEach(i => {
+    if(i?.loading) {
+      loadingCount += 1;
+    }
+  });
+  return {
+    loading: loadingCount,
+    total: flattenedItems?.length
+  };
+}
+
 export const moveCollectionItem = (collection, draggedItem, targetItem) => {
   let draggedItemParent = findParentItemInCollection(collection, draggedItem.uid);
 
@@ -293,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');