Adds a composer prompt on the home screen to invite users to post (#9464)

* Add a composer prompt on home

* Added image upload button

* Feed composer buttons

* Feed composer styles

* Add client events, auto-open gallery when button is pressed

* Add feature gate

* Move gate check to last

* Small style cleanups

---------

Co-authored-by: Eric Bailey <git@esb.lol>

src/view/com/composer/Composer.tsx

@@ -172,6 +172,7 @@ export const ComposePost = ({
   text: initText,
   imageUris: initImageUris,
   videoUri: initVideoUri,
+  openGallery,
   cancelRef,
 }: Props & {
   cancelRef?: React.RefObject<CancelRef | null>
@@ -721,6 +722,7 @@ export const ComposePost = ({
         }}
         currentLanguages={currentLanguages}
         onSelectLanguage={onSelectLanguage}
+        openGallery={openGallery}
       />
     </>
   )
@@ -1334,6 +1336,7 @@ function ComposerFooter({
   onAddPost,
   currentLanguages,
   onSelectLanguage,
+  openGallery,
 }: {
   post: PostDraft
   dispatch: (action: PostAction) => void
@@ -1344,6 +1347,7 @@ function ComposerFooter({
   onAddPost: () => void
   currentLanguages: string[]
   onSelectLanguage?: (language: string) => void
+  openGallery?: boolean
 }) {
   const t = useTheme()
   const {_} = useLingui()
@@ -1463,6 +1467,7 @@ function ComposerFooter({
                 allowedAssetTypes={selectedAssetsType}
                 selectedAssetsCount={selectedAssetsCount}
                 onSelectAssets={onSelectAssets}
+                autoOpen={openGallery}
               />
               <OpenCameraBtn
                 disabled={media?.type === 'images' ? isMaxImages : !!media}

src/view/com/composer/SelectMediaButton.tsx

@@ -1,4 +1,4 @@
-import {useCallback} from 'react'
+import {useCallback, useEffect, useRef} from 'react'
 import {Keyboard} from 'react-native'
 import {type ImagePickerAsset} from 'expo-image-picker'
 import {msg, plural} from '@lingui/macro'
@@ -31,6 +31,10 @@ export type SelectMediaButtonProps = {
     assets: ImagePickerAsset[]
     errors: string[]
   }) => void
+  /**
+   * If true, automatically open the media picker when the component mounts.
+   */
+  autoOpen?: boolean
 }
 
 /**
@@ -358,12 +362,14 @@ export function SelectMediaButton({
   allowedAssetTypes,
   selectedAssetsCount,
   onSelectAssets,
+  autoOpen,
 }: SelectMediaButtonProps) {
   const {_} = useLingui()
   const {requestPhotoAccessIfNeeded} = usePhotoLibraryPermission()
   const {requestVideoAccessIfNeeded} = useVideoLibraryPermission()
   const sheetWrapper = useSheetWrapper()
   const t = useTheme()
+  const hasAutoOpened = useRef(false)
 
   const selectionCountRemaining = MAX_IMAGES - selectedAssetsCount
 
@@ -460,6 +466,13 @@ export function SelectMediaButton({
     selectionCountRemaining,
   ])
 
+  useEffect(() => {
+    if (autoOpen && !hasAutoOpened.current && !disabled) {
+      hasAutoOpened.current = true
+      onPressSelectMedia()
+    }
+  }, [autoOpen, disabled, onPressSelectMedia])
+
   return (
     <Button
       testID="openMediaBtn"