5 files changed, 111 insertions, 51 deletions
diff --git a/src/App.native.tsx b/src/App.native.tsx
index 071b7457b..ffeb7d5fc 100644
--- a/src/App.native.tsx
+++ b/src/App.native.tsx
@@ -1,31 +1,10 @@
 import 'react-native-url-polyfill/auto'
 import React, {useState, useEffect} from 'react'
-import moment from 'moment'
 import {whenWebCrypto} from './platform/polyfills.native'
+import * as view from './view/index'
 import {RootStoreModel, setupState, RootStoreProvider} from './state'
 import * as Routes from './view/routes'
 
-moment.updateLocale('en', {
-  relativeTime: {
-    future: 'in %s',
-    past: '%s ago',
-    s: 'a few seconds',
-    ss: '%ds',
-    m: 'a minute',
-    mm: '%dm',
-    h: 'an hour',
-    hh: '%dh',
-    d: 'a day',
-    dd: '%dd',
-    w: 'a week',
-    ww: '%dw',
-    M: 'a month',
-    MM: '%dmo',
-    y: 'a year',
-    yy: '%dy',
-  },
-})
-
 function App() {
   const [rootStore, setRootStore] = useState<RootStoreModel | undefined>(
     undefined,
@@ -33,7 +12,12 @@ function App() {
 
   // init
   useEffect(() => {
-    whenWebCrypto.then(() => setupState()).then(setRootStore)
+    whenWebCrypto
+      .then(() => {
+        view.setup()
+        return setupState()
+      })
+      .then(setRootStore)
   }, [])
 
   // show nothing prior to init
diff --git a/src/App.web.tsx b/src/App.web.tsx
index a6f98487c..018ac4003 100644
--- a/src/App.web.tsx
+++ b/src/App.web.tsx
@@ -1,29 +1,8 @@
 import React, {useState, useEffect} from 'react'
-import moment from 'moment'
+import * as view from './view/index'
 import {RootStoreModel, setupState, RootStoreProvider} from './state'
 import * as Routes from './view/routes'
 
-moment.updateLocale('en', {
-  relativeTime: {
-    future: 'in %s',
-    past: '%s ago',
-    s: 'a few seconds',
-    ss: '%ds',
-    m: 'a minute',
-    mm: '%dm',
-    h: 'an hour',
-    hh: '%dh',
-    d: 'a day',
-    dd: '%dd',
-    w: 'a week',
-    ww: '%dw',
-    M: 'a month',
-    MM: '%dmo',
-    y: 'a year',
-    yy: '%dy',
-  },
-})
-
 function App() {
   const [rootStore, setRootStore] = useState<RootStoreModel | undefined>(
     undefined,
@@ -31,6 +10,7 @@ function App() {
 
   // init
   useEffect(() => {
+    view.setup()
     setupState().then(setRootStore)
   }, [])
 
diff --git a/src/view/com/FeedItem.tsx b/src/view/com/FeedItem.tsx
index 8f838d5df..262104bf3 100644
--- a/src/view/com/FeedItem.tsx
+++ b/src/view/com/FeedItem.tsx
@@ -3,6 +3,7 @@ import {observer} from 'mobx-react-lite'
 import {Text, Image, ImageSourcePropType, StyleSheet, View} from 'react-native'
 import {bsky} from '@adxp/mock-api'
 import moment from 'moment'
+import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {FeedViewItemModel} from '../../state/models/feed-view'
 
 const IMAGES: Record<string, ImageSourcePropType> = {
@@ -20,9 +21,12 @@ export const FeedItem = observer(function FeedItem({
   return (
     <View style={styles.outer}>
       {item.repostedBy && (
-        <Text style={styles.repostedBy}>
-          Reposted by {item.repostedBy.displayName}
-        </Text>
+        <View style={styles.repostedBy}>
+          <FontAwesomeIcon icon="retweet" style={styles.repostedByIcon} />
+          <Text style={styles.repostedByText}>
+            Reposted by {item.repostedBy.displayName}
+          </Text>
+        </View>
       )}
       <View style={styles.layout}>
         <View style={styles.layoutAvi}>
@@ -44,6 +48,36 @@ export const FeedItem = observer(function FeedItem({
             </Text>
           </View>
           <Text style={styles.postText}>{record.text}</Text>
+          <View style={styles.ctrls}>
+            <View style={styles.ctrl}>
+              <FontAwesomeIcon
+                style={styles.ctrlReplyIcon}
+                icon={['far', 'comment']}
+              />
+              <Text>{item.replyCount}</Text>
+            </View>
+            <View style={styles.ctrl}>
+              <FontAwesomeIcon
+                style={styles.ctrlRepostIcon}
+                icon="retweet"
+                size={22}
+              />
+              <Text>{item.repostCount}</Text>
+            </View>
+            <View style={styles.ctrl}>
+              <FontAwesomeIcon
+                style={styles.ctrlLikeIcon}
+                icon={['far', 'heart']}
+              />
+              <Text>{item.likeCount}</Text>
+            </View>
+            <View style={styles.ctrl}>
+              <FontAwesomeIcon
+                style={styles.ctrlShareIcon}
+                icon="share-from-square"
+              />
+            </View>
+          </View>
         </View>
       </View>
     </View>
@@ -58,7 +92,14 @@ const styles = StyleSheet.create({
     padding: 10,
   },
   repostedBy: {
+    flexDirection: 'row',
     paddingLeft: 70,
+  },
+  repostedByIcon: {
+    marginRight: 2,
+    color: 'gray',
+  },
+  repostedByText: {
     color: 'gray',
     fontWeight: 'bold',
     fontSize: 13,
@@ -100,5 +141,32 @@ const styles = StyleSheet.create({
   },
   postText: {
     fontSize: 15,
+    paddingBottom: 5,
+  },
+  ctrls: {
+    flexDirection: 'row',
+  },
+  ctrl: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    flex: 1,
+    paddingLeft: 4,
+    paddingRight: 4,
+  },
+  ctrlReplyIcon: {
+    marginRight: 5,
+    color: 'gray',
+  },
+  ctrlRepostIcon: {
+    marginRight: 5,
+    color: 'gray',
+  },
+  ctrlLikeIcon: {
+    marginRight: 5,
+    color: 'gray',
+  },
+  ctrlShareIcon: {
+    marginRight: 5,
+    color: 'gray',
   },
 })
diff --git a/src/view/index.ts b/src/view/index.ts
new file mode 100644
index 000000000..da8847bd0
--- /dev/null
+++ b/src/view/index.ts
@@ -0,0 +1,31 @@
+import moment from 'moment'
+import {library} from '@fortawesome/fontawesome-svg-core'
+
+import {faComment} from '@fortawesome/free-regular-svg-icons/faComment'
+import {faHeart} from '@fortawesome/free-regular-svg-icons/faHeart'
+import {faShareFromSquare} from '@fortawesome/free-solid-svg-icons/faShareFromSquare'
+import {faRetweet} from '@fortawesome/free-solid-svg-icons/faRetweet'
+
+export function setup() {
+  moment.updateLocale('en', {
+    relativeTime: {
+      future: 'in %s',
+      past: '%s ago',
+      s: 'a few seconds',
+      ss: '%ds',
+      m: 'a minute',
+      mm: '%dm',
+      h: 'an hour',
+      hh: '%dh',
+      d: 'a day',
+      dd: '%dd',
+      w: 'a week',
+      ww: '%dw',
+      M: 'a month',
+      MM: '%dmo',
+      y: 'a year',
+      yy: '%dy',
+    },
+  })
+  library.add(faComment, faHeart, faRetweet, faShareFromSquare)
+}
diff --git a/src/view/screens/Home.tsx b/src/view/screens/Home.tsx
index 53ec44eb9..affd042d1 100644
--- a/src/view/screens/Home.tsx
+++ b/src/view/screens/Home.tsx
@@ -14,9 +14,6 @@ export function Home(/*{navigation}: RootTabsScreenProps<'Home'>*/) {
   return (
     <Shell>
       <View>
-        <Text style={{fontSize: 20, fontWeight: 'bold'}}>
-          Hello, {store.me.displayName} ({store.me.name})
-        </Text>
         <Feed feed={store.homeFeed} />
       </View>
     </Shell>