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

8-8: Sidebar width increased to accommodate new layout.

The initial width bump from 222px to 250px aligns with the AppTitleBar integration. Consider extracting layout constants (like INITIAL_SIDEBAR_WIDTH) for easier future maintenance, though this is optional.

tests/collection/draft/draft-indicator.spec.ts (1)

149-149: Good switch to test-id selector.

Using getByTestId('add-client-cert') is more robust than role-based lookup when multiple "Add" buttons exist on the page.

Per coding guidelines, consider extracting to a locator variable for clarity:

const addClientCertBtn = page.getByTestId('add-client-cert');
await addClientCertBtn.click();

This is optional given it's a single use.

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

1-1: Consolidate React imports.

The useMemo import should be combined with the existing React import on line 1 for consistency.

Apply this diff:

-import React, { useState } from 'react';
+import React, { useState, useMemo } from 'react';
 import { useSelector } from 'react-redux';
 import Collection from './Collection';
 import CreateCollection from '../CreateCollection';
 import StyledWrapper from './StyledWrapper';
 import CreateOrOpenCollection from './CreateOrOpenCollection';
 import CollectionSearch from './CollectionSearch/index';
-import { useMemo } from 'react';

Also applies to: 8-8

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

30-32: Remove redundant hover state.

The scrollbar thumb hover state applies the same color as the default state, making it redundant.

Apply this diff:

     &::-webkit-scrollbar-thumb {
       background: ${(props) => props.theme.scrollbar.color};
       border-radius: 3px;
     }
-
-    &::-webkit-scrollbar-thumb:hover {
-      background: ${(props) => props.theme.scrollbar.color};
-    }
   }

packages/bruno-app/src/components/Sidebar/Collections/CollectionSearch/index.js (1)

1-29: LGTM! Clean refactor to use StyledWrapper.

The component structure aligns well with the StyledWrapper CSS classes. One minor accessibility consideration: the clear icon div at line 21 lacks keyboard accessibility (no tabIndex, role, or onKeyDown). Consider using a <button> element instead for better a11y.

-      <div className="clear-icon" onClick={() => setSearchText('')}>
-        <IconX size={14} strokeWidth={1.5} />
-      </div>
+      <button
+        type="button"
+        className="clear-icon"
+        onClick={() => setSearchText('')}
+        aria-label="Clear search"
+      >
+        <IconX size={14} strokeWidth={1.5} />
+      </button>

packages/bruno-electron/src/index.js (1)

81-82: Consider reusing isMac from utils/arch.js.

isMac is already defined in packages/bruno-electron/src/utils/arch.js (line 1). Reusing it would avoid duplication. However, isWindows is new and would need to be added to that utility if you choose to consolidate.

-const isMac = process.platform === 'darwin';
-const isWindows = process.platform === 'win32';
+const { isMac } = require('./utils/arch');
+const isWindows = process.platform === 'win32';

Alternatively, extend utils/arch.js with isWindows and import both.

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

43-44: Consider combining these selectors.

Two consecutive useSelector calls access the same state.collections slice. You can merge them into a single selector for minor optimization.

-  const { collections } = useSelector((state) => state.collections);
-  const { collectionSortOrder } = useSelector((state) => state.collections);
+  const { collections, collectionSortOrder } = useSelector((state) => state.collections);

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

56-57: Unused ref and callback - dead code.

workspaceDropdownTippyRef is assigned but never read. Either remove it or implement the intended functionality (e.g., programmatically closing the dropdown).

-  const workspaceDropdownTippyRef = useRef();
-  const onWorkspaceDropdownCreate = (ref) => (workspaceDropdownTippyRef.current = ref);

If you need programmatic control, retain and use it; otherwise, remove to reduce clutter.

---

69-76: Component defined inside parent causes unnecessary re-renders.

WorkspaceName is recreated on every render since it's defined inside AppTitleBar. This breaks React's reconciliation and can cause focus/state issues. Wrap with useMemo or extract outside the component.

