diff --git a/packages/app/src/components/attachment-pill.tsx b/packages/app/src/components/attachment-pill.tsx index 28b38c077..4edf1ef04 100644 --- a/packages/app/src/components/attachment-pill.tsx +++ b/packages/app/src/components/attachment-pill.tsx @@ -1,7 +1,9 @@ -import type { ReactNode } from "react"; +import { type ReactNode, useState } from "react"; import { Pressable, View } from "react-native"; import { StyleSheet, useUnistyles } from "react-native-unistyles"; import { X } from "lucide-react-native"; +import { isNative } from "@/constants/platform"; +import { useIsCompactFormFactor } from "@/constants/layout"; interface AttachmentPillProps { onOpen: () => void; @@ -21,11 +23,18 @@ export function AttachmentPill({ children, }: AttachmentPillProps) { const { theme } = useUnistyles(); + const isCompact = useIsCompactFormFactor(); + const [isBodyHovered, setIsBodyHovered] = useState(false); + const [isCloseHovered, setIsCloseHovered] = useState(false); + const alwaysShow = isNative || isCompact; + const showRemove = alwaysShow || isBodyHovered || isCloseHovered; return ( setIsBodyHovered(true)} + onHoverOut={() => setIsBodyHovered(false)} accessibilityRole="button" accessibilityLabel={openAccessibilityLabel} style={styles.body} @@ -34,10 +43,12 @@ export function AttachmentPill({ setIsCloseHovered(true)} + onHoverOut={() => setIsCloseHovered(false)} hitSlop={8} accessibilityRole="button" accessibilityLabel={removeAccessibilityLabel} - style={styles.closeButton} + style={[styles.closeButton, !showRemove && styles.closeButtonHidden]} > @@ -69,4 +80,8 @@ const styles = StyleSheet.create((theme) => ({ justifyContent: "center", zIndex: 1, }, + closeButtonHidden: { + opacity: 0, + pointerEvents: "none", + }, }));