Improve divider useage and replace deprecated divider

Pururun · Pururun · commit 7022d7ad9507 · 2024-03-05T00:13:06.000+01:00
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/RelayLocationCell.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/RelayLocationCell.kt
@@ -17,6 +17,7 @@ import androidx.compose.foundation.layout.wrapContentHeight
 import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
+import androidx.compose.material3.VerticalDivider
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.saveable.rememberSaveable
@@ -29,7 +30,6 @@ import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.tooling.preview.Preview
 import net.mullvad.mullvadvpn.R
 import net.mullvad.mullvadvpn.compose.component.ChevronView
-import net.mullvad.mullvadvpn.compose.component.VerticalDivider
 import net.mullvad.mullvadvpn.lib.theme.AppTheme
 import net.mullvad.mullvadvpn.lib.theme.Dimens
 import net.mullvad.mullvadvpn.lib.theme.color.Alpha40
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/VerticalDivider.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/VerticalDivider.kt
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
@@ -2,8 +2,9 @@ package net.mullvad.mullvadvpn.compose.extensions
 
 import androidx.compose.foundation.lazy.LazyItemScope
 import androidx.compose.foundation.lazy.LazyListScope
+import androidx.compose.foundation.lazy.items
 import androidx.compose.foundation.lazy.itemsIndexed
-import androidx.compose.material3.Divider
+import androidx.compose.material3.HorizontalDivider
 import androidx.compose.runtime.Composable
 
 inline fun LazyListScope.itemWithDivider(
@@ -13,7 +14,18 @@ inline fun LazyListScope.itemWithDivider(
 ) =
     item(key = key, contentType = contentType) {
         itemContent()
-        Divider()
+        HorizontalDivider()
+    }
+
+inline fun <T> LazyListScope.itemsWithDivider(
+    items: List<T>,
+    noinline key: ((item: T) -> Any)? = null,
+    noinline contentType: (item: T) -> Any? = { null },
+    crossinline itemContent: @Composable LazyItemScope.(item: T) -> Unit
+) =
+    items(items = items, key = key, contentType = contentType) { item ->
+        itemContent(item)
+        HorizontalDivider()
     }
 
 inline fun <T> LazyListScope.itemsIndexedWithDivider(
@@ -24,5 +36,5 @@ inline fun <T> LazyListScope.itemsIndexedWithDivider(
 ) =
     itemsIndexed(items = items, key = key, contentType = contentType) { index, item ->
         itemContent(index, item)
-        Divider()
+        HorizontalDivider()
     }
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/DeviceListScreen.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/DeviceListScreen.kt
@@ -12,7 +12,7 @@ import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.wrapContentHeight
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.verticalScroll
-import androidx.compose.material3.Divider
+import androidx.compose.material3.HorizontalDivider
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
 import androidx.compose.material3.MaterialTheme
@@ -274,7 +274,7 @@ private fun ColumnScope.DeviceListContent(
             navigateToRemoveDeviceConfirmationDialog(deviceUiState.device)
         }
         if (state.deviceUiItems.lastIndex != index) {
-            Divider()
+            HorizontalDivider()
         }
     }
 }
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/FilterScreen.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/FilterScreen.kt
@@ -9,8 +9,6 @@ import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.systemBarsPadding
 import androidx.compose.foundation.lazy.LazyColumn
-import androidx.compose.foundation.lazy.items
-import androidx.compose.material3.Divider
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
 import androidx.compose.material3.MaterialTheme
@@ -37,6 +35,8 @@ import net.mullvad.mullvadvpn.compose.button.ApplyButton
 import net.mullvad.mullvadvpn.compose.cell.CheckboxCell
 import net.mullvad.mullvadvpn.compose.cell.ExpandableComposeCell
 import net.mullvad.mullvadvpn.compose.cell.SelectableCell
+import net.mullvad.mullvadvpn.compose.extensions.itemWithDivider
+import net.mullvad.mullvadvpn.compose.extensions.itemsWithDivider
 import net.mullvad.mullvadvpn.compose.state.RelayFilterState
 import net.mullvad.mullvadvpn.compose.transitions.SlideInFromRightTransition
 import net.mullvad.mullvadvpn.lib.theme.AppTheme
