@oxyhq/services 22.8.3 → 22.8.5

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

@@ -13,6 +13,7 @@ import {
 } from 'react-native';
 import { Image as ExpoImage } from 'expo-image';
 import { Ionicons, MaterialCommunityIcons } from '@expo/vector-icons';
+import { BREAKPOINTS } from '@oxyhq/bloom/styles';
 import type { FileMetadata } from '@oxyhq/core';
 import { computePhotoGridLayout } from './photoGridLayout';
 
@@ -91,20 +92,18 @@ const hapticNotification = async (type: HapticNotification): Promise<void> => {
 };
 
 /**
- * The bottom sheet renders below the status bar already (its `maxHeight` is
- * capped by `SCREEN_HEIGHT - insets.top`), so the picker MUST NOT add an extra
- * safe-area inset to the header. Header zone from the sheet top:
- *   • 28dp drag-handle hit area floats at the very top of the sheet
- *   • 56dp app bar sits immediately below the handle
- * Grid content is pushed down by the full header zone + 4dp of breathing room
- * so the first row clears the translucent header. These are fixed layout
- * constants — the equivalent `pt-[28px]` / `min-h-[84px]` / `pt-[88px]` utility
- * classes in the JSX MUST stay in sync with them.
+ * The picker renders inside a Bloom `<Dialog>` (bottom-sheet on narrow, centered
+ * card on `md+`). The Dialog owns its own chrome: it draws its OWN drag handle
+ * in bottom placement (a floating 28dp pill that paints ABOVE this header via a
+ * higher z-index) and none in center placement — so the picker's translucent
+ * header no longer reserves the handle strip itself. The header is just the 56dp
+ * app bar; grid content is pushed down by the app bar + 4dp of breathing room so
+ * the first row clears it. These are fixed layout constants — the equivalent
+ * `min-h-[56px]` / `pt-[60px]` utility classes in the JSX MUST stay in sync.
  */
-const HANDLE_ZONE = 28;
 const APP_BAR_HEIGHT = 56;
-const HEADER_HEIGHT = HANDLE_ZONE + APP_BAR_HEIGHT; // 84
-const GRID_CONTENT_PADDING_TOP = HEADER_HEIGHT + 4; // 88
+const HEADER_HEIGHT = APP_BAR_HEIGHT; // 56
+const GRID_CONTENT_PADDING_TOP = HEADER_HEIGHT + 4; // 60
 
 /**
  * Props for the dedicated photo picker view. Used by FileManagementScreen
@@ -138,8 +137,8 @@ export interface PhotoPickerViewProps {
 }
 
 /**
- * Photo-cell animation tuning. The animated cell uses RN's own `Animated`
- * (NOT Reanimated): its entrance is a staggered opacity fade — replacing the
+ * Photo-cell animation tuning. The cell uses RN's own `Animated` (NOT
+ * Reanimated): its entrance is a staggered opacity fade — replacing the
  * Reanimated `entering={FadeIn}` LAYOUT animation, which cannot load on the
  * RN-Web build (no `react-native-worklets` babel plugin) and only warns +
  * no-ops there. RN `Animated` runs cross-platform: native-driven on device,
@@ -155,69 +154,13 @@ const RING_PULSE_UP_MS = 110;
 const RING_SPRING_FRICTION = 9;
 const RING_SPRING_TENSION = 120;
 /**
- * Inline mirror of the `rounded-radius-8 border-[3px]` classes the static ring
- * carries. The animated ring MUST use inline `style` (its animated transform
- * has to be inline, and NativeWind `className` interop is not guaranteed on an
- * `Animated.View` under the RN-Web build), so these keep it pixel-identical to
- * the static ring.
+ * The selection ring is an `Animated.View` (its pulse transform must be inline,
+ * and `className` interop on `Animated.View` is not guaranteed under the RN-Web
+ * build), so these mirror the `rounded-radius-8 border-[3px]` design tokens.
  */
 const CELL_CORNER_RADIUS = 8; // `rounded-radius-8`
 const SELECTION_RING_WIDTH = 3; // `border-[3px]`
 
