bin yard tab order is now saved to cache

src/common/DraggableTabs.tsx

@@ -1,4 +1,6 @@
 import { Tabs, TabsProps } from "@mui/material";
+import { getContextKeys, getContextTypes } from "pbHelpers/Context";
+import { useGlobalState } from "providers";
 import React, { useEffect, useState, useRef } from "react";
 // import AnimatedTabs from "./AnimatedTabs";
 
@@ -12,13 +14,37 @@ export default function DraggableTabs(props: DraggableTabsProps) {
   const { startNode, endNode, children, ...tabsProps } = props;
   const [selectedValue, setSelectedValue] = useState<any>(tabsProps.value);
   const initialChildren = React.Children.toArray(children);
-  const [tabOrder, setTabOrder] = useState<number[]>([]);
+  // const [tabOrder, setTabOrder] = useState<number[]>([]);
   const [hoveredIndex, setHoveredIndex] = useState<number>(-1); // Track hovered tab
   const tabRefs = useRef<(HTMLDivElement | null)[]>([]); // Refs for each tab
+  const [{ as, user }] = useGlobalState()
+  
+  // cache key should be unique for the context and user
+  let cacheKey = "tab-order-"
+  const types = getContextTypes()
+  getContextKeys().forEach((key, index) => {
+    cacheKey = cacheKey + types[index] + "-" + key + "-"
+  })
+  cacheKey = cacheKey + (as ? as : user.id())
+
+  // Get tab order from cache
+  const [tabOrder, setTabOrder] = useState<number[]>(() => {
+    const storedValue = localStorage.getItem(cacheKey);
+    console.log(storedValue)
+    console.log(JSON.parse(storedValue!))
+    console.log(storedValue !== null)
+    return storedValue !== null ? JSON.parse(storedValue) : [];
+  });
+
+  // save tab order to cache when it changes
+  useEffect(() => {
+    console.log(tabOrder)
+    localStorage.setItem(cacheKey, JSON.stringify(tabOrder));
+  }, [tabOrder]);
 
   useEffect(() => {
     const newOrder = initialChildren.map((_, index) => index);
-    setTabOrder(newOrder);
+    if (tabOrder.length < 1) setTabOrder(newOrder);
     tabRefs.current = new Array(newOrder.length).fill(null); // Initialize refs
   }, [initialChildren.length]);
 

src/common/PulseBox.tsx

@@ -17,7 +17,7 @@ const useStyles = makeStyles((_theme: Theme) => ({
       height: '100%',
       border: '2px solid var(--pulse-color)',
       borderRadius: 'inherit', // Should inherit from Box
-      animation: '$pulse 2s infinite ease-in-out',
+      animation: '$pulse 1.75s infinite ease-in-out',
       pointerEvents: 'none',
       boxSizing: 'border-box',
       transition: "border-color 0.35s ease-in-out",