NewExploreFeed: Feed Layout & Framework

app/src/main/java/org/wikipedia/activitytab/ActivityTabFragment.kt

@@ -10,7 +10,6 @@ import android.view.ViewGroup
 import androidx.compose.animation.core.rememberInfiniteTransition
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.background
-import androidx.compose.foundation.border
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
@@ -22,6 +21,7 @@ import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.widthIn
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.rememberLazyListState
 import androidx.compose.foundation.rememberScrollState
@@ -58,13 +58,11 @@ import androidx.compose.ui.layout.positionInParent
 import androidx.compose.ui.platform.ComposeView
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
-import androidx.compose.ui.text.font.FontFamily
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
-import androidx.compose.ui.unit.sp
 import androidx.core.net.toUri
 import androidx.core.view.MenuProvider
 import androidx.fragment.app.Fragment
@@ -95,6 +93,7 @@ import org.wikipedia.auth.AccountUtil
 import org.wikipedia.categories.CategoryActivity
 import org.wikipedia.categories.db.Category
 import org.wikipedia.compose.components.HtmlText
+import org.wikipedia.compose.components.WikiLangCodeBox
 import org.wikipedia.compose.components.error.WikiErrorClickEvents
 import org.wikipedia.compose.extensions.shimmerEffect
 import org.wikipedia.compose.theme.BaseTheme
