@oxyhq/services 6.9.45 → 6.10.1

package/src/ui/screens/FileManagementScreen.tsx

@@ -11,8 +11,20 @@ import {
     Image,
     Animated,
     Easing,
+    FlatList,
+    AccessibilityInfo,
+    Platform,
+    useWindowDimensions,
 } from 'react-native';
 import { Image as ExpoImage } from 'expo-image';
+import Reanimated, {
+    FadeIn,
+    useAnimatedStyle,
+    useSharedValue,
+    withSequence,
+    withSpring,
+    withTiming,
+} from 'react-native-reanimated';
 import type { FileManagementScreenProps } from '../types/fileManagement';
 
 // Lazy load expo-document-picker (optional dependency)
@@ -27,17 +39,14 @@ const loadDocumentPicker = async () => {
         throw new Error('expo-document-picker is not installed. Please install it: npx expo install expo-document-picker');
     }
 };
-import { toast } from '../../lib/sonner';
-import * as Prompt from '@oxyhq/bloom/prompt';
-import { usePromptControl } from '@oxyhq/bloom/prompt';
-import { Ionicons } from '@expo/vector-icons';
-// @ts-ignore - MaterialCommunityIcons is available at runtime
-import { MaterialCommunityIcons } from '@expo/vector-icons';
-import type { FileMetadata } from '@oxyhq/core';
+import { Dialog, toast, useDialogControl } from '@oxyhq/bloom';
+import { Ionicons, MaterialCommunityIcons } from '@expo/vector-icons';
+import type { AssetUploadInput, FileMetadata, RNFileDescriptor } from '@oxyhq/core';
+import { getErrorMessage as getOxyErrorMessage } from '@oxyhq/core';
 import { useFileStore, useFiles, useUploading as useUploadingStore, useUploadAggregateProgress, useDeleting as useDeletingStore } from '../stores/fileStore';
 import Header from '../components/Header';
 import JustifiedPhotoGrid from '../components/photogrid/JustifiedPhotoGrid';
-import { GroupedSection } from '../components';
+import { SettingsListGroup, SettingsListItem } from '@oxyhq/bloom/settings-list';
 import { useTheme } from '@oxyhq/bloom/theme';
 import { useOxy } from '../context/OxyContext';
 import { useI18n } from '../hooks/useI18n';
