update json request and response formatting logic

.coderabbit.yaml

@@ -1,66 +0,0 @@
-# yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json
-
-language: 'en-US'
-early_access: false
-tone_instructions: 'You are an expert code reviewer in TypeScript, JavaScript, NodeJS, and ElectronJS. You work in an enterprise software developer team, providing concise and clear code review advice. You only elaborate or provide detailed explanations when requested.'
-
-knowledge_base:
-  opt_out: false
-  code_guidelines:
-    enabled: true
-    filePatterns:
-      - '**/CODING_STANDARDS.md'
-
-reviews:
-  profile: 'chill'
-  request_changes_workflow: false
-  high_level_summary: true
-  poem: true
-  review_status: true
-  collapse_walkthrough: false
-  auto_review:
-    enabled: true
-    drafts: false
-    base_branches: ['main', 'release/*']
-  path_instructions:
-    - path: 'tests/**/**.*'
-      instructions: |
-        Review the following e2e test code written using the Playwright test library. Ensure that:
-        - Follow best practices for Playwright code and e2e automation
-        - Try to reduce usage of `page.waitForTimeout();` in code unless absolutely necessary and the locator cannot be found using existing `expect()` playwright calls
-        - Avoid using `page.pause()` in code
-        - Use locator variables for locators
-        - Avoid using test.only
-        - Use multiple assertions
-        - Promote the use of `test.step` as much as possible so the generated reports are easier to read
-        - Ensure that the `fixtures` like the collections are nested inside the `fixtures` folder 
-          
-
-
-          **Fixture Example***: Here's an example of possible fixture and test pair
-          ```
-          .
-          ├── fixtures
-          │   └── collection
-          │       ├── base.bru
-          │       ├── bruno.json
-          │       ├── collection.bru
-          │       ├── ws-test-request-with-headers.bru
-          │       ├── ws-test-request-with-subproto.bru
-          │       └── ws-test-request.bru
-          ├── connection.spec.ts # <- Depends on the collection in ./fixtures/collection
-          ├── headers.spec.ts
-          ├── persistence.spec.ts
-          ├── variable-interpolation
-          │   ├── fixtures
-          │   │   └── collection
-          │   │       ├── environments
-          │   │       ├── bruno.json
-          │   │       └── ws-interpolation-test.bru
-          │   ├── init-user-data
-          │   └── variable-interpolation.spec.ts # <- Depends on the collection in ./variable-interpolation/fixtures/collection
-          └── subproto.spec.ts
-          ```
-
-chat:
-  auto_reply: true

.github/PULL_REQUEST_TEMPLATE.md

@@ -1,10 +1,9 @@
-### Description
+# Description
 
 <!-- Explain here the changes your PR introduces and text to help us understand the context of this change. -->
 
-#### Contribution Checklist:
+### Contribution Checklist:
 
-- [ ] **I've used AI significantly to create this pull request**
 - [ ] **The pull request only addresses one issue or adds one feature.**
 - [ ] **The pull request does not introduce any breaking changes**
 - [ ] **I have added screenshots or gifs to help explain the change if applicable.**
@@ -13,6 +12,6 @@
 
 Note: Keeping the PR small and focused helps make it easier to review and merge. If you have multiple changes you want to make, please consider submitting them as separate pull requests.
 
-#### Publishing to New Package Managers
+### Publishing to New Package Managers
 
 Please see [here](../publishing.md) for more information.

.github/actions/common/setup-node-deps/action.yml

@@ -23,5 +23,4 @@ runs:
         npm run sandbox:bundle-libraries --workspace=packages/bruno-js
         npm run build:bruno-converters
         npm run build:bruno-requests
-        npm run build:schema-types
         npm run build:bruno-filestore

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

@@ -25,7 +25,7 @@ jobs:
         os: [ubuntu-latest, macos-latest]
     runs-on: ${{ matrix.os }}
     steps:
-      - uses: actions/checkout@v6
+      - uses: actions/checkout@v5
       - uses: actions/setup-node@v5
         with:
           node-version-file: '.nvmrc'
@@ -40,7 +40,7 @@ jobs:
         run: |
           cd packages/bruno-tests/collection
           npm install
-          bru run --env Prod --output junit.xml --format junit --sandbox developer
+          bru run --env Prod --output junit.xml --format junit
 
       - name: Publish Test Report
         uses: dorny/test-reporter@v2

.github/workflows/ssl-tests.yml

@@ -15,7 +15,7 @@ jobs:
       pull-requests: write
       contents: read
     steps:
-      - uses: actions/checkout@v6
+      - uses: actions/checkout@v5
 
       - name: Setup Node Dependencies
         uses: ./.github/actions/common/setup-node-deps
@@ -44,7 +44,7 @@ jobs:
       pull-requests: write
       contents: read
     steps:
-      - uses: actions/checkout@v6
+      - uses: actions/checkout@v5
 
       - name: Setup Node Dependencies
         uses: ./.github/actions/common/setup-node-deps
@@ -73,7 +73,7 @@ jobs:
       pull-requests: write
       contents: read
     steps:
-      - uses: actions/checkout@v6
+      - uses: actions/checkout@v5
       
       - name: Setup Node Dependencies
         uses: ./.github/actions/common/setup-node-deps

.github/workflows/tests.yml

@@ -13,7 +13,7 @@ jobs:
     permissions:
       contents: read
     steps:
-      - uses: actions/checkout@v6
+      - uses: actions/checkout@v5
       - uses: actions/setup-node@v5
         with:
           node-version-file: '.nvmrc'
@@ -30,7 +30,6 @@ jobs:
           npm run sandbox:bundle-libraries --workspace=packages/bruno-js
           npm run build --workspace=packages/bruno-converters
           npm run build --workspace=packages/bruno-requests
-          npm run build --workspace=packages/bruno-schema-types
           npm run build --workspace=packages/bruno-filestore
 
       - name: Lint Check
@@ -58,8 +57,6 @@ jobs:
         run: npm run test --workspace=packages/bruno-converters
       - name: Test Package bruno-electron
         run: npm run test --workspace=packages/bruno-electron
-      - name: Test Package bruno-requests
-        run: npm run test --workspace=packages/bruno-requests
 
   cli-test:
     name: CLI Tests
@@ -69,7 +66,7 @@ jobs:
       pull-requests: write
       contents: read
     steps:
-      - uses: actions/checkout@v6
+      - uses: actions/checkout@v5
       - uses: actions/setup-node@v5
         with:
           node-version-file: '.nvmrc'
@@ -86,7 +83,6 @@ jobs:
           npm run sandbox:bundle-libraries --workspace=packages/bruno-js
           npm run build --workspace=packages/bruno-converters
           npm run build --workspace=packages/bruno-requests
-          npm run build --workspace=packages/bruno-schema-types
           npm run build --workspace=packages/bruno-filestore
 
       - name: Run Local Testbench
@@ -98,7 +94,7 @@ jobs:
         run: |
           cd packages/bruno-tests/collection
           npm install
-          node ../../bruno-cli/bin/bru.js run --env Prod --output junit.xml --format junit --sandbox developer
+          node ../../bruno-cli/bin/bru.js run --env Prod --output junit.xml --format junit
 
       - name: Publish Test Report
         uses: EnricoMi/publish-unit-test-result-action@v2
@@ -112,7 +108,7 @@ jobs:
     timeout-minutes: 60
     runs-on: ubuntu-24.04
     steps:
-    - uses: actions/checkout@v6
+    - uses: actions/checkout@v5
     - uses: actions/setup-node@v5
       with:
         node-version: v22.11.x
@@ -138,13 +134,12 @@ jobs:
         npm run sandbox:bundle-libraries --workspace=packages/bruno-js
         npm run build:bruno-converters
         npm run build:bruno-requests
-        npm run build:schema-types
         npm run build:bruno-filestore
 
     - name: Run Playwright tests
       run: |
         xvfb-run npm run test:e2e
-    - uses: actions/upload-artifact@v6
+    - uses: actions/upload-artifact@v4
       if: ${{ !cancelled() }}
       with:
         name: playwright-report

.gitignore

@@ -48,17 +48,6 @@ yarn-error.log*
 bruno.iml
 .idea
 .vscode
-.cursor
 
 # Playwright
 /blob-report/
-
-# Development plan files
-CLAUDE.md
-*.plan.md
-
-# packages dist
-packages/bruno-filestore/dist
-packages/bruno-requests/dist
-packages/bruno-schema-types/dist
-packages/bruno-converters/dist

.nvmrc

@@ -1 +1 @@
-v22.12.0
+v22.11.0

CODING_STANDARDS.md

@@ -1,78 +0,0 @@
-# Bruno Coding Standards
-
-- No diffs unless an actual change is made, the code changes need to be as minimal as possible, avoid making un-necessary whitespace diffs. This is already handled by eslint but make sure you check your code changes before commiting and raising a PR.
-
-## General Style Rules
-
-- Use 2 spaces for indentation. No tabs, just spaces – keeps everything neat and uniform.
-
-- Stick to single quotes for strings. For JSX/TSX attributes, use double quotes (e.g., <svg xmlns="..." viewBox="...">) to follow React conventions.
-
-- Always add semicolons at the end of statements. It's like putting a period at the end of a sentence – clarity matters.
-
-- JSX is enabled, so feel free to use it where it makes sense.
-
-## Punctuation and Spacing
-
-- No trailing commas. Keep it clean, no extra commas hanging around.
-
-- Always use parentheses around parameters in arrow functions. Even for single params – consistency is key.
-
-- For multiline constructs, put opening braces on the same line, and ensure consistency. Minimum 2 elements for multiline.
-
-- No newlines inside function parentheses. Keep 'em tight.
-
-- Space before and after the arrow in arrow functions. `() => {}` is good.
-
-- No space between function name and parentheses. `func()` not `func ()`.
-
-- Semicolons go at the end of the line, not on a new line.
-
-- No strict max length – write readable code, not cramped lines.
-
-- Multiple expressions per line in JSX are fine – flexibility is nice.
-
-Remember, these rules are here to make our codebase harmonious. If something doesn't fit perfectly, let's chat about it. Happy coding! 🚀
-
-
-## Tests 
-
-- Add tests for any new functionality or meaningful changes. If code is added, removed, or significantly modified, corresponding tests should be updated or created.
- 
-- Prioritise high-value tests over maximum coverage. Focus on testing behaviour that is critical, complex, or likely to break—don’t chase coverage numbers for their own sake.
-
-- Write behaviour-driven tests, not implementation-driven ones. Tests should validate real expected output and observable behaviour, not internal details or mocked-out logic unless absolutely necessary.
-
-- Minimise mocking unless it meaningfully increases clarity or isolates external dependencies. Prefer real flows where practical; only mock external services, slow systems, or non-deterministic behaviour.
-
-- Keep tests readable and maintainable. Optimise for clarity over cleverness. Name tests descriptively, keep setup minimal, and avoid unnecessary abstraction.
-
-- Aim for tests that fail usefully. When a test fails, it should clearly indicate what behaviour broke and why.
-
-- Cover both the “happy path” and the realistically problematic paths. Validate expected success behaviour, but also validate error handling, edge cases, and degraded-mode behaviour when appropriate.
-
-- Ensure tests are deterministic and reproducible. No randomness, timing dependencies, or environment-specific assumptions without explicit control.
-
-- Avoid overfitting tests to current behaviour if future flexibility matters. Only assert what needs to be true, not incidental details.
-
-- Use consistent patterns and helper utilities where they improve clarity. Prefer shared test utilities over copy-pasted setup code, but only when it actually reduces complexity.
-
-- Tests should be fast enough to run continuously. Avoid long-running operations unless absolutely necessary; prefer lightweight fixtures and isolated units.
-
-
-## UI Specific instructions 
-
-### React
-
-- Use styled component's theme prop to manage CSS colors and not CSS variables when in the context of a styled component or any react component using the styled component 
-- Styled Components are used as wrappers to define both self and children components style, tailwind classes are used specifically for layout based styles. 
-- Styled Component CSS might also change layout but tailwind classes shouldn't define colors. 
-
-## Readability and Abstractions
-
-- Avoid abstractions unless the exact same code is being used in more than 3 places.
-- Names for functions need to be concise and descriptive.
-- Add in JSDoc comments to add more details to the abstractions if needed.
-- Follow functional programming but just enough to be readable, we don't need to go as deep as ADTs and Monads, we want to keep the code pipeline obvious and easy for everyone to read and contribute to.
-- Avoid single line abstractions where all that's being done is increasing the call stack with one additional function.
-- Add in meaningful comments instead of obvious ones where complex code flow is explained properly.

contributing.md

@@ -16,7 +16,6 @@
 | [日本語](docs/contributing/contributing_ja.md)
 | [हिंदी](docs/contributing/contributing_hi.md)
 | [Dutch](docs/contributing/contributing_nl.md)
-| [فارسی](docs/contributing/contributing_fa.md)
 
 ## Let's make Bruno better, together!!
 
@@ -70,13 +69,11 @@ npm run build:bruno-query
 npm run build:bruno-common
 npm run build:bruno-converters
 npm run build:bruno-requests
-npm run build:schema-types
 npm run build:bruno-filestore
 
 # bundle js sandbox libraries
 npm run sandbox:bundle-libraries --workspace=packages/bruno-js
 ```
-
 ##### Option 2
 
 ```bash
