@oxyhq/services 22.6.3 → 22.7.0

package/src/ui/screens/FileManagementScreen.tsx

@@ -12,6 +12,7 @@ import {
     Animated,
     Easing,
     AccessibilityInfo,
+    Platform,
     useWindowDimensions,
 } from 'react-native';
 import { Image as ExpoImage } from 'expo-image';
@@ -39,6 +40,7 @@ import { useFileUploadState } from './fileManagement/hooks/useFileUploadState';
 import PhotoPickerView from './fileManagement/PhotoPickerSection';
 import FileListSection, { type FileListItem } from './fileManagement/FileListSection';
 import UploadBar from './fileManagement/UploadBar';
+import { AnimatedButton } from '../components/fileManagement/AnimatedButton';
 
 // Genuinely-inline-only styles: `viewModeButton` is spread into an Animated.View
 // style array (interpolated backgroundColor), and the photo tiles are
@@ -57,60 +59,6 @@ const screenStyles = StyleSheet.create({
     justifiedPhotoImage: { width: '100%', height: '100%', borderRadius: 6 },
 });
 
-// Animated button component for smooth transitions
-const AnimatedButton: React.FC<{
-    isSelected: boolean;
-    onPress: () => void;
-    icon: string;
-    primaryColor: string;
-    textColor: string;
-    style: Record<string, unknown>;
-    accessibilityLabel: string;
-}> = ({ isSelected, onPress, icon, primaryColor, textColor, style, accessibilityLabel }) => {
-    const animatedValue = useRef(new Animated.Value(isSelected ? 1 : 0)).current;
-
-    useEffect(() => {
-        Animated.timing(animatedValue, {
-            toValue: isSelected ? 1 : 0,
-            duration: 200,
-            easing: Easing.out(Easing.ease),
-            useNativeDriver: false,
-        }).start();
-    }, [isSelected, animatedValue]);
-
-    const backgroundColor = animatedValue.interpolate({
-        inputRange: [0, 1],
-        outputRange: ['transparent', primaryColor],
-    });
-
-    return (
-        <TouchableOpacity
-            onPress={onPress}
-            activeOpacity={0.7}
-            accessibilityRole="button"
-            accessibilityLabel={accessibilityLabel}
-            accessibilityState={{ selected: isSelected }}
-        >
-            <Animated.View
-                style={[
-                    style,
-                    {
-                        backgroundColor,
-                    },
-                ]}
-            >
-                <Animated.View>
-                    <MaterialCommunityIcons
-                        name={icon as React.ComponentProps<typeof MaterialCommunityIcons>['name']}
-                        size={16}
-                        color={isSelected ? '#FFFFFF' : textColor}
-                    />
-                </Animated.View>
-            </Animated.View>
-        </TouchableOpacity>
-    );
-};
-
 const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
     onClose,
     theme,
@@ -1008,21 +956,12 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                 const photoIndex = photos.findIndex(p => p.id === lastSelectedFileId);
 
                 if (photoIndex >= 0) {
-                    // Estimate photo item height based on grid layout
-                    // Calculate items per row
-                    let itemsPerRow = 3;
-                    if (safeContainerWidth > 768) itemsPerRow = 6;
-                    else if (safeContainerWidth > 480) itemsPerRow = 4;
-
-                    const scrollContainerPadding = 32;
-                    const gaps = (itemsPerRow - 1) * 4;
-                    const availableWidth = safeContainerWidth - scrollContainerPadding;
-                    const itemWidth = (availableWidth - gaps) / itemsPerRow;
-
-                    // Calculate row and approximate scroll position
+                    // Rough scroll estimate for the justified grid (3 photos/row; variable row heights).
+                    const itemsPerRow = 3;
+                    const estimatedRowHeight = 150;
+                    const rowGap = 4;
                     const row = Math.floor(photoIndex / itemsPerRow);
-                    const headerHeight = 250;
-                    const finalScrollPosition = headerHeight + (row * (itemWidth + 4)) - 150;
+                    const finalScrollPosition = row * (estimatedRowHeight + rowGap) - 100;
 
                     // Use requestAnimationFrame to ensure DOM is updated before scrolling
                     requestAnimationFrame(() => {
@@ -1049,45 +988,6 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
         }
     }, [lastSelectedFileId]);
 
