feat: added a settings screen to enable the user to change the defaul… (

#362)

zeapp/android/src/main/java/de/berlindroid/zeapp/ZeMainActivity.kt

@@ -103,4 +103,5 @@ class ZeMainActivity : ComponentActivity() {
 const val ROUTE_HOME = "home"
 const val ROUTE_ABOUT = "about"
 const val ROUTE_OPENSOURCE = "opensource"
+const val ROUTE_SETTINGS = "settings"
 const val ROUTE_ZEPASS = "zepass"

zeapp/android/src/main/java/de/berlindroid/zeapp/zeservices/ZePreferencesService.kt

@@ -5,6 +5,7 @@ import androidx.datastore.core.DataStore
 import androidx.datastore.preferences.SharedPreferencesMigration
 import androidx.datastore.preferences.core.Preferences
 import androidx.datastore.preferences.core.edit
+import androidx.datastore.preferences.core.intPreferencesKey
 import androidx.datastore.preferences.core.stringPreferencesKey
 import androidx.datastore.preferences.preferencesDataStore
 import dagger.hilt.android.qualifiers.ApplicationContext
@@ -40,6 +41,7 @@ class ZePreferencesService @Inject constructor(
         val OPEN_API_PREFERENCES_KEY = stringPreferencesKey("openapi")
         const val TYPE_KEY = "type"
         const val IMAGE_KEY = "bitmap"
+        val THEME_KEY = intPreferencesKey("theme")
     }
 
     private val dataStore = context.dataStore
@@ -116,6 +118,17 @@ class ZePreferencesService @Inject constructor(
         }
     }
 
+    suspend fun getThemeSettings(): Int {
+        return dataStore.data.map { preferences -> preferences[THEME_KEY] ?: 0 }
+            .first()
+    }
+
+    suspend fun setThemeSettings(themeSettings: Int) {
+        dataStore.edit { preferences ->
+            preferences[THEME_KEY] = themeSettings
+        }
+    }
+
     suspend fun getSlotConfiguration(slot: ZeSlot): ZeConfiguration? {
         return dataStore.data.mapNotNull { preferences ->
 

zeapp/android/src/main/java/de/berlindroid/zeapp/zeui/zehome/ZeDrawerContent.kt

@@ -89,6 +89,7 @@ internal fun ZeDrawerContent(
     onGotoContributors: () -> Unit = {},
     onGotoOpenSourceClick: () -> Unit = {},
     onGotoZePass: () -> Unit = {},
+    onGoToSettings: () -> Unit = {},
     onUpdateConfig: () -> Unit = {},
     onCloseDrawer: () -> Unit = {},
     onTitleClick: () -> Unit = {},
@@ -150,6 +151,30 @@ internal fun ZeDrawerContent(
 
             item { Divider() }
 
+            item {
+                NavDrawerItem(
+                    painter = painterResource(id = R.drawable.ic_settings),
+                    text = stringResource(id = R.string.ze_navdrawer_settings),
+                    onClick = onGoToSettings,
+                    onCloseDrawer = onCloseDrawer,
+                )
+            }
+
+            item { Divider() }
+
+            item {
+                HorizontalDivider(
+                    thickness = 0.dp,
+                    color = MaterialTheme.colorScheme.background,
+                    modifier = Modifier.padding(
+                        start = 0.dp,
+                        end = 0.dp,
+                        top = 16.dp,
+                        bottom = 16.dp,
+                    ),
+                )
+            }
+
             item {
                 NavDrawerItem(
                     text = stringResource(id = R.string.ze_navdrawer_contributors),

zeapp/android/src/main/java/de/berlindroid/zeapp/zeui/zehome/ZeScreen.kt

@@ -22,10 +22,12 @@ import androidx.navigation.compose.rememberNavController
 import de.berlindroid.zeapp.ROUTE_ABOUT
 import de.berlindroid.zeapp.ROUTE_HOME
 import de.berlindroid.zeapp.ROUTE_OPENSOURCE
+import de.berlindroid.zeapp.ROUTE_SETTINGS
 import de.berlindroid.zeapp.ROUTE_ZEPASS
 import de.berlindroid.zeapp.zeui.ZeNavigationPad
 import de.berlindroid.zeapp.zeui.zeabout.ZeAbout
 import de.berlindroid.zeapp.zeui.zeopensource.ZeOpenSource
+import de.berlindroid.zeapp.zeui.zesettings.ZeSettings
 import de.berlindroid.zeapp.zeui.zetheme.ZeBadgeAppTheme
 import de.berlindroid.zeapp.zevm.ZeBadgeViewModel
 import kotlinx.coroutines.CoroutineScope
@@ -85,6 +87,7 @@ internal fun ZeScreen(vm: ZeBadgeViewModel, modifier: Modifier = Modifier) {
     }
 
     ZeBadgeAppTheme(
+        themeSettings = vm.uiState.value.themeSettings ?: 0,
         content = {
             ModalNavigationDrawer(
                 drawerState = drawerState,
@@ -96,6 +99,7 @@ internal fun ZeScreen(vm: ZeBadgeViewModel, modifier: Modifier = Modifier) {
                         onGotoContributors = { routeTo(ROUTE_ABOUT) },
                         onGotoOpenSourceClick = { routeTo(ROUTE_OPENSOURCE) },
                         onGotoZePass = { routeTo(ROUTE_ZEPASS) },
+                        onGoToSettings = { routeTo(ROUTE_SETTINGS) },
                         onUpdateConfig = vm::listConfiguration,
                         onCloseDrawer = {
                             scope.launch {
@@ -154,6 +158,19 @@ internal fun ZeScreen(vm: ZeBadgeViewModel, modifier: Modifier = Modifier) {
                             )
                             ZeOpenSource(paddingValues)
                         }
+                        composable(ROUTE_SETTINGS) {
+                            DrawerBackHandler(
+                                drawerState = drawerState,
+                                scope = scope,
+                            )
+                            ZeSettings(
+                                paddingValues = paddingValues,
+                                themeSettings = vm.uiState.value.themeSettings ?: 0,
+                                onThemeChange = {
+                                    vm.setThemeSettings(it)
+                                },
+                            )
+                        }
                     }
                 }
             }

zeapp/android/src/main/java/de/berlindroid/zeapp/zeui/zesettings/ZeSettings.kt

@@ -0,0 +1,91 @@
+package de.berlindroid.zeapp.zeui.zesettings
+
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.DropdownMenuItem
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.ExposedDropdownMenuBox
+import androidx.compose.material3.ExposedDropdownMenuDefaults
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.OutlinedTextField
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun ZeSettings(
+    paddingValues: PaddingValues,
+    themeSettings: Int,
+    onThemeChange: (Int) -> Unit,
+) {
+    val themes = listOf("System", "Dark", "Light")
+    var expanded by remember { mutableStateOf(false) }
+    var selectedTheme by remember { mutableStateOf(themes[themeSettings]) }
+
+    Column(
+        modifier = Modifier
+            .fillMaxSize()
+            .padding(paddingValues)
+            .padding(horizontal = 16.dp),
+    ) {
+        ExposedDropdownMenuBox(
+            expanded = expanded,
+            onExpandedChange = { expanded = it },
+        ) {
+            OutlinedTextField(
+                value = selectedTheme,
+                onValueChange = {},
+                readOnly = true,
+                trailingIcon = { ExposedDropdownMenuDefaults.TrailingIcon(expanded = expanded) },
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .menuAnchor(),
+                label = { Text("Theme") },
+            )
+
+            ExposedDropdownMenu(
+                expanded = expanded,
+                onDismissRequest = { expanded = false },
+            ) {
+                themes.forEach { theme ->
+                    DropdownMenuItem(
+                        text = { Text(text = theme) },
+                        onClick = {
+                            selectedTheme = theme
+                            expanded = false
+                            onThemeChange(themes.indexOf(selectedTheme))
+                        },
+                    )
+                }
+            }
+        }
+        Spacer(modifier = Modifier.height(16.dp))
+        Text(
+            text = "Restart the app to see the changes",
+            modifier = Modifier.fillMaxWidth(),
+            color = MaterialTheme.colorScheme.onSurface.copy(alpha = 0.5f),
+        )
+    }
+}
+
+@Preview
+@Composable
+fun ZeSettingsPreview() {
+    ZeSettings(
+        paddingValues = PaddingValues(16.dp),
+        themeSettings = 0,
+        onThemeChange = {},
+    )
+}

zeapp/android/src/main/java/de/berlindroid/zeapp/zeui/zetheme/ZeTheme.kt

@@ -2,6 +2,7 @@ package de.berlindroid.zeapp.zeui.zetheme
 
 import android.app.Activity
 import androidx.compose.foundation.isSystemInDarkTheme
+import androidx.compose.material3.ColorScheme
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.darkColorScheme
 import androidx.compose.material3.lightColorScheme
@@ -34,16 +35,23 @@ private val LightColorScheme = lightColorScheme(
 
 @Composable
 fun ZeBadgeAppTheme(
-    darkTheme: Boolean = isSystemInDarkTheme(),
+    themeSettings: Int,
     content: @Composable () -> Unit,
 ) {
-    val colorScheme = if (darkTheme) DarkColorScheme else LightColorScheme
+    val colorScheme: ColorScheme
+    if (themeSettings == 0) {
+        colorScheme = if (isSystemInDarkTheme()) DarkColorScheme else LightColorScheme
+    } else {
+        colorScheme = if (themeSettings == 1) DarkColorScheme else LightColorScheme
+    }
+
+    val isDarkTheme = colorScheme == DarkColorScheme
 
     val view = LocalView.current
     if (!view.isInEditMode) {
         SideEffect {
             val window = (view.context as Activity).window
-            WindowCompat.getInsetsController(window, view).isAppearanceLightStatusBars = !darkTheme
+            WindowCompat.getInsetsController(window, view).isAppearanceLightStatusBars = !isDarkTheme
         }
     }
 

zeapp/android/src/main/java/de/berlindroid/zeapp/zevm/ZeBadgeViewModel.kt

@@ -520,6 +520,16 @@ class ZeBadgeViewModel @Inject constructor(
         showMessage("Copied")
     }
 
+    fun setThemeSettings(themeSettings: Int) {
+        _uiState.update {
+            it.copy(themeSettings = themeSettings)
+        }
+
+        viewModelScope.launch(Dispatchers.IO) {
+            preferencesService.setThemeSettings(themeSettings)
+        }
+    }
+
     /**
      * Loads data from Datastore
      */
@@ -529,8 +539,10 @@ class ZeBadgeViewModel @Inject constructor(
                 initialConfiguration(it)
             }
 
+            val themeSettings = preferencesService.getThemeSettings()
+
             _uiState.update {
-                it.copy(slots = slots)
+                it.copy(slots = slots, themeSettings = themeSettings)
             }
         }
     }
@@ -545,6 +557,7 @@ class ZeBadgeViewModel @Inject constructor(
             currentTemplateChooser = null,
             slots = emptyMap(),
             currentBadgeConfig = null,
+            themeSettings = null,
         )
 
     fun clearErrorState() {
@@ -559,6 +572,7 @@ data class ZeBadgeUiState(
     val currentTemplateChooser: ZeTemplateChooser?, // if that is not null, we are currently configuring which editor / template to use
     val slots: Map<ZeSlot, ZeConfiguration>,
     val currentBadgeConfig: Map<String, Any?>?,
+    val themeSettings: Int?,
 )
 
 sealed class ZeBadgeErrorUiState {

zeapp/android/src/main/res/drawable/ic_settings.xml

@@ -0,0 +1,5 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android" android:height="24dp" android:tint="#000000" android:viewportHeight="24" android:viewportWidth="24" android:width="24dp">
+
+    <path android:fillColor="@android:color/white" android:pathData="M19.14,12.94c0.04,-0.3 0.06,-0.61 0.06,-0.94c0,-0.32 -0.02,-0.64 -0.07,-0.94l2.03,-1.58c0.18,-0.14 0.23,-0.41 0.12,-0.61l-1.92,-3.32c-0.12,-0.22 -0.37,-0.29 -0.59,-0.22l-2.39,0.96c-0.5,-0.38 -1.03,-0.7 -1.62,-0.94L14.4,2.81c-0.04,-0.24 -0.24,-0.41 -0.48,-0.41h-3.84c-0.24,0 -0.43,0.17 -0.47,0.41L9.25,5.35C8.66,5.59 8.12,5.92 7.63,6.29L5.24,5.33c-0.22,-0.08 -0.47,0 -0.59,0.22L2.74,8.87C2.62,9.08 2.66,9.34 2.86,9.48l2.03,1.58C4.84,11.36 4.8,11.69 4.8,12s0.02,0.64 0.07,0.94l-2.03,1.58c-0.18,0.14 -0.23,0.41 -0.12,0.61l1.92,3.32c0.12,0.22 0.37,0.29 0.59,0.22l2.39,-0.96c0.5,0.38 1.03,0.7 1.62,0.94l0.36,2.54c0.05,0.24 0.24,0.41 0.48,0.41h3.84c0.24,0 0.44,-0.17 0.47,-0.41l0.36,-2.54c0.59,-0.24 1.13,-0.56 1.62,-0.94l2.39,0.96c0.22,0.08 0.47,0 0.59,-0.22l1.92,-3.32c0.12,-0.22 0.07,-0.47 -0.12,-0.61L19.14,12.94zM12,15.6c-1.98,0 -3.6,-1.62 -3.6,-3.6s1.62,-3.6 3.6,-3.6s3.6,1.62 3.6,3.6S13.98,15.6 12,15.6z"/>
+
+</vector>

zeapp/android/src/main/res/values/strings.xml

@@ -62,6 +62,7 @@
     <string name="ze_navdrawer_open_release_page">Open release page</string>
     <string name="ze_navdrawer_contributors">Contributors</string>
     <string name="ze_navdrawer_open_source">Open Source</string>
+    <string name="ze_navdrawer_settings">Settings</string>
     <string name="ze_select_content" tools:ignore="MissingTranslation">Select Content</string>
     <string name="ze_not_added_yet_message" tools:ignore="MissingTranslation">Not added by you yet, please feel free to contribute this editor</string>