Merge pull request #2618 from vitorpamplona/claude/fix-fab-positioning-Ec1pl

Fix FAB positioning when AppBottomBar hides on nested navigation
2026-04-27 22:12:42 -04:00
parent 7d2741bd68 addd1418f6
commit dbeec35257
30 changed files with 257 additions and 91 deletions
@@ -23,7 +23,9 @@ package com.vitorpamplona.amethyst.ui.layouts
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.WindowInsets
 import androidx.compose.foundation.layout.imePadding
+import androidx.compose.foundation.layout.navigationBars
 import androidx.compose.foundation.layout.navigationBarsPadding
 import androidx.compose.foundation.layout.statusBarsPadding
 import androidx.compose.material3.HorizontalDivider
@@ -126,6 +128,7 @@ private fun ScaffoldLayout(
    floatingButton: (@Composable () -> Unit)?,
    mainContent: @Composable (padding: PaddingValues) -> Unit,
 ) {
+    val navBarInsets = WindowInsets.navigationBars
    SubcomposeLayout { constraints ->
        val layoutWidth = constraints.maxWidth
        val layoutHeight = constraints.maxHeight
@@ -160,7 +163,15 @@ private fun ScaffoldLayout(
                    }
                }.firstOrNull()?.measure(looseConstraints)
            }
-        val bottomHeight = bottomPlaceable?.height ?: 0
+        // When the bar lambda is provided but its content emits nothing (e.g. AppBottomBar
+        // hides itself on canPop entries), reserve the system-nav-bar inset so the FAB and
+        // content stay clear of the navigation bar instead of sliding under it. The
+        // `bottomBar == null` branch is already handled by navigationBarsPadding on
+        // rootModifier.
+        val bottomHeight =
+            (bottomPlaceable?.height ?: 0).let { measured ->
+                if (bottomBar != null && measured == 0) navBarInsets.getBottom(this) else measured
+            }

        // Publish the measured limits so the nested-scroll connection can clamp correctly.
        state.topHeightLimit = topHeight.toFloat()
@@ -54,6 +54,11 @@ import com.vitorpamplona.amethyst.ui.theme.Size10Modifier
 import com.vitorpamplona.amethyst.ui.theme.Size24dp
 import com.vitorpamplona.amethyst.ui.theme.Size27dp

