@oxyhq/services 5.8.1 → 5.8.3

package/src/node/index.ts

@@ -7,28 +7,10 @@ import { OxyServices, OXY_CLOUD_URL } from '../core'; // Adjusted path
 import { createAuth } from './createAuth';
 import * as Models from '../models/interfaces'; // Adjusted path
 
-// ------------- Enhanced Authentication Imports -------------
-import { 
-  OxyAuth, 
-  AuthRequest,
-  AuthOptions,
-  AuthMiddlewareOptions,
-  TokenValidationResult
-} from './createAuth';
-
 // ------------- Core Exports -------------
 export { OxyServices, OXY_CLOUD_URL };
 
-// ------------- Enhanced Authentication Exports -------------
-export { 
-  OxyAuth, 
-  AuthRequest,
-  AuthOptions,
-  AuthMiddlewareOptions,
-  TokenValidationResult
-};
-
-// Zero-config auth and session router (legacy)
+// Zero-config auth and session router
 export { createAuth };
 
 // ------------- Model Exports -------------

package/src/ui/components/FollowButton.tsx

@@ -21,6 +21,7 @@ import { useOxy } from '../context/OxyContext';
 import { fontFamilies } from '../styles/fonts';
 import { toast } from '../../lib/sonner';
 import { useFollow } from '../hooks/useFollow';
