@oxy.so/services 3.0.0 → 4.0.0

package/src/ui/screens/AccountMembersScreen.tsx

@@ -1,8 +1,8 @@
+import { SegmentedControl, SegmentedControlItem, SegmentedControlItemText } from '@oxy.so/bloom/segmented-control';
 import type React from 'react';
 import { useCallback, useMemo, useState } from 'react';
 import {
   View,
-  TouchableOpacity,
   ActivityIndicator,
 } from 'react-native';
 import Ionicons from '../icons/Ionicons';
@@ -291,37 +291,14 @@ const AccountMembersScreen: React.FC<BaseScreenProps> = ({ onClose, goBack, acco
               <Text className="text-caption font-caption text-text-secondary px-space-4">
                 {t('accounts.members.invite.roleLabel') || 'Role'}
               </Text>
-              <View className="flex-row flex-wrap gap-space-8">
-                {ASSIGNABLE_ROLES.map((role) => {
-                  const selected = role === inviteRole;
-                  return (
-                    <TouchableOpacity
-                      key={role}
-                      accessibilityRole="radio"
-                      accessibilityState={{ selected }}
-                      accessibilityLabel={roleLabel(role)}
-                      onPress={() => setInviteRole(role)}
-                      activeOpacity={0.7}
-                      className="px-space-12 py-space-8 rounded-radius-full"
-                      style={{
-                        backgroundColor: selected ? colors.primary : colors.card,
-                        borderWidth: 1,
-                        borderColor: selected ? colors.primary : colors.border,
-                      }}
-                    >
-                      <Text
-                        className="text-caption font-semibold"
-                        style={{ color: selected ? colors.background : colors.text }}
-                      >
-                        {roleLabel(role)}
-                      </Text>
-                    </TouchableOpacity>
-                  );
-                })}
-              </View>
+              <SegmentedControl type="radio" label={t('accounts.members.invite.roleLabel') || 'Role'} value={inviteRole} onValueChange={setInviteRole} size="small">
+                {ASSIGNABLE_ROLES.map(role => <SegmentedControlItem key={role} value={role}>
+                  <SegmentedControlItemText>{roleLabel(role)}</SegmentedControlItemText>
+                </SegmentedControlItem>)}
+              </SegmentedControl>
 
               <Button
-                variant="primary"
+                appearance="solid" tone="accent"
                 onPress={handleInvite}
                 disabled={inviteMutation.isPending || !inviteIdentifier.trim()}
                 loading={inviteMutation.isPending}
@@ -394,35 +371,12 @@ const AccountMembersScreen: React.FC<BaseScreenProps> = ({ onClose, goBack, acco
 
                           {/* Role chips (editable) or static role label */}
                           {canEditThisRole ? (
-                            <View className="flex-row flex-wrap gap-space-8">
-                              {ASSIGNABLE_ROLES.map((role) => {
-                                const selected = role === member.role;
-                                return (
-                                  <TouchableOpacity
-                                    key={role}
-                                    accessibilityRole="radio"
-                                    accessibilityState={{ selected }}
-                                    accessibilityLabel={roleLabel(role)}
-                                    onPress={() => handleChangeRole(member, role)}
-                                    disabled={updateMutation.isPending}
-                                    activeOpacity={0.7}
-                                    className="px-space-12 py-space-4 rounded-radius-full"
-                                    style={{
-                                      backgroundColor: selected ? colors.primary : colors.card,
-                                      borderWidth: 1,
-                                      borderColor: selected ? colors.primary : colors.border,
-                                    }}
-                                  >
-                                    <Text
-                                      className="text-caption font-semibold"
-                                      style={{ color: selected ? colors.background : colors.text }}
-                                    >
-                                      {roleLabel(role)}
-                                    </Text>
-                                  </TouchableOpacity>
-                                );
-                              })}
-                            </View>
+                            <SegmentedControl type="radio" label={t('accounts.members.invite.roleLabel') || 'Role'}
+                              value={member.role} onValueChange={role => handleChangeRole(member, role)} disabled={updateMutation.isPending} size="small">
+                              {ASSIGNABLE_ROLES.map(role => <SegmentedControlItem key={role} value={role}>
+                                <SegmentedControlItemText>{roleLabel(role)}</SegmentedControlItemText>
+                              </SegmentedControlItem>)}
+                            </SegmentedControl>
                           ) : !isOwner ? (
                             <Text className="text-caption font-caption text-text-secondary">
                               {roleLabel(member.role)}
@@ -433,32 +387,30 @@ const AccountMembersScreen: React.FC<BaseScreenProps> = ({ onClose, goBack, acco
                           {(canTransferToThis || canRemoveThisMember) ? (
                             <View className="flex-row gap-space-16 pt-space-4">
                               {canTransferToThis ? (
-                                <TouchableOpacity
+                                <Button appearance="plain" tone="neutral" size="small"
                                   accessibilityRole="button"
                                   accessibilityLabel={t('accounts.members.actions.transfer') || 'Transfer ownership'}
                                   onPress={() => confirmTransfer(member)}
-                                  activeOpacity={0.7}
                                   className="flex-row items-center gap-space-4"
                                 >
                                   <Ionicons name="swap-horizontal-outline" size={16} color={colors.icon} />
                                   <Text className="text-caption font-semibold text-text-secondary">
                                     {t('accounts.members.actions.transfer') || 'Transfer ownership'}
                                   </Text>
-                                </TouchableOpacity>
+                                </Button>
                               ) : null}
                               {canRemoveThisMember ? (
-                                <TouchableOpacity
+                                <Button appearance="plain" tone="neutral" size="small"
                                   accessibilityRole="button"
                                   accessibilityLabel={t('accounts.members.actions.remove') || 'Remove member'}
                                   onPress={() => confirmRemove(member)}
-                                  activeOpacity={0.7}
                                   className="flex-row items-center gap-space-4"
                                 >
                                   <Ionicons name="trash-outline" size={16} color={colors.error} />
                                   <Text className="text-caption font-semibold" style={{ color: colors.error }}>
                                     {t('accounts.members.actions.remove') || 'Remove'}
                                   </Text>
-                                </TouchableOpacity>
+                                </Button>
                               ) : null}
                             </View>
                           ) : null}

package/src/ui/screens/AccountSettingsScreen.tsx

@@ -233,7 +233,7 @@ const AccountSettingsScreen: React.FC<BaseScreenProps> = ({ onClose, goBack, nav
                     </Text>
                   </View>
                   <Button
-                    variant="primary"
+                    appearance="solid" tone="accent"
                     onPress={handleSave}
                     disabled={updateMutation.isPending || !displayName.trim() || Boolean(displayNameError)}
                     loading={updateMutation.isPending}

package/src/ui/screens/AccountVerificationScreen.tsx

@@ -12,7 +12,14 @@ import { Button } from '@oxy.so/bloom/button';
 import { TextField, TextFieldInput } from '@oxy.so/bloom/text-field';
 import { IconCircle } from '@oxy.so/bloom/icon-circle';
 import { BenefitList, BenefitRow } from '../components/BenefitList';
-import * as Icons from '@oxy.so/bloom/icons';
+// Per glyph, never `@oxy.so/bloom/icons`. That barrel re-exports all 461 Remix
+// glyphs and Metro does not tree-shake, so one import of it here re-ships every
+// glyph — 313,123 B, measured — to every app in this package's graph, and no
+// consumer can opt out of what a dependency asks for.
+import { RiInformationLine } from '@oxy.so/bloom/icons/RiInformationLine';
+import { RiShieldCheckLine } from '@oxy.so/bloom/icons/RiShieldCheckLine';
+import { RiSparklingLine } from '@oxy.so/bloom/icons/RiSparklingLine';
+import { RiVerifiedBadgeLine } from '@oxy.so/bloom/icons/RiVerifiedBadgeLine';
 import { useI18n } from '../hooks/useI18n';
 import { useSurfaceHeader } from '../hooks/useSurfaceHeader';
 import { useOxy } from '../context/OxyContext';
@@ -82,7 +89,7 @@ const AccountVerificationScreen: React.FC<BaseScreenProps> = ({
             <View className="px-screen-margin pb-space-32">
                 {/* Hero */}
                 <View className="items-center py-space-24 gap-space-12">
-                    <IconCircle icon={Icons.RiVerifiedBadgeLine} />
+                    <IconCircle icon={RiVerifiedBadgeLine} />
                     <H4 className="text-headerBold font-headerBold text-text text-center">
                         {t('accountVerification.heroTitle') || 'Get a verified badge'}
                     </H4>
@@ -97,15 +104,15 @@ const AccountVerificationScreen: React.FC<BaseScreenProps> = ({
                     accessibilityLabel={t('accountVerification.sections.benefits') || 'What verification gives you'}
                 >
                     <BenefitRow
-                        icon={<Icons.RiShieldCheckLine size="sm" style={{ color: bloomTheme.colors.primary }} />}
+                        icon={<RiShieldCheckLine size="sm" style={{ color: bloomTheme.colors.primary }} />}
                         label={t('accountVerification.benefits.authenticity') || 'Confirms your identity is authentic and trusted'}
                     />
                     <BenefitRow
-                        icon={<Icons.RiVerifiedBadgeLine size="sm" style={{ color: bloomTheme.colors.primary }} />}
+                        icon={<RiVerifiedBadgeLine size="sm" style={{ color: bloomTheme.colors.primary }} />}
                         label={t('accountVerification.benefits.badge') || 'Displays a verified badge across the platform'}
                     />
                     <BenefitRow
-                        icon={<Icons.RiSparklingLine size="sm" style={{ color: bloomTheme.colors.primary }} />}
+                        icon={<RiSparklingLine size="sm" style={{ color: bloomTheme.colors.primary }} />}
                         label={t('accountVerification.benefits.credibility') || 'Builds credibility with people who follow you'}
                     />
                 </BenefitList>
@@ -148,7 +155,7 @@ const AccountVerificationScreen: React.FC<BaseScreenProps> = ({
                 </View>
 
                 <Button
-                    variant="primary"
+                    appearance="solid" tone="accent"
                     size="large"
                     fullWidth
                     className="mt-space-24"
@@ -161,7 +168,7 @@ const AccountVerificationScreen: React.FC<BaseScreenProps> = ({
                 </Button>
 
                 <View className="flex-row items-start gap-space-8 mt-space-24">
-                    <Icons.RiInformationLine
+                    <RiInformationLine
                         size="sm"
                         style={{ color: bloomTheme.colors.textTertiary }}
                     />

package/src/ui/screens/AvatarCropScreen.tsx

@@ -28,16 +28,8 @@
 
 import type React from 'react';
 import { useCallback, useMemo, useRef, useState } from 'react';
-import {
-    View,
-    Text,
-    StyleSheet,
-    ActivityIndicator,
-    Image,
-    Platform,
-    AccessibilityInfo,
-    Pressable,
-} from 'react-native';
+import { View, StyleSheet, ActivityIndicator, Image, Platform, AccessibilityInfo, Pressable } from 'react-native';
+import { Text } from '@oxy.so/bloom/typography';
 import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 import Animated, {
     Easing,

package/src/ui/screens/CreateAccountScreen.tsx

@@ -474,7 +474,7 @@ const CreateAccountScreen: React.FC<BaseScreenProps> = ({
 
       {/* Create Button */}
       <Button
-        variant="primary"
+        appearance="solid" tone="accent"
         onPress={handleCreate}
         disabled={!canCreate}
         loading={isCreating}

package/src/ui/screens/FeedbackScreen.tsx

@@ -375,7 +375,7 @@ const FeedbackScreen: React.FC<BaseScreenProps> = ({
 
 			<View className="flex-row gap-space-8 mt-space-24 w-full">
 				<Button
-					variant="secondary"
+					appearance="subtle" tone="neutral"
 					onPress={goBack}
 					accessibilityLabel="Go back"
 					icon={<Ionicons name="arrow-back" size={16} color={colors.text} />}
@@ -385,7 +385,7 @@ const FeedbackScreen: React.FC<BaseScreenProps> = ({
 				</Button>
 
 				<Button
-					variant="primary"
+					appearance="solid" tone="accent"
 					onPress={nextStep}
 					disabled={!isTypeStepValid()}
 					accessibilityLabel="Continue to next step"
@@ -485,7 +485,7 @@ const FeedbackScreen: React.FC<BaseScreenProps> = ({
 
 			<View className="flex-row gap-space-8 mt-space-24 w-full">
 				<Button
-					variant="secondary"
+					appearance="subtle" tone="neutral"
 					onPress={prevStep}
 					accessibilityLabel="Go back"
 					icon={<Ionicons name="arrow-back" size={16} color={colors.text} />}
@@ -495,7 +495,7 @@ const FeedbackScreen: React.FC<BaseScreenProps> = ({
 				</Button>
 
 				<Button
-					variant="primary"
+					appearance="solid" tone="accent"
 					onPress={nextStep}
 					disabled={!isDetailsStepValid()}
 					accessibilityLabel="Continue to next step"
@@ -574,7 +574,7 @@ const FeedbackScreen: React.FC<BaseScreenProps> = ({
 
 			<View className="flex-row gap-space-8 mt-space-24 w-full">
 				<Button
-					variant="secondary"
+					appearance="subtle" tone="neutral"
 					onPress={prevStep}
 					accessibilityLabel="Go back"
 					icon={<Ionicons name="arrow-back" size={16} color={colors.text} />}
@@ -584,7 +584,7 @@ const FeedbackScreen: React.FC<BaseScreenProps> = ({
 				</Button>
 
 				<Button
-					variant="primary"
+					appearance="solid" tone="accent"
 					onPress={nextStep}
 					disabled={!isContactStepValid()}
 					accessibilityLabel="Continue to summary"
@@ -653,7 +653,7 @@ const FeedbackScreen: React.FC<BaseScreenProps> = ({
 			</View>
 
 			<Button
-				variant="primary"
+				appearance="solid" tone="accent"
 				onPress={handleSubmitFeedback}
 				disabled={feedbackState.status === "submitting"}
 				loading={feedbackState.status === "submitting"}
@@ -670,7 +670,7 @@ const FeedbackScreen: React.FC<BaseScreenProps> = ({
 
 			<View className="flex-row mt-space-16 w-full">
 				<Button
-					variant="secondary"
+					appearance="subtle" tone="neutral"
 					onPress={prevStep}
 					accessibilityLabel="Go back"
 					icon={<Ionicons name="arrow-back" size={16} color={colors.text} />}
@@ -701,7 +701,7 @@ const FeedbackScreen: React.FC<BaseScreenProps> = ({
 						"Your feedback has been submitted successfully. We'll review it and get back to you soon."}
 				</Text>
 				<Button
-					variant="primary"
+					appearance="solid" tone="accent"
 					onPress={() => {
 						resetForm();
 						setCurrentStep(0);

package/src/ui/screens/FileManagementScreen.tsx

@@ -1,16 +1,8 @@
+import { Button } from '@oxy.so/bloom/button';
 import type React from 'react';
 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, ActivityIndicator, 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 type { FileManagementScreenProps } from '../types/fileManagement';
@@ -46,11 +38,10 @@ import PhotoPickerView from './fileManagement/PhotoPickerSection';
 import FileListSection, { type FileListItem } from './fileManagement/FileListSection';
 import FileLibraryError from './fileManagement/FileLibraryError';
 import UploadBar from './fileManagement/UploadBar';
-import { AnimatedButton } from '../components/fileManagement/AnimatedButton';
+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.
 const fmHeaderStyles = StyleSheet.create({
     actionsRow: {
@@ -67,15 +58,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%', borderRadius: 6 },
 });
 
@@ -799,35 +781,16 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                 },
                 // Hide action buttons when selecting (in selectMode or bulk operations mode)
                 rightElement: (!selectMode && selectedIds.size === 0) ? (
-                    <View className="flex-row items-center gap-[6px] ml-[12px]">
-                        {(isImage || isVideo || file.contentType.includes('pdf')) && (
-                            <TouchableOpacity
-                                className="w-[34px] h-[34px] rounded-[8px] items-center justify-center"
-                                style={{ backgroundColor: colors.backgroundSecondary }}
-                                onPress={() => handleFileOpen(file)}
-                            >
-                                <Ionicons name="eye" size={18} color={colors.primary} />
-                            </TouchableOpacity>
-                        )}
-                        <TouchableOpacity
-                            className="w-[34px] h-[34px] rounded-[8px] items-center justify-center"
-                            style={{ backgroundColor: colors.backgroundSecondary }}
-                            onPress={() => handleFileDownload(file.id, file.filename)}
-                        >
-                            <Ionicons name="download" size={18} color={colors.primary} />
-                        </TouchableOpacity>
-                        <TouchableOpacity
-                            className="w-[34px] h-[34px] rounded-[8px] items-center justify-center"
-                            style={{ backgroundColor: colors.negativeSubtle }}
-                            onPress={() => confirmFileDelete(file.id, file.filename)}
-                            disabled={deletingId === file.id}
-                        >
-                            {deletingId === file.id ? (
-                                <ActivityIndicator size="small" color={colors.error} />
-                            ) : (
-                                <Ionicons name="trash" size={18} color={colors.error} />
-                            )}
-                        </TouchableOpacity>
+                    <View className="flex-row items-center gap-1.5 ml-3">
+                        {(isImage || isVideo || file.contentType.includes('pdf')) ? <Button appearance="subtle" tone="neutral" size="small" iconOnly stopPropagation
+                            accessibilityLabel={`Preview ${file.filename}`} onPress={() => handleFileOpen(file)}
+                            icon={<Ionicons name="eye" size={18} color={colors.text} />} /> : null}
+                        <Button appearance="subtle" tone="neutral" size="small" iconOnly stopPropagation
+                            accessibilityLabel={`Download ${file.filename}`} onPress={() => handleFileDownload(file.id, file.filename)}
+                            icon={<Ionicons name="download" size={18} color={colors.text} />} />
+                        <Button appearance="subtle" tone="danger" size="small" iconOnly stopPropagation loading={deletingId === file.id}
+                            accessibilityLabel={`Delete ${file.filename}`} onPress={() => confirmFileDelete(file.id, file.filename)}
+                            icon={<Ionicons name="trash" size={18} color={colors.error} />} />
                     </View>
                 ) : undefined,
             };
@@ -844,7 +807,6 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
             iconColor={colors.error}
             titleColor={colors.text}
             descriptionColor={colors.textSecondary}
-            buttonColor={colors.primary}
         />
     );
 
@@ -866,21 +828,7 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                             : t('fileManagement.emptyPhotos.otherDescription')
                     } </Text>
                     {user?.id === targetUserId && (
-                        <TouchableOpacity
-                            className="flex-row items-center px-[24px] py-[12px] rounded-[24px] gap-[8px]"
-                            style={{ backgroundColor: colors.primary }}
-                            onPress={handleFileUpload}
-                            disabled={uploading || isPickingDocument}
-                        >
-                            {(uploading || isPickingDocument) ? (
-                                <ActivityIndicator size="small" color="#FFFFFF" />
-                            ) : (
-                                <>
-                                    <Ionicons name="cloud-upload" size={20} color="#FFFFFF" />
-                                    <Text className="text-white text-[16px] font-semibold">{t('fileManagement.uploadPhotos')}</Text>
-                                </>
-                            )}
-                        </TouchableOpacity>
+                        <Button onPress={handleFileUpload} loading={uploading || isPickingDocument}>{t('fileManagement.uploadPhotos')}</Button>
                     )}
                 </View>
             );
@@ -934,21 +882,7 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                 }
             </Text>
             {user?.id === targetUserId && (
-                <TouchableOpacity
-                    className="flex-row items-center px-[24px] py-[12px] rounded-[24px] gap-[8px]"
-                    style={{ backgroundColor: colors.primary }}
-                    onPress={handleFileUpload}
-                    disabled={uploading || isPickingDocument}
-                >
-                    {(uploading || isPickingDocument) ? (
-                        <ActivityIndicator size="small" color="#FFFFFF" />
-                    ) : (
-                        <>
-                            <Ionicons name="cloud-upload" size={20} color="#FFFFFF" />
-                            <Text className="text-white text-[16px] font-semibold">{t('fileManagement.uploadFiles')}</Text>
-                        </>
-                    )}
-                </TouchableOpacity>
+                <Button onPress={handleFileUpload} loading={uploading || isPickingDocument}>{t('fileManagement.uploadFiles')}</Button>
             )}
         </View>
     );
@@ -1215,60 +1149,18 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                     className="flex-1"
                     style={{ maxWidth: '80%' }}
                 >
-                    <View
-                        className="flex-row rounded-full p-[2px] overflow-hidden"
-                        style={{ backgroundColor: colors.card }}
-                    >
-                        <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'}
-                        />
-                        <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'}
-                        />
-                        <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'}
-                        />
-                        <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'}
-                        />
-                        <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'}
-                        />
-                    </View>
+                    <SegmentedControl type="radio" label={t('fileManagement.viewMode') || 'File type'}
+                        value={viewMode} onValueChange={setViewMode} size="small">
+                        {(['all', 'photos', 'videos', 'documents', 'audio'] as const).map(mode => (
+                            <SegmentedControlItem key={mode} value={mode} accessibilityLabel={mode}>
+                                <MaterialCommunityIcons
+                                    name={({ all: 'folder-outline', photos: 'image-multiple-outline', videos: 'video-outline', documents: 'file-document-outline', audio: 'music-note-outline' } as const)[mode]}
+                                    size={18} color={colors.text} />
+                            </SegmentedControlItem>
+                        ))}
+                    </SegmentedControl>
                 </ScrollView>
-                <TouchableOpacity
-                    className="flex-row items-center justify-center px-[10px] py-[6px] rounded-full min-w-[36px] gap-[4px]"
-                    style={{ backgroundColor: colors.card }}
+                <Button appearance="subtle" tone="neutral" size="small"
                     accessibilityRole="button"
                     accessibilityLabel={t('fileManagement.a11y.sortBy', {
                         field: sortBy,
@@ -1285,7 +1177,7 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                             setSortOrder(prev => prev === 'asc' ? 'desc' : 'asc');
                         }
                     }}
-                >
+                    trailing={<View className="flex-row items-center gap-1">
                     <MaterialCommunityIcons
                         name={
                             sortBy === 'date' ? 'calendar' :
@@ -1300,58 +1192,21 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                         size={14}
                         color={colors.textSecondary}
                     />
-                </TouchableOpacity>
+                </View>} />
                 {user?.id === targetUserId && (!selectMode || allowUploadInSelectMode) && (
-                    <TouchableOpacity
-                        className="h-[44px] w-[44px] rounded-[22px] items-center justify-center"
-                        style={{ backgroundColor: colors.primary }}
-                        onPress={handleFileUpload}
-                        disabled={uploading || isPickingDocument}
-                        accessibilityRole="button"
+                    <Button iconOnly onPress={handleFileUpload} loading={uploading || isPickingDocument}
                         accessibilityLabel={t('fileManagement.a11y.uploadFile') || 'Upload file'}
-                        accessibilityState={{ busy: uploading || isPickingDocument }}
-                    >
-                        {uploading ? (
-                            <View className="items-center justify-center">
-                                <ActivityIndicator size="small" color="#FFFFFF" />
-                                {uploadProgress && (
-                                    <Text className="text-white text-[10px] font-semibold mt-[2px]">
-                                        {uploadProgress.current}/{uploadProgress.total}
-                                    </Text>
-                                )}
-                            </View>
-                        ) : isPickingDocument ? (
-                            <ActivityIndicator size="small" color="#FFFFFF" />
-                        ) : (
-                            <Ionicons name="add" size={22} color="#FFFFFF" />
-                        )}
-                    </TouchableOpacity>
+                        icon={<Ionicons name="add" size={22} color={colors.primaryForeground} />} />
                 )}
             </View>
 
             {/* Search Bar */}
             {files.length > 0 && (viewMode === 'all' || files.some(f => f.contentType.startsWith('image/'))) && (
-                <View
-                    className="flex-row items-center px-[14px] py-[10px] mx-[12px] mb-[12px] rounded-full gap-[10px]"
-                    style={{ backgroundColor: colors.card }}
-                >
-                    <Ionicons name="search" size={22} color={colors.icon} />
-                    <TextInput
-                        className="flex-1 text-[16px] leading-[20px]"
-                        style={{ color: colors.text }}
-                        placeholder={viewMode === 'photos' ? t('fileManagement.searchPhotos') : t('fileManagement.searchFiles')}
-                        placeholderTextColor={colors.textSecondary}
-                        value={searchQuery}
-                        onChangeText={setSearchQuery}
+                <View className="mx-[12px] mb-[12px]">
+                    <Search
+                        label={viewMode === 'photos' ? t('fileManagement.searchPhotos') : t('fileManagement.searchFiles')}
+                        value={searchQuery} onValueChange={setSearchQuery} onClearText={() => setSearchQuery('')}
                     />
-                    {searchQuery.length > 0 && (
-                        <TouchableOpacity
-                            onPress={() => setSearchQuery('')}
-                            className="p-[4px] rounded-[12px] items-center justify-center"
-                        >
-                            <Ionicons name="close-circle" size={22} color={colors.icon} />
-                        </TouchableOpacity>
-                    )}
                 </View>
             )}
 
@@ -1410,8 +1265,6 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
             {!selectMode && uploading && (
                 <UploadBar
                     uploadProgress={uploadProgress}
-                    isDark={bloomTheme.isDark}
-                    colors={colors}
                     t={t}
                 />
             )}