-  const WorkspaceName = forwardRef((props, ref) => {
-    return (
-      <div ref={ref} className="workspace-name-container" onClick={() => setShowWorkspaceDropdown(!showWorkspaceDropdown)}>
-        <span className="workspace-name">{toTitleCase(activeWorkspace?.name) || 'Default Workspace'}</span>
-        <IconChevronDown size={14} stroke={1.5} className="chevron-icon" />
-      </div>
-    );
-  });
+  const WorkspaceName = useMemo(
+    () =>
+      forwardRef((props, ref) => (
+        <div ref={ref} className="workspace-name-container" onClick={() => setShowWorkspaceDropdown((prev) => !prev)}>
+          <span className="workspace-name">{toTitleCase(activeWorkspace?.name) || 'Default Workspace'}</span>
+          <IconChevronDown size={14} stroke={1.5} className="chevron-icon" />
+        </div>
+      )),
+    [activeWorkspace?.name]
+  );

Also add useMemo to imports on line 2.

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Learnt from: CR
Repo: usebruno/bruno PR: 0
File: CODING_STANDARDS.md:0-0
Timestamp: 2025-12-03T08:09:57.124Z
Learning: Applies to **/*.{jsx,tsx} : Styled Components should be used as wrappers to define both self and children component styles; Tailwind classes should be used specifically for layout-based styles

Learnt from: CR
Repo: usebruno/bruno PR: 0
File: CODING_STANDARDS.md:0-0
Timestamp: 2025-12-03T08:09:57.124Z
Learning: Applies to **/*.{jsx,tsx} : Styled Component CSS may change layout, but Tailwind classes should not define colors

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

24-40: Fix fullscreen IPC listener cleanup – current code leaks listeners.

ipcRenderer.on() returns the ipcRenderer instance, not an unsubscribe function, so removeEnterFullScreenListener() / removeLeaveFullScreenListener() in cleanup are no-ops and handlers will accumulate on remount.

Suggested fix:

   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();
-    };
+    const onEnterFullScreen = () => {
+      setIsFullScreen(true);
+    };
+
+    const onLeaveFullScreen = () => {
+      setIsFullScreen(false);
+    };
+
+    ipcRenderer.on('main:enter-full-screen', onEnterFullScreen);
+    ipcRenderer.on('main:leave-full-screen', onLeaveFullScreen);
+
+    return () => {
+      ipcRenderer.removeListener('main:enter-full-screen', onEnterFullScreen);
+      ipcRenderer.removeListener('main:leave-full-screen', onLeaveFullScreen);
+    };
   }, []);

packages/bruno-app/src/components/AppTitleBar/index.js (3)

60-67: Tighten toTitleCase split regex to avoid ambiguous - range.

str.split(/[\s-_]+/) uses - inside a character class in a slightly ambiguous way; more explicit is safer and clearer.

-    return str
-      .split(/[\s-_]+/)
+    return str
+      .split(/[\s_-]+/)
       .map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
       .join(' ');

---

69-76: Use functional state update when toggling dropdown visibility.

Using setShowWorkspaceDropdown(!showWorkspaceDropdown) can suffer from stale closures under rapid updates; the functional form is more robust.

-      <div ref={ref} className="workspace-name-container" onClick={() => setShowWorkspaceDropdown(!showWorkspaceDropdown)}>
+      <div
+        ref={ref}
+        className="workspace-name-container"
+        onClick={() => setShowWorkspaceDropdown((prev) => !prev)}
+      >

---

88-96: Verify openWorkspaceDialog async behavior and success/error toasts.

Right now you always await dispatch(openWorkspaceDialog()) and unconditionally show a success toast unless an exception is thrown. In many Redux setups (e.g. RTK thunks), dispatch(thunk) resolves even on failure unless you explicitly unwrap or inspect meta, so errors/cancels might still show “Workspace opened successfully”.

Consider something along these lines (depending on how openWorkspaceDialog is implemented):

const resultAction = await dispatch(openWorkspaceDialog());

