pawelorzech/Swoosh
1
0
Fork 0
mirror of https://github.com/pawelorzech/Swoosh.git synced 2026-03-31 20:15:41 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: add staggered stats cards and count-up animations

Browse source
This commit is contained in:
Paweł Orzech 2026-03-19 14:24:05 +01:00
parent 188c62f076
commit a6429f16d3
No known key found for this signature in database
1 changed files with 105 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

141
app/src/main/java/com/swoosh/microblog/ui/stats/StatsScreen.kt
View file

@ -1,5 +1,11 @@
package com.swoosh.microblog.ui.stats package com.swoosh.microblog.ui.stats
import androidx.compose.animation.AnimatedVisibility
import androidx.compose.animation.core.animateIntAsState
import androidx.compose.animation.core.tween
import androidx.compose.animation.fadeIn
import androidx.compose.animation.scaleIn
import androidx.compose.animation.slideInVertically
import androidx.compose.foundation.layout.* import androidx.compose.foundation.layout.*
import androidx.compose.foundation.rememberScrollState import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll import androidx.compose.foundation.verticalScroll
@ -17,6 +23,8 @@ import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.dp
import androidx.lifecycle.compose.collectAsStateWithLifecycle import androidx.lifecycle.compose.collectAsStateWithLifecycle
import androidx.lifecycle.viewmodel.compose.viewModel import androidx.lifecycle.viewmodel.compose.viewModel
import com.swoosh.microblog.ui.animation.SwooshMotion
import kotlinx.coroutines.delay
@OptIn(ExperimentalMaterial3Api::class) @OptIn(ExperimentalMaterial3Api::class)
@Composable @Composable
@ -26,6 +34,42 @@ fun StatsScreen(
) { ) {
val state by viewModel.uiState.collectAsStateWithLifecycle() val state by viewModel.uiState.collectAsStateWithLifecycle()
// Staggered entrance for stats cards
val cardVisible = remember { List(4) { mutableStateOf(false) } }
var writingStatsVisible by remember { mutableStateOf(false) }
LaunchedEffect(state.isLoading) {
if (!state.isLoading) {
cardVisible.forEachIndexed { index, vis ->
delay(SwooshMotion.StaggerDelayMs * index)
vis.value = true
}
delay(SwooshMotion.StaggerDelayMs * 4)
writingStatsVisible = true
}
}
// Animated counters (ST3)
val animatedTotal by animateIntAsState(
targetValue = if (!state.isLoading) state.stats.totalPosts else 0,
animationSpec = tween(600),
label = "totalPosts"
)
val animatedPublished by animateIntAsState(
targetValue = if (!state.isLoading) state.stats.publishedCount else 0,
animationSpec = tween(600),
label = "published"
)
val animatedDrafts by animateIntAsState(
targetValue = if (!state.isLoading) state.stats.draftCount else 0,
animationSpec = tween(600),
label = "drafts"
)
val animatedScheduled by animateIntAsState(
targetValue = if (!state.isLoading) state.stats.scheduledCount else 0,
animationSpec = tween(600),
label = "scheduled"
)
Scaffold( Scaffold(
topBar = { topBar = {
TopAppBar( TopAppBar(
@ -65,36 +109,56 @@ fun StatsScreen(
modifier = Modifier.fillMaxWidth(), modifier = Modifier.fillMaxWidth(),
horizontalArrangement = Arrangement.spacedBy(12.dp) horizontalArrangement = Arrangement.spacedBy(12.dp)
) { ) {
StatsCard( AnimatedVisibility(
visible = cardVisible[0].value,
modifier = Modifier.weight(1f), modifier = Modifier.weight(1f),
value = "${state.stats.totalPosts}", enter = scaleIn(animationSpec = SwooshMotion.bouncy()) + fadeIn(SwooshMotion.quick())
label = "Total Posts", ) {
icon = Icons.AutoMirrored.Filled.Article StatsCard(
) value = "$animatedTotal",
StatsCard( label = "Total Posts",
icon = Icons.AutoMirrored.Filled.Article
)
}
AnimatedVisibility(
visible = cardVisible[1].value,
modifier = Modifier.weight(1f), modifier = Modifier.weight(1f),
value = "${state.stats.publishedCount}", enter = scaleIn(animationSpec = SwooshMotion.bouncy()) + fadeIn(SwooshMotion.quick())
label = "Published", ) {
icon = Icons.Default.Create StatsCard(
) value = "$animatedPublished",
label = "Published",
icon = Icons.Default.Create
)
}
} }
Row( Row(
modifier = Modifier.fillMaxWidth(), modifier = Modifier.fillMaxWidth(),
horizontalArrangement = Arrangement.spacedBy(12.dp) horizontalArrangement = Arrangement.spacedBy(12.dp)
) { ) {
StatsCard( AnimatedVisibility(
visible = cardVisible[2].value,
modifier = Modifier.weight(1f), modifier = Modifier.weight(1f),
value = "${state.stats.draftCount}", enter = scaleIn(animationSpec = SwooshMotion.bouncy()) + fadeIn(SwooshMotion.quick())
label = "Drafts", ) {
icon = Icons.Default.TextFields StatsCard(
) value = "$animatedDrafts",
StatsCard( label = "Drafts",
icon = Icons.Default.TextFields
)
}
AnimatedVisibility(
visible = cardVisible[3].value,
modifier = Modifier.weight(1f), modifier = Modifier.weight(1f),
value = "${state.stats.scheduledCount}", enter = scaleIn(animationSpec = SwooshMotion.bouncy()) + fadeIn(SwooshMotion.quick())
label = "Scheduled", ) {
icon = Icons.Default.Schedule StatsCard(
) value = "$animatedScheduled",
label = "Scheduled",
icon = Icons.Default.Schedule
)
}
} }
Spacer(modifier = Modifier.height(8.dp)) Spacer(modifier = Modifier.height(8.dp))
@ -106,22 +170,27 @@ fun StatsScreen(
fontWeight = FontWeight.SemiBold fontWeight = FontWeight.SemiBold
) )
OutlinedCard(modifier = Modifier.fillMaxWidth()) { AnimatedVisibility(
Column( visible = writingStatsVisible,
modifier = Modifier.padding(16.dp), enter = slideInVertically(initialOffsetY = { it / 3 }, animationSpec = SwooshMotion.gentle()) + fadeIn(SwooshMotion.quick())
verticalArrangement = Arrangement.spacedBy(12.dp) ) {
) { OutlinedCard(modifier = Modifier.fillMaxWidth()) {
WritingStatRow("Total words written", "${state.stats.totalWords}") Column(
HorizontalDivider() modifier = Modifier.padding(16.dp),
WritingStatRow("Total characters", "${state.stats.totalCharacters}") verticalArrangement = Arrangement.spacedBy(12.dp)
HorizontalDivider() ) {
WritingStatRow("Average post length", "${state.stats.averageWordCount} words") WritingStatRow("Total words written", "${state.stats.totalWords}")
HorizontalDivider() HorizontalDivider()
WritingStatRow("Average characters", "${state.stats.averageCharCount} chars") WritingStatRow("Total characters", "${state.stats.totalCharacters}")
HorizontalDivider() HorizontalDivider()
WritingStatRow("Longest post", "${state.stats.longestPostWords} words") WritingStatRow("Average post length", "${state.stats.averageWordCount} words")
HorizontalDivider() HorizontalDivider()
WritingStatRow("Shortest post", "${state.stats.shortestPostWords} words") WritingStatRow("Average characters", "${state.stats.averageCharCount} chars")
HorizontalDivider()
WritingStatRow("Longest post", "${state.stats.longestPostWords} words")
HorizontalDivider()
WritingStatRow("Shortest post", "${state.stats.shortestPostWords} words")
}
} }
} }