+import { useThemeColors } from '../styles/theme';
 
 export interface FollowButtonProps {
   userId: string;
@@ -32,6 +33,7 @@ export interface FollowButtonProps {
   disabled?: boolean;
   showLoadingState?: boolean;
   preventParentActions?: boolean;
+  theme?: 'light' | 'dark';
 }
 
 const FollowButton: React.FC<FollowButtonProps> = ({
@@ -44,8 +46,10 @@ const FollowButton: React.FC<FollowButtonProps> = ({
   disabled = false,
   showLoadingState = true,
   preventParentActions = true,
+  theme = 'light',
 }) => {
   const { oxyServices, isAuthenticated } = useOxy();
+  const colors = useThemeColors(theme);
   const {
     isFollowing,
     isLoading,
@@ -96,19 +100,93 @@ const FollowButton: React.FC<FollowButtonProps> = ({
     }
   }, [disabled, isLoading, toggleFollow, onFollowChange, isFollowing, preventParentActions]);
 
-  // Button styles
+  // Get button style based on size and follow state
   const getButtonStyle = (): StyleProp<ViewStyle> => {
-    let baseStyle = styles.buttonMedium;
-    if (size === 'small') baseStyle = styles.buttonSmall;
-    if (size === 'large') baseStyle = styles.buttonLarge;
-    return [baseStyle, isFollowing ? styles.following : styles.notFollowing, style];
+    const baseStyle = {
+      flexDirection: 'row' as const,
+      alignItems: 'center' as const,
+      justifyContent: 'center' as const,
+      borderWidth: 1,
+      ...Platform.select({
+        web: {
+          boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
+        },
+        default: {
+          shadowOffset: { width: 0, height: 2 },
+          shadowOpacity: 0.1,
+          shadowRadius: 4,
+          elevation: 2,
+        }
+      }),
+    };
+
+    // Size-specific styles
+    let sizeStyle = {};
+    if (size === 'small') {
+      sizeStyle = {
+        paddingVertical: 6,
+        paddingHorizontal: 12,
+        minWidth: 70,
+        borderRadius: 35,
+      };
+    } else if (size === 'large') {
+      sizeStyle = {
+        paddingVertical: 12,
+        paddingHorizontal: 24,
+        minWidth: 120,
+        borderRadius: 35,
+      };
+    } else {
+      // medium
+      sizeStyle = {
+        paddingVertical: 8,
+        paddingHorizontal: 16,
+        minWidth: 90,
+        borderRadius: 35,
+      };
+    }
+
+    // State-specific colors
+    let stateStyle = {};
+    if (isFollowing) {
+      stateStyle = {
+        backgroundColor: colors.primary,
+        borderColor: colors.primary,
+        shadowColor: colors.primary,
+      };
+    } else {
+      stateStyle = {
+        backgroundColor: 'transparent',
+        borderColor: colors.border,
+        shadowColor: colors.border,
+      };
+    }
+
+    return [baseStyle, sizeStyle, stateStyle, style];
   };
 
+  // Get text style based on size and follow state
   const getTextStyle = (): StyleProp<TextStyle> => {
-    let baseStyle = styles.textMedium;
-    if (size === 'small') baseStyle = styles.textSmall;
-    if (size === 'large') baseStyle = styles.textLarge;
-    return [baseStyle, isFollowing ? styles.textFollowing : styles.textNotFollowing, textStyle];
+    const baseTextStyle = {
+      fontFamily: fontFamilies.phuduSemiBold,
+      fontWeight: '600' as const,
+    };
+
+    // Size-specific text styles
+    let sizeTextStyle = {};
+    if (size === 'small') {
+      sizeTextStyle = { fontSize: 13 };
+    } else if (size === 'large') {
+      sizeTextStyle = { fontSize: 16 };
+    } else {
+      // medium
+      sizeTextStyle = { fontSize: 15 };
+    }
+
+    // State-specific text color
+    const textColor = isFollowing ? '#FFFFFF' : colors.text;
+
+    return [baseTextStyle, sizeTextStyle, { color: textColor }, textStyle];
   };
 
   return (
@@ -119,15 +197,21 @@ const FollowButton: React.FC<FollowButtonProps> = ({
       activeOpacity={0.8}
     >
       {showLoadingState && isLoading ? (
-        <ActivityIndicator size={size === 'small' ? 'small' : 'large'} color={isFollowing ? '#fff' : '#007AFF'} />
+        <ActivityIndicator
+          size={size === 'small' ? 'small' : 'small'}
+          color={isFollowing ? '#FFFFFF' : colors.primary}
+        />
       ) : (
-        <Text style={getTextStyle()}>{isFollowing ? 'Following' : 'Follow'}</Text>
+        <Text style={getTextStyle()}>
+          {isFollowing ? 'Following' : 'Follow'}
+        </Text>
       )}
     </TouchableOpacity>
   );
 };
 
 const styles = StyleSheet.create({
+  // Legacy styles kept for backward compatibility but not used in new implementation
   buttonSmall: {
     paddingVertical: 4,
     paddingHorizontal: 12,

package/src/ui/components/Header.tsx

@@ -28,6 +28,8 @@ export interface HeaderProps {
     showCloseButton?: boolean;
     variant?: 'default' | 'large' | 'minimal' | 'gradient';
     elevation?: 'none' | 'subtle' | 'prominent';
+    subtitleVariant?: 'default' | 'small' | 'large' | 'muted';
+    titleAlignment?: 'left' | 'center' | 'right';
 }
 
 const Header: React.FC<HeaderProps> = ({
@@ -41,6 +43,8 @@ const Header: React.FC<HeaderProps> = ({
     showCloseButton = false,
     variant = 'default',
     elevation = 'subtle',
+    subtitleVariant = 'default',
+    titleAlignment = 'left',
 }) => {
     const isDarkTheme = theme === 'dark';
 
@@ -139,11 +143,26 @@ const Header: React.FC<HeaderProps> = ({
 
         const subtitleStyle = variant === 'large' ? styles.subtitleLarge :
             variant === 'minimal' ? styles.subtitleMinimal :
-                styles.subtitleDefault;
+                subtitleVariant === 'small' ? styles.subtitleSmall :
+                    subtitleVariant === 'large' ? styles.subtitleLarge :
+                        subtitleVariant === 'muted' ? styles.subtitleMuted :
+                            styles.subtitleDefault;
+
+        const getTitleAlignment = () => {
+            switch (titleAlignment) {
+                case 'center':
+                    return styles.titleContainerCenter;
+                case 'right':
+                    return styles.titleContainerRight;
+                default:
+                    return styles.titleContainerLeft;
+            }
+        };
 
         return (
             <View style={[
                 styles.titleContainer,
+                getTitleAlignment(),
                 variant === 'minimal' && styles.titleContainerMinimal
             ]}>
                 <Text style={[titleStyle, { color: colors.text.primary }]}>
@@ -281,6 +300,15 @@ const styles = StyleSheet.create({
         alignItems: 'flex-start',
         justifyContent: 'center',
     },
+    titleContainerLeft: {
+        alignItems: 'flex-start',
+    },
+    titleContainerCenter: {
+        alignItems: 'center',
+    },
+    titleContainerRight: {
+        alignItems: 'flex-end',
+    },
     titleContainerMinimal: {
         alignItems: 'center',
         marginHorizontal: 16,
@@ -309,22 +337,35 @@ const styles = StyleSheet.create({
     },
     subtitleDefault: {
         fontSize: 14,
-        fontFamily: fontFamilies.phuduMedium,
+        fontWeight: '400',
         lineHeight: 17,
         marginTop: 1,
     },
     subtitleLarge: {
         fontSize: 16,
-        fontFamily: fontFamilies.phuduMedium,
+        fontWeight: '400',
         lineHeight: 19,
         marginTop: 3,
     },
     subtitleMinimal: {
         fontSize: 13,
-        fontFamily: fontFamilies.phuduMedium,
+        fontWeight: '400',
         lineHeight: 15,
         marginTop: 1,
     },
+    subtitleSmall: {
+        fontSize: 12,
+        fontWeight: '400',
+        lineHeight: 14,
+        marginTop: 0,
+    },
+    subtitleMuted: {
+        fontSize: 14,
+        fontWeight: '400',
+        lineHeight: 17,
+        marginTop: 1,
+        opacity: 0.7,
+    },
     rightActionButton: {
         alignItems: 'center',
         justifyContent: 'center',

package/src/ui/components/OxyProvider.tsx

@@ -126,13 +126,17 @@ const OxyBottomSheet: React.FC<OxyProviderProps> = ({
                     };
                 }
             });
+
             // Add a method to navigate between screens
             // @ts-ignore
             bottomSheetRef.current._navigateToScreen = (screenName: string, props?: Record<string, any>) => {
+                console.log('_navigateToScreen called with:', screenName, props);
                 if (navigationRef.current) {
+                    console.log('Using navigationRef.current');
                     navigationRef.current(screenName, props);
                     return;
                 }
+                console.log('navigationRef.current not available, using event system');
                 if (typeof document !== 'undefined') {
                     const event = new CustomEvent('oxy:navigate', { detail: { screen: screenName, props } });
                     document.dispatchEvent(event);
@@ -140,6 +144,8 @@ const OxyBottomSheet: React.FC<OxyProviderProps> = ({
                     (globalThis as any).oxyNavigateEvent = { screen: screenName, props };
                 }
             };
+
+            console.log('Bottom sheet ref methods exposed:', Object.keys(bottomSheetRef.current));
         }
     }, [bottomSheetRef, modalRef]);
     // Keyboard handling (unchanged)

package/src/ui/context/OxyContext.tsx

@@ -112,8 +112,7 @@ const getStorage = async (): Promise<StorageInterface> => {
 
 // Storage keys for secure sessions
 const getSecureStorageKeys = (prefix = 'oxy_secure') => ({
-  sessions: `${prefix}_sessions`, // Array of SecureClientSession objects
-  activeSessionId: `${prefix}_active_session_id`, // ID of currently active session
+  activeSessionId: `${prefix}_active_session_id`, // Only store the active session ID
 });
 
 export const OxyProvider: React.FC<OxyContextProviderProps> = ({
@@ -175,94 +174,60 @@ export const OxyProvider: React.FC<OxyContextProviderProps> = ({
     initStorage();
   }, []);
 
-  // Effect to initialize authentication state
+  // Effect to initialize authentication state - only store session ID
   useEffect(() => {
     const initAuth = async () => {
       if (!storage) return;
 
       useAuthStore.setState({ isLoading: true });
       try {
-        // Load stored sessions
-        const sessionsData = await storage.getItem(keys.sessions);
+        // Only load the active session ID from storage
         const storedActiveSessionId = await storage.getItem(keys.activeSessionId);
 
-        console.log('SecureAuth - sessionsData:', sessionsData);
         console.log('SecureAuth - activeSessionId:', storedActiveSessionId);
 
-        if (sessionsData) {
-          const parsedSessions: SecureClientSession[] = JSON.parse(sessionsData);
-
-          // Migrate old session format to include user info
-          const migratedSessions: SecureClientSession[] = [];
-          let shouldUpdateStorage = false;
-
-          for (const session of parsedSessions) {
-            if (!session.userId) {
-              // Session is missing user info, try to fetch it
-              try {
-                const sessionUser = await oxyServices.getUserBySession(session.sessionId);
-                migratedSessions.push({
-                  ...session,
-                  userId: sessionUser.id
-                });
-                shouldUpdateStorage = true;
-                console.log(`Migrated session ${session.sessionId} for user ${sessionUser.id}`);
-              } catch (error) {
-                // Session might be invalid, skip it
-                console.log(`Removing invalid session ${session.sessionId}:`, error);
-                shouldUpdateStorage = true;
+        if (storedActiveSessionId) {
+          // Validate the stored session with the backend
+          try {
+            const validation = await oxyServices.validateSession(storedActiveSessionId);
+
+            if (validation.valid) {
+              console.log('SecureAuth - session validated successfully');
+              setActiveSessionId(storedActiveSessionId);
+
+              // Get access token for API calls
+              await oxyServices.getTokenBySession(storedActiveSessionId);
+
+              // Load full user data from backend
+              const fullUser = await oxyServices.getUserBySession(storedActiveSessionId);
+              loginSuccess(fullUser);
+              setMinimalUser({
+                id: fullUser.id,
+                username: fullUser.username,
+                avatar: fullUser.avatar
+              });
+
+              // Load sessions from backend
+              const serverSessions = await oxyServices.getSessionsBySessionId(storedActiveSessionId);
+              const clientSessions: SecureClientSession[] = serverSessions.map(serverSession => ({
+                sessionId: serverSession.sessionId,
+                deviceId: serverSession.deviceId,
+                expiresAt: serverSession.expiresAt || new Date().toISOString(),
+                lastActive: serverSession.lastActive || new Date().toISOString(),
+                userId: serverSession.userId || fullUser.id
+              }));
+              setSessions(clientSessions);
+
+              if (onAuthStateChange) {
+                onAuthStateChange(fullUser);
               }
             } else {
-              // Session already has user info
-              migratedSessions.push(session);
-            }
-          }
-
-          // Update storage if we made changes
-          if (shouldUpdateStorage) {
-            await saveSessionsToStorage(migratedSessions);
-          }
-
-          setSessions(migratedSessions);
-
-          if (storedActiveSessionId && migratedSessions.length > 0) {
-            const activeSession = migratedSessions.find(s => s.sessionId === storedActiveSessionId);
-
-            if (activeSession) {
-              console.log('SecureAuth - activeSession found:', activeSession);
-
-              // Validate session
-              try {
-                const validation = await oxyServices.validateSession(activeSession.sessionId);
-
-                if (validation.valid) {
-                  console.log('SecureAuth - session validated successfully');
-                  setActiveSessionId(activeSession.sessionId);
-
-                  // Get access token for API calls
-                  await oxyServices.getTokenBySession(activeSession.sessionId);
-
-                  // Load full user data
-                  const fullUser = await oxyServices.getUserBySession(activeSession.sessionId);
-                  loginSuccess(fullUser);
-                  setMinimalUser({
-                    id: fullUser.id,
-                    username: fullUser.username,
-                    avatar: fullUser.avatar
-                  });
-
-                  if (onAuthStateChange) {
-                    onAuthStateChange(fullUser);
-                  }
-                } else {
-                  console.log('SecureAuth - session invalid, removing');
-                  await removeInvalidSession(activeSession.sessionId);
-                }
-              } catch (error) {
-                console.error('SecureAuth - session validation error:', error);
-                await removeInvalidSession(activeSession.sessionId);
-              }
+              console.log('SecureAuth - session invalid, clearing storage');
+              await clearAllStorage();
             }
+          } catch (error) {
+            console.error('SecureAuth - session validation error:', error);
+            await clearAllStorage();
           }
         }
       } catch (err) {
@@ -276,15 +241,15 @@ export const OxyProvider: React.FC<OxyContextProviderProps> = ({
     if (storage) {
       initAuth();
     }
-  }, [storage, oxyServices, keys, onAuthStateChange]);
+  }, [storage, oxyServices, keys, onAuthStateChange, loginSuccess, setMinimalUser]);
 
 
 
-  // Remove invalid session
+  // Remove invalid session - refresh sessions from backend
   const removeInvalidSession = useCallback(async (sessionId: string): Promise<void> => {
+    // Remove from local state
     const filteredSessions = sessions.filter(s => s.sessionId !== sessionId);
     setSessions(filteredSessions);
-    await saveSessionsToStorage(filteredSessions);
 
     // If there are other sessions, switch to the first one
     if (filteredSessions.length > 0) {
@@ -302,13 +267,7 @@ export const OxyProvider: React.FC<OxyContextProviderProps> = ({
     }
   }, [sessions, storage, keys, onAuthStateChange, logoutStore]);
 
-  // Save sessions to storage
-  const saveSessionsToStorage = useCallback(async (sessionsList: SecureClientSession[]): Promise<void> => {
-    if (!storage) return;
-    await storage.setItem(keys.sessions, JSON.stringify(sessionsList));
-  }, [storage, keys.sessions]);
-
-  // Save active session ID to storage
+  // Save active session ID to storage (only session ID, no user data)
   const saveActiveSessionId = useCallback(async (sessionId: string): Promise<void> => {
     if (!storage) return;
     await storage.setItem(keys.activeSessionId, sessionId);
@@ -318,7 +277,6 @@ export const OxyProvider: React.FC<OxyContextProviderProps> = ({
   const clearAllStorage = useCallback(async (): Promise<void> => {
     if (!storage) return;
     try {
-      await storage.removeItem(keys.sessions);
       await storage.removeItem(keys.activeSessionId);
     } catch (err) {
       console.error('Clear secure storage error:', err);
@@ -357,7 +315,7 @@ export const OxyProvider: React.FC<OxyContextProviderProps> = ({
     }
   }, [oxyServices, onAuthStateChange, loginSuccess, saveActiveSessionId]);
 
-  // Secure login method
+  // Secure login method - only store session ID, retrieve data from backend
   const login = useCallback(async (username: string, password: string, deviceName?: string): Promise<User> => {
     if (!storage) throw new Error('Storage not initialized');
     useAuthStore.setState({ isLoading: true, error: null });
@@ -379,56 +337,29 @@ export const OxyProvider: React.FC<OxyContextProviderProps> = ({
         deviceFingerprint
       );
 
-      // Create client session object with user info for duplicate detection
-      const clientSession: SecureClientSession = {
-        sessionId: response.sessionId,
-        deviceId: response.deviceId,
-        expiresAt: response.expiresAt,
-        lastActive: new Date().toISOString(),
-        userId: response.user.id
-      };
-
-      // Check if this user already has a session (prevent duplicate accounts)
-      const existingUserSessionIndex = sessions.findIndex(s =>
-        s.userId === response.user.id
-      );
-
-      let updatedSessions: SecureClientSession[];
-
-      if (existingUserSessionIndex !== -1) {
-        // User already has a session - replace it with the new one (reused session scenario)
-        const existingSession = sessions[existingUserSessionIndex];
-        updatedSessions = [...sessions];
-        updatedSessions[existingUserSessionIndex] = clientSession;
-
-        console.log(`Reusing/updating existing session for user ${response.user.id}. Previous session: ${existingSession.sessionId}, New session: ${response.sessionId}`);
-
-        // If the replaced session was the active one, update active session
-        if (activeSessionId === existingSession.sessionId) {
-          setActiveSessionId(response.sessionId);
-          await saveActiveSessionId(response.sessionId);
-        }
-      } else {
-        // Add new session for new user
-        updatedSessions = [...sessions, clientSession];
-        console.log(`Added new session for user ${response.user.id} on device ${response.deviceId}`);
-      }
-
-      setSessions(updatedSessions);
-      await saveSessionsToStorage(updatedSessions);
-
-      // Set as active session
+      // Set as active session (only store session ID)
       setActiveSessionId(response.sessionId);
       await saveActiveSessionId(response.sessionId);
 
       // Get access token for API calls
       await oxyServices.getTokenBySession(response.sessionId);
 
-      // Load full user data
+      // Load full user data from backend
       const fullUser = await oxyServices.getUserBySession(response.sessionId);
       loginSuccess(fullUser);
       setMinimalUser(response.user);
 
+      // Load sessions from backend
+      const serverSessions = await oxyServices.getSessionsBySessionId(response.sessionId);
+      const clientSessions: SecureClientSession[] = serverSessions.map(serverSession => ({
+        sessionId: serverSession.sessionId,
+        deviceId: serverSession.deviceId,
+        expiresAt: serverSession.expiresAt || new Date().toISOString(),
+        lastActive: serverSession.lastActive || new Date().toISOString(),
+        userId: serverSession.userId || fullUser.id
+      }));
+      setSessions(clientSessions);
+
       if (onAuthStateChange) {
         onAuthStateChange(fullUser);
       }
@@ -440,7 +371,7 @@ export const OxyProvider: React.FC<OxyContextProviderProps> = ({
     } finally {
       useAuthStore.setState({ isLoading: false });
     }
-  }, [storage, oxyServices, sessions, activeSessionId, saveSessionsToStorage, saveActiveSessionId, loginSuccess, setMinimalUser, onAuthStateChange, loginFailure]);
+  }, [storage, oxyServices, saveActiveSessionId, loginSuccess, setMinimalUser, onAuthStateChange, loginFailure]);
 
   // Logout method
   const logout = useCallback(async (targetSessionId?: string): Promise<void> => {
@@ -450,10 +381,9 @@ export const OxyProvider: React.FC<OxyContextProviderProps> = ({
       const sessionToLogout = targetSessionId || activeSessionId;
       await oxyServices.logoutSecureSession(activeSessionId, sessionToLogout);
 
-      // Remove session from local storage
+      // Remove session from local state
       const filteredSessions = sessions.filter(s => s.sessionId !== sessionToLogout);
       setSessions(filteredSessions);
-      await saveSessionsToStorage(filteredSessions);
 
       // If logging out active session
       if (sessionToLogout === activeSessionId) {
@@ -476,7 +406,7 @@ export const OxyProvider: React.FC<OxyContextProviderProps> = ({
       console.error('Logout error:', error);
       useAuthStore.setState({ error: 'Logout failed' });
     }
-  }, [activeSessionId, oxyServices, sessions, saveSessionsToStorage, switchToSession, logoutStore, setMinimalUser, storage, keys.activeSessionId, onAuthStateChange]);
+  }, [activeSessionId, oxyServices, sessions, switchToSession, logoutStore, setMinimalUser, storage, keys.activeSessionId, onAuthStateChange]);
 
   // Logout all sessions
   const logoutAll = useCallback(async (): Promise<void> => {
@@ -598,8 +528,7 @@ export const OxyProvider: React.FC<OxyContextProviderProps> = ({
 
       console.log('refreshSessions: Updated sessions:', updatedSessions);
       setSessions(updatedSessions);
-      await saveSessionsToStorage(updatedSessions);
-      console.log('refreshSessions: Sessions saved to storage');
+      console.log('refreshSessions: Sessions updated in state');
     } catch (error) {
       console.error('Refresh sessions error:', error);
 
@@ -634,7 +563,7 @@ export const OxyProvider: React.FC<OxyContextProviderProps> = ({
         onAuthStateChange(null);
       }
     }
-  }, [activeSessionId, oxyServices, user?.id, sessions, saveSessionsToStorage, switchToSession, logoutStore, setMinimalUser, clearAllStorage, onAuthStateChange]);
+  }, [activeSessionId, oxyServices, user?.id, sessions, switchToSession, logoutStore, setMinimalUser, clearAllStorage, onAuthStateChange]);
 
   // Device management methods
   const getDeviceSessions = useCallback(async (): Promise<any[]> => {

package/src/ui/hooks/index.ts

@@ -1 +1 @@
-export { useFollow } from './useFollow'; 
+export { useFollow, useFollowerCounts } from './useFollow';