@oxy.so/services 3.1.0 → 4.0.1

package/lib/module/ui/screens/FileManagementScreen.js

@@ -1,7 +1,9 @@
 "use strict";
 
+import { Button } from '@oxy.so/bloom/button';
 import { useState, useCallback, useMemo, useRef } from 'react';
-import { View, Text, TouchableOpacity, StyleSheet, ScrollView, ActivityIndicator, RefreshControl, TextInput, useWindowDimensions } from 'react-native';
+import { View, TouchableOpacity, StyleSheet, ScrollView, RefreshControl, useWindowDimensions } from 'react-native';
+import { Text } from '@oxy.so/bloom/typography';
 import { useQueryClient } from '@tanstack/react-query';
 import { Image as ExpoImage } from 'expo-image';
 import { toast } from '@oxy.so/bloom/toast';
@@ -32,13 +34,12 @@ import PhotoPickerView from "./fileManagement/PhotoPickerSection.js";
 import FileListSection from "./fileManagement/FileListSection.js";
 import FileLibraryError from "./fileManagement/FileLibraryError.js";
 import UploadBar from "./fileManagement/UploadBar.js";
-import { AnimatedButton } from "../components/fileManagement/AnimatedButton.js";
+import { SegmentedControl, SegmentedControlItem } from '@oxy.so/bloom/segmented-control';
+import { Search } from '@oxy.so/bloom/search';
 
