@oxyhq/services 6.9.43 → 6.9.45

package/src/ui/screens/CreateManagedAccountScreen.tsx

@@ -0,0 +1,338 @@
+import type React from 'react';
+import { useState, useCallback, useRef, useEffect } from 'react';
+import {
+  View,
+  Text,
+  TextInput,
+  TouchableOpacity,
+  StyleSheet,
+  ActivityIndicator,
+  ScrollView,
+  Platform,
+  KeyboardAvoidingView,
+} from 'react-native';
+import type { BaseScreenProps } from '../types/navigation';
+import { fontFamilies } from '../styles/fonts';
+import { Header } from '../components';
+import { useI18n } from '../hooks/useI18n';
+import { useTheme } from '@oxyhq/bloom/theme';
+import { useOxy } from '../context/OxyContext';
+import { toast } from '../../lib/sonner';
+import { screenContentStyle } from '../constants/spacing';
+
+type UsernameStatus = 'idle' | 'checking' | 'available' | 'taken' | 'invalid';
+
+const USERNAME_REGEX = /^[a-zA-Z0-9_-]{3,30}$/;
+const DEBOUNCE_MS = 400;
+
+const CreateManagedAccountScreen: React.FC<BaseScreenProps> = ({
+  onClose,
+  goBack,
+}) => {
+  const bloomTheme = useTheme();
+  const { oxyServices, createManagedAccount, setActingAs } = useOxy();
+  const { t } = useI18n();
+
+  const [username, setUsername] = useState('');
+  const [displayName, setDisplayName] = useState('');
+  const [bio, setBio] = useState('');
+  const [usernameStatus, setUsernameStatus] = useState<UsernameStatus>('idle');
+  const [usernameMessage, setUsernameMessage] = useState('');
+  const [isCreating, setIsCreating] = useState(false);
+
+  const debounceTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  // Debounced username availability check
+  const checkUsername = useCallback((value: string) => {
+    if (debounceTimerRef.current) {
+      clearTimeout(debounceTimerRef.current);
+    }
+
+    if (!value || value.length < 3) {
+      setUsernameStatus(value.length > 0 ? 'invalid' : 'idle');
+      setUsernameMessage(value.length > 0 ? 'Username must be at least 3 characters' : '');
+      return;
+    }
+
+    if (!USERNAME_REGEX.test(value)) {
+      setUsernameStatus('invalid');
+      setUsernameMessage('Only letters, numbers, hyphens, and underscores');
+      return;
+    }
+
+    setUsernameStatus('checking');
+    setUsernameMessage('');
+
+    debounceTimerRef.current = setTimeout(async () => {
+      try {
+        const result = await oxyServices.checkUsernameAvailability(value);
+        setUsernameStatus(result.available ? 'available' : 'taken');
+        setUsernameMessage(result.message || (result.available ? 'Username is available' : 'Username is taken'));
+      } catch {
+        setUsernameStatus('idle');
+        setUsernameMessage('Could not check availability');
+      }
+    }, DEBOUNCE_MS);
+  }, [oxyServices]);
+
+  const handleUsernameChange = useCallback((value: string) => {
+    const cleaned = value.toLowerCase().replace(/[^a-z0-9_-]/g, '');
+    setUsername(cleaned);
+    checkUsername(cleaned);
+  }, [checkUsername]);
+
+  // Cleanup debounce timer
+  useEffect(() => {
+    return () => {
+      if (debounceTimerRef.current) {
+        clearTimeout(debounceTimerRef.current);
+      }
+    };
+  }, []);
+
+  const canCreate = usernameStatus === 'available' && displayName.trim().length > 0 && !isCreating;
+
+  const handleCreate = useCallback(async () => {
+    if (!canCreate) return;
+
+    setIsCreating(true);
+    try {
+      // Split display name into first/last
+      const nameParts = displayName.trim().split(/\s+/);
+      const firstName = nameParts[0] || '';
+      const lastName = nameParts.length > 1 ? nameParts.slice(1).join(' ') : undefined;
+
+      const account = await createManagedAccount({
+        username,
+        name: { first: firstName, last: lastName },
+        bio: bio.trim() || undefined,
+      });
+
+      toast.success('Identity created successfully');
+
+      // Switch to the new managed account
+      if (account.accountId) {
+        setActingAs(account.accountId);
+      }
+
+      onClose?.();
+    } catch (error) {
+      const message = error instanceof Error ? error.message : 'Failed to create identity';
+      toast.error(message);
+    } finally {
+      setIsCreating(false);
+    }
+  }, [canCreate, username, displayName, bio, createManagedAccount, setActingAs, onClose]);
+
+  const getStatusColor = (): string => {
+    switch (usernameStatus) {
+      case 'available': return '#34C759';
+      case 'taken':
+      case 'invalid': return bloomTheme.colors.error;
+      case 'checking': return bloomTheme.colors.primary;
+      default: return 'transparent';
+    }
+  };
+
+  return (
+    <View style={[styles.container, { backgroundColor: bloomTheme.colors.background }]}>
+      <Header
+        title="Create Identity"
+        onBack={goBack}
+        onClose={onClose}
+        showBackButton={true}
+        showCloseButton={true}
+        elevation="subtle"
+      />
+
+      <KeyboardAvoidingView
+        style={styles.flex}
+        behavior={Platform.OS === 'ios' ? 'padding' : undefined}
+        keyboardVerticalOffset={Platform.OS === 'ios' ? 88 : 0}
+      >
+        <ScrollView
+          style={styles.flex}
+          contentContainerStyle={screenContentStyle}
+          keyboardShouldPersistTaps="handled"
+        >
+          <Text style={[styles.description, { color: bloomTheme.colors.text }]}>
+            Create a managed identity that you control. It will have its own profile, posts, and interactions.
+          </Text>
+
+          {/* Username */}
+          <View style={styles.fieldGroup}>
+            <Text style={[styles.label, { color: bloomTheme.colors.text }]}>Username</Text>
+            <View style={[
+              styles.inputContainer,
+              { borderColor: usernameStatus !== 'idle' ? getStatusColor() : bloomTheme.colors.border },
+            ]}>
+              <Text style={[styles.inputPrefix, { color: bloomTheme.colors.text + '80' }]}>@</Text>
+              <TextInput
+                style={[styles.input, { color: bloomTheme.colors.text }]}
+                value={username}
+                onChangeText={handleUsernameChange}
+                placeholder="username"
+                placeholderTextColor={bloomTheme.colors.text + '40'}
+                autoCapitalize="none"
+                autoCorrect={false}
+                autoComplete="off"
+                maxLength={30}
+              />
+              {usernameStatus === 'checking' && (
+                <ActivityIndicator size="small" color={bloomTheme.colors.primary} />
+              )}
+              {usernameStatus === 'available' && (
+                <Text style={styles.statusIcon}>OK</Text>
+              )}
+            </View>
+            {usernameMessage ? (
+              <Text style={[styles.statusMessage, { color: getStatusColor() }]}>
+                {usernameMessage}
+              </Text>
+            ) : null}
+          </View>
+
+          {/* Display Name */}
+          <View style={styles.fieldGroup}>
+            <Text style={[styles.label, { color: bloomTheme.colors.text }]}>Display Name</Text>
+            <View style={[styles.inputContainer, { borderColor: bloomTheme.colors.border }]}>
+              <TextInput
+                style={[styles.input, { color: bloomTheme.colors.text }]}
+                value={displayName}
+                onChangeText={setDisplayName}
+                placeholder="Display name"
+                placeholderTextColor={bloomTheme.colors.text + '40'}
+                maxLength={50}
+              />
+            </View>
+          </View>
+
+          {/* Bio */}
+          <View style={styles.fieldGroup}>
+            <Text style={[styles.label, { color: bloomTheme.colors.text }]}>Bio (optional)</Text>
+            <View style={[styles.inputContainer, styles.bioContainer, { borderColor: bloomTheme.colors.border }]}>
+              <TextInput
+                style={[styles.input, styles.bioInput, { color: bloomTheme.colors.text }]}
+                value={bio}
+                onChangeText={setBio}
+                placeholder="Tell people about this identity"
+                placeholderTextColor={bloomTheme.colors.text + '40'}
+                maxLength={160}
+                multiline
+                numberOfLines={3}
+                textAlignVertical="top"
+              />
+            </View>
+            <Text style={[styles.charCount, { color: bloomTheme.colors.text + '60' }]}>
+              {bio.length}/160
+            </Text>
+          </View>
+
+          {/* Create Button */}
+          <TouchableOpacity
+            style={[
+              styles.createButton,
+              { backgroundColor: bloomTheme.colors.primary },
+              !canCreate && styles.createButtonDisabled,
+            ]}
+            onPress={handleCreate}
+            disabled={!canCreate}
+            activeOpacity={0.7}
+          >
+            {isCreating ? (
+              <ActivityIndicator size="small" color="#fff" />
+            ) : (
+              <Text style={styles.createButtonText}>Create Identity</Text>
+            )}
+          </TouchableOpacity>
+        </ScrollView>
+      </KeyboardAvoidingView>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  flex: {
+    flex: 1,
+  },
+  description: {
+    fontSize: 15,
+    lineHeight: 22,
+    marginBottom: 24,
+    fontFamily: fontFamilies.inter,
+  },
+  fieldGroup: {
+    marginBottom: 20,
+  },
+  label: {
+    fontSize: 14,
+    fontFamily: fontFamilies.interSemiBold,
+    fontWeight: Platform.OS === 'web' ? '600' : undefined,
+    marginBottom: 8,
+  },
+  inputContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    borderWidth: 1,
+    borderRadius: 12,
+    paddingHorizontal: 14,
+    height: 48,
+  },
+  inputPrefix: {
+    fontSize: 16,
+    fontFamily: fontFamilies.inter,
+    marginRight: 2,
+  },
+  input: {
+    flex: 1,
+    fontSize: 16,
+    fontFamily: fontFamilies.inter,
+    paddingVertical: 0,
+  },
+  bioContainer: {
+    height: 88,
+    alignItems: 'flex-start',
+    paddingVertical: 12,
+  },
+  bioInput: {
+    height: 64,
+  },
+  statusIcon: {
+    fontSize: 13,
+    fontFamily: fontFamilies.interSemiBold,
+    fontWeight: Platform.OS === 'web' ? '600' : undefined,
+    color: '#34C759',
+  },
+  statusMessage: {
+    fontSize: 13,
+    fontFamily: fontFamilies.inter,
+    marginTop: 6,
+  },
+  charCount: {
+    fontSize: 12,
+    fontFamily: fontFamilies.inter,
+    textAlign: 'right',
+    marginTop: 4,
+  },
+  createButton: {
+    height: 50,
+    borderRadius: 25,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginTop: 12,
+  },
+  createButtonDisabled: {
+    opacity: 0.5,
+  },
+  createButtonText: {
+    color: '#fff',
+    fontSize: 16,
+    fontFamily: fontFamilies.interSemiBold,
+    fontWeight: Platform.OS === 'web' ? '600' : undefined,
+  },
+});
+
+export default CreateManagedAccountScreen;