if (openWorkspaceDialog.fulfilled.match(resultAction)) {
  toast.success('Workspace opened successfully');
} else if (openWorkspaceDialog.rejected.match(resultAction)) {
  const message = resultAction.error?.message || 'Failed to open workspace';
  toast.error(message);
}

Please double‑check the actual action shape and adjust accordingly.

packages/bruno-app/src/components/Sidebar/SidebarHeader/index.js (2)

39-45: Combine collection selectors into a single useSelector call.

You can destructure collections and collectionSortOrder in one useSelector to avoid duplicate subscriptions and keep the state derivation in one place.

-  // Get collection sort order
-  const { collections } = useSelector((state) => state.collections);
-  const { collectionSortOrder } = useSelector((state) => state.collections);
+  // Collections list and current sort order
+  const { collections, collectionSortOrder } = useSelector((state) => state.collections);

---

35-347: Consider adding JSDoc for SidebarHeader props and behavior.

Given this component coordinates view switching, search visibility, modals, and Electron devtools, a brief JSDoc on SidebarHeader documenting setShowSearch, activeView, and onViewChange would help future maintainers.

+/**
+ * Sidebar header for the left panel: renders the current view label/tabs,
+ * collections actions (search, add/import/open, sort, close all, devtools),
+ * and manages the related modals.
+ *
+ * @param {Object} props
+ * @param {(updater: (prev: boolean) => boolean) => void} [props.setShowSearch] Toggle for the sidebar search bar.
+ * @param {string} [props.activeView='collections'] Currently active sidebar view id.
+ * @param {(viewId: string) => void} [props.onViewChange] Callback when the active view tab changes.
+ */
 const SidebarHeader = ({ setShowSearch, activeView = 'collections', onViewChange }) => {

As per coding guidelines, this brings the abstraction in line with our JSDoc expectations.

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Learnt from: CR
Repo: usebruno/bruno PR: 0
File: CODING_STANDARDS.md:0-0
Timestamp: 2025-12-03T08:09:57.124Z
Learning: Applies to **/*.{jsx,tsx} : Styled Components should be used as wrappers to define both self and children component styles; Tailwind classes should be used specifically for layout-based styles

Learnt from: CR
Repo: usebruno/bruno PR: 0
File: CODING_STANDARDS.md:0-0
Timestamp: 2025-12-03T08:09:57.124Z
Learning: Applies to **/*.{jsx,tsx} : Styled Component CSS may change layout, but Tailwind classes should not define colors

Learnt from: CR
Repo: usebruno/bruno PR: 0
File: CODING_STANDARDS.md:0-0
Timestamp: 2025-12-03T08:09:57.123Z
Learning: Applies to **/*.{js,jsx,ts,tsx} : Space before and after the arrow in arrow functions: `() => {}`

Learnt from: CR
Repo: usebruno/bruno PR: 0
File: CODING_STANDARDS.md:0-0
Timestamp: 2025-12-03T08:09:57.123Z
Learning: Applies to **/*.{js,jsx,ts,tsx} : For multiline constructs, put opening braces on the same line with a minimum of 2 elements for multiline formatting

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

23-40: Fix ipcRenderer.on listener cleanup to prevent memory leaks

ipcRenderer.on() returns the ipcRenderer instance, not an unsubscribe function, so calling removeEnterFullScreenListener() / removeLeaveFullScreenListener() in the cleanup does nothing and listeners will accumulate on remount.

   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();
-    };
+    const handleEnterFullScreen = () => {
+      setIsFullScreen(true);
+    };
+
+    const handleLeaveFullScreen = () => {
+      setIsFullScreen(false);
+    };
+
+    ipcRenderer.on('main:enter-full-screen', handleEnterFullScreen);
+    ipcRenderer.on('main:leave-full-screen', handleLeaveFullScreen);
+
+    return () => {
+      ipcRenderer.removeListener('main:enter-full-screen', handleEnterFullScreen);
+      ipcRenderer.removeListener('main:leave-full-screen', handleLeaveFullScreen);
+    };
   }, []);

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

39-45: Merge collections selectors into a single useSelector call

You’re selecting from state.collections twice; combining them avoids duplicate subscriptions and keeps the slice snapshot consistent.

