@oxyhq/services 22.8.0 → 22.8.2

package/lib/typescript/module/ui/screens/fileManagement/PhotoPickerSection.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PhotoPickerSection.d.ts","sourceRoot":"","sources":["../../../../../../src/ui/screens/fileManagement/PhotoPickerSection.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4D,MAAM,OAAO,CAAC;AAsBjF,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AA6FhD;;;;GAIG;AACH,MAAM,WAAW,oBAAoB;IACjC,MAAM,EAAE,YAAY,EAAE,CAAC;IACvB,WAAW,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IACzB,WAAW,EAAE,OAAO,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,EAAE,OAAO,CAAC;IACrB,UAAU,EAAE,OAAO,CAAC;IACpB,SAAS,EAAE,OAAO,CAAC;IACnB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,cAAc,EAAE;QAAE,OAAO,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAC;IAC1D,OAAO,EAAE,OAAO,CAAC;IACjB,WAAW,EAAE,OAAO,CAAC;IACrB,YAAY,EAAE,OAAO,CAAC;IACtB,WAAW,EAAE,CAAC,IAAI,EAAE,YAAY,KAAK,MAAM,GAAG,SAAS,CAAC;IACxD,YAAY,EAAE,MAAM,CAAC;IACrB,OAAO,EAAE,OAAO,CAAC;IACjB,aAAa,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC;IAC7C,cAAc,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC;IAC9C,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,KAAK,MAAM,CAAC;CACtE;AAoOD,QAAA,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAwUnD,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"PhotoPickerSection.d.ts","sourceRoot":"","sources":["../../../../../../src/ui/screens/fileManagement/PhotoPickerSection.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4D,MAAM,OAAO,CAAC;AAejF,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AA6FhD;;;;GAIG;AACH,MAAM,WAAW,oBAAoB;IACjC,MAAM,EAAE,YAAY,EAAE,CAAC;IACvB,WAAW,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IACzB,WAAW,EAAE,OAAO,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,EAAE,OAAO,CAAC;IACrB,UAAU,EAAE,OAAO,CAAC;IACpB,SAAS,EAAE,OAAO,CAAC;IACnB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,cAAc,EAAE;QAAE,OAAO,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAC;IAC1D,OAAO,EAAE,OAAO,CAAC;IACjB,WAAW,EAAE,OAAO,CAAC;IACrB,YAAY,EAAE,OAAO,CAAC;IACtB,WAAW,EAAE,CAAC,IAAI,EAAE,YAAY,KAAK,MAAM,GAAG,SAAS,CAAC;IACxD,YAAY,EAAE,MAAM,CAAC;IACrB,OAAO,EAAE,OAAO,CAAC;IACjB,aAAa,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC;IAC7C,cAAc,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC;IAC9C,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,KAAK,MAAM,CAAC;CACtE;AAyQD,QAAA,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAwUnD,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oxyhq/services",
-  "version": "22.8.0",
+  "version": "22.8.2",
   "description": "OxyHQ Expo/React Native SDK — UI components, screens, and native features",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
@@ -136,7 +136,7 @@
     "@commitlint/cli": "^17.6.5",
     "@commitlint/config-conventional": "^17.6.5",
     "@expo/vector-icons": "^15.0.3",
-    "@oxyhq/core": "12.9.0",
+    "@oxyhq/core": "12.9.1",
     "@react-native-async-storage/async-storage": "^2.0.0",
     "@react-native-community/netinfo": "^11.4.1",
     "@react-native/babel-preset": "^0.86.0",

package/src/ui/hooks/queries/__tests__/userCache.test.ts

@@ -14,6 +14,7 @@
 
 import { QueryClient } from '@tanstack/react-query';
 import { upsertCachedUser, upsertCachedUsers } from '../userCache';
+import { patchCachedUserRelationship } from '../userCacheRelationship';
 import type { CacheableUser } from '../userCache';
 import { queryKeys } from '../queryKeys';
 import { useAuthStore } from '../../../stores/authStore';
@@ -359,3 +360,25 @@ describe('upsertCachedUsers — batch', () => {
     expect(qc.getQueryCache().getAll()).toHaveLength(0);
   });
 });
+
+describe('patchCachedUserRelationship', () => {
+  it('updates relationship.isFollowing on the viewer-scoped by-username entry', () => {
+    const qc = makeClient();
+    upsertCachedUser(
+      qc,
+      {
+        id: 'u1',
+        username: 'alice',
+        relationship: { isFollowing: false, followsYou: true },
+      },
+      'viewer-1',
+    );
+
+    patchCachedUserRelationship(qc, 'u1', true, 'viewer-1');
+
+    expect(readByUsername(qc, 'alice', 'viewer-1')?.relationship).toEqual({
+      isFollowing: true,
+      followsYou: true,
+    });
+  });
+});