-/**
- * A single photo cell. Memoized so re-renders during selection only touch
- * affected cells — selection of one photo must not redraw the whole grid.
- *
- * Apple Photos pattern: when any cell is selected, *non-selected* siblings
- * fade to 0.6 opacity to focus attention on the active selection.
- */
-/**
- * Shared cell chrome (image, dim, badge). Ring border is injected by the
- * static vs animated wrappers.
- */
-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;
@@ -235,65 +178,33 @@ type PhotoPickerCellProps = {
     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) {
+/**
+ * A single photo cell. Memoized so re-renders during selection only touch
+ * affected cells — selecting one photo must not redraw the whole grid.
+ *
+ * Apple Photos pattern: when any cell is selected, *non-selected* siblings fade
+ * to 0.6 opacity to focus attention on the active selection. A staggered
+ * entrance fade plays on mount; a spring pulse plays each time a cell enters the
+ * selected state. Both animations are pinned off under reduce-motion, so the
+ * one component covers both the animated and the reduced-motion paths.
+ */
+const PhotoPickerCell = React.memo(function PhotoPickerCell(props: PhotoPickerCellProps) {
     const {
         photo, size, marginRight, marginBottom, isSelected, selectionIndex,
-        dim, primaryColor, thumbUrl, enterIndex, onPress, onLongPress, a11yLabel,
+        dim, primaryColor, thumbUrl, enterIndex, reduceMotion,
+        onPress, onLongPress, a11yLabel,
     } = props;
 
     const delay = Math.min(enterIndex * STAGGER_PER_CELL_MS, MAX_TOTAL_STAGGER_MS);
 
-    // Entrance: a per-cell opacity fade, staggered by the cell's grid index.
-    // `useNativeDriver` is only available on native — on web the animation is
-    // JS-driven, which still plays the fade (unlike Reanimated layout entering,
-    // which no-ops on the plugin-less RN-Web build).
-    const opacity = useRef(new Animated.Value(0)).current;
+    // Entrance fade, staggered by the cell's grid index. Reduce-motion pins
+    // opacity at 1 and never animates.
+    const opacity = useRef(new Animated.Value(reduceMotion ? 1 : 0)).current;
     useEffect(() => {
+        if (reduceMotion) {
+            opacity.setValue(1);
+            return;
+        }
         const entrance = Animated.timing(opacity, {
             toValue: 1,
             duration: ENTRANCE_DURATION_MS,
@@ -302,16 +213,18 @@ const PhotoPickerCellAnimated = React.memo(function PhotoPickerCellAnimated(prop
         });
         entrance.start();
         return () => entrance.stop();
-    }, [opacity, delay]);
+    }, [opacity, delay, reduceMotion]);
 
-    // Ring pulse: a quick scale bump each time a cell transitions INTO the
-    // selected state, springing back to rest.
+    // Selection-ring pulse: a quick scale bump each time the cell transitions
+    // INTO the selected state, springing back to rest. Reduce-motion holds the
+    // ring at rest scale (still tracks selection state so a later un-reduce does
+    // not fire a stale pulse).
     const ringScale = useRef(new Animated.Value(1)).current;
     const prevSelected = useRef(isSelected);
     useEffect(() => {
         if (prevSelected.current === isSelected) return;
         prevSelected.current = isSelected;
-        if (!isSelected) {
+        if (reduceMotion || !isSelected) {
             ringScale.setValue(1);
             return;
         }
@@ -330,33 +243,13 @@ const PhotoPickerCellAnimated = React.memo(function PhotoPickerCellAnimated(prop
         ]);
         pulse.start();
         return () => pulse.stop();
-    }, [isSelected, ringScale]);
-
-    // The animated ring reads `ringScale`; its border/radius/position are inline
-    // `style` because NativeWind `className` interop is not guaranteed on an
-    // `Animated.View` under the RN-Web build.
-    const ring = isSelected ? (
-        <Animated.View
-            pointerEvents="none"
-            style={{
-                position: 'absolute',
-                top: 0,
-                right: 0,
-                bottom: 0,
-                left: 0,
-                borderRadius: CELL_CORNER_RADIUS,
-                borderWidth: SELECTION_RING_WIDTH,
-                borderColor: primaryColor,
-                transform: [{ scale: ringScale }],
-            }}
-        />
-    ) : null;
+    }, [isSelected, ringScale, reduceMotion]);
 
     return (
-        // Animated wrapper carries the entrance opacity + layout box as inline
-        // `style` (animated values must be inline, and className interop on
-        // Animated.View is not guaranteed on RN-Web). `className` stays on the
-        // non-animated TouchableOpacity + content below.
+        // The animated wrapper carries the entrance opacity + the layout box as
+        // inline `style`: animated values must be inline, and the box's
+        // size/margins are runtime pixels className cannot express. `className`
+        // drives the static chrome below (`flex-1` fills this fixed-size box).
         <Animated.View
             style={{
                 width: size,
@@ -376,30 +269,50 @@ const PhotoPickerCellAnimated = React.memo(function PhotoPickerCellAnimated(prop
                 accessibilityLabel={a11yLabel}
                 accessibilityState={{ selected: isSelected }}
             >
-                <PhotoPickerCellContent
-                    photo={photo}
-                    dim={dim}
-                    isSelected={isSelected}
-                    selectionIndex={selectionIndex}
-                    primaryColor={primaryColor}
-                    thumbUrl={thumbUrl}
-                    ring={ring}
-                />
+                <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>
+                {isSelected && (
+                    <Animated.View
+                        pointerEvents="none"
+                        style={{
+                            position: 'absolute',
+                            top: 0,
+                            right: 0,
+                            bottom: 0,
+                            left: 0,
+                            borderRadius: CELL_CORNER_RADIUS,
+                            borderWidth: SELECTION_RING_WIDTH,
+                            borderColor: primaryColor,
+                            transform: [{ scale: ringScale }],
+                        }}
+                    />
+                )}
+                {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>
+                )}
             </TouchableOpacity>
         </Animated.View>
     );
 });
 
-const PhotoPickerCell = React.memo(function PhotoPickerCell(props: PhotoPickerCellProps) {
-    // reduceMotion → the static (unanimated) cell on every platform. Otherwise
-    // the RN-`Animated` cell, which now plays on web too (no Reanimated layout
-    // entering, so no plugin-less RN-Web warning / no-op).
-    if (props.reduceMotion) {
-        return <PhotoPickerCellStatic {...props} />;
-    }
-    return <PhotoPickerCellAnimated {...props} />;
-});
-
 const PhotoPickerView: React.FC<PhotoPickerViewProps> = ({
     photos,
     selectedIds,
@@ -435,13 +348,33 @@ const PhotoPickerView: React.FC<PhotoPickerViewProps> = ({
     // then snaps to the sheet width once `onLayout` reports it. The measured
     // wrapper carries ONLY a `style` (no `className`) to maximise the chance
     // `onLayout` fires on web.
-    const { width: windowWidth } = useWindowDimensions();
+    const { width: windowWidth, height: windowHeight } = useWindowDimensions();
     const [gridWidth, setGridWidth] = useState(0);
     const onRootLayout = useCallback((e: LayoutChangeEvent) => {
         const w = Math.round(e.nativeEvent.layout.width);
         setGridWidth((prev) => (prev === w ? prev : w));
     }, []);
 
+    // The hosting Dialog uses `{ base: 'bottom', md: 'center' }`. In BOTH
+    // placements the panel/sheet has no intrinsic height that a `flex: 1` root
+    // could fill down to the FlatList: the centered card hugs its content, and
+    // the bottom sheet's own `maxHeight` (several flex levels above this root)
+    // does not propagate a definite bound through the chain. So the root owns a
+    // `maxHeight` DIRECTLY — the FlatList then scrolls within it when the grid is
+    // long, and the panel hugs its content when the grid is short (no huge empty
+    // panel). The cap is tighter for the centered card (a floating modal reads
+    // better below full height); the bottom sheet may run taller. Keep this
+    // breakpoint in sync with `DIALOG_PLACEMENT` in BottomSheetRouter.
+    const isCenteredPanel = windowWidth >= BREAKPOINTS.md;
+    const rootStyle = useMemo(
+        () => ({
+            maxHeight: isCenteredPanel
+                ? Math.min(Math.round(windowHeight * 0.85), 720)
+                : Math.round(windowHeight * 0.9),
+        }),
+        [isCenteredPanel, windowHeight],
+    );
+
     const effectiveWidth = gridWidth > 0 ? gridWidth : windowWidth;
     const { columns, cellSize, gutter } = useMemo(
         () => computePhotoGridLayout(effectiveWidth),
@@ -571,17 +504,19 @@ const PhotoPickerView: React.FC<PhotoPickerViewProps> = ({
 
     return (
         // Measured wrapper: `style`-only (no className) so RN-Web fires onLayout.
-        // `minHeight: 0` down the whole flex chain: the sheet is `scrollable=false`
-        // (the FlatList owns scrolling) and clamped by its `maxHeight`, but on web a
-        // flex child defaults to `min-height: auto` and grows to its content, so the
-        // list overflows the clamp and is clipped (renders "half", no scroll). Letting
-        // each flex link shrink to the clamped height gives the FlatList a bounded
-        // scroll area. Native (Yoga) already defaults min to 0, so this is web-only.
-        <View style={{ flex: 1, minHeight: 0 }} onLayout={onRootLayout}>
-            <View className="flex-1 bg-black" style={{ minHeight: 0 }}>
-                {/* Photo grid (renders behind translucent header) */}
+        // `rootStyle` is placement-aware — a `maxHeight` cap that gives the
+        // FlatList a bounded scroll region while letting a short grid hug its
+        // content (see the `rootStyle` derivation). It must NOT carry a className
+        // (that can suppress web `onLayout`).
+        <View style={rootStyle} onLayout={onRootLayout}>
+            {/* `min-h-0` lets this flex child shrink below its content on web so
+                the FlatList gets a bounded scroll region inside the height-capped
+                root (the CSS flexbox `min-height:auto` trap; a no-op on native,
+                where Yoga already defaults min-height to 0). */}
+            <View className="flex-1 min-h-0 bg-black">
+                {/* Photo grid (renders behind the translucent header). */}
                 {isEmpty ? (
-                    <View className="flex-1 items-center justify-center px-space-32 pt-[88px]">
+                    <View className="flex-1 items-center justify-center px-space-32 pt-[60px]">
                         <View className="opacity-30 mb-space-16">
                             <MaterialCommunityIcons name="image-outline" size={64} color="#FFFFFF" />
                         </View>
@@ -621,9 +556,8 @@ const PhotoPickerView: React.FC<PhotoPickerViewProps> = ({
                             renderItem={renderItem}
                             keyExtractor={keyExtractor}
                             numColumns={columns}
-                            className="flex-1"
-                            style={{ minHeight: 0 }}
-                            contentContainerClassName="pt-[88px] pb-space-24"
+                            className="flex-1 min-h-0"
+                            contentContainerClassName="pt-[60px] pb-space-24"
                             showsVerticalScrollIndicator={false}
                             refreshControl={
                                 <RefreshControl
@@ -643,11 +577,12 @@ const PhotoPickerView: React.FC<PhotoPickerViewProps> = ({
                         />
                 )}
 
-                {/* Translucent black header. The bottom sheet already sits below
-                    the status bar, so we do NOT add `insets.top` — that would
-                    double-pad. `pt-[28px]` clears the 28dp drag handle floating
-                    at the top of the sheet; `min-h-[84px]` = handle + app bar. */}
-                <View className="absolute top-0 left-0 right-0 flex-row items-center justify-between px-space-12 z-30 bg-[#000000EB] pt-[28px] min-h-[84px]">
+                {/* Translucent black header floating over the grid. The Dialog owns
+                    the drag handle (a floating pill above this bar in bottom
+                    placement, drawn at a higher z-index; none in center), so the
+                    header no longer reserves the 28dp handle strip — it is just the
+                    56dp app bar (`min-h-[56px]`). */}
+                <View className="absolute top-0 left-0 right-0 flex-row items-center justify-between px-space-12 z-30 bg-[#000000EB] min-h-[56px]">
                     <View className="flex-row items-center justify-between w-full h-14">
                         <View className="basis-0 grow flex-row items-center justify-start">
                             <TouchableOpacity