[MISC] Enhance sidebar UX to expand on hover

[chandrasekharan-zipstack]

What

• Enhanced the sidebar to expand on hover with a pin/unpin toggle
• Replaced pin icon with conventional >> chevron (matches Notion, Jira, Linear patterns)
• Hidden scrollbar for cleaner appearance while preserving scroll
• Added defensive guards for optional plugin imports (prevents crashes without cloud plugins)
• Updated sample.env for Vite migration

Why

• Previously had a button that had to be clicked, not intuitive enough and involves friction
• Pin icon implied auto-hide behavior; chevrons are the standard convention for sidebar expand/collapse
• Scrollbar was visually noisy on the narrow sidebar
• Plugin imports were crashing when cloud plugins were unavailable

How

• Added flex layout styles for .ant-layout-sider-children wrapper
• Wrapped content in .sidebar-content-wrapper with min-height: 0 for proper flex scrolling
• Implemented pin toggle with localStorage persistence
• Added mouse enter/leave handlers for auto-collapse when unpinned
• Replaced PushpinFilled/PushpinOutlined with single DoubleRightOutlined icon
• Chevron turns blue when pinned, stays gray when unpinned (no hover color change)
• Toggle only visible when sidebar is expanded; no tooltip for cleaner UX
• Hidden scrollbar via scrollbar-width: none + ::-webkit-scrollbar { display: none }
• Added optional chaining and nullish coalescing to plugin store/export access
• Renamed REACT_APP_* env vars to VITE_* in sample.env

Can this PR break any existing features. If yes, please list possible items. If no, please explain why.

No. Changes are isolated to sidebar styling and behavior. Collapse functionality is preserved and improved. Plugin guards are additive (nullish coalescing with empty object fallback).

Notes on Testing

• Test sidebar scroll when expanded (scrollbar should be invisible)
• Test pin toggle and localStorage persistence
• Test auto-collapse on mouse leave when unpinned
• Test chevron visibility: hidden when collapsed, visible when expanded
• Test chevron color: gray when unpinned, blue when pinned
• Test all sidebar navigation items still work correctly
• Verify app loads without cloud plugins (no crashes)

Screenshots

Checklist

I have read and understood the Contribution Guidelines.

[coderabbitai]

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

• @coderabbitai resume to resume automatic reviews.
• @coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

• ▶️ Resume reviews
• 🔍 Trigger review

Walkthrough

Adds hover-to-expand sidebar with a persisted pin toggle, 300ms collapse debounce, safe localStorage helpers, CSS scroll/flex wrappers with a fixed bottom pin area, and moves collapse control into SideNavBar (now requires a setCollapsed prop).

Changes

Cohort / File(s)	Summary
SideNavBar component frontend/src/components/navigations/side-nav-bar/SideNavBar.jsx	Adds isPinned persisted via localStorage helpers, a 300ms collapse timeout (useRef), handleMouseEnter/handleMouseLeave, togglePin, optional chaining guards, pin button UI (tooltip + Pushpin icons), ARIA/test ids, and requires setCollapsed prop in PropTypes.
SideNavBar styles frontend/src/components/navigations/side-nav-bar/SideNavBar.css	Introduces flex wrapper for sider children, scrollable content container, fixed bottom pin area with hover/pinned states, overflow/height and collapse-aware rules, pin icon styling and pinned state styles.
LocalStorage helpers frontend/src/helpers/localStorage.js	New safe localStorage utilities: isLocalStorageAvailable(), getLocalStorageValue(key, defaultValue), and setLocalStorageValue(key, value) with graceful degradation for SSR/tests and error handling.
PageLayout component frontend/src/layouts/page-layout/PageLayout.jsx	Removes inline collapse toggle UI and icon/button imports, initializes/persists collapsed via getLocalStorageValue/setLocalStorageValue, and passes setCollapsed into SideNavBar (collapse toggling delegated to SideNavBar).
PageLayout styles frontend/src/layouts/page-layout/PageLayout.css	Removes the .collapse_btn CSS block related to the removed collapse toggle button.

Sequence Diagram(s)

