@oxyhq/services 22.5.0 → 22.6.0

package/src/ui/components/FontLoader.native.tsx

@@ -0,0 +1,88 @@
+import type React from 'react';
+import { useState, useEffect } from 'react';
+import * as Font from 'expo-font';
+
+/**
+ * Get the Inter font sources for native environments.
+ * Loads all static Inter weights bundled with this package.
+ */
+const getInterFonts = () => {
+    try {
+        return {
+            'Inter-Light': require('../../assets/fonts/Inter/Inter_18pt-Light.ttf'),
+            'Inter-Regular': require('../../assets/fonts/Inter/Inter_18pt-Regular.ttf'),
+            'Inter-Medium': require('../../assets/fonts/Inter/Inter_18pt-Medium.ttf'),
+            'Inter-SemiBold': require('../../assets/fonts/Inter/Inter_18pt-SemiBold.ttf'),
+            'Inter-Bold': require('../../assets/fonts/Inter/Inter_18pt-Bold.ttf'),
+            'Inter-ExtraBold': require('../../assets/fonts/Inter/Inter_18pt-ExtraBold.ttf'),
+            'Inter-Black': require('../../assets/fonts/Inter/Inter_18pt-Black.ttf'),
+        };
+    } catch (error) {
+        if (__DEV__) {
+            console.warn('Failed to load Inter fonts:', error);
+        }
+        return null;
+    }
+};
+
+/**
+ * FontLoader — loads custom fonts in the background while rendering children
+ * immediately with system fonts as fallback until the custom fonts are ready.
+ */
+export const FontLoader = ({
+    children,
+}: {
+    children: React.ReactNode;
+}) => {
+    const [fontState, setFontState] = useState<'loading' | 'loaded' | 'error'>('loading');
+
+    useEffect(() => {
+        const loadFonts = async () => {
+            try {
+                const interFonts = getInterFonts();
+
+                if (!interFonts) {
+                    throw new Error('Inter font files not found');
+                }
+
+                await Font.loadAsync(interFonts);
+                setFontState('loaded');
+            } catch (error) {
+                if (__DEV__) {
+                    console.error('Error loading fonts:', error);
+                }
+                setFontState('error');
+            }
+        };
+
+        loadFonts();
+    }, []);
+
+    if (fontState === 'error' && __DEV__) {
+        console.warn('Fonts failed to load. Using system fonts instead.');
+    }
+
+    return <>{children}</>;
+};
+
+/**
+ * Setup fonts for applications consuming this package on native.
+ */
+export const setupFonts = async (): Promise<boolean> => {
+    try {
+        const interFonts = getInterFonts();
+
+        if (!interFonts) {
+            throw new Error('Inter font files not found');
+        }
+
+        await Font.loadAsync(interFonts);
+        return true;
+    } catch (error: unknown) {
+        if (__DEV__) {
+            const errorMessage = error instanceof Error ? error.message : String(error);
+            console.warn('Error setting up fonts:', errorMessage);
+        }
+        return false;
+    }
+};

package/src/ui/components/FontLoader.tsx

@@ -1,162 +1,27 @@
 import type React from 'react';
