packages/bruno-app/src/components/Environments/EnvironmentSettings/DeleteDotEnvFile/StyledWrapper.js (1)

4-12: Use theme props instead of CSS variables for colors.

Per project standards, styled-components should use theme props for colors rather than CSS variables. The var(--color-background-danger) should be replaced with a theme-based value.

Suggested fix

 const Wrapper = styled.div`
   button.submit {
-    color: white;
-    background-color: var(--color-background-danger) !important;
+    color: ${(props) => props.theme.bg};
+    background-color: ${(props) => props.theme.colors.text.danger} !important;
     border: inherit !important;

     &:hover {
       border: inherit !important;
     }
   }
 `;

Based on learnings: "Use styled component's theme prop to manage CSS colors, not CSS variables, when in the context of a styled component."

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

115-133: Note: Duplicate .btn-action styling.

There's a .btn-action block in .sidebar-header (lines 48-66) with width: 24px; height: 24px and this root-level .btn-action with width: 22px; height: 22px. If intentional for different contexts, consider adding a comment. Otherwise, this could be consolidated.

packages/bruno-app/src/components/Environments/DotEnvFileEditor/StyledWrapper.js (1)

47-62: Consider documenting !important overrides.

Multiple !important declarations in the thead styling. If these are needed to override CodeMirror or third-party styles, a brief comment would help future maintainers understand the necessity.

packages/bruno-app/src/components/WorkspaceHome/WorkspaceEnvironments/EnvironmentList/StyledWrapper.js (1)

115-133: Duplicate .btn-action class with different sizing.

There's a .btn-action defined in .sidebar-header (24x24) at lines 48-66 and another standalone (22x22) here. If this is intentional for different contexts, consider renaming one for clarity (e.g., .btn-action-sm).

packages/bruno-app/src/components/Environments/DotEnvFileEditor/index.js (2)

211-232: ErrorMessage component recreated on every render.

This inner component is defined inside DotEnvFileEditor and recreated on each render, causing unnecessary re-renders of tooltip elements.

Move outside or memoize

Extract ErrorMessage outside the component and pass formik as a prop, or use React.memo with appropriate deps:

// Option 1: Move outside component
const ErrorMessage = ({ formik, name, index }) => {
  // ...existing logic using formik passed as prop
};

// Then in DotEnvFileEditor, pass formik:
<ErrorMessage formik={formik} name={`${index}.name`} index={index} />

---

269-283: setTimeout for deferred state update may cause race conditions.

Using setTimeout to add a new row after name change could lead to unexpected behavior if the user types quickly or if React batches updates differently.

Consider using a callback or effect

   const handleNameChange = (index, e) => {
     formik.handleChange(e);
     const isLastRow = index === formik.values.length - 1;

     if (isLastRow) {
       const newVariable = {
         uid: uuid(),
         name: '',
         value: ''
       };
-      setTimeout(() => {
-        formik.setFieldValue(formik.values.length, newVariable, false);
-      }, 0);
+      // Use setValues to append in the same update cycle
+      const updatedValues = [...formik.values];
+      updatedValues[index] = { ...updatedValues[index], name: e.target.value };
+      updatedValues.push(newVariable);
+      formik.setValues(updatedValues, false);
     }
   };

Note: This changes the flow slightly - you may need to adjust based on desired UX.

packages/bruno-electron/src/app/dotenv-watcher.js (1)

37-42: Inconsistent awaitWriteFinish settings between collection and workspace watchers.

Collection uses pollInterval: 100 while workspace uses pollInterval: 250. If intentional (e.g., workspaces update less frequently), a comment would help; otherwise, align them.

Also applies to: 126-131

packages/bruno-app/src/providers/ReduxStore/slices/workspaces/actions.js (1)

764-782: Redundant Promise wrapper and unused dispatch parameter.

ipcRenderer.invoke already returns a Promise, so the explicit new Promise() wrapper is unnecessary. Additionally, dispatch is destructured but never used. This pattern repeats in all four new action creators.

Consider refactoring to match the existing async/await pattern used elsewhere in this file (e.g., saveWorkspaceDocs):

♻️ Suggested refactor