-// Genuinely-inline-only styles: `viewModeButton` is spread into an Animated.View
-// style array (interpolated backgroundColor), and the photo tiles are
-// `expo-image` (no className remap). Everything else uses NativeWind classNames.
+// Photo tiles use expo-image dimensions; controls use Bloom primitives.
 // Nav-header slot layout for this screen's action row + review-mode back button.
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const fmHeaderStyles = StyleSheet.create({
   actionsRow: {
     flexDirection: 'row',
@@ -53,15 +54,6 @@ const fmHeaderStyles = StyleSheet.create({
   }
 });
 const screenStyles = StyleSheet.create({
-  viewModeButton: {
-    paddingHorizontal: 10,
-    paddingVertical: 6,
-    borderRadius: 999,
-    minWidth: 36,
-    alignItems: 'center',
-    justifyContent: 'center',
-    marginHorizontal: 1
-  },
   justifiedPhotoImage: {
     width: '100%',
     height: '100%',
@@ -815,40 +807,43 @@ const FileManagementScreen = ({
         },
         // Hide action buttons when selecting (in selectMode or bulk operations mode)
         rightElement: !selectMode && selectedIds.size === 0 ? /*#__PURE__*/_jsxs(View, {
-          className: "flex-row items-center gap-[6px] ml-[12px]",
-          children: [(isImage || isVideo || file.contentType.includes('pdf')) && /*#__PURE__*/_jsx(TouchableOpacity, {
-            className: "w-[34px] h-[34px] rounded-[8px] items-center justify-center",
-            style: {
-              backgroundColor: colors.backgroundSecondary
-            },
+          className: "flex-row items-center gap-1.5 ml-3",
+          children: [isImage || isVideo || file.contentType.includes('pdf') ? /*#__PURE__*/_jsx(Button, {
+            appearance: "subtle",
+            tone: "neutral",
+            size: "small",
+            iconOnly: true,
+            stopPropagation: true,
+            accessibilityLabel: `Preview ${file.filename}`,
             onPress: () => handleFileOpen(file),
-            children: /*#__PURE__*/_jsx(Ionicons, {
+            icon: /*#__PURE__*/_jsx(Ionicons, {
               name: "eye",
               size: 18,
-              color: colors.primary
+              color: colors.text
             })
-          }), /*#__PURE__*/_jsx(TouchableOpacity, {
-            className: "w-[34px] h-[34px] rounded-[8px] items-center justify-center",
-            style: {
-              backgroundColor: colors.backgroundSecondary
-            },
+          }) : null, /*#__PURE__*/_jsx(Button, {
+            appearance: "subtle",
+            tone: "neutral",
+            size: "small",
+            iconOnly: true,
+            stopPropagation: true,
+            accessibilityLabel: `Download ${file.filename}`,
             onPress: () => handleFileDownload(file.id, file.filename),
-            children: /*#__PURE__*/_jsx(Ionicons, {
+            icon: /*#__PURE__*/_jsx(Ionicons, {
               name: "download",
               size: 18,
-              color: colors.primary
+              color: colors.text
             })
-          }), /*#__PURE__*/_jsx(TouchableOpacity, {
-            className: "w-[34px] h-[34px] rounded-[8px] items-center justify-center",
-            style: {
-              backgroundColor: colors.negativeSubtle
-            },
+          }), /*#__PURE__*/_jsx(Button, {
+            appearance: "subtle",
+            tone: "danger",
+            size: "small",
+            iconOnly: true,
+            stopPropagation: true,
+            loading: deletingId === file.id,
+            accessibilityLabel: `Delete ${file.filename}`,
             onPress: () => confirmFileDelete(file.id, file.filename),
-            disabled: deletingId === file.id,
-            children: deletingId === file.id ? /*#__PURE__*/_jsx(ActivityIndicator, {
-              size: "small",
-              color: colors.error
-            }) : /*#__PURE__*/_jsx(Ionicons, {
+            icon: /*#__PURE__*/_jsx(Ionicons, {
               name: "trash",
               size: 18,
               color: colors.error
@@ -867,8 +862,7 @@ const FileManagementScreen = ({
     onRetry: () => filesQuery.refetch(),
     iconColor: colors.error,
     titleColor: colors.text,
-    descriptionColor: colors.textSecondary,
-    buttonColor: colors.primary
+    descriptionColor: colors.textSecondary
   });
 
   // Browse "photos" view. The justified grid owns its own dimension
@@ -896,26 +890,10 @@ const FileManagementScreen = ({
             color: colors.textSecondary
           },
           children: [" ", user?.id === targetUserId ? t('fileManagement.emptyPhotos.ownDescription') : t('fileManagement.emptyPhotos.otherDescription'), " "]
-        }), user?.id === targetUserId && /*#__PURE__*/_jsx(TouchableOpacity, {
-          className: "flex-row items-center px-[24px] py-[12px] rounded-[24px] gap-[8px]",
-          style: {
-            backgroundColor: colors.primary
-          },
+        }), user?.id === targetUserId && /*#__PURE__*/_jsx(Button, {
           onPress: handleFileUpload,
-          disabled: uploading || isPickingDocument,
-          children: uploading || isPickingDocument ? /*#__PURE__*/_jsx(ActivityIndicator, {
-            size: "small",
-            color: "#FFFFFF"
-          }) : /*#__PURE__*/_jsxs(_Fragment, {
-            children: [/*#__PURE__*/_jsx(Ionicons, {
-              name: "cloud-upload",
-              size: 20,
-              color: "#FFFFFF"
-            }), /*#__PURE__*/_jsx(Text, {
-              className: "text-white text-[16px] font-semibold",
-              children: t('fileManagement.uploadPhotos')
-            })]
-          })
+          loading: uploading || isPickingDocument,
+          children: t('fileManagement.uploadPhotos')
         })]
       });
     }
@@ -970,26 +948,10 @@ const FileManagementScreen = ({
         color: colors.textSecondary
       },
       children: user?.id === targetUserId ? t('fileManagement.emptyFiles.ownDescription') : t('fileManagement.emptyFiles.otherDescription')
-    }), user?.id === targetUserId && /*#__PURE__*/_jsx(TouchableOpacity, {
-      className: "flex-row items-center px-[24px] py-[12px] rounded-[24px] gap-[8px]",
-      style: {
-        backgroundColor: colors.primary
-      },
+    }), user?.id === targetUserId && /*#__PURE__*/_jsx(Button, {
       onPress: handleFileUpload,
-      disabled: uploading || isPickingDocument,
-      children: uploading || isPickingDocument ? /*#__PURE__*/_jsx(ActivityIndicator, {
-        size: "small",
-        color: "#FFFFFF"
-      }) : /*#__PURE__*/_jsxs(_Fragment, {
-        children: [/*#__PURE__*/_jsx(Ionicons, {
-          name: "cloud-upload",
-          size: 20,
-          color: "#FFFFFF"
-        }), /*#__PURE__*/_jsx(Text, {
-          className: "text-white text-[16px] font-semibold",
-          children: t('fileManagement.uploadFiles')
-        })]
-      })
+      loading: uploading || isPickingDocument,
+      children: t('fileManagement.uploadFiles')
     })]
   });
 
@@ -1306,58 +1268,32 @@ const FileManagementScreen = ({
         style: {
           maxWidth: '80%'
         },
-        children: /*#__PURE__*/_jsxs(View, {
-          className: "flex-row rounded-full p-[2px] overflow-hidden",
-          style: {
-            backgroundColor: colors.card
-          },
-          children: [/*#__PURE__*/_jsx(AnimatedButton, {
-            isSelected: viewMode === 'all',
-            onPress: () => setViewMode('all'),
-            icon: viewMode === 'all' ? 'folder' : 'folder-outline',
-            primaryColor: colors.primary,
-            textColor: colors.text,
-            style: screenStyles.viewModeButton,
-            accessibilityLabel: t('fileManagement.a11y.viewAll') || 'Show all files'
-          }), /*#__PURE__*/_jsx(AnimatedButton, {
-            isSelected: viewMode === 'photos',
-            onPress: () => setViewMode('photos'),
-            icon: viewMode === 'photos' ? 'image-multiple' : 'image-multiple-outline',
-            primaryColor: colors.primary,
-            textColor: colors.text,
-            style: screenStyles.viewModeButton,
-            accessibilityLabel: t('fileManagement.a11y.viewPhotos') || 'Show photos only'
-          }), /*#__PURE__*/_jsx(AnimatedButton, {
-            isSelected: viewMode === 'videos',
-            onPress: () => setViewMode('videos'),
-            icon: viewMode === 'videos' ? 'video' : 'video-outline',
-            primaryColor: colors.primary,
-            textColor: colors.text,
-            style: screenStyles.viewModeButton,
-            accessibilityLabel: t('fileManagement.a11y.viewVideos') || 'Show videos only'
-          }), /*#__PURE__*/_jsx(AnimatedButton, {
-            isSelected: viewMode === 'documents',
-            onPress: () => setViewMode('documents'),
-            icon: viewMode === 'documents' ? 'file-document' : 'file-document-outline',
-            primaryColor: colors.primary,
-            textColor: colors.text,
-            style: screenStyles.viewModeButton,
-            accessibilityLabel: t('fileManagement.a11y.viewDocuments') || 'Show documents only'
-          }), /*#__PURE__*/_jsx(AnimatedButton, {
-            isSelected: viewMode === 'audio',
-            onPress: () => setViewMode('audio'),
-            icon: viewMode === 'audio' ? 'music-note' : 'music-note-outline',
-            primaryColor: colors.primary,
-            textColor: colors.text,
-            style: screenStyles.viewModeButton,
-            accessibilityLabel: t('fileManagement.a11y.viewAudio') || 'Show audio only'
-          })]
+        children: /*#__PURE__*/_jsx(SegmentedControl, {
+          type: "radio",
+          label: t('fileManagement.viewMode') || 'File type',
+          value: viewMode,
+          onValueChange: setViewMode,
+          size: "small",
+          children: ['all', 'photos', 'videos', 'documents', 'audio'].map(mode => /*#__PURE__*/_jsx(SegmentedControlItem, {
+            value: mode,
+            accessibilityLabel: mode,
+            children: /*#__PURE__*/_jsx(MaterialCommunityIcons, {
+              name: {
+                all: 'folder-outline',
+                photos: 'image-multiple-outline',
+                videos: 'video-outline',
+                documents: 'file-document-outline',
+                audio: 'music-note-outline'
+              }[mode],
+              size: 18,
+              color: colors.text
+            })
+          }, mode))
         })
-      }), /*#__PURE__*/_jsxs(TouchableOpacity, {
-        className: "flex-row items-center justify-center px-[10px] py-[6px] rounded-full min-w-[36px] gap-[4px]",
-        style: {
-          backgroundColor: colors.card
-        },
+      }), /*#__PURE__*/_jsx(Button, {
+        appearance: "subtle",
+        tone: "neutral",
+        size: "small",
         accessibilityRole: "button",
         accessibilityLabel: t('fileManagement.a11y.sortBy', {
           field: sortBy,
@@ -1374,72 +1310,37 @@ const FileManagementScreen = ({
             setSortOrder(prev => prev === 'asc' ? 'desc' : 'asc');
           }
         },
-        children: [/*#__PURE__*/_jsx(MaterialCommunityIcons, {
-          name: sortBy === 'date' ? 'calendar' : sortBy === 'size' ? 'sort-numeric-variant' : sortBy === 'name' ? 'sort-alphabetical-variant' : 'file-document-outline',
-          size: 16,
-          color: colors.text
-        }), /*#__PURE__*/_jsx(MaterialCommunityIcons, {
-          name: sortOrder === 'asc' ? 'arrow-up' : 'arrow-down',
-          size: 14,
-          color: colors.textSecondary
-        })]
-      }), user?.id === targetUserId && (!selectMode || allowUploadInSelectMode) && /*#__PURE__*/_jsx(TouchableOpacity, {
-        className: "h-[44px] w-[44px] rounded-[22px] items-center justify-center",
-        style: {
-          backgroundColor: colors.primary
-        },
+        trailing: /*#__PURE__*/_jsxs(View, {
+          className: "flex-row items-center gap-1",
+          children: [/*#__PURE__*/_jsx(MaterialCommunityIcons, {
+            name: sortBy === 'date' ? 'calendar' : sortBy === 'size' ? 'sort-numeric-variant' : sortBy === 'name' ? 'sort-alphabetical-variant' : 'file-document-outline',
+            size: 16,
+            color: colors.text
+          }), /*#__PURE__*/_jsx(MaterialCommunityIcons, {
+            name: sortOrder === 'asc' ? 'arrow-up' : 'arrow-down',
+            size: 14,
+            color: colors.textSecondary
+          })]
+        })
+      }), user?.id === targetUserId && (!selectMode || allowUploadInSelectMode) && /*#__PURE__*/_jsx(Button, {
+        iconOnly: true,
         onPress: handleFileUpload,
-        disabled: uploading || isPickingDocument,
-        accessibilityRole: "button",
+        loading: uploading || isPickingDocument,
         accessibilityLabel: t('fileManagement.a11y.uploadFile') || 'Upload file',
-        accessibilityState: {
-          busy: uploading || isPickingDocument
-        },
-        children: uploading ? /*#__PURE__*/_jsxs(View, {
-          className: "items-center justify-center",
-          children: [/*#__PURE__*/_jsx(ActivityIndicator, {
-            size: "small",
-            color: "#FFFFFF"
-          }), uploadProgress && /*#__PURE__*/_jsxs(Text, {
-            className: "text-white text-[10px] font-semibold mt-[2px]",
-            children: [uploadProgress.current, "/", uploadProgress.total]
-          })]
-        }) : isPickingDocument ? /*#__PURE__*/_jsx(ActivityIndicator, {
-          size: "small",
-          color: "#FFFFFF"
-        }) : /*#__PURE__*/_jsx(Ionicons, {
+        icon: /*#__PURE__*/_jsx(Ionicons, {
           name: "add",
           size: 22,
-          color: "#FFFFFF"
+          color: colors.primaryForeground
         })
       })]
-    }), files.length > 0 && (viewMode === 'all' || files.some(f => f.contentType.startsWith('image/'))) && /*#__PURE__*/_jsxs(View, {
-      className: "flex-row items-center px-[14px] py-[10px] mx-[12px] mb-[12px] rounded-full gap-[10px]",
-      style: {
-        backgroundColor: colors.card
-      },
-      children: [/*#__PURE__*/_jsx(Ionicons, {
-        name: "search",
-        size: 22,
-        color: colors.icon
-      }), /*#__PURE__*/_jsx(TextInput, {
-        className: "flex-1 text-[16px] leading-[20px]",
-        style: {
-          color: colors.text
-        },
-        placeholder: viewMode === 'photos' ? t('fileManagement.searchPhotos') : t('fileManagement.searchFiles'),
-        placeholderTextColor: colors.textSecondary,
+    }), files.length > 0 && (viewMode === 'all' || files.some(f => f.contentType.startsWith('image/'))) && /*#__PURE__*/_jsx(View, {
+      className: "mx-[12px] mb-[12px]",
+      children: /*#__PURE__*/_jsx(Search, {
+        label: viewMode === 'photos' ? t('fileManagement.searchPhotos') : t('fileManagement.searchFiles'),
         value: searchQuery,
-        onChangeText: setSearchQuery
-      }), searchQuery.length > 0 && /*#__PURE__*/_jsx(TouchableOpacity, {
-        onPress: () => setSearchQuery(''),
-        className: "p-[4px] rounded-[12px] items-center justify-center",
-        children: /*#__PURE__*/_jsx(Ionicons, {
-          name: "close-circle",
-          size: 22,
-          color: colors.icon
-        })
-      })]
+        onValueChange: setSearchQuery,
+        onClearText: () => setSearchQuery('')
+      })
     }), files.length > 0 && /*#__PURE__*/_jsxs(View, {
       className: "flex-row px-[14px] py-[10px] mx-[12px] mb-[12px] rounded-[18px]",
       style: {
@@ -1515,8 +1416,6 @@ const FileManagementScreen = ({
       renderEmptyState: renderEmptyState
     }), !selectMode && uploading && /*#__PURE__*/_jsx(UploadBar, {
       uploadProgress: uploadProgress,
-      isDark: bloomTheme.isDark,
-      colors: colors,
       t: t
     })]
   });