Implement trending

5 files changed, 24 insertions, 12 deletions

diff --git a/src/state/models/feed-view.ts b/src/state/models/feed-view.ts
index 27b4b04e2..8e180a35e 100644
--- a/src/state/models/feed-view.ts
+++ b/src/state/models/feed-view.ts
@@ -28,6 +28,7 @@ export class FeedItemModel implements GetTimeline.FeedItem {
     declaration: {cid: '', actorType: ''},
   }
   repostedBy?: GetTimeline.Actor
+  trendedBy?: GetTimeline.Actor
   record: Record<string, unknown> = {}
   embed?:
     | GetTimeline.RecordEmbed
@@ -55,6 +56,7 @@ export class FeedItemModel implements GetTimeline.FeedItem {
     this.cid = v.cid
     this.author = v.author
     this.repostedBy = v.repostedBy
+    this.trendedBy = v.trendedBy
     this.record = v.record
     this.embed = v.embed
     this.replyCount = v.replyCount
diff --git a/src/view/com/notifications/Feed.tsx b/src/view/com/notifications/Feed.tsx
index 493412e7b..a3cac0cdf 100644
--- a/src/view/com/notifications/Feed.tsx
+++ b/src/view/com/notifications/Feed.tsx
@@ -26,7 +26,7 @@ export const Feed = observer(function Feed({
     view.loadMore().catch(err => console.error('Failed to load more', err))
   }
   return (
-    <View>
+    <View style={{flex: 1}}>
       {view.isLoading && !view.isRefreshing && !view.hasContent && (
         <Text>Loading...</Text>
       )}
diff --git a/src/view/com/notifications/FeedItem.tsx b/src/view/com/notifications/FeedItem.tsx
index fdc893e78..2ccd0d5b2 100644
--- a/src/view/com/notifications/FeedItem.tsx
+++ b/src/view/com/notifications/FeedItem.tsx
@@ -70,7 +70,7 @@ export const FeedItem = observer(function FeedItem({
   } else if (item.isTrend) {
     action = 'Your post is trending with'
     icon = 'arrow-trend-up'
-    iconStyle = [s.blue3]
+    iconStyle = [s.red3]
   } else if (item.isReply) {
     action = 'replied to your post'
     icon = ['far', 'comment']
@@ -169,7 +169,7 @@ export const FeedItem = observer(function FeedItem({
               {ago(item.indexedAt)}
             </Text>
           </View>
-          {item.isUpvote || item.isRepost ? (
+          {item.isUpvote || item.isRepost || item.isTrend ? (
             <PostText uri={item.subjectUri} style={[s.gray5]} />
           ) : (
             <></>
diff --git a/src/view/com/posts/FeedItem.tsx b/src/view/com/posts/FeedItem.tsx
index 43017f7d7..163405aeb 100644
--- a/src/view/com/posts/FeedItem.tsx
+++ b/src/view/com/posts/FeedItem.tsx
@@ -1,6 +1,6 @@
 import React, {useMemo} from 'react'
 import {observer} from 'mobx-react-lite'
-import {StyleSheet, Text, TouchableOpacity, View} from 'react-native'
+import {StyleSheet, Text, View} from 'react-native'
 import {AtUri} from '../../../third-party/uri'
 import * as PostType from '../../../third-party/api/src/client/types/app/bsky/feed/post'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
@@ -65,10 +65,21 @@ export const FeedItem = observer(function FeedItem({
   return (
     <Link style={styles.outer} href={itemHref} title={itemTitle}>
       {item.repostedBy && (
-        <View style={styles.repostedBy}>
-          <FontAwesomeIcon icon="retweet" style={styles.repostedByIcon} />
+        <View style={styles.includeReason}>
+          <FontAwesomeIcon icon="retweet" style={styles.includeReasonIcon} />
           <Text style={[s.gray4, s.bold, s.f13]}>
-            Reposted by {item.repostedBy.displayName}
+            Reposted by {item.repostedBy.displayName || item.repostedBy.handle}
+          </Text>
+        </View>
+      )}
+      {item.trendedBy && (
+        <View style={styles.includeReason}>
+          <FontAwesomeIcon
+            icon="arrow-trend-up"
+            style={styles.includeReasonIcon}
+          />
+          <Text style={[s.gray4, s.bold, s.f13]}>
+            Trending with {item.trendedBy.displayName || item.trendedBy.handle}
           </Text>
         </View>
       )}
@@ -158,12 +169,12 @@ const styles = StyleSheet.create({
     backgroundColor: colors.white,
     padding: 10,
   },
-  repostedBy: {
+  includeReason: {
     flexDirection: 'row',
     paddingLeft: 60,
   },
-  repostedByIcon: {
-    marginRight: 2,
+  includeReasonIcon: {
+    marginRight: 4,
     color: colors.gray4,
   },
   layout: {
diff --git a/src/view/screens/Notifications.tsx b/src/view/screens/Notifications.tsx
index 85106f2de..c82e7cc7c 100644
--- a/src/view/screens/Notifications.tsx
+++ b/src/view/screens/Notifications.tsx
@@ -24,7 +24,6 @@ export const Notifications = ({visible}: ScreenParams) => {
       notesView?.update()
     } else {
       store.nav.setTitle('Notifications')
-      console.log('Fetching notifications feed')
       const newNotesView = new NotificationsViewModel(store, {})
       setNotesView(newNotesView)
       newNotesView.setup().then(() => {
@@ -38,7 +37,7 @@ export const Notifications = ({visible}: ScreenParams) => {
   }, [visible, store])
 
   return (
-    <View>
+    <View style={{flex: 1}}>
       <ViewHeader title="Notifications" />
       {notesView && <Feed view={notesView} />}
     </View>