@oxy.so/services 11.14.0 → 11.15.0

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

@@ -9,28 +9,30 @@ var _reactNative = require("react-native");
 var _reactQuery = require("@tanstack/react-query");
 var _theme = require("@oxy.so/bloom/theme");
 var _button = require("@oxy.so/bloom/button");
+var _buttonGroup = require("@oxy.so/bloom/button-group");
+var _RiSettings3Line = require("@oxy.so/bloom/icons/RiSettings3Line");
+var _pressableScale = require("@oxy.so/bloom/pressable-scale");
+var _styles = require("@oxy.so/bloom/styles");
 var _typography = require("@oxy.so/bloom/typography");
-var _settingsList = require("@oxy.so/bloom/settings-list");
 var _avatar = require("@oxy.so/bloom/avatar");
+var Skeleton = _interopRequireWildcard(require("@oxy.so/bloom/skeleton"));
+var _coverHeader = require("@oxy.so/bloom/cover-header");
 var _FollowButton = _interopRequireDefault(require("../components/FollowButton.js"));
 var _useFollow = require("../hooks/useFollow.js");
 var _Ionicons = _interopRequireDefault(require("../icons/Ionicons.js"));
 var _useI18n = require("../hooks/useI18n.js");
 var _useSurfaceHeader = require("../hooks/useSurfaceHeader.js");
-var _OxyContext = require("../context/OxyContext.js");
+var _oxyRuntimeContext = require("../context/oxyRuntimeContext.js");
 var _core = require("@oxy.so/core");
 var _errorHandlers = require("../utils/errorHandlers.js");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 const AVATAR_SIZE = 96;
-const BANNER_HEIGHT = 160;
-const AVATAR_OVERLAP = -56;
 const INFO_ICON_SIZE = 18;
 const ProfileScreen = ({
   userId,
   username,
-  theme,
-  goBack,
   navigate
 }) => {
   // Use useOxy() hook for OxyContext values. "Me" for own-profile detection
@@ -40,7 +42,7 @@ const ProfileScreen = ({
   const {
     oxyServices,
     user: currentUser
-  } = (0, _OxyContext.useOxy)();
+  } = (0, _oxyRuntimeContext.useOxy)();
 
   // Use the follow hook for real follower data
   const {
@@ -49,8 +51,10 @@ const ProfileScreen = ({
     isLoadingCounts
   } = (0, _useFollow.useFollow)(userId);
   const bloomTheme = (0, _theme.useTheme)();
+  const surfaceFill = (0, _styles.useSurfaceFill)();
   const {
-    t
+    t,
+    locale
   } = (0, _useI18n.useI18n)();
 
   // Check if current user is viewing their own profile
@@ -90,15 +94,12 @@ const ProfileScreen = ({
       }
       return {
         profile: profileRes,
-        reputationTotal: typeof reputationRes.total === 'number' ? reputationRes.total : null,
-        links: (0, _core.normalizeProfileLinks)(profileRes.linksMetadata, profileRes.links)
+        reputationTotal: typeof reputationRes.total === 'number' ? reputationRes.total : null
       };
     }
   });
-  const profile = profileQuery.data?.profile ?? null;
+  const profile = profileQuery.data?.profile ?? (isOwnProfile ? currentUser : null);
   const reputationTotal = profileQuery.data?.reputationTotal ?? null;
-  const links = profileQuery.data?.links ?? [];
-  const isLoading = !!userId && profileQuery.isLoading;
 
   // Friendly, status-aware error copy derived from the query error (no effect).
   const error = (0, _react.useMemo)(() => {
@@ -119,30 +120,13 @@ const ProfileScreen = ({
     return errorMessageText || 'Failed to load profile';
   }, [userId, profileQuery.isError, profileQuery.error, isOwnProfile]);
 
-  // Display name: the loaded profile's, else the passed handle. Also the nav-bar
-  // title (a stable "Profile" fallback before it resolves), so the banner +
-  // overlapping avatar scroll as content UNDER the shared gradient nav bar.
-  // `onImage` tone keeps the title + close legible over the colored banner.
-  // Ends in a string, deliberately: `getNormalizedUserHandle` answers `null` for a
-  // user it cannot normalise, and letting that null travel makes this `string | null`
-  // — which does not satisfy `Avatar.name` and does not typecheck. Empty is the honest
-  // bottom of the chain and every reader below already treats it as falsy
-  // (`displayName || t('profile.title')`), so nothing renders a literal "null".
+  // The dialog owns navigation chrome; CoverHeader owns the profile artwork
+  // and avatar overlap. A neutral cover is not an on-image navigation surface.
   const displayName = profile ? profile.name?.displayName ?? (0, _core.getNormalizedUserHandle)(profile) ?? '' : username || '';
   (0, _useSurfaceHeader.useSurfaceHeader)({
     title: displayName || t('profile.title'),
-    largeTitle: false,
-    tone: 'onImage'
+    largeTitle: false
   });
-  if (isLoading) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      className: "items-center py-space-40",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ActivityIndicator, {
-        size: "large",
-        color: bloomTheme.colors.primary
-      })
-    });
-  }
   if (error) {
     // The shared nav header owns back/close; the error body is just the alert.
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
@@ -167,6 +151,58 @@ const ProfileScreen = ({
       })]
     });
   }
