gallery: image posting UX

packages/app/ui/components/AttachmentSheet.tsx

@@ -1,7 +1,7 @@
 import { createDevLogger } from '@tloncorp/shared';
 import { MessageAttachments } from '@tloncorp/shared/api';
 import * as ImagePicker from 'expo-image-picker';
-import { useCallback, useEffect, useMemo } from 'react';
+import { useCallback, useMemo } from 'react';
 import { isWeb } from 'tamagui';
 
 import { ActionGroup, ActionSheet, createActionGroups } from './ActionSheet';
@@ -29,6 +29,13 @@ export default function AttachmentSheet({
 
   const takePicture = useCallback(async () => {
     try {
+      if (cameraPermissionStatus?.granted === false) {
+        const permissionResult = await requestCameraPermission();
+        if (!permissionResult.granted) {
+          return;
+        }
+      }
+
       const result = await ImagePicker.launchCameraAsync({
         mediaTypes: ImagePicker.MediaTypeOptions.Images,
         allowsEditing: false,
@@ -45,10 +52,22 @@ export default function AttachmentSheet({
       console.error('Error taking picture', e);
       logger.trackError('Error taking picture', { error: e });
     }
-  }, [onAttachmentsSet, onOpenChange]);
+  }, [
+    onAttachmentsSet,
+    onOpenChange,
+    cameraPermissionStatus,
+    requestCameraPermission,
+  ]);
 
   const pickImage = useCallback(async () => {
     try {
+      if (mediaLibraryPermissionStatus?.granted === false) {
+        const permissionResult = await requestMediaLibraryPermission();
+        if (!permissionResult.granted) {
+          return;
+        }
+      }
+
       const result = await ImagePicker.launchImageLibraryAsync({
         mediaTypes: ImagePicker.MediaTypeOptions.Images,
         allowsEditing: false,
@@ -65,25 +84,11 @@ export default function AttachmentSheet({
       console.error('Error picking image', e);
       logger.trackError('Error picking image', { error: e });
     }
-  }, [onAttachmentsSet, onOpenChange]);
-
-  useEffect(() => {
-    if (
-      showAttachmentSheet &&
-      mediaLibraryPermissionStatus?.granted === false
-    ) {
-      requestMediaLibraryPermission();
-    }
-
-    if (showAttachmentSheet && cameraPermissionStatus?.granted === false) {
-      requestCameraPermission();
-    }
   }, [
+    onAttachmentsSet,
+    onOpenChange,
     mediaLibraryPermissionStatus,
-    showAttachmentSheet,
-    cameraPermissionStatus,
     requestMediaLibraryPermission,
-    requestCameraPermission,
   ]);
 
   const actionGroups: ActionGroup[] = useMemo(

packages/app/ui/components/Channel/GalleryImagePreview.tsx

@@ -1,6 +1,3 @@
-import { Button } from '@tloncorp/ui';
-import { Close } from '@tloncorp/ui/assets/icons';
-import { useCallback } from 'react';
 import { ImageBackground } from 'react-native';
 import { Spinner, View, XStack } from 'tamagui';
 
@@ -9,28 +6,14 @@ import {
   useAttachmentContext,
 } from '../../contexts/attachment';
 
-export default function GalleryImagePreview({
-  onReset,
-}: {
-  onReset: () => void;
-}) {
-  const { attachments, resetAttachments } = useAttachmentContext();
+function GalleryImagePreview() {
+  const { attachments } = useAttachmentContext();
   const imageAttachment = attachments.filter(
     (a): a is ImageAttachment => a.type === 'image'
   )[0];
 
-  const handleClosePressed = useCallback(() => {
-    resetAttachments([]);
-    onReset();
-  }, [resetAttachments, onReset]);
-
   return (
-    <XStack
-      padding="$l"
-      borderRadius="$xl"
-      backgroundColor="$background"
-      flex={1}
-    >
+    <XStack backgroundColor="$background" flex={1}>
       <View flex={1} position="relative">
         <ImageBackground
           source={{
@@ -39,41 +22,29 @@ export default function GalleryImagePreview({
           style={{
             width: '100%',
             height: '100%',
-            alignItems: 'flex-end',
-          }}
-          imageStyle={{
-            borderRadius: 16,
+            justifyContent: 'center',
+            alignItems: 'center',
+            opacity:
+              imageAttachment?.uploadState?.status === 'uploading' ? 0.5 : 1,
           }}
+          resizeMode="contain"
         >
-          <XStack paddingTop="$xl" paddingHorizontal="$l" alignItems="flex-end">
-            <View>
-              <Button
-                onPress={handleClosePressed}
-                borderRadius="$radius.4xl"
-                backgroundColor="$background"
-              >
-                <Button.Icon>
-                  <Close />
-                </Button.Icon>
-              </Button>
+          {imageAttachment?.uploadState?.status === 'uploading' && (
+            <View
+              top={0}
+              justifyContent="center"
+              padding="$xl"
+              alignItems="center"
+              backgroundColor="$translucentBlack"
+              borderRadius="$m"
+            >
+              <Spinner size="large" color="$primaryText" />
             </View>
-          </XStack>
+          )}
         </ImageBackground>
-        {imageAttachment?.uploadState?.status === 'uploading' && (
-          <View
-            position="absolute"
-            top={0}
-            justifyContent="center"
-            width="100%"
-            height="100%"
-            alignItems="center"
-            backgroundColor="$translucentBlack"
-            borderRadius="$l"
-          >
-            <Spinner size="large" color="$primaryText" />
-          </View>
-        )}
       </View>
     </XStack>
   );
 }
+
+export default GalleryImagePreview;

packages/app/ui/components/Channel/index.tsx

@@ -320,12 +320,17 @@ export const Channel = forwardRef<ChannelMethods, ChannelProps>(
                               ? handleGoBack
                               : undefined
                           }
-                          showSearchButton={isChatChannel}
+                          showSearchButton={
+                            isChatChannel &&
+                            draftInputPresentationMode !== 'fullscreen'
+                          }
                           goToSearch={goToSearch}
                           goToChannels={goToChannels}
                           goToChatDetails={goToChatDetails}
                           showSpinner={isLoadingPosts}
-                          showMenuButton={true}
+                          showMenuButton={
+                            draftInputPresentationMode !== 'fullscreen'
+                          }
                         />
                         <YStack alignItems="stretch" flex={1}>
                           <AnimatePresence>