use real info on starter pack card

src/components/StarterPack/StarterPackCard.tsx

@@ -1,7 +1,13 @@
 import React from 'react'
 import {View} from 'react-native'
+import {AppBskyGraphStarterpack} from '@atproto/api'
 import {StarterPackViewBasic} from '@atproto/api/dist/client/types/app/bsky/graph/defs'
+import {msg, Trans} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
 
+import {sanitizeHandle} from 'lib/strings/handles'
+import {isWeb} from 'platform/detection'
+import {useSession} from 'state/session'
 import {atoms as a, useTheme} from '#/alf'
 import {StarterPackIcon} from '#/components/icons/StarterPackIcon'
 import {Link} from '#/components/Link'
@@ -15,8 +21,16 @@ export function StarterPackCard({
   starterPack: StarterPackViewBasic
   hideTopBorder?: boolean
   type: 'list' | 'notification'
+  showBy?: boolean
 }) {
+  const {_} = useLingui()
   const t = useTheme()
+  const {currentAccount} = useSession()
+  const {record, creator, joinedAllTimeCount} = starterPack
+
+  if (!AppBskyGraphStarterpack.isRecord(record)) {
+    return null
+  }
 
   return (
     <Link to={{screen: 'StarterPack', params: {id: starterPack.uri}}}>
@@ -32,16 +46,24 @@ export function StarterPackCard({
           type === 'notification' && [a.mt_sm, a.py_md, a.border, a.rounded_sm],
         ]}>
         {type !== 'notification' && <StarterPackIcon width={36} height={36} />}
-        <View style={a.gap_md}>
-          <View>
-            <Text style={[a.font_bold, a.text_md]}>React Native</Text>
+        <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]}>
-              Starter pack by @haileyok.com
+              <Trans>
+                Starter pack by{' '}
+                {creator?.did === currentAccount?.did
+                  ? _(msg`you`)
+                  : `@${sanitizeHandle(creator.handle)}`}
+              </Trans>
             </Text>
           </View>
           <Text style={[a.font_bold, t.atoms.text_contrast_medium]}>
-            380 users have joined!
+            {joinedAllTimeCount} users have joined!
           </Text>
+          {record.description && (
+            <Text numberOfLines={3}>{record.description}</Text>
+          )}
         </View>
       </View>
     </Link>

src/state/queries/profile-lists.ts

@@ -27,15 +27,12 @@ export function useProfileListsQuery(did: string, opts?: {enabled?: boolean}) {
         cursor: pageParam,
       })
 
-      return res.data
-
-      // TODO filter out reference lists
-      // return {
-      //   ...res.data,
-      //   lists: res.data.lists.filter(
-      //     l => l.purpose !== 'app.bsky.graph.defs#referencelist',
-      //   ),
-      // }
+      return {
+        ...res.data,
+        lists: res.data.lists.filter(
+          l => l.purpose !== 'app.bsky.graph.defs#referencelist',
+        ),
+      }
     },
     initialPageParam: undefined,
     getNextPageParam: lastPage => lastPage.cursor,