Add guide for auto connect and lockdown mode

CHANGELOG.md

@@ -37,6 +37,8 @@ Line wrap the file at 100 chars.                                              Th
 #### Android
 - Add support for all screen orientations.
 - Add toggle for enabling or disabling split tunneling.
+- Replace auto connect with auto connect and lockdown mode guide on platforms that has
+  system vpn settings.
 
 ### Fixed
 - Fix connectivity issues that would occur when using quantum-resistant tunnels with an incorrectly

android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/Scaffolding.kt

@@ -1,15 +1,18 @@
 package net.mullvad.mullvadvpn.compose.component
 
+import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.RowScope
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.systemBarsPadding
 import androidx.compose.foundation.lazy.LazyListState
 import androidx.compose.foundation.lazy.rememberLazyListState
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.verticalScroll
 import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.Icon
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Scaffold
 import androidx.compose.material3.Snackbar
@@ -23,6 +26,10 @@ import androidx.compose.runtime.remember
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.input.nestedscroll.nestedScroll
+import androidx.compose.ui.res.painterResource
+import net.mullvad.mullvadvpn.R
+import net.mullvad.mullvadvpn.compose.button.PrimaryButton
+import net.mullvad.mullvadvpn.lib.theme.Dimens
 import net.mullvad.mullvadvpn.lib.theme.color.AlphaScrollbar
 import net.mullvad.mullvadvpn.lib.theme.color.AlphaTopBar
 
@@ -183,3 +190,63 @@ fun ScaffoldWithMediumTopBar(
         }
     )
 }
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun ScaffoldWithLargeTopBarAndButton(
+    appBarTitle: String,
+    modifier: Modifier = Modifier,
+    navigationIcon: @Composable () -> Unit = {},
+    actions: @Composable RowScope.() -> Unit = {},
+    onButtonClick: () -> Unit = {}, // Add button
+    buttonTitle: String,
+    scrollbarColor: Color = MaterialTheme.colorScheme.onBackground.copy(alpha = AlphaScrollbar),
+    content: @Composable (modifier: Modifier) -> Unit
+) {
+    val appBarState = rememberTopAppBarState()
+    val scrollState = rememberScrollState()
+    val canScroll = scrollState.canScrollForward || scrollState.canScrollBackward
+    val scrollBehavior =
+        TopAppBarDefaults.exitUntilCollapsedScrollBehavior(appBarState, canScroll = { canScroll })
+    Scaffold(
+        modifier =
+            modifier
+                .fillMaxSize()
+                .background(MaterialTheme.colorScheme.background)
+                .systemBarsPadding()
+                .nestedScroll(scrollBehavior.nestedScrollConnection),
+        topBar = {
+            MullvadLargeTopBar(
+                title = appBarTitle,
+                navigationIcon = navigationIcon,
+                actions,
+                scrollBehavior = scrollBehavior
+            )
+        },
+        bottomBar = {
+            PrimaryButton(
+                text = buttonTitle,
+                onClick = onButtonClick,
+                modifier =
+                    Modifier.padding(
+                        horizontal = Dimens.sideMargin,
+                        vertical = Dimens.screenVerticalMargin
+                    ),
+                icon = {
+                    Icon(
+                        painter = painterResource(id = R.drawable.icon_extlink),
+                        contentDescription = null
+                    )
+                },
+            )
+        },
+        content = {
+            content(
+                Modifier.fillMaxSize()
+                    .padding(it)
+                    .drawVerticalScrollbar(state = scrollState, color = scrollbarColor)
+                    .verticalScroll(scrollState)
+            )
+        }
+    )
+}

android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/TopBar.kt

@@ -20,6 +20,7 @@ import androidx.compose.foundation.layout.size
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
+import androidx.compose.material3.LargeTopAppBar
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.MediumTopAppBar
 import androidx.compose.material3.Surface
@@ -198,6 +199,16 @@ private fun PreviewMediumTopBar() {
     }
 }
 
+@Preview
+@Composable
+private fun PreviewLargeTopBar() {
+    AppTheme {
+        MullvadLargeTopBar(
+            title = "Title",
+        )
+    }
+}
+
 @Preview(widthDp = 260)
 @Composable
 private fun PreviewSlimMediumTopBar() {
@@ -237,6 +248,28 @@ fun MullvadMediumTopBar(
     )
 }
 
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun MullvadLargeTopBar(
+    title: String,
+    navigationIcon: @Composable () -> Unit = {},
+    actions: @Composable RowScope.() -> Unit = {},
+    scrollBehavior: TopAppBarScrollBehavior? = null
+) {
+    LargeTopAppBar(
+        title = { Text(text = title, maxLines = 2, overflow = TextOverflow.Ellipsis) },
+        navigationIcon = navigationIcon,
+        scrollBehavior = scrollBehavior,
+        colors =
+            TopAppBarDefaults.mediumTopAppBarColors(
+                containerColor = MaterialTheme.colorScheme.background,
+                scrolledContainerColor = MaterialTheme.colorScheme.background,
+                actionIconContentColor = MaterialTheme.colorScheme.onPrimary.copy(AlphaTopBar),
+            ),
+        actions = actions
+    )
+}
+
 @Preview
 @Composable
 private fun PreviewMullvadTopBarWithLongDeviceName() {