Add the StickyHeader switch for the article list

app/src/main/java/me/ash/reader/data/preference/FlowArticleListDateStickyHeaderPreference.kt

@@ -0,0 +1,41 @@
+package me.ash.reader.data.preference
+
+import android.content.Context
+import androidx.datastore.preferences.core.Preferences
+import kotlinx.coroutines.CoroutineScope
+import kotlinx.coroutines.launch
+import me.ash.reader.ui.ext.DataStoreKeys
+import me.ash.reader.ui.ext.dataStore
+import me.ash.reader.ui.ext.put
+
+sealed class FlowArticleListDateStickyHeaderPreference(val value: Boolean) : Preference() {
+    object ON : FlowArticleListDateStickyHeaderPreference(true)
+    object OFF : FlowArticleListDateStickyHeaderPreference(false)
+
+    override fun put(context: Context, scope: CoroutineScope) {
+        scope.launch {
+            context.dataStore.put(
+                DataStoreKeys.FlowArticleListDateStickyHeader,
+                value
+            )
+        }
+    }
+
+    companion object {
+        val default = ON
+        val values = listOf(ON, OFF)
+
+        fun fromPreferences(preferences: Preferences) =
+            when (preferences[DataStoreKeys.FlowArticleListDateStickyHeader.key]) {
+                true -> ON
+                false -> OFF
+                else -> default
+            }
+    }
+}
+
+operator fun FlowArticleListDateStickyHeaderPreference.not(): FlowArticleListDateStickyHeaderPreference =
+    when (value) {
+        true -> FlowArticleListDateStickyHeaderPreference.OFF
+        false -> FlowArticleListDateStickyHeaderPreference.ON
+    }

app/src/main/java/me/ash/reader/data/preference/Settings.kt

@@ -33,6 +33,7 @@ data class Settings(
     val flowArticleListImage: FlowArticleListImagePreference = FlowArticleListImagePreference.default,
     val flowArticleListDesc: FlowArticleListDescPreference = FlowArticleListDescPreference.default,
     val flowArticleListTime: FlowArticleListTimePreference = FlowArticleListTimePreference.default,
+    val flowArticleListDateStickyHeader: FlowArticleListDateStickyHeaderPreference = FlowArticleListDateStickyHeaderPreference.default,
     val flowArticleListTonalElevation: FlowArticleListTonalElevationPreference = FlowArticleListTonalElevationPreference.default,
 )
 
@@ -59,6 +60,7 @@ fun Preferences.toSettings(): Settings {
         flowArticleListImage = FlowArticleListImagePreference.fromPreferences(this),
         flowArticleListDesc = FlowArticleListDescPreference.fromPreferences(this),
         flowArticleListTime = FlowArticleListTimePreference.fromPreferences(this),
+        flowArticleListDateStickyHeader = FlowArticleListDateStickyHeaderPreference.fromPreferences(this),
         flowArticleListTonalElevation = FlowArticleListTonalElevationPreference.fromPreferences(this),
     )
 }