+  if (!profile && profileQuery.isPending) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      testID: "profile-skeleton",
+      accessibilityLabel: t('common.loading'),
+      accessibilityState: {
+        busy: true
+      },
+      style: styles.scrollContainer,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_coverHeader.CoverHeader, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: styles.avatarRow,
+          className: "px-screen-margin",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Skeleton.Circle, {
+            size: AVATAR_SIZE
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Skeleton.Box, {
+            width: 88,
+            height: 32,
+            borderRadius: 16
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          className: "px-screen-margin gap-space-8",
+          style: styles.header,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Skeleton.Box, {
+            width: 180,
+            height: 28
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Skeleton.Box, {
+            width: 110,
+            height: 18
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Skeleton.Box, {
+            width: "100%",
+            height: 18,
+            style: {
+              marginTop: 10
+            }
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Skeleton.Box, {
+            width: "75%",
+            height: 18
+          })]
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        className: "px-screen-margin gap-space-12",
+        style: styles.details,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Skeleton.Box, {
+          width: "65%",
+          height: 18
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Skeleton.Box, {
+          width: "85%",
+          height: 18
+        })]
+      })]
+    });
+  }
 
   // The singular `location` field was removed from the User contract; derive
   // the primary place from the `locations` list instead. `locations` is only
@@ -180,189 +216,214 @@ const ProfileScreen = ({
     }
     return undefined;
   })();
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-    style: styles.scrollContainer,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: styles.bannerContainer,
-      className: "bg-fill-brand/20",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: styles.flex,
-        className: "bg-fill-brand"
-      })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: styles.avatarRow,
-      className: "px-screen-margin",
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: styles.avatarWrapper,
-        className: "border-bg bg-bg rounded-radius-max",
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_avatar.Avatar
-        // `getFileDownloadUrl` answers `null` for a reference it cannot
-        // resolve, and `Avatar.source` takes `undefined` for "no picture" —
-        // the two spellings of absent do not meet, so the coalesce is the
-        // whole fix. Without it this file does not typecheck, which blocks
-        // `bun run build` and therefore every publish of this package.
-        , {
-          source: profile?.avatar ? oxyServices.assets.publicUrl(profile.avatar, 'thumb') ?? undefined : undefined,
-          name: displayName,
-          size: AVATAR_SIZE
+  const metadata = [];
+  if (primaryLocation) metadata.push({
+    key: 'location',
+    icon: 'location-outline',
+    label: primaryLocation
+  });
+  if (profile?.createdAt) {
+    const joined = new Date(profile.createdAt);
+    if (!Number.isNaN(joined.getTime())) metadata.push({
+      key: 'joined',
+      icon: 'calendar-outline',
+      label: t('profile.joinedOn', {
+        date: joined.toLocaleDateString(locale, {
+          month: 'long',
+          year: 'numeric'
         })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: styles.actionButtonWrapper,
-        children: isOwnProfile ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.Button, {
-          appearance: "subtle",
-          tone: "neutral",
-          size: "sm",
-          onPress: () => navigate?.('ManageAccount'),
-          children: t('editProfile.title') || 'Edit Profile'
-        }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_FollowButton.default, {
-          userId: userId,
-          onFollowChange: isFollowing => {
-            // The follow button will automatically update counts via Zustand
-            if (__DEV__) {
-              _core.logger.debug(`Follow status changed: ${isFollowing}`, {
-                component: 'ProfileScreen'
-              });
-            }
-          }
+      })
+    });
+  }
+  for (const [key, icon] of [['company', 'business-outline'], ['jobTitle', 'briefcase-outline'], ['education', 'school-outline']]) {
+    const value = profile?.[key];
+    if (typeof value === 'string' && value.trim()) metadata.push({
+      key,
+      icon,
+      label: value
+    });
+  }
+  if (typeof profile?.birthday === 'string' && profile.birthday) {
+    const birthday = new Date(profile.birthday);
+    if (!Number.isNaN(birthday.getTime())) metadata.push({
+      key: 'birthday',
+      icon: 'gift-outline',
+      label: t('profile.bornOn', {
+        date: birthday.toLocaleDateString(locale, {
+          timeZone: 'UTC'
         })
-      })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: styles.header,
-      className: "px-screen-margin",
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_typography.H2, {
-        style: styles.displayName,
-        className: "text-text",
-        children: displayName
-      }), profile?.username && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_typography.Text, {
-        style: styles.subText,
-        className: "text-text-secondary",
-        children: ["@", profile.username]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_typography.Text, {
-        style: styles.bio,
-        className: "text-text",
-        children: profile?.bio || t('profile.noBio') || 'This user has no bio yet.'
-      })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      className: "px-screen-margin",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_settingsList.SettingsListGroup, {
-        children: [profile?.createdAt && /*#__PURE__*/(0, _jsxRuntime.jsx)(_settingsList.SettingsListItem, {
-          icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Ionicons.default, {
-            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
-        }), primaryLocation && /*#__PURE__*/(0, _jsxRuntime.jsx)(_settingsList.SettingsListItem, {
-          icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Ionicons.default, {
-            name: "location-outline",
-            size: INFO_ICON_SIZE,
-            color: bloomTheme.colors.textSecondary
-          }),
-          title: primaryLocation,
-          showChevron: false
-        }), profile?.website && /*#__PURE__*/(0, _jsxRuntime.jsx)(_settingsList.SettingsListItem, {
-          icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Ionicons.default, {
-            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__*/(0, _jsxRuntime.jsx)(_settingsList.SettingsListItem, {
-          icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Ionicons.default, {
-            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__*/(0, _jsxRuntime.jsx)(_settingsList.SettingsListItem, {
-          icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Ionicons.default, {
-            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__*/(0, _jsxRuntime.jsx)(_settingsList.SettingsListItem, {
-          icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Ionicons.default, {
-            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__*/(0, _jsxRuntime.jsx)(_settingsList.SettingsListItem, {
-          icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Ionicons.default, {
-            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__*/(0, _jsxRuntime.jsx)(_settingsList.SettingsListItem, {
-          icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Ionicons.default, {
-            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__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: styles.statsRow,
-      className: "px-screen-margin",
+    });
+  }
+  let websiteUrl;
+  if (profile?.website) {
+    try {
+      const url = new URL(profile.website);
+      if (url.protocol === 'https:' || url.protocol === 'http:') websiteUrl = url.href;
+    } catch {
+      /* Invalid profile URLs are not interactive links. */
+    }
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: styles.scrollContainer,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_coverHeader.CoverHeader, {
+      testID: "profile-cover-header",
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-        style: styles.statItem,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_typography.Text, {
-          style: styles.statAmount,
-          className: "text-text",
-          children: reputationTotal !== null && reputationTotal !== undefined ? reputationTotal : '--'
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_typography.Text, {
-          style: styles.statLabel,
-          className: "text-text-secondary",
-          children: t('profile.reputation') || 'Reputation'
+        style: styles.avatarRow,
+        className: "px-screen-margin",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: [styles.avatarWrapper, {
+            borderColor: surfaceFill,
+            backgroundColor: surfaceFill
+          }],
+          className: "rounded-radius-max",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_avatar.Avatar
+          // `getFileDownloadUrl` answers `null` for a reference it cannot
+          // resolve, and `Avatar.source` takes `undefined` for "no picture" —
+          // the two spellings of absent do not meet, so the coalesce is the
+          // whole fix. Without it this file does not typecheck, which blocks
+          // `bun run build` and therefore every publish of this package.
+          , {
+            source: profile?.avatar ? oxyServices.assets.publicUrl(profile.avatar, 'thumb') ?? undefined : undefined,
+            name: displayName,
+            size: AVATAR_SIZE
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: styles.actionButtonWrapper,
+          children: isOwnProfile ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+            style: styles.profileActions,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_button.Button, {
+              appearance: "subtle",
+              tone: "neutral",
+              size: "sm",
+              onPress: () => navigate?.('EditProfile'),
+              children: t('editProfile.title') || 'Edit Profile'
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_buttonGroup.ButtonGroup, {
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_buttonGroup.ButtonGroupItem, {
+                iconOnly: true,
+                leadingIcon: _RiSettings3Line.RiSettings3Line,
+                accessibilityLabel: t('accountMenu.settings') || 'Settings',
+                onPress: () => navigate?.('Preferences')
+              })
+            })]
+          }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_FollowButton.default, {
+            userId: userId,
+            onFollowChange: isFollowing => {
+              // The follow button will automatically update counts via Zustand
+              if (__DEV__) {
+                _core.logger.debug(`Follow status changed: ${isFollowing}`, {
+                  component: 'ProfileScreen'
+                });
+              }
+            }
+          })
         })]
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-        style: styles.statItem,
-        children: [isLoadingCounts ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ActivityIndicator, {
-          size: "small",
-          color: bloomTheme.colors.text
-        }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_typography.Text, {
-          style: styles.statAmount,
+        style: styles.header,
+        className: "px-screen-margin",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_typography.H2, {
+          style: styles.displayName,
           className: "text-text",
-          children: followerCount !== null ? followerCount : '--'
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_typography.Text, {
-          style: styles.statLabel,
+          children: displayName
+        }), profile?.username && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_typography.Text, {
+          style: styles.subText,
           className: "text-text-secondary",
-          children: t('profile.followers') || 'Followers'
-        })]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-        style: styles.statItem,
-        children: [isLoadingCounts ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ActivityIndicator, {
-          size: "small",
-          color: bloomTheme.colors.text
-        }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_typography.Text, {
-          style: styles.statAmount,
+          children: ["@", profile.username]
+        }), profile?.bio ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_typography.Text, {
+          style: styles.bio,
           className: "text-text",
-          children: followingCount !== null ? followingCount : '--'
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_typography.Text, {
-          style: styles.statLabel,
-          className: "text-text-secondary",
-          children: t('profile.following') || 'Following'
-        })]
+          children: profile.bio
+        }) : null]
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      className: "px-screen-margin",
+      style: styles.details,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: styles.metadataRow,
+        children: metadata.map(({
+          key,
+          icon,
+          label
+        }) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: styles.metadataEntry,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Ionicons.default, {
+            name: icon,
+            size: 16,
+            color: bloomTheme.colors.textSecondary
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_typography.Text, {
+            style: [styles.metadataText, {
+              color: bloomTheme.colors.textSecondary
+            }],
+            children: label
+          })]
+        }, key))
+      }), websiteUrl ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.LinkButton, {
+        size: "sm",
+        href: websiteUrl,
+        style: {
+          alignSelf: 'flex-start',
+          paddingLeft: 0,
+          paddingRight: 0
+        },
+        target: "_blank",
+        rel: "noopener noreferrer",
+        icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Ionicons.default, {
+          name: "link-outline",
+          size: INFO_ICON_SIZE
+        }),
+        children: profile?.website
+      }) : null, /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.statsRow,
+        children: [!isLoadingCounts && followingCount !== null ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_pressableScale.PressableScale, {
+          style: styles.statItem,
+          accessibilityLabel: `${followingCount} ${t('profile.following')}`,
+          onPress: () => navigate?.('FollowingList', {
+            userId,
+            initialCount: followingCount
+          }),
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_typography.Text, {
+            style: [styles.statNumber, {
+              color: bloomTheme.colors.text
+            }],
+            children: followingCount
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_typography.Text, {
+            style: [styles.statLabel, {
+              color: bloomTheme.colors.textSecondary
+            }],
+            children: t('profile.following')
+          })]
+        }) : null, !isLoadingCounts && followerCount !== null ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_pressableScale.PressableScale, {
+          style: styles.statItem,
+          accessibilityLabel: `${followerCount} ${t('profile.followers')}`,
+          onPress: () => navigate?.('FollowersList', {
+            userId,
+            initialCount: followerCount
+          }),
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_typography.Text, {
+            style: [styles.statNumber, {
+              color: bloomTheme.colors.text
+            }],
+            children: followerCount
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_typography.Text, {
+            style: [styles.statLabel, {
+              color: bloomTheme.colors.textSecondary
+            }],
+            children: t('profile.followers')
+          })]
+        }) : null, reputationTotal !== null ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: styles.statItem,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_typography.Text, {
+            style: [styles.statNumber, {
+              color: bloomTheme.colors.text
+            }],
+            children: reputationTotal
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_typography.Text, {
+            style: [styles.statLabel, {
+              color: bloomTheme.colors.textSecondary
+            }],
+            children: t('profile.reputation')
+          })]
+        }) : null]
       })]
     })]
   });
