feat: Truncate long caption in activity list items

Author: ovitrif

app/src/main/java/to/bitkit/services/CoreService.kt

@@ -354,7 +354,8 @@ class ActivityService(
                 "Gift for mom",
                 "Split dinner bill",
                 "Monthly rent",
-                "Gym membership"
+                "Gym membership",
+                "Very long invoice message to test truncation in list",
             )
 
             repeat(count) { i ->

app/src/main/java/to/bitkit/ui/components/Text.kt

@@ -349,6 +349,8 @@ fun CaptionB(
     text: String,
     modifier: Modifier = Modifier,
     color: Color = MaterialTheme.colorScheme.primary,
+    maxLines: Int = Int.MAX_VALUE,
+    overflow: TextOverflow = if (maxLines == 1) TextOverflow.Ellipsis else TextOverflow.Clip,
 ) {
     Text(
         text = text,
@@ -362,6 +364,8 @@ fun CaptionB(
             textAlign = TextAlign.Start,
         ),
         modifier = modifier,
+        maxLines = maxLines,
+        overflow = overflow,
     )
 }
 

app/src/main/java/to/bitkit/ui/screens/wallets/activity/components/ActivityRow.kt

@@ -10,6 +10,7 @@ import androidx.compose.foundation.layout.width
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.platform.LocalInspectionMode
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.tooling.preview.PreviewParameter
@@ -20,6 +21,7 @@ import to.bitkit.ext.DatePattern
 import to.bitkit.ext.formatted
 import to.bitkit.ext.rawId
 import to.bitkit.models.PrimaryDisplay
+import to.bitkit.models.formatToModernDisplay
 import to.bitkit.ui.LocalCurrencies
 import to.bitkit.ui.components.BodyMSB
 import to.bitkit.ui.components.CaptionB
@@ -70,6 +72,7 @@ fun ActivityRow(
         Spacer(modifier = Modifier.width(16.dp))
         Column(
             verticalArrangement = Arrangement.spacedBy(4.dp),
+            modifier = Modifier.weight(1f)
         ) {
             TransactionStatusText(
                 txType = txType,
@@ -91,9 +94,10 @@ fun ActivityRow(
             CaptionB(
                 text = subtitleText,
                 color = Colors.White64,
+                maxLines = 1,
             )
         }
-        Spacer(modifier = Modifier.weight(1f))
+        Spacer(modifier = Modifier.width(16.dp))
         AmountView(
             item = item,
             prefix = amountPrefix,
@@ -141,47 +145,68 @@ private fun AmountView(
     item: Activity,
     prefix: String,
 ) {
-    val currency = currencyViewModel ?: return
-    val (_, _, _, _, displayUnit, primaryDisplay) = LocalCurrencies.current
     val amount = when (item) {
         is Activity.Lightning -> item.v1.value
         is Activity.Onchain -> when (item.v1.txType) {
             PaymentType.SENT -> item.v1.value + item.v1.fee
             else -> item.v1.value
         }
     }
+
+    val isPreview = LocalInspectionMode.current
+    if (isPreview) {
+        AmountViewContent(
+            title = amount.toLong().formatToModernDisplay(),
+            titlePrefix = prefix,
+            subtitle = "$ 123.45",
+        )
+        return
+    }
+
+    val currency = currencyViewModel ?: return
+    val (_, _, _, _, displayUnit, primaryDisplay) = LocalCurrencies.current
+
     currency.convert(sats = amount.toLong())?.let { converted ->
         val btcComponents = converted.bitcoinDisplay(displayUnit)
-        Column(
-            horizontalAlignment = Alignment.End,
-            verticalArrangement = Arrangement.spacedBy(2.dp),
+        if (primaryDisplay == PrimaryDisplay.BITCOIN) {
+            AmountViewContent(
+                title = btcComponents.value,
+                titlePrefix = prefix,
+                subtitle = "${converted.symbol} ${converted.formatted}",
+            )
+        } else {
+            AmountViewContent(
+                title = "${converted.symbol} ${converted.formatted}",
+                titlePrefix = prefix,
+                subtitle = btcComponents.value,
+            )
+        }
+    }
+}
+
+@Composable
+private fun AmountViewContent(
+    title: String,
+    titlePrefix: String,
+    subtitle: String,
+    modifier: Modifier = Modifier,
+) {
+    Column(
+        modifier = modifier,
+        horizontalAlignment = Alignment.End,
+        verticalArrangement = Arrangement.spacedBy(2.dp),
+    ) {
+        Row(
+            verticalAlignment = Alignment.CenterVertically,
+            horizontalArrangement = Arrangement.spacedBy(1.dp),
         ) {
-            if (primaryDisplay == PrimaryDisplay.BITCOIN) {
-                Row(
-                    verticalAlignment = Alignment.CenterVertically,
-                    horizontalArrangement = Arrangement.spacedBy(1.dp),
-                ) {
-                    BodyMSB(text = prefix, color = Colors.White64)
-                    BodyMSB(text = btcComponents.value)
-                }
-                CaptionB(
-                    text = "${converted.symbol} ${converted.formatted}",
-                    color = Colors.White64,
-                )
-            } else {
-                Row(
-                    verticalAlignment = Alignment.CenterVertically,
-                    horizontalArrangement = Arrangement.spacedBy(1.dp),
-                ) {
-                    BodyMSB(text = prefix, color = Colors.White64)
-                    BodyMSB(text = "${converted.symbol} ${converted.formatted}")
-                }
-                CaptionB(
-                    text = btcComponents.value,
-                    color = Colors.White64,
-                )
-            }
+            BodyMSB(text = titlePrefix, color = Colors.White64)
+            BodyMSB(text = title)
         }
+        CaptionB(
+            text = subtitle,
+            color = Colors.White64,
+        )
     }
 }