chore: playwright fix

* use: button component

* fixes

.github/workflows/tests.yml

@@ -142,7 +142,7 @@ jobs:
     - name: Run Playwright tests
       run: |
         xvfb-run npm run test:e2e
-    - uses: actions/upload-artifact@v5
+    - uses: actions/upload-artifact@v6
       if: ${{ !cancelled() }}
       with:
         name: playwright-report

.gitignore

@@ -53,6 +53,7 @@ bruno.iml
 /blob-report/
 
 # Development plan files
+CLAUDE.md
 *.plan.md
 
 # packages dist

.nvmrc

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

CODING_STANDARDS.md

@@ -6,7 +6,7 @@
 
 - Use 2 spaces for indentation. No tabs, just spaces – keeps everything neat and uniform.
 
-- Stick to single quotes for strings. Double quotes are cool elsewhere, but here we go single.
+- 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.
 

eslint.config.js

@@ -18,7 +18,9 @@ module.exports = runESMImports().then(() => defineConfig([
       '**/dist/**/*',
       '**/*.bru',
       'packages/bruno-js/src/sandbox/bundle-browser-rollup.js',
-      'packages/bruno-app/public/static/**/*'
+      'packages/bruno-app/public/static/**/*',
+      'packages/bruno-app/.next/**/*',
+      'packages/bruno-electron/web/**/*'
     ]
   },
   {
@@ -115,6 +117,18 @@ module.exports = runESMImports().then(() => defineConfig([
       'no-undef': 'error'
     }
   },
+  {
+    // Storybook config files use CommonJS with __dirname and module.exports
+    files: ['packages/bruno-app/storybook/**/*.js'],
+    languageOptions: {
+      globals: {
+        ...globals.node
+      }
+    },
+    rules: {
+      'no-undef': 'error'
+    }
+  },
   {
     files: ['packages/bruno-cli/**/*.js'],
     ignores: ['**/*.config.js'],

package.json

@@ -20,9 +20,15 @@
   ],
   "homepage": "https://usebruno.com",
   "devDependencies": {
+    "@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",
+    "storybook": "^10.1.10",
     "@eslint/compat": "^1.3.2",
     "@faker-js/faker": "^7.6.0",
     "@jest/globals": "^29.2.0",
+    "@opencollection/types": "0.3.0",
     "@playwright/test": "^1.51.1",
     "@rollup/plugin-json": "^6.1.0",
     "@stylistic/eslint-plugin": "^5.3.1",

packages/bruno-app/.gitignore

@@ -22,6 +22,7 @@ build
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+*.log
 
 # local env files
 .env.local

packages/bruno-app/package.json

@@ -9,7 +9,9 @@
     "preview": "rsbuild preview",
     "test": "jest",
     "test:prettier": "prettier --check \"./src/**/*.{js,jsx,json,ts,tsx}\"",
-    "prettier": "prettier --write \"./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"
   },
   "dependencies": {
     "@fontsource/inter": "^5.0.15",
@@ -44,6 +46,7 @@
     "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",
@@ -54,6 +57,7 @@
     "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",
@@ -61,6 +65,7 @@
     "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.11.0",
@@ -83,9 +88,11 @@
     "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/src/components/ApiSpecPanel/FileEditor/CodeEditor/Plugins/Yaml/index.js

@@ -0,0 +1,129 @@
+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

@@ -0,0 +1,65 @@
+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: green;
+  }
+  .cm-variable-invalid {
+    color: red;
+  }
+`;
+
+export default StyledWrapper;

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

@@ -0,0 +1,138 @@
+/**
+ *  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

@@ -0,0 +1,51 @@
+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.colors.text.yellow : 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

@@ -0,0 +1,19 @@
+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

@@ -0,0 +1,19 @@
+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

@@ -0,0 +1,22 @@
+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.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

@@ -0,0 +1,97 @@
+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

@@ -0,0 +1,257 @@
+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;
+    }
+  }
+
+  .dropdown-item-active {
+    font-weight: 400 !important;
+    background-color: ${(props) => props.theme.dropdown.selectedBg} !important;
+    color: ${(props) => props.theme.dropdown.selectedColor} !important;
+  }
+`;
+
+export default Wrapper;

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

@@ -0,0 +1,333 @@
+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 { toTitleCase } from 'utils/common/index';
+import ResponseLayoutToggle from 'components/ResponsePane/ResponseLayoutToggle';
+import { isMacOS, isWindowsOS, isLinuxOS } from 'utils/common/platform';
+
+const getOsClass = () => {
+  if (isMacOS()) return 'os-mac';
+  if (isWindowsOS()) return 'os-windows';
+  if (isLinuxOS()) return 'os-linux';
+  return 'os-other';
+};
+
+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 className="workspace-name">{toTitleCase(activeWorkspace?.name) || 'Default Workspace'}</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 ${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: toTitleCase(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

@@ -0,0 +1,38 @@
+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.colors.text.yellow};
+    }
+
+    .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,17 +1,33 @@
-import React, { useRef, forwardRef } from 'react';
-import { IconCaretDown } from '@tabler/icons';
-import Dropdown from 'components/Dropdown';
+import React, { useMemo } from 'react';
+import { IconCaretDown, IconForms, IconBraces, IconCode, IconFileText, IconDatabase, IconFile, IconX } from '@tabler/icons';
+import MenuDropdown from 'ui/MenuDropdown';
 import { humanizeRequestBodyMode } from 'utils/collections';
+import StyledWrapper from './StyledWrapper';
 
 const DEFAULT_MODES = [
-  { 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' }
+  {
+    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 }
+    ]
+  }
 ];
 
 const BodyModeSelector = ({
@@ -21,62 +37,39 @@ const BodyModeSelector = ({
   disabled = false,
   className = '',
   wrapperClassName = '',
-  showCategories = true,
   placement = 'bottom-end'
 }) => {
-  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;
-  }, {});
+  // 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]);
 
   return (
-    <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>
+    <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>
   );
 };
 

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

@@ -192,7 +192,6 @@ export default class CodeEditor extends React.Component {
     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();
 
@@ -229,8 +228,10 @@ 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) {
@@ -275,13 +276,19 @@ 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);
-      this.editor.off('scroll', this.onScroll);
 
       // Clean up lint error tooltip
       this.cleanupLintErrorTooltip?.();
 
+      const wrapper = this.editor.getWrapperElement();
+      wrapper?.parentNode?.removeChild(wrapper);
+
       this.editor = null;
     }
   }
@@ -325,8 +332,6 @@ export default class CodeEditor extends React.Component {
     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/CollectionSettings/Auth/AuthMode/StyledWrapper.js

@@ -8,20 +8,12 @@ const Wrapper = styled.div`
 
     .auth-mode-label {
       color: ${(props) => props.theme.colors.text.yellow};
-    }
 
-    .dropdown-item {
-      padding: 0.2rem 0.6rem !important;
+      .caret {
+        color: rgb(140, 140, 140);
+        fill: rgb(140, 140, 140);
+      }
     }
-
-    .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, { useRef, forwardRef } from 'react';
+import React, { useMemo, useCallback } from 'react';
 import get from 'lodash/get';
 import { IconCaretDown } from '@tabler/icons';
-import Dropdown from 'components/Dropdown';
+import MenuDropdown from 'ui/MenuDropdown';
 import { useDispatch } from 'react-redux';
 import { updateCollectionAuthMode } from 'providers/ReduxStore/slices/collections';
 import { humanizeRequestAuthMode } from 'utils/collections';
@@ -9,113 +9,77 @@ import StyledWrapper from './StyledWrapper';
 
 const AuthMode = ({ collection }) => {
   const dispatch = useDispatch();
-  const dropdownTippyRef = useRef();
-  const onDropdownCreate = (ref) => (dropdownTippyRef.current = ref);
   const authMode = collection.draft?.root ? get(collection, 'draft.root.request.auth.mode') : get(collection, 'root.request.auth.mode');
 
-  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) => {
+  const onModeChange = useCallback((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">
-        <Dropdown onCreate={onDropdownCreate} icon={<Icon />} placement="bottom-end">
-          <div
-            className="dropdown-item"
-            onClick={() => {
-              dropdownTippyRef.current.hide();
-              onModeChange('awsv4');
-            }}
-          >
-            AWS Sig v4
+        <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} />
           </div>
-          <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>
+        </MenuDropdown>
       </div>
     </StyledWrapper>
   );

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

@@ -12,6 +12,7 @@ import { saveCollectionSettings } from 'providers/ReduxStore/slices/collections/
 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');
@@ -59,9 +60,9 @@ const Auth = ({ collection }) => {
       </div>
       {getAuthView()}
       <div className="mt-6">
-        <button type="submit" className="submit btn btn-sm btn-secondary" onClick={handleSave}>
+        <Button type="submit" size="sm" onClick={handleSave}>
           Save
-        </button>
+        </Button>
       </div>
     </StyledWrapper>
   );

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

@@ -48,32 +48,37 @@ const StyledWrapper = styled.div`
   }
 
   .protocol-https,
