santizing tab order array so that it's never misformatted

src/bin/BinYards.tsx

@@ -213,6 +213,7 @@ export default function BinYard(props: Props) {
 
   useEffect(() => {
     if (props.yards && props.yardPerms) {
+      console.log(props.yards)
       setBinYards(props.yards);
       setYardPermissions(props.yardPerms);
       return;

src/common/DraggableTabs.tsx

@@ -32,10 +32,51 @@ export default function DraggableTabs(props: DraggableTabsProps) {
     return storedValue !== null ? JSON.parse(storedValue) : [];
   });
 
+  const sanitize = (order: any[]) => {
+    let newOrder = [...order]
+    // if there's something less than 0, increase everything by one
+    while (newOrder.some(num => num < 0)) {
+      // Increase all numbers by 1
+      newOrder = newOrder.map(num => num + 1);
+    }
+
+    // find a skipped index and flatten
+    while (true) {
+      // Find min and max values
+      const min = Math.min(...newOrder);
+      const max = Math.max(...newOrder);
+      
+      // Create a set of all numbers that should be present
+      const shouldHave = new Set();
+      for (let i = min; i <= max; i++) {
+          shouldHave.add(i);
+      }
+      
+      // Create a set of actual numbers
+      const actual = new Set(newOrder);
+      
+      // Find first missing number
+      let missing = null;
+      for (let num of shouldHave) {
+          if (!actual.has(num)) {
+              missing = num;
+              break;
+          }
+      }
+      
+      // If no numbers are missing, we're done
+      if (missing === null || missing === undefined) break;
+      
+      // Reduce all numbers greater than the missing number by 1
+      newOrder = newOrder.map(num => num > missing ? num - 1 : num);
+  }
+    return newOrder
+  }
+
   // save tab order to cache when it changes
   useEffect(() => {
     console.log(tabOrder)
-    localStorage.setItem(cacheKey, JSON.stringify(tabOrder));
+    localStorage.setItem(cacheKey, JSON.stringify(sanitize(tabOrder)));
   }, [tabOrder]);
 
   // useEffect(() => {
@@ -66,7 +107,7 @@ export default function DraggableTabs(props: DraggableTabsProps) {
 
         // Find the missing key
         const removedIndex = oldKeys.findIndex(key => !newKeys.includes(key));
-        setTabOrder(removeAndReduceFirst(tabOrder, removedIndex))
+        setTabOrder(removeAndReduceFirst(sanitize(tabOrder), removedIndex))
         
       } else if (tabOrder.length - initialChildren.length === -1) {
         let newTabOrder = [...tabOrder]