package/src/ui/screens/FileManagementScreen.tsx

@@ -11,7 +11,6 @@ import {
     Image,
     Animated,
     Easing,
-    Alert,
 } from 'react-native';
 import { Image as ExpoImage } from 'expo-image';
 import type { FileManagementScreenProps } from '../types/fileManagement';
@@ -29,6 +28,8 @@ const loadDocumentPicker = async () => {
     }
 };
 import { toast } from '../../lib/sonner';
+import * as Prompt from '@oxyhq/bloom/prompt';
+import { usePromptControl } from '@oxyhq/bloom/prompt';
 import { Ionicons } from '@expo/vector-icons';
 // @ts-ignore - MaterialCommunityIcons is available at runtime
 import { MaterialCommunityIcons } from '@expo/vector-icons';
@@ -42,7 +43,6 @@ import { useOxy } from '../context/OxyContext';
 import { useI18n } from '../hooks/useI18n';
 import { useUploadFile } from '../hooks/mutations/useAccountMutations';
 import {
-    confirmAction,
     convertDocumentPickerAssetToFile,
     formatFileSize,
     getFileIcon,
@@ -51,6 +51,7 @@ import {
 import { FileViewer } from '../components/fileManagement/FileViewer';
 import { FileDetailsModal } from '../components/fileManagement/FileDetailsModal';
 import { UploadPreview } from '../components/fileManagement/UploadPreview';
+import { useDialogControl } from '@oxyhq/bloom/dialog';
 import { fileManagementStyles } from '../components/fileManagement/styles';
 import type { OnConfirmFileSelection } from '../types/fileManagement';
 
@@ -133,6 +134,11 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
     const { user, oxyServices } = useOxy();
     const { t } = useI18n();
     const uploadFileMutation = useUploadFile();
+    // Prompt controls
+    const fileDeletePrompt = usePromptControl();
+    const bulkDeletePrompt = usePromptControl();
+    const visibilityChangePrompt = usePromptControl();
+    const [pendingDeleteFile, setPendingDeleteFile] = useState<{ id: string; name: string } | null>(null);
     const files = useFiles();
     // Ensure containerWidth is a number (TypeScript guard)
     const safeContainerWidth: number = typeof containerWidth === 'number' ? containerWidth : 400;
@@ -143,7 +149,7 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
     const [refreshing, setRefreshing] = useState(false);
     const [paging, setPaging] = useState({ offset: 0, limit: 40, total: 0, hasMore: true, loadingMore: false });
     const [selectedFile, setSelectedFile] = useState<FileMetadata | null>(null);
-    const [showFileDetails, setShowFileDetails] = useState(false);
+    const fileDetailsControl = useDialogControl();
     // In selectMode we never open the detailed viewer
     const [openedFile, setOpenedFile] = useState<FileMetadata | null>(null);
     const [fileContent, setFileContent] = useState<string | null>(null);
@@ -889,18 +895,14 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
         }
     };
 
