current screen as String instead of int

app/build.gradle.kts

@@ -48,7 +48,8 @@ dependencies {
     implementation(libs.androidx.ui)
     implementation(libs.androidx.ui.graphics)
     implementation(libs.androidx.ui.tooling.preview)
-    implementation(libs.androidx.material3)
+    //implementation(libs.androidx.material3)
+    implementation("androidx.compose.material3:material3:1.4.0-alpha15")
     testImplementation(libs.junit)
     androidTestImplementation(libs.androidx.junit)
     androidTestImplementation(libs.androidx.espresso.core)

app/src/main/java/de/lelehier/keeper/screens/home_screen.kt

@@ -1,7 +1,6 @@
 package de.lelehier.keeper.screens
 
 import KeeperLargeFontFamily
-import android.print.PrintAttributes.Margins
 import android.util.Patterns
 import androidx.compose.animation.AnimatedContent
 import androidx.compose.animation.AnimatedContentTransitionScope
@@ -15,9 +14,15 @@ import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.imePadding
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.layout.widthIn
 import androidx.compose.foundation.text.KeyboardOptions
 import androidx.compose.material3.Button
 import androidx.compose.material3.MaterialTheme
@@ -41,11 +46,12 @@ import androidx.compose.ui.text.input.KeyboardType
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.ui.tooling.preview.Preview
 
 @Composable
 fun HomeScreen(paddingValues: PaddingValues) {
-    var currentScreen by rememberSaveable { mutableIntStateOf(0) }
+    var currentScreen by rememberSaveable { mutableStateOf("serverDialog") }
-    var nextScreen by rememberSaveable { mutableIntStateOf(1) }
     var serverURL by rememberSaveable { mutableStateOf("") }
     var username by rememberSaveable { mutableStateOf("") }
     var password by rememberSaveable { mutableStateOf("") }
@@ -55,7 +61,8 @@ fun HomeScreen(paddingValues: PaddingValues) {
         modifier = Modifier
             .padding(paddingValues)
             .fillMaxSize()
-            .imePadding(),
+            .imePadding()
+            .padding(all = 56.dp),
         horizontalAlignment = Alignment.CenterHorizontally,
         verticalArrangement = Arrangement.Center) {
         Greeting(serverURL, currentScreen);
@@ -68,28 +75,53 @@ fun HomeScreen(paddingValues: PaddingValues) {
             },
 
         ) { targetState -> when(targetState) {
-            0 -> ServerDialog(serverURL, {newServerURL -> serverURL = newServerURL })
+            "serverDialog" -> ServerDialog(serverURL, {newServerURL -> serverURL = newServerURL })
-            1 -> PasswordDialog(username, password, {newUsername ->  username = newUsername}, {newPassword -> password = newPassword  })
+            "passwordDialog" -> PasswordDialog(username, password, {newUsername ->  username = newUsername}, {newPassword -> password = newPassword  })
+            "apiDialog" -> ApiDialog(apiKey) {newApiKey ->  apiKey = newApiKey}
         }
         }
 
-        Row {
+        Row (
-            AnimatedVisibility(currentScreen == 1) {
+            horizontalArrangement = Arrangement.SpaceBetween
+        ) {
+            AnimatedVisibility(currentScreen == "passwordDialog") {
                 OutlinedButton (
-                    onClick = {currentScreen = nextScreen},
+                    onClick = {currentScreen = "serverDialog"},
                     modifier = Modifier.padding(top = 24.dp)
                 ) {
                     Row() {
-                        Text(text = "Use API Key")
+                        Text(text = "Change Server")
+                    }
+                }
+            }
+            Spacer(modifier = Modifier.width(12.dp))
+            AnimatedVisibility(currentScreen == "passwordDialog") {
+                OutlinedButton (
+                    onClick = {},
+                    modifier = Modifier.padding(top = 24.dp)
+                ) {
+                    Row() {
+                        when(currentScreen) {
+                            "passwordDialog" -> Text(text = "Use API Key")
+                            "apiDialog" -> Text(text = "Use Password")
+                        }
+                    }
                 }
             }
             }
         Button(
-                onClick = {currentScreen = nextScreen},
+            onClick = {when(currentScreen) {
-                modifier = Modifier.padding(top = 24.dp),
+                "serverDialog" -> currentScreen = "passwordDialog"
+                "passwordDialog" -> currentScreen = "LoadingDialog"
+                "apiDialog" -> currentScreen = "LoadingDialog"
+            }},
+            modifier = Modifier.padding(top = 24.dp)
+                .fillMaxWidth()
+                .height(128.dp),
             enabled = when(currentScreen) {
-                    0 -> isValidUrl(serverURL)
+                "serverDialog" -> isValidUrl(serverURL)
-                    1 -> username.isNotEmpty() && password.isNotEmpty()
+                "passwordDialog" -> username.isNotEmpty() && password.isNotEmpty()
+                "apiDialog" -> apiKey.isNotEmpty()
                 else -> false
             },
         ) {
@@ -98,13 +130,12 @@ fun HomeScreen(paddingValues: PaddingValues) {
             }
         }
     }
-    }
 }
 
 @Composable
-fun Greeting(serverURL: String, currentScreen: Int) {
+fun Greeting(serverURL: String, currentScreen: String) {
     Column (horizontalAlignment = Alignment.CenterHorizontally, modifier = Modifier.padding(bottom = 24.dp)) {
-        AnimatedVisibility (currentScreen == 0) {
+        AnimatedVisibility (currentScreen == "serverDialog") {
             Text(
                 text = "Welcome to",
                 style = MaterialTheme.typography.headlineLarge,
@@ -119,7 +150,7 @@ fun Greeting(serverURL: String, currentScreen: Int) {
                 brush = Brush.linearGradient(listOf(MaterialTheme.colorScheme.onPrimaryContainer, MaterialTheme.colorScheme.onSecondaryContainer))),
             textAlign = TextAlign.Center,
         )
-        AnimatedVisibility(currentScreen != 0) {
+        AnimatedVisibility(currentScreen != "serverDialog") {
             Text(
                 text = "@$serverURL",
                 style = MaterialTheme.typography.titleSmall,
@@ -130,11 +161,11 @@ fun Greeting(serverURL: String, currentScreen: Int) {
     }
 }
 
-
 @Composable
 fun ServerDialog(serverURL: String, updateServerURL: (newServerURL: String) -> Unit) {
     var dialogServerURL by remember { mutableStateOf("") }
     OutlinedTextField(
+        modifier = Modifier.fillMaxWidth(),
         label = { Text(text = "Server URL") },
         textStyle = MaterialTheme.typography.bodySmall,
         value = serverURL,
@@ -170,6 +201,7 @@ fun PasswordDialog(username: String, password: String, updateUsername: (newUsern
     var dialogPassword by remember { mutableStateOf("") }
     Column {
         OutlinedTextField(
+            modifier = Modifier.fillMaxWidth(),
             label = { Text(text = "Username") },
             textStyle = MaterialTheme.typography.bodySmall,
             value = username,
@@ -178,6 +210,7 @@ fun PasswordDialog(username: String, password: String, updateUsername: (newUsern
                 updateUsername(dialogUsername)
             });
         OutlinedTextField(
+            modifier = Modifier.fillMaxWidth(),
             label = { Text(text = "Password") },
             textStyle = MaterialTheme.typography.bodySmall,
             value = password,
@@ -189,3 +222,21 @@ fun PasswordDialog(username: String, password: String, updateUsername: (newUsern
 
     }
 }
+
+@Composable
+fun ApiDialog(apiKey: String, updateApiKey: (newApiKey: String) -> Unit) {
+    var dialogApiKey by remember { mutableStateOf("") }
+    Column {
+        OutlinedTextField(
+            modifier = Modifier.fillMaxWidth(),
+            label = { Text(text = "Password") },
+            textStyle = MaterialTheme.typography.bodySmall,
+            value = dialogApiKey,
+            onValueChange = { text ->
+                dialogApiKey = text
+                updateApiKey(dialogApiKey)
+            }
+        )
+
+    }
+}