Bugfix/adjust catalog home UI (#30)

* feat(mobile-app): Removed unused xml resources
* feat(mobile-app): Updated catalog list screens ui
* feat(mobile-app): Updated catalog list row composable
* feat(mobile-app): Updated catalog list categories slot
* feat(mobile-app): Updated catalog list row title text colors
* feat(mobile-app): Updated catalog list banner inactive color

apps/mobile-app/src/main/kotlin/dev/marlonlom/apps/cappajv/features/catalog_list/parts/CatalogTupleRow.kt

@@ -10,16 +10,13 @@ import androidx.compose.foundation.border
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.ExperimentalLayoutApi
-import androidx.compose.foundation.layout.FlowRow
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.material3.Card
 import androidx.compose.material3.CardDefaults
 import androidx.compose.material3.MaterialTheme
-import androidx.compose.material3.SuggestionChip
-import androidx.compose.material3.SuggestionChipDefaults
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
@@ -28,16 +25,16 @@ import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.platform.LocalContext
-import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.SpanStyle
 import androidx.compose.ui.text.buildAnnotatedString
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.text.withStyle
+import androidx.compose.ui.unit.DpSize
 import androidx.compose.ui.unit.dp
+import androidx.core.text.trimmedLength
 import coil.compose.AsyncImage
 import coil.request.ImageRequest
-import dev.marlonlom.apps.cappajv.R
 import dev.marlonlom.apps.cappajv.core.database.entities.CatalogItemTuple
 import dev.marlonlom.apps.cappajv.ui.layout.DevicePosture
 import dev.marlonlom.apps.cappajv.ui.main.CappajvAppState
@@ -60,9 +57,6 @@ internal fun CatalogTupleRow(
   onCatalogItemTupleClicked: (Long) -> Unit,
   modifier: Modifier = Modifier,
 ) {
-
-  val imageSizeDp = getCatalogTupleImageSizeDp(appState)
-
   Card(
     modifier = modifier.fillMaxWidth(),
     shape = CardDefaults.outlinedShape,
@@ -72,103 +66,133 @@ internal fun CatalogTupleRow(
     },
   ) {
     Row(
-      modifier.padding(10.dp),
+      modifier = modifier.padding(vertical = 10.dp),
       verticalAlignment = Alignment.CenterVertically,
-      horizontalArrangement = Arrangement.spacedBy(20.dp)
+      horizontalArrangement = Arrangement.spacedBy(16.dp)
     ) {
-      val imageRequest = ImageRequest.Builder(LocalContext.current)
-        .data(tuple.picture)
-        .crossfade(true)
-        .build()
+      CatalogTuplePosterImage(tuple, appState)
+      Column(
+        modifier = modifier
+          .fillMaxWidth()
+          .padding(end = 10.dp)
+      ) {
+        CatalogTupleTitle(tuple, appState)
+        CatalogTupleSamplePunctuationText(tuple)
+      }
+    }
+  }
+}
 
-      AsyncImage(
-        model = imageRequest,
-        contentDescription = tuple.title,
-        contentScale = ContentScale.Crop,
-        modifier = Modifier
-          .border(
-            width = 2.dp,
-            color = MaterialTheme.colorScheme.secondary,
-            shape = MaterialTheme.shapes.medium,
-          )
-          .clip(MaterialTheme.shapes.medium)
-          .size(imageSizeDp)
-          .background(Color.White),
+/**
+ * Catalog tuple sample punctuation text composable ui.
+ *
+ * @author marlonlom
+ *
+ * @param tuple Catalog item.
+ */
+@Composable
+private fun CatalogTupleSamplePunctuationText(
+  tuple: CatalogItemTuple
+) {
+  val samplePunctuationTxt = buildAnnotatedString {
+    val textParts = tuple.samplePunctuation.split(":")
+    withStyle(
+      SpanStyle(
+        fontWeight = FontWeight.SemiBold,
+        color = MaterialTheme.colorScheme.secondary,
       )
-
-      Column {
-        Text(
-          text = tuple.title,
-          style = getCatalogTupleTitleStyle(appState),
-          maxLines = 1,
-          overflow = TextOverflow.Ellipsis,
-          fontWeight = FontWeight.SemiBold
+    ) {
+      val punctuationTitle = when {
+        textParts[0].trimmedLength() > 10 -> textParts[0].split(" ")[0].plus(" ...")
+        else -> textParts[0]
+      }
+      append(punctuationTitle)
+    }
+    append(": ")
+    append(textParts[1].trim())
+    if (tuple.punctuationsCount > 1) {
+      append(" ")
+      withStyle(
+        SpanStyle(
+          fontWeight = FontWeight.SemiBold,
+          color = MaterialTheme.colorScheme.secondary,
         )
-        FlowRow(
-          horizontalArrangement = Arrangement.spacedBy(10.dp),
-        ) {
-          SuggestionChip(
-            onClick = { },
-            colors = SuggestionChipDefaults.suggestionChipColors(
-              containerColor = MaterialTheme.colorScheme.tertiaryContainer,
-              labelColor = MaterialTheme.colorScheme.onTertiaryContainer
-            ),
-            label = {
-              val samplePunctuationTxt = buildAnnotatedString {
-                val textParts = tuple.samplePunctuation.split(":")
-                withStyle(SpanStyle(fontWeight = FontWeight.SemiBold)) {
-                  append(textParts[0])
-                }
-                append(": ")
-                append(textParts[1].trim())
-              }
-              Text(text = samplePunctuationTxt)
-            },
-            shape = MaterialTheme.shapes.small,
-          )
-
-          if (tuple.punctuationsCount > 1) {
-            Text(
-              text = gePunctuationCountText(
-                appState = appState,
-                punctuationsCount = tuple.punctuationsCount - 1
-              ),
-              modifier = Modifier.align(Alignment.CenterVertically)
-            )
-          }
-        }
+      ) {
+        append("(+ ${tuple.punctuationsCount - 1})")
       }
     }
   }
+  Text(
+    text = samplePunctuationTxt,
+    style = MaterialTheme.typography.labelMedium,
+  )
 }
 
+/**
+ * Catalog tuple item title composable text.
+ *
+ * @author marlonlom
+ *
+ * @param tuple Catalog item tuple data.
+ * @param appState Application ui state.
+ */
 @Composable
-private fun gePunctuationCountText(
-  appState: CappajvAppState,
-  punctuationsCount: Int,
-) = when {
-  appState.isCompactWidth.and(appState.isLandscape.not())
-    .and(appState.devicePosture is DevicePosture.Separating.TableTop) -> "+$punctuationsCount"
+private fun CatalogTupleTitle(
+  tuple: CatalogItemTuple, appState: CappajvAppState
+) {
+  Text(
+    text = tuple.title,
+    style = getCatalogTupleTitleStyle(appState),
+    color = MaterialTheme.colorScheme.secondary,
+    maxLines = 1,
+    overflow = TextOverflow.Ellipsis,
+    fontWeight = FontWeight.SemiBold
+  )
+}
 
-  else -> stringResource(
-    R.string.text_catalog_hint_more_punctuations,
-    punctuationsCount
+/**
+ * Catalog tuple item poster image composable.
+ *
+ * @author marlonlom
+ *
+ * @param tuple Catalog item tuple data.
+ * @param appState Application ui state.
+ */
+@Composable
+private fun CatalogTuplePosterImage(
+  tuple: CatalogItemTuple, appState: CappajvAppState
+) {
+  val imageRequest = ImageRequest.Builder(LocalContext.current).data(tuple.picture).crossfade(true).build()
+
+  AsyncImage(
+    model = imageRequest,
+    contentDescription = tuple.title,
+    contentScale = ContentScale.Crop,
+    modifier = Modifier
+      .border(
+        width = 2.dp,
+        color = MaterialTheme.colorScheme.secondary,
+        shape = MaterialTheme.shapes.medium,
+      )
+      .clip(MaterialTheme.shapes.medium)
+      .size(getCatalogTupleImageSizeDp(appState))
+      .background(Color.White),
   )
 }
 
 @Composable
-private fun getCatalogTupleImageSizeDp(appState: CappajvAppState) = when {
+private fun getCatalogTupleImageSizeDp(appState: CappajvAppState): DpSize = when {
   appState.isCompactWidth.and(appState.isLandscape.not())
-    .and(appState.devicePosture is DevicePosture.Separating.TableTop) -> 56.dp
+    .and(appState.devicePosture is DevicePosture.Separating.TableTop) -> DpSize(48.dp, 56.dp)
 
-  else -> 100.dp
+  else -> DpSize(56.dp, 64.dp)
 }
 
 
 @Composable
 private fun getCatalogTupleTitleStyle(appState: CappajvAppState) = when {
   appState.isCompactWidth.and(appState.isLandscape.not())
-    .and(appState.devicePosture is DevicePosture.Separating.TableTop) -> MaterialTheme.typography.titleMedium
+    .and(appState.devicePosture is DevicePosture.Separating.TableTop) -> MaterialTheme.typography.bodyMedium
 
-  else -> MaterialTheme.typography.titleLarge
+  else -> MaterialTheme.typography.bodyLarge
 }

apps/mobile-app/src/main/kotlin/dev/marlonlom/apps/cappajv/features/catalog_list/screens/CompactTableTopCatalogListScreen.kt

@@ -72,7 +72,6 @@ fun CompactTableTopCatalogListScreen(
         categories = categories,
         selectedCategory = selectedCategory,
         onCategoryChipSelected = { onSelectedCategoryChanged(it) },
-        isScrollable = true
       )
     }
 

apps/mobile-app/src/main/kotlin/dev/marlonlom/apps/cappajv/features/catalog_list/screens/DefaultPortraitCatalogListScreen.kt

@@ -50,8 +50,8 @@ fun DefaultPortraitCatalogListScreen(
 ) {
   Column(
     modifier = modifier
-        .fillMaxWidth()
-        .safeContentPadding(),
+      .fillMaxWidth()
+      .safeContentPadding(),
     horizontalAlignment = Alignment.CenterHorizontally
   ) {
     CatalogListHeadline(appState)
@@ -60,7 +60,6 @@ fun DefaultPortraitCatalogListScreen(
       categories = categories,
       selectedCategory = selectedCategory,
       onCategoryChipSelected = { onSelectedCategoryChanged(it) },
-      isScrollable = true,
     )
     CatalogListTuplesSlot(
       appState = appState,

apps/mobile-app/src/main/kotlin/dev/marlonlom/apps/cappajv/features/catalog_list/slots/CatalogCategoriesChipGroup.kt

@@ -7,7 +7,6 @@ package dev.marlonlom.apps.cappajv.features.catalog_list.slots
 
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.ExperimentalLayoutApi
-import androidx.compose.foundation.layout.FlowRow
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.lazy.LazyRow
 import androidx.compose.foundation.lazy.items
@@ -33,15 +32,13 @@ import androidx.compose.ui.unit.dp
  *
  * @param selectedCategory Selected category.
  * @param onCategoryChipSelected Action for category changed.
- * @param isScrollable True/False if scroll is handled, default to false.
  */
 @ExperimentalLayoutApi
 @Composable
 fun CatalogCategoriesChipGroup(
   categories: List<String>,
   selectedCategory: String,
   onCategoryChipSelected: (String) -> Unit,
-  isScrollable: Boolean = false,
 ) {
   val list = categories.mapIndexed { index, category ->
     Pair(
@@ -74,31 +71,17 @@ fun CatalogCategoriesChipGroup(
     )
   }
 
-  if (isScrollable) {
-    LazyRow(
-      horizontalArrangement = Arrangement.spacedBy(
-        space = 10.dp,
-        alignment = Alignment.Start,
-      ),
-    ) {
-      items(
-        items = list,
-        key = { it.first }
-      ) { category ->
-        addCategoryFilterChip(category)
-      }
-    }
-  } else {
-    FlowRow(
-      horizontalArrangement = Arrangement.spacedBy(
-        space = 10.dp,
-        alignment = Alignment.Start,
-      ),
-      verticalArrangement = Arrangement.spacedBy(4.dp),
-    ) {
-      list.forEach { category ->
-        addCategoryFilterChip(category)
-      }
+  LazyRow(
+    horizontalArrangement = Arrangement.spacedBy(
+      space = 10.dp,
+      alignment = Alignment.Start,
+    ),
+  ) {
+    items(
+      items = list,
+      key = { it.first }
+    ) { category ->
+      addCategoryFilterChip(category)
     }
   }
 }

apps/mobile-app/src/main/kotlin/dev/marlonlom/apps/cappajv/features/catalog_list/slots/CatalogListBanner.kt

@@ -114,7 +114,7 @@ fun CatalogListBanner(
 private fun BannerCard(
   pageIndex: Int,
   pagerState: PagerState,
-  bannerImage: Painter
+  bannerImage: Painter,
 ) {
   Card(
     onClick = {},
@@ -164,15 +164,18 @@ fun HorizontalPagerIndicator(
   modifier: Modifier = Modifier,
 ) {
   Row(
-    Modifier
+    modifier
       .wrapContentHeight()
       .fillMaxWidth()
       .padding(bottom = 10.dp),
     verticalAlignment = Alignment.CenterVertically,
     horizontalArrangement = Arrangement.Center
   ) {
     repeat(pagerState.pageCount) { iteration ->
-      val color = if (pagerState.currentPage == iteration) activeColor else Color.LightGray
+      val color = when (pagerState.currentPage) {
+        iteration -> activeColor
+        else -> activeColor.copy(alpha = 0.25f)
+      }
       Box(
         modifier = modifier
           .padding(2.dp)