@@ -93,6 +95,7 @@ fun SettingsProvider(
         LocalFlowArticleListImage provides settings.flowArticleListImage,
         LocalFlowArticleListDesc provides settings.flowArticleListDesc,
         LocalFlowArticleListTime provides settings.flowArticleListTime,
+        LocalFlowArticleListDateStickyHeader provides settings.flowArticleListDateStickyHeader,
         LocalFlowArticleListTonalElevation provides settings.flowArticleListTonalElevation,
         LocalFlowFilterBarStyle provides settings.flowFilterBarStyle,
         LocalFlowFilterBarFilled provides settings.flowFilterBarFilled,
@@ -143,5 +146,7 @@ val LocalFlowArticleListDesc =
     compositionLocalOf<FlowArticleListDescPreference> { FlowArticleListDescPreference.default }
 val LocalFlowArticleListTime =
     compositionLocalOf<FlowArticleListTimePreference> { FlowArticleListTimePreference.default }
+val LocalFlowArticleListDateStickyHeader =
+    compositionLocalOf<FlowArticleListDateStickyHeaderPreference> { FlowArticleListDateStickyHeaderPreference.default }
 val LocalFlowArticleListTonalElevation =
     compositionLocalOf<FlowArticleListTonalElevationPreference> { FlowArticleListTonalElevationPreference.default }

app/src/main/java/me/ash/reader/ui/component/Switch.kt

@@ -45,8 +45,8 @@ fun Switch(
             .alpha(if (enable) 1f else 0.5f),
         shape = CircleShape,
         color = animateColorAsState(
-            if (activated) (tonalPalettes primary 40) onDark (tonalPalettes neutralVariant 50)
+            if (activated) (tonalPalettes primary 40) onDark (tonalPalettes secondary 50)
-            else (tonalPalettes neutralVariant 50) onDark (tonalPalettes neutral 60)
+            else (tonalPalettes neutralVariant 50) onDark (tonalPalettes neutral 30)
         ).value
     ) {
         Box(
@@ -61,7 +61,7 @@ fun Switch(
                 shape = CircleShape,
                 color = animateColorAsState(
                     if (activated) tonalPalettes primary 90
-                    else (tonalPalettes neutralVariant 70) onDark (tonalPalettes neutral 30)
+                    else (tonalPalettes neutralVariant 70) onDark (tonalPalettes neutral 60)
                 ).value
             ) {}
         }

app/src/main/java/me/ash/reader/ui/ext/DataStoreExt.kt

@@ -215,6 +215,11 @@ sealed class DataStoreKeys<T> {
             get() = booleanPreferencesKey("flowArticleListTime")
     }
 
+    object FlowArticleListDateStickyHeader : DataStoreKeys<Boolean>() {
+        override val key: Preferences.Key<Boolean>
+            get() = booleanPreferencesKey("flowArticleListDateStickyHeader")
+    }
+
     object FlowArticleListTonalElevation : DataStoreKeys<Int>() {
         override val key: Preferences.Key<Int>
             get() = intPreferencesKey("flowArticleListTonalElevation")

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

@@ -14,6 +14,7 @@ import me.ash.reader.data.entity.ArticleWithFeed
 fun LazyListScope.ArticleList(
     pagingItems: LazyPagingItems<FlowItemView>,
     articleListFeedIcon: Boolean,
+    articleListDateStickyHeader: Boolean,
     articleListTonalElevation: Int,
     onClick: (ArticleWithFeed) -> Unit = {},
 ) {
@@ -31,8 +32,14 @@ fun LazyListScope.ArticleList(
             is FlowItemView.Date -> {
                 val separator = pagingItems[index] as FlowItemView.Date
                 if (separator.showSpacer) item { Spacer(modifier = Modifier.height(40.dp)) }
-                stickyHeader {
+                if (articleListDateStickyHeader) {
-                    StickyHeader(separator.date, articleListFeedIcon, articleListTonalElevation)
+                    stickyHeader(key = separator.date) {
+                        StickyHeader(separator.date, articleListFeedIcon, articleListTonalElevation)
+                    }
+                } else {
+                    item(key = separator.date) {
+                        StickyHeader(separator.date, articleListFeedIcon, articleListTonalElevation)
+                    }
                 }
             }
             else -> {}

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

@@ -58,6 +58,7 @@ fun FlowPage(
     val topBarTonalElevation = LocalFlowTopBarTonalElevation.current
     val articleListTonalElevation = LocalFlowArticleListTonalElevation.current
     val articleListFeedIcon = LocalFlowArticleListFeedIcon.current
+    val articleListDateStickyHeader = LocalFlowArticleListDateStickyHeader.current
     val filterBarStyle = LocalFlowFilterBarStyle.current
     val filterBarFilled = LocalFlowFilterBarFilled.current
     val filterBarPadding = LocalFlowFilterBarPadding.current
@@ -260,6 +261,7 @@ fun FlowPage(
                     ArticleList(
                         pagingItems = pagingItems,
                         articleListFeedIcon = articleListFeedIcon.value,
+                        articleListDateStickyHeader = articleListDateStickyHeader.value,
                         articleListTonalElevation = articleListTonalElevation.value,
                     ) {
                         onSearch = false

app/src/main/java/me/ash/reader/ui/page/settings/color/feeds/FeedsPageStyle.kt

@@ -1,5 +1,6 @@
 package me.ash.reader.ui.page.settings.color.feeds
 
+import androidx.compose.animation.animateContentSize
 import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.*
@@ -294,6 +295,7 @@ fun FeedsPagePreview(
 
     Column(
         modifier = Modifier
+            .animateContentSize()
             .background(
                 color = MaterialTheme.colorScheme.surfaceColorAtElevation(
                     groupListTonalElevation.value.dp

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

@@ -1,6 +1,7 @@
 package me.ash.reader.ui.page.settings.color.flow
 
 import android.annotation.SuppressLint
+import androidx.compose.animation.animateContentSize
 import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.*
@@ -51,7 +52,8 @@ fun FlowPageStyle(
     val articleListFeedName = LocalFlowArticleListFeedName.current
     val articleListImage = LocalFlowArticleListImage.current
     val articleListDesc = LocalFlowArticleListDesc.current
-    val articleListDate = LocalFlowArticleListTime.current
+    val articleListTime = LocalFlowArticleListTime.current
+    val articleListStickyDate = LocalFlowArticleListDateStickyHeader.current
     val articleListTonalElevation = LocalFlowArticleListTonalElevation.current
 
     val scope = rememberCoroutineScope()
@@ -190,11 +192,21 @@ fun FlowPageStyle(
                     SettingItem(
                         title = stringResource(R.string.display_article_date),
                         onClick = {
-                            (!articleListDate).put(context, scope)
+                            (!articleListTime).put(context, scope)
                         },
                     ) {
-                        Switch(activated = articleListDate.value) {
+                        Switch(activated = articleListTime.value) {
-                            (!articleListDate).put(context, scope)
+                            (!articleListTime).put(context, scope)
+                        }
+                    }
+                    SettingItem(
+                        title = stringResource(R.string.article_date_sticky_header),
+                        onClick = {
+                            (!articleListStickyDate).put(context, scope)
+                        },
+                    ) {
+                        Switch(activated = articleListStickyDate.value) {
+                            (!articleListStickyDate).put(context, scope)
                         }
                     }
                     SettingItem(
@@ -343,6 +355,7 @@ fun FlowPagePreview(
 
     Column(
         modifier = Modifier
+            .animateContentSize()
             .background(
                 color = MaterialTheme.colorScheme.surfaceColorAtElevation(
                     articleListTonalElevation.value.dp

app/src/main/res/values-zh-rCN/strings.xml

@@ -134,6 +134,7 @@
     <string name="display_article_image">显示文章插图</string>
     <string name="display_feed_name">显示订阅源名称</string>
     <string name="display_feed_favicon">显示订阅源图标</string>
+    <string name="article_date_sticky_header">文章发布日期粘性标签（实验性）</string>
     <string name="article_list">文章列表</string>
     <string name="group_list">分组列表</string>
     <string name="always_expand">始终展开</string>

app/src/main/res/values/strings.xml

@@ -134,6 +134,7 @@
     <string name="display_article_image">Display Article Images</string>
     <string name="display_feed_name">Display Feed Names</string>
     <string name="display_feed_favicon">Display Feed Favicons</string>
+    <string name="article_date_sticky_header">Article Publish Date Sticky Header (Experimental)</string>
     <string name="article_list">Article List</string>
     <string name="group_list">Group List</string>
     <string name="always_expand">Always Expand</string>