-export const saveWorkspaceDotEnvVariables = (workspaceUid, variables, filename = '.env') => (dispatch, getState) => {
-  return new Promise((resolve, reject) => {
-    const state = getState();
-    const workspace = state.workspaces.workspaces.find((w) => w.uid === workspaceUid);
-
-    if (!workspace) {
-      return reject(new Error('Workspace not found'));
-    }
-
-    if (!workspace.pathname) {
-      return reject(new Error('Workspace path not found'));
-    }
-
-    ipcRenderer
-      .invoke('renderer:save-workspace-dotenv-variables', { workspacePath: workspace.pathname, variables, filename })
-      .then(resolve)
-      .catch(reject);
-  });
-};
+export const saveWorkspaceDotEnvVariables = (workspaceUid, variables, filename = '.env') => async (dispatch, getState) => {
+  const state = getState();
+  const workspace = state.workspaces.workspaces.find((w) => w.uid === workspaceUid);
+
+  if (!workspace) {
+    throw new Error('Workspace not found');
+  }
+
+  if (!workspace.pathname) {
+    throw new Error('Workspace path not found');
+  }
+
+  return ipcRenderer.invoke('renderer:save-workspace-dotenv-variables', { workspacePath: workspace.pathname, variables, filename });
+};

Apply the same refactor to saveWorkspaceDotEnvRaw, createWorkspaceDotEnvFile, and deleteWorkspaceDotEnvFile.

packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/DotEnvFileDetails/StyledWrapper.js (1)

1-93: Duplicate StyledWrapper exists.

This file is identical to packages/bruno-app/src/components/WorkspaceHome/WorkspaceEnvironments/EnvironmentList/DotEnvFileDetails/StyledWrapper.js. Consider extracting a shared StyledWrapper under a common location (e.g., components/Environments/Common/) to avoid maintenance burden.

packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/DotEnvFileDetails/index.js (1)

1-70: Duplicate component exists.

This component is identical to packages/bruno-app/src/components/WorkspaceHome/WorkspaceEnvironments/EnvironmentList/DotEnvFileDetails/index.js. Consider consolidating into a single shared component under components/Environments/Common/DotEnvFileDetails/ to reduce duplication.

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

6-11: Remove or use the workspace prop being passed to EnvironmentList.

The workspace prop is passed from WorkspaceEnvironments to EnvironmentList, but it's never destructured or used in the component. Either remove it from the prop chain or use it if needed.

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

85-98: Stale closure risk in click-outside handler.

The handleCancelDotEnvCreate function referenced inside the effect isn't included in the dependency array. If handleCancelDotEnvCreate changes (e.g., due to closures over other state), the effect would reference a stale version.

Consider using useCallback for handleCancelDotEnvCreate and adding it to deps, or inline the logic.

---

203-213: handleDotEnvClose is defined but never invoked.

This function appears to be dead code. If it's intended for future use, consider adding a TODO comment. Otherwise, remove it to avoid confusion.

---

438-440: Variable shadowing: error parameter shadows outer scope.

The catch block parameter error shadows the error variable from the validation check above (line 422). While this works, it can cause confusion during debugging.

Rename catch parameter

