@oxyhq/services 5.11.9 → 5.11.10

package/src/ui/components/Header.tsx

@@ -22,7 +22,16 @@ export interface HeaderProps {
         loading?: boolean;
         disabled?: boolean;
         text?: string;
+        key?: string;
     };
+    rightActions?: Array<{
+        icon?: string;
+        onPress: () => void;
+        loading?: boolean;
+        disabled?: boolean;
+        text?: string;
+        key?: string; // optional identifier
+    }>;
     theme: 'light' | 'dark';
     showBackButton?: boolean;
     showCloseButton?: boolean;
@@ -38,6 +47,7 @@ const Header: React.FC<HeaderProps> = ({
     onBack,
     onClose,
     rightAction,
+    rightActions,
     theme,
     showBackButton = true,
     showCloseButton = false,
@@ -100,26 +110,24 @@ const Header: React.FC<HeaderProps> = ({
         );
     };
 
-    const renderRightAction = () => {
-        if (!rightAction) return null;
-
-        const isTextAction = rightAction.text;
-
+    const renderRightActionButton = (action: NonNullable<HeaderProps['rightAction']>, idx: number) => {
+        const isTextAction = action.text;
         return (
             <TouchableOpacity
+                key={action.key || idx}
                 style={[
                     styles.rightActionButton,
                     isTextAction ? styles.textActionButton : styles.iconActionButton,
                     {
                         backgroundColor: isTextAction ? colors.primary : colors.surface,
-                        opacity: rightAction.disabled ? 0.5 : 1
+                        opacity: action.disabled ? 0.5 : 1
                     }
                 ]}
-                onPress={rightAction.onPress}
-                disabled={rightAction.disabled || rightAction.loading}
+                onPress={action.onPress}
+                disabled={action.disabled || action.loading}
                 activeOpacity={0.7}
             >
-                {rightAction.loading ? (
+                {action.loading ? (
                     <View style={styles.loadingContainer}>
                         <View style={[styles.loadingDot, { backgroundColor: isTextAction ? '#FFFFFF' : colors.primary }]} />
                         <View style={[styles.loadingDot, { backgroundColor: isTextAction ? '#FFFFFF' : colors.primary }]} />
@@ -127,15 +135,27 @@ const Header: React.FC<HeaderProps> = ({
                     </View>
                 ) : isTextAction ? (
                     <Text style={[styles.actionText, { color: '#FFFFFF' }]}>
-                        {rightAction.text}
+                        {action.text}
                     </Text>
                 ) : (
-                    <Ionicons name={rightAction.icon as any} size={18} color={colors.primary} />
+                    <Ionicons name={action.icon as any} size={18} color={colors.primary} />
                 )}
             </TouchableOpacity>
         );
     };
 
+    const renderRightActions = () => {
+        if (rightActions && rightActions.length) {
+            return (
+                <View style={styles.rightActionsRow}>
+                    {rightActions.map((a, i) => renderRightActionButton(a, i))}
+                </View>
+            );
+        }
+        if (rightAction) return renderRightActionButton(rightAction, 0);
+        return null;
+    };
+
     const renderTitle = () => {
         const titleStyle = variant === 'large' ? styles.titleLarge :
             variant === 'minimal' ? styles.titleMinimal :
@@ -245,7 +265,7 @@ const Header: React.FC<HeaderProps> = ({
             ]}>
                 {renderBackButton()}
                 {renderTitle()}
-                {renderRightAction()}
+                {renderRightActions()}
                 {renderCloseButton()}
             </View>
         </View>
@@ -400,6 +420,10 @@ const styles = StyleSheet.create({
         borderRadius: 2,
         opacity: 0.6,
     },
+    rightActionsRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
 });
 
 export default Header; 

package/src/ui/components/OxyProvider.tsx

@@ -1,6 +1,6 @@
 import type React from 'react';
 import { useCallback, useRef, useState, useEffect, useMemo } from 'react';
-import { View, Text, StyleSheet, Dimensions, Platform, Animated, StatusBar, Keyboard, KeyboardEvent } from 'react-native';
+import { View, Text, StyleSheet, Dimensions, Platform, Animated, StatusBar, Keyboard, KeyboardEvent, AppState } from 'react-native';
 import { SafeAreaProvider, useSafeAreaInsets } from 'react-native-safe-area-context';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
 import type { OxyProviderProps } from '../navigation/types';
@@ -8,6 +8,7 @@ import { OxyContextProvider, useOxy } from '../context/OxyContext';
 import OxyRouter from '../navigation/OxyRouter';
 import { FontLoader, setupFonts } from './FontLoader';
 import { Toaster } from '../../lib/sonner';
+import { QueryClient, QueryClientProvider, focusManager } from '@tanstack/react-query';
 
 // Import bottom sheet components directly - no longer a peer dependency
 import { BottomSheetModal, BottomSheetBackdrop, type BottomSheetBackdropProps, BottomSheetModalProvider, BottomSheetView, BottomSheetScrollView } from '@gorhom/bottom-sheet';
@@ -38,47 +39,80 @@ const OxyProvider: React.FC<OxyProviderProps> = (props) => {
     // Create internal bottom sheet ref
     const internalBottomSheetRef = useRef<BottomSheetModalRef>(null);
 
+    // Initialize React Query Client (use provided client or create a default one once)
+    const queryClientRef = useRef<QueryClient | null>(null);
+    if (!queryClientRef.current) {
+        queryClientRef.current = props.queryClient ?? new QueryClient({
+            defaultOptions: {
+                queries: {
+                    staleTime: 30_000,
+                    gcTime: 5 * 60_000,
+                    retry: 2,
+                    refetchOnReconnect: true,
+                    refetchOnWindowFocus: false,
+                },
+                mutations: {
+                    retry: 1,
+                },
+            },
+        });
+    }
+
+    // Hook React Query focus manager into React Native AppState
+    useEffect(() => {
+        const subscription = AppState.addEventListener('change', (state) => {
+            focusManager.setFocused(state === 'active');
+        });
+        return () => {
+            subscription.remove();
+        };
+    }, []);
+
     // If contextOnly is true, we just provide the context without the bottom sheet UI
     if (contextOnly) {
         return (
+            <QueryClientProvider client={queryClientRef.current}>
+                <OxyContextProvider
+                    oxyServices={oxyServices}
+                    baseURL={baseURL}
+                    storageKeyPrefix={storageKeyPrefix}
+                    onAuthStateChange={onAuthStateChange}
+                >
+                    {children}
+                </OxyContextProvider>
+            </QueryClientProvider>
+        );
+    }
+
+    // Otherwise, provide both the context and the bottom sheet UI
+    return (
+        <QueryClientProvider client={queryClientRef.current}>
             <OxyContextProvider
                 oxyServices={oxyServices}
                 baseURL={baseURL}
                 storageKeyPrefix={storageKeyPrefix}
                 onAuthStateChange={onAuthStateChange}
+                bottomSheetRef={internalBottomSheetRef}
             >
-                {children}
+                <FontLoader>
+                    <GestureHandlerRootView style={styles.gestureHandlerRoot}>
+                        <BottomSheetModalProvider>
+                            <StatusBar translucent backgroundColor="transparent" />
+                            <SafeAreaProvider>
+                                <OxyBottomSheet {...bottomSheetProps} bottomSheetRef={internalBottomSheetRef} oxyServices={oxyServices} />
+                                {children}
+                            </SafeAreaProvider>
+                        </BottomSheetModalProvider>
+                        {/* Global Toaster for app-wide notifications outside of Modal contexts - only show if internal toaster is disabled */}
+                        {!showInternalToaster && (
+                            <View style={styles.toasterContainer}>
+                                <Toaster position="top-center" swipeToDismissDirection="left" offset={15} />
+                            </View>
+                        )}
+                    </GestureHandlerRootView>
+                </FontLoader>
             </OxyContextProvider>
-        );
-    }
-
-    // Otherwise, provide both the context and the bottom sheet UI
-    return (
-        <OxyContextProvider
-            oxyServices={oxyServices}
-            baseURL={baseURL}
-            storageKeyPrefix={storageKeyPrefix}
-            onAuthStateChange={onAuthStateChange}
-            bottomSheetRef={internalBottomSheetRef}
-        >
-            <FontLoader>
-                <GestureHandlerRootView style={styles.gestureHandlerRoot}>
-                    <BottomSheetModalProvider>
-                        <StatusBar translucent backgroundColor="transparent" />
-                        <SafeAreaProvider>
-                            <OxyBottomSheet {...bottomSheetProps} bottomSheetRef={internalBottomSheetRef} oxyServices={oxyServices} />
-                            {children}
-                        </SafeAreaProvider>
-                    </BottomSheetModalProvider>
-                    {/* Global Toaster for app-wide notifications outside of Modal contexts - only show if internal toaster is disabled */}
-                    {!showInternalToaster && (
-                        <View style={styles.toasterContainer}>
-                            <Toaster position="top-center" swipeToDismissDirection="left" offset={15} />
-                        </View>
-                    )}
-                </GestureHandlerRootView>
-            </FontLoader>
-        </OxyContextProvider>
+        </QueryClientProvider>
     );
 };
 

package/src/ui/components/ProfileCard.tsx

@@ -2,18 +2,15 @@ import type React from 'react';
 import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
 import { Ionicons } from '@expo/vector-icons';
 import Avatar from './Avatar';
+import { useOxy } from '../context/OxyContext';
 import { fontFamilies } from '../styles/fonts';
 
 interface ProfileCardProps {
     user: {
         username: string;
         email?: string;
-        name?: {
-            full?: string;
-        };
-        avatar?: {
-            url?: string;
-        };
+        name?: { full?: string };
+        avatar?: string; // file id
     };
     theme: 'light' | 'dark';
     onEditPress?: () => void;
@@ -29,6 +26,7 @@ const ProfileCard: React.FC<ProfileCardProps> = ({
     showCloseButton = false,
 }) => {
     const isDarkTheme = theme === 'dark';
+    const { oxyServices } = useOxy();
     const textColor = isDarkTheme ? '#FFFFFF' : '#000000';
     const secondaryBackgroundColor = isDarkTheme ? '#222222' : '#FFFFFF';
     const primaryColor = '#0066CC';
@@ -43,7 +41,7 @@ const ProfileCard: React.FC<ProfileCardProps> = ({
             ]}>
                 <View style={styles.userProfile}>
                     <Avatar
-                        uri={user?.avatar?.url}
+                        uri={user?.avatar ? oxyServices.getFileDownloadUrl(user.avatar as string, 'thumb') : undefined}
                         name={user?.name?.full || user?.username}
                         size={60}
                         theme={theme}
@@ -56,7 +54,7 @@ const ProfileCard: React.FC<ProfileCardProps> = ({
                             </Text>
                         )}
                         {onEditPress && (
-                            <TouchableOpacity 
+                            <TouchableOpacity
                                 style={styles.editProfileButton}
                                 onPress={onEditPress}
                             >

package/src/ui/components/index.ts

@@ -12,6 +12,5 @@ export { default as Avatar } from './Avatar';
 export { default as FollowButton } from './FollowButton';
 export { FontLoader, setupFonts } from './FontLoader';
 export { default as OxyLogo } from './OxyLogo';
-export { default as OxyProvider } from './OxyProvider';
 export { default as OxySignInButton } from './OxySignInButton';
 export { default as OxyPayButton } from './OxyPayButton';

package/src/ui/components/internal/TextField.tsx

@@ -16,6 +16,8 @@ import {
     type NativeSyntheticEvent,
     type TargetedEvent,
     type TextInputFocusEventData,
+    type FocusEvent,
+    type BlurEvent,
 } from 'react-native';
 import { Ionicons } from '@expo/vector-icons';
 import Svg, { Path } from 'react-native-svg';
@@ -304,16 +306,20 @@ const TextField = forwardRef<TextInput, TextFieldProps>(({
     }, [formatValue, inputMask, customMask]);
 
     // Handle focus
-    const handleFocus = useCallback((event: NativeSyntheticEvent<TextInputFocusEventData>) => {
+    const handleFocus = useCallback((event: FocusEvent) => {
         if (disabled) return;
         setFocused(true);
-        onFocus?.(event);
+        // Convert FocusEvent to the expected type for parent callback
+        const syntheticEvent = event as any;
+        onFocus?.(syntheticEvent);
     }, [disabled, onFocus]);
 
     // Handle blur
-    const handleBlur = useCallback((event: NativeSyntheticEvent<TextInputFocusEventData>) => {
+    const handleBlur = useCallback((event: BlurEvent) => {
         setFocused(false);
-        onBlur?.(event);
+        // Convert BlurEvent to the expected type for parent callback
+        const syntheticEvent = event as any;
+        onBlur?.(syntheticEvent);
     }, [onBlur]);
 
     // Handle mouse events
@@ -421,7 +427,7 @@ const TextField = forwardRef<TextInput, TextFieldProps>(({
                 position: 'relative',
                 ...Platform.select({
                     web: {
-                        outlineStyle: 'none',
+                        outlineStyle: undefined,
                         outlineWidth: 0,
                         outlineOffset: 0,
                     },
@@ -441,7 +447,7 @@ const TextField = forwardRef<TextInput, TextFieldProps>(({
                 ...Platform.select({
                     web: {
                         border: 'none',
-                        outlineStyle: 'none',
+                        outlineStyle: undefined,
                         outlineWidth: 0,
                         outlineOffset: 0,
                         boxShadow: 'none',

package/src/ui/components/photogrid/JustifiedPhotoGrid.tsx

@@ -0,0 +1,158 @@
+import React, { useEffect, useMemo, useState, useCallback } from 'react';
+import { View, Text, LayoutChangeEvent } from 'react-native';
+import type { FileMetadata } from '../../../models/interfaces';
+// Using plain React Native styles (nativewind not installed in this repo)
+
+export interface JustifiedPhotoGridProps {
+    photos: FileMetadata[];
+    photoDimensions: { [key: string]: { width: number; height: number } };
+    loadPhotoDimensions: (photos: FileMetadata[]) => Promise<void>;
+    createJustifiedRows: (photos: FileMetadata[], containerWidth: number) => FileMetadata[][];
+    renderJustifiedPhotoItem: (photo: FileMetadata, width: number, height: number, isLast: boolean) => React.ReactElement;
+    renderSimplePhotoItem: (photo: FileMetadata, index: number) => React.ReactElement;
+    textColor: string;
+    /**
+     * Full available width from parent. If omitted, component will measure itself and adapt responsively.
+     */
+    containerWidth?: number; // optional; will auto-measure if not provided
+    gap?: number;
+    minRowHeight?: number;
+    maxRowHeight?: number;
+    dateFormatLocale?: string;
+}
+
+/**
+ * Responsive justified photo grid that stretches to the provided containerWidth.
+ * Uses flex rows with proportional children widths instead of absolute pixel widths so it always fills.
+ */
+const JustifiedPhotoGrid: React.FC<JustifiedPhotoGridProps> = ({
+    photos,
+    photoDimensions,
+    loadPhotoDimensions,
+    createJustifiedRows,
+    renderJustifiedPhotoItem,
+    textColor,
+    containerWidth: explicitWidth,
+    gap = 4,
+    minRowHeight = 100,
+    maxRowHeight = 300,
+    dateFormatLocale = 'en-US',
+}) => {
+    // Responsive width measurement if not explicitly provided
+    const [measuredWidth, setMeasuredWidth] = useState<number | null>(null);
+    const effectiveWidth = explicitWidth ?? measuredWidth ?? 0; // 0 until measured
+
+    const onLayoutContainer = useCallback((e: LayoutChangeEvent) => {
+        if (explicitWidth) return; // ignore if controlled
+        const w = e.nativeEvent.layout.width;
+        setMeasuredWidth(prev => (prev === w ? prev : w));
+    }, [explicitWidth]);
+    // Ensure dimensions are loaded for displayed photos
+    useEffect(() => {
+        loadPhotoDimensions(photos);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [photos.map(p => p.id).join(',')]);
+
+    // Group photos by date first
+    const photosByDate = useMemo(() => {
+        return photos.reduce((groups: { [key: string]: FileMetadata[] }, photo) => {
+            const date = new Date(photo.uploadDate).toDateString();
+            if (!groups[date]) groups[date] = [];
+            groups[date].push(photo);
+            return groups;
+        }, {} as { [key: string]: FileMetadata[] });
+    }, [photos]);
+
+    const sortedDates = useMemo(() => Object.keys(photosByDate).sort((a, b) => new Date(b).getTime() - new Date(a).getTime()), [photosByDate]);
+
+    // Track measured width of each date section (may differ if parent applies horizontal padding/margins)
+    const [dateWidths, setDateWidths] = useState<Record<string, number>>({});
+    const onLayoutDate = useCallback((date: string, width: number) => {
+        setDateWidths(prev => (prev[date] === width ? prev : { ...prev, [date]: width }));
+    }, []);
+
+    return (
+        <View style={{ width: '100%' }} onLayout={onLayoutContainer}>
+            {/* If width not yet known (uncontrolled), avoid rendering to prevent layout jump */}
+            {effectiveWidth === 0 && !explicitWidth ? null : (
+                <>
+                    {sortedDates.map((date: string) => {
+                        const dayPhotos = photosByDate[date];
+                        // createJustifiedRows should build rows such that the "ideal" height (availableWidth / totalAspect) stays within min/max.
+                        // We pass the effective container width.
+                        const dateWidth = dateWidths[date] ?? effectiveWidth; // fallback to overall width until measured
+                        const rows = dateWidth > 0 ? createJustifiedRows(dayPhotos, dateWidth) : [];
+                        return (
+                            <View
+                                key={date}
+                                style={{ marginBottom: 24, width: '100%' }}
+                                onLayout={e => onLayoutDate(date, e.nativeEvent.layout.width)}
+                            >
+                                <Text style={{ fontSize: 14, fontWeight: '600', marginBottom: 12, color: textColor }}>
+                                    {new Date(date).toLocaleDateString(dateFormatLocale, { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' })}
+                                </Text>
+                                <View style={{ width: '100%' }}>
+                                    {rows.map((row, rowIndex) => {
+                                        // Compute total aspect ratios using loaded dimensions (fallback 4/3)
+                                        const aspects = row.map(p => {
+                                            const dims = photoDimensions[p.id];
+                                            return dims ? dims.width / dims.height : 4 / 3;
+                                        });
+                                        const totalAspect = aspects.reduce((a, b) => a + b, 0);
+                                        const gapsTotal = gap * (row.length - 1);
+                                        const availableWidth = dateWidth - gapsTotal;
+                                        // Ideal height that perfectly fills width when preserving aspect ratios
+                                        const idealHeight = availableWidth / totalAspect;
+                                        // We rely on row construction keeping idealHeight within min/max bounds; if not, clamp but then distribute leftover/overflow.
+                                        let rowHeight = idealHeight;
+                                        let widthAdjustment = 0; // difference to distribute if clamped
+                                        if (idealHeight < minRowHeight) {
+                                            rowHeight = minRowHeight;
+                                            widthAdjustment = availableWidth - rowHeight * totalAspect; // negative means overflow
+                                        } else if (idealHeight > maxRowHeight) {
+                                            rowHeight = maxRowHeight;
+                                            widthAdjustment = availableWidth - rowHeight * totalAspect;
+                                        }
+
+                                        // Pre-compute widths maintaining aspect ratios
+                                        let widths = aspects.map(ar => ar * rowHeight);
+                                        // If we have widthAdjustment (due to clamping) distribute proportionally so row still fills exactly
+                                        if (widthAdjustment !== 0) {
+                                            const widthSum = widths.reduce((a, b) => a + b, 0);
+                                            widths = widths.map(w => w + (w / widthSum) * widthAdjustment);
+                                        }
+
+                                        // To combat rounding issues, adjust last item width to fill precisely
+                                        const widthSumRounded = widths.reduce((a, b) => a + b, 0);
+                                        const roundingDiff = availableWidth - widthSumRounded;
+                                        if (Math.abs(roundingDiff) > 0.5) {
+                                            widths[widths.length - 1] += roundingDiff; // minimal correction
+                                        }
+
+                                        return (
+                                            <View key={rowIndex} style={{ flexDirection: 'row', width: '100%', marginBottom: 4 }}>
+                                                {row.map((p, i) => {
+                                                    const photoWidth = widths[i];
+                                                    return (
+                                                        <View
+                                                            key={p.id}
+                                                            style={{ width: photoWidth, height: rowHeight, marginRight: i === row.length - 1 ? 0 : gap }}
+                                                        >
+                                                            {renderJustifiedPhotoItem(p, photoWidth, rowHeight, i === row.length - 1)}
+                                                        </View>
+                                                    );
+                                                })}
+                                            </View>
+                                        );
+                                    })}
+                                </View>
+                            </View>
+                        );
+                    })}
+                </>
+            )}
+        </View>
+    );
+};
+
+export default React.memo(JustifiedPhotoGrid);