From e6b63e3f53061a207587cfbd98095386a8e90167 Mon Sep 17 00:00:00 2001
From: Paul Frazee <pfrazee@gmail.com>
Date: Thu, 26 Jan 2023 23:04:38 -0600
Subject: [PATCH] Update compose prompts for web

---
 .../{PromptButtons.tsx => ComposerPrompt.tsx} |  2 +-
 src/view/com/posts/ComposerPrompt.web.tsx     | 41 +++++++++++++++++++
 src/view/com/posts/Feed.tsx                   |  6 +--
 src/view/com/util/FAB.web.tsx                 |  8 ++++
 src/view/shell/web/left-column.tsx            | 26 +++++++++++-
 5 files changed, 77 insertions(+), 6 deletions(-)
 rename src/view/com/posts/{PromptButtons.tsx => ComposerPrompt.tsx} (97%)
 create mode 100644 src/view/com/posts/ComposerPrompt.web.tsx
 create mode 100644 src/view/com/util/FAB.web.tsx

diff --git a/src/view/com/posts/PromptButtons.tsx b/src/view/com/posts/ComposerPrompt.tsx
similarity index 97%
rename from src/view/com/posts/PromptButtons.tsx
rename to src/view/com/posts/ComposerPrompt.tsx
index 2a8e5808..1ddc2875 100644
--- a/src/view/com/posts/PromptButtons.tsx
+++ b/src/view/com/posts/ComposerPrompt.tsx
@@ -3,7 +3,7 @@ import {StyleSheet, TouchableOpacity, View} from 'react-native'
 import {Text} from '../util/text/Text'
 import {usePalette} from '../../lib/hooks/usePalette'
 