+/** Content height of the [AppBottomBar] (the 50.dp Column inside [RenderBottomMenu]),
+ * exclusive of the system navigation-bar inset. Used by FAB callers that want to
+ * reserve the same vertical space when the bar hides itself on canPop entries. */
+val AppBottomBarHeight = 50.dp
+
@Composable
 fun AppBottomBar(
    selectedRoute: Route?,
@@ -99,7 +104,7 @@ private fun RenderBottomMenu(
                .background(MaterialTheme.colorScheme.background)
                .windowInsetsPadding(windowInsets)
                .consumeWindowInsets(windowInsets)
-                .height(50.dp),
+                .height(AppBottomBarHeight),
    ) {
        HorizontalDivider(
            thickness = DividerThickness,
@@ -0,0 +1,54 @@
+/*
+ * Copyright (c) 2025 Vitor Pamplona
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of
+ * this software and associated documentation files (the "Software"), to deal in
+ * the Software without restriction, including without limitation the rights to use,
+ * copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the
+ * Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+ * FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+ * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
+ * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+ * WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+package com.vitorpamplona.amethyst.ui.navigation.bottombars
+
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.padding
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import com.vitorpamplona.amethyst.ui.navigation.navs.INav
+
+/**
+ * Reserves the visual space the [AppBottomBar] occupies on root tab entries so a
+ * FloatingActionButton stays at the same vertical position whether or not the bar is
+ * rendered. [AppBottomBar] hides itself on canPop entries (drawer pushes, in-app
+ * navigations) — without this padding the FAB drops by [AppBottomBarHeight] there.
+ *
+ * The system-navigation-bar inset is already handled by the surrounding Scaffold, so
+ * only the bar's content height needs to be reserved.
+ */
+@Composable
+fun Modifier.fabBottomBarPadding(nav: INav): Modifier = if (nav.canPop()) padding(bottom = AppBottomBarHeight) else this
+
+/**
+ * Convenience wrapper that places [content] in a [Box] with [fabBottomBarPadding] applied.
+ * Use this around `floatingActionButton` / `floatingButton` slots whose body is a reusable
+ * named FAB composable that does not accept a `modifier` parameter.
+ */
+@Composable
+fun FabBottomBarPadded(
+    nav: INav,
+    content: @Composable () -> Unit,
+) {
+    Box(modifier = Modifier.fabBottomBarPadding(nav)) {
+        content()
+    }
+}
@@ -32,6 +32,7 @@ import com.vitorpamplona.amethyst.ui.feeds.ScrollStateKeys
 import com.vitorpamplona.amethyst.ui.feeds.WatchLifecycleAndUpdateModel
 import com.vitorpamplona.amethyst.ui.layouts.DisappearingScaffold
 import com.vitorpamplona.amethyst.ui.navigation.bottombars.AppBottomBar
+import com.vitorpamplona.amethyst.ui.navigation.bottombars.FabBottomBarPadded
 import com.vitorpamplona.amethyst.ui.navigation.navs.INav
 import com.vitorpamplona.amethyst.ui.navigation.routes.Route
 import com.vitorpamplona.amethyst.ui.screen.loggedIn.AccountViewModel
@@ -74,7 +75,9 @@ fun ArticlesScreen(
            }
        },
        floatingButton = {
-            NewArticleButton(nav)
+            FabBottomBarPadded(nav) {
+                NewArticleButton(nav)
+            }
        },
        accountViewModel = accountViewModel,
    ) {
@@ -32,6 +32,7 @@ import com.vitorpamplona.amethyst.ui.feeds.ScrollStateKeys
 import com.vitorpamplona.amethyst.ui.feeds.WatchLifecycleAndUpdateModel
 import com.vitorpamplona.amethyst.ui.layouts.DisappearingScaffold
 import com.vitorpamplona.amethyst.ui.navigation.bottombars.AppBottomBar
+import com.vitorpamplona.amethyst.ui.navigation.bottombars.FabBottomBarPadded
 import com.vitorpamplona.amethyst.ui.navigation.navs.INav
 import com.vitorpamplona.amethyst.ui.navigation.routes.Route
 import com.vitorpamplona.amethyst.ui.screen.loggedIn.AccountViewModel
@@ -74,7 +75,9 @@ fun BadgesScreen(
            }
        },
        floatingButton = {
-            NewBadgeButton(accountViewModel)
+            FabBottomBarPadded(nav) {
+                NewBadgeButton(accountViewModel)
+            }
        },
        accountViewModel = accountViewModel,
    ) {
@@ -40,6 +40,7 @@ import com.vitorpamplona.amethyst.model.nip51Lists.OldBookmarkListState
 import com.vitorpamplona.amethyst.model.nip51Lists.PinListState
 import com.vitorpamplona.amethyst.model.nip51Lists.labeledBookmarkLists.LabeledBookmarkList
 import com.vitorpamplona.amethyst.ui.navigation.bottombars.AppBottomBar
+import com.vitorpamplona.amethyst.ui.navigation.bottombars.fabBottomBarPadding
 import com.vitorpamplona.amethyst.ui.navigation.navs.INav
 import com.vitorpamplona.amethyst.ui.navigation.routes.Route
 import com.vitorpamplona.amethyst.ui.navigation.topbars.TopBarWithBackButton
@@ -130,7 +131,10 @@ fun ListOfBookmarkGroupsFeed(
            }
        },
        floatingActionButton = {
-            BookmarkGroupFab(onAddGroup = addBookmarkGroup)
+            BookmarkGroupFab(
+                onAddGroup = addBookmarkGroup,
+                modifier = Modifier.fabBottomBarPadding(nav),
+            )
        },
    ) { paddingValues ->
        Column(
@@ -160,7 +164,10 @@ fun ListOfBookmarkGroupsFeed(
 }

@Composable
-fun BookmarkGroupFab(onAddGroup: () -> Unit) {
+fun BookmarkGroupFab(
+    onAddGroup: () -> Unit,
+    modifier: Modifier = Modifier,
+) {
    ExtendedFloatingActionButton(
        text = {
            Text(text = stringRes(R.string.follow_set_create_btn_label))
@@ -174,5 +181,6 @@ fun BookmarkGroupFab(onAddGroup: () -> Unit) {
        onClick = onAddGroup,
        shape = CircleShape,
        containerColor = MaterialTheme.colorScheme.primary,
+        modifier = modifier,
    )
 }
@@ -38,6 +38,7 @@ import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import com.vitorpamplona.amethyst.R
 import com.vitorpamplona.amethyst.model.AddressableNote
 import com.vitorpamplona.amethyst.model.nip51Lists.labeledBookmarkLists.LabeledBookmarkList
+import com.vitorpamplona.amethyst.ui.navigation.bottombars.FabBottomBarPadded
 import com.vitorpamplona.amethyst.ui.navigation.navs.INav
 import com.vitorpamplona.amethyst.ui.navigation.routes.Route
 import com.vitorpamplona.amethyst.ui.navigation.topbars.TopBarWithBackButton
@@ -80,7 +81,9 @@ private fun ListManagementView(
            TopBarWithBackButton(caption = stringRes(R.string.article_bookmark_management_title), nav)
        },
        floatingActionButton = {
-            NewListButton { nav.nav(Route.BookmarkGroupMetadataEdit()) }
+            FabBottomBarPadded(nav) {
+                NewListButton { nav.nav(Route.BookmarkGroupMetadataEdit()) }
+            }
        },
    ) { contentPadding ->
        Column(
@@ -39,6 +39,7 @@ import com.vitorpamplona.amethyst.R
 import com.vitorpamplona.amethyst.model.Note
 import com.vitorpamplona.amethyst.model.nip51Lists.labeledBookmarkLists.LabeledBookmarkList
 import com.vitorpamplona.amethyst.ui.components.LoadNote
+import com.vitorpamplona.amethyst.ui.navigation.bottombars.FabBottomBarPadded
 import com.vitorpamplona.amethyst.ui.navigation.navs.INav
 import com.vitorpamplona.amethyst.ui.navigation.routes.Route
 import com.vitorpamplona.amethyst.ui.navigation.topbars.TopBarWithBackButton
@@ -79,7 +80,9 @@ private fun ListManagementView(
            TopBarWithBackButton(caption = stringRes(R.string.post_bookmark_management_title), nav)
        },
        floatingActionButton = {
-            NewListButton { nav.nav(Route.BookmarkGroupMetadataEdit()) }
+            FabBottomBarPadded(nav) {
+                NewListButton { nav.nav(Route.BookmarkGroupMetadataEdit()) }
+            }
        },
    ) { contentPadding ->
        Column(
@@ -55,6 +55,7 @@ import com.vitorpamplona.amethyst.model.AddressableNote
 import com.vitorpamplona.amethyst.service.relayClient.reqCommand.event.EventFinderQueryState
 import com.vitorpamplona.amethyst.ui.components.DeletedItemsBanner
 import com.vitorpamplona.amethyst.ui.layouts.DisappearingScaffold
+import com.vitorpamplona.amethyst.ui.navigation.bottombars.FabBottomBarPadded
 import com.vitorpamplona.amethyst.ui.navigation.navs.INav
 import com.vitorpamplona.amethyst.ui.navigation.topbars.TopBarWithBackButton
 import com.vitorpamplona.amethyst.ui.screen.RefresheableFeedView
@@ -158,29 +159,31 @@ private fun RenderOldBookmarkScreen(
            }
        },
        floatingButton = {
-            ExtendedFloatingActionButton(
-                text = { Text(stringRes(R.string.migrate_bookmarks_button)) },
-                icon = {
-                    Icon(
-                        symbol = MaterialSymbols.AutoMirrored.DriveFileMove,
-                        contentDescription = stringRes(R.string.migrate_bookmarks_button),
-                    )
-                },
-                onClick = {
-                    accountViewModel.launchSigner {
-                        accountViewModel.account.migrateOldBookmarksToNew()
-                        coroutineScope.launch {
-                            Toast
-                                .makeText(
-                                    context,
-                                    context.getString(R.string.migrate_bookmarks_success),
-                                    Toast.LENGTH_SHORT,
-                                ).show()
+            FabBottomBarPadded(nav) {
+                ExtendedFloatingActionButton(
+                    text = { Text(stringRes(R.string.migrate_bookmarks_button)) },
+                    icon = {
+                        Icon(
+                            symbol = MaterialSymbols.AutoMirrored.DriveFileMove,
+                            contentDescription = stringRes(R.string.migrate_bookmarks_button),
+                        )
+                    },
+                    onClick = {
+                        accountViewModel.launchSigner {
+                            accountViewModel.account.migrateOldBookmarksToNew()
+                            coroutineScope.launch {
+                                Toast
+                                    .makeText(
+                                        context,
+                                        context.getString(R.string.migrate_bookmarks_success),
+                                        Toast.LENGTH_SHORT,
+                                    ).show()
+                            }
                        }
-                    }
-                },
-                containerColor = MaterialTheme.colorScheme.primary,
-            )
+                    },
+                    containerColor = MaterialTheme.colorScheme.primary,
+                )
+            }
        },
        accountViewModel = accountViewModel,
    ) { paddingValues ->
@@ -61,6 +61,7 @@ import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import com.vitorpamplona.amethyst.commons.icons.symbols.Icon
 import com.vitorpamplona.amethyst.commons.icons.symbols.MaterialSymbols
 import com.vitorpamplona.amethyst.commons.model.marmotGroups.MarmotGroupChatroom
+import com.vitorpamplona.amethyst.ui.navigation.bottombars.FabBottomBarPadded
 import com.vitorpamplona.amethyst.ui.navigation.navs.INav
 import com.vitorpamplona.amethyst.ui.navigation.routes.Route
 import com.vitorpamplona.amethyst.ui.note.NonClickableUserPictures
@@ -116,8 +117,10 @@ fun MarmotGroupListScreen(
            )
        },
        floatingActionButton = {
-            FloatingActionButton(onClick = { nav.nav(Route.CreateMarmotGroup) }, shape = CircleShape) {
-                Icon(MaterialSymbols.Add, contentDescription = "Create Group")
+            FabBottomBarPadded(nav) {
+                FloatingActionButton(onClick = { nav.nav(Route.CreateMarmotGroup) }, shape = CircleShape) {
+                    Icon(MaterialSymbols.Add, contentDescription = "Create Group")
+                }
            }
        },
    ) { padding ->
@@ -32,6 +32,7 @@ import com.vitorpamplona.amethyst.ui.feeds.ScrollStateKeys
 import com.vitorpamplona.amethyst.ui.feeds.WatchLifecycleAndUpdateModel
 import com.vitorpamplona.amethyst.ui.layouts.DisappearingScaffold
 import com.vitorpamplona.amethyst.ui.navigation.bottombars.AppBottomBar
+import com.vitorpamplona.amethyst.ui.navigation.bottombars.FabBottomBarPadded
 import com.vitorpamplona.amethyst.ui.navigation.navs.INav
 import com.vitorpamplona.amethyst.ui.navigation.routes.Route
 import com.vitorpamplona.amethyst.ui.navigation.topbars.AmethystClickableIcon
@@ -91,7 +92,9 @@ fun MessagesSinglePane(
            }
        },
        floatingButton = {
-            ChannelFabColumn(nav)
+            FabBottomBarPadded(nav) {
+                ChannelFabColumn(nav)
+            }
        },
        accountViewModel = accountViewModel,
    ) {
@@ -73,6 +73,7 @@ import com.vitorpamplona.amethyst.commons.chess.SpectatingGameCard
 import com.vitorpamplona.amethyst.commons.icons.symbols.Icon
 import com.vitorpamplona.amethyst.commons.icons.symbols.MaterialSymbols
 import com.vitorpamplona.amethyst.ui.feeds.RefresheableBox
+import com.vitorpamplona.amethyst.ui.navigation.bottombars.FabBottomBarPadded
 import com.vitorpamplona.amethyst.ui.navigation.navs.INav
 import com.vitorpamplona.amethyst.ui.navigation.routes.Route
 import com.vitorpamplona.amethyst.ui.screen.loggedIn.AccountViewModel
@@ -180,7 +181,9 @@ fun ChessLobbyScreen(
            )
        },
        floatingActionButton = {
-            NewChessGameButton { showNewGameDialog = true }
+            FabBottomBarPadded(nav) {
+                NewChessGameButton { showNewGameDialog = true }
+            }
        },
    ) { paddingValues ->
        RefresheableBox(
@@ -47,6 +47,7 @@ import com.vitorpamplona.amethyst.model.AddressableNote
 import com.vitorpamplona.amethyst.ui.feeds.WatchLifecycleAndUpdateModel
 import com.vitorpamplona.amethyst.ui.feeds.rememberForeverPagerState
 import com.vitorpamplona.amethyst.ui.layouts.DisappearingScaffold
+import com.vitorpamplona.amethyst.ui.navigation.bottombars.FabBottomBarPadded
 import com.vitorpamplona.amethyst.ui.navigation.navs.INav
 import com.vitorpamplona.amethyst.ui.navigation.topbars.ShorterTopAppBar
 import com.vitorpamplona.amethyst.ui.navigation.topbars.TitleIconModifier
@@ -186,7 +187,9 @@ fun CommunityScreen(
            }
        },
        floatingButton = {
-            NewCommunityNoteButton(note.idHex, accountViewModel, nav)
+            FabBottomBarPadded(nav) {
+                NewCommunityNoteButton(note.idHex, accountViewModel, nav)
+            }
        },
        accountViewModel = accountViewModel,
    ) {
@@ -45,6 +45,7 @@ import com.vitorpamplona.amethyst.ui.feeds.WatchLifecycleAndUpdateModel
 import com.vitorpamplona.amethyst.ui.layouts.DisappearingScaffold
 import com.vitorpamplona.amethyst.ui.layouts.rememberFeedContentPadding
 import com.vitorpamplona.amethyst.ui.navigation.bottombars.AppBottomBar
+import com.vitorpamplona.amethyst.ui.navigation.bottombars.FabBottomBarPadded
 import com.vitorpamplona.amethyst.ui.navigation.navs.INav
 import com.vitorpamplona.amethyst.ui.navigation.routes.Route
 import com.vitorpamplona.amethyst.ui.screen.loggedIn.AccountViewModel
@@ -91,7 +92,9 @@ fun CommunitiesScreen(
            }
        },
        floatingButton = {
-            NewCommunityButton(nav)
+            FabBottomBarPadded(nav) {
+                NewCommunityButton(nav)
+            }
        },
        accountViewModel = accountViewModel,
    ) {
@@ -70,6 +70,7 @@ import com.vitorpamplona.amethyst.ui.feeds.rememberForeverPagerState
 import com.vitorpamplona.amethyst.ui.layouts.DisappearingScaffold
 import com.vitorpamplona.amethyst.ui.layouts.rememberFeedContentPadding
 import com.vitorpamplona.amethyst.ui.navigation.bottombars.AppBottomBar
+import com.vitorpamplona.amethyst.ui.navigation.bottombars.FabBottomBarPadded
 import com.vitorpamplona.amethyst.ui.navigation.navs.INav
 import com.vitorpamplona.amethyst.ui.navigation.routes.Route
 import com.vitorpamplona.amethyst.ui.screen.loggedIn.AccountViewModel
@@ -253,12 +254,14 @@ private fun DiscoverPages(
        floatingButton = {
            val currentPage = pagerState.currentPage
            if (currentPage >= 0 && currentPage < feedTabs.size) {
-                if (feedTabs[currentPage].resource == R.string.discover_marketplace) {
-                    NewProductButton(accountViewModel, nav)
-                }
+                FabBottomBarPadded(nav) {
+                    if (feedTabs[currentPage].resource == R.string.discover_marketplace) {
+                        NewProductButton(accountViewModel, nav)
+                    }

-                if (feedTabs[currentPage].resource == R.string.discover_reads) {
-                    NewLongFormMarkdownButton(accountViewModel, nav)
+                    if (feedTabs[currentPage].resource == R.string.discover_reads) {
+                        NewLongFormMarkdownButton(accountViewModel, nav)
+                    }
                }
            }
        },
@@ -63,6 +63,7 @@ import com.vitorpamplona.amethyst.model.nip30CustomEmojis.OwnedEmojiPack
 import com.vitorpamplona.amethyst.ui.components.M3ActionDialog
 import com.vitorpamplona.amethyst.ui.components.M3ActionRow
 import com.vitorpamplona.amethyst.ui.components.M3ActionSection
+import com.vitorpamplona.amethyst.ui.navigation.bottombars.FabBottomBarPadded
 import com.vitorpamplona.amethyst.ui.navigation.navs.INav
 import com.vitorpamplona.amethyst.ui.navigation.topbars.ShorterTopAppBar
 import com.vitorpamplona.amethyst.ui.note.ArrowBackIcon
@@ -132,18 +133,20 @@ private fun EmojiPackScreenView(
            )
        },
        floatingActionButton = {
-            ExtendedFloatingActionButton(
-                text = { Text(text = stringRes(R.string.add_emoji_fab)) },
-                icon = {
-                    Icon(
-                        symbol = MaterialSymbols.Add,
-                        contentDescription = null,
-                    )
-                },
-                onClick = { showAddDialog = true },
-                shape = CircleShape,
-                containerColor = MaterialTheme.colorScheme.primary,
-            )
+            FabBottomBarPadded(nav) {
+                ExtendedFloatingActionButton(
+                    text = { Text(text = stringRes(R.string.add_emoji_fab)) },
+                    icon = {
+                        Icon(
+                            symbol = MaterialSymbols.Add,
+                            contentDescription = null,
+                        )
+                    },
+                    onClick = { showAddDialog = true },
+                    shape = CircleShape,
+                    containerColor = MaterialTheme.colorScheme.primary,
+                )
+            }
        },
    ) { padding ->
        Column(
@@ -62,6 +62,7 @@ import com.vitorpamplona.amethyst.ui.components.M3ActionDialog
 import com.vitorpamplona.amethyst.ui.components.M3ActionRow
 import com.vitorpamplona.amethyst.ui.components.M3ActionSection
 import com.vitorpamplona.amethyst.ui.navigation.bottombars.AppBottomBar
+import com.vitorpamplona.amethyst.ui.navigation.bottombars.fabBottomBarPadding
 import com.vitorpamplona.amethyst.ui.navigation.navs.INav
 import com.vitorpamplona.amethyst.ui.navigation.routes.Route
 import com.vitorpamplona.amethyst.ui.navigation.topbars.TopBarWithBackButton
@@ -126,7 +127,10 @@ fun ListOfEmojiPacksFeed(
            }
        },
        floatingActionButton = {
-            EmojiPackFab(onAddPack = addEmojiPack)
+            EmojiPackFab(
+                onAddPack = addEmojiPack,
+                modifier = Modifier.fabBottomBarPadding(nav),
+            )
        },
    ) { paddingValues ->
        Column(
@@ -308,7 +312,10 @@ private fun MyEmojiListRow(
 }

@Composable
-fun EmojiPackFab(onAddPack: () -> Unit) {
+fun EmojiPackFab(
+    onAddPack: () -> Unit,
+    modifier: Modifier = Modifier,
+) {
    ExtendedFloatingActionButton(
        text = {
            Text(text = stringRes(R.string.new_emoji_pack))
@@ -322,5 +329,6 @@ fun EmojiPackFab(onAddPack: () -> Unit) {
        onClick = onAddPack,
        shape = CircleShape,
        containerColor = MaterialTheme.colorScheme.primary,
+        modifier = modifier,
    )
 }
@@ -31,6 +31,7 @@ import com.vitorpamplona.amethyst.R
 import com.vitorpamplona.amethyst.service.relayClient.reqCommand.user.observeUserIsFollowingGeohash
 import com.vitorpamplona.amethyst.ui.feeds.WatchLifecycleAndUpdateModel
 import com.vitorpamplona.amethyst.ui.layouts.DisappearingScaffold
+import com.vitorpamplona.amethyst.ui.navigation.bottombars.FabBottomBarPadded
 import com.vitorpamplona.amethyst.ui.navigation.navs.INav
 import com.vitorpamplona.amethyst.ui.navigation.routes.Route
 import com.vitorpamplona.amethyst.ui.navigation.topbars.TopBarExtensibleWithBackButton
@@ -96,7 +97,9 @@ fun GeoHashScreen(
            )
        },
        floatingButton = {
-            NewGeoPostButton(tag.geohash, accountViewModel, nav)
+            FabBottomBarPadded(nav) {
+                NewGeoPostButton(tag.geohash, accountViewModel, nav)
+            }
        },
        accountViewModel = accountViewModel,
    ) {
@@ -36,6 +36,7 @@ import com.vitorpamplona.amethyst.R
 import com.vitorpamplona.amethyst.service.relayClient.reqCommand.user.observeUserIsFollowingHashtag
 import com.vitorpamplona.amethyst.ui.feeds.WatchLifecycleAndUpdateModel
 import com.vitorpamplona.amethyst.ui.layouts.DisappearingScaffold
+import com.vitorpamplona.amethyst.ui.navigation.bottombars.FabBottomBarPadded
 import com.vitorpamplona.amethyst.ui.navigation.navs.INav
 import com.vitorpamplona.amethyst.ui.navigation.routes.Route
 import com.vitorpamplona.amethyst.ui.navigation.topbars.TopBarExtensibleWithBackButton
@@ -101,7 +102,9 @@ fun HashtagScreen(
            )
        },
        floatingButton = {
-            NewHashtagPostButton(tag.hashtag, accountViewModel, nav)
+            FabBottomBarPadded(nav) {
+                NewHashtagPostButton(tag.hashtag, accountViewModel, nav)
+            }
        },
        accountViewModel = accountViewModel,
    ) {
@@ -77,6 +77,7 @@ import com.vitorpamplona.amethyst.ui.feeds.rememberForeverPagerState
 import com.vitorpamplona.amethyst.ui.layouts.DisappearingScaffold
 import com.vitorpamplona.amethyst.ui.layouts.rememberFeedContentPadding
 import com.vitorpamplona.amethyst.ui.navigation.bottombars.AppBottomBar
+import com.vitorpamplona.amethyst.ui.navigation.bottombars.FabBottomBarPadded
 import com.vitorpamplona.amethyst.ui.navigation.navs.INav
 import com.vitorpamplona.amethyst.ui.navigation.routes.Route
 import com.vitorpamplona.amethyst.ui.note.NoteCompose
@@ -208,7 +209,9 @@ private fun HomePages(
            }
        },
        floatingButton = {
-            HomeScreenFloatingButton(accountViewModel, nav)
+            FabBottomBarPadded(nav) {
+                HomeScreenFloatingButton(accountViewModel, nav)
+            }
        },
        accountViewModel = accountViewModel,
    ) { paddingValues ->
@@ -48,6 +48,7 @@ import com.vitorpamplona.amethyst.R
 import com.vitorpamplona.amethyst.commons.icons.symbols.Icon
 import com.vitorpamplona.amethyst.commons.icons.symbols.MaterialSymbols
 import com.vitorpamplona.amethyst.ui.navigation.bottombars.AppBottomBar
+import com.vitorpamplona.amethyst.ui.navigation.bottombars.fabBottomBarPadding
 import com.vitorpamplona.amethyst.ui.navigation.navs.INav
 import com.vitorpamplona.amethyst.ui.navigation.routes.Route
 import com.vitorpamplona.amethyst.ui.navigation.topbars.TopBarWithBackButton
@@ -82,7 +83,10 @@ fun ListOfInterestSetsScreen(
            }
        },
        floatingActionButton = {
-            InterestSetFab(onAdd = { nav.nav(Route.InterestSetMetadataEdit()) })
+            InterestSetFab(
+                onAdd = { nav.nav(Route.InterestSetMetadataEdit()) },
+                modifier = Modifier.fabBottomBarPadding(nav),
+            )
        },
    ) { paddingValues ->
        Column(
@@ -155,7 +159,10 @@ private fun EmptyInterestSets() {
 }

@Composable
-fun InterestSetFab(onAdd: () -> Unit) {
+fun InterestSetFab(
+    onAdd: () -> Unit,
+    modifier: Modifier = Modifier,
+) {
    ExtendedFloatingActionButton(
        text = {
            Text(text = stringRes(R.string.interest_set_create_btn_label))
@@ -169,5 +176,6 @@ fun InterestSetFab(onAdd: () -> Unit) {
        onClick = onAdd,
        shape = CircleShape,
        containerColor = MaterialTheme.colorScheme.primary,
+        modifier = modifier,
    )
 }
@@ -32,6 +32,7 @@ import com.vitorpamplona.amethyst.ui.feeds.ScrollStateKeys
 import com.vitorpamplona.amethyst.ui.feeds.WatchLifecycleAndUpdateModel
 import com.vitorpamplona.amethyst.ui.layouts.DisappearingScaffold
 import com.vitorpamplona.amethyst.ui.navigation.bottombars.AppBottomBar
+import com.vitorpamplona.amethyst.ui.navigation.bottombars.FabBottomBarPadded
 import com.vitorpamplona.amethyst.ui.navigation.navs.INav
 import com.vitorpamplona.amethyst.ui.navigation.routes.Route
 import com.vitorpamplona.amethyst.ui.screen.loggedIn.AccountViewModel
@@ -74,7 +75,9 @@ fun LongsScreen(
            }
        },
        floatingButton = {
-            NewLongVideoButton(accountViewModel, nav, longsFeedContentState::sendToTop)
+            FabBottomBarPadded(nav) {
+                NewLongVideoButton(accountViewModel, nav, longsFeedContentState::sendToTop)
+            }
        },
        accountViewModel = accountViewModel,
    ) {
@@ -43,6 +43,7 @@ import com.vitorpamplona.amethyst.ui.feeds.ScrollStateKeys
 import com.vitorpamplona.amethyst.ui.feeds.WatchLifecycleAndUpdateModel
 import com.vitorpamplona.amethyst.ui.layouts.DisappearingScaffold
 import com.vitorpamplona.amethyst.ui.navigation.bottombars.AppBottomBar
+import com.vitorpamplona.amethyst.ui.navigation.bottombars.FabBottomBarPadded
 import com.vitorpamplona.amethyst.ui.navigation.navs.INav
 import com.vitorpamplona.amethyst.ui.navigation.routes.Route
 import com.vitorpamplona.amethyst.ui.screen.loggedIn.AccountViewModel
@@ -93,20 +94,22 @@ fun NestsScreen(
            }
        },
        floatingButton = {
-            FloatingActionButton(
-                onClick = {
-                    if (nestsServers.any { it.startsWith("http") }) {
-                        showCreateSheet = true
-                    } else {
-                        showSetupDialog = true
-                    }
-                },
-                shape = CircleShape,
-            ) {
-                Icon(
-                    symbol = MaterialSymbols.Add,
-                    contentDescription = stringRes(R.string.nest_create_fab),
-                )
+            FabBottomBarPadded(nav) {
+                FloatingActionButton(
+                    onClick = {
+                        if (nestsServers.any { it.startsWith("http") }) {
+                            showCreateSheet = true
+                        } else {
+                            showSetupDialog = true
+                        }
+                    },
+                    shape = CircleShape,
+                ) {
+                    Icon(
+                        symbol = MaterialSymbols.Add,
+                        contentDescription = stringRes(R.string.nest_create_fab),
+                    )
+                }
            }
        },
        accountViewModel = accountViewModel,
@@ -32,6 +32,7 @@ import com.vitorpamplona.amethyst.ui.feeds.ScrollStateKeys
 import com.vitorpamplona.amethyst.ui.feeds.WatchLifecycleAndUpdateModel
 import com.vitorpamplona.amethyst.ui.layouts.DisappearingScaffold
 import com.vitorpamplona.amethyst.ui.navigation.bottombars.AppBottomBar
+import com.vitorpamplona.amethyst.ui.navigation.bottombars.FabBottomBarPadded
 import com.vitorpamplona.amethyst.ui.navigation.navs.INav
 import com.vitorpamplona.amethyst.ui.navigation.routes.Route
 import com.vitorpamplona.amethyst.ui.screen.loggedIn.AccountViewModel
@@ -74,7 +75,9 @@ fun PicturesScreen(
            }
        },
        floatingButton = {
-            NewPictureButton(accountViewModel, nav, picturesFeedContentState::sendToTop)
+            FabBottomBarPadded(nav) {
+                NewPictureButton(accountViewModel, nav, picturesFeedContentState::sendToTop)
+            }
        },
        accountViewModel = accountViewModel,
    ) {
@@ -46,6 +46,7 @@ import com.vitorpamplona.amethyst.ui.feeds.WatchLifecycleAndUpdateModel
 import com.vitorpamplona.amethyst.ui.feeds.rememberForeverPagerState
 import com.vitorpamplona.amethyst.ui.layouts.DisappearingScaffold
 import com.vitorpamplona.amethyst.ui.navigation.bottombars.AppBottomBar
+import com.vitorpamplona.amethyst.ui.navigation.bottombars.FabBottomBarPadded
 import com.vitorpamplona.amethyst.ui.navigation.navs.INav
 import com.vitorpamplona.amethyst.ui.navigation.routes.Route
 import com.vitorpamplona.amethyst.ui.screen.loggedIn.AccountViewModel
@@ -156,7 +157,9 @@ private fun PollsPages(
            }
        },
        floatingButton = {
-            NewPollButton(nav)
+            FabBottomBarPadded(nav) {
+                NewPollButton(nav)
+            }
        },
        accountViewModel = accountViewModel,
    ) {
@@ -31,6 +31,7 @@ import com.vitorpamplona.amethyst.ui.feeds.ScrollStateKeys
 import com.vitorpamplona.amethyst.ui.feeds.WatchLifecycleAndUpdateModel
 import com.vitorpamplona.amethyst.ui.layouts.DisappearingScaffold
 import com.vitorpamplona.amethyst.ui.navigation.bottombars.AppBottomBar
+import com.vitorpamplona.amethyst.ui.navigation.bottombars.FabBottomBarPadded
 import com.vitorpamplona.amethyst.ui.navigation.navs.INav
 import com.vitorpamplona.amethyst.ui.navigation.routes.Route
 import com.vitorpamplona.amethyst.ui.screen.loggedIn.AccountViewModel
@@ -73,7 +74,9 @@ fun ProductsScreen(
            }
        },
        floatingButton = {
-            NewProductButton(accountViewModel, nav)
+            FabBottomBarPadded(nav) {
+                NewProductButton(accountViewModel, nav)
+            }
        },
        accountViewModel = accountViewModel,
    ) {
@@ -30,6 +30,7 @@ import com.vitorpamplona.amethyst.R
 import com.vitorpamplona.amethyst.service.relayClient.reqCommand.user.observeUserIsFollowingRelay
 import com.vitorpamplona.amethyst.ui.feeds.WatchLifecycleAndUpdateModel
 import com.vitorpamplona.amethyst.ui.layouts.DisappearingScaffold
+import com.vitorpamplona.amethyst.ui.navigation.bottombars.FabBottomBarPadded
 import com.vitorpamplona.amethyst.ui.navigation.navs.INav
 import com.vitorpamplona.amethyst.ui.navigation.routes.Route
 import com.vitorpamplona.amethyst.ui.navigation.topbars.TopBarExtensibleWithBackButton
@@ -99,7 +100,9 @@ fun RelayFeedScreen(
            )
        },
        floatingButton = {
-            NewRelayNoteButton(accountViewModel, nav)
+            FabBottomBarPadded(nav) {
+                NewRelayNoteButton(accountViewModel, nav)
+            }
        },
        accountViewModel = accountViewModel,
    ) {
@@ -32,6 +32,7 @@ import com.vitorpamplona.amethyst.ui.feeds.ScrollStateKeys
 import com.vitorpamplona.amethyst.ui.feeds.WatchLifecycleAndUpdateModel
 import com.vitorpamplona.amethyst.ui.layouts.DisappearingScaffold
 import com.vitorpamplona.amethyst.ui.navigation.bottombars.AppBottomBar
+import com.vitorpamplona.amethyst.ui.navigation.bottombars.FabBottomBarPadded
 import com.vitorpamplona.amethyst.ui.navigation.navs.INav
 import com.vitorpamplona.amethyst.ui.navigation.routes.Route
 import com.vitorpamplona.amethyst.ui.screen.loggedIn.AccountViewModel
@@ -74,7 +75,9 @@ fun ShortsScreen(
            }
        },
        floatingButton = {
-            NewShortVideoButton(accountViewModel, nav, shortsFeedContentState::sendToTop)
+            FabBottomBarPadded(nav) {
+                NewShortVideoButton(accountViewModel, nav, shortsFeedContentState::sendToTop)
+            }
        },
        accountViewModel = accountViewModel,
    ) {
@@ -42,6 +42,7 @@ import com.vitorpamplona.amethyst.ui.feeds.WatchLifecycleAndUpdateModel
 import com.vitorpamplona.amethyst.ui.layouts.DisappearingScaffold
 import com.vitorpamplona.amethyst.ui.layouts.rememberFeedContentPadding
 import com.vitorpamplona.amethyst.ui.navigation.bottombars.AppBottomBar
+import com.vitorpamplona.amethyst.ui.navigation.bottombars.FabBottomBarPadded
 import com.vitorpamplona.amethyst.ui.navigation.navs.INav
 import com.vitorpamplona.amethyst.ui.navigation.routes.Route
 import com.vitorpamplona.amethyst.ui.screen.loggedIn.AccountViewModel
@@ -91,7 +92,9 @@ fun VideoScreen(
            }
        },
        floatingButton = {
-            NewImageButton(accountViewModel, nav, videoFeedContentState::sendToTop)
+            FabBottomBarPadded(nav) {
+                NewImageButton(accountViewModel, nav, videoFeedContentState::sendToTop)
+            }
        },
        accountViewModel = accountViewModel,
    ) {
@@ -78,6 +78,7 @@ import com.vitorpamplona.amethyst.ui.feeds.WatchLifecycleAndUpdateModel
 import com.vitorpamplona.amethyst.ui.layouts.DisappearingScaffold
 import com.vitorpamplona.amethyst.ui.layouts.rememberFeedContentPadding
 import com.vitorpamplona.amethyst.ui.navigation.bottombars.AppBottomBar
+import com.vitorpamplona.amethyst.ui.navigation.bottombars.FabBottomBarPadded
 import com.vitorpamplona.amethyst.ui.navigation.navs.INav
 import com.vitorpamplona.amethyst.ui.navigation.routes.Route
 import com.vitorpamplona.amethyst.ui.navigation.topbars.ShorterTopAppBar
@@ -150,16 +151,18 @@ private fun RenderWebBookmarksScreen(
            }
        },
        floatingButton = {
-            FloatingActionButton(
-                onClick = { showAddDialog = true },
-                modifier = Size55Modifier,
-                shape = CircleShape,
-                containerColor = MaterialTheme.colorScheme.primary,
-            ) {
-                Icon(
-                    symbol = MaterialSymbols.Add,
-                    contentDescription = stringResource(R.string.web_bookmark_add_title),
-                )
+            FabBottomBarPadded(nav) {
+                FloatingActionButton(
+                    onClick = { showAddDialog = true },
+                    modifier = Size55Modifier,
+                    shape = CircleShape,
+                    containerColor = MaterialTheme.colorScheme.primary,
+                ) {
+                    Icon(
+                        symbol = MaterialSymbols.Add,
+                        contentDescription = stringResource(R.string.web_bookmark_add_title),
+                    )
+                }
            }
        },
        accountViewModel = accountViewModel,