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

src/logger/metrics.ts

@@ -203,6 +203,9 @@ export type MetricEvents = {
   'composer:gif:open': {}
   'composer:gif:select': {}
   'postComposer:click': {}
+  'composerPrompt:press': {}
+  'composerPrompt:camera:press': {}
+  'composerPrompt:gallery:press': {}
 
   'composer:threadgate:open': {
     nudged: boolean

src/state/shell/composer/index.tsx

@@ -43,6 +43,7 @@ export interface ComposerOpts {
   text?: string
   imageUris?: {uri: string; width: number; height: number; altText?: string}[]
   videoUri?: {uri: string; width: number; height: number}
+  openGallery?: boolean
 }
 
 type StateContext = ComposerOpts | undefined

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"

src/view/com/feeds/ComposerPrompt.tsx

@@ -12,9 +12,7 @@ import {
 import {openCamera, openUnifiedPicker} from '#/lib/media/picker'
 import {logger} from '#/logger'
 import {isNative} from '#/platform/detection'
-import {createComposerImage} from '#/state/gallery'
 import {useCurrentAccountProfile} from '#/state/queries/useCurrentAccountProfile'
-import {useComposerControls} from '#/state/shell/composer'
 import {MAX_IMAGES} from '#/view/com/composer/state/composer'
 import {UserAvatar} from '#/view/com/util/UserAvatar'
 import {atoms as a, native, useTheme, web} from '#/alf'
@@ -25,11 +23,10 @@ import {Image_Stroke2_Corner0_Rounded as ImageIcon} from '#/components/icons/Ima
 import {SubtleHover} from '#/components/SubtleHover'
 import {Text} from '#/components/Typography'
 
-export function FeedComposerPrompt() {
+export function ComposerPrompt() {
   const {_} = useLingui()
   const t = useTheme()
   const {openComposer} = useOpenComposer()
-  const {closeComposer} = useComposerControls()
   const profile = useCurrentAccountProfile()
   const [hover, setHover] = useState(false)
   const {requestCameraAccessIfNeeded} = useCameraPermission()
@@ -38,167 +35,101 @@ export function FeedComposerPrompt() {
   const sheetWrapper = useSheetWrapper()
 
   const onPress = React.useCallback(() => {
-    logger.metric('postComposer:click', {})
+    logger.metric('composerPrompt:press', {})
     openComposer({})
   }, [openComposer])
 
   const onPressImage = useCallback(async () => {
-    logger.metric('postComposer:click', {})
+    logger.metric('composerPrompt:gallery:press', {})
 
-    // Open the composer first so it's ready
+    // On web, open the composer with the gallery picker auto-opening
-    openComposer({})
+    if (!isNative) {
+      openComposer({openGallery: true})
+      return
+    }
 
-    // Use a small delay to ensure composer starts rendering before opening picker
+    try {
-    setTimeout(async () => {
+      const [photoAccess, videoAccess] = await Promise.all([
-      try {
+        requestPhotoAccessIfNeeded(),
-        if (isNative) {
+        requestVideoAccessIfNeeded(),
-          const [photoAccess, videoAccess] = await Promise.all([
+      ])
-            requestPhotoAccessIfNeeded(),
-            requestVideoAccessIfNeeded(),
-          ])
 
-          if (!photoAccess && !videoAccess) {
+      if (!photoAccess && !videoAccess) {
-            return
+        return
-          }
+      }
-        }
 
-        if (isNative && Keyboard.isVisible()) {
+      if (Keyboard.isVisible()) {
-          Keyboard.dismiss()
+        Keyboard.dismiss()
-        }
+      }
 
-        const selectionCountRemaining = MAX_IMAGES
+      const selectionCountRemaining = MAX_IMAGES
-        const {assets, canceled} = await sheetWrapper(
+      const {assets, canceled} = await sheetWrapper(
-          openUnifiedPicker({selectionCountRemaining}),
+        openUnifiedPicker({selectionCountRemaining}),
-        )
+      )
 
-        if (canceled) return
+      if (canceled) {
+        return
+      }
 
-        if (assets.length > 0) {
+      if (assets.length > 0) {
-          // Process images and add them to the composer
+        const imageUris = assets
-          const images = await Promise.all(
+          .filter(asset => asset.mimeType?.startsWith('image/'))
-            assets
+          .slice(0, MAX_IMAGES)
-              .filter(asset => asset.mimeType?.startsWith('image/'))
+          .map(asset => ({
-              .slice(0, MAX_IMAGES)
+            uri: asset.uri,
-              .map(async image => {
+            width: asset.width,
-                try {
+            height: asset.height,
-                  return await createComposerImage({
+          }))
-                    path: image.uri,
-                    width: image.width,
-                    height: image.height,
-                    mime: image.mimeType!,
-                  })
-                } catch (e) {
-                  logger.error(`createComposerImage failed`, {
-                    safeMessage: e instanceof Error ? e.message : String(e),
-                  })
-                  return null
-                }
-              }),
-          )
 
-          const validImages = images.filter(
+        if (imageUris.length > 0) {
-            (img): img is NonNullable<typeof img> => img !== null,
+          openComposer({imageUris})
-          )
-
-          if (validImages.length > 0) {
-            // Convert to imageUris format for the composer
-            // createComposerImage returns ComposerImageWithoutTransformation which always has source
-            const imageUris = validImages.map(img => {
-              const source = img.source
-              return {
-                uri: source.path,
-                width: source.width,
-                height: source.height,
-                altText: img.alt,
-              }
-            })
-
-            // Close the composer first (if it was opened), then reopen with images
-            // This ensures the composer state is reset and can accept the new imageUris
-            closeComposer()
-            // Wait a bit for the picker to fully close and composer to close, then reopen with images
-            // This follows the same pattern as useIntentHandler
-            setTimeout(() => {
-              openComposer({
-                imageUris: isNative ? imageUris : undefined,
-              })
-            }, 100)
-          }
-        }
-      } catch (err: any) {
-        if (!String(err).toLowerCase().includes('cancel')) {
-          logger.warn('Error opening image picker', {error: err})
         }
       }
-    }, 100)
+    } catch (err: any) {
+      if (!String(err).toLowerCase().includes('cancel')) {
+        logger.warn('Error opening image picker', {error: err})
+      }
+    }
   }, [
     openComposer,
-    closeComposer,
     requestPhotoAccessIfNeeded,
     requestVideoAccessIfNeeded,
     sheetWrapper,
   ])
 
   const onPressCamera = useCallback(async () => {
-    logger.metric('postComposer:click', {})
+    logger.metric('composerPrompt:camera:press', {})
 
-    // Open the composer first so it's ready
+    try {
-    openComposer({})
+      if (!(await requestCameraAccessIfNeeded())) {
-
+        return
-    // Use a small delay to ensure composer starts rendering before opening camera
-    setTimeout(async () => {
-      try {
-        if (!(await requestCameraAccessIfNeeded())) {
-          return
-        }
-
-        if (isNative && Keyboard.isVisible()) {
-          Keyboard.dismiss()
-        }
-
-        const image = await openCamera({
-          mediaTypes: 'images',
-        })
-
-        // Process the image
-        try {
-          const composerImage = await createComposerImage({
-            path: image.path,
-            width: image.width,
-            height: image.height,
-            mime: image.mime,
-          })
-
-          // Convert to imageUris format for the composer
-          const source = composerImage.source
-          const imageUris = [
-            {
-              uri: source.path,
-              width: source.width,
-              height: source.height,
-              altText: composerImage.alt,
-            },
-          ]
-
-          // Close the composer first (if it was opened), then reopen with image
-          closeComposer()
-          setTimeout(() => {
-            openComposer({
-              imageUris: isNative ? imageUris : undefined,
-            })
-          }, 100)
-        } catch (e) {
-          logger.error(`createComposerImage failed`, {
-            safeMessage: e instanceof Error ? e.message : String(e),
-          })
-        }
-      } catch (err: any) {
-        if (!String(err).toLowerCase().includes('cancel')) {
-          logger.warn('Error opening camera', {error: err})
-        }
       }
-    }, 100)
+
-  }, [openComposer, closeComposer, requestCameraAccessIfNeeded])
+      if (isNative && Keyboard.isVisible()) {
+        Keyboard.dismiss()
+      }
+
+      const image = await openCamera({
+        mediaTypes: 'images',
+      })
+
+      const imageUris = [
+        {
+          uri: image.path,
+          width: image.width,
+          height: image.height,
+        },
+      ]
+
+      openComposer({
+        imageUris: isNative ? imageUris : undefined,
+      })
+    } catch (err: any) {
+      if (!String(err).toLowerCase().includes('cancel')) {
+        logger.warn('Error opening camera', {error: err})
+      }
+    }
+  }, [openComposer, requestCameraAccessIfNeeded])
 
   if (!profile) {
     return null
@@ -264,8 +195,8 @@ export function FeedComposerPrompt() {
               {
                 lineHeight: a.text_md.fontSize,
                 includeFontPadding: false,
-                top: 1,
               },
+              native({top: 1}),
             ]}>
             {_(msg`What's up?`)}
           </Text>

src/view/com/posts/PostFeed.tsx

@@ -69,7 +69,7 @@ import {
 } from '#/components/feeds/PostFeedVideoGridRow'
 import {TrendingInterstitial} from '#/components/interstitials/Trending'
 import {TrendingVideos as TrendingVideosInterstitial} from '#/components/interstitials/TrendingVideos'
-import {FeedComposerPrompt} from '../feeds/FeedComposerPrompt'
+import {ComposerPrompt} from '../feeds/ComposerPrompt'
 import {DiscoverFallbackHeader} from './DiscoverFallbackHeader'
 import {FeedShutdownMsg} from './FeedShutdownMsg'
 import {PostFeedErrorMessage} from './PostFeedErrorMessage'
@@ -755,7 +755,7 @@ let PostFeed = ({
       } else if (row.type === 'interstitialTrending') {
         return <TrendingInterstitial />
       } else if (row.type === 'composerPrompt') {
-        return <FeedComposerPrompt />
+        return <ComposerPrompt />
       } else if (row.type === 'interstitialTrendingVideos') {
         return <TrendingVideosInterstitial />
       } else if (row.type === 'fallbackMarker') {

src/view/shell/Composer.ios.tsx

@@ -45,6 +45,7 @@ export function Composer({}: {winHeight: number}) {
             text={state?.text}
             imageUris={state?.imageUris}
             videoUri={state?.videoUri}
+            openGallery={state?.openGallery}
           />
         </TooltipSheetCompatProvider>
       </View>

src/view/shell/Composer.tsx

@@ -55,6 +55,7 @@ export function Composer({winHeight}: {winHeight: number}) {
         text={state.text}
         imageUris={state.imageUris}
         videoUri={state.videoUri}
+        openGallery={state.openGallery}
       />
     </Animated.View>
   )

src/view/shell/Composer.web.tsx

@@ -110,6 +110,7 @@ function Inner({state}: {state: ComposerOpts}) {
             openEmojiPicker={onOpenPicker}
             text={state.text}
             imageUris={state.imageUris}
+            openGallery={state.openGallery}
           />
         </View>
         <EmojiPicker state={pickerState} close={onClosePicker} />