@@ -372,22 +433,13 @@ const ProfileScreen = ({
 // that no token class can express. Colors, spacing, radius, and typography roles
 // live on Bloom components + NativeWind token classes.
 const styles = _reactNative.StyleSheet.create({
-  flex: {
-    flex: 1
-  },
   scrollContainer: {
     alignItems: 'stretch',
     paddingBottom: 40
   },
-  bannerContainer: {
-    height: BANNER_HEIGHT,
-    position: 'relative',
-    overflow: 'hidden'
-  },
   avatarRow: {
     flexDirection: 'row',
     alignItems: 'flex-end',
-    marginTop: AVATAR_OVERLAP,
     justifyContent: 'space-between',
     zIndex: 2
   },
@@ -416,33 +468,57 @@ const styles = _reactNative.StyleSheet.create({
     marginBottom: 2
   },
   bio: {
-    fontSize: 16,
+    fontSize: 15,
     marginTop: 10,
-    lineHeight: 22
+    lineHeight: 20
+  },
+  profileActions: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+    flexWrap: 'wrap',
+    justifyContent: 'flex-end'
+  },
+  details: {
+    marginTop: 12
+  },
+  metadataRow: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    columnGap: 16,
+    rowGap: 4
+  },
+  metadataEntry: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 4,
+    flexShrink: 1
+  },
+  metadataText: {
+    fontSize: 15,
+    lineHeight: 20,
+    flexShrink: 1
   },
   statsRow: {
-    width: '100%',
     flexDirection: 'row',
+    flexWrap: 'wrap',
     alignItems: 'center',
-    marginTop: 14,
-    justifyContent: 'space-between'
+    gap: 10,
+    marginTop: 12
   },
   statItem: {
-    flex: 1,
+    flexDirection: 'row',
     alignItems: 'center',
-    minWidth: 50,
-    marginBottom: 12
+    gap: 4
   },
-  statLabel: {
-    fontSize: 14,
-    marginBottom: 2,
-    textAlign: 'center'
+  statNumber: {
+    fontSize: 15,
+    lineHeight: 20,
+    fontWeight: '700'
   },
-  statAmount: {
-    fontSize: 24,
-    fontWeight: 'bold',
-    textAlign: 'center',
-    letterSpacing: 0.2
+  statLabel: {
+    fontSize: 15,
+    lineHeight: 20
   },
   // Error state layout
   errorTitle: {