1 files changed, 64 insertions, 29 deletions
diff --git a/src/view/com/algos/AlgoItem.tsx b/src/view/com/algos/AlgoItem.tsx
index 979518f1d..987bfd68d 100644
--- a/src/view/com/algos/AlgoItem.tsx
+++ b/src/view/com/algos/AlgoItem.tsx
@@ -1,41 +1,62 @@
 import React from 'react'
 import {StyleProp, StyleSheet, View, ViewStyle} 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'
+import {Button} from '../util/forms/Button'
+import {observer} from 'mobx-react-lite'
+import {AlgoItemModel} from 'state/models/feeds/algo/algo-item'
 
-const AlgoItem = ({
-  item,
-  style,
-}: {
-  item: AppBskyFeedDefs.GeneratorView
-  style?: StyleProp<ViewStyle>
-}) => {
-  const pal = usePalette('default')
-  return (
-    <View style={[styles.container, style]} key={item.uri}>
-      <View style={[styles.headerContainer]}>
-        <View style={[s.mr20]}>
-          <UserAvatar size={56} avatar={item.avatar} />
+const AlgoItem = observer(
+  ({item, style}: {item: AlgoItemModel; style?: StyleProp<ViewStyle>}) => {
+    const pal = usePalette('default')
+    return (
+      <View style={[styles.container, style]} key={item.data.uri}>
+        <View style={[styles.headerContainer]}>
+          <View style={[s.mr10]}>
+            <UserAvatar size={36} avatar={item.data.avatar} />
+          </View>
+          <View style={[styles.headerTextContainer]}>
+            <Text style={[pal.text, s.bold]}>
+              {item.data.displayName ?? 'Feed name'}
+            </Text>
+            <Text style={[pal.textLight, styles.description]}>
+              {item.data.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>
-        <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>
-  )
-}
+        {/* TODO: this feed is like by *3* people UserAvatars and others */}
+        <View style={styles.bottomContainer}>
+          <View style={styles.likedByContainer}>
+            <View style={styles.likedByAvatars}>
+              <UserAvatar size={24} avatar={item.data.avatar} />
+              <UserAvatar size={24} avatar={item.data.avatar} />
+              <UserAvatar size={24} avatar={item.data.avatar} />
+            </View>
 
+            <Text style={[pal.text, pal.textLight]}>Liked by 3 others</Text>
+          </View>
+          <View>
+            <Button
+              type="inverted"
+              onPress={() => {
+                if (item.data.viewer?.saved) {
+                  item.unsave()
+                } else {
+                  item.save()
+                }
+              }}
+              label={item.data.viewer?.saved ? 'Unsave' : 'Save'}
+            />
+          </View>
+        </View>
+      </View>
+    )
+  },
+)
 export default AlgoItem
 
 const styles = StyleSheet.create({
@@ -43,10 +64,10 @@ const styles = StyleSheet.create({
     paddingHorizontal: 18,
     paddingVertical: 20,
     flexDirection: 'column',
-    columnGap: 36,
     flex: 1,
     borderTopWidth: 1,
     borderTopColor: '#E5E5E5',
+    gap: 18,
   },
   headerContainer: {
     flexDirection: 'row',
@@ -60,4 +81,18 @@ const styles = StyleSheet.create({
     flex: 1,
     flexWrap: 'wrap',
   },
+  bottomContainer: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  likedByContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 2,
+  },
+  likedByAvatars: {
+    flexDirection: 'row',
+    gap: -12,
+  },
 })