ui: settings redesign

app/src/main/AndroidManifest.xml

@@ -23,6 +23,7 @@
         <activity
             android:name=".MainActivity"
             android:exported="true"
+            android:configChanges="locale|layoutDirection"
             android:screenOrientation="portrait"
             android:theme="@style/Theme.LibreSudoku">
             <intent-filter>

app/src/main/java/com/kaajjo/libresudoku/ui/components/Preferences.kt

@@ -10,6 +10,7 @@ import androidx.compose.foundation.layout.heightIn
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.widthIn
+import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.Check
 import androidx.compose.material3.Icon
@@ -26,6 +27,7 @@ import androidx.compose.ui.graphics.Shape
 import androidx.compose.ui.graphics.painter.Painter
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
 import com.kaajjo.libresudoku.R
 import com.kaajjo.libresudoku.ui.theme.LibreSudokuTheme
 import com.kaajjo.libresudoku.ui.util.LightDarkPreview
@@ -41,12 +43,13 @@ fun PreferenceRow(
     subtitle: String? = null,
     enabled: Boolean = true,
     action: @Composable (() -> Unit)? = null,
-    shape: Shape = MaterialTheme.shapes.medium
+    shape: Shape = RoundedCornerShape(0.dp)
 ) {
-    val height = if (subtitle != null) 72.dp else 56.dp
+    val height = if (subtitle != null) 85.dp else 65.dp
 
-    val titleStyle = MaterialTheme.typography.bodyLarge.copy(
-        color = MaterialTheme.colorScheme.onSurface
+    val titleStyle = MaterialTheme.typography.titleLarge.copy(
+        color = MaterialTheme.colorScheme.onSurface,
+        fontSize = 20.sp
     )
     val subtitleTextStyle = MaterialTheme.typography.bodyMedium.copy(
         color = MaterialTheme.colorScheme.onSurface.copy(alpha = 0.75f),
@@ -61,22 +64,22 @@ fun PreferenceRow(
                 onLongClick = onLongClick,
                 onClick = onClick,
                 enabled = enabled
-            ),
+            )
+            .padding(vertical = 12.dp),
         verticalAlignment = Alignment.CenterVertically,
     ) {
         if (painter != null) {
             Icon(
                 painter = painter,
                 modifier = Modifier
-                    .padding(start = 12.dp, end = 14.dp)
+                    .padding(horizontal = 16.dp)
                     .size(24.dp),
-                tint = MaterialTheme.colorScheme.secondary.copy(alpha = if (enabled) 1f else 0.6f),
                 contentDescription = null,
             )
         }
         Column(
             Modifier
-                .padding(horizontal = 16.dp)
+                .padding(horizontal = if (painter != null) 0.dp else 16.dp)
                 .weight(1f),
         ) {
             Text(
@@ -89,7 +92,7 @@ fun PreferenceRow(
                     modifier = Modifier.padding(top = 4.dp),
                     text = subtitle,
                     style = subtitleTextStyle,
-                    color = subtitleTextStyle.color.copy(alpha = if (enabled) 1f else 0.6f),
+                    color = subtitleTextStyle.color.copy(alpha = 0.75f),
                 )
             }
         }

app/src/main/java/com/kaajjo/libresudoku/ui/game/GameScreen.kt

@@ -17,8 +17,8 @@ import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.automirrored.rounded.Redo
 import androidx.compose.material.icons.filled.MoreVert
-import androidx.compose.material.icons.rounded.Redo
 import androidx.compose.material3.AlertDialog
 import androidx.compose.material3.Checkbox
 import androidx.compose.material3.DropdownMenu
@@ -48,7 +48,6 @@ import androidx.compose.ui.draw.rotate
 import androidx.compose.ui.draw.scale
 import androidx.compose.ui.platform.LocalClipboardManager
 import androidx.compose.ui.platform.LocalContext
-import androidx.compose.ui.platform.LocalLifecycleOwner
 import androidx.compose.ui.platform.LocalView
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
@@ -59,13 +58,14 @@ import androidx.hilt.navigation.compose.hiltViewModel
 import androidx.lifecycle.Lifecycle
 import androidx.lifecycle.LifecycleEventObserver
 import androidx.lifecycle.LifecycleOwner
+import androidx.lifecycle.compose.LocalLifecycleOwner
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import com.kaajjo.libresudoku.R
 import com.kaajjo.libresudoku.core.Cell
 import com.kaajjo.libresudoku.core.PreferencesConstants
 import com.kaajjo.libresudoku.core.qqwing.GameType
 import com.kaajjo.libresudoku.core.utils.SudokuParser
-import com.kaajjo.libresudoku.destinations.SettingsScreenDestination
+import com.kaajjo.libresudoku.destinations.SettingsCategoriesScreenDestination
 import com.kaajjo.libresudoku.ui.components.AnimatedNavigation
 import com.kaajjo.libresudoku.ui.components.board.Board
 import com.kaajjo.libresudoku.ui.game.components.DefaultGameKeyboard
@@ -206,7 +206,7 @@ fun GameScreen(
                                     viewModel.giveUpDialog = true
                                 },
                                 onSettingsClick = {
-                                    navigator.navigate(SettingsScreenDestination(launchedFromGame = true))
+                                    navigator.navigate(SettingsCategoriesScreenDestination(launchedFromGame = true))
                                     viewModel.showMenu = false
                                 },
                                 onExportClick = {
@@ -604,7 +604,7 @@ fun UndoRedoMenu(
                 text = { Text(stringResource(R.string.redo)) },
                 leadingIcon = {
                     Icon(
-                        imageVector = Icons.Rounded.Redo,
+                        imageVector = Icons.AutoMirrored.Rounded.Redo,
                         contentDescription = null
                     )
                 },

app/src/main/java/com/kaajjo/libresudoku/ui/more/MoreScreen.kt

@@ -24,7 +24,7 @@ import com.kaajjo.libresudoku.destinations.AboutScreenDestination
 import com.kaajjo.libresudoku.destinations.BackupScreenDestination
 import com.kaajjo.libresudoku.destinations.FoldersScreenDestination
 import com.kaajjo.libresudoku.destinations.LearnScreenDestination
-import com.kaajjo.libresudoku.destinations.SettingsScreenDestination
+import com.kaajjo.libresudoku.destinations.SettingsCategoriesScreenDestination
 import com.kaajjo.libresudoku.ui.components.AnimatedNavigation
 import com.kaajjo.libresudoku.ui.components.PreferenceRow
 import com.ramcosta.composedestinations.annotation.Destination
@@ -61,7 +61,7 @@ fun MoreScreen(
         PreferenceRow(
             title = stringResource(R.string.settings_title),
             painter = painterResource(R.drawable.ic_settings_24),
-            onClick = { navigator.navigate(SettingsScreenDestination()) }
+            onClick = { navigator.navigate(SettingsCategoriesScreenDestination()) }
         )
         PreferenceRow(
             title = stringResource(R.string.backup_restore_title),

app/src/main/java/com/kaajjo/libresudoku/ui/onboarding/WelcomeScreen.kt

@@ -1,6 +1,5 @@
 package com.kaajjo.libresudoku.ui.onboarding
 
-import androidx.appcompat.app.AppCompatDelegate
 import androidx.compose.foundation.ExperimentalFoundationApi
 import androidx.compose.foundation.background
 import androidx.compose.foundation.combinedClickable
@@ -29,11 +28,9 @@ import androidx.compose.material3.Scaffold
 import androidx.compose.material3.Text
 import androidx.compose.material3.surfaceColorAtElevation
 import androidx.compose.runtime.Composable
-import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.getValue
 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.Alignment
 import androidx.compose.ui.Modifier
@@ -49,7 +46,6 @@ import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
-import androidx.core.os.LocaleListCompat
 import androidx.hilt.navigation.compose.hiltViewModel
 import androidx.lifecycle.ViewModel
 import androidx.lifecycle.viewModelScope
@@ -60,12 +56,10 @@ import com.kaajjo.libresudoku.core.utils.SudokuParser
 import com.kaajjo.libresudoku.data.datastore.AppSettingsManager
 import com.kaajjo.libresudoku.destinations.BackupScreenDestination
 import com.kaajjo.libresudoku.destinations.HomeScreenDestination
-import com.kaajjo.libresudoku.destinations.SettingsScreenDestination
+import com.kaajjo.libresudoku.destinations.SettingsCategoriesScreenDestination
+import com.kaajjo.libresudoku.destinations.SettingsLanguageScreenDestination
 import com.kaajjo.libresudoku.ui.components.board.Board
-import com.kaajjo.libresudoku.ui.settings.SelectionDialog
 import com.kaajjo.libresudoku.ui.util.getCurrentLocaleString
-import com.kaajjo.libresudoku.ui.util.getCurrentLocaleTag
-import com.kaajjo.libresudoku.ui.util.getLangs
 import com.ramcosta.composedestinations.annotation.Destination
 import com.ramcosta.composedestinations.navigation.DestinationsNavigator
 import dagger.hilt.android.lifecycle.HiltViewModel
@@ -79,11 +73,14 @@ fun WelcomeScreen(
     viewModel: WelcomeViewModel = hiltViewModel(),
     navigator: DestinationsNavigator
 ) {
+    val context = LocalContext.current
+    val currentLanguage by remember {
+        mutableStateOf(
+            getCurrentLocaleString(context)
+        )
+    }
+
     Scaffold { paddingValues ->
-        val context = LocalContext.current
-        var languagePickDialog by rememberSaveable {
-            mutableStateOf(false)
-        }
         Column(
             modifier = Modifier
                 .fillMaxSize()
@@ -128,20 +125,12 @@ fun WelcomeScreen(
                     ) {
                         Text(stringResource(R.string.action_start))
                     }
-                    var currentLanguage by remember {
-                        mutableStateOf(
-                            getCurrentLocaleString(context)
-                        )
-                    }
-                    LaunchedEffect(languagePickDialog) {
-                        currentLanguage = getCurrentLocaleString(context)
-                    }
 
                     ItemRowBigIcon(
                         title = stringResource(R.string.pref_app_language),
                         icon = Icons.Rounded.Language,
                         subtitle = currentLanguage,
-                        onClick = { languagePickDialog = true },
+                        onClick = { navigator.navigate(SettingsLanguageScreenDestination()) },
                     )
                     ItemRowBigIcon(
                         title = stringResource(R.string.onboard_restore_backup),
@@ -156,30 +145,12 @@ fun WelcomeScreen(
                         icon = Icons.Rounded.Settings,
                         subtitle = stringResource(R.string.onboard_settings_description),
                         onClick = {
-                            navigator.navigate(SettingsScreenDestination(false))
+                            navigator.navigate(SettingsCategoriesScreenDestination(false))
                         }
                     )
                 }
             }
         }
-
-        if (languagePickDialog) {
-            SelectionDialog(
-                title = stringResource(R.string.pref_app_language),
-                entries = getLangs(context),
-                selected = getCurrentLocaleTag(),
-                onSelect = { localeKey ->
-                    val locale = if (localeKey == "") {
-                        LocaleListCompat.getEmptyLocaleList()
-                    } else {
-                        LocaleListCompat.forLanguageTags(localeKey)
-                    }
-                    AppCompatDelegate.setApplicationLocales(locale)
-                    languagePickDialog = false
-                },
-                onDismiss = { languagePickDialog = false }
-            )
-        }
     }
 }
 
@@ -259,18 +230,18 @@ class WelcomeViewModel
 ) : ViewModel() {
     var selectedCell by mutableStateOf(Cell(-1, -1, 0))
 
-    // all heart shaped
+    // all heart shaped ❤
     val previewBoard = SudokuParser().parseBoard(
         board = listOf(
-    "072000350340502018100030009800000003030000070050000020008000600000103000760050041",
-    "017000230920608054400010009200000001060000020040000090002000800000503000390020047",
-    "052000180480906023600020007500000008020000060030000090005000300000708000370060014",
-    "025000860360208017700010003600000002040000090030000070006000100000507000490030058",
-    "049000380280309056600050007300000002010000030070000090003000800000604000420080013",
-    "071000420490802073300060009200000007060000090010000080007000900000703000130090068",
-    "023000190150402086800050004700000008090000030080000010008000700000306000530070029",
-    "097000280280706013300080007600000002040000060030000090001000400000105000860040051",
-    "049000180160904023700010004200000008090000060080000050005000600000706000470020031"
+            "072000350340502018100030009800000003030000070050000020008000600000103000760050041",
+            "017000230920608054400010009200000001060000020040000090002000800000503000390020047",
+            "052000180480906023600020007500000008020000060030000090005000300000708000370060014",
+            "025000860360208017700010003600000002040000090030000070006000100000507000490030058",
+            "049000380280309056600050007300000002010000030070000090003000800000604000420080013",
+            "071000420490802073300060009200000007060000090010000080007000900000703000130090068",
+            "023000190150402086800050004700000008090000030080000010008000700000306000530070029",
+            "097000280280706013300080007600000002040000060030000090001000400000105000860040051",
+            "049000180160904023700010004200000008090000060080000050005000600000706000470020031"
         ).random(),
         gameType = GameType.Default9x9
     )