Migrate top reader app bar to Compose

app/src/main/java/eu/kanade/presentation/components/AppBar.kt

@@ -1,5 +1,6 @@
 package eu.kanade.presentation.components
 
+import androidx.compose.foundation.basicMarquee
 import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.RowScope
@@ -60,6 +61,7 @@ const val SEARCH_DEBOUNCE_MILLIS = 250L
 @Composable
 fun AppBar(
     modifier: Modifier = Modifier,
+    backgroundColor: Color? = null,
     // Text
     title: String?,
     subtitle: String? = null,
@@ -81,6 +83,7 @@ fun AppBar(
 
     AppBar(
         modifier = modifier,
+        backgroundColor = backgroundColor,
         titleContent = {
             if (isActionMode) {
                 AppBarTitle(actionModeCounter.toString())
@@ -106,6 +109,7 @@ fun AppBar(
 @Composable
 fun AppBar(
     modifier: Modifier = Modifier,
+    backgroundColor: Color? = null,
     // Title
     titleContent: @Composable () -> Unit,
     // Up button
@@ -142,7 +146,7 @@ fun AppBar(
             title = titleContent,
             actions = actions,
             colors = TopAppBarDefaults.topAppBarColors(
-                containerColor = MaterialTheme.colorScheme.surfaceColorAtElevation(
+                containerColor = backgroundColor ?: MaterialTheme.colorScheme.surfaceColorAtElevation(
                     elevation = if (isActionMode) 3.dp else 0.dp,
                 ),
             ),
@@ -170,6 +174,9 @@ fun AppBarTitle(
                 style = MaterialTheme.typography.bodyMedium,
                 maxLines = 1,
                 overflow = TextOverflow.Ellipsis,
+                modifier = Modifier.basicMarquee(
+                    delayMillis = 2_000,
+                ),
             )
         }
     }

app/src/main/java/eu/kanade/presentation/reader/appbars/BottomReaderBar.kt

@@ -1,7 +1,6 @@
 package eu.kanade.presentation.reader.appbars
 
 import androidx.compose.foundation.background
-import androidx.compose.foundation.isSystemInDarkTheme
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxWidth
@@ -10,11 +9,10 @@ import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.outlined.Settings
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
-import androidx.compose.material3.MaterialTheme
-import androidx.compose.material3.surfaceColorAtElevation
 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.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.unit.dp
@@ -24,6 +22,7 @@ import eu.kanade.tachiyomi.ui.reader.setting.ReadingModeType
 
 @Composable
 fun BottomReaderBar(
+    backgroundColor: Color,
     readingMode: ReadingModeType,
     onClickReadingMode: () -> Unit,
     orientationMode: OrientationType,
@@ -32,11 +31,6 @@ fun BottomReaderBar(
     onClickCropBorder: () -> Unit,
     onClickSettings: () -> Unit,
 ) {
-    // Match with toolbar background color set in ReaderActivity
-    val backgroundColor = MaterialTheme.colorScheme
-        .surfaceColorAtElevation(3.dp)
-        .copy(alpha = if (isSystemInDarkTheme()) 0.9f else 0.95f)
-
     Row(
         modifier = Modifier
             .fillMaxWidth()

app/src/main/java/eu/kanade/presentation/reader/appbars/ReaderAppBars.kt

@@ -4,14 +4,28 @@ import androidx.compose.animation.AnimatedVisibility
 import androidx.compose.animation.core.tween
 import androidx.compose.animation.slideInVertically
 import androidx.compose.animation.slideOutVertically
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.isSystemInDarkTheme
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.WindowInsets
 import androidx.compose.foundation.layout.fillMaxHeight
+import androidx.compose.foundation.layout.systemBars
+import androidx.compose.foundation.layout.windowInsetsPadding
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.outlined.Bookmark
+import androidx.compose.material.icons.outlined.BookmarkBorder
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.surfaceColorAtElevation
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.unit.IntOffset
 import androidx.compose.ui.unit.dp
+import eu.kanade.presentation.components.AppBar
+import eu.kanade.presentation.components.AppBarActions
+import eu.kanade.tachiyomi.R
 import eu.kanade.tachiyomi.ui.reader.setting.OrientationType
 import eu.kanade.tachiyomi.ui.reader.setting.ReadingModeType
 import eu.kanade.tachiyomi.ui.reader.viewer.Viewer
@@ -22,8 +36,18 @@ private val animationSpec = tween<IntOffset>(200)
 @Composable
 fun ReaderAppBars(
     visible: Boolean,
-    viewer: Viewer?,
+    fullscreen: Boolean,
 
+    mangaTitle: String?,
+    chapterTitle: String?,
+    navigateUp: () -> Unit,
+    onClickTopAppBar: () -> Unit,
+    bookmarked: Boolean,
+    onToggleBookmarked: () -> Unit,
+    onOpenInWebView: (() -> Unit)?,
+    onShare: (() -> Unit)?,
+
+    viewer: Viewer?,
     onNextChapter: () -> Unit,
     enabledNext: Boolean,
     onPreviousChapter: () -> Unit,
@@ -41,11 +65,64 @@ fun ReaderAppBars(
     onClickSettings: () -> Unit,
 ) {
     val isRtl = viewer is R2LPagerViewer
+    val backgroundColor = MaterialTheme.colorScheme
+        .surfaceColorAtElevation(3.dp)
+        .copy(alpha = if (isSystemInDarkTheme()) 0.9f else 0.95f)
+
+    val appBarModifier = if (fullscreen) {
+        Modifier.windowInsetsPadding(WindowInsets.systemBars)
+    } else {
+        Modifier
+    }
 
     Column(
         modifier = Modifier.fillMaxHeight(),
         verticalArrangement = Arrangement.SpaceBetween,
     ) {
+        AnimatedVisibility(
+            visible = visible,
+            enter = slideInVertically(
+                initialOffsetY = { -it },
+                animationSpec = animationSpec,
+            ),
+            exit = slideOutVertically(
+                targetOffsetY = { -it },
+                animationSpec = animationSpec,
+            ),
+        ) {
+            AppBar(
+                modifier = appBarModifier
+                    .clickable(onClick = onClickTopAppBar),
+                backgroundColor = backgroundColor,
+                title = mangaTitle,
+                subtitle = chapterTitle,
+                navigateUp = navigateUp,
+                actions = {
+                    AppBarActions(
+                        listOfNotNull(
+                            AppBar.Action(
+                                title = stringResource(if (bookmarked) R.string.action_remove_bookmark else R.string.action_bookmark),
+                                icon = if (bookmarked) Icons.Outlined.Bookmark else Icons.Outlined.BookmarkBorder,
+                                onClick = onToggleBookmarked,
+                            ),
+                            onOpenInWebView?.let {
+                                AppBar.OverflowAction(
+                                    title = stringResource(R.string.action_open_in_web_view),
+                                    onClick = it,
+                                )
+                            },
+                            onShare?.let {
+                                AppBar.OverflowAction(
+                                    title = stringResource(R.string.action_share),
+                                    onClick = it,
+                                )
+                            },
+                        ),
+                    )
+                },
+            )
+        }
+
         Spacer(modifier = Modifier.weight(1f))
 
         AnimatedVisibility(
@@ -74,6 +151,7 @@ fun ReaderAppBars(
                 )
 
                 BottomReaderBar(
+                    backgroundColor = backgroundColor,
                     readingMode = readingMode,
                     onClickReadingMode = onClickReadingMode,
                     orientationMode = orientationMode,