Fix SplitTunnelingScreen and SplitTunnelingCell

- Use BaseCell as base for SplitTunnelingCell
- Make sizes and margins more in line with design
- Use new HeaderCell instead of BaseCell in SplitTunnelingScreen
- Use items with divider instead of padding in the cell

6 files changed, 104 insertions, 80 deletions

diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/BaseCell.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/BaseCell.kt
index 46d1248652..13aaea4334 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/BaseCell.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/BaseCell.kt
@@ -93,13 +93,14 @@ internal fun BaseCellTitle(
     title: String,
     style: TextStyle,
     modifier: Modifier = Modifier,
+    color: Color = MaterialTheme.colorScheme.onPrimary,
     textAlign: TextAlign = TextAlign.Start
 ) {
     Text(
         text = title,
         textAlign = textAlign,
         style = style,
-        color = MaterialTheme.colorScheme.onPrimary,
+        color = color,
         overflow = TextOverflow.Ellipsis,
         maxLines = 1,
         modifier = modifier
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/HeaderCell.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/HeaderCell.kt
new file mode 100644
index 0000000000..8807430989
--- /dev/null
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/HeaderCell.kt
@@ -0,0 +1,29 @@
+package net.mullvad.mullvadvpn.compose.cell
+
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.text.TextStyle
+
+@Composable
+fun HeaderCell(
+    text: String,
+    modifier: Modifier = Modifier,
+    textStyle: TextStyle = MaterialTheme.typography.titleMedium,
+    textColor: Color = MaterialTheme.colorScheme.onPrimary,
+    background: Color = MaterialTheme.colorScheme.primary,
+) {
+    BaseCell(
+        title = {
+            BaseCellTitle(
+                title = text,
+                style = textStyle,
+                color = textColor,
+            )
+        },
+        modifier = modifier,
+        background = background,
+        isRowEnabled = false
+    )
+}
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/SplitTunnelingCell.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/SplitTunnelingCell.kt
index 80b7d107b8..adccf231a3 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/SplitTunnelingCell.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/SplitTunnelingCell.kt
@@ -3,20 +3,15 @@ package net.mullvad.mullvadvpn.compose.cell
 import android.graphics.Bitmap
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.background
-import androidx.compose.foundation.clickable
-import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.Row
-import androidx.compose.foundation.layout.defaultMinSize
-import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
-import androidx.compose.foundation.layout.wrapContentHeight
 import androidx.compose.material3.Icon
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.runtime.*
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.ImageBitmap
 import androidx.compose.ui.graphics.asImageBitmap
 import androidx.compose.ui.graphics.compositeOver
@@ -27,6 +22,7 @@ import androidx.compose.ui.unit.dp
 import kotlinx.coroutines.Dispatchers
 import kotlinx.coroutines.launch
 import net.mullvad.mullvadvpn.R
+import net.mullvad.mullvadvpn.compose.component.SpacedColumn
 import net.mullvad.mullvadvpn.lib.theme.AppTheme
 import net.mullvad.mullvadvpn.lib.theme.Dimens
 import net.mullvad.mullvadvpn.lib.theme.color.Alpha40
@@ -36,7 +32,7 @@ import net.mullvad.mullvadvpn.lib.theme.typeface.listItemText
 @Composable
 private fun PreviewTunnelingCell() {
     AppTheme {
-        Column(
+        SpacedColumn(
             modifier =
                 Modifier.background(color = MaterialTheme.colorScheme.background).padding(20.dp)
         ) {
@@ -52,6 +48,10 @@ fun SplitTunnelingCell(
     packageName: String?,
     isSelected: Boolean,
     modifier: Modifier = Modifier,
+    backgroundColor: Color =
+        MaterialTheme.colorScheme.primary
+            .copy(alpha = Alpha40)
+            .compositeOver(MaterialTheme.colorScheme.background),
     onResolveIcon: (String) -> Bitmap? = { null },
     onCellClicked: () -> Unit = {}
 ) {
@@ -62,55 +62,49 @@ fun SplitTunnelingCell(
             icon = bitmap?.asImageBitmap()
         }
     }
-    Row(
-        modifier =
-            modifier
-                .wrapContentHeight()
-                .defaultMinSize(minHeight = Dimens.listItemHeightExtra)
-                .fillMaxWidth()
-                .padding(bottom = Dimens.listItemDivider)
-                .background(
-                    MaterialTheme.colorScheme.primary
+    BaseCell(
+        iconView = {
+            Image(
+                painter =
+                    icon?.let { iconImage -> BitmapPainter(iconImage) }
+                        ?: painterResource(id = R.drawable.ic_icons_missing),
+                contentDescription = null,
+                modifier =
+                    Modifier.align(Alignment.CenterVertically).size(size = Dimens.listIconSize)
+            )
+        },
+        title = {
+            Text(
+                text = title,
+                style = MaterialTheme.typography.listItemText,
+                color = MaterialTheme.colorScheme.onPrimary,
+                modifier =
+                    Modifier.weight(1f)
+                        .padding(horizontal = Dimens.mediumPadding)
+                        .align(Alignment.CenterVertically)
+            )
+        },
+        bodyView = {
+            Icon(
+                painter =
+                    painterResource(
+                        id =
+                            if (isSelected) {
+                                R.drawable.ic_icons_remove
+                            } else {
+                                R.drawable.ic_icons_add
+                            }
+                    ),
+                contentDescription = null,
+                tint =
+                    MaterialTheme.colorScheme.onBackground
                         .copy(alpha = Alpha40)
-                        .compositeOver(MaterialTheme.colorScheme.background)
-                )
-                .clickable(onClick = onCellClicked)
-    ) {
-        Image(
-            painter =
-                icon?.let { iconImage -> BitmapPainter(iconImage) }
-                    ?: painterResource(id = R.drawable.ic_icons_missing),
-            contentDescription = null,
-            modifier =
-                Modifier.padding(start = Dimens.cellStartPadding)
-                    .align(Alignment.CenterVertically)
-                    .size(width = Dimens.listIconSize, height = Dimens.listIconSize)
-        )
-        Text(
-            text = title,
-            style = MaterialTheme.typography.listItemText,
-            color = MaterialTheme.colorScheme.onPrimary,
-            modifier =
-                Modifier.weight(1f)
-                    .padding(horizontal = Dimens.mediumPadding, vertical = Dimens.smallPadding)
-                    .align(Alignment.CenterVertically)
-        )
-        Icon(
-            painter =
-                painterResource(
-                    id =
-                        if (isSelected) {
-                            R.drawable.ic_icons_remove
-                        } else {
-                            R.drawable.ic_icons_add
-                        }
-                ),
-            contentDescription = null,
-            tint = MaterialTheme.colorScheme.onBackground.copy(alpha = Alpha40),
-            modifier =
-                Modifier.padding(end = Dimens.cellStartPadding)
-                    .align(Alignment.CenterVertically)
-                    .padding(horizontal = Dimens.loadingSpinnerPadding)
-        )
-    }
+                        .compositeOver(backgroundColor),
+                modifier = Modifier.size(size = Dimens.addIconSize)
+            )
+        },
+        onCellClicked = onCellClicked,
+        background = backgroundColor,
+        modifier = modifier
+    )
 }
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/extensions/LazyListExtensions.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/extensions/LazyListExtensions.kt
index ddddd6c078..8e1f562b47 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/extensions/LazyListExtensions.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/extensions/LazyListExtensions.kt
@@ -2,6 +2,7 @@ package net.mullvad.mullvadvpn.compose.extensions
 
 import androidx.compose.foundation.lazy.LazyItemScope
 import androidx.compose.foundation.lazy.LazyListScope
+import androidx.compose.foundation.lazy.itemsIndexed
 import androidx.compose.material3.Divider
 import androidx.compose.runtime.Composable
 
@@ -14,3 +15,14 @@ inline fun LazyListScope.itemWithDivider(
         itemContent()
         Divider()
     }
+
+inline fun <T> LazyListScope.itemsIndexedWithDivider(
+    items: List<T>,
+    noinline key: ((index: Int, item: T) -> Any)? = null,
+    crossinline contentType: (index: Int, item: T) -> Any? = { _, _ -> null },
+    crossinline itemContent: @Composable LazyItemScope.(index: Int, item: T) -> Unit
+) =
+    itemsIndexed(items = items, key = key, contentType = contentType) { index, item ->
+        itemContent(index, item)
+        Divider()
+    }
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/SplitTunnelingScreen.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/SplitTunnelingScreen.kt
index 5164fe0a3d..aae3f8274e 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/SplitTunnelingScreen.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/SplitTunnelingScreen.kt
@@ -9,7 +9,6 @@ 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.foundation.lazy.itemsIndexed
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
@@ -27,7 +26,7 @@ import com.ramcosta.composedestinations.annotation.Destination
 import com.ramcosta.composedestinations.navigation.DestinationsNavigator
 import net.mullvad.mullvadvpn.R
 import net.mullvad.mullvadvpn.applist.AppData
-import net.mullvad.mullvadvpn.compose.cell.BaseCell
+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
@@ -37,6 +36,7 @@ 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.SplitTunnelingUiState
 import net.mullvad.mullvadvpn.compose.transitions.SlideInFromRightTransition
 import net.mullvad.mullvadvpn.lib.theme.AppTheme
@@ -146,19 +146,13 @@ fun SplitTunnelingScreen(
                             key = SplitTunnelingContentKey.EXCLUDED_APPLICATIONS,
                             contentType = ContentType.HEADER
                         ) {
-                            BaseCell(
-                                title = {
-                                    Text(
-                                        text = stringResource(id = R.string.exclude_applications),
-                                        style = MaterialTheme.typography.titleMedium,
-                                        color = MaterialTheme.colorScheme.onPrimary
-                                    )
-                                },
-                                bodyView = {},
+                            HeaderCell(
+                                modifier = Modifier.animateItemPlacement(),
+                                text = stringResource(id = R.string.exclude_applications),
                                 background = MaterialTheme.colorScheme.primary,
                             )
                         }
-                        itemsIndexed(
+                        itemsIndexedWithDivider(
                             items = uiState.excludedApps,
                             key = { _, listItem -> listItem.packageName },
                             contentType = { _, _ -> ContentType.ITEM }
@@ -204,20 +198,13 @@ fun SplitTunnelingScreen(
                         key = SplitTunnelingContentKey.INCLUDED_APPLICATIONS,
                         contentType = ContentType.HEADER
                     ) {
-                        BaseCell(
+                        HeaderCell(
                             modifier = Modifier.animateItemPlacement(),
-                            title = {
-                                Text(
-                                    text = stringResource(id = R.string.all_applications),
-                                    style = MaterialTheme.typography.titleMedium,
-                                    color = MaterialTheme.colorScheme.onPrimary
-                                )
-                            },
-                            bodyView = {},
+                            text = stringResource(id = R.string.all_applications),
                             background = MaterialTheme.colorScheme.primary,
                         )
                     }
-                    itemsIndexed(
+                    itemsIndexedWithDivider(
                         items = uiState.includedApps,
                         key = { _, listItem -> listItem.packageName },
                         contentType = { _, _ -> ContentType.ITEM }
diff --git a/android/lib/theme/src/main/kotlin/net/mullvad/mullvadvpn/lib/theme/dimensions/Dimensions.kt b/android/lib/theme/src/main/kotlin/net/mullvad/mullvadvpn/lib/theme/dimensions/Dimensions.kt
index 1f131b9aac..fa454c0b54 100644
--- a/android/lib/theme/src/main/kotlin/net/mullvad/mullvadvpn/lib/theme/dimensions/Dimensions.kt
+++ b/android/lib/theme/src/main/kotlin/net/mullvad/mullvadvpn/lib/theme/dimensions/Dimensions.kt
@@ -6,6 +6,7 @@ import androidx.compose.ui.unit.dp
 data class Dimensions(
     val accountRowMinHeight: Dp = 48.dp,
     val accountRowSpacing: Dp = 24.dp,
+    val addIconSize: Dp = 24.dp,
     val backButtonSideMargin: Dp = 30.dp,
     val bigIconSize: Dp = 44.dp,
     val buttonHeight: Dp = 44.dp,