removed logic of localStorage

Signed-off-by: antedotee <[email protected]>

Author: antedotee

frontend/src/components/Layout.tsx

@@ -1,11 +1,27 @@
-import { Suspense, lazy, useEffect, useState } from 'react';
+import { Suspense, lazy, useEffect, useState, useCallback, createContext, useContext } from 'react';
 import { Outlet, ScrollRestoration, useLocation } from 'react-router-dom';
 import { Tooltip } from '@mui/material';
 import Header from './Header';
 import useTheme from '../stores/themeStore';
 import { motion, AnimatePresence } from 'framer-motion';
 import getThemeStyles from '../lib/theme-utils';
 
+// Context for tree view sidebar state
+interface TreeViewSidebarContextType {
+  isTreeViewSidebarCollapsed: boolean;
+  toggleTreeViewSidebar: () => void;
+}
+
+const TreeViewSidebarContext = createContext<TreeViewSidebarContextType | undefined>(undefined);
+
+export const useTreeViewSidebar = () => {
+  const context = useContext(TreeViewSidebarContext);
+  if (!context) {
+    throw new Error('useTreeViewSidebar must be used within a TreeViewSidebarProvider');
+  }
+  return context;
+};
+
 // Lazy load less critical components
 const Menu = lazy(() => import('./menu/Menu'));
 const Footer = lazy(() => import('./Footer'));
@@ -62,6 +78,7 @@ export function Layout() {
   const [isLoading, setIsLoading] = useState(true);
   const [isSidebarCollapsed, setIsSidebarCollapsed] = useState(false);
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
+  const [isTreeViewSidebarCollapsed, setIsTreeViewSidebarCollapsed] = useState(true);
   const location = useLocation();
   const { theme } = useTheme();
   const isDark = theme === 'dark';
@@ -90,6 +107,11 @@ export function Layout() {
     setIsSidebarCollapsed(!isSidebarCollapsed);
   };
 
+  // Toggle tree view sidebar collapsed state
+  const toggleTreeViewSidebar = useCallback(() => {
+    setIsTreeViewSidebarCollapsed(prev => !prev);
+  }, []);
+
   // Toggle mobile menu state
   const toggleMobileMenu = () => {
     setIsMobileMenuOpen(!isMobileMenuOpen);
@@ -266,9 +288,16 @@ export function Layout() {
           >
             <Suspense fallback={<LoadingPlaceholder />}>
               <PageTransition>
-                <div className="mx-auto max-w-full">
-                  <Outlet />
-                </div>
+                <TreeViewSidebarContext.Provider
+                  value={{
+                    isTreeViewSidebarCollapsed,
+                    toggleTreeViewSidebar,
+                  }}
+                >
+                  <div className="mx-auto max-w-full">
+                    <Outlet />
+                  </div>
+                </TreeViewSidebarContext.Provider>
               </PageTransition>
             </Suspense>
           </motion.main>

frontend/src/components/TreeViewComponent.tsx

@@ -1,6 +1,7 @@
 import React, { useState, useCallback, useRef, useEffect, memo } from 'react';
 import { Box, Alert, Snackbar } from '@mui/material';
 import useTheme from '../stores/themeStore';
+import { useTreeViewSidebar } from './Layout';
 import ContextDropdown from './ContextDropdown';
 import CreateOptions from './CreateOptions';
 import TreeViewHeader from './treeView/TreeViewHeader';
@@ -24,6 +25,7 @@ interface TreeViewComponentProps {
 
 const TreeViewComponent = memo<TreeViewComponentProps>(props => {
   const theme = useTheme(state => state.theme);
+  const { isTreeViewSidebarCollapsed, toggleTreeViewSidebar } = useTreeViewSidebar();
 
   // State management
   const [showCreateOptions, setShowCreateOptions] = useState(false);
@@ -37,11 +39,6 @@ const TreeViewComponent = memo<TreeViewComponentProps>(props => {
     groupItems?: TreeResourceItem[];
     initialTab?: number;
   } | null>(null);
-  // Initialize sidebar collapsed state with persistence
-  const [isCollapsed, setIsCollapsed] = useState<boolean>(() => {
-    const saved = localStorage.getItem('treeViewSidebarCollapsed');
-    return saved !== null ? JSON.parse(saved) : true; // Default to collapsed
-  });
   const [isExpanded, setIsExpanded] = useState<boolean>(true);
   const [isFullscreen, setIsFullscreen] = useState<boolean>(false);
   const [filteredContext, setFilteredContext] = useState<string>('all');
@@ -86,7 +83,7 @@ const TreeViewComponent = memo<TreeViewComponentProps>(props => {
     getDescendantEdges,
   } = useTreeViewData({
     filteredContext,
-    isCollapsed,
+    isCollapsed: isTreeViewSidebarCollapsed,
     isExpanded,
     onNodeSelect: handleNodeSelect,
     onMenuOpen: handleMenuOpen || (() => {}),
@@ -146,14 +143,6 @@ const TreeViewComponent = memo<TreeViewComponentProps>(props => {
     setActiveOption('option1');
   }, []);
 
-  // Collapse/Expand handlers
-  const handleToggleCollapse = useCallback(() => {
-    setIsCollapsed(prev => {
-      const newState = !prev;
-      localStorage.setItem('treeViewSidebarCollapsed', JSON.stringify(newState));
-      return newState;
-    });
-  }, []);
 
   const handleExpandAll = useCallback(() => {
     setIsExpanded(true);
@@ -253,10 +242,10 @@ const TreeViewComponent = memo<TreeViewComponentProps>(props => {
             filteredContext={filteredContext}
             onCreateWorkload={handleCreateWorkloadClick}
             onResourceDataChange={handleResourceDataChange}
-            onToggleCollapse={handleToggleCollapse}
+            onToggleCollapse={toggleTreeViewSidebar}
             onExpandAll={handleExpandAll}
             onCollapseAll={handleCollapseAll}
-            isCollapsed={isCollapsed}
+            isCollapsed={isTreeViewSidebarCollapsed}
             containerRef={containerRef}
             resourceFilters={resourceFilters}
             onResourceFiltersChange={handleResourceFiltersChange}