Compose language list design

app/src/main/AndroidManifest.xml

@@ -152,10 +152,8 @@
             android:theme="@style/AppTheme.ActionBar"
             android:configChanges="orientation|keyboardHidden|keyboard|screenSize" />
         <activity
-            android:name=".language.LanguagesListActivity"
-            android:label="@string/languages_list_activity_title"
-            android:theme="@style/AppTheme.ActionBar"
-            android:configChanges="orientation|keyboardHidden|keyboard|screenSize" />
+            android:name=".language.addLanguagesList.AddLanguagesListActivity"
+            android:configChanges="orientation|keyboardHidden|keyboard|screenSize"/>
         <activity
             android:name=".suggestededits.SuggestionsActivity"
             android:launchMode="singleTask"

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

@@ -0,0 +1,73 @@
+package org.wikipedia.compose.components
+
+import androidx.compose.foundation.layout.RowScope
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.automirrored.filled.ArrowBack
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
+import androidx.compose.material3.OutlinedTextField
+import androidx.compose.material3.OutlinedTextFieldDefaults
+import androidx.compose.material3.Text
+import androidx.compose.material3.TopAppBar
+import androidx.compose.material3.TopAppBarDefaults
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.focus.FocusRequester
+import androidx.compose.ui.focus.focusRequester
+import androidx.compose.ui.graphics.Color
+import org.wikipedia.compose.theme.WikipediaTheme
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun SearchTopAppBar(
+    modifier: Modifier = Modifier,
+    searchQuery: String,
+    placeHolderTitle: String,
+    onSearchQueryChange: (String) -> Unit,
+    onBackButtonClick: () -> Unit,
+    actions: @Composable RowScope.() -> Unit = {},
+) {
+    val focusRequester = remember { FocusRequester() }
+    TopAppBar(
+        modifier = modifier
+            .fillMaxWidth()
+            .focusRequester(focusRequester),
+        title = {
+            OutlinedTextField(
+                value = searchQuery,
+                onValueChange = onSearchQueryChange,
+                placeholder = {
+                    Text(placeHolderTitle)
+                },
+                colors = OutlinedTextFieldDefaults.colors(
+                    unfocusedBorderColor = Color.Transparent,
+                    focusedBorderColor = Color.Transparent,
+                    focusedTextColor = WikipediaTheme.colors.primaryColor,
+                    cursorColor = WikipediaTheme.colors.primaryColor
+                )
+            )
+        },
+        navigationIcon = {
+            IconButton(onClick = onBackButtonClick) {
+                Icon(
+                    imageVector = Icons.AutoMirrored.Filled.ArrowBack,
+                    contentDescription = null,
+                    tint = WikipediaTheme.colors.primaryColor
+                )
+            }
+        },
+        actions = actions,
+        colors = TopAppBarDefaults.topAppBarColors(
+            containerColor = WikipediaTheme.colors.paperColor,
+            titleContentColor = WikipediaTheme.colors.primaryColor
+        ),
+    )
+
+    LaunchedEffect(Unit) {
+        focusRequester.requestFocus()
+    }
+}

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

@@ -1,5 +1,6 @@
 package org.wikipedia.compose.components
 
+import androidx.compose.foundation.layout.RowScope
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.automirrored.filled.ArrowBack
 import androidx.compose.material3.ExperimentalMaterial3Api
@@ -26,7 +27,8 @@ fun WikiTopAppBar(
     onNavigationClick: (() -> Unit),
     titleStyle: TextStyle = WikipediaTheme.typography.h1.copy(lineHeight = 24.sp),
     elevation: Dp = 0.dp,
-    modifier: Modifier = Modifier
+    modifier: Modifier = Modifier,
+    actions: @Composable RowScope.() -> Unit = {},
 ) {
     val navigationIcon = Icons.AutoMirrored.Filled.ArrowBack
     val backgroundColor = WikipediaTheme.colors.paperColor
@@ -52,6 +54,7 @@ fun WikiTopAppBar(
             containerColor = backgroundColor,
             titleContentColor = WikipediaTheme.colors.primaryColor
         ),
+        actions = actions,
         modifier = modifier.shadow(elevation = elevation)
     )
 }

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

