Pin unlock : best effort for small height

features/lockscreen/impl/src/main/kotlin/io/element/android/features/lockscreen/impl/unlock/PinUnlockView.kt

@@ -17,16 +17,20 @@
 package io.element.android.features.lockscreen.impl.unlock
 
 import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Arrangement.spacedBy
 import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.BoxWithConstraints
 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
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.systemBarsPadding
 import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.Lock
@@ -34,18 +38,20 @@ import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.tooling.preview.PreviewParameter
 import androidx.compose.ui.unit.dp
+import io.element.android.features.lockscreen.impl.R
 import io.element.android.features.lockscreen.impl.pin.model.PinDigit
 import io.element.android.features.lockscreen.impl.pin.model.PinEntry
 import io.element.android.features.lockscreen.impl.unlock.numpad.PinKeypad
-import io.element.android.libraries.designsystem.atomic.pages.HeaderFooterPage
 import io.element.android.libraries.designsystem.preview.ElementPreview
 import io.element.android.libraries.designsystem.preview.PreviewsDayNight
 import io.element.android.libraries.designsystem.theme.components.Icon
 import io.element.android.libraries.designsystem.theme.components.Surface
 import io.element.android.libraries.designsystem.theme.components.Text
+import io.element.android.libraries.designsystem.theme.components.TextButton
 import io.element.android.libraries.theme.ElementTheme
 
 @Composable
@@ -54,31 +60,95 @@ fun PinUnlockView(
     modifier: Modifier = Modifier,
 ) {
     Surface(modifier) {
-        HeaderFooterPage(
+        BoxWithConstraints {
-            header = {
+            val commonModifier = Modifier
+                .fillMaxSize()
+                .systemBarsPadding()
+                .padding(all = 20.dp)
+
+            val header = @Composable {
                 PinUnlockHeader(
                     state = state,
                     modifier = Modifier.padding(top = 60.dp, bottom = 12.dp)
                 )
-            },
-            content = {
-                Box(
-                    modifier = Modifier
-                        .padding(top = 40.dp)
-                        .fillMaxWidth(),
-                ) {
-                    PinKeypad(
-                        onClick = {
-                            state.eventSink(PinUnlockEvents.OnPinKeypadPressed(it))
-                        },
-                        horizontalArrangement = spacedBy(24.dp, Alignment.CenterHorizontally),
-                        verticalArrangement = spacedBy(16.dp, Alignment.CenterVertically),
-                        horizontalAlignment = Alignment.CenterHorizontally,
-                        verticalAlignment = Alignment.CenterVertically,
-                    )
-                }
             }
-        )
+            val footer = @Composable {
+                PinUnlockFooter()
+            }
+            val content = @Composable {
+                PinKeypad(
+                    onClick = {
+                        state.eventSink(PinUnlockEvents.OnPinKeypadPressed(it))
+                    },
+                    horizontalArrangement = spacedBy(24.dp, Alignment.CenterHorizontally),
+                    verticalArrangement = spacedBy(16.dp, Alignment.CenterVertically),
+                    horizontalAlignment = Alignment.CenterHorizontally,
+                    verticalAlignment = Alignment.CenterVertically,
+                )
+            }
+            if (maxHeight < 600.dp) {
+                PinUnlockCompactView(
+                    header = header,
+                    footer = footer,
+                    content = content,
+                    modifier = commonModifier,
+                )
+            } else {
+                PinUnlockExpandedView(
+                    header = header,
+                    footer = footer,
+                    content = content,
+                    modifier = commonModifier,
+                )
+            }
+        }
+    }
+}
+
+@Composable
+fun PinUnlockCompactView(
+    modifier: Modifier = Modifier,
+    header: @Composable () -> Unit,
+    footer: @Composable () -> Unit,
+    content: @Composable () -> Unit,
+) {
+    Row(modifier = modifier) {
+        Column(Modifier.weight(1f)) {
+            header()
+            Spacer(modifier = Modifier.height(24.dp))
+            footer()
+        }
+        Box(
+            modifier = Modifier
+                .weight(1f)
+                .fillMaxHeight(),
+            contentAlignment = Alignment.Center,
+        ) {
+            content()
+        }
+    }
+}
+
+@Composable
+fun PinUnlockExpandedView(
+    modifier: Modifier = Modifier,
+    header: @Composable () -> Unit,
+    footer: @Composable () -> Unit,
+    content: @Composable () -> Unit,
+) {
+    Column(
+        modifier = modifier,
+    ) {
+        header()
+        Box(
+            modifier = Modifier
+                .weight(1f)
+                .fillMaxWidth()
+                .padding(top = 40.dp),
+        ) {
+            content()
+        }
+        footer()
     }
 }
 
@@ -146,6 +216,16 @@ private fun PinUnlockHeader(
     }
 }
 
+@Composable
+private fun PinUnlockFooter(
+    modifier: Modifier = Modifier,
+) {
+    Row(modifier.fillMaxWidth(), horizontalArrangement = Arrangement.SpaceAround) {
+        TextButton(text = "Use biometric", onClick = { })
+        TextButton(text = stringResource(id = R.string.screen_app_lock_forgot_pin), onClick = { })
+    }
+}
+
 @Composable
 @PreviewsDayNight
 internal fun PinUnlockViewPreview(@PreviewParameter(PinUnlockStateProvider::class) state: PinUnlockState) {