feat: retire PageHeader in favour of TopAppBar

- also make DisconnectionNotice borderless

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

app/src/main/java/chat/revolt/activities/InviteActivity.kt

@@ -36,6 +36,7 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.toArgb
 import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.platform.testTag
 import androidx.compose.ui.res.stringResource
@@ -70,6 +71,7 @@ class InviteActivity : ComponentActivity() {
 
         val inviteCode = intent.data?.lastPathSegment
 
+        window.statusBarColor = Color.Transparent.toArgb()
         WindowCompat.setDecorFitsSystemWindows(window, false)
 
         setContent {

app/src/main/java/chat/revolt/activities/MainActivity.kt

@@ -25,6 +25,7 @@ import androidx.compose.runtime.Composable
 import androidx.compose.runtime.collectAsState
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.toArgb
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.IntOffset
 import androidx.core.splashscreen.SplashScreen.Companion.installSplashScreen
@@ -212,6 +213,7 @@ class MainActivity : FragmentActivity() {
         super.onResume()
         DynamicColors.applyToActivityIfAvailable(this)
         DynamicColors.applyToActivitiesIfAvailable(RevoltApplication.instance)
+        window.statusBarColor = Color.Transparent.toArgb()
     }
 
     @OptIn(ExperimentalMaterial3WindowSizeClassApi::class)
@@ -223,6 +225,7 @@ class MainActivity : FragmentActivity() {
             options.release = BuildConfig.VERSION_NAME
         }
 
+        window.statusBarColor = Color.Transparent.toArgb()
         WindowCompat.setDecorFitsSystemWindows(window, false)
 
         installSplashScreen().apply {
@@ -273,7 +276,8 @@ fun AppEntrypoint(
         colourOverrides = SyncedSettings.android.colourOverrides
     ) {
         Surface(
-            modifier = Modifier.fillMaxSize(),
+            modifier = Modifier
+                .fillMaxSize(),
             color = MaterialTheme.colorScheme.background
         ) {
             NavHost(

app/src/main/java/chat/revolt/activities/media/ImageViewActivity.kt

@@ -12,12 +12,13 @@ import androidx.activity.compose.setContent
 import androidx.activity.result.contract.ActivityResultContracts
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.padding
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.ArrowBack
 import androidx.compose.material3.DropdownMenu
 import androidx.compose.material3.DropdownMenuItem
+import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
 import androidx.compose.material3.MaterialTheme
@@ -28,6 +29,7 @@ import androidx.compose.material3.SnackbarHostState
 import androidx.compose.material3.SnackbarResult
 import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
+import androidx.compose.material3.TopAppBar
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
@@ -38,6 +40,7 @@ import androidx.compose.ui.graphics.RectangleShape
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.style.TextOverflow
 import androidx.core.view.WindowCompat
 import chat.revolt.R
 import chat.revolt.api.REVOLT_FILES
@@ -45,7 +48,6 @@ import chat.revolt.api.RevoltHttp
 import chat.revolt.api.schemas.AutumnResource
 import chat.revolt.api.settings.GlobalState
 import chat.revolt.api.settings.SyncedSettings
-import chat.revolt.components.generic.PageHeader
 import chat.revolt.provider.getAttachmentContentUri
 import chat.revolt.ui.theme.RevoltTheme
 import com.bumptech.glide.integration.compose.ExperimentalGlideComposeApi
@@ -82,7 +84,7 @@ class ImageViewActivity : ComponentActivity() {
     }
 }
 
-@OptIn(ExperimentalGlideComposeApi::class)
+@OptIn(ExperimentalGlideComposeApi::class, ExperimentalMaterial3Api::class)
 @Composable
 fun ImageViewScreen(resource: AutumnResource, onClose: () -> Unit = {}) {
     val resourceUrl = "$REVOLT_FILES/attachments/${resource.id}/${resource.filename}"
@@ -187,25 +189,29 @@ fun ImageViewScreen(resource: AutumnResource, onClose: () -> Unit = {}) {
         colourOverrides = SyncedSettings.android.colourOverrides
     ) {
         Scaffold(
-            snackbarHost = { SnackbarHost(hostState = snackbarHostState) }
+            topBar = {
-        ) { pv ->
+                TopAppBar(
-            Surface(
+                    title = {
-                modifier = Modifier
+                        Text(
-                    .padding(pv)
-                    .background(MaterialTheme.colorScheme.background)
-                    .fillMaxSize()
-            ) {
-                Column {
-                    PageHeader(
                             text = stringResource(
                                 id = R.string.media_viewer_title_image,
                                 resource.filename ?: resource.id!!
                             ),
-                        showBackButton = true,
-                        onBackButtonClicked = onClose,
                             maxLines = 1,
-                        additionalButtons = {
+                            overflow = TextOverflow.Ellipsis,
-                            Row {
+                        )
+                    },
+                    navigationIcon = {
+                        IconButton(onClick = {
+                            onClose()
+                        }) {
+                            Icon(
+                                imageVector = Icons.Default.ArrowBack,
+                                contentDescription = stringResource(id = R.string.back)
+                            )
+                        }
+                    },
+                    actions = {
                         IconButton(onClick = {
                             shareSubmenuIsOpen.value = true
                         }) {
@@ -256,9 +262,16 @@ fun ImageViewScreen(resource: AutumnResource, onClose: () -> Unit = {}) {
                             )
                         }
                     }
-                        }
                 )
-
+            },
+            snackbarHost = { SnackbarHost(hostState = snackbarHostState) }
+        ) { pv ->
+            Surface(
+                modifier = Modifier
+                    .padding(pv)
+                    .background(MaterialTheme.colorScheme.background)
+                    .fillMaxSize()
+            ) {
                 Box(
                     modifier = Modifier
                         .clip(RectangleShape)
@@ -280,4 +293,3 @@ fun ImageViewScreen(resource: AutumnResource, onClose: () -> Unit = {}) {
         }
     }
 }
-}

app/src/main/java/chat/revolt/activities/media/VideoViewActivity.kt

@@ -12,12 +12,13 @@ import androidx.activity.compose.setContent
 import androidx.activity.result.contract.ActivityResultContracts
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.padding
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.ArrowBack
 import androidx.compose.material3.DropdownMenu
 import androidx.compose.material3.DropdownMenuItem
+import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
 import androidx.compose.material3.MaterialTheme
@@ -28,6 +29,7 @@ import androidx.compose.material3.SnackbarHostState
 import androidx.compose.material3.SnackbarResult
 import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
+import androidx.compose.material3.TopAppBar
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.DisposableEffect
 import androidx.compose.runtime.mutableStateOf
@@ -39,6 +41,7 @@ import androidx.compose.ui.graphics.RectangleShape
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.viewinterop.AndroidView
 import androidx.core.view.WindowCompat
 import androidx.media3.common.MediaItem
@@ -50,7 +53,6 @@ import chat.revolt.api.RevoltHttp
 import chat.revolt.api.schemas.AutumnResource
 import chat.revolt.api.settings.GlobalState
 import chat.revolt.api.settings.SyncedSettings
-import chat.revolt.components.generic.PageHeader
 import chat.revolt.provider.getAttachmentContentUri
 import chat.revolt.ui.theme.RevoltTheme
 import io.ktor.client.request.get
@@ -82,6 +84,7 @@ class VideoViewActivity : ComponentActivity() {
     }
 }
 
+@OptIn(ExperimentalMaterial3Api::class)
 @androidx.annotation.OptIn(androidx.media3.common.util.UnstableApi::class)
 @Composable
 fun VideoViewScreen(resource: AutumnResource, onClose: () -> Unit = {}) {
@@ -199,25 +202,29 @@ fun VideoViewScreen(resource: AutumnResource, onClose: () -> Unit = {}) {
         colourOverrides = SyncedSettings.android.colourOverrides
     ) {
         Scaffold(
-            snackbarHost = { SnackbarHost(hostState = snackbarHostState) }
+            topBar = {
-        ) { pv ->
+                TopAppBar(
-            Surface(
+                    title = {
-                modifier = Modifier
+                        Text(
-                    .padding(pv)
-                    .background(MaterialTheme.colorScheme.background)
-                    .fillMaxSize()
-            ) {
-                Column {
-                    PageHeader(
                             text = stringResource(
                                 id = R.string.media_viewer_title_video,
                                 resource.filename ?: resource.id!!
                             ),
-                        showBackButton = true,
-                        onBackButtonClicked = onClose,
                             maxLines = 1,
-                        additionalButtons = {
+                            overflow = TextOverflow.Ellipsis,
-                            Row {
+                        )
+                    },
+                    navigationIcon = {
+                        IconButton(onClick = {
+                            onClose()
+                        }) {
+                            Icon(
+                                imageVector = Icons.Default.ArrowBack,
+                                contentDescription = stringResource(id = R.string.back)
+                            )
+                        }
+                    },
+                    actions = {
                         IconButton(onClick = {
                             shareSubmenuIsOpen.value = true
                         }) {
@@ -268,9 +275,16 @@ fun VideoViewScreen(resource: AutumnResource, onClose: () -> Unit = {}) {
                             )
                         }
                     }
-                        }
                 )
-
+            },
+            snackbarHost = { SnackbarHost(hostState = snackbarHostState) }
+        ) { pv ->
+            Surface(
+                modifier = Modifier
+                    .padding(pv)
+                    .background(MaterialTheme.colorScheme.background)
+                    .fillMaxSize()
+            ) {
                 Box(
                     modifier = Modifier
                         .clip(RectangleShape)
@@ -294,4 +308,3 @@ fun VideoViewScreen(resource: AutumnResource, onClose: () -> Unit = {}) {
         }
     }
 }
-}

app/src/main/java/chat/revolt/components/chat/DisconnectedNotice.kt

@@ -2,9 +2,13 @@ package chat.revolt.components.chat
 
 import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.WindowInsets
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.statusBars
+import androidx.compose.foundation.layout.windowInsetsPadding
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.Done
 import androidx.compose.material.icons.filled.Refresh
@@ -44,11 +48,13 @@ private fun DisconnectedNoticeBase(
     canTapToRetry: Boolean = false,
     onRetry: () -> Unit = {}
 ) {
+    Column {
         Row(
             modifier = Modifier
                 .clickable(enabled = canTapToRetry, onClick = onRetry)
                 .fillMaxWidth()
                 .background(background)
+                .windowInsetsPadding(WindowInsets.statusBars)
                 .padding(vertical = 8.dp, horizontal = 16.dp),
             verticalAlignment = Alignment.CenterVertically
         ) {
@@ -73,6 +79,7 @@ private fun DisconnectedNoticeBase(
             }
         }
     }
+}
 
 @Composable
 fun DisconnectedNotice(state: DisconnectionState, onReconnect: () -> Unit) {

app/src/main/java/chat/revolt/components/generic/PageHeader.kt

@@ -1,88 +0,0 @@
-package chat.revolt.components.generic
-
-import androidx.compose.foundation.layout.Row
-import androidx.compose.foundation.layout.padding
-import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.filled.ArrowBack
-import androidx.compose.material.icons.filled.ArrowForward
-import androidx.compose.material3.Icon
-import androidx.compose.material3.IconButton
-import androidx.compose.material3.MaterialTheme
-import androidx.compose.material3.Text
-import androidx.compose.runtime.Composable
-import androidx.compose.ui.Alignment
-import androidx.compose.ui.Modifier
-import androidx.compose.ui.res.stringResource
-import androidx.compose.ui.text.font.FontWeight
-import androidx.compose.ui.text.style.TextAlign
-import androidx.compose.ui.text.style.TextOverflow
-import androidx.compose.ui.tooling.preview.Preview
-import androidx.compose.ui.unit.dp
-import androidx.compose.ui.unit.sp
-import chat.revolt.R
-
-@Composable
-fun PageHeader(
-    text: String,
-    modifier: Modifier = Modifier,
-    showBackButton: Boolean = false,
-    onBackButtonClicked: () -> Unit = {},
-    startButtons: @Composable () -> Unit = {},
-    additionalButtons: @Composable () -> Unit = {},
-    maxLines: Int = Int.MAX_VALUE
-) {
-    Row(
-        verticalAlignment = Alignment.CenterVertically
-    ) {
-        if (showBackButton) {
-            IconButton(onClick = onBackButtonClicked) {
-                Icon(
-                    modifier = modifier,
-                    imageVector = Icons.Default.ArrowBack,
-                    contentDescription = stringResource(id = R.string.back)
-                )
-            }
-        }
-        startButtons()
-        Text(
-            text = text,
-            maxLines = maxLines,
-            overflow = TextOverflow.Ellipsis,
-            style = MaterialTheme.typography.displaySmall.copy(
-                fontWeight = FontWeight.Bold,
-                textAlign = TextAlign.Left,
-                fontSize = 24.sp
-            ),
-            modifier = modifier
-                .padding(horizontal = 15.dp, vertical = 15.dp)
-                .weight(1f)
-        )
-        additionalButtons()
-    }
-}
-
-@Preview(showBackground = true)
-@Composable
-fun PageHeaderPreview() {
-    PageHeader(text = "Page Header")
-}
-
-@Preview(showBackground = true)
-@Composable
-fun PageHeaderPreviewWithBackButton() {
-    PageHeader(text = "Page Header", showBackButton = true)
-}
-
-@Preview(showBackground = true)
-@Composable
-fun PageHeaderPreviewWithAdditionalButtons() {
-    PageHeader(text = "Page Header", showBackButton = true, additionalButtons = {
-        IconButton(onClick = {}) {
-            Icon(
-                modifier = Modifier,
-                imageVector = Icons.Default.ArrowForward,
-                contentDescription = null
-            )
-        }
-    })
-}

app/src/main/java/chat/revolt/internals/extensions/Insets.kt

@@ -0,0 +1,10 @@
+package chat.revolt.internals.extensions
+
+import androidx.compose.foundation.layout.WindowInsets
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.NonRestartableComposable
+
+val WindowInsets.Companion.zero: WindowInsets
+    @Composable
+    @NonRestartableComposable
+    get() = WindowInsets(left = 0, right = 0, top = 0, bottom = 0)

app/src/main/java/chat/revolt/screens/DefaultDestinationScreen.kt

@@ -6,6 +6,8 @@ import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.toArgb
 import androidx.compose.ui.platform.LocalContext
 import androidx.navigation.NavController
 import chat.revolt.RevoltApplication
@@ -35,8 +37,10 @@ fun DefaultDestinationScreen(
         nextDestination?.let {
             // Fix for SDK >=31, where core-splashscreen accidentally removes dynamic colours
             // See the other one in MainActivity.kt
-            DynamicColors.applyToActivityIfAvailable(context.getComponentActivity() as Activity)
+            val activity = context.getComponentActivity() as Activity
+            DynamicColors.applyToActivityIfAvailable(activity)
             DynamicColors.applyToActivitiesIfAvailable(RevoltApplication.instance)
+            activity.window.statusBarColor = Color.Transparent.toArgb()
 
             navController.popBackStack(navController.graph.startDestinationRoute!!, true)
             navController.navigate(it)

app/src/main/java/chat/revolt/screens/about/AboutScreen.kt

@@ -4,6 +4,7 @@ import android.os.Build
 import android.widget.Toast
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
@@ -12,15 +13,21 @@ import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.safeDrawingPadding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.ArrowBack
 import androidx.compose.material3.CircularProgressIndicator
 import androidx.compose.material3.ElevatedButton
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
 import androidx.compose.material3.LocalContentColor
 import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Scaffold
 import androidx.compose.material3.Text
 import androidx.compose.material3.TextButton
+import androidx.compose.material3.TopAppBar
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableIntStateOf
@@ -38,6 +45,7 @@ import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.AnnotatedString
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.dp
 import androidx.lifecycle.ViewModel
 import androidx.lifecycle.viewModelScope
@@ -49,7 +57,6 @@ import chat.revolt.api.REVOLT_BASE
 import chat.revolt.api.RevoltJson
 import chat.revolt.api.routes.misc.Root
 import chat.revolt.api.routes.misc.getRootRoute
-import chat.revolt.components.generic.PageHeader
 import chat.revolt.components.generic.PrimaryTabs
 import chat.revolt.internals.Platform
 import kotlinx.coroutines.launch
@@ -126,6 +133,7 @@ fun DebugInfo(viewModel: AboutViewModel) {
     }
 }
 
+@OptIn(ExperimentalMaterial3Api::class)
 @Composable
 fun AboutScreen(navController: NavController, viewModel: AboutViewModel = viewModel()) {
     val context = LocalContext.current
@@ -146,19 +154,36 @@ fun AboutScreen(navController: NavController, viewModel: AboutViewModel = viewMo
         }
     }
 
+    Scaffold(
+        topBar = {
+            TopAppBar(
+                title = {
+                    Text(
+                        text = stringResource(R.string.about),
+                        maxLines = 1,
+                        overflow = TextOverflow.Ellipsis,
+                    )
+                },
+                navigationIcon = {
+                    IconButton(onClick = {
+                        navController.popBackStack()
+                    }) {
+                        Icon(
+                            imageVector = Icons.Default.ArrowBack,
+                            contentDescription = stringResource(id = R.string.back)
+                        )
+                    }
+                }
+            )
+        },
+    ) { pv ->
+        Box(Modifier.padding(pv)) {
             Column(
                 modifier = Modifier
-            .fillMaxSize()
+                    .fillMaxSize(),
-            .safeDrawingPadding(),
                 verticalArrangement = Arrangement.Center,
                 horizontalAlignment = Alignment.CenterHorizontally
             ) {
-        PageHeader(
-            text = stringResource(R.string.about),
-            showBackButton = true,
-            onBackButtonClicked = { navController.popBackStack() }
-        )
-
                 PrimaryTabs(
                     tabs = listOf(
                         stringResource(R.string.about_tab_version),
@@ -250,3 +275,5 @@ fun AboutScreen(navController: NavController, viewModel: AboutViewModel = viewMo
                 }
             }
         }
+    }
+}

app/src/main/java/chat/revolt/screens/about/AttributionScreen.kt

@@ -2,21 +2,28 @@ package chat.revolt.screens.about
 
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.safeDrawingPadding
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.items
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.verticalScroll
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.ArrowBack
 import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
+import androidx.compose.material3.LargeTopAppBar
 import androidx.compose.material3.LocalContentColor
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.ModalBottomSheet
+import androidx.compose.material3.Scaffold
 import androidx.compose.material3.Text
+import androidx.compose.material3.TopAppBarDefaults
 import androidx.compose.material3.rememberModalBottomSheetState
 import androidx.compose.material3.surfaceColorAtElevation
 import androidx.compose.runtime.Composable
@@ -27,13 +34,14 @@ import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
+import androidx.compose.ui.input.nestedscroll.nestedScroll
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.dp
 import androidx.navigation.NavController
 import chat.revolt.R
-import chat.revolt.components.generic.PageHeader
 import chat.revolt.components.screens.settings.AttributionItem
 import kotlinx.serialization.Serializable
 import kotlinx.serialization.json.Json
@@ -144,16 +152,34 @@ fun AttributionScreen(navController: NavController) {
         }
     }
 
-    Column(
+    val scrollBehavior = TopAppBarDefaults.exitUntilCollapsedScrollBehavior()
-        modifier = Modifier
-            .safeDrawingPadding()
-    ) {
-        PageHeader(
-            text = stringResource(R.string.oss_attribution),
-            showBackButton = true,
-            onBackButtonClicked = { navController.popBackStack() }
-        )
 
+    Scaffold(
+        modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
+        topBar = {
+            LargeTopAppBar(
+                scrollBehavior = scrollBehavior,
+                title = {
+                    Text(
+                        text = stringResource(R.string.oss_attribution),
+                        maxLines = 1,
+                        overflow = TextOverflow.Ellipsis,
+                    )
+                },
+                navigationIcon = {
+                    IconButton(onClick = {
+                        navController.popBackStack()
+                    }) {
+                        Icon(
+                            imageVector = Icons.Default.ArrowBack,
+                            contentDescription = stringResource(id = R.string.back)
+                        )
+                    }
+                },
+            )
+        },
+    ) { pv ->
+        Box(Modifier.padding(pv)) {
             libraries?.let {
                 LazyColumn {
                     item {
@@ -209,3 +235,4 @@ fun AttributionScreen(navController: NavController) {
             }
         }
     }
+}

app/src/main/java/chat/revolt/screens/chat/ChatRouterScreen.kt

@@ -12,13 +12,17 @@ import androidx.compose.animation.AnimatedVisibility
 import androidx.compose.animation.Crossfade
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.WindowInsets
 import androidx.compose.foundation.layout.aspectRatio
 import androidx.compose.foundation.layout.fillMaxHeight
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.navigationBars
 import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.safeDrawingPadding
 import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.statusBars
+import androidx.compose.foundation.layout.windowInsetsPadding
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.verticalScroll
 import androidx.compose.material.icons.Icons
@@ -723,7 +727,6 @@ fun ChatRouterScreen(
     Column(
         modifier = Modifier
             .fillMaxWidth()
-            .safeDrawingPadding()
     ) {
         AnimatedVisibility(
             visible = RealtimeSocket.disconnectionState != DisconnectionState.Connected
@@ -737,10 +740,17 @@ fun ChatRouterScreen(
             )
         }
 
+        AnimatedVisibility(
+            visible = RealtimeSocket.disconnectionState == DisconnectionState.Connected
+        ) {
+            Spacer(Modifier.windowInsetsPadding(WindowInsets.statusBars))
+        }
+
         if (useTabletAwareUI) {
             Row {
                 DismissibleDrawerSheet(
-                    drawerContainerColor = Color.Transparent
+                    drawerContainerColor = Color.Transparent,
+                    windowInsets = WindowInsets.navigationBars
                 ) {
                     Sidebar(
                         viewModel = viewModel,
@@ -781,7 +791,8 @@ fun ChatRouterScreen(
                 drawerState = drawerState,
                 drawerContent = {
                     DismissibleDrawerSheet(
-                        drawerContainerColor = Color.Transparent
+                        drawerContainerColor = Color.Transparent,
+                        windowInsets = WindowInsets.navigationBars
                     ) {
                         Sidebar(
                             viewModel = viewModel,
@@ -1044,7 +1055,6 @@ fun Sidebar(
     }
 }
 
-@OptIn(ExperimentalMaterial3Api::class)
 @Composable
 fun ChannelNavigator(
     navController: NavHostController,
@@ -1111,7 +1121,7 @@ fun ChannelNavigator(
                     toggleDrawer()
                 }
 
-                NoCurrentChannelScreen()
+                NoCurrentChannelScreen(useDrawer = useDrawer, onDrawerClicked = toggleDrawer)
             }
 
             dialog("report/message/{messageId}") { backStackEntry ->

app/src/main/java/chat/revolt/screens/chat/views/FriendsScreen.kt

@@ -3,7 +3,9 @@ package chat.revolt.screens.chat.views
 import androidx.compose.foundation.ExperimentalFoundationApi
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.WindowInsets
 import androidx.compose.foundation.layout.fillMaxHeight
+import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.Menu
@@ -12,7 +14,9 @@ import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
 import androidx.compose.material3.ModalBottomSheet
+import androidx.compose.material3.Scaffold
 import androidx.compose.material3.Text
+import androidx.compose.material3.TopAppBar
 import androidx.compose.material3.rememberModalBottomSheetState
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
@@ -23,6 +27,7 @@ import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.style.TextOverflow
 import chat.revolt.R
 import chat.revolt.api.internals.FriendRequests
 import chat.revolt.api.routes.user.unfriendUser
@@ -30,8 +35,8 @@ import chat.revolt.callbacks.Action
 import chat.revolt.callbacks.ActionChannel
 import chat.revolt.components.chat.MemberListItem
 import chat.revolt.components.generic.CountableListHeader
-import chat.revolt.components.generic.PageHeader
 import chat.revolt.components.generic.SheetClickable
+import chat.revolt.internals.extensions.zero
 import kotlinx.coroutines.Dispatchers
 import kotlinx.coroutines.launch
 
@@ -86,23 +91,29 @@ fun FriendsScreen(useDrawer: Boolean, onDrawerClicked: () -> Unit) {
         }
     }
 
-    Column(
+    Scaffold(
-        modifier = Modifier
+        topBar = {
-            .fillMaxHeight()
+            TopAppBar(
-    ) {
+                title = {
-        PageHeader(
+                    Text(
                         text = stringResource(R.string.friends),
-            startButtons = {
+                        maxLines = 1,
+                        overflow = TextOverflow.Ellipsis,
+                    )
+                },
+                navigationIcon = {
                     if (useDrawer) {
-                    IconButton(onClick = onDrawerClicked) {
+                        IconButton(onClick = {
+                            onDrawerClicked()
+                        }) {
                             Icon(
                                 imageVector = Icons.Default.Menu,
-                            contentDescription = stringResource(R.string.menu)
+                                contentDescription = stringResource(id = R.string.menu)
                             )
                         }
                     }
                 },
-            additionalButtons = {
+                actions = {
                     IconButton(onClick = {
                         optionsSheetShown = true
                     }) {
@@ -111,9 +122,16 @@ fun FriendsScreen(useDrawer: Boolean, onDrawerClicked: () -> Unit) {
                             contentDescription = stringResource(R.string.menu)
                         )
                     }
-            }
+                },
+                windowInsets = WindowInsets.zero
             )
-
+        },
+    ) { pv ->
+        Column(
+            modifier = Modifier
+                .padding(pv)
+                .fillMaxHeight()
+        ) {
             LazyColumn {
                 stickyHeader(key = "incoming") {
                     CountableListHeader(
@@ -238,3 +256,4 @@ fun FriendsScreen(useDrawer: Boolean, onDrawerClicked: () -> Unit) {
             }
         }
     }
+}

app/src/main/java/chat/revolt/screens/chat/views/HomeScreen.kt

@@ -10,15 +10,19 @@ import androidx.compose.animation.core.rememberInfiniteTransition
 import androidx.compose.animation.core.tween
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.WindowInsets
+import androidx.compose.foundation.layout.fillMaxHeight
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.safeDrawingPadding
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.Menu
 import androidx.compose.material.icons.filled.Star
+import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
+import androidx.compose.material3.Scaffold
 import androidx.compose.material3.Text
+import androidx.compose.material3.TopAppBar
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.ui.Alignment
@@ -26,14 +30,16 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.rotate
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import androidx.navigation.NavController
 import chat.revolt.R
 import chat.revolt.activities.InviteActivity
-import chat.revolt.components.generic.PageHeader
 import chat.revolt.components.screens.home.LinkOnHome
+import chat.revolt.internals.extensions.zero
 
+@OptIn(ExperimentalMaterial3Api::class)
 @Composable
 fun HomeScreen(navController: NavController, useDrawer: Boolean, onDrawerClicked: () -> Unit) {
     val context = LocalContext.current
@@ -49,22 +55,37 @@ fun HomeScreen(navController: NavController, useDrawer: Boolean, onDrawerClicked
         label = "catRotation"
     )
 
-    Column(
+    Scaffold(
-        modifier = Modifier.safeDrawingPadding()
+        topBar = {
-    ) {
+            TopAppBar(
-        PageHeader(
+                title = {
-            text = stringResource(id = R.string.home),
+                    Text(
-            startButtons = {
+                        text = stringResource(R.string.home),
+                        maxLines = 1,
+                        overflow = TextOverflow.Ellipsis,
+                    )
+                },
+                navigationIcon = {
                     if (useDrawer) {
-                    IconButton(onClick = onDrawerClicked) {
+                        IconButton(onClick = {
+                            onDrawerClicked()
+                        }) {
                             Icon(
                                 imageVector = Icons.Default.Menu,
-                            contentDescription = stringResource(R.string.menu)
+                                contentDescription = stringResource(id = R.string.menu)
                             )
                         }
                     }
-            }
+                },
+                windowInsets = WindowInsets.zero
             )
+        },
+    ) { pv ->
+        Column(
+            modifier = Modifier
+                .padding(pv)
+                .fillMaxHeight()
+        ) {
             Box(
                 modifier = Modifier
                     .weight(1f)
@@ -106,3 +127,4 @@ fun HomeScreen(navController: NavController, useDrawer: Boolean, onDrawerClicked
             }
         }
     }
+}

app/src/main/java/chat/revolt/screens/chat/views/NoCurrentChannelScreen.kt

@@ -2,10 +2,18 @@ package chat.revolt.screens.chat.views
 
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.WindowInsets
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.padding
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Menu
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
 import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Scaffold
 import androidx.compose.material3.Text
+import androidx.compose.material3.TopAppBar
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
@@ -14,11 +22,34 @@ import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import chat.revolt.R
+import chat.revolt.internals.extensions.zero
 
+@OptIn(ExperimentalMaterial3Api::class)
 @Composable
-fun NoCurrentChannelScreen() {
+fun NoCurrentChannelScreen(useDrawer: Boolean, onDrawerClicked: () -> Unit) {
+    Scaffold(
+        topBar = {
+            TopAppBar(
+                title = {},
+                navigationIcon = {
+                    if (useDrawer) {
+                        IconButton(onClick = {
+                            onDrawerClicked()
+                        }) {
+                            Icon(
+                                imageVector = Icons.Default.Menu,
+                                contentDescription = stringResource(id = R.string.menu)
+                            )
+                        }
+                    }
+                },
+                windowInsets = WindowInsets.zero
+            )
+        },
+    ) { pv ->
         Column(
             modifier = Modifier
+                .padding(pv)
                 .fillMaxSize()
                 .padding(64.dp),
             verticalArrangement = Arrangement.Center,
@@ -38,3 +69,4 @@ fun NoCurrentChannelScreen() {
             )
         }
     }
+}

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

@@ -20,12 +20,14 @@ import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.WindowInsets
 import androidx.compose.foundation.layout.fillMaxHeight
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.imePadding
+import androidx.compose.foundation.layout.navigationBars
 import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.safeDrawingPadding
+import androidx.compose.foundation.layout.windowInsetsPadding
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.items
 import androidx.compose.foundation.lazy.rememberLazyListState
@@ -258,7 +260,7 @@ fun ChannelScreen(
     Column(
         modifier = Modifier
             .imePadding()
-            .safeDrawingPadding()
+            .windowInsetsPadding(WindowInsets.navigationBars)
     ) {
         ChannelHeader(
             channel = channel ?: Channel(

app/src/main/java/chat/revolt/screens/services/DiscoverScreen.kt

@@ -2,29 +2,55 @@ package chat.revolt.screens.services
 
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxSize
-import androidx.compose.foundation.layout.safeDrawingPadding
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.ArrowBack
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
+import androidx.compose.material3.Scaffold
+import androidx.compose.material3.Text
+import androidx.compose.material3.TopAppBar
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.style.TextOverflow
 import androidx.navigation.NavController
 import chat.revolt.R
-import chat.revolt.components.generic.PageHeader
 import chat.revolt.components.screens.services.DiscoverView
 
+@OptIn(ExperimentalMaterial3Api::class)
 @Composable
 fun DiscoverScreen(navController: NavController) {
-    Column(
+    Scaffold(
-        Modifier
+        topBar = {
-            .fillMaxSize()
+            TopAppBar(
-            .safeDrawingPadding()
+                title = {
-    ) {
+                    Text(
-        PageHeader(
                         text = stringResource(R.string.discover),
-            showBackButton = true,
+                        maxLines = 1,
-            onBackButtonClicked = {
+                        overflow = TextOverflow.Ellipsis,
+                    )
+                },
+                navigationIcon = {
+                    IconButton(onClick = {
                         navController.popBackStack()
+                    }) {
+                        Icon(
+                            imageVector = Icons.Default.ArrowBack,
+                            contentDescription = stringResource(id = R.string.back)
+                        )
+                    }
                 }
             )
+        }
+    ) { pv ->
+        Column(
+            Modifier
+                .padding(pv)
+                .fillMaxSize()
+        ) {
             DiscoverView()
         }
     }
+}

app/src/main/java/chat/revolt/screens/settings/AppearanceSettingsScreen.kt

@@ -10,6 +10,7 @@ import androidx.compose.animation.core.animateFloatAsState
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.isSystemInDarkTheme
 import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.ExperimentalLayoutApi
 import androidx.compose.foundation.layout.FlowRow
@@ -19,11 +20,11 @@ import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.safeDrawingPadding
 import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.verticalScroll
 import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.ArrowBack
 import androidx.compose.material.icons.filled.Check
 import androidx.compose.material.icons.filled.Close
 import androidx.compose.material.icons.filled.Delete
@@ -33,10 +34,14 @@ import androidx.compose.material.ripple.LocalRippleTheme
 import androidx.compose.material3.Button
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
+import androidx.compose.material3.LargeTopAppBar
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.ModalBottomSheet
+import androidx.compose.material3.Scaffold
 import androidx.compose.material3.Text
 import androidx.compose.material3.TextButton
+import androidx.compose.material3.TopAppBarDefaults
 import androidx.compose.material3.dynamicDarkColorScheme
 import androidx.compose.material3.rememberModalBottomSheetState
 import androidx.compose.runtime.Composable
@@ -51,11 +56,13 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.rotate
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.toArgb
+import androidx.compose.ui.input.nestedscroll.nestedScroll
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.platform.LocalLayoutDirection
 import androidx.compose.ui.platform.testTag
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.LayoutDirection
 import androidx.compose.ui.unit.dp
 import androidx.hilt.navigation.compose.hiltViewModel
@@ -68,7 +75,6 @@ import chat.revolt.api.RevoltJson
 import chat.revolt.api.settings.GlobalState
 import chat.revolt.api.settings.SyncedSettings
 import chat.revolt.components.generic.ListHeader
-import chat.revolt.components.generic.PageHeader
 import chat.revolt.components.screens.settings.appearance.ColourChip
 import chat.revolt.ui.theme.ClearRippleTheme
 import chat.revolt.ui.theme.OverridableColourScheme
@@ -263,19 +269,34 @@ fun AppearanceSettingsScreen(
         }
     }
 
-    Column(
+    val scrollBehavior = TopAppBarDefaults.exitUntilCollapsedScrollBehavior()
-        modifier = Modifier
-            .fillMaxSize()
-            .safeDrawingPadding()
-    ) {
-        PageHeader(
-            text = stringResource(id = R.string.settings_appearance),
-            showBackButton = true,
-            onBackButtonClicked = {
-                navController.popBackStack()
-            }
-        )
 
+    Scaffold(
+        modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
+        topBar = {
+            LargeTopAppBar(
+                scrollBehavior = scrollBehavior,
+                title = {
+                    Text(
+                        text = stringResource(R.string.settings_appearance),
+                        maxLines = 1,
+                        overflow = TextOverflow.Ellipsis,
+                    )
+                },
+                navigationIcon = {
+                    IconButton(onClick = {
+                        navController.popBackStack()
+                    }) {
+                        Icon(
+                            imageVector = Icons.Default.ArrowBack,
+                            contentDescription = stringResource(id = R.string.back)
+                        )
+                    }
+                },
+            )
+        },
+    ) { pv ->
+        Box(Modifier.padding(pv)) {
             Column(
                 modifier = Modifier
                     .fillMaxSize()
@@ -482,6 +503,7 @@ fun AppearanceSettingsScreen(
             }
         }
     }
+}
 
 @Composable
 fun ColourSelectorSheet(

app/src/main/java/chat/revolt/screens/settings/ChangelogsScreen.kt

@@ -5,14 +5,21 @@ import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.layout.safeDrawingPadding
+import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.ArrowBack
 import androidx.compose.material3.Divider
 import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
+import androidx.compose.material3.LargeTopAppBar
 import androidx.compose.material3.ListItem
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.ModalBottomSheet
+import androidx.compose.material3.Scaffold
 import androidx.compose.material3.Text
+import androidx.compose.material3.TopAppBarDefaults
 import androidx.compose.material3.rememberModalBottomSheetState
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
@@ -20,12 +27,13 @@ import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.input.nestedscroll.nestedScroll
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.style.TextOverflow
 import androidx.hilt.navigation.compose.hiltViewModel
 import androidx.lifecycle.ViewModel
 import androidx.navigation.NavController
 import chat.revolt.R
-import chat.revolt.components.generic.PageHeader
 import chat.revolt.internals.Changelogs
 import chat.revolt.persistence.KVStorage
 import chat.revolt.sheets.ChangelogSheet
@@ -65,19 +73,38 @@ fun ChangelogsSettingsScreen(
         }
     }
     
+    val scrollBehavior = TopAppBarDefaults.exitUntilCollapsedScrollBehavior()
+
+    Scaffold(
+        modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
+        topBar = {
+            LargeTopAppBar(
+                scrollBehavior = scrollBehavior,
+                title = {
+                    Text(
+                        text = stringResource(R.string.settings_changelogs),
+                        maxLines = 1,
+                        overflow = TextOverflow.Ellipsis,
+                    )
+                },
+                navigationIcon = {
+                    IconButton(onClick = {
+                        navController.popBackStack()
+                    }) {
+                        Icon(
+                            imageVector = Icons.Default.ArrowBack,
+                            contentDescription = stringResource(id = R.string.back)
+                        )
+                    }
+                },
+            )
+        },
+    ) { pv ->
         Column(
             modifier = Modifier
+                .padding(pv)
                 .fillMaxSize()
-            .safeDrawingPadding()
         ) {
-        PageHeader(
-            text = stringResource(R.string.settings_changelogs),
-            showBackButton = true,
-            onBackButtonClicked = {
-                navController.popBackStack()
-            }
-        )
-
             LazyColumn {
                 items(
                     viewModel.list.size,
@@ -113,3 +140,4 @@ fun ChangelogsSettingsScreen(
             }
         }
     }
+}

app/src/main/java/chat/revolt/screens/settings/ClosedBetaUpdaterScreen.kt

@@ -5,15 +5,16 @@ import android.util.Log
 import androidx.browser.customtabs.CustomTabsIntent
 import androidx.compose.animation.AnimatedVisibility
 import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.safeDrawingPadding
 import androidx.compose.foundation.layout.size
 import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.ArrowBack
 import androidx.compose.material.icons.filled.Check
 import androidx.compose.material.icons.filled.Close
 import androidx.compose.material.icons.filled.Refresh
@@ -21,9 +22,14 @@ import androidx.compose.material.icons.filled.Search
 import androidx.compose.material.icons.filled.Settings
 import androidx.compose.material3.Button
 import androidx.compose.material3.ElevatedButton
+import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
 import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Scaffold
 import androidx.compose.material3.Text
+import androidx.compose.material3.TopAppBar
+import androidx.compose.material3.TopAppBarDefaults
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableIntStateOf
@@ -32,21 +38,24 @@ import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.input.nestedscroll.nestedScroll
 import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.AnnotatedString
 import androidx.compose.ui.text.SpanStyle
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.dp
 import androidx.lifecycle.ViewModel
 import androidx.lifecycle.viewModelScope
 import androidx.lifecycle.viewmodel.compose.viewModel
 import androidx.navigation.NavController
 import chat.revolt.BuildConfig
+import chat.revolt.R
 import chat.revolt.api.RevoltAPI
 import chat.revolt.api.RevoltHttp
 import chat.revolt.api.RevoltJson
-import chat.revolt.components.generic.PageHeader
 import io.ktor.client.request.post
 import io.ktor.client.request.setBody
 import io.ktor.client.statement.bodyAsText
@@ -135,6 +144,7 @@ class ClosedBetaUpdaterScreenViewModel : ViewModel() {
     }
 }
 
+@OptIn(ExperimentalMaterial3Api::class)
 @Composable
 fun ClosedBetaUpdaterScreen(
     navController: NavController,
@@ -142,19 +152,34 @@ fun ClosedBetaUpdaterScreen(
 ) {
     val context = LocalContext.current
 
-    Column(
+    val scrollBehavior = TopAppBarDefaults.pinnedScrollBehavior()
-        modifier = Modifier
-            .fillMaxSize()
-            .safeDrawingPadding()
-    ) {
-        PageHeader(
-            text = "Closed Beta Updater",
-            showBackButton = true,
-            onBackButtonClicked = {
-                navController.popBackStack()
-            }
-        )
 
+    Scaffold(
+        modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
+        topBar = {
+            TopAppBar(
+                scrollBehavior = scrollBehavior,
+                title = {
+                    Text(
+                        text = "Closed Beta Updater",
+                        maxLines = 1,
+                        overflow = TextOverflow.Ellipsis,
+                    )
+                },
+                navigationIcon = {
+                    IconButton(onClick = {
+                        navController.popBackStack()
+                    }) {
+                        Icon(
+                            imageVector = Icons.Default.ArrowBack,
+                            contentDescription = stringResource(id = R.string.back)
+                        )
+                    }
+                },
+            )
+        },
+    ) { pv ->
+        Box(Modifier.padding(pv)) {
             Column(
                 modifier = Modifier.fillMaxSize(),
                 horizontalAlignment = Alignment.CenterHorizontally
@@ -305,3 +330,4 @@ fun ClosedBetaUpdaterScreen(
             }
         }
     }
+}

app/src/main/java/chat/revolt/screens/settings/DebugSettingsScreen.kt

@@ -5,25 +5,35 @@ import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.safeDrawingPadding
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.verticalScroll
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.ArrowBack
 import androidx.compose.material3.ElevatedButton
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
+import androidx.compose.material3.LargeTopAppBar
 import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Scaffold
 import androidx.compose.material3.Text
 import androidx.compose.material3.TextButton
+import androidx.compose.material3.TopAppBarDefaults
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.input.nestedscroll.nestedScroll
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.dp
 import androidx.hilt.navigation.compose.hiltViewModel
 import androidx.lifecycle.ViewModel
 import androidx.lifecycle.viewModelScope
 import androidx.navigation.NavController
-import chat.revolt.components.generic.PageHeader
+import chat.revolt.R
 import chat.revolt.persistence.KVStorage
 import dagger.hilt.android.lifecycle.HiltViewModel
-import javax.inject.Inject
 import kotlinx.coroutines.launch
+import javax.inject.Inject
 
 @HiltViewModel
 class DebugSettingsScreenViewModel @Inject constructor(
@@ -46,24 +56,44 @@ class DebugSettingsScreenViewModel @Inject constructor(
     }
 }
 
+@OptIn(ExperimentalMaterial3Api::class)
 @Composable
 fun DebugSettingsScreen(
     navController: NavController,
     viewModel: DebugSettingsScreenViewModel = hiltViewModel()
 ) {
+    val scrollBehavior = TopAppBarDefaults.exitUntilCollapsedScrollBehavior()
+
+    Scaffold(
+        modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
+        topBar = {
+            LargeTopAppBar(
+                scrollBehavior = scrollBehavior,
+                title = {
+                    Text(
+                        text = "Debug",
+                        maxLines = 1,
+                        overflow = TextOverflow.Ellipsis,
+                    )
+                },
+                navigationIcon = {
+                    IconButton(onClick = {
+                        navController.popBackStack()
+                    }) {
+                        Icon(
+                            imageVector = Icons.Default.ArrowBack,
+                            contentDescription = stringResource(id = R.string.back)
+                        )
+                    }
+                },
+            )
+        },
+    ) { pv ->
         Column(
             modifier = Modifier
+                .padding(pv)
                 .fillMaxSize()
-            .safeDrawingPadding()
         ) {
-        PageHeader(
-            text = "Debug",
-            showBackButton = true,
-            onBackButtonClicked = {
-                navController.popBackStack()
-            }
-        )
-
             Column(
                 modifier = Modifier
                     .fillMaxSize()
@@ -101,3 +131,4 @@ fun DebugSettingsScreen(
             }
         }
     }
+}

app/src/main/java/chat/revolt/screens/settings/ProfileSettngsScreen.kt

@@ -4,6 +4,7 @@ import android.content.Context
 import android.net.Uri
 import androidx.compose.animation.AnimatedVisibility
 import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.ExperimentalLayoutApi
 import androidx.compose.foundation.layout.FlowRow
@@ -12,20 +13,25 @@ import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.safeDrawingPadding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.verticalScroll
 import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.ArrowBack
 import androidx.compose.material.icons.filled.Check
 import androidx.compose.material3.CircularProgressIndicator
+import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
+import androidx.compose.material3.LargeTopAppBar
 import androidx.compose.material3.LinearProgressIndicator
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.OutlinedTextField
+import androidx.compose.material3.Scaffold
 import androidx.compose.material3.Text
 import androidx.compose.material3.TextButton
+import androidx.compose.material3.TopAppBarDefaults
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableFloatStateOf
@@ -33,7 +39,9 @@ import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.input.nestedscroll.nestedScroll
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.dp
 import androidx.hilt.navigation.compose.hiltViewModel
 import androidx.lifecycle.ViewModel
@@ -46,7 +54,6 @@ import chat.revolt.api.routes.user.fetchUserProfile
 import chat.revolt.api.routes.user.patchSelf
 import chat.revolt.api.schemas.Profile
 import chat.revolt.components.generic.InlineMediaPicker
-import chat.revolt.components.generic.PageHeader
 import chat.revolt.components.screens.settings.RawUserOverview
 import dagger.hilt.android.lifecycle.HiltViewModel
 import dagger.hilt.android.qualifiers.ApplicationContext
@@ -226,24 +233,40 @@ class ProfileSettingsScreenViewModel @Inject constructor(@ApplicationContext val
     }
 }
 
-@OptIn(ExperimentalLayoutApi::class)
+@OptIn(ExperimentalLayoutApi::class, ExperimentalMaterial3Api::class)
 @Composable
 fun ProfileSettingsScreen(
     navController: NavController,
     viewModel: ProfileSettingsScreenViewModel = hiltViewModel()
 ) {
-    Column(
+    val scrollBehavior = TopAppBarDefaults.exitUntilCollapsedScrollBehavior()
-        modifier = Modifier
+
-            .fillMaxSize()
+    Scaffold(
-            .safeDrawingPadding()
+        modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
-    ) {
+        topBar = {
-        PageHeader(
+            LargeTopAppBar(
-            text = stringResource(id = R.string.settings_profile),
+                scrollBehavior = scrollBehavior,
-            showBackButton = true,
+                title = {
-            onBackButtonClicked = {
+                    Text(
-                navController.popBackStack()
+                        text = stringResource(R.string.settings_profile),
-            }
+                        maxLines = 1,
+                        overflow = TextOverflow.Ellipsis,
                     )
+                },
+                navigationIcon = {
+                    IconButton(onClick = {
+                        navController.popBackStack()
+                    }) {
+                        Icon(
+                            imageVector = Icons.Default.ArrowBack,
+                            contentDescription = stringResource(id = R.string.back)
+                        )
+                    }
+                },
+            )
+        },
+    ) { pv ->
+        Box(Modifier.padding(pv)) {
 
             val scrollState = rememberScrollState()
             Column(
@@ -413,3 +436,4 @@ fun ProfileSettingsScreen(
             }
         }
     }
+}

app/src/main/java/chat/revolt/screens/settings/SessionSettngsScreen.kt

@@ -4,6 +4,7 @@ import android.util.Log
 import androidx.compose.foundation.ExperimentalFoundationApi
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
@@ -11,16 +12,23 @@ import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.safeDrawingPadding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.ArrowBack
 import androidx.compose.material3.AlertDialog
 import androidx.compose.material3.Button
 import androidx.compose.material3.CircularProgressIndicator
+import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.FilledTonalButton
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
+import androidx.compose.material3.LargeTopAppBar
 import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Scaffold
 import androidx.compose.material3.Text
 import androidx.compose.material3.TextButton
+import androidx.compose.material3.TopAppBarDefaults
 import androidx.compose.material3.surfaceColorAtElevation
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
@@ -31,8 +39,10 @@ import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
+import androidx.compose.ui.input.nestedscroll.nestedScroll
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.dp
 import androidx.lifecycle.ViewModel
 import androidx.lifecycle.viewModelScope
@@ -45,7 +55,6 @@ import chat.revolt.api.routes.auth.logoutAllSessions
 import chat.revolt.api.routes.auth.logoutSessionById
 import chat.revolt.api.schemas.Session
 import chat.revolt.components.generic.ListHeader
-import chat.revolt.components.generic.PageHeader
 import chat.revolt.components.generic.UIMarkdown
 import chat.revolt.components.settings.sessions.SessionItem
 import kotlinx.coroutines.launch
@@ -84,7 +93,7 @@ class SessionSettingsScreenViewModel : ViewModel() {
     }
 }
 
-@OptIn(ExperimentalFoundationApi::class)
+@OptIn(ExperimentalFoundationApi::class, ExperimentalMaterial3Api::class)
 @Composable
 fun SessionSettingsScreen(
     navController: NavController,
@@ -126,19 +135,39 @@ fun SessionSettingsScreen(
         )
     }
 
+
+    val scrollBehavior = TopAppBarDefaults.exitUntilCollapsedScrollBehavior()
+
+    Scaffold(
+        modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
+        topBar = {
+            LargeTopAppBar(
+                scrollBehavior = scrollBehavior,
+                title = {
+                    Text(
+                        text = stringResource(R.string.settings_sessions),
+                        maxLines = 1,
+                        overflow = TextOverflow.Ellipsis,
+                    )
+                },
+                navigationIcon = {
+                    IconButton(onClick = {
+                        navController.popBackStack()
+                    }) {
+                        Icon(
+                            imageVector = Icons.Default.ArrowBack,
+                            contentDescription = stringResource(id = R.string.back)
+                        )
+                    }
+                },
+            )
+        },
+    ) { pv ->
+        Box(Modifier.padding(pv)) {
             Column(
                 modifier = Modifier
                     .fillMaxSize()
-            .safeDrawingPadding()
             ) {
-        PageHeader(
-            text = stringResource(id = R.string.settings_sessions),
-            showBackButton = true,
-            onBackButtonClicked = {
-                navController.popBackStack()
-            }
-        )
-
                 if (viewModel.isLoading) {
                     Column(
                         modifier = Modifier
@@ -250,3 +279,5 @@ fun SessionSettingsScreen(
                 }
             }
         }
+    }
+}

app/src/main/java/chat/revolt/screens/settings/SettingsScreen.kt

@@ -1,29 +1,37 @@
 package chat.revolt.screens.settings
 
 import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.safeDrawingPadding
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.verticalScroll
 import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.ArrowBack
 import androidx.compose.material.icons.filled.ArrowForward
 import androidx.compose.material.icons.filled.Close
 import androidx.compose.material.icons.filled.DateRange
 import androidx.compose.material.icons.filled.Info
 import androidx.compose.material.icons.filled.Settings
+import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
+import androidx.compose.material3.LargeTopAppBar
 import androidx.compose.material3.ListItem
 import androidx.compose.material3.LocalContentColor
 import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Scaffold
 import androidx.compose.material3.Text
+import androidx.compose.material3.TopAppBarDefaults
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.input.nestedscroll.nestedScroll
 import androidx.compose.ui.platform.testTag
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.dp
 import androidx.hilt.navigation.compose.hiltViewModel
 import androidx.lifecycle.ViewModel
@@ -35,7 +43,6 @@ import chat.revolt.api.settings.FeatureFlags
 import chat.revolt.api.settings.GlobalState
 import chat.revolt.api.settings.LabsAccessControlVariates
 import chat.revolt.components.generic.ListHeader
-import chat.revolt.components.generic.PageHeader
 import chat.revolt.components.screens.settings.SelfUserOverview
 import chat.revolt.persistence.KVStorage
 import dagger.hilt.android.lifecycle.HiltViewModel
@@ -55,24 +62,40 @@ class SettingsScreenViewModel @Inject constructor(
     }
 }
 
+@OptIn(ExperimentalMaterial3Api::class)
 @Composable
 fun SettingsScreen(
     navController: NavController,
     viewModel: SettingsScreenViewModel = hiltViewModel()
 ) {
-    Column(
+    val scrollBehavior = TopAppBarDefaults.exitUntilCollapsedScrollBehavior()
-        modifier = Modifier
-            .fillMaxSize()
-            .safeDrawingPadding()
-    ) {
-        PageHeader(
-            text = stringResource(id = R.string.settings),
-            showBackButton = true,
-            onBackButtonClicked = {
-                navController.popBackStack()
-            }
-        )
 
+    Scaffold(
+        modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
+        topBar = {
+            LargeTopAppBar(
+                scrollBehavior = scrollBehavior,
+                title = {
+                    Text(
+                        text = stringResource(R.string.settings),
+                        maxLines = 1,
+                        overflow = TextOverflow.Ellipsis,
+                    )
+                },
+                navigationIcon = {
+                    IconButton(onClick = {
+                        navController.popBackStack()
+                    }) {
+                        Icon(
+                            imageVector = Icons.Default.ArrowBack,
+                            contentDescription = stringResource(id = R.string.back)
+                        )
+                    }
+                },
+            )
+        },
+    ) { pv ->
+        Box(Modifier.padding(pv)) {
             Column(
                 modifier = Modifier
                     .fillMaxSize()
@@ -237,7 +260,12 @@ fun SettingsScreen(
                     )
 
                     ListHeader {
-                    Text(stringResource(R.string.settings_category_last, BuildConfig.VERSION_NAME))
+                        Text(
+                            stringResource(
+                                R.string.settings_category_last,
+                                BuildConfig.VERSION_NAME
+                            )
+                        )
                     }
 
                     ListItem(
@@ -309,3 +337,4 @@ fun SettingsScreen(
             }
         }
     }
+}

app/src/main/java/chat/revolt/sheets/AddServerSheet.kt

@@ -17,6 +17,7 @@ import androidx.compose.material.icons.filled.ExitToApp
 import androidx.compose.material3.AlertDialog
 import androidx.compose.material3.Icon
 import androidx.compose.material3.ListItem
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.material3.TextButton
 import androidx.compose.runtime.Composable
@@ -31,7 +32,6 @@ import chat.revolt.R
 import chat.revolt.activities.InviteActivity
 import chat.revolt.api.REVOLT_APP
 import chat.revolt.components.generic.FormTextField
-import chat.revolt.components.generic.PageHeader
 
 @Composable
 fun AddServerSheet() {
@@ -53,8 +53,9 @@ fun AddServerSheet() {
 
         Spacer(modifier = Modifier.height(4.dp))
 
-        PageHeader(
+        Text(
-            text = stringResource(id = R.string.add_server_sheet_title)
+            text = stringResource(id = R.string.add_server_sheet_title),
+            style = MaterialTheme.typography.headlineMedium
         )
 
         Spacer(modifier = Modifier.height(4.dp))

app/src/main/java/chat/revolt/sheets/ChangelogSheet.kt

@@ -10,6 +10,8 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.verticalScroll
 import androidx.compose.material3.CircularProgressIndicator
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.getValue
@@ -23,7 +25,6 @@ import androidx.compose.ui.unit.dp
 import androidx.hilt.navigation.compose.hiltViewModel
 import androidx.lifecycle.ViewModel
 import chat.revolt.R
-import chat.revolt.components.generic.PageHeader
 import chat.revolt.components.generic.WebMarkdown
 import chat.revolt.internals.Changelog
 import chat.revolt.internals.Changelogs
@@ -67,8 +68,8 @@ fun ChangelogSheet(
     }
 
     Column {
-        PageHeader(
+        Text(
-            if (new) {
+            text = if (new) {
                 stringResource(R.string.settings_changelogs_new_header)
             } else {
                 stringResource(
@@ -76,7 +77,8 @@ fun ChangelogSheet(
                     viewModel.changelog?.version
                         ?: stringResource(R.string.settings_changelogs_historical_version_header_placeholder)
                 )
-            }
+            },
+            style = MaterialTheme.typography.headlineMedium
         )
 
         if (viewModel.changelogContents == null) {

app/src/main/java/chat/revolt/sheets/MemberListSheet.kt

@@ -14,6 +14,7 @@ import androidx.compose.material3.CircularProgressIndicator
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.ModalBottomSheet
+import androidx.compose.material3.Text
 import androidx.compose.material3.rememberModalBottomSheetState
 import androidx.compose.material3.surfaceColorAtElevation
 import androidx.compose.runtime.Composable
@@ -42,7 +43,6 @@ import chat.revolt.api.schemas.Member
 import chat.revolt.api.schemas.User
 import chat.revolt.components.chat.MemberListItem
 import chat.revolt.components.generic.CountableListHeader
-import chat.revolt.components.generic.PageHeader
 import chat.revolt.components.generic.Presence
 import chat.revolt.components.generic.presenceFromStatus
 import dagger.hilt.android.lifecycle.HiltViewModel
@@ -254,7 +254,10 @@ fun MemberListSheet(
     }
 
     Column {
-        PageHeader(text = stringResource(R.string.channel_info_sheet_options_members))
+        Text(
+            text = stringResource(R.string.channel_info_sheet_options_members),
+            style = MaterialTheme.typography.headlineMedium
+        )
 
         LazyColumn {
             viewModel.fullItemList.forEachIndexed { index, item ->