fix(ui): opaque tab rows and bottom-bar under nav inset

When the disappearing bars translate on top of content, any translucent
chrome lets items bleed through — which the user noticed on Home: posts
became visible through the transparent SecondaryTabRow, and the strip
under Android's gesture bar (covered by windowInsetsPadding on the
bottom nav) was transparent too.

- Swap `containerColor = Color.Transparent` to
  `MaterialTheme.colorScheme.background` on all tab rows that sit in a
  DisappearingScaffold topBar slot (Home, Discover, Polls, Community,
  ChatroomListTabs, OldBookmarkList).
- Paint AppBottomBar's outer Column with the background before the
  windowInsetsPadding, so the system-gesture-bar strip at the bottom is
  opaque and items scrolling behind it are hidden.

FollowPackFeedScreen intentionally uses a translucent (alpha 0.6f) top
bar as a design choice, so it's left as-is.

https://claude.ai/code/session_01M3Bj24jLc9aVhMuvn55jXa
This commit is contained in:
Claude
2026-04-18 15:59:33 +00:00
parent f9cc86f5af
commit f1cbf80826
7 changed files with 8 additions and 11 deletions
@@ -21,6 +21,7 @@
package com.vitorpamplona.amethyst.ui.navigation.bottombars
import androidx.compose.foundation.Canvas
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.RowScope
@@ -71,6 +72,7 @@ private fun RenderBottomMenu(
modifier =
Modifier
.fillMaxWidth()
.background(MaterialTheme.colorScheme.background)
.windowInsetsPadding(windowInsets)
.consumeWindowInsets(windowInsets)
.height(50.dp),
@@ -43,7 +43,6 @@ import androidx.compose.runtime.getValue
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.LocalContext
import androidx.lifecycle.compose.collectAsStateWithLifecycle
import androidx.lifecycle.viewmodel.compose.viewModel
@@ -110,7 +109,7 @@ private fun RenderOldBookmarkScreen(
Column {
TopBarWithBackButton(stringRes(id = R.string.old_bookmarks_title), nav::popBack)
SecondaryTabRow(
containerColor = Color.Transparent,
containerColor = MaterialTheme.colorScheme.background,
contentColor = MaterialTheme.colorScheme.onBackground,
selectedTabIndex = pagerState.currentPage,
modifier = TabRowHeight,
@@ -46,7 +46,6 @@ import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import com.vitorpamplona.amethyst.R
import com.vitorpamplona.amethyst.commons.ui.feeds.FeedContentState
import com.vitorpamplona.amethyst.ui.components.M3ActionDialog
@@ -81,7 +80,7 @@ fun MessagesTabHeader(
Box(Modifier.fillMaxWidth()) {
SecondaryTabRow(
containerColor = Color.Transparent,
containerColor = MaterialTheme.colorScheme.background,
contentColor = MaterialTheme.colorScheme.onBackground,
selectedTabIndex = pagerState.currentPage,
modifier = TabRowHeight,
@@ -40,7 +40,6 @@ import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.lifecycle.viewmodel.compose.viewModel
import com.vitorpamplona.amethyst.R
@@ -168,7 +167,7 @@ fun CommunityScreen(
}
SecondaryTabRow(
containerColor = Color.Transparent,
containerColor = MaterialTheme.colorScheme.background,
contentColor = MaterialTheme.colorScheme.onBackground,
modifier = TabRowHeight,
selectedTabIndex = pagerState.currentPage,
@@ -224,7 +224,7 @@ private fun DiscoverPages(
Column {
DiscoveryTopBar(accountViewModel, nav)
SecondaryScrollableTabRow(
containerColor = Color.Transparent,
containerColor = MaterialTheme.colorScheme.background,
contentColor = MaterialTheme.colorScheme.onBackground,
selectedTabIndex = pagerState.currentPage,
modifier = TabRowHeight,
@@ -53,7 +53,6 @@ import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.LocalLayoutDirection
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
@@ -185,7 +184,7 @@ private fun HomePages(
Column {
HomeTopBar(accountViewModel, nav)
SecondaryTabRow(
containerColor = Color.Transparent,
containerColor = MaterialTheme.colorScheme.background,
contentColor = MaterialTheme.colorScheme.onBackground,
modifier = TabRowHeight,
selectedTabIndex = pagerState.currentPage,
@@ -34,7 +34,6 @@ import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.graphics.Color
import androidx.lifecycle.compose.collectAsStateWithLifecycle
import com.vitorpamplona.amethyst.R
import com.vitorpamplona.amethyst.commons.ui.feeds.FeedContentState
@@ -131,7 +130,7 @@ private fun PollsPages(
Column {
PollsTopBar(accountViewModel, nav)
SecondaryTabRow(
containerColor = Color.Transparent,
containerColor = MaterialTheme.colorScheme.background,
contentColor = MaterialTheme.colorScheme.onBackground,
modifier = TabRowHeight,
selectedTabIndex = pagerState.currentPage,