manager: UI overhaul

2025-08-27 23:46:34 +00:00 · 2025-06-29 15:31:17 +06:00
parent 5c61a70e5a
commit 2c71531533
18 changed files with 368 additions and 86 deletions
--- a/manager/app/src/main/java/com/rifsxd/ksunext/ui/component/AboutCard.kt
+++ b/manager/app/src/main/java/com/rifsxd/ksunext/ui/component/AboutCard.kt
@@ -31,6 +31,7 @@ import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import androidx.compose.ui.window.Dialog
+import androidx.compose.ui.text.font.FontWeight
 import com.rifsxd.ksunext.BuildConfig
 import com.rifsxd.ksunext.R

@@ -83,8 +84,9 @@ private fun AboutCardContent() {
            Column {

                Text(
-                    stringResource(id = R.string.app_name),
-                    style = MaterialTheme.typography.titleSmall,
+                    text = stringResource(id = R.string.app_name),
+                    style = MaterialTheme.typography.titleMedium,
+                    fontWeight = FontWeight.SemiBold,
                    fontSize = 18.sp
                )
                Text(
--- a/manager/app/src/main/java/com/rifsxd/ksunext/ui/component/Dialog.kt
+++ b/manager/app/src/main/java/com/rifsxd/ksunext/ui/component/Dialog.kt
@@ -17,6 +17,7 @@ import androidx.compose.material3.*
 import androidx.compose.runtime.*
 import androidx.compose.runtime.saveable.Saver
 import androidx.compose.runtime.saveable.rememberSaveable
+import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.toArgb
@@ -402,7 +403,11 @@ private fun ConfirmDialog(visuals: ConfirmDialogVisuals, confirm: () -> Unit, di
            dismiss()
        },
        title = {
-            Text(text = visuals.title)
+            Text(
+                text = visuals.title,
+                style = MaterialTheme.typography.titleLarge,
+                fontWeight = FontWeight.SemiBold
+            )
        },
        text = {
            if (visuals.isMarkdown) {
--- a/manager/app/src/main/java/com/rifsxd/ksunext/ui/component/SettingsItem.kt
+++ b/manager/app/src/main/java/com/rifsxd/ksunext/ui/component/SettingsItem.kt
@@ -9,8 +9,10 @@ import androidx.compose.material3.LocalTextStyle
 import androidx.compose.material3.RadioButton
 import androidx.compose.material3.Switch
 import androidx.compose.material3.Text
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.remember
+import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.alpha
 import androidx.compose.ui.graphics.vector.ImageVector
@@ -55,6 +57,8 @@ fun SwitchItem(
                Text(
                    modifier = Modifier.then(stateAlpha),
                    text = title,
+                    style = MaterialTheme.typography.titleMedium,
+                    fontWeight = FontWeight.SemiBold
                )
            }
        },
--- a/manager/app/src/main/java/com/rifsxd/ksunext/ui/screen/AppProfile.kt
+++ b/manager/app/src/main/java/com/rifsxd/ksunext/ui/screen/AppProfile.kt
@@ -37,6 +37,7 @@ import androidx.compose.material3.Text
 import androidx.compose.material3.TopAppBar
 import androidx.compose.material3.TopAppBarDefaults
 import androidx.compose.material3.TopAppBarScrollBehavior
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
@@ -44,6 +45,7 @@ import androidx.compose.runtime.remember
 import androidx.compose.runtime.rememberCoroutineScope
 import androidx.compose.runtime.saveable.rememberSaveable
 import androidx.compose.runtime.setValue
+import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.geometry.Offset
 import androidx.compose.ui.input.nestedscroll.nestedScroll
@@ -186,7 +188,11 @@ private fun AppProfileInner(
    Column(modifier = modifier) {
        AppMenuBox(packageName) {
            ListItem(
-                headlineContent = { Text(appLabel) },
+                headlineContent = { Text(
+                    text = appLabel,
+                    style = MaterialTheme.typography.titleMedium,
+                    fontWeight = FontWeight.SemiBold
+                ) },
                supportingContent = { Text(packageName) },
                leadingContent = appIcon,
            )
@@ -272,7 +278,11 @@ private fun TopBar(
 ) {
    TopAppBar(
        title = {
-            Text(stringResource(R.string.profile))
+            Text(
+                text = stringResource(R.string.profile),
+                style = MaterialTheme.typography.titleLarge,
+                fontWeight = FontWeight.Black,
+            )
        },
        navigationIcon = {
            IconButton(
@@ -291,7 +301,11 @@ private fun ProfileBox(
    onModeChange: (Mode) -> Unit,
 ) {
    ListItem(
-        headlineContent = { Text(stringResource(R.string.profile)) },
+        headlineContent = { Text(
+            text = stringResource(R.string.profile),
+            style = MaterialTheme.typography.titleMedium,
+            fontWeight = FontWeight.SemiBold
+        ) },
        supportingContent = { Text(mode.text) },
        leadingContent = { Icon(Icons.Filled.AccountCircle, null) },
    )
--- a/manager/app/src/main/java/com/rifsxd/ksunext/ui/screen/BackupRestore.kt
+++ b/manager/app/src/main/java/com/rifsxd/ksunext/ui/screen/BackupRestore.kt
@@ -27,6 +27,7 @@ import androidx.compose.material3.TopAppBar
 import androidx.compose.material3.TopAppBarDefaults
 import androidx.compose.material3.TopAppBarScrollBehavior
 import androidx.compose.material3.rememberTopAppBarState
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
@@ -34,6 +35,7 @@ import androidx.compose.runtime.remember
 import androidx.compose.runtime.rememberCoroutineScope
 import androidx.compose.runtime.setValue
 import androidx.compose.runtime.saveable.rememberSaveable
+import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.input.nestedscroll.nestedScroll
 import androidx.compose.ui.platform.LocalContext
@@ -101,7 +103,11 @@ fun BackupRestoreScreen(navigator: DestinationsNavigator) {
            if (showRebootDialog) {
                AlertDialog(
                    onDismissRequest = { showRebootDialog = false },
-                    title = { Text(stringResource(R.string.reboot_required)) },
+                    title = { Text(
+                        text = stringResource(R.string.reboot_required),
+                        style = MaterialTheme.typography.titleLarge,
+                        fontWeight = FontWeight.SemiBold
+                    ) },
                    text = { Text(stringResource(R.string.reboot_message)) },
                    confirmButton = {
                        TextButton(onClick = {
@@ -128,7 +134,11 @@ fun BackupRestoreScreen(navigator: DestinationsNavigator) {
                        moduleBackup
                    )
                },
-                headlineContent = { Text(moduleBackup) },
+                headlineContent = { Text(
+                    text = moduleBackup,
+                    style = MaterialTheme.typography.titleLarge,
+                    fontWeight = FontWeight.SemiBold,
+                ) },
                modifier = Modifier.clickable {
                    scope.launch {
                        val result = backupDialog.awaitConfirm(title = moduleBackup, content = backupMessage)
@@ -144,7 +154,11 @@ fun BackupRestoreScreen(navigator: DestinationsNavigator) {
            if (showRebootDialog) {
                AlertDialog(
                    onDismissRequest = { showRebootDialog = false },
-                    title = { Text(stringResource(R.string.reboot_required)) },
+                    title = { Text(
+                        text = stringResource(R.string.reboot_required),
+                        style = MaterialTheme.typography.titleLarge,
+                        fontWeight = FontWeight.SemiBold
+                    ) },
                    text = { Text(stringResource(R.string.reboot_message)) },
                    confirmButton = {
                        TextButton(onClick = {
@@ -176,13 +190,15 @@ fun BackupRestoreScreen(navigator: DestinationsNavigator) {
                    Icon(
                        Icons.Filled.Restore,
                        moduleRestore,
-                        tint = if (useOverlayFs) androidx.compose.material3.MaterialTheme.colorScheme.onSurface.copy(alpha = 0.38f) else androidx.compose.material3.MaterialTheme.colorScheme.onSurface
+                        tint = if (useOverlayFs) MaterialTheme.colorScheme.onSurface.copy(alpha = 0.38f) else MaterialTheme.colorScheme.onSurface
                    )
                },
                headlineContent = { 
                    Text(
                        moduleRestore,
-                        color = if (useOverlayFs) androidx.compose.material3.MaterialTheme.colorScheme.onSurface.copy(alpha = 0.38f) else androidx.compose.material3.MaterialTheme.colorScheme.onSurface
+                        style = MaterialTheme.typography.titleLarge,
+                        fontWeight = FontWeight.SemiBold,
+                        color = if (useOverlayFs) MaterialTheme.colorScheme.onSurface.copy(alpha = 0.38f) else MaterialTheme.colorScheme.onSurface
                    ) 
                },
                modifier = Modifier.clickable(
@@ -212,7 +228,11 @@ fun BackupRestoreScreen(navigator: DestinationsNavigator) {
                        allowlistBackup
                    )
                },
-                headlineContent = { Text(allowlistBackup) },
+                headlineContent = { Text(
+                    text = allowlistBackup,
+                    style = MaterialTheme.typography.titleLarge,
+                    fontWeight = FontWeight.SemiBold,
+                ) },
                modifier = Modifier.clickable {
                    scope.launch {
                        val result = backupDialog.awaitConfirm(title = allowlistBackup, content = allowlistbackupMessage)
@@ -234,7 +254,11 @@ fun BackupRestoreScreen(navigator: DestinationsNavigator) {
                        allowlistRestore
                    )
                },
-                headlineContent = { Text(allowlistRestore) },
+                headlineContent = { Text(
+                    text = allowlistRestore,
+                    style = MaterialTheme.typography.titleLarge,
+                    fontWeight = FontWeight.SemiBold,
+                ) },
                modifier = Modifier.clickable {
                    scope.launch {
                        val result = restoreDialog.awaitConfirm(title = allowlistRestore, content = allowlistrestoreMessage)
@@ -257,7 +281,11 @@ private fun TopBar(
    scrollBehavior: TopAppBarScrollBehavior? = null
 ) {
    TopAppBar(
-        title = { Text(stringResource(R.string.backup_restore)) }, navigationIcon = {
+        title = { Text(
+                text = stringResource(R.string.backup_restore),
+                style = MaterialTheme.typography.titleLarge,
+                fontWeight = FontWeight.Black,
+            ) }, navigationIcon = {
            IconButton(
                onClick = onBack
            ) { Icon(Icons.AutoMirrored.Filled.ArrowBack, contentDescription = null) }
--- a/manager/app/src/main/java/com/rifsxd/ksunext/ui/screen/Customization.kt
+++ b/manager/app/src/main/java/com/rifsxd/ksunext/ui/screen/Customization.kt
@@ -28,6 +28,7 @@ import androidx.compose.material3.TopAppBar
 import androidx.compose.material3.TopAppBarDefaults
 import androidx.compose.material3.TopAppBarScrollBehavior
 import androidx.compose.material3.rememberTopAppBarState
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.LaunchedEffect
@@ -37,6 +38,7 @@ import androidx.compose.runtime.remember
 import androidx.compose.runtime.rememberCoroutineScope
 import androidx.compose.runtime.saveable.rememberSaveable
 import androidx.compose.runtime.setValue
+import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.input.nestedscroll.nestedScroll
 import androidx.compose.ui.platform.LocalContext
@@ -250,7 +252,11 @@ fun CustomizationScreen(navigator: DestinationsNavigator) {
            
            ListItem(
                leadingContent = { Icon(Icons.Filled.Translate, language) },
-                headlineContent = { Text(language) },
+                headlineContent = { Text(
+                    text = language,
+                    style = MaterialTheme.typography.titleMedium,
+                    fontWeight = FontWeight.SemiBold,
+                ) },
                supportingContent = { Text(currentLanguageDisplay) },
                modifier = Modifier.clickable {
                    languageDialog.show()
@@ -294,7 +300,11 @@ fun CustomizationScreen(navigator: DestinationsNavigator) {
                if (showRestartDialog) {
                    AlertDialog(
                        onDismissRequest = { showRestartDialog = false },
-                        title = { Text(stringResource(R.string.restart_required)) },
+                        title = { Text(
+                            text = stringResource(R.string.restart_required),
+                            style = MaterialTheme.typography.titleLarge,
+                            fontWeight = FontWeight.SemiBold
+                        ) },
                        text = { Text(stringResource(R.string.restart_app_message)) },
                        confirmButton = {
                            TextButton(onClick = {
@@ -328,7 +338,11 @@ private fun TopBar(
    scrollBehavior: TopAppBarScrollBehavior? = null
 ) {
    TopAppBar(
-        title = { Text(stringResource(R.string.customization)) }, navigationIcon = {
+        title = { Text(
+                text = stringResource(R.string.customization),
+                style = MaterialTheme.typography.titleLarge,
+                fontWeight = FontWeight.Black,
+            ) }, navigationIcon = {
            IconButton(
                onClick = onBack
            ) { Icon(Icons.AutoMirrored.Filled.ArrowBack, contentDescription = null) }
--- a/manager/app/src/main/java/com/rifsxd/ksunext/ui/screen/Developer.kt
+++ b/manager/app/src/main/java/com/rifsxd/ksunext/ui/screen/Developer.kt
@@ -23,6 +23,7 @@ import androidx.compose.material3.TopAppBar
 import androidx.compose.material3.TopAppBarDefaults
 import androidx.compose.material3.TopAppBarScrollBehavior
 import androidx.compose.material3.rememberTopAppBarState
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
@@ -30,6 +31,7 @@ import androidx.compose.runtime.remember
 import androidx.compose.runtime.rememberCoroutineScope
 import androidx.compose.runtime.saveable.rememberSaveable
 import androidx.compose.runtime.setValue
+import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.input.nestedscroll.nestedScroll
 import androidx.compose.ui.platform.LocalContext
@@ -129,7 +131,11 @@ private fun TopBar(
    scrollBehavior: TopAppBarScrollBehavior? = null
 ) {
    TopAppBar(
-        title = { Text(stringResource(R.string.developer)) }, navigationIcon = {
+        title = { Text(
+                text = stringResource(R.string.developer),
+                style = MaterialTheme.typography.titleLarge,
+                fontWeight = FontWeight.Black,
+            ) }, navigationIcon = {
            IconButton(
                onClick = onBack
            ) { Icon(Icons.AutoMirrored.Filled.ArrowBack, contentDescription = null) }
--- a/manager/app/src/main/java/com/rifsxd/ksunext/ui/screen/ExecuteModuleAction.kt
+++ b/manager/app/src/main/java/com/rifsxd/ksunext/ui/screen/ExecuteModuleAction.kt
@@ -35,6 +35,7 @@ import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.rememberCoroutineScope
 import androidx.compose.runtime.saveable.rememberSaveable
 import androidx.compose.runtime.setValue
+import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.input.key.Key
@@ -178,7 +179,11 @@ fun ExecuteModuleActionScreen(navigator: DestinationsNavigator, moduleId: String
@Composable
 private fun TopBar(isActionRunning: Boolean, onBack: () -> Unit = {}, onSave: () -> Unit = {}) {
    TopAppBar(
-        title = { Text(stringResource(R.string.action)) },
+        title = { Text(
+                text = stringResource(R.string.action),
+                style = MaterialTheme.typography.titleLarge,
+                fontWeight = FontWeight.Black,
+            ) },
        navigationIcon = {
            IconButton(
                onClick = onBack,
--- a/manager/app/src/main/java/com/rifsxd/ksunext/ui/screen/Flash.kt
+++ b/manager/app/src/main/java/com/rifsxd/ksunext/ui/screen/Flash.kt
@@ -41,6 +41,7 @@ import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.rememberCoroutineScope
 import androidx.compose.runtime.saveable.rememberSaveable
 import androidx.compose.runtime.setValue
+import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.input.key.Key
@@ -404,7 +405,9 @@ private fun TopBar(
                        FlashingStatus.SUCCESS -> R.string.flash_success
                        FlashingStatus.FAILED -> R.string.flash_failed
                    }
-                )
+                ),
+                style = MaterialTheme.typography.titleLarge,
+                fontWeight = FontWeight.Black,
            )
        },
        navigationIcon = {
--- a/manager/app/src/main/java/com/rifsxd/ksunext/ui/screen/Home.kt
+++ b/manager/app/src/main/java/com/rifsxd/ksunext/ui/screen/Home.kt
@@ -11,6 +11,7 @@ import androidx.annotation.StringRes
 import androidx.compose.animation.core.tween
 import androidx.compose.animation.core.animateFloatAsState
 import androidx.compose.ui.graphics.graphicsLayer
+import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.animation.*
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.interaction.MutableInteractionSource
@@ -98,6 +99,16 @@ fun HomeScreen(navigator: DestinationsNavigator) {
            StatusCard(kernelVersion, ksuVersion, lkmMode) {
                navigator.navigate(InstallScreenDestination)
            }
+
+            Row(
+                modifier = Modifier
+                    .fillMaxWidth(),
+                horizontalArrangement = Arrangement.spacedBy(12.dp)
+            ) {
+                Box(modifier = Modifier.weight(1f)) { SuperuserCard() }
+                Box(modifier = Modifier.weight(1f)) { ModuleCard() }
+            }
+
            if (isManager && Natives.requireNewKernel()) {
                WarningCard(
                    stringResource(id = R.string.require_kernel_version).format(
@@ -125,6 +136,60 @@ fun HomeScreen(navigator: DestinationsNavigator) {
    }
 }

+@Composable
+private fun SuperuserCard() {
+    ElevatedCard(
+        colors = CardDefaults.elevatedCardColors(
+            containerColor = MaterialTheme.colorScheme.secondaryContainer
+        )
+    ) {
+        Column(
+            modifier = Modifier
+                .fillMaxSize()
+                .padding(12.dp),
+            verticalArrangement = Arrangement.Center,
+            horizontalAlignment = Alignment.CenterHorizontally
+        ) {
+            Text(
+                text = stringResource(R.string.home_superuser_count),
+                style = MaterialTheme.typography.bodySmall
+            )
+            Text(
+                text = getSuperuserCount().toString(),
+                style = MaterialTheme.typography.titleMedium,
+                fontWeight = FontWeight.SemiBold
+            )
+        }
+    }
+}
+
+@Composable
+private fun ModuleCard() {
+    ElevatedCard(
+        colors = CardDefaults.elevatedCardColors(
+            containerColor = MaterialTheme.colorScheme.secondaryContainer
+        )
+    ) {
+        Column(
+            modifier = Modifier
+                .fillMaxSize()
+                .padding(12.dp),
+            verticalArrangement = Arrangement.Center,
+            horizontalAlignment = Alignment.CenterHorizontally
+        ) {
+            Text(
+                text = stringResource(R.string.home_module_count),
+                style = MaterialTheme.typography.bodySmall
+            )
+            Text(
+                text = getModuleCount().toString(),
+                style = MaterialTheme.typography.titleMedium,
+                fontWeight = FontWeight.SemiBold
+            )
+        }
+    }
+}
+
@Composable
 fun UpdateCard() {
    val context = LocalContext.current
@@ -231,7 +296,11 @@ private fun TopBar(
                            rotationZ = rotation
                        }
                )
-                Text(stringResource(R.string.app_name))
+                Text(
+                    text = stringResource(R.string.app_name),
+                    style = MaterialTheme.typography.titleLarge,
+                    fontWeight = FontWeight.Black,
+                )
            }
        },
        actions = {
@@ -294,7 +363,7 @@ private fun StatusCard(

    ElevatedCard(
        colors = CardDefaults.elevatedCardColors(containerColor = run {
-            if (ksuVersion != null) MaterialTheme.colorScheme.secondaryContainer
+            if (ksuVersion != null) MaterialTheme.colorScheme.primaryContainer
            else MaterialTheme.colorScheme.errorContainer
        })
    ) {
@@ -391,24 +460,14 @@ private fun StatusCard(
                        ) {
                            Text(
                                text = stringResource(id = R.string.home_working),
-                                style = MaterialTheme.typography.titleMedium
+                                style = MaterialTheme.typography.titleMedium,
+                                fontWeight = FontWeight.SemiBold
                            )
                        }

                        Text(
                            text = stringResource(R.string.home_working_version, ksuVersion),
-                            style = MaterialTheme.typography.bodyMedium
-                        )
-
-                        Text(
-                            text = stringResource(
-                                R.string.home_superuser_count, getSuperuserCount()
-                            ), style = MaterialTheme.typography.bodyMedium
-                        )
-
-                        Text(
-                            text = stringResource(R.string.home_module_count, getModuleCount()),
-                            style = MaterialTheme.typography.bodyMedium
+                            style = MaterialTheme.typography.bodySmall
                        )
                    }
                }
@@ -512,11 +571,12 @@ private fun InfoCard(autoExpand: Boolean = false) {
                    Column {
                        Text(
                            text = label,
-                            style = MaterialTheme.typography.bodyLarge
+                            style = MaterialTheme.typography.titleMedium,
+                            fontWeight = FontWeight.SemiBold
                        )
                        Text(
                            text = content,
-                            style = MaterialTheme.typography.bodyMedium,
+                            style = MaterialTheme.typography.bodySmall,
                            modifier = Modifier.padding(top = 4.dp)
                        )
                    }
@@ -715,17 +775,18 @@ fun IssueReportCard() {
            Column(modifier = Modifier.weight(1f)) {
                Text(
                    text = stringResource(R.string.issue_report_title),
-                    style = MaterialTheme.typography.titleSmall
+                    style = MaterialTheme.typography.titleMedium,
+                    fontWeight = FontWeight.SemiBold
                )
                Spacer(Modifier.height(4.dp))
                Text(
                    text = stringResource(R.string.issue_report_body),
-                    style = MaterialTheme.typography.bodyMedium
+                    style = MaterialTheme.typography.bodySmall
                )
                Spacer(Modifier.height(4.dp))
                Text(
                    text = stringResource(R.string.issue_report_body_2),
-                    style = MaterialTheme.typography.bodyMedium
+                    style = MaterialTheme.typography.bodySmall
                )
            }
            Row(horizontalArrangement = Arrangement.spacedBy(10.dp)) {
--- a/manager/app/src/main/java/com/rifsxd/ksunext/ui/screen/Install.kt
+++ b/manager/app/src/main/java/com/rifsxd/ksunext/ui/screen/Install.kt
@@ -43,6 +43,7 @@ import androidx.compose.runtime.produceState
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.saveable.rememberSaveable
 import androidx.compose.runtime.setValue
+import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.input.nestedscroll.nestedScroll
@@ -88,7 +89,11 @@ fun InstallScreen(navigator: DestinationsNavigator) {
                showLkmWarning = false
                navigator.popBackStack()
            },
-            title = { Text(stringResource(R.string.warning)) },
+            title = { Text(
+                text = stringResource(R.string.warning),
+                style = MaterialTheme.typography.titleLarge,
+                fontWeight = FontWeight.SemiBold
+            ) },
            text = { Text(stringResource(R.string.lkm_warning_message)) },
            confirmButton = {
                TextButton(onClick = { showLkmWarning = false }) {
@@ -370,7 +375,11 @@ private fun TopBar(
    scrollBehavior: TopAppBarScrollBehavior? = null
 ) {
    TopAppBar(
-        title = { Text(stringResource(R.string.install)) }, navigationIcon = {
+        title = { Text(
+                text = stringResource(R.string.install),
+                style = MaterialTheme.typography.titleLarge,
+                fontWeight = FontWeight.Black,
+            ) }, navigationIcon = {
            IconButton(
                onClick = onBack
            ) { Icon(Icons.AutoMirrored.Filled.ArrowBack, contentDescription = null) }
--- a/manager/app/src/main/java/com/rifsxd/ksunext/ui/screen/Module.kt
+++ b/manager/app/src/main/java/com/rifsxd/ksunext/ui/screen/Module.kt
@@ -132,6 +132,7 @@ import com.rifsxd.ksunext.ui.util.zygiskRequired
 import com.rifsxd.ksunext.ui.viewmodel.ModuleViewModel
 import com.rifsxd.ksunext.ui.webui.WebUIActivity
 import com.dergoogler.mmrl.ui.component.LabelItem
+import com.dergoogler.mmrl.ui.component.LabelItemDefaults
 import com.topjohnwu.superuser.io.SuFile

@OptIn(ExperimentalMaterial3Api::class)
@@ -197,7 +198,11 @@ fun ModuleScreen(navigator: DestinationsNavigator) {
    Scaffold(
        topBar = {
            SearchAppBar(
-                title = { Text(stringResource(R.string.module)) },
+                title = { Text(
+                    text = stringResource(R.string.module),
+                    style = MaterialTheme.typography.titleLarge,
+                    fontWeight = FontWeight.Black,
+                ) },
                searchText = viewModel.search,
                onSearchTextChange = { viewModel.search = it },
                onClearClick = { viewModel.search = "" },
@@ -848,7 +853,7 @@ fun ModuleItem(
                            ) {
                                LabelItem(
                                    text = formatSize(module.size),
-                                    style = com.dergoogler.mmrl.ui.component.LabelItemDefaults.style.copy(
+                                    style = LabelItemDefaults.style.copy(
                                        containerColor = MaterialTheme.colorScheme.secondaryContainer,
                                        contentColor = MaterialTheme.colorScheme.onSecondaryContainer
                                    )
@@ -856,7 +861,7 @@ fun ModuleItem(
                                if (module.remove) {
                                    LabelItem(
                                        text = stringResource(R.string.uninstalled),
-                                        style = com.dergoogler.mmrl.ui.component.LabelItemDefaults.style.copy(
+                                        style = LabelItemDefaults.style.copy(
                                            containerColor = MaterialTheme.colorScheme.errorContainer,
                                            contentColor = MaterialTheme.colorScheme.onErrorContainer
                                        )
@@ -865,7 +870,7 @@ fun ModuleItem(
                                if (!zygiskAvailable() && module.zygiskRequired && !module.remove) {
                                    LabelItem(
                                        text = stringResource(R.string.zygisk_required),
-                                        style = com.dergoogler.mmrl.ui.component.LabelItemDefaults.style.copy(
+                                        style = LabelItemDefaults.style.copy(
                                            containerColor = MaterialTheme.colorScheme.errorContainer,
                                            contentColor = MaterialTheme.colorScheme.onErrorContainer
                                        )
@@ -874,7 +879,7 @@ fun ModuleItem(
                                if (updateUrl.isNotEmpty() && !module.remove && !module.update) {
                                    LabelItem(
                                        text = stringResource(R.string.module_update_available),
-                                        style = com.dergoogler.mmrl.ui.component.LabelItemDefaults.style.copy(
+                                        style = LabelItemDefaults.style.copy(
                                            containerColor = MaterialTheme.colorScheme.tertiaryContainer,
                                            contentColor = MaterialTheme.colorScheme.onTertiaryContainer
                                        )
@@ -884,7 +889,7 @@ fun ModuleItem(
                                    if (module.update) {
                                        LabelItem(
                                            text = stringResource(R.string.module_updated),
-                                            style = com.dergoogler.mmrl.ui.component.LabelItemDefaults.style.copy(
+                                            style = LabelItemDefaults.style.copy(
                                                containerColor = MaterialTheme.colorScheme.tertiaryContainer,
                                                contentColor = MaterialTheme.colorScheme.onTertiaryContainer
                                            )
@@ -895,7 +900,7 @@ fun ModuleItem(
                                    if (module.hasWebUi && filterZygiskModules) {
                                        LabelItem(
                                            text = stringResource(R.string.webui),
-                                            style = com.dergoogler.mmrl.ui.component.LabelItemDefaults.style.copy(
+                                            style = LabelItemDefaults.style.copy(
                                                containerColor = MaterialTheme.colorScheme.primaryContainer,
                                                contentColor = MaterialTheme.colorScheme.onPrimaryContainer
                                            )
@@ -904,7 +909,7 @@ fun ModuleItem(
                                    if (module.hasActionScript && filterZygiskModules) {
                                        LabelItem(
                                            text = stringResource(R.string.action),
-                                            style = com.dergoogler.mmrl.ui.component.LabelItemDefaults.style.copy(
+                                            style = LabelItemDefaults.style.copy(
                                                containerColor = MaterialTheme.colorScheme.secondaryContainer,
                                                contentColor = MaterialTheme.colorScheme.onSecondaryContainer
                                            )
--- a/manager/app/src/main/java/com/rifsxd/ksunext/ui/screen/Settings.kt
+++ b/manager/app/src/main/java/com/rifsxd/ksunext/ui/screen/Settings.kt
@@ -35,6 +35,7 @@ import androidx.compose.material3.TopAppBar
 import androidx.compose.material3.TopAppBarDefaults
 import androidx.compose.material3.TopAppBarScrollBehavior
 import androidx.compose.material3.rememberTopAppBarState
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.LaunchedEffect
@@ -43,6 +44,7 @@ import androidx.compose.runtime.remember
 import androidx.compose.runtime.rememberCoroutineScope
 import androidx.compose.runtime.saveable.rememberSaveable
 import androidx.compose.runtime.setValue
+import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.vector.ImageVector
@@ -148,7 +150,11 @@ fun SettingScreen(navigator: DestinationsNavigator) {
            if (ksuVersion != null) {
                ListItem(
                    leadingContent = { Icon(Icons.Filled.Fence, profileTemplate) },
-                    headlineContent = { Text(profileTemplate) },
+                    headlineContent = { Text(
+                        text = profileTemplate,
+                        style = MaterialTheme.typography.titleMedium,
+                        fontWeight = FontWeight.SemiBold
+                    ) },
                    supportingContent = { Text(stringResource(id = R.string.settings_profile_template_summary)) },
                    modifier = Modifier.clickable {
                        navigator.navigate(AppProfileTemplateScreenDestination)
@@ -259,7 +265,11 @@ fun SettingScreen(navigator: DestinationsNavigator) {
            if (showRebootDialog) {
                AlertDialog(
                    onDismissRequest = { showRebootDialog = false },
-                    title = { Text(stringResource(R.string.reboot_required)) },
+                    title = { Text(
+                        text = stringResource(R.string.reboot_required),
+                        style = MaterialTheme.typography.titleLarge,
+                        fontWeight = FontWeight.SemiBold
+                    ) },
                    text = { Text(stringResource(R.string.reboot_message)) },
                    confirmButton = {
                        TextButton(onClick = {
@@ -303,7 +313,11 @@ fun SettingScreen(navigator: DestinationsNavigator) {
                            shrink
                        )
                    },
-                    headlineContent = { Text(shrink) },
+                    headlineContent = { Text(
+                        text = shrink,
+                        style = MaterialTheme.typography.titleMedium,
+                        fontWeight = FontWeight.SemiBold
+                    ) },
                    modifier = Modifier.clickable {
                        scope.launch {
                            val result = shrinkDialog.awaitConfirm(title = shrink, content = shrinkMessage)
@@ -325,7 +339,11 @@ fun SettingScreen(navigator: DestinationsNavigator) {
                        customization
                    )
                },
-                headlineContent = { Text(customization) },
+                headlineContent = { Text(
+                    text = customization,
+                    style = MaterialTheme.typography.titleMedium,
+                    fontWeight = FontWeight.SemiBold
+                ) },
                modifier = Modifier.clickable {
                    navigator.navigate(CustomizationScreenDestination)
                }
@@ -340,7 +358,11 @@ fun SettingScreen(navigator: DestinationsNavigator) {
                            backupRestore
                        )
                    },
-                    headlineContent = { Text(backupRestore) },
+                    headlineContent = { Text(
+                        text = backupRestore,
+                        style = MaterialTheme.typography.titleMedium,
+                        fontWeight = FontWeight.SemiBold
+                    ) },
                    modifier = Modifier.clickable {
                        navigator.navigate(BackupRestoreScreenDestination)
                    }
@@ -356,7 +378,11 @@ fun SettingScreen(navigator: DestinationsNavigator) {
                            developer
                        )
                    },
-                    headlineContent = { Text(developer) },
+                    headlineContent = { Text(
+                        text = developer,
+                        style = MaterialTheme.typography.titleMedium,
+                        fontWeight = FontWeight.SemiBold
+                    ) },
                    modifier = Modifier.clickable {
                        navigator.navigate(DeveloperScreenDestination)
                    }
@@ -379,7 +405,11 @@ fun SettingScreen(navigator: DestinationsNavigator) {
                        stringResource(id = R.string.export_log)
                    )
                },
-                headlineContent = { Text(stringResource(id = R.string.export_log)) },
+                headlineContent = { Text(
+                    text = stringResource(id = R.string.export_log),
+                    style = MaterialTheme.typography.titleMedium,
+                    fontWeight = FontWeight.SemiBold
+                ) },
                modifier = Modifier.clickable {
                    showBottomsheet = true
                }
@@ -487,7 +517,11 @@ fun SettingScreen(navigator: DestinationsNavigator) {
                        about
                    )
                },
-                headlineContent = { Text(about) },
+                headlineContent = { Text(
+                    text = about,
+                    style = MaterialTheme.typography.titleMedium,
+                    fontWeight = FontWeight.SemiBold
+                ) },
                modifier = Modifier.clickable {
                    aboutDialog.show()
                }
@@ -537,7 +571,11 @@ fun UninstallItem(
                uninstall
            )
        },
-        headlineContent = { Text(uninstall) },
+        headlineContent = { Text(
+            text = uninstall,
+            style = MaterialTheme.typography.titleMedium,
+            fontWeight = FontWeight.SemiBold
+        ) },
        modifier = Modifier.clickable {
            uninstallDialog.show()
        }
@@ -604,7 +642,11 @@ private fun TopBar(
    scrollBehavior: TopAppBarScrollBehavior? = null,
 ) {
    TopAppBar(
-        title = { Text(stringResource(R.string.settings)) },
+        title = { Text(
+            text = stringResource(R.string.settings),
+            style = MaterialTheme.typography.titleLarge,
+            fontWeight = FontWeight.Black,
+        ) },
        windowInsets = WindowInsets.safeDrawing.only(WindowInsetsSides.Top + WindowInsetsSides.Horizontal),
        scrollBehavior = scrollBehavior
    )
--- a/manager/app/src/main/java/com/rifsxd/ksunext/ui/screen/SuperUser.kt
+++ b/manager/app/src/main/java/com/rifsxd/ksunext/ui/screen/SuperUser.kt
@@ -22,6 +22,7 @@ import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
+import androidx.compose.ui.text.font.FontWeight
 import androidx.lifecycle.viewmodel.compose.viewModel
 import coil.compose.AsyncImage
 import coil.request.ImageRequest
@@ -56,7 +57,11 @@ fun SuperUserScreen(navigator: DestinationsNavigator) {
    Scaffold(
        topBar = {
            SearchAppBar(
-                title = { Text(stringResource(R.string.superuser)) },
+                title = { Text(
+                    text = stringResource(R.string.superuser),
+                    style = MaterialTheme.typography.titleLarge,
+                    fontWeight = FontWeight.Black,
+                ) },
                searchText = viewModel.search,
                onSearchTextChange = { viewModel.search = it },
                onClearClick = { viewModel.search = "" },
@@ -133,10 +138,17 @@ private fun AppItem(
 ) {
    ListItem(
        modifier = Modifier.clickable(onClick = onClickListener),
-        headlineContent = { Text(app.label) },
+        headlineContent = { Text(
+            text = app.label,
+            style = MaterialTheme.typography.titleMedium,
+            fontWeight = FontWeight.SemiBold,
+        ) },
        supportingContent = {
            Column {
-                Text(app.packageName)
+                Text(
+                    text = app.packageName,
+                    style = MaterialTheme.typography.bodySmall
+                )

                Spacer(modifier = Modifier.height(4.dp))
                
--- a/manager/app/src/main/java/com/rifsxd/ksunext/ui/screen/Template.kt
+++ b/manager/app/src/main/java/com/rifsxd/ksunext/ui/screen/Template.kt
@@ -14,6 +14,9 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.safeDrawing
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.items
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.height
 import androidx.compose.material.ExperimentalMaterialApi
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.automirrored.filled.ArrowBack
@@ -42,6 +45,7 @@ import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.rememberCoroutineScope
 import androidx.compose.runtime.setValue
+import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.input.nestedscroll.nestedScroll
 import androidx.compose.ui.platform.LocalClipboardManager
@@ -51,6 +55,7 @@ import androidx.compose.ui.text.AnnotatedString
 import androidx.compose.ui.unit.dp
 import androidx.lifecycle.compose.dropUnlessResumed
 import androidx.lifecycle.viewmodel.compose.viewModel
+import com.dergoogler.mmrl.ui.component.LabelItem
 import com.ramcosta.composedestinations.annotation.Destination
 import com.ramcosta.composedestinations.annotation.RootGraph
 import com.ramcosta.composedestinations.generated.destinations.TemplateEditorScreenDestination
@@ -62,6 +67,15 @@ import kotlinx.coroutines.launch
 import com.rifsxd.ksunext.R
 import com.rifsxd.ksunext.ui.viewmodel.TemplateViewModel

+import androidx.compose.foundation.lazy.rememberLazyListState
+import androidx.compose.runtime.snapshotFlow
+import androidx.compose.animation.AnimatedVisibility
+import androidx.compose.animation.scaleIn
+import androidx.compose.animation.scaleOut
+import androidx.compose.animation.fadeIn
+import androidx.compose.animation.fadeOut
+import androidx.compose.animation.core.tween
+
 /**
 * @author weishu
 * @date 2023/10/20.
@@ -91,6 +105,30 @@ fun AppProfileTemplateScreen(
        }
    }

+    val listState = rememberLazyListState()
+    var showFab by remember { mutableStateOf(true) }
+
+    LaunchedEffect(listState) {
+        var lastIndex = listState.firstVisibleItemIndex
+        var lastOffset = listState.firstVisibleItemScrollOffset
+
+        snapshotFlow { listState.firstVisibleItemIndex to listState.firstVisibleItemScrollOffset }
+            .collect { (currIndex, currOffset) ->
+                val isScrollingDown = currIndex > lastIndex ||
+                        (currIndex == lastIndex && currOffset > lastOffset + 4)
+                val isScrollingUp = currIndex < lastIndex ||
+                        (currIndex == lastIndex && currOffset < lastOffset - 4)
+
+                when {
+                    isScrollingDown && showFab -> showFab = false
+                    isScrollingUp && !showFab -> showFab = true
+                }
+
+                lastIndex = currIndex
+                lastOffset = currOffset
+            }
+    }
+
    Scaffold(
        topBar = {
            val clipboardManager = LocalClipboardManager.current
@@ -137,18 +175,30 @@ fun AppProfileTemplateScreen(
            )
        },
        floatingActionButton = {
-            ExtendedFloatingActionButton(
-                onClick = {
-                    navigator.navigate(
-                        TemplateEditorScreenDestination(
-                            TemplateViewModel.TemplateInfo(),
-                            false
+            AnimatedVisibility(
+                visible = showFab,
+                enter = scaleIn(
+                    animationSpec = tween(200),
+                    initialScale = 0.8f
+                ) + fadeIn(animationSpec = tween(400)),
+                exit = scaleOut(
+                    animationSpec = tween(200),
+                    targetScale = 0.8f
+                ) + fadeOut(animationSpec = tween(400))
+            ) {
+                ExtendedFloatingActionButton(
+                    onClick = {
+                        navigator.navigate(
+                            TemplateEditorScreenDestination(
+                                TemplateViewModel.TemplateInfo(),
+                                false
+                            )
                        )
-                    )
-                },
-                icon = { Icon(Icons.Filled.Add, null) },
-                text = { Text(stringResource(id = R.string.app_profile_template_create)) },
-            )
+                    },
+                    icon = { Icon(Icons.Filled.Add, null) },
+                    text = { Text(stringResource(id = R.string.app_profile_template_create)) },
+                )
+            }
        },
        contentWindowInsets = WindowInsets.safeDrawing.only(WindowInsetsSides.Top + WindowInsetsSides.Horizontal)
    ) { innerPadding ->
@@ -160,11 +210,12 @@ fun AppProfileTemplateScreen(
            }
        ) {
            LazyColumn(
+                state = listState,
                modifier = Modifier
                    .fillMaxSize()
                    .nestedScroll(scrollBehavior.nestedScrollConnection),
                contentPadding = remember {
-                    PaddingValues(bottom = 16.dp + 56.dp + 16.dp /* Scaffold Fab Spacing + Fab container height */)
+                    PaddingValues(bottom = 16.dp /* Scaffold Fab Spacing + Fab container height */)
                }
            ) {
                items(viewModel.templateList, key = { it.id }) { app ->
@@ -186,7 +237,11 @@ private fun TemplateItem(
            .clickable {
                navigator.navigate(TemplateEditorScreenDestination(template, !template.local))
            },
-        headlineContent = { Text(template.name) },
+        headlineContent = { Text(
+            text = template.name,
+            style = MaterialTheme.typography.titleMedium,
+            fontWeight = FontWeight.SemiBold,
+        ) },
        supportingContent = {
            Column {
                Text(
@@ -195,14 +250,19 @@ private fun TemplateItem(
                    fontSize = MaterialTheme.typography.bodySmall.fontSize,
                )
                Text(template.description)
-                FlowRow {
-                    LabelText(label = "UID: ${template.uid}")
-                    LabelText(label = "GID: ${template.gid}")
-                    LabelText(label = template.context)
+
+                Spacer(modifier = Modifier.height(4.dp))
+
+                FlowRow(
+                    horizontalArrangement = Arrangement.spacedBy(4.dp)
+                ) {
+                    LabelItem(text = "UID: ${template.uid}")
+                    LabelItem(text = "GID: ${template.gid}")
+                    LabelItem(text = template.context)
                    if (template.local) {
-                        LabelText(label = "local")
+                        LabelItem(text = "local")
                    } else {
-                        LabelText(label = "remote")
+                        LabelItem(text = "remote")
                    }
                }
            }
@@ -221,7 +281,11 @@ private fun TopBar(
 ) {
    TopAppBar(
        title = {
-            Text(stringResource(R.string.settings_profile_template))
+            Text(
+                text = stringResource(R.string.settings_profile_template),
+                style = MaterialTheme.typography.titleLarge,
+                fontWeight = FontWeight.Black,
+            )
        },
        navigationIcon = {
            IconButton(
--- a/manager/app/src/main/java/com/rifsxd/ksunext/ui/screen/TemplateEditor.kt
+++ b/manager/app/src/main/java/com/rifsxd/ksunext/ui/screen/TemplateEditor.kt
@@ -35,6 +35,7 @@ import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.saveable.rememberSaveable
 import androidx.compose.runtime.setValue
+import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.ExperimentalComposeUiApi
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.input.nestedscroll.nestedScroll
@@ -262,7 +263,11 @@ private fun TopBar(
    TopAppBar(
        title = {
            Column {
-                Text(title)
+                Text(
+                    text = title,
+                    style = MaterialTheme.typography.titleLarge,
+                    fontWeight = FontWeight.Black,
+                )
                if (summary.isNotBlank()) {
                    Text(
                        text = summary,
--- a/manager/app/src/main/java/com/rifsxd/ksunext/ui/theme/Theme.kt
+++ b/manager/app/src/main/java/com/rifsxd/ksunext/ui/theme/Theme.kt
@@ -59,6 +59,9 @@ fun KernelSUTheme(
                surfaceContainerLowest = dynamicScheme.surfaceContainerLowest.blend(AMOLED_BLACK, 0.6f),
                surfaceContainerHigh = dynamicScheme.surfaceContainerHigh.blend(AMOLED_BLACK, 0.6f),
                surfaceContainerHighest = dynamicScheme.surfaceContainerHighest.blend(AMOLED_BLACK, 0.6f),
+                primaryContainer = dynamicScheme.primaryContainer.blend(AMOLED_BLACK, 0.6f),
+                secondaryContainer = dynamicScheme.secondaryContainer.blend(AMOLED_BLACK, 0.6f),
+                tertiaryContainer = dynamicScheme.tertiaryContainer.blend(AMOLED_BLACK, 0.6f)
            )
        }
        dynamicColor && Build.VERSION.SDK_INT >= Build.VERSION_CODES.S -> {
--- a/manager/app/src/main/res/values/strings.xml
+++ b/manager/app/src/main/res/values/strings.xml
@@ -16,8 +16,8 @@
    <string name="lkm_alternative_suggestion">Install GKI kernel or integrate KernelSU Next to your device.</string>
    <string name="home_working">Working</string>
    <string name="home_working_version">Version: %d</string>
-    <string name="home_superuser_count">Superusers: %d</string>
-    <string name="home_module_count">Modules: %d</string>
+    <string name="home_superuser_count">Superuser(s)</string>
+    <string name="home_module_count">Module(s)</string>
    <string name="home_module_update_count">Updates: %d</string>
    <string name="home_failure">KernelSU Next v2 signature not found in kernel! [ !KSU_NEXT || != size/hash ]</string>
    <string name="home_failure_tip">Ask your kernel developer to integrate KernelSU Next!</string>