-    const handleFileDelete = async (fileId: string, filename: string) => {
-        // Use platform-aware confirmation dialog
-        const confirmed = await confirmAction(
-            t('fileManagement.confirms.deleteFile', { filename }),
-            t('fileManagement.deleteFile'),
-            t('fileManagement.confirm'),
-            t('common.cancel')
-        );
+    const confirmFileDelete = useCallback((fileId: string, filename: string) => {
+        setPendingDeleteFile({ id: fileId, name: filename });
+        fileDeletePrompt.open();
+    }, [fileDeletePrompt]);
 
-        if (!confirmed) {
-            return;
-        }
+    const handleFileDelete = useCallback(async () => {
+        if (!pendingDeleteFile) return;
+        const { id: fileId } = pendingDeleteFile;
 
         try {
             storeSetDeleting(fileId);
@@ -927,24 +929,17 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
             }
         } finally {
             storeSetDeleting(null);
+            setPendingDeleteFile(null);
         }
-    };
+    }, [pendingDeleteFile, storeSetDeleting, oxyServices, loadFiles, t]);
 
-    const handleBulkDelete = useCallback(async () => {
+    const confirmBulkDelete = useCallback(() => {
         if (selectedIds.size === 0) return;
+        bulkDeletePrompt.open();
+    }, [selectedIds.size, bulkDeletePrompt]);
 
-        const fileMap: Record<string, FileMetadata> = {};
-        files.forEach(f => { fileMap[f.id] = f; });
-        const selectedFiles = Array.from(selectedIds).map(id => fileMap[id]).filter(Boolean);
-
-        const confirmed = await confirmAction(
-            t('fileManagement.confirms.deleteFiles', { count: selectedFiles.length }),
-            t('fileManagement.deleteFiles'),
-            t('fileManagement.confirm'),
-            t('common.cancel')
-        );
-
-        if (!confirmed) return;
+    const handleBulkDelete = useCallback(async () => {
+        if (selectedIds.size === 0) return;
 
         try {
             const deletePromises = Array.from(selectedIds).map(async (fileId) => {
@@ -1119,7 +1114,7 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
 
     const showFileDetailsModal = (file: FileMetadata) => {
         setSelectedFile(file);
-        setShowFileDetails(true);
+        fileDetailsControl.open();
     };
 
     const renderSimplePhotoItem = useCallback((photo: FileMetadata, index: number) => {
@@ -1350,9 +1345,7 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                         {/* Always show delete button for debugging */}
                         <TouchableOpacity
                             style={[fileManagementStyles.actionButton, { backgroundColor: bloomTheme.isDark ? '#400000' : '#FFEBEE' }]}
-                            onPress={() => {
-                                handleFileDelete(file.id, file.filename);
-                            }}
+                            onPress={() => confirmFileDelete(file.id, file.filename)}
                             disabled={deleting === file.id}
                         >
                             {deleting === file.id ? (
@@ -1480,7 +1473,7 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                         </TouchableOpacity>
                         <TouchableOpacity
                             style={[fileManagementStyles.groupedActionBtn, { backgroundColor: bloomTheme.isDark ? '#400000' : '#FFEBEE' }]}
-                            onPress={() => handleFileDelete(file.id, file.filename)}
+                            onPress={() => confirmFileDelete(file.id, file.filename)}
                             disabled={deleting === file.id}
                         >
                             {deleting === file.id ? (
@@ -1498,7 +1491,7 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                 ) : undefined,
             };
         });
-    }, [filteredFiles, theme, deleting, handleFileDownload, handleFileDelete, handleFileOpen, getSafeDownloadUrlCallback, selectMode, selectedIds]);
+    }, [filteredFiles, theme, deleting, handleFileDownload, confirmFileDelete, handleFileOpen, getSafeDownloadUrlCallback, selectMode, selectedIds]);
 
     // Scroll to selected file after selection
     useEffect(() => {
@@ -1952,15 +1945,14 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                     onToggleDetails={() => setShowFileDetailsInViewer(!showFileDetailsInViewer)}
                     onClose={handleCloseFile}
                     onDownload={handleFileDownload}
-                    onDelete={handleFileDelete}
+                    onDelete={confirmFileDelete}
                     isOwner={user?.id === targetUserId}
                 />
                 <FileDetailsModal
-                    visible={showFileDetails}
+                    control={fileDetailsControl}
                     file={selectedFile}
-                    onClose={() => setShowFileDetails(false)}
                     onDownload={handleFileDownload}
-                    onDelete={handleFileDelete}
+                    onDelete={confirmFileDelete}
                     isOwner={user?.id === targetUserId}
                 />
             </>
@@ -1981,7 +1973,6 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                     titleAlignment="left"
                 />
                 <UploadPreview
-                    visible={true}
                     pendingFiles={pendingFiles}
                     onConfirm={handleConfirmUpload}
                     onCancel={handleCancelUpload}
@@ -2019,24 +2010,14 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                     {
                         key: 'delete',
                         text: t('fileManagement.delete', { count: selectedIds.size }),
-                        onPress: handleBulkDelete,
+                        onPress: confirmBulkDelete,
                         icon: 'delete',
                     },
                     {
                         key: 'visibility',
                         text: t('fileManagement.visibility'),
                         onPress: () => {
-                            // Show visibility options menu
-                            Alert.alert(
-                                t('fileManagement.changeVisibility'),
-                                t('fileManagement.changeVisibilityConfirm', { count: selectedIds.size }),
-                                [
-                                    { text: t('common.cancel'), style: 'cancel' },
-                                    { text: t('fileManagement.private'), onPress: () => handleBulkVisibilityChange('private') },
-                                    { text: t('fileManagement.public'), onPress: () => handleBulkVisibilityChange('public') },
-                                    { text: t('fileManagement.unlisted'), onPress: () => handleBulkVisibilityChange('unlisted') },
-                                ]
-                            );
+                            visibilityChangePrompt.open();
                         },
                         icon: 'eye',
                     }
@@ -2273,11 +2254,10 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
 
             {!selectMode && (
                 <FileDetailsModal
-                    visible={showFileDetails}
+                    control={fileDetailsControl}
                     file={selectedFile}
-                    onClose={() => setShowFileDetails(false)}
                     onDownload={handleFileDownload}
-                    onDelete={handleFileDelete}
+                    onDelete={confirmFileDelete}
                     isOwner={user?.id === targetUserId}
                 />
             )}
@@ -2312,6 +2292,34 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
 
             {/* Selection bar removed; actions are now in header */}
             {/* Global loadingMore bar removed; now inline in scroll areas */}
+            <Prompt.Basic
+                control={fileDeletePrompt}
+                title={t('fileManagement.deleteFile') || 'Delete File'}
+                description={pendingDeleteFile ? t('fileManagement.confirms.deleteFile', { filename: pendingDeleteFile.name }) : ''}
+                onConfirm={handleFileDelete}
+                confirmButtonCta={t('fileManagement.confirm') || 'Delete'}
+                confirmButtonColor='negative'
+            />
+            <Prompt.Basic
+                control={bulkDeletePrompt}
+                title={t('fileManagement.deleteFiles') || 'Delete Files'}
+                description={t('fileManagement.confirms.deleteFiles', { count: selectedIds.size })}
+                onConfirm={handleBulkDelete}
+                confirmButtonCta={t('fileManagement.confirm') || 'Delete'}
+                confirmButtonColor='negative'
+            />
+            <Prompt.Outer control={visibilityChangePrompt}>
+                <Prompt.Content>
+                    <Prompt.TitleText>{t('fileManagement.changeVisibility') || 'Change Visibility'}</Prompt.TitleText>
+                    <Prompt.DescriptionText>{t('fileManagement.changeVisibilityConfirm', { count: selectedIds.size })}</Prompt.DescriptionText>
+                </Prompt.Content>
+                <Prompt.Actions>
+                    <Prompt.Action cta={t('fileManagement.private') || 'Private'} onPress={() => handleBulkVisibilityChange('private')} color='primary' />
+                    <Prompt.Action cta={t('fileManagement.public') || 'Public'} onPress={() => handleBulkVisibilityChange('public')} color='primary_subtle' />
+                    <Prompt.Action cta={t('fileManagement.unlisted') || 'Unlisted'} onPress={() => handleBulkVisibilityChange('unlisted')} color='primary_subtle' />
+                    <Prompt.Cancel cta={t('common.cancel') || 'Cancel'} />
+                </Prompt.Actions>
+            </Prompt.Outer>
         </View>
     );
 };