package/src/ui/hooks/queries/userCacheRelationship.ts

@@ -0,0 +1,28 @@
+import type { QueryClient } from '@tanstack/react-query';
+import { queryKeys } from './queryKeys';
+import type { CacheableUser } from './userCache';
+
+type CachedUser = CacheableUser & { id: string };
+
+/**
+ * Patch `relationship.isFollowing` on every cached single-profile entry for
+ * `targetUserId` (by-id and viewer-scoped by-username keys) after a follow
+ * toggle. Lives outside `userCache.ts` so hooks like `useFollow` can import it
+ * without pulling the auth store (which `userCache` uses for viewer defaults).
+ */
+export function patchCachedUserRelationship(
+  queryClient: QueryClient,
+  targetUserId: string,
+  isFollowing: boolean,
+): void {
+  queryClient.setQueriesData<CachedUser>(
+    { queryKey: queryKeys.users.details() },
+    (existing) => {
+      if (!existing || existing.id !== targetUserId) return existing;
+      return {
+        ...existing,
+        relationship: { ...existing.relationship, isFollowing },
+      };
+    },
+  );
+}

package/src/ui/hooks/useFollow.ts

@@ -1,10 +1,11 @@
 import { useCallback, useMemo, useState } from 'react';
-import { useQuery } from '@tanstack/react-query';
+import { useQuery, useQueryClient } from '@tanstack/react-query';
 import { useFollowStore } from '../stores/followStore';
 import { useOxy } from '../context/OxyContext';
 import type { OxyServices, BulkFollowResult, BulkUnfollowResult } from '@oxyhq/core';
 import { useShallow } from 'zustand/react/shallow';
 import { queryKeys } from './queries/queryKeys';
