Secure backup and sign out: add TopBar with Back button.

features/logout/impl/src/main/kotlin/io/element/android/features/logout/impl/LogoutNode.kt

@@ -58,6 +58,7 @@ class LogoutNode @AssistedInject constructor(
             state = state,
             onChangeRecoveryKeyClicked = ::onChangeRecoveryKeyClicked,
             onSuccessLogout = { onSuccessLogout(activity, it) },
+            onBackClicked = ::navigateUp,
             modifier = modifier,
         )
     }

features/logout/impl/src/main/kotlin/io/element/android/features/logout/impl/LogoutView.kt

@@ -20,6 +20,7 @@ import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.ui.Alignment
@@ -32,6 +33,7 @@ import io.element.android.libraries.designsystem.atomic.molecules.ButtonColumnMo
 import io.element.android.libraries.designsystem.atomic.molecules.IconTitleSubtitleMolecule
 import io.element.android.libraries.designsystem.atomic.pages.HeaderFooterPage
 import io.element.android.libraries.designsystem.components.ProgressDialog
+import io.element.android.libraries.designsystem.components.button.BackButton
 import io.element.android.libraries.designsystem.components.dialogs.ConfirmationDialog
 import io.element.android.libraries.designsystem.preview.ElementPreview
 import io.element.android.libraries.designsystem.preview.PreviewsDayNight
@@ -39,16 +41,19 @@ import io.element.android.libraries.designsystem.theme.components.Button
 import io.element.android.libraries.designsystem.theme.components.LinearProgressIndicator
 import io.element.android.libraries.designsystem.theme.components.OutlinedButton
 import io.element.android.libraries.designsystem.theme.components.Text
+import io.element.android.libraries.designsystem.theme.components.TopAppBar
 import io.element.android.libraries.designsystem.theme.progressIndicatorTrackColor
 import io.element.android.libraries.designsystem.utils.CommonDrawables
 import io.element.android.libraries.matrix.api.encryption.BackupUploadState
 import io.element.android.libraries.theme.ElementTheme
 import io.element.android.libraries.ui.strings.CommonStrings
 
