Discover message card design

app/src/main/java/org/wikipedia/readinglist/ReadingListsFragment.kt

@@ -15,6 +15,14 @@ import android.widget.Toast
 import androidx.activity.result.contract.ActivityResultContracts
 import androidx.appcompat.app.AppCompatActivity
 import androidx.appcompat.view.ActionMode
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.padding
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.dp
 import androidx.core.graphics.ColorUtils
 import androidx.core.text.buildSpannedString
 import androidx.core.text.color
@@ -36,6 +44,7 @@ import org.wikipedia.R
 import org.wikipedia.activity.BaseActivity
 import org.wikipedia.analytics.eventplatform.ReadingListsAnalyticsHelper
 import org.wikipedia.auth.AccountUtil
+import org.wikipedia.compose.theme.BaseTheme
 import org.wikipedia.concurrency.FlowEventBus
 import org.wikipedia.database.AppDatabase
 import org.wikipedia.databinding.FragmentReadingListsBinding
@@ -50,8 +59,11 @@ import org.wikipedia.page.PageActivity
 import org.wikipedia.page.PageAvailableOfflineHandler
 import org.wikipedia.readinglist.database.ReadingList
 import org.wikipedia.readinglist.database.ReadingListPage
+import org.wikipedia.readinglist.database.RecommendedPage
 import org.wikipedia.readinglist.recommended.RecommendedReadingListAbTest
 import org.wikipedia.readinglist.recommended.RecommendedReadingListOnboardingActivity
+import org.wikipedia.readinglist.recommended.RecommendedReadingListUpdateFrequency
+import org.wikipedia.readinglist.recommended.RecommendedReadingListViewModel
 import org.wikipedia.readinglist.sync.ReadingListSyncAdapter
 import org.wikipedia.readinglist.sync.ReadingListSyncEvent
 import org.wikipedia.settings.Prefs
@@ -336,6 +348,14 @@ class ReadingListsFragment : Fragment(), SortReadingListsDialog.Callback, Readin
                 maybeShowPreviewSavedReadingListsSnackbar()
                 currentSearchQuery = searchQuery
                 maybeTurnOffImportMode(lists.filterIsInstance<ReadingList>().toMutableList())
+
+                // Recommended Reading List discover card
+                val recommendedArticles = RecommendedReadingListViewModel.getNewRecommendedArticles()
+                if (Prefs.isRecommendedReadingListEnabled && recommendedArticles.isNotEmpty()) {
+                    setupRecommendedReadingListDiscoverCardView(recommendedArticles)
+                } else {
+                    binding.discoverCardView.isVisible = false
+                }
             }
         }
     }
@@ -842,6 +862,41 @@ class ReadingListsFragment : Fragment(), SortReadingListsDialog.Callback, Readin
         }
     }
 
