@oxyhq/services 6.9.45 → 6.10.1

package/src/ui/hooks/useMutationStatus.ts

@@ -0,0 +1,111 @@
+/**
+ * useMutationStatus
+ *
+ * Aggregates counts of in-flight, paused (offline), and errored mutations
+ * from the TanStack Query mutation cache. Useful for showing a global
+ * "Syncing..." indicator in the app shell.
+ */
+
+import { useCallback, useRef, useSyncExternalStore } from 'react';
+import { useQueryClient, type Mutation, type QueryClient } from '@tanstack/react-query';
+
+export interface MutationStatus {
+  /** Mutations currently running (status === 'pending', not paused). */
+  pending: number;
+  /** Mutations paused waiting for the network to come back. */
+  paused: number;
+  /** Mutations that failed and have not been retried. */
+  erroring: number;
+  /** Total of `pending + paused + erroring`. */
+  total: number;
+  /** True if any mutation is paused (i.e. waiting for connectivity). */
+  isOffline: boolean;
+  /** True if any work is in flight or pending sync. */
+  isSyncing: boolean;
+}
+
+function computeStatus(queryClient: QueryClient): MutationStatus {
+  const mutations: Mutation[] = queryClient.getMutationCache().getAll();
+  let pending = 0;
+  let paused = 0;
+  let erroring = 0;
+
+  for (const m of mutations) {
+    const { status, isPaused } = m.state;
+    if (isPaused) {
+      paused += 1;
+      continue;
+    }
+    if (status === 'pending') {
+      pending += 1;
+      continue;
+    }
+    if (status === 'error') {
+      erroring += 1;
+    }
+  }
+
+  const total = pending + paused + erroring;
+  return {
+    pending,
+    paused,
+    erroring,
+    total,
+    isOffline: paused > 0,
+    isSyncing: pending > 0 || paused > 0,
+  };
+}
+
+const EMPTY_SNAPSHOT: MutationStatus = {
+  pending: 0,
+  paused: 0,
+  erroring: 0,
+  total: 0,
+  isOffline: false,
+  isSyncing: false,
+};
+
+function snapshotsEqual(a: MutationStatus, b: MutationStatus): boolean {
+  return (
+    a.pending === b.pending &&
+    a.paused === b.paused &&
+    a.erroring === b.erroring &&
+    a.total === b.total &&
+    a.isOffline === b.isOffline &&
+    a.isSyncing === b.isSyncing
+  );
+}
+
+export function useMutationStatus(): MutationStatus {
+  const queryClient = useQueryClient();
+
+  // Cache the last returned snapshot so `useSyncExternalStore`'s tearing
+  // check sees the same reference between renders unless the underlying
+  // mutation cache actually changed. Without this React 19 enters an
+  // infinite render loop because every call to `computeStatus` returns
+  // a fresh object literal.
+  const cachedRef = useRef<MutationStatus>(EMPTY_SNAPSHOT);
+
+  const subscribe = useCallback(
+    (notify: () => void): (() => void) => {
+      const cache = queryClient.getMutationCache();
+      return cache.subscribe(() => {
+        notify();
+      });
+    },
+    [queryClient],
+  );
+
+  const getSnapshot = useCallback((): MutationStatus => {
+    const next = computeStatus(queryClient);
+    if (snapshotsEqual(cachedRef.current, next)) {
+      return cachedRef.current;
+    }
+    cachedRef.current = next;
+    return next;
+  }, [queryClient]);
+
+  const getServerSnapshot = useCallback((): MutationStatus => EMPTY_SNAPSHOT, []);
+
+  return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+}

package/src/ui/hooks/useOnlineStatus.ts

@@ -0,0 +1,29 @@
+/**
+ * useOnlineStatus
+ *
+ * Reactive boolean reflecting TanStack Query's `onlineManager` state.
+ * Mirrors browser `online`/`offline` events on web and NetInfo updates on
+ * native (both wired up in `OxyProvider`).
+ *
+ * Use this for surfacing offline UI — an OfflineBanner, a disabled "Sync"
+ * button, an inline "queued" badge on pending writes, etc. For pending /
+ * paused mutation counts use `useMutationStatus()` instead.
+ */
+
+import { useSyncExternalStore } from 'react';
+import { onlineManager } from '@tanstack/react-query';
+
+const getOnlineSnapshot = (): boolean => onlineManager.isOnline();
+
+const subscribeOnline = (notify: () => void): (() => void) => {
+  return onlineManager.subscribe(() => {
+    notify();
+  });
+};
+
+// SSR: assume online so SSR-rendered markup doesn't show offline banners.
+const getServerSnapshot = (): boolean => true;
+
+export function useOnlineStatus(): boolean {
+  return useSyncExternalStore(subscribeOnline, getOnlineSnapshot, getServerSnapshot);
+}

