Better reply prompt (#8474)

* restyle reply prompt

* hide bottom bar border for cleaner look

* use new border hiding hook in DMs

src/App.native.tsx

@@ -73,6 +73,7 @@ import {Provider as PortalProvider} from '#/components/Portal'
 import {Splash} from '#/Splash'
 import {BottomSheetProvider} from '../modules/bottom-sheet'
 import {BackgroundNotificationPreferencesProvider} from '../modules/expo-background-notification-handler/src/BackgroundNotificationHandlerProvider'
+import {Provider as HideBottomBarBorderProvider} from './lib/hooks/useHideBottomBarBorder'
 
 SplashScreen.preventAutoHideAsync()
 if (isIOS) {
@@ -152,14 +153,16 @@ function InnerApp() {
                                             <ProgressGuideProvider>
                                               <ServiceAccountManager>
                                                 <UnstablePostSourceProvider>
-                                                  <GestureHandlerRootView
+                                                  <HideBottomBarBorderProvider>
-                                                    style={s.h100pct}>
+                                                    <GestureHandlerRootView
-                                                    <IntentDialogProvider>
+                                                      style={s.h100pct}>
-                                                      <TestCtrls />
+                                                      <IntentDialogProvider>
-                                                      <Shell />
+                                                        <TestCtrls />
-                                                      <NuxDialogs />
+                                                        <Shell />
-                                                    </IntentDialogProvider>
+                                                        <NuxDialogs />
-                                                  </GestureHandlerRootView>
+                                                      </IntentDialogProvider>
+                                                    </GestureHandlerRootView>
+                                                  </HideBottomBarBorderProvider>
                                                 </UnstablePostSourceProvider>
                                               </ServiceAccountManager>
                                             </ProgressGuideProvider>

src/App.web.tsx

@@ -62,6 +62,7 @@ import {useStarterPackEntry} from '#/components/hooks/useStarterPackEntry'
 import {Provider as IntentDialogProvider} from '#/components/intents/IntentDialogs'
 import {Provider as PortalProvider} from '#/components/Portal'
 import {BackgroundNotificationPreferencesProvider} from '../modules/expo-background-notification-handler/src/BackgroundNotificationHandlerProvider'
+import {Provider as HideBottomBarBorderProvider} from './lib/hooks/useHideBottomBarBorder'
 
 /**
  * Begin geolocation ASAP
@@ -133,10 +134,12 @@ function InnerApp() {
                                               <ProgressGuideProvider>
                                                 <ServiceConfigProvider>
                                                   <UnstablePostSourceProvider>
-                                                    <IntentDialogProvider>
+                                                    <HideBottomBarBorderProvider>
-                                                      <Shell />
+                                                      <IntentDialogProvider>
-                                                      <NuxDialogs />
+                                                        <Shell />
-                                                    </IntentDialogProvider>
+                                                        <NuxDialogs />
+                                                      </IntentDialogProvider>
+                                                    </HideBottomBarBorderProvider>
                                                   </UnstablePostSourceProvider>
                                                 </ServiceConfigProvider>
                                               </ProgressGuideProvider>

src/lib/hooks/useHideBottomBarBorder.tsx

@@ -0,0 +1,50 @@
+import {createContext, useCallback, useContext, useState} from 'react'
+import {useFocusEffect} from '@react-navigation/native'
+
+type HideBottomBarBorderSetter = () => () => void
+
+const HideBottomBarBorderContext = createContext<boolean>(false)
+const HideBottomBarBorderSetterContext =
+  createContext<HideBottomBarBorderSetter | null>(null)
+
+export function useHideBottomBarBorderSetter() {
+  const hideBottomBarBorder = useContext(HideBottomBarBorderSetterContext)
+  if (!hideBottomBarBorder) {
+    throw new Error(
+      'useHideBottomBarBorderSetter must be used within a HideBottomBarBorderProvider',
+    )
+  }
+  return hideBottomBarBorder
+}
+
+export function useHideBottomBarBorderForScreen() {
+  const hideBorder = useHideBottomBarBorderSetter()
+
+  useFocusEffect(
+    useCallback(() => {
+      const cleanup = hideBorder()
+      return () => cleanup()
+    }, [hideBorder]),
+  )
+}
+
+export function useHideBottomBarBorder() {
+  return useContext(HideBottomBarBorderContext)
+}
+
+export function Provider({children}: {children: React.ReactNode}) {
+  const [refCount, setRefCount] = useState(0)
+
+  const setter = useCallback(() => {
+    setRefCount(prev => prev + 1)
+    return () => setRefCount(prev => prev - 1)
+  }, [])
+
+  return (
+    <HideBottomBarBorderSetterContext.Provider value={setter}>
+      <HideBottomBarBorderContext.Provider value={refCount > 0}>
+        {children}
+      </HideBottomBarBorderContext.Provider>
+    </HideBottomBarBorderSetterContext.Provider>
+  )
+}

src/screens/Messages/components/MessagesList.tsx

@@ -16,6 +16,7 @@ import {
   RichText,
 } from '@atproto/api'
 
+import {useHideBottomBarBorderForScreen} from '#/lib/hooks/useHideBottomBarBorder'
 import {ScrollProvider} from '#/lib/ScrollContext'
 import {shortenLinks, stripInvalidMentions} from '#/lib/strings/rich-text-manip'
 import {
@@ -106,6 +107,8 @@ export function MessagesList({
   const getPost = useGetPost()
   const {embedUri, setEmbed} = useMessageEmbed()
 
+  useHideBottomBarBorderForScreen()
+
   const flatListRef = useAnimatedRef<ListMethods>()
 
   const [newMessagesPill, setNewMessagesPill] = useState({

src/screens/PostThread/index.tsx

@@ -1,17 +1,15 @@
 import {useCallback, useMemo, useRef, useState} from 'react'
 import {useWindowDimensions, View} from 'react-native'
-import Animated from 'react-native-reanimated'
+import Animated, {useAnimatedStyle} from 'react-native-reanimated'
-import {useSafeAreaInsets} from 'react-native-safe-area-context'
 import {Trans} from '@lingui/macro'
 
 import {useInitialNumToRender} from '#/lib/hooks/useInitialNumToRender'
-import {useMinimalShellFabTransform} from '#/lib/hooks/useMinimalShellTransform'
 import {useOpenComposer} from '#/lib/hooks/useOpenComposer'
-import {clamp} from '#/lib/numbers'
 import {type ThreadViewOption} from '#/state/queries/preferences/useThreadPreferences'
 import {type ThreadItem, usePostThread} from '#/state/queries/usePostThread'
 import {useSession} from '#/state/session'
 import {type OnPostSuccessData} from '#/state/shell/composer'
+import {useShellLayout} from '#/state/shell/shell-layout'
 import {PostThreadComposePrompt} from '#/view/com/post-thread/PostThreadComposePrompt'
 import {List, type ListMethods} from '#/view/com/util/List'
 import {HeaderDropdown} from '#/screens/PostThread/components/HeaderDropdown'
@@ -533,20 +531,16 @@ export function PostThread({uri}: {uri: string | undefined}) {
 }
 
 function MobileComposePrompt({onPressReply}: {onPressReply: () => unknown}) {
-  const safeAreaInsets = useSafeAreaInsets()
+  const {footerHeight} = useShellLayout()
-  const fabMinimalShellTransform = useMinimalShellFabTransform()
+
+  const animatedStyle = useAnimatedStyle(() => {
+    return {
+      bottom: footerHeight.get(),
+    }
+  })
 
   return (
-    <Animated.View
+    <Animated.View style={[a.fixed, a.left_0, a.right_0, animatedStyle]}>
-      style={[
-        a.fixed,
-        fabMinimalShellTransform,
-        {
-          left: 0,
-          right: 0,
-          bottom: clamp(safeAreaInsets.bottom, 13, 60),
-        },
-      ]}>
       <PostThreadComposePrompt onPressCompose={onPressReply} />
     </Animated.View>
   )

src/view/com/post-thread/PostThread.tsx

@@ -1,8 +1,7 @@
 import React, {memo, useRef, useState} from 'react'
-import {StyleSheet, useWindowDimensions, View} from 'react-native'
+import {useWindowDimensions, View} from 'react-native'
-import {runOnJS} from 'react-native-reanimated'
+import {runOnJS, useAnimatedStyle} from 'react-native-reanimated'
 import Animated from 'react-native-reanimated'
-import {useSafeAreaInsets} from 'react-native-safe-area-context'
 import {
   AppBskyFeedDefs,
   type AppBskyFeedThreadgate,
@@ -13,11 +12,9 @@ import {useLingui} from '@lingui/react'
 
 import {HITSLOP_10} from '#/lib/constants'
 import {useInitialNumToRender} from '#/lib/hooks/useInitialNumToRender'
-import {useMinimalShellFabTransform} from '#/lib/hooks/useMinimalShellTransform'
 import {useOpenComposer} from '#/lib/hooks/useOpenComposer'
 import {useSetTitle} from '#/lib/hooks/useSetTitle'
 import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
-import {clamp} from '#/lib/numbers'
 import {ScrollProvider} from '#/lib/ScrollContext'
 import {sanitizeDisplayName} from '#/lib/strings/display-names'
 import {cleanError} from '#/lib/strings/errors'
@@ -36,6 +33,7 @@ import {
 import {useSetThreadViewPreferencesMutation} from '#/state/queries/preferences'
 import {usePreferencesQuery} from '#/state/queries/preferences'
 import {useSession} from '#/state/session'
+import {useShellLayout} from '#/state/shell/shell-layout'
 import {useMergedThreadgateHiddenReplies} from '#/state/threadgate-hidden-replies'
 import {List, type ListMethods} from '#/view/com/util/List'
 import {atoms as a, useTheme} from '#/alf'
@@ -715,17 +713,16 @@ let ThreadMenu = ({
 ThreadMenu = memo(ThreadMenu)
 
 function MobileComposePrompt({onPressReply}: {onPressReply: () => unknown}) {
-  const safeAreaInsets = useSafeAreaInsets()
+  const {footerHeight} = useShellLayout()
-  const fabMinimalShellTransform = useMinimalShellFabTransform()
+
+  const animatedStyle = useAnimatedStyle(() => {
+    return {
+      bottom: footerHeight.get(),
+    }
+  })
+
   return (
-    <Animated.View
+    <Animated.View style={[a.fixed, a.left_0, a.right_0, animatedStyle]}>
-      style={[
-        styles.prompt,
-        fabMinimalShellTransform,
-        {
-          bottom: clamp(safeAreaInsets.bottom, 13, 60),
-        },
-      ]}>
       <PostThreadComposePrompt onPressCompose={onPressReply} />
     </Animated.View>
   )
@@ -890,12 +887,3 @@ function hasBranchingReplies(node?: ThreadNode) {
   }
   return true
 }
-
-const styles = StyleSheet.create({
-  prompt: {
-    // @ts-ignore web-only
-    position: isWeb ? 'fixed' : 'absolute',
-    left: 0,
-    right: 0,
-  },
-})

src/view/com/post-thread/PostThreadComposePrompt.tsx

@@ -1,13 +1,15 @@
 import {View} from 'react-native'
+import {LinearGradient} from 'expo-linear-gradient'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
 import {PressableScale} from '#/lib/custom-animations/PressableScale'
 import {useHaptics} from '#/lib/haptics'
+import {useHideBottomBarBorderForScreen} from '#/lib/hooks/useHideBottomBarBorder'
 import {useProfileQuery} from '#/state/queries/profile'
 import {useSession} from '#/state/session'
 import {UserAvatar} from '#/view/com/util/UserAvatar'
-import {atoms as a, ios, useBreakpoints, useTheme} from '#/alf'
+import {atoms as a, ios, native, useBreakpoints, useTheme} from '#/alf'
 import {useInteractionState} from '#/components/hooks/useInteractionState'
 import {Text} from '#/components/Typography'
 
@@ -28,29 +30,49 @@ export function PostThreadComposePrompt({
     onOut: onHoverOut,
   } = useInteractionState()
 
+  useHideBottomBarBorderForScreen()
+
   return (
-    <PressableScale
+    <View
-      accessibilityRole="button"
-      accessibilityLabel={_(msg`Compose reply`)}
-      accessibilityHint={_(msg`Opens composer`)}
       style={[
-        gtMobile ? a.py_xs : {paddingTop: 8, paddingBottom: 11},
+        gtMobile
-        a.px_sm,
+          ? [
-        a.border_t,
+              a.py_xs,
-        t.atoms.border_contrast_low,
+              a.px_sm,
-        t.atoms.bg,
+              a.border_t,
-      ]}
+              t.atoms.border_contrast_low,
-      onPress={() => {
+              t.atoms.bg,
-        onPressCompose()
+            ]
-        playHaptic('Light')
+          : [a.px_md, a.pt_sm],
-      }}
+      ]}>
-      onLongPress={ios(() => {
+      {!gtMobile && (
-        onPressCompose()
+        <LinearGradient
-        playHaptic('Heavy')
+          start={[0.5, 0]}
-      })}
+          end={[0.5, 1]}
-      onHoverIn={onHoverIn}
+          colors={[
-      onHoverOut={onHoverOut}>
+            // "white transparent" - the CSS transparent keyword
-      <View
+            // is black transparent
+            'rgba(255, 255, 255, 0)',
+            t.atoms.bg.backgroundColor,
+          ]}
+          locations={[0.15, 0.4]}
+          style={[a.absolute, a.inset_0]}
+        />
+      )}
+      <PressableScale
+        accessibilityRole="button"
+        accessibilityLabel={_(msg`Compose reply`)}
+        accessibilityHint={_(msg`Opens composer`)}
+        onPress={() => {
+          onPressCompose()
+          playHaptic('Light')
+        }}
+        onLongPress={ios(() => {
+          onPressCompose()
+          playHaptic('Heavy')
+        })}
+        onHoverIn={onHoverIn}
+        onHoverOut={onHoverOut}
         style={[
           a.flex_row,
           a.align_center,
@@ -58,6 +80,7 @@ export function PostThreadComposePrompt({
           a.gap_sm,
           a.rounded_full,
           (!gtMobile || hovered) && t.atoms.bg_contrast_25,
+          native([a.border, t.atoms.border_contrast_low]),
           a.transition_color,
         ]}>
         <UserAvatar
@@ -68,7 +91,7 @@ export function PostThreadComposePrompt({
         <Text style={[a.text_md, t.atoms.text_contrast_medium]}>
           <Trans>Write your reply</Trans>
         </Text>
-      </View>
+      </PressableScale>
-    </PressableScale>
+    </View>
   )
 }

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

@@ -12,6 +12,7 @@ import {PressableScale} from '#/lib/custom-animations/PressableScale'
 import {BOTTOM_BAR_AVI} from '#/lib/demo'
 import {useHaptics} from '#/lib/haptics'
 import {useDedupe} from '#/lib/hooks/useDedupe'
+import {useHideBottomBarBorder} from '#/lib/hooks/useHideBottomBarBorder'
 import {useMinimalShellFooterTransform} from '#/lib/hooks/useMinimalShellTransform'
 import {useNavigationTabState} from '#/lib/hooks/useNavigationTabState'
 import {usePalette} from '#/lib/hooks/usePalette'
@@ -73,6 +74,7 @@ export function BottomBar({navigation}: BottomTabBarProps) {
   const playHaptic = useHaptics()
   const hasHomeBadge = useHomeBadge()
   const gate = useGate()
+  const hideBorder = useHideBottomBarBorder()
   const iconWidth = 28
 
   const showSignIn = useCallback(() => {
@@ -146,7 +148,7 @@ export function BottomBar({navigation}: BottomTabBarProps) {
         style={[
           styles.bottomBar,
           pal.view,
-          pal.border,
+          hideBorder ? {borderColor: pal.view.backgroundColor} : pal.border,
           {paddingBottom: clamp(safeAreaInsets.bottom, 15, 60)},
           footerMinimalShellTransform,
         ]}

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

@@ -5,16 +5,18 @@ import {msg, plural, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import {useNavigationState} from '@react-navigation/native'
 
+import {useHideBottomBarBorder} from '#/lib/hooks/useHideBottomBarBorder'
 import {useMinimalShellFooterTransform} from '#/lib/hooks/useMinimalShellTransform'
 import {getCurrentRoute, isTab} from '#/lib/routes/helpers'
 import {makeProfileLink} from '#/lib/routes/links'
-import {CommonNavigatorParams} from '#/lib/routes/types'
+import {type CommonNavigatorParams} from '#/lib/routes/types'
 import {useGate} from '#/lib/statsig/statsig'
 import {useHomeBadge} from '#/state/home-badge'
 import {useUnreadMessageCount} from '#/state/queries/messages/list-conversations'
 import {useUnreadNotifications} from '#/state/queries/notifications/unread'
 import {useSession} from '#/state/session'
 import {useLoggedOutViewControls} from '#/state/shell/logged-out'
+import {useShellLayout} from '#/state/shell/shell-layout'
 import {useCloseAllActiveElements} from '#/state/util'
 import {Link} from '#/view/com/util/Link'
 import {Logo} from '#/view/icons/Logo'
@@ -49,6 +51,8 @@ export function BottomBarWeb() {
   const footerMinimalShellTransform = useMinimalShellFooterTransform()
   const {requestSwitchToAccount} = useLoggedOutViewControls()
   const closeAllActiveElements = useCloseAllActiveElements()
+  const {footerHeight} = useShellLayout()
+  const hideBorder = useHideBottomBarBorder()
   const iconWidth = 26
 
   const unreadMessageCount = useUnreadMessageCount()
@@ -74,9 +78,12 @@ export function BottomBarWeb() {
         styles.bottomBar,
         styles.bottomBarWeb,
         t.atoms.bg,
-        t.atoms.border_contrast_low,
+        hideBorder
+          ? {borderColor: t.atoms.bg.backgroundColor}
+          : t.atoms.border_contrast_low,
         footerMinimalShellTransform,
-      ]}>
+      ]}
+      onLayout={event => footerHeight.set(event.nativeEvent.layout.height)}>
       {hasSession ? (
         <>
           <NavItem