refactor: use zustand to persist menu state to localStorage

Author: felixmosh

packages/ui/src/components/Menu/MenuTree/MenuTree.tsx

@@ -1,11 +1,11 @@
 import cn from 'clsx';
+import React from 'react';
 import { useTranslation } from 'react-i18next';
-import { useSelectedStatuses } from '../../../hooks/useSelectedStatuses';
+import { NavLink } from 'react-router-dom';
 import { useMenuState } from '../../../hooks/useMenuState';
+import { useSelectedStatuses } from '../../../hooks/useSelectedStatuses';
 import { links } from '../../../utils/links';
 import { AppQueueTreeNode } from '../../../utils/toTree';
-import { NavLink } from 'react-router-dom';
-import React from 'react';
 import s from './MenuTree.module.css';
 
 export const MenuTree = ({
@@ -19,7 +19,10 @@ export const MenuTree = ({
 }) => {
   const { t } = useTranslation();
   const selectedStatuses = useSelectedStatuses();
-  const { toggleMenu, isMenuOpen } = useMenuState();
+  const { toggleMenu, isMenuOpen } = useMenuState(({ toggleMenu, isMenuOpen }) => ({
+    isMenuOpen,
+    toggleMenu,
+  }));
 
   return (
     <ul className={cn(s.menu, level > 0 && s[`level-${level}`])}>

packages/ui/src/hooks/useMenuState.ts

@@ -1,39 +1,22 @@
-import { useCallback, useState } from 'react';
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
 
-const STORAGE_KEY = 'bull-board-menu-state';
+type MenuState = {
+  state: Record<string, boolean>;
+  isMenuOpen: (menuPath: string, defaultOpen?: boolean) => boolean;
+  toggleMenu: (menuPath: string) => void;
+};
 
-type MenuState = Record<string, boolean>;
-
-export function useMenuState() {
-  const [menuState, setMenuState] = useState<MenuState>(() => {
-    try {
-      const stored = localStorage.getItem(STORAGE_KEY);
-      return stored ? JSON.parse(stored) : {};
-    } catch {
-      return {};
+export const useMenuState = create<MenuState>()(
+  persist(
+    (set, get) => ({
+      state: {},
+      toggleMenu: (menuPath: string) =>
+        set(({ state: prev }) => ({ state: { ...prev, [menuPath]: !prev[menuPath] } })),
+      isMenuOpen: (menuPath: string, defaultOpen = true) => get().state[menuPath] ?? defaultOpen,
+    }),
+    {
+      name: 'bull-board:menu-state',
     }
-  });
-
-  const toggleMenu = useCallback((menuPath: string) => {
-    setMenuState((prev) => {
-      const newState = {
-        ...prev,
-        [menuPath]: !prev[menuPath]
-      };
-      
-      try {
-        localStorage.setItem(STORAGE_KEY, JSON.stringify(newState));
-      } catch {
-        // Ignore localStorage errors
-      }
-      
-      return newState;
-    });
-  }, []);
-
-  const isMenuOpen = useCallback((menuPath: string, defaultOpen = true) => {
-    return menuState[menuPath] !== undefined ? menuState[menuPath] : defaultOpen;
-  }, [menuState]);
-
-  return { toggleMenu, isMenuOpen };
-}
+  )
+);