From 6bb296240bc327bbdb0e5f1d1b4366ff02a37c09 Mon Sep 17 00:00:00 2001
From: Benoit Marty <benoit@matrix.org>
Date: Thu, 30 Nov 2023 09:51:31 +0100
Subject: [PATCH] Fix chevron orientation according to design and animate the
 change.

---
 .../timeline/components/group/GroupHeaderView.kt  | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/group/GroupHeaderView.kt b/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/group/GroupHeaderView.kt
index 8a4d52c358..1d50509844 100644
--- a/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/group/GroupHeaderView.kt
+++ b/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),
-                    imageVector = CompoundIcons.ChevronDown,
+                    modifier = Modifier.rotate(rotation),
+                    imageVector = CompoundIcons.ChevronRight,
                     contentDescription = null,
                     tint = MaterialTheme.colorScheme.secondary
                 )