@@ -97,22 +94,18 @@ npm run dev:electron
 ```
 
 ##### Option 2
-
 ```bash
 # run electron and react app concurrently
 npm run dev
 ```
 
 #### Customize Electron `userData` path
-
 If `ELECTRON_USER_DATA_PATH` env-variable is present and its development mode, then `userData` path is modified accordingly.
 
 e.g.
-
 ```sh
 ELECTRON_USER_DATA_PATH=$(realpath ~/Desktop/bruno-test) npm run dev:electron
 ```
-
 This will create a `bruno-test` folder on your Desktop and use it as the `userData` path.
 
 ### Troubleshooting

docs/contributing/contributing_fa.md

@@ -1,92 +0,0 @@
-[English](../../contributing.md)
-
-## با هم، Bruno را بهتر می‌کنیم!
-
-خوشحالم که قصد دارید Bruno را بهبود ببخشید. در ادامه قوانین و راهنماها برای راه‌اندازی Bruno روی سیستم شما آورده شده است.
-
-### فناوری‌های استفاده‌شده
-
-به فارسی برونو Bruno با استفاده از Next.js و React ساخته شده است. همچنین از Electron برای بسته‌بندی نسخه دسکتاپ (که امکان مجموعه‌های محلی را فراهم می‌کند) استفاده می‌کنیم.
-
-کتابخانه‌هایی که استفاده می‌کنیم:
-
-- CSS - Tailwind استایل
-- Codemirror - ویرایشگر کد
-- Redux - مدیریت وضعیت
-- Tabler Icons - آیکون‌ها
-- formik - فرم‌ها
-- Yup اعتبارسنجی اسکیمـا
-- axios - کلاینت درخواست
-- chokidar - پایش‌گر سیستم فایل
-
-### پیش‌نیازها
-
-شما به [نود v20.x یا اخرین نسخه پایدار](https://nodejs.org/en/) و npm 8.x نیاز دارید. در این پروژه از فضای کاری npm (npm workspaces) استفاده می‌کنیم.
-
-### شروع به کدنویسی
-
-برای راه‌اندازی محیط توسعه محلی به فایل [مستندات توسعه](docs/development_fa.md) مراجعه کنید:
-
-### ارسال Pull Request
-
-1 - لطفاً Pull Requestها (PR) را کوتاه و متمرکز نگه دارید و تنها یک هدف مشخص را دنبال کنند. </br>
-2 - لطفاً از فرمت نام‌گذاری شاخه‌ها استفاده کنید:
-
-- feature/[name]: این شاخه باید شامل یک قابلیت مشخص باشد.
-  - feature/dark-mode : مثال
-- bugfix/[name]: این شاخه باید تنها شامل رفع یک باگ مشخص باشد.
-  - bugfix/bug-1 : مثال
-
-## توسعه
-
-به فارسی برونو یا Bruno به‌صورت یک اپلیکیشن «سنگین» توسعه داده می‌شود. برای اجرا باید ابتدا Next.js را در یک پنجره ترمینال اجرا کنید و سپس اپلیکیشن Electron را در پنجره ترمینال دیگری راه‌اندازی نمایید.
-
-### نیازمندی توسعه
-
-- NodeJS v18
-
-### اجرای محلی
-
-```bash
-# از ورژن NodeJS 18 استفاده کنید
-nvm use
-
-# نصب وابستگی‌ها
-npm i --legacy-peer-deps
-
-# ساخت مستندات GraphQL
-npm run build:graphql-docs
-
-# ساخت bruno-query
-npm run build:bruno-query
-
-# اجرای اپ Next (ترمینال 1)
-npm run dev:web
-
-# اجرای اپ Electron (ترمینال 2)
-npm run dev:electron
-```
-
-### عیب‌یابی
-
-ممکن است هنگام اجرای `npm install` خطای `Unsupported platform` ببینید. برای رفع این مشکل، پوشه `node_modules` و فایل `package-lock.json` را حذف کرده و سپس دوباره `npm install` را اجرا کنید. این کار معمولاً همه پکیج‌های لازم را نصب می‌کند.
-
-```shell
-# حذف پوشه node_modules در زیردایرکتوری‌ها
-find ./ -type d -name "node_modules" -print0 | while read -d $'\0' dir; do
-  rm -rf "$dir"
-done
-
-# حذف فایل package-lock.json در زیردایرکتوری‌ها
-find . -type f -name "package-lock.json" -delete
-```
-
-### تست‌ها
-
-```bash
-# اجرای تست‌های schema مربوط به bruno
-npm test --workspace=packages/bruno-schema
-
-# اجرای تست‌ها در همه فضاهای کاری (در صورت وجود)
-npm test --workspaces --if-present
-```

docs/publishing/publishing_fa.md

@@ -1,8 +0,0 @@
-[English](../../publishing.md)
-
-### انتشار Bruno در یک پکیج منیجر جدید
-
-اگرچه کد ما متن‌باز است و همه می‌توانند از آن استفاده کنند، لطفاً قبل از انتشار Bruno در مدیر بسته‌های جدید با ما تماس بگیرید. به عنوان سازنده Bruno، علامت تجاری `Bruno` را برای این پروژه دارم و مایلم توزیع آن را مدیریت کنم. اگر دوست دارید Bruno را در یک مدیر بسته جدید ببینید، لطفاً یک issue در گیت‌هاب ثبت کنید.
-
-اگرچه بیشتر قابلیت‌های ما رایگان و متن‌باز هستند (شامل REST و GraphQL Apis)،
-ما تلاش می‌کنیم بین اصول متن‌باز و توسعه پایدار تعادل مناسبی برقرار کنیم - https://github.com/usebruno/bruno/discussions/269

docs/readme/readme_ar.md

@@ -3,7 +3,7 @@
 
 ### برونو - بيئة تطوير مفتوحة المصدر لاستكشاف واختبار واجهات برمجة التطبيقات (APIs).
 
-[![GitHub version](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%2Fbruno)
+[![GitHub version](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%bruno)
 [![CI](https://github.com/usebruno/bruno/actions/workflows/tests.yml/badge.svg?branch=main)](https://github.com/usebruno/bruno/actions/workflows/tests.yml)
 [![Commit Activity](https://img.shields.io/github/commit-activity/m/usebruno/bruno)](https://github.com/usebruno/bruno/pulse)
 [![X](https://img.shields.io/twitter/follow/use_bruno?style=social&logo=x)](https://twitter.com/use_bruno)

docs/readme/readme_bn.md

@@ -3,7 +3,7 @@
 
 ### ব্রুনো - API অন্বেষণ এবং পরীক্ষা করার জন্য ওপেনসোর্স IDE।
 
-[![GitHub version](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%2Fbruno)
+[![GitHub version](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%bruno)
 [![CI](https://github.com/usebruno/bruno/actions/workflows/tests.yml/badge.svg?branch=main)](https://github.com/usebruno/bruno/actions/workflows/tests.yml)
 [![Commit Activity](https://img.shields.io/github/commit-activity/m/usebruno/bruno)](https://github.com/usebruno/bruno/pulse)
 [![X](https://img.shields.io/twitter/follow/use_bruno?style=social&logo=x)](https://twitter.com/use_bruno)

docs/readme/readme_cn.md

@@ -3,7 +3,7 @@
 
 ### Bruno - 开源 IDE，用于探索和测试 API。
 
-[![GitHub version](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%2Fbruno)
+[![GitHub version](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%bruno)
 [![CI](https://github.com/usebruno/bruno/actions/workflows/tests.yml/badge.svg?branch=main)](https://github.com/usebruno/bruno/actions/workflows/tests.yml)
 [![Commit Activity](https://img.shields.io/github/commit-activity/m/usebruno/bruno)](https://github.com/usebruno/bruno/pulse)
 [![X](https://img.shields.io/twitter/follow/use_bruno?style=social&logo=x)](https://twitter.com/use_bruno)

docs/readme/readme_de.md

@@ -3,7 +3,7 @@
 
 ### Bruno - Opensource IDE zum Erkunden und Testen von APIs.
 
-[![GitHub version](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%2Fbruno)
+[![GitHub version](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%bruno)
 [![CI](https://github.com/usebruno/bruno/actions/workflows/tests.yml/badge.svg?branch=main)](https://github.com/usebruno/bruno/actions/workflows/tests.yml)
 [![Commit Activity](https://img.shields.io/github/commit-activity/m/usebruno/bruno)](https://github.com/usebruno/bruno/pulse)
 [![X](https://img.shields.io/twitter/follow/use_bruno?style=social&logo=x)](https://twitter.com/use_bruno)

docs/readme/readme_es.md

@@ -3,7 +3,7 @@
 
 ### Bruno - IDE de código abierto para explorar y probar APIs.
 
-[![Versión en Github](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%2Fbruno)
+[![Versión en Github](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%bruno)
 [![CI](https://github.com/usebruno/bruno/actions/workflows/tests.yml/badge.svg?branch=main)](https://github.com/usebruno/bruno/actions/workflows/tests.yml)
 [![Actividad de Commits](https://img.shields.io/github/commit-activity/m/usebruno/bruno)](https://github.com/usebruno/bruno/pulse)
 [![X](https://img.shields.io/twitter/follow/use_bruno?style=social&logo=x)](https://twitter.com/use_bruno)

docs/readme/readme_fa.md

@@ -1,143 +0,0 @@
-<br />
-<img src="../../assets/images/logo-transparent.png" width="80"/>
-
-### برونو یا Bruno - محیط توسعه متن باز برای تست و توسعه API ها
-
-[![GitHub version](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%2Fbruno)
-[![CI](https://github.com/usebruno/bruno/actions/workflows/tests.yml/badge.svg?branch=main)](https://github.com/usebruno/bruno/actions/workflows/tests.yml)
-[![Commit Activity](https://img.shields.io/github/commit-activity/m/usebruno/bruno)](https://github.com/usebruno/bruno/pulse)
-[![X](https://img.shields.io/twitter/follow/use_bruno?style=social&logo=x)](https://twitter.com/use_bruno)
-[![Website](https://img.shields.io/badge/Website-Visit-blue)](https://www.usebruno.com)
-[![Download](https://img.shields.io/badge/Download-Latest-brightgreen)](https://www.usebruno.com/downloads)
-
-[English](../../readme.md)
-| [Українська](./readme_ua.md)
-| [Русский](./readme_ru.md)
-| [Türkçe](./readme_tr.md)
-| [Deutsch](./readme_de.md)
-| [Français](./readme_fr.md)
-| [Português (BR)](./readme_pt_br.md)
-| [한국어](./readme_kr.md)
-| [বাংলা](./readme_bn.md)
-| [Español](./readme_es.md)
-| **فارسی**
-| [Română](./readme_ro.md)
-| [Polski](./readme_pl.md)
-| [简体中文](./readme_cn.md)
-| [正體中文](./readme_zhtw.md)
-| [العربية](./readme_ar.md)
-| [日本語](./readme_ja.md)
-| [ქართული](./readme_ka.md)
-
-برونو یک کلاینت API جدید و نوآورانه است که هدفش تغییر وضعیت فعلی ابزارهایی مانند Postman و سایر ابزارهای مشابه است.
-
-برونو مجموعه‌های شما را مستقیماً در یک پوشه روی فایل‌سیستم شما ذخیره می‌کند. ما از یک زبان نشانه‌گذاری ساده به نام Bru برای ذخیره اطلاعات درخواست‌های API استفاده می‌کنیم.
-
-شما می‌توانید برای همکاری روی مجموعه‌های API خود، از Git یا هر سیستم کنترل نسخه دلخواهتان استفاده کنید.
-
-برونو فقط به صورت آفلاین کار می‌کند. هیچ برنامه‌ای برای اضافه کردن همگام‌سازی ابری به برونو در آینده وجود ندارد. ما به حریم خصوصی داده‌های شما اهمیت می‌دهیم و معتقدیم که باید روی دستگاه خودتان باقی بمانند. می‌توانید چشم‌انداز بلندمدت ما را مطالعه کنید. [اینجا (به انگلیسی)](https://github.com/usebruno/bruno/discussions/269)
-
-📢 جدیدترین ارائه ما را در کنفرانس India FOSS 3.0 تماشا کنید.
-[اینجا](https://www.youtube.com/watch?v=7bSMFpbcPiY)
-
-![bruno](/assets/images/landing-2.png) <br /><br />
-
-### نصب
-
-برونو به صورت یک فایل باینری برای دانلود در دسترس است. [بر روی وبسایت ما](https://www.usebruno.com/downloads) برای مک لینکوس و ویندوز.
-
-همچنین می‌توانید برونو را از طریق مدیر بسته‌هایی مانند Homebrew، Chocolatey، Snap و Apt نصب کنید.
-
-```sh
-# بر روی مک از طریق brew
-brew install bruno
-
-# بر روی ویندوز از طریق Chocolatey
-choco install bruno
-
-# بر روی لینوکس از طریق Snap
-snap install bruno
-
-# بر روی لینوکس از طریق Apt
-sudo mkdir -p /etc/apt/keyrings
-sudo apt update && sudo apt install gpg curl
-curl -fsSL "https://keyserver.ubuntu.com/pks/lookup?op=get&search=0x9FA6017ECABE0266" \
-  | gpg --dearmor \
-  | sudo tee /etc/apt/keyrings/bruno.gpg > /dev/null
-sudo chmod 644 /etc/apt/keyrings/bruno.gpg
-echo "deb [arch=amd64 signed-by=/etc/apt/keyrings/bruno.gpg] http://debian.usebruno.com/ bruno stable" \
-  | sudo tee /etc/apt/sources.list.d/bruno.list
-sudo apt update && sudo apt install bruno
-```
-
-### روی پلتفرم‌های مختلف کار می‌کند 🖥️
-
-![bruno](/assets/images/run-anywhere.png) <br /><br />
-
-### همکاری از طریق گیت 👩‍💻🧑‍💻
-
-یا هر سیستم کنترل نسخه‌ای که ترجیح می‌دهید
-
-![bruno](/assets/images/version-control.png) <br /><br />
-
-### لینک‌های مهم 📌
-
-- [آخرین نسخه پایدار ما](https://github.com/usebruno/bruno/discussions/269)
-- [نقشه راه](https://github.com/usebruno/bruno/discussions/384)
-- [مستندات](https://docs.usebruno.com)
-- [وبسایت](https://www.usebruno.com)
-- [اشتراک ها](https://www.usebruno.com/pricing)
-- [دانلود](https://www.usebruno.com/downloads)
-
-### ویدیوها 🎥
-
-- [تجربه ها](https://github.com/usebruno/bruno/discussions/343)
-- [مرکز دانش](https://github.com/usebruno/bruno/discussions/386)
-- [اسکریپ مانیا](https://github.com/usebruno/bruno/discussions/385)
-
-### حمایت ❤️
-
-جوون! اگر این پروژه را دوست دارید، روی دکمه ⭐ کلیک کنید!
-
-### تجربه‌های به اشتراک گذاشته‌شده 📣
-
-اگر برونو به شما یا تیمتان کمک کرده است، لطفاً فراموش نکنید تجربه‌های خود را به اشتراک بگذارید. [تجربه‌های خود را در بحث گیت‌هاب ما به اشتراک بگذارید](https://github.com/usebruno/bruno/discussions/343).
-
-### انتشار برونو در یک پکیچ منیجر جدید
-
-لطفا چک بکنید [اینجارو](../../publishing.md) برای اطلاعات بیشتر.
-
-### مشارکت 👩‍💻🧑‍💻
-
-خوشحالم که می‌خواهید برونو را بهتر کنید. لطفا [راهنمای مشارکت را بررسی کنید](../contributing/contributing_fa.md).
-
-حتی اگر نمی‌توانید از طریق کدنویسی مشارکت کنید، در گزارش باگ‌ها و درخواست قابلیت‌های جدید که به حل نیازهای شما کمک می‌کند تردید نکنید.
-
-### نویسنده ها
-
-<div align="center">
-    <a href="https://github.com/usebruno/bruno/graphs/contributors">
-        <img src="https://contrib.rocks/image?repo=usebruno/bruno" />
-    </a>
-</div>
-
-### در ارتباط باشید 🌐
-
-[𝕏 (تویتر)](https://twitter.com/use_bruno) <br />
-[وبسایت](https://www.usebruno.com) <br />
-[دیسکورد](https://discord.com/invite/KgcZUncpjq) <br />
-[لینکدین](https://www.linkedin.com/company/usebruno)
-
-### برند
-
-**نام**
-
-به فارسی برونو - `Bruno` یک علامت تجاری ثبت‌شده متعلق به [Anoop M D](https://www.helloanoop.com/)
-
-**لوگو**
-
-لوگو توسط [OpenMoji](https://openmoji.org/library/emoji-1F436/) ساخته شده است. مجوز: CC [BY-SA 4.0](https://creativecommons.org/licenses/by-sa/4.0/)
-
-### مجوز 📄
-
-[MIT](../../license.md)

docs/readme/readme_fr.md

@@ -3,7 +3,7 @@
 
 ### Bruno - IDE Opensource pour explorer et tester des APIs.
 
-[![GitHub version](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%2Fbruno)
+[![GitHub version](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%bruno)
 [![CI](https://github.com/usebruno/bruno/actions/workflows/tests.yml/badge.svg?branch=main)](https://github.com/usebruno/bruno/actions/workflows/tests.yml)
 [![Commit Activity](https://img.shields.io/github/commit-activity/m/usebruno/bruno)](https://github.com/usebruno/bruno/pulse)
 [![X](https://img.shields.io/twitter/follow/use_bruno?style=social&logo=x)](https://twitter.com/use_bruno)

docs/readme/readme_it.md

@@ -3,7 +3,7 @@
 
 ### Bruno - Opensource IDE per esplorare e testare gli APIs.
 
-[![GitHub version](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%2Fbruno)
+[![GitHub version](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%bruno)
 [![CI](https://github.com/usebruno/bruno/actions/workflows/tests.yml/badge.svg?branch=main)](https://github.com/usebruno/bruno/actions/workflows/tests.yml)
 [![Commit Activity](https://img.shields.io/github/commit-activity/m/usebruno/bruno)](https://github.com/usebruno/bruno/pulse)
 [![X](https://img.shields.io/twitter/follow/use_bruno?style=social&logo=x)](https://twitter.com/use_bruno)

docs/readme/readme_ja.md

@@ -3,7 +3,7 @@
 
 ### Bruno - API の検証・動作テストのためのオープンソース IDE.
 
-[![GitHub version](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%2Fbruno)
+[![GitHub version](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%bruno)
 [![CI](https://github.com/usebruno/bruno/actions/workflows/tests.yml/badge.svg?branch=main)](https://github.com/usebruno/bruno/actions/workflows/tests.yml)
 [![Commit Activity](https://img.shields.io/github/commit-activity/m/usebruno/bruno)](https://github.com/usebruno/bruno/pulse)
 [![X](https://img.shields.io/twitter/follow/use_bruno?style=social&logo=x)](https://twitter.com/use_bruno)

docs/readme/readme_ka.md

@@ -3,7 +3,7 @@
 
 ### ბრუნო - ღია წყაროების IDE API-ების შესწავლისა და ტესტირებისათვის.
 
-[![GitHub version](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%2Fbruno)
+[![GitHub version](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%bruno)
 [![CI](https://github.com/usebruno/bruno/actions/workflows/tests.yml/badge.svg?branch=main)](https://github.com/usebruno/bruno/actions/workflows/tests.yml)
 [![Commit Activity](https://img.shields.io/github/commit-activity/m/usebruno/bruno)](https://github.com/usebruno/bruno/pulse)
 [![X](https://img.shields.io/twitter/follow/use_bruno?style=social&logo=x)](https://twitter.com/use_bruno)

docs/readme/readme_kr.md

@@ -3,7 +3,7 @@
 
 ### Bruno - API 탐색 및 테스트를 위한 오픈소스 IDE.
 
-[![GitHub version](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%2Fbruno)
+[![GitHub version](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%bruno)
 [![CI](https://github.com/usebruno/bruno/actions/workflows/tests.yml/badge.svg?branch=main)](https://github.com/usebruno/bruno/actions/workflows/tests.yml)
 [![Commit Activity](https://img.shields.io/github/commit-activity/m/usebruno/bruno)](https://github.com/usebruno/bruno/pulse)
 [![X](https://img.shields.io/twitter/follow/use_bruno?style=social&logo=x)](https://twitter.com/use_bruno)

docs/readme/readme_nl.md

@@ -3,7 +3,7 @@
 
 ### Bruno - Open source IDE voor het verkennen en testen van API's.
 
-[![GitHub version](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%2Fbruno)
+[![GitHub version](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%bruno)
 [![CI](https://github.com/usebruno/bruno/actions/workflows/tests.yml/badge.svg?branch=main)](https://github.com/usebruno/bruno/actions/workflows/tests.yml)
 [![Commit Activity](https://img.shields.io/github/commit-activity/m/usebruno/bruno)](https://github.com/usebruno/bruno/pulse)
 [![X](https://img.shields.io/twitter/follow/use_bruno?style=social&logo=x)](https://twitter.com/use_bruno)

docs/readme/readme_pl.md

@@ -3,7 +3,7 @@
 
 ### Bruno - Otwartoźródłowe IDE do eksploracji i testów APIs.
 
-[![GitHub version](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%2Fbruno)
+[![GitHub version](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%bruno)
 [![CI](https://github.com/usebruno/bruno/actions/workflows/tests.yml/badge.svg?branch=main)](https://github.com/usebruno/bruno/actions/workflows/tests.yml)
 [![Commit Activity](https://img.shields.io/github/commit-activity/m/usebruno/bruno)](https://github.com/usebruno/bruno/pulse)
 [![X](https://img.shields.io/twitter/follow/use_bruno?style=social&logo=x)](https://twitter.com/use_bruno)

docs/readme/readme_pt_br.md

@@ -3,7 +3,7 @@
 
 ### Bruno - IDE de código aberto para explorar e testar APIs.
 
-[![GitHub version](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%2Fbruno)
+[![GitHub version](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%bruno)
 [![CI](https://github.com/usebruno/bruno/actions/workflows/tests.yml/badge.svg?branch=main)](https://github.com/usebruno/bruno/actions/workflows/tests.yml)
 [![Commit Activity](https://img.shields.io/github/commit-activity/m/usebruno/bruno)](https://github.com/usebruno/bruno/pulse)
 [![X](https://img.shields.io/twitter/follow/use_bruno?style=social&logo=x)](https://twitter.com/use_bruno)

docs/readme/readme_ro.md

@@ -3,7 +3,7 @@
 
 ### Bruno - Mediu integrat de dezvoltare cu sursă deschisă pentru explorarea și testarea API-urilor.
 
-[![GitHub version](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%2Fbruno)
+[![GitHub version](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%bruno)
 [![CI](https://github.com/usebruno/bruno/actions/workflows/tests.yml/badge.svg?branch=main)](https://github.com/usebruno/bruno/actions/workflows/tests.yml)
 [![Commit Activity](https://img.shields.io/github/commit-activity/m/usebruno/bruno)](https://github.com/usebruno/bruno/pulse)
 [![X](https://img.shields.io/twitter/follow/use_bruno?style=social&logo=x)](https://twitter.com/use_bruno)

docs/readme/readme_ru.md

@@ -3,7 +3,7 @@
 
 ### Bruno - IDE с открытым исходным кодом для изучения и тестирования API.
 
-[![GitHub version](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%2Fbruno)
+[![GitHub version](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%bruno)
 [![CI](https://github.com/usebruno/bruno/actions/workflows/tests.yml/badge.svg?branch=main)](https://github.com/usebruno/bruno/actions/workflows/tests.yml)
 [![Commit Activity](https://img.shields.io/github/commit-activity/m/usebruno/bruno)](https://github.com/usebruno/bruno/pulse)
 [![X](https://img.shields.io/twitter/follow/use_bruno?style=social&logo=x)](https://twitter.com/use_bruno)

docs/readme/readme_tr.md

@@ -3,7 +3,7 @@
 
 ### Bruno - API'leri keşfetmek ve test etmek için açık kaynaklı IDE.
 
-[![GitHub sürümü](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%2Fbruno)
+[![GitHub sürümü](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%bruno)
 [![CI](https://github.com/usebruno/bruno/actions/workflows/tests.yml/badge.svg?branch=main)](https://github.com/usebruno/bruno/actions/workflows/tests.yml)
 [![Commit Activity](https://img.shields.io/github/commit-activity/m/usebruno/bruno)](https://github.com/usebruno/bruno/pulse)
 [![X](https://img.shields.io/twitter/follow/use_bruno?style=social&logo=x)](https://twitter.com/use_bruno)

docs/readme/readme_ua.md

@@ -3,7 +3,7 @@
 
 ### Bruno - IDE із відкритим кодом для тестування та дослідження API
 
-[![GitHub version](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%2Fbruno)
+[![GitHub version](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%bruno)
 [![CI](https://github.com/usebruno/bruno/actions/workflows/tests.yml/badge.svg?branch=main)](https://github.com/usebruno/bruno/actions/workflows/tests.yml)
 [![Commit Activity](https://img.shields.io/github/commit-activity/m/usebruno/bruno)](https://github.com/usebruno/bruno/pulse)
 [![X](https://img.shields.io/twitter/follow/use_bruno?style=social&logo=x)](https://twitter.com/use_bruno)

docs/readme/readme_zhtw.md

@@ -3,7 +3,7 @@
 
 ### Bruno - 探索和測試 API 的開源 IDE 工具
 
-[![GitHub version](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%2Fbruno)
+[![GitHub version](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%bruno)
 [![CI](https://github.com/usebruno/bruno/actions/workflows/tests.yml/badge.svg?branch=main)](https://github.com/usebruno/bruno/actions/workflows/tests.yml)
 [![Commit Activity](https://img.shields.io/github/commit-activity/m/usebruno/bruno)](https://github.com/usebruno/bruno/pulse)
 [![X](https://img.shields.io/twitter/follow/use_bruno?style=social&logo=x)](https://twitter.com/use_bruno)

eslint.config.js

@@ -1,6 +1,6 @@
 // eslint.config.js
-const { defineConfig } = require('eslint/config');
-const globals = require('globals');
+const { defineConfig } = require("eslint/config");
+const globals = require("globals");
 const { fixupPluginRules } = require('@eslint/compat');
 const eslintPluginDiff = require('eslint-plugin-diff');
 
@@ -11,18 +11,6 @@ const runESMImports = async () => {
 };
 
 module.exports = runESMImports().then(() => defineConfig([
-  // Global ignores - must be a standalone object with ONLY ignores
-  {
-    ignores: [
-      '**/node_modules/**/*',
-      '**/dist/**/*',
-      '**/*.bru',
-      'packages/bruno-js/src/sandbox/bundle-browser-rollup.js',
-      'packages/bruno-app/public/static/**/*',
-      'packages/bruno-app/.next/**/*',
-      'packages/bruno-electron/web/**/*'
-    ]
-  },
   {
     plugins: {
       'diff': fixupPluginRules(eslintPluginDiff),
@@ -46,13 +34,13 @@ module.exports = runESMImports().then(() => defineConfig([
       'packages/bruno-converters/**/*.js',
       'packages/bruno-electron/**/*.js',
       'packages/bruno-filestore/**/*.ts',
-      'packages/bruno-schema-types/**/*.ts',
       'packages/bruno-js/**/*.js',
       'packages/bruno-lang/**/*.js',
       'packages/bruno-requests/**/*.ts',
       'packages/bruno-requests/**/*.js',
       'packages/bruno-tests/**/*.{js,ts}'
     ],
+    processor: 'diff/diff',
     rules: {
       ...stylistic.configs.customize({
         indent: 2,
@@ -68,7 +56,7 @@ module.exports = runESMImports().then(() => defineConfig([
         minElements: 2,
         consistent: true
       }],
-      '@stylistic/function-paren-newline': ['off'],
+      '@stylistic/function-paren-newline': ['error', 'never'],
       '@stylistic/array-bracket-spacing': ['error', 'never'],
       '@stylistic/arrow-spacing': ['error', { before: true, after: true }],
       '@stylistic/function-call-spacing': ['error', 'never'],
@@ -76,14 +64,12 @@ module.exports = runESMImports().then(() => defineConfig([
       '@stylistic/padding-line-between-statements': ['off'],
       '@stylistic/semi-style': ['error', 'last'],
       '@stylistic/max-len': ['off'],
-      '@stylistic/jsx-one-expression-per-line': ['off'],
-      '@stylistic/max-statements-per-line': ['off'],
-      '@stylistic/no-mixed-operators': ['off']
+      '@stylistic/jsx-one-expression-per-line': ['off']
     }
   },
   {
-    files: ['packages/bruno-app/**/*.{js,jsx,ts}'],
-    ignores: ['**/*.config.js', '**/public/**/*'],
+    files: ["packages/bruno-app/**/*.{js,jsx,ts}"],
+    ignores: ["**/*.config.js", "**/public/**/*"],
     languageOptions: {
       globals: {
         ...globals.browser,
@@ -96,126 +82,114 @@ module.exports = runESMImports().then(() => defineConfig([
       },
       parserOptions: {
         ecmaFeatures: {
-          jsx: true
-        }
-      }
+          jsx: true,
+        },
+      },
     },
     rules: {
-      'no-undef': 'error'
-    }
+      "no-undef": "error",
+    },
   },
   {
     // It prevents lint errors when using CommonJS exports (module.exports) in Jest mocks.
-    files: ['packages/bruno-app/src/test-utils/mocks/codemirror.js'],
+    files: ["packages/bruno-app/src/test-utils/mocks/codemirror.js"],
     languageOptions: {
       globals: {
         ...globals.node,
-        ...globals.jest
-      }
+        ...globals.jest,
+      },
     },
     rules: {
-      'no-undef': 'error'
-    }
-  },
-  {
-    // Storybook config files use CommonJS with __dirname and module.exports
-    files: ['packages/bruno-app/storybook/**/*.js'],
-    languageOptions: {
-      globals: {
-        ...globals.node
-      }
+      "no-undef": "error",
     },
-    rules: {
-      'no-undef': 'error'
-    }
   },
   {
-    files: ['packages/bruno-cli/**/*.js'],
-    ignores: ['**/*.config.js'],
+    files: ["packages/bruno-cli/**/*.js"],
+    ignores: ["**/*.config.js"],
     languageOptions: {
       globals: {
         ...globals.node,
-        ...globals.jest
+        ...globals.jest,
       },
       parserOptions: {
-        ecmaVersion: 'latest'
-      }
-    },
-    rules: {
-      'no-undef': 'error'
-    }
-  },
-  {
-    files: ['packages/bruno-common/**/*.ts'],
-    ignores: ['**/*.config.js', '**/dist/**/*'],
-    languageOptions: {
-      globals: {
-        ...globals.node,
-        ...globals.jest
+        ecmaVersion: "latest"
       },
-      parser: require('@typescript-eslint/parser'),
-      parserOptions: {
-        ecmaVersion: 'latest',
-        sourceType: 'module',
-        project: './packages/bruno-common/tsconfig.json'
-      }
     },
     rules: {
-      'no-undef': 'error'
-    }
+      "no-undef": "error",
+    },
   },
   {
-    files: ['packages/bruno-converters/**/*.js'],
-    ignores: ['**/*.config.js', '**/dist/**/*'],
+    files: ["packages/bruno-common/**/*.ts"],
+    ignores: ["**/*.config.js", "**/dist/**/*"],
     languageOptions: {
       globals: {
         ...globals.node,
-        ...globals.jest
+        ...globals.jest,
+      },
+      parser: require("@typescript-eslint/parser"),
+      parserOptions: {
+        ecmaVersion: "latest",
+        sourceType: "module",
+        project: "./packages/bruno-common/tsconfig.json",
+      },
+    },
+    rules: {
+      "no-undef": "error",
+    },
+  },
+  {
+    files: ["packages/bruno-converters/**/*.js"],
+    ignores: ["**/*.config.js", "**/dist/**/*"],
+    languageOptions: {
+      globals: {
+        ...globals.node,
+        ...globals.jest,
       },
       parserOptions: {
-        ecmaVersion: 'latest',
-        sourceType: 'module'
-      }
-    },
-    rules: {
-      'no-undef': 'error'
-    }
-  },
-  {
-    files: ['packages/bruno-electron/**/*.js'],
-    ignores: ['**/*.config.js', '**/web/**/*'],
-    languageOptions: {
-      globals: {
-        ...globals.node,
-        ...globals.jest
-      }
-    },
-    rules: {
-      'no-undef': 'error'
-    }
-  },
-  {
-    files: ['packages/bruno-filestore/**/*.ts'],
-    ignores: ['**/*.config.js', '**/dist/**/*'],
-    languageOptions: {
-      globals: {
-        ...globals.node,
-        ...globals.jest
+        ecmaVersion: "latest",
+        sourceType: "module",
       },
-      parser: require('@typescript-eslint/parser'),
-      parserOptions: {
-        ecmaVersion: 'latest',
-        sourceType: 'module',
-        project: './packages/bruno-filestore/tsconfig.json'
-      }
     },
     rules: {
-      'no-undef': 'error'
-    }
+      "no-undef": "error",
+    },
   },
   {
-    files: ['packages/bruno-js/**/*.js'],
-    ignores: ['**/*.config.js', '**/dist/**/*'],
+    files: ["packages/bruno-electron/**/*.js"],
+    ignores: ["**/*.config.js", "**/web/**/*"],
+    languageOptions: {
+      globals: {
+        ...globals.node,
+        ...globals.jest,
+      },
+    },
+    rules: {
+      "no-undef": "error",
+    },
+  },
+  {
+    files: ["packages/bruno-filestore/**/*.ts"],
+    ignores: ["**/*.config.js", "**/dist/**/*"],
+    languageOptions: {
+      globals: {
+        ...globals.node,
+        ...globals.jest,
+      },
+      parser: require("@typescript-eslint/parser"),
+      parserOptions: {
+        ecmaVersion: "latest",
+        sourceType: "module",
+        project: "./packages/bruno-filestore/tsconfig.json",
+      },
+    },
+    rules: {
+      "no-undef": "error",
+    },
+  },
+  {
+    files: ["packages/bruno-js/**/*.js"],
+    ignores: ["**/*.config.js", "**/dist/**/*"],
     languageOptions: {
       globals: {
         ...globals.node,
@@ -226,65 +200,65 @@ module.exports = runESMImports().then(() => defineConfig([
         typeDetectGlobalObject: false
       },
       parserOptions: {
-        ecmaVersion: 'latest',
-        sourceType: 'module'
-      }
+        ecmaVersion: "latest",
+        sourceType: "module",
+      },
     },
     rules: {
-      'no-undef': 'error'
-    }
+      "no-undef": "error",
+    },
   },
   {
-    files: ['packages/bruno-lang/**/*.js'],
-    ignores: ['**/*.config.js', '**/dist/**/*'],
+    files: ["packages/bruno-lang/**/*.js"],
+    ignores: ["**/*.config.js", "**/dist/**/*"],
     languageOptions: {
       globals: {
         ...globals.node,
-        ...globals.jest
+        ...globals.jest,
       },
       parserOptions: {
-        ecmaVersion: 'latest',
-        sourceType: 'module'
-      }
+        ecmaVersion: "latest",
+        sourceType: "module",
+      },
     },
     rules: {
-      'no-undef': 'error'
-    }
+      "no-undef": "error",
+    },
   },
   {
-    files: ['packages/bruno-requests/**/*.ts'],
-    ignores: ['**/*.config.js', '**/dist/**/*'],
+    files: ["packages/bruno-requests/**/*.ts"],
+    ignores: ["**/*.config.js", "**/dist/**/*"],
     languageOptions: {
       globals: {
         ...globals.node,
-        ...globals.jest
+        ...globals.jest,
       },
-      parser: require('@typescript-eslint/parser'),
+      parser: require("@typescript-eslint/parser"),
       parserOptions: {
-        ecmaVersion: 'latest',
-        sourceType: 'module',
-        project: './packages/bruno-requests/tsconfig.json'
-      }
+        ecmaVersion: "latest",
+        sourceType: "module",
+        project: "./packages/bruno-requests/tsconfig.json",
+      },
     },
     rules: {
-      'no-undef': 'error'
-    }
+      "no-undef": "error",
+    },
   },
   {
-    files: ['packages/bruno-requests/**/*.js'],
-    ignores: ['**/*.config.js', '**/dist/**/*'],
+    files: ["packages/bruno-requests/**/*.js"],
+    ignores: ["**/*.config.js", "**/dist/**/*"],
     languageOptions: {
       globals: {
         ...globals.node,
-        ...globals.jest
+        ...globals.jest,
       },
       parserOptions: {
-        ecmaVersion: 'latest',
-        sourceType: 'module'
-      }
+        ecmaVersion: "latest",
+        sourceType: "module",
+      },
     },
     rules: {
-      'no-undef': 'error'
-    }
-  }
+      "no-undef": "error",
+    },
+  },
 ]));

package.json

@@ -8,7 +8,6 @@
     "packages/bruno-common",
     "packages/bruno-converters",
     "packages/bruno-schema",
-    "packages/bruno-schema-types",
     "packages/bruno-query",
     "packages/bruno-js",
     "packages/bruno-lang",
@@ -23,13 +22,8 @@
     "@eslint/compat": "^1.3.2",
     "@faker-js/faker": "^7.6.0",
     "@jest/globals": "^29.2.0",
-    "@opencollection/types": "~0.7.0",
     "@playwright/test": "^1.51.1",
     "@rollup/plugin-json": "^6.1.0",
-    "@storybook/addon-webpack5-compiler-babel": "^4.0.0",
-    "@storybook/builder-webpack5": "^10.1.10",
-    "@storybook/react": "^10.1.10",
-    "@storybook/react-webpack5": "^10.1.10",
     "@stylistic/eslint-plugin": "^5.3.1",
     "@types/jest": "^29.5.11",
     "@types/lodash-es": "^4.17.12",
@@ -48,13 +42,12 @@
     "pretty-quick": "^3.1.3",
     "randomstring": "^1.2.2",
     "rimraf": "^6.0.1",
-    "storybook": "^10.1.10",
     "ts-jest": "^29.2.6"
   },
   "scripts": {
     "setup": "node ./scripts/setup.js",
     "watch:converters": "npm run watch --workspace=packages/bruno-converters",
-    "dev": "node ./scripts/dev.js",
+    "dev": "concurrently --kill-others \"npm run dev:web\" \"npm run dev:electron\"",
     "watch": "npm run dev:watch",
     "dev:watch": "node ./scripts/dev-hot-reload.js",
     "dev:web": "npm run dev --workspace=packages/bruno-app",
@@ -62,14 +55,12 @@
     "prettier:web": "npm run prettier --workspace=packages/bruno-app",
     "dev:electron": "npm run dev --workspace=packages/bruno-electron",
     "dev:electron:debug": "npm run debug --workspace=packages/bruno-electron",
-    "storybook": "npm run storybook --workspace=packages/bruno-app",
     "build:bruno-common": "npm run build --workspace=packages/bruno-common",
     "build:bruno-requests": "npm run build --workspace=packages/bruno-requests",
     "build:bruno-filestore": "npm run build --workspace=packages/bruno-filestore",
     "build:bruno-converters": "npm run build --workspace=packages/bruno-converters",
     "build:bruno-query": "npm run build --workspace=packages/bruno-query",
     "build:graphql-docs": "npm run build --workspace=packages/bruno-graphql-docs",
-    "build:schema-types": "npm run build --workspace=packages/bruno-schema-types",
     "build:electron": "node ./scripts/build-electron.js",
     "build:electron:mac": "./scripts/build-electron.sh mac",
     "build:electron:win": "./scripts/build-electron.sh win",
@@ -78,7 +69,6 @@
     "build:electron:rpm": "./scripts/build-electron.sh rpm",
     "build:electron:snap": "./scripts/build-electron.sh snap",
     "watch:common": "npm run watch --workspace=packages/bruno-common",
-    "watch:requests": "npm run watch --workspace=packages/bruno-requests",
     "test:codegen": "node playwright/codegen.ts",
     "test:e2e": "playwright test --project=default",
     "test:e2e:ssl": "playwright test --project=ssl",
@@ -99,8 +89,5 @@
         "json-schema-typed": "8.0.1"
       }
     }
-  },
-  "dependencies": {
-    "ajv": "^8.17.1"
   }
 }

packages/bruno-app/.gitignore

@@ -22,7 +22,6 @@ build
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
-*.log
 
 # local env files
 .env.local
@@ -34,5 +33,4 @@ yarn-error.log*
 .next/
 dist/
 
-.env
-storybook-static/
+.env

packages/bruno-app/babel.config.js

@@ -6,4 +6,4 @@ module.exports = {
     }]
   ],
   plugins: ['babel-plugin-styled-components']
-};
+};

packages/bruno-app/jest.config.js

@@ -1,10 +1,10 @@
 module.exports = {
   rootDir: '.',
   transform: {
-    '^.+\\.[jt]sx?$': 'babel-jest'
+    '^.+\\.[jt]sx?$': 'babel-jest',
   },
   transformIgnorePatterns: [
-    '/node_modules/(?!strip-json-comments|nanoid|xml-formatter)/'
+    "/node_modules/(?!strip-json-comments|nanoid|xml-formatter)/",
   ],
   moduleNameMapper: {
     '^assets/(.*)$': '<rootDir>/src/assets/$1',
@@ -22,9 +22,9 @@ module.exports = {
   testEnvironment: 'jsdom',
   setupFilesAfterEnv: ['@testing-library/jest-dom'],
   setupFiles: [
-    '<rootDir>/jest.setup.js'
+    '<rootDir>/jest.setup.js',
   ],
   testMatch: [
     '<rootDir>/src/**/*.spec.[jt]s?(x)'
   ]
-};
+};

packages/bruno-app/package.json

@@ -9,9 +9,7 @@
     "preview": "rsbuild preview",
     "test": "jest",
     "test:prettier": "prettier --check \"./src/**/*.{js,jsx,json,ts,tsx}\"",
-    "prettier": "prettier --write \"./src/**/*.{js,jsx,json,ts,tsx}\"",
-    "storybook": "storybook dev -p 6006 --config-dir storybook",
-    "build-storybook": "storybook build --config-dir storybook"
+    "prettier": "prettier --write \"./src/**/*.{js,jsx,json,ts,tsx}\""
   },
   "dependencies": {
     "@fontsource/inter": "^5.0.15",
@@ -23,8 +21,6 @@
     "@usebruno/common": "0.1.0",
     "@usebruno/graphql-docs": "0.1.0",
     "@usebruno/schema": "0.7.0",
-    "@xterm/addon-fit": "^0.10.0",
-    "@xterm/xterm": "^5.5.0",
     "classnames": "^2.3.1",
     "codemirror": "5.65.2",
     "codemirror-graphql": "2.1.1",
@@ -41,24 +37,19 @@
     "graphiql": "3.7.1",
     "graphql": "^16.6.0",
     "graphql-request": "^3.7.0",
-    "hexy": "^0.3.5",
     "httpsnippet": "^3.0.9",
     "i18next": "24.1.2",
     "idb": "^7.0.0",
     "immer": "^9.0.15",
-    "js-yaml": "^4.1.0",
     "jsesc": "^3.0.2",
     "jshint": "^2.13.6",
     "json5": "^2.2.3",
     "jsonc-parser": "^3.2.1",
     "jsonpath-plus": "^10.3.0",
-    "jsonschema": "^1.5.0",
     "know-your-http-well": "^0.5.0",
-    "linkify-it": "^5.0.0",
     "lodash": "^4.17.21",
     "markdown-it": "^13.0.2",
     "markdown-it-replace-link": "^1.2.0",
-    "mime-types": "^3.0.2",
     "moment": "^2.30.1",
     "moment-timezone": "^0.5.47",
     "mousetrap": "^1.6.5",
@@ -66,10 +57,9 @@
     "path": "^0.12.7",
     "pdfjs-dist": "4.4.168",
     "platform": "^1.3.6",
-    "polished": "^4.3.1",
     "posthog-node": "4.2.1",
     "prettier": "^2.7.1",
-    "qs": "^6.14.1",
+    "qs": "^6.11.0",
     "query-string": "^7.0.1",
     "react": "19.0.0",
     "react-copy-to-clipboard": "^5.1.0",
@@ -84,17 +74,14 @@
     "react-player": "^2.16.0",
     "react-redux": "^7.2.9",
     "react-tooltip": "^5.5.2",
-    "react-virtuoso": "^4.18.1",
     "sass": "^1.46.0",
     "semver": "^7.7.1",
     "shell-quote": "^1.8.3",
     "strip-json-comments": "^5.0.1",
     "styled-components": "^5.3.3",
-    "swagger-ui-react": "5.17.12",
     "system": "^2.0.1",
     "url": "^0.11.3",
     "xml-formatter": "^3.5.0",
-    "xml2js": "^0.6.2",
     "yup": "^0.32.11"
   },
   "devDependencies": {

packages/bruno-app/public/theme/dark.js

@@ -1,6 +1,6 @@
 const darkTheme = {
-  'brand': '#546de5',
-  'text': 'rgb(52 52 52)',
+  brand: '#546de5',
+  text: 'rgb(52 52 52)',
   'primary-text': '#ffffff',
   'primary-theme': '#1e1e1e',
   'secondary-text': '#929292',

packages/bruno-app/public/theme/light.js

@@ -1,6 +1,6 @@
 const lightTheme = {
-  'brand': '#546de5',
-  'text': 'rgb(52 52 52)',
+  brand: '#546de5',
+  text: 'rgb(52 52 52)',
   'primary-text': 'rgb(52 52 52)',
   'primary-theme': '#ffffff',
   'secondary-text': '#929292',

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

@@ -4,7 +4,7 @@ import { AccordionItem, AccordionHeader, AccordionContent } from './styledWrappe
 
 const AccordionContext = createContext();
 
-const Accordion = ({ children, defaultIndex, dataTestId }) => {
+const Accordion = ({ children, defaultIndex }) => {
   const [openIndex, setOpenIndex] = useState(defaultIndex);
 
   const toggleItem = (index) => {
@@ -13,7 +13,7 @@ const Accordion = ({ children, defaultIndex, dataTestId }) => {
 
   return (
     <AccordionContext.Provider value={{ openIndex, toggleItem }}>
-      <div data-testid={dataTestId}>{children}</div>
+      <div>{children}</div>
     </AccordionContext.Provider>
   );
 };

packages/bruno-app/src/components/ApiSpecPanel/FileEditor/CodeEditor/Plugins/Yaml/index.js

@@ -1,129 +0,0 @@
-const yamlPlugin = (cm) => {
-  cm.defineMode('yaml', function () {
-    var cons = ['true', 'false', 'on', 'off', 'yes', 'no'];
-    var keywordRegex = new RegExp('\\b((' + cons.join(')|(') + '))$', 'i');
-
-    return {
-      token: function (stream, state) {
-        var ch = stream.peek();
-        var esc = state.escaped;
-        state.escaped = false;
-        /* comments */
-        if (ch == '#' && (stream.pos == 0 || /\s/.test(stream.string.charAt(stream.pos - 1)))) {
-          stream.skipToEnd();
-          return 'comment';
-        }
-
-        if (stream.match(/^('([^']|\\.)*'?|"([^"]|\\.)*"?)/)) return 'string';
-
-        if (state.literal && stream.indentation() > state.keyCol) {
-          stream.skipToEnd();
-          return 'string';
-        } else if (state.literal) {
-          state.literal = false;
-        }
-        if (stream.sol()) {
-          state.keyCol = 0;
-          state.pair = false;
-          state.pairStart = false;
-          /* document start */
-          if (stream.match('---')) {
-            return 'def';
-          }
-          /* document end */
-          if (stream.match('...')) {
-            return 'def';
-          }
-          /* array list item */
-          if (stream.match(/\s*-\s+/)) {
-            return 'meta';
-          }
-        }
-        /* inline pairs/lists */
-        if (stream.match(/^(\{|\}|\[|\])/)) {
-          if (ch == '{') state.inlinePairs++;
-          else if (ch == '}') state.inlinePairs--;
-          else if (ch == '[') state.inlineList++;
-          else state.inlineList--;
-          return 'meta';
-        }
-
-        /* list separator */
-        if (state.inlineList > 0 && !esc && ch == ',') {
-          stream.next();
-          return 'meta';
-        }
-        /* pairs separator */
-        if (state.inlinePairs > 0 && !esc && ch == ',') {
-          state.keyCol = 0;
-          state.pair = false;
-          state.pairStart = false;
-          stream.next();
-          return 'meta';
-        }
-
-        /* start of value of a pair */
-        if (state.pairStart) {
-          /* block literals */
-          if (stream.match(/^\s*(\||\>)\s*/)) {
-            state.literal = true;
-            return 'meta';
-          }
-          /* references */
-          if (stream.match(/^\s*(\&|\*)[a-z0-9\._-]+\b/i)) {
-            return 'variable-2';
-          }
-          /* numbers */
-          if (state.inlinePairs == 0 && stream.match(/^\s*-?[0-9\.\,]+\s?$/)) {
-            return 'number';
-          }
-          if (state.inlinePairs > 0 && stream.match(/^\s*-?[0-9\.\,]+\s?(?=(,|}))/)) {
-            return 'number';
-          }
-          /* keywords */
-          if (stream.match(keywordRegex)) {
-            return 'keyword';
-          }
-        }
-
-        /* pairs (associative arrays) -> key */
-        if (
-          !state.pair
-          && stream.match(/^\s*(?:[,\[\]{}&*!|>'"%@`][^\s'":]|[^\s,\[\]{}#&*!|>'"%@`])[^#:]*(?=:($|\s))/)
-        ) {
-          state.pair = true;
-          state.keyCol = stream.indentation();
-          return 'atom';
-        }
-        if (state.pair && stream.match(/^:\s*/)) {
-          state.pairStart = true;
-          return 'meta';
-        }
-
-        /* nothing found, continue */
-        state.pairStart = false;
-        state.escaped = ch == '\\';
-        stream.next();
-        return null;
-      },
-      startState: function () {
-        return {
-          pair: false,
-          pairStart: false,
-          keyCol: 0,
-          inlinePairs: 0,
-          inlineList: 0,
-          literal: false,
-          escaped: false
-        };
-      },
-      lineComment: '#',
-      fold: 'indent'
-    };
-  });
-
-  cm.defineMIME('text/x-yaml', 'yaml');
-  cm.defineMIME('text/yaml', 'yaml');
-};
-
-export default yamlPlugin;

