Page MenuHomePhabricator
Files F3498111

D13084.id43794.diff
No OneTemporary
Actions

D13084.id43794.diff
View Options

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}
/>
+ <App.Screen name={MutedTabTipRouteName} component={MutedTabTip} />
<App.Screen name={TogglePinModalRouteName} component={TogglePinModal} />
</App.Navigator>
{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 <Text style={[styles.label, { color: labelColor }]}>{title}</Text>;
+ },
+ [styles.label, title],
+ );
+
+ const renderIcon = React.useCallback(
+ ({ color: iconColor }: { color: string, ... }) => {
+ return (
+ <View style={styles.icon}>
+ <Icon color={iconColor} />
+ </View>
+ );
+ },
+ [styles.icon],
+ );
+
+ const renderLabelText = React.useCallback(() => title, [title]);
+
+ return (
+ <TabBarItem
+ position={position.current}
+ route={route}
+ navigationState={dummyNavigationState}
+ onPress={dummyCallback}
+ onLongPress={dummyCallback}
+ style={styles.button}
+ getLabelText={renderLabelText}
+ getAccessible={dummyCallback}
+ getAccessibilityLabel={dummyCallback}
+ renderIcon={renderIcon}
+ getTestID={dummyCallback}
+ activeColor={color}
+ renderLabel={renderLabel}
+ />
+ );
+}
+
+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 <MutedTabTipComponent {...props} />;
+}
+
+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<ParamList: ParamListBase = ParamListBase> =
{
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,
};

File Metadata

Mime Type
text/plain
Expires
Fri, Dec 20, 8:48 PM (14 h, 31 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2682900
Default Alt Text
D13084.id43794.diff (7 KB)

Event Timeline