mobile: show contact connection pending status as ellipsis, error as gray circle (no green circles) (#588)

* mobile: show contact connection pending status as ellipsis, error as gray circle (no green circles)

* android: show contact status

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

@@ -4,8 +4,10 @@ import android.content.res.Configuration
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.*
 import androidx.compose.foundation.shape.CircleShape
-import androidx.compose.material.MaterialTheme
-import androidx.compose.material.Text
+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.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
@@ -17,8 +19,7 @@ import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import chat.simplex.app.R
-import chat.simplex.app.model.Chat
-import chat.simplex.app.model.getTimestampText
+import chat.simplex.app.model.*
 import chat.simplex.app.ui.theme.HighOrLowlight
 import chat.simplex.app.ui.theme.SimpleXTheme
 import chat.simplex.app.views.chat.item.MarkdownText
@@ -29,7 +30,12 @@ import chat.simplex.app.views.helpers.badgeLayout
 fun ChatPreviewView(chat: Chat) {
   Row {
     val cInfo = chat.chatInfo
-    ChatInfoImage(cInfo, size = 72.dp)
+    Box(contentAlignment = Alignment.BottomStart) {
+      ChatInfoImage(cInfo, size = 72.dp)
+      if (cInfo is ChatInfo.Direct) {
+        ChatStatusImage(chat)
+      }
+    }
     Column(
       modifier = Modifier
         .padding(horizontal = 8.dp)
@@ -86,6 +92,27 @@ fun ChatPreviewView(chat: Chat) {
   }
 }
 
+@Composable
+fun ChatStatusImage(chat: Chat) {
+  val s = chat.serverInfo.networkStatus
+  val descr = s.statusString
+  if (s is Chat.NetworkStatus.Error) {
+    Icon(
+      Icons.Filled.Circle,
+      contentDescription = descr,
+      tint = HighOrLowlight,
+      modifier = Modifier.padding(start = 6.dp).padding(bottom = 4.dp).size(6.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)
+    )
+  }
+}
+
 @Preview(showBackground = true)
 @Preview(
   uiMode = Configuration.UI_MODE_NIGHT_YES,

apps/ios/Shared/Views/ChatList/ChatPreviewView.swift

@@ -20,12 +20,8 @@ struct ChatPreviewView: View {
             ZStack(alignment: .bottomLeading) {
                 ChatInfoImage(chat: chat)
                     .frame(width: 63, height: 63)
-                if case .direct = chat.chatInfo,
-                   chat.serverInfo.networkStatus == .connected {
-                    Image(systemName: "circle.fill")
-                        .resizable()
-                        .foregroundColor(colorScheme == .dark ? darkGreen : .green)
-                        .frame(width: 5, height: 5)
+                if case .direct = chat.chatInfo {
+                   chatStatusImage()
                         .padding([.bottom, .leading], 1)
                 }
             }
@@ -91,6 +87,24 @@ struct ChatPreviewView: View {
         default: return Text("")
         }
     }
+
+    @ViewBuilder private func chatStatusImage() -> some View {
+        switch chat.serverInfo.networkStatus {
+        case .connected: EmptyView()
+        case .error:
+            Image(systemName: "circle.fill")
+                .resizable()
+                .scaledToFit()
+                .frame(maxHeight: 5)
+                .foregroundColor(.secondary)
+        default:
+            Image(systemName: "ellipsis")
+                .resizable()
+                .scaledToFit()
+                .frame(maxWidth: 10)
+                .foregroundColor(.secondary)
+        }
+    }
 }
 
 struct ChatPreviewView_Previews: PreviewProvider {