@oxyhq/services 6.9.45 → 6.10.1

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,14 +2,13 @@ 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';
 import { formatFileSize } from '../../utils/fileManagement';
 import { fileManagementStyles } from './styles';
 import { Colors } from '../../constants/theme';
-import { GroupedSection } from '../GroupedSection';
+import { SettingsListGroup, SettingsListItem } from '@oxyhq/bloom/settings-list';
 
 interface FileViewerProps {
     file: FileMetadata;
@@ -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> = ({
@@ -105,53 +102,53 @@ export const FileViewer: React.FC<FileViewerProps> = ({
     }, [imageDimensions, containerWidth]);
 
     const fileDetailItems = useMemo(() => {
-        const items = [
+        const items: Array<{ id: string; iconName: string; iconColor: string; title: string; description: string }> = [
             {
                 id: 'filename',
-                icon: 'file-document',
+                iconName: 'file-document',
                 iconColor: constantColors.iconSecurity,
                 title: 'File Name',
-                subtitle: file.filename,
+                description: file.filename,
             },
             {
                 id: 'size',
-                icon: 'server',
+                iconName: 'server',
                 iconColor: constantColors.iconStorage,
                 title: 'Size',
-                subtitle: formatFileSize(file.length),
+                description: formatFileSize(file.length),
             },
             {
                 id: 'type',
-                icon: 'code-tags',
+                iconName: 'code-tags',
                 iconColor: constantColors.iconData,
                 title: 'Type',
-                subtitle: file.contentType,
+                description: file.contentType,
             },
             {
                 id: 'uploaded',
-                icon: 'clock',
+                iconName: 'clock',
                 iconColor: constantColors.iconPersonalInfo,
                 title: 'Uploaded',
-                subtitle: new Date(file.uploadDate).toLocaleString(),
+                description: new Date(file.uploadDate).toLocaleString(),
             },
         ];
 
         if (file.metadata?.description) {
             items.push({
                 id: 'description',
-                icon: 'text',
+                iconName: 'text',
                 iconColor: constantColors.iconData,
                 title: 'Description',
-                subtitle: file.metadata.description,
+                description: file.metadata.description,
             });
         }
 
         items.push({
             id: 'fileId',
-            icon: 'key',
+            iconName: 'key',
             iconColor: constantColors.iconSecurity,
             title: 'File ID',
-            subtitle: file.id,
+            description: file.id,
         });
 
         return items;
@@ -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>
@@ -366,7 +363,17 @@ export const FileViewer: React.FC<FileViewerProps> = ({
                 {showFileDetailsInViewer && (
                     <>
                         <View style={fileManagementStyles.fileDetailsSectionContent}>
-                            <GroupedSection items={fileDetailItems} />
+                            <SettingsListGroup>
+                                {fileDetailItems.map((item) => (
+                                    <SettingsListItem
+                                        key={item.id}
+                                        icon={<MaterialCommunityIcons name={item.iconName} size={20} color={item.iconColor} />}
+                                        title={item.title}
+                                        description={item.description}
+                                        showChevron={false}
+                                    />
+                                ))}
+                            </SettingsListGroup>
                         </View>
 
                         {isOwner && (
@@ -379,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>
     );
 };