[Clipclops] New routes with placeholder screens (#3725)

* add new routes with placeholder screens

* gate content

* add filled envelope style

* swap filled state

* switch to `useAgent`

src/view/shell/bottom-bar/BottomBar.tsx

@@ -24,6 +24,7 @@ import {
 } from '#/lib/icons'
 import {clamp} from '#/lib/numbers'
 import {getTabState, TabState} from '#/lib/routes/helpers'
+import {useGate} from '#/lib/statsig/statsig'
 import {s} from '#/lib/styles'
 import {emitSoftReset} from '#/state/events'
 import {useUnreadNotifications} from '#/state/queries/notifications/unread'
@@ -39,9 +40,17 @@ import {Logo} from '#/view/icons/Logo'
 import {Logotype} from '#/view/icons/Logotype'
 import {useDialogControl} from '#/components/Dialog'
 import {SwitchAccountDialog} from '#/components/dialogs/SwitchAccount'
+import {Envelope_Stroke2_Corner0_Rounded as Envelope} from '#/components/icons/Envelope'
+import {Envelope_Filled_Stroke2_Corner0_Rounded as EnvelopeFilled} from '#/components/icons/Envelope'
 import {styles} from './BottomBarStyles'
 
-type TabOptions = 'Home' | 'Search' | 'Notifications' | 'MyProfile' | 'Feeds'
+type TabOptions =
+  | 'Home'
+  | 'Search'
+  | 'Notifications'
+  | 'MyProfile'
+  | 'Feeds'
+  | 'Messages'
 
 export function BottomBar({navigation}: BottomTabBarProps) {
   const {hasSession, currentAccount} = useSession()
@@ -50,8 +59,14 @@ export function BottomBar({navigation}: BottomTabBarProps) {
   const safeAreaInsets = useSafeAreaInsets()
   const {track} = useAnalytics()
   const {footerHeight} = useShellLayout()
-  const {isAtHome, isAtSearch, isAtFeeds, isAtNotifications, isAtMyProfile} =
-    useNavigationTabState()
+  const {
+    isAtHome,
+    isAtSearch,
+    isAtFeeds,
+    isAtNotifications,
+    isAtMyProfile,
+    isAtMessages,
+  } = useNavigationTabState()
   const numUnreadNotifications = useUnreadNotifications()
   const {footerMinimalShellTransform} = useMinimalShellMode()
   const {data: profile} = useProfileQuery({did: currentAccount?.did})
@@ -60,6 +75,7 @@ export function BottomBar({navigation}: BottomTabBarProps) {
   const dedupe = useDedupe()
   const accountSwitchControl = useDialogControl()
   const playHaptic = useHaptics()
+  const gate = useGate()
 
   const showSignIn = React.useCallback(() => {
     closeAllActiveElements()
@@ -104,6 +120,10 @@ export function BottomBar({navigation}: BottomTabBarProps) {
     onPressTab('MyProfile')
   }, [onPressTab])
 
+  const onPressMessages = React.useCallback(() => {
+    onPressTab('Messages')
+  }, [onPressTab])
+
   const onLongPressProfile = React.useCallback(() => {
     playHaptic()
     accountSwitchControl.open()
@@ -220,6 +240,28 @@ export function BottomBar({navigation}: BottomTabBarProps) {
                   : `${numUnreadNotifications} unread`
               }
             />
+            {gate('dms') && (
+              <Btn
+                testID="bottomBarMessagesBtn"
+                icon={
+                  isAtMessages ? (
+                    <EnvelopeFilled
+                      size="lg"
+                      style={[styles.ctrlIcon, pal.text, styles.feedsIcon]}
+                    />
+                  ) : (
+                    <Envelope
+                      size="lg"
+                      style={[styles.ctrlIcon, pal.text, styles.feedsIcon]}
+                    />
+                  )
+                }
+                onPress={onPressMessages}
+                accessibilityRole="tab"
+                accessibilityLabel={_(msg`Messages`)}
+                accessibilityHint=""
+              />
+            )}
             <Btn
               testID="bottomBarProfileBtn"
               icon={

src/view/shell/bottom-bar/BottomBarStyles.tsx

@@ -1,4 +1,5 @@
 import {StyleSheet} from 'react-native'
+
 import {colors} from 'lib/styles'
 
 export const styles = StyleSheet.create({
@@ -65,6 +66,9 @@ export const styles = StyleSheet.create({
   profileIcon: {
     top: -4,
   },
+  messagesIcon: {
+    top: 2,
+  },
   onProfile: {
     borderWidth: 1,
     borderRadius: 100,

src/view/shell/bottom-bar/BottomBarWeb.tsx

@@ -1,37 +1,41 @@
 import React from 'react'
-import {usePalette} from 'lib/hooks/usePalette'
-import {useNavigationState} from '@react-navigation/native'
+import {View} from 'react-native'
 import Animated from 'react-native-reanimated'
 import {useSafeAreaInsets} from 'react-native-safe-area-context'
-import {View} from 'react-native'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
-import {getCurrentRoute, isTab} from 'lib/routes/helpers'
-import {styles} from './BottomBarStyles'
-import {clamp} from 'lib/numbers'
+import {useNavigationState} from '@react-navigation/native'
+
+import {useMinimalShellMode} from '#/lib/hooks/useMinimalShellMode'
+import {usePalette} from '#/lib/hooks/usePalette'
 import {
   BellIcon,
   BellIconSolid,
+  HashtagIcon,
   HomeIcon,
   HomeIconSolid,
   MagnifyingGlassIcon2,
   MagnifyingGlassIcon2Solid,
-  HashtagIcon,
   UserIcon,
   UserIconSolid,
-} from 'lib/icons'
-import {Link} from 'view/com/util/Link'
-import {useMinimalShellMode} from 'lib/hooks/useMinimalShellMode'
-import {makeProfileLink} from 'lib/routes/links'
-import {CommonNavigatorParams} from 'lib/routes/types'
+} from '#/lib/icons'
+import {clamp} from '#/lib/numbers'
+import {getCurrentRoute, isTab} from '#/lib/routes/helpers'
+import {makeProfileLink} from '#/lib/routes/links'
+import {CommonNavigatorParams} from '#/lib/routes/types'
+import {useGate} from '#/lib/statsig/statsig'
+import {s} from '#/lib/styles'
 import {useSession} from '#/state/session'
 import {useLoggedOutViewControls} from '#/state/shell/logged-out'
 import {useCloseAllActiveElements} from '#/state/util'
 import {Button} from '#/view/com/util/forms/Button'
 import {Text} from '#/view/com/util/text/Text'
-import {s} from 'lib/styles'
 import {Logo} from '#/view/icons/Logo'
 import {Logotype} from '#/view/icons/Logotype'
+import {Link} from 'view/com/util/Link'
+import {Envelope_Stroke2_Corner0_Rounded as Envelope} from '#/components/icons/Envelope'
+import {Envelope_Filled_Stroke2_Corner0_Rounded as EnvelopeFilled} from '#/components/icons/Envelope'
+import {styles} from './BottomBarStyles'
 
 export function BottomBarWeb() {
   const {_} = useLingui()
@@ -41,6 +45,7 @@ export function BottomBarWeb() {
   const {footerMinimalShellTransform} = useMinimalShellMode()
   const {requestSwitchToAccount} = useLoggedOutViewControls()
   const closeAllActiveElements = useCloseAllActiveElements()
+  const gate = useGate()
 
   const showSignIn = React.useCallback(() => {
     closeAllActiveElements()
@@ -117,6 +122,19 @@ export function BottomBarWeb() {
                   )
                 }}
               </NavItem>
+              {gate('dms') && (
+                <NavItem routeName="Messages" href="/messages">
+                  {({isActive}) => {
+                    const Icon = isActive ? EnvelopeFilled : Envelope
+                    return (
+                      <Icon
+                        size="lg"
+                        style={[styles.ctrlIcon, pal.text, styles.messagesIcon]}
+                      />
+                    )
+                  }}
+                </NavItem>
+              )}
               <NavItem
                 routeName="Profile"
                 href={

src/view/shell/desktop/LeftNav.tsx

@@ -12,6 +12,7 @@ import {
   useNavigationState,
 } from '@react-navigation/native'
 
+import {useGate} from '#/lib/statsig/statsig'
 import {isInvalidHandle} from '#/lib/strings/handles'
 import {emitSoftReset} from '#/state/events'
 import {useFetchHandle} from '#/state/queries/handle'
@@ -46,6 +47,8 @@ import {LoadingPlaceholder} from 'view/com/util/LoadingPlaceholder'
 import {PressableWithHover} from 'view/com/util/PressableWithHover'
 import {Text} from 'view/com/util/text/Text'
 import {UserAvatar} from 'view/com/util/UserAvatar'
+import {Envelope_Stroke2_Corner0_Rounded as Envelope} from '#/components/icons/Envelope'
+import {Envelope_Filled_Stroke2_Corner0_Rounded as EnvelopeFilled} from '#/components/icons/Envelope'
 import {router} from '../../../routes'
 
 function ProfileCard() {
@@ -272,6 +275,7 @@ export function DesktopLeftNav() {
   const {_} = useLingui()
   const {isDesktop, isTablet} = useWebMediaQueries()
   const numUnread = useUnreadNotifications()
+  const gate = useGate()
 
   if (!hasSession && !isDesktop) {
     return null
@@ -346,6 +350,16 @@ export function DesktopLeftNav() {
             }
             label={_(msg`Notifications`)}
           />
+          {gate('dms') && (
+            <NavItem
+              href="/messages"
+              icon={<Envelope style={pal.text} width={isDesktop ? 26 : 30} />}
+              iconFilled={
+                <EnvelopeFilled style={pal.text} width={isDesktop ? 26 : 30} />
+              }
+              label={_(msg`Messages`)}
+            />
+          )}
           <NavItem
             href="/feeds"
             icon={