@oxyhq/services 6.9.46 → 6.10.2

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

@@ -1,9 +1,7 @@
 import type React from 'react';
 import { View, Text } from 'react-native';
 import { Ionicons } from '@expo/vector-icons';
-import * as Dialog from '@oxyhq/bloom/dialog';
-import type { DialogControlProps } from '@oxyhq/bloom/dialog';
-import * as Prompt from '@oxyhq/bloom/prompt';
+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';
@@ -30,79 +28,87 @@ export const FileDetailsModal: React.FC<FileDetailsModalProps> = ({
 
     if (!file) return null;
 
+    const actions = isOwner
+        ? [
+              {
+                  label: 'Download',
+                  onPress: () => onDownload(file.id, file.filename),
+              },
+              {
+                  label: 'Delete',
+                  color: 'destructive' as const,
+                  onPress: () => onDelete(file.id, file.filename),
+              },
+              { label: 'Cancel', color: 'cancel' as const },
+          ]
+        : [
+              {
+                  label: 'Download',
+                  onPress: () => onDownload(file.id, file.filename),
+              },
+              { label: 'Cancel', color: 'cancel' as const },
+          ];
+
     return (
-        <Dialog.Outer control={control} onClose={onClose}>
-            <Dialog.Handle />
-            <Dialog.ScrollableInner label="File Details">
-                <View className="bg-secondary border-border" style={fileManagementStyles.fileDetailCard}>
-                    <View style={fileManagementStyles.fileDetailIcon}>
-                        <Ionicons
-                            name={getFileIcon(file.contentType) as React.ComponentProps<typeof Ionicons>['name']}
-                            size={64}
-                            color={colors.primary}
-                        />
-                    </View>
+        <Dialog
+            control={control}
+            onClose={onClose}
+            label="File Details"
+            actions={actions}
+        >
+            <View className="bg-secondary border-border" style={fileManagementStyles.fileDetailCard}>
+                <View style={fileManagementStyles.fileDetailIcon}>
+                    <Ionicons
+                        name={getFileIcon(file.contentType) as React.ComponentProps<typeof Ionicons>['name']}
+                        size={64}
+                        color={colors.primary}
+                    />
+                </View>
 
-                    <Text className="text-foreground" style={fileManagementStyles.fileDetailName}>
-                        {file.filename}
-                    </Text>
+                <Text className="text-foreground" style={fileManagementStyles.fileDetailName}>
+                    {file.filename}
+                </Text>
 
-                    <View style={fileManagementStyles.fileDetailInfo}>
-                        <View style={fileManagementStyles.detailRow}>
-                            <Text className="text-muted-foreground" style={fileManagementStyles.detailLabel}>
-                                Size:
-                            </Text>
-                            <Text className="text-foreground" style={fileManagementStyles.detailValue}>
-                                {formatFileSize(file.length)}
-                            </Text>
-                        </View>
+                <View style={fileManagementStyles.fileDetailInfo}>
+                    <View style={fileManagementStyles.detailRow}>
+                        <Text className="text-muted-foreground" style={fileManagementStyles.detailLabel}>
+                            Size:
+                        </Text>
+                        <Text className="text-foreground" style={fileManagementStyles.detailValue}>
+                            {formatFileSize(file.length)}
+                        </Text>
+                    </View>
 
-                        <View style={fileManagementStyles.detailRow}>
-                            <Text className="text-muted-foreground" style={fileManagementStyles.detailLabel}>
-                                Type:
-                            </Text>
-                            <Text className="text-foreground" style={fileManagementStyles.detailValue}>
-                                {file.contentType}
-                            </Text>
-                        </View>
+                    <View style={fileManagementStyles.detailRow}>
+                        <Text className="text-muted-foreground" style={fileManagementStyles.detailLabel}>
+                            Type:
+                        </Text>
+                        <Text className="text-foreground" style={fileManagementStyles.detailValue}>
+                            {file.contentType}
+                        </Text>
+                    </View>
 
+                    <View style={fileManagementStyles.detailRow}>
+                        <Text className="text-muted-foreground" style={fileManagementStyles.detailLabel}>
+                            Uploaded:
+                        </Text>
+                        <Text className="text-foreground" style={fileManagementStyles.detailValue}>
+                            {new Date(file.uploadDate).toLocaleString()}
+                        </Text>
+                    </View>
+
+                    {file.metadata?.description && (
                         <View style={fileManagementStyles.detailRow}>
                             <Text className="text-muted-foreground" style={fileManagementStyles.detailLabel}>
-                                Uploaded:
+                                Description:
                             </Text>
                             <Text className="text-foreground" style={fileManagementStyles.detailValue}>
-                                {new Date(file.uploadDate).toLocaleString()}
+                                {file.metadata.description}
                             </Text>
                         </View>
-
-                        {file.metadata?.description && (
-                            <View style={fileManagementStyles.detailRow}>
-                                <Text className="text-muted-foreground" style={fileManagementStyles.detailLabel}>
-                                    Description:
-                                </Text>
-                                <Text className="text-foreground" style={fileManagementStyles.detailValue}>
-                                    {file.metadata.description}
-                                </Text>
-                            </View>
-                        )}
-                    </View>
-
-                    <Prompt.Actions>
-                        <Prompt.Action
-                            onPress={() => onDownload(file.id, file.filename)}
-                            cta="Download"
-                            color="primary"
-                        />
-                        {isOwner && (
-                            <Prompt.Action
-                                onPress={() => onDelete(file.id, file.filename)}
-                                cta="Delete"
-                                color="negative"
-                            />
-                        )}
-                    </Prompt.Actions>
+                    )}
                 </View>
-            </Dialog.ScrollableInner>
-        </Dialog.Outer>
+            </View>
+        </Dialog>
     );
 };

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

@@ -2,7 +2,6 @@ import type React from 'react';
 import { useMemo, useState, useEffect } from 'react';
 import { View, Text, TouchableOpacity, ScrollView, ActivityIndicator, Image } from 'react-native';
 import { Image as ExpoImage } from 'expo-image';
-// @ts-ignore - MaterialCommunityIcons is available at runtime
 import { MaterialCommunityIcons } from '@expo/vector-icons';
 import { useTheme } from '@oxyhq/bloom/theme';
 import type { FileMetadata } from '@oxyhq/core';
@@ -21,8 +20,6 @@ interface FileViewerProps {
     onDownload: (fileId: string, filename: string) => void;
     onDelete: (fileId: string, filename: string) => void;
     isOwner: boolean;
-    /** @deprecated No longer used. Colors are sourced from useTheme() internally. */
-    themeStyles?: unknown;
 }
 
 export const FileViewer: React.FC<FileViewerProps> = ({
@@ -173,7 +170,7 @@ export const FileViewer: React.FC<FileViewerProps> = ({
                         transition={120}
                         cachePolicy="memory-disk"
                     />
-                    <View style={[fileManagementStyles.backgroundOverlay, { backgroundColor: isDark ? 'rgba(0, 0, 0, 0.6)' : 'rgba(255, 255, 255, 0.85)' }]} />
+                    <View style={[fileManagementStyles.backgroundOverlay, { backgroundColor: colors.overlay }]} />
                 </>
             )}
 
@@ -269,7 +266,7 @@ export const FileViewer: React.FC<FileViewerProps> = ({
                             style={fileManagementStyles.downloadButtonLarge}
                             onPress={() => onDownload(file.id, file.filename)}
                         >
-                            <MaterialCommunityIcons name="download" size={18} color="#FFFFFF" />
+                            <MaterialCommunityIcons name="download" size={18} color={colors.negativeForeground} />
                             <Text style={fileManagementStyles.downloadButtonText}>Download PDF</Text>
                         </TouchableOpacity>
                     </View>
@@ -292,7 +289,7 @@ export const FileViewer: React.FC<FileViewerProps> = ({
                             style={fileManagementStyles.downloadButtonLarge}
                             onPress={() => onDownload(file.id, file.filename)}
                         >
-                            <MaterialCommunityIcons name="download" size={18} color="#FFFFFF" />
+                            <MaterialCommunityIcons name="download" size={18} color={colors.negativeForeground} />
                             <Text style={fileManagementStyles.downloadButtonText}>Download Video</Text>
                         </TouchableOpacity>
                     </View>
@@ -315,7 +312,7 @@ export const FileViewer: React.FC<FileViewerProps> = ({
                             style={fileManagementStyles.downloadButtonLarge}
                             onPress={() => onDownload(file.id, file.filename)}
                         >
-                            <MaterialCommunityIcons name="download" size={18} color="#FFFFFF" />
+                            <MaterialCommunityIcons name="download" size={18} color={colors.negativeForeground} />
                             <Text style={fileManagementStyles.downloadButtonText}>Download Audio</Text>
                         </TouchableOpacity>
                     </View>
@@ -338,7 +335,7 @@ export const FileViewer: React.FC<FileViewerProps> = ({
                             style={fileManagementStyles.downloadButtonLarge}
                             onPress={() => onDownload(file.id, file.filename)}
                         >
-                            <MaterialCommunityIcons name="download" size={18} color="#FFFFFF" />
+                            <MaterialCommunityIcons name="download" size={18} color={colors.negativeForeground} />
                             <Text style={fileManagementStyles.downloadButtonText}>Download File</Text>
                         </TouchableOpacity>
                     </View>
@@ -389,7 +386,7 @@ export const FileViewer: React.FC<FileViewerProps> = ({
                                         onDelete(file.id, file.filename);
                                     }}
                                 >
-                                    <MaterialCommunityIcons name="delete" size={16} color="#FFFFFF" />
+                                    <MaterialCommunityIcons name="delete" size={16} color={colors.negativeForeground} />
                                     <Text style={fileManagementStyles.fileDetailsActionText}>Delete</Text>
                                 </TouchableOpacity>
                             </View>

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

@@ -2,15 +2,14 @@ import type React from 'react';
 import { View, Text, TouchableOpacity, ScrollView } from 'react-native';
 import { Image as ExpoImage } from 'expo-image';
 import { Ionicons } from '@expo/vector-icons';
-import * as Dialog from '@oxyhq/bloom/dialog';
-import type { DialogControlProps } from '@oxyhq/bloom/dialog';
-import * as Prompt from '@oxyhq/bloom/prompt';
+import { Dialog, type DialogControlProps } from '@oxyhq/bloom';
 import { useTheme } from '@oxyhq/bloom/theme';
+import type { RNFileDescriptor } from '@oxyhq/core';
 import { formatFileSize, getFileIcon } from '../../utils/fileManagement';
 import { fileManagementStyles } from './styles';
 
 interface PendingFile {
-    file: File | Blob;
+    file: File | Blob | RNFileDescriptor;
     preview?: string;
     size: number;
     name: string;
@@ -124,7 +123,7 @@ const UploadPreviewContent: React.FC<{
                             style={fileManagementStyles.uploadPreviewConfirmButton}
                             onPress={onConfirm}
                         >
-                            <Ionicons name="cloud-upload" size={20} color="#FFFFFF" />
+                            <Ionicons name="cloud-upload" size={20} color={colors.negativeForeground} />
                             <Text style={fileManagementStyles.uploadPreviewConfirmText}>Upload</Text>
                         </TouchableOpacity>
                     </View>
@@ -158,25 +157,22 @@ export const UploadPreview: React.FC<UploadPreviewProps> = ({
     if (!control) return null;
 
     return (
-        <Dialog.Outer control={control} onClose={onCancel}>
-            <Dialog.Handle />
-            <Dialog.ScrollableInner label="Review Files">
-                <UploadPreviewContent
-                    pendingFiles={pendingFiles}
-                    onConfirm={onConfirm}
-                    onCancel={onCancel}
-                    onRemoveFile={onRemoveFile}
-                    showActions={false}
-                />
-                <Prompt.Actions>
-                    <Prompt.Action
-                        onPress={onConfirm}
-                        cta="Upload"
-                        color="primary"
-                    />
-                    <Prompt.Cancel cta="Cancel" />
-                </Prompt.Actions>
-            </Dialog.ScrollableInner>
-        </Dialog.Outer>
+        <Dialog
+            control={control}
+            onClose={onCancel}
+            label="Review Files"
+            actions={[
+                { label: 'Upload', onPress: onConfirm },
+                { label: 'Cancel', color: 'cancel' },
+            ]}
+        >
+            <UploadPreviewContent
+                pendingFiles={pendingFiles}
+                onConfirm={onConfirm}
+                onCancel={onCancel}
+                onRemoveFile={onRemoveFile}
+                showActions={false}
+            />
+        </Dialog>
     );
 };

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

@@ -1,5 +1,4 @@
 import { StyleSheet } from 'react-native';
-import { fontFamilies } from '../../styles/fonts';
 
 export const fileManagementStyles = StyleSheet.create({
     container: {
@@ -50,14 +49,12 @@ export const fileManagementStyles = StyleSheet.create({
     headerTitle: {
         fontSize: 22,
         fontWeight: '700',
-        fontFamily: fontFamilies.interBold,
         letterSpacing: -0.5,
         lineHeight: 28,
     },
     headerSubtitle: {
         fontSize: 13,
         fontWeight: '500',
-        fontFamily: fontFamilies.interMedium,
         marginTop: 2,
         letterSpacing: 0.2,
     },
@@ -68,6 +65,25 @@ export const fileManagementStyles = StyleSheet.create({
         alignItems: 'center',
         justifyContent: 'center',
     },
+    /**
+     * Expanded variant of the upload button shown in image-only picker mode,
+     * where surfacing "Upload" prominently helps users when they have no files.
+     */
+    uploadButtonExtended: {
+        width: 'auto',
+        minWidth: 44,
+        paddingHorizontal: 14,
+    },
+    uploadButtonContent: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 6,
+    },
+    uploadButtonLabel: {
+        color: '#FFFFFF',
+        fontSize: 14,
+        fontWeight: '600',
+    },
     uploadProgress: {
         alignItems: 'center',
         justifyContent: 'center',
@@ -133,7 +149,6 @@ export const fileManagementStyles = StyleSheet.create({
     searchInput: {
         flex: 1,
         fontSize: 16,
-        fontFamily: fontFamilies.inter,
         lineHeight: 20,
     },
     searchClearButton: {
@@ -159,14 +174,12 @@ export const fileManagementStyles = StyleSheet.create({
     statValue: {
         fontSize: 20,
         fontWeight: '800',
-        fontFamily: fontFamilies.interBold,
         letterSpacing: -0.5,
         lineHeight: 24,
     },
     statLabel: {
         fontSize: 12,
         fontWeight: '500',
-        fontFamily: fontFamilies.interMedium,
         marginTop: 2,
         letterSpacing: 0.2,
     },
@@ -322,7 +335,6 @@ export const fileManagementStyles = StyleSheet.create({
     emptyStateTitle: {
         fontSize: 24,
         fontWeight: 'bold',
-        fontFamily: fontFamilies.interBold,
         marginTop: 16,
         marginBottom: 8,
     },
@@ -362,7 +374,6 @@ export const fileManagementStyles = StyleSheet.create({
     modalTitle: {
         fontSize: 18,
         fontWeight: '600',
-        fontFamily: fontFamilies.interSemiBold,
     },
     modalPlaceholder: {
         width: 40,
@@ -383,7 +394,6 @@ export const fileManagementStyles = StyleSheet.create({
     fileDetailName: {
         fontSize: 20,
         fontWeight: 'bold',
-        fontFamily: fontFamilies.interBold,
         textAlign: 'center',
         marginBottom: 24,
     },
@@ -442,7 +452,6 @@ export const fileManagementStyles = StyleSheet.create({
     uploadPreviewTitle: {
         fontSize: 20,
         fontWeight: '700',
-        fontFamily: fontFamilies.interBold,
     },
     uploadPreviewList: {
         flex: 1,
@@ -476,12 +485,10 @@ export const fileManagementStyles = StyleSheet.create({
     uploadPreviewName: {
         fontSize: 16,
         fontWeight: '600',
-        fontFamily: fontFamilies.interSemiBold,
         marginBottom: 4,
     },
     uploadPreviewMeta: {
         fontSize: 13,
-        fontFamily: fontFamilies.inter,
     },
     uploadPreviewRemove: {
         padding: 4,
@@ -498,7 +505,6 @@ export const fileManagementStyles = StyleSheet.create({
     uploadPreviewStatsText: {
         fontSize: 15,
         fontWeight: '600',
-        fontFamily: fontFamilies.interSemiBold,
     },
     uploadPreviewActions: {
         flexDirection: 'row',
@@ -515,7 +521,6 @@ export const fileManagementStyles = StyleSheet.create({
     uploadPreviewCancelText: {
         fontSize: 16,
         fontWeight: '600',
-        fontFamily: fontFamilies.interSemiBold,
     },
     uploadPreviewConfirmButton: {
         flex: 2,
@@ -530,7 +535,6 @@ export const fileManagementStyles = StyleSheet.create({
         color: '#FFFFFF',
         fontSize: 16,
         fontWeight: '600',
-        fontFamily: fontFamilies.interSemiBold,
     },
     fileViewerContainer: {
         flex: 1,
@@ -570,7 +574,6 @@ export const fileManagementStyles = StyleSheet.create({
     fileViewerTitle: {
         fontSize: 18,
         fontWeight: '600',
-        fontFamily: fontFamilies.interSemiBold,
         marginBottom: 2,
     },
     fileViewerSubtitle: {
@@ -661,7 +664,6 @@ export const fileManagementStyles = StyleSheet.create({
     unsupportedFileTitle: {
         fontSize: 24,
         fontWeight: 'bold',
-        fontFamily: fontFamilies.interBold,
         marginTop: 16,
         marginBottom: 8,
         textAlign: 'center',
@@ -719,7 +721,6 @@ export const fileManagementStyles = StyleSheet.create({
     fileDetailsSectionTitle: {
         fontSize: 18,
         fontWeight: '600',
-        fontFamily: fontFamilies.interSemiBold,
         flex: 1,
     },
     fileDetailsSectionHeader: {
@@ -858,3 +859,190 @@ export const fileManagementStyles = StyleSheet.create({
     },
 });
 
+/**
+ * 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',
+    },
+});
+