feat: Make the timer clickable to show the current focus interval count

Focus interval count shown is not live, this will be implemented in the next commit. #21

app/src/main/java/org/nsh07/pomodoro/ui/timerScreen/TimerScreen.kt

@@ -12,10 +12,16 @@ import android.os.Build
 import androidx.activity.compose.rememberLauncherForActivityResult
 import androidx.activity.result.contract.ActivityResultContracts
 import androidx.compose.animation.AnimatedContent
+import androidx.compose.animation.AnimatedVisibility
 import androidx.compose.animation.animateColorAsState
+import androidx.compose.animation.expandVertically
+import androidx.compose.animation.fadeIn
+import androidx.compose.animation.fadeOut
+import androidx.compose.animation.shrinkVertically
 import androidx.compose.animation.slideInVertically
 import androidx.compose.animation.slideOutVertically
 import androidx.compose.animation.togetherWith
+import androidx.compose.foundation.clickable
 import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
@@ -41,14 +47,20 @@ import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButtonDefaults
 import androidx.compose.material3.MaterialTheme.colorScheme
 import androidx.compose.material3.MaterialTheme.motionScheme
+import androidx.compose.material3.MaterialTheme.shapes
 import androidx.compose.material3.MaterialTheme.typography
 import androidx.compose.material3.Text
 import androidx.compose.material3.TopAppBar
 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.setValue
 import androidx.compose.ui.Alignment
+import androidx.compose.ui.Alignment.Companion.CenterHorizontally
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.StrokeCap
 import androidx.compose.ui.graphics.drawscope.Stroke
 import androidx.compose.ui.platform.LocalDensity
@@ -170,15 +182,15 @@ fun TimerScreen(
                 }
             },
             subtitle = {},
-            titleHorizontalAlignment = Alignment.CenterHorizontally
+            titleHorizontalAlignment = CenterHorizontally
         )
 
         Column(
             verticalArrangement = Arrangement.Center,
-            horizontalAlignment = Alignment.CenterHorizontally,
+            horizontalAlignment = CenterHorizontally,
             modifier = Modifier.fillMaxSize()
         ) {
-            Column(horizontalAlignment = Alignment.CenterHorizontally) {
+            Column(horizontalAlignment = CenterHorizontally) {
                 Box(contentAlignment = Alignment.Center) {
                     if (timerState.timerMode == TimerMode.FOCUS) {
                         CircularProgressIndicator(
@@ -217,17 +229,41 @@ fun TimerScreen(
                             gapSize = 16.dp
                         )
                     }
-                    Text(
+                    var expanded by remember { mutableStateOf(timerState.showBrandTitle) }
-                        text = timerState.timeStr,
+                    Column(
-                        style = TextStyle(
+                        horizontalAlignment = CenterHorizontally,
-                            fontFamily = openRundeClock,
+                        modifier = Modifier
-                            fontWeight = FontWeight.Bold,
+                            .clip(shapes.largeIncreased)
-                            fontSize = 72.sp,
+                            .clickable(onClick = { expanded = !expanded })
-                            letterSpacing = (-2).sp
+                    ) {
-                        ),
+                        LaunchedEffect(timerState.showBrandTitle) {
-                        textAlign = TextAlign.Center,
+                            expanded = timerState.showBrandTitle
-                        maxLines = 1
+                        }
-                    )
+                        Text(
+                            text = timerState.timeStr,
+                            style = TextStyle(
+                                fontFamily = openRundeClock,
+                                fontWeight = FontWeight.Bold,
+                                fontSize = 72.sp,
+                                letterSpacing = (-2).sp
+                            ),
+                            textAlign = TextAlign.Center,
+                            maxLines = 1
+                        )
+                        AnimatedVisibility(
+                            expanded,
+                            enter = fadeIn(motionScheme.defaultEffectsSpec()) +
+                                    expandVertically(motionScheme.defaultSpatialSpec()),
+                            exit = fadeOut(motionScheme.defaultEffectsSpec()) +
+                                    shrinkVertically(motionScheme.defaultSpatialSpec())
+                        ) {
+                            Text(
+                                "1 of 4",
+                                fontFamily = openRundeClock,
+                                style = typography.titleLarge
+                            )
+                        }
+                    }
                 }
                 val interactionSources = remember { List(3) { MutableInteractionSource() } }
                 ButtonGroup(
@@ -393,7 +429,7 @@ fun TimerScreen(
 
             Spacer(Modifier.height(32.dp))
 
-            Column(horizontalAlignment = Alignment.CenterHorizontally) {
+            Column(horizontalAlignment = CenterHorizontally) {
                 Text("Up next", style = typography.titleSmall)
                 Text(
                     timerState.nextTimeStr,