🛠️ Unlimited amount of AnimatedTopAppBars

* Changed fixed 3 bars to listOf AnimatedTopAppBarData

app/src/main/java/ua/acclorite/book_story/presentation/core/components/AnimatedTopAppBar.kt

@@ -23,6 +23,13 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.lerp
 
+data class AnimatedTopAppBarData(
+    val contentVisibility: Boolean? = null,
+    val contentNavigationIcon: @Composable () -> Unit,
+    val contentTitle: @Composable () -> Unit,
+    val contentActions: @Composable RowScope.() -> Unit
+)
+
 /**
  * Animated top app bar.
  * Has up to 3 different top bars inside it. Follow [TopAppBar] for more info.
@@ -31,9 +38,7 @@ import androidx.compose.ui.graphics.lerp
  * @param scrolledContainerColor Scrolled container color of the TopBar.
  * @param scrollBehavior [TopAppBarScrollBehavior].
  * @param isTopBarScrolled Whether isScrolled state should be forced or not.
- * @param content1Visibility Whether first top app bar should be shown.
+ * @param animatedTopBars Pass a list of all [AnimatedTopAppBarData] to show.
- * @param content2Visibility Whether second top app bar should be shown.
- * @param content3Visibility Whether third top app bar should be shown.
  * @param customContent Custom content below [TopAppBar].
  */
 @OptIn(ExperimentalMaterial3Api::class)
