android: improve chat, chat info, console (#344)

* bigger fonts, text entry layout

* resize scroll area when keyboard appears; automatically scroll on new messages

* fix message entry in dark mode

* imporove console layout

* fix chat info with dark mode

* fix typo

* clean up

* remove unused time formatter

apps/android/.idea/codeStyles/Project.xml

@@ -3,13 +3,8 @@
     <JetCodeStyleSettings>
       <option name="SPACE_BEFORE_EXTEND_COLON" value="false" />
       <option name="NAME_COUNT_TO_USE_STAR_IMPORT" value="3" />
-      <option name="CONTINUATION_INDENT_IN_PARAMETER_LISTS" value="false" />
-      <option name="CONTINUATION_INDENT_IN_ARGUMENT_LISTS" value="false" />
-      <option name="CONTINUATION_INDENT_FOR_EXPRESSION_BODIES" value="false" />
-      <option name="CONTINUATION_INDENT_FOR_CHAINED_CALLS" value="false" />
-      <option name="CONTINUATION_INDENT_IN_SUPERTYPE_LISTS" value="false" />
-      <option name="CONTINUATION_INDENT_IN_ELVIS" value="false" />
       <option name="WRAP_ELVIS_EXPRESSIONS" value="0" />
+      <option name="CODE_STYLE_DEFAULTS" value="KOTLIN_OFFICIAL" />
     </JetCodeStyleSettings>
     <codeStyleSettings language="XML">
       <option name="FORCE_REARRANGE_MODE" value="1" />
@@ -125,14 +120,11 @@
       </arrangement>
     </codeStyleSettings>
     <codeStyleSettings language="kotlin">
+      <option name="CODE_STYLE_DEFAULTS" value="KOTLIN_OFFICIAL" />
       <option name="RIGHT_MARGIN" value="120" />
       <option name="KEEP_BLANK_LINES_IN_DECLARATIONS" value="1" />
       <option name="KEEP_BLANK_LINES_IN_CODE" value="0" />
       <option name="KEEP_BLANK_LINES_BEFORE_RBRACE" value="0" />
-      <option name="CALL_PARAMETERS_LPAREN_ON_NEXT_LINE" value="true" />
-      <option name="CALL_PARAMETERS_RPAREN_ON_NEXT_LINE" value="true" />
-      <option name="METHOD_PARAMETERS_LPAREN_ON_NEXT_LINE" value="true" />
-      <option name="METHOD_PARAMETERS_RPAREN_ON_NEXT_LINE" value="true" />
       <option name="METHOD_ANNOTATION_WRAP" value="0" />
       <option name="CLASS_ANNOTATION_WRAP" value="0" />
       <option name="FIELD_ANNOTATION_WRAP" value="0" />

apps/android/app/build.gradle

@@ -71,6 +71,7 @@ dependencies {
     implementation 'org.jetbrains.kotlinx:kotlinx-serialization-json:1.3.2'
     implementation "androidx.compose.material:material-icons-extended:$compose_version"
     implementation "androidx.navigation:navigation-compose:2.4.1"
+    implementation "com.google.accompanist:accompanist-insets:0.23.0"
 
     def camerax_version = "1.1.0-beta01"
     implementation "androidx.camera:camera-core:${camerax_version}"
@@ -81,7 +82,7 @@ dependencies {
     implementation 'com.google.zxing:core:3.4.0'
     implementation 'com.google.mlkit:barcode-scanning:17.0.2'
     //Camera Permission
-    implementation "com.google.accompanist:accompanist-permissions:0.19.0"
+    implementation "com.google.accompanist:accompanist-permissions:0.23.0"
 
     testImplementation 'junit:junit:4.13.2'
     androidTestImplementation 'androidx.test.ext:junit:1.1.3'

apps/android/app/src/main/AndroidManifest.xml

@@ -20,6 +20,7 @@
       android:name=".MainActivity"
       android:exported="true"
       android:label="@string/app_name"
+      android:windowSoftInputMode="adjustResize"
       android:theme="@style/Theme.SimpleX">
       <intent-filter>
         <action android:name="android.intent.action.MAIN" />

apps/android/app/src/main/java/chat/simplex/app/MainActivity.kt

@@ -23,10 +23,12 @@ import chat.simplex.app.views.helpers.withApi
 import chat.simplex.app.views.newchat.*
 import chat.simplex.app.views.usersettings.SettingsView
 import chat.simplex.app.views.usersettings.UserProfileView
+import com.google.accompanist.insets.ExperimentalAnimatedInsets
 import com.google.accompanist.permissions.ExperimentalPermissionsApi
 import kotlinx.coroutines.DelicateCoroutinesApi
 
 @DelicateCoroutinesApi
+@ExperimentalAnimatedInsets
 @ExperimentalPermissionsApi
 @ExperimentalMaterialApi
 class MainActivity: ComponentActivity() {
@@ -60,6 +62,7 @@ fun MainPage(chatModel: ChatModel, nav: NavController) {
   }
 }
 
+@ExperimentalAnimatedInsets
 @DelicateCoroutinesApi
 @ExperimentalPermissionsApi
 @ExperimentalMaterialApi

apps/android/app/src/main/java/chat/simplex/app/model/SimpleXAPI.kt

@@ -4,10 +4,10 @@ import android.util.Log
 import androidx.compose.runtime.mutableStateOf
 import chat.simplex.app.*
 import kotlinx.coroutines.*
+import kotlinx.datetime.*
 import kotlinx.serialization.*
 import kotlinx.serialization.json.Json
 import kotlinx.serialization.json.jsonObject
-import java.util.*
 import kotlin.concurrent.thread
 
 typealias ChatCtrl = Long
@@ -481,7 +481,7 @@ sealed class CR {
 
 abstract class TerminalItem {
   abstract val id: Long
-  val date = Date()
+  val date: Instant = Clock.System.now()
   abstract val label: String
   abstract val details: String
 

apps/android/app/src/main/java/chat/simplex/app/ui/theme/Theme.kt

@@ -9,8 +9,8 @@ private val DarkColorPalette = darkColors(
   primary = SimplexBlue,
   primaryVariant = SimplexGreen,
   secondary = DarkGray,
-  background = Color.Black,
-  surface = Color.Black
+//  background = Color.Black,
+//  surface = Color.Black
   /*
     background: Color = Color(0xFF121212),
     surface: Color = Color(0xFF121212),
@@ -27,8 +27,8 @@ private val LightColorPalette = lightColors(
   primary = SimplexBlue,
   primaryVariant = SimplexGreen,
   secondary = LightGray,
-  background = Color.White,
-  surface = Color.White
+//  background = Color.White,
+//  surface = Color.White
   /* Other default colors to override
     surface = Color.White,
     onPrimary = Color.White,

apps/android/app/src/main/java/chat/simplex/app/ui/theme/Type.kt

@@ -1,5 +1,6 @@
 package chat.simplex.app.ui.theme
 
+import androidx.compose.material.MaterialTheme
 import androidx.compose.material.Typography
 import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.font.FontFamily
@@ -18,15 +19,20 @@ val Typography = Typography(
     fontWeight = FontWeight.Normal,
     fontSize = 24.sp
   ),
+  h3 = TextStyle(
+    fontFamily = FontFamily.Default,
+    fontWeight = FontWeight.Normal,
+    fontSize = 20.sp
+  ),
   body1 = TextStyle(
     fontFamily = FontFamily.Default,
     fontWeight = FontWeight.Normal,
-    fontSize = 16.sp
+    fontSize = 18.sp
   ),
   body2 = TextStyle(
     fontFamily = FontFamily.Default,
     fontWeight = FontWeight.Normal,
-    fontSize = 14.sp
+    fontSize = 16.sp
   ),
   button = TextStyle(
     fontFamily = FontFamily.Default,

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

@@ -1,49 +1,81 @@
 package chat.simplex.app.views
 
-import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.lazy.LazyColumn
-import androidx.compose.foundation.lazy.items
-import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.*
+import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.lazy.*
 import androidx.compose.foundation.text.ClickableText
 import androidx.compose.foundation.text.selection.SelectionContainer
-import androidx.compose.foundation.verticalScroll
-import androidx.compose.material.Button
-import androidx.compose.material.Text
-import androidx.compose.runtime.Composable
+import androidx.compose.material.*
+import androidx.compose.runtime.*
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.text.AnnotatedString
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.font.FontFamily
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
 import androidx.navigation.NavController
 import chat.simplex.app.model.*
-import chat.simplex.app.views.chat.SendMsgView
+import chat.simplex.app.ui.theme.SimpleXTheme
+import chat.simplex.app.views.chat.*
+import chat.simplex.app.views.chat.item.ChatItemView
+import chat.simplex.app.views.helpers.CloseSheetBar
 import chat.simplex.app.views.helpers.withApi
+import com.google.accompanist.insets.ProvideWindowInsets
+import com.google.accompanist.insets.navigationBarsWithImePadding
 import kotlinx.coroutines.DelicateCoroutinesApi
+import kotlinx.coroutines.launch
+import java.time.format.DateTimeFormatter
 
 @DelicateCoroutinesApi
 @Composable
-fun TerminalView(chatModel: ChatModel, navController: NavController) {
-  Column {
-    Button(onClick = { navController.popBackStack() }) {
-      Text("Back")
+fun TerminalView(chatModel: ChatModel, nav: NavController) {
+  TerminalLayout(chatModel.terminalItems, nav::popBackStack, nav::navigate) { cmd ->
+    withApi {
+      // show "in progress"
+      chatModel.controller.sendCmd(CC.Console(cmd))
+      // hide "in progress"
     }
-    TerminalLog(chatModel.terminalItems, navController)
-    SendMsgView(sendMessage = { cmd ->
-      withApi {
-        // show "in progress"
-        chatModel.controller.sendCmd(CC.Console(cmd))
-        // hide "in progress"
-      }
-    })
   }
 }
 
 @Composable
-fun TerminalLog(terminalItems: List<TerminalItem>, navController: NavController) {
-  LazyColumn {
+fun TerminalLayout(terminalItems: List<TerminalItem> , close: () -> Unit, navigate: (String) -> Unit,
+                   sendCommand: (String) -> Unit) {
+  ProvideWindowInsets(windowInsetsAnimationsEnabled = true) {
+    Scaffold(
+      topBar = { CloseSheetBar(close) },
+      bottomBar = { SendMsgView(sendCommand) },
+      modifier = Modifier.navigationBarsWithImePadding()
+    ) { contentPadding ->
+      Box(
+        modifier = Modifier
+          .padding(contentPadding)
+          .fillMaxWidth()
+          .background(MaterialTheme.colors.background)
+      ) {
+        TerminalLog(terminalItems, navigate)
+      }
+    }
+  }
+}
+
+@Composable
+fun TerminalLog(terminalItems: List<TerminalItem>, navigate: (String) -> Unit) {
+  val listState = rememberLazyListState()
+  val scope = rememberCoroutineScope()
+  LazyColumn(state = listState) {
     items(terminalItems) { item ->
-      ClickableText(
-        AnnotatedString(item.label),
-        onClick = { navController.navigate("details/${item.id}") }
-      )
+        Text("${item.date.toString().subSequence(11, 19)} ${item.label}",
+          style = TextStyle(fontFamily = FontFamily.Monospace, fontSize = 18.sp, color = MaterialTheme.colors.primary),
+          modifier = Modifier.padding(horizontal = 8.dp, vertical = 4.dp)
+            .clickable { navigate("details/${item.id}") })
+    }
+    val len = terminalItems.count()
+    if (len > 1) {
+      scope.launch {
+        listState.animateScrollToItem(len - 1)
+      }
     }
   }
 }
@@ -61,3 +93,16 @@ fun DetailView(identifier: Long, terminalItems: List<TerminalItem>, navControlle
     }
   }
 }
+
+@Preview(showBackground = true)
+@Composable
+fun PreviewTerminalLayout() {
+  SimpleXTheme {
+    TerminalLayout(
+      terminalItems = TerminalItem.sampleData,
+      close = {},
+      navigate = {},
+      sendCommand = {}
+    )
+  }
+}

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

@@ -1,5 +1,6 @@
 package chat.simplex.app.views.chat
 
+import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.*
 import androidx.compose.material.*
 import androidx.compose.material.icons.Icons
@@ -52,6 +53,7 @@ fun ChatInfoView(chatModel: ChatModel, nav: NavController) {
 fun ChatInfoLayout(chat: Chat, close: () -> Unit, deleteContact: () -> Unit) {
   Column(Modifier
     .fillMaxSize()
+    .background(MaterialTheme.colors.background)
     .padding(horizontal = 8.dp),
     horizontalAlignment = Alignment.CenterHorizontally
   ) {
@@ -61,10 +63,12 @@ fun ChatInfoLayout(chat: Chat, close: () -> Unit, deleteContact: () -> Unit) {
     val cInfo = chat.chatInfo
     Text(
       cInfo.displayName, style = MaterialTheme.typography.h1,
+      color = MaterialTheme.colors.onBackground,
       modifier = Modifier.padding(top = 32.dp).padding(bottom = 8.dp)
     )
     Text(
       cInfo.fullName, style = MaterialTheme.typography.h2,
+      color = MaterialTheme.colors.onBackground,
       modifier = Modifier.padding(bottom = 16.dp)
     )
 
@@ -75,12 +79,14 @@ fun ChatInfoLayout(chat: Chat, close: () -> Unit, deleteContact: () -> Unit) {
           Text(
             chat.serverInfo.networkStatus.statusString,
             textAlign = TextAlign.Center,
+            color = MaterialTheme.colors.onBackground,
             modifier = Modifier.padding(start = 8.dp)
           )
         }
         Text(
           chat.serverInfo.networkStatus.statusExplanation,
           style = MaterialTheme.typography.body2,
+          color = MaterialTheme.colors.onBackground,
           textAlign = TextAlign.Center,
           modifier = Modifier.padding(top = 16.dp).padding(horizontal = 16.dp)
         )

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

@@ -1,16 +1,13 @@
 package chat.simplex.app.views.chat
 
-import androidx.compose.foundation.background
-import androidx.compose.foundation.clickable
+import androidx.compose.foundation.*
 import androidx.compose.foundation.layout.*
-import androidx.compose.foundation.lazy.LazyColumn
-import androidx.compose.foundation.lazy.items
+import androidx.compose.foundation.lazy.*
 import androidx.compose.material.*
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.outlined.ArrowBack
-import androidx.compose.runtime.Composable
-import androidx.compose.ui.Alignment
-import androidx.compose.ui.Modifier
+import androidx.compose.runtime.*
+import androidx.compose.ui.*
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
@@ -21,9 +18,11 @@ import chat.simplex.app.ui.theme.SimpleXTheme
 import chat.simplex.app.views.chat.item.ChatItemView
 import chat.simplex.app.views.helpers.ChatInfoImage
 import chat.simplex.app.views.helpers.withApi
-import kotlinx.coroutines.DelicateCoroutinesApi
+import com.google.accompanist.insets.*
+import kotlinx.coroutines.*
 import kotlinx.datetime.Clock
 
+@ExperimentalAnimatedInsets
 @DelicateCoroutinesApi
 @Composable
 fun ChatView(chatModel: ChatModel, nav: NavController) {
@@ -51,6 +50,8 @@ fun ChatView(chatModel: ChatModel, nav: NavController) {
   }
 }
 
+@DelicateCoroutinesApi
+@ExperimentalAnimatedInsets
 @Composable
 fun ChatLayout(
   chat: Chat, chatItems: List<ChatItem>,
@@ -58,26 +59,27 @@ fun ChatLayout(
   info: () -> Unit,
   sendMessage: (String) -> Unit
 ) {
-  Scaffold(
-    topBar = { ChatInfoToolbar(chat, back, info) },
-    bottomBar = { SendMsgView(sendMessage) }
-  ) { contentPadding ->
-    Box(
-      modifier = Modifier
-        .padding(contentPadding)
-        .fillMaxWidth()
-        .background(MaterialTheme.colors.background)
-    ) {
-      ChatItemsList(chatItems)
+  ProvideWindowInsets(windowInsetsAnimationsEnabled = true) {
+    Scaffold(
+      topBar = { ChatInfoToolbar(chat, back, info) },
+      bottomBar = { SendMsgView(sendMessage) },
+      modifier = Modifier.navigationBarsWithImePadding()
+    ) { contentPadding ->
+      Box(
+        modifier = Modifier
+          .padding(contentPadding)
+          .fillMaxWidth()
+          .background(MaterialTheme.colors.background)
+      ) {
+        ChatItemsList(chatItems)
+      }
     }
   }
 }
 
 @Composable
 fun ChatInfoToolbar(chat: Chat, back: () -> Unit, info: () -> Unit) {
-  Box(Modifier
-    .fillMaxWidth()
-    .height(60.dp),
+  Box(Modifier.height(60.dp),
     contentAlignment = Alignment.CenterStart
   ) {
     Icon(
@@ -109,15 +111,26 @@ fun ChatInfoToolbar(chat: Chat, back: () -> Unit, info: () -> Unit) {
   }
 }
 
+@DelicateCoroutinesApi
+@ExperimentalAnimatedInsets
 @Composable
 fun ChatItemsList(chatItems: List<ChatItem>) {
-  LazyColumn {
+  val listState = rememberLazyListState()
+  val scope = rememberCoroutineScope()
+  LazyColumn(state = listState) {
     items(chatItems) { cItem ->
       ChatItemView(cItem)
     }
+    val len = chatItems.count()
+    if (len > 1) {
+      scope.launch {
+        listState.animateScrollToItem(len - 1)
+      }
+    }
   }
 }
 
+@ExperimentalAnimatedInsets
 @Preview(showBackground = true)
 @Composable
 fun PreviewChatLayout() {

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

@@ -1,51 +1,81 @@
 package chat.simplex.app.views.chat
 
-import androidx.compose.foundation.background
-import androidx.compose.foundation.clickable
+import androidx.compose.foundation.*
 import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.foundation.text.BasicTextField
+import androidx.compose.foundation.text.KeyboardOptions
 import androidx.compose.material.*
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.outlined.ArrowUpward
 import androidx.compose.runtime.*
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.focus.FocusState
+import androidx.compose.ui.focus.onFocusChanged
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.text.input.*
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
-import chat.simplex.app.ui.theme.SimpleXTheme
+import chat.simplex.app.ui.theme.*
 
 @Composable
 fun SendMsgView(sendMessage: (String) -> Unit) {
   var cmd by remember { mutableStateOf("") }
-  Box(
-    modifier = Modifier.fillMaxWidth(),
-    contentAlignment = Alignment.CenterEnd
-  ) {
-    TextField(
-      value = cmd,
-      onValueChange = { cmd = it },
-      modifier = Modifier
-        .height(60.dp)
-        .fillMaxWidth()
-        .padding(end = 40.dp)
-        .background(MaterialTheme.colors.background)
-    )
-    val tint = if (cmd.isNotEmpty()) MaterialTheme.colors.primary else Color.Gray
-    Icon(
-      Icons.Outlined.ArrowUpward,
-      "Send Message",
-      tint = tint,
-      modifier = Modifier
-        .width(40.dp)
-        .clickable {
-          sendMessage(cmd)
-          cmd = ""
+  BasicTextField(
+    value = cmd,
+    onValueChange = { cmd = it },
+    textStyle = MaterialTheme.typography.body1.copy(color = MaterialTheme.colors.onBackground),
+    maxLines = 16,
+    keyboardOptions = KeyboardOptions.Default.copy(
+      capitalization = KeyboardCapitalization.Sentences,
+      autoCorrect = true
+    ),
+    modifier = Modifier.padding(8.dp),
+    decorationBox = { innerTextField ->
+      Surface(
+        shape = RoundedCornerShape(18.dp),
+        border = BorderStroke(1.dp, MaterialTheme.colors.secondary)
+      ) {
+        Row(
+          Modifier.background(MaterialTheme.colors.background),
+          verticalAlignment = Alignment.Bottom
+        ) {
+          Box(
+            Modifier
+              .weight(1f)
+              .padding(horizontal = 12.dp)
+              .padding(top = 5.dp)
+              .padding(bottom = 7.dp)
+          ) {
+            innerTextField()
+          }
+          val color = if (cmd.isNotEmpty()) MaterialTheme.colors.primary else Color.Gray
+          Icon(
+            Icons.Outlined.ArrowUpward,
+            "Send Message",
+            tint = Color.White,
+            modifier = Modifier
+              .size(36.dp)
+              .padding(4.dp)
+              .clip(CircleShape)
+              .background(color)
+              .clickable {
+                if (cmd.isNotEmpty()) {
+                  sendMessage(cmd)
+                  cmd = ""
+                }
+              }
+          )
         }
-    )
-  }
+      }
+    }
+  )
 }
 
-@Preview
+@Preview(showBackground = true)
 @Composable
 fun PreviewSendMsgView() {
   SimpleXTheme {

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

@@ -5,7 +5,9 @@ import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.*
 import androidx.compose.material.*
 import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.tooling.preview.Preview
@@ -14,6 +16,7 @@ import chat.simplex.app.model.*
 import chat.simplex.app.ui.theme.HighOrLowlight
 import chat.simplex.app.ui.theme.SimpleXTheme
 import chat.simplex.app.views.helpers.ChatInfoImage
+import kotlinx.datetime.Clock
 
 @Composable
 fun ChatPreviewView(chat: Chat, goToChat: () -> Unit) {
@@ -22,31 +25,44 @@ fun ChatPreviewView(chat: Chat, goToChat: () -> Unit) {
     modifier = Modifier
       .fillMaxWidth()
       .clickable(onClick = goToChat)
-      .height(80.dp)
+      .height(88.dp)
   ) {
     Row(
       modifier = Modifier
         .fillMaxWidth()
-        .padding(horizontal = 14.dp),
+        .padding(vertical = 8.dp)
+        .padding(start = 8.dp)
+        .padding(end = 12.dp),
+      verticalAlignment = Alignment.Top
     ) {
-      Column(verticalArrangement = Arrangement.Center, modifier = Modifier.fillMaxHeight()) {
-        ChatInfoImage(chat, size = 60.dp)
-      }
-      Spacer(modifier = Modifier.width(6.dp))
-      Column(modifier = Modifier.padding(all = 8.dp)) {
-        Row(horizontalArrangement = Arrangement.SpaceBetween, modifier = Modifier.fillMaxWidth()) {
-          Text(chat.chatInfo.chatViewName, fontWeight = FontWeight.Bold)
-          val ts = chat.chatItems.lastOrNull()?.timestampText ?: getTimestampText(chat.chatInfo.createdAt)
-          Text(ts, color = HighOrLowlight, style = MaterialTheme.typography.body2)
-        }
+      ChatInfoImage(chat, size = 72.dp)
+      Column(modifier = Modifier
+        .padding(horizontal = 8.dp)
+        .weight(1F)) {
+        Text(
+          chat.chatInfo.chatViewName,
+          maxLines = 1,
+          overflow = TextOverflow.Ellipsis,
+          style = MaterialTheme.typography.h3,
+          fontWeight = FontWeight.Bold
+        )
         if (chat.chatItems.count() > 0) {
           Text(
             chat.chatItems.last().content.text,
             maxLines = 2,
-            overflow = TextOverflow.Ellipsis,
+            overflow = TextOverflow.Ellipsis
           )
         }
       }
+      val ts = chat.chatItems.lastOrNull()?.timestampText ?: getTimestampText(chat.chatInfo.createdAt)
+      Column(Modifier.fillMaxHeight(),
+        verticalArrangement = Arrangement.Top) {
+        Text(ts,
+          color = HighOrLowlight,
+          style = MaterialTheme.typography.body2
+        )
+        // TODO unread count
+      }
     }
   }
 }
@@ -58,7 +74,12 @@ fun ChatPreviewViewExample() {
     ChatPreviewView(
       chat = Chat(
         chatInfo = ChatInfo.Direct.sampleData,
-        chatItems = listOf(),
+        chatItems = listOf(ChatItem.getSampleData(
+          1,
+          CIDirection.DirectSnd(),
+          Clock.System.now(),
+          "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
+        )),
         chatStats = Chat.ChatStats()
       ),
       goToChat = {}

apps/android/app/src/main/java/chat/simplex/app/views/helpers/ChatInfoImage.kt

@@ -1,6 +1,7 @@
 package chat.simplex.app.views.helpers
 
 import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.material.Icon
 import androidx.compose.material.MaterialTheme
 import androidx.compose.material.icons.Icons
@@ -8,6 +9,8 @@ import androidx.compose.material.icons.filled.AccountCircle
 import androidx.compose.material.icons.filled.SupervisedUserCircle
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.RectangleShape
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
@@ -24,10 +27,7 @@ fun ChatInfoImage(chat: Chat, size: Dp) {
     Icon(icon,
       contentDescription = "Avatar Placeholder",
       tint = MaterialTheme.colors.secondary,
-      modifier = Modifier.fillMaxSize(),
-//        .clip(CircleShape)
-//        .border(1.5.dp, MaterialTheme.colors.secondary, CircleShape)
-//        .background(MaterialTheme.colors.secondary)
+      modifier = Modifier.fillMaxSize()
     )
   }
 }