packages/bruno-app/src/components/RequestTabs/index.js:47

• Assignment to variable activeTab, which is declared constant.

  const activeTab = find(tabs, (t) => t.uid === activeTabUid);

packages/bruno-app/src/components/RequestTabs/index.js:48

• Assignment to variable activeCollection, which is declared constant.

  const activeCollection = find(collections, (c) => c?.uid === activeTab?.collectionUid);

packages/bruno-app/src/components/RequestTabs/index.js:49

• Assignment to variable collectionRequestTabs, which is declared constant.

  const collectionRequestTabs = filter(tabs, (t) => t.collectionUid === activeTab?.collectionUid);

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

10-11: Import path issue and unused import.

1. Line 10: The import path ../EnvironmentDetails/EnvironmentColor references the parent then re-enters EnvironmentDetails. Since this file is inside EnvironmentDetails/, use ./EnvironmentColor instead.
2. Line 11: ToolHint is imported but never used.

♻️ Proposed fix

-import EnvironmentColor from '../EnvironmentDetails/EnvironmentColor';
-import ToolHint from 'components/ToolHint/index';
+import EnvironmentColor from './EnvironmentColor';

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

11-19: Use strict equality for color comparison.

Line 13 uses == instead of ===. While unlikely to cause issues with hex strings, strict equality is safer and more explicit.

♻️ Proposed fix

   const onColorChange = useCallback(
     (color) => {
-      if (color == environment.color) return;
+      if (color === environment.color) return;
       dispatch(saveEnvironmentColor(color, environment.uid, collectionUid))
         .then(() => toast.success('Environment color changed successfully'))
         .catch(() => toast.error('An error occurred while changing the environment color'));
     },
     [dispatch, environment.uid, environment.color, collectionUid]
   );

tests/environments/color-picker/init-user-data/preferences.json (1)

1-6: Confirm the cross-directory collection reference is intentional.

This references global-env-config-selection/collection which is outside the color-picker test directory. Same observation as collection-security.json - if this is intentional reuse of an existing collection, consider adding a comment in the test spec clarifying this dependency.

packages/bruno-electron/src/store/global-environments.js (1)

166-173: Avoid redundant store writes when no change is needed.

If the environment isn’t found or the color is already the same, you can early-return to skip an unnecessary re-save.

♻️ Suggested tweak

  updateGlobalEnvironmentColor({ environmentUid, color }) {
    let globalEnvironments = this.getGlobalEnvironments();
    const environment = globalEnvironments.find((env) => env?.uid == environmentUid);
-   if (environment) {
-     environment.color = color;
-   }
-   this.setGlobalEnvironments(globalEnvironments);
+   if (!environment || environment.color === color) {
+     return;
+   }
+   environment.color = color;
+   this.setGlobalEnvironments(globalEnvironments);
  }

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

1-5: Consider documenting why this wrapper exists if it’s intentionally empty.
A brief JSDoc (or inlining the wrapper where it’s used) would clarify intent and avoid a silent extra DOM layer.

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

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

12-12: Minor: Guard against undefined className.

If className is not provided, the template literal produces "hue-slider undefined". Consider a fallback:

-        className={`hue-slider ${className}`}
+        className={`hue-slider ${className || ''}`}

tests/environments/color-picker/color-picker.spec.ts (2)

28-58: Consider wrapping logical sections in test.step for clearer reports.

Per coding guidelines, test.step improves report readability. For example:

test('should select a preset color for global environment', async ({ pageWithUserData: page }) => {
  await test.step('Open global environment configuration', async () => {
    await page.locator('#sidebar-collection-name').filter({ hasText: 'global-env-config-selection' }).click();
    await page.getByTestId('environment-selector-trigger').click();
    await page.getByTestId('env-tab-global').click();
    await page.getByText('Configure', { exact: true }).click();
  });
  
  await test.step('Select preset color', async () => {
    // ... color picker interactions
  });
  
  await test.step('Verify color badge', async () => {
    // ... assertions
  });
});

---

42-57: Repeated locators could be extracted to helper variables or a shared utility.

colorPickerTrigger, colorPickerDropdown, envTab, and activeEnvItem are duplicated across all tests. Extracting them to a helper object or using test.beforeEach would reduce repetition and improve maintainability. As per coding guidelines: "Prefer shared test utilities over copy-pasted setup code."

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

32-162: Add JSDoc for the new helpers and the component.
Several new abstractions (e.g., rgbToHex, interpolateColor, findClosestPosition, ColorPicker) are undocumented.

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

packages/bruno-electron/src/store/global-environments.js (1)

166-173: Add JSDoc for the new public method.

✍️ Suggested JSDoc

+  /**
+   * Updates the color of a global environment.
+   * `@param` {{ environmentUid: string, color: string | null }} params
+   */
   updateGlobalEnvironmentColor({ environmentUid, color }) {
     let globalEnvironments = this.getGlobalEnvironments();
     const environment = globalEnvironments.find((env) => env?.uid == environmentUid);
     if (environment) {
       environment.color = color;
     }
     this.setGlobalEnvironments(globalEnvironments);
   }

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

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

4-22: Add JSDoc for component props/behavior.

✍️ Suggested JSDoc

+/**
+ * Renders a circular color badge.
+ * `@param` {{ color?: string, size?: number|string, showEmptyBorder?: boolean }} props
+ */
 const ColorBadge = ({ color, size = 10, showEmptyBorder = true }) => {
   const sizeValue = typeof size === 'string' ? size : `${size}px`;
   const { theme } = useTheme();

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

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

82-83: Add JSDoc for the exported ColorPicker component.

This is a public abstraction and would benefit from a brief props doc.

📚 Example JSDoc

+/**
+ * Color picker dropdown for preset and custom colors.
+ * `@param` {Object} props
+ * `@param` {string | null} props.color
+ * `@param` {(nextColor: string | null) => void} props.onChange
+ * `@param` {*} [props.icon]
+ */
 const ColorPicker = ({ color, onChange, icon }) => {

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