sequenceDiagram
    participant User as User
    participant Sider as SideNavBar
    participant Layout as PageLayout
    participant Storage as LocalStorage

    User->>Sider: mouse enter (hover)
    Sider->>Layout: call setCollapsed(false)
    Note right of Sider: expanded UI shown
    alt user clicks pin
        User->>Sider: click pin toggle
        Sider->>Storage: setLocalStorageValue("sidebarPinned", true/false)
        Sider->>Layout: ensure setCollapsed(false)
    else hover leave while unpinned
        User->>Sider: mouse leave
        Sider->>Sider: start 300ms collapse timer
        Sider->>Layout: call setCollapsed(true) after timeout
    end

Loading

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately describes the main change: enhancing sidebar UX with hover expansion, which is the primary objective reflected throughout the changeset.
Description check	✅ Passed	The pull request description is comprehensive and covers all required sections: What, Why, How, breaking changes analysis, testing notes, screenshots, and a completed checklist.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch feat/expandable-sidebar

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

frontend/src/components/navigations/side-nav-bar/SideNavBar.jsx (1)

196-211: Conditional hook calls violate React's rules of hooks.

The hooks inside the try/catch and if blocks at lines 199-201 and 208-210 are called conditionally, which violates React's hooks rules. Hooks must be called in the same order on every render—conditional calls lead to unpredictable behavior and bugs.

Since this appears to be pre-existing code (only the trailing comma formatting changed), consider addressing it in a follow-up. The typical fix is to call the hook unconditionally and handle the absence of the store gracefully:

// Call unconditionally, default to a no-op selector if store unavailable
const unstractSubscriptionPlan = unstractSubscriptionPlanStore?.useUnstractSubscriptionPlanStore?.(
  (state) => state?.unstractSubscriptionPlan
) ?? null;

🤖 Fix all issues with AI agents

In `@frontend/src/components/navigations/side-nav-bar/SideNavBar.jsx`:
- Around line 180-186: The collapse timeout started in handleMouseLeave (stored
on collapseTimeoutRef.current) isn't cleared on unmount; add a useEffect cleanup
that clears any pending timeout with clearTimeout(collapseTimeoutRef.current)
and optionally nulls collapseTimeoutRef.current to avoid calling setCollapsed
after the component has unmounted; ensure this effect runs once (empty deps) and
also consider clearing the timeout whenever isPinned changes or when collapsing
manually so setCollapsed won't be invoked on an unmounted component.

[coderabbitai]

Actionable comments posted: 1

🤖 Fix all issues with AI agents

In `@frontend/src/components/navigations/side-nav-bar/SideNavBar.jsx`:
- Around line 162-164: The JSON.parse(localStorage.getItem("sidebarPinned"))
call can throw on corrupted data; wrap the read/parse in a try-catch inside the
SideNavBar component (where isPinned and setIsPinned are declared) so that if
JSON.parse throws you fall back to false (or a safe default) and optionally
clear the bad value from localStorage; update the initialization logic for
isPinned to use the safe parsed value from the try-catch and keep setIsPinned
usage the same.

[coderabbitai]

Actionable comments posted: 0

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

frontend/src/components/navigations/side-nav-bar/SideNavBar.jsx (1)

224-239: ⚠️ Potential issue | 🟠 Major

Fix conditional hook calls to comply with React Rules of Hooks.

Both useUnstractSubscriptionPlanStore and useSelectedProductStore are called conditionally (lines 225 and 235). This violates React's Rules of Hooks: hooks must be called unconditionally at the top level of a component. If store availability changes between renders, the hook call order becomes inconsistent, causing bugs. Use a safe wrapper to ensure the hooks are always called.

🔧 Proposed fix (safe wrapper + unconditional call)

-  try {
-    if (unstractSubscriptionPlanStore?.useUnstractSubscriptionPlanStore) {
-      unstractSubscriptionPlan =
-        unstractSubscriptionPlanStore?.useUnstractSubscriptionPlanStore(
-          (state) => state?.unstractSubscriptionPlan,
-        );
-    }
-  } catch (error) {
-    // Do nothing
-  }
-
-  if (selectedProductStore?.useSelectedProductStore) {
-    selectedProduct = selectedProductStore.useSelectedProductStore(
-      (state) => state?.selectedProduct,
-    );
-  }
+  const useSafeUnstractSubscriptionPlanStore =
+    unstractSubscriptionPlanStore?.useUnstractSubscriptionPlanStore ??
+    ((selector) => selector?.({}));
+  const useSafeSelectedProductStore =
+    selectedProductStore?.useSelectedProductStore ?? ((selector) => selector?.({}));
+
+  try {
+    unstractSubscriptionPlan = useSafeUnstractSubscriptionPlanStore(
+      (state) => state?.unstractSubscriptionPlan,
+    );
+  } catch {
+    // Do nothing
+  }
+
+  selectedProduct = useSafeSelectedProductStore(
+    (state) => state?.selectedProduct,
+  );

