Crops replies to 3, follows first.

app/src/main/java/com/vitorpamplona/amethyst/ui/actions/NewPostView.kt

@@ -108,7 +108,7 @@ fun NewPostView(onClose: () -> Unit, baseReplyTo: Note? = null, quote: Note? = n
                     ) {
                         Column(modifier = Modifier.fillMaxWidth().verticalScroll(scroolState)) {
                             if (postViewModel.replyTos != null && baseReplyTo?.event is TextNoteEvent) {
-                                ReplyInformation(postViewModel.replyTos, postViewModel.mentions, "✖ ") {
+                                ReplyInformation(postViewModel.replyTos, postViewModel.mentions, account, "✖ ") {
                                     postViewModel.removeFromReplyList(it)
                                 }
                             }

app/src/main/java/com/vitorpamplona/amethyst/ui/note/NoteCompose.kt

@@ -247,10 +247,12 @@ fun NoteCompose(
                     }
 
                     if (noteEvent is TextNoteEvent && (note.replyTo != null || note.mentions != null)) {
-                        ReplyInformation(note.replyTo, note.mentions, navController)
+                        ReplyInformation(note.replyTo, note.mentions, account, navController)
                     } else if (noteEvent is ChannelMessageEvent && (note.replyTo != null || note.mentions != null)) {
+                        val sortedMentions = note.mentions?.toSet()?.sortedBy { account.userProfile().isFollowing(it) }
+
                         note.channel?.let {
-                            ReplyInformationChannel(note.replyTo, note.mentions, it, navController)
+                            ReplyInformationChannel(note.replyTo, sortedMentions, it, navController)
                         }
                     }
 

app/src/main/java/com/vitorpamplona/amethyst/ui/note/ReplyInformation.kt

@@ -1,16 +1,28 @@
 package com.vitorpamplona.amethyst.ui.note
 
 import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.foundation.text.ClickableText
+import androidx.compose.material.Icon
+import androidx.compose.material.IconButton
 import androidx.compose.material.LocalTextStyle
 import androidx.compose.material.MaterialTheme
 import androidx.compose.material.Text
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.ExpandMore
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.livedata.observeAsState
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.text.AnnotatedString
@@ -19,31 +31,35 @@ import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import androidx.navigation.NavController
 import com.google.accompanist.flowlayout.FlowRow
+import com.vitorpamplona.amethyst.model.Account
 import com.vitorpamplona.amethyst.model.Channel
 import com.vitorpamplona.amethyst.model.Note
 import com.vitorpamplona.amethyst.model.User
 
 @Composable
-fun ReplyInformation(replyTo: List<Note>?, mentions: List<User>?, navController: NavController) {
+fun ReplyInformation(replyTo: List<Note>?, mentions: List<User>?, account: Account, navController: NavController) {
-  ReplyInformation(replyTo, mentions) {
+  ReplyInformation(replyTo, mentions, account) {
     navController.navigate("User/${it.pubkeyHex}")
   }
 }
 
 @Composable
-fun ReplyInformation(replyTo: List<Note>?, mentions: List<User>?, prefix: String = "", onUserTagClick: (User) -> Unit) {
+fun ReplyInformation(replyTo: List<Note>?, dupMentions: List<User>?, account: Account, prefix: String = "", onUserTagClick: (User) -> Unit) {
+  val mentions = dupMentions?.toSet()?.sortedBy { !account.userProfile().isFollowing(it) }
+  var expanded by remember { mutableStateOf((mentions?.size ?: 0) <= 2) }
+
   FlowRow() {
     if (mentions != null && mentions.isNotEmpty()) {
       if (replyTo != null && replyTo.isNotEmpty()) {
+        val repliesToDisplay = if (expanded) mentions else mentions.take(2)
+
         Text(
           "replying to ",
           fontSize = 13.sp,
           color = MaterialTheme.colors.onSurface.copy(alpha = 0.32f)
         )
 
-        val mentionSet = mentions.toSet()
+        repliesToDisplay.forEachIndexed { idx, user ->
-
-        mentionSet.toSet().forEachIndexed { idx, user ->
           val innerUserState by user.live().metadata.observeAsState()
           val innerUser = innerUserState?.user
 
@@ -54,18 +70,46 @@ fun ReplyInformation(replyTo: List<Note>?, mentions: List<User>?, prefix: String
               onClick = { onUserTagClick(myUser) }
             )
 
-            if (idx < mentionSet.size - 2) {
+            if (expanded) {
-              Text(
+              if (idx < repliesToDisplay.size - 2) {
-                ", ",
+                Text(
-                fontSize = 13.sp,
+                  ", ",
-                color = MaterialTheme.colors.onSurface.copy(alpha = 0.32f)
+                  fontSize = 13.sp,
-              )
+                  color = MaterialTheme.colors.onSurface.copy(alpha = 0.32f)
-            } else if (idx < mentionSet.size - 1) {
+                )
-              Text(
+              } else if (idx < repliesToDisplay.size - 1) {
-                " and ",
+                Text(
-                fontSize = 13.sp,
+                  " and ",
-                color = MaterialTheme.colors.onSurface.copy(alpha = 0.32f)
+                  fontSize = 13.sp,
-              )
+                  color = MaterialTheme.colors.onSurface.copy(alpha = 0.32f)
+                )
+              }
+            } else {
+              if (idx < repliesToDisplay.size - 1) {
+                Text(
+                  ", ",
+                  fontSize = 13.sp,
+                  color = MaterialTheme.colors.onSurface.copy(alpha = 0.32f)
+                )
+              } else if (idx < repliesToDisplay.size) {
+                Text(
+                  " and ",
+                  fontSize = 13.sp,
+                  color = MaterialTheme.colors.onSurface.copy(alpha = 0.32f)
+                )
+
+                ClickableText(
+                  AnnotatedString("${mentions.size-2}"),
+                  style = LocalTextStyle.current.copy(color = MaterialTheme.colors.primary.copy(alpha = 0.52f), fontSize = 13.sp),
+                  onClick = { expanded = true }
+                )
+
+                Text(
+                  " others",
+                  fontSize = 13.sp,
+                  color = MaterialTheme.colors.onSurface.copy(alpha = 0.32f)
+                )
+              }
             }
           }
         }