android: show progress indicator on chat preview when connecting to server (#679)

* android: show progress indicator on chat preview when connecting to server

* move to right

* remove unused imports

* remove column

apps/android/app/src/main/java/chat/simplex/app/views/chatlist/ChatPreviewView.kt

@@ -6,8 +6,7 @@ import androidx.compose.foundation.layout.*
 import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.material.*
 import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.filled.Circle
-import androidx.compose.material.icons.filled.MoreHoriz
+import androidx.compose.material.icons.outlined.ErrorOutline
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
@@ -20,8 +19,7 @@ import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import chat.simplex.app.R
 import chat.simplex.app.model.*
-import chat.simplex.app.ui.theme.HighOrLowlight
-import chat.simplex.app.ui.theme.SimpleXTheme
+import chat.simplex.app.ui.theme.*
 import chat.simplex.app.views.chat.item.MarkdownText
 import chat.simplex.app.views.helpers.ChatInfoImage
 import chat.simplex.app.views.helpers.badgeLayout
@@ -30,12 +28,7 @@ import chat.simplex.app.views.helpers.badgeLayout
 fun ChatPreviewView(chat: Chat) {
   Row {
     val cInfo = chat.chatInfo
-    Box(contentAlignment = Alignment.BottomStart) {
-      ChatInfoImage(cInfo, size = 72.dp)
-      if (cInfo is ChatInfo.Direct) {
-        ChatStatusImage(chat)
-      }
-    }
+    ChatInfoImage(cInfo, size = 72.dp)
     Column(
       modifier = Modifier
         .padding(horizontal = 8.dp)
@@ -64,9 +57,9 @@ fun ChatPreviewView(chat: Chat) {
       }
     }
     val ts = chat.chatItems.lastOrNull()?.timestampText ?: getTimestampText(chat.chatInfo.updatedAt)
-    Column(
-      Modifier.fillMaxHeight(),
-      verticalArrangement = Arrangement.Top
+
+    Box(
+      contentAlignment = Alignment.TopEnd
     ) {
       Text(
         ts,
@@ -76,17 +69,29 @@ fun ChatPreviewView(chat: Chat) {
       )
       val n = chat.chatStats.unreadCount
       if (n > 0) {
-        Text(
-          if (n < 1000) "$n" else "${n / 1000}" + stringResource(R.string.thousand_abbreviation),
-          color = MaterialTheme.colors.onPrimary,
-          fontSize = 14.sp,
-          modifier = Modifier
-            .background(MaterialTheme.colors.primary, shape = CircleShape)
-            .align(Alignment.End)
-            .badgeLayout()
-            .padding(horizontal = 3.dp)
-            .padding(vertical = 1.dp)
-        )
+        Box(
+          Modifier.padding(top = 24.dp),
+          contentAlignment = Alignment.Center
+        ) {
+          Text(
+            if (n < 1000) "$n" else "${n / 1000}" + stringResource(R.string.thousand_abbreviation),
+            color = MaterialTheme.colors.onPrimary,
+            fontSize = 11.sp,
+            modifier = Modifier
+              .background(MaterialTheme.colors.primary, shape = CircleShape)
+              .badgeLayout()
+              .padding(horizontal = 3.dp)
+              .padding(vertical = 1.dp)
+          )
+        }
+      }
+      if (cInfo is ChatInfo.Direct) {
+        Box(
+          Modifier.padding(top = 52.dp),
+          contentAlignment = Alignment.Center
+        ) {
+          ChatStatusImage(chat)
+        }
       }
     }
   }
@@ -98,17 +103,19 @@ fun ChatStatusImage(chat: Chat) {
   val descr = s.statusString
   if (s is Chat.NetworkStatus.Error) {
     Icon(
-      Icons.Filled.Circle,
+      Icons.Outlined.ErrorOutline,
       contentDescription = descr,
       tint = HighOrLowlight,
-      modifier = Modifier.padding(start = 6.dp).padding(bottom = 4.dp).size(6.dp)
+      modifier = Modifier
+        .size(19.dp)
     )
-  } else if (!(s is Chat.NetworkStatus.Connected)) {
-    Icon(
-      Icons.Filled.MoreHoriz,
-      contentDescription = descr,
-      tint = HighOrLowlight,
-      modifier = Modifier.width(19.dp).padding(start = 6.dp)
+  } else if (s !is Chat.NetworkStatus.Connected) {
+    CircularProgressIndicator(
+      Modifier
+        .padding(horizontal = 2.dp)
+        .size(15.dp),
+      color = HighOrLowlight,
+      strokeWidth = 1.5.dp
     )
   }
 }