From b2e7ba3dc69e975222037e8817a8ef94d5481207 Mon Sep 17 00:00:00 2001
From: borys3kk <szymon.banys01@wp.pl>
Date: Tue, 17 Jun 2025 11:13:12 +0200
Subject: [PATCH 1/5] fix help pane not moving the workspacesListPage content

---
 .../AppNavigator/useRootNavigatorScreenOptions.ts        | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/libs/Navigation/AppNavigator/useRootNavigatorScreenOptions.ts b/src/libs/Navigation/AppNavigator/useRootNavigatorScreenOptions.ts
index f6112e1f3a26..28299d7b6bea 100644
--- a/src/libs/Navigation/AppNavigator/useRootNavigatorScreenOptions.ts
+++ b/src/libs/Navigation/AppNavigator/useRootNavigatorScreenOptions.ts
@@ -1,6 +1,7 @@
 import type {StackCardInterpolationProps} from '@react-navigation/stack';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useStyleUtils from '@hooks/useStyleUtils';
+import useThemeStyles from '@hooks/useThemeStyles';
 import Animations from '@libs/Navigation/PlatformStackNavigation/navigationOptions/animation';
 import Presentation from '@libs/Navigation/PlatformStackNavigation/navigationOptions/presentation';
 import type {PlatformStackNavigationOptions} from '@libs/Navigation/PlatformStackNavigation/types';