-import { useState, useEffect } from 'react';
-import { Platform } from 'react-native';
-import * as Font from 'expo-font';
 
 /**
- * Get the Inter font sources for both native and web environments
- * This is specifically designed to work when distributed as an npm package
- */
-const getInterFonts = () => {
-    try {
-        // For both development and when used as a package
-        // Load all static font weights
-        return {
-            'Inter-Light': require('../../assets/fonts/Inter/Inter_18pt-Light.ttf'),
-            'Inter-Regular': require('../../assets/fonts/Inter/Inter_18pt-Regular.ttf'),
-            'Inter-Medium': require('../../assets/fonts/Inter/Inter_18pt-Medium.ttf'),
-            'Inter-SemiBold': require('../../assets/fonts/Inter/Inter_18pt-SemiBold.ttf'),
-            'Inter-Bold': require('../../assets/fonts/Inter/Inter_18pt-Bold.ttf'),
-            'Inter-ExtraBold': require('../../assets/fonts/Inter/Inter_18pt-ExtraBold.ttf'),
-            'Inter-Black': require('../../assets/fonts/Inter/Inter_18pt-Black.ttf'),
-        };
-    } catch (error) {
-        if (__DEV__) {
-        console.warn('Failed to load Inter fonts:', error);
-        }
-        return null;
-    }
-};
-
-/**
- * FontLoader component that loads custom fonts in the background while rendering children immediately
- * This works in both the package development and when consumed as an npm package
- * Children render immediately with system fonts as fallback until custom fonts are loaded
+ * Font loading — clean default (web, SSR, and any bundler that does not pick a
+ * platform variant).
+ *
+ * Web fonts are Bloom's job: `applyFontFaces()` in `@oxyhq/bloom` injects the
+ * Inter / BlomusModernus / Geist Mono `@font-face` rules as self-contained
+ * base64 data URLs, so there is nothing for this package to load off native.
+ * The real implementation lives in `FontLoader.native.tsx`.
+ *
+ * Keeping this module free of `expo-font` is load-bearing, not incidental:
+ * `expo-font/build/serverContext.web.js` imports `node:async_hooks`, which
+ * every browser bundler externalizes. A top-level `expo-font` import here
+ * therefore throws at module-evaluation time on web and React never mounts.
  */
 export const FontLoader = ({
     children,
 }: {
     children: React.ReactNode;
-}) => {
-    const [fontState, setFontState] = useState<'loading' | 'loaded' | 'error'>('loading');
-
-    useEffect(() => {
-        const loadFonts = async () => {
-            try {
-                // Get all the font weights
-                const interFonts = getInterFonts();
-
-                if (!interFonts) {
-                    throw new Error('Inter font files not found');
-                }
-
-                // Load all the static Inter fonts with their respective weights
-                await Font.loadAsync(interFonts);
-
-                setFontState('loaded');
-            } catch (error) {
-                if (__DEV__) {
-                console.error('Error loading fonts:', error);
-                }
-                setFontState('error');
-            }
-        };
-
-        loadFonts();
-    }, []);
-
-    // Always render children immediately - fonts will load in background
-    // If fonts aren't loaded yet, the app will use system fonts as fallback
-    if (fontState === 'error' && __DEV__) {
-        console.warn('Fonts failed to load. Using system fonts instead.');
-    }
-
-    // Render children immediately, even while fonts are loading
-    // Fonts will apply when they're ready, otherwise system fonts are used
-    return <>{children}</>;
-};
+}) => <>{children}</>;
 
 /**
- * Setup fonts for applications consuming this package
- * This should be called by applications using your package
+ * No-op off native. Returns `true` because setup genuinely succeeded — there is
+ * simply nothing to do here — so callers do not log a spurious failure.
  */
