feat: home screen redesign with vertical pager

app/src/main/java/to/bitkit/data/SettingsStore.kt

@@ -124,6 +124,7 @@ data class SettingsData(
     val backupWarningIgnoredMillis: Long = 0,
     val notificationsIgnoredMillis: Long = 0,
     val balanceWarningTimes: Int = 0,
+    val widgetsOnboardingHintDismissed: Boolean = false,
     val coinSelectAuto: Boolean = true,
     val coinSelectPreference: CoinSelectionPreference = CoinSelectionPreference.BranchAndBound,
     val electrumServer: String = Env.electrumServerUrl,

app/src/main/java/to/bitkit/data/WidgetsStore.kt

@@ -160,9 +160,10 @@ class WidgetsStore @Inject constructor(
 @Serializable
 data class WidgetsData(
     val widgets: List<WidgetWithPosition> = listOf(
-        WidgetWithPosition(type = WidgetType.PRICE, position = 0),
-        WidgetWithPosition(type = WidgetType.BLOCK, position = 1),
-        WidgetWithPosition(type = WidgetType.NEWS, position = 2),
+        WidgetWithPosition(type = WidgetType.SUGGESTIONS, position = 0),
+        WidgetWithPosition(type = WidgetType.PRICE, position = 1),
+        WidgetWithPosition(type = WidgetType.BLOCK, position = 2),
+        WidgetWithPosition(type = WidgetType.NEWS, position = 3),
     ),
     val headlinePreferences: HeadlinePreferences = HeadlinePreferences(),
     val factsPreferences: FactsPreferences = FactsPreferences(),

app/src/main/java/to/bitkit/data/dto/price/PriceDTO.kt

@@ -1,9 +1,11 @@
 package to.bitkit.data.dto.price
 
+import androidx.compose.runtime.Stable
 import kotlinx.serialization.Serializable
 
+@Stable
 @Serializable
 data class PriceDTO(
-    val widgets: List<PriceWidgetData>,
+    @Stable val widgets: List<PriceWidgetData>,
     val source: String
 )

app/src/main/java/to/bitkit/models/BalanceState.kt

@@ -1,7 +1,9 @@
 package to.bitkit.models
 
+import androidx.compose.runtime.Immutable
 import kotlinx.serialization.Serializable
 
+@Immutable
 @Serializable
 data class BalanceState(
     val totalOnchainSats: ULong = 0uL,

app/src/main/java/to/bitkit/models/WidgetType.kt

@@ -31,5 +31,9 @@ enum class WidgetType(
     WEATHER(
         iconRes = R.drawable.widget_cloud,
         title = R.string.widgets__weather__name
+    ),
+    SUGGESTIONS(
+        iconRes = R.drawable.widget_suggestions,
+        title = R.string.widgets__suggestions__name,
     )
 }

app/src/main/java/to/bitkit/models/WidgetWithPosition.kt

@@ -1,7 +1,9 @@
 package to.bitkit.models
 
+import androidx.compose.runtime.Immutable
 import kotlinx.serialization.Serializable
 
+@Immutable
 @Serializable
 data class WidgetWithPosition(
     val type: WidgetType,

app/src/main/java/to/bitkit/models/widget/ArticleModel.kt

@@ -1,5 +1,6 @@
 package to.bitkit.models.widget
 
+import androidx.compose.runtime.Immutable
 import kotlinx.serialization.Serializable
 import to.bitkit.data.dto.ArticleDTO
 import to.bitkit.ext.toRelativeTimeString
@@ -12,6 +13,7 @@ import kotlin.time.ExperimentalTime
 
 private const val TAG = "ArticleModel"
 
+@Immutable
 @Serializable
 data class ArticleModel(
     val title: String,

app/src/main/java/to/bitkit/models/widget/BlockModel.kt

@@ -1,10 +1,12 @@
 package to.bitkit.models.widget
 
+import androidx.compose.runtime.Immutable
 import kotlinx.serialization.Serializable
 import to.bitkit.data.dto.BlockDTO
 import to.bitkit.ext.toDateUTC
 import to.bitkit.ext.toTimeUTC
 
+@Immutable
 @Serializable
 data class BlockModel(
     val height: String,

app/src/main/java/to/bitkit/models/widget/BlocksPreferences.kt

@@ -1,7 +1,9 @@
 package to.bitkit.models.widget
 
+import androidx.compose.runtime.Immutable
 import kotlinx.serialization.Serializable
 
+@Immutable
 @Serializable
 data class BlocksPreferences(
     val showBlock: Boolean = true,

app/src/main/java/to/bitkit/models/widget/FactsPreferences.kt

@@ -1,7 +1,9 @@
 package to.bitkit.models.widget
 
+import androidx.compose.runtime.Immutable
 import kotlinx.serialization.Serializable
 
+@Immutable
 @Serializable
 data class FactsPreferences(
     val showSource: Boolean = false

app/src/main/java/to/bitkit/models/widget/HeadlinePreferences.kt

@@ -1,7 +1,9 @@
 package to.bitkit.models.widget
 
+import androidx.compose.runtime.Immutable
 import kotlinx.serialization.Serializable
 
+@Immutable
 @Serializable
 data class HeadlinePreferences(
     val showTime: Boolean = true,

app/src/main/java/to/bitkit/models/widget/PricePreferences.kt

@@ -1,12 +1,14 @@
 package to.bitkit.models.widget
 
+import androidx.compose.runtime.Stable
 import kotlinx.serialization.Serializable
 import to.bitkit.data.dto.price.GraphPeriod
 import to.bitkit.data.dto.price.TradingPair
 
+@Stable
 @Serializable
 data class PricePreferences(
-    val enabledPairs: List<TradingPair> = listOf(
+    @Stable val enabledPairs: List<TradingPair> = listOf(
         TradingPair.BTC_USD
     ),
     val period: GraphPeriod? = GraphPeriod.ONE_DAY,

app/src/main/java/to/bitkit/models/widget/WeatherPreferences.kt

@@ -1,7 +1,9 @@
 package to.bitkit.models.widget
 
+import androidx.compose.runtime.Immutable
 import kotlinx.serialization.Serializable
 
+@Immutable
 @Serializable
 data class WeatherPreferences(
     val showTitle: Boolean = true,

app/src/main/java/to/bitkit/repositories/WidgetsRepo.kt

@@ -84,7 +84,7 @@ class WidgetsRepo @Inject constructor(
 
     private fun updateWidgetJobs(enabledWidgetTypes: Set<WidgetType>) {
         val widgetTypesWithServices = WidgetType.entries.filter {
-            it != WidgetType.CALCULATOR
+            it != WidgetType.CALCULATOR && it != WidgetType.SUGGESTIONS
         }
 
         widgetTypesWithServices.forEach { widgetType ->
@@ -138,7 +138,9 @@ class WidgetsRepo @Inject constructor(
                 }
             }
 
-            WidgetType.CALCULATOR -> throw NotImplementedError("Calculator widget doesn't need a service")
+            WidgetType.CALCULATOR,
+            WidgetType.SUGGESTIONS,
+            -> throw NotImplementedError("Widget doesn't need a service")
         }
 
         widgetJobs[widgetType] = job
@@ -226,8 +228,10 @@ class WidgetsRepo @Inject constructor(
                 widgetsStore.updateBlock(block)
             }
 
-            WidgetType.CALCULATOR -> {
-                throw NotImplementedError("Calculator widget doesn't need a service")
+            WidgetType.CALCULATOR,
+            WidgetType.SUGGESTIONS,
+            -> {
+                throw NotImplementedError("Widget doesn't need a service")
             }
 
             WidgetType.FACTS -> updateWidget(factsService) { facts ->

app/src/main/java/to/bitkit/ui/ContentView.kt

@@ -105,6 +105,8 @@ import to.bitkit.ui.screens.wallets.activity.TagSelectorSheet
 import to.bitkit.ui.screens.wallets.receive.ReceiveSheet
 import to.bitkit.ui.screens.wallets.suggestion.BuyIntroScreen
 import to.bitkit.ui.screens.widgets.AddWidgetsScreen
+import to.bitkit.ui.screens.widgets.suggestions.SuggestionsPreviewScreen
+import to.bitkit.ui.screens.widgets.suggestions.SuggestionsViewModel
 import to.bitkit.ui.screens.widgets.WidgetsIntroScreen
 import to.bitkit.ui.screens.widgets.blocks.BlocksEditScreen
 import to.bitkit.ui.screens.widgets.blocks.BlocksPreviewScreen
@@ -1358,10 +1360,19 @@ private fun NavGraphBuilder.widgets(
                     WidgetType.NEWS -> navController.navigate(Routes.HeadlinesPreview)
                     WidgetType.PRICE -> navController.navigate(Routes.PricePreview)
                     WidgetType.WEATHER -> navController.navigate(Routes.WeatherPreview)
+                    WidgetType.SUGGESTIONS -> navController.navigate(Routes.SuggestionsPreview)
                 }
             },
             fiatSymbol = LocalCurrencies.current.currencySymbol,
-            onBackCLick = { navController.popBackStack() }
+            onBackCLick = { navController.popBackStack() },
+        )
+    }
+    composableWithDefaultTransitions<Routes.SuggestionsPreview> {
+        val viewModel = hiltViewModel<SuggestionsViewModel>()
+        SuggestionsPreviewScreen(
+            suggestionsViewModel = viewModel,
+            onClose = { navController.navigateToHome() },
+            onBack = { navController.popBackStack() },
         )
     }
     composableWithDefaultTransitions<Routes.CalculatorPreview> {
@@ -1931,6 +1942,9 @@ sealed interface Routes {
     @Serializable
     data object AddWidget : Routes
 
+    @Serializable
+    data object SuggestionsPreview : Routes
+
     @Serializable
     data object Headlines : Routes
 

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

@@ -15,6 +15,7 @@ import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.requiredHeight
+import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.items
 import androidx.compose.material3.Icon
@@ -161,7 +162,8 @@ fun ActivityBanner(
             Icon(
                 painter = painterResource(icon),
                 contentDescription = null,
-                tint = gradientColor
+                tint = gradientColor,
+                modifier = Modifier.size(20.dp)
             )
 
             Headline20(

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

@@ -17,6 +17,7 @@ import androidx.compose.ui.platform.LocalInspectionMode
 import androidx.compose.ui.platform.testTag
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.dp
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import to.bitkit.R
@@ -203,6 +204,7 @@ fun LargeRow(
         if (!hideBalance && prefix != null) {
             Display(
                 text = prefix,
+                fontWeight = FontWeight.ExtraBold,
                 color = Colors.White64,
                 modifier = Modifier
                     .padding(end = 8.dp)
@@ -212,6 +214,7 @@ fun LargeRow(
         if (showSymbol && !isSymbolSuffix) {
             Display(
                 text = symbol,
+                fontWeight = FontWeight.ExtraBold,
                 color = Colors.White64,
                 modifier = Modifier
                     .padding(end = 8.dp)
@@ -231,6 +234,7 @@ fun LargeRow(
         if (showSymbol && isSymbolSuffix) {
             Display(
                 text = symbol,
+                fontWeight = FontWeight.ExtraBold,
                 color = Colors.White64,
                 modifier = Modifier
                     .padding(start = 8.dp)

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

@@ -12,7 +12,8 @@ import androidx.compose.foundation.border
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.aspectRatio
+import androidx.compose.foundation.layout.defaultMinSize
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
@@ -25,6 +26,7 @@ import androidx.compose.material3.IconButton
 import androidx.compose.material3.ShapeDefaults
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.Brush
@@ -54,7 +56,6 @@ fun SuggestionCard(
     description: String,
     @DrawableRes icon: Int,
     onClose: (() -> Unit)? = null,
-    size: Int = 152,
     disableGlow: Boolean = false,
     captionColor: Color = Colors.White64,
     onClick: () -> Unit,
@@ -75,7 +76,8 @@ fun SuggestionCard(
 
     Box(
         modifier = modifier
-            .size(size.dp)
+            .fillMaxWidth()
+            .aspectRatio(1f)
             .clip(ShapeDefaults.Large)
             .then(
                 if (isDismissible || disableGlow) {
@@ -108,34 +110,38 @@ fun SuggestionCard(
             .clickableAlpha { onClick() }
     ) {
         Column(
+            verticalArrangement = Arrangement.Bottom,
             modifier = Modifier
                 .fillMaxWidth()
-                .padding(horizontal = 16.dp, vertical = 12.dp),
-            verticalArrangement = Arrangement.spacedBy(8.dp)
+                .padding(16.dp),
         ) {
-            Row(
+            Box(
                 modifier = Modifier
                     .fillMaxWidth()
                     .weight(1f)
             ) {
                 Image(
                     painter = painterResource(icon),
                     contentDescription = null,
-                    contentScale = ContentScale.FillHeight,
-                    modifier = Modifier.weight(1f)
+                    alignment = Alignment.TopStart,
+                    contentScale = ContentScale.Fit,
+                    modifier = Modifier
+                        .defaultMinSize(minHeight = 80.dp)
+                        .align(Alignment.BottomStart)
                 )
 
                 if (onClose != null) {
                     IconButton(
                         onClick = onClose,
                         modifier = Modifier
                             .size(16.dp)
+                            .align(Alignment.TopEnd)
                             .testTag("SuggestionDismiss")
                     ) {
                         Icon(
                             painter = painterResource(R.drawable.ic_x),
                             contentDescription = null,
-                            tint = Colors.White,
+                            tint = Colors.White64,
                         )
                     }
                 }
@@ -144,6 +150,7 @@ fun SuggestionCard(
             Headline20(
                 text = AnnotatedString(title),
                 color = Colors.White,
+                modifier = Modifier.padding(top = 4.dp),
             )
 
             CaptionB(
@@ -173,7 +180,8 @@ private fun Modifier.gradientRadialBackground(
 @Composable
 private fun Preview() {
     LazyVerticalGrid(
-        verticalArrangement = Arrangement.spacedBy(4.dp),
+        verticalArrangement = Arrangement.spacedBy(16.dp),
+        horizontalArrangement = Arrangement.spacedBy(16.dp),
         columns = GridCells.Fixed(2),
         modifier = Modifier.fillMaxSize(),
     ) {