@@ -482,37 +481,26 @@ class ActivityTabFragment : Fragment() {
                         ) {
                             if (modules.isModuleVisible(ModuleType.EDITING_INSIGHTS) || modules.isModuleVisible(ModuleType.IMPACT)) {
                                 Row(
-                                    modifier = Modifier.fillMaxWidth(),
+                                    modifier = Modifier
+                                        .padding(start = 16.dp, end = 16.dp, top = 24.dp)
+                                        .fillMaxWidth(),
+                                    horizontalArrangement = Arrangement.SpaceBetween,
+                                    verticalAlignment = Alignment.CenterVertically
                                 ) {
                                     Text(
                                         modifier = Modifier
-                                            .padding(start = 16.dp, end = 16.dp, top = 24.dp)
                                             .weight(1f),
                                         text = stringResource(R.string.activity_tab_impact),
                                         style = MaterialTheme.typography.titleLarge,
                                         fontWeight = FontWeight.Medium,
                                         color = WikipediaTheme.colors.primaryColor
                                     )
-                                    Box(
+                                    WikiLangCodeBox(
                                         modifier = Modifier
-                                            .padding(start = 16.dp, end = 16.dp, top = 24.dp)
-                                            .align(Alignment.CenterVertically)
-                                            .background(color = WikipediaTheme.colors.paperColor)
-                                            .border(
-                                                1.5.dp,
-                                                WikipediaTheme.colors.primaryColor,
-                                                RoundedCornerShape(4.dp)
-                                            )
-                                    ) {
-                                        Text(
-                                            modifier = Modifier.padding(start = 4.dp, end = 4.5.dp, top = 3.5.dp, bottom = 3.dp),
-                                            text = languageCode.uppercase(),
-                                            fontSize = 10.sp,
-                                            fontFamily = FontFamily.Monospace,
-                                            fontWeight = FontWeight.Bold,
-                                            color = WikipediaTheme.colors.primaryColor
-                                        )
-                                    }
+                                            .height(20.dp)
+                                            .widthIn(min = 20.dp),
+                                        languageCode = languageCode
+                                    )
                                 }
                             }
 

app/src/main/java/org/wikipedia/compose/components/WikiLangCodeBox.kt

@@ -0,0 +1,79 @@
+package org.wikipedia.compose.components
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.widthIn
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.text.font.FontFamily
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.TextUnit
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import org.wikipedia.compose.theme.BaseTheme
+import org.wikipedia.compose.theme.WikipediaTheme
+import org.wikipedia.theme.Theme
+
+@Composable
+fun WikiLangCodeBox(
+    modifier: Modifier = Modifier,
+    languageCode: String,
+    backgroundColor: Color = WikipediaTheme.colors.paperColor,
+    borderColor: Color = WikipediaTheme.colors.primaryColor,
+    shape: RoundedCornerShape = RoundedCornerShape(4.dp),
+    textColor: Color = WikipediaTheme.colors.primaryColor,
+    fontSize: TextUnit = 10.sp,
+) {
+    Box(
+        modifier = modifier
+            .background(color = backgroundColor, shape = shape)
+            .border(width = 1.5.dp, color = borderColor, shape = shape),
+        contentAlignment = Alignment.Center
+    ) {
+        Text(
+            modifier = Modifier.padding(horizontal = 4.dp),
+            text = languageCode.uppercase(),
+            fontSize = fontSize,
+            fontFamily = FontFamily.Monospace,
+            fontWeight = FontWeight.Bold,
+            color = textColor
+        )
+    }
+}
+
+@Preview
+@Composable
+private fun WikiLangCodeBoxRegularPreview() {
+    BaseTheme(currentTheme = Theme.LIGHT) {
+        WikiLangCodeBox(
+            modifier = Modifier
+                .height(20.dp)
+                .widthIn(min = 20.dp),
+            languageCode = "en"
+        )
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+private fun WikiLangCodeBoxDarkPreview() {
+    BaseTheme(currentTheme = Theme.LIGHT) {
+        WikiLangCodeBox(
+            modifier = Modifier
+                .height(20.dp)
+                .widthIn(min = 20.dp),
+            languageCode = "en",
+            backgroundColor = WikipediaTheme.colors.primaryColor,
+            borderColor = WikipediaTheme.colors.primaryColor,
+            textColor = WikipediaTheme.colors.paperColor
+        )
+    }
+}

app/src/main/java/org/wikipedia/dataclient/WikiSite.kt

@@ -162,6 +162,10 @@ data class WikiSite(
             }
         }
 
+        fun preview(languageCode: String = "en"): WikiSite {
+            return WikiSite("https://$languageCode.wikipedia.org/".toUri(), languageCode)
+        }
+
         private fun languageCodeToSubdomain(languageCode: String): String {
             return WikipediaApp.instance.languageState.getDefaultLanguageCode(languageCode) ?: normalizeLanguageCode(languageCode)
         }

app/src/main/java/org/wikipedia/feed/CommunityModuleHeader.kt

@@ -14,24 +14,28 @@ import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.res.painterResource
-import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import org.wikipedia.R
 import org.wikipedia.compose.theme.BaseTheme
 import org.wikipedia.compose.theme.WikipediaTheme
+import org.wikipedia.dataclient.WikiSite
+import org.wikipedia.extensions.getString
 import org.wikipedia.theme.Theme
 
 @Composable
 fun CommunityModuleHeader(
     modifier: Modifier = Modifier,
+    wikiSite: WikiSite,
     @StringRes titleResId: Int,
     @StringRes subTitleResId: Int,
     @DrawableRes contextIconResId: Int? = null,
     onOverflowClick: () -> Unit = {},
 ) {
+    val context = LocalContext.current
     Column(
         modifier = modifier
     ) {
@@ -41,7 +45,7 @@ fun CommunityModuleHeader(
         ) {
             Text(
                 modifier = Modifier.weight(1f).padding(horizontal = 16.dp),
-                text = stringResource(titleResId),
+                text = context.getString(wikiSite.languageCode, titleResId),
                 color = WikipediaTheme.colors.primaryColor,
                 style = MaterialTheme.typography.headlineSmall,
                 fontWeight = FontWeight.W500
@@ -62,15 +66,15 @@ fun CommunityModuleHeader(
             ) {
                 Icon(
                     painter = painterResource(R.drawable.ic_more_vert_white_24dp),
-                    contentDescription = stringResource(R.string.menu_feed_overflow_label),
+                    contentDescription = context.getString(wikiSite.languageCode, R.string.menu_feed_overflow_label),
                     tint = WikipediaTheme.colors.primaryColor,
                     modifier = Modifier.size(24.dp)
                 )
             }
         }
         Text(
             modifier = Modifier.padding(start = 16.dp, end = 16.dp, bottom = 16.dp),
-            text = stringResource(subTitleResId),
+            text = context.getString(wikiSite.languageCode, subTitleResId),
             color = WikipediaTheme.colors.secondaryColor,
             style = MaterialTheme.typography.bodyMedium
         )
@@ -82,6 +86,7 @@ fun CommunityModuleHeader(
 fun CommunityModuleHeaderPreview() {
     BaseTheme(currentTheme = Theme.LIGHT) {
         CommunityModuleHeader(
+            wikiSite = WikiSite("en.wikipedia.org"),
             titleResId = R.string.view_featured_image_card_title,
             subTitleResId = R.string.explore_feed_potd_subtitle,
             contextIconResId = R.drawable.ic_commons_logo