@@ -26,6 +27,7 @@ const useRootNavigatorScreenOptions = () => {
     const StyleUtils = useStyleUtils();
     const modalCardStyleInterpolator = useModalCardStyleInterpolator();
     const {shouldUseNarrowLayout} = useResponsiveLayout();
+    const themeStyles = useThemeStyles();
 
     return {
         rightModalNavigator: {
@@ -79,11 +81,8 @@ const useRootNavigatorScreenOptions = () => {
             // We need to turn off animation for the full screen to avoid delay when closing screens.
             animation: Animations.NONE,
             web: {
-                cardStyleInterpolator: (props: StackCardInterpolationProps) => modalCardStyleInterpolator({props, isFullScreenModal: true}),
-                cardStyle: {
-                    ...StyleUtils.getNavigationModalCardStyle(),
-                    paddingLeft: shouldUseNarrowLayout ? 0 : variables.navigationTabBarSize,
-                },
+                cardStyleInterpolator: (props: StackCardInterpolationProps) => modalCardStyleInterpolator({props, isFullScreenModal: true, shouldAnimateSidePanel: true}),
+                cardStyle: shouldUseNarrowLayout ? {...StyleUtils.getNavigationModalCardStyle(), paddingLeft: 0} : {...themeStyles.h100, paddingLeft: variables.navigationTabBarSize},
             },
         },
     } satisfies RootNavigatorScreenOptions;

From f9b1d28c15a92186e9438334e13eb71d532b3930 Mon Sep 17 00:00:00 2001
From: borys3kk <szymon.banys01@wp.pl>
Date: Wed, 18 Jun 2025 15:24:09 +0200
Subject: [PATCH 2/5] fix jumpy animation

---
 src/hooks/useSidePanel.ts | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/src/hooks/useSidePanel.ts b/src/hooks/useSidePanel.ts
index 9116fb0de43f..bf636790560f 100644
--- a/src/hooks/useSidePanel.ts
+++ b/src/hooks/useSidePanel.ts
@@ -75,13 +75,9 @@ function useSidePanel() {
     const prevShouldHideSidePanel = usePrevious(shouldHideSidePanel);
 
     useEffect(() => {
-        if (shouldHideSidePanel && prevShouldHideSidePanel) {
-            sidePanelTranslateX.current.setValue(sidePanelWidth);
-            sidePanelOffset.current.setValue(shouldApplySidePanelOffset ? variables.sideBarWidth : 0);
-            return;
+        if (!shouldHideSidePanel && prevShouldHideSidePanel) {
+            setIsSidePanelTransitionEnded(false);
         }
-        setIsSidePanelTransitionEnded(false);
-
         Animated.parallel([
             Animated.timing(sidePanelOffset.current, {
                 toValue: shouldApplySidePanelOffset ? variables.sideBarWidth : 0,

From 91c876520203c8f3009ba29453f7a878952b76ee Mon Sep 17 00:00:00 2001
From: borys3kk <szymon.banys01@wp.pl>
Date: Tue, 24 Jun 2025 13:46:27 +0200
Subject: [PATCH 3/5] refactor useSidePanel

---
 src/hooks/useSidePanel.ts | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/hooks/useSidePanel.ts b/src/hooks/useSidePanel.ts
index bf636790560f..85edfc716ee4 100644
--- a/src/hooks/useSidePanel.ts
+++ b/src/hooks/useSidePanel.ts
@@ -72,12 +72,8 @@ function useSidePanel() {
     const shouldApplySidePanelOffset = isExtraLargeScreenWidth && !shouldHideSidePanel;
     const sidePanelOffset = useRef(new Animated.Value(shouldApplySidePanelOffset ? variables.sideBarWidth : 0));
     const sidePanelTranslateX = useRef(new Animated.Value(shouldHideSidePanel ? sidePanelWidth : 0));
-    const prevShouldHideSidePanel = usePrevious(shouldHideSidePanel);
-
     useEffect(() => {
-        if (!shouldHideSidePanel && prevShouldHideSidePanel) {
-            setIsSidePanelTransitionEnded(false);
-        }
+        setIsSidePanelTransitionEnded(false);
         Animated.parallel([
             Animated.timing(sidePanelOffset.current, {
                 toValue: shouldApplySidePanelOffset ? variables.sideBarWidth : 0,
@@ -90,7 +86,11 @@ function useSidePanel() {
                 useNativeDriver: true,
             }),
         ]).start(() => setIsSidePanelTransitionEnded(true));
-    }, [shouldHideSidePanel, shouldApplySidePanelOffset, sidePanelWidth, prevShouldHideSidePanel]);
+
+        // eslint-disable-next-line react-compiler/react-compiler
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [shouldHideSidePanel, shouldApplySidePanelOffset]);
+    // sidePanelWidth dependency caused the help panel content to slide in on window resize
 
     const openSidePanel = useCallback(() => {
         setIsSidePanelTransitionEnded(false);

From cc194e4528ee68522c00a08668988dd4c1dbf731 Mon Sep 17 00:00:00 2001
From: borys3kk <szymon.banys01@wp.pl>
Date: Fri, 27 Jun 2025 14:58:47 +0200
Subject: [PATCH 4/5] update comment

---
 src/hooks/useSidePanel.ts | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/hooks/useSidePanel.ts b/src/hooks/useSidePanel.ts
index 32176e806ee3..f4dfd29e311b 100644
--- a/src/hooks/useSidePanel.ts
+++ b/src/hooks/useSidePanel.ts
@@ -86,10 +86,9 @@ function useSidePanel() {
             }),
         ]).start(() => setIsSidePanelTransitionEnded(true));
 
-        // eslint-disable-next-line react-compiler/react-compiler
-        // eslint-disable-next-line react-hooks/exhaustive-deps
+        // sidePanelWidth dependency caused the help panel content to slide in on window resize
+        // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
     }, [shouldHideSidePanel, shouldApplySidePanelOffset]);
-    // sidePanelWidth dependency caused the help panel content to slide in on window resize
 
     const openSidePanel = useCallback(() => {
         setIsSidePanelTransitionEnded(false);

From c03f832f2eef5221eb6969cb167d916b89ac9ec7 Mon Sep 17 00:00:00 2001
From: borys3kk <szymon.banys01@wp.pl>
Date: Fri, 27 Jun 2025 15:29:22 +0200
Subject: [PATCH 5/5] linearize comment

---
 src/hooks/useSidePanel.ts | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/hooks/useSidePanel.ts b/src/hooks/useSidePanel.ts
index f4dfd29e311b..b8d4e88f924f 100644
--- a/src/hooks/useSidePanel.ts
+++ b/src/hooks/useSidePanel.ts
@@ -86,8 +86,7 @@ function useSidePanel() {
             }),
         ]).start(() => setIsSidePanelTransitionEnded(true));
 
-        // sidePanelWidth dependency caused the help panel content to slide in on window resize
-        // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
+        // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps -- sidePanelWidth dependency caused the help panel content to slide in on window resize
     }, [shouldHideSidePanel, shouldApplySidePanelOffset]);
 
     const openSidePanel = useCallback(() => {