-export const setupFonts = async () => {
-    try {
-        const interFonts = getInterFonts();
-
-        if (!interFonts) {
-            throw new Error('Inter font files not found');
-        }
-
-        if (Platform.OS === 'web') {
-            // For web platform, dynamically inject CSS to load the fonts
-            if (typeof document !== 'undefined') {
-                // Create a style element
-                const style = document.createElement('style');
-
-                // Define @font-face rules for each font weight
-                const fontFaceRules = `
-                    @font-face {
-                        font-family: 'Inter';
-                        src: url(${interFonts['Inter-Light']}) format('truetype');
-                        font-weight: 300;
-                        font-style: normal;
-                    }
-                    @font-face {
-                        font-family: 'Inter';
-                        src: url(${interFonts['Inter-Regular']}) format('truetype');
-                        font-weight: 400;
-                        font-style: normal;
-                    }
-                    @font-face {
-                        font-family: 'Inter';
-                        src: url(${interFonts['Inter-Medium']}) format('truetype');
-                        font-weight: 500;
-                        font-style: normal;
-                    }
-                    @font-face {
-                        font-family: 'Inter';
-                        src: url(${interFonts['Inter-SemiBold']}) format('truetype');
-                        font-weight: 600;
-                        font-style: normal;
-                    }
-                    @font-face {
-                        font-family: 'Inter';
-                        src: url(${interFonts['Inter-Bold']}) format('truetype');
-                        font-weight: 700;
-                        font-style: normal;
-                    }
-                    @font-face {
-                        font-family: 'Inter';
-                        src: url(${interFonts['Inter-ExtraBold']}) format('truetype');
-                        font-weight: 800;
-                        font-style: normal;
-                    }
-                    @font-face {
-                        font-family: 'Inter';
-                        src: url(${interFonts['Inter-Black']}) format('truetype');
-                        font-weight: 900;
-                        font-style: normal;
-                    }
-                `;
-
-                style.textContent = fontFaceRules;
-                document.head.appendChild(style);
-                if (__DEV__) {
-                console.info('All Inter web fonts have been dynamically loaded');
-                }
-            }
-        } else {
-            // Attempt to load the fonts anyway (this works if the consumer has linked the assets)
-            await Font.loadAsync(interFonts);
-        }
-
-        return true;
-    } catch (error: unknown) {
-        if (__DEV__) {
-        const errorMessage = error instanceof Error ? (error instanceof Error ? error.message : null) : String(error);
-        console.warn('Error setting up fonts:', errorMessage);
-        }
-        return false;
-    }
-};
+export const setupFonts = async (): Promise<boolean> => true;

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

@@ -5,7 +5,6 @@ import { Dialog, type DialogControlProps } from '@oxyhq/bloom';
 import { useTheme } from '@oxyhq/bloom/theme';
 import type { FileMetadata } from '@oxyhq/core';
 import { formatFileSize, getFileIcon } from '../../utils/fileManagement';
