feat: add some basic interactive animations (#46)

Reviewed-on: #46

composeApp/src/androidMain/kotlin/su/reya/coop/App.kt

@@ -4,7 +4,6 @@ import android.app.Activity
 import android.content.Intent
 import android.os.Build
 import androidx.activity.ComponentActivity
-import androidx.activity.compose.BackHandler
 import androidx.compose.foundation.isSystemInDarkTheme
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.ExperimentalMaterial3ExpressiveApi
@@ -134,10 +133,6 @@ fun App(
         else -> expressiveLightColorScheme()
     }
 
-    BackHandler(enabled = backStack.size > 1) {
-        navigator.goBack()
-    }
-
     LaunchedEffect(Unit) {
         launch {
             accountViewModel.errorEvents.collect { message ->

composeApp/src/androidMain/kotlin/su/reya/coop/screens/HomeScreen.kt

@@ -7,6 +7,7 @@ import android.os.Build
 import android.provider.Settings
 import androidx.activity.compose.rememberLauncherForActivityResult
 import androidx.activity.result.contract.ActivityResultContracts
+import androidx.compose.animation.AnimatedVisibility
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
@@ -86,6 +87,7 @@ import coop.composeapp.generated.resources.ic_new_chat
 import coop.composeapp.generated.resources.ic_qr
 import coop.composeapp.generated.resources.ic_request
 import coop.composeapp.generated.resources.ic_scanner
+import kotlinx.coroutines.flow.flowOf
 import kotlinx.coroutines.launch
 import org.jetbrains.compose.resources.painterResource
 import rust.nostr.sdk.PublicKey
@@ -249,7 +251,9 @@ fun HomeScreen(
                 modifier = Modifier.padding(top = innerPadding.calculateTopPadding()),
                 verticalArrangement = Arrangement.spacedBy(16.dp),
             ) {
-                if (!isNotificationEnabled && !isBannerDismissed) {
+                AnimatedVisibility(
+                    visible = !isNotificationEnabled && !isBannerDismissed,
+                ) {
                     Surface(
                         modifier = Modifier
                             .fillMaxWidth()
@@ -372,10 +376,14 @@ fun HomeScreen(
                                 }
 
                                 items(ongoing, key = { it.id }) { room ->
-                                    ChatRoom(
-                                        room = room,
-                                        onClick = { navigator.navigate(Screen.Chat(room.id)) }
-                                    )
+                                    Row(
+                                        modifier = Modifier.animateItem()
+                                    ) {
+                                        ChatRoom(
+                                            room = room,
+                                            onClick = { navigator.navigate(Screen.Chat(room.id)) }
+                                        )
+                                    }
                                 }
                             }
                         }
@@ -620,13 +628,16 @@ fun NewRequests(requests: List<Room>) {
     val firstRoom = requests.getOrNull(0)
     val secondRoom = requests.getOrNull(1)
 
-    val firstRoomState by (firstRoom as Room).uiStateFlow(profileCache)
-        .collectAsStateWithLifecycle(RoomUiState())
-    val secondRoomState by (secondRoom ?: firstRoom).uiStateFlow(profileCache)
-        .collectAsStateWithLifecycle(RoomUiState())
+    val firstRoomState by remember(firstRoom?.id) {
+        firstRoom?.uiStateFlow(profileCache) ?: flowOf(RoomUiState())
+    }.collectAsStateWithLifecycle(RoomUiState())
+
+    val secondRoomState by remember(secondRoom?.id) {
+        (secondRoom ?: firstRoom)?.uiStateFlow(profileCache) ?: flowOf(RoomUiState())
+    }.collectAsStateWithLifecycle(RoomUiState())
 
     val supportingText = when {
-        total == 1 -> {
+        total == 1 && firstRoom != null -> {
             val message = firstRoom.lastMessage ?: ""
             "${firstRoomState.name}: $message"
         }
@@ -695,7 +706,8 @@ fun NewRequests(requests: List<Room>) {
 @Composable
 fun ChatRoom(room: Room, onClick: () -> Unit) {
     val profileCache = LocalProfileCache.current
-    val roomState by room.uiStateFlow(profileCache).collectAsStateWithLifecycle(RoomUiState())
+    val roomState by remember(room.id) { room.uiStateFlow(profileCache) }
+        .collectAsStateWithLifecycle(RoomUiState())
 
     ListItem(
         modifier = Modifier.clickable(onClick = onClick),

composeApp/src/androidMain/kotlin/su/reya/coop/screens/NewChatScreen.kt

@@ -185,8 +185,8 @@ fun NewChatScreen(
                             )
                         },
                         text = { Text("Next") },
-                        containerColor = MaterialTheme.colorScheme.tertiary,
-                        contentColor = MaterialTheme.colorScheme.onTertiary,
+                        containerColor = MaterialTheme.colorScheme.tertiaryContainer,
+                        contentColor = MaterialTheme.colorScheme.onTertiaryContainer,
                     )
                 }
             }

composeApp/src/androidMain/kotlin/su/reya/coop/screens/chat/ChatMessage.kt

@@ -1,10 +1,5 @@
 package su.reya.coop.screens.chat
 
-import androidx.compose.animation.AnimatedVisibility
-import androidx.compose.animation.expandVertically
-import androidx.compose.animation.fadeIn
-import androidx.compose.animation.fadeOut
-import androidx.compose.animation.shrinkVertically
 import androidx.compose.foundation.combinedClickable
 import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.layout.Arrangement
@@ -177,11 +172,7 @@ fun ChatMessage(
                     )
                 }
             }
-            AnimatedVisibility(
-                visible = isMessageClicked,
-                enter = fadeIn() + expandVertically(),
-                exit = fadeOut() + shrinkVertically()
-            ) {
+            if (isMessageClicked) {
                 Text(
                     text = model.timestamp,
                     style = MaterialTheme.typography.labelSmall,

composeApp/src/androidMain/kotlin/su/reya/coop/screens/chat/ChatScreen.kt

@@ -146,8 +146,9 @@ fun ChatScreen(
     val groupedMessages =
         remember { derivedStateOf { messages.groupBy { it.createdAt().formatAsGroup() } } }
 
-    val roomState by (room as Room).uiStateFlow(profileCache, currentUser?.publicKey)
-        .collectAsStateWithLifecycle(RoomUiState())
+    val roomState by remember(id, currentUser?.publicKey) {
+        (room as Room).uiStateFlow(profileCache, currentUser?.publicKey)
+    }.collectAsStateWithLifecycle(RoomUiState())
 
     var text by remember { mutableStateOf("") }
     var selectedMessage by remember { mutableStateOf<Pair<MessageModel, Rect>?>(null) }
@@ -295,7 +296,9 @@ fun ChatScreen(
                                                 }
 
                                             Column(
-                                                modifier = Modifier.fillMaxWidth(),
+                                                modifier = Modifier
+                                                    .fillMaxWidth()
+                                                    .animateItem(),
                                                 verticalArrangement = Arrangement.spacedBy(2.dp)
                                             ) {
                                                 replyPreview?.let { ReplyPreview(it, model.isMine) }
@@ -380,8 +383,10 @@ fun ChatScreen(
                             }
 
                             else -> {
-                                replyingTo?.let {
-                                    ReplyBox(it) { replyingTo = null }
+                                AnimatedVisibility(visible = replyingTo != null) {
+                                    replyingTo?.let {
+                                        ReplyBox(it) { replyingTo = null }
+                                    }
                                 }
                                 ChatInput(
                                     value = text,
@@ -420,7 +425,6 @@ fun ChatScreen(
                 }
             }
         )
-
         AnimatedVisibility(
             visible = selectedMessage != null,
             enter = fadeIn(),