Big batch of UI updates (#276)

* Replace react-native-root-toast with a custom toast that fits the visual style

* Tune dark mode colors

* Tune colors a bit more

* Move the reply prompt to a fixed position in the footer

* Fully hide muted posts but give a control to show anyway (close #270)

* Improve thread rendering (better clarity on reply lines)

* Add follower/following counts to side menu

* Fix issues with display name overflows

src/state/models/me.ts

@@ -11,6 +11,8 @@ export class MeModel {
   displayName: string = ''
   description: string = ''
   avatar: string = ''
+  followsCount: number | undefined
+  followersCount: number | undefined
   mainFeed: FeedModel
   notifications: NotificationsViewModel
   follows: MyFollowsModel
@@ -90,10 +92,14 @@ export class MeModel {
           this.displayName = profile.data.displayName || ''
           this.description = profile.data.description || ''
           this.avatar = profile.data.avatar || ''
+          this.followsCount = profile.data.followsCount
+          this.followersCount = profile.data.followersCount
         } else {
           this.displayName = ''
           this.description = ''
           this.avatar = ''
+          this.followsCount = profile.data.followsCount
+          this.followersCount = undefined
         }
       })
       this.mainFeed.clear()

src/state/models/post-thread-view.ts

@@ -21,6 +21,8 @@ export class PostThreadViewPostModel {
   _reactKey: string = ''
   _depth = 0
   _isHighlightedPost = false
+  _showParentReplyLine = false
+  _showChildReplyLine = false
   _hasMore = false
 
   // data
@@ -30,6 +32,14 @@ export class PostThreadViewPostModel {
   replies?: (PostThreadViewPostModel | GetPostThread.NotFoundPost)[]
   richText?: RichText
 
+  get uri() {
+    return this.post.uri
+  }
+
+  get parentUri() {
+    return this.postRecord?.reply?.parent.uri
+  }
+
   constructor(
     public rootStore: RootStoreModel,
     reactKey: string,
@@ -65,6 +75,7 @@ export class PostThreadViewPostModel {
   assignTreeModels(
     keyGen: Generator<string>,
     v: GetPostThread.ThreadViewPost,
+    higlightedPostUri: string,
     includeParent = true,
     includeChildren = true,
   ) {
@@ -77,8 +88,16 @@ export class PostThreadViewPostModel {
           v.parent,
         )
         parentModel._depth = this._depth - 1
+        parentModel._showChildReplyLine = true
         if (v.parent.parent) {
-          parentModel.assignTreeModels(keyGen, v.parent, true, false)
+          parentModel._showParentReplyLine = true //parentModel.uri !== higlightedPostUri
+          parentModel.assignTreeModels(
+            keyGen,
+            v.parent,
+            higlightedPostUri,
+            true,
+            false,
+          )
         }
         this.parent = parentModel
       } else if (GetPostThread.isNotFoundPost(v.parent)) {
@@ -96,8 +115,17 @@ export class PostThreadViewPostModel {
             item,
           )
           itemModel._depth = this._depth + 1
-          if (item.replies) {
-            itemModel.assignTreeModels(keyGen, item, false, true)
+          itemModel._showParentReplyLine =
+            itemModel.parentUri !== higlightedPostUri
+          if (item.replies?.length) {
+            itemModel._showChildReplyLine = true
+            itemModel.assignTreeModels(
+              keyGen,
+              item,
+              higlightedPostUri,
+              false,
+              true,
+            )
           }
           replies.push(itemModel)
         } else if (GetPostThread.isNotFoundPost(item)) {
@@ -333,6 +361,7 @@ export class PostThreadViewModel {
     thread.assignTreeModels(
       keyGen,
       res.data.thread as GetPostThread.ThreadViewPost,
+      thread.uri,
     )
     this.thread = thread
   }