@oxyhq/services 11.0.0 → 11.1.1

package/src/ui/screens/ProfileScreen.tsx

@@ -1,16 +1,19 @@
 import type React from 'react';
 import { useEffect, useState } from 'react';
-import { View, Text, StyleSheet, ActivityIndicator, ScrollView, TouchableOpacity, Image } from 'react-native';
+import { View, StyleSheet, ActivityIndicator, ScrollView } from 'react-native';
 import type { BaseScreenProps } from '../types/navigation';
 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';
 import FollowButton from '../components/FollowButton';
 import { useFollow } from '../hooks/useFollow';
 import { Ionicons } from '@expo/vector-icons';
 import { useI18n } from '../hooks/useI18n';
 import { useOxy } from '../context/OxyContext';
-import { getAccountDisplayName, logger } from '@oxyhq/core';
-import type { User } from '@oxyhq/core';
+import { getAccountDisplayName, logger, normalizeProfileLinks } from '@oxyhq/core';
+import type { User, ProfileLink } from '@oxyhq/core';
 import { extractErrorMessage } from '../utils/errorHandlers';
 
 interface ProfileScreenProps extends BaseScreenProps {
@@ -18,15 +21,10 @@ interface ProfileScreenProps extends BaseScreenProps {
     username?: string;
 }
 
-interface LinkMetadata {
-    id?: string;
-    url: string;
-    title?: string;
-    description?: string;
-    image?: string;
-}
-
-type ProfileLink = string | { link: string } | LinkMetadata;
+const AVATAR_SIZE = 96;
+const BANNER_HEIGHT = 160;
+const AVATAR_OVERLAP = -56;
+const INFO_ICON_SIZE = 18;
 
 const ProfileScreen: React.FC<ProfileScreenProps> = ({ userId, username, theme, goBack, navigate }) => {
     // Use useOxy() hook for OxyContext values
@@ -37,13 +35,7 @@ const ProfileScreen: React.FC<ProfileScreenProps> = ({ userId, username, theme,
     const [commentsCount, setCommentsCount] = useState<number | null>(null);
     const [isLoading, setIsLoading] = useState(true);
     const [error, setError] = useState<string | null>(null);
-    const [links, setLinks] = useState<Array<{
-        url: string;
-        title?: string;
-        description?: string;
-        image?: string;
-        id: string;
-    }>>([]);
+    const [links, setLinks] = useState<ProfileLink[]>([]);
 
     // Use the follow hook for real follower data
     const {
@@ -53,7 +45,6 @@ const ProfileScreen: React.FC<ProfileScreenProps> = ({ userId, username, theme,
     } = useFollow(userId);
 
     const bloomTheme = useTheme();
-    const styles = createStyles();
     const { t, locale } = useI18n();
 
     // Check if current user is viewing their own profile
@@ -107,34 +98,8 @@ const ProfileScreen: React.FC<ProfileScreenProps> = ({ userId, username, theme,
                 setProfile(profileRes);
                 setReputationTotal(typeof reputationRes.total === 'number' ? reputationRes.total : null);
 
-                // Extract links from profile data
-                if (profileRes.linksMetadata && Array.isArray(profileRes.linksMetadata)) {
-                    const linksWithIds = profileRes.linksMetadata.map((link: LinkMetadata, index: number) => ({
-                        ...link,
-                        id: link.id || `existing-${index}`
-                    }));
-                    setLinks(linksWithIds);
-                } else if (Array.isArray(profileRes.links)) {
-                    const simpleLinks = profileRes.links.map((l: ProfileLink) => typeof l === 'string' ? l : (typeof l === 'object' && 'link' in l ? l.link : '')).filter(Boolean);
-                    const linksWithMetadata = simpleLinks.map((url: string, index: number) => ({
-                        url,
-                        title: url.replace(/^https?:\/\//, '').replace(/\/$/, ''),
-                        description: `Link to ${url}`,
-                        image: undefined,
-                        id: `existing-${index}`
-                    }));
-                    setLinks(linksWithMetadata);
-                } else if (profileRes.website) {
-                    setLinks([{
-                        url: profileRes.website,
-                        title: profileRes.website.replace(/^https?:\/\//, '').replace(/\/$/, ''),
-                        description: `Link to ${profileRes.website}`,
-                        image: undefined,
-                        id: 'existing-0'
-                    }]);
-                } else {
-                    setLinks([]);
-                }
+                // Normalize profile links via the shared @oxyhq/core helper.
+                setLinks(normalizeProfileLinks(profileRes.linksMetadata, profileRes.links));
 
                 // Follower/following counts are managed by the `useFollow` hook.
 
@@ -174,7 +139,7 @@ const ProfileScreen: React.FC<ProfileScreenProps> = ({ userId, username, theme,
 
     if (isLoading) {
         return (
-            <View style={[styles.container, { justifyContent: 'center', backgroundColor: bloomTheme.colors.background }]}>
+            <View style={styles.centerContainer} className="bg-bg">
                 <ActivityIndicator size="large" color={bloomTheme.colors.primary} />
             </View>
         );
@@ -182,57 +147,63 @@ const ProfileScreen: React.FC<ProfileScreenProps> = ({ userId, username, theme,
 
     if (error) {
         return (
-            <View style={[styles.container, { backgroundColor: bloomTheme.colors.background }]}>
-                <View style={[styles.errorHeader, { borderBottomColor: bloomTheme.colors.border }]}>
+            <View style={styles.container} className="bg-bg">
+                <View style={styles.errorHeader} className="px-screen-margin py-space-12 border-b border-border">
                     {goBack && (
-                        <TouchableOpacity onPress={goBack} style={styles.backButton}>
-                            <Ionicons name="arrow-back" size={24} color={bloomTheme.colors.text} />
-                        </TouchableOpacity>
+                        <Button
+                            variant="icon"
+                            size="icon"
+                            onPress={goBack}
+                            accessibilityLabel={t('common.back') || 'Back'}
+                            icon={<Ionicons name="arrow-back" size={22} color={bloomTheme.colors.text} />}
+                        />
                     )}
-                    <Text style={styles.errorTitle} className="text-foreground">Profile Error</Text>
+                    <H2 style={styles.errorTitle} className="text-text">
+                        {t('profile.errorTitle') || 'Profile Error'}
+                    </H2>
                 </View>
-                <View style={styles.errorContent}>
-                    <Ionicons name="alert-circle" size={48} color={bloomTheme.colors.error} style={styles.errorIcon} />
-                    <Text style={styles.errorText} className="text-destructive">{error}</Text>
-                    <Text style={styles.errorSubtext} className="text-muted-foreground">
-                        This could happen if the user doesn't exist or the profile service is unavailable.
+                <View style={styles.errorContent} className="px-space-32 gap-space-12">
+                    <Ionicons name="alert-circle" size={48} color={bloomTheme.colors.error} />
+                    <Text style={styles.errorText} className="text-text">{error}</Text>
+                    <Text style={styles.errorSubtext} className="text-text-secondary">
+                        {t('profile.errorSubtext') || "This could happen if the user doesn't exist or the profile service is unavailable."}
                     </Text>
                 </View>
             </View>
         );
     }
 
+    const displayName = profile ? getAccountDisplayName(profile, locale) : username || '';
+
     return (
-        <View style={[styles.container, { backgroundColor: bloomTheme.colors.background }]}>
-            <ScrollView style={{ flex: 1 }} contentContainerStyle={styles.scrollContainer}>
+        <View style={styles.container} className="bg-bg">
+            <ScrollView style={styles.flex} contentContainerStyle={styles.scrollContainer}>
                 {/* Banner Image */}
-                <View style={styles.bannerContainer} className="bg-primary/20">
-                    <View style={styles.bannerImage} className="bg-primary" />
+                <View style={styles.bannerContainer} className="bg-fill-brand/20">
+                    <View style={styles.flex} className="bg-fill-brand" />
                 </View>
                 {/* Avatar overlapping banner */}
-                <View style={styles.avatarRow}>
-                    <View style={styles.avatarWrapper} className="border-background bg-background">
+                <View style={styles.avatarRow} className="px-screen-margin">
+                    <View style={styles.avatarWrapper} className="border-bg bg-bg rounded-radius-max">
                         <Avatar
                             uri={profile?.avatar ? oxyServices.getFileDownloadUrl(profile.avatar, 'thumb') : undefined}
-                            name={profile ? getAccountDisplayName(profile, locale) : username}
-                            size={96}
-
+                            name={displayName || username}
+                            size={AVATAR_SIZE}
                         />
                     </View>
                     {/* Conditional Action Button */}
                     <View style={styles.actionButtonWrapper}>
                         {isOwnProfile ? (
-                            <TouchableOpacity
-                                style={styles.actionButton}
-                                className="bg-background border-primary"
+                            <Button
+                                variant="secondary"
+                                size="small"
                                 onPress={() => navigate?.('ManageAccount')}
                             >
-                                <Text style={styles.actionButtonText} className="text-primary">{t('editProfile.title') || 'Edit Profile'}</Text>
-                            </TouchableOpacity>
+                                {t('editProfile.title') || 'Edit Profile'}
+                            </Button>
                         ) : (
                             <FollowButton
                                 userId={userId}
-
                                 onFollowChange={(isFollowing) => {
                                     // The follow button will automatically update counts via Zustand
                                     if (__DEV__) {
@@ -244,105 +215,99 @@ const ProfileScreen: React.FC<ProfileScreenProps> = ({ userId, username, theme,
                     </View>
                 </View>
                 {/* Profile Info */}
-                <View style={styles.header}>
-                    <Text style={styles.displayName} className="text-foreground">
-                        {profile ? getAccountDisplayName(profile, locale) : username || ''}
-                    </Text>
+                <View style={styles.header} className="px-screen-margin">
+                    <H2 style={styles.displayName} className="text-text">
+                        {displayName}
+                    </H2>
                     {profile?.username && (
-                        <Text style={styles.subText} className="text-muted-foreground">@{profile.username}</Text>
+                        <Text style={styles.subText} className="text-text-secondary">@{profile.username}</Text>
                     )}
-                    {/* Bio placeholder */}
-                    <Text style={styles.bio} className="text-foreground">{profile?.bio || (t('profile.noBio') || 'This user has no bio yet.')}</Text>
+                    {/* Bio */}
+                    <Text style={styles.bio} className="text-text">{profile?.bio || (t('profile.noBio') || 'This user has no bio yet.')}</Text>
+                </View>
 
-                    {/* Info Grid Row */}
-                    <View style={styles.infoGrid}>
-                        {profile?.createdAt && (
-                            <View style={styles.infoGridItem}>
-                                <Ionicons name="calendar-outline" size={16} color={bloomTheme.colors.textSecondary} style={{ marginRight: 6 }} />
-                                <Text style={styles.infoGridText} className="text-muted-foreground">
-                                    {t('profile.joinedOn', { date: new Date(profile.createdAt).toLocaleDateString() }) || `Joined ${new Date(profile.createdAt).toLocaleDateString()}`}
-                                </Text>
-                            </View>
-                        )}
-                        {profile?.location && (
-                            <View style={styles.infoGridItem}>
-                                <Ionicons name="location-outline" size={16} color={bloomTheme.colors.textSecondary} style={{ marginRight: 6 }} />
-                                <Text style={styles.infoGridText} className="text-muted-foreground" numberOfLines={1}>{profile.location}</Text>
-                            </View>
-                        )}
-                        {profile?.website && (
-                            <View style={styles.infoGridItem}>
-                                <Ionicons name="globe-outline" size={16} color={bloomTheme.colors.textSecondary} style={{ marginRight: 6 }} />
-                                <Text style={styles.infoGridText} className="text-muted-foreground" numberOfLines={1}>{profile.website}</Text>
-                            </View>
-                        )}
-                        {profile && 'company' in profile && typeof profile.company === 'string' && profile.company && (
-                            <View style={styles.infoGridItem}>
-                                <Ionicons name="business-outline" size={16} color={bloomTheme.colors.textSecondary} style={{ marginRight: 6 }} />
-                                <Text style={styles.infoGridText} className="text-muted-foreground" numberOfLines={1}>{profile.company}</Text>
-                            </View>
-                        )}
-                        {profile && 'jobTitle' in profile && typeof profile.jobTitle === 'string' && profile.jobTitle && (
-                            <View style={styles.infoGridItem}>
-                                <Ionicons name="briefcase-outline" size={16} color={bloomTheme.colors.textSecondary} style={{ marginRight: 6 }} />
-                                <Text style={styles.infoGridText} className="text-muted-foreground" numberOfLines={1}>{profile.jobTitle}</Text>
-                            </View>
-                        )}
-                        {profile && 'education' in profile && typeof profile.education === 'string' && profile.education && (
-                            <View style={styles.infoGridItem}>
-                                <Ionicons name="school-outline" size={16} color={bloomTheme.colors.textSecondary} style={{ marginRight: 6 }} />
-                                <Text style={styles.infoGridText} className="text-muted-foreground" numberOfLines={1}>{profile.education}</Text>
-                            </View>
-                        )}
-                        {profile && 'birthday' in profile && typeof profile.birthday === 'string' && profile.birthday && (
-                            <View style={styles.infoGridItem}>
-                                <Ionicons name="gift-outline" size={16} color={bloomTheme.colors.textSecondary} style={{ marginRight: 6 }} />
-                                <Text style={styles.infoGridText} className="text-muted-foreground">
-                                    {t('profile.bornOn', { date: new Date(profile.birthday).toLocaleDateString() }) || `Born ${new Date(profile.birthday).toLocaleDateString()}`}
-                                </Text>
-                            </View>
-                        )}
-                        {links.length > 0 && (
-                            <TouchableOpacity
-                                style={styles.infoGridItem}
-                                onPress={() => navigate?.('UserLinks', { userId, links })}
-                            >
-                                <Ionicons name="link-outline" size={16} color={bloomTheme.colors.textSecondary} style={{ marginRight: 6 }} />
-                                <Text style={styles.infoGridText} className="text-muted-foreground" numberOfLines={1}>
-                                    {links[0].url}
-                                </Text>
-                                {links.length > 1 && (
-                                    <Text style={styles.linksMore} className="text-muted-foreground">
-                                        {t('profile.more', { count: links.length - 1 }) || `+ ${links.length - 1} more`}
-                                    </Text>
-                                )}
-                            </TouchableOpacity>
+                {/* Info Grid as a settings list group */}
+                <SettingsListGroup>
+                    {profile?.createdAt && (
+                        <SettingsListItem
+                            icon={<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 && (
+                        <SettingsListItem
+                            icon={<Ionicons name="location-outline" size={INFO_ICON_SIZE} color={bloomTheme.colors.textSecondary} />}
+                            title={profile.location}
+                            showChevron={false}
+                        />
+                    )}
+                    {profile?.website && (
+                        <SettingsListItem
+                            icon={<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 && (
+                        <SettingsListItem
+                            icon={<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 && (
+                        <SettingsListItem
+                            icon={<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 && (
+                        <SettingsListItem
+                            icon={<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 && (
+                        <SettingsListItem
+                            icon={<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 && (
+                        <SettingsListItem
+                            icon={<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 })}
+                        />
+                    )}
+                </SettingsListGroup>
+
+                {/* All Stats in one row */}
+                <View style={styles.statsRow} className="px-screen-margin">
+                    <View style={styles.statItem}>
+                        <Text style={styles.statAmount} className="text-text-inverse">{reputationTotal !== null && reputationTotal !== undefined ? reputationTotal : '--'}</Text>
+                        <Text style={styles.statLabel} className="text-text-secondary">{t('profile.reputation') || 'Reputation'}</Text>
+                    </View>
+                    <View style={styles.statItem}>
+                        {isLoadingCounts ? (
+                            <ActivityIndicator size="small" color={bloomTheme.colors.text} />
+                        ) : (
+                            <Text style={styles.statAmount} className="text-text">{followerCount !== null ? followerCount : '--'}</Text>
                         )}
+                        <Text style={styles.statLabel} className="text-text-secondary">{t('profile.followers') || 'Followers'}</Text>
                     </View>
-                    {/* Divider */}
-                    <View style={styles.divider} className="bg-border" />
-                    {/* All Stats in one row */}
-                    <View style={styles.statsRow}>
-                        <View style={styles.statItem}>
-                            <Text style={styles.statAmount} className="text-primary">{reputationTotal !== null && reputationTotal !== undefined ? reputationTotal : '--'}</Text>
-                            <Text style={styles.statLabel} className="text-muted-foreground">{t('profile.reputation') || 'Reputation'}</Text>
-                        </View>
-                        <View style={styles.statItem}>
-                            {isLoadingCounts ? (
-                                <ActivityIndicator size="small" color={bloomTheme.colors.text} />
-                            ) : (
-                                <Text style={styles.statAmount} className="text-foreground">{followerCount !== null ? followerCount : '--'}</Text>
-                            )}
-                            <Text style={styles.statLabel} className="text-muted-foreground">{t('profile.followers') || 'Followers'}</Text>
-                        </View>
-                        <View style={styles.statItem}>
-                            {isLoadingCounts ? (
-                                <ActivityIndicator size="small" color={bloomTheme.colors.text} />
-                            ) : (
-                                <Text style={styles.statAmount} className="text-foreground">{followingCount !== null ? followingCount : '--'}</Text>
-                            )}
-                            <Text style={styles.statLabel} className="text-muted-foreground">{t('profile.following') || 'Following'}</Text>
-                        </View>
+                    <View style={styles.statItem}>
+                        {isLoadingCounts ? (
+                            <ActivityIndicator size="small" color={bloomTheme.colors.text} />
+                        ) : (
+                            <Text style={styles.statAmount} className="text-text">{followingCount !== null ? followingCount : '--'}</Text>
+                        )}
+                        <Text style={styles.statLabel} className="text-text-secondary">{t('profile.following') || 'Following'}</Text>
                     </View>
                 </View>
             </ScrollView>
@@ -350,93 +315,44 @@ const ProfileScreen: React.FC<ProfileScreenProps> = ({ userId, username, theme,
     );
 };
 
-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, position: 'relative', overflow: 'hidden' },
-    bannerImage: { flex: 1 },
-    avatarRow: { flexDirection: 'row', alignItems: 'flex-end', marginTop: -56, paddingHorizontal: 20, 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
-    },
-    header: { alignItems: 'flex-start', width: '100%', paddingHorizontal: 20 },
-    displayName: { fontSize: 24, fontWeight: 'bold', marginTop: 10, marginBottom: 2, letterSpacing: 0.1 },
-    subText: { fontSize: 16, marginBottom: 2 },
-    bio: { fontSize: 16, marginTop: 10, marginBottom: 10, lineHeight: 22 },
-    infoGrid: {
+    bannerContainer: { height: BANNER_HEIGHT, position: 'relative', overflow: 'hidden' },
+    avatarRow: {
         flexDirection: 'row',
-        alignItems: 'center',
-        marginBottom: 10,
-        flexWrap: 'wrap'
+        alignItems: 'flex-end',
+        marginTop: AVATAR_OVERLAP,
+        justifyContent: 'space-between',
+        zIndex: 2,
     },
-    infoGridItem: {
+    avatarWrapper: { borderWidth: 5, overflow: 'hidden' },
+    actionButtonWrapper: { flex: 1, alignItems: 'flex-end', justifyContent: 'flex-end', paddingBottom: 8 },
+    header: { alignItems: 'flex-start', width: '100%', marginTop: 10 },
+    displayName: { fontSize: 24, marginBottom: 2, letterSpacing: 0.1 },
+    subText: { fontSize: 16, marginBottom: 2 },
+    bio: { fontSize: 16, marginTop: 10, lineHeight: 22 },
+    statsRow: {
+        width: '100%',
         flexDirection: 'row',
         alignItems: 'center',
-        marginRight: 24,
-        marginBottom: 4
-    },
-    infoGridText: {
-        fontSize: 15,
+        marginTop: 14,
+        justifyContent: 'space-between',
     },
-    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, justifyContent: 'space-between' },
     statItem: { flex: 1, alignItems: 'center', minWidth: 50, marginBottom: 12 },
     statLabel: { fontSize: 14, marginBottom: 2, textAlign: 'center' },
     statAmount: { fontSize: 24, fontWeight: 'bold', textAlign: 'center', letterSpacing: 0.2 },
-    // Error handling styles
-    errorHeader: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        paddingHorizontal: 16,
-        paddingVertical: 12,
-        borderBottomWidth: 1,
-    },
-    backButton: {
-        padding: 8,
-        marginRight: 16,
-    },
-    errorTitle: {
-        fontSize: 20,
-        fontWeight: 'bold',
-    },
-    errorContent: {
-        flex: 1,
-        justifyContent: 'center',
-        alignItems: 'center',
-        paddingHorizontal: 32,
-    },
-    errorIcon: {
-        marginBottom: 16,
-    },
-    errorText: {
-        fontSize: 18,
-        fontWeight: '600',
-        textAlign: 'center',
-        marginBottom: 8,
-    },
-    errorSubtext: {
-        fontSize: 14,
-        textAlign: 'center',
-        opacity: 0.7,
-    },
+    // Error state layout
+    errorHeader: { flexDirection: 'row', alignItems: 'center', gap: 16 },
+    errorTitle: { fontSize: 20 },
+    errorContent: { flex: 1, justifyContent: 'center', alignItems: 'center' },
+    errorText: { fontSize: 18, fontWeight: '600', textAlign: 'center' },
+    errorSubtext: { fontSize: 14, textAlign: 'center' },
 });
 
 export default ProfileScreen;