feat(login2): use responsive layout

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

app/src/main/java/chat/revolt/activities/MainActivity.kt

@@ -513,7 +513,7 @@ fun AppEntrypoint(
                     )
                 }
                 
-                composable("login2/init") { InitScreen(navController) }
+                composable("login2/init") { InitScreen(navController, windowSizeClass) }
 
                 composable("chat",
                     enterTransition = {

app/src/main/java/chat/revolt/screens/login2/InitScreen.kt

@@ -4,8 +4,8 @@ import androidx.compose.foundation.Image
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
 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
@@ -16,23 +16,34 @@ import androidx.compose.material3.Button
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.material3.TextButton
+import androidx.compose.material3.windowsizeclass.WindowHeightSizeClass
+import androidx.compose.material3.windowsizeclass.WindowSizeClass
+import androidx.compose.material3.windowsizeclass.WindowWidthSizeClass
 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.ColorFilter
+import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import androidx.navigation.NavController
+import chat.revolt.BuildConfig
 import chat.revolt.R
+import chat.revolt.api.REVOLT_MARKETING
 import chat.revolt.api.settings.LoadedSettings
+import chat.revolt.components.generic.AnyLink
+import chat.revolt.components.generic.Weblink
 import chat.revolt.ui.theme.Theme
+import com.chuckerteam.chucker.api.Chucker
 
 @Composable
 fun InitScreen(
-    navController: NavController
+    navController: NavController,
+    windowSizeClass: WindowSizeClass
 ) {
     Box {
         Image(
@@ -46,66 +57,125 @@ fun InitScreen(
             ) else null,
             contentDescription = null
         )
-        Column(
+        if (windowSizeClass.widthSizeClass <= WindowWidthSizeClass.Compact) {
-            horizontalAlignment = Alignment.CenterHorizontally,
-            verticalArrangement = Arrangement.SpaceEvenly,
-            modifier = Modifier.fillMaxSize()
-        ) {
             Column(
                 horizontalAlignment = Alignment.CenterHorizontally,
-                verticalArrangement = Arrangement.Center,
+                verticalArrangement = Arrangement.SpaceEvenly,
-                modifier = Modifier
+                modifier = Modifier.fillMaxSize()
-                    .weight(0.5f)
-                    .padding(horizontal = 16.dp)
             ) {
-                Spacer(modifier = Modifier.height(64.dp))
+                Box(Modifier.weight(.5f), contentAlignment = Alignment.Center) {
-                Image(
+                    LeadPart(windowSizeClass = windowSizeClass)
-                    painter = painterResource(R.drawable.revolt_logo_wide),
+                }
-                    contentDescription = null,
+                Box(Modifier.weight(.5f), contentAlignment = Alignment.Center) {
-                    colorFilter = ColorFilter.tint(
+                    LinkPart(windowSizeClass = windowSizeClass)
-                        MaterialTheme.colorScheme.onBackground
+                }
-                    ),
-                    modifier = Modifier.fillMaxWidth(0.5f)
-                )
-                Spacer(modifier = Modifier.height(64.dp))
-                Text(
-                    "Find your community", // FIXME hardcoded string
-                    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.", // FIXME hardcoded string
-                    style = MaterialTheme.typography.bodyLarge,
-                    fontSize = 18.sp,
-                    textAlign = TextAlign.Center
-                )
             }
-            Column(
+        } else {
-                horizontalAlignment = Alignment.CenterHorizontally,
+            Row(
-                verticalArrangement = Arrangement.spacedBy(
+                horizontalArrangement = Arrangement.SpaceEvenly,
-                    8.dp,
+                verticalAlignment = Alignment.CenterVertically,
-                    alignment = Alignment.Bottom
+                modifier = Modifier.fillMaxSize()
-                ),
-                modifier = Modifier
-                    .weight(0.5f)
-                    .padding(horizontal = 16.dp)
-                    .widthIn(max = 150.dp)
             ) {
-                Button(
+                Box(Modifier.weight(.5f), contentAlignment = Alignment.Center) {
-                    onClick = {/* navController.navigate("login2/existing/details") */ },
+                    LeadPart(windowSizeClass = windowSizeClass)
-                    modifier = Modifier.fillMaxWidth()
-                ) {
-                    Text("Log In") // FIXME hardcoded string
                 }
-                TextButton(
+                Box(Modifier.weight(.5f), contentAlignment = Alignment.Center) {
-                    onClick = {/* navController.navigate("login2/new/details") */ },
+                    LinkPart(windowSizeClass = windowSizeClass)
-                    modifier = Modifier.fillMaxWidth()
-                ) {
-                    Text("Sign Up") // FIXME hardcoded string
                 }
-                Spacer(modifier = Modifier.fillMaxHeight(0.25f))
             }
         }
     }
 }
+
+@Composable
+private fun LeadPart(windowSizeClass: WindowSizeClass) {
+    Column(
+        horizontalAlignment = Alignment.CenterHorizontally,
+        verticalArrangement = Arrangement.Center,
+        modifier = Modifier
+            .padding(horizontal = 16.dp)
+    ) {
+        if (windowSizeClass.heightSizeClass >= WindowHeightSizeClass.Compact) {
+            Spacer(Modifier.height(64.dp))
+        }
+        Image(
+            painter = painterResource(R.drawable.revolt_logo_wide),
+            contentDescription = null,
+            colorFilter = ColorFilter.tint(
+                MaterialTheme.colorScheme.onBackground
+            ),
+            modifier = if (windowSizeClass.widthSizeClass <= WindowWidthSizeClass.Compact)
+                Modifier.fillMaxWidth(0.5f) else Modifier.height(32.dp)
+        )
+        Spacer(modifier = Modifier.height(64.dp))
+        Text(
+            "Find your community", // FIXME hardcoded string
+            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.", // FIXME hardcoded string
+            style = MaterialTheme.typography.bodyLarge,
+            fontSize = 18.sp,
+            textAlign = TextAlign.Center
+        )
+    }
+}
+
+@Composable
+private fun LinkPart(windowSizeClass: WindowSizeClass) {
+    val context = LocalContext.current
+
+    Column(
+        horizontalAlignment = Alignment.CenterHorizontally,
+        verticalArrangement = Arrangement.spacedBy(
+            8.dp,
+            alignment = Alignment.Bottom
+        ),
+        modifier = Modifier
+            .padding(horizontal = 16.dp)
+            .fillMaxWidth()
+    ) {
+        Column(Modifier.widthIn(max = 150.dp)) {
+            Button(
+                onClick = {/* navController.navigate("login2/existing/details") */ },
+                modifier = Modifier.fillMaxWidth()
+            ) {
+                Text("Log In") // FIXME hardcoded string
+            }
+            TextButton(
+                onClick = {/* navController.navigate("login2/new/details") */ },
+                modifier = Modifier.fillMaxWidth()
+            ) {
+                Text("Sign Up") // FIXME hardcoded string
+            }
+        }
+
+        Spacer(modifier = Modifier.height(16.dp))
+
+        Weblink(
+            text = stringResource(R.string.terms_of_service),
+            url = "$REVOLT_MARKETING/terms"
+        )
+        Weblink(
+            text = stringResource(R.string.privacy_policy),
+            url = "$REVOLT_MARKETING/privacy"
+        )
+        Weblink(
+            text = stringResource(R.string.community_guidelines),
+            url = "$REVOLT_MARKETING/aup"
+        )
+
+        if (BuildConfig.DEBUG) {
+            AnyLink(
+                text = "Debug: Chucker",
+                action = {
+                    Chucker.getLaunchIntent(context).apply {
+                        context.startActivity(this)
+                    }
+                }
+            )
+        }
+    }
+}