Merge pull request #92146 from Expensify/youssef_inbox_filters

[Payment due @parasharrajat] Inbox filters

Author: Gonals

src/CONST/index.ts

@@ -2334,6 +2334,11 @@ const CONST = {
         GSD: 'gsd',
         DEFAULT: 'default',
     },
+    INBOX_TAB: {
+        ALL: 'all',
+        TODO: 'todo',
+        UNREAD: 'unread',
+    },
     THEME: {
         DEFAULT: 'system',
         FALLBACK: 'dark',

src/ONYXKEYS.ts

@@ -172,6 +172,9 @@ const ONYXKEYS = {
     /** Contains the user preference for the LHN priority mode */
     NVP_PRIORITY_MODE: 'nvp_priorityMode',
 
+    /** Contains the user preference for the active inbox tab filter */
+    NVP_INBOX_TAB: 'nvp_inboxTab',
+
     /** Contains the users's block expiration (if they have one) */
     NVP_BLOCKED_FROM_CONCIERGE: 'nvp_private_blockedFromConcierge',
 
@@ -1477,6 +1480,7 @@ type OnyxValuesMapping = {
     [ONYXKEYS.BETA_CONFIGURATION]: OnyxTypes.BetaConfiguration;
     [ONYXKEYS.NVP_MUTED_PLATFORMS]: Partial<Record<Platform, true>>;
     [ONYXKEYS.NVP_PRIORITY_MODE]: ValueOf<typeof CONST.PRIORITY_MODE>;
+    [ONYXKEYS.NVP_INBOX_TAB]: ValueOf<typeof CONST.INBOX_TAB>;
     [ONYXKEYS.NVP_BLOCKED_FROM_CONCIERGE]: OnyxTypes.BlockedFromConcierge;
     [ONYXKEYS.QUEUE_FLUSHED_DATA]: AnyOnyxUpdate[];
     [ONYXKEYS.TRANSACTIONS_PENDING_3DS_REVIEW]: OnyxTypes.TransactionsPending3DSReview;

src/components/LHNOptionsList/LHNEmptyState.tsx

@@ -3,20 +3,51 @@ import {View} from 'react-native';
 import type {BlockingViewProps} from '@components/BlockingViews/BlockingView';
 import BlockingView from '@components/BlockingViews/BlockingView';
 import Icon from '@components/Icon';
+import Text from '@components/Text';
 import TextBlock from '@components/TextBlock';
+import TextLink from '@components/TextLink';
 import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset';
 import useLocalize from '@hooks/useLocalize';
+import {useSidebarOrderedReportsActions, useSidebarOrderedReportsState} from '@hooks/useSidebarOrderedReports';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import variables from '@styles/variables';
+import CONST from '@src/CONST';
 import useEmptyLHNIllustration from './useEmptyLHNIllustration';
 
 function LHNEmptyState() {
     const theme = useTheme();
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const expensifyIcons = useMemoizedLazyExpensifyIcons(['MagnifyingGlass', 'Plus']);
-    const emptyLHNIllustration = useEmptyLHNIllustration();
+    const emptyLHNIllustration = useEmptyLHNIllustration() as BlockingViewProps;
+    const {activeTab} = useSidebarOrderedReportsState();
+    const {setActiveTab} = useSidebarOrderedReportsActions();
+
+    if (activeTab === CONST.INBOX_TAB.UNREAD || activeTab === CONST.INBOX_TAB.TODO) {
+        const title = activeTab === CONST.INBOX_TAB.UNREAD ? translate('common.emptyLHN.noUnreadChats') : translate('common.emptyLHN.noTodos');
+        const caughtUpSubtitle = (
+            <View style={[styles.alignItemsCenter, styles.justifyContentCenter]}>
+                <Text style={[styles.textAlignCenter, styles.textSupporting]}>{translate('common.emptyLHN.caughtUp')}</Text>
+                <TextLink
+                    onPress={() => setActiveTab(CONST.INBOX_TAB.ALL)}
+                    style={[styles.textStrong, styles.mt5, styles.ph4, styles.textAlignCenter]}
+                >
+                    {translate('common.emptyLHN.seeAllChats')}
+                </TextLink>
+            </View>
+        );
+
+        return (
+            <BlockingView
+                {...emptyLHNIllustration}
+                title={title}
+                titleStyles={styles.mb2}
+                CustomSubtitle={caughtUpSubtitle}
+                accessibilityLabel={title}
+            />
+        );
+    }
 
     const subtitle = (
         <View style={[styles.alignItemsCenter, styles.flexRow, styles.justifyContentCenter, styles.flexWrap, styles.textAlignCenter]}>
@@ -56,7 +87,7 @@ function LHNEmptyState() {
 
     return (
         <BlockingView
-            {...(emptyLHNIllustration as BlockingViewProps)}
+            {...emptyLHNIllustration}
             title={translate('common.emptyLHN.title')}
             CustomSubtitle={subtitle}
             accessibilityLabel={translate('common.emptyLHN.title')}

src/components/ScrollOffsetContextProvider.tsx

@@ -61,21 +61,25 @@ function getKey(route: PlatformStackRouteProp<ParamListBase> | NavigationPartial
 
 function ScrollOffsetContextProvider({children}: ScrollOffsetContextProviderProps) {
     const [priorityMode] = useOnyx(ONYXKEYS.NVP_PRIORITY_MODE);
+    const [inboxTab] = useOnyx(ONYXKEYS.NVP_INBOX_TAB);
     const scrollOffsetsRef = useRef<Record<string, number>>({});
     const previousPriorityMode = usePrevious(priorityMode);
+    const previousInboxTab = usePrevious(inboxTab);
 
     useEffect(() => {
-        if (previousPriorityMode === null || previousPriorityMode === priorityMode) {
+        const priorityModeChanged = previousPriorityMode !== null && previousPriorityMode !== priorityMode;
+        const inboxTabChanged = previousInboxTab !== null && previousInboxTab !== inboxTab;
+        if (!priorityModeChanged && !inboxTabChanged) {
             return;
         }
 
-        // If the priority mode changes, we need to clear the scroll offsets for the home and search screens because it affects the size of the elements and scroll positions wouldn't be correct.
+        // If the priority mode or inbox tab changes, we need to clear the scroll offsets for the home and search screens because it affects the size of the elements and scroll positions wouldn't be correct.
         for (const key of Object.keys(scrollOffsetsRef.current)) {
             if (key.includes(SCREENS.INBOX) || key.includes(SCREENS.SEARCH.ROOT)) {
                 delete scrollOffsetsRef.current[key];
             }
         }
-    }, [priorityMode, previousPriorityMode]);
+    }, [priorityMode, previousPriorityMode, inboxTab, previousInboxTab]);
 
     const saveScrollOffset: ScrollOffsetContextValue['saveScrollOffset'] = useCallback((route, scrollOffset) => {
         scrollOffsetsRef.current[getKey(route)] = scrollOffset;

src/components/TabSelector/TabSelectorBase.tsx

@@ -26,6 +26,7 @@ function TabSelectorBase({
     position,
     shouldShowLabelWhenInactive = true,
     equalWidth = false,
+    contentContainerStyles,
 }: TabSelectorBaseProps) {
     const theme = useTheme();
     const styles = useThemeStyles();
@@ -61,7 +62,11 @@ function TabSelectorBase({
             }}
             ref={containerRef}
             style={styles.scrollableTabSelector}
-            contentContainerStyle={styles.tabSelectorContentContainer}
+            // On iOS a horizontal ScrollView lays out its content along an unbounded main axis, so flex-1 tabs
+            // (equalWidth) divide their intrinsic content width instead of the viewport. Giving the content
+            // container a definite width lets the flex children split it evenly. Scoped to equalWidth so normal
+            // overflowing/scrollable tab rows are not constrained.
+            contentContainerStyle={[styles.tabSelectorContentContainer, equalWidth && styles.w100, contentContainerStyles]}
             horizontal
             showsHorizontalScrollIndicator={false}
             keyboardShouldPersistTaps="handled"
@@ -119,6 +124,8 @@ function TabSelectorBase({
                         shouldShowLabelWhenInactive={shouldShowLabelWhenInactive}
                         equalWidth={equalWidth}
                         badgeText={tab.badgeText}
+                        isBadgeCondensed={tab.isBadgeCondensed}
+                        badgeStyles={tab.badgeStyles}
                         pendingAction={tab.pendingAction}
                         isDisabled={tab.isDisabled}
                     />

src/components/TabSelector/TabSelectorItem.tsx

@@ -31,6 +31,8 @@ function TabSelectorItem({
     sentryLabel,
     equalWidth = false,
     badgeText,
+    isBadgeCondensed = false,
+    badgeStyles,
     isDisabled = false,
     pendingAction,
 }: TabSelectorItemProps) {
@@ -90,6 +92,8 @@ function TabSelectorItem({
                 <Badge
                     text={badgeText}
                     success
+                    isCondensed={isBadgeCondensed}
+                    badgeStyles={badgeStyles}
                 />
             )}
         </AnimatedPressableWithFeedback>

src/components/TabSelector/types.ts

@@ -1,6 +1,6 @@
 import type {MaterialTopTabBarProps} from '@react-navigation/material-top-tabs';
 // eslint-disable-next-line no-restricted-imports
-import type {Animated} from 'react-native';
+import type {Animated, StyleProp, ViewStyle} from 'react-native';
 import type {ThemeColors} from '@styles/theme/types';
 import type {PendingAction} from '@src/types/onyx/OnyxCommon';
 import type IconAsset from '@src/types/utils/IconAsset';
@@ -39,6 +39,12 @@ type TabSelectorBaseItem = WithSentryLabel & {
     /** Text to display on the badge on the tab. */
     badgeText?: string;
 
+    /** Whether the tab's badge should use the condensed (smaller) style. */
+    isBadgeCondensed?: boolean;
+
+    /** Additional styles for the tab's badge. */
+    badgeStyles?: StyleProp<ViewStyle>;
+
     /** Whether this tab is disabled */
     isDisabled?: boolean;
 
@@ -70,6 +76,9 @@ type TabSelectorBaseProps = {
 
     /** Whether tabs should have equal width. */
     equalWidth?: boolean;
+
+    /** Additional styles for the tabs' scroll content container. */
+    contentContainerStyles?: StyleProp<ViewStyle>;
 };
 
 type TabSelectorItemProps = WithSentryLabel & {
@@ -112,6 +121,12 @@ type TabSelectorItemProps = WithSentryLabel & {
     /** Text to display on the badge on the tab. */
     badgeText?: string;
 
+    /** Whether the tab's badge should use the condensed (smaller) style. */
+    isBadgeCondensed?: boolean;
+
+    /** Additional styles for the tab's badge. */
+    badgeStyles?: StyleProp<ViewStyle>;
+
     /** Whether this tab is disabled */
     isDisabled?: boolean;