Big batch of UI updates (#276)

* Replace react-native-root-toast with a custom toast that fits the visual style

* Tune dark mode colors

* Tune colors a bit more

* Move the reply prompt to a fixed position in the footer

* Fully hide muted posts but give a control to show anyway (close #270)

* Improve thread rendering (better clarity on reply lines)

* Add follower/following counts to side menu

* Fix issues with display name overflows

src/view/com/util/PostMuted.tsx

@@ -0,0 +1,50 @@
+import React from 'react'
+import {StyleSheet, TouchableOpacity, View} from 'react-native'
+import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
+import {usePalette} from 'lib/hooks/usePalette'
+import {Text} from './text/Text'
+
+export function PostMutedWrapper({
+  isMuted,
+  children,
+}: React.PropsWithChildren<{isMuted: boolean}>) {
+  const pal = usePalette('default')
+  const [override, setOverride] = React.useState(false)
+  if (!isMuted || override) {
+    return <>{children}</>
+  }
+  return (
+    <View style={[styles.container, pal.view, pal.border]}>
+      <FontAwesomeIcon
+        icon={['far', 'eye-slash']}
+        style={[styles.icon, pal.text]}
+      />
+      <Text type="md" style={pal.textLight}>
+        Post from an account you muted.
+      </Text>
+      <TouchableOpacity
+        style={styles.showBtn}
+        onPress={() => setOverride(true)}>
+        <Text type="md" style={pal.link}>
+          Show post
+        </Text>
+      </TouchableOpacity>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingVertical: 14,
+    paddingHorizontal: 18,
+    borderTopWidth: 1,
+  },
+  icon: {
+    marginRight: 10,
+  },
+  showBtn: {
+    marginLeft: 'auto',
+  },
+})

src/view/com/util/Toast.tsx

@@ -1,11 +1,81 @@
-import Toast from 'react-native-root-toast'
+import RootSiblings from 'react-native-root-siblings'
+import React from 'react'
+import {Animated, StyleSheet, View} from 'react-native'
+import {Text} from './text/Text'
+import {colors} from 'lib/styles'
+import {useTheme} from 'lib/ThemeContext'
+import {usePalette} from 'lib/hooks/usePalette'
+import {useAnimatedValue} from 'lib/hooks/useAnimatedValue'
+
+const TIMEOUT = 4e3
 
 export function show(message: string) {
-  Toast.show(message, {
-    duration: Toast.durations.LONG,
-    position: 50,
-    shadow: true,
-    animation: true,
-    hideOnPress: true,
-  })
+  const item = new RootSiblings(<Toast message={message} />)
+  setTimeout(() => {
+    item.destroy()
+  }, TIMEOUT)
 }
+
+function Toast({message}: {message: string}) {
+  const theme = useTheme()
+  const pal = usePalette('default')
+  const interp = useAnimatedValue(0)
+
+  React.useEffect(() => {
+    Animated.sequence([
+      Animated.timing(interp, {
+        toValue: 1,
+        duration: 150,
+        useNativeDriver: true,
+      }),
+      Animated.delay(3700),
+      Animated.timing(interp, {
+        toValue: 0,
+        duration: 150,
+        useNativeDriver: true,
+      }),
+    ]).start()
+  })
+
+  const opacityStyle = {opacity: interp}
+  return (
+    <View style={styles.container}>
+      <Animated.View
+        style={[
+          pal.view,
+          pal.border,
+          styles.toast,
+          theme.colorScheme === 'dark' && styles.toastDark,
+          opacityStyle,
+        ]}>
+        <Text type="lg-medium" style={pal.text}>
+          {message}
+        </Text>
+      </Animated.View>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'absolute',
+    top: 60,
+    left: 0,
+    right: 0,
+    alignItems: 'center',
+  },
+  toast: {
+    paddingHorizontal: 18,
+    paddingVertical: 10,
+    borderRadius: 24,
+    borderWidth: 1,
+    shadowColor: '#000',
+    shadowOpacity: 0.1,
+    shadowOffset: {width: 0, height: 4},
+    marginHorizontal: 6,
+  },
+  toastDark: {
+    backgroundColor: colors.gray6,
+    shadowOpacity: 0.5,
+  },
+})

src/view/com/util/UserInfoText.tsx

@@ -58,15 +58,15 @@ export function UserInfoText({
   let inner
   if (didFail) {
     inner = (
-      <Text type={type} style={style}>
+      <Text type={type} style={style} numberOfLines={1}>
         {failed}
       </Text>
     )
   } else if (profile) {
     inner = (
-      <Text type={type} style={style} lineHeight={1.2}>{`${prefix || ''}${
-        profile[attr] || profile.handle
-      }`}</Text>
+      <Text type={type} style={style} lineHeight={1.2} numberOfLines={1}>{`${
+        prefix || ''
+      }${profile[attr] || profile.handle}`}</Text>
     )
   } else {
     inner = (