initial chat list styling (#332)

apps/android/app/build.gradle

@@ -69,6 +69,7 @@ dependencies {
     implementation 'androidx.activity:activity-compose:1.3.1'
     implementation 'org.jetbrains.kotlinx:kotlinx-datetime:0.3.2'
     implementation 'org.jetbrains.kotlinx:kotlinx-serialization-json:1.3.2'
+    implementation "androidx.compose.material:material-icons-extended:$compose_version"
     testImplementation 'junit:junit:4.13.2'
     androidTestImplementation 'androidx.test.ext:junit:1.1.3'
     androidTestImplementation 'androidx.test.espresso:espresso-core:3.4.0'

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

@@ -5,4 +5,5 @@ import androidx.compose.ui.graphics.Color
 val Purple200 = Color(0xFFBB86FC)
 val Purple500 = Color(0xFF6200EE)
 val Purple700 = Color(0xFF3700B3)
-val Teal200 = Color(0xFF03DAC5)
+val Teal200 = Color(0xFF03DAC5)
+val Gray = Color(0x22222222)

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

@@ -9,14 +9,15 @@ import androidx.compose.runtime.Composable
 private val DarkColorPalette = darkColors(
   primary = Purple200,
   primaryVariant = Purple700,
-  secondary = Teal200
+  secondary = Teal200,
+  secondaryVariant = Gray
 )
 
 private val LightColorPalette = lightColors(
   primary = Purple500,
   primaryVariant = Purple700,
-  secondary = Teal200
-
+  secondary = Teal200,
+  secondaryVariant = Gray
   /* Other default colors to override
     background = Color.White,
     surface = Color.White,

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

@@ -1,7 +1,6 @@
 package chat.simplex.app.views.chatlist
 
-import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.*
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.items
 import androidx.compose.material.Button
@@ -15,55 +14,81 @@ import androidx.compose.ui.unit.dp
 import androidx.navigation.NavController
 import chat.simplex.app.Pages
 import chat.simplex.app.model.*
-import chat.simplex.app.ui.theme.SimpleXTheme
-import chat.simplex.app.views.TerminalView
-import chat.simplex.app.views.chat.SendMsgView
 import kotlinx.coroutines.Dispatchers
 import kotlinx.coroutines.GlobalScope
 import kotlinx.coroutines.launch
 import kotlinx.coroutines.withContext
+import androidx.compose.material.Icon
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.outlined.*
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.text.font.FontWeight
 
 @Composable
 fun ChatListView(chatModel: ChatModel, navController: NavController) {
-  Column(modifier = Modifier.padding(all = 8.dp)) {
-    ChatListToolbar()
-    Button (onClick = { navController.navigate(Pages.Terminal.route) }) {
-      Text("Terminal")
+    Column(modifier = Modifier.padding(vertical = 8.dp).fillMaxWidth()) {
+      ChatListToolbar()
+      ChatList(chatModel, navController)
+      Button(
+        onClick = { navController.navigate(Pages.Terminal.route) },
+        modifier = Modifier.padding(14.dp)
+      ) {
+        Text("Terminal")
+      }
     }
-    ChatList(chatModel, navController)
-  }
 }
 
 @Composable
 fun ChatListToolbar() {
-  Text("ChatListToolbar")
+  Row(
+    horizontalArrangement = Arrangement.SpaceBetween,
+    verticalAlignment = Alignment.CenterVertically,
+    modifier = Modifier
+      .fillMaxWidth()
+      .height(40.dp)) {
+    Icon(
+      Icons.Outlined.Settings,
+      "Settings Cog",
+      modifier = Modifier.padding(horizontal = 10.dp)
+    )
+    Text("Your chats", fontWeight = FontWeight.Bold, modifier = Modifier.padding(5.dp))
+    Icon(
+      Icons.Outlined.PersonAdd,
+      "Add Contact",
+      modifier = Modifier.padding(horizontal = 10.dp)
+    )
+  }
 }
 
-@Composable
-fun ChatList(chatModel: ChatModel, navController: NavController) {
-  LazyColumn {
-    items(chatModel.chats) { chat ->
-      Button(onClick = {
-        GlobalScope.launch {
-          withContext(Dispatchers.Main) {
-            val cInfo = chat.chatInfo
-            val chat = chatModel.controller.apiGetChat(cInfo.chatType, cInfo.apiId)
-            if (chat != null ) {
-              chatModel.chatId = mutableStateOf(cInfo.id)
-              chatModel.chatItems = chat.chatItems.toMutableStateList()
-              navController.navigate(Pages.Chat.route)
-            } else {
-              // TODO show error? or will apiGetChat show it
-            }
-          }
-        }
-      }) {
-        ChatPreviewView(chat)
+
+fun goToChat(chat: Chat, chatModel: ChatModel, navController: NavController) {
+  GlobalScope.launch {
+    withContext(Dispatchers.Main) {
+      val cInfo = chat.chatInfo
+      val chat = chatModel.controller.apiGetChat(cInfo.chatType, cInfo.apiId)
+      if (chat != null ) {
+        chatModel.chatId = mutableStateOf(cInfo.id)
+        chatModel.chatItems = chat.chatItems.toMutableStateList()
+        navController.navigate(Pages.Chat.route)
+      } else {
+        // TODO show error? or will apiGetChat show it
       }
     }
   }
 }
 
+@Composable
+fun ChatList(chatModel: ChatModel, navController: NavController) {
+  LazyColumn(
+    modifier = Modifier.fillMaxWidth()
+  ) {
+    items(chatModel.chats) { chat ->
+      ChatPreviewView(chat) {goToChat(chat, chatModel, navController)}
+    }
+  }
+}
+
+
 //@Preview
 //@Composable
 //fun PreviewSendMsgView() {

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

@@ -1,34 +1,71 @@
 package chat.simplex.app.views.chatlist
 
+import androidx.compose.foundation.BorderStroke
+import androidx.compose.foundation.border
+import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.material.MaterialTheme
+import androidx.compose.material.Surface
 import androidx.compose.material.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import chat.simplex.app.model.*
+import androidx.compose.material.Icon
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Person
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.text.font.*
 import chat.simplex.app.ui.theme.SimpleXTheme
 
 @Composable
-fun ChatPreviewView(chat: Chat) {
-  Column(modifier = Modifier.padding(all = 8.dp)) {
-    Text(chat.chatInfo.chatViewName)
-    if (chat.chatItems.count() > 0) {
-      Text(chat.chatItems.last().content.text)
+fun ChatPreviewView(chat: Chat, goToChat: () -> Unit) {
+  Surface(
+    border=BorderStroke(0.5.dp, MaterialTheme.colors.secondaryVariant),
+    modifier= Modifier
+      .fillMaxWidth()
+      .clickable(onClick = goToChat)
+
+  ) {
+    Row(
+      modifier = Modifier.fillMaxWidth().padding(horizontal = 14.dp),
+      verticalAlignment = Alignment.CenterVertically
+    ) {
+
+      Icon(
+        Icons.Filled.Person,
+        contentDescription = "Avatar Placeholder",
+        modifier = Modifier
+          .size(30.dp)
+          .clip(CircleShape)
+          .border(1.5.dp, MaterialTheme.colors.secondary, CircleShape)
+      )
+
+      Spacer(modifier = Modifier.width(6.dp))
+      Column(modifier = Modifier.padding(all = 8.dp)) {
+        Text(chat.chatInfo.chatViewName, fontWeight = FontWeight.Bold)
+        if (chat.chatItems.count() > 0) {
+          Text(chat.chatItems.last().content.text)
+        }
+      }
     }
   }
 }
 
 @Preview
 @Composable
-fun ChatPreviewView() {
+fun ChatPreviewViewExample() {
   SimpleXTheme {
     ChatPreviewView(
       chat = Chat(
         chatInfo = ChatInfo.Direct.sampleData,
         chatItems = listOf(),
         chatStats = Chat.ChatStats()
-      )
+      ),
+      goToChat = {}
     )
   }
 }