From 317fc7c86ff722cf9e5da1ea776e00e2d788b805 Mon Sep 17 00:00:00 2001
From: Hailey <me@haileyok.com>
Date: Fri, 7 Jun 2024 13:31:43 -0700
Subject: [PATCH] add a dialog for newskies to profiles

(cherry picked from commit fe16f55e9c5e8faef540b563662b0c0c9a1d2d77)
(cherry picked from commit c5b9f1b16ace276f422832069db076a5360616fe)
---
 src/components/StarterPack/NewskieDialog.tsx | 65 ++++++++++++++++++++
 src/components/icons/Newskie.tsx             |  2 +-
 src/screens/Profile/Header/DisplayName.tsx   | 12 ++--
 3 files changed, 74 insertions(+), 5 deletions(-)
 create mode 100644 src/components/StarterPack/NewskieDialog.tsx

diff --git a/src/components/StarterPack/NewskieDialog.tsx b/src/components/StarterPack/NewskieDialog.tsx
new file mode 100644
index 0000000000..92919111a7
--- /dev/null
+++ b/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>
+    </>
+  )
+}
diff --git a/src/components/icons/Newskie.tsx b/src/components/icons/Newskie.tsx
index 881255736c..ba4943f1be 100644
--- a/src/components/icons/Newskie.tsx
+++ b/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"
diff --git a/src/screens/Profile/Header/DisplayName.tsx b/src/screens/Profile/Header/DisplayName.tsx
index b6d88db712..3f7442c3de 100644
--- a/src/screens/Profile/Header/DisplayName.tsx
+++ b/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>
   )
 }