package/src/ui/hooks/useSessionSocket.ts

@@ -1,17 +1,38 @@
 import { useEffect, useRef } from 'react';
-import io from 'socket.io-client';
-import { toast } from '../../lib/sonner';
+import io, { type Socket } from 'socket.io-client';
+import { toast } from '@oxyhq/bloom';
 import { logger } from '@oxyhq/core';
 import { createDebugLogger } from '@oxyhq/core';
 
 const debug = createDebugLogger('SessionSocket');
 
+/**
+ * Server-emitted event types on the `session_update` channel.
+ *
+ * `session_removed`, `device_removed`, `sessions_removed` are the ONLY
+ * events that may sign the user out. Anything else (e.g. `session_created`
+ * fired right after a successful sign-in) MUST NOT trigger sign-out — see
+ * the comment on the `default` branch below.
+ */
+type SessionEventType =
+  | 'session_removed'
+  | 'device_removed'
+  | 'sessions_removed'
+  | 'session_created'
+  | 'session_update';
+
+interface SessionUpdatePayload {
+  type: SessionEventType | string;
+  sessionId?: string;
+  deviceId?: string;
+  sessionIds?: string[];
+}
+
 interface UseSessionSocketProps {
   userId: string | null | undefined;
   activeSessionId: string | null | undefined;
   currentDeviceId: string | null | undefined;
   refreshSessions: () => Promise<void>;
-  logout: () => Promise<void>;
   clearSessionState: () => Promise<void>;
   baseURL: string;
   getAccessToken: () => string | null;
@@ -19,12 +40,21 @@ interface UseSessionSocketProps {
   onSessionRemoved?: (sessionId: string) => void;
 }
 
-export function useSessionSocket({ userId, activeSessionId, currentDeviceId, refreshSessions, logout, clearSessionState, baseURL, getAccessToken, onRemoteSignOut, onSessionRemoved }: UseSessionSocketProps) {
-  const socketRef = useRef<any>(null);
+export function useSessionSocket({
+  userId,
+  activeSessionId,
+  currentDeviceId,
+  refreshSessions,
+  clearSessionState,
+  baseURL,
+  getAccessToken,
+  onRemoteSignOut,
+  onSessionRemoved,
+}: UseSessionSocketProps) {
+  const socketRef = useRef<Socket | null>(null);
 
   // Store callbacks in refs to avoid reconnecting when they change
   const refreshSessionsRef = useRef(refreshSessions);
-  const logoutRef = useRef(logout);
   const clearSessionStateRef = useRef(clearSessionState);
   const onRemoteSignOutRef = useRef(onRemoteSignOut);
   const onSessionRemovedRef = useRef(onSessionRemoved);
@@ -35,14 +65,13 @@ export function useSessionSocket({ userId, activeSessionId, currentDeviceId, ref
   // Update refs when callbacks change
   useEffect(() => {
     refreshSessionsRef.current = refreshSessions;
-    logoutRef.current = logout;
     clearSessionStateRef.current = clearSessionState;
     onRemoteSignOutRef.current = onRemoteSignOut;
     onSessionRemovedRef.current = onSessionRemoved;
     activeSessionIdRef.current = activeSessionId;
     currentDeviceIdRef.current = currentDeviceId;
     getAccessTokenRef.current = getAccessToken;
-  }, [refreshSessions, logout, clearSessionState, onRemoteSignOut, onSessionRemoved, activeSessionId, currentDeviceId, getAccessToken]);
+  }, [refreshSessions, clearSessionState, onRemoteSignOut, onSessionRemoved, activeSessionId, currentDeviceId, getAccessToken]);
 
   useEffect(() => {
     if (!userId || !baseURL) {
@@ -75,138 +104,119 @@ export function useSessionSocket({ userId, activeSessionId, currentDeviceId, ref
       debug.log('Socket connected:', socket.id);
     };
 
-    const handleSessionUpdate = async (data: {
-      type: string;
-      sessionId?: string;
-      deviceId?: string;
-      sessionIds?: string[]
-    }) => {
+    const refreshSessionsSafe = () => {
+      refreshSessionsRef.current().catch((error: unknown) => {
+        // Refresh errors shouldn't break the socket handler. They happen
+        // routinely when sessions are removed mid-fetch — log and move on.
+        if (__DEV__) {
+          logger.debug(
+            'Failed to refresh sessions after session_update',
+            { component: 'useSessionSocket' },
+            error,
+          );
+        }
+      });
+    };
+
+    const triggerLocalSignOut = async (toastMessage: string, errorContext: string) => {
+      if (onRemoteSignOutRef.current) {
+        onRemoteSignOutRef.current();
+      } else {
+        toast.info(toastMessage);
+      }
+      // Clear local state since the server has already removed the session.
+      // Await so storage cleanup completes before any subsequent navigation.
+      try {
+        await clearSessionStateRef.current();
+      } catch (error) {
+        if (__DEV__) {
+          logger.error(
+            `Failed to clear session state after ${errorContext}`,
+            error instanceof Error ? error : new Error(String(error)),
+            { component: 'useSessionSocket' },
+          );
+        }
+      }
+    };
+
+    const handleSessionUpdate = async (data: SessionUpdatePayload) => {
       debug.log('Received session_update:', data);
-      
+
       const currentActiveSessionId = activeSessionIdRef.current;
-      const currentDeviceId = currentDeviceIdRef.current;
-      
-      // Handle different event types
-      if (data.type === 'session_removed') {
-        // Track removed session
-        if (data.sessionId && onSessionRemovedRef.current) {
-          onSessionRemovedRef.current(data.sessionId);
-        }
-        
-        // If the removed sessionId matches the current activeSessionId, immediately clear state
-        if (data.sessionId === currentActiveSessionId) {
-          if (onRemoteSignOutRef.current) {
-            onRemoteSignOutRef.current();
-          } else {
-            toast.info('You have been signed out remotely.');
+      const currentDeviceIdValue = currentDeviceIdRef.current;
+
+      // Strict whitelist. Every event type that may sign the user out must
+      // appear in the switch. Anything unknown falls through to `default`,
+      // which is intentionally a no-op for session lifecycle — it only logs
+      // in dev. This guards against future server-side event additions
+      // (e.g. `session_created`) accidentally triggering sign-out via a
+      // "legacy fallback" branch.
+      switch (data.type) {
+        case 'session_removed': {
+          if (data.sessionId && onSessionRemovedRef.current) {
+            onSessionRemovedRef.current(data.sessionId);
           }
-          // Use clearSessionState since session was already removed server-side
-          // Await to ensure storage cleanup completes before continuing
-          try {
-            await clearSessionStateRef.current();
-          } catch (error) {
-            if (__DEV__) {
-              logger.error('Failed to clear session state after session_removed', error instanceof Error ? error : new Error(String(error)), { component: 'useSessionSocket' });
-            }
+          if (data.sessionId && data.sessionId === currentActiveSessionId) {
+            await triggerLocalSignOut('You have been signed out remotely.', 'session_removed');
+          } else {
+            refreshSessionsSafe();
           }
-        } else {
-          // Otherwise, just refresh the sessions list (with error handling)
-          refreshSessionsRef.current().catch((error) => {
-            // Silently handle errors from refresh - they're expected if sessions were removed
-            if (__DEV__) {
-              logger.debug('Failed to refresh sessions after session_removed', { component: 'useSessionSocket' }, error as unknown);
-            }
-          });
+          break;
         }
-      } else if (data.type === 'device_removed') {
-        // Track all removed sessions from this device
-        if (data.sessionIds && onSessionRemovedRef.current) {
-          for (const sessionId of data.sessionIds) {
-            onSessionRemovedRef.current(sessionId);
+        case 'device_removed': {
+          if (data.sessionIds && onSessionRemovedRef.current) {
+            for (const sessionId of data.sessionIds) {
+              onSessionRemovedRef.current(sessionId);
+            }
           }
-        }
-        
-        // If the removed deviceId matches the current device, immediately clear state
-        if (data.deviceId && data.deviceId === currentDeviceId) {
-          if (onRemoteSignOutRef.current) {
-            onRemoteSignOutRef.current();
+          if (data.deviceId && currentDeviceIdValue && data.deviceId === currentDeviceIdValue) {
+            await triggerLocalSignOut(
+              'This device has been removed. You have been signed out.',
+              'device_removed',
+            );
           } else {
-            toast.info('This device has been removed. You have been signed out.');
-          }
-          // Use clearSessionState since sessions were already removed server-side
-          // Await to ensure storage cleanup completes before continuing
-          try {
-            await clearSessionStateRef.current();
-          } catch (error) {
-            if (__DEV__) {
-              logger.error('Failed to clear session state after device_removed', error instanceof Error ? error : new Error(String(error)), { component: 'useSessionSocket' });
-            }
+            refreshSessionsSafe();
           }
-        } else {
-          // Otherwise, refresh sessions and device list (with error handling)
-          refreshSessionsRef.current().catch((error) => {
-            // Silently handle errors from refresh - they're expected if sessions were removed
-            if (__DEV__) {
-              logger.debug('Failed to refresh sessions after device_removed', { component: 'useSessionSocket' }, error as unknown);
-            }
-          });
+          break;
         }
-      } else if (data.type === 'sessions_removed') {
-        // Track all removed sessions
-        if (data.sessionIds && onSessionRemovedRef.current) {
-          for (const sessionId of data.sessionIds) {
-            onSessionRemovedRef.current(sessionId);
+        case 'sessions_removed': {
+          if (data.sessionIds && onSessionRemovedRef.current) {
+            for (const sessionId of data.sessionIds) {
+              onSessionRemovedRef.current(sessionId);
+            }
           }
-        }
-        
-        // If the current activeSessionId is in the removed sessionIds list, immediately clear state
-        if (data.sessionIds && currentActiveSessionId && data.sessionIds.includes(currentActiveSessionId)) {
-          if (onRemoteSignOutRef.current) {
-            onRemoteSignOutRef.current();
+          if (
+            data.sessionIds &&
+            currentActiveSessionId &&
+            data.sessionIds.includes(currentActiveSessionId)
+          ) {
+            await triggerLocalSignOut('You have been signed out remotely.', 'sessions_removed');
           } else {
-            toast.info('You have been signed out remotely.');
+            refreshSessionsSafe();
           }
-          // Use clearSessionState since sessions were already removed server-side
-          // Await to ensure storage cleanup completes before continuing
-          try {
-            await clearSessionStateRef.current();
-          } catch (error) {
-            if (__DEV__) {
-              logger.error('Failed to clear session state after sessions_removed', error instanceof Error ? error : new Error(String(error)), { component: 'useSessionSocket' });
-            }
-          }
-        } else {
-          // Otherwise, refresh sessions list (with error handling)
-          refreshSessionsRef.current().catch((error) => {
-            // Silently handle errors from refresh - they're expected if sessions were removed
-            if (__DEV__) {
-              logger.debug('Failed to refresh sessions after sessions_removed', { component: 'useSessionSocket' }, error as unknown);
-            }
-          });
+          break;
         }
-      } else {
-        // For other event types (e.g., session_created), refresh sessions (with error handling)
-        refreshSessionsRef.current().catch((error) => {
-          // Log but don't throw - refresh errors shouldn't break the socket handler
+        case 'session_created':
+        case 'session_update': {
+          // Lifecycle event for the current user. Just resync the sessions
+          // list — never sign out. Historically this branch had a legacy
+          // fallback that compared `data.sessionId === currentActiveSessionId`
+          // and signed the user out if true, which was catastrophic: a
+          // `session_created` event fired immediately after a successful
+          // sign-in carries the user's NEW (now-active) session id, which
+          // matched and triggered an instant remote sign-out toast on every
+          // login. Whitelist explicitly; never fall through.
+          refreshSessionsSafe();
+          break;
+        }
+        default: {
           if (__DEV__) {
-            logger.debug('Failed to refresh sessions after session_update', { component: 'useSessionSocket' }, error as unknown);
-          }
-        });
-        
-        // If the current session was logged out (legacy behavior), handle it specially
-        if (data.sessionId === currentActiveSessionId) {
-          if (onRemoteSignOutRef.current) {
-            onRemoteSignOutRef.current();
-          } else {
-            toast.info('You have been signed out remotely.');
-          }
-          // Use clearSessionState since session was already removed server-side
-          // Await to ensure storage cleanup completes before continuing
-          try {
-            await clearSessionStateRef.current();
-          } catch (error) {
-            debug.error('Failed to clear session state after session_update:', error);
+            logger.warn('Unknown session socket event type', {
+              component: 'useSessionSocket',
+              type: data.type,
+            });
           }
+          break;
         }
       }
     };
@@ -221,4 +231,4 @@ export function useSessionSocket({ userId, activeSessionId, currentDeviceId, ref
       socketRef.current = null;
     };
   }, [userId, baseURL]); // Only depend on userId and baseURL - callbacks are in refs
-} 
+}

package/src/ui/hooks/useSettingToggle.ts

@@ -1,5 +1,5 @@
 import { useState, useCallback, useEffect } from 'react';
-import { toast } from '../../lib/sonner';
+import { toast } from '@oxyhq/bloom';
 
 interface UseSettingToggleOptions {
     /** Initial value of the setting */

package/src/ui/index.ts

@@ -34,9 +34,6 @@ let useFollow;
 let ProfileScreen;
 let useAuthStore;
 let useAccountStore;
-let fontFamilies;
-let fontStyles;
-let toast;
 let useStorage;
 
 if (isFrontend) {
@@ -55,9 +52,6 @@ if (isFrontend) {
   ProfileScreen = require('./screens/ProfileScreen').default;
   useAuthStore = require('./stores/authStore').useAuthStore;
   useAccountStore = require('./stores/accountStore').useAccountStore;
-  fontFamilies = require('./styles/fonts').fontFamilies;
-  fontStyles = require('./styles/fonts').fontStyles;
-  toast = require('../lib/sonner').toast;
   useStorage = require('./hooks/useStorage').useStorage;
 } else {
   // Backend: no-op fallbacks
@@ -80,9 +74,6 @@ if (isFrontend) {
   ProfileScreen = noopComponent;
   useAuthStore = noopHook;
   useAccountStore = noopHook;
-  fontFamilies = {};
-  fontStyles = {};
-  toast = () => {};
   useStorage = () => noopStorageResult;
 }
 
@@ -102,9 +93,6 @@ export {
   ProfileScreen,
   useAuthStore,
   useAccountStore,
-  fontFamilies,
-  fontStyles,
-  toast,
   useStorage,
 };
 

package/src/ui/navigation/routes.ts

@@ -1,4 +1,4 @@
-import type { ComponentType } from 'react';
+import type { ComponentType, ReactNode } from 'react';
 import type { BaseScreenProps } from '../types/navigation';
 
 // Lazy loading: Screens are loaded on-demand to break require cycles
@@ -40,7 +40,8 @@ export type RouteName =
     | 'KarmaFAQ'
     | 'FollowersList'  // List of user's followers
     | 'FollowingList' // List of users being followed
-    | 'CreateManagedAccount'; // Create a new managed sub-account
+    | 'CreateManagedAccount' // Create a new managed sub-account
+    | 'AvatarCrop'; // Square-crop editor presented before avatar upload
 
 // Lazy screen loaders - functions that return screen components on-demand
 // This breaks the require cycle by deferring imports until screens are actually needed
@@ -82,6 +83,7 @@ const screenLoaders: Record<RouteName, () => ComponentType<BaseScreenProps>> = {
     FollowersList: () => require('../screens/FollowersListScreen').default,
     FollowingList: () => require('../screens/FollowingListScreen').default,
     CreateManagedAccount: () => require('../screens/CreateManagedAccountScreen').default,
+    AvatarCrop: () => require('../screens/AvatarCropScreen').default,
 };
 
 // Cache loaded components to avoid re-requiring
@@ -117,3 +119,92 @@ export const getScreenComponent = (routeName: RouteName): ComponentType<BaseScre
 export const isValidRoute = (routeName: string): routeName is RouteName => {
     return routeName in screenLoaders;
 };
+
+/**
+ * Configuration that BottomSheetRouter applies to the underlying BottomSheet
+ * for a given route. Adding new options here is additive — never rename or
+ * remove fields without bumping the consumer surface as a breaking change.
+ */
+export interface SheetRouteConfig {
+    /**
+     * When `false`, BottomSheet skips its internal ScrollView and lets the
+     * screen own scrolling. Required for screens that render a FlatList,
+     * SectionList, or any other VirtualizedList — nesting one inside a
+     * plain ScrollView breaks windowing and triggers a RN warning.
+     */
+    scrollable: boolean;
+    /**
+     * Controls the body-pan activation strategy on the underlying bloom
+     * `BottomSheet`. `true` uses RNGH's `manualActivation` with scroll-handoff
+     * (recommended for scrollable content — the only RNGH 2.x pattern that
+     * doesn't steal vertical events from the inner scroller on Android).
+     * `false` uses an always-active body pan that gates on scroll offset.
+     *
+     * Defaults to `true` for all routes — matches the historical in-tree
+     * BottomSheet behavior. Per-route opt-out is possible if a screen needs
+     * the always-active pan instead.
+     */
+    manualActivation: boolean;
+    /**
+     * When `true`, the backdrop dims proportionally with drag distance (iOS
+     * Photos style). Defaults to `true` for all routes — matches the
+     * historical in-tree BottomSheet behavior.
+     */
+    dynamicBackdrop: boolean;
+    /**
+     * Optional custom handle slot. When provided, replaces the default
+     * 36×5 pill drag handle. The handle remains unconditionally draggable
+     * via the dedicated handle gesture (when `manualActivation` is `true`).
+     * Use sparingly — screens should default to the standard handle for
+     * platform consistency.
+     */
+    handleComponent?: () => ReactNode;
+}
+
+/**
+ * Predicate matching FileManagementScreen's internal `isImageOnlyPicker`
+ * derivation. When the consumer restricts to image MIME types (no videos,
+ * no audio, no documents), FileManagement renders the flagship PhotoPickerView
+ * which owns its own FlatList. The sheet must therefore stop scrolling
+ * children. Kept in sync with `FileManagementScreen` — both check the same
+ * disabled MIME type families.
+ */
+const isFileManagementImageOnlyPicker = (props: Record<string, unknown>): boolean => {
+    if (!props.selectMode) return false;
+    const disabled = props.disabledMimeTypes;
+    if (!Array.isArray(disabled) || disabled.length === 0) return false;
+    const has = (predicate: (mt: string) => boolean): boolean =>
+        disabled.some((mt) => typeof mt === 'string' && predicate(mt));
+    const blocksVideos = has((mt) => mt === 'video/' || mt.startsWith('video/'));
+    const blocksAudio = has((mt) => mt === 'audio/' || mt.startsWith('audio/'));
+    const blocksDocs = has(
+        (mt) => mt === 'application/pdf' || mt === 'application/' || mt.startsWith('application/'),
+    );
+    return blocksVideos && blocksAudio && blocksDocs;
+};
+
+/** Defaults shared across all routes — preserves the historical in-tree BS UX. */
+const DEFAULT_SHEET_CONFIG: SheetRouteConfig = {
+    scrollable: true,
+    manualActivation: true,
+    dynamicBackdrop: true,
+};
+
+/**
+ * Returns the bottom-sheet configuration for a route. Defaults match the
+ * pre-refactor in-tree `BottomSheet` (scrollable, manualActivation,
+ * dynamicBackdrop). Routes opt out per-field as needed.
+ */
+export const getSheetConfig = (
+    routeName: RouteName | null,
+    screenProps: Record<string, unknown>,
+): SheetRouteConfig => {
+    if (!routeName) return DEFAULT_SHEET_CONFIG;
+    if (routeName === 'FileManagement' && isFileManagementImageOnlyPicker(screenProps)) {
+        // PhotoPickerView owns its own FlatList — the sheet must not wrap a
+        // ScrollView around it. Everything else stays at the standard
+        // manualActivation + dynamicBackdrop defaults.
+        return { ...DEFAULT_SHEET_CONFIG, scrollable: false };
+    }
+    return DEFAULT_SHEET_CONFIG;
+};