Reuse the BitwardenListItem and BitwardenGroup items on the Vault (#495)

app/src/main/java/com/x8bit/bitwarden/ui/platform/components/BitwardenListItem.kt

@@ -44,11 +44,11 @@ import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme
 @Composable
 fun BitwardenListItem(
     label: String,
-    supportingLabel: String,
     startIcon: Painter,
     onClick: () -> Unit,
     selectionDataList: List<SelectionItemData>,
     modifier: Modifier = Modifier,
+    supportingLabel: String? = null,
 ) {
     var shouldShowDialog by remember { mutableStateOf(false) }
     Row(
@@ -78,11 +78,13 @@ fun BitwardenListItem(
                 color = MaterialTheme.colorScheme.onSurface,
             )
 
-            Text(
-                text = supportingLabel,
-                style = MaterialTheme.typography.bodyMedium,
-                color = MaterialTheme.colorScheme.onSurfaceVariant,
-            )
+            supportingLabel?.let {
+                Text(
+                    text = it,
+                    style = MaterialTheme.typography.bodyMedium,
+                    color = MaterialTheme.colorScheme.onSurfaceVariant,
+                )
+            }
         }
 
         IconButton(

app/src/main/java/com/x8bit/bitwarden/ui/vault/feature/vault/VaultContent.kt

@@ -14,6 +14,7 @@ import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.unit.dp
 import com.x8bit.bitwarden.R
+import com.x8bit.bitwarden.ui.platform.components.BitwardenGroupItem
 import com.x8bit.bitwarden.ui.platform.components.BitwardenListHeaderTextWithSupportLabel
 
 /**
@@ -96,11 +97,12 @@ fun VaultContent(
         }
 
         item {
-            VaultGroupListItem(
+            BitwardenGroupItem(
                 startIcon = painterResource(id = R.drawable.ic_login_item),
                 label = stringResource(id = R.string.type_login),
                 supportingLabel = state.loginItemsCount.toString(),
                 onClick = loginGroupClick,
+                showDivider = false,
                 modifier = Modifier
                     .fillMaxWidth()
                     .padding(horizontal = 16.dp),
@@ -108,11 +110,12 @@ fun VaultContent(
         }
 
         item {
-            VaultGroupListItem(
+            BitwardenGroupItem(
                 startIcon = painterResource(id = R.drawable.ic_card_item),
                 label = stringResource(id = R.string.type_card),
                 supportingLabel = state.cardItemsCount.toString(),
                 onClick = cardGroupClick,
+                showDivider = false,
                 modifier = Modifier
                     .fillMaxWidth()
                     .padding(horizontal = 16.dp),
@@ -120,11 +123,12 @@ fun VaultContent(
         }
 
         item {
-            VaultGroupListItem(
+            BitwardenGroupItem(
                 startIcon = painterResource(id = R.drawable.ic_identity_item),
                 label = stringResource(id = R.string.type_identity),
                 supportingLabel = state.identityItemsCount.toString(),
                 onClick = identityGroupClick,
+                showDivider = false,
                 modifier = Modifier
                     .fillMaxWidth()
                     .padding(horizontal = 16.dp),
@@ -132,11 +136,12 @@ fun VaultContent(
         }
 
         item {
-            VaultGroupListItem(
+            BitwardenGroupItem(
                 startIcon = painterResource(id = R.drawable.ic_secure_note_item),
                 label = stringResource(id = R.string.type_secure_note),
                 supportingLabel = state.secureNoteItemsCount.toString(),
                 onClick = secureNoteGroupClick,
+                showDivider = false,
                 modifier = Modifier
                     .fillMaxWidth()
                     .padding(horizontal = 16.dp),
@@ -169,11 +174,12 @@ fun VaultContent(
             }
 
             items(state.folderItems) { folder ->
-                VaultGroupListItem(
+                BitwardenGroupItem(
                     startIcon = painterResource(id = R.drawable.ic_folder),
                     label = folder.name(),
                     supportingLabel = folder.itemCount.toString(),
                     onClick = { folderClick(folder) },
+                    showDivider = false,
                     modifier = Modifier
                         .fillMaxWidth()
                         .padding(horizontal = 16.dp),
@@ -236,11 +242,12 @@ fun VaultContent(
             }
 
             items(state.collectionItems) { collection ->
-                VaultGroupListItem(
+                BitwardenGroupItem(
                     startIcon = painterResource(id = R.drawable.ic_collection),
                     label = collection.name,
                     supportingLabel = collection.itemCount.toString(),
                     onClick = { collectionClick(collection) },
+                    showDivider = false,
                     modifier = Modifier
                         .fillMaxWidth()
                         .padding(horizontal = 16.dp),
@@ -273,11 +280,12 @@ fun VaultContent(
         }
 
         item {
-            VaultGroupListItem(
+            BitwardenGroupItem(
                 startIcon = painterResource(id = R.drawable.ic_trash),
                 label = stringResource(id = R.string.trash),
                 supportingLabel = state.trashItemsCount.toString(),
                 onClick = trashClick,
+                showDivider = false,
                 modifier = Modifier
                     .fillMaxWidth()
                     .padding(horizontal = 16.dp),

app/src/main/java/com/x8bit/bitwarden/ui/vault/feature/vault/VaultEntryListItem.kt

@@ -1,28 +1,15 @@
 package com.x8bit.bitwarden.ui.vault.feature.vault
 
 import android.widget.Toast
-import androidx.compose.foundation.clickable
-import androidx.compose.foundation.interaction.MutableInteractionSource
-import androidx.compose.foundation.layout.Arrangement
-import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.Row
-import androidx.compose.foundation.layout.defaultMinSize
-import androidx.compose.foundation.layout.padding
-import androidx.compose.material.ripple.rememberRipple
-import androidx.compose.material3.Icon
-import androidx.compose.material3.IconButton
-import androidx.compose.material3.MaterialTheme
-import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
-import androidx.compose.runtime.remember
-import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.painter.Painter
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.tooling.preview.Preview
-import androidx.compose.ui.unit.dp
 import com.x8bit.bitwarden.R
+import com.x8bit.bitwarden.ui.platform.components.BitwardenListItem
+import com.x8bit.bitwarden.ui.platform.components.SelectionItemData
 import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme
 
 /**
@@ -38,59 +25,27 @@ import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme
 fun VaultEntryListItem(
     startIcon: Painter,
     label: String,
-    supportingLabel: String? = null,
     onClick: () -> Unit,
-    modifier: Modifier,
+    modifier: Modifier = Modifier,
+    supportingLabel: String? = null,
 ) {
-    Row(
-        modifier = Modifier
-            .clickable(
-                interactionSource = remember { MutableInteractionSource() },
-                indication = rememberRipple(color = MaterialTheme.colorScheme.primary),
-                onClick = onClick,
-            )
-            .defaultMinSize(minHeight = 72.dp)
-            .padding(vertical = 8.dp)
-            .then(modifier),
-        verticalAlignment = Alignment.CenterVertically,
-        horizontalArrangement = Arrangement.spacedBy(16.dp),
-    ) {
-        Icon(
-            painter = startIcon,
-            contentDescription = null,
-            tint = MaterialTheme.colorScheme.onSurface,
-        )
-
-        Column(modifier = Modifier.weight(1f)) {
-            Text(
-                text = label,
-                style = MaterialTheme.typography.bodyLarge,
-                color = MaterialTheme.colorScheme.onSurface,
-            )
-
-            supportingLabel?.let {
-                Text(
-                    text = it,
-                    style = MaterialTheme.typography.bodyMedium,
-                    color = MaterialTheme.colorScheme.onSurfaceVariant,
-                )
-            }
-        }
-
-        val context = LocalContext.current
-        IconButton(
-            onClick = {
-                // TODO: Provide dialog-based implementation (BIT-1353 - BIT-1356)
-                Toast.makeText(context, "Not yet implemented.", Toast.LENGTH_SHORT).show()
-            },
-        ) {
-            Icon(
-                painter = painterResource(id = R.drawable.ic_more_horizontal),
-                contentDescription = null,
-                tint = MaterialTheme.colorScheme.onSurfaceVariant,
-            )
-        }
-    }
+    val context = LocalContext.current
+    BitwardenListItem(
+        modifier = modifier,
+        label = label,
+        supportingLabel = supportingLabel,
+        startIcon = startIcon,
+        onClick = onClick,
+        selectionDataList = listOf(
+            SelectionItemData(
+                text = "Not yet implemented",
+                onClick = {
+                    // TODO: Provide dialog-based implementation (BIT-1353 - BIT-1356)
+                    Toast.makeText(context, "Not yet implemented.", Toast.LENGTH_SHORT).show()
+                },
+            ),
+        ),
+    )
 }
 
 @Preview(showBackground = true)

app/src/main/java/com/x8bit/bitwarden/ui/vault/feature/vault/VaultGroupListItem.kt

@@ -1,95 +0,0 @@
-package com.x8bit.bitwarden.ui.vault.feature.vault
-
-import androidx.compose.foundation.clickable
-import androidx.compose.foundation.interaction.MutableInteractionSource
-import androidx.compose.foundation.layout.Arrangement
-import androidx.compose.foundation.layout.Row
-import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.size
-import androidx.compose.material.ripple.rememberRipple
-import androidx.compose.material3.Icon
-import androidx.compose.material3.MaterialTheme
-import androidx.compose.material3.Text
-import androidx.compose.runtime.Composable
-import androidx.compose.runtime.remember
-import androidx.compose.ui.Alignment
-import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.painter.Painter
-import androidx.compose.ui.res.painterResource
-import androidx.compose.ui.tooling.preview.Preview
-import androidx.compose.ui.unit.dp
-import com.x8bit.bitwarden.R
-import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme
-
-/**
- * A composable function that displays a group list item.
- * The list item consists of a start icon, a label, a supporting label, and a trailing icon.
- *
- * @param startIcon The [Painter] object used to draw the icon at the start of the list item.
- * @param label The main text label to be displayed in the list item.
- * @param supportingLabel The secondary supporting text label to be displayed beside the main label.
- * @param onClick A lambda function that is invoked when the list item is clicked.
- * @param modifier The [Modifier] to be applied to the [Row] composable that holds the list item.
- */
-@Composable
-fun VaultGroupListItem(
-    startIcon: Painter,
-    label: String,
-    supportingLabel: String,
-    onClick: () -> Unit,
-    modifier: Modifier,
-) {
-    Row(
-        modifier = Modifier
-            .clickable(
-                interactionSource = remember { MutableInteractionSource() },
-                indication = rememberRipple(color = MaterialTheme.colorScheme.primary),
-                onClick = onClick,
-            )
-            .padding(vertical = 16.dp)
-            .padding(end = 8.dp)
-            .then(modifier),
-        verticalAlignment = Alignment.CenterVertically,
-        horizontalArrangement = Arrangement.spacedBy(16.dp),
-    ) {
-        Icon(
-            painter = startIcon,
-            contentDescription = null,
-            tint = MaterialTheme.colorScheme.onSurface,
-        )
-
-        Text(
-            text = label,
-            style = MaterialTheme.typography.bodyLarge,
-            color = MaterialTheme.colorScheme.onSurface,
-            modifier = Modifier.weight(1f),
-        )
-
-        Text(
-            text = supportingLabel,
-            style = MaterialTheme.typography.labelSmall,
-            color = MaterialTheme.colorScheme.onSurfaceVariant,
-        )
-
-        Icon(
-            painter = painterResource(id = R.drawable.ic_navigate_next),
-            contentDescription = null,
-            tint = MaterialTheme.colorScheme.onSurfaceVariant,
-            modifier = Modifier.size(24.dp),
-        )
-    }
-}
-
-@Preview(showBackground = true)
-@Composable
-private fun VaultGroupListItem_preview() {
-    BitwardenTheme {
-        VaultGroupListItem(
-            startIcon = painterResource(id = R.drawable.ic_login_item),
-            label = "Main Text",
-            supportingLabel = "100",
-            onClick = {},
-            modifier = Modifier,
-        )
-    }
-}