web/src/pages/Home/index.jsx (1)

27-28: Consider persisting the layout preference.

Unlike dashboardLayout which persists via localStorage, the upDownLayout preference resets on each visit. Users may prefer their layout choice to be remembered.

🔎 View suggested implementation

-  const [upDownLayout, setUpDownLayout] = useState(false);
+  const [upDownLayout, setUpDownLayout] = useState(() => {
+    return localStorage.getItem('upDownLayout') === 'true';
+  });
   const gridUpDownClass = upDownLayout ? 'grid-cols-1' : 'grid-cols-10';

Then update the toggle handler to persist:

           onClick={() => {
-              setUpDownLayout(!upDownLayout);
+              const newLayout = !upDownLayout;
+              setUpDownLayout(newLayout);
+              localStorage.setItem('upDownLayout', newLayout);
             }}

You may also want to add a storage event listener similar to dashboardLayout for cross-tab synchronization.

Configuration used: defaults

Review profile: CHILL

Plan: Pro

web/src/utils/dashboardManager.js (1)

44-57: Validate or document the boolean parameter type.

The setter accepts any non-null value but the getter expects a boolean stored as 'true' or 'false'. While JavaScript's implicit type coercion handles this when a boolean is passed, the function should either validate that layout is a boolean or document this requirement to prevent incorrect usage.

🔎 Apply this diff to add type validation:

 export const setDashboardUpDownLayout = layout => {
-  if (layout === null || layout === undefined) {
-    console.error('setDashboardUpDownLayout: Layout cannot be null or undefined');
+  if (layout === null || layout === undefined || typeof layout !== 'boolean') {
+    console.error('setDashboardUpDownLayout: Layout must be a boolean value');
     return false;
   }

web/src/pages/Home/index.jsx (1)

35-49: Add storage event listener for cross-tab synchronization.

The upDownLayout state (line 32) lacks a storage event listener, unlike dashboardLayout which listens for changes from other tabs (lines 38-42). This means if a user toggles the layout in one tab, other open tabs won't reflect the change.

🔎 Apply this diff to add cross-tab sync:

   useEffect(() => {
     setDashboardLayout(getDashboardLayout());
+    setUpDownLayout(getDashboardUpDownLayout());

     const handleStorageChange = e => {
       if (e.key === 'dashboardLayout') {
         setDashboardLayout(e.newValue || DASHBOARD_LAYOUTS.ORDER_FIRST);
       }
+      if (e.key === 'upDownLayout') {
+        setUpDownLayout(e.newValue === 'true');
+      }
     };

     window.addEventListener('storage', handleStorageChange);

     return () => {
       window.removeEventListener('storage', handleStorageChange);
     };
   }, []);

Also applies to: 32-32

Configuration used: defaults

Review profile: CHILL

Plan: Pro

web/src/utils/dashboardManager.js (1)

45-58: LGTM! Setter correctly validates and stores the boolean preference.

The function properly validates the input as a boolean and stores it to localStorage. The implicit string conversion on line 52 works correctly with the getter's logic.

💡 Optional: Make string conversion explicit

For added clarity, you could explicitly convert the boolean to string:

   try {
-    localStorage.setItem(DASHBOARD_UPDOWN_LAYOUT_KEY, layout);
+    localStorage.setItem(DASHBOARD_UPDOWN_LAYOUT_KEY, layout.toString());
     return true;

This is purely a readability improvement; the current implicit conversion works correctly.

Configuration used: defaults

Review profile: CHILL

Plan: Pro