feat(wallet): v2 card-stack collapse + appreciation pill

apps/flipcash/core/src/main/kotlin/com/flipcash/app/core/ui/CurrencyAppreciationLabel.kt

@@ -1,6 +1,7 @@
 package com.flipcash.app.core.ui
 
 import androidx.compose.foundation.background
+import androidx.compose.foundation.border
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.padding
@@ -15,13 +16,32 @@ import com.flipcash.app.core.money.formattedAppreciation
 import com.flipcash.core.R
 import com.getcode.opencode.model.financial.Fiat
 import com.getcode.theme.CodeTheme
+import com.getcode.theme.White20
 import com.getcode.theme.extraSmall
 import com.getcode.ui.components.text.AnimatedNumberText
 
+/** Controls the visual treatment of the appreciation badge. */
+enum class AppreciationStyle {
+    /** Sentiment-tinted filled pill (green/red). Used in v1 balance and token-info screens. */
+    Classic,
+    /**
+     * Neutral bordered pill with secondary text colour. Used in the v2 wallet screen.
+     * Layout: `[signed delta in a bordered box]  [label]`, both in secondary text.
+     */
+    Pill,
+}
+
+/**
+ * Displays a fiat appreciation/depreciation value with an optional label.
+ *
+ * [style] defaults to [AppreciationStyle.Classic] so existing call sites are unchanged.
+ * Pass [AppreciationStyle.Pill] in the v2 wallet header for the neutral bordered treatment.
+ */
 @Composable
 fun CurrencyAppreciationLabel(
     appreciation: Fiat,
     modifier: Modifier = Modifier,
+    style: AppreciationStyle = AppreciationStyle.Classic,
 ) {
     val hasAppreciation = appreciation.toDouble() >= 0
     val changeColor = if (hasAppreciation) {
@@ -35,30 +55,54 @@ fun CurrencyAppreciationLabel(
         verticalAlignment = Alignment.CenterVertically,
         horizontalArrangement = Arrangement.spacedBy(CodeTheme.dimens.grid.x1),
     ) {
+        val pillModifier = when (style) {
+            AppreciationStyle.Pill ->
+                Modifier
+                    .border(
+                        width = CodeTheme.dimens.border,
+                        color = White20,
+                        shape = MaterialTheme.shapes.extraSmall,
+                    )
+                    .padding(
+                        vertical = 3.dp,
+                        horizontal = CodeTheme.dimens.grid.x1,
+                    )
+            AppreciationStyle.Classic ->
+                Modifier
+                    .background(
+                        color = changeColor.copy(0.20f),
+                        shape = MaterialTheme.shapes.extraSmall,
+                    )
+                    .padding(
+                        vertical = 2.dp,
+                        horizontal = CodeTheme.dimens.grid.x1,
+                    )
+        }
         AnimatedNumberText(
-            modifier = Modifier
-                .background(
-                    color = changeColor.copy(0.20f),
-                    shape = MaterialTheme.shapes.extraSmall,
-                )
-                .padding(
-                    vertical = 2.dp,
-                    horizontal = CodeTheme.dimens.grid.x1
-                ),
+            modifier = pillModifier,
             value = appreciation.formattedAppreciation(),
             style = CodeTheme.typography.textSmall,
-            color = changeColor,
+            color = if (style == AppreciationStyle.Pill) CodeTheme.colors.textSecondary else changeColor,
         )
 
-        val label = if (hasAppreciation) {
-            stringResource(R.string.label_fromCurrencyAppreciation)
-        } else {
-            stringResource(R.string.label_fromCurrencyDepreciation)
+        val label = when (style) {
+            AppreciationStyle.Pill ->
+                if (hasAppreciation) {
+                    stringResource(R.string.label_fromAppreciation)
+                } else {
+                    stringResource(R.string.label_fromDepreciation)
+                }
+            AppreciationStyle.Classic ->
+                if (hasAppreciation) {
+                    stringResource(R.string.label_fromCurrencyAppreciation)
+                } else {
+                    stringResource(R.string.label_fromCurrencyDepreciation)
+                }
         }
         Text(
             text = label,
             style = CodeTheme.typography.textSmall,
             color = CodeTheme.colors.textSecondary,
         )
     }
-}
+}

apps/flipcash/core/src/main/kotlin/com/flipcash/app/core/ui/TokenCardStack.kt

@@ -20,14 +20,17 @@ import kotlin.collections.forEach
  * the viewport top (`-itemOffset`); it is read in the **placement** phase so scrolling only re-places
  * the cards and never re-measures/re-composes them. [pinInset] holds the collapsing deck below top
  * chrome (e.g. the status bar). Cards are drawn front-to-back so the last (highest-value) sits on top.
+ *
+ * When [collapsedReveal] is 0 (the default), back cards collapse completely behind the front card —
+ * no slivers are visible at rest — matching the iOS wallet card-stack behaviour.
  */
 @Composable
 fun TokenCardStack(
     tokens: List<TokenWithLocalizedBalance>,
     modifier: Modifier = Modifier,
     cardHeight: Dp = 224.dp,
     fannedReveal: Dp = 64.dp,
-    collapsedReveal: Dp = 12.dp,
+    collapsedReveal: Dp = 0.dp,
     pinInset: Dp = 0.dp,
     scrolledPast: () -> Float = { 0f },
     onCardClick: (TokenWithLocalizedBalance) -> Unit = {},

apps/flipcash/core/src/main/res/values/strings.xml

@@ -590,6 +590,8 @@
 
     <string name="label_fromCurrencyAppreciation">from currency appreciation</string>
     <string name="label_fromCurrencyDepreciation">from currency depreciation</string>
+    <string name="label_fromAppreciation">from appreciation</string>
+    <string name="label_fromDepreciation">from depreciation</string>
 
     <string name="title_processingYourTransaction">This Will Take a Minute</string>
     <string name="subtitle_processingYourTransaction">This transaction typically takes about a minute. You may leave the app while it completes</string>

apps/flipcash/features/balance/src/main/kotlin/com/flipcash/app/balance/internal/WalletScreenContent.kt

@@ -30,6 +30,7 @@ import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.unit.dp
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import com.flipcash.app.core.AppRoute
+import com.flipcash.app.core.ui.AppreciationStyle
 import com.flipcash.app.core.ui.TokenCardStack
 import com.flipcash.app.balance.internal.components.BalanceHeader
 import com.flipcash.app.balance.internal.components.OnboardingFunnel
@@ -82,15 +83,15 @@ internal fun WalletScreenContent(
         )
     ) {
         item {
-            Spacer(Modifier.height(CodeTheme.dimens.grid.x15))
-        }
-
-        item {
+            // v2 wallet header: 96 dp top / 44 dp bottom per Figma node 8966:1578.
             BalanceHeader(
                 modifier = Modifier
                     .fillMaxWidth(),
                 balance = tokenState.totalBalance,
                 appreciation = tokenState.aggregateAppreciation,
+                topPadding = 96.dp,
+                bottomPadding = 44.dp,
+                appreciationStyle = AppreciationStyle.Pill,
             ) {
                 dispatchEvent(WalletViewModel.Event.OpenCurrencySelection)
             }

apps/flipcash/features/balance/src/main/kotlin/com/flipcash/app/balance/internal/components/BalanceHeader.kt

@@ -7,25 +7,40 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.Dp
+import com.flipcash.app.core.ui.AppreciationStyle
 import com.flipcash.app.core.ui.CurrencyAppreciationLabel
 import com.getcode.opencode.compose.LocalExchange
 import com.getcode.opencode.model.financial.LocalFiat
 import com.getcode.theme.CodeTheme
 import com.getcode.ui.components.text.AmountArea
 import com.getcode.ui.theme.CodeCircularProgressIndicator
 
+/**
+ * Balance header showing the total portfolio value and an optional appreciation pill.
+ *
+ * [topPadding] and [bottomPadding] allow callers to override the default symmetric vertical padding
+ * (both default to [CodeTheme.dimens.grid.x9], preserving v1 behaviour). The v2 wallet screen uses
+ * asymmetric values (~96 dp top, ~44 dp bottom) to match the Figma spec (node 8966:1578).
+ *
+ * [appreciationStyle] defaults to [AppreciationStyle.Classic] (sentiment-tinted fill); pass
+ * [AppreciationStyle.Pill] for the v2 neutral bordered treatment.
+ */
 @Composable
 internal fun BalanceHeader(
     balance: LocalFiat?,
     appreciation: LocalFiat?,
     modifier: Modifier = Modifier,
+    topPadding: Dp = CodeTheme.dimens.grid.x9,
+    bottomPadding: Dp = CodeTheme.dimens.grid.x9,
+    appreciationStyle: AppreciationStyle = AppreciationStyle.Classic,
     onClick: () -> Unit
 ) {
     val exchange = LocalExchange.current
     Column(
         modifier = modifier
             .padding(horizontal = CodeTheme.dimens.inset)
-            .padding(vertical = CodeTheme.dimens.grid.x9),
+            .padding(top = topPadding, bottom = bottomPadding),
         horizontalAlignment = Alignment.CenterHorizontally,
     ) {
         if (balance == null) {
@@ -45,8 +60,11 @@ internal fun BalanceHeader(
             )
 
             if (appreciation != null) {
-                CurrencyAppreciationLabel(appreciation.nativeAmount)
+                CurrencyAppreciationLabel(
+                    appreciation = appreciation.nativeAmount,
+                    style = appreciationStyle,
+                )
             }
         }
     }
-}
+}