-  .protocol-grpcs {
+  .protocol-grpcs,
+  .protocol-wss {
     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 6s infinite;
+    animation: slideUpDown 9s infinite;
     transform: translateY(0);
   }
 
   .protocol-grpcs {
-    animation: slideUpDown 6s infinite 3s;
+    animation: slideUpDown 9s infinite 3s;
+    transform: translateY(100%);
+  }
+
+  .protocol-wss {
+    animation: slideUpDown 9s infinite 6s;
     transform: translateY(100%);
   }
 
   @keyframes slideUpDown {
-    0%, 45% {
+    0%, 30% {
       transform: translateY(0);
     }
-    50%, 95% {
+    33.33%, 97% {
       transform: translateY(100%);
     }
     100% {

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

@@ -13,6 +13,7 @@ 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();
@@ -180,6 +181,7 @@ 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
@@ -373,13 +375,13 @@ const ClientCertSettings = ({ collection }) => {
           ) : null}
         </div>
         <div className="mt-6 flex flex-row gap-2 items-center">
-          <button type="submit" className="submit btn btn-sm btn-secondary">
+          <Button type="submit" size="sm" data-testid="add-client-cert">
             Add
-          </button>
+          </Button>
           <div className="h-4 border-l border-gray-600"></div>
-          <button type="button" className="submit btn btn-sm btn-secondary" onClick={handleSave}>
+          <Button type="button" size="sm" onClick={handleSave}>
             Save
-          </button>
+          </Button>
         </div>
       </form>
     </StyledWrapper>

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

@@ -1,78 +1,78 @@
-import React, { useState } from 'react';
+import React, { useState, useCallback } 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 {
-  addCollectionHeader,
-  updateCollectionHeader,
-  deleteCollectionHeader,
-  setCollectionHeaders
-} from 'providers/ReduxStore/slices/collections';
+import { setCollectionHeaders } from 'providers/ReduxStore/slices/collections';
 import { saveCollectionSettings } 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 = collection.draft?.root
+    ? get(collection, 'draft.root.request.headers', [])
+    : get(collection, 'root.request.headers', []);
   const [isBulkEditMode, setIsBulkEditMode] = useState(false);
 
   const toggleBulkEditMode = () => {
     setIsBulkEditMode(!isBulkEditMode);
   };
 
-  const handleBulkHeadersChange = (newHeaders) => {
-    dispatch(setCollectionHeaders({ collectionUid: collection.uid, headers: newHeaders }));
-  };
-
-  const addHeader = () => {
-    dispatch(
-      addCollectionHeader({
-        collectionUid: collection.uid
-      })
-    );
-  };
+  const handleHeadersChange = useCallback((updatedHeaders) => {
+    dispatch(setCollectionHeaders({ collectionUid: collection.uid, headers: updatedHeaders }));
+  }, [dispatch, collection.uid]);
 
   const handleSave = () => dispatch(saveCollectionSettings(collection.uid));
-  const handleHeaderValueChange = (e, _header, type) => {
-    const header = cloneDeep(_header);
-    switch (type) {
-      case 'name': {
-        // Strip newlines from header keys
-        header.name = e.target.value.replace(/[\r\n]/g, '');
-        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 handleRemoveHeader = (header) => {
-    dispatch(
-      deleteCollectionHeader({
-        headerUid: header.uid,
-        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 defaultRow = {
+    name: '',
+    value: '',
+    description: ''
   };
 
   if (isBulkEditMode) {
@@ -83,7 +83,7 @@ const Headers = ({ collection }) => {
         </div>
         <BulkEditor
           params={headers}
-          onChange={handleBulkHeadersChange}
+          onChange={handleHeadersChange}
           onToggle={toggleBulkEditMode}
           onSave={handleSave}
         />
@@ -96,92 +96,24 @@ 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>
-      <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>
+      <EditableTable
+        columns={columns}
+        rows={headers}
+        onChange={handleHeadersChange}
+        defaultRow={defaultRow}
+      />
+      <div className="flex justify-end mt-2">
         <button className="text-link select-none" onClick={toggleBulkEditMode}>
           Bulk Edit
         </button>
       </div>
-
       <div className="mt-6">
-        <button type="submit" className="submit btn btn-sm btn-secondary" onClick={handleSave}>
+        <Button type="submit" size="sm" onClick={handleSave}>
           Save
-        </button>
+        </Button>
       </div>
     </StyledWrapper>
   );
 };
+
 export default Headers;

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

@@ -1,17 +1,25 @@
 import React from 'react';
 import { getTotalRequestCountInCollection } from 'utils/collections/';
-import { IconBox, IconFolder, IconWorld, IconApi, IconShare } from '@tabler/icons';
+import { IconFolder, IconWorld, IconApi, IconShare } 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 { addTab } from 'providers/ReduxStore/slices/tabs';
 
 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 globalEnvironments = useSelector((state) => state.globalEnvironments.globalEnvironments);
+
+  const collectionEnvironmentCount = collection.environments?.length || 0;
+  const globalEnvironmentCount = globalEnvironments?.length || 0;
+
   const handleToggleShowShareCollectionModal = (value) => (e) => {
     toggleShowShareCollectionModal(value);
   };
@@ -39,9 +47,38 @@ const Info = ({ collection }) => {
               <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 text-muted text-xs">
-                {collection.environments?.length || 0} environment{collection.environments?.length !== 1 ? 's' : ''} configured
+              <div className="font-medium text-sm">Environments</div>
+              <div className="mt-1 flex flex-col gap-1">
+                <button
+                  type="button"
+                  className="text-sm 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-sm 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>
             </div>
           </div>

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

@@ -6,7 +6,6 @@ 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();
@@ -21,7 +20,6 @@ const RequestsNotLoaded = ({ collection }) => {
   const handleRequestClick = (item) => (e) => {
     e.preventDefault();
     if (isItemARequest(item)) {
-      dispatch(hideHomePage());
       if (itemIsOpenedInTabs(item, tabs)) {
         dispatch(
           focusTab({

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

@@ -0,0 +1,29 @@
+import styled from 'styled-components';
+
+const StyledWrapper = styled.div`
+  max-width: 800px;
+
+  .settings-label {
+    width: 110px;
+  }
+
+  .textbox {
+    border: 1px solid #ccc;
+    padding: 0.15rem 0.45rem;
+    box-shadow: none;
+    border-radius: 0px;
+    outline: none;
+    box-shadow: none;
+    transition: border-color ease-in-out 0.1s;
+    border-radius: 3px;
+    background-color: ${(props) => props.theme.modal.input.bg};
+    border: 1px solid ${(props) => props.theme.modal.input.border};
+
+    &:focus {
+      border: solid 1px ${(props) => props.theme.modal.input.focusBorder} !important;
+      outline: none !important;
+    }
+  }
+`;
+
+export default StyledWrapper;

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

@@ -0,0 +1,135 @@
+import React from 'react';
+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';
+
+const PresetsSettings = ({ collection }) => {
+  const dispatch = useDispatch();
+  const initialPresets = { requestType: 'http', requestUrl: '' };
+
+  // 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 });
+  };
+
+  return (
+    <StyledWrapper className="h-full w-full">
+      <div className="text-xs mb-4 mt-4 text-muted">
+        These presets will be used as the default values for new requests in this collection.
+      </div>
+      <div className="bruno-form">
+        <div className="mb-3 flex items-center">
+          <label className="settings-label flex items-center" htmlFor="http">
+            Request Type
+          </label>
+          <div className="flex items-center">
+            <input
+              id="http"
+              className="cursor-pointer"
+              type="radio"
+              name="requestType"
+              onChange={handleRequestTypeChange}
+              value="http"
+              checked={(currentPresets.requestType || 'http') === 'http'}
+            />
+            <label htmlFor="http" className="ml-1 cursor-pointer select-none">
+              HTTP
+            </label>
+
+            <input
+              id="graphql"
+              className="ml-4 cursor-pointer"
+              type="radio"
+              name="requestType"
+              onChange={handleRequestTypeChange}
+              value="graphql"
+              checked={(currentPresets.requestType || 'http') === 'graphql'}
+            />
+            <label htmlFor="graphql" className="ml-1 cursor-pointer select-none">
+              GraphQL
+            </label>
+
+            <input
+              id="grpc"
+              className="ml-4 cursor-pointer"
+              type="radio"
+              name="requestType"
+              onChange={handleRequestTypeChange}
+              value="grpc"
+              checked={(currentPresets.requestType || 'http') === '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">
+            Base URL
+          </label>
+          <div className="flex items-center w-full">
+            <div className="flex items-center flex-grow input-container h-full">
+              <input
+                id="request-url"
+                type="text"
+                name="requestUrl"
+                placeholder="Request URL"
+                className="block textbox"
+                autoComplete="off"
+                autoCorrect="off"
+                autoCapitalize="off"
+                spellCheck="false"
+                onChange={handleRequestUrlChange}
+                value={currentPresets.requestUrl || ''}
+                style={{ width: '100%' }}
+              />
+            </div>
+          </div>
+        </div>
+
+        <div className="mt-6">
+          <Button type="button" size="sm" onClick={handleSave}>
+            Save
+          </Button>
+        </div>
+      </div>
+    </StyledWrapper>
+  );
+};
+
+export default PresetsSettings;

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

@@ -12,6 +12,7 @@ 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();
@@ -335,9 +336,9 @@ const ProtobufSettings = ({ collection }) => {
       </div>
 
       <div className="mt-6">
-        <button type="button" className="submit btn btn-sm btn-secondary" onClick={handleSave}>
+        <Button type="button" size="sm" onClick={handleSave}>
           Save
-        </button>
+        </Button>
       </div>
 
     </StyledWrapper>

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

@@ -8,6 +8,7 @@ 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();
@@ -358,9 +359,9 @@ const ProxySettings = ({ collection }) => {
           />
         </div>
         <div className="mt-6">
-          <button type="submit" className="submit btn btn-sm btn-secondary" onClick={handleSave}>
+          <Button type="submit" size="sm" onClick={handleSave}>
             Save
-          </button>
+          </Button>
         </div>
       </div>
     </StyledWrapper>

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

@@ -7,6 +7,7 @@ import { saveCollectionSettings } from 'providers/ReduxStore/slices/collections/
 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();
@@ -98,9 +99,9 @@ const Script = ({ collection }) => {
       </Tabs>
 
       <div className="mt-12">
-        <button type="submit" className="submit btn btn-sm btn-secondary" onClick={handleSave}>
+        <Button type="submit" size="sm" onClick={handleSave}>
           Save
-        </button>
+        </Button>
       </div>
     </StyledWrapper>
   );

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

@@ -6,7 +6,7 @@ const StyledWrapper = styled.div`
       padding: 6px 0px;
       border: none;
       border-bottom: solid 2px transparent;
-      margin-right: 1.25rem;
+      margin-right: ${(props) => props.theme.tabs.marginRight};
       color: var(--color-tab-inactive);
       cursor: pointer;
 
@@ -20,6 +20,7 @@ const StyledWrapper = styled.div`
       }
 
       &.active {
+        font-weight: ${(props) => props.theme.tabs.active.fontWeight} !important;
         color: ${(props) => props.theme.tabs.active.color} !important;
         border-bottom: solid 2px ${(props) => props.theme.tabs.active.border} !important;
       }

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

@@ -6,6 +6,7 @@ import { updateCollectionTests } from 'providers/ReduxStore/slices/collections';
 import { saveCollectionSettings } from 'providers/ReduxStore/slices/collections/actions';
 import { useTheme } from 'providers/Theme';
 import StyledWrapper from './StyledWrapper';
+import Button from 'ui/Button';
 
 const Tests = ({ collection }) => {
   const dispatch = useDispatch();
@@ -41,9 +42,9 @@ const Tests = ({ collection }) => {
       />
 
       <div className="mt-6">
-        <button type="submit" className="submit btn btn-sm btn-secondary" onClick={handleSave}>
+        <Button type="submit" size="sm" onClick={handleSave}>
           Save
-        </button>
+        </Button>
       </div>
     </StyledWrapper>
   );

packages/bruno-app/src/components/CollectionSettings/Vars/VarsTable/index.js

@@ -1,160 +1,81 @@
-import React from 'react';
-import cloneDeep from 'lodash/cloneDeep';
-import { IconTrash } from '@tabler/icons';
+import React, { useCallback } from 'react';
 import { useDispatch } from 'react-redux';
 import { useTheme } from 'providers/Theme';
 import { saveCollectionSettings } from 'providers/ReduxStore/slices/collections/actions';
 import MultiLineEditor from 'components/MultiLineEditor';
 import InfoTip from 'components/InfoTip';
+import EditableTable from 'components/EditableTable';
 import StyledWrapper from './StyledWrapper';
 import toast from 'react-hot-toast';
 import { variableNameRegex } from 'utils/common/regex';
-import {
-  addCollectionVar,
-  deleteCollectionVar,
-  updateCollectionVar
-} from 'providers/ReduxStore/slices/collections/index';
+import { setCollectionVars } from 'providers/ReduxStore/slices/collections/index';
 
 const VarsTable = ({ collection, vars, varType }) => {
   const dispatch = useDispatch();
   const { storedTheme } = useTheme();
 
-  const addVar = () => {
-    dispatch(
-      addCollectionVar({
-        collectionUid: collection.uid,
-        type: varType
-      })
-    );
-  };
-
   const onSave = () => dispatch(saveCollectionSettings(collection.uid));
-  const handleVarChange = (e, v, type) => {
-    const _var = cloneDeep(v);
-    switch (type) {
-      case 'name': {
-        const value = e.target.value;
 
-        if (variableNameRegex.test(value) === false) {
-          toast.error(
-            'Variable contains invalid characters! Variables must only contain alpha-numeric characters, "-", "_", "."'
-          );
-          return;
-        }
+  const handleVarsChange = useCallback((updatedVars) => {
+    dispatch(setCollectionVars({ collectionUid: collection.uid, vars: updatedVars, type: varType }));
+  }, [dispatch, collection.uid, varType]);
 
-        _var.name = value;
-        break;
-      }
-      case 'value': {
-        _var.value = e.target.value;
-        break;
-      }
-      case 'enabled': {
-        _var.enabled = e.target.checked;
-        break;
-      }
+  const getRowError = useCallback((row, index, key) => {
+    if (key !== 'name') return null;
+    if (!row.name || row.name.trim() === '') return null;
+    if (!variableNameRegex.test(row.name)) {
+      return 'Variable contains invalid characters. Must only contain alphanumeric characters, "-", "_", "."';
     }
-    dispatch(
-      updateCollectionVar({
-        type: varType,
-        var: _var,
-        collectionUid: collection.uid
-      })
-    );
-  };
+    return null;
+  }, []);
 
-  const handleRemoveVar = (_var) => {
-    dispatch(
-      deleteCollectionVar({
-        type: varType,
-        varUid: _var.uid,
-        collectionUid: collection.uid
-      })
-    );
+  const columns = [
+    {
+      key: 'name',
+      name: 'Name',
+      isKeyField: true,
+      placeholder: 'Name',
+      width: '40%'
+    },
+    {
+      key: 'value',
+      name: varType === 'request' ? 'Value' : (
+        <div className="flex items-center">
+          <span>Expr</span>
+          <InfoTip content="You can write any valid JS Template Literal here" infotipId={`collection-${varType}-var`} />
+        </div>
+      ),
+      placeholder: varType === 'request' ? 'Value' : 'Expr',
+      render: ({ row, value, onChange, isLastEmptyRow }) => (
+        <MultiLineEditor
+          value={value || ''}
+          theme={storedTheme}
+          onSave={onSave}
+          onChange={onChange}
+          collection={collection}
+          placeholder={isLastEmptyRow ? (varType === 'request' ? 'Value' : 'Expr') : ''}
+        />
+      )
+    }
+  ];
+
+  const defaultRow = {
+    name: '',
+    value: '',
+    ...(varType === 'response' ? { local: false } : {})
   };
 
   return (
     <StyledWrapper className="w-full">
-      <table>
-        <thead>
-          <tr>
-            <td>Name</td>
-            {varType === 'request' ? (
-              <td>
-                <div className="flex items-center">
-                  <span>Value</span>
-                </div>
-              </td>
-            ) : (
-              <td>
-                <div className="flex items-center">
-                  <span>Expr</span>
-                  <InfoTip content="You can write any valid JS Template Literal here" infotipId="request-var" />
-                </div>
-              </td>
-            )}
-            <td></td>
-          </tr>
-        </thead>
-        <tbody>
-          {vars && vars.length
-            ? vars.map((_var) => {
-                return (
-                  <tr key={_var.uid}>
-                    <td>
-                      <input
-                        type="text"
-                        autoComplete="off"
-                        autoCorrect="off"
-                        autoCapitalize="off"
-                        spellCheck="false"
-                        value={_var.name}
-                        className="mousetrap"
-                        onChange={(e) => handleVarChange(e, _var, 'name')}
-                      />
-                    </td>
-                    <td>
-                      <MultiLineEditor
-                        value={_var.value}
-                        theme={storedTheme}
-                        onSave={onSave}
-                        onChange={(newValue) =>
-                          handleVarChange(
-                            {
-                              target: {
-                                value: newValue
-                              }
-                            },
-                            _var,
-                            'value'
-                          )}
-                        collection={collection}
-                      />
-                    </td>
-                    <td>
-                      <div className="flex items-center">
-                        <input
-                          type="checkbox"
-                          checked={_var.enabled}
-                          tabIndex="-1"
-                          className="mr-3 mousetrap"
-                          onChange={(e) => handleVarChange(e, _var, 'enabled')}
-                        />
-                        <button tabIndex="-1" onClick={() => handleRemoveVar(_var)}>
-                          <IconTrash strokeWidth={1.5} size={20} />
-                        </button>
-                      </div>
-                    </td>
-                  </tr>
-                );
-              })
-            : null}
-        </tbody>
-      </table>
-      <button className="btn-add-var text-link pr-2 py-3 mt-2 select-none" onClick={addVar}>
-        + Add
-      </button>
+      <EditableTable
+        columns={columns}
+        rows={vars}
+        onChange={handleVarsChange}
+        defaultRow={defaultRow}
+        getRowError={getRowError}
+      />
     </StyledWrapper>
   );
 };
+
 export default VarsTable;

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

@@ -4,22 +4,28 @@ import VarsTable from './VarsTable';
 import StyledWrapper from './StyledWrapper';
 import { saveCollectionSettings } from 'providers/ReduxStore/slices/collections/actions';
 import { useDispatch } from 'react-redux';
-import DeprecationWarning from 'components/DeprecationWarning';
+import Button from 'ui/Button';
 
 const Vars = ({ collection }) => {
   const dispatch = useDispatch();
   const requestVars = collection.draft?.root ? get(collection, 'draft.root.request.vars.req', []) : get(collection, 'root.request.vars.req', []);
+  const responseVars = collection.draft?.root ? get(collection, 'draft.root.request.vars.res', []) : get(collection, 'root.request.vars.res', []);
   const handleSave = () => dispatch(saveCollectionSettings(collection.uid));
 
   return (
     <StyledWrapper className="w-full flex flex-col">
       <div className="flex-1 mt-2">
+        <div className="mb-3 title text-xs">Pre Request</div>
         <VarsTable collection={collection} vars={requestVars} varType="request" />
       </div>
+      <div className="flex-1">
+        <div className="mt-3 mb-3 title text-xs">Post Response</div>
+        <VarsTable collection={collection} vars={responseVars} varType="response" />
+      </div>
       <div className="mt-6">
-        <button type="submit" className="submit btn btn-sm btn-secondary" onClick={handleSave}>
+        <Button type="submit" size="sm" onClick={handleSave}>
           Save
-        </button>
+        </Button>
       </div>
     </StyledWrapper>
   );

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

@@ -9,6 +9,7 @@ import Headers from './Headers';
 import Auth from './Auth';
 import Script from './Script';
 import Test from './Tests';
+import Presets from './Presets';
 import Protobuf from './Protobuf';
 import StyledWrapper from './StyledWrapper';
 import Vars from './Vars/index';
@@ -32,17 +33,34 @@ const CollectionSettings = ({ collection }) => {
   const hasTests = root?.request?.tests;
   const hasDocs = root?.docs;
 
-  const headers = collection.draft?.root ? get(collection, 'draft.root.request.headers', []) : get(collection, 'root.request.headers', []);
+  const headers = collection.draft?.root
+    ? get(collection, 'draft.root.request.headers', [])
+    : get(collection, 'root.request.headers', []);
   const activeHeadersCount = headers.filter((header) => header.enabled).length;
 
-  const requestVars = collection.draft?.root ? get(collection, 'draft.root.request.vars.req', []) : get(collection, 'root.request.vars.req', []);
-  const activeVarsCount = requestVars.filter((v) => v.enabled).length;
-  const authMode = (collection.draft?.root ? get(collection, 'draft.root.request.auth', {}) : get(collection, 'root.request.auth', {})).mode || 'none';
+  const requestVars = collection.draft?.root
+    ? get(collection, 'draft.root.request.vars.req', [])
+    : get(collection, 'root.request.vars.req', []);
+  const responseVars = collection.draft?.root
+    ? get(collection, 'draft.root.request.vars.res', [])
+    : get(collection, 'root.request.vars.res', []);
+  const activeVarsCount = requestVars.filter((v) => v.enabled).length + responseVars.filter((v) => v.enabled).length;
+  const authMode
+    = (collection.draft?.root ? get(collection, 'draft.root.request.auth', {}) : get(collection, 'root.request.auth', {}))
+      .mode || 'none';
 
-  const proxyConfig = collection.draft?.brunoConfig ? get(collection, 'draft.brunoConfig.proxy', {}) : get(collection, 'brunoConfig.proxy', {});
+  const proxyConfig = collection.draft?.brunoConfig
+    ? get(collection, 'draft.brunoConfig.proxy', {})
+    : get(collection, 'brunoConfig.proxy', {});
   const proxyEnabled = proxyConfig.hostname ? true : false;
-  const clientCertConfig = collection.draft?.brunoConfig ? get(collection, 'draft.brunoConfig.clientCertificates.certs', []) : get(collection, 'brunoConfig.clientCertificates.certs', []);
-  const protobufConfig = collection.draft?.brunoConfig ? get(collection, 'draft.brunoConfig.protobuf', {}) : get(collection, 'brunoConfig.protobuf', {});
+  const clientCertConfig = collection.draft?.brunoConfig
+    ? get(collection, 'draft.brunoConfig.clientCertificates.certs', [])
+    : get(collection, 'brunoConfig.clientCertificates.certs', []);
+  const protobufConfig = collection.draft?.brunoConfig
+    ? get(collection, 'draft.brunoConfig.protobuf', {})
+    : get(collection, 'brunoConfig.protobuf', {});
+  const presets = collection.draft?.brunoConfig ? get(collection, 'draft.brunoConfig.presets', {}) : get(collection, 'brunoConfig.presets', {});
+  const hasPresets = presets && presets.requestUrl !== '';
 
   const getTabPanel = (tab) => {
     switch (tab) {
@@ -64,15 +82,14 @@ const CollectionSettings = ({ collection }) => {
       case 'tests': {
         return <Test collection={collection} />;
       }
+      case 'presets': {
+        return <Presets collection={collection} />;
+      }
       case 'proxy': {
         return <ProxySettings collection={collection} />;
       }
       case 'clientCert': {
-        return (
-          <ClientCertSettings
-            collection={collection}
-          />
-        );
+        return <ClientCertSettings collection={collection} />;
       }
       case 'protobuf': {
         return <Protobuf collection={collection} />;
@@ -112,6 +129,10 @@ const CollectionSettings = ({ collection }) => {
           Tests
           {hasTests && <StatusDot />}
         </div>
+        <div className={getTabClassname('presets')} role="tab" onClick={() => setTab('presets')}>
+          Presets
+          {hasPresets && <StatusDot />}
+        </div>
         <div className={getTabClassname('proxy')} role="tab" onClick={() => setTab('proxy')}>
           Proxy
           {Object.keys(proxyConfig).length > 0 && proxyEnabled && <StatusDot />}

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

@@ -9,6 +9,7 @@ import ModifyCookieModal from 'components/Cookies/ModifyCookieModal/index';
 import StyledWrapper from './StyledWrapper';
 import moment from 'moment';
 import { Tooltip } from 'react-tooltip';
+import Button from 'ui/Button';
 
 const ClearDomainCookiesModal = ({ onClose, domain, onClear }) => (
   <Modal onClose={onClose} handleCancel={onClose} title="Clear Domain Cookies" hideFooter={true}>
@@ -22,14 +23,14 @@ const ClearDomainCookiesModal = ({ onClose, domain, onClear }) => (
 
     <div className="flex justify-between mt-6">
       <div>
-        <button className="btn btn-sm btn-close" onClick={onClose}>
+        <Button size="sm" color="secondary" variant="ghost" onClick={onClose}>
           Close
-        </button>
+        </Button>
       </div>
       <div>
-        <button className="btn btn-sm btn-danger" onClick={onClear}>
+        <Button size="sm" color="danger" onClick={onClear}>
           Clear All
-        </button>
+        </Button>
       </div>
     </div>
   </Modal>
@@ -47,14 +48,14 @@ const DeleteCookieModal = ({ onClose, cookieName, onDelete }) => (
 
     <div className="flex justify-between mt-6">
       <div>
-        <button className="btn btn-sm btn-close" onClick={onClose}>
+        <Button size="sm" color="secondary" variant="ghost" onClick={onClose}>
           Close
-        </button>
+        </Button>
       </div>
       <div>
-        <button className="btn btn-sm btn-danger" onClick={onDelete}>
+        <Button size="sm" color="danger" onClick={onDelete}>
           Delete
-        </button>
+        </Button>
       </div>
     </div>
   </Modal>
@@ -137,18 +138,20 @@ const CollectionProperties = ({ onClose }) => {
               value={searchText || ''}
               onChange={(e) => setSearchText(e.target.value)}
               className="block textbox non-passphrase-input ml-auto font-normal"
+              autoFocus
             />
-            <button
+            <Button
               type="submit"
-              className="submit btn btn-sm btn-secondary flex items-center gap-1 mx-4 font-medium"
+              size="sm"
+              className="mx-4"
+              icon={<IconCirclePlus strokeWidth={1.5} size={16} />}
               onClick={(e) => {
                 e.stopPropagation();
                 handleAddCookie();
               }}
             >
-              <IconCirclePlus strokeWidth={1.5} size={16} />
               <span>Add Cookie</span>
-            </button>
+            </Button>
           </StyledWrapper>
         ) : null}
       >

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

@@ -0,0 +1,8 @@
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  position: relative;
+  display: inline-block;
+`;
+
+export default Wrapper;

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

@@ -0,0 +1,152 @@
+import React, { useMemo, useCallback } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import MenuDropdown from 'ui/MenuDropdown';
+import { newHttpRequest, newGrpcRequest, newWsRequest } from 'providers/ReduxStore/slices/collections/actions';
+import { generateUniqueRequestName } from 'utils/collections';
+import { sanitizeName } from 'utils/common/regex';
+import toast from 'react-hot-toast';
+import { IconApi, IconBrandGraphql, IconPlugConnected, IconCode, IconPlus } from '@tabler/icons';
+import ActionIcon from 'ui/ActionIcon';
+
+const CreateUntitledRequest = ({ collectionUid, itemUid = null, onRequestCreated, placement = 'bottom' }) => {
+  const dispatch = useDispatch();
+  const collections = useSelector((state) => state.collections.collections);
+  const collection = collections?.find((c) => c.uid === collectionUid);
+
+  const handleCreateHttpRequest = useCallback(async () => {
+    const uniqueName = await generateUniqueRequestName(collection, 'Untitled', itemUid);
+    const filename = sanitizeName(uniqueName);
+
+    dispatch(
+      newHttpRequest({
+        requestName: uniqueName,
+        filename: filename,
+        requestType: 'http-request',
+        requestUrl: '',
+        requestMethod: 'GET',
+        collectionUid: collection.uid,
+        itemUid: itemUid
+      })
+    )
+      .then(() => {
+        toast.success('New request created!');
+        onRequestCreated?.();
+      })
+      .catch((err) => toast.error(err ? err.message : 'An error occurred while adding the request'));
+  }, [dispatch, collection, itemUid, onRequestCreated]);
+
+  const handleCreateGraphQLRequest = useCallback(async () => {
+    const uniqueName = await generateUniqueRequestName(collection, 'Untitled', itemUid);
+    const filename = sanitizeName(uniqueName);
+
+    dispatch(
+      newHttpRequest({
+        requestName: uniqueName,
+        filename: filename,
+        requestType: 'graphql-request',
+        requestUrl: '',
+        requestMethod: 'POST',
+        collectionUid: collection.uid,
+        itemUid: itemUid,
+        body: {
+          mode: 'graphql',
+          graphql: {
+            query: '',
+            variables: ''
+          }
+        }
+      })
+    )
+      .then(() => {
+        toast.success('New request created!');
+        onRequestCreated?.();
+      })
+      .catch((err) => toast.error(err ? err.message : 'An error occurred while adding the request'));
+  }, [dispatch, collection, itemUid, onRequestCreated]);
+
+  const handleCreateWebSocketRequest = useCallback(async () => {
+    const uniqueName = await generateUniqueRequestName(collection, 'Untitled', itemUid);
+    const filename = sanitizeName(uniqueName);
+
+    dispatch(
+      newWsRequest({
+        requestName: uniqueName,
+        filename: filename,
+        requestUrl: '',
+        requestMethod: 'ws',
+        collectionUid: collection.uid,
+        itemUid: itemUid
+      })
+    )
+      .then(() => {
+        toast.success('New request created!');
+        onRequestCreated?.();
+      })
+      .catch((err) => toast.error(err ? err.message : 'An error occurred while adding the request'));
+  }, [dispatch, collection, itemUid, onRequestCreated]);
+
+  const handleCreateGrpcRequest = useCallback(async () => {
+    const uniqueName = await generateUniqueRequestName(collection, 'Untitled', itemUid);
+    const filename = sanitizeName(uniqueName);
+
+    dispatch(
+      newGrpcRequest({
+        requestName: uniqueName,
+        filename: filename,
+        requestUrl: '',
+        collectionUid: collection.uid,
+        itemUid: itemUid
+      })
+    )
+      .then(() => {
+        toast.success('New request created!');
+        onRequestCreated?.();
+      })
+      .catch((err) => toast.error(err ? err.message : 'An error occurred while adding the request'));
+  }, [dispatch, collection, itemUid, onRequestCreated]);
+
+  const menuItems = useMemo(() => [
+    {
+      id: 'http',
+      label: 'HTTP',
+      leftSection: <IconApi size={16} strokeWidth={2} />,
+      onClick: handleCreateHttpRequest
+    },
+    {
+      id: 'graphql',
+      label: 'GraphQL',
+      leftSection: <IconBrandGraphql size={16} strokeWidth={2} />,
+      onClick: handleCreateGraphQLRequest
+    },
+    {
+      id: 'websocket',
+      label: 'WebSocket',
+      leftSection: <IconPlugConnected size={16} strokeWidth={2} />,
+      onClick: handleCreateWebSocketRequest
+    },
+    {
+      id: 'grpc',
+      label: 'gRPC',
+      leftSection: <IconCode size={16} strokeWidth={2} />,
+      onClick: handleCreateGrpcRequest
+    }
+  ], [handleCreateHttpRequest, handleCreateGraphQLRequest, handleCreateWebSocketRequest, handleCreateGrpcRequest]);
+
+  if (!collection) {
+    return null;
+  }
+
+  return (
+    <MenuDropdown
+      items={menuItems}
+      placement={placement}
+      autoFocusFirstOption={true}
+    >
+      <ActionIcon size="sm">
+        <IconPlus size={16} strokeWidth={2} />
+      </ActionIcon>
+    </MenuDropdown>
+  );
+};
+
+export default CreateUntitledRequest;

packages/bruno-app/src/components/Devtools/Console/RequestDetailsPanel/StyledWrapper.js

@@ -168,7 +168,7 @@ const StyledWrapper = styled.div`
         position: sticky;
         top: 0;
         z-index: 10;
-        
+
         td {
           padding: 8px 12px;
           font-weight: 500;
@@ -256,10 +256,8 @@ const StyledWrapper = styled.div`
   }
 
   .response-body-container {
-    border: 1px solid ${(props) => props.theme.console.border};
     border-radius: 4px;
     overflow: hidden;
-    background: ${(props) => props.theme.console.headerBg};
     height: 400px;
     display: flex;
     flex-direction: column;
@@ -267,13 +265,11 @@ const StyledWrapper = styled.div`
     .w-full.h-full.relative.flex {
       height: 100% !important;
       width: 100% !important;
-      background: ${(props) => props.theme.console.headerBg} !important;
       display: flex !important;
       flex-direction: column !important;
     }
 
     div[role="tablist"] {
-      background: ${(props) => props.theme.console.dropdownHeaderBg};
       padding: 8px 12px;
       border-bottom: 1px solid ${(props) => props.theme.console.border};
       display: flex !important;
@@ -282,28 +278,17 @@ const StyledWrapper = styled.div`
       align-items: center !important;
       min-height: 40px !important;
       flex-shrink: 0 !important;
-      
+
       > div {
         color: ${(props) => props.theme.console.buttonColor};
         font-size: ${(props) => props.theme.font.size.sm} !important;
-        padding: 6px 12px !important;
-        border-radius: 4px;
-        transition: all 0.2s ease;
         cursor: pointer;
-        border: 1px solid ${(props) => props.theme.console.border};
-        background: ${(props) => props.theme.console.contentBg};
         white-space: nowrap !important;
         min-width: auto !important;
         height: auto !important;
         line-height: 1.2 !important;
         font-weight: 500 !important;
 
-        &:hover {
-          background: ${(props) => props.theme.console.buttonHoverBg};
-          color: ${(props) => props.theme.console.buttonHoverColor};
-          border-color: ${(props) => props.theme.console.buttonHoverBg};
-        }
-
         &.active {
           background: ${(props) => props.theme.console.checkboxColor};
           color: white;

packages/bruno-app/src/components/Devtools/Console/RequestDetailsPanel/index.js

@@ -7,7 +7,7 @@ import {
   IconNetwork
 } from '@tabler/icons';
 import { clearSelectedRequest } from 'providers/ReduxStore/slices/logs';
-import QueryResult from 'components/ResponsePane/QueryResult';
+import QueryResponse from 'components/ResponsePane/QueryResponse/index';
 import Network from 'components/ResponsePane/Timeline/TimelineItem/Network';
 import StyledWrapper from './StyledWrapper';
 import { uuid } from 'utils/common/index';
@@ -116,7 +116,7 @@ const ResponseTab = ({ response, request, collection }) => {
         <h4>Response Body</h4>
         <div className="response-body-container">
           {response?.data || response?.dataBuffer ? (
-            <QueryResult
+            <QueryResponse
               item={{ uid: uuid() }}
               collection={collection}
               data={response.data}

packages/bruno-app/src/components/Devtools/Console/TerminalTab/index.js

@@ -183,6 +183,29 @@ const openTerminalIntoContainer = async (container, sessionId) => {
   }
 };
 
+let fitFrameRef;
+const fitTerminal = (activeSessionId, container) => {
+  if (!container) return;
+
+  const instance = terminalInstances.get(activeSessionId);
+  if (!instance?.fitAddon) return;
+
+  if (fitFrameRef) {
+    cancelAnimationFrame(fitFrameRef);
+  }
+
+  fitFrameRef = requestAnimationFrame(() => {
+    fitFrameRef = null;
+
+    // Avoid fitting when hidden/0-sized (common during tab switches/layout transitions)
+    if (container.offsetWidth === 0 || container.offsetHeight === 0) return;
+
+    try {
+      instance.fitAddon.fit();
+    } catch (e) {}
+  });
+};
+
 const TerminalTab = () => {
   const terminalRef = useRef(null);
   const [sessions, setSessions] = useState([]);
@@ -223,22 +246,25 @@ const TerminalTab = () => {
   }, []);
 
   // Create new terminal session
-  const createNewSession = useCallback(async (cwd = null) => {
-    if (!window.ipcRenderer) return null;
+  const createNewSession = useCallback(
+    async (cwd = null) => {
+      if (!window.ipcRenderer) return null;
 
-    try {
-      const options = cwd ? { cwd } : {};
-      const newSessionId = await window.ipcRenderer.invoke('terminal:create', options);
-      if (newSessionId) {
-        await loadSessions(newSessionId);
-        setActiveSessionId(newSessionId);
-        return newSessionId;
+      try {
+        const options = cwd ? { cwd } : {};
+        const newSessionId = await window.ipcRenderer.invoke('terminal:create', options);
+        if (newSessionId) {
+          await loadSessions(newSessionId);
+          setActiveSessionId(newSessionId);
+          return newSessionId;
+        }
+      } catch (err) {
+        console.error('Failed to create terminal session:', err);
       }
-    } catch (err) {
-      console.error('Failed to create terminal session:', err);
-    }
-    return null;
-  }, [loadSessions]);
+      return null;
+    },
+    [loadSessions]
+  );
 
   // Listen for requests to open terminal at specific CWD
   useEffect(() => {
@@ -339,31 +365,17 @@ const TerminalTab = () => {
 
       if (mounted) {
         const instance = terminalInstances.get(activeSessionId);
-        if (instance && instance.fitAddon) {
-          const onResize = () => {
-            try {
-              instance.fitAddon.fit();
-            } catch (e) {}
-          };
-
-          window.addEventListener('resize', onResize);
-
-          // Initial resize
-          setTimeout(() => {
-            try {
-              instance.fitAddon.fit();
-              const { cols, rows } = instance.terminal;
-              if (cols && rows && window.ipcRenderer) {
-                window.ipcRenderer.send('terminal:resize', activeSessionId, { cols, rows });
-              }
-            } catch (err) {
-              console.warn('Failed to perform initial resize:', err);
+        if (instance) {
+          try {
+            const { cols, rows } = instance.terminal;
+            if (cols && rows && window.ipcRenderer) {
+              window.ipcRenderer.send('terminal:resize', activeSessionId, { cols, rows });
             }
-          }, 100);
+          } catch (err) {
+            console.warn('Failed to perform initial resize:', err);
+          }
 
           return () => {
-            window.removeEventListener('resize', onResize);
-
             // Park terminal element when switching sessions
             if (instance.terminal && instance.terminal.element) {
               const host = ensureParkingHost();
@@ -386,6 +398,18 @@ const TerminalTab = () => {
     };
   }, [activeSessionId]);
 
+  const onSessionMount = useCallback(
+    (node) => {
+      if (!node) return;
+      terminalRef.current = node;
+      fitTerminal(activeSessionId, node);
+      const ro = new ResizeObserver(() => fitTerminal(activeSessionId, node));
+      ro.observe(node.parentNode);
+      return () => ro.disconnect();
+    },
+    [activeSessionId]
+  );
+
   return (
     <StyledWrapper>
       <div className="terminal-content">
@@ -405,13 +429,9 @@ const TerminalTab = () => {
           </div>
           <div className="terminal-sessions-list">
             {isLoading ? (
-              <div style={{ padding: '12px', color: '#888', fontSize: '13px' }}>
-                Loading sessions...
-              </div>
+              <div style={{ padding: '12px', color: '#888', fontSize: '13px' }}>Loading sessions...</div>
             ) : sessions.length === 0 ? (
-              <div style={{ padding: '12px', color: '#888', fontSize: '13px' }}>
-                No active sessions
-              </div>
+              <div style={{ padding: '12px', color: '#888', fontSize: '13px' }}>No active sessions</div>
             ) : (
               <SessionList
                 sessions={sessions}
@@ -432,7 +452,7 @@ const TerminalTab = () => {
             </div>
           )}
           <div
-            ref={terminalRef}
+            ref={onSessionMount}
             className="terminal-container"
             style={{
               height: '100%',

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

@@ -1,115 +1,165 @@
 import styled from 'styled-components';
 
 const Wrapper = styled.div`
-  .dropdown-toggle {
-    &:hover {
-      color: black;
+  min-width: 160px;
+  font-size: ${(props) => props.theme.font.size.base};
+  color: ${(props) => props.theme.dropdown.color};
+  background-color: ${(props) => props.theme.dropdown.bg};
+  box-shadow: ${(props) => props.theme.shadow.sm};
+  border-radius: ${(props) => props.theme.border.radius.base};
+  max-height: 90vh;
+  overflow-y: auto;
+  max-width: unset !important;
+  padding: 0.25rem;
+
+  [role="menu"] {
+    outline: none;
+    &:focus {
+      outline: none;
+    }
+    &:focus-visible {
+      outline: none;
     }
   }
 
-  .tippy-box {
-    min-width: 160px;
-    font-size: ${(props) => props.theme.font.size.base};
+  .label-item {
+    display: flex;
+    align-items: center;
+    padding: 0.375rem 0.625rem 0.25rem 0.625rem;
+    font-size: 0.6875rem;
+    font-weight: 600;
+    letter-spacing: 0.025em;
     color: ${(props) => props.theme.dropdown.color};
-    background-color: ${(props) => props.theme.dropdown.bg};
-    box-shadow: ${(props) => props.theme.shadow.sm};
-    border-radius: ${(props) => props.theme.border.radius.base};
-    max-height: 90vh;
-    overflow-y: auto;
-    max-width: unset !important;
-    padding: 0.25rem;
+    opacity: 0.6;
+    margin-top: 0.25rem;
+    &:first-child {
+      margin-top: 0;
+    }
+  }
 
-    .tippy-content {
-      padding-left: 0;
-      padding-right: 0;
-      padding-top: 0;
-      padding-bottom: 0;
+  .dropdown-item {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.275rem 0.625rem;
+    cursor: pointer;
+    border-radius: 6px;
+    margin: 0.0625rem 0;
+    font-size: 0.8125rem;
 
-      .label-item {
-        display: flex;
-        align-items: center;
-        padding: 0.375rem 0.625rem 0.25rem 0.625rem;
-        font-size: 0.6875rem;
-        font-weight: 600;
-        text-transform: uppercase;
-        letter-spacing: 0.025em;
-        color: ${(props) => props.theme.dropdown.color};
-        opacity: 0.6;
-        margin-top: 0.25rem;
-        
-        &:first-child {
-          margin-top: 0;
-        }
-      }
-
-      .dropdown-item {
-        display: flex;
-        align-items: center;
-        gap: 0.5rem;
-        padding: 0.275rem 0.625rem;
-        cursor: pointer;
-        border-radius: 6px;
-        margin: 0.0625rem 0;
-        font-size: 0.8125rem;
-
-        &.active {
-          color: ${(props) => props.theme.colors.text.yellow} !important;
-          .dropdown-icon {
-            color: ${(props) => props.theme.colors.text.yellow} !important;
-          }
-        }
-
-        .dropdown-icon {
-          flex-shrink: 0;
-          width: 16px;
-          height: 16px;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          color: ${(props) => props.theme.dropdown.iconColor};
-          opacity: 0.8;
-        }
-
-        &:hover:not(:disabled) {
-          background-color: ${(props) => props.theme.dropdown.hoverBg};
-        }
-
-        &:disabled {
-          cursor: not-allowed;
-          opacity: 0.5;
-        }
-
-        &.delete-item {
-          color: ${(props) => props.theme.colors.text.danger};
-          .dropdown-icon {
-            color: ${(props) => props.theme.colors.text.danger};
-          }
-          &:hover {
-            background-color: ${({ theme }) => {
-              const hex = theme.colors.text.danger.replace('#', '');
-              const r = parseInt(hex.substring(0, 2), 16);
-              const g = parseInt(hex.substring(2, 4), 16);
-              const b = parseInt(hex.substring(4, 6), 16);
-              return `rgba(${r}, ${g}, ${b}, 0.04)`; // 4% opacity
-            }} !important;
-
-            color: ${(props) => props.theme.colors.text.danger} !important;
-          }
-        }
-
-        &.border-top {
-          border-top: solid 1px ${(props) => props.theme.dropdown.separator};
-          margin-top: 0.25rem;
-          padding-top: 0.375rem;
-        }
-      }
-
-      .dropdown-separator {
-        height: 1px;
-        background-color: ${(props) => props.theme.dropdown.separator};
-        margin: 0.25rem 0;
+    &.active {
+      color: ${(props) => props.theme.colors.text.yellow} !important;
+      .dropdown-icon {
+        color: ${(props) => props.theme.colors.text.yellow} !important;
       }
     }
+
+    .dropdown-label {
+      flex: 1;
+    }
+
+    .dropdown-icon {
+      flex-shrink: 0;
+      width: 16px;
+      height: 16px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: ${(props) => props.theme.dropdown.iconColor};
+      opacity: 0.8;
+    }
+
+    .dropdown-right-section {
+      margin-left: auto;
+      flex-shrink: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    &:hover:not(:disabled):not(.disabled) {
+      background-color: ${(props) => props.theme.dropdown.hoverBg};
+    }
+
+    &.selected-focused:not(:disabled):not(.disabled) {
+      background-color: ${(props) => props.theme.dropdown.hoverBg};
+    }
+
+    &:focus-visible:not(:disabled):not(.disabled) {
+      outline: none;
+      background-color: ${(props) => props.theme.dropdown.hoverBg};
+    }
+
+    &:focus:not(:focus-visible) {
+      outline: none;
+    }
+
+    &:disabled,
+    &.disabled {
+      cursor: not-allowed;
+      opacity: 0.5;
+    }
+
+    &.delete-item {
+      color: ${(props) => props.theme.colors.text.danger};
+      .dropdown-icon {
+        color: ${(props) => props.theme.colors.text.danger};
+      }
+      &:hover {
+        background-color: ${({ theme }) => {
+          const hex = theme.colors.text.danger.replace('#', '');
+          const r = parseInt(hex.substring(0, 2), 16);
+          const g = parseInt(hex.substring(2, 4), 16);
+          const b = parseInt(hex.substring(4, 6), 16);
+          return `rgba(${r}, ${g}, ${b}, 0.04)`; // 4% opacity
+        }} !important;
+
+        color: ${(props) => props.theme.colors.text.danger} !important;
+      }
+    }
+
+    &.border-top {
+      border-top: solid 1px ${(props) => props.theme.dropdown.separator};
+      margin-top: 0.25rem;
+      padding-top: 0.375rem;
+    }
+
+    &.dropdown-item-select {
+      padding-left: 1.5rem;
+    }
+
+    /* Focused state - applied during keyboard navigation */
+    &.dropdown-item-focused {
+      background-color: ${({ theme }) => theme.dropdown.hoverBg};
+      outline: none;
+    }
+
+    /* Active/selected state - applied to the currently selected item */
+    &.dropdown-item-active {
+      color: ${({ theme }) => theme.colors.text.yellow};
+      background-color: ${({ theme }) => theme.dropdown.activeBg};
+      font-weight: 500;
+      .dropdown-icon {
+        color: ${({ theme }) => theme.colors.text.yellow};
+      }
+    }
+
+    /* Combined state - when active item is also focused */
+    &.dropdown-item-active.dropdown-item-focused {
+      background-color: ${({ theme }) => theme.dropdown.activeHoverBg};
+    }
+
+    /* Focus visible for accessibility */
+    &:focus-visible {
+      outline: 2px solid ${({ theme }) => theme.dropdown.focusRing};
+      outline-offset: -2px;
+    }
+  }
+
+  .dropdown-separator {
+    height: 1px;
+    background-color: ${(props) => props.theme.dropdown.separator};
+    margin: 0.25rem 0;
   }
 `;
 

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

@@ -2,25 +2,27 @@ import React from 'react';
 import Tippy from '@tippyjs/react';
 import StyledWrapper from './StyledWrapper';
 
-const Dropdown = ({ icon, children, onCreate, placement, transparent, visible, ...props }) => {
+const Dropdown = ({ icon, children, onCreate, placement, transparent, visible, appendTo, ...props }) => {
   // When in controlled mode (visible prop is provided), don't use trigger prop
   const tippyProps = visible !== undefined
-    ? { ...props, visible, interactive: true, appendTo: 'parent' }
-    : { ...props, trigger: 'click', interactive: true, appendTo: 'parent' };
+    ? { ...props, visible, interactive: true, appendTo: appendTo || 'parent' }
+    : { ...props, trigger: 'click', interactive: true, appendTo: appendTo || 'parent' };
 
   return (
-    <StyledWrapper className="dropdown" transparent={transparent}>
-      <Tippy
-        content={children}
-        placement={placement || 'bottom-end'}
-        animation={false}
-        arrow={false}
-        onCreate={onCreate}
-        {...tippyProps}
-      >
-        {icon}
-      </Tippy>
-    </StyledWrapper>
+    <Tippy
+      render={(attrs) => (
+        <StyledWrapper className="tippy-box dropdown" transparent={transparent} tabIndex={-1} {...attrs}>
+          {children}
+        </StyledWrapper>
+      )}
+      placement={placement || 'bottom-end'}
+      animation={false}
+      arrow={false}
+      onCreate={onCreate}
+      {...tippyProps}
+    >
+      {icon}
+    </Tippy>
   );
 };
 

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

@@ -0,0 +1,153 @@
+import styled from 'styled-components';
+
+const StyledWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  overflow: hidden;
+
+  .table-container {
+    overflow-y: auto;
+    border-radius: ${(props) => props.theme.border.radius.base};
+    border: ${(props) => props.theme.workspace.environments.indentBorder};
+  }
+
+  table {
+    width: 100%;
+    border-collapse: collapse;
+    table-layout: fixed;
+    font-size: ${(props) => props.theme.font.size.base};
+    font-weight: normal !important;
+  }
+
+  thead {
+    color: ${(props) => props.theme.table.thead.color} !important;
+    background: ${(props) => props.theme.sidebar.bg};
+    user-select: none;
+
+    border: none !important;
+
+    td {
+      padding: 5px 10px !important;
+      border-top: none !important;
+      border-left: none !important;
+      border-bottom: ${(props) => props.theme.workspace.environments.indentBorder};
+      border-right: ${(props) => props.theme.workspace.environments.indentBorder};
+      vertical-align: middle;
+
+      &:last-child {
+        border-right: none;
+      }
+    }
+  }
+
+  &.has-checkbox thead td:nth-child(1) {
+    width: 25px !important;
+    border-right: none;
+  }
+
+  tbody {
+    tr {
+      transition: background 0.1s ease;
+
+      &:last-child td {
+        border-bottom: none;
+      }
+
+      td {
+        padding: 1px 10px !important;
+        border-top: none !important;
+        border-left: none !important;
+        border-bottom: ${(props) => props.theme.workspace.environments.indentBorder};
+        border-right: ${(props) => props.theme.workspace.environments.indentBorder};
+        vertical-align: middle;
+
+        &:last-child {
+          border-right: none;
+        }
+      }
+    }
+  }
+
+  &.has-checkbox tbody td:nth-child(1) {
+    width: 25px;
+    border-right: none;
+    text-align: center;
+    vertical-align: middle;
+    line-height: 1;
+
+    input[type='checkbox'] {
+      vertical-align: baseline;
+      display: inline-block;
+    }
+  }
+
+  .tooltip-mod {
+    font-size: 11px !important;
+    max-width: 200px !important;
+  }
+
+  input[type='text'] {
+    width: 100%;
+    outline: none !important;
+    background-color: transparent;
+    color: ${(props) => props.theme.text};
+    padding: 0;
+    border-radius: 4px;
+    transition: all 0.15s ease;
+
+    &:focus {
+      outline: none !important;
+    }
+  }
+
+  input[type='checkbox'] {
+    cursor: pointer;
+    width: 14px;
+    height: 14px;
+    accent-color: ${(props) => props.theme.colors.accent};
+    vertical-align: middle;
+    margin: 0;
+  }
+
+  button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 4px;
+    color: ${(props) => props.theme.colors.text.muted};
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    border-radius: 4px;
+    transition: color 0.15s ease, background 0.15s ease;
+
+    &:hover {
+      color: ${(props) => props.theme.colors.text.danger};
+    }
+  }
+
+  .drag-handle {
+    .icon-grip,
+    .icon-minus {
+      color: ${(props) => props.theme.colors.text.muted};
+    }
+  }
+
+  select {
+    background-color: transparent;
+    color: ${(props) => props.theme.text};
+    border: none;
+    outline: none;
+    padding: 2px 8px;
+    font-size: 12px;
+    cursor: pointer;
+
+    option {
+      background-color: ${(props) => props.theme.bg};
+      color: ${(props) => props.theme.text};
+    }
+  }
+`;
+
+export default StyledWrapper;

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

@@ -0,0 +1,323 @@
+import React, { useCallback, useMemo, useRef, useState } from 'react';
+import { IconTrash, IconAlertCircle, IconGripVertical, IconMinusVertical } from '@tabler/icons';
+import { Tooltip } from 'react-tooltip';
+import { uuid } from 'utils/common';
+import StyledWrapper from './StyledWrapper';
+
+const EditableTable = ({
+  columns,
+  rows,
+  onChange,
+  defaultRow,
+  getRowError,
+  showCheckbox = true,
+  showDelete = true,
+  checkboxLabel = '',
+  checkboxKey = 'enabled',
+  reorderable = false,
+  onReorder,
+  showAddRow = true,
+  testId = 'editable-table'
+}) => {
+  const tableRef = useRef(null);
+  const emptyRowUidRef = useRef(null);
+  const [hoveredRow, setHoveredRow] = useState(null);
+  const [dragStart, setDragStart] = useState(null);
+
+  const createEmptyRow = useCallback(() => {
+    const newUid = uuid();
+    emptyRowUidRef.current = newUid;
+    return {
+      uid: newUid,
+      [checkboxKey]: true,
+      ...defaultRow
+    };
+  }, [defaultRow, checkboxKey]);
+
+  const rowsWithEmpty = useMemo(() => {
+    if (!showAddRow) {
+      return rows;
+    }
+
+    if (rows.length === 0) {
+      return [createEmptyRow()];
+    }
+
+    const lastRow = rows[rows.length - 1];
+    const keyColumn = columns.find((col) => col.isKeyField);
+
+    if (keyColumn) {
+      const lastRowKeyValue = keyColumn.getValue ? keyColumn.getValue(lastRow) : lastRow[keyColumn.key];
+      const isLastRowEmpty = !lastRowKeyValue || (typeof lastRowKeyValue === 'string' && lastRowKeyValue.trim() === '');
+
+      if (isLastRowEmpty) {
+        return rows;
+      }
+    }
+
+    if (!emptyRowUidRef.current || rows.some((r) => r.uid === emptyRowUidRef.current)) {
+      emptyRowUidRef.current = uuid();
+    }
+
+    return [...rows, {
+      uid: emptyRowUidRef.current,
+      [checkboxKey]: true,
+      ...defaultRow
+    }];
+  }, [rows, columns, defaultRow, checkboxKey, createEmptyRow, showAddRow]);
+
+  const isEmptyRow = useCallback((row) => {
+    const keyColumn = columns.find((col) => col.isKeyField);
+    if (!keyColumn) return false;
+
+    const value = keyColumn.getValue ? keyColumn.getValue(row) : row[keyColumn.key];
+    return !value || (typeof value === 'string' && value.trim() === '');
+  }, [columns]);
+
+  const isLastEmptyRow = useCallback((row, index) => {
+    if (!showAddRow) return false;
+    return index === rowsWithEmpty.length - 1 && isEmptyRow(row);
+  }, [rowsWithEmpty.length, isEmptyRow, showAddRow]);
+
+  const handleValueChange = useCallback((rowUid, key, value) => {
+    const rowIndex = rowsWithEmpty.findIndex((r) => r.uid === rowUid);
+    if (rowIndex === -1) return;
+
+    const currentRow = rowsWithEmpty[rowIndex];
+    const isLast = rowIndex === rowsWithEmpty.length - 1;
+    const wasEmpty = isEmptyRow(currentRow);
+
+    const keyColumn = columns.find((col) => col.isKeyField);
+    const isKeyFieldChange = keyColumn && keyColumn.key === key;
+
+    let updatedRows = rowsWithEmpty.map((row) => {
+      if (row.uid === rowUid) {
+        return { ...row, [key]: value };
+      }
+      return row;
+    });
+
+    // Only add a new empty row when the key field is filled
+    if (showAddRow && isLast && wasEmpty && isKeyFieldChange && value && value.trim() !== '') {
+      emptyRowUidRef.current = uuid();
+      updatedRows.push({
+        uid: emptyRowUidRef.current,
+        [checkboxKey]: true,
+        ...defaultRow
+      });
+    }
+
+    const hasAnyValue = (row) => {
+      for (const col of columns) {
+        const val = col.getValue ? col.getValue(row) : row[col.key];
+        const defaultVal = defaultRow[col.key];
+        if (val && val !== defaultVal && (typeof val !== 'string' || val.trim() !== '')) {
+          return true;
+        }
+      }
+      return false;
+    };
+
+    const result = updatedRows.filter((row, i) => {
+      if (showAddRow && i === updatedRows.length - 1) {
+        return hasAnyValue(row);
+      }
+      return true;
+    });
+
+    onChange(result);
+  }, [rowsWithEmpty, columns, onChange, checkboxKey, defaultRow, isEmptyRow, showAddRow]);
+
+  const handleCheckboxChange = useCallback((rowUid, checked) => {
+    handleValueChange(rowUid, checkboxKey, checked);
+  }, [handleValueChange, checkboxKey]);
+
+  const handleRemoveRow = useCallback((rowUid) => {
+    const filteredRows = rows.filter((row) => row.uid !== rowUid);
+    onChange(filteredRows);
+  }, [rows, onChange]);
+
+  const getColumnWidth = useCallback((column) => {
+    if (column.width) return column.width;
+    return 'auto';
+  }, []);
+
+  const handleDragStart = useCallback((e, index) => {
+    e.dataTransfer.effectAllowed = 'move';
+    e.dataTransfer.setData('text/plain', index);
+    setDragStart(index);
+  }, []);
+
+  const handleDragOver = useCallback((e, index) => {
+    e.preventDefault();
+    e.dataTransfer.dropEffect = 'move';
+    setHoveredRow(index);
+  }, []);
+
+  const handleDrop = useCallback((e, toIndex) => {
+    e.preventDefault();
+    const fromIndex = parseInt(e.dataTransfer.getData('text/plain'), 10);
+    if (fromIndex !== toIndex && onReorder) {
+      const reorderableRows = showAddRow ? rowsWithEmpty.slice(0, -1) : rowsWithEmpty;
+      const updatedOrder = [...reorderableRows];
+      const [movedRow] = updatedOrder.splice(fromIndex, 1);
+      updatedOrder.splice(toIndex, 0, movedRow);
+      onReorder({ updateReorderedItem: updatedOrder.map((row) => row.uid) });
+    }
+    setDragStart(null);
+    setHoveredRow(null);
+  }, [onReorder, rowsWithEmpty, showAddRow]);
+
+  const handleDragEnd = useCallback(() => {
+    setDragStart(null);
+    setHoveredRow(null);
+  }, []);
+
+  const renderCell = useCallback((column, row, rowIndex) => {
+    const isEmpty = isLastEmptyRow(row, rowIndex);
+    const value = column.getValue ? column.getValue(row) : row[column.key];
+    const error = getRowError?.(row, rowIndex, column.key);
+
+    if (column.render) {
+      return column.render({
+        row,
+        value,
+        rowIndex,
+        isLastEmptyRow: isEmpty,
+        onChange: (newValue) => handleValueChange(row.uid, column.key, newValue),
+        error
+      });
+    }
+
+    return (
+      <div className="flex items-center">
+        <input
+          type="text"
+          autoComplete="off"
+          autoCorrect="off"
+          autoCapitalize="off"
+          spellCheck="false"
+          className="mousetrap"
+          value={value || ''}
+          readOnly={column.readOnly}
+          placeholder={isEmpty ? column.placeholder || column.name : ''}
+          onChange={(e) => handleValueChange(row.uid, column.key, e.target.value)}
+        />
+        {error && !isEmpty && (
+          <span>
+            <IconAlertCircle
+              data-tooltip-id={`error-${row.uid}-${column.key}`}
+              className="text-red-600 cursor-pointer"
+              size={20}
+            />
+            <Tooltip
+              className="tooltip-mod"
+              id={`error-${row.uid}-${column.key}`}
+              html={error}
+            />
+          </span>
+        )}
+      </div>
+    );
+  }, [isLastEmptyRow, getRowError, handleValueChange]);
+
+  const reorderableRowCount = showAddRow ? rowsWithEmpty.length - 1 : rowsWithEmpty.length;
+
+  return (
+    <StyledWrapper className={showCheckbox ? 'has-checkbox' : 'no-checkbox'}>
+      <div className="table-container" ref={tableRef} data-testid={testId}>
+        <table>
+          <thead>
+            <tr>
+              {showCheckbox && (
+                <td className="text-center">{checkboxLabel}</td>
+              )}
+              {columns.map((column) => (
+                <td
+                  key={column.key}
+                  style={{ width: getColumnWidth(column) }}
+                >
+                  {column.name}
+                </td>
+              ))}
+              {showDelete && (
+                <td style={{ width: '60px' }}></td>
+              )}
+            </tr>
+          </thead>
+          <tbody>
+            {rowsWithEmpty.map((row, rowIndex) => {
+              const isEmpty = isLastEmptyRow(row, rowIndex);
+              const canDrag = reorderable && !isEmpty && rowIndex < reorderableRowCount;
+
+              return (
+                <tr
+                  key={row.uid}
+                  draggable={canDrag}
+                  onDragStart={canDrag ? (e) => handleDragStart(e, rowIndex) : undefined}
+                  onDragOver={canDrag ? (e) => handleDragOver(e, rowIndex) : undefined}
+                  onDrop={canDrag ? (e) => handleDrop(e, rowIndex) : undefined}
+                  onDragEnd={canDrag ? handleDragEnd : undefined}
+                  onMouseEnter={() => setHoveredRow(rowIndex)}
+                  onMouseLeave={() => setHoveredRow(null)}
+                >
+                  {showCheckbox && (
+                    <td className="text-center relative">
+                      {reorderable && canDrag && (
+                        <div
+                          draggable
+                          className="drag-handle group absolute z-10 left-[-8px] top-1/2 -translate-y-1/2 p-1 cursor-grab"
+                        >
+                          {hoveredRow === rowIndex && (
+                            <>
+                              <IconGripVertical
+                                size={14}
+                                className="icon-grip hidden group-hover:block"
+                              />
+                              <IconMinusVertical
+                                size={14}
+                                className="icon-minus block group-hover:hidden"
+                              />
+                            </>
+                          )}
+                        </div>
+                      )}
+                      {!isEmpty && (
+                        <input
+                          type="checkbox"
+                          className="mousetrap"
+                          data-testid="column-checkbox"
+                          checked={row[checkboxKey] ?? true}
+                          onChange={(e) => handleCheckboxChange(row.uid, e.target.checked)}
+                        />
+                      )}
+                    </td>
+                  )}
+                  {columns.map((column) => (
+                    <td key={column.key} data-testid={`column-${column.key}`}>
+                      {renderCell(column, row, rowIndex)}
+                    </td>
+                  ))}
+                  {showDelete && (
+                    <td>
+                      {!isEmpty && (
+                        <button
+                          data-testid="column-delete"
+                          onClick={() => handleRemoveRow(row.uid)}
+                        >
+                          <IconTrash strokeWidth={1.5} size={18} />
+                        </button>
+                      )}
+                    </td>
+                  )}
+                </tr>
+              );
+            })}
+          </tbody>
+        </table>
+      </div>
+    </StyledWrapper>
+  );
+};
+
+export default EditableTable;

packages/bruno-app/src/components/Environments/ConfirmCloseEnvironment/index.js

@@ -0,0 +1,47 @@
+import React from 'react';
+import { IconAlertTriangle } from '@tabler/icons';
+import Modal from 'components/Modal';
+import Portal from 'components/Portal';
+import Button from 'ui/Button';
+
+const ConfirmCloseEnvironment = ({ onCancel, onCloseWithoutSave, onSaveAndClose, isGlobal }) => {
+  return (
+    <Portal>
+      <Modal
+        size="md"
+        title="Unsaved changes"
+        disableEscapeKey={true}
+        disableCloseOnOutsideClick={true}
+        closeModalFadeTimeout={150}
+        handleCancel={onCancel}
+        hideFooter={true}
+      >
+        <div className="flex items-center font-normal">
+          <IconAlertTriangle size={32} strokeWidth={1.5} className="text-yellow-600" />
+          <h1 className="ml-2 text-lg font-medium">Hold on...</h1>
+        </div>
+        <div className="font-normal mt-4">
+          You have unsaved changes in {isGlobal ? 'global' : 'collection'} environment settings.
+        </div>
+
+        <div className="flex justify-between mt-6">
+          <div>
+            <Button size="sm" color="danger" onClick={onCloseWithoutSave}>
+              Don't Save
+            </Button>
+          </div>
+          <div>
+            <Button size="sm" color="secondary" variant="ghost" onClick={onCancel}>
+              Cancel
+            </Button>
+            <Button size="sm" onClick={onSaveAndClose}>
+              Save
+            </Button>
+          </div>
+        </div>
+      </Modal>
+    </Portal>
+  );
+};
+
+export default ConfirmCloseEnvironment;

packages/bruno-app/src/components/Environments/EnvironmentSelector/StyledWrapper.js

@@ -2,46 +2,55 @@ import styled from 'styled-components';
 
 const Wrapper = styled.div`
   .current-environment {
-    border-radius: 0.9375rem;
-    padding: 0.25rem 0.5rem 0.25rem 0.75rem;
+    border-radius: ${(props) => props.theme.border.radius.base};
+    padding: 0.25rem 0.3rem 0.25rem 0.5rem;
     user-select: none;
-    background-color: transparent;
-    border: 1px solid ${(props) => props.theme.dropdown.selectedColor};
+    background-color: ${(props) => props.theme.app.collection.toolbar.environmentSelector.bg};
+    border: 1px solid ${(props) => props.theme.app.collection.toolbar.environmentSelector.border};
     line-height: 1rem;
+    transition: all 0.15s ease;
+
+    &:hover {
+      border-color: ${(props) => props.theme.app.collection.toolbar.environmentSelector.hoverBorder};
+      background-color: ${(props) => props.theme.app.collection.toolbar.environmentSelector.hoverBg};
+    }
 
     .caret {
       margin-left: 0.25rem;
-      color: rgb(140, 140, 140);
-      fill: rgb(140, 140, 140);
+      color: ${(props) => props.theme.app.collection.toolbar.environmentSelector.caret};
+      fill: ${(props) => props.theme.app.collection.toolbar.environmentSelector.caret};
+      align-self: center;
     }
 
     .env-icon {
       margin-right: 0.25rem;
-      color: ${(props) => props.theme.dropdown.selectedColor};
+      color: ${(props) => props.theme.app.collection.toolbar.environmentSelector.icon};
     }
 
     .env-text {
-      color: ${(props) => props.theme.dropdown.selectedColor};
-      font-size: ${(props) => props.theme.font.size.base};
+      color: ${(props) => props.theme.app.collection.toolbar.environmentSelector.text};
       display: block;
     }
 
     .env-separator {
-      color: #8c8c8c;
-      margin: 0 0.25rem;
-      opacity: 0.7;
+      color: ${(props) => props.theme.app.collection.toolbar.environmentSelector.separator};
+      margin: 0 0.35rem;
     }
 
     .env-text-inactive {
-      color: ${(props) => props.theme.dropdown.color};
-      font-size: ${(props) => props.theme.font.size.base};
-      opacity: 0.7;
+      color: ${(props) => props.theme.colors.text.muted};
+      font-size: ${(props) => props.theme.font.size.sm};
     }
 
     &.no-environments {
-      background-color: ${(props) => props.theme.sidebar.badge.bg};
-      border: 1px solid transparent;
-      color: ${(props) => props.theme.dropdown.secondaryText};
+      color: ${(props) => props.theme.app.collection.toolbar.environmentSelector.noEnvironment.text};
+      background-color: ${(props) => props.theme.app.collection.toolbar.environmentSelector.noEnvironment.bg};
+      border: 1px dashed ${(props) => props.theme.app.collection.toolbar.environmentSelector.noEnvironment.border};
+
+      &:hover {
+        border-color: ${(props) => props.theme.app.collection.toolbar.environmentSelector.noEnvironment.hoverBorder};
+        background-color: ${(props) => props.theme.app.collection.toolbar.environmentSelector.noEnvironment.hoverBg};
+      }
     }
   }
 

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

@@ -1,18 +1,16 @@
 import React, { useMemo, useState, useRef, forwardRef } from 'react';
 import find from 'lodash/find';
 import Dropdown from 'components/Dropdown';
-import { IconWorld, IconDatabase, IconCaretDown, IconSettings, IconPlus, IconDownload } from '@tabler/icons';
+import { IconWorld, IconDatabase, IconCaretDown } from '@tabler/icons';
 import { useSelector, useDispatch } from 'react-redux';
-import { updateEnvironmentSettingsModalVisibility } from 'providers/ReduxStore/slices/app';
+import { addTab } from 'providers/ReduxStore/slices/tabs';
 import { selectEnvironment } from 'providers/ReduxStore/slices/collections/actions';
 import { selectGlobalEnvironment } from 'providers/ReduxStore/slices/global-environments';
 import toast from 'react-hot-toast';
 import EnvironmentListContent from './EnvironmentListContent/index';
-import EnvironmentSettings from '../EnvironmentSettings';
-import GlobalEnvironmentSettings from 'components/GlobalEnvironments/EnvironmentSettings';
 import CreateEnvironment from '../EnvironmentSettings/CreateEnvironment';
 import ImportEnvironmentModal from 'components/Environments/Common/ImportEnvironmentModal';
-import CreateGlobalEnvironment from 'components/GlobalEnvironments/EnvironmentSettings/CreateEnvironment';
+import CreateGlobalEnvironment from 'components/WorkspaceHome/WorkspaceEnvironments/CreateEnvironment';
 import ToolHint from 'components/ToolHint';
 import StyledWrapper from './StyledWrapper';
 
@@ -20,8 +18,6 @@ const EnvironmentSelector = ({ collection }) => {
   const dispatch = useDispatch();
   const dropdownTippyRef = useRef();
   const [activeTab, setActiveTab] = useState('collection');
-  const [showGlobalSettings, setShowGlobalSettings] = useState(false);
-  const [showCollectionSettings, setShowCollectionSettings] = useState(false);
   const [showCreateGlobalModal, setShowCreateGlobalModal] = useState(false);
   const [showImportGlobalModal, setShowImportGlobalModal] = useState(false);
   const [showCreateCollectionModal, setShowCreateCollectionModal] = useState(false);
@@ -75,13 +71,24 @@ const EnvironmentSelector = ({ collection }) => {
       });
   };
 
-  // Settings handler
+  // Settings handler - opens environment settings tab
   const handleSettingsClick = () => {
     if (activeTab === 'collection') {
-      dispatch(updateEnvironmentSettingsModalVisibility(true));
-      setShowCollectionSettings(true);
+      dispatch(
+        addTab({
+          uid: `${collection.uid}-environment-settings`,
+          collectionUid: collection.uid,
+          type: 'environment-settings'
+        })
+      );
     } else {
-      setShowGlobalSettings(true);
+      dispatch(
+        addTab({
+          uid: `${collection.uid}-global-environment-settings`,
+          collectionUid: collection.uid,
+          type: 'global-environment-settings'
+        })
+      );
     }
     dropdownTippyRef.current.hide();
   };
@@ -106,13 +113,6 @@ const EnvironmentSelector = ({ collection }) => {
     dropdownTippyRef.current.hide();
   };
 
-  // Modal handlers
-  const handleCloseSettings = () => {
-    setShowGlobalSettings(false);
-    setShowCollectionSettings(false);
-    dispatch(updateEnvironmentSettingsModalVisibility(false));
-  };
-
   // Calculate dropdown width based on the longest environment name.
   // To prevent resizing while switching between collection and global environments.
   const dropdownWidth = useMemo(() => {
@@ -164,7 +164,7 @@ const EnvironmentSelector = ({ collection }) => {
         )}
       </>
     ) : (
-      <span className="env-text-inactive max-w-36 truncate no-wrap">No environments</span>
+      <span className="env-text-inactive max-w-36 truncate no-wrap">No Environment</span>
     );
 
     return (
@@ -176,7 +176,7 @@ const EnvironmentSelector = ({ collection }) => {
         data-testid="environment-selector-trigger"
       >
         {displayContent}
-        <IconCaretDown className="caret" size={14} strokeWidth={2} />
+        <IconCaretDown className="caret flex items-center justify-center" size={12} strokeWidth={2} />
       </div>
     );
   });
@@ -219,23 +219,17 @@ const EnvironmentSelector = ({ collection }) => {
         </Dropdown>
       </div>
 
-      {/* Modals - Rendered outside dropdown to avoid conflicts */}
-      {showGlobalSettings && (
-        <GlobalEnvironmentSettings
-          globalEnvironments={globalEnvironments}
-          collection={collection}
-          activeGlobalEnvironmentUid={activeGlobalEnvironmentUid}
-          onClose={handleCloseSettings}
-        />
-      )}
-
-      {showCollectionSettings && <EnvironmentSettings collection={collection} onClose={handleCloseSettings} />}
-
       {showCreateGlobalModal && (
         <CreateGlobalEnvironment
           onClose={() => setShowCreateGlobalModal(false)}
           onEnvironmentCreated={() => {
-            setShowGlobalSettings(true);
+            dispatch(
+              addTab({
+                uid: `${collection.uid}-global-environment-settings`,
+                collectionUid: collection.uid,
+                type: 'global-environment-settings'
+              })
+            );
           }}
         />
       )}
@@ -245,7 +239,13 @@ const EnvironmentSelector = ({ collection }) => {
           type="global"
           onClose={() => setShowImportGlobalModal(false)}
           onEnvironmentCreated={() => {
-            setShowGlobalSettings(true);
+            dispatch(
+              addTab({
+                uid: `${collection.uid}-global-environment-settings`,
+                collectionUid: collection.uid,
+                type: 'global-environment-settings'
+              })
+            );
           }}
         />
       )}
@@ -255,7 +255,13 @@ const EnvironmentSelector = ({ collection }) => {
           collection={collection}
           onClose={() => setShowCreateCollectionModal(false)}
           onEnvironmentCreated={() => {
-            setShowCollectionSettings(true);
+            dispatch(
+              addTab({
+                uid: `${collection.uid}-environment-settings`,
+                collectionUid: collection.uid,
+                type: 'environment-settings'
+              })
+            );
           }}
         />
       )}
@@ -266,7 +272,13 @@ const EnvironmentSelector = ({ collection }) => {
           collection={collection}
           onClose={() => setShowImportCollectionModal(false)}
           onEnvironmentCreated={() => {
-            setShowCollectionSettings(true);
+            dispatch(
+              addTab({
+                uid: `${collection.uid}-environment-settings`,
+                collectionUid: collection.uid,
+                type: 'environment-settings'
+              })
+            );
           }}
         />
       )}

packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/ConfirmSwitchEnv.js

@@ -1,42 +0,0 @@
-import React from 'react';
-import { IconAlertTriangle } from '@tabler/icons';
-import Modal from 'components/Modal';
-import { createPortal } from 'react-dom';
-
-const ConfirmSwitchEnv = ({ onCancel }) => {
-  return createPortal(
-    <Modal
-      size="md"
-      title="Unsaved changes"
-      confirmText="Save and Close"
-      cancelText="Close without saving"
-      disableEscapeKey={true}
-      disableCloseOnOutsideClick={true}
-      closeModalFadeTimeout={150}
-      handleCancel={onCancel}
-      onClick={(e) => {
-        e.stopPropagation();
-        e.preventDefault();
-      }}
-      hideFooter={true}
-    >
-      <div className="flex items-center font-normal">
-        <IconAlertTriangle size={32} strokeWidth={1.5} className="text-yellow-600" />
-        <h1 className="ml-2 text-lg font-medium">Hold on..</h1>
-      </div>
-      <div className="font-normal mt-4">You have unsaved changes in this environment.</div>
-
-      <div className="flex justify-between mt-6">
-        <div>
-          <button className="btn btn-sm btn-danger" onClick={onCancel}>
-            Close
-          </button>
-        </div>
-        <div></div>
-      </div>
-    </Modal>,
-    document.body
-  );
-};
-
-export default ConfirmSwitchEnv;

packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/StyledWrapper.js

@@ -1,65 +1,187 @@
 import styled from 'styled-components';
 
 const Wrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  overflow: hidden;
+
+  .table-container {
+    overflow-y: auto;
+    border-radius: 8px;
+    border: ${(props) => props.theme.workspace.environments.indentBorder};
+  }
+
   table {
     width: 100%;
     border-collapse: collapse;
-    font-weight: 500;
     table-layout: fixed;
+    font-size: 12px;
 
-    thead,
     td {
-      border: 1px solid ${(props) => props.theme.collection.environment.settings.gridBorder};
-      padding: 4px 10px;
+      vertical-align: middle;
+      padding: 2px 10px;
 
-      &:nth-child(1),
+      &:nth-child(1) {
+        width: 25px;
+        border-right: none;
+      }
       &:nth-child(4) {
-        width: 70px;
+        width: 80px;
       }
       &:nth-child(5) {
-        width: 40px;
+        width: 60px;
       }
 
       &:nth-child(2) {
-        width: 25%;
+        width: 30%;
       }
     }
 
     thead {
-      color: ${(props) => props.theme.table.thead.color};
+      color: ${(props) => props.theme.table.thead.color} !important;
+      background: ${(props) => props.theme.sidebar.bg};
       font-size: ${(props) => props.theme.font.size.base};
       user-select: none;
+
+      td {
+        padding: 5px 10px !important;
+        border-bottom: ${(props) => props.theme.workspace.environments.indentBorder};
+        border-right: ${(props) => props.theme.workspace.environments.indentBorder};
+
+        &:last-child {
+          border-right: none;
+        }
+      }
     }
-    thead td {
-      padding: 6px 10px;
+
+    tbody {
+      tr {
+        transition: background 0.1s ease;
+
+        &:last-child td {
+          border-bottom: none;
+        }
+
+        td {
+          border-bottom: ${(props) => props.theme.workspace.environments.indentBorder};
+          border-right: ${(props) => props.theme.workspace.environments.indentBorder};
+
+          &:last-child {
+            border-right: none;
+          }
+        }
+      }
     }
   }
 
   .btn-add-param {
-    font-size: ${(props) => props.theme.font.size.base};
+    font-size: 12px;
+    color: ${(props) => props.theme.textLink};
+    font-weight: 500;
+    padding: 7px 14px;
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    border-radius: 6px;
+    border: ${(props) => props.theme.sidebar.collection.item.indentBorder};
+    background: transparent;
+    transition: all 0.15s ease;
+
+    &:hover {
+      background: ${(props) => props.theme.listItem.hoverBg};
+      border-color: ${(props) => props.theme.textLink};
+    }
   }
 
   .tooltip-mod {
-    font-size: ${(props) => props.theme.font.size.xs} !important;
-    width: 150px !important;
+    font-size: 11px !important;
+    max-width: 200px !important;
   }
 
   input[type='text'] {
     width: 100%;
-    border: solid 1px transparent;
+    border: 1px solid transparent;
     outline: none !important;
     background-color: transparent;
+    color: ${(props) => props.theme.text};
+    padding: 0;
+    border-radius: 4px;
+    transition: all 0.15s ease;
 
     &:focus {
       outline: none !important;
-      border: solid 1px transparent;
     }
   }
 
   input[type='checkbox'] {
     cursor: pointer;
-    position: relative;
-    top: 1px;
+    width: 14px;
+    height: 14px;
+    accent-color: ${(props) => props.theme.colors.accent};
+    vertical-align: middle;
+    margin: 0;
+  }
+
+  button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 4px;
+    color: ${(props) => props.theme.colors.text.muted};
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    border-radius: 4px;
+    transition: color 0.15s ease, background 0.15s ease;
+  }
+
+  .button-container {
+    padding: 12px 2px;
+    background: ${(props) => props.theme.bg};
+    flex-shrink: 0;
+    display: flex;
+    gap: 8px;
+  }
+
+  .submit {
+    padding: 6px 16px;
+    font-size: ${(props) => props.theme.font.size.sm};
+    border-radius: ${(props) => props.theme.border.radius.base};
+    border: none;
+    background: ${(props) => props.theme.brand};
+    color: ${(props) => props.theme.bg};
+    cursor: pointer;
+    transition: opacity 0.15s ease;
+
+    &:hover {
+      opacity: 0.9;
+    }
+  }
+
+  .reset {
+    background: transparent;
+    padding: 6px 16px;
+    color: ${(props) => props.theme.brand};
+    &:hover {
+      opacity: 0.9;
+    }
+  }
+
+  .discard {
+    padding: 6px 16px;
+    font-size: ${(props) => props.theme.font.size.sm};
+    border-radius: ${(props) => props.theme.border.radius.base};
+    background: transparent;
+    color: ${(props) => props.theme.text};
+    border: ${(props) => props.theme.sidebar.collection.item.indentBorder};
+    cursor: pointer;
+    transition: all 0.15s ease;
+
+    &:hover {
+      background: ${(props) => props.theme.sidebar.collection.item.hoverBg};
+    }
   }
 `;
 

packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/index.js

@@ -1,34 +1,43 @@
-import React, { useRef, useEffect, useMemo } from 'react';
+import React, { useCallback, useRef, useMemo, useEffect } from 'react';
 import cloneDeep from 'lodash/cloneDeep';
 import { get } from 'lodash';
-import { IconTrash, IconAlertCircle, IconDeviceFloppy, IconRefresh, IconCircleCheck } from '@tabler/icons';
+import { IconTrash, IconAlertCircle, IconInfoCircle } from '@tabler/icons';
 import { useTheme } from 'providers/Theme';
 import { useDispatch, useSelector } from 'react-redux';
-import { selectEnvironment } from 'providers/ReduxStore/slices/collections/actions';
 import MultiLineEditor from 'components/MultiLineEditor/index';
 import StyledWrapper from './StyledWrapper';
 import { uuid } from 'utils/common';
 import { useFormik } from 'formik';
 import * as Yup from 'yup';
 import { variableNameRegex } from 'utils/common/regex';
-import { saveEnvironment } from 'providers/ReduxStore/slices/collections/actions';
 import toast from 'react-hot-toast';
+import { saveEnvironment } from 'providers/ReduxStore/slices/collections/actions';
+import { setEnvironmentsDraft, clearEnvironmentsDraft } from 'providers/ReduxStore/slices/collections';
 import { Tooltip } from 'react-tooltip';
-import SensitiveFieldWarning from 'components/SensitiveFieldWarning';
 import { getGlobalEnvironmentVariables, flattenItems, isItemARequest } from 'utils/collections';
+import SensitiveFieldWarning from 'components/SensitiveFieldWarning';
 import { sensitiveFields } from './constants';
 
-const EnvironmentVariables = ({ environment, collection, setIsModified, originalEnvironmentVariables, onClose }) => {
+const EnvironmentVariables = ({ environment, setIsModified, collection }) => {
   const dispatch = useDispatch();
   const { storedTheme } = useTheme();
-  const addButtonRef = useRef(null);
   const { globalEnvironments, activeGlobalEnvironmentUid } = useSelector((state) => state.globalEnvironments);
 
-  let _collection = cloneDeep(collection);
+  const environmentsDraft = collection?.environmentsDraft;
+  const hasDraftForThisEnv = environmentsDraft?.environmentUid === environment.uid;
+
+  // Track environment changes for draft restoration
+  const prevEnvUidRef = React.useRef(null);
+  const mountedRef = React.useRef(false);
+
+  let _collection = collection ? cloneDeep(collection) : {};
 
   const globalEnvironmentVariables = getGlobalEnvironmentVariables({ globalEnvironments, activeGlobalEnvironmentUid });
-  _collection.globalEnvironmentVariables = globalEnvironmentVariables;
+  if (_collection) {
+    _collection.globalEnvironmentVariables = globalEnvironmentVariables;
+  }
 
+  // Check for non-secret variables used in sensitive fields
   const nonSecretSensitiveVarUsageMap = useMemo(() => {
     const result = {};
     if (!collection || !environment?.variables) {
@@ -44,7 +53,7 @@ const EnvironmentVariables = ({ environment, collection, setIsModified, original
       const value = get(obj, fieldPath);
       if (typeof value === 'string') {
         varNames.forEach((varName) => {
-          if (new RegExp(`\{\{\s*${varName}\s*\}\}`).test(value)) {
+          if (new RegExp(`\\{\\{\\s*${varName}\\s*\\}\\}`).test(value)) {
             result[varName] = true;
           }
         });
@@ -73,51 +82,147 @@ const EnvironmentVariables = ({ environment, collection, setIsModified, original
     return result;
   }, [collection, environment]);
 
+  const hasSensitiveUsage = (name) => !!nonSecretSensitiveVarUsageMap[name];
+
+  // Initial values based only on saved environment variables (not draft)
+  // Draft restoration happens in a separate effect to avoid infinite loops
+  const initialValues = React.useMemo(() => {
+    const vars = environment.variables || [];
+    return [
+      ...vars,
+      {
+        uid: uuid(),
+        name: '',
+        value: '',
+        type: 'text',
+        secret: false,
+        enabled: true
+      }
+    ];
+  }, [environment.uid, environment.variables]);
+
   const formik = useFormik({
     enableReinitialize: true,
-    initialValues: environment.variables || [],
+    initialValues: initialValues,
     validationSchema: Yup.array().of(
       Yup.object({
         enabled: Yup.boolean(),
         name: Yup.string()
-          .required('Name cannot be empty')
-          .matches(
-            variableNameRegex,
-            'Name contains invalid characters. Must only contain alphanumeric characters, "-", "_", "." and cannot start with a digit.'
-          )
-          .trim(),
+          .when('$isLastRow', {
+            is: true,
+            then: (schema) => schema.optional(),
+            otherwise: (schema) =>
+              schema
+                .required('Name cannot be empty')
+                .matches(
+                  variableNameRegex,
+                  'Name contains invalid characters. Must only contain alphanumeric characters, "-", "_", "." and cannot start with a digit.'
+                )
+                .trim()
+          }),
         secret: Yup.boolean(),
         type: Yup.string(),
         uid: Yup.string(),
-        value: Yup.string().trim().nullable()
+        value: Yup.mixed().nullable()
       })
     ),
-    onSubmit: (values) => {
-      if (!formik.dirty) {
-        toast.error('Nothing to save');
-        return;
-      }
+    validate: (values) => {
+      const errors = {};
+      values.forEach((variable, index) => {
+        const isLastRow = index === values.length - 1;
+        const isEmptyRow = !variable.name || variable.name.trim() === '';
 
-      dispatch(saveEnvironment(cloneDeep(values), environment.uid, collection.uid))
-        .then(() => {
-          toast.success('Changes saved successfully');
-          formik.resetForm({ values });
-          setIsModified(false);
-        })
-        .catch(() => toast.error('An error occurred while saving the changes'));
-    }
+        if (isLastRow && isEmptyRow) {
+          return;
+        }
+
+        if (!variable.name || variable.name.trim() === '') {
+          if (!errors[index]) errors[index] = {};
+          errors[index].name = 'Name cannot be empty';
+        } else if (!variableNameRegex.test(variable.name)) {
+          if (!errors[index]) errors[index] = {};
+          errors[index].name
+            = 'Name contains invalid characters. Must only contain alphanumeric characters, "-", "_", "." and cannot start with a digit.';
+        }
+      });
+      return Object.keys(errors).length > 0 ? errors : {};
+    },
+    onSubmit: () => {}
   });
 
-  const hasSensitiveUsage = (name) => !!nonSecretSensitiveVarUsageMap[name];
+  // Restore draft values on mount or environment switch
+  useEffect(() => {
+    const isMount = !mountedRef.current;
+    const envChanged = prevEnvUidRef.current !== null && prevEnvUidRef.current !== environment.uid;
 
-  // Effect to track modifications.
-  React.useEffect(() => {
-    setIsModified(formik.dirty);
-  }, [formik.dirty]);
+    prevEnvUidRef.current = environment.uid;
+    mountedRef.current = true;
 
-  const ErrorMessage = ({ name }) => {
+    if ((isMount || envChanged) && hasDraftForThisEnv && environmentsDraft?.variables) {
+      formik.setValues([
+        ...environmentsDraft.variables,
+        {
+          uid: uuid(),
+          name: '',
+          value: '',
+          type: 'text',
+          secret: false,
+          enabled: true
+        }
+      ]);
+    }
+  }, [environment.uid, hasDraftForThisEnv, environmentsDraft?.variables]);
+
+  const savedValuesJson = useMemo(() => {
+    return JSON.stringify(environment.variables || []);
+  }, [environment.variables]);
+
+  useEffect(() => {
+    const currentValues = formik.values.filter((variable) => variable.name && variable.name.trim() !== '');
+    const currentValuesJson = JSON.stringify(currentValues);
+    const hasActualChanges = currentValuesJson !== savedValuesJson;
+    setIsModified(hasActualChanges);
+  }, [formik.values, savedValuesJson, setIsModified]);
+
+  useEffect(() => {
+    const timeoutId = setTimeout(() => {
+      const currentValues = formik.values.filter((variable) => variable.name && variable.name.trim() !== '');
+      const currentValuesJson = JSON.stringify(currentValues);
+      const hasActualChanges = currentValuesJson !== savedValuesJson;
+
+      // Get existing draft for comparison
+      const existingDraftVariables = hasDraftForThisEnv ? environmentsDraft?.variables : null;
+      const existingDraftJson = existingDraftVariables ? JSON.stringify(existingDraftVariables) : null;
+
+      if (hasActualChanges) {
+        // Only dispatch if draft values are actually different
+        if (currentValuesJson !== existingDraftJson) {
+          dispatch(setEnvironmentsDraft({
+            collectionUid: collection.uid,
+            environmentUid: environment.uid,
+            variables: currentValues
+          }));
+        }
+      } else if (hasDraftForThisEnv) {
+        dispatch(clearEnvironmentsDraft({ collectionUid: collection.uid }));
+      }
+    }, 300);
+
+    return () => clearTimeout(timeoutId);
+  }, [formik.values, savedValuesJson, environment.uid, collection.uid, dispatch, hasDraftForThisEnv, environmentsDraft?.variables]);
+
+  const ErrorMessage = ({ name, index }) => {
     const meta = formik.getFieldMeta(name);
-    const id = uuid();
+    const id = `error-${name}-${index}`;
+
+    const isLastRow = index === formik.values.length - 1;
+    const variable = formik.values[index];
+    const isEmptyRow = !variable?.name || variable.name.trim() === '';
+
+    if (isLastRow && isEmptyRow) {
+      return null;
+    }
+
     if (!meta.error || !meta.touched) {
       return null;
     }
@@ -129,54 +234,161 @@ const EnvironmentVariables = ({ environment, collection, setIsModified, original
     );
   };
 
-  const addVariable = () => {
-    const newVariable = {
-      uid: uuid(),
-      name: '',
-      value: '',
-      type: 'text',
-      secret: false,
-      enabled: true
-    };
-    formik.setFieldValue(formik.values.length, newVariable, false);
-  };
+  const handleRemoveVar = useCallback((id) => {
+    const currentValues = formik.values;
 
-  const onActivate = () => {
-    dispatch(selectEnvironment(environment ? environment.uid : null, collection.uid))
-      .then(() => {
-        if (environment) {
-          toast.success(`Environment changed to ${environment.name}`);
-          onClose();
-        } else {
-          toast.success(`No Environments are active now`);
-        }
-      })
-      .catch((err) => console.log(err) && toast.error('An error occurred while selecting the environment'));
-  };
-
-  const handleRemoveVar = (id) => {
-    formik.setValues(formik.values.filter((variable) => variable.uid !== id));
-  };
-
-  useEffect(() => {
-    if (formik.dirty) {
-      // Smooth scrolling to the changed parameter is temporarily disabled
-      // due to UX issues when editing the first row in a long list of environment variables.
-      // addButtonRef.current?.scrollIntoView({ behavior: 'smooth' });
+    if (!currentValues || currentValues.length === 0) {
+      return;
     }
-  }, [formik.values, formik.dirty]);
+
+    const lastRow = currentValues[currentValues.length - 1];
+    const isLastEmptyRow = lastRow?.uid === id && (!lastRow.name || lastRow.name.trim() === '');
+
+    if (isLastEmptyRow) {
+      return;
+    }
+
+    const filteredValues = currentValues.filter((variable) => variable.uid !== id);
+
+    const hasEmptyLastRow
+      = filteredValues.length > 0
+        && (!filteredValues[filteredValues.length - 1].name
+          || filteredValues[filteredValues.length - 1].name.trim() === '');
+
+    const newValues = hasEmptyLastRow
+      ? filteredValues
+      : [
+          ...filteredValues,
+          {
+            uid: uuid(),
+            name: '',
+            value: '',
+            type: 'text',
+            secret: false,
+            enabled: true
+          }
+        ];
+
+    formik.setValues(newValues);
+  }, [formik.values]);
+
+  const handleNameChange = (index, e) => {
+    formik.handleChange(e);
+    const isLastRow = index === formik.values.length - 1;
+
+    if (isLastRow) {
+      const newVariable = {
+        uid: uuid(),
+        name: '',
+        value: '',
+        type: 'text',
+        secret: false,
+        enabled: true
+      };
+      setTimeout(() => {
+        formik.setFieldValue(formik.values.length, newVariable, false);
+      }, 0);
+    }
+  };
+
+  const handleNameBlur = (index) => {
+    formik.setFieldTouched(`${index}.name`, true, true);
+  };
+
+  const handleNameKeyDown = (index, e) => {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      formik.setFieldTouched(`${index}.name`, true, true);
+    }
+  };
+
+  const handleSave = () => {
+    const variablesToSave = formik.values.filter((variable) => variable.name && variable.name.trim() !== '');
+    const savedValues = environment.variables || [];
+
+    const hasChanges = JSON.stringify(variablesToSave) !== JSON.stringify(savedValues);
+    if (!hasChanges) {
+      toast.error('No changes to save');
+      return;
+    }
+
+    const hasValidationErrors = variablesToSave.some((variable) => {
+      if (!variable.name || variable.name.trim() === '') {
+        return true;
+      }
+      if (!variableNameRegex.test(variable.name)) {
+        return true;
+      }
+      return false;
+    });
+
+    if (hasValidationErrors) {
+      toast.error('Please fix validation errors before saving');
+      return;
+    }
+
+    dispatch(saveEnvironment(cloneDeep(variablesToSave), environment.uid, collection.uid))
+      .then(() => {
+        toast.success('Changes saved successfully');
+        const newValues = [
+          ...variablesToSave,
+          {
+            uid: uuid(),
+            name: '',
+            value: '',
+            type: 'text',
+            secret: false,
+            enabled: true
+          }
+        ];
+        formik.resetForm({ values: newValues });
+        setIsModified(false);
+      })
+      .catch((error) => {
+        console.error(error);
+        toast.error('An error occurred while saving the changes');
+      });
+  };
 
   const handleReset = () => {
-    formik.resetForm({ originalEnvironmentVariables });
+    const originalVars = environment.variables || [];
+    const resetValues = [
+      ...originalVars,
+      {
+        uid: uuid(),
+        name: '',
+        value: '',
+        type: 'text',
+        secret: false,
+        enabled: true
+      }
+    ];
+    formik.resetForm({ values: resetValues });
+    setIsModified(false);
   };
 
+  const handleSaveRef = useRef(handleSave);
+  handleSaveRef.current = handleSave;
+
+  useEffect(() => {
+    const handleSaveEvent = () => {
+      handleSaveRef.current();
+    };
+
+    window.addEventListener('environment-save', handleSaveEvent);
+
+    return () => {
+      window.removeEventListener('environment-save', handleSaveEvent);
+    };
+  }, []);
+
   return (
-    <StyledWrapper className="w-full mt-6 mb-6">
-      <div className="h-[50vh] overflow-y-auto w-full">
-        <table className="environment-variables">
+    <StyledWrapper>
+      <div className="table-container">
+        <table>
           <thead>
             <tr>
-              <td className="text-center">Enabled</td>
+              <td className="text-center"></td>
               <td>Name</td>
               <td>Value</td>
               <td className="text-center">Secret</td>
@@ -184,99 +396,112 @@ const EnvironmentVariables = ({ environment, collection, setIsModified, original
             </tr>
           </thead>
           <tbody>
-            {formik.values.map((variable, index) => (
-              <tr key={variable.uid} data-testid={`env-var-row-${variable.name}`}>
-                <td className="text-center">
-                  <input
-                    type="checkbox"
-                    className="mousetrap"
-                    name={`${index}.enabled`}
-                    checked={variable.enabled}
-                    onChange={formik.handleChange}
-                  />
-                </td>
-                <td>
-                  <div className="flex items-center">
-                    <input
-                      type="text"
-                      autoComplete="off"
-                      autoCorrect="off"
-                      autoCapitalize="off"
-                      spellCheck="false"
-                      className="mousetrap"
-                      id={`${index}.name`}
-                      name={`${index}.name`}
-                      value={variable.name}
-                      onChange={formik.handleChange}
-                    />
-                    <ErrorMessage name={`${index}.name`} />
-                  </div>
-                </td>
-                <td className="flex flex-row flex-nowrap items-center">
-                  <div className="overflow-hidden grow w-full relative">
-                    <MultiLineEditor
-                      theme={storedTheme}
-                      collection={_collection}
-                      name={`${index}.value`}
-                      value={variable.value}
-                      isSecret={variable.secret}
-                      onChange={(newValue) => formik.setFieldValue(`${index}.value`, newValue, true)}
-                      enableBrunoVarInfo={false}
-                    />
-                  </div>
-                  {!variable.secret && hasSensitiveUsage(variable.name) && (
-                    <SensitiveFieldWarning
-                      fieldName={variable.name}
-                      warningMessage="This variable is used in sensitive fields. Mark it as a secret for security"
-                    />
-                  )}
-                </td>
-                <td className="text-center">
-                  <input
-                    type="checkbox"
-                    className="mousetrap"
-                    name={`${index}.secret`}
-                    checked={variable.secret}
-                    onChange={formik.handleChange}
-                  />
-                </td>
-                <td>
-                  <button onClick={() => handleRemoveVar(variable.uid)}>
-                    <IconTrash strokeWidth={1.5} size={20} />
-                  </button>
-                </td>
-              </tr>
-            ))}
+            {formik.values.map((variable, index) => {
+              const isLastRow = index === formik.values.length - 1;
+              const isEmptyRow = !variable.name || variable.name.trim() === '';
+              const isLastEmptyRow = isLastRow && isEmptyRow;
+
+              return (
+                <tr key={variable.uid} data-testid={`env-var-row-${variable.name}`}>
+                  <td className="text-center">
+                    {!isLastEmptyRow && (
+                      <input
+                        type="checkbox"
+                        className="mousetrap"
+                        name={`${index}.enabled`}
+                        checked={variable.enabled}
+                        onChange={formik.handleChange}
+                      />
+                    )}
+                  </td>
+                  <td>
+                    <div className="flex items-center">
+                      <input
+                        type="text"
+                        autoComplete="off"
+                        autoCorrect="off"
+                        autoCapitalize="off"
+                        spellCheck="false"
+                        className="mousetrap"
+                        id={`${index}.name`}
+                        name={`${index}.name`}
+                        value={variable.name}
+                        placeholder={isLastEmptyRow ? 'Name' : ''}
+                        onChange={(e) => handleNameChange(index, e)}
+                        onBlur={() => handleNameBlur(index)}
+                        onKeyDown={(e) => handleNameKeyDown(index, e)}
+                      />
+                      <ErrorMessage name={`${index}.name`} index={index} />
+                    </div>
+                  </td>
+                  <td className="flex flex-row flex-nowrap items-center">
+                    <div className="overflow-hidden grow w-full relative">
+                      <MultiLineEditor
+                        theme={storedTheme}
+                        collection={_collection}
+                        name={`${index}.value`}
+                        value={variable.value}
+                        placeholder={isLastEmptyRow ? 'Value' : ''}
+                        isSecret={variable.secret}
+                        readOnly={typeof variable.value !== 'string'}
+                        onChange={(newValue) => formik.setFieldValue(`${index}.value`, newValue, true)}
+                        onSave={handleSave}
+                      />
+                    </div>
+                    {typeof variable.value !== 'string' && (
+                      <span className="ml-2 flex items-center">
+                        <IconInfoCircle id={`${variable.uid}-disabled-info-icon`} className="text-muted" size={16} />
+                        <Tooltip
+                          anchorId={`${variable.uid}-disabled-info-icon`}
+                          content="Non-string values set via scripts are read-only and can only be updated through scripts."
+                          place="top"
+                        />
+                      </span>
+                    )}
+                    {!variable.secret && hasSensitiveUsage(variable.name) && (
+                      <SensitiveFieldWarning
+                        fieldName={variable.name}
+                        warningMessage="This variable is used in sensitive fields. Mark it as a secret for security"
+                      />
+                    )}
+                  </td>
+                  <td className="text-center">
+                    {!isLastEmptyRow && (
+                      <input
+                        type="checkbox"
+                        className="mousetrap"
+                        name={`${index}.secret`}
+                        checked={variable.secret}
+                        onChange={formik.handleChange}
+                      />
+                    )}
+                  </td>
+                  <td>
+                    {!isLastEmptyRow && (
+                      <button onClick={() => handleRemoveVar(variable.uid)}>
+                        <IconTrash strokeWidth={1.5} size={18} />
+                      </button>
+                    )}
+                  </td>
+                </tr>
+              );
+            })}
           </tbody>
         </table>
-        <div>
-          <button
-            ref={addButtonRef}
-            className="btn-add-param text-link pr-2 py-3 mt-2 select-none"
-            onClick={addVariable}
-            id="add-variable"
-            data-testid="add-variable"
-          >
-            + Add Variable
-          </button>
-        </div>
       </div>
 
-      <div className="flex items-center">
-        <button type="submit" className="submit btn btn-sm btn-secondary mt-2 flex items-center" onClick={formik.handleSubmit} data-testid="save-env">
-          <IconDeviceFloppy size={16} strokeWidth={1.5} className="mr-1" />
-          Save
-        </button>
-        <button type="submit" className="ml-2 px-1 submit btn btn-sm btn-close mt-2 flex items-center" onClick={handleReset} data-testid="reset-env">
-          <IconRefresh size={16} strokeWidth={1.5} className="mr-1" />
-          Reset
-        </button>
-        <button type="submit" className="submit btn btn-sm btn-close mt-2 flex items-center" onClick={onActivate} data-testid="activate-env">
-          <IconCircleCheck size={16} strokeWidth={1.5} className="mr-1" />
-          Activate
-        </button>
+      <div className="button-container">
+        <div className="flex items-center">
+          <button type="button" className="submit" onClick={handleSave} data-testid="save-env">
+            Save
+          </button>
+          <button type="button" className="submit reset ml-2" onClick={handleReset} data-testid="reset-env">
+            Reset
+          </button>
+        </div>
       </div>
     </StyledWrapper>
   );
 };
+
 export default EnvironmentVariables;

packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/StyledWrapper.js

@@ -0,0 +1,134 @@
+import styled from 'styled-components';
+
+const StyledWrapper = styled.div`
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  background: ${(props) => props.theme.bg};
+
+  .header {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 16px 20px 8px 20px;
+    flex-shrink: 0;
+
+    .title {
+      font-size: ${(props) => props.theme.font.size.base};
+      font-weight: 500;
+      color: ${(props) => props.theme.text};
+      margin: 0;
+    }
+
+    .title-container {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      flex: 1;
+
+      &.renaming {
+        .title-input {
+          flex: 1;
+          background: ${(props) => props.theme.sidebar.collection.item.hoverBg};
+          outline: none;
+          color: ${(props) => props.theme.text};
+          font-size: 15px;
+          font-weight: 500;
+          padding: 4px 8px;
+          border-radius: 5px;
+        }
+
+        .inline-actions {
+          display: flex;
+          gap: 2px;
+        }
+
+        .inline-action-btn {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          width: 26px;
+          height: 26px;
+          padding: 0;
+          background: transparent;
+          border: none;
+          border-radius: 4px;
+          cursor: pointer;
+          transition: all 0.15s ease;
+
+          &.save {
+            color: ${(props) => props.theme.textLink};
+
+            &:hover {
+              background: ${(props) => props.theme.sidebar.collection.item.hoverBg};
+            }
+          }
+
+          &.cancel {
+            color: ${(props) => props.theme.colors.text.muted};
+
+            &:hover {
+              background: ${(props) => props.theme.sidebar.collection.item.hoverBg};
+              color: ${(props) => props.theme.text};
+            }
+          }
+        }
+      }
+    }
+
+    .title-error {
+      position: absolute;
+      top: 100%;
+      left: 20px;
+      margin-top: 4px;
+      padding: 4px 8px;
+      font-size: 11px;
+      color: ${(props) => props.theme.colors.text.danger};
+      background: ${(props) => props.theme.bg};
+      border: 1px solid ${(props) => props.theme.colors.text.danger};
+      border-radius: 4px;
+      white-space: nowrap;
+    }
+
+    .actions {
+      display: flex;
+      gap: 2px;
+
+      button {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 28px;
+        height: 28px;
+        padding: 0;
+        color: ${(props) => props.theme.colors.text.muted};
+        background: transparent;
+        border: none;
+        border-radius: 5px;
+        cursor: pointer;
+        transition: all 0.15s ease;
+
+        &:hover {
+          background: ${(props) => props.theme.sidebar.collection.item.hoverBg};
+          color: ${(props) => props.theme.text};
+        }
+
+        &:last-child:hover {
+          color: ${(props) => props.theme.colors.text.danger};
+        }
+      }
+    }
+  }
+
+  .content {
+    flex: 1;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    padding: 0 20px 20px 20px;
+  }
+`;
+
+export default StyledWrapper;

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

@@ -1,59 +1,183 @@
-import { IconCopy, IconDatabase, IconEdit, IconTrash } from '@tabler/icons';
-import { useState } from 'react';
-import CopyEnvironment from '../../CopyEnvironment';
-import DeleteEnvironment from '../../DeleteEnvironment';
-import RenameEnvironment from '../../RenameEnvironment';
+import { IconCopy, IconEdit, IconTrash, IconCheck, IconX } from '@tabler/icons';
+import { useState, useRef } from 'react';
+import { useDispatch } from 'react-redux';
+import { renameEnvironment } from 'providers/ReduxStore/slices/collections/actions';
+import { validateName, validateNameError } from 'utils/common/regex';
+import toast from 'react-hot-toast';
+import CopyEnvironment from 'components/Environments/EnvironmentSettings/CopyEnvironment';
+import DeleteEnvironment from 'components/Environments/EnvironmentSettings/DeleteEnvironment';
 import EnvironmentVariables from './EnvironmentVariables';
-import ToolHint from 'components/ToolHint/index';
+import StyledWrapper from './StyledWrapper';
+
+const EnvironmentDetails = ({ environment, setIsModified, collection }) => {
+  const dispatch = useDispatch();
+  const environments = collection?.environments || [];
 
-const EnvironmentDetails = ({ environment, collection, setIsModified, onClose }) => {
-  const [openEditModal, setOpenEditModal] = useState(false);
   const [openDeleteModal, setOpenDeleteModal] = useState(false);
   const [openCopyModal, setOpenCopyModal] = useState(false);
+  const [isRenaming, setIsRenaming] = useState(false);
+  const [newName, setNewName] = useState('');
+  const [nameError, setNameError] = useState('');
+  const inputRef = useRef(null);
+
+  const validateEnvironmentName = (name) => {
+    if (!name || name.trim() === '') {
+      return 'Name is required';
+    }
+
+    if (name.length < 1) {
+      return 'Must be at least 1 character';
+    }
+
+    if (name.length > 255) {
+      return 'Must be 255 characters or less';
+    }
+
+    if (!validateName(name)) {
+      return validateNameError(name);
+    }
+
+    const trimmedName = name.toLowerCase().trim();
+    const isDuplicate = (environments || []).some(
+      (env) => env?.uid !== environment.uid && env?.name?.toLowerCase().trim() === trimmedName
+    );
+    if (isDuplicate) {
+      return 'Environment already exists';
+    }
+
+    return null;
+  };
+
+  const handleRenameClick = () => {
+    setIsRenaming(true);
+    setNewName(environment.name);
+    setNameError('');
+    setTimeout(() => {
+      inputRef.current?.focus();
+      inputRef.current?.select();
+    }, 50);
+  };
+
+  const handleSaveRename = () => {
+    const error = validateEnvironmentName(newName);
+    if (error) {
+      setNameError(error);
+      return;
+    }
+
+    dispatch(renameEnvironment(newName, environment.uid, collection.uid))
+      .then(() => {
+        toast.success('Environment renamed!');
+        setIsRenaming(false);
+        setNewName('');
+        setNameError('');
+      })
+      .catch(() => {
+        toast.error('An error occurred while renaming the environment');
+      });
+  };
+
+  const handleCancelRename = () => {
+    setIsRenaming(false);
+    setNewName('');
+    setNameError('');
+  };
+
+  const handleNameChange = (e) => {
+    setNewName(e.target.value);
+    if (nameError) {
+      setNameError('');
+    }
+  };
+
+  const handleNameBlur = () => {
+    if (newName.trim() === '') {
+      handleCancelRename();
+    } else {
+      const error = validateEnvironmentName(newName);
+      if (error) {
+        setNameError(error);
+      }
+    }
+  };
+
+  const handleNameKeyDown = (e) => {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      handleSaveRename();
+    } else if (e.key === 'Escape') {
+      e.preventDefault();
+      handleCancelRename();
+    }
+  };
 
   return (
-    <div className="px-6 flex-grow flex flex-col pt-6" style={{ maxWidth: '700px' }}>
-      {openEditModal && (
-        <RenameEnvironment onClose={() => setOpenEditModal(false)} environment={environment} collection={collection} />
-      )}
+    <StyledWrapper>
       {openDeleteModal && (
-        <DeleteEnvironment
-          onClose={() => setOpenDeleteModal(false)}
-          environment={environment}
-          collection={collection}
-        />
+        <DeleteEnvironment onClose={() => setOpenDeleteModal(false)} environment={environment} collection={collection} />
       )}
       {openCopyModal && (
         <CopyEnvironment onClose={() => setOpenCopyModal(false)} environment={environment} collection={collection} />
       )}
-      <div className="flex">
-        <div className="flex flex-grow items-center">
-          <IconDatabase className="cursor-pointer" size={20} strokeWidth={1.5} />
-          <span className="ml-1 font-medium break-all">{environment.name}</span>
+
+      <div className="header">
+        <div className={`title-container ${isRenaming ? 'renaming' : ''}`}>
+          {isRenaming ? (
+            <>
+              <input
+                ref={inputRef}
+                type="text"
+                className="title-input"
+                value={newName}
+                onChange={handleNameChange}
+                onBlur={handleNameBlur}
+                onKeyDown={handleNameKeyDown}
+                autoComplete="off"
+                autoCorrect="off"
+                autoCapitalize="off"
+                spellCheck="false"
+              />
+              <div className="inline-actions">
+                <button
+                  className="inline-action-btn save"
+                  onClick={handleSaveRename}
+                  onMouseDown={(e) => e.preventDefault()}
+                  title="Save"
+                >
+                  <IconCheck size={14} strokeWidth={2} />
+                </button>
+                <button
+                  className="inline-action-btn cancel"
+                  onClick={handleCancelRename}
+                  onMouseDown={(e) => e.preventDefault()}
+                  title="Cancel"
+                >
+                  <IconX size={14} strokeWidth={2} />
+                </button>
+              </div>
+            </>
+          ) : (
+            <h2 className="title">{environment.name}</h2>
+          )}
         </div>
-        <div className="flex gap-x-2 pl-2">
-          <ToolHint text="Edit Environment" toolhintId={`edit-${environment.uid}`}>
-            <IconEdit className="cursor-pointer" size={20} strokeWidth={1.5} onClick={() => setOpenEditModal(true)} />
-          </ToolHint>
-          <ToolHint text="Copy Environment" toolhintId={`copy-${environment.uid}`}>
-            <IconCopy className="cursor-pointer" size={20} strokeWidth={1.5} onClick={() => setOpenCopyModal(true)} />
-          </ToolHint>
-          <ToolHint text="Delete Environment" toolhintId={`delete-${environment.uid}`}>
-            <IconTrash
-              className="cursor-pointer"
-              size={20}
-              strokeWidth={1.5}
-              onClick={() => setOpenDeleteModal(true)}
-              data-testid="delete-environment-button"
-            />
-          </ToolHint>
+        {nameError && isRenaming && <div className="title-error">{nameError}</div>}
+        <div className="actions">
+          <button onClick={handleRenameClick} title="Rename">
+            <IconEdit size={15} strokeWidth={1.5} />
+          </button>
+          <button onClick={() => setOpenCopyModal(true)} title="Copy">
+            <IconCopy size={15} strokeWidth={1.5} />
+          </button>
+          <button onClick={() => setOpenDeleteModal(true)} title="Delete">
+            <IconTrash size={15} strokeWidth={1.5} />
+          </button>
         </div>
       </div>
 
-      <div>
-        <EnvironmentVariables environment={environment} collection={collection} setIsModified={setIsModified} onClose={onClose} />
+      <div className="content">
+        <EnvironmentVariables environment={environment} setIsModified={setIsModified} collection={collection} />
       </div>
-    </div>
+    </StyledWrapper>
   );
 };
 

packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/StyledWrapper.js

@@ -1,61 +1,281 @@
 import styled from 'styled-components';
 
 const StyledWrapper = styled.div`
-  margin-inline: -1rem;
-  margin-block: -1.5rem;
+  display: flex;
+  height: 100%;
+  overflow: hidden;
+  background-color: ${(props) => props.theme.bg};
+  position: relative;
 
-  background-color: ${(props) => props.theme.collection.environment.settings.bg};
-
-  .environments-sidebar {
-    background-color: ${(props) => props.theme.collection.environment.settings.sidebar.bg};
-    border-right: solid 1px ${(props) => props.theme.collection.environment.settings.sidebar.borderRight};
-    min-height: 400px;
+  .environments-container {
+    display: flex;
     height: 100%;
-    max-height: 85vh;
+    width: 100%;
+    overflow: hidden;
+  }
+
+  .confirm-switch-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 10;
+    background: ${(props) => props.theme.bg};
+    padding: 12px;
+    border-bottom: 1px solid ${(props) => props.theme.sidebar.collection.item.indentBorder};
+  }
+
+  /* Left Sidebar */
+  .sidebar {
+    width: 240px;
+    min-width: 240px;
+    border-right: 1px solid ${(props) => props.theme.sidebar.collection.item.indentBorder};
+    display: flex;
+    flex-direction: column;
+  }
+
+  .sidebar-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 16px 16px 12px 16px;
+    
+    .title {
+      font-size: ${(props) => props.theme.font.size.base};
+      font-weight: 500;
+      color: ${(props) => props.theme.text};
+      margin: 0;
+    }
+    
+    .btn-action {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 24px;
+      height: 24px;
+      padding: 0;
+      background: transparent;
+      border: none;
+      border-radius: 4px;
+      color: ${(props) => props.theme.colors.text.muted};
+      cursor: pointer;
+      transition: all 0.15s ease;
+      
+      &:hover {
+        background: ${(props) => props.theme.sidebar.collection.item.hoverBg};
+        color: ${(props) => props.theme.text};
+      }
+    }
+  }
+
+  .search-container {
+    position: relative;
+    padding: 0 12px 12px 12px;
+    
+    .search-icon {
+      position: absolute;
+      left: 20px;
+      top: 50%;
+      transform: translateY(-100%);
+      color: ${(props) => props.theme.colors.text.muted};
+      pointer-events: none;
+    }
+    
+    .search-input {
+      width: 100%;
+      padding: 6px 8px 6px 28px;
+      font-size: 12px;
+      background: transparent;
+      border: ${(props) => props.theme.sidebar.collection.item.indentBorder};
+      border-radius: 5px;
+      color: ${(props) => props.theme.text};
+      transition: all 0.15s ease;
+      
+      &::placeholder {
+        color: ${(props) => props.theme.colors.text.muted};
+      }
+      
+      &:focus {
+        outline: none;
+      }
+    }
+  }
+
+  .environments-list {
+    flex: 1;
     overflow-y: auto;
+    padding: 0 8px;
   }
 
   .environment-item {
-    min-width: 150px;
-    display: block;
     position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 4px 8px;
+    margin-bottom: 1px;
+    font-size: 13px;
+    color: ${(props) => props.theme.text};
     cursor: pointer;
-    padding: 8px 10px;
-    border-left: solid 2px transparent;
-    text-decoration: none;
-    max-width: 200px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
+    border-radius: 5px;
+    transition: background 0.15s ease;
+    
+    .environment-name {
+      flex: 1;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .environment-actions {
+      display: flex;
+      align-items: center;
+      opacity: 0;
+      transition: opacity 0.15s ease;
+
+      .activate-btn {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 4px;
+        border: none;
+        background: transparent;
+        cursor: pointer;
+        color: ${(props) => props.theme.text.muted};
+        border-radius: 3px;
+        transition: all 0.15s ease;
+
+        &:hover {
+          background: ${(props) => props.theme.workspace.button.bg};
+          color: ${(props) => props.theme.colors.text.green};
+        }
+      }
+
+      .activated-checkmark {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 4px;
+        color: ${(props) => props.theme.colors.text.green};
+        opacity: 1;
+      }
+    }
+
+    &:hover .environment-actions {
+      opacity: 1;
+    }
+
+    &.activated .environment-actions {
+      opacity: 1;
+    }
 
     &:hover {
-      text-decoration: none;
-      background-color: ${(props) => props.theme.collection.environment.settings.item.hoverBg};
+      background: ${(props) => props.theme.workspace.button.bg};
+    }
+    
+    &.active {
+      background: ${(props) => props.theme.workspace.environments.activeBg};
+      color: ${(props) => props.theme.text};
+    }
+    
+    &.renaming,
+    &.creating {
+      cursor: default;
+      padding: 4px 4px 4px 8px;
+      background: ${(props) => props.theme.sidebar.collection.item.hoverBg};
+      
+      &:hover {
+        background: ${(props) => props.theme.workspace.button.bg};
+      }
+    }
+
+    .rename-container {
+      display: flex;
+      align-items: center;
+      flex: 1;
+      
+      .environment-name-input {
+        flex: 1;
+        background: transparent;
+        border: none;
+        outline: none;
+        color: ${(props) => props.theme.text};
+        font-size: 13px;
+        padding: 2px 4px;
+        
+        &::placeholder {
+          color: ${(props) => props.theme.colors.text.muted};
+        }
+      }
+      
+      .inline-actions {
+        display: flex;
+        gap: 2px;
+        margin-left: 4px;
+      }
+    }
+
+    &.creating {
+      .environment-name-input {
+        flex: 1;
+        background: transparent;
+        border: none;
+        outline: none;
+        color: ${(props) => props.theme.text};
+        font-size: 13px;
+        padding: 2px 4px;
+        
+        &::placeholder {
+          color: ${(props) => props.theme.colors.text.muted};
+        }
+      }
+      
+      .inline-actions {
+        display: flex;
+        gap: 2px;
+        margin-left: 4px;
+      }
+      
+      .inline-action-btn {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 22px;
+        height: 22px;
+        padding: 0;
+        background: transparent;
+        border: none;
+        border-radius: 4px;
+        cursor: pointer;
+        transition: all 0.15s ease;
+        
+        &.save {
+          color: ${(props) => props.theme.textLink};
+          
+          &:hover {
+            background: ${(props) => props.theme.listItem.hoverBg};
+          }
+        }
+        
+        &.cancel {
+          color: ${(props) => props.theme.colors.text.muted};
+          
+          &:hover {
+            background: ${(props) => props.theme.listItem.hoverBg};
+            color: ${(props) => props.theme.text};
+          }
+        }
+      }
     }
   }
-
-  .active {
-    background-color: ${(props) => props.theme.collection.environment.settings.item.active.bg} !important;
-    border-left: solid 2px ${(props) => props.theme.collection.environment.settings.item.border};
-    &:hover {
-      background-color: ${(props) => props.theme.collection.environment.settings.item.active.hoverBg} !important;
-    }
-  }
-
-  .btn-create-environment,
-  .btn-import-environment {
-    padding: 8px 10px;
-    cursor: pointer;
-    border-bottom: none;
-    color: ${(props) => props.theme.textLink};
-
-    span:hover {
-      text-decoration: underline;
-    }
-  }
-
-  .btn-import-environment {
-    color: ${(props) => props.theme.colors.text.muted};
+  
+  .env-error {
+    padding: 4px 12px;
+    margin-top: 4px;
+    font-size: 11px;
+    color: ${(props) => props.theme.colors.text.danger};
+    background: ${(props) => `${props.theme.colors.text.danger}15`};
+    border-radius: 4px;
   }
 `;
 

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

@@ -1,21 +1,39 @@
-import React, { useEffect, useState } from 'react';
-import { findEnvironmentInCollection } from 'utils/collections';
+import React, { useEffect, useState, useRef } from 'react';
 import usePrevious from 'hooks/usePrevious';
 import EnvironmentDetails from './EnvironmentDetails';
-import CreateEnvironment from '../CreateEnvironment';
-import { IconDownload, IconShieldLock, IconUpload } from '@tabler/icons';
-import ImportEnvironmentModal from 'components/Environments/Common/ImportEnvironmentModal';
-import ManageSecrets from '../ManageSecrets';
+import CreateEnvironment from 'components/Environments/EnvironmentSettings/CreateEnvironment';
+import { IconDownload, IconUpload, IconSearch, IconPlus, IconCheck, IconX } from '@tabler/icons';
 import StyledWrapper from './StyledWrapper';
-import ConfirmSwitchEnv from './ConfirmSwitchEnv';
-import ToolHint from 'components/ToolHint';
+import ConfirmSwitchEnv from 'components/WorkspaceHome/WorkspaceEnvironments/EnvironmentList/ConfirmSwitchEnv';
+import ImportEnvironmentModal from 'components/Environments/Common/ImportEnvironmentModal';
 import { isEqual } from 'lodash';
+import { useDispatch } from 'react-redux';
+import { addEnvironment, renameEnvironment, selectEnvironment } from 'providers/ReduxStore/slices/collections/actions';
+import { validateName, validateNameError } from 'utils/common/regex';
+import toast from 'react-hot-toast';
+
+const EnvironmentList = ({
+  environments,
+  activeEnvironmentUid,
+  selectedEnvironment,
+  setSelectedEnvironment,
+  isModified,
+  setIsModified,
+  collection,
+  setShowExportModal
+}) => {
+  const dispatch = useDispatch();
 
-const EnvironmentList = ({ selectedEnvironment, setSelectedEnvironment, collection, isModified, setIsModified, onClose, setShowExportModal }) => {
-  const { environments } = collection;
   const [openCreateModal, setOpenCreateModal] = useState(false);
   const [openImportModal, setOpenImportModal] = useState(false);
-  const [openManageSecretsModal, setOpenManageSecretsModal] = useState(false);
+  const [searchText, setSearchText] = useState('');
+  const [isCreatingInline, setIsCreatingInline] = useState(false);
+  const [renamingEnvUid, setRenamingEnvUid] = useState(null);
+  const [newEnvName, setNewEnvName] = useState('');
+  const [envNameError, setEnvNameError] = useState('');
+  const inputRef = useRef(null);
+  const renameContainerRef = useRef(null);
+  const createContainerRef = useRef(null);
 
   const [switchEnvConfirmClose, setSwitchEnvConfirmClose] = useState(false);
   const [originalEnvironmentVariables, setOriginalEnvironmentVariables] = useState([]);
@@ -24,23 +42,36 @@ const EnvironmentList = ({ selectedEnvironment, setSelectedEnvironment, collecti
   const prevEnvUids = usePrevious(envUids);
 
   useEffect(() => {
-    if (selectedEnvironment) {
-      const _selectedEnvironment = environments?.find((env) => env?.uid === selectedEnvironment?.uid);
-      const hasSelectedEnvironmentChanged = !isEqual(selectedEnvironment, _selectedEnvironment);
-      if (hasSelectedEnvironmentChanged) {
-        setSelectedEnvironment(_selectedEnvironment);
-      }
-      setOriginalEnvironmentVariables(selectedEnvironment.variables);
+    if (!environments?.length) {
+      setSelectedEnvironment(null);
+      setOriginalEnvironmentVariables([]);
       return;
     }
 
-    const environment = findEnvironmentInCollection(collection, collection.activeEnvironmentUid);
-    if (environment) {
-      setSelectedEnvironment(environment);
-    } else {
-      setSelectedEnvironment(environments && environments.length ? environments[0] : null);
+    if (selectedEnvironment) {
+      let _selectedEnvironment = environments?.find((env) => env?.uid === selectedEnvironment?.uid);
+
+      if (!_selectedEnvironment) {
+        _selectedEnvironment = environments?.find((env) => env?.name === selectedEnvironment?.name);
+      }
+
+      if (!_selectedEnvironment) {
+        _selectedEnvironment = environments?.find((env) => env.uid === activeEnvironmentUid) || environments?.[0];
+      }
+
+      const hasSelectedEnvironmentChanged = !isEqual(selectedEnvironment, _selectedEnvironment);
+      if (hasSelectedEnvironmentChanged || selectedEnvironment.uid !== _selectedEnvironment?.uid) {
+        setSelectedEnvironment(_selectedEnvironment);
+      }
+      setOriginalEnvironmentVariables(_selectedEnvironment?.variables || []);
+      return;
     }
-  }, [collection, environments, selectedEnvironment]);
+
+    const environment = environments?.find((env) => env.uid === activeEnvironmentUid) || environments?.[0];
+
+    setSelectedEnvironment(environment);
+    setOriginalEnvironmentVariables(environment?.variables || []);
+  }, [environments, activeEnvironmentUid, selectedEnvironment]);
 
   useEffect(() => {
     if (prevEnvUids && prevEnvUids.length && envUids.length > prevEnvUids.length) {
@@ -55,6 +86,36 @@ const EnvironmentList = ({ selectedEnvironment, setSelectedEnvironment, collecti
     }
   }, [envUids, environments, prevEnvUids]);
 
+  useEffect(() => {
+    if (!renamingEnvUid) return;
+
+    const handleClickOutside = (event) => {
+      if (renameContainerRef.current && !renameContainerRef.current.contains(event.target)) {
+        handleCancelRename();
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [renamingEnvUid]);
+
+  useEffect(() => {
+    if (!isCreatingInline) return;
+
+    const handleClickOutside = (event) => {
+      if (createContainerRef.current && !createContainerRef.current.contains(event.target)) {
+        handleCancelCreate();
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [isCreatingInline]);
+
   const handleEnvironmentClick = (env) => {
     if (!isModified) {
       setSelectedEnvironment(env);
@@ -63,18 +124,141 @@ const EnvironmentList = ({ selectedEnvironment, setSelectedEnvironment, collecti
     }
   };
 
+  const handleEnvironmentDoubleClick = (env) => {
+    setRenamingEnvUid(env.uid);
+    setNewEnvName(env.name);
+    setEnvNameError('');
+    setTimeout(() => {
+      inputRef.current?.focus();
+      inputRef.current?.select();
+    }, 50);
+  };
+
+  const handleActivateEnvironment = (e, env) => {
+    e.stopPropagation();
+    dispatch(selectEnvironment(env.uid, collection.uid))
+      .then(() => {
+        toast.success(`Environment "${env.name}" activated`);
+      })
+      .catch(() => {
+        toast.error('Failed to activate environment');
+      });
+  };
+
   if (!selectedEnvironment) {
     return null;
   }
 
+  const validateEnvironmentName = (name, excludeUid = null) => {
+    if (!name || name.trim() === '') {
+      return 'Name is required';
+    }
+
+    if (!validateName(name)) {
+      return validateNameError(name);
+    }
+
+    const trimmedName = name.toLowerCase().trim();
+    const isDuplicate = environments.some(
+      (env) => env?.uid !== excludeUid && env?.name?.toLowerCase().trim() === trimmedName
+    );
+    if (isDuplicate) {
+      return 'Environment already exists';
+    }
+
+    return null;
+  };
+
   const handleCreateEnvClick = () => {
     if (!isModified) {
-      setOpenCreateModal(true);
+      setIsCreatingInline(true);
+      setNewEnvName('');
+      setEnvNameError('');
+      setTimeout(() => {
+        inputRef.current?.focus();
+      }, 50);
     } else {
       setSwitchEnvConfirmClose(true);
     }
   };
 
+  const handleCancelCreate = () => {
+    setIsCreatingInline(false);
+    setNewEnvName('');
+    setEnvNameError('');
+  };
+
+  const handleSaveNewEnv = () => {
+    const error = validateEnvironmentName(newEnvName);
+    if (error) {
+      setEnvNameError(error);
+      return;
+    }
+
+    dispatch(addEnvironment(newEnvName, collection.uid))
+      .then(() => {
+        toast.success('Environment created!');
+        setIsCreatingInline(false);
+        setNewEnvName('');
+        setEnvNameError('');
+      })
+      .catch(() => {
+        toast.error('An error occurred while creating the environment');
+      });
+  };
+
+  const handleEnvNameChange = (e) => {
+    const value = e.target.value;
+    setNewEnvName(value);
+
+    if (envNameError) {
+      setEnvNameError('');
+    }
+  };
+
+  const handleEnvNameKeyDown = (e) => {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      if (renamingEnvUid) {
+        handleSaveRename();
+      } else {
+        handleSaveNewEnv();
+      }
+    } else if (e.key === 'Escape') {
+      e.preventDefault();
+      if (renamingEnvUid) {
+        handleCancelRename();
+      } else {
+        handleCancelCreate();
+      }
+    }
+  };
+
+  const handleSaveRename = () => {
+    const error = validateEnvironmentName(newEnvName, renamingEnvUid);
+    if (error) {
+      setEnvNameError(error);
+      return;
+    }
+
+    dispatch(renameEnvironment(newEnvName, renamingEnvUid, collection.uid))
+      .then(() => {
+        toast.success('Environment renamed!');
+        setRenamingEnvUid(null);
+        setNewEnvName('');
+        setEnvNameError('');
+      })
+      .catch(() => {
+        toast.error('An error occurred while renaming the environment');
+      });
+  };
+
+  const handleCancelRename = () => {
+    setRenamingEnvUid(null);
+    setNewEnvName('');
+    setEnvNameError('');
+  };
+
   const handleImportClick = () => {
     if (!isModified) {
       setOpenImportModal(true);
@@ -83,8 +267,10 @@ const EnvironmentList = ({ selectedEnvironment, setSelectedEnvironment, collecti
     }
   };
 
-  const handleSecretsClick = () => {
-    setOpenManageSecretsModal(true);
+  const handleExportClick = () => {
+    if (setShowExportModal) {
+      setShowExportModal(true);
+    }
   };
 
   const handleConfirmSwitch = (saveChanges) => {
@@ -93,59 +279,160 @@ const EnvironmentList = ({ selectedEnvironment, setSelectedEnvironment, collecti
     }
   };
 
+  const filteredEnvironments
+    = environments?.filter((env) => env.name.toLowerCase().includes(searchText.toLowerCase())) || [];
+
   return (
     <StyledWrapper>
       {openCreateModal && <CreateEnvironment collection={collection} onClose={() => setOpenCreateModal(false)} />}
-      {openImportModal && <ImportEnvironmentModal type="collection" collection={collection} onClose={() => setOpenImportModal(false)} />}
-      {openManageSecretsModal && <ManageSecrets onClose={() => setOpenManageSecretsModal(false)} />}
+      {openImportModal && (
+        <ImportEnvironmentModal type="collection" collection={collection} onClose={() => setOpenImportModal(false)} />
+      )}
 
-      <div className="flex">
-        <div>
-          {switchEnvConfirmClose && (
-            <div className="flex items-center justify-between tab-container px-1">
-              <ConfirmSwitchEnv onCancel={() => handleConfirmSwitch(false)} />
-            </div>
-          )}
-          <div className="environments-sidebar flex flex-col">
-            {environments
-              && environments.length
-              && environments.map((env) => (
-                <ToolHint key={env.uid} text={env.name} toolhintId={env.uid} place="right">
-                  <div
-                    id={env.uid}
-                    className={selectedEnvironment.uid === env.uid ? 'environment-item active' : 'environment-item'}
-                    onClick={() => handleEnvironmentClick(env)} // Use handleEnvironmentClick to handle clicks
-                  >
-                    <span className="break-all">{env.name}</span>
-                  </div>
-                </ToolHint>
-              ))}
-            <div className="btn-create-environment" onClick={() => handleCreateEnvClick()}>
-              + <span>Create</span>
-            </div>
+      <div className="environments-container">
+        {switchEnvConfirmClose && (
+          <div className="confirm-switch-overlay">
+            <ConfirmSwitchEnv onCancel={() => handleConfirmSwitch(false)} />
+          </div>
+        )}
 
-            <div className="mt-auto btn-import-environment">
-              <div className="flex items-center" onClick={() => handleImportClick()}>
-                <IconDownload size={12} strokeWidth={2} />
-                <span className="label ml-1 text-xs">Import</span>
-              </div>
-              <div className="flex items-center mt-2" onClick={() => setShowExportModal(true)}>
-                <IconUpload size={12} strokeWidth={2} />
-                <span className="label ml-1 text-xs">Export</span>
-              </div>
-              <div className="flex items-center mt-2" onClick={() => handleSecretsClick()}>
-                <IconShieldLock size={12} strokeWidth={2} />
-                <span className="label ml-1 text-xs">Managing Secrets</span>
-              </div>
+        <div className="sidebar">
+          <div className="sidebar-header">
+            <h2 className="title">Environments</h2>
+            <div className="flex items-center gap-2">
+              <button className="btn-action" onClick={() => handleCreateEnvClick()} title="Create environment">
+                <IconPlus size={16} strokeWidth={1.5} />
+              </button>
+              <button className="btn-action" onClick={() => handleImportClick()} title="Import environment">
+                <IconDownload size={16} strokeWidth={1.5} />
+              </button>
+              <button className="btn-action" onClick={() => handleExportClick()} title="Export environment">
+                <IconUpload size={16} strokeWidth={1.5} />
+              </button>
             </div>
           </div>
+
+          <div className="search-container">
+            <IconSearch size={14} strokeWidth={1.5} className="search-icon" />
+            <input
+              type="text"
+              placeholder="Search environments..."
+              value={searchText}
+              onChange={(e) => setSearchText(e.target.value)}
+              className="search-input"
+            />
+          </div>
+
+          <div className="environments-list">
+            {filteredEnvironments.map((env) => (
+              <div
+                key={env.uid}
+                id={env.uid}
+                className={`environment-item ${selectedEnvironment.uid === env.uid ? 'active' : ''} ${renamingEnvUid === env.uid ? 'renaming' : ''} ${activeEnvironmentUid === env.uid ? 'activated' : ''}`}
+                onClick={() => renamingEnvUid !== env.uid && handleEnvironmentClick(env)}
+                onDoubleClick={() => handleEnvironmentDoubleClick(env)}
+              >
+                {renamingEnvUid === env.uid ? (
+                  <div className="rename-container" ref={renameContainerRef}>
+                    <input
+                      ref={inputRef}
+                      type="text"
+                      className="environment-name-input"
+                      value={newEnvName}
+                      onChange={handleEnvNameChange}
+                      onKeyDown={handleEnvNameKeyDown}
+                      autoComplete="off"
+                      autoCorrect="off"
+                      autoCapitalize="off"
+                      spellCheck="false"
+                    />
+                    <div className="inline-actions">
+                      <button
+                        className="inline-action-btn save"
+                        onClick={handleSaveRename}
+                        onMouseDown={(e) => e.preventDefault()}
+                        title="Save"
+                      >
+                        <IconCheck size={14} strokeWidth={2} />
+                      </button>
+                      <button
+                        className="inline-action-btn cancel"
+                        onClick={handleCancelRename}
+                        onMouseDown={(e) => e.preventDefault()}
+                        title="Cancel"
+                      >
+                        <IconX size={14} strokeWidth={2} />
+                      </button>
+                    </div>
+                  </div>
+                ) : (
+                  <>
+                    <span className="environment-name">{env.name}</span>
+                    <div className="environment-actions">
+                      {activeEnvironmentUid === env.uid ? (
+                        <div className="activated-checkmark" title="Active environment">
+                          <IconCheck size={16} strokeWidth={2} />
+                        </div>
+                      ) : (
+                        <button
+                          className="activate-btn"
+                          onClick={(e) => handleActivateEnvironment(e, env)}
+                          title="Activate environment"
+                        >
+                          <IconCheck size={16} strokeWidth={2} />
+                        </button>
+                      )}
+                    </div>
+                  </>
+                )}
+              </div>
+            ))}
+
+            {isCreatingInline && (
+              <div className="environment-item creating" ref={createContainerRef}>
+                <input
+                  ref={inputRef}
+                  type="text"
+                  className="environment-name-input"
+                  value={newEnvName}
+                  onChange={handleEnvNameChange}
+                  onKeyDown={handleEnvNameKeyDown}
+                  placeholder="Environment name..."
+                  autoComplete="off"
+                  autoCorrect="off"
+                  autoCapitalize="off"
+                  spellCheck="false"
+                />
+                <div className="inline-actions">
+                  <button
+                    className="inline-action-btn save"
+                    onClick={handleSaveNewEnv}
+                    onMouseDown={(e) => e.preventDefault()}
+                    title="Save"
+                  >
+                    <IconCheck size={14} strokeWidth={2} />
+                  </button>
+                  <button
+                    className="inline-action-btn cancel"
+                    onClick={handleCancelCreate}
+                    onMouseDown={(e) => e.preventDefault()}
+                    title="Cancel"
+                  >
+                    <IconX size={14} strokeWidth={2} />
+                  </button>
+                </div>
+              </div>
+            )}
+
+            {envNameError && (isCreatingInline || renamingEnvUid) && <div className="env-error">{envNameError}</div>}
+          </div>
         </div>
+
         <EnvironmentDetails
           environment={selectedEnvironment}
-          collection={collection}
           setIsModified={setIsModified}
           originalEnvironmentVariables={originalEnvironmentVariables}
-          onClose={onClose}
+          collection={collection}
         />
       </div>
     </StyledWrapper>

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

@@ -1,31 +0,0 @@
-import React from 'react';
-import Portal from 'components/Portal';
-import Modal from 'components/Modal';
-
-const ManageSecrets = ({ onClose }) => {
-  return (
-    <Portal>
-      <Modal size="sm" title="Manage Secrets" hideFooter={true} handleConfirm={onClose} handleCancel={onClose}>
-        <div>
-          <p>In any collection, there are secrets that need to be managed.</p>
-          <p className="mt-2">These secrets can be anything such as API keys, passwords, or tokens.</p>
-          <p className="mt-4">Bruno offers three approaches to manage secrets in collections.</p>
-          <p className="mt-2">
-            Read more about it in our{' '}
-            <a
-              href="https://docs.usebruno.com/secrets-management/overview"
-              target="_blank"
-              rel="noreferrer"
-              className="text-link hover:underline"
-            >
-              docs
-            </a>
-            .
-          </p>
-        </div>
-      </Modal>
-    </Portal>
-  );
-};
-
-export default ManageSecrets;

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

@@ -1,89 +0,0 @@
-import React, { useEffect, useRef } from 'react';
-import Portal from 'components/Portal/index';
-import Modal from 'components/Modal/index';
-import toast from 'react-hot-toast';
-import { useFormik } from 'formik';
-import { renameEnvironment } from 'providers/ReduxStore/slices/collections/actions';
-import * as Yup from 'yup';
-import { useDispatch } from 'react-redux';
-import { validateName, validateNameError } from 'utils/common/regex';
-
-const RenameEnvironment = ({ onClose, environment, collection }) => {
-  const dispatch = useDispatch();
-  const inputRef = useRef();
-  const formik = useFormik({
-    enableReinitialize: true,
-    initialValues: {
-      name: environment.name
-    },
-    validationSchema: Yup.object({
-      name: Yup.string()
-        .min(1, 'must be at least 1 character')
-        .max(255, 'Must be 255 characters or less')
-        .test('is-valid-filename', function (value) {
-          const isValid = validateName(value);
-          return isValid ? true : this.createError({ message: validateNameError(value) });
-        })
-        .required('name is required')
-    }),
-    onSubmit: (values) => {
-      if (values.name === environment.name) {
-        return;
-      }
-      dispatch(renameEnvironment(values.name, environment.uid, collection.uid))
-        .then(() => {
-          toast.success('Environment renamed successfully');
-          onClose();
-        })
-        .catch(() => toast.error('An error occurred while renaming the environment'));
-    }
-  });
-
-  useEffect(() => {
-    if (inputRef && inputRef.current) {
-      inputRef.current.focus();
-    }
-  }, [inputRef]);
-
-  const onSubmit = () => {
-    formik.handleSubmit();
-  };
-
-  return (
-    <Portal>
-      <Modal
-        size="sm"
-        title="Rename Environment"
-        confirmText="Rename"
-        handleConfirm={onSubmit}
-        handleCancel={onClose}
-      >
-        <form className="bruno-form" onSubmit={(e) => e.preventDefault()}>
-          <div>
-            <label htmlFor="name" className="block font-medium">
-              Environment Name
-            </label>
-            <input
-              id="environment-name"
-              type="text"
-              name="name"
-              ref={inputRef}
-              className="block textbox mt-2 w-full"
-              autoComplete="off"
-              autoCorrect="off"
-              autoCapitalize="off"
-              spellCheck="false"
-              onChange={formik.handleChange}
-              value={formik.values.name || ''}
-            />
-            {formik.touched.name && formik.errors.name ? (
-              <div className="text-red-500">{formik.errors.name}</div>
-            ) : null}
-          </div>
-        </form>
-      </Modal>
-    </Portal>
-  );
-};
-
-export default RenameEnvironment;

packages/bruno-app/src/components/Environments/EnvironmentSettings/StyledWrapper.js

@@ -1,11 +1,51 @@
 import styled from 'styled-components';
 
 const StyledWrapper = styled.div`
-  button.btn-create-environment {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  background-color: ${(props) => props.theme.bg};
+
+  .empty-state {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    flex: 1;
+    color: ${(props) => props.theme.colors.text.muted};
+
+    svg {
+      opacity: 0.3;
+      margin-bottom: 8px;
+    }
+
+    .title {
+      font-size: 13px;
+      font-weight: 500;
+      margin-bottom: 12px;
+      color: ${(props) => props.theme.colors.text.muted};
+    }
+
+    .actions {
+      display: flex;
+      gap: 8px;
+    }
+  }
+
+  .shared-button {
+    padding: 5px 10px;
+    font-size: 12px;
+    border-radius: 5px;
+    border: 1px solid ${(props) => props.theme.sidebar.collection.item.indentBorder};
+    background: ${(props) => props.theme.sidebar.bg};
+    color: ${(props) => props.theme.text};
+    cursor: pointer;
+    transition: all 0.1s ease;
+
     &:hover {
-      span {
-        text-decoration: underline;
-      }
+      background: ${(props) => props.theme.listItem.hoverBg};
+      border-color: ${(props) => props.theme.textLink};
     }
   }
 `;

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

@@ -1,87 +1,64 @@
-import Modal from 'components/Modal/index';
 import React, { useState } from 'react';
-import CreateEnvironment from './CreateEnvironment';
+import CreateEnvironment from 'components/Environments/EnvironmentSettings/CreateEnvironment';
 import EnvironmentList from './EnvironmentList';
 import StyledWrapper from './StyledWrapper';
-import ImportEnvironmentModal from 'components/Environments/Common/ImportEnvironmentModal';
 import { IconFileAlert } from '@tabler/icons';
+import ImportEnvironmentModal from 'components/Environments/Common/ImportEnvironmentModal';
 import ExportEnvironmentModal from 'components/Environments/Common/ExportEnvironmentModal';
 
-export const SharedButton = ({ children, className, onClick }) => {
-  return (
-    <button
-      type="button"
-      onClick={onClick}
-      className={`rounded bg-transparent px-2.5 py-2 w-fit text-xs font-medium text-zinc-900 dark:text-zinc-50 shadow-sm ring-1 ring-inset ring-zinc-300 dark:ring-zinc-500 hover:bg-gray-50 dark:hover:bg-zinc-700
-        ${className}`}
-    >
-      {children}
-    </button>
-  );
-};
-
-const DefaultTab = ({ setTab }) => {
-  return (
-    <div className="text-center items-center flex flex-col">
-      <IconFileAlert size={64} strokeWidth={1} />
-      <span className="font-medium mt-2">No environments found</span>
-      <span className="font-extralight mt-2 text-zinc-500 dark:text-zinc-400">
-        Get started by using the following buttons :
-      </span>
-      <div className="flex items-center justify-center mt-6">
-        <SharedButton onClick={() => setTab('create')}>
-          <span>Create Environment</span>
-        </SharedButton>
-
-        <span className="mx-4">Or</span>
-
-        <SharedButton onClick={() => setTab('import')}>
-          <span>Import Environment</span>
-        </SharedButton>
-      </div>
+const DefaultTab = ({ setTab }) => (
+  <div className="empty-state">
+    <IconFileAlert size={48} strokeWidth={1.5} />
+    <div className="title">No Environments</div>
+    <div className="actions">
+      <button className="shared-button" onClick={() => setTab('create')}>
+        Create Environment
+      </button>
+      <button className="shared-button" onClick={() => setTab('import')}>
+        Import Environment
+      </button>
     </div>
-  );
-};
+  </div>
+);
 
-const EnvironmentSettings = ({ collection, onClose }) => {
+const EnvironmentSettings = ({ collection }) => {
   const [isModified, setIsModified] = useState(false);
-  const { environments } = collection;
   const [selectedEnvironment, setSelectedEnvironment] = useState(null);
   const [tab, setTab] = useState('default');
   const [showExportModal, setShowExportModal] = useState(false);
+
+  const environments = collection?.environments || [];
+
   if (!environments || !environments.length) {
     return (
       <StyledWrapper>
-        <Modal size="md" title="Environments" handleCancel={onClose} hideCancel={true} hideFooter={true}>
-          {tab === 'create' ? (
-            <CreateEnvironment collection={collection} onClose={() => setTab('default')} />
-          ) : tab === 'import' ? (
-            <ImportEnvironmentModal type="collection" collection={collection} onClose={() => setTab('default')} />
-          ) : (
-            <DefaultTab setTab={setTab} />
-          )}
-        </Modal>
+        {tab === 'create' ? (
+          <CreateEnvironment collection={collection} onClose={() => setTab('default')} />
+        ) : tab === 'import' ? (
+          <ImportEnvironmentModal type="collection" collection={collection} onClose={() => setTab('default')} />
+        ) : (
+          <DefaultTab setTab={setTab} />
+        )}
       </StyledWrapper>
     );
   }
 
   return (
     <StyledWrapper>
-      <Modal size="lg" title="Environments" handleCancel={onClose} hideFooter={true}>
-        <EnvironmentList
-          selectedEnvironment={selectedEnvironment}
-          setSelectedEnvironment={setSelectedEnvironment}
-          collection={collection}
-          isModified={isModified}
-          setIsModified={setIsModified}
-          onClose={onClose}
-          setShowExportModal={setShowExportModal}
-        />
-      </Modal>
+      <EnvironmentList
+        environments={environments}
+        activeEnvironmentUid={collection?.activeEnvironmentUid}
+        selectedEnvironment={selectedEnvironment}
+        setSelectedEnvironment={setSelectedEnvironment}
+        isModified={isModified}
+        setIsModified={setIsModified}
+        collection={collection}
+        setShowExportModal={setShowExportModal}
+      />
       {showExportModal && (
         <ExportEnvironmentModal
           onClose={() => setShowExportModal(false)}
-          environments={collection.environments}
+          environments={environments}
           environmentType="collection"
         />
       )}

packages/bruno-app/src/components/Environments/GlobalEnvironmentSettings/index.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import WorkspaceEnvironments from 'components/WorkspaceHome/WorkspaceEnvironments';
+
+const GlobalEnvironmentSettings = () => {
+  return <WorkspaceEnvironments />;
+};
+
+export default GlobalEnvironmentSettings;

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

@@ -55,16 +55,30 @@ const FilePickerEditor = ({ value, onChange, collection, isSingleFilePicker = fa
   return filenames.length > 0 ? (
     <div
       className={buttonClass}
-      style={{ fontWeight: 400, width: '100%', textOverflow: 'ellipsis', overflowX: 'hidden' }}
+      style={{
+        fontWeight: 400,
+        width: '100%',
+        display: 'flex',
+        alignItems: 'center',
+        overflow: 'hidden'
+      }}
       title={title}
     >
       {!readOnly && (
-        <button className="align-middle" onClick={clear}>
+        <button className="align-middle" onClick={clear} style={{ flexShrink: 0 }}>
           <IconX size={18} />
         </button>
       )}
       {!readOnly && <>&nbsp;</>}
-      {renderButtonText(filenames)}
+      <span style={{
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap',
+        flex: 1
+      }}
+      >
+        {renderButtonText(filenames)}
+      </span>
     </div>
   ) : (
     <button className={buttonClass} style={{ width: '100%' }} onClick={!readOnly ? browse : undefined} disabled={readOnly}>

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

@@ -18,6 +18,7 @@ import WsseAuth from 'components/RequestPane/Auth/WsseAuth';
 import ApiKeyAuth from 'components/RequestPane/Auth/ApiKeyAuth';
 import AwsV4Auth from 'components/RequestPane/Auth/AwsV4Auth';
 import { humanizeRequestAuthMode, getTreePathFromCollectionToItem } from 'utils/collections/index';
+import Button from 'ui/Button';
 
 const GrantTypeComponentMap = ({ collection, folder }) => {
   const dispatch = useDispatch();
@@ -206,14 +207,14 @@ const Auth = ({ collection, folder }) => {
         Configures authentication for the entire folder. This applies to all requests using the{' '}
         <span className="font-medium">Inherit</span> option in the <span className="font-medium">Auth</span> tab.
       </div>
-      <div className="flex flex-grow justify-start items-center mb-4">
+      <div className="flex flex-grow justify-start items-center">
         <AuthMode collection={collection} folder={folder} />
       </div>
       {getAuthView()}
       <div className="mt-6">
-        <button type="submit" className="submit btn btn-sm btn-secondary" onClick={handleSave}>
+        <Button type="submit" size="sm" onClick={handleSave}>
           Save
-        </button>
+        </Button>
       </div>
     </StyledWrapper>
   );

packages/bruno-app/src/components/FolderSettings/AuthMode/StyledWrapper.js

@@ -1,16 +1,20 @@
 import styled from 'styled-components';
 
 const StyledWrapper = styled.div`
-  .auth-mode-selector {
-    border: 1px solid ${({ theme }) => theme.colors.border};
-    padding: 4px 8px;
-    border-radius: 4px;
-    font-size: ${(props) => props.theme.font.size.base};
-  }
+  font-size: ${(props) => props.theme.font.size.base};
 
-  .auth-mode-label {
-    color: ${({ theme }) => theme.colors.text};
+  .auth-mode-selector {
+    background: transparent;
+
+    .auth-mode-label {
+      color: ${(props) => props.theme.colors.text.yellow};
+
+    .caret {
+      color: rgb(140, 140, 140);
+      fill: rgb(140, 140, 140);
+    }
   }
+}
 `;
 
 export default StyledWrapper;

packages/bruno-app/src/components/FolderSettings/AuthMode/index.js

@@ -1,7 +1,7 @@
-import React, { useRef, forwardRef } from 'react';
+import React, { useMemo, useCallback } from 'react';
 import get from 'lodash/get';
 import { IconCaretDown } from '@tabler/icons';
-import Dropdown from 'components/Dropdown';
+import MenuDropdown from 'ui/MenuDropdown';
 import { useDispatch } from 'react-redux';
 import { updateFolderAuthMode } from 'providers/ReduxStore/slices/collections';
 import { humanizeRequestAuthMode } from 'utils/collections';
@@ -9,19 +9,9 @@ import StyledWrapper from './StyledWrapper';
 
 const AuthMode = ({ collection, folder }) => {
   const dispatch = useDispatch();
-  const dropdownTippyRef = useRef();
-  const onDropdownCreate = (ref) => (dropdownTippyRef.current = ref);
   const authMode = folder.draft ? get(folder, 'draft.request.auth.mode') : get(folder, 'root.request.auth.mode');
 
-  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) => {
+  const onModeChange = useCallback((value) => {
     dispatch(
       updateFolderAuthMode({
         mode: value,
@@ -29,103 +19,74 @@ const AuthMode = ({ collection, folder }) => {
         folderUid: folder.uid
       })
     );
-  };
+  }, [dispatch, collection.uid, folder.uid]);
+
+  const menuItems = useMemo(() => [
+    {
+      id: 'awsv4',
+      label: 'AWS Sig v4',
+      onClick: () => onModeChange('awsv4')
+    },
+    {
+      id: 'basic',
+      label: 'Basic Auth',
+      onClick: () => onModeChange('basic')
+    },
+    {
+      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: 'wsse',
+      label: 'WSSE Auth',
+      onClick: () => onModeChange('wsse')
+    },
+    {
+      id: 'apikey',
+      label: 'API Key',
+      onClick: () => onModeChange('apikey')
+    },
+    {
+      id: 'inherit',
+      label: 'Inherit',
+      onClick: () => onModeChange('inherit')
+    },
+    {
+      id: 'none',
+      label: 'No Auth',
+      onClick: () => onModeChange('none')
+    }
+  ], [onModeChange]);
 
   return (
     <StyledWrapper>
-      <div className="inline-flex items-center cursor-pointer">
-        <Dropdown onCreate={onDropdownCreate} icon={<Icon />} placement="bottom-end">
-          <div
-            className="dropdown-item"
-            onClick={() => {
-              dropdownTippyRef.current.hide();
-              onModeChange('awsv4');
-            }}
-          >
-            AWS Sig v4
+      <div className="inline-flex items-center cursor-pointer auth-mode-selector">
+        <MenuDropdown
+          items={menuItems}
+          placement="bottom-end"
+          selectedItemId={authMode}
+          showTickMark={true}
+        >
+          <div 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>
-          <div
-            className="dropdown-item"
-            onClick={() => {
-              dropdownTippyRef.current.hide();
-              onModeChange('basic');
-            }}
-          >
-            Basic 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('wsse');
-            }}
-          >
-            WSSE Auth
-          </div>
-          <div
-            className="dropdown-item"
-            onClick={() => {
-              dropdownTippyRef.current.hide();
-              onModeChange('apikey');
-            }}
-          >
-            API Key
-          </div>
-          <div
-            className="dropdown-item"
-            onClick={() => {
-              dropdownTippyRef.current.hide();
-              onModeChange('inherit');
-            }}
-          >
-            Inherit
-          </div>
-          <div
-            className="dropdown-item"
-            onClick={() => {
-              dropdownTippyRef.current.hide();
-              onModeChange('none');
-            }}
-          >
-            No Auth
-          </div>
-        </Dropdown>
+        </MenuDropdown>
       </div>
     </StyledWrapper>
   );

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

@@ -1,76 +1,83 @@
-import React, { useState } from 'react';
+import React, { useState, useCallback } 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 { addFolderHeader, updateFolderHeader, deleteFolderHeader, setFolderHeaders } from 'providers/ReduxStore/slices/collections';
+import { setFolderHeaders } from 'providers/ReduxStore/slices/collections';
 import { saveFolderRoot } 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, folder }) => {
   const dispatch = useDispatch();
   const { storedTheme } = useTheme();
-  const headers = folder.draft ? get(folder, 'draft.request.headers', []) : get(folder, 'root.request.headers', []);
+  const headers = folder.draft
+    ? get(folder, 'draft.request.headers', [])
+    : get(folder, 'root.request.headers', []);
   const [isBulkEditMode, setIsBulkEditMode] = useState(false);
 
   const toggleBulkEditMode = () => {
     setIsBulkEditMode(!isBulkEditMode);
   };
 
-  const handleBulkHeadersChange = (newHeaders) => {
-    dispatch(setFolderHeaders({ collectionUid: collection.uid, folderUid: folder.uid, headers: newHeaders }));
-  };
-
-  const addHeader = () => {
-    dispatch(
-      addFolderHeader({
-        collectionUid: collection.uid,
-        folderUid: folder.uid
-      })
-    );
-  };
+  const handleHeadersChange = useCallback((updatedHeaders) => {
+    dispatch(setFolderHeaders({
+      collectionUid: collection.uid,
+      folderUid: folder.uid,
+      headers: updatedHeaders
+    }));
+  }, [dispatch, collection.uid, folder.uid]);
 
   const handleSave = () => dispatch(saveFolderRoot(collection.uid, folder.uid));
-  const handleHeaderValueChange = (e, _header, type) => {
-    const header = cloneDeep(_header);
-    switch (type) {
-      case 'name': {
-        // Strip newlines from header keys
-        header.name = e.target.value.replace(/[\r\n]/g, '');
-        break;
-      }
-      case 'value': {
-        header.value = e.target.value;
-        break;
-      }
-      case 'enabled': {
-        header.enabled = e.target.checked;
-        break;
-      }
-    }
-    dispatch(
-      updateFolderHeader({
-        header: header,
-        collectionUid: collection.uid,
-        folderUid: folder.uid
-      })
-    );
-  };
 
-  const handleRemoveHeader = (header) => {
-    dispatch(
-      deleteFolderHeader({
-        headerUid: header.uid,
-        collectionUid: collection.uid,
-        folderUid: folder.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}
+          item={folder}
+          autocomplete={MimeTypes}
+          placeholder={isLastEmptyRow ? 'Value' : ''}
+        />
+      )
+    }
+  ];
+
+  const defaultRow = {
+    name: '',
+    value: '',
+    description: ''
   };
 
   if (isBulkEditMode) {
@@ -81,7 +88,7 @@ const Headers = ({ collection, folder }) => {
         </div>
         <BulkEditor
           params={headers}
-          onChange={handleBulkHeadersChange}
+          onChange={handleHeadersChange}
           onToggle={toggleBulkEditMode}
           onSave={handleSave}
         />
@@ -94,93 +101,24 @@ const Headers = ({ collection, folder }) => {
       <div className="text-xs mb-4 text-muted">
         Request headers that will be sent with every request inside this folder.
       </div>
-      <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}
-                        item={folder}
-                        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>
+      <EditableTable
+        columns={columns}
+        rows={headers}
+        onChange={handleHeadersChange}
+        defaultRow={defaultRow}
+      />
+      <div className="flex justify-end mt-2">
         <button className="text-link select-none" onClick={toggleBulkEditMode}>
           Bulk Edit
         </button>
       </div>
-
       <div className="mt-6">
-        <button type="submit" className="submit btn btn-sm btn-secondary" onClick={handleSave}>
+        <Button type="submit" size="sm" onClick={handleSave}>
           Save
-        </button>
+        </Button>
       </div>
     </StyledWrapper>
   );
 };
+
 export default Headers;

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

@@ -7,6 +7,7 @@ import { saveFolderRoot } 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, folder }) => {
   const dispatch = useDispatch();
@@ -100,9 +101,9 @@ const Script = ({ collection, folder }) => {
       </Tabs>
 
       <div className="mt-12">
-        <button type="submit" className="submit btn btn-sm btn-secondary" onClick={handleSave}>
+        <Button type="submit" size="sm" onClick={handleSave}>
           Save
-        </button>
+        </Button>
       </div>
     </StyledWrapper>
   );

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

@@ -8,7 +8,7 @@ const StyledWrapper = styled.div`
       padding: 6px 0px;
       border: none;
       border-bottom: solid 2px transparent;
-      margin-right: 1.25rem;
+      margin-right: ${(props) => props.theme.tabs.marginRight};
       color: var(--color-tab-inactive);
       cursor: pointer;
 
@@ -22,6 +22,7 @@ const StyledWrapper = styled.div`
       }
 
       &.active {
+        font-weight: ${(props) => props.theme.tabs.active.fontWeight} !important;
         color: ${(props) => props.theme.tabs.active.color} !important;
         border-bottom: solid 2px ${(props) => props.theme.tabs.active.border} !important;
       }

packages/bruno-app/src/components/FolderSettings/Tests/index.js

@@ -6,6 +6,7 @@ import { updateFolderTests } from 'providers/ReduxStore/slices/collections';
 import { saveFolderRoot } from 'providers/ReduxStore/slices/collections/actions';
 import { useTheme } from 'providers/Theme';
 import StyledWrapper from './StyledWrapper';
+import Button from 'ui/Button';
 
 const Tests = ({ collection, folder }) => {
   const dispatch = useDispatch();
@@ -42,9 +43,9 @@ const Tests = ({ collection, folder }) => {
       />
 
       <div className="mt-6">
-        <button type="submit" className="submit btn btn-sm btn-secondary" onClick={handleSave}>
+        <Button type="submit" size="sm" onClick={handleSave}>
           Save
-        </button>
+        </Button>
       </div>
     </StyledWrapper>
   );

packages/bruno-app/src/components/FolderSettings/Vars/VarsTable/index.js

@@ -1,160 +1,87 @@
-import React from 'react';
-import cloneDeep from 'lodash/cloneDeep';
-import { IconTrash } from '@tabler/icons';
+import React, { useCallback } from 'react';
 import { useDispatch } from 'react-redux';
 import { useTheme } from 'providers/Theme';
 import { saveFolderRoot } from 'providers/ReduxStore/slices/collections/actions';
 import MultiLineEditor from 'components/MultiLineEditor';
 import InfoTip from 'components/InfoTip';
+import EditableTable from 'components/EditableTable';
 import StyledWrapper from './StyledWrapper';
 import toast from 'react-hot-toast';
 import { variableNameRegex } from 'utils/common/regex';
-import { addFolderVar, deleteFolderVar, updateFolderVar } from 'providers/ReduxStore/slices/collections/index';
+import { setFolderVars } from 'providers/ReduxStore/slices/collections/index';
 
 const VarsTable = ({ folder, collection, vars, varType }) => {
   const dispatch = useDispatch();
   const { storedTheme } = useTheme();
 
-  const addVar = () => {
-    dispatch(
-      addFolderVar({
-        collectionUid: collection.uid,
-        folderUid: folder.uid,
-        type: varType
-      })
-    );
-  };
-
   const onSave = () => dispatch(saveFolderRoot(collection.uid, folder.uid));
-  const handleVarChange = (e, v, type) => {
-    const _var = cloneDeep(v);
-    switch (type) {
-      case 'name': {
-        const value = e.target.value;
 
-        if (variableNameRegex.test(value) === false) {
-          toast.error(
-            'Variable contains invalid characters! Variables must only contain alpha-numeric characters, "-", "_", "."'
-          );
-          return;
-        }
+  const handleVarsChange = useCallback((updatedVars) => {
+    dispatch(setFolderVars({
+      collectionUid: collection.uid,
+      folderUid: folder.uid,
+      vars: updatedVars,
+      type: varType
+    }));
+  }, [dispatch, collection.uid, folder.uid, varType]);
 
-        _var.name = value;
-        break;
-      }
-      case 'value': {
-        _var.value = e.target.value;
-        break;
-      }
-      case 'enabled': {
-        _var.enabled = e.target.checked;
-        break;
-      }
+  const getRowError = useCallback((row, index, key) => {
+    if (key !== 'name') return null;
+    if (!row.name || row.name.trim() === '') return null;
+    if (!variableNameRegex.test(row.name)) {
+      return 'Variable contains invalid characters. Must only contain alphanumeric characters, "-", "_", "."';
     }
-    dispatch(
-      updateFolderVar({
-        type: varType,
-        var: _var,
-        folderUid: folder.uid,
-        collectionUid: collection.uid
-      })
-    );
-  };
+    return null;
+  }, []);
 
-  const handleRemoveVar = (_var) => {
-    dispatch(
-      deleteFolderVar({
-        type: varType,
-        varUid: _var.uid,
-        folderUid: folder.uid,
-        collectionUid: collection.uid
-      })
-    );
+  const columns = [
+    {
+      key: 'name',
+      name: 'Name',
+      isKeyField: true,
+      placeholder: 'Name',
+      width: '40%'
+    },
+    {
+      key: 'value',
+      name: varType === 'request' ? 'Value' : (
+        <div className="flex items-center">
+          <span>Expr</span>
+          <InfoTip content="You can write any valid JS expression here" infotipId={`folder-${varType}-var`} />
+        </div>
+      ),
+      placeholder: varType === 'request' ? 'Value' : 'Expr',
+      render: ({ row, value, onChange, isLastEmptyRow }) => (
+        <MultiLineEditor
+          value={value || ''}
+          theme={storedTheme}
+          onSave={onSave}
+          onChange={onChange}
+          collection={collection}
+          item={folder}
+          placeholder={isLastEmptyRow ? (varType === 'request' ? 'Value' : 'Expr') : ''}
+        />
+      )
+    }
+  ];
+
+  const defaultRow = {
+    name: '',
+    value: '',
+    ...(varType === 'response' ? { local: false } : {})
   };
 
   return (
     <StyledWrapper className="w-full">
-      <table>
-        <thead>
-          <tr>
-            <td>Name</td>
-            {varType === 'request' ? (
-              <td>
-                <div className="flex items-center">
-                  <span>Value</span>
-                </div>
-              </td>
-            ) : (
-              <td>
-                <div className="flex items-center">
-                  <span>Expr</span>
-                  <InfoTip content="You can write any valid JS expression here" infotipId="response-var" />
-                </div>
-              </td>
-            )}
-            <td></td>
-          </tr>
-        </thead>
-        <tbody>
-          {vars && vars.length
-            ? vars.map((_var) => {
-                return (
-                  <tr key={_var.uid}>
-                    <td>
-                      <input
-                        type="text"
-                        autoComplete="off"
-                        autoCorrect="off"
-                        autoCapitalize="off"
-                        spellCheck="false"
-                        value={_var.name}
-                        className="mousetrap"
-                        onChange={(e) => handleVarChange(e, _var, 'name')}
-                      />
-                    </td>
-                    <td>
-                      <MultiLineEditor
-                        value={_var.value}
-                        theme={storedTheme}
-                        onSave={onSave}
-                        onChange={(newValue) =>
-                          handleVarChange(
-                            {
-                              target: {
-                                value: newValue
-                              }
-                            },
-                            _var,
-                            'value'
-                          )}
-                        collection={collection}
-                        item={folder}
-                      />
-                    </td>
-                    <td>
-                      <div className="flex items-center">
-                        <input
-                          type="checkbox"
-                          checked={_var.enabled}
-                          tabIndex="-1"
-                          className="mr-3 mousetrap"
-                          onChange={(e) => handleVarChange(e, _var, 'enabled')}
-                        />
-                        <button tabIndex="-1" onClick={() => handleRemoveVar(_var)}>
-                          <IconTrash strokeWidth={1.5} size={20} />
-                        </button>
-                      </div>
-                    </td>
-                  </tr>
-                );
-              })
-            : null}
-        </tbody>
-      </table>
-      <button className="btn-add-var text-link pr-2 py-3 mt-2 select-none" onClick={addVar}>
-        + Add
-      </button>
+      <EditableTable
+        columns={columns}
+        rows={vars}
+        onChange={handleVarsChange}
+        defaultRow={defaultRow}
+        getRowError={getRowError}
+      />
     </StyledWrapper>
   );
 };
+
 export default VarsTable;

packages/bruno-app/src/components/FolderSettings/Vars/index.js

@@ -4,21 +4,28 @@ import VarsTable from './VarsTable';
 import StyledWrapper from './StyledWrapper';
 import { saveFolderRoot } from 'providers/ReduxStore/slices/collections/actions';
 import { useDispatch } from 'react-redux';
+import Button from 'ui/Button';
 
 const Vars = ({ collection, folder }) => {
   const dispatch = useDispatch();
   const requestVars = folder.draft ? get(folder, 'draft.request.vars.req', []) : get(folder, 'root.request.vars.req', []);
+  const responseVars = folder.draft ? get(folder, 'draft.request.vars.res', []) : get(folder, 'root.request.vars.res', []);
   const handleSave = () => dispatch(saveFolderRoot(collection.uid, folder.uid));
 
   return (
     <StyledWrapper className="w-full flex flex-col">
       <div className="flex-1 mt-2">
+        <div className="mb-3 title text-xs">Pre Request</div>
         <VarsTable folder={folder} collection={collection} vars={requestVars} varType="request" />
       </div>
+      <div className="flex-1">
+        <div className="mt-3 mb-3 title text-xs">Post Response</div>
+        <VarsTable folder={folder} collection={collection} vars={responseVars} varType="response" />
+      </div>
       <div className="mt-6">
-        <button type="submit" className="submit btn btn-sm btn-secondary" onClick={handleSave}>
+        <Button type="submit" size="sm" onClick={handleSave}>
           Save
-        </button>
+        </Button>
       </div>
     </StyledWrapper>
   );

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

@@ -28,7 +28,8 @@ const FolderSettings = ({ collection, folder }) => {
   const activeHeadersCount = headers.filter((header) => header.enabled).length;
 
   const requestVars = folderRoot?.request?.vars?.req || [];
-  const activeVarsCount = requestVars.filter((v) => v.enabled).length;
+  const responseVars = folderRoot?.request?.vars?.res || [];
+  const activeVarsCount = requestVars.filter((v) => v.enabled).length + responseVars.filter((v) => v.enabled).length;
 
   const auth = get(folderRoot, 'request.auth.mode');
   const hasAuth = auth && auth !== 'none';

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

@@ -1,78 +0,0 @@
-import Modal from 'components/Modal/index';
-import Portal from 'components/Portal/index';
-import { useFormik } from 'formik';
-import { copyGlobalEnvironment } from 'providers/ReduxStore/slices/global-environments';
-import { useEffect, useRef } from 'react';
-import toast from 'react-hot-toast';
-import { useDispatch } from 'react-redux';
-import * as Yup from 'yup';
-
-const CopyEnvironment = ({ environment, onClose }) => {
-  const dispatch = useDispatch();
-  const inputRef = useRef();
-  const formik = useFormik({
-    enableReinitialize: true,
-    initialValues: {
-      name: environment.name + ' - Copy'
-    },
-    validationSchema: Yup.object({
-      name: Yup.string()
-        .min(1, 'must be at least 1 character')
-        .max(50, 'must be 50 characters or less')
-        .required('name is required')
-    }),
-    onSubmit: (values) => {
-      dispatch(copyGlobalEnvironment({ name: values.name, environmentUid: environment.uid }))
-        .then(() => {
-          toast.success('Global environment created!');
-          onClose();
-        })
-        .catch((error) => {
-          toast.error('An error occurred while created the environment');
-          console.error(error);
-        });
-    }
-  });
-
-  useEffect(() => {
-    if (inputRef && inputRef.current) {
-      inputRef.current.focus();
-    }
-  }, [inputRef]);
-
-  const onSubmit = () => {
-    formik.handleSubmit();
-  };
-
-  return (
-    <Portal>
-      <Modal size="sm" title="Copy Global Environment" confirmText="Copy" handleConfirm={onSubmit} handleCancel={onClose}>
-        <form className="bruno-form" onSubmit={(e) => e.preventDefault()}>
-          <div>
-            <label htmlFor="name" className="block font-medium">
-              New Environment Name
-            </label>
-            <input
-              id="environment-name"
-              type="text"
-              name="name"
-              ref={inputRef}
-              className="block textbox mt-2 w-full"
-              autoComplete="off"
-              autoCorrect="off"
-              autoCapitalize="off"
-              spellCheck="false"
-              onChange={formik.handleChange}
-              value={formik.values.name || ''}
-            />
-            {formik.touched.name && formik.errors.name ? (
-              <div className="text-red-500">{formik.errors.name}</div>
-            ) : null}
-          </div>
-        </form>
-      </Modal>
-    </Portal>
-  );
-};
-
-export default CopyEnvironment;

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

@@ -1,100 +0,0 @@
-import React, { useEffect, useRef } from 'react';
-import toast from 'react-hot-toast';
-import { useFormik } from 'formik';
-import * as Yup from 'yup';
-import { useDispatch, useSelector } from 'react-redux';
-import Portal from 'components/Portal';
-import Modal from 'components/Modal';
-import { addGlobalEnvironment } from 'providers/ReduxStore/slices/global-environments';
-import { validateName, validateNameError } from 'utils/common/regex';
-
-const CreateEnvironment = ({ onClose, onEnvironmentCreated }) => {
-  const globalEnvs = useSelector((state) => state?.globalEnvironments?.globalEnvironments);
-
-  const validateEnvironmentName = (name) => {
-    const trimmedName = name?.toLowerCase().trim();
-    return globalEnvs.every((env) => env?.name?.toLowerCase().trim() !== trimmedName);
-  };
-
-  const dispatch = useDispatch();
-  const inputRef = useRef();
-  const formik = useFormik({
-    enableReinitialize: true,
-    initialValues: {
-      name: ''
-    },
-    validationSchema: Yup.object({
-      name: Yup.string()
-        .min(1, 'Must be at least 1 character')
-        .max(255, 'Must be 255 characters or less')
-        .test('is-valid-filename', function (value) {
-          const isValid = validateName(value);
-          return isValid ? true : this.createError({ message: validateNameError(value) });
-        })
-        .required('Name is required')
-        .test('duplicate-name', 'Global Environment already exists', validateEnvironmentName)
-    }),
-    onSubmit: (values) => {
-      dispatch(addGlobalEnvironment({ name: values.name }))
-        .then(() => {
-          toast.success('Global environment created!');
-          onClose();
-          // Call the callback if provided
-          if (onEnvironmentCreated) {
-            onEnvironmentCreated();
-          }
-        })
-        .catch(() => toast.error('An error occurred while creating the environment'));
-    }
-  });
-
-  useEffect(() => {
-    if (inputRef && inputRef.current) {
-      inputRef.current.focus();
-    }
-  }, [inputRef]);
-
-  const onSubmit = () => {
-    formik.handleSubmit();
-  };
-
-  return (
-    <Portal>
-      <Modal
-        size="sm"
-        title="Create Global Environment"
-        confirmText="Create"
-        handleConfirm={onSubmit}
-        handleCancel={onClose}
-      >
-        <form className="bruno-form" onSubmit={(e) => e.preventDefault()}>
-          <div>
-            <label htmlFor="name" className="block font-medium">
-              Environment Name
-            </label>
-            <div className="flex items-center mt-2">
-              <input
-                id="environment-name"
-                type="text"
-                name="name"
-                ref={inputRef}
-                className="block textbox w-full"
-                autoComplete="off"
-                autoCorrect="off"
-                autoCapitalize="off"
-                spellCheck="false"
-                onChange={formik.handleChange}
-                value={formik.values.name || ''}
-              />
-            </div>
-            {formik.touched.name && formik.errors.name ? (
-              <div className="text-red-500">{formik.errors.name}</div>
-            ) : null}
-          </div>
-        </form>
-      </Modal>
-    </Portal>
-  );
-};
-
-export default CreateEnvironment;

packages/bruno-app/src/components/GlobalEnvironments/EnvironmentSettings/DeleteEnvironment/StyledWrapper.js

@@ -1,15 +0,0 @@
-import styled from 'styled-components';
-
-const Wrapper = styled.div`
-  button.submit {
-    color: white;
-    background-color: var(--color-background-danger) !important;
-    border: inherit !important;
-
-    &:hover {
-      border: inherit !important;
-    }
-  }
-`;
-
-export default Wrapper;

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

@@ -1,37 +0,0 @@
-import React from 'react';
-import Portal from 'components/Portal/index';
-import toast from 'react-hot-toast';
-import Modal from 'components/Modal/index';
-import { useDispatch } from 'react-redux';
-import StyledWrapper from './StyledWrapper';
-import { deleteGlobalEnvironment } from 'providers/ReduxStore/slices/global-environments';
-
-const DeleteEnvironment = ({ onClose, environment }) => {
-  const dispatch = useDispatch();
-  const onConfirm = () => {
-    dispatch(deleteGlobalEnvironment({ environmentUid: environment.uid }))
-      .then(() => {
-        toast.success('Global Environment deleted successfully');
-        onClose();
-      })
-      .catch(() => toast.error('An error occurred while deleting the environment'));
-  };
-
-  return (
-    <Portal>
-      <StyledWrapper>
-        <Modal
-          size="sm"
-          title="Delete Global Environment"
-          confirmText="Delete"
-          handleConfirm={onConfirm}
-          handleCancel={onClose}
-        >
-          Are you sure you want to delete <span className="font-medium">{environment.name}</span> ?
-        </Modal>
-      </StyledWrapper>
-    </Portal>
-  );
-};
-
-export default DeleteEnvironment;

packages/bruno-app/src/components/GlobalEnvironments/EnvironmentSettings/EnvironmentList/ConfirmSwitchEnv.js

@@ -1,42 +0,0 @@
-import React from 'react';
-import { IconAlertTriangle } from '@tabler/icons';
-import Modal from 'components/Modal';
-import { createPortal } from 'react-dom';
-
-const ConfirmSwitchEnv = ({ onCancel }) => {
-  return createPortal(
-    <Modal
-      size="md"
-      title="Unsaved changes"
-      confirmText="Save and Close"
-      cancelText="Close without saving"
-      disableEscapeKey={true}
-      disableCloseOnOutsideClick={true}
-      closeModalFadeTimeout={150}
-      handleCancel={onCancel}
-      onClick={(e) => {
-        e.stopPropagation();
-        e.preventDefault();
-      }}
-      hideFooter={true}
-    >
-      <div className="flex items-center font-normal">
-        <IconAlertTriangle size={32} strokeWidth={1.5} className="text-yellow-600" />
-        <h1 className="ml-2 text-lg font-medium">Hold on..</h1>
-      </div>
-      <div className="font-normal mt-4">You have unsaved changes in this environment.</div>
-
-      <div className="flex justify-between mt-6">
-        <div>
-          <button className="btn btn-sm btn-danger" onClick={onCancel}>
-            Close
-          </button>
-        </div>
-        <div></div>
-      </div>
-    </Modal>,
-    document.body
-  );
-};
-
-export default ConfirmSwitchEnv;

packages/bruno-app/src/components/GlobalEnvironments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/StyledWrapper.js

@@ -1,66 +0,0 @@
-import styled from 'styled-components';
-
-const Wrapper = styled.div`
-  table {
-    width: 100%;
-    border-collapse: collapse;
-    font-weight: 500;
-    table-layout: fixed;
-
-    thead,
-    td {
-      border: 1px solid ${(props) => props.theme.collection.environment.settings.gridBorder};
-      padding: 4px 10px;
-
-      &:nth-child(1),
-      &:nth-child(4) {
-        width: 70px;
-      }
-      &:nth-child(5) {
-        width: 40px;
-      }
-
-      &:nth-child(2) {
-        width: 25%;
-      }
-    }
-
-    thead {
-      color: ${(props) => props.theme.table.thead.color};
-      font-size: ${(props) => props.theme.font.size.base};
-      user-select: none;
-    }
-    thead td {
-      padding: 6px 10px;
-    }
-  }
-
-  .btn-add-param {
-    font-size: ${(props) => props.theme.font.size.base};
-  }
-
-  .tooltip-mod {
-    font-size: ${(props) => props.theme.font.size.xs} !important;
-    width: 150px !important;
-  }
-
-  input[type='text'] {
-    width: 100%;
-    border: solid 1px transparent;
-    outline: none !important;
-    background-color: transparent;
-
-    &:focus {
-      outline: none !important;
-      border: solid 1px transparent;
-    }
-  }
-
-  input[type='checkbox'] {
-    cursor: pointer;
-    position: relative;
-    top: 1px;
-  }
-`;
-
-export default Wrapper;

packages/bruno-app/src/components/GlobalEnvironments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/index.js

@@ -1,224 +0,0 @@
-import React, { useRef, useEffect } from 'react';
-import cloneDeep from 'lodash/cloneDeep';
-import { IconTrash, IconAlertCircle, IconInfoCircle } from '@tabler/icons';
-import { useTheme } from 'providers/Theme';
-import { useDispatch, useSelector } from 'react-redux';
-import MultiLineEditor from 'components/MultiLineEditor/index';
-import StyledWrapper from './StyledWrapper';
-import { uuid } from 'utils/common';
-import { useFormik } from 'formik';
-import * as Yup from 'yup';
-import { variableNameRegex } from 'utils/common/regex';
-import toast from 'react-hot-toast';
-import { saveGlobalEnvironment } from 'providers/ReduxStore/slices/global-environments';
-import { Tooltip } from 'react-tooltip';
-import { getGlobalEnvironmentVariables } from 'utils/collections';
-
-const EnvironmentVariables = ({ environment, setIsModified, originalEnvironmentVariables, collection }) => {
-  const dispatch = useDispatch();
-  const { storedTheme } = useTheme();
-  const addButtonRef = useRef(null);
-  const { globalEnvironments, activeGlobalEnvironmentUid } = useSelector((state) => state.globalEnvironments);
-
-  let _collection = cloneDeep(collection);
-
-  const globalEnvironmentVariables = getGlobalEnvironmentVariables({ globalEnvironments, activeGlobalEnvironmentUid });
-  _collection.globalEnvironmentVariables = globalEnvironmentVariables;
-
-  const formik = useFormik({
-    enableReinitialize: true,
-    initialValues: environment.variables || [],
-    validationSchema: Yup.array().of(
-      Yup.object({
-        enabled: Yup.boolean(),
-        name: Yup.string()
-          .required('Name cannot be empty')
-          .matches(
-            variableNameRegex,
-            'Name contains invalid characters. Must only contain alphanumeric characters, "-", "_", "." and cannot start with a digit.'
-          )
-          .trim(),
-        secret: Yup.boolean(),
-        type: Yup.string(),
-        uid: Yup.string(),
-        value: Yup.mixed().nullable()
-      })
-    ),
-    onSubmit: (values) => {
-      if (!formik.dirty) {
-        toast.error('Nothing to save');
-        return;
-      }
-
-      dispatch(saveGlobalEnvironment({ environmentUid: environment.uid, variables: cloneDeep(values) }))
-        .then(() => {
-          toast.success('Changes saved successfully');
-          formik.resetForm({ values });
-          setIsModified(false);
-        })
-        .catch((error) => {
-          console.error(error);
-          toast.error('An error occurred while saving the changes');
-        });
-    }
-  });
-
-  // Effect to track modifications.
-  React.useEffect(() => {
-    setIsModified(formik.dirty);
-  }, [formik.dirty]);
-
-  const ErrorMessage = ({ name }) => {
-    const meta = formik.getFieldMeta(name);
-    const id = uuid();
-    if (!meta.error || !meta.touched) {
-      return null;
-    }
-    return (
-      <span>
-        <IconAlertCircle id={id} className="text-red-600 cursor-pointer" size={20} />
-        <Tooltip className="tooltip-mod" anchorId={id} html={meta.error || ''} />
-      </span>
-    );
-  };
-
-  const addVariable = () => {
-    const newVariable = {
-      uid: uuid(),
-      name: '',
-      value: '',
-      type: 'text',
-      secret: false,
-      enabled: true
-    };
-    formik.setFieldValue(formik.values.length, newVariable, false);
-  };
-
-  const handleRemoveVar = (id) => {
-    formik.setValues(formik.values.filter((variable) => variable.uid !== id));
-  };
-
-  useEffect(() => {
-    if (formik.dirty) {
-      // Smooth scrolling to the changed parameter is temporarily disabled
-      // due to UX issues when editing the first row in a long list of environment variables.
-      // addButtonRef.current?.scrollIntoView({ behavior: 'smooth' });
-    }
-  }, [formik.values, formik.dirty]);
-
-  const handleReset = () => {
-    formik.resetForm({ originalEnvironmentVariables });
-  };
-
-  return (
-    <StyledWrapper className="w-full mt-6 mb-6">
-      <div className="h-[50vh] overflow-y-auto w-full">
-        <table>
-          <thead>
-            <tr>
-              <td className="text-center">Enabled</td>
-              <td>Name</td>
-              <td>Value</td>
-              <td className="text-center">Secret</td>
-              <td></td>
-            </tr>
-          </thead>
-          <tbody>
-            {formik.values.map((variable, index) => (
-              <tr key={variable.uid} data-testid={`env-var-row-${variable.name}`}>
-                <td className="text-center">
-                  <input
-                    type="checkbox"
-                    className="mousetrap"
-                    name={`${index}.enabled`}
-                    checked={variable.enabled}
-                    onChange={formik.handleChange}
-                  />
-                </td>
-                <td>
-                  <div className="flex items-center" data-testid={`env-var-name-${index}`}>
-                    <input
-                      type="text"
-                      autoComplete="off"
-                      autoCorrect="off"
-                      autoCapitalize="off"
-                      spellCheck="false"
-                      className="mousetrap"
-                      id={`${index}.name`}
-                      name={`${index}.name`}
-                      value={variable.name}
-                      onChange={formik.handleChange}
-                    />
-                    <ErrorMessage name={`${index}.name`} />
-                  </div>
-                </td>
-                <td className="flex flex-row flex-nowrap items-center">
-                  <div className="overflow-hidden grow w-full relative" data-testid={`env-var-value-${index}`}>
-                    <MultiLineEditor
-                      theme={storedTheme}
-                      collection={_collection}
-                      name={`${index}.value`}
-                      value={variable.value}
-                      isSecret={variable.secret}
-                      readOnly={typeof variable.value !== 'string'}
-                      onChange={(newValue) => formik.setFieldValue(`${index}.value`, newValue, true)}
-                      enableBrunoVarInfo={false}
-                    />
-                  </div>
-                  {typeof variable.value !== 'string' && (
-                    <span className="ml-2 flex items-center">
-                      <IconInfoCircle
-                        id={`${variable.name}-disabled-info-icon`}
-                        className="text-muted"
-                        size={16}
-                      />
-                      <Tooltip
-                        anchorId={`${variable.name}-disabled-info-icon`}
-                        content="Non-string values set via scripts are read-only and can only be updated through scripts."
-                        place="top"
-                      />
-                    </span>
-                  )}
-                </td>
-                <td className="text-center">
-                  <input
-                    type="checkbox"
-                    className="mousetrap"
-                    name={`${index}.secret`}
-                    checked={variable.secret}
-                    onChange={formik.handleChange}
-                  />
-                </td>
-                <td>
-                  <button onClick={() => handleRemoveVar(variable.uid)}>
-                    <IconTrash strokeWidth={1.5} size={20} />
-                  </button>
-                </td>
-              </tr>
-            ))}
-          </tbody>
-        </table>
-        <div>
-          <button
-            ref={addButtonRef}
-            className="btn-add-param text-link pr-2 py-3 mt-2 select-none"
-            onClick={addVariable}
-            data-testid="add-variable"
-          >
-            + Add Variable
-          </button>
-        </div>
-      </div>
-
-      <div>
-        <button type="submit" className="submit btn btn-md btn-secondary mt-2" onClick={formik.handleSubmit} data-testid="save-env">
-          Save
-        </button>
-        <button type="submit" className="ml-2 px-1 submit btn btn-md btn-secondary mt-2" onClick={handleReset} data-testid="reset-env">
-          Reset
-        </button>
-      </div>
-    </StyledWrapper>
-  );
-};
-export default EnvironmentVariables;

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

@@ -1,58 +0,0 @@
-import { IconCopy, IconDatabase, IconEdit, IconTrash } from '@tabler/icons';
-import { useState } from 'react';
-import CopyEnvironment from '../../CopyEnvironment';
-import DeleteEnvironment from '../../DeleteEnvironment';
-import RenameEnvironment from '../../RenameEnvironment';
-import EnvironmentVariables from './EnvironmentVariables';
-import ToolHint from 'components/ToolHint/index';
-
-const EnvironmentDetails = ({ environment, setIsModified, collection, allEnvironments }) => {
-  const [openEditModal, setOpenEditModal] = useState(false);
-  const [openDeleteModal, setOpenDeleteModal] = useState(false);
-  const [openCopyModal, setOpenCopyModal] = useState(false);
-
-  return (
-    <div className="px-6 flex-grow flex flex-col pt-6" style={{ maxWidth: '700px' }}>
-      {openEditModal && (
-        <RenameEnvironment onClose={() => setOpenEditModal(false)} environment={environment} />
-      )}
-      {openDeleteModal && (
-        <DeleteEnvironment
-          onClose={() => setOpenDeleteModal(false)}
-          environment={environment}
-        />
-      )}
-      {openCopyModal && (
-        <CopyEnvironment onClose={() => setOpenCopyModal(false)} environment={environment} />
-      )}
-      <div className="flex">
-        <div className="flex flex-grow items-center">
-          <IconDatabase className="cursor-pointer" size={20} strokeWidth={1.5} />
-          <span className="ml-1 font-medium break-all">{environment.name}</span>
-        </div>
-        <div className="flex gap-x-2 pl-2">
-          <ToolHint text="Edit Environment" toolhintId={`edit-${environment.uid}`}>
-            <IconEdit className="cursor-pointer" size={20} strokeWidth={1.5} onClick={() => setOpenEditModal(true)} />
-          </ToolHint>
-          <ToolHint text="Copy Environment" toolhintId={`copy-${environment.uid}`}>
-            <IconCopy className="cursor-pointer" size={20} strokeWidth={1.5} onClick={() => setOpenCopyModal(true)} />
-          </ToolHint>
-          <ToolHint text="Delete Environment" toolhintId={`delete-${environment.uid}`}>
-            <IconTrash className="cursor-pointer" size={20} strokeWidth={1.5} onClick={() => setOpenDeleteModal(true)} data-testid="delete-environment-button" />
-          </ToolHint>
-        </div>
-      </div>
-
-      <div>
-        <EnvironmentVariables
-          environment={environment}
-          setIsModified={setIsModified}
-          collection={collection}
-          allEnvironments={allEnvironments}
-        />
-      </div>
-    </div>
-  );
-};
-
-export default EnvironmentDetails;

packages/bruno-app/src/components/GlobalEnvironments/EnvironmentSettings/EnvironmentList/StyledWrapper.js

@@ -1,62 +0,0 @@
-import styled from 'styled-components';
-
-const StyledWrapper = styled.div`
-  margin-inline: -1rem;
-  margin-block: -1.5rem;
-
-  background-color: ${(props) => props.theme.collection.environment.settings.bg};
-
-  .environments-sidebar {
-    background-color: ${(props) => props.theme.collection.environment.settings.sidebar.bg};
-    border-right: solid 1px ${(props) => props.theme.collection.environment.settings.sidebar.borderRight};
-    min-height: 400px;
-    height: 100%;
-    max-height: 85vh;
-    overflow-y: auto;
-  }
-
-  .environment-item {
-    min-width: 150px;
-    display: block;
-    position: relative;
-    cursor: pointer;
-    padding: 8px 10px;
-    border-left: solid 2px transparent;
-    text-decoration: none;
-    max-width: 200px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-
-    &:hover {
-      text-decoration: none;
-      background-color: ${(props) => props.theme.collection.environment.settings.item.hoverBg};
-    }
-  }
-
-  .active {
-    background-color: ${(props) => props.theme.collection.environment.settings.item.active.bg} !important;
-    border-left: solid 2px ${(props) => props.theme.collection.environment.settings.item.border};
-    &:hover {
-      background-color: ${(props) => props.theme.collection.environment.settings.item.active.hoverBg} !important;
-    }
-  }
-
-  .btn-create-environment,
-  .btn-import-environment {
-    padding: 8px 10px;
-    cursor: pointer;
-    border-bottom: none;
-    color: ${(props) => props.theme.textLink};
-
-    span:hover {
-      text-decoration: underline;
-    }
-  }
-
-  .btn-import-environment {
-    color: ${(props) => props.theme.colors.text.muted};
-  }
-`;
-
-export default StyledWrapper;

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

@@ -1,163 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import usePrevious from 'hooks/usePrevious';
-import EnvironmentDetails from './EnvironmentDetails';
-import CreateEnvironment from '../CreateEnvironment';
-import { IconDownload, IconShieldLock, IconUpload } from '@tabler/icons';
-import StyledWrapper from './StyledWrapper';
-import ConfirmSwitchEnv from './ConfirmSwitchEnv';
-import ManageSecrets from 'components/Environments/EnvironmentSettings/ManageSecrets/index';
-import ImportEnvironmentModal from 'components/Environments/Common/ImportEnvironmentModal';
-import { isEqual } from 'lodash';
-import ToolHint from 'components/ToolHint/index';
-
-const EnvironmentList = ({ environments, activeEnvironmentUid, selectedEnvironment, setSelectedEnvironment, isModified, setIsModified, collection, setShowExportModal }) => {
-  const [openCreateModal, setOpenCreateModal] = useState(false);
-  const [openImportModal, setOpenImportModal] = useState(false);
-  const [openManageSecretsModal, setOpenManageSecretsModal] = useState(false);
-
-  const [switchEnvConfirmClose, setSwitchEnvConfirmClose] = useState(false);
-  const [originalEnvironmentVariables, setOriginalEnvironmentVariables] = useState([]);
-
-  const envUids = environments ? environments.map((env) => env.uid) : [];
-  const prevEnvUids = usePrevious(envUids);
-
-  useEffect(() => {
-    if (!environments?.length) {
-      setSelectedEnvironment(null);
-      setOriginalEnvironmentVariables([]);
-      return;
-    }
-
-    if (selectedEnvironment) {
-      const _selectedEnvironment = environments?.find((env) => env?.uid === selectedEnvironment?.uid);
-      const hasSelectedEnvironmentChanged = !isEqual(selectedEnvironment, _selectedEnvironment);
-      if (hasSelectedEnvironmentChanged) {
-        setSelectedEnvironment(_selectedEnvironment);
-      }
-      setOriginalEnvironmentVariables(selectedEnvironment.variables);
-      return;
-    }
-
-    const environment = environments?.find((env) => env.uid === activeEnvironmentUid) || environments?.[0] || null;
-
-    setSelectedEnvironment(environment);
-    setOriginalEnvironmentVariables(environment?.variables || []);
-  }, [environments, activeEnvironmentUid]);
-
-  useEffect(() => {
-    if (prevEnvUids && prevEnvUids.length && envUids.length > prevEnvUids.length) {
-      const newEnv = environments.find((env) => !prevEnvUids.includes(env.uid));
-      if (newEnv) {
-        setSelectedEnvironment(newEnv);
-      }
-    }
-
-    if (prevEnvUids && prevEnvUids.length && envUids.length < prevEnvUids.length) {
-      setSelectedEnvironment(environments && environments.length ? environments[0] : null);
-    }
-  }, [envUids, environments, prevEnvUids]);
-
-  const handleEnvironmentClick = (env) => {
-    if (!isModified) {
-      setSelectedEnvironment(env);
-    } else {
-      setSwitchEnvConfirmClose(true);
-    }
-  };
-
-  if (!selectedEnvironment) {
-    return null;
-  }
-
-  const handleCreateEnvClick = () => {
-    if (!isModified) {
-      setOpenCreateModal(true);
-    } else {
-      setSwitchEnvConfirmClose(true);
-    }
-  };
-
-  const handleImportClick = () => {
-    if (!isModified) {
-      setOpenImportModal(true);
-    } else {
-      setSwitchEnvConfirmClose(true);
-    }
-  };
-
-  const handleSecretsClick = () => {
-    setOpenManageSecretsModal(true);
-  };
-
-  const handleExportClick = () => {
-    if (setShowExportModal) {
-      setShowExportModal(true);
-    }
-  };
-
-  const handleConfirmSwitch = (saveChanges) => {
-    if (!saveChanges) {
-      setSwitchEnvConfirmClose(false);
-    }
-  };
-
-  return (
-    <StyledWrapper>
-      {openCreateModal && <CreateEnvironment onClose={() => setOpenCreateModal(false)} />}
-      {openImportModal && <ImportEnvironmentModal type="global" onClose={() => setOpenImportModal(false)} />}
-      {openManageSecretsModal && <ManageSecrets onClose={() => setOpenManageSecretsModal(false)} />}
-
-      <div className="flex">
-        <div>
-          {switchEnvConfirmClose && (
-            <div className="flex items-center justify-between tab-container px-1">
-              <ConfirmSwitchEnv onCancel={() => handleConfirmSwitch(false)} />
-            </div>
-          )}
-          <div className="environments-sidebar flex flex-col">
-            {environments
-              && environments.length
-              && environments.map((env) => (
-                <ToolHint key={env.uid} text={env.name} toolhintId={env.uid} place="right">
-                  <div
-                    id={env.uid}
-                    className={selectedEnvironment.uid === env.uid ? 'environment-item active' : 'environment-item'}
-                    onClick={() => handleEnvironmentClick(env)} // Use handleEnvironmentClick to handle click
-                  >
-                    <span className="break-all">{env.name}</span>
-                  </div>
-                </ToolHint>
-              ))}
-            <div className="btn-create-environment" onClick={() => handleCreateEnvClick()}>
-              + <span>Create</span>
-            </div>
-
-            <div className="mt-auto btn-import-environment">
-              <div className="flex items-center" onClick={() => handleImportClick()}>
-                <IconDownload size={12} strokeWidth={2} />
-                <span className="label ml-1 text-xs">Import</span>
-              </div>
-              <div className="flex items-center mt-2" onClick={() => handleExportClick()}>
-                <IconUpload size={12} strokeWidth={2} />
-                <span className="label ml-1 text-xs">Export</span>
-              </div>
-              <div className="flex items-center mt-2" onClick={() => handleSecretsClick()}>
-                <IconShieldLock size={12} strokeWidth={2} />
-                <span className="label ml-1 text-xs">Managing Secrets</span>
-              </div>
-            </div>
-          </div>
-        </div>
-        <EnvironmentDetails
-          environment={selectedEnvironment}
-          setIsModified={setIsModified}
-          originalEnvironmentVariables={originalEnvironmentVariables}
-          collection={collection}
-          allEnvironments={environments}
-        />
-      </div>
-    </StyledWrapper>
-  );
-};
-
-export default EnvironmentList;

packages/bruno-app/src/components/GlobalEnvironments/EnvironmentSettings/StyledWrapper.js

@@ -1,13 +0,0 @@
-import styled from 'styled-components';
-
-const StyledWrapper = styled.div`
-  button.btn-create-environment {
-    &:hover {
-      span {
-        text-decoration: underline;
-      }
-    }
-  }
-`;
-
-export default StyledWrapper;

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

@@ -1,90 +0,0 @@
-import Modal from 'components/Modal/index';
-import React, { useState } from 'react';
-import CreateEnvironment from './CreateEnvironment';
-import EnvironmentList from './EnvironmentList';
-import StyledWrapper from './StyledWrapper';
-import { IconFileAlert } from '@tabler/icons';
-import ImportEnvironmentModal from 'components/Environments/Common/ImportEnvironmentModal';
-import ExportEnvironmentModal from 'components/Environments/Common/ExportEnvironmentModal';
-
-export const SharedButton = ({ children, className, onClick }) => {
-  return (
-    <button
-      type="button"
-      onClick={onClick}
-      className={`rounded bg-transparent px-2.5 py-2 w-fit text-xs font-medium text-zinc-900 dark:text-zinc-50 shadow-sm ring-1 ring-inset ring-zinc-300 dark:ring-zinc-500 hover:bg-gray-50 dark:hover:bg-zinc-700
-        ${className}`}
-    >
-      {children}
-    </button>
-  );
-};
-
-const DefaultTab = ({ setTab }) => {
-  return (
-    <div className="text-center items-center flex flex-col">
-      <IconFileAlert size={64} strokeWidth={1} />
-      <span className="font-medium mt-2">No Global Environments found</span>
-      <div className="flex items-center justify-center mt-6">
-        <SharedButton onClick={() => setTab('create')}>
-          <span>Create Global Environment</span>
-        </SharedButton>
-
-        <span className="mx-4">Or</span>
-
-        <SharedButton onClick={() => setTab('import')}>
-          <span>Import Environment</span>
-        </SharedButton>
-      </div>
-    </div>
-  );
-};
-
-const EnvironmentSettings = ({ globalEnvironments, collection, activeGlobalEnvironmentUid, onClose }) => {
-  const [isModified, setIsModified] = useState(false);
-  const environments = globalEnvironments;
-  const [selectedEnvironment, setSelectedEnvironment] = useState(null);
-  const [tab, setTab] = useState('default');
-  const [showExportModal, setShowExportModal] = useState(false);
-  if (!environments || !environments.length) {
-    return (
-      <StyledWrapper>
-        <Modal size="md" title="Global Environments" handleCancel={onClose} hideCancel={true} hideFooter={true}>
-          {tab === 'create' ? (
-            <CreateEnvironment onClose={() => setTab('default')} />
-          ) : tab === 'import' ? (
-            <ImportEnvironmentModal type="global" onClose={() => setTab('default')} />
-          ) : (
-            <DefaultTab setTab={setTab} />
-          )}
-        </Modal>
-      </StyledWrapper>
-    );
-  }
-
-  return (
-    <StyledWrapper>
-      <Modal size="lg" title="Global Environments" handleCancel={onClose} hideFooter={true}>
-        <EnvironmentList
-          environments={globalEnvironments}
-          activeEnvironmentUid={activeGlobalEnvironmentUid}
-          selectedEnvironment={selectedEnvironment}
-          setSelectedEnvironment={setSelectedEnvironment}
-          isModified={isModified}
-          setIsModified={setIsModified}
-          collection={collection}
-          setShowExportModal={setShowExportModal}
-        />
-      </Modal>
-      {showExportModal && (
-        <ExportEnvironmentModal
-          onClose={() => setShowExportModal(false)}
-          environments={globalEnvironments}
-          environmentType="global"
-        />
-      )}
-    </StyledWrapper>
-  );
-};
-
-export default EnvironmentSettings;

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

@@ -10,7 +10,6 @@ import {
 } from '@tabler/icons';
 import { flattenItems, isItemARequest, isItemAFolder, findParentItemInCollection } from 'utils/collections';
 import { addTab, focusTab } from 'providers/ReduxStore/slices/tabs';
-import { hideHomePage } from 'providers/ReduxStore/slices/app';
 import { toggleCollectionItem, toggleCollection } from 'providers/ReduxStore/slices/collections';
 import { mountCollection } from 'providers/ReduxStore/slices/collections/actions';
 import { getDefaultRequestPaneTab } from 'utils/collections';
@@ -246,8 +245,6 @@ const GlobalSearchModal = ({ isOpen, onClose }) => {
     expandItemPath(result);
 
     if (result.type === SEARCH_TYPES.REQUEST) {
-      dispatch(hideHomePage());
-
       const existingTab = tabs.find((tab) => tab.uid === result.item.uid);
 
       if (existingTab) {

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

@@ -1,16 +1,16 @@
 import React from 'react';
 
-const ExampleIcon = ({ color = 'white', size = 16, ...props }) => {
+const ExampleIcon = ({ color = 'currentColor', size = 16, ...props }) => {
   return (
     <svg width={size} height={size} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
       <g clipPath="url(#clip0_486_1191)">
-        <path d="M2.66699 3.33329C2.66699 3.15648 2.73723 2.98691 2.86225 2.86189C2.98728 2.73686 3.15685 2.66663 3.33366 2.66663H12.667C12.8438 2.66663 13.0134 2.73686 13.1384 2.86189C13.2634 2.98691 13.3337 3.15648 13.3337 3.33329V12.6666C13.3337 12.8434 13.2634 13.013 13.1384 13.138C13.0134 13.2631 12.8438 13.3333 12.667 13.3333H3.33366C3.15685 13.3333 2.98728 13.2631 2.86225 13.138C2.73723 13.013 2.66699 12.8434 2.66699 12.6666V3.33329Z" stroke={color} stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round" />
-        <path d="M9.33366 5.33337H6.66699V10.6667H9.33366" stroke={color} stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round" />
-        <path d="M9.33366 8H6.66699" stroke={color} stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round" />
+        <path d="M2.66699 3.33329C2.66699 3.15648 2.73723 2.98691 2.86225 2.86189C2.98728 2.73686 3.15685 2.66663 3.33366 2.66663H12.667C12.8438 2.66663 13.0134 2.73686 13.1384 2.86189C13.2634 2.98691 13.3337 3.15648 13.3337 3.33329V12.6666C13.3337 12.8434 13.2634 13.013 13.1384 13.138C13.0134 13.2631 12.8438 13.3333 12.667 13.3333H3.33366C3.15685 13.3333 2.98728 13.2631 2.86225 13.138C2.73723 13.013 2.66699 12.8434 2.66699 12.6666V3.33329Z" stroke={color} strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
+        <path d="M9.33366 5.33337H6.66699V10.6667H9.33366" stroke={color} strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
+        <path d="M9.33366 8H6.66699" stroke={color} strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
       </g>
       <defs>
         <clipPath id="clip0_486_1191">
-          <rect width={size} height={size} fill="white" />
+          <rect width={size} height={size} fill={color} />
         </clipPath>
       </defs>
     </svg>

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

@@ -0,0 +1,16 @@
+import React from 'react';
+
+const IconBottombarToggle = ({ collapsed = false, size = 16, strokeWidth = 1.5, className = '', ...rest }) => {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round" className={`icon icon-tabler icons-tabler-outline icon-tabler-layout-bottombar ${className}`} {...rest}>
+      <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+      <path d="M4 4m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z" />
+      <path d="M4 15l16 0" />
+      {!collapsed && (
+        <rect x="4.6" y="15.6" width="14.8" height="2.8" rx="0.8" fill="currentColor" />
+      )}
+    </svg>
+  );
+};
+
+export default IconBottombarToggle;

packages/bruno-app/src/components/ManageWorkspace/DeleteWorkspace/index.js

@@ -0,0 +1,55 @@
+import React, { useState } from 'react';
+import Portal from 'components/Portal/index';
+import Modal from 'components/Modal/index';
+import toast from 'react-hot-toast';
+import { useDispatch } from 'react-redux';
+import { IconFolder } from '@tabler/icons';
+import { closeWorkspaceAction } from 'providers/ReduxStore/slices/workspaces/actions';
+
+const DeleteWorkspace = ({ onClose, workspace }) => {
+  const dispatch = useDispatch();
+  const [isDeleting, setIsDeleting] = useState(false);
+
+  const onConfirm = async () => {
+    if (isDeleting) return;
+
+    try {
+      setIsDeleting(true);
+      await dispatch(closeWorkspaceAction(workspace.uid));
+      onClose();
+    } catch (error) {
+      toast.error(error?.message || 'An error occurred while removing the workspace');
+      setIsDeleting(false);
+    }
+  };
+
+  return (
+    <Portal>
+      <Modal
+        size="sm"
+        title="Remove Workspace"
+        confirmText={isDeleting ? 'Removing...' : 'Remove'}
+        handleConfirm={onConfirm}
+        handleCancel={onClose}
+        confirmDisabled={isDeleting}
+        confirmButtonColor="danger"
+      >
+        <div className="flex items-center">
+          <IconFolder size={18} strokeWidth={1.5} />
+          <span className="ml-2 mr-4 font-semibold">{workspace?.name}</span>
+        </div>
+        {workspace?.pathname && (
+          <div className="break-words text-xs mt-1">{workspace.pathname}</div>
+        )}
+        <div className="mt-4">
+          Are you sure you want to remove workspace <span className="font-semibold">{workspace?.name}</span>?
+        </div>
+        <div className="mt-4">
+          The workspace will still be available in the file system and can be re-opened later.
+        </div>
+      </Modal>
+    </Portal>
+  );
+};
+
+export default DeleteWorkspace;

packages/bruno-app/src/components/ManageWorkspace/RenameWorkspace/index.js

@@ -4,40 +4,42 @@ import Modal from 'components/Modal/index';
 import toast from 'react-hot-toast';
 import { useFormik } from 'formik';
 import * as Yup from 'yup';
-import { useDispatch } from 'react-redux';
-import { renameGlobalEnvironment } from 'providers/ReduxStore/slices/global-environments';
-import { validateName, validateNameError } from 'utils/common/regex';
+import { useDispatch, useSelector } from 'react-redux';
+import { renameWorkspaceAction } from 'providers/ReduxStore/slices/workspaces/actions';
 
-const RenameEnvironment = ({ onClose, environment }) => {
+const RenameWorkspace = ({ onClose, workspace }) => {
   const dispatch = useDispatch();
+  const { workspaces } = useSelector((state) => state.workspaces);
   const inputRef = useRef();
+
   const formik = useFormik({
     enableReinitialize: true,
     initialValues: {
-      name: environment.name
+      name: workspace.name
     },
     validationSchema: Yup.object({
       name: Yup.string()
         .min(1, 'must be at least 1 character')
-        .max(255, 'Must be 255 characters or less')
-        .test('is-valid-filename', function (value) {
-          const isValid = validateName(value);
-          return isValid ? true : this.createError({ message: validateNameError(value) });
-        })
+        .max(255, 'must be 255 characters or less')
         .required('name is required')
+        .test('unique-name', 'A workspace with this name already exists', function (value) {
+          if (!value) return true;
+          return !workspaces.some((w) =>
+            w.uid !== workspace.uid && w.name.toLowerCase() === value.toLowerCase()
+          );
+        })
     }),
     onSubmit: (values) => {
-      if (values.name === environment.name) {
+      if (values.name === workspace.name) {
+        onClose();
         return;
       }
-      dispatch(renameGlobalEnvironment({ name: values.name, environmentUid: environment.uid }))
+      dispatch(renameWorkspaceAction(workspace.uid, values.name))
         .then(() => {
-          toast.success('Environment renamed successfully');
           onClose();
         })
         .catch((error) => {
-          toast.error('An error occurred while renaming the environment');
-          console.error(error);
+          toast.error(error?.message || 'An error occurred while renaming the workspace');
         });
     }
   });
@@ -45,6 +47,7 @@ const RenameEnvironment = ({ onClose, environment }) => {
   useEffect(() => {
     if (inputRef && inputRef.current) {
       inputRef.current.focus();
+      inputRef.current.select();
     }
   }, [inputRef]);
 
@@ -56,18 +59,18 @@ const RenameEnvironment = ({ onClose, environment }) => {
     <Portal>
       <Modal
         size="sm"
-        title="Rename Environment"
+        title="Rename Workspace"
         confirmText="Rename"
         handleConfirm={onSubmit}
         handleCancel={onClose}
       >
         <form className="bruno-form" onSubmit={(e) => e.preventDefault()}>
           <div>
-            <label htmlFor="name" className="block font-medium">
-              Environment Name
+            <label htmlFor="workspace-name" className="block font-semibold">
+              Workspace Name
             </label>
             <input
-              id="environment-name"
+              id="workspace-name"
               type="text"
               name="name"
               ref={inputRef}
@@ -89,4 +92,4 @@ const RenameEnvironment = ({ onClose, environment }) => {
   );
 };
 
-export default RenameEnvironment;
+export default RenameWorkspace;

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

@@ -0,0 +1,175 @@
+import styled from 'styled-components';
+
+const StyledWrapper = styled.div`
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+
+  .manage-workspace-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 12px 16px;
+    border-bottom: 1px solid ${(props) => props.theme.workspace.border};
+  }
+
+  .header-left {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  .back-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 4px;
+    cursor: pointer;
+    color: ${(props) => props.theme.text};
+  }
+
+  .header-title {
+    font-size: 15px;
+    font-weight: 600;
+    color: ${(props) => props.theme.text};
+  }
+
+  .create-workspace-btn {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 6px 12px;
+    border-radius: ${(props) => props.theme.border.radius.base};
+    background: ${(props) => props.theme.brand};
+    color: white;
+    font-size: ${(props) => props.theme.font.size.sm};
+    font-weight: 500;
+    cursor: pointer;
+    border: none;
+  }
+
+  .workspace-list {
+    flex: 1;
+    overflow-y: auto;
+    padding: 0 16px;
+  }
+
+  .workspace-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 12px 0;
+    border-bottom: 1px solid ${(props) => props.theme.workspace.border};
+  }
+
+  .workspace-info {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    flex: 1;
+    min-width: 0;
+  }
+
+  .workspace-name-row {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+  }
+
+  .workspace-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+
+    &.default {
+      color: ${(props) => props.theme.colors.text.muted};
+    }
+
+    &.regular {
+      color: ${(props) => props.theme.brand};
+    }
+  }
+
+  .workspace-name {
+    font-size: ${(props) => props.theme.font.size.md};
+    font-weight: 500;
+    color: ${(props) => props.theme.text};
+  }
+
+  .default-badge {
+    padding: 1px 6px;
+    border-radius: ${(props) => props.theme.border.radius.sm};
+    background: ${(props) => props.theme.sidebar.badge.bg};
+    color: ${(props) => props.theme.colors.text.muted};
+    font-size: ${(props) => props.theme.font.size.xs};
+    font-weight: 500;
+  }
+
+  .workspace-path {
+    font-size: ${(props) => props.theme.font.size.xs};
+    color: ${(props) => props.theme.colors.text.muted};
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .workspace-actions {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  .action-btn {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    padding: 4px 8px;
+    background: transparent;
+    border: none;
+    color: ${(props) => props.theme.text};
+    font-size: ${(props) => props.theme.font.size.xs};
+    cursor: pointer;
+  }
+
+  .more-actions-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 4px;
+    background: transparent;
+    border: none;
+    color: ${(props) => props.theme.text};
+    cursor: pointer;
+  }
+
+  .dropdown-menu {
+    min-width: 120px;
+  }
+
+  .dropdown-item {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 12px;
+    cursor: pointer;
+    color: ${(props) => props.theme.text};
+    font-size: ${(props) => props.theme.font.size.sm};
+
+    &.danger {
+      color: ${(props) => props.theme.colors.text.danger};
+    }
+  }
+
+  .empty-state {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 200px;
+    color: ${(props) => props.theme.colors.text.muted};
+    font-size: ${(props) => props.theme.font.size.sm};
+  }
+`;
+
+export default StyledWrapper;

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

@@ -0,0 +1,162 @@
+import React, { useState, useMemo } from 'react';
+import { useSelector, useDispatch } from 'react-redux';
+import { IconArrowLeft, IconPlus, IconFolder, IconLock, IconDots, IconCategory, IconLogin } from '@tabler/icons';
+import toast from 'react-hot-toast';
+
+import { showHomePage } from 'providers/ReduxStore/slices/app';
+import { switchWorkspace } from 'providers/ReduxStore/slices/workspaces/actions';
+import { showInFolder } from 'providers/ReduxStore/slices/collections/actions';
+import { sortWorkspaces } from 'utils/workspaces';
+
+import CreateWorkspace from 'components/WorkspaceSidebar/CreateWorkspace';
+import RenameWorkspace from './RenameWorkspace';
+import DeleteWorkspace from './DeleteWorkspace';
+import StyledWrapper from './StyledWrapper';
+import MenuDropdown from 'ui/MenuDropdown/index';
+import Button from 'ui/Button';
+
+const ManageWorkspace = () => {
+  const dispatch = useDispatch();
+  const { workspaces, activeWorkspaceUid } = useSelector((state) => state.workspaces);
+  const preferences = useSelector((state) => state.app.preferences);
+
+  const [createWorkspaceModalOpen, setCreateWorkspaceModalOpen] = useState(false);
+  const [renameWorkspaceModal, setRenameWorkspaceModal] = useState({ open: false, workspace: null });
+  const [deleteWorkspaceModal, setDeleteWorkspaceModal] = useState({ open: false, workspace: null });
+
+  const sortedWorkspaces = useMemo(() => {
+    return sortWorkspaces(workspaces, preferences);
+  }, [workspaces, preferences]);
+
+  const handleBack = () => {
+    dispatch(showHomePage());
+  };
+
+  const handleOpenWorkspace = (workspace) => {
+    dispatch(switchWorkspace(workspace.uid));
+    dispatch(showHomePage());
+    toast.success(`Switched to ${workspace.name}`);
+  };
+
+  const handleShowInFolder = (workspace) => {
+    if (workspace.pathname) {
+      dispatch(showInFolder(workspace.pathname)).catch(() => {
+        toast.error('Error opening the folder');
+      });
+    }
+  };
+
+  const handleRenameClick = (workspace) => {
+    setRenameWorkspaceModal({ open: true, workspace });
+  };
+
+  const handleCloseClick = (workspace) => {
+    if (workspace.type === 'default') {
+      toast.error('Cannot remove the default workspace');
+      return;
+    }
+    setDeleteWorkspaceModal({ open: true, workspace });
+  };
+
+  return (
+    <StyledWrapper>
+      {createWorkspaceModalOpen && (
+        <CreateWorkspace onClose={() => setCreateWorkspaceModalOpen(false)} />
+      )}
+
+      {renameWorkspaceModal.open && renameWorkspaceModal.workspace && (
+        <RenameWorkspace
+          workspace={renameWorkspaceModal.workspace}
+          onClose={() => setRenameWorkspaceModal({ open: false, workspace: null })}
+        />
+      )}
+
+      {deleteWorkspaceModal.open && deleteWorkspaceModal.workspace && (
+        <DeleteWorkspace
+          workspace={deleteWorkspaceModal.workspace}
+          onClose={() => setDeleteWorkspaceModal({ open: false, workspace: null })}
+        />
+      )}
+
+      <div className="manage-workspace-header">
+        <div className="header-left">
+          <div className="back-button" onClick={handleBack}>
+            <IconArrowLeft size={18} strokeWidth={1.5} />
+          </div>
+          <span className="header-title">Manage Workspace</span>
+        </div>
+        <Button size="sm" onClick={() => setCreateWorkspaceModalOpen(true)} icon={<IconPlus size={14} strokeWidth={2} />}>
+          Create Workspace
+        </Button>
+      </div>
+
+      <div className="workspace-list">
+        {sortedWorkspaces.length === 0 ? (
+          <div className="empty-state">
+            <span>No workspaces found</span>
+          </div>
+        ) : (
+          sortedWorkspaces.map((workspace) => {
+            const isDefault = workspace.type === 'default';
+            const isActive = workspace.uid === activeWorkspaceUid;
+
+            return (
+              <div key={workspace.uid} className="workspace-item">
+                <div className="workspace-info">
+                  <div className="workspace-name-row">
+                    <span className={`workspace-icon ${isDefault ? 'default' : 'regular'}`}>
+                      {isDefault ? (
+                        <IconLock size={14} strokeWidth={1.5} />
+                      ) : (
+                        <IconCategory size={14} strokeWidth={1.5} />
+                      )}
+                    </span>
+                    <span className="workspace-name">{workspace.name}</span>
+                    {isDefault && <span className="default-badge">Default</span>}
+                  </div>
+                  {workspace.pathname && (
+                    <div className="workspace-path">{workspace.pathname}</div>
+                  )}
+                </div>
+
+                <div className="workspace-actions">
+                  <button
+                    className="action-btn"
+                    onClick={() => handleOpenWorkspace(workspace)}
+                  >
+                    <IconLogin size={14} strokeWidth={1.5} />
+                    <span>Open</span>
+                  </button>
+                  {workspace.pathname && workspace.type !== 'default' && (
+                    <button
+                      className="action-btn"
+                      onClick={() => handleShowInFolder(workspace)}
+                    >
+                      <IconFolder size={14} strokeWidth={1.5} />
+                      <span>Show in folder</span>
+                    </button>
+                  )}
+                  {!isDefault && (
+                    <MenuDropdown
+                      placement="bottom-end"
+                      items={[
+                        { id: 'rename', label: 'Rename', onClick: () => handleRenameClick(workspace) },
+                        { id: 'remove', label: 'Remove', onClick: () => handleCloseClick(workspace) }
+                      ]}
+                    >
+                      <button className="more-actions-btn">
+                        <IconDots size={14} strokeWidth={1.5} />
+                      </button>
+                    </MenuDropdown>
+                  )}
+                </div>
+              </div>
+            );
+          })
+        )}
+      </div>
+    </StyledWrapper>
+  );
+};
+
+export default ManageWorkspace;

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

@@ -28,8 +28,8 @@ const Wrapper = styled.div`
   .bruno-modal-card {
     animation-duration: 0.85s;
     animation-delay: 0.1s;
-    background: var(--color-background-top);
-    border-radius: var(--border-radius);
+    background: ${(props) => props.theme.modal.body.bg};
+    border-radius: ${(props) => props.theme.border.radius.base};
     position: relative;
     z-index: 11;
     max-width: calc(100% - var(--spacing-base-unit));
@@ -68,25 +68,37 @@ const Wrapper = styled.div`
     display: flex;
     justify-content: space-between;
     align-items: center;
-    text-transform: uppercase;
     color: ${(props) => props.theme.modal.title.color};
     background-color: ${(props) => props.theme.modal.title.bg};
-    font-size: ${(props) => props.theme.font.size.sm};
-    padding: 12px;
+    font-size: ${(props) => props.theme.font.size.md};
+    padding: 0.5rem 1rem;
     font-weight: 500;
-    border-top-left-radius: 4px;
-    border-top-right-radius: 4px;
+    border-top-left-radius: ${(props) => props.theme.border.radius.base};
+    border-top-right-radius: ${(props) => props.theme.border.radius.base};
+
+    .bruno-modal-header-title {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
 
     .close {
-      font-size: 1.3rem;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 24px;
+      height: 24px;
+      margin-right: -0.5rem;
+      font-size: 1.125rem;
       line-height: 1;
-      color: ${(props) => props.theme.modal.iconColor};
-      text-shadow: 0 1px 0 #fff;
-      opacity: 0.5;
-      margin-top: -2px;
+      color: ${(props) => props.theme.modal.title.color};
+      border-radius: ${(props) => props.theme.border.radius.sm};
+      opacity: 0.7;
+      transition: opacity 0.2s ease, background-color 0.2s ease;
 
       &:hover {
-        opacity: 0.8;
+        opacity: 1;
+        background-color: ${(props) => props.theme.modal.closeButton.hoverBg};
       }
     }
   }
@@ -104,7 +116,7 @@ const Wrapper = styled.div`
       outline: none;
       box-shadow: none;
       transition: border-color ease-in-out 0.1s;
-      border-radius: 3px;
+      border-radius: ${(props) => props.theme.border.radius.sm};
       background-color: ${(props) => props.theme.modal.input.bg};
       border: 1px solid ${(props) => props.theme.modal.input.border};
 
@@ -144,14 +156,14 @@ const Wrapper = styled.div`
 
   .bruno-modal-footer {
     background-color: ${(props) => props.theme.modal.body.bg};
-    border-bottom-left-radius: 3px;
-    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: ${(props) => props.theme.border.radius.base};
+    border-bottom-right-radius: ${(props) => props.theme.border.radius.base};
   }
 
   &.modal-footer-none {
     .bruno-modal-content {
-      border-bottom-left-radius: 4px;
-      border-bottom-right-radius: 4px;
+      border-bottom-left-radius: ${(props) => props.theme.border.radius.base};
+      border-bottom-right-radius: ${(props) => props.theme.border.radius.base};
     }
   }
 `;

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

@@ -1,6 +1,7 @@
 import React, { useEffect, useState, useRef } from 'react';
 import StyledWrapper from './StyledWrapper';
 import useFocusTrap from 'hooks/useFocusTrap';
+import Button from 'ui/Button';
 
 const ESC_KEY_CODE = 27;
 const ENTER_KEY_CODE = 13;
@@ -10,7 +11,7 @@ const ModalHeader = ({ title, handleCancel, customHeader, hideClose }) => (
     {customHeader ? customHeader : <>{title ? <div className="bruno-modal-header-title">{title}</div> : null}</>}
     {handleCancel && !hideClose ? (
       // TODO: Remove data-test-id and use data-testid instead across the codebase.
-      <div className="close cursor-pointer" onClick={handleCancel ? () => handleCancel() : null} data-test-id="modal-close-button" data-testid="modal-close-button">
+      <div className="close cursor-pointer" onClick={handleCancel ? () => handleCancel() : null} data-testid="modal-close-button">
         ×
       </div>
     ) : null}
@@ -27,7 +28,7 @@ const ModalFooter = ({
   confirmDisabled,
   hideCancel,
   hideFooter,
-  confirmButtonClass = 'btn-secondary'
+  confirmButtonColor = 'primary'
 }) => {
   confirmText = confirmText || 'Save';
   cancelText = cancelText || 'Cancel';
@@ -39,19 +40,20 @@ const ModalFooter = ({
   return (
     <div className="flex justify-end p-4 bruno-modal-footer">
       <span className={hideCancel ? 'hidden' : 'mr-2'}>
-        <button type="button" onClick={handleCancel} className="btn btn-md btn-close">
+        <Button type="button" color="secondary" variant="ghost" onClick={handleCancel}>
           {cancelText}
-        </button>
+        </Button>
       </span>
       <span>
-        <button
+        <Button
           type="submit"
-          className={`submit btn btn-md ${confirmButtonClass}`}
+          color={confirmButtonColor}
           disabled={confirmDisabled}
           onClick={handleSubmit}
+          className="submit"
         >
           {confirmText}
-        </button>
+        </Button>
       </span>
     </div>
   );
@@ -75,20 +77,28 @@ const Modal = ({
   onClick,
   closeModalFadeTimeout = 500,
   dataTestId,
-  confirmButtonClass
+  confirmButtonColor = 'primary'
 }) => {
   const modalRef = useRef(null);
   const [isClosing, setIsClosing] = useState(false);
 
   const handleKeydown = (event) => {
     const { keyCode, shiftKey, ctrlKey, altKey, metaKey } = event;
+
+    // Only handle events from elements inside this modal
+    if (keyCode !== ESC_KEY_CODE && (!modalRef.current || !modalRef.current.contains(event.target))) {
+      return;
+    }
+
     switch (keyCode) {
       case ESC_KEY_CODE: {
         if (disableEscapeKey) return;
         return closeModal({ type: 'esc' });
       }
       case ENTER_KEY_CODE: {
-        if (!shiftKey && !ctrlKey && !altKey && !metaKey && handleConfirm) {
+        // Skip if a submit button is focused - let native button click handle it to avoid double-fire
+        const isSubmitButton = event.target?.type === 'submit';
+        if (!shiftKey && !ctrlKey && !altKey && !metaKey && handleConfirm && !isSubmitButton) {
           return handleConfirm();
         }
       }
@@ -141,7 +151,7 @@ const Modal = ({
           confirmDisabled={confirmDisabled}
           hideCancel={hideCancel}
           hideFooter={hideFooter}
-          confirmButtonClass={confirmButtonClass}
+          confirmButtonColor={confirmButtonColor}
         />
       </div>
 

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

@@ -154,8 +154,10 @@ class MultiLineEditor extends Component {
       this.editor.setOption('readOnly', this.props.readOnly);
     }
     if (this.props.value !== prevProps.value && this.props.value !== this.cachedValue && this.editor) {
+      const cursor = this.editor.getCursor();
       this.cachedValue = String(this.props.value);
       this.editor.setValue(String(this.props.value) || '');
+      this.editor.setCursor(cursor);
     }
     if (!isEqual(this.props.isSecret, prevProps.isSecret)) {
       // If the secret flag has changed, update the editor to reflect the change

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

@@ -1,9 +1,10 @@
-import React from 'react';
+import React, { useEffect, useCallback } from 'react';
 import { useFormik } from 'formik';
 import { useSelector, useDispatch } from 'react-redux';
 import { savePreferences } from 'providers/ReduxStore/slices/app';
 import StyledWrapper from './StyledWrapper';
 import * as Yup from 'yup';
+import debounce from 'lodash/debounce';
 import toast from 'react-hot-toast';
 import { IconFlask } from '@tabler/icons';
 import get from 'lodash/get';
@@ -56,19 +57,37 @@ const Beta = ({ close }) => {
     }
   });
 
-  const handleSave = (newBetaPreferences) => {
+  const handleSave = useCallback((newBetaPreferences) => {
     dispatch(
       savePreferences({
         ...preferences,
         beta: newBetaPreferences
       })
     )
-      .then(() => {
-        toast.success('Beta preferences saved successfully');
-        close();
-      })
       .catch((err) => console.log(err) && toast.error('Failed to update beta preferences'));
-  };
+  }, [dispatch, preferences]);
+
+  const debouncedSave = useCallback(
+    debounce((values) => {
+      betaSchema.validate(values, { abortEarly: true })
+        .then((validatedValues) => {
+          handleSave(validatedValues);
+        })
+        .catch((error) => {
+        });
+    }, 500),
+    [handleSave, betaSchema]
+  );
+
+  // Auto-save when form values change
+  useEffect(() => {
+    if (formik.dirty && formik.isValid) {
+      debouncedSave(formik.values);
+    }
+    return () => {
+      debouncedSave.cancel();
+    };
+  }, [formik.values, formik.dirty, formik.isValid, debouncedSave]);
 
   const hasAnyBetaFeatures = BETA_FEATURES.length > 0;
 
@@ -113,12 +132,6 @@ const Beta = ({ close }) => {
             <p>No beta features are currently available</p>
           </div>
         )}
-
-        <div className="mt-10">
-          <button type="submit" className="submit btn btn-sm btn-secondary">
-            Save
-          </button>
-        </div>
       </form>
     </StyledWrapper>
   );

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

@@ -1,5 +1,6 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect, useCallback, useRef } from 'react';
 import get from 'lodash/get';
+import debounce from 'lodash/debounce';
 import { useSelector, useDispatch } from 'react-redux';
 import { savePreferences } from 'providers/ReduxStore/slices/app';
 import StyledWrapper from './StyledWrapper';
@@ -8,6 +9,7 @@ import toast from 'react-hot-toast';
 const Font = ({ close }) => {
   const dispatch = useDispatch();
   const preferences = useSelector((state) => state.app.preferences);
+  const isInitialMount = useRef(true);
 
   const [codeFont, setCodeFont] = useState(get(preferences, 'font.codeFont', 'default'));
   const [codeFontSize, setCodeFontSize] = useState(get(preferences, 'font.codeFontSize', '13'));
@@ -22,22 +24,37 @@ const Font = ({ close }) => {
     setCodeFontSize(clampedSize);
   };
 
-  const handleSave = () => {
+  const handleSave = useCallback((font, fontSize) => {
     dispatch(
       savePreferences({
         ...preferences,
         font: {
-          codeFont,
-          codeFontSize
+          codeFont: font,
+          codeFontSize: fontSize
         }
       })
-    ).then(() => {
-      toast.success('Preferences saved successfully');
-      close();
-    }).catch(() => {
+    ).catch(() => {
       toast.error('Failed to save preferences');
     });
-  };
+  }, [dispatch, preferences]);
+
+  const debouncedSave = useCallback(
+    debounce((font, fontSize) => {
+      handleSave(font, fontSize);
+    }, 500),
+    [handleSave]
+  );
+
+  useEffect(() => {
+    if (isInitialMount.current) {
+      isInitialMount.current = false;
+      return;
+    }
+    debouncedSave(codeFont, codeFontSize);
+    return () => {
+      debouncedSave.cancel();
+    };
+  }, [codeFont, codeFontSize, debouncedSave]);
 
   return (
     <StyledWrapper>
@@ -68,12 +85,6 @@ const Font = ({ close }) => {
           />
         </div>
       </div>
-
-      <div className="mt-10">
-        <button type="submit" className="submit btn btn-sm btn-secondary" onClick={handleSave}>
-          Save
-        </button>
-      </div>
     </StyledWrapper>
   );
 };