only show divider when scrolled (#4275)

src/view/com/composer/Composer.tsx

@@ -9,7 +9,6 @@ import React, {
 import {
   ActivityIndicator,
   Keyboard,
-  ScrollView,
   StyleSheet,
   TouchableOpacity,
   View,
@@ -18,6 +17,12 @@ import {
   KeyboardAvoidingView,
   KeyboardStickyView,
 } from 'react-native-keyboard-controller'
+import Animated, {
+  interpolateColor,
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated'
 import {useSafeAreaInsets} from 'react-native-safe-area-context'
 import {LinearGradient} from 'expo-linear-gradient'
 import {RichText} from '@atproto/api'
@@ -30,6 +35,7 @@ import {
   createGIFDescription,
   parseAltFromGIFDescription,
 } from '#/lib/gif-alt-text'
+import {useAnimatedScrollHandler} from '#/lib/hooks/useAnimatedScrollHandler_FIXED'
 import {LikelyType} from '#/lib/link-meta/link-meta'
 import {logEvent} from '#/lib/statsig/statsig'
 import {logger} from '#/logger'
@@ -61,7 +67,7 @@ import {useDialogStateControlContext} from 'state/dialogs'
 import {GalleryModel} from 'state/models/media/gallery'
 import {ComposerOpts} from 'state/shell/composer'
 import {ComposerReplyTo} from 'view/com/composer/ComposerReplyTo'
-import {atoms as a} from '#/alf'
+import {atoms as a, useTheme} from '#/alf'
 import {Button} from '#/components/Button'
 import {EmojiArc_Stroke2_Corner0_Rounded as EmojiSmile} from '#/components/icons/Emoji'
 import * as Prompt from '#/components/Prompt'
@@ -109,7 +115,7 @@ export const ComposePost = observer(function ComposePost({
   const {closeComposer} = useComposerControls()
   const {track} = useAnalytics()
   const pal = usePalette('default')
-  const {isDesktop, isMobile} = useWebMediaQueries()
+  const {isTabletOrDesktop, isMobile} = useWebMediaQueries()
   const {_} = useLingui()
   const requireAltTextEnabled = useRequireAltTextEnabled()
   const langPrefs = useLanguagePrefs()
@@ -117,6 +123,7 @@ export const ComposePost = observer(function ComposePost({
   const textInput = useRef<TextInputRef>(null)
   const discardPromptControl = Prompt.usePromptControl()
   const {closeAllDialogs} = useDialogStateControlContext()
+  const t = useTheme()
 
   const [isKeyboardVisible] = useIsKeyboardVisible({iosUseWillEvents: true})
   const [isProcessing, setIsProcessing] = useState(false)
@@ -163,6 +170,25 @@ export const ComposePost = observer(function ComposePost({
     [insets, isKeyboardVisible, isMobile],
   )
 
+  const hasScrolled = useSharedValue(0)
+  const scrollHandler = useAnimatedScrollHandler({
+    onScroll: event => {
+      hasScrolled.value = withTiming(event.contentOffset.y > 0 ? 1 : 0)
+    },
+  })
+  const topBarAnimatedStyle = useAnimatedStyle(() => {
+    return {
+      borderColor: interpolateColor(
+        hasScrolled.value,
+        [0, 1],
+        [
+          'transparent',
+          isWeb ? t.palette.contrast_100 : t.palette.contrast_400,
+        ],
+      ),
+    }
+  })
+
   const onPressCancel = useCallback(() => {
     if (graphemeLength > 0 || !gallery.isEmpty) {
       closeAllDialogs()
@@ -380,7 +406,12 @@ export const ComposePost = observer(function ComposePost({
         style={s.flex1}
         keyboardVerticalOffset={replyTo ? 60 : isAndroid ? 120 : 100}>
         <View style={[s.flex1, viewStyles]} aria-modal accessibilityViewIsModal>
-          <View style={[styles.topbar, isDesktop && styles.topbarDesktop]}>
+          <Animated.View
+            style={[
+              styles.topbar,
+              topBarAnimatedStyle,
+              isWeb && isTabletOrDesktop && styles.topbarDesktop,
+            ]}>
             <TouchableOpacity
               testID="composerDiscardButton"
               onPress={onPressCancel}
@@ -444,7 +475,7 @@ export const ComposePost = observer(function ComposePost({
                 )}
               </>
             )}
-          </View>
+          </Animated.View>
           {isAltTextRequiredAndMissing && (
             <View style={[styles.reminderLine, pal.viewLight]}>
               <View style={styles.errorIcon}>
@@ -471,14 +502,14 @@ export const ComposePost = observer(function ComposePost({
               <Text style={[s.red4, s.flex1]}>{error}</Text>
             </View>
           )}
-          <ScrollView
+          <Animated.ScrollView
+            onScroll={scrollHandler}
             style={styles.scrollView}
             keyboardShouldPersistTaps="always">
             {replyTo ? <ComposerReplyTo replyTo={replyTo} /> : undefined}
 
             <View
               style={[
-                pal.border,
                 styles.textInputLayout,
                 isNative && styles.textInputLayoutMobile,
               ]}>
@@ -533,7 +564,7 @@ export const ComposePost = observer(function ComposePost({
                 )}
               </View>
             ) : undefined}
-          </ScrollView>
+          </Animated.ScrollView>
           <SuggestedLanguage text={richtext.text} />
         </View>
       </KeyboardAvoidingView>
@@ -589,15 +620,18 @@ const styles = StyleSheet.create({
   topbar: {
     flexDirection: 'row',
     alignItems: 'center',
-    marginTop: -14,
-    paddingBottom: 4,
-    paddingHorizontal: 20,
-    height: 50,
+    marginTop: -10,
+    paddingHorizontal: 4,
+    marginHorizontal: 16,
+    height: 44,
     gap: 4,
+    borderBottomWidth: StyleSheet.hairlineWidth,
   },
   topbarDesktop: {
     paddingTop: 10,
     paddingBottom: 10,
+    height: 50,
+    marginTop: 0,
   },
   postBtn: {
     borderRadius: 20,
@@ -636,11 +670,10 @@ const styles = StyleSheet.create({
   },
   scrollView: {
     flex: 1,
-    paddingHorizontal: 15,
+    paddingHorizontal: 16,
   },
   textInputLayout: {
     flexDirection: 'row',
-    borderTopWidth: 1,
     paddingTop: 16,
   },
   textInputLayoutMobile: {

src/view/com/composer/labels/LabelsBtn.tsx

@@ -1,14 +1,15 @@
 import React from 'react'
 import {Keyboard, StyleSheet} from 'react-native'
-import {Button} from 'view/com/util/forms/Button'
-import {usePalette} from 'lib/hooks/usePalette'
-import {ShieldExclamation} from 'lib/icons'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {FontAwesomeIconStyle} from '@fortawesome/react-native-fontawesome'
-import {isNative} from 'platform/detection'
-import {useLingui} from '@lingui/react'
 import {msg} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+
 import {useModalControls} from '#/state/modals'
+import {usePalette} from 'lib/hooks/usePalette'
+import {ShieldExclamation} from 'lib/icons'
+import {isNative} from 'platform/detection'
+import {Button} from 'view/com/util/forms/Button'
 
 export function LabelsBtn({
   labels,
@@ -54,6 +55,7 @@ const styles = StyleSheet.create({
   button: {
     flexDirection: 'row',
     alignItems: 'center',
+    paddingVertical: 2,
     paddingHorizontal: 6,
   },
   dimmed: {