diff --git a/native/components/nux-tips-context.react.js b/native/components/nux-tips-context.react.js --- a/native/components/nux-tips-context.react.js +++ b/native/components/nux-tips-context.react.js @@ -5,6 +5,7 @@ import { values } from 'lib/utils/objects.js'; import type { NUXTipRouteNames } from '../navigation/route-names.js'; +import { MutedTabTipRouteName } from '../navigation/route-names.js'; const nuxTip = Object.freeze({ COMMUNITY_DRAWER: 'community_drawer', @@ -24,7 +25,7 @@ [nuxTip.COMMUNITY_DRAWER]: { nextTip: nuxTip.MUTED, tooltipLocation: 'below', - nextRouteName: undefined, //TODO: update to the next screens name + nextRouteName: MutedTabTipRouteName, }, [nuxTip.MUTED]: { nextTip: undefined, diff --git a/native/navigation/app-navigator.react.js b/native/navigation/app-navigator.react.js --- a/native/navigation/app-navigator.react.js +++ b/native/navigation/app-navigator.react.js @@ -7,13 +7,17 @@ import ActionResultModal from './action-result-modal.react.js'; import { CommunityDrawerNavigator } from './community-drawer-navigator.react.js'; import CommunityDrawerTip from './community-drawer-tip.react.js'; +import MutedTabTip from './muted-tab-tip.react.js'; import { createOverlayNavigator } from './overlay-navigator.react.js'; import type { OverlayNavigationProp, OverlayNavigationHelpers, } from './overlay-navigator.react.js'; import type { RootNavigationProp } from './root-navigator.react.js'; -import { CommunityDrawerTipRouteName } from './route-names.js'; +import { + CommunityDrawerTipRouteName, + MutedTabTipRouteName, +} from './route-names.js'; import { UserAvatarCameraModalRouteName, ThreadAvatarCameraModalRouteName, @@ -159,6 +163,7 @@ name={CommunityDrawerTipRouteName} component={CommunityDrawerTip} /> + {pushHandler} diff --git a/native/navigation/muted-tab-tip.react.js b/native/navigation/muted-tab-tip.react.js new file mode 100644 --- /dev/null +++ b/native/navigation/muted-tab-tip.react.js @@ -0,0 +1,116 @@ +// @flow + +import { useRoute } from '@react-navigation/core'; +import * as React from 'react'; +import { Animated, Text, View } from 'react-native'; +import { TabBarItem } from 'react-native-tab-view'; + +import { useCurrentUserFID } from 'lib/utils/farcaster-utils.js'; + +import { backgroundChatThreadListOptions } from '../chat/chat-options.js'; +import { useSelector } from '../redux/redux-utils.js'; +import { useStyles } from '../themes/colors.js'; +import { LightTheme, DarkTheme } from '../themes/navigation.js'; +import { + type NUXTipsOverlayProps, + createNUXTipsOverlay, +} from '../tooltip/nux-tips-overlay.react.js'; + +const mutedTabTipTextBase = + 'When you mute a chat, it automatically gets moved to this tab.'; +const mutedTabTipTextIfFID = + ' When Comm automatically adds you to a community associated with a ' + + 'Farcaster channel you follow, we mute them by default.'; + +const dummyCallback = () => {}; +const dummyNavigationState = { index: 0, routes: [] }; + +const unboundStyles = { + button: { + flexDirection: 'row', + backgroundColor: 'tabBarBackground', + }, + label: { + textAlign: 'center', + textTransform: 'uppercase', + fontSize: 13, + margin: 4, + backgroundColor: 'transparent', + }, + icon: { + height: 24, + width: 24, + }, +}; + +function WrappedChatTabBarButton(): React.Node { + const { title, tabBarIcon: Icon } = backgroundChatThreadListOptions; + + const position = React.useRef(() => new Animated.Value(0)); + const route = useRoute(); + + const activeTheme = useSelector(state => state.globalThemeInfo.activeTheme); + const color = React.useMemo( + () => + activeTheme === 'dark' ? DarkTheme.colors.text : LightTheme.colors.text, + [activeTheme], + ); + + const styles = useStyles(unboundStyles); + + const renderLabel = React.useCallback( + ({ color: labelColor }: { color: string, ... }) => { + return {title}; + }, + [styles.label, title], + ); + + const renderIcon = React.useCallback( + ({ color: iconColor }: { color: string, ... }) => { + return ( + + + + ); + }, + [styles.icon], + ); + + const renderLabelText = React.useCallback(() => title, [title]); + + return ( + + ); +} + +function MutedTabTip(props: NUXTipsOverlayProps<'MutedTabTip'>): React.Node { + const fid = useCurrentUserFID(); + const text = React.useMemo(() => { + if (!fid) { + return mutedTabTipTextBase; + } + return mutedTabTipTextBase + mutedTabTipTextIfFID; + }, [fid]); + + const MutedTabTipComponent: React.ComponentType< + NUXTipsOverlayProps<'MutedTabTip'>, + > = createNUXTipsOverlay(WrappedChatTabBarButton, text); + + return ; +} + +export default MutedTabTip; diff --git a/native/navigation/overlay-navigator.react.js b/native/navigation/overlay-navigator.react.js --- a/native/navigation/overlay-navigator.react.js +++ b/native/navigation/overlay-navigator.react.js @@ -40,10 +40,14 @@ scrollBlockingModals, TabNavigatorRouteName, CommunityDrawerTipRouteName, + MutedTabTipRouteName, } from './route-names.js'; import { isMessageTooltipKey } from '../chat/utils.js'; -const newReanimatedRoutes = new Set([CommunityDrawerTipRouteName]); +const newReanimatedRoutes = new Set([ + CommunityDrawerTipRouteName, + MutedTabTipRouteName, +]); export type OverlayNavigationHelpers = { diff --git a/native/navigation/route-names.js b/native/navigation/route-names.js --- a/native/navigation/route-names.js +++ b/native/navigation/route-names.js @@ -169,6 +169,7 @@ export const ThreadSettingsNotificationsRouteName = 'ThreadSettingsNotifications'; export const CommunityDrawerTipRouteName = 'CommunityDrawerTip'; +export const MutedTabTipRouteName = 'MutedTabTip'; export type RootParamList = { +LoggedOutModal: void, @@ -199,7 +200,9 @@ +RestoreSIWEBackup: RestoreSIWEBackupParams, }; -export type NUXTipRouteNames = typeof CommunityDrawerTipRouteName; +export type NUXTipRouteNames = + | typeof CommunityDrawerTipRouteName + | typeof MutedTabTipRouteName; export type MessageTooltipRouteNames = | typeof RobotextMessageTooltipModalRouteName @@ -229,6 +232,7 @@ +VideoPlaybackModal: VideoPlaybackModalParams, +TogglePinModal: TogglePinModalParams, +CommunityDrawerTip: NUXTipsOverlayParams, + +MutedTabTip: NUXTipsOverlayParams, ...TooltipModalParamList, };