@oxyhq/services 10.5.0 → 11.1.0

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

@@ -1,8 +1,11 @@
 "use strict";
 
 import { useEffect, useState } from 'react';
-import { View, Text, StyleSheet, ActivityIndicator, ScrollView, TouchableOpacity } from 'react-native';
+import { View, StyleSheet, ActivityIndicator, ScrollView } from 'react-native';
 import { useTheme } from '@oxyhq/bloom/theme';
+import { Button } from '@oxyhq/bloom/button';
+import { H2, Text } from '@oxyhq/bloom/typography';
+import { SettingsListGroup, SettingsListItem } from '@oxyhq/bloom/settings-list';
 import Avatar from "../components/Avatar.js";
 import FollowButton from "../components/FollowButton.js";
 import { useFollow } from "../hooks/useFollow.js";
@@ -12,6 +15,10 @@ import { useOxy } from "../context/OxyContext.js";
 import { getAccountDisplayName, logger } from '@oxyhq/core';
 import { extractErrorMessage } from "../utils/errorHandlers.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const AVATAR_SIZE = 96;
+const BANNER_HEIGHT = 160;
+const AVATAR_OVERLAP = -56;
+const INFO_ICON_SIZE = 18;
 const ProfileScreen = ({
   userId,
   username,
@@ -39,7 +46,6 @@ const ProfileScreen = ({
     isLoadingCounts
   } = useFollow(userId);
   const bloomTheme = useTheme();
-  const styles = createStyles();
   const {
     t,
     locale
@@ -157,10 +163,8 @@ const ProfileScreen = ({
   }, [userId]);
   if (isLoading) {
     return /*#__PURE__*/_jsx(View, {
-      style: [styles.container, {
-        justifyContent: 'center',
-        backgroundColor: bloomTheme.colors.background
-      }],
+      style: styles.centerContainer,
+      className: "bg-bg",
       children: /*#__PURE__*/_jsx(ActivityIndicator, {
         size: "large",
         color: bloomTheme.colors.primary
@@ -169,82 +173,77 @@ const ProfileScreen = ({
   }
   if (error) {
     return /*#__PURE__*/_jsxs(View, {
-      style: [styles.container, {
-        backgroundColor: bloomTheme.colors.background
-      }],
+      style: styles.container,
+      className: "bg-bg",
       children: [/*#__PURE__*/_jsxs(View, {
-        style: [styles.errorHeader, {
-          borderBottomColor: bloomTheme.colors.border
-        }],
-        children: [goBack && /*#__PURE__*/_jsx(TouchableOpacity, {
+        style: styles.errorHeader,
+        className: "px-screen-margin py-space-12 border-b border-border",
+        children: [goBack && /*#__PURE__*/_jsx(Button, {
+          variant: "icon",
+          size: "icon",
           onPress: goBack,
-          style: styles.backButton,
-          children: /*#__PURE__*/_jsx(Ionicons, {
+          accessibilityLabel: t('common.back') || 'Back',
+          icon: /*#__PURE__*/_jsx(Ionicons, {
             name: "arrow-back",
-            size: 24,
+            size: 22,
             color: bloomTheme.colors.text
           })
-        }), /*#__PURE__*/_jsx(Text, {
+        }), /*#__PURE__*/_jsx(H2, {
           style: styles.errorTitle,
-          className: "text-foreground",
-          children: "Profile Error"
+          className: "text-text",
+          children: t('profile.errorTitle') || 'Profile Error'
         })]
       }), /*#__PURE__*/_jsxs(View, {
         style: styles.errorContent,
+        className: "px-space-32 gap-space-12",
         children: [/*#__PURE__*/_jsx(Ionicons, {
           name: "alert-circle",
           size: 48,
-          color: bloomTheme.colors.error,
-          style: styles.errorIcon
+          color: bloomTheme.colors.error
         }), /*#__PURE__*/_jsx(Text, {
           style: styles.errorText,
-          className: "text-destructive",
+          className: "text-text",
           children: error
         }), /*#__PURE__*/_jsx(Text, {
           style: styles.errorSubtext,
-          className: "text-muted-foreground",
-          children: "This could happen if the user doesn't exist or the profile service is unavailable."
+          className: "text-text-secondary",
+          children: t('profile.errorSubtext') || "This could happen if the user doesn't exist or the profile service is unavailable."
         })]
       })]
     });
   }
+  const displayName = profile ? getAccountDisplayName(profile, locale) : username || '';
   return /*#__PURE__*/_jsx(View, {
-    style: [styles.container, {
-      backgroundColor: bloomTheme.colors.background
-    }],
+    style: styles.container,
+    className: "bg-bg",
     children: /*#__PURE__*/_jsxs(ScrollView, {
-      style: {
-        flex: 1
-      },
+      style: styles.flex,
       contentContainerStyle: styles.scrollContainer,
       children: [/*#__PURE__*/_jsx(View, {
         style: styles.bannerContainer,
-        className: "bg-primary/20",
+        className: "bg-fill-brand/20",
         children: /*#__PURE__*/_jsx(View, {
-          style: styles.bannerImage,
-          className: "bg-primary"
+          style: styles.flex,
+          className: "bg-fill-brand"
         })
       }), /*#__PURE__*/_jsxs(View, {
         style: styles.avatarRow,
+        className: "px-screen-margin",
         children: [/*#__PURE__*/_jsx(View, {
           style: styles.avatarWrapper,
-          className: "border-background bg-background",
+          className: "border-bg bg-bg rounded-radius-max",
           children: /*#__PURE__*/_jsx(Avatar, {
             uri: profile?.avatar ? oxyServices.getFileDownloadUrl(profile.avatar, 'thumb') : undefined,
-            name: profile ? getAccountDisplayName(profile, locale) : username,
-            size: 96
+            name: displayName || username,
+            size: AVATAR_SIZE
           })
         }), /*#__PURE__*/_jsx(View, {
           style: styles.actionButtonWrapper,
-          children: isOwnProfile ? /*#__PURE__*/_jsx(TouchableOpacity, {
-            style: styles.actionButton,
-            className: "bg-background border-primary",
+          children: isOwnProfile ? /*#__PURE__*/_jsx(Button, {
+            variant: "secondary",
+            size: "small",
             onPress: () => navigate?.('ManageAccount'),
-            children: /*#__PURE__*/_jsx(Text, {
-              style: styles.actionButtonText,
-              className: "text-primary",
-              children: t('editProfile.title') || 'Edit Profile'
-            })
+            children: t('editProfile.title') || 'Edit Profile'
           }) : /*#__PURE__*/_jsx(FollowButton, {
             userId: userId,
             onFollowChange: isFollowing => {
@@ -259,264 +258,192 @@ const ProfileScreen = ({
         })]
       }), /*#__PURE__*/_jsxs(View, {
         style: styles.header,
-        children: [/*#__PURE__*/_jsx(Text, {
+        className: "px-screen-margin",
+        children: [/*#__PURE__*/_jsx(H2, {
           style: styles.displayName,
-          className: "text-foreground",
-          children: profile ? getAccountDisplayName(profile, locale) : username || ''
+          className: "text-text",
+          children: displayName
         }), profile?.username && /*#__PURE__*/_jsxs(Text, {
           style: styles.subText,
-          className: "text-muted-foreground",
+          className: "text-text-secondary",
           children: ["@", profile.username]
         }), /*#__PURE__*/_jsx(Text, {
           style: styles.bio,
-          className: "text-foreground",
+          className: "text-text",
           children: profile?.bio || t('profile.noBio') || 'This user has no bio yet.'
+        })]
+      }), /*#__PURE__*/_jsxs(SettingsListGroup, {
+        children: [profile?.createdAt && /*#__PURE__*/_jsx(SettingsListItem, {
+          icon: /*#__PURE__*/_jsx(Ionicons, {
+            name: "calendar-outline",
+            size: INFO_ICON_SIZE,
+            color: bloomTheme.colors.textSecondary
+          }),
+          title: t('profile.joinedOn', {
+            date: new Date(profile.createdAt).toLocaleDateString()
+          }) || `Joined ${new Date(profile.createdAt).toLocaleDateString()}`,
+          showChevron: false
+        }), profile?.location && /*#__PURE__*/_jsx(SettingsListItem, {
+          icon: /*#__PURE__*/_jsx(Ionicons, {
+            name: "location-outline",
+            size: INFO_ICON_SIZE,
+            color: bloomTheme.colors.textSecondary
+          }),
+          title: profile.location,
+          showChevron: false
+        }), profile?.website && /*#__PURE__*/_jsx(SettingsListItem, {
+          icon: /*#__PURE__*/_jsx(Ionicons, {
+            name: "globe-outline",
+            size: INFO_ICON_SIZE,
+            color: bloomTheme.colors.textSecondary
+          }),
+          title: profile.website,
+          showChevron: false
+        }), profile && 'company' in profile && typeof profile.company === 'string' && profile.company && /*#__PURE__*/_jsx(SettingsListItem, {
+          icon: /*#__PURE__*/_jsx(Ionicons, {
+            name: "business-outline",
+            size: INFO_ICON_SIZE,
+            color: bloomTheme.colors.textSecondary
+          }),
+          title: profile.company,
+          showChevron: false
+        }), profile && 'jobTitle' in profile && typeof profile.jobTitle === 'string' && profile.jobTitle && /*#__PURE__*/_jsx(SettingsListItem, {
+          icon: /*#__PURE__*/_jsx(Ionicons, {
+            name: "briefcase-outline",
+            size: INFO_ICON_SIZE,
+            color: bloomTheme.colors.textSecondary
+          }),
+          title: profile.jobTitle,
+          showChevron: false
+        }), profile && 'education' in profile && typeof profile.education === 'string' && profile.education && /*#__PURE__*/_jsx(SettingsListItem, {
+          icon: /*#__PURE__*/_jsx(Ionicons, {
+            name: "school-outline",
+            size: INFO_ICON_SIZE,
+            color: bloomTheme.colors.textSecondary
+          }),
+          title: profile.education,
+          showChevron: false
+        }), profile && 'birthday' in profile && typeof profile.birthday === 'string' && profile.birthday && /*#__PURE__*/_jsx(SettingsListItem, {
+          icon: /*#__PURE__*/_jsx(Ionicons, {
+            name: "gift-outline",
+            size: INFO_ICON_SIZE,
+            color: bloomTheme.colors.textSecondary
+          }),
+          title: t('profile.bornOn', {
+            date: new Date(profile.birthday).toLocaleDateString()
+          }) || `Born ${new Date(profile.birthday).toLocaleDateString()}`,
+          showChevron: false
+        }), links.length > 0 && /*#__PURE__*/_jsx(SettingsListItem, {
+          icon: /*#__PURE__*/_jsx(Ionicons, {
+            name: "link-outline",
+            size: INFO_ICON_SIZE,
+            color: bloomTheme.colors.textSecondary
+          }),
+          title: links[0].url,
+          value: links.length > 1 ? t('profile.more', {
+            count: links.length - 1
+          }) || `+ ${links.length - 1} more` : undefined,
+          onPress: () => navigate?.('UserLinks', {
+            userId,
+            links
+          })
+        })]
+      }), /*#__PURE__*/_jsxs(View, {
+        style: styles.statsRow,
+        className: "px-screen-margin",
+        children: [/*#__PURE__*/_jsxs(View, {
+          style: styles.statItem,
+          children: [/*#__PURE__*/_jsx(Text, {
+            style: styles.statAmount,
+            className: "text-text-inverse",
+            children: reputationTotal !== null && reputationTotal !== undefined ? reputationTotal : '--'
+          }), /*#__PURE__*/_jsx(Text, {
+            style: styles.statLabel,
+            className: "text-text-secondary",
+            children: t('profile.reputation') || 'Reputation'
+          })]
         }), /*#__PURE__*/_jsxs(View, {
-          style: styles.infoGrid,
-          children: [profile?.createdAt && /*#__PURE__*/_jsxs(View, {
-            style: styles.infoGridItem,
-            children: [/*#__PURE__*/_jsx(Ionicons, {
-              name: "calendar-outline",
-              size: 16,
-              color: bloomTheme.colors.textSecondary,
-              style: {
-                marginRight: 6
-              }
-            }), /*#__PURE__*/_jsx(Text, {
-              style: styles.infoGridText,
-              className: "text-muted-foreground",
-              children: t('profile.joinedOn', {
-                date: new Date(profile.createdAt).toLocaleDateString()
-              }) || `Joined ${new Date(profile.createdAt).toLocaleDateString()}`
-            })]
-          }), profile?.location && /*#__PURE__*/_jsxs(View, {
-            style: styles.infoGridItem,
-            children: [/*#__PURE__*/_jsx(Ionicons, {
-              name: "location-outline",
-              size: 16,
-              color: bloomTheme.colors.textSecondary,
-              style: {
-                marginRight: 6
-              }
-            }), /*#__PURE__*/_jsx(Text, {
-              style: styles.infoGridText,
-              className: "text-muted-foreground",
-              numberOfLines: 1,
-              children: profile.location
-            })]
-          }), profile?.website && /*#__PURE__*/_jsxs(View, {
-            style: styles.infoGridItem,
-            children: [/*#__PURE__*/_jsx(Ionicons, {
-              name: "globe-outline",
-              size: 16,
-              color: bloomTheme.colors.textSecondary,
-              style: {
-                marginRight: 6
-              }
-            }), /*#__PURE__*/_jsx(Text, {
-              style: styles.infoGridText,
-              className: "text-muted-foreground",
-              numberOfLines: 1,
-              children: profile.website
-            })]
-          }), profile && 'company' in profile && typeof profile.company === 'string' && profile.company && /*#__PURE__*/_jsxs(View, {
-            style: styles.infoGridItem,
-            children: [/*#__PURE__*/_jsx(Ionicons, {
-              name: "business-outline",
-              size: 16,
-              color: bloomTheme.colors.textSecondary,
-              style: {
-                marginRight: 6
-              }
-            }), /*#__PURE__*/_jsx(Text, {
-              style: styles.infoGridText,
-              className: "text-muted-foreground",
-              numberOfLines: 1,
-              children: profile.company
-            })]
-          }), profile && 'jobTitle' in profile && typeof profile.jobTitle === 'string' && profile.jobTitle && /*#__PURE__*/_jsxs(View, {
-            style: styles.infoGridItem,
-            children: [/*#__PURE__*/_jsx(Ionicons, {
-              name: "briefcase-outline",
-              size: 16,
-              color: bloomTheme.colors.textSecondary,
-              style: {
-                marginRight: 6
-              }
-            }), /*#__PURE__*/_jsx(Text, {
-              style: styles.infoGridText,
-              className: "text-muted-foreground",
-              numberOfLines: 1,
-              children: profile.jobTitle
-            })]
-          }), profile && 'education' in profile && typeof profile.education === 'string' && profile.education && /*#__PURE__*/_jsxs(View, {
-            style: styles.infoGridItem,
-            children: [/*#__PURE__*/_jsx(Ionicons, {
-              name: "school-outline",
-              size: 16,
-              color: bloomTheme.colors.textSecondary,
-              style: {
-                marginRight: 6
-              }
-            }), /*#__PURE__*/_jsx(Text, {
-              style: styles.infoGridText,
-              className: "text-muted-foreground",
-              numberOfLines: 1,
-              children: profile.education
-            })]
-          }), profile && 'birthday' in profile && typeof profile.birthday === 'string' && profile.birthday && /*#__PURE__*/_jsxs(View, {
-            style: styles.infoGridItem,
-            children: [/*#__PURE__*/_jsx(Ionicons, {
-              name: "gift-outline",
-              size: 16,
-              color: bloomTheme.colors.textSecondary,
-              style: {
-                marginRight: 6
-              }
-            }), /*#__PURE__*/_jsx(Text, {
-              style: styles.infoGridText,
-              className: "text-muted-foreground",
-              children: t('profile.bornOn', {
-                date: new Date(profile.birthday).toLocaleDateString()
-              }) || `Born ${new Date(profile.birthday).toLocaleDateString()}`
-            })]
-          }), links.length > 0 && /*#__PURE__*/_jsxs(TouchableOpacity, {
-            style: styles.infoGridItem,
-            onPress: () => navigate?.('UserLinks', {
-              userId,
-              links
-            }),
-            children: [/*#__PURE__*/_jsx(Ionicons, {
-              name: "link-outline",
-              size: 16,
-              color: bloomTheme.colors.textSecondary,
-              style: {
-                marginRight: 6
-              }
-            }), /*#__PURE__*/_jsx(Text, {
-              style: styles.infoGridText,
-              className: "text-muted-foreground",
-              numberOfLines: 1,
-              children: links[0].url
-            }), links.length > 1 && /*#__PURE__*/_jsx(Text, {
-              style: styles.linksMore,
-              className: "text-muted-foreground",
-              children: t('profile.more', {
-                count: links.length - 1
-              }) || `+ ${links.length - 1} more`
-            })]
+          style: styles.statItem,
+          children: [isLoadingCounts ? /*#__PURE__*/_jsx(ActivityIndicator, {
+            size: "small",
+            color: bloomTheme.colors.text
+          }) : /*#__PURE__*/_jsx(Text, {
+            style: styles.statAmount,
+            className: "text-text",
+            children: followerCount !== null ? followerCount : '--'
+          }), /*#__PURE__*/_jsx(Text, {
+            style: styles.statLabel,
+            className: "text-text-secondary",
+            children: t('profile.followers') || 'Followers'
           })]
-        }), /*#__PURE__*/_jsx(View, {
-          style: styles.divider,
-          className: "bg-border"
         }), /*#__PURE__*/_jsxs(View, {
-          style: styles.statsRow,
-          children: [/*#__PURE__*/_jsxs(View, {
-            style: styles.statItem,
-            children: [/*#__PURE__*/_jsx(Text, {
-              style: styles.statAmount,
-              className: "text-primary",
-              children: reputationTotal !== null && reputationTotal !== undefined ? reputationTotal : '--'
-            }), /*#__PURE__*/_jsx(Text, {
-              style: styles.statLabel,
-              className: "text-muted-foreground",
-              children: t('profile.reputation') || 'Reputation'
-            })]
-          }), /*#__PURE__*/_jsxs(View, {
-            style: styles.statItem,
-            children: [isLoadingCounts ? /*#__PURE__*/_jsx(ActivityIndicator, {
-              size: "small",
-              color: bloomTheme.colors.text
-            }) : /*#__PURE__*/_jsx(Text, {
-              style: styles.statAmount,
-              className: "text-foreground",
-              children: followerCount !== null ? followerCount : '--'
-            }), /*#__PURE__*/_jsx(Text, {
-              style: styles.statLabel,
-              className: "text-muted-foreground",
-              children: t('profile.followers') || 'Followers'
-            })]
-          }), /*#__PURE__*/_jsxs(View, {
-            style: styles.statItem,
-            children: [isLoadingCounts ? /*#__PURE__*/_jsx(ActivityIndicator, {
-              size: "small",
-              color: bloomTheme.colors.text
-            }) : /*#__PURE__*/_jsx(Text, {
-              style: styles.statAmount,
-              className: "text-foreground",
-              children: followingCount !== null ? followingCount : '--'
-            }), /*#__PURE__*/_jsx(Text, {
-              style: styles.statLabel,
-              className: "text-muted-foreground",
-              children: t('profile.following') || 'Following'
-            })]
+          style: styles.statItem,
+          children: [isLoadingCounts ? /*#__PURE__*/_jsx(ActivityIndicator, {
+            size: "small",
+            color: bloomTheme.colors.text
+          }) : /*#__PURE__*/_jsx(Text, {
+            style: styles.statAmount,
+            className: "text-text",
+            children: followingCount !== null ? followingCount : '--'
+          }), /*#__PURE__*/_jsx(Text, {
+            style: styles.statLabel,
+            className: "text-text-secondary",
+            children: t('profile.following') || 'Following'
           })]
         })]
       })]
     })
   });
 };
-const createStyles = () => StyleSheet.create({
+
+// Layout-only styles: flex, dimensions, and the measured banner/avatar overlap
+// that no token class can express. Colors, spacing, radius, and typography roles
+// live on Bloom components + NativeWind token classes.
+const styles = StyleSheet.create({
   container: {
     flex: 1
   },
+  flex: {
+    flex: 1
+  },
+  centerContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
   scrollContainer: {
     alignItems: 'stretch',
     paddingBottom: 40
   },
   bannerContainer: {
-    height: 160,
+    height: BANNER_HEIGHT,
     position: 'relative',
     overflow: 'hidden'
   },
-  bannerImage: {
-    flex: 1
-  },
   avatarRow: {
     flexDirection: 'row',
     alignItems: 'flex-end',
-    marginTop: -56,
-    paddingHorizontal: 20,
+    marginTop: AVATAR_OVERLAP,
     justifyContent: 'space-between',
     zIndex: 2
   },
   avatarWrapper: {
     borderWidth: 5,
-    borderRadius: 64,
     overflow: 'hidden'
   },
   actionButtonWrapper: {
     flex: 1,
     alignItems: 'flex-end',
-    justifyContent: 'flex-end'
-  },
-  actionButton: {
-    borderWidth: 1,
-    borderRadius: 24,
-    paddingVertical: 7,
-    paddingHorizontal: 22,
-    marginBottom: 8,
-    elevation: 2,
-    shadowOffset: {
-      width: 0,
-      height: 1
-    },
-    shadowOpacity: 0.08,
-    shadowRadius: 2
-  },
-  actionButtonText: {
-    fontWeight: 'bold',
-    fontSize: 16
+    justifyContent: 'flex-end',
+    paddingBottom: 8
   },
   header: {
     alignItems: 'flex-start',
     width: '100%',
-    paddingHorizontal: 20
+    marginTop: 10
   },
   displayName: {
     fontSize: 24,
-    fontWeight: 'bold',
-    marginTop: 10,
     marginBottom: 2,
     letterSpacing: 0.1
   },
@@ -527,40 +454,13 @@ const createStyles = () => StyleSheet.create({
   bio: {
     fontSize: 16,
     marginTop: 10,
-    marginBottom: 10,
     lineHeight: 22
   },
-  infoGrid: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    marginBottom: 10,
-    flexWrap: 'wrap'
-  },
-  infoGridItem: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    marginRight: 24,
-    marginBottom: 4
-  },
-  infoGridText: {
-    fontSize: 15
-  },
-  divider: {
-    height: 1,
-    width: '100%',
-    marginVertical: 14
-  },
-  linksMore: {
-    fontSize: 15,
-    marginLeft: 4
-  },
   statsRow: {
     width: '100%',
-    flex: 1,
     flexDirection: 'row',
     alignItems: 'center',
-    marginTop: 6,
-    marginBottom: 2,
+    marginTop: 14,
     justifyContent: 'space-between'
   },
   statItem: {
@@ -580,41 +480,28 @@ const createStyles = () => StyleSheet.create({
     textAlign: 'center',
     letterSpacing: 0.2
   },
-  // Error handling styles
+  // Error state layout
   errorHeader: {
     flexDirection: 'row',
     alignItems: 'center',
-    paddingHorizontal: 16,
-    paddingVertical: 12,
-    borderBottomWidth: 1
-  },
-  backButton: {
-    padding: 8,
-    marginRight: 16
+    gap: 16
   },
   errorTitle: {
-    fontSize: 20,
-    fontWeight: 'bold'
+    fontSize: 20
   },
   errorContent: {
     flex: 1,
     justifyContent: 'center',
-    alignItems: 'center',
-    paddingHorizontal: 32
-  },
-  errorIcon: {
-    marginBottom: 16
+    alignItems: 'center'
   },
   errorText: {
     fontSize: 18,
     fontWeight: '600',
-    textAlign: 'center',
-    marginBottom: 8
+    textAlign: 'center'
   },
   errorSubtext: {
     fontSize: 14,
-    textAlign: 'center',
-    opacity: 0.7
+    textAlign: 'center'
   }
 });
 export default ProfileScreen;