Fix time change animations

core/ui/src/main/java/com/sadellie/unitto/core/ui/datetime/ZonedDateTimeUtils.kt

@@ -49,12 +49,24 @@ fun ZonedDateTime.formatTime(
     }
 
 /**
+ * Formats date time into something like:
+ *
+ * 23:59 or 11:59
+ *
+ * Depends on system preferences
+ *
+ * @see UnittoDateTimeFormatter.time24
  * @see UnittoDateTimeFormatter.time12Short
  */
-fun ZonedDateTime.formatTime12Short(
+fun ZonedDateTime.formatTimeShort(
     locale: Locale,
+    is24Hour: Boolean,
 ): String =
-    format(UnittoDateTimeFormatter.time12Short(locale))
+    if (is24Hour) {
+        format(UnittoDateTimeFormatter.time24(locale))
+    } else {
+        format(UnittoDateTimeFormatter.time12Short(locale))
+    }
 
 /**
  * Formats date time into something like:

feature/datecalculator/src/main/java/com/sadellie/unitto/feature/datecalculator/components/DateTimeSelectorBlock.kt

@@ -45,9 +45,8 @@ import androidx.compose.ui.unit.dp
 import com.sadellie.unitto.core.ui.LocalLocale
 import com.sadellie.unitto.core.ui.common.squashable
 import com.sadellie.unitto.core.ui.datetime.formatDateWeekDayMonthYear
-import com.sadellie.unitto.core.ui.datetime.formatTime
-import com.sadellie.unitto.core.ui.datetime.formatTime12Short
 import com.sadellie.unitto.core.ui.datetime.formatTimeAmPm
+import com.sadellie.unitto.core.ui.datetime.formatTimeShort
 import java.time.ZonedDateTime
 
 @Composable
@@ -61,6 +60,7 @@ internal fun DateTimeSelectorBlock(
     onLongClick: () -> Unit = {},
 ) {
     val locale = LocalLocale.current
+    val is24Hour = DateFormat.is24HourFormat(LocalContext.current)
 
     Column(
         modifier = modifier
@@ -76,7 +76,13 @@ internal fun DateTimeSelectorBlock(
     ) {
         Text(title, style = MaterialTheme.typography.labelMedium)
 
-        if (DateFormat.is24HourFormat(LocalContext.current)) {
+        Column(
+            modifier = Modifier.clickable(
+                indication = rememberRipple(),
+                interactionSource = remember { MutableInteractionSource() },
+                onClick = onTimeClick
+            )
+        ) {
             AnimatedContent(
                 targetState = dateTime,
                 transitionSpec = {
@@ -84,58 +90,29 @@ internal fun DateTimeSelectorBlock(
                             slideOutVertically { height -> -height } + fadeOut() using
                             SizeTransform()
                 },
-                label = "Animated 24 hour",
+                label = "Animated time",
             ) { time ->
                 Text(
-                    modifier = Modifier.clickable(
-                        indication = rememberRipple(),
-                        interactionSource = remember { MutableInteractionSource() },
-                        onClick = onTimeClick
-                    ),
-                    text = time.formatTime(locale, true),
+                    text = time.formatTimeShort(locale, is24Hour),
                     style = MaterialTheme.typography.displaySmall,
                     maxLines = 1
                 )
             }
-        } else {
-            Column(
-                modifier = Modifier.clickable(
-                    indication = rememberRipple(),
-                    interactionSource = remember { MutableInteractionSource() },
-                    onClick = onTimeClick
-                )
-            ) {
-                AnimatedContent(
-                    targetState = dateTime,
-                    transitionSpec = {
-                        slideInVertically { height -> height } + fadeIn() togetherWith
-                                slideOutVertically { height -> -height } + fadeOut() using
-                                SizeTransform()
-                    },
-                    label = "Animated 12 hour",
-                ) { time ->
-                    Text(
-                        text = time.formatTime12Short(locale),
-                        style = MaterialTheme.typography.displaySmall,
-                        maxLines = 1
-                    )
-                }
 
-                AnimatedContent(
-                    targetState = dateTime,
-                    transitionSpec = {
-                        slideInVertically { height -> height } + fadeIn() togetherWith
-                                slideOutVertically { height -> -height } + fadeOut() using
-                                SizeTransform()
-                    },
-                    label = "Animated am/pm",
-                ) { time ->
-                    Text(
-                        text = time.formatTimeAmPm(locale),
-                        style = MaterialTheme.typography.bodyLarge,
-                        maxLines = 1
-                    )
-                }
+            AnimatedContent(
+                targetState = dateTime,
+                transitionSpec = {
+                    slideInVertically { height -> height } + fadeIn() togetherWith
+                            slideOutVertically { height -> -height } + fadeOut() using
+                            SizeTransform()
+                },
+                label = "Animated am/pm",
+            ) { time ->
+                Text(
+                    text = time.formatTimeAmPm(locale),
+                    style = MaterialTheme.typography.bodyLarge,
+                    maxLines = 1
+                )
             }
         }
 

feature/timezone/src/main/java/com/sadellie/unitto/feature/timezone/components/UserTimeZone.kt

@@ -33,6 +33,7 @@ import androidx.compose.foundation.background
 import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.padding
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.outlined.History
@@ -45,13 +46,13 @@ import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.LocalContext
-import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import com.sadellie.unitto.core.ui.LocalLocale
 import com.sadellie.unitto.core.ui.common.squashable
 import com.sadellie.unitto.core.ui.datetime.formatDateDayMonthYear
+import com.sadellie.unitto.core.ui.datetime.formatTimeAmPm
 import com.sadellie.unitto.core.ui.datetime.formatTimeHours
 import com.sadellie.unitto.core.ui.datetime.formatTimeMinutes
 import com.sadellie.unitto.core.ui.datetime.formatZone
@@ -89,9 +90,13 @@ internal fun UserTimeZone(
             Row(
                 verticalAlignment = Alignment.Bottom
             ) {
-                SlidingText(text = userTime.formatTimeHours(locale, is24Hour))
+                SlidingText(userTime.formatTimeHours(locale, is24Hour))
                 TimeSeparator()
-                SlidingText(text = userTime.formatTimeMinutes(locale))
+                SlidingText(userTime.formatTimeMinutes(locale))
+                Spacer(Modifier.padding(4.dp))
+                if (!is24Hour) {
+                    SlidingText(userTime.formatTimeAmPm(locale))
+                }
             }
 
             Text(
@@ -119,7 +124,6 @@ internal fun UserTimeZone(
 @Composable
 private fun SlidingText(
     text: String,
-    style: TextStyle = MaterialTheme.typography.displayLarge
 ) {
     AnimatedContent(
         targetState = text,
@@ -132,7 +136,7 @@ private fun SlidingText(
     ) { target ->
         Text(
             text = target,
-            style = style,
+            style = MaterialTheme.typography.displayLarge,
             color = MaterialTheme.colorScheme.onTertiaryContainer,
             overflow = TextOverflow.Visible,
             maxLines = 1
@@ -141,14 +145,13 @@ private fun SlidingText(
 }
 
 @Composable
-private fun TimeSeparator(
-    text: String = ":",
-    style: TextStyle = MaterialTheme.typography.displayLarge
-) {
+private fun TimeSeparator() {
     Text(
-        text = text,
-        style = style,
-        color = MaterialTheme.colorScheme.onTertiaryContainer
+        text = ":",
+        style = MaterialTheme.typography.displayLarge,
+        color = MaterialTheme.colorScheme.onTertiaryContainer,
+        overflow = TextOverflow.Visible,
+        maxLines = 1
     )
 }