fix: incorrect inner padding values of home screen

whitescent · Jul 31, 2024 · 7ccc9b1 · 7ccc9b1
1 parent 87de40a
commit 7ccc9b1
Show file tree

Hide file tree

Showing 5 changed files with 79 additions and 81 deletions.
diff --git a/app/src/main/java/com/github/whitescent/mastify/screen/home/Home.kt b/app/src/main/java/com/github/whitescent/mastify/screen/home/Home.kt
@@ -19,6 +19,7 @@ package com.github.whitescent.mastify.screen.home
 
 import androidx.compose.animation.AnimatedVisibility
 import androidx.compose.animation.Crossfade
+import androidx.compose.animation.animateContentSize
 import androidx.compose.animation.fadeIn
 import androidx.compose.animation.fadeOut
 import androidx.compose.animation.slideInVertically
@@ -28,12 +29,9 @@ import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
 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.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
-import androidx.compose.foundation.layout.navigationBars
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.statusBarsPadding
@@ -64,7 +62,6 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.shadow
 import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.pluralStringResource
 import androidx.compose.ui.res.stringResource
@@ -121,7 +118,6 @@ fun Home(
 ) {
   val data by viewModel.homeCombinedFlow.collectAsStateWithLifecycle()
   val uiState = viewModel.uiState
-  val density = LocalDensity.current
 
   var refreshing by remember { mutableStateOf(false) }
 
@@ -145,7 +141,7 @@ fun Home(
       .fillMaxSize()
       .background(AppTheme.colors.background)
       .statusBarsPadding()
-      .padding(bottom = WindowInsets.navigationBars.getBottom(density).dp)
+      .padding(bottom = appState.appPaddingValues.calculateBottomPadding())
       .pullRefresh(pullRefreshState)
       .semantics {
         testTagsAsResourceId = true
@@ -193,8 +189,7 @@ fun Home(
               .drawVerticalScrollbar(lazyState)
               .semantics {
                 testTag = "home timeline"
-              },
-            contentPadding = PaddingValues(bottom = WindowInsets.navigationBars.getBottom(density).dp)
+              }
           ) {
             itemsIndexed(
               items = timeline,
@@ -255,12 +250,12 @@ fun Home(
               viewModel.dismissButton()
             }
           }
-          Column(Modifier.align(Alignment.BottomEnd)) {
+          Column(Modifier.align(Alignment.BottomEnd).animateContentSize()) {
             Image(
               painter = painterResource(id = R.drawable.edit),
               contentDescription = null,
               modifier = Modifier
-                .padding(24.dp)
+                .padding(16.dp)
                 .align(Alignment.End)
                 .shadow(6.dp, CircleShape)
                 .background(AppTheme.colors.primaryGradient, CircleShape)

diff --git a/app/src/main/java/com/github/whitescent/mastify/ui/component/AppScaffold.kt b/app/src/main/java/com/github/whitescent/mastify/ui/component/AppScaffold.kt
@@ -160,6 +160,7 @@ fun AppScaffold(
       containerColor = Color.Black,
       modifier = Modifier.fillMaxSize()
     ) {
+      appState.appPaddingValues = it
       DestinationsNavHost(
         engine = engine,
         navController = navController,

diff --git a/app/src/main/java/com/github/whitescent/mastify/ui/component/BottomBar.kt b/app/src/main/java/com/github/whitescent/mastify/ui/component/BottomBar.kt
@@ -37,7 +37,6 @@ import androidx.compose.foundation.layout.sizeIn
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.BadgedBox
 import androidx.compose.material3.Icon
-import androidx.compose.material3.Surface
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
@@ -64,82 +63,79 @@ fun BottomBar(
   destination: Destination,
   scrollToTop: () -> Unit,
   modifier: Modifier = Modifier,
+) = Box(
+  modifier = Modifier.fillMaxWidth()
+    .shadow(24.dp, RoundedCornerShape(topStart = 16.dp, topEnd = 16.dp))
+    .clip(RoundedCornerShape(topStart = 16.dp, topEnd = 16.dp))
+    .background(AppTheme.colors.bottomBarBackground)
 ) {
-  Surface(
-    modifier = modifier
-      .fillMaxWidth()
-      .shadow(24.dp, RoundedCornerShape(topStart = 16.dp, topEnd = 16.dp)),
-    shape = RoundedCornerShape(topStart = 16.dp, topEnd = 16.dp),
-    color = AppTheme.colors.bottomBarBackground,
-  ) {
-    CenterRow(Modifier.navigationBarsPadding()) {
-      BottomBarItem.entries.forEachIndexed { _, screen ->
-        val selected = destination.route == screen.direction.route
-        BottomBarIcon(
-          icon = {
-            AnimatedContent(
-              targetState = selected,
-              transitionSpec = {
-                ContentTransform(
-                  targetContentEnter = scaleIn(
-                    animationSpec = tween(
-                      durationMillis = 340,
-                      easing = overshootEasing()
-                    ),
+  CenterRow(Modifier.navigationBarsPadding()) {
+    BottomBarItem.entries.forEachIndexed { _, screen ->
+      val selected = destination.route == screen.direction.route
+      BottomBarIcon(
+        icon = {
+          AnimatedContent(
+            targetState = selected,
+            transitionSpec = {
+              ContentTransform(
+                targetContentEnter = scaleIn(
+                  animationSpec = tween(
+                    durationMillis = 340,
+                    easing = overshootEasing()
                   ),
-                  initialContentExit = fadeOut(tween(277)),
-                ).using(SizeTransform(clip = false))
-              },
-            ) { isSelected ->
-              Icon(
-                painter = painterResource(screen.icon),
-                contentDescription = null,
-                modifier = modifier
-                  .size(24.dp)
-                  .let {
-                    if (!isSelected) it.alpha(0.2f) else it
-                  },
-                tint = AppTheme.colors.primaryContent
+                ),
+                initialContentExit = fadeOut(tween(277)),
+              ).using(SizeTransform(clip = false))
+            },
+          ) { isSelected ->
+            Icon(
+              painter = painterResource(screen.icon),
+              contentDescription = null,
+              modifier = modifier
+                .size(24.dp)
+                .let {
+                  if (!isSelected) it.alpha(0.2f) else it
+                },
+              tint = AppTheme.colors.primaryContent
+            )
+          }
+        },
+        unreadBubble = {
+          if (appState.unreadNotifications > 0 && screen == BottomBarItem.Notification) {
+            Box(
+              modifier = Modifier
+                .padding(4.dp)
+                .sizeIn(20.dp, 20.dp, maxHeight = 20.dp)
+                .clip(SmoothCornerShape(6.dp))
+                .background(AppTheme.colors.primaryGradient, SmoothCornerShape(5.dp)),
+              contentAlignment = Alignment.Center
+            ) {
+              Text(
+                text = appState.unreadNotifications.toString(),
+                color = Color.White,
+                fontSize = 12.sp,
+                modifier = Modifier.padding(horizontal = 4.dp)
               )
             }
-          },
-          unreadBubble = {
-            if (appState.unreadNotifications > 0 && screen == BottomBarItem.Notification) {
-              Box(
-                modifier = Modifier
-                  .padding(4.dp)
-                  .sizeIn(20.dp, 20.dp, maxHeight = 20.dp)
-                  .clip(SmoothCornerShape(6.dp))
-                  .background(AppTheme.colors.primaryGradient, SmoothCornerShape(5.dp)),
-                contentAlignment = Alignment.Center
-              ) {
-                Text(
-                  text = appState.unreadNotifications.toString(),
-                  color = Color.White,
-                  fontSize = 12.sp,
-                  modifier = Modifier.padding(horizontal = 4.dp)
-                )
-              }
-            }
-          },
-          modifier = Modifier
-            .clickableWithoutIndication {
-              when (selected) {
-                true -> scrollToTop()
-                false -> {
-                  navigator.navigate(screen.direction) {
-                    popUpTo(destination) {
-                      saveState = true
-                      inclusive = true
-                    }
-                    restoreState = true
+          }
+        },
+        modifier = Modifier
+          .clickableWithoutIndication {
+            when (selected) {
+              true -> scrollToTop()
+              false -> {
+                navigator.navigate(screen.direction) {
+                  popUpTo(destination) {
+                    saveState = true
+                    inclusive = true
                   }
+                  restoreState = true
                 }
               }
             }
-            .padding(24.dp),
-        )
-      }
+          }
+          .padding(24.dp),
+      )
     }
   }
 }

diff --git a/app/src/main/java/com/github/whitescent/mastify/ui/component/status/StatusSnackbar.kt b/app/src/main/java/com/github/whitescent/mastify/ui/component/status/StatusSnackbar.kt
@@ -42,6 +42,7 @@ import androidx.compose.ui.unit.sp
 import com.github.whitescent.R
 import com.github.whitescent.mastify.ui.component.CenterRow
 import com.github.whitescent.mastify.ui.component.WidthSpacer
+import com.github.whitescent.mastify.utils.thenIf
 import kotlinx.coroutines.delay
 
 @Composable
@@ -60,7 +61,8 @@ fun StatusSnackBar(
         sizeTransform = null
       )
     },
-    modifier = modifier.fillMaxWidth()
+    modifier = Modifier.fillMaxWidth()
+      .thenIf(data != null) { modifier }
   ) {
     it?.let { type ->
       Surface(
@@ -73,7 +75,7 @@ fun StatusSnackBar(
         },
         contentColor = Color.White,
         shadowElevation = 4.dp,
-        modifier = modifier.fillMaxWidth()
+        modifier = Modifier.fillMaxWidth()
       ) {
         CenterRow(Modifier.padding(horizontal = 22.dp, vertical = 16.dp)) {
           Icon(

diff --git a/app/src/main/java/com/github/whitescent/mastify/utils/AppState.kt b/app/src/main/java/com/github/whitescent/mastify/utils/AppState.kt
@@ -17,6 +17,7 @@
 
 package com.github.whitescent.mastify.utils
 
+import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.Stable
 import androidx.compose.runtime.getValue
@@ -25,6 +26,7 @@ import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.saveable.mapSaver
 import androidx.compose.runtime.saveable.rememberSaveable
 import androidx.compose.runtime.setValue
+import androidx.compose.ui.unit.dp
 import kotlinx.coroutines.flow.MutableSharedFlow
 import kotlinx.coroutines.flow.asSharedFlow
 
@@ -38,6 +40,8 @@ class AppState(
 
   var hideBottomBar by mutableStateOf(false)
 
+  var appPaddingValues by mutableStateOf(PaddingValues(0.dp))
+
   var unreadNotifications by mutableIntStateOf(unread)
 
   suspend fun scrollToTop() { scrollToTopChannel.emit(Unit) }