+@OptIn(ExperimentalMaterial3Api::class)
 @Composable
 fun LogoutView(
     state: LogoutState,
     onChangeRecoveryKeyClicked: () -> Unit,
+    onBackClicked: () -> Unit,
     onSuccessLogout: (logoutUrlResult: String?) -> Unit,
     modifier: Modifier = Modifier,
 ) {
@@ -56,6 +61,12 @@ fun LogoutView(
 
     HeaderFooterPage(
         modifier = modifier,
+        topBar = {
+            TopAppBar(
+                navigationIcon = { BackButton(onClick = onBackClicked) },
+                title = {},
+            )
+        },
         header = {
             HeaderContent(state = state)
         },
@@ -134,7 +145,7 @@ private fun HeaderContent(
         else -> null
     }
 
-    val paddingTop = 60.dp
+    val paddingTop = 0.dp
     IconTitleSubtitleMolecule(
         modifier = modifier.padding(top = paddingTop),
         iconResourceId = CommonDrawables.ic_key,
@@ -219,6 +230,7 @@ internal fun LogoutViewPreview(
     LogoutView(
         state,
         onChangeRecoveryKeyClicked = {},
-        onSuccessLogout = {}
+        onSuccessLogout = {},
+        onBackClicked = {},
     )
 }

features/securebackup/impl/src/main/kotlin/io/element/android/features/securebackup/impl/disable/SecureBackupDisableNode.kt

@@ -40,6 +40,7 @@ class SecureBackupDisableNode @AssistedInject constructor(
             state = state,
             modifier = modifier,
             onDone = ::navigateUp,
+            onBackClicked = ::navigateUp,
         )
     }
 }

features/securebackup/impl/src/main/kotlin/io/element/android/features/securebackup/impl/disable/SecureBackupDisableView.kt

@@ -22,6 +22,7 @@ import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
+import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.ui.Modifier
@@ -33,6 +34,7 @@ import io.element.android.libraries.architecture.Async
 import io.element.android.libraries.designsystem.atomic.molecules.ButtonColumnMolecule
 import io.element.android.libraries.designsystem.atomic.molecules.IconTitleSubtitleMolecule
 import io.element.android.libraries.designsystem.atomic.pages.HeaderFooterPage
+import io.element.android.libraries.designsystem.components.button.BackButton
 import io.element.android.libraries.designsystem.components.dialogs.ConfirmationDialog
 import io.element.android.libraries.designsystem.components.dialogs.ErrorDialog
 import io.element.android.libraries.designsystem.preview.ElementPreview
@@ -40,13 +42,16 @@ import io.element.android.libraries.designsystem.preview.PreviewsDayNight
 import io.element.android.libraries.designsystem.theme.components.Button
 import io.element.android.libraries.designsystem.theme.components.Icon
 import io.element.android.libraries.designsystem.theme.components.Text
+import io.element.android.libraries.designsystem.theme.components.TopAppBar
 import io.element.android.libraries.designsystem.utils.CommonDrawables
 import io.element.android.libraries.theme.ElementTheme
 
+@OptIn(ExperimentalMaterial3Api::class)
 @Composable
 fun SecureBackupDisableView(
     state: SecureBackupDisableState,
     onDone: () -> Unit,
+    onBackClicked: () -> Unit,
     modifier: Modifier = Modifier,
 ) {
     LaunchedEffect(state.disableAction) {
@@ -56,6 +61,12 @@ fun SecureBackupDisableView(
     }
     HeaderFooterPage(
         modifier = modifier,
+        topBar = {
+            TopAppBar(
+                navigationIcon = { BackButton(onClick = onBackClicked) },
+                title = {},
+            )
+        },
         header = {
             HeaderContent()
         },
@@ -95,7 +106,7 @@ private fun HeaderContent(
     modifier: Modifier = Modifier,
 ) {
     IconTitleSubtitleMolecule(
-        modifier = modifier.padding(top = 60.dp),
+        modifier = modifier.padding(top = 0.dp),
         iconResourceId = CommonDrawables.ic_key_off,
         title = stringResource(id = R.string.screen_key_backup_disable_title),
         subTitle = stringResource(id = R.string.screen_key_backup_disable_description),
@@ -158,5 +169,6 @@ internal fun SecureBackupDisableViewPreview(
     SecureBackupDisableView(
         state = state,
         onDone = {},
+        onBackClicked = {},
     )
 }

features/securebackup/impl/src/main/kotlin/io/element/android/features/securebackup/impl/enable/SecureBackupEnableNode.kt

@@ -40,6 +40,7 @@ class SecureBackupEnableNode @AssistedInject constructor(
             state = state,
             modifier = modifier,
             onDone = ::navigateUp,
+            onBackClicked = ::navigateUp,
         )
     }
 }

features/securebackup/impl/src/main/kotlin/io/element/android/features/securebackup/impl/enable/SecureBackupEnableView.kt

@@ -18,6 +18,7 @@ package io.element.android.features.securebackup.impl.enable
 
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.ui.Modifier
@@ -29,16 +30,20 @@ import io.element.android.libraries.architecture.Async
 import io.element.android.libraries.designsystem.atomic.molecules.ButtonColumnMolecule
 import io.element.android.libraries.designsystem.atomic.molecules.IconTitleSubtitleMolecule
 import io.element.android.libraries.designsystem.atomic.pages.HeaderFooterPage
+import io.element.android.libraries.designsystem.components.button.BackButton
 import io.element.android.libraries.designsystem.components.dialogs.ErrorDialog
 import io.element.android.libraries.designsystem.preview.ElementPreview
 import io.element.android.libraries.designsystem.preview.PreviewsDayNight
 import io.element.android.libraries.designsystem.theme.components.Button
+import io.element.android.libraries.designsystem.theme.components.TopAppBar
 import io.element.android.libraries.designsystem.utils.CommonDrawables
 
+@OptIn(ExperimentalMaterial3Api::class)
 @Composable
 fun SecureBackupEnableView(
     state: SecureBackupEnableState,
     onDone: () -> Unit,
+    onBackClicked: () -> Unit,
     modifier: Modifier = Modifier,
 ) {
     LaunchedEffect(state.enableAction) {
@@ -48,6 +53,12 @@ fun SecureBackupEnableView(
     }
     HeaderFooterPage(
         modifier = modifier,
+        topBar = {
+            TopAppBar(
+                navigationIcon = { BackButton(onClick = onBackClicked) },
+                title = {},
+            )
+        },
         header = {
             HeaderContent()
         },
@@ -68,7 +79,7 @@ private fun HeaderContent(
     modifier: Modifier = Modifier,
 ) {
     IconTitleSubtitleMolecule(
-        modifier = modifier.padding(top = 60.dp),
+        modifier = modifier.padding(top = 0.dp),
         iconResourceId = CommonDrawables.ic_key,
         title = stringResource(id = R.string.screen_chat_backup_key_backup_action_enable),
         subTitle = null,
@@ -99,5 +110,6 @@ internal fun SecureBackupEnableViewPreview(
     SecureBackupEnableView(
         state = state,
         onDone = {},
+        onBackClicked = {},
     )
 }

features/securebackup/impl/src/main/kotlin/io/element/android/features/securebackup/impl/enter/SecureBackupEnterRecoveryKeyNode.kt

@@ -50,7 +50,8 @@ class SecureBackupEnterRecoveryKeyNode @AssistedInject constructor(
             onDone = {
                 coroutineScope.postSuccessSnackbar()
                 navigateUp()
-            }
+            },
+            onBackClicked = ::navigateUp,
         )
     }
 

features/securebackup/impl/src/main/kotlin/io/element/android/features/securebackup/impl/enter/SecureBackupEnterRecoveryKeyView.kt

@@ -18,6 +18,7 @@ package io.element.android.features.securebackup.impl.enter
 
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.ui.Modifier
@@ -30,17 +31,21 @@ import io.element.android.libraries.architecture.Async
 import io.element.android.libraries.designsystem.atomic.molecules.ButtonColumnMolecule
 import io.element.android.libraries.designsystem.atomic.molecules.IconTitleSubtitleMolecule
 import io.element.android.libraries.designsystem.atomic.pages.HeaderFooterPage
+import io.element.android.libraries.designsystem.components.button.BackButton
 import io.element.android.libraries.designsystem.components.dialogs.ErrorDialog
 import io.element.android.libraries.designsystem.preview.ElementPreview
 import io.element.android.libraries.designsystem.preview.PreviewsDayNight
 import io.element.android.libraries.designsystem.theme.components.Button
+import io.element.android.libraries.designsystem.theme.components.TopAppBar
 import io.element.android.libraries.designsystem.utils.CommonDrawables
 import io.element.android.libraries.ui.strings.CommonStrings
 
+@OptIn(ExperimentalMaterial3Api::class)
 @Composable
 fun SecureBackupEnterRecoveryKeyView(
     state: SecureBackupEnterRecoveryKeyState,
     onDone: () -> Unit,
+    onBackClicked: () -> Unit,
     modifier: Modifier = Modifier,
 ) {
     when (state.submitAction) {
@@ -59,6 +64,12 @@ fun SecureBackupEnterRecoveryKeyView(
 
     HeaderFooterPage(
         modifier = modifier,
+        topBar = {
+            TopAppBar(
+                navigationIcon = { BackButton(onClick = onBackClicked) },
+                title = {},
+            )
+        },
         header = {
             HeaderContent()
         },
@@ -87,7 +98,7 @@ private fun HeaderContent(
     modifier: Modifier = Modifier,
 ) {
     IconTitleSubtitleMolecule(
-        modifier = modifier.padding(top = 60.dp),
+        modifier = modifier.padding(top = 0.dp),
         iconResourceId = CommonDrawables.ic_key,
         title = stringResource(id = R.string.screen_recovery_key_confirm_title),
         subTitle = stringResource(id = R.string.screen_recovery_key_confirm_description),
@@ -135,5 +146,6 @@ internal fun SecureBackupEnterRecoveryKeyViewPreview(
     SecureBackupEnterRecoveryKeyView(
         state = state,
         onDone = {},
+        onBackClicked = {},
     )
 }

features/securebackup/impl/src/main/kotlin/io/element/android/features/securebackup/impl/setup/SecureBackupSetupNode.kt

@@ -60,6 +60,7 @@ class SecureBackupSetupNode @AssistedInject constructor(
                 coroutineScope.postSuccessSnackbar()
                 navigateUp()
             },
+            onBackClicked = ::navigateUp,
             modifier = modifier,
         )
     }

features/securebackup/impl/src/main/kotlin/io/element/android/features/securebackup/impl/setup/SecureBackupSetupView.kt

@@ -16,8 +16,10 @@
 
 package io.element.android.features.securebackup.impl.setup
 
+import androidx.activity.compose.BackHandler
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.LocalContext
@@ -32,24 +34,42 @@ import io.element.android.libraries.androidutils.system.startSharePlainTextInten
 import io.element.android.libraries.designsystem.atomic.molecules.ButtonColumnMolecule
 import io.element.android.libraries.designsystem.atomic.molecules.IconTitleSubtitleMolecule
 import io.element.android.libraries.designsystem.atomic.pages.HeaderFooterPage
+import io.element.android.libraries.designsystem.components.button.BackButton
 import io.element.android.libraries.designsystem.components.dialogs.ConfirmationDialog
 import io.element.android.libraries.designsystem.preview.ElementPreview
 import io.element.android.libraries.designsystem.preview.PreviewsDayNight
 import io.element.android.libraries.designsystem.theme.components.Button
 import io.element.android.libraries.designsystem.theme.components.IconSource
 import io.element.android.libraries.designsystem.theme.components.OutlinedButton
+import io.element.android.libraries.designsystem.theme.components.TopAppBar
 import io.element.android.libraries.designsystem.utils.CommonDrawables
 import io.element.android.libraries.ui.strings.CommonStrings
 
+@OptIn(ExperimentalMaterial3Api::class)
 @Composable
 fun SecureBackupSetupView(
     state: SecureBackupSetupState,
     onDone: () -> Unit,
+    onBackClicked: () -> Unit,
     modifier: Modifier = Modifier,
 ) {
     val context = LocalContext.current
+    val canGoBack = state.canGoBack()
+    BackHandler(enabled = canGoBack) {
+        onBackClicked()
+    }
     HeaderFooterPage(
         modifier = modifier,
+        topBar = {
+            TopAppBar(
+                navigationIcon = {
+                    if (canGoBack) {
+                        BackButton(onClick = onBackClicked)
+                    }
+                },
+                title = {},
+            )
+        },
         header = {
             HeaderContent(state = state)
         },
@@ -109,6 +129,10 @@ fun SecureBackupSetupView(
     }
 }
 
+private fun SecureBackupSetupState.canGoBack(): Boolean {
+    return recoveryKeyViewState.formattedRecoveryKey == null
+}
+
 @Composable
 private fun HeaderContent(
     state: SecureBackupSetupState,
@@ -136,7 +160,7 @@ private fun HeaderContent(
             stringResource(id = R.string.screen_recovery_key_save_description)
     }
     IconTitleSubtitleMolecule(
-        modifier = modifier.padding(top = 60.dp),
+        modifier = modifier.padding(top = 0.dp),
         iconResourceId = CommonDrawables.ic_key,
         title = title,
         subTitle = subTitle,
@@ -204,5 +228,6 @@ internal fun SecureBackupSetupViewPreview(
     SecureBackupSetupView(
         state = state,
         onDone = {},
+        onBackClicked = {},
     )
 }

features/securebackup/impl/src/main/kotlin/io/element/android/features/securebackup/impl/setup/SecureBackupSetupViewChangePreview.kt

@@ -33,5 +33,6 @@ internal fun SecureBackupSetupViewChangePreview(
             recoveryKeyViewState = state.recoveryKeyViewState.copy(recoveryKeyUserStory = RecoveryKeyUserStory.Change),
         ),
         onDone = {},
+        onBackClicked = {},
     )
 }