Animate user status state change

features/preferences/impl/src/main/kotlin/io/element/android/features/preferences/impl/userstatus/UserStatusView.kt

@@ -7,12 +7,12 @@
 
 package io.element.android.features.preferences.impl.userstatus
 
+import androidx.compose.animation.AnimatedContent
 import androidx.compose.foundation.BorderStroke
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.offset
-import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.sizeIn
 import androidx.compose.foundation.shape.CircleShape
@@ -72,8 +72,19 @@ fun UserStatusView(
     emojiPickerRenderer: EmojiPickerRenderer,
     modifier: Modifier = Modifier,
 ) {
-    when (val pickerState = state.pickerState) {
+    AnimatedContent(
-        UserStatusPickerState.Hidden, UserStatusPickerState.ShowingPicker -> {
+        targetState = state,
+        contentKey = {
+            when (it.pickerState) {
+                UserStatusPickerState.Hidden,
+                UserStatusPickerState.ShowingPicker -> if (state.displayedStatus != null) 0 else 1
+                is UserStatusPickerState.CustomInput -> 2
+            }
+        },
+    ) { userStatusState ->
+        when (val pickerState = userStatusState.pickerState) {
+            UserStatusPickerState.Hidden,
+            UserStatusPickerState.ShowingPicker -> {
                 val displayedStatus = state.displayedStatus
                 if (displayedStatus != null) {
                     CurrentStatusRow(
@@ -88,14 +99,6 @@ fun UserStatusView(
                         modifier = modifier,
                     )
                 }
-            if (pickerState == UserStatusPickerState.ShowingPicker) {
-                UserStatusPickerBottomSheet(
-                    currentRawStatus = state.rawStatus,
-                    onDismiss = { state.eventSink(UserStatusEvent.DismissPicker) },
-                    onSelectPredefinedStatus = { status -> state.eventSink(UserStatusEvent.SetStatus(status)) },
-                    onSelectCustomStatus = { state.eventSink(UserStatusEvent.OpenCustomInput) },
-                )
-            }
             }
             is UserStatusPickerState.CustomInput -> {
                 CustomStatusInputRow(
@@ -111,8 +114,23 @@ fun UserStatusView(
                     onEmojiClick = { state.eventSink(UserStatusEvent.OpenEmojiPicker) },
                     modifier = modifier,
                 )
+            }
+        }
+    }
+    when (val pickerState = state.pickerState) {
+        UserStatusPickerState.Hidden -> Unit
+        UserStatusPickerState.ShowingPicker -> {
+            UserStatusPickerBottomSheet(
+                currentRawStatus = state.rawStatus,
+                onDismiss = { state.eventSink(UserStatusEvent.DismissPicker) },
+                onSelectPredefinedStatus = { status -> state.eventSink(UserStatusEvent.SetStatus(status)) },
+                onSelectCustomStatus = { state.eventSink(UserStatusEvent.OpenCustomInput) },
+            )
+        }
+        is UserStatusPickerState.CustomInput -> {
             when (val sheet = pickerState.emojiPickerSheetState) {
-                EmojiPickerSheetState.Hidden, EmojiPickerSheetState.Loading -> Unit
+                EmojiPickerSheetState.Hidden,
+                EmojiPickerSheetState.Loading -> Unit
                 is EmojiPickerSheetState.Shown -> EmojiPickerBottomSheet(
                     pickerState = sheet.state,
                     emojiPickerRenderer = emojiPickerRenderer,
@@ -133,7 +151,6 @@ private fun EmptyStatusRow(
         content = {
             Text(
                 text = stringResource(R.string.screen_settings_user_status_placeholder),
-                modifier = Modifier.padding(vertical = 16.dp),
             )
         },
         leadingContent = ListItemContent.Icon(IconSource.Vector(CompoundIcons.Reaction())),
@@ -153,7 +170,7 @@ private fun CurrentStatusRow(
         is DisplayedStatus.InCall -> "🎧" to stringResource(CommonStrings.common_on_a_call)
     }
     ListItem(
-        content = { Text(text = text, modifier = Modifier.padding(vertical = 16.dp)) },
+        content = { Text(text = text) },
         leadingContent = ListItemContent.Custom { EmojiText(emoji) },
         trailingContent = ListItemContent.Custom({
             IconButton(