Hide navigation menus FAB on scroll

WordPress/src/main/java/org/wordpress/android/ui/navmenus/NavMenusActivity.kt

@@ -10,6 +10,9 @@ import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.automirrored.filled.ArrowBack
 import androidx.compose.material.icons.filled.Add
 import androidx.compose.material.icons.filled.Delete
+import androidx.compose.animation.AnimatedVisibility
+import androidx.compose.animation.slideInVertically
+import androidx.compose.animation.slideOutVertically
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.FloatingActionButton
 import androidx.compose.material3.Icon
@@ -21,6 +24,9 @@ import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.collectAsState
 import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.ComposeView
 import androidx.compose.ui.platform.ViewCompositionStrategy
@@ -113,10 +119,16 @@ class NavMenusActivity : BaseAppCompatActivity() {
             .collectAsState(initial = navController.currentBackStackEntry)
         val currentRoute = currentBackStackEntry?.destination?.route
 
+        var isFabVisible by remember { mutableStateOf(true) }
+
+        LaunchedEffect(currentRoute) {
+            isFabVisible = true
+        }
+
         AppThemeM3 {
             Scaffold(
                 topBar = { NavMenusTopBar(currentRoute) },
-                floatingActionButton = { NavMenusFab(currentRoute) }
+                floatingActionButton = { NavMenusFab(currentRoute, isFabVisible) }
             ) { contentPadding ->
                 NavHost(
                     navController = navController,
@@ -130,6 +142,7 @@ class NavMenusActivity : BaseAppCompatActivity() {
                             onMenuItemsClick = { viewModel.navigateToMenuItems(it) },
                             onRefresh = { viewModel.refreshMenus() },
                             onLoadMore = { viewModel.loadMoreMenus() },
+                            onFabVisibilityChange = { isFabVisible = it },
                             modifier = Modifier.padding(contentPadding)
                         )
                     }
@@ -153,6 +166,7 @@ class NavMenusActivity : BaseAppCompatActivity() {
                             onMoveItemUp = { viewModel.moveMenuItemUp(it) },
                             onMoveItemDown = { viewModel.moveMenuItemDown(it) },
                             onLoadMore = { viewModel.loadMoreMenuItems() },
+                            onFabVisibilityChange = { isFabVisible = it },
                             modifier = Modifier.padding(contentPadding)
                         )
                     }
@@ -270,19 +284,42 @@ class NavMenusActivity : BaseAppCompatActivity() {
     }
 
     @Composable
-    private fun NavMenusFab(currentRoute: String?) {
-        when (currentRoute) {
-            NavMenuScreen.MenuList.name -> {
-                FloatingActionButton(onClick = { viewModel.navigateToCreateMenu() }) {
-                    Icon(Icons.Default.Add, contentDescription = stringResource(R.string.create_menu))
+    private fun NavMenusFab(currentRoute: String?, isVisible: Boolean) {
+        AnimatedVisibility(
+            visible = isVisible && (
+                currentRoute == NavMenuScreen.MenuList.name ||
+                    currentRoute == NavMenuScreen.MenuItemList.name
+                ),
+            enter = slideInVertically { it * 2 },
+            exit = slideOutVertically { it * 2 }
+        ) {
+            when (currentRoute) {
+                NavMenuScreen.MenuList.name -> {
+                    FloatingActionButton(
+                        onClick = { viewModel.navigateToCreateMenu() }
+                    ) {
+                        Icon(
+                            Icons.Default.Add,
+                            contentDescription = stringResource(
+                                R.string.create_menu
+                            )
+                        )
+                    }
                 }
-            }
-            NavMenuScreen.MenuItemList.name -> {
-                FloatingActionButton(onClick = { viewModel.navigateToCreateMenuItem() }) {
-                    Icon(Icons.Default.Add, contentDescription = stringResource(R.string.add_menu_item))
+                NavMenuScreen.MenuItemList.name -> {
+                    FloatingActionButton(
+                        onClick = { viewModel.navigateToCreateMenuItem() }
+                    ) {
+                        Icon(
+                            Icons.Default.Add,
+                            contentDescription = stringResource(
+                                R.string.add_menu_item
+                            )
+                        )
+                    }
                 }
+                else -> {}
             }
-            else -> {}
         }
     }
 

WordPress/src/main/java/org/wordpress/android/ui/navmenus/screens/MenuItemListScreen.kt

@@ -23,9 +23,6 @@ import androidx.compose.material3.IconButton
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
-import androidx.compose.runtime.LaunchedEffect
-import androidx.compose.runtime.derivedStateOf
-import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.stringResource
@@ -44,6 +41,7 @@ fun MenuItemListScreen(
     onMoveItemUp: (Long) -> Unit,
     onMoveItemDown: (Long) -> Unit,
     onLoadMore: () -> Unit,
+    onFabVisibilityChange: (Boolean) -> Unit,
     modifier: Modifier = Modifier
 ) {
     Box(modifier = modifier.fillMaxSize()) {
@@ -70,7 +68,8 @@ fun MenuItemListScreen(
                     onEditItemClick = onEditItemClick,
                     onMoveItemUp = onMoveItemUp,
                     onMoveItemDown = onMoveItemDown,
-                    onLoadMore = onLoadMore
+                    onLoadMore = onLoadMore,
+                    onFabVisibilityChange = onFabVisibilityChange
                 )
             }
         }
@@ -83,24 +82,19 @@ private fun MenuItemListContent(
     onEditItemClick: (Long) -> Unit,
     onMoveItemUp: (Long) -> Unit,
     onMoveItemDown: (Long) -> Unit,
-    onLoadMore: () -> Unit
+    onLoadMore: () -> Unit,
+    onFabVisibilityChange: (Boolean) -> Unit
 ) {
     val listState = rememberLazyListState()
 
-    val lastVisibleItemIndex = remember {
-        derivedStateOf {
-            listState.layoutInfo.visibleItemsInfo.lastOrNull()?.index ?: 0
-        }
-    }
-
-    LaunchedEffect(lastVisibleItemIndex.value, state.items.size, state.canLoadMore) {
-        val shouldLoadMore = lastVisibleItemIndex.value >= state.items.size - 1 &&
-            state.canLoadMore &&
-            !state.isLoadingMore
-        if (shouldLoadMore) {
-            onLoadMore()
-        }
-    }
+    ObserveLoadMore(
+        listState = listState,
+        itemCount = state.items.size,
+        canLoadMore = state.canLoadMore,
+        isLoadingMore = state.isLoadingMore,
+        onLoadMore = onLoadMore
+    )
+    ObserveScrollDirectionForFab(listState, onFabVisibilityChange)
 
     LazyColumn(
         state = listState,

WordPress/src/main/java/org/wordpress/android/ui/navmenus/screens/MenuListScreen.kt

@@ -14,9 +14,6 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.items
 import androidx.compose.foundation.lazy.rememberLazyListState
-import androidx.compose.runtime.LaunchedEffect
-import androidx.compose.runtime.derivedStateOf
-import androidx.compose.runtime.remember
 import androidx.compose.material3.Button
 import androidx.compose.material3.ButtonDefaults
 import androidx.compose.material3.Card
@@ -47,6 +44,7 @@ fun MenuListScreen(
     onMenuItemsClick: (Long) -> Unit,
     onRefresh: () -> Unit,
     onLoadMore: () -> Unit,
+    onFabVisibilityChange: (Boolean) -> Unit,
     modifier: Modifier = Modifier
 ) {
     val pullToRefreshState = rememberPullToRefreshState()
@@ -90,21 +88,14 @@ fun MenuListScreen(
             else -> {
                 val listState = rememberLazyListState()
 
-                // Detect when user scrolls to the last item
-                val lastVisibleItemIndex = remember {
-                    derivedStateOf {
-                        listState.layoutInfo.visibleItemsInfo.lastOrNull()?.index ?: 0
-                    }
-                }
-
-                LaunchedEffect(lastVisibleItemIndex.value, state.menus.size, state.canLoadMore) {
-                    val shouldLoadMore = lastVisibleItemIndex.value >= state.menus.size - 1 &&
-                        state.canLoadMore &&
-                        !state.isLoadingMore
-                    if (shouldLoadMore) {
-                        onLoadMore()
-                    }
-                }
+                ObserveLoadMore(
+                    listState = listState,
+                    itemCount = state.menus.size,
+                    canLoadMore = state.canLoadMore,
+                    isLoadingMore = state.isLoadingMore,
+                    onLoadMore = onLoadMore
+                )
+                ObserveScrollDirectionForFab(listState, onFabVisibilityChange)
 
                 LazyColumn(
                     state = listState,

WordPress/src/main/java/org/wordpress/android/ui/navmenus/screens/ObserveScrollDirectionForFab.kt

@@ -0,0 +1,70 @@
+package org.wordpress.android.ui.navmenus.screens
+
+import androidx.compose.foundation.lazy.LazyListState
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.derivedStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.snapshotFlow
+
+/**
+ * Observes the scroll direction of a [LazyListState] and calls
+ * [onFabVisibilityChange] with `false` when scrolling down
+ * (to hide the FAB) and `true` when scrolling up (to show it).
+ */
+@Composable
+fun ObserveScrollDirectionForFab(
+    listState: LazyListState,
+    onFabVisibilityChange: (Boolean) -> Unit
+) {
+    LaunchedEffect(listState) {
+        var prevIndex = listState.firstVisibleItemIndex
+        var prevOffset = listState.firstVisibleItemScrollOffset
+        snapshotFlow {
+            listState.firstVisibleItemIndex to
+                listState.firstVisibleItemScrollOffset
+        }.collect { (index, offset) ->
+            val scrollingDown = index > prevIndex ||
+                (index == prevIndex && offset > prevOffset)
+            val scrollingUp = index < prevIndex ||
+                (index == prevIndex && offset < prevOffset)
+            if (scrollingDown) {
+                onFabVisibilityChange(false)
+            } else if (scrollingUp) {
+                onFabVisibilityChange(true)
+            }
+            prevIndex = index
+            prevOffset = offset
+        }
+    }
+}
+
+/**
+ * Observes scroll position and triggers [onLoadMore] when the
+ * last visible item is near the end of the list.
+ */
+@Composable
+fun ObserveLoadMore(
+    listState: LazyListState,
+    itemCount: Int,
+    canLoadMore: Boolean,
+    isLoadingMore: Boolean,
+    onLoadMore: () -> Unit
+) {
+    val lastVisibleItemIndex = remember {
+        derivedStateOf {
+            listState.layoutInfo.visibleItemsInfo.lastOrNull()?.index
+                ?: 0
+        }
+    }
+
+    LaunchedEffect(lastVisibleItemIndex.value, itemCount, canLoadMore) {
+        val shouldLoadMore =
+            lastVisibleItemIndex.value >= itemCount - 1 &&
+                canLoadMore &&
+                !isLoadingMore
+        if (shouldLoadMore) {
+            onLoadMore()
+        }
+    }
+}