Fix chevron orientation according to design and animate the change.

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/group/GroupHeaderView.kt

@@ -16,6 +16,8 @@
 
 package io.element.android.features.messages.impl.timeline.components.group
 
+import androidx.compose.animation.core.animateFloatAsState
+import androidx.compose.animation.core.tween
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
@@ -26,6 +28,7 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
@@ -76,9 +79,17 @@ fun GroupHeaderView(
                     color = MaterialTheme.colorScheme.secondary,
                     style = ElementTheme.typography.fontBodyMdRegular,
                 )
+                val rotation: Float by animateFloatAsState(
+                    targetValue = if (isExpanded) 90f else 0f,
+                    animationSpec = tween(
+                        delayMillis = 0,
+                        durationMillis = 300,
+                    ),
+                    label = "chevron"
+                )
                 Icon(
-                    modifier = Modifier.rotate(if (isExpanded) 180f else 0f),
+                    modifier = Modifier.rotate(rotation),
-                    imageVector = CompoundIcons.ChevronDown,
+                    imageVector = CompoundIcons.ChevronRight,
                     contentDescription = null,
                     tint = MaterialTheme.colorScheme.secondary
                 )