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

feat: add empty state, filter, and overlay animations in feed

Browse source
This commit is contained in:
Paweł Orzech 2026-03-19 14:18:31 +01:00
parent 64662f6bd4
commit 71d58008c6
No known key found for this signature in database
1 changed files with 161 additions and 94 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

83
app/src/main/java/com/swoosh/microblog/ui/feed/FeedScreen.kt
View file

@ -9,6 +9,10 @@ import androidx.compose.animation.animateColorAsState
import androidx.compose.animation.core.animateFloatAsState import androidx.compose.animation.core.animateFloatAsState
import androidx.compose.animation.fadeIn import androidx.compose.animation.fadeIn
import androidx.compose.animation.fadeOut import androidx.compose.animation.fadeOut
import androidx.compose.animation.expandVertically
import androidx.compose.animation.shrinkVertically
import androidx.compose.animation.slideOutVertically
import androidx.compose.animation.scaleIn
import androidx.compose.animation.slideInVertically import androidx.compose.animation.slideInVertically
import kotlinx.coroutines.delay import kotlinx.coroutines.delay
import androidx.compose.foundation.gestures.detectTapGestures import androidx.compose.foundation.gestures.detectTapGestures
@ -287,7 +291,11 @@ fun FeedScreen(
.padding(padding) .padding(padding)
) { ) {
// Filter chips bar (only when not searching) // Filter chips bar (only when not searching)
if (!isSearchActive) { AnimatedVisibility(
visible = !isSearchActive,
enter = fadeIn(SwooshMotion.quick()) + expandVertically(),
exit = fadeOut(SwooshMotion.quick()) + shrinkVertically()
) {
FilterChipsBar( FilterChipsBar(
activeFilter = activeFilter, activeFilter = activeFilter,
onFilterSelected = { viewModel.setFilter(it) } onFilterSelected = { viewModel.setFilter(it) }
@ -312,7 +320,11 @@ fun FeedScreen(
} }
// Loading overlay during account switch // Loading overlay during account switch
if (state.isSwitchingAccount) { AnimatedVisibility(
visible = state.isSwitchingAccount,
enter = fadeIn(SwooshMotion.quick()),
exit = fadeOut(SwooshMotion.quick())
) {
Box( Box(
modifier = Modifier.fillMaxSize(), modifier = Modifier.fillMaxSize(),
contentAlignment = Alignment.Center contentAlignment = Alignment.Center
@ -327,7 +339,8 @@ fun FeedScreen(
) )
} }
} }
} else if (isSearchActive && searchQuery.isBlank() && recentSearches.isNotEmpty()) { }
if (!state.isSwitchingAccount && isSearchActive && searchQuery.isBlank() && recentSearches.isNotEmpty()) {
// Show recent searches when search is active but query is empty // Show recent searches when search is active but query is empty
RecentSearchesList( RecentSearchesList(
recentSearches = recentSearches, recentSearches = recentSearches,
@ -336,6 +349,13 @@ fun FeedScreen(
) )
} else if (isSearchActive && searchQuery.isNotBlank() && isSearching) { } else if (isSearchActive && searchQuery.isNotBlank() && isSearching) {
// Searching indicator // Searching indicator
AnimatedVisibility(
visible = true,
enter = fadeIn(SwooshMotion.quick()) + scaleIn(
initialScale = 0.9f,
animationSpec = SwooshMotion.quick()
)
) {
Box( Box(
modifier = Modifier.fillMaxSize(), modifier = Modifier.fillMaxSize(),
contentAlignment = Alignment.Center contentAlignment = Alignment.Center
@ -350,8 +370,16 @@ fun FeedScreen(
) )
} }
} }
}
} else if (isSearchActive && searchQuery.isNotBlank() && searchResults.isEmpty() && !isSearching) { } else if (isSearchActive && searchQuery.isNotBlank() && searchResults.isEmpty() && !isSearching) {
// No results empty state // No results empty state
AnimatedVisibility(
visible = true,
enter = fadeIn(SwooshMotion.quick()) + scaleIn(
initialScale = 0.9f,
animationSpec = SwooshMotion.quick()
)
) {
Box( Box(
modifier = Modifier.fillMaxSize(), modifier = Modifier.fillMaxSize(),
contentAlignment = Alignment.Center contentAlignment = Alignment.Center
@ -381,6 +409,7 @@ fun FeedScreen(
) )
} }
} }
}
} else if (!isSearchActive && displayPosts.isEmpty() && !state.isRefreshing) { } else if (!isSearchActive && displayPosts.isEmpty() && !state.isRefreshing) {
Box( Box(
modifier = Modifier modifier = Modifier
@ -390,9 +419,19 @@ fun FeedScreen(
if (state.isConnectionError && state.error != null) { if (state.isConnectionError && state.error != null) {
// Connection error empty state // Connection error empty state
Column( Column(
modifier = Modifier modifier = Modifier.fillMaxSize(),
.fillMaxSize() verticalArrangement = Arrangement.Center,
.padding(horizontal = 32.dp), horizontalAlignment = Alignment.CenterHorizontally
) {
AnimatedVisibility(
visible = true,
enter = fadeIn(SwooshMotion.quick()) + scaleIn(
initialScale = 0.9f,
animationSpec = SwooshMotion.quick()
)
) {
Column(
modifier = Modifier.padding(horizontal = 32.dp),
verticalArrangement = Arrangement.Center, verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally horizontalAlignment = Alignment.CenterHorizontally
) { ) {
@ -420,12 +459,24 @@ fun FeedScreen(
Text("Retry") Text("Retry")
} }
} }
}
}
} else { } else {
// Filter-aware empty state // Filter-aware empty state
Column( Column(
modifier = Modifier.fillMaxSize(), modifier = Modifier.fillMaxSize(),
verticalArrangement = Arrangement.Center, verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally horizontalAlignment = Alignment.CenterHorizontally
) {
AnimatedVisibility(
visible = true,
enter = fadeIn(SwooshMotion.quick()) + scaleIn(
initialScale = 0.9f,
animationSpec = SwooshMotion.quick()
)
) {
Column(
horizontalAlignment = Alignment.CenterHorizontally
) { ) {
Text( Text(
text = activeFilter.emptyMessage(), text = activeFilter.emptyMessage(),
@ -448,6 +499,8 @@ fun FeedScreen(
} }
} }
} }
}
}
PullRefreshIndicator( PullRefreshIndicator(
refreshing = state.isRefreshing, refreshing = state.isRefreshing,
@ -495,6 +548,16 @@ fun FeedScreen(
// Normal feed: pinned section + swipe actions // Normal feed: pinned section + swipe actions
// Pinned posts (no section header — pin icon on post) // Pinned posts (no section header — pin icon on post)
if (pinnedPosts.isNotEmpty()) { if (pinnedPosts.isNotEmpty()) {
item(key = "pinned_header") {
Column {
AnimatedVisibility(
visible = true,
enter = fadeIn(SwooshMotion.quick()) + slideInVertically(initialOffsetY = { -it / 2 })
) {
PinnedSectionHeader()
}
}
}
items(pinnedPosts, key = { "pinned_${it.ghostId ?: "local_${it.localId}"}" }) { post -> items(pinnedPosts, key = { "pinned_${it.ghostId ?: "local_${it.localId}"}" }) { post ->
val itemKey = post.ghostId ?: "local_${post.localId}" val itemKey = post.ghostId ?: "local_${post.localId}"
StaggeredItem( StaggeredItem(
@ -921,7 +984,6 @@ fun SwipeablePostCard(
SwipeBackground(dismissState) SwipeBackground(dismissState)
}, },
modifier = Modifier modifier = Modifier
.padding(horizontal = 16.dp, vertical = 4.dp)
.semantics { .semantics {
customActions = listOf( customActions = listOf(
CustomAccessibilityAction("Edit post") { CustomAccessibilityAction("Edit post") {
@ -934,6 +996,10 @@ fun SwipeablePostCard(
} }
) )
} }
) {
Surface(
color = MaterialTheme.colorScheme.surface,
modifier = Modifier.fillMaxWidth()
) { ) {
PostCardContent( PostCardContent(
post = post, post = post,
@ -949,6 +1015,7 @@ fun SwipeablePostCard(
) )
} }
} }
}
@OptIn(ExperimentalMaterial3Api::class) @OptIn(ExperimentalMaterial3Api::class)
@Composable @Composable
@ -985,7 +1052,7 @@ fun SwipeBackground(dismissState: SwipeToDismissBoxState) {
Box( Box(
modifier = Modifier modifier = Modifier
.fillMaxSize() .fillMaxSize()
.background(color, MaterialTheme.shapes.medium) .background(color)
.padding(horizontal = 24.dp), .padding(horizontal = 24.dp),
contentAlignment = alignment contentAlignment = alignment
) { ) {