use new card in profile

src/components/StarterPack/Main/FeedsList.tsx

@@ -5,17 +5,12 @@ import {GeneratorView} from '@atproto/api/dist/client/types/app/bsky/feed/defs'
 
 import {useBottomBarOffset} from 'lib/hooks/useBottomBarOffset'
 import {isNative} from 'platform/detection'
-import {FeedSourceCard} from 'view/com/feeds/FeedSourceCard'
 import {List, ListRef} from 'view/com/util/List'
 import {SectionRef} from '#/screens/Profile/Sections/types'
+import * as FeedCard from '#/components/FeedCard'
 
-function renderItem({item, index}: ListRenderItemInfo<GeneratorView>) {
-  return (
-    <FeedSourceCard
-      feedUri={item.uri}
-      hideTopBorder={isNative && index === 0}
-    />
-  )
+function renderItem({item}: ListRenderItemInfo<GeneratorView>) {
+  return <FeedCard.Default feed={item} />
 }
 
 function keyExtractor(item: AppBskyFeedDefs.GeneratorView) {

src/view/com/feeds/ProfileFeedgens.tsx

@@ -3,7 +3,6 @@ import {
   findNodeHandle,
   ListRenderItemInfo,
   StyleProp,
-  StyleSheet,
   View,
   ViewStyle,
 } from 'react-native'
@@ -14,16 +13,17 @@ import {useQueryClient} from '@tanstack/react-query'
 import {cleanError} from '#/lib/strings/errors'
 import {useTheme} from '#/lib/ThemeContext'
 import {logger} from '#/logger'
-import {isNative, isWeb} from '#/platform/detection'
-import {hydrateFeedGenerator} from '#/state/queries/feed'
-import {usePreferencesQuery} from '#/state/queries/preferences'
+import {isNative} from '#/platform/detection'
 import {RQKEY, useProfileFeedgensQuery} from '#/state/queries/profile-feedgens'
+import {useBottomBarOffset} from 'lib/hooks/useBottomBarOffset'
+import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
 import {FeedLoadingPlaceholder} from '#/view/com/util/LoadingPlaceholder'
 import {EmptyState} from 'view/com/util/EmptyState'
+import {atoms as a, useTheme as useAlfTheme} from '#/alf'
+import * as FeedCard from '#/components/FeedCard'
 import {ErrorMessage} from '../util/error/ErrorMessage'
 import {List, ListRef} from '../util/List'
 import {LoadMoreRetryBtn} from '../util/LoadMoreRetryBtn'
-import {FeedSourceCardLoaded} from './FeedSourceCard'
 
 const LOADING = {_reactKey: '__loading__'}
 const EMPTY = {_reactKey: '__empty__'}
@@ -53,6 +53,9 @@ export const ProfileFeedgens = React.forwardRef<
 ) {
   const {_} = useLingui()
   const theme = useTheme()
+  const t = useAlfTheme()
+  const {isTabletOrDesktop} = useWebMediaQueries()
+  const bottomBarOffset = useBottomBarOffset(100)
   const [isPTRing, setIsPTRing] = React.useState(false)
   const opts = React.useMemo(() => ({enabled}), [enabled])
   const {
@@ -66,7 +69,6 @@ export const ProfileFeedgens = React.forwardRef<
     refetch,
   } = useProfileFeedgensQuery(did, opts)
   const isEmpty = !isFetching && !data?.pages[0]?.feeds.length
-  const {data: preferences} = usePreferencesQuery()
 
   const items = React.useMemo(() => {
     let items: any[] = []
@@ -79,10 +81,9 @@ export const ProfileFeedgens = React.forwardRef<
       items = items.concat([EMPTY])
     } else if (data?.pages) {
       for (const page of data?.pages) {
-        items = items.concat(page.feeds.map(feed => hydrateFeedGenerator(feed)))
+        items = items.concat(page.feeds)
       }
-    }
-    if (isError && !isEmpty) {
+    } else if (isError && !isEmpty) {
       items = items.concat([LOAD_MORE_ERROR_ITEM])
     }
     return items
@@ -132,48 +133,43 @@ export const ProfileFeedgens = React.forwardRef<
   // rendering
   // =
 
-  const renderItemInner = React.useCallback(
-    ({item, index}: ListRenderItemInfo<any>) => {
-      if (item === EMPTY) {
-        return (
-          <EmptyState
-            icon="hashtag"
-            message={_(msg`You have no feeds.`)}
-            testID="listsEmpty"
-          />
-        )
-      } else if (item === ERROR_ITEM) {
-        return (
-          <ErrorMessage message={cleanError(error)} onPressTryAgain={refetch} />
-        )
-      } else if (item === LOAD_MORE_ERROR_ITEM) {
-        return (
-          <LoadMoreRetryBtn
-            label={_(
-              msg`There was an issue fetching your lists. Tap here to try again.`,
-            )}
-            onPress={onPressRetryLoadMore}
-          />
-        )
-      } else if (item === LOADING) {
-        return <FeedLoadingPlaceholder />
-      }
-      if (preferences) {
-        return (
-          <FeedSourceCardLoaded
-            feedUri={item.uri}
-            feed={item}
-            preferences={preferences}
-            style={styles.item}
-            showLikes
-            hideTopBorder={index === 0 && !isWeb}
-          />
-        )
-      }
-      return null
-    },
-    [error, refetch, onPressRetryLoadMore, preferences, _],
-  )
+  const renderItem = ({item, index}: ListRenderItemInfo<any>) => {
+    if (item === EMPTY) {
+      return (
+        <EmptyState
+          icon="hashtag"
+          message={_(msg`You have no feeds.`)}
+          testID="listsEmpty"
+        />
+      )
+    } else if (item === ERROR_ITEM) {
+      return (
+        <ErrorMessage message={cleanError(error)} onPressTryAgain={refetch} />
+      )
+    } else if (item === LOAD_MORE_ERROR_ITEM) {
+      return (
+        <LoadMoreRetryBtn
+          label={_(
+            msg`There was an issue fetching your lists. Tap here to try again.`,
+          )}
+          onPress={onPressRetryLoadMore}
+        />
+      )
+    } else if (item === LOADING) {
+      return <FeedLoadingPlaceholder />
+    }
+    return (
+      <View
+        style={[
+          (index !== 0 || isTabletOrDesktop) && a.border_t,
+          t.atoms.border_contrast_low,
+          a.px_lg,
+          a.py_lg,
+        ]}>
+        <FeedCard.Default feed={item} />
+      </View>
+    )
+  }
 
   React.useEffect(() => {
     if (enabled && scrollElRef.current) {
@@ -189,11 +185,13 @@ export const ProfileFeedgens = React.forwardRef<
         ref={scrollElRef}
         data={items}
         keyExtractor={(item: any) => item._reactKey || item.uri}
-        renderItem={renderItemInner}
+        renderItem={renderItem}
         refreshing={isPTRing}
         onRefresh={onRefresh}
         headerOffset={headerOffset}
-        contentContainerStyle={isNative && {paddingBottom: headerOffset + 100}}
+        contentContainerStyle={
+          isNative && {paddingBottom: headerOffset + bottomBarOffset}
+        }
         indicatorStyle={theme.colorScheme === 'dark' ? 'white' : 'black'}
         removeClippedSubviews={true}
         // @ts-ignore our .web version only -prf
@@ -203,9 +201,3 @@ export const ProfileFeedgens = React.forwardRef<
     </View>
   )
 })
-
-const styles = StyleSheet.create({
-  item: {
-    paddingHorizontal: 18,
-  },
-})