From 3048d3742dd278bbbc03906e561ea9796915f966 Mon Sep 17 00:00:00 2001 From: nkdengineer Date: Tue, 4 Feb 2025 17:20:02 +0700 Subject: [PATCH 01/14] fix loading indicator when the app is loading --- src/pages/home/sidebar/SidebarLinks.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/home/sidebar/SidebarLinks.tsx b/src/pages/home/sidebar/SidebarLinks.tsx index e2df0ff6f33a..bd4e26fc3535 100644 --- a/src/pages/home/sidebar/SidebarLinks.tsx +++ b/src/pages/home/sidebar/SidebarLinks.tsx @@ -94,7 +94,7 @@ function SidebarLinks({insets, optionListItems, isLoading, priorityMode = CONST. onFirstItemRendered={App.setSidebarLoaded} /> {!!isLoading && optionListItems?.length === 0 && ( - + )} From d430a4a61998f21273643654bd7c418fddace6f6 Mon Sep 17 00:00:00 2001 From: nkdengineer Date: Tue, 4 Feb 2025 17:24:48 +0700 Subject: [PATCH 02/14] fix lint --- src/pages/home/sidebar/SidebarLinks.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/pages/home/sidebar/SidebarLinks.tsx b/src/pages/home/sidebar/SidebarLinks.tsx index bd4e26fc3535..2e84f9805f6a 100644 --- a/src/pages/home/sidebar/SidebarLinks.tsx +++ b/src/pages/home/sidebar/SidebarLinks.tsx @@ -9,9 +9,9 @@ import useLocalize from '@hooks/useLocalize'; import useResponsiveLayout from '@hooks/useResponsiveLayout'; import useStyleUtils from '@hooks/useStyleUtils'; import useThemeStyles from '@hooks/useThemeStyles'; +import {confirmReadyToOpenApp, setSidebarLoaded} from '@libs/actions/App'; import Navigation from '@libs/Navigation/Navigation'; import * as ReportActionContextMenu from '@pages/home/report/ContextMenu/ReportActionContextMenu'; -import * as App from '@userActions/App'; import CONST from '@src/CONST'; import ROUTES from '@src/ROUTES'; import type {Report} from '@src/types/onyx'; @@ -44,7 +44,7 @@ function SidebarLinks({insets, optionListItems, isLoading, priorityMode = CONST. const {shouldUseNarrowLayout} = useResponsiveLayout(); useEffect(() => { - App.confirmReadyToOpenApp(); + confirmReadyToOpenApp(); }, []); useEffect(() => { @@ -91,7 +91,7 @@ function SidebarLinks({insets, optionListItems, isLoading, priorityMode = CONST. onSelectRow={showReportPage} shouldDisableFocusOptions={shouldUseNarrowLayout} optionMode={viewMode} - onFirstItemRendered={App.setSidebarLoaded} + onFirstItemRendered={setSidebarLoaded} /> {!!isLoading && optionListItems?.length === 0 && ( From 1118aa6a52f78d5cc1f5ae354a23baf7a19f6030 Mon Sep 17 00:00:00 2001 From: nkdengineer Date: Tue, 11 Feb 2025 00:53:30 +0700 Subject: [PATCH 03/14] add padding top for search top bar wrapper --- src/styles/index.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/styles/index.ts b/src/styles/index.ts index 7eaeaeff459a..8d3422afcf3c 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -3718,6 +3718,7 @@ const styles = (theme: ThemeColors) => position: 'absolute', zIndex: variables.searchTopBarZIndex, backgroundColor: theme.appBG, + paddingTop: 12, }, threeDotsPopoverOffset: (windowWidth: number) => From 2e389614e450f4e0cd7aaa7ba757395fe1a53cf6 Mon Sep 17 00:00:00 2001 From: nkdengineer Date: Fri, 14 Feb 2025 15:39:10 +0700 Subject: [PATCH 04/14] fix loading thin while scrolling --- src/components/Navigation/TopBar.tsx | 2 +- src/styles/index.ts | 5 +++++ 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/src/components/Navigation/TopBar.tsx b/src/components/Navigation/TopBar.tsx index 775e60666bef..3909ca06297b 100644 --- a/src/components/Navigation/TopBar.tsx +++ b/src/components/Navigation/TopBar.tsx @@ -43,7 +43,7 @@ function TopBar({breadcrumbLabel, activeWorkspaceID, shouldDisplaySearch = true, const displaySearch = !isAnonymousUser && shouldDisplaySearch; return ( - + width: variables.sidebarAvatarSize, }, + topBarWrapper: { + ...sizing.w100, + marginBottom: 1, + }, + selectedAvatarBorder: { padding: 1, borderWidth: 2, From 03ca37b8a61c72867d853d321296ef0c021fa855 Mon Sep 17 00:00:00 2001 From: nkdengineer Date: Fri, 14 Feb 2025 15:43:34 +0700 Subject: [PATCH 05/14] fix lint error --- src/components/Navigation/TopBar.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/Navigation/TopBar.tsx b/src/components/Navigation/TopBar.tsx index 3909ca06297b..1beb5709fec5 100644 --- a/src/components/Navigation/TopBar.tsx +++ b/src/components/Navigation/TopBar.tsx @@ -10,10 +10,10 @@ import WorkspaceSwitcherButton from '@components/WorkspaceSwitcherButton'; import useLocalize from '@hooks/useLocalize'; import usePolicy from '@hooks/usePolicy'; import useThemeStyles from '@hooks/useThemeStyles'; +import {isAnonymousUser as isAnonymousUserUtil} from '@libs/actions/Session'; import Navigation from '@libs/Navigation/Navigation'; -import * as SearchQueryUtils from '@libs/SearchQueryUtils'; +import {buildCannedSearchQuery} from '@libs/SearchQueryUtils'; import SignInButton from '@pages/home/sidebar/SignInButton'; -import * as Session from '@userActions/Session'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; @@ -31,7 +31,7 @@ function TopBar({breadcrumbLabel, activeWorkspaceID, shouldDisplaySearch = true, const policy = usePolicy(activeWorkspaceID); const [session] = useOnyx(ONYXKEYS.SESSION, {selector: (sessionValue) => sessionValue && {authTokenType: sessionValue.authTokenType}}); const [isLoadingReportData] = useOnyx(ONYXKEYS.IS_LOADING_REPORT_DATA); - const isAnonymousUser = Session.isAnonymousUser(session); + const isAnonymousUser = isAnonymousUserUtil(session); const headerBreadcrumb = policy?.name ? {type: CONST.BREADCRUMB_TYPE.STRONG, text: policy.name} @@ -68,7 +68,7 @@ function TopBar({breadcrumbLabel, activeWorkspaceID, shouldDisplaySearch = true, accessibilityLabel={translate('common.cancel')} style={[styles.textBlue]} onPress={() => { - Navigation.goBack(ROUTES.SEARCH_CENTRAL_PANE.getRoute({query: SearchQueryUtils.buildCannedSearchQuery()})); + Navigation.goBack(ROUTES.SEARCH_CENTRAL_PANE.getRoute({query: buildCannedSearchQuery()})); }} > {translate('common.cancel')} From 4289617ccdd5829931a5da7bbda89c24f268c137 Mon Sep 17 00:00:00 2001 From: nkdengineer Date: Sun, 16 Feb 2025 23:44:21 +0700 Subject: [PATCH 06/14] use absolute style --- src/components/Navigation/TopBar.tsx | 2 +- src/styles/index.ts | 8 ++------ 2 files changed, 3 insertions(+), 7 deletions(-) diff --git a/src/components/Navigation/TopBar.tsx b/src/components/Navigation/TopBar.tsx index 1beb5709fec5..0e929b4ebcf5 100644 --- a/src/components/Navigation/TopBar.tsx +++ b/src/components/Navigation/TopBar.tsx @@ -43,7 +43,7 @@ function TopBar({breadcrumbLabel, activeWorkspaceID, shouldDisplaySearch = true, const displaySearch = !isAnonymousUser && shouldDisplaySearch; return ( - + width: variables.sidebarAvatarSize, }, - topBarWrapper: { - ...sizing.w100, - marginBottom: 1, - }, - selectedAvatarBorder: { padding: 1, borderWidth: 2, @@ -5424,7 +5419,8 @@ const styles = (theme: ThemeColors) => width: '100%', backgroundColor: theme.transparent, overflow: 'hidden', - marginBottom: -1, + position: 'absolute', + bottom: -1, }, progressBar: { From 8e2ddbadf2f799e62022f8d432d19b8a073f1399 Mon Sep 17 00:00:00 2001 From: nkdengineer Date: Tue, 18 Feb 2025 15:47:41 +0700 Subject: [PATCH 07/14] add zIndex for TopBar --- src/components/Navigation/TopBar.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Navigation/TopBar.tsx b/src/components/Navigation/TopBar.tsx index 0e929b4ebcf5..659734013381 100644 --- a/src/components/Navigation/TopBar.tsx +++ b/src/components/Navigation/TopBar.tsx @@ -43,7 +43,7 @@ function TopBar({breadcrumbLabel, activeWorkspaceID, shouldDisplaySearch = true, const displaySearch = !isAnonymousUser && shouldDisplaySearch; return ( - + Date: Tue, 18 Feb 2025 23:14:48 +0700 Subject: [PATCH 08/14] remove padding if scrolling in Reports --- src/components/LoadingBar.tsx | 2 +- src/pages/Search/SearchPageNarrow.tsx | 12 ++++++++++-- src/styles/index.ts | 1 - 3 files changed, 11 insertions(+), 4 deletions(-) diff --git a/src/components/LoadingBar.tsx b/src/components/LoadingBar.tsx index e6d1ec0cd66d..1a9ce89c1c29 100644 --- a/src/components/LoadingBar.tsx +++ b/src/components/LoadingBar.tsx @@ -15,7 +15,7 @@ function LoadingBar({shouldShow}: LoadingBarProps) { const styles = useThemeStyles(); useEffect(() => { - if (shouldShow) { + if (true) { // eslint-disable-next-line react-compiler/react-compiler left.set(0); width.set(0); diff --git a/src/pages/Search/SearchPageNarrow.tsx b/src/pages/Search/SearchPageNarrow.tsx index e8ea684f9990..96e2d4d19d34 100644 --- a/src/pages/Search/SearchPageNarrow.tsx +++ b/src/pages/Search/SearchPageNarrow.tsx @@ -57,8 +57,10 @@ function SearchPageNarrow({queryJSON, policyID, searchName}: SearchPageBottomTab const scrollOffset = useSharedValue(0); const topBarOffset = useSharedValue(StyleUtils.searchHeaderHeight); + const paddingTopValue = useSharedValue(12); const topBarAnimatedStyle = useAnimatedStyle(() => ({ top: topBarOffset.get(), + paddingTop: paddingTopValue.get(), })); const scrollHandler = useAnimatedScrollHandler({ @@ -71,9 +73,14 @@ function SearchPageNarrow({queryJSON, policyID, searchName}: SearchPageBottomTab const isScrollingDown = currentOffset > scrollOffset.get(); const distanceScrolled = currentOffset - scrollOffset.get(); if (isScrollingDown && contentOffset.y > TOO_CLOSE_TO_TOP_DISTANCE) { - topBarOffset.set(clamp(topBarOffset.get() - distanceScrolled, variables.minimalTopBarOffset, StyleUtils.searchHeaderHeight)); + const newTopBarOffset = clamp(topBarOffset.get() - distanceScrolled, variables.minimalTopBarOffset, StyleUtils.searchHeaderHeight); + topBarOffset.set(newTopBarOffset); + if (newTopBarOffset === variables.minimalTopBarOffset) { + paddingTopValue.set(0); + } } else if (!isScrollingDown && distanceScrolled < 0 && contentOffset.y + layoutMeasurement.height < contentSize.height - TOO_CLOSE_TO_BOTTOM_DISTANCE) { topBarOffset.set(withTiming(StyleUtils.searchHeaderHeight, {duration: ANIMATION_DURATION_IN_MS})); + paddingTopValue.set(12); } scrollOffset.set(currentOffset); }, @@ -84,9 +91,10 @@ function SearchPageNarrow({queryJSON, policyID, searchName}: SearchPageBottomTab if (windowHeight <= h) { return; } + paddingTopValue.set(12); topBarOffset.set(withTiming(StyleUtils.searchHeaderHeight, {duration: ANIMATION_DURATION_IN_MS})); }, - [windowHeight, topBarOffset, StyleUtils.searchHeaderHeight], + [windowHeight, paddingTopValue, topBarOffset, StyleUtils.searchHeaderHeight], ); const handleOnBackButtonPress = () => Navigation.goBack(ROUTES.SEARCH_CENTRAL_PANE.getRoute({query: buildCannedSearchQuery()})); diff --git a/src/styles/index.ts b/src/styles/index.ts index f819a77d6fde..1af9598be8d3 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -3772,7 +3772,6 @@ const styles = (theme: ThemeColors) => position: 'absolute', zIndex: variables.searchTopBarZIndex, backgroundColor: theme.appBG, - paddingTop: 12, }, threeDotsPopoverOffset: (windowWidth: number) => From 181d081bda4ac695a3e7137f3707ab8abe76f13e Mon Sep 17 00:00:00 2001 From: nkdengineer Date: Tue, 18 Feb 2025 23:17:53 +0700 Subject: [PATCH 09/14] remove log --- src/components/LoadingBar.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/LoadingBar.tsx b/src/components/LoadingBar.tsx index 1a9ce89c1c29..e6d1ec0cd66d 100644 --- a/src/components/LoadingBar.tsx +++ b/src/components/LoadingBar.tsx @@ -15,7 +15,7 @@ function LoadingBar({shouldShow}: LoadingBarProps) { const styles = useThemeStyles(); useEffect(() => { - if (true) { + if (shouldShow) { // eslint-disable-next-line react-compiler/react-compiler left.set(0); width.set(0); From 584d56abb93994dd2118bea0ef6fe7ee90d0b272 Mon Sep 17 00:00:00 2001 From: nkdengineer Date: Tue, 18 Feb 2025 23:20:27 +0700 Subject: [PATCH 10/14] replace with variable --- src/pages/Search/SearchPageNarrow.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/pages/Search/SearchPageNarrow.tsx b/src/pages/Search/SearchPageNarrow.tsx index 96e2d4d19d34..845527eb54d5 100644 --- a/src/pages/Search/SearchPageNarrow.tsx +++ b/src/pages/Search/SearchPageNarrow.tsx @@ -57,7 +57,7 @@ function SearchPageNarrow({queryJSON, policyID, searchName}: SearchPageBottomTab const scrollOffset = useSharedValue(0); const topBarOffset = useSharedValue(StyleUtils.searchHeaderHeight); - const paddingTopValue = useSharedValue(12); + const paddingTopValue = useSharedValue(styles.pt3.paddingTop); const topBarAnimatedStyle = useAnimatedStyle(() => ({ top: topBarOffset.get(), paddingTop: paddingTopValue.get(), @@ -80,7 +80,7 @@ function SearchPageNarrow({queryJSON, policyID, searchName}: SearchPageBottomTab } } else if (!isScrollingDown && distanceScrolled < 0 && contentOffset.y + layoutMeasurement.height < contentSize.height - TOO_CLOSE_TO_BOTTOM_DISTANCE) { topBarOffset.set(withTiming(StyleUtils.searchHeaderHeight, {duration: ANIMATION_DURATION_IN_MS})); - paddingTopValue.set(12); + paddingTopValue.set(styles.pt3.paddingTop); } scrollOffset.set(currentOffset); }, @@ -91,10 +91,10 @@ function SearchPageNarrow({queryJSON, policyID, searchName}: SearchPageBottomTab if (windowHeight <= h) { return; } - paddingTopValue.set(12); + paddingTopValue.set(styles.pt3.paddingTop); topBarOffset.set(withTiming(StyleUtils.searchHeaderHeight, {duration: ANIMATION_DURATION_IN_MS})); }, - [windowHeight, paddingTopValue, topBarOffset, StyleUtils.searchHeaderHeight], + [windowHeight, paddingTopValue, styles.pt3.paddingTop, topBarOffset, StyleUtils.searchHeaderHeight], ); const handleOnBackButtonPress = () => Navigation.goBack(ROUTES.SEARCH_CENTRAL_PANE.getRoute({query: buildCannedSearchQuery()})); From 1cf81456b9d07663485612d064e4c99a989843b6 Mon Sep 17 00:00:00 2001 From: nkdengineer Date: Wed, 19 Feb 2025 23:22:09 +0700 Subject: [PATCH 11/14] remove hardcode --- src/components/LoadingBar.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/LoadingBar.tsx b/src/components/LoadingBar.tsx index 1a9ce89c1c29..e6d1ec0cd66d 100644 --- a/src/components/LoadingBar.tsx +++ b/src/components/LoadingBar.tsx @@ -15,7 +15,7 @@ function LoadingBar({shouldShow}: LoadingBarProps) { const styles = useThemeStyles(); useEffect(() => { - if (true) { + if (shouldShow) { // eslint-disable-next-line react-compiler/react-compiler left.set(0); width.set(0); From a7ad6edf1dfe955c31511a4ed4601b2660d317a4 Mon Sep 17 00:00:00 2001 From: nkdengineer Date: Wed, 19 Feb 2025 23:29:30 +0700 Subject: [PATCH 12/14] remove log --- src/pages/Search/SearchPageNarrow.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/pages/Search/SearchPageNarrow.tsx b/src/pages/Search/SearchPageNarrow.tsx index 6af662ea4d4f..a891f1f06388 100644 --- a/src/pages/Search/SearchPageNarrow.tsx +++ b/src/pages/Search/SearchPageNarrow.tsx @@ -126,8 +126,6 @@ function SearchPageNarrow({queryJSON, policyID, searchName}: SearchPageBottomTab ); } - console.log(searchRouterListVisible); - return ( Date: Thu, 20 Feb 2025 22:29:53 +0700 Subject: [PATCH 13/14] update correct topbar minimal offset --- src/pages/Search/SearchPageNarrow.tsx | 12 ++---------- src/styles/index.ts | 1 + src/styles/variables.ts | 2 +- 3 files changed, 4 insertions(+), 11 deletions(-) diff --git a/src/pages/Search/SearchPageNarrow.tsx b/src/pages/Search/SearchPageNarrow.tsx index c6b964e18d58..9455231453d6 100644 --- a/src/pages/Search/SearchPageNarrow.tsx +++ b/src/pages/Search/SearchPageNarrow.tsx @@ -58,11 +58,9 @@ function SearchPageNarrow({queryJSON, policyID, searchName, shouldGroupByReports useHandleBackButton(handleBackButtonPress); const scrollOffset = useSharedValue(0); - const paddingTopValue = useSharedValue(styles.pt3.paddingTop); const topBarOffset = useSharedValue(StyleUtils.searchHeaderDefaultOffset); const topBarAnimatedStyle = useAnimatedStyle(() => ({ top: topBarOffset.get(), - paddingTop: paddingTopValue.get(), })); const scrollHandler = useAnimatedScrollHandler({ @@ -76,13 +74,8 @@ function SearchPageNarrow({queryJSON, policyID, searchName, shouldGroupByReports const distanceScrolled = currentOffset - scrollOffset.get(); if (isScrollingDown && contentOffset.y > TOO_CLOSE_TO_TOP_DISTANCE) { - const newTopBarOffset = clamp(topBarOffset.get() - distanceScrolled, variables.minimalTopBarOffset, StyleUtils.searchHeaderDefaultOffset); - if (newTopBarOffset === variables.minimalTopBarOffset) { - paddingTopValue.set(0); - } - topBarOffset.set(newTopBarOffset); + topBarOffset.set(clamp(topBarOffset.get() - distanceScrolled, variables.minimalTopBarOffset, StyleUtils.searchHeaderDefaultOffset)); } else if (!isScrollingDown && distanceScrolled < 0 && contentOffset.y + layoutMeasurement.height < contentSize.height - TOO_CLOSE_TO_BOTTOM_DISTANCE) { - paddingTopValue.set(styles.pt3.paddingTop); topBarOffset.set(withTiming(StyleUtils.searchHeaderDefaultOffset, {duration: ANIMATION_DURATION_IN_MS})); } scrollOffset.set(currentOffset); @@ -94,10 +87,9 @@ function SearchPageNarrow({queryJSON, policyID, searchName, shouldGroupByReports if (windowHeight <= h) { return; } - paddingTopValue.set(styles.pt3.paddingTop); topBarOffset.set(withTiming(StyleUtils.searchHeaderDefaultOffset, {duration: ANIMATION_DURATION_IN_MS})); }, - [windowHeight, paddingTopValue, styles.pt3.paddingTop, topBarOffset, StyleUtils.searchHeaderDefaultOffset], + [windowHeight, topBarOffset, StyleUtils.searchHeaderDefaultOffset], ); const handleOnBackButtonPress = () => Navigation.goBack(ROUTES.SEARCH_ROOT.getRoute({query: buildCannedSearchQuery()})); diff --git a/src/styles/index.ts b/src/styles/index.ts index 09a9d906680e..4bb97a0a84c2 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -3767,6 +3767,7 @@ const styles = (theme: ThemeColors) => }, narrowSearchHeaderStyle: { + paddingTop: 12, backgroundColor: theme.appBG, }, diff --git a/src/styles/variables.ts b/src/styles/variables.ts index f087a9a19373..e000bb885096 100644 --- a/src/styles/variables.ts +++ b/src/styles/variables.ts @@ -274,7 +274,7 @@ export default { inlineImagePreviewMinSize: 64, inlineImagePreviewMaxSize: 148, - minimalTopBarOffset: -106, + minimalTopBarOffset: -124, searchHeaderDefaultOffset: 0, searchListContentMarginTop: 116, searchTopBarZIndex: 9, From d109fc15114814c246698ee48acc2181e1da4371 Mon Sep 17 00:00:00 2001 From: nkdengineer Date: Thu, 27 Feb 2025 12:08:46 +0700 Subject: [PATCH 14/14] fix the empty view is cut off --- src/styles/variables.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/styles/variables.ts b/src/styles/variables.ts index e000bb885096..49bca86efdf3 100644 --- a/src/styles/variables.ts +++ b/src/styles/variables.ts @@ -276,7 +276,7 @@ export default { minimalTopBarOffset: -124, searchHeaderDefaultOffset: 0, - searchListContentMarginTop: 116, + searchListContentMarginTop: 124, searchTopBarZIndex: 9, searchTopBarHeight: 52, searchRouterInputMargin: 52,