fix: bug

components/profile/profile-screen.tsx

@@ -1,11 +1,11 @@
-import React, { useEffect, useState, useMemo } from 'react';
-import { View, useWindowDimensions, type ImageSourcePropType, ActivityIndicator } from 'react-native';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import React, { useState, useMemo } from 'react';
+import { View, useWindowDimensions, type ImageSourcePropType, StyleSheet } from 'react-native';
 
+import { PageLayout } from '@/components/bestai/layout';
 import { useAuth } from '@/hooks/use-auth';
 import { useProfileData } from '@/hooks/use-profile-data';
 import { createStats, deriveAvatarSource, deriveDisplayName, deriveNumericValue } from '@/utils/profile-data';
-import { StyleSheet } from 'react-native';
+import { PROFILE_THEME } from '@/theme/profile';
 import { ContentGallery } from './content-gallery';
 import { ContentTabs } from './content-tabs';
 import { Divider } from './divider';
@@ -23,12 +23,13 @@ type BillingMode = 'monthly' | 'lifetime';
 export function ProfileScreen() {
   const { user } = useAuth();
   const { width } = useWindowDimensions();
-  const insets = useSafeAreaInsets();
   const [billingMode, setBillingMode] = useState<BillingMode>('monthly');
   const [activeTab, setActiveTab] = useState<TabKey>('all');
-  const displayNameFromUser = deriveDisplayName(user) ?? 'prairie_pufferfish_the';
-  const [presentedDisplayName, setPresentedDisplayName] = useState(displayNameFromUser);
   const [isEditingIdentity, setIsEditingIdentity] = useState(false);
+  const [editedIdentity, setEditedIdentity] = useState<{
+    name?: string;
+    avatar?: ImageSourcePropType;
+  } | null>(null);
 
   const {
     generations,
@@ -42,24 +43,33 @@ export function ProfileScreen() {
     handleLoadMore,
   } = useProfileData(activeTab);
 
-  const horizontalPadding = width < 400 ? 20 : 24;
-  const avatarSize = width < 400 ? 74 : 82;
+  const isSmallScreen = width < PROFILE_THEME.breakpoints.small;
+  const horizontalPadding = isSmallScreen
+    ? PROFILE_THEME.spacing.horizontal.small
+    : PROFILE_THEME.spacing.horizontal.large;
+  const avatarSize = isSmallScreen
+    ? PROFILE_THEME.avatar.size.small
+    : PROFILE_THEME.avatar.size.large;
+
+  const displayNameFromUser = deriveDisplayName(user) ?? 'prairie_pufferfish_the';
   const avatarSource = deriveAvatarSource(user);
   const creditBalance = deriveNumericValue((user as Record<string, unknown>)?.credits);
   const stats = createStats(user);
-  const [presentedAvatar, setPresentedAvatar] = useState<ImageSourcePropType | undefined>(avatarSource);
 
-  useEffect(() => {
-    setPresentedDisplayName(displayNameFromUser);
-  }, [displayNameFromUser]);
+  const presentedDisplayName = editedIdentity?.name ?? displayNameFromUser;
+  const presentedAvatar = editedIdentity?.avatar ?? avatarSource;
 
-  useEffect(() => {
-    setPresentedAvatar(avatarSource);
-  }, [avatarSource]);
+  const headerContainerStyle = useMemo(
+    () => ({
+      paddingHorizontal: horizontalPadding,
+      paddingBottom: PROFILE_THEME.spacing.headerBottom,
+    }),
+    [horizontalPadding]
+  );
 
   const headerComponent = useMemo(
     () => (
-      <View style={{ paddingHorizontal: horizontalPadding, paddingBottom: 16 }}>
+      <View style={headerContainerStyle}>
         <ProfileHeader
           billingMode={billingMode}
           onChangeBilling={setBillingMode}
@@ -86,7 +96,7 @@ export function ProfileScreen() {
       </View>
     ),
     [
-      horizontalPadding,
+      headerContainerStyle,
       billingMode,
       creditBalance,
       presentedDisplayName,
@@ -100,33 +110,29 @@ export function ProfileScreen() {
 
   if (isLoading) {
     return (
-      <View style={[styles.screen, { backgroundColor: stylesVars.background }]}>
-        {insets.top > 0 && <View style={{ height: insets.top }} />}
+      <PageLayout backgroundColor={PROFILE_THEME.colors.background} horizontalPadding={false}>
         <ProfileLoadingState />
-      </View>
+      </PageLayout>
     );
   }
 
   if (error) {
     return (
-      <View style={[styles.screen, { backgroundColor: stylesVars.background }]}>
-        {insets.top > 0 && <View style={{ height: insets.top }} />}
+      <PageLayout backgroundColor={PROFILE_THEME.colors.background} horizontalPadding={false}>
         <ProfileErrorState onRetry={handleRefresh} />
-      </View>
+      </PageLayout>
     );
   }
 
   return (
-    <View style={[styles.screen, { backgroundColor: stylesVars.background }]}>
-      {insets.top > 0 && <View style={{ height: insets.top }} />}
-
+    <PageLayout backgroundColor={PROFILE_THEME.colors.background} horizontalPadding={false}>
       {isLoading && generations.length === 0 ? (
-        <View style={{ flex: 1 }}>
+        <View style={styles.flexContainer}>
           {headerComponent}
           <ContentSkeleton />
         </View>
       ) : generations.length === 0 && !isTabSwitching ? (
-        <View style={{ flex: 1 }}>
+        <View style={styles.flexContainer}>
           {headerComponent}
           <ProfileEmptyState activeTab={activeTab} />
         </View>
@@ -148,24 +154,16 @@ export function ProfileScreen() {
         initialName={presentedDisplayName}
         onClose={() => setIsEditingIdentity(false)}
         onSave={({ name, avatar }) => {
-          setPresentedDisplayName(name);
-          if (avatar) {
-            setPresentedAvatar(avatar);
-          }
+          setEditedIdentity({ name, avatar });
           setIsEditingIdentity(false);
         }}
       />
-    </View>
+    </PageLayout>
   );
 }
 
-const stylesVars = {
-  background: '#050505',
-  paddingBottom: 96,
-};
-
 const styles = StyleSheet.create({
-  screen: {
+  flexContainer: {
     flex: 1,
   },
 });