@oxyhq/services 5.21.5 → 5.21.7

package/src/ui/components/BottomSheetRouter.tsx

@@ -1,12 +1,5 @@
-import React, { useRef, useEffect, useCallback } from 'react';
+import React, { useRef, useEffect, useCallback, useMemo } from 'react';
 import { BackHandler, View, StyleSheet, type StyleProp, type ViewStyle } from 'react-native';
-import Animated, {
-    useSharedValue,
-    useAnimatedStyle,
-    withTiming,
-    runOnJS,
-    type SharedValue,
-} from 'react-native-reanimated';
 import { useStore } from 'zustand';
 import type { RouteName } from '../navigation/routes';
 import { getScreenComponent, isValidRoute } from '../navigation/routes';
@@ -15,15 +8,12 @@ import { useColorScheme } from '../hooks/use-color-scheme';
 import { Colors } from '../constants/theme';
 import BottomSheet, { type BottomSheetRef } from './BottomSheet';
 import {
-    setBottomSheetRef as setManagerRef,
-    updateBottomSheetState,
-    subscribeToBottomSheetState,
-    managerShowBottomSheet,
-    managerCloseBottomSheet,
-    managerGoBack,
-    type BottomSheetRouterState,
-    getBottomSheetState,
     bottomSheetStore,
+    getState,
+    showBottomSheet,
+    closeBottomSheet,
+    goBack,
+    updateState,
 } from '../navigation/bottomSheetManager';
 
 export interface BottomSheetRouterProps {
@@ -31,365 +21,153 @@ export interface BottomSheetRouterProps {
     onDismiss?: () => void;
 }
 
-// Re-export types for backward compatibility
-export type { BottomSheetRouterState };
-export { subscribeToBottomSheetState };
-
-// Re-export BottomSheetRef for backward compatibility
-export type { BottomSheetRef };
-
 /**
- * BottomSheetRouter - Manages navigation within bottom sheet modals
- * 
- * Uses custom BottomSheet component built with react-native-reanimated v4.
- * State is managed by bottomSheetManager (single source of truth).
- * 
- * Features:
- * - Screen navigation with history stack
- * - Step-based navigation for multi-step screens
- * - Android back button handling
- * - Minimal props passing (screens use useOxy() for context)
+ * BottomSheetRouter - Navigation container for bottom sheet screens
  */
-// Animated screen container for smooth transitions
-const AnimatedScreenContainer: React.FC<{
-    children: React.ReactNode;
-    fadeAnim: SharedValue<number>;
-    scaleAnim: SharedValue<number>;
-    screenKey: string;
-}> = ({ children, fadeAnim, scaleAnim, screenKey }) => {
-    const animatedStyle = useAnimatedStyle(() => ({
-        opacity: fadeAnim.value,
-        transform: [
-            { scale: scaleAnim.value }
-        ]
-    }));
-
-    return (
-        <Animated.View
-            key={screenKey}
-            style={[{ flexShrink: 1 }, animatedStyle]}
-        >
-            {children}
-        </Animated.View>
-    );
-};
-
-const BottomSheetRouterComponent: React.FC<BottomSheetRouterProps> = ({ onScreenChange, onDismiss }) => {
-    const bottomSheetRef = useRef<BottomSheetRef>(null);
+const BottomSheetRouter: React.FC<BottomSheetRouterProps> = ({ onScreenChange, onDismiss }) => {
+    const sheetRef = useRef<BottomSheetRef>(null);
     const colorScheme = useColorScheme();
     const colors = Colors[colorScheme ?? 'light'];
+    const prevScreenRef = useRef<RouteName | null>(null);
 
-    // Animation values for screen transitions
-    const fadeAnim = useSharedValue(1);
-    const scaleAnim = useSharedValue(1);
-    const previousScreenRef = useRef<RouteName | null>(null);
-    const isTransitioningRef = useRef(false);
-
-    // Create stable ref object for manager compatibility
-    // Manager expects: { current: { present: () => void; dismiss: () => void } | null } | null
-    const managerRefObject = useRef({
-        current: {
-            present: () => bottomSheetRef.current?.present(),
-            dismiss: () => bottomSheetRef.current?.dismiss(),
-        },
-    });
-
-    // Single source of truth - subscribe to manager state using Zustand
-    const state = useStore(bottomSheetStore);
+    const { currentScreen, screenProps, currentStep, isOpen } = useStore(bottomSheetStore);
 
-    // Animate screen transition when screen changes
-    const animateScreenTransition = useCallback((newScreen: RouteName | null, newState: BottomSheetRouterState) => {
-        // ... implementation uses newState which comes from the store ...
-        // We can just rely on the re-render from useStore, no need to manually set local state
-        // However, the animation logic relied on queueing state updates.
-        // Let's adapt it.
-        onScreenChange?.(newScreen);
-
-        // Note: The original logic tried to defer the state update (setState) until animation completed.
-        // With Zustand, the global state is already updated.
-        // The animation logic needs to react to the state change.
-
-        // Since useStore forces a re-render with the NEW state, we are already "in" the new state.
-        // To animate "out" the old screen, we would need to have captured the previous screen
-        // before the re-render, OR we accept that the transition might be slightly different.
-
-        // Actually, the original logic had `setState` to control when the UI updates.
-        // With global store, the UI updates immediately.
-        // For now, let's trust the re-render. If animation is jerky, we can revisit.
-        // But wait, the original logic:
-        // 1. Check if transitioning. If so, wait.
-        // 2. If valid change, start exit animation -> then update local state -> then enter animation.
-
-        // With Zustand, we can't "delay" the state update because it's global.
-        // So `state` (from useStore) is ALREADY the new state.
-        // We need to detect that `state.currentScreen` changed from our `previousScreenRef`.
-
-    }, [onScreenChange]);
+    const ScreenComponent = useMemo(
+        () => (currentScreen ? getScreenComponent(currentScreen) : null),
+        [currentScreen]
+    );
 
-    // Handle screen transitions based on state changes
+    // Notify screen changes
     useEffect(() => {
-        const newScreen = state.currentScreen;
-        const previousScreen = previousScreenRef.current;
-        const isScreenChange = previousScreen !== null && previousScreen !== newScreen && newScreen !== null;
-
-        if (isScreenChange) {
-            // Logic to handle transition...
-            // Since we are already re-rendered with new state, we might see a flash of new content.
-            // Ideally we shouldn't have updated the global store until animation started...
-            // BUT `bottomSheetManager` updates the store immediately.
+        if (prevScreenRef.current !== currentScreen) {
+            onScreenChange?.(currentScreen);
+            prevScreenRef.current = currentScreen;
+        }
+    }, [currentScreen, onScreenChange]);
 
-            // For this fix, let's keep it simple: Just update the refs. 
-            // The complex animation logic in the original file was trying to bridge imperative calls with React state.
+    // Control visibility
+    useEffect(() => {
+        if (!sheetRef.current) return;
 
-            previousScreenRef.current = newScreen;
-        } else if (previousScreen === null && newScreen !== null) {
-            // Opening first time
-            fadeAnim.value = 1;
-            scaleAnim.value = 1;
-            previousScreenRef.current = newScreen;
-            onScreenChange?.(newScreen);
+        if (isOpen) {
+            sheetRef.current.present();
         } else {
-            previousScreenRef.current = newScreen;
+            sheetRef.current.dismiss();
         }
+    }, [isOpen]);
 
-        setManagerRef(managerRefObject.current);
-    }, [state.currentScreen, onScreenChange, fadeAnim, scaleAnim]);
-
-    // Clean up on unmount
+    // Android back button
     useEffect(() => {
-        return () => {
-            setManagerRef(null);
-        };
-    }, []);
-
-    // Handle explicit dismiss - only update state, don't call dismiss again
-    const handleDismiss = useCallback(() => {
-        // Only update state, don't call dismiss() as it's already being dismissed
-        updateBottomSheetState({
-            currentScreen: null,
-            screenProps: {},
-            currentStep: undefined,
-            navigationHistory: [],
-            isOpen: false,
+        if (!isOpen) return;
+        const handler = BackHandler.addEventListener('hardwareBackPress', () => {
+            handleGoBack();
+            return true;
         });
-        onDismiss?.();
-    }, [onDismiss]);
-
-    // Get current screen component (lazy-loaded)
-    const ScreenComponent = state.currentScreen ? getScreenComponent(state.currentScreen) : null;
+        return () => handler.remove();
+    }, [isOpen]);
 
-    // Navigation handler - validates route and updates manager state
-    // For step-based screens, step changes are treated as navigation events (added to history)
     const navigate = useCallback((screen: RouteName, props?: Record<string, unknown>) => {
         if (!isValidRoute(screen)) {
-            if (__DEV__) {
-                console.warn(`[BottomSheetRouter] Invalid route: ${screen}`);
-            }
+            if (__DEV__) console.warn(`[BottomSheetRouter] Invalid route: ${screen}`);
             return;
         }
-
-        const isSameScreen = screen === state.currentScreen;
-        const newStep = typeof props?.initialStep === 'number' ? props.initialStep : undefined;
-        const currentStep = state.currentStep ?? (typeof state.screenProps?.initialStep === 'number' ? state.screenProps.initialStep : undefined);
-
-        // For step-based screens: if same screen but different step, treat as navigation (add to history)
-        // This allows step navigation to be handled by router with animations
-        const isStepChange = isSameScreen && newStep !== undefined && newStep !== currentStep;
-
-        managerShowBottomSheet(screen, props, {
-            addToHistory: !isSameScreen || isStepChange, // Add to history if different screen OR step change
-        });
-    }, [state.currentScreen, state.currentStep, state.screenProps]);
-
-    // Step change handler for step-based screens
-    // This is called by StepBasedScreen to notify router of step changes
-    // The router now handles step navigation through navigate/goBack, so this is mainly for compatibility
-    const handleStepChange = useCallback((step: number, _totalSteps?: number) => {
-        // Step changes are now handled through navigate/goBack, but we still update currentStep
-        // for screens that might query it directly
-        if (state.currentScreen) {
-            updateBottomSheetState({
-                currentStep: step,
-                screenProps: {
-                    ...state.screenProps,
-                    initialStep: step,
-                }
-            });
-        }
-    }, [state.currentScreen, state.screenProps]);
-
-    // Check if the bottom sheet can be dismissed (no navigation history or steps to go back to)
-    const canDismiss = useCallback((): boolean => {
-        // Use global state to avoid stale closures during transitions
-        const currentState = getBottomSheetState();
-
-        // Check if there's navigation history
-        if (currentState.navigationHistory.length > 0) {
-            return false;
-        }
-
-        // Check if there are steps to go back to
-        const initialStep = typeof currentState.screenProps?.initialStep === 'number'
-            ? currentState.screenProps.initialStep
-            : undefined;
-        const currentStep = currentState.currentStep ?? initialStep ?? 0;
-        const isStepBased = initialStep !== undefined || currentState.currentStep !== undefined;
-
-        if (isStepBased && typeof currentStep === 'number' && currentStep > 0) {
-            return false;
-        }
-
-        // No history and on step 0 (or not step-based) - can dismiss
-        return true;
+        showBottomSheet({ screen, props });
     }, []);
 
-    // Go back handler with priority:
-    // 1. Screen history (navigate to previous screen)
-    // 2. Step navigation (navigate to previous step)
-    // 3. Close sheet (no history/step available)
-    const goBack = useCallback(() => {
-        // Use global state to avoid stale closures during transitions
-        const currentState = getBottomSheetState();
+    const handleGoBack = useCallback(() => {
+        const state = getState();
 
-        // Priority 1: Screen history
-        if (currentState.navigationHistory.length > 0) {
-            const wentBack = managerGoBack();
-            if (wentBack) {
-                return true;
-            }
+        // Try history first
+        if (state.history.length > 0) {
+            goBack();
+            return true;
         }
 
-        // Priority 2: Step navigation
-        const initialStep = typeof currentState.screenProps?.initialStep === 'number'
-            ? currentState.screenProps.initialStep
-            : undefined;
-        const currentStep = currentState.currentStep ?? initialStep ?? 0;
-        const isStepBased = initialStep !== undefined || currentState.currentStep !== undefined;
-
-        if (isStepBased && typeof currentStep === 'number' && currentStep > 0) {
-            const previousStep = currentStep - 1;
-            updateBottomSheetState({
-                screenProps: {
-                    ...currentState.screenProps,
-                    initialStep: previousStep,
-                },
-                currentStep: previousStep,
+        // Try step back
+        const step = state.currentStep ?? 0;
+        if (step > 0) {
+            updateState({
+                currentStep: step - 1,
+                screenProps: { ...state.screenProps, initialStep: step - 1 },
             });
             return true;
         }
 
-        // Priority 3: Close sheet
-        managerCloseBottomSheet();
+        // Close
+        closeBottomSheet();
         return true;
     }, []);
 
-    // Android hardware back button handler
-    useEffect(() => {
-        if (!state.isOpen) {
-            return;
-        }
-
-        const backHandler = BackHandler.addEventListener('hardwareBackPress', () => {
-            return goBack();
-        });
-
-        return () => {
-            backHandler.remove();
-        };
-    }, [state.isOpen, goBack]);
+    const canDismiss = useCallback((): boolean => {
+        const state = getState();
+        if (state.history.length > 0) return false;
+        const step = state.currentStep ?? 0;
+        return step <= 0;
+    }, []);
 
-    // Present modal when state changes to open
-    // This must be before any early returns to follow rules of hooks
-    useEffect(() => {
-        if (state.isOpen && bottomSheetRef.current) {
-            bottomSheetRef.current.present();
+    const handleDismissAttempt = useCallback((): boolean => {
+        if (!canDismiss()) {
+            handleGoBack();
+            return false;
         }
-    }, [state.isOpen]);
-
+        return true;
+    }, [canDismiss, handleGoBack]);
 
-    // Minimal screen props - only navigation-specific
-    // Screens should use useOxy() hook for OxyContext values (user, sessions, etc.)
-    // Calculate initialStep first, ensuring it's always a number or undefined
-    const calculatedInitialStep = typeof state.currentStep === 'number'
-        ? state.currentStep
-        : (typeof state.screenProps?.initialStep === 'number'
-            ? state.screenProps.initialStep
-            : undefined);
+    const handleDismiss = useCallback(() => {
+        closeBottomSheet();
+        onDismiss?.();
+    }, [onDismiss]);
 
-    // Extract screenProps without initialStep to avoid conflicts
-    const { initialStep: _, ...otherScreenProps } = state.screenProps;
+    const handleStepChange = useCallback((step: number) => {
+        const state = getState();
+        updateState({
+            currentStep: step,
+            screenProps: { ...state.screenProps, initialStep: step },
+        });
+    }, []);
 
     const scrollTo = useCallback((y: number, animated?: boolean) => {
-        bottomSheetRef.current?.scrollTo(y, animated);
+        sheetRef.current?.scrollTo(y, animated);
     }, []);
 
-    const screenProps: BaseScreenProps & { scrollTo: (y: number, animated?: boolean) => void } = {
-        navigate,
-        goBack,
-        onClose: () => managerCloseBottomSheet(),
-        onAuthenticated: () => managerCloseBottomSheet(),
-        theme: colorScheme ?? 'light',
-        currentScreen: state.currentScreen ?? undefined,
-        initialStep: calculatedInitialStep,
-        onStepChange: handleStepChange,
-        scrollTo, // Pass scrollTo method
-        ...otherScreenProps,
-    };
-
-    // renderBackground must be called before any conditional returns (React hooks rule)
     const renderBackground = useCallback(
         (props: { style?: StyleProp<ViewStyle> }) => (
-            <View
-                style={[
-                    styles.background,
-                    { backgroundColor: colors.background },
-                    props.style,
-                ]}
-            />
+            <View style={[styles.background, { backgroundColor: colors.background }, props.style]} />
         ),
-        [colors.background],
+        [colors.background]
     );
 
-    // Handle dismissal attempt - check if we can dismiss or need to go back
-    const handleDismissAttempt = useCallback((): boolean => {
-        if (!canDismiss()) {
-            // There's navigation history or steps to go back to - navigate back instead
-            goBack();
-            return false; // Prevent dismissal
-        }
-        // No history or steps - allow dismissal
-        return true;
-    }, [canDismiss, goBack]);
-
-    // Don't render if no screen is set
-    if (!ScreenComponent || !state.currentScreen) {
-        return null;
-    }
+    const screenPropsValue = useMemo((): BaseScreenProps & { scrollTo: typeof scrollTo } => {
+        const { initialStep: _, ...rest } = screenProps;
+        return {
+            navigate,
+            goBack: handleGoBack,
+            onClose: closeBottomSheet,
+            onAuthenticated: closeBottomSheet,
+            theme: colorScheme ?? 'light',
+            currentScreen: currentScreen ?? undefined,
+            initialStep: currentStep ?? (screenProps?.initialStep as number | undefined),
+            onStepChange: handleStepChange,
+            scrollTo,
+            ...rest,
+        };
+    }, [navigate, handleGoBack, colorScheme, currentScreen, currentStep, screenProps, handleStepChange, scrollTo]);
 
     return (
         <BottomSheet
-            ref={bottomSheetRef}
-            enablePanDownToClose={true}
+            ref={sheetRef}
+            enablePanDownToClose
+            enableHandlePanningGesture
             backgroundComponent={renderBackground}
-            enableHandlePanningGesture={true}
             style={styles.container}
             onDismiss={handleDismiss}
             onDismissAttempt={handleDismissAttempt}
         >
-            <AnimatedScreenContainer
-                fadeAnim={fadeAnim}
-                scaleAnim={scaleAnim}
-                screenKey={state.currentScreen}
-            >
-                <ScreenComponent {...screenProps} />
-            </AnimatedScreenContainer>
+            {ScreenComponent && currentScreen && <ScreenComponent {...screenPropsValue} />}
         </BottomSheet>
     );
 };
 
-const BottomSheetRouter = React.memo(BottomSheetRouterComponent);
-BottomSheetRouter.displayName = 'BottomSheetRouter';
-
 const styles = StyleSheet.create({
     container: {
         maxWidth: 800,
@@ -404,4 +182,4 @@ const styles = StyleSheet.create({
     },
 });
 
-export default BottomSheetRouter;
+export default React.memo(BottomSheetRouter);

package/src/ui/components/GroupedItem.tsx

@@ -4,7 +4,6 @@ import { Ionicons } from '@expo/vector-icons';
 // @ts-ignore - MaterialCommunityIcons is available at runtime
 import { MaterialCommunityIcons } from '@expo/vector-icons';
 import { useColorScheme } from '../hooks/use-color-scheme';
-import { useHapticPress } from '../hooks/use-haptic-press';
 import { darkenColor } from '../utils/colorUtils';
 import { normalizeColorScheme } from '../utils/themeUtils';
 import { Colors } from '../constants/theme';
@@ -87,13 +86,10 @@ const GroupedItemComponent = ({
         </View>
     );
 
-    const handlePressIn = useHapticPress();
-
     if (onPress && !disabled) {
         return (
             <TouchableOpacity
                 style={itemStyles}
-                onPressIn={disabled ? undefined : handlePressIn}
                 onPress={onPress}
                 activeOpacity={0.7}
                 accessibilityRole="button"

package/src/ui/components/OxyProvider.tsx

@@ -16,20 +16,26 @@ setupFonts();
 // Detect if running on web
 const isWeb = Platform.OS === 'web';
 
-// Conditionally import native-only components
+// Conditionally import components
 let KeyboardProvider: any = ({ children }: any) => children;
-let BottomSheetRouter: any = () => null;
+let BottomSheetRouter: any = null;
 
+// KeyboardProvider only on native
 if (!isWeb) {
     try {
-        // Only import on native platforms
         KeyboardProvider = require('react-native-keyboard-controller').KeyboardProvider;
-        BottomSheetRouter = require('./BottomSheetRouter').default;
     } catch {
-        // Fallback if imports fail
+        // KeyboardProvider not available
     }
 }
 
+// BottomSheetRouter works on all platforms
+try {
+    BottomSheetRouter = require('./BottomSheetRouter').default;
+} catch {
+    // BottomSheetRouter not available
+}
+
 /**
  * OxyProvider - Universal provider for Expo apps (native + web)
  *
@@ -199,24 +205,13 @@ const OxyProvider: FC<OxyProviderProps> = ({
             >
                 {children}
                 {/* Only render bottom sheet router on native */}
-                {!isWeb && <BottomSheetRouter />}
+                {BottomSheetRouter && <BottomSheetRouter />}
                 <Toaster />
             </OxyContextProvider>
         </QueryClientProvider>
     );
 
-    // On web, minimal wrappers (GestureHandler and SafeArea work via react-native-web)
-    if (isWeb) {
-        return (
-            <SafeAreaProvider>
-                <GestureHandlerRootView style={{ flex: 1 }}>
-                    {coreContent}
-                </GestureHandlerRootView>
-            </SafeAreaProvider>
-        );
-    }
-
-    // On native, full wrappers including KeyboardProvider
+    // All platforms use same wrapper (KeyboardProvider is passthrough on web)
     return (
         <SafeAreaProvider>
             <GestureHandlerRootView style={{ flex: 1 }}>

package/src/ui/components/fileManagement/AnimatedButton.tsx

@@ -0,0 +1,56 @@
+import React, { useEffect, useRef } from 'react';
+import { TouchableOpacity, Animated, Easing } from 'react-native';
+// @ts-ignore - MaterialCommunityIcons is available at runtime
+import { MaterialCommunityIcons } from '@expo/vector-icons';
+
+interface AnimatedButtonProps {
+  isSelected: boolean;
+  onPress: () => void;
+  icon: string;
+  primaryColor: string;
+  textColor: string;
+  style: any;
+}
+
+/**
+ * Animated button component for smooth selection transitions
+ * Used in file management views for view mode toggles
+ */
+export const AnimatedButton: React.FC<AnimatedButtonProps> = ({
+  isSelected,
+  onPress,
+  icon,
+  primaryColor,
+  textColor,
+  style,
+}) => {
+  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}>
+      <Animated.View style={[style, { backgroundColor }]}>
+        <Animated.View>
+          <MaterialCommunityIcons
+            name={icon as any}
+            size={16}
+            color={isSelected ? '#FFFFFF' : textColor}
+          />
+        </Animated.View>
+      </Animated.View>
+    </TouchableOpacity>
+  );
+};