feat: improve scroll to bottom FAB placement

Signed-off-by: Infi <infi@infi.sh>

app/src/main/java/chat/revolt/components/screens/chat/TypingIndicator.kt

@@ -40,7 +40,8 @@ fun StackedUserAvatars(users: List<String>, amount: Int = 3) {
             UserAvatar(
                 avatar = user?.avatar,
                 userId = userId,
-                username = user?.let { User.resolveDefaultName(it) } ?: stringResource(id = R.string.unknown),
+                username = user?.let { User.resolveDefaultName(it) }
+                    ?: stringResource(id = R.string.unknown),
                 size = 16.dp,
                 modifier = Modifier
                     .offset(
@@ -82,7 +83,7 @@ fun TypingIndicator(users: List<String>) {
                         topEnd = 16.dp
                     )
                 )
-                .background(MaterialTheme.colorScheme.background)
+                .background(MaterialTheme.colorScheme.background.copy(alpha = 0.9f))
                 .padding(top = 4.dp, start = 16.dp, end = 16.dp)
         ) {
             StackedUserAvatars(users = users)

app/src/main/java/chat/revolt/screens/chat/views/channel/ChannelScreen.kt

@@ -14,8 +14,8 @@ import androidx.compose.animation.Crossfade
 import androidx.compose.animation.core.animateDpAsState
 import androidx.compose.animation.fadeIn
 import androidx.compose.animation.fadeOut
-import androidx.compose.animation.slideInHorizontally
+import androidx.compose.animation.slideInVertically
-import androidx.compose.animation.slideOutHorizontally
+import androidx.compose.animation.slideOutVertically
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
@@ -31,14 +31,12 @@ import androidx.compose.foundation.layout.windowInsetsPadding
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.items
 import androidx.compose.foundation.lazy.rememberLazyListState
-import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.filled.KeyboardArrowDown
 import androidx.compose.material3.CircularProgressIndicator
 import androidx.compose.material3.ExperimentalMaterial3Api
-import androidx.compose.material3.ExtendedFloatingActionButton
 import androidx.compose.material3.Icon
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.ModalBottomSheet
+import androidx.compose.material3.SmallFloatingActionButton
 import androidx.compose.material3.Text
 import androidx.compose.material3.rememberModalBottomSheetState
 import androidx.compose.material3.surfaceColorAtElevation
@@ -57,6 +55,7 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.platform.LocalFocusManager
+import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.unit.dp
@@ -394,42 +393,38 @@ fun ChannelScreen(
 
                     androidx.compose.animation.AnimatedVisibility(
                         !isScrolledToBottom.value,
-                        enter = slideInHorizontally(
+                        enter = slideInVertically(
                             animationSpec = RevoltTweenInt,
-                            initialOffsetX = { it }
+                            initialOffsetY = { it }
                         ) + fadeIn(animationSpec = RevoltTweenFloat),
-                        exit = slideOutHorizontally(
+                        exit = slideOutVertically(
                             animationSpec = RevoltTweenInt,
-                            targetOffsetX = { it }
+                            targetOffsetY = { it }
                         ) + fadeOut(animationSpec = RevoltTweenFloat),
                         modifier = Modifier
-                            .align(Alignment.BottomEnd)
+                            .align(Alignment.BottomCenter)
                     ) {
-                        ExtendedFloatingActionButton(
+                        SmallFloatingActionButton(
                             modifier = Modifier
                                 .padding(bottom = scrollDownFABPadding)
-                                .align(Alignment.BottomEnd)
+                                .align(Alignment.BottomCenter)
                                 .padding(16.dp),
-                            text = {
-                                Text(stringResource(R.string.scroll_to_bottom))
-                            },
-                            icon = {
-                                Icon(
-                                    imageVector = Icons.Default.KeyboardArrowDown,
-                                    contentDescription = stringResource(R.string.scroll_to_bottom)
-                                )
-                            },
                             onClick = {
                                 coroutineScope.launch {
                                     lazyListState.animateScrollToItem(0)
                                 }
                             },
-                            contentColor = MaterialTheme.colorScheme.onPrimary,
+                            contentColor = MaterialTheme.colorScheme.onSurfaceVariant,
-                            containerColor = MaterialTheme.colorScheme.primary
+                            containerColor = MaterialTheme.colorScheme.surfaceVariant
+                        ) {
+                            Icon(
+                                painter = painterResource(R.drawable.ic_arrow_down_24dp),
+                                contentDescription = stringResource(R.string.scroll_to_bottom)
                             )
                         }
                     }
                 }
+            }
 
             if (!viewModel.showAgeGate) {
                 TypingIndicator(
@@ -440,6 +435,7 @@ fun ChannelScreen(
 
         Column(
             modifier = Modifier
+                .background(MaterialTheme.colorScheme.background.copy(alpha = 0.9f))
                 .padding(
                     start = 16.dp,
                     end = 16.dp,

app/src/main/res/drawable/ic_arrow_down_24dp.xml

@@ -0,0 +1,9 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:height="24dp"
+    android:width="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+    <path
+        android:fillColor="#ffffff"
+        android:pathData="M11,4H13V16L18.5,10.5L19.92,11.92L12,19.84L4.08,11.92L5.5,10.5L11,16V4Z" />
+</vector>