@@ -0,0 +1,120 @@
+package org.wikipedia.compose.components
+
+import androidx.compose.animation.AnimatedContent
+import androidx.compose.animation.core.FastOutSlowInEasing
+import androidx.compose.animation.core.LinearEasing
+import androidx.compose.animation.core.tween
+import androidx.compose.animation.fadeIn
+import androidx.compose.animation.fadeOut
+import androidx.compose.animation.togetherWith
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.outlined.Clear
+import androidx.compose.material.icons.outlined.Search
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import org.wikipedia.compose.theme.WikipediaTheme
+
+enum class TopAppBarState {
+    SEARCH,
+    NORMAL
+}
+
+/**
+ * @param appBarTitle the title to be displayed in the top app bar
+ * @param placeHolderTitle the placeholder title displayed on the search app bar
+ * @param searchQuery the query text to be shown in the input field.
+ * @param onSearchQueryChange the callback that is triggered when the users updates the text.
+ * An updated text comes as a parameter of the callback
+ * @param onBackButtonClick the callback that is triggered when user taps the back arrow
+ */
+@Composable
+fun WikiTopAppBarWithSearch(
+    appBarTitle: String,
+    placeHolderTitle: String,
+    searchQuery: String,
+    onSearchQueryChange: (String) -> Unit,
+    onBackButtonClick: () -> Unit,
+) {
+    var currentState by remember { mutableStateOf(TopAppBarState.NORMAL) }
+
+    // Simple animation when switching states
+    val enterTransition = fadeIn(
+        animationSpec = tween(
+            durationMillis = 200,
+            easing = LinearEasing
+        )
+    )
+
+    val exitTransition = fadeOut(
+        animationSpec = tween(
+            durationMillis = 150,
+            easing = FastOutSlowInEasing
+        )
+    )
+
+    AnimatedContent(
+        targetState = currentState,
+        transitionSpec = {
+            enterTransition.togetherWith(exitTransition)
+        },
+        content = { state ->
+            when (state) {
+                TopAppBarState.SEARCH -> {
+                    SearchTopAppBar(
+                        searchQuery = searchQuery,
+                        onSearchQueryChange = {
+                            onSearchQueryChange(it)
+                        },
+                        placeHolderTitle = placeHolderTitle,
+                        onBackButtonClick = {
+                            onSearchQueryChange("")
+                            currentState = TopAppBarState.NORMAL
+                        },
+                        actions = {
+                            if (searchQuery.isNotEmpty()) {
+                                IconButton(
+                                    onClick = {
+                                        onSearchQueryChange("")
+                                        currentState = TopAppBarState.NORMAL
+                                    },
+                                    content = {
+                                        Icon(
+                                            imageVector = Icons.Outlined.Clear,
+                                            contentDescription = null,
+                                            tint = WikipediaTheme.colors.placeholderColor
+                                        )
+                                    }
+                                )
+                            }
+                        }
+                    )
+                }
+                TopAppBarState.NORMAL -> {
+                    WikiTopAppBar(
+                        title = appBarTitle,
+                        onNavigationClick = onBackButtonClick,
+                        actions = {
+                            IconButton(
+                                onClick = {
+                                    currentState = TopAppBarState.SEARCH
+                                },
+                                content = {
+                                    Icon(
+                                        imageVector = Icons.Outlined.Search,
+                                        contentDescription = null,
+                                        tint = WikipediaTheme.colors.primaryColor
+                                    )
+                                }
+                            )
+                        }
+                    )
+                }
+            }
+        }
+    )
+}

app/src/main/java/org/wikipedia/compose/theme/WikipediaTypography.kt

@@ -57,6 +57,11 @@ val Typography = WikipediaTypography(
         fontSize = 12.sp,
         lineHeight = 18.sp
     ),
+    p = TextStyle(
+        fontFamily = FontFamily.SansSerif,
+        fontSize = 16.sp,
+        lineHeight = 24.sp
+    ),
     button = TextStyle(
         fontFamily = FontFamily.SansSerif,
         fontWeight = FontWeight.Medium,