packages/bruno-app/src/components/ApiSpecPanel/FileEditor/CodeEditor/StyledWrapper.js

@@ -1,65 +0,0 @@
-import styled from 'styled-components';
-
-const StyledWrapper = styled.div`
-  div.CodeMirror {
-    height: calc(100vh - 4rem);
-    background: ${(props) => props.theme.codemirror.bg};
-    border: solid 1px ${(props) => props.theme.codemirror.border};
-    font-family: ${(props) => (props.font ? props.font : 'default')};
-    line-break: anywhere;
-  }
-
-  .CodeMirror-dialog {
-    overflow: visible;
-    input {
-      background: transparent;
-      border: 1px solid #d3d6db;
-      outline: none;
-      border-radius: 0px;
-    }
-  }
-
-  .CodeMirror-overlayscroll-horizontal div,
-  .CodeMirror-overlayscroll-vertical div {
-    background: #d2d7db;
-  }
-
-  textarea.cm-editor {
-    position: relative;
-  }
-
-  // Todo: dark mode temporary fix
-  // Clean this
-  .CodeMirror.cm-s-monokai {
-    .CodeMirror-overlayscroll-horizontal div,
-    .CodeMirror-overlayscroll-vertical div {
-      background: #444444;
-    }
-  }
-
-  .cm-s-monokai span.cm-property,
-  .cm-s-monokai span.cm-attribute {
-    color: #9cdcfe !important;
-  }
-
-  .cm-s-monokai span.cm-string {
-    color: #ce9178 !important;
-  }
-
-  .cm-s-monokai span.cm-number {
-    color: #b5cea8 !important;
-  }
-
-  .cm-s-monokai span.cm-atom {
-    color: #569cd6 !important;
-  }
-
-  .cm-variable-valid {
-    color: ${(props) => props.theme.codemirror.variable.valid};
-  }
-  .cm-variable-invalid {
-    color: ${(props) => props.theme.codemirror.variable.invalid};
-  }
-`;
-
-export default StyledWrapper;

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

@@ -1,138 +0,0 @@
-/**
- *  Copyright (c) 2021 GraphQL Contributors.
- *
- *  This source code is licensed under the MIT license found in the
- *  LICENSE file in the root directory of this source tree.
- */
-
-import React from 'react';
-import StyledWrapper from './StyledWrapper';
-import yamlPlugin from './Plugins/Yaml/index';
-
-let CodeMirror;
-const SERVER_RENDERED = typeof window === 'undefined' || global['PREVENT_CODEMIRROR_RENDER'] === true;
-
-if (!SERVER_RENDERED) {
-  CodeMirror = require('codemirror');
-}
-
-export default class CodeEditor extends React.Component {
-  constructor(props) {
-    super(props);
-    this.cachedValue = props.value || '';
-    this.variables = {};
-    this.lintOptions = {
-      esversion: 11,
-      expr: true,
-      asi: true
-    };
-  }
-
-  componentWillMount() {
-    switch (this.props.mode) {
-      case 'yaml':
-        // YAML linting and hightlighting plugin
-        yamlPlugin(CodeMirror);
-        break;
-      default:
-        break;
-    }
-  }
-
-  componentDidMount() {
-    const editor = (this.editor = CodeMirror(this._node, {
-      value: this.props.value || '',
-      lineNumbers: true,
-      lineWrapping: true,
-      tabSize: 2,
-      mode: this.props.mode || 'application/text',
-      keyMap: 'sublime',
-      autoCloseBrackets: true,
-      matchBrackets: true,
-      showCursorWhenSelecting: true,
-      foldGutter: true,
-      gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter', 'CodeMirror-lint-markers'],
-      lint: this.lintOptions,
-      readOnly: this.props.readOnly,
-      scrollbarStyle: 'overlay',
-      theme: this.props.theme === 'dark' ? 'monokai' : 'default',
-      extraKeys: {
-        'Cmd-S': () => {
-          if (this.props.onSave) {
-            this.props.onSave();
-          }
-        },
-        'Ctrl-S': () => {
-          if (this.props.onSave) {
-            this.props.onSave();
-          }
-        },
-        'Cmd-F': 'findPersistent',
-        'Ctrl-F': 'findPersistent',
-        'Cmd-H': 'replace',
-        'Ctrl-H': 'replace',
-        'Tab': function (cm) {
-          cm.getSelection().includes('\n') || editor.getLine(cm.getCursor().line) == cm.getSelection()
-            ? cm.execCommand('indentMore')
-            : cm.replaceSelection('  ', 'end');
-        },
-        'Shift-Tab': 'indentLess',
-        'Ctrl-Space': 'autocomplete',
-        'Cmd-Space': 'autocomplete',
-        'Ctrl-Y': 'foldAll',
-        'Cmd-Y': 'foldAll',
-        'Ctrl-I': 'unfoldAll',
-        'Cmd-I': 'unfoldAll'
-      }
-    }));
-    if (editor) {
-      editor.setOption('lint', this.props.mode && editor.getValue().trim().length > 0 ? this.lintOptions : false);
-      editor.on('change', this._onEdit);
-    }
-  }
-
-  componentDidUpdate(prevProps) {
-    this.ignoreChangeEvent = true;
-    if (this.props.value !== prevProps.value && this.props.value !== this.cachedValue && this.editor) {
-      this.cachedValue = this.props.value;
-      this.editor.setValue(this.props.value);
-    }
-    if (this.props.theme !== prevProps.theme && this.editor) {
-      this.editor.setOption('theme', this.props.theme === 'dark' ? 'monokai' : 'default');
-    }
-    this.ignoreChangeEvent = false;
-  }
-
-  componentWillUnmount() {
-    if (this.editor) {
-      this.editor.off('change', this._onEdit);
-      this.editor = null;
-    }
-  }
-
-  render() {
-    if (this.editor) {
-      this.editor.refresh();
-    }
-    return (
-      <StyledWrapper
-        className="h-full w-full graphiql-container"
-        aria-label="Code Editor"
-        font={this.props.font}
-        ref={(node) => {
-          this._node = node;
-        }}
-      />
-    );
-  }
-
-  _onEdit = () => {
-    if (!this.ignoreChangeEvent && this.editor) {
-      this.editor.setOption('lint', this.editor.getValue().trim().length > 0 ? this.lintOptions : false);
-      this.cachedValue = this.editor.getValue();
-      if (this.props.onEdit) {
-        this.props.onEdit(this.cachedValue);
-      }
-    }
-  };
-}

packages/bruno-app/src/components/ApiSpecPanel/FileEditor/index.js

@@ -1,51 +0,0 @@
-import get from 'lodash/get';
-import { useTheme } from 'providers/Theme';
-import { useDispatch, useSelector } from 'react-redux';
-import CodeEditor from './CodeEditor/index';
-import { IconDeviceFloppy } from '@tabler/icons';
-import { saveApiSpecToFile } from 'providers/ReduxStore/slices/apiSpec';
-import { useState } from 'react';
-
-const FileEditor = ({ apiSpec }) => {
-  const dispatch = useDispatch();
-  const { displayedTheme, theme } = useTheme();
-  const preferences = useSelector((state) => state.app.preferences);
-
-  const [content, setContent] = useState(apiSpec?.raw);
-
-  const onEdit = (value) => {
-    setContent(value);
-  };
-
-  const onSave = () => {
-    dispatch(saveApiSpecToFile({ uid: apiSpec?.uid, content }));
-  };
-
-  const hasChanges = Boolean(content != apiSpec?.raw);
-
-  const editorMode = 'yaml';
-
-  return (
-    <div className="flex flex-grow relative">
-      <CodeEditor
-        theme={displayedTheme}
-        value={content}
-        onEdit={onEdit}
-        onSave={onSave}
-        mode={editorMode}
-        font={get(preferences, 'font.codeFont', 'default')}
-      />
-      <IconDeviceFloppy
-        onClick={onSave}
-        color={hasChanges ? theme.draftColor : theme.requestTabs.icon.color}
-        strokeWidth={1.5}
-        size={22}
-        className={`absolute right-0 top-0 m-4 ${
-          hasChanges ? 'cursor-pointer oapcity-100' : 'cursor-default opacity-50'
-        }`}
-      />
-    </div>
-  );
-};
-
-export default FileEditor;

packages/bruno-app/src/components/ApiSpecPanel/Renderers/Swagger/StyledWrapper.js

@@ -1,19 +0,0 @@
-import styled from 'styled-components';
-
-const StyledWrapper = styled.div`
-  .swagger-root {
-    height: calc(100vh - 4rem);
-    border: solid 1px ${(props) => props.theme.codemirror.border};
-
-    &.dark {
-      .swagger-ui {
-        filter: invert(88%) hue-rotate(180deg);
-      }
-      .swagger-ui .microlight {
-        filter: invert(100%) hue-rotate(180deg);
-      }
-    }
-  }
-`;
-
-export default StyledWrapper;

packages/bruno-app/src/components/ApiSpecPanel/Renderers/Swagger/index.js

@@ -1,19 +0,0 @@
-import SwaggerUI from 'swagger-ui-react';
-import StyledWrapper from './StyledWrapper';
-import { useTheme } from 'providers/Theme';
-
-const Swagger = ({ string }) => {
-  const { displayedTheme } = useTheme();
-
-  console.log('string', string);
-
-  return (
-    <StyledWrapper>
-      <div className={`swagger-root w-full overflow-y-scroll ${displayedTheme}`}>
-        <SwaggerUI spec={string} />
-      </div>
-    </StyledWrapper>
-  );
-};
-
-export default Swagger;

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

@@ -1,22 +0,0 @@
-import styled from 'styled-components';
-
-const StyledWrapper = styled.div`
-  .menu-icon {
-    cursor: pointer;
-    color: ${(props) => props.theme.sidebar.dropdownIcon.color};
-  }
-
-  div.dropdown-item.menu-item {
-    color: ${(props) => props.theme.colors.text.danger};
-    &:hover {
-      background-color: ${(props) => props.theme.colors.bg.danger};
-      color: white;
-    }
-  }
-
-  .react-tooltip {
-    z-index: 10;
-  }
-`;
-
-export default StyledWrapper;

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

@@ -1,97 +0,0 @@
-import React, { forwardRef, useRef } from 'react';
-import find from 'lodash/find';
-import { useSelector, useDispatch } from 'react-redux';
-import { IconFileCode, IconDots } from '@tabler/icons';
-import StyledWrapper from './StyledWrapper';
-import FileEditor from './FileEditor';
-import Dropdown from 'components/Dropdown';
-import { openApiSpec } from 'providers/ReduxStore/slices/apiSpec';
-import { useState } from 'react';
-import CreateApiSpec from 'components/Sidebar/ApiSpecs/CreateApiSpec';
-import { Suspense } from 'react';
-import Swagger from './Renderers/Swagger';
-import toast from 'react-hot-toast';
-
-const ApiSpecPanel = () => {
-  const dispatch = useDispatch();
-
-  const [createApiSpecModalOpen, setCreateApiSpecModalOpen] = useState(false);
-
-  const { apiSpecs, activeApiSpecUid } = useSelector((state) => state.apiSpec);
-
-  const dropdownTippyRef = useRef();
-  const onDropdownCreate = (ref) => (dropdownTippyRef.current = ref);
-
-  let apiSpec = find(apiSpecs, (c) => c.uid === activeApiSpecUid);
-  const { filename, pathname, raw, uid } = apiSpec || {};
-  if (!uid) {
-    return <div className="p-4 opacity-50">API Spec not found!</div>;
-  }
-
-  const MenuIcon = forwardRef((props, ref) => {
-    return (
-      <div ref={ref}>
-        <IconDots size={22} />
-      </div>
-    );
-  });
-
-  const handleOpenApiSpec = () => {
-    dispatch(openApiSpec()).catch(
-      (err) => console.log(err) && toast.error('An error occurred while opening the API spec')
-    );
-  };
-
-  return (
-    <StyledWrapper className="flex flex-col flex-grow relative">
-      {createApiSpecModalOpen ? <CreateApiSpec onClose={() => setCreateApiSpecModalOpen(false)} /> : null}
-      <div className="p-3 mb-2 w-full flex flex-row justify-between grid grid-cols-3">
-        <div className="flex flex-row justify-start gap-x-4 col-span-1">
-          <div className="flex w-fit items-center cursor-pointer">
-            <IconFileCode size={18} strokeWidth={1.5} />
-            <span className="ml-2 mr-4 font-semibold">API Designer</span>
-          </div>
-        </div>
-        <div className="w-full col-span-1 flex justify-center" title={pathname}>
-          {filename}
-        </div>
-        <div className="menu-icon pr-2 col-span-1 flex justify-end">
-          <Dropdown onCreate={onDropdownCreate} icon={<MenuIcon />} placement="bottom-start">
-            <div
-              className="dropdown-item"
-              onClick={(e) => {
-                dropdownTippyRef.current.hide();
-                setCreateApiSpecModalOpen(true);
-              }}
-            >
-              Create API Spec
-            </div>
-            <div
-              className="dropdown-item"
-              onClick={(e) => {
-                dropdownTippyRef.current.hide();
-                handleOpenApiSpec();
-              }}
-            >
-              Open API Spec
-            </div>
-          </Dropdown>
-        </div>
-      </div>
-      <section className="main flex flex-grow px-4 relative">
-        <div className="w-full grid grid-cols-2">
-          <div className="col-span-1">
-            <FileEditor apiSpec={apiSpec} />
-          </div>
-          <div className="col-span-1">
-            <Suspense fallback="">
-              <Swagger string={raw} />
-            </Suspense>
-          </div>
-        </div>
-      </section>
-    </StyledWrapper>
-  );
-};
-
-export default ApiSpecPanel;

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

@@ -1,251 +0,0 @@
-import styled from 'styled-components';
-
-const Wrapper = styled.div`
-  height: 36px;
-  display: flex;
-  align-items: center;
-  background: ${(props) => props.theme.sidebar.bg};
-  -webkit-app-region: drag;
-  user-select: none;
-
-  .titlebar-content {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    width: 100%;
-    height: 100%;
-    padding: 0 12px;
-    padding-left: 70px; /* Space for macOS window controls */
-    transition: padding-left 0.15s ease;
-  }
-
-  /* When in full screen, no traffic lights so reduce padding */
-  &.fullscreen .titlebar-content {
-    padding-left: 6px;
-  }
-
-  /* Remove drag region from interactive elements */
-  .workspace-name-container,
-  .dropdown-item,
-  .home-button,
-  .dropdown,
-  button {
-    -webkit-app-region: no-drag;
-  }
-
-  /* Left section */
-  .titlebar-left {
-    display: flex;
-    align-items: center;
-    flex-shrink: 0;
-    margin-left: 10px;
-    -webkit-app-region: no-drag;
-  }
-
-  /* When in full screen, no traffic lights so remove margin-left */
-  &.fullscreen .titlebar-left {
-    margin-left: 0px;
-  }
-
-  /* Workspace Name Dropdown Trigger */
-  .workspace-name-container {
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    padding: 5px 10px;
-    border-radius: 6px;
-    cursor: pointer;
-    transition: all 0.15s ease;
-
-    &:hover {
-      background: ${(props) => props.theme.sidebar.collection.item.hoverBg};
-    }
-
-    .workspace-name {
-      font-size: 13px;
-      font-weight: 500;
-      color: ${(props) => props.theme.sidebar.color};
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      max-width: 180px;
-    }
-
-    .chevron-icon {
-      flex-shrink: 0;
-      color: ${(props) => props.theme.sidebar.muted};
-      transition: transform 0.2s ease;
-    }
-  }
-
-  /* Center section - Bruno branding */
-  .titlebar-center {
-    position: absolute;
-    left: 50%;
-    transform: translateX(-50%);
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    pointer-events: none;
-
-    .bruno-text {
-      font-size: 13px;
-      font-weight: 600;
-      color: ${(props) => props.theme.text};
-      letter-spacing: 0.5px;
-    }
-  }
-
-  /* Right section */
-  .titlebar-right {
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-    flex-shrink: 0;
-    -webkit-app-region: no-drag;
-  }
-
-  /* App action buttons container */
-  .titlebar-actions {
-    display: flex;
-    align-items: center;
-  }
-
-  /* Workspace Dropdown Styles */
-  .workspace-item {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 4px 10px !important;
-    margin: 0 !important;
-
-    &.active {
-      .check-icon {
-        opacity: 1;
-      }
-    }
-
-    &:hover {
-      .pin-btn:not(.pinned) {
-        opacity: 1;
-      }
-    }
-
-    .workspace-name {
-      flex: 1;
-      min-width: 0;
-      font-size: 13px;
-      font-weight: 400;
-      color: ${(props) => props.theme.dropdown.color};
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-
-    .workspace-actions {
-      display: flex;
-      align-items: center;
-      gap: 4px;
-      margin-left: 8px;
-      flex-shrink: 0;
-      pointer-events: none;
-
-      > * {
-        pointer-events: auto;
-      }
-    }
-
-    .check-icon {
-      color: ${(props) => props.theme.workspace?.accent || props.theme.colors?.text?.yellow};
-      flex-shrink: 0;
-    }
-
-    .pin-btn {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: 22px;
-      height: 22px;
-      padding: 0;
-      border: none;
-      background: transparent;
-      border-radius: 4px;
-      cursor: pointer;
-      color: ${(props) => props.theme.dropdown.mutedText};
-      transition: background 0.15s ease, color 0.15s ease, opacity 0.15s ease;
-      opacity: 0;
-
-      &.pinned {
-        opacity: 1;
-      }
-
-      &:hover {
-        background: ${(props) => props.theme.dropdown.hoverBg};
-        color: ${(props) => props.theme.dropdown.mutedText};
-      }
-    }
-  }
-
-  /* Adjust for non-macOS platforms */
-  &:not(.os-mac) .titlebar-content {
-    padding-left: 12px;
-  }
-
-  /* Windows-specific styles */
-  &.os-windows .titlebar-content {
-    padding-right: 0px;
-    padding-left: 0px;
-  }
-
-  &.os-windows .titlebar-left {
-    margin-left: 6px;
-  }
-
-  &.os-linux .titlebar-content {
-    padding-right: 0px;
-    padding-left: 0px;
-  }
-
-  &.os-linux .titlebar-left {
-    margin-left: 6px;
-  }
-
-  /* Custom window control buttons for Windows - always interactive, above modal overlay */
-  .window-controls {
-    display: flex;
-    align-items: stretch;
-    height: 36px;
-    margin-left: 8px;
-    position: relative;
-    z-index: 1000;
-  }
-
-  .window-control-btn {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 46px;
-    height: 100%;
-    border: none;
-    background: transparent;
-    color: ${(props) => props.theme.text};
-    cursor: pointer;
-    transition: background-color 0.1s ease;
-    -webkit-app-region: no-drag;
-
-    &:hover {
-      background: ${(props) => props.theme.sidebar.collection.item.hoverBg};
-    }
-
-    &:active {
-      background: ${(props) => props.theme.sidebar.collection.item.hoverBg};
-    }
-
-    &.close:hover {
-      background: #e81123;
-      color: white;
-    }
-  }
-`;
-
-export default Wrapper;

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

