feat(labs): mockup for new login

Signed-off-by: Infi <infi@infi.sh>

app/src/main/java/chat/revolt/screens/labs/LabsHomeScreen.kt

@@ -141,6 +141,15 @@ fun LabsHomeScreen(navController: NavController) {
                             }
                         )
                         HorizontalDivider()
+                        ListItem(
+                            headlineContent = {
+                                Text("New Login Experience")
+                            },
+                            modifier = Modifier.clickable {
+                                navController.navigate("mockups/newlogin")
+                            }
+                        )
+                        HorizontalDivider()
                     }
                 }
 

app/src/main/java/chat/revolt/screens/labs/LabsRootScreen.kt

@@ -13,6 +13,7 @@ import androidx.navigation.compose.composable
 import androidx.navigation.compose.rememberNavController
 import chat.revolt.api.settings.FeatureFlags
 import chat.revolt.screens.labs.ui.mockups.CallScreenMockup
+import chat.revolt.screens.labs.ui.mockups.NewLoginExperienceMockup
 import chat.revolt.screens.labs.ui.sandbox.CryptographicAgeVerificationSandbox
 import chat.revolt.screens.labs.ui.sandbox.JBMSandbox
 import chat.revolt.screens.labs.ui.sandbox.SettingsDslSandbox
@@ -65,6 +66,9 @@ fun LabsRootScreen(topNav: NavController) {
                 composable("mockups/call") {
                     CallScreenMockup()
                 }
+                composable("mockups/newlogin") {
+                    NewLoginExperienceMockup(labsNav)
+                }
 
                 composable("sandboxes/cryptoageverif") {
                     CryptographicAgeVerificationSandbox(labsNav)

app/src/main/java/chat/revolt/screens/labs/ui/mockups/NewLoginExperienceMockup.kt

@@ -0,0 +1,158 @@
+package chat.revolt.screens.labs.ui.mockups
+
+import androidx.compose.animation.core.tween
+import androidx.compose.animation.slideIn
+import androidx.compose.animation.slideOut
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxHeight
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.offset
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.widthIn
+import androidx.compose.material3.Button
+import androidx.compose.material3.ExperimentalMaterial3ExpressiveApi
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
+import androidx.compose.material3.TextButton
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.scale
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.ColorFilter
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.unit.IntOffset
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import androidx.navigation.NavController
+import androidx.navigation.compose.NavHost
+import androidx.navigation.compose.composable
+import androidx.navigation.compose.rememberNavController
+import chat.revolt.R
+import chat.revolt.api.settings.LoadedSettings
+import chat.revolt.ui.theme.Theme
+
+@OptIn(ExperimentalMaterial3ExpressiveApi::class)
+@Composable
+fun NewLoginExperienceMockup(navController: NavController) {
+    val loginNav = rememberNavController()
+
+    NavHost(
+        navController = loginNav,
+        startDestination = "greet",
+        enterTransition = {
+            slideIn(
+                tween(300)
+            ) { IntOffset(it.width, 0) }
+        },
+        exitTransition = {
+            slideOut(
+                tween(300)
+            ) { IntOffset(-it.width, 0) }
+        },
+        popEnterTransition = {
+            slideIn(
+                tween(300)
+            ) { IntOffset(-it.width, 0) }
+        },
+        popExitTransition = {
+            slideOut(
+                tween(300)
+            ) { IntOffset(it.width, 0) }
+        }
+    ) {
+        composable("greet") {
+            Box {
+                Image(
+                    painter = painterResource(R.drawable.login_bg),
+                    modifier = Modifier
+                        .scale(3f)
+                        .offset(y = 32.dp)
+                        .align(Alignment.TopCenter),
+                    colorFilter = ColorFilter.tint(MaterialTheme.colorScheme.tertiaryContainer),
+                    contentDescription = null
+                )
+                Column(
+                    horizontalAlignment = Alignment.CenterHorizontally,
+                    verticalArrangement = Arrangement.SpaceEvenly,
+                    modifier = Modifier.fillMaxSize()
+                ) {
+                    Column(
+                        horizontalAlignment = Alignment.CenterHorizontally,
+                        verticalArrangement = Arrangement.Center,
+                        modifier = Modifier
+                            .weight(0.5f)
+                            .padding(horizontal = 16.dp)
+                    ) {
+                        Spacer(modifier = Modifier.height(64.dp))
+                        Image(
+                            painter = painterResource(R.drawable.revolt_logo_wide),
+                            contentDescription = null,
+                            colorFilter = if (LoadedSettings.theme == Theme.M3Dynamic) ColorFilter.tint(
+                                MaterialTheme.colorScheme.onBackground
+                            ) else null,
+                            modifier = Modifier.fillMaxWidth(0.5f)
+                        )
+                        Spacer(modifier = Modifier.height(64.dp))
+                        Text(
+                            "Find your community",
+                            style = MaterialTheme.typography.headlineMedium,
+                            textAlign = TextAlign.Center
+                        )
+                        Spacer(modifier = Modifier.height(16.dp))
+                        Text(
+                            "Revolt is the chat app that’s truly built with you in mind.",
+                            style = MaterialTheme.typography.bodyLargeEmphasized,
+                            fontSize = 18.sp,
+                            textAlign = TextAlign.Center
+                        )
+                    }
+                    Column(
+                        horizontalAlignment = Alignment.CenterHorizontally,
+                        verticalArrangement = Arrangement.spacedBy(
+                            8.dp,
+                            alignment = Alignment.Bottom
+                        ),
+                        modifier = Modifier
+                            .weight(0.5f)
+                            .padding(horizontal = 16.dp)
+                            .widthIn(max = 150.dp)
+                    ) {
+                        Button(
+                            onClick = { loginNav.navigate("login") },
+                            modifier = Modifier.fillMaxWidth()
+                        ) {
+                            Text("Log In")
+                        }
+                        TextButton(
+                            onClick = { navController.popBackStack() },
+                            modifier = Modifier.fillMaxWidth()
+                        ) {
+                            Text("Sign Up")
+                        }
+                        Spacer(modifier = Modifier.fillMaxHeight(0.25f))
+                    }
+                }
+            }
+        }
+        composable("login") {
+            Box(
+                Modifier
+                    .fillMaxSize()
+                    .background(Color.Blue), Alignment.Center
+            ) {
+                Button(onClick = { loginNav.navigate("greet") }) {
+                    Text("Greetings!")
+                }
+            }
+        }
+    }
+}