show date on the same line as the message if space allows (#362)

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

@@ -10,6 +10,7 @@ import androidx.activity.viewModels
 import androidx.compose.foundation.layout.Box
 import androidx.compose.material.ExperimentalMaterialApi
 import androidx.compose.runtime.Composable
+import androidx.compose.ui.text.ExperimentalTextApi
 import androidx.lifecycle.AndroidViewModel
 import androidx.navigation.*
 import androidx.navigation.compose.*
@@ -28,6 +29,7 @@ import com.google.accompanist.permissions.ExperimentalPermissionsApi
 import kotlinx.coroutines.DelicateCoroutinesApi
 import kotlinx.serialization.decodeFromString
 
+@ExperimentalTextApi
 @DelicateCoroutinesApi
 @ExperimentalAnimatedInsets
 @ExperimentalPermissionsApi
@@ -64,6 +66,7 @@ fun MainPage(chatModel: ChatModel, nav: NavController) {
   }
 }
 
+@ExperimentalTextApi
 @ExperimentalAnimatedInsets
 @DelicateCoroutinesApi
 @ExperimentalPermissionsApi

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

@@ -590,7 +590,7 @@ sealed class Format {
   @Serializable @SerialName("strikeThrough") class StrikeThrough: Format()
   @Serializable @SerialName("snippet") class Snippet: Format()
   @Serializable @SerialName("secret") class Secret: Format()
-  @Serializable @SerialName("colored") class Colored(val formatColor: FormatColor): Format()
+  @Serializable @SerialName("colored") class Colored(val color: FormatColor): Format()
   @Serializable @SerialName("uri") class Uri: Format()
   @Serializable @SerialName("email") class Email: Format()
   @Serializable @SerialName("phone") class Phone: Format()
@@ -602,7 +602,7 @@ sealed class Format {
     is StrikeThrough -> SpanStyle(textDecoration = TextDecoration.LineThrough)
     is Snippet -> SpanStyle(fontFamily = FontFamily.Monospace)
     is Secret -> SpanStyle(color = HighOrLowlight, background = HighOrLowlight)
-    is Colored -> SpanStyle(color = this.formatColor.uiColor)
+    is Colored -> SpanStyle(color = this.color.uiColor)
     is Uri -> linkStyle
     is Email -> linkStyle
     is Phone -> linkStyle

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

@@ -4,6 +4,7 @@ import androidx.compose.material.MaterialTheme
 import androidx.compose.material.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.sp
 import chat.simplex.app.model.CIDirection
 import chat.simplex.app.model.ChatItem
 import chat.simplex.app.ui.theme.HighOrLowlight
@@ -14,7 +15,7 @@ fun CIMetaView(chatItem: ChatItem) {
   Text(
     chatItem.timestampText,
     color = HighOrLowlight,
-    style = MaterialTheme.typography.body2
+    fontSize = 14.sp
   )
 }
 

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

@@ -5,6 +5,7 @@ import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.foundation.text.ClickableText
 import androidx.compose.material.*
 import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.platform.UriHandler
@@ -14,12 +15,13 @@ import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import chat.simplex.app.model.CIDirection
 import chat.simplex.app.model.ChatItem
+import chat.simplex.app.ui.theme.LightGray
 import chat.simplex.app.ui.theme.SimpleXTheme
 import kotlinx.datetime.Clock
 
 // TODO move to theme
 val SentColorLight = Color(0x1E45B8FF)
-val ReceivedColorLight = Color(0x1EF1F0F5)
+val ReceivedColorLight = Color(0x1EB1B0B5)
 
 @ExperimentalTextApi
 @Composable
@@ -32,7 +34,7 @@ fun TextItemView(chatItem: ChatItem, uriHandler: UriHandler? = null) {
     Box(
       modifier = Modifier.padding(vertical = 6.dp, horizontal = 12.dp)
     ) {
-      Column {
+      Box(contentAlignment = Alignment.BottomEnd) {
         MarkdownText(chatItem, uriHandler = uriHandler)
         CIMetaView(chatItem)
       }
@@ -40,18 +42,24 @@ fun TextItemView(chatItem: ChatItem, uriHandler: UriHandler? = null) {
   }
 }
 
+val reserveTimestampStyle = SpanStyle(color = Color.Transparent)
+
 @ExperimentalTextApi
 @Composable
 fun MarkdownText (
   chatItem: ChatItem,
-  style: TextStyle = MaterialTheme.typography.body1,
+  style: TextStyle = MaterialTheme.typography.body1.copy(color = MaterialTheme.colors.onBackground),
   maxLines: Int = Int.MAX_VALUE,
   overflow: TextOverflow = TextOverflow.Clip,
   uriHandler: UriHandler? = null,
   modifier: Modifier = Modifier
 ) {
   if (chatItem.formattedText == null) {
-    Text(chatItem.content.text, style = style, modifier = modifier, maxLines = maxLines, overflow = overflow)
+    val annotatedText = buildAnnotatedString {
+      append(chatItem.content.text)
+      withStyle(reserveTimestampStyle) { append("  ${chatItem.timestampText}") }
+    }
+    Text(annotatedText, style = style, modifier = modifier, maxLines = maxLines, overflow = overflow)
   } else {
     val annotatedText = buildAnnotatedString {
       for (ft in chatItem.formattedText) {
@@ -67,6 +75,7 @@ fun MarkdownText (
           }
         }
       }
+      withStyle(reserveTimestampStyle) { append("  ${chatItem.timestampText}") }
     }
     if (uriHandler != null) {
       ClickableText(annotatedText, style = style, modifier = modifier, maxLines = maxLines, overflow = overflow,