From 00b7189d5da5bc910ece5715dec2774185639c5e Mon Sep 17 00:00:00 2001
From: Paul Frazee <pfrazee@gmail.com>
Date: Mon, 16 Jan 2023 17:07:33 -0600
Subject: [PATCH] Readd the FAB for composing new posts

---
 src/view/com/util/FAB.tsx        | 68 ++++++++++++++++++++++++++++++++
 src/view/com/util/ViewHeader.tsx | 11 ------
 src/view/screens/Home.tsx        |  2 +
 src/view/screens/Profile.tsx     |  6 +++
 4 files changed, 76 insertions(+), 11 deletions(-)
 create mode 100644 src/view/com/util/FAB.tsx

diff --git a/src/view/com/util/FAB.tsx b/src/view/com/util/FAB.tsx
new file mode 100644
index 00000000..ae110c7f
--- /dev/null
+++ b/src/view/com/util/FAB.tsx
@@ -0,0 +1,68 @@
+import React from 'react'
+import {observer} from 'mobx-react-lite'
+import {
+  GestureResponderEvent,
+  StyleSheet,
+  TouchableWithoutFeedback,
+  View,
+} from 'react-native'
+import LinearGradient from 'react-native-linear-gradient'
+import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
+import {IconProp} from '@fortawesome/fontawesome-svg-core'
+import {colors, gradients} from '../../lib/styles'
+import {useStores} from '../../../state'
+
+type OnPress = ((event: GestureResponderEvent) => void) | undefined
+export const FAB = observer(
+  ({icon, onPress}: {icon: IconProp; onPress: OnPress}) => {
+    const store = useStores()
+    return (
+      <TouchableWithoutFeedback onPress={onPress}>
+        <View
+          style={[
+            styles.outer,
+            store.shell.minimalShellMode ? styles.lower : undefined,
+          ]}>
+          <LinearGradient
+            colors={[gradients.purple.start, gradients.purple.end]}
+            start={{x: 0, y: 0}}
+            end={{x: 1, y: 1}}
+            style={styles.inner}>
+            <FontAwesomeIcon
+              size={24}
+              icon={icon}
+              color={colors.white}
+              style={styles.icon}
+            />
+          </LinearGradient>
+        </View>
+      </TouchableWithoutFeedback>
+    )
+  },
+)
+
+const styles = StyleSheet.create({
+  outer: {
+    position: 'absolute',
+    zIndex: 1,
+    right: 22,
+    bottom: 84,
+    width: 60,
+    height: 60,
+    borderRadius: 30,
+    shadowColor: '#000',
+    shadowOpacity: 0.3,
+    shadowOffset: {width: 0, height: 1},
+  },
+  lower: {
+    bottom: 34,
+  },
+  inner: {
+    width: 60,
+    height: 60,
+    borderRadius: 30,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  icon: {},
+})
diff --git a/src/view/com/util/ViewHeader.tsx b/src/view/com/util/ViewHeader.tsx
index 2e584b76..e4627071 100644
--- a/src/view/com/util/ViewHeader.tsx
+++ b/src/view/com/util/ViewHeader.tsx
@@ -21,12 +21,10 @@ export const ViewHeader = observer(function ViewHeader({
   title,
   subtitle,
   canGoBack,
-  onPost,
 }: {
   title: string
   subtitle?: string
   canGoBack?: boolean
-  onPost?: () => void
 }) {
   const theme = useTheme()
   const pal = usePalette('default')
@@ -37,9 +35,6 @@ export const ViewHeader = observer(function ViewHeader({
   const onPressMenu = () => {
     store.shell.setMainMenuOpen(true)
   }
-  const onPressCompose = () => {
-    store.shell.openComposer({onPost})
-  }
   const onPressSearch = () => {
     store.nav.navigate(`/search`)
   }
@@ -85,12 +80,6 @@ export const ViewHeader = observer(function ViewHeader({
           </Text>
         ) : undefined}
       </View>
-      <TouchableOpacity
-        onPress={onPressCompose}
-        hitSlop={HITSLOP}
-        style={[styles.btn, {backgroundColor: pal.colors.backgroundLight}]}>
-        <FontAwesomeIcon size={18} icon="plus" style={pal.text} />
-      </TouchableOpacity>
       <TouchableOpacity
         onPress={onPressSearch}
         hitSlop={HITSLOP}
diff --git a/src/view/screens/Home.tsx b/src/view/screens/Home.tsx
index 17037c41..d5fe7f1f 100644
--- a/src/view/screens/Home.tsx
+++ b/src/view/screens/Home.tsx
@@ -7,6 +7,7 @@ import {useSafeAreaInsets} from 'react-native-safe-area-context'
 import {ViewHeader} from '../com/util/ViewHeader'
 import {Feed} from '../com/posts/Feed'
 import {Text} from '../com/util/text/Text'
+import {FAB} from '../com/util/FAB'
 import {useStores} from '../../state'
 import {ScreenParams} from '../routes'
 import {s, colors} from '../lib/styles'
@@ -103,6 +104,7 @@ export const Home = observer(function Home({
           <Text style={styles.loadLatestText}>Load new posts</Text>
         </TouchableOpacity>
       ) : undefined}
+      <FAB icon="pen-nib" onPress={onPressCompose} />
     </View>
   )
 })
diff --git a/src/view/screens/Profile.tsx b/src/view/screens/Profile.tsx
index 0fb30162..c89c2ad1 100644
--- a/src/view/screens/Profile.tsx
+++ b/src/view/screens/Profile.tsx
@@ -18,6 +18,7 @@ import {EmptyState} from '../com/util/EmptyState'
 import {Text} from '../com/util/text/Text'
 import {ViewHeader} from '../com/util/ViewHeader'
 import * as Toast from '../com/util/Toast'
+import {FAB} from '../com/util/FAB'
 import {s, colors} from '../lib/styles'
 import {useOnMainScroll} from '../lib/hooks/useOnMainScroll'
 
@@ -89,6 +90,10 @@ export const Profile = observer(({navIdx, visible, params}: ScreenParams) => {
     )
   }
 
+  const onPressCompose = () => {
+    store.shell.openComposer({})
+  }
+
   // rendering
   // =
 
@@ -263,6 +268,7 @@ export const Profile = observer(({navIdx, visible, params}: ScreenParams) => {
       ) : (
         renderHeader()
       )}
+      <FAB icon="pen-nib" onPress={onPressCompose} />
     </View>
   )
 })