manager: ui refactor (#21)

* manager: ui refactor

manager/app/src/main/java/me/weishu/kernelsu/KernelSUApplication.kt

@@ -0,0 +1,13 @@
+package me.weishu.kernelsu
+
+import android.app.Application
+
+lateinit var ksuApp: KernelSUApplication
+
+class KernelSUApplication : Application() {
+
+    override fun onCreate() {
+        super.onCreate()
+        ksuApp = this
+    }
+}

manager/app/src/main/java/me/weishu/kernelsu/MainActivity.kt

@@ -1,165 +0,0 @@
-@file:OptIn(ExperimentalMaterial3Api::class)
-
-package me.weishu.kernelsu
-
-import AboutDialog
-import Home
-import Module
-import SuperUser
-import android.os.Bundle
-import androidx.activity.ComponentActivity
-import androidx.activity.compose.setContent
-import androidx.annotation.StringRes
-import androidx.compose.foundation.layout.fillMaxSize
-import androidx.compose.foundation.layout.padding
-import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.filled.MoreVert
-import androidx.compose.material3.*
-import androidx.compose.runtime.*
-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 androidx.compose.ui.tooling.preview.Preview
-import androidx.navigation.NavDestination.Companion.hierarchy
-import androidx.navigation.NavGraph.Companion.findStartDestination
-import androidx.navigation.NavHostController
-import androidx.navigation.compose.NavHost
-import androidx.navigation.compose.composable
-import androidx.navigation.compose.currentBackStackEntryAsState
-import androidx.navigation.compose.rememberNavController
-import me.weishu.kernelsu.ui.theme.KernelSUTheme
-
-class MainActivity : ComponentActivity() {
-    override fun onCreate(savedInstanceState: Bundle?) {
-        super.onCreate(savedInstanceState)
-
-        setContent {
-            KernelSUTheme {
-                Surface(
-                    modifier = Modifier.fillMaxSize(),
-                    color = MaterialTheme.colorScheme.background
-                ) {
-                    MainScreen()
-                }
-            }
-        }
-    }
-}
-
-@Composable
-fun MainTopAppBar(onMoreClick: () -> Unit) {
-    TopAppBar(
-        title = {
-            Text(
-                "KernelSU",
-                maxLines = 1,
-                overflow = TextOverflow.Ellipsis
-            )
-        },
-        actions = {
-            IconButton(onClick = onMoreClick) {
-                Icon(
-                    imageVector = Icons.Filled.MoreVert,
-                    contentDescription = "Localized description"
-                )
-            }
-        }
-    )
-}
-
-@Composable
-fun MainBottomNavigation(items: List<Screen>, navController: NavHostController) {
-
-    NavigationBar {
-
-        val navBackStackEntry by navController.currentBackStackEntryAsState()
-        val currentDestination = navBackStackEntry?.destination
-
-        items.forEachIndexed { index, item ->
-            NavigationBarItem(
-                icon = {
-                    Icon(
-                        painter = painterResource(id = item.icon),
-                        contentDescription = ""
-                    )
-                },
-                label = { Text(text = stringResource(id = item.resourceId)) },
-                selected = currentDestination?.hierarchy?.any { it.route == item.route } == true,
-
-                onClick = {
-                    navController.navigate(item.route) {
-                        // Pop up to the start destination of the graph to
-                        // avoid building up a large stack of destinations
-                        // on the back stack as users select items
-                        popUpTo(navController.graph.findStartDestination().id) {
-                            saveState = true
-                        }
-                        // Avoid multiple copies of the same destination when
-                        // reselecting the same item
-                        launchSingleTop = true
-                        // Restore state when reselecting a previously selected item
-                        restoreState = true
-                    }
-                }
-            )
-        }
-    }
-
-}
-
-@Composable
-fun MainScreen() {
-
-    val items = listOf(
-        Screen.Home,
-        Screen.SuperUser,
-        Screen.Module
-    )
-
-    val navController = rememberNavController()
-
-    var showAboutDialog by remember { mutableStateOf(false) }
-
-    AboutDialog(openDialog = showAboutDialog, onDismiss = {
-        showAboutDialog = false
-    })
-
-    Scaffold(
-        topBar = {
-            MainTopAppBar {
-                showAboutDialog = true
-            }
-        },
-        bottomBar = {
-            MainBottomNavigation(items = items, navController = navController)
-        },
-        content = { innerPadding ->
-            NavHost(
-                navController,
-                startDestination = Screen.Home.route,
-                Modifier.padding(innerPadding)
-            ) {
-                composable(Screen.Home.route) { Home() }
-                composable(Screen.SuperUser.route) { SuperUser() }
-                composable(Screen.Module.route) { Module() }
-            }
-        }
-    )
-
-}
-
-@Preview(showBackground = true)
-@Composable
-fun DefaultPreview() {
-    KernelSUTheme {
-        MainScreen()
-    }
-}
-
-sealed class Screen(val route: String, @StringRes val resourceId: Int, val icon: Int) {
-    object Home : Screen("home", R.string.home, R.drawable.ic_home)
-    object SuperUser : Screen("superuser", R.string.superuser, R.drawable.ic_superuser)
-    object Module : Screen("module", R.string.module, R.drawable.ic_module)
-}
-

manager/app/src/main/java/me/weishu/kernelsu/ui/MainActivity.kt

@@ -0,0 +1,86 @@
+package me.weishu.kernelsu.ui
+
+import android.os.Bundle
+import androidx.activity.ComponentActivity
+import androidx.activity.compose.setContent
+import androidx.compose.animation.ExperimentalAnimationApi
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.*
+import androidx.compose.runtime.*
+import androidx.compose.runtime.saveable.rememberSaveable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.unit.dp
+import androidx.navigation.NavGraph.Companion.findStartDestination
+import androidx.navigation.NavHostController
+import com.google.accompanist.navigation.animation.rememberAnimatedNavController
+import com.ramcosta.composedestinations.DestinationsNavHost
+import me.weishu.kernelsu.ui.screen.BottomBarDestination
+import me.weishu.kernelsu.ui.screen.NavGraphs
+import me.weishu.kernelsu.ui.screen.appCurrentDestinationAsState
+import me.weishu.kernelsu.ui.screen.destinations.Destination
+import me.weishu.kernelsu.ui.screen.startAppDestination
+import me.weishu.kernelsu.ui.theme.KernelSUTheme
+import me.weishu.kernelsu.ui.util.LocalSnackbarHost
+
+class MainActivity : ComponentActivity() {
+
+    @OptIn(ExperimentalAnimationApi::class, ExperimentalMaterial3Api::class)
+    override fun onCreate(savedInstanceState: Bundle?) {
+        super.onCreate(savedInstanceState)
+
+        setContent {
+            KernelSUTheme {
+                val navController = rememberAnimatedNavController()
+                val snackbarHostState = remember { SnackbarHostState() }
+                Scaffold(
+                    bottomBar = { BottomBar(navController) },
+                    snackbarHost = { SnackbarHost(snackbarHostState) }
+                ) { innerPadding ->
+                    CompositionLocalProvider(LocalSnackbarHost provides snackbarHostState) {
+                        DestinationsNavHost(
+                            modifier = Modifier.padding(innerPadding),
+                            navGraph = NavGraphs.root,
+                            navController = navController
+                        )
+                    }
+                }
+            }
+        }
+    }
+}
+
+@Composable
+private fun BottomBar(navController: NavHostController) {
+    val currentDestination: Destination = navController.appCurrentDestinationAsState().value
+        ?: NavGraphs.root.startAppDestination
+    var topDestination by rememberSaveable { mutableStateOf(currentDestination.route) }
+    LaunchedEffect(currentDestination) {
+        val queue = navController.backQueue
+        if (queue.size == 2) topDestination = queue[1].destination.route!!
+        else if (queue.size > 2) topDestination = queue[2].destination.route!!
+    }
+
+    NavigationBar(tonalElevation = 8.dp) {
+        BottomBarDestination.values().forEach { destination ->
+            NavigationBarItem(
+                selected = topDestination == destination.direction.route,
+                onClick = {
+                    navController.navigate(destination.direction.route) {
+                        popUpTo(navController.graph.findStartDestination().id) {
+                            saveState = true
+                        }
+                        launchSingleTop = true
+                        restoreState = true
+                    }
+                },
+                icon = {
+                    if (topDestination == destination.direction.route) Icon(destination.iconSelected, stringResource(destination.label))
+                    else Icon(destination.iconNotSelected, stringResource(destination.label))
+                },
+                label = { Text(stringResource(destination.label)) },
+                alwaysShowLabel = false
+            )
+        }
+    }
+}

manager/app/src/main/java/me/weishu/kernelsu/ui/component/SearchBar.kt

@@ -0,0 +1,133 @@
+package me.weishu.kernelsu.ui.component
+
+import android.util.Log
+import androidx.compose.animation.AnimatedVisibility
+import androidx.compose.animation.fadeIn
+import androidx.compose.animation.fadeOut
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.text.KeyboardActions
+import androidx.compose.foundation.text.KeyboardOptions
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Close
+import androidx.compose.material.icons.filled.Search
+import androidx.compose.material.icons.outlined.ArrowBack
+import androidx.compose.material3.*
+import androidx.compose.runtime.*
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.ExperimentalComposeUiApi
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.focus.FocusRequester
+import androidx.compose.ui.focus.focusRequester
+import androidx.compose.ui.focus.onFocusChanged
+import androidx.compose.ui.platform.LocalSoftwareKeyboardController
+import androidx.compose.ui.text.input.ImeAction
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+
+private const val TAG = "SearchBar"
+
+@OptIn(ExperimentalComposeUiApi::class, ExperimentalMaterial3Api::class)
+@Composable
+fun SearchAppBar(
+    title: @Composable () -> Unit,
+    searchText: String,
+    onSearchTextChange: (String) -> Unit,
+    onClearClick: () -> Unit,
+    onBackClick: (() -> Unit)? = null,
+    onConfirm: (() -> Unit)? = null
+) {
+    val keyboardController = LocalSoftwareKeyboardController.current
+    val focusRequester = remember { FocusRequester() }
+    var onSearch by remember { mutableStateOf(false) }
+
+    if (onSearch) {
+        LaunchedEffect(Unit) { focusRequester.requestFocus() }
+    }
+    DisposableEffect(Unit) {
+        onDispose {
+            keyboardController?.hide()
+        }
+    }
+
+    TopAppBar(
+        title = {
+            Box {
+                AnimatedVisibility(
+                    modifier = Modifier.align(Alignment.CenterStart),
+                    visible = !onSearch,
+                    enter = fadeIn(),
+                    exit = fadeOut(),
+                    content = { title() }
+                )
+
+                AnimatedVisibility(
+                    visible = onSearch,
+                    enter = fadeIn(),
+                    exit = fadeOut()
+                ) {
+                    OutlinedTextField(
+                        modifier = Modifier
+                            .fillMaxWidth()
+                            .padding(top = 2.dp, bottom = 2.dp, end = if (onBackClick != null) 0.dp else 14.dp)
+                            .focusRequester(focusRequester)
+                            .onFocusChanged { focusState ->
+                                if (focusState.isFocused) onSearch = true
+                                Log.d(TAG, "onFocusChanged: $focusState")
+                            },
+                        value = searchText,
+                        onValueChange = onSearchTextChange,
+                        trailingIcon = {
+                            IconButton(
+                                onClick = {
+                                    onSearch = false
+                                    keyboardController?.hide()
+                                    onClearClick()
+                                },
+                                content = { Icon(Icons.Filled.Close, null) }
+                            )
+                        },
+                        maxLines = 1,
+                        singleLine = true,
+                        keyboardOptions = KeyboardOptions.Default.copy(imeAction = ImeAction.Done),
+                        keyboardActions = KeyboardActions(onDone = {
+                            keyboardController?.hide()
+                            onConfirm?.invoke()
+                        })
+                    )
+                }
+            }
+        },
+        navigationIcon = {
+            if (onBackClick != null) {
+                IconButton(
+                    onClick = onBackClick,
+                    content = { Icon(Icons.Outlined.ArrowBack, null) }
+                )
+            }
+        },
+        actions = {
+            AnimatedVisibility(
+                visible = !onSearch
+            ) {
+                IconButton(
+                    onClick = { onSearch = true },
+                    content = { Icon(Icons.Filled.Search, null) }
+                )
+            }
+        }
+    )
+}
+
+@Preview
+@Composable
+private fun SearchAppBarPreview() {
+    var searchText by remember { mutableStateOf("") }
+    SearchAppBar(
+        title = { Text("Search text") },
+        searchText = searchText,
+        onSearchTextChange = { searchText = it },
+        onClearClick = { searchText = "" }
+    )
+}

manager/app/src/main/java/me/weishu/kernelsu/ui/screen/AboutDialog.kt

@@ -1,70 +0,0 @@
-import android.text.method.LinkMovementMethod
-import android.text.util.Linkify
-import android.util.Patterns
-import android.widget.TextView
-import androidx.compose.foundation.layout.Column
-import androidx.compose.material3.AlertDialog
-import androidx.compose.material3.Text
-import androidx.compose.material3.TextButton
-import androidx.compose.runtime.Composable
-import androidx.compose.runtime.remember
-import androidx.compose.ui.Modifier
-import androidx.compose.ui.platform.LocalContext
-import androidx.compose.ui.tooling.preview.Preview
-import androidx.compose.ui.viewinterop.AndroidView
-import androidx.core.text.util.LinkifyCompat
-import me.weishu.kernelsu.LinkifyText
-
-@Composable
-fun DefaultLinkifyText(modifier: Modifier = Modifier, text: String?) {
-    val context = LocalContext.current
-    val customLinkifyTextView = remember {
-        TextView(context)
-    }
-    AndroidView(modifier = modifier, factory = { customLinkifyTextView }) { textView ->
-        textView.text = text ?: ""
-        LinkifyCompat.addLinks(textView, Linkify.ALL)
-        Linkify.addLinks(textView, Patterns.PHONE,"tel:",
-            Linkify.sPhoneNumberMatchFilter, Linkify.sPhoneNumberTransformFilter)
-        textView.movementMethod = LinkMovementMethod.getInstance()
-    }
-}
-@Composable
-fun AboutDialog(openDialog: Boolean, onDismiss: () -> Unit) {
-
-    if (!openDialog) {
-        return
-    }
-
-    AlertDialog(
-        onDismissRequest = {
-            onDismiss()
-        },
-        title = {
-            Text(text = "About")
-        },
-        text = {
-            Column {
-                LinkifyText(text = "Author: weishu")
-                LinkifyText(text = "Github: https://github.com/tiann/KernelSU")
-                LinkifyText(text = "Telegram: https://t.me/KernelSU")
-                LinkifyText(text = "QQ: https://pd.qq.com/s/8lipl1brp")
-            }
-        },
-        confirmButton = {
-            TextButton(
-                onClick = {
-                    onDismiss()
-                }) {
-                Text("OK")
-            }
-        },
-    )
-
-}
-
-@Preview
-@Composable
-fun Preview_AboutDialog() {
-    AboutDialog(true, {})
-}

manager/app/src/main/java/me/weishu/kernelsu/ui/screen/BottomBarDestination.kt

@@ -0,0 +1,23 @@
+package me.weishu.kernelsu.ui.screen
+
+import androidx.annotation.StringRes
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.*
+import androidx.compose.material.icons.outlined.*
+import androidx.compose.ui.graphics.vector.ImageVector
+import com.ramcosta.composedestinations.spec.DirectionDestinationSpec
+import me.weishu.kernelsu.R
+import me.weishu.kernelsu.ui.screen.destinations.HomeScreenDestination
+import me.weishu.kernelsu.ui.screen.destinations.SuperUserScreenDestination
+import me.weishu.kernelsu.ui.screen.destinations.ModuleScreenDestination
+
+enum class BottomBarDestination(
+    val direction: DirectionDestinationSpec,
+    @StringRes val label: Int,
+    val iconSelected: ImageVector,
+    val iconNotSelected: ImageVector
+) {
+    Home(HomeScreenDestination, R.string.home, Icons.Filled.Home, Icons.Outlined.Home),
+    SuperUser(SuperUserScreenDestination, R.string.superuser, Icons.Filled.Security, Icons.Outlined.Security),
+    Module(ModuleScreenDestination, R.string.module, Icons.Filled.Apps, Icons.Outlined.Apps)
+}

manager/app/src/main/java/me/weishu/kernelsu/ui/screen/Home.kt

@@ -1,144 +1,228 @@
+package me.weishu.kernelsu.ui.screen
+
+import android.content.ClipData
+import android.content.ClipboardManager
+import android.content.Context
 import android.os.Build
 import android.system.Os
-import android.widget.Toast
-import androidx.compose.foundation.Image
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.*
-import androidx.compose.material3.Card
-import androidx.compose.material3.Snackbar
-import androidx.compose.material3.Text
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.verticalScroll
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.outlined.Block
+import androidx.compose.material.icons.outlined.CheckCircle
+import androidx.compose.material.icons.outlined.Warning
+import androidx.compose.material3.*
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.CompositionLocalProvider
+import androidx.compose.runtime.rememberCoroutineScope
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.LocalContext
-import androidx.compose.ui.res.painterResource
-import androidx.compose.ui.text.SpanStyle
-import androidx.compose.ui.text.buildAnnotatedString
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.font.FontFamily
 import androidx.compose.ui.text.font.FontWeight
-import androidx.compose.ui.text.withStyle
+import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
-import androidx.compose.ui.unit.sp
-import me.weishu.kernelsu.Natives
+import com.ramcosta.composedestinations.annotation.Destination
+import com.ramcosta.composedestinations.annotation.RootNavGraph
+import kotlinx.coroutines.launch
+import me.weishu.kernelsu.*
 import me.weishu.kernelsu.R
-import me.weishu.kernelsu.getKernelVersion
+import me.weishu.kernelsu.ui.util.LinkifyText
+import me.weishu.kernelsu.ui.util.LocalSnackbarHost
 
+@OptIn(ExperimentalMaterial3Api::class)
+@RootNavGraph(start = true)
+@Destination
 @Composable
-fun Info(label: String, value: String) {
-    Text(
-        text = buildAnnotatedString {
-            append("$label: ")
-            withStyle(
-                style = SpanStyle(
-                    fontWeight = FontWeight.W500,
-                )
-            ) {
-                append(value)
-            }
-        },
-        softWrap = true,
+fun HomeScreen() {
+    Scaffold(
+        topBar = { TopBar() }
+    ) { innerPadding ->
+        Column(
+            modifier = Modifier
+                .padding(innerPadding)
+                .padding(horizontal = 16.dp)
+                .verticalScroll(rememberScrollState()),
+            verticalArrangement = Arrangement.spacedBy(16.dp)
+        ) {
+            val kernelVersion = getKernelVersion()
+            val isManager = Natives.becomeManager(ksuApp.packageName)
+            val ksuVersion = if (isManager) Natives.getVersion() else null
+
+            StatusCard(kernelVersion, ksuVersion)
+            InfoCard()
+            SupportCard()
+            Spacer(Modifier)
+        }
+    }
+}
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+private fun TopBar() {
+    TopAppBar(
+        title = { Text(stringResource(R.string.app_name)) }
     )
 }
 
 @Composable
-fun Home() {
-
-    val statusIcon: Int
-    val statusText: String
-    val secondaryText: String
-
-    val kernelVersion = getKernelVersion()
-    val isManager = Natives.becomeManager(LocalContext.current.packageName)
-
-    if (kernelVersion.isGKI()) {
-        // GKI kernel
-        if (isManager) {
-            statusIcon = R.drawable.ic_status_working
-            statusText = "Working"
-            secondaryText = "Version: ${Natives.getVersion()}"
-        } else {
-            statusIcon = R.drawable.ic_status_supported
-            statusText = "Not installed"
-            secondaryText = "Click to install"
-        }
-    } else {
-        statusIcon = R.drawable.ic_status_unsupported
-        statusText = "Unsupported kernel"
-        secondaryText = "KernelSU only supports GKI kernels now"
-    }
-
-    val context = LocalContext.current
-
-    Column(modifier = Modifier.fillMaxWidth()) {
-        Card(
+private fun StatusCard(kernelVersion: KernelVersion, ksuVersion: Int?) {
+    ElevatedCard(
+        colors = CardDefaults.elevatedCardColors(containerColor = run {
+            if (ksuVersion != null) MaterialTheme.colorScheme.secondaryContainer
+            else MaterialTheme.colorScheme.errorContainer
+        })
+    ) {
+        Row(
             modifier = Modifier
                 .fillMaxWidth()
-                .padding(6.dp)
                 .clickable {
-                    if (kernelVersion.isGKI() && !isManager) {
-                        Toast.makeText(
-                            context,
-                            "Unimplemented",
-                            Toast.LENGTH_SHORT
-                        ).show()
+                    // TODO: Install kernel
+                }
+                .padding(24.dp),
+            verticalAlignment = Alignment.CenterVertically
+        ) {
+            when {
+                ksuVersion != null -> {
+                    Icon(Icons.Outlined.CheckCircle, stringResource(R.string.home_working))
+                    Column(Modifier.padding(start = 20.dp)) {
+                        Text(
+                            text = stringResource(R.string.home_working),
+                            fontFamily = FontFamily.Serif,
+                            style = MaterialTheme.typography.titleMedium
+                        )
+                        Spacer(Modifier.height(4.dp))
+                        Text(
+                            text = stringResource(R.string.home_working_version, ksuVersion),
+                            style = MaterialTheme.typography.bodyMedium
+                        )
                     }
-                },
-        ) {
-            Row(
-                modifier = Modifier
-                    .fillMaxWidth()
-                    .padding(10.dp)
-            ) {
-                Image(
-                    painter = painterResource(id = statusIcon),
-                    null,
-                    modifier = Modifier
-                        .size(64.dp)
-                )
-                Column(
-                    modifier = Modifier
-                        .fillMaxWidth()
-                        .padding(start = 10.dp),
-                ) {
-                    Text(
-                        text = statusText,
-                        fontSize = 20.sp,
-                        fontWeight = FontWeight.Bold
-                    )
-
-                    Text(
-                        text = secondaryText,
-                        fontSize = 15.sp,
-                        fontWeight = FontWeight.Normal
-                    )
                 }
-            }
-
-        }
-
-        Card(
-            modifier = Modifier
-                .fillMaxWidth()
-                .padding(6.dp)
-        ) {
-            Column(
-                modifier = Modifier.padding(10.dp)
-            ) {
-
-                Os.uname().let { uname ->
-                    Info("Kernel", uname.release)
-                    Info("Arch", uname.machine)
-                    Info("Version", uname.version)
+                kernelVersion.isGKI() -> {
+                    Icon(Icons.Outlined.Warning, stringResource(R.string.home_not_installed))
+                    Column(Modifier.padding(start = 20.dp)) {
+                        Text(
+                            text = stringResource(R.string.home_not_installed),
+                            fontFamily = FontFamily.Serif,
+                            style = MaterialTheme.typography.titleMedium
+                        )
+                        Spacer(Modifier.height(4.dp))
+                        Text(
+                            text = stringResource(R.string.home_click_to_install),
+                            style = MaterialTheme.typography.bodyMedium
+                        )
+                    }
+                }
+                else -> {
+                    Icon(Icons.Outlined.Block, stringResource(R.string.home_unsupported))
+                    Column(Modifier.padding(start = 20.dp)) {
+                        Text(
+                            text = stringResource(R.string.home_unsupported),
+                            fontFamily = FontFamily.Serif,
+                            style = MaterialTheme.typography.titleMedium
+                        )
+                        Spacer(Modifier.height(4.dp))
+                        Text(
+                            text = stringResource(R.string.home_unsupported_reason),
+                            style = MaterialTheme.typography.bodyMedium
+                        )
+                    }
                 }
-
-                Info("API Level", Build.VERSION.SDK_INT.toString())
-
-                Info("ABI", Build.SUPPORTED_ABIS.joinToString(", "))
-
-                Info("Fingerprint", Build.FINGERPRINT)
-
-                Info("Security Patch", Build.VERSION.SECURITY_PATCH)
-
             }
         }
     }
+}
 
-}
+@Composable
+private fun InfoCard() {
+    val context = LocalContext.current
+    val snackbarHost = LocalSnackbarHost.current
+    val scope = rememberCoroutineScope()
+
+    ElevatedCard {
+        Column(
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(start = 24.dp, top = 24.dp, end = 24.dp, bottom = 16.dp)
+        ) {
+            val contents = StringBuilder()
+            val uname = Os.uname()
+
+            @Composable
+            fun InfoCardItem(label: String, content: String) {
+                contents.appendLine(label).appendLine(content).appendLine()
+                Text(text = label, style = MaterialTheme.typography.bodyLarge)
+                Text(text = content, style = MaterialTheme.typography.bodyMedium)
+            }
+
+            InfoCardItem("Kernel", uname.release)
+
+            Spacer(Modifier.height(24.dp))
+            InfoCardItem("Arch", uname.machine)
+
+            Spacer(Modifier.height(24.dp))
+            InfoCardItem("Version", uname.version)
+
+            Spacer(Modifier.height(24.dp))
+            InfoCardItem("API Level", Build.VERSION.SDK_INT.toString())
+
+            Spacer(Modifier.height(24.dp))
+            InfoCardItem("ABI", Build.SUPPORTED_ABIS.joinToString(", "))
+
+            Spacer(Modifier.height(24.dp))
+            InfoCardItem("Fingerprint", Build.FINGERPRINT)
+
+            Spacer(Modifier.height(24.dp))
+            InfoCardItem("Security Patch", Build.VERSION.SECURITY_PATCH)
+
+            val copiedMessage = stringResource(R.string.home_copied_to_clipboard)
+            TextButton(
+                modifier = Modifier.align(Alignment.End),
+                onClick = {
+                    val cm = context.getSystemService(Context.CLIPBOARD_SERVICE) as ClipboardManager
+                    cm.setPrimaryClip(ClipData.newPlainText("KernelSU", contents.toString()))
+                    scope.launch { snackbarHost.showSnackbar(copiedMessage) }
+                },
+                content = { Text(stringResource(android.R.string.copy)) }
+            )
+        }
+    }
+}
+
+@Preview
+@Composable
+private fun StatusCardPreview() {
+    Column {
+        StatusCard(KernelVersion(5, 10, 101), 1)
+        StatusCard(KernelVersion(5, 10, 101), null)
+        StatusCard(KernelVersion(4, 10, 101), null)
+    }
+}
+
+@Preview
+@Composable
+private fun SupportCard() {
+    ElevatedCard {
+        Column(
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(24.dp)
+        ) {
+            Text(
+                text = stringResource(R.string.home_support),
+                fontWeight = FontWeight.SemiBold,
+                style = MaterialTheme.typography.titleMedium
+            )
+            Spacer(Modifier.height(8.dp))
+            CompositionLocalProvider(LocalTextStyle provides MaterialTheme.typography.bodyMedium) {
+                LinkifyText("Author: weishu")
+                LinkifyText("Github: https://github.com/tiann/KernelSU")
+                LinkifyText("Telegram: https://t.me/KernelSU")
+                LinkifyText("QQ: https://pd.qq.com/s/8lipl1brp")
+            }
+        }
+    }
+}

manager/app/src/main/java/me/weishu/kernelsu/ui/screen/Module.kt

@@ -1,20 +1,17 @@
+package me.weishu.kernelsu.ui.screen
+
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.tooling.preview.Preview
+import com.ramcosta.composedestinations.annotation.Destination
 
+@Destination
 @Composable
-fun Module() {
+fun ModuleScreen() {
     Box(contentAlignment = Alignment.Center, modifier = Modifier.fillMaxSize()) {
         Text(text = "Coming Soon..")
     }
 }
-
-@Preview
-@Composable
-fun Preview() {
-    Module()
-}

manager/app/src/main/java/me/weishu/kernelsu/ui/screen/SuperUser.kt

@@ -1,191 +1,107 @@
-@file:OptIn(ExperimentalMaterial3Api::class)
+package me.weishu.kernelsu.ui.screen
 
-import android.annotation.SuppressLint
-import android.content.Context
-import android.graphics.drawable.Drawable
-import android.os.Build
-import android.util.Log
-import android.widget.Toast
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.layout.*
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.items
 import androidx.compose.material3.*
 import androidx.compose.runtime.*
-import androidx.compose.ui.Alignment
+import androidx.compose.runtime.saveable.rememberSaveable
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.platform.LocalContext
-import androidx.compose.ui.tooling.preview.Preview
-import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.unit.dp
+import androidx.lifecycle.viewmodel.compose.viewModel
 import com.google.accompanist.drawablepainter.rememberDrawablePainter
+import com.google.accompanist.swiperefresh.SwipeRefresh
+import com.google.accompanist.swiperefresh.rememberSwipeRefreshState
+import com.ramcosta.composedestinations.annotation.Destination
+import kotlinx.coroutines.launch
 import me.weishu.kernelsu.Natives
+import me.weishu.kernelsu.R
+import me.weishu.kernelsu.ui.component.SearchAppBar
+import me.weishu.kernelsu.ui.util.LocalSnackbarHost
+import me.weishu.kernelsu.ui.viewmodel.SuperUserViewModel
 import java.util.*
 
-private const val TAG = "SuperUser"
-
-class SuperUserData(
-    val name: () -> CharSequence,
-    val description: String,
-    val icon: () -> Drawable,
-    val uid: Int,
-    initialChecked: Boolean = false
-) {
-    var checked: Boolean by mutableStateOf(initialChecked)
-}
-
+@OptIn(ExperimentalMaterial3Api::class)
+@Destination
 @Composable
-fun SuperUserItem(
-    superUserData: SuperUserData,
-    checked: Boolean,
-    onCheckedChange: (Boolean) -> Unit,
-    onItemClick: () -> Unit
-) {
+fun SuperUserScreen() {
+    val viewModel = viewModel<SuperUserViewModel>()
+    val snackbarHost = LocalSnackbarHost.current
+    val scope = rememberCoroutineScope()
 
-    Column {
-        ListItem(
-            headlineText = { Text(superUserData.name().toString()) },
-            supportingText = { Text(superUserData.description) },
-            leadingContent = {
-                Image(
-                    painter = rememberDrawablePainter(drawable = superUserData.icon()),
-                    contentDescription = superUserData.name.toString(),
-                    modifier = Modifier
-                        .padding(4.dp)
-                        .width(48.dp)
-                        .height(48.dp)
-                )
+    LaunchedEffect(Unit) {
+        if (viewModel.appList.isEmpty()) {
+            viewModel.fetchAppList()
+        }
+    }
+
+    Scaffold(
+        topBar = {
+            SearchAppBar(
+                title = { Text(stringResource(R.string.module)) },
+                searchText = viewModel.search,
+                onSearchTextChange = { viewModel.search = it },
+                onClearClick = { viewModel.search = "" }
+            )
+        }
+    ) { innerPadding ->
+        val failMessage = stringResource(R.string.superuser_failed_to_grant_root)
+
+        // TODO: Replace SwipeRefresh with RefreshIndicator when it's ready
+        SwipeRefresh(
+            state = rememberSwipeRefreshState(viewModel.isRefreshing),
+            onRefresh = {
+                scope.launch { viewModel.fetchAppList() }
             },
-            trailingContent = {
-                Switch(
-                    checked = checked,
-                    onCheckedChange = onCheckedChange,
-                    modifier = Modifier.padding(4.dp)
-                )
-            }
-        )
-        Divider(thickness = Dp.Hairline)
-    }
-}
-
-private fun getAppList(context: Context): List<SuperUserData> {
-    val pm = context.packageManager
-    val allowList = Natives.getAllowList()
-    val denyList = Natives.getDenyList();
-
-    Log.i(TAG, "allowList: ${Arrays.toString(allowList)}")
-    Log.i(TAG, "denyList: ${Arrays.toString(denyList)}")
-
-    val result = mutableListOf<SuperUserData>()
-
-    // add allow list
-    for (uid in allowList) {
-        val packagesForUid = pm.getPackagesForUid(uid)
-        if (packagesForUid == null || packagesForUid.isEmpty()) {
-            Log.w(TAG, "uid $uid has no package")
-            continue
-        }
-
-        packagesForUid.forEach { packageName ->
-            val applicationInfo = pm.getApplicationInfo(packageName, 0)
-            result.add(
-                SuperUserData(
-                    name = { applicationInfo.loadLabel(pm) },
-                    description = applicationInfo.packageName,
-                    icon = { applicationInfo.loadIcon(pm) },
-                    uid = uid,
-                    initialChecked = true
-                )
-            )
-        }
-    }
-
-    // add deny list
-    for (uid in denyList) {
-        val packagesForUid = pm.getPackagesForUid(uid)
-        if (packagesForUid == null || packagesForUid.isEmpty()) {
-            Log.w(TAG, "uid $uid has no package")
-            continue
-        }
-
-        packagesForUid.forEach { packageName ->
-            val applicationInfo = pm.getApplicationInfo(packageName, 0)
-            result.add(
-                SuperUserData(
-                    name = { applicationInfo.loadLabel(pm) },
-                    description = applicationInfo.packageName,
-                    icon = { applicationInfo.loadIcon(pm) },
-                    uid = uid,
-                    initialChecked = false
-                )
-            )
-        }
-    }
-
-    // todo: use root to get all uids if possible
-    val apps = pm.getInstalledApplications(0)
-    // add other apps
-    for (app in apps) {
-        if (allowList.contains(app.uid) || denyList.contains(app.uid)) {
-            continue
-        }
-        result.add(
-            SuperUserData(
-                name = { app.loadLabel(pm) },
-                description = app.packageName,
-                icon = { app.loadIcon(pm) },
-                uid = app.uid,
-                initialChecked = false
-            )
-        )
-    }
-
-    return result
-}
-
-@SuppressLint("QueryPermissionsNeeded")
-@Composable
-fun SuperUser() {
-
-    val context = LocalContext.current
-
-    val list = getAppList(context)
-    val apps = remember { list.toMutableStateList() }
-
-    if (apps.isEmpty()) {
-        Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
-            Text("No apps request superuser")
-        }
-        return
-    }
-
-    LazyColumn() {
-        items(apps, key = { it.description }) { app ->
-            SuperUserItem(
-                superUserData = app,
-                checked = app.checked,
-                onCheckedChange = { checked ->
-                    val success = Natives.allowRoot(app.uid, checked)
-                    if (success) {
-                        app.checked = checked
-                    } else {
-                        Toast.makeText(
-                            context,
-                            "Failed to allow root: ${app.uid}",
-                            Toast.LENGTH_SHORT
-                        ).show()
+            modifier = Modifier
+                .padding(innerPadding)
+                .fillMaxSize()
+        ) {
+            LazyColumn {
+                items(viewModel.appList) { app ->
+                    var isChecked by rememberSaveable(app) { mutableStateOf(app.onAllowList) }
+                    AppItem(app, isChecked) { checked ->
+                        val success = Natives.allowRoot(app.uid, checked)
+                        if (success) {
+                            isChecked = checked
+                        } else scope.launch {
+                            snackbarHost.showSnackbar(failMessage.format(app.uid))
+                        }
                     }
-                },
-                onItemClick = {
-                    // TODO
                 }
-            )
+            }
         }
     }
 }
 
-@Preview
+@OptIn(ExperimentalMaterial3Api::class)
 @Composable
-fun Preview_SuperUser() {
-    SuperUser()
-}
+private fun AppItem(
+    app: SuperUserViewModel.AppInfo,
+    isChecked: Boolean,
+    onCheckedChange: (Boolean) -> Unit
+) {
+    ListItem(
+        headlineText = { Text(app.label) },
+        supportingText = { Text(app.packageName) },
+        leadingContent = {
+            Image(
+                painter = rememberDrawablePainter(app.icon),
+                contentDescription = app.label,
+                modifier = Modifier
+                    .padding(4.dp)
+                    .width(48.dp)
+                    .height(48.dp)
+            )
+        },
+        trailingContent = {
+            Switch(
+                checked = isChecked,
+                onCheckedChange = onCheckedChange,
+                modifier = Modifier.padding(4.dp)
+            )
+        }
+    )
+}

manager/app/src/main/java/me/weishu/kernelsu/ui/util/CompositionProvider.kt

@@ -0,0 +1,8 @@
+package me.weishu.kernelsu.ui.util
+
+import androidx.compose.material3.SnackbarHostState
+import androidx.compose.runtime.compositionLocalOf
+
+val LocalSnackbarHost = compositionLocalOf<SnackbarHostState> {
+    error("CompositionLocal LocalSnackbarController not present")
+}

manager/app/src/main/java/me/weishu/kernelsu/ui/util/HyperlinkText.kt

@@ -1,4 +1,4 @@
-package me.weishu.kernelsu
+package me.weishu.kernelsu.ui.util
 
 import androidx.compose.foundation.gestures.detectTapGestures
 import androidx.compose.material3.MaterialTheme
@@ -7,7 +7,6 @@ import androidx.compose.runtime.Composable
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.input.pointer.pointerInput
 import androidx.compose.ui.platform.LocalUriHandler
 import androidx.compose.ui.text.SpanStyle
@@ -17,7 +16,10 @@ import androidx.compose.ui.text.style.TextDecoration
 import java.util.regex.Pattern
 
 @Composable
-fun LinkifyText(text: String, modifier: Modifier = Modifier) {
+fun LinkifyText(
+    text: String,
+    modifier: Modifier = Modifier
+) {
     val uriHandler = LocalUriHandler.current
     val layoutResult = remember {
         mutableStateOf<TextLayoutResult?>(null)
@@ -42,19 +44,21 @@ fun LinkifyText(text: String, modifier: Modifier = Modifier) {
             )
         }
     }
-    Text(text = annotatedString, modifier = modifier.pointerInput(Unit) {
-        detectTapGestures { offsetPosition ->
-            layoutResult.value?.let {
-                val position = it.getOffsetForPosition(offsetPosition)
-                annotatedString.getStringAnnotations(position, position).firstOrNull()
-                    ?.let { result ->
-                        if (result.tag == "URL") {
-                            uriHandler.openUri(result.item)
+    Text(
+        text = annotatedString,
+        modifier = modifier.pointerInput(Unit) {
+            detectTapGestures { offsetPosition ->
+                layoutResult.value?.let {
+                    val position = it.getOffsetForPosition(offsetPosition)
+                    annotatedString.getStringAnnotations(position, position).firstOrNull()
+                        ?.let { result ->
+                            if (result.tag == "URL") {
+                                uriHandler.openUri(result.item)
+                            }
                         }
-                    }
+                }
             }
-        }
-    },
+        },
         onTextLayout = { layoutResult.value = it }
     )
 }
@@ -66,27 +70,18 @@ private val urlPattern: Pattern = Pattern.compile(
     Pattern.CASE_INSENSITIVE or Pattern.MULTILINE or Pattern.DOTALL
 )
 
-fun extractUrls(text: String): List<LinkInfos> {
-    val matcher = urlPattern.matcher(text)
-    var matchStart: Int
-    var matchEnd: Int
-    val links = arrayListOf<LinkInfos>()
-
-    while (matcher.find()) {
-        matchStart = matcher.start(1)
-        matchEnd = matcher.end()
-
-        var url = text.substring(matchStart, matchEnd)
-        if (!url.startsWith("http://") && !url.startsWith("https://"))
-            url = "https://$url"
-
-        links.add(LinkInfos(url, matchStart, matchEnd))
-    }
-    return links
-}
-
-data class LinkInfos(
+private data class LinkInfo(
     val url: String,
     val start: Int,
     val end: Int
-)
+)
+
+private fun extractUrls(text: String): List<LinkInfo> = buildList {
+    val matcher = urlPattern.matcher(text)
+    while (matcher.find()) {
+        val matchStart = matcher.start(1)
+        val matchEnd = matcher.end()
+        val url = text.substring(matchStart, matchEnd).replaceFirst("http://", "https://")
+        add(LinkInfo(url, matchStart, matchEnd))
+    }
+}

manager/app/src/main/java/me/weishu/kernelsu/ui/viewmodel/SuperUserViewModel.kt

@@ -0,0 +1,76 @@
+package me.weishu.kernelsu.ui.viewmodel
+
+import android.graphics.drawable.Drawable
+import android.util.Log
+import androidx.compose.runtime.derivedStateOf
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.setValue
+import androidx.lifecycle.ViewModel
+import kotlinx.coroutines.Dispatchers
+import kotlinx.coroutines.withContext
+import me.weishu.kernelsu.Natives
+import me.weishu.kernelsu.ksuApp
+import java.text.Collator
+import java.util.*
+
+class SuperUserViewModel : ViewModel() {
+
+    companion object {
+        private const val TAG = "SuperUserViewModel"
+        private var apps by mutableStateOf<List<AppInfo>>(emptyList())
+    }
+
+    class AppInfo(
+        val label: String,
+        val packageName: String,
+        val icon: Drawable,
+        val uid: Int,
+        val onAllowList: Boolean,
+        val onDenyList: Boolean
+    )
+
+    var search by mutableStateOf("")
+    var isRefreshing by mutableStateOf(false)
+        private set
+
+    private val sortedList by derivedStateOf {
+        val comparator = compareBy<AppInfo> {
+            when {
+                it.onAllowList -> 0
+                it.onDenyList -> 1
+                else -> 2
+            }
+        }.then(compareBy(Collator.getInstance(Locale.getDefault()), AppInfo::label))
+        apps.sortedWith(comparator).also {
+            isRefreshing = false
+        }
+    }
+
+    val appList by derivedStateOf {
+        sortedList.filter {
+            it.label.contains(search) || it.packageName.contains(search)
+        }
+    }
+
+    suspend fun fetchAppList() {
+        withContext(Dispatchers.IO) {
+            isRefreshing = true
+            val pm = ksuApp.packageManager
+            val allowList = Natives.getAllowList().toSet()
+            val denyList = Natives.getDenyList().toSet()
+            Log.i(TAG, "allowList: $allowList")
+            Log.i(TAG, "denyList: $denyList")
+            apps = pm.getInstalledApplications(0).map {
+                AppInfo(
+                    label = it.loadLabel(pm).toString(),
+                    packageName = it.packageName,
+                    icon = it.loadIcon(pm),
+                    uid = it.uid,
+                    onAllowList = it.uid in allowList,
+                    onDenyList = it.uid in denyList
+                )
+            }
+        }
+    }
+}