@oxyhq/services 6.9.15 → 6.9.17

package/src/ui/screens/FileManagementScreen.js

@@ -1,1473 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = __importStar(require("react"));
-const react_native_1 = require("react-native");
-const expo_image_1 = require("expo-image");
-// Lazy load expo-document-picker (optional dependency)
-// This allows the screen to work even if expo-document-picker is not installed
-let DocumentPicker = null;
-const loadDocumentPicker = async () => {
-    if (DocumentPicker)
-        return DocumentPicker;
-    try {
-        DocumentPicker = await import('expo-document-picker');
-        return DocumentPicker;
-    }
-    catch (error) {
-        throw new Error('expo-document-picker is not installed. Please install it: npx expo install expo-document-picker');
-    }
-};
-const sonner_1 = require("../../lib/sonner");
-const vector_icons_1 = require("@expo/vector-icons");
-// @ts-ignore - MaterialCommunityIcons is available at runtime
-const vector_icons_2 = require("@expo/vector-icons");
-const fileStore_1 = require("../stores/fileStore");
-const Header_1 = __importDefault(require("../components/Header"));
-const JustifiedPhotoGrid_1 = __importDefault(require("../components/photogrid/JustifiedPhotoGrid"));
-const components_1 = require("../components");
-const useThemeStyles_1 = require("../hooks/useThemeStyles");
-const useColorScheme_1 = require("../hooks/useColorScheme");
-const themeUtils_1 = require("../utils/themeUtils");
-const OxyContext_1 = require("../context/OxyContext");
-const useI18n_1 = require("../hooks/useI18n");
-const useAccountMutations_1 = require("../hooks/mutations/useAccountMutations");
-const fileManagement_1 = require("../utils/fileManagement");
-const FileViewer_1 = require("../components/fileManagement/FileViewer");
-const FileDetailsModal_1 = require("../components/fileManagement/FileDetailsModal");
-const UploadPreview_1 = require("../components/fileManagement/UploadPreview");
-const styles_1 = require("../components/fileManagement/styles");
-/** Extract error message from unknown error type */
-const getErrorMessage = (error) => error instanceof Error ? getErrorMessage(error) : typeof error === 'string' ? error : undefined;
-// Animated button component for smooth transitions
-const AnimatedButton = ({ isSelected, onPress, icon, primaryColor, textColor, style }) => {
-    const animatedValue = (0, react_1.useRef)(new react_native_1.Animated.Value(isSelected ? 1 : 0)).current;
-    (0, react_1.useEffect)(() => {
-        react_native_1.Animated.timing(animatedValue, {
-            toValue: isSelected ? 1 : 0,
-            duration: 200,
-            easing: react_native_1.Easing.out(react_native_1.Easing.ease),
-            useNativeDriver: false,
-        }).start();
-    }, [isSelected, animatedValue]);
-    const backgroundColor = animatedValue.interpolate({
-        inputRange: [0, 1],
-        outputRange: ['transparent', primaryColor],
-    });
-    const iconColor = animatedValue.interpolate({
-        inputRange: [0, 1],
-        outputRange: [textColor, '#FFFFFF'],
-    });
-    return ((0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { onPress: onPress, activeOpacity: 0.7, children: (0, jsx_runtime_1.jsx)(react_native_1.Animated.View, { style: [
-                style,
-                {
-                    backgroundColor,
-                },
-            ], children: (0, jsx_runtime_1.jsx)(react_native_1.Animated.View, { children: (0, jsx_runtime_1.jsx)(vector_icons_2.MaterialCommunityIcons, { name: icon, size: 16, color: isSelected ? '#FFFFFF' : textColor }) }) }) }));
-};
-const FileManagementScreen = ({ onClose, theme, goBack, navigate, userId, containerWidth = 400, // Fallback for when not provided by the router
-selectMode = false, multiSelect = false, onSelect, onConfirmSelection, initialSelectedIds = [], maxSelection, disabledMimeTypes = [], afterSelect = 'close', allowUploadInSelectMode = true, defaultVisibility = 'private', linkContext, }) => {
-    // Use useOxy() hook for OxyContext values
-    const { user, oxyServices } = (0, OxyContext_1.useOxy)();
-    const { t } = (0, useI18n_1.useI18n)();
-    const uploadFileMutation = (0, useAccountMutations_1.useUploadFile)();
-    const files = (0, fileStore_1.useFiles)();
-    // Ensure containerWidth is a number (TypeScript guard)
-    const safeContainerWidth = typeof containerWidth === 'number' ? containerWidth : 400;
-    const uploading = (0, fileStore_1.useUploading)();
-    const uploadProgress = (0, fileStore_1.useUploadAggregateProgress)();
-    const deleting = (0, fileStore_1.useDeleting)();
-    const [loading, setLoading] = (0, react_1.useState)(true);
-    const [refreshing, setRefreshing] = (0, react_1.useState)(false);
-    const [paging, setPaging] = (0, react_1.useState)({ offset: 0, limit: 40, total: 0, hasMore: true, loadingMore: false });
-    const [selectedFile, setSelectedFile] = (0, react_1.useState)(null);
-    const [showFileDetails, setShowFileDetails] = (0, react_1.useState)(false);
-    // In selectMode we never open the detailed viewer
-    const [openedFile, setOpenedFile] = (0, react_1.useState)(null);
-    const [fileContent, setFileContent] = (0, react_1.useState)(null);
-    const [loadingFileContent, setLoadingFileContent] = (0, react_1.useState)(false);
-    const [showFileDetailsInViewer, setShowFileDetailsInViewer] = (0, react_1.useState)(false);
-    const [isPickingDocument, setIsPickingDocument] = (0, react_1.useState)(false);
-    const [viewMode, setViewMode] = (0, react_1.useState)('all');
-    const [searchQuery, setSearchQuery] = (0, react_1.useState)('');
-    const [sortBy, setSortBy] = (0, react_1.useState)('date');
-    const [sortOrder, setSortOrder] = (0, react_1.useState)('desc');
-    const [pendingFiles, setPendingFiles] = (0, react_1.useState)([]);
-    const [showUploadPreview, setShowUploadPreview] = (0, react_1.useState)(false);
-    // Derived filtered and sorted files (avoid setState loops)
-    const filteredFiles = (0, react_1.useMemo)(() => {
-        let filteredByMode = files;
-        if (viewMode === 'photos') {
-            filteredByMode = files.filter(file => file.contentType.startsWith('image/'));
-        }
-        else if (viewMode === 'videos') {
-            filteredByMode = files.filter(file => file.contentType.startsWith('video/'));
-        }
-        else if (viewMode === 'documents') {
-            filteredByMode = files.filter(file => file.contentType.includes('pdf') ||
-                file.contentType.includes('document') ||
-                file.contentType.includes('text') ||
-                file.contentType.includes('msword') ||
-                file.contentType.includes('excel') ||
-                file.contentType.includes('spreadsheet') ||
-                file.contentType.includes('presentation') ||
-                file.contentType.includes('powerpoint'));
-        }
-        else if (viewMode === 'audio') {
-            filteredByMode = files.filter(file => file.contentType.startsWith('audio/'));
-        }
-        let filtered = filteredByMode;
-        if (searchQuery.trim()) {
-            const query = searchQuery.toLowerCase();
-            filtered = filteredByMode.filter(file => file.filename.toLowerCase().includes(query) ||
-                file.contentType.toLowerCase().includes(query) ||
-                (file.metadata?.description?.toLowerCase().includes(query)));
-        }
-        // Sort files
-        const sorted = [...filtered].sort((a, b) => {
-            let comparison = 0;
-            if (sortBy === 'date') {
-                const dateA = new Date(a.uploadDate || 0).getTime();
-                const dateB = new Date(b.uploadDate || 0).getTime();
-                comparison = dateA - dateB;
-            }
-            else if (sortBy === 'size') {
-                comparison = (a.length || 0) - (b.length || 0);
-            }
-            else if (sortBy === 'name') {
-                comparison = (a.filename || '').localeCompare(b.filename || '');
-            }
-            else if (sortBy === 'type') {
-                comparison = (a.contentType || '').localeCompare(b.contentType || '');
-            }
-            return sortOrder === 'asc' ? comparison : -comparison;
-        });
-        return sorted;
-    }, [files, searchQuery, viewMode, sortBy, sortOrder]);
-    const [photoDimensions, setPhotoDimensions] = (0, react_1.useState)({});
-    const [loadingDimensions, setLoadingDimensions] = (0, react_1.useState)(false);
-    const uploadStartRef = (0, react_1.useRef)(null);
-    const MIN_BANNER_MS = 600;
-    // Selection state
-    const [selectedIds, setSelectedIds] = (0, react_1.useState)(new Set(initialSelectedIds));
-    const [lastSelectedFileId, setLastSelectedFileId] = (0, react_1.useState)(null);
-    const scrollViewRef = (0, react_1.useRef)(null);
-    const photoScrollViewRef = (0, react_1.useRef)(null);
-    const itemRefs = (0, react_1.useRef)(new Map()); // Track item positions
-    const containerRef = (0, react_1.useRef)(null);
-    (0, react_1.useEffect)(() => {
-        if (initialSelectedIds?.length) {
-            setSelectedIds(new Set(initialSelectedIds));
-        }
-    }, [initialSelectedIds]);
-    const toggleSelect = (0, react_1.useCallback)(async (file) => {
-        // Allow selection in regular mode for bulk operations
-        // if (!selectMode) return;
-        if (disabledMimeTypes.length) {
-            const blocked = disabledMimeTypes.some(mt => file.contentType === mt || file.contentType.startsWith(mt.endsWith('/') ? mt : `${mt}/`));
-            if (blocked) {
-                sonner_1.toast.error(t('fileManagement.toasts.fileTypeBlocked'));
-                return;
-            }
-        }
-        // Update file visibility if it differs from defaultVisibility
-        const fileVisibility = file.metadata?.visibility || 'private';
-        if (fileVisibility !== defaultVisibility) {
-            try {
-                await oxyServices.assetUpdateVisibility(file.id, defaultVisibility);
-            }
-            catch (error) {
-                // Continue anyway - selection shouldn't fail if visibility update fails
-            }
-        }
-        // Track the selected file for scrolling
-        setLastSelectedFileId(file.id);
-        // Link file to entity if linkContext is provided
-        if (linkContext) {
-            try {
-                await oxyServices.assetLink(file.id, linkContext.app, linkContext.entityType, linkContext.entityId, defaultVisibility, linkContext.webhookUrl);
-            }
-            catch (error) {
-                // Continue anyway - selection shouldn't fail if linking fails
-            }
-        }
-        if (!multiSelect) {
-            onSelect?.(file);
-            if (afterSelect === 'back') {
-                goBack?.();
-            }
-            else if (afterSelect === 'close') {
-                onClose?.();
-            }
-            return;
-        }
-        setSelectedIds(prev => {
-            const next = new Set(prev);
-            const already = next.has(file.id);
-            if (!already) {
-                if (maxSelection && next.size >= maxSelection) {
-                    sonner_1.toast.error(t('fileManagement.toasts.maxSelection', { max: maxSelection }));
-                    return prev;
-                }
-                next.add(file.id);
-            }
-            else {
-                next.delete(file.id);
-            }
-            return next;
-        });
-    }, [selectMode, multiSelect, onSelect, onClose, goBack, disabledMimeTypes, maxSelection, afterSelect, defaultVisibility, oxyServices, linkContext]);
-    const confirmMultiSelection = (0, react_1.useCallback)(async () => {
-        if (!selectMode || !multiSelect)
-            return;
-        const map = {};
-        files.forEach(f => { map[f.id] = f; });
-        const chosen = Array.from(selectedIds).map(id => map[id]).filter(Boolean);
-        // Update visibility and link files if needed
-        const updatePromises = chosen.map(async (file) => {
-            // Update visibility if needed
-            const fileVisibility = file.metadata?.visibility || 'private';
-            if (fileVisibility !== defaultVisibility) {
-                try {
-                    await oxyServices.assetUpdateVisibility(file.id, defaultVisibility);
-                }
-                catch (error) {
-                    // Visibility update failed, continue with selection
-                }
-            }
-            // Link file to entity if linkContext provided
-            if (linkContext) {
-                try {
-                    await oxyServices.assetLink(file.id, linkContext.app, linkContext.entityType, linkContext.entityId, defaultVisibility, linkContext.webhookUrl);
-                }
-                catch (error) {
-                    // File linking failed, continue with selection
-                }
-            }
-        });
-        // Wait for all updates (but don't block on failures)
-        await Promise.allSettled(updatePromises);
-        onConfirmSelection?.(chosen);
-        onClose?.();
-    }, [selectMode, multiSelect, selectedIds, files, onConfirmSelection, onClose, defaultVisibility, oxyServices, linkContext]);
-    const endUpload = (0, react_1.useCallback)(() => {
-        const started = uploadStartRef.current;
-        const elapsed = started ? Date.now() - started : MIN_BANNER_MS;
-        const remaining = elapsed < MIN_BANNER_MS ? MIN_BANNER_MS - elapsed : 0;
-        setTimeout(() => {
-            fileStore_1.useFileStore.getState().setUploading(false);
-            uploadStartRef.current = null;
-        }, remaining);
-    }, []);
-    // Helper to safely request a thumbnail variant only for image mime types.
-    const getSafeDownloadUrlCallback = (0, react_1.useCallback)((file, variant = 'thumb') => {
-        return (0, fileManagement_1.getSafeDownloadUrl)(file, variant, (fileId, variant) => oxyServices.getFileDownloadUrl(fileId, variant));
-    }, [oxyServices]);
-    // Use centralized theme styles hook for consistency
-    const colorScheme = (0, useColorScheme_1.useColorScheme)();
-    const normalizedTheme = (0, themeUtils_1.normalizeTheme)(theme);
-    const baseThemeStyles = (0, useThemeStyles_1.useThemeStyles)(normalizedTheme, colorScheme);
-    // FileManagementScreen uses a slightly different light background
-    const themeStyles = (0, react_1.useMemo)(() => ({
-        ...baseThemeStyles,
-        backgroundColor: baseThemeStyles.isDarkTheme ? baseThemeStyles.backgroundColor : '#f2f2f2',
-    }), [baseThemeStyles]);
-    // Extract commonly used theme variables
-    const backgroundColor = themeStyles.backgroundColor;
-    const borderColor = themeStyles.borderColor;
-    const targetUserId = userId || user?.id;
-    const storeSetUploading = (0, fileStore_1.useFileStore)(s => s.setUploading);
-    const storeSetUploadProgress = (0, fileStore_1.useFileStore)(s => s.setUploadProgress);
-    const storeSetDeleting = (0, fileStore_1.useFileStore)(s => s.setDeleting);
-    const loadFiles = (0, react_1.useCallback)(async (mode = 'initial') => {
-        if (!targetUserId)
-            return;
-        try {
-            if (mode === 'refresh') {
-                setRefreshing(true);
-            }
-            else if (mode === 'initial') {
-                setLoading(true);
-                setPaging(p => ({ ...p, offset: 0, hasMore: true }));
-            }
-            else if (mode === 'more') {
-                // Prevent duplicate fetches
-                setPaging(p => ({ ...p, loadingMore: true }));
-            }
-            const currentPaging = mode === 'more' ? (prevPagingRef.current ?? paging) : paging;
-            const effectiveOffset = mode === 'more' ? currentPaging.offset + currentPaging.limit : 0;
-            const response = await oxyServices.listUserFiles(currentPaging.limit, effectiveOffset);
-            const assets = (response.files || []).map((f) => ({
-                id: f.id,
-                filename: f.originalName || f.sha256,
-                contentType: f.mime,
-                length: f.size,
-                chunkSize: 0,
-                uploadDate: f.createdAt,
-                metadata: f.metadata || {},
-                variants: f.variants || [],
-            }));
-            if (mode === 'more') {
-                // append
-                fileStore_1.useFileStore.getState().setFiles(assets, { merge: true });
-                setPaging(p => ({
-                    ...p,
-                    offset: effectiveOffset,
-                    total: response.total || (effectiveOffset + assets.length),
-                    hasMore: response.hasMore,
-                    loadingMore: false,
-                }));
-            }
-            else {
-                fileStore_1.useFileStore.getState().setFiles(assets, { merge: false });
-                setPaging(p => ({
-                    ...p,
-                    offset: 0,
-                    total: response.total || assets.length,
-                    hasMore: response.hasMore,
-                    loadingMore: false,
-                }));
-            }
-        }
-        catch (error) {
-            sonner_1.toast.error(getErrorMessage(error) || t('fileManagement.toasts.loadFailed'));
-        }
-        finally {
-            setLoading(false);
-            setRefreshing(false);
-            setPaging(p => ({ ...p, loadingMore: false }));
-        }
-    }, [targetUserId, oxyServices, paging]);
-    // Keep a ref to avoid stale closure when calculating next offset
-    const prevPagingRef = (0, react_1.useRef)(paging);
-    (0, react_1.useEffect)(() => { prevPagingRef.current = paging; }, [paging]);
-    // (removed effect; filteredFiles is memoized)
-    // Load photo dimensions for justified grid - unified approach using Image.getSize
-    const loadPhotoDimensions = (0, react_1.useCallback)(async (photos) => {
-        if (photos.length === 0)
-            return;
-        setLoadingDimensions(true);
-        const newDimensions = { ...photoDimensions };
-        let hasNewDimensions = false;
-        // Only load dimensions for photos we don't have yet
-        const photosToLoad = photos.filter(photo => !newDimensions[photo.id]);
-        if (photosToLoad.length === 0) {
-            setLoadingDimensions(false);
-            return;
-        }
-        try {
-            await Promise.all(photosToLoad.map(async (photo) => {
-                try {
-                    const downloadUrl = getSafeDownloadUrlCallback(photo, 'thumb');
-                    // Unified approach using Image.getSize (works on all platforms)
-                    await new Promise((resolve) => {
-                        react_native_1.Image.getSize(downloadUrl, (width, height) => {
-                            newDimensions[photo.id] = { width, height };
-                            hasNewDimensions = true;
-                            resolve();
-                        }, () => {
-                            // Fallback dimensions
-                            newDimensions[photo.id] = { width: 1, height: 1 };
-                            hasNewDimensions = true;
-                            resolve();
-                        });
-                    });
-                }
-                catch (error) {
-                    // Fallback dimensions for any errors
-                    newDimensions[photo.id] = { width: 1, height: 1 };
-                    hasNewDimensions = true;
-                }
-            }));
-            if (hasNewDimensions) {
-                setPhotoDimensions(newDimensions);
-            }
-        }
-        catch (error) {
-            // Photo dimensions loading failed, continue without dimensions
-        }
-        finally {
-            setLoadingDimensions(false);
-        }
-    }, [getSafeDownloadUrlCallback, photoDimensions]);
-    // Create justified rows from photos with responsive algorithm
-    const createJustifiedRows = (0, react_1.useCallback)((photos, containerWidth) => {
-        if (photos.length === 0)
-            return [];
-        const rows = [];
-        const photosPerRow = 3; // Fixed 3 photos per row for consistency
-        for (let i = 0; i < photos.length; i += photosPerRow) {
-            const rowPhotos = photos.slice(i, i + photosPerRow);
-            rows.push(rowPhotos);
-        }
-        return rows;
-    }, []);
-    const processFileUploads = async (selectedFiles) => {
-        if (selectedFiles.length === 0)
-            return [];
-        if (!targetUserId)
-            return []; // Guard clause to ensure userId is defined
-        const uploadedFiles = [];
-        try {
-            storeSetUploadProgress({ current: 0, total: selectedFiles.length });
-            const maxSize = 50 * 1024 * 1024; // 50MB
-            const oversizedFiles = selectedFiles.filter(file => file.size > maxSize);
-            if (oversizedFiles.length > 0) {
-                const fileList = oversizedFiles.map(f => f.name).join(', ');
-                sonner_1.toast.error(t('fileManagement.toasts.filesTooLarge', { files: fileList }));
-                return [];
-            }
-            let successCount = 0;
-            let failureCount = 0;
-            const errors = [];
-            for (let i = 0; i < selectedFiles.length; i++) {
-                storeSetUploadProgress({ current: i + 1, total: selectedFiles.length });
-                const raw = selectedFiles[i];
-                const fileName = raw.name || `file-${i + 1}`;
-                const optimisticId = `temp-${Date.now()}-${i}-${Math.random().toString(36).substr(2, 9)}`; // Unique ID per file
-                try {
-                    // Validate file before upload
-                    if (!raw || !raw.name || raw.size === undefined || raw.size <= 0) {
-                        const errorMsg = `Invalid file: ${fileName}`;
-                        if (__DEV__) {
-                            console.error('Upload validation failed:', { file: raw, error: errorMsg });
-                        }
-                        failureCount++;
-                        errors.push(`${fileName}: Invalid file (missing name or size)`);
-                        continue;
-                    }
-                    const optimisticFile = {
-                        id: optimisticId,
-                        filename: raw.name,
-                        contentType: raw.type || 'application/octet-stream',
-                        length: raw.size,
-                        chunkSize: 0,
-                        uploadDate: new Date().toISOString(),
-                        metadata: { uploading: true },
-                        variants: [],
-                    };
-                    fileStore_1.useFileStore.getState().addFile(optimisticFile, { prepend: true });
-                    // Use the mutation hook with authentication handling
-                    const result = await uploadFileMutation.mutateAsync({
-                        file: raw,
-                        visibility: defaultVisibility,
-                    });
-                    // Attempt to refresh file list incrementally – fetch single file metadata if API allows
-                    const f = result?.file ?? result?.files?.[0];
-                    if (f) {
-                        const merged = {
-                            id: f.id,
-                            filename: f.originalName || f.sha256 || raw.name,
-                            contentType: f.mime || raw.type || 'application/octet-stream',
-                            length: f.size || raw.size,
-                            chunkSize: 0,
-                            uploadDate: f.createdAt || new Date().toISOString(),
-                            metadata: f.metadata || {},
-                            variants: f.variants || [],
-                        };
-                        // Remove optimistic then add real
-                        fileStore_1.useFileStore.getState().removeFile(optimisticId);
-                        fileStore_1.useFileStore.getState().addFile(merged, { prepend: true });
-                        uploadedFiles.push(merged);
-                        successCount++;
-                    }
-                    else {
-                        // Fallback: will reconcile on later list refresh
-                        fileStore_1.useFileStore.getState().updateFile(optimisticId, { metadata: { uploading: false } });
-                        if (__DEV__) {
-                            console.warn('Upload completed but no file data returned:', { fileName, result });
-                        }
-                        // Still count as success if upload didn't throw
-                        successCount++;
-                    }
-                }
-                catch (error) {
-                    failureCount++;
-                    const errorMessage = getErrorMessage(error) || String(error) || 'Upload failed';
-                    const fullError = `${fileName}: ${errorMessage}`;
-                    errors.push(fullError);
-                    if (__DEV__) {
-                        console.error('File upload failed:', {
-                            fileName,
-                            fileSize: raw.size,
-                            fileType: raw.type,
-                            error: errorMessage,
-                            stack: (error instanceof Error) ? error.stack : undefined
-                        });
-                    }
-                    // Remove optimistic file on error (use the same optimisticId from above)
-                    fileStore_1.useFileStore.getState().removeFile(optimisticId);
-                }
-            }
-            // Show success/error messages
-            if (successCount > 0) {
-                sonner_1.toast.success(t('fileManagement.toasts.uploadSuccess', { count: successCount }));
-            }
-            if (failureCount > 0) {
-                // Show detailed error message with first few errors
-                const errorDetails = errors.length > 0
-                    ? `\n${errors.slice(0, 3).join('\n')}${errors.length > 3 ? `\n...and ${errors.length - 3} more` : ''}`
-                    : '';
-                sonner_1.toast.error(`${t('fileManagement.toasts.uploadFailed', { count: failureCount })}${errorDetails}`);
-            }
-            // Silent background refresh to ensure metadata/variants updated
-            setTimeout(() => { loadFiles('silent'); }, 1200);
-        }
-        catch (error) {
-            sonner_1.toast.error(getErrorMessage(error) || t('fileManagement.toasts.uploadError'));
-        }
-        finally {
-            storeSetUploadProgress(null);
-        }
-        return uploadedFiles;
-    };
-    // biome-ignore lint/suspicious/noExplicitAny: Files from document picker may have extra properties like uri
-    const handleFileSelection = (0, react_1.useCallback)(async (selectedFiles) => {
-        const MAX_FILE_SIZE = 100 * 1024 * 1024; // 100MB
-        const processedFiles = [];
-        for (const file of selectedFiles) {
-            // Validate file has required properties
-            if (!file) {
-                if (__DEV__) {
-                    console.error('Invalid file: file is null or undefined');
-                }
-                sonner_1.toast.error(t('fileManagement.toasts.invalidFileMissing'));
-                continue;
-            }
-            if (!file.name || typeof file.name !== 'string') {
-                if (__DEV__) {
-                    console.error('Invalid file: missing or invalid name property', file);
-                }
-                sonner_1.toast.error(t('fileManagement.toasts.invalidFileName'));
-                continue;
-            }
-            if (file.size === undefined || file.size === null || Number.isNaN(file.size)) {
-                if (__DEV__) {
-                    console.error('Invalid file: missing or invalid size property', file);
-                }
-                sonner_1.toast.error(t('fileManagement.toasts.invalidFileSize', { name: file.name || 'unknown' }));
-                continue;
-            }
-            if (file.size <= 0) {
-                if (__DEV__) {
-                    console.error('Invalid file: file size is zero or negative', file);
-                }
-                sonner_1.toast.error(t('fileManagement.toasts.fileEmpty', { name: file.name }));
-                continue;
-            }
-            // Validate file size
-            if (file.size > MAX_FILE_SIZE) {
-                sonner_1.toast.error(t('fileManagement.toasts.fileTooLarge', { name: file.name, maxSize: (0, fileManagement_1.formatFileSize)(MAX_FILE_SIZE) }));
-                continue;
-            }
-            // Ensure file has a type property
-            const fileType = file.type || 'application/octet-stream';
-            // Generate preview for images - unified approach
-            let preview;
-            if (fileType.startsWith('image/')) {
-                // Try to use file URI from expo-document-picker if available (works on all platforms)
-                const fileUri = file.uri;
-                if (fileUri && typeof fileUri === 'string' &&
-                    (fileUri.startsWith('file://') || fileUri.startsWith('content://') ||
-                        fileUri.startsWith('http://') || fileUri.startsWith('https://') ||
-                        fileUri.startsWith('blob:'))) {
-                    preview = fileUri;
-                }
-                else {
-                    // Fallback: create blob URL if possible (works on web)
-                    try {
-                        if (file instanceof File || file instanceof Blob) {
-                            preview = URL.createObjectURL(file);
-                        }
-                    }
-                    catch (error) {
-                        if (__DEV__) {
-                            console.warn('Failed to create preview URL:', error);
-                        }
-                        // Preview is optional, continue without it
-                    }
-                }
-            }
-            processedFiles.push({
-                file,
-                preview,
-                size: file.size,
-                name: file.name,
-                type: fileType
-            });
-        }
-        if (processedFiles.length === 0) {
-            sonner_1.toast.error(t('fileManagement.toasts.noValidFiles'));
-            return;
-        }
-        // Show preview modal for user to review files before upload
-        setPendingFiles(processedFiles);
-        setShowUploadPreview(true);
-    }, []);
-    const handleConfirmUpload = async () => {
-        if (pendingFiles.length === 0)
-            return;
-        setShowUploadPreview(false);
-        uploadStartRef.current = Date.now();
-        storeSetUploading(true);
-        storeSetUploadProgress(null);
-        try {
-            const filesToUpload = pendingFiles.map(pf => pf.file);
-            storeSetUploadProgress({ current: 0, total: filesToUpload.length });
-            const uploadedFiles = await processFileUploads(filesToUpload);
-            // Cleanup preview URLs
-            pendingFiles.forEach(pf => {
-                if (pf.preview) {
-                    URL.revokeObjectURL(pf.preview);
-                }
-            });
-            setPendingFiles([]);
-            // If in selectMode, automatically select the uploaded file(s)
-            if (selectMode && uploadedFiles.length > 0) {
-                // Wait a bit for the file store to update and ensure file is available
-                setTimeout(() => {
-                    const fileToSelect = uploadedFiles[0];
-                    if (!multiSelect && fileToSelect) {
-                        // Single select mode - directly call onSelect callback
-                        onSelect?.(fileToSelect);
-                        if (afterSelect === 'back') {
-                            goBack?.();
-                        }
-                        else if (afterSelect === 'close') {
-                            onClose?.();
-                        }
-                    }
-                    else if (multiSelect) {
-                        // Multi-select mode - add all uploaded files to selection
-                        uploadedFiles.forEach(file => {
-                            if (!selectedIds.has(file.id)) {
-                                setSelectedIds(prev => new Set(prev).add(file.id));
-                            }
-                        });
-                    }
-                }, 500);
-            }
-            endUpload();
-        }
-        catch (error) {
-            sonner_1.toast.error(getErrorMessage(error) || t('fileManagement.toasts.uploadError'));
-            endUpload();
-        }
-    };
-    const handleCancelUpload = () => {
-        // Cleanup preview URLs
-        pendingFiles.forEach(pf => {
-            if (pf.preview) {
-                URL.revokeObjectURL(pf.preview);
-            }
-        });
-        setPendingFiles([]);
-        setShowUploadPreview(false);
-    };
-    const removePendingFile = (index) => {
-        const file = pendingFiles[index];
-        if (file.preview) {
-            URL.revokeObjectURL(file.preview);
-        }
-        const updated = pendingFiles.filter((_, i) => i !== index);
-        setPendingFiles(updated);
-        if (updated.length === 0) {
-            setShowUploadPreview(false);
-        }
-    };
-    /**
-     * Handle file upload - opens document picker and processes selected files
-     * Expo 54 compatible - works on web, iOS, and Android
-     */
-    const handleFileUpload = async () => {
-        // Prevent concurrent document picker calls
-        if (isPickingDocument) {
-            sonner_1.toast.error(t('fileManagement.toasts.waitForSelection'));
-            return;
-        }
-        try {
-            setIsPickingDocument(true);
-            // Lazy load expo-document-picker
-            const picker = await loadDocumentPicker();
-            // Use expo-document-picker (works on all platforms including web)
-            // On web, it uses the native file input and provides File objects directly
-            const result = await picker.getDocumentAsync({
-                type: '*/*',
-                multiple: true,
-                copyToCacheDirectory: true,
-            });
-            if (result.canceled) {
-                setIsPickingDocument(false);
-                return;
-            }
-            if (!result.assets || result.assets.length === 0) {
-                setIsPickingDocument(false);
-                sonner_1.toast.error(t('fileManagement.toasts.noFilesSelected'));
-                return;
-            }
-            // Convert expo document picker results to File-like objects
-            // According to Expo 54 docs, expo-document-picker returns assets with:
-            // - uri: file URI (file://, content://, or blob URL)
-            // - name: file name
-            // - size: file size in bytes
-            // - mimeType: MIME type of the file
-            // - file: (optional) native File object (usually only on web)
-            const files = [];
-            const errors = [];
-            // Process files in parallel for better performance
-            // This allows multiple files to be converted simultaneously
-            const conversionPromises = result.assets.map((doc, index) => (0, fileManagement_1.convertDocumentPickerAssetToFile)(doc, index)
-                .then((file) => {
-                if (file) {
-                    // Validate file has required properties before adding
-                    if (!file.name || file.size === undefined) {
-                        errors.push(`File "${doc.name || 'file'}" is invalid: missing required properties`);
-                        return null;
-                    }
-                    return file;
-                }
-                return null;
-            })
-                .catch((error) => {
-                errors.push(`File "${doc.name || 'file'}": ${getErrorMessage(error) || 'Failed to process'}`);
-                return null;
-            }));
-            const convertedFiles = await Promise.all(conversionPromises);
-            // Filter out null values
-            for (const file of convertedFiles) {
-                if (file) {
-                    files.push(file);
-                }
-            }
-            // Show errors if any
-            if (errors.length > 0) {
-                const errorMessage = errors.slice(0, 3).join('\n') + (errors.length > 3 ? `\n...and ${errors.length - 3} more` : '');
-                sonner_1.toast.error(t('fileManagement.toasts.loadSomeFailed', { errors: errorMessage }));
-            }
-            // Process successfully converted files
-            if (files.length > 0) {
-                await handleFileSelection(files);
-            }
-            else {
-                // Files were selected but none could be converted
-                sonner_1.toast.error(t('fileManagement.toasts.noFilesProcessed'));
-            }
-        }
-        catch (error) {
-            if (__DEV__) {
-                console.error('File upload error:', error);
-            }
-            if (getErrorMessage(error)?.includes('expo-document-picker') || getErrorMessage(error)?.includes('Different document picking in progress')) {
-                if (getErrorMessage(error)?.includes('Different document picking in progress')) {
-                    sonner_1.toast.error(t('fileManagement.toasts.waitForSelection'));
-                }
-                else {
-                    sonner_1.toast.error(t('fileManagement.toasts.filePickerNotAvailable'));
-                }
-            }
-            else {
-                sonner_1.toast.error(getErrorMessage(error) || t('fileManagement.toasts.selectFilesFailed'));
-            }
-        }
-        finally {
-            // Always reset the picking state, even if there was an error
-            setIsPickingDocument(false);
-        }
-    };
-    const handleFileDelete = async (fileId, filename) => {
-        // Use platform-aware confirmation dialog
-        const confirmed = await (0, fileManagement_1.confirmAction)(t('fileManagement.confirms.deleteFile', { filename }), t('fileManagement.deleteFile'), t('fileManagement.confirm'), t('common.cancel'));
-        if (!confirmed) {
-            return;
-        }
-        try {
-            storeSetDeleting(fileId);
-            await oxyServices.deleteFile(fileId);
-            sonner_1.toast.success(t('fileManagement.toasts.deleteSuccess'));
-            // Reload files after successful deletion
-            // Optimistic remove
-            fileStore_1.useFileStore.getState().removeFile(fileId);
-            // Silent background reconcile
-            setTimeout(() => loadFiles('silent'), 800);
-        }
-        catch (error) {
-            // Provide specific error messages
-            if (getErrorMessage(error)?.includes('File not found') || getErrorMessage(error)?.includes('404')) {
-                sonner_1.toast.error(t('fileManagement.toasts.fileNotFound'));
-                // Still reload files to refresh the list
-                setTimeout(() => loadFiles('silent'), 800);
-            }
-            else if (getErrorMessage(error)?.includes('permission') || getErrorMessage(error)?.includes('403')) {
-                sonner_1.toast.error(t('fileManagement.toasts.noPermission'));
-            }
-            else {
-                sonner_1.toast.error(getErrorMessage(error) || t('fileManagement.toasts.deleteFailed'));
-            }
-        }
-        finally {
-            storeSetDeleting(null);
-        }
-    };
-    const handleBulkDelete = (0, react_1.useCallback)(async () => {
-        if (selectedIds.size === 0)
-            return;
-        const fileMap = {};
-        files.forEach(f => { fileMap[f.id] = f; });
-        const selectedFiles = Array.from(selectedIds).map(id => fileMap[id]).filter(Boolean);
-        const confirmed = await (0, fileManagement_1.confirmAction)(t('fileManagement.confirms.deleteFiles', { count: selectedFiles.length }), t('fileManagement.deleteFiles'), t('fileManagement.confirm'), t('common.cancel'));
-        if (!confirmed)
-            return;
-        try {
-            const deletePromises = Array.from(selectedIds).map(async (fileId) => {
-                try {
-                    await oxyServices.deleteFile(fileId);
-                    fileStore_1.useFileStore.getState().removeFile(fileId);
-                    return { success: true, fileId };
-                }
-                catch (error) {
-                    return { success: false, fileId, error };
-                }
-            });
-            const results = await Promise.allSettled(deletePromises);
-            const successful = results.filter(r => r.status === 'fulfilled' && r.value.success).length;
-            const failed = results.length - successful;
-            if (successful > 0) {
-                sonner_1.toast.success(t('fileManagement.toasts.bulkDeleteSuccess', { count: successful }));
-            }
-            if (failed > 0) {
-                sonner_1.toast.error(t('fileManagement.toasts.bulkDeleteFailed', { count: failed }));
-            }
-            setSelectedIds(new Set());
-            setTimeout(() => loadFiles('silent'), 800);
-        }
-        catch (error) {
-            sonner_1.toast.error(getErrorMessage(error) || t('fileManagement.toasts.bulkDeleteError'));
-        }
-    }, [selectedIds, files, oxyServices, loadFiles]);
-    const handleBulkVisibilityChange = (0, react_1.useCallback)(async (visibility) => {
-        if (selectedIds.size === 0)
-            return;
-        try {
-            const updatePromises = Array.from(selectedIds).map(async (fileId) => {
-                try {
-                    await oxyServices.assetUpdateVisibility(fileId, visibility);
-                    return { success: true, fileId };
-                }
-                catch (error) {
-                    return { success: false, fileId, error };
-                }
-            });
-            const results = await Promise.allSettled(updatePromises);
-            const successful = results.filter(r => r.status === 'fulfilled' && r.value.success).length;
-            const failed = results.length - successful;
-            if (successful > 0) {
-                sonner_1.toast.success(t('fileManagement.toasts.visibilitySuccess', { count: successful, visibility }));
-                // Update file metadata in store
-                Array.from(selectedIds).forEach(fileId => {
-                    fileStore_1.useFileStore.getState().updateFile(fileId, {
-                        metadata: { ...files.find(f => f.id === fileId)?.metadata, visibility }
-                    });
-                });
-            }
-            if (failed > 0) {
-                sonner_1.toast.error(t('fileManagement.toasts.visibilityFailed', { count: failed }));
-            }
-            setTimeout(() => loadFiles('silent'), 800);
-        }
-        catch (error) {
-            sonner_1.toast.error(getErrorMessage(error) || t('fileManagement.toasts.visibilityError'));
-        }
-    }, [selectedIds, oxyServices, files, loadFiles]);
-    // Unified download function - works on all platforms
-    const handleFileDownload = async (fileId, filename) => {
-        try {
-            // Try to use the download URL with a simple approach
-            // On web, this creates a download link. On mobile, it opens the URL.
-            const downloadUrl = oxyServices.getFileDownloadUrl(fileId);
-            // For web platforms, use link download
-            if (typeof window !== 'undefined' && window.document) {
-                try {
-                    // Try simple link download first
-                    const link = document.createElement('a');
-                    link.href = downloadUrl;
-                    link.download = filename;
-                    link.target = '_blank';
-                    document.body.appendChild(link);
-                    link.click();
-                    document.body.removeChild(link);
-                    sonner_1.toast.success(t('fileManagement.toasts.downloadStarted'));
-                }
-                catch (linkError) {
-                    // Fallback to authenticated download
-                    const blob = await oxyServices.getFileContentAsBlob(fileId);
-                    const url = URL.createObjectURL(blob);
-                    const link = document.createElement('a');
-                    link.href = url;
-                    link.download = filename;
-                    document.body.appendChild(link);
-                    link.click();
-                    document.body.removeChild(link);
-                    // Clean up the blob URL
-                    URL.revokeObjectURL(url);
-                    sonner_1.toast.success(t('fileManagement.toasts.downloadSuccess'));
-                }
-            }
-            else {
-                // For mobile, open the URL (user can save from browser)
-                // Note: This is a simplified approach - for full mobile support,
-                // consider using expo-file-system or react-native-fs
-                sonner_1.toast.info(t('fileManagement.toasts.downloadMobile'));
-            }
-        }
-        catch (error) {
-            sonner_1.toast.error(getErrorMessage(error) || t('fileManagement.toasts.downloadFailed'));
-        }
-    };
-    const handleFileOpen = async (file) => {
-        if (selectMode) {
-            toggleSelect(file);
-            return;
-        }
-        try {
-            setLoadingFileContent(true);
-            setOpenedFile(file);
-            // For text files, images, and other viewable content, try to load the content
-            if (file.contentType.startsWith('text/') ||
-                file.contentType.includes('json') ||
-                file.contentType.includes('xml') ||
-                file.contentType.includes('javascript') ||
-                file.contentType.includes('typescript') ||
-                file.contentType.startsWith('image/') ||
-                file.contentType.includes('pdf') ||
-                file.contentType.startsWith('video/') ||
-                file.contentType.startsWith('audio/')) {
-                try {
-                    if (file.contentType.startsWith('image/') ||
-                        file.contentType.includes('pdf') ||
-                        file.contentType.startsWith('video/') ||
-                        file.contentType.startsWith('audio/')) {
-                        // For images, PDFs, videos, and audio, we'll use the URL directly
-                        const downloadUrl = oxyServices.getFileDownloadUrl(file.id);
-                        setFileContent(downloadUrl);
-                    }
-                    else {
-                        // For text files, get the content using authenticated request
-                        const content = await oxyServices.getFileContentAsText(file.id);
-                        setFileContent(content);
-                    }
-                }
-                catch (error) {
-                    if (getErrorMessage(error)?.includes('404') || getErrorMessage(error)?.includes('not found')) {
-                        sonner_1.toast.error(t('fileManagement.toasts.fileNotFoundContent'));
-                    }
-                    else {
-                        sonner_1.toast.error(t('fileManagement.toasts.loadContentFailed'));
-                    }
-                    setFileContent(null);
-                }
-            }
-            else {
-                // For non-viewable files, don't load content
-                setFileContent(null);
-            }
-        }
-        catch (error) {
-            sonner_1.toast.error(getErrorMessage(error) || t('fileManagement.toasts.openFailed'));
-        }
-        finally {
-            setLoadingFileContent(false);
-        }
-    };
-    const handleCloseFile = () => {
-        setOpenedFile(null);
-        setFileContent(null);
-        setShowFileDetailsInViewer(false);
-        // Don't reset view mode when closing a file
-    };
-    const showFileDetailsModal = (file) => {
-        setSelectedFile(file);
-        setShowFileDetails(true);
-    };
-    const renderSimplePhotoItem = (0, react_1.useCallback)((photo, index) => {
-        const downloadUrl = getSafeDownloadUrlCallback(photo, 'thumb');
-        // Calculate photo item width based on actual container size from bottom sheet
-        let itemsPerRow = 3; // Default for mobile
-        if (safeContainerWidth > 768)
-            itemsPerRow = 4; // Desktop/tablet
-        else if (safeContainerWidth > 480)
-            itemsPerRow = 3; // Large mobile
-        // Account for the photoScrollContainer padding (16px on each side = 32px total)
-        const scrollContainerPadding = 32; // Total horizontal padding from photoScrollContainer
-        const gaps = (itemsPerRow - 1) * 4; // Gap between items (4px)
-        const availableWidth = safeContainerWidth - scrollContainerPadding;
-        const itemWidth = (availableWidth - gaps) / itemsPerRow;
-        return ((0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { style: [
-                styles_1.fileManagementStyles.simplePhotoItem,
-                {
-                    width: itemWidth,
-                    height: itemWidth,
-                    marginRight: (index + 1) % itemsPerRow === 0 ? 0 : 4,
-                    ...(selectMode && selectedIds.has(photo.id) ? { borderWidth: 2, borderColor: themeStyles.primaryColor } : {})
-                }
-            ], onPress: () => handleFileOpen(photo), activeOpacity: 0.8, children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles_1.fileManagementStyles.simplePhotoContainer, children: [(0, jsx_runtime_1.jsx)(expo_image_1.Image, { source: { uri: downloadUrl }, style: styles_1.fileManagementStyles.simplePhotoImage, contentFit: "cover", transition: 120, cachePolicy: "memory-disk", onError: () => {
-                            // Photo failed to load, will show placeholder
-                        }, accessibilityLabel: photo.filename }), selectMode && ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles_1.fileManagementStyles.selectionBadge, children: (0, jsx_runtime_1.jsx)(vector_icons_1.Ionicons, { name: selectedIds.has(photo.id) ? 'checkmark-circle' : 'ellipse-outline', size: 20, color: selectedIds.has(photo.id) ? themeStyles.primaryColor : themeStyles.textColor }) }))] }) }, photo.id));
-    }, [oxyServices, safeContainerWidth, selectMode, selectedIds, themeStyles.primaryColor, themeStyles.textColor]);
-    const renderJustifiedPhotoItem = (0, react_1.useCallback)((photo, width, height, isLast) => {
-        const downloadUrl = getSafeDownloadUrlCallback(photo, 'thumb');
-        return ((0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { style: [
-                styles_1.fileManagementStyles.justifiedPhotoItem,
-                {
-                    width,
-                    height,
-                    ...(selectMode && selectedIds.has(photo.id) ? { borderWidth: 2, borderColor: themeStyles.primaryColor } : {}),
-                    ...(selectMode && multiSelect && selectedIds.size > 0 && !selectedIds.has(photo.id) ? { opacity: 0.4 } : {}),
-                },
-            ], onPress: () => handleFileOpen(photo), activeOpacity: 0.8, children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles_1.fileManagementStyles.justifiedPhotoContainer, children: [(0, jsx_runtime_1.jsx)(expo_image_1.Image, { source: { uri: downloadUrl }, style: styles_1.fileManagementStyles.justifiedPhotoImage, contentFit: "cover", transition: 120, cachePolicy: "memory-disk", onError: () => {
-                            // Photo failed to load, will show placeholder
-                        }, accessibilityLabel: photo.filename }), selectMode && ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles_1.fileManagementStyles.selectionBadge, children: (0, jsx_runtime_1.jsx)(vector_icons_1.Ionicons, { name: selectedIds.has(photo.id) ? 'checkmark-circle' : 'ellipse-outline', size: 20, color: selectedIds.has(photo.id) ? themeStyles.primaryColor : themeStyles.textColor }) }))] }) }, photo.id));
-    }, [oxyServices, selectMode, selectedIds, multiSelect, themeStyles.primaryColor, themeStyles.textColor]);
-    // Run initial load once per targetUserId change to avoid accidental loops
-    const lastLoadedFor = (0, react_1.useRef)(undefined);
-    (0, react_1.useEffect)(() => {
-        const key = targetUserId || 'anonymous';
-        if (lastLoadedFor.current !== key) {
-            lastLoadedFor.current = key;
-            loadFiles('initial');
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [targetUserId]);
-    const renderFileItem = (file) => {
-        const isImage = file.contentType.startsWith('image/');
-        const isPDF = file.contentType.includes('pdf');
-        const isVideo = file.contentType.startsWith('video/');
-        const isAudio = file.contentType.startsWith('audio/');
-        const hasPreview = isImage || isPDF || isVideo;
-        const borderColor = themeStyles.borderColor;
-        return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [styles_1.fileManagementStyles.fileItem, { backgroundColor: themeStyles.secondaryBackgroundColor, borderColor }, selectMode && selectedIds.has(file.id) && { borderColor: themeStyles.primaryColor, borderWidth: 2 }], children: [(0, jsx_runtime_1.jsxs)(react_native_1.TouchableOpacity, { style: styles_1.fileManagementStyles.fileContent, onPress: () => handleFileOpen(file), children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles_1.fileManagementStyles.filePreviewContainer, children: hasPreview ? ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles_1.fileManagementStyles.filePreview, children: [isImage && ((0, jsx_runtime_1.jsx)(expo_image_1.Image, { source: { uri: getSafeDownloadUrlCallback(file, 'thumb') }, style: styles_1.fileManagementStyles.previewImage, contentFit: "cover", transition: 120, cachePolicy: "memory-disk", onError: () => {
-                                            // Image preview failed to load
-                                        }, accessibilityLabel: file.filename })), isPDF && ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles_1.fileManagementStyles.pdfPreview, children: [(0, jsx_runtime_1.jsx)(vector_icons_1.Ionicons, { name: "document", size: 32, color: themeStyles.primaryColor }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles_1.fileManagementStyles.pdfLabel, { color: themeStyles.primaryColor }], children: "PDF" })] })), isVideo && ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles_1.fileManagementStyles.videoPreviewWrapper, children: [(0, jsx_runtime_1.jsx)(expo_image_1.Image, { source: { uri: getSafeDownloadUrlCallback(file, 'thumb') }, style: styles_1.fileManagementStyles.videoPosterImage, contentFit: "cover", transition: 120, cachePolicy: "memory-disk", onError: (_) => {
-                                                    // If thumbnail not available, we still show icon overlay
-                                                }, accessibilityLabel: `${file.filename} video thumbnail` }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles_1.fileManagementStyles.videoOverlay, children: (0, jsx_runtime_1.jsx)(vector_icons_1.Ionicons, { name: "play", size: 24, color: "#FFFFFF" }) })] })), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [styles_1.fileManagementStyles.fallbackIcon, { display: isImage ? 'none' : 'flex' }], children: (0, jsx_runtime_1.jsx)(vector_icons_1.Ionicons, { name: (0, fileManagement_1.getFileIcon)(file.contentType), size: 32, color: themeStyles.primaryColor }) }), selectMode && ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles_1.fileManagementStyles.selectionBadge, children: (0, jsx_runtime_1.jsx)(vector_icons_1.Ionicons, { name: selectedIds.has(file.id) ? 'checkmark-circle' : 'ellipse-outline', size: 22, color: selectedIds.has(file.id) ? themeStyles.primaryColor : themeStyles.textColor }) }))] })) : ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles_1.fileManagementStyles.fileIconContainer, children: (0, jsx_runtime_1.jsx)(vector_icons_1.Ionicons, { name: (0, fileManagement_1.getFileIcon)(file.contentType), size: 32, color: themeStyles.primaryColor }) })) }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles_1.fileManagementStyles.fileInfo, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles_1.fileManagementStyles.fileName, { color: themeStyles.textColor }], numberOfLines: 1, children: file.filename }), (0, jsx_runtime_1.jsxs)(react_native_1.Text, { style: [styles_1.fileManagementStyles.fileDetails, { color: themeStyles.isDarkTheme ? '#BBBBBB' : '#666666' }], children: [(0, fileManagement_1.formatFileSize)(file.length), " \u2022 ", new Date(file.uploadDate).toLocaleDateString()] }), file.metadata?.description && ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles_1.fileManagementStyles.fileDescription, { color: themeStyles.isDarkTheme ? '#AAAAAA' : '#888888' }], numberOfLines: 2, children: file.metadata.description }))] })] }), !selectMode && ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles_1.fileManagementStyles.fileActions, children: [hasPreview && ((0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { style: [styles_1.fileManagementStyles.actionButton, { backgroundColor: themeStyles.isDarkTheme ? '#333333' : '#F0F0F0' }], onPress: () => handleFileOpen(file), children: (0, jsx_runtime_1.jsx)(vector_icons_1.Ionicons, { name: "eye", size: 20, color: themeStyles.primaryColor }) })), (0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { style: [styles_1.fileManagementStyles.actionButton, { backgroundColor: themeStyles.isDarkTheme ? '#333333' : '#F0F0F0' }], onPress: () => handleFileDownload(file.id, file.filename), children: (0, jsx_runtime_1.jsx)(vector_icons_1.Ionicons, { name: "download", size: 20, color: themeStyles.primaryColor }) }), (0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { style: [styles_1.fileManagementStyles.actionButton, { backgroundColor: themeStyles.isDarkTheme ? '#400000' : '#FFEBEE' }], onPress: () => {
-                                handleFileDelete(file.id, file.filename);
-                            }, disabled: deleting === file.id, children: deleting === file.id ? ((0, jsx_runtime_1.jsx)(react_native_1.ActivityIndicator, { size: "small", color: themeStyles.dangerColor })) : ((0, jsx_runtime_1.jsx)(vector_icons_1.Ionicons, { name: "trash", size: 20, color: themeStyles.dangerColor })) })] }))] }, file.id));
-    };
-    // GroupedSection-based file items (for 'all' view) replacing legacy flat list look
-    // biome-ignore lint/suspicious/noExplicitAny: GroupedSection items have dynamic props
-    const groupedFileItems = (0, react_1.useMemo)(() => {
-        // filteredFiles is already sorted, so just use it directly
-        const sortedFiles = filteredFiles;
-        // Store file positions for scrolling
-        sortedFiles.forEach((file, index) => {
-            itemRefs.current.set(file.id, index);
-        });
-        return sortedFiles.map((file) => {
-            const isImage = file.contentType.startsWith('image/');
-            const isPDF = file.contentType.includes('pdf');
-            const isVideo = file.contentType.startsWith('video/');
-            const hasPreview = isImage || isPDF || isVideo;
-            const isSelected = selectedIds.has(file.id);
-            // Create customIcon for preview thumbnails (36x36 to match GroupedItem iconContainer)
-            let customIcon;
-            if (hasPreview) {
-                if (isImage) {
-                    customIcon = ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: { width: 36, height: 36, borderRadius: 18, overflow: 'hidden' }, children: (0, jsx_runtime_1.jsx)(expo_image_1.Image, { source: { uri: getSafeDownloadUrlCallback(file, 'thumb') }, style: { width: 36, height: 36 }, contentFit: "cover", transition: 120, cachePolicy: "memory-disk", onError: () => {
-                                // Image preview failed to load - will fallback to icon
-                            }, accessibilityLabel: file.filename }) }));
-                }
-                else if (isVideo) {
-                    customIcon = ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: { width: 36, height: 36, borderRadius: 18, overflow: 'hidden', backgroundColor: '#000000', position: 'relative' }, children: [(0, jsx_runtime_1.jsx)(expo_image_1.Image, { source: { uri: getSafeDownloadUrlCallback(file, 'thumb') }, style: { width: 36, height: 36 }, contentFit: "cover", transition: 120, cachePolicy: "memory-disk", onError: (_) => {
-                                    // If thumbnail not available, we still show icon overlay
-                                }, accessibilityLabel: `${file.filename} video thumbnail` }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, alignItems: 'center', justifyContent: 'center', backgroundColor: 'rgba(0,0,0,0.25)' }, children: (0, jsx_runtime_1.jsx)(vector_icons_1.Ionicons, { name: "play", size: 16, color: "#FFFFFF" }) })] }));
-                }
-                else if (isPDF) {
-                    customIcon = ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: { width: 36, height: 36, borderRadius: 18, alignItems: 'center', justifyContent: 'center', backgroundColor: '#FF6B6B20' }, children: (0, jsx_runtime_1.jsx)(vector_icons_1.Ionicons, { name: "document", size: 20, color: themeStyles.primaryColor }) }));
-                }
-            }
-            return {
-                id: file.id,
-                customIcon: customIcon,
-                icon: !hasPreview ? (0, fileManagement_1.getFileIcon)(file.contentType) : undefined,
-                iconColor: themeStyles.primaryColor,
-                title: file.filename,
-                subtitle: `${(0, fileManagement_1.formatFileSize)(file.length)} • ${new Date(file.uploadDate).toLocaleDateString()}`,
-                theme: theme,
-                onPress: () => {
-                    // Support selection in regular mode with long press or if already selecting
-                    if (!selectMode && selectedIds.size > 0) {
-                        // If already in selection mode (some files selected), toggle selection
-                        toggleSelect(file);
-                    }
-                    else {
-                        handleFileOpen(file);
-                    }
-                },
-                onLongPress: !selectMode ? () => {
-                    // Enable selection mode on long press
-                    if (selectedIds.size === 0) {
-                        setSelectedIds(new Set([file.id]));
-                    }
-                    else {
-                        toggleSelect(file);
-                    }
-                } : undefined,
-                showChevron: false,
-                dense: true,
-                multiRow: !!file.metadata?.description,
-                selected: (selectMode || selectedIds.size > 0) && isSelected,
-                // Hide action buttons when selecting (in selectMode or bulk operations mode)
-                customContent: (!selectMode && selectedIds.size === 0) ? ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles_1.fileManagementStyles.groupedActions, children: [(isImage || isVideo || file.contentType.includes('pdf')) && ((0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { style: [styles_1.fileManagementStyles.groupedActionBtn, { backgroundColor: themeStyles.isDarkTheme ? '#333333' : '#F0F0F0' }], onPress: () => handleFileOpen(file), children: (0, jsx_runtime_1.jsx)(vector_icons_1.Ionicons, { name: "eye", size: 18, color: themeStyles.primaryColor }) })), (0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { style: [styles_1.fileManagementStyles.groupedActionBtn, { backgroundColor: themeStyles.isDarkTheme ? '#333333' : '#F0F0F0' }], onPress: () => handleFileDownload(file.id, file.filename), children: (0, jsx_runtime_1.jsx)(vector_icons_1.Ionicons, { name: "download", size: 18, color: themeStyles.primaryColor }) }), (0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { style: [styles_1.fileManagementStyles.groupedActionBtn, { backgroundColor: themeStyles.isDarkTheme ? '#400000' : '#FFEBEE' }], onPress: () => handleFileDelete(file.id, file.filename), disabled: deleting === file.id, children: deleting === file.id ? ((0, jsx_runtime_1.jsx)(react_native_1.ActivityIndicator, { size: "small", color: themeStyles.dangerColor })) : ((0, jsx_runtime_1.jsx)(vector_icons_1.Ionicons, { name: "trash", size: 18, color: themeStyles.dangerColor })) })] })) : undefined,
-                customContentBelow: file.metadata?.description ? ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles_1.fileManagementStyles.groupedDescription, { color: themeStyles.isDarkTheme ? '#AAAAAA' : '#666666' }], numberOfLines: 2, children: file.metadata.description })) : undefined,
-            };
-        });
-    }, [filteredFiles, theme, themeStyles, deleting, handleFileDownload, handleFileDelete, handleFileOpen, getSafeDownloadUrlCallback, selectMode, selectedIds]);
-    // Scroll to selected file after selection
-    (0, react_1.useEffect)(() => {
-        if (lastSelectedFileId && selectMode) {
-            if (viewMode === 'all' && scrollViewRef.current) {
-                // Find the index of the selected file
-                const itemIndex = itemRefs.current.get(lastSelectedFileId);
-                if (itemIndex !== undefined && itemIndex >= 0) {
-                    // Estimate item height (GroupedItem with dense mode is approximately 60-70px)
-                    // Account for description rows which add extra height
-                    const baseItemHeight = 65;
-                    const descriptionHeight = 30; // Approximate height for description
-                    // Use filteredFiles which is already sorted according to user's selection
-                    const sortedFiles = filteredFiles;
-                    // Calculate total height up to this item
-                    let scrollPosition = 0;
-                    for (let i = 0; i <= itemIndex && i < sortedFiles.length; i++) {
-                        const file = sortedFiles[i];
-                        scrollPosition += baseItemHeight;
-                        if (file.metadata?.description) {
-                            scrollPosition += descriptionHeight;
-                        }
-                    }
-                    // Add header, controls, search, and stats height (approximately 250px)
-                    const headerHeight = 250;
-                    const finalScrollPosition = headerHeight + scrollPosition - 150; // Offset to show item near top
-                    // Use requestAnimationFrame to ensure DOM is updated before scrolling
-                    requestAnimationFrame(() => {
-                        requestAnimationFrame(() => {
-                            scrollViewRef.current?.scrollTo({
-                                y: Math.max(0, finalScrollPosition),
-                                animated: true,
-                            });
-                        });
-                    });
-                }
-            }
-            else if (viewMode === 'photos' && photoScrollViewRef.current) {
-                // For photo grid, find the photo index
-                const photos = filteredFiles.filter(file => file.contentType.startsWith('image/'));
-                const photoIndex = photos.findIndex(p => p.id === lastSelectedFileId);
-                if (photoIndex >= 0) {
-                    // Estimate photo item height based on grid layout
-                    // Calculate items per row
-                    let itemsPerRow = 3;
-                    if (safeContainerWidth > 768)
-                        itemsPerRow = 6;
-                    else if (safeContainerWidth > 480)
-                        itemsPerRow = 4;
-                    const scrollContainerPadding = 32;
-                    const gaps = (itemsPerRow - 1) * 4;
-                    const availableWidth = safeContainerWidth - scrollContainerPadding;
-                    const itemWidth = (availableWidth - gaps) / itemsPerRow;
-                    // Calculate row and approximate scroll position
-                    const row = Math.floor(photoIndex / itemsPerRow);
-                    const headerHeight = 250;
-                    const finalScrollPosition = headerHeight + (row * (itemWidth + 4)) - 150;
-                    // Use requestAnimationFrame to ensure DOM is updated before scrolling
-                    requestAnimationFrame(() => {
-                        requestAnimationFrame(() => {
-                            photoScrollViewRef.current?.scrollTo({
-                                y: Math.max(0, finalScrollPosition),
-                                animated: true,
-                            });
-                        });
-                    });
-                }
-            }
-        }
-    }, [lastSelectedFileId, selectMode, viewMode, filteredFiles, safeContainerWidth]);
-    // Clear selected file ID after scroll animation completes
-    (0, react_1.useEffect)(() => {
-        if (lastSelectedFileId && scrollViewRef.current) {
-            const timeoutId = setTimeout(() => {
-                setLastSelectedFileId(null);
-            }, 600); // Allow time for scroll animation to complete
-            return () => clearTimeout(timeoutId);
-        }
-    }, [lastSelectedFileId]);
-    const renderPhotoItem = (photo, index) => {
-        const downloadUrl = getSafeDownloadUrlCallback(photo, 'thumb');
-        // Calculate photo item width based on actual container size from bottom sheet
-        let itemsPerRow = 3; // Default for mobile
-        if (safeContainerWidth > 768)
-            itemsPerRow = 6; // Tablet/Desktop
-        else if (safeContainerWidth > 480)
-            itemsPerRow = 4; // Large mobile
-        // Account for the photoScrollContainer padding (16px on each side = 32px total)
-        const scrollContainerPadding = 32; // Total horizontal padding from photoScrollContainer
-        const gaps = (itemsPerRow - 1) * 4; // Gap between items
-        const availableWidth = safeContainerWidth - scrollContainerPadding;
-        const itemWidth = (availableWidth - gaps) / itemsPerRow;
-        return ((0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { style: [
-                styles_1.fileManagementStyles.photoItem,
-                {
-                    width: itemWidth,
-                    height: itemWidth,
-                }
-            ], onPress: () => handleFileOpen(photo), activeOpacity: 0.8, children: (0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles_1.fileManagementStyles.photoContainer, children: (0, jsx_runtime_1.jsx)(expo_image_1.Image, { source: { uri: downloadUrl }, style: styles_1.fileManagementStyles.photoImage, contentFit: "cover", transition: 120, cachePolicy: "memory-disk", onError: () => {
-                        // Image preview failed to load
-                    }, accessibilityLabel: photo.filename }) }) }, photo.id));
-    };
-    const renderPhotoGrid = (0, react_1.useCallback)(() => {
-        const photos = filteredFiles.filter(file => file.contentType.startsWith('image/'));
-        if (photos.length === 0) {
-            return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles_1.fileManagementStyles.emptyState, children: [(0, jsx_runtime_1.jsx)(vector_icons_1.Ionicons, { name: "images-outline", size: 64, color: themeStyles.isDarkTheme ? '#666666' : '#CCCCCC' }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles_1.fileManagementStyles.emptyStateTitle, { color: themeStyles.textColor }], children: t('fileManagement.emptyPhotos.title') }), (0, jsx_runtime_1.jsxs)(react_native_1.Text, { style: [styles_1.fileManagementStyles.emptyStateDescription, { color: themeStyles.isDarkTheme ? '#BBBBBB' : '#666666' }], children: [" ", user?.id === targetUserId
-                                ? t('fileManagement.emptyPhotos.ownDescription')
-                                : t('fileManagement.emptyPhotos.otherDescription'), " "] }), user?.id === targetUserId && ((0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { style: [styles_1.fileManagementStyles.emptyStateButton, { backgroundColor: themeStyles.primaryColor }], onPress: handleFileUpload, disabled: uploading || isPickingDocument, children: uploading ? ((0, jsx_runtime_1.jsx)(react_native_1.ActivityIndicator, { size: "small", color: "#FFFFFF" })) : isPickingDocument ? ((0, jsx_runtime_1.jsx)(react_native_1.ActivityIndicator, { size: "small", color: "#FFFFFF" })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(vector_icons_1.Ionicons, { name: "cloud-upload", size: 20, color: "#FFFFFF" }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles_1.fileManagementStyles.emptyStateButtonText, children: t('fileManagement.uploadPhotos') })] })) }))] }));
-        }
-        return ((0, jsx_runtime_1.jsxs)(react_native_1.ScrollView, { ref: photoScrollViewRef, style: styles_1.fileManagementStyles.scrollView, contentContainerStyle: styles_1.fileManagementStyles.photoScrollContainer, refreshControl: (0, jsx_runtime_1.jsx)(react_native_1.RefreshControl, { refreshing: refreshing, onRefresh: () => loadFiles('refresh'), tintColor: themeStyles.primaryColor }), showsVerticalScrollIndicator: false, onScroll: ({ nativeEvent }) => {
-                const { layoutMeasurement, contentOffset, contentSize } = nativeEvent;
-                const distanceFromBottom = contentSize.height - (contentOffset.y + layoutMeasurement.height);
-                if (distanceFromBottom < 200 && !paging.loadingMore && paging.hasMore) {
-                    loadFiles('more');
-                }
-            }, scrollEventThrottle: 250, children: [loadingDimensions && ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles_1.fileManagementStyles.dimensionsLoadingIndicator, children: [(0, jsx_runtime_1.jsx)(react_native_1.ActivityIndicator, { size: "small", color: themeStyles.primaryColor }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles_1.fileManagementStyles.dimensionsLoadingText, { color: themeStyles.isDarkTheme ? '#BBBBBB' : '#666666' }], children: t('fileManagement.loadingPhotoLayout') })] })), (0, jsx_runtime_1.jsx)(JustifiedPhotoGrid_1.default, { photos: photos, photoDimensions: photoDimensions, loadPhotoDimensions: loadPhotoDimensions, createJustifiedRows: createJustifiedRows, renderJustifiedPhotoItem: renderJustifiedPhotoItem, renderSimplePhotoItem: renderPhotoItem, textColor: themeStyles.textColor, containerWidth: safeContainerWidth })] }));
-    }, [
-        filteredFiles,
-        themeStyles,
-        user?.id,
-        targetUserId,
-        uploading,
-        handleFileUpload,
-        refreshing,
-        loadFiles,
-        loadingDimensions,
-        photoDimensions,
-        loadPhotoDimensions,
-        createJustifiedRows,
-        renderJustifiedPhotoItem,
-        renderPhotoItem,
-        safeContainerWidth
-    ]);
-    // Inline justified grid removed (moved to components/photogrid/JustifiedPhotoGrid.tsx)
-    const renderEmptyState = () => ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles_1.fileManagementStyles.emptyState, children: [(0, jsx_runtime_1.jsx)(vector_icons_1.Ionicons, { name: "folder-open-outline", size: 64, color: themeStyles.isDarkTheme ? '#666666' : '#CCCCCC' }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles_1.fileManagementStyles.emptyStateTitle, { color: themeStyles.textColor }], children: t('fileManagement.emptyFiles.title') }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles_1.fileManagementStyles.emptyStateDescription, { color: themeStyles.isDarkTheme ? '#BBBBBB' : '#666666' }], children: user?.id === targetUserId
-                    ? t('fileManagement.emptyFiles.ownDescription')
-                    : t('fileManagement.emptyFiles.otherDescription') }), user?.id === targetUserId && ((0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { style: [styles_1.fileManagementStyles.emptyStateButton, { backgroundColor: themeStyles.primaryColor }], onPress: handleFileUpload, disabled: uploading || isPickingDocument, children: uploading ? ((0, jsx_runtime_1.jsx)(react_native_1.ActivityIndicator, { size: "small", color: "#FFFFFF" })) : isPickingDocument ? ((0, jsx_runtime_1.jsx)(react_native_1.ActivityIndicator, { size: "small", color: "#FFFFFF" })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(vector_icons_1.Ionicons, { name: "cloud-upload", size: 20, color: "#FFFFFF" }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles_1.fileManagementStyles.emptyStateButtonText, children: t('fileManagement.uploadFiles') })] })) }))] }));
-    // Professional Skeleton Loading Component with Advanced Shimmer Effect
-    const SkeletonLoader = react_1.default.memo(() => {
-        const shimmerAnim = (0, react_1.useRef)(new react_native_1.Animated.Value(0)).current;
-        const skeletonContainerWidth = safeContainerWidth;
-        (0, react_1.useEffect)(() => {
-            const shimmer = react_native_1.Animated.loop(react_native_1.Animated.timing(shimmerAnim, {
-                toValue: 1,
-                duration: 2000,
-                easing: react_native_1.Easing.linear,
-                useNativeDriver: true,
-            }));
-            shimmer.start();
-            return () => shimmer.stop();
-        }, [shimmerAnim]);
-        // Create a sweeping shimmer effect
-        const shimmerTranslateX = shimmerAnim.interpolate({
-            inputRange: [0, 1],
-            outputRange: [-skeletonContainerWidth * 2, skeletonContainerWidth * 2],
-        });
-        const SkeletonBox = ({ width, height, borderRadius = 8, style, delay = 0 }) => {
-            const delayedTranslateX = shimmerAnim.interpolate({
-                inputRange: [0, 1],
-                outputRange: [-skeletonContainerWidth * 2 + delay, skeletonContainerWidth * 2 + delay],
-            });
-            return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [
-                    {
-                        width,
-                        height,
-                        borderRadius,
-                        backgroundColor: themeStyles.isDarkTheme ? '#1E1E1E' : '#F5F5F5',
-                        overflow: 'hidden',
-                        position: 'relative',
-                    },
-                    style,
-                ], children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { style: {
-                            position: 'absolute',
-                            top: 0,
-                            left: 0,
-                            right: 0,
-                            bottom: 0,
-                            backgroundColor: themeStyles.isDarkTheme ? '#1E1E1E' : '#F5F5F5',
-                        } }), (0, jsx_runtime_1.jsx)(react_native_1.Animated.View, { style: {
-                            position: 'absolute',
-                            top: 0,
-                            left: 0,
-                            width: '100%',
-                            height: '100%',
-                            transform: [{ translateX: delayedTranslateX }],
-                        }, children: (0, jsx_runtime_1.jsx)(react_native_1.View, { style: {
-                                width: skeletonContainerWidth,
-                                height: '100%',
-                                backgroundColor: themeStyles.isDarkTheme
-                                    ? 'rgba(255, 255, 255, 0.08)'
-                                    : 'rgba(255, 255, 255, 0.8)',
-                                shadowColor: themeStyles.isDarkTheme ? '#000' : '#FFF',
-                                shadowOffset: { width: 0, height: 0 },
-                                shadowOpacity: 0.3,
-                                shadowRadius: 10,
-                            } }) })] }));
-        };
-        // Skeleton file item matching GroupedSection structure
-        const SkeletonFileItem = ({ index }) => ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [
-                {
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                    paddingHorizontal: 16,
-                    paddingVertical: 12,
-                    backgroundColor: themeStyles.isDarkTheme ? '#121212' : '#FFFFFF',
-                    borderBottomWidth: react_native_1.StyleSheet.hairlineWidth,
-                    borderBottomColor: themeStyles.borderColor,
-                },
-            ], children: [(0, jsx_runtime_1.jsx)(SkeletonBox, { width: 44, height: 44, borderRadius: 8, delay: index * 50 }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: { flex: 1, marginLeft: 12, justifyContent: 'center' }, children: [(0, jsx_runtime_1.jsx)(SkeletonBox, { width: index % 3 === 0 ? '85%' : index % 3 === 1 ? '70%' : '90%', height: 16, style: { marginBottom: 8 }, delay: index * 50 + 20 }), (0, jsx_runtime_1.jsx)(SkeletonBox, { width: index % 2 === 0 ? '50%' : '60%', height: 12, delay: index * 50 + 40 })] })] }));
-        return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [styles_1.fileManagementStyles.container, { backgroundColor }], children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [styles_1.fileManagementStyles.header, { borderBottomColor: themeStyles.borderColor, borderBottomWidth: react_native_1.StyleSheet.hairlineWidth }], children: [(0, jsx_runtime_1.jsx)(SkeletonBox, { width: 44, height: 44, borderRadius: 12 }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [styles_1.fileManagementStyles.headerTitleContainer, { flex: 1 }], children: [(0, jsx_runtime_1.jsx)(SkeletonBox, { width: 140, height: 20, style: { marginBottom: 6 } }), (0, jsx_runtime_1.jsx)(SkeletonBox, { width: 100, height: 14 })] }), (0, jsx_runtime_1.jsx)(SkeletonBox, { width: 44, height: 44, borderRadius: 12 })] }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles_1.fileManagementStyles.controlsBar, children: [(0, jsx_runtime_1.jsx)(SkeletonBox, { width: 100, height: 36, borderRadius: 18 }), (0, jsx_runtime_1.jsx)(SkeletonBox, { width: 44, height: 44, borderRadius: 22 })] }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [styles_1.fileManagementStyles.searchContainer, {
-                            backgroundColor: themeStyles.colors.card,
-                        }], children: (0, jsx_runtime_1.jsx)(SkeletonBox, { width: "100%", height: 44, borderRadius: 12 }) }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [styles_1.fileManagementStyles.statsContainer, {
-                            backgroundColor: themeStyles.colors.card,
-                        }], children: [1, 2, 3].map((i) => ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles_1.fileManagementStyles.statItem, children: [(0, jsx_runtime_1.jsx)(SkeletonBox, { width: 50, height: 20, style: { marginBottom: 4 }, delay: i * 30 }), (0, jsx_runtime_1.jsx)(SkeletonBox, { width: 40, height: 14, delay: i * 30 + 15 })] }, i))) }), (0, jsx_runtime_1.jsx)(react_native_1.ScrollView, { style: styles_1.fileManagementStyles.scrollView, contentContainerStyle: styles_1.fileManagementStyles.scrollContainer, showsVerticalScrollIndicator: false, children: (0, jsx_runtime_1.jsx)(react_native_1.View, { style: {
-                            backgroundColor: themeStyles.colors.card,
-                            borderRadius: 18,
-                            overflow: 'hidden',
-                            marginTop: 8,
-                        }, children: [1, 2, 3, 4, 5, 6, 7, 8].map((i) => ((0, jsx_runtime_1.jsx)(SkeletonFileItem, { index: i }, i))) }) })] }));
-    });
-    if (loading) {
-        return (0, jsx_runtime_1.jsx)(SkeletonLoader, {});
-    }
-    // If a file is opened, show the file viewer
-    if (!selectMode && openedFile) {
-        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(FileViewer_1.FileViewer, { file: openedFile, fileContent: fileContent, loadingFileContent: loadingFileContent, showFileDetailsInViewer: showFileDetailsInViewer, onToggleDetails: () => setShowFileDetailsInViewer(!showFileDetailsInViewer), onClose: handleCloseFile, onDownload: handleFileDownload, onDelete: handleFileDelete, themeStyles: themeStyles, isOwner: user?.id === targetUserId }), (0, jsx_runtime_1.jsx)(FileDetailsModal_1.FileDetailsModal, { visible: showFileDetails, file: selectedFile, onClose: () => setShowFileDetails(false), onDownload: handleFileDownload, onDelete: handleFileDelete, themeStyles: themeStyles, isOwner: user?.id === targetUserId })] }));
-    }
-    // If upload preview is showing, render it inline instead of the file list
-    if (showUploadPreview) {
-        return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles_1.fileManagementStyles.container, children: [(0, jsx_runtime_1.jsx)(Header_1.default, { title: t('fileManagement.reviewFiles'), subtitle: t('fileManagement.readyToUpload', { count: pendingFiles.length }), onBack: handleCancelUpload, showBackButton: true, variant: "minimal", elevation: "none", titleAlignment: "left" }), (0, jsx_runtime_1.jsx)(UploadPreview_1.UploadPreview, { visible: true, pendingFiles: pendingFiles, onConfirm: handleConfirmUpload, onCancel: handleCancelUpload, onRemoveFile: removePendingFile, themeStyles: themeStyles, inline: true })] }));
-    }
-    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles_1.fileManagementStyles.container, children: [(0, jsx_runtime_1.jsx)(Header_1.default, { title: selectMode ? (multiSelect ? (maxSelection ? t('fileManagement.selectedWithMax', { count: selectedIds.size, max: maxSelection }) : t('fileManagement.selected', { count: selectedIds.size })) : t('fileManagement.selectFile')) : (viewMode === 'photos' ? t('fileManagement.photos') : t('fileManagement.title')), subtitle: selectMode ? (multiSelect ? t('fileManagement.available', { count: filteredFiles.length }) : t('fileManagement.tapToSelect')) : (filteredFiles.length === 1 ? t('fileManagement.itemCount', { count: filteredFiles.length }) : t('fileManagement.itemCount_plural', { count: filteredFiles.length })), rightActions: selectMode && multiSelect ? [
-                    {
-                        key: 'clear',
-                        text: t('fileManagement.clear'),
-                        onPress: () => setSelectedIds(new Set()),
-                        disabled: selectedIds.size === 0,
-                    },
-                    {
-                        key: 'confirm',
-                        text: t('fileManagement.confirm'),
-                        onPress: confirmMultiSelection,
-                        disabled: selectedIds.size === 0,
-                    }
-                ] : !selectMode && selectedIds.size > 0 ? [
-                    {
-                        key: 'clear',
-                        text: t('fileManagement.clear'),
-                        onPress: () => setSelectedIds(new Set()),
-                    },
-                    {
-                        key: 'delete',
-                        text: t('fileManagement.delete', { count: selectedIds.size }),
-                        onPress: handleBulkDelete,
-                        icon: 'delete',
-                    },
-                    {
-                        key: 'visibility',
-                        text: t('fileManagement.visibility'),
-                        onPress: () => {
-                            // Show visibility options menu
-                            react_native_1.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') },
-                            ]);
-                        },
-                        icon: 'eye',
-                    }
-                ] : undefined, onBack: onClose || goBack, showBackButton: true, variant: "minimal", elevation: "none", titleAlignment: "left" }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles_1.fileManagementStyles.controlsBar, children: [(0, jsx_runtime_1.jsx)(react_native_1.ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, style: styles_1.fileManagementStyles.viewModeScroll, children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [
-                                styles_1.fileManagementStyles.viewModeToggle,
-                                {
-                                    backgroundColor: themeStyles.colors.card,
-                                }
-                            ], children: [(0, jsx_runtime_1.jsx)(AnimatedButton, { isSelected: viewMode === 'all', onPress: () => setViewMode('all'), icon: viewMode === 'all' ? 'folder' : 'folder-outline', primaryColor: themeStyles.primaryColor, textColor: themeStyles.textColor, style: styles_1.fileManagementStyles.viewModeButton }), (0, jsx_runtime_1.jsx)(AnimatedButton, { isSelected: viewMode === 'photos', onPress: () => setViewMode('photos'), icon: viewMode === 'photos' ? 'image-multiple' : 'image-multiple-outline', primaryColor: themeStyles.primaryColor, textColor: themeStyles.textColor, style: styles_1.fileManagementStyles.viewModeButton }), (0, jsx_runtime_1.jsx)(AnimatedButton, { isSelected: viewMode === 'videos', onPress: () => setViewMode('videos'), icon: viewMode === 'videos' ? 'video' : 'video-outline', primaryColor: themeStyles.primaryColor, textColor: themeStyles.textColor, style: styles_1.fileManagementStyles.viewModeButton }), (0, jsx_runtime_1.jsx)(AnimatedButton, { isSelected: viewMode === 'documents', onPress: () => setViewMode('documents'), icon: viewMode === 'documents' ? 'file-document' : 'file-document-outline', primaryColor: themeStyles.primaryColor, textColor: themeStyles.textColor, style: styles_1.fileManagementStyles.viewModeButton }), (0, jsx_runtime_1.jsx)(AnimatedButton, { isSelected: viewMode === 'audio', onPress: () => setViewMode('audio'), icon: viewMode === 'audio' ? 'music-note' : 'music-note-outline', primaryColor: themeStyles.primaryColor, textColor: themeStyles.textColor, style: styles_1.fileManagementStyles.viewModeButton })] }) }), (0, jsx_runtime_1.jsxs)(react_native_1.TouchableOpacity, { style: [styles_1.fileManagementStyles.sortButton, {
-                                backgroundColor: themeStyles.colors.card,
-                            }], onPress: () => {
-                            // Cycle through sort options: date -> size -> name -> type -> date
-                            const sortOrder = ['date', 'size', 'name', 'type'];
-                            const currentIndex = sortOrder.indexOf(sortBy);
-                            const nextIndex = (currentIndex + 1) % sortOrder.length;
-                            setSortBy(sortOrder[nextIndex]);
-                            // Toggle order when cycling back to date
-                            if (nextIndex === 0) {
-                                setSortOrder(prev => prev === 'asc' ? 'desc' : 'asc');
-                            }
-                        }, children: [(0, jsx_runtime_1.jsx)(vector_icons_2.MaterialCommunityIcons, { name: sortBy === 'date' ? 'calendar' :
-                                    sortBy === 'size' ? 'sort-numeric-variant' :
-                                        sortBy === 'name' ? 'sort-alphabetical-variant' : 'file-document-outline', size: 16, color: themeStyles.textColor }), (0, jsx_runtime_1.jsx)(vector_icons_2.MaterialCommunityIcons, { name: sortOrder === 'asc' ? 'arrow-up' : 'arrow-down', size: 14, color: themeStyles.colors.secondaryText })] }), user?.id === targetUserId && (!selectMode || (selectMode && allowUploadInSelectMode)) && ((0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { style: [styles_1.fileManagementStyles.uploadButton, { backgroundColor: themeStyles.primaryColor }], onPress: handleFileUpload, disabled: uploading || isPickingDocument, children: uploading ? ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles_1.fileManagementStyles.uploadProgress, children: [(0, jsx_runtime_1.jsx)(react_native_1.ActivityIndicator, { size: "small", color: "#FFFFFF" }), uploadProgress && ((0, jsx_runtime_1.jsxs)(react_native_1.Text, { style: styles_1.fileManagementStyles.uploadProgressText, children: [uploadProgress.current, "/", uploadProgress.total] }))] })) : isPickingDocument ? ((0, jsx_runtime_1.jsx)(react_native_1.ActivityIndicator, { size: "small", color: "#FFFFFF" })) : ((0, jsx_runtime_1.jsx)(vector_icons_1.Ionicons, { name: "add", size: 22, color: "#FFFFFF" })) }))] }), files.length > 0 && (viewMode === 'all' || files.some(f => f.contentType.startsWith('image/'))) && ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [
-                    styles_1.fileManagementStyles.searchContainer,
-                    {
-                        backgroundColor: themeStyles.colors.card,
-                    }
-                ], children: [(0, jsx_runtime_1.jsx)(vector_icons_1.Ionicons, { name: "search", size: 22, color: themeStyles.colors.icon }), (0, jsx_runtime_1.jsx)(react_native_1.TextInput, { style: [styles_1.fileManagementStyles.searchInput, { color: themeStyles.textColor }], placeholder: viewMode === 'photos' ? t('fileManagement.searchPhotos') : t('fileManagement.searchFiles'), placeholderTextColor: themeStyles.colors.secondaryText, value: searchQuery, onChangeText: setSearchQuery }), searchQuery.length > 0 && ((0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { onPress: () => setSearchQuery(''), style: styles_1.fileManagementStyles.searchClearButton, children: (0, jsx_runtime_1.jsx)(vector_icons_1.Ionicons, { name: "close-circle", size: 22, color: themeStyles.colors.icon }) }))] })), files.length > 0 && ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [
-                    styles_1.fileManagementStyles.statsContainer,
-                    {
-                        backgroundColor: themeStyles.colors.card,
-                    }
-                ], children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles_1.fileManagementStyles.statItem, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles_1.fileManagementStyles.statValue, { color: themeStyles.textColor }], children: filteredFiles.length }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles_1.fileManagementStyles.statLabel, { color: themeStyles.colors.secondaryText }], children: searchQuery.length > 0 ? t('fileManagement.found') : (filteredFiles.length === 1 ? (viewMode === 'photos' ? t('fileManagement.photo') : t('fileManagement.file')) : (viewMode === 'photos' ? t('fileManagement.photos_stat') : t('fileManagement.files'))) })] }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles_1.fileManagementStyles.statItem, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles_1.fileManagementStyles.statValue, { color: themeStyles.textColor }], children: (0, fileManagement_1.formatFileSize)(filteredFiles.reduce((total, file) => total + file.length, 0)) }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles_1.fileManagementStyles.statLabel, { color: themeStyles.colors.secondaryText }], children: searchQuery.length > 0 ? t('fileManagement.size') : t('fileManagement.totalSize') })] }), searchQuery.length > 0 && ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles_1.fileManagementStyles.statItem, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles_1.fileManagementStyles.statValue, { color: themeStyles.textColor }], children: files.length }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles_1.fileManagementStyles.statLabel, { color: themeStyles.colors.secondaryText }], children: t('fileManagement.total') })] }))] })), viewMode === 'photos' ? (renderPhotoGrid()) : ((0, jsx_runtime_1.jsx)(react_native_1.ScrollView, { ref: scrollViewRef, style: styles_1.fileManagementStyles.scrollView, contentContainerStyle: styles_1.fileManagementStyles.scrollContainer, refreshControl: (0, jsx_runtime_1.jsx)(react_native_1.RefreshControl, { refreshing: refreshing, onRefresh: () => loadFiles('refresh'), tintColor: themeStyles.primaryColor }), onScroll: ({ nativeEvent }) => {
-                    const { layoutMeasurement, contentOffset, contentSize } = nativeEvent;
-                    const distanceFromBottom = contentSize.height - (contentOffset.y + layoutMeasurement.height);
-                    if (distanceFromBottom < 200 && !paging.loadingMore && paging.hasMore) {
-                        loadFiles('more');
-                    }
-                }, scrollEventThrottle: 250, children: filteredFiles.length === 0 && searchQuery.length > 0 ? ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles_1.fileManagementStyles.emptyState, children: [(0, jsx_runtime_1.jsx)(vector_icons_1.Ionicons, { name: "search", size: 64, color: themeStyles.isDarkTheme ? '#666666' : '#CCCCCC' }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles_1.fileManagementStyles.emptyStateTitle, { color: themeStyles.textColor }], children: t('fileManagement.noResults.title') }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles_1.fileManagementStyles.emptyStateDescription, { color: themeStyles.isDarkTheme ? '#BBBBBB' : '#666666' }], children: t('fileManagement.noResults.description', { query: searchQuery }) }), (0, jsx_runtime_1.jsxs)(react_native_1.TouchableOpacity, { style: [styles_1.fileManagementStyles.emptyStateButton, { backgroundColor: themeStyles.primaryColor }], onPress: () => setSearchQuery(''), children: [(0, jsx_runtime_1.jsx)(vector_icons_1.Ionicons, { name: "refresh", size: 20, color: "#FFFFFF" }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles_1.fileManagementStyles.emptyStateButtonText, children: t('fileManagement.clearSearch') })] })] })) : filteredFiles.length === 0 ? renderEmptyState() : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.GroupedSection, { items: groupedFileItems }), paging.loadingMore && ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles_1.fileManagementStyles.loadingMoreBar, children: [(0, jsx_runtime_1.jsx)(react_native_1.ActivityIndicator, { size: "small", color: themeStyles.primaryColor }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles_1.fileManagementStyles.loadingMoreText, { color: themeStyles.textColor }], children: t('fileManagement.loadingMore') })] }))] })) })), !selectMode && ((0, jsx_runtime_1.jsx)(FileDetailsModal_1.FileDetailsModal, { visible: showFileDetails, file: selectedFile, onClose: () => setShowFileDetails(false), onDownload: handleFileDownload, onDelete: handleFileDelete, themeStyles: themeStyles, isOwner: user?.id === targetUserId })), !selectMode && uploading && ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: [styles_1.fileManagementStyles.uploadBannerContainer, { pointerEvents: 'none' }], children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [styles_1.fileManagementStyles.uploadBanner, { backgroundColor: themeStyles.isDarkTheme ? '#222831EE' : '#FFFFFFEE', borderColor: themeStyles.borderColor }], children: [(0, jsx_runtime_1.jsx)(vector_icons_1.Ionicons, { name: "cloud-upload", size: 18, color: themeStyles.primaryColor }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles_1.fileManagementStyles.uploadBannerContent, children: [(0, jsx_runtime_1.jsxs)(react_native_1.Text, { style: [styles_1.fileManagementStyles.uploadBannerText, { color: themeStyles.textColor }], children: [t('fileManagement.uploading'), uploadProgress ? ` ${uploadProgress.current}/${uploadProgress.total}` : '...'] }), uploadProgress && uploadProgress.total > 0 && ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: [styles_1.fileManagementStyles.uploadProgressBarContainer, { backgroundColor: themeStyles.isDarkTheme ? 'rgba(255,255,255,0.1)' : 'rgba(0,0,0,0.1)' }], children: (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [
-                                            styles_1.fileManagementStyles.uploadProgressBar,
-                                            {
-                                                width: `${(uploadProgress.current / uploadProgress.total) * 100}%`,
-                                                backgroundColor: themeStyles.primaryColor
-                                            }
-                                        ] }) }))] }), (0, jsx_runtime_1.jsx)(react_native_1.ActivityIndicator, { size: "small", color: themeStyles.primaryColor })] }) }))] }));
-};
-// Styles have been moved to components/fileManagement/styles.ts
-exports.default = FileManagementScreen;