feat(ui): show title in top bar upon scroll in flow page (#896)

* feat(ui): show title in top bar upon scroll in flow page

* fix(reader): make webview align with reading font family (#882)

* fix(reader): make webview align with reading font family

* feat(reader): external font support in webview

* fix(ui): fine-tune dark color scheme

* feat(ui): top bar elevation preference

app/src/main/java/me/ash/reader/infrastructure/preference/FlowTopBarTonalElevationPreference.kt

@@ -15,12 +15,8 @@ val LocalFlowTopBarTonalElevation =
     compositionLocalOf<FlowTopBarTonalElevationPreference> { FlowTopBarTonalElevationPreference.default }
 
 sealed class FlowTopBarTonalElevationPreference(val value: Int) : Preference() {
-    object Level0 : FlowTopBarTonalElevationPreference(ElevationTokens.Level0)
-    object Level1 : FlowTopBarTonalElevationPreference(ElevationTokens.Level1)
-    object Level2 : FlowTopBarTonalElevationPreference(ElevationTokens.Level2)
-    object Level3 : FlowTopBarTonalElevationPreference(ElevationTokens.Level3)
-    object Level4 : FlowTopBarTonalElevationPreference(ElevationTokens.Level4)
-    object Level5 : FlowTopBarTonalElevationPreference(ElevationTokens.Level5)
+    object None : FlowTopBarTonalElevationPreference(ElevationTokens.Level0)
+    object Elevated : FlowTopBarTonalElevationPreference(ElevationTokens.Level2)
 
     override fun put(context: Context, scope: CoroutineScope) {
         scope.launch {
@@ -30,27 +26,19 @@ sealed class FlowTopBarTonalElevationPreference(val value: Int) : Preference() {
 
     fun toDesc(context: Context): String =
         when (this) {
-            Level0 -> "Level 0 (${ElevationTokens.Level0}dp)"
-            Level1 -> "Level 1 (${ElevationTokens.Level1}dp)"
-            Level2 -> "Level 2 (${ElevationTokens.Level2}dp)"
-            Level3 -> "Level 3 (${ElevationTokens.Level3}dp)"
-            Level4 -> "Level 4 (${ElevationTokens.Level4}dp)"
-            Level5 -> "Level 5 (${ElevationTokens.Level5}dp)"
+            None -> "Level 0 (${ElevationTokens.Level0}dp)"
+            Elevated -> "Level 2 (${ElevationTokens.Level2}dp)"
         }
 
     companion object {
 
-        val default = Level0
-        val values = listOf(Level0, Level1, Level2, Level3, Level4, Level5)
+        val default = Elevated
+        val values = listOf(None, Elevated)
 
         fun fromPreferences(preferences: Preferences) =
             when (preferences[DataStoreKey.keys[flowTopBarTonalElevation]?.key as Preferences.Key<Int>]) {
-                ElevationTokens.Level0 -> Level0
-                ElevationTokens.Level1 -> Level1
-                ElevationTokens.Level2 -> Level2
-                ElevationTokens.Level3 -> Level3
-                ElevationTokens.Level4 -> Level4
-                ElevationTokens.Level5 -> Level5
+                ElevationTokens.Level0 -> None
+                ElevationTokens.Level2 -> Elevated
                 else -> default
             }
     }

app/src/main/java/me/ash/reader/ui/page/home/flow/FlowPage.kt

@@ -1,6 +1,8 @@
 package me.ash.reader.ui.page.home.flow
 
 import androidx.activity.compose.BackHandler
+import androidx.compose.animation.AnimatedVisibility
+import androidx.compose.animation.animateColorAsState
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.layout.Spacer
@@ -19,6 +21,7 @@ import androidx.compose.material.icons.rounded.Search
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.LargeTopAppBar
 import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
 import androidx.compose.material3.TopAppBar
 import androidx.compose.material3.TopAppBarDefaults
 import androidx.compose.material3.pulltorefresh.PullToRefreshBox
@@ -26,6 +29,7 @@ import androidx.compose.material3.pulltorefresh.rememberPullToRefreshState
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.DisposableEffect
 import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.derivedStateOf
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
@@ -34,12 +38,15 @@ import androidx.compose.runtime.setValue
 import androidx.compose.runtime.snapshotFlow
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.focus.FocusRequester
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.platform.LocalLifecycleOwner
 import androidx.compose.ui.platform.LocalSoftwareKeyboardController
 import androidx.compose.ui.res.dimensionResource
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
 import androidx.hilt.navigation.compose.hiltViewModel
 import androidx.navigation.NavHostController
 import androidx.paging.compose.collectAsLazyPagingItems
@@ -67,6 +74,8 @@ import me.ash.reader.ui.component.base.RYExtensibleVisibility
 import me.ash.reader.ui.component.base.RYScaffold
 import me.ash.reader.ui.ext.collectAsStateValue
 import me.ash.reader.ui.ext.surfaceColorAtElevation
+import me.ash.reader.ui.motion.materialSharedAxisYIn
+import me.ash.reader.ui.motion.materialSharedAxisYOut
 import me.ash.reader.ui.page.common.RouteName
 import me.ash.reader.ui.page.home.HomeViewModel
 
@@ -80,10 +89,10 @@ fun FlowPage(
     homeViewModel: HomeViewModel,
 ) {
     val keyboardController = LocalSoftwareKeyboardController.current
-    val topBarTonalElevation = LocalFlowTopBarTonalElevation.current
     val articleListTonalElevation = LocalFlowArticleListTonalElevation.current
     val articleListFeedIcon = LocalFlowArticleListFeedIcon.current
     val articleListDateStickyHeader = LocalFlowArticleListDateStickyHeader.current
+    val topBarTonalElevation = LocalFlowTopBarTonalElevation.current
     val filterBarStyle = LocalFlowFilterBarStyle.current
     val filterBarFilled = LocalFlowFilterBarFilled.current
     val filterBarPadding = LocalFlowFilterBarPadding.current
@@ -99,6 +108,18 @@ fun FlowPage(
     val listState =
         if (pagingItems.itemCount > 0) flowUiState.listState else rememberLazyListState()
 
+    val isTopBarElevated = topBarTonalElevation.value > 0
+    val isScrolled by remember(listState) { derivedStateOf { listState.firstVisibleItemIndex != 0 } }
+    val topBarContainerColor by animateColorAsState(with(MaterialTheme.colorScheme) {
+        if (isScrolled && isTopBarElevated) surfaceContainer else surface
+    }, label = "")
+
+    val titleText = when {
+        filterUiState.group != null -> filterUiState.group.name
+        filterUiState.feed != null -> filterUiState.feed.name
+        else -> filterUiState.filter.toName()
+    }
+
     if (markAsReadOnScroll) {
         LaunchedEffect(listState.isScrollInProgress) {
             if (!listState.isScrollInProgress) {
@@ -232,7 +253,6 @@ fun FlowPage(
     }
 
     RYScaffold(
-        topBarTonalElevation = topBarTonalElevation.value.dp,
         containerTonalElevation = articleListTonalElevation.value.dp,
         topBar = {
             TopAppBar(
@@ -247,7 +267,20 @@ fun FlowPage(
                     indication = null,
                     interactionSource = remember { MutableInteractionSource() }
                 ),
-                title = {},
+                title = {
+                    AnimatedVisibility(
+                        isScrolled,
+                        enter = materialSharedAxisYIn(initialOffsetY = { it / 4 }),
+                        exit = materialSharedAxisYOut(targetOffsetY = { it / 4 })
+                    ) {
+                        Text(
+                            text = titleText,
+                            maxLines = 1,
+                            overflow = TextOverflow.Ellipsis,
+                            style = MaterialTheme.typography.titleMedium.copy(fontSize = 18.sp),
+                        )
+                    }
+                },
                 navigationIcon = {
                     FeedbackIconButton(
                         imageVector = Icons.AutoMirrored.Rounded.ArrowBack,
@@ -301,9 +334,7 @@ fun FlowPage(
                         }
                     }
                 }, colors = TopAppBarDefaults.topAppBarColors(
-                    containerColor = MaterialTheme.colorScheme.surfaceColorAtElevation(
-                        topBarTonalElevation.value.dp
-                    ),
+                    containerColor = topBarContainerColor
                 )
             )
         },
@@ -320,11 +351,7 @@ fun FlowPage(
                     item {
                         DisplayText(
                             modifier = Modifier.padding(start = if (articleListFeedIcon.value) 30.dp else 0.dp),
-                            text = when {
-                                filterUiState.group != null -> filterUiState.group.name
-                                filterUiState.feed != null -> filterUiState.feed.name
-                                else -> filterUiState.filter.toName()
-                            },
+                            text = titleText,
                             desc = "",
                         )
                         RYExtensibleVisibility(visible = markAsRead) {

app/src/main/java/me/ash/reader/ui/page/settings/color/flow/FlowPagePreview.kt

@@ -12,13 +12,16 @@ import androidx.compose.material.icons.rounded.DoneAll
 import androidx.compose.material.icons.rounded.Search
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
 import androidx.compose.material3.TopAppBar
 import androidx.compose.material3.TopAppBarDefaults
 import androidx.compose.runtime.*
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
 import me.ash.reader.R
 import me.ash.reader.domain.model.article.Article
 import me.ash.reader.domain.model.article.ArticleWithFeed
@@ -55,8 +58,19 @@ fun FlowPagePreview(
                 shape = RoundedCornerShape(24.dp)
             )
     ) {
+        val preview = generateArticleWithFeedPreview()
+        val feed = preview.feed
+        val article = preview.article
+
         TopAppBar(
-            title = {},
+            title = {
+                Text(
+                    text = feed.name,
+                    maxLines = 1,
+                    overflow = TextOverflow.Ellipsis,
+                    style = MaterialTheme.typography.titleMedium.copy(fontSize = 18.sp),
+                )
+            },
             navigationIcon = {
                 FeedbackIconButton(
                     imageVector = Icons.AutoMirrored.Rounded.ArrowBack,
@@ -83,10 +97,6 @@ fun FlowPagePreview(
         )
         Spacer(modifier = Modifier.height(12.dp))
 
-        val preview = generateArticleWithFeedPreview()
-        val feed = preview.feed
-        val article = preview.article
-
         ArticleItem(
             modifier = Modifier,
             feedName = feed.name,

app/src/main/java/me/ash/reader/ui/page/settings/color/flow/FlowPageStylePage.kt

@@ -115,7 +115,7 @@ fun FlowPageStylePage(
                             topBarTonalElevationDialogVisible = true
                         },
                     ) {}
-//                    Tips(text = stringResource(R.string.tips_top_bar_tonal_elevation))
+                    Tips(text = stringResource(R.string.tips_top_bar_tonal_elevation))
                     Spacer(modifier = Modifier.height(24.dp))
                 }