-    const renderPhotoItem = (photo: FileMetadata, index: number) => {
-        const downloadUrl = thumbSourceFor(photo);
-
-        // Calculate photo item width based on actual container size from bottom sheet
-        let itemsPerRow = 3; // Default for mobile
-        if (safeContainerWidth > 768) itemsPerRow = 6; // Tablet/Desktop
-        else if (safeContainerWidth > 480) itemsPerRow = 4; // Large mobile
-
-        // Account for the photoScrollContainer padding (16px on each side = 32px total)
-        const scrollContainerPadding = 32; // Total horizontal padding from photoScrollContainer
-        const gaps = (itemsPerRow - 1) * 4; // Gap between items
-        const availableWidth = safeContainerWidth - scrollContainerPadding;
-        const itemWidth = (availableWidth - gaps) / itemsPerRow;
-
-        return (
-            <TouchableOpacity
-                key={photo.id}
-                className="rounded-[8px] overflow-hidden"
-                style={{ width: itemWidth, height: itemWidth }}
-                onPress={() => handleFileOpen(photo)}
-                activeOpacity={0.8}
-            >
-                <View className="w-full h-full relative rounded-[8px] overflow-hidden">
-                    <ExpoImage
-                        source={{ uri: downloadUrl }}
-                        style={screenStyles.photoImage}
-                        contentFit="cover"
-                        transition={120}
-                        cachePolicy="memory-disk"
-                        onError={() => {
-                            // Image preview failed to load
-                        }}
-                        accessibilityLabel={photo.filename}
-                    />
-                </View>
-            </TouchableOpacity>
-        );
-    };
-
     const renderPhotoGrid = useCallback(() => {
         const photos = filteredFiles.filter(file => file.contentType.startsWith('image/'));
 
@@ -1159,9 +1059,12 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                     loadPhotoDimensions={loadPhotoDimensions}
                     createJustifiedRows={createJustifiedRows}
                     renderJustifiedPhotoItem={renderJustifiedPhotoItem}
-                    renderSimplePhotoItem={renderPhotoItem}
                     textColor={colors.text}
-                    containerWidth={safeContainerWidth}
+                    containerWidth={
+                        typeof containerWidth === 'number' && containerWidth > 0
+                            ? containerWidth
+                            : undefined
+                    }
                 />
             </ScrollView>
         );
@@ -1179,8 +1082,7 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
         loadPhotoDimensions,
         createJustifiedRows,
         renderJustifiedPhotoItem,
-        renderPhotoItem,
-        safeContainerWidth
+        containerWidth,
     ]);
 
     // Inline justified grid removed (moved to components/photogrid/JustifiedPhotoGrid.tsx)
@@ -1230,7 +1132,10 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                     toValue: 1,
                     duration: 2000,
                     easing: Easing.linear,
-                    useNativeDriver: true,
+                    // Web has no native animated module; forcing the native
+                    // driver there warns and falls back to JS. The shimmer only
+                    // drives a transform, so JS-driving it on web is fine.
+                    useNativeDriver: Platform.OS !== 'web',
                 })
             );
             shimmer.start();

package/src/ui/screens/fileManagement/PhotoPickerSection.tsx

