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/ChatMessage.tsx

@@ -4,8 +4,8 @@ import { ComponentProps, memo, useCallback, useMemo, useState } from 'react';
 import { View, XStack, YStack, isWeb } from 'tamagui';
 
 import AuthorRow from '../AuthorRow';
-import { Button } from '../Button';
 import { Icon } from '../Icon';
+import { OverflowMenuButton } from '../OverflowMenuButton';
 import { createContentRenderer } from '../PostContent/ContentRenderer';
 import {
   usePostContent,
@@ -196,12 +196,13 @@ const ChatMessage = ({
           onPressDelete={handleDeletePressed}
         />
       </YStack>
-      {isWeb && !hideOverflowMenu && showOverflowOnHover && (
-        <View position="absolute" top={0} right={12} width={0} height={0}>
-          <Button onPress={handleLongPress} borderWidth="unset" size="$l">
-            <Icon type="Overflow" />
-          </Button>
-        </View>
+      {!hideOverflowMenu && showOverflowOnHover && (
+        <OverflowMenuButton
+          onPress={handleLongPress}
+          top={0}
+          right={12}
+          width={0}
+        />
       )}
     </Pressable>
   );

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

@@ -9,6 +9,7 @@ import { DetailViewAuthorRow } from '../AuthorRow';
 import { ContactAvatar } from '../Avatar';
 import { Icon } from '../Icon';
 import { useBoundHandler } from '../ListItem/listItemUtils';
+import { OverflowMenuButton } from '../OverflowMenuButton';
 import { createContentRenderer } from '../PostContent/ContentRenderer';
 import {
   BlockData,
@@ -35,6 +36,7 @@ export function GalleryPost({
   onPressRetry,
   onPressDelete,
   showAuthor = true,
+  hideOverflowMenu,
   ...props
 }: {
   post: db.Post;
@@ -44,8 +46,10 @@ 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);
+  const [disableHandlePress, setDisableHandlePress] = useState(false);
 
   const handleRetryPressed = useCallback(() => {
     onPressRetry?.(post);
@@ -72,12 +76,27 @@ export function GalleryPost({
 
   const handleLongPress = useBoundHandler(post, onLongPress);
 
+  const onPressOverflow = useCallback(() => {
+    handleLongPress();
+  }, [handleLongPress]);
+
+  const onHoverIntoOverflow = useCallback(() => {
+    setDisableHandlePress(true);
+  }, []);
+
+  const onHoverOutOfOverflow = useCallback(() => {
+    setDisableHandlePress(false);
+  }, []);
+
   if (post.isDeleted) {
     return null;
   }
 
   return (
-    <Pressable onPress={handlePress} onLongPress={handleLongPress}>
+    <Pressable
+      onPress={disableHandlePress ? undefined : handlePress}
+      onLongPress={handleLongPress}
+    >
       <GalleryPostFrame {...props}>
         <GalleryContentRenderer post={post} pointerEvents="none" size="$s" />
         {showAuthor && !post.hidden && !post.isDeleted && (
@@ -117,6 +136,14 @@ export function GalleryPost({
           onPressDelete={handleDeletePressed}
           onPressRetry={handleRetryPressed}
         />
+        {!hideOverflowMenu && (
+          <OverflowMenuButton
+            backgroundColor="unset"
+            onPress={onPressOverflow}
+            onHoverIn={onHoverIntoOverflow}
+            onHoverOut={onHoverOutOfOverflow}
+          />
+        )}
       </GalleryPostFrame>
     </Pressable>
   );
@@ -338,7 +365,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">