desktop: fix big input, and other desktop web issues

packages/ui/src/components/AuthorRow.tsx

@@ -160,7 +160,7 @@ export function ChatAuthorRow({
             </Text>
           ) : null}
         </XStack>
-        {deliveryStatus && deliveryStatus !== 'failed' ? (
+        {!!deliveryStatus && deliveryStatus !== 'failed' ? (
           <ChatMessageDeliveryStatus status={deliveryStatus} />
         ) : null}
       </XStack>

packages/ui/src/components/BigInput.tsx

@@ -1,11 +1,9 @@
 // import { EditorBridge } from '@10play/tentap-editor';
 import * as db from '@tloncorp/shared/db';
-import { useMemo, useRef, useState } from 'react';
-import { Dimensions, KeyboardAvoidingView, Platform } from 'react-native';
+import { useMemo, useState } from 'react';
 import { TouchableOpacity } from 'react-native-gesture-handler';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
 // TODO: replace input with our own input component
-import { Input, ScrollView, View, YStack, getTokenValue } from 'tamagui';
+import { Input, View, YStack, getTokenValue } from 'tamagui';
 
 import { ImageAttachment, useAttachmentContext } from '../contexts/attachment';
 import AttachmentSheet from './AttachmentSheet';
@@ -37,16 +35,8 @@ export function BigInput({
 } & MessageInputProps) {
   const [title, setTitle] = useState(editingPost?.title ?? '');
   const [showAttachmentSheet, setShowAttachmentSheet] = useState(false);
-  // const editorRef = useRef<{
-  // editor: TlonEditorBridge | null;
-  // setEditor: (editor: any) => void;
-  // }>(null);
-  const { top } = useSafeAreaInsets();
-  const { width } = Dimensions.get('screen');
   const titleInputHeight = getTokenValue('$4xl', 'size');
   const imageButtonHeight = getTokenValue('$4xl', 'size');
-  const keyboardVerticalOffset =
-    Platform.OS === 'ios' ? top + titleInputHeight : top;
 
   const { attachments, attachAssets } = useAttachmentContext();
   const imageAttachment = useMemo(() => {
@@ -90,11 +80,13 @@ export function BigInput({
           >
             {imageAttachment ? (
               <Image
-                source={{ uri: imageAttachment.file.uri }}
+                source={{
+                  uri: imageAttachment.file.uri,
+                }}
                 contentFit="cover"
+                height={imageButtonHeight}
                 style={{
                   width: '100%',
-                  height: '100%',
                   borderBottomLeftRadius: 16,
                   borderBottomRightRadius: 16,
                 }}
@@ -103,7 +95,7 @@ export function BigInput({
               <View
                 backgroundColor="$primaryText"
                 width="100%"
-                height="100%"
+                height={imageButtonHeight}
                 borderBottomLeftRadius="$xl"
                 borderBottomRightRadius="$xl"
                 padding="$2xl"
@@ -128,16 +120,10 @@ export function BigInput({
           </View>
         </View>
       )}
-      <ScrollView
-        scrollEventThrottle={16}
-        scrollToOverflowEnabled
-        overScrollMode="always"
-        contentContainerStyle={{
-          paddingTop:
-            channelType === 'notebook'
-              ? titleInputHeight + imageButtonHeight
-              : 0,
-        }}
+      <View
+        paddingTop={
+          channelType === 'notebook' ? titleInputHeight + imageButtonHeight : 0
+        }
       >
         <MessageInput
           shouldBlur={shouldBlur}
@@ -162,9 +148,10 @@ export function BigInput({
           placeholder={placeholder}
           bigInput
           channelType={channelType}
-          // ref={editorRef}
+          shouldAutoFocus
+          draftType={channelType === 'gallery' ? 'text' : undefined}
         />
-      </ScrollView>
+      </View>
       {/* channelType === 'notebook' &&
         editorRef.current &&
         editorRef.current.editor && (

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

@@ -316,10 +316,7 @@ export function Channel({
                   initialAttachments={initialAttachments}
                   uploadAsset={uploadAsset}
                 >
-                  <View
-                    backgroundColor={backgroundColor}
-                    flex={1}
-                  >
+                  <View backgroundColor={backgroundColor} flex={1}>
                     <YStack
                       justifyContent="space-between"
                       width="100%"
@@ -332,7 +329,12 @@ export function Channel({
                             group={group}
                             mode={headerMode}
                             title={title ?? ''}
-                            goBack={isNarrow ? handleGoBack : undefined}
+                            goBack={
+                              isNarrow ||
+                              draftInputPresentationMode === 'fullscreen'
+                                ? handleGoBack
+                                : undefined
+                            }
                             showSearchButton={isChatChannel}
                             goToSearch={goToSearch}
                             showSpinner={isLoadingPosts}

packages/ui/src/components/ChatMessage/ChatMessageActions/MessageContainer.tsx

@@ -26,7 +26,7 @@ export function MessageContainer({ post }: { post: db.Post }) {
         padding="$l"
         borderRadius="$l"
       >
-        <NotebookPost showAuthor={false} size="$xs" post={post} />
+        <NotebookPost showAuthor={false} size="$xs" post={post} hideOverflowMenu />
       </ScrollView>
     );
   }

packages/ui/src/components/GalleryPost/GalleryPost.tsx

@@ -3,10 +3,11 @@ import * as db from '@tloncorp/shared/db';
 import { truncate } from 'lodash';
 import { ComponentProps, useCallback, useMemo, useState } from 'react';
 import { PropsWithChildren } from 'react';
-import { View, XStack, styled } from 'tamagui';
+import { View, XStack, isWeb, styled } from 'tamagui';
 
 import { DetailViewAuthorRow } from '../AuthorRow';
 import { ContactAvatar } from '../Avatar';
+import { Button } from '../Button';
 import { Icon } from '../Icon';
 import { useBoundHandler } from '../ListItem/listItemUtils';
 import { createContentRenderer } from '../PostContent/ContentRenderer';
@@ -35,6 +36,7 @@ export function GalleryPost({
   onPressRetry,
   onPressDelete,
   showAuthor = true,
+  hideOverflowMenu,
   ...props
 }: {
   post: db.Post;
@@ -44,6 +46,7 @@ export function GalleryPost({
   onPressDelete?: (post: db.Post) => void;
   showAuthor?: boolean;
   isHighlighted?: boolean;
+  hideOverflowMenu?: boolean;
 } & Omit<ComponentProps<typeof GalleryPostFrame>, 'onPress' | 'onLongPress'>) {
   const [showRetrySheet, setShowRetrySheet] = useState(false);
 
@@ -77,48 +80,62 @@ export function GalleryPost({
   }
 
   return (
-    <Pressable onPress={handlePress} onLongPress={handleLongPress}>
-      <GalleryPostFrame {...props}>
-        <GalleryContentRenderer post={post} pointerEvents="none" size="$s" />
-        {showAuthor && !post.hidden && !post.isDeleted && (
-          <View
-            position="absolute"
-            bottom={0}
-            left={0}
-            right={0}
-            width="100%"
-            pointerEvents="none"
+    <>
+      <Pressable onPress={handlePress} onLongPress={handleLongPress}>
+        <GalleryPostFrame {...props}>
+          <GalleryContentRenderer post={post} pointerEvents="none" size="$s" />
+          {showAuthor && !post.hidden && !post.isDeleted && (
+            <View
+              position="absolute"
+              bottom={0}
+              left={0}
+              right={0}
+              width="100%"
+              pointerEvents="none"
+            >
+              <XStack alignItems="center" gap="$xl" padding="$m" {...props}>
+                <ContactAvatar size="$2xl" contactId={post.authorId} />
+                {deliveryFailed && (
+                  <Text
+                    // applying some shadow here because we could be rendering it
+                    // on top of an image
+                    shadowOffset={{
+                      width: 0,
+                      height: 1,
+                    }}
+                    shadowOpacity={0.8}
+                    shadowColor="$redSoft"
+                    color="$negativeActionText"
+                    size="$label/s"
+                  >
+                    Tap to retry
+                  </Text>
+                )}
+              </XStack>
+            </View>
+          )}
+          <SendPostRetrySheet
+            open={showRetrySheet}
+            onOpenChange={setShowRetrySheet}
+            post={post}
+            onPressDelete={handleDeletePressed}
+            onPressRetry={handleRetryPressed}
+          />
+        </GalleryPostFrame>
+      </Pressable>
+      {isWeb && !hideOverflowMenu && (
+        <View position="absolute" top={8} right={24} width={8} height={0}>
+          <Button
+            backgroundColor="unset"
+            onPress={handleLongPress}
+            borderWidth="unset"
+            size="$l"
           >
-            <XStack alignItems="center" gap="$xl" padding="$m" {...props}>
-              <ContactAvatar size="$2xl" contactId={post.authorId} />
-              {deliveryFailed && (
-                <Text
-                  // applying some shadow here because we could be rendering it
-                  // on top of an image
-                  shadowOffset={{
-                    width: 0,
-                    height: 1,
-                  }}
-                  shadowOpacity={0.8}
-                  shadowColor="$redSoft"
-                  color="$negativeActionText"
-                  size="$label/s"
-                >
-                  Tap to retry
-                </Text>
-              )}
-            </XStack>
-          </View>
-        )}
-        <SendPostRetrySheet
-          open={showRetrySheet}
-          onOpenChange={setShowRetrySheet}
-          post={post}
-          onPressDelete={handleDeletePressed}
-          onPressRetry={handleRetryPressed}
-        />
-      </GalleryPostFrame>
-    </Pressable>
+            <Icon type="Overflow" />
+          </Button>
+        </View>
+      )}
+    </>
   );
 }
 
@@ -338,7 +355,7 @@ const SmallContentRenderer = createContentRenderer({
     },
     image: {
       height: '100%',
-      imageProps: { aspectRatio: 'unset', height: '100%' },
+      imageProps: { aspectRatio: 'unset', height: '100%', contentFit: 'cover' },
       ...noWrapperPadding,
     },
     video: {

packages/ui/src/components/Image.tsx

@@ -16,14 +16,17 @@ const WebImage = ({ source, style, alt, onLoad, ...props }: any) => {
     }
   };
 
+  const { contentFit  } = props;
+
   return (
     <img
       src={source.uri}
       alt={alt}
       style={{
         ...StyleSheet.flatten(style),
         maxWidth: '100%',
-        height: 'auto',
+        height: props.height ? props.height : '100%',
+        objectFit: contentFit ? contentFit : undefined,
       }}
       onLoad={handleLoad}
       {...props}

packages/ui/src/components/MessageInput/MessageInputBase.tsx

@@ -132,6 +132,7 @@ export const MessageInputContainer = memo(
           gap="$l"
           alignItems="flex-end"
           justifyContent="space-between"
+          backgroundColor="$background"
         >
           {goBack ? (
             <View paddingBottom="$xs">