feat: home screen redesign with vertical pager

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

@@ -113,6 +113,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,9 @@ 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),
     ),
     val headlinePreferences: HeadlinePreferences = HeadlinePreferences(),
     val factsPreferences: FactsPreferences = FactsPreferences(),

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/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
@@ -1393,10 +1395,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> {
@@ -1981,6 +1992,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/SuggestionCard.kt

@@ -13,6 +13,8 @@ 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 +27,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 +57,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 +77,8 @@ fun SuggestionCard(
 
     Box(
         modifier = modifier
-            .size(size.dp)
+            .fillMaxWidth()
+            .aspectRatio(1f)
             .clip(ShapeDefaults.Large)
             .then(
                 if (isDismissible || disableGlow) {
@@ -121,8 +124,11 @@ fun SuggestionCard(
                 Image(
                     painter = painterResource(icon),
                     contentDescription = null,
+                    alignment = Alignment.CenterStart,
                     contentScale = ContentScale.FillHeight,
-                    modifier = Modifier.weight(1f)
+                    modifier = Modifier
+                        .defaultMinSize(minHeight = 96.dp)
+                        .weight(1f)
                 )
 
                 if (onClose != null) {
@@ -135,7 +141,7 @@ fun SuggestionCard(
                         Icon(
                             painter = painterResource(R.drawable.ic_x),
                             contentDescription = null,
-                            tint = Colors.White,
+                            tint = Colors.White64,
                         )
                     }
                 }

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

@@ -50,6 +50,9 @@ import to.bitkit.ui.theme.Colors
 private val iconToTextGap = 4.dp
 private val iconSize = 20.dp
 
+const val TAB_BAR_HEIGHT = 56
+const val TAB_BAR_PADDING_BOTTOM = 8
+
 private val buttonLeftShape = RoundedCornerShape(topStartPercent = 50, bottomStartPercent = 50)
 private val buttonRightShape = RoundedCornerShape(topEndPercent = 50, bottomEndPercent = 50)
 
@@ -67,7 +70,7 @@ fun BoxScope.TabBar(
             .align(Alignment.BottomCenter)
             .fillMaxWidth()
             .padding(horizontal = 16.dp)
-            .padding(bottom = 16.dp)
+            .padding(bottom = TAB_BAR_PADDING_BOTTOM.dp)
             .navigationBarsPadding()
     ) {
         Row(
@@ -81,7 +84,7 @@ fun BoxScope.TabBar(
                 contentAlignment = Alignment.Center,
                 modifier = Modifier
                     .weight(1f)
-                    .height(60.dp)
+                    .height(TAB_BAR_HEIGHT.dp)
                     .clip(buttonLeftShape)
                     .clickable { onSendClick() }
                     .testTag("Send")
@@ -102,7 +105,7 @@ fun BoxScope.TabBar(
                 contentAlignment = Alignment.Center,
                 modifier = Modifier
                     .weight(1f)
-                    .height(60.dp)
+                    .height(TAB_BAR_HEIGHT.dp)
                     .clip(buttonRightShape)
                     .clickable { onReceiveClick() }
                     .testTag("Receive")

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

@@ -84,6 +84,23 @@ fun Headline20(
     )
 }
 
+@Composable
+fun Headline24(
+    text: AnnotatedString,
+    modifier: Modifier = Modifier,
+    color: Color = MaterialTheme.colorScheme.primary,
+) {
+    Text(
+        text = text.toUpperCase(),
+        style = AppTextStyles.Headline.merge(
+            fontSize = 24.sp,
+            lineHeight = 24.sp,
+            color = color,
+        ),
+        modifier = modifier,
+    )
+}
+
 @Composable
 fun Title(
     text: String,

app/src/main/java/to/bitkit/ui/screens/shop/shopDiscover/ShopDiscoverScreen.kt

@@ -55,8 +55,6 @@ import to.bitkit.ui.theme.AppThemeSurface
 import to.bitkit.ui.theme.Colors
 import to.bitkit.ui.theme.Shapes
 
-private const val SHOP_CARD_SIZE = 164
-
 @OptIn(ExperimentalMaterial3Api::class)
 @Composable
 fun ShopDiscoverScreen(
@@ -128,7 +126,7 @@ private fun ShopTabContent(
                     description = stringResource(R.string.other__shop__discover__gift_cards__description),
                     icon = R.drawable.gift,
                     captionColor = Colors.Gray1,
-                    size = SHOP_CARD_SIZE,
+
                     disableGlow = true,
                     onClick = {
                         navigateWebView("gift-cards", title)
@@ -142,7 +140,7 @@ private fun ShopTabContent(
                     description = stringResource(R.string.other__shop__discover__esims__description),
                     icon = R.drawable.globe,
                     captionColor = Colors.Gray1,
-                    size = SHOP_CARD_SIZE,
+
                     disableGlow = true,
                     onClick = {
                         navigateWebView("esims", title2)
@@ -163,7 +161,7 @@ private fun ShopTabContent(
                     description = stringResource(R.string.other__shop__discover__refill__description),
                     icon = R.drawable.phone,
                     captionColor = Colors.Gray1,
-                    size = SHOP_CARD_SIZE,
+
                     disableGlow = true,
                     onClick = {
                         navigateWebView("refill", title)
@@ -176,7 +174,7 @@ private fun ShopTabContent(
                     title = title2,
                     description = stringResource(R.string.other__shop__discover__travel__description),
                     icon = R.drawable.rocket_2,
-                    size = SHOP_CARD_SIZE,
+
                     disableGlow = true,
                     captionColor = Colors.Gray1,
                     onClick = {