@@ -51,13 +60,123 @@ import {
 import { FileViewer } from '../components/fileManagement/FileViewer';
 import { FileDetailsModal } from '../components/fileManagement/FileDetailsModal';
 import { UploadPreview } from '../components/fileManagement/UploadPreview';
-import { useDialogControl } from '@oxyhq/bloom/dialog';
-import { fileManagementStyles } from '../components/fileManagement/styles';
+import { fileManagementStyles, photoPickerStyles } from '../components/fileManagement/styles';
 import type { OnConfirmFileSelection } from '../types/fileManagement';
 
-/** Extract error message from unknown error type */
-const getErrorMessage = (error: unknown): string | undefined =>
-    error instanceof Error ? getErrorMessage(error) : typeof error === 'string' ? error : undefined;
+/**
+ * Extract error message from unknown error type.
+ * Delegates to the canonical `getErrorMessage` in `@oxyhq/core` and returns
+ * `undefined` for empty results (so callers can fall back to a translated
+ * message via `||`).
+ */
+const getErrorMessage = (error: unknown): string | undefined => {
+    if (error == null) return undefined;
+    const message = getOxyErrorMessage(error, '');
+    return message ? message : undefined;
+};
+
+/**
+ * A picker-produced file ready to upload. On web this is a real `File`
+ * (carrying an optional `uri` for preview). On native, it's an
+ * {@link RNFileDescriptor} — passed straight to FormData by `assetUpload`.
+ */
+type UploadCandidate = (File & { uri?: string }) | RNFileDescriptor;
+
+/** Returns the display name for either a web File or an RN descriptor. */
+const candidateName = (candidate: UploadCandidate, fallback: string): string =>
+    (candidate.name && typeof candidate.name === 'string' ? candidate.name : fallback);
+
+/** Returns the byte size for either a web File or an RN descriptor (0 if unknown). */
+const candidateSize = (candidate: UploadCandidate): number => {
+    const size = (candidate as { size?: number }).size;
+    return typeof size === 'number' && Number.isFinite(size) ? size : 0;
+};
+
+/** Returns the mime type for either a web File or an RN descriptor. */
+const candidateType = (candidate: UploadCandidate): string => {
+    const value = (candidate as { type?: string }).type;
+    return typeof value === 'string' && value.length > 0 ? value : 'application/octet-stream';
+};
+
+/** Returns the preview URI for an upload candidate, if available. */
+const candidateUri = (candidate: UploadCandidate): string | undefined => {
+    const uri = (candidate as { uri?: string }).uri;
+    return typeof uri === 'string' && uri.length > 0 ? uri : undefined;
+};
+
+/**
+ * Haptic feedback wrapper. `expo-haptics` is an optional dependency — when not
+ * installed (or on web), all calls degrade silently. We resolve the module
+ * once and cache the promise so subsequent calls don't repeat the dynamic
+ * import. Matches the pattern used by AvatarCropScreen.
+ */
+type HapticImpact = 'light' | 'medium' | 'heavy';
+type HapticNotification = 'success' | 'warning' | 'error';
+interface HapticsModule {
+    impactAsync: (style: unknown) => Promise<void>;
+    notificationAsync: (type: unknown) => Promise<void>;
+    selectionAsync: () => Promise<void>;
+    ImpactFeedbackStyle: { Light: unknown; Medium: unknown; Heavy: unknown };
+    NotificationFeedbackType: { Success: unknown; Warning: unknown; Error: unknown };
+}
+
+let hapticsModulePromise: Promise<HapticsModule | null> | null = null;
+const getHaptics = (): Promise<HapticsModule | null> => {
+    if (Platform.OS === 'web') return Promise.resolve(null);
+    if (hapticsModulePromise) return hapticsModulePromise;
+    hapticsModulePromise = (async () => {
+        try {
+            const mod = (await import('expo-haptics')) as unknown as HapticsModule;
+            if (!mod || typeof mod.impactAsync !== 'function') return null;
+            return mod;
+        } catch {
+            return null;
+        }
+    })();
+    return hapticsModulePromise;
+};
+
+const hapticImpact = async (style: HapticImpact): Promise<void> => {
+    const h = await getHaptics();
+    if (!h) return;
+    const styleEnum =
+        style === 'heavy'
+            ? h.ImpactFeedbackStyle.Heavy
+            : style === 'medium'
+                ? h.ImpactFeedbackStyle.Medium
+                : h.ImpactFeedbackStyle.Light;
+    try {
+        await h.impactAsync(styleEnum);
+    } catch {
+        // Silent — haptics are non-critical UX polish.
+    }
+};
+
+const hapticSelection = async (): Promise<void> => {
+    const h = await getHaptics();
+    if (!h) return;
+    try {
+        await h.selectionAsync();
+    } catch {
+        // Silent.
+    }
+};
+
+const hapticNotification = async (type: HapticNotification): Promise<void> => {
+    const h = await getHaptics();
+    if (!h) return;
+    const typeEnum =
+        type === 'error'
+            ? h.NotificationFeedbackType.Error
+            : type === 'warning'
+                ? h.NotificationFeedbackType.Warning
+                : h.NotificationFeedbackType.Success;
+    try {
+        await h.notificationAsync(typeEnum);
+    } catch {
+        // Silent.
+    }
+};
 
 // Animated button component for smooth transitions
 const AnimatedButton: React.FC<{
@@ -67,7 +186,8 @@ const AnimatedButton: React.FC<{
     primaryColor: string;
     textColor: string;
     style: Record<string, unknown>;
-}> = ({ isSelected, onPress, icon, primaryColor, textColor, style }) => {
+    accessibilityLabel: string;
+}> = ({ isSelected, onPress, icon, primaryColor, textColor, style, accessibilityLabel }) => {
     const animatedValue = useRef(new Animated.Value(isSelected ? 1 : 0)).current;
 
     useEffect(() => {
@@ -84,13 +204,14 @@ const AnimatedButton: React.FC<{
         outputRange: ['transparent', primaryColor],
     });
 
-    const iconColor = animatedValue.interpolate({
-        inputRange: [0, 1],
-        outputRange: [textColor, '#FFFFFF'],
-    });
-
     return (
-        <TouchableOpacity onPress={onPress} activeOpacity={0.7}>
+        <TouchableOpacity
+            onPress={onPress}
+            activeOpacity={0.7}
+            accessibilityRole="button"
+            accessibilityLabel={accessibilityLabel}
+            accessibilityState={{ selected: isSelected }}
+        >
             <Animated.View
                 style={[
                     style,
@@ -111,6 +232,518 @@ const AnimatedButton: React.FC<{
     );
 };
 
+/**
+ * Props for the dedicated photo picker view. Used by FileManagementScreen
+ * only when `selectMode + image-only` is active. All callbacks are wired by
+ * the parent — this component is purely presentational.
+ */
+interface PhotoPickerViewProps {
+    photos: FileMetadata[];
+    selectedIds: Set<string>;
+    multiSelect: boolean;
+    maxSelection?: number;
+    allowUpload: boolean;
+    refreshing: boolean;
+    uploading: boolean;
+    isPickingDocument: boolean;
+    uploadProgress: { current: number; total: number } | null;
+    hasMore: boolean;
+    loadingMore: boolean;
+    reduceMotion: boolean;
+    getThumbUrl: (file: FileMetadata, variant?: string) => string;
+    primaryColor: string;
+    isOwner: boolean;
+    onTogglePhoto: (photo: FileMetadata) => void;
+    onPreviewPhoto: (photo: FileMetadata) => void;
+    onUpload: () => void;
+    onRefresh: () => void;
+    onLoadMore: () => void;
+    onCancel: () => void;
+    onConfirm: () => void;
+    t: (key: string, vars?: Record<string, string | number>) => string;
+}
+
+/**
+ * A single photo cell. Memoized so re-renders during selection only touch
+ * affected cells — selection of one photo must not redraw the whole grid.
+ *
+ * Apple Photos pattern: when any cell is selected, *non-selected* siblings
+ * fade to 0.6 opacity to focus attention on the active selection.
+ */
+const PhotoPickerCell = React.memo(function PhotoPickerCell(props: {
+    photo: FileMetadata;
+    size: number;
+    marginRight: number;
+    marginBottom: number;
+    isSelected: boolean;
+    selectionIndex: number; // 1-based for badge; 0 if not selected
+    dim: boolean; // any selection exists and this cell is not selected
+    primaryColor: string;
+    thumbUrl: string;
+    enterIndex: number;
+    reduceMotion: boolean;
+    onPress: () => void;
+    onLongPress: () => void;
+    a11yLabel: string;
+}) {
+    const {
+        photo, size, marginRight, marginBottom, isSelected, selectionIndex,
+        dim, primaryColor, thumbUrl, enterIndex, reduceMotion, onPress,
+        onLongPress, a11yLabel,
+    } = props;
+
+    // Cap the cumulative stagger at ~800ms total so the very long grid does
+    // not keep fading in late tiles. Beyond ~53 tiles the delay maxes out.
+    const STAGGER_PER_CELL_MS = 15;
+    const MAX_TOTAL_STAGGER_MS = 800;
+    const delay = Math.min(enterIndex * STAGGER_PER_CELL_MS, MAX_TOTAL_STAGGER_MS);
+
+    // Selection ring pulse animation: 1.0 → 1.05 → 1.0 on transition to
+    // selected. Plays at most once per selection change; reduce-motion skips.
+    const ringScale = useSharedValue(1);
+    const prevSelected = useRef(isSelected);
+    useEffect(() => {
+        if (prevSelected.current === isSelected) return;
+        prevSelected.current = isSelected;
+        if (!isSelected) {
+            ringScale.value = 1;
+            return;
+        }
+        if (reduceMotion) {
+            ringScale.value = 1;
+            return;
+        }
+        ringScale.value = withSequence(
+            withTiming(1.05, { duration: 110 }),
+            withSpring(1, { damping: 14, stiffness: 200 }),
+        );
+    }, [isSelected, reduceMotion, ringScale]);
+
+    const ringAnimatedStyle = useAnimatedStyle(() => ({
+        transform: [{ scale: ringScale.value }],
+    }));
+
+    const inner = (
+        <>
+            <View style={[photoPickerStyles.cellInner, dim && photoPickerStyles.cellDim]}>
+                <ExpoImage
+                    source={{ uri: thumbUrl }}
+                    style={photoPickerStyles.cellImage}
+                    contentFit="cover"
+                    transition={120}
+                    cachePolicy="memory-disk"
+                    accessibilityLabel={photo.filename}
+                />
+            </View>
+            {isSelected && (
+                <Reanimated.View
+                    pointerEvents="none"
+                    style={[
+                        photoPickerStyles.cellRing,
+                        { borderColor: primaryColor },
+                        ringAnimatedStyle,
+                    ]}
+                />
+            )}
+            {isSelected && (
+                <View
+                    pointerEvents="none"
+                    style={[photoPickerStyles.cellBadge, { backgroundColor: primaryColor }]}
+                >
+                    <Text style={photoPickerStyles.cellBadgeText}>
+                        {selectionIndex > 0 ? String(selectionIndex) : ''}
+                    </Text>
+                </View>
+            )}
+        </>
+    );
+
+    const cellWrapperStyle = {
+        width: size,
+        height: size,
+        marginRight,
+        marginBottom,
+    };
+
+    if (reduceMotion) {
+        return (
+            <TouchableOpacity
+                activeOpacity={0.85}
+                onPress={onPress}
+                onLongPress={onLongPress}
+                style={[photoPickerStyles.cellWrapper, cellWrapperStyle]}
+                accessibilityRole="button"
+                accessibilityLabel={a11yLabel}
+                accessibilityState={{ selected: isSelected }}
+            >
+                {inner}
+            </TouchableOpacity>
+        );
+    }
+
+    return (
+        <Reanimated.View
+            entering={FadeIn.delay(delay).duration(200)}
+            style={[photoPickerStyles.cellWrapper, cellWrapperStyle]}
+        >
+            <TouchableOpacity
+                activeOpacity={0.85}
+                onPress={onPress}
+                onLongPress={onLongPress}
+                style={{ flex: 1 }}
+                accessibilityRole="button"
+                accessibilityLabel={a11yLabel}
+                accessibilityState={{ selected: isSelected }}
+            >
+                {inner}
+            </TouchableOpacity>
+        </Reanimated.View>
+    );
+});
+
+const PhotoPickerView: React.FC<PhotoPickerViewProps> = ({
+    photos,
+    selectedIds,
+    multiSelect,
+    maxSelection,
+    allowUpload,
+    refreshing,
+    uploading,
+    isPickingDocument,
+    uploadProgress,
+    hasMore,
+    loadingMore,
+    reduceMotion,
+    getThumbUrl,
+    primaryColor,
+    isOwner,
+    onTogglePhoto,
+    onPreviewPhoto,
+    onUpload,
+    onRefresh,
+    onLoadMore,
+    onCancel,
+    onConfirm,
+    t,
+}) => {
+    const { width: windowWidth, height: windowHeight } = useWindowDimensions();
+
+    // Layout: 3 columns phone portrait, 2 columns phone landscape,
+    // 4 columns tablet (>= 600 width). Apple Photos-ish.
+    const columns = useMemo(() => {
+        if (windowWidth >= 600) return 4;
+        // Landscape phone: width > height
+        if (windowWidth > windowHeight) return 2;
+        return 3;
+    }, [windowWidth, windowHeight]);
+
+    const GUTTER = 2;
+    const cellSize = useMemo(() => {
+        // (windowWidth - (columns - 1) * GUTTER) / columns, but
+        // FlatList in 3-col layout means each row has 2 inter-cell gutters.
+        return Math.floor((windowWidth - GUTTER * (columns - 1)) / columns);
+    }, [windowWidth, columns]);
+
+    // Map selectedIds → 1-based selection order for the badge. We freeze a
+    // stable order at the time of selection: the order is the insertion
+    // order of the Set (which JS preserves natively).
+    const selectionOrder = useMemo(() => {
+        const map = new Map<string, number>();
+        let i = 1;
+        for (const id of selectedIds) {
+            map.set(id, i++);
+        }
+        return map;
+    }, [selectedIds]);
+
+    const hasAnySelection = selectedIds.size > 0;
+
+    // Compact icon-only upload pill on narrow screens; full pill otherwise.
+    const showUploadLabel = windowWidth >= 360;
+
+    // The bottom sheet renders below the status bar already (its `maxHeight`
+    // is capped by `SCREEN_HEIGHT - insets.top`), so the picker MUST NOT add
+    // an additional safe-area inset to the header. Header layout:
+    //   • 28dp drag-handle hit area floats at the very top of the sheet
+    //   • 56dp app bar sits immediately below the handle
+    // Total header zone = 28 + 56 = 84dp from sheet top.
+    const HANDLE_ZONE = 28;
+    const APP_BAR_HEIGHT = 56;
+    const headerHeight = HANDLE_ZONE + APP_BAR_HEIGHT;
+    const contentPaddingTop = headerHeight + 4;
+
+    const isEmpty = photos.length === 0;
+    const a11yColumnsAnnouncement = useRef<number>(columns);
+
+    useEffect(() => {
+        if (a11yColumnsAnnouncement.current !== columns) {
+            a11yColumnsAnnouncement.current = columns;
+        }
+    }, [columns]);
+
+    const handleCellPress = useCallback(
+        (photo: FileMetadata) => {
+            if (Platform.OS !== 'web') {
+                void hapticImpact('light');
+            }
+            onTogglePhoto(photo);
+        },
+        [onTogglePhoto],
+    );
+
+    const handleCellLongPress = useCallback(
+        (photo: FileMetadata) => {
+            if (Platform.OS !== 'web') {
+                void hapticSelection();
+            }
+            onPreviewPhoto(photo);
+        },
+        [onPreviewPhoto],
+    );
+
+    const handleConfirm = useCallback(() => {
+        if (multiSelect) {
+            if (selectedIds.size === 0) return;
+            if (Platform.OS !== 'web') {
+                void hapticNotification('success');
+            }
+        }
+        onConfirm();
+    }, [multiSelect, selectedIds.size, onConfirm]);
+
+    // FlatList renderItem: each cell knows its enterIndex (for stagger).
+    const renderItem = useCallback(
+        ({ item, index }: { item: FileMetadata; index: number }) => {
+            const isSelected = selectedIds.has(item.id);
+            const selIndex = isSelected ? (selectionOrder.get(item.id) || 0) : 0;
+            // Last column gets no right margin; last row no bottom margin
+            // (FlatList handles row breaks via numColumns).
+            const isLastInRow = (index + 1) % columns === 0;
+            const a11yLabel = t(
+                isSelected
+                    ? 'fileManagement.a11y.photoCellSelected'
+                    : 'fileManagement.a11y.photoCellUnselected',
+                { name: item.filename || 'photo' },
+            );
+            return (
+                <PhotoPickerCell
+                    photo={item}
+                    size={cellSize}
+                    marginRight={isLastInRow ? 0 : GUTTER}
+                    marginBottom={GUTTER}
+                    isSelected={isSelected}
+                    selectionIndex={selIndex}
+                    dim={multiSelect && hasAnySelection && !isSelected}
+                    primaryColor={primaryColor}
+                    thumbUrl={getThumbUrl(item, 'thumb')}
+                    enterIndex={index}
+                    reduceMotion={reduceMotion}
+                    onPress={() => handleCellPress(item)}
+                    onLongPress={() => handleCellLongPress(item)}
+                    a11yLabel={a11yLabel}
+                />
+            );
+        },
+        [
+            selectedIds, selectionOrder, columns, cellSize, multiSelect, hasAnySelection,
+            primaryColor, getThumbUrl, reduceMotion, handleCellPress, handleCellLongPress, t,
+        ],
+    );
+
+    const keyExtractor = useCallback((item: FileMetadata) => item.id, []);
+
+    const listFooter = useMemo(() => {
+        if (!loadingMore) return null;
+        return (
+            <View style={{ paddingVertical: 16, alignItems: 'center' }}>
+                <ActivityIndicator size="small" color="#FFFFFF" />
+            </View>
+        );
+    }, [loadingMore]);
+
+    const handleEndReached = useCallback(() => {
+        if (loadingMore || !hasMore) return;
+        onLoadMore();
+    }, [loadingMore, hasMore, onLoadMore]);
+
+    const confirmDisabled = multiSelect && selectedIds.size === 0;
+    const confirmLabel = multiSelect
+        ? t('fileManagement.doneWithCount', { count: selectedIds.size })
+        : t('fileManagement.done');
+
+    // The progress fill width. Guard against zero division.
+    const progressFraction = uploadProgress && uploadProgress.total > 0
+        ? Math.min(1, Math.max(0, uploadProgress.current / uploadProgress.total))
+        : 0;
+
+    return (
+        <View style={photoPickerStyles.root}>
+            {/* Photo grid (renders behind translucent header) */}
+            {isEmpty ? (
+                <View style={[photoPickerStyles.empty, { paddingTop: contentPaddingTop }]}>
+                    <View style={photoPickerStyles.emptyIconWrap}>
+                        <MaterialCommunityIcons name="image-outline" size={64} color="#FFFFFF" />
+                    </View>
+                    <Text style={[photoPickerStyles.emptyTitle, { color: '#FFFFFF' }]}>
+                        {t('fileManagement.photoPicker.emptyTitle')}
+                    </Text>
+                    <Text style={[photoPickerStyles.emptySubtitle, { color: '#FFFFFF' }]}>
+                        {t('fileManagement.photoPicker.emptySubtitle')}
+                    </Text>
+                    {isOwner && allowUpload && (
+                        <TouchableOpacity
+                            style={[photoPickerStyles.emptyCta, { backgroundColor: primaryColor }]}
+                            onPress={onUpload}
+                            disabled={uploading || isPickingDocument}
+                            accessibilityRole="button"
+                            accessibilityLabel={t('fileManagement.uploadPhoto')}
+                            accessibilityState={{ busy: uploading || isPickingDocument }}
+                        >
+                            {(uploading || isPickingDocument) ? (
+                                <ActivityIndicator size="small" color="#FFFFFF" />
+                            ) : (
+                                <>
+                                    <Ionicons name="cloud-upload" size={18} color="#FFFFFF" />
+                                    <Text style={photoPickerStyles.emptyCtaText}>
+                                        {t('fileManagement.uploadPhoto')}
+                                    </Text>
+                                </>
+                            )}
+                        </TouchableOpacity>
+                    )}
+                </View>
+            ) : (
+                <FlatList
+                    key={`cols-${columns}`}
+                    data={photos}
+                    renderItem={renderItem}
+                    keyExtractor={keyExtractor}
+                    numColumns={columns}
+                    contentContainerStyle={[
+                        photoPickerStyles.gridContent,
+                        { paddingTop: contentPaddingTop },
+                    ]}
+                    style={photoPickerStyles.grid}
+                    showsVerticalScrollIndicator={false}
+                    refreshControl={
+                        <RefreshControl
+                            refreshing={refreshing}
+                            onRefresh={onRefresh}
+                            tintColor="#FFFFFF"
+                            colors={[primaryColor]}
+                            progressViewOffset={contentPaddingTop}
+                        />
+                    }
+                    onEndReached={handleEndReached}
+                    onEndReachedThreshold={0.4}
+                    ListFooterComponent={listFooter}
+                    removeClippedSubviews
+                    initialNumToRender={Math.max(12, columns * 6)}
+                    windowSize={9}
+                />
+            )}
+
+            {/* Translucent black header. The bottom sheet already sits below
+                the status bar, so we do NOT add `insets.top` here — that would
+                double-pad. `paddingTop: HANDLE_ZONE` clears the 28dp drag
+                handle floating at the top of the sheet. */}
+            <View
+                style={[
+                    photoPickerStyles.header,
+                    { paddingTop: HANDLE_ZONE, minHeight: headerHeight },
+                ]}
+            >
+                <View style={photoPickerStyles.headerRow}>
+                    <View style={[photoPickerStyles.headerSide, photoPickerStyles.headerSideLeft]}>
+                        <TouchableOpacity
+                            onPress={onCancel}
+                            style={photoPickerStyles.headerCancel}
+                            accessibilityRole="button"
+                            accessibilityLabel={t('fileManagement.a11y.cancelPicker')}
+                            hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
+                        >
+                            <Text style={photoPickerStyles.headerCancelText}>
+                                {t('fileManagement.cancel')}
+                            </Text>
+                        </TouchableOpacity>
+                    </View>
+                    <View pointerEvents="none">
+                        <Text style={photoPickerStyles.headerTitle} numberOfLines={1}>
+                            {t('fileManagement.choosePhoto')}
+                        </Text>
+                    </View>
+                    <View style={[photoPickerStyles.headerSide, photoPickerStyles.headerSideRight]}>
+                        {multiSelect ? (
+                            <TouchableOpacity
+                                onPress={handleConfirm}
+                                disabled={confirmDisabled}
+                                style={[
+                                    photoPickerStyles.headerPrimaryPill,
+                                    {
+                                        backgroundColor: confirmDisabled
+                                            ? 'rgba(255,255,255,0.18)'
+                                            : primaryColor,
+                                        opacity: confirmDisabled ? 0.6 : 1,
+                                    },
+                                ]}
+                                accessibilityRole="button"
+                                accessibilityLabel={t('fileManagement.a11y.confirmSelection')}
+                                accessibilityState={{ disabled: confirmDisabled }}
+                            >
+                                <Text style={photoPickerStyles.headerPrimaryText}>
+                                    {confirmLabel}
+                                </Text>
+                            </TouchableOpacity>
+                        ) : (
+                            isOwner && allowUpload && (
+                                <TouchableOpacity
+                                    onPress={onUpload}
+                                    disabled={uploading || isPickingDocument}
+                                    style={[
+                                        photoPickerStyles.headerPrimaryPill,
+                                        !showUploadLabel && photoPickerStyles.headerPrimaryPillIconOnly,
+                                        { backgroundColor: primaryColor },
+                                    ]}
+                                    accessibilityRole="button"
+                                    accessibilityLabel={t('fileManagement.a11y.uploadFromDevice')}
+                                    accessibilityState={{ busy: uploading || isPickingDocument }}
+                                >
+                                    {(uploading || isPickingDocument) ? (
+                                        <ActivityIndicator size="small" color="#FFFFFF" />
+                                    ) : (
+                                        <>
+                                            <Ionicons name="cloud-upload" size={16} color="#FFFFFF" />
+                                            {showUploadLabel && (
+                                                <Text style={photoPickerStyles.headerPrimaryText}>
+                                                    {t('fileManagement.upload')}
+                                                </Text>
+                                            )}
+                                        </>
+                                    )}
+                                </TouchableOpacity>
+                            )
+                        )}
+                    </View>
+                </View>
+                {/* Subtle top progress bar during upload (non-blocking). */}
+                {uploading && (
+                    <View style={photoPickerStyles.headerProgressBarTrack}>
+                        <View
+                            style={[
+                                photoPickerStyles.headerProgressBarFill,
+                                {
+                                    width: `${Math.round(progressFraction * 100)}%`,
+                                    backgroundColor: primaryColor,
+                                },
+                            ]}
+                        />
+                    </View>
+                )}
+            </View>
+        </View>
+    );
+};
+
 const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
     onClose,
     theme,
@@ -135,9 +768,9 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
     const { t } = useI18n();
     const uploadFileMutation = useUploadFile();
     // Prompt controls
-    const fileDeletePrompt = usePromptControl();
-    const bulkDeletePrompt = usePromptControl();
-    const visibilityChangePrompt = usePromptControl();
+    const fileDeleteDialog = useDialogControl();
+    const bulkDeleteDialog = useDialogControl();
+    const visibilityChangeDialog = useDialogControl();
     const [pendingDeleteFile, setPendingDeleteFile] = useState<{ id: string; name: string } | null>(null);
     const files = useFiles();
     // Ensure containerWidth is a number (TypeScript guard)
@@ -156,11 +789,50 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
     const [loadingFileContent, setLoadingFileContent] = useState(false);
     const [showFileDetailsInViewer, setShowFileDetailsInViewer] = useState(false);
     const [isPickingDocument, setIsPickingDocument] = useState(false);
-    const [viewMode, setViewMode] = useState<'all' | 'photos' | 'videos' | 'documents' | 'audio'>('all');
+    const [reduceMotion, setReduceMotion] = useState(false);
+
+    // Detect reduce-motion preference once on mount + subscribe to changes.
+    // Used by `PhotoPickerView` to skip cell stagger animations.
+    useEffect(() => {
+        let cancelled = false;
+        AccessibilityInfo.isReduceMotionEnabled()
+            .then((enabled) => {
+                if (!cancelled) setReduceMotion(enabled);
+            })
+            .catch(() => {
+                // Defaults to false; no action needed.
+            });
+        const sub = AccessibilityInfo.addEventListener('reduceMotionChanged', (enabled) => {
+            setReduceMotion(enabled);
+        });
+        return () => {
+            cancelled = true;
+            sub.remove();
+        };
+    }, []);
+
+    // Image-only picker mode: when the consumer restricts to image MIME types
+    // (e.g. avatar picker), photos grid is the more useful default view.
+    const isImageOnlyPicker = useMemo(() => {
+        if (!selectMode) return false;
+        if (disabledMimeTypes.length === 0) return false;
+        const blocksVideos = disabledMimeTypes.some(mt => mt === 'video/' || mt.startsWith('video/'));
+        const blocksAudio = disabledMimeTypes.some(mt => mt === 'audio/' || mt.startsWith('audio/'));
+        const blocksDocs = disabledMimeTypes.some(mt =>
+            mt === 'application/pdf' ||
+            mt === 'application/' ||
+            mt.startsWith('application/')
+        );
+        return blocksVideos && blocksAudio && blocksDocs;
+    }, [disabledMimeTypes, selectMode]);
+
+    const [viewMode, setViewMode] = useState<'all' | 'photos' | 'videos' | 'documents' | 'audio'>(
+        isImageOnlyPicker ? 'photos' : 'all',
+    );
     const [searchQuery, setSearchQuery] = useState('');
     const [sortBy, setSortBy] = useState<'date' | 'size' | 'name' | 'type'>('date');
     const [sortOrder, setSortOrder] = useState<'asc' | 'desc'>('desc');
-    const [pendingFiles, setPendingFiles] = useState<Array<{ file: File | Blob; preview?: string; size: number; name: string; type: string }>>([]);
+    const [pendingFiles, setPendingFiles] = useState<Array<{ file: UploadCandidate; preview?: string; size: number; name: string; type: string }>>([]);
     const [showUploadPreview, setShowUploadPreview] = useState(false);
     // Derived filtered and sorted files (avoid setState loops)
     const filteredFiles = useMemo(() => {
@@ -263,7 +935,7 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                     linkContext.entityType,
                     linkContext.entityId,
                     defaultVisibility,
-                    (linkContext as Record<string, unknown>).webhookUrl
+                    linkContext.webhookUrl
                 );
             } catch (error) {
                 // Continue anyway - selection shouldn't fail if linking fails
@@ -322,7 +994,7 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                         linkContext.entityType,
                         linkContext.entityId,
                         defaultVisibility,
-                        (linkContext as Record<string, unknown>).webhookUrl
+                        linkContext.webhookUrl
                     );
                 } catch (error) {
                     // File linking failed, continue with selection
@@ -383,15 +1055,15 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
             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: FileMetadata[] = (response.files || []).map((f: Record<string, unknown>) => ({
+            const assets: FileMetadata[] = (response.files || []).map((f: { id: string; originalName?: string; sha256?: string; mime?: string; size?: number; createdAt?: string; metadata?: Record<string, unknown>; variants?: unknown[] }) => ({
                 id: f.id,
-                filename: f.originalName || f.sha256,
-                contentType: f.mime,
-                length: f.size,
+                filename: f.originalName ?? f.sha256 ?? '',
+                contentType: f.mime ?? '',
+                length: f.size ?? 0,
                 chunkSize: 0,
-                uploadDate: f.createdAt,
-                metadata: f.metadata || {},
-                variants: f.variants || [],
+                uploadDate: f.createdAt ?? '',
+                metadata: f.metadata ?? {},
+                variants: (f.variants ?? []) as FileMetadata['variants'],
             }));
             if (mode === 'more') {
                 // append
@@ -500,16 +1172,16 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
         return rows;
     }, []);
 
-    const processFileUploads = async (selectedFiles: File[]): Promise<FileMetadata[]> => {
+    const processFileUploads = async (selectedFiles: UploadCandidate[]): Promise<FileMetadata[]> => {
         if (selectedFiles.length === 0) return [];
         if (!targetUserId) return []; // Guard clause to ensure userId is defined
         const uploadedFiles: FileMetadata[] = [];
         try {
             storeSetUploadProgress({ current: 0, total: selectedFiles.length });
             const maxSize = 50 * 1024 * 1024; // 50MB
-            const oversizedFiles = selectedFiles.filter(file => file.size > maxSize);
+            const oversizedFiles = selectedFiles.filter(file => candidateSize(file) > maxSize);
             if (oversizedFiles.length > 0) {
-                const fileList = oversizedFiles.map(f => f.name).join(', ');
+                const fileList = oversizedFiles.map(f => candidateName(f, 'file')).join(', ');
                 toast.error(t('fileManagement.toasts.filesTooLarge', { files: fileList }));
                 return [];
             }
@@ -519,12 +1191,14 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
             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 fileName = candidateName(raw, `file-${i + 1}`);
+                const fileSize = candidateSize(raw);
+                const fileType = candidateType(raw);
                 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) {
+                    if (!raw || !fileName || fileSize <= 0) {
                         const errorMsg = `Invalid file: ${fileName}`;
                         if (__DEV__) {
                             console.error('Upload validation failed:', { file: raw, error: errorMsg });
@@ -536,9 +1210,9 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
 
                     const optimisticFile: FileMetadata = {
                         id: optimisticId,
-                        filename: raw.name,
-                        contentType: raw.type || 'application/octet-stream',
-                        length: raw.size,
+                        filename: fileName,
+                        contentType: fileType,
+                        length: fileSize,
                         chunkSize: 0,
                         uploadDate: new Date().toISOString(),
                         metadata: { uploading: true },
@@ -548,7 +1222,7 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
 
                     // Use the mutation hook with authentication handling
                     const result = await uploadFileMutation.mutateAsync({
-                        file: raw,
+                        file: raw as AssetUploadInput,
                         visibility: defaultVisibility,
                     });
 
@@ -557,9 +1231,9 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                     if (f) {
                         const merged: FileMetadata = {
                             id: f.id,
-                            filename: f.originalName || f.sha256 || raw.name,
-                            contentType: f.mime || raw.type || 'application/octet-stream',
-                            length: f.size || raw.size,
+                            filename: f.originalName || f.sha256 || fileName,
+                            contentType: f.mime || fileType,
+                            length: f.size || fileSize,
                             chunkSize: 0,
                             uploadDate: f.createdAt || new Date().toISOString(),
                             metadata: f.metadata || {},
@@ -581,14 +1255,14 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                     }
                 } catch (error: unknown) {
                     failureCount++;
-                    const errorMessage = getErrorMessage(error) || String(error) || 'Upload failed';
+                    const errorMessage = getErrorMessage(error) || 'Upload failed';
                     const fullError = `${fileName}: ${errorMessage}`;
                     errors.push(fullError);
                     if (__DEV__) {
                         console.error('File upload failed:', {
                             fileName,
-                            fileSize: raw.size,
-                            fileType: raw.type,
+                            fileSize,
+                            fileType,
                             error: errorMessage,
                             stack: (error instanceof Error) ? error.stack : undefined
                         });
@@ -620,10 +1294,9 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
         return uploadedFiles;
     };
 
-    // biome-ignore lint/suspicious/noExplicitAny: Files from document picker may have extra properties like uri
-    const handleFileSelection = useCallback(async (selectedFiles: Array<File | any>) => {
+    const handleFileSelection = useCallback(async (selectedFiles: UploadCandidate[]) => {
         const MAX_FILE_SIZE = 100 * 1024 * 1024; // 100MB
-        const processedFiles: Array<{ file: File | Blob; preview?: string; size: number; name: string; type: string }> = [];
+        const processedFiles: Array<{ file: UploadCandidate; preview?: string; size: number; name: string; type: string }> = [];
 
         for (const file of selectedFiles) {
             // Validate file has required properties
@@ -635,7 +1308,8 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                 continue;
             }
 
-            if (!file.name || typeof file.name !== 'string') {
+            const name = candidateName(file, '');
+            if (!name) {
                 if (__DEV__) {
                     console.error('Invalid file: missing or invalid name property', file);
                 }
@@ -643,46 +1317,47 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                 continue;
             }
 
-            if (file.size === undefined || file.size === null || Number.isNaN(file.size)) {
+            const size = (file as { size?: number }).size;
+            if (size === undefined || size === null || Number.isNaN(size)) {
                 if (__DEV__) {
                     console.error('Invalid file: missing or invalid size property', file);
                 }
-                toast.error(t('fileManagement.toasts.invalidFileSize', { name: file.name || 'unknown' }));
+                toast.error(t('fileManagement.toasts.invalidFileSize', { name }));
                 continue;
             }
 
-            if (file.size <= 0) {
+            if (size <= 0) {
                 if (__DEV__) {
                     console.error('Invalid file: file size is zero or negative', file);
                 }
-                toast.error(t('fileManagement.toasts.fileEmpty', { name: file.name }));
+                toast.error(t('fileManagement.toasts.fileEmpty', { name }));
                 continue;
             }
 
             // Validate file size
-            if (file.size > MAX_FILE_SIZE) {
-                toast.error(t('fileManagement.toasts.fileTooLarge', { name: file.name, maxSize: formatFileSize(MAX_FILE_SIZE) }));
+            if (size > MAX_FILE_SIZE) {
+                toast.error(t('fileManagement.toasts.fileTooLarge', { name, maxSize: formatFileSize(MAX_FILE_SIZE) }));
                 continue;
             }
 
-            // Ensure file has a type property
-            const fileType = file.type || 'application/octet-stream';
+            const fileType = candidateType(file);
 
             // Generate preview for images - unified approach
             let preview: string | undefined;
             if (fileType.startsWith('image/')) {
                 // Try to use file URI from expo-document-picker if available (works on all platforms)
-                const fileUri = (file as File & { uri?: string }).uri;
-                if (fileUri && typeof fileUri === 'string' &&
+                const fileUri = candidateUri(file);
+                if (fileUri &&
                     (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)
+                    // Fallback: create blob URL if possible (works on web only)
                     try {
-                        if ((file as object) instanceof File || (file as object) instanceof Blob) {
-                            preview = URL.createObjectURL(file);
+                        if ((typeof File !== 'undefined' && file instanceof File) ||
+                            (typeof Blob !== 'undefined' && file instanceof Blob)) {
+                            preview = URL.createObjectURL(file as Blob);
                         }
                     } catch (error: unknown) {
                         if (__DEV__) {
@@ -696,8 +1371,8 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
             processedFiles.push({
                 file,
                 preview,
-                size: file.size,
-                name: file.name,
+                size,
+                name,
                 type: fileType
             });
         }
@@ -710,7 +1385,7 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
         // Show preview modal for user to review files before upload
         setPendingFiles(processedFiles);
         setShowUploadPreview(true);
-    }, []);
+    }, [t]);
 
     const handleConfirmUpload = async () => {
         if (pendingFiles.length === 0) return;
@@ -721,7 +1396,7 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
         storeSetUploadProgress(null);
 
         try {
-            const filesToUpload = pendingFiles.map(pf => pf.file as File);
+            const filesToUpload = pendingFiles.map(pf => pf.file);
             storeSetUploadProgress({ current: 0, total: filesToUpload.length });
             const uploadedFiles = await processFileUploads(filesToUpload);
 
@@ -830,17 +1505,17 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
             // - size: file size in bytes
             // - mimeType: MIME type of the file
             // - file: (optional) native File object (usually only on web)
-            const files: File[] = [];
+            const files: UploadCandidate[] = [];
             const errors: string[] = [];
 
             // Process files in parallel for better performance
             // This allows multiple files to be converted simultaneously
             const conversionPromises = result.assets.map((doc, index) =>
                 convertDocumentPickerAssetToFile(doc, index)
-                    .then((file) => {
+                    .then((file): UploadCandidate | null => {
                         if (file) {
                             // Validate file has required properties before adding
-                            if (!file.name || file.size === undefined) {
+                            if (!file.name || (file as { size?: number }).size === undefined) {
                                 errors.push(`File "${doc.name || 'file'}" is invalid: missing required properties`);
                                 return null;
                             }
@@ -897,8 +1572,8 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
 
     const confirmFileDelete = useCallback((fileId: string, filename: string) => {
         setPendingDeleteFile({ id: fileId, name: filename });
-        fileDeletePrompt.open();
-    }, [fileDeletePrompt]);
+        fileDeleteDialog.open();
+    }, [fileDeleteDialog]);
 
     const handleFileDelete = useCallback(async () => {
         if (!pendingDeleteFile) return;
@@ -935,8 +1610,8 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
 
     const confirmBulkDelete = useCallback(() => {
         if (selectedIds.size === 0) return;
-        bulkDeletePrompt.open();
-    }, [selectedIds.size, bulkDeletePrompt]);
+        bulkDeleteDialog.open();
+    }, [selectedIds.size, bulkDeleteDialog]);
 
     const handleBulkDelete = useCallback(async () => {
         if (selectedIds.size === 0) return;
@@ -1360,8 +2035,8 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
         );
     };
 
-    // GroupedSection-based file items (for 'all' view) replacing legacy flat list look
-    // biome-ignore lint/suspicious/noExplicitAny: GroupedSection items have dynamic props
+    // SettingsListItem-based file items (for 'all' view)
+    // biome-ignore lint/suspicious/noExplicitAny: file items have dynamic props
     const groupedFileItems: any[] = useMemo(() => {
         // filteredFiles is already sorted, so just use it directly
         const sortedFiles = filteredFiles;
@@ -1378,11 +2053,11 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
             const hasPreview = isImage || isPDF || isVideo;
             const isSelected = selectedIds.has(file.id);
 
-            // Create customIcon for preview thumbnails (36x36 to match GroupedItem iconContainer)
-            let customIcon: React.ReactNode | undefined;
+            // Create icon for preview thumbnails (36x36)
+            let fileIcon: React.ReactNode | undefined;
             if (hasPreview) {
                 if (isImage) {
-                    customIcon = (
+                    fileIcon = (
                         <View style={{ width: 36, height: 36, borderRadius: 18, overflow: 'hidden' }}>
                             <ExpoImage
                                 source={{ uri: getSafeDownloadUrlCallback(file, 'thumb') }}
@@ -1398,7 +2073,7 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                         </View>
                     );
                 } else if (isVideo) {
-                    customIcon = (
+                    fileIcon = (
                         <View style={{ width: 36, height: 36, borderRadius: 18, overflow: 'hidden', backgroundColor: '#000000', position: 'relative' }}>
                             <ExpoImage
                                 source={{ uri: getSafeDownloadUrlCallback(file, 'thumb') }}
@@ -1417,7 +2092,7 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                         </View>
                     );
                 } else if (isPDF) {
-                    customIcon = (
+                    fileIcon = (
                         <View style={{ width: 36, height: 36, borderRadius: 18, alignItems: 'center', justifyContent: 'center', backgroundColor: '#FF6B6B20' }}>
                             <Ionicons name="document" size={20} color={colors.primary} />
                         </View>
@@ -1427,12 +2102,9 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
 
             return {
                 id: file.id,
-                customIcon: customIcon,
-                icon: !hasPreview ? getFileIcon(file.contentType) : undefined,
-                iconColor: colors.primary,
+                icon: fileIcon ?? (!hasPreview ? <Ionicons name={getFileIcon(file.contentType)} size={20} color={colors.primary} /> : undefined),
                 title: file.filename,
-                subtitle: `${formatFileSize(file.length)} • ${new Date(file.uploadDate).toLocaleDateString()}`,
-                theme: theme as 'light' | 'dark',
+                description: `${formatFileSize(file.length)} • ${new Date(file.uploadDate).toLocaleDateString()}`,
                 onPress: () => {
                     // Support selection in regular mode with long press or if already selecting
                     if (!selectMode && selectedIds.size > 0) {
@@ -1442,20 +2114,8 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                         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) ? (
+                rightElement: (!selectMode && selectedIds.size === 0) ? (
                     <View style={fileManagementStyles.groupedActions}>
                         {(isImage || isVideo || file.contentType.includes('pdf')) && (
                             <TouchableOpacity
@@ -1484,11 +2144,6 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                         </TouchableOpacity>
                     </View>
                 ) : undefined,
-                customContentBelow: file.metadata?.description ? (
-                    <Text style={[fileManagementStyles.groupedDescription, { color: bloomTheme.isDark ? '#AAAAAA' : '#666666' }]} numberOfLines={2}>
-                        {file.metadata.description}
-                    </Text>
-                ) : undefined,
             };
         });
     }, [filteredFiles, theme, deleting, handleFileDownload, confirmFileDelete, handleFileOpen, getSafeDownloadUrlCallback, selectMode, selectedIds]);
@@ -1836,7 +2491,7 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
             );
         };
 
-        // Skeleton file item matching GroupedSection structure
+        // Skeleton file item matching SettingsListItem structure
         const SkeletonFileItem = ({ index }: { index: number }) => (
             <View
                 style={[
@@ -1908,7 +2563,7 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                     ))}
                 </View>
 
-                {/* File List Skeleton - Matching GroupedSection */}
+                {/* File List Skeleton - Matching SettingsListItem */}
                 <ScrollView
                     style={fileManagementStyles.scrollView}
                     contentContainerStyle={fileManagementStyles.scrollContainer}
@@ -1933,6 +2588,59 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
         return <SkeletonLoader />;
     }
 
+    // Dedicated flagship-style photo picker view used in the avatar-picker
+    // context (selectMode + image-only filter). The picker is intentionally
+    // minimal: black backdrop, edge-to-edge grid, translucent header. The
+    // standalone file manager (non-picker browse) keeps the existing UI.
+    if (isImageOnlyPicker && !showUploadPreview) {
+        const photosOnly = filteredFiles.filter(
+            (file) => file.contentType.startsWith('image/'),
+        );
+        const isOwner = user?.id === targetUserId;
+        const allowUpload = isOwner && allowUploadInSelectMode;
+
+        return (
+            <>
+                <PhotoPickerView
+                    photos={photosOnly}
+                    selectedIds={selectedIds}
+                    multiSelect={multiSelect}
+                    maxSelection={maxSelection}
+                    allowUpload={allowUpload}
+                    refreshing={refreshing}
+                    uploading={uploading}
+                    isPickingDocument={isPickingDocument}
+                    uploadProgress={uploadProgress}
+                    hasMore={paging.hasMore}
+                    loadingMore={paging.loadingMore}
+                    reduceMotion={reduceMotion}
+                    getThumbUrl={getSafeDownloadUrlCallback}
+                    primaryColor={colors.primary}
+                    isOwner={isOwner}
+                    onTogglePhoto={toggleSelect}
+                    onPreviewPhoto={(file) => showFileDetailsModal(file)}
+                    onUpload={handleFileUpload}
+                    onRefresh={() => loadFiles('refresh')}
+                    onLoadMore={() => loadFiles('more')}
+                    onCancel={() => {
+                        if (onClose) onClose();
+                        else goBack?.();
+                    }}
+                    onConfirm={confirmMultiSelection}
+                    t={t}
+                />
+                {/* Long-press preview surfaces the existing details modal. */}
+                <FileDetailsModal
+                    control={fileDetailsControl}
+                    file={selectedFile}
+                    onDownload={handleFileDownload}
+                    onDelete={confirmFileDelete}
+                    isOwner={isOwner}
+                />
+            </>
+        );
+    }
+
     // If a file is opened, show the file viewer
     if (!selectMode && openedFile) {
         return (
@@ -2017,7 +2725,7 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                         key: 'visibility',
                         text: t('fileManagement.visibility'),
                         onPress: () => {
-                            visibilityChangePrompt.open();
+                            visibilityChangeDialog.open();
                         },
                         icon: 'eye',
                     }
@@ -2049,6 +2757,7 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                             primaryColor={colors.primary}
                             textColor={colors.text}
                             style={fileManagementStyles.viewModeButton}
+                            accessibilityLabel={t('fileManagement.a11y.viewAll') || 'Show all files'}
                         />
                         <AnimatedButton
                             isSelected={viewMode === 'photos'}
@@ -2057,37 +2766,50 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                             primaryColor={colors.primary}
                             textColor={colors.text}
                             style={fileManagementStyles.viewModeButton}
+                            accessibilityLabel={t('fileManagement.a11y.viewPhotos') || 'Show photos only'}
                         />
-                        <AnimatedButton
-                            isSelected={viewMode === 'videos'}
-                            onPress={() => setViewMode('videos')}
-                            icon={viewMode === 'videos' ? 'video' : 'video-outline'}
-                            primaryColor={colors.primary}
-                            textColor={colors.text}
-                            style={fileManagementStyles.viewModeButton}
-                        />
-                        <AnimatedButton
-                            isSelected={viewMode === 'documents'}
-                            onPress={() => setViewMode('documents')}
-                            icon={viewMode === 'documents' ? 'file-document' : 'file-document-outline'}
-                            primaryColor={colors.primary}
-                            textColor={colors.text}
-                            style={fileManagementStyles.viewModeButton}
-                        />
-                        <AnimatedButton
-                            isSelected={viewMode === 'audio'}
-                            onPress={() => setViewMode('audio')}
-                            icon={viewMode === 'audio' ? 'music-note' : 'music-note-outline'}
-                            primaryColor={colors.primary}
-                            textColor={colors.text}
-                            style={fileManagementStyles.viewModeButton}
-                        />
+                        {!isImageOnlyPicker && (
+                            <>
+                                <AnimatedButton
+                                    isSelected={viewMode === 'videos'}
+                                    onPress={() => setViewMode('videos')}
+                                    icon={viewMode === 'videos' ? 'video' : 'video-outline'}
+                                    primaryColor={colors.primary}
+                                    textColor={colors.text}
+                                    style={fileManagementStyles.viewModeButton}
+                                    accessibilityLabel={t('fileManagement.a11y.viewVideos') || 'Show videos only'}
+                                />
+                                <AnimatedButton
+                                    isSelected={viewMode === 'documents'}
+                                    onPress={() => setViewMode('documents')}
+                                    icon={viewMode === 'documents' ? 'file-document' : 'file-document-outline'}
+                                    primaryColor={colors.primary}
+                                    textColor={colors.text}
+                                    style={fileManagementStyles.viewModeButton}
+                                    accessibilityLabel={t('fileManagement.a11y.viewDocuments') || 'Show documents only'}
+                                />
+                                <AnimatedButton
+                                    isSelected={viewMode === 'audio'}
+                                    onPress={() => setViewMode('audio')}
+                                    icon={viewMode === 'audio' ? 'music-note' : 'music-note-outline'}
+                                    primaryColor={colors.primary}
+                                    textColor={colors.text}
+                                    style={fileManagementStyles.viewModeButton}
+                                    accessibilityLabel={t('fileManagement.a11y.viewAudio') || 'Show audio only'}
+                                />
+                            </>
+                        )}
                     </View>
                 </ScrollView>
                 <TouchableOpacity
                     style={[fileManagementStyles.sortButton, {
                         backgroundColor: colors.card,
                     }]}
+                    accessibilityRole="button"
+                    accessibilityLabel={t('fileManagement.a11y.sortBy', {
+                        field: sortBy,
+                        order: sortOrder === 'asc' ? 'ascending' : 'descending',
+                    }) || `Sort by ${sortBy}, ${sortOrder === 'asc' ? 'ascending' : 'descending'}`}
                     onPress={() => {
                         // Cycle through sort options: date -> size -> name -> type -> date
                         const sortOrder: Array<'date' | 'size' | 'name' | 'type'> = ['date', 'size', 'name', 'type'];
@@ -2117,9 +2839,20 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                 </TouchableOpacity>
                 {user?.id === targetUserId && (!selectMode || (selectMode && allowUploadInSelectMode)) && (
                     <TouchableOpacity
-                        style={[fileManagementStyles.uploadButton, { backgroundColor: colors.primary }]}
+                        style={[
+                            fileManagementStyles.uploadButton,
+                            isImageOnlyPicker && fileManagementStyles.uploadButtonExtended,
+                            { backgroundColor: colors.primary },
+                        ]}
                         onPress={handleFileUpload}
                         disabled={uploading || isPickingDocument}
+                        accessibilityRole="button"
+                        accessibilityLabel={
+                            isImageOnlyPicker
+                                ? (t('fileManagement.a11y.uploadFromDevice') || 'Upload photo from device')
+                                : (t('fileManagement.a11y.uploadFile') || 'Upload file')
+                        }
+                        accessibilityState={{ busy: uploading || isPickingDocument }}
                     >
                         {uploading ? (
                             <View style={fileManagementStyles.uploadProgress}>
@@ -2132,6 +2865,13 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                             </View>
                         ) : isPickingDocument ? (
                             <ActivityIndicator size="small" color="#FFFFFF" />
+                        ) : isImageOnlyPicker ? (
+                            <View style={fileManagementStyles.uploadButtonContent}>
+                                <Ionicons name="cloud-upload" size={18} color="#FFFFFF" />
+                                <Text style={fileManagementStyles.uploadButtonLabel} numberOfLines={1}>
+                                    {t('fileManagement.upload') || 'Upload'}
+                                </Text>
+                            </View>
                         ) : (
                             <Ionicons name="add" size={22} color="#FFFFFF" />
                         )}
@@ -2240,7 +2980,19 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                         </View>
                     ) : filteredFiles.length === 0 ? renderEmptyState() : (
                         <>
-                            <GroupedSection items={groupedFileItems} />
+                            <SettingsListGroup>
+                                {groupedFileItems.map(item => (
+                                    <SettingsListItem
+                                        key={item.id}
+                                        icon={item.icon}
+                                        title={item.title}
+                                        description={item.description}
+                                        onPress={item.onPress}
+                                        showChevron={false}
+                                        rightElement={item.rightElement}
+                                    />
+                                ))}
+                            </SettingsListGroup>
                             {paging.loadingMore && (
                                 <View style={fileManagementStyles.loadingMoreBar}>
                                     <ActivityIndicator size="small" color={colors.primary} />
@@ -2292,34 +3044,35 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
 
             {/* Selection bar removed; actions are now in header */}
             {/* Global loadingMore bar removed; now inline in scroll areas */}
-            <Prompt.Basic
-                control={fileDeletePrompt}
+            <Dialog
+                control={fileDeleteDialog}
                 title={t('fileManagement.deleteFile') || 'Delete File'}
                 description={pendingDeleteFile ? t('fileManagement.confirms.deleteFile', { filename: pendingDeleteFile.name }) : ''}
-                onConfirm={handleFileDelete}
-                confirmButtonCta={t('fileManagement.confirm') || 'Delete'}
-                confirmButtonColor='negative'
+                actions={[
+                    { label: t('fileManagement.confirm') || 'Delete', color: 'destructive', onPress: handleFileDelete },
+                    { label: t('common.cancel') || 'Cancel', color: 'cancel' },
+                ]}
             />
-            <Prompt.Basic
-                control={bulkDeletePrompt}
+            <Dialog
+                control={bulkDeleteDialog}
                 title={t('fileManagement.deleteFiles') || 'Delete Files'}
                 description={t('fileManagement.confirms.deleteFiles', { count: selectedIds.size })}
-                onConfirm={handleBulkDelete}
-                confirmButtonCta={t('fileManagement.confirm') || 'Delete'}
-                confirmButtonColor='negative'
+                actions={[
+                    { label: t('fileManagement.confirm') || 'Delete', color: 'destructive', onPress: handleBulkDelete },
+                    { label: t('common.cancel') || 'Cancel', color: 'cancel' },
+                ]}
+            />
+            <Dialog
+                control={visibilityChangeDialog}
+                title={t('fileManagement.changeVisibility') || 'Change Visibility'}
+                description={t('fileManagement.changeVisibilityConfirm', { count: selectedIds.size })}
+                actions={[
+                    { label: t('fileManagement.private') || 'Private', onPress: () => handleBulkVisibilityChange('private') },
+                    { label: t('fileManagement.public') || 'Public', onPress: () => handleBulkVisibilityChange('public') },
+                    { label: t('fileManagement.unlisted') || 'Unlisted', onPress: () => handleBulkVisibilityChange('unlisted') },
+                    { label: t('common.cancel') || 'Cancel', color: 'cancel' },
+                ]}
             />
-            <Prompt.Outer control={visibilityChangePrompt}>
-                <Prompt.Content>
-                    <Prompt.TitleText>{t('fileManagement.changeVisibility') || 'Change Visibility'}</Prompt.TitleText>
-                    <Prompt.DescriptionText>{t('fileManagement.changeVisibilityConfirm', { count: selectedIds.size })}</Prompt.DescriptionText>
-                </Prompt.Content>
-                <Prompt.Actions>
-                    <Prompt.Action cta={t('fileManagement.private') || 'Private'} onPress={() => handleBulkVisibilityChange('private')} color='primary' />
-                    <Prompt.Action cta={t('fileManagement.public') || 'Public'} onPress={() => handleBulkVisibilityChange('public')} color='primary_subtle' />
-                    <Prompt.Action cta={t('fileManagement.unlisted') || 'Unlisted'} onPress={() => handleBulkVisibilityChange('unlisted')} color='primary_subtle' />
-                    <Prompt.Cancel cta={t('common.cancel') || 'Cancel'} />
-                </Prompt.Actions>
-            </Prompt.Outer>
         </View>
     );
 };