Add toggle button for split tunneling

Co-Authored-By: Boban Sijuk <49131853+Boki91@users.noreply.github.com>

Author: 2 people

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

@@ -148,6 +148,51 @@ fun ScaffoldWithMediumTopBar(
     )
 }
 
+@Composable
+@OptIn(ExperimentalMaterial3Api::class)
+fun ScaffoldWithMediumTopBar(
+    appBarTitle: String,
+    modifier: Modifier = Modifier,
+    navigationIcon: @Composable () -> Unit = {},
+    actions: @Composable RowScope.() -> Unit = {},
+    switch: @Composable RowScope.() -> Unit = {},
+    lazyListState: LazyListState = rememberLazyListState(),
+    scrollbarColor: Color = MaterialTheme.colorScheme.onBackground.copy(alpha = AlphaScrollbar),
+    snackbarHostState: SnackbarHostState = remember { SnackbarHostState() },
+    content: @Composable (modifier: Modifier, lazyListState: LazyListState) -> Unit
+) {
+    val appBarState = rememberTopAppBarState()
+    val canScroll = lazyListState.canScrollForward || lazyListState.canScrollBackward
+    val scrollBehavior =
+        TopAppBarDefaults.exitUntilCollapsedScrollBehavior(appBarState, canScroll = { canScroll })
+    Scaffold(
+        modifier = modifier.fillMaxSize().nestedScroll(scrollBehavior.nestedScrollConnection),
+        topBar = {
+            MullvadMediumTopBarWithSwitch(
+                title = appBarTitle,
+                navigationIcon = navigationIcon,
+                actions,
+                switch,
+                scrollBehavior = scrollBehavior
+            )
+        },
+        snackbarHost = {
+            SnackbarHost(
+                snackbarHostState,
+                snackbar = { snackbarData -> MullvadSnackbar(snackbarData = snackbarData) }
+            )
+        },
+        content = {
+            content(
+                Modifier.fillMaxSize()
+                    .padding(it)
+                    .drawVerticalScrollbar(state = lazyListState, color = scrollbarColor),
+                lazyListState
+            )
+        }
+    )
+}
+
 @OptIn(ExperimentalMaterial3Api::class)
 @Composable
 fun ScaffoldWithMediumTopBar(

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

@@ -237,6 +237,45 @@ fun MullvadMediumTopBar(
     )
 }
 
