Moved decision about zebraStripes and Divider to TransactionListItem

composeApp/src/commonMain/kotlin/net/codinux/banking/ui/composables/transactions/GroupedTransactionsListItems.kt

@@ -4,7 +4,6 @@ import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.*
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.items
-import androidx.compose.material.Divider
 import androidx.compose.material.Text
 import androidx.compose.runtime.*
 import androidx.compose.ui.Alignment
@@ -16,11 +15,9 @@ import androidx.compose.ui.unit.sp
 import kotlinx.datetime.LocalDate
 import net.codinux.banking.client.model.Amount
 import net.codinux.banking.dataaccess.entities.UserAccountEntity
-import net.codinux.banking.ui.config.Colors
 import net.codinux.banking.ui.config.DI
 import net.codinux.banking.ui.forms.RoundedCornersCard
 import net.codinux.banking.ui.model.AccountTransactionViewModel
-import net.codinux.banking.ui.settings.UiSettings
 
 private val calculator = DI.calculator
 
@@ -30,16 +27,13 @@ private val formatUtil = DI.formatUtil
 fun GroupedTransactionsListItems(
     modifier: Modifier,
     transactionsToDisplay: List<AccountTransactionViewModel>,
-    userAccountsId: Map<Long, UserAccountEntity>,
+    userAccountsId: Map<Long, UserAccountEntity>
-    uiSettings: UiSettings
 ) {
 
     val groupedByMonth by remember(transactionsToDisplay) {
         derivedStateOf { transactionsToDisplay.groupBy { LocalDate(it.valueDate.year, it.valueDate.monthNumber, 1) } }
     }
 
-    val zebraStripes by uiSettings.zebraStripes.collectAsState()
-
 
     LazyColumn(modifier) {
         items(groupedByMonth.keys.sortedDescending()) { month ->
@@ -59,12 +53,7 @@ fun GroupedTransactionsListItems(
                 RoundedCornersCard {
                     Column(Modifier.background(Color.White)) { // LazyColumn inside LazyColumn is not allowed
                         monthTransactions.forEachIndexed { index, transaction ->
-                            val backgroundColor = if (zebraStripes && index % 2 == 1) Colors.Zinc100_50 else Color.Transparent
+                            TransactionListItem(userAccountsId[transaction.userAccountId], transaction, index, monthTransactions.size)
-                            TransactionListItem(userAccountsId[transaction.userAccountId], transaction, backgroundColor)
-
-                            if (index < monthTransactions.size - 1) {
-                                Divider(color = Colors.Zinc200, thickness = 1.dp)
-                            }
                         }
                     }
                 }

composeApp/src/commonMain/kotlin/net/codinux/banking/ui/composables/transactions/TransactionListItem.kt

@@ -2,8 +2,11 @@ package net.codinux.banking.ui.composables.transactions
 
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.*
+import androidx.compose.material.Divider
 import androidx.compose.material.Text
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.collectAsState
+import androidx.compose.runtime.getValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
@@ -11,13 +14,20 @@ import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.dp
 import net.codinux.banking.client.model.UserAccount
 import net.codinux.banking.ui.composables.BankIcon
+import net.codinux.banking.ui.config.Colors
 import net.codinux.banking.ui.config.DI
 import net.codinux.banking.ui.model.AccountTransactionViewModel
 
+private val uiSettings = DI.uiSettings
+
 private val formatUtil = DI.formatUtil
 
 @Composable
-fun TransactionListItem(userAccount: UserAccount?, transaction: AccountTransactionViewModel, backgroundColor: Color) {
+fun TransactionListItem(userAccount: UserAccount?, transaction: AccountTransactionViewModel, itemIndex: Int, countItems: Int) {
+    val zebraStripes by uiSettings.zebraStripes.collectAsState()
+
+    val backgroundColor = if (zebraStripes && itemIndex % 2 == 1) Colors.Zinc100_50 else Color.White
+
     Row(
         modifier = Modifier.fillMaxWidth()
             .background(color = backgroundColor)
@@ -60,4 +70,8 @@ fun TransactionListItem(userAccount: UserAccount?, transaction: AccountTransacti
             )
         }
     }
+
+    if (itemIndex < countItems - 1) {
+        Divider(color = Colors.Zinc200, thickness = 1.dp)
+    }
 }

composeApp/src/commonMain/kotlin/net/codinux/banking/ui/composables/transactions/TransactionsList.kt

@@ -4,13 +4,11 @@ import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.*
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.itemsIndexed
-import androidx.compose.material.Divider
 import androidx.compose.material.MaterialTheme
 import androidx.compose.material.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.unit.dp
 import net.codinux.banking.ui.config.Colors
 import net.codinux.banking.ui.config.DI
@@ -41,8 +39,6 @@ fun TransactionsList(uiState: UiState, uiSettings: UiSettings) {
 
     val groupTransactions by uiSettings.groupTransactions.collectAsState()
 
-    val zebraStripes by uiSettings.zebraStripes.collectAsState()
-
     val transactionsListModifier = Modifier.fillMaxSize().padding(bottom = 12.dp) // padding bottom = add the space the FAB sticks into the content area (= 26 - the 16 we add at the bottom of the expenses line)
 
 
@@ -56,16 +52,11 @@ fun TransactionsList(uiState: UiState, uiSettings: UiSettings) {
         }
 
         if (groupTransactions) {
-            GroupedTransactionsListItems(transactionsListModifier, transactionsToDisplay, userAccountsId, uiSettings)
+            GroupedTransactionsListItems(transactionsListModifier, transactionsToDisplay, userAccountsId)
         } else {
             LazyColumn(transactionsListModifier.padding(top = 8.dp, bottom = 16.dp)) {
                 itemsIndexed(transactionsToDisplay) { index, transaction ->
-                    val backgroundColor = if (zebraStripes && index % 2 == 1) Colors.Zinc100_50 else Color.White // TODO: this is duplicated code from GroupedTransactionsListItems
+                    TransactionListItem(userAccountsId[transaction.userAccountId], transaction, index, transactionsToDisplay.size)
-                    TransactionListItem(userAccountsId[transaction.userAccountId], transaction, backgroundColor)
-
-                    if (index < transactionsToDisplay.size - 1) { // TODO: this is duplicated code from GroupedTransactionsListItems
-                        Divider(color = Colors.Zinc200, thickness = 1.dp)
-                    }
                 }
             }
         }