Refactor FAB with onScroll animation (#1475)

The large FAB looks weird with the design. So I've refactored it to use
Extended FAB and added animation onScroll like Gmail does.

### New:
<img
src="https://github.com/user-attachments/assets/c2944ff3-3cd6-45d2-8632-08d6ce4823e0"
width="400">

### Old:
<img
src="https://github.com/user-attachments/assets/90ea2b0f-cd52-45d8-adf9-56bc5f42dfc1"
width="400">

We can also consider showing/hiding the Search Bar & Bottom Navigation
Bar on the scroll. I will try to do it next if this PR gets merged.
Thank you.

Reply/app/src/main/java/com/example/reply/ui/ReplyListContent.kt

@@ -24,7 +24,6 @@ import androidx.compose.foundation.layout.WindowInsets
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.statusBars
 import androidx.compose.foundation.layout.systemBars
 import androidx.compose.foundation.layout.windowInsetsBottomHeight
@@ -35,9 +34,10 @@ import androidx.compose.foundation.lazy.items
 import androidx.compose.foundation.lazy.rememberLazyListState
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.Edit
+import androidx.compose.material3.ExtendedFloatingActionButton
 import androidx.compose.material3.Icon
-import androidx.compose.material3.LargeFloatingActionButton
 import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.ui.Alignment
@@ -113,20 +113,18 @@ fun ReplyInboxScreen(
             )
             // When we have bottom navigation we show FAB at the bottom end.
             if (navigationType == ReplyNavigationType.BOTTOM_NAVIGATION) {
-                LargeFloatingActionButton(
+                ExtendedFloatingActionButton(
+                    text = { Text(text = stringResource(id = R.string.compose)) },
+                    icon = { Icon(Icons.Default.Edit, stringResource(id = R.string.compose)) },
                     onClick = { /*TODO*/ },
                     modifier = Modifier
                         .align(Alignment.BottomEnd)
                         .padding(16.dp),
                     containerColor = MaterialTheme.colorScheme.tertiaryContainer,
-                    contentColor = MaterialTheme.colorScheme.onTertiaryContainer
-                ) {
-                    Icon(
-                        imageVector = Icons.Default.Edit,
-                        contentDescription = stringResource(id = R.string.compose),
-                        modifier = Modifier.size(28.dp)
-                    )
-                }
+                    contentColor = MaterialTheme.colorScheme.onTertiaryContainer,
+                    expanded = emailLazyListState.lastScrolledBackward ||
+                        !emailLazyListState.canScrollBackward
+                )
             }
         }
     }