+@Composable
+fun MullvadMediumTopBarWithSwitch(
+    title: String,
+    navigationIcon: @Composable () -> Unit = {},
+    actions: @Composable RowScope.() -> Unit = {},
+    switch: @Composable RowScope.() -> Unit = {},
+    scrollBehavior: TopAppBarScrollBehavior? = null
+) {
+    MediumTopAppBar(
+        title = {
+            Row(
+                modifier = Modifier.padding(end = Dimens.mediumPadding),
+                horizontalArrangement = Arrangement.SpaceBetween,
+                verticalAlignment = Alignment.Top
+            ) {
+                Text(
+                    text = title,
+                    maxLines = 1,
+                    overflow = TextOverflow.Ellipsis,
+                    modifier = Modifier.weight(1f)
+                )
+
+                if (scrollBehavior?.state?.collapsedFraction == 0f) {
+                    switch()
+                }
+            }
+        },
+        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() {

android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/SplitTunnelingScreen.kt

@@ -9,9 +9,12 @@ import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.LocalMinimumInteractiveComponentEnforcement
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.runtime.collectAsState
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.remember
@@ -30,13 +33,15 @@ import net.mullvad.mullvadvpn.compose.cell.HeaderCell
 import net.mullvad.mullvadvpn.compose.cell.HeaderSwitchComposeCell
 import net.mullvad.mullvadvpn.compose.cell.SplitTunnelingCell
 import net.mullvad.mullvadvpn.compose.component.MullvadCircularProgressIndicatorLarge
+import net.mullvad.mullvadvpn.compose.component.MullvadSwitch
 import net.mullvad.mullvadvpn.compose.component.NavigateBackIconButton
 import net.mullvad.mullvadvpn.compose.component.ScaffoldWithMediumTopBar
 import net.mullvad.mullvadvpn.compose.constant.CommonContentKey
 import net.mullvad.mullvadvpn.compose.constant.ContentType
 import net.mullvad.mullvadvpn.compose.constant.SplitTunnelingContentKey
 import net.mullvad.mullvadvpn.compose.extensions.itemWithDivider
 import net.mullvad.mullvadvpn.compose.extensions.itemsIndexedWithDivider
+import net.mullvad.mullvadvpn.compose.state.AppListState
 import net.mullvad.mullvadvpn.compose.state.SplitTunnelingUiState
 import net.mullvad.mullvadvpn.compose.transitions.SlideInFromRightTransition
 import net.mullvad.mullvadvpn.lib.theme.AppTheme
@@ -51,29 +56,32 @@ private fun PreviewSplitTunnelingScreen() {
     AppTheme {
         SplitTunnelingScreen(
             uiState =
-                SplitTunnelingUiState.ShowAppList(
-                    excludedApps =
-                        listOf(
-                            AppData(
-                                packageName = "my.package.a",
-                                name = "TitleA",
-                                iconRes = R.drawable.icon_alert,
-                            ),
-                            AppData(
-                                packageName = "my.package.b",
-                                name = "TitleB",
-                                iconRes = R.drawable.icon_chevron,
-                            )
-                        ),
-                    includedApps =
-                        listOf(
-                            AppData(
-                                packageName = "my.package.c",
-                                name = "TitleC",
-                                iconRes = R.drawable.icon_alert
-                            )
-                        ),
-                    showSystemApps = true
+                SplitTunnelingUiState(
+                    appListState =
+                        AppListState.ShowAppList(
+                            excludedApps =
+                                listOf(
+                                    AppData(
+                                        packageName = "my.package.a",
+                                        name = "TitleA",
+                                        iconRes = R.drawable.icon_alert
+                                    ),
+                                    AppData(
+                                        packageName = "my.package.b",
+                                        name = "TitleB",
+                                        iconRes = R.drawable.icon_chevron
+                                    )
+                                ),
+                            includedApps =
+                                listOf(
+                                    AppData(
+                                        packageName = "my.package.c",
+                                        name = "TitleC",
+                                        iconRes = R.drawable.icon_alert
+                                    )
+                                ),
+                            showSystemApps = true
+                        )
                 )
         )
     }
@@ -88,6 +96,7 @@ fun SplitTunneling(navigator: DestinationsNavigator) {
     val packageManager = remember(context) { context.packageManager }
     SplitTunnelingScreen(
         uiState = state,
+        onShowSplitTunneling = viewModel::enableSplitTunneling,
         onShowSystemAppsClick = viewModel::onShowSystemAppsClick,
         onExcludeAppClick = viewModel::onExcludeAppClick,
         onIncludeAppClick = viewModel::onIncludeAppClick,
@@ -99,20 +108,29 @@ fun SplitTunneling(navigator: DestinationsNavigator) {
 }
 
 @Composable
-@OptIn(ExperimentalFoundationApi::class)
+@OptIn(ExperimentalFoundationApi::class, ExperimentalMaterial3Api::class)
 fun SplitTunnelingScreen(
-    uiState: SplitTunnelingUiState = SplitTunnelingUiState.Loading,
+    uiState: SplitTunnelingUiState = SplitTunnelingUiState(),
+    onShowSplitTunneling: (Boolean) -> Unit = {},
     onShowSystemAppsClick: (show: Boolean) -> Unit = {},
     onExcludeAppClick: (packageName: String) -> Unit = {},
     onIncludeAppClick: (packageName: String) -> Unit = {},
     onBackClick: () -> Unit = {},
-    onResolveIcon: (String) -> Bitmap? = { null },
+    onResolveIcon: (String) -> Bitmap? = { null }
 ) {
     val focusManager = LocalFocusManager.current
 
     ScaffoldWithMediumTopBar(
         modifier = Modifier.fillMaxSize(),
         appBarTitle = stringResource(id = R.string.split_tunneling),
+        switch = {
+            CompositionLocalProvider(LocalMinimumInteractiveComponentEnforcement provides false) {
+                MullvadSwitch(
+                    checked = uiState.enabled,
+                    onCheckedChange = { newValue -> onShowSplitTunneling(newValue) }
+                )
+            }
+        },
         navigationIcon = { NavigateBackIconButton(onBackClick) }
     ) { modifier, lazyListState ->
         LazyColumn(
@@ -134,14 +152,14 @@ fun SplitTunnelingScreen(
                     )
                 }
             }
-            when (uiState) {
-                SplitTunnelingUiState.Loading -> {
+            when (val appList = uiState.appListState) {
+                AppListState.Loading -> {
                     item(key = CommonContentKey.PROGRESS, contentType = ContentType.PROGRESS) {
                         MullvadCircularProgressIndicatorLarge()
                     }
                 }
-                is SplitTunnelingUiState.ShowAppList -> {
-                    if (uiState.excludedApps.isNotEmpty()) {
+                is AppListState.ShowAppList -> {
+                    if (appList.excludedApps.isNotEmpty()) {
                         itemWithDivider(
                             key = SplitTunnelingContentKey.EXCLUDED_APPLICATIONS,
                             contentType = ContentType.HEADER
@@ -153,7 +171,7 @@ fun SplitTunnelingScreen(
                             )
                         }
                         itemsIndexedWithDivider(
-                            items = uiState.excludedApps,
+                            items = appList.excludedApps,
                             key = { _, listItem -> listItem.packageName },
                             contentType = { _, _ -> ContentType.ITEM }
                         ) { index, listItem ->
@@ -166,7 +184,7 @@ fun SplitTunnelingScreen(
                             ) {
                                 // Move focus down unless the clicked item was the last in this
                                 // section.
-                                if (index < uiState.excludedApps.size - 1) {
+                                if (index < appList.excludedApps.size - 1) {
                                     focusManager.moveFocus(FocusDirection.Down)
                                 } else {
                                     focusManager.moveFocus(FocusDirection.Up)
@@ -189,7 +207,7 @@ fun SplitTunnelingScreen(
                     ) {
                         HeaderSwitchComposeCell(
                             title = stringResource(id = R.string.show_system_apps),
-                            isToggled = uiState.showSystemApps,
+                            isToggled = appList.showSystemApps,
                             onCellClicked = { newValue -> onShowSystemAppsClick(newValue) },
                             modifier = Modifier.animateItemPlacement()
                         )
@@ -205,7 +223,7 @@ fun SplitTunnelingScreen(
                         )
                     }
                     itemsIndexedWithDivider(
-                        items = uiState.includedApps,
+                        items = appList.includedApps,
                         key = { _, listItem -> listItem.packageName },
                         contentType = { _, _ -> ContentType.ITEM }
                     ) { index, listItem ->
@@ -218,7 +236,7 @@ fun SplitTunnelingScreen(
                         ) {
                             // Move focus down unless the clicked item was the last in this
                             // section.
-                            if (index < uiState.includedApps.size - 1) {
+                            if (index < appList.includedApps.size - 1) {
                                 focusManager.moveFocus(FocusDirection.Down)
                             } else {
                                 focusManager.moveFocus(FocusDirection.Up)
@@ -228,6 +246,7 @@ fun SplitTunnelingScreen(
                         }
                     }
                 }
+                AppListState.Disabled -> {}
             }
         }
     }

android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/state/SplitTunnelingUiState.kt

@@ -2,12 +2,19 @@ package net.mullvad.mullvadvpn.compose.state
 
 import net.mullvad.mullvadvpn.applist.AppData
 
-sealed interface SplitTunnelingUiState {
-    data object Loading : SplitTunnelingUiState
+data class SplitTunnelingUiState(
+    val enabled: Boolean = false,
+    val appListState: AppListState = AppListState.Disabled
+)
+
+sealed interface AppListState {
+    data object Disabled : AppListState
+
+    data object Loading : AppListState
 
     data class ShowAppList(
         val excludedApps: List<AppData> = emptyList(),
         val includedApps: List<AppData> = emptyList(),
         val showSystemApps: Boolean = false
-    ) : SplitTunnelingUiState
+    ) : AppListState
 }

android/app/src/main/kotlin/net/mullvad/mullvadvpn/ui/serviceconnection/SplitTunneling.kt

@@ -10,11 +10,12 @@ class SplitTunneling(private val connection: Messenger, eventDispatcher: EventDi
     private var _excludedApps by
         observable(emptySet<String>()) { _, _, apps -> excludedAppsChange.invoke(apps) }
 
-    var enabled by
-        observable(false) { _, wasEnabled, isEnabled ->
-            if (wasEnabled != isEnabled) {
-                connection.send(Request.SetEnableSplitTunneling(isEnabled).message)
-            }
+    var enabled by observable(false) { _, _, isEnabled -> enabledChange.invoke(isEnabled) }
+
+    var enabledChange: (enabled: Boolean) -> Unit = {}
+        set(value) {
+            field = value
+            synchronized(this) { value.invoke(enabled) }
         }
 
     var excludedAppsChange: (apps: Set<String>) -> Unit = {}
@@ -41,4 +42,7 @@ class SplitTunneling(private val connection: Messenger, eventDispatcher: EventDi
         connection.send(Request.IncludeApp(appPackageName).message)
 
     fun persist() = connection.send(Request.PersistExcludedApps.message)
+
+    fun enableSplitTunneling(isEnabled: Boolean) =
+        connection.send(Request.SetEnableSplitTunneling(isEnabled).message)
 }