2 files changed, 64 insertions, 6 deletions
diff --git a/src/view/com/algos/AlgoItem.tsx b/src/view/com/algos/AlgoItem.tsx
new file mode 100644
index 000000000..57a1428e6
--- /dev/null
+++ b/src/view/com/algos/AlgoItem.tsx
@@ -0,0 +1,57 @@
+import React from 'react'
+import {StyleSheet, View} from 'react-native'
+import {Text} from '../util/text/Text'
+import {AppBskyFeedDefs} from '@atproto/api'
+import {usePalette} from 'lib/hooks/usePalette'
+import {s} from 'lib/styles'
+import {UserAvatar} from '../util/UserAvatar'
+
+const AlgoItem = ({item}: {item: AppBskyFeedDefs.GeneratorView}) => {
+  const pal = usePalette('default')
+  return (
+    <View style={[styles.container]} key={item.uri}>
+      <View style={[styles.headerContainer]}>
+        <View style={[s.mr20]}>
+          <UserAvatar size={56} avatar={item.avatar} />
+        </View>
+        <View style={[styles.headerTextContainer]}>
+          <Text style={[pal.text, s.bold]}>
+            {item.displayName ?? 'Feed name'}
+          </Text>
+          <Text style={[pal.textLight, styles.description]}>
+            {item.description ??
+              'THIS IS A FEED DESCRIPTION, IT WILL TELL YOU WHAT THE FEED IS ABOUT. THIS IS A COOL FEED ABOUT COOL PEOPLE.'}
+          </Text>
+        </View>
+      </View>
+
+      {/* TODO: this feed is like by *3* people UserAvatars and others */}
+    </View>
+  )
+}
+
+export default AlgoItem
+
+const styles = StyleSheet.create({
+  container: {
+    paddingHorizontal: 18,
+    paddingVertical: 20,
+    flexDirection: 'column',
+    columnGap: 36,
+    flex: 1,
+    borderTopWidth: 1,
+    borderTopColor: '#E5E5E5',
+  },
+  headerContainer: {
+    flexDirection: 'row',
+  },
+  headerTextContainer: {
+    flexDirection: 'column',
+    columnGap: 4,
+    flex: 1,
+  },
+  description: {
+    flex: 1,
+    flexWrap: 'wrap',
+  },
+})
diff --git a/src/view/screens/Profile.tsx b/src/view/screens/Profile.tsx
index 5fb212554..b88caf1f8 100644
--- a/src/view/screens/Profile.tsx
+++ b/src/view/screens/Profile.tsx
@@ -21,6 +21,8 @@ import {FAB} from '../com/util/fab/FAB'
 import {s, colors} from 'lib/styles'
 import {useAnalytics} from 'lib/analytics'
 import {ComposeIcon2} from 'lib/icons'
+import {AppBskyFeedDefs} from '@atproto/api'
+import AlgoItem from 'view/com/algos/AlgoItem'
 
 type Props = NativeStackScreenProps<CommonNavigatorParams, 'Profile'>
 export const ProfileScreen = withAuthRequired(
@@ -152,15 +154,14 @@ export const ProfileScreen = withAuthRequired(
           )
         } else if (item instanceof PostsFeedSliceModel) {
           return <FeedSlice slice={item} ignoreMuteFor={uiState.profile.did} />
+        } else if (item.creator) {
+          // TODO: this is a hack to see if it is a custom feed. fix it to something more robust
+          const typedItem = item as AppBskyFeedDefs.GeneratorView
+          return <AlgoItem item={typedItem} />
         }
         return <View />
       },
-      [
-        onPressTryAgain,
-        uiState.profile.did,
-        uiState.feed.isBlocking,
-        uiState.feed.isBlockedBy,
-      ],
+      [onPressTryAgain, uiState],
     )
 
     return (