bars guud

src/context/bars.tsx

@@ -1,4 +1,4 @@
-import { Accessor, createContext, useContext } from "solid-js";
+import { Accessor, createContext, useContext, createMemo } from "solid-js";
 import { createSignal } from "solid-js";
 import { hapticFeedback } from "~/lib/client-utils";
 
@@ -38,37 +38,70 @@ export function useBars() {
 }
 
 export function BarsProvider(props: { children: any }) {
-  const [leftBarSize, setLeftBarSize] = createSignal(0);
-  const [rightBarSize, setRightBarSize] = createSignal(0);
+  const [_leftBarNaturalSize, _setLeftBarNaturalSize] = createSignal(0);
+  const [_rightBarNaturalSize, _setRightBarNaturalSize] = createSignal(0);
+  const [syncedBarSize, setSyncedBarSize] = createSignal(0);
   const [centerWidth, setCenterWidth] = createSignal(0);
   const [leftBarVisible, _setLeftBarVisible] = createSignal(true);
   const [rightBarVisible, _setRightBarVisible] = createSignal(true);
   const [barsInitialized, setBarsInitialized] = createSignal(false);
 
-  // Track when both bars have been sized at least once
   let leftBarSized = false;
   let rightBarSized = false;
 
   const wrappedSetLeftBarSize = (size: number) => {
-    setLeftBarSize(size);
-    if (!leftBarSized && size > 0) {
-      leftBarSized = true;
-      if (rightBarSized) {
-        setBarsInitialized(true);
+    if (!barsInitialized()) {
+      // Before initialization, capture natural size
+      _setLeftBarNaturalSize(size);
+      if (!leftBarSized && size > 0) {
+        leftBarSized = true;
+        checkAndSync();
       }
+    } else {
+      // After initialization, just update the natural size for visibility handling
+      _setLeftBarNaturalSize(size);
     }
   };
 
   const wrappedSetRightBarSize = (size: number) => {
-    setRightBarSize(size);
-    if (!rightBarSized && size > 0) {
-      rightBarSized = true;
-      if (leftBarSized) {
-        setBarsInitialized(true);
+    if (!barsInitialized()) {
+      // Before initialization, capture natural size
+      _setRightBarNaturalSize(size);
+      if (!rightBarSized && size > 0) {
+        rightBarSized = true;
+        checkAndSync();
       }
+    } else {
+      // After initialization, just update the natural size for visibility handling
+      _setRightBarNaturalSize(size);
     }
   };
 
+  const checkAndSync = () => {
+    const isMobile = typeof window !== "undefined" && window.innerWidth < 768;
+    const bothBarsReady = leftBarSized && (isMobile || rightBarSized);
+
+    if (bothBarsReady) {
+      const maxWidth = Math.max(_leftBarNaturalSize(), _rightBarNaturalSize());
+      setSyncedBarSize(maxWidth);
+      setBarsInitialized(true);
+    }
+  };
+
+  const leftBarSize = createMemo(() => {
+    // Return 0 if hidden (natural size is 0), otherwise return synced size when initialized
+    const naturalSize = _leftBarNaturalSize();
+    if (naturalSize === 0) return 0; // Hidden
+    return barsInitialized() ? syncedBarSize() : naturalSize;
+  });
+
+  const rightBarSize = createMemo(() => {
+    // Return 0 if hidden (natural size is 0), otherwise return synced size when initialized
+    const naturalSize = _rightBarNaturalSize();
+    if (naturalSize === 0) return 0; // Hidden
+    return barsInitialized() ? syncedBarSize() : naturalSize;
+  });
+
   // Wrap visibility setters with haptic feedback
   const setLeftBarVisible = (visible: boolean) => {
     hapticFeedback(50);