@@ -1,330 +0,0 @@
-import React from 'react';
-import { IconCheck, IconChevronDown, IconFolder, IconHome, IconPin, IconPinned, IconPlus, IconDownload, IconSettings, IconMinus, IconSquare, IconX, IconCopy } from '@tabler/icons';
-import { forwardRef, useCallback, useEffect, useMemo, useState } from 'react';
-import toast from 'react-hot-toast';
-import { useDispatch, useSelector } from 'react-redux';
-
-import { savePreferences, showHomePage, showManageWorkspacePage, toggleSidebarCollapse } from 'providers/ReduxStore/slices/app';
-import { closeConsole, openConsole } from 'providers/ReduxStore/slices/logs';
-import { openWorkspaceDialog, switchWorkspace } from 'providers/ReduxStore/slices/workspaces/actions';
-import { sortWorkspaces, toggleWorkspacePin } from 'utils/workspaces';
-
-import Bruno from 'components/Bruno';
-import MenuDropdown from 'ui/MenuDropdown';
-import ActionIcon from 'ui/ActionIcon';
-import IconSidebarToggle from 'components/Icons/IconSidebarToggle';
-import CreateWorkspace from 'components/WorkspaceSidebar/CreateWorkspace';
-import ImportWorkspace from 'components/WorkspaceSidebar/ImportWorkspace';
-
-import IconBottombarToggle from 'components/Icons/IconBottombarToggle/index';
-import StyledWrapper from './StyledWrapper';
-import ResponseLayoutToggle from 'components/ResponsePane/ResponseLayoutToggle';
-import { isMacOS, isWindowsOS, isLinuxOS } from 'utils/common/platform';
-import classNames from 'classnames';
-
-const getOsClass = () => {
-  if (isMacOS()) return 'os-mac';
-  if (isWindowsOS()) return 'os-windows';
-  if (isLinuxOS()) return 'os-linux';
-  return 'os-other';
-};
-
-// Helper to get display name for workspace
-export const getWorkspaceDisplayName = (name) => {
-  if (!name) return 'Untitled Workspace';
-  return name;
-};
-
-const AppTitleBar = () => {
-  const dispatch = useDispatch();
-  const [isFullScreen, setIsFullScreen] = useState(false);
-  const [isMaximized, setIsMaximized] = useState(false);
-  const osClass = getOsClass();
-  const isWindows = osClass === 'os-windows';
-  const isLinux = osClass === 'os-linux';
-  const showWindowControls = isWindows || isLinux;
-
-  // Listen for fullscreen changes
-  useEffect(() => {
-    const { ipcRenderer } = window;
-    if (!ipcRenderer) return;
-
-    const removeEnterFullScreenListener = ipcRenderer.on('main:enter-full-screen', () => {
-      setIsFullScreen(true);
-    });
-
-    const removeLeaveFullScreenListener = ipcRenderer.on('main:leave-full-screen', () => {
-      setIsFullScreen(false);
-    });
-
-    return () => {
-      removeEnterFullScreenListener();
-      removeLeaveFullScreenListener();
-    };
-  }, []);
-
-  useEffect(() => {
-    if (!showWindowControls) return;
-    const { ipcRenderer } = window;
-    if (!ipcRenderer) return;
-
-    ipcRenderer.invoke('renderer:window-is-maximized')
-      .then((maximized) => {
-        setIsMaximized(maximized);
-      })
-      .catch((error) => {
-        console.error('Error getting initial maximized state:', error);
-      });
-
-    const removeMaximizedListener = ipcRenderer.on('main:window-maximized', () => {
-      setIsMaximized(true);
-    });
-
-    const removeUnmaximizedListener = ipcRenderer.on('main:window-unmaximized', () => {
-      setIsMaximized(false);
-    });
-
-    return () => {
-      removeMaximizedListener();
-      removeUnmaximizedListener();
-    };
-  }, [showWindowControls]);
-
-  const handleMinimize = useCallback(() => {
-    window.ipcRenderer?.send('renderer:window-minimize');
-  }, []);
-
-  const handleMaximize = useCallback(() => {
-    window.ipcRenderer?.send('renderer:window-maximize');
-    // State will be updated via IPC events from main process (main:window-maximized/main:window-unmaximized)
-  }, []);
-
-  const handleClose = useCallback(() => {
-    window.ipcRenderer?.send('renderer:window-close');
-  }, []);
-
-  // Get workspace info
-  const { workspaces, activeWorkspaceUid } = useSelector((state) => state.workspaces);
-  const preferences = useSelector((state) => state.app.preferences);
-  const sidebarCollapsed = useSelector((state) => state.app.sidebarCollapsed);
-  const isConsoleOpen = useSelector((state) => state.logs.isConsoleOpen);
-  const activeWorkspace = workspaces.find((w) => w.uid === activeWorkspaceUid);
-
-  // Sort workspaces according to preferences
-  const sortedWorkspaces = useMemo(() => {
-    return sortWorkspaces(workspaces, preferences);
-  }, [workspaces, preferences]);
-
-  const [createWorkspaceModalOpen, setCreateWorkspaceModalOpen] = useState(false);
-  const [importWorkspaceModalOpen, setImportWorkspaceModalOpen] = useState(false);
-
-  const WorkspaceName = forwardRef((props, ref) => {
-    return (
-      <div ref={ref} className="workspace-name-container" {...props}>
-        <span data-testid="workspace-name" className={classNames('workspace-name', { 'italic text-muted': !activeWorkspace?.name })}>{getWorkspaceDisplayName(activeWorkspace?.name)}</span>
-        <IconChevronDown size={14} stroke={1.5} className="chevron-icon" />
-      </div>
-    );
-  });
-
-  const handleHomeClick = () => {
-    dispatch(showHomePage());
-  };
-
-  const handleWorkspaceSwitch = (workspaceUid) => {
-    dispatch(switchWorkspace(workspaceUid));
-    toast.success(`Switched to ${getWorkspaceDisplayName(workspaces.find((w) => w.uid === workspaceUid)?.name)}`);
-  };
-
-  const handleOpenWorkspace = async () => {
-    try {
-      await dispatch(openWorkspaceDialog());
-      toast.success('Workspace opened successfully');
-    } catch (error) {
-      toast.error(error.message || 'Failed to open workspace');
-    }
-  };
-
-  const handleCreateWorkspace = () => {
-    setCreateWorkspaceModalOpen(true);
-  };
-
-  const handleManageWorkspaces = () => {
-    dispatch(showManageWorkspacePage());
-  };
-
-  const handleImportWorkspace = () => {
-    setImportWorkspaceModalOpen(true);
-  };
-
-  const handlePinWorkspace = useCallback((workspaceUid, e) => {
-    e.preventDefault();
-    e.stopPropagation();
-    const newPreferences = toggleWorkspacePin(workspaceUid, preferences);
-    dispatch(savePreferences(newPreferences));
-  }, [dispatch, preferences]);
-
-  const handleToggleSidebar = () => {
-    dispatch(toggleSidebarCollapse());
-  };
-
-  const handleToggleDevtools = () => {
-    if (isConsoleOpen) {
-      dispatch(closeConsole());
-    } else {
-      dispatch(openConsole());
-    }
-  };
-
-  // Build workspace menu items
-  const workspaceMenuItems = useMemo(() => {
-    const items = sortedWorkspaces.map((workspace) => {
-      const isActive = workspace.uid === activeWorkspaceUid;
-      const isPinned = preferences?.workspaces?.pinnedWorkspaceUids?.includes(workspace.uid);
-
-      return {
-        id: workspace.uid,
-        label: getWorkspaceDisplayName(workspace.name),
-        onClick: () => handleWorkspaceSwitch(workspace.uid),
-        className: `workspace-item ${isActive ? 'active' : ''}`,
-        rightSection: (
-          <div className="workspace-actions">
-            {workspace.type !== 'default' && (
-              <ActionIcon
-                className={`pin-btn ${isPinned ? 'pinned' : ''}`}
-                onClick={(e) => handlePinWorkspace(workspace.uid, e)}
-                label={isPinned ? 'Unpin workspace' : 'Pin workspace'}
-                size="sm"
-              >
-                {isPinned ? <IconPinned size={14} stroke={1.5} /> : <IconPin size={14} stroke={1.5} />}
-              </ActionIcon>
-            )}
-            {isActive && <IconCheck size={16} stroke={1.5} className="check-icon" />}
-          </div>
-        )
-      };
-    });
-
-    // Add label and action items
-    items.push(
-      { type: 'label', label: 'Workspaces' },
-      {
-        id: 'create-workspace',
-        leftSection: IconPlus,
-        label: 'Create workspace',
-        onClick: handleCreateWorkspace
-      },
-      {
-        id: 'open-workspace',
-        leftSection: IconFolder,
-        label: 'Open workspace',
-        onClick: handleOpenWorkspace
-      },
-      {
-        id: 'import-workspace',
-        leftSection: IconDownload,
-        label: 'Import workspace',
-        onClick: handleImportWorkspace
-      },
-      {
-        id: 'manage-workspaces',
-        leftSection: IconSettings,
-        label: 'Manage workspaces',
-        onClick: handleManageWorkspaces
-      }
-    );
-
-    return items;
-  }, [sortedWorkspaces, activeWorkspaceUid, preferences, handlePinWorkspace]);
-
-  return (
-    <StyledWrapper className={`app-titlebar ${osClass} ${isFullScreen ? 'fullscreen' : ''}`}>
-      {createWorkspaceModalOpen && (
-        <CreateWorkspace onClose={() => setCreateWorkspaceModalOpen(false)} />
-      )}
-      {importWorkspaceModalOpen && (
-        <ImportWorkspace onClose={() => setImportWorkspaceModalOpen(false)} />
-      )}
-
-      <div className="titlebar-content">
-        {/* Left section: Home + Workspace */}
-        <div className="titlebar-left">
-          <ActionIcon onClick={handleHomeClick} label="Home" size="lg" className="home-button">
-            <IconHome size={16} stroke={1.5} />
-          </ActionIcon>
-
-          {/* Workspace Dropdown */}
-          <MenuDropdown
-            data-testid="workspace-menu"
-            items={workspaceMenuItems}
-            placement="bottom-start"
-            selectedItemId={activeWorkspaceUid}
-          >
-            <WorkspaceName />
-          </MenuDropdown>
-        </div>
-
-        {/* Center section: Bruno logo + text */}
-        <div className="titlebar-center">
-          <Bruno width={18} />
-          <span className="bruno-text">Bruno</span>
-        </div>
-
-        {/* Right section: Action buttons */}
-        <div className="titlebar-right">
-          <div className="titlebar-actions">
-            {/* Toggle sidebar */}
-            <ActionIcon
-              onClick={handleToggleSidebar}
-              label={sidebarCollapsed ? 'Show sidebar' : 'Hide sidebar'}
-              size="lg"
-              data-testid="toggle-sidebar-button"
-            >
-              <IconSidebarToggle collapsed={sidebarCollapsed} size={16} strokeWidth={1.5} />
-            </ActionIcon>
-
-            {/* Toggle devtools */}
-            <ActionIcon
-              onClick={handleToggleDevtools}
-              label={isConsoleOpen ? 'Hide devtools' : 'Show devtools'}
-              size="lg"
-              data-testid="toggle-devtools-button"
-            >
-              <IconBottombarToggle collapsed={!isConsoleOpen} size={16} strokeWidth={1.5} />
-            </ActionIcon>
-
-            <ResponseLayoutToggle />
-          </div>
-
-          {showWindowControls && (
-            <div className="window-controls">
-              <button
-                className="window-control-btn minimize"
-                onClick={handleMinimize}
-                aria-label="Minimize"
-              >
-                <IconMinus size={16} stroke={1} />
-              </button>
-              <button
-                className="window-control-btn maximize"
-                onClick={handleMaximize}
-                aria-label={isMaximized ? 'Restore' : 'Maximize'}
-              >
-                {isMaximized ? <IconCopy size={14} stroke={1} /> : <IconSquare size={14} stroke={1} />}
-              </button>
-              <button
-                className="window-control-btn close"
-                onClick={handleClose}
-                aria-label="Close"
-              >
-                <IconX size={16} stroke={1} />
-              </button>
-            </div>
-          )}
-        </div>
-      </div>
-    </StyledWrapper>
-  );
-};
-
-export default AppTitleBar;

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

@@ -1,38 +0,0 @@
-import styled from 'styled-components';
-
-const StyledWrapper = styled.div`
-  font-size: ${(props) => props.theme.font.size.base};
-
-  .body-mode-selector {
-    background: transparent;
-    border-radius: 3px;
-
-    .dropdown-item {
-      padding: 0.2rem 0.6rem !important;
-      padding-left: 1.5rem !important;
-      display: flex;
-      align-items: center;
-    }
-
-    .label-item {
-      padding: 0.2rem 0.6rem !important;
-    }
-
-    .selected-body-mode {
-      color: ${(props) => props.theme.primary.text};
-    }
-
-    .dropdown-icon {
-      display: flex;
-      align-items: center;
-      margin-right: 0.5rem;
-    }
-  }
-
-  .caret {
-    color: ${(props) => props.theme.colors.text.muted};
-    fill: ${(props) => props.theme.colors.text.muted};
-  }
-`;
-
-export default StyledWrapper;

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

@@ -1,33 +1,17 @@
-import React, { useMemo } from 'react';
-import { IconCaretDown, IconForms, IconBraces, IconCode, IconFileText, IconDatabase, IconFile, IconX } from '@tabler/icons';
-import MenuDropdown from 'ui/MenuDropdown';
+import React, { useRef, forwardRef } from 'react';
+import { IconCaretDown } from '@tabler/icons';
+import Dropdown from 'components/Dropdown';
 import { humanizeRequestBodyMode } from 'utils/collections';
