From 41995776f9fbc935b4bbdbb5f339de431d7c9c6c Mon Sep 17 00:00:00 2001
From: Nishant Mishra <nishant.28@outlook.com>
Date: Sun, 29 Jun 2025 18:52:00 +0530
Subject: [PATCH] Animate title bar

---
 .../pomodoro/ui/timerScreen/TimerScreen.kt    | 78 ++++++++++++++-----
 .../pomodoro/ui/viewModel/UiViewModel.kt      |  4 +-
 2 files changed, 62 insertions(+), 20 deletions(-)

diff --git a/app/src/main/java/org/nsh07/pomodoro/ui/timerScreen/TimerScreen.kt b/app/src/main/java/org/nsh07/pomodoro/ui/timerScreen/TimerScreen.kt
index 1cacf19..65ad928 100644
--- a/app/src/main/java/org/nsh07/pomodoro/ui/timerScreen/TimerScreen.kt
+++ b/app/src/main/java/org/nsh07/pomodoro/ui/timerScreen/TimerScreen.kt
@@ -1,12 +1,17 @@
 package org.nsh07.pomodoro.ui.timerScreen
 
+import androidx.compose.animation.AnimatedContent
 import androidx.compose.animation.animateColorAsState
+import androidx.compose.animation.slideInVertically
+import androidx.compose.animation.slideOutVertically
+import androidx.compose.animation.togetherWith
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 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.size
@@ -30,6 +35,7 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
@@ -47,6 +53,7 @@ fun TimerScreen(
     toggleTimer: () -> Unit,
     modifier: Modifier = Modifier
 ) {
+    val motionScheme = motionScheme
     val color by animateColorAsState(
         if (uiState.timerMode == TimerMode.FOCUS) colorScheme.primary
         else colorScheme.tertiary,
@@ -62,29 +69,64 @@ fun TimerScreen(
         else colorScheme.tertiaryContainer,
         animationSpec = motionScheme.slowEffectsSpec()
     )
-    val onColorContainer by animateColorAsState(
-        if (uiState.timerMode == TimerMode.FOCUS) colorScheme.onPrimaryContainer
-        else colorScheme.onTertiaryContainer,
-        animationSpec = motionScheme.slowEffectsSpec()
-    )
 
     Scaffold(
         topBar = {
             TopAppBar(
                 title = {
-                    Text(
-                        when (uiState.timerMode) {
-                            TimerMode.FOCUS -> "Focus"
-                            TimerMode.SHORT_BREAK -> "Short Break"
-                            TimerMode.LONG_BREAK -> "Long Break"
-                        },
-                        style = TextStyle(
-                            fontFamily = interDisplayBlack,
-                            fontSize = 32.sp,
-                            lineHeight = 32.sp,
-                            color = onColorContainer
-                        )
-                    )
+                    AnimatedContent(
+                        uiState.timerMode,
+                        transitionSpec = {
+                            slideInVertically(
+                                animationSpec = motionScheme.slowSpatialSpec(),
+                                initialOffsetY = { (-it * 1.25).toInt() }
+                            ).togetherWith(
+                                slideOutVertically(
+                                    animationSpec = motionScheme.slowSpatialSpec(),
+                                    targetOffsetY = { (it * 1.25).toInt() }
+                                )
+                            )
+                        }
+                    ) {
+                        when (it) {
+                            TimerMode.FOCUS ->
+                                Text(
+                                    "Focus",
+                                    style = TextStyle(
+                                        fontFamily = interDisplayBlack,
+                                        fontSize = 32.sp,
+                                        lineHeight = 32.sp,
+                                        color = colorScheme.onPrimaryContainer
+                                    ),
+                                    textAlign = TextAlign.Center,
+                                    modifier = Modifier.fillMaxWidth()
+                                )
+
+                            TimerMode.SHORT_BREAK -> Text(
+                                "Short Break",
+                                style = TextStyle(
+                                    fontFamily = interDisplayBlack,
+                                    fontSize = 32.sp,
+                                    lineHeight = 32.sp,
+                                    color = colorScheme.onTertiaryContainer
+                                ),
+                                textAlign = TextAlign.Center,
+                                modifier = Modifier.fillMaxWidth()
+                            )
+
+                            TimerMode.LONG_BREAK -> Text(
+                                "Long Break",
+                                style = TextStyle(
+                                    fontFamily = interDisplayBlack,
+                                    fontSize = 32.sp,
+                                    lineHeight = 32.sp,
+                                    color = colorScheme.onTertiaryContainer
+                                ),
+                                textAlign = TextAlign.Center,
+                                modifier = Modifier.fillMaxWidth()
+                            )
+                        }
+                    }
                 },
                 subtitle = {},
                 titleHorizontalAlignment = Alignment.CenterHorizontally
diff --git a/app/src/main/java/org/nsh07/pomodoro/ui/viewModel/UiViewModel.kt b/app/src/main/java/org/nsh07/pomodoro/ui/viewModel/UiViewModel.kt
index 0d78ee5..17f1214 100644
--- a/app/src/main/java/org/nsh07/pomodoro/ui/viewModel/UiViewModel.kt
+++ b/app/src/main/java/org/nsh07/pomodoro/ui/viewModel/UiViewModel.kt
@@ -57,10 +57,10 @@ class UiViewModel : ViewModel() {
             timerJob = viewModelScope.launch {
                 while (true) {
                     if (!uiState.value.timerRunning) break
-                    time--;
+                    time--
 
                     if (time < 0) {
-                        cycles++;
+                        cycles++
 
                         if (cycles % 2 == 0) {
                             time = focusTime