-  const { collections } = useSelector((state) => state.collections);
-  const { collectionSortOrder } = useSelector((state) => state.collections);
+  const { collections, collectionSortOrder } = useSelector((state) => state.collections);

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

59-67: Make the toTitleCase split regex explicit

/[\s-_]+/ is a bit ambiguous because of the - inside the character class. Using /[\s_-]+/ makes it clear you’re splitting on whitespace, hyphen, or underscore.

-    return str
-      .split(/[\s-_]+/)
+    return str
+      .split(/[\s_-]+/)
       .map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
       .join(' ');

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

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

25-41: Fix Electron IPC listener cleanup; current code leaks listeners and will throw on unmount.

ipcRenderer.on() returns the ipcRenderer instance, not an unsubscribe function. Calling the returned value as a function in cleanup both fails to remove listeners and is likely to throw. Use named handlers and removeListener instead.

-  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(() => {
+    const { ipcRenderer } = window;
+    if (!ipcRenderer) return;
+
+    const onEnterFullScreen = () => {
+      setIsFullScreen(true);
+    };
+
+    const onLeaveFullScreen = () => {
+      setIsFullScreen(false);
+    };
+
+    ipcRenderer.on('main:enter-full-screen', onEnterFullScreen);
+    ipcRenderer.on('main:leave-full-screen', onLeaveFullScreen);
+
+    return () => {
+      ipcRenderer.removeListener('main:enter-full-screen', onEnterFullScreen);
+      ipcRenderer.removeListener('main:leave-full-screen', onLeaveFullScreen);
+    };
+  }, []);

tests/footer/sidebar-toggle/sidebar-toggle.spec.js (2)

7-7: Prefer accessibility-based selectors over testId.

Changing from getByLabel('Toggle Sidebar') to getByTestId('toggle-sidebar-button') moves away from user-facing and accessibility-based testing. Playwright recommends getByRole, getByLabel, or getByText over getByTestId as they verify proper accessible labeling and test how users interact with the UI.

Consider reverting to a semantic selector if the button has proper accessible labeling:

-    const toggleButton = page.getByTestId('toggle-sidebar-button');
+    const toggleButton = page.getByRole('button', { name: 'Toggle Sidebar' });

Or verify the button's accessibility attributes in the implementation to confirm which selector is appropriate.

---

3-36: Optional: Consider using test.step for better reporting.

While not required for this straightforward test, wrapping logical sections in test.step would improve readability in generated reports, as recommended in the coding guidelines.

Example refactor:

test('should toggle sidebar visibility when clicking the toggle button', async ({ page }) => {
  await test.step('Verify initial sidebar visibility', async () => {
    const sidebar = page.locator('aside.sidebar');
    const dragHandle = page.locator('.sidebar-drag-handle');
    await expect(sidebar).toBeVisible();
    await expect(dragHandle).toBeVisible();
  });

  await test.step('Hide sidebar', async () => {
    const toggleButton = page.getByTestId('toggle-sidebar-button');
    const sidebar = page.locator('aside.sidebar');
    const dragHandle = page.locator('.sidebar-drag-handle');
    await toggleButton.click();
    await expect(sidebar).not.toBeVisible();
    await expect(dragHandle).not.toBeVisible();
    const sidebarBox = await sidebar.boundingBox();
    expect(sidebarBox?.width).toBe(0);
  });

  await test.step('Show sidebar again', async () => {
    const toggleButton = page.getByTestId('toggle-sidebar-button');
    const sidebar = page.locator('aside.sidebar');
    const dragHandle = page.locator('.sidebar-drag-handle');
    await toggleButton.click();
    await expect(sidebar).toBeVisible();
    await expect(dragHandle).toBeVisible();
    const expandedSidebarBox = await sidebar.boundingBox();
    expect(expandedSidebarBox?.width).toBeGreaterThan(0);
  });
});

packages/bruno-app/src/components/AppTitleBar/index.js (4)

55-59: Drop unused Tippy ref for workspace dropdown unless you actually need it.

