implement new feed card fully

src/components/StarterPack/Main/FeedsList.tsx

@@ -4,15 +4,13 @@ import {AppBskyFeedDefs} from '@atproto/api'
 import {GeneratorView} from '@atproto/api/dist/client/types/app/bsky/feed/defs'
 
 import {useBottomBarOffset} from 'lib/hooks/useBottomBarOffset'
+import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
 import {isNative} from 'platform/detection'
 import {List, ListRef} from 'view/com/util/List'
 import {SectionRef} from '#/screens/Profile/Sections/types'
+import {atoms as a, useTheme} from '#/alf'
 import * as FeedCard from '#/components/FeedCard'
 
-function renderItem({item}: ListRenderItemInfo<GeneratorView>) {
-  return <FeedCard.Default feed={item} />
-}
-
 function keyExtractor(item: AppBskyFeedDefs.GeneratorView) {
   return item.uri
 }
@@ -27,6 +25,8 @@ export const FeedsList = React.forwardRef<SectionRef, ProfilesListProps>(
   function FeedsListImpl({feeds, headerHeight, scrollElRef}, ref) {
     const [initialHeaderHeight] = React.useState(headerHeight)
     const bottomBarOffset = useBottomBarOffset(20)
+    const {isTabletOrDesktop} = useWebMediaQueries()
+    const t = useTheme()
 
     const onScrollToTop = useCallback(() => {
       scrollElRef.current?.scrollToOffset({
@@ -39,6 +39,19 @@ export const FeedsList = React.forwardRef<SectionRef, ProfilesListProps>(
       scrollToTop: onScrollToTop,
     }))
 
+    const renderItem = ({item, index}: ListRenderItemInfo<GeneratorView>) => {
+      return (
+        <View
+          style={[
+            a.p_lg,
+            (isTabletOrDesktop || index !== 0) && a.border_t,
+            t.atoms.border_contrast_low,
+          ]}>
+          <FeedCard.Default feed={item} />
+        </View>
+      )
+    }
+
     return (
       <List
         data={feeds}

src/components/StarterPack/StarterPackAvatar.tsx

@@ -5,7 +5,7 @@ import {AppBskyGraphDefs} from '@atproto/api'
 import {UserAvatar} from 'view/com/util/UserAvatar'
 import {atoms as a} from '#/alf'
 
-export function StarterPackAvatarsIcon({
+export function StarterPackAvatar({
   starterPack,
   size = 60,
 }: {
@@ -21,6 +21,7 @@ export function StarterPackAvatarsIcon({
     <View
       style={[
         a.rounded_sm,
+        a.overflow_hidden,
         {height: size, width: size, backgroundColor: '#0070FF'},
       ]}>
       <View style={[a.flex_1, a.flex_row]}>

src/screens/StarterPack/Wizard/index.tsx

@@ -300,6 +300,7 @@ function WizardInner({
             createdAt: initialCreatedAt,
             updatedAt: new Date().toISOString(),
           },
+          validate: false, // TODO remove!
         })
 
         await invalidateQueries()

src/view/com/profile/ProfileSubpageHeader.tsx

@@ -24,7 +24,7 @@ import hairlineWidth = StyleSheet.hairlineWidth
 import {AppBskyGraphDefs} from '@atproto/api'
 
 import {Menu_Stroke2_Corner0_Rounded as Menu} from '#/components/icons/Menu'
-import {StarterPackAvatarsIcon} from '#/components/StarterPack/StarterPackAvatarsIcon'
+import {StarterPackIcon} from '#/components/icons/StarterPackIcon'
 
 export function ProfileSubpageHeader({
   isLoading,
@@ -34,7 +34,6 @@ export function ProfileSubpageHeader({
   isOwner,
   creator,
   avatarType,
-  starterPack,
   children,
 }: React.PropsWithChildren<{
   isLoading?: boolean
@@ -133,7 +132,7 @@ export function ProfileSubpageHeader({
           accessibilityHint=""
           style={{width: 58}}>
           {avatarType === 'starter-pack' ? (
-            <StarterPackAvatarsIcon starterPack={starterPack} />
+            <StarterPackIcon width={58} height={58} />
           ) : (
             <UserAvatar type={avatarType} size={58} avatar={avatar} />
           )}