Update compose prompt for isual balance and to include image button

src/state/models/shell-ui.ts

@@ -82,6 +82,7 @@ export interface ComposerOptsPostRef {
   }
 }
 export interface ComposerOpts {
+  imagesOpen?: boolean
   replyTo?: ComposerOptsPostRef
   onPost?: () => void
 }

src/view/com/composer/ComposePost.tsx

@@ -40,10 +40,12 @@ const HITSLOP = {left: 10, top: 10, right: 10, bottom: 10}
 
 export const ComposePost = observer(function ComposePost({
   replyTo,
+  imagesOpen,
   onPost,
   onClose,
 }: {
   replyTo?: ComposerOpts['replyTo']
+  imagesOpen?: ComposerOpts['imagesOpen']
   onPost?: ComposerOpts['onPost']
   onClose: () => void
 }) {
@@ -54,7 +56,9 @@ export const ComposePost = observer(function ComposePost({
   const [processingState, setProcessingState] = useState('')
   const [error, setError] = useState('')
   const [text, setText] = useState('')
-  const [isSelectingPhotos, setIsSelectingPhotos] = useState(false)
+  const [isSelectingPhotos, setIsSelectingPhotos] = useState(
+    imagesOpen || false,
+  )
   const [selectedPhotos, setSelectedPhotos] = useState<string[]>([])
 
   // Using default import (React.use...) instead of named import (use...) to be able to mock store's data in jest environment

src/view/com/composer/Prompt.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import {StyleSheet, TouchableOpacity, View} from 'react-native'
+import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {Text} from '../util/text/Text'
 import {usePalette} from '../../lib/hooks/usePalette'
 
@@ -12,7 +13,7 @@ export function ComposePrompt({
   text?: string
   btn?: string
   isReply?: boolean
-  onPressCompose: () => void
+  onPressCompose: (imagesOpen?: boolean) => void
 }) {
   const pal = usePalette('default')
   return (
@@ -24,25 +25,50 @@ export function ComposePrompt({
         styles.container,
         isReply ? styles.containerReply : undefined,
       ]}
-      onPress={onPressCompose}>
+      onPress={() => onPressCompose()}>
+      {!isReply && (
+        <FontAwesomeIcon
+          icon={['fas', 'pen-nib']}
+          size={18}
+          style={[pal.textLight, styles.iconLeft]}
+        />
+      )}
       <View style={styles.textContainer}>
-        <Text type="lg" style={[pal.textLight]}>
+        <Text type={isReply ? 'lg' : 'lg-medium'} style={pal.textLight}>
           {text}
         </Text>
       </View>
-      <View style={[styles.btn, {backgroundColor: pal.colors.backgroundLight}]}>
+      {isReply ? (
+        <View
+          style={[styles.btn, {backgroundColor: pal.colors.backgroundLight}]}>
           <Text type="button" style={pal.textLight}>
             {btn}
           </Text>
         </View>
+      ) : (
+        <TouchableOpacity onPress={() => onPressCompose(true)}>
+          <FontAwesomeIcon
+            icon={['far', 'image']}
+            size={18}
+            style={[pal.textLight, styles.iconRight]}
+          />
+        </TouchableOpacity>
+      )}
     </TouchableOpacity>
   )
 }
 
 const styles = StyleSheet.create({
+  iconLeft: {
+    marginLeft: 22,
+    marginRight: 2,
+    // marginLeft: 28,
+    // marginRight: 14,
+  },
+  iconRight: {
+    marginRight: 20,
+  },
   container: {
-    paddingLeft: 4,
-    paddingRight: 10,
     paddingVertical: 14,
     flexDirection: 'row',
     alignItems: 'center',

src/view/com/posts/Feed.tsx

@@ -30,7 +30,7 @@ export const Feed = observer(function Feed({
   feed: FeedModel
   style?: StyleProp<ViewStyle>
   scrollElRef?: MutableRefObject<FlatList<any> | null>
-  onPressCompose: () => void
+  onPressCompose: (imagesOpen?: boolean) => void
   onPressTryAgain?: () => void
   onScroll?: OnScrollCb
   testID?: string
@@ -41,9 +41,7 @@ export const Feed = observer(function Feed({
   //   like PureComponent, shouldComponentUpdate, etc
   const renderItem = ({item}: {item: any}) => {
     if (item === COMPOSE_PROMPT_ITEM) {
-      return (
+      return <ComposePrompt onPressCompose={onPressCompose} />
-        <ComposePrompt onPressCompose={onPressCompose} text="New message" />
-      )
     } else if (item === EMPTY_FEED_ITEM) {
       return (
         <EmptyState

src/view/screens/Home.tsx

@@ -69,8 +69,8 @@ export const Home = observer(function Home({
     return cleanup
   }, [visible, store, navIdx, doPoll, wasVisible])
 
-  const onPressCompose = () => {
+  const onPressCompose = (imagesOpen?: boolean) => {
-    store.shell.openComposer({})
+    store.shell.openComposer({imagesOpen})
   }
   const onPressTryAgain = () => {
     store.me.mainFeed.refresh()
@@ -107,7 +107,7 @@ export const Home = observer(function Home({
           <Text style={styles.loadLatestText}>Load new posts</Text>
         </TouchableOpacity>
       ) : undefined}
-      <FAB icon="pen-nib" onPress={onPressCompose} />
+      <FAB icon="pen-nib" onPress={() => onPressCompose(false)} />
     </View>
   )
 })

src/view/shell/mobile/Composer.tsx

@@ -10,12 +10,14 @@ export const Composer = observer(
     active,
     winHeight,
     replyTo,
+    imagesOpen,
     onPost,
     onClose,
   }: {
     active: boolean
     winHeight: number
     replyTo?: ComposerOpts['replyTo']
+    imagesOpen?: ComposerOpts['imagesOpen']
     onPost?: ComposerOpts['onPost']
     onClose: () => void
   }) => {
@@ -56,7 +58,12 @@ export const Composer = observer(
 
     return (
       <Animated.View style={[styles.wrapper, wrapperAnimStyle]}>
-        <ComposePost replyTo={replyTo} onPost={onPost} onClose={onClose} />
+        <ComposePost
+          replyTo={replyTo}
+          imagesOpen={imagesOpen}
+          onPost={onPost}
+          onClose={onClose}
+        />
       </Animated.View>
     )
   },

src/view/shell/mobile/index.tsx

@@ -484,6 +484,7 @@ export const MobileShell: React.FC = observer(() => {
         onClose={() => store.shell.closeComposer()}
         winHeight={winDim.height}
         replyTo={store.shell.composerOpts?.replyTo}
+        imagesOpen={store.shell.composerOpts?.imagesOpen}
         onPost={store.shell.composerOpts?.onPost}
       />
     </View>