[coderabbitai]

Actionable comments posted: 1

🤖 Fix all issues with AI agents

In `@frontend/src/components/navigations/side-nav-bar/SideNavBar.jsx`:
- Around line 157-179: The getSafeLocalStorageValue and SideNavBar useEffect
assume localStorage is always available—calling localStorage.removeItem in the
catch and localStorage.setItem in the effect can throw in SSR/tests or when
storage is blocked; add guards and safe wrappers: update
getSafeLocalStorageValue to first check typeof localStorage !== "undefined" and
only call getItem/removeItem when available (avoid calling removeItem
unconditionally in the catch), create a safeSetLocalStorage helper used in the
useEffect that wraps setItem in try/catch and no-ops when storage is unavailable
or errors, and replace direct localStorage calls in SideNavBar with these guards
(referencing getSafeLocalStorageValue, safeSetLocalStorage, and the useEffect
that persists sidebarPinned).

🧹 Nitpick comments (1)

frontend/src/components/navigations/side-nav-bar/SideNavBar.jsx (1)

553-571: Prefer a semantic button for the pin control (with aria-pressed).

♻️ Suggested refactor

-      <Tooltip title={isPinned ? "Unpin sidebar" : "Keep expanded"}>
-        <div
-          className="sidebar-pin-container"
-          onClick={togglePin}
-          onKeyDown={(e) => {
-            if (e.key === "Enter" || e.key === " ") {
-              e.preventDefault();
-              togglePin();
-            }
-          }}
-          role="button"
-          tabIndex={0}
-        >
+      <Tooltip title={isPinned ? "Unpin sidebar" : "Keep expanded"}>
+        <button
+          type="button"
+          className="sidebar-pin-container"
+          onClick={togglePin}
+          aria-pressed={isPinned}
+          aria-label={isPinned ? "Unpin sidebar" : "Keep sidebar expanded"}
+        >
           {isPinned ? (
             <PushpinFilled className="sidebar-pin-icon pinned" />
           ) : (
             <PushpinOutlined className="sidebar-pin-icon" />
           )}
-        </div>
+        </button>
       </Tooltip>

[coderabbitai]

Actionable comments posted: 1

🤖 Fix all issues with AI agents

In `@frontend/src/components/navigations/side-nav-bar/SideNavBar.jsx`:
- Around line 538-556: Replace the non-semantic div used for the pin control
with a native button element: in the block rendering the pin control (where
Tooltip wraps the element, and components/symbols involved include togglePin,
isPinned, PushpinFilled, PushpinOutlined, and the "sidebar-pin-container" /
"sidebar-pin-icon" classes), change the div to a <button type="button">, remove
role="button", tabIndex and the onKeyDown keyboard handling (the native button
handles Enter/Space), keep the onClick calling togglePin, preserve Tooltip,
className and conditional icon rendering, and add an explicit accessible name
via aria-label that reflects state (e.g., aria-label={isPinned ? "Unpin sidebar"
: "Keep expanded"}).

[coderabbitai]

Actionable comments posted: 1

🤖 Fix all issues with AI agents

In `@frontend/src/components/navigations/side-nav-bar/SideNavBar.jsx`:
- Around line 194-229: The sidebar can remain collapsed when isPinned is loaded
true because useEffect only clears timeouts; update the isPinned change handling
to force expansion: inside the useEffect watching isPinned (the effect that
calls setSafeLocalStorageValue), when isPinned is true call setCollapsed(false)
(and clearCollapseTimeout via clearCollapseTimeout()) so any persisted pinned
state immediately expands; also ensure togglePin (which flips isPinned) keeps
the existing behavior of clearing timeouts and calling setCollapsed(false) when
newPinned is true. Reference functions/vars: useEffect (dependency [isPinned]),
setSafeLocalStorageValue, clearCollapseTimeout, setCollapsed, togglePin,
setIsPinned, collapseTimeoutRef.

[github-actions]

Frontend Lint Report (Biome)

✅ All checks passed! No linting or formatting issues found.

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud