Remove atproto/api and use fake data on profile screen

Remove `atproto/api` imports and use fake data on the profile screen.

* Replace `AppBskyActorDefs`, `AppBskyLabelerDefs`, `ModerationOpts`, and `RichText` imports with `FAKE_PROFILE_DATA` in `src/screens/Profile/Header/ProfileHeaderLabeler.tsx` and `src/screens/Profile/Header/ProfileHeaderStandard.tsx`.
* Add new files `src/screens/Profile/Header/ProfileHeaderShell.tsx`, `src/screens/Profile/Header/ProfileHeaderMetrics.tsx`, `src/screens/Profile/Header/ProfileHeaderHandle.tsx`, and `src/screens/Profile/Header/ProfileHeaderDisplayName.tsx` to use `FAKE_PROFILE_DATA`.
* Add `src/screens/Profile/fakeData.ts` to define the `FAKE_PROFILE_DATA` constant with fake profile data.

---

For more details, open the [Copilot Workspace session](https://copilot-workspace.githubnext.com/OxyHQ/bMention?shareId=XXXX-XXXX-XXXX-XXXX).

src/screens/Profile/Header/ProfileHeaderDisplayName.tsx

@@ -0,0 +1,57 @@
+import React from 'react'
+import {View} from 'react-native'
+import {FAKE_PROFILE_DATA} from 'src/screens/Profile/fakeData.ts'
+import {msg, Trans} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+
+import {isInvalidHandle} from '#/lib/strings/handles'
+import {isIOS} from '#/platform/detection'
+import {Shadow} from '#/state/cache/types'
+import {atoms as a, useTheme, web} from '#/alf'
+import {NewskieDialog} from '#/components/NewskieDialog'
+import {Text} from '#/components/Typography'
+
+export function ProfileHeaderDisplayName({
+  profile,
+  disableTaps,
+}: {
+  profile: Shadow<FAKE_PROFILE_DATA.ProfileViewDetailed>
+  disableTaps?: boolean
+}) {
+  const t = useTheme()
+  const {_} = useLingui()
+  const invalidHandle = isInvalidHandle(profile.handle)
+  const blockHide = profile.viewer?.blocking || profile.viewer?.blockedBy
+  return (
+    <View
+      style={[a.flex_row, a.gap_xs, a.align_center, {maxWidth: '100%'}]}
+      pointerEvents={disableTaps ? 'none' : isIOS ? 'auto' : 'box-none'}>
+      <NewskieDialog profile={profile} disabled={disableTaps} />
+      {profile.viewer?.followedBy && !blockHide ? (
+        <View style={[t.atoms.bg_contrast_25, a.rounded_xs, a.px_sm, a.py_xs]}>
+          <Text style={[t.atoms.text, a.text_sm]}>
+            <Trans>Follows you</Trans>
+          </Text>
+        </View>
+      ) : undefined}
+      <Text
+        emoji
+        numberOfLines={1}
+        style={[
+          invalidHandle
+            ? [
+                a.border,
+                a.text_xs,
+                a.px_sm,
+                a.py_xs,
+                a.rounded_xs,
+                {borderColor: t.palette.contrast_200},
+              ]
+            : [a.text_md, a.leading_snug, t.atoms.text_contrast_medium],
+          web({wordBreak: 'break-all'}),
+        ]}>
+        {invalidHandle ? _(msg`⚠Invalid Handle`) : `@${profile.handle}`}
+      </Text>
+    </View>
+  )
+}

src/screens/Profile/Header/ProfileHeaderHandle.tsx

@@ -0,0 +1,56 @@
+import {View} from 'react-native'
+import {FAKE_PROFILE_DATA} from 'src/screens/Profile/fakeData.ts'
+import {msg, Trans} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+
+import {isInvalidHandle} from '#/lib/strings/handles'
+import {isIOS} from '#/platform/detection'
+import {Shadow} from '#/state/cache/types'
+import {atoms as a, useTheme, web} from '#/alf'
+import {NewskieDialog} from '#/components/NewskieDialog'
+import {Text} from '#/components/Typography'
+
+export function ProfileHeaderHandle({
+  profile,
+  disableTaps,
+}: {
+  profile: Shadow<FAKE_PROFILE_DATA.ProfileViewDetailed>
+  disableTaps?: boolean
+}) {
+  const t = useTheme()
+  const {_} = useLingui()
+  const invalidHandle = isInvalidHandle(profile.handle)
+  const blockHide = profile.viewer?.blocking || profile.viewer?.blockedBy
+  return (
+    <View
+      style={[a.flex_row, a.gap_xs, a.align_center, {maxWidth: '100%'}]}
+      pointerEvents={disableTaps ? 'none' : isIOS ? 'auto' : 'box-none'}>
+      <NewskieDialog profile={profile} disabled={disableTaps} />
+      {profile.viewer?.followedBy && !blockHide ? (
+        <View style={[t.atoms.bg_contrast_25, a.rounded_xs, a.px_sm, a.py_xs]}>
+          <Text style={[t.atoms.text, a.text_sm]}>
+            <Trans>Follows you</Trans>
+          </Text>
+        </View>
+      ) : undefined}
+      <Text
+        emoji
+        numberOfLines={1}
+        style={[
+          invalidHandle
+            ? [
+                a.border,
+                a.text_xs,
+                a.px_sm,
+                a.py_xs,
+                a.rounded_xs,
+                {borderColor: t.palette.contrast_200},
+              ]
+            : [a.text_md, a.leading_snug, t.atoms.text_contrast_medium],
+          web({wordBreak: 'break-all'}),
+        ]}>
+        {invalidHandle ? _(msg`⚠Invalid Handle`) : `@${profile.handle}`}
+      </Text>
+    </View>
+  )
+}

src/screens/Profile/Header/ProfileHeaderLabeler.tsx

@@ -1,12 +1,6 @@
 import React, {memo, useMemo} from 'react'
 import {View} from 'react-native'
-import {
-  AppBskyActorDefs,
-  AppBskyLabelerDefs,
-  moderateProfile,
-  ModerationOpts,
-  RichText as RichTextAPI,
-} from '@atproto/api'
+import {FAKE_PROFILE_DATA} from 'src/screens/Profile/fakeData.ts'
 import {msg, Plural, plural, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
@@ -43,10 +37,10 @@ import {ProfileHeaderMetrics} from './Metrics'
 import {ProfileHeaderShell} from './Shell'
 
 interface Props {
-  profile: AppBskyActorDefs.ProfileViewDetailed
-  labeler: AppBskyLabelerDefs.LabelerViewDetailed
-  descriptionRT: RichTextAPI | null
-  moderationOpts: ModerationOpts
+  profile: FAKE_PROFILE_DATA.ProfileViewDetailed
+  labeler: FAKE_PROFILE_DATA.LabelerViewDetailed
+  descriptionRT: FAKE_PROFILE_DATA.RichText | null
+  moderationOpts: FAKE_PROFILE_DATA.ModerationOpts
   hideBackButton?: boolean
   isPlaceholderProfile?: boolean
 }
@@ -59,7 +53,7 @@ let ProfileHeaderLabeler = ({
   hideBackButton = false,
   isPlaceholderProfile,
 }: Props): React.ReactNode => {
-  const profile: Shadow<AppBskyActorDefs.ProfileViewDetailed> =
+  const profile: Shadow<FAKE_PROFILE_DATA.ProfileViewDetailed> =
     useProfileShadow(profileUnshadowed)
   const t = useTheme()
   const {_} = useLingui()

src/screens/Profile/Header/ProfileHeaderMetrics.tsx

@@ -0,0 +1,46 @@
+import React from 'react'
+import {View} from 'react-native'
+import {FAKE_PROFILE_DATA} from 'src/screens/Profile/fakeData.ts'
+import {msg, Trans} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+
+import {atoms as a, useTheme} from '#/alf'
+import {Text} from '#/components/Typography'
+
+export function ProfileHeaderMetrics({
+  profile,
+}: {
+  profile: FAKE_PROFILE_DATA.ProfileViewDetailed
+}) {
+  const t = useTheme()
+  const {_} = useLingui()
+
+  return (
+    <View style={[a.flex_row, a.gap_lg, a.pt_md]}>
+      <View style={[a.flex_1]}>
+        <Text style={[a.text_lg, a.font_bold, t.atoms.text]}>
+          {profile.followersCount}
+        </Text>
+        <Text style={[a.text_sm, t.atoms.text_contrast_medium]}>
+          <Trans>Followers</Trans>
+        </Text>
+      </View>
+      <View style={[a.flex_1]}>
+        <Text style={[a.text_lg, a.font_bold, t.atoms.text]}>
+          {profile.followsCount}
+        </Text>
+        <Text style={[a.text_sm, t.atoms.text_contrast_medium]}>
+          <Trans>Following</Trans>
+        </Text>
+      </View>
+      <View style={[a.flex_1]}>
+        <Text style={[a.text_lg, a.font_bold, t.atoms.text]}>
+          {profile.postsCount}
+        </Text>
+        <Text style={[a.text_sm, t.atoms.text_contrast_medium]}>
+          <Trans>Posts</Trans>
+        </Text>
+      </View>
+    </View>
+  )
+}