workspaceDropdownTippyRef and onWorkspaceDropdownCreate are assigned but never read, so they add noise without behavior. Either wire them up or remove them (and the onCreate prop).

   const [createWorkspaceModalOpen, setCreateWorkspaceModalOpen] = useState(false);
   const [showWorkspaceDropdown, setShowWorkspaceDropdown] = useState(false);
-  const workspaceDropdownTippyRef = useRef();
-  const onWorkspaceDropdownCreate = (ref) => (workspaceDropdownTippyRef.current = ref);

And in the dropdown JSX:

-          <Dropdown
-            onCreate={onWorkspaceDropdownCreate}
-            icon={<WorkspaceName />}
+          <Dropdown
+            icon={<WorkspaceName />}
             placement="bottom-start"
             style="new"
             visible={showWorkspaceDropdown}
             onClickOutside={() => setShowWorkspaceDropdown(false)}
           >

---

73-77: Guard the workspace switch toast against missing names and align casing with the UI.

If workspaces.find doesn’t find a match, the toast will show undefined, and the casing is currently raw. You already have toTitleCase; using it here keeps things consistent and safer.

   const handleWorkspaceSwitch = (workspaceUid) => {
     dispatch(switchWorkspace(workspaceUid));
     setShowWorkspaceDropdown(false);
-    toast.success(`Switched to ${workspaces.find((w) => w.uid === workspaceUid)?.name}`);
+    const workspace = workspaces.find((w) => w.uid === workspaceUid);
+    toast.success(`Switched to ${toTitleCase(workspace?.name) || 'workspace'}`);
   };

---

101-125: Clarify layout toggle preferences update and defensively handle undefined preferences.

Spreading preferences assumes it’s always non-null, and ...preferences?.layout || {} relies on operator precedence. A small refactor makes the intent clearer and safer if preferences starts out undefined.

-  const orientation = preferences?.layout?.responsePaneOrientation || 'horizontal';
-
-  const handleToggleVerticalLayout = () => {
-    const newOrientation = orientation === 'horizontal' ? 'vertical' : 'horizontal';
-    const updatedPreferences = {
-      ...preferences,
-      layout: {
-        ...preferences?.layout || {},
-        responsePaneOrientation: newOrientation
-      }
-    };
-    dispatch(savePreferences(updatedPreferences));
-  };
+  const orientation = preferences?.layout?.responsePaneOrientation || 'horizontal';
+
+  const handleToggleVerticalLayout = () => {
+    const newOrientation = orientation === 'horizontal' ? 'vertical' : 'horizontal';
+    const layout = preferences?.layout || {};
+    const updatedPreferences = {
+      ...(preferences || {}),
+      layout: {
+        ...layout,
+        responsePaneOrientation: newOrientation
+      }
+    };
+    dispatch(savePreferences(updatedPreferences));
+  };

---

20-20: Add a brief JSDoc comment for AppTitleBar to document its role.

Given this is a central abstraction in the new layout, a short JSDoc will help future readers understand its responsibilities.

-import { toTitleCase } from 'utils/common/index';
-
-const AppTitleBar = () => {
+import { toTitleCase } from 'utils/common/index';
+
+/**
+ * Application-level title bar hosting the workspace selector, branding, and global layout toggles.
+ */
+const AppTitleBar = () => {

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Learnt from: CR
Repo: usebruno/bruno PR: 0
File: CODING_STANDARDS.md:0-0
Timestamp: 2025-12-03T08:09:57.124Z
Learning: Applies to **/*.{test,spec}.{js,jsx,ts,tsx} : Add tests for any new functionality or meaningful changes; update corresponding tests when code is added, removed, or significantly modified

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Learnt from: CR
Repo: usebruno/bruno PR: 0
File: CODING_STANDARDS.md:0-0
Timestamp: 2025-12-03T08:09:57.124Z
Learning: Applies to **/*.{test,spec}.{js,jsx,ts,tsx} : Add tests for any new functionality or meaningful changes; update corresponding tests when code is added, removed, or significantly modified