Refresh settings screen colors, add option to change number of sessions

app/src/main/java/org/nsh07/pomodoro/ui/settingsScreen/MinuteInputField.kt

@@ -59,7 +59,7 @@ fun MinuteInputField(
                     .background(
                         animateColorAsState(
                             if (state.text.isNotEmpty())
-                                colorScheme.surfaceContainer
+                                colorScheme.surface
                             else colorScheme.errorContainer,
                             motionScheme.defaultEffectsSpec()
                         ).value,

app/src/main/java/org/nsh07/pomodoro/ui/settingsScreen/SettingsScreen.kt

@@ -1,5 +1,6 @@
 package org.nsh07.pomodoro.ui.settingsScreen
 
+import androidx.compose.foundation.background
 import androidx.compose.foundation.horizontalScroll
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
@@ -7,6 +8,7 @@ import androidx.compose.foundation.layout.Row
 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.foundation.layout.width
 import androidx.compose.foundation.lazy.LazyColumn
@@ -16,22 +18,30 @@ import androidx.compose.foundation.text.input.TextFieldState
 import androidx.compose.foundation.text.input.rememberTextFieldState
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.ExperimentalMaterial3ExpressiveApi
+import androidx.compose.material3.Icon
+import androidx.compose.material3.ListItem
 import androidx.compose.material3.LocalTextStyle
 import androidx.compose.material3.MaterialTheme.colorScheme
+import androidx.compose.material3.MaterialTheme.shapes
 import androidx.compose.material3.MaterialTheme.typography
+import androidx.compose.material3.Slider
 import androidx.compose.material3.Text
 import androidx.compose.material3.TopAppBar
 import androidx.compose.material3.TopAppBarDefaults
+import androidx.compose.material3.rememberSliderState
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.DisposableEffect
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
 import androidx.compose.ui.input.nestedscroll.nestedScroll
+import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.text.input.ImeAction
 import androidx.compose.ui.tooling.preview.Devices
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
+import org.nsh07.pomodoro.R
 import org.nsh07.pomodoro.ui.theme.AppFonts.robotoFlexTitle
 import org.nsh07.pomodoro.ui.theme.TomatoTheme
 
@@ -53,6 +63,7 @@ fun SettingsScreen(
     }
 
     val scrollBehavior = TopAppBarDefaults.exitUntilCollapsedScrollBehavior()
+    val sessionsSliderState = rememberSliderState(value = 3f, steps = 3, valueRange = 1f..5f)
 
     Column(modifier.nestedScroll(scrollBehavior.nestedScrollConnection)) {
         TopAppBar(
@@ -67,6 +78,7 @@ fun SettingsScreen(
                 )
             },
             subtitle = {},
+            colors = TopAppBarDefaults.topAppBarColors(containerColor = colorScheme.surfaceContainer),
             titleHorizontalAlignment = Alignment.CenterHorizontally,
             scrollBehavior = scrollBehavior
         )
@@ -74,17 +86,12 @@ fun SettingsScreen(
         LazyColumn(
             verticalArrangement = Arrangement.spacedBy(2.dp),
             modifier = Modifier
+                .background(colorScheme.surfaceContainer)
                 .fillMaxSize()
                 .padding(horizontal = 16.dp)
         ) {
             item {
-                Text(
+                Spacer(Modifier.height(12.dp))
-                    "Timer",
-                    style = typography.titleSmall,
-                    modifier = Modifier
-                        .fillMaxWidth()
-                        .padding(horizontal = 8.dp, vertical = 14.dp)
-                )
             }
             item {
                 Row(
@@ -97,6 +104,10 @@ fun SettingsScreen(
                         horizontalAlignment = Alignment.CenterHorizontally,
                         verticalArrangement = Arrangement.spacedBy(2.dp)
                     ) {
+                        Text(
+                            "Focus",
+                            style = typography.titleSmallEmphasized
+                        )
                         MinuteInputField(
                             state = focusTimeInputFieldState,
                             shape = RoundedCornerShape(
@@ -107,35 +118,31 @@ fun SettingsScreen(
                             ),
                             imeAction = ImeAction.Next
                         )
-                        Text(
-                            "Focus",
-                            style = typography.titleSmallEmphasized,
-                            color = colorScheme.onPrimaryContainer,
-                            modifier = Modifier.padding(horizontal = 8.dp)
-                        )
                     }
                     Spacer(Modifier.width(2.dp))
                     Column(
                         horizontalAlignment = Alignment.CenterHorizontally,
                         verticalArrangement = Arrangement.spacedBy(2.dp)
                     ) {
+                        Text(
+                            "Short break",
+                            style = typography.titleSmallEmphasized
+                        )
                         MinuteInputField(
                             state = shortBreakTimeInputFieldState,
                             shape = RoundedCornerShape(4.dp),
                             imeAction = ImeAction.Next
                         )
-                        Text(
-                            "Short break",
-                            style = typography.titleSmallEmphasized,
-                            color = colorScheme.onTertiaryContainer,
-                            modifier = Modifier.padding(horizontal = 8.dp)
-                        )
                     }
                     Spacer(Modifier.width(2.dp))
                     Column(
                         horizontalAlignment = Alignment.CenterHorizontally,
                         verticalArrangement = Arrangement.spacedBy(2.dp)
                     ) {
+                        Text(
+                            "Long break",
+                            style = typography.titleSmallEmphasized
+                        )
                         MinuteInputField(
                             state = longBreakTimeInputFieldState,
                             shape = RoundedCornerShape(
@@ -146,15 +153,35 @@ fun SettingsScreen(
                             ),
                             imeAction = ImeAction.Done
                         )
-                        Text(
-                            "Long break",
-                            style = typography.titleSmallEmphasized,
-                            color = colorScheme.onTertiaryContainer,
-                            modifier = Modifier.padding(horizontal = 8.dp)
-                        )
                     }
                 }
             }
+            item {
+                Spacer(Modifier.height(12.dp))
+            }
+            item {
+                ListItem(
+                    leadingContent = {
+                        Icon(
+                            painterResource(R.drawable.clocks),
+                            null
+                        )
+                    },
+                    headlineContent = {
+                        Text("Sessions")
+                    },
+                    supportingContent = {
+                        Column {
+                            Text("${sessionsSliderState.value.toInt()} sessions before a long break")
+                            Slider(
+                                state = sessionsSliderState,
+                                modifier = Modifier.padding(vertical = 4.dp)
+                            )
+                        }
+                    },
+                    modifier = Modifier.clip(shapes.large)
+                )
+            }
         }
     }
 }

app/src/main/java/org/nsh07/pomodoro/ui/viewModel/UiViewModel.kt

@@ -213,7 +213,7 @@ class UiViewModel(
                 .debounce(500)
                 .collect {
                     if (it.isNotEmpty()) {
-                        focusTime = preferenceRepository.saveIntPreference(
+                        shortBreakTime = preferenceRepository.saveIntPreference(
                             "short_break_time",
                             it.toString().toInt() * 60 * 1000
                         )
@@ -225,7 +225,7 @@ class UiViewModel(
                 .debounce(500)
                 .collect {
                     if (it.isNotEmpty()) {
-                        focusTime = preferenceRepository.saveIntPreference(
+                        longBreakTime = preferenceRepository.saveIntPreference(
                             "long_break_time",
                             it.toString().toInt() * 60 * 1000
                         )

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

@@ -0,0 +1,13 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:autoMirrored="true"
+    android:tint="#000000"
+    android:viewportWidth="960"
+    android:viewportHeight="960">
+
+    <path
+        android:fillColor="@android:color/white"
+        android:pathData="M400,464v-144q0,-17 -11.5,-28.5T360,280q-17,0 -28.5,11.5T320,320v159q0,8 3,15.5t9,13.5l112,112q11,11 28,11t28,-11q11,-11 11,-28t-11,-28L400,464ZM880,480q0,-72 -33.5,-133.5T754,247q-14,-9 -19,-25t2,-31q8,-16 24,-21t30,4q78,49 123.5,130T960,480q0,95 -45.5,176T791,786q-14,9 -30,4t-24,-21q-7,-15 -2,-31t19,-25q59,-38 92.5,-99.5T880,480ZM360,840q-75,0 -140.5,-28.5t-114,-77q-48.5,-48.5 -77,-114T0,480q0,-75 28.5,-140.5t77,-114q48.5,-48.5 114,-77T360,120q75,0 140.5,28.5t114,77q48.5,48.5 77,114T720,480q0,75 -28.5,140.5t-77,114q-48.5,48.5 -114,77T360,840Z" />
+
+</vector>