Android compose navigation (#316)

* initial rough ideas

* refactor and put in high level navigation

* refactor

Co-authored-by: Evgeny Poberezkin <2769109+epoberezkin@users.noreply.github.com>

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

@@ -8,11 +8,9 @@ import androidx.activity.viewModels
 import androidx.compose.runtime.Composable
 import chat.simplex.app.ui.theme.SimpleXTheme
 import androidx.lifecycle.AndroidViewModel
-import chat.simplex.app.model.*
-import chat.simplex.app.views.TerminalView
-import kotlinx.serialization.*
-import kotlinx.serialization.json.*
-import kotlinx.serialization.modules.*
+import androidx.navigation.compose.NavHost
+import androidx.navigation.compose.composable
+import androidx.navigation.compose.rememberNavController
 
 
 class MainActivity: ComponentActivity() {
@@ -21,7 +19,7 @@ class MainActivity: ComponentActivity() {
     super.onCreate(savedInstanceState)
     setContent {
       SimpleXTheme {
-        MainPage(viewModel)
+        Navigation(viewModel = viewModel)
       }
     }
   }
@@ -32,6 +30,21 @@ class SimplexViewModel(application: Application) : AndroidViewModel(application)
 }
 
 @Composable
-fun MainPage(vm: SimplexViewModel) {
-  TerminalView(vm.chatModel)
+fun Navigation(viewModel: SimplexViewModel) {
+  val navController = rememberNavController()
+
+  NavHost(navController=navController, startDestination=Pages.Home.route){
+    composable(route=Pages.Home.route){
+      MainPage(vm = viewModel)
+    }
+//    composable(route=Pages.Welcome.route){
+//      WelcomeView(vm.)
+//    }
+  }
+}
+
+sealed class Pages(val route: String) {
+  object Home : Pages("home")
+  object Terminal : Pages("terminal")
+  object Welcome : Pages("welcome")
 }

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

@@ -0,0 +1,10 @@
+package chat.simplex.app
+
+import androidx.compose.runtime.Composable
+import chat.simplex.app.views.TerminalPage
+
+@Composable
+fun MainPage(vm: SimplexViewModel) {
+
+  TerminalPage(vm.chatModel)
+}

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

@@ -3,20 +3,41 @@ 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.text.ClickableText
 import androidx.compose.material.Text
+import androidx.compose.material.Button
 import androidx.compose.runtime.Composable
+import androidx.compose.ui.text.AnnotatedString
 import androidx.compose.ui.tooling.preview.Preview
-import chat.simplex.app.model.CC
-import chat.simplex.app.model.ChatModel
-import chat.simplex.app.model.TerminalItem
+import androidx.navigation.*
+import androidx.navigation.compose.NavHost
+import androidx.navigation.compose.composable
+import androidx.navigation.compose.rememberNavController
+import chat.simplex.app.model.*
 import chat.simplex.app.ui.theme.SimpleXTheme
 import chat.simplex.app.views.chat.SendMsgView
 
 
 @Composable
-fun TerminalView(chatModel: ChatModel) {
+fun TerminalPage(chatModel: ChatModel) {
+  val navController = rememberNavController()
+  NavHost(navController = navController, startDestination = "terminalView"){
+    composable("terminalView") { TerminalView(chatModel, navController) }
+    composable(
+      "details" + "/{_details}",
+      arguments=listOf(
+        navArgument("_details"){
+          type = NavType.StringType
+        }
+      )
+    ) { entry -> DetailView( entry.arguments?.getString("_details"), navController)}
+  }
+}
+
+@Composable
+fun TerminalView(chatModel: ChatModel, navController: NavController) {
   Column {
-    TerminalLog(chatModel.terminalItems)
+    TerminalLog(chatModel.terminalItems, navController)
     SendMsgView(sendMessage = { cmd ->
       chatModel.controller.sendCmd(CC.Console(cmd))
     })
@@ -24,18 +45,26 @@ fun TerminalView(chatModel: ChatModel) {
 }
 
 @Composable
-fun TerminalLog(terminalItems: List<TerminalItem>) {
+fun TerminalLog(terminalItems: List<TerminalItem>, navController: NavController) {
   LazyColumn {
     items(terminalItems) { item ->
-      Text(item.label)
+      ClickableText(
+        AnnotatedString(item.label),
+        onClick={navController.navigate("details/${item.details}")}
+      )
     }
   }
 }
 
-@Preview
 @Composable
-fun PreviewSendMsgView() {
-  SimpleXTheme {
-    TerminalView(chatModel = ChatModel.sampleData)
+fun DetailView(details: String?, navController: NavController){
+  Column {
+    Text("$details")
+
+    Button(
+      onClick={navController.popBackStack()}
+    )
+    {Text("Back")}
   }
 }
+

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

@@ -0,0 +1,48 @@
+package chat.simplex.app.views
+
+import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.Image
+import androidx.compose.ui.res.painterResource
+import androidx.compose.runtime.*
+import androidx.compose.runtime.Composable
+import chat.simplex.app.R
+import androidx.compose.material.Text
+import androidx.compose.material.TextField
+import androidx.compose.material.Button
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.Modifier
+import androidx.navigation.NavController
+
+@Composable
+fun WelcomeView(createUser: (data: String) -> String, navController: NavController) {
+  Column {
+    Image(
+      painter=painterResource(R.drawable.logo), contentDescription = "Simplex Logo",
+    )
+    Text("You control your chat!")
+    Text("The messaging and application platform protecting your privacy and security.")
+    Spacer(Modifier.height(8.dp))
+    Text("We don't store any of your contacts or messages (once delivered) on the servers.")
+    Spacer(Modifier.height(24.dp))
+    CreateProfilePanel(createUser, navController)
+  }
+}
+
+@Composable
+fun CreateProfilePanel(createUser: (data: String) -> String, navController: NavController) {
+  var displayName by remember { mutableStateOf("") }
+  var fullName by remember { mutableStateOf("") }
+
+  Column {
+    Text("Create profile")
+    Text("Your profile is stored on your device and shared only with your contacts.")
+    Text("Display Name")
+    TextField(value = displayName, onValueChange = { displayName = it }, modifier = Modifier.height(30.dp))
+    Text("Full Name (Optional)")
+    TextField(value = fullName, onValueChange = { fullName = it }, modifier = Modifier.height(30.dp))
+    Button(onClick={
+      createUser("{\"displayName\": $displayName, \"fullName\": $fullName}")
+      navController.navigate("home") { popUpTo("home") { inclusive = true }}
+    }) { Text("Create")}
+  }
+}

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

@@ -0,0 +1,61 @@
+package chat.simplex.app.views.usersettings
+
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.height
+import androidx.compose.material.*
+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.Profile
+
+//@Preview(showBackground = true)
+@Composable
+fun SettingsView(profile: Profile) {
+    Column() {
+        Text("Your Settings")
+        Spacer(Modifier.height(4.dp))
+        Text("YOU", style= MaterialTheme.typography.h4)
+        Button(
+            onClick = { println(profile.displayName) }
+        ) {
+            Text(profile.displayName)
+        }
+        Button(
+            onClick = { println(profile.hashCode()) }
+        ) {
+            Text("Your SimpleX contact address",  style= MaterialTheme.typography.body1)
+        }
+        Spacer(Modifier.height(10.dp))
+        Text("HELP", style= MaterialTheme.typography.h4)
+        Button(
+            onClick = { println("navigate to help") }
+        ) {
+            Text("How to use SimpleX Chat")
+        }
+        Button(
+            onClick = { println("start help chat") }
+        ) {
+            Text("Get help & advice via chat")
+        }
+        Button(
+            onClick = { println("navigate to email") }
+        ) {
+            Text("Ask questions via email")
+        }
+        Spacer(Modifier.height(10.dp))
+        Text("DEVELOP", style= MaterialTheme.typography.h4)
+        Button(
+            onClick = { println("navigate to console") }
+        ) {
+            Text("Chat console")
+        }
+        Button(
+            onClick = { println("navigate to github") }
+        ) {
+            Text("Install SimpleX for terminal")
+        }
+    }
+}
+