From b2e7ba3dc69e975222037e8817a8ef94d5481207 Mon Sep 17 00:00:00 2001 From: borys3kk 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 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 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 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 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(() => {