@@ -146,8 +146,7 @@ fun FilterScreen(
         },
     ) { contentPadding ->
         LazyColumn(modifier = Modifier.padding(contentPadding).fillMaxSize()) {
-            item {
-                Divider()
+            itemWithDivider {
                 ExpandableComposeCell(
                     title = stringResource(R.string.ownership),
                     isExpanded = ownershipExpanded,
@@ -164,17 +163,15 @@ fun FilterScreen(
                         onCellClicked = { onSelectedOwnership(null) }
                     )
                 }
-                items(uiState.filteredOwnershipByProviders) { ownership ->
-                    Divider()
+                itemsWithDivider(uiState.filteredOwnershipByProviders) { ownership ->
                     SelectableCell(
                         title = stringResource(id = ownership.stringResource()),
                         isSelected = ownership == uiState.selectedOwnership,
                         onCellClicked = { onSelectedOwnership(ownership) }
                     )
                 }
             }
-            item {
-                Divider()
+            itemWithDivider {
                 ExpandableComposeCell(
                     title = stringResource(R.string.providers),
                     isExpanded = providerExpanded,
@@ -184,16 +181,14 @@ fun FilterScreen(
                 )
             }
             if (providerExpanded) {
-                item {
-                    Divider()
+                itemWithDivider {
                     CheckboxCell(
                         providerName = stringResource(R.string.all_providers),
                         checked = uiState.isAllProvidersChecked,
                         onCheckedChange = { isChecked -> onAllProviderCheckChange(isChecked) }
                     )
                 }
-                items(uiState.filteredProvidersByOwnership) { provider ->
-                    Divider()
+                itemsWithDivider(uiState.filteredProvidersByOwnership) { provider ->
                     CheckboxCell(
                         providerName = provider.name,
                         checked = provider in uiState.selectedProviders,
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/VpnSettingsScreen.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/VpnSettingsScreen.kt
@@ -7,8 +7,6 @@ import androidx.compose.foundation.layout.Spacer
 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.Divider
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.SnackbarHostState
 import androidx.compose.material3.Text
@@ -67,6 +65,7 @@ import net.mullvad.mullvadvpn.compose.destinations.WireguardPortInfoDialogDestin
 import net.mullvad.mullvadvpn.compose.dialog.WireguardCustomPortNavArgs
 import net.mullvad.mullvadvpn.compose.dialog.WireguardPortInfoDialogArgument
 import net.mullvad.mullvadvpn.compose.extensions.itemWithDivider
+import net.mullvad.mullvadvpn.compose.extensions.itemsIndexedWithDivider
 import net.mullvad.mullvadvpn.compose.state.VpnSettingsUiState
 import net.mullvad.mullvadvpn.compose.test.LAZY_LIST_LAST_ITEM_TEST_TAG
 import net.mullvad.mullvadvpn.compose.test.LAZY_LIST_QUANTUM_ITEM_OFF_TEST_TAG
@@ -436,15 +435,14 @@ fun VpnSettingsScreen(
             }
 
             if (uiState.isCustomDnsEnabled) {
-                itemsIndexed(uiState.customDnsItems) { index, item ->
+                itemsIndexedWithDivider(uiState.customDnsItems) { index, item ->
                     DnsCell(
                         address = item.address,
                         isUnreachableLocalDnsWarningVisible =
                             item.isLocal && !uiState.isLocalNetworkSharingEnabled,
                         onClick = { navigateToDns(index, item.address) },
                         modifier = Modifier.animateItemPlacement()
                     )
-                    Divider()
                 }
 
                 itemWithDivider {

Original file line number	Diff line number	Diff line change
`@@ -12,7 +12,7 @@ import androidx.compose.foundation.layout.size`
`12`	`12`	`import androidx.compose.foundation.layout.wrapContentHeight`
`13`	`13`	`import androidx.compose.foundation.rememberScrollState`
`14`	`14`	`import androidx.compose.foundation.verticalScroll`
`15`		`-import androidx.compose.material3.Divider`
	`15`	`+import androidx.compose.material3.HorizontalDivider`
`16`	`16`	`import androidx.compose.material3.Icon`
`17`	`17`	`import androidx.compose.material3.IconButton`
`18`	`18`	`import androidx.compose.material3.MaterialTheme`
`@@ -274,7 +274,7 @@ private fun ColumnScope.DeviceListContent(`
`274`	`274`	`navigateToRemoveDeviceConfirmationDialog(deviceUiState.device)`
`275`	`275`	`}`
`276`	`276`	`if (state.deviceUiItems.lastIndex != index) {`
`277`		`- Divider()`
	`277`	`+ HorizontalDivider()`
`278`	`278`	`}`
`279`	`279`	`}`
`280`	`280`	`}`