-import StyledWrapper from './StyledWrapper';
 
 const DEFAULT_MODES = [
-  {
-    name: 'Form',
-    options: [
-      { id: 'multipartForm', label: 'Multipart Form', leftSection: IconForms },
-      { id: 'formUrlEncoded', label: 'Form URL Encoded', leftSection: IconForms }
-    ]
-  },
-  {
-    name: 'Raw',
-    options: [
-      { id: 'json', label: 'JSON', leftSection: IconBraces },
-      { id: 'xml', label: 'XML', leftSection: IconCode },
-      { id: 'text', label: 'TEXT', leftSection: IconFileText },
-      { id: 'sparql', label: 'SPARQL', leftSection: IconDatabase }
-    ]
-  },
-  {
-    name: 'Other',
-    options: [
-      { id: 'file', label: 'File / Binary', leftSection: IconFile },
-      { id: 'none', label: 'No Body', leftSection: IconX }
-    ]
-  }
+  { key: 'multipartForm', label: 'Multipart Form', category: 'Form' },
+  { key: 'formUrlEncoded', label: 'Form URL Encoded', category: 'Form' },
+  { key: 'json', label: 'JSON', category: 'Raw' },
+  { key: 'xml', label: 'XML', category: 'Raw' },
+  { key: 'text', label: 'TEXT', category: 'Raw' },
+  { key: 'sparql', label: 'SPARQL', category: 'Raw' },
+  { key: 'file', label: 'File / Binary', category: 'Other' },
+  { key: 'none', label: 'None', category: 'Other' }
 ];
 
 const BodyModeSelector = ({
@@ -37,39 +21,62 @@ const BodyModeSelector = ({
   disabled = false,
   className = '',
   wrapperClassName = '',
+  showCategories = true,
   placement = 'bottom-end'
 }) => {
-  // Add onClick handlers to mode options
-  const menuItems = useMemo(() => {
-    return modes.map((group) => ({
-      ...group,
-      options: group.options.map((option) => ({
-        ...option,
-        onClick: () => onModeChange(option.id)
-      }))
-    }));
-  }, [modes, onModeChange]);
+  const dropdownTippyRef = useRef();
+  const onDropdownCreate = (ref) => (dropdownTippyRef.current = ref);
+
+  const Icon = forwardRef((props, ref) => {
+    return (
+      <div ref={ref} className="flex items-center justify-center pl-3 py-1 select-none selected-body-mode">
+        {humanizeRequestBodyMode(currentMode)}
+        {' '}
+        <IconCaretDown className="caret ml-2" size={14} strokeWidth={2} />
+      </div>
+    );
+  });
+
+  const onModeSelect = (mode) => {
+    dropdownTippyRef.current.hide();
+    onModeChange(mode);
+  };
+
+  // Group modes by category for rendering
+  const groupedModes = modes.reduce((acc, mode) => {
+    const category = mode.category || 'Other';
+    if (!acc[category]) {
+      acc[category] = [];
+    }
+    acc[category].push(mode);
+    return acc;
+  }, {});
 
   return (
-    <StyledWrapper className={wrapperClassName}>
-      <div className={`inline-flex items-center body-mode-selector ${disabled ? 'cursor-default' : 'cursor-pointer'}`}>
-        <MenuDropdown
-          items={menuItems}
-          placement={placement}
-          disabled={disabled}
-          className={className}
-          selectedItemId={currentMode}
-          showGroupDividers={false}
-          groupStyle="select"
-        >
-          <div className="flex items-center justify-center pl-3 py-1 select-none selected-body-mode">
-            {humanizeRequestBodyMode(currentMode)}
-            {' '}
-            <IconCaretDown className="caret ml-2" size={14} strokeWidth={2} />
-          </div>
-        </MenuDropdown>
-      </div>
-    </StyledWrapper>
+    <div className={`inline-flex items-center body-mode-selector ${disabled ? 'cursor-default' : 'cursor-pointer'} ${wrapperClassName}`}>
+      <Dropdown
+        onCreate={onDropdownCreate}
+        icon={<Icon />}
+        placement={placement}
+        disabled={disabled}
+        className={className}
+      >
+        {Object.entries(groupedModes).map(([category, categoryModes]) => (
+          <React.Fragment key={category}>
+            {showCategories && <div className="label-item font-medium">{category}</div>}
+            {categoryModes.map((mode) => (
+              <div
+                key={mode.key}
+                className="dropdown-item"
+                onClick={() => onModeSelect(mode.key)}
+              >
+                {mode.label}
+              </div>
+            ))}
+          </React.Fragment>
+        ))}
+      </Dropdown>
+    </div>
   );
 };
 

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

@@ -6,7 +6,7 @@ import StyledWrapper from './StyledWrapper';
 const BrunoSupport = ({ onClose }) => {
   return (
     <StyledWrapper>
-      <Modal size="sm" title="Support" handleCancel={onClose} hideFooter={true}>
+      <Modal size="sm" title={'Support'} handleCancel={onClose} hideFooter={true}>
         <div className="collection-options">
           <div className="mt-2">
             <a href="https://docs.usebruno.com" target="_blank" className="flex items-end">

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

@@ -1,5 +1,4 @@
 import React, { useMemo } from 'react';
-import get from 'lodash/get';
 import CodeEditor from 'components/CodeEditor';
 import { useTheme } from 'providers/Theme';
 import { useSelector } from 'react-redux';
@@ -22,8 +21,7 @@ const BulkEditor = ({ params, onChange, onToggle, onSave, onRun }) => {
         <CodeEditor
           mode="text/plain"
           theme={displayedTheme}
-          font={get(preferences, 'font.codeFont', 'default')}
-          fontSize={get(preferences, 'font.codeFontSize')}
+          font={preferences.codeFont || 'default'}
           value={parsedParams}
           onEdit={handleEdit}
           onSave={onSave}

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

@@ -18,33 +18,6 @@ const StyledWrapper = styled.div`
     flex-direction: column-reverse;
   }
 
-  .CodeMirror-placeholder {
-    color: ${(props) => props.theme.text} !important;
-    opacity: 0.5 !important;
-  }
-
-  .CodeMirror-linenumber {
-    text-align: left !important;
-    padding-left: 3px !important;
-  }
-
-  /* Override default lint highlight background when emphasizing the gutter */
-  .CodeMirror-lint-line-error,
-  .CodeMirror-lint-line-warning {
-    background: none !important;
-  }
-
-  /* Style line numbers when there's a lint issue */
-  .CodeMirror-lint-line-error .CodeMirror-linenumber {
-    color: ${(props) => props.theme.colors.text.danger} !important;
-    text-decoration: underline;
-  }
-
-  .CodeMirror-lint-line-warning .CodeMirror-linenumber {
-    color: ${(props) => props.theme.colors.text.warning} !important;
-    text-decoration: underline;
-  }
-
   /* Removes the glow outline around the folded json */
   .CodeMirror-foldmarker {
     text-shadow: none;
@@ -100,54 +73,41 @@ const StyledWrapper = styled.div`
     }
   }
 
-  .cm-s-default, .cm-s-monokai {
-    span.cm-def {
-      color: ${(props) => props.theme.codemirror.tokens.definition} !important;
-    }
-    span.cm-property {
-      color: ${(props) => props.theme.codemirror.tokens.property} !important;
-    }
-    span.cm-string {
-      color: ${(props) => props.theme.codemirror.tokens.string} !important;
-    }
-    span.cm-number {
-      color: ${(props) => props.theme.codemirror.tokens.number} !important;
-    }
-    span.cm-atom {
-      color: ${(props) => props.theme.codemirror.tokens.atom} !important;
-    }
-    span.cm-variable, span.cm-variable-2 {
-      color: ${(props) => props.theme.codemirror.tokens.variable} !important;
-    }
-    span.cm-keyword {
-      color: ${(props) => props.theme.codemirror.tokens.keyword} !important;
-    }
-    span.cm-comment {
-      color: ${(props) => props.theme.codemirror.tokens.comment} !important;
-    }
-    span.cm-operator {
-      color: ${(props) => props.theme.codemirror.tokens.operator} !important;
-    }
-    span.cm-tag {
-      color: ${(props) => props.theme.codemirror.tokens.tag} !important;
-    }
-    span.cm-tag.cm-bracket {
-      color: ${(props) => props.theme.codemirror.tokens.tagBracket} !important;
-    }
+  .cm-s-monokai span.cm-property,
+  .cm-s-monokai span.cm-attribute {
+    color: #9cdcfe !important;
+  }
+
+  .cm-s-monokai span.cm-string {
+    color: #ce9178 !important;
+  }
+
+  .cm-s-monokai span.cm-number {
+    color: #b5cea8 !important;
+  }
+
+  .cm-s-monokai span.cm-atom {
+    color: #569cd6 !important;
   }
 
-  /* Variable validation colors */
   .cm-variable-valid {
-    color: ${(props) => props.theme.codemirror.variable.valid} !important;
+    color: green;
   }
   .cm-variable-invalid {
-    color: ${(props) => props.theme.codemirror.variable.invalid} !important;
+    color: red;
   }
 
   .CodeMirror-search-hint {
     display: inline;
   }
-  
+
+  .cm-s-default span.cm-property {
+    color: #1f61a0 !important;
+  }
+
+  .cm-s-default span.cm-variable {
+    color: #397d13 !important;
+  }
   
   //matching bracket fix
   .CodeMirror-matchingbracket {
@@ -166,31 +126,6 @@ const StyledWrapper = styled.div`
   .cm-search-current {
     background: rgba(255, 193, 7, 0.4);
   }
-
-  .lint-error-tooltip {
-    position: fixed;
-    z-index: 10000;
-    background: ${(props) => props.theme.codemirror.bg};
-    border-radius: ${(props) => props.theme.border.radius.base};
-    padding: 8px 12px;
-    max-width: 400px;
-    box-shadow: ${(props) => props.theme.shadow.sm};
-    font-size: ${(props) => props.theme.font.size.xs};
-    line-height: 1.5;
-    pointer-events: none;
-
-    .lint-tooltip-message {
-      padding: 2px 0;
-    }
-
-    .lint-tooltip-message.error {
-      color: ${(props) => props.theme.colors.text.danger};
-    }
-
-    .lint-tooltip-message.warning {
-      color: ${(props) => props.theme.colors.text.warning};
-    }
-  }
 `;
 
 export default StyledWrapper;

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

@@ -8,14 +8,12 @@
 import React from 'react';
 import { isEqual, escapeRegExp } from 'lodash';
 import { defineCodeMirrorBrunoVariablesMode } from 'utils/common/codemirror';
-import { setupAutoComplete, showRootHints } from 'utils/codemirror/autocomplete';
+import { setupAutoComplete } from 'utils/codemirror/autocomplete';
 import StyledWrapper from './StyledWrapper';
 import * as jsonlint from '@prantlf/jsonlint';
 import { JSHINT } from 'jshint';
 import stripJsonComments from 'strip-json-comments';
 import { getAllVariables } from 'utils/collections';
-import { setupLinkAware } from 'utils/codemirror/linkAware';
-import { setupLintErrorTooltip } from 'utils/codemirror/lint-errors';
 import CodeMirrorSearch from 'components/CodeMirrorSearch';
 
 const CodeMirror = require('codemirror');
@@ -38,8 +36,7 @@ export default class CodeEditor extends React.Component {
     this.lintOptions = {
       esversion: 11,
       expr: true,
-      asi: true,
-      highlightLines: true
+      asi: true
     };
 
     this.state = {
@@ -52,22 +49,19 @@ export default class CodeEditor extends React.Component {
 
     const editor = (this.editor = CodeMirror(this._node, {
       value: this.props.value || '',
-      placeholder: '...',
       lineNumbers: true,
       lineWrapping: this.props.enableLineWrapping ?? true,
       tabSize: TAB_SIZE,
       mode: this.props.mode || 'application/ld+json',
-      brunoVarInfo: this.props.enableBrunoVarInfo !== false ? {
-        variables,
-        collection: this.props.collection,
-        item: this.props.item
-      } : false,
+      brunoVarInfo: {
+        variables
+      },
       keyMap: 'sublime',
       autoCloseBrackets: true,
       matchBrackets: true,
       showCursorWhenSelecting: true,
       foldGutter: true,
-      gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'],
+      gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter', 'CodeMirror-lint-markers'],
       lint: this.lintOptions,
       readOnly: this.props.readOnly,
       scrollbarStyle: 'overlay',
@@ -105,18 +99,14 @@ export default class CodeEditor extends React.Component {
         },
         'Cmd-H': 'replace',
         'Ctrl-H': 'replace',
-        'Tab': function (cm) {
+        Tab: function (cm) {
           cm.getSelection().includes('\n') || editor.getLine(cm.getCursor().line) == cm.getSelection()
             ? cm.execCommand('indentMore')
             : cm.replaceSelection('  ', 'end');
         },
         'Shift-Tab': 'indentLess',
-        'Ctrl-Space': (cm) => {
-          showRootHints(cm, this.props.showHintsFor);
-        },
-        'Cmd-Space': (cm) => {
-          showRootHints(cm, this.props.showHintsFor);
-        },
+        'Ctrl-Space': 'autocomplete',
+        'Cmd-Space': 'autocomplete',
         'Ctrl-Y': 'foldAll',
         'Cmd-Y': 'foldAll',
         'Ctrl-I': 'unfoldAll',
@@ -155,7 +145,7 @@ export default class CodeEditor extends React.Component {
           } else if (this.props.mode == 'application/xml') {
             var doc = new DOMParser();
             try {
-              // add header element and remove prefix namespaces for DOMParser
+              //add header element and remove prefix namespaces for DOMParser
               var dcm = doc.parseFromString(
                 '<a> ' + internal.replace(/(?<=\<|<\/)\w+:/g, '') + '</a>',
                 'application/xml'
@@ -192,15 +182,16 @@ export default class CodeEditor extends React.Component {
       }
       return found;
     });
-
+    
     if (editor) {
       editor.setOption('lint', this.props.mode && editor.getValue().trim().length > 0 ? this.lintOptions : false);
       editor.on('change', this._onEdit);
+      editor.on('scroll', this.onScroll);
       editor.scrollTo(null, this.props.initialScroll);
       this.addOverlay();
 
       const getAllVariablesHandler = () => getAllVariables(this.props.collection, this.props.item);
-
+      
       // Setup AutoComplete Helper for all modes
       const autoCompleteOptions = {
         showHintsFor: this.props.showHintsFor,
@@ -211,11 +202,6 @@ export default class CodeEditor extends React.Component {
         editor,
         autoCompleteOptions
       );
-
-      setupLinkAware(editor);
-
-      // Setup lint error tooltip on line number hover
-      this.cleanupLintErrorTooltip = setupLintErrorTooltip(editor);
     }
   }
 
@@ -232,10 +218,8 @@ export default class CodeEditor extends React.Component {
       CodeMirror.signal(this.editor, 'change', this.editor);
     }
     if (this.props.value !== prevProps.value && this.props.value !== this.cachedValue && this.editor) {
-      const cursor = this.editor.getCursor();
       this.cachedValue = this.props.value;
       this.editor.setValue(this.props.value);
-      this.editor.setCursor(cursor);
     }
 
     if (this.editor) {
@@ -243,16 +227,6 @@ export default class CodeEditor extends React.Component {
       if (!isEqual(variables, this.variables)) {
         this.addOverlay();
       }
-
-      // Update collection and item when they change
-      if (this.props.enableBrunoVarInfo !== false && this.editor.options.brunoVarInfo) {
-        if (!isEqual(this.props.collection, this.editor.options.brunoVarInfo.collection)) {
-          this.editor.options.brunoVarInfo.collection = this.props.collection;
-        }
-        if (!isEqual(this.props.item, this.editor.options.brunoVarInfo.item)) {
-          this.editor.options.brunoVarInfo.item = this.props.item;
-        }
-      }
     }
 
     if (this.props.theme !== prevProps.theme && this.editor) {
@@ -280,19 +254,8 @@ export default class CodeEditor extends React.Component {
 
   componentWillUnmount() {
     if (this.editor) {
-      if (this.props.onScroll) {
-        this.props.onScroll(this.editor);
-      }
-
-      this.editor?._destroyLinkAware?.();
       this.editor.off('change', this._onEdit);
-
-      // Clean up lint error tooltip
-      this.cleanupLintErrorTooltip?.();
-
-      const wrapper = this.editor.getWrapperElement();
-      wrapper?.parentNode?.removeChild(wrapper);
-
+      this.editor.off('scroll', this.onScroll);
       this.editor = null;
     }
   }
@@ -327,15 +290,12 @@ export default class CodeEditor extends React.Component {
     let variables = getAllVariables(this.props.collection, this.props.item);
     this.variables = variables;
 
-    // Update brunoVarInfo with latest variables
-    if (this.props.enableBrunoVarInfo !== false && this.editor.options.brunoVarInfo) {
-      this.editor.options.brunoVarInfo.variables = variables;
-    }
-
     defineCodeMirrorBrunoVariablesMode(variables, mode, false, this.props.enableVariableHighlighting);
     this.editor.setOption('mode', 'brunovariables');
   };
 
+  onScroll = (event) => this.props.onScroll?.(event);
+
   _onEdit = () => {
     if (!this.ignoreChangeEvent && this.editor) {
       this.editor.setOption('lint', this.editor.getValue().trim().length > 0 ? this.lintOptions : false);

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

@@ -10,10 +10,10 @@ jest.mock('codemirror', () => {
 
 const MOCK_THEME = {
   codemirror: {
-    bg: '#1e1e1e',
-    border: '#333'
+    bg: "#1e1e1e",
+    border: "#333",
   },
-  textLink: '#007acc'
+  textLink: "#007acc",
 };
 
 const setupEditorState = (editor, { value, cursorPosition }) => {
@@ -27,8 +27,8 @@ const setupEditorState = (editor, { value, cursorPosition }) => {
   });
 
   editor.state = {
-    completionActive: null
-  };
+    completionActive: null,
+  }
 };
 
 const setupEditorWithRef = () => {
@@ -47,5 +47,5 @@ describe('CodeEditor', () => {
     jest.resetModules();
   });
 
-  it('add CodeEditor related tests here', () => {});
-});
+  it("add CodeEditor related tests here", () => {});
+});

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

@@ -1,5 +1,4 @@
 import styled from 'styled-components';
-import { rgba } from 'polished';
 
 const StyledWrapper = styled.div`
   .bruno-search-bar {
@@ -10,15 +9,15 @@ const StyledWrapper = styled.div`
     display: flex;
     align-items: center;
     flex-wrap: nowrap;
-    gap: 0;
-    padding: 1px 3px;
+    padding: 0 2px;
+    min-height: 36px;
+    background: ${(props) => props.theme.sidebar.search.bg} !important;
+    border-radius: 4px;
+    border: 1px solid ${(props) => props.theme.sidebar.search.bg} !important;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
     width: auto;
+    min-width: 180px;
     max-width: 320px;
-    min-height: 22px;
-    background: ${(props) => props.theme.background.base};
-    color: ${(props) => props.theme.text.base};
-    border: solid 1px ${(props) => props.theme.border.border2};
-    border-radius: ${(props) => props.theme.border.radius.sm};
   }
 
   .bruno-search-bar input {
@@ -28,7 +27,7 @@ const StyledWrapper = styled.div`
     border: none;
     outline: none;
     padding: 1px 2px;
-    font-size: ${(props) => props.theme.font.size.base};
+    font-size: 13px;
     margin: 0 1px;
     height: 28px;
   }
@@ -39,7 +38,7 @@ const StyledWrapper = styled.div`
     padding: 0 1px;
     margin: 0 1px;
     cursor: pointer;
-    color: ${(props) => props.theme.colors.text.subtext1};
+    color: #aaa;
     border-radius: 3px;
     height: 18px;
     width: 18px;
@@ -51,18 +50,31 @@ const StyledWrapper = styled.div`
   .searchbar-result-count {
     min-width: 28px;
     text-align: center;
-    font-size: ${(props) => props.theme.font.size.xs};
-    color: ${(props) => props.theme.colors.text.subtext1};
+    font-size: 11px;
+    color: #aaa;
     margin: 0 8px 0 1px; 
     white-space: nowrap;
   }
 
+  .bruno-search-bar.compact {
+    background: ${(props) => props.theme.codemirror.bg};
+    color: ${(props) => props.theme.codemirror.text || props.theme.text};
+    border: none;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
+    border-radius: 4px;
+    padding: 1px 3px;
+    min-height: 22px;
+    display: flex;
+    align-items: center;
+    gap: 0;
+  }
+
   .bruno-search-bar input {
     background: transparent;
-    color: ${(props) => props.theme.colors.text.subtext2};
+    color: inherit;
     border: none;
     outline: none;
-    font-size: ${(props) => props.theme.font.size.base};
+    font-size: 13px;
     padding: 1px 2px;
     min-width: 80px;
   }
@@ -80,9 +92,7 @@ const StyledWrapper = styled.div`
   }
 
   .searchbar-icon-btn.active {
-    color: ${(props) => props.theme.brand};
-    background-color: ${(props) => rgba(props.theme.brand, 0.1)};
-    font-weight: 500;
+    color: #f39c12 !important;
   }
 `;
 

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

@@ -166,7 +166,7 @@ const CodeMirrorSearch = ({ visible, editor, onClose }) => {
 
   return (
     <StyledWrapper>
-      <div className="bruno-search-bar">
+      <div className="bruno-search-bar compact">
         <input
           autoFocus
           type="text"

packages/bruno-app/src/components/CollectionSettings/Auth/ApiKeyAuth/StyledWrapper.js

@@ -2,8 +2,7 @@ import styled from 'styled-components';
 
 const Wrapper = styled.div`
   label {
-    font-size: ${(props) => props.theme.font.size.sm};
-    color: ${(props) => props.theme.colors.text.subtext1};
+    font-size: 0.8125rem;
   }
 
   .single-line-editor-wrapper {
@@ -14,8 +13,7 @@ const Wrapper = styled.div`
   }
 
   .auth-placement-selector {
-    font-size: ${(props) => props.theme.font.size.sm};
-    padding: 0.2rem 0px;
+    padding: 0.5rem 0px;
     border-radius: 3px;
     border: solid 1px ${(props) => props.theme.input.border};
     background-color: ${(props) => props.theme.input.bg};
@@ -39,6 +37,7 @@ const Wrapper = styled.div`
 
     .auth-type-label {
       width: fit-content;
+      color: ${(props) => props.theme.colors.text.yellow};
       justify-content: space-between;
       padding: 0 0.5rem;
     }

packages/bruno-app/src/components/CollectionSettings/Auth/ApiKeyAuth/index.js

@@ -6,7 +6,7 @@ import Dropdown from 'components/Dropdown';
 import { useTheme } from 'providers/Theme';
 import SingleLineEditor from 'components/SingleLineEditor';
 import { updateCollectionAuth } from 'providers/ReduxStore/slices/collections';
-import { saveCollectionSettings } from 'providers/ReduxStore/slices/collections/actions';
+import { saveCollectionRoot } from 'providers/ReduxStore/slices/collections/actions';
 import StyledWrapper from './StyledWrapper';
 import { humanizeRequestAPIKeyPlacement } from 'utils/collections';
 
@@ -16,9 +16,9 @@ const ApiKeyAuth = ({ collection }) => {
   const dropdownTippyRef = useRef();
   const onDropdownCreate = (ref) => (dropdownTippyRef.current = ref);
 
-  const apikeyAuth = collection.draft?.root ? get(collection, 'draft.root.request.auth.apikey', {}) : get(collection, 'root.request.auth.apikey', {});
+  const apikeyAuth = get(collection, 'root.request.auth.apikey', {});
 
-  const handleSave = () => dispatch(saveCollectionSettings(collection.uid));
+  const handleSave = () => dispatch(saveCollectionRoot(collection.uid));
 
   const Icon = forwardRef((props, ref) => {
     return (
@@ -43,45 +43,43 @@ const ApiKeyAuth = ({ collection }) => {
   };
 
   useEffect(() => {
-    !apikeyAuth?.placement
-    && dispatch(
-      updateCollectionAuth({
-        mode: 'apikey',
-        collectionUid: collection.uid,
-        content: {
-          placement: 'header'
-        }
-      })
-    );
+    !apikeyAuth?.placement &&
+      dispatch(
+        updateCollectionAuth({
+          mode: 'apikey',
+          collectionUid: collection.uid,
+          content: {
+            placement: 'header'
+          }
+        })
+      );
   }, [apikeyAuth]);
 
   return (
     <StyledWrapper className="mt-2 w-full">
-      <label className="block mb-1">Key</label>
-      <div className="single-line-editor-wrapper mb-3">
+      <label className="block font-medium mb-2">Key</label>
+      <div className="single-line-editor-wrapper mb-2">
         <SingleLineEditor
           value={apikeyAuth.key || ''}
           theme={storedTheme}
           onSave={handleSave}
           onChange={(val) => handleAuthChange('key', val)}
           collection={collection}
-          isCompact
         />
       </div>
 
-      <label className="block mb-1">Value</label>
-      <div className="single-line-editor-wrapper mb-3">
+      <label className="block font-medium mb-2">Value</label>
+      <div className="single-line-editor-wrapper mb-2">
         <SingleLineEditor
           value={apikeyAuth.value || ''}
           theme={storedTheme}
           onSave={handleSave}
           onChange={(val) => handleAuthChange('value', val)}
           collection={collection}
-          isCompact
         />
       </div>
 
-      <label className="block mb-1">Add To</label>
+      <label className="block font-medium mb-2">Add To</label>
       <div className="inline-flex items-center cursor-pointer auth-placement-selector w-fit">
         <Dropdown onCreate={onDropdownCreate} icon={<Icon />} placement="bottom-end">
           <div

packages/bruno-app/src/components/CollectionSettings/Auth/AuthMode/StyledWrapper.js

@@ -1,19 +1,27 @@
 import styled from 'styled-components';
 
 const Wrapper = styled.div`
-  font-size: ${(props) => props.theme.font.size.base};
+  font-size: 0.8125rem;
 
   .auth-mode-selector {
     background: transparent;
 
     .auth-mode-label {
-      color: ${(props) => props.theme.primary.text};
-
-      .caret {
-        color: rgb(140, 140, 140);
-        fill: rgb(140, 140, 140);
-      }
+      color: ${(props) => props.theme.colors.text.yellow};
     }
+
+    .dropdown-item {
+      padding: 0.2rem 0.6rem !important;
+    }
+
+    .label-item {
+      padding: 0.2rem 0.6rem !important;
+    }
+  }
+
+  .caret {
+    color: rgb(140, 140, 140);
+    fill: rgb(140 140 140);
   }
 `;
 

packages/bruno-app/src/components/CollectionSettings/Auth/AuthMode/index.js

@@ -1,7 +1,7 @@
-import React, { useMemo, useCallback } from 'react';
+import React, { useRef, forwardRef } from 'react';
 import get from 'lodash/get';
 import { IconCaretDown } from '@tabler/icons';
-import MenuDropdown from 'ui/MenuDropdown';
+import Dropdown from 'components/Dropdown';
 import { useDispatch } from 'react-redux';
 import { updateCollectionAuthMode } from 'providers/ReduxStore/slices/collections';
 import { humanizeRequestAuthMode } from 'utils/collections';
@@ -9,77 +9,113 @@ import StyledWrapper from './StyledWrapper';
 
 const AuthMode = ({ collection }) => {
   const dispatch = useDispatch();
-  const authMode = collection.draft?.root ? get(collection, 'draft.root.request.auth.mode') : get(collection, 'root.request.auth.mode');
+  const dropdownTippyRef = useRef();
+  const onDropdownCreate = (ref) => (dropdownTippyRef.current = ref);
+  const authMode = get(collection, 'root.request.auth.mode');
 
-  const onModeChange = useCallback((value) => {
+  const Icon = forwardRef((props, ref) => {
+    return (
+      <div ref={ref} className="flex items-center justify-center auth-mode-label select-none">
+        {humanizeRequestAuthMode(authMode)} <IconCaretDown className="caret ml-1 mr-1" size={14} strokeWidth={2} />
+      </div>
+    );
+  });
+
+  const onModeChange = (value) => {
     dispatch(
       updateCollectionAuthMode({
         collectionUid: collection.uid,
         mode: value
       })
     );
-  }, [dispatch, collection.uid]);
-
-  const menuItems = useMemo(() => [
-    {
-      id: 'awsv4',
-      label: 'AWS Sig v4',
-      onClick: () => onModeChange('awsv4')
-    },
-    {
-      id: 'basic',
-      label: 'Basic Auth',
-      onClick: () => onModeChange('basic')
-    },
-    {
-      id: 'wsse',
-      label: 'WSSE Auth',
-      onClick: () => onModeChange('wsse')
-    },
-    {
-      id: 'bearer',
-      label: 'Bearer Token',
-      onClick: () => onModeChange('bearer')
-    },
-    {
-      id: 'digest',
-      label: 'Digest Auth',
-      onClick: () => onModeChange('digest')
-    },
-    {
-      id: 'ntlm',
-      label: 'NTLM Auth',
-      onClick: () => onModeChange('ntlm')
-    },
-    {
-      id: 'oauth2',
-      label: 'OAuth 2.0',
-      onClick: () => onModeChange('oauth2')
-    },
-    {
-      id: 'apikey',
-      label: 'API Key',
-      onClick: () => onModeChange('apikey')
-    },
-    {
-      id: 'none',
-      label: 'No Auth',
-      onClick: () => onModeChange('none')
-    }
-  ], [onModeChange]);
+  };
 
   return (
     <StyledWrapper>
       <div className="inline-flex items-center cursor-pointer auth-mode-selector">
-        <MenuDropdown
-          items={menuItems}
-          placement="bottom-end"
-          selectedItemId={authMode}
-        >
-          <div className="flex items-center justify-center auth-mode-label select-none">
-            {humanizeRequestAuthMode(authMode)} <IconCaretDown className="caret ml-1" size={14} strokeWidth={2} />
+        <Dropdown onCreate={onDropdownCreate} icon={<Icon />} placement="bottom-end">
+          <div
+            className="dropdown-item"
+            onClick={() => {
+              dropdownTippyRef.current.hide();
+              onModeChange('awsv4');
+            }}
+          >
+            AWS Sig v4
           </div>
-        </MenuDropdown>
+          <div
+            className="dropdown-item"
+            onClick={() => {
+              dropdownTippyRef.current.hide();
+              onModeChange('basic');
+            }}
+          >
+            Basic Auth
+          </div>
+          <div
+            className="dropdown-item"
+            onClick={() => {
+              dropdownTippyRef.current.hide();
+              onModeChange('wsse');
+            }}
+          >
+            WSSE Auth
+          </div>
+          <div
+            className="dropdown-item"
+            onClick={() => {
+              dropdownTippyRef.current.hide();
+              onModeChange('bearer');
+            }}
+          >
+            Bearer Token
+          </div>
+          <div
+            className="dropdown-item"
+            onClick={() => {
+              dropdownTippyRef.current.hide();
+              onModeChange('digest');
+            }}
+          >
+            Digest Auth
+          </div>
+          <div
+            className="dropdown-item"
+            onClick={() => {
+              dropdownTippyRef.current.hide();
+              onModeChange('ntlm');
+            }}
+          >
+            NTLM Auth
+          </div>          
+          <div
+            className="dropdown-item"
+            onClick={() => {
+              dropdownTippyRef.current.hide();
+              onModeChange('oauth2');
+            }}
+          >
+            OAuth 2.0
+          </div>
+          <div
+            className="dropdown-item"
+            onClick={() => {
+              dropdownTippyRef.current.hide();
+              onModeChange('apikey');
+            }}
+          >
+            API Key
+          </div>
+          <div
+            className="dropdown-item"
+            onClick={() => {
+              dropdownTippyRef.current.hide();
+              onModeChange('none');
+            }}
+          >
+            No Auth
+          </div>
+        </Dropdown>
       </div>
     </StyledWrapper>
   );

packages/bruno-app/src/components/CollectionSettings/Auth/AwsV4Auth/StyledWrapper.js

@@ -2,8 +2,7 @@ import styled from 'styled-components';
 
 const Wrapper = styled.div`
   label {
-    font-size: ${(props) => props.theme.font.size.sm};
-    color: ${(props) => props.theme.colors.text.subtext1};
+    font-size: 0.8125rem;
   }
 
   .single-line-editor-wrapper {

packages/bruno-app/src/components/CollectionSettings/Auth/AwsV4Auth/index.js

@@ -6,18 +6,18 @@ import { useTheme } from 'providers/Theme';
 import { useDispatch } from 'react-redux';
 import SingleLineEditor from 'components/SingleLineEditor';
 import { updateCollectionAuth } from 'providers/ReduxStore/slices/collections';
-import { saveCollectionSettings } from 'providers/ReduxStore/slices/collections/actions';
+import { saveCollectionRoot } from 'providers/ReduxStore/slices/collections/actions';
 import StyledWrapper from './StyledWrapper';
 
 const AwsV4Auth = ({ collection }) => {
   const dispatch = useDispatch();
   const { storedTheme } = useTheme();
 
-  const awsv4Auth = collection.draft?.root ? get(collection, 'draft.root.request.auth.awsv4', {}) : get(collection, 'root.request.auth.awsv4', {});
+  const awsv4Auth = get(collection, 'root.request.auth.awsv4', {});
   const { isSensitive } = useDetectSensitiveField(collection);
   const { showWarning, warningMessage } = isSensitive(awsv4Auth?.secretAccessKey);
 
-  const handleSave = () => dispatch(saveCollectionSettings(collection.uid));
+  const handleSave = () => dispatch(saveCollectionRoot(collection.uid));
 
   const handleAccessKeyIdChange = (accessKeyId) => {
     dispatch(
@@ -123,20 +123,19 @@ const AwsV4Auth = ({ collection }) => {
 
   return (
     <StyledWrapper className="mt-2 w-full">
-      <label className="block mb-1">Access Key ID</label>
-      <div className="single-line-editor-wrapper mb-3">
+      <label className="block font-medium mb-2">Access Key ID</label>
+      <div className="single-line-editor-wrapper mb-2">
         <SingleLineEditor
           value={awsv4Auth.accessKeyId || ''}
           theme={storedTheme}
           onSave={handleSave}
           onChange={(val) => handleAccessKeyIdChange(val)}
           collection={collection}
-          isCompact
         />
       </div>
 
-      <label className="block mb-1">Secret Access Key</label>
-      <div className="single-line-editor-wrapper mb-3 flex items-center">
+      <label className="block font-medium mb-2">Secret Access Key</label>
+      <div className="single-line-editor-wrapper mb-2 flex items-center">
         <SingleLineEditor
           value={awsv4Auth.secretAccessKey || ''}
           theme={storedTheme}
@@ -144,56 +143,51 @@ const AwsV4Auth = ({ collection }) => {
           onChange={(val) => handleSecretAccessKeyChange(val)}
           collection={collection}
           isSecret={true}
-          isCompact
         />
         {showWarning && <SensitiveFieldWarning fieldName="awsv4-secret-access-key" warningMessage={warningMessage} />}
       </div>
 
-      <label className="block mb-1">Session Token</label>
-      <div className="single-line-editor-wrapper mb-3">
+      <label className="block font-medium mb-2">Session Token</label>
+      <div className="single-line-editor-wrapper mb-2">
         <SingleLineEditor
           value={awsv4Auth.sessionToken || ''}
           theme={storedTheme}
           onSave={handleSave}
           onChange={(val) => handleSessionTokenChange(val)}
           collection={collection}
-          isCompact
         />
       </div>
 
-      <label className="block mb-1">Service</label>
-      <div className="single-line-editor-wrapper mb-3">
+      <label className="block font-medium mb-2">Service</label>
+      <div className="single-line-editor-wrapper mb-2">
         <SingleLineEditor
           value={awsv4Auth.service || ''}
           theme={storedTheme}
           onSave={handleSave}
           onChange={(val) => handleServiceChange(val)}
           collection={collection}
-          isCompact
         />
       </div>
 
-      <label className="block mb-1">Region</label>
-      <div className="single-line-editor-wrapper mb-3">
+      <label className="block font-medium mb-2">Region</label>
+      <div className="single-line-editor-wrapper mb-2">
         <SingleLineEditor
           value={awsv4Auth.region || ''}
           theme={storedTheme}
           onSave={handleSave}
           onChange={(val) => handleRegionChange(val)}
           collection={collection}
-          isCompact
         />
       </div>
 
-      <label className="block mb-1">Profile Name</label>
-      <div className="single-line-editor-wrapper">
+      <label className="block font-medium mb-2">Profile Name</label>
+      <div className="single-line-editor-wrapper mb-2">
         <SingleLineEditor
           value={awsv4Auth.profileName || ''}
           theme={storedTheme}
           onSave={handleSave}
           onChange={(val) => handleProfileNameChange(val)}
           collection={collection}
-          isCompact
         />
       </div>
     </StyledWrapper>

packages/bruno-app/src/components/CollectionSettings/Auth/BasicAuth/StyledWrapper.js

@@ -2,8 +2,7 @@ import styled from 'styled-components';
 
 const Wrapper = styled.div`
   label {
-    font-size: ${(props) => props.theme.font.size.sm};
-    color: ${(props) => props.theme.colors.text.subtext1};
+    font-size: 0.8125rem;
   }
 
   .single-line-editor-wrapper {

packages/bruno-app/src/components/CollectionSettings/Auth/BasicAuth/index.js

@@ -6,18 +6,18 @@ import { useTheme } from 'providers/Theme';
 import { useDispatch } from 'react-redux';
 import SingleLineEditor from 'components/SingleLineEditor';
 import { updateCollectionAuth } from 'providers/ReduxStore/slices/collections';
-import { saveCollectionSettings } from 'providers/ReduxStore/slices/collections/actions';
+import { saveCollectionRoot } from 'providers/ReduxStore/slices/collections/actions';
 import StyledWrapper from './StyledWrapper';
 
 const BasicAuth = ({ collection }) => {
   const dispatch = useDispatch();
   const { storedTheme } = useTheme();
 
-  const basicAuth = collection.draft?.root ? get(collection, 'draft.root.request.auth.basic', {}) : get(collection, 'root.request.auth.basic', {});
+  const basicAuth = get(collection, 'root.request.auth.basic', {});
   const { isSensitive } = useDetectSensitiveField(collection);
   const { showWarning, warningMessage } = isSensitive(basicAuth?.password);
 
-  const handleSave = () => dispatch(saveCollectionSettings(collection.uid));
+  const handleSave = () => dispatch(saveCollectionRoot(collection.uid));
 
   const handleUsernameChange = (username) => {
     dispatch(
@@ -47,19 +47,18 @@ const BasicAuth = ({ collection }) => {
 
   return (
     <StyledWrapper className="mt-2 w-full">
-      <label className="block mb-1">Username</label>
-      <div className="single-line-editor-wrapper mb-3">
+      <label className="block font-medium mb-2">Username</label>
+      <div className="single-line-editor-wrapper mb-2">
         <SingleLineEditor
           value={basicAuth.username || ''}
           theme={storedTheme}
           onSave={handleSave}
           onChange={(val) => handleUsernameChange(val)}
           collection={collection}
-          isCompact
         />
       </div>
 
-      <label className="block mb-1">Password</label>
+      <label className="block font-medium mb-2">Password</label>
       <div className="single-line-editor-wrapper flex items-center">
         <SingleLineEditor
           value={basicAuth.password || ''}
@@ -68,7 +67,6 @@ const BasicAuth = ({ collection }) => {
           onChange={(val) => handlePasswordChange(val)}
           collection={collection}
           isSecret={true}
-          isCompact
         />
         {showWarning && <SensitiveFieldWarning fieldName="basic-password" warningMessage={warningMessage} />}
       </div>

packages/bruno-app/src/components/CollectionSettings/Auth/BearerAuth/StyledWrapper.js

@@ -2,8 +2,7 @@ import styled from 'styled-components';
 
 const Wrapper = styled.div`
   label {
-    font-size: ${(props) => props.theme.font.size.sm};
-    color: ${(props) => props.theme.colors.text.subtext1};
+    font-size: 0.8125rem;
   }
 
   .single-line-editor-wrapper {

packages/bruno-app/src/components/CollectionSettings/Auth/BearerAuth/index.js

@@ -6,18 +6,18 @@ import { useTheme } from 'providers/Theme';
 import { useDispatch } from 'react-redux';
 import SingleLineEditor from 'components/SingleLineEditor';
 import { updateCollectionAuth } from 'providers/ReduxStore/slices/collections';
-import { saveCollectionSettings } from 'providers/ReduxStore/slices/collections/actions';
+import { saveCollectionRoot } from 'providers/ReduxStore/slices/collections/actions';
 import StyledWrapper from './StyledWrapper';
 
 const BearerAuth = ({ collection }) => {
   const dispatch = useDispatch();
   const { storedTheme } = useTheme();
 
-  const bearerToken = collection.draft?.root ? get(collection, 'draft.root.request.auth.bearer.token', '') : get(collection, 'root.request.auth.bearer.token', '');
+  const bearerToken = get(collection, 'root.request.auth.bearer.token', '');
   const { isSensitive } = useDetectSensitiveField(collection);
   const { showWarning, warningMessage } = isSensitive(bearerToken);
 
-  const handleSave = () => dispatch(saveCollectionSettings(collection.uid));
+  const handleSave = () => dispatch(saveCollectionRoot(collection.uid));
 
   const handleTokenChange = (token) => {
     dispatch(
@@ -33,7 +33,7 @@ const BearerAuth = ({ collection }) => {
 
   return (
     <StyledWrapper className="mt-2 w-full">
-      <label className="block mb-1">Token</label>
+      <label className="block font-medium mb-2">Token</label>
       <div className="single-line-editor-wrapper flex items-center">
         <SingleLineEditor
           value={bearerToken}
@@ -42,7 +42,6 @@ const BearerAuth = ({ collection }) => {
           onChange={(val) => handleTokenChange(val)}
           collection={collection}
           isSecret={true}
-          isCompact
         />
         {showWarning && <SensitiveFieldWarning fieldName="bearer-token" warningMessage={warningMessage} />}
       </div>

packages/bruno-app/src/components/CollectionSettings/Auth/DigestAuth/StyledWrapper.js

@@ -2,8 +2,7 @@ import styled from 'styled-components';
 
 const Wrapper = styled.div`
   label {
-    font-size: ${(props) => props.theme.font.size.sm};
-    color: ${(props) => props.theme.colors.text.subtext1};
+    font-size: 0.8125rem;
   }
 
   .single-line-editor-wrapper {

packages/bruno-app/src/components/CollectionSettings/Auth/DigestAuth/index.js

@@ -6,18 +6,18 @@ import { useTheme } from 'providers/Theme';
 import { useDispatch } from 'react-redux';
 import SingleLineEditor from 'components/SingleLineEditor';
 import { updateCollectionAuth } from 'providers/ReduxStore/slices/collections';
-import { saveCollectionSettings } from 'providers/ReduxStore/slices/collections/actions';
+import { saveCollectionRoot } from 'providers/ReduxStore/slices/collections/actions';
 import StyledWrapper from './StyledWrapper';
 
 const DigestAuth = ({ collection }) => {
   const dispatch = useDispatch();
   const { storedTheme } = useTheme();
 
-  const digestAuth = collection.draft?.root ? get(collection, 'draft.root.request.auth.digest', {}) : get(collection, 'root.request.auth.digest', {});
+  const digestAuth = get(collection, 'root.request.auth.digest', {});
   const { isSensitive } = useDetectSensitiveField(collection);
   const { showWarning, warningMessage } = isSensitive(digestAuth?.password);
 
-  const handleSave = () => dispatch(saveCollectionSettings(collection.uid));
+  const handleSave = () => dispatch(saveCollectionRoot(collection.uid));
 
   const handleUsernameChange = (username) => {
     dispatch(
@@ -47,19 +47,18 @@ const DigestAuth = ({ collection }) => {
 
   return (
     <StyledWrapper className="mt-2 w-full">
-      <label className="block mb-1">Username</label>
-      <div className="single-line-editor-wrapper mb-3">
+      <label className="block font-medium mb-2">Username</label>
+      <div className="single-line-editor-wrapper mb-2">
         <SingleLineEditor
           value={digestAuth.username || ''}
           theme={storedTheme}
           onSave={handleSave}
           onChange={(val) => handleUsernameChange(val)}
           collection={collection}
-          isCompact
         />
       </div>
 
-      <label className="block mb-1">Password</label>
+      <label className="block font-medium mb-2">Password</label>
       <div className="single-line-editor-wrapper flex items-center">
         <SingleLineEditor
           value={digestAuth.password || ''}
@@ -68,7 +67,6 @@ const DigestAuth = ({ collection }) => {
           onChange={(val) => handlePasswordChange(val)}
           collection={collection}
           isSecret={true}
-          isCompact
         />
         {showWarning && <SensitiveFieldWarning fieldName="digest-password" warningMessage={warningMessage} />}
       </div>

packages/bruno-app/src/components/CollectionSettings/Auth/NTLMAuth/StyledWrapper.js

@@ -2,8 +2,7 @@ import styled from 'styled-components';
 
 const Wrapper = styled.div`
   label {
-    font-size: ${(props) => props.theme.font.size.sm};
-    color: ${(props) => props.theme.colors.text.subtext1};
+    font-size: 0.8125rem;
   }
 
   .single-line-editor-wrapper {

packages/bruno-app/src/components/CollectionSettings/Auth/NTLMAuth/index.js

@@ -6,18 +6,25 @@ import { useTheme } from 'providers/Theme';
 import { useDispatch } from 'react-redux';
 import SingleLineEditor from 'components/SingleLineEditor';
 import { updateCollectionAuth } from 'providers/ReduxStore/slices/collections';
-import { saveCollectionSettings } from 'providers/ReduxStore/slices/collections/actions';
+import { saveCollectionRoot } from 'providers/ReduxStore/slices/collections/actions';
 import StyledWrapper from './StyledWrapper';
 
+
+
+
+
 const NTLMAuth = ({ collection }) => {
+
+
   const dispatch = useDispatch();
   const { storedTheme } = useTheme();
 
-  const ntlmAuth = collection.draft?.root ? get(collection, 'draft.root.request.auth.ntlm', {}) : get(collection, 'root.request.auth.ntlm', {});
+  const ntlmAuth = get(collection, 'root.request.auth.ntlm', {});
   const { isSensitive } = useDetectSensitiveField(collection);
   const { showWarning, warningMessage } = isSensitive(ntlmAuth?.password);
 
-  const handleSave = () => dispatch(saveCollectionSettings(collection.uid));
+  const handleSave = () => dispatch(saveCollectionRoot(collection.uid));
+
 
   const handleUsernameChange = (username) => {
     dispatch(
@@ -60,24 +67,26 @@ const NTLMAuth = ({ collection }) => {
         }
       })
     );
-  };
+  };  
+
+
+
 
   return (
     <StyledWrapper className="mt-2 w-full">
-      <label className="block mb-1">Username</label>
-      <div className="single-line-editor-wrapper mb-3">
+      <label className="block font-medium mb-2">Username</label>
+      <div className="single-line-editor-wrapper mb-2">
         <SingleLineEditor
           value={ntlmAuth.username || ''}
           theme={storedTheme}
           onSave={handleSave}
           onChange={(val) => handleUsernameChange(val)}
           collection={collection}
-          isCompact
         />
       </div>
 
-      <label className="block mb-1">Password</label>
-      <div className="single-line-editor-wrapper mb-3 flex items-center">
+      <label className="block font-medium mb-2">Password</label>
+      <div className="single-line-editor-wrapper flex items-center">
         <SingleLineEditor
           value={ntlmAuth.password || ''}
           theme={storedTheme}
@@ -85,12 +94,11 @@ const NTLMAuth = ({ collection }) => {
           onChange={(val) => handlePasswordChange(val)}
           collection={collection}
           isSecret={true}
-          isCompact
         />
         {showWarning && <SensitiveFieldWarning fieldName="ntlm-password" warningMessage={warningMessage} />}
       </div>
 
-      <label className="block mb-1">Domain</label>
+      <label className="block font-medium mb-2">Domain</label>
       <div className="single-line-editor-wrapper">
         <SingleLineEditor
           value={ntlmAuth.domain || ''}
@@ -98,7 +106,6 @@ const NTLMAuth = ({ collection }) => {
           onSave={handleSave}
           onChange={(val) => handleDomainChange(val)}
           collection={collection}
-          isCompact
         />
       </div>
     </StyledWrapper>

packages/bruno-app/src/components/CollectionSettings/Auth/OAuth2/StyledWrapper.js

@@ -2,7 +2,7 @@ import styled from 'styled-components';
 
 const Wrapper = styled.div`
   label {
-    font-size: ${(props) => props.theme.font.size.base};
+    font-size: 0.8125rem;
   }
   .single-line-editor-wrapper {
     max-width: 400px;

packages/bruno-app/src/components/CollectionSettings/Auth/OAuth2/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import get from 'lodash/get';
 import StyledWrapper from './StyledWrapper';
-import { saveCollectionSettings } from 'providers/ReduxStore/slices/collections/actions';
+import { saveCollectionRoot } from 'providers/ReduxStore/slices/collections/actions';
 import OAuth2AuthorizationCode from 'components/RequestPane/Auth/OAuth2/AuthorizationCode/index';
 import { updateCollectionAuth } from 'providers/ReduxStore/slices/collections/index';
 import { useDispatch } from 'react-redux';
@@ -10,14 +10,14 @@ import OAuth2ClientCredentials from 'components/RequestPane/Auth/OAuth2/ClientCr
 import OAuth2Implicit from 'components/RequestPane/Auth/OAuth2/Implicit/index';
 import GrantTypeSelector from 'components/RequestPane/Auth/OAuth2/GrantTypeSelector/index';
 
-const GrantTypeComponentMap = ({ collection }) => {
+const GrantTypeComponentMap = ({collection }) => {
   const dispatch = useDispatch();
 
   const save = () => {
-    dispatch(saveCollectionSettings(collection.uid));
+    dispatch(saveCollectionRoot(collection.uid));
   };
 
-  let request = collection.draft?.root ? get(collection, 'draft.root.request', {}) : get(collection, 'root.request', {});
+  let request = collection.draft ? get(collection, 'draft.request', {}) : get(collection, 'root.request', {});
   const grantType = get(request, 'auth.oauth2.grantType', {});
 
   switch (grantType) {
@@ -40,7 +40,7 @@ const GrantTypeComponentMap = ({ collection }) => {
 };
 
 const OAuth2 = ({ collection }) => {
-  let request = collection.draft?.root ? get(collection, 'draft.root.request', {}) : get(collection, 'root.request', {});
+  let request = collection.draft ? get(collection, 'draft.request', {}) : get(collection, 'root.request', {});
 
   return (
     <StyledWrapper className="mt-2 w-full">

packages/bruno-app/src/components/CollectionSettings/Auth/WsseAuth/StyledWrapper.js

@@ -2,8 +2,7 @@ import styled from 'styled-components';
 
 const Wrapper = styled.div`
   label {
-    font-size: ${(props) => props.theme.font.size.sm};
-    color: ${(props) => props.theme.colors.text.subtext1};
+    font-size: 0.8125rem;
   }
 
   .single-line-editor-wrapper {

packages/bruno-app/src/components/CollectionSettings/Auth/WsseAuth/index.js

@@ -6,18 +6,18 @@ import { useTheme } from 'providers/Theme';
 import { useDispatch } from 'react-redux';
 import SingleLineEditor from 'components/SingleLineEditor';
 import { updateCollectionAuth } from 'providers/ReduxStore/slices/collections';
-import { saveCollectionSettings } from 'providers/ReduxStore/slices/collections/actions';
+import { saveCollectionRoot } from 'providers/ReduxStore/slices/collections/actions';
 import StyledWrapper from './StyledWrapper';
 
 const WsseAuth = ({ collection }) => {
   const dispatch = useDispatch();
   const { storedTheme } = useTheme();
 
-  const wsseAuth = collection.draft?.root ? get(collection, 'draft.root.request.auth.wsse', {}) : get(collection, 'root.request.auth.wsse', {});
+  const wsseAuth = get(collection, 'root.request.auth.wsse', {});
   const { isSensitive } = useDetectSensitiveField(collection);
   const { showWarning, warningMessage } = isSensitive(wsseAuth?.password);
 
-  const handleSave = () => dispatch(saveCollectionSettings(collection.uid));
+  const handleSave = () => dispatch(saveCollectionRoot(collection.uid));
 
   const handleUserChange = (username) => {
     dispatch(
@@ -47,19 +47,18 @@ const WsseAuth = ({ collection }) => {
 
   return (
     <StyledWrapper className="mt-2 w-full">
-      <label className="block mb-1">Username</label>
-      <div className="single-line-editor-wrapper mb-3">
+      <label className="block font-medium mb-2">Username</label>
+      <div className="single-line-editor-wrapper mb-2">
         <SingleLineEditor
           value={wsseAuth.username || ''}
           theme={storedTheme}
           onSave={handleSave}
           onChange={(val) => handleUserChange(val)}
           collection={collection}
-          isCompact
         />
       </div>
 
-      <label className="block mb-1">Password</label>
+      <label className="block font-medium mb-2">Password</label>
       <div className="single-line-editor-wrapper flex items-center">
         <SingleLineEditor
           value={wsseAuth.password || ''}
@@ -68,7 +67,6 @@ const WsseAuth = ({ collection }) => {
           onChange={(val) => handlePasswordChange(val)}
           collection={collection}
           isSecret={true}
-          isCompact
         />
         {showWarning && <SensitiveFieldWarning fieldName="wsse-password" warningMessage={warningMessage} />}
       </div>

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

@@ -8,17 +8,17 @@ import BasicAuth from './BasicAuth';
 import DigestAuth from './DigestAuth';
 import WsseAuth from './WsseAuth';
 import ApiKeyAuth from './ApiKeyAuth/';
-import { saveCollectionSettings } from 'providers/ReduxStore/slices/collections/actions';
+import { saveCollectionRoot } from 'providers/ReduxStore/slices/collections/actions';
 import StyledWrapper from './StyledWrapper';
 import OAuth2 from './OAuth2';
 import NTLMAuth from './NTLMAuth';
-import Button from 'ui/Button';
+
 
 const Auth = ({ collection }) => {
-  const authMode = collection.draft?.root ? get(collection, 'draft.root.request.auth.mode') : get(collection, 'root.request.auth.mode');
+  const authMode = get(collection, 'root.request.auth.mode');
   const dispatch = useDispatch();
 
-  const handleSave = () => dispatch(saveCollectionSettings(collection.uid));
+  const handleSave = () => dispatch(saveCollectionRoot(collection.uid));
 
   const getAuthView = () => {
     switch (authMode) {
@@ -36,7 +36,7 @@ const Auth = ({ collection }) => {
       }
       case 'ntlm': {
         return <NTLMAuth collection={collection} />;
-      }
+      }       
       case 'oauth2': {
         return <OAuth2 collection={collection} />;
       }
@@ -60,9 +60,9 @@ const Auth = ({ collection }) => {
       </div>
       {getAuthView()}
       <div className="mt-6">
-        <Button type="submit" size="sm" onClick={handleSave}>
+        <button type="submit" className="submit btn btn-sm btn-secondary" onClick={handleSave}>
           Save
-        </Button>
+        </button>
       </div>
     </StyledWrapper>
   );

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

@@ -30,11 +30,11 @@ const StyledWrapper = styled.div`
     box-shadow: none;
     transition: border-color ease-in-out 0.1s;
     border-radius: 3px;
-    background-color: ${(props) => props.theme.input.bg};
-    border: 1px solid ${(props) => props.theme.input.border};
+    background-color: ${(props) => props.theme.modal.input.bg};
+    border: 1px solid ${(props) => props.theme.modal.input.border};
 
     &:focus {
-      border: solid 1px ${(props) => props.theme.input.focusBorder} !important;
+      border: solid 1px ${(props) => props.theme.modal.input.focusBorder} !important;
       outline: none !important;
     }
   }
@@ -48,37 +48,32 @@ const StyledWrapper = styled.div`
   }
 
   .protocol-https,
-  .protocol-grpcs,
-  .protocol-wss {
+  .protocol-grpcs {
     position: absolute;
     right: 8px;
     top: 0;
     bottom: 0;
+    transition: transform 0.3s ease-in-out;
     display: flex;
     align-items: center;
     justify-content: center;
   }
 
   .protocol-https {
-    animation: slideUpDown 9s infinite;
+    animation: slideUpDown 6s infinite;
     transform: translateY(0);
   }
 
   .protocol-grpcs {
-    animation: slideUpDown 9s infinite 3s;
-    transform: translateY(100%);
-  }
-
-  .protocol-wss {
-    animation: slideUpDown 9s infinite 6s;
+    animation: slideUpDown 6s infinite 3s;
     transform: translateY(100%);
   }
 
   @keyframes slideUpDown {
-    0%, 30% {
+    0%, 45% {
       transform: translateY(0);
     }
-    33.33%, 97% {
+    50%, 95% {
       transform: translateY(100%);
     }
     100% {

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

@@ -9,19 +9,8 @@ import SensitiveFieldWarning from 'components/SensitiveFieldWarning/index';
 import SingleLineEditor from 'components/SingleLineEditor/index';
 import { useDetectSensitiveField } from 'hooks/useDetectSensitiveField/index';
 import { useTheme } from 'styled-components';
-import { useDispatch } from 'react-redux';
-import { updateCollectionClientCertificates } from 'providers/ReduxStore/slices/collections';
-import { saveCollectionSettings } from 'providers/ReduxStore/slices/collections/actions';
-import get from 'lodash/get';
-import Button from 'ui/Button';
 
-const ClientCertSettings = ({ collection }) => {
-  const dispatch = useDispatch();
-
-  // Get client certs from draft if exists, otherwise from brunoConfig
-  const clientCertConfig = collection.draft?.brunoConfig
-    ? get(collection, 'draft.brunoConfig.clientCertificates.certs', [])
-    : get(collection, 'brunoConfig.clientCertificates.certs', []);
+const ClientCertSettings = ({ collection, clientCertConfig, onUpdate, onRemove }) => {
   const certFilePathInputRef = useRef();
   const keyFilePathInputRef = useRef();
   const pfxFilePathInputRef = useRef();
@@ -40,7 +29,7 @@ const ClientCertSettings = ({ collection }) => {
       domain: Yup.string()
         .required()
         .trim()
-        .test('not-empty-after-trim', 'Domain is required', (value) => value && value.trim().length > 0),
+        .test('not-empty-after-trim', 'Domain is required', value => value && value.trim().length > 0),
       type: Yup.string().required().oneOf(['cert', 'pfx']),
       certFilePath: Yup.string().when('type', {
         is: (type) => type == 'cert',
@@ -74,19 +63,7 @@ const ClientCertSettings = ({ collection }) => {
           passphrase: values.passphrase
         };
       }
-
-      // Add the new cert to the existing certs in draft
-      const updatedCerts = [...clientCertConfig, relevantValues];
-      const clientCertificates = {
-        enabled: true,
-        certs: updatedCerts
-      };
-
-      dispatch(updateCollectionClientCertificates({
-        collectionUid: collection.uid,
-        clientCertificates
-      }));
-
+      onUpdate(relevantValues);
       formik.resetForm();
       resetFileInputFields();
     }
@@ -104,15 +81,9 @@ const ClientCertSettings = ({ collection }) => {
   };
 
   const resetFileInputFields = () => {
-    if (certFilePathInputRef.current) {
-      certFilePathInputRef.current.value = '';
-    }
-    if (keyFilePathInputRef.current) {
-      keyFilePathInputRef.current.value = '';
-    }
-    if (pfxFilePathInputRef.current) {
-      pfxFilePathInputRef.current.value = '';
-    }
+    certFilePathInputRef.current.value = '';
+    keyFilePathInputRef.current.value = '';
+    pfxFilePathInputRef.current.value = '';
   };
 
   const handleTypeChange = (e) => {
@@ -128,49 +99,34 @@ const ClientCertSettings = ({ collection }) => {
     }
   };
 
-  const handleRemove = (indexToRemove) => {
-    const updatedCerts = clientCertConfig.filter((cert, index) => index !== indexToRemove);
-    const clientCertificates = {
-      enabled: true,
-      certs: updatedCerts
-    };
-
-    dispatch(updateCollectionClientCertificates({
-      collectionUid: collection.uid,
-      clientCertificates
-    }));
-  };
-
-  const handleSave = () => dispatch(saveCollectionSettings(collection.uid));
-
   return (
     <StyledWrapper className="w-full h-full">
       <div className="text-xs mb-4 text-muted">Add client certificates to be used for specific domains.</div>
 
-      <h1 className="font-medium">Client Certificates</h1>
+      <h1 className="font-semibold">Client Certificates</h1>
       <ul className="mt-4">
         {!clientCertConfig.length
           ? 'No client certificates added'
           : 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>
-                  <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={() => handleRemove(index)} className="remove-certificate ml-2">
-                    <IconTrash size={18} strokeWidth={1.5} />
-                  </button>
+            <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-medium mt-8 mb-2">Add Client Certificate</h1>
+      <h1 className="font-semibold mt-8 mb-2">Add Client Certificate</h1>
       <form className="bruno-form" onSubmit={formik.handleSubmit}>
         <div className="mb-3 flex items-center">
           <label className="settings-label" htmlFor="domain">
@@ -181,7 +137,6 @@ const ClientCertSettings = ({ collection }) => {
               <span className="protocol-placeholder">
                 <span className="protocol-https">https://</span>
                 <span className="protocol-grpcs">grpcs://</span>
-                <span className="protocol-wss">wss://</span>
               </span>
             </div>
             <input
@@ -374,14 +329,10 @@ const ClientCertSettings = ({ collection }) => {
             <div className="ml-1 text-red-500">{formik.errors.passphrase}</div>
           ) : null}
         </div>
-        <div className="mt-6 flex flex-row gap-2 items-center">
-          <Button type="submit" size="sm" data-testid="add-client-cert">
+        <div className="mt-6">
+          <button type="submit" className="submit btn btn-sm btn-secondary">
             Add
-          </Button>
-          <div className="h-4 border-l border-gray-600"></div>
-          <Button type="button" size="sm" onClick={handleSave}>
-            Save
-          </Button>
+          </button>
         </div>
       </form>
     </StyledWrapper>

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

@@ -1,22 +1,20 @@
 import 'github-markdown-css/github-markdown.css';
 import get from 'lodash/get';
-import { updateCollectionDocs, deleteCollectionDraft } from 'providers/ReduxStore/slices/collections';
+import { updateCollectionDocs } from 'providers/ReduxStore/slices/collections';
 import { useTheme } from 'providers/Theme';
 import { useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { saveCollectionSettings } from 'providers/ReduxStore/slices/collections/actions';
+import { saveCollectionRoot } from 'providers/ReduxStore/slices/collections/actions';
 import Markdown from 'components/MarkDown';
 import CodeEditor from 'components/CodeEditor';
 import StyledWrapper from './StyledWrapper';
 import { IconEdit, IconX, IconFileText } from '@tabler/icons';
-import Button from 'ui/Button/index';
-import ActionIcon from 'ui/ActionIcon/index';
 
 const Docs = ({ collection }) => {
   const dispatch = useDispatch();
   const { displayedTheme } = useTheme();
   const [isEditing, setIsEditing] = useState(false);
-  const docs = collection.draft?.root ? get(collection, 'draft.root.docs', '') : get(collection, 'root.docs', '');
+  const docs = get(collection, 'root.docs', '');
   const preferences = useSelector((state) => state.app.preferences);
 
   const toggleViewMode = () => {
@@ -33,41 +31,41 @@ const Docs = ({ collection }) => {
   };
 
   const handleDiscardChanges = () => {
-    dispatch((
+    dispatch(
       updateCollectionDocs({
         collectionUid: collection.uid,
         docs: docs
-      }))
+      })
     );
     toggleViewMode();
-  };
+  }
 
   const onSave = () => {
-    dispatch(saveCollectionSettings(collection.uid));
+    dispatch(saveCollectionRoot(collection.uid));
     toggleViewMode();
-  };
+  }
 
   return (
     <StyledWrapper className="h-full w-full relative flex flex-col">
-      <div className="flex flex-row w-full justify-between items-center mb-4">
-        <div className="text-lg font-medium flex items-center gap-2">
+      <div className='flex flex-row w-full justify-between items-center mb-4'>
+        <div className='text-lg font-medium flex items-center gap-2'>
           <IconFileText size={20} strokeWidth={1.5} />
           Documentation
         </div>
-        <div className="flex flex-row gap-2 items-center justify-center">
+        <div className='flex flex-row gap-2 items-center justify-center'>
           {isEditing ? (
             <>
-              <Button type="button" color="secondary" onClick={handleDiscardChanges}>
-                Cancel
-              </Button>
-              <Button type="button" onClick={onSave}>
+              <div className="editing-mode" role="tab" onClick={handleDiscardChanges}>
+                <IconX className="cursor-pointer" size={20} strokeWidth={1.5} />
+              </div>
+              <button type="submit" className="submit btn btn-sm btn-secondary" onClick={onSave}>
                 Save
-              </Button>
+              </button>
             </>
           ) : (
-            <ActionIcon className="editing-mode" onClick={toggleViewMode}>
-              <IconEdit className="cursor-pointer" size={16} strokeWidth={1.5} />
-            </ActionIcon>
+            <div className="editing-mode" role="tab" onClick={toggleViewMode}>
+              <IconEdit className="cursor-pointer" size={20} strokeWidth={1.5} />
+            </div>
           )}
         </div>
       </div>
@@ -83,13 +81,14 @@ const Docs = ({ collection }) => {
           fontSize={get(preferences, 'font.codeFontSize')}
         />
       ) : (
-        <div className="h-full overflow-auto pl-1">
-          <div className="h-[1px] min-h-[500px]">
+        <div className='h-full overflow-auto pl-1'>
+          <div className='h-[1px] min-h-[500px]'>
             {
-              docs?.length > 0
-                ? <Markdown collectionPath={collection.pathname} onDoubleClick={toggleViewMode} content={docs} />
-                : <Markdown collectionPath={collection.pathname} onDoubleClick={toggleViewMode} content={documentationPlaceholder} />
-            }
+              docs?.length > 0 ?
+                <Markdown collectionPath={collection.pathname} onDoubleClick={toggleViewMode} content={docs} />
+                :
+                <Markdown collectionPath={collection.pathname} onDoubleClick={toggleViewMode} content={documentationPlaceholder} />
+            }         
           </div>
         </div>
       )}
@@ -99,6 +98,7 @@ const Docs = ({ collection }) => {
 
 export default Docs;
 
+
 const documentationPlaceholder = `
 Welcome to your collection documentation! This space is designed to help you document your API collection effectively.
 

packages/bruno-app/src/components/CollectionSettings/Headers/StyledWrapper.js

@@ -6,7 +6,7 @@ const Wrapper = styled.div`
   table {
     width: 100%;
     border-collapse: collapse;
-    font-weight: 500;
+    font-weight: 600;
     table-layout: fixed;
 
     thead,
@@ -16,7 +16,7 @@ const Wrapper = styled.div`
 
     thead {
       color: ${(props) => props.theme.table.thead.color};
-      font-size: ${(props) => props.theme.font.size.base};
+      font-size: 0.8125rem;
       user-select: none;
     }
     td {
@@ -33,7 +33,7 @@ const Wrapper = styled.div`
   }
 
   .btn-add-header {
-    font-size: ${(props) => props.theme.font.size.base};
+    font-size: 0.8125rem;
   }
 
   input[type='text'] {

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

@@ -1,78 +1,77 @@
-import React, { useState, useCallback } from 'react';
+import React, { useState } from 'react';
 import get from 'lodash/get';
+import cloneDeep from 'lodash/cloneDeep';
+import { IconTrash } from '@tabler/icons';
 import { useDispatch } from 'react-redux';
 import { useTheme } from 'providers/Theme';
-import { setCollectionHeaders } from 'providers/ReduxStore/slices/collections';
-import { saveCollectionSettings } from 'providers/ReduxStore/slices/collections/actions';
+import {
+  addCollectionHeader,
+  updateCollectionHeader,
+  deleteCollectionHeader,
+  setCollectionHeaders
+} from 'providers/ReduxStore/slices/collections';
+import { saveCollectionRoot } from 'providers/ReduxStore/slices/collections/actions';
 import SingleLineEditor from 'components/SingleLineEditor';
-import EditableTable from 'components/EditableTable';
 import StyledWrapper from './StyledWrapper';
 import { headers as StandardHTTPHeaders } from 'know-your-http-well';
 import { MimeTypes } from 'utils/codemirror/autocompleteConstants';
 import BulkEditor from 'components/BulkEditor/index';
-import Button from 'ui/Button';
-
 const headerAutoCompleteList = StandardHTTPHeaders.map((e) => e.header);
 
 const Headers = ({ collection }) => {
   const dispatch = useDispatch();
   const { storedTheme } = useTheme();
-  const headers = collection.draft?.root
-    ? get(collection, 'draft.root.request.headers', [])
-    : get(collection, 'root.request.headers', []);
+  const headers = get(collection, 'root.request.headers', []);
   const [isBulkEditMode, setIsBulkEditMode] = useState(false);
 
   const toggleBulkEditMode = () => {
     setIsBulkEditMode(!isBulkEditMode);
   };
 
-  const handleHeadersChange = useCallback((updatedHeaders) => {
-    dispatch(setCollectionHeaders({ collectionUid: collection.uid, headers: updatedHeaders }));
-  }, [dispatch, collection.uid]);
+  const handleBulkHeadersChange = (newHeaders) => {
+    dispatch(setCollectionHeaders({ collectionUid: collection.uid, headers: newHeaders }));
+  };
 
-  const handleSave = () => dispatch(saveCollectionSettings(collection.uid));
+  const addHeader = () => {
+    dispatch(
+      addCollectionHeader({
+        collectionUid: collection.uid
+      })
+    );
+  };
 
-  const columns = [
-    {
-      key: 'name',
-      name: 'Name',
-      isKeyField: true,
-      placeholder: 'Name',
-      width: '30%',
-      render: ({ row, value, onChange, isLastEmptyRow }) => (
-        <SingleLineEditor
-          value={value || ''}
-          theme={storedTheme}
-          onSave={handleSave}
-          onChange={(newValue) => onChange(newValue.replace(/[\r\n]/g, ''))}
-          autocomplete={headerAutoCompleteList}
-          collection={collection}
-          placeholder={isLastEmptyRow ? 'Name' : ''}
-        />
-      )
-    },
-    {
-      key: 'value',
-      name: 'Value',
-      placeholder: 'Value',
-      render: ({ row, value, onChange, isLastEmptyRow }) => (
-        <SingleLineEditor
-          value={value || ''}
-          theme={storedTheme}
-          onSave={handleSave}
-          onChange={onChange}
-          collection={collection}
-          autocomplete={MimeTypes}
-          placeholder={isLastEmptyRow ? 'Value' : ''}
-        />
-      )
+  const handleSave = () => dispatch(saveCollectionRoot(collection.uid));
+  const handleHeaderValueChange = (e, _header, type) => {
+    const header = cloneDeep(_header);
+    switch (type) {
+      case 'name': {
+        header.name = e.target.value;
+        break;
+      }
+      case 'value': {
+        header.value = e.target.value;
+        break;
+      }
+      case 'enabled': {
+        header.enabled = e.target.checked;
+        break;
+      }
     }
-  ];
+    dispatch(
+      updateCollectionHeader({
+        header: header,
+        collectionUid: collection.uid
+      })
+    );
+  };
 
-  const defaultRow = {
-    name: '',
-    value: '',
-    description: ''
+  const handleRemoveHeader = (header) => {
+    dispatch(
+      deleteCollectionHeader({
+        headerUid: header.uid,
+        collectionUid: collection.uid
+      })
+    );
   };
 
   if (isBulkEditMode) {
@@ -83,7 +82,7 @@ const Headers = ({ collection }) => {
         </div>
         <BulkEditor
           params={headers}
-          onChange={handleHeadersChange}
+          onChange={handleBulkHeadersChange}
           onToggle={toggleBulkEditMode}
           onSave={handleSave}
         />
@@ -96,24 +95,94 @@ const Headers = ({ collection }) => {
       <div className="text-xs mb-4 text-muted">
         Add request headers that will be sent with every request in this collection.
       </div>
-      <EditableTable
-        columns={columns}
-        rows={headers}
-        onChange={handleHeadersChange}
-        defaultRow={defaultRow}
-      />
-      <div className="flex justify-end mt-2">
+      <table>
+        <thead>
+          <tr>
+            <td>Name</td>
+            <td>Value</td>
+            <td></td>
+          </tr>
+        </thead>
+        <tbody>
+          {headers && headers.length
+            ? headers.map((header) => {
+                return (
+                  <tr key={header.uid}>
+                    <td>
+                      <SingleLineEditor
+                        value={header.name}
+                        theme={storedTheme}
+                        onSave={handleSave}
+                        onChange={(newValue) =>
+                          handleHeaderValueChange(
+                            {
+                              target: {
+                                value: newValue
+                              }
+                            },
+                            header,
+                            'name'
+                          )
+                        }
+                        autocomplete={headerAutoCompleteList}
+                        collection={collection}
+                      />
+                    </td>
+                    <td>
+                      <SingleLineEditor
+                        value={header.value}
+                        theme={storedTheme}
+                        onSave={handleSave}
+                        onChange={(newValue) =>
+                          handleHeaderValueChange(
+                            {
+                              target: {
+                                value: newValue
+                              }
+                            },
+                            header,
+                            'value'
+                          )
+                        }
+                        collection={collection}
+                        autocomplete={MimeTypes}
+                      />
+                    </td>
+                    <td>
+                      <div className="flex items-center">
+                        <input
+                          type="checkbox"
+                          checked={header.enabled}
+                          tabIndex="-1"
+                          className="mr-3 mousetrap"
+                          onChange={(e) => handleHeaderValueChange(e, header, 'enabled')}
+                        />
+                        <button tabIndex="-1" onClick={() => handleRemoveHeader(header)}>
+                          <IconTrash strokeWidth={1.5} size={20} />
+                        </button>
+                      </div>
+                    </td>
+                  </tr>
+                );
+              })
+            : null}
+        </tbody>
+      </table>
+      <div className="flex justify-between mt-2">
+        <button className="btn-add-header text-link pr-2 py-3 select-none" onClick={addHeader}>
+          + Add Header
+        </button>
         <button className="text-link select-none" onClick={toggleBulkEditMode}>
           Bulk Edit
         </button>
       </div>
+
       <div className="mt-6">
-        <Button type="submit" size="sm" onClick={handleSave}>
+        <button type="submit" className="submit btn btn-sm btn-secondary" onClick={handleSave}>
           Save
-        </Button>
+        </button>
       </div>
     </StyledWrapper>
   );
 };
-
 export default Headers;

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

@@ -1,53 +0,0 @@
-import styled from 'styled-components';
-import { rgba } from 'polished';
-
-const StyledWrapper = styled.div`
-  .icon-box {
-    &.location {
-      background-color: ${(props) => rgba(props.theme.textLink, 0.08)};
-      border: 1px solid ${(props) => rgba(props.theme.textLink, 0.09)};
-
-      svg {
-        color: ${(props) => props.theme.textLink};
-      }
-    }
-
-    &.environments {
-      background-color: ${(props) => rgba(props.theme.colors.text.green, 0.08)};
-      border: 1px solid ${(props) => rgba(props.theme.colors.text.green, 0.09)};
-
-      svg {
-        color: ${(props) => props.theme.colors.text.green};
-      }
-    }
-
-    &.requests {
-      background-color: ${(props) => rgba(props.theme.colors.text.purple, 0.08)};
-      border: 1px solid ${(props) => rgba(props.theme.colors.text.purple, 0.09)};
-
-      svg {
-        color: ${(props) => props.theme.colors.text.purple};
-      }
-    }
-
-    &.share {
-      background-color: ${(props) => rgba(props.theme.textLink, 0.08)};
-      border: 1px solid ${(props) => rgba(props.theme.textLink, 0.09)};
-
-      svg {
-        color: ${(props) => props.theme.textLink};
-      }
-    }
-
-    &.generate-docs {
-      background-color: ${(props) => rgba(props.theme.accents.primary, 0.08)};
-      border: 1px solid ${(props) => rgba(props.theme.accents.primary, 0.09)};
-
-      svg {
-        color: ${(props) => props.theme.accents.primary};
-      }
-    }
-  }
-`;
-
-export default StyledWrapper;

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

@@ -1,44 +1,33 @@
-import React from 'react';
+import React from "react";
 import { getTotalRequestCountInCollection } from 'utils/collections/';
-import { IconFolder, IconWorld, IconApi, IconShare, IconBook } from '@tabler/icons';
-import { areItemsLoading, getItemsLoadStats } from 'utils/collections/index';
-import { useState } from 'react';
-import { useSelector, useDispatch } from 'react-redux';
-import ShareCollection from 'components/ShareCollection/index';
-import GenerateDocumentation from 'components/Sidebar/Collections/Collection/GenerateDocumentation';
-import { addTab } from 'providers/ReduxStore/slices/tabs';
-import StyledWrapper from './StyledWrapper';
+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 dispatch = useDispatch();
   const totalRequestsInCollection = getTotalRequestCountInCollection(collection);
 
   const isCollectionLoading = areItemsLoading(collection);
   const { loading: itemsLoadingCount, total: totalItems } = getItemsLoadStats(collection);
   const [showShareCollectionModal, toggleShowShareCollectionModal] = useState(false);
-  const [showGenerateDocumentationModal, setShowGenerateDocumentationModal] = useState(false);
-
-  const globalEnvironments = useSelector((state) => state.globalEnvironments.globalEnvironments);
-
-  const collectionEnvironmentCount = collection.environments?.length || 0;
-  const globalEnvironmentCount = globalEnvironments?.length || 0;
-
+  
   const handleToggleShowShareCollectionModal = (value) => (e) => {
     toggleShowShareCollectionModal(value);
-  };
+  }
 
   return (
-    <StyledWrapper className="w-full flex flex-col h-fit">
+    <div className="w-full flex flex-col h-fit">
       <div className="rounded-lg py-6">
-        <div className="grid gap-5">
+        <div className="grid gap-6">
           {/* Location Row */}
           <div className="flex items-start">
-            <div className="icon-box location flex-shrink-0 p-3 rounded-lg">
-              <IconFolder className="w-5 h-5" stroke={1.5} />
+            <div className="flex-shrink-0 p-3 bg-blue-50 dark:bg-blue-900/20 rounded-lg">
+              <IconFolder className="w-5 h-5 text-blue-500" stroke={1.5} />
             </div>
             <div className="ml-4">
-              <div className="font-medium">Location</div>
-              <div className="mt-1 text-muted break-all">
+              <div className="font-semibold text-sm">Location</div>
+              <div className="mt-1 text-sm text-muted break-all">
                 {collection.pathname}
               </div>
             </div>
@@ -46,90 +35,48 @@ const Info = ({ collection }) => {
 
           {/* Environments Row */}
           <div className="flex items-start">
-            <div className="icon-box environments flex-shrink-0 p-3 rounded-lg">
-              <IconWorld className="w-5 h-5" stroke={1.5} />
+            <div className="flex-shrink-0 p-3 bg-green-50 dark:bg-green-900/20 rounded-lg">
+              <IconWorld className="w-5 h-5 text-green-500" stroke={1.5} />
             </div>
             <div className="ml-4">
-              <div className="font-medium">Environments</div>
-              <div className="mt-1 flex flex-col gap-1">
-                <button
-                  type="button"
-                  className="text-link cursor-pointer hover:underline text-left bg-transparent"
-                  onClick={() => {
-                    dispatch(
-                      addTab({
-                        uid: `${collection.uid}-environment-settings`,
-                        collectionUid: collection.uid,
-                        type: 'environment-settings'
-                      })
-                    );
-                  }}
-                >
-                  {collectionEnvironmentCount} collection environment{collectionEnvironmentCount !== 1 ? 's' : ''}
-                </button>
-                <button
-                  type="button"
-                  className="text-link cursor-pointer hover:underline text-left bg-transparent"
-                  onClick={() => {
-                    dispatch(
-                      addTab({
-                        uid: `${collection.uid}-global-environment-settings`,
-                        collectionUid: collection.uid,
-                        type: 'global-environment-settings'
-                      })
-                    );
-                  }}
-                >
-                  {globalEnvironmentCount} global environment{globalEnvironmentCount !== 1 ? 's' : ''}
-                </button>
+              <div className="font-semibold text-sm">Environments</div>
+              <div className="mt-1 text-sm text-muted">
+                {collection.environments?.length || 0} environment{collection.environments?.length !== 1 ? 's' : ''} configured
               </div>
             </div>
           </div>
 
           {/* Requests Row */}
           <div className="flex items-start">
-            <div className="icon-box requests flex-shrink-0 p-3 rounded-lg">
-              <IconApi className="w-5 h-5" stroke={1.5} />
+            <div className="flex-shrink-0 p-3 bg-purple-50 dark:bg-purple-900/20 rounded-lg">
+              <IconApi className="w-5 h-5 text-purple-500" stroke={1.5} />
             </div>
             <div className="ml-4">
-              <div className="font-medium">Requests</div>
-              <div className="mt-1 text-muted">
+              <div className="font-semibold text-sm">Requests</div>
+              <div className="mt-1 text-sm text-muted">
                 {
-                  isCollectionLoading ? `${totalItems - itemsLoadingCount} out of ${totalItems} requests in the collection loaded` : `${totalRequestsInCollection} request${totalRequestsInCollection !== 1 ? 's' : ''} in collection`
+                  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="icon-box share flex-shrink-0 p-3 rounded-lg">
-              <IconShare className="w-5 h-5" stroke={1.5} />
+            <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-medium h-fit my-auto">Share</div>
-              <div className="group-hover:underline text-link">
+              <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 collectionUid={collection.uid} onClose={handleToggleShowShareCollectionModal(false)} />}
-
-          <div className="flex items-start group cursor-pointer" onClick={() => setShowGenerateDocumentationModal(true)}>
-            <div className="icon-box generate-docs flex-shrink-0 p-3 rounded-lg">
-              <IconBook className="w-5 h-5" stroke={1.5} />
-            </div>
-            <div className="ml-4 h-full flex flex-col justify-start">
-              <div className="font-medium h-fit my-auto">Documentation</div>
-              <div className="group-hover:underline text-link">
-                Generate Docs
-              </div>
-            </div>
-          </div>
-          {showGenerateDocumentationModal && <GenerateDocumentation collectionUid={collection.uid} onClose={() => setShowGenerateDocumentationModal(false)} />}
         </div>
       </div>
-    </StyledWrapper>
+    </div>
   );
 };
 
-export default Info;
+export default Info;

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

@@ -1,29 +1,22 @@
 import styled from 'styled-components';
-import { rgba } from 'polished';
 
 const StyledWrapper = styled.div`
   &.card {
     background-color: ${(props) => props.theme.requestTabPanel.card.bg};
 
     .title {
-      border-top: 1px solid ${(props) => props.theme.table.border};
-      border-left: 1px solid ${(props) => props.theme.table.border};
-      border-right: 1px solid ${(props) => props.theme.table.border};
+      border-top: 1px solid ${(props) => props.theme.requestTabPanel.cardTable.border};
+      border-left: 1px solid ${(props) => props.theme.requestTabPanel.cardTable.border};
+      border-right: 1px solid ${(props) => props.theme.requestTabPanel.cardTable.border};
 
       border-top-left-radius: 3px;
       border-top-right-radius: 3px;
-
-      background-color: ${(props) => props.theme.status.warning.background};
-    }
-
-    .warning-icon {
-      color: ${(props) => props.theme.status.warning.text};
     }
 
     .table {
       thead {
-        color: ${(props) => props.theme.table.thead.color} !important;
-        background: ${(props) => props.theme.sidebar.bg};
+        background-color: ${(props) => props.theme.requestTabPanel.cardTable.table.thead.bg};
+        color: ${(props) => props.theme.requestTabPanel.cardTable.table.thead.color};
       }
     }
   }

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

@@ -1,25 +1,27 @@
 import React from 'react';
-import { flattenItems } from 'utils/collections';
+import { flattenItems } from "utils/collections";
 import { IconAlertTriangle } from '@tabler/icons';
-import StyledWrapper from './StyledWrapper';
+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);
+  const itemsFailedLoading = flattenedItems?.filter(item => item?.partial && !item?.loading);
 
   if (!itemsFailedLoading?.length) {
     return null;
   }
 
-  const handleRequestClick = (item) => (e) => {
+  const handleRequestClick = (item) => e => {
     e.preventDefault();
     if (isItemARequest(item)) {
+      dispatch(hideHomePage());
       if (itemIsOpenedInTabs(item, tabs)) {
         dispatch(
           focusTab({
@@ -37,12 +39,12 @@ const RequestsNotLoaded = ({ collection }) => {
       );
       return;
     }
-  };
+  }
 
   return (
     <StyledWrapper className="w-full card my-2">
-      <div className="flex items-center gap-2 px-3 py-2 title">
-        <IconAlertTriangle size={16} className="warning-icon" />
+      <div className="flex items-center gap-2 px-3 py-2 title bg-yellow-50 dark:bg-yellow-900/20">
+        <IconAlertTriangle size={16} className="text-yellow-500" />
         <span className="font-medium">Following requests were not loaded</span>
       </div>
       <table className="w-full border-collapse">
@@ -59,7 +61,7 @@ const RequestsNotLoaded = ({ collection }) => {
         <tbody>
           {flattenedItems?.map((item, index) => (
             item?.partial && !item?.loading ? (
-              <tr key={index} className="cursor-pointer" onClick={handleRequestClick(item)}>
+              <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/CollectionSettings/Overview/index.js

@@ -1,16 +1,16 @@
-import StyledWrapper from './StyledWrapper';
-import Docs from '../Docs';
-import Info from './Info';
+import StyledWrapper from "./StyledWrapper";
+import Docs from "../Docs";
+import Info from "./Info";
 import { IconBox } from '@tabler/icons';
-import RequestsNotLoaded from './RequestsNotLoaded';
+import RequestsNotLoaded from "./RequestsNotLoaded";
 
 const Overview = ({ collection }) => {
   return (
     <div className="h-full">
-      <div className="grid grid-cols-5 gap-5 h-full">
+      <div className="grid grid-cols-5 gap-4 h-full">
         <div className="col-span-2">
-          <div className="text-lg font-medium flex items-center gap-2">
-            <IconBox size={20} stroke={1.5} />
+          <div className="text-xl font-semibold flex items-center gap-2">
+            <IconBox size={24} stroke={1.5} />
             {collection?.name}
           </div>
           <Info collection={collection} />
@@ -22,6 +22,6 @@ const Overview = ({ collection }) => {
       </div>
     </div>
   );
-};
+}
 
-export default Overview;
+export default Overview;

packages/bruno-app/src/components/CollectionSettings/Presets/StyledWrapper.js

@@ -16,11 +16,11 @@ const StyledWrapper = styled.div`
     box-shadow: none;
     transition: border-color ease-in-out 0.1s;
     border-radius: 3px;
-    background-color: ${(props) => props.theme.input.bg};
-    border: 1px solid ${(props) => props.theme.input.border};
+    background-color: ${(props) => props.theme.modal.input.bg};
+    border: 1px solid ${(props) => props.theme.modal.input.border};
 
     &:focus {
-      border: solid 1px ${(props) => props.theme.input.focusBorder} !important;
+      border: solid 1px ${(props) => props.theme.modal.input.focusBorder} !important;
       outline: none !important;
     }
   }

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

@@ -1,47 +1,39 @@
 import React from 'react';
+import { useFormik } from 'formik';
 import { useDispatch } from 'react-redux';
 import StyledWrapper from './StyledWrapper';
-import { updateCollectionPresets } from 'providers/ReduxStore/slices/collections';
-import { saveCollectionSettings } from 'providers/ReduxStore/slices/collections/actions';
-import { get } from 'lodash';
-import Button from 'ui/Button';
+import toast from 'react-hot-toast';
+import { updateBrunoConfig } from 'providers/ReduxStore/slices/collections/actions';
+import cloneDeep from 'lodash/cloneDeep';
 
 const PresetsSettings = ({ collection }) => {
   const dispatch = useDispatch();
-  const initialPresets = { requestType: 'http', requestUrl: '' };
+  const {
+    brunoConfig: { presets: presets = {} }
+  } = collection;
 
-  // Get presets from draft.brunoConfig if it exists, otherwise from brunoConfig
-  const currentPresets = collection.draft?.brunoConfig
-    ? get(collection, 'draft.brunoConfig.presets', initialPresets)
-    : get(collection, 'brunoConfig.presets', initialPresets);
-
-  // Helper to update presets config
-  const updatePresets = (updates) => {
-    const updatedPresets = { ...currentPresets, ...updates };
-    dispatch(updateCollectionPresets({
-      collectionUid: collection.uid,
-      presets: updatedPresets
-    }));
-  };
-
-  const handleSave = () => dispatch(saveCollectionSettings(collection.uid));
-
-  const handleRequestTypeChange = (e) => {
-    updatePresets({ requestType: e.target.value });
-  };
-
-  const handleRequestUrlChange = (e) => {
-    updatePresets({ requestUrl: e.target.value });
-  };
+  const formik = useFormik({
+    enableReinitialize: true,
+    initialValues: {
+      requestType: presets.requestType || 'http',
+      requestUrl: presets.requestUrl || ''
+    },
+    onSubmit: (newPresets) => {
+      const brunoConfig = cloneDeep(collection.brunoConfig);
+      brunoConfig.presets = newPresets;
+      dispatch(updateBrunoConfig(brunoConfig, collection.uid));
+      toast.success('Collection presets updated');
+    }
+  });
 
   return (
     <StyledWrapper className="h-full w-full">
       <div className="text-xs mb-4 text-muted">
         These presets will be used as the default values for new requests in this collection.
       </div>
-      <div className="bruno-form">
+      <form className="bruno-form" onSubmit={formik.handleSubmit}>
         <div className="mb-3 flex items-center">
-          <label className="settings-label flex items-center" htmlFor="http">
+          <label className="settings-label flex  items-center" htmlFor="enabled">
             Request Type
           </label>
           <div className="flex items-center">
@@ -50,9 +42,9 @@ const PresetsSettings = ({ collection }) => {
               className="cursor-pointer"
               type="radio"
               name="requestType"
-              onChange={handleRequestTypeChange}
+              onChange={formik.handleChange}
               value="http"
-              checked={(currentPresets.requestType || 'http') === 'http'}
+              checked={formik.values.requestType === 'http'}
             />
             <label htmlFor="http" className="ml-1 cursor-pointer select-none">
               HTTP
@@ -63,9 +55,9 @@ const PresetsSettings = ({ collection }) => {
               className="ml-4 cursor-pointer"
               type="radio"
               name="requestType"
-              onChange={handleRequestTypeChange}
+              onChange={formik.handleChange}
               value="graphql"
-              checked={(currentPresets.requestType || 'http') === 'graphql'}
+              checked={formik.values.requestType === 'graphql'}
             />
             <label htmlFor="graphql" className="ml-1 cursor-pointer select-none">
               GraphQL
@@ -76,30 +68,17 @@ const PresetsSettings = ({ collection }) => {
               className="ml-4 cursor-pointer"
               type="radio"
               name="requestType"
-              onChange={handleRequestTypeChange}
+              onChange={formik.handleChange}
               value="grpc"
-              checked={(currentPresets.requestType || 'http') === 'grpc'}
+              checked={formik.values.requestType === 'grpc'}
             />
             <label htmlFor="grpc" className="ml-1 cursor-pointer select-none">
               gRPC
             </label>
-
-            <input
-              id="ws"
-              className="ml-4 cursor-pointer"
-              type="radio"
-              name="requestType"
-              onChange={handleRequestTypeChange}
-              value="ws"
-              checked={(currentPresets.requestType || 'http') === 'ws'}
-            />
-            <label htmlFor="ws" className="ml-1 cursor-pointer select-none">
-              WebSocket
-            </label>
           </div>
         </div>
         <div className="mb-3 flex items-center">
-          <label className="settings-label" htmlFor="request-url">
+          <label className="settings-label" htmlFor="requestUrl">
             Base URL
           </label>
           <div className="flex items-center w-full">
@@ -114,8 +93,8 @@ const PresetsSettings = ({ collection }) => {
                 autoCorrect="off"
                 autoCapitalize="off"
                 spellCheck="false"
-                onChange={handleRequestUrlChange}
-                value={currentPresets.requestUrl || ''}
+                onChange={formik.handleChange}
+                value={formik.values.requestUrl || ''}
                 style={{ width: '100%' }}
               />
             </div>
@@ -123,11 +102,11 @@ const PresetsSettings = ({ collection }) => {
         </div>
 
         <div className="mt-6">
-          <Button type="button" size="sm" onClick={handleSave}>
+          <button type="submit" className="submit btn btn-sm btn-secondary">
             Save
-          </Button>
+          </button>
         </div>
-      </div>
+      </form>
     </StyledWrapper>
   );
 };

packages/bruno-app/src/components/CollectionSettings/Protobuf/StyledWrapper.js

@@ -8,151 +8,6 @@ const StyledWrapper = styled.div`
       color: ${(props) => props.theme.colors.text.danger};
     }
   }
-
-  /* Section labels */
-  label {
-    color: ${(props) => props.theme.text};
-  }
-
-  /* Tooltip icon */
-  .tooltip-icon {
-    color: ${(props) => props.theme.colors.text.muted};
-    cursor: pointer;
-  }
-
-  /* Error messages */
-  .error-message {
-    color: ${(props) => props.theme.colors.text.danger};
-    background-color: ${(props) => props.theme.bg};
-    border-radius: ${(props) => props.theme.border.radius.base};
-  }
-
-  /* Tables */
-  table {
-    width: 100%;
-    border-collapse: collapse;
-
-    thead {
-      th {
-        text-align: left;
-        font-size: ${(props) => props.theme.font.size.xs};
-        font-weight: 500;
-        text-transform: uppercase;
-        letter-spacing: 0.05em;
-        color: ${(props) => props.theme.table.thead.color};
-        border: 1px solid ${(props) => props.theme.table.border};
-        padding: 0.5rem 0.75rem;
-
-        &.text-right {
-          text-align: right;
-        }
-      }
-    }
-
-    tbody {
-      td {
-        border: 1px solid ${(props) => props.theme.table.border};
-        padding: 0.5rem 0.75rem;
-
-        &.text-center {
-          text-align: center;
-        }
-
-        &.text-right {
-          text-align: right;
-        }
-      }
-    }
-  }
-
-  /* File/Directory icons */
-  .file-icon,
-  .folder-icon {
-    color: ${(props) => props.theme.colors.text.muted};
-  }
-
-  /* File/Directory names */
-  .file-name,
-  .directory-name {
-    font-weight: 500;
-    color: ${(props) => props.theme.text};
-  }
-
-  /* Path text */
-  .path-text {
-    font-size: ${(props) => props.theme.font.size.xs};
-    color: ${(props) => props.theme.colors.text.muted};
-    font-family: monospace;
-  }
-
-  /* Empty state */
-  .empty-state {
-    .empty-icon {
-      color: ${(props) => props.theme.colors.text.muted};
-    }
-
-    .empty-text {
-      color: ${(props) => props.theme.colors.text.muted};
-    }
-  }
-
-  /* Invalid file indicator */
-  .invalid-indicator {
-    color: ${(props) => props.theme.colors.text.danger};
-  }
-
-  /* Action buttons */
-  .action-button {
-    padding: 0.25rem;
-    border-radius: ${(props) => props.theme.border.radius.base};
-    transition: all 0.2s;
-
-    &.replace-button {
-      color: ${(props) => props.theme.colors.text.danger};
-
-      &:hover {
-        color: ${(props) => props.theme.colors.text.danger};
-        background-color: ${(props) => props.theme.colors.bg.danger}20;
-      }
-    }
-
-    &.remove-button {
-      color: ${(props) => props.theme.colors.text.muted};
-
-      &:hover {
-        color: ${(props) => props.theme.text};
-        background-color: ${(props) => props.theme.dropdown.hoverBg};
-      }
-    }
-  }
-
-  /* Checkbox */
-  input[type='checkbox'] {
-    cursor: pointer;
-    accent-color: ${(props) => props.theme.colors.accent};
-    border-color: ${(props) => props.theme.table.border};
-
-    &:focus {
-      outline: none;
-      border-color: ${(props) => props.theme.primary.solid};
-    }
-  }
-
-  /* Add button */
-  .btn-add-param {
-    color: ${(props) => props.theme.textLink};
-    padding-right: 0.5rem;
-    padding-top: 0.75rem;
-    padding-bottom: 0.75rem;
-    margin-top: 0.5rem;
-    user-select: none;
-    cursor: pointer;
-    transition: color 0.2s;
-
-    &:hover {
-      color: ${(props) => props.theme.primary.solid};
-    }
-  }
 `;
 
 export default StyledWrapper;

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

@@ -1,5 +1,4 @@
 import React, { useRef } from 'react';
-import { useDispatch } from 'react-redux';
 import StyledWrapper from './StyledWrapper';
 import {
   IconTrash,
@@ -11,11 +10,8 @@ import {
 import { getBasename } from 'utils/common/path';
 import { Tooltip } from 'react-tooltip';
 import useProtoFileManagement from '../../../hooks/useProtoFileManagement';
-import { saveCollectionSettings } from 'providers/ReduxStore/slices/collections/actions';
-import Button from 'ui/Button';
 
 const ProtobufSettings = ({ collection }) => {
-  const dispatch = useDispatch();
   const {
     protoFiles,
     importPaths,
@@ -31,8 +27,6 @@ const ProtobufSettings = ({ collection }) => {
   } = useProtoFileManagement(collection);
   const fileInputRef = useRef(null);
 
-  const handleSave = () => dispatch(saveCollectionSettings(collection.uid));
-
   // Get file path using the ipcRenderer
   const getProtoFile = async (event) => {
     const files = event?.files;
@@ -113,12 +107,12 @@ const ProtobufSettings = ({ collection }) => {
       <div className="mb-6" data-testid="protobuf-proto-files-section">
         <div className="flex items-center justify-between mb-3">
           <div className="flex items-center">
-            <label className="flex items-center" htmlFor="protoFiles">
+            <label className="font-semibold text-sm flex items-center" htmlFor="protoFiles">
               Proto Files (
               {protoFiles.length}
               )
               <span id="proto-files-tooltip" className="ml-2">
-                <IconAlertCircle size={16} className="tooltip-icon" />
+                <IconAlertCircle size={16} className="text-gray-500 cursor-pointer" />
               </span>
               <Tooltip
                 anchorId="proto-files-tooltip"
@@ -131,7 +125,7 @@ const ProtobufSettings = ({ collection }) => {
 
         <div>
           {protoFiles.some((file) => !file.exists) && (
-            <div className="error-message text-xs mb-2 flex items-center p-2" data-testid="protobuf-invalid-files-message">
+            <div className="text-xs text-red-600 dark:text-red-400 mb-2 flex items-center p-2 rounded" data-testid="protobuf-invalid-files-message">
               <IconAlertCircle size={14} className="mr-1" />
               Some proto files cannot be found. Use the replace option to update their locations.
             </div>
@@ -140,13 +134,13 @@ const ProtobufSettings = ({ collection }) => {
           <table className="w-full border-collapse" data-testid="protobuf-proto-files-table">
             <thead>
               <tr>
-                <th>
+                <th className="text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider border border-gray-200 dark:border-gray-700 px-3 py-2">
                   File
                 </th>
-                <th>
+                <th className="text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider border border-gray-200 dark:border-gray-700 px-3 py-2">
                   Path
                 </th>
-                <th className="text-right">
+                <th className="text-right text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider border border-gray-200 dark:border-gray-700 px-3 py-2">
                   Actions
                 </th>
               </tr>
@@ -154,10 +148,10 @@ const ProtobufSettings = ({ collection }) => {
             <tbody>
               {protoFiles.length === 0 ? (
                 <tr>
-                  <td colSpan="3" className="text-center">
-                    <div className="empty-state flex flex-col items-center">
-                      <IconFile size={24} className="empty-icon mb-2" />
-                      <span className="empty-text">No proto files added</span>
+                  <td colSpan="3" className="border border-gray-200 dark:border-gray-700 px-3 py-8 text-center">
+                    <div className="flex flex-col items-center">
+                      <IconFile size={24} className="text-gray-400 mb-2" />
+                      <span className="text-sm text-gray-500 dark:text-gray-400">No proto files added</span>
                     </div>
                   </td>
                 </tr>
@@ -167,27 +161,27 @@ const ProtobufSettings = ({ collection }) => {
 
                   return (
                     <tr key={index}>
-                      <td>
+                      <td className="border border-gray-200 dark:border-gray-700 px-3 py-2">
                         <div className="flex items-center">
-                          <IconFile size={16} className="file-icon mr-2" />
-                          <span className="file-name" data-testid="protobuf-proto-file-name">
+                          <IconFile size={16} className="text-gray-500 dark:text-gray-400 mr-2" />
+                          <span className="text-sm font-medium text-gray-900 dark:text-gray-100">
                             {getBasename(collection.pathname, file.path)}
                           </span>
-                          {!isValid && <IconAlertCircle size={12} className="invalid-indicator ml-2" />}
+                          {!isValid && <IconAlertCircle size={12} className="text-red-600 dark:text-red-400 ml-2" />}
                         </div>
                       </td>
-                      <td>
-                        <div className="path-text">
+                      <td className="border border-gray-200 dark:border-gray-700 px-3 py-2">
+                        <div className="text-xs text-gray-600 dark:text-gray-400 font-mono">
                           {file.path}
                         </div>
                       </td>
-                      <td className="text-right">
+                      <td className="border border-gray-200 dark:border-gray-700 px-3 py-2 text-right">
                         <div className="flex items-center justify-end space-x-1">
                           {!isValid && (
                             <button
                               type="button"
                               onClick={() => handleReplaceProtoFile(index)}
-                              className="action-button replace-button"
+                              className="text-red-600 hover:text-red-900 dark:text-red-400 dark:hover:text-red-300 p-1 rounded"
                               title="Replace file"
                             >
                               <IconFileImport size={14} />
@@ -196,7 +190,7 @@ const ProtobufSettings = ({ collection }) => {
                           <button
                             type="button"
                             onClick={() => handleRemoveProtoFile(index)}
-                            className="action-button remove-button"
+                            className="text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-300 p-1 rounded"
                             title="Remove file"
                             data-testid="protobuf-remove-file-button"
                           >
@@ -220,12 +214,12 @@ const ProtobufSettings = ({ collection }) => {
       <div className="mb-6" data-testid="protobuf-import-paths-section">
         <div className="flex items-center justify-between mb-3">
           <div className="flex items-center">
-            <label className="flex items-center" htmlFor="importPaths">
+            <label className="font-semibold text-sm flex items-center" htmlFor="importPaths">
               Import Paths (
               {importPaths.length}
               )
               <span id="import-paths-tooltip" className="ml-2">
-                <IconAlertCircle size={16} className="tooltip-icon" />
+                <IconAlertCircle size={16} className="text-gray-500 cursor-pointer" />
               </span>
               <Tooltip
                 anchorId="import-paths-tooltip"
@@ -238,7 +232,7 @@ const ProtobufSettings = ({ collection }) => {
 
         <div>
           {importPaths.some((path) => !path.exists) && (
-            <div className="error-message text-xs mb-2 flex items-center p-2" data-testid="protobuf-invalid-import-paths-message">
+            <div className="text-xs text-red-600 dark:text-red-400 mb-2 flex items-center p-2 rounded" data-testid="protobuf-invalid-import-paths-message">
               <IconAlertCircle size={14} className="mr-1" />
               Some import paths cannot be found at their specified locations.
             </div>
@@ -247,15 +241,15 @@ const ProtobufSettings = ({ collection }) => {
           <table className="w-full border-collapse" data-testid="protobuf-import-paths-table">
             <thead>
               <tr>
-                <th>
+                <th className="text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider border border-gray-200 dark:border-gray-700 px-3 py-2">
                 </th>
-                <th>
+                <th className="text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider border border-gray-200 dark:border-gray-700 px-3 py-2">
                   Directory
                 </th>
-                <th>
+                <th className="text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider border border-gray-200 dark:border-gray-700 px-3 py-2">
                   Path
                 </th>
-                <th className="text-right">
+                <th className="text-right text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider border border-gray-200 dark:border-gray-700 px-3 py-2">
                   Actions
                 </th>
               </tr>
@@ -263,10 +257,10 @@ const ProtobufSettings = ({ collection }) => {
             <tbody>
               {importPaths.length === 0 ? (
                 <tr>
-                  <td colSpan="4" className="text-center">
-                    <div className="empty-state flex flex-col items-center">
-                      <IconFolder size={24} className="empty-icon mb-2" />
-                      <span className="empty-text">No import paths added</span>
+                  <td colSpan="4" className="border border-gray-200 dark:border-gray-700 px-3 py-8 text-center">
+                    <div className="flex flex-col items-center">
+                      <IconFolder size={24} className="text-gray-400 mb-2" />
+                      <span className="text-sm text-gray-500 dark:text-gray-400">No import paths added</span>
                     </div>
                   </td>
                 </tr>
@@ -276,37 +270,37 @@ const ProtobufSettings = ({ collection }) => {
 
                   return (
                     <tr key={index}>
-                      <td>
+                      <td className="border border-gray-200 dark:border-gray-700 px-3 py-2">
                         <input
                           type="checkbox"
                           checked={importPath.enabled}
                           onChange={() => handleToggleImportPath(index)}
-                          className="h-4 w-4"
+                          className="h-4 w-4 text-gray-600 focus:ring-gray-500 border-gray-300 dark:border-gray-600 rounded"
                           title={importPath.enabled ? 'Disable this import path' : 'Enable this import path'}
                           data-testid="protobuf-import-path-checkbox"
                         />
                       </td>
-                      <td>
+                      <td className="border border-gray-200 dark:border-gray-700 px-3 py-2">
                         <div className="flex items-center">
-                          <IconFolder size={16} className="folder-icon mr-2" />
-                          <span className="directory-name">
+                          <IconFolder size={16} className="text-gray-500 dark:text-gray-400 mr-2" />
+                          <span className="text-sm font-medium text-gray-900 dark:text-gray-100">
                             {getBasename(collection.pathname, importPath.path)}
                           </span>
-                          {!isValid && <IconAlertCircle size={12} className="invalid-indicator ml-2" />}
+                          {!isValid && <IconAlertCircle size={12} className="text-red-600 dark:text-red-400 ml-2" />}
                         </div>
                       </td>
-                      <td>
-                        <div className="path-text">
+                      <td className="border border-gray-200 dark:border-gray-700 px-3 py-2">
+                        <div className="text-xs text-gray-600 dark:text-gray-400 font-mono">
                           {importPath.path}
                         </div>
                       </td>
-                      <td className="text-right">
+                      <td className="border border-gray-200 dark:border-gray-700 px-3 py-2 text-right">
                         <div className="flex items-center justify-end space-x-1">
                           {!isValid && (
                             <button
                               type="button"
                               onClick={() => handleReplaceImportPath(index)}
-                              className="action-button replace-button"
+                              className="text-red-600 hover:text-red-900 dark:text-red-400 dark:hover:text-red-300 p-1 rounded"
                               title="Replace directory"
                             >
                               <IconFileImport size={14} />
@@ -315,7 +309,7 @@ const ProtobufSettings = ({ collection }) => {
                           <button
                             type="button"
                             onClick={() => handleRemoveImportPath(index)}
-                            className="action-button remove-button"
+                            className="text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-300 p-1 rounded"
                             title="Remove import path"
                             data-testid="protobuf-remove-import-path-button"
                           >
@@ -335,12 +329,6 @@ const ProtobufSettings = ({ collection }) => {
         </div>
       </div>
 
-      <div className="mt-6">
-        <Button type="button" size="sm" onClick={handleSave}>
-          Save
-        </Button>
-      </div>
-
     </StyledWrapper>
   );
 };

packages/bruno-app/src/components/CollectionSettings/ProxySettings/StyledWrapper.js

@@ -14,11 +14,11 @@ const StyledWrapper = styled.div`
     box-shadow: none;
     transition: border-color ease-in-out 0.1s;
     border-radius: 3px;
-    background-color: ${(props) => props.theme.input.bg};
-    border: 1px solid ${(props) => props.theme.input.border};
+    background-color: ${(props) => props.theme.modal.input.bg};
+    border: 1px solid ${(props) => props.theme.modal.input.border};
 
     &:focus {
-      border: solid 1px ${(props) => props.theme.input.focusBorder} !important;
+      border: solid 1px ${(props) => props.theme.modal.input.focusBorder} !important;
       outline: none !important;
     }
   }

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

@@ -1,214 +1,115 @@
-import React from 'react';
+import React, { useEffect } from 'react';
+import { useFormik } from 'formik';
 import InfoTip from 'components/InfoTip';
 import StyledWrapper from './StyledWrapper';
+import * as Yup from 'yup';
+import toast from 'react-hot-toast';
 import { IconEye, IconEyeOff } from '@tabler/icons';
 import { useState } from 'react';
-import { useDispatch } from 'react-redux';
-import { updateCollectionProxy } from 'providers/ReduxStore/slices/collections';
-import { saveCollectionSettings } from 'providers/ReduxStore/slices/collections/actions';
-import { get } from 'lodash';
-import toast from 'react-hot-toast';
-import Button from 'ui/Button';
 
-const ProxySettings = ({ collection }) => {
-  const dispatch = useDispatch();
-  const initialProxyConfig = {
-    inherit: true,
-    config: {
-      protocol: 'http',
-      hostname: '',
-      port: '',
+const ProxySettings = ({ proxyConfig, onUpdate }) => {
+  const proxySchema = Yup.object({
+    enabled: Yup.string().oneOf(['global', 'true', 'false']),
+    protocol: Yup.string().oneOf(['http', 'https', 'socks4', 'socks5']),
+    hostname: Yup.string()
+      .when('enabled', {
+        is: 'true',
+        then: (hostname) => hostname.required('Specify the hostname for your proxy.'),
+        otherwise: (hostname) => hostname.nullable()
+      })
+      .max(1024),
+    port: Yup.number()
+      .min(1)
+      .max(65535)
+      .typeError('Specify port between 1 and 65535')
+      .nullable()
+      .transform((_, val) => (val ? Number(val) : null)),
+    auth: Yup.object()
+      .when('enabled', {
+        is: 'true',
+        then: Yup.object({
+          enabled: Yup.boolean(),
+          username: Yup.string()
+            .when('enabled', {
+              is: true,
+              then: (username) => username.required('Specify username for proxy authentication.')
+            })
+            .max(1024),
+          password: Yup.string()
+            .when('enabled', {
+              is: true,
+              then: (password) => password.required('Specify password for proxy authentication.')
+            })
+            .max(1024)
+        })
+      })
+      .optional(),
+    bypassProxy: Yup.string().optional().max(1024)
+  });
+
+  const formik = useFormik({
+    initialValues: {
+      enabled: proxyConfig.enabled || 'global',
+      protocol: proxyConfig.protocol || 'http',
+      hostname: proxyConfig.hostname || '',
+      port: proxyConfig.port || '',
       auth: {
-        username: '',
-        password: ''
+        enabled: proxyConfig.auth ? proxyConfig.auth.enabled || false : false,
+        username: proxyConfig.auth ? proxyConfig.auth.username || '' : '',
+        password: proxyConfig.auth ? proxyConfig.auth.password || '' : ''
       },
-      bypassProxy: ''
+      bypassProxy: proxyConfig.bypassProxy || ''
+    },
+    validationSchema: proxySchema,
+    onSubmit: (values) => {
+      proxySchema
+        .validate(values, { abortEarly: true })
+        .then((validatedProxy) => {
+          // serialize 'enabled' to boolean
+          if (validatedProxy.enabled === 'true') {
+            validatedProxy.enabled = true;
+          } else if (validatedProxy.enabled === 'false') {
+            validatedProxy.enabled = false;
+          }
+
+          onUpdate(validatedProxy);
+        })
+        .catch((error) => {
+          let errMsg = error.message || 'Preferences validation error';
+          toast.error(errMsg);
+        });
     }
-  };
-
-  // Get proxy from draft.brunoConfig if it exists, otherwise from brunoConfig
-  const currentProxyConfig = collection.draft?.brunoConfig
-    ? get(collection, 'draft.brunoConfig.proxy', initialProxyConfig)
-    : get(collection, 'brunoConfig.proxy', initialProxyConfig);
-
+  });
   const [passwordVisible, setPasswordVisible] = useState(false);
 
-  const validateHostnameOnChange = (hostname) => {
-    if (hostname && hostname.length > 1024) {
-      toast.error('Hostname must be less than 1024 characters');
-      return false;
-    }
-    return true;
-  };
-
-  const validatePortOnChange = (port) => {
-    if (!port || port === '') {
-      return true; // Allow empty port during typing
-    }
-    const portNum = Number(port);
-    if (isNaN(portNum)) {
-      toast.error('Port must be a valid number');
-      return false;
-    }
-    if (portNum < 1 || portNum > 65535) {
-      toast.error('Port must be between 1 and 65535');
-      return false;
-    }
-    return true;
-  };
-
-  const validateAuthUsernameOnChange = (username) => {
-    if (username && username.length > 1024) {
-      toast.error('Username must be less than 1024 characters');
-      return false;
-    }
-    return true;
-  };
-
-  const validateAuthPasswordOnChange = (password) => {
-    if (password && password.length > 1024) {
-      toast.error('Password must be less than 1024 characters');
-      return false;
-    }
-    return true;
-  };
-
-  const validateBypassProxyOnChange = (bypassProxy) => {
-    if (bypassProxy && bypassProxy.length > 1024) {
-      toast.error('Bypass proxy must be less than 1024 characters');
-      return false;
-    }
-    return true;
-  };
-
-  // Helper to update proxy config
-  const updateProxy = (updates) => {
-    const updatedProxy = { ...currentProxyConfig, ...updates };
-    dispatch(updateCollectionProxy({
-      collectionUid: collection.uid,
-      proxy: updatedProxy
-    }));
-  };
-
-  const handleSave = () => dispatch(saveCollectionSettings(collection.uid));
-
-  const handleEnabledChange = (e) => {
-    const value = e.target.value;
-    // Map UI values to new format
-    if (value === 'inherit') {
-      updateProxy({ disabled: false, inherit: true });
-    } else if (value === 'true') {
-      updateProxy({ disabled: false, inherit: false });
-    } else {
-      updateProxy({ disabled: true, inherit: false });
-    }
-  };
-
-  const handleProtocolChange = (e) => {
-    updateProxy({
-      config: {
-        ...currentProxyConfig.config,
-        protocol: e.target.value
-      }
+  useEffect(() => {
+    formik.setValues({
+      enabled: proxyConfig.enabled === true ? 'true' : proxyConfig.enabled === false ? 'false' : 'global',
+      protocol: proxyConfig.protocol || 'http',
+      hostname: proxyConfig.hostname || '',
+      port: proxyConfig.port || '',
+      auth: {
+        enabled: proxyConfig.auth ? proxyConfig.auth.enabled || false : false,
+        username: proxyConfig.auth ? proxyConfig.auth.username || '' : '',
+        password: proxyConfig.auth ? proxyConfig.auth.password || '' : ''
+      },
+      bypassProxy: proxyConfig.bypassProxy || ''
     });
-  };
-
-  const handleHostnameChange = (e) => {
-    const hostname = e.target.value;
-    if (validateHostnameOnChange(hostname)) {
-      updateProxy({
-        config: {
-          ...currentProxyConfig.config,
-          hostname
-        }
-      });
-    }
-  };
-
-  const handlePortChange = (e) => {
-    const port = e.target.value ? Number(e.target.value) : '';
-    if (validatePortOnChange(port)) {
-      updateProxy({
-        config: {
-          ...currentProxyConfig.config,
-          port
-        }
-      });
-    }
-  };
-
-  const handleAuthEnabledChange = (e) => {
-    updateProxy({
-      config: {
-        ...currentProxyConfig.config,
-        auth: {
-          ...currentProxyConfig.config.auth,
-          disabled: !e.target.checked
-        }
-      }
-    });
-  };
-
-  const handleAuthUsernameChange = (e) => {
-    const username = e.target.value;
-    if (validateAuthUsernameOnChange(username)) {
-      updateProxy({
-        config: {
-          ...currentProxyConfig.config,
-          auth: {
-            ...currentProxyConfig.config.auth,
-            username
-          }
-        }
-      });
-    }
-  };
-
-  const handleAuthPasswordChange = (e) => {
-    const password = e.target.value;
-    if (validateAuthPasswordOnChange(password)) {
-      updateProxy({
-        config: {
-          ...currentProxyConfig.config,
-          auth: {
-            ...currentProxyConfig.config.auth,
-            password
-          }
-        }
-      });
-    }
-  };
-
-  const handleBypassProxyChange = (e) => {
-    const bypassProxy = e.target.value;
-    if (validateBypassProxyOnChange(bypassProxy)) {
-      updateProxy({
-        config: {
-          ...currentProxyConfig.config,
-          bypassProxy
-        }
-      });
-    }
-  };
-
-  // Map new format to UI values
-  const disabled = currentProxyConfig.disabled || false;
-  const inherit = currentProxyConfig.inherit !== undefined ? currentProxyConfig.inherit : true;
-  const enabledValue = disabled ? 'false' : (inherit ? 'inherit' : 'true');
+  }, [proxyConfig]);
 
   return (
     <StyledWrapper className="h-full w-full">
       <div className="text-xs mb-4 text-muted">Configure proxy settings for this collection.</div>
-      <div className="bruno-form">
+      <form className="bruno-form" onSubmit={formik.handleSubmit}>
         <div className="mb-3 flex items-center">
           <label className="settings-label flex items-center" htmlFor="enabled">
             Config
             <InfoTip infotipId="request-var">
               <div>
                 <ul>
-                  <li><span style={{ width: '50px', display: 'inline-block' }}>inherit</span> - inherit from global preferences</li>
-                  <li><span style={{ width: '50px', display: 'inline-block' }}>enabled</span> - use collection-specific proxy config</li>
-                  <li><span style={{ width: '50px', display: 'inline-block' }}>disabled</span> - disable proxy for this collection</li>
+                  <li><span style={{width: "50px", display: "inline-block"}}>global</span> - use global proxy config</li>
+                  <li><span style={{width: "50px", display: "inline-block"}}>enabled</span> - use collection proxy config</li>
+                  <li><span style={{width: "50px", display: "inline-block"}}>disable</span> - disable proxy</li>
                 </ul>
               </div>
             </InfoTip>
@@ -218,20 +119,20 @@ const ProxySettings = ({ collection }) => {
               <input
                 type="radio"
                 name="enabled"
-                value="inherit"
-                checked={enabledValue === 'inherit'}
-                onChange={handleEnabledChange}
+                value="global"
+                checked={formik.values.enabled === 'global'}
+                onChange={formik.handleChange}
                 className="mr-1"
               />
-              inherit
+              global
             </label>
             <label className="flex items-center ml-4">
               <input
                 type="radio"
                 name="enabled"
-                value="true"
-                checked={enabledValue === 'true'}
-                onChange={handleEnabledChange}
+                value={'true'}
+                checked={formik.values.enabled === 'true'}
+                onChange={formik.handleChange}
                 className="mr-1"
               />
               enabled
@@ -240,185 +141,196 @@ const ProxySettings = ({ collection }) => {
               <input
                 type="radio"
                 name="enabled"
-                value="false"
-                checked={enabledValue === 'false'}
-                onChange={handleEnabledChange}
+                value={'false'}
+                checked={formik.values.enabled === 'false'}
+                onChange={formik.handleChange}
                 className="mr-1"
               />
               disabled
             </label>
           </div>
         </div>
-        {enabledValue === 'true' && (
-          <>
-            <div className="mb-3 flex items-center">
-              <label className="settings-label" htmlFor="protocol">
-                Protocol
-              </label>
-              <div className="flex items-center">
-                <label className="flex items-center">
-                  <input
-                    type="radio"
-                    name="protocol"
-                    value="http"
-                    checked={(currentProxyConfig.config?.protocol || 'http') === 'http'}
-                    onChange={handleProtocolChange}
-                    className="mr-1"
-                  />
-                  HTTP
-                </label>
-                <label className="flex items-center ml-4">
-                  <input
-                    type="radio"
-                    name="protocol"
-                    value="https"
-                    checked={(currentProxyConfig.config?.protocol || 'http') === 'https'}
-                    onChange={handleProtocolChange}
-                    className="mr-1"
-                  />
-                  HTTPS
-                </label>
-                <label className="flex items-center ml-4">
-                  <input
-                    type="radio"
-                    name="protocol"
-                    value="socks4"
-                    checked={(currentProxyConfig.config?.protocol || 'http') === 'socks4'}
-                    onChange={handleProtocolChange}
-                    className="mr-1"
-                  />
-                  SOCKS4
-                </label>
-                <label className="flex items-center ml-4">
-                  <input
-                    type="radio"
-                    name="protocol"
-                    value="socks5"
-                    checked={(currentProxyConfig.config?.protocol || 'http') === 'socks5'}
-                    onChange={handleProtocolChange}
-                    className="mr-1"
-                  />
-                  SOCKS5
-                </label>
-              </div>
-            </div>
-            <div className="mb-3 flex items-center">
-              <label className="settings-label" htmlFor="hostname">
-                Hostname
-              </label>
+        <div className="mb-3 flex items-center">
+          <label className="settings-label" htmlFor="protocol">
+            Protocol
+          </label>
+          <div className="flex items-center">
+            <label className="flex items-center">
               <input
-                id="hostname"
-                type="text"
-                name="hostname"
-                className="block textbox"
-                autoComplete="off"
-                autoCorrect="off"
-                autoCapitalize="off"
-                spellCheck="false"
-                onChange={handleHostnameChange}
-                value={currentProxyConfig.config?.hostname || ''}
+                type="radio"
+                name="protocol"
+                value="http"
+                checked={formik.values.protocol === 'http'}
+                onChange={formik.handleChange}
+                className="mr-1"
               />
-            </div>
-            <div className="mb-3 flex items-center">
-              <label className="settings-label" htmlFor="port">
-                Port
-              </label>
+              HTTP
+            </label>
+            <label className="flex items-center ml-4">
               <input
-                id="port"
-                type="number"
-                name="port"
-                className="block textbox"
-                autoComplete="off"
-                autoCorrect="off"
-                autoCapitalize="off"
-                spellCheck="false"
-                onChange={handlePortChange}
-                value={currentProxyConfig.config?.port || ''}
+                type="radio"
+                name="protocol"
+                value="https"
+                checked={formik.values.protocol === 'https'}
+                onChange={formik.handleChange}
+                className="mr-1"
               />
-            </div>
-            <div className="mb-3 flex items-center">
-              <label className="settings-label" htmlFor="auth.disabled">
-                Auth
-              </label>
+              HTTPS
+            </label>
+            <label className="flex items-center ml-4">
               <input
-                type="checkbox"
-                name="auth.disabled"
-                checked={!currentProxyConfig.config?.auth?.disabled}
-                onChange={handleAuthEnabledChange}
+                type="radio"
+                name="protocol"
+                value="socks4"
+                checked={formik.values.protocol === 'socks4'}
+                onChange={formik.handleChange}
+                className="mr-1"
               />
-            </div>
-            <div>
-              <div className="mb-3 flex items-center">
-                <label className="settings-label" htmlFor="auth.username">
-                  Username
-                </label>
-                <input
-                  id="auth.username"
-                  type="text"
-                  name="auth.username"
-                  className="block textbox"
-                  autoComplete="off"
-                  autoCorrect="off"
-                  autoCapitalize="off"
-                  spellCheck="false"
-                  value={currentProxyConfig.config?.auth?.username || ''}
-                  onChange={handleAuthUsernameChange}
-                />
-              </div>
-              <div className="mb-3 flex items-center">
-                <label className="settings-label" htmlFor="auth.password">
-                  Password
-                </label>
-                <div className="textbox flex flex-row items-center w-[13.2rem] h-[1.70rem] relative">
-                  <input
-                    id="auth.password"
-                    type={passwordVisible ? 'text' : 'password'}
-                    name="auth.password"
-                    className="outline-none bg-transparent w-[10.5rem]"
-                    autoComplete="off"
-                    autoCorrect="off"
-                    autoCapitalize="off"
-                    spellCheck="false"
-                    value={currentProxyConfig.config?.auth?.password || ''}
-                    onChange={handleAuthPasswordChange}
-                  />
-                  <button
-                    type="button"
-                    className="btn btn-sm absolute right-0"
-                    onClick={() => setPasswordVisible(!passwordVisible)}
-                  >
-                    {passwordVisible ? <IconEyeOff size={18} strokeWidth={1.5} /> : <IconEye size={18} strokeWidth={1.5} />}
-                  </button>
-                </div>
-              </div>
-            </div>
-            <div className="mb-3 flex items-center">
-              <label className="settings-label" htmlFor="bypassProxy">
-                Proxy Bypass
-              </label>
+              SOCKS4
+            </label>
+            <label className="flex items-center ml-4">
               <input
-                id="bypassProxy"
-                type="text"
-                name="bypassProxy"
-                className="block textbox"
-                autoComplete="off"
-                autoCorrect="off"
-                autoCapitalize="off"
-                spellCheck="false"
-                onChange={handleBypassProxyChange}
-                value={currentProxyConfig.config?.bypassProxy || ''}
+                type="radio"
+                name="protocol"
+                value="socks5"
+                checked={formik.values.protocol === 'socks5'}
+                onChange={formik.handleChange}
+                className="mr-1"
               />
-            </div>
-          </>
-        )}
-        <div className="mt-6">
-          <Button type="submit" size="sm" onClick={handleSave}>
-            Save
-          </Button>
+              SOCKS5
+            </label>
+          </div>
         </div>
-      </div>
+        <div className="mb-3 flex items-center">
+          <label className="settings-label" htmlFor="hostname">
+            Hostname
+          </label>
+          <input
+            id="hostname"
+            type="text"
+            name="hostname"
+            className="block textbox"
+            autoComplete="off"
+            autoCorrect="off"
+            autoCapitalize="off"
+            spellCheck="false"
+            onChange={formik.handleChange}
+            value={formik.values.hostname || ''}
+          />
+          {formik.touched.hostname && formik.errors.hostname ? (
+            <div className="ml-3 text-red-500">{formik.errors.hostname}</div>
+          ) : null}
+        </div>
+        <div className="mb-3 flex items-center">
+          <label className="settings-label" htmlFor="port">
+            Port
+          </label>
+          <input
+            id="port"
+            type="number"
+            name="port"
+            className="block textbox"
+            autoComplete="off"
+            autoCorrect="off"
+            autoCapitalize="off"
+            spellCheck="false"
+            onChange={formik.handleChange}
+            value={formik.values.port}
+          />
+          {formik.touched.port && formik.errors.port ? (
+            <div className="ml-3 text-red-500">{formik.errors.port}</div>
+          ) : null}
+        </div>
+        <div className="mb-3 flex items-center">
+          <label className="settings-label" htmlFor="auth.enabled">
+            Auth
+          </label>
+          <input
+            type="checkbox"
+            name="auth.enabled"
+            checked={formik.values.auth.enabled}
+            onChange={formik.handleChange}
+          />
+        </div>
+        <div>
+          <div className="mb-3 flex items-center">
+            <label className="settings-label" htmlFor="auth.username">
+              Username
+            </label>
+            <input
+              id="auth.username"
+              type="text"
+              name="auth.username"
+              className="block textbox"
+              autoComplete="off"
+              autoCorrect="off"
+              autoCapitalize="off"
+              spellCheck="false"
+              value={formik.values.auth.username}
+              onChange={formik.handleChange}
+            />
+            {formik.touched.auth?.username && formik.errors.auth?.username ? (
+              <div className="ml-3 text-red-500">{formik.errors.auth.username}</div>
+            ) : null}
+          </div>
+          <div className="mb-3 flex items-center">
+            <label className="settings-label" htmlFor="auth.password">
+              Password
+            </label>
+            <div className="textbox flex flex-row items-center w-[13.2rem] h-[1.70rem] relative">
+              <input
+                id="auth.password"
+                type={passwordVisible ? 'text' : 'password'}
+                name="auth.password"
+                className="outline-none bg-transparent w-[10.5rem]"
+                autoComplete="off"
+                autoCorrect="off"
+                autoCapitalize="off"
+                spellCheck="false"
+                value={formik.values.auth.password}
+                onChange={formik.handleChange}
+              />
+              <button
+                type="button"
+                className="btn btn-sm absolute right-0"
+                onClick={() => setPasswordVisible(!passwordVisible)}
+              >
+                {passwordVisible ? <IconEyeOff size={18} strokeWidth={1.5} /> : <IconEye size={18} strokeWidth={1.5} />}
+              </button>
+            </div>
+            {formik.touched.auth?.password && formik.errors.auth?.password ? (
+              <div className="ml-3 text-red-500">{formik.errors.auth.password}</div>
+            ) : null}
+          </div>
+        </div>
+        <div className="mb-3 flex items-center">
+          <label className="settings-label" htmlFor="bypassProxy">
+            Proxy Bypass
+          </label>
+          <input
+            id="bypassProxy"
+            type="text"
+            name="bypassProxy"
+            className="block textbox"
+            autoComplete="off"
+            autoCorrect="off"
+            autoCapitalize="off"
+            spellCheck="false"
+            onChange={formik.handleChange}
+            value={formik.values.bypassProxy || ''}
+          />
+          {formik.touched.bypassProxy && formik.errors.bypassProxy ? (
+            <div className="ml-3 text-red-500">{formik.errors.bypassProxy}</div>
+          ) : null}
+        </div>
+        <div className="mt-6">
+          <button type="submit" className="submit btn btn-sm btn-secondary">
+            Save
+          </button>
+        </div>
+      </form>
     </StyledWrapper>
   );
 };
 
-export default ProxySettings;
+export default ProxySettings;

packages/bruno-app/src/components/CollectionSettings/Script/StyledWrapper.js

@@ -8,7 +8,7 @@ const StyledWrapper = styled.div`
   }
 
   div.title {
-    color: ${(props) => props.theme.colors.text.subtext0};
+    color: var(--color-tab-inactive);
   }
 `;
 

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

@@ -1,38 +1,20 @@
-import React, { useState, useEffect, useRef } from 'react';
+import React from 'react';
 import get from 'lodash/get';
 import { useDispatch, useSelector } from 'react-redux';
 import CodeEditor from 'components/CodeEditor';
 import { updateCollectionRequestScript, updateCollectionResponseScript } from 'providers/ReduxStore/slices/collections';
-import { saveCollectionSettings } from 'providers/ReduxStore/slices/collections/actions';
+import { saveCollectionRoot } from 'providers/ReduxStore/slices/collections/actions';
 import { useTheme } from 'providers/Theme';
-import { Tabs, TabsList, TabsTrigger, TabsContent } from 'components/Tabs';
 import StyledWrapper from './StyledWrapper';
-import Button from 'ui/Button';
 
 const Script = ({ collection }) => {
   const dispatch = useDispatch();
-  const [activeTab, setActiveTab] = useState('pre-request');
-  const preRequestEditorRef = useRef(null);
-  const postResponseEditorRef = useRef(null);
-  const requestScript = collection.draft?.root ? get(collection, 'draft.root.request.script.req', '') : get(collection, 'root.request.script.req', '');
-  const responseScript = collection.draft?.root ? get(collection, 'draft.root.request.script.res', '') : get(collection, 'root.request.script.res', '');
+  const requestScript = get(collection, 'root.request.script.req', '');
+  const responseScript = get(collection, 'root.request.script.res', '');
 
   const { displayedTheme } = useTheme();
   const preferences = useSelector((state) => state.app.preferences);
 
-  // Refresh CodeMirror when tab becomes visible
-  useEffect(() => {
-    const timer = setTimeout(() => {
-      if (activeTab === 'pre-request' && preRequestEditorRef.current?.editor) {
-        preRequestEditorRef.current.editor.refresh();
-      } else if (activeTab === 'post-response' && postResponseEditorRef.current?.editor) {
-        postResponseEditorRef.current.editor.refresh();
-      }
-    }, 0);
-
-    return () => clearTimeout(timer);
-  }, [activeTab]);
-
   const onRequestScriptEdit = (value) => {
     dispatch(
       updateCollectionRequestScript({
@@ -52,7 +34,7 @@ const Script = ({ collection }) => {
   };
 
   const handleSave = () => {
-    dispatch(saveCollectionSettings(collection.uid));
+    dispatch(saveCollectionRoot(collection.uid));
   };
 
   return (
@@ -60,48 +42,39 @@ const Script = ({ collection }) => {
       <div className="text-xs mb-4 text-muted">
         Write pre and post-request scripts that will run before and after any request in this collection is sent.
       </div>
-
-      <Tabs value={activeTab} onValueChange={setActiveTab}>
-        <TabsList>
-          <TabsTrigger value="pre-request">Pre Request</TabsTrigger>
-          <TabsTrigger value="post-response">Post Response</TabsTrigger>
-        </TabsList>
-
-        <TabsContent value="pre-request" className="mt-2">
-          <CodeEditor
-            ref={preRequestEditorRef}
-            collection={collection}
-            value={requestScript || ''}
-            theme={displayedTheme}
-            onEdit={onRequestScriptEdit}
-            mode="javascript"
-            onSave={handleSave}
-            font={get(preferences, 'font.codeFont', 'default')}
-            fontSize={get(preferences, 'font.codeFontSize')}
-            showHintsFor={['req', 'bru']}
-          />
-        </TabsContent>
-
-        <TabsContent value="post-response" className="mt-2">
-          <CodeEditor
-            ref={postResponseEditorRef}
-            collection={collection}
-            value={responseScript || ''}
-            theme={displayedTheme}
-            onEdit={onResponseScriptEdit}
-            mode="javascript"
-            onSave={handleSave}
-            font={get(preferences, 'font.codeFont', 'default')}
-            fontSize={get(preferences, 'font.codeFontSize')}
-            showHintsFor={['req', 'res', 'bru']}
-          />
-        </TabsContent>
-      </Tabs>
+      <div className="flex-1 mt-2">
+        <div className="mb-1 title text-xs">Pre Request</div>
+        <CodeEditor
+          collection={collection}
+          value={requestScript || ''}
+          theme={displayedTheme}
+          onEdit={onRequestScriptEdit}
+          mode="javascript"
+          onSave={handleSave}
+          font={get(preferences, 'font.codeFont', 'default')}
+          fontSize={get(preferences, 'font.codeFontSize')}
+          showHintsFor={['req', 'bru']}
+        />
+      </div>
+      <div className="flex-1 mt-6">
+        <div className="mt-1 mb-1 title text-xs">Post Response</div>
+        <CodeEditor
+          collection={collection}
+          value={responseScript || ''}
+          theme={displayedTheme}
+          onEdit={onResponseScriptEdit}
+          mode="javascript"
+          onSave={handleSave}
+          font={get(preferences, 'font.codeFont', 'default')}
+          fontSize={get(preferences, 'font.codeFontSize')}
+          showHintsFor={['req', 'res', 'bru']}
+        />
+      </div>
 
       <div className="mt-12">
-        <Button type="submit" size="sm" onClick={handleSave}>
+        <button type="submit" className="submit btn btn-sm btn-secondary" onClick={handleSave}>
           Save
-        </Button>
+        </button>
       </div>
     </StyledWrapper>
   );