+    private fun setupRecommendedReadingListDiscoverCardView(recommendedArticles: List<RecommendedPage>) {
+        binding.discoverCardView.isVisible = true
+        binding.discoverCardView.setContent {
+            var images by remember { mutableStateOf(recommendedArticles.mapNotNull { it.thumbUrl }) }
+            val hasAllArticlesBeenRead by remember { mutableStateOf(recommendedArticles.all { it.status == 1 }) }
+            val subtitle = when (AccountUtil.isLoggedIn) {
+                true -> { getString(R.string.recommended_reading_list_page_subtitle_made_for,
+                    AccountUtil.userName) }
+                false -> { getString(R.string.recommended_reading_list_page_logged_out_subtitle_made_for_you) }
+            }
+
+            val description = when (Prefs.recommendedReadingListUpdateFrequency) {
+                RecommendedReadingListUpdateFrequency.DAILY -> R.string.recommended_reading_list_page_description_daily
+                RecommendedReadingListUpdateFrequency.WEEKLY -> R.string.recommended_reading_list_page_description_weekly
+                RecommendedReadingListUpdateFrequency.MONTHLY -> R.string.recommended_reading_list_page_description_monthly
+            }
+            BaseTheme {
+                RecommendedReadingListDiscoverCardView(
+                    modifier = Modifier
+                        .clickable {
+                           // @TODO: open recommended list screen
+                        }
+                        .padding(16.dp),
+                    title = getString(R.string.recommended_reading_list_title),
+                    subtitleIcon = R.drawable.ic_wikipedia_w,
+                    subtitle = subtitle,
+                    description = getString(description),
+                    images = images,
+                    canShowRedDot = !hasAllArticlesBeenRead,
+                    isUserLoggedIn = AccountUtil.isLoggedIn
+                )
+            }
+        }
+    }
+
     companion object {
         private const val VIEW_TYPE_ITEM = 0
         private const val VIEW_TYPE_PAGE_ITEM = 1

app/src/main/java/org/wikipedia/readinglist/RecommendedReadingListDiscoverCardView.kt

@@ -0,0 +1,165 @@
+package org.wikipedia.readinglist
+
+import androidx.annotation.DrawableRes
+import androidx.compose.foundation.background
+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.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.lazy.grid.GridCells
+import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Icon
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.painter.ColorPainter
+import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.text.SpanStyle
+import androidx.compose.ui.text.buildAnnotatedString
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import coil3.compose.AsyncImage
+import org.wikipedia.R
+import org.wikipedia.compose.components.WikiCard
+import org.wikipedia.compose.theme.BaseTheme
+import org.wikipedia.compose.theme.WikipediaTheme
+import org.wikipedia.theme.Theme
+
+@Composable
+fun RecommendedReadingListDiscoverCardView(
+    modifier: Modifier = Modifier,
+    title: String,
+    @DrawableRes subtitleIcon: Int,
+    subtitle: String,
+    description: String,
+    images: List<String>,
+    canShowRedDot: Boolean = false,
+    isUserLoggedIn: Boolean = false,
+) {
+    WikiCard(
+        elevation = 4.dp
+    ) {
+        Row(
+            modifier = modifier,
+            horizontalArrangement = Arrangement.spacedBy(16.dp),
+        ) {
+            Column(
+                modifier = Modifier
+                    .weight(1.1f),
+                verticalArrangement = Arrangement.spacedBy(8.dp)
+            ) {
+                Row(
+                    verticalAlignment = Alignment.CenterVertically,
+                    horizontalArrangement = Arrangement.spacedBy(8.dp)
+                ) {
+                    Text(
+                        text = title,
+                        style = WikipediaTheme.typography.h3,
+                        color = WikipediaTheme.colors.primaryColor
+                    )
+                    if (canShowRedDot) {
+                        Box(
+                            modifier = Modifier
+                                .size(6.dp)
+                                .clip(CircleShape)
+                                .background(WikipediaTheme.colors.destructiveColor)
+                        )
+                    }
+                }
+
+                Row(
+                    verticalAlignment = Alignment.Top,
+                    horizontalArrangement = Arrangement.spacedBy(8.dp)
+                ) {
+                    Icon(
+                        modifier = Modifier
+                            .size(20.dp),
+                        painter = painterResource(subtitleIcon),
+                        tint = WikipediaTheme.colors.primaryColor,
+                        contentDescription = null
+                    )
+                    Text(
+                        modifier = Modifier
+                            .padding(top = 2.dp),
+                        text = buildAnnotatedString {
+                            val userNameStartIndex = subtitle.lastIndexOf(" ") + 1
+                            append(subtitle)
+                            if (isUserLoggedIn) {
+                                addStyle(
+                                    style = SpanStyle(fontWeight = FontWeight.Bold),
+                                    start = userNameStartIndex,
+                                    end = subtitle.length
+                                )
+                            }
+                        },
+                        fontWeight = FontWeight.Normal,
+                        fontSize = 14.sp,
+                        color = WikipediaTheme.colors.primaryColor
+                    )
+                }
+
+                Text(
+                    text = description,
+                    fontWeight = FontWeight.Normal,
+                    fontSize = 12.sp,
+                    color = WikipediaTheme.colors.primaryColor
+                )
+            }
+
+            LazyVerticalGrid(
+                modifier = Modifier
+                    .clip(RoundedCornerShape(12.dp))
+                    .weight(0.9f),
+                columns = GridCells.Fixed(2)
+            ) {
+                items(4) { index ->
+                    val imageUrl = images.getOrNull(index) ?: ""
+                    if (imageUrl.isEmpty()) {
+                        Box(
+                            modifier = Modifier
+                                .size(70.dp)
+                                .background(WikipediaTheme.colors.borderColor)
+                        )
+                    } else {
+                        AsyncImage(
+                            model = imageUrl,
+                            modifier = Modifier
+                                .size(70.dp),
+                            contentScale = ContentScale.Crop,
+                            contentDescription = null,
+                            placeholder = ColorPainter(WikipediaTheme.colors.borderColor),
+                            error = ColorPainter(WikipediaTheme.colors.borderColor),
+                        )
+                    }
+                }
+            }
+        }
+    }
+}
+
+@Preview
+@Composable
+private fun RecommendedReadingListDiscoverCardViewPreview() {
+    BaseTheme(
+        currentTheme = Theme.LIGHT
+    ) {
+        RecommendedReadingListDiscoverCardView(
+            modifier = Modifier
+                .padding(16.dp),
+            title = "Discover",
+            subtitle = "Made for you",
+            subtitleIcon = R.drawable.ic_wikipedia_w,
+            description = "Your weekly reading list. Learn about new topics,  picked just for you. Updates at midnight.",
+            images = listOf()
+        )
+    }
+}

app/src/main/java/org/wikipedia/readinglist/recommended/RecommendedReadingListViewModel.kt

@@ -75,6 +75,11 @@ class RecommendedReadingListViewModel(savedStateHandle: SavedStateHandle) : View
 
         private const val MAX_RETRIES = 10
 
+        suspend fun getNewRecommendedArticles(): List<RecommendedPage> {
+            val recommendedPages = AppDatabase.instance.recommendedPageDao().getNewRecommendedPages()
+            return recommendedPages.filter { it.status == 0 }
+        }
+
         suspend fun generateRecommendedReadingList() {
             if (!Prefs.isRecommendedReadingListEnabled) {
                 return

app/src/main/res/layout/fragment_reading_lists.xml

@@ -17,8 +17,19 @@
             android:layout_height="wrap_content"
             android:animateLayoutChanges="true"
             android:orientation="vertical"
+            android:clipChildren="false"
+            android:clipToPadding="false"
             app:layout_constraintTop_toTopOf="parent">
 
+            <androidx.compose.ui.platform.ComposeView
+                android:id="@+id/discoverCardView"
+                android:layout_width="match_parent"
+                android:layout_height="wrap_content"
+                android:layout_marginStart="@dimen/activity_horizontal_margin"
+                android:layout_marginEnd="@dimen/activity_horizontal_margin"
+                android:layout_marginTop="16dp"
+                android:layout_marginBottom="24dp" />
+
             <org.wikipedia.views.MessageCardView
                 android:id="@+id/onboarding_view"
                 android:layout_width="match_parent"