+import { patchCachedUserRelationship } from './queries/userCacheRelationship';
 
 /**
  * useFollow — Hook for follow state management.
@@ -20,6 +21,7 @@ import { queryKeys } from './queries/queryKeys';
  *    them in selectors would cause unnecessary selector recalculations).
  */
 export const useFollow = (userId?: string | string[]) => {
+  const queryClient = useQueryClient();
   const { oxyServices, canUsePrivateApi } = useOxy();
   const userIds = useMemo(() => (Array.isArray(userId) ? userId : userId ? [userId] : []), [userId]);
   const isSingleUser = typeof userId === 'string';
@@ -100,7 +102,8 @@ export const useFollow = (userId?: string | string[]) => {
     if (!canUsePrivateApi) throw new Error('Authentication is required to follow users');
     const currentlyFollowing = useFollowStore.getState().followingUsers[userId] ?? false;
     await useFollowStore.getState().toggleFollowUser(userId, oxyServices, currentlyFollowing);
-  }, [isSingleUser, userId, canUsePrivateApi, oxyServices]);
+    patchCachedUserRelationship(queryClient, userId, !currentlyFollowing);
+  }, [isSingleUser, userId, canUsePrivateApi, oxyServices, queryClient]);
 
   const setFollowStatus = useCallback((following: boolean) => {
     if (!isSingleUser || !userId) throw new Error('setFollowStatus is only available for single user mode');
@@ -162,7 +165,8 @@ export const useFollow = (userId?: string | string[]) => {
     if (!canUsePrivateApi) throw new Error('Authentication is required to follow users');
     const currentState = useFollowStore.getState().followingUsers[targetUserId] ?? false;
     await useFollowStore.getState().toggleFollowUser(targetUserId, oxyServices, currentState);
-  }, [canUsePrivateApi, oxyServices]);
+    patchCachedUserRelationship(queryClient, targetUserId, !currentState);
+  }, [canUsePrivateApi, oxyServices, queryClient]);
 
   const setFollowStatusForUser = useCallback((targetUserId: string, following: boolean) => {
     useFollowStore.getState().setFollowingStatus(targetUserId, following);

package/src/ui/screens/ProfileScreen.tsx

@@ -138,7 +138,7 @@ const ProfileScreen: React.FC<ProfileScreenProps> = ({ userId, username, theme,
                 setError(errorMessage);
             })
             .finally(() => setIsLoading(false));
-    }, [userId]);
+    }, [userId, currentUser?.id, oxyServices]);
 
     if (isLoading) {
         return (

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

@@ -7,18 +7,11 @@ import {
     RefreshControl,
     FlatList,
     Platform,
+    Animated,
     useWindowDimensions,
     type LayoutChangeEvent,
 } from 'react-native';
 import { Image as ExpoImage } from 'expo-image';
-import Reanimated, {
-    FadeIn,
-    useAnimatedStyle,
-    useSharedValue,
-    withSequence,
-    withSpring,
-    withTiming,
-} from 'react-native-reanimated';
 import { Ionicons, MaterialCommunityIcons } from '@expo/vector-icons';
 import type { FileMetadata } from '@oxyhq/core';
 import { computePhotoGridLayout } from './photoGridLayout';
@@ -144,6 +137,33 @@ export interface PhotoPickerViewProps {
     t: (key: string, vars?: Record<string, string | number>) => string;
 }
 
+/**
+ * Photo-cell animation tuning. The animated 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,
+ * JS-driven on web (`useNativeDriver: false`), so the fade actually plays on
+ * web instead of being skipped.
+ */
+const STAGGER_PER_CELL_MS = 15;
+const MAX_TOTAL_STAGGER_MS = 800;
+const ENTRANCE_DURATION_MS = 200;
+/** Selection-ring pulse: a quick scale bump that springs back to rest. */
+const RING_PULSE_PEAK = 1.05;
+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.
+ */
+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.
@@ -153,7 +173,7 @@ export interface PhotoPickerViewProps {
  */
 /**
  * Shared cell chrome (image, dim, badge). Ring border is injected by the
- * static vs animated wrappers so web never touches Reanimated worklets.
+ * static vs animated wrappers.
  */
 function PhotoPickerCellContent(props: {
     photo: FileMetadata;
@@ -263,82 +283,89 @@ const PhotoPickerCellStatic = React.memo(function PhotoPickerCellStatic(props: P
 const PhotoPickerCellAnimated = React.memo(function PhotoPickerCellAnimated(props: PhotoPickerCellProps) {
     const {
         photo, size, marginRight, marginBottom, isSelected, selectionIndex,
-        dim, primaryColor, thumbUrl, enterIndex, reduceMotion, onPress,
-        onLongPress, a11yLabel,
+        dim, primaryColor, thumbUrl, enterIndex, onPress, onLongPress, a11yLabel,
     } = props;
 
-    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);
 
-    const ringScale = useSharedValue(1);
+    // 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;
+    useEffect(() => {
+        const entrance = Animated.timing(opacity, {
+            toValue: 1,
+            duration: ENTRANCE_DURATION_MS,
+            delay,
+            useNativeDriver: Platform.OS !== 'web',
+        });
+        entrance.start();
+        return () => entrance.stop();
+    }, [opacity, delay]);
+
+    // Ring pulse: a quick scale bump each time a cell transitions INTO the
+    // selected state, springing back to rest.
+    const ringScale = useRef(new Animated.Value(1)).current;
     const prevSelected = useRef(isSelected);
     useEffect(() => {
         if (prevSelected.current === isSelected) return;
         prevSelected.current = isSelected;
         if (!isSelected) {
-            ringScale.value = 1;
+            ringScale.setValue(1);
             return;
         }
-        if (reduceMotion) {
-            ringScale.value = 1;
-            return;
-        }
-        ringScale.value = withSequence(
-            withTiming(1.05, { duration: 110 }),
-            withSpring(1, { damping: 14, stiffness: 200 }),
-        );
-    }, [isSelected, reduceMotion, ringScale]);
-
-    const ringAnimatedStyle = useAnimatedStyle(() => ({
-        transform: [{ scale: ringScale.value }],
-    }));
-
-    const cellWrapperStyle = {
-        width: size,
-        height: size,
-        marginRight,
-        marginBottom,
-    };
-
+        const pulse = Animated.sequence([
+            Animated.timing(ringScale, {
+                toValue: RING_PULSE_PEAK,
+                duration: RING_PULSE_UP_MS,
+                useNativeDriver: Platform.OS !== 'web',
+            }),
+            Animated.spring(ringScale, {
+                toValue: 1,
+                friction: RING_SPRING_FRICTION,
+                tension: RING_SPRING_TENSION,
+                useNativeDriver: Platform.OS !== 'web',
+            }),
+        ]);
+        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 ? (
-        <Reanimated.View
+        <Animated.View
             pointerEvents="none"
-            className="absolute inset-0 rounded-radius-8 border-[3px]"
-            style={[{ borderColor: primaryColor }, ringAnimatedStyle]}
+            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;
 
-    if (reduceMotion) {
-        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>
-        );
-    }
-
     return (
-        <Reanimated.View
-            entering={FadeIn.delay(delay).duration(200)}
-            className="relative"
-            style={cellWrapperStyle}
+        // 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.
+        <Animated.View
+            style={{
+                width: size,
+                height: size,
+                marginRight,
+                marginBottom,
+                position: 'relative',
+                opacity,
+            }}
         >
             <TouchableOpacity
                 activeOpacity={0.85}
@@ -359,12 +386,15 @@ const PhotoPickerCellAnimated = React.memo(function PhotoPickerCellAnimated(prop
                     ring={ring}
                 />
             </TouchableOpacity>
-        </Reanimated.View>
+        </Animated.View>
     );
 });
 
 const PhotoPickerCell = React.memo(function PhotoPickerCell(props: PhotoPickerCellProps) {
-    if (Platform.OS === 'web') {
+    // 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} />;