@oxyhq/services 22.6.1 → 22.6.3

package/src/ui/screens/fileManagement/FileListSection.tsx

@@ -11,7 +11,6 @@ import { Ionicons } from '@expo/vector-icons';
 import type { FileMetadata } from '@oxyhq/core';
 import { SettingsListGroup, SettingsListItem } from '@oxyhq/bloom/settings-list';
 import type { useTheme } from '@oxyhq/bloom/theme';
-import { fileManagementStyles } from '../../components/fileManagement/styles';
 
 type ThemeColors = ReturnType<typeof useTheme>['colors'];
 
@@ -63,8 +62,8 @@ const FileListSection: React.FC<FileListSectionProps> = ({
     return (
         <ScrollView
             ref={scrollViewRef}
-            style={fileManagementStyles.scrollView}
-            contentContainerStyle={fileManagementStyles.scrollContainer}
+            className="flex-1"
+            contentContainerClassName="px-space-12 pt-0 pb-space-12"
             refreshControl={
                 <RefreshControl
                     refreshing={refreshing}
@@ -82,18 +81,19 @@ const FileListSection: React.FC<FileListSectionProps> = ({
             scrollEventThrottle={250}
         >
             {filteredFiles.length === 0 && searchQuery.length > 0 ? (
-                <View style={fileManagementStyles.emptyState}>
+                <View className="items-center py-10 px-space-24">
                     <Ionicons name="search" size={64} color={colors.textTertiary} />
-                    <Text style={[fileManagementStyles.emptyStateTitle, { color: colors.text }]}>{t('fileManagement.noResults.title')}</Text>
-                    <Text style={[fileManagementStyles.emptyStateDescription, { color: colors.textSecondary }]}>
+                    <Text className="text-[24px] font-bold mt-space-16 mb-space-8" style={{ color: colors.text }}>{t('fileManagement.noResults.title')}</Text>
+                    <Text className="text-[16px] text-center leading-[24px] mb-space-32" style={{ color: colors.textSecondary }}>
                         {t('fileManagement.noResults.description', { query: searchQuery })}
                     </Text>
                     <TouchableOpacity
-                        style={[fileManagementStyles.emptyStateButton, { backgroundColor: colors.primary }]}
+                        className="flex-row items-center px-space-24 py-space-12 rounded-[24px] gap-space-8"
+                        style={{ backgroundColor: colors.primary }}
                         onPress={onClearSearch}
                     >
                         <Ionicons name="refresh" size={20} color="#FFFFFF" />
-                        <Text style={fileManagementStyles.emptyStateButtonText}>{t('fileManagement.clearSearch')}</Text>
+                        <Text className="text-white text-[16px] font-semibold">{t('fileManagement.clearSearch')}</Text>
                     </TouchableOpacity>
                 </View>
             ) : filteredFiles.length === 0 ? renderEmptyState() : (
@@ -112,9 +112,9 @@ const FileListSection: React.FC<FileListSectionProps> = ({
                         ))}
                     </SettingsListGroup>
                     {paging.loadingMore && (
-                        <View style={fileManagementStyles.loadingMoreBar}>
+                        <View className="flex-row items-center justify-center py-space-12 gap-space-8">
                             <ActivityIndicator size="small" color={colors.primary} />
-                            <Text style={[fileManagementStyles.loadingMoreText, { color: colors.text }]}>{t('fileManagement.loadingMore')}</Text>
+                            <Text className="text-[13px] font-medium" style={{ color: colors.text }}>{t('fileManagement.loadingMore')}</Text>
                         </View>
                     )}
                 </>

package/src/ui/screens/fileManagement/PhotoPickerSection.tsx

@@ -7,6 +7,7 @@ import {
     RefreshControl,
     FlatList,
     Platform,
+    useWindowDimensions,
     type LayoutChangeEvent,
 } from 'react-native';
 import { Image as ExpoImage } from 'expo-image';
@@ -314,20 +315,27 @@ const PhotoPickerView: React.FC<PhotoPickerViewProps> = ({
     onConfirm,
     t,
 }) => {
-    // Measure the grid CONTAINER (the bottom-sheet content width), NOT the
-    // device screen. On wide viewports the sheet is centered/narrower than the
-    // screen, so screen-width tile math overflows. The measured wrapper carries
-    // ONLY a `style` (no `className`) because RN-Web does not fire `onLayout`
-    // for `className`'d nodes.
+    // Grid sizing width. We PREFER the measured grid-container width (the
+    // bottom-sheet content width) so tiles size to the sheet, not the device
+    // screen — on wide viewports the sheet is centered/narrower than the screen.
+    // But we must NEVER gate the whole grid on that measurement: `onLayout` is
+    // unreliable on web (react-native-css can suppress it), and a grid that only
+    // renders after a measurement can stay blank forever. So we fall back to the
+    // window width until a real measurement arrives — the grid ALWAYS renders,
+    // then snaps to the sheet width once `onLayout` reports it. The measured
+    // wrapper carries ONLY a `style` (no `className`) to maximise the chance
+    // `onLayout` fires on web.
+    const { width: windowWidth } = useWindowDimensions();
     const [gridWidth, setGridWidth] = useState(0);
     const onRootLayout = useCallback((e: LayoutChangeEvent) => {
         const w = Math.round(e.nativeEvent.layout.width);
         setGridWidth((prev) => (prev === w ? prev : w));
     }, []);
 
+    const effectiveWidth = gridWidth > 0 ? gridWidth : windowWidth;
     const { columns, cellSize, gutter } = useMemo(
-        () => computePhotoGridLayout(gridWidth),
-        [gridWidth],
+        () => computePhotoGridLayout(effectiveWidth),
+        [effectiveWidth],
     );
 
     // Map selectedIds → 1-based selection order for the badge. We freeze a
@@ -345,13 +353,9 @@ const PhotoPickerView: React.FC<PhotoPickerViewProps> = ({
     const hasAnySelection = selectedIds.size > 0;
 
     // Compact icon-only upload pill on narrow sheets; full pill otherwise.
-    // Defaults to the full label until the sheet width has been measured.
-    const showUploadLabel = gridWidth === 0 || gridWidth >= 360;
+    const showUploadLabel = effectiveWidth >= 360;
 
     const isEmpty = photos.length === 0;
-    // Only mount the grid once a real container width is known, so columns /
-    // tile size derive from the sheet width instead of a placeholder.
-    const gridReady = gridWidth > 0 && cellSize > 0;
     const atSelectionLimit =
         multiSelect && maxSelection != null && selectedIds.size >= maxSelection;
 
@@ -494,13 +498,6 @@ const PhotoPickerView: React.FC<PhotoPickerViewProps> = ({
                             </TouchableOpacity>
                         )}
                     </View>
-                ) : !gridReady ? (
-                    <View className="flex-1 items-center justify-center pt-[88px]">
-                        <ActivityIndicator size="large" color="#FFFFFF" />
-                        <Text className="text-white text-[14px] mt-space-12 opacity-70">
-                            {t('fileManagement.loadingPhotoLayout')}
-                        </Text>
-                    </View>
                 ) : (
                         <FlatList
                             key={`cols-${columns}`}

package/src/ui/screens/fileManagement/UploadBar.tsx

@@ -1,7 +1,6 @@
 import type React from 'react';
-import { View, Text, ActivityIndicator } from 'react-native';
+import { View, Text, ActivityIndicator, StyleSheet } from 'react-native';
 import { Ionicons } from '@expo/vector-icons';
-import { fileManagementStyles } from '../../components/fileManagement/styles';
 
 export interface UploadBarProps {
     /** Aggregate upload progress, or null when indeterminate. */
@@ -13,29 +12,45 @@ export interface UploadBarProps {
     t: (key: string, vars?: Record<string, string | number>) => string;
 }
 
+// The banner drop-shadow has no Bloom/Tailwind token equivalent, so it stays an
+// inline style (genuinely-required exception).
+const shadowStyle = StyleSheet.create({
+    banner: {
+        shadowColor: '#000',
+        shadowOpacity: 0.1,
+        shadowRadius: 6,
+        shadowOffset: { width: 0, height: 2 },
+        elevation: 2,
+    },
+});
+
 /**
  * The non-blocking "Uploading…" banner overlay shown at the bottom of the file
  * manager while uploads are in flight. Purely presentational — the orchestrator
  * gates rendering on `!selectMode && uploading`.
  */
 const UploadBar: React.FC<UploadBarProps> = ({ uploadProgress, isDark, colors, t }) => (
-    <View style={[fileManagementStyles.uploadBannerContainer, { pointerEvents: 'none' }]}>
-        <View style={[fileManagementStyles.uploadBanner, { backgroundColor: isDark ? '#222831EE' : '#FFFFFFEE', borderColor: colors.border }]}>
+    <View pointerEvents="none" className="absolute top-[72px] left-0 right-0 items-center z-50">
+        <View
+            className="flex-row items-center px-3.5 py-2.5 rounded-[24px] gap-2.5 border min-w-[200px]"
+            style={[shadowStyle.banner, { backgroundColor: isDark ? '#222831EE' : '#FFFFFFEE', borderColor: colors.border }]}
+        >
             <Ionicons name="cloud-upload" size={18} color={colors.primary} />
-            <View style={fileManagementStyles.uploadBannerContent}>
-                <Text style={[fileManagementStyles.uploadBannerText, { color: colors.text }]}>
+            <View className="flex-1 gap-1.5">
+                <Text className="text-[13px] font-medium" style={{ color: colors.text }}>
                     {t('fileManagement.uploading')}{uploadProgress ? ` ${uploadProgress.current}/${uploadProgress.total}` : '...'}
                 </Text>
                 {uploadProgress && uploadProgress.total > 0 && (
-                    <View style={[fileManagementStyles.uploadProgressBarContainer, { backgroundColor: isDark ? 'rgba(255,255,255,0.1)' : 'rgba(0,0,0,0.1)' }]}>
+                    <View
+                        className="h-[3px] rounded-[2px] overflow-hidden"
+                        style={{ backgroundColor: isDark ? 'rgba(255,255,255,0.1)' : 'rgba(0,0,0,0.1)' }}
+                    >
                         <View
-                            style={[
-                                fileManagementStyles.uploadProgressBar,
-                                {
-                                    width: `${(uploadProgress.current / uploadProgress.total) * 100}%`,
-                                    backgroundColor: colors.primary
-                                }
-                            ]}
+                            className="h-full rounded-[2px]"
+                            style={{
+                                width: `${(uploadProgress.current / uploadProgress.total) * 100}%`,
+                                backgroundColor: colors.primary,
+                            }}
                         />
                     </View>
                 )}

package/src/ui/server.ts

@@ -21,7 +21,7 @@ export const LogoText = noopComponent;
 export const FollowButton = noopComponent;
 export const OxyPayButton = noopComponent;
 export const FontLoader = noopComponent;
-export const setupFonts = () => {};
+export const setupFonts = async (): Promise<boolean> => true;
 
 // Context
 export const useOxy = noopHook;