@@ -151,14 +151,61 @@ export interface PhotoPickerViewProps {
  * Apple Photos pattern: when any cell is selected, *non-selected* siblings
  * fade to 0.6 opacity to focus attention on the active selection.
  */
-const PhotoPickerCell = React.memo(function PhotoPickerCell(props: {
+/**
+ * Shared cell chrome (image, dim, badge). Ring border is injected by the
+ * static vs animated wrappers so web never touches Reanimated worklets.
+ */
+function PhotoPickerCellContent(props: {
+    photo: FileMetadata;
+    dim: boolean;
+    isSelected: boolean;
+    selectionIndex: number;
+    primaryColor: string;
+    thumbUrl: string | undefined;
+    ring: React.ReactNode;
+}) {
+    const {
+        photo, dim, isSelected, selectionIndex, primaryColor, thumbUrl, ring,
+    } = props;
+
+    return (
+        <>
+            <View
+                className={`flex-1 rounded-radius-8 overflow-hidden bg-[#111111]${dim ? ' opacity-60' : ''}`}
+            >
+                <ExpoImage
+                    source={{ uri: thumbUrl }}
+                    style={{ width: '100%', height: '100%' }}
+                    contentFit="cover"
+                    transition={120}
+                    cachePolicy="memory-disk"
+                    accessibilityLabel={photo.filename}
+                />
+            </View>
+            {ring}
+            {isSelected && (
+                <View
+                    pointerEvents="none"
+                    className="absolute top-1.5 right-1.5 min-w-[22px] h-[22px] px-1.5 rounded-full items-center justify-center"
+                    style={{ backgroundColor: primaryColor }}
+                >
+                    <Text className="text-white text-[12px] font-bold leading-[14px]">
+                        {selectionIndex > 0 ? String(selectionIndex) : ''}
+                    </Text>
+                </View>
+            )}
+        </>
+    );
+}
+
+type PhotoPickerCellProps = {
     photo: FileMetadata;
     size: number;
     marginRight: number;
     marginBottom: number;
     isSelected: boolean;
-    selectionIndex: number; // 1-based for badge; 0 if not selected
-    dim: boolean; // any selection exists and this cell is not selected
+    selectionIndex: number;
+    dim: boolean;
     primaryColor: string;
     thumbUrl: string | undefined;
     enterIndex: number;
@@ -166,21 +213,64 @@ const PhotoPickerCell = React.memo(function PhotoPickerCell(props: {
     onPress: () => void;
     onLongPress: () => void;
     a11yLabel: string;
-}) {
+};
+
+const PhotoPickerCellStatic = React.memo(function PhotoPickerCellStatic(props: PhotoPickerCellProps) {
+    const {
+        photo, size, marginRight, marginBottom, isSelected, selectionIndex,
+        dim, primaryColor, thumbUrl, onPress, onLongPress, a11yLabel,
+    } = props;
+
+    const cellWrapperStyle = {
+        width: size,
+        height: size,
+        marginRight,
+        marginBottom,
+    };
+
+    const ring = isSelected ? (
+        <View
+            pointerEvents="none"
+            className="absolute inset-0 rounded-radius-8 border-[3px]"
+            style={{ borderColor: primaryColor }}
+        />
+    ) : null;
+
+    return (
+        <TouchableOpacity
+            activeOpacity={0.85}
+            onPress={onPress}
+            onLongPress={onLongPress}
+            className="relative"
+            style={cellWrapperStyle}
+            accessibilityRole="button"
+            accessibilityLabel={a11yLabel}
+            accessibilityState={{ selected: isSelected }}
+        >
+            <PhotoPickerCellContent
+                photo={photo}
+                dim={dim}
+                isSelected={isSelected}
+                selectionIndex={selectionIndex}
+                primaryColor={primaryColor}
+                thumbUrl={thumbUrl}
+                ring={ring}
+            />
+        </TouchableOpacity>
+    );
+});
+
+const PhotoPickerCellAnimated = React.memo(function PhotoPickerCellAnimated(props: PhotoPickerCellProps) {
     const {
         photo, size, marginRight, marginBottom, isSelected, selectionIndex,
         dim, primaryColor, thumbUrl, enterIndex, reduceMotion, onPress,
         onLongPress, a11yLabel,
     } = props;
 
-    // Cap the cumulative stagger at ~800ms total so the very long grid does
-    // not keep fading in late tiles. Beyond ~53 tiles the delay maxes out.
     const STAGGER_PER_CELL_MS = 15;
     const MAX_TOTAL_STAGGER_MS = 800;
     const delay = Math.min(enterIndex * STAGGER_PER_CELL_MS, MAX_TOTAL_STAGGER_MS);
 
-    // Selection ring pulse animation: 1.0 → 1.05 → 1.0 on transition to
-    // selected. Plays at most once per selection change; reduce-motion skips.
     const ringScale = useSharedValue(1);
     const prevSelected = useRef(isSelected);
     useEffect(() => {
@@ -204,8 +294,6 @@ const PhotoPickerCell = React.memo(function PhotoPickerCell(props: {
         transform: [{ scale: ringScale.value }],
     }));
 
-    // Per-tile pixel geometry is derived from the measured grid width, so it
-    // stays an inline `style` — NativeWind cannot express a runtime pixel size.
     const cellWrapperStyle = {
         width: size,
         height: size,
@@ -213,44 +301,13 @@ const PhotoPickerCell = React.memo(function PhotoPickerCell(props: {
         marginBottom,
     };
 
-    const inner = (
-        <>
-            <View
-                className={`flex-1 rounded-radius-8 overflow-hidden bg-[#111111]${dim ? ' opacity-60' : ''}`}
-            >
-                <ExpoImage
-                    source={{ uri: thumbUrl }}
-                    // expo-image is a third-party component (no NativeWind
-                    // className remap), so fill via inline style.
-                    style={{ width: '100%', height: '100%' }}
-                    contentFit="cover"
-                    transition={120}
-                    cachePolicy="memory-disk"
-                    accessibilityLabel={photo.filename}
-                />
-            </View>
-            {isSelected && (
-                <Reanimated.View
-                    pointerEvents="none"
-                    className="absolute inset-0 rounded-radius-8 border-[3px]"
-                    // borderColor is the theme primary (dynamic); the animated
-                    // scale transform must ride on `style` too.
-                    style={[{ borderColor: primaryColor }, ringAnimatedStyle]}
-                />
-            )}
-            {isSelected && (
-                <View
-                    pointerEvents="none"
-                    className="absolute top-1.5 right-1.5 min-w-[22px] h-[22px] px-1.5 rounded-full items-center justify-center"
-                    style={{ backgroundColor: primaryColor }}
-                >
-                    <Text className="text-white text-[12px] font-bold leading-[14px]">
-                        {selectionIndex > 0 ? String(selectionIndex) : ''}
-                    </Text>
-                </View>
-            )}
-        </>
-    );
+    const ring = isSelected ? (
+        <Reanimated.View
+            pointerEvents="none"
+            className="absolute inset-0 rounded-radius-8 border-[3px]"
+            style={[{ borderColor: primaryColor }, ringAnimatedStyle]}
+        />
+    ) : null;
 
     if (reduceMotion) {
         return (
@@ -264,7 +321,15 @@ const PhotoPickerCell = React.memo(function PhotoPickerCell(props: {
                 accessibilityLabel={a11yLabel}
                 accessibilityState={{ selected: isSelected }}
             >
-                {inner}
+                <PhotoPickerCellContent
+                    photo={photo}
+                    dim={dim}
+                    isSelected={isSelected}
+                    selectionIndex={selectionIndex}
+                    primaryColor={primaryColor}
+                    thumbUrl={thumbUrl}
+                    ring={ring}
+                />
             </TouchableOpacity>
         );
     }
@@ -284,12 +349,27 @@ const PhotoPickerCell = React.memo(function PhotoPickerCell(props: {
                 accessibilityLabel={a11yLabel}
                 accessibilityState={{ selected: isSelected }}
             >
-                {inner}
+                <PhotoPickerCellContent
+                    photo={photo}
+                    dim={dim}
+                    isSelected={isSelected}
+                    selectionIndex={selectionIndex}
+                    primaryColor={primaryColor}
+                    thumbUrl={thumbUrl}
+                    ring={ring}
+                />
             </TouchableOpacity>
         </Reanimated.View>
     );
 });
 
+const PhotoPickerCell = React.memo(function PhotoPickerCell(props: PhotoPickerCellProps) {
+    if (Platform.OS === 'web') {
+        return <PhotoPickerCellStatic {...props} />;
+    }
+    return <PhotoPickerCellAnimated {...props} />;
+});
+
 const PhotoPickerView: React.FC<PhotoPickerViewProps> = ({
     photos,
     selectedIds,
@@ -547,7 +627,8 @@ const PhotoPickerView: React.FC<PhotoPickerViewProps> = ({
                         </View>
                         <View pointerEvents="none">
                             <Text
-                                className="text-white text-[17px] font-semibold text-center tracking-[-0.2px]"
+                                className="text-white text-[17px] font-semibold text-center"
+                                style={{ letterSpacing: -0.2 }}
                                 numberOfLines={1}
                             >
                                 {t('fileManagement.choosePhoto')}