-import { fileManagementStyles } from './styles';
 
 interface FileDetailsModalProps {
     control: DialogControlProps;
@@ -56,53 +55,53 @@ export const FileDetailsModal: React.FC<FileDetailsModalProps> = ({
             label="File Details"
             actions={actions}
         >
-            <View className="bg-secondary border-border" style={fileManagementStyles.fileDetailCard}>
-                <View style={fileManagementStyles.fileDetailIcon}>
+            <View className="bg-secondary border-border p-[18px] rounded-[14px] border items-center">
+                <View className="mb-space-16">
                     <Ionicons
-                        name={getFileIcon(file.contentType) as React.ComponentProps<typeof Ionicons>['name']}
+                        name={getFileIcon(file.contentType)}
                         size={64}
                         color={colors.primary}
                     />
                 </View>
 
-                <Text className="text-text" style={fileManagementStyles.fileDetailName}>
+                <Text className="text-text text-[20px] font-bold text-center mb-space-24">
                     {file.filename}
                 </Text>
 
-                <View style={fileManagementStyles.fileDetailInfo}>
-                    <View style={fileManagementStyles.detailRow}>
-                        <Text className="text-text-secondary" style={fileManagementStyles.detailLabel}>
+                <View className="w-full mb-space-32">
+                    <View className="flex-row justify-between items-start mb-space-12 flex-wrap">
+                        <Text className="text-text-secondary text-[16px] font-medium flex-1 min-w-[100px]">
                             Size:
                         </Text>
-                        <Text className="text-text" style={fileManagementStyles.detailValue}>
+                        <Text className="text-text text-[16px] flex-[2] text-right">
                             {formatFileSize(file.length)}
                         </Text>
                     </View>
 
-                    <View style={fileManagementStyles.detailRow}>
-                        <Text className="text-text-secondary" style={fileManagementStyles.detailLabel}>
+                    <View className="flex-row justify-between items-start mb-space-12 flex-wrap">
+                        <Text className="text-text-secondary text-[16px] font-medium flex-1 min-w-[100px]">
                             Type:
                         </Text>
-                        <Text className="text-text" style={fileManagementStyles.detailValue}>
+                        <Text className="text-text text-[16px] flex-[2] text-right">
                             {file.contentType}
                         </Text>
                     </View>
 
-                    <View style={fileManagementStyles.detailRow}>
-                        <Text className="text-text-secondary" style={fileManagementStyles.detailLabel}>
+                    <View className="flex-row justify-between items-start mb-space-12 flex-wrap">
+                        <Text className="text-text-secondary text-[16px] font-medium flex-1 min-w-[100px]">
                             Uploaded:
                         </Text>
-                        <Text className="text-text" style={fileManagementStyles.detailValue}>
+                        <Text className="text-text text-[16px] flex-[2] text-right">
                             {new Date(file.uploadDate).toLocaleString()}
                         </Text>
                     </View>
 
                     {file.metadata?.description && (
-                        <View style={fileManagementStyles.detailRow}>
-                            <Text className="text-text-secondary" style={fileManagementStyles.detailLabel}>
+                        <View className="flex-row justify-between items-start mb-space-12 flex-wrap">
+                            <Text className="text-text-secondary text-[16px] font-medium flex-1 min-w-[100px]">
                                 Description:
                             </Text>
-                            <Text className="text-text" style={fileManagementStyles.detailValue}>
+                            <Text className="text-text text-[16px] flex-[2] text-right">
                                 {file.metadata.description}
                             </Text>
                         </View>

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

@@ -70,7 +70,7 @@ const UploadPreviewContent: React.FC<{
                             ) : (
                                 <View style={[fileManagementStyles.uploadPreviewIconContainer, { backgroundColor: colors.backgroundSecondary }]}>
                                     <Ionicons
-                                        name={getFileIcon(pendingFile.type) as React.ComponentProps<typeof Ionicons>['name']}
+                                        name={getFileIcon(pendingFile.type)}
                                         size={32}
                                         color={colors.primary}
                                     />

package/src/ui/components/fileManagement/styles.ts

@@ -382,43 +382,6 @@ export const fileManagementStyles = StyleSheet.create({
         flex: 1,
         padding: 16,
     },
-    fileDetailCard: {
-        padding: 18,
-        borderRadius: 14,
-        borderWidth: 1,
-        alignItems: 'center',
-    },
-    fileDetailIcon: {
-        marginBottom: 16,
-    },
-    fileDetailName: {
-        fontSize: 20,
-        fontWeight: 'bold',
-        textAlign: 'center',
-        marginBottom: 24,
-    },
-    fileDetailInfo: {
-        width: '100%',
-        marginBottom: 32,
-    },
-    detailRow: {
-        flexDirection: 'row',
-        justifyContent: 'space-between',
-        alignItems: 'flex-start',
-        marginBottom: 12,
-        flexWrap: 'wrap',
-    },
-    detailLabel: {
-        fontSize: 16,
-        fontWeight: '500',
-        flex: 1,
-        minWidth: 100,
-    },
-    detailValue: {
-        fontSize: 16,
-        flex: 2,
-        textAlign: 'right',
-    },
     modalActions: {
         flexDirection: 'row',
         gap: 12,
@@ -858,191 +821,3 @@ export const fileManagementStyles = StyleSheet.create({
         borderRadius: 8,
     },
 });
-
-/**
- * Styles for the dedicated photo picker view used when `selectMode + image-only`
- * is active (e.g. the avatar picker context). This view is intentionally
- * flagship-grade: black backdrop, translucent header, edge-to-edge grid.
- *
- * Kept in a separate StyleSheet so the rest of `fileManagementStyles` does not
- * carry a black-background bias when used elsewhere.
- */
-export const photoPickerStyles = StyleSheet.create({
-    root: {
-        flex: 1,
-        backgroundColor: '#000000',
-    },
-    headerSpacer: {
-        // Reserved for the absolute header so content does not sit underneath it.
-        backgroundColor: '#000000',
-    },
-    header: {
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        right: 0,
-        backgroundColor: 'rgba(0,0,0,0.92)',
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        paddingHorizontal: 12,
-        zIndex: 30,
-    },
-    headerRow: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        width: '100%',
-        // Material 3 top app bar height — leaves a generous tap target for
-        // the Cancel / Upload pills without crowding the title.
-        height: 56,
-    },
-    headerSide: {
-        flexBasis: 0,
-        flexGrow: 1,
-        flexDirection: 'row',
-        alignItems: 'center',
-    },
-    headerSideRight: {
-        justifyContent: 'flex-end',
-    },
-    headerSideLeft: {
-        justifyContent: 'flex-start',
-    },
-    headerTitle: {
-        fontSize: 17,
-        fontWeight: '600',
-        color: '#FFFFFF',
-        letterSpacing: -0.2,
-        textAlign: 'center',
-    },
-    headerCancel: {
-        paddingHorizontal: 6,
-        paddingVertical: 8,
-        minHeight: 36,
-        minWidth: 44,
-        justifyContent: 'center',
-    },
-    headerCancelText: {
-        fontSize: 17,
-        fontWeight: '500',
-        color: '#FFFFFF',
-    },
-    headerPrimaryPill: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 6,
-        paddingHorizontal: 14,
-        paddingVertical: 8,
-        borderRadius: 999,
-        minHeight: 36,
-    },
-    headerPrimaryPillIconOnly: {
-        paddingHorizontal: 8,
-        width: 36,
-        justifyContent: 'center',
-    },
-    headerPrimaryText: {
-        color: '#FFFFFF',
-        fontSize: 15,
-        fontWeight: '600',
-    },
-    headerProgressBarTrack: {
-        position: 'absolute',
-        left: 0,
-        right: 0,
-        bottom: 0,
-        height: 2,
-        backgroundColor: 'rgba(255,255,255,0.12)',
-    },
-    headerProgressBarFill: {
-        height: '100%',
-    },
-    grid: {
-        flex: 1,
-    },
-    gridContent: {
-        // Top inset is set dynamically (header height + safe area).
-        paddingBottom: 24,
-    },
-    cellWrapper: {
-        position: 'relative',
-        // width/height set dynamically per device
-    },
-    cellInner: {
-        flex: 1,
-        borderRadius: 8,
-        overflow: 'hidden',
-        backgroundColor: '#111111',
-    },
-    cellImage: {
-        width: '100%',
-        height: '100%',
-    },
-    cellRing: {
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0,
-        borderRadius: 8,
-        borderWidth: 3,
-    },
-    cellDim: {
-        opacity: 0.6,
-    },
-    cellBadge: {
-        position: 'absolute',
-        top: 6,
-        right: 6,
-        minWidth: 22,
-        height: 22,
-        paddingHorizontal: 6,
-        borderRadius: 11,
-        alignItems: 'center',
-        justifyContent: 'center',
-    },
-    cellBadgeText: {
-        color: '#FFFFFF',
-        fontSize: 12,
-        fontWeight: '700',
-        lineHeight: 14,
-    },
-    empty: {
-        flex: 1,
-        alignItems: 'center',
-        justifyContent: 'center',
-        paddingHorizontal: 32,
-    },
-    emptyIconWrap: {
-        opacity: 0.3,
-        marginBottom: 16,
-    },
-    emptyTitle: {
-        fontSize: 17,
-        fontWeight: '600',
-        textAlign: 'center',
-        marginBottom: 6,
-    },
-    emptySubtitle: {
-        fontSize: 14,
-        fontWeight: '400',
-        textAlign: 'center',
-        opacity: 0.7,
-        marginBottom: 24,
-    },
-    emptyCta: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 8,
-        paddingHorizontal: 22,
-        paddingVertical: 12,
-        borderRadius: 999,
-    },
-    emptyCtaText: {
-        color: '#FFFFFF',
-        fontSize: 15,
-        fontWeight: '600',
-    },
-});
-

package/src/ui/context/hooks/useAuthOperations.ts

@@ -170,8 +170,11 @@ export const useAuthOperations = ({
         logger?.('Failed to register sign-in into device session set', registrationError);
       }
 
-      // Get full user data
-      fullUser = await oxyServices.getUserBySession(sessionResponse.sessionId);
+      // Hydrate the full user from the bearer (`GET /users/me`) — `verifyChallenge`
+      // has already planted the access token for this session, so the bearer IS
+      // the session identity. Avoids a second, session-id-keyed source of truth
+      // (`GET /session/user/:sessionId`) that can disagree with the bearer.
+      fullUser = await oxyServices.getCurrentUser();
 
       // Fetch device sessions
       let allDeviceSessions: ClientSession[] = [];

package/src/ui/context/useOxyAccountGraph.ts

@@ -5,6 +5,7 @@ import { logger as loggerUtil } from '@oxyhq/core';
 import { useAuthStore } from '../stores/authStore';
 import { isUnauthorizedStatus } from './oxyContextHelpers';
 import { resetSessionScopedStores } from '../stores/resetSessionScopedStores';
+import { ASSET_DOWNLOAD_URLS_QUERY_KEY } from '../hooks/useResolvedFileUrls';
 import type { CommitInput } from './oxyContextTypes';
 
 interface UseOxyAccountGraphParams {
@@ -63,6 +64,10 @@ export function useOxyAccountGraph({
 
   const runPostAccountSwitchSideEffects = useCallback(async (): Promise<void> => {
     resetSessionScopedStores();
+    // Scoped media tokens are per-viewer — drop any cached URLs immediately so
+    // `keepPreviousData`-style placeholders cannot flash the prior account's
+    // private thumbnails while the new bearer mint lands.
+    queryClient.removeQueries({ queryKey: [ASSET_DOWNLOAD_URLS_QUERY_KEY] });
     await refreshAccounts();
     queryClient.invalidateQueries();
   }, [refreshAccounts, queryClient]);

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

@@ -268,6 +268,35 @@ describe('upsertCachedUser — keys & viewer scoping', () => {
     expect(readByUsername(qc, 'alice', 'viewerB')).toBeUndefined();
   });
 
+  it('never stores viewer-relative relationship on the viewer-independent by-id key', () => {
+    const qc = makeClient();
+    upsertCachedUser(
+      qc,
+      { id: 'u1', username: 'alice', relationship: { isFollowing: true, followsYou: true } },
+      'viewerA',
+    );
+
+    expect(readById(qc, 'u1')?.relationship).toBeUndefined();
+    expect(readByUsername(qc, 'alice', 'viewerA')?.relationship).toEqual({
+      isFollowing: true,
+      followsYou: true,
+    });
+  });
+
+  it('strips a stale relationship from an existing by-id entry on merge', () => {
+    const qc = makeClient();
+    qc.setQueryData(queryKeys.users.detail('u1'), {
+      id: 'u1',
+      username: 'alice',
+      relationship: { isFollowing: true, followsYou: true },
+    });
+
+    upsertCachedUser(qc, { id: 'u1', username: 'alice', avatar: 'file_a' }, 'viewerA');
+
+    expect(readById(qc, 'u1')?.relationship).toBeUndefined();
+    expect(readById(qc, 'u1')?.avatar).toBe('file_a');
+  });
+
   it('is case-insensitive on username (byUsername normalization)', () => {
     const qc = makeClient();
     upsertCachedUser(qc, { id: 'u1', username: 'AlIcE' }, 'v1');