-      .catch((error) => {
-        toast.error(error.message || 'Failed to create .env file');
+      .catch((err) => {
+        toast.error(err.message || 'Failed to create .env file');
       });

---

462-467: Backspace prevention uses magic number for .env prefix length.

The check input.selectionStart <= 4 relies on knowing .env is 4 characters. Consider extracting this to a constant for clarity.

Extract constant

+const DOT_ENV_PREFIX = '.env';
+const DOT_ENV_PREFIX_LENGTH = DOT_ENV_PREFIX.length;

 const handleDotEnvNameKeyDown = (e) => {
   // ...
   } else if (e.key === 'Backspace') {
     const input = e.target;
-    if (input.selectionStart <= 4 && input.selectionEnd <= 4) {
+    if (input.selectionStart <= DOT_ENV_PREFIX_LENGTH && input.selectionEnd <= DOT_ENV_PREFIX_LENGTH) {
       e.preventDefault();
     }
   }
 };

---

488-490: Same variable shadowing issue with error in catch block.

Rename catch parameter

-      .catch((error) => {
-        toast.error(error.message || 'Failed to delete .env file');
+      .catch((err) => {
+        toast.error(err.message || 'Failed to delete .env file');
       });

packages/bruno-app/src/components/WorkspaceHome/WorkspaceEnvironments/EnvironmentList/index.js (3)

203-213: handleDotEnvClose is defined but never invoked (same as collection-level component).

This appears to be dead code in both files. Consider removing or documenting its intended use.

---

428-441: Same variable shadowing issues with error in catch blocks.

Apply the same fix as suggested for the collection-level component.

Also applies to: 470-491

---

1-788: Extract shared logic from duplicated EnvironmentList components into custom hooks and utilities.

Both EnvironmentList components (collection and workspace) are 791/788 lines with identical handler and validator function signatures. Key candidates for extraction:

1. useClickOutside hook: Three identical click-outside patterns with boilerplate event listener code can be consolidated into a reusable hook
2. useDotEnvManagement hook: Duplicated state and handlers for dotenv file operations (creation, deletion, selection, validation)
3. Environment/DotEnv validation: The validateEnvironmentName and validateDotEnvName functions are nearly identical and can be shared

Note: Extraction requires abstracting Redux action differences—collection uses collection-scoped actions while workspace uses global/workspace-scoped actions. Design the hooks to accept action creators as parameters.

packages/bruno-electron/src/utils/filesystem.js (1)

448-514: Add JSDoc to document the dotenv filename validation contract.

This helper is already solid; a brief contract note will help callers understand the allowed patterns and basename requirement.

📝 Suggested JSDoc

+/**
+ * Validates a dotenv filename (".env" or ".env.*") and rejects paths.
+ * `@param` {string} filename
+ * `@returns` {boolean}
+ */
 const isValidDotEnvFilename = (filename) => {
   if (!filename || typeof filename !== 'string') return false;
   const basename = path.basename(filename);
   if (basename !== filename) return false;
   return basename === '.env' || (basename.startsWith('.env.') && /^\.env\.[a-zA-Z0-9._-]+$/.test(basename));
 };

As per coding guidelines: Add JSDoc comments to abstractions for additional details.

packages/bruno-app/src/components/Environments/DotEnvFileEditor/index.js (1)

421-494: Code duplication between empty-state and normal table rendering.

The table rendering logic at lines 431-482 is nearly identical to lines 499-563, except the empty-state table only shows the Name column. Consider extracting a shared table component or consolidating the rendering paths.

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

50-65: Large component with many state variables.

This component manages 11+ new state variables for dotenv handling. Per coding standards, consider extracting dotenv-related state and logic into a custom hook (e.g., useDotEnvManagement) to improve maintainability and testability.

packages/bruno-app/src/components/WorkspaceHome/WorkspaceEnvironments/EnvironmentList/index.js (1)

24-34: Significant code duplication with EnvironmentSettings/EnvironmentList/index.js.

This component shares ~90% of its logic with the collection-level EnvironmentList. Consider extracting shared logic into a common component or hook that accepts configuration for the data source (collection vs. workspace) and corresponding actions.

packages/bruno-electron/src/app/dotenv-watcher.js (1)

7-18: Add JSDoc for the new abstractions.

Please add brief JSDoc for the helper utilities, handler factories, and the DotEnvWatcher class so parameter/return contracts are clear.

💡 Example JSDoc additions

+/**
+ * Creates a handler for dotenv file add/change events.
+ * `@param` {object} win
+ * `@param` {object} options
+ * `@returns` {Function}
+ */
 const createFileHandler = (win, options) => (pathname) => {

+/**
+ * Watches collection/workspace dotenv files and emits IPC updates.
+ */
 class DotEnvWatcher {

As per coding guidelines, "Add JSDoc comments to abstractions for additional details".

Also applies to: 27-90, 92-210

packages/bruno-app/src/components/WorkspaceHome/WorkspaceEnvironments/EnvironmentList/StyledWrapper.js (1)

1-346: Consider extracting shared styles to reduce duplication.

This StyledWrapper is nearly identical to packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/StyledWrapper.js. Both define the same selectors (.sections-container, .environments-list, .btn-action, .environment-item, .empty-state, etc.) with identical styles.

Consider extracting common styles into a shared module to reduce maintenance burden and ensure consistency.

packages/bruno-app/src/components/WorkspaceHome/WorkspaceEnvironments/EnvironmentList/index.js (1)

1-784: Significant duplication with EnvironmentSettings/EnvironmentList.

This component is ~90% identical to packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/index.js. The main differences are:

• Workspace-scoped vs collection-scoped Redux actions
• workspace prop vs collection prop for dotenv operations
• Global environment actions vs collection environment actions

Consider extracting shared logic into a custom hook (e.g., useDotEnvManagement) or a higher-order component to reduce duplication. As per coding guidelines: "Prefer custom hooks for business logic, data fetching, and side-effects."