add a dialog for newskies to profiles

src/components/StarterPack/NewskieDialog.tsx

@@ -0,0 +1,65 @@
+import React from 'react'
+import {Pressable, View} from 'react-native'
+import {AppBskyActorDefs, AppBskyGraphStarterpack} from '@atproto/api'
+import {msg, Trans} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+
+import {HITSLOP_10} from 'lib/constants'
+import {isNative} from 'platform/detection'
+import {atoms as a} from '#/alf'
+import * as Dialog from '#/components/Dialog'
+import {useDialogControl} from '#/components/Dialog'
+import {Newskie} from '#/components/icons/Newskie'
+import {Text} from '#/components/Typography'
+
+export function NewskieDialog({
+  profile,
+}: {
+  profile: AppBskyActorDefs.ProfileViewDetailed
+}) {
+  const {_} = useLingui()
+  const control = useDialogControl()
+
+  const profileName = profile.displayName || `@${profile.handle}`
+  const joinedVia = profile.joinedViaStarterPack
+
+  return (
+    <>
+      <Pressable
+        accessibilityRole="button"
+        accessibilityLabel={_(msg`Open new user info dialog`)}
+        accessibilityHint={_(
+          msg`Opens a dialog with information about the new user`,
+        )}
+        hitSlop={HITSLOP_10}
+        onPress={control.open}>
+        <Newskie size={32} />
+      </Pressable>
+
+      <Dialog.Outer control={control}>
+        <Dialog.Handle />
+        <Dialog.ScrollableInner label={_(msg`New user info dialog`)}>
+          <View style={[a.gap_md, isNative && {marginBottom: 40}]}>
+            <Text style={[a.font_bold, a.text_xl]}>
+              <Trans>{profileName} is new here!</Trans>
+            </Text>
+            <Text style={[]}>
+              {AppBskyGraphStarterpack.isRecord(joinedVia?.record) ? (
+                <Trans>
+                  {profileName} recently joined Bluesky with{' '}
+                  {joinedVia?.creator.displayName ||
+                    `@${joinedVia?.creator.handle}`}
+                  's starter pack!
+                </Trans>
+              ) : (
+                <Trans>
+                  {profileName} recently joined Bluesky on {profile.createdAt}.
+                </Trans>
+              )}
+            </Text>
+          </View>
+        </Dialog.ScrollableInner>
+      </Dialog.Outer>
+    </>
+  )
+}

src/components/icons/Newskie.tsx

@@ -3,7 +3,7 @@ import {View} from 'react-native'
 import Svg, {Path} from 'react-native-svg'
 export function Newskie({size}: {size: number}) {
   return (
-    <View style={{height: size, width: size}}>
+    <View style={{height: size / 0.6, width: size}}>
       <Svg fill="none" viewBox="0 0 21 11">
         <Path
           fill="#FFC404"

src/screens/Profile/Header/DisplayName.tsx

@@ -1,11 +1,12 @@
 import React from 'react'
 import {View} from 'react-native'
 import {AppBskyActorDefs, ModerationDecision} from '@atproto/api'
-import {sanitizeHandle} from 'lib/strings/handles'
-import {sanitizeDisplayName} from 'lib/strings/display-names'
-import {Shadow} from '#/state/cache/types'
 
+import {Shadow} from '#/state/cache/types'
+import {sanitizeDisplayName} from 'lib/strings/display-names'
+import {sanitizeHandle} from 'lib/strings/handles'
 import {atoms as a, useTheme} from '#/alf'
+import {NewskieDialog} from '#/components/StarterPack/NewskieDialog'
 import {Text} from '#/components/Typography'
 
 export function ProfileHeaderDisplayName({
@@ -17,7 +18,7 @@ export function ProfileHeaderDisplayName({
 }) {
   const t = useTheme()
   return (
-    <View pointerEvents="none">
+    <View style={[a.flex_row, a.align_center, a.gap_md]}>
       <Text
         testID="profileHeaderDisplayName"
         style={[t.atoms.text, a.text_4xl, {fontWeight: '500'}]}>
@@ -26,6 +27,9 @@ export function ProfileHeaderDisplayName({
           moderation.ui('displayName'),
         )}
       </Text>
+      <View style={[a.h_full]}>
+        <NewskieDialog profile={profile} />
+      </View>
     </View>
   )
 }