@@ -45,21 +50,7 @@ fun AnimatedTopAppBar(
     scrollBehavior: TopAppBarScrollBehavior?,
     isTopBarScrolled: Boolean?,
 
-    content1Visibility: Boolean? = null,
+    animatedTopBars: List<AnimatedTopAppBarData>,
-    content1NavigationIcon: @Composable () -> Unit,
-    content1Title: @Composable () -> Unit,
-    content1Actions: @Composable RowScope.() -> Unit,
-
-    content2Visibility: Boolean? = null,
-    content2NavigationIcon: @Composable () -> Unit = {},
-    content2Title: @Composable () -> Unit = {},
-    content2Actions: @Composable RowScope.() -> Unit = {},
-
-    content3Visibility: Boolean? = null,
-    content3NavigationIcon: @Composable () -> Unit = {},
-    content3Title: @Composable () -> Unit = {},
-    content3Actions: @Composable RowScope.() -> Unit = {},
-
     customContent: @Composable ColumnScope.() -> Unit = {}
 ) {
     val animatedContainerColor = lerp(
@@ -79,59 +70,17 @@ fun AnimatedTopAppBar(
             .background(animatedContainerColor)
     ) {
         Box(modifier = Modifier.fillMaxWidth()) {
+            animatedTopBars.forEach { data ->
                 CustomAnimatedVisibility(
-                visible = content1Visibility ?: true,
+                    visible = data.contentVisibility ?: false,
                     enter = fadeIn(spring(stiffness = Spring.StiffnessMediumLow)),
                     exit = fadeOut(spring(stiffness = Spring.StiffnessMediumLow))
                 ) {
                     TopAppBar(
                         windowInsets = WindowInsets.statusBars,
-                    navigationIcon = content1NavigationIcon,
+                        navigationIcon = data.contentNavigationIcon,
-                    title = content1Title,
+                        title = data.contentTitle,
-                    actions = content1Actions,
+                        actions = data.contentActions,
-                    scrollBehavior = scrollBehavior,
-                    modifier = Modifier.fillMaxWidth(),
-                    colors = TopAppBarDefaults.topAppBarColors(
-                        containerColor = if (isTopBarScrolled != null) Color.Transparent
-                        else containerColor,
-                        scrolledContainerColor = scrolledContainerColor
-                    )
-                )
-            }
-
-            if (content2Visibility != null) {
-                CustomAnimatedVisibility(
-                    visible = content2Visibility,
-                    enter = fadeIn(spring(stiffness = Spring.StiffnessMediumLow)),
-                    exit = fadeOut(spring(stiffness = Spring.StiffnessMediumLow))
-                ) {
-                    TopAppBar(
-                        windowInsets = WindowInsets.statusBars,
-                        navigationIcon = content2NavigationIcon,
-                        title = content2Title,
-                        actions = content2Actions,
-                        scrollBehavior = scrollBehavior,
-                        modifier = Modifier.fillMaxWidth(),
-                        colors = TopAppBarDefaults.topAppBarColors(
-                            containerColor = if (isTopBarScrolled != null) Color.Transparent
-                            else containerColor,
-                            scrolledContainerColor = scrolledContainerColor
-                        )
-                    )
-                }
-            }
-
-            if (content3Visibility != null) {
-                CustomAnimatedVisibility(
-                    visible = content3Visibility,
-                    enter = fadeIn(spring(stiffness = Spring.StiffnessMediumLow)),
-                    exit = fadeOut(spring(stiffness = Spring.StiffnessMediumLow))
-                ) {
-                    TopAppBar(
-                        windowInsets = WindowInsets.statusBars,
-                        navigationIcon = content3NavigationIcon,
-                        title = content3Title,
-                        actions = content3Actions,
                         scrollBehavior = scrollBehavior,
                         modifier = Modifier.fillMaxWidth(),
                         colors = TopAppBarDefaults.topAppBarColors(

app/src/main/java/ua/acclorite/book_story/presentation/screens/book_info/components/BookInfoTopBar.kt

@@ -20,6 +20,7 @@ import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.text.style.TextOverflow
 import ua.acclorite.book_story.R
 import ua.acclorite.book_story.presentation.core.components.AnimatedTopAppBar
+import ua.acclorite.book_story.presentation.core.components.AnimatedTopAppBarData
 import ua.acclorite.book_story.presentation.core.components.CustomAnimatedVisibility
 import ua.acclorite.book_story.presentation.core.components.CustomIconButton
 import ua.acclorite.book_story.presentation.core.components.GoBackButton
@@ -59,7 +60,10 @@ fun BookInfoTopBar(
         scrollBehavior = null,
         isTopBarScrolled = listState.canScrollBackward,
 
-        content1NavigationIcon = {
+        animatedTopBars = listOf(
+            AnimatedTopAppBarData(
+                contentVisibility = true,
+                contentNavigationIcon = {
                     if (
                         state.value.editTitle ||
                         state.value.editAuthor ||
@@ -88,7 +92,7 @@ fun BookInfoTopBar(
                         }
                     }
                 },
-        content1Title = {
+                contentTitle = {
                     DefaultTransition(
                         firstVisibleItemIndex > 0 && !state.value.editTitle
                     ) {
@@ -101,7 +105,7 @@ fun BookInfoTopBar(
                         )
                     }
                 },
-        content1Actions = {
+                contentActions = {
                     CustomIconButton(
                         icon = Icons.Outlined.Refresh,
                         contentDescription = R.string.refresh_book_content_desc,
@@ -175,4 +179,6 @@ fun BookInfoTopBar(
                     }
                 }
             )
+        )
+    )
 }

app/src/main/java/ua/acclorite/book_story/presentation/screens/browse/components/top_bar/BrowseTopBar.kt

@@ -1,14 +1,6 @@
 package ua.acclorite.book_story.presentation.screens.browse.components.top_bar
 
 import androidx.compose.animation.animateColorAsState
-import androidx.compose.animation.core.tween
-import androidx.compose.animation.expandHorizontally
-import androidx.compose.animation.fadeIn
-import androidx.compose.animation.fadeOut
-import androidx.compose.animation.shrinkHorizontally
-import androidx.compose.animation.slideInHorizontally
-import androidx.compose.animation.slideOutHorizontally
-import androidx.compose.foundation.layout.Box
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.automirrored.filled.ArrowBack
 import androidx.compose.material.icons.filled.Check
@@ -25,7 +17,6 @@ import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.derivedStateOf
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
-import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.focus.FocusRequester
 import androidx.compose.ui.focus.focusRequester
@@ -35,7 +26,7 @@ import androidx.compose.ui.text.style.TextOverflow
 import ua.acclorite.book_story.R
 import ua.acclorite.book_story.domain.model.SelectableFile
 import ua.acclorite.book_story.presentation.core.components.AnimatedTopAppBar
-import ua.acclorite.book_story.presentation.core.components.CustomAnimatedVisibility
+import ua.acclorite.book_story.presentation.core.components.AnimatedTopAppBarData
 import ua.acclorite.book_story.presentation.core.components.CustomIconButton
 import ua.acclorite.book_story.presentation.core.components.CustomSearchTextField
 import ua.acclorite.book_story.presentation.core.components.LocalBrowseViewModel
@@ -44,7 +35,6 @@ import ua.acclorite.book_story.presentation.core.components.MoreDropDown
 import ua.acclorite.book_story.presentation.screens.browse.data.BrowseEvent
 import ua.acclorite.book_story.presentation.screens.settings.nested.browse.data.BrowseFilesStructure
 import ua.acclorite.book_story.presentation.screens.settings.nested.browse.data.BrowseLayout
-import ua.acclorite.book_story.presentation.ui.FadeTransitionPreservingSpace
 
 /**
  * Browse Top Bar.
@@ -88,56 +78,22 @@ fun BrowseTopBar(filteredFiles: List<SelectableFile>) {
 
     AnimatedTopAppBar(
         scrollBehavior = null,
-        isTopBarScrolled = state.value.hasSelectedItems ||
+        isTopBarScrolled = isScrolled.value || inNestedDirectory.value,
-                isScrolled.value ||
-                inNestedDirectory.value,
 
-        content1Visibility = !state.value.hasSelectedItems && !state.value.showSearch,
+        animatedTopBars = listOf(
-        content1NavigationIcon = {
+            AnimatedTopAppBarData(
-            CustomAnimatedVisibility(
+                contentVisibility = !state.value.hasSelectedItems &&
-                visible = inNestedDirectory.value,
+                        !state.value.showSearch &&
-                enter = expandHorizontally(tween(200))
+                        !inNestedDirectory.value,
-                        + slideInHorizontally(tween(200))
+                contentNavigationIcon = {},
-                        + fadeIn(tween(250)),
+                contentTitle = {
-                exit = shrinkHorizontally(tween(150))
-                        + slideOutHorizontally(tween(150))
-                        + fadeOut(tween(200))
-            ) {
-                CustomIconButton(
-                    icon = Icons.AutoMirrored.Default.ArrowBack,
-                    contentDescription = R.string.go_back_content_desc,
-                    disableOnClick = false,
-                    enabled = inNestedDirectory.value
-                ) {
-                    onEvent(BrowseEvent.OnGoBackDirectory)
-                }
-            }
-        },
-        content1Title = {
-            Box(contentAlignment = Alignment.CenterStart) {
-                FadeTransitionPreservingSpace(
-                    visible = inNestedDirectory.value,
-                    animationSpec = tween(200)
-                ) {
-                    Text(
-                        selectedDirectoryName.value,
-                        maxLines = 1,
-                        overflow = TextOverflow.Ellipsis
-                    )
-                }
-                FadeTransitionPreservingSpace(
-                    visible = !inNestedDirectory.value,
-                    animationSpec = tween(200)
-                ) {
                     Text(
                         stringResource(id = R.string.browse_screen),
                         maxLines = 1,
                         overflow = TextOverflow.Ellipsis
                     )
-                }
-            }
                 },
-        content1Actions = {
+                contentActions = {
                     CustomIconButton(
                         icon = Icons.Default.Search,
                         contentDescription = R.string.search_content_desc,
@@ -160,10 +116,57 @@ fun BrowseTopBar(filteredFiles: List<SelectableFile>) {
                         onEvent(BrowseEvent.OnShowHideFilterBottomSheet)
                     }
                     MoreDropDown()
-        },
+                }
+            ),
 
-        content2Visibility = state.value.hasSelectedItems,
+            AnimatedTopAppBarData(
-        content2NavigationIcon = {
+                contentVisibility = inNestedDirectory.value,
+                contentNavigationIcon = {
+                    CustomIconButton(
+                        icon = Icons.AutoMirrored.Default.ArrowBack,
+                        contentDescription = R.string.go_back_content_desc,
+                        disableOnClick = false,
+                        enabled = inNestedDirectory.value
+                    ) {
+                        onEvent(BrowseEvent.OnGoBackDirectory)
+                    }
+                },
+                contentTitle = {
+                    Text(
+                        selectedDirectoryName.value,
+                        maxLines = 1,
+                        overflow = TextOverflow.Ellipsis
+                    )
+                },
+                contentActions = {
+                    CustomIconButton(
+                        icon = Icons.Default.Search,
+                        contentDescription = R.string.search_content_desc,
+                        disableOnClick = true
+                    ) {
+                        onEvent(BrowseEvent.OnSearchShowHide)
+                    }
+                    CustomIconButton(
+                        icon = Icons.Default.FilterList,
+                        contentDescription = R.string.filter_content_desc,
+                        disableOnClick = false,
+                        color = animateColorAsState(
+                            if (mainState.value.browseIncludedFilterItems.isNotEmpty()) {
+                                MaterialTheme.colorScheme.primary
+                            } else LocalContentColor.current,
+                            label = ""
+                        ).value,
+                        enabled = !state.value.showFilterBottomSheet
+                    ) {
+                        onEvent(BrowseEvent.OnShowHideFilterBottomSheet)
+                    }
+                    MoreDropDown()
+                }
+            ),
+
+            AnimatedTopAppBarData(
+                contentVisibility = state.value.hasSelectedItems,
+                contentNavigationIcon = {
                     CustomIconButton(
                         icon = Icons.Default.Clear,
                         contentDescription = R.string.clear_selected_items_content_desc,
@@ -172,7 +175,7 @@ fun BrowseTopBar(filteredFiles: List<SelectableFile>) {
                         onEvent(BrowseEvent.OnClearSelectedFiles)
                     }
                 },
-        content2Title = {
+                contentTitle = {
                     Text(
                         stringResource(
                             id = R.string.selected_items_count_query,
@@ -182,7 +185,7 @@ fun BrowseTopBar(filteredFiles: List<SelectableFile>) {
                         maxLines = 1
                     )
                 },
-        content2Actions = {
+                contentActions = {
                     CustomIconButton(
                         icon = Icons.Default.SelectAll,
                         contentDescription = R.string.select_all_files_content_desc,
@@ -203,10 +206,12 @@ fun BrowseTopBar(filteredFiles: List<SelectableFile>) {
                     ) {
                         onEvent(BrowseEvent.OnAddingDialogRequest)
                     }
-        },
+                }
+            ),
 
-        content3Visibility = state.value.showSearch && !state.value.hasSelectedItems,
+            AnimatedTopAppBarData(
-        content3NavigationIcon = {
+                contentVisibility = state.value.showSearch && !state.value.hasSelectedItems,
+                contentNavigationIcon = {
                     CustomIconButton(
                         icon = Icons.AutoMirrored.Default.ArrowBack,
                         contentDescription = R.string.exit_search_content_desc,
@@ -215,7 +220,7 @@ fun BrowseTopBar(filteredFiles: List<SelectableFile>) {
                         onEvent(BrowseEvent.OnSearchShowHide)
                     }
                 },
-        content3Title = {
+                contentTitle = {
                     CustomSearchTextField(
                         modifier = Modifier
                             .focusRequester(focusRequester)
@@ -235,10 +240,11 @@ fun BrowseTopBar(filteredFiles: List<SelectableFile>) {
                         )
                     )
                 },
-        content3Actions = {
+                contentActions = {
                     MoreDropDown()
-        },
+                }
-
+            )
+        ),
         customContent = {
             BrowseTopBarDirectoryPath()
         }

app/src/main/java/ua/acclorite/book_story/presentation/screens/history/HistoryScreen.kt

@@ -36,6 +36,7 @@ import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.unit.dp
 import ua.acclorite.book_story.R
 import ua.acclorite.book_story.presentation.core.components.AnimatedTopAppBar
+import ua.acclorite.book_story.presentation.core.components.AnimatedTopAppBarData
 import ua.acclorite.book_story.presentation.core.components.CategoryTitle
 import ua.acclorite.book_story.presentation.core.components.CustomAnimatedVisibility
 import ua.acclorite.book_story.presentation.core.components.CustomIconButton
@@ -101,14 +102,14 @@ private fun HistoryScreen() {
                 scrollBehavior = null,
                 isTopBarScrolled = state.value.listState.canScrollBackward,
 
-                content1Visibility = !state.value.showSearch,
+                animatedTopBars = listOf(
-                content1NavigationIcon = {},
+                    AnimatedTopAppBarData(
-                content1Title = {
+                        contentVisibility = !state.value.showSearch,
-                    Text(
+                        contentNavigationIcon = {},
-                        stringResource(id = R.string.history_screen)
+                        contentTitle = {
-                    )
+                            Text(stringResource(id = R.string.history_screen))
                         },
-                content1Actions = {
+                        contentActions = {
                             CustomIconButton(
                                 icon = Icons.Default.Search,
                                 contentDescription = R.string.search_content_desc,
@@ -128,10 +129,12 @@ private fun HistoryScreen() {
                                 onEvent(HistoryEvent.OnShowHideDeleteWholeHistoryDialog)
                             }
                             MoreDropDown()
-                },
+                        }
+                    ),
 
-                content2Visibility = state.value.showSearch,
+                    AnimatedTopAppBarData(
-                content2NavigationIcon = {
+                        contentVisibility = state.value.showSearch,
+                        contentNavigationIcon = {
                             CustomIconButton(
                                 icon = Icons.AutoMirrored.Default.ArrowBack,
                                 contentDescription = R.string.exit_search_content_desc,
@@ -140,7 +143,7 @@ private fun HistoryScreen() {
                                 onEvent(HistoryEvent.OnSearchShowHide)
                             }
                         },
-                content2Title = {
+                        contentTitle = {
                             CustomSearchTextField(
                                 modifier = Modifier
                                     .focusRequester(focusRequester)
@@ -160,10 +163,11 @@ private fun HistoryScreen() {
                                 )
                             )
                         },
-                content2Actions = {
+                        contentActions = {
                             MoreDropDown()
                         },
-                content3Visibility = false
+                    )
+                )
             )
         },
         bottomBar = {

app/src/main/java/ua/acclorite/book_story/presentation/screens/library/components/LibraryTopBar.kt

@@ -32,6 +32,7 @@ import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import ua.acclorite.book_story.R
 import ua.acclorite.book_story.presentation.core.components.AnimatedTopAppBar
+import ua.acclorite.book_story.presentation.core.components.AnimatedTopAppBarData
 import ua.acclorite.book_story.presentation.core.components.CustomIconButton
 import ua.acclorite.book_story.presentation.core.components.CustomSearchTextField
 import ua.acclorite.book_story.presentation.core.components.LocalLibraryViewModel
@@ -55,9 +56,11 @@ fun LibraryTopBar(pagerState: PagerState) {
         scrollBehavior = null,
         isTopBarScrolled = state.value.hasSelectedItems,
 
-        content1Visibility = !state.value.hasSelectedItems && !state.value.showSearch,
+        animatedTopBars = listOf(
-        content1NavigationIcon = {},
+            AnimatedTopAppBarData(
-        content1Title = {
+                contentVisibility = !state.value.hasSelectedItems && !state.value.showSearch,
+                contentNavigationIcon = {},
+                contentTitle = {
                     Row(verticalAlignment = Alignment.CenterVertically) {
                         Text(stringResource(id = R.string.library_screen))
                         Spacer(modifier = Modifier.width(6.dp))
@@ -74,7 +77,7 @@ fun LibraryTopBar(pagerState: PagerState) {
                         )
                     }
                 },
-        content1Actions = {
+                contentActions = {
                     CustomIconButton(
                         icon = Icons.Default.Search,
                         contentDescription = R.string.search_content_desc,
@@ -83,10 +86,12 @@ fun LibraryTopBar(pagerState: PagerState) {
                         onEvent(LibraryEvent.OnSearchShowHide)
                     }
                     MoreDropDown()
-        },
+                }
+            ),
 
-        content2Visibility = state.value.hasSelectedItems,
+            AnimatedTopAppBarData(
-        content2NavigationIcon = {
+                contentVisibility = state.value.hasSelectedItems,
+                contentNavigationIcon = {
                     CustomIconButton(
                         icon = Icons.Default.Clear,
                         contentDescription = R.string.clear_selected_items_content_desc,
@@ -95,7 +100,7 @@ fun LibraryTopBar(pagerState: PagerState) {
                         onEvent(LibraryEvent.OnClearSelectedBooks)
                     }
                 },
-        content2Title = {
+                contentTitle = {
                     Text(
                         stringResource(
                             id = R.string.selected_items_count_query,
@@ -105,7 +110,7 @@ fun LibraryTopBar(pagerState: PagerState) {
                         maxLines = 1
                     )
                 },
-        content2Actions = {
+                contentActions = {
                     CustomIconButton(
                         icon = Icons.AutoMirrored.Outlined.DriveFileMove,
                         contentDescription = R.string.move_books_content_desc,
@@ -127,10 +132,12 @@ fun LibraryTopBar(pagerState: PagerState) {
                     ) {
                         onEvent(LibraryEvent.OnShowHideDeleteDialog)
                     }
-        },
+                }
+            ),
 
-        content3Visibility = state.value.showSearch && !state.value.hasSelectedItems,
+            AnimatedTopAppBarData(
-        content3NavigationIcon = {
+                contentVisibility = state.value.showSearch && !state.value.hasSelectedItems,
+                contentNavigationIcon = {
                     CustomIconButton(
                         icon = Icons.AutoMirrored.Default.ArrowBack,
                         contentDescription = R.string.exit_search_content_desc,
@@ -141,7 +148,7 @@ fun LibraryTopBar(pagerState: PagerState) {
                         )
                     }
                 },
-        content3Title = {
+                contentTitle = {
                     CustomSearchTextField(
                         modifier = Modifier
                             .focusRequester(focusRequester)
@@ -161,9 +168,11 @@ fun LibraryTopBar(pagerState: PagerState) {
                         )
                     )
                 },
-        content3Actions = {
+                contentActions = {
                     MoreDropDown()
                 },
+            )
+        ),
         customContent = {
             LibraryTabRow(
                 onEvent = onEvent,