App: side-by-side settings layout (#26)

Author: cliuff

app/build.gradle.kts

@@ -202,6 +202,9 @@ dependencies {
         libs.androidxFragment,
         libs.androidxFragmentCompose,
         libs.androidxWindow,
+        libs.androidx.material3.adaptive,
+        libs.androidx.material3.adaptive.layout,
+        libs.androidx.material3.adaptive.navigation,
         libs.androidxDrawerLayout,
         libs.androidxSwipeRefreshLayout,
         libs.androidxConstraintLayout,

app/src/main/kotlin/com/madness/collision/settings/SettingsPage.kt

@@ -17,29 +17,39 @@
 package com.madness.collision.settings
 
 import android.content.Context
+import androidx.activity.ComponentActivity
+import androidx.activity.compose.LocalActivity
 import androidx.compose.animation.animateColorAsState
 import androidx.compose.foundation.*
 import androidx.compose.foundation.layout.*
 import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.material3.*
+import androidx.compose.material3.adaptive.currentWindowAdaptiveInfo
 import androidx.compose.runtime.*
+import androidx.compose.runtime.saveable.rememberSaveable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.coerceAtMost
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
+import androidx.core.os.bundleOf
+import androidx.fragment.compose.AndroidFragment
+import androidx.lifecycle.viewmodel.compose.viewModel
+import androidx.window.core.layout.WindowSizeClass.Companion.WIDTH_DP_MEDIUM_LOWER_BOUND
 import com.madness.collision.R
 import com.madness.collision.settings.instant.InstantFragment
 import com.madness.collision.main.DevOptions
 import com.madness.collision.main.MainViewModel
 import com.madness.collision.main.showPage
 import com.madness.collision.pref.PrefExterior
-import com.madness.collision.settings.unitmgr.UnitsManagerFragment
 import com.madness.collision.unit.DescRetriever
+import com.madness.collision.unit.Unit as ModUnit
 import com.madness.collision.util.Page
 import com.madness.collision.util.dev.DarkPreview
 import com.madness.collision.util.dev.LayoutDirectionPreviews
@@ -50,38 +60,120 @@ fun SettingsPage(
     mainViewModel: MainViewModel,
     paddingValues: PaddingValues,
     showLanguages: () -> Unit,
+) {
+    val windowSizeClass = currentWindowAdaptiveInfo().windowSizeClass
+    if (windowSizeClass.isWidthAtLeastBreakpoint(WIDTH_DP_MEDIUM_LOWER_BOUND)) {
+        BoxWithConstraints {
+            val navWidth = (maxWidth / 3).coerceAtMost(240.dp)
+            SideBySideLayout(navPaneWidth = navWidth, showLanguages = showLanguages, contentPadding = paddingValues)
+        }
+    } else {
+        SinglePaneLayout(showLanguages = showLanguages, contentPadding = paddingValues)
+    }
+}
+
+private enum class NavDest {
+    Styles, Languages, About, Instant, ApiUnit
+}
+
+@Composable
+private fun SinglePaneLayout(
+    showLanguages: () -> Unit,
+    contentPadding: PaddingValues = PaddingValues.Zero,
+) {
+    val context = LocalContext.current
+    val activity = LocalActivity.current as? ComponentActivity
+    SettingsNavPanel(
+        mainViewModel = viewModel(activity!!),
+        paddingValues = contentPadding,
+        onSelectDest = { dest ->
+            when (dest) {
+                NavDest.Styles ->
+                    context.showPage<Page> {
+                        putString("fragmentClass", PrefExterior::class.qualifiedName)
+                        putInt("titleId", R.string.settings_exterior)
+                    }
+                NavDest.Languages -> showLanguages()
+                NavDest.About -> context.showPage<AdviceFragment>()
+                NavDest.Instant -> context.showPage<InstantFragment>()
+                NavDest.ApiUnit ->
+                    ModUnit.getBridge(ModUnit.UNIT_NAME_API_VIEWING)
+                        ?.getSettings()?.let(context::showPage)
+            }
+        },
+    )
+}
+
+@Composable
+private fun SideBySideLayout(
+    navPaneWidth: Dp,
+    showLanguages: () -> Unit,
+    modifier: Modifier = Modifier,
+    contentPadding: PaddingValues = PaddingValues.Zero,
+) {
+    val (navDest, setNavDest) = rememberSaveable {
+        mutableStateOf<NavDest?>(null)
+    }
+    Row(modifier = modifier) {
+        Box(
+            modifier = Modifier
+                .width(navPaneWidth)
+                .padding(contentPadding)
+        ) {
+            val activity = LocalActivity.current as? ComponentActivity
+            SettingsNavPanel(mainViewModel = viewModel(activity!!), onSelectDest = setNavDest)
+        }
+
+        VerticalDivider(thickness = 0.5.dp)
+
+        var lastDest by rememberSaveable { mutableStateOf<NavDest?>(null) }
+        LaunchedEffect(navDest) { if (navDest != NavDest.Languages) lastDest = navDest }
+        if (navDest == NavDest.Languages) LaunchedEffect(Unit) { showLanguages() }
+
+        when (lastDest) {
+            NavDest.Styles -> {
+                val n = PrefExterior::class.qualifiedName
+                val args = bundleOf("fragmentClass" to n, "titleId" to R.string.settings_exterior)
+                AndroidFragment<Page>(arguments = args)
+            }
+            NavDest.Languages -> Unit
+            NavDest.About -> AndroidFragment<AdviceFragment>()
+            NavDest.Instant -> AndroidFragment<InstantFragment>()
+            NavDest.ApiUnit -> {
+                val n = "com.madness.collision.unit.api_viewing.PrefAv"
+                val args = bundleOf("fragmentClass" to n, "titleId" to R.string.apiViewer)
+                AndroidFragment<Page>(arguments = args)
+            }
+            null -> Unit
+        }
+    }
+}
+
+@Composable
+private fun SettingsNavPanel(
+    mainViewModel: MainViewModel,
+    onSelectDest: (NavDest) -> Unit,
+    paddingValues: PaddingValues = PaddingValues.Zero,
 ) {
     val context = LocalContext.current
     val options = remember {
         val builtIn = listOf(
             Triple(R.string.settings_exterior, R.drawable.ic_palette_24) {
-                context.showPage<Page> {
-                    putString("fragmentClass", PrefExterior::class.qualifiedName)
-                    putInt("titleId", R.string.settings_exterior)
-                }
+                onSelectDest(NavDest.Styles)
             },
             Triple(R.string.Settings_Button_SwitchLanguage, R.drawable.ic_language_24) {
-                showLanguages()
+                onSelectDest(NavDest.Languages)
             },
             Triple(R.string.Main_TextView_Advice_Text, R.drawable.ic_info_24) {
-                context.showPage<AdviceFragment>()
-            },
-            Triple(R.string.unitsManager, R.drawable.ic_extension_24) {
-                context.showPage<UnitsManagerFragment>()
+                onSelectDest(NavDest.About)
             },
             Triple(R.string.Main_TextView_Launcher, R.drawable.ic_flash_24) {
-                context.showPage<InstantFragment>()
+                onSelectDest(NavDest.Instant)
             },
         )
-        val specialOptions = buildList {
-            if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.R) {
-                add(Triple(R.string.app_device_controls, R.drawable.ic_devices_24) {
-                    context.showPage<DeviceControlsFragment>()
-                })
-            }
-        }
         val unitOptions = getUnitOptions(mainViewModel, context)
-        builtIn + specialOptions + unitOptions
+            .map { (l, i, _) -> Triple(l, i) { onSelectDest(NavDest.ApiUnit) } }
+        builtIn + unitOptions
     }
     Settings(options = options, paddingValues = paddingValues)
 }
@@ -193,7 +285,6 @@ private fun SettingsPreview() {
             Triple(R.string.settings_exterior, R.drawable.ic_palette_24) { },
             Triple(R.string.Settings_Button_SwitchLanguage, R.drawable.ic_language_24) { },
             Triple(R.string.Main_TextView_Advice_Text, R.drawable.ic_info_24) { },
-            Triple(R.string.unitsManager, R.drawable.ic_extension_24) { },
             Triple(R.string.Main_TextView_Launcher, R.drawable.ic_flash_24) { },
             Triple(R.string.apiViewer, R.drawable.ic_android_24) { },
         )

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

@@ -23,6 +23,7 @@ androidxRoom = "2.7.2"
 androidxNavigation = "2.9.4"
 androidxCoreTesting = "2.2.0"
 androidxWindow = "1.4.0"
+androidxMaterial3Adaptive = "1.2.0-rc01"
 
 androidxDrawerLayout = "1.2.0"
 androidxSwipeRefreshLayout = "1.1.0"
@@ -103,6 +104,10 @@ androidxAppcompat = { module = "androidx.appcompat:appcompat", version.ref = "an
 androidxFragment = { module = "androidx.fragment:fragment-ktx", version.ref = "androidxFragment" }
 androidxFragmentCompose = { module = "androidx.fragment:fragment-compose", version.ref = "androidxFragment" }
 androidxWindow = { module = "androidx.window:window", version.ref = "androidxWindow" }
+androidx-material3-adaptive = { module = "androidx.compose.material3.adaptive:adaptive", version.ref = "androidxMaterial3Adaptive" }
+androidx-material3-adaptive-layout = { module = "androidx.compose.material3.adaptive:adaptive-layout", version.ref = "androidxMaterial3Adaptive" }
+androidx-material3-adaptive-navigation = { module = "androidx.compose.material3.adaptive:adaptive-navigation", version.ref = "androidxMaterial3Adaptive" }
+
 androidxDrawerLayout = { module = "androidx.drawerlayout:drawerlayout", version.ref = "androidxDrawerLayout" }
 androidxSwipeRefreshLayout = { module = "androidx.swiperefreshlayout:swiperefreshlayout", version.ref = "androidxSwipeRefreshLayout" }
 androidxConstraintLayout = { module = "androidx.constraintlayout:constraintlayout", version.ref = "androidxConstraintLayout" }