Generate separate strings for join messages in Newskie dialog (#8007)

* try again

* prettier

* prettier round 2

* Update src/components/NewskieDialog.tsx

Co-authored-by: Samuel Newman <mozzius@protonmail.com>

---------

Co-authored-by: Samuel Newman <mozzius@protonmail.com>

src/components/NewskieDialog.tsx

@@ -85,17 +85,35 @@ function DialogInner({
   const isMe = profile.did === currentAccount?.did
 
   const profileName = useMemo(() => {
-    const name = profile.displayName || profile.handle
+    if (!moderationOpts) return profile.displayName || profile.handle
+    const moderation = moderateProfile(profile, moderationOpts)
+    return sanitizeDisplayName(
+      profile.displayName || profile.handle,
+      moderation.ui('displayName'),
+    )
+  }, [moderationOpts, profile])
+
+  const getJoinMessage = () => {
+    const timeAgoString = timeAgo(createdAt, now, {format: 'long'})
 
     if (isMe) {
-      return _(msg`You`)
+      if (profile.joinedViaStarterPack) {
+        return _(
+          msg`You joined Bluesky using a starter pack ${timeAgoString} ago`,
+        )
+      } else {
+        return _(msg`You joined Bluesky ${timeAgoString} ago`)
+      }
+    } else {
+      if (profile.joinedViaStarterPack) {
+        return _(
+          msg`${profileName} joined Bluesky using a starter pack ${timeAgoString} ago`,
+        )
+      } else {
+        return _(msg`${profileName} joined Bluesky ${timeAgoString} ago`)
+      }
     }
-
+  }
-    if (!moderationOpts) return name
-    const moderation = moderateProfile(profile, moderationOpts)
-
-    return sanitizeDisplayName(name, moderation.ui('displayName'))
-  }, [_, isMe, moderationOpts, profile])
 
   return (
     <Dialog.ScrollableInner
@@ -122,17 +140,7 @@ function DialogInner({
           </Text>
         </View>
         <Text style={[a.text_md, a.text_center, a.leading_snug]}>
-          {profile.joinedViaStarterPack ? (
+          {getJoinMessage()}
-            <Trans>
-              {profileName} joined Bluesky using a starter pack{' '}
-              {timeAgo(createdAt, now, {format: 'long'})} ago
-            </Trans>
-          ) : (
-            <Trans>
-              {profileName} joined Bluesky{' '}
-              {timeAgo(createdAt, now, {format: 'long'})} ago
-            </Trans>
-          )}
         </Text>
         {profile.joinedViaStarterPack ? (
           <StarterPackCard.Link