Add debug to Composer

src/components/Toast/index.tsx

@@ -37,7 +37,13 @@ export {Outlet} from '#/components/Toast/Portal'
 
 const TOAST_ANIMATION_DURATION = 300
 
-export function ToastProvider({children}: {children: React.ReactNode}) {
+export function ToastProvider({
+  children,
+  offsetTop,
+}: {
+  children: React.ReactNode
+  offsetTop?: number
+}) {
   const {top} = useSafeAreaInsets()
   const [toasts, setToasts] = useState<
     {
@@ -96,7 +102,7 @@ export function ToastProvider({children}: {children: React.ReactNode}) {
                 a.gap_sm,
                 {
                   flexDirection: 'column-reverse',
-                  top: top,
+                  top: offsetTop ?? top,
                   left: a.px_lg.paddingLeft,
                   right: a.px_lg.paddingLeft,
                 },

src/view/com/composer/Composer.tsx

@@ -127,6 +127,7 @@ import {EmojiArc_Stroke2_Corner0_Rounded as EmojiSmile} from '#/components/icons
 import {TimesLarge_Stroke2_Corner0_Rounded as X} from '#/components/icons/Times'
 import {LazyQuoteEmbed} from '#/components/Post/Embed/LazyQuoteEmbed'
 import * as Prompt from '#/components/Prompt'
+import {useToast} from '#/components/Toast'
 import {Text as NewText} from '#/components/Typography'
 import {BottomSheetPortalProvider} from '../../../../modules/bottom-sheet'
 import {
@@ -776,6 +777,7 @@ let ComposerPost = React.memo(function ComposerPost({
       : _(msg`Add another post`)
     : _(msg`What's up?`)
   const discardPromptControl = Prompt.usePromptControl()
+  const {show: showToast} = useToast()
 
   const dispatchPost = useCallback(
     (action: PostAction) => {
@@ -807,6 +809,11 @@ let ComposerPost = React.memo(function ComposerPost({
 
   const onPhotoPasted = useCallback(
     async (uri: string) => {
+      showToast({
+        type: 'success',
+        content: _(msg`Pasty wasty`),
+        a11yLabel: _(msg`Pasty wasty`),
+      })
       if (uri.startsWith('data:video/') || uri.startsWith('data:image/gif')) {
         if (isNative) return // web only
         const [mimeType] = uri.slice('data:'.length).split(';')
@@ -824,7 +831,7 @@ let ComposerPost = React.memo(function ComposerPost({
         onImageAdd([res])
       }
     },
-    [post.id, onSelectVideo, onImageAdd, _],
+    [post.id, onSelectVideo, onImageAdd, _, showToast],
   )
 
   useHideKeyboardOnBackground()

src/view/shell/Composer.ios.tsx

@@ -4,6 +4,7 @@ import {Modal, View} from 'react-native'
 import {useDialogStateControlContext} from '#/state/dialogs'
 import {useComposerState} from '#/state/shell/composer'
 import {atoms as a, useTheme} from '#/alf'
+import {Outlet as ToastPortalOutlet, ToastProvider} from '#/components/Toast'
 import {ComposePost, useComposerCancelRef} from '../com/composer/Composer'
 
 export function Composer({}: {winHeight: number}) {
@@ -32,19 +33,22 @@ export function Composer({}: {winHeight: number}) {
       presentationStyle="pageSheet"
       animationType="slide"
       onRequestClose={() => ref.current?.onPressCancel()}>
-      <View style={[t.atoms.bg, a.flex_1]}>
-        <ComposePost
-          cancelRef={ref}
-          replyTo={state?.replyTo}
-          onPost={state?.onPost}
-          onPostSuccess={state?.onPostSuccess}
-          quote={state?.quote}
-          mention={state?.mention}
-          text={state?.text}
-          imageUris={state?.imageUris}
-          videoUri={state?.videoUri}
-        />
-      </View>
+      <ToastProvider offsetTop={a.pt_lg.paddingTop}>
+        <View style={[t.atoms.bg, a.flex_1]}>
+          <ComposePost
+            cancelRef={ref}
+            replyTo={state?.replyTo}
+            onPost={state?.onPost}
+            onPostSuccess={state?.onPostSuccess}
+            quote={state?.quote}
+            mention={state?.mention}
+            text={state?.text}
+            imageUris={state?.imageUris}
+            videoUri={state?.videoUri}
+          />
+        </View>
+        <ToastPortalOutlet />
+      </ToastProvider>
     </Modal>
   )
 }