-export function PromptButtons({
+export function ComposerPrompt({
   onPressCompose,
 }: {
   onPressCompose: (imagesOpen?: boolean) => void
diff --git a/src/view/com/posts/ComposerPrompt.web.tsx b/src/view/com/posts/ComposerPrompt.web.tsx
new file mode 100644
index 00000000..96c09f0b
--- /dev/null
+++ b/src/view/com/posts/ComposerPrompt.web.tsx
@@ -0,0 +1,41 @@
+import React from 'react'
+import {StyleSheet, TouchableWithoutFeedback, View} from 'react-native'
+import {Text} from '../util/text/Text'
+import {usePalette} from '../../lib/hooks/usePalette'
+import {s} from '../../lib/styles'
+
+export function ComposerPrompt({
+  onPressCompose,
+}: {
+  onPressCompose: (imagesOpen?: boolean) => void
+}) {
+  const pal = usePalette('default')
+  return (
+    <TouchableWithoutFeedback onPress={() => onPressCompose(false)}>
+      <View style={[pal.view, pal.border, styles.container]}>
+        <Text type="xl" style={pal.textLight}>
+          What's up?
+        </Text>
+        <View style={s.flex1} />
+        <View style={[styles.btn, pal.btn]}>
+          <Text>Post</Text>
+        </View>
+      </View>
+    </TouchableWithoutFeedback>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    paddingVertical: 16,
+    paddingHorizontal: 18,
+    flexDirection: 'row',
+    alignItems: 'center',
+    borderTopWidth: 1,
+  },
+  btn: {
+    paddingVertical: 6,
+    paddingHorizontal: 14,
+    borderRadius: 30,
+  },
+})
diff --git a/src/view/com/posts/Feed.tsx b/src/view/com/posts/Feed.tsx
index db05caa3..409ce4af 100644
--- a/src/view/com/posts/Feed.tsx
+++ b/src/view/com/posts/Feed.tsx
@@ -13,7 +13,7 @@ import {EmptyState} from '../util/EmptyState'
 import {ErrorMessage} from '../util/error/ErrorMessage'
 import {FeedModel} from '../../../state/models/feed-view'
 import {FeedItem} from './FeedItem'
-import {PromptButtons} from './PromptButtons'
+import {ComposerPrompt} from './ComposerPrompt'
 import {OnScrollCb} from '../../lib/hooks/useOnMainScroll'
 import {s} from '../../lib/styles'
 
@@ -43,7 +43,7 @@ export const Feed = observer(function Feed({
   //   like PureComponent, shouldComponentUpdate, etc
   const renderItem = ({item}: {item: any}) => {
     if (item === COMPOSE_PROMPT_ITEM) {
-      return <PromptButtons onPressCompose={onPressCompose} />
+      return <ComposerPrompt onPressCompose={onPressCompose} />
     } else if (item === EMPTY_FEED_ITEM) {
       return (
         <EmptyState
@@ -87,7 +87,7 @@ export const Feed = observer(function Feed({
   return (
     <View testID={testID} style={style}>
       <CenteredView>
-        {!data && <PromptButtons onPressCompose={onPressCompose} />}
+        {!data && <ComposerPrompt onPressCompose={onPressCompose} />}
         {feed.isLoading && !data && <PostFeedLoadingPlaceholder />}
         {feed.hasError && (
           <ErrorMessage
diff --git a/src/view/com/util/FAB.web.tsx b/src/view/com/util/FAB.web.tsx
new file mode 100644
index 00000000..dcffef29
--- /dev/null
+++ b/src/view/com/util/FAB.web.tsx
@@ -0,0 +1,8 @@
+import React from 'react'
+import {GestureResponderEvent, View} from 'react-native'
+import {IconProp} from '@fortawesome/fontawesome-svg-core'
+
+type OnPress = ((event: GestureResponderEvent) => void) | undefined
+export const FAB = (_opts: {icon: IconProp; onPress: OnPress}) => {
+  return <View />
+}
diff --git a/src/view/shell/web/left-column.tsx b/src/view/shell/web/left-column.tsx
index 5e3aba5b..44559b6a 100644
--- a/src/view/shell/web/left-column.tsx
+++ b/src/view/shell/web/left-column.tsx
@@ -1,10 +1,11 @@
 import React from 'react'
-import {Pressable, StyleSheet, View} from 'react-native'
+import {Pressable, StyleSheet, TouchableOpacity, View} from 'react-native'
 import {observer} from 'mobx-react-lite'
+import LinearGradient from 'react-native-linear-gradient'
 import {Link} from '../../com/util/Link'
 import {Text} from '../../com/util/text/Text'
 import {UserAvatar} from '../../com/util/UserAvatar'
-import {colors} from '../../lib/styles'
+import {s, colors, gradients} from '../../lib/styles'
 import {useStores} from '../../../state'
 import {usePalette} from '../../lib/hooks/usePalette'
 import {
@@ -63,6 +64,7 @@ export const NavItem = observer(
 export const DesktopLeftColumn = observer(() => {
   const store = useStores()
   const pal = usePalette('default')
+  const onPressCompose = () => store.shell.openComposer({})
   const avi = (
     <UserAvatar
       handle={store.me.handle}
@@ -105,6 +107,17 @@ export const DesktopLeftColumn = observer(() => {
         icon={<CogIcon strokeWidth={1.5} />}
         iconFilled={<CogIcon strokeWidth={2} />}
       />
+      <TouchableOpacity onPress={onPressCompose}>
+        <LinearGradient
+          colors={[gradients.blueLight.start, gradients.blueLight.end]}
+          start={{x: 0, y: 0}}
+          end={{x: 1, y: 1}}
+          style={styles.composeBtn}>
+          <Text type="xl-medium" style={[s.white, s.textCenter]}>
+            New Post
+          </Text>
+        </LinearGradient>
+      </TouchableOpacity>
     </View>
   )
 })
@@ -148,4 +161,13 @@ const styles = StyleSheet.create({
   navItemLabel: {
     fontSize: 19,
   },
+  composeBtn: {
+    marginTop: 20,
+    marginBottom: 10,
+    marginLeft: 10,
+    marginRight: 20,
+    borderRadius: 30,
+    paddingHorizontal: 20,
+    paddingVertical: 12,
+  },
 })