improvement: Move card expiry date to a separate field #493

common/src/commonMain/kotlin/com/artemchep/keyguard/feature/home/vault/component/VaultViewCardItem.kt

@@ -1,12 +1,9 @@
 package com.artemchep.keyguard.feature.home.vault.component
 
 import androidx.compose.animation.core.animateFloatAsState
-import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
-import androidx.compose.foundation.layout.RowScope
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.height
-import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.outlined.ContentCopy
@@ -215,29 +212,6 @@ fun VaultViewCardItem(
                     }
                 }
             }
-            if (
-                item.data.fromMonth != null ||
-                item.data.fromYear != null ||
-                item.data.expMonth != null ||
-                item.data.expYear != null
-            ) {
-                Spacer(
-                    modifier = Modifier
-                        .height(16.dp),
-                )
-                Row {
-                    DateLabel(
-                        label = stringResource(Res.string.card_valid_from),
-                        month = item.data.fromMonth,
-                        year = item.data.fromYear,
-                    )
-                    DateLabel(
-                        label = stringResource(Res.string.card_valid_to),
-                        month = item.data.expMonth,
-                        year = item.data.expYear,
-                    )
-                }
-            }
             val cardholderName = item.data.cardholderName
             if (cardholderName != null) {
                 Spacer(
@@ -296,49 +270,3 @@ fun VaultViewCardItem(
         dropdown = item.dropdown,
     )
 }
-
-@Composable
-private fun RowScope.DateLabel(
-    label: String,
-    month: String?,
-    year: String?,
-) {
-    if (
-        month == null &&
-        year == null
-    ) {
-        return
-    }
-
-    val monthFormatted = month ?: "mm"
-    val yearFormatted = year ?: "yyyy"
-    DateLabelContent(
-        text = label,
-        date = "$monthFormatted/$yearFormatted",
-    )
-    Spacer(modifier = Modifier.width(24.dp))
-}
-
-@Composable
-private fun DateLabelContent(
-    modifier: Modifier = Modifier,
-    text: String,
-    date: String,
-) {
-    Column(
-        modifier = modifier,
-        horizontalAlignment = Alignment.Start,
-    ) {
-        Text(
-            text = text,
-            color = LocalContentColor.current
-                .combineAlpha(MediumEmphasisAlpha),
-            style = MaterialTheme.typography.labelSmall,
-        )
-        Text(
-            text = date,
-            style = MaterialTheme.typography.bodyMedium,
-            fontFamily = monoFontFamily,
-        )
-    }
-}

common/src/commonMain/kotlin/com/artemchep/keyguard/feature/home/vault/screen/VaultViewStateProducer.kt

@@ -942,6 +942,32 @@ private fun RememberStateFlowScope.oh(
             data = cipherCard,
         )
         emit(model)
+        val cipherCardFromYear = cipherCard.fromYear
+        val cipherCardFromMonth = cipherCard.fromMonth
+        if (cipherCardFromYear != null || cipherCardFromMonth != null) {
+            val item = createExpDate(
+                copy = copy,
+                id = "card.from_date",
+                title = translate(Res.string.card_valid_from),
+                year = cipherCardFromYear,
+                month = cipherCardFromMonth,
+                elevated = true,
+            )
+            emit(item)
+        }
+        val cipherCardExpYear = cipherCard.expYear
+        val cipherCardExpMonth = cipherCard.expMonth
+        if (cipherCardExpYear != null || cipherCardExpMonth != null) {
+            val item = createExpDate(
+                copy = copy,
+                id = "card.exp_date",
+                title = translate(Res.string.card_valid_to),
+                year = cipherCardExpYear,
+                month = cipherCardExpMonth,
+                elevated = true,
+            )
+            emit(item)
+        }
         val cipherCardCode = cipherCard.code
         if (cipherCardCode != null) {
             val cvv = create(
@@ -2699,6 +2725,61 @@ suspend fun RememberStateFlowScope.create(
     )
 }
 
+suspend fun RememberStateFlowScope.createExpDate(
+    copy: CopyText,
+    id: String,
+    title: String?,
+    month: String?,
+    year: String?,
+    elevated: Boolean = false,
+): VaultViewItem {
+    val monthFormatted = month ?: "mm"
+    val yearFormatted = year ?: "yyyy"
+    // Compose the value of a date, raw value
+    // doesn't contain the / symbol because it
+    // usually is inserted automatically.
+    val valueRaw = kotlin.run {
+        val monthCopy = monthFormatted.takeLast(2).padStart(2, '0')
+        val yearCopy = yearFormatted.takeLast(2)
+        "$monthCopy$yearCopy"
+    }
+    val valueFormatted = "$monthFormatted/$yearFormatted"
+
+    val dropdown = buildContextItems {
+        section {
+            this += copy.FlatItemAction(
+                title = Res.string.copy.wrap(),
+                value = valueRaw,
+            )
+            this += copy.FlatItemAction(
+                title = Res.string.copy_expiration_month.wrap(),
+                value = month,
+                type = CopyText.Type.CARD_EXP_MONTH,
+            )
+            this += copy.FlatItemAction(
+                title = Res.string.copy_expiration_year.wrap(),
+                value = year,
+                type = CopyText.Type.CARD_EXP_YEAR,
+            )
+        }
+    }
+    return VaultViewItem.Value(
+        id = id,
+        elevation = if (elevated) 1.dp else 0.dp,
+        title = title,
+        value = valueFormatted,
+        verify = null,
+        private = false,
+        hidden = false,
+        monospace = false,
+        colorize = false,
+        leading = null,
+        badge = null,
+        badge2 = emptyList(),
+        dropdown = dropdown,
+    )
+}
+
 private suspend fun RememberStateFlowScope.create(
     copy: CopyText,
     id: String,
@@ -2720,16 +2801,6 @@ private suspend fun RememberStateFlowScope.create(
                 value = data.cardholderName,
                 type = CopyText.Type.CARD_CARDHOLDER_NAME,
             )
-            this += copy.FlatItemAction(
-                title = Res.string.copy_expiration_month.wrap(),
-                value = data.expMonth,
-                type = CopyText.Type.CARD_EXP_MONTH,
-            )
-            this += copy.FlatItemAction(
-                title = Res.string.copy_expiration_year.wrap(),
-                value = data.expYear,
-                type = CopyText.Type.CARD_EXP_YEAR,
-            )
         }
         section {
             val cardNumber = data.number