adjustments for dialog

src/components/StarterPack/NewskieDialog.tsx

@@ -6,12 +6,101 @@ import {useLingui} from '@lingui/react'
 
 import {HITSLOP_10} from 'lib/constants'
 import {isNative} from 'platform/detection'
+import {useSession} from 'state/session'
 import {atoms as a} from '#/alf'
 import * as Dialog from '#/components/Dialog'
 import {useDialogControl} from '#/components/Dialog'
 import {Newskie} from '#/components/icons/Newskie'
+import {StarterPackCard} from '#/components/StarterPack/StarterPackCard'
 import {Text} from '#/components/Typography'
 
+const mockSP = {
+  uri: 'at://did:plc:t5nrviyjxkdhd5ymyra772dm/app.bsky.graph.starterpack/3kuec35ms422t',
+  cid: 'bafyreigrvmj3qd4urr5q6lqku7uzj4xmazepik6oobuxtvunx3g7d6e6xi',
+  record: {
+    list: 'at://did:plc:t5nrviyjxkdhd5ymyra772dm/app.bsky.graph.list/3kuec35kvkj2t',
+    name: 'Test 123',
+    $type: 'app.bsky.graph.starterpack',
+    feeds: [],
+    createdAt: '2024-06-07T19:43:07.211Z',
+    description: 'Test123',
+    descriptionFacets: [],
+  },
+  creator: {
+    did: 'did:plc:t5nrviyjxkdhd5ymyra772dm',
+    handle: 'alice.test',
+    displayName: 'Alice',
+    associated: {
+      chat: {
+        allowIncoming: 'following',
+      },
+    },
+    viewer: {
+      muted: false,
+      blockedBy: false,
+    },
+    labels: [],
+  },
+  feedCount: 0,
+  joinedAllTimeCount: 0,
+  joinedWeekCount: 0,
+  listItemCount: 2,
+  labels: [],
+  indexedAt: '2024-06-07T19:43:07.211Z',
+  feeds: [],
+  list: {
+    uri: 'at://did:plc:t5nrviyjxkdhd5ymyra772dm/app.bsky.graph.list/3kuec35kvkj2t',
+    cid: 'bafyreibnigtususbzhjzadhsqconcf7s5wan6dl7h6s56jhxd6ebfvflrq',
+    name: 'Test 123',
+    purpose: 'app.bsky.graph.defs#referencelist',
+    indexedAt: '2024-06-07T19:43:07.122Z',
+    labels: [],
+    viewer: {
+      muted: false,
+    },
+  },
+  listItemsSample: [
+    {
+      uri: 'at://did:plc:t5nrviyjxkdhd5ymyra772dm/app.bsky.graph.listitem/3kuec35m2o22t',
+      subject: {
+        did: 'did:plc:5warwwnoavxfhchjhcjlqyqi',
+        handle: 'bob.test',
+        displayName: 'Bob',
+        viewer: {
+          muted: false,
+          blockedBy: false,
+          following:
+            'at://did:plc:t5nrviyjxkdhd5ymyra772dm/app.bsky.graph.follow/3kudwno6ck22t',
+          followedBy:
+            'at://did:plc:5warwwnoavxfhchjhcjlqyqi/app.bsky.graph.follow/3kudwno6nbs2t',
+        },
+        labels: [],
+        description: 'Test user 2',
+        indexedAt: '2024-06-07T16:18:43.414Z',
+      },
+    },
+    {
+      uri: 'at://did:plc:t5nrviyjxkdhd5ymyra772dm/app.bsky.graph.listitem/3kuec35m2nz2t',
+      subject: {
+        did: 'did:plc:cvdwnci2mr5srh4slty7lndz',
+        handle: 'carla.test',
+        displayName: 'Carla',
+        viewer: {
+          muted: false,
+          blockedBy: false,
+          following:
+            'at://did:plc:t5nrviyjxkdhd5ymyra772dm/app.bsky.graph.follow/3kudwno6hgc2t',
+          followedBy:
+            'at://did:plc:cvdwnci2mr5srh4slty7lndz/app.bsky.graph.follow/3kudwno6x2c2t',
+        },
+        labels: [],
+        description: 'Test user 3',
+        indexedAt: '2024-06-07T16:18:43.462Z',
+      },
+    },
+  ],
+}
+
 export function NewskieDialog({
   profile,
 }: {
@@ -21,7 +110,8 @@ export function NewskieDialog({
   const control = useDialogControl()
 
   const profileName = profile.displayName || `@${profile.handle}`
-  const joinedVia = profile.joinedViaStarterPack
+  // const joinedVia = profile.joinedViaStarterPack
+  const {currentAccount} = useSession()
 
   return (
     <>
@@ -43,20 +133,21 @@ export function NewskieDialog({
             <Text style={[a.font_bold, a.text_xl]}>
               <Trans>{profileName} is new here!</Trans>
             </Text>
-            <Text style={[]}>
+            <Text style={[a.text_md]}>
-              {AppBskyGraphStarterpack.isRecord(joinedVia?.record) ? (
+              {AppBskyGraphStarterpack.isRecord(mockSP.record) ? (
                 <Trans>
-                  {profileName} recently joined Bluesky with{' '}
+                  {profileName} joined Bluesky 3 days ago with{' '}
-                  {joinedVia?.creator.displayName ||
+                  {mockSP?.creator.did === currentAccount?.did
-                    `@${joinedVia?.creator.handle}`}
+                    ? 'your'
-                  's starter pack!
+                    : `${mockSP?.creator.displayName}'s` ||
+                      `@${mockSP?.creator.handle}'s`}{' '}
+                  starter pack.
                 </Trans>
               ) : (
-                <Trans>
+                <Trans>{profileName} recently joined Bluesky 3 days ago</Trans>
-                  {profileName} recently joined Bluesky on {profile.createdAt}.
-                </Trans>
               )}
             </Text>
+            <StarterPackCard starterPack={mockSP} type="dialog" />
           </View>
         </Dialog.ScrollableInner>
       </Dialog.Outer>

src/components/StarterPack/StarterPackCard.tsx

@@ -17,11 +17,12 @@ export function StarterPackCard({
   starterPack,
   type,
   hideTopBorder,
+  hideBy,
 }: {
   starterPack: StarterPackViewBasic
   hideTopBorder?: boolean
-  type: 'list' | 'notification'
+  type: 'list' | 'notification' | 'dialog'
-  showBy?: boolean
+  hideBy?: boolean
 }) {
   const {_} = useLingui()
   const t = useTheme()
@@ -47,21 +48,31 @@ export function StarterPackCard({
           a.py_lg,
           a.gap_md,
           t.atoms.border_contrast_low,
-          !hideTopBorder && type !== 'notification' && a.border_t,
+          !hideTopBorder &&
-          type === 'notification' && [a.mt_sm, a.py_md, a.border, a.rounded_sm],
+            type !== 'notification' &&
+            type !== 'dialog' &&
+            a.border_t,
+          (type === 'notification' || type === 'dialog') && [
+            a.mt_sm,
+            a.py_md,
+            a.border,
+            a.rounded_sm,
+          ],
         ]}>
         {type !== 'notification' && <StarterPackIcon width={36} height={36} />}
         <View style={a.gap_xs}>
           <View style={[isWeb && a.gap_xs]}>
             <Text style={[a.font_bold, a.text_md]}>{record.name}</Text>
-            <Text style={[t.atoms.text_contrast_medium]}>
+            {!hideBy && (
-              <Trans>
+              <Text style={[t.atoms.text_contrast_medium]}>
-                Starter pack by{' '}
+                <Trans>
-                {creator?.did === currentAccount?.did
+                  Starter pack by{' '}
-                  ? _(msg`you`)
+                  {creator?.did === currentAccount?.did
-                  : `@${sanitizeHandle(creator.handle)}`}
+                    ? _(msg`you`)
-              </Trans>
+                    : `@${sanitizeHandle(creator.handle)}`}
-            </Text>
+                </Trans>
+              </Text>
+            )}
           </View>
           {!!joinedAllTimeCount && joinedAllTimeCount >= 50 && (
             <Text style={[a.font_bold, t.atoms.text_contrast_medium]}>